:root{
  --bg:#000;
  --fg:#f7fbff;
  --cyan:#6de8ff;
  --gold:#ffd27a;
  --glass:rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--fg);font-family:Inter,Arial,Helvetica,sans-serif}
body{overflow:hidden}
button{font:inherit}
.stage{position:relative;width:100%;height:100svh;min-height:100vh;background:#000;overflow:hidden;isolation:isolate}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#000;filter:saturate(1.05) contrast(1.08)}
.ambient{position:absolute;inset:-15%;z-index:0;background:
 radial-gradient(circle at 50% 47%,rgba(0,220,255,.16),transparent 30%),
 radial-gradient(circle at 50% 48%,rgba(255,186,75,.11),transparent 42%);
 animation:breathe 6s ease-in-out infinite alternate}
.vignette{position:absolute;inset:0;z-index:2;background:
 linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 25%,transparent 70%,rgba(0,0,0,.72) 100%),
 radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.58) 100%);
 pointer-events:none}
.particles{position:absolute;inset:0;z-index:3;opacity:.35;pointer-events:none;background-image:
 radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.4px),
 radial-gradient(circle,rgba(109,232,255,.75) 0 1px,transparent 1.4px);
 background-size:90px 90px,130px 130px;
 background-position:0 0,35px 55px;
 animation:drift 16s linear infinite}
.overlay{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(30px,calc(env(safe-area-inset-bottom) + 26px)) max(20px,env(safe-area-inset-left));text-align:center}
.brand-lockup{margin-top:auto;margin-bottom:auto;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .8s ease,transform .8s ease;text-shadow:0 0 28px rgba(0,0,0,.9)}
.brand-lockup.visible{opacity:1;transform:none}
.eyebrow{display:block;font-size:clamp(.66rem,1vw,.85rem);letter-spacing:.38em;color:rgba(255,255,255,.72);margin-bottom:14px}
h1{margin:0;font-size:clamp(2.7rem,10vw,8.2rem);line-height:.9;letter-spacing:.04em;white-space:nowrap;background:linear-gradient(90deg,var(--cyan),#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(109,232,255,.28))}
.brand-lockup p{margin:18px 0 0;font-size:clamp(.9rem,1.8vw,1.15rem);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.enter-button{display:inline-flex;align-items:center;gap:16px;border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:15px 24px;background:rgba(0,0,0,.38);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 35px rgba(60,210,255,.12);cursor:pointer;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.enter-button:hover,.enter-button:focus-visible{transform:translateY(-2px);background:rgba(0,20,28,.58);border-color:var(--cyan);outline:none}
.enter-button span:first-child{font-size:.82rem;letter-spacing:.19em}
.arrow{font-size:1.25rem}
.sound-toggle{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));border:0;background:transparent;color:rgba(255,255,255,.72);font-size:.72rem;letter-spacing:.14em;cursor:pointer}
.countdown{height:22px;margin-top:12px;color:rgba(255,255,255,.58);font-size:.75rem;letter-spacing:.08em}
.fade-out{animation:fadeOut .7s ease forwards}
.noscript-link{position:absolute;inset:auto 50% 40px auto;transform:translateX(50%);color:#fff}
@keyframes breathe{to{transform:scale(1.08);opacity:.8}}
@keyframes drift{to{background-position:90px 180px,165px 240px}}
@keyframes fadeOut{to{opacity:0;transform:scale(1.015)}}
@media (max-width:700px){
  .hero-video{object-position:center}
  h1{font-size:clamp(2.25rem,14vw,4rem);letter-spacing:.01em}
  .eyebrow{letter-spacing:.23em}
  .brand-lockup p{font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}