:root{
  --bg-1: #06060a;
  --bg-2: #0a0520;
  --accent-1: #ff9b2f;
  --accent-2: #7a00ff;
  --accent-3: #3b6bff;
  --muted: #bfc4d6;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 20%, rgba(122,0,255,0.12), transparent),
              radial-gradient(800px 400px at 90% 80%, rgba(59,107,255,0.08), transparent),
              linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color:#fff;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* layout */
.container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:48px 24px;
  display:flex;
  gap:40px;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}

.header-left{display:flex;align-items:center;gap:18px}
.logo{width:72px;height:72px;object-fit:contain;border-radius:12px;box-shadow:0 6px 30px rgba(122,0,255,0.12);background:linear-gradient(90deg, rgba(255,155,47,0.06), rgba(122,0,255,0.04));padding:6px}
.brand h1{font-family:Orbitron, sans-serif;margin:0;font-size:20px;letter-spacing:2px;color:#fff}
.brand p{margin:2px 0 0;color:var(--muted);font-size:13px}

/* hero */
.hero{
  display:flex;
  gap:40px;
  align-items:center;
  width:100%;
  padding:40px 24px;
  margin-top:20px;
}

.hero-left{flex:1;min-width:280px}
.hero-right{flex:0 0 420px;display:flex;justify-content:center;align-items:center}

.h-title{font-family:Orbitron, sans-serif;font-size:38px;line-height:1.02;margin-bottom:12px}
.h-lead{color:var(--muted);max-width:540px;margin-bottom:20px;font-size:16px}

.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:700;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#06060a;box-shadow:0 6px 24px rgba(122,0,255,0.12);
}
.btn-outline{background:transparent;color:var(--accent-3);border:1px solid rgba(59,107,255,0.14)}

/* info cards */
.cards{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px 14px;border-radius:12px;min-width:180px;border:1px solid rgba(255,255,255,0.03)}

.small{font-size:13px;color:var(--muted)}

/* tokenomics and roadmap */
.section{padding:48px 24px;margin-top:24px;background:transparent}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.panel{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:22px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}

/* footer */
.site-footer{padding:24px;text-align:center;color:rgba(255,255,255,0.45);font-size:13px;margin-top:36px}

/* responsive */
@media(max-width:900px){
  .container{padding:24px}
  .hero{flex-direction:column-reverse}
  .hero-right{width:100%}
  .grid-two{grid-template-columns:1fr}
  .logo{width:56px;height:56px}
  .h-title{font-size:28px}
}