:root{--bg:#101526;--bg2:#302345;--card:#182038e6;--gold:#D8B66E;--violet:#7a68b8;--blue:#82A9CE;--text:#eef0ff;--muted:#a7add6;--line:#ffffff1f;--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1000px 600px at 80% -10%,#30234588,transparent 60%),radial-gradient(800px 500px at 10% 0%,#82A9CE22,transparent 55%),var(--bg);color:var(--text);font-family:Vazirmatn,Tahoma,"Segoe UI",system-ui,sans-serif;line-height:1.9;min-height:100vh}
canvas#stars{position:fixed;inset:0;z-index:-1;opacity:.7}
a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}
.skip{position:absolute;left:-9999px;background:var(--gold);color:#000;padding:.5rem 1rem;z-index:99}.skip:focus{left:1rem;top:1rem}
header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:#101526d9;border-bottom:1px solid var(--line)}
.wrap{max-width:1150px;margin:auto;padding:0 1.1rem}
.nav{display:flex;align-items:center;gap:.8rem;min-height:64px}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--text);font-size:1.15rem}
.logo svg{flex:none}
nav.links{display:flex;gap:.2rem;margin-inline-start:auto;flex-wrap:wrap}
nav.links a{color:var(--muted);padding:.45rem .6rem;border-radius:10px;font-size:.92rem}
nav.links a:hover,nav.links a.active{color:var(--gold);background:#ffffff10;text-decoration:none}
.btn{border:1px solid var(--line);background:#ffffff10;color:var(--text);padding:.45rem .9rem;border-radius:999px;cursor:pointer;font:inherit;font-size:.9rem}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.gold{background:linear-gradient(135deg,var(--gold),#f2d57e);color:#241a00;font-weight:700;border:none}
.burger{display:none}
.hero{text-align:center;padding:4.5rem 0 3rem}
.kicker{color:var(--gold);letter-spacing:.15em;font-size:.85rem}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.35;margin:.6rem 0;background:linear-gradient(90deg,#fff,var(--gold),#b79cff);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.6rem;margin:2.2rem 0 1rem}h3{margin:.4rem 0}
.lead{color:var(--muted);max-width:720px;margin:0 auto 1.6rem;font-size:1.08rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-4px);border-color:#D8B66E66}
.badge{display:inline-block;font-size:.72rem;padding:.15rem .6rem;border-radius:999px;border:1px solid #D8B66E66;color:var(--gold);margin-inline-end:.4rem}
.badge.type{border-color:#7c5cff88;color:#c4b5fd}
.muted{color:var(--muted)} .small{font-size:.85rem}
.controls{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
input,select{background:#141c33;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:.6rem .9rem;font:inherit;flex:1;min-width:180px}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
article.body{max-width:780px;margin:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
article.body p{color:#dfe3ff}
footer.site{border-top:1px solid var(--line);margin-top:4rem;padding:2rem 0;color:var(--muted);font-size:.9rem}
.geometry{display:block;margin:0 auto;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media(max-width:820px){
  .burger{display:block;margin-inline-start:auto}
  nav.links{display:none;flex-direction:column;width:100%;padding:.6rem 0}
  nav.links.open{display:flex}.nav{flex-wrap:wrap;padding:.5rem 0}
}