/* same styles */
:root{
  --bg:#0b0b12; --card:#121224; --text:#f4f4ff; --muted:#b9b9d6;
  --accent:#6be7ff; --border:rgba(255,255,255,.10); --shadow:0 18px 60px rgba(0,0,0,.55);
  --radius:18px; --max:1040px;
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--text);line-height:1.6;
background:
radial-gradient(1200px 800px at 20% -10%, rgba(255,210,122,.18), transparent 60%),
radial-gradient(900px 700px at 90% 0%, rgba(107,231,255,.16), transparent 55%),
radial-gradient(1100px 900px at 50% 110%, rgba(183,140,255,.14), transparent 60%),
var(--bg);}
a{color:var(--accent);text-decoration:none}
header{position:sticky;top:0;background:rgba(11,11,18,.72);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{max-width:1040px;margin:auto;padding:14px 18px;display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:800}
.nav-links a{margin-left:14px;color:var(--text)}
main{max-width:1040px;margin:auto;padding:28px 18px 60px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;padding:22px;border:1px solid var(--border);border-radius:18px}
.hero-media img{width:100%;border-radius:22px}
.card{margin-top:18px;padding:18px;border:1px solid var(--border);border-radius:18px;background:rgba(18,18,36,.6)}
footer{max-width:1040px;margin:auto;padding:18px;color:rgba(244,244,255,.7);border-top:1px solid var(--border)}
.small{font-size:13px}
@media(max-width:860px){.hero{grid-template-columns:1fr}}