@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400;1,600&family=DM+Sans:wght@300;400;500;600&display=swap');

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

:root {
  --terracotta: #C0694A;
  --terracotta-dark: #A85A3D;
  --sage-dark: #5A7A61;
  --charcoal: #1E1714;
  --cream: #FAF7F2;
  --terra-pale: #F3E3D8;
  --sage-pale: #E7EFE8;
  --white: #FFFFFF;
  --muted: #7A6B63;
  --border: #E5DDD5;
  --font-h: 'Lora', Georgia, serif;
  --font-b: 'DM Sans', system-ui, sans-serif;
  --r-full: 9999px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-md: 0 4px 16px rgba(30,23,20,.10);
  --shadow-lg: 0 8px 32px rgba(30,23,20,.12);
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--font-b); background: var(--cream); color: var(--charcoal); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* ── CTA ── */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; background: var(--terracotta); color: #fff;
  font-family: var(--font-b); font-size: 1rem; font-weight: 600;
  border-radius: var(--r-full); box-shadow: 0 4px 18px rgba(192,105,74,.32);
  transition: background .2s, transform .2s, box-shadow .2s;
  width: 100%; max-width: 360px; text-align: center;
}
.cta:hover { background: var(--terracotta-dark); box-shadow: 0 6px 22px rgba(192,105,74,.42); transform: translateY(-1px); }
.cta:active { transform: scale(.97); }

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: rgba(250,247,242,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { height: 32px; width: auto; }
.nav-cta {
  display: inline-flex; align-items: center; padding: 10px 18px;
  background: var(--terracotta); color: #fff; font-family: var(--font-b);
  font-size: .8125rem; font-weight: 600; border-radius: var(--r-full);
  white-space: nowrap; transition: background .2s;
}
.nav-cta:hover { background: var(--terracotta-dark); }

/* ── HERO ── */
.hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 48px 24px 56px;
  max-width: 600px; margin: 0 auto; gap: 0;
}
.hero-img-wrap { order: -1; margin-bottom: 28px; }
.hero-img {
  width: 240px; height: 290px; object-fit: cover;
  object-position: top center; border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.badge {
  display: inline-block; background: var(--sage-pale); color: var(--sage-dark);
  font-size: .6875rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-full);
  margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--font-h); font-size: 2.25rem; font-weight: 600;
  line-height: 1.2; color: var(--charcoal); margin-bottom: 16px;
}
.hero h1 em { color: var(--terracotta); font-style: italic; }
.hero p {
  font-size: 1rem; line-height: 1.7; color: var(--muted);
  max-width: 400px; margin: 0 auto 28px;
}
.hero-micro { margin-top: 12px; font-size: .8125rem; color: var(--muted); }

/* ── TRUST BAR ── */
.trust {
  background: var(--white); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.trust-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.trust-item:last-child { border-bottom: none; }
.trust-emoji { font-size: 1.375rem; flex-shrink: 0; }
.trust-text { font-size: .875rem; line-height: 1.5; color: var(--charcoal); }

/* ── PROBLEM ── */
.problem {
  background: linear-gradient(135deg, #C16745 0%, #A8563A 100%);
  padding: 56px 24px; color: #fff;
}
.problem h2 {
  font-family: var(--font-h); font-size: 1.875rem; font-weight: 600;
  font-style: italic; line-height: 1.3; text-align: center;
  max-width: 480px; margin: 0 auto 36px; color: #fff;
}
.problem-cards {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 560px; margin: 0 auto;
}
.problem-card {
  background: rgba(255,255,255,.14); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg);
  padding: 20px 22px;
}
.problem-card h3 {
  font-family: var(--font-h); font-size: 1rem; font-weight: 600;
  color: #fff; margin-bottom: 8px;
}
.problem-card p { font-size: .875rem; color: rgba(255,255,255,.85); line-height: 1.6; }

/* ── LEARN ── */
.learn { padding: 64px 24px; max-width: 680px; margin: 0 auto; width: 100%; }
.learn-header { text-align: center; margin-bottom: 48px; }
.learn-header h2 {
  font-family: var(--font-h); font-size: 1.75rem; font-weight: 600;
  color: var(--charcoal); margin-bottom: 12px;
}
.learn-header p { font-size: .9375rem; color: var(--muted); line-height: 1.7; max-width: 460px; margin: 0 auto; }
.learn-blocks { display: flex; flex-direction: column; gap: 48px; }
.learn-block {
  display: flex; flex-direction: column; align-items: center;
  gap: 24px; text-align: center;
}
.learn-block img {
  width: 200px; height: 200px; object-fit: cover;
  border-radius: var(--r-xl); box-shadow: var(--shadow-md); flex-shrink: 0;
}
.learn-text { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.learn-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--terra-pale); color: var(--terracotta-dark);
  font-size: .75rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-full);
}
.learn-tag img { width: 16px; height: 16px; object-fit: contain; }
.learn-text h3 {
  font-family: var(--font-h); font-size: 1.125rem; font-weight: 600;
  color: var(--charcoal); line-height: 1.35;
}
.learn-text p { font-size: .9rem; color: var(--muted); line-height: 1.7; max-width: 380px; }

/* ── CREDIBILITY ── */
.cred { background: var(--terra-pale); padding: 64px 24px; }
.cred-inner {
  max-width: 600px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.cred-inner h2 {
  font-family: var(--font-h); font-size: 1.625rem; font-weight: 600;
  color: var(--charcoal); line-height: 1.3;
}
.cred-cards { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.cred-card {
  background: var(--white); border-radius: var(--r-lg);
  padding: 20px 24px; box-shadow: 0 1px 3px rgba(30,23,20,.08);
}
.cred-number {
  display: block; font-family: var(--font-h); font-size: 2rem; font-weight: 600;
  color: var(--terracotta); margin-bottom: 6px;
}
.cred-card p { font-size: .875rem; color: var(--charcoal); line-height: 1.5; }
.cred-quote {
  font-family: var(--font-h); font-style: italic; font-size: 1rem;
  color: var(--charcoal); line-height: 1.7;
  border-left: 3px solid var(--terracotta); padding-left: 20px;
  text-align: left; margin: 0;
}
.cred-cite {
  display: block; font-family: var(--font-b); font-style: normal;
  font-size: .8125rem; color: var(--muted); margin-top: 10px;
}
.cred-source {
  font-size: .875rem; color: var(--terracotta-dark); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.cred-source:hover { color: var(--charcoal); }
.cred-disclaimer {
  background: var(--sage-pale); border-radius: 12px; padding: 14px 20px;
  font-size: .8125rem; color: var(--sage-dark); line-height: 1.55; width: 100%;
}

/* ── CLOSING ── */
.closing {
  padding: 72px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  border-top: 1px solid var(--border);
}
.closing-badge {
  display: inline-block; background: var(--terra-pale); color: var(--terracotta-dark);
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-full);
}
.closing h2 {
  font-family: var(--font-h); font-size: 1.875rem; font-weight: 600;
  color: var(--charcoal); line-height: 1.25; max-width: 440px;
}
.closing > p {
  font-size: .9375rem; color: var(--muted); line-height: 1.7; max-width: 400px;
}
.closing-micro { font-size: .8125rem; color: var(--muted); }

/* ── FOOTER ── */
footer {
  background: var(--white); border-top: 1px solid var(--border);
  padding: 36px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.footer-logo { height: 28px; width: auto; opacity: .7; }
footer p { font-size: .8125rem; color: var(--muted); line-height: 1.65; max-width: 420px; }
.footer-copy { font-size: .75rem; }

/* ── DESKTOP ── */
@media (min-width: 680px) {
  .hero {
    flex-direction: row; text-align: left; justify-content: center;
    gap: 48px; padding: 72px 48px; max-width: 960px;
  }
  .hero-img-wrap { order: 1; margin-bottom: 0; flex-shrink: 0; }
  .hero-img { width: 300px; height: 360px; }
  .hero-content { flex: 1; max-width: 480px; }
  .hero h1 { font-size: 2.75rem; }
  .hero p { margin-left: 0; }
  .cta { width: auto; }

  .trust { flex-direction: row; max-width: 960px; margin: 0 auto; }
  .trust-item {
    flex: 1; border-bottom: none; border-right: 1px solid var(--border);
    flex-direction: column; text-align: center; gap: 8px; padding: 24px 20px;
  }
  .trust-item:last-child { border-right: none; }

  .problem h2 { font-size: 2.25rem; }
  .problem-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  .learn-block { flex-direction: row; text-align: left; gap: 48px; }
  .learn-block.reverse { flex-direction: row-reverse; }
  .learn-text { align-items: flex-start; text-align: left; }
  .learn-block img { width: 240px; height: 240px; }

  .cred-cards { flex-direction: row; gap: 16px; }
  .cred-card { flex: 1; }

  .closing { padding: 96px 48px; }
  .closing h2 { font-size: 2.25rem; }
}