:root {
  --bg: #fff8ef;
  --ink: #2f2317;
  --accent: #ef6c00;
  --surface: #ffffff;
  --border: #ecd8be;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Outfit", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, #ffe3c1 0, #ffe3c1 14%, transparent 15%),
    radial-gradient(circle at 96% 95%, #ffe5ca 0, #ffe5ca 16%, transparent 17%),
    var(--bg);
  padding: 1.1rem;
}
header, .grid, .cta { max-width: 940px; margin: 0 auto; }
header { margin-bottom: 1rem; }
h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1; }
header p { max-width: 66ch; color: #664e37; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}
article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.9rem;
}
article h2 { margin: 0 0 0.5rem; color: #7f3900; font-size: 1.06rem; }
article p { margin: 0; color: #5f4632; }
.cta {
  margin-top: 1rem;
  background: linear-gradient(95deg, #fff, #ffefd8);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
a {
  text-decoration: none;
  background: var(--accent);
  color: white;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .cta { flex-direction: column; align-items: start; }
}