/* charactr — landing page · v3 (reference-matched) */

:root {
  --bg: #0A0520;
  --bg-deep: #050110;
  --panel: #120830;
  --panel-2: #1A0B40;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);

  --ink: #FFFFFF;
  --ink-2: #B8AED8;
  --ink-3: #7A6F98;
  --ink-4: #4A4070;

  --violet: #6C3BF4;
  --violet-2: #8B5BFF;
  --violet-3: #B691FF;
  --violet-soft: rgba(139,91,255,0.14);
  --magenta: #D46BFF;

  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: 'Poppins', 'Space Grotesk', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ═════════ Backdrop ═════════ */
.aurora {
  position: fixed; inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 15%, rgba(108,59,244,0.35), transparent 55%),
    radial-gradient(50% 50% at 85% 20%, rgba(212,107,255,0.20), transparent 60%),
    radial-gradient(70% 50% at 50% 95%, rgba(80,140,255,0.14), transparent 60%);
  filter: blur(30px);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -1%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.02); }
}
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.5;
}

.spotlight {
  position: fixed;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,91,255,0.18), rgba(212,107,255,0.05) 40%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .5s ease;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 5; }

/* ═════════ Nav ═════════ */
.nav {
  position: sticky; top: 0; z-index: 40;
  padding: 22px 0;
  background: linear-gradient(180deg, rgba(10,5,32,0.85), rgba(10,5,32,0));
  backdrop-filter: blur(14px);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 22px; letter-spacing: -0.02em;
}
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.nav-links {
  display: flex; gap: 36px; font-size: 14px; color: var(--ink-2); font-weight: 500;
}
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); }

.btn-app {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(108,59,244,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
  position: relative; overflow: hidden;
}
.btn-app:hover { box-shadow: 0 12px 36px rgba(108,59,244,0.6), 0 1px 0 rgba(255,255,255,0.25) inset; }
.btn-app:active { transform: scale(0.96); }
.btn-app::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.5,.1,.2,1);
}
.btn-app:hover::before { transform: translateX(120%); }
.btn-app .apple { width: 14px; height: 14px; fill: currentColor; }

.magnet { display: inline-block; will-change: transform; transition: transform .5s cubic-bezier(.16,1,.3,1); }

/* ═════════ Hero ═════════ */
.hero {
  position: relative;
  padding: 48px 0 96px;
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(460px, 1.2fr);
  gap: 40px;
  width: 100%;
  align-items: center;
}

.eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet-3);
  font-weight: 600;
  margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 10px;
}

h1.display {
  font-size: clamp(56px, 7.2vw, 104px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  color: var(--ink);
}
h1.display .line { display: block; }
h1.display .grad {
  background: linear-gradient(100deg, #B691FF 0%, #8B5BFF 40%, #6C3BF4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.lede {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 440px;
  margin: 0 0 36px;
  line-height: 1.5;
  font-weight: 400;
}
.lede .accent { color: var(--violet-3); font-weight: 500; }

.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn-store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-radius: 14px;
  background: #0F0628;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  transition: border-color .25s ease, background .25s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.btn-store:hover { border-color: rgba(139,91,255,0.6); background: #140A32; }
.btn-store:active { transform: scale(0.97); }
.btn-store .apple { width: 24px; height: 24px; fill: #fff; }
.btn-store .stack { display: flex; flex-direction: column; line-height: 1.05; }
.btn-store .small { font-size: 10px; color: var(--ink-2); font-weight: 400; letter-spacing: 0.06em; }
.btn-store .big { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.hero-join {
  color: var(--ink-3);
  font-size: 13px;
  margin-top: 22px;
  max-width: 340px;
  line-height: 1.5;
}

/* Phone column */
.phone-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1800px;
  min-height: 720px;
}
.phone-glow {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(45% 45% at 50% 50%, rgba(108,59,244,0.45), transparent 70%);
  filter: blur(30px);
  z-index: 0;
  animation: haloDrift 14s ease-in-out infinite;
}
.phone-glow-2 {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(212,107,255,0.3), transparent 70%);
  filter: blur(30px);
  z-index: 0;
  top: 60%; left: 15%;
  animation: haloDrift 11s ease-in-out infinite reverse;
}
@keyframes haloDrift { 0%,100% { transform: translate(-20px,-10px); } 50% { transform: translate(20px,10px); } }
.phone-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.phone-img {
  filter: drop-shadow(0 50px 120px rgba(108,59,244,0.55)) drop-shadow(0 20px 40px rgba(0,0,0,0.5));
  width: 100%;
}

/* Floating tags around phone */
.tag-card {
  position: absolute;
  z-index: 3;
  background: rgba(12,6,36,0.7);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: floatUp 1s ease-out both;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
}
.tag-card .tc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet-2);
  box-shadow: 0 0 10px var(--violet-2);
}
.tag-card .tc-k { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; }
.tag-card .tc-v { color: var(--ink); font-size: 12px; }
.tag-1 { top: 10%; left: -6%; animation-delay: 0.4s; }
.tag-2 { top: 42%; right: -2%; animation-delay: 0.7s; }
.tag-3 { bottom: 18%; left: -2%; animation-delay: 1s; }
@keyframes floatUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ═════════ Features (icon cards) ═════════ */
.features {
  padding: 40px 0 80px;
}
.features-inner {
  background: rgba(18,8,48,0.5);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px 40px;
  backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.feat-card .icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--violet-soft), rgba(108,59,244,0.06));
  border: 1px solid rgba(139,91,255,0.22);
  display: grid; place-items: center;
  margin-bottom: 20px;
  color: var(--violet-3);
}
.feat-card .icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.feat-card h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.feat-card p {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
  max-width: 220px;
}

/* ═════════ Gallery ═════════ */
.gallery {
  padding: 48px 0 96px;
}
.gal-inner {
  background: linear-gradient(180deg, rgba(27,13,70,0.6), rgba(18,8,48,0.4));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px 40px;
  backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 40px;
  align-items: center;
}
.gal-copy .eyebrow { color: var(--violet-3); margin-bottom: 20px; display: block; }
.gal-copy h2 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 20px;
}
.gal-copy h2 .grad {
  background: linear-gradient(100deg, #B691FF 0%, #8B5BFF 40%, #6C3BF4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gal-copy p {
  color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
  margin: 0 0 24px;
  max-width: 340px;
}
.gal-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.gal-check li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink);
}
.gal-check .ck {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-2), var(--violet));
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(108,59,244,0.4);
}
.gal-check .ck svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 2.4; }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}

/* Character cards — static presentation */
.char-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.char-art {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(139,91,255,0.22);
  background: #0F0628;
  box-shadow:
    0 20px 50px rgba(8,4,24,0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}
.char-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.char-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(10,5,32,0.35));
  pointer-events: none;
}
.char-card figcaption {
  display: flex;
  flex-direction: column;
  padding: 0 2px;
}
.char-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  line-height: 1.1;
}
.char-role {
  font-size: 13px;
  font-weight: 600;
  color: var(--violet-3);
  margin: 6px 0 0;
  letter-spacing: -0.005em;
}
.char-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 10px 0 0;
  line-height: 1.5;
  max-width: 32ch;
}

/* ═════════ CTA band ═════════ */
.cta {
  padding: 0 0 90px;
}
.cta-inner {
  background: linear-gradient(100deg, rgba(27,13,70,0.7), rgba(18,8,48,0.5));
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 26px 28px;
  display: flex; align-items: center; gap: 24px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content: "";
  position: absolute;
  top: -40%; left: 50%;
  width: 700px; height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 50%, rgba(139,91,255,0.25), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.cta-store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #0A0520;
  border: 1px solid var(--line-2);
  transition: border-color .25s, background .25s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.cta-store:hover { border-color: rgba(139,91,255,0.5); background: #140A32; }
.cta-store:active { transform: scale(0.97); }
.cta-store .apple { width: 22px; height: 22px; fill: #fff; }
.cta-store .stack { display: flex; flex-direction: column; line-height: 1.05; }
.cta-store .small { font-size: 9.5px; color: var(--ink-2); letter-spacing: 0.06em; }
.cta-store .big { font-size: 14px; font-weight: 600; }
.cta-text { flex: 1; position: relative; z-index: 2; }
.cta-text h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
.cta-text p { color: var(--ink-2); font-size: 14px; margin: 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cta-free {
  background: linear-gradient(100deg, #E8DAFF 0%, #B691FF 30%, #8B5BFF 60%, #6C3BF4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.cta-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7CF2A8;
  box-shadow: 0 0 0 0 rgba(124,242,168,0.8);
  animation: bmPulse 2.2s ease-out infinite;
  display: inline-block;
  flex: 0 0 auto;
}

/* Larger store button for hero brand plate */
.btn-store.btn-store-lg {
  padding: 16px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, #140932 0%, #0A0520 100%);
  border-color: rgba(139,91,255,0.45);
  box-shadow:
    0 18px 40px rgba(108,59,244,0.4),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  position: relative;
}
.btn-store.btn-store-lg::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(140deg, rgba(139,91,255,0.7) 0%, rgba(139,91,255,0) 50%, rgba(212,107,255,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-store.btn-store-lg:hover {
  border-color: rgba(139,91,255,0.7);
  box-shadow:
    0 22px 50px rgba(108,59,244,0.55),
    0 0 0 1px rgba(255,255,255,0.08) inset;
  transform: translateY(-1px);
}
.btn-store.btn-store-lg .apple { width: 28px; height: 28px; }
.btn-store.btn-store-lg .small { font-size: 11px; }
.btn-store.btn-store-lg .big { font-size: 18px; }
.cta-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--violet);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: #fff;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  box-shadow: 0 10px 30px rgba(108,59,244,0.5);
  position: relative; z-index: 2;
}
.cta-arrow:hover { transform: translateX(4px); box-shadow: 0 14px 36px rgba(108,59,244,0.7); }
.cta-arrow svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }

/* ═════════ Footer ═════════ */
footer { padding: 48px 0 32px; position: relative; z-index: 5; border-top: 1px solid var(--line); }
.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
  gap: 40px;
  margin-bottom: 36px;
}
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-brand .brand { font-size: 20px; }
.footer-brand .brand img { width: 34px; height: 34px; }
.footer-copy { color: var(--ink-3); font-size: 12.5px; }
.footer-col h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer-col a {
  color: var(--ink-2); font-size: 13.5px; transition: color .2s;
}
.footer-col a:hover { color: var(--violet-3); }
.footer-tag {
  color: var(--ink-2); font-size: 13px; line-height: 1.5; max-width: 260px; margin: 28px 0 0;
}

/* ═════════ Reveal ═════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }
[data-reveal-d="1"] { transition-delay: 0.08s; }
[data-reveal-d="2"] { transition-delay: 0.16s; }
[data-reveal-d="3"] { transition-delay: 0.24s; }
[data-reveal-d="4"] { transition-delay: 0.32s; }

/* ════════════════════════════════════════════════════════
   HERO v6 — brand plate + capability carousel (side by side)
   ════════════════════════════════════════════════════════ */
.hero-v2 {
  position: relative;
  padding: 20px 0 64px;
  z-index: 5;
  overflow: hidden;
}
.heroV2-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
  gap: 32px;
  align-items: center;
}
.heroV2-grid > * { min-width: 0; }

/* ─── Brand plate (left) ─── */
.bplate {
  position: relative;
  z-index: 3;
  padding: 28px 30px 30px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(24,12,62,0.55) 0%, rgba(14,6,36,0.35) 100%);
  border: 1px solid rgba(139,91,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 40px 80px rgba(8,4,24,0.45);
  backdrop-filter: blur(6px);
}
.bplate::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 28px;
  padding: 1px;
  background: linear-gradient(150deg, rgba(139,91,255,0.5) 0%, rgba(139,91,255,0) 45%, rgba(212,107,255,0.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.bplate-mark {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 44px;
}
.bplate-icon {
  width: 52px; height: 52px; border-radius: 14px;
  box-shadow: 0 10px 28px rgba(108,59,244,0.45), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.bplate-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px;
  color: var(--ink);
}
.bm-row {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500;
}
.bm-row svg { width: 12px; height: 12px; }
.bm-row .apple-mini { fill: #fff; }
.bm-row svg:not(.apple-mini) { fill: #F7C96B; }
.bm-dim { color: var(--ink-2); font-weight: 400; }
.bm-dim b { color: var(--ink); font-weight: 600; }
.bm-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7CF2A8;
  box-shadow: 0 0 0 0 rgba(124,242,168,0.8);
  animation: bmPulse 2.2s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes bmPulse {
  0% { box-shadow: 0 0 0 0 rgba(124,242,168,0.8); }
  70% { box-shadow: 0 0 0 10px rgba(124,242,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,242,168,0); }
}

/* MASSIVE trademark wordmark */
.bplate-word {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(44px, 6vw, 132px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.88;
  margin: 0 0 22px;
  color: #FFFFFF;
  position: relative;
  display: block;
  white-space: nowrap;
  filter: drop-shadow(0 2px 30px rgba(139,91,255,0.35));
}
.bplate-word .bw-letter {
  display: inline-block;
  will-change: transform;
  transition: transform .4s cubic-bezier(.16,1,.3,1), color .4s ease;
}
.bplate-word:hover .bw-letter { color: var(--violet-3); }
.bplate-word:hover .bw-letter:nth-child(odd) { transform: translateY(-4px); }
.bplate-word:hover .bw-letter:nth-child(even) { transform: translateY(4px); }
.bw-tm {
  font-size: 0.2em;
  font-weight: 500;
  color: var(--violet-3);
  vertical-align: super;
  margin-left: 0.06em;
  letter-spacing: 0;
  font-family: 'JetBrains Mono', monospace;
  top: -0.9em;
  position: relative;
  display: inline-block;
}

/* Rule + tag under the wordmark */
.bplate-rule {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.br-line {
  flex: 0 0 44px; height: 2px;
  background: linear-gradient(90deg, var(--violet-2), transparent);
  border-radius: 2px;
}
.br-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.bplate-lede {
  font-size: 20px;
  color: var(--ink);
  max-width: 480px;
  margin: 0 0 28px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.bp-grad {
  background: linear-gradient(100deg, #E8DAFF 0%, #B691FF 30%, #8B5BFF 60%, #6C3BF4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.bplate-keys {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bplate-keys li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(139,91,255,0.08);
  border: 1px solid rgba(139,91,255,0.22);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
}
.bk-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet-2);
  box-shadow: 0 0 8px var(--violet-2);
}

.bplate-cta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.bplate-join {
  color: var(--ink-3);
  font-size: 13px;
}
.bplate-join b { color: var(--ink); font-weight: 600; }

/* ─── Showcase carousel (right, narrower) ─── */
/* ─── Showcase carousel (right, narrower) ─── */
.showcase {
  position: relative;
  padding: 20px 0 12px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.sc-halo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 760px; height: 760px;
  border-radius: 50%;
  background: radial-gradient(45% 45% at 50% 50%, rgba(108,59,244,0.55), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  transition: background 0.9s ease;
  animation: haloDrift 14s ease-in-out infinite;
}
.sc-halo-2 {
  width: 440px; height: 440px;
  transform: translate(-15%, -55%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(212,107,255,0.32), transparent 70%);
  animation: haloDrift 11s ease-in-out infinite reverse;
}

/* Scroll rail — bounded to showcase column */
.sc-rail {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 32px calc(50% - 115px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  z-index: 2;
}
.sc-rail::-webkit-scrollbar { display: none; }

.sc-card {
  flex: 0 0 auto;
  width: clamp(210px, 22vw, 300px);
  aspect-ratio: 488 / 1000;
  scroll-snap-align: center;
  position: relative;
  cursor: pointer;
  transition:
    transform 0.6s cubic-bezier(.16,1,.3,1),
    opacity 0.6s cubic-bezier(.16,1,.3,1),
    filter 0.6s cubic-bezier(.16,1,.3,1);
  transform: scale(0.82);
  opacity: 0.42;
  filter: saturate(0.65) brightness(0.82);
}
.sc-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 40px 80px rgba(0,0,0,0.55);
  user-select: none;
  -webkit-user-drag: none;
}
.sc-card.active {
  transform: scale(1);
  opacity: 1;
  filter: saturate(1) brightness(1);
}
.sc-card.active img {
  box-shadow:
    0 60px 120px rgba(108,59,244,0.55),
    0 20px 40px rgba(0,0,0,0.6),
    0 0 0 1px rgba(139,91,255,0.28);
}

/* Arrows */
.sc-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(16,8,42,0.75);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 10;
  transition: background .2s, border-color .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.sc-nav:hover { background: rgba(139,91,255,0.25); border-color: rgba(139,91,255,0.5); }
.sc-nav:active { transform: translateY(-50%) scale(0.92); }
.sc-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-prev { left: 8px; }
.sc-next { right: 8px; }

/* Footer under carousel */
.sc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 0;
  position: relative;
  z-index: 3;
}
.sc-label {
  display: inline-flex; align-items: baseline; gap: 10px;
  color: var(--ink);
}
.sc-label .sc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--violet-3);
}
.sc-label .sc-name {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 15px;
}
.sc-dots {
  list-style: none; padding: 0; margin: 0;
  display: inline-flex; gap: 6px;
}
.sc-dots .sc-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: none; border: none;
  cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.sc-dots .sc-dot i {
  display: block;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  transition: all .25s;
}
.sc-dots .sc-dot:hover i { background: rgba(255,255,255,0.5); }
.sc-dots .sc-dot.active i {
  background: var(--violet-2);
  box-shadow: 0 0 12px var(--violet-2);
  width: 20px;
  border-radius: 4px;
}

/* ═════════ Responsive ═════════ */
@media (max-width: 820px) {
  .heroV2-grid { grid-template-columns: 1fr; gap: 24px; }
  .bplate-mark { justify-content: flex-start; }
  .bplate-word { font-size: clamp(64px, 18vw, 140px); }
  .sc-rail { padding: 32px calc(50% - 120px); }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .phone-col { min-height: 540px; margin-top: 20px; }
  .features-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .gal-inner { grid-template-columns: 1fr; }
  .gal-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .cta-inner { flex-wrap: wrap; }
  .sc-prev { left: 6px; } .sc-next { right: 6px; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  h1.display { font-size: 56px; }
  .bplate-word { font-size: 72px; }
  .features-inner { grid-template-columns: 1fr; padding: 32px 24px; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr; }
  .tag-card { display: none; }
  .sc-rail { padding: 24px 18vw; gap: 12px; }
  .sc-card { width: 72vw; }
  .sc-nav { display: none; }
  .sc-foot { flex-direction: column; }
}
.hero-v2 {
  position: relative;
  padding: 36px 0 72px;
  min-height: calc(100vh - 90px);
  z-index: 5;
  overflow: hidden;
}

.hero-top {
  text-align: center;
  margin-bottom: 36px;
  position: relative;
  z-index: 3;
}
.hero-top .eyebrow {
  margin: 0 0 18px;
  justify-content: center;
}
.hero-lead {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 auto 18px;
  max-width: 900px;
  color: var(--ink);
}
.hero-lead .grad {
  background: linear-gradient(100deg, #E8DAFF 0%, #B691FF 30%, #8B5BFF 60%, #6C3BF4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-tag {
  color: var(--ink-2);
  font-size: 16px;
  margin: 0;
  font-weight: 400;
}

/* Arrow nav buttons */
.sc-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(16,8,42,0.7);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 10;
  transition: background .2s, border-color .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.sc-nav:hover { background: rgba(139,91,255,0.25); border-color: rgba(139,91,255,0.5); }
.sc-nav:active { transform: translateY(-50%) scale(0.92); }
.sc-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-prev { left: 28px; }
.sc-next { right: 28px; }

/* Footer: label, dots, CTA */
.sc-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 28px;
}
.sc-label {
  display: inline-flex; align-items: baseline; gap: 12px;
  color: var(--ink);
  font-size: 14px;
}
.sc-label .sc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--violet-3);
}
.sc-label .sc-name {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 16px;
}
.sc-dots {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 8px;
  justify-self: center;
}
.sc-dots .sc-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: grid; place-items: center;
}
.sc-dots .sc-dot i {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  transition: background .25s, transform .25s, box-shadow .25s, width .25s;
}
.sc-dots .sc-dot:hover i { background: rgba(255,255,255,0.5); }
.sc-dots .sc-dot.active i {
  background: var(--violet-2);
  box-shadow: 0 0 12px var(--violet-2);
  width: 22px;
  border-radius: 4px;
}
.sc-cta { justify-self: end; }

/* ═════════ Responsive ═════════ */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .phone-col { min-height: 540px; margin-top: 20px; }
  .features-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .gal-inner { grid-template-columns: 1fr; }
  .gal-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .cta-inner { flex-wrap: wrap; }
  .sc-prev { left: 12px; } .sc-next { right: 12px; }
  .sc-footer { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .sc-cta { justify-self: center; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  h1.display { font-size: 56px; }
  .hero-lead { font-size: 40px; }
  .features-inner { grid-template-columns: 1fr; padding: 32px 24px; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr; }
  .tag-card { display: none; }
  .sc-nav { display: none; }
}

/* ════════════════════════════════════════════════════════
   v15 — Talking-AI rebrand additions
   Demo strip · Voice section · Scenes gallery · FAQ · Disclosure
   ════════════════════════════════════════════════════════ */

:root {
  --amber: #F7C96B;
  --amber-2: #FFE0A6;
  --amber-soft: rgba(247,201,107,0.14);
}

.eyebrow-amber {
  color: var(--amber);
}
.grad-amber {
  background: linear-gradient(100deg, #FFE0A6 0%, #F7C96B 35%, #E2A248 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ─── Demo strip ─── */
.demo-strip {
  padding: 24px 0 64px;
  position: relative;
  z-index: 5;
}
.demo-inner {
  background: linear-gradient(180deg, rgba(20,10,52,0.65) 0%, rgba(12,6,36,0.45) 100%);
  border: 1px solid rgba(247,201,107,0.16);
  border-radius: 24px;
  padding: 44px 40px;
  backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.demo-inner::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(247,201,107,0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.demo-head { position: relative; z-index: 2; }
.demo-title {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 12px 0 18px;
}
.demo-lede {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 420px;
  margin: 0;
}

.demo-stage {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(8,4,24,0.7), rgba(8,4,24,0.4));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 22px 24px;
  display: grid;
  gap: 18px;
}
.demo-prompt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(247,201,107,0.06);
  border: 1px solid rgba(247,201,107,0.18);
  position: relative;
}
.demo-prompt-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--amber);
}
.demo-prompt-v {
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.45;
  font-style: italic;
}
.demo-prompt-cursor {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 16px;
  background: var(--amber);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.demo-character {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}
.demo-play { flex: 0 0 auto; }
.demo-character img {
  width: 64px; height: 64px; border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(247,201,107,0.4);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.demo-charmeta {
  display: flex; flex-direction: column; gap: 2px;
}
.demo-charname {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 14px;
}
.demo-charrole {
  color: var(--ink-3);
  font-size: 11.5px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
}

.demo-wave {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 4px;
  height: 64px;
  align-items: center;
  padding: 0 4px;
}
.demo-wave span {
  display: block;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--amber-2), var(--amber));
  box-shadow: 0 0 8px rgba(247,201,107,0.45);
  animation: waveBob 1.2s ease-in-out infinite;
}
.demo-wave span:nth-child(1)  { height: 28%; animation-delay: -1.10s; }
.demo-wave span:nth-child(2)  { height: 52%; animation-delay: -1.00s; }
.demo-wave span:nth-child(3)  { height: 78%; animation-delay: -0.92s; }
.demo-wave span:nth-child(4)  { height: 96%; animation-delay: -0.84s; }
.demo-wave span:nth-child(5)  { height: 70%; animation-delay: -0.78s; }
.demo-wave span:nth-child(6)  { height: 48%; animation-delay: -0.72s; }
.demo-wave span:nth-child(7)  { height: 80%; animation-delay: -0.66s; }
.demo-wave span:nth-child(8)  { height: 90%; animation-delay: -0.58s; }
.demo-wave span:nth-child(9)  { height: 56%; animation-delay: -0.50s; }
.demo-wave span:nth-child(10) { height: 32%; animation-delay: -0.44s; }
.demo-wave span:nth-child(11) { height: 64%; animation-delay: -0.38s; }
.demo-wave span:nth-child(12) { height: 88%; animation-delay: -0.30s; }
.demo-wave span:nth-child(13) { height: 76%; animation-delay: -0.24s; }
.demo-wave span:nth-child(14) { height: 44%; animation-delay: -0.18s; }
.demo-wave span:nth-child(15) { height: 60%; animation-delay: -0.10s; }
.demo-wave span:nth-child(16) { height: 92%; animation-delay: -0.04s; }
.demo-wave span:nth-child(17) { height: 70%; animation-delay: 0.04s; }
.demo-wave span:nth-child(18) { height: 36%; animation-delay: 0.10s; }
.demo-wave span:nth-child(19) { height: 58%; animation-delay: 0.18s; }
.demo-wave span:nth-child(20) { height: 84%; animation-delay: 0.26s; }
.demo-wave span:nth-child(21) { height: 50%; animation-delay: 0.34s; }
.demo-wave span:nth-child(22) { height: 30%; animation-delay: 0.42s; }
.demo-wave span:nth-child(23) { height: 22%; animation-delay: 0.50s; }
.demo-wave span:nth-child(24) { height: 18%; animation-delay: 0.58s; }
@keyframes waveBob {
  0%, 100% { transform: scaleY(0.55); opacity: 0.7; }
  50%      { transform: scaleY(1.0);  opacity: 1; }
}
.demo-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.demo-tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
}

/* ─── Voice section ─── */
.voice-sec {
  padding: 56px 0 80px;
  position: relative;
  z-index: 5;
}
.voice-grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 56px;
  align-items: center;
}
.voice-copy h2 {
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 14px 0 18px;
}
.voice-lede {
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 480px;
  margin: 0 0 32px;
}
.voice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 22px;
}
.voice-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: start;
}
.vl-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--amber);
  padding-top: 4px;
}
.vl-body h4 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.vl-body p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  max-width: 460px;
}

/* Voice stage — stacked dialogue/voice cards */
.voice-stage {
  position: relative;
  height: 540px;
  perspective: 1600px;
}
.vs-card {
  position: absolute;
  background: linear-gradient(180deg, rgba(24,12,62,0.75) 0%, rgba(14,6,36,0.6) 100%);
  border: 1px solid rgba(247,201,107,0.22);
  border-radius: 18px;
  padding: 18px 20px;
  width: 88%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 30px 60px rgba(8,4,24,0.55);
  backdrop-filter: blur(8px);
  animation: vsFloat 7s ease-in-out infinite;
}
.vs-card-a {
  top: 0; left: 0;
  transform: rotate(-2deg);
  z-index: 3;
}
.vs-card-b {
  top: 180px; right: 0;
  transform: rotate(1.8deg);
  z-index: 4;
  border-color: rgba(139,91,255,0.32);
}
.vs-card-c {
  bottom: 0; left: 4%;
  transform: rotate(-1deg);
  z-index: 5;
  width: 80%;
  background: linear-gradient(180deg, rgba(247,201,107,0.14) 0%, rgba(8,4,24,0.55) 100%);
  border-color: rgba(247,201,107,0.4);
}
@keyframes vsFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, -2deg)); }
  50%      { transform: translateY(-6px) rotate(var(--rot, -2deg)); }
}
.vs-card-a { --rot: -2deg; }
.vs-card-b { --rot: 1.8deg; animation-delay: -3s; }
.vs-card-c { --rot: -1deg; animation-delay: -1.5s; }

.vs-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.vs-tag { color: var(--amber); }
.vs-take { color: var(--violet-3); }
.vs-line {
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.vs-line b {
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.vs-card-b .vs-line b { color: var(--violet-3); }
.vs-line-quiet {
  font-size: 13.5px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.5;
}
.vs-line-quiet i { font-style: normal; }
.vs-wave {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
  height: 28px;
  align-items: center;
  margin-bottom: 10px;
}
.vs-wave span {
  display: block;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--amber-2), var(--amber));
  animation: waveBob 1.4s ease-in-out infinite;
}
.vs-wave-alt span {
  background: linear-gradient(180deg, #D5BFFF, var(--violet-2));
}
.vs-wave span:nth-child(odd)  { height: 60%; }
.vs-wave span:nth-child(even) { height: 90%; animation-delay: -0.4s; }
.vs-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vs-mic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(247,201,107,0.18);
  border: 1px solid rgba(247,201,107,0.4);
  display: grid; place-items: center;
  position: absolute;
  top: 16px; right: 16px;
  color: var(--amber);
}
.vs-mic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* ─── Scenes gallery ─── */
.scenes-sec {
  padding: 24px 0 80px;
  position: relative;
  z-index: 5;
}
.scenes-head { text-align: center; margin-bottom: 36px; }
.scenes-head h2 {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 14px 0 14px;
}
.scenes-lede {
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.55;
}
.scenes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.scene-tile {
  margin: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(139,91,255,0.18);
  background: #0F0628;
  aspect-ratio: 4/5;
  cursor: default;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .4s ease;
}
.scene-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(247,201,107,0.4);
  box-shadow: 0 30px 60px rgba(8,4,24,0.55), 0 0 0 1px rgba(247,201,107,0.25);
}
.scene-art {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.95);
}
.scene-art-grad {
  background:
    radial-gradient(50% 60% at 30% 30%, rgba(247,201,107,0.45), transparent 60%),
    radial-gradient(60% 60% at 70% 80%, rgba(139,91,255,0.55), transparent 65%),
    linear-gradient(180deg, #1A0B40, #0A0520);
}
.scene-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(8,4,24,0.85) 100%);
  pointer-events: none;
}
.scene-tile figcaption {
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  z-index: 2;
  display: grid;
  gap: 8px;
}
.scene-prompt {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
  letter-spacing: -0.005em;
}
.scene-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

/* ─── FAQ ─── */
.faq-sec {
  padding: 32px 0 72px;
  position: relative;
  z-index: 5;
}
.faq-inner {
  background: linear-gradient(180deg, rgba(18,8,48,0.55) 0%, rgba(12,6,36,0.35) 100%);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 48px 48px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  backdrop-filter: blur(12px);
}
.faq-head h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 14px 0 0;
}
.faq-list { display: grid; gap: 8px; }
.faq-item {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(8,4,24,0.45);
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
.faq-item[open] {
  border-color: rgba(139,91,255,0.32);
  background: rgba(20,10,52,0.55);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
  padding-right: 50px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--violet-3);
  font-weight: 300;
  transition: transform .25s ease;
}
.faq-item[open] summary::after {
  content: '−';
  color: var(--amber);
}
.faq-item p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 56ch;
}

/* ─── AI Disclosure strip ─── */
.disclosure-strip {
  padding: 0 0 48px;
  position: relative;
  z-index: 5;
}
.ds-inner {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(247,201,107,0.06);
  border: 1px solid rgba(247,201,107,0.22);
  max-width: 920px;
  margin: 0 auto;
}
.ds-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(247,201,107,0.15);
  border: 1px solid rgba(247,201,107,0.4);
  display: grid; place-items: center;
  color: var(--amber);
  flex: 0 0 auto;
}
.ds-icon svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ds-inner p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.ds-inner b { color: var(--ink); font-weight: 600; }

/* ─── Footer legal ─── */
.footer-legal {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-top: 24px;
  display: grid;
  gap: 18px;
}
.legal-tm, .legal-providers {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 1080px;
}
.legal-tm b, .legal-providers b { color: var(--ink-2); }
.legal-providers a { color: var(--violet-3); }
.legal-providers a:hover { color: var(--amber); }

/* ─── Responsive overrides for new sections ─── */
@media (max-width: 1000px) {
  .demo-inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 28px; }
  .voice-grid { grid-template-columns: 1fr; gap: 36px; }
  .voice-stage { height: auto; min-height: 480px; max-width: 480px; margin: 0 auto; width: 100%; }
  .scenes-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 28px; }
}
@media (max-width: 640px) {
  .demo-inner { padding: 28px 22px; border-radius: 18px; }
  .demo-stage { padding: 18px 16px; }
  .demo-prompt { grid-template-columns: 1fr; gap: 6px; }
  .demo-prompt-cursor { display: none; }
  .demo-wave { height: 48px; grid-template-columns: repeat(18, 1fr); }
  .demo-wave span:nth-child(n+19) { display: none; }
  .voice-stage { min-height: 420px; }
  .vs-card { width: 92%; padding: 14px 16px; }
  .vs-card-a { left: 0; }
  .vs-card-b { top: 150px; right: 0; }
  .vs-card-c { width: 86%; left: 4%; }
  .scenes-grid { grid-template-columns: 1fr; }
  .faq-inner { padding: 28px 22px; border-radius: 18px; }
  .faq-item summary { font-size: 14.5px; padding: 16px 18px; padding-right: 44px; }
  .faq-item summary::after { right: 18px; }
  .faq-item p { font-size: 13.5px; padding: 0 18px 18px; }
  .ds-inner { padding: 14px 16px; gap: 12px; }
  .ds-inner p { font-size: 12.5px; }
}


/* ════════════════════════════════════════════════════════
   v16 — Article / policy / feature page styles
   Used by /privacy, /terms, /content-policy, /ai-policy,
   /dmca, /features/voice, /web, /c/:slug
   ════════════════════════════════════════════════════════ */

.page-hero {
  padding: 56px 0 32px;
  position: relative;
  z-index: 5;
}
.page-hero .crumb {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.page-hero .crumb a { color: var(--violet-3); }
.page-hero .crumb a:hover { color: var(--amber); }
.page-hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 18px;
  max-width: 880px;
}
.page-hero h1 .grad {
  background: linear-gradient(100deg, #E8DAFF 0%, #B691FF 30%, #8B5BFF 60%, #6C3BF4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-hero h1 .grad-amber {
  background: linear-gradient(100deg, #FFE0A6 0%, #F7C96B 35%, #E2A248 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-hero p.lead {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 680px;
  line-height: 1.55;
  margin: 0 0 8px;
}
.page-hero .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Article body — for legal/policy long-form */
.article {
  padding: 16px 0 64px;
  position: relative;
  z-index: 5;
}
.article-inner {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(18,8,48,0.45) 0%, rgba(12,6,36,0.3) 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 44px 48px;
  backdrop-filter: blur(10px);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}
.article-inner h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 36px 0 14px;
}
.article-inner h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 24px 0 8px;
}
.article-inner h2:first-child,
.article-inner h3:first-child { margin-top: 0; }
.article-inner p { margin: 0 0 16px; }
.article-inner ul, .article-inner ol {
  margin: 0 0 18px; padding-left: 22px;
}
.article-inner li { margin-bottom: 8px; }
.article-inner a { color: var(--violet-3); border-bottom: 1px solid rgba(182,145,255,0.3); }
.article-inner a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.article-inner code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--violet-3);
}
.article-inner strong, .article-inner b { color: var(--ink); font-weight: 600; }
.article-inner hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}

/* Voice page — feature-rich layout */
.voice-page-hero {
  padding: 28px 0 56px;
  position: relative;
  z-index: 5;
}
.voice-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.voice-page-img {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(247,201,107,0.3);
  box-shadow:
    0 60px 120px rgba(8,4,24,0.65),
    0 0 0 1px rgba(247,201,107,0.18) inset;
}
.voice-page-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.voice-page-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(8,4,24,0.4));
  pointer-events: none;
}

/* Audio player block — the playable demo */
.audio-take {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(8,4,24,0.55);
  border: 1px solid rgba(247,201,107,0.22);
  margin-bottom: 12px;
}
.audio-take.alt {
  border-color: rgba(139,91,255,0.28);
}
.at-play {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFE0A6, #F7C96B);
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  color: #1A0B40;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  box-shadow: 0 8px 24px rgba(247,201,107,0.4);
}
.audio-take.alt .at-play {
  background: linear-gradient(180deg, #D5BFFF, var(--violet-2));
  color: #fff;
  box-shadow: 0 8px 24px rgba(139,91,255,0.4);
}
.at-play:hover { transform: scale(1.06); }
.at-play:active { transform: scale(0.95); }
.at-play svg { width: 18px; height: 18px; fill: currentColor; }
.at-play.playing svg.icon-play { display: none; }
.at-play svg.icon-pause { display: none; }
.at-play.playing svg.icon-pause { display: block; }
.at-body {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.at-line {
  font-size: 14.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-style: italic;
}
.at-line b {
  color: var(--amber);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.audio-take.alt .at-line b { color: var(--violet-3); }
.at-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.at-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Coming-soon style page */
.coming-soon-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 48px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18,8,48,0.65) 0%, rgba(12,6,36,0.4) 100%);
  border: 1px solid rgba(139,91,255,0.22);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.coming-soon-card::before {
  content: '';
  position: absolute;
  top: -30%; left: 50%;
  width: 600px; height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 50%, rgba(139,91,255,0.3), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.coming-soon-card .badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(247,201,107,0.14);
  border: 1px solid rgba(247,201,107,0.3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 24px;
  position: relative; z-index: 2;
}
.coming-soon-card h1 {
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0 0 16px;
  position: relative; z-index: 2;
}
.coming-soon-card p {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 540px;
  margin: 0 auto 24px;
  line-height: 1.55;
  position: relative; z-index: 2;
}

/* Per-character /c/:slug page */
.cprofile {
  padding: 28px 0 64px;
  position: relative;
  z-index: 5;
}
.cprofile-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.cprofile-card {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(139,91,255,0.22);
  background: #0F0628;
  position: relative;
  box-shadow: 0 60px 120px rgba(8,4,24,0.5);
}
.cprofile-card img {
  width: 100%; aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
}
.cprofile-handle {
  position: absolute;
  top: 18px; left: 18px;
  background: rgba(8,4,24,0.7);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.cprofile-handle b { color: var(--amber); margin-right: 6px; }
.cprofile-passport {
  position: absolute;
  bottom: 18px; left: 18px; right: 18px;
  background: rgba(8,4,24,0.78);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(124,242,168,0.32);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--ink);
}
.cprofile-passport .pp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7CF2A8;
  box-shadow: 0 0 12px #7CF2A8;
  flex: 0 0 auto;
}
.cprofile-passport b { color: #7CF2A8; font-weight: 600; }
.cprofile-body h1 {
  font-size: clamp(40px, 5.4vw, 80px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0 0 8px;
}
.cprofile-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-3);
  margin-bottom: 22px;
}
.cprofile-bio {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 540px;
  margin: 0 0 28px;
}
.cprofile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.cps {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
}
.cps-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.cps-num .num-dim { color: var(--ink-3); font-weight: 400; }
.cps-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cprofile-rights {
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(247,201,107,0.05);
  border: 1px solid rgba(247,201,107,0.22);
  margin-bottom: 24px;
}
.cprofile-rights h4 {
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 10px;
}
.cprofile-rights ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.cprofile-rights li {
  display: flex; gap: 10px; align-items: center;
  font-size: 13.5px;
  color: var(--ink-2);
}
.cprofile-rights li svg {
  width: 14px; height: 14px;
  flex: 0 0 auto;
}
.cprofile-rights li.allow svg { color: #7CF2A8; }
.cprofile-rights li.deny svg { color: #FF8FA0; }

/* Made with charactr stripe */
.mwc-strip {
  margin-top: 28px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(139,91,255,0.06);
  border: 1px solid rgba(139,91,255,0.22);
  font-size: 12.5px;
  color: var(--ink-2);
  display: flex; gap: 12px; align-items: center;
}
.mwc-strip svg {
  width: 22px; height: 22px; flex: 0 0 auto;
  color: var(--violet-3);
}
.mwc-strip b { color: var(--ink); font-weight: 600; }

/* Responsive overrides */
@media (max-width: 900px) {
  .voice-page-grid { grid-template-columns: 1fr; gap: 28px; }
  .cprofile-grid { grid-template-columns: 1fr; gap: 28px; }
  .cprofile-card { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .article-inner { padding: 28px 22px; border-radius: 18px; }
  .article-inner h2 { font-size: 19px; }
  .audio-take { grid-template-columns: 44px 1fr; gap: 12px; padding: 12px 14px; }
  .at-time { display: none; }
  .coming-soon-card { padding: 36px 24px; border-radius: 18px; }
  .cprofile-stats { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════
   v17 — What's next (platform-of-record teaser + Class 42)
   ════════════════════════════════════════════════════════ */

.whats-next {
  padding: 32px 0 80px;
  position: relative;
  z-index: 5;
}
.wn-head {
  text-align: center;
  margin-bottom: 36px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.wn-head h2 {
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 14px 0 14px;
}
.wn-lede {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 auto;
}

.wn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.wn-tile {
  display: block;
  padding: 26px 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,10,52,0.55) 0%, rgba(12,6,36,0.35) 100%);
  border: 1px solid rgba(139,91,255,0.18);
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.wn-tile:hover {
  border-color: rgba(247,201,107,0.45);
  transform: translateY(-3px);
  box-shadow: 0 30px 60px rgba(8,4,24,0.55), 0 0 0 1px rgba(247,201,107,0.18);
}
.wn-tile-static { cursor: default; }
.wn-tile-static:hover {
  border-color: rgba(139,91,255,0.32);
  transform: none;
  box-shadow: none;
}
.wn-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(247,201,107,0.08);
  border: 1px solid rgba(247,201,107,0.22);
  margin-bottom: 16px;
}
.wn-tile h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--ink);
}
.wn-tile p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 48ch;
}
.wn-arrow {
  position: absolute;
  top: 26px; right: 28px;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(247,201,107,0.12);
  border: 1px solid rgba(247,201,107,0.32);
  color: var(--amber);
  font-size: 14px;
  font-weight: 500;
  transition: transform .25s ease, background .25s ease;
}
.wn-tile:hover .wn-arrow {
  background: rgba(247,201,107,0.25);
  transform: translateX(2px);
}
.wn-foot {
  display: flex;
  justify-content: center;
}

@media (max-width: 820px) {
  .wn-grid { grid-template-columns: 1fr; }
  .wn-tile { padding: 22px 22px; }
  .wn-arrow { top: 22px; right: 22px; }
}