/* Cinematic theme for all inner pages — matches the homepage. Loaded after each page's own styles.
   :root:root:root outranks the pages' :root:not([data-theme]) dark-mode blocks, so this wins in every mode. */
:root:root:root{
  --ink:#eef3fa; --paper:#06101f; --surface:#0b1a2e; --surface-2:#10233d;
  --muted:#9fb1c8; --line:rgba(255,255,255,.1); --blue:#6ea3e0; --blue-deep:#0d2b4e;
  --blue-soft:rgba(110,163,224,.12); --accent:#e0692f; --btn-accent:#e0692f; --accent-soft:rgba(224,105,47,.12);
  --good:#8fd4a8; --good-soft:rgba(143,212,168,.12); --amber:#f0a35a; --amber-soft:rgba(240,163,90,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 48px -24px rgba(0,0,0,.8);
  --display:'Space Grotesk',sans-serif;
  color-scheme:dark;
}
html{background:#06101f}
body{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(46,98,160,.35), transparent 70%),
    linear-gradient(rgba(110,163,224,.045) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, rgba(110,163,224,.045) 1px, transparent 1px) 0 0/48px 48px,
    #06101f !important;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{letter-spacing:-.03em}
h1{font-weight:600}

/* glass pill nav */
nav{position:sticky;top:12px !important;margin:12px auto 0;width:min(1240px,calc(100% - 24px));border-radius:999px;
  background:rgba(8,20,38,.6) !important;border:1px solid rgba(255,255,255,.1) !important;background:rgba(8,20,38,.92) !important}
nav .mega-panel-inner{background:rgba(11,26,46,.96);border-color:rgba(255,255,255,.1)}
nav .mega-col a:hover{background:rgba(255,255,255,.06)}
.brand .mark{filter:none}

/* buttons */
.btn{border-radius:999px !important;transition:transform .2s,box-shadow .2s,background .2s}
.btn-primary{background:var(--accent) !important;color:#fff !important;box-shadow:0 10px 30px -12px rgba(224,105,47,.8)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(224,105,47,.9)}
.btn-ghost{border-color:rgba(255,255,255,.22) !important;color:#fff !important;background:rgba(255,255,255,.04)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* cards / panels: glassy gradient */
.card,.step,.price-card,.faq-item,.post-card,.compare-card,.feature,.callout,.plan-card,.material-mock,
.confidence-panel,.fv-card,.toc,.gloss-item,.help-card,.panel,.box,.tile,table{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.09) !important;border-radius:18px;
}
.callout{border-left:3px solid var(--blue) !important}
.cta-box{background:linear-gradient(135deg,#0d2b4e,#16406f) !important;border:1px solid rgba(110,163,224,.25);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
table{border-collapse:separate;border-spacing:0;overflow:hidden}
th,td{border-color:rgba(255,255,255,.08) !important}
th{background:rgba(255,255,255,.04) !important}
input,select,textarea{background:rgba(255,255,255,.05) !important;color:var(--ink) !important;border-color:rgba(255,255,255,.15) !important}
code,pre{background:rgba(255,255,255,.06) !important;color:#dbe7f5}
footer{border-top-color:rgba(255,255,255,.08) !important}
img{border-radius:inherit}
/* section backgrounds that used a light surface */
section[style*="--surface"]{background:rgba(255,255,255,.02) !important}

/* page-top cinematic glow line */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:2px;z-index:100;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.7}

/* motion (driven by /assets/motion.js) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
h1{animation:cin-in .9s cubic-bezier(.2,.7,.2,1) both}
.eyebrow{animation:cin-in .9s .05s cubic-bezier(.2,.7,.2,1) both}
@keyframes cin-in{from{transform:translateY(22px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}h1,.eyebrow{animation:none}}