:root{--bg:#0f1120;--card:#191c30;--acc:#6c5ce7;--txt:#e8e8f0;--mut:#9a9ab0}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--txt);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
header{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--card);position:sticky;top:0}
nav{margin-left:auto;display:flex;gap:18px}
nav a{color:var(--mut);text-decoration:none;font-size:14px}
nav a:hover{color:var(--txt)}
.hero{padding:48px 24px;text-align:center;background:linear-gradient(180deg,#1a1d33,transparent)}
.hero h1{font-size:30px;margin-bottom:8px}
.hero p{color:var(--mut);max-width:560px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:24px}
.card{background:var(--card);border-radius:10px;overflow:hidden;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.card .t{padding:10px 12px;font-size:14px}
.card .m{padding:0 12px 12px;color:var(--mut);font-size:12px}
footer{padding:24px;color:var(--mut);font-size:12px;text-align:center;border-top:1px solid #23263c;margin-top:24px}
.badge{display:inline-block;background:#232750;color:#b0a8ff;font-size:11px;padding:2px 8px;border-radius:10px;margin-top:10px}
.page{max-width:680px;margin:0 auto;padding:32px 24px}
.page h2{font-size:20px;margin:20px 0 6px}
.page h3{font-size:15px;margin:14px 0 4px}
.page p{color:var(--mut);font-size:14px;margin:6px 0}