*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
img { display: block; max-width: 100%; }
:root {
    --bg: #050810; --bg-card: #0b1120; --bg-glass: rgba(11,17,32,0.75);
    --accent: #7c3aed; --accent-2: #06b6d4; --accent-3: #f472b6;
    --green: #22c55e; --gold: #fbbf24;
    --text: #e2e8f0; --muted: #64748b;
    --border: rgba(124,58,237,0.22);
    --glow: 0 0 22px rgba(124,58,237,0.45);
    --glow-c: 0 0 22px rgba(6,182,212,0.35);
    --r: 14px;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; }
body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(124,58,237,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,.035) 1px, transparent 1px);
    background-size: 60px 60px;
}
.orb { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.orb-1 { width: 500px; height: 500px; top: -160px; left: -120px; background: rgba(124,58,237,.16); }
.orb-2 { width: 420px; height: 420px; bottom: 80px; right: -100px; background: rgba(6,182,212,.13); }
.orb-3 { width: 260px; height: 260px; top: 45%; left: 45%; background: rgba(244,114,182,.07); }
main { position: relative; z-index: 1; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem,5vw,3rem); }
.section-wrap { max-width: 1200px; margin: 0 auto; padding: clamp(3rem,7vw,5rem) clamp(1rem,5vw,3rem); }
/* Gradient text */
.gradient-text { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-3) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* Buttons */
.btn { padding: .45rem 1.1rem; border-radius: 8px; border: none; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #9d5cf6); color: #fff; box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 32px rgba(124,58,237,.65); }
/* Badges */
.sec-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-2); margin-bottom: .5rem; }
.sec-title { font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; letter-spacing: -.5px; }
.sec-sub { color: var(--muted); margin-top: .5rem; font-size: .95rem; }
.dot-pulse { display: inline-block; width: 6px; height: 6px; background: var(--accent-3); border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.3); color: #a78bfa; font-size: .72rem; font-weight: 700; letter-spacing: 1px; padding: .35rem .9rem; border-radius: 999px; text-transform: uppercase; margin-bottom: 1.2rem; }
.active-badge { display: inline-flex; align-items: center; gap: .45rem; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25); color: #4ade80; font-size: .75rem; font-weight: 700; letter-spacing: .5px; padding: .3rem .85rem; border-radius: 999px; text-transform: uppercase; }
/* Tags */
.v-tag { font-size: .62rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; }
.vt-green { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
.vt-blue { background: rgba(6,182,212,.15); color: var(--accent-2); border: 1px solid rgba(6,182,212,.25); }
.vt-purple { background: rgba(124,58,237,.15); color: #a78bfa; border: 1px solid rgba(124,58,237,.25); }
.vt-red { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.2); }
.vt-gold { background: rgba(251,191,36,.12); color: #fcd34d; border: 1px solid rgba(251,191,36,.2); }
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,.4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* Loading spinner */
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 3rem auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center { display: flex; justify-content: center; padding: 4rem; }