:root {
  --bg: hsl(4, 36%, 97%); --panel: hsl(4, 42%, 100%); --text: hsl(4, 24%, 13%);
  --muted: hsl(4, 12%, 42%); --line: hsl(4, 22%, 86%); --primary: hsl(4, 72%, 38%);
  --primary-soft: hsl(4, 70%, 94%); --accent: hsl(42, 72%, 44%); --accent-soft: hsl(42, 70%, 94%);
  --radius: 18px; --max-width: 1180px; --shadow: 0 12px 32px hsla(4, 30%, 20%, 0.10);
}
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); background: radial-gradient(circle at top left, var(--primary-soft), transparent 34rem), radial-gradient(circle at top right, var(--accent-soft), transparent 28rem), var(--bg); line-height:1.55; }
a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; }
header, main, footer { max-width: var(--max-width); margin: 0 auto; padding: 24px; }
.hero { margin:28px 0 24px; padding:34px; border:1px solid var(--line); border-radius:calc(var(--radius) + 10px); background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow:var(--shadow); }
.hero h1 { margin:0 0 10px; font-size:clamp(2rem, 6vw, 4rem); line-height:.95; letter-spacing:-.06em; }
.hero p { max-width:760px; color:var(--muted); font-size:1.08rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:18px; }
.card { padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:0 8px 20px hsla(0,0%,0%,.045); }
.card h2 { margin:10px 0; font-size:1.1rem; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:.82rem; font-weight:700; }
.score { color:var(--accent); font-weight:800; } .muted { color:var(--muted); }
.cta { margin:22px 0; padding:20px; border-radius:var(--radius); background:linear-gradient(135deg,var(--primary-soft),var(--accent-soft)); border:1px solid var(--line); }
.metric-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:16px 0; }
.metric { padding:14px; border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); }
footer { color:var(--muted); font-size:.9rem; }
@media (max-width:720px) { header,main,footer { padding:16px; } .hero { padding:22px; } }