:root{--bg:#070914;--panel:#101426;--panel2:#151a31;--text:#f4f7ff;--muted:#9aa5c5;--line:#252c4a;--accent:#7c6cff;--accent2:#20d7c5;--danger:#ff5d73;--ok:#51d88a;--shadow:0 18px 60px rgba(0,0,0,.28);--radius:18px}
[data-theme="light"]{--bg:#f5f7ff;--panel:#fff;--panel2:#f0f3ff;--text:#12172a;--muted:#5c6687;--line:#dce2f5;--shadow:0 18px 50px rgba(31,46,93,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 15% -10%,rgba(124,108,255,.18),transparent 33%),radial-gradient(circle at 100% 0%,rgba(32,215,197,.10),transparent 28%),var(--bg);color:var(--text);font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 32px));margin:auto}.nav{position:relative;top:auto;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.navin{height:70px;display:flex;align-items:center;gap:16px}.brand{font-weight:900;letter-spacing:.3px;font-size:21px}.brand span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.navlinks{display:flex;gap:8px;margin-left:auto;align-items:center}.btn,.chip,button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:10px 14px;font-weight:750;cursor:pointer}.btn.primary,button.primary{border:0;background:linear-gradient(135deg,var(--accent),#5b4bf0);color:white;box-shadow:0 10px 30px rgba(124,108,255,.3)}.btn.ghost{background:transparent}.hero{padding:72px 0 34px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:13px;font-weight:800}h1{font-size:clamp(38px,7vw,76px);line-height:1.02;margin:18px 0;letter-spacing:-2.5px}.gradient{background:linear-gradient(90deg,#9a8cff,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:clamp(17px,2.2vw,22px);color:var(--muted);max-width:800px}.notice{margin:18px 0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent2) 45%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent2) 8%,var(--panel));font-size:14px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.card{grid-column:span 4;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.card h3{margin:8px 0;font-size:20px}.card p{margin:0;color:var(--muted)}.icon{font-size:28px}.section{padding:34px 0 72px}.section h2{font-size:clamp(28px,4vw,44px);margin:0 0 8px}.sub{color:var(--muted);margin:0 0 22px}.sim-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}label{display:block;font-weight:800;margin:14px 0 7px}input,select{width:100%;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px;padding:13px 14px;font:inherit;outline:none}input:focus,select:focus{border-color:var(--accent)}.small{font-size:13px;color:var(--muted)}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.control{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--panel2)}.control label{margin:0 0 6px}.terminal{background:#06080f;color:#dbe5ff;border:1px solid #202845;border-radius:14px;min-height:300px;padding:16px;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:auto}.term-line{opacity:0;transform:translateY(3px);animation:show .22s forwards}@keyframes show{to{opacity:1;transform:none}}.result{display:none;margin-top:18px}.result.show{display:block}.risk{display:flex;align-items:center;gap:16px}.score{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--danger) var(--pct),var(--panel2) 0);position:relative}.score:after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--panel)}.score b{position:relative;z-index:1}.findings{display:grid;gap:10px;margin-top:16px}.finding{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel2)}.finding strong{display:block}.badge{display:inline-block;font-size:12px;font-weight:900;padding:4px 8px;border-radius:999px;margin-right:7px}.high{background:rgba(255,93,115,.15);color:#ff8293}.medium{background:rgba(255,189,89,.15);color:#ffd080}.low{background:rgba(81,216,138,.13);color:#75e7a6}.footer{border-top:1px solid var(--line);padding:30px 0 46px;color:var(--muted)}.footerin{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.breadcrumbs{font-size:13px;color:var(--muted);padding-top:20px}.mode-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}.mode-row button.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,108,255,.15)}
@media(max-width:840px){.card{grid-column:span 6}.sim-wrap{grid-template-columns:1fr}.navlinks .hide-sm{display:none}}@media(max-width:560px){.container{width:min(100% - 20px,1180px)}.card{grid-column:1/-1}.controls{grid-template-columns:1fr}.hero{padding-top:44px}.navin{height:62px}.brand{font-size:18px}.btn{padding:9px 10px}h1{letter-spacing:-1.5px}}
/* Phase 2 */
.sim-card{transition:transform .18s ease,border-color .18s ease}
.sim-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
/* H4-PHASE3-CONTENT */
.prose{max-width:1100px}.prose>p{max-width:850px;color:var(--muted)}
.answer-box{border:1px solid color-mix(in srgb,var(--accent2) 45%,var(--line));background:color-mix(in srgb,var(--accent2) 7%,var(--panel));border-radius:var(--radius);padding:20px;margin:20px 0 28px}
.answer-box strong{font-size:18px}.answer-box p{margin:6px 0 0;color:var(--text)}
.checklist{display:grid;gap:10px;padding-left:24px;max-width:900px}.checklist li{padding:5px 0;color:var(--muted)}
.factor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 30px}.factor{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px}.factor h3{margin:0 0 7px}.factor p{margin:0 0 7px;color:var(--muted)}
.faq{display:grid;gap:10px;max-width:950px}.faq details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}.faq summary{cursor:pointer;font-weight:800}.faq p{color:var(--muted);margin:10px 0 2px}
@media(max-width:720px){.factor-grid{grid-template-columns:1fr}}

/* H4-PHASE4-FINAL — visual/UX audit + non-sticky layout + cyber-lab treatment */
:root{
  --bg:#020407;--panel:#080d12;--panel2:#0c131a;--text:#eafef7;--muted:#8fa9a2;
  --line:#18322d;--accent:#00ff9d;--accent2:#00d9ff;--danger:#ff3b5c;--warn:#ffb84d;
  --ok:#00ff9d;--shadow:0 18px 60px rgba(0,0,0,.44);--radius:16px
}
[data-theme="light"]{
  --bg:#edf7f3;--panel:#ffffff;--panel2:#f4fbf8;--text:#07130f;--muted:#526c64;
  --line:#bddbd0;--accent:#008d5d;--accent2:#007aa3;--shadow:0 14px 40px rgba(0,60,40,.12)
}
body{
  background:
    linear-gradient(rgba(0,255,157,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,157,.025) 1px,transparent 1px),
    radial-gradient(circle at 10% 0%,rgba(0,255,157,.10),transparent 30%),
    radial-gradient(circle at 90% 4%,rgba(0,217,255,.08),transparent 28%),
    var(--bg);
  background-size:32px 32px,32px 32px,auto,auto,auto
}
.nav{
  position:relative!important;
  top:auto!important;
  z-index:5;
  background:rgba(2,4,7,.94);
  border-bottom:1px solid rgba(0,255,157,.28);
  backdrop-filter:none
}
[data-theme="light"] .nav{background:rgba(255,255,255,.96)}
.navin{min-height:70px;height:auto;padding:10px 0;flex-wrap:wrap}
.brand{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.4px}
.brand:before{content:"root@";font-size:12px;color:var(--muted);margin-right:3px}
.brand span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav .btn{box-shadow:none}
.hero{padding:58px 0 34px;border-bottom:1px solid rgba(0,255,157,.08)}
h1{font-size:clamp(38px,6vw,68px);line-height:1.02;letter-spacing:-2px;overflow-wrap:anywhere}
.eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border-color:rgba(0,255,157,.35);color:var(--accent);background:rgba(0,255,157,.05)}
.panel,.card,.factor,.faq details,.answer-box{
  border-color:rgba(0,255,157,.16);
  background:linear-gradient(180deg,rgba(9,15,20,.96),rgba(5,9,13,.96))
}
[data-theme="light"] .panel,[data-theme="light"] .card,[data-theme="light"] .factor,[data-theme="light"] .faq details,[data-theme="light"] .answer-box{background:var(--panel)}
.card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(0,255,157,.5);box-shadow:0 16px 45px rgba(0,255,157,.07)}
.btn.primary,button.primary{
  background:linear-gradient(135deg,#00c97c,#00a9c8);
  color:#00150d;
  text-shadow:none;
  box-shadow:0 0 24px rgba(0,255,157,.16)
}
.btn.primary:hover,button.primary:hover{filter:brightness(1.08)}
.notice{border-color:rgba(0,217,255,.32);background:rgba(0,217,255,.045)}
.sim-wrap{align-items:start}
.sim-wrap>.panel{min-width:0}
.controls{gap:10px}
.control{background:rgba(0,255,157,.025);border-color:rgba(0,255,157,.16)}
input,select{background:#050a0e;border-color:#18352e;color:var(--text)}
[data-theme="light"] input,[data-theme="light"] select{background:var(--panel2)}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,255,157,.08)}
.lab-presets{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 4px;padding:10px;border:1px dashed rgba(0,255,157,.24);border-radius:12px;background:rgba(0,255,157,.025)}
.lab-preset-label{font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);letter-spacing:.12em;margin-right:auto}
.lab-safe{border-color:rgba(0,255,157,.38)!important;color:var(--accent)!important}
.lab-risk{border-color:rgba(255,59,92,.4)!important;color:#ff7890!important}
.terminal{
  min-height:355px;max-height:520px;
  background:#000503;
  color:#bfffe5;
  border:1px solid rgba(0,255,157,.32);
  border-radius:12px;
  padding:0 16px 16px;
  font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow:auto;
  box-shadow:inset 0 0 40px rgba(0,255,157,.035),0 0 28px rgba(0,255,157,.04)
}
.terminal-chrome{
  display:flex;align-items:center;gap:7px;
  margin:0 -16px 12px;padding:10px 12px;
  border-bottom:1px solid rgba(0,255,157,.18);
  background:#050b09;color:#6e9689;
  font-size:11px;letter-spacing:.08em
}
.terminal-chrome strong{margin-left:6px;color:#a5c8bc}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.d1{background:#ff536b}.d2{background:#ffb84d}.d3{background:#00ff9d}
.term-progress{height:3px;background:#0c1a15;margin:0 0 14px;overflow:hidden}
.term-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s ease}
.term-line{display:flex;gap:4px;word-break:break-word}
.term-tag{display:inline-block;min-width:74px;font-weight:900}
.term-safe .term-tag{color:var(--accent)}
.term-warn .term-tag{color:var(--warn)}
.term-danger .term-tag{color:var(--danger)}
.term-info .term-tag{color:#6fdcff}
.result{border-top:1px solid rgba(0,255,157,.12);padding-top:18px}
.risk{align-items:center}
.score{background:conic-gradient(var(--accent) var(--pct),#101a17 0);box-shadow:0 0 24px rgba(0,255,157,.08)}
.score[data-level="medium"]{background:conic-gradient(var(--warn) var(--pct),#19150e 0)}
.score[data-level="high"]{background:conic-gradient(var(--danger) var(--pct),#1d0a0f 0)}
.attack-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:18px 0}
.attack-metrics>div{border:1px solid rgba(0,255,157,.14);background:#050b09;border-radius:10px;padding:10px;text-align:center}
[data-theme="light"] .attack-metrics>div{background:var(--panel2)}
.attack-metrics span{display:block;font:800 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.attack-metrics strong{font:900 18px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.finding{background:#050b09;border-color:rgba(0,255,157,.14)}
[data-theme="light"] .finding{background:var(--panel2)}
.finding-top{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.path-exposed{border-color:rgba(255,59,92,.35);box-shadow:inset 3px 0 0 rgba(255,59,92,.72)}
.path-partial{border-color:rgba(255,184,77,.3);box-shadow:inset 3px 0 0 rgba(255,184,77,.65)}
.path-blocked{border-color:rgba(0,255,157,.22);box-shadow:inset 3px 0 0 rgba(0,255,157,.55)}
.badge.high{background:rgba(255,59,92,.12);color:#ff7890}
.badge.medium{background:rgba(255,184,77,.12);color:#ffd080}
.badge.low{background:rgba(0,255,157,.10);color:#62ffbd}
.breadcrumbs{padding-top:22px;overflow-wrap:anywhere}
.footer{border-top-color:rgba(0,255,157,.16)}
.lab-pill{font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:5px 7px;border:1px solid rgba(0,255,157,.3);border-radius:999px;color:var(--accent);vertical-align:middle}
@media(max-width:900px){
  .attack-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:840px){
  .navin{align-items:flex-start}
  .navlinks{width:100%;margin-left:0;overflow-x:auto;padding-bottom:2px}
  .sim-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .navin{padding:8px 0}.navlinks{gap:6px}.navlinks .hide-sm{display:none}
  .hero{padding-top:36px}
  h1{font-size:clamp(34px,12vw,52px);letter-spacing:-1.3px}
  .attack-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .terminal{min-height:310px;font-size:12px;padding-left:12px;padding-right:12px}
  .terminal-chrome{margin-left:-12px;margin-right:-12px}
  .term-tag{min-width:68px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


/* ===== v4.1 responsive banner ad slots ===== */
.h4-ad-zone{
  width:100%;
  padding:14px 0;
  background:transparent;
}
.h4-ad-zone-top{
  padding-top:18px;
  padding-bottom:8px;
}
.h4-ad-zone-bottom{
  padding-top:26px;
  padding-bottom:18px;
}
.h4-ad-zone-inner{
  display:grid;
  gap:14px;
}
.h4-ad-slot{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  overflow:hidden;
}
.h4-ad-label{
  margin:0 auto 5px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.72;
}
.h4-ad-code{
  width:100%;
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.h4-ad-code > *{
  max-width:100% !important;
}
.h4-ad-code iframe,
.h4-ad-code img{
  max-width:100% !important;
}
@media (max-width:840px){
  .h4-ad-zone{padding-left:0;padding-right:0}
  .h4-ad-zone-inner{gap:10px}
}
@media (max-width:560px){
  .h4-ad-zone{padding-top:10px;padding-bottom:10px}
  .h4-ad-label{font-size:9px}
}