:root{
  --bg:#06070f; --panel:rgba(18,21,40,.55); --border:rgba(122,92,255,.22);
  --cyan:#00f0ff; --magenta:#ff2fd0; --violet:#7a5cff; --lime:#39ff88;
  --text:#e9ecff; --dim:#9aa2c8; --faint:#5b628c;
  --display:'Orbitron', ui-sans-serif, system-ui, sans-serif;
  --body:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:
    radial-gradient(1100px 600px at 15% -10%, rgba(0,240,255,.10), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(255,47,208,.10), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(122,92,255,.12), transparent 60%),
    var(--bg);
  color:var(--text); font-family:var(--body); line-height:1.62;
  -webkit-font-smoothing:antialiased; padding:0 20px; min-height:100vh;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:44px 0 72px}

/* Masthead */
.mast{text-align:center; padding:14px 0 4px}
.eyebrow{font-family:var(--display); font-weight:700; letter-spacing:.5em; font-size:11px; color:var(--violet); margin:0 0 12px; text-indent:.5em}
.wordmark{font-family:var(--display); font-weight:900; font-size:clamp(26px,6.4vw,40px); letter-spacing:2px; margin:0; text-wrap:balance; line-height:1.08; text-decoration:none; display:inline-block}
.wordmark .x{color:var(--cyan); text-shadow:0 0 22px rgba(0,240,255,.55)}
.wordmark .o{color:var(--magenta); text-shadow:0 0 22px rgba(255,47,208,.55)}
.wordmark .d{color:var(--faint)}

/* Nav */
nav{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:26px 0 4px}
nav a{
  font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.12em;
  color:var(--dim); text-decoration:none; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); background:rgba(122,92,255,.06); transition:.18s;
}
nav a:hover,nav a:focus-visible{color:var(--text); border-color:var(--violet); box-shadow:0 0 18px rgba(122,92,255,.35); outline:none}
nav a[aria-current="page"]{color:#fff; border-color:var(--violet); background:rgba(122,92,255,.18); box-shadow:0 0 16px rgba(122,92,255,.3)}

/* Page head */
.pagehead{text-align:center; margin:32px 0 4px}
.pagehead h1{font-family:var(--display); font-weight:800; font-size:clamp(22px,5vw,30px); letter-spacing:.03em; margin:0; text-wrap:balance}
.pagehead .updated{color:var(--faint); font-size:12.5px; margin:10px 0 0; font-variant-numeric:tabular-nums}

/* Card / content */
.card{
  margin-top:24px; padding:30px 28px; border-radius:20px;
  border:1px solid var(--border); background:var(--panel); backdrop-filter:blur(6px);
}
.lead{font-size:16.5px; color:#e4e8ff; margin:0 0 4px}
.card p{color:#d6daf4; margin:14px 0}
h2{font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:.04em; margin:24px 0 6px; color:var(--text)}
ul{margin:12px 0; padding-left:0; list-style:none}
li{position:relative; padding-left:22px; margin:9px 0; color:#cfd4f2}
li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--violet); box-shadow:0 0 8px var(--violet)}
strong{color:#fff}
a.mail{color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(0,240,255,.4)}
a.mail:hover{text-shadow:0 0 12px rgba(0,240,255,.5)}

/* Hub cards */
.hub{display:grid; gap:14px; margin-top:28px}
.hub a{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  padding:20px 22px; border-radius:18px; border:1px solid var(--border);
  background:var(--panel); transition:.18s;
}
.hub a:hover{border-color:var(--accent,var(--violet)); box-shadow:0 0 22px rgba(122,92,255,.28); transform:translateY(-1px)}
.hub .ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; border:1px solid; flex:none}
.hub .t{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.04em; color:var(--text)}
.hub .s{color:var(--dim); font-size:12.5px; margin-top:2px}
.hub .arr{margin-left:auto; color:var(--dim); font-size:20px}

footer{margin-top:38px; text-align:center; color:var(--faint); font-size:12.5px; line-height:1.9}
footer .brand{font-family:var(--display); font-weight:700; letter-spacing:.14em; color:var(--dim); font-size:11.5px}