:root{
  --bg:#0b0b12; --ink:#f1f2ff; --muted:#9aa0b3;
  --stroke:rgba(255,255,255,.16); --glass:rgba(255,255,255,.06);
  --a1:#9d5cff; --a2:#5fb0ff; --a3:#ff5bc4;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:22px}

.nav{position:sticky;top:0;z-index:20;background:rgba(8,9,14,.6);backdrop-filter:blur(10px);border-bottom:1px solid var(--stroke)}
.navwrap{display:flex;align-items:center;gap:12px;padding:10px 16px;max-width:1200px;margin:0 auto}
.navbrand{font:800 14px Orbitron,Inter,sans-serif;letter-spacing:.12em}
.navlinks{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.navlinks a{padding:8px 12px;border:1px solid var(--stroke);border-radius:10px}
.navlinks a.active{border-color:rgba(255,255,255,.38)}

header.hero{position:relative;padding:120px 0 90px;border-bottom:1px solid var(--stroke);overflow:hidden}
.hero::before,.hero::after{
  content:"";position:absolute;inset:-25%;filter:blur(60px);mix-blend-mode:screen;opacity:.6;
  background:conic-gradient(from 180deg at 50% 50%,
    rgba(157,92,255,.28),rgba(95,176,255,.28),rgba(255,91,196,.28),rgba(157,92,255,.28));
  animation: swirl 28s linear infinite;
}
.hero::after{animation-duration:40s;animation-direction:reverse;opacity:.45}
@keyframes swirl{to{transform:rotate(360deg) scale(1.06)}}

.brand{
  font:800 clamp(34px,6vw,68px)/1.05 Orbitron,Inter,sans-serif; text-transform:uppercase; letter-spacing:.06em;
  background:linear-gradient(100deg,#f8f8ff 10%,#c9d4ff 35%,#a9a9b7 50%,#ffffff 70%,#8ea0ff 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 18px rgba(160,170,255,.25);
  margin:0 0 12px;
}
.tagline{max-width:860px;color:var(--muted);font-size:clamp(16px,2.2vw,20px);margin:0 0 24px}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{font-family:Orbitron,sans-serif;font-size:12px;padding:8px 10px;border:1px solid var(--stroke);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));color:#cfd4ff}

section{padding:74px 0;border-bottom:1px solid var(--stroke)}
h2{font:800 clamp(22px,3.2vw,28px) Orbitron,Inter,sans-serif;text-transform:uppercase;margin:0 0 14px}
p.lead{color:var(--muted);max-width:900px;margin:0 0 18px}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3, 1fr)}
@media(max-width:900px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.g2,.g3{grid-template-columns:1fr}}

.card{border:1px solid var(--stroke);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.pad{padding:16px}
.card img{display:block;width:100%}

.portalgrid{display:grid;gap:18px;grid-template-columns:repeat(2, minmax(0,1fr))}
@media(max-width:900px){.portalgrid{grid-template-columns:1fr}}
.portal{position:relative;min-height:280px;border:1px solid var(--stroke);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.portal .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;filter:contrast(1.06) saturate(1.08) brightness(.9)}
.portal .veil{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%, rgba(157,92,255,.18), rgba(0,0,0,.0) 60%), linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.0) 50%, rgba(0,0,0,.45))}
.portal .label{position:absolute;left:16px;bottom:16px;padding:10px 12px;border:1px solid var(--stroke);border-radius:12px;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);font-family:Orbitron,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.small{font-size:12px;color:#c8d0ff;letter-spacing:.15em}

.audio{display:flex;gap:16px;align-items:center;border:1px solid var(--stroke);border-radius:16px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
audio{width:100%}
blockquote{border-left:3px solid var(--a2);padding:8px 14px;background:rgba(255,255,255,.035);border-radius:6px;color:#dbe1ff}

.footer{padding:24px 0 70px;color:var(--muted);text-align:center}
.btn{display:inline-flex;gap:9px;align-items:center;padding:12px 16px;border:1px solid var(--stroke);border-radius:12px;background:var(--glass);font-weight:700}
.btn:hover{border-color:rgba(255,255,255,.35)}
.notice{color:#aeb5c9;font-size:14px}