/* ===== Tokens ===== */
:root{
  --bg:#0b0f14;
  --surface:#111820;
  --surface-2:#161f29;
  --border:#232f3c;
  --text:#e7edf3;
  --text-dim:#9aabbc;
  --accent:#3ddc97;      /* signal green - "allowed" */
  --danger:#ff5d5d;      /* "exposed" */
  --warn:#ffb84d;
  --link:#5fb4ff;
  --radius:10px;
  --font-display:'Outfit',sans-serif;
  --font-body:'Inter',sans-serif;
  --maxw:1180px;
}
[data-theme="light"]{
  --bg:#f6f8fa;
  --surface:#ffffff;
  --surface-2:#eef2f5;
  --border:#dbe2e8;
  --text:#101820;
  --text-dim:#54626f;
  --accent:#0f9d63;
  --danger:#d0362f;
  --warn:#b0700a;
  --link:#0b63c5;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;margin:0 0 .5em;}
p{margin:0 0 1em;color:var(--text-dim);}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}
code{background:var(--surface-2);padding:.15em .4em;border-radius:5px;font-size:.9em;color:var(--text);}
ul{list-style:none;margin:0;padding:0;}
.section-inner{max-width:var(--maxw);margin:0 auto;padding:64px 24px;}
.section-inner.narrow{max-width:820px;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#04150d;padding:10px 16px;z-index:999;}
.skip-link:focus{left:12px;top:12px;}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:24px;
}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);flex-shrink:0;}
.brand:hover{text-decoration:none;}
.brand-mark{color:var(--accent);display:flex;}
.brand-text{font-family:var(--font-display);font-weight:700;font-size:1.05rem;white-space:nowrap;}
.brand-accent{color:var(--accent);}

/* ===== Desktop nav (#mainNav) — horizontal bar, always in flow ===== */
#mainNav{flex:1;min-width:0;}
#mainNav ul{display:flex;gap:6px;align-items:center;}
#mainNav .nav-link{
  background:none;border:none;font:inherit;color:var(--text-dim);
  padding:10px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:.92rem;
}
#mainNav .nav-link:hover{color:var(--text);background:var(--surface-2);text-decoration:none;}
#mainNav .chev{opacity:.7;}
#mainNav .has-dropdown{position:relative;}
#mainNav .dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  width:460px;
  max-width:90vw;
  padding:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  z-index:50;
}
#mainNav .has-dropdown.open .dropdown-menu{display:block;column-count:2;column-gap:4px;}
#mainNav .dropdown-menu li{break-inside:avoid;}
#mainNav .dropdown-menu li a{
  display:block;padding:8px 10px;border-radius:6px;color:var(--text-dim);font-size:.82rem;line-height:1.3;
}
#mainNav .dropdown-menu li a:hover{background:var(--surface-2);color:var(--text);text-decoration:none;}

.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.icon-btn{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-moon{display:none;}
[data-theme="light"] .icon-sun{display:none;}
[data-theme="light"] .icon-moon{display:block;}
.nav-toggle{display:none;flex-direction:column;gap:4px;justify-content:center;}
.nav-toggle span{width:18px;height:2px;background:var(--text);display:block;}

/* ===== Mobile nav (.mobile-nav / #mobile-nav) — separate off-canvas element ===== */
.mobile-nav{
  display:none; /* hidden entirely on desktop, shown only under the 720px media query below */
}
.mobile-nav-backdrop{
  display:none;
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:98;
}
.mobile-nav-backdrop[hidden]{display:none;}

/* ===== Breadcrumb ===== */
.breadcrumb-bar{border-bottom:1px solid var(--border);}
.breadcrumb{display:flex;gap:8px;max-width:var(--maxw);margin:0 auto;padding:12px 24px;font-size:.82rem;color:var(--text-dim);flex-wrap:wrap;}
.breadcrumb a{color:var(--text-dim);}
.breadcrumb li[aria-current]{color:var(--text);}

/* ===== Hero ===== */
.hero{padding:72px 24px 40px;}
.hero-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;}
.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;margin-bottom:14px;}
.hero h1{font-size:clamp(2rem,4vw,3rem);}
.lede{font-size:1.08rem;max-width:52ch;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 18px;}
.hero-trust{display:flex;gap:18px;flex-wrap:wrap;color:var(--text-dim);font-size:.82rem;}
.hero-trust li::before{content:"✓ ";color:var(--accent);}

.url-demo{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.url-demo-bar{background:var(--surface-2);padding:10px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.dot-r{background:#ff5f57;}.dot-y{background:#febc2e;}.dot-g{background:#28c840;}
.url-text{margin-left:8px;font-size:.78rem;color:var(--text-dim);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#demoId{color:var(--text);font-weight:700;}
.url-demo-body{padding:22px;}
.url-demo-row{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:16px;}
#idSlider{width:100%;accent-color:var(--accent);}
.url-demo-caption{font-size:.8rem;margin:12px 0 0;}
.url-demo.exposed #demoStatus{color:var(--danger);}
.url-demo.exposed .lock-icon::before{content:"🔓";}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:9px;font-weight:600;font-size:.92rem;
  border:1px solid transparent;cursor:pointer;font-family:var(--font-body);
}
.btn-primary{background:var(--accent);color:#04150d;}
.btn-primary:hover{filter:brightness(1.08);text-decoration:none;}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text);}
.btn-ghost:hover{background:var(--surface-2);text-decoration:none;}
.btn-small{padding:8px 14px;font-size:.82rem;}
.btn-danger-outline{background:transparent;border-color:var(--danger);color:var(--danger);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-spinner{display:none;width:14px;height:14px;border:2px solid rgba(0,0,0,.25);border-top-color:#04150d;border-radius:50%;animation:spin .7s linear infinite;}
.btn.loading .btn-spinner{display:inline-block;}
.btn.loading .btn-label{opacity:.7;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== More tools grid ===== */
.more-tools{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);}
.section-kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:16px;}
.tools-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.tools-grid a{
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:12px 12px;font-size:.8rem;color:var(--text);text-align:center;
}
.tools-grid a:hover{border-color:var(--accent);text-decoration:none;}

/* ===== Tool form ===== */
.tool-section{background:var(--bg);}
.section-lede{max-width:70ch;}
.tool-form{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;margin-top:24px;}
.tool-label{display:block;font-weight:600;margin-bottom:8px;font-size:.9rem;}
textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;
  color:var(--text);padding:14px;font-family:monospace;font-size:.88rem;resize:vertical;
}
textarea:focus,input:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.field-row{display:flex;justify-content:space-between;align-items:center;margin:8px 0 4px;font-size:.8rem;flex-wrap:wrap;gap:6px;}
.live-validation{margin:0;color:var(--text-dim);}
.live-validation.ok{color:var(--accent);}
.live-validation.warn{color:var(--warn);}
.char-count{color:var(--text-dim);}
.form-actions{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;}
.form-error{color:var(--danger);font-size:.84rem;margin:10px 0 0;min-height:1em;}

/* ===== Results ===== */
.results-section{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);scroll-margin-top:90px;}
.results-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.results-actions{display:flex;gap:8px;}
.results-actions[hidden]{display:none;}
.results-body{margin-top:18px;}
.results-placeholder{color:var(--text-dim);}
.finding{border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px;background:var(--surface-2);}
.finding-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.severity{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.03em;}
.severity-high{background:rgba(255,93,93,.15);color:var(--danger);}
.severity-medium{background:rgba(255,184,77,.15);color:var(--warn);}
.severity-low{background:rgba(61,220,151,.15);color:var(--accent);}
.finding pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;overflow-x:auto;font-size:.8rem;margin:10px 0 0;}
.score-banner{display:flex;align-items:center;gap:16px;padding:16px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);margin-bottom:18px;}
.score-num{font-family:var(--font-display);font-size:2rem;font-weight:700;}

/* ===== Features ===== */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;}
.feature-icon{font-size:1.6rem;margin-bottom:10px;}

/* ===== How it works ===== */
.how-it-works{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.steps li{display:flex;flex-direction:column;gap:10px;}
.step-num{
  width:34px;height:34px;border-radius:50%;background:var(--accent);color:#04150d;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);
}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--text);
  font-family:var(--font-display);font-size:1.02rem;padding:18px 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
}
.faq-q::after{content:"+";font-size:1.3rem;color:var(--accent);}
.faq-q[aria-expanded="true"]::after{content:"−";}
.faq-a{display:none;padding-bottom:16px;}
.faq-item.open .faq-a{display:block;}

/* ===== Share ===== */
.share-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:32px 24px;}
.share-btn{
  width:36px;height:36px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text);font-size:.8rem;font-weight:700;
}
.share-btn:hover{border-color:var(--accent);text-decoration:none;}

/* ===== CTA ===== */
.cta{background:linear-gradient(135deg,var(--surface),var(--surface-2));border-top:1px solid var(--border);}
.cta-inner{text-align:center;}
.cta-buttons{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap;}

/* ===== Footer ===== */
.site-footer{background:var(--surface);border-top:1px solid var(--border);}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:24px;padding-bottom:24px;}
.footer-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:12px;}
.footer-col ul li{margin-bottom:8px;}
.footer-col a{color:var(--text-dim);font-size:.86rem;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;padding-bottom:32px;font-size:.78rem;color:var(--text-dim);}
.disclaimer{max-width:70ch;}

/* ===== Cookie banner ===== */
.cookie-banner{
  position:fixed;bottom:16px;left:16px;right:16px;max-width:520px;margin:0 auto;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  box-shadow:0 20px 50px rgba(0,0,0,.3);z-index:200;
}
.cookie-banner[hidden]{display:none;}
.cookie-banner p{margin:0;font-size:.82rem;flex:1;min-width:200px;}

/* ===== Responsive ===== */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .tools-grid{grid-template-columns:repeat(3,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  #mainNav{display:none;} /* desktop nav fully removed from layout below 720px */
  .nav-toggle{display:flex;}
  .tools-grid{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .hero{padding-top:40px;}

  /* #mobile-nav is a distinct element from #mainNav — off-canvas panel,
     completely separate rule set, so nothing from the desktop bar can bleed in. */
  .mobile-nav{
    display:block;
    position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);
    background:var(--bg);border-left:1px solid var(--border);
    padding:80px 20px 20px;overflow-y:auto;
    transform:translateX(100%);transition:transform .25s ease;
    z-index:99;
  }
  .mobile-nav.open{transform:translateX(0);}
  .mobile-nav ul{display:flex;flex-direction:column;gap:2px;}
  .mobile-nav .nav-link{
    width:100%;justify-content:space-between;background:none;border:none;font:inherit;
    color:var(--text-dim);padding:12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:.95rem;
  }
  .mobile-nav .nav-link:hover{color:var(--text);background:var(--surface-2);}
  .mobile-nav .has-dropdown{position:relative;}
  .mobile-nav .dropdown-menu{
    display:none;position:static;width:100%;padding:4px 0 4px 12px;
    max-height:50vh;overflow-y:auto;
  }
  .mobile-nav .has-dropdown.open .dropdown-menu{display:block;}
  .mobile-nav .dropdown-menu li a{display:block;padding:9px 10px;border-radius:6px;color:var(--text-dim);font-size:.86rem;}
  .mobile-nav .dropdown-menu li a:hover{background:var(--surface-2);color:var(--text);}

  .mobile-nav-backdrop{display:block;}
}

@media (max-width:420px){
  .footer-top{grid-template-columns:1fr;}
  .tools-grid{grid-template-columns:1fr 1fr;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}