/*
Theme Name: QuantThemes
Theme URI: https://quanthemes.com
Author: QuantThemes
Author URI: https://quanthemes.com
Description: Marketing landing theme for QuantThemes — custom Shopify themes built to your brief. Ported 1:1 from the design source of truth (DESIGN/quantthemes-landing.html). Classic PHP theme, no build step.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quanthemes
*/

:root{
  --color-ink-950:#0a0f1e; --color-ink-900:#0e1526; --color-ink-850:#131c33; --color-ink-800:#18213a;
  --gold-1:#a67611; --gold-2:#d4a017; --gold-3:#f5d76e; --gold-4:#ffe98a; --gold-deep:#b8860b;
  --gold-text:linear-gradient(105deg,#a67611 0%,#d4a017 25%,#f5d76e 50%,#ffe98a 60%,#d4a017 80%,#a67611 100%);
  --gold-cta:linear-gradient(135deg,#f5d76e 0%,#d4a017 55%,#b8860b 100%);
  --panel:linear-gradient(180deg,#18213a 0%,#0e1526 100%);
  --text:#dde2ee; --text-dim:#8e98b4; --text-faint:#5c6685;
  --hairline:rgba(245,215,110,.16); --hairline-soft:rgba(221,226,238,.08);
  --maxw:1180px; --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-ink-950);color:var(--text);
  font-family:'Inter',sans-serif;font-weight:400;line-height:1.6;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

body::before{content:"";position:fixed;inset:-10%;z-index:-3;
  background:
    radial-gradient(38% 32% at 78% 8%, rgba(212,160,23,.18), transparent 60%),
    radial-gradient(40% 36% at 8% 26%, rgba(245,215,110,.09), transparent 55%),
    radial-gradient(45% 40% at 60% 92%, rgba(184,134,11,.12), transparent 60%),
    linear-gradient(180deg,#131c33 0%,#0e1526 45%,#0a0f1e 100%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-2.5%,1.8%,0) scale(1.06)}}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#stars{position:fixed;inset:0;z-index:-2;pointer-events:none}

#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:100;background:var(--gold-cta);box-shadow:0 0 12px rgba(245,215,110,.7)}
#glow{position:fixed;width:480px;height:480px;border-radius:50%;pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);left:50%;top:30%;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(circle,rgba(245,215,110,.10),transparent 60%);transition:opacity .6s}

/* padding-INLINE only, so it composes with .sec/.hero padding-BLOCK instead of the two shorthands overwriting each other */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:28px;position:relative;z-index:1}
section{position:relative;z-index:1}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0}
p{margin:0} a{color:inherit;text-decoration:none}

.gold{background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% auto}
.shine{animation:shine 6s linear infinite}
@keyframes shine{to{background-position:220% center}}

.eyebrow{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-3);opacity:.9}
.lead{color:var(--text-dim);font-size:clamp(16px,1.6vw,18.5px);font-weight:300;line-height:1.65}

.kick{display:inline-flex;align-items:center;gap:14px}
.kick::before{content:"";width:0;height:1px;background:var(--gold-cta);transition:width .9s var(--ease-out) .15s}
.reveal.in .kick::before{width:46px}

.btn{position:relative;z-index:0;display:inline-flex;align-items:center;gap:.5em;border:none;cursor:pointer;overflow:hidden;
  font-family:'Inter';font-weight:600;font-size:15px;letter-spacing:.01em;padding:14px 26px;border-radius:999px;
  transition:transform .35s var(--ease-out),box-shadow .4s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn-gold{color:#1a1205;background:var(--gold-cta);background-size:180% auto;
  box-shadow:0 10px 30px -10px rgba(212,160,23,.55),inset 0 1px 0 rgba(255,255,255,.45)}
/* idle sheen sweep */
.btn-gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);animation:sweep 3.6s ease-in-out infinite}
@keyframes sweep{0%,55%{left:-60%}80%,100%{left:130%}}
/* hover: gold fill wipes left -> right + lift (no jump) */
.btn-gold::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-101%);
  background:linear-gradient(135deg,#ffe98a 0%,#f5d76e 55%,#d4a017 100%);transition:transform .5s var(--ease-out)}
.btn-gold:hover::before{transform:translateX(0)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 20px 50px -12px rgba(245,215,110,.8),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-ghost{color:var(--text);background:rgba(245,215,110,.02);border:1px solid var(--hairline)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-101%);
  background:var(--gold-cta);transition:transform .5s var(--ease-out)}
.btn-ghost:hover::before{transform:translateX(0)}
.btn-ghost:hover{color:#1a1205;border-color:transparent;transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(245,215,110,.55)}
/* play glyph as a crisp inline SVG (inherits the button's text color; no emoji).
   Fixed px + flex:none so it can never stretch to the SVG default 300x150. */
.btn .btn-play{width:13px;height:13px;min-width:13px;flex:0 0 13px;fill:currentColor;display:inline-block;position:relative;z-index:1;align-self:center}

.logo{display:block;height:34px;width:auto}
.brand{display:flex;align-items:center;position:relative}
/* CSS-animated logo shine (replaces SMIL, which iOS WebKit won't run through <use>).
   A directly-rendered overlay svg, masked to the logo shape, sweeps a highlight. */
.logo-shine{position:absolute;left:0;top:0;height:34px;width:auto;pointer-events:none;isolation:isolate;transform:translateZ(0)}
.qt-shine{animation:qtShine 5s linear infinite}
@keyframes qtShine{0%{transform:translateX(-700px)}40%,100%{transform:translateX(700px)}}

header{position:sticky;top:0;z-index:50;transition:background .4s,border-color .4s}
/* FULLY OPAQUE sticky bg. The earlier translucent bg (.7/.94) let page content
   bleed THROUGH the transparent logo area on scroll — on Chrome-iOS @3x that read
   as a "scrambled" logo (it was content bleed-through, not a font/SVG bug).
   backdrop-filter:blur used to mask it but is buggy on iOS, so: solid color. */
header.scrolled{background:#0e1526;border-bottom:1px solid var(--hairline-soft)}
/* Give the logo its own stacking + compositing layer so its SVG url(#goldBase)
   gradient resolves correctly when the header becomes position:sticky. Without
   this, Chrome-iOS fails to remap the gradient into the sticky compositing layer
   → the gold wordmark goes near-invisible/black only when scrolled. */
.logo{backface-visibility:hidden;isolation:isolate;transform:translateZ(0)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:14.5px;color:var(--text-dim);position:relative;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--gold-3);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--text)} .nav-links a:hover::after{width:100%}
.nav-cta{display:flex;gap:12px;align-items:center}
.menu-btn{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:6px;border-radius:8px;line-height:0;transition:background .25s}
.menu-btn:hover{background:rgba(245,215,110,.1)}
/* .compact is toggled by JS (navFit) the moment the expanded nav would overflow — not a guessed breakpoint */
header.compact .nav-links,
header.compact .nav-cta .btn-ghost{display:none}
header.compact .menu-btn{display:block}
header.compact .nav-links.open{display:flex;flex-direction:column;gap:0;position:absolute;top:76px;left:0;right:0;text-align:left;
  background:#0e1526;
  border-top:1px solid var(--hairline-soft);border-bottom:2px solid rgba(212,160,23,.6);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.75),0 1px 0 rgba(245,215,110,.08) inset;
  padding:8px 28px 18px;z-index:60;transform-origin:top;animation:menuIn .32s var(--ease-out)}
header.compact .nav-links.open a{width:100%;padding:15px 2px;font-size:16px;color:var(--text);border-bottom:1px solid var(--hairline-soft)}
header.compact .nav-links.open a::after{display:none}
header.compact .nav-links.open a:last-child{border-bottom:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

.hero{padding-block:84px 64px;text-align:center}
.hero .eyebrow{display:block;margin-bottom:28px}
.hero h1{font-size:clamp(40px,6.2vw,76px);max-width:15ch;margin:0 auto;font-weight:600}
/* Per-word title reveal — applied to the hero h1 AND every section/page title
   (JS adds .anim-title + wraps words in .w; hero fires on load, the rest on scroll). */
.anim-title .w{display:inline-block;opacity:0;transform:translateY(40px) rotate(3deg);filter:blur(8px)}
.anim-title .w.go{animation:word .9s var(--ease-out) forwards}
@keyframes word{to{opacity:1;transform:none;filter:blur(0)}}
.hero h1 em{font-style:italic;font-weight:500}
.hero .lead{max-width:60ch;margin:28px auto 0;opacity:0;animation:fade 1s var(--ease-out) .9s forwards}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px;opacity:0;animation:fade 1s var(--ease-out) 1.05s forwards}
.hero-micro{margin-top:24px;font-size:13px;color:var(--text-faint);letter-spacing:.04em;opacity:0;animation:fade 1s 1.2s forwards}
.hero-micro b{color:var(--gold-3);font-weight:500}
@keyframes fade{to{opacity:1}}

.mock{max-width:1000px;margin:64px auto 0;border-radius:18px;overflow:hidden;border:1px solid var(--hairline);
  background:var(--panel);box-shadow:0 50px 130px -45px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02);
  opacity:0;transform:perspective(1400px) rotateX(14deg) translateY(40px);transform-origin:center top;
  animation:dock 1.3s var(--ease-out) 1.25s forwards}
@keyframes dock{to{opacity:1;transform:perspective(1400px) rotateX(0) translateY(0)}}
.mock .bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--hairline-soft)}
.mock .dot{width:11px;height:11px;border-radius:50%;background:#2a3556}
.mock .url{margin-left:14px;font-size:12px;color:var(--text-faint)}
.mock .live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-3)}
.mock .live i{width:7px;height:7px;border-radius:50%;background:var(--gold-3);animation:blip 1.6s infinite}
@keyframes blip{0%,100%{box-shadow:0 0 0 0 rgba(245,215,110,.6)}70%{box-shadow:0 0 0 9px rgba(245,215,110,0)}}
.mock .pbar{height:2px;background:rgba(245,215,110,.12)}
.mock .pbar span{display:block;height:100%;width:0;background:var(--gold-cta);box-shadow:0 0 10px rgba(245,215,110,.7)}
.mock .body{padding:42px;display:grid;grid-template-columns:1.3fr 1fr;gap:26px;align-items:center;min-height:230px}
.mock .h{height:14px;border-radius:6px;background:linear-gradient(90deg,rgba(245,215,110,.55),rgba(245,215,110,.07));margin-bottom:14px;width:0;transition:width .6s var(--ease-out)}
.mock .h.sm{max-width:60%}
.mock .l{height:9px;border-radius:5px;background:var(--hairline-soft);margin-bottom:10px;opacity:0;transform:translateX(-8px);transition:.5s var(--ease-out)}
.mock .tile{height:170px;border-radius:12px;background:linear-gradient(135deg,rgba(245,215,110,.18),rgba(24,33,58,.4));border:1px solid var(--hairline);opacity:0;transform:scale(.94);transition:.7s var(--ease-out)}
.mock.run .h{width:100%}.mock.run .h.sm{width:60%}
.mock.run .l{opacity:1;transform:none}
.mock.run .tile{opacity:1;transform:none}
.mock .mstat{display:flex;align-items:center;gap:9px;padding:13px 22px;border-top:1px solid var(--hairline-soft);
  font-size:12.5px;color:var(--text-dim);background:rgba(10,15,30,.35);min-height:44px}
.mock .mstat .tick{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold-3);animation:blip 1.6s infinite}
@media(max-width:640px){.mock .body{grid-template-columns:1fr;padding:26px;min-height:0}.mock .tile{height:120px}}

.trust{border-block:1px solid var(--hairline-soft);padding:26px 0;margin-top:70px;overflow:hidden}
.trust .label{text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:22px}
.marq{display:flex;align-items:center;gap:60px;width:max-content;animation:marq 26s linear infinite}
.marq:hover{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.chip{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.chip b{font-family:'Playfair Display',serif;font-size:26px;font-weight:600;line-height:1}
.chip span{font-size:13.5px;color:var(--text-dim)}
.sep{display:flex;align-items:center;font-size:13px;line-height:1;color:var(--gold-2);opacity:.55}

.sec{padding-block:104px}
.sec-head{max-width:56ch} .sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(28px,3.6vw,46px);margin-top:16px}
.sec-head .lead{margin-top:18px}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.l{transform:translateX(-44px)} .reveal.r{transform:translateX(44px)} .reveal.s{transform:scale(.92)}
.reveal.in{opacity:1;transform:none}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
.card{position:relative;background:var(--panel);border:1px solid var(--hairline-soft);border-radius:18px;overflow:hidden;
  transition:transform .35s var(--ease-out),border-color .4s,box-shadow .4s}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(245,215,110,.14),transparent 45%)}
.card:hover{border-color:var(--hairline);box-shadow:0 30px 70px -30px rgba(0,0,0,.7);transform:translateY(-5px)}
.card:hover::before{opacity:1}
.pillar{padding:36px 30px}
.pillar::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--gold-cta);opacity:.55}
.pillar .k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}
.pillar h3{font-size:26px;margin:14px 0 12px}.pillar h3 em{font-style:italic}
.pillar p{color:var(--text-dim);font-size:15px;font-weight:300}
@media(max-width:880px){.pillars{grid-template-columns:1fr}}

.steps{margin-top:56px;position:relative;--divx:102px}
/* track + fill are positioned by JS (layoutSteps): --lx = circle center x, --lt = first circle center y, --lh = center-to-center height. Line never extends past first/last circle. */
.steps::before{content:"";position:absolute;left:var(--lx,37px);top:var(--lt,68px);height:var(--lh,0);width:2px;transform:translateX(-50%);background:var(--hairline-soft)}
.steps .fill{position:absolute;left:var(--lx,37px);top:var(--lt,68px);width:2px;transform:translateX(-50%);background:var(--gold-cta);height:0;box-shadow:0 0 12px rgba(245,215,110,.6);transition:height .1s linear}
.step{display:grid;grid-template-columns:74px 1fr;gap:28px;padding:30px 0;align-items:start;position:relative}
/* divider lines start at the text column (--divx), not the far left */
.step::before{content:"";position:absolute;top:0;left:var(--divx);right:0;height:1px;background:var(--hairline-soft)}
.step:last-child::after{content:"";position:absolute;bottom:0;left:var(--divx);right:0;height:1px;background:var(--hairline-soft)}
.step .num{font-family:'Playfair Display',serif;font-size:34px;line-height:1;width:74px;height:74px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline-soft);border-radius:50%;background:var(--color-ink-900);color:var(--text-faint);transition:.5s var(--ease);position:relative;z-index:1}
.step .num span{display:inline-block;line-height:1;transform:translateY(-0.07em)}
.step.in .num{background:var(--color-ink-850);border-color:rgba(245,215,110,.4);box-shadow:0 0 30px -8px rgba(245,215,110,.5)}
.step.in .num span{background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:21px;margin-bottom:8px}
.step p{color:var(--text-dim);font-size:15px;font-weight:300;max-width:62ch}
.step .tag{display:inline-block;margin-left:10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-3);border:1px solid var(--hairline);border-radius:999px;padding:3px 10px;vertical-align:middle}
@media(max-width:640px){.steps{--divx:64px}.step{grid-template-columns:48px 1fr;gap:16px}.step .num{width:48px;height:48px;font-size:21px}}

.live-grid,.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.live-card{padding:28px}.live-card h3{font-size:17px;margin-bottom:8px}.live-card p{color:var(--text-dim);font-size:14px;font-weight:300}
@media(max-width:880px){.live-grid,.aud{grid-template-columns:1fr}}

.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.feat{padding:28px 24px}
.feat .ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:18px;
  border-radius:13px;background:linear-gradient(160deg,rgba(245,215,110,.13),rgba(212,160,23,.03));
  border:1px solid var(--hairline);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s}
.feat .ic svg{width:24px;height:24px;stroke:var(--gold-3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feat:hover .ic{transform:translateY(-3px);border-color:rgba(245,215,110,.5);box-shadow:0 10px 26px -12px rgba(245,215,110,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.feat h3{font-size:17px;margin-bottom:8px;font-family:'Inter';font-weight:600;letter-spacing:-.01em}
.feat p{color:var(--text-dim);font-size:13.5px;font-weight:300;line-height:1.55}
@media(max-width:1000px){.feat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}

.aud-card{padding:36px 30px}.aud-card .k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-3)}
.aud-card h3{font-size:22px;margin:14px 0 12px}.aud-card p{color:var(--text-dim);font-size:14.5px;font-weight:300}

.cmp-wrap{margin-top:52px;overflow-x:auto;border:1px solid var(--hairline-soft);border-radius:18px;background:var(--color-ink-850)}
table{border-collapse:collapse;width:100%;min-width:680px}
th,td{padding:18px 20px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--hairline-soft);vertical-align:top}
thead th{font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--text-dim);text-transform:uppercase}
tbody tr{opacity:0;transform:translateY(14px);transition:.6s var(--ease-out)}
tbody tr.in{opacity:1;transform:none}
tbody td:first-child{color:var(--text-dim)}
.qt-col{background:linear-gradient(180deg,rgba(245,215,110,.15),rgba(212,160,23,.05))}
thead th.qt{background:var(--gold-cta);color:#1a1205;border-radius:10px 10px 0 0}
td.qt{font-weight:500;color:var(--text)} td.qt::before{content:"✓";color:var(--gold-3);font-weight:700;margin-right:8px}
tbody tr:last-child td{border-bottom:none} .other{color:var(--text-faint)}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.quote{padding:30px}.quote .stars{color:var(--gold-3);letter-spacing:3px;font-size:13px}
.quote .big{font-family:'Playfair Display',serif;font-size:19px;line-height:1.3;margin:14px 0}
.quote p{color:var(--text-dim);font-size:14px;font-weight:300}
.quote .who{margin-top:18px;font-size:13px;color:var(--text-faint)}.quote .who b{color:var(--text);font-weight:500;display:block}
.ph{outline:1px dashed var(--hairline);outline-offset:2px;border-radius:4px}
@media(max-width:880px){.quotes{grid-template-columns:1fr}}
.stat-strip{display:flex;justify-content:center;gap:64px;flex-wrap:wrap;margin-top:50px;padding-top:42px;border-top:1px solid var(--hairline-soft)}
.stat-strip .s{text-align:center} .stat-strip .s b{display:block;font-family:'Playfair Display',serif;font-size:42px;line-height:1.1}
/* only the direct-child label span — NOT the .count span nested inside <b> */
.stat-strip .s>span{font-size:13px;color:var(--text-dim)}

.price-card{margin-top:46px;padding:48px;border:1px solid var(--hairline);display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;border-radius:22px}
.price-card .incl{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.price-card .incl li{display:flex;gap:11px;font-size:14.5px;color:var(--text-dim);font-weight:300}
.price-card .incl li svg{flex:none;width:19px;height:19px;margin-top:2px;stroke:var(--gold-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:880px){.price-card{grid-template-columns:1fr;padding:32px}}

.faq{margin-top:50px;max-width:820px;margin-inline:auto}
.qa{border-bottom:1px solid var(--hairline-soft)}
.qa button{width:100%;background:none;border:none;color:var(--text);text-align:left;cursor:pointer;
  font-family:'Playfair Display',serif;font-size:19px;padding:24px 44px 24px 0;position:relative;display:flex;transition:color .3s}
.qa button:hover{color:var(--gold-3)}
.qa button .pl{position:absolute;right:4px;top:26px;width:16px;height:16px;transition:transform .4s var(--ease)}
.qa button .pl::before,.qa button .pl::after{content:"";position:absolute;background:var(--gold-3);border-radius:2px}
.qa button .pl::before{inset:7px 0;height:2px}.qa button .pl::after{inset:0 7px;width:2px;transition:opacity .3s}
/* open = clean minus (hide the vertical bar), no diagonal slash */
.qa.open button .pl::after{opacity:0}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.qa .ans p{color:var(--text-dim);font-size:15px;font-weight:300;padding:0 44px 24px 0}

.final{padding:120px 0;text-align:center;position:relative}
/* glow pools softly toward the headline — extended above the section so it doesn't get cut in half at the top edge */
.final::before{content:"";position:absolute;left:0;right:0;top:-130px;bottom:0;z-index:-1;pointer-events:none;background:radial-gradient(58% 52% at 50% 38%,rgba(212,160,23,.16),transparent 66%)}
.final h2{font-size:clamp(32px,4.8vw,58px);max-width:18ch;margin:0 auto}
.final .lead{max-width:54ch;margin:20px auto 0}.final .hero-cta{margin-top:34px;opacity:1;animation:none}

footer{border-top:1px solid var(--hairline-soft);padding:58px 0 40px;margin-top:40px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.foot .col h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin:0 0 16px}
.foot .col a{display:block;color:var(--text-dim);font-size:14px;margin-bottom:10px;transition:color .25s}
.foot .col a:hover{color:var(--gold-3)}
.foot .about p{color:var(--text-dim);font-size:14px;font-weight:300;max-width:34ch;margin-top:16px}
.foot-base{margin-top:44px;padding-top:24px;border-top:1px solid var(--hairline-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--text-faint)}
@media(max-width:780px){.foot{grid-template-columns:1fr 1fr}}

/* Accessibility: visible keyboard focus on every interactive element */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-3);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline-offset:4px}

/* Comfortable horizontal gutters + section rhythm on smaller screens (was edge-to-edge) */
@media(max-width:900px){
  .wrap{padding-inline:24px}
  .sec{padding-block:84px}
}
/* On narrow screens the directional reveals must not slide horizontally — that pushed full-width cards past the viewport and caused a horizontal scrollbar (whole page looked shifted left). Use a vertical reveal instead. */
@media(max-width:880px){
  .reveal.l,.reveal.r{transform:translateY(30px)}
  .reveal.l.in,.reveal.r.in{transform:none}
}
@media(max-width:640px){
  .wrap{padding-inline:20px}
  .sec{padding-block:60px}
  .hero{padding-block:48px 36px}
  .mock{margin-top:44px}
  .final{padding-block:80px}
  .sec-head h2 br{display:none}
  .stat-strip{gap:36px}
}

/* Touch devices: don't apply :hover effects — they linger/stick after a tap.
   Keeps the gold button's resting shadow; removes lifts + the gold-fill wipe. */
@media (hover:none){
  .btn:hover{transform:none}
  .btn-gold:hover{box-shadow:0 10px 30px -10px rgba(212,160,23,.55),inset 0 1px 0 rgba(255,255,255,.45)}
  .btn-ghost:hover{color:var(--text);border-color:var(--hairline);box-shadow:none}
  .btn-gold:hover::before,.btn-ghost:hover::before{transform:translateX(-101%)}
  .card:hover{transform:none;box-shadow:none;border-color:var(--hairline-soft)}
  .card:hover::before{opacity:0}
  .feat:hover .ic{transform:none;border-color:var(--hairline);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .nav-links a:hover::after{width:0}
}

/* NOTE: prefers-reduced-motion is intentionally NOT honored (founder's call —
   the animations are minimal, wanted for everyone). The JS `reduce` flag is also
   forced false in app.js so the starfield/aurora/title reveals run regardless of
   the OS Reduce Motion setting. (Was: a @media reduced-motion block that froze
   everything — that's why the site looked static on a phone with Reduce Motion on.) */