/*
Theme Name: Melody Mechanics Neon Studio
Theme URI: https://melodymechanics.com/
Author: Melody Mechanics
Description: A cinematic, performance-focused landing page for Melody Mechanics DJ Institute.
Version: 1.1.1
Text Domain: melody-mechanics
*/

:root {
  --mm-bg: #00000a;
  --mm-bg-deep: #000004;
  --mm-surface: #050616;
  --mm-surface-raised: #080a1d;
  --mm-line: rgba(132, 137, 190, 0.26);
  --mm-white: #fff;
  --mm-soft: #d6d7d6;
  --mm-muted: rgba(255, 255, 255, 0.7);
  --mm-cyan: #1490df;
  --mm-blue: #1846f8;
  --mm-violet: #7030ff;
  --mm-magenta: #b201f9;
  --mm-brand: linear-gradient(90deg, var(--mm-blue), var(--mm-violet) 52%, var(--mm-magenta));
  --mm-border: linear-gradient(90deg, var(--mm-cyan), var(--mm-violet) 55%, var(--mm-magenta));
  --mm-display: "Nunito Sans", Inter, Arial, sans-serif;
  --mm-body: Inter, Arial, sans-serif;
  --mm-mono: "Space Mono", "Courier New", monospace;
  --mm-module: "Intel One Mono", "Space Mono", monospace;
  --mm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--mm-bg);
}

body {
  margin: 0;
  color: var(--mm-white);
  background:
    radial-gradient(circle at 12% 14%, rgba(24, 70, 248, 0.08), transparent 26rem),
    radial-gradient(circle at 88% 32%, rgba(178, 1, 249, 0.07), transparent 32rem),
    var(--mm-bg);
  font-family: var(--mm-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--mm-cyan);
  outline-offset: 4px;
}

::selection {
  color: #fff;
  background: rgba(112, 48, 255, 0.8);
}

.skip-link {
  position: fixed;
  z-index: 99999;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: #fff;
  background: #11132c;
  border: 1px solid var(--mm-cyan);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.mm-site {
  position: relative;
  max-width: 1920px;
  min-width: 320px;
  margin: 0 auto;
  overflow: clip;
  background: var(--mm-bg);
}

.cursor-aura {
  position: fixed;
  z-index: 100;
  width: 240px;
  height: 240px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(55, 102, 255, 0.11), rgba(177, 1, 249, 0.04) 38%, transparent 68%);
  transform: translate3d(calc(var(--mx, -300px) - 50%), calc(var(--my, -300px) - 50%), 0);
  transition: opacity 240ms ease;
  mix-blend-mode: screen;
}

.scroll-progress {
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: var(--scroll, 0%);
  height: 100%;
  background: var(--mm-brand);
  box-shadow: 0 0 12px rgba(112, 48, 255, 0.8);
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 70px;
  padding: 0 clamp(24px, 5.7vw, 82px);
  border-bottom: 1px solid rgba(108, 111, 173, 0.13);
  transition: min-height 240ms ease, background 240ms ease, backdrop-filter 240ms ease;
}

.site-header.is-sticky {
  position: fixed;
  min-height: 68px;
  background: rgba(0, 0, 10, 0.76);
  border-bottom-color: rgba(93, 75, 180, 0.28);
  backdrop-filter: blur(16px);
}

body.admin-bar .site-header.is-sticky {
  top: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

@media (min-width: 821px) {
  .brand {
    opacity: 0;
  }
}

.brand-mark {
  position: relative;
  width: 36px;
  height: 40px;
  filter: drop-shadow(0 0 12px rgba(112, 48, 255, 0.65));
}

.brand-mark::before,
.brand-mark::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  background: var(--mm-brand);
}

.brand-mark::before {
  bottom: 1px;
  left: 1px;
  width: 16px;
  height: 11px;
}

.brand-mark::after {
  right: 0;
  bottom: 8px;
  width: 16px;
  height: 11px;
}

.brand-mark i,
.brand-mark b {
  position: absolute;
  width: 4px;
  border-radius: 4px;
  background: var(--mm-brand);
  transform: rotate(10deg);
}

.brand-mark i {
  top: 2px;
  left: 14px;
  height: 33px;
}

.brand-mark b {
  top: 8px;
  right: 2px;
  height: 26px;
}

.brand-copy {
  display: grid;
  line-height: 0.83;
}

.brand-copy strong {
  font-family: var(--mm-display);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.brand-copy small {
  margin-top: 5px;
  font-family: var(--mm-mono);
  font-size: 8px;
  letter-spacing: 0.27em;
}

.desktop-nav {
  display: flex;
  gap: 34px;
  margin: 0 auto;
}

.desktop-nav a,
.mini-cta {
  position: relative;
  font-family: var(--mm-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.desktop-nav a {
  color: rgba(255, 255, 255, 0.62);
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--mm-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.desktop-nav a:hover {
  color: #fff;
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}

.mini-cta {
  min-width: 152px;
  padding: 11px 22px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: linear-gradient(var(--mm-bg), var(--mm-bg)) padding-box, var(--mm-border) border-box;
  box-shadow: 0 0 22px rgba(76, 32, 222, 0.08);
}

.scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  background: var(--mm-bg);
  scroll-margin-top: 72px;
}

.scene::after {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 80px;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(0, 0, 10, 0.82));
}

.scene-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.hero {
  aspect-ratio: 1440 / 900;
  min-height: 760px;
  max-height: 1000px;
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 10, 0.72) 0, rgba(0, 0, 10, 0.22) 47%, transparent 75%);
}

.hero-art {
  transform: scale(1.025) translate3d(var(--hero-x, 0), var(--hero-y, 0), 0);
  transition: transform 600ms var(--mm-ease);
}

.hero-copy {
  position: absolute;
  z-index: 3;
  top: 22.3%;
  left: 5.7%;
  width: min(48%, 680px);
}

.eyebrow {
  margin: 0 0 26px;
  color: transparent;
  background: linear-gradient(90deg, var(--mm-cyan), var(--mm-magenta));
  background-clip: text;
  font-family: var(--mm-mono);
  font-size: clamp(10px, 1.1vw, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  color: #fff;
  font-family: var(--mm-display);
  font-size: clamp(40px, 3.34vw, 48px);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.hero h1 em {
  color: transparent;
  background: linear-gradient(90deg, #385dff, #7b27ff 48%, #d700f7);
  background-clip: text;
  font-style: italic;
  font-weight: 800;
  white-space: nowrap;
  filter: drop-shadow(0 0 18px rgba(112, 48, 255, 0.22));
}

.hero-last {
  white-space: nowrap;
}

.hero-intro {
  width: min(100%, 520px);
  margin: 29px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.48;
}

.hero-actions {
  display: flex;
  gap: 18px;
  margin-top: clamp(54px, 7vw, 96px);
}

@media (min-width: 821px) {
  .mini-cta,
  .hero-actions .button {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .mini-cta:hover,
  .hero-actions .button:hover {
    box-shadow: none;
  }
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  overflow: hidden;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 220ms var(--mm-ease), box-shadow 220ms ease, filter 220ms ease;
}

.button::before {
  position: absolute;
  top: -100%;
  left: -35%;
  width: 28%;
  height: 300%;
  content: "";
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(24deg);
  transition: left 460ms ease;
}

.button:hover::before {
  left: 118%;
}

.button:hover {
  transform: translateY(-3px);
}

.button-primary {
  background: var(--mm-brand);
  box-shadow: 0 9px 32px rgba(49, 55, 244, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.button-primary:hover {
  filter: saturate(1.2) brightness(1.08);
  box-shadow: 0 12px 42px rgba(79, 43, 255, 0.3);
}

.button-secondary {
  background: linear-gradient(rgba(1, 2, 14, 0.82), rgba(1, 2, 14, 0.82)) padding-box, var(--mm-border) border-box;
}

.button-secondary:hover {
  box-shadow: 0 0 24px rgba(112, 48, 255, 0.2);
}

.hero-signals {
  position: absolute;
  z-index: 3;
  top: 34%;
  right: 3.6%;
  display: grid;
  gap: clamp(18px, 2.5vw, 36px);
}

.hero-signals span {
  display: flex;
  align-items: center;
  min-width: 126px;
  min-height: 68px;
  padding: 10px 12px 10px 50px;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-family: var(--mm-mono);
  font-size: clamp(8px, 0.85vw, 12px);
  line-height: 1.45;
  text-transform: uppercase;
}

.founder-label {
  position: absolute;
  z-index: 4;
  right: 9.5%;
  bottom: 20.5%;
  padding: 7px 38px;
  color: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--mm-brand);
  background-clip: text;
  font-family: var(--mm-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.audio-strip {
  position: absolute;
  z-index: 5;
  right: 4%;
  bottom: 7.2%;
  left: 4%;
  display: grid;
  grid-template-columns: 44px 156px 1fr auto;
  align-items: center;
  min-height: 70px;
  gap: 16px;
  padding: 8px 18px;
  border: 1px solid rgba(92, 87, 191, 0.28);
  border-radius: 9px;
  background: rgba(4, 5, 22, 0.68);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}

.audio-toggle {
  display: grid;
  width: 38px;
  height: 38px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(11, 15, 44, 0.9);
  place-items: center;
  cursor: pointer;
}

.audio-title {
  display: grid;
  font-family: var(--mm-mono);
  text-transform: uppercase;
}

.audio-title strong {
  font-size: 10px;
  letter-spacing: 0.08em;
}

.audio-title small {
  margin-top: 4px;
  color: var(--mm-muted);
  font-size: 8px;
  letter-spacing: 0.13em;
}

.waveform {
  display: flex;
  align-items: center;
  height: 34px;
  gap: 2px;
  overflow: hidden;
}

.waveform i {
  display: block;
  flex: 1;
  min-width: 2px;
  height: calc(var(--bar) * 1.25px);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--mm-cyan), var(--mm-blue) 50%, var(--mm-magenta));
  opacity: 0.72;
  transform-origin: center;
}

.audio-strip.is-playing .waveform i {
  animation: wave 760ms ease-in-out infinite alternate;
  animation-delay: calc(var(--bar) * -45ms);
}

.audio-time {
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--mm-mono);
  font-size: 8px;
}

@keyframes wave {
  from { transform: scaleY(0.45); opacity: 0.45; }
  to { transform: scaleY(1.18); opacity: 0.9; }
}

.courses { aspect-ratio: 1440 / 734; }
.benefits { aspect-ratio: 1440 / 551; }
.academy { aspect-ratio: 1440 / 811; }
.spotlight { aspect-ratio: 1440 / 811; }
.journey { aspect-ratio: 1440 / 773; }
.faq { aspect-ratio: 1440 / 749; }
.site-footer { aspect-ratio: 1440 / 628; }

.section-heading {
  position: absolute;
  z-index: 4;
  top: 6.5%;
  left: 50%;
  width: min(78%, 900px);
  text-align: center;
  transform: translateX(-50%);
}

.section-heading h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--mm-display);
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.04);
}

.section-heading h2::before,
.section-heading h2::after {
  position: absolute;
  top: 50%;
  right: calc(100% + 22px);
  width: clamp(70px, 15vw, 240px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(84, 93, 165, 0.72));
}

.section-heading h2::after {
  right: auto;
  left: calc(100% + 22px);
  background:
    linear-gradient(90deg, rgba(84, 93, 165, 0.72), transparent),
    radial-gradient(circle at 28%, var(--mm-blue), transparent 18%);
}

.section-heading > p {
  margin: 14px 0 0;
  color: transparent;
  background: var(--mm-brand);
  background-clip: text;
  font-family: var(--mm-module);
  font-size: clamp(12px, 1.67vw, 24px);
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.section-heading > p span {
  color: #fff;
}

.courses .section-heading { top: 5.3%; }

.course-grid {
  position: absolute;
  z-index: 4;
  right: 5.2%;
  bottom: 10.2%;
  left: 5.2%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4.8%;
}

.course-card {
  position: relative;
  min-height: clamp(125px, 16vw, 230px);
  padding: 7% 4% 2%;
  border-radius: 12px;
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 240ms var(--mm-ease), background 240ms ease;
}

.course-card:hover {
  background: linear-gradient(180deg, transparent 22%, rgba(7, 8, 28, 0.74));
}

.module-label {
  margin: 0 0 clamp(14px, 2.1vw, 30px);
  color: var(--mm-cyan);
  font-family: var(--mm-module);
  font-size: clamp(10px, 1.32vw, 19px);
  text-transform: uppercase;
}

.module-label b {
  color: var(--mm-magenta);
  font-weight: 400;
}

.course-card h3 {
  margin: 0 0 9px;
  font-size: clamp(15px, 1.88vw, 27px);
  line-height: 1.1;
  text-transform: uppercase;
}

.course-card > p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(10px, 1.33vw, 19px);
}

.benefits .section-heading { top: 18.5%; }

.benefit-grid {
  position: absolute;
  z-index: 4;
  right: 7.5%;
  bottom: 24%;
  left: 11.3%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6.5%;
}

.benefit-grid article {
  padding-left: 0;
}

.benefit-grid h3 {
  margin: 0 0 6px;
  font-size: clamp(12px, 1.4vw, 20px);
  line-height: 1.15;
  text-transform: uppercase;
}

.benefit-grid p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(10px, 1.27vw, 18px);
  line-height: 1.4;
}

.academy .section-heading { top: 8.2%; }

.gallery-art {
  transition: filter 500ms ease, transform 900ms var(--mm-ease);
}

.academy:hover .gallery-art {
  filter: saturate(1.12) contrast(1.03);
  transform: scale(1.012);
}

.gallery-shimmer {
  position: absolute;
  z-index: 3;
  top: 18%;
  bottom: 10%;
  left: -20%;
  width: 12%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(66, 104, 255, 0.12), transparent);
  transform: skewX(-18deg);
  animation: gallerySweep 8s ease-in-out infinite;
}

@keyframes gallerySweep {
  0%, 20% { left: -20%; opacity: 0; }
  35% { opacity: 1; }
  60%, 100% { left: 110%; opacity: 0; }
}

.spotlight .section-heading { top: 8.4%; }

.spotlight-art-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.spotlight-art {
  transition: transform 620ms var(--mm-ease), filter 420ms ease;
}

.spotlight:hover .spotlight-art {
  filter: saturate(1.1);
}

.spot-arrow {
  position: absolute;
  z-index: 5;
  top: 55%;
  display: grid;
  width: 46px;
  height: 46px;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 50%;
  background: linear-gradient(var(--mm-bg), var(--mm-bg)) padding-box, var(--mm-border) border-box;
  opacity: 0;
  place-items: center;
  cursor: pointer;
  transition: opacity 200ms ease, transform 200ms ease;
}

.spotlight:hover .spot-arrow,
.spot-arrow:focus-visible {
  opacity: 1;
}

.spot-arrow:hover { transform: scale(1.08); }
.spot-prev { left: 1.4%; }
.spot-next { right: 1.4%; }

.spotlight-labels {
  position: absolute;
  z-index: 2;
  right: 9%;
  bottom: 16%;
  left: 9%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
  transform: translateY(8px);
}

.spotlight:hover .spotlight-labels {
  opacity: 1;
  transform: none;
}

.spotlight-labels span {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--mm-mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.journey .section-heading { top: 12.5%; }

.journey-layout {
  position: absolute;
  z-index: 4;
  top: 35.5%;
  right: 10%;
  bottom: 12%;
  left: 9.8%;
  display: grid;
  grid-template-columns: 43% 57%;
  align-items: stretch;
}

.journey-copy {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr;
  align-content: center;
  align-items: center;
  gap: 24px;
  padding: 2% 9% 2% 6%;
}

.journey-copy > p {
  max-width: 260px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(14px, 1.76vw, 25px);
  line-height: 1.46;
}

.location-pulse {
  position: relative;
  display: grid;
  width: clamp(70px, 7vw, 104px);
  aspect-ratio: 1;
  border: 2px solid var(--mm-cyan);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(20, 144, 223, 0.2) inset, 0 0 28px rgba(20, 144, 223, 0.12);
  place-items: center;
}

.location-pulse::before,
.location-pulse::after {
  position: absolute;
  width: 24%;
  height: 24%;
  content: "";
  border: 2px solid var(--mm-cyan);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.location-pulse::after {
  width: 8%;
  height: 8%;
  border: 0;
  background: var(--mm-cyan);
  transform: translateY(-6px);
}

.location-pulse i {
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(20, 144, 223, 0.4);
  border-radius: 50%;
  animation: locationPing 2.2s ease-out infinite;
}

@keyframes locationPing {
  0% { opacity: 0.8; transform: scale(0.82); }
  100% { opacity: 0; transform: scale(1.35); }
}

.studio-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
  margin-top: 12%;
}

.studio-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: 7px;
  font-family: var(--mm-mono);
  font-size: clamp(8px, 0.85vw, 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 180ms ease, box-shadow 180ms ease;
}

.studio-link::before {
  margin-right: 8px;
  content: "◎";
}

.studio-link.cyan { color: var(--mm-cyan); }
.studio-link.magenta { color: var(--mm-magenta); }
.studio-link:hover { background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 20px rgba(112, 48, 255, 0.16); }

.enquiry-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  gap: 16px;
  padding: 5%;
  border: 1px solid rgba(70, 70, 135, 0.34);
  border-radius: 10px;
  background: rgba(2, 3, 16, 0.94);
}

.enquiry-form label {
  position: relative;
  display: block;
}

.enquiry-form label.full,
.enquiry-form .full {
  grid-column: 1 / -1;
}

.enquiry-form label > span {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 14px;
  color: rgba(255, 255, 255, 0.56);
  font-family: var(--mm-mono);
  font-size: clamp(8px, 0.72vw, 11px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.enquiry-form input,
.enquiry-form select {
  width: 100%;
  height: clamp(50px, 4.4vw, 64px);
  padding: 22px 14px 6px;
  color: #fff;
  border: 1px solid rgba(93, 96, 162, 0.36);
  border-radius: 7px;
  outline: none;
  background: rgba(3, 4, 19, 0.72);
  font-size: 14px;
  transition: border 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.enquiry-form select {
  color: rgba(255, 255, 255, 0.7);
}

.enquiry-form option {
  color: #fff;
  background: #080a1d;
}

.enquiry-form input:focus,
.enquiry-form select:focus {
  border-color: var(--mm-cyan);
  background: rgba(5, 7, 28, 0.92);
  box-shadow: 0 0 0 3px rgba(20, 144, 223, 0.1), 0 0 24px rgba(112, 48, 255, 0.14);
}

.enquiry-form .button {
  width: 100%;
  min-height: clamp(50px, 4.4vw, 64px);
}

.form-notice {
  position: absolute;
  z-index: 6;
  right: 12%;
  bottom: 6.5%;
  left: 54%;
  margin: 0;
  font-size: 13px;
  text-align: center;
}

.form-notice.is-success { color: #53e6c2; }
.form-notice.is-error { color: #ff738b; }

.faq .section-heading { top: 14.5%; }

.faq-art {
  opacity: 0.66;
}

.faq-list {
  position: absolute;
  z-index: 4;
  top: 31.8%;
  right: 5.1%;
  left: 5.1%;
  display: grid;
  gap: clamp(8px, 1vw, 15px);
  isolation: isolate;
}

.faq-list::before {
  position: absolute;
  z-index: -1;
  inset: -10px 0 -54px;
  content: "";
  background: #030415;
}

.faq details {
  overflow: hidden;
  border: 1px solid rgba(65, 69, 131, 0.46);
  border-radius: 8px;
  background: rgba(4, 5, 23, 0.98);
  transition: border-color 180ms ease, background 180ms ease;
}

.faq details[open] {
  border-color: rgba(112, 48, 255, 0.78);
  background: rgba(7, 7, 30, 0.96);
}

.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(54px, 5.15vw, 74px);
  padding: 0 72px 0 26px;
  font-size: clamp(14px, 2.04vw, 29px);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::before,
.faq summary::after {
  position: absolute;
  top: 50%;
  right: 28px;
  width: 16px;
  height: 2px;
  content: "";
  background: #fff;
  transform: translateY(-50%);
  transition: transform 220ms ease, background 220ms ease;
}

.faq summary::after { transform: translateY(-50%) rotate(90deg); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(0); }
.faq details[open] summary::before,
.faq details[open] summary::after { background: var(--mm-magenta); }

.faq details p {
  max-width: 940px;
  margin: -4px 72px 20px 26px;
  color: var(--mm-muted);
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.55;
}

.site-footer .scene-art {
  object-position: center top;
}

.site-footer::after { display: none; }

.footer-content {
  position: absolute;
  z-index: 4;
  top: 23%;
  right: 8%;
  bottom: 17%;
  left: 8%;
  display: grid;
  grid-template-columns: 34% 31% 35%;
  align-items: center;
}

.footer-brand {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 12%;
  border-right: 1px solid rgba(96, 98, 161, 0.4);
}

.footer-brand strong {
  max-width: 250px;
  color: transparent;
  background: var(--mm-brand);
  background-clip: text;
  font-family: var(--mm-display);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1;
  text-transform: uppercase;
}

.footer-brand small {
  margin-top: 6px;
  font-family: var(--mm-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
}

.footer-brand p {
  max-width: 280px;
  margin: 36px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.46;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-self: stretch;
  padding: 8% 16%;
  border-right: 1px solid rgba(96, 98, 161, 0.4);
}

.footer-nav div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.footer-nav a {
  width: fit-content;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--mm-mono);
  font-size: clamp(10px, 1.24vw, 18px);
  font-weight: 700;
  text-transform: uppercase;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-nav a:hover {
  color: #fff;
  transform: translateX(4px);
}

.footer-action {
  display: grid;
  align-content: center;
  gap: 42px;
  padding-left: 16%;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.socials a {
  display: grid;
  width: 42px;
  height: 42px;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid transparent;
  border-radius: 50%;
  background: linear-gradient(var(--mm-bg), var(--mm-bg)) padding-box, var(--mm-border) border-box;
  font-family: var(--mm-mono);
  font-size: 9px;
  place-items: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.socials a:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(112, 48, 255, 0.28);
}

.footer-action .button {
  width: 100%;
}

.floating-enquire {
  position: fixed;
  z-index: 40;
  right: 22px;
  bottom: 22px;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 19px;
  border-radius: 8px;
  background: var(--mm-brand);
  box-shadow: 0 12px 36px rgba(68, 37, 244, 0.36);
  font-family: var(--mm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-reveal] {
  opacity: 0;
  transition: opacity 680ms var(--mm-ease), transform 680ms var(--mm-ease);
  transition-delay: var(--delay, 0ms);
}

[data-reveal="up"] { transform: translateY(26px); }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal].is-visible { opacity: 1; transform: none; }

.section-heading[data-reveal="up"] {
  transform: translate(-50%, 26px);
}

.section-heading[data-reveal].is-visible {
  transform: translateX(-50%);
}

@media (min-width: 821px) {
  .location-pulse {
    opacity: 0;
  }

  .studio-link {
    border-color: transparent;
    box-shadow: none;
  }

  .studio-link::before {
    display: none;
  }

  .studio-actions {
    margin-top: 4%;
    transform: translateY(-22px);
  }
}

.fallback-page {
  min-height: 100vh;
  padding: 120px 8vw;
  color: #fff;
  background: var(--mm-bg);
}

@media (min-width: 1600px) {
  .hero-copy { left: 7.5%; }
  .site-header { padding-inline: 7.5%; }
  .hero-signals { right: 5%; }
}

@media (max-width: 1100px) {
  .site-header { min-height: 76px; }
  .desktop-nav { display: none; }
  .mini-cta { margin-left: auto; }
  .hero { min-height: 700px; }
  .hero-copy { top: 21%; width: 46%; }
  .hero-signals { opacity: 0.75; }
  .audio-strip { grid-template-columns: 42px 128px 1fr; }
  .audio-time { display: none; }
  .course-grid { gap: 2.5%; }
  .journey-layout { right: 7%; left: 7%; }
  .journey-copy { grid-template-columns: 82px 1fr; gap: 14px; padding-left: 2%; }
  .enquiry-form { gap: 10px; padding-left: 6%; }
}

@media (max-width: 820px) {
  body.admin-bar .site-header {
    top: 46px;
  }
  .cursor-aura { display: none; }
  .mm-site { overflow: hidden; }
  .scene {
    aspect-ratio: auto;
    min-height: 0;
    padding: 72px 20px;
    overflow: hidden;
    scroll-margin-top: 92px;
  }
  body.admin-bar .scene { scroll-margin-top: 138px; }
  .scene::after { height: 48px; }
  .scene-art {
    z-index: -2;
    object-position: center;
    opacity: 0.48;
    filter: saturate(1.04) contrast(1.06);
  }
  .site-header {
    position: fixed;
    min-height: 66px;
    padding: 0 20px;
    background: rgba(0, 0, 10, 0.76);
    backdrop-filter: blur(15px);
  }
  .brand { min-width: auto; }
  .brand-copy strong { font-size: 10px; }
  .brand-copy small { font-size: 7px; }
  .mini-cta { min-width: auto; padding: 9px 14px; font-size: 9px; }
  .hero {
    display: flex;
    min-height: 780px;
    padding-top: 128px;
    padding-bottom: 118px;
    align-items: center;
  }
  .hero::before {
    background: linear-gradient(180deg, rgba(0, 0, 10, 0.3), rgba(0, 0, 10, 0.92) 58%, var(--mm-bg) 90%);
  }
  .hero-art {
    width: 145%;
    height: 64%;
    margin-left: -22%;
    opacity: 0.85;
    object-position: 68% center;
    transform: scale(1.02);
  }
  .hero-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 570px;
    margin-top: auto;
  }
  .eyebrow { margin-bottom: 18px; font-size: 10px; }
  .hero h1 { font-size: clamp(38px, 10vw, 54px); }
  .hero h1 em { white-space: normal; }
  .hero-last { white-space: normal; }
  .hero-intro { max-width: 500px; font-size: 15px; }
  .hero-actions { margin-top: 30px; }
  .hero-signals,
  .founder-label { display: none; }
  .audio-strip {
    right: 20px;
    bottom: 32px;
    left: 20px;
    grid-template-columns: 42px 1fr;
    min-height: 62px;
  }
  .audio-title,
  .audio-time { display: none; }
  .section-heading {
    position: relative;
    top: auto !important;
    left: auto;
    width: 100%;
    margin-bottom: 36px;
    transform: none;
  }
  .section-heading[data-reveal="up"] { transform: translateY(26px); }
  .section-heading[data-reveal].is-visible { transform: none; }
  .section-heading h2 { font-size: clamp(27px, 7vw, 40px); }
  .section-heading h2::before,
  .section-heading h2::after { width: clamp(34px, 10vw, 72px); }
  .section-heading > p { margin-top: 12px; font-size: 12px; }
  .courses {
    min-height: 930px;
    padding-top: 84px;
  }
  .courses .scene-art {
    top: 150px;
    width: 170%;
    height: 300px;
    margin-left: -35%;
    opacity: 0.8;
    object-fit: cover;
    object-position: center 12%;
  }
  .course-grid {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 280px;
  }
  .course-card {
    min-height: 200px;
    padding: 24px 18px;
    border: 1px solid transparent;
    background: linear-gradient(rgba(5, 6, 22, 0.86), rgba(3, 4, 16, 0.96)) padding-box, var(--mm-border) border-box;
  }
  .module-label { margin-bottom: 48px; font-size: 11px; }
  .course-card h3 { font-size: 18px; }
  .course-card > p:last-child { font-size: 12px; }
  .benefits { min-height: 650px; }
  .benefits .scene-art { opacity: 0.28; }
  .benefit-grid {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .benefit-grid article {
    min-height: 180px;
    padding: 74px 18px 20px;
    border: 1px solid rgba(69, 66, 135, 0.42);
    border-radius: 12px;
    background: radial-gradient(circle at 30px 32px, rgba(24, 70, 248, 0.2), transparent 42px), rgba(4, 5, 20, 0.82);
  }
  .benefit-grid h3 { font-size: 14px; }
  .benefit-grid p { font-size: 12px; }
  .academy { min-height: 620px; }
  .academy .scene-art {
    top: 110px;
    height: calc(100% - 120px);
    opacity: 1;
    object-fit: contain;
  }
  .gallery-shimmer { top: 18%; }
  .spotlight {
    min-height: 620px;
    padding-inline: 0;
  }
  .spotlight .section-heading { z-index: 6; padding-inline: 20px; }
  .spotlight-art-window { top: 90px; bottom: 0; }
  .spotlight-art {
    left: 50%;
    width: 980px;
    max-width: none;
    height: 552px;
    opacity: 1;
    object-fit: contain;
    transform: translateX(calc(-50% + var(--spot-x, 0px)));
  }
  .spot-arrow {
    top: 54%;
    width: 44px;
    height: 44px;
    opacity: 1;
  }
  .spot-prev { left: 14px; }
  .spot-next { right: 14px; }
  .spotlight-labels { display: none; }
  .journey {
    min-height: 960px;
  }
  .journey .scene-art { opacity: 0.22; }
  .journey-layout {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .journey-copy {
    grid-template-columns: 76px 1fr;
    min-height: 230px;
    padding: 28px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: linear-gradient(rgba(4, 5, 22, 0.88), rgba(4, 5, 22, 0.88)) padding-box, var(--mm-border) border-box;
  }
  .journey-copy > p { max-width: 360px; font-size: 18px; }
  .studio-actions { margin-top: 18px; }
  .enquiry-form {
    gap: 12px;
    padding: 24px;
    border: 1px solid rgba(76, 72, 143, 0.46);
    border-radius: 14px;
    background: rgba(4, 5, 22, 0.9);
  }
  .enquiry-form input,
  .enquiry-form select,
  .enquiry-form .button { height: 58px; }
  .form-notice {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 20px 24px 0;
  }
  .faq {
    padding-top: 82px;
    padding-bottom: 90px;
  }
  .faq-art { opacity: 0.2; }
  .faq-list {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
  }
  .faq summary { font-size: 16px; }
  .site-footer {
    min-height: 650px;
    padding-top: 88px;
    padding-bottom: 90px;
  }
  .site-footer .scene-art { opacity: 0.26; }
  .footer-content {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 34px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    min-height: 170px;
    padding: 0 0 30px;
    border-right: 0;
    border-bottom: 1px solid rgba(96, 98, 161, 0.4);
  }
  .footer-brand p { margin-top: 22px; }
  .footer-nav {
    align-self: stretch;
    min-height: 260px;
    padding: 0 24px 0 0;
    border-right: 1px solid rgba(96, 98, 161, 0.4);
  }
  .footer-nav a { font-size: 12px; }
  .footer-action { align-self: center; padding-left: 0; }
  .socials { justify-content: flex-start; }
  .footer-action .button { padding-inline: 14px; font-size: 10px; }
  .floating-enquire { display: inline-flex; }
}

@media (max-width: 520px) {
  .brand-copy { display: none; }
  .brand { min-width: 42px; }
  .hero { min-height: 760px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .button { width: 100%; }
  .course-grid { grid-template-columns: 1fr; margin-top: 245px; }
  .courses { min-height: 1300px; }
  .course-card { min-height: 180px; }
  .module-label { margin-bottom: 42px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefits { min-height: 1040px; }
  .academy { min-height: 470px; }
  .academy .scene-art { top: 110px; height: 340px; }
  .spotlight { min-height: 540px; }
  .spotlight-art-window { top: 82px; }
  .spotlight-art { width: 830px; height: 467px; }
  .journey { min-height: 1080px; }
  .journey-copy { grid-template-columns: 1fr; text-align: left; }
  .location-pulse { width: 70px; }
  .studio-actions { flex-direction: column; }
  .enquiry-form { grid-template-columns: 1fr; }
  .enquiry-form label,
  .enquiry-form label.full,
  .enquiry-form .full { grid-column: 1; }
  .footer-content { grid-template-columns: 1fr; }
  .footer-nav { min-height: 230px; border-right: 0; border-bottom: 1px solid rgba(96, 98, 161, 0.4); }
  .footer-action { gap: 26px; }
  .site-footer { min-height: 850px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .cursor-aura { display: none; }
}

/* Melody Mechanics — premium header and hero refinement (2026-08-10) */
:root {
  --mm-cyan: #17d9ff;
  --mm-blue: #384dff;
  --mm-violet: #7842ff;
  --mm-magenta: #ed19e6;
  --mm-ink: #03040f;
  --mm-panel: rgba(8, 11, 31, 0.84);
  --mm-line: rgba(112, 137, 255, 0.34);
}

.site-header {
  min-height: 84px;
  padding: 0 clamp(22px, 5.2vw, 82px);
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  align-items: center;
  gap: 30px;
  background: linear-gradient(180deg, rgba(3, 4, 15, 0.98), rgba(3, 4, 15, 0.93));
  border-bottom: 1px solid rgba(105, 120, 255, 0.16);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.site-header.is-sticky {
  min-height: 72px;
  background: rgba(3, 4, 15, 0.92);
  border-color: rgba(69, 195, 255, 0.2);
}

@media (min-width: 821px) {
  .site-header .brand {
    opacity: 1;
    visibility: visible;
  }
}

.brand {
  width: max-content;
  min-width: 218px;
  height: 52px;
  justify-self: start;
  gap: 12px;
  color: #fff;
  filter: drop-shadow(0 0 18px rgba(104, 64, 255, 0.24));
}

.brand-mark {
  transform: scale(0.94);
  transform-origin: left center;
}

.brand-copy strong {
  letter-spacing: 0.065em;
  line-height: 0.82;
}

.brand-copy small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.31em;
}

.desktop-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(30px, 3vw, 54px);
}

.desktop-nav a {
  position: relative;
  padding: 12px 0;
  color: rgba(245, 247, 255, 0.72);
  transition: color 220ms ease, text-shadow 220ms ease;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 4px;
  left: 50%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mm-cyan), var(--mm-magenta));
  box-shadow: 0 0 12px rgba(23, 217, 255, 0.65);
  transition: right 220ms ease, left 220ms ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: #fff;
  text-shadow: 0 0 18px rgba(116, 87, 255, 0.55);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  right: 0;
  left: 0;
}

.mini-cta {
  justify-self: end;
  width: 168px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--mm-ink), var(--mm-ink)) padding-box,
    linear-gradient(110deg, var(--mm-magenta), var(--mm-violet), var(--mm-cyan)) border-box;
  box-shadow: 0 0 0 1px rgba(113, 69, 255, 0.12), 0 0 24px rgba(61, 80, 255, 0.16);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.mini-cta::before {
  content: "";
  position: absolute;
  inset: -40% 70% -40% -30%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 440ms ease;
}

.mini-cta:hover,
.mini-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(130, 48, 255, 0.34), 0 0 22px rgba(23, 217, 255, 0.18);
}

.mini-cta:hover::before,
.mini-cta:focus-visible::before {
  transform: translateX(340%) skewX(-18deg);
}

.hero {
  isolation: isolate;
  aspect-ratio: auto;
  min-height: 760px;
  height: clamp(760px, 100svh, 900px);
  overflow: hidden;
  background-color: var(--mm-ink);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 84px 0 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 47%, rgba(112, 50, 255, 0.18), transparent 23%),
    radial-gradient(circle at 84% 36%, rgba(0, 196, 255, 0.11), transparent 19%),
    linear-gradient(90deg, rgba(3, 4, 15, 0.28), transparent 48%);
  animation: mm-ambient-shift 7s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 19%;
  right: 12%;
  width: min(34vw, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(25, 218, 255, 0.2) 0deg 1deg, transparent 1deg 17deg, rgba(228, 24, 236, 0.16) 17deg 18deg, transparent 18deg 34deg);
  mask: radial-gradient(circle, transparent 0 56%, #000 57% 58%, transparent 59% 70%, #000 71% 72%, transparent 73%);
  -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 57% 58%, transparent 59% 70%, #000 71% 72%, transparent 73%);
  opacity: 0.6;
  animation: mm-orbit-spin 18s linear infinite;
}

.hero-art {
  filter: saturate(1.08) contrast(1.03) brightness(1.02);
  animation: mm-art-light 5.5s ease-in-out infinite alternate;
}

.hero-copy {
  top: 22%;
  left: clamp(32px, 6vw, 96px);
  width: min(43vw, 620px);
  max-width: calc(50% - 40px);
}

.hero-copy .eyebrow {
  text-shadow: 0 0 20px rgba(67, 95, 255, 0.35);
}

.hero h1 {
  text-wrap: balance;
}

.hero-intro {
  max-width: 600px;
}

.hero-actions {
  /* Align the interactive controls over the button plates in the supplied hero art. */
  margin-top: clamp(76px, 7.2vw, 98px);
  position: relative;
  isolation: isolate;
  gap: 16px;
  align-items: center;
}

.hero-actions::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px -40px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 4, 15, 0.99) 0 86%, rgba(3, 4, 15, 0.82) 94%, transparent 100%);
}

.hero-actions .button {
  width: min(100%, 250px);
  min-height: 56px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.hero-actions .button-primary {
  color: #fff;
  background:
    linear-gradient(105deg, rgba(22, 42, 145, 0.95), rgba(146, 23, 197, 0.95)) padding-box,
    linear-gradient(115deg, var(--mm-cyan), var(--mm-violet), var(--mm-magenta)) border-box;
}

.hero-actions .button-secondary {
  color: #fff;
  background:
    linear-gradient(rgba(4, 6, 20, 0.92), rgba(4, 6, 20, 0.92)) padding-box,
    linear-gradient(115deg, rgba(23, 217, 255, 0.7), rgba(237, 25, 230, 0.52)) border-box;
}

.hero-actions .button:hover,
.hero-actions .button:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 17px 38px rgba(0, 0, 0, 0.28), 0 0 26px rgba(94, 56, 255, 0.25);
}

.hero-signals {
  top: 31.5%;
  right: clamp(12px, 1.1vw, 18px);
  width: 200px;
  gap: 14px;
}

.hero-signals span {
  position: relative;
  min-width: 200px;
  min-height: 76px;
  padding: 16px 14px 14px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(87, 204, 255, 0.34);
  border-radius: 14px;
  background: linear-gradient(125deg, rgba(12, 18, 46, 0.95), rgba(7, 8, 25, 0.93));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 14px 30px rgba(0, 0, 0, 0.23), 0 0 20px rgba(86, 46, 255, 0.1);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.hero-signals span::before {
  content: "";
  position: absolute;
  left: 25px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--mm-cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(23, 217, 255, 0.08), 0 0 16px rgba(23, 217, 255, 0.55);
  animation: mm-signal-pulse 2.2s ease-in-out infinite;
}

.hero-signals span:nth-child(2)::before { animation-delay: -0.7s; border-color: #8c63ff; }
.hero-signals span:nth-child(3)::before { animation-delay: -1.4s; border-color: #f229dc; }

.hero-signals span:hover {
  transform: translateX(-7px);
  border-color: rgba(233, 55, 240, 0.55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 28px rgba(104, 55, 255, 0.2);
}

.founder-label {
  right: clamp(12px, 1.1vw, 18px);
  bottom: 15.5%;
  width: 224px;
  min-height: 54px;
  padding: 10px 14px;
  display: grid;
  place-content: center;
  color: #fff;
  text-align: center;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 13px;
  background:
    linear-gradient(rgba(6, 8, 25, 0.88), rgba(6, 8, 25, 0.88)) padding-box,
    linear-gradient(110deg, var(--mm-cyan), var(--mm-violet), var(--mm-magenta)) border-box;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), 0 0 24px rgba(109, 57, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.founder-label::after {
  content: "Lead mentor";
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 8px;
  letter-spacing: 0.22em;
}

.audio-strip {
  right: clamp(22px, 4vw, 64px);
  bottom: 18px;
  left: clamp(22px, 4vw, 64px);
  min-height: 76px;
  padding: 10px 18px;
  grid-template-columns: 52px 160px 1fr 92px;
  gap: 16px;
  border: 1px solid rgba(101, 109, 255, 0.3);
  border-radius: 15px;
  background: linear-gradient(105deg, rgba(5, 7, 25, 0.91), rgba(9, 8, 34, 0.88));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.33), inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.audio-toggle {
  width: 48px;
  height: 48px;
  color: #fff;
  border-color: rgba(109, 151, 255, 0.48);
  background: radial-gradient(circle at 35% 30%, rgba(96, 108, 255, 0.35), rgba(7, 9, 27, 0.88));
  box-shadow: 0 0 22px rgba(79, 70, 255, 0.2);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.audio-toggle:hover,
.audio-toggle:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 0 30px rgba(120, 70, 255, 0.38);
}

.audio-strip.is-playing {
  border-color: rgba(238, 34, 227, 0.4);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), 0 0 32px rgba(113, 43, 255, 0.16);
}

.audio-strip.is-playing .audio-toggle {
  background: linear-gradient(145deg, #3545ff, #ca1bd8);
}

.audio-time {
  font-variant-numeric: tabular-nums;
}

@keyframes mm-ambient-shift {
  to { filter: hue-rotate(12deg) brightness(1.08); }
}

@keyframes mm-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes mm-art-light {
  50% { filter: saturate(1.15) contrast(1.04) brightness(1.06); }
}

@keyframes mm-signal-pulse {
  50% { transform: scale(1.18); opacity: 0.72; }
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav { display: none; }
  .hero-copy { width: min(51vw, 560px); max-width: calc(55% - 30px); }
  .hero-signals { right: 20px; width: 154px; }
  .hero-signals span { min-width: 154px; padding-left: 48px; }
  .founder-label { right: 20px; width: 154px; }
}

@media (max-width: 820px) {
  .site-header {
    min-height: 74px;
    padding: 0 18px;
    position: fixed;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .brand {
    min-width: 0;
    width: auto;
    height: 46px;
  }

  .brand-copy strong { font-size: 11px; }
  .brand-copy small { font-size: 7px; }
  .mini-cta { width: 126px; min-height: 42px; border-radius: 12px; }

  .hero {
    height: auto;
    min-height: 800px;
    padding-top: 110px;
    padding-bottom: 126px;
  }

  .hero::before { inset: 74px 0 0; }
  .hero::after {
    top: 14%;
    right: -24%;
    width: 86vw;
    opacity: 0.32;
  }

  .hero-copy {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: none;
    margin: 0 20px;
  }

  .hero-actions {
    margin-top: 30px;
    flex-direction: row;
    align-items: stretch;
  }

  .hero-actions .button {
    width: 50%;
    min-height: 52px;
    padding: 0 18px;
  }

  .audio-strip {
    right: 18px;
    bottom: 20px;
    left: 18px;
    grid-template-columns: 48px 1fr auto;
    padding: 10px 12px;
  }

  .audio-title { display: block; }
  .audio-time { display: block; }
  .waveform { grid-column: 2; }
}

@media (max-width: 560px) {
  .site-header { padding-inline: 14px; }
  .brand { gap: 7px; }
  .brand-mark { transform: scale(0.78); transform-origin: left center; }
  .brand-copy { display: none; }
  .mini-cta { width: 114px; min-height: 40px; font-size: 9px; }

  .hero { min-height: 820px; }
  .hero-copy { margin-inline: 18px; }
  .hero h1 { font-size: clamp(42px, 12.5vw, 62px); }
  .hero-intro { font-size: 15px; line-height: 1.65; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; max-width: none; }

  .audio-strip {
    min-height: 68px;
    grid-template-columns: 46px minmax(0, 1fr) 74px;
    gap: 10px;
  }

  .audio-title { display: none; }
  .audio-time { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero-art,
  .hero-signals span::before {
    animation: none !important;
  }
}

/* ================================================================
   Melody Mechanics — manual component rebuild
   Replaces flattened section artwork with responsive UI components.
   ================================================================ */

.mm-manual-site {
	--mm-bg: #03040f;
	--mm-panel: rgba(10, 13, 35, .82);
	--mm-panel-strong: rgba(7, 9, 27, .96);
	--mm-line: rgba(126, 148, 255, .24);
	--mm-copy: #aeb6d1;
	--mm-white: #f8f9ff;
	--mm-cyan: #21d4fd;
	--mm-blue: #3a5cff;
	--mm-violet: #7b46ff;
	--mm-magenta: #ec20cb;
	background: var(--mm-bg);
	color: var(--mm-white);
	overflow: hidden;
}

.mm-manual-site *, .mm-manual-site *::before, .mm-manual-site *::after { box-sizing: border-box; }
.mm-manual-site a { color: inherit; }
.manual-shell { width: min(1440px, calc(100% - 80px)); margin-inline: auto; position: relative; z-index: 2; }

.manual-section {
	position: relative;
	isolation: isolate;
	padding: clamp(88px, 9vw, 148px) 0;
	background:
		radial-gradient(circle at var(--glow-x, 84%) 18%, rgba(70, 64, 255, .13), transparent 32%),
		linear-gradient(180deg, rgba(2, 3, 13, .98), rgba(4, 5, 18, .98));
}

.manual-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background-image: linear-gradient(rgba(83, 102, 200, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 102, 200, .07) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.manual-section::after {
	content: "";
	position: absolute;
	width: min(42vw, 680px);
	aspect-ratio: 1;
	right: -14vw;
	top: 12%;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient(from 45deg, rgba(33, 212, 253, .12), rgba(123, 70, 255, .18), rgba(236, 32, 203, .11), rgba(33, 212, 253, .12));
	filter: blur(70px);
	animation: mm-ambient 13s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes mm-ambient { to { transform: translate3d(-12vw, 8vh, 0) scale(1.2) rotate(36deg); opacity: .72; } }

.manual-kicker {
	margin: 0 0 18px;
	font: 700 clamp(11px, .8vw, 14px)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mm-cyan);
}
.manual-kicker span { color: var(--mm-magenta); margin-inline: .45em; }

.manual-heading { margin-bottom: clamp(42px, 5vw, 72px); }
.manual-heading.centered { max-width: 850px; text-align: center; margin-inline: auto; }
.manual-heading.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 470px); gap: 52px; align-items: end; }
.manual-heading h2 {
	margin: 0;
	font-size: clamp(40px, 5vw, 76px);
	line-height: .98;
	letter-spacing: -.045em;
	font-weight: 760;
	text-transform: none;
}
.manual-heading > p, .manual-heading.split > p { margin: 22px 0 0; color: var(--mm-copy); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.7; }

/* Header --------------------------------------------------------- */
.mm-manual-site .site-header {
	width: min(1440px, calc(100% - 80px));
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	top: 18px;
	padding: 12px 16px 12px 18px;
	border: 1px solid rgba(126, 148, 255, .18);
	border-radius: 22px;
	background: rgba(3, 4, 15, .72);
	box-shadow: 0 24px 60px rgba(0,0,0,.22);
	backdrop-filter: blur(22px) saturate(135%);
}
.mm-manual-site .site-header::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(90deg,rgba(33,212,253,.48),rgba(123,70,255,.05),rgba(236,32,203,.45)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.mm-manual-site .brand { min-width: 190px; }
.mm-manual-site .desktop-nav { display:flex; gap:clamp(24px,3vw,52px); }
.mm-manual-site .desktop-nav a { position:relative; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#ccd2e9; text-decoration:none; }
.mm-manual-site .desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:linear-gradient(90deg,var(--mm-cyan),var(--mm-magenta)); transition:right .3s ease; }
.mm-manual-site .desktop-nav a:hover::after, .mm-manual-site .desktop-nav a:focus-visible::after { right:0; }
.mm-manual-site .mini-cta { border-color:rgba(33,212,253,.48); background:linear-gradient(110deg,rgba(33,212,253,.14),rgba(123,70,255,.2),rgba(236,32,203,.15)); }

/* Hero ----------------------------------------------------------- */
.manual-hero { min-height: 100svh; padding-top: clamp(140px, 12vw, 185px); padding-bottom: 56px; --glow-x: 72%; }
.manual-hero__grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr); align-items: center; gap: clamp(34px, 5vw, 84px); }
.manual-hero__copy { position: relative; z-index: 4; max-width: 640px; }
.manual-hero h1 { margin:0; font-size:clamp(56px,6.1vw,96px); line-height:.94; letter-spacing:-.055em; font-weight:760; text-transform:none; }
.manual-hero h1 em { display:block; color:transparent; background:linear-gradient(100deg,var(--mm-cyan),#7658ff 48%,var(--mm-magenta)); -webkit-background-clip:text; background-clip:text; font-style:normal; text-shadow:0 0 34px rgba(105,65,255,.2); }
.manual-lead { max-width: 590px; margin: 30px 0 0; color: var(--mm-copy); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.7; }
.manual-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.mm-manual-site .manual-actions .button { min-width: 210px; justify-content:center; }
.hero-proof { display:flex; flex-wrap:wrap; gap:20px; margin:32px 0 0; padding:0; list-style:none; color:#8f98b8; font:700 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; text-transform:uppercase; }
.hero-proof li { display:flex; align-items:center; gap:7px; }
.hero-proof b { color:var(--mm-cyan); }

.manual-hero__visual { position:relative; min-height:650px; border-radius:40px; overflow:hidden; background:radial-gradient(circle at 58% 38%,rgba(86,44,255,.3),transparent 38%),linear-gradient(145deg,#07091c,#02030b); border:1px solid rgba(127,149,255,.24); box-shadow:0 38px 100px rgba(0,0,0,.48),inset 0 0 70px rgba(43,56,153,.12); }
.manual-hero__visual::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,4,15,.92) 0%,transparent 25%,transparent 72%,rgba(3,4,15,.35)),linear-gradient(0deg,rgba(3,4,15,.72),transparent 44%); z-index:2; pointer-events:none; }
.hero-portrait { position:absolute; inset:0; background-image:var(--hero-art); background-repeat:no-repeat; background-size:auto 112%; background-position:72% 46%; transform:scale(1.03); filter:saturate(1.08) contrast(1.03); transition:transform 1.1s cubic-bezier(.2,.75,.2,1); }
.manual-hero__visual:hover .hero-portrait { transform:scale(1.075); }
.hero-orbit { position:absolute; left:50%; top:48%; border:1px solid rgba(99,122,255,.3); border-radius:50%; z-index:1; transform:translate(-50%,-50%); animation:mm-orbit 16s linear infinite; }
.orbit-one { width:68%; aspect-ratio:1; }
.orbit-two { width:82%; aspect-ratio:1; animation-duration:24s; animation-direction:reverse; border-style:dashed; }
.hero-orbit::before,.hero-orbit::after { content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--mm-cyan); box-shadow:0 0 18px 7px rgba(33,212,253,.35); top:8%; left:22%; }
.hero-orbit::after { top:auto; left:auto; right:7%; bottom:28%; background:var(--mm-magenta); box-shadow:0 0 18px 7px rgba(236,32,203,.3); }
@keyframes mm-orbit { to { transform:translate(-50%,-50%) rotate(360deg); } }

.hero-signal { position:absolute; z-index:4; right:20px; display:flex; align-items:center; gap:12px; min-width:160px; padding:14px 18px; border:1px solid rgba(82,203,255,.38); border-radius:16px; background:rgba(5,8,26,.82); backdrop-filter:blur(16px); box-shadow:0 18px 45px rgba(0,0,0,.25); animation:mm-float 4.8s ease-in-out infinite; }
.hero-signal i { width:12px; height:12px; border-radius:50%; border:3px solid var(--mm-cyan); box-shadow:0 0 15px var(--mm-cyan); }
.hero-signal span { font:600 11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; color:#aeb9db; text-transform:uppercase; letter-spacing:.08em; }
.hero-signal b { color:#fff; }
.signal-one { top:20%; }.signal-two { top:42%; animation-delay:-1.4s; }.signal-three { top:64%; animation-delay:-2.8s; }
.signal-two i{border-color:#7857ff;box-shadow:0 0 15px #7857ff}.signal-three i{border-color:var(--mm-magenta);box-shadow:0 0 15px var(--mm-magenta)}
@keyframes mm-float { 50% { transform:translateY(-9px); } }
.founder-badge { position:absolute; right:24px; bottom:22px; z-index:5; width:min(285px,52%); padding:14px 18px; text-align:right; border-radius:15px; background:linear-gradient(120deg,rgba(8,13,39,.94),rgba(47,15,65,.9)); border:1px solid rgba(236,32,203,.46); box-shadow:0 0 40px rgba(102,39,255,.2); }
.founder-badge small,.founder-badge strong{display:block}.founder-badge small{color:#929dbf;font:700 9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.13em}.founder-badge strong{margin-top:4px;font-size:14px;letter-spacing:.02em}

.mm-manual-site .audio-strip { margin-top: 34px; position:relative; inset:auto; transform:none; display:grid; grid-template-columns:auto minmax(150px,220px) 1fr auto; gap:20px; align-items:center; min-height:88px; padding:18px 22px; border-radius:22px; background:rgba(6,8,27,.88); border:1px solid rgba(115,128,255,.24); box-shadow:0 24px 70px rgba(0,0,0,.36); backdrop-filter:blur(18px); }
.mm-manual-site .audio-toggle { flex:none; }

/* Shared cards --------------------------------------------------- */
.pressable { -webkit-tap-highlight-color:transparent; transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease,background .35s ease; }
.pressable:hover { transform:translateY(-9px); }
.pressable.is-pressed { transform:translateY(-2px) scale(.985); transition-duration:.12s; }
.art-crop { display:block; background-image:var(--art); background-repeat:no-repeat; background-size:var(--art-size); background-position:var(--art-x) var(--art-y); }

.manual-modules { --glow-x:10%; }
.manual-course-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.manual-course-card { --accent:var(--mm-cyan); position:relative; display:flex; flex-direction:column; min-height:590px; padding:14px 22px 24px; overflow:hidden; border:1px solid rgba(96,141,255,.26); border-radius:26px; background:linear-gradient(150deg,rgba(14,17,42,.94),rgba(5,7,22,.98)); text-decoration:none; box-shadow:0 24px 70px rgba(0,0,0,.25); }
.manual-course-card:nth-child(2){--accent:#7359ff}.manual-course-card:nth-child(3){--accent:#c431ff}.manual-course-card:nth-child(4){--accent:#ff2ead}
.manual-course-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 40%); opacity:.2; transition:opacity .4s ease; pointer-events:none; }
.manual-course-card::after { content:""; position:absolute; left:-40%; top:-20%; width:42%; height:140%; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); transition:left .65s ease; pointer-events:none; }
.manual-course-card:hover { border-color:color-mix(in srgb,var(--accent) 70%,transparent); box-shadow:0 28px 80px color-mix(in srgb,var(--accent) 18%,transparent); }
.manual-course-card:hover::before { opacity:1; }.manual-course-card:hover::after{left:125%}
.card-media { aspect-ratio:1.34; border-radius:17px; margin-bottom:26px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 42%,transparent); filter:saturate(1.08); }
.module-label,.manual-course-card>strong,.card-link { position:relative; z-index:1; }
.module-label { color:var(--accent); font:700 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; }
.manual-course-card h3 { position:relative;z-index:1;margin:14px 0 7px;font-size:clamp(28px,2.2vw,38px);line-height:1;letter-spacing:-.035em;text-transform:none; }
.manual-course-card>strong { color:#d5dbef;font-size:14px; }
.manual-course-card>p { position:relative;z-index:1;color:var(--mm-copy);font-size:14px;line-height:1.65; }
.card-link { margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;color:#c9d2f2;font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.1em; }
.card-link b { width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#03040f;font-size:16px;transition:transform .3s ease; }.manual-course-card:hover .card-link b{transform:rotate(45deg) scale(1.08)}

/* Benefits ------------------------------------------------------- */
.manual-benefits { --glow-x:92%; }
.manual-benefit-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px; }
.manual-benefit-card { --tone:var(--mm-cyan); position:relative;min-height:340px;padding:32px;border:1px solid rgba(116,139,235,.23);border-radius:26px;overflow:hidden;background:linear-gradient(145deg,rgba(12,15,40,.82),rgba(6,7,24,.94)); }
.manual-benefit-card[data-tone="violet"]{--tone:#7457ff}.manual-benefit-card[data-tone="magenta"]{--tone:#ec20cb}.manual-benefit-card[data-tone="blue"]{--tone:#3196ff}
.manual-benefit-card::before { content:"";position:absolute;inset:auto -25% -50% 10%;height:80%;background:radial-gradient(circle,var(--tone),transparent 68%);filter:blur(35px);opacity:.08;transition:opacity .35s ease,transform .35s ease; }
.manual-benefit-card:hover{border-color:color-mix(in srgb,var(--tone) 68%,transparent);box-shadow:0 30px 80px color-mix(in srgb,var(--tone) 13%,transparent)}.manual-benefit-card:hover::before{opacity:.26;transform:translateY(-18px)}
.benefit-icon { width:76px;height:76px;display:grid;place-items:center;margin-bottom:54px;border:1px solid color-mix(in srgb,var(--tone) 58%,transparent);border-radius:22px;background:color-mix(in srgb,var(--tone) 10%,rgba(10,12,33,.9));box-shadow:0 0 34px color-mix(in srgb,var(--tone) 13%,transparent); }
.benefit-icon svg{width:42px;height:42px;fill:none;stroke:var(--tone);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.manual-benefit-card small { color:var(--tone);font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase; }
.manual-benefit-card h3{margin:12px 0 12px;font-size:26px;text-transform:none}.manual-benefit-card p{margin:0;color:var(--mm-copy);font-size:15px;line-height:1.65}

/* Academy -------------------------------------------------------- */
.manual-academy { --glow-x:6%; }
.academy-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.academy-card { position:relative;margin:0;aspect-ratio:1.45;overflow:hidden;border:1px solid rgba(116,139,235,.28);border-radius:24px;background:#080a1f;box-shadow:0 20px 60px rgba(0,0,0,.28); }
.academy-card>span { position:absolute;inset:0;filter:saturate(1.16) contrast(1.04);transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .45s ease; }
.academy-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,4,15,.92),transparent 58%);pointer-events:none}
.academy-card:hover>span{transform:scale(1.075);filter:saturate(1.38) contrast(1.06)}
.academy-card:hover{border-color:rgba(33,212,253,.66);box-shadow:0 28px 80px rgba(35,93,255,.18)}
.academy-card figcaption{position:absolute;z-index:2;left:22px;right:22px;bottom:18px;display:flex;align-items:center;gap:12px}.academy-card figcaption small{color:var(--mm-cyan);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.academy-card figcaption strong{font-size:17px}.academy-card--wide{grid-column:span 1}

/* Spotlight ------------------------------------------------------ */
.manual-spotlight { --glow-x:88%; }
.spotlight-controls{display:flex;gap:10px;justify-content:flex-end}.spotlight-controls button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(123,144,255,.35);background:rgba(11,14,38,.8);color:#fff;font-size:20px;cursor:pointer;transition:.3s ease}.spotlight-controls button:hover{background:linear-gradient(135deg,var(--mm-blue),var(--mm-magenta));transform:translateY(-3px)}
.spotlight-viewport{overflow:hidden}.spotlight-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 24px}.spotlight-track::-webkit-scrollbar{display:none}
.spotlight-card{position:relative;flex:0 0 min(310px,72vw);aspect-ratio:.68;scroll-snap-align:start;overflow:hidden;border:1px solid rgba(110,135,255,.34);border-radius:26px;background:#080a20;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.spotlight-card>span{position:absolute;inset:0;filter:saturate(1.15);transition:transform .7s cubic-bezier(.2,.8,.2,1)}.spotlight-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,3,13,.95),transparent 52%);pointer-events:none}.spotlight-card:hover>span{transform:scale(1.08)}.spotlight-card:hover{border-color:rgba(236,32,203,.72);box-shadow:0 30px 90px rgba(122,50,255,.2)}
.spot-play{position:absolute;z-index:3;inset:0;width:100%;height:100%;border:0;border-radius:0;background:transparent;color:transparent;opacity:0;cursor:pointer}.spot-play:focus-visible{opacity:1;outline:3px solid var(--mm-cyan);outline-offset:-7px}.spot-play span{display:none}
.spotlight-meta{position:absolute;z-index:3;left:24px;right:24px;bottom:22px}.spotlight-meta small,.spotlight-meta strong{display:block}.spotlight-meta small{color:#8ca1ff;font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.12em}.spotlight-meta strong{font-size:25px;margin-top:6px}.spotlight-meta i{display:flex;gap:3px;align-items:end;height:22px;margin-top:14px}.spotlight-meta i b{display:block;width:4px;height:8px;background:linear-gradient(var(--mm-cyan),var(--mm-magenta));animation:mm-eq .65s ease-in-out infinite alternate;animation-play-state:paused}.spotlight-meta i b:nth-child(2){height:17px;animation-delay:-.2s}.spotlight-meta i b:nth-child(3){height:12px;animation-delay:-.35s}.spotlight-meta i b:nth-child(4){height:21px;animation-delay:-.5s}.spotlight-meta i b:nth-child(5){height:10px;animation-delay:-.1s}.spotlight-card.is-previewing .spotlight-meta i b{animation-play-state:running}@keyframes mm-eq{to{height:22px}}

/* Contact + FAQ -------------------------------------------------- */
.manual-contact { --glow-x:4%; }
.manual-contact .journey-layout { position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(480px,1.2fr);gap:28px;align-items:stretch; }
.manual-contact .journey-copy,.manual-contact .enquiry-form { position:relative;inset:auto;width:auto;height:auto;transform:none;border:1px solid rgba(116,139,235,.27);border-radius:28px;background:linear-gradient(145deg,rgba(12,15,41,.86),rgba(6,7,24,.94));box-shadow:0 24px 70px rgba(0,0,0,.25); }
.manual-contact .journey-copy{padding:48px;display:flex;flex-direction:column;align-items:flex-start}.manual-contact .journey-copy small{margin-top:24px;color:var(--mm-cyan);font:700 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.12em}.manual-contact .journey-copy h3{margin:14px 0 18px;font-size:clamp(30px,3vw,46px);line-height:1.05;text-transform:none}.manual-contact .journey-copy p{color:var(--mm-copy);font-size:16px;line-height:1.75}.manual-contact .studio-actions{margin-top:auto;padding-top:28px}.manual-contact .enquiry-form{padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.manual-contact .enquiry-form label{position:relative;inset:auto}.manual-contact .enquiry-form input,.manual-contact .enquiry-form select{background:rgba(3,5,18,.78);border:1px solid rgba(122,145,255,.26);color:#fff;border-radius:13px;min-height:54px;padding:0 16px}.manual-contact .enquiry-form input:focus,.manual-contact .enquiry-form select:focus{border-color:var(--mm-cyan);box-shadow:0 0 0 4px rgba(33,212,253,.08)}
.manual-faq { --glow-x:90%; }.manual-faq .faq-list{position:relative;inset:auto;width:auto;display:grid;gap:12px}.manual-faq details{border:1px solid rgba(113,136,232,.25);border-radius:18px;background:rgba(9,12,34,.82);overflow:hidden;transition:.3s ease}.manual-faq details:hover,.manual-faq details[open]{border-color:rgba(33,212,253,.56);background:linear-gradient(100deg,rgba(33,212,253,.06),rgba(123,70,255,.08),rgba(236,32,203,.04))}.manual-faq summary{position:relative;padding:24px 62px 24px 24px;cursor:pointer;font-size:17px;font-weight:700;list-style:none}.manual-faq summary::-webkit-details-marker{display:none}.manual-faq summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);color:var(--mm-cyan);font-size:24px;transition:transform .3s ease}.manual-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}.manual-faq details p{margin:0;padding:0 62px 24px 24px;color:var(--mm-copy);line-height:1.7}

/* Footer --------------------------------------------------------- */
.manual-footer{position:relative;padding:70px 0 34px;background:linear-gradient(180deg,#050617,#02030b);border-top:1px solid rgba(114,137,230,.22);overflow:hidden}.manual-footer::before{content:"";position:absolute;inset:-60% 0 auto;height:130%;background:conic-gradient(from 90deg at 50% 100%,transparent,rgba(33,212,253,.08),transparent,rgba(236,32,203,.08),transparent);animation:mm-footer 14s linear infinite}@keyframes mm-footer{to{transform:rotate(1turn)}}.manual-footer .footer-content{position:relative;inset:auto;transform:none;display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:50px;align-items:start}.manual-footer .footer-brand,.manual-footer .footer-nav,.manual-footer .footer-action{position:relative;inset:auto;transform:none}.manual-footer .footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:28px}.manual-footer .footer-nav div{display:grid;gap:10px}.manual-footer .footer-nav a{text-decoration:none;color:#aab3cf}.manual-footer .footer-nav a:hover{color:var(--mm-cyan)}

/* Responsive ----------------------------------------------------- */
@media (max-width: 1180px) {
	.manual-hero__grid{grid-template-columns:1fr 1fr;gap:34px}.manual-hero__visual{min-height:590px}.manual-course-grid,.manual-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.manual-course-card{min-height:560px}.manual-contact .journey-layout{grid-template-columns:1fr 1.15fr}.manual-heading h2{font-size:clamp(42px,6vw,66px)}
}

@media (max-width: 860px) {
	.manual-shell,.mm-manual-site .site-header{width:min(100% - 40px,720px)}
	.mm-manual-site .site-header{top:10px;padding:10px 12px}.mm-manual-site .desktop-nav{display:none}.mm-manual-site .mini-cta{font-size:10px;padding:13px 16px}.mm-manual-site .brand{min-width:0}
	.manual-section{padding:78px 0}.manual-hero{padding-top:132px}.manual-hero__grid{grid-template-columns:1fr}.manual-hero__copy{max-width:none}.manual-hero h1{font-size:clamp(50px,12vw,78px);max-width:760px}.manual-hero__visual{min-height:600px;order:-1}.hero-portrait{background-size:auto 106%;background-position:72% 48%}.hero-signal{right:14px;min-width:145px}.mm-manual-site .audio-strip{grid-template-columns:auto 1fr auto}.mm-manual-site .audio-title{display:none}.mm-manual-site .waveform{min-width:0}
	.manual-heading.split{grid-template-columns:1fr;gap:12px}.manual-heading.split>p{margin-top:0}.academy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.manual-contact .journey-layout{grid-template-columns:1fr}.manual-contact .journey-copy{padding:36px}.manual-footer .footer-content{grid-template-columns:1fr 1fr}.manual-footer .footer-action{grid-column:1/-1}
}

@media (max-width: 620px) {
	.manual-shell,.mm-manual-site .site-header{width:calc(100% - 32px)}
	.manual-section{padding:66px 0}.manual-hero{padding-top:118px}.manual-hero__grid{gap:24px}.manual-hero__visual{min-height:470px;border-radius:28px}.manual-hero__visual::before{background:linear-gradient(0deg,rgba(3,4,15,.78),transparent 50%)}.hero-portrait{background-size:auto 102%;background-position:70% 48%}.hero-signal{padding:10px 12px;min-width:126px;border-radius:12px}.hero-signal span{font-size:9px}.signal-one{top:16%}.signal-two{top:34%}.signal-three{top:52%}.founder-badge{right:14px;bottom:14px;width:66%}
	.manual-hero h1{font-size:clamp(43px,13vw,60px)}.manual-lead{font-size:16px}.manual-actions{display:grid}.mm-manual-site .manual-actions .button{width:100%}.hero-proof{gap:10px 16px}.mm-manual-site .audio-strip{min-height:76px;padding:14px;gap:12px}.mm-manual-site .audio-time{font-size:9px}
	.manual-heading{margin-bottom:34px}.manual-heading h2{font-size:clamp(36px,10vw,50px)}.manual-heading>p,.manual-heading.split>p{font-size:15px}.manual-course-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 2px 22px;scrollbar-width:none}.manual-course-grid::-webkit-scrollbar{display:none}.manual-course-card{flex:0 0 calc(100vw - 52px);min-height:540px;scroll-snap-align:center}.manual-benefit-grid{grid-template-columns:1fr}.manual-benefit-card{min-height:300px}.benefit-icon{margin-bottom:38px}.academy-grid{grid-template-columns:1fr}.academy-card{aspect-ratio:1.25}.spotlight-card{flex-basis:80vw}.manual-contact .enquiry-form{grid-template-columns:1fr;padding:24px}.manual-contact .journey-copy{padding:28px}.manual-faq summary{padding:20px 54px 20px 18px;font-size:15px}.manual-faq details p{padding:0 18px 20px}.manual-footer .footer-content{grid-template-columns:1fr}.manual-footer .footer-action{grid-column:auto}
}

@media (prefers-reduced-motion: reduce) {
	.manual-section::after,.hero-orbit,.hero-signal,.manual-footer::before,.spotlight-meta i b{animation:none!important}.pressable,.hero-portrait,.academy-card>span,.spotlight-card>span{transition:none!important}
}