:root {
  --deep: #007c67;
  --green: #7ea177;
  --yellow: #f2d9a4;
  --bright: #f8d64a;
  --ink: #17342f;
  --muted: #5d6d68;
  --paper: #fffaf0;
  --white: #ffffff;
  --line: rgba(23, 52, 47, .14);
  --shadow: 0 24px 70px rgba(15, 47, 40, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper), #f7f3e8 60%, #eef3ec);
  line-height: 1.6;
}

a { color: inherit; }
.nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}
.logo {
  text-decoration: none;
  font-weight: 850;
  color: var(--deep);
  letter-spacing: -.02em;
}
.navlinks { display: flex; gap: 18px; flex-wrap: wrap; font-size: .95rem; }
.navlinks a { text-decoration: none; color: var(--muted); }
.navlinks a:hover { color: var(--deep); }

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,214,74,.45), rgba(126,161,119,.10) 52%, transparent 70%);
  z-index: -1;
}
.hero-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 88px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 44px;
  align-items: center;
}
.eyebrow, .section-label {
  color: var(--deep);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .78rem;
}
h1, h2, h3 { line-height: 1.08; letter-spacing: -.04em; margin: 0; }
h1 { font-size: clamp(3.4rem, 8vw, 6.8rem); max-width: 780px; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-top: 10px; max-width: 900px; }
h3 { font-size: 1.35rem; }
.lead { font-size: clamp(1.2rem, 2vw, 1.55rem); max-width: 680px; color: #314541; }
.promise {
  display: inline-block;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  font-weight: 750;
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid var(--line);
}
.btn.primary { background: var(--deep); color: white; box-shadow: 0 12px 30px rgba(0,124,103,.22); }
.btn.secondary { background: rgba(255,255,255,.7); color: var(--deep); }
.hero-card { filter: drop-shadow(var(--shadow)); }
.folder-window {
  background: #183832;
  border-radius: 28px;
  overflow: hidden;
  color: #f8f6e8;
  border: 1px solid rgba(255,255,255,.1);
}
.window-bar {
  display: flex;
  gap: 8px;
  padding: 18px;
  background: rgba(255,255,255,.08);
}
.window-bar span { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); opacity: .9; }
pre { margin: 0; padding: 26px; white-space: pre-wrap; font-size: clamp(.9rem, 1.5vw, 1.05rem); }
code { font-family: "SFMono-Regular", Consolas, monospace; }
.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 78px 24px;
}
.intro p { max-width: 840px; font-size: 1.1rem; color: #344b46; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.card, .steps, .video-placeholder, .audience-grid p, .download-box {
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 14px 40px rgba(28, 66, 58, .08);
}
.card { padding: 24px; }
.card p, .audience-grid p { color: var(--muted); }
.split {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 34px;
  align-items: start;
}
.steps {
  margin: 0;
  padding: 24px;
  list-style: none;
  display: grid;
  gap: 14px;
}
.steps li { display: flex; align-items: flex-start; gap: 12px; font-weight: 700; }
.steps span {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bright);
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: .85rem;
}
.video-placeholder {
  margin-top: 24px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(135deg, rgba(0,124,103,.12), rgba(248,214,74,.35));
}
.video-placeholder strong { font-size: 1.4rem; }
.video-placeholder p { margin: 8px 0 0; color: var(--muted); }
.embed-code {
  margin-top: 16px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.65);
  border: 1px solid var(--line);
}
.embed-code summary { cursor: pointer; font-weight: 800; color: var(--deep); }
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.audience-grid p { padding: 22px; margin: 0; }
.download-box {
  padding: 34px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(242,217,164,.55));
}
.download-box p { max-width: 720px; }
.footer {
  padding: 36px 24px;
  text-align: center;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
@media (max-width: 860px) {
  .nav { align-items: flex-start; flex-direction: column; }
  .hero-grid, .split, .download-box { grid-template-columns: 1fr; display: grid; }
  .cards { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr 1fr; }
  .download-box { align-items: start; }
}
@media (max-width: 560px) {
  .navlinks { display: none; }
  .audience-grid { grid-template-columns: 1fr; }
  h1 { font-size: 3.2rem; }
}