/* ============================================================
   KELPARO — AI Sales & Marketing Automation
   Design system: dark futuristic / glass / kinetic type
   ============================================================ */

:root {
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --violet: #7c5cff;
  --magenta: #ff4fa3;
  --grad: linear-gradient(110deg, #7c5cff, #18c8b8);
  --grad-warm: linear-gradient(110deg, #ff4fa3, #ffb84f);

  /* ===== LIGHT THEME (default) ===== */
  --bg: #f6f6fa;
  --bg-2: #ffffff;
  --bg-3: #ededf4;
  --surface: rgba(18, 18, 40, 0.035);
  --surface-2: rgba(18, 18, 40, 0.07);
  --border: rgba(18, 18, 40, 0.10);
  --border-bright: rgba(18, 18, 40, 0.22);
  --text: #12121c;
  --text-dim: #50505f;
  --text-faint: #8b8b9c;
  --cyan: #0aa396;
  --lime: #65a30d;
  --lime-bright: #c6f53d;
  --nav-bg: rgba(255, 255, 255, 0.6);
  --nav-bg-solid: rgba(255, 255, 255, 0.85);
  --menu-bg: rgba(246, 246, 250, 0.97);
  --grid-line: rgba(18, 18, 40, 0.05);
  --noise-op: 0.03;
  --orb-op: 0.32;
  --shadow-deep: 0 30px 80px rgba(30, 30, 70, 0.14);
  --wordmark-top: rgba(18, 18, 40, 0.16);
  --wordmark-bot: rgba(18, 18, 40, 0.02);
  --stroke-text: rgba(18, 18, 40, 0.32);
}

html[data-theme="dark"] {
  --bg: #050507;
  --bg-2: #0a0a12;
  --bg-3: #10101c;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-bright: rgba(255, 255, 255, 0.18);
  --text: #f2f2f6;
  --text-dim: #9b9ba8;
  --text-faint: #5c5c6b;
  --cyan: #2ee6d6;
  --lime: #d4ff4f;
  --lime-bright: #d4ff4f;
  --nav-bg: rgba(10, 10, 18, 0.55);
  --nav-bg-solid: rgba(10, 10, 18, 0.8);
  --menu-bg: rgba(5, 5, 7, 0.96);
  --grid-line: rgba(255, 255, 255, 0.025);
  --noise-op: 0.05;
  --orb-op: 0.5;
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.5);
  --wordmark-top: rgba(255, 255, 255, 0.14);
  --wordmark-bot: rgba(255, 255, 255, 0.015);
  --stroke-text: rgba(255, 255, 255, 0.28);
  --grad: linear-gradient(110deg, #7c5cff, #2ee6d6);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

::selection { background: var(--violet); color: #fff; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
img, canvas, svg { display: block; max-width: 100%; }

/* ---------- noise + grid overlays ---------- */
.noise {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: var(--noise-op); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 75%);
}

/* ---------- ambient orbs ---------- */
.orb {
  position: absolute; border-radius: 50%; filter: blur(90px);
  opacity: var(--orb-op); pointer-events: none; z-index: 0;
  animation: orbFloat 14s ease-in-out infinite alternate;
}
.orb--violet { background: radial-gradient(circle, rgba(124,92,255,0.55), transparent 65%); }
.orb--cyan { background: radial-gradient(circle, rgba(46,230,214,0.4), transparent 65%); animation-delay: -5s; }
.orb--magenta { background: radial-gradient(circle, rgba(255,79,163,0.35), transparent 65%); animation-delay: -9s; }

@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -40px) scale(1.15); }
  100% { transform: translate(-40px, 30px) scale(0.95); }
}

/* ---------- preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 24px;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__logo {
  font-family: var(--font-display); font-size: clamp(32px, 7vw, 72px);
  font-weight: 700; letter-spacing: -0.04em;
  color: var(--text);
  animation: logoPulse 1.2s ease-in-out infinite alternate;
}
@keyframes logoPulse { from { opacity: 0.5; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.preloader__bar {
  width: 180px; height: 2px; background: var(--surface-2);
  border-radius: 2px; overflow: hidden;
}
.preloader__bar i {
  display: block; height: 100%; width: 0;
  background: var(--grad);
  animation: loadBar 1s var(--ease-out) forwards;
}
@keyframes loadBar { to { width: 100%; } }

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--grad); z-index: 9500;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: min(1240px, calc(100% - 32px));
  z-index: 8000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--nav-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: box-shadow 0.4s, background 0.4s;
}
.nav.is-scrolled { background: var(--nav-bg-solid); box-shadow: var(--shadow-deep); }
.nav__logo {
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px;
}
/* The mark is a disc with the K knocked out of it, drawn as one evenodd
   path so it fills with currentColor and inverts with the theme for free -
   a dark K on a light disc, or the reverse, without shipping two files. */
.nav__mark { width: 26px; height: 26px; flex: none; fill: currentColor; display: block; }
.footer__grid .nav__logo .nav__mark { width: 24px; height: 24px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.nav__links { display: flex; gap: 4px; }
.nav__links a {
  padding: 8px 14px; font-size: 14px; color: var(--text-dim);
  border-radius: 10px; transition: color 0.25s, background 0.25s;
  position: relative;
}
.nav__links a:hover { color: var(--text); background: var(--surface); }
.nav__links a.is-active { color: var(--text); }
.nav__links a.is-active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--grad);
}
.nav__cta { display: flex; align-items: center; gap: 12px; }

.nav__burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 8px;
}
.nav__burger span {
  width: 22px; height: 2px; background: var(--text);
  border-radius: 2px; transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 7900;
  background: var(--menu-bg); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px; gap: 8px;
  opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display); font-size: clamp(32px, 8vw, 52px);
  font-weight: 600; letter-spacing: -0.03em; color: var(--text-dim);
  padding: 6px 0; transition: color 0.25s, transform 0.3s var(--ease-out);
}
.mobile-menu a:hover, .mobile-menu a.is-active { color: var(--text); transform: translateX(12px); }

@media (max-width: 900px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__burger { display: flex; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: 0.01em; border: 1px solid transparent;
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s, border-color 0.3s;
  will-change: transform;
}
.btn--primary {
  background: var(--grad); color: #06060a;
  box-shadow: 0 0 0 rgba(124,92,255,0);
}
.btn--primary:hover { box-shadow: 0 8px 40px rgba(124,92,255,0.45); transform: translateY(-2px); }
.btn--ghost {
  background: var(--surface); color: var(--text);
  border-color: var(--border);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--border-bright); background: var(--surface-2); transform: translateY(-2px); }
.btn--lime { background: var(--lime-bright); color: #131305; }
.btn--lime:hover { box-shadow: 0 8px 40px color-mix(in srgb, var(--lime-bright) 40%, transparent); transform: translateY(-2px); }
.btn--sm { padding: 10px 18px; font-size: 13px; border-radius: 11px; }
.btn--lg { padding: 18px 36px; font-size: 17px; border-radius: 16px; }
.btn .arr { transition: transform 0.3s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim);
  padding: 7px 16px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--surface);
}
.eyebrow i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan); display: inline-block;
}

.h-display {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6.4vw, 90px);
  line-height: 1.0; letter-spacing: -0.04em;
}
.h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.lead { font-size: clamp(16px, 1.6vw, 20px); color: var(--text-dim); line-height: 1.65; }

.grad-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* .kinetic splits headlines into .word > span, and that inner span carries a
   transform, so it paints in its own context. A background clipped to text on
   the ancestor cannot reach those glyphs, which left every gradient headline
   inside a kinetic heading transparent on transparent — invisible, but still
   occupying its full line box. Paint the gradient on the element that actually
   draws the glyphs. */
.grad-text .word > span {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* A clipped background only paints inside the box, and an inline-block box
     is only line-height tall: the tails of g, y, p, j and the tops of A, T and
     accents fell outside it and rendered transparent, so letters looked cut.
     Grow the painted box past the glyphs and pull the same amount back out of
     layout, so nothing moves. */
  padding: 0.12em 0.06em 0.24em;
  margin: -0.12em -0.06em -0.24em;
}
/* Gradient text outside a kinetic heading gets the same room. */
.grad-text { padding-bottom: 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lime-text { color: var(--lime); }
.outline-text {
  -webkit-text-stroke: 1.5px var(--stroke-text);
  -webkit-text-fill-color: transparent; color: transparent;
}

/* word-reveal animation (kinetic type) */
.kinetic .word {
  display: inline-block; vertical-align: bottom;
  /* overflow:hidden masks the slide-up reveal, but the box is only as tall as
     the line-height, so it was shearing the descenders off g, y, p, j and q.
     Pad the clip box downward and pull the same amount back out of layout, so
     the tails fit without moving anything on the page. Ems keep it correct at
     every clamp() size. */
  overflow: hidden;
  /* Room above too, so the clip box doesn't shave the tops of capitals. */
  padding: 0.12em 0.06em 0.24em;
  margin: -0.12em -0.06em -0.24em;
}
.kinetic .word > span {
  display: inline-block;
  /* Must clear the taller clip box, otherwise the tallest words peek out
     along the bottom edge before the reveal fires. */
  transform: translateY(135%);
  transition: transform 0.9s var(--ease-out);
}
.kinetic.is-inview .word > span { transform: translateY(0); }

/* ---------- layout ---------- */
.container { width: min(1320px, calc(100% - 48px)); margin: 0 auto; position: relative; z-index: 1; }
.section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.section--tight { padding: clamp(50px, 7vw, 90px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head .h2 { margin-bottom: 18px; }

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(44px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.is-inview { opacity: 1; transform: none; }
.reveal--left { transform: translateX(-50px); }
.reveal--right { transform: translateX(50px); }
.reveal--scale { transform: scale(0.92); }
.reveal--left.is-inview, .reveal--right.is-inview, .reveal--scale.is-inview { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- glass card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  position: relative; overflow: hidden;
  backdrop-filter: blur(12px);
  transition: transform 0.45s var(--ease-out), border-color 0.45s, background 0.45s;
}
.card:hover { border-color: var(--border-bright); background: var(--surface-2); transform: translateY(-6px); }
.card__glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124,92,255,0.14), transparent 60%);
  transition: opacity 0.4s;
}
.card:hover .card__glow { opacity: 1; }
.card__num {
  font-family: var(--font-mono); font-size: 13px; color: var(--text-faint);
  letter-spacing: 0.15em;
}
.card .h3 { margin: 14px 0 10px; }
.card p { color: var(--text-dim); font-size: 15px; }

/* tilt */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* ---------- bento ---------- */
.bento {
  display: grid; gap: 18px;
  grid-template-columns: repeat(12, 1fr);
}
.bento > * { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }
.bento .span-8 { grid-column: span 8; }
.bento .span-12 { grid-column: span 12; }
@media (max-width: 980px) {
  .bento > *, .bento .span-6, .bento .span-8 { grid-column: span 12; }
}

/* ---------- product frame (screenshots + video) ----------
   A screenshot on its own reads as a mockup. The same image inside
   browser chrome reads as software, so every captured surface on the
   site goes through .frame. Works identically for <img> and <video>. */
.frame {
  position: relative; border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-2); box-shadow: var(--shadow-deep);
  overflow: hidden; margin: 0;
}
.frame__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px; height: 36px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.frame__bar > i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-faint); opacity: 0.4; flex: none;
}
.frame__url {
  flex: 1; margin-left: 8px; min-width: 0;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Provenance, stated plainly. Sample data is not a disclaimer to hide -
   it is a claim about honesty, so it gets a real label, not an asterisk. */
.frame__badge {
  flex: none; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px;
}
.frame__badge--live { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
/* width/height attributes on the media reserve the box, so a lazily
   loaded shot never shifts the layout under someone mid-read. */
.frame__media { display: block; width: 100%; height: auto; background: var(--bg-3); }
.frame__cap {
  padding: 12px 15px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-dim); border-top: 1px solid var(--border);
}
.frame__cap b { color: var(--text); font-weight: 600; }

/* Vertical capture (phone reels) - cap the height so a 9:16 asset cannot
   run away with the section. */
.frame--tall { max-width: 300px; }
.frame--tall .frame__media { aspect-ratio: 9 / 16; object-fit: cover; }

/* ---------- proof wall ----------
   Volume is the argument here: many real surfaces, lightly captioned.
   Grid rather than a marquee so nothing scrolls away before it is read. */
.wall {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.wall .frame__media { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
@media (max-width: 640px) {
  .wall { grid-template-columns: 1fr; }
  .frame__url { font-size: 10.5px; }
}

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 22px 0; position: relative; background: var(--surface);
}
.marquee__track {
  display: inline-flex; gap: 56px; padding-right: 56px;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--font-display); font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 600; letter-spacing: -0.01em; color: var(--text-faint);
  display: inline-flex; align-items: center; gap: 56px;
}
.marquee__track span::after { content: '✦'; color: var(--lime); font-size: 0.7em; }
.marquee--fast .marquee__track { animation-duration: 18s; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: 30px 26px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface);
  backdrop-filter: blur(10px);
}
.stat__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.5vw, 58px); letter-spacing: -0.03em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat__label { margin-top: 10px; font-size: 14px; color: var(--text-dim); }

/* ---------- hero shared ---------- */
.hero {
  min-height: 100svh; display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 140px 0 80px;
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; }
.hero .container { z-index: 2; }
.hero__scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-faint); z-index: 2;
}
.hero__scroll-hint i {
  width: 1px; height: 44px; background: linear-gradient(var(--lime), transparent);
  display: block; animation: scrollHint 1.8s var(--ease-out) infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- page hero (inner pages) ---------- */
.page-hero { padding: 190px 0 70px; position: relative; overflow: hidden; }
.page-hero .eyebrow { margin-bottom: 26px; }
.page-hero .lead { max-width: 640px; margin-top: 24px; }

/* ---------- ticker chip row ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 8px 16px; border-radius: 100px; font-size: 13px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-family: var(--font-mono);
  transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease-spring);
}
.chip:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 32px; padding: clamp(60px, 9vw, 110px) 32px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(124,92,255,0.28), transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% -10%, rgba(46,230,214,0.16), transparent 60%),
    var(--bg-2);
}
.cta-band .h2 { margin: 20px 0 16px; }
.cta-band .lead { max-width: 560px; margin: 0 auto 36px; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(124,92,255,0.05));
  padding: 70px 0 36px; position: relative; z-index: 1;
}
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  margin-bottom: 56px;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand p { color: var(--text-dim); font-size: 14px; max-width: 280px; margin-top: 14px; }
.footer h5 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px;
}
.footer li { margin-bottom: 10px; }
.footer li a { color: var(--text-dim); font-size: 14px; transition: color 0.25s, padding-left 0.25s; }
.footer li a:hover { color: var(--lime); padding-left: 6px; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-top: 28px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-faint); font-family: var(--font-mono);
}
.footer__wordmark {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 13vw, 185px); line-height: 0.95; letter-spacing: -0.045em;
  text-align: center; margin: 30px 0 50px;
  background: linear-gradient(180deg, var(--wordmark-top), var(--wordmark-bot));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; user-select: none;
}

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-faint);
}
.field input, .field textarea, .field select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 18px; color: var(--text);
  font-family: var(--font-body); font-size: 15px; outline: none;
  transition: border-color 0.3s, box-shadow 0.3s; resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124,92,255,0.15);
}

/* ---------- table-style rows ---------- */
.rows { border-top: 1px solid var(--border); }
.row-item {
  display: grid; grid-template-columns: 80px 1.2fr 2fr auto;
  gap: 24px; align-items: center;
  padding: 34px 10px; border-bottom: 1px solid var(--border);
  transition: background 0.3s, padding-left 0.3s var(--ease-out);
  position: relative;
}
.row-item:hover { background: var(--surface); padding-left: 24px; }
.row-item__idx { font-family: var(--font-mono); color: var(--text-faint); font-size: 13px; }
.row-item__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2.2vw, 26px); letter-spacing: -0.02em; }
.row-item__desc { color: var(--text-dim); font-size: 14.5px; }
.row-item__arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-dim);
  transition: background 0.3s, color 0.3s, transform 0.4s var(--ease-spring);
}
.row-item:hover .row-item__arrow { background: var(--lime); color: #131305; transform: rotate(-45deg); }
@media (max-width: 760px) {
  .row-item { grid-template-columns: 1fr auto; }
  .row-item__idx, .row-item__desc { display: none; }
}

/* ---------- misc helpers ---------- */
.text-center { text-align: center; }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
.mb-2 { margin-bottom: 24px; }
.flex { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.divider-glow {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,0.6), rgba(46,230,214,0.6), transparent);
}

/* badge pulse */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
  position: relative; display: inline-block;
}
.live-dot::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--lime); animation: ping 1.6s var(--ease-out) infinite;
}

/* ---------- theme toggle ---------- */
.theme-toggle {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; position: relative;
  transition: border-color 0.3s, transform 0.3s var(--ease-spring), background 0.3s;
  flex-shrink: 0; overflow: hidden;
}
.theme-toggle:hover { border-color: var(--border-bright); transform: translateY(-2px); background: var(--surface-2); }
.theme-toggle svg {
  width: 19px; height: 19px; stroke: var(--text); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  position: absolute; transition: transform 0.45s var(--ease-spring), opacity 0.3s;
}
.theme-toggle .icon-sun { transform: translateY(0) rotate(0); opacity: 1; }
.theme-toggle .icon-moon { transform: translateY(26px) rotate(-90deg); opacity: 0; }
html[data-theme="dark"] .theme-toggle .icon-sun { transform: translateY(-26px) rotate(90deg); opacity: 0; }
html[data-theme="dark"] .theme-toggle .icon-moon { transform: translateY(0) rotate(0); opacity: 1; }

/* light-mode contrast helpers for dark "screen" components */
html:not([data-theme="dark"]) .cta-band {
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(124,92,255,0.16), transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% -10%, rgba(10,163,150,0.10), transparent 60%),
    var(--bg-2);
}
@keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }