@charset "UTF-8";

/* Fase 5 — Producción Musical */
.production-page {
  --studio-cyan: #55d7eb;
  --studio-blue: #4c7cff;
  --studio-violet: #8f6cff;
  --studio-green: #65e7ad;
  position: relative;
  background: #02050e;
}

.production-page .section {
  position: relative;
  isolation: isolate;
}

.production-grid-lines {
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: .11;
  background-image:
    linear-gradient(90deg, transparent 0 49.8%, rgba(var(--accent-rgb), .16) 50%, transparent 50.2%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,.035) 120px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(255,255,255,.035) 120px);
  mask-image: radial-gradient(circle at 68% 11%, #000 0 22%, transparent 66%);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 34px;
  color: var(--muted-2);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.breadcrumbs a { transition: color 180ms ease; }
.breadcrumbs a:hover { color: var(--accent-bright); }

/* Hero */
.production-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 66px) 0 72px;
  overflow: hidden;
}

.production-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 62vw;
  height: 62vw;
  top: -24vw;
  right: -14vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--secondary-rgb), .18), rgba(var(--accent-rgb), .045) 42%, transparent 72%);
  filter: blur(14px);
}

.production-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 46vw;
  height: 2px;
  right: -8vw;
  top: 52%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .48), rgba(100,215,238,.56), transparent);
  box-shadow: 0 -24px 46px rgba(var(--accent-rgb), .12), 0 24px 46px rgba(76,124,255,.12);
  transform: rotate(-9deg);
}

.production-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(500px, 1.05fr);
  align-items: center;
  gap: clamp(34px, 5vw, 78px);
}

.production-hero-copy { position: relative; z-index: 3; }
.production-hero-copy .eyebrow { margin-bottom: 16px; }

.premium-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 8px 13px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 999px;
  color: var(--accent-bright);
  background: rgba(var(--accent-rgb), .065);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-size: .72rem;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.premium-pill span { filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .72)); }

.production-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3rem, 5.6vw, 6.25rem);
  line-height: .94;
  letter-spacing: -.063em;
  text-wrap: balance;
}

.production-hero h1 span {
  color: transparent;
  background: linear-gradient(115deg, var(--accent-bright), #fff1bd 44%, #77d8ee 88%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 24px rgba(var(--accent-rgb), .14));
}

.production-hero-lead {
  max-width: 690px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.78;
}

.production-hero .hero-actions { margin-top: 31px; }

.production-assurances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.production-assurances li {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 17px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.production-assurances strong {
  display: block;
  color: rgba(255,255,255,.94);
  font-size: .82rem;
  line-height: 1.35;
}

.production-assurances span {
  display: block;
  margin-top: 6px;
  color: var(--muted-2);
  font-size: .72rem;
  line-height: 1.45;
}

.production-hero-visual {
  position: relative;
  min-height: 680px;
  perspective: 1200px;
}

.sonic-lab {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(680px, 49vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  transition: transform 450ms var(--ease-out);
}

.sonic-lab::before,
.sonic-lab::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.sonic-lab::before {
  inset: 16%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .22), rgba(71,121,255,.08) 46%, transparent 68%);
  filter: blur(26px);
  animation: sonic-breathe 5.5s ease-in-out infinite;
}

.sonic-lab::after {
  inset: 2%;
  border: 1px solid rgba(112,194,255,.08);
  box-shadow: inset 0 0 90px rgba(57,101,205,.065), 0 0 100px rgba(var(--accent-rgb),.04);
}

.sonic-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.11);
  transform: translate(-50%, -50%);
}

.sonic-ring::before,
.sonic-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.sonic-ring::before {
  inset: -2px;
  border-top: 2px solid rgba(var(--accent-rgb), .7);
  border-right: 1px solid transparent;
  border-bottom: 1px solid rgba(87,207,235,.35);
  border-left: 1px solid transparent;
}

.sonic-ring::after {
  width: 8px;
  height: 8px;
  top: 9%;
  left: 28%;
  background: var(--accent-bright);
  box-shadow: 0 0 18px var(--accent-bright);
}

.sonic-ring--outer { width: 92%; animation: spin 36s linear infinite; }
.sonic-ring--middle { width: 72%; animation: spin-reverse 27s linear infinite; }
.sonic-ring--inner { width: 51%; animation: spin 19s linear infinite; }

.hero-waveform {
  position: absolute;
  z-index: 1;
  top: 40%;
  left: -10%;
  width: 120%;
  height: 30%;
  opacity: .82;
  filter: drop-shadow(0 0 11px rgba(93,216,239,.38));
  transform: rotate(-8deg) translateZ(10px);
}

.studio-core {
  position: absolute;
  z-index: 4;
  top: 43%;
  left: 50%;
  width: 182px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .36);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.17), transparent 18%),
    radial-gradient(circle, rgba(9,18,40,.96), rgba(2,5,14,.96));
  box-shadow: 0 0 0 12px rgba(var(--accent-rgb),.025), 0 0 76px rgba(var(--accent-rgb),.19), inset 0 0 48px rgba(61,103,199,.12);
  transform: translate(-50%, -50%) translateZ(45px);
}

.studio-core::before,
.studio-core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.studio-core::before { inset: 10px; border: 1px dashed rgba(var(--accent-rgb),.22); animation: spin 18s linear infinite; }
.studio-core::after { inset: 24px; border: 1px solid rgba(92,211,235,.13); }
.studio-core img { width: 65%; filter: drop-shadow(0 0 17px rgba(var(--accent-rgb),.27)); }
.studio-core small { position: absolute; bottom: 23px; color: var(--accent-bright); font-size: .57rem; font-weight: 800; letter-spacing: .22em; }
.studio-core-halo { position: absolute; inset: -28px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb),.09); animation: sonic-pulse 2.7s ease-out infinite; }

.holographic-console {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 2%;
  width: 74%;
  padding: 15px 17px 18px;
  border: 1px solid rgba(116,204,237,.2);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(8,17,38,.9), rgba(4,9,22,.72));
  box-shadow: 0 36px 72px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.065), 0 0 56px rgba(65,119,221,.09);
  backdrop-filter: blur(20px);
  transform: translateX(-50%) rotateX(57deg) translateZ(8px);
  transform-origin: center bottom;
}

.console-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  color: #98a8c8;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .17em;
}

.console-top i { width: 7px; height: 7px; border-radius: 50%; background: var(--studio-green); box-shadow: 0 0 12px var(--studio-green); }

.console-screen {
  height: 64px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(36,73,145,.16), rgba(2,8,19,.62));
}

.console-screen span {
  flex: 1;
  min-width: 0;
  height: var(--bar, 45%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent-bright), var(--studio-cyan) 58%, rgba(61,107,200,.24));
  box-shadow: 0 0 10px rgba(86,205,231,.22);
  transform-origin: bottom;
  animation: meter-dance 1.45s ease-in-out infinite alternate;
}
.console-screen span:nth-child(1) { --bar: 42%; animation-delay: -.9s; }
.console-screen span:nth-child(2) { --bar: 76%; animation-delay: -.4s; }
.console-screen span:nth-child(3) { --bar: 58%; animation-delay: -1.2s; }
.console-screen span:nth-child(4) { --bar: 92%; animation-delay: -.2s; }
.console-screen span:nth-child(5) { --bar: 68%; animation-delay: -.7s; }
.console-screen span:nth-child(6) { --bar: 49%; animation-delay: -1.1s; }
.console-screen span:nth-child(7) { --bar: 81%; animation-delay: -.5s; }
.console-screen span:nth-child(8) { --bar: 61%; animation-delay: -.15s; }

.console-channels { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; margin-top: 12px; }
.console-channels i { position: relative; height: 54px; border-radius: 5px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.045); }
.console-channels i::before { content: ""; position: absolute; left: 50%; bottom: 5px; width: 2px; height: var(--level); background: linear-gradient(180deg, var(--accent-bright), rgba(82,202,226,.4)); transform: translateX(-50%); }
.console-channels i::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--level) - 1px); width: 11px; height: 5px; border-radius: 3px; background: #d9e7f6; box-shadow: 0 0 9px rgba(119,220,239,.4); transform: translate(-50%, 50%); }

.sonic-label {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(5,11,25,.72);
  box-shadow: 0 10px 26px rgba(0,0,0,.23);
  backdrop-filter: blur(12px);
  font-size: .65rem;
  font-weight: 770;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sonic-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 9px var(--accent-bright); }
.sonic-label--compose { top: 9%; left: 15%; }
.sonic-label--record { top: 19%; right: 2%; }
.sonic-label--mix { top: 53%; left: 1%; }
.sonic-label--master { top: 49%; right: -2%; }

.frequency-chip {
  position: absolute;
  z-index: 6;
  min-width: 150px;
  padding: 10px 13px;
  border: 1px solid rgba(85,194,226,.15);
  border-radius: 12px;
  color: #d9e4f4;
  background: rgba(4,10,24,.62);
  backdrop-filter: blur(14px);
}
.frequency-chip small { display: block; color: var(--muted-2); font-size: .5rem; font-weight: 800; letter-spacing: .16em; }
.frequency-chip strong { display: block; margin-top: 3px; font-size: .69rem; }
.frequency-chip--one { top: 31%; left: -2%; transform: rotate(-4deg); }
.frequency-chip--two { top: 34%; right: -3%; transform: rotate(4deg); }

/* Premium clarity */
.production-clarity { padding: 68px 0 112px; }

.premium-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 3.4vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .34);
  border-radius: 28px;
  background:
    linear-gradient(115deg, rgba(var(--accent-rgb),.105), rgba(7,15,32,.82) 48%, rgba(61,104,196,.07)),
    rgba(4,9,20,.78);
  box-shadow: 0 28px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(18px);
}

.premium-alert::after {
  content: "PREMIUM";
  position: absolute;
  right: -17px;
  top: -34px;
  color: rgba(255,255,255,.025);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 950;
  letter-spacing: -.06em;
  pointer-events: none;
}

.premium-alert-icon {
  width: 66px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb),.42);
  border-radius: 50%;
  color: var(--accent-bright);
  background: rgba(var(--accent-rgb), .08);
  box-shadow: 0 0 36px rgba(var(--accent-rgb),.13), inset 0 0 20px rgba(var(--accent-rgb),.08);
  font-size: 1.42rem;
  font-weight: 820;
}

.premium-alert > div:nth-child(2) > p:first-child { margin: 0 0 7px; color: var(--accent-bright); font-size: .67rem; font-weight: 850; letter-spacing: .16em; }
.premium-alert h2 { max-width: 820px; margin: 0; font-size: clamp(1.65rem, 3.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.045em; }
.premium-alert h2 span { color: var(--accent-bright); }
.premium-alert h2 + p { max-width: 820px; margin: 15px 0 0; color: var(--muted); }
.premium-alert .button { position: relative; z-index: 2; white-space: nowrap; }

.clarity-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.clarity-cards article { padding: 27px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.024); transition: border-color 220ms ease, background 220ms ease; }
.clarity-cards article:hover { border-color: rgba(var(--accent-rgb),.24); background: rgba(var(--accent-rgb),.035); }
.clarity-cards span { color: var(--accent-bright); font-size: .63rem; font-weight: 840; letter-spacing: .15em; }
.clarity-cards h3 { margin: 14px 0 7px; font-size: 1.03rem; }
.clarity-cards p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Process */
.production-process { padding: 118px 0 128px; background: linear-gradient(180deg, transparent, rgba(3,8,20,.76) 18%, rgba(3,8,20,.84) 82%, transparent); }
.production-workstation { margin-top: 52px; }

.stage-tabs {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  background: rgba(4,9,21,.84);
  backdrop-filter: blur(18px);
}

.production-stage-tab {
  min-width: 0;
  padding: 14px 13px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--muted-2);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.production-stage-tab:hover { color: var(--text); background: rgba(255,255,255,.03); }
.production-stage-tab.is-active { color: var(--text); border-color: rgba(var(--accent-rgb),.31); background: linear-gradient(145deg, rgba(var(--accent-rgb),.11), rgba(58,107,205,.05)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.production-stage-tab span { display: block; color: var(--accent-bright); font-size: .55rem; font-weight: 850; letter-spacing: .15em; }
.production-stage-tab strong { display: block; margin-top: 5px; font-size: .82rem; }
.production-stage-tab small { display: block; margin-top: 2px; overflow: hidden; color: var(--muted-2); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }

.workstation-display {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  background:
    linear-gradient(180deg, rgba(8,17,38,.93), rgba(3,7,17,.96)),
    radial-gradient(circle at 50% 20%, rgba(var(--secondary-rgb),.1), transparent 58%);
  box-shadow: 0 42px 96px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045);
}

.display-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,.065); color: var(--muted-2); font-size: .59rem; font-weight: 800; letter-spacing: .13em; }
.display-header i { color: var(--studio-green); font-style: normal; }

.display-wave { position: relative; height: 170px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.065); background: repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.035) 60px), linear-gradient(180deg, rgba(55,96,179,.075), transparent); }
.display-wave::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.07); }
.display-wave canvas { width: 100%; height: 100%; }
.playhead { position: absolute; z-index: 3; top: 0; bottom: 0; left: 18%; width: 1px; background: var(--accent-bright); box-shadow: 0 0 12px rgba(var(--accent-rgb),.55); animation: playhead-travel 8s linear infinite; }
.playhead::before { content: ""; position: absolute; top: 0; left: -4px; width: 9px; height: 9px; background: var(--accent-bright); clip-path: polygon(0 0,100% 0,50% 100%); }

.display-panels { min-height: 350px; padding: clamp(28px, 4vw, 50px); }
.production-stage-panel { max-width: 930px; animation: panel-enter 420ms var(--ease-out) both; }
.production-stage-panel > p:first-child { margin: 0; color: var(--accent-bright); font-size: .65rem; font-weight: 850; letter-spacing: .17em; }
.production-stage-panel h3 { margin: 12px 0 13px; font-size: clamp(1.7rem, 3.4vw, 3.25rem); line-height: 1.02; letter-spacing: -.045em; }
.production-stage-panel h3 + p { max-width: 820px; margin: 0; color: var(--muted); font-size: 1rem; }
.production-stage-panel ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 20px; margin: 25px 0 0; padding: 0; list-style: none; }
.production-stage-panel li { position: relative; padding-left: 19px; color: #cad2e2; font-size: .89rem; }
.production-stage-panel li::before { content: ""; position: absolute; top: .66em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px rgba(var(--accent-rgb),.35); }

/* Creation */
.creation-section { padding: 124px 0; overflow: hidden; }
.creation-grid { display: grid; grid-template-columns: minmax(390px,.86fr) minmax(0,1.14fr); align-items: center; gap: clamp(50px,7vw,105px); }
.creation-visual { position: relative; min-height: 600px; }
.beat-orbit { position: absolute; top: 50%; left: 50%; width: min(570px, 45vw); aspect-ratio: 1; transform: translate(-50%,-50%); }
.beat-orbit::before { content:""; position:absolute; inset:17%; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.19),rgba(58,109,215,.07) 44%,transparent 70%); filter:blur(20px); animation:sonic-breathe 5s ease-in-out infinite; }
.beat-orbit svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:rgba(255,255,255,.075); stroke-width:1; }
.beat-orbit svg circle:first-child { stroke-dasharray:5 10; animation:spin 38s linear infinite; transform-origin:center; }
.beat-orbit svg circle:nth-child(2) { stroke:rgba(var(--accent-rgb),.17); }
.beat-orbit svg path { stroke:rgba(91,194,229,.08); }
.beat-core { position:absolute; z-index:3; top:50%; left:50%; width:178px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(var(--accent-rgb),.34); border-radius:50%; background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.14),transparent 15%),linear-gradient(145deg,rgba(19,35,68,.96),rgba(3,8,19,.98)); box-shadow:0 0 62px rgba(var(--accent-rgb),.15),inset 0 0 40px rgba(71,121,231,.11); transform:translate(-50%,-50%); }
.beat-core i { position:absolute; inset:17px; border:1px dashed rgba(var(--accent-rgb),.29); border-radius:50%; animation:spin 16s linear infinite; }
.beat-core strong { color:var(--accent-bright); font-size:1.3rem; letter-spacing:.12em; }
.beat-core small { margin-top:2px; color:var(--muted-2); font-size:.55rem; font-weight:800; letter-spacing:.21em; }
.beat-planet { position:absolute; z-index:4; width:78px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.13); border-radius:50%; color:#dce4f1; background:rgba(7,14,30,.85); box-shadow:0 15px 35px rgba(0,0,0,.32),inset 0 0 22px rgba(78,133,231,.08); font-size:.58rem; font-weight:850; letter-spacing:.1em; }
.beat-planet::before { content:""; position:absolute; inset:-8px; border:1px solid rgba(var(--accent-rgb),.08); border-radius:50%; }
.beat-planet--kick { top:5%; left:43%; animation:float-soft 5s ease-in-out infinite; }
.beat-planet--bass { top:42%; right:1%; animation:float-soft 6.2s ease-in-out infinite -.8s; }
.beat-planet--synth { bottom:5%; left:42%; animation:float-soft 5.7s ease-in-out infinite -1.6s; }
.beat-planet--fx { top:43%; left:1%; animation:float-soft 6.8s ease-in-out infinite -2.2s; }

.creation-copy h2,.mix-copy h2,.master-heading h2,.quote-copy h2 { margin:0; font-size:clamp(2.35rem,4.9vw,5.15rem); line-height:.97; letter-spacing:-.055em; }
.creation-copy h2 span,.mix-copy h2 span,.master-heading h2 span,.quote-copy h2 span { color:var(--accent-bright); }
.creation-copy > p:not(.section-kicker),.mix-copy > p:not(.section-kicker),.master-heading > p,.quote-copy > p:not(.section-kicker) { margin:22px 0 0; color:var(--muted); font-size:1.02rem; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:30px; }
.feature-grid article { padding:20px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.feature-grid span { color:var(--accent-bright); font-size:.57rem; font-weight:850; letter-spacing:.16em; }
.feature-grid h3 { margin:9px 0 5px; font-size:.96rem; }
.feature-grid p { margin:0; color:var(--muted-2); font-size:.82rem; }
.rights-note { margin-top:18px; padding:20px 22px; border-left:2px solid var(--accent); border-radius:0 15px 15px 0; background:rgba(var(--accent-rgb),.055); }
.rights-note strong { color:var(--accent-bright); font-size:.85rem; }
.rights-note p { margin:6px 0 0; color:var(--muted); font-size:.84rem; }

/* Vocal */
.vocal-section { padding:120px 0; background:radial-gradient(circle at 50% 48%,rgba(67,112,209,.085),transparent 56%); }
.vocal-console { margin-top:48px; overflow:hidden; border:1px solid var(--line); border-radius:30px; background:linear-gradient(160deg,rgba(10,19,40,.89),rgba(3,7,17,.96)); box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05); }
.vocal-timeline { position:relative; display:grid; gap:13px; min-height:290px; padding:48px 32px; overflow:hidden; border-bottom:1px solid var(--line); background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.035) 80px),linear-gradient(180deg,rgba(47,94,178,.08),transparent); }
.vocal-timeline::before { content:"VOCAL SESSION · TAKE COMP"; position:absolute; top:15px; left:25px; color:var(--muted-2); font-size:.56rem; font-weight:800; letter-spacing:.16em; }
.vocal-track { position:relative; height:54px; display:flex; align-items:center; gap:4px; padding:5px 8px; border:1px solid rgba(255,255,255,.055); border-radius:9px; background:rgba(4,9,20,.58); }
.vocal-track::before { position:absolute; left:10px; top:-8px; padding:1px 5px; border-radius:4px; color:#08111d; font-size:.46rem; font-weight:900; letter-spacing:.08em; }
.vocal-track--lead::before { content:"LEAD"; background:var(--accent-bright); }
.vocal-track--double::before { content:"DOUBLE"; background:var(--studio-cyan); }
.vocal-track--harmony::before { content:"HARMONY"; background:#a695ff; }
.vocal-track span { display:block; height:calc(12px + var(--wave, 20px)); flex:var(--length,1); min-width:10px; border-radius:50% 50% 40% 40%; background:linear-gradient(90deg,rgba(var(--accent-rgb),.28),rgba(93,210,235,.56),rgba(var(--accent-rgb),.28)); clip-path:polygon(0 50%,4% 26%,8% 70%,13% 12%,18% 86%,24% 34%,31% 64%,38% 8%,45% 88%,52% 28%,58% 72%,65% 18%,72% 80%,79% 39%,86% 66%,93% 25%,100% 50%); opacity:.8; }
.vocal-track span:nth-child(1){--length:1.2;--wave:20px}.vocal-track span:nth-child(2){--length:.6;--wave:8px}.vocal-track span:nth-child(3){--length:1.4;--wave:28px}.vocal-track span:nth-child(4){--length:.85;--wave:16px}.vocal-track span:nth-child(5){--length:1.1;--wave:24px}.vocal-track span:nth-child(6){--length:.55;--wave:10px}
.vocal-playhead { position:absolute; top:0; bottom:0; left:27%; width:1px; background:#fff3c0; box-shadow:0 0 13px rgba(255,236,158,.65); animation:playhead-travel 9s linear infinite; }
.vocal-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.vocal-controls article { min-height:190px; padding:27px; border-right:1px solid var(--line); }
.vocal-controls article:last-child { border-right:0; }
.control-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(var(--accent-rgb),.27); border-radius:13px; color:var(--accent-bright); background:rgba(var(--accent-rgb),.055); font-size:.56rem; font-weight:900; letter-spacing:.08em; }
.vocal-controls h3 { margin:17px 0 7px; font-size:1rem; }
.vocal-controls p { margin:0; color:var(--muted); font-size:.84rem; }

/* Mix */
.mix-section { padding:130px 0; overflow:hidden; }
.mix-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr); align-items:center; gap:clamp(45px,7vw,105px); }
.mix-principles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:30px 0 0; padding:0; list-style:none; }
.mix-principles li { padding:17px 18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.024); }
.mix-principles span { display:block; color:#f3f5fb; font-size:.82rem; font-weight:780; }
.mix-principles p { margin:5px 0 0; color:var(--muted-2); font-size:.78rem; }

.mix-console { position:relative; min-height:590px; padding:30px; overflow:hidden; border:1px solid rgba(112,201,235,.18); border-radius:32px; background:linear-gradient(145deg,rgba(10,20,43,.9),rgba(3,8,19,.97)); box-shadow:0 45px 100px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.055),0 0 70px rgba(62,109,210,.08); transform:perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.mix-console::before { content:"STAR MARK MIX CONSOLE"; position:absolute; top:14px; left:22px; color:var(--muted-2); font-size:.55rem; font-weight:850; letter-spacing:.18em; }
.mix-meter-bank { height:150px; display:flex; align-items:flex-end; gap:8px; margin-top:22px; padding:14px; border:1px solid rgba(255,255,255,.065); border-radius:15px; background:rgba(1,6,15,.62); }
.mix-meter-bank i { flex:1; height:var(--meter,50%); border-radius:4px 4px 0 0; background:linear-gradient(180deg,#f2ce75 0 12%,#5de2b2 18% 64%,#4e83e3); box-shadow:0 0 10px rgba(83,203,226,.14); transform-origin:bottom; animation:meter-dance 1.3s ease-in-out infinite alternate; }
.mix-meter-bank i:nth-child(1){--meter:48%;animation-delay:-.2s}.mix-meter-bank i:nth-child(2){--meter:82%;animation-delay:-.8s}.mix-meter-bank i:nth-child(3){--meter:65%;animation-delay:-1.1s}.mix-meter-bank i:nth-child(4){--meter:93%;animation-delay:-.4s}.mix-meter-bank i:nth-child(5){--meter:54%;animation-delay:-.9s}.mix-meter-bank i:nth-child(6){--meter:75%;animation-delay:-.1s}.mix-meter-bank i:nth-child(7){--meter:61%;animation-delay:-.7s}.mix-meter-bank i:nth-child(8){--meter:86%;animation-delay:-.5s}.mix-meter-bank i:nth-child(9){--meter:46%;animation-delay:-1s}.mix-meter-bank i:nth-child(10){--meter:70%;animation-delay:-.35s}
.mix-spectrum { height:150px; margin-top:14px; overflow:hidden; border:1px solid rgba(255,255,255,.065); border-radius:15px; background:repeating-linear-gradient(90deg,transparent 0 49px,rgba(255,255,255,.025) 50px),repeating-linear-gradient(0deg,transparent 0 36px,rgba(255,255,255,.025) 37px),rgba(2,8,18,.65); }
.mix-spectrum canvas { width:100%; height:100%; }
.mix-faders { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:16px; }
.mix-faders > div { position:relative; height:145px; padding:9px 8px 23px; border:1px solid rgba(255,255,255,.055); border-radius:10px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); }
.mix-faders > div::before { content:""; position:absolute; top:12px; bottom:31px; left:50%; width:2px; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(var(--accent-rgb),.32)); transform:translateX(-50%); }
.mix-faders span { position:absolute; z-index:2; left:50%; bottom:calc(31px + var(--fader)); width:22px; height:10px; border:1px solid rgba(255,255,255,.35); border-radius:4px; background:#aebdd1; box-shadow:0 0 12px rgba(97,206,230,.26); transform:translate(-50%,50%); }
.mix-faders small { position:absolute; bottom:6px; left:0; right:0; color:var(--muted-2); font-size:.48rem; font-weight:850; letter-spacing:.08em; text-align:center; }
.mix-status { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:12px 14px; border:1px solid rgba(255,255,255,.06); border-radius:12px; background:rgba(255,255,255,.02); font-size:.56rem; letter-spacing:.1em; }
.mix-status span { color:var(--muted-2); }.mix-status strong { color:#dce4ef; }.mix-status i { color:var(--studio-green); font-style:normal; font-weight:850; }

/* Master */
.master-section { padding:126px 0; background:linear-gradient(180deg,transparent,rgba(3,8,19,.78) 20%,rgba(3,8,19,.82) 82%,transparent); }
.master-heading { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr); align-items:end; gap:50px; }
.master-heading > p { margin-bottom:7px; }
.master-command { display:grid; grid-template-columns:225px minmax(340px,.85fr) minmax(0,1.15fr); gap:16px; margin-top:52px; }
.master-mode-tabs { display:flex; flex-direction:column; gap:8px; padding:9px; border:1px solid var(--line); border-radius:22px; background:rgba(4,9,21,.72); }
.master-mode-tab { padding:18px 16px; border:1px solid transparent; border-radius:14px; color:var(--muted-2); background:transparent; cursor:pointer; text-align:left; transition:all 180ms ease; }
.master-mode-tab:hover { color:var(--text); background:rgba(255,255,255,.025); }
.master-mode-tab.is-active { color:var(--text); border-color:rgba(var(--accent-rgb),.29); background:rgba(var(--accent-rgb),.075); }
.master-mode-tab span { display:block; color:var(--accent-bright); font-size:.63rem; font-weight:850; letter-spacing:.14em; }
.master-mode-tab small { display:block; margin-top:5px; font-size:.69rem; }
.master-visual { position:relative; min-height:460px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:25px; background:radial-gradient(circle,rgba(var(--accent-rgb),.09),rgba(57,104,201,.04) 45%,rgba(3,8,19,.9) 75%); box-shadow:inset 0 1px 0 rgba(255,255,255,.045); }
.master-radar { position:relative; width:min(360px,90%); aspect-ratio:1; }
.master-radar svg { width:100%; height:100%; overflow:visible; fill:none; stroke:rgba(255,255,255,.09); stroke-width:1; }
.master-radar svg circle:first-child { stroke:rgba(var(--accent-rgb),.18); stroke-dasharray:4 8; animation:spin 38s linear infinite; transform-origin:center; }
.master-radar .master-shape { fill:rgba(var(--accent-rgb),.075); stroke:var(--accent); stroke-width:1.5; filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.3)); transition:d 400ms ease; animation:radar-pulse 3s ease-in-out infinite; }
.master-radar-labels span { position:absolute; color:var(--muted-2); font-size:.49rem; font-weight:850; letter-spacing:.11em; }
.master-radar-labels span:nth-child(1){top:1%;left:50%;transform:translateX(-50%)}.master-radar-labels span:nth-child(2){top:23%;right:-3%}.master-radar-labels span:nth-child(3){bottom:22%;right:0}.master-radar-labels span:nth-child(4){bottom:1%;left:50%;transform:translateX(-50%)}.master-radar-labels span:nth-child(5){bottom:22%;left:0}.master-radar-labels span:nth-child(6){top:23%;left:-3%}
.master-readout { position:absolute; left:20px; right:20px; bottom:20px; padding:13px 15px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(3,8,19,.72); backdrop-filter:blur(12px); }
.master-readout span { display:block; color:var(--muted-2); font-size:.5rem; font-weight:850; letter-spacing:.15em; }.master-readout strong { display:block; margin-top:4px; color:var(--accent-bright); font-size:.83rem; }.master-readout i { display:block; margin-top:2px; color:#9eaac0; font-size:.64rem; font-style:normal; }
.master-mode-panels { min-height:460px; padding:34px; border:1px solid var(--line); border-radius:25px; background:linear-gradient(145deg,rgba(9,17,36,.86),rgba(3,8,19,.92)); box-shadow:inset 0 1px 0 rgba(255,255,255,.045); }
.master-mode-panel { animation:panel-enter 400ms var(--ease-out) both; }
.master-mode-panel > p:first-child { margin:0; color:var(--accent-bright); font-size:.59rem; font-weight:850; letter-spacing:.16em; }
.master-mode-panel h3 { margin:13px 0 14px; font-size:clamp(1.65rem,2.8vw,2.75rem); line-height:1.03; letter-spacing:-.042em; }
.master-mode-panel h3 + p { margin:0; color:var(--muted); }
.master-mode-panel ul { display:grid; gap:10px; margin:24px 0 0; padding:0; list-style:none; }
.master-mode-panel li { position:relative; padding:12px 14px 12px 38px; border:1px solid rgba(255,255,255,.06); border-radius:12px; color:#c8d1e0; background:rgba(255,255,255,.018); font-size:.83rem; }
.master-mode-panel li::before { content:"✓"; position:absolute; left:14px; color:var(--studio-green); font-weight:900; }
.master-truth { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); align-items:center; gap:34px; margin-top:18px; padding:23px 27px; border:1px solid rgba(103,201,226,.14); border-radius:19px; background:rgba(69,126,211,.035); }
.master-truth strong { color:#f1f4fa; font-size:1rem; }.master-truth p { margin:0; color:var(--muted); font-size:.87rem; }

/* Deliverables */
.deliverables-section { padding:120px 0; }
.deliverables-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:44px; }
.deliverable-card { position:relative; min-height:230px; padding:27px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.deliverable-card::before { content:""; position:absolute; width:140px; height:140px; right:-65px; top:-65px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.15),transparent 69%); }
.deliverable-card > span { width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(var(--accent-rgb),.25); border-radius:16px; color:var(--accent-bright); background:rgba(var(--accent-rgb),.055); font-size:.59rem; font-weight:900; letter-spacing:.08em; }
.deliverable-card h3 { margin:20px 0 7px; font-size:1.08rem; }.deliverable-card p { margin:0; color:var(--muted); font-size:.86rem; }
.scope-note { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:20px; margin-top:17px; padding:20px 23px; border:1px solid rgba(var(--accent-rgb),.17); border-radius:17px; background:rgba(var(--accent-rgb),.035); }
.scope-note span { color:var(--accent-bright); font-size:.6rem; font-weight:900; letter-spacing:.16em; }.scope-note p { margin:0; color:var(--muted); font-size:.84rem; }

/* Project types */
.project-types { padding:122px 0; background:radial-gradient(circle at 50% 50%,rgba(75,120,220,.08),transparent 62%); }
.project-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-top:48px; }
.project-card { position:relative; display:flex; flex-direction:column; min-height:430px; padding:29px; overflow:hidden; border:1px solid var(--line); border-radius:25px; background:linear-gradient(155deg,rgba(10,18,38,.88),rgba(3,8,18,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.045); }
.project-card::after { content:""; position:absolute; width:230px; height:230px; right:-120px; bottom:-120px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.13),transparent 68%); }
.project-card--featured { border-color:rgba(var(--accent-rgb),.34); box-shadow:0 30px 70px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.065),0 0 45px rgba(var(--accent-rgb),.05); }
.project-card-top { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.project-card-top span { color:var(--accent-bright); font-size:.63rem; font-weight:900; letter-spacing:.15em; }.project-card-top i { padding:5px 8px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:var(--muted-2); font-size:.51rem; font-style:normal; font-weight:850; letter-spacing:.12em; }
.project-card h3 { margin:35px 0 8px; font-size:clamp(2rem,3.2vw,3.25rem); line-height:1; letter-spacing:-.045em; }.project-card > p { margin:0; color:var(--muted); }
.project-card ul { display:grid; gap:9px; margin:25px 0 30px; padding:0; list-style:none; }.project-card li { position:relative; padding-left:19px; color:#c4cedc; font-size:.84rem; }.project-card li::before { content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.project-quote { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); color:var(--accent-bright); font-size:.82rem; font-weight:780; }.project-quote span { transition:transform 180ms ease; }.project-quote:hover span { transform:translateX(5px); }
.service-only-grid { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:18px; padding:17px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.018); }
.service-only-grid div { margin-right:7px; color:var(--muted); font-size:.79rem; }.service-only-grid > span { padding:7px 10px; border:1px solid rgba(255,255,255,.075); border-radius:999px; color:#c8d1df; background:rgba(255,255,255,.025); font-size:.69rem; }

/* Quote form */
.quote-section { padding:130px 0; }
.quote-grid { display:grid; grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr); align-items:start; gap:clamp(46px,7vw,96px); }
.quote-copy { position:sticky; top:calc(var(--header-height) + 35px); }
.quote-steps { display:grid; gap:12px; margin-top:34px; }
.quote-steps article { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:17px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.022); }
.quote-steps article > span { width:35px; height:35px; display:grid; place-items:center; border:1px solid rgba(var(--accent-rgb),.27); border-radius:50%; color:var(--accent-bright); background:rgba(var(--accent-rgb),.045); font-size:.69rem; font-weight:850; }
.quote-steps h3 { margin:0; font-size:.9rem; }.quote-steps p { margin:4px 0 0; color:var(--muted-2); font-size:.78rem; }
.production-brief { padding:clamp(24px,3.4vw,38px); border:1px solid rgba(255,255,255,.12); border-radius:30px; background:linear-gradient(145deg,rgba(10,18,39,.91),rgba(3,8,18,.96)); box-shadow:0 40px 96px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05); }
.form-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:27px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.form-header p { margin:0; color:var(--accent-bright); font-size:.56rem; font-weight:900; letter-spacing:.17em; }.form-header h3 { margin:4px 0 0; font-size:1.5rem; letter-spacing:-.03em; }.form-header > span { color:var(--muted-2); font-size:.56rem; font-weight:800; letter-spacing:.1em; text-align:right; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.production-brief label > span,.service-checks legend { display:block; margin-bottom:7px; color:#dfe5ef; font-size:.72rem; font-weight:720; }
.production-brief input:not([type="checkbox"]),.production-brief select,.production-brief textarea { width:100%; border:1px solid rgba(255,255,255,.11); border-radius:12px; color:var(--text); background:rgba(0,4,13,.48); outline:none; transition:border-color 180ms ease,box-shadow 180ms ease,background 180ms ease; }
.production-brief input:not([type="checkbox"]),.production-brief select { height:48px; padding:0 13px; }
.production-brief textarea { min-height:126px; padding:12px 13px; resize:vertical; }
.production-brief select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted-2) 50%),linear-gradient(135deg,var(--muted-2) 50%,transparent 50%); background-position:calc(100% - 17px) 21px,calc(100% - 12px) 21px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.production-brief select option { color:#f5f7fb; background:#081021; }
.production-brief input:focus,.production-brief select:focus,.production-brief textarea:focus { border-color:rgba(var(--accent-rgb),.5); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08); background:rgba(2,7,17,.7); }
.production-brief .is-invalid { border-color:rgba(255,135,135,.62)!important; box-shadow:0 0 0 3px rgba(255,103,103,.07)!important; }
.field-error { display:block; min-height:1em; margin-top:4px; color:#ffaaa8; font-size:.61rem; }
.service-checks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:24px 0 0; padding:0; border:0; }
.service-checks legend { grid-column:1/-1; }
.service-checks label { position:relative; cursor:pointer; }
.service-checks label input { position:absolute; opacity:0; pointer-events:none; }
.service-checks label > span { height:43px; display:flex; align-items:center; justify-content:center; margin:0; padding:0 10px; border:1px solid rgba(255,255,255,.09); border-radius:11px; color:var(--muted); background:rgba(255,255,255,.018); text-align:center; transition:all 180ms ease; }
.service-checks label input:focus-visible + span { outline:2px solid var(--accent-bright); outline-offset:3px; }
.service-checks label input:checked + span { color:#fff; border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.095); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.service-checks .field-error { grid-column:1/-1; }
.form-wide { display:block; margin-top:17px; }
.rights-confirmation { display:flex!important; align-items:flex-start; gap:10px; margin-top:18px; cursor:pointer; }
.rights-confirmation input { flex:0 0 17px; width:17px; height:17px; margin:3px 0 0; accent-color:var(--accent); }
.rights-confirmation span { margin:0!important; color:var(--muted)!important; font-size:.72rem!important; font-weight:600!important; }
.form-submit { width:100%; margin-top:20px; }
.form-privacy { margin:13px 0 0; color:var(--muted-2); font-size:.65rem; text-align:center; }

/* Final CTA */
.production-final-cta { min-height:660px; display:grid; place-items:center; padding:120px 0 140px; overflow:hidden; text-align:center; }
.production-final-cta::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 50% 48%,rgba(var(--accent-rgb),.12),rgba(46,91,185,.055) 32%,transparent 67%); }
.sound-portal { position:absolute; top:50%; left:50%; width:min(730px,75vw); aspect-ratio:1; transform:translate(-50%,-50%); opacity:.55; }
.sound-portal > span { position:absolute; inset:var(--portal-inset); border:1px solid rgba(var(--accent-rgb),.17); border-radius:50%; animation:spin var(--portal-speed) linear infinite; }
.sound-portal > span::before { content:""; position:absolute; width:7px; height:7px; top:8%; left:29%; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 14px var(--accent-bright); }
.sound-portal > span:nth-child(1){--portal-inset:3%;--portal-speed:42s}.sound-portal > span:nth-child(2){--portal-inset:14%;--portal-speed:31s;animation-direction:reverse}.sound-portal > span:nth-child(3){--portal-inset:26%;--portal-speed:21s}
.sound-portal canvas { position:absolute; top:36%; left:-8%; width:116%; height:28%; filter:drop-shadow(0 0 11px rgba(95,213,235,.3)); }
.sound-portal img { position:absolute; top:50%; left:50%; width:20%; filter:drop-shadow(0 0 25px rgba(var(--accent-rgb),.3)); transform:translate(-50%,-50%); }
.production-cta-content { position:relative; z-index:3; max-width:900px; }
.production-final-cta h2 { margin:0; font-size:clamp(2.7rem,6vw,6.4rem); line-height:.93; letter-spacing:-.062em; text-wrap:balance; }
.production-final-cta h2 span { color:var(--accent-bright); }
.production-final-cta .production-cta-content > p:not(.section-kicker) { max-width:680px; margin:24px auto 0; color:var(--muted); font-size:1.04rem; }
.production-final-cta .cta-actions { justify-content:center; margin-top:30px; }

/* Motion */
@keyframes sonic-breathe { 0%,100%{transform:scale(.95);opacity:.65}50%{transform:scale(1.07);opacity:1} }
@keyframes sonic-pulse { 0%{transform:scale(.8);opacity:.6}75%,100%{transform:scale(1.35);opacity:0} }
@keyframes meter-dance { from{transform:scaleY(.52);filter:saturate(.85)}to{transform:scaleY(1);filter:saturate(1.25)} }
@keyframes playhead-travel { 0%{left:8%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:92%;opacity:0} }
@keyframes panel-enter { from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none} }
@keyframes float-soft { 0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)} }
@keyframes radar-pulse { 0%,100%{opacity:.72;transform:scale(.98);transform-origin:center}50%{opacity:1;transform:scale(1.025);transform-origin:center} }

html[data-motion="reduced"] .sonic-ring,
html[data-motion="reduced"] .studio-core::before,
html[data-motion="reduced"] .beat-orbit svg circle:first-child,
html[data-motion="reduced"] .sound-portal > span { animation-duration:90s; }
html[data-motion="reduced"] .console-screen span,
html[data-motion="reduced"] .mix-meter-bank i { animation-duration:4s; }
html[data-motion="reduced"] .playhead,
html[data-motion="reduced"] .vocal-playhead { animation-duration:18s; }
html[data-motion="off"] .sonic-ring,
html[data-motion="off"] .sonic-lab::before,
html[data-motion="off"] .studio-core::before,
html[data-motion="off"] .studio-core-halo,
html[data-motion="off"] .console-screen span,
html[data-motion="off"] .playhead,
html[data-motion="off"] .beat-orbit::before,
html[data-motion="off"] .beat-orbit svg circle:first-child,
html[data-motion="off"] .beat-planet,
html[data-motion="off"] .vocal-playhead,
html[data-motion="off"] .mix-meter-bank i,
html[data-motion="off"] .master-radar svg circle:first-child,
html[data-motion="off"] .master-radar .master-shape,
html[data-motion="off"] .sound-portal > span { animation:none!important; }
html[data-motion="off"] .sonic-lab { transition:none; }

/* Responsive */
@media (max-width: 1180px) {
  .production-hero-grid { grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); gap:30px; }
  .production-hero-visual { min-height:600px; }
  .sonic-lab { width:min(600px,53vw); }
  .production-assurances { grid-template-columns:1fr; }
  .production-assurances li { min-height:0; }
  .master-command { grid-template-columns:190px minmax(300px,.85fr) minmax(0,1fr); }
  .mix-grid { grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr); gap:45px; }
}

@media (max-width: 980px) {
  .production-hero { min-height:auto; padding-top:calc(var(--header-height) + 48px); }
  .production-hero-grid,.creation-grid,.mix-grid,.quote-grid { grid-template-columns:1fr; }
  .production-hero h1 { max-width:820px; }
  .production-hero-visual { min-height:670px; }
  .sonic-lab { width:min(650px,92vw); }
  .premium-alert { grid-template-columns:auto 1fr; }
  .premium-alert .button { grid-column:1/-1; width:max-content; }
  .stage-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:22px; }
  .workstation-display { margin-top:10px; border-top:1px solid rgba(255,255,255,.12); border-radius:28px; }
  .creation-visual { order:2; min-height:590px; }
  .beat-orbit { width:min(560px,82vw); }
  .mix-console { min-height:560px; transform:none; }
  .master-heading { grid-template-columns:1fr; gap:16px; }
  .master-command { grid-template-columns:1fr 1fr; }
  .master-mode-tabs { grid-column:1/-1; flex-direction:row; }
  .master-mode-tab { flex:1; }
  .master-mode-panels { min-height:460px; }
  .quote-copy { position:static; }
}

@media (max-width: 760px) {
  .production-hero { padding-bottom:55px; }
  .production-hero h1 { font-size:clamp(2.75rem,14vw,4.5rem); }
  .production-hero-lead { font-size:.96rem; }
  .production-hero-visual { min-height:540px; }
  .sonic-lab { width:min(530px,103vw); }
  .studio-core { width:142px; }
  .holographic-console { width:79%; bottom:5%; }
  .sonic-label { padding:6px 9px; font-size:.52rem; }
  .frequency-chip { display:none; }
  .premium-alert { grid-template-columns:1fr; }
  .premium-alert-icon { width:52px; }
  .premium-alert .button { width:100%; }
  .clarity-cards,.deliverables-grid,.project-cards { grid-template-columns:1fr; }
  .stage-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .display-wave { height:125px; }
  .display-panels { min-height:430px; padding:28px 22px; }
  .production-stage-panel ul { grid-template-columns:1fr; }
  .creation-visual { min-height:510px; }
  .beat-orbit { width:min(500px,100vw); }
  .beat-planet { width:66px; }
  .beat-core { width:145px; }
  .feature-grid,.mix-principles { grid-template-columns:1fr; }
  .vocal-timeline { min-height:255px; padding:44px 16px 26px; }
  .vocal-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vocal-controls article { min-height:175px; border-bottom:1px solid var(--line); }
  .vocal-controls article:nth-child(2) { border-right:0; }
  .vocal-controls article:nth-child(3),.vocal-controls article:nth-child(4) { border-bottom:0; }
  .mix-console { min-height:500px; padding:22px 16px; }
  .mix-meter-bank { height:130px; }.mix-spectrum { height:120px; }.mix-faders { gap:5px; }.mix-faders > div { height:125px; }
  .master-command { grid-template-columns:1fr; }
  .master-mode-tabs { flex-direction:column; }
  .master-visual { min-height:390px; }
  .master-mode-panels { min-height:auto; padding:27px 22px; }
  .master-truth { grid-template-columns:1fr; gap:10px; }
  .scope-note { grid-template-columns:1fr; gap:5px; }
  .project-card { min-height:390px; }
  .form-grid { grid-template-columns:1fr; }
  .service-checks { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-header { flex-direction:column; }.form-header > span { text-align:left; }
  .production-final-cta { min-height:620px; }
  .sound-portal { width:110vw; }
}

@media (max-width: 520px) {
  .breadcrumbs { margin-bottom:25px; }
  .production-hero-grid { gap:15px; }
  .production-hero-visual { min-height:455px; }
  .sonic-lab { width:114vw; }
  .sonic-label--compose { left:19%; }.sonic-label--record { right:8%; }.sonic-label--mix { left:8%; }.sonic-label--master { right:6%; }
  .holographic-console { width:76%; padding:10px; border-radius:16px; }
  .console-screen { height:50px; }.console-channels i { height:42px; }
  .production-assurances { margin-top:25px; }
  .premium-alert { padding:22px; border-radius:22px; }
  .stage-tabs { gap:5px; padding:6px; }.production-stage-tab { padding:12px 10px; }.production-stage-tab small { display:none; }
  .display-header { padding:10px 13px; font-size:.48rem; }.display-header i { display:none; }
  .creation-visual { min-height:410px; }.beat-orbit { width:108vw; }.beat-planet { width:58px; font-size:.48rem; }.beat-core { width:125px; }
  .vocal-controls { grid-template-columns:1fr; }.vocal-controls article { min-height:auto; border-right:0; border-bottom:1px solid var(--line)!important; }.vocal-controls article:last-child { border-bottom:0!important; }
  .mix-console { min-height:430px; }.mix-meter-bank { height:105px; }.mix-spectrum { height:105px; }.mix-faders > div { height:105px; }.mix-status { font-size:.46rem; }
  .master-radar { width:290px; }.master-visual { min-height:350px; }
  .deliverable-card { min-height:200px; }
  .service-checks { grid-template-columns:1fr; }
  .production-brief { padding:22px 16px; border-radius:23px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion="auto"] .sonic-ring,
  html[data-motion="auto"] .sonic-lab::before,
  html[data-motion="auto"] .studio-core::before,
  html[data-motion="auto"] .studio-core-halo,
  html[data-motion="auto"] .console-screen span,
  html[data-motion="auto"] .playhead,
  html[data-motion="auto"] .beat-orbit::before,
  html[data-motion="auto"] .beat-orbit svg circle:first-child,
  html[data-motion="auto"] .beat-planet,
  html[data-motion="auto"] .vocal-playhead,
  html[data-motion="auto"] .mix-meter-bank i,
  html[data-motion="auto"] .master-radar svg circle:first-child,
  html[data-motion="auto"] .master-radar .master-shape,
  html[data-motion="auto"] .sound-portal > span { animation:none!important; }
}