/* ============================================================
   ELENCO — GLOW+ (definitive)
   Dark obsidiana premium, glow emerald vivo, spotlight do mouse,
   tilt 3D, beams, scroll reveals, magnetic, gradient borders.
   JS + CSS puro. Zero CDN. System font stack premium.
   ============================================================ */

:root {
  /* theme-independent tokens */
  --em: #3fe39a;
  --em-deep: #12a866;
  --em-dim: #1c8c5e;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  --maxw: 1200px;
  --radius: 18px;
  --radius-lg: 26px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* mouse pos (set by JS) */
  --mx: 50vw;
  --my: 50vh;
}

/* ============ DARK THEME (default) ============ */
:root,
[data-theme="dark"] {
  --bg-0: #06080a;
  --bg-1: #090c0f;
  --bg-2: #0d1115;
  --bg-3: #11161b;

  --line: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.1);
  --line-glow: rgba(63,227,154,0.24);

  --ink: #eef4f1;
  --ink-soft: #b4c1bc;
  --ink-mute: #79877f;
  --ink-faint: #515d56;

  --em-glow: rgba(63,227,154,0.34);
  --em-glow-soft: rgba(63,227,154,0.12);
  --em-on: #04130c;            /* text/ink that sits on emerald fills */

  /* surface overlays (were hardcoded white/black alphas) */
  --surf-1: rgba(255,255,255,0.022);   /* faintest raised tint */
  --surf-2: rgba(255,255,255,0.03);
  --surf-3: rgba(255,255,255,0.06);
  --surf-hi: rgba(255,255,255,0.08);
  --surf-inset: rgba(255,255,255,0.05);  /* top inset highlight */
  --surf-inset-strong: rgba(255,255,255,0.07);
  --hairline: rgba(255,255,255,0.012);

  /* glass panel gradients */
  --glass-a: rgba(18,24,29,0.86);
  --glass-b: rgba(9,13,16,0.93);
  --glass-soft-a: rgba(18,24,29,0.7);
  --glass-soft-b: rgba(9,13,16,0.82);
  --glass-feat-a: rgba(16,21,26,0.7);
  --glass-feat-b: rgba(8,11,14,0.85);
  --glass-shot-a: rgba(18,24,29,0.6);
  --glass-shot-b: rgba(8,11,14,0.8);

  --card-grad-a: rgba(255,255,255,0.022);
  --card-grad-b: rgba(255,255,255,0.006);

  --nav-bg: rgba(9,12,15,0.62);
  --nav-bg-scrolled: rgba(7,10,12,0.86);

  /* shadows */
  --shadow-deep: rgba(0,0,0,0.85);
  --shadow-deeper: rgba(0,0,0,0.9);
  --shadow-soft: rgba(0,0,0,0.7);
  --shadow-card: rgba(0,0,0,0.8);

  --input-bg: rgba(0,0,0,0.3);

  --beta-grad-a: rgba(18,30,25,0.9);
  --beta-grad-b: rgba(8,11,14,0.95);

  /* effect intensities */
  --aurora-opacity: 0.5;
  --aurora-blend: screen;
  --beam-opacity: 0.9;
  --grid-line: rgba(255,255,255,0.022);
  --grain-opacity: 0.035;
  --spot-strength: rgba(63,227,154,0.07);
  --selection-bg: var(--em-glow);
  --selection-ink: #04130c;
  --shot-img-bg: #0c1014;
}

/* ============ LIGHT THEME ============ */
[data-theme="light"] {
  --bg-0: #f4f7f5;
  --bg-1: #eef2ef;
  --bg-2: #e8ede9;
  --bg-3: #e1e8e3;

  --line: rgba(8,28,20,0.10);
  --line-2: rgba(8,28,20,0.16);
  --line-glow: rgba(16,140,90,0.40);

  --ink: #0c1a14;
  --ink-soft: #36473f;
  --ink-mute: #5a6b62;
  --ink-faint: #84938b;

  /* emerald drives shadows/gradients here, not glow */
  --em-glow: rgba(16,140,90,0.22);
  --em-glow-soft: rgba(16,140,90,0.10);
  --em-on: #ffffff;            /* white sits cleanly on the deep emerald button */

  /* surface overlays become subtle dark tints (no white-on-white) */
  --surf-1: rgba(8,28,20,0.025);
  --surf-2: rgba(8,28,20,0.04);
  --surf-3: rgba(8,28,20,0.055);
  --surf-hi: rgba(8,28,20,0.07);
  --surf-inset: rgba(255,255,255,0.7);     /* light top highlight still reads */
  --surf-inset-strong: rgba(255,255,255,0.85);
  --hairline: rgba(8,28,20,0.02);

  /* glass panels: bright frosted, not dark glass */
  --glass-a: rgba(255,255,255,0.86);
  --glass-b: rgba(244,248,245,0.92);
  --glass-soft-a: rgba(255,255,255,0.78);
  --glass-soft-b: rgba(240,245,242,0.86);
  --glass-feat-a: rgba(255,255,255,0.74);
  --glass-feat-b: rgba(238,243,240,0.85);
  --glass-shot-a: rgba(255,255,255,0.7);
  --glass-shot-b: rgba(238,243,240,0.82);

  --card-grad-a: rgba(255,255,255,0.85);
  --card-grad-b: rgba(255,255,255,0.4);

  --nav-bg: rgba(248,251,249,0.7);
  --nav-bg-scrolled: rgba(248,251,249,0.9);

  /* soft, diffuse shadows instead of near-black */
  --shadow-deep: rgba(20,50,38,0.16);
  --shadow-deeper: rgba(20,50,38,0.2);
  --shadow-soft: rgba(20,50,38,0.12);
  --shadow-card: rgba(20,50,38,0.16);

  --input-bg: rgba(255,255,255,0.7);

  --beta-grad-a: rgba(232,245,239,0.92);
  --beta-grad-b: rgba(255,255,255,0.95);

  /* effects toned WAY down for white bg: glow -> gentle wash */
  --aurora-opacity: 0.32;
  --aurora-blend: multiply;
  --beam-opacity: 0.28;
  --grid-line: rgba(8,28,20,0.04);
  --grain-opacity: 0.02;
  --spot-strength: rgba(16,140,90,0.05);
  --selection-bg: rgba(16,140,90,0.22);
  --selection-ink: #04130c;
  --shot-img-bg: #eef2ef;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg-0); overflow-x: hidden; }
body {
  font-family: var(--sans);
  background: var(--bg-0);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
  overflow-x: hidden;
  transition: background 0.45s var(--ease), color 0.45s var(--ease);
}
::selection { background: var(--selection-bg); color: var(--selection-ink); }

/* Smooth, cheap theme cross-fade on color-bearing surfaces */
.nav-inner, .btn, .dispatch, .pub-panels, .pub-tab, .feat-visual,
.step, .agent, .bcard, .beta, .faq-item, .shot-frame, .clone-card,
.collab-line, .pp-ex, .tone-chip, .eyebrow, .waitform input, .theme-toggle {
  transition-property: background, background-color, border-color, color, box-shadow, transform;
  transition-duration: 0.4s;
  transition-timing-function: var(--ease);
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: grid; place-items: center; position: relative;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line-2);
  background: var(--surf-2);
  color: var(--ink-soft);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-glow); background: var(--surf-3); transform: translateY(-1px); }
.theme-toggle:active { transform: translateY(0) scale(0.94); }
.theme-toggle:focus-visible { outline: 2px solid var(--em); outline-offset: 2px; }
.theme-toggle svg { position: absolute; transition: opacity 0.35s var(--ease), transform 0.45s var(--ease); }
/* dark theme shows the sun (offer to go light); light shows the moon */
[data-theme="dark"] .theme-toggle .ic-moon,
[data-theme="light"] .theme-toggle .ic-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
[data-theme="dark"] .theme-toggle .ic-sun,
[data-theme="light"] .theme-toggle .ic-moon { opacity: 1; transform: rotate(0) scale(1); }

/* ---------- Background world ---------- */
.bg-world {
  position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1300px 760px at 80% -10%, var(--em-glow-soft), transparent 60%),
    radial-gradient(1000px 640px at 6% 14%, var(--em-glow-soft), transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 42%, var(--bg-0) 100%);
}
.aurora { position: absolute; border-radius: 50%; filter: blur(96px); opacity: var(--aurora-opacity); mix-blend-mode: var(--aurora-blend); will-change: transform; }
.aurora.a1 { width: 640px; height: 640px; top: -190px; right: -130px; background: radial-gradient(circle, rgba(63,227,154,0.5), transparent 70%); animation: drift1 26s var(--ease) infinite alternate; }
.aurora.a2 { width: 540px; height: 540px; bottom: -170px; left: -130px; background: radial-gradient(circle, rgba(20,140,96,0.45), transparent 70%); animation: drift2 32s var(--ease) infinite alternate; }
.aurora.a3 { width: 400px; height: 400px; top: 40%; left: 48%; background: radial-gradient(circle, rgba(70,200,160,0.26), transparent 70%); animation: drift3 38s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform: translate(-96px, 116px) scale(1.16); } }
@keyframes drift2 { to { transform: translate(126px, -84px) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-136px, -64px) scale(0.9); } }

/* vertical light beams (aceternity-style) */
.beams { position: absolute; inset: 0; }
.beams span {
  position: absolute; top: -30%; left: var(--x); width: 1px; height: 60%;
  background: linear-gradient(180deg, transparent, var(--em), transparent);
  filter: blur(0.4px); opacity: 0; transform: translateY(0);
  animation: beamFall var(--dur,8s) linear var(--d,0s) infinite;
}
@keyframes beamFall {
  0% { opacity: 0; transform: translateY(-10%); }
  10% { opacity: var(--beam-opacity); }
  90% { opacity: var(--beam-opacity); }
  100% { opacity: 0; transform: translateY(220%); }
}

.bg-grid {
  position: fixed; inset: -2px; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 72%);
}

/* global spotlight following the mouse */
.spotlight {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(440px circle at var(--mx) var(--my), var(--spot-strength), transparent 60%);
  transition: opacity 0.4s;
}

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

/* scroll progress rail */
.scroll-rail { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; background: transparent; }
.scroll-rail i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--em-deep), var(--em)); box-shadow: 0 0 12px var(--em-glow); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--em); padding: 6px 13px; border: 1px solid var(--line-glow); border-radius: 100px;
  background: var(--em-glow-soft); backdrop-filter: blur(8px);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--em); box-shadow: 0 0 8px var(--em); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 680; letter-spacing: -0.032em; line-height: 1.06; margin: 18px 0 16px; }
.sec-head p { font-size: 17px; color: var(--ink-soft); line-height: 1.62; max-width: 58ch; }
.sec-head.center p { margin-left: auto; margin-right: auto; }

.grad-ink { background: linear-gradient(110deg, var(--ink) 24%, var(--em) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 580; letter-spacing: -0.01em;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); white-space: nowrap;
}
.btn span { position: relative; z-index: 1; }
.btn.btn-lg { padding: 15px 26px; font-size: 15px; }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary {
  background: linear-gradient(180deg, var(--em) 0%, var(--em-deep) 100%); color: var(--em-on);
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 8px 26px -8px var(--em-glow);
  overflow: hidden;
}
[data-theme="light"] .btn-primary {
  background: linear-gradient(180deg, var(--em-deep) 0%, var(--em-dim) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.32) inset, 0 8px 22px -8px rgba(16,140,90,0.5);
}
.btn-primary::before { /* shimmer sweep on hover */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.32) inset, 0 14px 40px -10px var(--em-glow); }
.btn-primary:hover::before { transform: translateX(120%); }
.btn-ghost { background: var(--surf-2); border-color: var(--line-2); color: var(--ink); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: var(--surf-3); border-color: var(--line-glow); transform: translateY(-2px); }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; width: calc(100% - 32px); max-width: var(--maxw); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 var(--surf-inset) inset, 0 12px 40px -16px var(--shadow-soft);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), padding 0.3s var(--ease);
}
.nav.scrolled .nav-inner { background: var(--nav-bg-scrolled); border-color: var(--line-2); padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .logo { width: 32px; height: 32px; flex-shrink: 0; transition: transform 0.4s var(--ease); }
.brand:hover .logo { transform: rotate(-6deg) scale(1.05); }
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand .name { font-weight: 660; font-size: 16.5px; letter-spacing: -0.02em; color: var(--ink); }
.brand .tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { position: relative; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none; padding: 8px 13px; border-radius: 9px; transition: color 0.2s, background 0.2s; }
.nav-links a:hover { color: var(--ink); background: var(--surf-3); }
.nav-cta { display: flex; align-items: center; gap: 10px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: center; padding: 154px 0 96px; }
.hero-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(180deg, transparent, var(--bg-0)); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; }
.hero-copy { max-width: 640px; }
.hero-h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 700; letter-spacing: -0.038em; line-height: 1.04; margin: 22px 0 24px; }
.hero-h1 .line { display: block; }
.hero-h1 .word { display: inline-block; opacity: 0; transform: translateY(22px); animation: wordIn 0.7s var(--ease) forwards; }
@keyframes wordIn { to { opacity: 1; transform: translateY(0); } }
/* keep gradient text visible after word-splitting */
.hero-h1 .accent .word { background: linear-gradient(110deg, var(--ink) 14%, var(--em) 116%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 18px; color: var(--ink-soft); line-height: 1.62; max-width: 56ch; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-feature-settings: "tnum"; line-height: 1; }
.stat span { font-size: 12.5px; color: var(--ink-mute); }
.stat-div { width: 1px; height: 34px; background: var(--line-2); }

/* Live dispatch */
.dispatch-wrap { position: relative; perspective: 1400px; }
.dispatch {
  position: relative; border-radius: var(--radius-lg); border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 1px 0 var(--surf-inset-strong) inset, 0 30px 80px -30px var(--shadow-deep), 0 0 70px -34px var(--em-glow);
  overflow: hidden; transform-style: preserve-3d; transition: transform 0.18s var(--ease);
}
.dispatch::before { /* animated gradient border */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang,0deg), transparent 0deg, var(--line-glow) 60deg, transparent 140deg, transparent 220deg, rgba(63,227,154,0.5) 300deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinBorder 7s linear infinite;
}
@keyframes spinBorder { to { --ang: 360deg; } }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.tilt-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(280px circle at var(--lx,50%) var(--ly,50%), rgba(63,227,154,0.14), transparent 60%); }
.dispatch-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--hairline); position: relative; z-index: 1; }
.dispatch-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--em); box-shadow: 0 0 0 0 var(--em-glow); animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 var(--em-glow); } 70% { box-shadow: 0 0 0 9px rgba(63,227,154,0); } 100% { box-shadow: 0 0 0 0 rgba(63,227,154,0); } }
.dispatch-status { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.05em; }
.dispatch-quote { position: relative; z-index: 1; padding: 14px 18px 4px; font-size: 13.5px; color: var(--ink-soft); font-style: italic; border-bottom: 1px dashed var(--line); padding-bottom: 14px; }
.dispatch-body { position: relative; z-index: 1; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 13px; min-height: 318px; }
.msg { display: flex; gap: 11px; opacity: 0; transform: translateY(10px); }
.msg.show { animation: msgIn 0.55s var(--ease) forwards; }
@keyframes msgIn { to { opacity: 1; transform: translateY(0); } }
.av { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); border: 1px solid var(--line-2); }
.av.c1 { background: linear-gradient(140deg, #1c8c5e, #0e3a28); }
.av.c2 { background: linear-gradient(140deg, #2a4a5e, #14242e); }
.av.c3 { background: linear-gradient(140deg, #4a3a5e, #261c2e); }
.av.c4 { background: linear-gradient(140deg, #5e4a2a, #2e2414); }
.msg-body { flex: 1; min-width: 0; }
.msg-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.msg-name .role { font-weight: 400; color: var(--ink-faint); font-family: var(--mono); font-size: 10px; margin-left: 6px; }
.msg-text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; padding: 9px 12px; border-radius: 11px; background: var(--surf-2); border: 1px solid var(--line); }
.msg.me .msg-text { background: var(--em-glow-soft); border-color: var(--line-glow); }
.typing { display: inline-flex; gap: 3px; padding: 2px 0; margin-left: 5px; vertical-align: middle; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-mute); animation: typ 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typ { 0%,60%,100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.dispatch-foot { position: relative; z-index: 1; padding: 13px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: var(--hairline); }
.deliverable { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-soft); }
.deliverable .chip { font-family: var(--mono); font-size: 10px; color: var(--em); padding: 3px 8px; border-radius: 6px; background: var(--em-glow-soft); border: 1px solid var(--line-glow); }
.progress-mini { width: 90px; height: 4px; border-radius: 4px; background: var(--surf-3); overflow: hidden; }
.progress-mini i { display: block; height: 100%; width: 0; background: var(--em); border-radius: 4px; box-shadow: 0 0 8px var(--em); transition: width 0.6s var(--ease); }

.handoff-badge {
  position: absolute; top: -16px; right: -14px; z-index: 4;
  display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 100px;
  background: var(--glass-a); border: 1px solid var(--line-glow); backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -12px var(--shadow-card), 0 0 24px -10px var(--em-glow);
  font-size: 11.5px; font-weight: 600; color: var(--ink);
  opacity: 0; transform: translateY(-6px) scale(0.94); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.handoff-badge.show { opacity: 1; transform: translateY(0) scale(1); }
.hb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--em); box-shadow: 0 0 8px var(--em); }

/* ---------- Marquee trust ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; background: var(--hairline); overflow: hidden; position: relative; }
.trust::before, .trust::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.trust::before { left: 0; background: linear-gradient(90deg, var(--bg-0), transparent); }
.trust::after { right: 0; background: linear-gradient(270deg, var(--bg-0), transparent); }
.marquee { width: 100%; overflow: hidden; }
.marquee-track { display: inline-flex; align-items: center; gap: 22px; white-space: nowrap; animation: scrollX 38s linear infinite; will-change: transform; }
.trust:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }
.mq-item { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.mq-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--em); opacity: 0.7; flex-shrink: 0; }

/* ---------- Section spacing ---------- */
.band { padding: 100px 0; }
.band-tight { padding: 82px 0; }

/* ---------- Públicos ---------- */
.publicos-layout { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
.pub-tabs { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 96px; }
.pub-tab { text-align: left; cursor: pointer; display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 14px; border: 1px solid transparent; background: transparent; font-family: var(--sans); color: var(--ink-soft); transition: all 0.3s var(--ease); width: 100%; position: relative; overflow: hidden; }
.pub-tab:hover { background: var(--surf-2); color: var(--ink); }
.pub-tab.active { background: linear-gradient(120deg, var(--em-glow-soft), var(--surf-1)); border-color: var(--line-glow); color: var(--ink); box-shadow: 0 0 30px -16px var(--em-glow); }
.pub-tab .tnum { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--line); flex-shrink: 0; transition: all 0.3s; }
.pub-tab.active .tnum { color: var(--em); border-color: var(--line-glow); background: var(--em-glow-soft); }
.pub-tab .ttitle { font-size: 14.5px; font-weight: 580; }

.pub-panels { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--glass-soft-a), var(--glass-soft-b)); backdrop-filter: blur(20px); padding: 38px 40px; box-shadow: 0 1px 0 var(--surf-inset) inset, 0 30px 70px -34px var(--shadow-card); min-height: 372px; overflow: hidden; }
.pub-panel { position: relative; z-index: 1; }
.pub-panel.swap { animation: panelIn 0.5s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.pub-panel .pp-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--em); text-transform: uppercase; }
.pub-panel h3 { font-size: 27px; font-weight: 660; letter-spacing: -0.026em; margin: 14px 0 16px; line-height: 1.14; }
.pub-panel .pp-frente { font-size: 17px; color: var(--ink-soft); line-height: 1.6; max-width: 58ch; margin-bottom: 28px; }
.pp-examples { display: flex; flex-direction: column; gap: 11px; }
.pp-ex { display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; border-radius: 13px; border: 1px solid var(--line); background: var(--surf-1); font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; transition: border-color 0.25s, background 0.25s, transform 0.25s; }
.pp-ex:hover { border-color: var(--line-glow); background: var(--surf-2); transform: translateX(5px); }
.pp-ex .ic { width: 7px; height: 7px; border-radius: 50%; background: var(--em); box-shadow: 0 0 8px var(--em); flex-shrink: 0; margin-top: 7px; }
.pub-panel[hidden] { display: none; }

/* ---------- Diferenciais ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature.flip .feat-copy { order: 2; }
.feat-copy h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 660; letter-spacing: -0.03em; line-height: 1.12; margin: 16px 0 16px; }
.feat-copy p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.64; max-width: 50ch; margin-bottom: 20px; }
.feat-num { font-family: var(--mono); font-size: 12px; color: var(--em); letter-spacing: 0.1em; }
.feat-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.feat-tags span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-mute); padding: 5px 11px; border-radius: 100px; border: 1px solid var(--line); background: var(--surf-2); }

.feat-visual { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--glass-feat-a), var(--glass-feat-b)); padding: 28px; min-height: 312px; overflow: hidden; box-shadow: 0 1px 0 var(--surf-inset) inset, 0 30px 70px -36px var(--shadow-card); display: flex; align-items: center; }
.feat-visual::after { content: ""; position: absolute; top: -40%; right: -30%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--em-glow-soft), transparent 70%); pointer-events: none; }

/* Builder */
.builder { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; width: 100%; }
.builder-row { display: flex; align-items: center; gap: 13px; }
.builder-av { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; background: linear-gradient(140deg, #1c8c5e, #0e3a28); display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 16px; border: 1px solid var(--line-glow); box-shadow: 0 0 30px -10px var(--em-glow); }
.builder-id .bn { font-size: 15px; font-weight: 600; display: flex; align-items: center; }
.bn-cursor { display: inline-block; width: 2px; height: 15px; background: var(--em); margin-left: 3px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.builder-id .br { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.04em; }
.builder-traits { display: flex; flex-direction: column; gap: 10px; }
.trait-label { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-mute); margin-bottom: 5px; font-family: var(--mono); letter-spacing: 0.03em; }
.trait-label b { color: var(--em); font-weight: 500; }
.trait-bar { height: 6px; border-radius: 6px; background: var(--surf-3); overflow: hidden; }
.trait-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--em-deep), var(--em)); box-shadow: 0 0 10px -2px var(--em-glow); width: 0; transition: width 1.3s var(--ease); }
.builder.in .trait-bar i { width: var(--w); }
.tone-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tone-chip { font-size: 12px; padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-mute); background: var(--surf-2); transition: all 0.25s; cursor: default; }
.tone-chip.on { color: var(--em); border-color: var(--line-glow); background: var(--em-glow-soft); }
.tone-chip:hover { border-color: var(--line-glow); color: var(--ink); }

/* Collab */
.collab { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 11px; width: 100%; }
.collab-line { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surf-2); opacity: 0; transform: translateX(-10px); }
.collab.in .collab-line { animation: slideIn 0.5s var(--ease) forwards; }
.collab.in .collab-line:nth-child(1) { animation-delay: 0.1s; }
.collab.in .collab-line:nth-child(2) { animation-delay: 0.35s; }
.collab.in .collab-line:nth-child(3) { animation-delay: 0.6s; }
.collab.in .collab-line:nth-child(4) { animation-delay: 0.85s; }
.collab-line.done { border-color: var(--line-glow); background: var(--em-glow-soft); }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }
.collab-av { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600; border: 1px solid var(--line-2); color: var(--ink); }
.collab-av.c1 { background: linear-gradient(140deg, #1c8c5e, #0e3a28); }
.collab-av.c2 { background: linear-gradient(140deg, #2a4a5e, #14242e); }
.collab-av.c3 { background: linear-gradient(140deg, #4a3a5e, #261c2e); }
.collab-av.c4 { background: linear-gradient(140deg, #5e4a2a, #2e2414); }
.collab-txt { flex: 1; min-width: 0; }
.collab-txt .cn { font-size: 12.5px; font-weight: 600; }
.collab-txt .cm { font-size: 12px; color: var(--ink-mute); margin-top: 1px; }
.collab-arrow { color: var(--em); flex-shrink: 0; display: inline-flex; opacity: 0.7; }
.collab-arrow.ok { opacity: 1; }

/* Clone */
.clone-stack { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; width: 100%; }
.clone-card { border-radius: 14px; border: 1px solid var(--line); padding: 16px 14px; background: var(--surf-1); text-align: center; transition: all 0.3s var(--ease); }
.clone-card:hover { transform: translateY(-3px); border-color: var(--line-glow); }
.clone-card .cc-av { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 11px; background: linear-gradient(140deg, #1c8c5e, #0e3a28); display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 14px; border: 1px solid var(--line-glow); }
.clone-card .cc-name { font-size: 12.5px; font-weight: 600; }
.clone-card .cc-tag { font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); margin-top: 3px; letter-spacing: 0.05em; }
.clone-card.ghost { opacity: 0.42; }
.clone-card.ghost .cc-av { background: var(--surf-3); border-color: var(--line); }
.clone-card.off { opacity: 0.32; filter: grayscale(0.7); }
.clone-card.add { display: grid; place-items: center; border-style: dashed; color: var(--em); cursor: pointer; min-height: 110px; }
.clone-card.add:hover { background: var(--em-glow-soft); border-color: var(--line-glow); }
.clone-card.pop { animation: cardPop 0.5s var(--ease); }
@keyframes cardPop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Como funciona ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { position: relative; padding: 28px 22px 26px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-grad-a), var(--card-grad-b)); transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; overflow: hidden; }
.step:hover { border-color: var(--line-glow); transform: translateY(-4px); box-shadow: 0 24px 50px -28px var(--em-glow); }
.step-num { font-family: var(--mono); font-size: 13px; color: var(--em); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line-glow); background: var(--em-glow-soft); margin-bottom: 18px; }
.step h4 { font-size: 16px; font-weight: 620; margin-bottom: 8px; letter-spacing: -0.02em; }
.step p { font-size: 14px; color: var(--ink-mute); line-height: 1.55; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 46px; right: -10px; width: 20px; height: 1px; background: var(--line-glow); }

/* ---------- Showcase ---------- */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.shot-frame { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--line-2); overflow: hidden; background: linear-gradient(180deg, var(--glass-shot-a), var(--glass-shot-b)); box-shadow: 0 1px 0 var(--surf-inset) inset, 0 40px 90px -40px var(--shadow-deeper), 0 0 80px -44px var(--em-glow); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.shot-frame:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--surf-inset-strong) inset, 0 50px 100px -40px var(--shadow-deeper), 0 0 100px -40px var(--em-glow); }
.shot-frame.wide { grid-column: span 2; }
.shot-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--hairline); position: relative; z-index: 2; }
.shot-bar .tl { display: flex; gap: 6px; }
.shot-bar .tl i { width: 10px; height: 10px; border-radius: 50%; background: var(--surf-hi); }
.shot-bar .tl i:first-child { background: rgba(63,227,154,0.5); }
.shot-bar .lbl { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-left: 6px; }
.shot-img { overflow: hidden; background: var(--shot-img-bg); position: relative; }
.shot-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--surf-3), inset 0 30px 60px -40px var(--em-glow); }
.shot-frame img { display: block; width: 100%; height: auto; transition: transform 0.6s var(--ease); }
.shot-frame:hover img { transform: scale(1.02); }
.shot-cap { padding: 16px 20px; border-top: 1px solid var(--line); position: relative; z-index: 2; }
.shot-cap h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.shot-cap p { font-size: 13.5px; color: var(--ink-mute); }

/* ---------- Equipe ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.agent { position: relative; padding: 20px 18px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-grad-a), var(--card-grad-b)); transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; overflow: hidden; }
.agent:hover { border-color: var(--line-glow); transform: translateY(-3px); box-shadow: 0 20px 44px -28px var(--em-glow); }
.agent-top { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.agent-av { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--ink); border: 1px solid var(--line-2); }
.agent-av.c1 { background: linear-gradient(140deg, #1c8c5e, #0e3a28); }
.agent-av.c2 { background: linear-gradient(140deg, #2a4a5e, #14242e); }
.agent-av.c3 { background: linear-gradient(140deg, #4a3a5e, #261c2e); }
.agent-av.c4 { background: linear-gradient(140deg, #5e4a2a, #2e2414); }
.agent-name { font-size: 14.5px; font-weight: 620; letter-spacing: -0.02em; }
.agent-role { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.04em; margin-top: 2px; text-transform: uppercase; }
.agent-mission { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.agent-status { position: absolute; top: 16px; right: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--em); box-shadow: 0 0 8px var(--em); animation: pulse 2.4s ease-in-out infinite; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: minmax(150px, auto); gap: 14px; }
.bcard { position: relative; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-grad-a), var(--card-grad-b)); overflow: hidden; transition: border-color 0.3s, transform 0.3s; }
.bcard:hover { border-color: var(--line-glow); transform: translateY(-3px); }
.bcard.span2 { grid-row: span 2; }
.bcard .bic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--line-glow); background: var(--em-glow-soft); color: var(--em); margin-bottom: 16px; position: relative; z-index: 1; }
.bcard h4 { font-size: 16px; font-weight: 620; letter-spacing: -0.02em; margin-bottom: 8px; position: relative; z-index: 1; }
.bcard p { font-size: 13.5px; color: var(--ink-mute); line-height: 1.55; position: relative; z-index: 1; }

/* ---------- Beta ---------- */
.beta { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--line-2); overflow: hidden; background: linear-gradient(160deg, var(--beta-grad-a), var(--beta-grad-b)); padding: 58px 48px; box-shadow: 0 1px 0 var(--surf-inset) inset, 0 40px 90px -40px var(--shadow-deeper); }
.beta::after { content: ""; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 620px; height: 360px; border-radius: 50%; background: radial-gradient(circle, var(--em-glow), transparent 70%); opacity: 0.4; filter: blur(40px); pointer-events: none; }
.beta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; }
.beta h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; margin: 18px 0 16px; }
.beta p { font-size: 17px; color: var(--ink-soft); line-height: 1.6; max-width: 52ch; margin: 0 auto 30px; }
.waitform { display: flex; gap: 11px; max-width: 460px; margin: 0 auto; }
.waitform input { flex: 1; padding: 14px 17px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--input-bg); color: var(--ink); font-family: var(--sans); font-size: 14.5px; transition: border-color 0.25s, box-shadow 0.25s; }
.waitform input::placeholder { color: var(--ink-faint); }
.waitform input:focus { outline: none; border-color: var(--em-dim); box-shadow: 0 0 0 3px var(--em-glow-soft); }
.beta-note { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); margin-top: 18px; letter-spacing: 0.03em; transition: color 0.3s; }
.beta-note.ok { color: var(--em); }
.beta-badges { display: flex; gap: 22px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.beta-badge { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.beta-badge .ic { color: var(--em); display: inline-flex; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--surf-1); overflow: hidden; transition: border-color 0.3s; }
.faq-item[open] { border-color: var(--line-glow); }
.faq-item summary { list-style: none; cursor: pointer; padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 580; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .pm { color: var(--em); transition: transform 0.3s var(--ease); flex-shrink: 0; }
.faq-item[open] summary .pm { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 22px 20px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; max-width: 70ch; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 60px 0 36px; margin-top: 20px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand p { font-size: 13.5px; color: var(--ink-mute); line-height: 1.6; max-width: 34ch; }
.footer-col h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--ink-soft); text-decoration: none; padding: 5px 0; transition: color 0.2s, padding-left 0.2s; }
.footer-col a:hover { color: var(--em); padding-left: 3px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 14px; }
.footer-bottom p { font-size: 13px; color: var(--ink-faint); }
.footer-bottom .fb-meta { display: flex; gap: 18px; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }

/* ---------- Spotlight cards (border illuminates under cursor) ---------- */
.spot-card { position: relative; }
.spot-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(220px circle at var(--lx,50%) var(--ly,50%), var(--em), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.spot-card:hover::before { opacity: 0.5; }
.spot-card:hover .tilt-glow { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding-top: 132px; }
  .publicos-layout { grid-template-columns: 1fr; }
  .pub-tabs { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .pub-tab { flex-shrink: 0; }
  .feature, .feature.flip .feat-copy { grid-template-columns: 1fr; order: 0; }
  .feature { gap: 30px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:not(:last-child)::after { display: none; }
  .showcase { grid-template-columns: 1fr; }
  .shot-frame.wide { grid-column: span 1; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: 1fr 1fr; }
  .bcard.span2 { grid-row: span 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  .band { padding: 70px 0; }
  .steps { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .waitform { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .clone-stack { grid-template-columns: 1fr 1fr; }
  .pub-panels { padding: 26px 22px; }
  .beta { padding: 42px 24px; }
  .hero-stats { gap: 16px; }
  .handoff-badge { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}