/* ═══════════════════════════════════════════════════════════
   Flux — dark/gold landing page
   Imaar Studio
   ═══════════════════════════════════════════════════════════ */

/* Outfit, self-hosted variable subsets — no external requests at runtime */
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('assets/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('assets/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:         #070705;
  --ink-2:       #0d0b08;
  --ink-3:       #131009;
  --line:        rgba(240,194,75,.14);
  --line-soft:   rgba(255,255,255,.08);

  --cream:       #F6F0E2;
  --cream-dim:   #cfc7b6;
  --muted:       #8f887b;

  --gold:        #F0C24B;
  --gold-hi:     #FFE9A8;
  --gold-deep:   #C99524;

  --wrap:        1180px;
  --r:           18px;
  --r-lg:        28px;

  --ease:        cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.08; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:26px; }
.wrap--narrow{ max-width:820px; }

.sr,.skip{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip:focus{
  position:fixed; top:14px; left:14px; z-index:200; width:auto; height:auto;
  clip:auto; margin:0; padding:12px 20px; border-radius:999px;
  background:var(--cream); color:#111; font-weight:500;
}

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  --pad: 15px 30px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:var(--pad);
  border-radius:999px;
  font-size:16px; font-weight:500; letter-spacing:-.01em;
  white-space:nowrap; cursor:pointer;
  border:1px solid transparent;
  transition:transform .35s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.btn--sm{ --pad:10px 24px; font-size:15px; }
.btn--full{ width:100%; }

.btn--ghost{
  color:var(--cream);
  border-color:rgba(246,240,226,.34);
  background:rgba(255,255,255,.015);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{
  border-color:var(--gold);
  color:var(--gold-hi);
  background:rgba(240,194,75,.07);
  transform:translateY(-2px);
}

.btn--light{
  background:#fff; color:#100d08;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.btn--light:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 34px rgba(240,194,75,.28), 0 0 0 1px rgba(255,233,168,.5);
  background:var(--gold-hi);
}

/* ── Brand ─────────────────────────────────────────────── */
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand__mark{ width:29px; height:29px; display:block; }
.brand__mark svg{ width:100%; height:100%; display:block; }
.brand__word{ font-size:24px; font-weight:500; letter-spacing:-.01em; }

/* ── Nav ───────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:22px 0;
  transition:padding .4s var(--ease), background .4s var(--ease),
             box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-stuck{
  padding:12px 0;
  background:rgba(9,8,6,.78);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 18px 40px -24px rgba(0,0,0,.9);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.nav__links{ display:flex; gap:38px; font-size:16.5px; color:var(--cream-dim); }
.nav__links a{ position:relative; padding:4px 0; transition:color .3s var(--ease); }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__actions{ display:flex; gap:10px; }

.burger{
  display:none; width:44px; height:44px; padding:0; border:0; border-radius:12px;
  background:transparent; cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:12px; width:20px; height:1.5px; background:var(--cream);
  border-radius:2px; transition:transform .35s var(--ease), opacity .25s;
}
.burger span:nth-child(1){ top:19px; }
.burger span:nth-child(2){ top:25px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ── Hero ──────────────────────────────────────────────────
   One screen, like the mockup: the copy sits in the top third and the render
   fills whatever height is left, cut off by the fold the way the podiums are
   cut off in the reference. Nothing here spills past the first viewport.  */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding-top:clamp(92px,12.5vh,164px);
  overflow:hidden;
  background:
    radial-gradient(120% 62% at 50% 0%,   rgba(240,194,75,.16) 0%, rgba(240,194,75,.04) 34%, transparent 62%),
    radial-gradient(88%  46% at 50% 118%, rgba(240,194,75,.20) 0%, transparent 60%),
    linear-gradient(180deg,#0b0a08 0%, #080706 55%, #060505 100%);
}
/* warm halo behind the headline and tagline */
.hero__glow{
  position:absolute; left:50%; top:-16%; translate:-50% 0;
  width:min(1180px,124vw); aspect-ratio:1.5/1;
  background:radial-gradient(ellipse at center, rgba(255,224,150,.30), rgba(255,214,130,.10) 42%, transparent 66%);
  filter:blur(34px); pointer-events:none;
}
.hero__copy{ position:relative; flex:0 0 auto; text-align:center; }

.hero__title{
  /* one line, sized to fill it — the vh cap keeps it from eating the stage on
     short screens, the rem floor keeps it on one line down to 320px */
  font-size:min(clamp(2.3rem,8.6vw,7rem), 14vh);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.06;
  text-wrap:balance;
  color:#FBF4E4;
  text-shadow:0 0 70px rgba(255,220,140,.22);
}
.hero__sub{
  margin:clamp(14px,2.6vh,24px) auto 0;
  max-width:640px;
  font-size:clamp(1rem,1.55vw,1.16rem);
  font-weight:300;
  color:rgba(233,226,212,.62);
}
.hero__cta{ margin-top:clamp(20px,3.6vh,32px); display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

.hero__stage{
  position:relative;
  /* basis 0, not auto — otherwise the image's intrinsic height sets the basis
     and the hero grows past the fold */
  /* basis 0, not auto — otherwise the image's intrinsic height sets the basis
     and the hero grows past the fold */
  flex:1 1 0;
  min-height:min(30vh,300px);
  margin-top:clamp(10px,2vh,40px);
  width:100%;
  overflow:hidden;
}
.hero__stage img{
  width:100%; height:100%; max-width:none;
  /* contain, sitting on the fold: the whole trio stays in frame at every
     viewport ratio. Cropping it to fill instead loses the podiums on short
     screens, which is the one thing the composition can't spare. */
  object-fit:contain; object-position:50% 100%;
  /* Edge falloff is baked into the file, not masked in CSS — object-fit
     letterboxes the render inside the element, so a percentage mask on the
     box would not line up with the picture. Screen blending then makes those
     black margins disappear into the hero glow instead of reading as a dark
     rectangle sitting on top of it. */
  mix-blend-mode:screen;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@media (prefers-reduced-motion:reduce){ .hero__stage img{ animation:none; } }

/* ── Ticker ────────────────────────────────────────────── */
.ticker{
  position:relative; z-index:2;
  margin-top:-2px;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(240,194,75,.07), rgba(0,0,0,.35));
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ticker__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.ticker__set{ display:flex; align-items:center; gap:34px; padding-right:34px; }
.ticker__set span{
  font-size:14px; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(232,224,208,.5); white-space:nowrap; font-weight:400;
}
.ticker__set i{ color:var(--gold); font-size:8px; font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

/* ── Stats ─────────────────────────────────────────────── */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  padding-top:clamp(56px,7vw,88px); padding-bottom:clamp(20px,3vw,34px);
}
.stat{ text-align:center; padding:8px 10px; }
.stat__n{
  display:block;
  font-size:clamp(2.1rem,4vw,3.1rem); font-weight:500; letter-spacing:-.035em;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 45%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat__l{ display:block; margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--muted); }

/* ── Section scaffolding ───────────────────────────────── */
.section{ padding:clamp(70px,9vw,124px) 0; position:relative; }

.eyebrow{
  display:inline-block; margin-bottom:18px;
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.eyebrow::before{ content:''; display:inline-block; width:22px; height:1px; background:var(--gold); vertical-align:middle; margin-right:12px; opacity:.6; }

.head{ max-width:660px; margin-bottom:clamp(38px,5vw,60px); }
.head h2, .split__copy h2, .cta h2{
  font-size:clamp(1.95rem,4.1vw,3.15rem);
  letter-spacing:-.035em; line-height:1.1;
}
.lede{ margin-top:20px; color:var(--muted); font-size:clamp(1rem,1.4vw,1.09rem); font-weight:300; line-height:1.65; }

/* ── Cards / features ──────────────────────────────────── */
.grid{ display:grid; gap:16px; }
.grid--features{ grid-template-columns:repeat(3,1fr); }

.card{
  position:relative; overflow:hidden;
  padding:32px 30px 34px;
  border-radius:var(--r-lg);
  border:1px solid var(--line-soft);
  background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 42%, rgba(0,0,0,.2));
  transition:border-color .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.card::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px 240px at var(--mx,50%) var(--my,0%), rgba(240,194,75,.16), transparent 70%);
  opacity:0; transition:opacity .45s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:rgba(240,194,75,.32); }
.card:hover::before{ opacity:1; }

.card--tall{ grid-row:span 2; display:flex; flex-direction:column; }
.card--span2{ grid-column:span 2; }
.card--span2 p{ max-width:60ch; }
.card--wide{
  grid-column:span 2;
  display:grid; grid-template-columns:1.2fr .8fr; gap:0;
  align-items:stretch; padding:0; overflow:hidden;
}
.card--wide .card__body{ min-width:0; padding:32px 30px 34px; }
.card--wide .card__media{ position:relative; min-height:230px; }
.card--wide .card__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 44%;
}
.card--wide .card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, #0e0c09 0%, rgba(14,12,9,.55) 32%, transparent 62%);
}

.card__ico{
  width:46px; height:46px; display:grid; place-items:center; margin-bottom:22px;
  border-radius:14px; color:var(--gold);
  background:linear-gradient(150deg, rgba(240,194,75,.2), rgba(240,194,75,.04));
  border:1px solid rgba(240,194,75,.25);
}
.card__ico svg{ width:22px; height:22px; }
.card h3{ font-size:1.24rem; font-weight:500; letter-spacing:-.02em; }
.card p{ margin-top:12px; color:var(--muted); font-size:15.5px; font-weight:300; line-height:1.62; }

.card__viz{ margin-top:auto; padding-top:34px; }
.pulse{ display:flex; align-items:flex-end; gap:6px; height:66px; }
.pulse span{
  flex:1; max-width:9px; border-radius:99px;
  background:linear-gradient(180deg,var(--gold-hi),rgba(240,194,75,.18));
  animation:bar 1.9s var(--ease) infinite;
}
.pulse span:nth-child(1){ animation-delay:0s; }
.pulse span:nth-child(2){ animation-delay:.08s; }
.pulse span:nth-child(3){ animation-delay:.16s; }
.pulse span:nth-child(4){ animation-delay:.24s; }
.pulse span:nth-child(5){ animation-delay:.32s; }
.pulse span:nth-child(6){ animation-delay:.40s; }
.pulse span:nth-child(7){ animation-delay:.48s; }
.pulse span:nth-child(8){ animation-delay:.56s; }
.pulse span:nth-child(9){ animation-delay:.64s; }
.pulse span:nth-child(10){ animation-delay:.72s; }
.pulse span:nth-child(11){ animation-delay:.80s; }
.pulse span:nth-child(12){ animation-delay:.88s; }
@keyframes bar{ 0%,100%{ height:16%; opacity:.4; } 45%{ height:100%; opacity:1; } }
.pulse-label{
  margin-top:14px; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
@media (prefers-reduced-motion:reduce){ .pulse span{ animation:none; height:60%; } }

/* ── The card / split ──────────────────────────────────── */
.section--card{
  background:
    radial-gradient(70% 60% at 22% 50%, rgba(240,194,75,.10), transparent 65%),
    linear-gradient(180deg,transparent, rgba(240,194,75,.03) 50%, transparent);
}
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,6vw,80px); align-items:center; }
.split__media{ position:relative; }

.cardshot{
  position:relative; border-radius:22px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 90px -20px rgba(240,194,75,.4),
             0 0 0 1px rgba(255,233,168,.35);
  transform:perspective(1200px) rotateY(var(--ry,-7deg)) rotateX(var(--rx,4deg));
  transition:transform .5s var(--ease);
  will-change:transform;
}
.cardshot img{ width:100%; }
.cardshot__sheen{
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.42) 46%, transparent 60%);
  transform:translateX(-120%);
  animation:sheen 5.5s var(--ease) infinite;
  mix-blend-mode:overlay;
}
@keyframes sheen{ 0%,72%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }
@media (prefers-reduced-motion:reduce){ .cardshot__sheen{ animation:none; opacity:0; } }
.cardshot__floor{
  margin:36px auto 0; width:78%; height:70px;
  background:radial-gradient(ellipse at center, rgba(240,194,75,.30), transparent 70%);
  filter:blur(22px);
}

.specs{ margin:34px 0 34px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
.specs > div{ background:var(--ink-2); padding:16px 18px; }
.specs dt{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.specs dd{ margin:6px 0 0; font-size:15px; color:var(--cream-dim); font-weight:300; }

/* ── Security steps ────────────────────────────────────── */
.section--sec{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.02), transparent); }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.steps li{ padding:34px 30px 34px 0; border-right:1px solid var(--line); }
.steps li:last-child{ border-right:0; padding-right:0; }
.steps li:not(:first-child){ padding-left:30px; }
.steps__n{
  display:block; margin-bottom:18px;
  font-size:13px; letter-spacing:.2em; color:var(--gold); font-weight:500;
}
.steps h3{ font-size:1.28rem; font-weight:500; }
.steps p{ margin-top:12px; color:var(--muted); font-size:15.5px; font-weight:300; line-height:1.62; }

/* ── Pricing ───────────────────────────────────────────── */
.grid--price{ grid-template-columns:repeat(3,1fr); align-items:start; }
.tier{
  position:relative; padding:36px 32px 34px; border-radius:var(--r-lg);
  border:1px solid var(--line-soft);
  background:linear-gradient(170deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), border-color .45s var(--ease);
}
.tier:hover{ transform:translateY(-4px); border-color:rgba(240,194,75,.3); }
.tier--feature{
  border-color:rgba(240,194,75,.42);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(240,194,75,.17), transparent 60%),
    linear-gradient(170deg, rgba(255,255,255,.05), rgba(0,0,0,.3));
  box-shadow:0 30px 70px -40px rgba(240,194,75,.6);
}
.tier__flag{
  position:absolute; top:-11px; left:32px;
  padding:5px 14px; border-radius:999px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:#15120c; background:linear-gradient(120deg,var(--gold-hi),var(--gold));
}
.tier__name{ font-size:1.1rem; font-weight:500; letter-spacing:.02em; color:var(--gold); }
.tier__price{ margin-top:14px; font-size:15px; color:var(--muted); }
.tier__price span{
  display:inline-block; margin-right:4px;
  font-size:clamp(2rem,3.2vw,2.65rem); font-weight:500; letter-spacing:-.035em; color:var(--cream);
}
.tier__price--text span{ font-size:clamp(1.5rem,2.2vw,1.85rem); letter-spacing:-.02em; }
.tier__note{ margin-top:12px; color:var(--muted); font-size:15px; font-weight:300; line-height:1.6; }

.ticks{ list-style:none; margin:26px 0 30px; padding:26px 0 0; border-top:1px solid var(--line-soft); display:grid; gap:13px; flex:1; }
.ticks li{ position:relative; padding-left:28px; font-size:15.5px; font-weight:300; color:var(--cream-dim); line-height:1.5; }
.ticks li strong{ font-weight:500; color:var(--cream); }
.ticks li::before{
  content:''; position:absolute; left:0; top:.42em;
  width:15px; height:8px; border-left:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold);
  transform:rotate(-45deg) scale(.85); transform-origin:center;
}

/* ── Quotes ────────────────────────────────────────────── */
.section--quotes{ background:linear-gradient(180deg,transparent, rgba(240,194,75,.035), transparent); }
.grid--quotes{ grid-template-columns:repeat(3,1fr); }
.quote{
  margin:0; padding:34px 30px; border-radius:var(--r-lg);
  border:1px solid var(--line-soft); background:rgba(255,255,255,.022);
  display:flex; flex-direction:column; gap:24px;
  transition:border-color .45s var(--ease);
}
.quote:hover{ border-color:rgba(240,194,75,.28); }
.quote blockquote{
  margin:0; flex:1;
  font-size:1.06rem; font-weight:300; line-height:1.65; color:var(--cream-dim);
}
.quote blockquote::before{ content:'“'; display:block; font-size:44px; line-height:.6; color:var(--gold); margin-bottom:16px; }
.quote figcaption{ display:flex; flex-direction:column; gap:3px; padding-top:20px; border-top:1px solid var(--line-soft); }
.quote figcaption strong{ font-weight:500; font-size:15.5px; }
.quote figcaption span{ font-size:14px; color:var(--muted); }

/* ── FAQ ───────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line-soft); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:26px 52px 26px 0;
  font-size:clamp(1.02rem,1.7vw,1.16rem); font-weight:400; color:var(--cream);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-hi); }
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:13px; height:13px;
  border-right:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .35s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__a{ padding:0 40px 28px 0; }
.faq__a p{ color:var(--muted); font-size:15.8px; font-weight:300; line-height:1.68; }
.faq details[open] .faq__a{ animation:fadein .45s var(--ease) both; }
@keyframes fadein{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ── CTA ───────────────────────────────────────────────── */
.cta{
  position:relative; overflow:hidden;
  padding:clamp(84px,10vw,140px) 0 clamp(74px,9vw,120px);
  text-align:center;
  border-top:1px solid var(--line);
  background:
    radial-gradient(80% 100% at 50% 130%, rgba(240,194,75,.28), transparent 62%),
    linear-gradient(180deg,#080706, #0c0a07);
}
.cta__glow{
  position:absolute; left:50%; bottom:-38%; translate:-50% 0;
  width:min(900px,110vw); aspect-ratio:1/1;
  background:radial-gradient(circle at center, rgba(255,224,150,.24), transparent 60%);
  filter:blur(50px); pointer-events:none;
}
.cta__inner{ position:relative; }
.cta__nugget{
  width:min(380px,74vw); margin:0 auto 4px;
  mix-blend-mode:screen; opacity:.95;
  /* radial falloff instead of a cut-out: the crop dissolves into the dark */
  mask-image:radial-gradient(ellipse 52% 54% at 50% 46%, #000 40%, transparent 78%);
}
.cta p{ margin:22px auto 0; max-width:520px; color:var(--muted); font-weight:300; }

.cta__form{
  margin:36px auto 0; max-width:520px;
  display:grid; grid-template-columns:1fr auto; gap:10px;
}
.cta__form input{
  width:100%; padding:15px 22px;
  border-radius:999px; border:1px solid rgba(246,240,226,.22);
  background:rgba(255,255,255,.04); color:var(--cream);
  font-family:inherit; font-size:16px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.cta__form input::placeholder{ color:rgba(232,224,208,.38); }
.cta__form input:focus{ outline:none; border-color:var(--gold); background:rgba(240,194,75,.06); }
.cta__form input[aria-invalid="true"]{ border-color:#e2685c; }
.cta__msg{
  grid-column:1 / -1; margin:4px 0 0; min-height:22px;
  font-size:14.5px; color:var(--gold); text-align:left; padding-left:22px;
}
.cta__msg.is-err{ color:#e58e83; }
.cta__fine{ margin-top:26px !important; font-size:14px; color:rgba(143,136,123,.85); }

/* ── Footer ────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line-soft); background:#060504; padding:clamp(54px,6vw,74px) 0 34px; }
.foot__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; }
.foot__brand p{ margin-top:18px; max-width:290px; color:var(--muted); font-size:15px; font-weight:300; line-height:1.6; }
.foot__col{ display:flex; flex-direction:column; gap:12px; }
.foot__col h4{
  margin-bottom:6px; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.foot__col a{ color:var(--muted); font-size:15px; font-weight:300; transition:color .3s var(--ease); width:fit-content; }
.foot__col a:hover{ color:var(--cream); }

.foot__base{
  margin-top:clamp(40px,5vw,60px); padding-top:24px;
  border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:14px; color:var(--muted);
}
.foot__base a{ color:var(--gold); }
.foot__base a:hover{ color:var(--gold-hi); }

/* ── Reveal ────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal[data-d="1"]{ transition-delay:.1s; }
.reveal[data-d="2"]{ transition-delay:.2s; }
.reveal[data-d="3"]{ transition-delay:.3s; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:1020px){
  /* 2 columns: tall keeps its 2-row span, wide takes a full row, and the last
     two cards pair up — tiles without a hole */
  .grid--features{ grid-template-columns:repeat(2,1fr); }
  .card--span2{ grid-column:auto; }
  .grid--price, .grid--quotes{ grid-template-columns:1fr; }
  .tier--feature{ order:-1; }
  .split{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .steps li{ border-right:0; border-bottom:1px solid var(--line); padding:28px 0; }
  .steps li:last-child{ border-bottom:0; }
  .steps li:not(:first-child){ padding-left:0; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:28px 14px; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .foot__brand{ grid-column:1 / -1; }
}

@media (max-width:760px){
  body{ font-size:16px; }
  .brand, .nav__actions, .burger{ position:relative; z-index:2; }
  .nav__links{
    position:fixed; inset:0 0 auto 0; z-index:1;
    flex-direction:column; gap:0;
    padding:96px 26px 30px;
    background:#080705;
    border-bottom:1px solid var(--line);
    transform:translateY(-102%); transition:transform .45s var(--ease);
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:18px; }
  .nav__links a::after{ display:none; }
  .nav__actions{ margin-left:auto; }
  .nav__actions .btn--ghost{ display:none; }
  .burger{ display:block; }

  .hero{ padding-top:112px; }
  .hero__cta .btn{ flex:1 1 auto; }
  /* narrow and tall: the render is width-bound, so it can't fill the leftover
     height. Let it size to its own aspect at the bottom and hand the slack to
     the copy's auto margins instead of leaving a hole above the card. */
  .hero__copy{ margin-block:auto; }
  .hero__stage{ flex:0 0 auto; min-height:0; margin-top:clamp(10px,2vh,28px); }
  .hero__stage img{ width:126%; max-width:none; margin-left:-13%; height:auto; }

  .grid--features{ grid-template-columns:1fr; }
  .card--wide, .card--span2{ grid-column:auto; }
  .card--wide{ grid-template-columns:1fr; }
  .card--wide .card__media{ min-height:180px; }
  .card--wide .card__media::after{ background:linear-gradient(180deg, rgba(14,12,9,.9), transparent 55%); }
  .specs{ grid-template-columns:1fr; }
  .cta__form{ grid-template-columns:1fr; }
  .cta__msg{ text-align:center; padding-left:0; }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__base{ justify-content:flex-start; }
}

@media (max-width:420px){
  .stats{ grid-template-columns:1fr; }
  .wrap{ padding-inline:20px; }
}