/* ============================================================
   MENTZER — VOLT site kit
   Shared chrome for every page except index.volt.html (the home
   page stays self-contained). Every token and component value is
   lifted verbatim from index.volt.html / design.md "VOLT EDITION".
   Two colors only: acid #B4FF2B + liquid-chrome silver.
   ============================================================ */
:root{
  /* ground */
  --void:#050406;
  --coal:#0B0A0E;
  --slate:#131118;
  --fg:#F4F2F8;
  --body:#B9B4C4;
  --faint:rgba(244,242,248,.5);
  --line:rgba(244,242,248,.12);
  --line-soft:rgba(244,242,248,.07);
  --ink:#0A0A0A;

  /* the two colors */
  --acid:#B4FF2B;
  --acid-deep:#7ACC00;
  --acid-dim:rgba(180,255,43,.14);
  --silver:#C9CDD6;
  --steel:#8A8E99;

  /* instrument palette — one hue family, read by brightness */
  --energy:#F4F2F8;
  --protein:#B4FF2B;
  --carbs:#C9CDD6;
  --fat:#6E7480;

  /* glass */
  --glass:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.07);
  --glass-line:rgba(255,255,255,.12);

  /* status — the one permitted non-brand hue */
  --destructive:#FF5E6C;

  /* motion */
  --ease:cubic-bezier(.65,.05,0,1);
  --ease-data:cubic-bezier(.4,0,.2,1);
  --dur:.75s;

  /* rhythm */
  --pad:clamp(20px,5.5vw,88px);
  --sy:clamp(90px,14vh,190px);
  --maxw:1200px;
  --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-full:9999px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--void);
  color:var(--fg);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.4vw + .92rem,1.1rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  letter-spacing:.004em;
}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px;border-radius:4px}

/* ---------- voices ---------- */
.display{font-family:"Anton",'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.88}
.whisper{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.mono{font-family:"Geist Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'lnum' 1}

/* liquid chrome — the silver. Slow sheen keeps it molten. */
.chrome-txt{
  background:linear-gradient(100deg,#FFFFFF 6%,#C9CDD6 26%,#5E626C 45%,#EDEFF4 52%,#8A8E99 72%,#F6F7FA 94%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 8s var(--ease) infinite;
}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.acid-txt{color:var(--acid);text-shadow:0 0 26px rgba(180,255,43,.4)}

/* ---------- kit ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 80px -30px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* holo ring — acid↔silver conic only. At most ONE per screen. */
.holo{position:relative;border:none !important}
.holo::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--ha,0deg),var(--acid),var(--silver) 30%,rgba(255,255,255,.9) 50%,var(--silver) 70%,var(--acid));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@property --ha{syntax:'<angle>';initial-value:0deg;inherits:false}
.holo-spin::before{animation:haSpin 6s linear infinite}
@keyframes haSpin{to{--ha:360deg}}

.blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:screen}
.blob-acid{background:radial-gradient(circle,rgba(180,255,43,.42),transparent 65%)}
.blob-silver{background:radial-gradient(circle,rgba(201,205,214,.20),transparent 65%)}

.stars{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1.6px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(80% 70% at 50% 30%,#000 20%,transparent 75%)}

/* ---------- layout ---------- */
.scene{position:relative;padding:var(--sy) var(--pad);scroll-margin-top:96px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.sec-h{font-size:clamp(2.1rem,5.4vw,4.2rem);max-width:16ch}
.sec-sub{margin-top:1.1rem;color:var(--body);max-width:52ch}
.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}

/* ---------- reveals (vanilla layer) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .d2{transition-delay:.1s}.js .d3{transition-delay:.2s}.js .d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .chrome-txt{animation:none}
  .holo-spin::before{animation:none}
}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:120;width:min(calc(100% - 28px),1060px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 12px 10px 20px;border-radius:var(--r-full);
  border:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease)}
.nav.scrolled{background:rgba(11,10,14,.72);border-color:var(--glass-line);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.wordmark{font-family:"Anton",sans-serif;font-size:1.05rem;text-transform:uppercase;letter-spacing:.22em;color:var(--fg);text-decoration:none;line-height:1;display:inline-flex;align-items:center;gap:10px}
.wordmark i{width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid)}
.nav-links{display:flex;gap:26px}
.nav-links a{font-family:"Geist Mono",monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-decoration:none;transition:color .3s}
.nav-links a:hover{color:var(--acid)}
.nav-links a[aria-current="page"]{color:var(--acid)}
.nav-cta{font-family:"Geist Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:var(--acid);padding:11px 20px;border-radius:var(--r-full);font-weight:700;white-space:nowrap;
  box-shadow:0 0 24px -6px rgba(180,255,43,.7);transition:transform .3s var(--ease),box-shadow .3s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 34px -4px rgba(180,255,43,.85)}
.nav-prog{position:absolute;left:20px;right:20px;bottom:-1px;height:1px;pointer-events:none}
.nav-prog i{display:block;height:100%;width:0;background:var(--acid);box-shadow:0 0 8px var(--acid)}

/* ---------- buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--acid);color:var(--ink);text-decoration:none;
  font-family:"Geist Mono",monospace;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 28px;border-radius:var(--r-full);border:none;cursor:pointer;
  box-shadow:0 0 34px -8px rgba(180,255,43,.8);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pill:hover{transform:translateY(-2px);box-shadow:0 0 48px -6px rgba(180,255,43,.95)}
.pill .arw{transition:transform .35s var(--ease)}
.pill:hover .arw{transform:translateX(4px)}
.ghost-cta{display:inline-flex;align-items:center;gap:8px;color:var(--fg);text-decoration:none;cursor:pointer;background:transparent;
  font-family:"Geist Mono",monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 24px;border-radius:var(--r-full);border:1px solid var(--line);transition:border-color .3s,color .3s,background .3s}
.ghost-cta:hover{border-color:var(--acid);color:var(--acid);background:var(--acid-dim)}

/* ---------- page hero (subpage opener — no eyebrow tags, ever) ---------- */
.page-hero{position:relative;padding:clamp(150px,22vh,230px) var(--pad) clamp(48px,7vh,84px);overflow:clip}
.page-h1{font-size:clamp(2.6rem,6.4vw,5.4rem);max-width:14ch}
.page-sub{margin-top:1.3rem;color:var(--body);max-width:54ch;font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.6}
.page-meta{display:flex;gap:clamp(1.4rem,4vw,3.2rem);flex-wrap:wrap;margin-top:clamp(1.6rem,3.5vh,2.4rem)}
.hm{font-family:"Geist Mono",monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.5}
.hm b{display:block;color:var(--fg);font-weight:700;margin-top:3px}

/* ---------- content cards ---------- */
.card{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:clamp(1.5rem,3vw,2.3rem);border-radius:var(--r-2xl);
  background:linear-gradient(160deg,var(--slate),var(--coal));border:1px solid var(--glass-line);overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07)}
.card h3{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:.95}
.card p{color:var(--body);font-size:.92rem;line-height:1.6}

/* cursor spotlight (pointer only) — add .spot + volt.js sets --mx/--my */
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(180,255,43,.13),transparent 65%)}
.spot:hover::after{opacity:1}

/* ---------- pricing plans (verbatim from home) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px);margin-top:clamp(2rem,5vh,3.4rem);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:.4rem;padding:clamp(1.5rem,3vw,2.3rem);border-radius:var(--r-2xl);
  background:linear-gradient(160deg,var(--slate),var(--coal));border:1px solid var(--glass-line);overflow:hidden}
.plan::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(180,255,43,.13),transparent 65%)}
.plan:hover::before{opacity:1}
.plan-tag{font-family:"Geist Mono",monospace;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.plan h3{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:1.7rem;margin-top:.3rem}
.price{font-family:"Geist Mono",monospace;color:var(--faint);font-size:.8rem;margin:.4rem 0 1rem}
.price b{color:var(--fg);font-size:1.7rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:1.6rem}
.plan li{display:flex;gap:10px;font-size:.9rem;color:var(--body);line-height:1.45}
.plan .tk{color:var(--acid);flex:none;font-family:"Geist Mono",monospace}
.plan-cta{margin-top:auto;text-align:center;text-decoration:none;font-family:"Geist Mono",monospace;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg);border:1px solid var(--line);border-radius:var(--r-full);padding:14px;
  transition:background .3s,color .3s,border-color .3s}
.plan-cta:hover{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.plan.rec{background:linear-gradient(160deg,#151A0B,var(--coal) 65%)}
.plan.rec .plan-cta{background:var(--acid);border-color:var(--acid);color:var(--ink);box-shadow:0 0 26px -8px rgba(180,255,43,.8)}
.plan.rec .plan-cta:hover{box-shadow:0 0 40px -6px rgba(180,255,43,.95)}
.rec-badge{position:absolute;top:18px;right:18px;font-family:"Geist Mono",monospace;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acid);border:1px solid rgba(180,255,43,.4);border-radius:var(--r-full);padding:5px 11px;background:var(--acid-dim)}

/* ---------- stats + testimonials (verbatim from home) ---------- */
.proof-stats{display:flex;gap:clamp(1.4rem,4vw,3.4rem);flex-wrap:wrap;margin-top:clamp(1.8rem,4vh,2.8rem)}
.pstat{display:flex;flex-direction:column;gap:4px}
.pstat b{font-family:"Geist Mono",monospace;font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1;letter-spacing:-.02em}
.pstat b .star{color:var(--acid)}
.pstat span{font-family:"Geist Mono",monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.tsts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px);margin-top:clamp(2rem,5vh,3.2rem)}
.tst{display:flex;flex-direction:column;gap:1rem;padding:clamp(1.5rem,3vw,2.2rem);border-radius:var(--r-2xl)}
.tst-res{font-family:"Geist Mono",monospace;font-weight:700;font-size:1.15rem;color:var(--acid);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tst-res small{display:block;font-weight:400;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.tst p{color:var(--body);font-size:.92rem;line-height:1.6;flex:1}
.tst-who{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line-soft)}
.tst-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--glass-line);
  font-family:"Geist Mono",monospace;font-size:.62rem;font-weight:700;color:var(--silver)}
.tst-who b{font-size:.82rem;color:var(--fg);font-weight:600;display:block}
.tst-who span{font-family:"Geist Mono",monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field > span{font-family:"Geist Mono",monospace;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.field input,.field select,.field textarea{font-family:"Geist Mono",monospace;font-size:.85rem;color:var(--fg);
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-full);padding:15px 24px;width:100%;
  transition:border-color .3s;appearance:none}
.field textarea{border-radius:var(--r-xl);min-height:140px;resize:vertical;line-height:1.6}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 26px) 50%,calc(100% - 20px) 50%;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acid)}
.form-err{display:none;margin-top:14px;font-family:"Geist Mono",monospace;font-size:.72rem;color:var(--destructive)}
.form-ok{display:none;margin-top:14px;font-family:"Geist Mono",monospace;font-size:.72rem;color:var(--acid)}
.show{display:block}

/* ---------- FAQ (native details) ---------- */
.faq{margin-top:clamp(2rem,5vh,3.2rem);border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;cursor:pointer;list-style:none;
  padding:clamp(1.1rem,2.4vh,1.5rem) 4px;font-weight:600;font-size:clamp(.98rem,1.2vw,1.08rem);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Geist Mono",monospace;color:var(--faint);font-size:1.1rem;flex:none;transition:transform .35s var(--ease),color .3s}
.faq details[open] summary{color:var(--acid)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--acid)}
.faq summary:hover{color:var(--acid)}
.faq .faq-a{padding:0 4px clamp(1.2rem,2.6vh,1.6rem);color:var(--body);max-width:64ch;font-size:.95rem;line-height:1.65}

/* ---------- long-form prose (legal, blog articles) ---------- */
.prose{max-width:68ch}
.prose h2{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.95;
  font-size:clamp(1.5rem,2.6vw,2.1rem);margin:clamp(2.6rem,6vh,3.6rem) 0 1rem}
.prose h3{font-size:1.05rem;font-weight:600;margin:2rem 0 .7rem}
.prose p{color:var(--body);margin-bottom:1.1rem}
.prose ul,.prose ol{color:var(--body);margin:0 0 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.prose li::marker{color:var(--acid);font-family:"Geist Mono",monospace}
.prose a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(180,255,43,.5);text-underline-offset:3px;transition:color .3s}
.prose a:hover{color:var(--acid)}
.prose strong{color:var(--fg);font-weight:600}
.prose blockquote{border-left:2px solid var(--acid);padding:.4rem 0 .4rem 1.4rem;margin:1.6rem 0;
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--fg)}
.prose code{font-family:"Geist Mono",monospace;font-size:.85em;background:var(--glass-2);border:1px solid var(--line-soft);border-radius:6px;padding:1px 6px}
.prose hr{border:none;border-top:1px solid var(--line-soft);margin:2.4rem 0}
.prose-meta{font-family:"Geist Mono",monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* ---------- site footer ---------- */
.sitefoot{position:relative;border-top:1px solid var(--line-soft);padding:clamp(3.4rem,8vh,5.5rem) var(--pad) clamp(2rem,4vh,2.8rem);overflow:clip}
.sf-in{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.sf-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(1.8rem,4vw,3rem)}
.sf-brand p{color:var(--faint);font-size:.85rem;max-width:30ch;margin-top:1rem;line-height:1.6}
.sf-col h4{font-family:"Geist Mono",monospace;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:1.1rem}
.sf-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.sf-col a{color:var(--body);text-decoration:none;font-size:.9rem;transition:color .3s}
.sf-col a:hover{color:var(--acid)}
.sf-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(2.6rem,6vh,4rem);padding-top:1.6rem;border-top:1px solid var(--line-soft);
  font-family:"Geist Mono",monospace;font-size:.62rem;letter-spacing:.08em;color:var(--faint)}
.sf-bottom a{color:var(--faint);text-decoration:none}
.sf-bottom a:hover{color:var(--acid)}

/* ---------- terminal CTA band (shared page closer) ---------- */
.terminal{text-align:center;overflow:clip}
.term-h{font-size:clamp(2.4rem,7vw,5.2rem)}
.terminal-sub{color:var(--body);margin-top:1rem}
.term-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(1.8rem,4vh,2.6rem)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .nav-links{display:none}
}
@media (max-width:880px){
  .plans,.tsts{grid-template-columns:1fr}
  .sf-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}