:root{--bg:#160d2b;--panel:#21143f;--line:#3a2a66;--txt:#f6f0ff;--mute:#b9aadb;--pink:#ff5ca8;--violet:#8a5cff;--cyan:#22c8ff;--sun:#ffd84a}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.6}
a{color:var(--cyan)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:rgba(22,13,43,.94);border-bottom:2px solid var(--line);position:sticky;top:0;z-index:5}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.35rem;color:#fff;text-decoration:none}.logo img{width:42px;height:42px}
.nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}.nav ul a{color:var(--mute);text-decoration:none;font-weight:800}
.hero{text-align:center;padding:50px 20px 56px;background:radial-gradient(900px 400px at 50% 0,#4b2a8f 0,#22144a 55%,var(--bg) 100%)}
.tiles{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.tiles span{width:58px;height:58px;display:grid;place-items:center;font-size:30px;border-radius:16px;background:linear-gradient(135deg,var(--pink),var(--violet));box-shadow:0 6px 0 #0d0620;animation:hop 2.4s ease-in-out infinite}
.tiles span:nth-child(2n){background:linear-gradient(135deg,var(--violet),var(--cyan));animation-delay:.3s}.tiles span:nth-child(3n){animation-delay:.6s}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.tiles span{animation:none}}
.hero h1{font-size:clamp(2rem,6vw,3.4rem);margin:22px 0 10px;line-height:1.1;font-weight:900}.hero h1 span{background:linear-gradient(90deg,var(--pink),var(--sun),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mute);max-width:660px;margin:0 auto;font-size:1.1rem}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}.badge{background:var(--panel);border:2px solid var(--line);border-radius:999px;padding:6px 16px;font-weight:800}
.section{max-width:1100px;margin:0 auto;padding:40px 20px}.section h2{font-size:1.9rem;margin:0 0 8px}
.prose{max-width:820px;margin:0 auto;padding:30px 20px 60px}.prose h1{font-size:2.2rem}.prose h2{margin-top:28px}.meta{color:var(--mute)}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:24px 20px;border-top:2px solid var(--line);color:var(--mute)}footer ul{list-style:none;display:flex;gap:16px;margin:0;padding:0}
@media (max-width:600px){.nav ul{gap:12px}.logo{font-size:1.1rem}}