/* ===== NahNotToday — landing styles ===== */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-sans-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-sans-600-normal.woff2') format('woff2');}
:root{
  --bg:#08090f;
  --bg-2:#0c0e17;
  --surface:#10131f;
  --surface-2:#161a2b;
  --surface-3:#1d2238;
  --line:rgba(255,255,255,0.075);
  --line-strong:rgba(255,255,255,0.14);

  --violet:#7a63f5;
  --violet-deep:#523aca;
  --violet-glow:rgba(82,58,202,0.45);

  --cyan:#3ee0e6;
  --cyan-dim:#2bc3c9;
  --cyan-ink:#9af0f3;

  --text:#eceefb;
  --muted:#9a9eba;
  --faint:#9295b0;

  --ok:#4fd99a;
  --warn:#ffb84d;
  --danger:#ff6b6b;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;

  --maxw:1180px;
  --radius:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--cyan);color:#04141a;}

.amb{position:fixed;border-radius:50%;filter:blur(160px);pointer-events:none;z-index:0;}
.amb--v{width:700px;height:700px;background:rgba(82,58,202,0.45);top:-260px;left:-180px;opacity:.5;}
.amb--c{width:580px;height:580px;background:rgba(62,224,230,0.18);top:40%;right:-220px;opacity:.6;}
main{position:relative;z-index:1;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2;}

/* ===== type ===== */
.eyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan-ink);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 12px var(--cyan);}
h1,h2,h3{font-family:var(--mono);font-weight:600;letter-spacing:-0.01em;line-height:1.08;margin:0;}
h1{font-size:clamp(38px,6vw,72px);letter-spacing:-0.025em;}
h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-0.02em;}
h3{font-size:20px;letter-spacing:-0.01em;}
code{font-family:var(--mono);font-size:.9em;color:var(--cyan-ink);}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:60ch;text-wrap:pretty;}
.accent{color:var(--cyan);}
.violet{color:var(--violet);}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);}

section{padding:clamp(72px,9vw,128px) 0;position:relative;z-index:2;}
.section-head{max-width:720px;margin-bottom:54px;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head .lead{margin-top:18px;}

/* ===== buttons ===== */
.btn{
  font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;}
.btn-primary{
  background:var(--cyan);color:#04141a;
  box-shadow:0 0 0 1px rgba(62,224,230,.5),0 14px 40px -10px rgba(62,224,230,.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(62,224,230,.7),0 22px 54px -12px rgba(62,224,230,.7);}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border-color:var(--line-strong);}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:var(--cyan);transform:translateY(-2px);}
.btn-support{background:linear-gradient(120deg,var(--violet) 0%,var(--violet-deep) 100%);color:#fff;box-shadow:0 12px 36px -12px var(--violet-glow);}
.btn-support:hover{transform:translateY(-2px);box-shadow:0 20px 48px -12px var(--violet-glow);}
.btn-sm{padding:11px 18px;font-size:13.5px;}

/* ===== header ===== */
header.site{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);background:rgba(8,9,15,0.55);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
header.site.scrolled{border-color:var(--line);background:rgba(8,9,15,0.82);}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;width:100%;}
.brand{display:flex;align-items:center;gap:11px;flex:1;}
.brand img{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);}
.brand .name{font-family:var(--mono);font-weight:600;font-size:16px;letter-spacing:-.01em;}
.brand .name b{color:var(--cyan);font-weight:600;}
.nav-links{display:flex;gap:26px;align-items:center;flex-wrap:nowrap;}
.nav-links a{font-family:var(--mono);font-size:13.5px;color:var(--muted);letter-spacing:.02em;transition:color .2s;white-space:nowrap;}
.nav-links a:hover{color:var(--text);}
.brand .name{white-space:nowrap;}
.nav-cta{display:flex;align-items:center;gap:14px;flex:none;margin-left:14px;}
.menu-btn{display:none;}
@media(max-width:1040px){.nav-links{display:none;}}

/* ===== hero ===== */
.hero{padding-top:clamp(56px,7vw,96px);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:44px;}}
.hero h1{margin:22px 0 0;}
.hero .lead{margin:24px 0 0;}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.trust-row{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:30px;font-family:var(--mono);font-size:12.5px;color:var(--faint);letter-spacing:.04em;}
.trust-row span{display:inline-flex;align-items:center;gap:8px;}
.trust-row b{color:var(--cyan-ink);font-weight:500;}
.dot{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);}

/* fingerprint panel */
.fp{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-strong);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(122,99,245,.06) inset;
}
.fp-top{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.2);}
.fp-top .ttl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.lights{display:flex;gap:7px;}
.lights i{width:11px;height:11px;border-radius:50%;background:var(--surface-3);display:block;}
.fp-rows{padding:8px 0;}
.fp-row{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center;padding:13px 20px;font-family:var(--mono);font-size:13px;border-bottom:1px solid rgba(255,255,255,.04);}
.fp-row:last-child{border-bottom:0;}
.fp-row .lbl{color:var(--faint);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;}
.fp-row .val{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:9px;}
.fp-row .val .tag{font-size:10px;padding:2px 7px;border-radius:5px;letter-spacing:.08em;text-transform:uppercase;flex:none;}
.tag.exposed{background:rgba(255,107,107,.14);color:#ff9a9a;}
.tag.spoofed{background:rgba(62,224,230,.14);color:var(--cyan);}
.fp-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-top:1px solid var(--line);background:rgba(0,0,0,.22);}
.fp-status{font-family:var(--mono);font-size:12.5px;color:var(--muted);}
.fp-status b{color:var(--danger);}
.fp.on .fp-status b{color:var(--ok);}
.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.switch{width:50px;height:27px;border-radius:20px;background:var(--surface-3);border:1px solid var(--line-strong);position:relative;transition:background .25s,border-color .25s;flex:none;}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#cfd2e8;transition:transform .25s,background .25s;}
.fp.on .switch{background:rgba(62,224,230,.28);border-color:var(--cyan);}
.fp.on .switch::after{transform:translateX(23px);background:var(--cyan);}

/* ===== generic cards / grid ===== */
.grid{display:grid;gap:18px;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
@media(max-width:960px){.g4{grid-template-columns:repeat(2,1fr);}.g3{grid-template-columns:1fr;}}
@media(max-width:620px){.g4,.g2{grid-template-columns:1fr;}}
/* 5 vectors: 3 on top, 2 centred below */
.g-vec{grid-template-columns:repeat(6,1fr);}
.g-vec>*{grid-column:span 2;}
.g-vec>*:nth-child(4){grid-column:2/span 2;}
.g-vec>*:nth-child(5){grid-column:4/span 2;}
@media(max-width:960px){.g-vec{grid-template-columns:repeat(2,1fr);}.g-vec>*,.g-vec>*:nth-child(4),.g-vec>*:nth-child(5){grid-column:auto;}}
@media(max-width:620px){.g-vec{grid-template-columns:1fr;}}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;position:relative;transition:border-color .25s,transform .25s,background .25s;
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);}
.card h3{margin-bottom:10px;}
.card p{color:var(--muted);font-size:15px;margin:0;}
.card .ic{
  width:42px;height:42px;border-radius:10px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(122,99,245,.12);border:1px solid rgba(122,99,245,.25);color:var(--violet);
}
.card .ic svg{width:21px;height:21px;}
.card .num{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.1em;}

/* feature card with mono code accent */
.feat .codeline{font-family:var(--mono);font-size:11.5px;color:var(--cyan-ink);margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);letter-spacing:.02em;word-break:break-all;}

/* ===== problem section ===== */
.problem-vis{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px;
  font-family:var(--mono);font-size:13px;
}
.sig-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);color:var(--muted);}
.sig-row:last-child{border:0;}
.sig-row .v{color:var(--text);}
.hash-out{margin-top:20px;padding:18px;border-radius:10px;background:#000;border:1px solid var(--line-strong);text-align:center;}
.hash-out .lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.hash-out .h{font-family:var(--mono);font-size:clamp(15px,2.4vw,22px);color:var(--danger);margin-top:8px;letter-spacing:.02em;word-break:break-all;}

/* ===== steps ===== */
.step{position:relative;padding-top:8px;}
.step .n{font-family:var(--mono);font-size:46px;font-weight:600;color:transparent;-webkit-text-stroke:1.4px var(--violet);line-height:1;display:block;margin-bottom:18px;}
.step h3{margin-bottom:9px;}
.step p{color:var(--muted);font-size:15px;}

.carousel{overflow:hidden;border-radius:12px;border:1px solid var(--line-strong);}
.carousel-track{display:flex;}
.carousel-track img{min-width:100%;width:100%;height:auto;display:block;}
.carousel-dots{display:flex;justify-content:center;gap:8px;padding:14px 0 4px;}
.carousel-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--line-strong);cursor:pointer;padding:0;transition:background .2s,transform .2s;}
.carousel-dots button.active{background:var(--cyan);transform:scale(1.3);}

/* ===== stats / tests ===== */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;}
.stat .big{font-family:var(--mono);font-size:clamp(40px,6vw,60px);font-weight:600;color:var(--cyan);line-height:1;letter-spacing:-.03em;}
.stat .big small{font-size:.4em;color:var(--muted);}
.stat .cap{color:var(--muted);font-size:14px;margin-top:12px;}
.stat .src{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;margin-top:6px;}

/* ===== privacy manifesto ===== */
.manifesto{
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-strong);border-radius:20px;padding:clamp(34px,5vw,60px);
  position:relative;overflow:hidden;
}
.manifesto::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 100% 0,rgba(122,99,245,.16),transparent 70%);pointer-events:none;}
.privacy-list{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 34px;}
@media(max-width:620px){.privacy-list{grid-template-columns:1fr;}}
.privacy-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text);}
.privacy-list li svg{width:20px;height:20px;color:var(--cyan);flex:none;margin-top:2px;}
.privacy-list li span{color:var(--muted);}

/* ===== FAQ ===== */
.faq{max-width:840px;margin:0 auto;}
.qa{border-bottom:1px solid var(--line);}
.qa button{
  width:100%;background:none;border:0;color:var(--text);cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:17px;font-weight:500;letter-spacing:-.01em;
  padding:24px 44px 24px 0;position:relative;display:block;
}
.qa button .plus{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:18px;height:18px;transition:transform .3s;color:var(--cyan);}
.qa.open button .plus{transform:translateY(-50%) rotate(45deg);}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.qa .ans p{color:var(--muted);font-size:15.5px;padding:0 30px 26px 0;margin:0;}

/* ===== final CTA + footer ===== */
.final{
  text-align:center;background:
    radial-gradient(700px 320px at 50% -10%,rgba(122,99,245,.2),transparent 70%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.final-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;}

footer.site{padding:56px 0 64px;background:var(--bg-2);border-top:1px solid var(--line);position:relative;z-index:2;}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;}
.foot-brand{max-width:330px;}
.foot-brand .lead{font-size:14px;margin-top:14px;}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap;}
.foot-col h3{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 16px;}
.foot-col a,.foot-col span{display:block;color:var(--muted);font-size:14px;margin-bottom:11px;transition:color .2s;}
.foot-col a:hover{color:var(--cyan);}
.foot-mail{font-family:var(--mono);color:var(--cyan-ink)!important;}
.foot-bottom{margin-top:46px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.03em;}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ===== section background variants ===== */
/* tinted = bg-2 with top + bottom border (how, protection) */
.section-tinted{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
/* tinted-open = bg-2 with top border only (faq) */
.section-tinted-open{background:var(--bg-2);border-top:1px solid var(--line);}

/* ===== inline text accent ===== */
.text-cyan{color:var(--cyan-ink);}

/* ===== lead color variant (base text color instead of muted) ===== */
.lead-base{color:var(--text);}

/* ===== problem section ===== */
#problem .hero-grid{align-items:start;}
#problem .section-head{margin-bottom:0;}
#problem .kicker{margin-bottom:16px;}

/* ===== features — controls sub-block ===== */
.ctrl-head{margin:64px 0 28px;max-width:760px;}
.ctrl-head h3{font-size:24px;margin-top:14px;}
.ctrl-head .lead{margin-top:12px;}

.card-ctrl{padding:20px 22px;}
.card-ctrl p{color:var(--text);margin-top:8px;font-family:var(--mono);font-size:13px;margin-bottom:0;}

/* ===== protection section cards ===== */
.card-lg{padding:32px;}
.card-lg p{font-size:15.5px;}

/* ===== privacy manifesto ===== */
.manifesto h2{margin-top:18px;max-width:18ch;}
.manifesto>.lead{margin-top:18px;}

/* ===== FAQ section head ===== */
#faq .section-head{text-align:center;margin:0 auto 48px;}
#faq .section-head .eyebrow{justify-content:center;}
#faq .section-head h2{margin-top:16px;}

/* ===== final CTA ===== */
.final .eyebrow{justify-content:center;}
.final h2{margin-top:16px;}
.final .lead{margin:18px auto 0;text-align:center;}
.final .kicker{margin-top:22px;}

/* ===== footer brand logo (smaller than header) ===== */
.foot-brand .brand img{width:30px;height:30px;}

/* ===== mobile hamburger ===== */
.menu-btn{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;padding:6px;background:none;border:1px solid var(--line-strong);
  border-radius:8px;cursor:pointer;flex:none;
}
.menu-btn span{display:block;height:2px;border-radius:2px;background:var(--text);transition:transform .25s,opacity .25s;}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== responsive: ≤ 1040px — show hamburger ===== */
/* always hidden — only shown inside open mobile dropdown */
.nav-mob-only{display:none !important;}

@media(max-width:1040px){
  .menu-btn{display:flex;}
  /* mobile nav dropdown */
  .nav-links{
    display:none;flex-direction:column;gap:0;
    position:absolute;top:70px;left:0;right:0;
    background:rgba(8,9,15,0.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);padding:8px 0;z-index:49;
  }
  .nav-links.open{display:flex;}
  .nav-links a{font-size:15px;padding:13px 28px;border-bottom:1px solid var(--line);letter-spacing:.02em;}
  .nav-links a:last-child{border-bottom:0;}
  /* show mobile-only items inside dropdown */
  .nav-links.open .nav-mob-only{display:block !important;}
  .nav-mob-cta{
    display:block;margin:12px 28px 4px;text-align:center;
    border-bottom:0 !important;border-radius:10px;
    font-family:var(--sans) !important;font-size:14px !important;
    color:#000 !important;letter-spacing:normal !important;
    padding:12px 18px !important;
  }
  /* hide desktop-only buttons from header bar */
  .nav-desk-only{display:none;}
}

/* ===== responsive: ≤ 768px ===== */
@media(max-width:768px){
  /* footer */
  .foot-brand{max-width:100%;}
  .foot-grid{gap:32px;}
  .foot-cols{gap:28px;}

  /* FAQ button smaller */
  .qa button{font-size:15px;padding:20px 38px 20px 0;}

  /* features ctrl head top margin */
  .ctrl-head{margin-top:40px;}

  /* section head less bottom space */
  .section-head{margin-bottom:40px;}
}

/* ===== responsive: ≤ 480px ===== */
@media(max-width:480px){
  /* tighter horizontal padding */
  .wrap{padding:0 16px;}

  /* nav: hide Support button, keep Add to Chrome */
  .nav-cta .btn-ghost{display:none;}

  /* hero CTA: stack buttons full-width */
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}

  /* final CTA: stack buttons */
  .final-cta{flex-direction:column;align-items:center;}
  .final-cta .btn{width:100%;max-width:300px;}

  /* fp panel footer: stack status + toggle */
  .fp-foot{flex-direction:column;align-items:flex-start;gap:10px;}

  /* fp rows: tighter label column */
  .fp-row{grid-template-columns:80px 1fr;font-size:12px;padding:11px 16px;}

  /* problem vis: allow sig-row value to wrap */
  .sig-row{flex-wrap:wrap;gap:2px 12px;}

  /* footer: force single column */
  .foot-grid{flex-direction:column;}

}

/* ===== responsive: ≤ 380px ===== */
@media(max-width:380px){

  /* fp-foot toggle label: hide text, keep switch */
  .fp-foot #fpToggleLbl{display:none;}
}