:root {
  color-scheme: light;
  --navy: #003b69;
  --navy-dark: #002c50;
  --blue: #07548b;
  --yellow: #ffe000;
  --yellow-hover: #f2d400;
  --ink: #122235;
  --muted: #657184;
  --line: #dce3ea;
  --soft: #f4f7fa;
  font-family: "Segoe UI", Montserrat, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #fff; }
body { min-height: 100vh; margin: 0; background: #fff; }
svg { display: block; }
.top-line { height: 5px; background: linear-gradient(90deg, var(--navy) 0 76%, var(--yellow) 76%); }

.site-header { position: relative; z-index: 10; padding: 0 34px; background: rgba(255,255,255,.97); border-bottom: 1px solid #eef1f4; box-shadow: 0 5px 22px rgba(6,36,61,.09); }
.header-inner { width: min(1180px,100%); min-height: 94px; margin: auto; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--navy); text-decoration: none; }
.brand-shield { width: 48px; height: 56px; flex: none; }
.brand-copy { display: flex; flex-direction: column; line-height: .82; }
.brand-small { margin-left: 30px; font-size: 15px; font-weight: 800; letter-spacing: .025em; }
.brand-large { color: #111; font-size: 33px; font-weight: 800; letter-spacing: -.055em; }
.header-divider { width: 1px; height: 58px; background: var(--line); }
.header-message { display: flex; align-items: center; gap: 9px; color: #526073; font-size: 14px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #21a366; box-shadow: 0 0 0 4px rgba(33,163,102,.11); }
.help-pill { margin-left: auto; display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: var(--navy); color: white; font-size: 14px; font-weight: 700; }
.help-pill svg { width: 19px; fill: currentColor; }

.hero { position: relative; isolation: isolate; width: min(1180px,calc(100% - 48px)); min-height: calc(100vh - 178px); margin: auto; padding: 72px 0 64px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); align-items: center; gap: clamp(56px,8vw,110px); }
.hero-glow { position: absolute; z-index: -1; border-radius: 999px; pointer-events: none; }
.hero-glow-one { right: -160px; top: 80px; width: 540px; height: 540px; background: radial-gradient(circle,rgba(255,224,0,.18),rgba(255,224,0,0) 68%); }
.hero-glow-two { left: -260px; bottom: -180px; width: 470px; height: 470px; background: radial-gradient(circle,rgba(0,59,105,.09),rgba(0,59,105,0) 70%); }
.network-badge { width: max-content; display: flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 999px; background: #eef5f9; color: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.network-badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,224,0,.18); }
.hero-copy h1 { max-width: 650px; margin: 22px 0 20px; color: var(--navy); font-size: clamp(46px,5.1vw,70px); line-height: .98; letter-spacing: -.045em; }
.hero-copy h1 em { position: relative; display: inline-block; color: var(--navy); font-style: normal; z-index: 1; }
.hero-copy h1 em::after { content: ""; position: absolute; z-index: -1; left: -3px; right: -3px; bottom: 5px; height: 12px; background: var(--yellow); opacity: .78; border-radius: 2px; }
.hero-text { max-width: 620px; margin: 0; color: #526175; font-size: 18px; line-height: 1.62; }
.features { margin-top: 34px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.feature { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid #e2e8ee; border-radius: 16px; background: rgba(255,255,255,.86); box-shadow: 0 9px 30px rgba(0,45,79,.055); }
.feature-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--navy); color: white; }
.feature-icon svg { width: 23px; fill: currentColor; }
.feature strong,.feature small { display: block; }
.feature strong { color: var(--navy); font-size: 14px; }
.feature small { margin-top: 3px; color: #7a8696; font-size: 12px; }
.assistance { margin-top: 24px; color: #7a8696; font-size: 13px; }

.access-panel { position: relative; overflow: hidden; padding: 42px 42px 34px; border: 1px solid #e4e9ee; border-radius: 28px; background: rgba(255,255,255,.97); box-shadow: 0 30px 80px rgba(0,43,77,.17); }
.panel-accent { position: absolute; top: 0; left: 0; right: 0; height: 7px; background: linear-gradient(90deg,var(--navy) 0 80%,var(--yellow) 80%); }
.panel-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 19px; background: var(--yellow); color: var(--navy); box-shadow: 0 13px 26px rgba(255,224,0,.22); }
.panel-icon svg { width: 34px; fill: currentColor; }
.panel-kicker { margin: 25px 0 7px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.access-panel h2 { margin: 0; color: var(--navy); font-size: 31px; letter-spacing: -.035em; }
.panel-description { margin: 9px 0 24px; color: var(--muted); font-size: 14px; }
label { display: block; margin: 17px 0 7px; color: #26384b; font-size: 13px; font-weight: 700; }
.input-wrap { position: relative; }
.input-wrap > svg { position: absolute; left: 15px; top: 50%; width: 19px; transform: translateY(-50%); fill: #8c98a7; pointer-events: none; }
input { width: 100%; min-height: 52px; padding: 13px 15px 13px 46px; border: 1px solid #d5dde5; border-radius: 12px; background: #fbfcfd; color: var(--ink); font: inherit; font-size: 14px; outline: none; transition: border-color .2s,box-shadow .2s,background .2s; }
input:focus { border-color: var(--blue); background: white; box-shadow: 0 0 0 4px rgba(7,84,139,.1); }
button { width: 100%; min-height: 54px; margin-top: 25px; padding: 14px 19px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 999px; background: var(--yellow); color: var(--navy-dark); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 24px rgba(223,194,0,.23); transition: transform .2s,background .2s,box-shadow .2s; }
button:hover { transform: translateY(-2px); background: var(--yellow-hover); box-shadow: 0 15px 27px rgba(223,194,0,.3); }
button svg { width: 20px; fill: currentColor; }
.password-wrap input { padding-right: 49px; }
.password-toggle { position: absolute; right: 8px; top: 50%; width: 38px; min-height: 38px; margin: 0; padding: 0; transform: translateY(-50%); border-radius: 9px; background: transparent; color: #7f8b9a; box-shadow: none; }
.password-toggle:hover { transform: translateY(-50%); background: #edf2f6; box-shadow: none; }
.password-toggle svg { width: 20px; }
.privacy { margin: 20px 0 0; display: flex; align-items: center; justify-content: center; gap: 5px; color: #788596; font-size: 11px; line-height: 1.5; text-align: center; }
.privacy svg { width: 13px; flex: none; fill: var(--blue); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

footer { min-height: 78px; padding: 17px 32px; display: flex; align-items: center; justify-content: center; gap: 18px; background: var(--navy); color: white; text-align: center; }
footer p { margin: 0; font-weight: 700; }
footer span { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.65); font-size: 12px; }

.result-shell { position: relative; min-height: calc(100vh - 177px); padding: 62px 24px; display: grid; place-items: center; background: radial-gradient(circle at 80% 20%,rgba(255,224,0,.15),transparent 28rem),var(--soft); }
.result-card { width: min(860px,100%); padding: 48px; border: 1px solid #e0e6ec; border-radius: 28px; background: white; box-shadow: 0 25px 70px rgba(0,43,77,.13); }
.result-icon { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 22px; background: var(--yellow); color: var(--navy); }
.result-icon svg { width: 42px; fill: currentColor; }
.result-card h1 { max-width: 700px; margin: 8px 0 14px; color: var(--navy); font-size: clamp(34px,5vw,51px); line-height: 1.04; letter-spacing: -.04em; }
.result-lead { max-width: 700px; margin: 0 0 25px; color: #596779; font-size: 17px; line-height: 1.55; }
.alert-box { padding: 18px 21px; border-left: 5px solid var(--yellow); border-radius: 0 14px 14px 0; background: #fffbea; }
.alert-box strong { color: var(--navy); }
.alert-box p { margin: 6px 0 0; color: #5d6875; font-size: 14px; line-height: 1.5; }
.lesson-grid { margin-top: 25px; display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
.lesson-grid article { display: flex; gap: 13px; padding: 18px; border: 1px solid #e1e7ed; border-radius: 15px; background: #fbfcfd; }
.lesson-grid article > span { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--navy); color: white; font-size: 11px; font-weight: 800; }
.lesson-grid strong { color: var(--navy); font-size: 14px; }
.lesson-grid p { margin: 5px 0 0; color: #697687; font-size: 12px; line-height: 1.45; }
.result-footnote { margin: 24px 0 0; color: #84909f; font-size: 12px; text-align: center; }

.alert-page .result-shell { display: block; }
.cyber-warning { position: relative; overflow: hidden; width: min(860px,100%); margin: 0 auto; border-radius: 28px; background: linear-gradient(135deg,#d00018,#a80012); color: white; box-shadow: 0 25px 65px rgba(163,0,18,.25); }
.warning-stripes { height: 18px; background: repeating-linear-gradient(135deg,#ffdf00 0 14px,#171717 14px 28px); }
.warning-content { padding: 34px 39px 38px; display: flex; align-items: center; gap: 27px; }
.danger-shield { width: 92px; height: 100px; flex: none; display: grid; place-items: center; border: 4px solid white; border-radius: 28px 28px 38px 38px; background: rgba(255,255,255,.1); }
.danger-shield svg { width: 58px; fill: white; }
.warning-copy { min-width: 0; }
.warning-kicker { margin: 0 0 6px; color: #ffdf00; font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.warning-copy h1 { margin: 0; color: white; font-size: clamp(34px,5vw,52px); line-height: 1.02; letter-spacing: -.04em; }
.warning-copy > p:not(.warning-kicker) { max-width: 630px; margin: 13px 0 18px; color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.45; }
.warning-tag { display: inline-block; padding: 8px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(0,0,0,.14); color: white; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.alert-page .result-card { margin: 22px auto 0; }

.scare-shell { min-height: calc(100vh - 177px); padding: 42px 20px; display: grid; place-items: center; background: radial-gradient(circle at 50% 20%,rgba(209,0,24,.13),transparent 34rem),#eef1f3; animation:alertBackdrop 1.6s ease-in-out infinite; }
.scare-warning { position: relative; overflow: hidden; width: min(850px,100%); border-radius: 30px; background: linear-gradient(145deg,#dc001b,#a70013 72%); color: white; box-shadow: 0 30px 80px rgba(149,0,17,.3); text-align: center; animation:alertPanel 1.6s ease-in-out infinite; }
.scare-warning::before,.scare-warning::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.11); border-radius:50%; pointer-events:none; }
.scare-warning::before { width:470px; height:470px; right:-280px; top:80px; }
.scare-warning::after { width:290px; height:290px; left:-190px; bottom:50px; }
.scare-content { position:relative; z-index:1; padding: 43px 58px 38px; }
.scare-pulse { width:102px; height:112px; margin:0 auto 22px; display:grid; place-items:center; border:5px solid white; border-radius:30px 30px 43px 43px; background:rgba(255,255,255,.09); animation:dangerPulse 1s ease-in-out infinite; }
.scare-pulse svg { width:65px; fill:white; }
.scare-kicker { margin:0 0 11px; color:#ffdf00; font-size:13px; font-weight:900; letter-spacing:.19em; }
.scare-content h1 { max-width:700px; margin:0 auto; color:white; font-size:clamp(43px,7vw,68px); line-height:.96; letter-spacing:-.045em; }
.scare-lead { max-width:670px; margin:22px auto 26px; color:rgba(255,255,255,.91); font-size:20px; line-height:1.45; }
.scare-action { max-width:610px; margin:0 auto; padding:20px 22px; border:2px solid #ffdf00; border-radius:16px; background:rgba(0,0,0,.17); }
.scare-action strong,.scare-action span { display:block; }
.scare-action strong { color:#ffdf00; font-size:17px; letter-spacing:.07em; }
.scare-action span { margin-top:7px; color:white; font-size:14px; line-height:1.45; }
.stop-alert { width:auto; min-height:44px; margin:24px auto 0; padding:11px 18px; border:1px solid rgba(255,255,255,.48); border-radius:999px; background:transparent; color:white; box-shadow:none; font-size:13px; }
.stop-alert:hover { transform:none; background:rgba(255,255,255,.12); box-shadow:none; }
.stop-alert:disabled { opacity:.65; cursor:default; }
.stop-alert svg { width:17px; }
.scare-footer { position:relative; z-index:1; padding:17px 22px; border-top:1px solid rgba(255,255,255,.2); background:rgba(67,0,8,.3); color:rgba(255,255,255,.8); font-size:11px; font-weight:800; letter-spacing:.13em; }
@keyframes dangerPulse { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(255,223,0,.38); } 50% { transform:scale(1.06); box-shadow:0 0 0 15px rgba(255,223,0,0); } }
@keyframes alertBackdrop { 0%,100% { background-color:#eef1f3; box-shadow:inset 0 0 0 rgba(201,0,22,0); } 50% { background-color:#f3d7da; box-shadow:inset 0 0 90px rgba(201,0,22,.3); } }
@keyframes alertPanel { 0%,100% { filter:brightness(1); box-shadow:0 30px 80px rgba(149,0,17,.3); } 50% { filter:brightness(1.16); box-shadow:0 30px 95px rgba(201,0,22,.58),0 0 0 8px rgba(255,223,0,.2); } }

@media (prefers-reduced-motion: reduce) {
  .scare-shell,.scare-warning,.scare-pulse { animation:none; }
}

.spam-overlay[hidden] { display:none !important; }
.spam-overlay { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:18px; background:rgba(12,16,22,.78); backdrop-filter:blur(5px); }
.spam-card { width:min(430px,100%); overflow:hidden; border:3px solid #ffdf00; border-radius:18px; background:#fff; box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 7px rgba(210,0,25,.22); animation:spamEntrance .22s ease-out,spamGlow 1.6s ease-in-out infinite; }
.spam-bar { min-height:48px; padding:7px 9px 7px 17px; display:flex; align-items:center; justify-content:space-between; background:#171717; color:#ffdf00; font-size:11px; font-weight:900; letter-spacing:.13em; }
.spam-close { width:34px; height:34px; min-height:0; padding:0; display:grid; place-items:center; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:#c90016; color:#fff; box-shadow:none; font-size:25px; line-height:1; }
.spam-close:hover { transform:none; background:#e0001a; box-shadow:none; }
.spam-body { padding:30px 27px 24px; text-align:center; }
.spam-icon { width:72px; height:72px; margin:0 auto 16px; display:grid; place-items:center; border-radius:50%; background:#c90016; color:#fff; box-shadow:0 0 0 9px rgba(201,0,22,.12); font-size:44px; font-weight:900; }
.spam-label { margin:0 0 9px; color:#c90016; font-size:10px; font-weight:900; letter-spacing:.14em; }
.spam-body h2 { margin:0; color:#101828; font-size:31px; line-height:1.05; }
.spam-body > p:not(.spam-label) { margin:14px 0 21px; color:#586574; font-size:15px; line-height:1.5; }
.spam-action { width:100%; background:#c90016; color:#fff; }
.spam-action:hover { background:#aa0013; }
.spam-exit { width:auto; min-height:38px; margin:11px auto 0; padding:7px 12px; background:transparent; color:#536273; box-shadow:none; font-size:12px; text-decoration:underline; }
.spam-exit:hover { transform:none; background:#f1f3f5; box-shadow:none; }
@keyframes spamEntrance { from { transform:scale(.86) translateY(22px); opacity:0; } to { transform:scale(1) translateY(0); opacity:1; } }
@keyframes spamGlow { 0%,100% { box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 7px rgba(210,0,25,.18); } 50% { box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 14px rgba(255,223,0,.27); } }

@media (prefers-reduced-motion: reduce) {
  .spam-card { animation:none; }
}

@media (max-width: 900px) {
  .site-header { padding: 0 20px; }
  .header-inner { min-height: 82px; }
  .header-message,.header-divider { display: none; }
  .hero { width: min(620px,calc(100% - 32px)); min-height: auto; padding: 52px 0; grid-template-columns: 1fr; gap: 42px; }
  .hero-copy { text-align: center; }
  .network-badge { margin-inline: auto; }
  .hero-copy h1,.hero-text { margin-left: auto; margin-right: auto; }
  .assistance { text-align: center; }
}

@media (max-width: 560px) {
  .site-header { padding: 0 15px; }
  .header-inner { min-height: 74px; }
  .brand-shield { width: 36px; height: 43px; }
  .brand-small { margin-left: 21px; font-size: 10px; }
  .brand-large { font-size: 25px; }
  .help-pill { padding: 9px 12px; font-size: 0; }
  .help-pill svg { width: 20px; }
  .hero { padding: 38px 0; gap: 32px; }
  .hero-copy h1 { font-size: 42px; }
  .hero-text { font-size: 16px; }
  .features { grid-template-columns: 1fr; }
  .access-panel { padding: 34px 22px 27px; border-radius: 22px; }
  .panel-icon { width: 55px; height: 55px; }
  .access-panel h2 { font-size: 28px; }
  footer { flex-direction: column; gap: 5px; }
  footer span { padding-left: 0; border-left: 0; }
  .result-shell { padding: 28px 14px; }
  .result-card { padding: 30px 21px; border-radius: 21px; }
  .lesson-grid { grid-template-columns: 1fr; }
  .cyber-warning { border-radius: 21px; }
  .warning-content { padding: 27px 22px 29px; align-items: flex-start; gap: 15px; }
  .danger-shield { width: 60px; height: 68px; border-width: 3px; border-radius: 18px 18px 24px 24px; }
  .danger-shield svg { width: 40px; }
  .warning-copy h1 { font-size: 31px; }
  .warning-copy > p:not(.warning-kicker) { font-size: 14px; }
  .warning-tag { border-radius: 10px; line-height: 1.35; }
  .scare-shell { min-height:calc(100vh - 157px); padding:28px 14px; }
  .scare-warning { border-radius:22px; }
  .scare-content { padding:32px 20px 27px; }
  .scare-pulse { width:76px; height:84px; margin-bottom:18px; border-width:4px; border-radius:22px 22px 31px 31px; }
  .scare-pulse svg { width:50px; }
  .scare-kicker { font-size:11px; }
  .scare-content h1 { font-size:40px; }
  .scare-lead { margin:18px auto 22px; font-size:17px; }
  .scare-action { padding:17px 16px; }
  .scare-action strong { font-size:15px; }
}