:root {
  --sf-red: #C81D2B;
  --sf-black: #111;
  --sf-gray: #f5f5f5;
}
body { margin:0; font-family: Arial, Helvetica, sans-serif; color:#111; background:#fff; }
header { padding:24px 48px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eee; }
.logo { height:68px; }
.hero { padding:80px 48px; background:#111; color:#fff; }
.hero h1 { font-size:64px; margin:0 0 12px; }
.hero p { font-size:24px; max-width:840px; }
.btn { display:inline-block; background:var(--sf-red); color:#fff; padding:14px 22px; border-radius:8px; text-decoration:none; font-weight:bold; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:48px; }
.card { border:1px solid #ddd; padding:24px; border-radius:14px; }
.section { padding:48px; }
footer { background:#111; color:#fff; padding:32px 48px; }
@media(max-width:900px) { .grid { grid-template-columns:1fr; } .hero h1 { font-size:42px; } }