:root {
  /* Brand palette */
  --vp-deep: #0f3c36;
  --vp-green: #1f4f48;
  --vp-ink: #233f3a;
  --vp-text: #213633;
  --vp-muted: #5f7a74;
  --vp-cream: #f6f6f4;
  --vp-card: #ffffff;
  --vp-teal: #84e2e3;
  --vp-gold: #e6b24c;
  --vp-gold-500: #e3ad42;
  --vp-gold-600: #d8a53b;
  --radius-xl: 28px;
  --radius-lg: 18px;
  --shadow-soft: 0 10px 30px rgba(9, 36, 32, 0.12);
  --shadow-card: 0 16px 35px rgba(21, 55, 50, 0.18);
  --maxw: 1024px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--vp-text);
  background: linear-gradient(180deg, #f8faf9 0%, var(--vp-cream) 100%);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 28px; }

/* Header / logo centering */
header.wrap { text-align: center; }
header .nav {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.logo-img,
.logo-svg {
  display: block;
  max-height: 240px;
  width: auto;
  transform-origin: center;
}

.hero {
  background: linear-gradient(0deg, rgba(15,60,54,.72), rgba(15,60,54,.72)),
    url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?q=80&w=1770&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xl);
  color: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* center hero content and keep stacked layout */
.hero-inner {
  padding: 36px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.15;
  margin: 10px 0 8px;
  font-weight: 800;
}

.hero p.sub {
  opacity: 0.92;
  max-width: 720px;
  font-size: clamp(14px, 1.5vw, 18px);
}

/* CTA */
.cta {
  display: inline-block;
  margin: 22px 0 8px;
  background: var(--vp-teal);
  color: #1f2a28;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(230, 178, 76, 0.28);
  transition: transform .05s ease, filter .2s ease, background .2s ease;
}
.cta:hover { filter: brightness(.97); }
.cta:active { transform: translateY(1px); }

/* CARD SECTIONS */
.card {
  background: var(--vp-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}
section { margin: 26px 0; }
h2 {
  font-size: clamp(22px, 3.2vw, 30px);
  color: var(--vp-ink);
  margin: 0 0 10px;
  text-align: center;
}
.muted { color: var(--vp-muted); }

/* Problem points */
.problems { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
.problems .text { max-width: 880px; margin: 0 auto; text-align: center; }
.badges { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 16px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.badge .x {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #ffe9e7;
  color: #ca5a4a;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.badge span { font-weight: 600; color: #344a45; text-align: center; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 12px; }
.step {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  padding:14px;
}
.num {
  width:44px;
  height:44px;
  border-radius:999px;
  background:var(--vp-ink);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
}
.step h3 { margin:10px 0 0; font-size:18px; color:#162825; }
.step p { margin:2px 0 0; color:#4d6661; }

/* Waitlist */
.waitlist { display:grid; gap:18px; }
.form { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.field { display:flex; flex-direction:column; gap:6px; }
label { font-weight:600; color:#294943; }
input {
  border:1px solid #e5e7eb;
  padding:12px 14px;
  border-radius:12px;
  font: inherit;
}
input:focus { outline:2px solid #c4e6dd; border-color:#c4e6dd; }
.btn-primary { grid-column: 1 / -1; justify-self: center; }

/* Footer */
footer { margin:26px 0 12px; text-align:center; color:#6b817c; font-size:14px; }

/* Responsive */
@media (max-width: 780px) {
  .badges, .steps { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .wrap { padding: 18px; }
}