/* Hero
   The marketing hero: a two-tone heading, a subtitle and a tabbed product
   preview. Colour and type from tokens.css (marketing theme). */

.dp-hero {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--dp-space-16) var(--dp-space-6) var(--dp-space-12);
  text-align: center;
}

.dp-hero-title {
  margin: 0 0 var(--dp-space-5);
  font-size: var(--dp-text-5xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-hero-title .light { font-weight: var(--dp-weight-light); }

.dp-hero-sub {
  max-width: 46ch;
  margin: 0 auto var(--dp-space-10);
  font-size: var(--dp-text-xl);
  line-height: var(--dp-leading-snug);
  color: var(--dp-blue-600);
}

.dp-hero-preview {
  max-width: 60rem;
  margin: 0 auto;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
  background: var(--dp-surface);
  overflow: hidden;
  box-shadow: var(--dp-shadow-lg);
}

.dp-hero-tabs {
  display: flex;
  border-bottom: 1px solid var(--dp-border);
}

.dp-hero-tab {
  flex: 1;
  padding: var(--dp-space-4);
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text-muted);
  cursor: pointer;
}

.dp-hero-tab:hover { color: var(--dp-navy); }
.dp-hero-tab[data-active] { color: var(--dp-navy); border-bottom-color: var(--dp-blue-700); }

.dp-hero-stage {
  position: relative;
  height: 24rem;
  background: var(--dp-blue-200);
  overflow: hidden;
}

/* Heatmap-style backdrop suggesting the map preview */
.dp-hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 46%, rgba(239, 68, 68, 0.7) 0, rgba(239, 68, 68, 0) 12%),
    radial-gradient(circle at 30% 40%, rgba(250, 204, 21, 0.55) 0, rgba(250, 204, 21, 0) 8%),
    radial-gradient(circle at 55% 42%, rgba(239, 68, 68, 0.75) 0, rgba(239, 68, 68, 0) 15%),
    radial-gradient(circle at 72% 46%, rgba(45, 75, 255, 0.45) 0, rgba(45, 75, 255, 0) 10%),
    radial-gradient(circle at 48% 64%, rgba(239, 68, 68, 0.6) 0, rgba(239, 68, 68, 0) 9%);
  filter: blur(3px);
}

.dp-hero-card {
  position: absolute;
  right: var(--dp-space-6);
  bottom: var(--dp-space-6);
  min-width: 12rem;
  padding: var(--dp-space-4) var(--dp-space-5);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  box-shadow: var(--dp-shadow-md);
  text-align: left;
}

.dp-hero-card-label { font-size: var(--dp-text-sm); font-weight: var(--dp-weight-bold); color: var(--dp-navy); margin-bottom: var(--dp-space-2); }
.dp-hero-card-row { display: flex; align-items: baseline; gap: var(--dp-space-3); }
.dp-hero-card-val { font-size: var(--dp-text-2xl); font-weight: var(--dp-weight-extrabold); color: var(--dp-navy); font-variant-numeric: tabular-nums; }
.dp-hero-card-pct { font-size: var(--dp-text-base); font-weight: var(--dp-weight-bold); color: var(--dp-blue-700); }