*{box-sizing:border-box}
:root{
  --bg:#06090e;
  --bg2:#0a0f14;
  --glass:rgba(12,21,30,.45);
  --emerald:#18c37e;
  --gold:#d4b15a;
  --blue:#6ec2ff;
  --text:#e5eefc;
  --muted:#b3c1d6;
}
html,body{height:100%;}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Arial,Helvetica,sans-serif;
  color:var(--text); background:radial-gradient(1200px 600px at 70% -10%, #0d1a2b 0%, #070b11 60%, #05070b 100%);
  overflow-x:hidden;
}
canvas#stars, canvas#nebula{
  position:fixed; inset:0; width:100%; height:100%; display:block; z-index:-2;
}
canvas#nebula{ z-index:-1; mix-blend-mode:screen; opacity:.5; }
.nav{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:linear-gradient(to bottom, rgba(5,9,14,.75), rgba(5,9,14,.35)); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav .nav-left{display:flex; align-items:center; gap:12px}
.mini-logo{ width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.5px; background:linear-gradient(145deg,#0e2135,#0b2841); border:1px solid rgba(255,255,255,.06)}
.brand{opacity:.9; font-weight:600}
.nav-links a{color:var(--muted); text-decoration:none; margin-left:20px}
.nav .btn{padding:8px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.14)}
.btn{cursor:pointer; text-decoration:none; color:var(--text)}
.btn.primary{background:linear-gradient(135deg,var(--emerald),#0ea469); border:0; padding:14px 18px; border-radius:16px; font-weight:700}
.btn.ghost{border:1px solid rgba(255,255,255,.18); padding:14px 18px; border-radius:16px; font-weight:700; margin-left:10px}

.hero{display:grid; place-items:center; padding:90px 24px 60px; text-align:center}
.logo-wrap{ position:relative; width:min(54vw,460px); aspect-ratio:1/1; margin-bottom:24px; perspective:1200px; }
.crest{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 0 22px rgba(24,195,126,.45)) drop-shadow(0 0 44px rgba(212,177,90,.25)); transform-style:preserve-3d; }
.glow{ animation:glowPulse 3.6s ease-in-out infinite; }
@keyframes glowPulse{ 0%{filter: drop-shadow(0 0 8px rgba(24,195,126,.35)) drop-shadow(0 0 18px rgba(212,177,90,.18));}
 50%{filter: drop-shadow(0 0 20px rgba(24,195,126,.75)) drop-shadow(0 0 50px rgba(108,194,255,.35));}
 100%{filter: drop-shadow(0 0 8px rgba(24,195,126,.35)) drop-shadow(0 0 18px rgba(212,177,90,.18));}}

.logo-wrap:hover .crest{ filter: drop-shadow(0 0 28px rgba(24,195,126,.85)) drop-shadow(0 0 60px rgba(110,194,255,.45)); }

/* Orbit ring */
.orbit{
  position:absolute; inset:0; border-radius:50%;
  border:1px dashed rgba(110,194,255,.35);
  animation:orbitSpin 5s linear infinite;
  box-shadow: 0 0 100px rgba(110,194,255,.12) inset;
}
@keyframes orbitSpin{ to{ transform:rotate(360deg) } }

.headline h1{ margin:10px 0; font-size: clamp(32px, 5vw, 62px); letter-spacing:.3px }
.reveal{ position:relative; display:inline-block; padding:4px 10px; background:linear-gradient(90deg,rgba(14,164,105,.15), rgba(212,177,90,.10)); border-radius:14px; overflow:hidden }
.reveal::after{
  content:""; position:absolute; inset:0;
  transform:translateX(-102%);
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  animation: sweep 2.6s ease forwards; animation-delay:.1s;
}
.delay-1::after{ animation-delay:.8s }
.delay-2::after{ animation-delay:1.6s }
@keyframes sweep{ to{ transform:translateX(102%) } }

.cta{ margin-top:18px }

/* Ticker */
.ticker{ position:relative; margin:50px auto 10px; max-width:980px; border:1px solid rgba(255,255,255,.06); border-radius:16px; overflow:hidden; background:rgba(5,10,16,.45); backdrop-filter: blur(8px);}
.ticker-inner{ display:flex; gap:24px; padding:14px 20px; white-space:nowrap; animation:ticker 28s linear infinite; }
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)}}
.pair{ display:flex; gap:12px; align-items:baseline; font-weight:600 }
.pair .val{ font-variant-numeric: tabular-nums }
.chg{ font-weight:700; font-size:.9rem; opacity:.9 }
.chg.pos{ color:var(--emerald) }
.chg.neg{ color:#ff6b6b }

.footer{ display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:28px 22px; color:var(--muted); border-top:1px solid rgba(255,255,255,.06); margin-top:70px; background:linear-gradient(to top, rgba(5,9,14,.65), rgba(5,9,14,.25));}
.motto .m-blue{ color:var(--blue) } .motto .m-green{ color:var(--emerald) } .motto .m-red{ color:#ff6b6b }

/* 4D-like rotation — multi-axis oscillation */
@keyframes rotate4d{
  0%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) }
  25%{ transform: rotateX(14deg) rotateY(-22deg) rotateZ(3deg) }
  50%{ transform: rotateX(-12deg) rotateY(18deg) rotateZ(-2deg) }
  75%{ transform: rotateX(10deg) rotateY(25deg) rotateZ(6deg) }
  100%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) }
}
.crest{ animation: rotate4d 9s ease-in-out infinite; }