/* ============================================================
   GROWFLO AI — core stylesheet
   Palette: true black, warm ivory, champagne gold. Type: Inter Tight
   (display) + Inter (text), the closest free match to Apple's SF.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --ink:        #000000;
  --ink-1:      #0A0A0B;
  --ink-2:      #111113;
  --ink-3:      #18181B;
  --line:       rgba(242,240,235,.08);
  --line-2:     rgba(242,240,235,.15);
  --bone:       #F2F0EB;
  --bone-dim:   #BDB9B1;
  --muted:      #8F8B83;
  --muted-2:    #57544E;

  --gold:     #D6B06B;
  --gold-lit: #EBCB8F;
  --gold-dp:  #A07E3F;
  --gold-glow: rgba(214,176,107,.26);

  --display: 'Inter Tight', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --body:    'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --label:   'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  --gut: clamp(20px, 4vw, 72px);
  --maxw: 1320px;
  --r-lg: 18px;
  --r-md: 11px;
  --r-sm: 7px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

/* ---------- INTRO LOADER ---------- */
.intro{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.intro-logo{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  will-change:transform, opacity;
}
.intro-logo svg{
  width:116px; height:auto; color:var(--bone);
  opacity:0; transform:scale(.5);
  animation:intro-icon .9s var(--ease) .2s forwards;
}
.intro-logo .intro-txt{
  font-family:var(--display); font-weight:600; text-transform:none;
  font-size:38px; letter-spacing:-.015em; line-height:1;
  color:var(--bone);
  opacity:0; transform:translateY(14px);
  animation:intro-fade-up .7s var(--ease) .7s forwards;
}
.intro-logo .intro-txt em{
  font-family:inherit; font-style:normal; color:var(--gold);
}

@keyframes intro-icon{
  to{ opacity:1; transform:scale(1); }
}
@keyframes intro-fade-up{
  to{ opacity:1; transform:translateY(0); }
}

.intro.settle .intro-logo{
  animation:intro-settle 1s var(--ease-io) forwards;
}
.intro.settle{
  animation:intro-bg-out .6s var(--ease) .7s forwards;
}

@keyframes intro-settle{
  0%{   transform:translate(0,0) scale(1); }
  100%{ transform:translate(calc(-50vw + 60px), calc(-50vh + 49px)) scale(.33); opacity:1; }
}
@keyframes intro-bg-out{
  to{ opacity:0; visibility:hidden; }
}

@media(max-width:900px){
  .intro-logo svg{ width:56px; }
  .intro-logo .intro-txt{ font-size:18px; }
  @keyframes intro-settle{
    0%{   transform:translate(0,0) scale(1); }
    100%{ transform:translate(calc(-50vw + 44px), calc(-50vh + 40px)) scale(.33); opacity:1; }
  }
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
[id]{ scroll-margin-top:90px; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:none; outline:none; }
::selection{ background:var(--gold); color:#fff; }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#1c1a15; border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-dp); }

/* ---------- GRAIN + VIGNETTE ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ---------- PAGE WIPE ---------- */
.wipe{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:var(--ink); transform:scaleY(0); transform-origin:bottom;
}
.wipe.in{ transform:scaleY(1); transform-origin:bottom; transition:transform .55s var(--ease-io); }
.wipe.out{ transform:scaleY(0); transform-origin:top; transition:transform .6s var(--ease-io); }

/* ---------- LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }
.sec{ padding-block:clamp(68px,11vw,160px); }
.sec-sm{ padding-block:clamp(48px,7vw,96px); }
.rule{ height:1px; background:var(--line); width:100%; }

/* ---------- TYPE ---------- */
.eyebrow{
  font-family:var(--label); font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--gold); flex:none; }
.eyebrow.center{ justify-content:center; }

/* sentence case, negative tracking that tightens as size grows (Inter Tight) */
h1,h2,h3,h4,.display{
  font-family:var(--display); font-weight:600; text-transform:none;
  line-height:1.06; letter-spacing:-.01em; text-wrap:balance;
}
h1,.h1{ font-size:clamp(40px,7.4vw,82px); line-height:1.02; letter-spacing:-.018em; }
h2,.h2{ font-size:clamp(30px,4.6vw,56px); line-height:1.08; letter-spacing:-.014em; }
h3,.h3{ font-size:clamp(22px,2.7vw,38px); line-height:1.12; letter-spacing:-.01em; }
h4,.h4{ font-size:clamp(18px,1.5vw,21px); line-height:1.3; letter-spacing:-.01em; }

/* accent words inside a heading — Instrument Serif italic, as on contractorai.co.
   The brand lockup keeps the sans, so it's excluded. */
.ser,
h1 em:not(.brand-txt em),
h2 em,
.r30-head em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.01em; color:var(--gold);
}
.brand-txt em{ font-family:inherit; font-style:normal; color:var(--gold); }

.lede{
  font-size:clamp(17px,1.4vw,21px); color:var(--bone-dim); line-height:1.45;
  max-width:58ch; text-wrap:pretty; font-weight:400;
}
p{ color:var(--bone-dim); max-width:66ch; text-wrap:pretty; }
/* counters: fixed-width digits so numbers don't jitter while they count */
[data-count]{ font-variant-numeric:tabular-nums; }
.copper{ color:var(--gold); }

/* ---------- BUTTONS ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  font-family:var(--display); font-weight:600; text-transform:none;
  letter-spacing:-.01em; font-size:15px; line-height:1;
  padding:20px 30px; border-radius:var(--r-sm); overflow:hidden; isolation:isolate;
  cursor:pointer; white-space:nowrap;
  transition:color .35s var(--ease), border-color .35s;
}
.btn span{ position:relative; z-index:2; }
.btn .arw{ position:relative; z-index:2; transition:transform .4s var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg,var(--gold-lit),var(--gold) 55%,var(--gold-dp));
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }

.btn-solid{
  background:linear-gradient(120deg,var(--gold-lit),var(--gold) 55%,var(--gold-dp));
  color:#fff; box-shadow:0 12px 42px -14px var(--gold-glow);
}
.btn-solid::before{ background:var(--bone); }
.btn-solid:hover{ color:var(--ink); }

.btn-ghost{ border:1px solid var(--line-2); color:var(--bone); }
.btn-ghost:hover{ color:#fff; border-color:transparent; }

.btn-sm{ padding:14px 22px; font-size:13px; }
.btn-lg{ padding:24px 40px; font-size:17px; }

/* spin-border pill — rotating conic gradient behind a solid inner pill. Stays flat;
   nothing moves on hover, the glow does the work. */
.btn-spin{
  position:relative; display:inline-flex; padding:1.5px; border-radius:999px;
  overflow:hidden; isolation:isolate; cursor:pointer;
  box-shadow:0 14px 46px -16px var(--gold-glow);
  transition:box-shadow .4s var(--ease);
}
.btn-spin:focus-visible{ outline:2px solid var(--gold-lit); outline-offset:5px; }

/* Main CTAs match the header button exactly — the revolving ring is the effect.
   A white halo used to sit here and washed the ring out, so it's just a soft
   gold cast now, which stays out of the ring's way. */
.btn-spin:not(.sm){
  box-shadow:0 14px 46px -18px var(--gold-glow);
}
.btn-spin:not(.sm):hover{
  box-shadow:0 16px 54px -16px rgba(214,176,107,.4);
}
.btn-spin-ring{
  position:absolute; inset:-1000%; z-index:0;
  background:conic-gradient(from 90deg at 50% 50%, var(--gold-lit) 0%, var(--gold-dp) 50%, var(--gold-lit) 100%);
  animation:spinBorder 2.6s linear infinite;
}
.btn-spin-in{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:14px;
  padding:22px 38px; border-radius:999px; background:var(--ink);
  font-family:var(--display); font-weight:600; text-transform:none;
  letter-spacing:-.01em; font-size:16px; line-height:1; color:var(--bone);
  transition:background .3s, gap .35s var(--ease);
}
.btn-spin-in .arw{ transition:transform .4s var(--ease); }
.btn-spin:hover .btn-spin-in{ background:#000; gap:18px; }
.btn-spin:hover .btn-spin-in .arw{ transform:translateX(4px); }
@keyframes spinBorder{ to{ transform:rotate(360deg); } }

/* cool variant — the original purple/indigo gradient from the reference button */
/* "cool" variant — the reference button's conic gradient, 2s linear spin,
   on a slate-950 pill. Used by the header CTA. */
.btn-spin.cool .btn-spin-ring{
  background:conic-gradient(from 90deg at 50% 50%, #EBCB8F 0%, #3A3124 50%, #EBCB8F 100%);
  animation-duration:2s;
}
.btn-spin.cool{ box-shadow:0 10px 30px -14px rgba(214,176,107,.35); }
.btn-spin.cool .btn-spin-in{
  background:#0A0A0B;
  color:var(--bone);
  font-weight:500;                       /* font-medium */
  transition:background .3s var(--ease), gap .35s var(--ease);
}
.btn-spin.cool:hover .btn-spin-in{ background:#141416; }
.btn-spin.cool:focus-visible{ outline:2px solid var(--gold-lit); outline-offset:2px; }

/* compact size — matches the reference button: h-12, px-8, text-sm, 1px ring */
.btn-spin.sm{ box-shadow:none; padding:1px; height:48px; }
.btn-spin.sm .btn-spin-in{
  height:100%; padding:4px 32px; font-size:14px; gap:9px; line-height:1;
}
.btn-spin.sm:hover .btn-spin-in{ gap:11px; }

.tlink{
  font-family:var(--label); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bone-dim); display:inline-flex; gap:9px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line-2); transition:.3s;
}
.tlink:hover{ color:var(--gold-lit); border-color:var(--gold); }

/* ---------- NAV — floating liquid-glass bar ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:16px var(--gut) 0;
  transition:padding .45s var(--ease);
}
.nav.solid{ padding-top:10px; }

/* Material dressing exactly as specified in the liquid-glass README.
   The module owns the optics; everything below is its documented recipe. */
.nav-in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:66px; max-width:var(--maxw); margin-inline:auto;
  padding-inline:clamp(16px,2vw,26px);

  border-radius:28px;                  /* the module reads this for the map */
  background:linear-gradient(180deg,   /* slight tint for text contrast     */
    rgba(16, 16, 17, 0.35), rgba(16, 16, 17, 0.55));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),           /* drop shadow               */
    inset 0 1px 1px rgba(255, 255, 255, 0.5),  /* specular top highlight    */
    inset 0 -8px 20px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.13); /* 1px glass border          */
}
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand svg{ width:24px; height:auto; color:var(--bone); transition:color .4s; }
.brand:hover svg{ color:var(--gold-lit); }
.brand-txt{
  font-family:var(--display); font-weight:600; text-transform:none;
  font-size:17px; letter-spacing:-.01em; line-height:1;
}
.brand-txt em{ font-family:inherit; font-style:normal; color:var(--gold); }

.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-family:var(--label); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); position:relative; padding-block:6px; transition:color .3s;
}
.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,.nav-links a.active{ color:var(--bone); }
.nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }

.burger{ display:none; width:44px; height:44px; position:relative; cursor:pointer; }
.burger i{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--bone);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger i:nth-child(1){ top:19px; } .burger i:nth-child(2){ top:25px; }
.burger.on i:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger.on i:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.mob{
  position:fixed; inset:0; z-index:880; background:var(--ink-1);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease);
}
.mob.open{ clip-path:inset(0 0 0 0); }
.mob a{
  font-family:var(--display); text-transform:none; font-size:clamp(32px,8.4vw,60px);
  font-weight:600; line-height:1.08; padding-block:10px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline;
  opacity:0; transform:translateY(28px); transition:opacity .5s,transform .6s var(--ease);
}
.mob a i{ font-family:var(--label); font-size:12px; font-style:normal; color:var(--gold); }
.mob.open a{ opacity:1; transform:none; }
.mob.open a:nth-child(1){ transition-delay:.14s } .mob.open a:nth-child(2){ transition-delay:.20s }
.mob.open a:nth-child(3){ transition-delay:.26s } .mob.open a:nth-child(4){ transition-delay:.32s }
.mob.open a:nth-child(5){ transition-delay:.38s }
@media(max-width:900px){ .nav-links,.nav .btn,.nav .btn-spin{ display:none; } .burger{ display:block; } }

/* ---------- REVEAL PRIMITIVES ---------- */
.rv{ opacity:0; transform:translateY(34px); }
.rv.on{ opacity:1; transform:none; transition:opacity .9s var(--ease),transform 1s var(--ease); }
.line-mask{ overflow:hidden; display:block; }
.line-mask > span{ display:block; transform:translateY(105%); }
.line-mask.on > span{ transform:none; transition:transform 1.05s var(--ease); }
.ch{ display:inline-block; opacity:0; transform:translateY(.7em) rotate(3deg); }
.ch.on{ opacity:1; transform:none; transition:opacity .5s,transform .8s var(--ease); }

/* ============================================================
   HERO
   ============================================================ */
/* Layout ported 1:1 from the reference component. Colours moved from its
   Tailwind orange/yellow/red to the champagne palette (2026-10-07). */
.shero{
  position:relative; width:100%; height:100vh; height:100svh;
  overflow:hidden; background:#000;
}
.shero-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  background:#000; touch-action:none;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.shero-canvas.on{ opacity:1; }
/* Bottom blend into the next section, plus a soft dark halo over the middle
   where the headline and subtitle sit — the shader's bright streaks get
   dimmed there so the copy stays readable as they cross behind it. */
.shero-fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 42% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,.22) 55%, transparent 78%),
    linear-gradient(180deg, transparent 76%, rgba(0,0,0,.55) 90%, var(--ink) 100%);
}
/* absolute inset-0 z-10 flex flex-col items-center justify-center text-white */
.shero-content{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center;
}

/* mb-8 + the badge pill */
.shero-badge-wrap{ margin-bottom:2rem; animation:shFadeDown .8s ease-out forwards; }
/* slimmer and far more translucent than the reference pill */
.shero-badge{
  display:flex; align-items:center; gap:.45rem;
  padding:.34rem 1rem;
  background:rgba(214,176,107,.05);
  backdrop-filter:blur(10px);
  border:1px solid rgba(214,176,107,.22);
  border-radius:9999px;
  font-size:.8125rem; line-height:1.15rem;
  color:rgba(242,240,235,.8);
}
.shero-badge-ico{ color:var(--gold-lit); font-size:.75rem; }

/* text-center space-y-6 max-w-5xl mx-auto px-4 */
.shero-body{
  display:flex; flex-direction:column; gap:1.5rem;
  max-width:64rem; margin-inline:auto; padding-inline:1rem; width:100%;
}
.shero-heads{ display:flex; flex-direction:column; gap:.5rem; }

/* text-5xl md:text-7xl lg:text-8xl font-bold + gradient clipped to the text */
.shero-h1{
  font-family:var(--display); font-weight:650; text-transform:none;
  font-size:3rem; line-height:1.02; letter-spacing:-.01em; margin:0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  opacity:0; animation:shFadeUp .8s ease-out forwards;
}
.shero-h1-a{
  background-image:linear-gradient(to right,#F2F0EB,#EFE3CB 55%,#EBCB8F);
  animation-delay:.2s;
}
.shero-h1-b{
  background-image:linear-gradient(to right,#EBCB8F,#D6B06B 55%,#B98F4B);
  animation-delay:.4s;
}

/* max-w-3xl mx-auto */
.shero-sub-wrap{
  max-width:48rem; margin-inline:auto;
  opacity:0; animation:shFadeUp .8s ease-out forwards; animation-delay:.6s;
}
.shero-sub{
  font-size:1.125rem; line-height:1.625;       /* text-lg leading-relaxed */
  font-weight:300;                              /* font-light */
  color:rgba(242,240,235,.82);
  max-width:none; margin:0;
}

/* flex-col sm:flex-row gap-4 justify-center mt-10 */
.shero-btns{
  display:flex; flex-direction:column; gap:1rem;
  justify-content:center; align-items:center; margin-top:2.5rem;
  opacity:0; animation:shFadeUp .8s ease-out forwards; animation-delay:.8s;
}
.shero-btn{
  padding:1rem 2rem; border-radius:9999px;      /* px-8 py-4 rounded-full */
  font-family:var(--display); font-weight:600; font-size:1.125rem; line-height:1.4;
  text-transform:none; letter-spacing:-.01em; white-space:nowrap;
  transition:all .3s ease;
}
.shero-btn-primary{
  background:linear-gradient(180deg,#EFD29D,#C99E55);
  color:#0A0A0B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -12px rgba(214,176,107,.45);
}
.shero-btn-primary:hover{
  background:linear-gradient(180deg,#F4DDB2,#D6B06B);
  transform:scale(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 16px 40px -12px rgba(214,176,107,.55);
}
.shero-btn-secondary{
  background:rgba(242,240,235,.04);
  border:1px solid rgba(242,240,235,.18);
  color:var(--bone); backdrop-filter:blur(6px);
}
.shero-btn-secondary:hover{
  background:rgba(242,240,235,.08);
  border-color:rgba(214,176,107,.45);
  transform:scale(1.04);
}

@keyframes shFadeDown{ from{ opacity:0; transform:translateY(-20px);} to{ opacity:1; transform:none; } }
@keyframes shFadeUp{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:none; } }

/* sm: and up */
@media(min-width:640px){
  .shero-btns{ flex-direction:row; }
}
/* md: */
@media(min-width:768px){
  .shero-h1{ font-size:4.5rem; }
  .shero-sub{ font-size:1.25rem; }
}
/* lg: */
@media(min-width:1024px){
  .shero-h1{ font-size:6rem; }
  .shero-sub{ font-size:1.5rem; }
}
@media (prefers-reduced-motion:reduce){
  .shero-badge-wrap,.shero-h1,.shero-sub-wrap,.shero-btns{ opacity:1; animation:none; }
}
.scroll-cue{
  position:absolute; bottom:26px; right:var(--gut); z-index:3;
  display:flex; align-items:center; gap:12px;
  font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.scroll-cue i{ display:block; width:1px; height:52px; background:linear-gradient(var(--gold),transparent); }
@media(max-width:820px){ .scroll-cue{ display:none; } }

/* ---------- STAT STRIP ---------- */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat{ padding:32px 28px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat b{
  display:flex; align-items:baseline; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:clamp(40px,4.6vw,66px);
  line-height:1; color:var(--bone); letter-spacing:-.01em;
}
/* the counter <span> lives inside <b> — keep it inline so the number never wraps */
.stat b span{ display:inline; font:inherit; letter-spacing:inherit; color:inherit; }
.stat b i{ font-style:normal; color:var(--gold-lit); }
.stat > span{
  display:block; margin-top:16px; font-family:var(--label); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); line-height:1.55; max-width:22ch;
}
@media(max-width:780px){
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-bottom:1px solid var(--line); padding:28px 18px; }
  .stat:nth-child(2n){ border-right:0; }
}

/* ---------- MARQUEE ---------- */
.marq{ overflow:hidden; border-block:1px solid var(--line); padding-block:20px; background:var(--ink-1); }
.marq-track{ display:flex; gap:56px; width:max-content; animation:marq 38s linear infinite; }
.marq:hover .marq-track{ animation-play-state:paused; }
.marq-track span{
  font-family:var(--display); text-transform:uppercase; font-size:clamp(16px,1.7vw,22px);
  letter-spacing:.05em; color:var(--muted); display:flex; align-items:center; gap:56px; white-space:nowrap;
}
.marq-track span:nth-child(even){ color:var(--bone); text-shadow:0 0 12px rgba(242,240,235,.45); }
.marq-track span::after{ content:''; width:5px; height:5px; background:var(--gold); border-radius:50%; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- PROBLEM ---------- */
.prob-head{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:end; margin-bottom:70px; }
.prob-grid{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.prob-card{
  padding:40px 30px 46px; border-right:1px solid var(--line); position:relative; overflow:hidden;
  transition:background .5s var(--ease);
}
.prob-card:last-child{ border-right:0; }
.prob-card::after{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.prob-card:hover{ background:var(--ink-2); }
.prob-card:hover::after{ transform:scaleX(1); }
.prob-card .n{ font-family:var(--label); font-size:12.5px; color:var(--gold); letter-spacing:.1em; }
.prob-card h4{ margin:22px 0 14px; color:var(--bone); }
.prob-card p{ font-size:16px; line-height:1.55; }
@media(max-width:1000px){ .prob-grid{ grid-template-columns:repeat(2,1fr); } .prob-card:nth-child(2n){border-right:0} .prob-card{border-bottom:1px solid var(--line)} }
@media(max-width:820px){ .prob-head{ grid-template-columns:1fr; gap:26px; } }
@media(max-width:600px){ .prob-grid{ grid-template-columns:1fr; } .prob-card{ border-right:0; } }

/* ============================================================
   THE SYSTEM — pinned scroll sequence
   ============================================================ */
.sys{ background:var(--ink-1); border-block:1px solid var(--line); }
.sys-track{ position:relative; height:600vh; }
.sys-pin{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
.sys-in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sys-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }

.sys-label{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-bottom:16px;
}
.sys-label .eyebrow{ margin-bottom:0; }
.sys-count{
  font-family:var(--label); font-size:12.5px; letter-spacing:.1em; color:var(--muted); flex:none;
}
.sys-count b{ color:var(--bone); font-weight:400; }

.sys-prog{ display:flex; gap:8px; margin-bottom:34px; }
.sys-prog i{ flex:1; height:3px; border-radius:999px; background:var(--line-2); position:relative; overflow:hidden; }
.sys-prog i::after{
  content:''; position:absolute; inset:0; background:var(--gold-lit);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.sys-prog i.done::after{ transform:scaleX(1); }

.sys-steps{ position:relative; min-height:clamp(360px,42vh,460px); }
.sys-step{
  position:absolute; inset:0; opacity:0; transform:translateY(22px); pointer-events:none;
  transition:opacity .55s var(--ease), transform .75s var(--ease);
}
.sys-step.live{ opacity:1; transform:none; position:relative; pointer-events:auto; }
.sys-step .num{
  font-family:var(--display); font-size:clamp(56px,7vw,104px); font-weight:700; line-height:.8;
  -webkit-text-stroke:1px var(--gold); color:transparent; display:block; margin-bottom:18px;
}
.sys-step h3{ color:var(--bone); margin-bottom:18px; }
.sys-step p{ font-size:16px; line-height:1.7; max-width:44ch; }
.sys-step .tag{
  display:inline-flex; align-items:center; gap:9px; margin-top:26px; padding:9px 16px;
  border:1px solid var(--line-2); border-radius:999px;
  font-family:var(--label); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-lit);
}
.sys-step .tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold-lit); animation:pulseDot 1.8s infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 var(--gold-glow) } 50%{ opacity:.5; box-shadow:0 0 0 7px transparent } }

.sys-stage{
  position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:var(--r-lg);
  background:radial-gradient(ellipse at 50% 40%,var(--ink-3),var(--ink-1) 72%);
  overflow:hidden;
}
.sys-stage .crn{ position:absolute; width:16px; height:16px; border:1px solid var(--gold); }
.sys-stage .crn.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.sys-stage .crn.br{ bottom:14px; right:14px; border-left:0; border-top:0; }
/* matches .sys-step timing exactly so copy and visual move as one */
.vis{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transform:translateY(22px) scale(.96); pointer-events:none;
  transition:opacity .55s var(--ease), transform .75s var(--ease);
}
.vis.live{ opacity:1; transform:none; pointer-events:auto; }

/* ============================================================
   THE SYSTEM v2 — motion-first: huge title + a looping scene
   Every scene is sized in cqmin (the stage is a size container),
   so it scales as one piece. Base styles are the FINAL frame, so
   with reduced motion each scene simply shows its end state.
   Animations only attach under .sx-step.live, so a scene restarts
   from frame one every time its step comes on screen.
   ============================================================ */
.sx-steps{ position:relative; height:min(66vh,600px); }
.sx-step{
  position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,80px); align-items:center;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
}
.sx-step.live{ opacity:1; pointer-events:auto; }

.sx-title{
  font-family:var(--display); font-weight:600; color:var(--bone);
  font-size:clamp(46px,6.4vw,108px); line-height:.96; letter-spacing:-.016em;
  margin:0; text-wrap:balance;
}
.sx-title em{ font-style:normal; color:var(--gold-lit); }
.sx-num{
  display:block; font-size:.3em; line-height:1; letter-spacing:.04em; margin-bottom:.55em;
  -webkit-text-stroke:1px var(--gold); color:transparent;
}
.sx-step.live .sx-title{ animation:sxRise .9s var(--ease) both; }
@keyframes sxRise{ from{ opacity:0; transform:translateY(42px); filter:blur(6px); } }

.sx-stage{
  position:relative; height:100%; aspect-ratio:1; max-width:100%; justify-self:end;
  container-type:size; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:radial-gradient(ellipse at 50% 45%, var(--ink-3), var(--ink-1) 72%);
}
.sx-step.live .sx-stage{ animation:sxStage .9s var(--ease) both; }
@keyframes sxStage{ from{ opacity:0; transform:scale(.94); } }

/* ---- 01 leads flow in ---- */
.f-area{
  position:absolute; left:50%; top:50%; width:66cqmin; height:66cqmin; transform:translate(-50%,-50%);
  border-radius:50%; border:1px dashed rgba(214,176,107,.55);
  background:radial-gradient(circle, rgba(214,176,107,.12), transparent 70%);
}
.f-area::after{
  content:''; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--gold);
  opacity:0; animation:fArea 2.6s ease-out infinite;
}
@keyframes fArea{ from{ transform:scale(.25); opacity:.7; } to{ transform:scale(1); opacity:0; } }
.f-core{
  position:absolute; left:50%; top:50%; width:13cqmin; height:13cqmin; transform:translate(-50%,-50%);
  border-radius:3cqmin; background:var(--gold); color:#000; display:grid; place-items:center;
  box-shadow:0 0 6cqmin rgba(214,176,107,.45);
}
.f-core svg{ width:55%; }
.f-dot{
  position:absolute; left:50%; top:50%; width:2.8cqmin; height:2.8cqmin; margin:-1.4cqmin 0 0 -1.4cqmin;
  border-radius:50%; background:#5FA773;
  transform:translate(calc(var(--tx) * 1cqmin), calc(var(--ty) * 1cqmin));
}
.f-dot.out{ background:#E25A4F; transform:translate(calc(var(--tx) * 1.3cqmin), calc(var(--ty) * 1.3cqmin)); }
.f-dot.in::after{
  content:'+1'; position:absolute; left:50%; bottom:150%; transform:translateX(-50%);
  font-family:var(--label); font-size:max(11px,2.6cqmin); font-weight:600; color:#7FCB94; opacity:0;
}
.sx-step.live .f-dot{ animation:4s linear infinite; animation-delay:calc(var(--d) * -1s); }
.sx-step.live .f-dot.in{ animation-name:fIn; }
.sx-step.live .f-dot.out{ animation-name:fOut; }
.sx-step.live .f-dot.in::after{ animation:fPlus 4s linear infinite; animation-delay:calc(var(--d) * -1s); }
@keyframes fIn{
  0%{ transform:translate(calc(var(--sx) * 1cqmin), calc(var(--sy) * 1cqmin)) scale(.7); opacity:0; background:var(--bone); box-shadow:0 0 2cqmin rgba(242,240,235,.6); animation-timing-function:cubic-bezier(.35,.1,.25,1); }
  10%{ opacity:1; }
  60%{ transform:translate(calc(var(--tx) * 1cqmin), calc(var(--ty) * 1cqmin)) scale(1); background:var(--bone); box-shadow:0 0 2cqmin rgba(242,240,235,.6); }
  67%{ transform:translate(calc(var(--tx) * 1cqmin), calc(var(--ty) * 1cqmin)) scale(1.9); background:#5FA773; box-shadow:0 0 0 1.6cqmin rgba(95,167,115,.22), 0 0 5cqmin rgba(95,167,115,.9); }
  85%{ transform:translate(calc(var(--tx) * 1cqmin), calc(var(--ty) * 1cqmin)) scale(1.1); opacity:1; background:#5FA773; box-shadow:0 0 2cqmin rgba(95,167,115,.6); }
  100%{ transform:translate(calc(var(--tx) * 1cqmin), calc(var(--ty) * 1cqmin)) scale(.4); opacity:0; background:#5FA773; }
}
@keyframes fOut{
  0%{ transform:translate(calc(var(--sx) * 1cqmin), calc(var(--sy) * 1cqmin)) scale(.7); opacity:0; background:var(--bone); animation-timing-function:cubic-bezier(.35,.1,.25,1); }
  10%{ opacity:1; }
  52%{ transform:translate(calc(var(--tx) * 1cqmin), calc(var(--ty) * 1cqmin)) scale(1); background:var(--bone); box-shadow:none; }
  58%{ transform:translate(calc(var(--tx) * 1cqmin), calc(var(--ty) * 1cqmin)) scale(1.5); background:#E25A4F; box-shadow:0 0 0 1.4cqmin rgba(226,90,79,.2), 0 0 4cqmin rgba(226,90,79,.85); animation-timing-function:ease-out; }
  100%{ transform:translate(calc(var(--tx) * 1.75cqmin), calc(var(--ty) * 1.75cqmin)) scale(.6); opacity:0; background:#E25A4F; }
}
@keyframes fPlus{
  0%,62%{ opacity:0; transform:translate(-50%,0); }
  70%{ opacity:1; }
  92%,100%{ opacity:0; transform:translate(-50%,-180%); }
}

/* ---- 02 called in 60 seconds ---- */
.c-wrap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4.5cqmin; }
.c-box{ position:relative; width:50cqmin; height:50cqmin; }
.c-ring{ position:absolute; inset:0; transform:rotate(-90deg); }
.c-ring circle{ fill:none; stroke-width:2.4; }
.c-ring .trk{ stroke:var(--line-2); }
.c-ring .bar{ stroke:var(--gold-lit); stroke-linecap:round; stroke-dasharray:60; stroke-dashoffset:13; }
.c-phone{
  position:absolute; inset:30%; border-radius:50%; background:var(--gold); color:#000;
  display:grid; place-items:center; box-shadow:0 0 7cqmin rgba(214,176,107,.45);
}
.c-phone svg{ width:46%; }
.c-wave{ position:absolute; inset:30%; border-radius:50%; border:2px solid var(--gold); opacity:0; }
.c-time{
  font-family:var(--display); font-weight:600; font-size:10cqmin; line-height:1; color:var(--bone);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  --sec:47; counter-reset:sec var(--sec);
}
.c-time::before{ content:'0:' counter(sec, decimal-leading-zero); }
.c-chips{ display:flex; gap:2cqmin; }
.c-chips span{
  padding:1.4cqmin 3cqmin; border:1px solid rgba(95,167,115,.6); border-radius:999px;
  font-family:var(--label); font-size:max(11.5px,2.6cqmin); letter-spacing:.09em; text-transform:uppercase; color:#7FCB94;
}
.c-chips span::before{ content:'\2713\00a0'; }
@property --sec{ syntax:'<integer>'; inherits:false; initial-value:47; }
.sx-step.live .c-ring .bar{ animation:cBar 5s var(--ease) infinite; }
.sx-step.live .c-time{ animation:cSec 5s linear infinite; }
.sx-step.live .c-phone svg{ animation:cShake 5s linear infinite; }
.sx-step.live .c-wave{ animation:cWave 1.4s ease-out infinite; }
.sx-step.live .c-wave + .c-wave{ animation-delay:.7s; }
.sx-step.live .c-chips span{ animation:cChip 5s var(--ease) infinite backwards; }
.sx-step.live .c-chips span:nth-child(2){ animation-delay:.2s; }
.sx-step.live .c-chips span:nth-child(3){ animation-delay:.4s; }
@keyframes cBar{ 0%{ stroke-dashoffset:60; } 46%,100%{ stroke-dashoffset:13; } }
@keyframes cSec{ 0%{ --sec:0; } 46%,100%{ --sec:47; } }
@keyframes cShake{
  0%,46%,100%{ transform:none; }
  4%,12%,20%,28%,36%{ transform:rotate(-14deg); }
  8%,16%,24%,32%,40%{ transform:rotate(14deg); }
}
@keyframes cWave{ from{ transform:scale(1); opacity:.7; } to{ transform:scale(2.2); opacity:0; } }
@keyframes cChip{ 0%,46%{ opacity:0; transform:translateY(2cqmin) scale(.8); } 54%,94%{ opacity:1; transform:none; } 100%{ opacity:0; } }

/* ---- 03 qualified by a human ---- */
.g-gate{
  position:absolute; left:50%; top:22%; bottom:14%; width:2px; margin-left:-1px;
  background:linear-gradient(180deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  box-shadow:0 0 3cqmin rgba(214,176,107,.5);
}
.g-head{
  position:absolute; left:50%; top:9%; width:12cqmin; height:12cqmin; transform:translateX(-50%);
  border-radius:50%; border:1px solid var(--gold); color:var(--gold-lit); display:grid; place-items:center;
  background:var(--ink-1);
}
.g-head svg{ width:55%; }
.g-card{
  position:absolute; left:50%; top:56%; white-space:nowrap;
  padding:2cqmin 3.4cqmin; border-radius:1.6cqmin; border:1px solid var(--line-2); background:var(--ink-2);
  font-family:var(--label); font-size:max(12.5px,3cqmin); letter-spacing:.02em; color:var(--bone);
  transform:translate(-50%,-50%); opacity:0;
}
.g-card::after{
  position:absolute; right:-2.2cqmin; top:-2.2cqmin; width:4.6cqmin; height:4.6cqmin; border-radius:50%;
  display:grid; place-items:center; font-size:2.8cqmin; color:#000; opacity:0;
}
.g-card.ok::after{ content:'\2713'; background:#5FA773; }
.g-card.no::after{ content:'\2715'; background:#E25A4F; }
.sx-step.live .g-card{ animation:8s linear infinite backwards; animation-delay:calc(var(--d) * 1s); }
.sx-step.live .g-card.ok{ animation-name:gPass; }
.sx-step.live .g-card.no{ animation-name:gFail; }
.sx-step.live .g-card::after{ animation:gBadge 8s linear infinite backwards; animation-delay:calc(var(--d) * 1s); }
@keyframes gPass{
  0%{ transform:translate(-50%,-50%) translateX(-58cqmin); opacity:0; animation-timing-function:cubic-bezier(.2,.7,.3,1); }
  3%{ opacity:1; }
  10%,15%{ transform:translate(-50%,-50%); border-color:var(--line-2); }
  16%{ border-color:#5FA773; box-shadow:0 0 4cqmin rgba(95,167,115,.45); animation-timing-function:cubic-bezier(.6,0,.8,.4); }
  24%{ opacity:1; }
  27%,100%{ transform:translate(-50%,-50%) translateX(58cqmin); opacity:0; border-color:#5FA773; }
}
@keyframes gFail{
  0%{ transform:translate(-50%,-50%) translateX(-58cqmin); opacity:0; animation-timing-function:cubic-bezier(.2,.7,.3,1); }
  3%{ opacity:1; }
  10%,15%{ transform:translate(-50%,-50%); border-color:var(--line-2); }
  16%{ transform:translate(-50%,-50%); border-color:#E25A4F; box-shadow:0 0 4cqmin rgba(226,90,79,.4); opacity:1; animation-timing-function:cubic-bezier(.5,0,.8,.5); }
  25%,100%{ transform:translate(-50%,-50%) translateY(34cqmin) rotate(14deg); opacity:0; border-color:#E25A4F; }
}
@keyframes gBadge{ 0%,12%{ opacity:0; transform:scale(.3); } 15%{ opacity:1; transform:scale(1.15); } 17%,100%{ opacity:1; transform:none; } }

/* ---- 04 booked on your calendar ---- */
.k-cal{ position:absolute; left:50%; top:50%; width:80cqmin; transform:translate(-50%,-50%); }
.k-days{ display:grid; grid-template-columns:repeat(5,1fr); gap:2cqmin; margin-bottom:2.4cqmin; }
.k-days span{ font-family:var(--label); font-size:max(11.5px,2.6cqmin); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; }
.k-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2cqmin; }
.k-grid i{ position:relative; height:15cqmin; border:1px dashed var(--line-2); border-radius:1.6cqmin; }
.k-grid b{
  position:absolute; inset:-1px; border-radius:1.6cqmin; background:linear-gradient(160deg, var(--gold-lit), var(--gold));
  box-shadow:0 1.6cqmin 4cqmin -1cqmin rgba(214,176,107,.55);
  display:grid; place-items:center; color:#000; font-size:4.4cqmin; font-weight:700;
}
.k-grid b::before{ content:'\2713'; }
.sx-step.live .k-grid b{ animation:kDrop 6s var(--ease) infinite backwards; animation-delay:calc(var(--d) * 1s); }
@keyframes kDrop{
  0%{ opacity:0; transform:translateY(-16cqmin) scale(.85); }
  7%{ opacity:1; transform:translateY(1.2cqmin) scale(1.03); }
  11%,84%{ opacity:1; transform:none; }
  94%,100%{ opacity:0; transform:scale(.9); }
}

/* ---- 05 reviews roll in ---- */
.r-stars{ position:absolute; left:50%; top:24%; transform:translate(-50%,-50%); display:flex; gap:2.6cqmin; }
.r-stars svg{ width:12cqmin; color:var(--gold-lit); filter:drop-shadow(0 0 2.4cqmin rgba(214,176,107,.5)); }
.sx-step.live .r-stars svg{ animation:rStar .7s var(--ease) backwards; }
.sx-step.live .r-stars svg:nth-child(2){ animation-delay:.15s; }
.sx-step.live .r-stars svg:nth-child(3){ animation-delay:.3s; }
.sx-step.live .r-stars svg:nth-child(4){ animation-delay:.45s; }
.sx-step.live .r-stars svg:nth-child(5){ animation-delay:.6s; }
@keyframes rStar{ from{ opacity:.12; transform:scale(.3) rotate(-40deg); color:var(--line-2); } }
.r-bub{
  position:absolute; left:50%; top:66%; width:33cqmin; padding:2.4cqmin 3cqmin;
  border:1px solid var(--line-2); border-radius:2cqmin 2cqmin 2cqmin .4cqmin; background:var(--ink-2);
  transform:translate(calc(-50% + var(--x) * 1cqmin), -50%); opacity:0;
  display:flex; flex-direction:column; gap:1.4cqmin;
}
.r-bub span{ color:var(--gold-lit); font-size:3.2cqmin; letter-spacing:.3em; line-height:1; }
.r-bub i{ display:block; height:1.4cqmin; border-radius:999px; background:var(--line-2); }
.r-bub i + i{ width:62%; }
.sx-step.live .r-bub{ animation:rBub 4.5s var(--ease) infinite backwards; animation-delay:calc(var(--d) * 1s); }
@keyframes rBub{
  0%{ opacity:0; transform:translate(calc(-50% + var(--x) * 1cqmin), -50%) translateY(26cqmin) scale(.9); }
  16%,64%{ opacity:1; transform:translate(calc(-50% + var(--x) * 1cqmin), -50%) scale(1); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--x) * 1cqmin), -50%) translateY(-24cqmin) scale(.8); }
}

/* ---- 06 one contractor per city: the padlock secures ----
   Sequence (once per .live): open shackle drops and clicks shut (0.3–1.1s),
   keyhole turns, body flashes, then shockwaves + "Locked to you" chip.
   Rivals keep bouncing off it after that. */
.t-grid{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; grid-template-columns:repeat(7,8cqmin); gap:1.4cqmin; opacity:.55;
}
.t-grid i{ height:8cqmin; border-radius:1.2cqmin; background:var(--ink-3); border:1px solid var(--line); }
.t-grid i:nth-child(3n){ background:var(--ink-2); }
.l-halo{
  position:absolute; left:50%; top:46%; width:56cqmin; height:56cqmin; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(214,176,107,.30), rgba(214,176,107,.08) 45%, transparent 70%);
}
.l-lock{
  position:absolute; left:50%; top:46%; width:30cqmin; transform:translate(-50%,-50%);
  filter:drop-shadow(0 2cqmin 5cqmin rgba(0,0,0,.6));
}
.l-lock svg{ width:100%; overflow:visible; }
.l-shackle{ fill:none; stroke:var(--gold-lit); stroke-width:10; stroke-linecap:round; }
.l-body{ transform-box:fill-box; transform-origin:center; }
.l-key{ transform-box:fill-box; transform-origin:50% 30%; }
.t-wave{
  position:absolute; left:50%; top:46%; width:34cqmin; height:34cqmin; margin:-17cqmin 0 0 -17cqmin;
  border-radius:50%; border:2px solid var(--gold); opacity:0;
}
.l-chip{
  position:absolute; left:50%; top:80%; transform:translateX(-50%); white-space:nowrap;
  padding:1.6cqmin 3.4cqmin; border-radius:999px; border:1px solid rgba(214,176,107,.55);
  background:rgba(214,176,107,.10);
  font-family:var(--label); font-size:max(11.5px,2.8cqmin); font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-lit);
}
.l-chip::before{ content:'\2713\00a0'; }
.t-rival{
  position:absolute; left:50%; top:46%; width:3cqmin; height:3cqmin; margin:-1.5cqmin 0 0 -1.5cqmin;
  border-radius:50%; background:#E25A4F; opacity:0;
}
.sx-step.live .t-grid i:nth-child(4n+1){ animation:tFlick 3.2s ease-in-out infinite; }
.sx-step.live .t-grid i:nth-child(5n+2){ animation:tFlick 2.6s ease-in-out .8s infinite; }
.sx-step.live .l-lock{ animation:lIn .7s var(--ease) backwards; }
.sx-step.live .l-shackle{ animation:lShackle 1.1s cubic-bezier(.5,0,.6,1) .3s backwards; }
.sx-step.live .l-key{ animation:lKey .5s var(--ease) 1.05s backwards; }
.sx-step.live .l-body{ animation:lClick .6s ease-out .95s backwards; }
.sx-step.live .l-halo{ animation:lHalo 2.4s ease-in-out 1s infinite backwards; }
.sx-step.live .t-wave{ animation:tWave 2.4s ease-out 1s infinite; }
.sx-step.live .l-chip{ animation:lChip .6s cubic-bezier(.34,1.56,.64,1) 1.3s backwards; }
.sx-step.live .t-rival{ animation:tRival 3.3s ease-in-out infinite backwards; animation-delay:calc(var(--d) * 1s + 1.6s); }
@keyframes tFlick{ 0%,100%{ background:var(--ink-3); } 50%{ background:#25251f; } }
@keyframes lIn{ from{ opacity:0; transform:translate(-50%,-40%) scale(.9); } }
@keyframes lShackle{
  0%,30%{ transform:translateY(-22px); }
  58%{ transform:translateY(3px); }
  66%{ transform:translateY(-2px); }
  74%,100%{ transform:none; }
}
@keyframes lKey{ from{ transform:rotate(-90deg); } }
@keyframes lClick{
  0%{ transform:scale(1); filter:none; }
  30%{ transform:scale(1.06); filter:brightness(1.35); }
  100%{ transform:scale(1); filter:none; }
}
@keyframes lHalo{ 0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(.95); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); } }
@keyframes tWave{ from{ transform:scale(.9); opacity:.75; } to{ transform:scale(2.4); opacity:0; } }
@keyframes lChip{ from{ opacity:0; transform:translateX(-50%) translateY(2cqmin) scale(.8); } }
@keyframes tRival{
  0%{ transform:translate(calc(var(--sx) * 1cqmin), calc(var(--sy) * 1cqmin)); opacity:0; background:var(--bone); }
  15%{ opacity:.9; }
  48%{ transform:translate(calc(var(--bx) * 1cqmin), calc(var(--by) * 1cqmin)); background:var(--bone); box-shadow:none; }
  54%{ transform:translate(calc(var(--bx) * 1cqmin), calc(var(--by) * 1cqmin)) scale(1.5); background:#E25A4F; box-shadow:0 0 4cqmin rgba(226,90,79,.85); opacity:1; }
  100%{ transform:translate(calc(var(--sx) * 1cqmin), calc(var(--sy) * 1cqmin)) scale(.6); opacity:0; background:#E25A4F; }
}

@media(max-width:900px){
  .sx-steps{ height:auto; display:flex; flex-direction:column; gap:72px; }
  .sx-step{ position:relative; opacity:1; pointer-events:auto; grid-template-columns:1fr; gap:24px; }
  .sx-title{ font-size:clamp(40px,11vw,64px); }
  .sx-stage{ height:auto; width:100%; justify-self:stretch; }
}
/* Reduced motion: no pinning, no loops — every step stacked, final frame */
@media (prefers-reduced-motion:reduce){
  .sys-track{ height:auto; }
  .sys-pin{ position:static; height:auto; padding-block:90px; display:block; }
  .sx-steps{ height:auto; display:flex; flex-direction:column; gap:80px; }
  .sx-step{ position:relative; opacity:1; pointer-events:auto; }
  .sx-step *, .sx-step *::before, .sx-step *::after{ animation:none !important; }
  .f-dot, .g-card, .r-bub, .g-card::after{ opacity:1; }
  .g-card{ display:none; }
  .g-head + .g-card{ display:block; }
  .r-bub ~ .r-bub{ display:none; }
}

/* ============================================================
   HOW WE OPERATE — pinned rules (mirrors the system section)
   ============================================================ */
.rules{ background:var(--ink-1); border-block:1px solid var(--line); }
.rules-track{ position:relative; height:340vh; }
.rules-pin{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
.rules-in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.rules-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }

.rules-label{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.rules-label .eyebrow{ margin-bottom:0; }
.rules-count{ font-family:var(--label); font-size:12.5px; letter-spacing:.1em; color:var(--muted); flex:none; }
.rules-count b{ color:var(--bone); font-weight:400; }

.rules-prog{ display:flex; gap:8px; margin-bottom:34px; }
.rules-prog i{ flex:1; height:3px; border-radius:999px; background:var(--line-2); position:relative; overflow:hidden; }
.rules-prog i::after{
  content:''; position:absolute; inset:0; background:var(--gold-lit);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.rules-prog i.done::after{ transform:scaleX(1); }

.rules-steps{ position:relative; min-height:clamp(340px,40vh,440px); }
.rule-step{
  position:absolute; inset:0; opacity:0; transform:translateY(22px); pointer-events:none;
  transition:opacity .55s var(--ease), transform .75s var(--ease);
}
.rule-step.live{ opacity:1; transform:none; position:relative; pointer-events:auto; }
.rule-step .num{
  font-family:var(--display); font-size:clamp(56px,7vw,104px); font-weight:700; line-height:.8;
  -webkit-text-stroke:1px var(--gold); color:transparent; display:block; margin-bottom:18px;
}
.rule-step h3{ color:var(--bone); margin-bottom:18px; }
.rule-step p{ font-size:16px; line-height:1.7; max-width:42ch; }
.rule-step .tag{
  display:inline-flex; align-items:center; gap:9px; margin-top:26px; padding:9px 16px;
  border:1px solid var(--line-2); border-radius:999px;
  font-family:var(--label); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-lit);
}
.rule-step .tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold-lit); animation:pulseDot 1.8s infinite; }

.rules-stage{
  position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:var(--r-lg);
  background:radial-gradient(ellipse at 50% 40%,var(--ink-3),var(--ink-1) 72%); overflow:hidden;
}
.rules-stage .crn{ position:absolute; width:16px; height:16px; border:1px solid var(--gold); }
.rules-stage .crn.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.rules-stage .crn.br{ bottom:14px; right:14px; border-left:0; border-top:0; }
.rvis{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transform:translateY(22px) scale(.96); pointer-events:none;
  transition:opacity .55s var(--ease), transform .75s var(--ease);
}
.rvis.live{ opacity:1; transform:none; pointer-events:auto; }

/* ---- rule 1: the race ---- */
.race{ width:78%; display:flex; flex-direction:column; gap:20px; }
.race-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; }
.race-name{ font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); white-space:nowrap; }
.race-bar{ height:8px; border-radius:999px; background:var(--line-2); overflow:hidden; }
.race-bar i{ display:block; height:100%; border-radius:999px; transform:scaleX(0); transform-origin:left; }
.race-t{ font-family:var(--label); font-size:12.5px; color:var(--muted); flex:none; }
.race-row.you .race-bar i{ background:linear-gradient(90deg,var(--gold-lit),var(--gold)); }
.race-row.you .race-t{ color:var(--gold-lit); }
.race-row.them .race-bar i{ background:var(--muted-2); }
.rvis.live .race-row.you .race-bar i{ animation:raceYou 3s var(--ease) infinite; }
.rvis.live .race-row.them .race-bar i{ animation:raceThem 3s linear infinite; }
@keyframes raceYou{ 0%{ transform:scaleX(0) } 14%,100%{ transform:scaleX(1) } }
@keyframes raceThem{ 0%{ transform:scaleX(0) } 100%{ transform:scaleX(.22) } }
.race-won{
  margin-top:6px; text-align:center; font-family:var(--label); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-lit); opacity:0;
}
.rvis.live .race-won{ animation:fadeSoft 3s var(--ease) infinite; }
@keyframes fadeSoft{ 0%,20%{ opacity:0 } 40%,100%{ opacity:1 } }

/* ---- rule 2: AI + human gate ---- */
.gate{ width:80%; display:flex; flex-direction:column; gap:30px; align-items:center; }
.gate-lane{ position:relative; width:100%; height:24px; }
.gate-lane .lead-dot{
  position:absolute; top:50%; left:0; width:9px; height:9px; margin-top:-4.5px; border-radius:50%;
  background:var(--gold-lit); box-shadow:0 0 10px var(--gold-glow);
}
.rvis.live .gate-lane .lead-dot{ animation:leadFlow 2.4s linear infinite; }
.gate-lane .d2{ animation-delay:.48s } .gate-lane .d3{ animation-delay:.96s }
.gate-lane .d4{ animation-delay:1.44s } .gate-lane .d5{ animation-delay:1.92s }
@keyframes leadFlow{ 0%{ left:0; opacity:0 } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ left:100%; opacity:0 } }
.gate-nodes{ display:flex; align-items:center; gap:18px; }
.gate-node{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.gate-node svg{ width:38px; height:38px; padding:9px; border:1px solid var(--line-2); border-radius:var(--r-md); }
.gate-node.ai svg{ color:var(--muted); }
.gate-node.human svg{ color:var(--gold-lit); border-color:var(--gold); }
.gate-node span{ font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); }
.gate-arrow{ color:var(--gold); font-size:20px; }
.rvis.live .gate-node.human svg{ animation:pulseDot 2s infinite; }

/* ---- rule 3: scoreboard ---- */
.score{ width:76%; display:flex; flex-direction:column; gap:10px; }
.score-row{
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(255,255,255,.015);
  font-family:var(--label); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.score-row.off{ color:var(--muted); }
.score-row.off span{ text-decoration:line-through; }
.score-row.off b{ color:var(--muted); font-size:14px; }
.score-row.on{
  border-color:var(--gold); border-left:2px solid var(--gold);
  background:rgba(214,176,107,.08); color:var(--bone);
}
.score-row.on b{ font-family:var(--display); font-size:20px; color:var(--gold-lit); }
.rvis.live .score-row{ animation:scoreIn .6s var(--ease) backwards; }
.rvis.live .score-row:nth-child(1){ animation-delay:.05s }
.rvis.live .score-row:nth-child(2){ animation-delay:.18s }
.rvis.live .score-row:nth-child(3){ animation-delay:.31s }
.rvis.live .score-row:nth-child(4){ animation-delay:.5s }
@keyframes scoreIn{ from{ opacity:0; transform:translateX(-16px) } }

@media(max-width:900px){
  .rules-track{ height:auto; }
  .rules-pin{ position:static; height:auto; padding-block:70px 0; display:block; }
  .rules-grid{ grid-template-columns:1fr; gap:34px; }
  .rules-steps{ min-height:0; display:flex; flex-direction:column; gap:64px; }
  .rule-step{ position:relative; opacity:1; transform:none; pointer-events:auto; }
  .rule-step .num{ margin-bottom:12px; }
  .rules-stage{ display:none; }
  .rules-prog{ display:none; }
}

/* ---- v1: service-area radar ---- */
.v1{ width:78%; display:flex; flex-direction:column; align-items:center; gap:26px; }
.radar{ position:relative; width:min(300px,80%); aspect-ratio:1; }
.radar i{ position:absolute; inset:0; border:1px solid var(--line-2); border-radius:50%; animation:ripple 3.4s infinite; }
.radar i:nth-child(2){ animation-delay:1.13s } .radar i:nth-child(3){ animation-delay:2.26s }
@keyframes ripple{ from{ transform:scale(.18); opacity:0 } 30%{opacity:.85} to{ transform:scale(1); opacity:0 } }
/* the dashed boundary = the contractor's service radius */
.radar .area{
  position:absolute; inset:20%; border:1px dashed rgba(95,167,115,.5); border-radius:50%;
  background:radial-gradient(circle,rgba(95,167,115,.09),transparent 70%);
}
.radar .core{
  position:absolute; inset:0; margin:auto; width:14px; height:14px;
  background:var(--gold-lit); border-radius:50%; box-shadow:0 0 26px var(--gold);
  animation:pulseDot 2.6s infinite;
}
.radar .pin{
  position:absolute; width:9px; height:9px; border-radius:50%;
  transform:translate(-50%,-50%); cursor:pointer; outline:none;
}
/* hover / focus readout: why this lead did or didn't reach the contractor */
.radar .pin::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%) translateY(4px);
  padding:8px 12px; border-radius:var(--r-sm); white-space:nowrap; pointer-events:none;
  font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; line-height:1;
  background:#0A0A0B; border:1px solid var(--line-2); color:var(--bone);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .28s var(--ease);
  z-index:6;
}
.radar .pin::before{
  content:''; position:absolute; left:50%; bottom:calc(100% + 7px);
  width:7px; height:7px; transform:translateX(-50%) rotate(45deg) translateY(4px);
  background:#0A0A0B; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .28s var(--ease); z-index:6;
}
.radar .pin:hover::after,.radar .pin:focus-visible::after{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.radar .pin:hover::before,.radar .pin:focus-visible::before{ opacity:1; visibility:visible; transform:translateX(-50%) rotate(45deg) translateY(0); }
/* the hovered pin pauses its idle pulse and swells so it reads as selected */
.radar .pin:hover,.radar .pin:focus-visible{ animation-play-state:paused; z-index:5; }
.radar .pin.in:hover{ box-shadow:0 0 0 5px rgba(95,167,115,.26), 0 0 20px rgba(95,167,115,.9); }
.radar .pin.in::after{ border-color:rgba(95,167,115,.5); }
.radar .pin.out:hover{ opacity:1; box-shadow:0 0 0 5px rgba(226,90,79,.24), 0 0 20px rgba(226,90,79,.85); }
.radar .pin.out::after{ border-color:rgba(226,90,79,.5); }
/* green = inside the radius, these become booked estimates */
.radar .pin.in{
  background:#5FA773; box-shadow:0 0 0 3px rgba(95,167,115,.18), 0 0 14px rgba(95,167,115,.7);
  animation:pinIn 2.8s ease-in-out infinite;
}
/* NB: nth-of-type counts every <span> in .radar (.area and .core come first),
   so the green pins are spans 3-6 and the red ones 7-11. */
.radar .pin.in:nth-of-type(4){ animation-delay:.45s }
.radar .pin.in:nth-of-type(5){ animation-delay:.9s }
.radar .pin.in:nth-of-type(6){ animation-delay:1.35s }
@keyframes pinIn{ 0%,100%{ opacity:1; transform:translate(-50%,-50%) scale(1) } 50%{ opacity:.75; transform:translate(-50%,-50%) scale(1.28) } }
/* red = outside the radius, never reaches the contractor */
.radar .pin.out{
  width:8px; height:8px; background:#E25A4F; opacity:.85;
  box-shadow:0 0 0 3px rgba(226,90,79,.14), 0 0 14px rgba(226,90,79,.6);
  animation:pinOut 3.6s ease-in-out infinite;
}
.radar .pin.out:nth-of-type(8){ animation-delay:.6s }
.radar .pin.out:nth-of-type(9){ animation-delay:1.2s }
.radar .pin.out:nth-of-type(10){ animation-delay:1.8s }
.radar .pin.out:nth-of-type(11){ animation-delay:2.4s }
@keyframes pinOut{ 0%,100%{ opacity:.88 } 50%{ opacity:.5 } }

.v1-key{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.v1-key .k{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--label); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.v1-key .k::before{ content:''; width:8px; height:8px; border-radius:50%; }
.v1-key .k.in::before{ background:#5FA773; box-shadow:0 0 10px rgba(95,167,115,.7); }
.v1-key .k.out::before{ background:#E25A4F; box-shadow:0 0 10px rgba(226,90,79,.6); }

/* ---- v2: speed-to-lead sequence ---- */
.v2{ width:82%; display:flex; flex-direction:column; gap:14px; }
.lead{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1px solid var(--line-2); border-radius:var(--r-md); background:rgba(255,255,255,.03);
  animation:leadIn 5s var(--ease) infinite;
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:#5FA773; flex:none; animation:pulseDot 1.4s infinite; }
.lead-t{ flex:1; min-width:0; }
.lead-t b{ display:block; font-family:var(--display); font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:var(--bone); }
.lead-t span{ font-family:var(--label); font-size:12px; letter-spacing:.08em; color:var(--muted); }
.lead-s{ font-family:var(--label); font-size:12.5px; color:var(--gold-lit); flex:none; }
@keyframes leadIn{ 0%{ opacity:0; transform:translateY(-10px) } 8%,100%{ opacity:1; transform:none } }

.chans{ display:flex; flex-direction:column; gap:9px; }
.ch{
  display:flex; align-items:center; gap:12px; padding:12px 15px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(255,255,255,.015);
  font-family:var(--label); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  animation:chFire 5s var(--ease) infinite;
}
.ch svg{ width:15px; flex:none; }
.ch span{ flex:1; }
.ch b{ color:var(--gold-lit); font-size:14px; opacity:0; animation:chTick 5s var(--ease) infinite; }
.ch.c1, .ch.c1 b{ animation-delay:.2s }
.ch.c2, .ch.c2 b{ animation-delay:1.1s }
.ch.c3, .ch.c3 b{ animation-delay:2s }
@keyframes chFire{
  0%,4%{ border-color:var(--line); color:var(--muted); background:rgba(255,255,255,.015); transform:translateX(-8px); opacity:.35 }
  12%{ border-color:var(--gold); color:var(--bone); background:rgba(214,176,107,.10); transform:none; opacity:1 }
  90%,100%{ border-color:var(--line-2); color:var(--bone-dim); background:rgba(255,255,255,.02); transform:none; opacity:1 }
}
@keyframes chTick{ 0%,8%{ opacity:0; transform:scale(.4) } 16%,100%{ opacity:1; transform:none } }

.v2-bar{ height:3px; border-radius:999px; background:var(--line-2); overflow:hidden; margin-top:4px; }
.v2-bar i{ display:block; height:100%; width:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--gold-lit)); transform-origin:left; animation:v2Fill 5s var(--ease) infinite; }
@keyframes v2Fill{ 0%{ transform:scaleX(0) } 60%,100%{ transform:scaleX(1) } }
.v2-foot{ font-family:var(--label); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; }

/* v3 checklist */
.chk{ width:76%; display:flex; flex-direction:column; gap:12px; }
.chk div{
  display:flex; align-items:center; gap:14px; padding:15px 18px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(255,255,255,.02);
  font-family:var(--label); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim);
}
.chk div b{ margin-left:auto; color:var(--gold-lit); font-family:var(--display); font-size:15px; }
.chk div.no{ color:var(--muted); border-style:dashed; }
.chk div.no b{ color:var(--muted); }
.vis.live .chk div{ animation:slideIn .6s var(--ease) backwards; }
.vis.live .chk div:nth-child(1){animation-delay:.05s} .vis.live .chk div:nth-child(2){animation-delay:.15s}
.vis.live .chk div:nth-child(3){animation-delay:.25s} .vis.live .chk div:nth-child(4){animation-delay:.35s}
@keyframes slideIn{ from{ opacity:0; transform:translateX(-18px) } }

/* ---- v4: booked estimates landing on the calendar ---- */
.v4{ width:84%; display:flex; flex-direction:column; gap:14px; }
.v4-h{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.v4-h b{ color:#5FA773; font-weight:400; display:inline-flex; align-items:center; gap:7px; }
.v4-h b::before{ content:''; width:7px; height:7px; border-radius:50%; background:#5FA773; animation:pulseDot 2s infinite; }
.v4-list{ display:flex; flex-direction:column; gap:8px; }
.apt{
  display:flex; align-items:center; gap:12px; padding:13px 15px;
  border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:var(--r-sm); background:rgba(214,176,107,.08);
  font-family:var(--label); font-size:12.5px; letter-spacing:.06em; color:var(--bone-dim);
  animation:aptIn 5s var(--ease) infinite;
}
.apt .d{ text-transform:uppercase; color:var(--gold-lit); flex:none; width:30px; }
.apt .ti{ color:var(--bone); flex:none; width:42px; }
.apt .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.apt .ok{ color:#5FA773; flex:none; font-size:13px; }
.apt.a1{ animation-delay:0s } .apt.a2{ animation-delay:.45s }
.apt.a3{ animation-delay:.9s } .apt.a4{ animation-delay:1.35s }
@keyframes aptIn{
  0%,3%{ opacity:0; transform:translateX(22px) }
  12%{ opacity:1; transform:none }
  92%,100%{ opacity:1; transform:none }
}
.v4-foot{ font-family:var(--label); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; }

/* v5 reviews */
.rev{ text-align:center; width:80%; }
.rev .stars{ display:flex; justify-content:center; gap:9px; margin-bottom:22px; }
.rev .stars svg{ width:clamp(24px,3vw,38px); color:var(--gold-lit); }
.vis.live .rev .stars svg{ animation:starIn .5s var(--ease) backwards; }
.vis.live .rev .stars svg:nth-child(2){animation-delay:.1s} .vis.live .rev .stars svg:nth-child(3){animation-delay:.2s}
.vis.live .rev .stars svg:nth-child(4){animation-delay:.3s} .vis.live .rev .stars svg:nth-child(5){animation-delay:.4s}
@keyframes starIn{ from{ opacity:0; transform:scale(.4) rotate(-25deg) } }
.rev b{ font-family:var(--display); font-size:clamp(38px,5vw,66px); color:var(--bone); display:block; line-height:1; }
.rev span{ font-family:var(--label); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.rev .loop{ margin-top:24px; display:inline-flex; align-items:center; gap:10px; font-family:var(--label); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-lit); }
.rev .loop svg{ width:15px; animation:spin 4s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

@media(max-width:900px){
  .sys-track{ height:auto; }
  .sys-pin{ position:static; height:auto; padding-block:70px 0; display:block; }
  .sys-grid{ grid-template-columns:1fr; gap:34px; }
  .sys-steps{ min-height:0; display:flex; flex-direction:column; gap:64px; }
  .sys-step{ position:relative; opacity:1; transform:none; pointer-events:auto; }
  .sys-step .num{ margin-bottom:12px; }
  .sys-stage{ display:none; }
  .sys-prog{ display:none; }
}

/* ---------- RESULTS BAR ---------- */
.res-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.res-cell{ background:var(--ink); padding:44px 30px; transition:background .5s; }
.res-cell:hover{ background:var(--ink-2); }
.res-cell b{
  font-family:var(--display); font-weight:600; font-size:clamp(42px,5.2vw,76px); line-height:.95;
  color:var(--bone); display:flex; align-items:baseline; white-space:nowrap; letter-spacing:-.01em;
}
.res-cell b span{ display:inline; font:inherit; letter-spacing:inherit; color:inherit; }
.res-cell b i{ font-style:normal; color:var(--gold-lit); }
.res-cell > span{ display:block; margin-top:18px; font-family:var(--label); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); line-height:1.5; max-width:20ch; }
/* Google-style star row under the rating */
.res-stars{ display:flex; gap:4px; margin-top:12px; }
.res-stars svg{ width:18px; height:18px; color:#E8A33D; flex:none; }
.res-cell:hover .res-stars svg{ animation:starPop .45s var(--ease) backwards; }
.res-cell:hover .res-stars svg:nth-child(2){ animation-delay:.06s }
.res-cell:hover .res-stars svg:nth-child(3){ animation-delay:.12s }
.res-cell:hover .res-stars svg:nth-child(4){ animation-delay:.18s }
.res-cell:hover .res-stars svg:nth-child(5){ animation-delay:.24s }
@keyframes starPop{ from{ transform:scale(.5) rotate(-20deg); opacity:.3 } }
.res-cell .res-stars + span{ margin-top:14px; }
@media(max-width:900px){ .res-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .res-grid{ grid-template-columns:1fr; } }

/* ---------- FEATURED 30-DAY RESULT ---------- */
.r30{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(70px,9vw,130px);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(214,176,107,.16), transparent 70%),
    linear-gradient(180deg, var(--ink-1), var(--ink) 60%);
  border-block:1px solid var(--line);
}
.r30-head{
  font-size:clamp(28px,4.2vw,58px); line-height:1.02; color:var(--bone);
  margin-bottom:clamp(38px,5vw,62px); text-wrap:balance;
}
.r30-head em{ font-style:normal; color:var(--gold-lit); }

/* raw proof screenshots */
.r30-proof{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px);
  margin-bottom:clamp(44px,6vw,74px); text-align:left;
}
.r30-proof figure{ display:flex; flex-direction:column; gap:14px; }
.r30-shot{
  border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  background:#000; box-shadow:0 24px 60px -28px rgba(0,0,0,.95);
  transition:border-color .4s var(--ease), transform .5s var(--ease);
}
.r30-shot img{ width:100%; height:auto; display:block; }
.r30-proof figure:hover .r30-shot{ border-color:var(--gold); transform:translateY(-4px); }
.r30-proof figcaption{
  font-family:var(--label); font-size:12.5px; letter-spacing:.05em; line-height:1.6;
  color:var(--muted); display:flex; gap:10px; align-items:baseline;
}
.r30-proof figcaption b{ color:var(--bone); font-weight:400; }
.r30-proof figcaption .n{ color:var(--gold); flex:none; letter-spacing:.16em; }

/* the two headline numbers */
.r30-nums{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,50px);
  padding-bottom:clamp(28px,3.5vw,42px); border-bottom:1px solid var(--line);
}
.r30-nums > div:first-child{ border-right:1px solid var(--line); }
.r30-nums b{
  display:flex; align-items:baseline; justify-content:center; white-space:nowrap;
  font-family:var(--display); font-weight:700; font-size:clamp(38px,7vw,96px);
  line-height:1; color:var(--gold-lit); letter-spacing:-.015em;
}
.r30-nums b span{ display:inline; font:inherit; letter-spacing:inherit; color:inherit; }
.r30-nums b i{ font-style:normal; }
.r30-nums > div > span{
  display:block; margin-top:16px; font-family:var(--label); font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim);
}

/* the supporting one-liner of raw figures */
.r30-line{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  padding-block:clamp(22px,3vw,32px);
  font-family:var(--label); font-size:12px; letter-spacing:.04em; color:var(--muted);
}
.r30-line span{ display:inline-flex; gap:7px; }
.r30-line b{ color:var(--bone); font-weight:400; }
.r30-line span + span::before{ content:'·'; color:var(--gold); margin-right:19px; }

.r30-note{
  color:var(--bone-dim); font-size:clamp(14px,1.3vw,17px);
  margin:0 auto clamp(28px,3.6vw,40px); max-width:44ch;
}
.r30-cta{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.r30-fine{
  font-family:var(--label); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
@media(max-width:860px){
  .r30-proof{ grid-template-columns:1fr; }
  .r30-nums{ grid-template-columns:1fr; gap:32px; }
  .r30-nums > div:first-child{ border-right:0; border-bottom:1px solid var(--line); padding-bottom:32px; }
  .r30-line span + span::before{ display:none; }
}

/* ---------- VIDEO TESTIMONIAL ---------- */
.vt{ background:var(--ink-1); border-block:1px solid var(--line); }
.vt-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.vt-player{
  position:relative; aspect-ratio:16/9; background:var(--ink-3); overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg); cursor:pointer;
}
.vt-player video,.vt-player img{ width:100%; height:100%; object-fit:cover; }
.vt-player iframe{ width:100%; height:100%; border:0; display:block; }
.vt-player.yt{ cursor:default; }
.vt-player .ph{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:20px;
  background:repeating-linear-gradient(45deg,var(--ink-2),var(--ink-2) 12px,var(--ink-3) 12px,var(--ink-3) 24px);
  font-family:var(--label); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  transition:opacity .4s;
}
.vt-play{
  position:absolute; inset:0; margin:auto; width:88px; height:88px; border-radius:50%;
  background:rgba(214,176,107,.92); display:grid; place-items:center; z-index:3;
  transition:transform .4s var(--ease),background .3s,opacity .3s;
}
.vt-play svg{ width:22px; color:#fff; margin-left:4px; }
.vt-player:hover .vt-play{ transform:scale(1.12); background:var(--gold-lit); }
.vt-player.playing .vt-play,.vt-player.playing .ph{ opacity:0; pointer-events:none; }
.vt-quote{
  font-family:var(--display); font-size:clamp(24px,2.9vw,42px); text-transform:none;
  line-height:1.14; color:var(--bone); font-weight:500; margin-bottom:26px;
}
/* hard numbers beside the client video */
.vt-stats{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.vt-stats > div{
  flex:1; min-width:140px; padding:18px 20px;
  border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:var(--r-md); background:rgba(214,176,107,.08);
}
.vt-stats b{
  display:flex; align-items:baseline; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:clamp(30px,3.4vw,44px);
  line-height:1; color:var(--bone); letter-spacing:-.01em;
}
.vt-stats b span{ display:inline; font:inherit; letter-spacing:inherit; color:inherit; }
.vt-stats b i{ font-style:normal; color:var(--gold-lit); }
.vt-stats > div > span{
  display:block; margin-top:10px; font-family:var(--label); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim);
}

.who{ display:flex; align-items:center; gap:14px; }
.who .av{ width:46px; height:46px; border-radius:50%; background:var(--ink-3); border:1px solid var(--line-2); object-fit:cover; flex:none; }
.who b{ display:block; font-family:var(--display); font-size:16px; letter-spacing:.04em; color:var(--bone); text-transform:none; }
.who span{ font-family:var(--label); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
@media(max-width:900px){ .vt-grid{ grid-template-columns:1fr; } }

/* ---------- TEXT TESTIMONIALS ---------- */
.tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tst{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px 28px; background:var(--ink-1);
  display:flex; flex-direction:column; gap:20px; transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.tst:hover{ transform:translateY(-6px); border-color:var(--line-2); background:var(--ink-2); }
.tst .metric{ font-family:var(--display); font-size:clamp(26px,2.6vw,38px); color:var(--gold-lit); line-height:1; text-transform:none; }
.tst p{ color:var(--bone-dim); font-size:16px; line-height:1.55; flex:1; }
.tst .who{ padding-top:20px; border-top:1px solid var(--line); }
@media(max-width:980px){ .tst-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .tst-grid{ grid-template-columns:1fr; } }

/* ---------- CHAT SCREENSHOT TESTIMONIALS ---------- */
.chat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px); }
.chat{ display:flex; flex-direction:column; gap:16px; }
.chat-shot{
  position:relative; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  background:#000; box-shadow:0 24px 60px -30px rgba(0,0,0,.95);
  max-height:620px;
  transition:border-color .4s var(--ease), transform .5s var(--ease);
}
.chat-shot img{ width:100%; height:auto; display:block; }
/* the screenshots are taller than the frame — fade the cut edge, and the caption
   sits on top of that fade so it costs no extra height below the card */
.chat-shot::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:190px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.72) 42%, var(--ink) 88%);
}
.chat:hover .chat-shot{ border-color:var(--gold); transform:translateY(-4px); }
.chat figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; gap:4px;
  padding:0 20px 20px;
}
.chat figcaption b{
  font-family:var(--display); font-weight:600; font-size:clamp(15px,1.35vw,18px);
  line-height:1.2; letter-spacing:-.02em; color:var(--gold);
}
.chat figcaption span{
  font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.09em;
  line-height:1.45; text-transform:uppercase; color:var(--bone-dim);
}
@media(max-width:900px){
  .chat-grid{ grid-template-columns:1fr; gap:34px; max-width:460px; margin-inline:auto; }
  .chat-shot{ max-height:560px; }
}

/* ---------- GUARANTEE ---------- */
.gua-in{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.gua-card{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(32px,4vw,54px);
  background:linear-gradient(150deg,var(--ink-2),var(--ink) 70%); overflow:hidden;
}
.gua-card::before{
  content:''; position:absolute; top:-40%; right:-20%; width:60%; height:120%;
  background:radial-gradient(circle,var(--gold-glow),transparent 68%); opacity:.7;
}
.gua-card .ic{ position:relative; width:44px; height:44px; border:1px solid var(--gold); border-radius:var(--r-sm); display:grid; place-items:center; margin-bottom:26px; }
.gua-card .ic svg{ width:19px; color:var(--gold-lit); }
.gua-card h3{ color:var(--bone); margin-bottom:16px; position:relative; }
.gua-card p{ position:relative; font-size:16.5px; line-height:1.55; }
@media(max-width:820px){ .gua-in{ grid-template-columns:1fr; } }

/* ---------- TRADES ---------- */
.trades{ display:flex; flex-wrap:wrap; gap:10px; }
.trades span{
  padding:11px 18px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--label); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  transition:.35s var(--ease);
}
.trades span:hover{ color:var(--bone); border-color:var(--gold); transform:translateY(-3px); }

/* ---------- BIG CTA ---------- */
.cta{ position:relative; overflow:hidden; text-align:center; }
.cta-bg{ position:absolute; inset:0; z-index:0; }
.cta-bg .orb{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80vw; height:80vw; border-radius:50%; filter:blur(110px); background:radial-gradient(circle,rgba(214,176,107,.24),transparent 62%); }
.cta-in{ position:relative; z-index:2; }
.cta h2{ margin-bottom:26px; }
.cta .lede{ margin-inline:auto; }
.cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px; }
.cta-meta{ display:flex; gap:32px; justify-content:center; flex-wrap:wrap; margin-top:34px; font-family:var(--label); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.cta-meta i{ font-style:normal; color:var(--gold); margin-right:7px; }

/* ---------- MOBILE STICKY RESULTS BAR ---------- */
.mob-results{
  display:none;
  position:fixed; bottom:16px; left:16px; right:16px; z-index:800;
  padding:16px 24px;
  border-radius:20px;
  background:linear-gradient(180deg,
    rgba(14, 14, 22, 0.18), rgba(14, 14, 22, 0.32));
  box-shadow:
    0 -8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -8px 20px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  color:var(--gold);
  text-align:center;
  font-family:var(--display); font-weight:600; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none;
}
@media(max-width:900px){
  .mob-results{ display:block; }
  .foot{ padding-bottom:72px; }
}

/* ---------- FOOTER ---------- */
.foot{ border-top:1px solid var(--line); background:var(--ink-1); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-block:70px 56px; }
.foot h5{ font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; font-weight:400; }
.foot ul{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.foot ul a{ color:var(--bone-dim); font-size:15.5px; padding-block:10px; display:inline-block; transition:color .3s,padding-left .3s; }
.foot ul a:hover{ color:var(--gold-lit); padding-left:6px; }
.foot-bot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-block:26px; border-top:1px solid var(--line); font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.foot-brand p{ font-size:15.5px; margin-top:18px; max-width:34ch; }
@media(max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1/-1; } }

/* ---------- PAGE HEADER ---------- */
.phead{ padding-top:170px; padding-bottom:clamp(50px,6vw,90px); position:relative; overflow:hidden; }
.phead .orb{ position:absolute; width:46vw; height:46vw; right:-12vw; top:-16vw; border-radius:50%; filter:blur(100px); background:radial-gradient(circle,rgba(214,176,107,.22),transparent 66%); }
.phead-in{ position:relative; z-index:2; }
.phead h1{ font-size:clamp(40px,7vw,104px); margin-bottom:26px; }

/* ---------- CASE STUDIES ---------- */
.case{ border-top:1px solid var(--line); padding-block:clamp(46px,5vw,74px); }
.case-in{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,70px); }
.case-meta .h4{ color:var(--bone); margin-bottom:10px; }
.case-tag{ font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-lit); margin-bottom:20px; display:block; }
.case-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:28px; }
.case-nums div b{ display:flex; align-items:baseline; white-space:nowrap; font-family:var(--display); font-size:clamp(30px,3.6vw,50px); color:var(--bone); line-height:1; }
.case-nums div b span{ display:inline; font:inherit; letter-spacing:inherit; color:inherit; }
.case-nums div b i{ font-style:normal; color:var(--gold-lit); }
.case-nums div > span{ display:block; margin-top:10px; font-family:var(--label); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); line-height:1.5; }

.shot{
  border:1px solid var(--line); border-radius:var(--r-lg); background:repeating-linear-gradient(45deg,var(--ink-1),var(--ink-1) 12px,var(--ink-2) 12px,var(--ink-2) 24px);
  aspect-ratio:16/10; display:grid; place-items:center; text-align:center; overflow:hidden; padding:20px;
  font-family:var(--label); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  transition:border-color .4s;
}
.shot:hover{ border-color:var(--line-2); }
.shot img{
  width:100%; height:100%; object-fit:cover;
  /* Without this, a grid item's automatic minimum size is based on its
     intrinsic ratio — a portrait photo demands more height than the box
     ever gives it and silently grows past height:100%, so object-fit:cover
     never gets a chance to crop it. min-height:0 is what actually makes
     "cover" cover. */
  min-width:0; min-height:0;
}
@media(max-width:900px){ .case-in{ grid-template-columns:1fr; } }
@media(max-width:640px){ .case-nums{ grid-template-columns:1fr; gap:14px; } }

/* ---------- ABOUT ---------- */
.ab-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:center; }
.ab-portrait{
  position:relative; aspect-ratio:4/5; border:1px solid var(--line); border-radius:var(--r-lg);
  background:repeating-linear-gradient(45deg,var(--ink-1),var(--ink-1) 12px,var(--ink-2) 12px,var(--ink-2) 24px);
  display:grid; place-items:center; overflow:hidden; text-align:center;
  font-family:var(--label); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.ab-portrait:has(img){ padding:0; }
.ab-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  filter:grayscale(1) contrast(1.06) brightness(.9);
}
/* feathers the photo's light backdrop into the black page */
.ab-portrait::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 38%, transparent 42%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 22%, transparent 62%, rgba(0,0,0,.72) 100%);
}
.vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.val{ background:var(--ink); padding:38px 30px; }
.val .n{ font-family:var(--label); font-size:12.5px; color:var(--gold); letter-spacing:.1em; }
.val h4{ color:var(--bone); margin:20px 0 12px; }
.val p{ font-size:16px; }
@media(max-width:900px){ .ab-grid{ grid-template-columns:1fr; } .vals{ grid-template-columns:1fr; } }

/* ============================================================
   FORM
   ============================================================ */
.fwrap{ display:grid; grid-template-columns:1fr .78fr; gap:clamp(30px,6vw,90px); align-items:start; }
.fcard{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-1); padding:clamp(26px,3.4vw,48px); position:relative; overflow:hidden; }
.fbar{ height:3px; border-radius:999px; background:var(--line-2); margin-bottom:26px; position:relative; overflow:hidden; }
.fbar i{ position:absolute; inset:0; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--gold-lit)); transform-origin:left; transform:scaleX(.2); transition:transform .6s var(--ease); }
.fmeta{ display:flex; justify-content:space-between; font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:30px; }
.fmeta b{ color:var(--gold-lit); font-weight:400; }

.fstep{ display:none; }
.fstep.live{ display:block; animation:fstepIn .55s var(--ease); }
@keyframes fstepIn{ from{ opacity:0; transform:translateX(22px) } }
.fstep .q{ font-family:var(--display); font-size:clamp(22px,2.5vw,34px); text-transform:none; color:var(--bone); line-height:1.05; margin-bottom:10px; }
.fstep .hint{ font-size:15.5px; color:var(--muted); margin-bottom:28px; }

.opts{ display:grid; gap:10px; }
.opts.two{ grid-template-columns:1fr 1fr; }
@media(max-width:540px){ .opts.two{ grid-template-columns:1fr; } }
.opt{
  position:relative; display:flex; align-items:center; gap:14px; padding:18px 20px;
  border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; transition:.3s var(--ease); background:rgba(255,255,255,.012);
  font-size:15px; color:var(--bone-dim);
}
.opt:hover{ border-color:var(--line-2); background:rgba(255,255,255,.03); color:var(--bone); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt .bx{ width:16px; height:16px; border:1px solid var(--line-2); border-radius:5px; flex:none; position:relative; transition:.3s; }
.opt .bx::after{ content:''; position:absolute; inset:3px; border-radius:2px; background:var(--gold-lit); transform:scale(0); transition:transform .3s var(--ease); }
.opt input:checked ~ .bx{ border-color:var(--gold-lit); }
.opt input:checked ~ .bx::after{ transform:scale(1); }
.opt.sel{ border-color:var(--gold); background:rgba(214,176,107,.10); color:var(--bone); }

.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.field input,.field textarea,.field select{
  width:100%; padding:16px 18px; border:1px solid var(--line); background:rgba(255,255,255,.015);
  color:var(--bone); font-size:17px; transition:.3s; border-radius:var(--r-md);
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--gold); background:rgba(214,176,107,.07); }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); }
.field textarea{ min-height:110px; resize:vertical; }
.field select option{ background:var(--ink-2); color:var(--bone); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:540px){ .two-col{ grid-template-columns:1fr; } }

.fnav{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:32px; padding-top:26px; border-top:1px solid var(--line); }
.fback{ font-family:var(--label); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:.3s; background:none; padding:14px 8px; margin:-14px -8px; }
.fback:hover{ color:var(--bone); }
.fback.hide{ visibility:hidden; }
.ferr{ color:var(--gold-lit); font-family:var(--label); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; margin-top:16px; display:none; }
.ferr.on{ display:block; }

.fdone{ display:none; text-align:center; padding-block:20px; }
.fdone.on{ display:block; animation:fstepIn .6s var(--ease); }
.fdone .tick{ width:74px; height:74px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; margin:0 auto 28px; }
.fdone .tick svg{ width:28px; color:var(--gold-lit); }
.fdone p{ margin-inline:auto; }
/* Booking step. Holds the striped placeholder until the iframe mounts, then
   drops the padding so the calendar sits flush inside the rounded frame. */
.cal-embed{
  margin-top:26px; min-height:480px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:repeating-linear-gradient(45deg,var(--ink-1),var(--ink-1) 12px,var(--ink-2) 12px,var(--ink-2) 24px);
  display:grid; place-items:center; text-align:center; padding:40px 20px;
  font-family:var(--label); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.cal-embed[data-mounted]{ padding:0; background:var(--ink-1); min-height:740px; align-items:stretch; }
.cal-load{ color:var(--muted); }
.cal-embed[data-mounted] .cal-load{
  position:absolute; left:50%; top:120px; transform:translateX(-50%); pointer-events:none;
}
.cal-embed[data-mounted]{ position:relative; }
.cal-alt{
  margin-top:16px; text-align:center; font-size:12.5px; color:var(--muted); max-width:none;
}
.cal-alt a{ color:var(--gold); border-bottom:1px solid rgba(214,176,107,.35); transition:border-color .3s; }
.cal-alt a:hover{ border-color:var(--gold); }
.fside{ position:sticky; top:110px; }
.fside ul{ list-style:none; display:flex; flex-direction:column; gap:20px; margin-top:30px; }
.fside li{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; color:var(--bone-dim); line-height:1.6; }
.fside li b{ font-family:var(--label); font-size:12px; letter-spacing:.08em; color:var(--gold); flex:none; padding-top:4px; }
@media(max-width:960px){ .fwrap{ grid-template-columns:1fr; } .fside{ position:static; } }

/* ---------- MOTION SAFETY ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rv,.line-mask>span,.ch{ opacity:1 !important; transform:none !important; }
  .grain{ display:none; }
}

/* ============================================================
   LANDING STRUCTURE — proof, the better way, how it works, FAQ
   Added to complete the page order: hero, social proof, problem,
   solution, features, how it works, guarantee, FAQ, CTA, footer.
   ============================================================ */

/* ---------- SOCIAL PROOF ---------- */
.proof-head{ display:grid; grid-template-columns:1.45fr 1fr; gap:56px; align-items:end; margin-bottom:clamp(40px,5vw,64px); }

.proof-nums{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; margin-bottom:clamp(28px,3.4vw,44px);
}
.proof-num{ background:var(--ink); padding:clamp(26px,2.8vw,40px) clamp(18px,2vw,28px); transition:background .5s; }
.proof-num:hover{ background:var(--ink-2); }
.proof-num b{
  font-family:var(--display); font-weight:600; font-size:clamp(28px,3.2vw,46px);
  line-height:.95; letter-spacing:-.02em; color:var(--bone);
  display:flex; align-items:baseline; white-space:nowrap;
}
/* the counter <span> must stay inline — as a block it snaps the number
   onto its own line, which is the bug the stat strip had */
.proof-num b span{ display:inline; font:inherit; letter-spacing:inherit; color:inherit; }
.proof-num b i{ font-style:normal; color:var(--gold-lit); }
.proof-num > span{
  display:block; margin-top:14px;
  font-family:var(--label); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-dim); line-height:1.5; max-width:22ch;
}

.proof-shots{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px);
  margin-bottom:clamp(28px,3.4vw,44px);
}
.proof-shots figure{ display:flex; flex-direction:column; gap:14px; }
.proof-shot{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--ink-2); }
.proof-shot img{ display:block; width:100%; height:auto; }
.proof-shots figcaption{ display:flex; gap:9px; align-items:baseline; font-size:14.5px; line-height:1.5; color:var(--muted); }
.proof-shots figcaption b{ color:var(--bone); font-weight:500; }
.proof-shots figcaption .n{ font-family:var(--label); font-size:12px; letter-spacing:.09em; color:var(--gold); flex:none; }

.proof-quote{ padding:clamp(26px,3vw,42px); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-1); }
.proof-quote blockquote{
  font-family:var(--serif); font-size:clamp(22px,2.8vw,38px); line-height:1.2;
  letter-spacing:-.01em; color:var(--bone); margin:0 0 26px;
}
.proof-who{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.proof-who b{ display:block; font-size:15px; color:var(--bone); font-weight:500; }
.proof-who > div span{
  display:block; margin-top:4px;
  font-family:var(--label); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
}
.proof-link{
  display:inline-flex; align-items:center; gap:9px; padding:10px 0;
  font-family:var(--label); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bone); border-bottom:1px solid var(--line-2);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.proof-link:hover{ color:var(--gold); border-color:var(--gold); }
.proof-link .arw{ transition:transform .35s var(--ease); }
.proof-link:hover .arw{ transform:translateX(5px); }

/* ---------- THE COST OF THE GAP ---------- */
.prob-cost{
  margin-top:clamp(28px,3.4vw,48px);
  padding:clamp(24px,3vw,38px) clamp(24px,3.4vw,44px);
  border:1px solid var(--line); border-left:2px solid var(--gold); border-radius:var(--r-md);
  background:linear-gradient(90deg,rgba(214,176,107,.055),transparent 55%);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,44px); align-items:center;
}
.prob-cost-l{
  font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.prob-cost p{
  font-family:var(--display); font-size:clamp(17px,1.9vw,25px); line-height:1.35;
  letter-spacing:-.02em; color:var(--bone); max-width:none; margin:0;
}

/* ---------- THE BETTER WAY ---------- */
.swap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,30px); }
.swap-col{
  padding:clamp(26px,3vw,40px); border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--ink-1);
}
.swap-col.is-us{
  border-color:rgba(214,176,107,.28);
  background:linear-gradient(180deg,rgba(214,176,107,.05),transparent 60%),var(--ink-1);
}
.swap-col h4{
  font-family:var(--label); font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:26px;
}
.swap-col.is-us h4{ color:var(--gold); }
.swap-col ul{ list-style:none; display:flex; flex-direction:column; gap:15px; margin:0; padding:0; }
.swap-col li{ position:relative; padding-left:28px; font-size:16.5px; line-height:1.5; color:var(--bone-dim); }
.swap-col li::before{ content:'\00d7'; position:absolute; left:0; top:-1px; font-size:16px; color:var(--muted); }
.swap-col.is-us li{ color:var(--bone); }
.swap-col.is-us li::before{ content:'\2713'; color:var(--gold); }

/* ---------- BENEFIT LINE INSIDE EACH FEATURE ---------- */
.sys-step .ben{
  display:block; margin-top:16px; max-width:44ch;
  font-size:14.5px; line-height:1.6; color:var(--bone);
}
.sys-step .ben i{
  font-style:normal; font-family:var(--label); font-size:12.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gold); margin-right:8px;
}

/* ---------- 06 TERRITORY VISUAL ---------- */
.v6{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.v6-grid{ display:grid; grid-template-columns:repeat(4,42px); grid-auto-rows:42px; gap:7px; }
.v6-grid span{
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--ink-2); display:grid; place-items:center;
}
.v6-grid .mine{
  border-color:var(--gold); background:rgba(214,176,107,.1); color:var(--gold);
  box-shadow:0 0 22px rgba(214,176,107,.22);
}
.v6-grid .mine svg{ width:17px; height:17px; }
.v6-lab{ text-align:center; }
.v6-lab b{ display:block; font-size:15px; color:var(--bone); font-weight:500; }
.v6-lab span{
  display:block; margin-top:5px;
  font-family:var(--label); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold);
}

/* ---------- HOW IT WORKS ---------- */
.how-wrap{ position:relative; }
/* the connecting line draws itself in — .rv gets .on from the shared observer */
.how-line{ position:absolute; left:0; right:0; top:11px; height:1px; background:var(--line); }
.how-line i{
  display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-dp));
  transform:scaleX(0); transform-origin:left; transition:transform 1.5s var(--ease) .25s;
}
.how-line.on i{ transform:scaleX(1); }

.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,64px); }
.how-step{ position:relative; padding-top:46px; }
.how-dot{
  position:absolute; top:5px; left:0; width:13px; height:13px;
  border-radius:50%; background:var(--ink); border:1px solid var(--gold);
}
.how-dot::after{
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:var(--gold); transform:scale(0); transition:transform .5s var(--ease) .3s;
}
.how-step.on .how-dot::after{ transform:scale(1); }
.how-step .n{
  display:block; font-family:var(--label); font-size:12.5px;
  letter-spacing:.1em; color:var(--gold); margin-bottom:14px;
}
.how-step h3{ font-size:clamp(20px,2vw,27px); color:var(--bone); margin-bottom:14px; }
.how-step p{ font-size:16px; line-height:1.55; }
.how-meta{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-family:var(--label); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.how-meta::before{ content:''; width:16px; height:1px; background:var(--line-2); }

/* ---------- FAQ ---------- */
.faq-head{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:end; margin-bottom:clamp(40px,5vw,64px); }
.faq-list{ border-top:1px solid var(--line); }
.faq{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px 4px;
  font-family:var(--display); font-weight:500; font-size:clamp(16px,1.5vw,21px);
  letter-spacing:-.02em; color:var(--bone);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:''; }
.faq summary:hover{ color:var(--gold-lit); }
/* a plus that becomes a minus */
.faq summary i{ position:relative; width:13px; height:13px; flex:none; }
.faq summary i::before,
.faq summary i::after{
  content:''; position:absolute; background:var(--gold);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.faq summary i::before{ left:0; top:6px; width:13px; height:1px; }
.faq summary i::after{ left:6px; top:0; width:1px; height:13px; }
.faq[open] summary i::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ padding:0 4px 30px; max-width:74ch; animation:faqIn .45s var(--ease); }
.faq-a p{ font-size:17px; line-height:1.6; color:var(--bone-dim); max-width:none; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-8px); } }

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  .proof-head,.faq-head{ grid-template-columns:1fr; gap:26px; align-items:start; }
  .proof-nums{ grid-template-columns:repeat(2,1fr); }
  .swap-grid{ grid-template-columns:1fr; }
  .prob-cost{ grid-template-columns:1fr; gap:14px; }
  .how-grid{ grid-template-columns:1fr; gap:40px; }
  .how-line{ display:none; }
}
@media(max-width:640px){
  .proof-nums,.proof-shots{ grid-template-columns:1fr; }
  .v6-grid{ grid-template-columns:repeat(4,34px); grid-auto-rows:34px; }
  .proof-who{ align-items:flex-start; flex-direction:column; gap:18px; }
}

/* ============================================================
   BACKGROUND + INTRO PASS (2026-10-07)
   Each block below is self-contained. To undo one, delete just
   that block (and, for INTRO, restore the timings in main.js §1).
   ============================================================ */

/* [BG-1] Clear the hero subheadline: fade the shader's light streaks out in
   the band where the subtitle sits, and deepen the dark halo behind it. */
.shero-canvas{
  -webkit-mask-image:radial-gradient(ellipse 62% 16% at 50% 59%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.25) 45%, #000 100%);
          mask-image:radial-gradient(ellipse 62% 16% at 50% 59%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.25) 45%, #000 100%);
}
.shero-fade{
  background:
    radial-gradient(ellipse 60% 46% at 50% 54%, rgba(0,0,0,.66), rgba(0,0,0,.34) 55%, transparent 80%),
    linear-gradient(180deg, transparent 76%, rgba(0,0,0,.55) 90%, var(--ink) 100%);
}

/* [BG-2] Vignette on the hero only, not over every section's content. */
.vignette{ display:none; }
.shero::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* [BG-3] Film grain: static and hero-only (was a 4x-viewport animated layer
   over the whole site, redrawing on every scroll frame). */
.grain{ display:none; }
.shero::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* [INTRO] Shorter intro: whole thing done ~1s after load, no scroll lock
   (timings in main.js §1). Was: icon .9s @.2s, text .7s @.7s, settle 1s,
   fade .6s @.7s. */
.intro-logo svg{ animation:intro-icon .5s var(--ease) .05s forwards; }
.intro-logo .intro-txt{ animation:intro-fade-up .45s var(--ease) .2s forwards; }
.intro.settle .intro-logo{ animation:intro-settle .5s var(--ease-io) forwards; }
.intro.settle{ animation:intro-bg-out .3s var(--ease) .2s forwards; }

/* [BG-5] Hero fallback: when the shader can't run (no WebGL2, reduced
   motion) or before it fades in, show a soft champagne glow, not flat black. */
.shero{
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(214,176,107,.14), transparent 70%),
    radial-gradient(ellipse 120% 70% at 50% 115%, rgba(214,176,107,.10), transparent 60%),
    #000;
}
.shero-canvas{ background:transparent; }

/* [BG-6] Rhythm through the long black stretch: a faint champagne glow behind
   the Results numbers, and lighter full-bleed bands on Problem + Guarantee
   (the System and video sections above are already bands). */
#results, #problem, #guarantee{ isolation:isolate; }
#results::before, #problem::before, #guarantee::before{
  content:''; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
  z-index:-1; pointer-events:none;
}
#results::before{ background:radial-gradient(ellipse 55% 45% at 50% 42%, rgba(214,176,107,.09), transparent 70%); }
#problem::before, #guarantee::before{ background:var(--ink-1); border-block:1px solid var(--line); }