:root{--bg:#07071a;--ink:#f3f0ff;--mute:#b9b3d9;--v:#b04dff;--a:#2ce6d6;--g:#ffc94d}
*{box-sizing:border-box}html,body{margin:0}
body{background:radial-gradient(1200px 700px at 15% 0%,#3a1680 0,transparent 60%),radial-gradient(900px 600px at 100% 60%,#06485a 0,transparent 60%),radial-gradient(800px 600px at 0% 100%,#5a0f4a 0,transparent 60%),var(--bg);color:var(--ink);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;min-height:100vh}
a{color:var(--a)}
.wrap{max-width:860px;margin:0 auto;padding:40px 16px 80px}
.hero{text-align:center;padding-top:30px}
.icon{width:132px;height:132px;border-radius:30px;box-shadow:0 0 60px rgba(176,77,255,.6);animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(2deg)}}
h1{font-size:clamp(44px,9vw,76px);margin:18px 0 6px;letter-spacing:-1px;background:linear-gradient(90deg,#fff,#d6a8ff,#7ff3ea,#fff);background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:300%}}
.tag{color:var(--mute);font-size:20px;margin:0 0 26px}
.btn{display:inline-block;padding:15px 28px;border-radius:40px;background:linear-gradient(90deg,var(--v),#4d7bff);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 0 30px rgba(176,77,255,.55)}
.gems{width:100%;border-radius:24px;margin:40px 0;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.13);border-radius:22px;padding:20px;backdrop-filter:blur(12px)}
.card b{display:block;font-size:19px;margin-bottom:4px}
.doc h1{font-size:40px;text-align:left}.doc h2{margin-top:34px;font-size:22px;color:#e6d4ff}
.doc p,.doc li{color:#dcd7f2}
footer{margin-top:50px;text-align:center;color:var(--mute);font-size:14px}
footer a{margin:0 8px}