@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700;800&display=swap");

:root {
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --color-bg: #f6f2ea;
  --color-surface: #e9dfcf;
  --color-text: #121e32;
  --color-muted: #3e4c64;
  --color-accent: #bf9043;
  --brand-color: #101d33;
  --header-bg: rgba(246, 242, 234, 0.9);
  --header-border: rgba(18, 30, 50, 0.16);
  --nav-color: #162340;
  --menu-border: rgba(18, 30, 50, 0.22);
  --menu-bg: rgba(250, 245, 236, 0.95);
  --menu-color: #162340;
  --mobile-nav-bg: #f8f3ea;
  --mobile-nav-border: rgba(16, 31, 56, 0.2);
  --btn-primary-bg: #1a2d4f;
  --btn-primary-hover: #102240;
  --btn-primary-text: #f8f1e2;
  --btn-ghost-border: rgba(21, 32, 55, 0.25);
  --btn-ghost-hover-bg: rgba(18, 34, 61, 0.08);
  --tag-bg: rgba(18, 35, 61, 0.08);
  --tag-border: rgba(18, 35, 61, 0.18);
  --card-bg: #fbf8f2;
  --card-border: rgba(12, 26, 46, 0.16);
  --card-shadow: 0 16px 28px rgba(13, 23, 40, 0.12);
  --step-bg: #fbf8f2;
  --step-border: rgba(18, 35, 61, 0.16);
  --result-bg: rgba(191, 144, 67, 0.18);
  --result-text: #7a5217;
  --input-bg: #fffdfa;
  --input-border: rgba(21, 35, 61, 0.25);
  --focus-ring: rgba(191, 144, 67, 0.45);
  --footer-bg: #e9dfcf;
  --footer-border: rgba(16, 31, 56, 0.15);
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgba(191, 144, 67, 0.12) 0%, transparent 42%),
    radial-gradient(circle at 85% 18%, rgba(26, 45, 79, 0.09) 0%, transparent 39%),
    var(--color-bg);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(112deg, rgba(18, 33, 58, 0.16) 0%, rgba(191, 144, 67, 0.08) 55%, transparent 100%);
}

.hero {
  position: relative;
}

.hero-copy h1 {
  text-wrap: balance;
}

.hero-media {
  border-radius: 30px;
  border: 1px solid rgba(17, 30, 52, 0.22);
}

.service-card h3,
.section-title,
.contact-card h3,
.footer-brand {
  color: #0f1b31;
}

.step-card {
  background: linear-gradient(180deg, #fffdf8 0%, #f8f2e7 100%);
}