/* ================================================
   CS PRODUCTIONS 04 – MAIN STYLES
   Blau → Lila · Cinematic Dark · Premium Feel
   ================================================ */

:root {
  /* Core Palette */
  --primary:      #0b9cd9;
  --primary-2:    #38bdf8;
  --primary-3:    #7dd3fc;
  --secondary:    #22c55e;
  --secondary-2:  #4ade80;

  /* Purple/Violet Palette */
  --purple:       #a855f7;
  --purple-2:     #c084fc;
  --purple-3:     #e879f9;
  --purple-dim:   rgba(168,85,247,0.14);
  --purple-glow:  rgba(168,85,247,0.22);

  /* Gradient Stops (Blau → Lila) */
  --grad-0:   #040916;   /* tiefstes Nacht-Blau */
  --grad-1:   #060b1d;
  --grad-2:   #080e28;
  --grad-3:   #0b1035;   /* dunkles Indigo */
  --grad-4:   #130a2e;   /* Übergang zu Lila */
  --grad-5:   #1e0b3a;
  --grad-6:   #2d0d4e;
  --grad-7:   #3b0f5e;   /* sattes Tief-Lila */
  --grad-8:   #4a126e;
  --grad-9:   #5c1585;   /* End-Lila */

  /* Surfaces – lila angepasst */
  --surface:    #100a22;
  --surface-2:  #18103a;
  --surface-3:  #201548;

  /* Text */
  --text:       #f0eeff;
  --text-soft:  #b8aede;
  --text-muted: #7060a0;

  /* Borders */
  --border:     rgba(255,255,255,0.08);
  --border-2:   rgba(255,255,255,0.15);

  /* Radien */
  --radius-xl:   28px;
  --radius-lg:   22px;
  --radius-md:   18px;
  --radius-sm:   12px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-dark:  0 24px 64px rgba(0,0,0,0.55);
  --shadow-glow:  0 0 0 1px rgba(168,85,247,0.12), 0 30px 80px rgba(11,156,217,0.16);
  --shadow-purple: 0 0 0 1px rgba(168,85,247,0.18), 0 20px 60px rgba(168,85,247,0.2);

  /* Easing */
  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --ease-snappy: cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth: cubic-bezier(0.4,0,0.2,1);

  --content-width: 1120px;
}

/* ── RESET ───────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Outfit", system-ui, sans-serif;
  /*
   * EINZIGER HINTERGRUND für die gesamte Seite.
   * Alle Sections sind transparent – Farbe kommt nur von hier.
   *
   * Struktur:
   *  – Oben:  Tief-Nachtblau (#040916)
   *  – Mitte: Fließt durch Indigo → Dunkel-Lila
   *  – Unten: Sattes Tief-Lila (#4a126e)
   *
   * Darüber liegen radiale Glüh-Overlays für Tiefe.
   */
  background:
    /* Blauer Leuchtpunkt oben links */
    radial-gradient(ellipse 90% 50% at 0% 5%,
      rgba(11,156,217,0.18) 0%, transparent 55%),
    /* Cyan-Akzent Mitte links */
    radial-gradient(ellipse 60% 40% at 8% 38%,
      rgba(56,189,248,0.10) 0%, transparent 50%),
    /* Lila Leuchtpunkt Mitte rechts */
    radial-gradient(ellipse 80% 60% at 100% 55%,
      rgba(168,85,247,0.20) 0%, transparent 55%),
    /* Tiefes Lila unten */
    radial-gradient(ellipse 120% 50% at 50% 100%,
      rgba(92,21,133,0.55) 0%, transparent 65%),
    /* Magenta-Schimmer Mitte */
    radial-gradient(ellipse 70% 35% at 75% 72%,
      rgba(192,38,211,0.12) 0%, transparent 50%),
    /* Grüner Akzent oben rechts – subtil */
    radial-gradient(ellipse 50% 30% at 92% 8%,
      rgba(34,197,94,0.07) 0%, transparent 45%),
    /* Basis-Verlauf: Blau → Indigo → Lila */
    linear-gradient(165deg,
      #040916   0%,
      #060b1d   8%,
      #080e28  16%,
      #0b1035  26%,
      #10093a  36%,
      #180a40  44%,
      #230b4a  52%,
      #2e0d52  60%,
      #3a0f5e  68%,
      #450f6a  76%,
      #4e1272  84%,
      #521478  92%,
      #4a126e 100%
    );
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.skip-link {
  position:absolute; left:-999px; top:0; z-index:9999;
  background:#fff; color:#000; padding:10px 14px; border-radius:10px;
}
.skip-link:focus { left:16px; top:16px; }

.page-wrapper { min-height:100vh; overflow-x:clip; }
.section, .hero-v2, .quote-section, .trust-strip { position:relative; }
.section-bleed { background: transparent !important; }

.section-inner,
.hero-v2-inner,
.sticky-inner,
.footer-inner {
  width: min(calc(100% - 40px), var(--content-width));
  margin: 0 auto;
}

/* ── TYPOGRAPHY ──────────────────────────────── */
h1,h2,h3,h4,.quote-text,.release-title {
  font-family: "Bebas Neue", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.hero-stat-num,.feat-icon,.service-num,.release-counter,
.release-type,.release-services,.upcoming-eyebrow,
.services-eyebrow,.sticky-eyebrow,.cta-eyebrow,
.hero-v2-eyebrow,.trust-item,.release-label,.release-note {
  font-family: "Space Mono", monospace;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.social-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  -webkit-tap-highlight-color: transparent;
  color: #f4f8ff;
}

.social-icon:hover {
  background: rgba(56,189,248,0.1);
  border-color: rgba(56,189,248,0.3);
  transform: translateY(-2px);
}

.social-icon svg {
  width: 18px;
  height: 18px;
  opacity: 0.82;
  transition: opacity 180ms ease;
}

.social-icon:hover svg {
  opacity: 1;
}


/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; min-height:48px; padding:12px 26px;
  border:1px solid transparent; border-radius:var(--radius-pill);
  cursor:pointer;
  transition:
    transform 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    filter 180ms ease;
  font-family:"Outfit",system-ui,sans-serif;
  font-size:14px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
  position:relative; overflow:hidden;
}
.btn::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.16),transparent 60%);
  opacity:0; transition:opacity 200ms ease;
  pointer-events:none; border-radius:inherit;
}
.btn:hover { transform:translateY(-2px); }
.btn:hover::after { opacity:1; }
.btn:active { transform:translateY(0) scale(0.98); }

/* Primär: Blau→Lila Verlauf */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 16px 40px rgba(124,58,237,0.35), 0 0 0 1px rgba(11,156,217,0.2);
}
.btn-primary:hover {
  box-shadow: 0 22px 52px rgba(124,58,237,0.50), 0 0 0 1px rgba(168,85,247,0.4);
  filter: brightness(1.08);
}

.btn-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: var(--border-2);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(168,85,247,0.1);
  border-color: rgba(168,85,247,0.3);
}

.btn-hero-light { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.14); }

/* ── GLASS & FLOAT ───────────────────────────── */
.glass-card {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.floating-panel { animation: floatingPanel 7s ease-in-out infinite; }
@keyframes floatingPanel {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%      { transform:translateY(-8px) rotate(0.3deg); }
}

.pulse-border { position:relative; overflow:hidden; }
.pulse-border::after {
  content:""; position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,
    rgba(56,189,248,.5),
    rgba(168,85,247,.4),
    rgba(192,38,211,.3));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:borderPulse 3.5s linear infinite; pointer-events:none;
}
@keyframes borderPulse { 0%{opacity:.4} 50%{opacity:1} 100%{opacity:.4} }

/* ── HERO ────────────────────────────────────── */
.hero-v2 {
  min-height:100vh; display:flex; align-items:center;
  padding:130px 0 90px; background:transparent; overflow:hidden;
}

.hero-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); }
.hero-orb-1 {
  top:-5%; left:-8%; width:680px; height:680px;
  background:radial-gradient(circle,rgba(11,156,217,0.22),transparent 65%);
}
.hero-orb-2 {
  right:0; bottom:-15%; width:500px; height:500px;
  background:radial-gradient(circle,rgba(168,85,247,0.22),transparent 65%);
}
.hero-orb-3 {
  top:30%; left:40%; width:400px; height:400px;
  background:radial-gradient(circle,rgba(192,38,211,0.10),transparent 70%);
}

/* Waveform 
.hero-waveform {
  position:absolute; bottom:0; left:0; right:0; height:120px;
  display:flex; align-items:flex-end; justify-content:center; gap:3px;
  opacity:0.07; pointer-events:none; padding:0 20px; overflow:hidden;
}*/
.wf-bar { width:3px; border-radius:2px; background:var(--primary-2); animation:wfAnim 2s ease-in-out infinite; }
.wf-bar:nth-child(odd)  { animation-duration:1.8s; }
.wf-bar:nth-child(3n)   { animation-duration:2.3s; }
.wf-bar:nth-child(5n)   { animation-duration:1.5s; }
.wf-bar:nth-child(7n)   { animation-duration:2.7s; }
@keyframes wfAnim { 0%,100%{height:8px} 50%{height:calc(20px + var(--rnd,40px))} }
.wf-bar:nth-child(1)  {--rnd:25px;animation-delay:0s}
.wf-bar:nth-child(2)  {--rnd:55px;animation-delay:.1s}
.wf-bar:nth-child(3)  {--rnd:38px;animation-delay:.2s}
.wf-bar:nth-child(4)  {--rnd:70px;animation-delay:.15s}
.wf-bar:nth-child(5)  {--rnd:44px;animation-delay:.3s}
.wf-bar:nth-child(6)  {--rnd:80px;animation-delay:.05s}
.wf-bar:nth-child(7)  {--rnd:35px;animation-delay:.35s}
.wf-bar:nth-child(8)  {--rnd:62px;animation-delay:.22s}
.wf-bar:nth-child(9)  {--rnd:50px;animation-delay:.4s}
.wf-bar:nth-child(10) {--rnd:75px;animation-delay:.08s}
.wf-bar:nth-child(11) {--rnd:30px;animation-delay:.45s}
.wf-bar:nth-child(12) {--rnd:68px;animation-delay:.18s}
.wf-bar:nth-child(13) {--rnd:42px;animation-delay:.5s}
.wf-bar:nth-child(14) {--rnd:85px;animation-delay:.12s}
.wf-bar:nth-child(15) {--rnd:55px;animation-delay:.55s}
.wf-bar:nth-child(16) {--rnd:34px;animation-delay:.28s}
.wf-bar:nth-child(17) {--rnd:72px;animation-delay:.6s}
.wf-bar:nth-child(18) {--rnd:48px;animation-delay:.07s}
.wf-bar:nth-child(19) {--rnd:65px;animation-delay:.65s}
.wf-bar:nth-child(20) {--rnd:30px;animation-delay:.32s}
.wf-bar:nth-child(21) {--rnd:58px;animation-delay:.7s}
.wf-bar:nth-child(22) {--rnd:40px;animation-delay:.17s}
.wf-bar:nth-child(23) {--rnd:78px;animation-delay:.75s}
.wf-bar:nth-child(24) {--rnd:45px;animation-delay:.42s}
.wf-bar:nth-child(25) {--rnd:60px;animation-delay:.8s}
.wf-bar:nth-child(26) {--rnd:35px;animation-delay:.25s}
.wf-bar:nth-child(27) {--rnd:72px;animation-delay:.85s}
.wf-bar:nth-child(28) {--rnd:50px;animation-delay:.13s}
.wf-bar:nth-child(29) {--rnd:40px;animation-delay:.9s}
.wf-bar:nth-child(30) {--rnd:65px;animation-delay:.48s}
.wf-bar:nth-child(31) {--rnd:30px;animation-delay:.95s}
.wf-bar:nth-child(32) {--rnd:55px;animation-delay:.37s}

.hero-v2-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.1fr) 380px;
  gap:60px; align-items:center;
}
.hero-v2-copy { color:var(--text); }

.hero-v2-eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  margin:0 0 32px; font-size:10px; letter-spacing:0.35em; text-transform:uppercase;
  color:var(--primary-2); font-weight:400;
}
.eyebrow-line { display:block; width:32px; height:1px; background:var(--primary-2); opacity:0.7; flex-shrink:0; }

.hero-v2-h1 {
  margin:0 0 28px; font-size:clamp(72px,12vw,140px);
  line-height:0.9; letter-spacing:0.02em; color:var(--text);
}

/* VISION – Grün-Blau-Verlauf (animiert) */
.hero-v2-h1 em {
  font-style:normal;
  background: linear-gradient(115deg, #22c55e 0%, #0ea5e9 45%, #38bdf8 70%, #4ade80 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter: drop-shadow(0 0 20px rgba(34,197,94,0.4));
  background-size:200% 100%;
  animation: visionShimmer 4s ease-in-out infinite;
}
@keyframes visionShimmer {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}

.hero-v2-sub {
  max-width:540px; margin:0 0 38px;
  font-size:clamp(16px,1.8vw,18px); line-height:1.75; color:var(--text-soft); font-weight:300;
}
.hero-v2-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:52px; }
.btn-hero { min-width:200px; }

.hero-stats {
  display:flex; align-items:center; gap:0;
  padding:20px 22px; background:rgba(255,255,255,0.05);
  border:1px solid var(--border); border-radius:var(--radius-md);
  backdrop-filter:blur(12px); width:fit-content; margin-bottom:40px;
}
.hero-stat { display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 24px; }
.hero-stat-num { font-size:22px; font-weight:700; color:var(--primary-2); line-height:1; letter-spacing:0; }
.hero-stat-label { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-muted); }
.hero-stat-divider { width:1px; height:30px; background:var(--border-2); flex-shrink:0; }

.hero-scroll-hint {
  display:inline-flex; align-items:center; gap:10px;
  color:var(--text-muted); font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
}
.hero-scroll-line { width:40px; height:1px; background:var(--text-muted); }
.hero-scroll-dot {
  width:6px; height:6px; border-radius:50%; background:var(--purple-2);
  animation:scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(7px);opacity:.4} }

/* ── RELEASE PANEL ───────────────────────────── */
.hero-v2-release { margin-top:10px; }

.release-panel-v2 {
  position:relative;
  background:linear-gradient(160deg, rgba(24,16,58,0.92), rgba(16,10,34,0.95) 80%);
  border:1px solid rgba(168,85,247,0.18);
  border-radius:var(--radius-lg); padding:20px;
  color:var(--text);
  box-shadow:var(--shadow-dark), var(--shadow-purple);
  overflow:hidden;
}
.release-panel-glow {
  position:absolute; inset:-50%;
  background:radial-gradient(circle at 15% 0%,rgba(168,85,247,0.2),transparent 50%);
  pointer-events:none;
}
.release-header,.release-footer,.release-slider,.release-slide { position:relative; z-index:1; }
.release-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;
}
.release-label {
  font-size:10px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--text-muted); display:flex; align-items:center; gap:7px;
}
.release-live-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--purple-2); box-shadow:0 0 6px var(--purple-2);
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.release-counter { font-size:10px; color:var(--text-muted); letter-spacing:0.1em; }
.release-slider { display:flex; overflow:hidden; scroll-snap-type:x mandatory; }
.release-slide {
  min-width:100%; display:grid; grid-template-columns:100px 1fr;
  gap:16px; align-items:center; scroll-snap-align:start; padding:4px 0 10px;
}
.release-cover {
  width:100px; height:100px; overflow:hidden;
  border-radius:14px; background:var(--surface-3);
  border:1px solid var(--border); position:relative; flex-shrink:0;
}
.release-cover img { width:100%; height:100%; object-fit:cover; transition:transform 400ms var(--ease-out); }
.release-cover:hover img { transform:scale(1.06); }
.release-cover-shine {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 50%);
  pointer-events:none; border-radius:inherit;
}
.release-info { display:flex; flex-direction:column; gap:5px; }
.release-type { margin:0; font-size:10px; color:var(--text-muted); letter-spacing:0.18em; text-transform:uppercase; }
.release-title { margin:0; font-size:18px; color:var(--text); letter-spacing:0.02em; }
.release-services { margin:0; font-size:11px; color:var(--purple-2); letter-spacing:0.12em; }
.release-waveform-mini { display:flex; align-items:center; gap:2px; height:16px; margin-top:4px; }
.release-waveform-mini span {
  display:block; width:2px; border-radius:2px;
  background:rgba(192,132,252,0.45); animation:miniWf 1.4s ease-in-out infinite;
}
.release-waveform-mini span:nth-child(1)  {height:6px;  animation-delay:0s}
.release-waveform-mini span:nth-child(2)  {height:12px; animation-delay:.1s}
.release-waveform-mini span:nth-child(3)  {height:8px;  animation-delay:.2s}
.release-waveform-mini span:nth-child(4)  {height:14px; animation-delay:.05s}
.release-waveform-mini span:nth-child(5)  {height:6px;  animation-delay:.3s}
.release-waveform-mini span:nth-child(6)  {height:10px; animation-delay:.15s}
.release-waveform-mini span:nth-child(7)  {height:16px; animation-delay:.08s}
.release-waveform-mini span:nth-child(8)  {height:7px;  animation-delay:.25s}
.release-waveform-mini span:nth-child(9)  {height:13px; animation-delay:.35s}
.release-waveform-mini span:nth-child(10) {height:9px;  animation-delay:.18s}
@keyframes miniWf { 0%,100%{transform:scaleY(.5);opacity:.4} 50%{transform:scaleY(1);opacity:1} }
.release-footer {
  margin-top:12px; padding-top:14px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.release-dots { display:flex; align-items:center; gap:6px; }
.release-dot {
  display:block; width:6px; height:6px; min-width:6px; min-height:6px;
  border:none; border-radius:999px; background:rgba(255,255,255,0.2);
  cursor:pointer; padding:0;
  transition:width 320ms var(--ease-snappy), background 200ms ease;
}
.release-dot.active { width:20px; background:var(--purple-2); }
.release-note { font-size:10px; color:var(--text-muted); }

/* ── TRUST STRIP ─────────────────────────────── */
.trust-strip {
  padding:22px 0 26px; background:transparent;
  border-top:1px solid rgba(168,85,247,0.12);
  border-bottom:1px solid rgba(168,85,247,0.12);
}
.trust-strip-inner {
  width:min(calc(100% - 40px), var(--content-width));
  margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px;
}
.trust-item {
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  background:rgba(168,85,247,0.06); border:1px solid rgba(168,85,247,0.14);
  border-radius:var(--radius-pill); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--text-soft);
  transition:border-color 200ms, color 200ms, background 200ms;
}
.trust-item:hover {
  border-color:rgba(168,85,247,0.35); color:var(--text);
  background:rgba(168,85,247,0.12);
}
.trust-item-dot { width:5px; height:5px; border-radius:50%; background:var(--purple-2); flex-shrink:0; }

/* ── SECTIONS ALLGEMEIN ──────────────────────── */
.section { padding:110px 0; }
.section-header { margin-bottom:40px; }
.section-header h2 {
  margin:0 0 10px; font-size:clamp(42px,5vw,68px);
  line-height:0.95; letter-spacing:0.02em; color:var(--text);
}
.section-header h4,.section-header p {
  margin:0; font-size:16px; font-family:"Outfit",sans-serif;
  font-weight:300; color:var(--text-soft);
}
.upcoming-header,.services-header { text-align:center; max-width:700px; margin-inline:auto; }

/* Überschriften – gleicher Stil wie Quote-Text */
.upcoming-header h2,
.services-header h2 {
  color: var(--text);
}

.upcoming-header h4,
.services-header p {
  color: var(--text-soft);
}

.upcoming-eyebrow,.services-eyebrow,.cta-eyebrow,.sticky-eyebrow {
  margin:0 0 10px; font-size:10px; letter-spacing:0.32em;
  text-transform:uppercase; color:var(--purple-2); display:block;
}

/* ── STICKY PROCESS ──────────────────────────── */
.sticky-section { background:transparent; }
.sticky-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.sticky-left { position:sticky; top:120px; }
.sticky-left h2 { margin:0 0 20px; font-size:clamp(48px,5vw,72px); line-height:0.92; letter-spacing:0.02em; color:var(--text); }
.sticky-left p { margin:0 0 32px; font-size:16px; line-height:1.75; font-weight:300; color:var(--text-soft); }
.sticky-right { display:flex; flex-direction:column; gap:16px; padding-top:10px; }

.feat-card {
  position:relative; padding:26px 24px;
  background:rgba(16,10,34,0.75);
  border:1px solid rgba(168,85,247,0.12);
  border-radius:var(--radius-md);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  transition:transform 320ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease;
  overflow:hidden; backdrop-filter:blur(12px);
}
.feat-card::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--purple-2), var(--primary-2), transparent);
  opacity:0; transition:opacity 250ms ease;
}
.feat-card:hover { transform:translateX(8px); box-shadow:0 20px 56px rgba(0,0,0,0.4); border-color:rgba(168,85,247,0.3); }
.feat-card:hover::before { opacity:1; }
.feat-card-top { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.feat-icon {
  width:48px; height:48px; border-radius:12px;
  background:rgba(168,85,247,0.14); border:1px solid rgba(168,85,247,0.22);
  color:var(--purple-2); display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; flex-shrink:0; letter-spacing:0;
}
.feat-card h4 { margin:0; font-size:clamp(20px,2.5vw,26px); letter-spacing:0.02em; color:var(--text); }
.feat-card p  { margin:0; font-size:15px; line-height:1.72; font-weight:300; color:var(--text-soft); }

/* ── QUOTE ───────────────────────────────────── */
.quote-section {
  padding:120px 20px; background:transparent; overflow:hidden; text-align:center;
}
.quote-glow {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(168,85,247,0.10), transparent 60%);
  pointer-events:none;
}
.quote-scan-line {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,0.4),transparent);
  animation:scanLine 6s linear infinite; pointer-events:none;
}
@keyframes scanLine { 0%{top:-10px;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:calc(100% + 10px);opacity:0} }
.quote-inner { position:relative; z-index:1; width:min(100%,860px); margin:0 auto; }
.quote-mark { display:block; margin-bottom:10px; font-size:120px; line-height:0.6; color:rgba(168,85,247,0.2); font-family:"Bebas Neue",sans-serif; }
.quote-text { margin:0 0 24px; font-size:clamp(32px,5vw,58px); line-height:1.08; letter-spacing:0.02em; color:var(--text); }
.quote-text em { font-style:normal; color:var(--purple-2); }
.quote-sub {
  margin:0; font-size:12px; color:var(--text-muted); letter-spacing:0.28em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.quote-sub-line { display:inline-block; width:28px; height:1px; background:var(--purple-2); opacity:0.5; }

/* ── UPCOMING ────────────────────────────────── */
.section-upcoming { background:transparent; }
.upcoming-layout {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:20px; align-items:stretch;
}
.upcoming-card {
  position:relative; overflow:hidden;
  border-radius:var(--radius-md); border:1px solid rgba(168,85,247,0.12);
  background:rgba(16,10,34,0.75);
  box-shadow:0 12px 40px rgba(0,0,0,0.3);
  transition:transform 320ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease;
  backdrop-filter:blur(14px);
}
.upcoming-card::before {
  content:""; position:absolute; inset:-40%;
  background:radial-gradient(circle at 0 0,rgba(168,85,247,0.10),transparent 50%);
  opacity:0; transition:opacity 250ms ease; pointer-events:none;
}
.upcoming-card:hover { transform:translateY(-5px); box-shadow:0 24px 64px rgba(0,0,0,0.4); border-color:rgba(168,85,247,0.28); }
.upcoming-card:hover::before { opacity:1; }
.upcoming-event-card { display:flex; flex-direction:column; justify-content:space-between; padding:20px; }
.upcoming-event-logo {
  margin:16px auto 12px; width:100px; height:100px; border-radius:20px;
  background:rgba(16,10,34,0.9); box-shadow:0 14px 40px rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:1px solid var(--border);
}
.upcoming-event-logo img { width:100%; height:100%; object-fit:contain; }
.upcoming-event-content { margin-top:8px; }
.upcoming-event-content h3 { margin:14px 0 8px; font-size:clamp(22px,3vw,32px); letter-spacing:0.02em; color:var(--text); }
.upcoming-services { margin:0 0 6px; color:var(--text-soft); font-size:15px; font-weight:300; }
.upcoming-date { margin:0; color:var(--text-muted); font-size:14px; }
.upcoming-event-footer { margin-top:18px; }
.upcoming-ticket-btn { width:100%; }
.upcoming-event-badge {
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 14px; border-radius:var(--radius-pill);
  background:rgba(168,85,247,0.12); border:1px solid rgba(168,85,247,0.22);
  color:var(--purple-2); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  font-family:"Space Mono",monospace;
}
.upcoming-tag {
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:var(--radius-pill); background:rgba(255,255,255,0.06); color:var(--text-soft);
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase; font-family:"Space Mono",monospace;
}
.upcoming-tag-event { background:rgba(168,85,247,0.12); color:var(--purple-2); }
.upcoming-grid { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; }
.upcoming-song-card { padding:18px; background:rgba(16,10,34,0.75); color:var(--text); border-color:var(--border); }
.upcoming-song-card .upcoming-tag { color:var(--text-soft); background:rgba(255,255,255,0.05); }
.upcoming-top { display:flex; align-items:flex-start; gap:14px; margin-top:14px; }
.upcoming-cover { width:86px; height:86px; border-radius:14px; overflow:hidden; background:var(--surface-2); box-shadow:0 12px 30px rgba(0,0,0,0.4); flex-shrink:0; }
.upcoming-cover img { width:100%; height:100%; object-fit:cover; }
.upcoming-meta h3 { margin:0 0 6px; font-size:22px; letter-spacing:0.02em; color:var(--text); }
.upcoming-song-card .upcoming-services { color:var(--purple-2); font-size:12px; letter-spacing:0.12em; }
.upcoming-song-card .upcoming-date { color:var(--text-muted); }

.upcoming-card,.service-card {
  opacity:0; transform:translateY(20px);
  transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.upcoming-card.visible-card,.service-card.visible-service { opacity:1; transform:none; }

/* ── SERVICES ────────────────────────────────── */
.section-services { background:transparent; }
.services-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.service-card {
  position:relative; overflow:hidden; padding:24px 22px 22px;
  border-radius:var(--radius-md);
  background:rgba(16,10,34,0.75);
  border:1px solid rgba(168,85,247,0.1);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  backdrop-filter:blur(12px);
  transition:transform 320ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease;
}
.service-card::after {
  content:""; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--primary-2), var(--purple-2), var(--purple-3), transparent);
  opacity:0; transition:opacity 250ms ease;
}
.service-card:hover { transform:translateY(-8px) scale(1.01); box-shadow:0 28px 72px rgba(0,0,0,0.45); border-color:rgba(168,85,247,0.3); }
.service-card:hover::after { opacity:1; }
.service-icon-wrap { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.service-icon {
  width:44px; height:44px; border-radius:14px;
  background:rgba(168,85,247,0.12); border:1px solid rgba(168,85,247,0.2);
  display:flex; align-items:center; justify-content:center;
  position:relative; box-shadow:0 8px 24px rgba(168,85,247,0.14);
}
.service-num { font-size:11px; color:var(--text-muted); letter-spacing:0.1em; }
.service-icon-shape { display:block; }
.service-icon-beat { width:14px; height:14px; border-radius:4px; background:var(--purple-2); box-shadow:6px 0 0 rgba(192,132,252,.65),-6px 0 0 rgba(192,132,252,.38); }
.service-icon-mic { width:8px; height:14px; border-radius:999px; background:var(--purple-2); position:relative; }
.service-icon-mic::before,.service-icon-mic::after { content:""; position:absolute; left:50%; transform:translateX(-50%); border-radius:999px; background:var(--purple-2); }
.service-icon-mic::before { width:12px; height:2px; bottom:-3px; }
.service-icon-mic::after  { width:2px; height:5px; bottom:-8px; }
.service-icon-mix { width:14px; height:14px; position:relative; }
.service-icon-mix::before,.service-icon-mix::after { content:""; position:absolute; border-radius:999px; background:var(--purple-2); }
.service-icon-mix::before { width:2px; height:14px; left:3px; box-shadow:6px 0 0 var(--purple-2); }
.service-icon-mix::after  { width:7px; height:6px; left:0; top:4px; border:2px solid var(--purple-2); border-top:none; border-bottom:none; background:transparent; }
.service-icon-video { width:14px; height:10px; border-radius:3px; border:2px solid var(--purple-2); position:relative; }
.service-icon-video::after { content:""; position:absolute; right:-5px; top:2px; border-style:solid; border-width:3px 0 3px 5px; border-color:transparent transparent transparent var(--purple-2); }
.service-card-bar { position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--purple-2),var(--primary-2),transparent); opacity:0; transition:opacity 250ms ease; }
.service-card:hover .service-card-bar { opacity:1; }
.service-card h3 { margin:0 0 10px; font-size:clamp(20px,2vw,28px); color:var(--text); letter-spacing:0.02em; }
.service-card p  { margin:0; font-size:15px; line-height:1.72; color:var(--text-soft); font-weight:300; }

/* ── CTA ─────────────────────────────────────── */
.section-cta { background:transparent; }
.cta-inner { position:relative; }
.cta-card {
  position:relative; display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:24px; align-items:center;
  max-width:800px; margin:0 auto;
  padding:40px 38px; border-radius:var(--radius-xl);
  background:rgba(16,10,34,0.82);
  border:1px solid rgba(168,85,247,0.18);
  box-shadow:0 40px 100px rgba(0,0,0,0.55), var(--shadow-purple);
  backdrop-filter:blur(20px);
}
.cta-bg-glow {
  position:absolute; inset:-50%;
  background:radial-gradient(ellipse at center,rgba(168,85,247,0.12),transparent 55%);
  pointer-events:none;
}
.cta-content,.cta-actions { position:relative; z-index:1; }
.cta-content h2 { margin:6px 0 12px; font-size:clamp(36px,5vw,58px); letter-spacing:0.02em; line-height:0.95; color:var(--text); }
.cta-text { margin:0; color:var(--text-soft); font-size:15px; line-height:1.72; font-weight:300; }
.cta-actions { text-align:right; }
.cta-button { min-width:190px; }
.cta-hint { margin:12px 0 0; font-size:11px; color:var(--text-muted); letter-spacing:0.04em; }

/* ── FOOTER ──────────────────────────────────── */
.footer {
  padding:22px 0 30px; background:rgba(4,9,22,0.7);
  backdrop-filter:blur(20px); border-top:1px solid rgba(168,85,247,0.1);
}
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12px; }
.footer-copy { color:var(--text-muted); letter-spacing:0.1em; }
.footer-links { display:flex; gap:14px; }
.footer-links a { color:var(--text-muted); font-size:12px; letter-spacing:0.06em; transition:color 200ms ease; }
.footer-links a:hover { color:var(--purple-2); }
.footer-socials .social-icon { width:38px; height:38px; border-radius:11px; border:1px solid rgba(168,85,247,0.18); background:rgba(168,85,247,0.06); }
.footer-socials .social-icon img,.footer-socials .social-icon svg { width:18px; height:18px; opacity:0.6; transition:opacity 180ms ease; }
.footer-socials .social-icon:hover img,.footer-socials .social-icon:hover svg { opacity:1; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width:1024px) {
  .hero-v2-inner,.sticky-inner,.upcoming-layout,.cta-card { grid-template-columns:1fr; }
  .hero-v2-release { max-width:440px; }
  .sticky-left { position:static; }
  .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .hero-v2 { padding:120px 0 72px; }
  .hero-v2-actions { flex-direction:column; align-items:flex-start; }
  .hero-stats { width:100%; justify-content:space-around; }
  .release-slide { grid-template-columns:1fr; }
  .release-cover { width:100%; max-width:160px; height:auto; aspect-ratio:1/1; }
  .services-grid { grid-template-columns:1fr; }
  .cta-card,.footer-inner { text-align:left; }
  .cta-actions { text-align:left; }
}
@media (max-width:560px) {
  .section-inner,.hero-v2-inner,.sticky-inner,.footer-inner { width:min(calc(100% - 28px),var(--content-width)); }
  .section,.sticky-section,.quote-section { padding-block:80px; }
  .hero-v2-h1 { font-size:clamp(58px,18vw,90px); }
  .quote-text { font-size:clamp(30px,9vw,48px); }
  .upcoming-cover { width:76px; height:76px; }
  .hero-stats { flex-wrap:wrap; width:auto; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .floating-panel,.hero-scroll-dot,.pulse-border::after,
  .wf-bar,.release-waveform-mini span,.release-live-dot,
  .quote-scan-line,.hero-v2-h1 em { animation:none!important; }
  * { transition-duration:0.01ms!important; }
}