/* ============================================================================
   Something New — V8 "Signal"
   Direction ripped from metorik.com: one long saturated indigo band carrying
   the hero and the first proof, a yellow CTA against it, then white proof,
   then a near-black tail for FAQ and footer.

   Tokens below are measured off metorik.com, not eyeballed:
     band      rgb(52,88,230)   #3458E6
     accent    rgb(76,110,245)  #4C6EF5
     CTA       rgb(255,225,77)  #FFE14D  (black label)
     tail      rgb(14,16,22)    #0E1016
     paper     rgb(249,251,253) #F9FBFD
     tint      rgb(245,247,255) #F5F7FF
     body text rgb(52,64,84)    #344054
     soft-on-band rgb(215,223,254) #D7DFFE

   Type: Metorik runs PolySans (display) + Söhne (body), both commercial.
   Substituted with Satoshi and Switzer (Fontshare, free). Both track the
   originals more closely than the Google Fonts options and neither is one
   of the faces every AI-built UI converges on. Satoshi has no 800, and
   Metorik's own h1 is 700, so display weight is 700 throughout.
   ========================================================================= */

:root{
  --band:#3458E6;
  --band-deep:#2B49C4;
  --accent:#4C6EF5;
  --cta:#FFE14D;
  --tail:#0E1016;
  --paper:#F9FBFD;
  --tint:#F5F7FF;
  --ink:#111827;
  --body:#344054;
  --muted:#667085;
  --soft:#D7DFFE;
  --line:#E4E7EC;

  --r-btn:8px;
  --r-card:16px;
  --r-lg:24px;

  --shell:1180px;
  --display:"Satoshi","Switzer",system-ui,sans-serif;
  --text:"Switzer","Satoshi",system-ui,-apple-system,sans-serif;

  /* one easing everywhere; motion is transform/opacity only */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--text); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); margin:0; letter-spacing:-.02em; }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 24px; }

/* Metorik's signature: the second half of a heading set in italic.
   It carries the emphasis so the headline never has to shout. */
.em{ font-style:italic; font-weight:inherit; }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 24px; border-radius:var(--r-btn);
  font-family:var(--text); font-size:16px; font-weight:600; line-height:1;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), background-color .18s var(--ease),
             border-color .18s var(--ease), color .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }        /* tactile push, not a scale jump */
.btn-cta{ background:var(--cta); color:#12121A; }
.btn-cta:hover{ background:#FFE873; }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.38); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#1F2937; }
.btn-line{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-line:hover{ border-color:#B9C0CC; }
.btn-sm{ height:40px; padding:0 18px; font-size:15px; }
.btn-lg{ height:54px; padding:0 30px; font-size:17px; }

/* ------------------------------------------------------------------- nav */
.nav-wrap{ position:sticky; top:0; z-index:40; background:var(--band); }
.nav{
  display:flex; align-items:center; gap:32px; height:72px;
  max-width:var(--shell); margin:0 auto; padding:0 24px;
}
.brand{
  font-family:var(--display); font-weight:700; font-size:20px; color:#fff;
  letter-spacing:-.03em; display:flex; align-items:center; gap:9px;
}
.brand-mark{
  width:26px; height:26px; border-radius:7px; background:var(--cta);
  display:grid; place-items:center; flex:0 0 auto;
}
.brand-mark span{ width:9px; height:9px; border-radius:2px; background:#12121A; }
.nav-links{ display:flex; gap:26px; margin-left:8px; }
.nav-links a{
  font-size:15px; font-weight:600; color:rgba(255,255,255,.86);
  transition:color .18s var(--ease);
}
.nav-links a:hover{ color:#fff; }
.nav-cta{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.burger{
  display:none; margin-left:auto; width:44px; height:44px; border-radius:var(--r-btn);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  cursor:pointer; position:relative;
}
.burger span,.burger::before,.burger::after{
  content:""; position:absolute; left:13px; width:18px; height:2px;
  background:#fff; border-radius:2px; transition:transform .22s var(--ease), opacity .18s var(--ease);
}
.burger span{ top:21px; } .burger::before{ top:15px; } .burger::after{ top:27px; }
.burger[aria-expanded="true"] span{ opacity:0; }
.burger[aria-expanded="true"]::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"]::after{ transform:translateY(-6px) rotate(-45deg); }

.sheet{
  display:none; background:var(--band-deep); padding:8px 24px 20px;
  border-top:1px solid rgba(255,255,255,.14);
}
.sheet.open{ display:block; }
.sheet a{
  display:block; padding:13px 0; color:#fff; font-weight:600; font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

/* ------------------------------------------------------- the indigo band */
.band{ background:var(--band); color:#fff; position:relative; overflow:hidden; }
.band h1,.band h2,.band h3{ color:#fff; }
.band-inner{ position:relative; z-index:1; }
/* The radial that used to lift the top of the flat band is gone: the hero
   render now sits directly above it in the same indigo, and the highlight
   drew a visible seam along the handoff. */

.hero{ padding:76px 0 0; text-align:center; }
.hero h1{
  font-size:clamp(34px,5.4vw,58px); font-weight:700; line-height:1.08;
  letter-spacing:-.035em; max-width:16ch; margin:0 auto;
}
.hero p.sub{
  margin:22px auto 0; max-width:60ch; font-size:clamp(16px,1.6vw,19px);
  line-height:1.6; color:var(--soft);
}
.hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

.rating{
  display:flex; align-items:center; justify-content:center; gap:10px 22px;
  flex-wrap:wrap; margin-top:26px; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--soft);
}
.rating b{ color:#fff; font-weight:700; }
.stars{ color:var(--cta); letter-spacing:1px; }

/* the "product shot" — for an agency that's the work, not a dashboard */
.showcase{
  margin-top:52px; border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:#fff; padding:18px 18px 0;
  box-shadow:0 -2px 0 rgba(255,255,255,.5), 0 40px 80px -30px rgba(8,14,40,.55);
}
.showcase-head{
  display:flex; align-items:center; gap:8px; padding:4px 6px 14px;
  border-bottom:1px solid var(--line); margin-bottom:16px;
}
.dot{ width:10px; height:10px; border-radius:50%; background:#E4E7EC; }
.showcase-title{
  margin-left:8px; font-size:13px; font-weight:600; color:var(--muted);
  font-family:var(--text);
}
.reel{ display:flex; gap:10px; overflow-x:auto; padding-bottom:18px; scrollbar-width:thin; }
.reel::-webkit-scrollbar{ height:6px; }
.reel::-webkit-scrollbar-thumb{ background:#D0D5DD; border-radius:3px; }
/* fixed height, free width — creative arrives 9:16, 4:5 and 1:1 */
.reel figure{
  flex:0 0 auto; height:210px; margin:0; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--tint);
}
.reel img{ height:100%; width:auto; }

/* --------------------------------------------------------- logo/brand row */
.brands{ padding:56px 0 8px; text-align:center; }
.brands p{
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--soft); margin:0 0 22px;
}
.brand-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px;
}
.brand-chip{
  font-family:var(--display); font-weight:700; font-size:16px; color:#fff;
  padding:9px 18px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
}

/* ------------------------------------------------------------ stat strip */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-card); overflow:hidden; margin:56px 0 0;
}
.stat{ background:var(--band); padding:26px 22px; }
.stat-n{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(28px,3.4vw,40px); line-height:1; letter-spacing:-.035em; color:#fff;
}
.stat-l{ display:block; margin-top:10px; font-size:14px; line-height:1.45; color:var(--soft); }

/* --------------------------------------------------- alternating features */
/* Metorik alternates illustration / copy down the band. Zig-zag, never a
   three-across card row. */
.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:74px 0;
}
.feature + .feature{ border-top:1px solid rgba(255,255,255,.16); }
.feature.flip .feature-art{ order:2; }
.feature h2{
  font-size:clamp(26px,3.4vw,38px); font-weight:700; line-height:1.15;
  letter-spacing:-.03em; max-width:17ch;
}
.feature p{ margin:16px 0 0; color:var(--soft); font-size:17px; max-width:52ch; }
.feature-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.feature-links a{
  font-size:14px; font-weight:600; color:#fff; padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  transition:background-color .18s var(--ease), transform .18s var(--ease);
}
.feature-links a:hover{ background:rgba(255,255,255,.2); transform:translateY(-1px); }

/* pull-quote, Metorik's per-section proof device */
.pull{
  margin:26px 0 0; padding:20px 22px; border-radius:var(--r-card);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
}
.pull p{ margin:0; color:#fff; font-size:16px; font-style:italic; }
.pull cite{
  display:block; margin-top:12px; font-style:normal; font-size:14px; color:var(--soft);
}

/* the art side: a live-looking panel rather than a stock illustration */
.panel{
  background:#fff; border-radius:var(--r-card); padding:20px;
  box-shadow:0 30px 60px -28px rgba(8,14,40,.55);
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.panel-title{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink); }
.pill{
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px;
  background:var(--tint); color:var(--accent); border:1px solid #DDE3FF;
}
.rows{ display:grid; gap:1px; background:var(--line); margin-top:14px; border-radius:10px; overflow:hidden; }
.row{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  background:#fff; padding:13px 14px;
}
.row-k{ font-size:14px; font-weight:600; color:var(--ink); }
.row-v{ font-size:14px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.delta{ font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; font-variant-numeric:tabular-nums; }
.delta.up{ background:#E7F6EC; color:#12794A; }
.delta.down{ background:#FDECEC; color:#B42318; }
.delta.flat{ background:var(--tint); color:var(--accent); }

/* bar chart drawn with grid, no library */
.bars{ display:grid; grid-template-columns:repeat(7,1fr); gap:9px; align-items:end; height:120px; margin-top:16px; }
.bars i{
  display:block; background:var(--accent); border-radius:5px 5px 2px 2px;
  height:var(--h); opacity:.32; transform-origin:bottom;
}
.bars i:last-child{ opacity:1; background:var(--band); }
.bars-x{ display:grid; grid-template-columns:repeat(7,1fr); gap:9px; margin-top:9px; }
.bars-x span{ font-size:11px; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------- white section */
.white{ background:#fff; padding:88px 0; }
.tinted{ background:var(--tint); padding:88px 0; }
.sec-head{ max-width:60ch; margin-bottom:44px; }
.sec-head h2{
  font-size:clamp(28px,3.8vw,42px); font-weight:700; line-height:1.14; letter-spacing:-.03em;
}
.sec-head p{ margin:16px 0 0; font-size:18px; color:var(--body); }
.eyebrow{
  display:inline-block; margin-bottom:14px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}

/* case cards */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.case{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px; display:flex; flex-direction:column;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.case:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(16,24,40,.28); }
.case-cat{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.case h3{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
.case-stats{ margin:16px 0 18px; display:grid; gap:10px; }
.case-stat{ display:flex; align-items:baseline; gap:10px; }
.case-n{
  font-family:var(--display); font-weight:700; font-size:26px; line-height:1;
  color:var(--band); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.case-l{ font-size:13px; color:var(--muted); line-height:1.35; }
.case .reel{ margin-top:auto; padding-bottom:0; }
.case .reel figure{ height:110px; }

/* free tools */
.tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tool{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px; display:flex; flex-direction:column; gap:9px;
  transition:transform .22s var(--ease), border-color .22s var(--ease);
}
.tool:hover{ transform:translateY(-3px); border-color:#C7D0FF; }
.tool-tag{
  align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); background:var(--tint);
  border:1px solid #DDE3FF; padding:4px 10px; border-radius:999px;
}
.tool h3{ font-size:18px; font-weight:700; letter-spacing:-.015em; }
.tool p{ margin:0; font-size:15px; color:var(--body); }
.tool span.go{ margin-top:6px; font-size:14px; font-weight:600; color:var(--accent); }

/* ----------------------------------------------------------- dark tail */
.tail{ background:var(--tail); color:#98A2B3; padding:88px 0 0; }
.tail h2,.tail h3{ color:#fff; }
/* Metorik's FAQ device: question, then the answer's verdict, inline. */
.faq{ border-top:1px solid rgba(255,255,255,.1); }
.faq details{ border-bottom:1px solid rgba(255,255,255,.1); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 0; display:flex;
  align-items:baseline; gap:12px; flex-wrap:wrap;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq .q{ font-family:var(--display); font-weight:700; font-size:19px; color:#fff; letter-spacing:-.02em; }
.faq .a{ font-family:var(--display); font-weight:700; font-size:19px; color:var(--cta); letter-spacing:-.02em; }
.faq .chev{ margin-left:auto; font-size:20px; line-height:1; color:#98A2B3;
  transition:transform .22s var(--ease), color .18s var(--ease); }
.faq summary:hover .chev{ color:#fff; }
.faq details[open] .chev{ transform:rotate(180deg); }
.faq p{ margin:0 0 22px; max-width:70ch; font-size:16px; }

.closer{ text-align:center; padding:84px 0; }
.closer h2{ font-size:clamp(28px,4.2vw,46px); font-weight:700; line-height:1.12; letter-spacing:-.035em; }
.closer p{ margin:16px auto 0; max-width:52ch; font-size:18px; }
.closer .hero-ctas{ margin-top:28px; }

.foot{ border-top:1px solid rgba(255,255,255,.1); padding:52px 0 40px; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; }
.foot h4{
  font-family:var(--text); font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#667085; margin:0 0 14px;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot a{ font-size:15px; color:#98A2B3; transition:color .18s var(--ease); }
.foot a:hover{ color:#fff; }
.foot-bot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  font-size:14px; color:#667085;
}

/* ------------------------------------------------------------- reveal */
[data-reveal]{ opacity:0; transform:translateY(14px); }
[data-reveal].in{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width:960px){
  .nav-links,.nav-cta{ display:none; }
  .burger{ display:block; }
  .feature{ grid-template-columns:1fr; gap:34px; padding:56px 0; }
  .feature.flip .feature-art{ order:0; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .cases,.tools{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .shell{ padding:0 18px; }
  .hero{ padding:52px 0 0; }
  .stats{ grid-template-columns:1fr; }
  .cases,.tools{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-ctas .btn{ width:100%; }
  .showcase{ padding:12px 12px 0; }
  .reel figure{ height:170px; }
}

/* The sixth cell in the services grid is a CTA, not a service. Same shell as
   .tool so the grid reads evenly, tinted so it is clearly not a sixth offer. */
.tool-cta{ background:var(--tint); border-color:#DDE3FF; }
.tool-cta:hover{ border-color:#AFBCFF; }
.tool-cta h3{ color:var(--band); }

/* ============================================================================
   V8.1 — OUR BRAND FURNITURE MERGED IN
   Three things carried over from V6/V7 rather than rebuilt:
     1. the liquid-glass primitive (Bodi glass, approved, verbatim)
     2. the floating glass nav
     3. the hero waves render (hero-shader.js), ramp inverted for this palette
   Plus our navy #0F172A replacing Metorik's neutral near-black tail, and an
   isometric floating metric cluster in the spirit of their data illustration.
   ========================================================================= */

:root{
  --navy:#0F172A;        /* our dark blue */
  --royal:#1E40AF;       /* our royal     */
  --shell-nav:1180px;
}

/* -------------------------------------------------- 1. GLASS PRIMITIVE ----
   Carried over unchanged from site.css. The light variant is the approved
   hero glass; --dark adds the masked gradient border, bright at top and
   bottom and transparent through the middle, for use on dark grounds. */
.glass{
  position:relative;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.8);
}
.glass-dark{
  position:relative;
  background:rgba(255,255,255,.05);
  background-blend-mode:luminosity;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.4);
}
.glass-dark::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.65) 0%,
    rgba(255,255,255,.06) 32%,
    rgba(255,255,255,.06) 68%,
    rgba(255,255,255,.42) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:rgba(255,255,255,.86); }
  .glass-dark{ background:rgba(255,255,255,.09); }
}

/* ------------------------------------------------------------- 2. NAV ----
   The V7 floating glass bar. It opens over the dark top of the hero render,
   so it starts in the .over-dark material and swaps to white glass once the
   page scrolls past. White glass at .55 over a dark ground reads as a grey
   slab, not glass — which is why the swap exists. */
.nav-wrap{ position:static; background:none; }   /* supersede the V8 sticky bar */
.navbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:20px 20px 0; pointer-events:none;
}
.navbar .nav{
  pointer-events:auto; position:relative;
  max-width:var(--shell-nav); margin:0 auto; padding:14px 22px; height:auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.8);
  transition:background .5s var(--ease), box-shadow .5s var(--ease),
             border-color .5s var(--ease), transform .5s var(--ease);
}
.navbar.is-stuck .nav{
  background:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 14px 34px rgba(10,15,30,.13), inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-6px);
}
/* cursor sheen inside the glass */
.navbar .nav::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(36,83,255,.10), transparent 70%);
  opacity:0; transition:opacity .45s var(--ease);
}
.navbar .nav:hover::after{ opacity:1; }

.logo{
  font-family:var(--display); font-weight:700; font-size:16.5px;
  letter-spacing:-.01em; color:var(--ink); position:relative; z-index:2;
}
.logo .dot{ color:var(--royal); }
.navlinks{ position:relative; display:flex; align-items:center; gap:2px; z-index:2; }

/* the lamp: fixed width, only ever translated */
.limelight{
  position:absolute; left:0; bottom:-9px; width:34px; height:2px;
  border-radius:2px; background:var(--accent);
  transform:translateX(var(--lx,0)) translateZ(0);
  opacity:0;
  transition:transform .55s var(--ease), opacity .35s var(--ease);
  pointer-events:none;
}
.limelight::before{
  content:""; position:absolute; left:50%; bottom:0;
  width:118px; height:44px; transform:translateX(-50%);
  background:radial-gradient(ellipse at bottom, rgba(36,83,255,.28), transparent 72%);
  pointer-events:none;
}
.navlinks.is-lit .limelight{ opacity:1; }

.navlink{
  position:relative; z-index:1; padding:9px 14px; border-radius:999px;
  font-size:13.5px; font-weight:500; color:var(--muted);
  transition:color .4s var(--ease);
}
.navlink:hover,.navlink.is-current{ color:var(--ink); }
.navlink::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0; transition:opacity .4s var(--ease);
}
.navlink:hover::before{ opacity:1; }

.roll{ display:block; position:relative; overflow:hidden; }
.roll span{ display:block; transition:transform .5s var(--ease); }
.roll .b{ position:absolute; inset:0; transform:translateY(105%); }
.navlink:hover .roll .a{ transform:translateY(-105%); }
.navlink:hover .roll .b{ transform:translateY(0); }
.nav-cta{ position:relative; z-index:2; margin-left:0; }

/* nav over the dark head of the hero render */
.navbar.over-dark .nav{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 20px 50px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14);
}
.navbar.over-dark .logo{ color:#fff; }
.navbar.over-dark .logo .dot{ color:var(--cta); }
.navbar.over-dark .navlink{ color:#A9B6D4; }
.navbar.over-dark .navlink:hover,
.navbar.over-dark .navlink.is-current{ color:#fff; }
.navbar.over-dark .navlink::before{ background:rgba(255,255,255,.10); box-shadow:none; }
.navbar.over-dark .nav::after{
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(143,176,255,.16), transparent 70%);
}
.navbar.over-dark .limelight{ background:var(--cta); }
.navbar.over-dark .limelight::before{
  background:radial-gradient(ellipse at bottom, rgba(255,225,77,.3), transparent 72%);
}

/* burger + full-screen sheet, V7 behaviour */
.navbar .burger{
  display:none; position:relative; z-index:2; width:40px; height:40px;
  border-radius:12px; background:none; border:none;
  align-items:center; justify-content:center;
}
.navbar .burger span{
  display:block; width:18px; height:1.5px; background:var(--ink); position:relative;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
  top:auto; left:auto; border-radius:0;
}
.navbar .burger span::before,.navbar .burger span::after{
  content:""; position:absolute; left:0; top:auto; width:18px; height:1.5px;
  background:var(--ink); transition:transform .45s var(--ease); border-radius:0;
}
.navbar .burger span::before{ transform:translateY(-6px); }
.navbar .burger span::after{ transform:translateY(6px); }
.is-open .burger span{ transform:rotate(45deg); }
.is-open .burger span::before{ transform:translateY(0) rotate(-90deg); }
.is-open .burger span::after{ transform:translateY(0); opacity:0; }
.navbar.over-dark .burger span,
.navbar.over-dark .burger span::before,
.navbar.over-dark .burger span::after{ background:#fff; }

.sheet{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:rgba(240,245,255,.72);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  opacity:0; transition:opacity .5s var(--ease);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 34px; border:none;
}
.sheet.open{ display:flex; }
.is-open .sheet{ opacity:1; pointer-events:auto; }
.sheet a{
  font-family:var(--display);
  font-size:32px; font-weight:700; letter-spacing:-.03em; padding:10px 0;
  color:var(--ink); border-bottom:none;
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:calc(var(--i) * 60ms);
}
.is-open .sheet a{ opacity:1; transform:none; }

/* --------------------------------------------- 3. HERO RENDER (shader) ----
   .world.w1 is the host hero-shader.js looks for. The CSS gradient below is
   the no-WebGL fallback and matches the shader's ramp, so a machine without
   WebGL still gets navy at the top easing into the band indigo. */
.world{ position:relative; overflow:hidden; }
.world.w1{
  background:linear-gradient(180deg,#0F172A 0%, #16224F 26%, #1E40AF 56%, #2B49C4 78%, #3458E6 100%);
}
.w1-shader{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.w1-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.w1-blobs .blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.w1-blobs .b1{ width:560px; height:560px; left:-140px; top:-160px; background:radial-gradient(circle,#1E40AF,transparent 70%); animation:w1drift1 46s ease-in-out infinite alternate; }
.w1-blobs .b2{ width:620px; height:620px; right:-180px; top:20px;   background:radial-gradient(circle,#3458E6,transparent 70%); animation:w1drift2 58s ease-in-out infinite alternate; }
.w1-blobs .b3{ width:480px; height:480px; left:28%;    bottom:-240px; background:radial-gradient(circle,#4C6EF5,transparent 70%); animation:w1drift3 40s ease-in-out infinite alternate; }
@keyframes w1drift1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(60px,40px) scale(1.15); } }
@keyframes w1drift2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-50px,60px) scale(1.1); } }
@keyframes w1drift3{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(40px,-30px) scale(1.2); } }
.w1.has-shader .w1-blobs{ display:none; }
/* the hero sits on the render; the band picks up flat indigo underneath it */
.world.w1 .hero,.world.w1 .shell{ position:relative; z-index:1; }
.hero{ padding-top:150px; }

/* glass on the band, now that we have the primitive */
.stats{ background:none; border:none; border-radius:20px; overflow:visible; gap:0; }
.stat{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.16); border-right-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.stat:first-child{ border-radius:20px 0 0 20px; }
.stat:last-child{ border-radius:0 20px 20px 0; border-right-width:1px; }
.pull{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.brand-chip{
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}

/* ------------------------------------- 4. ISOMETRIC FLOATING METRICS ------
   Cards laid on one tilted plane, each lifted a different distance toward
   the viewer, mixing solid white with our dark glass. Depth comes from the
   z-offset, the shadow scaling with it, and one card thrown out of focus.
   Only transform and opacity animate. */
/* The stage is scaled rather than clipped: the cards must stay inside their
   own grid column without any of them being cut, since a clipped card reads
   as a rendering fault rather than as depth. */
.iso{ position:relative; height:430px; perspective:1500px; }
.iso-stage{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:translateX(-42px) rotateX(52deg) rotateZ(-40deg) scale(.76);
}
.iso-card{
  position:absolute; left:50%; top:50%;
  display:flex; align-items:baseline; gap:10px; white-space:nowrap;
  padding:14px 20px; border-radius:14px;
  transform:translate3d(var(--x,0), var(--y,0), var(--z,0));
  animation:isoFloat var(--dur,9s) ease-in-out var(--delay,0s) infinite alternate;
  will-change:transform;
}
@keyframes isoFloat{ from{ transform:translate3d(var(--x,0), var(--y,0), var(--z,0)); }
                     to  { transform:translate3d(var(--x,0), calc(var(--y,0) - 14px), calc(var(--z,0) + 18px)); } }
.iso-card.solid{
  background:#fff; color:var(--ink);
  box-shadow:0 34px 50px -22px rgba(6,14,50,.6);
}
.iso-card.frost{
  background:rgba(255,255,255,.09); color:#fff;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 34px 50px -24px rgba(6,14,50,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.iso-n{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.iso-l{ font-size:14px; font-weight:500; opacity:.72; }
.iso-d{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.iso-d.up{ color:#16A34A; } .iso-d.dn{ color:#DC2626; }
.iso-card.frost .iso-d.up{ color:#4ADE80; } .iso-card.frost .iso-d.dn{ color:#FCA5A5; }
/* the far card sits out of focus, the way a real depth-of-field would take it */
.iso-card.blur{ filter:blur(7px); opacity:.75; }
@media (prefers-reduced-motion:reduce){ .iso-card{ animation:none; } }

@media (max-width:960px){
  .iso{ height:340px; }
  .iso-stage{ transform:rotateX(48deg) rotateZ(-36deg) scale(.72); }
  .navbar .burger{ display:flex; }
  .navbar .navlinks,.navbar .nav-cta{ display:none; }
}
@media (max-width:640px){
  .iso{ height:280px; }
  .iso-stage{ transform:rotateX(46deg) rotateZ(-34deg) scale(.54); }
  .hero{ padding-top:118px; }
  .stat{ border-right-width:1px; border-radius:20px !important; margin-bottom:10px; }
}

/* --------------------------------------------- 5. OUR NAVY IN THE TAIL ---- */
.tail{ background:var(--navy); }
.closer .btn-ghost{ border-color:rgba(255,255,255,.32); }

/* ============================================================================
   V8.2 — V6 HERO RENDER RESTORED, PLUS THE NEW SECTIONS
   The shader is back to the V6 file untouched: paper at the top ramping
   through sky and royal to navy at the base. That inverts what the hero
   needs — white type would sit on near-white paper — so the hero returns to
   dark ink on light, the way V6 had it, and the band picks up from navy.
   ========================================================================= */

/* ------------------------------------------- hero, back on a light ground */
.world.w1{
  background:linear-gradient(160deg,#EAF0FC 0%, #F7FAFF 48%, #ECF2FD 100%);
}
.w1-blobs .b1{ background:radial-gradient(circle,#9CC0FF,transparent 70%); }
.w1-blobs .b2{ background:radial-gradient(circle,#5B7EFF,transparent 70%); }
.w1-blobs .b3{ background:radial-gradient(circle,#C9DBFF,transparent 70%); }

.world.w1 .hero h1{ color:#0A0F1E; }
.world.w1 .hero .sub{ color:#41506B; }
.world.w1 .rating{ color:#41506B; }
.world.w1 .rating b{ color:#0A0F1E; }
/* the base of the render is navy, so anything sitting low goes back to light */
.world.w1 .hero{ padding-bottom:96px; }

/* yellow has nothing to push against on near-white paper; the primary here
   is our royal, and yellow stays for CTAs that sit on dark. */
.world.w1 .btn-cta{
  background:var(--royal); color:#fff;
  box-shadow:0 4px 20px rgba(30,64,175,.25);
}
.world.w1 .btn-cta:hover{ background:#1B39A0; }
.world.w1 .btn-ghost{
  background:rgba(255,255,255,.55); color:#0A0F1E;
  border-color:rgba(10,15,30,.14);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}
.world.w1 .btn-ghost:hover{ background:rgba(255,255,255,.8); border-color:rgba(10,15,30,.24); }

/* the render ends in navy; carry that into the band rather than cutting
   straight to indigo, which would draw a hard line across the handoff. */
.band{ background:linear-gradient(180deg,#0F172A 0, #1E40AF 190px, var(--band) 430px); }

/* ------------------------------------------------ float + depth treatment
   The same idea as the isometric cluster, applied more quietly: the panel
   tilts a few degrees and small cards lift off it at different depths. */
.float-art{ position:relative; perspective:1400px; }
.float-art .panel{
  transform:rotateX(6deg) rotateY(-7deg) rotateZ(1.2deg);
  transform-style:preserve-3d;
  box-shadow:0 50px 80px -34px rgba(6,14,50,.66);
}
.chip-float{
  position:absolute; display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; white-space:nowrap;
  font-size:13px; font-weight:600;
  animation:chipFloat var(--dur,8s) ease-in-out var(--delay,0s) infinite alternate;
  will-change:transform;
}
@keyframes chipFloat{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-13px,0); } }
.chip-float.solid{ background:#fff; color:var(--ink); box-shadow:0 26px 40px -18px rgba(6,14,50,.55); }
.chip-float.frost{
  background:rgba(255,255,255,.12); color:#fff;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 26px 40px -20px rgba(6,14,50,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.chip-n{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.chip-float .up{ color:#16A34A; } .chip-float.frost .up{ color:#4ADE80; }

/* floating ad thumbnails, for the creative pipeline panel */
.shot-float{
  position:absolute; border-radius:12px; overflow:hidden;
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 34px 52px -20px rgba(6,14,50,.6);
  animation:chipFloat var(--dur,9s) ease-in-out var(--delay,0s) infinite alternate;
  will-change:transform;
}
.shot-float img{ height:var(--h,120px); width:auto; }
@media (prefers-reduced-motion:reduce){ .chip-float,.shot-float{ animation:none; } }

/* ------------------------------------------------------------- AD WALL ---
   Full-bleed tilted rows of real creative. Each row translates on scroll in
   the opposite direction to the one above it. Driven by a CSS variable the
   script sets from a single rAF-throttled scroll read, so the only thing
   that ever animates is a transform. */
.adwall{
  position:relative; overflow:hidden; background:var(--navy);
  padding:110px 0; isolation:isolate;
}
.adwall-head{ text-align:center; max-width:640px; margin:0 auto 104px; padding:0 24px; position:relative; z-index:3; }
.adwall-head h2{ color:#fff; font-size:clamp(28px,3.8vw,42px); font-weight:700; letter-spacing:-.03em; }
.adwall-head p{ margin:14px 0 0; color:#94A3C4; font-size:17px; }
.adwall-stage{
  display:grid; gap:16px;
  transform:rotate(-4deg) scale(1.16);   /* the tilt the rows sit on */
  transform-origin:center;
}
.adwall-row{
  display:flex; gap:16px; width:max-content;
  transform:translate3d(var(--shift,0px),0,0);
  will-change:transform;
}
.adwall-row figure{
  flex:0 0 auto; height:180px; margin:0; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 40px -20px rgba(0,0,0,.6);
}
.adwall-row img{ height:100%; width:auto; display:block; }
/* the rows bleed off both edges; fade them out rather than cutting hard */
.adwall::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(90deg, var(--navy) 0, transparent 13%, transparent 87%, var(--navy) 100%);
}
@media (max-width:640px){
  .adwall{ padding:76px 0; }
  .adwall-row figure{ height:118px; }
  .adwall-stage{ transform:rotate(-4deg) scale(1.3); }
}

/* ------------------------------------------------- TOOL CARDS (tinted) ---
   Metorik's integration cards: a tall card per item, each on its own tint,
   name and blurb at the top and a live-looking preview cropped off the
   bottom edge so the card reads as a window rather than a tile. */
.toolcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.toolcard{
  position:relative; overflow:hidden; border-radius:20px;
  min-height:430px; padding:28px 26px 0;
  display:flex; flex-direction:column;
  background:var(--tone,#EEF2FF);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.toolcard:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -28px rgba(16,24,40,.4); }
.toolcard-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.toolcard h3{
  font-size:23px; font-weight:700; letter-spacing:-.025em; color:var(--tone-ink,#0A0F1E);
}
.toolcard-tag{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.6); color:var(--tone-ink,#0A0F1E);
}
.toolcard p{
  margin:12px 0 0; font-size:15.5px; line-height:1.55;
  color:var(--tone-ink,#0A0F1E); opacity:.78; max-width:34ch;
}
.toolcard-go{
  margin-top:14px; font-size:14px; font-weight:700; color:var(--tone-ink,#0A0F1E);
}
/* the preview pane, cropped by the card's own bottom edge */
.toolcard-pane{
  margin-top:auto; margin-bottom:-1px; border-radius:14px 14px 0 0;
  background:#fff; border:1px solid rgba(10,15,30,.08); border-bottom:none;
  box-shadow:0 -1px 0 rgba(255,255,255,.7), 0 26px 44px -26px rgba(6,14,50,.42);
  padding:16px 16px 22px; transform:translateY(22px);
  transition:transform .3s var(--ease);
}
.toolcard:hover .toolcard-pane{ transform:translateY(14px); }
/* Screenshot variant. The pane frames the real tool instead of a mocked-up
   readout, so the thin white inset reads as window chrome and the card's own
   bottom edge does the cropping. */
.toolcard-pane.shot{ padding:8px 8px 0; }
.pane-shot{ display:block; width:100%; border-radius:9px 9px 0 0; }
.pane-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid #EEF1F6; font-size:13px;
}
.pane-row:last-child{ border-bottom:none; }
.pane-k{ color:#5A6478; font-weight:500; }
.pane-v{ color:#0A0F1E; font-weight:700; font-variant-numeric:tabular-nums; }
.pane-bar{ height:8px; border-radius:99px; background:#EEF1F6; overflow:hidden; margin-top:5px; }
.pane-bar i{ display:block; height:100%; border-radius:99px; background:var(--tone-accent,#1E40AF); width:var(--w,60%); }
.pane-title{
  font-family:var(--display); font-weight:700; font-size:14px; color:#0A0F1E;
  margin-bottom:10px;
}
.pane-curve{ display:grid; grid-template-columns:repeat(8,1fr); gap:5px; align-items:end; height:74px; margin-top:10px; }
.pane-curve i{ display:block; border-radius:4px 4px 2px 2px; background:var(--tone-accent,#1E40AF); height:var(--h); opacity:.28; }
.pane-curve i.on{ opacity:1; }
@media (max-width:960px){ .toolcards{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .toolcards{ grid-template-columns:1fr; } .toolcard{ min-height:390px; } }

/* Glass pill. Built for the hero rating strip, which has since gone because
   the stats band below carries the same figures — kept as a utility because
   the material is worth reusing: it reads on a light or a dark ground
   without needing to know which is behind it. */
.glass-pill, .world.w1 .rating{
  display:inline-flex; margin-left:auto; margin-right:auto;
  padding:12px 22px; border-radius:999px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 20px 50px rgba(10,15,30,.14), inset 0 1px 0 rgba(255,255,255,.8);
}
.world.w1 .hero:not(.hero-split){ display:flex; flex-direction:column; align-items:center; }
.glass-pill{ display:inline-flex; align-items:center; gap:10px 22px; flex-wrap:wrap; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-pill, .world.w1 .rating{ background:rgba(255,255,255,.88); }
}

/* ------------------------------------------------ showcase reel, running ---
   The reel no longer waits to be dragged: it runs left to right on its own.
   The track holds the ads twice, and the loop translates exactly half its
   width, so the seam lands on an identical frame and never shows. Scoped to
   .reel-auto so the case-card strips keep their manual scroll. */
.reel-auto{
  overflow:hidden; padding-bottom:18px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.reel-track{
  display:flex; gap:10px; width:max-content;
  animation:reelRight 78s linear infinite;
  will-change:transform;
}
/* Moves the content rightward. The offset is -50% minus half a gap, not a
   flat -50%: the track is [half][gap][half], so half its width lands half a
   gap short of where the second copy has to start, and the loop visibly
   jumps every cycle. Half of the 10px gap is 5px. Holds for variable image
   widths, since both halves are identical. */
@keyframes reelRight{
  from{ transform:translate3d(calc(-50% - 5px),0,0); }
  to  { transform:translate3d(0,0,0); }
}
.reel-auto:hover .reel-track{ animation-play-state:paused; }
.reel-track figure{
  flex:0 0 auto; height:210px; margin:0; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--tint);
}
.reel-track img{ height:100%; width:auto; }
@media (prefers-reduced-motion:reduce){
  .reel-track{ animation:none; transform:none; }
  .reel-auto{ overflow-x:auto; }
}
@media (max-width:640px){ .reel-track figure{ height:170px; } }

/* ------------------------------------------------- fading the hero render ---
   The shader ended in a hard horizontal cut: grainy wave field above, flat
   gradient below. The canvas now fades out over its bottom quarter, and the
   host's own background carries the same ramp underneath, so what the fade
   reveals is the identical colour the band opens on. Render dissolves into
   flat instead of stopping dead. */
.world.w1{
  background:linear-gradient(180deg,
    #EAF0FC 0%, #F5F9FF 26%, #6E9BF7 54%, #3B82F6 66%,
    #1E40AF 82%, #16224F 92%, #0F172A 100%);
}
.w1-shader{
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
}
/* the band opens on the same navy the render fades into */
.band{ background:linear-gradient(180deg,#0F172A 0, #16224F 120px, #1E40AF 300px, var(--band) 560px); }

/* ------------------------------------------------------ IDEAL PARTNER ----
   The V7 bento, retold in the reference's card language: one even grid on a
   tint, 16px radii, a small visual per card, and two emphasis cards rather
   than a bento's varied tile sizes. */
.fit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.fit-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:26px 24px; display:flex; flex-direction:column;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.fit-card:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -24px rgba(16,24,40,.3); }
.fit-vis{ height:96px; display:flex; align-items:center; margin-bottom:20px; }
.fit-card h3{ font-size:18px; font-weight:700; letter-spacing:-.02em; }
.fit-card p{ margin:9px 0 0; font-size:15px; color:var(--body); }

/* the qualifying figure, ringed the way it was in V7 */
.fit-ring{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.03em;
  color:var(--ink); padding:14px 26px; border:2.5px solid var(--royal);
  border-radius:50%/50%;
}
.fit-bars{ display:flex; align-items:flex-end; gap:7px; height:82px; }
.fit-bars i{ display:block; width:17px; border-radius:4px 4px 2px 2px; background:var(--accent); height:var(--h); opacity:var(--o,1); }
.fit-chart{
  width:100%; max-width:230px; border:1px solid var(--line); border-radius:10px;
  padding:9px 10px; background:#fff;
}
.fit-chart span{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}

.fit-card--accent{ background:var(--cta); border-color:#F5D33F; }
.fit-card--accent .fit-eyebrow{ color:#6B5A11; }
.fit-card--accent h3,.fit-card--accent .fit-big{ color:#12121A; }
.fit-card--accent p{ color:#3D3512; }
.fit-card--dark{ background:var(--navy); border-color:#1D2842; }
.fit-card--dark .fit-eyebrow{ color:#8FA0C4; }
.fit-card--dark h3,.fit-card--dark .fit-big{ color:#fff; }
.fit-card--dark p{ color:#A9B6D4; }
.fit-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.fit-big{
  font-family:var(--display); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(28px,3vw,38px); line-height:1.05;
}
.fit-sub{ margin-top:6px; font-size:16px; font-weight:700; }

.fit-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:18px; }
.fit-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:var(--ink);
  padding:7px 13px; border-radius:999px; background:var(--tint); border:1px solid #DDE3FF;
}
.fit-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--royal); }

/* the disqualifier, kept plain on purpose — it is the one line that has to
   read as a straight statement rather than a sales card */
.fit-note{
  margin-top:22px; padding:20px 24px; border-radius:var(--r-card);
  background:#fff; border:1px solid var(--line);
  font-size:16px; color:var(--body);
}
.fit-note b{ color:var(--ink); }
@media (max-width:960px){ .fit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .fit-grid{ grid-template-columns:1fr; } }

/* ----------------------------------------------- SERVICES, WITH THE PROOF
   The V7 accordion brought across: click a service and it opens to its
   capabilities while the panel beside it swaps to that service's real
   screenshots. Height animates on grid-template-rows 0fr -> 1fr, never
   max-height, so the row eases to its true height instead of racing to an
   arbitrary ceiling and stuttering. */
.svc-wrap{ display:grid; grid-template-columns:1fr 1.06fr; gap:56px; align-items:start; }
.svc-list{ border-top:1px solid var(--line); }
.svc-row{ border-bottom:1px solid var(--line); }
.svc-btn{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:18px;
  align-items:start; padding:24px 4px; background:none; border:0;
  cursor:pointer; text-align:left; font-family:inherit;
}
.svc-num{
  font-family:var(--display); font-weight:700; font-size:12.5px;
  letter-spacing:.08em; color:var(--accent); padding-top:7px;
}
.svc-name{
  display:block; font-family:var(--display); font-weight:700; font-size:22px;
  letter-spacing:-.025em; color:var(--ink); transition:color .3s var(--ease);
}
.svc-row.is-open .svc-name{ color:var(--royal); }
.svc-desc{ display:block; margin-top:5px; font-size:15px; color:var(--body); }
/* the sign is drawn, not typed, so it can rotate cleanly */
.svc-sign{ position:relative; width:18px; height:18px; margin-top:8px; flex:0 0 auto; }
.svc-sign::before,.svc-sign::after{
  content:""; position:absolute; left:0; top:8px; width:18px; height:1.6px;
  background:var(--ink); border-radius:2px;
  transition:transform .38s var(--ease), opacity .28s var(--ease);
}
.svc-sign::after{ transform:rotate(90deg); }
.svc-row.is-open .svc-sign::before{ background:var(--royal); }
.svc-row.is-open .svc-sign::after{ transform:rotate(90deg) scaleX(0); opacity:0; }

.svc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.svc-row.is-open .svc-panel{ grid-template-rows:1fr; }
.svc-panel-in{ overflow:hidden; }
.svc-panel-in > div{ padding:0 4px 26px 52px; }
.svc-panel p{ margin:0 0 16px; font-size:15.5px; color:var(--body); max-width:46ch; }
.svc-caps{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.svc-caps li{
  font-size:13px; font-weight:600; color:var(--royal);
  background:var(--tint); border:1px solid #DDE3FF;
  padding:7px 13px; border-radius:999px;
}

/* the proof panel — our glass, since it sits on a light ground */
.svc-media{
  position:sticky; top:108px; border-radius:20px; padding:16px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 30px 60px -30px rgba(10,15,30,.32), inset 0 1px 0 rgba(255,255,255,.9);
}
.svc-media-label{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:4px 6px 12px;
}
.svc-shot{ display:none; gap:10px; }
.svc-shot.is-on{ display:grid; animation:shotIn .45s var(--ease); }
@keyframes shotIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.svc-shot img{
  width:100%; height:100%; object-fit:cover; border-radius:10px;
  border:1px solid rgba(10,15,30,.1); background:var(--tint); display:block;
}
/* one layout per shot count, so a two-image service does not sit in a hole */
.svc-shot[data-n="2"]{ grid-template-columns:1fr 1fr; }
.svc-shot[data-n="3"]{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
.svc-shot[data-n="3"] img:first-child{ grid-column:1 / -1; }
.svc-shot[data-n="4"]{ grid-template-columns:1fr 1fr; }
@media (prefers-reduced-motion:reduce){
  .svc-panel{ transition:none; }
  .svc-shot.is-on{ animation:none; }
}
@media (max-width:960px){
  .svc-wrap{ grid-template-columns:1fr; gap:34px; }
  .svc-media{ position:static; order:-1; }
  .svc-panel-in > div{ padding-left:0; }
}

/* --------------------------------------------------- EYEBROW CHIPS -------
   Metorik's pre-header chips (see /analytics-reports/sales-goals-and-targets),
   rebuilt in our glass: icon first, then the label, in a pill that reads on
   light or dark without caring what is behind it. */
.chip-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px 9px 12px; border-radius:999px; margin-bottom:16px;
  font-family:var(--display); font-size:13.5px; font-weight:700;
  letter-spacing:.01em; color:var(--royal);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 28px rgba(10,15,30,.1), inset 0 1px 0 rgba(255,255,255,.85);
}
.chip-eyebrow svg{ width:15px; height:15px; flex:0 0 auto; stroke:currentColor; }
/* on dark grounds the same chip swaps to the dark glass variant */
.tail .chip-eyebrow, .adwall .chip-eyebrow, .band .chip-eyebrow{
  color:#CBD9FF;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 10px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .chip-eyebrow{ background:rgba(255,255,255,.88); }
  .tail .chip-eyebrow, .adwall .chip-eyebrow, .band .chip-eyebrow{ background:rgba(30,40,70,.9); }
}

/* sub-lines on the emphasis cards were inheriting the body colour */
.fit-card--dark .fit-sub{ color:#D7DFFE; }
.fit-card--accent .fit-sub{ color:#12121A; }

/* ------------------------------------------------- SMALL PILLS IN GLASS --
   The little pills — service capabilities, partner tags, tool-card tags and
   the panel pills — move from flat tint fills onto the same glass material
   as the eyebrow chips, at a lighter weight (less blur, softer shadow) so a
   row of them doesn't out-shine the card it sits on. */
.svc-caps li,
.fit-tag,
.toolcard-tag,
.pill{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 6px 18px rgba(10,15,30,.08), inset 0 1px 0 rgba(255,255,255,.85);
}
.svc-caps li{ color:var(--royal); }
.pill{ color:var(--royal); }
/* the feature-link pills on the indigo band pick up the dark glass weight */
.feature-links a{
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .svc-caps li,.fit-tag,.toolcard-tag,.pill{ background:rgba(255,255,255,.85); }
}

/* --------------------------------------------------- HERO REEL ----------
   The showcase lost its browser chrome: the ads now run full-bleed under
   the hero CTAs, each in its own soft glass frame rather than a grey tile,
   sitting directly on the render as it turns from sky to royal. */
.hero-reel{
  margin-top:54px; padding:6px 0 64px; position:relative; z-index:1;
}
.hero-reel .reel-track figure{
  height:224px; border-radius:16px; border:0; overflow:visible;
  padding:9px; background:rgba(255,255,255,.42);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 18px 44px -18px rgba(10,15,30,.35), inset 0 1px 0 rgba(255,255,255,.75);
}
.hero-reel .reel-track img{ height:100%; width:auto; border-radius:10px; display:block; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-reel .reel-track figure{ background:rgba(255,255,255,.8); }
}
/* the hero's own bottom padding did the spacing the showcase used to */
.world.w1 .hero{ padding-bottom:0; }
@media (max-width:640px){ .hero-reel .reel-track figure{ height:172px; padding:7px; } }

/* -------------------------------------------- SERVICES v3: cards + proof
   The card grid is back as the selector row: five cards in the earlier
   style, one always open. The chosen card's proof sits underneath — copy
   and capability pills on the left, the glass screenshot panel right. */
.svc-cards{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:26px; }
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px 16px; text-align:left; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; gap:7px;
  transition:transform .24s var(--ease), border-color .24s var(--ease),
             box-shadow .24s var(--ease), background-color .24s var(--ease);
}
.svc-card:hover{ transform:translateY(-3px); border-color:#C7D0FF; }
.svc-card.is-open{
  background:var(--tint); border-color:var(--royal);
  box-shadow:0 14px 30px -18px rgba(30,64,175,.45);
}
.svc-card .svc-num{ padding-top:0; }
.svc-card-name{
  font-family:var(--display); font-weight:700; font-size:16.5px;
  letter-spacing:-.02em; color:var(--ink);
}
.svc-card.is-open .svc-card-name{ color:var(--royal); }
.svc-card-desc{ font-size:13px; line-height:1.45; color:var(--body); }

.svc-proof{ display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:start; }
.svc-copy{ padding-top:8px; }
.svc-info{ display:none; }
.svc-info.is-on{ display:block; animation:shotIn .45s var(--ease); }
.svc-info p{ margin:0 0 18px; font-size:16.5px; line-height:1.6; color:var(--body); max-width:46ch; }
@media (max-width:960px){
  .svc-cards{ grid-template-columns:1fr 1fr; }
  .svc-proof{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:640px){ .svc-cards{ grid-template-columns:1fr; } }

/* ------------------------------------------------------- PAIN, ON BAND --
   The problem named in full sentences: big headline and the CTA on the
   left, the story on the right. Same split Metorik uses for its feature
   rows, carrying copy instead of a panel. */
.pain{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start;
  padding-top:90px; padding-bottom:16px;
}
.pain-left h2{
  font-size:clamp(30px,3.8vw,44px); font-weight:700; line-height:1.12;
  letter-spacing:-.03em; max-width:15ch; margin-bottom:30px;
}
.pain-right p{ margin:0 0 20px; font-size:17px; line-height:1.65; color:var(--soft); }
.pain-right p:first-child{ color:#fff; }
.pain-truth{ color:var(--cta); font-weight:700; }
@media (max-width:960px){
  .pain{ grid-template-columns:1fr; gap:30px; padding-top:64px; }
}

/* pain symptom list — StoryBrand's recognition bullets, in our language */
.pain-open{ color:#fff; }
.pain-list{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px; }
.pain-list li{
  position:relative; padding-left:30px; font-size:17px; line-height:1.5; color:var(--soft);
}
.pain-list li::before{
  content:""; position:absolute; left:0; top:5px; width:17px; height:17px;
  border-radius:50%; background:var(--cta);
}
.pain-list li::after{
  content:""; position:absolute; left:4.5px; top:9px; width:8px; height:5px;
  border-left:2px solid #12121A; border-bottom:2px solid #12121A;
  transform:rotate(-45deg);
}

/* pain, promoted: its own navy panel on the band so the section breaks the
   indigo run, with the weak-spot chart from the scorecard ads inside it.
   One bar sits low and carries the tag; that bar and the tag are the only
   yellow in the panel besides the CTA, so the eye lands on the bottleneck. */
.pain{ display:block; padding-top:80px; padding-bottom:36px; }
.pain-card{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start;
  background:var(--navy); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg); padding:56px 54px 50px;
  box-shadow:0 44px 90px -40px rgba(4,8,24,.8);
}
.pain-left h2{ margin-bottom:34px; }
.pain-left .btn{ margin-top:34px; }

.pain-bars{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
  align-items:end; max-width:400px; height:190px;
}
/* everything stacks from the bottom, so the number and the tag hug each
   bar's top at its own height, the way the reference ad staggers them */
.pain-bar{ display:flex; flex-direction:column; justify-content:flex-end; height:100%; text-align:center; }
.pain-bar i{
  display:block; width:100%; height:var(--h); border-radius:8px 8px 3px 3px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
}
.pain-bar.is-weak i{ background:var(--cta); border-color:var(--cta); }
.pb-n{
  font-family:var(--display); font-weight:700; font-size:19px; color:#fff;
  padding-bottom:7px; font-variant-numeric:tabular-nums;
}
.pain-bar.is-weak .pb-n{ color:var(--cta); }
.pb-l{
  padding-top:10px; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#8FA0C4;
}
.pain-bar.is-weak .pb-l{ color:#fff; }
.pb-tag{
  align-self:center; transform:rotate(-3deg); margin-bottom:8px;
  white-space:nowrap; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; background:var(--cta); color:#12121A;
  padding:5px 10px; border-radius:5px;
}
@media (max-width:960px){
  .pain-card{ grid-template-columns:1fr; gap:34px; padding:36px 26px 32px; }
  .pain-bars{ height:160px; max-width:330px; }
}

/* ------------------------------------------------ THE SCOREBOARD (dark) --
   The profit feature promoted off the band onto the near-black ground from
   the reference's costs page: copy and a two-column checklist left, the
   floating metric cluster right. The checklist reuses the pain-list ticks. */
.profit{ background:var(--tail); color:#98A2B3; padding:100px 0; overflow:hidden; }
.profit h2{
  color:#fff; font-size:clamp(28px,3.8vw,42px); font-weight:700;
  line-height:1.14; letter-spacing:-.03em; margin-top:8px;
}
.profit .eyebrow{ color:var(--cta); }
.profit-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center;
}
.profit-intro{ margin:18px 0 24px; font-size:17px; line-height:1.6; max-width:56ch; }
.profit-list{ grid-template-columns:1fr 1fr; gap:14px 26px; margin-bottom:24px; }
.profit-list li{ font-size:15.5px; }
.profit-close{ color:#fff; font-weight:600; font-size:16.5px; margin:0 0 22px; }
.profit .feature-links a{ border-color:rgba(255,255,255,.18); }
@media (max-width:960px){
  .profit-grid{ grid-template-columns:1fr; gap:40px; }
  .profit-list{ grid-template-columns:1fr; }
  .profit{ padding:72px 0; }
}

/* ------------------------------------------ SERVICES v4: levers, not menu
   Three lever tabs (matching the Trifecta and the pain chart), each opening
   its symptom in Ross's pain-block language plus the treatment and proof.
   Strategy and media sit below as an always-on strip rather than tabs,
   because they are not choices: they run on every account. */
.svc-cards--3{ grid-template-columns:repeat(3,1fr); }
.svc-cards--3 .svc-card{ padding:20px 20px; }
.svc-cards--3 .svc-card-name{ font-size:20px; }
.svc-cards--3 .svc-card-desc{ font-size:14px; }

.svc-always{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
.always-card{
  background:var(--tint); border:1px solid #DDE3FF; border-radius:var(--r-card);
  padding:26px 26px 22px;
}
.always-tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.always-card h3{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.always-card p{ margin:10px 0 0; font-size:15.5px; line-height:1.55; color:var(--body); max-width:52ch; }
.always-shots{ display:flex; gap:10px; margin-top:18px; }
.always-shots img{
  height:104px; width:auto; border-radius:10px; display:block;
  border:1px solid rgba(10,15,30,.1); background:#fff;
}
@media (max-width:960px){
  .svc-cards--3{ grid-template-columns:1fr; }
  .svc-always{ grid-template-columns:1fr; }
}

/* --------------------------------------------------- AUDIT CTA + FORM ----
   The V7 closer brought across: headline and promise left, the working
   audit form right in the dark glass, yellow submit. Posts to the same
   /api/audit endpoint the V6 page uses. */
.cta-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center;
  padding-top:90px; padding-bottom:90px;
}
.cta-copy h2{
  color:#fff; font-size:clamp(30px,3.9vw,46px); font-weight:700;
  line-height:1.1; letter-spacing:-.03em;
}
.cta-copy p{ margin:22px 0 0; font-size:17px; line-height:1.6; color:#98A2B3; max-width:52ch; }
.cta-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.cta-chips span{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cta); border:1px solid rgba(255,225,77,.45);
  padding:9px 16px; border-radius:999px;
}

.cta-form{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg);
  padding:30px 30px 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 34px 70px -30px rgba(0,0,0,.6);
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.f-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.f-field label{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#8FA0C4;
}
.f-field input,.f-field select{
  height:48px; padding:0 14px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:#fff; font-family:var(--text); font-size:15px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.f-field input::placeholder{ color:#5A6B8F; }
.f-field select{ appearance:auto; }
.f-field select option{ color:#0A0F1E; background:#fff; }
.f-field input:focus,.f-field select:focus{
  outline:none; border-color:rgba(255,225,77,.6); background:rgba(255,255,255,.09);
}
.f-err{ display:none; font-size:12.5px; color:#FCA5A5; }
.f-err.on{ display:block; }
.f-field.has-err input,.f-field.has-err select{ border-color:rgba(252,165,165,.6); }
.f-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.f-submit{ width:100%; margin-top:4px; }
.f-note{ margin:14px 0 0; font-size:13px; color:#8FA0C4; text-align:center; }
.f-status{ margin:10px 0 0; font-size:14px; text-align:center; color:#fff; display:none; }
.f-status.on{ display:block; }
.f-status.ok{ color:#4ADE80; }
.f-status.bad{ color:#FCA5A5; }
.cta-done{ text-align:center; padding:40px 10px; }
.cta-done h3{ color:#fff; font-size:24px; font-weight:700; letter-spacing:-.02em; }
.cta-done p{ margin:12px 0 0; color:#98A2B3; font-size:15.5px; }
@media (max-width:960px){
  .cta-grid{ grid-template-columns:1fr; gap:40px; padding-top:64px; padding-bottom:64px; }
  .f-row{ grid-template-columns:1fr; }
}

/* --------------------------------------------- CTA ON THE HEADER RENDER --
   The audit closer moves onto its own instance of the hero waves render.
   The ramp opens on paper, so the copy flips to ink and the form becomes
   the light liquid glass; the section bottoms out in navy, which hands off
   to the footer tail with no seam. */
.cta-world .cta-grid{ padding-top:110px; padding-bottom:130px; position:relative; z-index:1; }
.cta-world .cta-copy h2{ color:#0A0F1E; }
.cta-world .cta-copy p{ color:#41506B; }
.cta-world .cta-chips span{ color:#1E40AF; border-color:rgba(30,64,175,.35); }
.cta-world .cta-form{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 30px 60px -28px rgba(10,15,30,.35), inset 0 1px 0 rgba(255,255,255,.9);
}
.cta-world .f-field label{ color:#41506B; }
.cta-world .f-field input,.cta-world .f-field select{
  background:rgba(255,255,255,.75); border-color:rgba(10,15,30,.14); color:#0A0F1E;
}
.cta-world .f-field input::placeholder{ color:#9AA6BE; }
.cta-world .f-field input:focus,.cta-world .f-field select:focus{
  border-color:rgba(30,64,175,.55); background:#fff;
}
.cta-world .f-err{ color:#B42318; }
.cta-world .f-field.has-err input,.cta-world .f-field.has-err select{ border-color:rgba(180,35,24,.5); }
.cta-world .f-note{ color:#41506B; }
.cta-world .f-status.ok{ color:#12794A; }
.cta-world .f-status.bad{ color:#B42318; }
.cta-world .cta-done h3{ color:#0A0F1E; }
.cta-world .cta-done p{ color:#41506B; }
/* .world.w1 .btn-cta already flips the submit to royal on the light render */
.tail-foot{ padding-top:0; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cta-world .cta-form{ background:rgba(255,255,255,.92); }
}

/* the wall lost its copy; the tilted rows carry the section alone now,
   with enough padding that the rotation overhang never clips the neighbours */
.adwall{ padding:170px 0; }
@media (max-width:640px){ .adwall{ padding:110px 0; } }

/* Case stats stack the label under the number instead of beside it. The
   side-by-side layout wrapped long numbers into a mess, and the number is
   the thing the card exists to show. */
.case-stat{ display:block; }
.case-n{ display:block; white-space:nowrap; }
.case-l{ display:block; margin-top:3px; }
.case-stats{ gap:14px; }

/* ------------------------------------------ SERVICES v5: the index, open --
   Option 4's typographic index; each row maximises into option 3's layout
   (the long argument, capability pills and the real screenshots) and
   minimises again. Rows toggle independently. Height animates on
   grid-template-rows, never max-height. */
.idx{ border-top:1px solid var(--line); }
.idx-item{ border-bottom:1px solid var(--line); }
.idx-head{
  width:100%; display:grid; grid-template-columns:64px 1.15fr 1fr auto;
  gap:28px; align-items:center; padding:30px 6px;
  background:none; border:0; cursor:pointer; text-align:left; font-family:inherit;
  transition:background-color .2s var(--ease);
}
.idx-head:hover{ background:var(--tint); }
.idx-num{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--accent); }
.idx-name{
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(26px,3.2vw,42px); line-height:1.02; color:var(--ink);
  transition:color .25s var(--ease);
}
.idx-item.is-open .idx-name{ color:var(--royal); }
.idx-side{ display:flex; flex-direction:column; gap:6px; }
.idx-why{ font-size:15.5px; font-weight:600; color:var(--ink); }
.idx-points{ font-size:13px; color:var(--muted); }
.idx-head .svc-sign{ margin-top:0; justify-self:end; }
.idx-item.is-open .svc-sign::before{ background:var(--royal); }
.idx-item.is-open .svc-sign::after{ transform:rotate(90deg) scaleX(0); opacity:0; }

.idx-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.idx-item.is-open .idx-panel{ grid-template-rows:1fr; }
.idx-panel-in{ overflow:hidden; }
.idx-body{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  padding:6px 6px 40px 94px;
}
.idx-body p{ margin:0 0 20px; font-size:16.5px; line-height:1.65; color:var(--body); max-width:52ch; }
.idx-shots{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.idx-shots img{
  width:100%; border-radius:12px; display:block;
  border:1px solid var(--line); box-shadow:0 24px 44px -26px rgba(16,24,40,.35);
}
@media (prefers-reduced-motion:reduce){ .idx-panel{ transition:none; } }
@media (max-width:900px){
  .idx-head{ grid-template-columns:44px 1fr auto; }
  .idx-side{ display:none; }
  .idx-body{ grid-template-columns:1fr; gap:24px; padding-left:6px; }
}

/* -------------------------------------------------- HERO: SPLIT + VSL ----
   The centred hero is kept in _hero-centred-snapshot.html.bak. This is the
   left/right version: copy and a single CTA left, the video right. One CTA
   only, because a hero with two competing buttons splits the click. */
.hero-split{
  display:grid; grid-template-columns:1.02fr 1fr; gap:56px;
  align-items:center; text-align:left;
}
.hero-split .hero-copy{ max-width:none; }
.hero-split h1{ margin:0; max-width:15ch; }
.hero-split .sub{ margin:22px 0 0; max-width:50ch; }
.hero-split .hero-ctas{ justify-content:flex-start; margin-top:30px; }

.vsl-frame{
  position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  background:var(--navy); cursor:pointer;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 40px 80px -34px rgba(8,14,40,.6);
}
.vsl-poster{ width:100%; height:100%; object-fit:cover; opacity:.62; }
.vsl-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,15,30,.1), rgba(10,15,30,.55));
}
.vsl-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:78px; height:78px; border-radius:50%; border:0; cursor:pointer; z-index:2;
  background:var(--cta); display:grid; place-items:center;
  box-shadow:0 18px 40px -12px rgba(8,14,40,.5);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.vsl-frame:hover .vsl-play{ transform:translate(-50%,-50%) scale(1.06); }
.vsl-play:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
/* a drawn triangle, so no glyph font can substitute for it */
.vsl-tri{
  width:0; height:0; margin-left:5px;
  border-left:22px solid #12121A;
  border-top:14px solid transparent; border-bottom:14px solid transparent;
}
.vsl-tag{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:rgba(10,15,30,.55); padding:7px 13px; border-radius:999px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
@media (max-width:900px){
  .hero-split{ grid-template-columns:1fr; gap:34px; text-align:center; }
  .hero-split h1,.hero-split .sub{ margin-left:auto; margin-right:auto; }
  .hero-split .hero-ctas{ justify-content:center; }
  .hero-split .hero-ctas .btn{ width:100%; }
}

/* ------------------------------------------------ mid-page section CTAs --
   The hero now carries one button, so the page earns the click again after
   the proof it just showed. */
.sec-cta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:40px; padding-top:32px; border-top:1px solid var(--line);
}
.sec-cta-note{ font-size:14.5px; color:var(--muted); }
.tinted .sec-cta{ border-top-color:#DDE3FF; }

/* .world.w1 .hero rules above are two classes deep; match that depth so the
   split hero's grid is not undone by the centred hero's defaults. */
.world.w1 .hero.hero-split{
  display:grid; grid-template-columns:1.02fr 1fr; gap:56px;
  align-items:center; text-align:left; padding-bottom:70px;
}
.world.w1 .hero.hero-split h1,
.world.w1 .hero.hero-split .sub{ margin-left:0; margin-right:0; }
@media (max-width:900px){
  .world.w1 .hero.hero-split{ grid-template-columns:1fr; gap:34px; text-align:center; }
  .world.w1 .hero.hero-split h1,
  .world.w1 .hero.hero-split .sub{ margin-left:auto; margin-right:auto; }
}

/* ── Booking calendar in the audit success state ─────────────────────
   Injected by site.js only once the form succeeds, so the iframe costs
   nothing to the visitors who never convert. */
.cal-frame{
  margin-top:22px; background:#fff; border:1px solid var(--line,#E4E7EC);
  border-radius:16px; overflow:hidden;
}
.cal-frame iframe{ width:100%; min-height:660px; border:0; display:block; }
.cal-frame .cal-fallback{ padding:26px; text-align:center; font-size:15.5px; }

/* The success block was 1494px tall for a 660px calendar: the copy above
   it took more room than the thing we want them to use. Tighten the frame
   so the calendar leads and the whole step fits closer to one screen. */
#auditdone{ padding:22px 22px 24px; }
#auditdone h3{ margin:0 0 6px; font-size:clamp(20px,2.6vw,26px); }
#auditdone p{ margin:0 0 14px; font-size:15.5px; }
#auditdone .cal-frame{ margin-top:0; }

/* Booking step takes the whole shell. A GHL widget in a narrow column
   stacks the date picker above the time slots; given the full width it
   puts them side by side, which is where most of the height went. */
.is-booking{ grid-template-columns:1fr !important; }
.is-booking > :not(#auditdone){ display:none !important; }
#auditdone{ grid-column:1 / -1; }
#auditdone .cal-frame{ min-height:0; }
#auditdone .cal-frame iframe{ min-height:520px; }