:root {
  --bg: #020302;
  --ink: #eef0eb;
  --bass: 0;
  --mid: 0;
  --high: 0;
  --mx: 0;
  --my: 0;
  --glitch: 0;
  --wake: 0;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
html { background: var(--bg); color-scheme: dark; }
body {
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
button, a { color: inherit; font: inherit; }
button { border: 0; }
a { text-decoration: none; }

.noscript {
  position: fixed; z-index: 1000; inset: auto 0 0;
  padding: 12px 20px; background: #111; color: #fff; text-align: center;
}

.scene, .scene > * { position: fixed; inset: 0; }
.scene { z-index: 0; overflow: hidden; background: #020302; }

.scene__backdrop {
  inset: -12%;
  background: url('../img/background.jpg') center center / cover no-repeat;
  filter: blur(calc(38px - var(--wake) * 16px)) brightness(calc(.14 + var(--wake) * .26)) saturate(calc(.42 + var(--wake) * .28)) contrast(calc(1.20 + var(--wake) * .16));
  transform: scale(calc(1.17 - var(--wake) * .03));
  opacity: calc(.90 + var(--wake) * .07);
}

.scene__image,
.scene__glitch {
  inset: -5%;
  background: url('../img/background.jpg') center 48% / cover no-repeat;
}

.scene__image {
  filter: brightness(calc(.24 + var(--wake) * .30 + var(--bass) * .12)) contrast(calc(1.28 + var(--wake) * .16 + var(--mid) * .18)) saturate(calc(.52 + var(--wake) * .20));
  transform:
    translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px), 0)
    scale(calc(1.085 + var(--bass) * .022));
  will-change: transform, filter;
  transition: filter 70ms linear;
}

.scene__glitch {
  opacity: 0;
  pointer-events: none;
  filter: grayscale(1) contrast(1.5) brightness(.52);
  mix-blend-mode: screen;
  will-change: transform, clip-path, opacity;
}
body.glitching .scene__glitch--a { animation: bgGlitchA 260ms steps(2, end); }
body.glitching .scene__glitch--b { animation: bgGlitchB 260ms steps(2, end); }
body.glitching .scene__image { animation: bgMainGlitch 260ms steps(2, end); }

.scene__shadow {
  background:
    linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.63) 26%, rgba(0,0,0,.18) 57%, rgba(0,0,0,.59) 100%),
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, transparent 32%, rgba(0,0,0,.54) 100%);
  opacity: calc(1 - var(--wake) * .24);
  transition: opacity 120ms linear;
}

.scene__beam {
  width: 38vw;
  height: 150vh;
  top: -25vh;
  opacity: calc(.025 + var(--high) * .055);
  filter: blur(38px);
  background: linear-gradient(90deg, transparent, rgba(236,240,232,.12), transparent);
  mix-blend-mode: screen;
  transform-origin: center;
  pointer-events: none;
}
.scene__beam--one {
  left: 14%;
  transform: rotate(19deg) translateX(calc(var(--mx) * 8px));
  animation: beamBreath 8.5s ease-in-out infinite alternate;
}
.scene__beam--two {
  left: 61%;
  width: 24vw;
  opacity: calc(.015 + var(--mid) * .035);
  transform: rotate(-14deg) translateX(calc(var(--mx) * -5px));
  animation: beamBreath 11s 1.3s ease-in-out infinite alternate-reverse;
}

.scene__fog {
  width: 135%; height: 72%; inset: auto auto -22% -18%;
  opacity: calc(.08 + var(--wake) * .05 + var(--bass) * .11);
  filter: blur(52px);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 20% 62%, rgba(201,206,196,.13), transparent 42%),
    radial-gradient(ellipse at 62% 50%, rgba(129,136,126,.10), transparent 38%),
    radial-gradient(ellipse at 88% 64%, rgba(223,226,217,.075), transparent 29%);
  animation: fogDrift 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.scene__fog--two {
  inset: -22% -18% auto auto;
  transform: rotate(180deg);
  opacity: calc(.045 + var(--bass) * .06);
  animation-duration: 23s;
  animation-direction: alternate-reverse;
}

.scene__pulse {
  left: 50%; top: 50%; width: 62vmin; height: 62vmin; inset: auto;
  border: 1px solid rgba(225,229,220,.055);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(.82 + var(--bass) * .38));
  opacity: calc(.02 + var(--bass) * .12);
  box-shadow: 0 0 110px rgba(219,224,214,.035), inset 0 0 110px rgba(219,224,214,.025);
  will-change: transform, opacity;
}

.scene__flare {
  inset: auto;
  width: 42vw;
  height: 42vw;
  min-width: 360px;
  min-height: 360px;
  left: 54%;
  top: 40%;
  transform: translate(-50%, -50%) scale(calc(.88 + var(--bass) * .22));
  border-radius: 50%;
  opacity: calc(.01 + var(--wake) * .045 + var(--bass) * .05);
  filter: blur(50px);
  background: radial-gradient(circle, rgba(232,236,227,.36) 0%, rgba(232,236,227,.09) 17%, transparent 64%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.scene__interference {
  opacity: .035;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(245,247,242,.09) 8px, transparent 9px 13px),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.035) 48%, transparent 51%);
  transform: translateY(-12%);
  animation: interferenceMove 7s steps(1, end) infinite;
}

.scene__flash {
  background: rgba(235,238,230,.105);
  opacity: 0;
  pointer-events: none;
}
body.impact .scene__flash { animation: impactFlash 240ms ease-out; }
body.impact .scene__image { animation: impactKick 300ms cubic-bezier(.2,.8,.2,1); }
body.impact .scene__flare { animation: flareHit 350ms ease-out; }

.scene__dust { width: 100%; height: 100%; opacity: .66; }
.scene__scanlines {
  pointer-events: none;
  opacity: .10;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
  animation: scanShift 8s linear infinite;
}
.scene__grain {
  inset: -50%; width: 200%; height: 200%; opacity: .082; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  animation: grain .16s steps(2) infinite;
  mix-blend-mode: soft-light;
}
.scene__vignette {
  box-shadow: inset 0 0 20vw 9vw rgba(0,0,0,.91);
  background: radial-gradient(circle at 54% 47%, transparent 25%, rgba(0,0,0,.18) 61%, rgba(0,0,0,.72) 100%);
  opacity: calc(1 - var(--wake) * .18);
  pointer-events: none;
  transition: opacity 120ms linear;
}

.topbar, .footer {
  position: fixed; z-index: 10; left: 0; width: 100%; display: flex;
  align-items: center; justify-content: space-between;
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
  pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
}
.topbar { top: 0; padding-top: max(24px, env(safe-area-inset-top)); }
.footer { bottom: 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.topbar > *, .footer > * { pointer-events: auto; }
body:not(.is-ready) .topbar { opacity: 0; transform: translateY(-10px); }
body:not(.is-ready) .footer { opacity: 0; transform: translateY(10px); }

.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand__mark { position: relative; width: 18px; height: 19px; display: inline-block; }
.brand__mark i {
  position: absolute; top: 2px; width: 1px; height: 17px;
  background: rgba(238,241,234,.78); transform: rotate(18deg); transform-origin: center;
}
.brand__mark i:nth-child(1) { left: 2px; }
.brand__mark i:nth-child(2) { left: 8px; height: 13px; top: 4px; }
.brand__mark i:nth-child(3) { left: 14px; height: 9px; top: 6px; }
.brand__name {
  font-size: 10px; font-weight: 650; letter-spacing: .24em; color: rgba(242,244,239,.86);
}

.topbar__actions { display: flex; align-items: center; gap: 16px; }
.lang, .sound {
  background: none; cursor: pointer; color: rgba(242,244,239,.68);
  transition: color .25s ease, opacity .25s ease;
}
.lang:hover, .sound:hover { color: #fff; }
.lang { display: flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 10px; letter-spacing: .16em; }
.lang span:not(.lang__divider) { opacity: .34; transition: opacity .25s ease; }
.lang span.is-active { opacity: 1; }
.lang__divider { opacity: .18; }

.hero {
  position: relative; z-index: 5; min-height: 100svh; display: grid; place-items: center;
  padding: 100px 7vw;
}
.hero__content {
  text-align: center;
  max-width: 1120px;
  transform: translateY(-1vh);
  opacity: 0;
}
body.is-ready .hero__content { animation: contentReveal 1.25s .08s both cubic-bezier(.16,1,.3,1); }
.hero__title {
  position: relative;
  margin: 0;
  font-size: clamp(42px, 6.4vw, 104px);
  line-height: .94;
  font-weight: 390;
  letter-spacing: -.052em;
  color: rgba(244,245,241,.96);
  text-shadow: 0 8px 44px rgba(0,0,0,.56);
  transform: scale(calc(1 + var(--bass) * .008));
  will-change: transform, filter;
}
.hero__title span { color: rgba(244,245,241,.34); letter-spacing: -.09em; }
.hero__title::before,
.hero__title::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  color: rgba(244,245,241,.72);
  overflow: hidden;
}
body.glitching .hero__title::before { animation: titleGlitchA 260ms steps(2, end); }
body.glitching .hero__title::after { animation: titleGlitchB 260ms steps(2, end); }
.hero__subtitle {
  margin: 26px auto 0;
  max-width: 760px;
  font-size: clamp(10px, .82vw, 13px);
  line-height: 1.65;
  font-weight: 600;
  letter-spacing: .22em;
  color: rgba(236,238,233,.49);
  text-transform: uppercase;
}
.hero__line { width: min(330px, 46vw); height: 1px; margin: 36px auto 0; overflow: hidden; background: rgba(240,242,237,.07); }
.hero__line span {
  display: block; height: 100%; width: 100%; transform-origin: left center;
  background: rgba(235,239,231,.48); transform: scaleX(calc(.08 + var(--bass) * .92));
  transition: transform 65ms linear;
  box-shadow: 0 0 12px rgba(235,239,231,calc(.04 + var(--high) * .13));
}

.footer__status {
  display: flex; align-items: center; gap: 9px; font-size: 9px; letter-spacing: .22em;
  color: rgba(235,238,232,.35);
}
.status-dot {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(224,229,219,.65);
  box-shadow: 0 0 calc(7px + var(--bass) * 12px) rgba(230,235,225,calc(.15 + var(--bass) * .48));
  animation: statusBlink 3.2s steps(1, end) infinite;
}
.sound { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.sound__text { font-size: 9px; letter-spacing: .2em; }
.sound__bars { height: 12px; display: flex; align-items: center; gap: 2px; }
.sound__bars i { display: block; width: 1px; background: currentColor; opacity: .8; }
.sound__bars i:nth-child(1) { height: calc(3px + var(--bass) * 6px); }
.sound__bars i:nth-child(2) { height: calc(7px + var(--mid) * 5px); }
.sound__bars i:nth-child(3) { height: calc(5px + var(--high) * 5px); }
.sound__bars i:nth-child(4) { height: calc(2px + var(--mid) * 6px); }
body.is-muted .sound__bars i,
body.audio-blocked .sound__bars i { height: 1px !important; opacity: .35; }

.entry {
  position: fixed; z-index: 100; inset: 0; display: grid; place-items: center;
  overflow: hidden;
  background: #020302;
  transition: opacity .7s cubic-bezier(.65,0,.35,1), visibility .7s;
}
.entry.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.entry__background {
  position: absolute; inset: -8%;
  background: url('../img/background.jpg') center 48% / cover no-repeat;
  filter: grayscale(1) brightness(.055) contrast(1.6) blur(2px);
  transform: scale(1.05);
  opacity: .7;
  animation: entryBackground 3s ease-out both;
}
.entry__noise {
  position: absolute; inset: -20%;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter id='n'%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .14s steps(2) infinite;
}
.entry__content {
  position: relative;
  text-align: center;
  min-width: min(360px, 80vw);
  animation: entryFlicker 3s steps(1, end) both;
}
.entry__symbol { width: 42px; height: 44px; margin: 0 auto 20px; position: relative; opacity: .78; }
.entry__symbol span { position: absolute; top: 0; width: 1px; height: 40px; background: rgba(239,241,236,.75); transform: rotate(18deg); }
.entry__symbol span:nth-child(1) { left: 8px; }
.entry__symbol span:nth-child(2) { left: 20px; height: 31px; top: 5px; }
.entry__symbol span:nth-child(3) { left: 32px; height: 22px; top: 10px; }
.entry__brand { margin: 0 0 30px; font-size: 9px; letter-spacing: .34em; color: rgba(239,241,236,.36); }
.entry__connecting { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .32em; color: rgba(245,246,243,.9); }
.entry__dots i { font-style: normal; opacity: .18; animation: dotBlink 1.15s infinite; }
.entry__dots i:nth-child(2) { animation-delay: .18s; }
.entry__dots i:nth-child(3) { animation-delay: .36s; }
.entry__progress { width: min(290px, 68vw); height: 1px; margin: 18px auto 0; background: rgba(245,246,243,.10); overflow: hidden; }
.entry__progress span {
  display: block; height: 100%; width: 100%; transform-origin: left center;
  background: rgba(245,246,243,.72);
  box-shadow: 0 0 12px rgba(245,246,243,.16);
  animation: connectProgress 2.72s .08s cubic-bezier(.23,.84,.42,1) both;
}
.entry__status { margin: 11px 0 0; font-size: 7px; letter-spacing: .22em; color: rgba(239,241,236,.22); }

@keyframes fogDrift {
  0% { transform: translate3d(-2%, 2%, 0) scale(1); }
  100% { transform: translate3d(4%, -4%, 0) scale(1.09); }
}
@keyframes beamBreath {
  0% { opacity: .015; filter: blur(46px); }
  100% { opacity: .07; filter: blur(30px); }
}
@keyframes grain {
  0% { transform: translate(0,0); }
  25% { transform: translate(2%, -3%); }
  50% { transform: translate(-3%, 2%); }
  75% { transform: translate(3%, 4%); }
  100% { transform: translate(-2%, -1%); }
}
@keyframes scanShift {
  from { transform: translateY(-4px); }
  to { transform: translateY(4px); }
}
@keyframes interferenceMove {
  0%, 11%, 18%, 35%, 58%, 82%, 100% { transform: translateY(-12%); opacity: .025; }
  12% { transform: translateY(22%); opacity: .075; }
  36% { transform: translateY(-31%); opacity: .055; }
  59% { transform: translateY(13%); opacity: .065; }
  83% { transform: translateY(-2%); opacity: .085; }
}
@keyframes impactFlash {
  0% { opacity: 0; }
  12% { opacity: .58; }
  35% { opacity: .08; }
  100% { opacity: 0; }
}
@keyframes impactKick {
  0% { transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px),0) scale(1.085); }
  18% { transform: translate3d(calc(var(--mx) * 14px - 5px), calc(var(--my) * 10px + 2px),0) scale(1.104); filter: brightness(calc(.35 + var(--wake) * .28)) contrast(1.55) saturate(calc(.45 + var(--wake) * .10)); }
  42% { transform: translate3d(calc(var(--mx) * 14px + 3px), calc(var(--my) * 10px - 2px),0) scale(1.095); }
  100% { transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px),0) scale(1.085); }
}
@keyframes flareHit {
  0% { opacity: .02; }
  16% { opacity: .14; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: .02; transform: translate(-50%, -50%) scale(.92); }
}
@keyframes bgMainGlitch {
  0%, 100% { transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px),0) scale(1.085); }
  18% { transform: translate3d(calc(var(--mx) * 14px + 6px), calc(var(--my) * 10px),0) scale(1.09); }
  37% { transform: translate3d(calc(var(--mx) * 14px - 8px), calc(var(--my) * 10px + 1px),0) scale(1.086); }
  58% { transform: translate3d(calc(var(--mx) * 14px + 3px), calc(var(--my) * 10px - 1px),0) scale(1.092); }
}
@keyframes bgGlitchA {
  0% { opacity: 0; clip-path: inset(8% 0 77% 0); transform: translateX(-12px) scale(1.085); }
  20% { opacity: .31; clip-path: inset(21% 0 61% 0); transform: translateX(9px) scale(1.085); }
  45% { opacity: .18; clip-path: inset(54% 0 30% 0); transform: translateX(-7px) scale(1.085); }
  70% { opacity: .24; clip-path: inset(73% 0 12% 0); transform: translateX(11px) scale(1.085); }
  100% { opacity: 0; clip-path: inset(88% 0 4% 0); }
}
@keyframes bgGlitchB {
  0% { opacity: 0; clip-path: inset(70% 0 10% 0); transform: translateX(10px) scale(1.085); }
  24% { opacity: .18; clip-path: inset(12% 0 72% 0); transform: translateX(-8px) scale(1.085); }
  52% { opacity: .26; clip-path: inset(39% 0 43% 0); transform: translateX(13px) scale(1.085); }
  77% { opacity: .15; clip-path: inset(81% 0 7% 0); transform: translateX(-10px) scale(1.085); }
  100% { opacity: 0; }
}
@keyframes titleGlitchA {
  0%,100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 100% 0); }
  18% { opacity: .36; transform: translate(-4px, 1px); clip-path: inset(10% 0 68% 0); }
  44% { opacity: .23; transform: translate(5px, -1px); clip-path: inset(44% 0 37% 0); }
  73% { opacity: .31; transform: translate(-3px, 0); clip-path: inset(76% 0 8% 0); }
}
@keyframes titleGlitchB {
  0%,100% { opacity: 0; transform: translate(0); }
  22% { opacity: .22; transform: translate(5px, -1px); clip-path: inset(70% 0 11% 0); }
  56% { opacity: .28; transform: translate(-6px, 1px); clip-path: inset(27% 0 55% 0); }
  81% { opacity: .18; transform: translate(4px, 0); clip-path: inset(57% 0 25% 0); }
}
@keyframes contentReveal {
  0% { opacity: 0; filter: blur(15px); transform: translateY(23px) scale(.985); }
  58% { opacity: 1; filter: blur(2px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(-1vh) scale(1); }
}
@keyframes statusBlink {
  0%, 82%, 100% { opacity: .95; }
  83%, 88% { opacity: .15; }
  89%, 93% { opacity: .7; }
}
@keyframes dotBlink {
  0%, 22% { opacity: .16; }
  42%, 72% { opacity: .95; }
  100% { opacity: .16; }
}
@keyframes connectProgress {
  0% { transform: scaleX(.02); opacity: .35; }
  22% { transform: scaleX(.18); }
  38% { transform: scaleX(.31); }
  52% { transform: scaleX(.61); }
  72% { transform: scaleX(.72); }
  100% { transform: scaleX(1); opacity: .9; }
}
@keyframes entryFlicker {
  0%, 9%, 13%, 31%, 34%, 57%, 60%, 84%, 100% { opacity: 1; transform: translateX(0); }
  10% { opacity: .38; transform: translateX(-2px); }
  12% { opacity: .72; transform: translateX(2px); }
  32% { opacity: .45; transform: translateX(1px); }
  33% { opacity: .9; transform: translateX(-1px); }
  58% { opacity: .28; }
  59% { opacity: .94; }
  85% { opacity: .62; transform: translateX(2px); }
}
@keyframes entryBackground {
  0% { transform: scale(1.12); filter: grayscale(1) brightness(.035) contrast(1.9) blur(5px); }
  100% { transform: scale(1.04); filter: grayscale(1) brightness(.075) contrast(1.5) blur(1px); }
}

@media (max-width: 700px) {
  .topbar, .footer { padding-left: 20px; padding-right: 20px; }
  .brand__name { font-size: 9px; letter-spacing: .2em; }
  .hero { padding-left: 22px; padding-right: 22px; }
  .hero__content { transform: translateY(-2vh); }
  .hero__title { font-size: clamp(43px, 14.7vw, 68px); line-height: .94; }
  .hero__subtitle { max-width: 360px; margin-top: 20px; font-size: 9px; letter-spacing: .16em; }
  .footer__status { max-width: 48vw; line-height: 1.45; }
  .scene__image, .scene__glitch, .entry__background { background-position: 56% 48%; }
  .scene__beam--one { left: 2%; width: 56vw; }
  .scene__beam--two { left: 64%; width: 34vw; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__fog, .scene__beam, .scene__grain, .scene__scanlines, .scene__interference { animation-duration: 12s !important; }
}

/* Audio autoplay fallback: only appears when the browser blocks audible autoplay. */
.audio-hint {
  position: fixed; z-index: 35; left: 50%; bottom: max(68px, calc(env(safe-area-inset-bottom) + 54px));
  transform: translate(-50%, 10px); padding: 8px 11px; border: 1px solid rgba(240,242,237,.10);
  background: rgba(2,3,2,.54); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: rgba(242,244,239,.72); font-size: 8px; font-weight: 650; letter-spacing: .18em;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
body.audio-blocked.is-ready .audio-hint { opacity: 1; visibility: visible; transform: translate(-50%, 0); animation: audioHintPulse 1.8s ease-in-out infinite; }
body.audio-blocked.is-ready .sound { color: rgba(255,255,255,.96); text-shadow: 0 0 14px rgba(255,255,255,.16); }
@keyframes audioHintPulse { 0%,100%{opacity:.52} 50%{opacity:1} }
@media (max-width: 680px) { .audio-hint { width: max-content; max-width: calc(100vw - 34px); text-align: center; } }
\n\n/* V3 — darker, more brutal typography */\n.hero__content {\n  isolation: isolate;\n}\n.hero__title {\n  max-width: 1180px;\n  margin-inline: auto;\n  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;\n  font-size: clamp(54px, 7.3vw, 124px);\n  line-height: .82;\n  font-weight: 900;\n  font-stretch: condensed;\n  letter-spacing: .018em;\n  text-transform: uppercase;\n  color: rgba(229,232,224,.92);\n  -webkit-text-stroke: 1px rgba(255,255,255,.025);\n  text-shadow:\n    0 2px 0 rgba(0,0,0,.95),\n    0 7px 0 rgba(0,0,0,.50),\n    0 18px 38px rgba(0,0,0,.88),\n    0 0 calc(8px + var(--high) * 13px) rgba(225,230,220,calc(.018 + var(--high) * .032));\n  filter: contrast(1.13) drop-shadow(0 20px 26px rgba(0,0,0,.52));\n}\n.hero__title::before {\n  color: rgba(214,218,208,.52);\n  text-shadow: -5px 0 0 rgba(255,255,255,.06), 8px 0 0 rgba(0,0,0,.92);\n  clip-path: polygon(0 8%,100% 8%,100% 25%,0 25%,0 42%,100% 42%,100% 51%,0 51%,0 76%,100% 76%,100% 88%,0 88%);\n}\n.hero__title::after {\n  color: rgba(246,247,243,.24);\n  text-shadow: 4px 0 0 rgba(255,255,255,.05), -9px 0 0 rgba(0,0,0,.88);\n  clip-path: polygon(0 0,100% 0,100% 12%,0 12%,0 33%,100% 33%,100% 41%,0 41%,0 64%,100% 64%,100% 72%,0 72%,0 91%,100% 91%,100% 100%,0 100%);\n}\n.hero__title span {\n  color: rgba(216,220,211,.20);\n  letter-spacing: -.025em;\n  text-shadow: 0 0 16px rgba(255,255,255,.025);\n}\n.hero__subtitle {\n  position: relative;\n  max-width: 860px;\n  margin-top: 30px;\n  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;\n  font-size: clamp(10px, .94vw, 15px);\n  line-height: 1.35;\n  font-weight: 900;\n  letter-spacing: .29em;\n  color: rgba(196,201,192,.62);\n  text-shadow: 0 3px 15px rgba(0,0,0,.92);\n}\n.hero__subtitle::before,\n.hero__subtitle::after {\n  content: "";\n  display: inline-block;\n  width: clamp(22px, 3.3vw, 52px);\n  height: 1px;\n  margin: 0 16px .28em;\n  vertical-align: middle;\n  background: linear-gradient(90deg, transparent, rgba(215,220,210,.22));\n}\n.hero__subtitle::after { transform: scaleX(-1); }\n.brand__name, .lang, .sound__text, .footer__status {\n  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;\n  font-weight: 800;\n  text-shadow: 0 2px 12px rgba(0,0,0,.75);\n}\n.entry__brand, .entry__connecting, .entry__status {\n  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;\n  font-weight: 900;\n  text-transform: uppercase;\n}\n.entry__connecting {\n  font-size: 12px;\n  letter-spacing: .38em;\n  text-shadow: 0 0 16px rgba(235,239,231,.08), 0 5px 18px rgba(0,0,0,.9);\n}\n/* Make the fallback notice passive; the footer sound control remains available. */\n.audio-hint {\n  border-color: rgba(240,242,237,.06);\n  background: rgba(1,2,1,.72);\n  color: rgba(200,204,196,.48);\n  font-family: "Arial Narrow", Arial, sans-serif;\n  font-weight: 800;\n}\n@media (max-width: 700px) {\n  .hero__title { font-size: clamp(49px, 15vw, 78px); line-height: .84; letter-spacing: .012em; }\n  .hero__subtitle { max-width: 390px; font-size: 9px; letter-spacing: .20em; line-height: 1.55; }\n  .hero__subtitle::before, .hero__subtitle::after { width: 18px; margin-inline: 8px; }\n}\n
/* V4 — softer text presence */
.hero__title {
  color: rgba(229,232,224,.72);
  -webkit-text-stroke: 1px rgba(255,255,255,.012);
  text-shadow:
    0 2px 0 rgba(0,0,0,.72),
    0 6px 0 rgba(0,0,0,.28),
    0 16px 34px rgba(0,0,0,.62),
    0 0 calc(7px + var(--high) * 10px) rgba(225,230,220,calc(.01 + var(--high) * .018));
  filter: contrast(1.06) drop-shadow(0 16px 22px rgba(0,0,0,.38));
}
.hero__title span {
  color: rgba(216,220,211,.12);
  text-shadow: 0 0 12px rgba(255,255,255,.012);
}
.hero__title::before {
  color: rgba(214,218,208,.28);
  text-shadow: -3px 0 0 rgba(255,255,255,.025), 5px 0 0 rgba(0,0,0,.72);
}
.hero__title::after {
  color: rgba(246,247,243,.12);
  text-shadow: 3px 0 0 rgba(255,255,255,.02), -5px 0 0 rgba(0,0,0,.68);
}
.hero__subtitle {
  color: rgba(196,201,192,.42);
  font-weight: 800;
  letter-spacing: .27em;
  text-shadow: 0 3px 12px rgba(0,0,0,.62);
}
.hero__subtitle::before,
.hero__subtitle::after {
  background: linear-gradient(90deg, transparent, rgba(215,220,210,.12));
}
.brand__name, .lang, .sound__text, .footer__status {
  opacity: .68;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.entry__brand, .entry__connecting, .entry__status {
  opacity: .72;
}
body.glitching .hero__title::before,
body.glitching .hero__title::after {
  opacity: .18;
}


/* V5 — background wakes up with the soundtrack */
.entry__background {
  animation: entryBackground 3s ease-out both;
}
@keyframes entryBackground {
  0% { transform: scale(1.12); filter: grayscale(1) brightness(.03) contrast(1.9) blur(5px); }
  100% { transform: scale(1.04); filter: grayscale(.72) brightness(.12) contrast(1.52) blur(1px); }
}