:root{
  --ground:#0A0D13;
  --ground-2:#0D111A;
  --ink:#E9EDF6;
  --ink-dim:#79839A;
  --edge:#1E2431;
  --edge-soft:#171C27;
  --accent:#3D7BFF;
  --accent-ink:#060811;
  --accent-wash:rgba(61,123,255,.13);
  --accent-line:rgba(61,123,255,.32);
  --maxw:1120px;
  --r:10px;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell{max-width:var(--maxw);margin:0 auto;padding-inline:20px}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:env(safe-area-inset-top, 0px);z-index:40;
  background:rgba(10,13,19,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--edge-soft);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:14px}
.wordmark{
  font-family:"Outfit",sans-serif;font-weight:700;font-size:18px;letter-spacing:-0.025em;
  text-decoration:none;display:inline-flex;align-items:baseline;
}
.wordmark i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;margin-left:3px}
.nav-links{display:flex;gap:26px}
.nav-links a{color:var(--ink-dim);text-decoration:none;font-size:14px;transition:color .15s ease}
.nav-links a:hover{color:var(--ink)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;border-radius:8px;font-family:"Outfit",sans-serif;font-weight:600;
  font-size:14.5px;line-height:1;padding:12px 20px;white-space:nowrap;min-height:44px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:#4d87ff}
.btn-ghost{border:1px solid var(--edge);color:var(--ink)}
.btn-ghost:hover{border-color:#2c3548}
.btn-sm{padding:9px 15px;font-size:13.5px}

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  background:radial-gradient(820px 380px at 50% -6%, rgba(61,123,255,.20), transparent 70%);
  text-align:center;
  padding-block:84px 44px;
  display:flex;flex-direction:column;align-items:center;
}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;color:var(--ink-dim);
  border:1px solid var(--edge);background:rgba(255,255,255,.02);
  border-radius:999px;padding:7px 15px;margin-bottom:30px;
}
.pill s{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block;text-decoration:none;flex:none}
h1{
  font-family:"Outfit",sans-serif;font-weight:700;
  font-size:clamp(32px,5.8vw,58px);line-height:1.05;letter-spacing:-0.032em;
  margin:0;max-width:16ch;text-wrap:balance;
}
h1 span{color:var(--accent)}
.hero-sub{
  margin:24px 0 34px;color:var(--ink-dim);font-size:17px;line-height:1.62;max-width:56ch;
}
.cta-row{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}
.cta-note{margin:16px 0 0;font-size:13px;color:var(--ink-dim)}

/* load-in: runs once on load, ends fully visible */
.rise{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
.rise-2{animation-delay:.07s}
.rise-3{animation-delay:.14s}
.rise-4{animation-delay:.21s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------------- sections ---------------- */
section{scroll-margin-top:84px}
.band{padding-block:80px;border-top:1px solid var(--edge-soft)}
.no-top-border{border-top:0}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-dim);margin:0 0 16px;
}
h2{
  font-family:"Outfit",sans-serif;font-weight:700;
  font-size:clamp(25px,3.6vw,36px);line-height:1.14;letter-spacing:-0.025em;
  margin:0;max-width:20ch;text-wrap:balance;
}
.band-lede{margin:16px 0 0;color:var(--ink-dim);font-size:16.5px;max-width:58ch}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:42px}
.card{
  border:1px solid var(--edge);border-radius:var(--r);padding:24px 22px 26px;
  background:rgba(255,255,255,.022);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--accent-line);
  background:rgba(255,255,255,.035);
}
.card-n{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent);
  letter-spacing:.1em;margin:0 0 14px;
}
.card h3{
  margin:0 0 9px;font-family:"Outfit",sans-serif;font-weight:600;font-size:17px;
  letter-spacing:-0.012em;
}
.card p{margin:0;color:var(--ink-dim);font-size:14.5px;line-height:1.6}

.cards .card:nth-child(2){transition-delay:.08s}
.cards .card:nth-child(3){transition-delay:.16s}

/* the call — reassurance band */
.assure{background:var(--ground-2);border-block:1px solid var(--edge-soft)}
.assure .card{background:rgba(255,255,255,.028)}
.assure .card:hover{background:rgba(255,255,255,.045)}
.assure .card h3{display:flex;align-items:baseline;gap:9px}
.assure .card h3 s{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  display:block;text-decoration:none;flex:none;transform:translateY(-3px);
}
.samples-line{
  margin:28px 0 0;color:var(--ink-dim);font-size:15.5px;max-width:60ch;
  padding-left:16px;border-left:2px solid var(--accent-line);
}
.samples-line b{color:var(--ink);font-weight:500}

/* faq */
.faq{margin-top:40px;border-top:1px solid var(--edge)}
details{border-bottom:1px solid var(--edge)}
summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:"Outfit",sans-serif;font-weight:600;font-size:16.5px;letter-spacing:-0.01em;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:6px;top:18px;color:var(--ink-dim);
  font-family:"IBM Plex Mono",monospace;font-size:18px;font-weight:400;
  transition:transform .2s ease;
}
details[open] summary::after{content:"–"}
summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
details p{margin:0 0 22px;color:var(--ink-dim);font-size:15px;max-width:66ch}

/* closing cta */
.close-cta{
  border:1px solid var(--accent-line);border-radius:14px;
  background:radial-gradient(560px 220px at 50% 0%, var(--accent-wash), transparent 72%), var(--ground-2);
  padding:54px 28px 56px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.close-cta h2{max-width:18ch}
.close-cta p{margin:16px 0 30px;color:var(--ink-dim);max-width:50ch;font-size:16.5px}

/* footer */
footer{border-top:1px solid var(--edge-soft);padding-block:40px 48px;margin-top:80px}
.foot-in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{display:flex;flex-direction:column;gap:10px;max-width:34ch}
.foot-brand p{margin:0;color:var(--ink-dim);font-size:14px}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-col h4{
  margin:0 0 12px;font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:#5A6377;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-col a{color:var(--ink-dim);text-decoration:none;font-size:14px;transition:color .15s ease}
.foot-col a:hover{color:var(--ink)}
.foot-base{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--edge-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:#5A6377;font-size:13px;
}

/* scroll-reveal (added by script only — no JS means no hidden content) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.reveal.in-view{opacity:1;transform:none}

@media (max-width:860px){
  .cards{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media (max-width:560px){
  .hero{padding-block:60px 36px}
  .band{padding-block:60px}
  .foot-cols{gap:34px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  .reveal{opacity:1!important;transform:none!important}
}