.hero {
  position: relative;
  overflow: hidden;
  padding-top: 8.5rem;
  padding-bottom: 5rem;
}
@media (min-width: 640px) { .hero { padding-top: 10.5rem; padding-bottom: 7rem; } }

.hero-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(38,181,216,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(38,181,216,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hero-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(38,181,216,.18), transparent 60%);
}

.hero-motif {
  position: absolute;
  pointer-events: none;
  display: none;
  opacity: .95;
  right: -8rem;
  top: 2.5rem;
}
@media (min-width: 768px) { .hero-motif { display: block; width: 420px; height: 420px; } }
@media (min-width: 1024px) { .hero-motif { right: -2.5rem; width: 560px; height: 560px; } }

.hero-motif-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-motif-logo {
  position: absolute;
  inset: 0;
  width: 78%;
  height: 78%;
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(38,181,216,.25));
}

.hero-content { position: relative; max-width: 720px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  border: 1px solid rgba(38,181,216,.3);
  background-color: rgba(38,181,216,.07);
  padding: .45rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-dark);
}
html.dark .hero-badge { color: var(--brand-light); }
.hero-badge svg { width: 14px; height: 14px; }

.hero-title {
  margin-top: 1.5rem;
  font-size: 2.4rem;
  line-height: 1.08;
}
@media (min-width: 640px) { .hero-title { font-size: 3.1rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 3.6rem; } }

.hero-subtitle {
  margin-top: 1.5rem;
  max-width: 540px;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgb(var(--color-text-muted));
}

.hero-ctas {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
@media (min-width: 640px) { .hero-ctas { flex-direction: row; } }

.hero-stats {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 480px;
  border-top: 1px solid rgba(var(--color-border), .8);
  padding-top: 2rem;
}
.hero-stat-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}
@media (min-width: 640px) { .hero-stat-value { font-size: 1.85rem; } }
.hero-stat-label {
  margin-top: .25rem;
  font-size: .75rem;
  line-height: 1.4;
  color: rgb(var(--color-text-muted));
}