*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1e293b;background:#f8fafc;line-height:1.6}.header{background:var(--brand-color, #0f172a);color:#fff;padding:0 1.5rem;height:3.5rem;display:flex;align-items:center}.header-inner{display:flex;align-items:center;gap:.75rem;max-width:64rem;width:100%;margin:0 auto}.logo{width:2rem;height:2rem;border-radius:.375rem;background:#fff3;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}.header-title{font-weight:600;font-size:1.1rem}.hero{max-width:42rem;margin:4rem auto;text-align:center;padding:0 1.5rem}.hero h1{font-size:2.5rem;color:var(--brand-color, #0f172a);margin-bottom:1rem}.hero-description{font-size:1.125rem;color:#475569;margin-bottom:2rem}.hero-description code{background:#e2e8f0;padding:.125rem .375rem;border-radius:.25rem;font-size:.9em}.cta{background:var(--brand-color, #0f172a);color:#fff;border:none;padding:.75rem 2rem;font-size:1rem;font-weight:600;border-radius:.5rem;cursor:pointer;transition:opacity .15s}.cta:hover{opacity:.9}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.5rem;max-width:64rem;margin:0 auto 4rem;padding:0 1.5rem}.card{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:1.5rem}.card h2{font-size:1.15rem;color:var(--brand-color, #0f172a);margin-bottom:.5rem}.card p{color:#64748b;font-size:.95rem}.card code{background:#f1f5f9;padding:.1rem .3rem;border-radius:.2rem;font-size:.85em}.footer{text-align:center;padding:2rem 1.5rem;color:#94a3b8;font-size:.875rem;border-top:1px solid #e2e8f0}