:root {
  color-scheme: dark;
  --bg: #050709;
  --ink: #f7f3e8;
  --muted: #b8b7ad;
  --dim: #7f8589;
  --cyan: #7ceeff;
  --warm: #d5a160;
  --acid: #d8ff32;
  --red: #ff5268;
  --panel: rgba(255,255,255,.075);
  --panel-strong: rgba(255,255,255,.13);
  --line: rgba(255,255,255,.2);
  --shadow: rgba(0,0,0,.55);
  --progress: 0;
  --pointer-x: 0;
  --pointer-y: 0;
  font-family: Inter, "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  max-width: 100%;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 6%, rgba(213,161,96,.18), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(124,238,255,.17), transparent 30rem),
    linear-gradient(130deg, #050709 0%, #12161a 46%, #070604 100%);
}
main, section, .hero-copy, .section-heading, .hero-stage { min-width: 0; max-width: 100%; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; left: 14px; top: 12px; z-index: 100; transform: translateY(-140%); background: var(--acid); color: #050505; padding: 10px 14px; border-radius: 999px; font-weight: 900; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 13px clamp(16px, 3vw, 44px);
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: rgba(5,7,9,.86);
  backdrop-filter: blur(18px);
}
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 950; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.brand img, .footer-brand img { width: clamp(126px, 12vw, 168px); height: auto; object-fit: contain; border-radius: 0; flex: 0 0 auto; }
.brand span, .footer-brand b { display: none; }
.footer-brand img { width: clamp(140px, 13vw, 176px); }
.site-nav { justify-self: center; display: flex; gap: clamp(12px, 2vw, 25px); align-items: center; }
.site-nav a, .site-footer a { text-decoration: none; color: var(--muted); font-weight: 750; font-size: 14px; }
.menu-toggle { display: none; }
.sound-toggle, .button, .menu-toggle {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--ink);
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}
.sound-toggle { display: inline-flex; gap: 9px; align-items: center; }
.meter { display: inline-flex; align-items: end; gap: 3px; height: 18px; }
.meter i { width: 3px; height: 8px; border-radius: 4px; background: var(--cyan); }
.meter i:nth-child(2) { height: 15px; background: var(--warm); }
.meter i:nth-child(3) { height: 11px; }
.sound-toggle[aria-pressed="true"] .meter i { animation: meter .7s infinite alternate ease-in-out; }
.sound-toggle[aria-pressed="true"] .meter i:nth-child(2) { animation-delay: .18s; }
.sound-toggle[aria-pressed="true"] .meter i:nth-child(3) { animation-delay: .32s; }
@keyframes meter { to { height: 18px; } }
.section {
  position: relative;
  isolation: isolate;
  padding: clamp(58px, 8vw, 124px) clamp(18px, 4vw, 72px);
  min-height: 86vh;
}
.section + .section { border-top: 1px solid rgba(255,255,255,.1); }
.catalog { margin: 0 0 14px; color: var(--cyan); text-transform: uppercase; letter-spacing: .17em; font-size: 12px; font-weight: 950; }
h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 { max-width: 1050px; font-size: clamp(58px, 9vw, 150px); line-height: .82; text-wrap: balance; }
h2 { max-width: 1040px; font-size: clamp(36px, 5.5vw, 88px); line-height: .9; text-wrap: balance; }
h3 { font-size: clamp(24px, 3vw, 38px); line-height: 1; }
p { color: var(--muted); line-height: 1.55; }
.hero {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(420px,1fr);
  gap: clamp(30px, 5vw, 84px);
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.hero-lede { max-width: 760px; color: #f0ede5; font-size: clamp(19px, 2vw, 27px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.button { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; }
.button-primary { background: var(--acid); color: #050505; border-color: var(--acid); box-shadow: 0 0 34px rgba(216,255,50,.22); }
.hero-stage { min-height: 690px; position: relative; perspective: 1400px; transform-style: preserve-3d; }
.light { position: absolute; border-radius: 50%; filter: blur(14px); pointer-events: none; }
.light-cyan { width: 350px; height: 350px; right: 7%; top: 4%; background: radial-gradient(circle, rgba(124,238,255,.34), transparent 68%); }
.light-warm { width: 280px; height: 280px; left: 12%; bottom: 8%; background: radial-gradient(circle, rgba(213,161,96,.25), transparent 65%); }
.archive-object { position: absolute; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(124,238,255,.06)); box-shadow: 0 34px 100px rgba(0,0,0,.42); backdrop-filter: blur(14px); transform-style: preserve-3d; }
.archive-object-main { width: min(540px, 82vw); height: 345px; right: 9%; top: 13%; border-radius: 36px; transform: rotateX(calc(-8deg + var(--pointer-y) * 2.5deg)) rotateY(calc(-22deg + var(--pointer-x) * 7deg)) translateZ(calc(var(--progress) * 80px)); }
.archive-shell { position: absolute; inset: 0; border-radius: inherit; }
.archive-shell::before { content: ""; position: absolute; inset: 26px; border: 1px solid rgba(255,255,255,.23); border-radius: 26px; }
.archive-label { position: absolute; left: 50%; top: 34px; width: 224px; transform: translateX(-50%) translateZ(46px); text-align: center; padding: 12px; border: 1px solid rgba(255,255,255,.34); background: rgba(5,7,9,.66); }
.archive-label span, .archive-label small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.archive-label strong { display: block; margin: 5px 0; font-size: 25px; }
.reel { position: absolute; top: 138px; width: 108px; height: 108px; border-radius: 50%; border: 1px solid rgba(255,255,255,.36); background: radial-gradient(circle, transparent 0 18%, rgba(255,255,255,.1) 19% 32%, transparent 33%), conic-gradient(from 0deg, rgba(124,238,255,.45), rgba(255,255,255,.06), rgba(213,161,96,.32), rgba(255,255,255,.08), rgba(124,238,255,.45)); transform: translateZ(58px); animation: reel 9s linear infinite; }
.reel-left { left: 82px; }
.reel-right { right: 82px; animation-direction: reverse; }
@keyframes reel { to { rotate: 360deg; } }
.tape-line { position: absolute; left: 132px; right: 132px; top: 190px; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--warm)); box-shadow: 0 0 18px var(--cyan); transform: translateZ(48px); }
.chip { position: absolute; padding: 7px 10px; border: 1px solid rgba(255,255,255,.24); color: var(--ink); background: rgba(0,0,0,.38); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; transform: translateZ(80px); }
.chip-a { left: 42px; top: 48px; }
.chip-b { right: 42px; top: 50px; }
.chip-c { left: 50%; bottom: 34px; transform: translateX(-50%) translateZ(80px); }
.mini-object { width: 142px; height: 174px; padding: 12px; display: grid; place-items: center; }
.mini-object img { width: 82px; height: 82px; object-fit: contain; }
.mini-object span { color: var(--muted); font-size: 11px; letter-spacing: .13em; }
.mini-one { left: 7%; top: 41%; transform: rotateY(22deg) rotateZ(-4deg) translateZ(110px); }
.mini-two { right: 1%; bottom: 11%; transform: rotateY(-16deg) rotateZ(5deg) translateZ(68px); }
.mini-three { left: 26%; top: 8%; transform: rotateY(12deg) rotateZ(4deg) translateZ(-10px); }
.drawer { position: absolute; left: 0; right: 8%; height: 46px; padding: 13px 18px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.07); box-shadow: 0 24px 70px rgba(0,0,0,.34); }
.drawer-one { bottom: 116px; transform: rotateY(14deg) translateZ(-30px); }
.drawer-two { bottom: 55px; transform: rotateY(10deg) translateZ(-65px); }
.section-heading { max-width: 1080px; margin-bottom: 34px; }
.signature-release { display: grid; grid-template-columns: minmax(320px,.78fr) minmax(0,1fr); gap: 30px; align-items: center; margin-bottom: 28px; }
.release-explosion { min-height: 430px; position: relative; perspective: 1000px; }
.release-explosion span { position: absolute; left: 8%; right: 8%; min-height: 86px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; transform: rotateY(-18deg) translateZ(calc(var(--progress) * 70px)); }
.glass-layer { top: 24px; border-radius: 24px; }
.label-layer { top: 150px; grid-template-columns: 76px 1fr; gap: 14px; color: var(--ink) !important; }
.label-layer img { width: 72px; height: 72px; object-fit: contain; }
.data-layer { top: 276px; color: var(--cyan) !important; }
.browser-proof, .release-card, .package, .system-board article, .process-track li, .resource-grid a, .studio-card, .final-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  box-shadow: 0 30px 100px rgba(0,0,0,.36);
  backdrop-filter: blur(16px);
}
.browser-proof { border-radius: 24px; overflow: hidden; transform: translateY(calc((1 - var(--progress)) * 36px)); }
.browser-bar { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.13); background: rgba(0,0,0,.28); color: var(--muted); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.browser-bar i:nth-child(2) { background: var(--warm); }
.browser-bar i:nth-child(3) { background: var(--cyan); }
.browser-body { display: grid; grid-template-columns: 136px 1fr; gap: 24px; padding: clamp(22px, 4vw, 44px); }
ul { color: var(--muted); line-height: 1.7; padding-left: 1.15em; }
.text-link { display: inline-flex; margin-top: 12px; color: var(--acid); text-decoration: none; font-weight: 950; }
.release-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.release-card, .package { position: relative; border-radius: 24px; padding: 24px; overflow: hidden; transform: translateY(calc((1 - var(--progress)) * 24px)); }
.release-card::before, .package::before { content: ""; position: absolute; inset: -1px; background: radial-gradient(circle at 50% 0%, rgba(124,238,255,.18), transparent 45%); pointer-events: none; }
.release-card> *, .package> * { position: relative; z-index: 1; }
.release-card img { width: 116px; height: 116px; object-fit: contain; margin-bottom: 20px; }
.release-id { position: absolute; right: 18px; top: 18px; color: var(--dim); letter-spacing: .13em; font-size: 11px; }
.release-type, .system-note, .best, .summary, .annual, .setup, .note { color: var(--muted); }
.center-action { text-align: center; margin-top: 26px; }
.signal-chain, .process-track { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; padding: 0; margin: 0; counter-reset: item; }
.signal-chain li, .process-track li { position: relative; min-height: 150px; border-radius: 18px; padding: 18px; overflow: hidden; }
.signal-chain li::before, .process-track li::before { counter-increment: item; content: counter(item, decimal-leading-zero); display: block; margin-bottom: 16px; color: var(--cyan); font-weight: 950; letter-spacing: .13em; }
.signal-chain li::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 18px; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--warm)); transform: scaleX(var(--progress)); transform-origin: left; box-shadow: 0 0 16px rgba(124,238,255,.42); }
.signal-chain b, .process-track b { display: block; margin-bottom: 8px; }
.signal-chain span, .process-track span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.package-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; align-items: start; }
.package { min-height: 520px; }
.package-single, .package-ep { grid-column: span 2; }
.package-lp, .package-double, .package-box { grid-column: span 2; }
.package.featured { transform: translateY(-10px) translateZ(30px); border-color: rgba(216,255,50,.4); }
.format { color: var(--cyan); text-transform: uppercase; letter-spacing: .13em; font-weight: 950; font-size: 12px; }
.price { color: var(--ink); font-size: 22px; }
.price strong { font-size: 48px; }
.system-board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.system-board article { min-height: 145px; border-radius: 18px; padding: 18px; }
.system-board b { display: block; margin-bottom: 8px; }
.system-board span { color: var(--muted); }
.process-track { grid-template-columns: repeat(7, minmax(0,1fr)); }
.resource-grid, .area-links { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.resource-grid a, .area-links a { min-height: 110px; border-radius: 18px; padding: 18px; text-decoration: none; color: var(--ink); font-weight: 900; }
.studio-card, .final-card { max-width: 1080px; margin: auto; padding: clamp(26px, 5vw, 60px); border-radius: 30px; }
.final-cta { min-height: 70vh; display: grid; place-items: center; }
.site-footer { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 24px; padding: 34px clamp(18px,4vw,72px); border-top: 1px solid rgba(255,255,255,.13); }
.site-footer nav { display: grid; gap: 9px; }
.footer-brand { align-items: start; flex-direction: column; text-transform: none; letter-spacing: 0; color: var(--muted); }
.footer-brand b { color: var(--ink); }
.fallback-active .hero-stage::after, .no-js .hero-stage::after { content: "Static archive fallback"; position: absolute; right: 18px; bottom: 18px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.44); color: var(--muted); font-size: 12px; }
@media (max-width: 1100px) {
  .hero, .signature-release { grid-template-columns: 1fr; }
  .hero-stage { min-height: 530px; order: -1; }
  .release-grid, .system-board, .resource-grid, .area-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .signal-chain { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .process-track { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .package-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .package-single, .package-ep, .package-lp, .package-double, .package-box { grid-column: span 1; }
  .site-footer { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto auto; }
  .brand img { width: clamp(100px, 30vw, 128px); }
  .footer-brand img { width: clamp(126px, 36vw, 160px); }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav { grid-column: 1 / -1; justify-self: stretch; display: none; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; }
  .sound-toggle span:last-child { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
  .section { min-height: auto; padding: 54px 18px; }
  h1 { font-size: clamp(48px, 15vw, 72px); }
  h2 { font-size: clamp(34px, 11vw, 58px); }
  .hero-stage { min-height: 390px; overflow: hidden; }
  .light-cyan, .light-warm { width: 180px; height: 180px; }
  .light-warm { left: auto; right: -70px; }
  .light-cyan { left: -70px; right: auto; }
  .archive-object-main { width: min(258px, calc(100vw - 62px)); height: 198px; right: 28px; top: 58px; transform: rotateX(-6deg) rotateY(-4deg); }
  .archive-label { width: 150px; top: 24px; }
  .archive-label strong { font-size: 17px; }
  .reel { width: 64px; height: 64px; top: 92px; }
  .reel-left { left: 52px; } .reel-right { right: 52px; }
  .tape-line { left: 84px; right: 84px; top: 122px; }
  .chip { display: none; }
  .mini-object { width: 104px; height: 126px; }
  .mini-object img { width: 58px; height: 58px; }
  .drawer { right: 0; font-size: 9px; }
  .browser-body, .release-grid, .signal-chain, .process-track, .package-grid, .system-board, .resource-grid, .area-links, .site-footer { grid-template-columns: 1fr; }
  .release-explosion { min-height: 340px; }
  .data-layer { top: 270px; }
  .package.featured { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .archive-object-main, .release-explosion span, .browser-proof, .release-card, .package { transform: none !important; }
}

/* postlaunch-correction: pricing text safety */
.price-card h2, .package h3 { font-size: clamp(24px, 2.15vw, 36px); line-height: 1.08; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.price-card p, .package p, .price-card li, .package li { overflow-wrap: anywhere; }
.price-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
@media (max-width: 1366px) { .price-card { padding: 18px; } .price-card h2 { font-size: clamp(22px, 1.85vw, 30px); } .price { font-size: 18px; } .price strong { font-size: 38px; } }
@media (max-width: 1180px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .site-header { gap: 8px; padding-inline: 12px; } .sound-toggle { padding-inline: 10px; font-size: 12px; } }
@media (max-width: 430px) { .menu-toggle, .sound-toggle { min-width: 44px; padding-inline: 8px; } .price-grid { grid-template-columns: 1fr; } }