@font-face{font-family:"Geist";src:url("fonts/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* VEXLARI Digital — layout idea: a Surat operator's toolkit. Ink-teal base, zari-gold accent (Surat's textile thread), crisp grids, numbered process rails. */
:root{
  --bg:#f5f7f7;
  --surface:#ffffff;
  --ink:#0d2326;
  --muted:#4e6366;
  --line:#d9e2e3;
  --brand:#0f4c52;
  --brand-ink:#ffffff;
  --accent:#b9821f;
  --accent-soft:#f6ecd9;
  --tint:#e7f0f0;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --guj:"Noto Sans Gujarati", "Shruti", sans-serif;
  --radius:10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1517; --surface:#112124; --ink:#e6f0f0; --muted:#9cb1b3; --line:#21373a;
    --brand:#5cc3c8; --brand-ink:#06191b; --accent:#e3b257; --accent-soft:#2b2312; --tint:#13292c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a1517; --surface:#112124; --ink:#e6f0f0; --muted:#9cb1b3; --line:#21373a;
  --brand:#5cc3c8; --brand-ink:#06191b; --accent:#e3b257; --accent-soft:#2b2312; --tint:#13292c;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--brand);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.15;letter-spacing:-.01em}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;background:var(--surface);padding:8px 12px;z-index:10}

/* Header */
.site-head{position:sticky;top:0;z-index:5;background:color-mix(in srgb, var(--bg) 90%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap;padding-block:8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em}
.logo-mark{width:30px;height:30px;border-radius:8px;background:var(--brand);display:grid;place-items:center}
.logo-mark span{width:12px;height:12px;border:2.5px solid var(--accent);transform:rotate(45deg);border-radius:2px}
.logo small{font-family:var(--body);font-weight:600;font-size:12px;color:var(--muted);letter-spacing:.12em;margin-left:2px}
.menu{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.menu a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;padding:8px 10px;border-radius:6px}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink);background:var(--tint)}
.menu a.btn{color:var(--brand-ink);background:var(--brand);margin-left:6px}
.menu a.btn:hover{background:var(--brand);opacity:.92}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:12px 20px;border-radius:8px;text-decoration:none;border:1.5px solid var(--brand);background:var(--brand);color:var(--brand-ink);cursor:pointer;font-family:var(--body)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.gold{background:var(--accent);border-color:var(--accent);color:#1b1305}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* Hero */
.hero{padding:72px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.hero h1{font-size:clamp(40px,5.6vw,68px);margin:14px 0 18px;font-weight:700}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p.sub{font-size:19px;color:var(--muted);max-width:58ch;margin:0 0 28px}
.guj{font-family:var(--guj);font-size:18px;color:var(--muted);margin:0 0 22px}
.hero-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px}
.hero-card h2{font-size:18px;margin-bottom:14px}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checklist li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px}
.checklist li::before{content:"";width:18px;height:18px;margin-top:3px;border-radius:5px;background:var(--accent-soft);border:1.5px solid var(--accent)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* Sections */
section.sec{padding:72px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.sec-head h2{font-size:clamp(30px,3.8vw,44px);max-width:22ch}
.sec-head p{color:var(--muted);max-width:52ch;margin:0}
.tint{background:var(--tint)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:20px}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.card .tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.card ul{margin:4px 0 0;padding-left:18px;color:var(--ink);font-size:15px}
.card ul li{margin:4px 0}
.card .more{margin-top:auto;padding-top:8px;font-weight:600;font-size:15px;text-decoration:none}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:var(--brand)}
.icon{width:42px;height:42px;border-radius:10px;background:var(--tint);display:grid;place-items:center;color:var(--brand)}
.icon svg{width:22px;height:22px}

/* Outcomes strip */
.outcomes{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.outcomes div{padding:22px}
.outcomes div + div{border-left:1px solid var(--line)}
.outcomes b{display:block;font-family:var(--display);font-size:26px;color:var(--brand)}
.outcomes span{font-size:14.5px;color:var(--muted)}
@media (max-width:780px){.outcomes{grid-template-columns:1fr 1fr}.outcomes div:nth-child(3){border-left:none}.outcomes div:nth-child(n+3){border-top:1px solid var(--line)}}

/* Process */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;border-top:3px solid var(--accent)}
.steps li::before{content:"0" counter(s);font-family:var(--display);font-weight:700;color:var(--accent);font-size:15px}
.steps h3{font-size:18px;margin:6px 0 6px}
.steps p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Plans (no pricing) */
.plan{position:relative}
.plan.featured{border:2px solid var(--brand)}
.plan .badge{position:absolute;top:-12px;left:22px;background:var(--brand);color:var(--brand-ink);font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.plan .for{font-size:14.5px;color:var(--muted)}

/* Founder */
.founder{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.fact b{display:block;font-family:var(--display);font-size:24px;color:var(--brand)}
.fact span{font-size:14px;color:var(--muted)}
@media (max-width:860px){.founder{grid-template-columns:1fr}}

/* FAQ */
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px}
details + details{margin-top:10px}
summary{cursor:pointer;font-weight:600;font-size:16.5px}
details p{color:var(--muted);margin:10px 0 0}

/* CTA band */
.band{background:var(--brand);color:var(--brand-ink);border-radius:16px;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.band h2{font-size:clamp(26px,3.2vw,38px);max-width:22ch}
.band p{margin:8px 0 0;opacity:.85;max-width:52ch}
.band .btn{background:var(--accent);border-color:var(--accent);color:#1b1305}

/* Page header */
.page-head{padding:56px 0 40px}
.page-head h1{font-size:clamp(36px,5vw,56px);margin:12px 0 14px}
.page-head p{color:var(--muted);font-size:18.5px;max-width:62ch;margin:0}
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}

/* Service detail rows */
.svc{display:grid;grid-template-columns:280px 1fr;gap:32px;padding:40px 0;border-top:1px solid var(--line)}
.svc h2{font-size:28px}
.svc .lead{color:var(--muted);margin:10px 0 0;font-size:15.5px}
.svc-body{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.svc-body h3{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-family:var(--body);font-weight:700;margin-bottom:8px}
.svc-body ul{margin:0;padding-left:18px}
.svc-body li{margin:5px 0;font-size:15.5px}
@media (max-width:860px){.svc{grid-template-columns:1fr;gap:16px}.svc-body{grid-template-columns:1fr}}

/* Article */
.article{padding:48px 0 72px}
.article h1{font-size:clamp(34px,4.6vw,50px);margin:14px 0 16px}
.meta{font-size:14px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.prose{font-size:17.5px}
.prose h2{font-size:28px;margin:40px 0 12px}
.prose h3{font-size:21px;margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 18px}
.prose li{margin:6px 0}
.prose blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.table-wrap{overflow-x:auto}
.note{background:var(--tint);border-radius:var(--radius);padding:18px 20px;font-size:15.5px;margin:24px 0}
.article-foot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}

/* Blog / KB listing */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filters button{font:600 14px var(--body);padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.search{width:100%;max-width:520px;font:500 16px var(--body);padding:13px 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);margin-bottom:22px}
[hidden]{display:none !important}
.kb-cat h2{font-size:22px;margin:32px 0 12px}
.kb-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kb-list a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15.5px}
.kb-list a span{display:block;font-weight:400;color:var(--muted);font-size:14px;margin-top:2px}
.kb-list a:hover{border-color:var(--brand)}
@media (max-width:640px){.kb-list{grid-template-columns:1fr}}
.empty{color:var(--muted)}

/* Forms */
form.enquiry{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.enquiry .full{grid-column:1 / -1}
label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
input,select,textarea{width:100%;font:500 16px var(--body);padding:12px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
textarea{min-height:120px;resize:vertical}
.form-msg{grid-column:1 / -1;font-size:15px;margin:0}
@media (max-width:620px){form.enquiry{grid-template-columns:1fr}}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding:48px 0 32px;margin-top:72px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
.foot-grid h4{font-family:var(--body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:6px 0}
.foot-grid a{color:var(--ink);text-decoration:none}
.foot-grid a:hover{color:var(--brand)}
.legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}

/* WhatsApp float */
.wa{position:fixed;right:18px;bottom:18px;z-index:6;background:#1f8f4e;color:#fff;border-radius:999px;padding:12px 18px;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.18)}
@media (max-width:760px){
  .site-head{position:static}
  .menu{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px}
  .menu a{white-space:nowrap}
  .hero{padding:40px 0 48px}
}

/* ================= Motion & experience layer ================= */
:root{--hero-bg:#081b1e;--hero-ink:#eaf4f4;--hero-muted:#a9c2c4;--gold:#e0ad4f}
.site-head{transition:box-shadow .25s ease, background .25s ease}
.site-head.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.08)}
.menu-toggle{display:none;font:600 15px var(--body);background:var(--tint);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 14px;cursor:pointer}

/* Dark animated hero */
.hero.dark{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-ink);padding:96px 0 88px;isolation:isolate}
.hero.dark canvas#threads{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.hero.dark::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 15% 30%, rgba(8,27,30,.0), rgba(8,27,30,.75) 75%),linear-gradient(180deg, rgba(8,27,30,0) 70%, var(--hero-bg))}
.hero.dark .kicker{color:var(--gold)}
.hero.dark h1{color:#fff}
.hero.dark h1 em{color:var(--gold)}
.hero.dark .sub,.hero.dark .guj{color:var(--hero-muted)}
.hero.dark .btn{background:var(--gold);border-color:var(--gold);color:#1b1305}
.hero.dark .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.hero.dark .btn.ghost:hover{border-color:#fff}
.h-line{display:block;overflow:hidden;padding-bottom:.06em}
.h-line > span{display:inline-block;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.h-line:nth-child(2) > span{animation-delay:.12s}
.h-line:nth-child(3) > span{animation-delay:.24s}
.fade-up{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.35s}.d2{animation-delay:.5s}.d3{animation-delay:.65s}.d4{animation-delay:.8s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Live enquiry flow card */
.flow-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);border-radius:16px;padding:22px;color:var(--hero-ink)}
.flow-card h2{font-size:15px;font-family:var(--body);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-muted);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.live-dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flow li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:background .4s, border-color .4s, transform .4s}
.flow li .n{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-weight:700;font-size:13px}
.flow li b{display:block;font-size:15px}
.flow li small{color:var(--hero-muted);font-size:13px}
.flow li .t{font-size:12px;color:var(--hero-muted);font-variant-numeric:tabular-nums}
.flow li.on{background:rgba(224,173,79,.14);border-color:rgba(224,173,79,.55);transform:translateX(4px)}
.flow li.on .n{background:var(--gold);color:#1b1305}
.flow li.done .n{background:rgba(61,220,132,.25)}
.flow-foot{margin-top:14px;font-size:13px;color:var(--hero-muted)}

/* Marquee */
.marquee{border-block:1px solid var(--line);background:var(--surface);overflow:hidden;padding:14px 0}
.marquee-track{display:flex;gap:42px;width:max-content;animation:marquee 38s linear infinite}
.marquee span{font-family:var(--display);font-weight:600;font-size:18px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:42px}
.marquee span::after{content:"";width:8px;height:8px;border:2px solid var(--accent);transform:rotate(45deg)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Scroll reveal: content stays visible without JS; JS adds .js then reveals */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.js .stagger.in > *{opacity:1;transform:none}
.js .stagger.in > *:nth-child(2){transition-delay:.08s}.js .stagger.in > *:nth-child(3){transition-delay:.16s}
.js .stagger.in > *:nth-child(4){transition-delay:.24s}.js .stagger.in > *:nth-child(5){transition-delay:.32s}.js .stagger.in > *:nth-child(6){transition-delay:.4s}

/* Card interactions */
.card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
a.card:hover,.card.lift:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(13,35,38,.10)}
a.card .more{transition:letter-spacing .2s}
a.card:hover .more{letter-spacing:.02em}
.btn{transition:transform .15s ease, box-shadow .2s ease, opacity .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.12)}

/* Article reading progress + TOC */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:20}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:24px 0}
.toc b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toc ol{margin:8px 0 0;padding-left:20px;font-size:15.5px}
.toc li{margin:4px 0}

/* Mobile drawer menu */
@media (max-width:860px){
  .site-head{position:sticky}
  .menu-toggle{display:inline-block}
  .menu{display:none;width:100%;flex-direction:column;align-items:stretch;padding:8px 0 14px;overflow:visible}
  .menu.open{display:flex}
  .menu a{padding:12px 10px;font-size:16px}
  .menu a.btn{margin:8px 0 0;justify-content:center}
  .hero.dark{padding:64px 0 56px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal,.js .stagger > *{opacity:1;transform:none}
}
@media (max-width:620px){.wa{right:12px;bottom:12px;padding:10px 14px;font-size:14px}}
.head-tools{display:flex;align-items:center;gap:6px}
@media (min-width:861px){.head-tools{order:3}}

/* ================= THEME V2: futuristic, dark-first ================= */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"]{
  --bg:#05100f; --surface:rgba(255,255,255,.035); --surface-solid:#0b1a1b; --ink:#e9f3f2; --muted:#93aaa9; --line:rgba(160,220,215,.14);
  --brand:#38e0d0; --brand-ink:#04110f; --accent:#f2b84b; --accent-soft:rgba(242,184,75,.10); --tint:rgba(56,224,208,.06);
  --glow:0 0 0 1px rgba(56,224,208,.25), 0 10px 40px rgba(56,224,208,.10);
  --display:"Unbounded", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg:#f3f6f6; --surface:#ffffff; --surface-solid:#ffffff; --ink:#071a1a; --muted:#4f6464; --line:#d6e2e1;
  --brand:#0b7f78; --brand-ink:#ffffff; --accent:#b87b10; --accent-soft:#fbf0dc; --tint:#e6f2f1;
  --glow:0 0 0 1px rgba(11,127,120,.2), 0 10px 30px rgba(11,127,120,.08);
  color-scheme: light;
}
body{background:var(--bg);background-image:radial-gradient(1200px 600px at 85% -10%, rgba(56,224,208,.07), transparent 60%),radial-gradient(900px 500px at -10% 40%, rgba(242,184,75,.05), transparent 60%);background-attachment:fixed}
:root[data-theme="light"] body{background-image:none}
h1,h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
h3,h4{font-family:var(--body);font-weight:700;letter-spacing:-.005em}
.kicker,.tag,.card .tag,.ba span,.xp-tabs .tn,.steps li::before,.eyebrow-mono{font-family:var(--mono);letter-spacing:.08em}
.site-head{background:color-mix(in srgb, var(--bg) 78%, transparent);border-bottom:1px solid var(--line)}
.logo{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.06em}
.logo-mark{background:linear-gradient(135deg,#0b7f78,#38e0d0);box-shadow:0 0 18px rgba(56,224,208,.35)}
.logo-mark span{border-color:#fff}
.menu a{color:var(--muted)}
.menu a:hover,.menu a[aria-current="page"]{background:var(--tint);color:var(--ink)}
.btn{background:linear-gradient(135deg,var(--brand),#2bb8f0);border:0;color:var(--brand-ink);box-shadow:0 8px 30px rgba(56,224,208,.22)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn.ghost:hover{border-color:var(--brand)}
.menu a.btn{background:linear-gradient(135deg,var(--brand),#2bb8f0);color:var(--brand-ink)}
.card,.fact,.hero-card,details,.toc,.kb-list a,.steps li,.outcomes,.xp-stage,.xp-tabs button[aria-selected="true"]{background:var(--surface);border-color:var(--line);backdrop-filter:blur(8px)}
.card:hover,a.card:hover,.card.lift:hover{border-color:rgba(56,224,208,.45);box-shadow:var(--glow)}
.tint{background:linear-gradient(180deg, rgba(56,224,208,.03), transparent)}
section.sec{border-top:1px solid var(--line)}
.grad{background:linear-gradient(90deg,#38e0d0,#7cc7ff 45%,#f2b84b);-webkit-background-clip:text;background-clip:text;color:transparent}
.outcomes b,.fact b{font-family:var(--display);font-weight:600;color:var(--brand)}
.band{background:linear-gradient(135deg,#0a2a28,#0b1f2e);border:1px solid rgba(56,224,208,.3);color:#e9f3f2;box-shadow:var(--glow);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg, transparent, rgba(56,224,208,.18), transparent 30%);animation:spin 14s linear infinite}
.band > *{position:relative}
@keyframes spin{to{transform:rotate(1turn)}}
.band .btn{background:var(--accent);color:#1b1305}
.site-foot{border-top:1px solid var(--line)}
.plan.featured{border:1px solid var(--brand);box-shadow:var(--glow)}
.plan .badge{background:var(--brand);color:var(--brand-ink)}
input,select,textarea{background:var(--surface-solid);border-color:var(--line)}
.prose blockquote{background:var(--accent-soft)}
.note{background:var(--tint);border:1px solid var(--line)}
.xp-tabs button[aria-selected="true"]{box-shadow:var(--glow)}
.ba .b{background:rgba(255,255,255,.03);border:1px solid var(--line)}
:root[data-theme="light"] .ba .b{background:var(--tint)}

/* Hero v2 */
.hero.dark{background:transparent;padding:110px 0 96px}
.hero.dark::after{background:radial-gradient(70% 80% at 20% 30%, rgba(5,16,15,0), rgba(5,16,15,.7) 80%),linear-gradient(180deg, rgba(5,16,15,0) 70%, #05100f)}
:root[data-theme="light"] .hero.dark{background:#05100f}
.hero-grid-bg{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(56,224,208,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(56,224,208,.07) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);animation:gridmove 18s linear infinite}
@keyframes gridmove{to{background-position:56px 56px}}
.orb{position:absolute;z-index:-2;width:520px;height:520px;border-radius:50%;right:-120px;top:-140px;background:radial-gradient(circle, rgba(56,224,208,.35), rgba(56,224,208,0) 65%);filter:blur(10px);animation:float 9s ease-in-out infinite}
.orb.o2{left:-160px;right:auto;top:auto;bottom:-220px;width:460px;height:460px;background:radial-gradient(circle, rgba(242,184,75,.22), rgba(242,184,75,0) 65%);animation-delay:-4s}
@keyframes float{50%{transform:translateY(24px) scale(1.04)}}
.hero.dark h1{font-size:clamp(34px,5vw,62px);line-height:1.08}
.hero.dark h1 em{background:linear-gradient(90deg,#38e0d0,#7cc7ff 50%,#f2b84b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.dark .btn{background:linear-gradient(135deg,#38e0d0,#2bb8f0);color:#04110f}
.hero.dark .kicker{color:#38e0d0}
.typed{font-family:var(--mono);color:#f2b84b;border-right:2px solid #f2b84b;padding-right:3px;animation:caret 1s step-end infinite;white-space:nowrap}
@keyframes caret{50%{border-color:transparent}}
.flow-card{background:rgba(8,26,26,.55);border:1px solid rgba(56,224,208,.25);box-shadow:0 0 0 1px rgba(56,224,208,.08), 0 30px 80px rgba(0,0,0,.45)}
.flow li.on{background:rgba(56,224,208,.12);border-color:rgba(56,224,208,.6)}
.flow li.on .n{background:#38e0d0;color:#04110f}

/* Tech marquee */
.marquee{background:transparent;border-color:var(--line)}
.marquee span{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--muted);letter-spacing:.04em}
.marquee span::after{border-color:var(--brand)}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pillar{position:relative;padding:26px;border-radius:16px;border:1px solid var(--line);background:var(--surface);overflow:hidden;min-height:250px;display:flex;flex-direction:column;gap:10px}
.pillar::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), rgba(56,224,208,.14), transparent 60%);opacity:0;transition:opacity .3s}
.pillar:hover::before{opacity:1}
.pillar .pi{font-family:var(--mono);font-size:12px;color:var(--brand)}
.pillar h3{font-size:21px;font-family:var(--display);font-weight:600}
.pillar p{margin:0;color:var(--muted);font-size:15px}
.pillar ul{margin:auto 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.pillar li{font-family:var(--mono);font-size:11.5px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;color:var(--muted)}
@media (max-width:980px){.pillars{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}

/* Founder profile */
.profile-hero{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:center}
.avatar{aspect-ratio:1;border-radius:24px;background:linear-gradient(135deg,#0b2a28,#0b1f2e);border:1px solid rgba(56,224,208,.35);box-shadow:var(--glow);display:grid;place-items:center;position:relative;overflow:hidden}
.avatar b{font-family:var(--display);font-size:84px;font-weight:600;background:linear-gradient(135deg,#38e0d0,#f2b84b);-webkit-background-clip:text;background-clip:text;color:transparent}
.avatar::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(56,224,208,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(56,224,208,.08) 1px,transparent 1px);background-size:24px 24px}
.role-tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.role-tags span{font-family:var(--mono);font-size:12.5px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.metric{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--surface)}
.metric b{display:block;font-family:var(--display);font-weight:600;font-size:24px;color:var(--brand)}
.metric span{font-size:13.5px;color:var(--muted)}
@media (max-width:980px){.metrics{grid-template-columns:repeat(3,1fr)}.profile-hero{grid-template-columns:1fr}.avatar{max-width:260px}}
@media (max-width:560px){.metrics{grid-template-columns:1fr 1fr}}
.timeline{position:relative;margin:0;padding:0 0 0 28px;list-style:none}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(#38e0d0,#f2b84b)}
.timeline > li{position:relative;padding:0 0 34px}
.timeline > li::before{content:"";position:absolute;left:-27px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--brand);box-shadow:0 0 12px rgba(56,224,208,.5)}
.timeline .when{font-family:var(--mono);font-size:12.5px;color:var(--accent)}
.timeline h3{font-size:20px;margin:4px 0 2px}
.timeline .org{color:var(--muted);font-size:15px;margin-bottom:8px}
.timeline ul{margin:0;padding-left:18px}
.timeline ul li{margin:5px 0;font-size:15.5px}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:760px){.cases{grid-template-columns:1fr}}
.case-card{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--surface)}
.case-card .tag{color:var(--brand)}
.case-card h3{font-size:20px;margin:6px 0 8px}
.case-card p{color:var(--muted);margin:0 0 10px;font-size:15.5px}
.std{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:8px 0 0}
.std li{font-family:var(--mono);font-size:11.5px;padding:4px 8px;border-radius:6px;border:1px solid rgba(242,184,75,.35);color:var(--accent)}
.cert{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;padding:0;margin:0}
.cert li{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface);display:flex;justify-content:space-between;gap:10px;font-size:15px}
.cert li span{font-family:var(--mono);color:var(--muted);font-size:13px}
@media (max-width:640px){.cert{grid-template-columns:1fr}}
a.pillar{text-decoration:none;color:inherit}
a.pillar h3{color:var(--ink)}
a.pillar:hover{border-color:rgba(56,224,208,.45);box-shadow:var(--glow);transform:translateY(-4px)}
.pillar{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}

/* ================= Typography v3: Geist family ================= */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"], :root[data-theme="light"]{
  --display:"Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body:"Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
body{font-size:17px;line-height:1.65;font-feature-settings:"ss01","cv11";text-rendering:optimizeLegibility}
h1,h2{font-weight:650;letter-spacing:-.035em;line-height:1.05}
h3{font-weight:600;letter-spacing:-.015em}
.hero.dark h1{font-size:clamp(40px,5.8vw,76px);line-height:1.02;letter-spacing:-.045em}
.sec-head h2{font-size:clamp(32px,4.2vw,52px)}
.page-head h1{font-size:clamp(38px,5.4vw,64px)}
.pillar h3{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.025em}
.logo{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:16px}
.logo small{font-family:var(--mono);font-weight:500;letter-spacing:.2em}
.kicker{font-size:12.5px;font-weight:500}
.btn{font-weight:600;letter-spacing:-.005em}
.outcomes b,.fact b,.metric b{font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.prose{font-size:18px;line-height:1.75}
.prose h2{letter-spacing:-.03em}
.typed{font-weight:500}
.hero.dark h1{font-size:clamp(38px,5vw,64px)}

/* ================= Services page v2 ================= */
.svc2-list{display:grid;gap:22px;padding-bottom:20px}
.svc2{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:clamp(22px,3vw,36px);display:grid;gap:26px;scroll-margin-top:90px;position:relative;overflow:hidden}
.svc2::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(56,224,208,.6),transparent)}
.svc2-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:end}
.svc2-title{display:flex;gap:16px;align-items:center}
.svc2-title .icon{width:52px;height:52px;border-radius:14px;flex:none;background:linear-gradient(135deg,rgba(56,224,208,.18),rgba(124,199,255,.08));border:1px solid rgba(56,224,208,.3)}
.svc2-n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}
.svc2 h2{font-size:clamp(26px,3vw,38px);margin-top:4px}
.svc2-d{margin:0;color:var(--muted);font-size:17px;max-width:60ch}
.svc2-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.svc2-ba > .b,.svc2-ba > .a{border-radius:16px;padding:18px 20px}
.svc2-ba span{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.svc2-ba p{margin:8px 0 0;font-size:15.5px;line-height:1.6}
.svc2-ba .b{background:rgba(255,255,255,.025);border:1px solid var(--line)}
.svc2-ba .b span{color:var(--muted)}
.svc2-ba .a{background:var(--accent-soft);border:1px solid rgba(242,184,75,.4)}
.svc2-ba .a span{color:var(--accent)}
.ba-arrow{display:grid;place-items:center;color:var(--brand)}
.ba-arrow svg{width:26px;height:26px;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(4px)}}
.svc2-body{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;padding-top:22px;border-top:1px dashed var(--line)}
.svc2-body h3{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.svc2-body > div:first-child .ticks{grid-template-columns:1fr 1fr;column-gap:22px}
.ticks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:6px;background:rgba(56,224,208,.14);border:1px solid rgba(56,224,208,.45)}
.ticks li::after{content:"";position:absolute;left:6px;top:6px;width:6px;height:9px;border:solid var(--brand);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ticks.dot li::after{display:none}
.ticks.dot li::before{width:8px;height:8px;top:8px;left:5px;border-radius:50%;background:var(--accent);border:0;box-shadow:0 0 10px rgba(242,184,75,.6)}
.svc2-body .btn{margin-top:20px}
.page-head .cta-row .btn.ghost{padding:8px 14px;font-size:14px}
@media (max-width:900px){.svc2-head{grid-template-columns:1fr;gap:14px}.svc2-body{grid-template-columns:1fr}.svc2-body > div:first-child .ticks{grid-template-columns:1fr}}
@media (max-width:700px){.svc2-ba{grid-template-columns:1fr}.ba-arrow{transform:rotate(90deg);height:24px}}

/* ================= Opener (first visit) ================= */
#opener{display:none}
.show-opener #opener{display:grid;position:fixed;inset:0;z-index:100;place-items:center;background:#030a0a;overflow:hidden;animation:openerOut .7s cubic-bezier(.7,0,.2,1) 1.9s forwards}
.show-opener body{overflow:hidden}
.show-opener.opener-done body{overflow:auto}
#opener .og{position:absolute;inset:0;background-image:linear-gradient(rgba(56,224,208,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(56,224,208,.08) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 65%)}
#opener .scan{position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(180deg,transparent,rgba(56,224,208,.12),transparent);animation:scan 1.6s ease-in-out .1s}
#opener .core{position:relative;display:grid;justify-items:center;gap:22px}
#opener svg.mark{width:86px;height:86px;filter:drop-shadow(0 0 18px rgba(56,224,208,.6))}
#opener .mark rect{fill:none;stroke:url(#og-grad);stroke-width:3;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.1s cubic-bezier(.6,0,.2,1) forwards}
#opener .mark rect.inner{stroke-dasharray:110;stroke-dashoffset:110;animation-delay:.35s}
#opener .word{display:flex;gap:.18em;font-family:var(--display);font-weight:700;font-size:clamp(28px,6vw,46px);letter-spacing:.2em;color:#e9f3f2}
#opener .word span{opacity:0;transform:translateY(14px);filter:blur(6px);animation:letter .5s cubic-bezier(.2,.7,.2,1) forwards}
#opener .boot{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#93aaa9;text-transform:uppercase}
#opener .bar{width:min(260px,60vw);height:2px;background:rgba(255,255,255,.08);overflow:hidden;border-radius:2px}
#opener .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#38e0d0,#7cc7ff,#f2b84b);animation:boot 1.6s cubic-bezier(.4,0,.2,1) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes letter{to{opacity:1;transform:none;filter:none}}
@keyframes boot{to{width:100%}}
@keyframes scan{to{top:100%}}
@keyframes openerOut{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}

/* Page enter + cross-page transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s ease both}
::view-transition-new(root){animation:vtIn .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes vtOut{to{opacity:0;transform:scale(.99)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
.nav-bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:90;background:linear-gradient(90deg,#38e0d0,#7cc7ff,#f2b84b);box-shadow:0 0 12px rgba(56,224,208,.8);opacity:0}
.nav-bar.go{opacity:1;animation:navgo 1.2s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes navgo{to{width:85%}}

/* ================= CTA effects ================= */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover::before{left:130%}
.btn.ghost::before{background:linear-gradient(100deg,transparent,rgba(56,224,208,.25),transparent)}
.btn .arr{display:inline-block;transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(3);opacity:0}}
.btn.is-loading{pointer-events:none;color:transparent}
.btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(4,17,15,.25);border-top-color:#04110f;animation:spin .7s linear infinite}
.to-top{position:fixed;right:18px;bottom:78px;z-index:6;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface-solid);color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s, transform .25s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--brand);box-shadow:var(--glow)}
.wa{box-shadow:0 8px 26px rgba(31,143,78,.45)}
.wa::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(31,143,78,.6);animation:waPulse 2.4s infinite}
@keyframes waPulse{70%{box-shadow:0 0 0 14px rgba(31,143,78,0)}100%{box-shadow:0 0 0 0 rgba(31,143,78,0)}}

/* ================= Responsive tuning ================= */
@media (min-width:861px) and (max-width:1180px){.menu a{padding:8px 7px;font-size:14px}.menu a.btn{padding:9px 12px}.logo small{display:none}}
@media (max-width:620px){
  .wrap{padding:0 18px}
  section.sec{padding:56px 0}
  .sec-head{margin-bottom:22px}
  .hero.dark h1{font-size:clamp(34px,10vw,44px)}
  .cta-row .btn{flex:1 1 auto;justify-content:center}
  .flow li{grid-template-columns:30px 1fr auto;padding:10px}
  .band{padding:28px 22px}
  .to-top{right:12px;bottom:66px}
  .xp-stage{min-height:0}
}
@media (prefers-reduced-motion: reduce){.show-opener #opener{display:none}}
.search{box-sizing:border-box;max-width:min(520px,100%)}
@media (max-width:440px){.logo small{display:none}.logo{font-size:15px;letter-spacing:.1em}.head-row{gap:10px}.menu-toggle{padding:8px 12px}}
@media (max-width:620px){.avatar{max-width:150px}.avatar b{font-size:52px}}
.prose{overflow-wrap:anywhere}.prose code{word-break:break-all;font-family:var(--mono);font-size:.88em;background:var(--tint);padding:2px 6px;border-radius:5px}

/* ================= Service explorer ================= */
.xp{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:stretch}
.xp-tabs{display:flex;flex-direction:column;gap:6px}
.xp-tabs button{all:unset;cursor:pointer;display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:12px;font-weight:600;font-size:15.5px;color:var(--muted);border:1px solid transparent;position:relative;overflow:hidden}
.xp-tabs button:hover{color:var(--ink);background:var(--surface)}
.xp-tabs button:focus-visible{outline:2px solid var(--accent)}
.xp-tabs button[aria-selected="true"]{color:var(--ink);background:var(--surface);border-color:var(--line);box-shadow:0 8px 24px rgba(13,35,38,.06)}
.xp-tabs .tn{font-family:var(--display);font-size:13px;color:var(--accent);min-width:22px}
.xp-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;bottom:0;height:3px;background:var(--accent);width:0;animation:xpbar var(--xp-dur,7s) linear forwards}
.xp.paused .xp-tabs button[aria-selected="true"]::after{animation-play-state:paused}
@keyframes xpbar{to{width:100%}}
.xp-stage{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:440px}
.xp-panel{display:grid;grid-template-columns:1fr 1.1fr;height:100%;animation:xpin .5s cubic-bezier(.2,.7,.2,1)}
@keyframes xpin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.xp-vis{background:linear-gradient(160deg,#071d1c,#040d0d);position:relative;display:grid;place-items:center;padding:28px;min-height:300px;overflow:hidden}
.xp-vis::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(224,173,79,.16),transparent 55%)}
.xp-copy{padding:30px;display:flex;flex-direction:column;gap:14px}
.xp-copy h3{font-size:26px}
.xp-d{margin:0;color:var(--muted)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba > div{border-radius:12px;padding:14px;font-size:14.5px}
.ba span{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ba p{margin:6px 0 0}
.ba .b{background:var(--tint)}
.ba .b span{color:var(--muted)}
.ba .a{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.ba .a span{color:var(--accent)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:13px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.xp-copy .btn{align-self:flex-start;margin-top:auto}
@media (max-width:980px){.xp{grid-template-columns:1fr}.xp-tabs{flex-direction:row;overflow-x:auto;padding-bottom:4px}.xp-tabs button{white-space:nowrap}.xp-panel{grid-template-columns:1fr}}
@media (max-width:560px){.ba{grid-template-columns:1fr}.xp-copy{padding:22px}}

/* Visual: website phone */
.vis{position:relative;width:100%;max-width:300px;color:#eaf4f4;font-size:12px}
.phone{width:170px;height:300px;margin:0 auto;border-radius:26px;border:2px solid rgba(255,255,255,.25);background:#0f2b2f;padding:26px 14px 14px;position:relative;display:flex;flex-direction:column;gap:9px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.notch{position:absolute;top:8px;left:50%;width:50px;height:6px;margin-left:-25px;border-radius:6px;background:rgba(255,255,255,.2)}
.sk{border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.2),rgba(255,255,255,.08));background-size:200% 100%;animation:shim 1.6s infinite}
.sk-h{height:14px;width:70%}.sk-img{height:80px}.sk-l{height:9px}.sk-l.s{width:60%}
.sk-row{display:flex;gap:8px}.sk-row i{flex:1;height:44px;border-radius:6px;background:rgba(255,255,255,.12)}
@keyframes shim{to{background-position:-200% 0}}
.wa-pill{margin-top:auto;background:#1f8f4e;border-radius:999px;text-align:center;padding:8px;font-weight:700;animation:pop 2.4s infinite}
@keyframes pop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.07)}}
.meter{margin-top:16px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.meter .track{height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.meter .fill{height:100%;width:0;background:linear-gradient(90deg,#5cc3c8,#e0ad4f);animation:fillup 2.2s cubic-bezier(.2,.7,.2,1) .3s forwards}
.meter b{color:#e0ad4f}
@keyframes fillup{to{width:92%}}

/* Visual: funnel */
.vis-funnel{display:flex;flex-direction:column;align-items:center;gap:8px}
.fb{width:var(--w);height:42px;border-radius:10px;background:rgba(92,195,200,.18);border:1px solid rgba(92,195,200,.4);display:grid;place-items:center;transform-origin:center;animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
.fb:nth-child(2){animation-delay:.12s}.fb:nth-child(3){animation-delay:.24s}.fb:nth-child(4){animation-delay:.36s}
.fb span{font-weight:700;white-space:nowrap}
.fb.gold{background:rgba(224,173,79,.25);border-color:#e0ad4f;box-shadow:0 0 24px rgba(224,173,79,.35)}
@keyframes grow{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}
.cap{margin:8px 0 0;color:#a9c2c4;text-align:center}

/* Visual: map */
.vis-map{height:260px;border-radius:14px;overflow:hidden;background:#0f2b2f;border:1px solid rgba(255,255,255,.12)}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px}
.road{position:absolute;background:rgba(255,255,255,.12)}
.road.r1{left:-10%;right:-10%;top:58%;height:12px;transform:rotate(-12deg)}
.road.r2{top:-10%;bottom:-10%;left:38%;width:10px;transform:rotate(18deg)}
.pin{position:absolute;width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#e0ad4f;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.35);animation:drop .7s cubic-bezier(.2,1.4,.4,1) both}
.pin b{transform:rotate(45deg);color:#1b1305;font-size:13px}
.pin.grey{background:#6f8a8d}
.pin.p1{left:46%;top:30%;animation-delay:.5s}.pin.p2{left:20%;top:52%;animation-delay:.15s}.pin.p3{left:70%;top:62%;animation-delay:.3s}
.pin.p1::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(224,173,79,.6);animation:ring 1.8s 1.2s infinite}
@keyframes drop{from{transform:translateY(-40px) rotate(-45deg);opacity:0}to{transform:rotate(-45deg);opacity:1}}
@keyframes ring{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
.map-search{position:absolute;left:12px;right:12px;top:12px;background:#fff;color:#0d2326;border-radius:999px;padding:8px 14px;font-weight:600}
.map-search::before{content:"⌕ ";color:#6f8a8d}

/* Visual: automation */
.vis-auto{height:260px;max-width:320px}
.vis-auto svg{position:absolute;inset:0;width:100%;height:100%}
.wire{fill:none;stroke:#e0ad4f;stroke-width:2.5;stroke-dasharray:8 8;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.node{position:absolute;z-index:1;background:#0f2b2f;border:1px solid rgba(92,195,200,.5);padding:8px 12px;border-radius:10px;font-weight:700;animation:fadeUp .6s both}
.node.gold{border-color:#e0ad4f;color:#e0ad4f}
.n1{left:0;top:10px}.n2{left:22%;top:62px;animation-delay:.15s}.n3{left:44%;top:114px;animation-delay:.3s}.n4{left:52%;top:166px;animation-delay:.45s}.n5{right:0;top:218px;animation-delay:.6s}

/* Visual: dashboard */
.vis-dash .bars{height:200px;display:flex;align-items:flex-end;gap:12px;padding:12px;border-bottom:1px solid rgba(255,255,255,.2)}
.vis-dash .bars i{flex:1;height:var(--h);border-radius:8px 8px 0 0;background:rgba(92,195,200,.4);transform-origin:bottom;animation:barup .9s cubic-bezier(.2,.7,.2,1) both}
.vis-dash .bars i:nth-child(n){animation-delay:calc(var(--d,0) * 1s)}
.vis-dash .bars i.g{background:#e0ad4f;box-shadow:0 0 20px rgba(224,173,79,.4)}
@keyframes barup{from{transform:scaleY(0)}to{transform:none}}
.kpis{display:flex;justify-content:space-between;margin-top:10px;color:#a9c2c4}

/* Visual: shop */
.vis-shop{height:220px;display:grid;place-items:center}
.steps3{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.st{padding:8px 10px;border-radius:10px;border:1px solid rgba(92,195,200,.5);background:#0f2b2f;font-weight:700}
.st.gold{border-color:#e0ad4f;color:#e0ad4f}
.arrow{width:16px;height:2px;background:rgba(255,255,255,.4)}
.parcel{position:absolute;bottom:20px;left:0;width:28px;height:22px;border-radius:4px;background:#e0ad4f;animation:ship 3.2s ease-in-out infinite}
.parcel::after{content:"";position:absolute;left:12px;top:0;bottom:0;width:4px;background:rgba(0,0,0,.25)}
@keyframes ship{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 28px);opacity:0}}

/* Visual: content calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal i{aspect-ratio:1;border-radius:6px;background:rgba(255,255,255,.07);animation:fadeUp .5s both}
.cal i.r{background:#e0ad4f}.cal i.c{background:#5cc3c8}.cal i.a{background:#eaf4f4}
.cal i:nth-child(3n){animation-delay:.1s}.cal i:nth-child(3n+1){animation-delay:.2s}.cal i:nth-child(3n+2){animation-delay:.3s}
.legend{display:flex;gap:14px;margin-top:12px;color:#a9c2c4}
.legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
.legend .r::before{background:#e0ad4f}.legend .c::before{background:#5cc3c8}.legend .a::before{background:#eaf4f4}

/* Visual: AI chat */
.vis-chat{display:flex;flex-direction:column;gap:8px;max-width:300px}
.msg{max-width:85%;padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.4;animation:fadeUp .5s both}
.msg.in{align-self:flex-start;background:rgba(255,255,255,.08);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:rgba(56,224,208,.18);border:1px solid rgba(56,224,208,.4);border-bottom-right-radius:4px}
.msg:nth-child(2){animation-delay:.5s}.msg:nth-child(3){animation-delay:1.1s}.msg:nth-child(4){animation-delay:1.5s}
.typing{display:flex;gap:4px;padding:12px}
.typing i{width:6px;height:6px;border-radius:50%;background:#38e0d0;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.ai-badge{margin-top:6px;font-family:var(--mono);font-size:11px;color:#f2b84b}
/* Visual: chain */
.vis-chain{display:flex;flex-direction:column;align-items:center;gap:0}
.blk{width:230px;border:1px solid rgba(56,224,208,.5);border-radius:12px;padding:10px 12px;background:rgba(8,30,30,.8);display:grid;grid-template-columns:auto 1fr;gap:2px 10px;animation:fadeUp .5s both}
.blk:nth-child(3){animation-delay:.3s}.blk:nth-child(5){animation-delay:.6s}
.blk b{font-family:var(--mono);color:#38e0d0;grid-row:span 2}
.blk code{font-family:var(--mono);font-size:11px;color:#93aaa9}
.blk.gold{border-color:#f2b84b}.blk.gold b{color:#f2b84b}
.link{width:2px;height:16px;background:linear-gradient(#38e0d0,#f2b84b);animation:fadeUp .4s both .2s}
.verify{margin-top:12px;font-family:var(--mono);font-size:12px;color:#3ddc84;animation:fadeUp .5s both 1s}
/* Visual: eval */
.vis-eval{display:grid;gap:10px;max-width:300px}
.vis-eval .row{display:grid;grid-template-columns:100px 1fr;gap:10px;align-items:center;font-size:12px}
.vis-eval .bar{height:10px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.vis-eval .bar i{display:block;height:100%;width:var(--v);background:linear-gradient(90deg,#38e0d0,#7cc7ff);transform-origin:left;animation:grow 1s cubic-bezier(.2,.7,.2,1) both}
.vis-eval .bar i.g{background:linear-gradient(90deg,#f2b84b,#ffd98a)}
.vis-eval .row:nth-child(2) i{animation-delay:.1s}.vis-eval .row:nth-child(3) i{animation-delay:.2s}.vis-eval .row:nth-child(4) i{animation-delay:.3s}.vis-eval .row:nth-child(5) i{animation-delay:.4s}

/* Theme toggle */
.theme-toggle{all:unset;cursor:pointer;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink);margin-left:4px}
.theme-toggle:focus-visible{outline:2px solid var(--accent)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
:root:not([data-theme="light"]) .theme-toggle .sun{display:none}
:root:not([data-theme="light"]) .theme-toggle .moon{display:block}

/* Before/after on services page */
.svc .ba{margin-top:18px}