/* THEME */
:root{
  --bg:#0B0D19; --bg2:#0F1224; --fg:#E8EAF1; --muted:#B7BBCB;
  --accent:#C9CBD3; --card:#121528; --ring:rgba(255,255,255,.18);
  --shadow:rgba(0,0,0,.55); --radius:24px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:"Extenda 30 Deca", -apple-system, Segoe UI, Roboto, "Inter", Arial, sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 80% -20%, #171B34 0%, transparent 60%),
    radial-gradient(800px 600px at -10% 110%, #10152B 0%, transparent 60%),
    var(--bg);
  line-height:1.6;
}

/* LAYOUT */
.wrap{ min-height:100dvh; display:grid; place-items:center; padding:36px 16px; position:relative; z-index:1 }
.card{
  width:100%; max-width:760px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), var(--card);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  box-shadow: 0 26px 80px var(--shadow), inset 0 0 0 1px rgba(255,255,255,.02);
  padding:28px 28px 20px; position:relative; overflow:hidden; isolation:isolate;
}
.card::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(700px 240px at 20% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(460px 220px at 110% 110%, rgba(255,255,255,.08), transparent 60%);
  mix-blend-mode: screen; opacity:.7; z-index:0;
}

header.hero{ display:flex; align-items:center; gap:20px; margin-bottom:8px }
.logo{ width:74px; height:74px; border-radius:16px; flex:0 0 auto; background:#1A1E33; display:grid; place-items:center; border:1px solid rgba(255,255,255,.1); overflow:hidden; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
.logo img{ width:100%; height:100%; object-fit:cover; display:block }
.brand{ display:flex; flex-direction:column; gap:6px }
.title{ margin:0; font-weight:900; letter-spacing:1px; text-transform:uppercase; font-size: clamp(34px, 6vw, 56px); color:var(--accent); }
.tag{ margin:0; color:var(--muted); font-size:clamp(13px, 2.4vw, 16px) }

.coming{ text-align:left; margin:8px 0 14px }
.coming h2{
  margin:0 0 4px; font-size: clamp(26px, 4.6vw, 36px);
  background: linear-gradient(90deg, #FFFFFF, #BFC4D4 50%, #FFFFFF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shine 3s linear infinite;
}
@keyframes shine{ 0%{ background-position: 0% 50% } 100%{ background-position: 200% 50% } }
.coming p{ margin:0; color:var(--muted) }

/* INFO rows */
.info{ display:grid; gap:10px; margin:12px 0 18px }
.row{
  display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.08);
}
.value{ font-weight:600 }
.link{ color:var(--fg); text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.25) }
.link:hover{ border-bottom-color:transparent }
.ico{ width:20px; height:20px; margin-right:10px; color:var(--muted); flex:0 0 20px }
.row:hover .ico{ color:var(--fg) }

/* CTA buttons */
.cta{ display:flex; gap:10px; flex-wrap:wrap }
.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none; color:var(--bg);
  background: var(--fg); padding:10px 16px; border-radius:14px; font-weight:700;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}
.btn:hover{ outline:1px solid var(--ring) }
.btn.ghost{ background: transparent; color:var(--fg); border:1px solid rgba(255,255,255,.15) }

.foot{ margin-top:18px; color:var(--muted); font-size:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.dot{ opacity:.6 }

/* reveal only when JS is present */
.js [data-animate]{ opacity:0; transform: translateY(16px) scale(.98) }
.in{ opacity:1 !important; transform: translateY(0) scale(1) !important; transition: opacity .6s ease, transform .6s ease }

/* responsive */
@media (max-width:420px){ .logo{ width:64px; height:64px } }
.title{
    font-size: clamp(14px, 6vw, 56px);
}
/* ====== AURORA background — sweep left↔right ====== */
.bg-aurora{
  position: fixed; left:50%; top:50%; width:200vmax; height:200vmax; transform:translate(-50%, -50%);
  pointer-events:none; z-index:0;
  background:
    radial-gradient(30% 40% at 15% 20%, rgba(46, 98, 255, .28) 0%, transparent 60%),
    radial-gradient(35% 45% at 85% 30%, rgba(0, 180, 255, .22) 0%, transparent 60%),
    radial-gradient(30% 45% at 55% 80%, rgba(18, 110, 255, .22) 0%, transparent 62%),
    linear-gradient(120deg, #0B0D19, #0F1224 50%, #0B0D19);
  background-size: 200% 140%, 200% 140%, 200% 140%, 400% 400%;
  background-blend-mode: screen, screen, screen, normal;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(90% 90% at 50% 50%, #000 70%, transparent 100%);
  opacity:.85; filter: blur(52px) saturate(145%) contrast(105%);
  will-change: background-position, filter;
}
.bg-aurora.lr{ animation: aurora-sweep-lr 14s ease-in-out infinite alternate, aurora-shift 24s ease-in-out infinite; }
.bg-aurora.rl{ animation: aurora-sweep-rl 14s ease-in-out infinite alternate, aurora-shift 24s ease-in-out infinite; }

@keyframes aurora-sweep-lr{
  0%{   background-position: -50% 20%, -50% 30%, -50% 80%,   0% 50%; }
  100%{ background-position: 150% 20%, 150% 30%, 150% 80%, 100% 50%; }
}
@keyframes aurora-sweep-rl{
  0%{   background-position: 150% 20%, 150% 30%, 150% 80%, 100% 50%; }
  100%{ background-position: -50% 20%, -50% 30%, -50% 80%,   0% 50%; }
}
@keyframes aurora-shift{
  0%{ filter: blur(52px) saturate(145%) contrast(105%); }
  50%{ filter: blur(64px) saturate(165%) contrast(108%); }
  100%{ filter: blur(52px) saturate(145%) contrast(105%); }
}
@media (prefers-reduced-motion: reduce){ .bg-aurora{ animation:none } }