/* =========================================================================
   DEAL VAULT · LANDING PAGE
   Liquid mesh palette · glass nav · cinematic hero · marketing sections
   ========================================================================= */

:root {
  --l-bg-0: #04060d;
  --l-bg-1: #080b18;
  --l-bg-2: #0d1224;

  --l-iris:      #a6b8ff;
  --l-iris-2:    #c9d3ff;
  --l-iris-3:    rgba(166,184,255,.14);
  --l-emerald:   #7fe8c8;
  --l-emerald-2: #a4f0d8;
  --l-gold:      #ffd79a;
  --l-gold-2:    #ffe5be;
  --l-rose:      #ffb7c9;

  --l-ink:   #f4f6ff;
  --l-ink-2: rgba(244,246,255,.72);
  --l-ink-3: rgba(244,246,255,.48);
  --l-ink-4: rgba(244,246,255,.28);

  --l-hair:  rgba(255,255,255,.10);
  --l-hair-2:rgba(255,255,255,.18);

  --l-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --l-mono: 'JetBrains Mono', ui-monospace, monospace;

  --l-max: 1240px;
  --l-nav-h: 72px;
}

/* ============ Page shell ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.l-page {
  background: var(--l-bg-0);
  color: var(--l-ink);
  font-family: var(--l-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ============ Glass Nav (floating over hero) ============ */
.l-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(calc(100% - 32px), 1180px);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 12px 12px 22px;
  border-radius: 999px;
  background: rgba(12,14,26,.55);
  border: 1px solid var(--l-hair);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 20px 50px rgba(0,0,0,.4);
  transition: background .3s ease, box-shadow .3s ease, top .3s ease;
}
.l-nav.scrolled {
  background: rgba(8,10,22,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 24px 60px rgba(0,0,0,.55);
}
.l-nav .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.l-nav .brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--l-iris), var(--l-emerald));
  display: grid; place-items: center;
  color: #04060d;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(166,184,255,.35);
  letter-spacing: -.03em;
}
.l-nav .brand .by {
  font-weight: 400;
  color: var(--l-ink-3);
  font-size: 12px;
  margin-left: 4px;
  letter-spacing: 0;
}
.l-nav .links {
  display: flex; align-items: center; gap: 4px;
  margin-left: 8px;
}
.l-nav .links a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--l-ink-2);
  text-decoration: none;
  letter-spacing: -.005em;
  transition: all .18s ease;
}
.l-nav .links a:hover { color: #fff; background: rgba(255,255,255,.06) }
.l-nav .spacer { flex: 1 }
.l-nav .nav-cta {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -.005em;
  transition: all .22s cubic-bezier(.16,1,.3,1);
  display: inline-flex; align-items: center; gap: 6px;
}
.l-nav .nav-cta.ghost { color: var(--l-ink-2) }
.l-nav .nav-cta.ghost:hover { color: #fff; background: rgba(255,255,255,.06) }
.l-nav .nav-cta.primary {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color: #fff;
  border: 1px solid var(--l-hair-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.l-nav .nav-cta.primary:hover { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10)); transform: translateY(-1px) }

/* ============ Hero ============ */
.l-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 120px 24px 60px;
}

/* Ambient soft orbs behind the canvas — always present, unify all 3 heroes */
.l-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 700px at 18% 20%,  rgba(166,184,255,.16), transparent 55%),
    radial-gradient(800px 600px at 82% 78%,  rgba(127,232,200,.11), transparent 55%),
    radial-gradient(600px 500px at 50% 100%, rgba(255,215,154,.06), transparent 55%);
  z-index: 1;
  pointer-events: none;
}

/* Hero canvas layer — most variants live INSIDE the hero (absolute) */
.l-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.l-hero-canvas.on { opacity: 1 }

/* Subtle vignette + top/bottom edge fade so content sits over motion cleanly */
.l-hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  background:
    radial-gradient(1400px 800px at 50% 50%, transparent 40%, rgba(4,6,13,.65) 100%),
    linear-gradient(180deg, rgba(4,6,13,.55) 0%, transparent 20%, transparent 70%, var(--l-bg-0) 100%);
  pointer-events: none;
}

/* Cyber Web is special — it spirals through the WHOLE page, not just the hero.
   When it's active, it becomes fixed to the viewport (covers everything) and
   the hero's own vignette is disabled so the mesh flows continuously below. */
#heroCyberWeb.on {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}
body.l-page.cw-active .l-hero::before,
body.l-page.cw-active .l-hero::after { display: none }
body.l-page.cw-active .l-hero { background: transparent }
body.l-page.cw-active {
  /* softer body bg so the mesh dominates */
  background:
    radial-gradient(1400px 900px at 12% -10%, rgba(166,184,255,.06), transparent 60%),
    radial-gradient(1200px 800px at 100% 110%, rgba(127,232,200,.04), transparent 60%),
    linear-gradient(180deg, var(--l-bg-0) 0%, var(--l-bg-1) 100%);
}
body.l-page.cw-active .l-section {
  /* subtle darkening under each section so content stays legible over the mesh */
  position: relative;
}
body.l-page.cw-active .l-section::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: radial-gradient(1200px 800px at 50% 50%, rgba(4,6,13,.55), transparent 75%);
  pointer-events: none;
}
body.l-page.cw-active .l-inner,
body.l-page.cw-active .l-cta-band {
  position: relative;
  z-index: 2;
}

/* Content stack over the motion */
.l-hero-body {
  position: relative;
  z-index: 10;
  max-width: 900px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.l-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: rgba(12,14,26,.55);
  border: 1px solid var(--l-hair);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--l-ink-2);
  letter-spacing: .05em;
  text-transform: uppercase;
  animation: lFadeUp .8s cubic-bezier(.16,1,.3,1) both;
}
.l-eyebrow .pip {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--l-iris), var(--l-emerald));
  color: #04060d;
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(127,232,200,.5);
}
.l-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--l-emerald);
  box-shadow: 0 0 8px currentColor;
  color: var(--l-emerald);
  animation: lPulse 2s ease-in-out infinite;
  margin-left: 2px;
}
@keyframes lPulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

.l-hero h1 {
  margin: 0;
  font-size: clamp(40px, 6.4vw, 84px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lFadeUp 1s .1s cubic-bezier(.16,1,.3,1) both;
}
.l-hero h1 .grad {
  background: linear-gradient(120deg, var(--l-iris) 0%, var(--l-emerald) 50%, var(--l-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: lShimmer 8s ease-in-out infinite;
}
@keyframes lShimmer {
  0%,100% { background-position: 0% 50% }
  50%     { background-position: 100% 50% }
}

.l-hero .lead {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--l-ink-2);
  max-width: 640px;
  text-wrap: balance;
  line-height: 1.5;
  animation: lFadeUp 1s .25s cubic-bezier(.16,1,.3,1) both;
}

.l-hero .cta-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px;
  animation: lFadeUp 1s .4s cubic-bezier(.16,1,.3,1) both;
}
.l-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -.005em;
  color: #04060d;
  background: linear-gradient(180deg, #fff 0%, #dfe4f5 100%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 #fff,
    0 12px 30px rgba(166,184,255,.35),
    0 4px 12px rgba(0,0,0,.4);
  transition: all .28s cubic-bezier(.16,1,.3,1);
}
.l-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 20px 40px rgba(166,184,255,.55),
    0 6px 16px rgba(0,0,0,.5);
}
.l-cta .arrow {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: #04060d;
  color: #fff;
  font-size: 11px;
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.l-cta:hover .arrow { transform: translateX(3px) }
.l-cta.ghost {
  background: rgba(255,255,255,.05);
  color: var(--l-ink);
  border-color: var(--l-hair-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.l-cta.ghost:hover {
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.l-hero .kbar {
  display: flex; align-items: center; gap: 22px;
  margin-top: 40px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(12,14,26,.55);
  border: 1px solid var(--l-hair);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: lFadeUp 1s .55s cubic-bezier(.16,1,.3,1) both;
}
.l-hero .kbar .kstat { display: flex; flex-direction: column; align-items: center; gap: 2px }
.l-hero .kbar .kstat .v {
  font-size: 20px; font-weight: 700; color: #fff;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.l-hero .kbar .kstat .l {
  font-size: 10.5px;
  color: var(--l-ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.l-hero .kbar .sep { width: 1px; height: 22px; background: rgba(255,255,255,.12) }

@keyframes lFadeUp {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px) }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0)   }
}

/* Scroll indicator */
.l-scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--l-ink-4);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  animation: lFadeUp 1s 1s cubic-bezier(.16,1,.3,1) both;
}
.l-scroll-hint .track {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, var(--l-hair-2), transparent);
  position: relative;
  overflow: hidden;
}
.l-scroll-hint .track::after {
  content: "";
  position: absolute;
  top: -20px; left: 0;
  width: 100%; height: 20px;
  background: linear-gradient(180deg, transparent, var(--l-iris));
  animation: lScrollHint 2.4s ease-in-out infinite;
}
@keyframes lScrollHint {
  0%   { top: -20px; opacity: 0 }
  20%  { opacity: 1 }
  80%  { opacity: 1 }
  100% { top: 40px;  opacity: 0 }
}

/* ============ Hero variation switcher (bottom-right glass control) ============ */
.l-switcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  padding: 8px;
  border-radius: 16px;
  background: rgba(12,14,26,.80);
  border: 1px solid var(--l-hair);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 210px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.l-switcher::-webkit-scrollbar { width: 6px }
.l-switcher::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px }
.l-switcher .head {
  padding: 4px 10px 6px;
  color: var(--l-ink-3);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.l-switcher .head::before {
  content: "◇";
  color: var(--l-iris);
  font-size: 10px;
}
.l-switcher button {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--l-ink-2);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: -.005em;
  text-align: left;
  transition: all .18s ease;
}
.l-switcher button:hover { background: rgba(255,255,255,.05); color: #fff }
.l-switcher button.on {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: var(--l-hair-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.l-switcher button .pip {
  width: 24px; height: 24px;
  border-radius: 7px;
  flex: 0 0 24px;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #04060d;
}
/* Reference-style electric blue variants — top of switcher */
.l-switcher button[data-v="depthmesh"] .pip { background: radial-gradient(circle at 40% 40%, #fff, #93d2ff 40%, #1e5fa8); box-shadow: 0 0 16px rgba(93,210,255,.85); color: #04102a; text-shadow: 0 0 4px rgba(255,255,255,.4) }
.l-switcher button[data-v="cyberweb"]  .pip { background: radial-gradient(circle at 40% 40%, #fff, #93d2ff 40%, #1655a0); box-shadow: 0 0 14px rgba(93,210,255,.7); color: #04102a; text-shadow: 0 0 4px rgba(255,255,255,.4) }
.l-switcher button[data-v="vortex"]    .pip { background: radial-gradient(circle at 40% 40%, #fff, #67baff 40%, #12468a); box-shadow: 0 0 14px rgba(103,186,255,.7); color: #04102a; text-shadow: 0 0 4px rgba(255,255,255,.4) }

/* Intense cyberpunk variants — muted pips (now secondary) */
.l-switcher button[data-v="hyperbloom"] .pip { background: linear-gradient(135deg, #22d3ee, #ffd79a); box-shadow: 0 0 10px rgba(34,211,238,.45); color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.5) }
.l-switcher button[data-v="storm"]      .pip { background: linear-gradient(135deg, #22d3ee, #e879f9); box-shadow: 0 0 10px rgba(34,211,238,.4); color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.5) }
.l-switcher button[data-v="synapse"]    .pip { background: linear-gradient(135deg, #7fe8c8, #22d3ee); box-shadow: 0 0 10px rgba(127,232,200,.4); color: #04060d }

/* Original softer variants — muted */
.l-switcher button[data-v="constellation"] .pip { background: linear-gradient(135deg, #a6b8ff, #c9d3ff); box-shadow: 0 0 10px rgba(166,184,255,.5); }
.l-switcher button[data-v="bloom"]         .pip { background: linear-gradient(135deg, #ffd79a, #ffb7c9); box-shadow: 0 0 10px rgba(255,215,154,.5); }
.l-switcher button[data-v="field"]         .pip { background: linear-gradient(135deg, #7fe8c8, #a4f0d8); box-shadow: 0 0 10px rgba(127,232,200,.5); }
.l-switcher button .pip.alt { opacity: .7; box-shadow: none }
.l-switcher button .name { flex: 1; font-weight: 600; font-size: 12.5px }
.l-switcher button .desc { font-size: 10.5px; color: var(--l-ink-3); font-weight: 400 }

/* Divider between primary and original variants */
.l-switcher-divider {
  height: 1px;
  margin: 4px 8px;
  background: linear-gradient(90deg, transparent, var(--l-hair-2), transparent);
}

/* ============ Section wrap ============ */
.l-section {
  position: relative;
  padding: 100px 24px;
}
.l-inner {
  max-width: var(--l-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.l-eyebrow-sm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--l-iris-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.l-eyebrow-sm::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
}
.l-section h2 {
  margin: 0 0 22px;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.028em;
  color: #fff;
  text-wrap: balance;
  max-width: 780px;
}
.l-section h2 .grad {
  background: linear-gradient(120deg, var(--l-iris), var(--l-emerald));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.l-section .lead {
  margin: 0 0 48px;
  color: var(--l-ink-2);
  font-size: clamp(15px, 1.3vw, 17px);
  max-width: 620px;
  line-height: 1.55;
}

/* reveal-on-scroll utility */
.l-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.l-reveal.in { opacity: 1; transform: translateY(0) }

/* ============ Features section ============ */
.l-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.l-feat {
  position: relative;
  padding: 32px 28px 30px;
  border-radius: 22px;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(20,22,38,.78) 0%, rgba(14,18,32,.72) 60%, rgba(20,24,42,.78) 100%);
  border: 1px solid var(--l-hair);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 20px 50px rgba(0,0,0,.35);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.l-feat::before {
  content: "";
  position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.l-feat:hover {
  transform: translateY(-3px);
  border-color: var(--l-hair-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 30px 60px rgba(166,184,255,.15);
}
.l-feat .num {
  display: inline-block;
  font-size: 11px;
  color: var(--l-iris-2);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
  font-family: var(--l-mono);
}
.l-feat h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.2;
}
.l-feat p {
  margin: 0 0 20px;
  color: var(--l-ink-2);
  font-size: 14px;
  line-height: 1.55;
  max-width: 44ch;
}
.l-feat .visual {
  position: relative;
  height: 140px;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--l-hair);
  overflow: hidden;
  display: grid; place-items: center;
}

/* feature mini-visuals — pure CSS art */
.mini-map .dot {
  position: absolute;
  border-radius: 50%;
}
.mini-map .center { top: 50%; left: 50%; transform: translate(-50%,-50%); width: 22px; height: 22px; background: radial-gradient(circle, #fff, var(--l-gold)); box-shadow: 0 0 20px var(--l-gold), 0 0 40px rgba(255,215,154,.4); z-index: 3; }
.mini-map .n1 { top: 22%; left: 30%; width: 10px; height: 10px; background: var(--l-iris); box-shadow: 0 0 12px var(--l-iris); }
.mini-map .n2 { top: 20%; right: 26%; width: 8px; height: 8px; background: var(--l-emerald); box-shadow: 0 0 10px var(--l-emerald); }
.mini-map .n3 { bottom: 24%; left: 24%; width: 8px; height: 8px; background: var(--l-emerald); box-shadow: 0 0 10px var(--l-emerald); }
.mini-map .n4 { bottom: 20%; right: 30%; width: 10px; height: 10px; background: var(--l-iris); box-shadow: 0 0 12px var(--l-iris); }
.mini-map svg { position: absolute; inset: 0; width: 100%; height: 100% }
.mini-map svg line { stroke: url(#mmg); stroke-width: 1; opacity: .55 }

.mini-ai {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px;
}
.mini-ai .bar {
  width: 4px;
  background: linear-gradient(180deg, var(--l-iris), var(--l-emerald));
  border-radius: 4px;
  animation: miniBar 1.8s ease-in-out infinite;
}
.mini-ai .bar:nth-child(1) { height: 30%; animation-delay: 0s }
.mini-ai .bar:nth-child(2) { height: 60%; animation-delay: .15s }
.mini-ai .bar:nth-child(3) { height: 85%; animation-delay: .3s; background: linear-gradient(180deg, var(--l-gold), var(--l-iris)) }
.mini-ai .bar:nth-child(4) { height: 45%; animation-delay: .45s }
.mini-ai .bar:nth-child(5) { height: 70%; animation-delay: .6s }
.mini-ai .bar:nth-child(6) { height: 90%; animation-delay: .75s; background: linear-gradient(180deg, var(--l-emerald), var(--l-gold)) }
.mini-ai .bar:nth-child(7) { height: 40%; animation-delay: .9s }
.mini-ai .bar:nth-child(8) { height: 55%; animation-delay: 1.05s }
.mini-ai .bar:nth-child(9) { height: 75%; animation-delay: 1.2s }
.mini-ai .bar:nth-child(10) { height: 35%; animation-delay: 1.35s }
@keyframes miniBar {
  0%,100% { opacity: .5; transform: scaleY(1) }
  50%     { opacity: 1; transform: scaleY(1.15) }
}

.mini-portal {
  position: relative;
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
}
.mini-portal .doc {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--l-hair);
  font-size: 11px; color: var(--l-ink-2);
  animation: miniPortal 3s ease-in-out infinite;
}
.mini-portal .doc:nth-child(2) { animation-delay: .3s }
.mini-portal .doc:nth-child(3) { animation-delay: .6s }
.mini-portal .doc .glyph {
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(166,184,255,.16);
  color: var(--l-iris-2);
  display: grid; place-items: center;
  font-size: 10px;
}
.mini-portal .doc .name { flex: 1; letter-spacing: -.005em }
.mini-portal .doc .check {
  color: var(--l-emerald);
  font-size: 12px;
}
@keyframes miniPortal {
  0%   { transform: translateX(-8px); opacity: 0 }
  20%  { opacity: 1 }
  100% { transform: translateX(0); opacity: 1 }
}

.mini-cap {
  padding: 20px;
  width: 100%;
  display: flex; align-items: end; gap: 6px;
  height: 100%;
}
.mini-cap .col {
  flex: 1;
  display: flex; flex-direction: column-reverse;
  gap: 2px;
}
.mini-cap .col span {
  border-radius: 3px;
}
.mini-cap .col:nth-child(1) span:nth-child(1) { height: 44px; background: var(--l-iris) }
.mini-cap .col:nth-child(1) span:nth-child(2) { height: 18px; background: var(--l-emerald) }
.mini-cap .col:nth-child(1) span:nth-child(3) { height: 8px;  background: var(--l-gold) }
.mini-cap .col:nth-child(2) span:nth-child(1) { height: 34px; background: var(--l-iris) }
.mini-cap .col:nth-child(2) span:nth-child(2) { height: 26px; background: var(--l-emerald) }
.mini-cap .col:nth-child(2) span:nth-child(3) { height: 10px; background: var(--l-gold) }
.mini-cap .col:nth-child(3) span:nth-child(1) { height: 52px; background: var(--l-iris) }
.mini-cap .col:nth-child(3) span:nth-child(2) { height: 22px; background: var(--l-emerald) }
.mini-cap .col:nth-child(3) span:nth-child(3) { height: 6px;  background: var(--l-gold) }
.mini-cap .col:nth-child(4) span:nth-child(1) { height: 38px; background: var(--l-iris) }
.mini-cap .col:nth-child(4) span:nth-child(2) { height: 30px; background: var(--l-emerald) }
.mini-cap .col:nth-child(4) span:nth-child(3) { height: 14px; background: var(--l-gold) }
.mini-cap .col:nth-child(5) span:nth-child(1) { height: 48px; background: var(--l-iris) }
.mini-cap .col:nth-child(5) span:nth-child(2) { height: 20px; background: var(--l-emerald) }
.mini-cap .col:nth-child(5) span:nth-child(3) { height: 12px; background: var(--l-gold) }

/* ============ How it works ============ */
.l-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
}
.l-step {
  position: relative;
  padding: 32px 26px 30px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(20,22,38,.55) 0%, rgba(14,18,32,.35) 100%);
  border: 1px solid var(--l-hair);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  min-height: 220px;
}
.l-step .num {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--l-iris), var(--l-emerald));
  color: #04060d;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(166,184,255,.35);
}
.l-step h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}
.l-step p {
  margin: 0;
  color: var(--l-ink-2);
  font-size: 14px;
  line-height: 1.55;
}

/* connecting arrows between steps (desktop) */
.l-step + .l-step::before {
  content: "→";
  position: absolute;
  top: 44px; left: -18px;
  color: var(--l-ink-4);
  font-size: 16px;
}

/* ============ Numbers strip ============ */
.l-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 40px 0;
  border-top: 1px solid var(--l-hair);
  border-bottom: 1px solid var(--l-hair);
  margin: 40px 0 0;
}
.l-num {
  padding: 0 22px;
  border-right: 1px solid var(--l-hair);
  text-align: center;
}
.l-num:last-child { border-right: 0 }
.l-num .v {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -.028em;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.l-num .l {
  font-size: 11px;
  color: var(--l-ink-3);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============ CTA band ============ */
.l-cta-band {
  position: relative;
  margin: 40px auto;
  max-width: 1100px;
  padding: 70px 40px;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(600px 400px at 20% 0%,  rgba(166,184,255,.22), transparent 60%),
    radial-gradient(500px 400px at 100% 100%, rgba(127,232,200,.15), transparent 60%),
    linear-gradient(180deg, rgba(20,22,38,.85), rgba(14,18,32,.85));
  border: 1px solid var(--l-hair-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 40px 90px rgba(166,184,255,.10),
    0 20px 50px rgba(0,0,0,.5);
  text-align: center;
}
.l-cta-band::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1.5px 1.5px at 80% 30%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1.5px 1.5px at 90% 75%, rgba(255,255,255,.3), transparent 55%);
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events: none;
}
.l-cta-band > * { position: relative; z-index: 1 }
.l-cta-band h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.6vw, 44px);
  color: #fff;
  letter-spacing: -.028em;
  line-height: 1.1;
  text-wrap: balance;
}
.l-cta-band p {
  margin: 0 0 30px;
  color: var(--l-ink-2);
  font-size: 15.5px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.l-cta-band .cta-row {
  display: inline-flex;
  gap: 12px;
  justify-content: center;
}

/* ============ Footer ============ */
.l-footer {
  position: relative;
  padding: 60px 24px 30px;
  border-top: 1px solid var(--l-hair);
}
.l-foot-grid {
  max-width: var(--l-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.l-foot-brand {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 300px;
}
.l-foot-brand .brand-line {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: -.015em;
}
.l-foot-brand p {
  margin: 0;
  font-size: 13px;
  color: var(--l-ink-3);
  line-height: 1.5;
}
.l-foot-col h4 {
  margin: 0 0 12px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--l-ink-3);
  font-weight: 600;
}
.l-foot-col a {
  display: block;
  padding: 5px 0;
  color: var(--l-ink-2);
  font-size: 13px;
  text-decoration: none;
  letter-spacing: -.005em;
  transition: color .15s ease;
}
.l-foot-col a:hover { color: #fff }
.l-foot-legal {
  max-width: var(--l-max);
  margin: 0 auto;
  padding-top: 22px;
  border-top: 1px solid var(--l-hair);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px;
  color: var(--l-ink-4);
  letter-spacing: -.005em;
}
.l-foot-legal .row { display: flex; gap: 16px }
.l-foot-legal a { color: inherit; text-decoration: none; transition: color .15s ease }
.l-foot-legal a:hover { color: var(--l-ink-2) }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .l-nav .links { display: none }
  .l-hero .kbar { flex-wrap: wrap; gap: 14px; padding: 12px 16px }
  .l-hero .kbar .sep { display: none }
  .l-features { grid-template-columns: 1fr }
  .l-steps { grid-template-columns: 1fr }
  .l-step + .l-step::before { display: none }
  .l-numbers { grid-template-columns: repeat(2, 1fr); gap: 20px 0 }
  .l-num:nth-child(2) { border-right: 0 }
  .l-foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px }
  .l-foot-legal { flex-direction: column; gap: 10px; text-align: center }
}
@media (max-width: 600px) {
  .l-nav { padding: 10px 10px 10px 16px; top: 12px; width: calc(100% - 24px) }
  .l-nav .brand .by { display: none }
  .l-nav .nav-cta.ghost { display: none }
  .l-hero { padding: 100px 20px 40px; min-height: 90vh }
  .l-section { padding: 70px 20px }
  .l-switcher { min-width: 0; right: 12px; bottom: 12px; padding: 6px }
  .l-switcher .head { display: none }
  .l-switcher button .desc { display: none }
  .l-cta-band { padding: 50px 24px; margin: 20px auto }
  .l-numbers { grid-template-columns: 1fr; padding: 24px 0 }
  .l-num { border-right: 0; border-bottom: 1px solid var(--l-hair); padding: 14px 0 }
  .l-num:last-child { border-bottom: 0 }
}