/* ═══════════════════════════════════════════════════════════════
   WSE LAB CONSULT — design system v4 "Agency Blue"
   White-dominant · #0A2463 navy (headlines, buttons, footer, OODA)
   #EEF2FF cards · #1565C0 accent (small elements only)
   Syne 700–800 display / DM Sans 400–500 body
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF;
  --card:#EEF2FF;
  --navy:#0A2463;
  --navy-deep:#081B4A;      /* mockup screens & gradients only */
  --navy-light:#1B3A6B;     /* body text */
  --accent:#1565C0;
  --accent-soft:#E3ECFF;
  --muted:#6B7280;
  --white:#FFFFFF;
  --border:#D1D9F0;
  --surface:#EEF2FF;
  --green:#1FCFA4;
  --green-soft:#E4FAF4;
  --green-deep:#0E8A6D;
  --amber:#F4A21B;
  --amber-soft:#FDF3DE;
  --amber-deep:#A96D06;
  --on-navy:#FFFFFF;
  --on-navy-muted:#C7D2E8;
  --radius:12px;
  --btn-radius:6px;
  --shadow-sm:0 1px 2px rgba(10,36,99,.05), 0 6px 18px -8px rgba(10,36,99,.10);
  --shadow-lg:0 28px 70px -28px rgba(10,36,99,.28);
  --glow-navy:0 12px 34px -12px rgba(10,36,99,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sect:clamp(72px, 5vw + 48px, 130px);
  --ff-display:'Syne', sans-serif;
  --ff-body:'DM Sans', sans-serif;
  /* One consistent size for every small label/tag/caption on the site
     (badges, chips, eyebrows, picture captions, form labels) — these were
     previously 11px/11.5px/12px/12.5px/13px/13.5px/14px depending on which
     component you looked at, which read as "every picture has different
     text size" even though each value was individually deliberate.
     Headings, body copy, and .lead keep their own scale — hierarchy still
     needs contrast, only the micro-text tier is unified. */
  --fs-label:12.5px;
  --fs-support:14.5px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16.5px;
  line-height:1.65;
  color:var(--navy-light);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent-soft);color:var(--navy)}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4vw,36px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 18px;z-index:400;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* ── Type — headlines always full navy ── */
h1,h2,h3,h4{font-family:var(--ff-display);color:var(--navy);margin:0;line-height:1.06;letter-spacing:-.01em}
.h-xl{font-size:clamp(2.6rem, 1.4rem + 4.8vw, 4.6rem);font-weight:800}
.h-lg{font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3rem);font-weight:800}
.h-md{font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem);font-weight:700;line-height:1.25}
.h-sm{font-size:1.08rem;font-weight:700;line-height:1.3}
p{margin:0}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.24rem);color:var(--muted);line-height:1.7}
.body-muted{color:var(--muted)}

/* Eyebrow — accent label with 3px × 40px rule below */
.eyebrow{
  display:inline-block;
  font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
}
.eyebrow::after{content:"";display:block;width:40px;height:3px;background:var(--accent);margin-top:10px}
.eyebrow.center{text-align:center}
.eyebrow.center::after{margin-inline:auto}
.on-navy .eyebrow{color:var(--on-navy-muted)}
.on-navy .eyebrow::after{background:var(--on-navy-muted)}

/* ── Buttons — navy bg, white text ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-display);font-weight:700;font-size:15px;letter-spacing:.02em;
  padding:16px 30px;border-radius:var(--btn-radius);border:1.5px solid transparent;
  cursor:pointer;transition:transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s;
  text-decoration:none;
}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--navy);color:var(--white);box-shadow:var(--glow-navy)}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(21,101,192,.55)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--card);transform:translateY(-2px)}
.btn-invert{background:var(--white);color:var(--navy)}
.btn-invert:hover{background:var(--accent-soft);transform:translateY(-2px)}
.on-navy .btn-ghost{color:var(--on-navy);border-color:rgba(255,255,255,.45)}
.on-navy .btn-ghost:hover{background:rgba(255,255,255,.1)}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);
  font-weight:700;font-size:var(--fs-support);color:var(--navy);
}
.link-arrow svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.link-arrow.accent{color:var(--accent)}

/* ── Loading screen ── */
#loader{
  position:fixed;inset:0;z-index:300;background:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  animation:loaderAutoHide .6s var(--ease) 3s forwards;
}
#loader.done{animation:loaderOut .55s var(--ease) forwards}
#loader .loader-logo{width:120px;height:auto;animation:loaderLogo .8s var(--ease) both}
#loader .loader-bar{width:190px;height:3px;background:var(--border);overflow:hidden;border-radius:2px}
#loader .loader-bar span{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);animation:loaderFill 1.5s var(--ease) .2s forwards}
#loader .loader-tag{
  font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);opacity:0;animation:loaderTag .7s var(--ease) .9s forwards;
}
@keyframes loaderLogo{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes loaderFill{to{transform:scaleX(1)}}
@keyframes loaderTag{to{opacity:1}}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}
@keyframes loaderAutoHide{to{opacity:0;visibility:hidden}}

/* ── Header — white, pill navy CTA ── */
.nav{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand .logo-img{height:44px;width:auto}
.brand-mark{
  font-family:var(--ff-display);font-weight:800;font-size:var(--fs-label);letter-spacing:.06em;
  color:var(--white);background:var(--navy);border-radius:6px;padding:8px 10px;line-height:1;
}
.brand-name{font-family:var(--ff-display);font-weight:600;font-size:16.5px;color:var(--navy);white-space:nowrap}
.brand-name b{font-weight:800}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a[data-nav]{
  font-family:var(--ff-body);font-weight:600;font-size:15px;color:var(--muted);
  position:relative;padding:6px 0;transition:color .2s;
}
.nav-links a[data-nav]::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--accent);transition:right .25s var(--ease);
}
.nav-links a[data-nav]:hover{color:var(--navy)}
.nav-links a[data-nav].active{color:var(--navy)}
.nav-links a[data-nav].active::after{right:0}
.nav-cta{padding:12px 26px;font-size:14px;border-radius:999px}
.nav-toggle{display:none;background:none;border:0;color:var(--navy);padding:8px;cursor:pointer;z-index:220}
@media (max-width:920px){
  .nav-toggle{display:block}
  .nav-links{
    display:flex;position:fixed;inset:0;background:var(--white);z-index:210;
    flex-direction:column;align-items:center;justify-content:center;gap:10px;
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
  }
  .nav-links.open{opacity:1;pointer-events:auto}
  .nav-links a[data-nav]{font-family:var(--ff-display);font-weight:700;font-size:26px;padding:12px 0}
  .nav-cta{margin-top:18px;font-size:16px;padding:16px 34px}
}

/* ── Sections — white / #EEF2FF rhythm ── */
.section{padding-block:var(--sect)}
.section-head{max-width:660px;margin-bottom:clamp(36px,4vw,58px)}
.section-head h2{margin:18px 0 14px}
.alt{background:var(--surface);border-block:1px solid var(--border)}
.on-navy{background:var(--navy);color:var(--on-navy)}
.on-navy h2,.on-navy h3,.on-navy h4{color:var(--on-navy)}
.on-navy .lead,.on-navy .body-muted{color:var(--on-navy-muted)}

/* Split section head (Xtratheme): headline left, copy right */
.split-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,64px);align-items:end;margin-bottom:clamp(36px,4vw,58px)}
@media (max-width:880px){.split-head{grid-template-columns:1fr;align-items:start}}

/* Page hero (inner pages) */
.phero{padding-block:clamp(56px,5vw,92px) clamp(20px,2.5vw,36px)}
.phero h1{margin:20px 0 18px;max-width:18ch}
.phero .lead{max-width:58ch}

/* ── Reveal & motion ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-split] .w{display:inline-block;opacity:0;transform:translateY(.5em);animation:wordUp .7s var(--ease) forwards;animation-delay:calc(var(--i) * 90ms)}
@keyframes wordUp{to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  [data-split] .w{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ── Grids & cards — soft blue-tinted ── */
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);position:relative;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.card h3{margin:14px 0 10px}
.card p{color:var(--muted);font-size:var(--fs-support)}
.card-kicker{
  font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.alt .card{background:var(--white)}

/* Service cards — accent top border sweeps in on hover */
.svc-card::before{
  content:"";position:absolute;top:-1px;left:0;right:100%;height:3px;
  background:var(--accent);transition:right .3s var(--ease);border-radius:3px 3px 0 0;
}
.svc-card:hover::before{right:0}

/* ── Badges ── */
.badge{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-body);
  font-weight:700;font-size:var(--fs-label);letter-spacing:.04em;
  padding:5px 12px;border-radius:999px;white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.live::before{animation:badgePulse 1.8s ease-in-out infinite}
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.35}}
.badge.live{background:var(--green-soft);color:var(--green-deep)}
.badge.building{background:var(--amber-soft);color:var(--amber-deep)}
.badge.hiring{background:var(--amber-soft);color:var(--amber-deep)}
.badge.founder{background:var(--accent-soft);color:var(--accent)}

/* ── Image placeholders (until real assets are dropped into website/assets/) ── */
.ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--card);border:1px solid var(--border);color:var(--accent);
}
.ph .ph-ini{
  font-family:var(--ff-display);font-weight:800;font-size:clamp(1.6rem,4vw,2.6rem);
  color:var(--accent);letter-spacing:.04em;
}
.ph .ph-cap{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* Portrait placeholder — illustrated bust silhouette, not a flat letter box.
   Swapped automatically the instant assets/me.png exists. */
.ph-photo{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  border:1px solid var(--navy);color:var(--white);
}
.ph-photo .ph-bust{position:absolute;inset:0;width:100%;height:100%}
.ph-photo .ph-badge{
  position:absolute;top:18px;left:18px;z-index:2;width:46px;height:46px;border-radius:10px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;font-size:15px;color:#fff;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.ph-photo .ph-cap{
  position:absolute;left:18px;right:18px;bottom:18px;z-index:2;
  font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:normal;text-transform:none;color:#fff;
  background:rgba(8,27,74,.55);border:1px solid rgba(255,255,255,.16);
  padding:9px 13px;border-radius:8px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}

/* App-mockup placeholder (products) — a compact abstract screenshot instead
   of a bare grid + initials. Three layout variants keep the grid from
   looking like the same card repeated thirteen times. */
/* Product illustration placeholder — bespoke per-product line icon on a
   glowing navy backdrop, replacing the old fake-app-mockup rows: a
   deliberate illustration reads as designed, a fake screenshot reads as
   a placeholder. Swaps for a real screenshot instantly once one exists
   at the matching path, same as every other .ph variant. */
.ph-illustration{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:24px;
  background:
    radial-gradient(120% 140% at 30% 18%, rgba(21,101,192,.4), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.ph-illustration::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
}
.ph-illustration .pi-icon{
  position:relative;z-index:1;width:64px;height:64px;border-radius:16px;flex:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:#7DA9FF;
  box-shadow:0 16px 34px -10px rgba(0,0,0,.5);
  transition:transform .4s var(--ease), background .4s, box-shadow .4s;
}
.ph-illustration .pi-icon svg{width:30px;height:30px;transition:transform .4s var(--ease)}
.ph-illustration .pi-label{
  position:relative;z-index:1;text-align:center;max-width:220px;
  font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.03em;
  color:rgba(255,255,255,.9);
}
/* Sheen sweep + icon lift on hover — turns the static illustration tile
   into something that visibly responds, without a JS dependency. */
.ph-illustration::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);
}
.prod-card:hover .ph-illustration::after,
.show-card:hover .ph-illustration::after{left:130%}
.prod-card:hover .ph-illustration .pi-icon,
.show-card:hover .ph-illustration .pi-icon{
  transform:translateY(-3px) scale(1.06);
  background:rgba(255,255,255,.14);box-shadow:0 20px 40px -10px rgba(0,0,0,.55);
}
.prod-card:hover .ph-illustration .pi-icon svg,
.show-card:hover .ph-illustration .pi-icon svg{transform:rotate(-6deg)}

/* Small circular icon badge — used on flat card grids for visual weight */
.card-ico{
  width:44px;height:44px;border-radius:10px;background:var(--white);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--accent);margin-bottom:14px;
  transition:transform .35s var(--ease), background .35s, border-color .35s, color .35s;
}
.card-ico svg{width:20px;height:20px;transition:transform .35s var(--ease)}
.card:hover .card-ico{transform:translateY(-2px) rotate(-4deg);background:var(--navy);border-color:var(--navy);color:var(--white)}
.on-navy .card-ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--white)}
.on-navy .card:hover .card-ico{background:var(--accent);border-color:var(--accent)}

/* ── HOME hero ── */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,5.5vw,100px) 0}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 420px at 88% -12%, rgba(21,101,192,.10), transparent 68%),
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:auto,76px 76px,76px 76px;
  -webkit-mask-image:radial-gradient(1200px 640px at 50% 0%, #000 28%, transparent 80%);
  mask-image:radial-gradient(1200px 640px at 50% 0%, #000 28%, transparent 80%);
  opacity:.5;
}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,72px);align-items:center}
.hero h1{margin:22px 0 20px;max-width:13ch}
.hero .lead{max-width:48ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-note{margin-top:18px;font-size:var(--fs-label);color:var(--muted)}

/* ── Browser / dashboard mockup (CSS-drawn) ── */
.browser{
  max-width:900px;margin:clamp(40px,4.5vw,64px) auto 0;
  border-radius:14px;overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow-lg);background:var(--white);
}
.b-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--border)}
.b-bar span{width:10px;height:10px;border-radius:50%;background:var(--border)}
.b-bar span:first-child{background:var(--accent)}
.b-url{flex:1;max-width:340px;height:20px;border-radius:10px;background:var(--white);border:1px solid var(--border);margin-left:8px}
.b-screen{background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);padding:0}
.m-nav{height:38px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.10);display:flex;align-items:center;gap:8px;padding:0 16px}
.m-nav::before{content:"";width:70px;height:9px;border-radius:5px;background:rgba(255,255,255,.35)}
.m-nav::after{content:"";width:150px;height:9px;border-radius:5px;background:rgba(255,255,255,.14);margin-left:auto}
.b-body{display:flex;min-height:250px}
.m-side{width:64px;background:rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.09);padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.m-side i{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.14)}
.m-side i:first-child{background:var(--accent)}
.m-main{flex:1;padding:18px;display:flex;flex-direction:column;gap:14px}

/* Animated revenue chart — replaces the old static gray-bar mockup with a
   genuine (if illustrative) data visualisation that draws itself in when
   the hero scrolls into view, driven by the shared .reveal/.in mechanism. */
.viz-head{display:flex;align-items:center;justify-content:space-between;flex:none}
.viz-label{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.viz-delta{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-label);color:#5FE3A6;background:rgba(95,227,166,.15);padding:3px 10px;border-radius:999px}
.viz-chart{position:relative;flex:1;min-height:110px}
.viz-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.viz-line polyline{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.3s var(--ease) .3s}
.viz-line circle{fill:var(--accent);opacity:0;transition:opacity .4s ease 1.4s}
.reveal.in .viz-line polyline{stroke-dashoffset:0}
.reveal.in .viz-line circle{opacity:1}
.viz-bars{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:8px;height:100%;pointer-events:none}
.viz-bars b{
  flex:1;height:100%;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--accent) 0%, rgba(21,101,192,.3) 100%);opacity:.55;
  transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease);
}
.reveal.in .viz-bars b{transform:scaleY(var(--h))}
.viz-bars b:nth-child(1){transition-delay:.05s}
.viz-bars b:nth-child(2){transition-delay:.1s}
.viz-bars b:nth-child(3){transition-delay:.15s}
.viz-bars b:nth-child(4){transition-delay:.2s}
.viz-bars b:nth-child(5){transition-delay:.25s}
.viz-bars b:nth-child(6){transition-delay:.3s}
.viz-bars b:nth-child(7){transition-delay:.35s}

/* ── Geometric dividers (stats band) ── */
.geo-divider{
  height:12px;
  background:repeating-linear-gradient(-45deg, var(--card) 0 10px, var(--white) 10px 20px);
  border-block:1px solid var(--border);
}

/* Hero stat strip — accent-underlined numbers */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-block:clamp(28px,3.2vw,40px);
}
.stat{padding-inline:clamp(14px,2.5vw,34px);border-left:1px solid var(--border)}
.stat:first-child{border-left:0;padding-left:0}
.stat .num{
  font-family:var(--ff-display);font-weight:800;font-size:clamp(1.6rem,1.2rem+1.5vw,2.4rem);
  color:var(--navy);line-height:1.1;display:inline-block;
  border-bottom:3px solid var(--accent);padding-bottom:6px;
}
.stat .lbl{font-size:var(--fs-label);color:var(--muted);margin-top:8px}
@media (max-width:760px){
  .stat-strip{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
}

/* ── Product showcase (chrome-framed) ── */
.show-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:980px){.show-grid{grid-template-columns:1fr;max-width:560px}}
.show-card{display:flex;flex-direction:column;text-decoration:none}
.show-frame{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.show-media{aspect-ratio:16/10;overflow:hidden}
.show-media img,.show-media .ph{width:100%;height:100%;object-fit:cover}
.show-card:hover .show-frame{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.show-body{padding:20px 4px 0}
.show-body h3{font-size:1.3rem;margin:0 0 6px}
.show-body p{color:var(--muted);font-size:var(--fs-support);margin-bottom:12px}

/* Mini browser-tab chrome strip (product cards, showcases, detail) */
.prod-chrome{
  display:flex;align-items:center;gap:10px;background:var(--navy);
  padding:10px 14px;
}
.pc-dots{display:flex;gap:5px;flex:none}
.pc-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.pc-dots i:first-child{background:var(--accent);position:relative}
.pc-dots i:first-child::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--accent);
  opacity:.7;animation:dotPulse 2.2s ease-out infinite;
}
@keyframes dotPulse{
  0%{transform:scale(.5);opacity:.7}
  100%{transform:scale(1.9);opacity:0}
}
.pc-tab{
  font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);color:var(--white);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  padding:4px 12px;border-radius:5px 5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transform:translateY(5px);
  display:flex;align-items:center;gap:6px;
}
.pc-tab img{width:13px;height:13px;border-radius:3px;flex:none}
.prod-chrome .badge{margin-left:auto;flex:none}

/* ── OODA — navy section ── */
.ooda-grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(36px,5vw,80px);align-items:center}
@media (max-width:900px){.ooda-grid{grid-template-columns:1fr}}
.ooda-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ooda-step{
  display:flex;gap:18px;align-items:flex-start;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  padding:20px 22px;transition:border-color .25s, transform .25s var(--ease);
}
.ooda-step:hover{border-color:rgba(255,255,255,.4);transform:translateX(4px)}
.ooda-num{
  flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.55);
  font-family:var(--ff-display);font-weight:800;font-size:14px;color:var(--white);
}
.ooda-step h3{font-size:1.12rem;margin:3px 0 5px}
.ooda-step p{color:var(--on-navy-muted);font-size:var(--fs-support);margin:0}
.ooda-visual{position:relative;aspect-ratio:1/1;max-width:440px;margin-inline:auto;width:100%}
.ooda-visual svg{width:100%;height:100%;overflow:visible}
.ooda-ring{transform-origin:200px 200px;animation:oodaSpin 40s linear infinite}
.ooda-ring2{transform-origin:200px 200px;animation:oodaSpin 60s linear infinite reverse}
@keyframes oodaSpin{to{transform:rotate(360deg)}}

/* ── Results strip ── */
.results{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
@media (max-width:760px){.results{grid-template-columns:repeat(2,1fr);row-gap:36px}}
.result .num{
  font-family:var(--ff-display);font-weight:800;color:var(--navy);
  font-size:clamp(3rem, 2rem + 4.5vw, 5.4rem);line-height:1;
  display:inline-block;border-bottom:4px solid var(--accent);padding-bottom:10px;
}
.result .lbl{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px}

/* ── Pricing — featured card is navy ── */
.price-card{display:flex;flex-direction:column;padding:36px 32px}
.price-card .tier{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.price-card .amount{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.8rem,1.4rem+1.4vw,2.5rem);color:var(--navy);margin:14px 0 4px}
.price-card .per{font-size:var(--fs-label);color:var(--muted);margin-bottom:20px}
.price-list{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:10px}
.price-list li{position:relative;padding-left:24px;color:var(--muted);font-size:var(--fs-support)}
.price-list li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:2px;background:var(--accent)}
.price-card .btn{margin-top:auto;justify-content:center}
.price-card.featured{background:var(--navy);border-color:var(--navy);box-shadow:var(--glow-navy)}
.price-card.featured .tier{color:var(--on-navy-muted)}
.price-card.featured .amount{color:var(--white)}
.price-card.featured .per{color:var(--on-navy-muted)}
.price-card.featured .price-list li{color:var(--on-navy-muted)}
.price-card.featured .price-list li::before{background:var(--white)}
.price-card.featured:hover{border-color:var(--accent)}
.price-card.featured .flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--white);font-family:var(--ff-display);font-weight:800;
  font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;padding:5px 14px;border-radius:3px;
}

/* ── ABOUT ── */
.founder-card{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,3.5vw,48px);
  border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius);
  padding:clamp(24px,3vw,40px);background:var(--card);box-shadow:var(--shadow-sm);align-items:center;
}
@media (max-width:820px){.founder-card{grid-template-columns:1fr}}
.founder-card .fc-media{aspect-ratio:4/5;border-radius:10px;overflow:hidden;border:2px solid var(--accent)}
.founder-card .fc-media img,.founder-card .fc-media .ph{width:100%;height:100%;object-fit:cover}
.stats-2x2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.stats-2x2 .cell{border:1px solid var(--border);border-radius:10px;padding:16px 18px;background:var(--white)}
.stats-2x2 .cell b{font-family:var(--ff-display);font-weight:800;font-size:1.4rem;color:var(--navy);display:block}
.stats-2x2 .cell span{font-size:var(--fs-label);color:var(--muted)}

/* Timeline — accent rail */
.timeline{list-style:none;margin:0;padding:0;position:relative;max-width:640px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--accent), var(--border))}
.timeline li{position:relative;padding:0 0 30px 44px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;
  background:var(--white);border:2px solid var(--accent);box-shadow:0 0 0 5px var(--accent-soft);
}
.timeline .yr{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-label);color:var(--accent);letter-spacing:.08em}
.timeline h3{font-size:1.1rem;margin:4px 0 4px}
.timeline p{color:var(--muted);font-size:var(--fs-support)}

/* Team — navy top bar with initials */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:820px}
@media (max-width:640px){.team-grid{grid-template-columns:1fr}}
.team-card{padding:0;overflow:hidden;display:flex;flex-direction:column;text-align:left}
.team-top{
  background:var(--navy);color:var(--white);font-family:var(--ff-display);font-weight:800;
  font-size:22px;letter-spacing:.06em;padding:20px 24px;display:flex;align-items:center;gap:12px;
}
.team-top::after{content:"";flex:1;height:2px;background:rgba(255,255,255,.18)}
.team-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.team-body h3{font-size:1.12rem;margin:0}
.team-role{font-size:var(--fs-support);color:var(--muted)}
.team-body .badge{margin-top:14px;align-self:flex-start}

/* ── PRODUCTS grid + filters ── */
.filter-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.filter-tab{
  font-family:var(--ff-display);font-weight:700;font-size:13.5px;letter-spacing:.04em;
  padding:11px 22px;border-radius:var(--btn-radius);border:1.5px solid var(--border);
  background:var(--white);color:var(--muted);cursor:pointer;transition:all .2s var(--ease);
}
.filter-tab:hover{border-color:var(--accent);color:var(--navy)}
.filter-tab.active{background:var(--navy);border-color:var(--navy);color:var(--white);box-shadow:var(--glow-navy)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:980px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.prod-grid{grid-template-columns:1fr}}
.prod-card{padding:0;overflow:hidden;display:flex;flex-direction:column;cursor:pointer}
.prod-media{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--border)}
.prod-media img,.prod-media .ph{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.prod-card:hover .prod-media img{transform:scale(1.04)}
.prod-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;background:var(--card)}
.prod-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.prod-top h3{margin:0;font-size:1.16rem}
.prod-tag{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-top:8px}
.prod-body p{margin-top:10px;flex:1;font-size:var(--fs-support)}
.prod-links{display:flex;align-items:center;gap:18px;margin-top:16px}

/* ── Product detail ── */
.detail-hero{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.detail-hero .dh-media{aspect-ratio:21/9}
.detail-hero img,.detail-hero .ph{width:100%;height:100%;object-fit:cover}
.detail-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(30px,4vw,60px);margin-top:clamp(30px,4vw,48px)}
@media (max-width:880px){.detail-grid{grid-template-columns:1fr}}
.detail-body p{color:var(--muted);margin-bottom:18px;line-height:1.75}
.feature-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.feature-list li{position:relative;padding-left:26px;color:var(--muted);font-size:var(--fs-support)}
.feature-list li::before{content:"";position:absolute;left:0;top:10px;width:14px;height:2px;background:var(--accent)}
.detail-side .card{position:sticky;top:100px}

/* ── SERVICES page — text left, visual right ── */
.svc-section{padding-block:clamp(56px,5vw,88px)}
.svc-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,72px);align-items:center}
@media (max-width:880px){.svc-inner{grid-template-columns:1fr}}
.svc-meta{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap}
.svc-time{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:700;
  font-size:var(--fs-label);letter-spacing:.08em;color:var(--navy);
  border:1px solid var(--border);background:var(--card);padding:8px 14px;border-radius:6px;
}
.alt .svc-time{background:var(--white)}
.svc-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.svc-list li{position:relative;padding-left:26px;color:var(--muted);font-size:var(--fs-support)}
.svc-list li::before{content:"";position:absolute;left:0;top:10px;width:14px;height:2px;background:var(--accent)}

/* Service visuals — CSS-drawn */
.mock{
  border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow-lg);
  overflow:hidden;width:100%;max-width:520px;justify-self:end;
}
@media (max-width:880px){.mock{justify-self:start}}
/* 01 — dark code/dashboard UI */
.mock-dash{background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%)}
.mock-dash .m-code{padding:18px;display:grid;gap:10px}
.mock-dash .m-code i{height:9px;border-radius:5px;background:rgba(255,255,255,.16);display:block}
.mock-dash .m-code i:nth-child(2){width:78%;background:rgba(21,101,192,.85)}
.mock-dash .m-code i:nth-child(3){width:62%}
.mock-dash .m-code i:nth-child(4){width:84%;background:rgba(255,255,255,.30)}
.mock-dash .m-code i:nth-child(5){width:48%;background:rgba(31,207,164,.65)}
.mock-dash .m-code i:nth-child(6){width:70%}
/* 02 — workflow diagram */
.mock-flow{background:var(--card);padding:26px}
.f-col{display:flex;flex-direction:column;align-items:center}
.f-node{
  background:var(--white);border:1.5px solid var(--accent);border-radius:8px;
  font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);color:var(--navy);
  padding:10px 18px;box-shadow:var(--shadow-sm);white-space:nowrap;
}
.f-node.dark{background:var(--navy);color:var(--white);border-color:var(--navy)}
.f-line{width:2px;height:26px;background:var(--accent)}
.f-line.dashed{background:repeating-linear-gradient(var(--accent) 0 4px, transparent 4px 8px)}
.f-split{display:flex;gap:14px;align-items:flex-start;position:relative;padding-top:26px}
.f-split::before{content:"";position:absolute;top:0;left:50%;width:2px;height:14px;background:var(--accent);transform:translateX(-50%)}
.f-split::after{content:"";position:absolute;top:14px;left:25%;right:25%;height:2px;background:var(--accent)}
.f-branch{display:flex;flex-direction:column;align-items:center;gap:0}
.f-branch .f-line{height:12px}
/* 03 — roadmap / chart */
.mock-chart{background:var(--white);padding:26px}
.c-bars{display:flex;align-items:flex-end;gap:14px;height:150px;border-bottom:2px solid var(--border);padding-inline:8px}
.c-bars b{flex:1;border-radius:6px 6px 0 0;background:var(--card);border:1px solid var(--border);border-bottom:0}
.c-bars b.a{background:var(--accent);border-color:var(--accent)}
.c-bars b:nth-child(1){height:34%}
.c-bars b:nth-child(2){height:52%}
.c-bars b:nth-child(3){height:44%}
.c-bars b:nth-child(4){height:70%}
.c-bars b:nth-child(5){height:88%}
.c-road{display:flex;justify-content:space-between;align-items:center;margin-top:18px;position:relative}
.c-road::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:var(--border)}
.c-road i{
  width:14px;height:14px;border-radius:50%;background:var(--white);
  border:2.5px solid var(--accent);position:relative;z-index:1;
}
.c-road i.done{background:var(--accent)}
/* 04 — SaaS pricing mockup */
.mock-saas{background:var(--card);padding:26px;display:flex;justify-content:center}
.s-card{
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow-lg);padding:22px;width:min(240px,100%);display:grid;gap:10px;
}
.s-card .s-t{width:56%;height:10px;border-radius:5px;background:var(--navy)}
.s-card .s-p{width:40%;height:18px;border-radius:5px;background:var(--accent)}
.s-card .s-r{height:8px;border-radius:4px;background:var(--card)}
.s-card .s-r.w70{width:70%}
.s-card .s-r.w85{width:85%}
.s-card .s-btn{height:34px;border-radius:6px;background:var(--navy);margin-top:6px;position:relative}
.s-card .s-btn::before{content:"";position:absolute;inset:50% auto auto 50%;width:52px;height:8px;border-radius:4px;background:rgba(255,255,255,.5);transform:translate(-50%,-50%)}

/* ── CONTACT — navy hero + split layout ── */
.contact-hero{
  background:var(--navy);color:var(--on-navy);text-align:center;
  padding-block:clamp(56px,5.5vw,96px);
}
.contact-hero h1{color:var(--white);max-width:20ch;margin:20px auto 18px}
.contact-hero .lead{color:var(--on-navy-muted);max-width:58ch;margin-inline:auto}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,4vw,56px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.info-card{
  background:var(--navy);color:var(--on-navy);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);box-shadow:var(--glow-navy);display:grid;gap:22px;
  position:sticky;top:100px;
}
.info-row{display:flex;gap:14px;align-items:flex-start}
.info-ico{
  flex:none;width:42px;height:42px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:var(--white);
}
.info-k{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-muted)}
.info-v{font-family:var(--ff-display);font-weight:700;font-size:1.02rem;color:var(--white);margin-top:3px;word-break:break-word}
.info-v a{color:var(--white)}
.info-v a:hover{color:var(--on-navy-muted)}
.info-qr{background:var(--white);border-radius:10px;padding:12px;display:inline-block}
.info-qr img{width:120px;height:120px}
/* CSS map pin */
.pin{
  width:26px;height:26px;background:var(--white);border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);position:relative;margin:4px 8px 8px 8px;flex:none;
}
.pin::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--navy)}
.form-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(24px,3vw,34px)}
form.inq{display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.field label{display:block;font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;border:1px solid var(--border);background:var(--white);border-radius:6px;
  padding:13px 15px;font-family:var(--ff-body);font-size:var(--fs-support);color:var(--navy-light);outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{resize:vertical;min-height:130px}
.sent{display:none;text-align:center;padding:44px 20px}
.sent.show{display:block}
.sent .ico{width:58px;height:58px;border-radius:50%;background:var(--navy);color:var(--white);display:grid;place-items:center;margin:0 auto 18px}

/* ── CTA band ── */
.cta-band{
  border:1px solid var(--border);background:var(--card);
  border-radius:16px;padding:clamp(40px,5vw,64px);text-align:center;
}
.cta-band h2{max-width:22ch;margin:16px auto 14px}
.cta-band .lead{max-width:52ch;margin:0 auto 30px}

/* ── Footer — navy, white text ── */
.footer{background:var(--navy);color:var(--on-navy-muted);margin-top:var(--sect);padding:clamp(56px,5vw,84px) 0 34px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(26px,3.5vw,52px)}
@media (max-width:920px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer .brand-name{color:var(--white)}
.footer .brand-mark{background:var(--white);color:var(--navy)}
.footer .logo-img{height:46px;width:auto}
.footer-blurb{margin-top:18px;font-size:var(--fs-support);max-width:34ch;line-height:1.7}
.footer-col h4{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--white);margin:0 0 16px}
.footer-col a{display:block;color:var(--on-navy-muted);font-size:var(--fs-support);padding:5px 0;transition:color .2s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);margin-top:clamp(36px,4vw,56px);padding-top:26px;
  font-size:var(--fs-label);
}

/* ── Floating actions ── */
.fab-wa{
  position:fixed;right:22px;bottom:22px;z-index:150;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.55);
  transition:transform .2s var(--ease);
}
.fab-wa:hover{transform:scale(1.08)}
#wz-bubble{
  position:fixed;right:22px;bottom:92px;z-index:150;width:56px;height:56px;border-radius:50%;
  background:var(--navy);color:var(--white);display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--glow-navy);border:0;
  transition:transform .2s var(--ease), background .2s;
}
#wz-bubble:hover{transform:scale(1.08);background:var(--accent)}
.wz-label{
  position:fixed;right:86px;bottom:106px;z-index:150;background:var(--navy);color:var(--white);
  font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;
  padding:6px 12px;border-radius:4px;pointer-events:none;
}
#wz-panel{
  position:fixed;right:22px;bottom:160px;z-index:160;width:min(370px, calc(100vw - 32px));
  background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-lg);display:none;flex-direction:column;max-height:min(520px, 64vh);
}
#wz-panel.open{display:flex;animation:fadein .3s var(--ease)}
.wz-head{display:flex;align-items:center;gap:12px;background:var(--navy);color:var(--white);padding:15px 16px}
.wz-av{
  width:38px;height:38px;border-radius:50%;background:var(--white);color:var(--navy);
  display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;flex:none;
}
.wz-hname{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-support)}
.wz-hstatus{font-size:var(--fs-label);color:var(--green)}
.wz-close{margin-left:auto;background:none;border:0;color:var(--on-navy-muted);cursor:pointer;padding:6px}
.wz-close:hover{color:#fff}
.wz-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--card)}
.wz-msg{max-width:85%;padding:11px 14px;border-radius:12px;font-size:var(--fs-support);line-height:1.55}
.wz-msg.bot{background:var(--white);border:1px solid var(--border);color:var(--navy-light);border-bottom-left-radius:4px;align-self:flex-start}
.wz-msg.user{background:var(--navy);color:var(--white);border-bottom-right-radius:4px;align-self:flex-end}
.wz-msg.typing{color:var(--muted);font-style:italic}
.wz-foot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--white)}
.wz-foot input{
  flex:1;border:1px solid var(--border);border-radius:6px;padding:11px 14px;
  font-family:var(--ff-body);font-size:var(--fs-support);outline:none;transition:border-color .2s;
}
.wz-foot input:focus{border-color:var(--accent)}
.wz-foot button{
  width:42px;height:42px;border-radius:6px;border:0;background:var(--navy);color:var(--white);
  display:grid;place-items:center;cursor:pointer;transition:background .2s;flex:none;
}
.wz-foot button:hover{background:var(--accent)}

/* ── Affiliate portal — commission table + product-picker modal ── */
.aff-table{width:100%;border-collapse:collapse;font-size:var(--fs-support)}
.aff-table th,.aff-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
.aff-table th{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.aff-table tr:last-child td{border-bottom:0}
.aff-table td b{color:var(--accent)}

.aff-modal{
  position:fixed;inset:0;z-index:250;background:rgba(10,36,99,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.aff-modal-panel{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  max-width:760px;width:100%;max-height:min(640px,88vh);overflow-y:auto;padding:clamp(24px,3vw,36px);
}
.aff-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.aff-modal-close{
  flex:none;width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--white);
  color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s;
}
.aff-modal-close:hover{background:var(--card);border-color:var(--accent)}

/* Anchor offset under sticky nav */
[id]{scroll-margin-top:96px}