:root {
  --radius: 0.75rem;
  --background: oklch(0.975 0.012 85);
  --foreground: oklch(0.24 0.035 160);
  --card: oklch(0.99 0.006 85);
  --primary: oklch(0.36 0.07 160);
  --primary-foreground: oklch(0.97 0.012 85);
  --secondary: oklch(0.93 0.025 85);
  --muted-foreground: oklch(0.48 0.03 160);
  --accent: oklch(0.66 0.14 45);
  --accent-foreground: oklch(0.99 0.006 85);
  --border: oklch(0.88 0.02 85);
  --input: oklch(0.86 0.02 85);
  --ring: oklch(0.66 0.14 45);
  --destructive: oklch(0.577 0.245 27.325);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "DM Sans", sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand, .step__num { font-family: "Fraunces", serif; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero__brand {
  position: absolute; inset-inline: 0; top: 0; z-index: 10;
  max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.5rem;
}
.brand { font-size: 1.5rem; font-weight: 700; color: var(--primary-foreground); }
.brand__accent { color: var(--accent); }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, color-mix(in oklab, var(--foreground) 90%, transparent), color-mix(in oklab, var(--foreground) 70%, transparent), color-mix(in oklab, var(--foreground) 10%, transparent));
}
.hero__content { position: relative; max-width: 72rem; margin: 0 auto; padding: 7rem 1.5rem 10rem; }
@media (min-width: 768px) { .hero__content { padding: 10rem 1.5rem 12rem; } }
.badge {
  display: inline-block; border-radius: 9999px; background: var(--accent);
  padding: 0.25rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--accent-foreground);
}
.hero__title {
  margin-top: 1.5rem; max-width: 42rem; color: var(--primary-foreground);
  font-size: 2.25rem; font-weight: 700; line-height: 1.2;
}
@media (min-width: 768px) { .hero__title { font-size: 3.75rem; } }
.hero__text {
  margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem;
  color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
}
.btn {
  display: inline-block; margin-top: 2.5rem; border-radius: 0.5rem; background: var(--accent);
  padding: 1rem 2rem; font-size: 1.125rem; font-weight: 600; color: var(--accent-foreground);
  text-decoration: none; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  transition: filter 0.2s;
}
.btn:hover { filter: brightness(1.1); }

/* Problem */
.problem { max-width: 56rem; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; }
.problem h2 { font-size: 1.875rem; font-weight: 700; }
@media (min-width: 768px) { .problem h2 { font-size: 2.25rem; } }
.problem p { margin-top: 1.5rem; font-size: 1.125rem; color: var(--muted-foreground); }

/* Steps */
.steps { background: var(--primary); padding: 5rem 0; color: var(--primary-foreground); }
.steps__inner { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.steps h2 { text-align: center; font-size: 1.875rem; font-weight: 700; }
@media (min-width: 768px) { .steps h2 { font-size: 2.25rem; } }
.steps__grid { margin-top: 3.5rem; display: grid; gap: 2rem; }
@media (min-width: 768px) { .steps__grid { grid-template-columns: repeat(3, 1fr); } }
.step { border-radius: 1rem; background: rgb(255 255 255 / 0.1); padding: 2rem; }
.step__head { display: flex; align-items: center; gap: 0.75rem; }
.step__num { font-size: 2.25rem; font-weight: 700; color: var(--accent); }
.step__icon { height: 1.75rem; width: 1.75rem; color: var(--primary-foreground); }
.step h3 { margin-top: 1rem; font-size: 1.5rem; font-weight: 700; }
.step p { margin-top: 0.5rem; color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); }

/* Benefits */
.benefits {
  max-width: 72rem; margin: 0 auto; padding: 5rem 1.5rem;
  display: grid; gap: 1.5rem;
}
@media (min-width: 768px) { .benefits { grid-template-columns: repeat(3, 1fr); } }
.benefit { border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 2rem; }
.benefit__icon { height: 2rem; width: 2rem; color: var(--accent); }
.benefit h3 { margin-top: 1rem; font-size: 1.25rem; font-weight: 700; }
.benefit p { margin-top: 0.5rem; color: var(--muted-foreground); }

/* Form */
.form-section { background: var(--secondary); padding: 5rem 0; }
.form-section__inner {
  max-width: 72rem; margin: 0 auto; padding: 0 1.5rem;
  display: grid; gap: 3rem;
}
@media (min-width: 768px) { .form-section__inner { grid-template-columns: repeat(2, 1fr); } }
.form-section__intro h2 { font-size: 1.875rem; font-weight: 700; }
@media (min-width: 768px) { .form-section__intro h2 { font-size: 2.25rem; } }
.form-section__intro p { margin-top: 1rem; font-size: 1.125rem; color: var(--muted-foreground); }
.form-card { border-radius: 1rem; background: var(--card); padding: 2rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, 1fr); } }

input, select, textarea {
  width: 100%; border-radius: 0.5rem; border: 1px solid var(--input);
  background: var(--card); color: var(--foreground);
  padding: 0.75rem 1rem; font: inherit;
}
input::placeholder, textarea::placeholder { color: var(--muted-foreground); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
textarea { resize: vertical; }

.field__error { margin-top: 0.25rem; font-size: 0.875rem; color: var(--destructive); min-height: 0; }
.field__error:empty { display: none; }
.form-error { margin-bottom: 1rem; font-size: 0.875rem; color: var(--destructive); }

button[type="submit"] {
  width: 100%; border: none; border-radius: 0.5rem; background: var(--accent);
  padding: 1rem; font: inherit; font-size: 1.125rem; font-weight: 600;
  color: var(--accent-foreground); cursor: pointer; transition: filter 0.2s;
}
button[type="submit"]:hover { filter: brightness(1.1); }
button[type="submit"]:disabled { opacity: 0.6; cursor: default; }

.form-success { padding: 3rem 0; text-align: center; }
.form-success__icon { height: 3.5rem; width: 3.5rem; color: var(--accent); }
.form-success h3 { margin-top: 1rem; font-size: 1.5rem; font-weight: 700; }
.form-success p { margin-top: 0.5rem; color: var(--muted-foreground); }

footer { padding: 2rem 0; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }