@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Source+Sans+3:wght@400;600;700;800&display=swap");

:root {
  --font-display: "Merriweather", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --color-bg: #f7f4ee;
  --color-surface: #ece5d7;
  --color-text: #19353f;
  --color-muted: #3f5961;
  --color-accent: #2a6970;
  --brand-color: #14333d;
  --header-bg: rgba(247, 244, 238, 0.94);
  --header-border: rgba(20, 51, 61, 0.16);
  --nav-color: #183841;
  --menu-border: rgba(18, 50, 58, 0.22);
  --menu-bg: rgba(250, 248, 242, 0.96);
  --menu-color: #183841;
  --mobile-nav-bg: #f4f0e7;
  --mobile-nav-border: rgba(20, 51, 61, 0.18);
  --btn-primary-bg: #235862;
  --btn-primary-hover: #184850;
  --btn-primary-text: #f8f5ef;
  --btn-ghost-border: rgba(20, 51, 61, 0.26);
  --btn-ghost-hover-bg: rgba(31, 84, 95, 0.1);
  --tag-bg: rgba(35, 88, 98, 0.11);
  --tag-border: rgba(35, 88, 98, 0.2);
  --card-bg: #fffdf9;
  --card-border: rgba(19, 53, 61, 0.16);
  --card-shadow: 0 10px 22px rgba(14, 33, 40, 0.1);
  --step-bg: #fffdf9;
  --step-border: rgba(20, 51, 61, 0.16);
  --result-bg: rgba(42, 105, 112, 0.16);
  --result-text: #1f5962;
  --input-bg: #fffefc;
  --input-border: rgba(20, 51, 61, 0.24);
  --focus-ring: rgba(42, 105, 112, 0.42);
  --footer-bg: #ece5d7;
  --footer-border: rgba(20, 51, 61, 0.16);
}

body {
  background:
    linear-gradient(90deg, rgba(42, 105, 112, 0.05), transparent 40%),
    var(--color-bg);
}

.hero {
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 12% auto auto 67%;
  width: 210px;
  height: 210px;
  border-radius: 22px;
  background: rgba(42, 105, 112, 0.08);
  z-index: -1;
}

.hero-media {
  border: 1px solid rgba(18, 51, 61, 0.22);
  border-radius: 20px;
}

.card {
  border-width: 1px;
}

.step-card {
  border-top: 4px solid #2a6970;
}