/* ==========================================================================
   AdSimpler v2 design system
   Design language: dark "night" hero with a soft glow, big tight Archivo
   headlines with one highlighted phrase, Instrument Sans body, UI mockups
   built in HTML/CSS, light sections alternating with dark rounded sheets.
   Brand: cyan to blue accent on ink. Guide: assets/v2/PARTIALS.md
   Motion rules: transform/opacity only, everything visible without JS,
   paused offscreen, nothing moves under prefers-reduced-motion.
   ========================================================================== */

/* ---------- 0. Metric-matched fallback faces ----------
   Archivo and Instrument Sans load from Google Fonts with display=swap. Until they
   arrive, text renders in these local faces. They are scaled to the same average
   advance width and given the web fonts' vertical metrics, so the swap does not
   re-wrap headlines or push the page down (CLS). Widths were measured against the
   real page copy: Archivo 800 vs Arial Bold, Instrument Sans 400 vs Arial and 650 vs
   Arial Bold. Archivo's word space is much narrower than Arial's, so its fallback
   scales the space (U+0020/U+00A0) on its own; that keeps headline line breaks the
   same. Instrument Sans keeps one face because 'ch' widths come from it.
   Liberation Sans is metric-identical to Arial (Linux). The Roboto faces cover
   Android, which has no Arial. Overrides are divided by size-adjust. */
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:100 900;unicode-range:U+0000-001F,U+0021-009F,U+00A1-10FFFF;size-adjust:106.3%;ascent-override:82.6%;descent-override:19.8%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:100 900;unicode-range:U+0020,U+00A0;size-adjust:68%;ascent-override:129.1%;descent-override:30.9%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback R";src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");font-weight:100 900;unicode-range:U+0000-001F,U+0021-009F,U+00A1-10FFFF;size-adjust:112.6%;ascent-override:78%;descent-override:18.7%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback R";src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");font-weight:100 900;unicode-range:U+0020,U+00A0;size-adjust:76.1%;ascent-override:115.4%;descent-override:27.6%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");font-weight:100 549;size-adjust:101.5%;ascent-override:95.6%;descent-override:24.6%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:550 900;size-adjust:98.4%;ascent-override:98.6%;descent-override:25.4%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback R";src:local("Roboto"),local("Roboto-Regular"),local("Roboto Regular");font-weight:100 549;size-adjust:102%;ascent-override:95.1%;descent-override:24.5%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback R";src:local("Roboto Medium"),local("Roboto-Medium"),local("Roboto");font-weight:550 900;size-adjust:105%;ascent-override:92.4%;descent-override:23.8%;line-gap-override:0%}

/* ---------- 1. Tokens ---------- */
:root{
  /* Dark surfaces */
  --night:#040C17;
  --night-1:#071321;
  --night-2:#0B1B2E;
  --night-3:#12263E;
  --dline:rgba(255,255,255,.09);
  --dline-2:rgba(255,255,255,.16);
  --dtext:#F1F5F9;
  --dmuted:#93A4B8;
  --dsoft:#C3CEDB;

  /* Light surfaces */
  --ink:#0B1A2B;
  --ink-2:#14293F;
  --muted:#53647A;
  --faint:#5E6F85;
  --line:#E2E8EF;
  --line-2:#CCD7E2;
  --panel:#F3F7FA;
  --white:#FFFFFF;

  /* Brand accent (cyan to blue) */
  --accent:#00B8D9;
  --accent-hi:#25CDEB;
  --accent-2:#0086F5;
  --accent-deep:#007A99;
  --accent-text:#00718E;      /* accent text on white, 5.5:1 */
  --accent-on-dark:#4FD8EE;   /* accent text on night */
  --accent-soft:#E3F7FB;
  --grad:linear-gradient(135deg,#00C6E0 0%,#0086F5 100%);
  --grad-btn:linear-gradient(135deg,#14D4EC 0%,#22A0FF 100%);
  --on-accent:#03121E;        /* text on the accent button */

  /* Status */
  --wa:#25D366;
  --wa-hi:#3BE07A;
  --ok:#12945A;
  --ok-text:#0B7A47;
  --ok-soft:#E1F4EA;
  --ok-dark:#3DDC84;
  --warn-soft:#FFF4DB;
  --warn-text:#8A5A00;

  /* Shape */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --sh-1:0 0 0 1px var(--line),0 1px 2px rgba(11,26,43,.05);
  --sh-2:0 0 0 1px var(--line),0 24px 48px -28px rgba(11,26,43,.28);
  --sh-3:0 0 0 1px var(--line),0 40px 80px -40px rgba(11,26,43,.4);
  --sh-dark:0 40px 80px -40px rgba(0,0,0,.8);
  --glass:rgba(13,27,45,.82);

  /* Type */
  --display:"Archivo","Archivo Fallback","Archivo Fallback R","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Instrument Sans Fallback","Instrument Sans Fallback R","Helvetica Neue",Arial,system-ui,sans-serif;

  /* Layout */
  --wrap:1200px;
  --gutter:clamp(16px,4vw,40px);
  --nav-h:72px;

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* Mask icons */
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3L13 4.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 13l7-7M8 6h6v6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-ac:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3L13 4.8' fill='none' stroke='%2300718E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-ad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3L13 4.8' fill='none' stroke='%234FD8EE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media (max-width:820px){:root{--nav-h:64px}}
@media (max-width:600px){:root{--nav-h:60px}}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px);interpolate-size:allow-keywords}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip}
/* body's overflow is handed to the viewport, so also clip inside main: an element waiting to slide in from the side never widens the page */
main{display:block;overflow-x:clip}
img,svg,video{max-width:100%}
img{height:auto}
[hidden]{display:none!important}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
p,li,dd{text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
a,button,label,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}
:root{--focus:var(--ink)}
.dark,.hero,.sheet-dark,.nav,.mnav,.mbar,.plan.pop,.card-dark{--focus:#fff}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;left:12px;top:-80px;z-index:200;padding:12px 16px;border-radius:10px;background:#fff;color:var(--ink);font-weight:650;text-decoration:none;box-shadow:var(--sh-2)}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nw{white-space:nowrap}

/* ---------- 3. Type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:650 .8rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--grad);flex:none}
.dark .eyebrow,.hero .eyebrow,.sheet-dark .eyebrow{color:var(--dmuted)}
.h1{font-size:clamp(2.6rem,1.6rem + 3.6vw,4.4rem);letter-spacing:-.038em;line-height:1}
.h2{font-size:clamp(2rem,1.1rem + 2.5vw,3.2rem);letter-spacing:-.034em}
.h3{font-size:clamp(1.3rem,1.15rem + .4vw,1.5rem);letter-spacing:-.022em;line-height:1.15}
.h4{font-size:1.12rem;letter-spacing:-.015em;line-height:1.25}
.lead{font-size:clamp(1.05rem,1rem + .25vw,1.2rem);color:var(--muted);max-width:54ch;line-height:1.55}
.dark .lead,.sheet-dark .lead,.hero .lead{color:var(--dsoft)}
.body{color:var(--muted);max-width:56ch}
.dark .body,.sheet-dark .body{color:var(--dmuted)}
.small{font-size:.92rem}
.caption{font-size:.82rem;line-height:1.45;color:var(--faint)}
.dark .caption,.sheet-dark .caption,.hero .caption{color:var(--dmuted)}
.num{font-family:var(--display);font-stretch:112%;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* One highlighted phrase per headline: a gradient bar that sweeps in */
.hl{font-style:normal;white-space:nowrap;background:var(--grad) no-repeat 0 92%/100% .16em;padding-inline:.02em}
.hl-text{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.accent{color:var(--accent-text)}
.dark .accent,.sheet-dark .accent,.hero .accent{color:var(--accent-on-dark)}

/* ---------- 4. Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.wrap-narrow{max-width:860px}
.section{padding-block:clamp(56px,7vw,112px)}
.section-sm{padding-block:clamp(40px,5vw,72px)}
.band-soft{background:var(--panel)}
.dark{background:var(--night);color:var(--dtext)}
.rule{height:1px;background:var(--line);border:0;margin:0}
/* Dark rounded "sheet" inset into a light page */
.sheet{position:relative;overflow:hidden;overflow:clip;isolation:isolate}
.sheet-dark{background:var(--night);color:var(--dtext)}
@media (min-width:900px){.sheet{margin-inline:12px;border-radius:var(--r-xl)}}
.sheet-glow::before{content:"";position:absolute;z-index:-1;width:min(1100px,160vw);aspect-ratio:1;left:var(--gx,80%);top:var(--gy,0%);translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,198,224,.2),rgba(0,134,245,.08) 48%,transparent 74%);pointer-events:none}
.sheet-grid::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 30%,#000 10%,transparent 75%)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px clamp(32px,6vw,88px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.sec-head>div{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.sec-head .lead{padding-bottom:6px}
.sec-head.top{align-items:start}
.sec-head.center{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.sec-head.center>div{align-items:center}
.sec-head.center .lead{margin-inline:auto}
@media (max-width:860px){.sec-head{grid-template-columns:minmax(0,1fr);align-items:start}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.split-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:32px}}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:var(--gap,16px)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,12px)}

/* ---------- 5. Buttons, links, pills ---------- */
.btn{--bg:var(--ink);--fg:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 1.45em;border-radius:999px;border:0;background:var(--bg);color:var(--fg);font:650 1rem/1.1 var(--body);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .26s var(--ease-out),box-shadow .26s var(--ease-out),background-color .2s,color .2s;-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(.97);transition-duration:90ms}
.btn svg{width:20px;height:20px;flex:none}
.btn-sm{min-height:44px;padding:0 1.1em;font-size:.94rem}
.btn-lg{min-height:58px;padding:0 1.7em;font-size:1.06rem}
.btn-block{width:100%}
.btn-primary{--bg:var(--accent);--fg:var(--on-accent);background:var(--grad-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12),0 1px 2px rgba(4,12,23,.2),0 8px 22px -10px rgba(0,160,240,.7)}
.btn-dark{--bg:var(--ink);--fg:#fff}
.btn-light{--bg:#fff;--fg:var(--ink);box-shadow:0 8px 20px -12px rgba(0,0,0,.6)}
.btn-ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost-d{--bg:transparent;--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.btn-glass{--bg:rgba(255,255,255,.08);--fg:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-wa{--bg:var(--wa);--fg:#04210F;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -12px rgba(37,211,102,.8)}
.arr{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat;transition:transform .3s var(--ease-out)}
.ext{display:inline-block;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--i-ext) center/contain no-repeat;mask:var(--i-ext) center/contain no-repeat;transition:transform .3s var(--ease-out)}
.tick{display:inline-block;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn:hover .arr,.text-link:hover .arr{transform:translateX(3px)}
  .btn:hover .ext,.text-link:hover .ext{transform:translate(2px,-2px)}
  .btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12),0 14px 30px -12px rgba(0,160,240,.85)}
  .btn-dark:hover{--bg:var(--ink-2)}
  .btn-light:hover{--bg:#E8F2F8}
  .btn-ghost:hover{--bg:var(--ink);--fg:#fff}
  .btn-ghost-d:hover{box-shadow:inset 0 0 0 1.5px #fff}
  .btn-glass:hover{--bg:rgba(255,255,255,.14)}
  .btn-wa:hover{--bg:var(--wa-hi)}
}
@media (max-width:374px){.btn{white-space:normal;text-align:center}}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:650;text-decoration:none;color:var(--ink)}
.text-link .arr,.text-link .ext{color:var(--accent-text)}
.dark .text-link,.sheet-dark .text-link,.hero .text-link,.card-dark .text-link{color:#fff}
.dark .text-link .arr,.sheet-dark .text-link .arr,.hero .text-link .arr,.card-dark .text-link .arr,.sheet-dark .text-link .ext,.card-dark .text-link .ext{color:var(--accent-on-dark)}
.u-link{color:inherit;font-weight:650;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--accent)}
/* Pills / plan tags */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:4px 10px;border-radius:999px;font:650 .76rem/1.2 var(--body);letter-spacing:.01em;background:var(--panel);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.pill svg{width:13px;height:13px;flex:none}
.pill-accent{background:var(--accent-soft);color:var(--accent-text);box-shadow:none}
.pill-ink{background:var(--ink);color:#fff;box-shadow:none}
.pill-ok{background:var(--ok-soft);color:var(--ok-text);box-shadow:none}
.pill-warn{background:var(--warn-soft);color:var(--warn-text);box-shadow:none}
.pill-dark{background:rgba(255,255,255,.06);color:var(--dsoft);box-shadow:inset 0 0 0 1px var(--dline-2)}
.pill-grad{background:var(--grad);color:var(--on-accent);box-shadow:none}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--ok-dark);flex:none;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:livePulse 2s var(--ease-out) infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}80%,100%{box-shadow:0 0 0 7px rgba(61,220,132,0)}}
/* Tick list */
.ticks{display:flex;flex-direction:column;gap:12px}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;line-height:1.5}
.ticks li::before{content:"";width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--accent-soft) var(--i-check-ac) no-repeat center/12px 12px;box-shadow:inset 0 0 0 1px rgba(0,184,217,.22)}
.dark .ticks li::before,.sheet-dark .ticks li::before,.card-dark .ticks li::before{background:rgba(0,198,224,.14) var(--i-check-ad) no-repeat center/12px 12px;box-shadow:inset 0 0 0 1px rgba(79,216,238,.25)}
.ticks b{font-weight:650;color:var(--ink)}
.dark .ticks b,.sheet-dark .ticks b,.card-dark .ticks b,.plan.pop .ticks b{color:#fff}
.ticks-row{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.94rem;color:var(--muted)}
.ticks-row li{display:inline-flex;align-items:center;gap:8px}
.ticks-row .tick{color:var(--ok)}
.dark .ticks-row,.hero .ticks-row,.sheet-dark .ticks-row{color:var(--dsoft)}
.dark .ticks-row .tick,.hero .ticks-row .tick,.sheet-dark .ticks-row .tick{color:var(--ok-dark)}

/* ---------- 6. Nav + mobile menu ---------- */
.nav{position:sticky;top:0;z-index:60;padding-top:env(safe-area-inset-top);background:var(--night);color:var(--dtext);border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
/* Transparent only over a dark .hero; on pages without one the header stays solid night */
html.js body:not(.menu-open):has(.hero) .nav:not(.scrolled){background:transparent}
body.menu-open .nav{background:var(--night);border-bottom-color:var(--dline);-webkit-backdrop-filter:none;backdrop-filter:none}
.nav.scrolled{border-bottom-color:var(--dline);background:rgba(4,12,23,.9);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
.nav-in{display:flex;align-items:center;gap:20px;height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:inherit;flex:none}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -6px rgba(0,184,217,.75);flex:none}
.brand-mark svg{width:17px;height:17px;color:#fff}
.brand-word{font:850 1.32rem/1 var(--display);font-stretch:110%;letter-spacing:-.04em}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-inline:11px;font-weight:550;font-size:.95rem;text-decoration:none;color:var(--dmuted);transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:11px;right:11px;bottom:7px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.nav-links a[aria-current="page"]{color:#fff}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:#fff}.nav-links a:hover::after{transform:scaleX(1)}}
.nav-end{display:flex;align-items:center;gap:6px}
.nav-login{display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;font-weight:550;font-size:.95rem;color:var(--dmuted);text-decoration:none}
@media (hover:hover) and (pointer:fine){.nav-login:hover{color:#fff}}
.nav .nav-cta{min-height:44px;padding:0 20px;font-size:.94rem;transition:transform .26s var(--ease-out),opacity .2s,visibility 0s}
.nav-toggle{display:none;position:relative;width:46px;height:46px;margin-right:-8px;border:0;border-radius:12px;background:transparent;color:#fff;cursor:pointer}
.nav-toggle span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease-out),top .3s var(--ease-out)}
.nav-toggle span:first-child{top:18px}
.nav-toggle span:last-child{top:26px}
body.menu-open .nav-toggle span:first-child{top:22px;transform:rotate(45deg)}
body.menu-open .nav-toggle span:last-child{top:22px;transform:rotate(-45deg)}
@media (max-width:1060px){.nav-links a{padding-inline:8px;font-size:.92rem}.nav-links a::after{left:8px;right:8px}.nav-login{padding-inline:8px}}
@media (max-width:960px){
  .nav-links,.nav-login{display:none}
  .nav-end{margin-left:auto}
  html.js .nav-toggle{display:block}
}
/* Without JS there is no menu button, so small screens show the links as a second header row instead */
@media (max-width:960px){
  html:not(.js) .nav{position:relative}
  html:not(.js) .nav-in{flex-wrap:wrap;height:auto}
  html:not(.js) .nav-in>.brand,html:not(.js) .nav-end{height:var(--nav-h)}
  html:not(.js) .nav-links{display:flex;flex-wrap:wrap;order:3;width:100%;margin:-6px 0 8px -8px}
  html:not(.js) .nav-links a{padding-inline:8px}
  html:not(.js) .nav-links a::after{left:8px;right:8px}
}
.nav .nav-cta{white-space:nowrap}
@media (max-width:380px){.nav .nav-cta{padding:0 14px;font-size:.9rem}.brand-word{font-size:1.2rem}}
@media (max-width:350px){.nav .nav-cta{display:none}}
/* Mobile menu panel */
.mnav{position:fixed;left:0;right:0;top:calc(var(--nav-h) + env(safe-area-inset-top));bottom:0;z-index:59;display:flex;flex-direction:column;overflow-y:auto;padding:12px max(var(--gutter),env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));background:var(--night);color:var(--dtext);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .28s var(--ease-out),transform .32s var(--ease-out),visibility 0s linear .32s}
body.menu-open .mnav{opacity:1;visibility:visible;transform:none;transition:opacity .28s var(--ease-out),transform .32s var(--ease-out),visibility 0s}
.mnav-links{display:flex;flex-direction:column;border-top:1px solid var(--dline)}
.mnav-links a{display:flex;align-items:center;justify-content:space-between;min-height:58px;border-bottom:1px solid var(--dline);font:780 1.5rem/1.1 var(--display);letter-spacing:-.025em;text-decoration:none;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease-out),transform .4s var(--ease-out)}
.mnav-links a .arr{color:var(--accent-on-dark)}
.mnav-links a[aria-current="page"]{color:var(--accent-on-dark)}
body.menu-open .mnav-links a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 40ms + 60ms)}
.mnav-foot{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.mnav-foot .btn{width:100%}
.mnav-login{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:var(--dmuted);font-weight:600;text-decoration:none}
body.menu-open{overflow:hidden}
@media (min-width:961px){.mnav{display:none}}

/* ---------- 7. Hero shell ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--night);color:var(--dtext);margin-top:calc(-1 * (var(--nav-h) + env(safe-area-inset-top)))}
.hero-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-fx::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;background-position:center -1px;-webkit-mask-image:radial-gradient(60% 75% at 74% 42%,#000 10%,transparent 75%);mask-image:radial-gradient(60% 75% at 74% 42%,#000 10%,transparent 75%)}
.hero-fx::after{content:"";position:absolute;width:min(1100px,170vw);aspect-ratio:1;left:var(--glow-x,74%);top:var(--glow-y,46%);translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,198,224,.24),rgba(0,134,245,.09) 46%,transparent 74%)}
.hero-aurora{position:absolute;z-index:-1;width:min(900px,140vw);aspect-ratio:1.6;left:-12%;top:-38%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,134,245,.16),transparent 72%);pointer-events:none}
.hero-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-in{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:calc(var(--nav-h) + env(safe-area-inset-top) + clamp(28px,4vw,64px));padding-bottom:clamp(40px,5vw,72px)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hero-title{margin-top:20px;font-size:clamp(2.6rem,1.3rem + 3.6vw,3.9rem);font-weight:800;letter-spacing:-.04em;line-height:.98;color:#fff}
.hero-lead{margin-top:22px;max-width:50ch;font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);line-height:1.55;color:var(--dsoft)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-note{margin-top:14px;font-size:.92rem;color:var(--dmuted)}
.hero-note b{color:#fff;font-weight:600}
@media (max-width:980px){.hero-in{grid-template-columns:minmax(0,1fr)}.hero-copy{max-width:680px}}
@media (max-width:600px){
  .hero-in{padding-top:calc(var(--nav-h) + env(safe-area-inset-top) + 20px);padding-bottom:40px}
  .hero-title{margin-top:14px;font-size:clamp(2.35rem,10.4vw,3rem);line-height:1.0}
  .hero-lead{margin-top:16px;font-size:1.04rem}
  .hero-ctas{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .hero-ctas .btn{width:100%}
}
/* Audience picker (two doors under the hero CTAs) */
.doors{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid var(--dline);width:100%;max-width:560px}
.doors-k{width:100%;font:650 .76rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dmuted)}
.door{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px 6px 7px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--dline-2);color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;transition:background-color .2s,box-shadow .2s,transform .26s var(--ease-out)}
.door-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(0,198,224,.14);color:var(--accent-on-dark);flex:none}
.door-ic svg{width:18px;height:18px}
.door .arr{width:16px;height:16px;color:var(--accent-on-dark)}
@media (hover:hover) and (pointer:fine){.door:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(79,216,238,.5);transform:translateY(-2px)}.door:hover .arr{transform:translateX(3px)}}
@media (max-width:600px){.doors{margin-top:22px;padding-top:18px}.door{width:100%}.door .arr{margin-left:auto}}

/* ---------- 8. Logo marquee ---------- */
.logos{position:relative;border-top:1px solid var(--dline);background:var(--night);color:var(--dtext);padding-block:22px 26px}
.logos-k{text-align:center;font:650 .76rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dmuted);margin-bottom:16px}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-group{display:flex;align-items:center;gap:clamp(36px,5vw,64px);padding-right:clamp(36px,5vw,64px);flex:none}
.wordmark{font:800 clamp(1.05rem,.95rem + .5vw,1.35rem)/1 var(--display);letter-spacing:-.02em;color:rgba(241,245,249,.62);white-space:nowrap;transition:color .25s}
.wordmark.w-wide{font-stretch:125%;letter-spacing:-.035em}
.wordmark.w-caps{text-transform:uppercase;letter-spacing:.04em;font-size:clamp(.92rem,.85rem + .4vw,1.15rem)}
.wordmark.w-light{font-weight:600}
@media (hover:hover) and (pointer:fine){.wordmark:hover{color:#fff}}
.light .wordmark{color:rgba(11,26,43,.55)}

/* ---------- 9. Cards ---------- */
.card{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(22px,2.6vw,32px);border-radius:var(--r-lg);background:#fff;color:var(--ink);box-shadow:var(--sh-2);--focus:var(--ink)}
.card-soft{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.card-dark{--focus:#fff;background:var(--night-2);color:var(--dtext);box-shadow:inset 0 0 0 1px var(--dline-2),var(--sh-dark)}
.card-dark .body,.card-dark p{color:var(--dsoft)}
.card-link{text-decoration:none;color:inherit;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card-link:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}}
.card-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);flex:none}
.card-ic svg{width:22px;height:22px}
.card-dark .card-ic,.sheet-dark .card-ic{background:rgba(0,198,224,.12);color:var(--accent-on-dark)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Visual window inside a card (holds a mockup) */
.card-vis{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);min-height:220px;display:grid;place-items:center;padding:20px;isolation:isolate}
.card-vis.dark-vis{background:radial-gradient(120% 90% at 70% 0%,rgba(0,198,224,.18),transparent 60%),var(--night-1);box-shadow:inset 0 0 0 1px var(--dline-2)}
.card-vis .caption{position:absolute;left:14px;bottom:10px}
.card-vis .caption.top{top:10px;bottom:auto}
.card-vis:has(>.caption:not(.top)){padding-bottom:40px}
.card-vis.dark-vis .caption{color:var(--dmuted)}
/* Numbered step */
.step-n{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;font:750 1rem/1 var(--display);flex:none}
.step-t{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:650 .8rem/1 var(--display);font-variant-numeric:tabular-nums;color:var(--muted)}

/* ---------- 10. Mockup primitives ---------- */
/* Phone. Size with --pw (screen scales with it). */
.phone{--pw:244px;position:relative;width:var(--pw);height:calc(var(--pw) * 2.05);border-radius:calc(var(--pw) * .19);padding:calc(var(--pw) * .037);background:linear-gradient(150deg,#4A5A72 0%,#18243A 26%,#0A1220 64%,#2C3A52 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 3px #04080F,0 50px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.5);flex:none}
.phone-screen{position:relative;height:100%;border-radius:calc(var(--pw) * .152);overflow:hidden;background:#fff;display:flex;flex-direction:column;isolation:isolate}
.phone-island{position:absolute;top:calc(var(--pw) * .04);left:50%;translate:-50% 0;width:calc(var(--pw) * .32);height:calc(var(--pw) * .094);border-radius:20px;background:#000;z-index:5}
.phone-lock{color:#fff;background:radial-gradient(140% 55% at 50% 112%,rgba(0,198,224,.7),rgba(0,134,245,.25) 46%,transparent 72%),linear-gradient(180deg,#15233A 0%,#0B1526 58%,#08101D 100%)}
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:13px 20px 0 25px;height:38px;font:600 12.5px/1 var(--body);letter-spacing:-.01em;flex:none}
.statusbar svg{width:44px;height:11px}
.lock-top{display:flex;flex-direction:column;align-items:center;margin-top:12px;flex:none}
.lock-top>svg{width:12px;height:15px;opacity:.85}
.lock-date{margin-top:6px;font:600 12.5px/1.2 var(--body);opacity:.86}
.lock-time{font:640 58px/1 var(--display);letter-spacing:-.02em;margin-top:1px;font-variant-numeric:tabular-nums}
.notifs{display:flex;flex-direction:column;gap:6px;padding:0 8px;margin-top:18px}
.lock-bottom{margin-top:auto;display:flex;justify-content:space-between;padding:0 24px 24px;flex:none}
.lk{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.lk svg{width:16px;height:16px}
.home-bar{position:absolute;bottom:7px;left:50%;translate:-50% 0;width:96px;height:4px;border-radius:4px;background:rgba(255,255,255,.85);z-index:4}
.phone-screen.light .home-bar{background:rgba(0,0,0,.75)}
/* Enquiry notification (iOS style) */
.notif{background:rgba(244,246,250,.96);color:#0b0b0c;border-radius:17px;padding:9px 11px 10px;box-shadow:0 10px 24px -12px rgba(0,0,0,.6);text-align:left}
.n-head{display:flex;align-items:center;gap:6px;font:550 10px/1 var(--body);letter-spacing:.03em;text-transform:uppercase;color:#686d76}
.n-head time{margin-left:auto;text-transform:none;letter-spacing:0}
.app{width:17px;height:17px;border-radius:5px;display:grid;place-items:center;flex:none;color:#fff}
.app svg{width:11px;height:11px}
.app-wa{background:linear-gradient(180deg,#5FE37B,#1FAF4B)}
.app-mail{background:linear-gradient(180deg,#4AA3FF,#1572E8)}
.app-web{background:var(--grad)}
.app-meta{background:linear-gradient(180deg,#3B8BFF,#0866FF)}
.n-title{font:650 12.5px/1.25 var(--body);margin-top:6px;letter-spacing:-.005em}
.n-body{font:400 12.5px/1.36 var(--body);color:#24272e;margin-top:1px}
/* Dark glass floating card */
.fcard{position:absolute;z-index:6;border-radius:var(--r-md);padding:14px 15px 15px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 26px 50px -20px rgba(0,0,0,.75);color:#E7EDF4;font-size:13px;line-height:1.4;text-align:left}
.fc-label{display:flex;align-items:center;gap:7px;font:650 10.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dmuted);margin-bottom:10px}
.fc-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 3px rgba(0,198,224,.22)}
.fc-name{font:650 15px/1.2 var(--body);color:#fff;letter-spacing:-.01em}
.fc-meta{color:var(--dmuted);font-size:12.5px;margin-top:2px}
/* Meta ads results panel */
.ads-panel{width:240px}
.ap-head{display:flex;align-items:center;gap:9px;padding-bottom:11px;margin-bottom:4px;border-bottom:1px solid var(--dline)}
.ap-head .app{width:24px;height:24px;border-radius:7px}
.ap-head .app svg{width:15px;height:15px}
.ap-title{font:650 13px/1.25 var(--body);color:#fff}
.ap-sub{font-size:11.5px;color:var(--dmuted)}
.ap-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--dline)}
.ap-row:last-of-type{border-bottom:0}
.ap-k{font-size:12px;color:var(--dsoft);line-height:1.3}
.ap-v{font:750 22px/1 var(--display);font-stretch:112%;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.ap-v.accent{color:var(--accent-on-dark)}
.ap-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:4px}
.ap-bar i{display:block;height:100%;width:var(--w,33%);border-radius:inherit;background:var(--grad);transform-origin:left}
.ap-foot{margin-top:10px;font-size:11px;line-height:1.35;color:var(--dmuted)}
/* Example Meta ad (light post) */
.ad-card{width:230px;border-radius:14px;background:#fff;color:#1C1E21;box-shadow:0 30px 60px -24px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;text-align:left;font-size:12px;line-height:1.35}
.ad-head{display:flex;align-items:center;gap:8px;padding:10px 11px 7px}
.ad-av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font:750 10.5px/1 var(--display);flex:none}
.ad-name{font-weight:650;font-size:12px;line-height:1.2}
.ad-sp{font-size:10.5px;color:#65676B}
.ad-text{padding:0 11px 9px;color:#1C1E21}
.ad-creative{position:relative;aspect-ratio:1.25;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:14px;background:radial-gradient(90% 80% at 80% 10%,rgba(0,198,224,.55),transparent 60%),linear-gradient(160deg,#10213A,#050B14);color:#fff;overflow:hidden}
.ad-art{position:absolute;right:8px;top:10px;width:60%;height:auto;color:var(--accent-on-dark);opacity:.95;overflow:visible}
.ad-art .dim{opacity:.35}
.ad-art .needle{transform-box:view-box;transform-origin:50px 56px;transform:rotate(0deg)}
@media (prefers-reduced-motion:no-preference){.anim .s-ad.on .needle{animation:needleSweep 1.6s var(--ease-out) .25s both}}
@keyframes needleSweep{from{transform:rotate(-120deg)}}
.ad-creative small{font:700 9.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-dark)}
.ad-creative strong{font:850 30px/.95 var(--display);font-stretch:112%;letter-spacing:-.04em}
.ad-creative span{font-size:11.5px;color:var(--dsoft)}
.ad-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;background:#F0F2F5}
.ad-foot div{min-width:0}
.ad-foot p{font-size:9.5px;color:#65676B;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-foot b{display:block;font-size:11.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-btn{flex:none;padding:6px 9px;border-radius:6px;background:#E4E6EB;font:650 11px/1 var(--body);position:relative;white-space:nowrap}
/* UK number plate */
.plate{display:inline-flex;align-items:stretch;height:40px;border-radius:7px;overflow:hidden;background:#FFD43B;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35),0 8px 18px -10px rgba(0,0,0,.5);font:800 20px/40px var(--display);font-stretch:90%;letter-spacing:.06em;color:#111}
.plate i{display:grid;place-items:end center;width:24px;padding-bottom:4px;background:#1F4CC0;color:#fff;font:700 8px/1 var(--body);font-style:normal;letter-spacing:.02em}
.plate span{padding:0 12px}
/* Laptop frame. Size with --lw. */
.laptop{--lw:820px;position:relative;width:min(var(--lw),100%);flex:none}
.laptop-lid{position:relative;border-radius:18px 18px 6px 6px;padding:1.6% 1.6% 2.4%;background:linear-gradient(180deg,#2B3446,#0E141F);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 50px 100px -40px rgba(0,0,0,.9)}
.laptop-lid::before{content:"";position:absolute;top:.7%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#05080E;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.laptop-screen{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.laptop-base{position:relative;height:clamp(10px,1.6vw,16px);width:112%;margin-left:-6%;border-radius:2px 2px 14px 14px;background:linear-gradient(180deg,#5B6578 0%,#2B3343 45%,#151B26 100%);box-shadow:0 30px 40px -24px rgba(0,0,0,.9)}
.laptop-base::before{content:"";position:absolute;top:0;left:50%;width:16%;height:40%;translate:-50% 0;border-radius:0 0 8px 8px;background:#151B26}
@media (max-width:700px){.laptop{width:min(var(--lw),90%)}}
/* Browser chrome (inside a laptop, or standalone with .browser) */
.browser{border-radius:var(--r-md);overflow:hidden;background:#fff;box-shadow:var(--sh-3);display:flex;flex-direction:column}
.browser-bar{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;background:#EEF1F5;border-bottom:1px solid #DDE3EA;flex:none}
.browser-bar .dots{display:flex;gap:5px}
.browser-bar .dots i{width:8px;height:8px;border-radius:50%;background:#D3D9E1}
.browser-bar .dots i:first-child{background:#FF6159}.browser-bar .dots i:nth-child(2){background:#FFBD2E}.browser-bar .dots i:nth-child(3){background:#28C941}
.browser-url{flex:1;max-width:60%;margin-inline:auto;height:20px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:6px;background:#fff;font:550 11px/1 var(--body);color:#5A6676;white-space:nowrap;overflow:hidden}
.browser-url svg{width:10px;height:10px;flex:none}
/* "Example" badge on a demo-site thumbnail (keep it visible on every example build) */
.ex-badge{position:absolute;left:8px;top:22px;padding:4px 7px;border-radius:6px;background:rgba(4,12,23,.82);color:#fff;font:700 .58rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
/* Auto-scrolling screenshot frame: JS measures the travel, CSS moves it */
.shot{position:relative;flex:1;min-height:0;overflow:hidden;background:#fff}
.shot img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;will-change:transform}
html.js .shot.as-on img{animation:asScroll var(--as-t,24s) var(--ease-io) infinite}
@keyframes asScroll{0%,6%{transform:translate3d(0,0,0)}62%,70%{transform:translate3d(0,var(--as-d,0px),0)}94%,100%{transform:translate3d(0,0,0)}}
.shot.is-off img,.shot.as-hold img{animation-play-state:paused!important}
.shot-fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(transparent,rgba(255,255,255,.0));pointer-events:none}
/* Small floating status chip */
.s-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 13px 9px 9px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 20px 40px -18px rgba(0,0,0,.8);color:#fff;font:600 12.5px/1.25 var(--body);white-space:nowrap}
.s-chip .ci{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(61,220,132,.16);color:var(--ok-dark);flex:none}
.s-chip .ci svg{width:14px;height:14px}
.s-chip small{display:block;font-size:11px;color:var(--dmuted);font-weight:500}
.s-chip.light{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line),0 20px 40px -20px rgba(11,26,43,.45)}
.s-chip.light small{color:var(--muted)}
.s-chip.light .ci{background:var(--accent-soft);color:var(--accent-text)}
/* Event log (lead tracking) */
.log{width:100%;max-width:340px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line),0 24px 44px -26px rgba(11,26,43,.4);padding:6px 14px;text-align:left}
.log-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.log-row:last-child{border-bottom:0}
.log-row .ok{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ok-soft);color:var(--ok)}
.log-row .ok .tick{width:12px;height:12px}
.log-row b{font-weight:650}
.log-row span{color:var(--muted)}
.log-row time{font:600 11.5px/1 var(--display);color:var(--faint);font-variant-numeric:tabular-nums}
/* Search results (local SEO example) */
.serp{width:100%;max-width:340px;text-align:left}
.serp-q{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 24px -16px rgba(11,26,43,.4);font-size:14px;color:var(--ink)}
.serp-q svg{width:16px;height:16px;color:var(--faint);flex:none}
.serp-list{margin-top:10px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.serp-item{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px}
.serp-item:last-child{border-bottom:0}
.serp-item .pin{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel);font:750 11px/1 var(--display);color:var(--muted)}
.serp-item b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-item small{color:var(--muted);font-size:11.5px}
.serp-item.you{background:linear-gradient(90deg,rgba(0,198,224,.1),rgba(0,134,245,.04))}
.serp-item.you .pin{background:var(--grad);color:var(--on-accent)}
.serp-item .bar{width:42px;height:6px;border-radius:6px;background:var(--line)}
/* Form-in-a-mockup (qualifying form example) */
.qform{width:100%;max-width:320px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 24px 44px -26px rgba(11,26,43,.45);padding:16px;text-align:left}
.qf-k{font:650 10.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.qf-opts{display:flex;flex-wrap:wrap;gap:6px}
.qf-opts span{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:12.5px;color:var(--ink)}
.qf-opts span.on{background:var(--ink);color:#fff;box-shadow:none}
.qf-step+.qf-step{margin-top:14px}
.qf-prog{display:flex;gap:4px;margin-bottom:14px}
.qf-prog i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.qf-prog i.on{background:var(--grad)}

/* ---------- 11. Hero stage (phone scene with floating cards) ---------- */
/* Scales as one piece with --s. Children are placed absolutely on desktop and stack on phones. */
.stage-wrap{--s:1;position:relative;height:calc(580px * var(--s) + 76px);min-width:0}
.stage{position:absolute;left:calc(50% + 6px * var(--s));top:0;width:660px;height:580px;transform:translateX(-50%) scale(var(--s));transform-origin:top center}
.stage .phone{position:absolute;left:206px;top:34px}
.stage-rings{position:absolute;left:328px;top:284px;width:0;height:0;pointer-events:none}
.stage-rings i{position:absolute;left:0;top:0;border-radius:50%;translate:-50% -50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.stage-rings i:nth-child(1){width:360px;height:360px}
.stage-rings i:nth-child(2){width:480px;height:480px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.stage-rings i:nth-child(3){width:600px;height:600px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.stage-orbit{position:absolute;left:328px;top:284px;width:480px;height:480px;translate:-50% -50%;pointer-events:none}
.stage-orbit svg{width:100%;height:100%;overflow:visible}
.ping{position:absolute;left:328px;top:284px;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(0,198,224,.55);opacity:0;pointer-events:none}
.stage .s-ad{position:absolute;left:10px;top:118px;width:214px;z-index:7;rotate:-3deg}
.stage .s-ad .ad-text{font-size:11.5px}
.stage .s-ad .ad-creative strong{font-size:27px}
.stage .s-ad .ad-foot,.ad-fan .ad-foot{padding:8px 10px;gap:6px}
.stage .s-ad .ad-foot p{font-size:9px;letter-spacing:-.01em}
.stage .s-panel{position:absolute;left:436px;top:66px;width:226px;z-index:7}
.stage .s-chip-pos{position:absolute;left:404px;top:502px;z-index:8}
.stage-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;font-size:.8rem;line-height:1.4;color:var(--dmuted);text-align:center}
.stage-cap .cap-t{width:100%}
.ap-t{display:inline-flex;align-items:center;gap:6px;font:650 12.5px/1.25 var(--body);color:#fff;text-align:right}
.ap-t .tick{width:12px;height:12px;color:var(--ok-dark)}
.ap-bar i{transition:transform 1.3s var(--ease-out) .55s}
.anim .s-panel:not(.on) .ap-bar i{transform:scaleX(0)}
.tap{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:rgba(0,134,245,.4);pointer-events:none;opacity:0}
.anim .tap.on{animation:tapPulse .9s var(--ease-out) both}
@keyframes tapPulse{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.9)}}
@media (max-width:1320px){.stage-wrap{--s:.92}}
@media (max-width:1200px){.stage-wrap{--s:.86}}
@media (max-width:1100px){.stage-wrap{--s:.8}}
@media (max-width:1040px){.stage-wrap{--s:.74}}
@media (min-width:981px) and (max-height:820px){.stage-wrap{--s:.84}}
@media (min-width:981px) and (max-height:740px){.stage-wrap{--s:.76}}
@media (max-width:980px){.stage-wrap{--s:.92;margin-top:12px}}
@media (max-width:760px){.stage-wrap{--s:.8}}
/* Phones: a cropped phone at readable size, cards flow beneath it */
@media (max-width:640px){
  .stage-wrap{height:auto;margin-top:34px}
  .stage{position:relative;left:auto;width:100%;height:auto;transform:none;display:flex;flex-direction:column;align-items:center}
  .stage .phone{--pw:min(290px,80vw);position:relative;left:auto;top:auto;height:calc(var(--pw) * 1.36);border-bottom-left-radius:0;border-bottom-right-radius:0;-webkit-mask-image:linear-gradient(#000 66%,transparent 96%);mask-image:linear-gradient(#000 66%,transparent 96%)}
  .stage .phone .lock-bottom,.stage .phone .home-bar,.stage .notif:nth-child(3n){display:none}
  .stage .s-ad,.stage-rings,.stage-orbit{display:none}
  .stage .s-panel{position:relative;left:auto;top:auto;width:100%;max-width:360px;margin-top:-30px;padding-bottom:34px}
  .stage .s-chip-pos{position:relative;left:auto;top:auto;margin-top:-20px;align-self:flex-end;margin-right:4px}
  .stage-cap{position:relative;margin-top:16px}
  .ping{left:50%;top:190px}
}
/* ---------- 12. Device showcase (laptop + phone) ---------- */
.devices{position:relative;display:flex;justify-content:center;margin-top:8px;padding-bottom:clamp(28px,5vw,64px)}
.devices .laptop{--lw:860px}
.devices .phone{--pw:clamp(118px,16vw,200px);position:absolute;right:max(0px,calc(50% - 470px));bottom:clamp(8px,2vw,24px);z-index:3}
.devices .phone-screen{background:#fff}
.dev-glow{position:absolute;inset:10% 5% 0;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(0,198,224,.25),transparent 72%);filter:blur(10px);pointer-events:none}
.float-chip{position:absolute;z-index:4}
.devices .float-chip.c1{left:max(0px,calc(50% - 560px));top:22%}
.devices .float-chip.c2{left:max(0px,calc(50% - 540px));top:76%}
.devices .float-chip.c3{right:max(0px,calc(50% - 560px));top:6%}
/* chips sit in the margin beside the laptop; below 1180px there is no margin, so they would cover the screenshot */
@media (max-width:1180px){.float-chip{display:none}}
@media (max-width:700px){.devices{justify-content:flex-start}.devices .laptop{width:84%}.devices .phone{--pw:clamp(104px,28vw,150px);right:0}}

/* ---------- 13. Plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);padding:30px 28px 30px;box-shadow:var(--sh-2);min-width:0;transition:transform .3s var(--ease-out),box-shadow .3s}
.plan-name{font-size:1.4rem;letter-spacing:-.025em}
.plan-tag{margin-top:6px;color:var(--muted);font-size:.98rem}
.price{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.p-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.p-main b{font:780 3rem/1 var(--display);font-stretch:112%;letter-spacing:-.04em}
.per{color:var(--muted);font-weight:550}
.p-note{margin-top:8px;font-size:.9rem;color:var(--muted)}
.plan .btn{margin-top:22px;width:100%}
.plan .ticks{margin-top:24px;font-size:.96rem}
.plan .ticks li::before{display:none}
.plan .ticks li{grid-template-columns:18px minmax(0,1fr)}
.plan .ticks .tick{margin-top:4px;color:var(--ok)}
.plan-badge{position:absolute;top:-13px;left:50%;translate:-50% 0;padding:6px 12px;border-radius:999px;background:var(--grad);color:var(--on-accent);font:750 .72rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(0,160,240,.8)}
.plan.pop{background:var(--night-2);color:var(--dtext);background-image:radial-gradient(120% 50% at 50% 0%,rgba(0,198,224,.2),transparent 62%);box-shadow:0 0 0 1.5px var(--accent),0 50px 90px -40px rgba(11,26,43,.75)}
.plan.pop .plan-tag,.plan.pop .per,.plan.pop .p-note{color:var(--dmuted)}
.plan.pop .price{border-color:var(--dline)}
.plan.pop .ticks{color:var(--dsoft)}
.plan.pop .ticks .tick{color:var(--accent-on-dark)}
@media (min-width:901px){.plan.pop{transform:translateY(-14px)}}
@media (hover:hover) and (pointer:fine){
  .plan:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
  .plan.pop:hover{box-shadow:0 0 0 1.5px var(--accent),0 60px 100px -40px rgba(11,26,43,.8)}
}
@media (min-width:901px) and (hover:hover) and (pointer:fine){.plan.pop:hover{transform:translateY(-18px)}}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto;gap:24px}.plan{padding:26px 22px}}
/* Footnote strip under the plans (trial, links to full pricing) */
.price-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 32px;margin-top:clamp(28px,4vw,44px);padding:22px 26px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-1)}
.price-foot p{color:var(--muted)}
.price-foot b{color:var(--ink)}
.price-foot .row{gap:0 18px}
@media (max-width:760px){.price-foot{grid-template-columns:minmax(0,1fr);padding:20px}}

/* ---------- 14. Quote / testimonial ---------- */
.quote{position:relative;font:750 clamp(1.5rem,1.05rem + 1.7vw,2.5rem)/1.16 var(--display);letter-spacing:-.028em;color:var(--ink);text-wrap:balance;margin:0}
.quote-mark{display:block;width:48px;height:36px;margin-bottom:18px;color:var(--accent)}
.attrib{display:flex;align-items:center;gap:14px;margin-top:26px}
.avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--grad);color:var(--on-accent);font:750 .95rem/1 var(--display);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);flex:none}
.attrib b{display:block;font-weight:650;color:var(--ink)}
.dark .attrib b,.sheet-dark .attrib b{color:#fff}
.attrib span:not(.avatar){font-size:.92rem;color:var(--muted)}

/* ---------- 15. Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:0}
.stat{display:flex;flex-direction:column;gap:6px;padding:4px clamp(14px,2vw,24px);border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{font:780 clamp(2rem,1.4rem + 2vw,3rem)/1 var(--display);font-stretch:112%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat span{font-size:.94rem;color:var(--muted);line-height:1.4}
.sheet-dark .stat,.dark .stat,.card-dark .stat{border-color:var(--dline)}
.sheet-dark .stat span,.dark .stat span,.card-dark .stat span{color:var(--dmuted)}
@media (max-width:560px){.stats{grid-template-columns:minmax(0,1fr)}.stat{border-left:0;padding:14px 0;border-top:1px solid var(--line)}.stat:first-child{border-top:0;padding-top:0}.sheet-dark .stat,.card-dark .stat{border-color:var(--dline)}}

/* ---------- 16. FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,6vw,88px)}
.faq-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px;align-self:start;position:sticky;top:calc(var(--nav-h) + 32px)}
.faq-list{border-top:2px solid var(--ink)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:clamp(16px,1.6vw,20px) 0;cursor:pointer;list-style:none;font:740 clamp(1.1rem,1rem + .4vw,1.3rem)/1.25 var(--display);letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--panel) no-repeat center;background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-size:12px 2px,2px 12px;box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease-out),background-color .2s}
.qa[open] summary::after{transform:rotate(45deg);background-color:var(--accent-soft)}
.qa-a{padding:0 48px 22px 0;color:var(--muted);max-width:64ch}
.qa-a p+p{margin-top:10px}
@media (hover:hover) and (pointer:fine){.qa summary:hover::after{background-color:#E6EEF4}}
@media (max-width:860px){.faq{grid-template-columns:minmax(0,1fr);gap:24px}.faq-side{position:static;gap:14px}.qa-a{padding-right:0;padding-bottom:18px}}
/* Smooth open/close where supported (Chrome 131+). Others open instantly. */
.qa::details-content{height:0;overflow:clip;transition:height .36s var(--ease-out),content-visibility .36s allow-discrete}
.qa[open]::details-content{height:auto}

/* ---------- 17. Forms ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:clamp(22px,3vw,32px);border-radius:var(--r-lg);background:#fff;color:var(--ink);box-shadow:var(--sh-2);--focus:var(--ink)}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-weight:650;font-size:.95rem}
.field label small{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:0 15px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink);font-size:1rem;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field textarea{min-height:120px;padding:13px 15px;resize:vertical;line-height:1.5}
.field select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%2353647A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/18px;padding-right:42px}
.field input::placeholder,.field textarea::placeholder{color:#6B7A8D;opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 4px rgba(0,134,245,.15)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#D2372C}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.form-msg{grid-column:1/-1;font-weight:600;font-size:.95rem}
.form-msg.ok{color:var(--ok-text)}
.form-msg.err{color:#B3261E}
.form-fine{font-size:.86rem;color:var(--muted)}
/* Shown only without JS: the form still posts to /api/contact, which answers with a plain confirmation */
.nojs-note{grid-column:1/-1;padding:12px 14px;border-radius:12px;background:var(--warn-soft);color:var(--warn-text);font-size:.94rem;line-height:1.5}
.nojs-note a{color:inherit;font-weight:650}
@media (max-width:560px){.form{grid-template-columns:minmax(0,1fr)}.form-foot .btn{width:100%}}

/* ---------- 18. Footer ---------- */
.footer{padding-block:clamp(48px,6vw,80px) clamp(28px,4vw,40px);color:var(--muted);font-size:.95rem;background:var(--white)}
.ft-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:40px clamp(32px,6vw,88px)}
.ft-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ft-brand .brand{color:var(--ink)}
.ft-brand p{max-width:36ch}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ft-h{font:650 .76rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.ft-cols a{display:flex;align-items:center;min-height:44px;padding-block:6px;line-height:1.3;color:var(--ink);font-weight:550;text-decoration:none;overflow-wrap:anywhere;transition:color .2s}
@media (hover:hover) and (pointer:fine){.ft-cols a:hover{color:var(--accent-text)}}
.ft-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:1px solid var(--line);font-size:.86rem}
@media (max-width:860px){.ft-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.ft-cols>div:last-child{grid-column:1/-1}}

/* ---------- 19. Sticky mobile CTA bar ---------- */
.mbar{display:none}
@media (max-width:820px){
  html.js .mbar{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(4,12,23,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--dline);transform:translateY(110%);visibility:hidden;transition:transform .32s var(--ease-out),visibility 0s linear .32s}
  html.js .mbar.on{transform:none;visibility:visible;transition:transform .32s var(--ease-out),visibility 0s}
  .mbar .btn{min-height:50px;padding:0 10px;font-size:.98rem}
  body.mbar-pad .footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}

/* ---------- 20. Motion ---------- */
/* 20a. Hero entrance: pure CSS, ends in the resting state. Add .enter and --d (delay). */
@media (prefers-reduced-motion:no-preference){
  .enter{animation:enterUp .9s var(--ease-out) both;animation-delay:var(--d,0ms)}
  .enter-fade{animation:enterFade 1s var(--ease-out) both;animation-delay:var(--d,0ms)}
  .enter-scale{animation:enterScale 1.1s var(--ease-out) both;animation-delay:var(--d,0ms)}
  .enter-words .w{display:inline-block;animation:enterWord .9s var(--ease-out) both;animation-delay:calc(var(--d,0ms) + var(--i,0) * 55ms)}
  .enter-words .hl{animation:enterWord .9s var(--ease-out) both,hlSweep .8s var(--ease-out) both;animation-delay:calc(var(--d,0ms) + var(--i,0) * 55ms),calc(var(--d,0ms) + var(--i,0) * 55ms + 420ms)}
  .hl.sweep{animation:hlSweep .8s var(--ease-out) both;animation-delay:var(--d,300ms)}
}
@keyframes enterUp{from{opacity:0;transform:translateY(22px)}}
@keyframes enterFade{from{opacity:0}}
@keyframes enterScale{from{opacity:0;transform:translateY(30px) scale(.94)}}
@keyframes enterWord{from{opacity:0;transform:translateY(.45em)}}
@keyframes hlSweep{from{background-size:0% .16em}}
.enter-words .w{white-space:nowrap}

/* 20b. Scroll reveal: elements are visible by default. JS adds .rv only to
   elements still below the fold, then .rv-in when they scroll into view. */
html.js .rv{opacity:0;transform:translateY(26px)}
html.js .rv[data-reveal="fade"]{transform:none}
html.js .rv[data-reveal="scale"]{transform:translateY(24px) scale(.96)}
html.js .rv[data-reveal="left"]{transform:translateX(-30px)}
html.js .rv[data-reveal="right"]{transform:translateX(30px)}
html.js .rv.rv-in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0ms)}

/* 20c. Parallax and tilt: JS writes --py / --rx / --ry. Separate properties so they compose. */
[data-parallax]{translate:0 var(--py,0px);will-change:translate}
[data-tilt]{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease-out);transform-style:preserve-3d}
[data-magnetic]{translate:var(--mx,0px) var(--my,0px);transition:translate .35s var(--ease-out),transform .26s var(--ease-out),box-shadow .26s var(--ease-out),background-color .2s,color .2s}

/* 20d. Marquee */
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:marquee var(--mq-t,42s) linear infinite}
  .marquee.is-off .marquee-track,.marquee:hover .marquee-track{animation-play-state:paused}
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* 20e. Scene player (data-scene): without .anim the scene is complete. */
.anim [data-at]{transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.anim [data-at]:not(.on){opacity:0;transform:translateY(-10px) scale(.98)}
.anim [data-at][data-from="left"]:not(.on){transform:translateX(-18px)}
.anim [data-at][data-from="right"]:not(.on){transform:translateX(18px)}
.anim [data-at][data-from="up"]:not(.on){transform:translateY(16px)}
.anim [data-at][data-from="pop"]:not(.on){transform:scale(.86)}
.anim.out [data-at]{opacity:0!important;transition:opacity .4s ease!important}
.anim .ping.on{animation:pingOut 1.6s var(--ease-out) both}
@keyframes pingOut{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.9)}}
.ping:not(.on){opacity:0}
.anim .phone-lock{transition:filter .5s}
.anim:not(.lit) .phone-lock{filter:brightness(.72)}
/* Scene variants: data-v="a|b|c" on the scene root shows only children tagged data-variant="a", "b" or "c" */
[data-v="a"] [data-variant]:not([data-variant~="a"]),[data-v="b"] [data-variant]:not([data-variant~="b"]),[data-v="c"] [data-variant]:not([data-variant~="c"]){display:none!important}
.orbit-spin{transform-box:view-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){.orbit-spin{animation:spin 40s linear infinite}.is-off .orbit-spin{animation-play-state:paused}}
@keyframes spin{to{transform:rotate(360deg)}}
.scene-btns{display:inline-flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--dline-2)}
.scene-btns button{min-height:36px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:var(--dmuted);font:600 .8rem/1 var(--body);cursor:pointer;transition:background-color .25s,color .25s;position:relative}
.scene-btns button::before{content:"";position:absolute;inset:-4px 0}
.scene-btns button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.motion-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;font:600 .8rem/1 var(--body);color:var(--dmuted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
@media (hover:hover) and (pointer:fine){.motion-btn:hover{color:#fff}}
html:not(.js) .motion-btn,html:not(.js) .scene-btns{display:none}

/* 20f. Progress line that fills as a section scrolls (JS writes --p 0..1) */
.progress-line{position:relative;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.progress-line i{position:absolute;inset:0;background:var(--grad);transform:scaleX(var(--p,1));transform-origin:left}
html.js .progress-line i{transform:scaleX(var(--p,0))}

/* 20g. Reduced motion: everything rests, nothing loops */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js .rv{opacity:1;transform:none}
  [data-parallax]{translate:none}
  [data-tilt]{transform:none}
  [data-magnetic]{translate:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{width:auto;justify-content:center}
  .marquee-group{flex-wrap:wrap;justify-content:center;row-gap:16px;padding-right:0;flex:1}
  .marquee-group[aria-hidden="true"]{display:none}
  html.js .shot{overflow-y:auto}
  html.js .shot img{position:relative;animation:none!important}
  .motion-btn{display:none}
  .dot-live{animation:none}
}

/* ---------- 21. Page sections (shared by home, remap and construction pages) ---------- */
.hl-wrap{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* 21a. Audience split: two cards, each with a visual window */
.aud-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.aud{padding:12px;gap:0}
.aud .card-vis{min-height:320px}
.aud-body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px clamp(10px,1.6vw,20px) 12px}
.aud-pills{display:flex;flex-wrap:wrap;gap:8px}
.aud .ticks{font-size:.98rem;color:var(--muted)}
.trades{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:860px){.aud-grid{grid-template-columns:minmax(0,1fr)}}

/* 21b. Add-ons (compact, secondary: never a main section) */
.addons{width:100%;margin-top:6px;padding:14px 16px 8px;border-radius:var(--r-md);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.addons-k{font:650 .74rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.addon{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.addons-k+.addon{border-top:0}
.addon-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--accent-text)}
.addon-ic svg{width:18px;height:18px}
.addon b{display:block;font-weight:650;font-size:.97rem;line-height:1.3}
.addon p{font-size:.88rem;color:var(--muted);line-height:1.45;margin-top:2px}
.addon-n{font:750 .9rem/1 var(--display);color:var(--ink)}
.addon:not(:has(.addon-p)){grid-template-columns:36px minmax(0,1fr)}
.addon-p{font:760 1rem/1.2 var(--display);white-space:nowrap;color:var(--ink);padding-top:1px;text-align:right}
.addon-p small{display:block;font:550 .74rem/1.2 var(--body);color:var(--muted)}
.addons .text-link{min-height:44px;font-size:.94rem}
@media (max-width:420px){.addon:has(.addon-p){grid-template-columns:minmax(0,1fr) auto}.addon:has(.addon-p) .addon-ic{display:none}.addon{gap:10px}.addon-n{width:30px;height:30px}}

/* 21b2. Add-on cards: the short two-card "Add-ons for remap shops" section (remap and pricing pages).
   Each page sizes its own .ao .card-vis for its mockup. */
.ao-head .h2{font-size:clamp(1.8rem,1.1rem + 1.8vw,2.6rem)}
.ao-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ao{padding:12px;gap:0}
.ao-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 14px 12px}
.ao-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%}
.ao-price{font:780 1.65rem/1 var(--display);font-stretch:110%;letter-spacing:-.035em;white-space:nowrap;text-align:right}
.ao-price small{display:block;margin-top:3px;font:550 .8rem/1.2 var(--body);letter-spacing:0;color:var(--muted)}
.ao-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px}
@media (max-width:860px){.ao-grid{grid-template-columns:minmax(0,1fr)}}

/* 21c. Bento of service cards */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bento>.card{padding:12px;gap:0}
.bento-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 16px 14px}
.bento-body .body{font-size:1rem}
.bento .card-vis{min-height:260px}
@media (max-width:760px){.bento{grid-template-columns:minmax(0,1fr)}}
/* side by side, cards in a row share the mockup height so their headings line up (needs exactly 2 children: .card-vis + .bento-body) */
@media (min-width:761px){@supports (grid-template-rows:subgrid){.bento>.card{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}}}
.ad-fan{position:relative;width:100%;height:250px;margin-bottom:-20px}
.ad-fan .ad-card{position:absolute;left:50%;top:24px;width:188px;font-size:11.5px}
.ad-fan .ad-card .ad-creative strong{font-size:25px}
.ad-fan .ad-foot p{display:none}
.ad-fan .ad-card:first-child{translate:-104% 22px;rotate:-6deg}
.ad-fan .ad-card:last-child{translate:-4% 0;rotate:4deg}
@media (max-width:420px){.ad-fan .ad-card{width:160px}.ad-fan .ad-card .ad-creative strong{font-size:21px}.ad-fan .ad-art{display:none}.ad-fan .ad-btn{display:none}}
.vis-chips{position:absolute;inset:auto 12px 12px auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
@media (max-width:600px){.vis-chips{gap:5px;inset:auto 8px 8px auto}.vis-chips .s-chip{padding:5px 10px 5px 5px;font-size:11.5px;gap:7px}.vis-chips .s-chip .ci{width:22px;height:22px}.vis-chips .s-chip .ci svg{width:12px;height:12px}}

/* 21d. Device showcase copy */
.built{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 24px;margin-top:clamp(28px,4vw,48px)}
.built li{display:flex;flex-direction:column;gap:6px;padding:20px 0 6px;border-top:1px solid var(--dline-2)}
.built .card-ic{width:36px;height:36px;border-radius:10px;margin-bottom:4px}
.built .card-ic svg{width:18px;height:18px}
.built b{font-weight:650;color:#fff;line-height:1.3}
.built span{font-size:.9rem;color:var(--dmuted);line-height:1.45}
@media (max-width:600px){.built li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 14px;padding:16px 0}.built .card-ic{grid-row:span 2;margin:0}}
.work-intro{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mw-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin:clamp(56px,7vw,96px) 0 24px;padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--dline)}
.web-vis{padding:18px 18px 0;place-items:end center}
.web-vis .browser{width:100%;max-width:440px;border-bottom-left-radius:0;border-bottom-right-radius:0}
.web-vis .browser img{display:block;width:100%;height:auto}

/* 21e. Case cards (on a dark sheet) */
.cases{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:16px}
.case{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px;border-radius:var(--r-md);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--dline-2);min-width:0;transition:background-color .25s,box-shadow .25s,transform .3s var(--ease-out)}
.case h3,.case h4{font-size:1.16rem;letter-spacing:-.02em;color:#fff}
.case p{font-size:.94rem;color:var(--dsoft);line-height:1.5}
.case .text-link{margin-top:auto;min-height:44px;font-size:.92rem}
.case-feature{grid-row:span 3;padding:clamp(22px,2.4vw,30px);background:radial-gradient(120% 70% at 0% 0%,rgba(0,198,224,.16),transparent 60%),rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(79,216,238,.28)}
.case-feature h3,.case-feature h4{font-size:clamp(1.4rem,1.2rem + .6vw,1.75rem)}
@media (min-width:1001px){.case-feature .kpis li{padding:18px 0}.case-feature .kpis b{font-size:clamp(2.4rem,1.6rem + 1.4vw,3.2rem)}}
.kpis{width:100%;margin-block:auto 4px;padding-top:10px}
.kpis li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--dline)}
.kpis li:last-child{border-bottom:1px solid var(--dline)}
.kpis b{font:780 clamp(1.9rem,1.5rem + 1vw,2.5rem)/1 var(--display);font-stretch:112%;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.kpis b.accent{color:var(--accent-on-dark)}
.kpis span{font-size:.92rem;color:var(--dmuted);text-align:right}
@media (hover:hover) and (pointer:fine){.case:hover{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(79,216,238,.4);transform:translateY(-3px)}}
@media (max-width:1000px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}.case-feature{grid-row:auto;grid-column:1/-1}}
@media (max-width:600px){.cases{grid-template-columns:minmax(0,1fr)}}

/* 21f. "How it works" with a vertical timeline that fills on scroll (put data-progress on .vtl) */
.how{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:start}
.how-side{position:sticky;top:calc(var(--nav-h) + 40px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.vtl{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:46px}
.vtl::before,.vtl::after{content:"";position:absolute;left:15px;top:22px;bottom:22px;width:2px;border-radius:2px;background:var(--line)}
.vtl::after{background:var(--grad);transform-origin:top;transform:scaleY(var(--p,1))}
html.js .vtl::after{transform:scaleY(var(--p,0))}
.vtl>li{position:relative;padding:20px 22px 22px;border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-2)}
.vtl>li::before{content:"";position:absolute;left:-39px;top:24px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--accent),0 0 0 5px var(--white)}
.band-soft .vtl>li::before{box-shadow:inset 0 0 0 3px var(--accent),0 0 0 5px var(--panel)}
.vtl h3{margin-top:12px}
.vtl p{margin-top:6px;color:var(--muted);font-size:.98rem}
@media (max-width:900px){.how{grid-template-columns:minmax(0,1fr)}.how-side{position:static}}
@media (max-width:420px){.vtl{padding-left:34px}.vtl::before,.vtl::after{left:9px}.vtl>li::before{left:-32px}.vtl>li{padding:18px}}

/* 21g. The deal / risk reversal */
.deal{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,80px);align-items:center}
.deal-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.deal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.deal-grid li{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-md);background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--dline-2)}
.deal-grid .card-ic{width:40px;height:40px;margin-bottom:6px}
.deal-grid b{font:740 1.08rem/1.25 var(--display);letter-spacing:-.015em;color:#fff}
.deal-grid span{font-size:.94rem;color:var(--dsoft);line-height:1.5}
.deal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;width:100%}
.seal{position:relative;width:148px;height:148px;flex:none;margin:-18px -10px 0 0}
.seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seal text{font:700 9.6px var(--body);letter-spacing:.2em;text-transform:uppercase;fill:var(--dsoft)}
.seal-core{position:absolute;inset:27px;display:grid;place-items:center;align-content:center;border-radius:50%;background:var(--grad);color:var(--on-accent);text-align:center;box-shadow:0 18px 40px -16px rgba(0,160,240,.8),inset 0 1px 0 rgba(255,255,255,.4)}
.seal-core b{font:850 .9rem/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.seal-core small{font:700 .62rem/1.1 var(--body);letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
@media (max-width:900px){.deal{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.deal-grid{grid-template-columns:minmax(0,1fr)}.deal-grid li{padding:18px}.seal{width:118px;height:118px;margin:-10px -6px 0 0}.seal-core{inset:24px}.seal-core b{font-size:.76rem}.seal-core small{font-size:.56rem}}

/* 21h. Testimonial */
.testi{max-width:1000px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.testi .quote{font-size:clamp(1.65rem,1.1rem + 2.2vw,3rem);line-height:1.12}
.testi .attrib{justify-content:center;text-align:left}
.testi-wrap{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.testi-wrap::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:2;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,198,224,.1),transparent 70%);z-index:-1}

/* 21i. Final CTA sheet */
.cta-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,80px);align-items:center}
.cta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cta-steps{display:flex;flex-direction:column;margin-top:6px;border-top:1px solid var(--dline);width:100%}
.cta-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding:15px 0;border-bottom:1px solid var(--dline);color:var(--dsoft)}
.cta-steps i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(0,198,224,.14);color:var(--accent-on-dark);font:750 .8rem/1 var(--display);font-style:normal}
.cta-card{gap:12px;padding:clamp(24px,3vw,36px)}
.cta-card .h3{margin-bottom:4px}
.contact-list{display:grid;margin:10px 0 0;border-top:1px solid var(--line)}
.contact-list div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;border-bottom:1px solid var(--line);font-size:.95rem}
.contact-list dt{color:var(--muted)}
.contact-list dd{margin:0;font-weight:650;text-align:right;overflow-wrap:anywhere;min-width:0}
.contact-list a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
@media (hover:hover) and (pointer:fine){.contact-list a:hover{color:var(--accent-text)}}
@media (max-width:900px){.cta-grid{grid-template-columns:minmax(0,1fr)}}

/* 22. Gains calculator add-on (remap, services, pricing).
   .gc is a data-scene: without JS, with reduced motion or when paused it shows the finished state
   (gains results on the front of the card, and the WhatsApp enquiry). The back of the card (the short
   booking form) only shows while the animation plays. All figures in the demo are labelled examples. */
.gc{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);padding:48px clamp(14px,2.4vw,30px) 12px;background:radial-gradient(90% 70% at 85% 0%,rgba(0,198,224,.22),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(0,134,245,.16),transparent 65%),var(--night-1);box-shadow:inset 0 0 0 1px var(--dline-2),var(--sh-dark);color:var(--dtext);container-type:inline-size}
.gc::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;-webkit-mask:radial-gradient(80% 70% at 50% 40%,#000,transparent);mask:radial-gradient(80% 70% at 50% 40%,#000,transparent)}
.gc-tag{position:absolute;top:12px;right:14px;z-index:3;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--dline-2);font:700 .68rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--dsoft)}
.gc-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.gc-site{width:100%;max-width:372px;border-radius:16px;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 40px 70px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);text-align:left}
.gc-site .browser-bar{height:28px}
.gc-url{flex:1;min-width:0;height:18px;padding:0 9px;border-radius:6px;background:#fff;font:600 10.5px/18px var(--body);color:#6B7787;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-persp{perspective:1400px;padding:14px}
.gc-card{display:grid;transform-style:preserve-3d;transition:none}
.gc-face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;min-width:0}
.gc-back{transform:rotateY(180deg)}
.gc:not(.anim) .gc-back{display:none}
.gc.anim:has(.gc-flipmark.on) .gc-card{transform:rotateY(180deg);transition:transform .9s var(--ease-io)}
.gc-flipmark{position:absolute;left:0;top:0;display:block;width:1px;height:1px;opacity:0;pointer-events:none}
.gc-k{display:flex;align-items:center;gap:9px;font:750 14px/1.2 var(--display);letter-spacing:-.015em}
.gc-k .ci{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--grad);color:#fff;flex:none}
.gc-k .ci svg{width:16px;height:16px}
.gc-in{display:flex;gap:8px;margin-top:12px}
.gc-plate{position:relative;flex:1;min-width:0;display:flex;align-items:stretch;height:46px;border-radius:9px;overflow:hidden;background:#FFD43B;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.3);font:800 22px/46px var(--display);font-stretch:92%;letter-spacing:.07em;color:#111;white-space:nowrap}
.gc-plate>i{display:grid;place-items:end center;width:28px;padding-bottom:6px;background:#1F4CC0;color:#fff;font:700 9px/1 var(--body);font-style:normal;letter-spacing:.02em;flex:none}
.gc-ph{position:absolute;left:40px;top:0;font-size:15px;letter-spacing:.14em;color:rgba(17,17,17,.36);display:none}
.gc-chars{position:relative;padding-left:12px}
.gc-chars span{display:inline-block;min-width:.2em}
.gc-caret{display:none;align-self:center;width:2px;height:24px;margin-left:2px;background:#111}
.anim .gc-ph{display:block;transition:opacity .2s}
.anim .gc-plate:has(.gc-chars .on) .gc-ph{opacity:0}
.anim .gc-chars [data-at]{transition:none}
.anim .gc-chars [data-at]:not(.on){opacity:0;transform:none}
@media (prefers-reduced-motion:no-preference){.anim .gc-caret{display:block;animation:gcBlink 1s steps(1) infinite}.anim:has(.gc-car.on) .gc-caret{display:none}}
@keyframes gcBlink{50%{opacity:0}}
.gc-go{position:relative;display:grid;place-items:center;padding:0 16px;border-radius:9px;background:var(--grad-btn);color:var(--on-accent);font:750 14px/1 var(--body);box-shadow:0 10px 22px -12px rgba(0,134,245,.9);flex:none}
.gc-car{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:12px;padding:10px 12px;border-radius:11px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.gc-car b{font:760 15px/1.2 var(--display);letter-spacing:-.015em}
.gc-car small{width:100%;font-size:11.5px;color:var(--muted)}
.gc-ex{font:700 9.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border-radius:5px;background:var(--warn-soft);color:var(--warn-text)}
.gc-figs{display:grid;gap:10px;margin-top:10px}
.gc-grp{padding:10px 12px 8px;border-radius:11px;box-shadow:inset 0 0 0 1px var(--line)}
.gc-gk{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;font:700 10px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.gc-gk span{letter-spacing:.04em;text-transform:none;font-weight:600}
.gc-row{display:grid;grid-template-columns:52px minmax(0,1fr) 38px 42px;align-items:center;gap:8px;min-height:24px}
.gc-l{font:650 11px/1 var(--body);color:var(--muted);white-space:nowrap}
.gc-bar{position:relative;height:8px;border-radius:8px;background:#EAF0F5;overflow:hidden}
.gc-bar i{position:absolute;inset:0;border-radius:inherit;background:#B8C5D3;transform-origin:left;transform:scaleX(var(--w,1));transition:transform 1.1s var(--ease-out)}
.gc-row.s1 .gc-bar i{background:linear-gradient(90deg,#4FD8EE,#00B8D9)}
.gc-row.s2 .gc-bar i{background:var(--grad)}
.anim .gc-row:not(.on) .gc-bar i{transform:scaleX(0)}
.gc-row b{font:780 14px/1 var(--display);font-variant-numeric:tabular-nums;text-align:right;letter-spacing:-.02em}
.gc-row em{justify-self:end;font:700 10px/1 var(--body);font-style:normal;padding:3px 5px;border-radius:5px;background:var(--ok-soft);color:var(--ok-text);font-variant-numeric:tabular-nums}
.gc-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:42px;margin-top:12px;border-radius:999px;background:var(--ink);color:#fff;font:700 13px/1 var(--body)}
.gc-back .gc-sum{margin-top:10px;padding:9px 11px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font:650 11.5px/1.4 var(--body)}
.gc-fields{display:grid;gap:8px;margin-top:10px}
.gc-f{display:flex;flex-direction:column;gap:4px}
.gc-f small{font:650 10px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gc-f span{display:flex;align-items:center;min-height:38px;padding:0 11px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font:550 13px/1.2 var(--body)}
.gc-f span b{font-weight:600}
.anim .gc-f [data-at]{transition:opacity .25s}
.anim .gc-f [data-at]:not(.on){transform:none}
.gc-chips{display:flex;gap:6px}
.gc-chips i{flex:1;display:grid;place-items:center;min-height:34px;border-radius:9px;font:650 12px/1 var(--body);font-style:normal;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--muted)}
.gc-chips i.sel{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.gc-send{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:42px;margin-top:12px;border-radius:999px;background:var(--wa);color:#04210F;font:700 13px/1 var(--body)}
.gc-send svg{width:16px;height:16px}
.gc-fine{margin-top:8px;font-size:11px;line-height:1.4;color:var(--muted);text-align:center}
.gc-sent{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:inherit;background:#12A05F;color:#fff}
.gc:not(.anim) .gc-sent{display:none}
/* WhatsApp message preview */
.gc-wa{position:relative;z-index:2;width:100%;max-width:330px;border-radius:18px;overflow:hidden;background:#0B141A;box-shadow:0 34px 60px -26px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.1);text-align:left}
.gc-wa-h{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#1F2C34;color:#E9EDEF}
.gc-wa-h .app{width:28px;height:28px;border-radius:50%}
.gc-wa-h .app svg{width:16px;height:16px}
.gc-wa-h b{display:block;font:650 13px/1.2 var(--body)}
.gc-wa-h small{display:block;font-size:11px;color:#8696A0}
.gc-wa-h time{margin-left:auto;font-size:11px;color:#8696A0}
.gc-wa-body{padding:12px 12px 14px;background:#0B141A radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/14px 14px}
.gc-msg{position:relative;max-width:94%;padding:9px 11px 18px;border-radius:4px 12px 12px 12px;background:#202C33;color:#E9EDEF;font:400 12.5px/1.45 var(--body)}
.gc-msg p+p{margin-top:3px}
.gc-msg b{font-weight:650;color:#fff}
.gc-msg .k{display:block;margin-bottom:4px;font:700 10.5px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#53BDEB}
.gc-msg .fig{color:#25D366;font-weight:650}
.gc-msg time{position:absolute;right:9px;bottom:5px;font-size:10px;color:#8696A0}
.gc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 14px;margin-top:12px;padding-top:4px}
.gc-foot .caption{color:var(--dmuted);max-width:52ch}
@container (min-width:560px){
  .gc-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);align-items:end;gap:0}
  .gc-site{justify-self:end;max-width:360px}
  .gc-wa{margin:0 0 30px -44px;max-width:290px}
}
@container (max-width:340px){
  .gc-persp{padding:12px 10px}
  .gc-row{grid-template-columns:46px minmax(0,1fr) 34px 38px;gap:6px}
  .gc-plate{font-size:19px}
  .gc-go{padding:0 12px}
}

/* Gains feature layout (copy beside the demo) */
.gcx{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,72px);align-items:center}
.gcx-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.gcx-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.gcx-price b{font:800 clamp(2.4rem,1.9rem + 1.6vw,3.2rem)/1 var(--display);font-stretch:112%;letter-spacing:-.045em}
.gcx-price span{font-size:.95rem;color:var(--muted)}
.gcx-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.gcx-steps{display:grid;gap:0;width:100%;border-top:1px solid var(--line)}
.gcx-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.gcx-steps i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff;font:750 .9rem/1 var(--display);font-style:normal}
.gcx-steps b{display:block;font-weight:650;line-height:1.3}
.gcx-steps p{margin-top:2px;font-size:.94rem;color:var(--muted);line-height:1.5}
.gcx-live{display:inline-flex;align-items:center;gap:10px;font-size:.94rem;color:var(--muted)}
.gcx-live .text-link{min-height:44px}
@media (max-width:980px){.gcx{grid-template-columns:minmax(0,1fr)}}
.gcx-h{font-size:clamp(1.9rem,1.2rem + 1.9vw,2.8rem)}
.gcx-note{font-size:.94rem;font-weight:600;color:var(--ink)}
.gcx-live{display:block;font-size:.92rem;color:var(--muted)}
.gcx-live .ext{vertical-align:-3px;color:var(--accent-text)}
.gcx-bk{margin-top:clamp(28px,4vw,44px);background:#fff;box-shadow:var(--sh-1)}
.gcx-bk .addon{border-top:0}