/* ═══════════════════════════════════════════════════
   TOKENS — LIGHT & DARK
═══════════════════════════════════════════════════ */
:root, [data-theme="light"] {
  --bg:       #f4f2ed;
  --card:     #ffffff;
  --border:   #d8d4cc;
  --border2:  #c8c3b8;
  --text:     #1a1829;
  --text2:    #3a3850;
  --muted:    #7a7690;
  --accent:   #e8234f;
  --accent2:  #d4870a;
  --accent3:  #0099bb;
  --accent4:  #8b3dc8;
  --green:    #16a34a;
  --glow:     rgba(232,35,79,.25);
  --glow2:    rgba(212,135,10,.22);
  --glow3:    rgba(0,153,187,.22);
  --glow4:    rgba(139,61,200,.22);
  --nav-bg:   rgba(244,242,237,.92);
  --shadow:   0 2px 16px rgba(26,24,41,.10);
  --shadow-lg:0 8px 40px rgba(26,24,41,.15);
}
[data-theme="dark"] {
  --bg:       #0a0a0f;
  --card:     #16161f;
  --border:   #2a2a3a;
  --border2:  #363648;
  --text:     #f0eff5;
  --text2:    #c8c6d8;
  --muted:    #6b6b88;
  --accent:   #ff3c6e;
  --accent2:  #ffb347;
  --accent3:  #00d4ff;
  --accent4:  #a855f7;
  --green:    #22c55e;
  --glow:     rgba(255,60,110,.35);
  --glow2:    rgba(255,179,71,.28);
  --glow3:    rgba(0,212,255,.28);
  --glow4:    rgba(168,85,247,.28);
  --nav-bg:   rgba(10,10,15,.9);
  --shadow:   0 2px 16px rgba(0,0,0,.5);
  --shadow-lg:0 8px 40px rgba(0,0,0,.65);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html,body { height:100%; overflow:hidden }
body {
  background:var(--bg); color:var(--text);
  font-family:'Space Mono','Courier New',Courier,monospace;
  transition:background .4s, color .4s;
}

/* ── GRAIN overlay ── */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ── AMBIENT ── */
.bg-ambient { position:fixed; inset:0; pointer-events:none; z-index:0 }
.bg-ambient span { position:absolute; border-radius:50%; filter:blur(140px); animation:pulse-bg 9s ease-in-out infinite alternate }
[data-theme="light"] .bg-ambient span { opacity:.07 }
[data-theme="dark"]  .bg-ambient span { opacity:.13 }
.bg-ambient span:nth-child(1){width:550px;height:550px;background:var(--accent);top:-150px;left:-150px}
.bg-ambient span:nth-child(2){width:480px;height:480px;background:var(--accent2);bottom:-100px;right:-100px;animation-delay:3s}
.bg-ambient span:nth-child(3){width:380px;height:380px;background:var(--accent3);top:40%;left:45%;animation-delay:1.5s}
@keyframes pulse-bg { from{transform:scale(1) translate(0,0)} to{transform:scale(1.18) translate(16px,-16px)} }

/* ═══════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:0 min(4vw,44px); height:72px;
  background:var(--nav-bg); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);
  transform:translateY(-100%);
  animation:nav-drop .7s cubic-bezier(.22,1,.36,1) .2s forwards;
  transition:background .4s,border-color .4s;
}
@keyframes nav-drop { to{transform:translateY(0)} }

.nav-logo {
  font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif; font-size:24px; letter-spacing:3px;
  color:var(--text); text-decoration:none; display:flex; align-items:center; gap:9px;
  justify-self:start;
}
.logo-dot {
  width:9px; height:9px; background:var(--accent); border-radius:50%;
  box-shadow:0 0 10px var(--glow); animation:blink 2s ease-in-out infinite;
}
@keyframes blink {
  0%,100%{opacity:1;box-shadow:0 0 10px var(--glow)}
  50%{opacity:.35;box-shadow:0 0 4px var(--glow)}
}

.nav-right {
  display:flex; align-items:center; gap:16px; justify-self:end;
}

/* ── THEME TOGGLE ── */
.theme-toggle {
  display:flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--border); padding:7px 14px; cursor:pointer;
  font-family:'Space Mono','Courier New',Courier,monospace; font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); transition:all .3s;
}
.theme-toggle:hover { border-color:var(--accent); color:var(--text) }
.toggle-track {
  width:34px; height:18px; background:var(--border); border-radius:9px;
  position:relative; transition:background .3s; flex-shrink:0;
}
.toggle-thumb {
  position:absolute; top:3px; left:3px; width:12px; height:12px;
  border-radius:50%; background:var(--muted); transition:all .3s;
}
[data-theme="dark"] .toggle-track { background:var(--accent) }
[data-theme="dark"] .toggle-thumb { left:19px; background:#fff }

/* ── NAV CTA ── */
.nav-cta {
  font-family:'Space Mono','Courier New',Courier,monospace; font-size:10px; letter-spacing:2px;
  text-transform:uppercase; padding:9px 20px; background:transparent;
  border:1.5px solid var(--accent); color:var(--accent); cursor:pointer;
  transition:all .3s; position:relative; overflow:hidden;
}
.nav-cta::before {
  content:''; position:absolute; inset:0; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1); z-index:-1;
}
.nav-cta:hover { color:var(--bg) }
.nav-cta:hover::before { transform:scaleX(1) }

/* ═══════════════════════════════════════════════════
   LANGUAGE SELECTOR
═══════════════════════════════════════════════════ */
.lang-selector {
  position:relative; justify-self:center;
}
.lang-current {
  display:flex; align-items:center; gap:8px; padding:8px 16px;
  background:var(--card); border:1.5px solid var(--border);
  cursor:pointer; font-family:'Space Mono','Courier New',Courier,monospace; font-size:11px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--text);
  transition:all .3s; box-shadow:var(--shadow);
}
.lang-current:hover { border-color:var(--accent) }
.lang-flag { font-size:18px; line-height:1 }
.lang-code { font-weight:700 }
.lang-arrow { color:var(--muted); font-size:10px; transition:transform .3s }
.lang-selector.open .lang-arrow { transform:rotate(180deg) }

.lang-dropdown {
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--card); border:1.5px solid var(--border);
  box-shadow:var(--shadow-lg); z-index:2000; min-width:160px;
  opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-8px);
  transition:opacity .25s ease, transform .25s ease;
}
.lang-selector.open .lang-dropdown {
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.lang-dropdown button {
  width:100%; display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:transparent; border:none; border-bottom:1px solid var(--border);
  cursor:pointer; font-family:'Space Mono','Courier New',Courier,monospace; font-size:11px;
  letter-spacing:1px; color:var(--text2); transition:all .2s;
}
.lang-dropdown button:last-child { border-bottom:none }
.lang-dropdown button:hover { background:var(--border); color:var(--text) }
.ldf { font-size:20px; line-height:1 }

/* ═══════════════════════════════════════════════════
   RIGHT STEP NAVIGATION
═══════════════════════════════════════════════════ */
.step-nav {
  position:fixed; right:24px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  z-index:800; opacity:0; pointer-events:none;
  transition:opacity .5s ease, transform .5s ease;
}
.step-nav.visible { opacity:1; pointer-events:auto }

.snav-btn {
  width:38px; height:38px; border-radius:50%;
  background:var(--card); border:1.5px solid var(--border);
  font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif; font-size:14px; letter-spacing:1px;
  color:var(--muted); cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:all .3s cubic-bezier(.22,1,.36,1);
  box-shadow:var(--shadow); position:relative;
}
.snav-btn:hover:not(.locked) { border-color:var(--accent); color:var(--text); transform:scale(1.1) }
.snav-btn.active {
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 0 16px var(--glow), var(--shadow);
  transform:scale(1.15);
}
.snav-btn.locked { opacity:.28; cursor:not-allowed; pointer-events:none }
.snav-btn[data-sec="end"] { font-size:12px }

/* tooltip */
.snav-btn::after {
  content:attr(data-label); position:absolute; right:calc(100% + 10px);
  white-space:nowrap; background:var(--card); border:1px solid var(--border);
  padding:4px 10px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text2); opacity:0; transition:opacity .2s; pointer-events:none;
  box-shadow:var(--shadow);
}
.snav-btn:hover::after { opacity:1 }

.snav-line { width:1px; height:20px; background:var(--border) }

/* ═══════════════════════════════════════════════════
   SECTIONS SYSTEM
═══════════════════════════════════════════════════ */
#secWrapper {
  position:fixed; top:72px; left:0; right:0; bottom:0;
  overflow:hidden;
}
.sec {
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  opacity:0; transform:translateY(18px);
  pointer-events:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.sec.active {
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.sec.exit-up   { opacity:0; transform:translateY(-18px) }
.sec.exit-down { opacity:0; transform:translateY(18px) }

/* ── Section inner layout ── */
.sec-content {
  min-height:100%; display:flex; align-items:center;
  padding:40px min(5vw,56px) 40px min(5vw,56px);
  max-width:1100px; margin:0 auto;
}
.sec-inner {
  display:flex; align-items:center; gap:48px;
  width:100%;
}
.sec-left { flex:1; min-width:0 }
.sec-right {
  width:200px; min-width:200px; flex-shrink:0;
  opacity:0; transform:translateX(60px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1) .3s, transform .8s cubic-bezier(.22,1,.36,1) .3s;
}
.sec.active .sec-right { opacity:1; transform:translateX(0) }

/* ── Step visual box ── */
.step-visual {
  width:200px; height:200px; border:1px solid var(--border);
  background:var(--card); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  position:relative; overflow:hidden; box-shadow:var(--shadow);
  transition:background .4s, border-color .4s;
}
[data-theme="light"] .step-visual::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(232,35,79,.05) 0%,transparent 70%);
}
[data-theme="dark"] .step-visual::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,60,110,.08) 0%,transparent 70%);
}
.step-visual svg { width:120px; height:120px; position:relative; z-index:1 }
.visual-label {
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
  text-align:center; padding:0 16px; line-height:1.7; position:relative; z-index:1;
}

/* ── Step visual media (image + audio hover) ── */
.step-visual-media {
  width:200px; position:relative; border-radius:4px;
  overflow:hidden; cursor:pointer; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.step-visual-img {
  width:200px; height:200px; object-fit:cover; display:block;
  transition:transform .45s cubic-bezier(.22,1,.36,1), filter .3s;
  filter:brightness(.85) saturate(1.1);
}
.step-visual-media:hover .step-visual-img,
.step-visual-media.playing .step-visual-img {
  transform:scale(1.06);
  filter:brightness(1) saturate(1.3);
}
.step-visual-overlay {
  position:absolute; top:0; left:0; width:200px; height:200px;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.08) 55%,transparent 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:14px; gap:6px; pointer-events:none;
}
.step-visual-hint {
  font-family:'Space Mono','Courier New',Courier,monospace; font-size:10px;
  letter-spacing:.12em; color:rgba(255,255,255,.75);
  text-transform:uppercase; opacity:0; transform:translateY(5px);
  transition:opacity .25s, transform .25s;
}
.step-visual-media:hover .step-visual-hint {
  opacity:1; transform:translateY(0);
}
.step-visual-wave {
  display:flex; align-items:center; gap:2.5px; height:18px;
  opacity:0; transition:opacity .2s;
}
.step-visual-media.playing .step-visual-wave { opacity:1; }
.step-visual-wave span {
  display:block; width:3px; background:#fff; border-radius:2px;
  animation:wave 1s ease-in-out infinite;
}
.step-visual-wave span:nth-child(1){height:5px;animation-delay:0s}
.step-visual-wave span:nth-child(2){height:11px;animation-delay:.1s}
.step-visual-wave span:nth-child(3){height:18px;animation-delay:.2s}
.step-visual-wave span:nth-child(4){height:11px;animation-delay:.3s}
.step-visual-wave span:nth-child(5){height:7px;animation-delay:.4s}
.step-visual-wave span:nth-child(6){height:14px;animation-delay:.15s}
.step-visual-wave span:nth-child(7){height:9px;animation-delay:.25s}
.step-visual-media .visual-label {
  position:relative; z-index:2; padding:8px 10px 0;
  background:transparent;
}

/* ── Section labels & titles ── */
.section-label { display:flex; align-items:center; gap:14px; margin-bottom:12px }
.section-label span { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--accent); font-weight:700 }
.section-label::before { content:''; width:26px; height:1.5px; background:var(--accent) }
.section-title {
  font-family:'DM Serif Display','Georgia',serif; font-size:clamp(28px,3.8vw,46px);
  line-height:1.1; margin-bottom:38px; color:var(--text);
}
.section-title em { font-style:italic; color:var(--accent2) }

/* ═══════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════ */
.hero {
  min-height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:60px min(5vw,60px); position:relative;
}
.hero-eyebrow {
  font-size:11px; letter-spacing:5px; text-transform:uppercase; color:var(--accent);
  margin-bottom:22px; opacity:0; animation:fade-up .7s ease .7s forwards;
  display:flex; align-items:center; gap:16px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content:''; width:36px; height:1px; background:var(--accent); opacity:.5;
}
.hero-eyebrow::after { background:var(--accent) }
.hero-title {
  font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif; font-size:clamp(68px,12vw,150px);
  line-height:.92; letter-spacing:4px; margin-bottom:26px; overflow:hidden;
}
.hero-title .line {
  display:block; opacity:0; transform:translateY(100%);
  animation:line-reveal .9s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-title .line:nth-child(1) { animation-delay:.9s; color:var(--text) }
.hero-title .line.accent-line  { animation-delay:1.05s; color:var(--accent); text-shadow:0 0 30px var(--glow) }
.hero-title .line.outline-line {
  animation-delay:1.2s;
  -webkit-text-stroke:1.5px var(--border2); -webkit-text-fill-color:transparent;
}
@keyframes line-reveal { to{opacity:1;transform:translateY(0)} }
.hero-sub {
  font-size:20px; color:var(--muted); max-width:540px; line-height:1.9;
  margin-bottom:28px; opacity:0; animation:fade-up .7s ease 1.55s forwards;
}
.hero-desc {
  max-width:580px; margin-bottom:36px; opacity:0; animation:fade-up .7s ease 1.7s forwards;
  border-left:2px solid var(--accent); padding-left:18px; text-align:left;
}
.hero-desc-title {
  font-family:'DM Serif Display','Georgia',serif; font-size:18px; color:var(--text);
  margin-bottom:10px; font-weight:600;
}
.hero-desc p {
  font-size:15px; color:var(--muted); line-height:1.75; margin-bottom:8px;
}
.hero-desc p:last-child { margin-bottom:0; }
.hero-btn {
  font-family:'Space Mono','Courier New',Courier,monospace; font-size:12px; letter-spacing:3px;
  text-transform:uppercase; padding:17px 46px; background:var(--accent);
  border:none; color:#fff; cursor:pointer; position:relative; overflow:hidden;
  transition:all .3s; box-shadow:0 0 32px var(--glow),var(--shadow-lg);
  opacity:0; animation:fade-up .7s ease 1.85s forwards;
}
.hero-btn::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transition:left .5s;
}
.hero-btn:hover::before { left:100% }
.hero-btn:hover { transform:scale(1.04) translateY(-2px); box-shadow:0 0 52px var(--glow),var(--shadow-lg) }
@keyframes fade-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ═══════════════════════════════════════════════════
   VOICE BUTTONS
═══════════════════════════════════════════════════ */
.voice-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:520px }
.voice-btn {
  position:relative; padding:26px 20px; background:var(--card);
  border:1.5px solid var(--border); cursor:pointer;
  transition:all .4s cubic-bezier(.22,1,.36,1); overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:9px; text-align:left; outline:none; box-shadow:var(--shadow);
}
.voice-btn.duo { grid-column:span 2; flex-direction:row; align-items:center; gap:18px; padding:20px 24px }
.voice-btn.duo .duo-text { flex:1 }
.voice-btn.duo .sound-wave { margin-left:auto }
.voice-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--accent) 0%,transparent 55%);
  opacity:0; transition:opacity .4s;
}
.voice-btn.female::before { background:linear-gradient(135deg,var(--accent3) 0%,transparent 55%) }
.voice-btn.duo::before { background:linear-gradient(135deg,var(--accent4) 0%,var(--accent) 100%) }
.voice-btn:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.voice-btn.duo:hover { border-color:var(--accent4) }
.voice-btn.active { border-color:var(--accent); box-shadow:0 0 26px var(--glow),var(--shadow-lg) }
.voice-btn.female.active { border-color:var(--accent3); box-shadow:0 0 26px var(--glow3),var(--shadow-lg) }
.voice-btn.duo.active { border-color:var(--accent4); box-shadow:0 0 26px var(--glow4),0 0 26px var(--glow),var(--shadow-lg) }
.voice-btn.active::before { opacity:1 }
.voice-icon { font-size:30px; position:relative; z-index:1; transition:transform .4s cubic-bezier(.22,1,.36,1) }
.voice-btn:hover .voice-icon { transform:scale(1.15) rotate(-5deg) }
.voice-name { font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif; font-size:21px; letter-spacing:2px; color:var(--text); position:relative; z-index:1 }
.voice-desc { font-size:11px; color:var(--muted); line-height:1.75; position:relative; z-index:1 }
.voice-check {
  position:absolute; top:11px; right:11px; width:20px; height:20px;
  border-radius:50%; background:var(--accent); display:flex; align-items:center;
  justify-content:center; font-size:10px; color:#fff; opacity:0; transform:scale(0);
  transition:all .3s cubic-bezier(.34,1.56,.64,1); z-index:2;
}
.voice-btn.female .voice-check { background:var(--accent3) }
.voice-btn.duo .voice-check { background:var(--accent4) }
.voice-btn.active .voice-check { opacity:1; transform:scale(1) }
.revoke-hint {
  position:absolute; bottom:8px; right:12px; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); opacity:0; transition:opacity .3s; z-index:2;
}
.voice-btn.active:hover .revoke-hint { opacity:1 }
.sound-wave { display:flex; align-items:center; gap:3px; height:16px; position:relative; z-index:1; opacity:0; transition:opacity .3s }
.voice-btn.active .sound-wave { opacity:1 }
.sound-wave span { display:block; width:3px; background:var(--accent); border-radius:2px; animation:wave 1s ease-in-out infinite }
.voice-btn.female.active .sound-wave span { background:var(--accent3) }
.voice-btn.duo.active .sound-wave span { background:var(--accent4) }
.sound-wave span:nth-child(1){height:5px;animation-delay:0s}
.sound-wave span:nth-child(2){height:11px;animation-delay:.1s}
.sound-wave span:nth-child(3){height:16px;animation-delay:.2s}
.sound-wave span:nth-child(4){height:11px;animation-delay:.3s}
.sound-wave span:nth-child(5){height:7px;animation-delay:.4s}
.sound-wave span:nth-child(6){height:14px;animation-delay:.15s}
.sound-wave span:nth-child(7){height:9px;animation-delay:.25s}
@keyframes wave { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.3)} }

/* ═══════════════════════════════════════════════════
   GENRE / STIL
═══════════════════════════════════════════════════ */
.genre-grid { display:flex; flex-wrap:wrap; gap:10px }
.genre-btn {
  position:relative; padding:11px 20px; background:var(--card);
  border:1.5px solid var(--border); color:var(--text2);
  font-family:'Space Mono','Courier New',Courier,monospace; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; cursor:pointer;
  transition:all .3s cubic-bezier(.22,1,.36,1); overflow:hidden; outline:none;
  box-shadow:var(--shadow);
}
.genre-btn::after {
  content:attr(data-genre); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; font-weight:700;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.genre-btn:nth-child(2)::after{background:var(--accent2)}
.genre-btn:nth-child(3)::after{background:var(--accent3)}
.genre-btn:nth-child(4)::after{background:var(--accent4)}
.genre-btn:nth-child(5)::after{background:var(--green)}
.genre-btn:nth-child(6)::after{background:#dc2626}
.genre-btn:nth-child(7)::after{background:#ea580c}
.genre-btn:nth-child(8)::after{background:#0891b2}
.genre-btn:nth-child(9).active{background:var(--muted);color:var(--fg);box-shadow:0 0 18px rgba(148,163,184,.2)}

/* ── Genre "Sonstige" custom input ── */
.genre-other-wrap {
  display: none;
  margin-top: 12px;
  width: 100%;
  animation: fadeSlideDown .25s ease;
}
.genre-other-wrap.visible { display: block; }

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.genre-other-input {
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font-family: 'Space Mono', monospace;
  font-size: .85rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.genre-other-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow);
}
.genre-other-input::placeholder { color: var(--muted); }

.genre-other-confirm {
  margin-top: 10px;
  width: 100%;
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: 'Space Mono', monospace;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 0 14px var(--glow);
  letter-spacing: .03em;
}
.genre-other-confirm:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 22px var(--glow);
}
.genre-other-confirm:active:not(:disabled) { transform: translateY(0); }
.genre-other-confirm:disabled {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}
.genre-btn:hover::after { transform:translateY(0) }
.genre-btn.active { border-color:transparent; box-shadow:var(--shadow-lg) }
.genre-btn:nth-child(1).active{background:var(--accent);color:#fff;box-shadow:0 0 18px var(--glow)}
.genre-btn:nth-child(2).active{background:var(--accent2);color:#fff;box-shadow:0 0 18px var(--glow2)}
.genre-btn:nth-child(3).active{background:var(--accent3);color:#fff;box-shadow:0 0 18px var(--glow3)}
.genre-btn:nth-child(4).active{background:var(--accent4);color:#fff;box-shadow:0 0 18px var(--glow4)}
.genre-btn:nth-child(5).active{background:var(--green);color:#fff;box-shadow:0 0 18px rgba(22,163,74,.35)}
.genre-btn:nth-child(6).active{background:#dc2626;color:#fff;box-shadow:0 0 18px rgba(220,38,38,.35)}
.genre-btn:nth-child(7).active{background:#ea580c;color:#fff;box-shadow:0 0 18px rgba(234,88,12,.35)}
.genre-btn:nth-child(8).active{background:#0891b2;color:#fff;box-shadow:0 0 18px rgba(8,145,178,.35)}

/* ═══════════════════════════════════════════════════
   VIDEO BUTTONS
═══════════════════════════════════════════════════ */
.video-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:520px }
.video-btn {
  position:relative; padding:26px 20px; background:var(--card);
  border:1.5px solid var(--border); cursor:pointer;
  transition:all .4s cubic-bezier(.22,1,.36,1); overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:9px; text-align:left; outline:none; box-shadow:var(--shadow);
}
.video-btn::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s }
.video-btn.yes-vid::before { background:linear-gradient(135deg,var(--accent4) 0%,transparent 55%) }
.video-btn.no-vid::before  { background:linear-gradient(135deg,var(--accent2) 0%,transparent 55%) }
.video-btn:hover { border-color:var(--accent4); transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.video-btn.no-vid:hover { border-color:var(--accent2) }
.video-btn.yes-vid.active { border-color:var(--accent4); box-shadow:0 0 26px var(--glow4),var(--shadow-lg) }
.video-btn.no-vid.active  { border-color:var(--accent2); box-shadow:0 0 26px var(--glow2),var(--shadow-lg) }
.video-btn.active::before { opacity:1 }
.video-icon { font-size:30px; position:relative; z-index:1; transition:transform .4s cubic-bezier(.22,1,.36,1) }
.video-btn:hover .video-icon { transform:scale(1.15) rotate(-5deg) }
.video-name { font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif; font-size:21px; letter-spacing:2px; color:var(--text); position:relative; z-index:1 }
.video-desc { font-size:11px; color:var(--muted); line-height:1.75; position:relative; z-index:1 }
.video-badge { position:relative; z-index:1; font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border:1.5px solid var(--border); color:var(--muted); transition:all .3s }
.video-btn.yes-vid.active .video-badge { border-color:var(--accent4); color:var(--accent4) }
.video-btn.no-vid.active  .video-badge { border-color:var(--accent2); color:var(--accent2) }
.video-check {
  position:absolute; top:11px; right:11px; width:20px; height:20px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#fff; opacity:0; transform:scale(0);
  transition:all .3s cubic-bezier(.34,1.56,.64,1); z-index:2;
}
.video-btn.yes-vid .video-check { background:var(--accent4) }
.video-btn.no-vid  .video-check { background:var(--accent2) }
.video-btn.active .video-check { opacity:1; transform:scale(1) }
.video-btn .revoke-hint { position:absolute; bottom:8px; right:12px; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); opacity:0; transition:opacity .3s; z-index:2 }
.video-btn.active:hover .revoke-hint { opacity:1 }

/* ═══════════════════════════════════════════════════
   DROP ZONE
═══════════════════════════════════════════════════ */
.drop-zone {
  position:relative; border:2px dashed var(--border2); background:var(--card);
  padding:42px 30px; transition:all .35s cubic-bezier(.22,1,.36,1); cursor:text;
  min-height:200px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; box-shadow:var(--shadow);
}
.drop-zone.drag-over { border-color:var(--accent); background:rgba(232,35,79,.04); box-shadow:0 0 40px var(--glow); transform:scale(1.01) }
.drop-zone.has-content { align-items:flex-start; padding:24px 30px }
.drop-icon { font-size:38px; opacity:.25; transition:all .3s; pointer-events:none }
.drop-zone.drag-over .drop-icon { opacity:.75; transform:scale(1.2) translateY(-8px) }
.drop-zone.has-content .drop-icon { display:none }
.drop-placeholder { text-align:center; pointer-events:none }
.drop-placeholder h3 { font-family:'DM Serif Display','Georgia',serif; font-size:17px; color:var(--text2); margin-bottom:8px }
.drop-placeholder p  { font-size:11px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase }
.drop-zone.has-content .drop-placeholder { display:none }
.drop-textarea { width:100%; min-height:120px; background:transparent; border:none; outline:none; color:var(--text); font-family:'DM Serif Display','Georgia',serif; font-size:16px; line-height:1.8; resize:none; display:none; position:relative; z-index:2 }
.drop-zone.has-content .drop-textarea { display:block }
.drop-tags { display:none; flex-wrap:wrap; gap:8px; margin-top:12px; width:100% }
.drop-zone.has-content .drop-tags { display:flex }
.file-tag { display:flex; align-items:center; gap:7px; padding:4px 11px; background:rgba(232,35,79,.08); border:1px solid rgba(232,35,79,.25); font-size:11px; color:var(--accent) }
.file-tag button { background:none; border:none; color:var(--accent); cursor:pointer; padding:0; font-size:13px; opacity:.6; transition:opacity .2s }
.file-tag button:hover { opacity:1 }
.drop-actions { position:absolute; bottom:14px; right:14px; display:flex; gap:7px }
.drop-zone:not(.has-content) .drop-actions { display:none }
.drop-action-btn { font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:7px 13px; background:transparent; border:1.5px solid var(--border2); color:var(--muted); cursor:pointer; font-family:'Space Mono','Courier New',Courier,monospace; transition:all .2s }
.drop-action-btn:hover { border-color:var(--accent); color:var(--accent) }
.drop-action-btn.primary { border-color:var(--accent); color:var(--accent) }
.drop-action-btn.primary:hover { background:var(--accent); color:#fff }
.drop-zone::before,.drop-zone::after { content:''; position:absolute; width:16px; height:16px; transition:all .4s }
.drop-zone::before { top:-2px; left:-2px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); opacity:0 }
.drop-zone::after  { bottom:-2px; right:-2px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); opacity:0 }
.drop-zone:hover::before,.drop-zone:hover::after,.drop-zone.drag-over::before,.drop-zone.drag-over::after { opacity:1 }
.char-count { position:absolute; bottom:14px; left:30px; font-size:10px; letter-spacing:1px; color:var(--muted); opacity:0; transition:opacity .3s }
.drop-zone.has-content .char-count { opacity:1 }

/* ── Contact fields ── */
.contact-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:20px; max-width:660px }
.field-wrap { display:flex; flex-direction:column; gap:6px }
.field-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-weight:700; display:flex; align-items:center; gap:6px }
.req-badge { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--accent); color:#fff; font-size:9px; font-style:normal; opacity:0; transform:scale(0); transition:all .3s cubic-bezier(.34,1.56,.64,1); flex-shrink:0 }
.field-wrap.error .req-badge { opacity:1; transform:scale(1) }
.field-wrap.error .field-input { border-color:var(--accent) !important; box-shadow:0 0 10px var(--glow) !important }
.field-wrap.error .field-label { color:var(--accent) }
.field-input { background:var(--card); border:1.5px solid var(--border); color:var(--text); font-family:'Space Mono','Courier New',Courier,monospace; font-size:12px; padding:11px 13px; outline:none; transition:all .3s; box-shadow:var(--shadow) }
.field-input::placeholder { color:var(--muted) }
.field-input:focus { border-color:var(--accent); box-shadow:0 0 14px var(--glow) }

/* ═══════════════════════════════════════════════════
   SECTION 5 — Alles bereit
═══════════════════════════════════════════════════ */
.sec-5-content {
  flex-direction:column; align-items:center; text-align:center;
  padding:40px min(5vw,60px); gap:24px; justify-content:center;
  max-width:720px; margin:0 auto; width:100%;
}
.step5-top { margin-bottom:4px }
.step5-ready { font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif; font-size:clamp(32px,5vw,52px); letter-spacing:4px; color:var(--text) }
.step5-sub { font-size:13px; color:var(--muted); margin-top:8px; max-width:380px; margin-left:auto; margin-right:auto; line-height:1.8 }

/* Order flow */
.order-flow { display:flex; align-items:center; flex-wrap:wrap; justify-content:center }
.flow-step { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 16px; border:1.5px solid var(--border); background:var(--card); min-width:108px; text-align:center; box-shadow:var(--shadow) }
.flow-step .fs-icon { font-size:18px }
.flow-step .fs-label { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted) }
.flow-arrow { font-size:14px; color:var(--border2); padding:0 2px }

/* Status bar */
.status-bar { display:flex; gap:20px; flex-wrap:wrap; justify-content:center }
.status-item { display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted) }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--border2); transition:all .4s }
.status-item.done .status-dot { background:var(--green); box-shadow:0 0 7px rgba(22,163,74,.5) }
.status-item.done { color:var(--text) }

/* Summary card */
.summary-card {
  background:var(--card); border:1.5px solid var(--border);
  padding:22px 28px; width:100%; max-width:480px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.summary-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(to right,var(--accent),var(--accent3)) }
.summary-heading { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:8px }
.summary-heading::before { content:''; width:14px; height:1px; background:var(--accent) }
.summary-grid { display:flex; flex-direction:column; gap:0 }
.summary-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border) }
.summary-row:last-child { border-bottom:none }
.summary-lbl { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted) }
.summary-val { font-family:'DM Serif Display','Georgia',serif; font-size:14px; color:var(--muted); font-style:italic; transition:color .4s }
.summary-val.filled { color:var(--text) }
.summary-price-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding-top:14px; border-top:2px solid var(--border);
}
.summary-price-lbl { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted) }
.summary-price-right { display:flex; flex-direction:column; align-items:flex-end; gap:2px }
.summary-price-val { font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif; font-size:30px; letter-spacing:2px; color:var(--accent); opacity:0; transform:scale(.85); transition:all .4s cubic-bezier(.34,1.56,.64,1) }
.summary-price-val.visible { opacity:1; transform:scale(1) }
.summary-price-note { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted) }

/* Submit wrap */
.submit-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:440px }
.submit-btn {
  position:relative; width:100%; padding:20px 48px;
  background:var(--accent); border:none; color:#fff;
  font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif; font-size:21px; letter-spacing:5px;
  cursor:pointer; overflow:hidden; transition:all .35s;
  box-shadow:0 0 40px var(--glow),var(--shadow-lg);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.submit-btn::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); transition:left .5s;
}
.submit-btn:not(.disabled):hover::before { left:100% }
.submit-btn:not(.disabled):hover { transform:translateY(-3px) scale(1.02); box-shadow:0 0 70px var(--glow),var(--shadow-lg) }
.submit-btn:active { transform:scale(.98) }
.submit-btn.disabled { background:var(--border2); color:var(--muted); box-shadow:none; pointer-events:none }
@keyframes btn-pulse { 0%,100%{box-shadow:0 0 40px var(--glow),var(--shadow-lg)} 50%{box-shadow:0 0 90px var(--glow),var(--shadow-lg)} }
.submit-note { font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; text-align:center; line-height:1.9; max-width:360px; transition:opacity .4s }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.footer {
  min-height:100%; display:flex; align-items:center;
  justify-content:center; background:var(--bg);
  border-top:1px solid var(--border);
}
.footer-inner {
  max-width:900px; width:100%; padding:60px min(5vw,56px);
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:center;
}
.footer-logo {
  font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif; font-size:36px; letter-spacing:4px;
  color:var(--text); margin-bottom:10px;
}
.footer-tagline { font-size:13px; color:var(--muted); line-height:1.8 }
.footer-contact { display:flex; flex-direction:column; gap:12px }
.footer-email {
  display:flex; align-items:center; gap:10px; color:var(--accent);
  text-decoration:none; font-size:13px; letter-spacing:.5px; transition:opacity .2s;
}
.footer-email:hover { opacity:.75 }
.footer-social { display:flex; gap:16px; margin-top:16px }
.social-link {
  width:44px; height:44px; background:var(--card); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); text-decoration:none; transition:all .3s; box-shadow:var(--shadow);
}
.social-link svg { width:20px; height:20px }
.social-link:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-3px); box-shadow:0 0 20px var(--glow) }
.footer-rights {
  grid-column:1 / -1; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); text-align:center;
  padding-top:32px; border-top:1px solid var(--border);
}

/* Impressum */
.footer-impressum {
  grid-column:1 / -1;
  text-align:center;
  margin-top:18px;
}
.impressum-toggle {
  background:none; border:none; cursor:pointer;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); padding:4px 12px;
  border-bottom:1px dotted var(--border);
  transition:color .2s;
}
.impressum-toggle:hover,
.impressum-toggle.open { color:var(--accent); }
.impressum-toggle.open::after { content:' ▲'; font-size:9px; }
.impressum-toggle:not(.open)::after { content:' ▼'; font-size:9px; }
.impressum-body {
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  animation:fadeIn .25s ease;
}
.impressum-body p { margin:2px 0; }
.impressum-label { font-weight:600; color:var(--fg); }

/* ═══════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════ */
.toast {
  position:fixed; bottom:32px; left:50%;
  transform:translateX(-50%) translateY(100px);
  background:var(--card); border:1.5px solid var(--accent);
  padding:12px 26px; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent); z-index:9998;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 30px var(--glow),var(--shadow); pointer-events:none;
}
.toast.show { transform:translateX(-50%) translateY(0) }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sec-inner { flex-direction:column }
  .sec-right { width:100%; min-width:0; transform:translateY(30px) }
  .sec.active .sec-right { transform:translateY(0) }
  .voice-grid, .video-grid { grid-template-columns:1fr }
  .voice-btn.duo { grid-column:span 1 }
  .contact-row { grid-template-columns:1fr }
  .footer-inner { grid-template-columns:1fr }
  .step-nav { right:12px }
  .snav-btn { width:32px; height:32px; font-size:12px }
}
@media (max-width: 640px) {
  nav { grid-template-columns:auto 1fr auto }
  .theme-toggle span { display:none }
  .sec-content { padding:30px 16px }
  .sec-5-content { padding:30px 16px }
  .contact-row { grid-template-columns:1fr }
  .lang-current .lang-code { display:none }
  .step-nav { right:8px }
  .snav-btn { width:28px; height:28px; font-size:11px }
  .snav-line { height:12px }
}

/* ═══════════════════════════════════════════════════
   FOOTER CONFIRMATION BOX
═══════════════════════════════════════════════════ */
.footer-confirm {
  grid-column: 1 / -1;
  text-align: center;
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(0,153,187,.1));
  border: 1px solid rgba(22,163,74,.3);
  border-radius: 16px;
  padding: 32px 28px;
  animation: confirm-in .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes confirm-in {
  from { opacity:0; transform:translateY(20px) scale(.97); }
  to   { opacity:1; transform:translateY(0)   scale(1); }
}
.confirm-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: note-bounce 1.2s ease infinite alternate;
}
@keyframes note-bounce {
  from { transform:translateY(0); }
  to   { transform:translateY(-8px); }
}
.confirm-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: .06em;
  color: var(--accent);
  margin: 0 0 10px;
}
.confirm-text {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 20px;
}
.confirm-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.confirm-details span {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: .82rem;
  color: var(--text-muted);
  font-family: 'Space Mono', monospace;
}

/* ── Demo-Button unter Sprachauswahl ── */
.lang-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lang-cta {
  margin-top: 2px;
  font-size: .78rem;
  padding: 6px 14px;
  white-space: nowrap;
}

/* ── Cover-Hinweistext ── */
.cover-hint {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text-muted, #888);
  margin: 6px 0 0;
  opacity: .8;
}

/* ── Demo-Button unterhalb Navbar ── */
.nav-demo-wrap {
  position: fixed;
  top: calc(var(--nav-h, 64px) + 8px);   /* direkt unter der Navbar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  pointer-events: none;                   /* Wrapper selbst nicht klickbar */
}

.nav-demo-btn {
  pointer-events: all;
  font-size: .78rem;
  padding: 6px 20px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0,153,187,.35);
  opacity: .92;
  transition: opacity .2s, transform .2s, box-shadow .2s;
}

.nav-demo-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,153,187,.5);
}