:root{--accent:#ffcc00;--accent-hover:#ffd633;--text:#111;--muted:#5b6471;--bg-soft:#f7f8fa;--card:#fff;--shadow:0 8px 28px rgba(0,0,0,.06)}
*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Roboto,Arial,sans-serif;background:var(--bg-soft);color:var(--text);line-height:1.6}
a{color:#111;text-decoration:none}.container{max-width:1200px;margin:0 auto;padding:0 16px}
nav{background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #eee}
nav .bar{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px}
.brand b{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--accent);border-radius:8px}
nav .links{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
nav .links a{color:#222;font-weight:600;position:relative;padding:8px 4px;letter-spacing:.1px}
nav .links a:hover::after,nav .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:#000}
nav .toggle{display:none;background:none;border:1px solid #ddd;border-radius:8px;padding:6px 10px;font-weight:700}
@media(max-width:980px){nav .links{display:none}nav .toggle{display:block}nav.open .links{display:flex;position:absolute;left:0;right:0;top:60px;background:#fff;border-bottom:1px solid #eee;gap:0;flex-direction:column}nav.open .links a{padding:14px 20px;border-top:1px solid #f2f2f2}}
header.hero{text-align:center;background:#fff;padding:68px 20px}
h1{font-size:40px;margin:0 0 10px}.subtitle{color:var(--muted);max-width:820px;margin:0 auto}
.btn{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:700;text-decoration:none;transition:.25s}
.btn-primary{background:var(--accent);color:#000;box-shadow:var(--shadow)}.btn-primary:hover{background:var(--accent-hover)}
section{padding:54px 0}h2{text-align:center;font-size:28px;margin:0 0 16px}
.lead{text-align:center;color:var(--muted);max-width:880px;margin:0 auto 30px}
.grid{display:grid;gap:24px;max-width:1100px;margin:0 auto;padding:0 16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card);border-radius:18px;padding:24px;text-align:center;box-shadow:var(--shadow)}
.table{width:100%;border-collapse:collapse}.table th,.table td{border:1px solid #eceff4;padding:10px;text-align:left}
footer{background:#fff;padding:30px 10px;text-align:center;color:#555;font-size:14px;border-top:1px solid #eee}
pre,code{background:#fff7cc;padding:6px 8px;border-radius:8px}pre{overflow:auto;white-space:pre}
.small{font-size:13px;color:#6c7481}