:root {
  --brand: #087ca1;
  --brand-dark: #04516b;
  --accent: #45d6c5;
}

.home-hero::before {
  background:
    radial-gradient(ellipse 72% 74% at 100% 0%, rgba(2, 24, 34, 0) 0%, rgba(2, 24, 34, 0.04) 25%, rgba(2, 24, 34, 0.32) 58%, rgba(2, 24, 34, 0.74) 100%),
    linear-gradient(90deg, rgba(2, 24, 34, 0.96) 0%, rgba(4, 55, 73, 0.72) 47%, rgba(2, 24, 34, 0.06) 100%),
    linear-gradient(180deg, rgba(2, 24, 34, 0) 0%, rgba(2, 24, 34, 0.12) 46%, var(--bg) 100%);
}

.home-hero-media {
  background: linear-gradient(120deg, #031d28 0%, #04516b 52%, #087ca1 100%);
}

.button-primary {
  box-shadow: 0 18px 38px rgba(8, 124, 161, 0.24);
}

.guide-card:hover,
.guide-card:focus-visible {
  border-color: rgba(69, 214, 197, 0.78);
}

.card-placeholder {
  background: linear-gradient(145deg, #043345, #087ca1 62%, #45d6c5);
}