:root{
  --gold:#d7a93f; --gold2:#ffe08a; --black:#030303; --panel:rgba(12,12,12,.74); --line:rgba(215,169,63,.38);
  --white:#fff6df;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,Arial,sans-serif; color:var(--white);
  background:radial-gradient(circle at top,#231a08 0%,#050505 35%,#000 100%);
  overflow-x:hidden;
}
#particles{position:fixed; inset:0; z-index:-2}
body:before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:56px 56px; mask-image:linear-gradient(to bottom,black,transparent 78%);
}
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:10; padding:22px clamp(18px,5vw,72px);
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  background:linear-gradient(to bottom,rgba(0,0,0,.85),transparent);
}
.brand{display:flex; align-items:center; gap:15px}
.brand img{width:66px; filter:drop-shadow(0 0 18px rgba(215,169,63,.35))}
.brand strong{display:block; font-weight:900; letter-spacing:2px}
.brand span{font-size:12px; color:var(--gold2); letter-spacing:3px}
nav{display:flex; align-items:center; gap:28px}
nav a{color:white; margin-left:0; text-decoration:none; text-transform:uppercase; font-size:12px; letter-spacing:2px}
nav a:hover{color:var(--gold2)}
.hero{min-height:100svh; padding:140px clamp(18px,5vw,72px) 70px; display:grid; place-items:center; text-align:center; position:relative}
.stadium-glow{
  position:absolute; top:12%; width:88vw; height:38vh; border-radius:50%;
  background:radial-gradient(circle,rgba(255,210,92,.2),transparent 62%);
  filter:blur(10px); animation:pulse 3s ease-in-out infinite alternate;
}
.logo-stage{
  width:min(330px,58vw); aspect-ratio:1; display:grid; place-items:center; margin-inline:auto;
  perspective:900px; animation:float 5s ease-in-out infinite;
}
.logo-3d{
  --tilt-x:0deg; --tilt-y:0deg; --shine-x:50%; --shine-y:24%;
  position:relative; width:100%; aspect-ratio:1; display:grid; place-items:center; border-radius:50%;
  transform:rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transform-style:preserve-3d;
  transition:transform .12s ease-out;
  filter:drop-shadow(0 36px 32px rgba(0,0,0,.72));
}
.logo-3d:before{
  content:""; position:absolute; inset:7%; border-radius:50%;
  background:linear-gradient(145deg,#fff0a8 0%,#b7791c 34%,#241303 70%,#050505 100%);
  transform:translateZ(-34px);
  box-shadow:
    0 0 70px rgba(215,169,63,.5),
    inset 0 0 0 10px rgba(255,224,138,.22),
    inset -24px -28px 42px rgba(0,0,0,.72),
    inset 18px 18px 28px rgba(255,237,168,.3);
}
.logo-depth{
  position:absolute; inset:9%; border-radius:50%;
  background:linear-gradient(145deg,#6e430f,#120901 55%,#000);
  transform:translateZ(-58px);
  box-shadow:
    12px 18px 0 #070401,
    24px 30px 32px rgba(0,0,0,.78);
}
.logo-face{
  position:absolute; inset:0; border-radius:50%; display:grid; place-items:center;
  background:
    radial-gradient(circle at 34% 20%,rgba(255,255,255,.34),transparent 22%),
    linear-gradient(145deg,rgba(255,224,138,.4),rgba(0,0,0,.1) 48%,rgba(0,0,0,.45));
  transform:translateZ(42px);
  box-shadow:
    inset 0 0 0 2px rgba(255,232,158,.44),
    inset 0 0 42px rgba(255,255,255,.08),
    0 16px 34px rgba(0,0,0,.55);
  overflow:hidden;
}
.logo-face img{
  width:93%;
  transform:translateZ(36px) scale(1.02);
  filter:
    drop-shadow(0 3px 0 rgba(255,224,138,.65))
    drop-shadow(0 16px 18px rgba(0,0,0,.82));
}
.logo-shine{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(255,255,255,.42),transparent 18%),
    linear-gradient(115deg,transparent 14%,rgba(255,255,255,.2) 34%,transparent 54%);
  mix-blend-mode:screen; opacity:.65; transform:translateZ(72px);
}
.location-pill{
  margin:20px 0 8px; padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  background:rgba(0,0,0,.48); color:var(--gold2); font-size:12px; font-weight:900;
  letter-spacing:3px; text-transform:uppercase; box-shadow:0 0 24px rgba(215,169,63,.12);
}
.eyebrow{color:var(--gold2); letter-spacing:4px; text-transform:uppercase; font-weight:800}
h1{
  margin:16px 0 8px; font-size:clamp(46px,10vw,150px); line-height:.86; letter-spacing:5px;
  background:linear-gradient(90deg,#a8741e,#ffe08a,#b98222); -webkit-background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(215,169,63,.25);
}
.subtext{max-width:720px; color:#dfd4bd; font-size:18px; line-height:1.7}
.countdown{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; width:min(720px,100%); margin:30px auto 18px;
  padding:14px; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.55);
  box-shadow:0 0 35px rgba(215,169,63,.16);
}
.countdown div{padding:16px 10px; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01))}
.countdown strong{display:block; font-size:42px}
.countdown span{font-size:11px; letter-spacing:2px; color:var(--gold2); text-transform:uppercase}
.notify-form{display:flex; width:min(720px,100%); margin:auto; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#030303}
.notify-form input{flex:1; padding:20px; background:transparent; border:0; color:white; font-size:16px}
.notify-form button,.vip-actions a,.sneak button{
  border:0; background:linear-gradient(90deg,#b98222,#ffe08a,#c28b2c); color:#110b00; font-weight:900;
  letter-spacing:2px; text-transform:uppercase; padding:18px 30px; cursor:pointer;
}
.floating-card{
  position:absolute; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.58);
  backdrop-filter:blur(14px); box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.floating-card span{display:block; color:#d2c5a8; font-size:12px}.floating-card strong{color:var(--gold2)}
.card-left{left:8vw; top:36%}.card-right{right:8vw; top:34%}
.features,.sneak,.vip{width:min(1180px,calc(100vw - 36px)); margin:0 auto 36px}
.features{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--line); border-radius:18px; background:var(--panel); overflow:hidden}
.features article{padding:28px; border-right:1px solid rgba(215,169,63,.22); text-align:center}
.features article:last-child{border-right:0}.features span{font-size:38px}.features h3{color:var(--gold2); letter-spacing:2px}.features p{color:#d6ccba; line-height:1.55}
.sneak{display:grid; grid-template-columns:.8fr 1.6fr; gap:24px; align-items:stretch}
.sneak-copy,.vip{border:1px solid var(--line); border-radius:18px; padding:34px; background:var(--panel)}
.sneak h2,.vip h2{font-size:clamp(28px,4vw,48px); margin:0 0 25px}
.preview-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.preview{
  min-height:300px; border-radius:18px; display:flex; align-items:end; padding:18px; font-weight:900;
  background-size:cover; background-position:center; border:1px solid rgba(215,169,63,.2);
}
.p1{background:linear-gradient(180deg,transparent,#000),url("https://images.unsplash.com/photo-1519861531473-9200262188bf?auto=format&fit=crop&w=900&q=80")}
.p2{background:linear-gradient(180deg,transparent,#000),url("https://images.unsplash.com/photo-1536935338788-846bb9981813?auto=format&fit=crop&w=900&q=80")}
.p3{background:linear-gradient(180deg,transparent,#000),url("https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&w=900&q=80")}
.p4{background:linear-gradient(180deg,transparent,#000),url("https://images.unsplash.com/photo-1527477396000-e27163b481c2?auto=format&fit=crop&w=900&q=80")}
.vip{display:flex; justify-content:space-between; align-items:center}
.vip-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.vip-actions a{text-decoration:none; border-radius:12px; white-space:nowrap}
.vip-actions .social-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(0,0,0,.46); color:var(--gold2); border:1px solid var(--line);
}
.social-cta span{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(145deg,#ffe08a,#b98222); color:#110b00; font-size:11px;
}
footer{padding:30px clamp(18px,5vw,72px); display:flex; align-items:center; justify-content:space-between; gap:24px; color:#aaa; border-top:1px solid rgba(215,169,63,.2)}
footer img{width:70px}
.footer-copy{text-align:right}
.footer-copy p{margin:4px 0}
.social-link a{color:var(--gold2); text-decoration:none; font-weight:800; letter-spacing:1.2px}
.social-link a:hover{text-decoration:underline}
.credit{font-size:12px; color:#7f7667}
.credit a{color:var(--gold2); text-decoration:none}
.credit a:hover{text-decoration:underline}
@keyframes float{50%{transform:translateY(-16px) rotateX(5deg) rotateY(-5deg)}}
@keyframes pulse{to{opacity:.45; transform:scale(1.08)}}
@media(max-width:1120px){
  .features{grid-template-columns:repeat(3,minmax(0,1fr))}
  .features article{border-right:1px solid rgba(215,169,63,.22); border-bottom:1px solid rgba(215,169,63,.22)}
  .features article:nth-child(3n){border-right:0}
  .features article:nth-last-child(-n+2){border-bottom:0}
  .card-left{left:3vw}.card-right{right:3vw}
}
@media(max-width:980px){
  .topbar{position:absolute; align-items:flex-start}
  .brand img{width:58px}
  .brand strong{font-size:15px}
  .brand span{font-size:10px; letter-spacing:2px}
  nav{gap:18px}
  nav a{margin-left:0; font-size:11px}
  .hero{padding-top:124px}
  .logo-stage{width:min(300px,56vw)}
  .floating-card{font-size:13px}
  .card-left{top:32%}.card-right{top:31%}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .features article:nth-child(3n){border-right:1px solid rgba(215,169,63,.22)}
  .features article:nth-child(2n){border-right:0}
  .features article:nth-last-child(-n+2){border-bottom:1px solid rgba(215,169,63,.22)}
  .features article:last-child{grid-column:1 / -1; border-bottom:0}
  .sneak{grid-template-columns:1fr}
  .preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preview{min-height:240px}
}
@media(max-width:850px){
  nav{display:none}
  .floating-card{display:none}
  .hero{padding-top:116px}
  .logo-stage{width:min(280px,70vw)}
  .eyebrow{font-size:12px; letter-spacing:3px}
  .subtext{font-size:16px}
  .notify-form{flex-direction:column}
  .notify-form input,.notify-form button{width:100%; text-align:center}
  .countdown strong{font-size:30px}
  .vip{display:block}
  .vip-actions{justify-content:flex-start; margin-top:20px}
  .vip-actions a{display:inline-flex}
  footer{align-items:flex-start; gap:18px}
  .footer-copy{text-align:right}
}
@media(max-width:620px){
  .topbar{padding-top:16px}
  .brand{gap:10px}
  .brand img{width:50px}
  .brand strong{letter-spacing:1.4px}
  .brand span{letter-spacing:1.5px}
  .hero{padding-top:100px; padding-bottom:46px}
  .logo-stage{width:min(300px,82vw)}
  .location-pill{margin-top:10px; font-size:11px; letter-spacing:2px}
  h1{font-size:clamp(40px,15vw,70px); letter-spacing:2px; line-height:.92}
  .subtext{line-height:1.55}
  .countdown{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:10px; margin-top:24px}
  .countdown div{padding:14px 8px}
  .features{grid-template-columns:1fr; border-radius:14px}
  .features article,.features article:nth-child(2n),.features article:nth-child(3n),.features article:nth-last-child(-n+2){
    grid-column:auto; border-right:0; border-bottom:1px solid rgba(215,169,63,.22);
  }
  .features article:last-child{border-bottom:0}
  .sneak-copy,.vip{padding:24px}
  .vip-actions{display:grid; grid-template-columns:1fr}
  .vip-actions a{justify-content:center; width:100%}
  .preview-grid{grid-template-columns:1fr}
  .preview{min-height:210px}
  footer{flex-direction:column; align-items:center; text-align:center}
  .footer-copy{text-align:center}
}
@media(max-width:390px){
  .hero{padding-left:14px; padding-right:14px}
  .brand strong{font-size:13px}
  .brand span{font-size:9px}
  .logo-stage{width:min(280px,84vw)}
  .eyebrow{letter-spacing:2px}
  .countdown strong{font-size:26px}
  .countdown span{font-size:10px; letter-spacing:1.4px}
  .notify-form input{padding:17px 14px}
  .notify-form button{padding:17px 18px}
}
