/* =============================================================
   Ultimatespeak — Dark Neon / Cyber
   ============================================================= */

:root{
  --bg: #06070d;
  --bg-2: #0a0c17;
  --bg-3: #0e1120;
  --surface: #10131f;
  --surface-2: #141827;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);

  --text: #e7ebf5;
  --muted: #8a92a8;
  --muted-2: #6b7389;

  --cyan: #00e0ff;
  --violet: #8b5cf6;
  --pink: #ff2d87;
  --accent-grad: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 55%, var(--pink) 110%);
  --accent-grad-soft: linear-gradient(135deg, rgba(0,224,255,.22), rgba(139,92,246,.22));
  --glow-cyan: 0 0 32px rgba(0,224,255,.35);
  --glow-violet: 0 0 32px rgba(139,92,246,.35);

  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.2,.8,.2,1);

  --maxw: 1200px;
  --maxw-narrow: 820px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow-x:hidden;
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
}

/* Background noise + grid */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(0,224,255,.12), transparent 60%),
    radial-gradient(900px 500px at 10% 80%, rgba(255,45,135,.10), transparent 60%),
    linear-gradient(to bottom, var(--bg), var(--bg-2) 40%, var(--bg) 100%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
}

/* Layout */
.container{max-width: var(--maxw); margin:0 auto; padding: 0 24px; position:relative; z-index:1}
.container.narrow{max-width: var(--maxw-narrow)}

a{color:inherit; text-decoration:none}
img,svg,canvas{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

::selection{background: rgba(139,92,246,.45); color:#fff}

/* =============================================================
   Typography
   ============================================================= */
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; font-weight:700; line-height:1.1}
h1{font-size: clamp(2.4rem, 5.4vw, 4.6rem)}
h2{font-size: clamp(1.9rem, 3.6vw, 2.9rem)}
h3{font-size: 1.15rem; letter-spacing:-.01em}
h4{font-size: .9rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted)}
p{margin:0 0 1em}

.grad{
  background: var(--accent-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.eyebrow{
  display:inline-block;
  font: 600 .75rem/1 "JetBrains Mono", monospace;
  letter-spacing:.22em; text-transform:uppercase;
  color: var(--cyan);
  padding: 7px 12px;
  border:1px solid rgba(0,224,255,.3);
  border-radius: 999px;
  background: rgba(0,224,255,.06);
  margin-bottom: 18px;
}

/* =============================================================
   Buttons
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding: 12px 20px;
  border-radius: 12px;
  font: 600 .95rem/1 "Space Grotesk", sans-serif;
  letter-spacing:.01em;
  transition: transform .18s var(--ease-out), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  position:relative; isolation:isolate;
  white-space:nowrap;
}
.btn-lg{padding:16px 26px; font-size:1rem}
.btn-sm{padding:9px 14px; font-size:.85rem}
.btn-block{width:100%}

.btn-primary{
  color:#07131a;
  background: var(--accent-grad);
  box-shadow: 0 10px 30px -10px rgba(0,224,255,.55), 0 2px 10px rgba(139,92,246,.35);
}
.btn-primary:hover{transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(0,224,255,.7), 0 4px 20px rgba(139,92,246,.5)}
.btn-primary:active{transform: translateY(0)}

.btn-ghost{
  color: var(--text);
  background: rgba(255,255,255,.03);
  border:1px solid var(--line-2);
}
.btn-ghost:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22)}

/* =============================================================
   Nav
   ============================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(6,7,13,.6);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled{border-bottom-color: var(--line); background: rgba(6,7,13,.82)}
.nav-inner{display:flex; align-items:center; gap:24px; padding:14px 24px}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.015em; font-size:1.05rem}
.brand-mark{display:inline-flex; filter: drop-shadow(0 0 10px rgba(0,224,255,.35))}
.brand-text .accent{background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent}

.nav-links{display:flex; gap:4px; margin-left:auto}
.nav-links a{
  padding: 8px 14px; border-radius: 10px;
  color: var(--muted);
  font-size:.92rem;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav-links a:hover{color:var(--text); background: rgba(255,255,255,.04)}

.nav-cta{padding:10px 18px}

@media (max-width: 820px){
  .nav-links{display:none}
}

/* =============================================================
   Hero
   ============================================================= */
.hero{
  position:relative; isolation:isolate;
  padding: 100px 0 100px;
  overflow:hidden;
  min-height: 92svh;
  display:flex; align-items:center;
}
.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:.6;
  pointer-events:none;
}
.hero-glow{
  position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width: 900px; height: 900px; z-index:0;
  background: radial-gradient(closest-side, rgba(139,92,246,.35), transparent 70%);
  filter: blur(40px);
  pointer-events:none;
  animation: breathe 8s ease-in-out infinite alternate;
}
@keyframes breathe{from{opacity:.5; transform: translateX(-50%) scale(.95)} to{opacity:.9; transform: translateX(-50%) scale(1.05)}}

.hero-inner{text-align:center}

.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,224,255,.28);
  background: rgba(0,224,255,.06);
  font: 500 .85rem/1 "JetBrains Mono", monospace;
  color: #cfe9ff;
  margin-bottom: 26px;
  box-shadow: var(--glow-cyan);
}
.pulse-dot{width:8px; height:8px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.5; transform:scale(1.35)}}

.hero-title{
  margin-bottom: 22px;
  text-shadow: 0 10px 60px rgba(0,224,255,.12);
}

.hero-sub{
  max-width: 680px; margin: 0 auto 36px;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}
.hero-sub strong{color: var(--text); font-weight:600}

.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom: 54px}

/* Audio wave */
.wave-wrap{
  max-width: 720px; margin: 0 auto 54px;
  padding: 20px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(16,19,31,.5);
  backdrop-filter: blur(10px);
}
.wave-label{display:flex; align-items:center; gap:10px; color:var(--muted); font: 500 .8rem/1 "JetBrains Mono", monospace; margin-bottom:10px; letter-spacing:.1em; text-transform:uppercase}
.live-dot{width:7px; height:7px; border-radius:50%; background:#22ff88; box-shadow:0 0 8px #22ff88; animation:pulse 1.6s infinite}
.wave{width:100%; height:70px; display:block}

/* Hero stats */
.hero-stats{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin:0; padding:0; max-width:900px; margin-inline:auto}
.stat{text-align:center; padding:18px 10px; border-radius:var(--radius); border:1px solid var(--line); background: rgba(16,19,31,.4)}
.stat dt{font: 700 clamp(1.5rem, 2.4vw, 2.1rem)/1 "Space Grotesk", sans-serif; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 6px}
.stat dd{margin:0; color:var(--muted); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase}
@media (max-width:620px){
  .hero-stats{grid-template-columns: repeat(2, 1fr)}
}

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  width: 24px; height: 38px; border-radius: 14px;
  border: 2px solid rgba(255,255,255,.18);
  display: block;
}
.scroll-cue span{
  position:absolute; left:50%; top:7px; transform:translateX(-50%);
  width:4px; height:8px; border-radius:3px; background: var(--cyan);
  animation: cue 1.6s ease-in-out infinite;
}
@keyframes cue{0%{opacity:1; transform:translate(-50%,0)} 100%{opacity:0; transform:translate(-50%,14px)}}

/* =============================================================
   Sections
   ============================================================= */
.section{position:relative; padding: 110px 0; z-index:1}
.section-alt{background: linear-gradient(to bottom, transparent, rgba(10,12,23,.6), transparent)}

.section-head{text-align:center; max-width:720px; margin: 0 auto 60px}
.section-head h2{margin-bottom:14px}
.section-head p{color:var(--muted); font-size:1.05rem}

/* =============================================================
   Features
   ============================================================= */
.feature-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}
.feature{
  position:relative; padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,19,31,.75), rgba(10,12,23,.55));
  transition: transform .3s var(--ease-out), border-color .3s var(--ease), background .3s var(--ease);
  overflow:hidden;
}
.feature::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background: var(--accent-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .3s var(--ease);
  pointer-events:none;
}
.feature:hover{transform: translateY(-4px); border-color: transparent}
.feature:hover::before{opacity:1}
.feature:hover .feature-icon{box-shadow: 0 0 28px rgba(0,224,255,.35)}

.feature-icon{
  width: 46px; height: 46px; border-radius: 12px;
  display:grid; place-items:center;
  background: var(--accent-grad-soft);
  color: var(--cyan);
  margin-bottom: 18px;
  transition: box-shadow .3s var(--ease);
}
.feature-icon svg{width:22px; height:22px}
.feature h3{margin-bottom:8px}
.feature p{color:var(--muted); font-size:.94rem; margin:0}

/* =============================================================
   Konfigurator
   ============================================================= */
.config{
  display:grid; grid-template-columns: 1.4fr .9fr;
  gap:22px;
}
@media (max-width: 920px){
  .config{grid-template-columns: 1fr}
}

.config-main, .price-card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,19,31,.8), rgba(10,12,23,.6));
  padding: 30px;
  position:relative; overflow:hidden;
}
.config-main{padding: 34px}

.label-mini{
  font: 600 .72rem/1 "JetBrains Mono", monospace;
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--muted); margin-bottom: 10px;
}

.slider-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.slider-value{display:flex; align-items:baseline; gap:10px}
.slider-value span{font: 700 2.6rem/1 "Space Grotesk", sans-serif; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.slider-value small{color:var(--muted); font-size:.9rem}

.preset-row{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  padding: 7px 11px; border-radius: 8px;
  border:1px solid var(--line-2);
  font: 600 .78rem/1 "JetBrains Mono", monospace;
  color: var(--muted);
  background: rgba(255,255,255,.02);
  transition: all .15s var(--ease);
}
.chip:hover{color:var(--text); border-color: rgba(0,224,255,.4)}
.chip.active{color:#07131a; background: var(--accent-grad); border-color: transparent}

/* Range */
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--violet) var(--pct, 10%), rgba(255,255,255,.08) var(--pct, 10%));
  border-radius: 999px;
  outline:none; cursor: pointer;
  margin: 10px 0 8px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  border: 3px solid var(--cyan);
  box-shadow: 0 0 20px rgba(0,224,255,.6), 0 2px 8px rgba(0,0,0,.4);
  cursor:grab; transition: transform .15s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover{transform: scale(1.12)}
input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing; transform: scale(1.2)}
input[type="range"]::-moz-range-thumb{
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--cyan);
  box-shadow: 0 0 20px rgba(0,224,255,.6);
  cursor:grab;
}

.slider-scale{
  display:flex; justify-content:space-between;
  font: 500 .72rem/1 "JetBrains Mono", monospace;
  color: var(--muted-2);
  margin-bottom: 24px;
}

.term-row{margin: 22px 0 24px}
.term-pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font: 600 .85rem/1 "Space Grotesk", sans-serif;
  transition: all .15s var(--ease);
}
.pill:hover{color:var(--text); border-color: rgba(0,224,255,.4)}
.pill.active{color:#07131a; background: var(--accent-grad); border-color:transparent}

.inc-list{list-style:none; padding:0; margin: 10px 0 0; display:grid; grid-template-columns: repeat(2, 1fr); gap:10px 20px}
.inc-list li{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.92rem}
.inc-list svg{color: var(--cyan); flex-shrink:0}
@media (max-width:560px){ .inc-list{grid-template-columns:1fr} }

/* Price card */
.price-card{
  background: linear-gradient(180deg, rgba(16,19,31,.9), rgba(10,12,23,.7));
  position:sticky; top: 90px; display:flex; flex-direction:column; gap:14px;
}
.price-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background: var(--accent-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.5;
  pointer-events:none;
}
.price-head{display:flex; justify-content:space-between; align-items:center}
.price-label{color:var(--muted); font: 600 .75rem/1 "JetBrains Mono", monospace; letter-spacing:.18em; text-transform:uppercase}
.price-term{color: var(--muted); font-size:.85rem}
.price{display:flex; align-items:baseline; gap:2px; font: 700 1rem/1 "Space Grotesk"; margin: 4px 0 2px}
.price-cur{font-size: 1.6rem; color:var(--muted)}
#price-main{font-size: 4rem; background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.03em}
.price-dec{font-size: 1.5rem; color: var(--muted)}
.price-sub{min-height: 20px; display:flex; gap:10px; align-items:center}
.strike{text-decoration: line-through; color: var(--muted-2); font-size:.9rem}
.save{color:#22ff88; font: 700 .78rem/1 "JetBrains Mono"; letter-spacing:.1em; padding:3px 8px; border-radius:5px; background: rgba(34,255,136,.1); border:1px solid rgba(34,255,136,.3); text-transform:uppercase}

.trust{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.78rem; justify-content:center; margin-top:4px}

/* =============================================================
   Timeline
   ============================================================= */
.timeline{list-style:none; margin:0; padding: 0; position:relative; max-width: 820px; margin-inline:auto}
.timeline::before{
  content:""; position:absolute; left: 23px; top:0; bottom:0; width:2px;
  background: linear-gradient(to bottom, transparent, var(--cyan) 10%, var(--violet) 50%, var(--pink) 90%, transparent);
  opacity:.6;
}
.tl-item{position:relative; padding: 0 0 36px 68px; min-height:70px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute; left: 14px; top: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 16px rgba(0,224,255,.6);
}
.tl-year{
  display:inline-block; margin-bottom:4px;
  font: 700 .78rem/1 "JetBrains Mono", monospace;
  letter-spacing:.18em; text-transform:uppercase;
  background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tl-body h3{margin-bottom:6px; font-size:1.2rem}
.tl-body p{color:var(--muted); margin:0; font-size:.95rem}

/* =============================================================
   Testimonials
   ============================================================= */
.testi-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px}
.testi{
  margin:0; padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,19,31,.7), rgba(10,12,23,.5));
  position:relative;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease);
}
.testi::before{
  content:"\201C"; position:absolute; top: 8px; left: 20px;
  font: 700 5rem/1 "Space Grotesk";
  background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.3;
}
.testi:hover{transform: translateY(-4px); border-color: var(--line-2)}
.testi blockquote{margin:0 0 14px; font-size:1rem; color:var(--text); line-height:1.55; position:relative}
.testi figcaption{color: var(--muted); font-size:.84rem}
.testi strong{color: var(--text); margin-right:4px}

/* =============================================================
   FAQ
   ============================================================= */
.faq{display:flex; flex-direction:column; gap:10px}
.faq-item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16,19,31,.5);
  overflow:hidden;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.faq-item[open]{border-color: rgba(0,224,255,.35); background: rgba(0,224,255,.03)}
.faq-item summary{
  cursor:pointer;
  padding: 18px 22px;
  font-weight: 600;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.chev{
  width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--ease);
  color: var(--muted); flex-shrink:0;
}
.faq-item[open] .chev{transform: rotate(-135deg); color: var(--cyan)}
.faq-item p{padding: 0 22px 20px; color:var(--muted); margin:0}

/* =============================================================
   Final CTA
   ============================================================= */
.cta-final{padding: 60px 0 120px}
.cta-card{
  text-align:center;
  padding: 60px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,224,255,.3);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(139,92,246,.2), transparent 70%),
    linear-gradient(180deg, rgba(16,19,31,.95), rgba(10,12,23,.85));
  position:relative; overflow:hidden;
}
.cta-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background: var(--accent-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.6; pointer-events:none;
}
.cta-card h2{margin-bottom: 16px}
.cta-card p{color:var(--muted); max-width:540px; margin: 0 auto 30px}

/* =============================================================
   Footer
   ============================================================= */
.footer{border-top:1px solid var(--line); padding:60px 0 24px; background: rgba(6,7,13,.6); position:relative; z-index:2}
.footer-inner{display:grid; grid-template-columns: 1.2fr 2fr; gap:40px}
.foot-tag{color:var(--muted); font-size:.88rem; margin-top:14px; max-width:360px}
.foot-cols{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px}
.foot-cols h4{color:var(--text); font: 600 .78rem/1 "JetBrains Mono", monospace; letter-spacing:.18em; text-transform:uppercase; margin-bottom: 14px}
.foot-cols a{display:block; color:var(--muted); font-size:.9rem; padding: 5px 0; transition: color .15s var(--ease)}
.foot-cols a:hover{color: var(--cyan)}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top: 40px; margin-top: 40px; border-top:1px solid var(--line); color:var(--muted-2); font-size:.78rem}
@media (max-width: 760px){
  .footer-inner{grid-template-columns: 1fr}
  .foot-cols{grid-template-columns: repeat(3, 1fr)}
}
@media (max-width: 500px){
  .foot-cols{grid-template-columns: 1fr 1fr}
}

/* =============================================================
   Sound toggle
   ============================================================= */
.sound-toggle{
  position:fixed; bottom: 22px; right: 22px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(16,19,31,.9);
  border: 1px solid var(--line-2);
  color: var(--muted);
  display:grid; place-items:center;
  backdrop-filter: blur(10px);
  transition: all .2s var(--ease);
}
.sound-toggle:hover{color: var(--cyan); border-color: rgba(0,224,255,.5); box-shadow: 0 0 20px rgba(0,224,255,.3)}
.sound-toggle .icon-sound-off{display:none}
.sound-toggle.muted .icon-sound-on{display:none}
.sound-toggle.muted .icon-sound-off{display:block}

/* =============================================================
   Cookie
   ============================================================= */
.cookie{
  position:fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 70;
  max-width: 640px; width: calc(100% - 32px);
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(10,12,23,.96);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  animation: cookie-in .4s var(--ease-out);
}
@keyframes cookie-in{from{opacity:0; transform:translate(-50%, 20px)} to{opacity:1; transform: translate(-50%, 0)}}
.cookie-inner{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.cookie p{margin:0; font-size:.86rem; color:var(--muted); flex:1 1 300px; line-height:1.5}
.cookie a{color: var(--cyan); text-decoration: underline; text-underline-offset:3px}

/* =============================================================
   Reveal / scroll animations
   ============================================================= */
[data-reveal]{
  opacity:0; transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: transform, opacity;
}
[data-reveal].in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important; animation-iteration-count:1 !important}
  [data-reveal]{opacity:1; transform:none}
  .hero-glow,.pulse-dot,.live-dot{animation:none}
}