:root {
    --bg-1: #07030b;
    --bg-2: #1a0f2e;
    --accent-1: #ff00ff;
    --accent-2: #00ffff;
    --glass: rgba(255,255,255,0.06);
    --muted: rgba(255,255,255,0.7);
    --radius: 12px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(10,6,16,0.6), rgba(10,6,16,0.25));
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
}
.brand .logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, var(--accent-1), var(--accent-2));
    box-shadow: 0 6px 30px rgba(0,0,0,0.6), 0 0 40px rgba(255,0,255,0.08);
}
.brand h1 { margin:0; font-size:1.1rem; letter-spacing:1px; }

.nav-links { display:flex; gap:14px; align-items:center; }
.nav-links a { color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:600; }
.nav-links a:hover { color: white; background: rgba(255,255,255,0.03); }

.mobile-toggle { display:none; background:transparent; border:0; color:var(--muted); font-size:1.2rem; }

.hero {
    padding: 64px 20px;
    text-align: center;
}
.hero-inner { max-width:1000px; margin:0 auto; }
.hero .token-image { width:220px; height:220px; border-radius:50%; display:inline-block; }
.hero h2 { font-size:3.2rem; margin:18px 0 8px; background: linear-gradient(45deg,var(--accent-1),var(--accent-2)); -webkit-background-clip: text; background-clip: text; color:transparent; }
.hero p.lead { color:var(--muted); font-size:1.05rem; }

.panels { display:flex; gap:18px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.panel { background:var(--glass); padding:18px 22px; border-radius:var(--radius); min-width:180px; border:1px solid rgba(255,255,255,0.04); }

.main { max-width:1100px; margin:40px auto; padding:0 18px; }

.sections { display:grid; grid-template-columns: 1fr 320px; gap:28px; align-items:start; }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:20px; border-radius:12px; border:1px solid rgba(255,255,255,0.04); }

.footer { margin-top:60px; padding:28px 18px; text-align:center; color:var(--muted); border-top:1px solid rgba(255,255,255,0.03); }

/* Utilities */
.muted { color: var(--muted); }
.btn { display:inline-flex; gap:10px; align-items:center; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); color:white; text-decoration:none; }

@media (max-width: 880px) {
    .sections { grid-template-columns: 1fr; }
    .nav-links { display:none; }
    .mobile-toggle { display:block; }
}

.mobile-nav { display:none; padding:12px 18px; background: linear-gradient(180deg, rgba(10,6,16,0.6), rgba(10,6,16,0.9)); }
.mobile-nav a { display:block; padding:10px 6px; color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.02); }
.mobile-nav a:hover { color:white; }

.glow-blob { position:absolute; width:220px; height:220px; border-radius:50%; filter: blur(60px); opacity:0.22; z-index:1; }
.blob-1 { background: radial-gradient(circle, var(--accent-1), transparent 60%); top:10%; left:6%; }
.blob-2 { background: radial-gradient(circle, var(--accent-2), transparent 60%); bottom:6%; right:10%; }

.presentation-list { display:flex; flex-direction:column; gap:12px; }

/* small print */
.kicker { font-size:0.9rem; color:var(--muted); }