/* ================================================================
   viongen.com — AI Video Dubbing Studio
   Design: Cinematic Dark Studio
   Fonts: Syne 800 (headings) · Figtree 400/600 (body)
   ================================================================ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  --void:    #030308;
  --deep:    #070710;
  --surface: #0F0F1C;
  --card:    #141426;
  --card-h:  #1C1C34;

  --violet:  #7B5EA7;
  --vl:      #A78BFA;   /* violet light */
  --cyan:    #22D3EE;
  --pink:    #EC4899;
  --amber:   #F59E0B;
  --green:   #22C55E;

  --grad:       linear-gradient(135deg, #A78BFA 0%, #22D3EE 100%);
  --grad-warm:  linear-gradient(135deg, #A78BFA 0%, #EC4899 100%);
  --grad-text:  linear-gradient(125deg, #C4B5FD 0%, #22D3EE 100%);

  --text:   #F0F4F8;
  --text2:  #8B9EC0;
  --text3:  #475A7A;
  --border: rgba(140,160,200,.1);
  --bord2:  rgba(140,160,200,.18);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --py:  clamp(72px, 9vw, 128px);
  --cw:  1240px;
  --cx:  clamp(20px, 5vw, 64px);

  --hf: 'Syne', sans-serif;
  --bf: 'Figtree', sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--text);
  font-family: var(--bf);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
figure { margin: 0; }

/* ── Film Grain ─────────────────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .038;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.container { max-width: var(--cw); margin: 0 auto; padding: 0 var(--cx); }

/* ══════════════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 16px 0;
  transition: background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(3,3,8,.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: var(--border);
}
.nav__inner {
  max-width: var(--cw); margin: 0 auto; padding: 0 var(--cx);
  display: flex; align-items: center; gap: 28px;
}
.nav__logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--hf); font-size: 20px; font-weight: 800;
  letter-spacing: -.025em; flex-shrink: 0;
}
.nav__mark { flex-shrink: 0; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a {
  font-size: 14px; font-weight: 500; color: var(--text2);
  transition: color .2s; letter-spacing: .01em;
}
.nav__links a:hover { color: var(--text); }
.nav__cta {
  padding: 10px 22px; background: var(--grad); border-radius: 100px;
  font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap;
  transition: opacity .2s, transform .2s; flex-shrink: 0;
}
.nav__cta:hover { opacity: .82; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; padding-top: 80px; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }

/* Ambient orbs */
.hero__orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(90px); opacity: .45;
}
.hero__orb--1 {
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(123,94,167,.22) 0%, transparent 68%);
  top: -200px; right: -180px;
}
.hero__orb--2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(34,211,238,.14) 0%, transparent 68%);
  bottom: -80px; left: 4%;
}

/* Waveform bars */
.waveform {
  position: absolute; bottom: 0; left: 0; right: 0; height: 200px;
  display: flex; align-items: flex-end; gap: 2px;
  opacity: .1; pointer-events: none; overflow: hidden;
}
.wb {
  flex: 1; border-radius: 2px 2px 0 0; background: var(--grad);
  animation: wbPulse var(--d,2.2s) ease-in-out infinite;
  animation-delay: var(--dl,0s); transform-origin: bottom;
}
@keyframes wbPulse {
  0%, 100% { transform: scaleY(var(--s0, .15)); }
  50%       { transform: scaleY(var(--s1, .75)); }
}

/* Floating language labels */
.float-field { position: absolute; inset: 0; pointer-events: none; }
.fl {
  position: absolute; font-size: 12px; font-weight: 500; color: var(--text3);
  pointer-events: none; opacity: 0;
  animation: flFloat var(--d,8s) ease-in-out infinite;
  animation-delay: var(--dl,0s);
}
@keyframes flFloat {
  0%   { opacity: 0; transform: translateY(12px); }
  15%  { opacity: .65; }
  85%  { opacity: .65; }
  100% { opacity: 0; transform: translateY(-28px); }
}

/* Hero grid */
.hero__content {
  position: relative; z-index: 1;
  max-width: var(--cw); margin: 0 auto; padding: var(--py) var(--cx);
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.hero__text { display: flex; flex-direction: column; gap: 24px; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 100px; width: fit-content;
  background: rgba(123,94,167,.16); border: 1px solid rgba(123,94,167,.32);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--vl);
}
.hero__badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--vl);
  animation: dotBeat 2s ease-in-out infinite;
}
@keyframes dotBeat {
  0%, 100% { opacity:1; transform:scale(1); }
  50%       { opacity:.35; transform:scale(.65); }
}

.hero__title {
  font-family: var(--hf);
  font-size: clamp(44px, 5.4vw, 78px);
  font-weight: 800; line-height: 1.04; letter-spacing: -.035em;
}
.hero__accent {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: inline-block;
}
.hero__sub {
  font-size: clamp(15px,1.4vw,19px); color: var(--text2);
  line-height: 1.72; max-width: 440px;
}
.hero__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--text3);
}

/* ── App Store Button ─────────────────────────────────────────── */
.btn-store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 26px; background: var(--text); color: #050508;
  border-radius: var(--r-md); font-family: var(--bf); font-weight: 600;
  transition: transform .2s, box-shadow .2s;
}
.btn-store__text { display: flex; flex-direction: column; line-height: 1.2; }
.btn-store__text small {
  font-size: 10px; font-weight: 400; opacity: .55;
  text-transform: uppercase; letter-spacing: .06em;
}
.btn-store__text > *:last-child { font-size: 17px; font-weight: 700; }
.btn-store:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 32px rgba(167,139,250,.2);
}
.btn-store--xl { padding: 17px 34px; }
.btn-store--xl .btn-store__text > *:last-child { font-size: 20px; }

/* ── Ghost Button ─────────────────────────────────────────────── */
.btn-ghost {
  font-size: 14px; font-weight: 500; color: var(--text2);
  padding: 13px 16px; transition: color .2s;
}
.btn-ghost:hover { color: var(--text); }

/* ── Primary Button ───────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; background: var(--grad); color: #fff;
  border-radius: var(--r-md); font-weight: 600; font-size: 15px;
  transition: opacity .2s, transform .2s;
}
.btn-primary:hover { opacity: .85; transform: translateY(-2px); }

/* ── Outline Button ───────────────────────────────────────────── */
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border: 1px solid var(--bord2);
  color: var(--text2); border-radius: var(--r-md); font-weight: 600; font-size: 15px;
  transition: border-color .2s, color .2s, background .2s;
}
.btn-outline:hover {
  border-color: rgba(167,139,250,.4); color: var(--text);
  background: rgba(123,94,167,.1);
}

/* ── Hero Promo Image ─────────────────────────────────────────── */
.hero__visual { display: flex; justify-content: center; align-items: center; }
.hero-promo { position: relative; }
.hero-promo__glow {
  position: absolute; inset: -60px;
  background: radial-gradient(ellipse, rgba(123,94,167,.32) 0%, transparent 60%);
  pointer-events: none; z-index: -1;
  animation: glowBreathe 4.5s ease-in-out infinite;
}
@keyframes glowBreathe {
  0%, 100% { opacity: .55; }
  50%       { opacity: 1; }
}
.hero-promo__img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: 0 40px 100px rgba(0,0,0,.75),
              0 0 0 1px rgba(167,139,250,.12);
  animation: promoFloat 7s ease-in-out infinite;
}
@keyframes promoFloat {
  0%, 100% { transform: translateY(0) rotate(.3deg); }
  50%       { transform: translateY(-18px) rotate(-.3deg); }
}

/* ══════════════════════════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════════════════════════ */
.stats-bar {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--deep); padding: 28px 0;
}
.stats-bar__row {
  max-width: var(--cw); margin: 0 auto; padding: 0 var(--cx);
  display: flex; align-items: center; justify-content: center;
}
.stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 16px; }
.stat-item__n {
  font-family: var(--hf); font-size: clamp(28px, 3.5vw, 48px); font-weight: 800; line-height: 1;
  background: var(--grad); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-item__l {
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .1em;
}
.stat-sep { width: 1px; height: 54px; background: var(--border); }

/* ══════════════════════════════════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════════════════════════════════ */
.sect { padding: var(--py) 0; }
.sect__hd { text-align: center; margin-bottom: clamp(40px,6vw,80px); }
.tag {
  display: inline-block; padding: 5px 14px; border-radius: 100px;
  border: 1px solid var(--border); margin-bottom: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vl);
}
.sect__title {
  font-family: var(--hf);
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 800; line-height: 1.08; letter-spacing: -.028em; margin-bottom: 16px;
}
.sect__sub {
  font-size: clamp(14px,1.4vw,18px); color: var(--text2);
  max-width: 580px; margin: 0 auto; line-height: 1.72;
}

/* ══════════════════════════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════════════════════════ */
.features { background: var(--deep); }
.feat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }

.fc {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  overflow: hidden; position: relative;
}
.fc:hover { transform: translateY(-5px); border-color: var(--bord2); }
.fc--star {
  border-color: rgba(123,94,167,.4);
  background: linear-gradient(148deg, rgba(123,94,167,.13) 0%, rgba(34,211,238,.06) 100%), var(--card);
  box-shadow: 0 0 50px rgba(123,94,167,.18);
}
.fc__ribbon {
  position: absolute; top: 18px; right: 18px;
  background: var(--grad-warm); color: #fff;
  padding: 4px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
}
.fc__top { display: flex; align-items: center; justify-content: space-between; }
.fc__icon { font-size: 26px; }
.fc__badge {
  padding: 4px 12px; border-radius: 100px; font-size: 11px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(140,160,200,.1); color: var(--text3);
}
.fc__badge--hot {
  background: rgba(236,72,153,.16); color: var(--pink);
  border: 1px solid rgba(236,72,153,.3);
}
.fc__name { font-family: var(--hf); font-size: 26px; font-weight: 800; letter-spacing: -.022em; }
.fc__desc { font-size: 14px; color: var(--text2); line-height: 1.72; }
.fc__media {
  border-radius: var(--r-md); overflow: hidden;
  margin: 0 -32px; height: 320px;
  background: var(--surface);
  display: flex; justify-content: center; align-items: center;
}
.fc__media img {
  width: auto; max-width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .55s ease;
}
.fc:hover .fc__media img { transform: scale(1.04); }
.fc__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.fc__pills li {
  padding: 5px 12px; background: rgba(140,160,200,.06);
  border: 1px solid var(--border); border-radius: 100px;
  font-size: 12px; color: var(--text2);
}

/* ══════════════════════════════════════════════════════════════════
   VIDEO SECTION
══════════════════════════════════════════════════════════════════ */
.video-sect { background: var(--void); }
.video-wrap {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 0 80px rgba(123,94,167,.12);
  background: #000; max-height: 500px;
}
.video-el { width: 100%; height: auto; display: block; max-height: 500px; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════════
   KARAOKE
══════════════════════════════════════════════════════════════════ */
.karaoke-sect {
  background: var(--deep); position: relative; overflow: hidden;
}
.karaoke-sect::before {
  content: ''; position: absolute;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,.07) 0%, transparent 68%);
  top: -180px; right: -180px; pointer-events: none;
}
.karaoke-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.karaoke-copy { display: flex; flex-direction: column; gap: 20px; }
.karaoke-h, .karaoke-sub { text-align: left; margin: 0; max-width: none; }
.karaoke-note {
  font-size: 13px; color: var(--text3); line-height: 1.65;
  padding: 12px 16px; border-left: 2px solid rgba(236,72,153,.4);
  background: rgba(236,72,153,.06); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.karaoke-fig {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid rgba(236,72,153,.22);
  box-shadow: 0 0 60px rgba(236,72,153,.12);
}
.karaoke-fig img { width: 100%; max-height: 480px; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════════
   VOICES
══════════════════════════════════════════════════════════════════ */
.voices-sect { background: var(--void); }
.voices-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 40px; }

.vc {
  background: var(--card); border-radius: var(--r-xl); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .3s; position: relative; overflow: hidden;
}
.vc:hover { transform: translateY(-4px); }
.vc--free   { border: 1px solid rgba(34,197,94,.25); }
.vc--gemini { border: 1px solid rgba(236,72,153,.25); }
.vc--openai { border: 1px solid rgba(34,211,238,.25); }

.vc__badge {
  display: inline-block; padding: 4px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; width: fit-content;
}
.vc__badge--free {
  background: rgba(34,197,94,.16); color: var(--green);
  border: 1px solid rgba(34,197,94,.3);
}
.vc__badge--premium {
  background: rgba(236,72,153,.16); color: var(--pink);
  border: 1px solid rgba(236,72,153,.3);
}
.vc__name { font-family: var(--hf); font-size: 22px; font-weight: 800; letter-spacing: -.015em; }
.vc__count {
  font-family: var(--hf); font-size: 38px; font-weight: 800; line-height: 1;
  background: var(--grad); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.vc__desc { font-size: 14px; color: var(--text2); line-height: 1.68; }
.vc__feats { display: flex; flex-direction: column; gap: 8px; }
.vc__feats li { font-size: 13px; color: var(--text2); }
.vc__img { border-radius: var(--r-md); overflow: hidden; margin-top: auto; }
.vc__img img {
  width: 100%; height: 380px;
  object-fit: contain; background: var(--surface);
  border-radius: var(--r-sm);
}

.voices-showcase {
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border);
  max-height: 480px; background: var(--surface);
  display: flex; justify-content: center;
}
.voices-showcase img { width: auto; max-width: 100%; height: auto; max-height: 480px; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════════
   LANGUAGES
══════════════════════════════════════════════════════════════════ */
.lang-sect { background: var(--deep); overflow: hidden; }
.marquee-wrap {
  overflow: hidden; margin: 0 0 48px;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex; gap: 12px; width: max-content;
  animation: marqScroll 36s linear infinite;
}
@keyframes marqScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.lp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; background: var(--card); border: 1px solid var(--border);
  border-radius: 100px; font-size: 14px; color: var(--text2); white-space: nowrap;
}
.lang-img {
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border);
  background: var(--surface); display: flex; justify-content: center;
  max-height: 400px;
}
.lang-img img { width: auto; max-width: 100%; height: auto; max-height: 400px; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════════
   DEVICES
══════════════════════════════════════════════════════════════════ */
.devices-sect { background: var(--void); }
.devices-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.dev-fig {
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border);
  transition: transform .35s, box-shadow .35s;
}
.dev-fig:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(0,0,0,.55); }
.dev-fig img { width: 100%; display: block; max-height: 320px; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════════════════════════════ */
.how-sect { background: var(--deep); }
.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0; align-items: start;
}
.step {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 36px 28px;
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color .3s, transform .3s;
}
.step:hover { border-color: rgba(123,94,167,.32); transform: translateY(-4px); }
.step__n {
  font-family: var(--hf); font-size: 56px; font-weight: 800; line-height: 1;
  color: var(--card-h); letter-spacing: -.025em;
}
.step__icon { font-size: 30px; }
.step__title { font-family: var(--hf); font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.step__desc { font-size: 14px; color: var(--text2); line-height: 1.72; }
.step__arr {
  display: flex; align-items: center; justify-content: center;
  padding: 0 20px; font-size: 22px; color: var(--text3); padding-top: 56px;
}

/* ══════════════════════════════════════════════════════════════════
   SCREENSHOTS
══════════════════════════════════════════════════════════════════ */
.shots-sect { background: var(--void); }
.shots-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.shots-grid figure {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border);
  transition: transform .4s, box-shadow .4s;
}
.shots-grid figure:nth-child(even) { margin-top: 24px; }
.shots-grid figure:hover { transform: scale(1.03); box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.shots-grid img {
  width: 100%; height: 340px;
  object-fit: contain; background: var(--surface);
}

/* ══════════════════════════════════════════════════════════════════
   PRICING
══════════════════════════════════════════════════════════════════ */
.pricing-sect {
  background: var(--deep); position: relative; overflow: hidden;
}
.pricing-sect::before {
  content: ''; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(123,94,167,.07) 0%, transparent 68%);
  bottom: -200px; left: 50%; transform: translateX(-50%); pointer-events: none;
}
.plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: start; }

.plan {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
  position: relative; transition: transform .3s, box-shadow .3s;
}
.plan:hover { transform: translateY(-4px); }
.plan--hero {
  border-color: rgba(123,94,167,.48);
  background: linear-gradient(155deg, rgba(123,94,167,.14) 0%, rgba(34,211,238,.06) 100%), var(--card);
  box-shadow: 0 0 64px rgba(123,94,167,.22);
  transform: scale(1.025);
}
.plan--hero:hover { transform: scale(1.025) translateY(-4px); }
.plan__ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff;
  padding: 5px 20px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
}
.plan__tier {
  font-family: var(--hf); font-size: 17px; font-weight: 700;
  color: var(--text2); letter-spacing: .05em; text-transform: uppercase;
}
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__amt { font-family: var(--hf); font-size: 52px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.plan__per { font-size: 14px; color: var(--text3); }
.plan__blurb {
  font-size: 14px; color: var(--text2); line-height: 1.65;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.plan__list { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan__list li { font-size: 14px; color: var(--text2); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════
   FINAL CTA
══════════════════════════════════════════════════════════════════ */
.cta-sect {
  padding: var(--py) 0; background: var(--void);
  border-top: 1px solid var(--border);
}
.cta-inner {
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.cta-title {
  font-family: var(--hf);
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 800; letter-spacing: -.045em; line-height: 1.02;
  background: var(--grad-text); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.cta-sub { font-size: clamp(15px,1.5vw,20px); color: var(--text2); max-width: 460px; line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════ */
.footer { padding: 64px 0 40px; background: var(--void); border-top: 1px solid var(--border); }
.footer__row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px; flex-wrap: wrap;
}
.footer__logo { font-family: var(--hf); font-size: 23px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 8px; }
.footer__app { font-size: 14px; color: var(--text3); margin-bottom: 16px; }
.footer__copy { font-size: 13px; color: var(--text3); line-height: 1.65; }
.footer__copy small { font-size: 11px; opacity: .7; }
.footer__nav { display: flex; gap: 52px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h4 {
  font-family: var(--hf); font-size: 12px; font-weight: 700; color: var(--text2);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px;
}
.footer__col a { font-size: 14px; color: var(--text3); transition: color .2s; }
.footer__col a:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════════════════
   WALKTHROUGH
══════════════════════════════════════════════════════════════════ */
.wt-sect { background: var(--deep); }
.wt-page-hero { padding-top: clamp(120px, 14vw, 180px); padding-bottom: 0; background: var(--void); }
.nav__link--active { color: var(--vl) !important; }

/* Hero row */
.wt-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
  margin-bottom: 80px;
}
.wt-hero__fig {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 0 60px rgba(123,94,167,.15);
}
.wt-hero__fig img {
  width: 100%; display: block;
  max-height: 440px; object-fit: contain;
}
.wt-hero__body { display: flex; flex-direction: column; gap: 20px; }
.wt-step-tag {
  display: inline-block; padding: 5px 14px; border-radius: 100px;
  border: 1px solid rgba(167,139,250,.3); width: fit-content;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vl);
}
.wt-hero__title {
  font-family: var(--hf); font-size: clamp(26px,3vw,40px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.1;
}
.wt-hero__desc { font-size: 16px; color: var(--text2); line-height: 1.72; }
.wt-bullets { display: flex; flex-direction: column; gap: 8px; }
.wt-bullets li {
  font-size: 14px; color: var(--text2); padding-left: 22px; position: relative;
}
.wt-bullets li::before {
  content: '→'; position: absolute; left: 0; color: var(--vl); font-size: 12px; top: 1px;
}
.wt-bullets--sm li { font-size: 13px; }

/* 4-mode grid */
.wt-modes {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 80px;
}
.wt-mode {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s, border-color .3s;
}
.wt-mode:hover { transform: translateY(-4px); border-color: var(--bord2); }
.wt-mode__fig {
  overflow: hidden; height: 280px;
  background: var(--surface);
  display: flex; justify-content: center; align-items: center;
}
.wt-mode__fig img {
  width: auto; max-width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .55s;
}
.wt-mode:hover .wt-mode__fig img { transform: scale(1.04); }
.wt-mode__body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; }
.wt-mode__num {
  font-family: var(--hf); font-size: 44px; font-weight: 800; line-height: 1;
  color: var(--card-h); letter-spacing: -.025em;
}
.wt-mode__title { font-family: var(--hf); font-size: 22px; font-weight: 800; letter-spacing: -.015em; }
.wt-mode__desc { font-size: 14px; color: var(--text2); line-height: 1.68; }

/* Voice tier row */
.wt-voices-row {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 48px; margin-bottom: 80px;
}
.wt-voices-hd { text-align: center; margin-bottom: 40px; }
.wt-voices-title {
  font-family: var(--hf); font-size: clamp(24px,3vw,38px); font-weight: 800;
  letter-spacing: -.025em; margin: 12px 0;
}
.wt-voices-sub { font-size: 15px; color: var(--text2); }
.wt-voices-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.wt-vf { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.wt-vf img {
  width: 100%; height: 280px;
  object-fit: contain; background: var(--surface); display: block;
}
.wt-vf figcaption {
  text-align: center; padding: 14px 12px;
  font-size: 13px; font-weight: 600; color: var(--text2);
  background: var(--surface);
}

/* Real screenshots */
.wt-real { text-align: center; }
.wt-real .tag { margin-bottom: 16px; }
.wt-real__title {
  font-family: var(--hf); font-size: clamp(22px,2.8vw,34px); font-weight: 800;
  letter-spacing: -.025em; margin-bottom: 12px;
}
.wt-real__sub {
  font-size: 15px; color: var(--text2); line-height: 1.68;
  max-width: 540px; margin: 0 auto 36px;
}
.wt-real__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.wt-real__grid figure {
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border);
  transition: transform .35s, box-shadow .35s;
}
.wt-real__grid figure:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(0,0,0,.55); }
.wt-real__grid img {
  width: 100%; height: 360px;
  object-fit: contain; background: var(--surface);
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
══════════════════════════════════════════════════════════════════ */
[data-animate] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
[data-animate].visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .feat-grid { grid-template-columns: 1fr; }
  .fc__media { height: 280px; }
  .voices-grid { grid-template-columns: 1fr; }
  .vc__img img { height: 320px; }
  .voices-showcase, .voices-showcase img { max-height: 400px; }
  .plans-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .karaoke-inner { grid-template-columns: 1fr; gap: 40px; }
  .karaoke-fig img { max-height: 400px; }
  .steps { grid-template-columns: 1fr; }
  .step__arr { padding: 10px 0; font-size: 18px; transform: rotate(90deg); text-align: center; }
  .devices-grid { grid-template-columns: repeat(2,1fr); }
  .dev-fig img { max-height: 280px; }
  .shots-grid { grid-template-columns: repeat(3,1fr); }
  .shots-grid img { height: 280px; }
  .lang-img, .lang-img img { max-height: 340px; }
  .plan--hero { transform: none; }
  .plan--hero:hover { transform: translateY(-4px); }
  /* Walkthrough */
  .wt-hero { grid-template-columns: 1fr; gap: 32px; }
  .wt-hero__fig img { max-height: 360px; }
  .wt-modes { grid-template-columns: repeat(2,1fr); }
  .wt-mode__fig { height: 240px; }
  .wt-voices-grid { grid-template-columns: repeat(3,1fr); }
  .wt-vf img { height: 240px; }
  .wt-real__grid { grid-template-columns: repeat(3,1fr); }
  .wt-real__grid img { height: 300px; }
}

@media (max-width: 768px) {
  .hero__content { grid-template-columns: 1fr; text-align: center; gap: 36px; }
  .hero__visual { order: -1; }
  .hero-promo__img { max-width: 260px; }
  .hero__sub { max-width: none; }
  .hero__actions { justify-content: center; }
  .hero__meta { justify-content: center; }
  .nav__links { display: none; }
  .stats-bar__row { flex-wrap: wrap; gap: 16px; }
  .stat-sep { display: none; }
  .fc__media { height: 240px; }
  .voices-showcase, .voices-showcase img { max-height: 320px; }
  .lang-img, .lang-img img { max-height: 280px; }
  .footer__row { flex-direction: column; }
  .devices-grid { grid-template-columns: 1fr; }
  .dev-fig img { max-height: 320px; }
  .shots-grid { grid-template-columns: repeat(2,1fr); }
  .shots-grid img { height: 240px; }
  .shots-grid figure:nth-child(even) { margin-top: 0; }
  .karaoke-inner { grid-template-columns: 1fr; }
  .karaoke-h, .karaoke-sub { text-align: center; }
  .karaoke-fig img { max-height: 360px; }
  .video-wrap, .video-el { max-height: 360px; }
  /* Walkthrough */
  .wt-voices-row { padding: 24px 16px; }
  .wt-voices-grid { grid-template-columns: repeat(3,1fr); }
  .wt-vf img { height: 200px; }
  .wt-modes { grid-template-columns: 1fr; }
  .wt-mode__fig { height: 220px; }
  .wt-real__grid { grid-template-columns: repeat(3,1fr); }
  .wt-real__grid img { height: 260px; }
  .wt-page-hero { padding-top: 100px; }
}

@media (max-width: 480px) {
  .hero-promo__img { max-width: 220px; }
  .fc { padding: 20px; }
  .fc__media { margin: 0 -20px; height: 200px; }
  .fc__name { font-size: 22px; }
  .vc { padding: 24px; }
  .vc__count { font-size: 30px; }
  .vc__img img { height: 280px; }
  .voices-showcase, .voices-showcase img { max-height: 240px; }
  .shots-grid { grid-template-columns: 1fr; }
  .shots-grid img { height: 280px; }
  .plan { padding: 24px; }
  .plan__amt { font-size: 40px; }
  .step { padding: 24px 20px; }
  .step__n { font-size: 42px; }
  .lang-img, .lang-img img { max-height: 240px; }
  .dev-fig img { max-height: 280px; }
  .karaoke-fig img { max-height: 300px; }
  /* Walkthrough */
  .wt-hero__fig img { max-height: 300px; }
  .wt-mode__fig { height: 200px; }
  .wt-voices-grid { grid-template-columns: 1fr; }
  .wt-vf img { height: 240px; }
  .wt-real__grid { grid-template-columns: 1fr; }
  .wt-real__grid img { height: 320px; }
  .wt-mode__body { padding: 20px 20px 24px; }
  .wt-mode__num { font-size: 34px; }
  .wt-mode__title { font-size: 19px; }
}