/*
Theme Name: OmniGrowth AI
Theme URI: https://omnigrowth.ai
Author: OmniGrowth AI
Description: The AI Business Operating System — cinematic single-page marketing theme for OmniGrowth AI. Fully responsive, self-contained, with a built-in Content-Security-Policy security layer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: omnigrowth-ai
*/

/* ============ reset / base ============ */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased }
body{ background:#ffffff; color:#111111; font-family:'Onest',sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block }
.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 }
:focus-visible{ outline:2px solid #0aa87a; outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ============ adaptive rem grid ============ */
@media (max-width:1920px){ html{ font-size:0.833333vw } }
@media (max-width:1440px){ html{ font-size:1.111111vw } }
@media (max-width:1024px){ html{ font-size:1.5625vw } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

/* ============ tokens ============ */
:root{
  --ink:#0a0a0a; --muted:#8d8d8d; --subtle:#b6b6b6; --line:#e6e5e2;
  --surface:#f1f0ee; --surface-2:#e3e2df;
  --accent:#0aa87a; --accent-from:#2fd8a6; --accent-to:#067a5a;
  --hero-to:#c9c9c9;
  --r-pill:9999px; --r-card:2rem; --r-card-sm:1.25rem; --r-ctl:0.875rem;
  --shell:88rem;
  --ease-line:cubic-bezier(.215,.61,.355,1);
  --ease-word:cubic-bezier(.165,.84,.44,1);
  --ease-spring:cubic-bezier(.22,1,.36,1);
  --ease-hover:cubic-bezier(.2,.8,.2,1);
}
.shell{ max-width:var(--shell); margin-inline:auto }

/* ============ skip link ============ */
.skip{ position:fixed; left:1rem; top:1rem; z-index:60; border-radius:var(--r-ctl); background:var(--ink); padding:.5rem 1rem; font-size:.875rem; color:#fff; transform:translateY(-300%); }
.skip:focus{ transform:none }

/* ============ entrance reveals ============ */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease-spring), transform .8s var(--ease-spring); transition-delay:var(--d,0ms) }
.rv.rv-scale{ transform:translateY(16px) scale(.96) }
.rv.rv-none{ transform:none }
.rv.in{ opacity:1; transform:none }
/* line reveal */
.lines .ln{ display:block; overflow:hidden }
.lines .ln>span{ display:block; transform:translateY(110%); opacity:0; transition:transform .9s var(--ease-line), opacity .9s var(--ease-line) }
.lines.in .ln>span{ transform:translateY(0); opacity:1 }
/* word reveal */
.words .wd{ display:inline-block; transform:translateY(24px); opacity:0; transition:transform .7s var(--ease-word), opacity .7s var(--ease-word) }
.words.in .wd{ transform:none; opacity:1 }

/* ============ loader ============ */
#loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; background:var(--ink); color:#fff; border-radius:0 0 var(--r-card) var(--r-card); transition:transform .7s var(--ease-spring) }
#loader.exit{ transform:translateY(-100%) }
#loader .center{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; transition:opacity .55s ease, transform .55s ease }
#loader.exit .center{ opacity:0; transform:translateY(-12px) }
#loader .brand{ display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:1.5rem }
@media(min-width:640px){ #loader .brand{ font-size:1.875rem } }
#loader .brand .ic{ font-size:1.875rem; color:var(--accent-from); display:inline-flex }
#loader .tag{ max-width:24ch; font-size:.875rem; color:rgba(255,255,255,.55) }
#loader .prog{ width:min(22rem,72vw); display:flex; flex-direction:column; gap:.75rem }
#loader .track{ height:1px; background:rgba(255,255,255,.15) }
#loader .fill{ height:100%; background:var(--accent-from); width:0%; transition:width .1s ease-out }
#loader .meta{ display:flex; justify-content:space-between; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45) }
#loader .meta .n{ font-variant-numeric:tabular-nums; color:rgba(255,255,255,.8) }

/* ============ header ============ */
header.site{ position:absolute; inset-inline:0; top:0; z-index:50; opacity:0; transform:translateY(-14px); transition:opacity .7s var(--ease-spring), transform .7s var(--ease-spring); transition-delay:150ms }
header.site.in{ opacity:1; transform:none }
header.site .bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem }
@media(min-width:640px){ header.site .bar{ padding:1.5rem 2rem } }
.brandbtn{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600; letter-spacing:-.01em; transition:transform .35s var(--ease-hover) }
@media(hover:hover){ .brandbtn:hover{ transform:scale(1.04) } }
.brandbtn .ic{ font-size:1.25rem; color:var(--accent); display:inline-flex }
nav.primary{ display:none }
@media(min-width:1024px){ nav.primary{ display:flex } }
nav.primary ul{ display:flex; gap:2rem; font-size:.875rem; font-weight:500 }
nav.primary button{ display:inline-flex; align-items:center; gap:.35rem; opacity:.8; transition:transform .3s var(--ease-hover), opacity .3s }
@media(hover:hover){ nav.primary button:hover{ transform:translateY(-2px); opacity:1 } }
nav.primary .caret{ font-size:.75rem; opacity:.6 }
.hdr-right{ display:flex; align-items:center; gap:.75rem }
.clockchip{ display:none; align-items:center; gap:.75rem; border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.4); backdrop-filter:blur(4px); border-radius:var(--r-ctl); padding:.5rem .75rem; font-size:.75rem; color:rgba(17,17,17,.7) }
@media(min-width:768px){ .clockchip{ display:flex } }
.clockchip .lbl{ color:rgba(17,17,17,.45) }
.clockchip .tm{ min-width:3.5rem; font-variant-numeric:tabular-nums; font-weight:500; color:#111 }
.clockchip .dot{ color:rgba(17,17,17,.3) }
.clockchip .dt{ font-weight:500 }
.menubtn{ border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.4); backdrop-filter:blur(4px); border-radius:var(--r-ctl); transition:background .3s }
@media(hover:hover){ .menubtn:hover{ background:rgba(255,255,255,.7) } }
.menubtn .inner{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; transition:transform .35s var(--ease-hover) }
@media(hover:hover){ .menubtn:hover .inner{ transform:scale(1.05) } }
.menubtn .ic{ font-size:.875rem; display:inline-flex }
.menubtn .word{ display:none }
@media(min-width:640px){ .menubtn .word{ display:inline } }

/* ============ pill button ============ */
.pill{ display:inline-block; transition:transform .35s var(--ease-hover) }
@media(hover:hover){ .pill:hover{ transform:scale(1.04) } }
.pill .in-pill{ display:inline-flex; align-items:center; gap:.75rem; border-radius:var(--r-pill); font-size:.875rem; font-weight:500; padding:.875rem 1.75rem }
.pill.w-arrow .in-pill{ padding:.375rem .375rem .375rem 1.5rem }
.pill.v-dark .in-pill{ background:var(--ink); color:#fff }
.pill.v-light .in-pill{ background:var(--surface); color:#111 }
.pill.v-outline .in-pill{ border:1px solid var(--line); background:transparent; color:#111 }
.pill .badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:var(--r-pill); font-size:1rem }
.pill.v-dark .badge{ background:#fff; color:var(--ink) }
.pill.v-light .badge, .pill.v-outline .badge{ background:var(--ink); color:#fff }
.pill .badge svg{ transition:transform .35s var(--ease-hover) }
@media(hover:hover){
  .pill.a-right:hover .badge svg{ transform:translate(3px,0) }
  .pill.a-upright:hover .badge svg{ transform:translate(2px,-2px) }
}

/* ============ eyebrow ============ */
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.7) }
.eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:var(--r-pill); background:rgba(17,17,17,.5) }
.eyebrow.t-light{ color:rgba(255,255,255,.7) }
.eyebrow.t-light::before{ background:rgba(255,255,255,.6) }
.eyebrow.boxed{ border:1px solid var(--line); border-radius:var(--r-pill); padding:.375rem 1rem }

/* ============ hero ============ */
#home{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 var(--r-card) var(--r-card); background:var(--hero-to) }
.liquid{ position:absolute; inset:0; z-index:0 }
.liquid img,.liquid canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.liquid canvas{ pointer-events:none }
.hero-vignette{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.35), transparent, rgba(255,255,255,.35)) }
.hero-mark{ pointer-events:none; position:absolute; inset-inline:0; bottom:7rem; z-index:1; text-align:center; user-select:none; font-weight:700; line-height:1; font-size:9rem; color:rgba(255,255,255,.4); opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease-spring), transform .9s var(--ease-spring); transition-delay:300ms }
.hero-mark.in{ opacity:1; transform:none }
.hero-grid{ position:relative; z-index:20; display:flex; flex-direction:column; gap:2rem; padding:7rem 1.25rem 5rem }
@media(min-width:640px){ .hero-grid{ padding-inline:2rem } }
@media(min-width:1024px){ .hero-grid{ display:grid; min-height:100lvh; grid-template-columns:repeat(12,1fr); gap:2.5rem; padding:9rem 2rem 7rem } }
.hero-left{ display:flex; flex-direction:column; gap:1.75rem }
@media(min-width:1024px){ .hero-left{ grid-column:span 7 } }
.hero-left h1{ max-width:18ch; font-size:2.25rem; font-weight:600; line-height:.98; letter-spacing:-.02em }
@media(min-width:640px){ .hero-left h1{ font-size:3rem } }
@media(min-width:768px){ .hero-left h1{ font-size:3.75rem } }
.rating{ display:flex; align-items:center; gap:.75rem }
.rating .stars{ color:var(--accent); display:inline-flex; gap:.1rem; font-size:1rem }
.rating .txt{ font-size:.875rem; font-weight:500; color:rgba(17,17,17,.7) }
/* per-letter lighting where the dark reveal passes under hero text */
.ch{ transition:color .12s ease }
.ch.lit{ color:#f2fdf9 }
.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem }
.hero-right{ display:flex; flex-direction:column; align-items:flex-start; gap:2rem }
@media(min-width:1024px){ .hero-right{ grid-column:span 5; align-items:flex-end } }
.hero-card{ width:100%; max-width:24rem; border-radius:var(--r-card-sm); background:rgba(255,255,255,.7); padding:.5rem; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(230,229,226,.7); backdrop-filter:blur(12px) }
@media(min-width:1024px){ .hero-card{ width:19rem } }
.hero-card .row{ display:flex; gap:.5rem; cursor:pointer; border-radius:var(--r-ctl) }
.hero-card .tile{ aspect-ratio:1; width:6rem; display:grid; place-items:center; border-radius:var(--r-ctl); background:var(--ink); font-size:1.875rem; color:#fff }
.hero-card .tile .ic{ color:var(--accent-from); display:inline-flex }
.hero-card .panel{ flex:1; border-radius:var(--r-ctl); background:rgba(241,240,238,.7); padding:.75rem; display:flex; flex-direction:column; justify-content:space-between }
.hero-card .slot{ position:relative; min-height:3.25rem }
.hero-card .item{ position:absolute; inset:0; transition:opacity .5s var(--ease-spring), transform .5s var(--ease-spring) }
.hero-card .item .cap{ font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(17,17,17,.45) }
.hero-card .item .ttl{ max-width:8rem; font-size:.875rem; font-weight:500; line-height:1.35 }
.hero-card .ctrl{ display:flex; align-items:center; justify-content:space-between }
.hero-card .dots{ display:flex; gap:.3rem; align-items:center }
.hero-card .dots i{ height:.25rem; border-radius:var(--r-pill); width:.375rem; background:rgba(17,17,17,.2); transition:all .3s }
.hero-card .dots i.on{ width:1rem; background:rgba(17,17,17,.7) }
.hero-card .btns{ display:flex; gap:.4rem }
.hero-card .btns button{ width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius:var(--r-pill); background:#fff; color:rgba(17,17,17,.7); box-shadow:0 0 0 1px var(--line); transition:color .25s }
.hero-card .btns button:hover{ color:#111 }
.partners{ width:100%; max-width:24rem }
@media(min-width:1024px){ .partners{ width:19rem } }
.partners .lbl{ margin-bottom:.75rem; font-size:.75rem; font-weight:500; color:rgba(17,17,17,.45); text-align:left }
@media(min-width:1024px){ .partners .lbl{ text-align:right } }
.partners ul{ display:grid; grid-template-columns:repeat(4,1fr); column-gap:1rem; row-gap:.75rem }
.partners li span.pt{ display:flex; align-items:center; gap:.375rem; font-size:.75rem; color:rgba(17,17,17,.7); opacity:.7; transition:transform .3s var(--ease-hover), opacity .3s }
@media(hover:hover){ .partners li:hover span.pt{ transform:translateY(-2px); opacity:1 } }
.partners .ic{ font-size:.875rem; color:rgba(17,17,17,.4); display:inline-flex }
.hero-status{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-top:1px solid rgba(17,17,17,.1); padding:1.25rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(17,17,17,.6); position:relative; z-index:20 }
@media(min-width:640px){ .hero-status{ padding-inline:2rem } }
.hero-status .mid{ display:none }
@media(min-width:640px){ .hero-status .mid{ display:block } }
.hero-status .scroll{ display:inline-flex; gap:.5rem }

/* ============ about ============ */
#about{ background:#fff }
#about .grid{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; padding:5rem 1.25rem }
@media(min-width:640px){ #about .grid{ padding-inline:2rem } }
@media(min-width:1024px){ #about .grid{ grid-template-columns:1fr 1fr; padding-block:7rem } }
.globe-block{ position:relative; min-height:14rem; display:flex; flex-direction:column; gap:2rem }
@media(min-width:1024px){ .globe-block{ min-height:20rem } }
.logo-lockup{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; margin-top:auto }
.logo-lockup .lock-mark{ font-size:9rem; color:var(--ink); display:inline-flex; line-height:1 }
@media(min-width:640px){ .logo-lockup .lock-mark{ font-size:11rem } }
.logo-lockup .lock-word{ font-size:2rem; font-weight:600; letter-spacing:-.01em; color:var(--ink) }
@media(min-width:640px){ .logo-lockup .lock-word{ font-size:2.5rem } }
.logo-lockup .lock-word span{ color:var(--accent) }
.logo-lockup .lock-sub{ max-width:18rem; font-size:.875rem; color:rgba(17,17,17,.55) }
.statement{ display:flex; flex-direction:column; gap:2.5rem }
.statement h2{ font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.01em }
@media(min-width:640px){ .statement h2{ font-size:1.875rem } }
.statement h2 .mut{ color:var(--muted) }
.statement .foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); padding-top:1.5rem }
.socials .lbl{ font-size:.875rem; color:rgba(17,17,17,.45); margin-bottom:.5rem }
.socials .row{ display:flex; gap:.5rem }
.socials .chip{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:var(--r-pill); font-size:.875rem; background:var(--surface); color:rgba(17,17,17,.7) }
.socials .chip.hot{ background:var(--accent); color:#fff }
.socials .chip .ic{ display:inline-flex; transition:transform .3s var(--ease-hover) }
@media(hover:hover){ .socials .chip:hover .ic{ transform:scale(1.18) } }

/* ============ create band ============ */
.band{ background:#fff }
.band ul{ display:flex; flex-direction:column; gap:.75rem; padding:2.5rem 1.25rem }
@media(min-width:640px){ .band ul{ flex-direction:row; gap:1rem; padding-inline:2rem } }
.band li{ flex:1 }
.band .tile{ display:grid; place-items:center; height:6rem; border-radius:var(--r-pill); font-size:1.875rem; font-weight:500; transition:transform .35s var(--ease-hover) }
@media(min-width:640px){ .band .tile{ height:10rem; font-size:2.25rem } }
@media(hover:hover){ .band .tile:hover{ transform:scale(1.03) } }
.band .t-light{ background:var(--surface); color:#111 }
.band .t-accent{ background:linear-gradient(to bottom right,var(--accent-from),var(--accent-to)); color:#02131a }
.band .t-dark{ background:var(--ink); color:#fff }
.band .t-ghost{ background:rgba(241,240,238,.6); color:rgba(17,17,17,.35) }
.band .t-dark .ic{ font-size:2.25rem; display:inline-flex }
@media(min-width:640px){ .band .t-dark .ic{ font-size:3rem } }

/* ============ portfolio ============ */
#works{ background:#fff }
#works .wrap{ padding:2.5rem 1.25rem 5rem }
@media(min-width:640px){ #works .wrap{ padding-inline:2rem } }
@media(min-width:1024px){ #works .wrap{ padding-bottom:7rem } }
#works .head{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; margin-bottom:3rem; text-align:center }
#works h2{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; width:fit-content }
@media(min-width:640px){ #works h2{ font-size:3rem } }
.works-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem }
@media(min-width:768px){ .works-grid{ grid-template-columns:1fr 1fr } }
.work-card{ position:relative; min-height:22rem; overflow:hidden; border-radius:var(--r-card); background:var(--ink); padding:1.5rem; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.05); display:block; transition:transform .4s var(--ease-hover) }
@media(min-width:640px){ .work-card{ min-height:26rem; padding:2rem } }
@media(hover:hover){ .work-card:hover{ transform:translateY(-8px) scale(1.012) } }
.work-card .meta{ display:flex; justify-content:space-between; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.45) }
.work-card .badge{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:var(--r-pill); background:rgba(255,255,255,.1); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.15); transition:transform .35s var(--ease-hover) }
@media(hover:hover){ .work-card:hover .badge{ transform:rotate(45deg) scale(1.08) } }
.work-card .wm{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.work-card .wm .ic{ font-size:4.5rem; color:rgba(255,255,255,.9); display:inline-flex }
.work-card .wm sup{ font-size:.75rem; color:rgba(255,255,255,.6) }
.work-card .info{ position:absolute; inset-inline:1.5rem; bottom:1.5rem }
@media(min-width:640px){ .work-card .info{ inset-inline:2rem; bottom:2rem } }
.work-card h3{ font-size:1.5rem; font-weight:500; letter-spacing:-.01em }
@media(min-width:640px){ .work-card h3{ font-size:1.875rem } }
.work-card .desc{ margin-top:.5rem; max-width:28rem; font-size:.875rem; color:rgba(255,255,255,.55) }
.work-card .tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem }
.tagchip{ display:inline-flex; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:var(--r-pill); padding:.5rem 1rem; font-size:.875rem }

/* ============ services ============ */
#services{ background:#fff }
#services .wrap{ padding:5rem 1.25rem }
@media(min-width:640px){ #services .wrap{ padding-inline:2rem } }
@media(min-width:1024px){ #services .wrap{ padding-block:7rem } }
#services h2{ margin:1.25rem 0 3rem; max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
@media(min-width:640px){ #services h2{ margin-bottom:3.5rem; font-size:3rem } }
.svc-row-wrap{ border-top:1px solid var(--line) }
.svc-rows li:first-child .svc-row-wrap{ border-top:none }
.svc-row{ display:flex; align-items:center; gap:1rem; border-radius:var(--r-card-sm); padding:1.5rem; background:rgba(241,240,238,0); transition:background .45s var(--ease-hover), padding .45s var(--ease-hover) }
@media(min-width:640px){ .svc-row{ gap:1.5rem; padding-block:2rem } }
@media(hover:hover){ .svc-row:hover{ background:rgba(241,240,238,1); padding-left:2rem; padding-right:1.25rem } }
.svc-row .idx{ width:1.75rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.4) }
@media(min-width:640px){ .svc-row .idx{ width:2.5rem } }
.svc-row h3{ flex:1; font-size:1.5rem; font-weight:500; letter-spacing:-.01em }
@media(min-width:640px){ .svc-row h3{ font-size:1.875rem } }
@media(min-width:768px){ .svc-row h3{ font-size:2.25rem } }
.svc-row .desc{ display:none }
@media(min-width:1024px){ .svc-row .desc{ display:block; width:20rem; flex:0 0 20rem; font-size:.875rem; color:rgba(17,17,17,.55) } }
.svc-row .badge{ width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--ink); color:#fff; transition:transform .35s var(--ease-hover) }
@media(min-width:640px){ .svc-row .badge{ width:3rem; height:3rem } }
@media(hover:hover){ .svc-row:hover .badge{ transform:translateX(5px) } }

/* ============ stats ============ */
.stats-sec{ background:#fff }
.stats-sec .wrap{ padding:0 1.25rem 5rem }
@media(min-width:640px){ .stats-sec .wrap{ padding-inline:2rem } }
@media(min-width:1024px){ .stats-sec .wrap{ padding-bottom:7rem } }
.stats-panel{ border-radius:var(--r-card); background:var(--ink); padding:3rem 1.5rem; color:#fff }
@media(min-width:640px){ .stats-panel{ padding:4rem 2rem } }
@media(min-width:768px){ .stats-panel{ padding-inline:4rem } }
.stats-panel h2{ margin-top:1rem; max-width:20ch; font-size:1.875rem; font-weight:500; letter-spacing:-.01em }
@media(min-width:768px){ .stats-panel h2{ font-size:2.25rem } }
.stats-grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:3rem }
@media(min-width:1024px){ .stats-grid{ grid-template-columns:repeat(4,1fr) } }
.stat .num{ font-size:3rem; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
@media(min-width:640px){ .stat .num{ font-size:3.75rem } }
@media(min-width:768px){ .stat .num{ font-size:4.5rem } }
.stat .lbl{ margin-top:.75rem; font-size:.875rem; color:rgba(255,255,255,.55) }

/* ============ footer ============ */
footer.site{ position:relative; overflow:hidden; border-radius:var(--r-card) var(--r-card) 0 0; background:var(--ink); color:#fff }
footer.site .wrap{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem }
@media(min-width:640px){ footer.site .wrap{ padding-inline:2rem } }
@media(min-width:1024px){ footer.site .wrap{ padding-top:6rem } }
.foot-cta{ display:flex; flex-direction:column; gap:2rem; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4rem }
@media(min-width:1024px){ .foot-cta{ flex-direction:row; align-items:flex-end; justify-content:space-between } }
.foot-cta h2{ max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
@media(min-width:640px){ .foot-cta h2{ font-size:3rem } }
@media(min-width:768px){ .foot-cta h2{ font-size:3.75rem } }
.foot-cols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
@media(min-width:768px){ .foot-cols{ grid-template-columns:1fr 1fr } }
@media(min-width:1024px){ .foot-cols{ grid-template-columns:repeat(4,1fr) } }
.foot-brand .bb{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600 }
.foot-brand .ic{ font-size:1.25rem; display:inline-flex }
.foot-brand p{ margin-top:1rem; max-width:20rem; font-size:.875rem; color:rgba(255,255,255,.55) }
.foot-col h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.4); margin-bottom:1rem; font-weight:500 }
.foot-col ul{ display:flex; flex-direction:column; gap:.75rem; font-size:.875rem }
.alink span{ display:inline-flex; opacity:.65; transition:transform .3s var(--ease-hover), opacity .3s }
@media(hover:hover){ .alink:hover span{ transform:translateX(4px); opacity:1 } }
.legal{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; font-size:.75rem; color:rgba(255,255,255,.45) }
@media(min-width:640px){ .legal{ flex-direction:row } }
.legal .links{ display:flex; gap:1.5rem }
.legal .alink span{ opacity:.7 }
@media(hover:hover){ .legal .alink:hover span{ transform:translateX(3px) } }
.foot-wm{ position:absolute; inset-inline:0; bottom:-1.5rem; z-index:0; text-align:center; pointer-events:none; user-select:none; font-weight:700; line-height:1; font-size:9rem; color:rgba(255,255,255,.05) }

/* ---- finger-friendly tap targets on phones/tablets (desktop layout untouched) ---- */
@media(max-width:860px){
  .foot-col ul{ gap:.1rem }
  .foot-col li .alink{ display:flex; align-items:center; min-height:44px }
  .legal .links{ gap:.5rem }
  .legal .alink{ display:inline-flex; align-items:center; min-height:40px; padding-inline:.35rem }
  .socials .chip{ width:2.75rem; height:2.75rem; min-width:42px; min-height:42px }
  .hero-card .btns{ gap:.5rem }
  .hero-card .btns button{ width:2.6rem; height:2.6rem; min-width:42px; min-height:42px }
  .hero-card #carousel-click{ min-height:44px }
  .sub-back{ min-height:44px; align-items:center }
  header.site .brandbtn{ padding-block:.35rem }
  header.site nav.primary button{ padding-block:.45rem }
}

/* ============ nav menu overlay ============ */
#navmenu{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column; background:var(--ink); color:#fff; opacity:0; visibility:hidden; transition:opacity .5s var(--ease-spring), visibility .5s }
#navmenu.open{ opacity:1; visibility:visible }
#navmenu .top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem }
@media(min-width:640px){ #navmenu .top{ padding:1.5rem 2rem } }
#navmenu .brand{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600 }
#navmenu .brand .ic{ font-size:1.25rem; color:var(--accent-from); display:inline-flex }
#navmenu .close{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15); border-radius:var(--r-ctl); padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.7); transition:border-color .3s, color .3s }
#navmenu .close:hover{ border-color:rgba(255,255,255,.4); color:#fff }
#navmenu .close .ic{ font-size:.875rem; display:inline-flex }
#navmenu nav{ flex:1; display:flex; flex-direction:column; justify-content:center }
#navmenu nav ul{ display:flex; flex-direction:column; gap:.25rem }
#navmenu nav button{ display:flex; align-items:baseline; gap:1rem; width:100%; padding-block:.5rem; text-align:left; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; transform:translateY(1rem); opacity:0; transition:all .5s ease-out }
@media(min-width:640px){ #navmenu nav button{ font-size:3.75rem } }
#navmenu.open nav button{ transform:none; opacity:1 }
#navmenu nav .num{ font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s }
#navmenu nav .lb{ color:rgba(255,255,255,.7); transition:color .3s }
#navmenu nav button:hover .num{ color:var(--accent-from) }
#navmenu nav button:hover .lb{ color:#fff }
#navmenu .bottom{ display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 1.25rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.45) }
@media(min-width:640px){ #navmenu .bottom{ flex-direction:row; align-items:center; justify-content:space-between; padding-inline:2rem } }
#navmenu .bottom .start{ color:rgba(255,255,255,.7); text-transform:uppercase }
#navmenu .bottom .start:hover{ color:#fff; text-decoration:underline }

/* ============ request modal ============ */
#modal{ position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; justify-content:center; padding:1rem; background:rgba(17,17,17,.3); backdrop-filter:blur(16px); opacity:0; visibility:hidden; transition:opacity .45s var(--ease-spring), visibility .45s }
@media(min-width:640px){ #modal{ align-items:center } }
#modal.open{ opacity:1; visibility:visible }
#modal .panel{ position:relative; width:100%; max-width:32rem; overflow:hidden; border-radius:var(--r-card); background:#fff; padding:1.5rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.25), 0 0 0 1px var(--line); transform:translateY(28px); transition:transform .5s var(--ease-spring) }
@media(min-width:640px){ #modal .panel{ padding:2rem } }
#modal.open .panel{ transform:none }
#modal .x{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--surface); color:rgba(17,17,17,.6); transition:background .3s, color .3s }
#modal .x:hover{ background:var(--surface-2); color:#111 }
#modal .head{ margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.375rem }
#modal .kick{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.6) }
#modal .kick::before{ content:""; width:.375rem; height:.375rem; border-radius:var(--r-pill); background:var(--accent) }
#modal h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em }
@media(min-width:640px){ #modal h2{ font-size:1.875rem } }
#modal form{ display:flex; flex-direction:column; gap:1rem }
#modal label{ display:flex; flex-direction:column; gap:.4rem }
#modal .cap{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(17,17,17,.5) }
#modal input, #modal textarea{ width:100%; border:1px solid var(--line); background:rgba(241,240,238,.5); border-radius:var(--r-ctl); padding:.75rem 1rem; font-size:.875rem; outline:none; font-family:inherit; transition:border-color .3s, background .3s }
#modal input:focus, #modal textarea:focus{ border-color:rgba(17,17,17,.3); background:#fff }
#modal textarea{ resize:none }
#modal .foot{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem }
#modal .note{ font-size:.75rem; color:rgba(17,17,17,.45) }
#modal .success{ display:none; flex-direction:column; align-items:center; text-align:center; padding-block:2rem; gap:1rem }
#modal .success .badge{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--ink); color:var(--accent-from); font-size:1.5rem }
#modal .success h2{ font-size:1.5rem }
#modal .success p{ max-width:32ch; font-size:.875rem; color:rgba(17,17,17,.6) }
#modal.done form, #modal.done .head{ display:none }
#modal.done .success{ display:flex }

/* ============ card hover glow — theme-matched radiating light ============ */
.work-card, .glow-card{ position:relative; overflow:hidden }
.work-card::after, .glow-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  background:radial-gradient(circle 15rem at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--accent-from) 55%, transparent), transparent 60%);
  opacity:0; transition:opacity .35s ease; mix-blend-mode:screen;
}
@media(hover:hover){
  .work-card:hover::after, .glow-card:hover::after{ opacity:1 }
  .work-card:hover{ border-color:transparent;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--accent-from) 55%, transparent),
               0 26px 70px -22px color-mix(in srgb, var(--accent-from) 60%, transparent) }
  .glow-card:hover{
    box-shadow:0 0 0 1px color-mix(in srgb, var(--accent-from) 50%, transparent),
               0 22px 60px -26px color-mix(in srgb, var(--accent-from) 55%, transparent) }
}

/* ============ agents ============ */
.agents-sec{ background:#fff }
.agents-sec .wrap{ padding:2.5rem 1.25rem 5rem }
@media(min-width:640px){ .agents-sec .wrap{ padding-inline:2rem } }
@media(min-width:1024px){ .agents-sec .wrap{ padding-bottom:7rem } }
.agents-sec .head{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; margin-bottom:3rem; text-align:center }
.agents-sec h2{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; width:fit-content }
@media(min-width:640px){ .agents-sec h2{ font-size:3rem } }
.agents-intro{ max-width:42rem; font-size:1rem; line-height:1.7; color:rgba(17,17,17,.6) }
.agents-grid{ display:grid; grid-template-columns:1fr; gap:1rem }
@media(min-width:640px){ .agents-grid{ grid-template-columns:1fr 1fr } }
@media(min-width:1024px){ .agents-grid{ grid-template-columns:repeat(3,1fr) } }
.agent-card{ display:flex; align-items:flex-start; gap:1rem; border-radius:var(--r-card-sm); background:var(--ink); color:#fff; padding:1.5rem; border:1px solid rgba(255,255,255,.06) }
.agent-card .ai{ flex:none; width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:.75rem; background:rgba(47,216,166,.12); color:var(--accent-from); font-size:1.25rem }
.agent-card h3{ font-size:1.05rem; font-weight:600; letter-spacing:-.01em }
.agent-card p{ margin-top:.35rem; font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.58) }

/* ============ detail sub-pages ============ */
#subpage{ position:relative; z-index:6; background:#fff }
#subpage[hidden]{ display:none }
body.route-sub #main{ display:none }
.sub-hero{ position:relative; overflow:hidden; padding:9rem 1.25rem 4rem; background:linear-gradient(180deg,#f4f6f5,#fff) }
@media(min-width:640px){ .sub-hero{ padding:10rem 2rem 5rem } }
.sub-hero::before{ content:""; position:absolute; top:-30%; right:-15%; width:60rem; height:44rem; pointer-events:none;
  background:radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--accent-from) 20%, transparent), transparent 60%) }
.sub-hero .inner{ position:relative; max-width:52rem }
.sub-back{ display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:2rem; transition:color .3s }
.sub-back:hover{ color:#111 }
.sub-hero h1{ font-size:clamp(2.25rem,5.5vw,3.75rem); font-weight:600; letter-spacing:-.02em; line-height:1.03; margin:1rem 0 1.25rem }
.sub-hero .lede{ max-width:42rem; font-size:1.05rem; line-height:1.75; color:rgba(17,17,17,.62) }
.quickfacts{ display:flex; flex-wrap:wrap; gap:2.75rem; margin-top:2.75rem; border-top:1px solid var(--line); padding-top:1.75rem }
.quickfacts .n{ font-size:2.1rem; font-weight:700; letter-spacing:-.02em; color:#111 }
.quickfacts .n span{ color:var(--accent) }
.quickfacts .l{ margin-top:.35rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.sub-sec{ padding:4.5rem 1.25rem }
@media(min-width:640px){ .sub-sec{ padding:5.5rem 2rem } }
.sub-sec.alt{ background:var(--surface) }
.sub-sec .shead{ max-width:40rem; margin-bottom:2.5rem }
.sub-sec h2{ margin-top:.9rem; font-size:clamp(1.6rem,3.2vw,2.25rem); font-weight:600; letter-spacing:-.02em }
.feat-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem }
@media(min-width:768px){ .feat-grid{ grid-template-columns:1fr 1fr } }
.glow-card{ border-radius:var(--r-card-sm); background:var(--ink); color:#fff; padding:2rem; border:1px solid rgba(255,255,255,.06) }
.glow-card .gi{ font-size:1.5rem; color:var(--accent-from); display:inline-flex; margin-bottom:1rem }
.glow-card h3{ font-size:1.2rem; font-weight:600; letter-spacing:-.01em }
.glow-card p{ margin-top:.6rem; font-size:.95rem; line-height:1.65; color:rgba(255,255,255,.6) }
.sub-steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:2.25rem }
.sub-steps li{ position:relative; padding:0 }
.sub-steps .idx{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line)); background:#fff; color:var(--accent); font-size:.78rem; font-weight:700; letter-spacing:.02em; margin-bottom:1.1rem }
.sub-sec.alt .sub-steps .idx{ background:var(--surface) }
.sub-steps h3{ font-size:1.15rem; font-weight:600; letter-spacing:-.01em }
.sub-steps p{ margin-top:.55rem; font-size:.92rem; line-height:1.62; color:var(--muted) }
@media(min-width:861px){
  .sub-steps::before{ content:""; position:absolute; top:1.25rem; left:2.75rem; right:2.75rem; height:1px; z-index:0;
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent),color-mix(in srgb,var(--accent) 12%,transparent)) }
}
@media(max-width:860px){ .sub-steps{ grid-template-columns:1fr 1fr; gap:1.9rem 1.75rem } }
@media(max-width:520px){ .sub-steps{ grid-template-columns:1fr; gap:1.6rem } }
.sub-cta{ padding:5rem 1.25rem; text-align:center }
.sub-cta h2{ max-width:20ch; margin:0 auto 2rem; font-size:clamp(1.9rem,4vw,3rem); font-weight:600; letter-spacing:-.02em }
.sub-cta .cta-row{ justify-content:center }
.sub-hero .lede2{ max-width:42rem; margin-top:1.1rem; font-size:.98rem; line-height:1.7; color:rgba(17,17,17,.5) }
.sub-narrow{ max-width:46rem }
.sub-prose p{ font-size:1.08rem; line-height:1.85; color:rgba(17,17,17,.68); margin-top:1.25rem }
.sub-prose p:first-child{ margin-top:0 }
.sub-sec.alt .sub-prose p{ color:rgba(17,17,17,.7) }
.incl-grid{ display:flex; flex-wrap:wrap; gap:.7rem }
.incl-chip{ display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.05rem; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.9rem; font-weight:500; color:#1a1a1a; transition:border-color .25s, transform .25s, box-shadow .25s }
.sub-sec.alt .incl-chip{ background:var(--surface) }
.incl-chip:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow:0 .5rem 1.5rem color-mix(in srgb, var(--accent) 16%, transparent) }
.incl-chip .dot{ width:.5rem; height:.5rem; border-radius:50%; background:linear-gradient(135deg,var(--accent-from),var(--accent-to)); flex:0 0 auto }
.flow-intro{ max-width:42rem; margin-bottom:2.5rem; font-size:1.05rem; line-height:1.75; color:var(--muted) }
.flow{ position:relative; display:flex; flex-direction:column; gap:0; max-width:46rem; margin-left:.4rem }
.flow li{ position:relative; display:flex; gap:1.5rem; align-items:flex-start; padding:0 0 1.6rem 1.9rem }
.flow li::before{ content:""; position:absolute; left:0; top:.15rem; width:.85rem; height:.85rem; border-radius:50%; background:var(--bg,#fff); border:2px solid var(--accent); z-index:1 }
.sub-sec.alt .flow li::before{ background:var(--surface) }
.flow li::after{ content:""; position:absolute; left:.38rem; top:.9rem; bottom:-.15rem; width:2px; background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent) 12%,transparent)) }
.flow li:last-child{ padding-bottom:0 }
.flow li:last-child::after{ display:none }
.flow .fn{ font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--accent); min-width:1.6rem; padding-top:.05rem }
.flow .ft{ font-size:1rem; line-height:1.55; color:#181818 }
.faq{ max-width:46rem; border-top:1px solid var(--line) }
.faq-item{ border-bottom:1px solid var(--line); padding:1.6rem 0 }
.faq-item h3{ font-size:1.15rem; font-weight:600; letter-spacing:-.01em; color:#111; display:flex; gap:.75rem; align-items:baseline }
.faq-item h3::before{ content:"Q"; font-size:.78rem; font-weight:700; color:var(--accent); letter-spacing:.04em; flex:0 0 auto }
.faq-item p{ margin-top:.7rem; padding-left:1.5rem; font-size:1rem; line-height:1.75; color:var(--muted) }
/* ---- legal pages (privacy / terms) ---- */
.legal-updated{ margin-top:1rem; font-size:.8rem; letter-spacing:.02em; color:var(--muted) }
.legal-body{ max-width:44rem }
.legal-toc{ margin:0 0 3rem; padding:1.5rem 1.6rem; border:1px solid var(--line); border-radius:var(--r-card-sm); background:var(--surface) }
.legal-toc h2{ font-size:.72rem !important; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:600; margin:0 0 1rem }
.legal-toc ol{ list-style:none; counter-reset:toc; display:grid; gap:.55rem }
.legal-toc li{ counter-increment:toc }
.legal-toc a{ display:inline-flex; gap:.7rem; align-items:baseline; font-size:.95rem; color:#1a1a1a; transition:color .25s }
.legal-toc a::before{ content:counter(toc,decimal-leading-zero); font-size:.72rem; font-weight:700; color:var(--accent) }
.legal-toc a:hover{ color:var(--accent) }
.legal-sec{ counter-increment:lsec; padding-top:2.5rem; margin-top:2.5rem; border-top:1px solid var(--line) }
.legal-sec:first-of-type{ border-top:none; margin-top:0; padding-top:0 }
.legal-sec h2{ font-size:1.3rem !important; font-weight:600; letter-spacing:-.01em; margin:0 0 1.1rem; display:flex; gap:.75rem; align-items:baseline }
.legal-sec h2::before{ content:counter(lsec,decimal-leading-zero); font-size:.8rem; font-weight:700; color:var(--accent); letter-spacing:.04em }
.legal-sec h3{ font-size:1.02rem; font-weight:600; margin:1.75rem 0 .6rem; color:#161616 }
.legal-sec p{ font-size:1rem; line-height:1.8; color:rgba(17,17,17,.66); margin-top:1rem }
.legal-sec p:first-of-type{ margin-top:0 }
.legal-sec ul{ margin:1rem 0 0; padding-left:0; list-style:none; display:grid; gap:.7rem }
.legal-sec ul li{ position:relative; padding-left:1.4rem; font-size:1rem; line-height:1.7; color:rgba(17,17,17,.66) }
.legal-sec ul li::before{ content:""; position:absolute; left:0; top:.62rem; width:.45rem; height:.45rem; border-radius:50%; background:linear-gradient(135deg,var(--accent-from),var(--accent-to)) }
.legal-sec a{ color:var(--accent-to); text-decoration:underline; text-underline-offset:2px }
.legal-note{ margin-top:3rem; padding:1.25rem 1.4rem; border-radius:var(--r-card-sm); background:var(--surface); border:1px solid var(--line); font-size:.85rem; line-height:1.7; color:var(--muted) }
.legal-body{ counter-reset:lsec }