:root {
  --yellow: #ffd300;
  --black: #000000;
  --offwhite: #f5f0e6;
  --red: #e44932;
  --radius: 12px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); background:var(--offwhite); color:var(--black); }
header {
  padding:14px 32px; background:var(--black); color:#fff;
  display:flex; justify-content:space-between; align-items:center;
}
.logo { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:1px; }
.logo span.ad { color:var(--red); }
a { text-decoration:none; }
.btn, .btn-outline {
  padding:9px 20px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer;
}
.btn { border:none; background:var(--yellow); color:var(--black); }
.btn-outline { border:1px solid #fff; background:transparent; color:#fff; }
.layout { padding:32px; display:grid; gap:24px; }
.card {
  background:#fff; border-radius:var(--radius); padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
.hero { padding:26px 22px; border-radius:var(--radius); display:flex; flex-direction:column; gap:10px; }
.hero h1 { margin:0; font-size:32px; }
.hero p { margin:0; font-size:15px; }
.section-title { font-size:22px; font-weight:700; margin-bottom:6px; }
.footer { padding:16px 32px; font-size:12px; color:#666; }