/* ============================================================
   VEGAS AI SYSTEMS — SHARED DESIGN KIT (single source of truth)
   One stylesheet. Every landing page links it. Change it once →
   every page (and every brand palette) updates.
   ============================================================ */
:root{
  --bg:#0a0a12; --bg2:#11111d; --card:#16162a; --line:#262640;
  --ink:#eef0ff; --mut:#a6a9c8;
  --neon:#22e0c8; --pink:#ff4d8d; --violet:#8b6cff;
  --win:#3ee08f; /* reserved: REAL-outcome green (booked/recovered revenue · approved receipts · rank-to-green). Used rarely so it POPS — never a primary accent; --neon teal is the main. */
  --max:1080px;
  --glow-neon:color-mix(in srgb, var(--neon) 60%, transparent);
  --tint-neon:color-mix(in srgb, var(--neon) 14%, transparent);
  --tint-violet:color-mix(in srgb, var(--violet) 14%, transparent);
  --tint-pink:color-mix(in srgb, var(--pink) 12%, transparent);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* brand palettes — swap via body[data-theme] (dock or per-page default) */
body[data-theme="sunset"]{ --neon:#ffb14d; --pink:#ff5e7e; --violet:#ff7eb6; }
body[data-theme="electric"]{ --neon:#5df2ff; --pink:#7b8cff; --violet:#b06bff; }
body[data-theme="matrix"]{ --neon:#46f08a; --pink:#00e5a8; --violet:#19c37d; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:-20vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 38% at 18% 12%, var(--tint-neon), transparent 60%),
    radial-gradient(42% 42% at 85% 8%, var(--tint-violet), transparent 60%),
    radial-gradient(45% 45% at 70% 95%, var(--tint-pink), transparent 60%);
  filter:blur(20px); animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{ from{transform:translate3d(-3%,-2%,0) rotate(0deg)} to{transform:translate3d(4%,3%,0) rotate(8deg)} }
@media (prefers-reduced-motion: reduce){ body::before, body::after { animation:none !important; } }

a{color:var(--neon); text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.neon{color:var(--neon)} .pink{color:var(--pink)}

/* buttons */
.btn{position:relative; display:inline-block; font-weight:700; padding:14px 22px; border-radius:12px;
     border:1px solid transparent; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; will-change:transform}
.btn-primary{background:linear-gradient(120deg,var(--neon),var(--violet)); color:#05050a;
     box-shadow:0 8px 30px -10px var(--glow-neon)}
.btn-primary:hover{box-shadow:0 14px 44px -10px var(--glow-neon), 0 0 0 1px color-mix(in srgb,var(--neon) 50%,transparent)}
.btn-primary::after{content:""; position:absolute; inset:0; border-radius:inherit; overflow:hidden;
     background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 45%,transparent 60%);
     background-size:250% 100%; background-position:140% 0; opacity:.0; transition:opacity .2s}
.btn-primary:hover::after{opacity:.9; animation:shine 1s var(--ease)}
@keyframes shine{from{background-position:140% 0}to{background-position:-40% 0}}
.btn-ghost{border-color:var(--line); color:var(--ink); background:color-mix(in srgb,var(--card) 50%,transparent)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--neon) 55%,var(--line)); box-shadow:0 0 0 3px var(--tint-neon)}
.btn:focus-visible{outline:3px solid var(--pink); outline-offset:2px}

/* scroll progress */
#progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:50;
  background:linear-gradient(90deg,var(--neon),var(--violet),var(--pink)); box-shadow:0 0 12px var(--glow-neon)}

/* header */
header{position:sticky; top:0; z-index:20; background:rgba(10,10,18,.55); backdrop-filter:blur(8px);
  border-bottom:1px solid transparent; transition:background .3s, border-color .3s, box-shadow .3s}
header.scrolled{background:rgba(10,10,18,.86); border-bottom-color:var(--line); box-shadow:0 10px 30px -20px #000}
.nav{display:flex; align-items:center; justify-content:space-between; height:62px; gap:12px}
.brand{font-weight:800; letter-spacing:.3px; font-size:18px; display:flex; align-items:center; gap:9px}
.brand .mark{width:24px; height:24px; flex:0 0 auto}
.brand b{color:var(--neon)}
.badge{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--neon);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; background:var(--tint-neon)}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--neon); box-shadow:0 0 0 0 var(--glow-neon); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow-neon)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* hero */
.hero{position:relative; overflow:hidden; padding:84px 0 64px}
#vector-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9}
.hero .wrap{position:relative; z-index:1}
.hero h1{font-size:clamp(32px,5.4vw,58px); line-height:1.06; margin:16px 0 14px; letter-spacing:-.6px; font-weight:800}
.hero h1 .neon, .hero h1 .pink{position:relative; text-shadow:0 0 26px color-mix(in srgb,currentColor 55%,transparent)}
.hero p.lede{font-size:clamp(17px,2.3vw,21px); color:var(--mut); max-width:680px; margin:0 0 24px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.tagline{font-size:14px; color:var(--mut); margin-top:18px}
.tagline b{color:var(--neon)}
.count{font-variant-numeric:tabular-nums}

/* trade picker */
.trades{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 4px}
.chip{cursor:pointer; font:inherit; font-weight:700; font-size:13.5px; color:var(--mut);
  background:color-mix(in srgb,var(--card) 70%,transparent); border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; transition:all .2s var(--ease)}
.chip:hover{color:var(--ink); border-color:color-mix(in srgb,var(--neon) 45%,var(--line))}
.chip[aria-pressed="true"]{color:#05050a; background:linear-gradient(120deg,var(--neon),var(--violet)); border-color:transparent; box-shadow:0 6px 20px -8px var(--glow-neon)}
.trade-hint{font-size:12.5px; color:var(--mut); margin:8px 0 0}

/* capsule */
.capsule{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0}
.capsule p{margin:0; font-size:18px; color:var(--ink)}
.capsule b{color:var(--neon)}

section{padding:60px 0}
h2{font-size:clamp(24px,3.4vw,34px); letter-spacing:-.4px; margin:0 0 8px; font-weight:800}
.sub{color:var(--mut); margin:0 0 30px; max-width:660px}

.grid{display:grid; gap:18px}
.two{grid-template-columns:1fr 1fr}
.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){ .two,.three{grid-template-columns:1fr} }

/* cards */
.card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px;
  transition:transform .2s var(--ease), border-color .3s, box-shadow .3s; transform-style:preserve-3d}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .3s; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), var(--tint-neon), transparent 45%)}
.card:hover{border-color:color-mix(in srgb,var(--neon) 35%,var(--line)); box-shadow:0 24px 60px -30px var(--glow-neon)}
.card:hover::before{opacity:1}
.card h3{margin:0 0 6px; font-size:21px}
.kicker{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.4px; color:var(--pink)}
.card ul{margin:14px 0 0; padding-left:18px; color:var(--mut)}
.card li{margin:6px 0}
.card li b{color:var(--ink)}

.feat{position:relative; display:flex; gap:13px; align-items:flex-start; padding:18px; border-radius:14px;
  border:1px solid transparent; transition:border-color .3s, background .3s, transform .2s var(--ease)}
.feat:hover{border-color:var(--line); background:color-mix(in srgb,var(--card) 55%,transparent); transform:translateY(-3px)}
.dot{flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
     background:linear-gradient(135deg,var(--tint-neon),var(--tint-violet)); border:1px solid var(--line); font-size:19px}
.feat h4{margin:0 0 3px; font-size:16px}
.feat p{margin:0; color:var(--mut); font-size:14.5px}

/* interactive demos */
.demo{background:linear-gradient(180deg,color-mix(in srgb,var(--card) 80%,transparent),var(--card));
  border:1px solid var(--line); border-radius:18px; padding:22px; overflow:hidden; position:relative}
.demo-head{display:flex; align-items:center; gap:8px; margin-bottom:14px}
.demo-tag{font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--pink)}
.winlights{display:flex; gap:6px; margin-left:auto}
.winlights i{width:10px; height:10px; border-radius:50%; display:inline-block; opacity:.8}
.winlights i:nth-child(1){background:#ff5f57}.winlights i:nth-child(2){background:#febc2e}.winlights i:nth-child(3){background:#28c840}

.searchbar{display:flex; gap:8px; align-items:center; background:#0c0c18; border:1px solid var(--line);
  border-radius:12px; padding:10px 12px}
.searchbar .q{flex:1; color:var(--ink); font-size:15px; min-height:22px}
.searchbar .ai{font-size:11px; font-weight:800; color:var(--neon); border:1px solid var(--line); border-radius:6px; padding:3px 7px; white-space:nowrap}
.answer{margin-top:14px; min-height:96px; background:#0c0c18; border:1px solid var(--line); border-radius:12px; padding:16px; font-size:15.5px; line-height:1.55}
.answer .src{display:inline-block; margin-top:12px; font-size:12px; color:var(--neon); border:1px solid var(--line); border-radius:8px; padding:4px 10px; background:var(--tint-neon)}
.thinking{display:inline-flex; gap:5px}
.thinking span{width:7px; height:7px; border-radius:50%; background:var(--mut); animation:bob 1s infinite}
.thinking span:nth-child(2){animation-delay:.15s}.thinking span:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,100%{opacity:.3; transform:translateY(0)}50%{opacity:1; transform:translateY(-4px)}}
.caret::after{content:"▌"; color:var(--neon); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.qchips{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}

.phone{display:flex; flex-direction:column; gap:10px}
.phone-screen{background:#0c0c18; border:1px solid var(--line); border-radius:14px; padding:14px; min-height:210px;
  display:flex; flex-direction:column; gap:9px; justify-content:flex-start}
.ringing{display:flex; flex-direction:column; align-items:center; gap:12px; padding:26px 0; text-align:center}
.ring-ico{font-size:40px; animation:wobble 0.7s var(--ease) infinite}
@keyframes wobble{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.bubble{max-width:84%; padding:9px 13px; border-radius:14px; font-size:14.5px; line-height:1.45; animation:rise .35s var(--ease) both}
.bubble.ai{align-self:flex-start; background:color-mix(in srgb,var(--neon) 16%,#0c0c18); border:1px solid color-mix(in srgb,var(--neon) 30%,var(--line)); border-bottom-left-radius:4px}
.bubble.caller{align-self:flex-end; background:#1a1a30; border:1px solid var(--line); border-bottom-right-radius:4px}
.booked{align-self:center; font-weight:800; color:#05050a; background:linear-gradient(120deg,var(--neon),var(--violet)); padding:8px 14px; border-radius:999px; font-size:13.5px; animation:rise .4s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}

.es{background:linear-gradient(120deg,var(--tint-pink),var(--tint-violet)); border:1px solid var(--line); border-radius:18px; padding:32px}
.es h2{margin-top:0}

details{border:1px solid var(--line); border-radius:12px; padding:4px 18px; margin:10px 0; background:var(--card); transition:border-color .25s}
details[open]{border-color:color-mix(in srgb,var(--neon) 30%,var(--line))}
details summary{cursor:pointer; font-weight:700; padding:15px 0; list-style:none; transition:color .2s}
details summary:hover{color:var(--neon)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; float:right; color:var(--neon); font-size:22px; line-height:1; transition:transform .25s var(--ease)}
details[open] summary::after{content:"–"}
details p{color:var(--mut); margin:0 0 16px; animation:rise .3s var(--ease)}

.cta-final{text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(60% 130% at 50% 0%, var(--tint-neon), transparent 60%); border-top:1px solid var(--line)}
footer{border-top:1px solid var(--line); color:var(--mut); font-size:13.5px; padding:30px 0}
.foot-flag{display:inline-block; margin-top:8px; padding:4px 10px; border:1px solid var(--line); border-radius:8px; color:var(--neon)}
.footlinks{display:flex; flex-wrap:wrap; gap:28px; margin:18px 0 22px}
.footcol{display:flex; flex-direction:column; gap:7px}
.foothead{font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--mut); opacity:.8; margin-bottom:3px}
.footcol a{color:var(--ink); font-weight:600; font-size:13.5px; transition:color .2s}
.footcol a:hover{color:var(--neon)}

/* articles / content network */
.article-hero{padding:64px 0 30px}
.crumbs{font-size:13px; color:var(--mut); margin-bottom:10px}
.crumbs a{color:var(--mut)} .crumbs a:hover{color:var(--neon)}
.meta{font-size:13px; color:var(--mut); margin-top:14px}
.prose-wrap{max-width:760px; padding-bottom:20px}
.answer-box{position:relative; background:linear-gradient(120deg,var(--tint-neon),var(--tint-violet)); border:1px solid color-mix(in srgb,var(--neon) 30%,var(--line)); border-radius:16px; padding:22px 24px; margin:6px 0 30px}
.answer-label{font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--neon)}
.answer-box p{margin:8px 0 0; font-size:18px; line-height:1.6; color:var(--ink)}
.prose h2{font-size:clamp(20px,2.6vw,26px); margin:34px 0 10px}
.prose p{color:var(--mut); margin:0 0 14px; font-size:16.5px}
.prose ul{color:var(--mut); margin:0 0 16px; padding-left:20px}
.prose li{margin:7px 0} .prose li b{color:var(--ink)}
.prose a{border-bottom:1px solid color-mix(in srgb,var(--neon) 40%,transparent)}
.prose code{background:#0c0c18; border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:13.5px; color:var(--neon)}
.takeaway{margin:28px 0; padding:18px 20px; border-left:3px solid var(--neon); background:color-mix(in srgb,var(--card) 60%,transparent); border-radius:0 12px 12px 0; color:var(--ink)}
.sources{margin:30px 0 6px}
.sources h2{font-size:18px; margin:0 0 10px}
.source-list{margin:0; padding-left:22px; color:var(--mut); font-size:14px; line-height:1.7}
.source-list li{margin:5px 0}
.source-list a{color:var(--neon); text-decoration:underline; text-underline-offset:2px}
.src-pub{color:var(--ink)} .src-date{color:var(--mut)}
.cta-band{text-align:center; margin:40px 0 10px; padding:30px 22px; border:1px solid var(--line); border-radius:18px;
  background:radial-gradient(70% 120% at 50% 0%, var(--tint-neon), transparent 60%)}
.cta-band h3{margin:0 0 6px; font-size:24px}
.cta-band p{margin:0 0 18px; color:var(--mut)}
.related{margin:34px 0 0; border-top:1px solid var(--line); padding-top:20px}
.related-links{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:8px}
.related-links a{font-weight:600}

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

/* customize dock */
#dock{position:fixed; right:18px; bottom:18px; z-index:40; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
#dock-panel{display:none; flex-direction:column; gap:12px; background:rgba(16,16,30,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:16px; padding:14px; width:228px; box-shadow:0 30px 70px -30px #000; animation:rise .25s var(--ease)}
#dock.open #dock-panel{display:flex}
.dock-row{display:flex; flex-direction:column; gap:7px}
.dock-label{font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--mut)}
.swatches{display:flex; gap:9px}
.sw{width:30px; height:30px; border-radius:9px; cursor:pointer; border:2px solid transparent; transition:transform .15s, border-color .2s}
.sw:hover{transform:scale(1.12)}
.sw[aria-pressed="true"]{border-color:#fff}
.sw.vector{background:linear-gradient(135deg,#22e0c8,#8b6cff)}
.sw.sunset{background:linear-gradient(135deg,#ffb14d,#ff5e7e)}
.sw.electric{background:linear-gradient(135deg,#5df2ff,#b06bff)}
.sw.matrix{background:linear-gradient(135deg,#46f08a,#19c37d)}
.toggle-row{display:flex; gap:8px}
.tg{flex:1; cursor:pointer; font:inherit; font-weight:700; font-size:13px; color:var(--mut); text-align:center;
  background:color-mix(in srgb,var(--card) 70%,transparent); border:1px solid var(--line); border-radius:9px; padding:8px}
.tg[aria-pressed="true"]{color:#05050a; background:linear-gradient(120deg,var(--neon),var(--violet)); border-color:transparent}
#dock-toggle{width:54px; height:54px; border-radius:16px; cursor:pointer; border:1px solid var(--line);
  background:rgba(16,16,30,.92); backdrop-filter:blur(10px); font-size:22px; box-shadow:0 18px 40px -18px #000;
  transition:transform .25s var(--ease), box-shadow .25s}
#dock-toggle:hover{transform:translateY(-2px) rotate(-8deg); box-shadow:0 22px 50px -18px var(--glow-neon)}

/* reduced motion */
body.motion-off *,
body.motion-off *::before,
body.motion-off *::after{animation:none !important; transition:none !important}
body.motion-off #vector-canvas{display:none}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* ============================================================
   DESIGN v2 — type system, depth, rhythm & component polish.
   Appended so it refines the base above via normal cascade.
   ============================================================ */
:root{
  --font-display:"Space Grotesk", system-ui, "Segoe UI", sans-serif;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --sh-2:0 12px 30px -16px rgba(0,0,0,.7);
  --sh-glow:0 24px 70px -34px var(--glow-neon);
  --hair:color-mix(in srgb, var(--line) 70%, transparent);
}
/* fine film-grain for depth (no extra requests) */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* display type + tighter tracking on everything structural */
h1,h2,h3,h4,.brand,.kicker,.demo-tag,.dock-label,.foothead,
.cta-band h3,.answer-box,.va-card h3,.va-band,.vt-head h3,.vt-kick,.va-kick{
  font-family:var(--font-display);
}
h1{letter-spacing:-1px} h2{letter-spacing:-.6px}
.hero h1{font-weight:700; letter-spacing:-1.5px; line-height:1.04}
.lede,h2{text-wrap:balance}

/* buttons — softer, deeper, more tactile */
.btn{border-radius:var(--r-md); padding:14px 24px; letter-spacing:.2px}
.btn-primary{box-shadow:var(--sh-2), 0 10px 34px -14px var(--glow-neon)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{backdrop-filter:blur(6px)}

/* cards & panels — unified depth + crisper hairlines */
.card,.demo,.va-card,.vt-panel,.es,details{border-color:var(--hair)}
.card{border-radius:var(--r-lg); box-shadow:var(--sh-2)}
.card:hover{box-shadow:var(--sh-glow)}
.demo{border-radius:var(--r-xl); box-shadow:var(--sh-2)}

/* eyebrow chip for section heads */
.section-eyebrow{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display);
  font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--neon);
  border:1px solid var(--hair); background:var(--tint-neon); border-radius:999px; padding:5px 12px; margin-bottom:14px}

/* neon hairline divider */
.divider{height:1px; border:0; margin:0; background:linear-gradient(90deg,transparent,var(--hair) 20%,color-mix(in srgb,var(--neon) 45%,transparent) 50%,var(--hair) 80%,transparent)}

/* ── HOW-IT-WORKS 3-step flow ─────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; position:relative; counter-reset:step}
.steps .step{counter-increment:step; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg); padding:24px 22px; position:relative; box-shadow:var(--sh-2)}
.steps .step::before{content:counter(step); position:absolute; top:-14px; left:22px; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:800; color:#05050a;
  background:linear-gradient(120deg,var(--neon),var(--violet)); box-shadow:0 8px 20px -8px var(--glow-neon)}
.steps .step .ic{font-size:24px; margin-bottom:8px; display:block}
.steps .step h4{margin:0 0 4px; font-size:17px}
.steps .step p{margin:0; color:var(--mut); font-size:14px}
@media(max-width:780px){ .steps{grid-template-columns:1fr} }

/* ── software UI polish ───────────────────────────────────── */
.demo-head{padding-bottom:12px; border-bottom:1px solid var(--hair); margin-bottom:16px}
.va-card{border-radius:var(--r-xl); box-shadow:var(--sh-glow)}
.va-gauge .g-fg{filter:drop-shadow(0 0 6px var(--glow-neon))}
.vt-panel{border-radius:var(--r-lg)}
.vt-scorechip b,.va-score-num b,.count{font-family:var(--font-display)}
.vt-cell.named{box-shadow:0 4px 12px -6px var(--glow-neon)}

/* dock background-style picker */
.bgpick{display:flex; gap:8px; flex-wrap:wrap}
.bgpick .bg{flex:1; min-width:60px; cursor:pointer; font:inherit; font-weight:700; font-size:11.5px; color:var(--mut);
  background:color-mix(in srgb,var(--card) 70%,transparent); border:1px solid var(--line); border-radius:8px; padding:7px 6px; text-align:center; transition:all .2s var(--ease)}
.bgpick .bg:hover{color:var(--ink); border-color:color-mix(in srgb,var(--neon) 45%,var(--line))}
.bgpick .bg[aria-pressed="true"]{color:#05050a; background:linear-gradient(120deg,var(--neon),var(--violet)); border-color:transparent}

/* ============================================================
   DESIGN v2.1 — branding / marketing / sales modules
   ============================================================ */
/* announcement bar */
.annobar{position:relative; z-index:21; background:linear-gradient(90deg,var(--tint-neon),var(--tint-violet));
  border-bottom:1px solid var(--hair); font-size:13.5px; text-align:center; padding:9px 40px; color:var(--ink)}
.annobar a{font-weight:700}
.annobar .x{position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer; background:none; border:0; color:var(--mut); font-size:18px; line-height:1; padding:4px}
.annobar.hide{display:none}

/* header nav */
.navlinks{display:flex; align-items:center; gap:20px}
.navlinks a:not(.btn){color:var(--mut); font-weight:600; font-size:14px}
.navlinks a:not(.btn):hover{color:var(--ink)}
.btn-sm{padding:9px 16px; border-radius:10px; font-size:13.5px}
@media(max-width:640px){ .navlinks a:not(.btn){display:none} }

/* trust strip */
.trust{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; padding:15px 22px;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--bg2)}
.trust span{display:inline-flex; align-items:center; gap:8px; color:var(--mut); font-size:13.5px; font-weight:600}
.trust b{color:var(--ink)}

/* pricing */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; margin-top:8px}
@media(max-width:880px){ .pricing-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto} }
.price{position:relative; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-xl);
  padding:28px 24px; display:flex; flex-direction:column; box-shadow:var(--sh-2)}
.price.pop{border-color:color-mix(in srgb,var(--neon) 55%,var(--line)); box-shadow:var(--sh-glow); transform:translateY(-6px)}
@media(max-width:880px){ .price.pop{transform:none} }
.price .tag{position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-family:var(--font-display);
  font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#05050a;
  background:linear-gradient(120deg,var(--neon),var(--violet)); padding:4px 12px; border-radius:999px; white-space:nowrap}
.price h3{margin:0 0 2px; font-size:20px}
.price .desc{color:var(--mut); font-size:13.5px; margin:0 0 16px}
.price .amt{font-family:var(--font-display); font-size:40px; font-weight:700; line-height:1}
.price .amt small{font-size:14px; color:var(--mut); font-weight:600}
.price .per{color:var(--mut); font-size:12.5px; margin:5px 0 18px}
.price ul{list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:9px}
.price li{position:relative; padding-left:26px; color:var(--ink); font-size:14px; line-height:1.45}
.price li::before{content:"✓"; position:absolute; left:0; color:var(--neon); font-weight:800}
.price .btn{margin-top:auto; text-align:center; width:100%}

/* guarantee / risk-reversal */
.guarantee{display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; text-align:center;
  background:linear-gradient(120deg,var(--tint-neon),var(--tint-violet)); border:1px solid var(--hair);
  border-radius:var(--r-xl); padding:22px 26px; margin-top:20px}
.guarantee .gi{font-size:30px}
.guarantee p{margin:0; font-size:16px; max-width:680px} .guarantee b{color:var(--ink)}

/* sticky conversion CTA */
.sticky-cta{position:fixed; left:18px; bottom:18px; z-index:39; opacity:0; transform:translateY(12px);
  pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease)}
.sticky-cta.show{opacity:1; transform:none; pointer-events:auto}
.sticky-cta a{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:#05050a;
  background:linear-gradient(120deg,var(--neon),var(--violet)); border-radius:999px; padding:13px 20px; box-shadow:0 18px 40px -16px var(--glow-neon)}
.sticky-cta a:hover{transform:translateY(-1px)}
@media(max-width:640px){ .sticky-cta{left:12px; bottom:12px} .sticky-cta a{font-size:13px; padding:11px 16px} }

/* comparison table (us vs typical) */
.compare{border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; margin-top:8px}
.compare-row{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:0; align-items:center}
.compare-row+.compare-row{border-top:1px solid var(--hair)}
.compare-row span{padding:13px 16px; font-size:14px}
.compare-head span{font-family:var(--font-display); font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--mut); background:var(--bg2)}
.compare .ck{font-weight:700; color:var(--ink)}
.compare .us{color:var(--ink); font-weight:600; background:color-mix(in srgb,var(--neon) 7%,transparent)}
.compare-head .us{color:var(--neon)}
.compare .them{color:var(--mut)}
@media(max-width:640px){ .compare-row{grid-template-columns:1fr 1fr} .compare .ck{grid-column:1/-1; background:var(--bg2)} }

/* marketing page rhythm */
.mkt-section{padding:54px 0}
.mkt-section .sub{margin-bottom:22px}
.proofcard{display:flex; gap:22px; align-items:center; flex-wrap:wrap; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-xl); padding:26px; box-shadow:var(--sh-2)}
.proofcard .big{font-family:var(--font-display); font-size:60px; font-weight:700; line-height:1; color:#ff5e7e}
.proofcard .big small{display:block; font-size:14px; font-weight:700; color:var(--mut); letter-spacing:1px; text-transform:uppercase}
.proofcard .pc-body{flex:1; min-width:240px}
.proofcard .pc-body p{margin:0 0 6px; color:var(--mut)}

/* testimonials */
.tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
@media(max-width:880px){ .tgrid{grid-template-columns:1fr} }
.tcard{margin:0; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-2); display:flex; flex-direction:column; gap:10px}
.tcard .stars{color:var(--neon); letter-spacing:2px; font-size:15px}
.tcard blockquote{margin:0; font-size:15.5px; line-height:1.55; color:var(--ink)}
.tcard .tba{display:inline-flex; align-items:center; gap:10px; background:#0c0c18; border:1px solid var(--hair); border-radius:10px; padding:8px 12px; align-self:flex-start}
.tcard .tba .b{color:var(--mut); font-weight:800; font-family:var(--font-display)} .tcard .tba .arr{color:var(--neon)} .tcard .tba .a{color:var(--neon); font-weight:800; font-family:var(--font-display); font-size:18px}
.tcard .tba small{color:var(--mut)}
.tcard figcaption{color:var(--mut); font-size:13.5px; margin-top:auto} .tcard figcaption b{color:var(--ink)}

/* capture form (share your results) */
.cap-wrap{max-width:560px; margin:0 auto}
.cap-card{background:var(--card); border:1px solid var(--hair); border-radius:var(--r-xl); padding:28px; box-shadow:var(--sh-glow)}
.cap-card h3{margin:0 0 6px; font-size:22px}
.cap-label{display:block; font-size:12px; font-weight:700; color:var(--mut); margin:16px 0 7px}
.cap-input,.cap-area{width:100%; background:#0c0c18; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font:inherit; font-size:15px}
.cap-area{min-height:96px; resize:vertical}
.cap-input:focus,.cap-area:focus{outline:none; border-color:color-mix(in srgb,var(--neon) 55%,var(--line)); box-shadow:0 0 0 3px var(--tint-neon)}
.cap-opts{display:flex; gap:8px; flex-wrap:wrap}
.cap-opt{flex:1; min-width:96px; cursor:pointer; font:inherit; font-weight:700; font-size:13.5px; color:var(--ink); text-align:center; background:#0c0c18; border:1px solid var(--line); border-radius:10px; padding:11px; transition:all .18s}
.cap-opt.on{color:#05050a; background:linear-gradient(120deg,var(--neon),var(--violet)); border-color:transparent}
.cap-stars{display:flex; gap:6px; font-size:30px; cursor:pointer}
.cap-stars .st{color:var(--line); transition:color .12s} .cap-stars .st.on{color:var(--neon)}
.cap-two{display:flex; gap:10px} .cap-two>div{flex:1}
.cap-consent{display:flex; gap:10px; align-items:flex-start; margin:16px 0; font-size:13px; color:var(--mut)}
.cap-consent input{margin-top:3px}
.cap-card .btn{width:100%; text-align:center; margin-top:8px}
.cap-done{text-align:center; padding:10px 0}
.cap-done .big{font-size:40px}

/* ============================================================
   ACCESSIBILITY + INTERACTION best practices
   ============================================================ */
.skip{position:absolute; left:-9999px; top:0; z-index:60; background:var(--neon); color:#05050a; font-weight:800; padding:10px 16px; border-radius:0 0 12px 0; text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--neon); outline-offset:2px; border-radius:4px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* visible breadcrumbs (pairs with BreadcrumbList schema) */
.crumbs2{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--mut); margin-bottom:12px; flex-wrap:wrap}
.crumbs2 a{color:var(--mut)} .crumbs2 a:hover{color:var(--neon)} .crumbs2 .sep{opacity:.45}
.crumbs2 [aria-current]{color:var(--ink)}

/* back-to-top */
#totop{position:fixed; right:18px; bottom:84px; z-index:38; width:46px; height:46px; border-radius:13px; cursor:pointer;
  background:rgba(16,16,30,.92); backdrop-filter:blur(10px); border:1px solid var(--line); color:var(--ink); font-size:18px;
  opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease), box-shadow .25s}
#totop.show{opacity:1; transform:none; pointer-events:auto}
#totop:hover{border-color:var(--neon); box-shadow:0 12px 30px -14px var(--glow-neon)}
@media(max-width:640px){ #totop{bottom:74px; right:12px; width:42px; height:42px} }

/* article/content hub list */
.hublist{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px}
@media(max-width:780px){ .hublist{grid-template-columns:1fr} }
.hubcard{display:block; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-2); transition:transform .2s var(--ease), border-color .3s, box-shadow .3s}
.hubcard:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--neon) 35%,var(--line)); box-shadow:var(--sh-glow)}
.hubcard h3{margin:0 0 6px; font-size:18px; color:var(--ink)}
.hubcard p{margin:0; color:var(--mut); font-size:14px; line-height:1.5}
.hubcard .rm{display:inline-block; margin-top:10px; color:var(--neon); font-weight:700; font-size:13.5px}

/* geographic valley map */
.vmap{background:var(--card); border:1px solid var(--hair,var(--line)); border-radius:var(--r-lg,16px); padding:18px; box-shadow:var(--sh-2)}
.vmap svg{width:100%; height:auto; display:block}
.vmap a text{fill:var(--mut); font-family:var(--font-display,inherit); font-weight:700; pointer-events:none; transition:fill .2s}
.vmap a circle{fill:color-mix(in srgb,var(--violet) 60%,var(--card)); stroke:var(--line); stroke-width:.4; transition:fill .2s, r .2s}
.vmap a.vm-hub circle{fill:var(--neon); stroke:#fff; stroke-width:.6}
.vmap a.vm-hub text{fill:var(--neon)}
.vmap a:hover circle{fill:var(--neon)}
.vmap a:hover text{fill:var(--ink)}
.vmap a:focus-visible{outline:none}
.vmap a:focus-visible circle{fill:var(--neon); stroke:#fff; stroke-width:.8}
.vm-cap{text-align:center; color:var(--mut); font-size:12.5px; margin:10px 0 0}

/* areas-served grid */
.areagrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(max-width:780px){ .areagrid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .areagrid{grid-template-columns:1fr} }
.areacard{display:flex; flex-direction:column; gap:3px; background:var(--card); border:1px solid var(--hair,var(--line)); border-radius:var(--r-md,12px); padding:14px 16px; transition:transform .2s var(--ease), border-color .25s}
.areacard:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--neon) 40%,var(--line))}
.areacard b{color:var(--ink); font-size:15px}
.areacard .zips{color:var(--neon); font-size:11.5px; font-weight:700}
.areacard .ab{color:var(--mut); font-size:13px; line-height:1.45}

/* per-area market snapshot (landing pages) */
.snap{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
@media(max-width:780px){ .snap{grid-template-columns:repeat(3,1fr)} }
@media(max-width:440px){ .snap{grid-template-columns:repeat(2,1fr)} }
.snapcell{background:var(--card); border:1px solid var(--hair,var(--line)); border-radius:var(--r-md,12px); padding:14px 12px; text-align:center}
.snapcell b{display:block; font-family:var(--font-display,inherit); font-size:21px; color:var(--ink); line-height:1.1}
.snapcell span{font-size:11.5px; color:var(--mut)}
.snap-note{color:var(--mut); font-size:12.5px; margin:12px 0 0}

/* workspace density: compact mode tightens section + panel spacing */
.ws-compact .mkt-section{padding:30px 0}
.ws-compact .mi-panel,.ws-compact .cr-panel,.ws-compact .ie-card,.ws-compact .roi-panel,.ws-compact .vmap{padding:13px}
.ws-compact .ie-cards{gap:9px}

/* CRO-10: minimum 44px touch targets on interactive controls */
.btn, .navlinks a.btn, .chip, .tg, .cap-opt, .ob-opt, .va-opt, #dock-toggle,
.cap-input, .ob-input, .va-input, #totop, .lc-refresh, .vt-apply{ min-height:44px }
.navlinks a:not(.btn){ display:inline-flex; align-items:center; min-height:44px }
/* freshness signal (AEO-9) */
.foot-updated{ color:var(--mut); font-size:12.5px; opacity:.8; margin-top:6px }

/* ============================================================
   CONSENT BANNER — analytics opt-in (shown only when analytics
   keys are configured; never shown in default empty-key state).
   Positioned as a fixed bottom bar; fully keyboard-operable.
   ============================================================ */
#vvs-consent{
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:rgba(16,16,30,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:14px 22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  box-shadow:0 -12px 40px -20px #000;
  animation:rise .3s var(--ease,cubic-bezier(.2,.7,.2,1)) both;
}
.vvs-consent-text{
  flex:1; min-width:220px; margin:0;
  font-size:13.5px; line-height:1.5; color:var(--mut);
}
.vvs-consent-link{ color:var(--neon); }
.vvs-consent-btns{
  display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap;
}
.vvs-consent-btn{ min-width:110px; text-align:center; padding:11px 18px; font-size:13.5px; }
@media(max-width:520px){
  #vvs-consent{ flex-direction:column; }
  .vvs-consent-btns{ width:100%; }
  .vvs-consent-btn{ flex:1; }
}
.foot-updated time{ color:var(--neon) }