:root{--bg:#f6f8fb;--card:#ffffff;--ink:#17374a;--accent:#087e8b;--muted:#5b7183}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink)}
.container{max-width:960px;margin:0 auto;padding:0 1.25rem}
header{background:linear-gradient(135deg,#087e8b,#0b3954);color:#fff;padding:2.5rem 0 2rem}
header h1{margin:.25rem 0;font-size:2.2rem}
header .lead{opacity:.92;max-width:46rem}
.badge{display:inline-block;background:rgba(255,255,255,.15);padding:.2rem .7rem;border-radius:999px;font-size:.85rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:2rem 0}
.card{display:block;background:var(--card);border-radius:12px;padding:1.25rem;text-decoration:none;color:var(--ink);box-shadow:0 1px 4px rgba(23,55,74,.08);transition:transform .12s ease,box-shadow .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(23,55,74,.14)}
.card h2{margin:.2rem 0 .5rem;font-size:1.15rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.steps{background:var(--card);border-radius:12px;padding:1.25rem 1.5rem;box-shadow:0 1px 4px rgba(23,55,74,.08)}
.steps ol{padding-left:1.2rem;line-height:1.7}
.meta{margin:1.5rem 0;color:var(--muted);font-size:.9rem}
footer{padding:1.5rem 0;color:var(--muted);font-size:.85rem;text-align:center}
code{background:#eef3f8;border-radius:4px;padding:.05rem .35rem;font-size:.9em}