/* ============================================================
   The Garcia Studio v3 master sales site. Premium electric showroom.
   Mobile-first. Vanilla CSS. No build tools, no dependencies.
   Breakpoints: 380 baseline, 768, 1200.
   ============================================================ */

:root {
  /* color (legacy v3 aliases, re-pointed to gw-* tokens; final values set at :root override below) */
  --cloud:var(--gw-cloud); --bone:var(--gw-cream); --surface:var(--gw-surface); --ink:var(--gw-ink);
  --charcoal:var(--gw-charcoal); --muted:var(--gw-muted); --border:var(--gw-border-light);
  --cobalt:var(--gw-cobalt); --cobalt-hover:var(--gw-cobalt-hover); --lime:var(--gw-lime); --violet:var(--gw-violet);
  --coral:var(--gw-coral); --cyan:var(--gw-cyan); --pink:var(--gw-violet); --live:var(--gw-success);

  /* gradients */
  --gradient-electric:var(--gw-gradient-electric);
  --gradient-lime:var(--gw-gradient-lime);
  --gradient-charcoal:linear-gradient(180deg,var(--gw-charcoal) 0%,var(--gw-black) 100%);
  --gradient-card:linear-gradient(135deg,rgba(255,255,255,0.95),rgba(250,248,240,0.85));

  /* type */
  --font-display:'Inter Tight','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:'Instrument Serif','Noto Serif Thai',Georgia,serif;
  --font-mono:'JetBrains Mono','Noto Sans Thai','SF Mono',Monaco,'Courier New',monospace;
  --fs-hero:clamp(2.75rem,6vw + 1rem,6.75rem);
  --fs-h1:clamp(2.25rem,4vw + 1rem,4.5rem);
  --fs-h2:clamp(1.75rem,3vw + 0.75rem,3.5rem);
  --fs-h3:clamp(1.25rem,1.5vw + 0.5rem,1.85rem);
  --fs-body:clamp(1rem,0.5vw + 0.875rem,1.125rem);
  --fs-small:0.875rem;
  --fs-price:clamp(3rem,5vw + 1rem,5.5rem);

  /* space */
  --space-xs:0.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem;
  --space-xl:4rem; --space-2xl:6rem; --space-3xl:8rem;
  --max-width:1200px;
  --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px;

  /* shadow */
  --shadow-sm:0 2px 8px rgba(7,7,11,.04);
  --shadow-md:0 8px 24px rgba(7,7,11,.08);
  --shadow-lg:0 20px 60px rgba(7,7,11,.12);
  --shadow-xl:0 30px 90px rgba(7,7,11,.18);
  --shadow-electric:0 30px 80px -20px rgba(124,61,255,.35);
  --shadow-cobalt:0 0 40px rgba(37,87,255,.35);
  --shadow-cyan:0 0 60px rgba(94,231,255,.28);
  --shadow-pink:0 0 70px rgba(255,79,216,.22);

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --duration-fast:150ms; --duration-base:300ms; --duration-slow:500ms;
}

/* ============================================================
   V7 ELECTRIC PALETTE. New tokens + aliases that keep existing
   CSS working (do not rename existing tokens above).
   ============================================================ */
:root{
--gw-black:#05070D;--gw-charcoal:#080B14;--gw-midnight:#0D1020;--gw-panel:#101426;--gw-panel-soft:#151A2E;
--gw-cloud:#F8F6EF;--gw-cream:#EFE8DA;--gw-surface:#FFFFFF;--gw-surface-soft:#F4F1EA;
--gw-text:#F7F4EC;--gw-text-soft:#D8DBE8;--gw-text-muted:#9EA4B8;
--gw-ink:#080A12;--gw-ink-soft:#303441;--gw-muted:#666A75;
--gw-cobalt:#1557FF;--gw-cobalt-bright:#2563FF;--gw-cobalt-hover:#0E45D8;
--gw-lime:#B7FF2A;--gw-lime-soft:#D7FF73;--gw-violet:#6D35FF;--gw-purple:#3B1D84;--gw-cyan:#42D9FF;
--gw-success:#00C16A;--gw-coral:#FF5C2E;--gw-warning:#FCD34D;
--gw-border-dark:rgba(255,255,255,.12);--gw-border-soft:rgba(255,255,255,.08);--gw-border-light:#E3D8C7;
--gw-gradient-hero:radial-gradient(circle at 68% 30%,rgba(109,53,255,.42),transparent 34%),radial-gradient(circle at 82% 62%,rgba(21,87,255,.28),transparent 30%),linear-gradient(180deg,#080B14 0%,#05070D 100%);
--gw-gradient-card:linear-gradient(135deg,rgba(21,87,255,.18) 0%,rgba(109,53,255,.16) 55%,rgba(183,255,42,.06) 100%);
--gw-gradient-electric:linear-gradient(135deg,#1557FF 0%,#6D35FF 58%,#42D9FF 100%);
--gw-gradient-lime:linear-gradient(135deg,#B7FF2A 0%,#42D9FF 100%);
--gw-shadow-soft:0 10px 30px rgba(0,0,0,.22);--gw-shadow-deep:0 30px 90px rgba(0,0,0,.42);
--gw-glow-cobalt:0 0 42px rgba(21,87,255,.42);--gw-glow-violet:0 0 70px rgba(109,53,255,.38);--gw-glow-lime:0 0 28px rgba(183,255,42,.26);
--ink:var(--gw-ink);--charcoal:var(--gw-charcoal);--cobalt:var(--gw-cobalt);--cobalt-hover:var(--gw-cobalt-hover);--lime:var(--gw-lime);--violet:var(--gw-violet);--cloud:var(--gw-cloud);--bone:var(--gw-cream);--surface:var(--gw-surface);--muted:var(--gw-muted);--border:var(--gw-border-light);
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
body {
  font-family:var(--font-display); font-size:var(--fs-body); font-weight:400;
  line-height:1.6; color:var(--ink); background:var(--cloud);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
/* global ambient depth */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 15% 10%,rgba(37,87,255,.08),transparent 28%),
    radial-gradient(circle at 85% 20%,rgba(255,79,216,.08),transparent 26%),
    radial-gradient(circle at 50% 80%,rgba(183,255,42,.06),transparent 30%);
}
img,svg,iframe { display:block; max-width:100%; }
a { color:var(--cobalt); text-decoration:none; }
a:hover { color:var(--cobalt-hover); }
ul { list-style:none; }
:focus-visible { outline:2px solid var(--cobalt); outline-offset:4px; border-radius:3px; }

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cobalt); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus { left:0; color:#fff; }

.mono { font-family:var(--font-mono); }

/* ---------- layout ---------- */
.wrap { width:100%; max-width:var(--max-width); margin-inline:auto; padding-inline:var(--space-md); }
.wrap--narrow { max-width:820px; }
.section { padding-block:var(--space-2xl); }
.section--bone { background:var(--bone); }
.section--charcoal { background:var(--gradient-charcoal); color:var(--cloud); }
.section--charcoal .section-sub { color:rgba(250,248,240,.7); }

/* ---------- typography ---------- */
h1,h2 { font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em; line-height:1.02; }
h1 { font-size:var(--fs-h1); }
h2 { font-size:var(--fs-h2); margin-bottom:var(--space-lg); }
h3 { font-family:var(--font-display); font-size:var(--fs-h3); font-weight:600; letter-spacing:-0.01em; line-height:1.15; }
p { line-height:1.6; }

/* italic emphasis: Instrument Serif italic (no underline) */
h1 em, h2 em, h3 em {
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  letter-spacing:0; display:inline-block; white-space:nowrap;
}

.eyebrow {
  font-family:var(--font-mono); font-size:var(--fs-small); font-weight:500;
  text-transform:uppercase; letter-spacing:0.14em; color:var(--cobalt);
  margin-bottom:var(--space-sm);
}
.eyebrow--violet { color:var(--violet); }
.section-sub { color:var(--muted); max-width:60ch; margin-top:calc(var(--space-lg) * -0.5); margin-bottom:var(--space-lg); }

/* ---------- buttons ---------- */
.btn {
  position:relative; display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  padding:.9rem 1.6rem; border-radius:var(--radius-sm); border:none; cursor:pointer;
  transition:transform var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease), background var(--duration-fast) var(--ease);
  text-align:center; overflow:hidden;
}
.btn--cobalt { background:var(--cobalt); color:#fff; }
.btn--cobalt::before {
  content:""; position:absolute; inset:0; background:var(--gradient-electric);
  opacity:0; transition:opacity var(--duration-base) var(--ease); z-index:0;
}
.btn--cobalt > * { position:relative; z-index:1; }
.btn--cobalt:hover { color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-cobalt); }
.btn--cobalt:hover::before { opacity:1; }
.btn--text { background:transparent; color:var(--cobalt); padding-inline:.25rem; }
.btn--text span { transition:transform var(--duration-fast) var(--ease); }
.btn--text:hover { color:var(--cobalt-hover); }
.btn--text:hover span { transform:translateX(4px); }
.btn--sm { padding:.55rem 1rem; font-size:var(--fs-small); min-height:44px; }
.btn--block { display:flex; width:100%; }

/* ---------- pills + badges + dots ---------- */
.pill {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:var(--fs-small); font-weight:500;
  padding:.4rem .85rem; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); width:fit-content;
}
.pill--coral { background:rgba(255,92,46,.1); border-color:rgba(255,92,46,.3); color:var(--coral); }
.pill--neutral { background:var(--bone); color:var(--muted); border-color:var(--border); }
.pill--check { background:var(--lime); color:var(--ink); border-color:var(--lime); font-weight:700; }

.dot { width:8px; height:8px; border-radius:50%; flex:none; }
.dot--live { background:var(--live); box-shadow:0 0 0 0 rgba(0,193,106,.6); animation:pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(0,193,106,.5); }
  70% { box-shadow:0 0 0 7px rgba(0,193,106,0); }
  100% { box-shadow:0 0 0 0 rgba(0,193,106,0); }
}

.badge {
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; padding:.3rem .65rem; border-radius:6px;
}
.badge--live { background:var(--gw-lime); color:var(--gw-ink); }
.badge--live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--gw-ink); animation:pulse-ink 2s infinite; }
@keyframes pulse-ink {
  0% { box-shadow:0 0 0 0 rgba(8,10,18,.55); }
  70% { box-shadow:0 0 0 6px rgba(8,10,18,0); }
  100% { box-shadow:0 0 0 0 rgba(8,10,18,0); }
}
.badge--concept { background:var(--violet); color:#fff; }
.badge--popular {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--violet); color:#fff; box-shadow:0 8px 24px rgba(124,61,255,.4);
  z-index:3;
}

/* ---------- reveal ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity:1; transform:none; }

/* ---------- nav ---------- */
.nav {
  position:sticky; top:0; z-index:100; background:rgba(250,248,240,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border);
}
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav__brand { font-weight:700; font-size:1.25rem; letter-spacing:-0.03em; color:var(--ink); }
.nav__brand:hover { color:var(--ink); }
.nav__links { display:flex; align-items:center; gap:var(--space-md); }
.nav__links a { color:var(--charcoal); font-weight:500; }
.nav__links a.btn { color:#fff; }
.nav__links a:not(.btn):hover { color:var(--cobalt); }
.nav__toggle {
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px; min-width:48px; min-height:48px;
}
.nav__toggle span { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:var(--duration-fast); }

/* ---------- S1 HERO ---------- */
.hero { padding-top:var(--space-xl); padding-bottom:var(--space-2xl); }
.hero__grid { display:grid; gap:var(--space-xl); align-items:center; }
.hero__copy { min-width:0; }
.hero__h1 { font-size:var(--fs-hero); margin:var(--space-md) 0; line-height:0.98; letter-spacing:-0.03em; }
.hero__h1 em { white-space:nowrap; }
.hero__sub { font-size:1.15rem; color:var(--muted); max-width:52ch; margin-bottom:var(--space-lg); }
.hero__cta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-md); margin-bottom:var(--space-lg); }
.hero__trust { font-size:.78rem; color:var(--muted); line-height:2; overflow-wrap:anywhere; }

/* showroom stage (mobile: single phone) */
.hero__visual { min-width:0; }
.hero-stage {
  position:relative; background:var(--gradient-charcoal); border-radius:var(--radius-xl);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-xl);
  padding:var(--space-xl) var(--space-lg); overflow:hidden;
}
.hero-stage::after {
  content:""; position:absolute; top:30%; left:50%; transform:translate(-50%,-50%);
  width:70%; height:70%; background:radial-gradient(circle,rgba(124,61,255,.45),transparent 70%);
  filter:blur(30px); pointer-events:none;
}
.stage-label, .stage-chip {
  position:absolute; z-index:4; font-family:var(--font-mono); white-space:nowrap;
}
.stage-label {
  display:inline-flex; align-items:center; gap:.4rem; font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.85);
}
.stage-label--demo { top:var(--space-md); left:var(--space-md); }
.stage-label--code { top:var(--space-md); right:var(--space-md); }
.stage-label--lh { bottom:var(--space-md); right:var(--space-md); color:var(--lime); }
.stage-chip {
  display:none; font-size:.6rem; font-weight:500; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:.3rem .6rem; border-radius:999px; backdrop-filter:blur(8px);
}
.stage-chip--tl { top:18%; left:6%; }
.stage-chip--tr { top:14%; right:6%; }
.stage-chip--bl { bottom:20%; left:5%; }
.stage-chip--br { bottom:16%; right:7%; }

.hero-stack { position:relative; width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.hero-stack svg { position:absolute; border-radius:14px; }
/* mobile: hide multi-card stage, show only phone centered */
.hero-stack__back, .hero-stack__mid { display:none; }
.hero-stack__phone {
  position:relative; width:46%; max-width:200px;
  box-shadow:var(--shadow-lg), var(--shadow-electric);
}

/* ---------- S2 INDUSTRY SELECTOR ---------- */
.ind-pills { display:flex; flex-wrap:wrap; gap:var(--space-sm); margin:var(--space-lg) 0; }
.ind-pill {
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-small);
  padding:.6rem 1.2rem; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); cursor:pointer;
  transition:transform var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease), background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.ind-pill:hover { transform:translateY(-2px); border-color:var(--cobalt); }
.ind-pill.is-active { background:var(--cobalt); color:#fff; border-color:var(--cobalt); box-shadow:var(--shadow-cobalt); }

.ind-panel { display:grid; gap:var(--space-lg); align-items:center; }
.ind-panel__visual, .ind-panel__copy { transition:opacity .2s var(--ease); }
.ind-panel.is-fading .ind-panel__visual, .ind-panel.is-fading .ind-panel__copy { opacity:0; }
.ind-panel__visual {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-sm); box-shadow:var(--shadow-lg); overflow:hidden;
}
.ind-svg { width:100%; border-radius:var(--radius-md); border:1px solid var(--border); }
.ind-content h3 { margin-bottom:var(--space-md); }
.ind-rec {
  display:inline-block; font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink);
  font-weight:500; margin:var(--space-md) 0; background:var(--lime); padding:.45rem .85rem;
  border-radius:999px;
}

.checklist { display:grid; gap:.65rem; }
.checklist li { position:relative; padding-left:1.9rem; }
.checklist li::before {
  content:"\2713"; position:absolute; left:0; top:.1em; color:var(--cobalt); font-weight:700;
  width:1.3rem; height:1.3rem; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(37,87,255,.1); border-radius:50%; font-size:.8rem;
}

/* ---------- S3 BENTO ---------- */
.bento { display:grid; gap:var(--space-md); }
.bento-tile {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md);
  transition:transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.bento-tile:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg), var(--shadow-cyan); }

.browser-frame { display:flex; flex-direction:column; height:100%; }
.browser-bar {
  display:flex; align-items:center; gap:6px; padding:.55rem .9rem; background:var(--cloud);
  border-bottom:1px solid var(--border); min-height:36px;
}
.browser-dot { width:11px; height:11px; border-radius:50%; flex:none; }
.browser-dot--red { background:#FF6B6B; }
.browser-dot--yellow { background:var(--gw-warning); }
.browser-dot--green { background:var(--gw-success); }
.browser-url {
  flex:1; margin-left:.6rem; background:var(--surface); color:var(--muted);
  font-family:var(--font-mono); font-size:.72rem; padding:.25rem .7rem; border-radius:999px;
  border:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.browser-content { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--cloud); }
.browser-content--tall { aspect-ratio:3/4; }
.browser-content iframe { width:100%; height:100%; border:0; pointer-events:none; }
.bento-tile--live { box-shadow:var(--shadow-md), 0 0 0 1px rgba(37,87,255,.12); }
.mockup-svg { width:100%; height:100%; }

.bento-content-scale { transition:transform var(--duration-base) var(--ease); }
.bento-tile:hover .browser-content .mockup-svg { transform:scale(1.02); }

.bento-overlay {
  position:absolute; inset:auto var(--space-md) var(--space-md) var(--space-md);
  padding:var(--space-md);
  display:flex; flex-direction:column; gap:.4rem; align-items:flex-start;
  background:rgba(7,7,11,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-radius:var(--radius-md); color:#fff;
  transition:background var(--duration-base) var(--ease); pointer-events:none;
}
.bento-tile:hover .bento-overlay { background:rgba(7,7,11,.95); }
.bento-meta strong { display:block; font-size:1.05rem; }
.bento-meta span { font-family:var(--font-mono); font-size:.74rem; opacity:.85; }
.bento-link { position:relative; z-index:5; pointer-events:auto; display:inline-flex; align-items:center; min-height:44px; color:var(--cyan); font-family:var(--font-mono); font-size:.78rem; font-weight:500; }
.bento-link:hover { color:#fff; }

/* ---------- S4 BEFORE / AFTER ---------- */
.ba-grid { display:grid; gap:var(--space-lg); align-items:center; }
.ba-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-lg); }
.ba-card--before { background:var(--bone); box-shadow:var(--shadow-sm); }
.ba-card--after { background:var(--surface); border-left:2px solid var(--cobalt); box-shadow:var(--shadow-lg), var(--shadow-electric); }
.ba-card .pill { margin-bottom:var(--space-md); }
.mockup-frame { border-radius:var(--radius-md); overflow:hidden; margin:var(--space-md) 0; border:1px solid var(--border); }
.mockup-frame--dated { filter:grayscale(.5) opacity(.85) saturate(.7); }
.ba-list { display:grid; gap:.6rem; }
.ba-list li { position:relative; padding-left:1.9rem; }
.ba-list--x li::before { content:"\2715"; position:absolute; left:.2rem; top:.05em; color:var(--coral); font-weight:700; }
.ba-list--check li::before {
  content:"\2713"; position:absolute; left:0; top:.1em; color:var(--cobalt); font-weight:700;
  width:1.3rem; height:1.3rem; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(37,87,255,.1); border-radius:50%; font-size:.8rem;
}

/* ---------- S5 PROBLEM (charcoal) ---------- */
.problem-grid { display:grid; gap:var(--space-xl); align-items:start; }
.problem-copy p { font-size:1.3rem; line-height:1.5; color:rgba(250,248,240,.85); }
.problem-line { margin-top:var(--space-md); font-family:var(--font-serif); font-style:italic; font-size:1.45rem; color:#fff; }
.stat-list { display:grid; gap:0; }
.stat { display:flex; align-items:baseline; gap:var(--space-md); border-bottom:1px solid rgba(255,255,255,.1); padding:var(--space-md) 0; }
.stat:first-child { padding-top:0; }
.stat__num { font-family:var(--font-mono); font-size:clamp(2.5rem,5vw,5rem); font-weight:700; color:var(--lime); flex:none; min-width:5.5rem; line-height:1; }
.stat__label { color:rgba(250,248,240,.65); }

/* ---------- S6 DIFF ---------- */
.diff-grid { display:grid; gap:var(--space-md); }
.diff-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-lg); transition:transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.diff-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--cobalt); }
.diff-card h3 { margin:var(--space-md) 0 var(--space-sm); }
.diff-card p { color:var(--muted); }

.icon-badge {
  display:inline-flex; width:56px; height:56px; border-radius:var(--radius-sm);
  background:rgba(124,61,255,.1); align-items:center; justify-content:center;
}
.icon-badge svg { width:34px; height:34px; }
.icon-badge--sm { width:48px; height:48px; }
.icon-badge--sm svg { width:30px; height:30px; }

/* ---------- S7 PACKAGE BUILDER ---------- */
.builder-grid { display:grid; gap:var(--space-lg); }
.builder-col { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-lg); box-shadow:var(--shadow-sm); }
.builder-h { font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-mono); color:var(--muted); margin-bottom:var(--space-md); font-weight:500; }

.radio-card {
  position:relative; display:block; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1rem 1.1rem; margin-bottom:.75rem; cursor:pointer; overflow:hidden;
  transition:border-color var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease), background var(--duration-fast) var(--ease);
}
.radio-card input { position:absolute; opacity:0; pointer-events:none; }
.radio-card.is-selected { border:2px solid var(--cobalt); box-shadow:var(--shadow-cobalt); }
.radio-card.is-selected::before { content:""; position:absolute; top:0; left:0; bottom:0; width:4px; background:var(--gradient-electric); }
.radio-card__body { display:flex; flex-direction:column; gap:.35rem; }
.radio-card__head { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.radio-card__title { font-weight:600; font-size:1.1rem; }
.radio-card__price { color:var(--cobalt); font-weight:700; font-size:1.5rem; }
.radio-card__meta { font-size:.74rem; color:var(--muted); }

.builder-pills { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.builder-pill { cursor:pointer; }
.builder-pill input { position:absolute; opacity:0; pointer-events:none; }
.builder-pill span {
  display:block; text-align:center; padding:.6rem 1rem; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--cloud); font-size:var(--fs-small); font-weight:600;
  transition:background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.builder-pill:hover span { border-color:var(--cobalt); }
.builder-pill.is-selected span { background:var(--cobalt); color:#fff; border-color:var(--cobalt); }

.builder-rec { margin-top:var(--space-md); padding-top:var(--space-md); border-top:1px solid var(--border); }
.builder-rec__chip { display:inline-block; font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink); background:var(--lime); padding:.4rem .8rem; border-radius:999px; margin-bottom:.7rem; }
.builder-add { display:flex; gap:.5rem; align-items:center; cursor:pointer; font-size:var(--fs-small); }

.builder-total {
  display:flex; flex-direction:column; position:relative;
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
}
.builder-total::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gradient-electric); border-radius:var(--radius-xl) var(--radius-xl) 0 0; }
.builder-lines { display:grid; gap:.4rem; font-size:var(--fs-small); color:var(--muted); margin-bottom:var(--space-sm); }
.divider--builder { margin:var(--space-sm) 0 var(--space-md); }
.builder-total__num { font-size:var(--fs-price); color:var(--cobalt); font-weight:700; line-height:1; margin-bottom:var(--space-lg); display:inline-block; transform-origin:left center; }
.builder-total .btn { margin-top:auto; }

/* ---------- S8 PRICING ---------- */
.price-grid { display:grid; gap:var(--space-lg); align-items:start; }
.price-card {
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-lg); display:flex; flex-direction:column; gap:var(--space-sm);
  min-width:0; box-shadow:var(--shadow-md);
}
.price-card .includes li { overflow-wrap:anywhere; }
.price-card--featured { border:2px solid var(--violet); box-shadow:var(--shadow-lg); }
.price-card h3 { margin-top:var(--space-xs); }
.price-card__desc { color:var(--muted); font-size:var(--fs-small); }
.price-card__price { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; }
.price-now { font-family:var(--font-mono); font-size:clamp(2.5rem,2rem + 2.4vw,3.75rem); font-weight:700; color:var(--cobalt); line-height:1; max-width:100%; } /* v9.1.0: capped so $1,899 fits every card at all breakpoints; same size on all three */
.price-card__meta { font-size:.82rem; color:var(--muted); line-height:1.5; overflow-wrap:break-word; } /* v9.1.0: wraps the milestone breakdown cleanly inside the card */
.divider { border:none; border-top:1px solid var(--border); margin:var(--space-xs) 0; }
.includes { display:grid; gap:.55rem; font-size:var(--fs-small); }
.includes li { position:relative; padding-left:1.5rem; color:var(--charcoal); }
.includes li::before { content:"\2713"; position:absolute; left:0; top:.05em; color:var(--cobalt); font-weight:700; }
.price-card .btn { margin-top:auto; }

/* ---------- S9 ADD-ONS ---------- */
.bundle-grid { display:grid; gap:var(--space-md); margin-bottom:var(--space-lg); }
.bundle-card { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--violet); border-radius:var(--radius-lg); padding:var(--space-md); box-shadow:var(--shadow-sm); }
.bundle-card h3 { font-size:1.1rem; }
.bundle-price { display:inline-block; font-size:1.6rem; font-weight:700; color:var(--cobalt); margin:.4rem 0 .15rem; }
.bundle-save { display:block; font-size:var(--fs-small); color:var(--violet); font-weight:500; margin-bottom:var(--space-sm); }
.bundle-card .includes { margin-top:var(--space-xs); }
.addons-note { color:var(--muted); max-width:70ch; margin-bottom:var(--space-lg); }

.addons-all { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-md) var(--space-lg); }
.addons-all summary { cursor:pointer; font-weight:600; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.addons-all summary::-webkit-details-marker { display:none; }
.addons-all summary::after { content:"\25BE"; color:var(--muted); transition:transform var(--duration-fast) var(--ease); }
.addons-all[open] summary::after { transform:rotate(180deg); color:var(--violet); }
.addons-menu { display:grid; gap:var(--space-lg); margin-top:var(--space-lg); }
.addons-group h4 { font-family:var(--font-mono); font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; color:var(--violet); margin-bottom:var(--space-sm); }
.addon-list { display:grid; gap:.4rem; }
.addon-list li { display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; border-bottom:1px solid var(--border); font-size:var(--fs-small); }
.addon-list .mono { color:var(--cobalt); font-weight:500; flex:none; }

/* ---------- S10 COMPARISON ---------- */
.compare-scroll { position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.compare-table { width:100%; border-collapse:collapse; min-width:680px; background:var(--surface); }
.compare-table th, .compare-table td { padding:.9rem 1rem; text-align:center; border-bottom:1px solid var(--border); font-size:var(--fs-small); }
.compare-table thead th { font-family:var(--font-display); font-weight:600; background:var(--bone); position:sticky; top:0; }
.compare-table tbody th[scope="row"] { text-align:left; font-weight:500; }
.compare-table .y { color:var(--cobalt); font-weight:700; }
.compare-table .x { color:var(--muted); font-weight:700; }
.compare-table .some, .compare-table .varies, .compare-table .na { color:var(--muted); font-style:italic; }
.compare-table .col-gw { background:var(--bone); }
.compare-table thead .col-gw, .compare-table tbody .col-gw { border-left:2px solid var(--cobalt); font-size:.92rem; }
.compare-table thead th.col-gw { color:var(--cobalt); }

/* ---------- S11 PROCESS ---------- */
.process-grid { position:relative; display:grid; gap:var(--space-lg); }
.process-step { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-lg); position:relative; box-shadow:var(--shadow-sm); }
.process-num {
  display:inline-flex; align-items:center; justify-content:center; width:80px; height:80px;
  border-radius:50%; color:#fff; font-family:var(--font-mono); font-weight:700; font-size:1.4rem;
  margin-bottom:var(--space-sm); box-shadow:var(--shadow-md);
}
.process-step .icon-badge { margin-bottom:var(--space-sm); }
.process-step h3 { font-size:1.15rem; margin-bottom:var(--space-sm); }
.process-step p { color:var(--muted); font-size:var(--fs-small); }

/* ---------- S12 CASE STUDY ---------- */
.case-grid { display:grid; gap:var(--space-xl); align-items:start; }
.case-visual { position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-lg), var(--shadow-electric); }
.case-visual .browser-content--tall iframe { pointer-events:none; }
.case-iframe-link { position:absolute; inset:0; z-index:5; }
.case-copy p { color:var(--charcoal); margin-bottom:var(--space-md); }
.pullquote { border-left:4px solid var(--violet); padding-left:var(--space-md); margin:var(--space-lg) 0; }
.pullquote p { font-family:var(--font-serif); font-style:italic; font-size:1.5rem; line-height:1.4; color:var(--ink); margin-bottom:var(--space-sm); }
.pullquote cite { font-family:var(--font-mono); font-style:normal; font-size:var(--fs-small); color:var(--muted); }
.metrics-strip { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:var(--space-lg); }
.metric-pill { font-size:.74rem; padding:.4rem .8rem; border-radius:999px; background:rgba(37,87,255,.08); color:var(--cobalt); border:1px solid rgba(37,87,255,.2); }

/* ---------- S13 TECH ---------- */
.tech-grid { display:grid; gap:var(--space-md); }
.tech-tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-md); box-shadow:var(--shadow-sm); transition:transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease); }
.tech-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--cobalt); }
.tech-tile .icon-badge { background:rgba(37,87,255,.08); }
.tech-tile h3 { font-size:1rem; font-weight:600; margin:var(--space-sm) 0 .35rem; }
.tech-tile p { font-size:var(--fs-small); color:var(--muted); line-height:1.45; }

/* ---------- S14 FAQ ---------- */
.faq-list { display:grid; gap:var(--space-sm); }
.faq { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:border-color var(--duration-fast) var(--ease); }
.faq summary {
  cursor:pointer; padding:var(--space-md); font-weight:600; font-size:var(--fs-h3); list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  transition:color var(--duration-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"\25BE"; color:var(--muted); transition:transform var(--duration-base) var(--ease), color var(--duration-base) var(--ease); flex:none; }
.faq summary:hover { color:var(--violet); }
.faq summary:hover::after { color:var(--violet); }
.faq[open] { border-left:2px solid var(--violet); }
.faq[open] summary { color:var(--violet); }
.faq[open] summary::after { transform:rotate(180deg); color:var(--violet); }
.faq__body { padding:0 var(--space-md) var(--space-md); }
.faq__body p { color:var(--muted); font-size:var(--fs-body); line-height:1.7; }

/* ---------- S15 CONTACT (charcoal) ---------- */
#contact h2, #contact .section-sub { color:var(--cloud); }
#contact .section-sub { color:rgba(250,248,240,.7); }
.contact-form { background:var(--surface); color:var(--ink); border-radius:var(--radius-xl); padding:var(--space-xl); max-width:600px; margin:0 auto; display:grid; gap:var(--space-md); box-shadow:var(--shadow-electric); }
.field { display:grid; gap:.4rem; }
.field label { font-weight:500; font-size:var(--fs-small); }
.field input, .field textarea, .field select {
  width:100%; padding:.75rem .9rem; border:1px solid var(--border); border-radius:var(--radius-md);
  font-family:var(--font-display); font-size:1rem; background:var(--cloud); color:var(--ink);
  transition:border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color:var(--cobalt); outline:none; box-shadow:0 0 0 2px rgba(37,87,255,.35);
}
.field textarea { resize:vertical; }
.more-toggle { justify-self:start; }
.more-toggle span { display:inline-block; transition:transform var(--duration-fast) var(--ease); }
.more-toggle[aria-expanded="true"] span { transform:rotate(180deg); }
.more-fields { display:grid; gap:var(--space-md); overflow:hidden; max-height:0; transition:max-height 400ms var(--ease); }
.more-fields.expanded { max-height:800px; }
.contact-note { display:flex; align-items:center; gap:.5rem; justify-content:center; margin-top:var(--space-md); font-family:var(--font-mono); font-size:var(--fs-small); color:rgba(250,248,240,.75); }

/* ---------- INLINE CONTACT SUCCESS (v9.0.8) ---------- */
.contact-form-wrapper { max-width:600px; margin:0 auto; }
.contact-form { transition:opacity 200ms var(--ease); } /* AJAX fade-out; reveal lives on the wrapper now */

.contact-error {
  margin:0 0 var(--space-md); padding:.85rem 1.1rem;
  border-radius:var(--radius-md); background:rgba(255,92,46,.12); border:1px solid rgba(255,92,46,.45);
  color:var(--gw-text-soft); font-size:var(--fs-small); line-height:1.55; text-align:center;
}
.contact-error a { color:var(--gw-lime); text-decoration:underline; }

.contact-success {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-md);
  background:var(--gw-surface); color:var(--gw-ink); border-radius:var(--radius-xl); padding:var(--space-xl);
  box-shadow:var(--gw-shadow-deep), var(--gw-glow-violet);
  opacity:0; transition:opacity 200ms var(--ease);
}
.contact-success.is-visible { opacity:1; }

/* keep the hidden attribute authoritative even though .contact-form sets display:grid */
.contact-form[hidden], .contact-success[hidden], .contact-error[hidden] { display:none !important; }

.contact-success__check {
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:64px; height:64px; border-radius:50%; background:var(--gw-lime);
}
.contact-success__check svg { display:block; width:32px; height:32px; }
.contact-success__check svg path { stroke:var(--gw-ink); } /* v9.0.9: dark check on lime for contrast (overrides inline white) */

.contact-success__title { margin:0; color:var(--gw-ink); }
.contact-success__text { margin:0 auto; max-width:46ch; color:var(--gw-muted); line-height:1.6; }

.contact-success__wa {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:56px; height:56px; min-width:56px; min-height:56px; border-radius:50%;
  background:var(--gw-lime); color:var(--gw-ink); /* v9.0.9: dark glyph on lime for contrast */
  transition:transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.contact-success__wa svg { display:block; width:28px; height:28px; }
.contact-success__wa:hover, .contact-success__wa:focus-visible { transform:scale(1.05); box-shadow:var(--gw-glow-lime); outline:none; }

.contact-success__alt { margin:0; color:var(--gw-muted); font-size:var(--fs-small); }
.contact-success__alt a { color:var(--gw-muted); }
.contact-success__alt a:hover, .contact-success__alt a:focus-visible { color:var(--gw-ink); text-decoration:underline; }

/* ---------- CONTACT WHATSAPP (above form) + FLOATING WHATSAPP (v9.1.0) ---------- */
.contact-wa { display:flex; flex-direction:column; align-items:center; gap:var(--space-sm); max-width:600px; margin:0 auto var(--space-lg); }
.contact-wa__btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.9rem 1.6rem; border-radius:var(--radius-md);
  background:var(--gw-lime); color:var(--gw-ink); font-weight:600; font-size:1.05rem;
  transition:transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.contact-wa__btn svg { width:24px; height:24px; flex:0 0 auto; }
.contact-wa__btn:hover, .contact-wa__btn:focus-visible { transform:translateY(-2px); box-shadow:var(--gw-glow-lime); outline:none; }
.contact-wa__divider { margin:0; color:var(--gw-text-muted); font-size:var(--fs-small); text-align:center; }

.wa-float {
  position:fixed; right:20px; bottom:20px; z-index:95;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--gw-lime); color:var(--gw-ink); box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:opacity var(--duration-base) var(--ease), transform var(--duration-fast) var(--ease);
}
.wa-float svg { width:30px; height:30px; }
.wa-float:hover, .wa-float:focus-visible { transform:scale(1.05); outline:none; }
.wa-float.is-hidden { opacity:0; pointer-events:none; }
@media (max-width:767.98px) {
  .wa-float { width:52px; height:52px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  body.sticky-on .wa-float { bottom:calc(96px + env(safe-area-inset-bottom, 0px)); } /* clear the single-line sticky CTA bar */
}

/* ---------- STICKY MOBILE CTA ---------- */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:none; align-items:center; justify-content:space-between; gap:var(--space-sm);
  background:var(--surface); box-shadow:var(--shadow-lg);
  padding:var(--space-sm) var(--space-md);
  padding-bottom:calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border);
  transform:translateY(120%); transition:transform var(--duration-base) var(--ease);
}
.sticky-cta.is-visible { transform:translateY(0); }
.sticky-cta .btn { min-height:48px; }
.sticky-cta__text { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-size:clamp(0.58rem, 4.9vw - 6.2px, var(--fs-small)); font-weight:500; color:var(--ink); } /* v9.1.1: scales the label down on small phones so it stays one line; full size at 412px+ */

/* ---------- FOOTER ---------- */
.footer { background:var(--charcoal); color:var(--cloud); padding-block:var(--space-xl); }
.footer__grid { display:grid; gap:var(--space-lg); }
.footer__col { padding-top:var(--space-lg); border-top:1px solid rgba(255,255,255,.08); }
.footer__col:first-child { padding-top:0; border-top:none; }
.footer a { display:inline-flex; align-items:center; min-height:44px; }
.footer__brand { font-weight:700; font-size:1.25rem; letter-spacing:-0.03em; display:block; margin-bottom:.5rem; }
.footer__col p { color:rgba(250,248,240,.7); font-size:var(--fs-small); }
.footer__col a { color:var(--cyan); }
.footer__muted { opacity:.6; }

/* ---------- thanks page ---------- */
.thanks-page { display:flex; min-height:100vh; flex-direction:column; }
.thanks-main { flex:1; display:flex; align-items:center; }
.thanks-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-xl); box-shadow:var(--shadow-lg); }
.thanks-card h1 { font-size:var(--fs-h1); margin:0 0 var(--space-lg); }
.prose p { margin-bottom:var(--space-md); color:var(--charcoal); }
.prose .includes { margin:var(--space-md) 0; gap:.75rem; }
.thanks-card .btn--text { margin-top:var(--space-md); }
.thanks-card .btn--text span { display:inline-block; transition:transform var(--duration-fast) var(--ease); }
.thanks-card .btn--text:hover span { transform:translateX(-4px); }

/* ============================================================
   V4 ADDITIONS (mobile-first). New sections + upgrades only.
   Palette unchanged. Existing v3 rules above are preserved.
   ============================================================ */

/* ---------- section--cloud helper (About bg) ---------- */
.section--cloud { background:var(--cloud); }

/* ---------- S1A TRUST BADGE STRIP ---------- */
.trust-badges { background:var(--surface); border-bottom:1px solid var(--border); padding-block:var(--space-lg); }
.trust-badges__row {
  display:flex; align-items:stretch; gap:0; list-style:none;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  scroll-snap-type:x proximity; position:relative;
}
.trust-badges__row::-webkit-scrollbar { display:none; }
.trust-badge {
  display:flex; align-items:center; gap:.6rem; flex:0 0 auto;
  padding:var(--space-xs) var(--space-md); border-right:1px solid var(--border);
  scroll-snap-align:start;
  transition:transform var(--duration-base) var(--ease);
}
.trust-badge:last-child { border-right:none; }
.trust-badge__icon { width:24px; height:24px; flex:none; }
.trust-badge__label {
  font-size:var(--fs-small); font-weight:500; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); white-space:nowrap; line-height:1.1;
}
/* mobile right-edge fade indicator */
.trust-badges .wrap { position:relative; }
.trust-badges .wrap::after {
  content:""; position:absolute; top:0; right:var(--space-md); bottom:0; width:48px;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--surface));
  pointer-events:none; z-index:2;
}

/* ---------- S11 PROCESS icon + dotted connector ---------- */
.process-icon {
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  margin-bottom:.4rem;
}
.process-icon svg { width:30px; height:30px; }
.process-num { box-shadow:var(--shadow-md), 0 8px 24px rgba(124,61,255,.25); }

/* ---------- S12 CASE STUDY charcoal metrics feature ---------- */
.case-metrics {
  position:relative; display:grid; grid-template-columns:1fr; gap:var(--space-lg);
  background:var(--gradient-charcoal); border-radius:var(--radius-lg);
  padding:var(--space-lg) var(--space-md); margin-top:var(--space-lg);
  box-shadow:var(--shadow-lg), 0 0 60px -18px rgba(124,61,255,.5);
  border:1px solid rgba(124,61,255,.25);
}
.case-metric { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; }
.case-metric__icon { width:32px; height:32px; flex:none; }
.case-metric__value { font-size:var(--fs-h3); font-weight:700; color:var(--cobalt); line-height:1; }
.case-metric__label { font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.06em; color:rgba(250,248,240,.65); }

/* ---------- S12B ABOUT ME ---------- */
.about-grid { display:grid; gap:var(--space-lg); align-items:start; }
.about-photo-frame { position:relative; justify-self:center; width:100%; max-width:420px; }
.about-photo {
  position:relative; width:100%; max-width:420px; aspect-ratio:1/1;
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-electric), var(--shadow-lg);
}
.about-photo img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:grayscale(.8) contrast(1.05) brightness(.95);
  transition:filter 400ms var(--ease);
}
.about-photo:hover img { filter:grayscale(.4) contrast(1.05) brightness(1); }
.about-photo::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(135deg,rgba(37,87,255,.18),rgba(124,61,255,.12) 60%,transparent);
  mix-blend-mode:overlay;
}
.about-photo::after {
  content:""; position:absolute; bottom:0; right:0; width:60px; height:60px; z-index:2;
  pointer-events:none;
  background:linear-gradient(135deg,transparent 30%,rgba(7,7,11,.95));
}
.about-photo-frame::before {
  content:""; position:absolute; top:-8px; left:-8px; width:60%; height:60%; z-index:-1;
  border-top:3px solid var(--cobalt); border-left:3px solid var(--cobalt);
  border-radius:var(--radius-lg) 0 0 0;
}
.about-photo-frame::after {
  content:""; position:absolute; bottom:-8px; right:-8px; width:60%; height:60%; z-index:-1;
  border-bottom:3px solid var(--violet); border-right:3px solid var(--violet);
  border-radius:0 0 var(--radius-lg) 0;
}
.about-copy p { color:var(--charcoal); margin-bottom:var(--space-md); }
.about-quote {
  border-left:4px solid var(--cobalt); padding-left:var(--space-md);
  margin:var(--space-lg) 0;
}
.about-quote p {
  font-family:var(--font-serif); font-style:italic; font-size:1.4rem; line-height:1.4;
  color:var(--ink); margin-bottom:0;
}
.about-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--space-sm); }
.about-chips--wide { margin-bottom:0; }
.about-chip {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:500; letter-spacing:.04em;
  padding:.4rem .8rem; border-radius:999px;
  background:rgba(21,87,255,.05); color:var(--gw-ink-soft); border:1px solid var(--gw-border-light);
}
.about-chip .dot--lime { box-shadow:0 0 8px rgba(122,168,30,.5); }
.about-chip--wide { letter-spacing:.04em; }
.about-cta { justify-self:start; }

/* ---------- S15A REASSURANCE STRIP ---------- */
.reassurance-strip {
  display:grid; grid-template-columns:1fr; gap:var(--space-sm);
  max-width:600px; margin:0 auto var(--space-lg);
}
.reassurance-item {
  display:flex; align-items:center; gap:.6rem; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-md); color:var(--ink);
}
.reassurance-icon { width:20px; height:20px; flex:none; }
.reassurance-item span { font-family:var(--font-display); font-weight:500; font-size:var(--fs-small); }

/* ---------- S2 industry SVG visibility (author svg{display:block} would
   otherwise defeat the [hidden] toggle, leaving all 5 previews stacked) ---------- */
.ind-svg[hidden] { display:none; }

/* ---------- S4 BEFORE/AFTER gauge meters ---------- */
.gauge { display:flex; flex-direction:column; align-items:center; padding:var(--space-md); }
.gauge-svg { width:120px; height:120px; }
.gauge-label { font:500 var(--fs-small)/1.2 var(--font-display); color:var(--muted); margin-top:var(--space-xs); text-transform:uppercase; letter-spacing:.08em; }
.gauge-substats { display:flex; gap:var(--space-md); margin-top:var(--space-xs); font:400 var(--fs-small)/1.4 var(--font-mono); color:var(--muted); }
.gauge--good .gauge-substats { color:var(--ink); }

/* ---------- S2 also-serving muted line + builder note ---------- */
.ind-also { font-size:var(--fs-small); color:var(--muted); margin-bottom:var(--space-lg); }
.builder-note { font-size:var(--fs-small); color:var(--muted); margin-top:var(--space-sm); text-align:center; }

/* ============================================================
   TABLET >= 768px
   ============================================================ */
@media (min-width:768px) {
  .section { padding-block:var(--space-3xl); }

  /* nav */
  .hero { padding-top:var(--space-2xl); }

  /* hero: 2-col 54/46, showroom stage with stacked mockups */
  .hero__grid { grid-template-columns:minmax(0,54fr) minmax(0,46fr); gap:var(--space-lg); min-height:90vh; align-content:center; }
  .hero__copy, .hero__visual { min-width:0; }
  .hero-stack { aspect-ratio:1/0.92; }
  .hero-stack svg { filter:drop-shadow(0 24px 48px rgba(124,61,255,.25)); }
  .hero-stack__back, .hero-stack__mid { display:block; }
  .hero-stack__back { width:70%; top:8%; left:0; transform:rotate(-8deg) scale(.85) translateX(-15%); box-shadow:var(--shadow-lg), var(--shadow-electric); animation:float-back 6s ease-in-out infinite; }
  .hero-stack__mid { width:72%; top:14%; right:2%; transform:rotate(4deg) scale(.95) translateY(-2%); z-index:2; box-shadow:var(--shadow-lg), var(--shadow-electric); animation:float-mid 6s ease-in-out infinite 1.5s; }
  .hero-stack__phone { position:absolute; width:24%; max-width:none; bottom:6%; left:34%; transform:rotate(12deg) scale(.78) translateX(15%) translateY(8%); z-index:3; box-shadow:var(--shadow-lg), var(--shadow-electric); animation:float-phone 6s ease-in-out infinite 3s; }
  .stage-chip { display:inline-block; }

  /* industries 60/40 */
  .ind-panel { grid-template-columns:minmax(0,60fr) minmax(0,40fr); gap:var(--space-lg); }
  .ind-panel__visual, .ind-panel__copy { min-width:0; }

  /* bento 12-col, 2 rows */
  .bento { grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(180px,auto); gap:var(--space-md); }
  .bento-tile--big { grid-column:1 / 8; grid-row:1 / 3; }
  .bento-tile:nth-child(2) { grid-column:8 / 13; grid-row:1; }
  .bento-tile:nth-child(3) { grid-column:8 / 10; grid-row:2; }
  .bento-tile:nth-child(4) { grid-column:10 / 13; grid-row:2; }
  .bento-tile--big .browser-content { aspect-ratio:auto; flex:1; }
  .bento-tile:nth-child(2) .browser-content { aspect-ratio:auto; flex:1; }
  .bento-tile:nth-child(3) .browser-content,
  .bento-tile:nth-child(4) .browser-content { aspect-ratio:auto; flex:1; }
  /* overlay hover-reveal on desktop */
  .bento-overlay { background:rgba(7,7,11,.6); opacity:.96; }

  .ba-grid { grid-template-columns:1fr 1fr; }
  .ba-card--before { transform:rotate(-1.5deg); }
  .ba-card--after { transform:rotate(1.5deg) scale(1.02); }

  .problem-grid { grid-template-columns:1fr 1fr; }
  .diff-grid { grid-template-columns:1fr 1fr; }

  /* builder: 2-col at tablet, total spans full width */
  .builder-grid { grid-template-columns:1fr 1fr; align-items:start; }
  .builder-col { min-width:0; }
  .builder-total { grid-column:1 / -1; box-shadow:var(--shadow-electric); }

  .case-grid { grid-template-columns:1fr 1fr; }

  .tech-grid { grid-template-columns:repeat(2,1fr); }

  .footer__grid { grid-template-columns:repeat(3,1fr); }
  .footer__col { padding-top:0; border-top:none; border-left:1px solid rgba(255,255,255,.08); padding-left:var(--space-lg); }
  .footer__col:first-child { border-left:none; padding-left:0; }

  /* sticky CTA hidden on tablet+ */
  .sticky-cta { display:none !important; }

  /* nav toggle hidden, links visible */

  /* --- v4 tablet --- */
  .ba-metrics { justify-content:flex-start; }
  .case-metrics { grid-template-columns:repeat(2,1fr); padding:var(--space-lg) var(--space-md); }
  .about-grid { grid-template-columns:minmax(0,40fr) minmax(0,60fr); gap:var(--space-xl); align-items:center; }
  .about-photo-frame { justify-self:start; }
  .reassurance-strip { grid-template-columns:1fr 1fr; max-width:none; gap:var(--space-md); }
}

/* mobile nav (under 768) */
@media (max-width:767.98px) {
  .nav__links {
    position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--cloud); border-bottom:1px solid var(--border); padding:var(--space-md);
    gap:var(--space-sm); transform:translateY(-200%); transition:transform var(--duration-base) var(--ease);
    box-shadow:var(--shadow-lg); pointer-events:none;
  }
  .nav__links.is-open { transform:translateY(0); pointer-events:auto; }
  .nav__links a:not(.btn) { display:none; }
  .nav__links.is-open a:not(.btn) { display:block; }
  .nav__links .btn { display:flex; }
  .nav__toggle { display:flex; }
  .nav__links.is-open a.nav__pill { display:flex; align-items:center; min-height:48px; }
  .nav__links .btn { min-height:48px; }
  .sticky-cta { display:flex; }
  body.sticky-on { padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   DESKTOP >= 1040px (process horizontal, pricing 3-col)
   ============================================================ */
@media (min-width:680px) {
  .bundle-grid { grid-template-columns:repeat(2,1fr); }
  .addons-menu { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:980px) {
  .price-grid { grid-template-columns:repeat(3,1fr); }
  .price-card--featured { transform:scale(1.04); z-index:2; }
  .bundle-grid { grid-template-columns:repeat(4,1fr); }
  .addons-menu { grid-template-columns:repeat(3,1fr); }
  .tech-grid { grid-template-columns:repeat(4,1fr); }
  /* builder: 3-col with sticky live total */
  .builder-grid { grid-template-columns:1fr 1fr 1fr; }
  .builder-total { grid-column:auto; position:sticky; top:84px; align-self:start; }

  /* --- v4 desktop --- */
  .trust-badges__row {
    display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); overflow:visible;
    align-items:center;
  }
  .trust-badge { justify-content:center; padding:var(--space-sm) var(--space-xs); min-width:0; }
  .trust-badge__label { white-space:normal; text-align:left; }
  .trust-badge:hover { transform:translateY(-3px); }
  .trust-badges .wrap::after { display:none; }
  .case-metrics { grid-template-columns:repeat(5,1fr); padding:var(--space-lg) var(--space-md); }
  .reassurance-strip { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1040px) {
  /* process: horizontal flow with dotted connecting line */
  .process-grid { grid-template-columns:repeat(5,1fr); gap:var(--space-md); }
  .process-grid::before {
    content:""; position:absolute; top:84px; left:10%; right:10%; height:0;
    border-top:2px dotted var(--border); z-index:0;
  }
  .process-step { background:transparent; border:none; box-shadow:none; padding:0 var(--space-sm); text-align:center; }
  .process-step .process-num { margin-inline:auto; }
  .process-step .process-icon { margin-inline:auto; }
}

/* process vertical dotted connector on mobile/tablet */
@media (max-width:1039.98px) {
  .process-grid { position:relative; padding-left:var(--space-lg); }
  .process-grid::before {
    content:""; position:absolute; top:60px; bottom:60px; left:calc(var(--space-lg) + 40px); width:0;
    border-left:2px dotted var(--border); z-index:0;
  }
  .process-step { position:relative; z-index:1; }
}

/* ---------- float keyframes (merge translateY with each card transform) ---------- */
@keyframes float-back {
  0%,100% { transform:rotate(-8deg) scale(.85) translateX(-15%) translateY(0); }
  50% { transform:rotate(-8deg) scale(.85) translateX(-15%) translateY(-10px); }
}
@keyframes float-mid {
  0%,100% { transform:rotate(4deg) scale(.95) translateY(-2%); }
  50% { transform:rotate(4deg) scale(.95) translateY(calc(-2% - 10px)); }
}
@keyframes float-phone {
  0%,100% { transform:rotate(12deg) scale(.78) translateX(15%) translateY(8%); }
  50% { transform:rotate(12deg) scale(.78) translateX(15%) translateY(calc(8% - 10px)); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .sticky-cta { transition:none !important; }
}

/* === v5 real mockup styling === */
.ind-img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 1px 2px rgba(7,7,11,.04),0 8px 24px rgba(7,7,11,.08),0 24px 48px rgba(7,7,11,.06);background:var(--surface);transition:transform 280ms cubic-bezier(.4,0,.2,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}
.ind-img:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(7,7,11,.04),0 16px 32px rgba(7,7,11,.10),0 32px 64px rgba(7,7,11,.08)}
.ind-img[hidden]{display:none !important}
.bento-concept-img{width:100%;height:auto;display:block;border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:0 1px 2px rgba(7,7,11,.04),0 12px 32px rgba(7,7,11,.10),0 32px 64px rgba(7,7,11,.08);background:var(--surface);transition:transform 320ms cubic-bezier(.4,0,.2,1),box-shadow 320ms cubic-bezier(.4,0,.2,1)}
.bento-concept-img:hover{transform:translateY(-6px) scale(1.005);box-shadow:0 1px 2px rgba(7,7,11,.04),0 20px 40px rgba(7,7,11,.14),0 40px 80px rgba(7,7,11,.10)}
@media (prefers-reduced-motion:reduce){.ind-img,.bento-concept-img{transition:none}.ind-img:hover,.bento-concept-img:hover{transform:none}}
@media (max-width:768px){.ind-img,.bento-concept-img{box-shadow:0 1px 2px rgba(7,7,11,.04),0 4px 12px rgba(7,7,11,.06),0 8px 24px rgba(7,7,11,.04)}}

/* === v6 hero image swap === */
.hero-showcase-img{width:100%;height:auto;display:block;border-radius:var(--radius-xl,24px);box-shadow:0 1px 2px rgba(7,7,11,.20),0 24px 48px rgba(7,7,11,.35),0 48px 96px rgba(7,7,11,.25);background:transparent}
.ba-mockup-img{width:100%;height:auto;display:block;border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:0 1px 2px rgba(7,7,11,.04),0 12px 32px rgba(7,7,11,.08),0 32px 64px rgba(7,7,11,.06);background:var(--surface);transition:transform 320ms cubic-bezier(.4,0,.2,1),box-shadow 320ms cubic-bezier(.4,0,.2,1);max-height:480px;object-fit:cover;object-position:top center}
.ba-mockup-img:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(7,7,11,.04),0 20px 40px rgba(7,7,11,.12),0 40px 80px rgba(7,7,11,.08)}
.ba-mockup-before{filter:saturate(.7) brightness(.97)}
@media (prefers-reduced-motion:reduce){.ba-mockup-img{transition:none}.ba-mockup-img:hover{transform:none}}
@media (max-width:768px){.ba-mockup-img{max-height:360px;box-shadow:0 1px 2px rgba(7,7,11,.04),0 4px 12px rgba(7,7,11,.06),0 8px 24px rgba(7,7,11,.04)}}

/* ============================================================
   V7 RESTRUCTURE. Cinematic dark/light premium. 10 sections.
   New tokens via --gw-* aliases. Appended last so it overrides
   the v3-v6 rules above where the layout changed.
   ============================================================ */

/* page base + ambient depth tuned to new palette */
body { background:var(--gw-cloud); color:var(--gw-ink); }
body::before {
  background:
    radial-gradient(circle at 15% 10%,rgba(21,87,255,.05),transparent 28%),
    radial-gradient(circle at 85% 20%,rgba(109,53,255,.05),transparent 26%),
    radial-gradient(circle at 50% 80%,rgba(183,255,42,.04),transparent 30%);
}

/* cinematic dark-section vertical padding (~25% more breathing) */
.section--charcoal, .section--samples, .hero { padding-block:calc(var(--space-2xl) * 1.25); }
@media (min-width:768px) {
  .section--charcoal, .section--samples { padding-block:calc(var(--space-3xl) * 1.25); }
}

/* ---------- section backgrounds (dark / light) ---------- */
.section--charcoal { background:var(--gw-charcoal); color:var(--gw-text); position:relative; overflow:hidden; }
.section--charcoal::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 75% 18%,rgba(109,53,255,.22),transparent 42%),radial-gradient(circle at 12% 70%,rgba(21,87,255,.16),transparent 40%);
}
.section--charcoal .wrap { position:relative; z-index:1; }
.section--cloud { background:var(--gw-cloud); }
.section--surface { background:var(--gw-surface-soft); }
.section--samples { background:var(--gw-charcoal); position:relative; overflow:hidden; }
.section--samples::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:var(--gw-gradient-card), radial-gradient(circle at 80% 12%,rgba(109,53,255,.18),transparent 42%);
}
.section--samples .wrap { position:relative; z-index:1; }

/* soft gradient fades between dark and light transitions */
.section--samples { box-shadow:inset 0 -120px 120px -120px rgba(8,11,20,.9); }
#how-it-works { position:relative; }
#how-it-works::before {
  content:""; position:absolute; top:0; left:0; right:0; height:120px; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,20,.06),transparent);
}
#contact::before { z-index:0; }

/* eyebrow lime variant */
.eyebrow--lime { color:var(--gw-lime); }
.eyebrow--violet { color:var(--gw-violet); }

/* light-on-dark headings */
.h2--light { color:var(--gw-text); }
.h2--light em { color:var(--gw-text); }

/* ---------- NAV (dark, transparent over hero, frosted after) ---------- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding-top:env(safe-area-inset-top, 0px);
  background:transparent; border-bottom:1px solid transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), backdrop-filter var(--duration-base) var(--ease);
}
.nav.is-scrolled {
  background:rgba(8,11,20,.78); border-bottom:1px solid var(--gw-border-soft);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.nav__brand { color:var(--gw-text); }
.nav__brand:hover { color:var(--gw-text); }
.nav__links { display:flex; align-items:center; gap:.5rem; }
/* State 1 + 2: nav over dark hero AND sticky frosted dark nav (both dark-toned).
   High-contrast white text on translucent white surface for WCAG AA on dark.
   Selector raised to .nav__links a.nav__pill so it beats the v3 `.nav__links a`
   rule (which forces dark --charcoal text). */
.nav__links a.nav__pill {
  color:var(--gw-text); font-weight:500; font-size:var(--fs-small);
  padding:.5rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  transition:border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.nav__links a.nav__pill:hover { color:var(--gw-text); border-color:rgba(255,255,255,.30); background:rgba(255,255,255,.14); }
/* State 3: nav over a light section (edge case) */
.nav.is-on-light .nav__links a.nav__pill {
  color:var(--gw-ink); border-color:rgba(8,10,18,.15); background:rgba(8,10,18,.06);
}
.nav.is-on-light .nav__links a.nav__pill:hover { color:var(--gw-ink); border-color:rgba(8,10,18,.25); background:rgba(8,10,18,.10); }
.nav__links a.btn { color:#fff; }
.nav__toggle span { background:var(--gw-text); }
/* offset main content for fixed nav */
.hero { padding-top:calc(var(--space-2xl) + 64px + env(safe-area-inset-top, 0px)); }

/* ---------- HERO (dark, full-bleed) ---------- */
.hero { background:var(--gw-gradient-hero); color:var(--gw-text); position:relative; overflow:hidden; }
.hero__h1 { color:var(--gw-text); }
.hero__h1 em { color:var(--gw-text); }
.hero__sub { color:var(--gw-text-soft); font-size:1.2rem; max-width:48ch; }
.pill--eyebrow {
  background:rgba(183,255,42,.08); border:1px solid rgba(183,255,42,.28); color:var(--gw-text);
  text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:500;
}
.dot--lime { background:var(--gw-lime); box-shadow:0 0 10px rgba(183,255,42,.6); }

.hero__bullets { display:grid; gap:.7rem; margin-bottom:var(--space-lg); }
.hero__bullets li {
  position:relative; padding-left:1.9rem; color:var(--gw-text); font-size:1.02rem;
}
.hero__bullets li::before {
  content:"\2713"; position:absolute; left:0; top:.05em; color:var(--gw-lime); font-weight:700;
  width:1.35rem; height:1.35rem; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(183,255,42,.12); border-radius:50%; font-size:.78rem;
}

/* ghost-on-dark secondary CTA */
.btn--ghost-dark {
  background:transparent; color:var(--gw-text); border:1px solid var(--gw-border-dark);
}
.btn--ghost-dark span { transition:transform var(--duration-fast) var(--ease); }
.btn--ghost-dark:hover { color:var(--gw-text); border-color:var(--gw-text-soft); background:rgba(255,255,255,.05); transform:translateY(-2px); }
.btn--ghost-dark:hover span { transform:translateX(4px); }

/* hero image: directly on dark bg, no chrome, scaled larger */
.hero__visual { min-width:0; }
.hero-showcase-img {
  width:100%; height:auto; display:block; border-radius:0; background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.5)) drop-shadow(0 0 60px rgba(109,53,255,.25));
}

/* ---------- TRUST STRIP ON DARK ---------- */
.trust-strip__wrap { margin-top:var(--space-2xl); }
.trust-strip {
  display:flex; align-items:stretch; gap:0; list-style:none;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  scroll-snap-type:x proximity; padding-top:var(--space-lg); border-top:1px solid var(--gw-border-soft);
}
.trust-strip::-webkit-scrollbar { display:none; }
.trust-item {
  display:flex; align-items:center; gap:.55rem; flex:0 0 auto;
  padding:var(--space-xs) var(--space-md); scroll-snap-align:start;
}
.trust-item__icon { width:24px; height:24px; flex:none; }
.trust-item__label {
  font-size:.78rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gw-text-soft); white-space:nowrap; line-height:1.15;
}

/* ---------- LIVE SAMPLES (dark) ---------- */
.sample-filter { display:flex; flex-wrap:wrap; gap:.6rem; margin:var(--space-lg) 0 var(--space-xl); }
.filter-pill {
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-small);
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:.55rem 1.15rem; border-radius:999px; border:1px solid var(--gw-border-dark);
  background:rgba(255,255,255,.03); color:var(--gw-text-soft); cursor:pointer;
  transition:transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.filter-pill:hover { transform:translateY(-2px); border-color:var(--gw-cobalt-bright); color:var(--gw-text); }
.filter-pill.is-active { background:var(--gw-cobalt); color:#fff; border-color:var(--gw-cobalt); box-shadow:var(--gw-glow-cobalt); }

/* dark bento tiles */
.section--samples .bento-tile {
  background:var(--gw-panel); border:1px solid var(--gw-border-dark); box-shadow:var(--gw-shadow-soft);
}
.section--samples .bento-tile:hover { box-shadow:var(--gw-shadow-deep), var(--gw-glow-cobalt); }
.section--samples .browser-bar { background:var(--gw-panel-soft); border-bottom:1px solid var(--gw-border-dark); }
.section--samples .browser-url { background:rgba(255,255,255,.05); color:var(--gw-text-muted); border:1px solid var(--gw-border-dark); }
.section--samples .browser-content { background:var(--gw-midnight); }
.section--samples .bento-concept-img { border:1px solid var(--gw-border-dark); background:var(--gw-midnight); box-shadow:none; }

/* ---------- v8 FOCAL SAMPLES: single centered full-size tile ---------- */
/* Override the legacy 12-col bento grid: one focal tile, centered, others hidden. */
.bento.bento--focal {
  display:block; max-width:1040px; margin-inline:auto; grid-template-columns:none; grid-auto-rows:auto;
}
.bento-tile[hidden] { display:none !important; }
.bento-tile--focal {
  position:relative; width:100%; margin-inline:auto;
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--gw-shadow-deep);
}
.section--samples .bento-tile--focal { box-shadow:var(--gw-shadow-deep); }
.section--samples .bento-tile--focal:hover { transform:none; box-shadow:var(--gw-shadow-deep), var(--gw-glow-violet); }
/* let each source keep its own aspect ratio inside the focal frame */
.bento-tile--focal .browser-content { aspect-ratio:16/10; }
@media (min-width:768px) {
  .bento.bento--focal { display:block; }
  .bento-tile--focal { grid-column:auto; grid-row:auto; }
  .bento-tile--focal .browser-content { aspect-ratio:16/9; }
  /* v9.0.2: live preview tiles keep the 16/9 browser box at ANY grid position.
     Overrides the legacy 12-col `.bento-tile:nth-child(2/3/4) .browser-content
     { aspect-ratio:auto; flex:1 }` rules that collapsed the 2nd focal tile
     (Jessie). Higher specificity (0,4,0 > 0,3,0); scoped to live tiles so
     concept-image tiles keep their current rendering. Future live tiles inherit. */
  .bento.bento--focal .bento-tile--live .browser-content { aspect-ratio:16/9; flex:none; }
}

/* ---------- v9.0.4: sample tile = browser-window card + plain info block below ----------
   The overlay card was removed. The browser-frame is now the rounded card; the tile is a
   plain container so .bento-info reads as plain text below the preview, aligned to its left edge. */
.section--samples .bento-tile--focal { border-radius:0; overflow:visible; border:0; background:transparent; box-shadow:none; }
.section--samples .bento-tile--focal:hover { transform:none; box-shadow:none; }
.section--samples .bento-tile--focal .browser-frame {
  height:auto; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--gw-border-dark); background:var(--gw-midnight); box-shadow:var(--gw-shadow-deep);
  transition:transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.section--samples .bento-tile--focal:hover .browser-frame { transform:translateY(-6px); box-shadow:var(--gw-shadow-deep), var(--gw-glow-violet); }
.bento-info { margin-top:20px; text-align:left; }
.bento-info__name { margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,1.8vw,1.35rem); line-height:1.2; color:var(--gw-text); }
.bento-info__meta { margin:6px 0 0; font-family:var(--font-mono); font-size:.8rem; line-height:1.5; color:var(--gw-text-muted); }
.bento-info__link { display:inline-flex; align-items:center; min-height:44px; margin-top:12px; color:var(--gw-cobalt-bright); font-family:var(--font-mono); font-size:.82rem; font-weight:600; }
.bento-info__link:hover { color:var(--gw-text); }
@media (prefers-reduced-motion:reduce) { .section--samples .bento-tile--focal:hover .browser-frame { transform:none; } }

/* ---------- HOW IT WORKS (light) process refresh ---------- */
.section--cloud .process-step { background:var(--gw-surface); border-color:var(--gw-border-light); }
.process-num { background:var(--gw-cobalt); box-shadow:var(--shadow-md), 0 8px 24px rgba(21,87,255,.25); }
@media (min-width:1040px) {
  .section--cloud .process-step { background:transparent; }
  .process-grid::before { border-top-color:rgba(21,87,255,.25); }
}
@media (max-width:1039.98px) { .process-grid::before { border-left-color:rgba(21,87,255,.25); } }

/* ---------- PRICING (light) ---------- */
.section--cloud h2, .section--surface h2 { color:var(--gw-ink); }
.price-card { background:var(--gw-surface); border-color:var(--gw-border-light); }
.price-card--featured { border:2px solid var(--gw-violet); box-shadow:var(--shadow-lg), 0 0 50px -20px rgba(109,53,255,.5); }
.badge--popular { background:var(--gw-violet); box-shadow:0 8px 24px rgba(109,53,255,.4); }
.price-now { color:var(--gw-cobalt); }
.includes li { color:var(--gw-ink-soft); }
.includes li::before { color:var(--gw-cobalt); }

/* ---------- V9.0: add-ons accordion (pricing island) ---------- */
.addons-acc { margin-top:clamp(24px,4vw,40px); border-top:1px solid var(--gw-border-light); }
.addons-acc__summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:18px 4px; min-height:48px;
  font-family:var(--font-display); font-weight:600; font-size:clamp(1rem,1.6vw,1.15rem); color:var(--gw-ink);
}
.addons-acc__summary::-webkit-details-marker { display:none; }
.addons-acc__meta { color:var(--gw-muted); font-weight:500; font-size:.9em; }
.addons-acc__chev { color:var(--gw-cobalt); font-size:.8em; transition:transform var(--duration-fast) var(--ease); }
.addons-acc[open] .addons-acc__chev { transform:rotate(180deg); }
.addons-acc[open] .addons-acc__body { animation:addonsSlide var(--duration-base) var(--ease) both; }
@keyframes addonsSlide { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.addons-acc__groups { display:grid; grid-template-columns:1fr 1fr; gap:24px 40px; padding:8px 4px 4px; }
@media (max-width:599.98px) { .addons-acc__groups { grid-template-columns:1fr; gap:20px; } }
.addons-group__title {
  display:inline-block; font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--gw-ink);
  padding-bottom:6px; margin:0 0 8px; border-bottom:2px solid var(--gw-lime);
}
.addons-list { list-style:none; margin:0; padding:0; }
.addons-list li {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:7px 0; font-size:14px; line-height:1.4; color:var(--gw-ink-soft);
  border-bottom:1px solid rgba(7,7,11,.06);
}
.addons-list li:last-child { border-bottom:none; }
.addon-price {
  flex:none; background:rgba(21,87,255,.10); color:var(--gw-cobalt); font-weight:700;
  padding:3px 10px; border-radius:999px; font-size:13px; white-space:nowrap;
}

/* ---------- COMPARISON (light, 4 cards) ---------- */
.compare-grid { display:grid; grid-template-columns:1fr; gap:var(--space-md); align-items:stretch; }
.compare-card {
  background:var(--gw-surface); border:1px solid var(--gw-border-light); border-radius:var(--radius-lg);
  padding:var(--space-lg); display:flex; flex-direction:column; gap:.5rem;
  box-shadow:var(--shadow-sm); transition:transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.compare-card h3 { font-size:1.2rem; }
.compare-card__price { font-size:1.05rem; font-weight:700; color:var(--gw-muted); margin-bottom:.4rem; }
.compare-list { display:grid; gap:.55rem; margin-top:.3rem; }
.compare-list li { position:relative; padding-left:1.4rem; color:var(--gw-ink-soft); font-size:var(--fs-small); }
.compare-list li::before { content:"\2715"; position:absolute; left:0; top:.05em; color:var(--gw-muted); font-weight:700; }
.compare-card--gw {
  border:2px solid var(--gw-cobalt); box-shadow:var(--shadow-lg), 0 0 50px -22px rgba(21,87,255,.55);
}
.compare-card--gw .compare-card__price { color:var(--gw-cobalt); }
.compare-list--gw li::before { content:"\2713"; color:var(--gw-lime); }
.compare-list--gw li { color:var(--gw-ink); }

/* ---------- CASE STUDY (light) ---------- */
.section--cloud .case-copy p { color:var(--gw-ink-soft); }
.case-metrics { background:var(--gw-charcoal); border:1px solid rgba(109,53,255,.25); box-shadow:var(--shadow-lg), 0 0 60px -18px rgba(109,53,255,.5); }
.case-metric__value { color:var(--gw-cyan); }
.case-metric__label { color:var(--gw-text-muted); }
.pullquote { border-left-color:var(--gw-violet); }
.pullquote p { color:var(--gw-ink); }

/* ---------- MEET YOUR BUILDER (light) ---------- */
.section--surface .about-copy p { color:var(--gw-ink-soft); }
.about-quote { border-left-color:var(--gw-cobalt); }
.about-quote p { color:var(--gw-ink); }
.about-photo::before { background:linear-gradient(135deg,rgba(21,87,255,.18),rgba(109,53,255,.12) 60%,transparent); }
.about-photo-frame::before { border-top-color:var(--gw-cobalt); border-left-color:var(--gw-cobalt); }
.about-photo-frame::after { border-bottom-color:var(--gw-violet); border-right-color:var(--gw-violet); }

/* ---------- FAQ (light) ---------- */
.section--cloud .faq { background:var(--gw-surface); border-color:var(--gw-border-light); }
.faq summary:hover, .faq[open] summary { color:var(--gw-violet); }
.faq[open] { border-left-color:var(--gw-violet); }

/* ---------- FINAL CTA + CONTACT (dark) ---------- */
#contact h2, #contact .section-sub { color:var(--gw-text); }
#contact .section-sub { color:var(--gw-text-soft); }
.reassurance-item { background:var(--gw-panel); border:1px solid var(--gw-border-dark); color:var(--gw-text); }
.reassurance-item span { color:var(--gw-text); }
.contact-form { background:var(--gw-surface); color:var(--gw-ink); box-shadow:var(--gw-shadow-deep), var(--gw-glow-violet); }
.contact-note { color:var(--gw-text-soft); }

/* ---------- buttons retuned to electric ---------- */
.btn--cobalt { background:var(--gw-cobalt); }
.btn--cobalt::before { background:var(--gw-gradient-electric); }
.btn--cobalt:hover { box-shadow:var(--gw-glow-cobalt); }
.btn--cobalt span { transition:transform var(--duration-fast) var(--ease); }
.btn--cobalt:hover span { transform:translateX(4px); }

/* ---------- FOOTER (dark black) ---------- */
.footer { background:var(--gw-black); color:var(--gw-text); }
.footer__col p { color:var(--gw-text-muted); }
.footer__col a { color:var(--gw-cyan); }

/* ============================================================
   V7 RESPONSIVE
   ============================================================ */
@media (min-width:768px) {
  /* compare 2x2 at tablet */
  .compare-grid { grid-template-columns:1fr 1fr; }
  /* hero spacing */
  .hero { padding-top:calc(var(--space-3xl) + 24px); }
  .hero__grid { min-height:auto; }
}
@media (min-width:980px) {
  /* compare 4 across at desktop */
  .compare-grid { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1040px) {
  /* trust strip 7-col on desktop */
  .trust-strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); overflow:visible; align-items:center; }
  .trust-item { justify-content:center; padding:var(--space-sm) var(--space-xs); min-width:0; }
  .trust-item__label { white-space:normal; text-align:left; }
}
/* tablet 4-col 2-row trust strip */
@media (min-width:560px) and (max-width:1039.98px) {
  .trust-strip { display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; gap:var(--space-sm); }
  .trust-item { justify-content:flex-start; }
}

/* mobile: hero stacks single column, image after copy */
@media (max-width:767.98px) {
  .hero__grid { grid-template-columns:1fr; }
  .hero__visual { order:2; }
}

/* dark mobile nav drawer (override v3 light drawer) */
@media (max-width:767.98px) {
  .nav__links {
    position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch;
    background:rgba(8,11,20,.96); border-bottom:1px solid var(--gw-border-dark); padding:var(--space-md);
    gap:var(--space-sm); transform:translateY(-200%); transition:transform var(--duration-base) var(--ease);
    box-shadow:var(--gw-shadow-deep); pointer-events:none;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .nav__links.is-open { transform:translateY(0); pointer-events:auto; }
  .nav__pill { display:none; }
  .nav__links.is-open .nav__pill { display:block; text-align:center; }
  .nav__links .btn { display:flex; }
  .nav__toggle { display:flex; }
  .sticky-cta { display:flex; background:var(--gw-panel); border-top:1px solid var(--gw-border-dark); }
  .sticky-cta__text { color:var(--gw-text); }
}

/* ============================================================
   V8.5 STRUCTURAL PIVOT. Continuous DARK canvas + cream islands.
   Appended last so it overrides every prior rule. Body is ALWAYS
   dark; the light content sits inside cream rounded islands.
   ============================================================ */

/* page base is ALWAYS dark, never cream (overrides v7 body{cloud}) */
body { background:var(--gw-charcoal); color:var(--gw-text); }
body::before {
  background:
    radial-gradient(circle at 15% 10%,rgba(21,87,255,.06),transparent 30%),
    radial-gradient(circle at 85% 22%,rgba(109,53,255,.06),transparent 28%),
    radial-gradient(circle at 50% 85%,rgba(183,255,42,.04),transparent 32%);
}

/* neutralize legacy full-width cream section modifiers -> transparent over dark body */
.section--cloud, .section--surface, .section--bone,
.section--light, .light-bg { background:transparent; }

/* island-zone sections: dark/transparent over body, vertical breathing room */
.section--island-zone {
  background:transparent; color:var(--gw-text);
  padding-block:clamp(3rem,7vw,6.5rem);
}

/* ---------- the cream island ---------- */
.light-island {
  background:var(--gw-cloud); color:var(--gw-ink);
  border-radius:clamp(24px,4vw,48px);
  box-shadow:var(--gw-shadow-deep);
  border:1px solid rgba(255,255,255,.08);
  padding:clamp(32px,5vw,64px);
  max-width:1200px; margin:0 auto;
  position:relative; overflow:hidden;
}
/* Pricing island is the largest */
.light-island--wide { max-width:1280px; padding:clamp(36px,5.5vw,76px); }

/* island interior typography + tokens (cream zone) */
.light-island .eyebrow { color:var(--gw-cobalt); }
.light-island h2 { color:var(--gw-ink); }
.light-island h2 em { color:var(--gw-ink); }
.light-island h3 { color:var(--gw-ink); }
.light-island p { color:var(--gw-ink-soft); }
.light-island .process-step p,
.light-island .faq__body p { color:var(--gw-muted); }

/* islands force their child surfaces/borders to cream-zone tokens */
.section--island-zone .process-step { background:var(--gw-surface); border-color:var(--gw-border-light); box-shadow:var(--shadow-sm); }
.section--island-zone .price-card { background:var(--gw-surface); border-color:var(--gw-border-light); }
.section--island-zone .faq { background:var(--gw-surface); border-color:var(--gw-border-light); }
.section--island-zone .divider { border-top-color:var(--gw-border-light); }
.section--island-zone .includes li { color:var(--gw-ink-soft); }
.section--island-zone .includes li::before { color:var(--gw-cobalt); }
.section--island-zone .about-copy p { color:var(--gw-ink-soft); }

/* desktop: process flow connector recolored inside the cream island */
@media (min-width:1040px) {
  .section--island-zone .process-step { background:transparent; box-shadow:none; }
  .section--island-zone .process-grid::before { border-top-color:rgba(21,87,255,.25); }
}
@media (max-width:1039.98px) {
  .section--island-zone .process-grid::before { border-left-color:rgba(21,87,255,.25); }
}

/* ---------- FIX 8: FAQ compact 2-column grid (inside cream island) ---------- */
.faq-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:900px) { .faq-grid { grid-template-columns:1fr 1fr; gap:16px 24px; } }
.faq-grid .faq {
  background:var(--gw-surface); border:1px solid var(--gw-border-light);
  border-radius:var(--radius-md); overflow:hidden;
}
.faq-grid .faq summary {
  padding:18px 24px; font-size:clamp(16px,1.4vw,17px); font-weight:600;
  line-height:1.35;
}
.faq-grid .faq__body { padding:0 24px 18px; }
.faq-grid .faq__body p { font-size:15px; line-height:1.5; color:var(--gw-muted); }
.faq-grid .faq[open] { border-left:2px solid var(--gw-violet); }
.faq-grid .faq summary:hover, .faq-grid .faq[open] summary { color:var(--gw-violet); }
@media (min-width:900px) {
  /* Odd final card (e.g. the 11th) sits centered on its own row at one-column width */
  .faq-grid .faq:last-child:nth-child(odd) { grid-column:1 / -1; max-width:calc((100% - 24px) / 2); margin-inline:auto; }
}

/* ---------- V9.0: post-FAQ CTA strip ---------- */
.faq-cta {
  margin-top:clamp(28px,4vw,40px);
  background:rgba(255,255,255,.6);
  border-left:4px solid var(--gw-lime);
  border-radius:0 12px 12px 0;
  padding:32px clamp(20px,3vw,32px);
  text-align:center;
}
.faq-cta__heading { font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,2vw,1.5rem); color:var(--gw-ink); margin:0 0 8px; }
.faq-cta__sub { color:var(--gw-muted); font-size:15px; line-height:1.5; margin:0 0 18px; }
.faq-cta .btn { display:inline-flex; }

/* ---------- V8.9: "How you're protected" reassurance block (FAQ island) ---------- */
.how-protected {
  display:flex; gap:18px; align-items:flex-start;
  background:rgba(255,255,255,.6);
  border:1px solid var(--gw-border-light);
  border-radius:16px;
  padding:clamp(20px,3vw,32px);
  margin-bottom:clamp(32px,5vw,48px);
}
.how-protected__icon { flex:0 0 40px; width:40px; display:flex; justify-content:center; padding-top:2px; }
.how-protected__icon svg { width:28px; height:28px; }
.how-protected__heading {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--gw-ink);
  margin:0 0 12px;
}
.how-protected__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.how-protected__list li {
  position:relative; padding-left:28px;
  font-size:15px; line-height:1.5; color:var(--gw-ink-soft);
}
.how-protected__list li::before {
  content:""; position:absolute; left:0; top:3px; width:16px; height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7FF2A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
@media (max-width:599.98px) {
  .how-protected { flex-direction:column; gap:12px; }
  .how-protected__icon { padding-top:0; }
}

/* ---------- FIX 1A: HERO overlap fix ---------- */
/* The italic line "I want one like that." is white-space:nowrap, so it can
   bleed past the copy column into the image. Cap the hero display size on
   desktop so the full italic line fits inside the copy column, constrain the
   copy column width, and nudge the device image right for extra clearance.
   Verified full italic visible with clearance at 1280 and 1920. */
@media (min-width:768px) {
  .hero__h1 { font-size:clamp(2.5rem,4.4vw + 0.5rem,5rem); max-width:15ch; }
  .hero__copy { max-width:34rem; }
  .hero__visual { transform:translateX(5%); }
}
@media (min-width:1280px) {
  .hero__h1 { font-size:5rem; }
  .hero__copy { max-width:38rem; }
  .hero__visual { transform:translateX(8%); }
}

/* ---------- FIX 9: zone discipline cleanups ---------- */
/* decorative browser traffic-light red -> token-aligned */
.browser-dot--red { background:var(--gw-coral); }
/* dark-zone (final CTA) keeps its existing charcoal styling */

/* ============================================================
   V8.6 UPDATES. Appended last to override prior rules.
   FIX 1: pricing equal heights. FIX 2: click-to-select.
   FIX 3: samples multi-tile grid.
   ============================================================ */

/* ---------- FIX 1: pricing cards equal heights ---------- */
.price-grid {
  display:grid; grid-template-columns:1fr; gap:clamp(16px,2vw,32px); align-items:stretch;
}
@media (min-width:800px) { .price-grid { grid-template-columns:repeat(3,1fr); } }
.price-card {
  display:flex; flex-direction:column; height:100%; position:relative;
  /* padding-top clears the overhanging "Most popular" badge so the Standard
     card is not taller than its siblings; applied to ALL three for parity */
  padding-top:calc(var(--space-lg) + 14px);
  transition:transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
/* the includes list absorbs extra space so CTAs anchor to the bottom edge */
.price-card .includes { flex-grow:1; }
/* badge OVERLAPS the Standard card's top edge (does not add height above it) */
.price-card .badge--popular {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
}
/* neutralize the legacy featured scale so all three cards share identical
   top+bottom edges; selection scale below is the only transform */
.price-card--featured { transform:none; }
@media (min-width:980px) { .price-card--featured { transform:none; } }

/* ---------- FIX 2: pricing click-to-select ---------- */
.price-card__check {
  position:absolute; top:12px; right:12px; width:28px; height:28px;
  border-radius:50%; background:var(--gw-cobalt);
  display:none; align-items:center; justify-content:center;
}
.price-card__check svg { width:18px; height:18px; }
.price-card.is-selected .price-card__check { display:flex; }
.price-card.is-selected {
  border:2px solid var(--gw-cobalt);
  box-shadow:0 12px 40px rgba(21,87,255,.18);
  transform:scale(1.02);
}
/* keep the selected scale even at the desktop breakpoint */
@media (min-width:980px) { .price-card--featured.is-selected { transform:scale(1.02); } }
.price-card[role="button"] { cursor:pointer; }

/* ---------- FIX 3: samples multi-tile grid ---------- */
.bento.bento--multi {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:24px; max-width:1200px; margin:0 auto;
}
.bento.bento--multi .bento-tile { max-width:450px; }
@media (max-width:900px) { .bento.bento--multi { grid-template-columns:1fr; } }

/* ============================================================
   LANGUAGE SWITCHER (shared across all locales)
   ============================================================ */
.nav__cluster { display:flex; align-items:center; gap:.5rem; }
.lang-switch { position:relative; }
.lang-switch__btn {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-display); font-size:var(--fs-small); font-weight:500; color:var(--gw-text);
  padding:.5rem .8rem; border-radius:999px; cursor:pointer; min-height:44px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08);
  transition:border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.lang-switch__btn:hover { border-color:rgba(255,255,255,.30); background:rgba(255,255,255,.14); }
.lang-switch__flag { font-size:1.05rem; line-height:1; }
.lang-switch__code { text-transform:uppercase; letter-spacing:.04em; }
.lang-switch__chev { width:.7rem; height:.7rem; transition:transform var(--duration-fast) var(--ease); }
.lang-switch.is-open .lang-switch__chev { transform:rotate(180deg); }
.nav.is-on-light .lang-switch__btn { color:var(--gw-ink); border-color:rgba(8,10,18,.15); background:rgba(8,10,18,.06); }

.lang-switch__menu {
  position:absolute; top:calc(100% + .5rem); right:0; min-width:210px;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:.4rem; list-style:none; margin:0;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
  z-index:200;
}
.lang-switch.is-open .lang-switch__menu { opacity:1; transform:translateY(0); pointer-events:auto; }
.lang-switch__menu a {
  display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:10px;
  color:var(--ink); font-weight:500; font-size:.98rem; text-decoration:none; min-height:44px;
}
.lang-switch__menu a:hover { background:var(--cloud); color:var(--ink); }
.lang-switch__menu a[aria-current="true"] { background:var(--cloud); font-weight:700; }
.lang-switch__menu .lang-switch__flag { font-size:1.2rem; }


/* ---------- FR hero: longer French italic line needs more image clearance ----------
   The English fix (FIX 1A) is tuned for the shorter "I want one like that."; the
   French "j'en veux un comme ca." is wider and only collides at >=1280px where the
   headline is a fixed 5rem. Push the device image further right there only. */
@media (min-width:1280px){
  /* use positional `left` (not transform) so it doesn't fight the scroll-reveal
     animation, which also drives `transform` on .hero__visual. */
  html[lang="fr"] .hero__visual { position:relative; left:54px; }
}


/* ---------- Process steps: tidy mobile alignment ----------
   Below 1040px the steps stack as cards. The number badge was rendering inline
   after the icon, so it sat off to the right while the heading/body were
   left-aligned -> looked unaligned vs every other section. Stack icon + number
   left-aligned with the text and shrink the badge so the cards aren't oversized. */
@media (max-width:1039.98px){
  .process-step { text-align:left; }
  .process-icon { display:flex; margin:0 0 .5rem; }
  .process-num { display:flex; width:60px; height:60px; font-size:1.2rem; margin:0 0 var(--space-sm); }
  /* center the step cards on the page like every other section (was pushed
     right by the connector's left padding); move the connector to line up
     with the left-aligned step circles. */
  .process-grid { padding-left:0; }
  .process-grid::before { left:calc(var(--space-lg) + 30px); }
}

/* ============================================================
   HERO INTERACTIVE 3D (JS-gated to desktop fine pointers and
   no prefers-reduced-motion; these styles are inert otherwise)
   ============================================================ */
/* blur happens in canvas space (script sets ctx.filter), not as a CSS filter:
   a CSS blur here would re-blur a full-hero layer every animation frame */
.hero-aurora {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:0;
  transition:opacity 1.6s ease;
}
.hero-aurora.is-on { opacity:.5; }
.hero > .wrap { position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce) { .hero-aurora { display:none; } }

@media (hover:hover) and (pointer:fine) and (min-width:768px) {
  /* pan-y (not none): touchscreen laptops match this query via their fine
     primary pointer, and a finger swipe on the hero must still scroll */
  .hero__visual.hero3d { perspective:1100px; cursor:grab; touch-action:pan-y; position:relative; }
  .hero__visual.hero3d.is-grabbing { cursor:grabbing; }
  .hero__visual.hero3d .hero-showcase-img { transform-style:preserve-3d; will-change:transform; }
  /* glare: clipped wrapper + oversized pre-painted layer the JS moves with a
     compositor-only transform (painting a new gradient per frame is a repaint) */
  .hero-glare {
    position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
    opacity:0; transition:opacity .35s var(--ease); mix-blend-mode:screen;
  }
  .hero-glare__dot {
    position:absolute; inset:-50%; will-change:transform;
    background:radial-gradient(420px circle at center, rgba(255,255,255,.16), rgba(255,255,255,0) 60%);
  }
  /* drag hint: glyph only, no text, so nothing to translate */
  .hero__visual.hero3d::after {
    content:"\2194"; position:absolute; right:6%; bottom:5%; z-index:3;
    font-family:var(--font-mono); font-size:.85rem; line-height:1;
    color:rgba(255,255,255,.6); padding:.3rem .65rem; border-radius:999px;
    border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07);
    pointer-events:none;
  }
}

/* hero assurance micro-line under the CTAs (guarantee at the decision point) */
.hero__assurance {
  display:flex; align-items:center; gap:.5rem; margin-top:var(--space-sm);
  font-size:.78rem; letter-spacing:.02em; color:rgba(255,255,255,.72);
}

/* ============================================================
   COMPARE OPTIONS (DIY vs studio vs agency)
   ============================================================ */
.compare-grid { display:grid; gap:clamp(16px,2vw,28px); margin-top:var(--space-lg); }
@media (min-width:800px) { .compare-grid { grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.compare-card {
  background:var(--gw-surface); border:1px solid var(--gw-border-light);
  border-radius:var(--radius-lg); padding:calc(var(--space-lg) + 10px) var(--space-lg) var(--space-lg);
  position:relative; display:flex; flex-direction:column;
}
.compare-card h3 { font-size:1.1rem; margin-bottom:var(--space-md); display:flex; flex-direction:column; gap:.3rem; }
.compare-card__sub { font-size:.72rem; color:var(--muted); font-weight:500; letter-spacing:.04em; }
.compare-card--win { border-color:var(--gw-cobalt); box-shadow:var(--shadow-md); }
.compare-card--win .badge--popular { position:absolute; top:-12px; left:50%; transform:translateX(-50%); }
.compare-list { display:grid; gap:.65rem; list-style:none; margin:0; padding:0; }
.compare-list li { position:relative; padding-left:1.6rem; font-size:var(--fs-small); color:var(--gw-ink-soft); }
.compare-list li::before {
  position:absolute; left:0; top:.08em; width:1.05rem; height:1.05rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:.62rem; font-weight:700;
}
.compare-list--cons li::before { content:"\2715"; color:var(--muted); background:rgba(7,7,11,.06); }
.compare-list--pros li::before { content:"\2713"; color:#fff; background:var(--gw-cobalt); }
.compare-note {
  margin-top:var(--space-lg); font-family:var(--font-serif); font-style:italic;
  font-size:1.2rem; color:var(--gw-ink-soft);
}
.compare-cta { margin-top:var(--space-md); }

/* ============================================================
   PRICING ESTIMATOR (live total from tier + tapped add-ons)
   ============================================================ */
.addons-list li.addon-toggle { cursor:pointer; padding-left:1.9rem; position:relative; transition:background var(--duration-fast) var(--ease); }
.addons-list li.addon-toggle::before {
  content:""; position:absolute; left:.15rem; top:50%; transform:translateY(-50%);
  width:15px; height:15px; border-radius:5px; border:2px solid rgba(7,7,11,.25);
  background:#fff; transition:background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.addons-list li.addon-toggle:hover { background:rgba(21,87,255,.05); }
.addons-list li.addon-toggle.is-added { background:rgba(21,87,255,.07); }
.addons-list li.addon-toggle.is-added::before {
  content:"\2713"; color:#fff; font-size:.62rem; font-weight:700; line-height:15px;
  text-align:center; background:var(--gw-cobalt); border-color:var(--gw-cobalt);
}
.estimate-bar {
  margin-top:var(--space-lg); padding-top:var(--space-lg);
  border-top:1px solid var(--gw-border-light);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-md); flex-wrap:wrap;
}
.estimate-bar__label {
  display:block; font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; color:var(--violet); margin-bottom:.25rem;
}
.estimate-bar__total { font-family:var(--font-mono); font-weight:700; font-size:clamp(1.9rem,3vw,2.6rem); color:var(--gw-cobalt); line-height:1; }
.estimate-bar__hint { flex-basis:100%; order:3; font-size:.78rem; color:var(--muted); margin:0; }

/* Pricing bridge line: points price-sensitive buyers back to the $299 promo */
.pricing-bridge {
  margin:0 0 clamp(20px,3vw,32px); font-size:var(--fs-small); color:var(--gw-muted);
}
.pricing-bridge a {
  color:var(--gw-cobalt); font-weight:600; text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1.5px;
}
.pricing-bridge a:hover { color:var(--gw-cobalt-hover); }

/* ============================================================
   SIMPLE START $299 PROMO BAND (dark, after samples)
   ============================================================ */
.section--promo { background:var(--gw-charcoal); position:relative; overflow:hidden; padding-block:clamp(3rem,7vw,5.5rem); }
.section--promo::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 10% 15%,rgba(183,255,42,.06),transparent 38%),radial-gradient(circle at 88% 85%,rgba(109,53,255,.18),transparent 46%);
}
.section--promo .wrap { position:relative; z-index:1; }
.promo-banner {
  display:grid; gap:clamp(24px,4vw,48px); align-items:center;
  border:1px solid var(--gw-border-dark); border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(21,87,255,.16) 0%,rgba(109,53,255,.13) 55%,rgba(183,255,42,.05) 100%);
  padding:clamp(28px,5vw,56px);
  box-shadow:var(--gw-shadow-soft);
}
.promo-banner__price { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.promo-banner__tag {
  font-size:.72rem; font-weight:700; letter-spacing:.16em; color:var(--gw-lime);
  border:1px solid rgba(183,255,42,.4); border-radius:999px; padding:5px 14px;
}
.promo-banner__amount { font-size:var(--fs-price); font-weight:700; line-height:1; color:var(--gw-text); white-space:nowrap; }
/* longer currency strings ("299 $", "US$ 299") must not wrap in the price column */
html[lang="fr"] .promo-banner__amount, html[lang="es"] .promo-banner__amount, html[lang="pt-PT"] .promo-banner__amount { font-size:clamp(2.6rem,4.5vw,4.5rem); }
html[lang="pt-BR"] .promo-banner__amount { font-size:clamp(2.2rem,4vw,3.8rem); }
.promo-banner__per { font-size:var(--fs-small); color:var(--gw-text-muted); }
.promo-banner__copy .eyebrow { color:var(--gw-lime); }
.promo-banner__copy h2 { color:var(--gw-text); }
.promo-banner__sub { margin-top:var(--space-sm); color:var(--gw-text-soft); max-width:58ch; }
.promo-banner__list { list-style:none; margin-top:var(--space-md); display:grid; gap:10px 28px; }
.promo-banner__list li { position:relative; padding-left:26px; color:var(--gw-text-soft); font-size:var(--fs-small); line-height:1.5; }
.promo-banner__list li::before {
  content:"\2713"; position:absolute; left:0; top:1px; width:17px; height:17px;
  border-radius:50%; background:rgba(183,255,42,.16); color:var(--gw-lime);
  font-size:.62rem; font-weight:700; line-height:17px; text-align:center;
}
.promo-banner__cta { margin-top:var(--space-md); display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.promo-banner__meta { font-size:.76rem; color:var(--gw-text-muted); letter-spacing:.02em; }
@media (min-width:768px) {
  .promo-banner { grid-template-columns:minmax(200px,260px) 1fr; }
  .promo-banner__price {
    align-items:center; text-align:center; align-self:stretch; justify-content:center;
    border-right:1px solid var(--gw-border-soft); padding-right:clamp(20px,3vw,44px);
  }
  .promo-banner__list { grid-template-columns:1fr 1fr; }
}