@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --font-display: "Archivo Black", Impact, sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", sans-serif;
  --color-bg: #fff8ec;
  --color-surface: #ffe5d8;
  --color-text: #1f3249;
  --color-muted: #3f4f63;
  --color-accent: #ff6647;
  --brand-color: #1f3249;
  --header-bg: rgba(255, 248, 236, 0.93);
  --header-border: rgba(31, 50, 73, 0.18);
  --nav-color: #223853;
  --menu-border: rgba(31, 50, 73, 0.22);
  --menu-bg: rgba(255, 245, 231, 0.98);
  --menu-color: #223853;
  --mobile-nav-bg: #fff4e6;
  --mobile-nav-border: rgba(31, 50, 73, 0.2);
  --btn-primary-bg: #ff6647;
  --btn-primary-hover: #f04f2e;
  --btn-primary-text: #fff8ef;
  --btn-ghost-border: rgba(31, 50, 73, 0.35);
  --btn-ghost-hover-bg: rgba(255, 102, 71, 0.12);
  --tag-bg: rgba(255, 102, 71, 0.14);
  --tag-border: rgba(31, 50, 73, 0.24);
  --card-bg: #fffefb;
  --card-border: rgba(31, 50, 73, 0.16);
  --card-shadow: 0 15px 28px rgba(31, 50, 73, 0.12);
  --step-bg: #fffefb;
  --step-border: rgba(31, 50, 73, 0.2);
  --result-bg: rgba(255, 102, 71, 0.18);
  --result-text: #9d2f18;
  --input-bg: #fffefb;
  --input-border: rgba(31, 50, 73, 0.28);
  --focus-ring: rgba(255, 102, 71, 0.45);
  --footer-bg: #ffe5d8;
  --footer-border: rgba(31, 50, 73, 0.16);
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 102, 71, 0.2) 0%, transparent 37%),
    radial-gradient(circle at 88% 24%, rgba(31, 50, 73, 0.12) 0%, transparent 40%),
    var(--color-bg);
}

.hero {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -2.5rem 0 auto 0;
  height: 58%;
  z-index: -1;
  background: linear-gradient(118deg, rgba(255, 102, 71, 0.15), rgba(31, 50, 73, 0.08));
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}

.hero-copy h1 {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hero-media {
  border-radius: 28px 10px 28px 10px;
  border: 2px solid rgba(31, 50, 73, 0.2);
}

.card {
  border-radius: 18px 8px 18px 8px;
}

.step-card {
  border-left: 5px solid #ff6647;
}