:root {
  --bg: #16302B; --panel: #1F4A40; --card: #26594C; --sun: #FFC94D; --orange: #FF9F1C;
  --cream: #FFF4D6; --ink: #1B1B1B; --muted: #B9CFC6;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: #fff; }
body { font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
img { max-width: 100%; height: auto; }
a { color: var(--sun); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

.hero { background: radial-gradient(ellipse at 75% 40%, var(--card), var(--bg) 70%); padding: 40px 0 24px; }
.hero-inner { display: flex; align-items: center; gap: 24px; }
.hero-text { flex: 1 1 0; min-width: 0; }
.hero-capy { flex: 0 0 auto; width: 320px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35)); }
.eyebrow { margin: 0; color: var(--muted); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
h1 { margin: 4px 0 8px; color: var(--sun); font-size: clamp(40px, 7vw, 64px); line-height: 1.05; }
.lead { margin: 0; color: var(--cream); font-size: clamp(18px, 2.4vw, 21px); max-width: 32em; }
.cta {
  display: inline-block; margin-top: 22px; padding: 14px 26px; border-radius: 14px;
  background: var(--orange); color: var(--ink); font-weight: 700; font-size: 18px; text-decoration: none;
}
.cta:hover, .cta:focus-visible { background: var(--sun); }

main { padding-top: 16px; padding-bottom: 24px; }
h2 { margin: 0 0 6px; color: var(--sun); font-size: 24px; }
section { background: var(--panel); border-radius: 20px; padding: 20px; margin-top: 16px; }
.feature { display: flex; align-items: center; gap: 20px; }
.feature img { flex: 0 0 auto; width: 120px; }
.feature p, .start p { margin: 0; }
.feature:nth-of-type(even) { flex-direction: row-reverse; }
.start ol { margin: 8px 0 0; padding-left: 22px; }
.start li { margin: 6px 0; }
.small { margin-top: 14px !important; color: var(--muted); font-size: 15px; }

footer { color: var(--muted); font-size: 14px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

@media (max-width: 640px) {
  .hero { padding-top: 28px; }
  .hero-inner { flex-direction: column-reverse; text-align: center; gap: 8px; }
  .hero-capy { width: 200px; }
  .lead { margin: 0 auto; }
  .feature, .feature:nth-of-type(even) { flex-direction: column; text-align: center; gap: 8px; }
  .feature img { width: 110px; }
}