:root{--bg:#0b1120;--fg:#e2e8f0;--muted:#94a3b8;--accent:#38bdf8;--card:#111827;--line:#1f2937}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6}
a{color:var(--accent);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.hero{padding:80px 24px;text-align:center;background:linear-gradient(180deg,#0ea5e9 0%,#0b1120 65%)}
.hero h1{font-size:46px;margin:0 0 12px}
.hero p{color:#e6f9ff;margin:0 auto 20px;max-width:820px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#0ea5e9;color:#001016;font-weight:700;margin-bottom:12px}
.btn{display:inline-block;background:#06b6d4;color:#001016;padding:14px 20px;border-radius:14px;font-weight:700;margin:8px}
.btn-ghost{background:transparent;border:1px solid #06b6d4;color:#06b6d4}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);padding:20px;border-radius:18px}
.h2{font-size:28px;margin:24px 0 8px}
ol,ul{padding-left:20px}
.footer{padding:32px;text-align:center;color:var(--muted)}
.small{color:var(--muted);font-size:14px}
.preview{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.preview .hooks{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.preview .shot{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
blockquote{border-left:4px solid #0ea5e9;margin:0;padding:10px 12px;background:#0c1a2b;border-radius:8px}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
@media (max-width:900px){.grid{grid-template-columns:1fr}.preview{grid-template-columns:1fr}}