:root { --max: 980px; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, Arial; line-height:1.5; color:#111; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

.header { border-bottom: 1px solid #eee; background: white; position: sticky; top: 0; }
.header .container { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; }
.brand { font-weight: 800; letter-spacing: .2px; }
.nav a { margin-left: 14px; opacity: .85; }
.nav a:hover { opacity: 1; }
.nav .cta { padding: 8px 12px; border: 1px solid #ddd; border-radius: 10px; }

.hero { padding: 44px 0 22px; }
.hero h1 { font-size: 44px; margin: 0 0 10px; }
.hero p { font-size: 18px; max-width: 680px; opacity: .85; }
.buttons { margin-top: 18px; display:flex; gap: 10px; flex-wrap: wrap; }
.button { padding: 10px 14px; border: 1px solid #ddd; border-radius: 12px; }
.button.primary { border-color: #111; background: #111; color: white; }

.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 22px 0 44px; }
.card { border: 1px solid #eee; border-radius: 16px; padding: 16px; background: #fff; }
.card h2 { margin: 0 0 6px; }

.footer { border-top: 1px solid #eee; padding: 22px 0; opacity: .8; margin-top: 30px; }

@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
}