.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--site-spacing-2xl);
  padding-bottom: var(--site-spacing-2xl);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--site-color-primary) 24%, transparent), transparent 55%),
    radial-gradient(circle at 85% 110%, color-mix(in srgb, var(--site-color-accent) 22%, transparent), transparent 60%);
  opacity: 0.55;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--site-spacing-xl);
  align-items: center;
  grid-template-columns: 1fr;
}

.hero__content { display: grid; gap: var(--site-spacing-md); max-width: 60ch; }

.hero__eyebrow {
  display: inline-flex;
  align-self: start;
  padding: 0.25rem 0.75rem;
  font-size: var(--site-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-color-primary);
  background: color-mix(in srgb, var(--site-color-primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--site-color-primary) 40%, transparent);
  border-radius: var(--site-radius-full);
  margin: 0;
}

.hero__title {
  font-size: var(--site-text-4xl);
  line-height: var(--site-line-tight);
  letter-spacing: -0.02em;
}

.hero__subtitle {
  font-size: var(--site-text-lg);
  color: var(--site-color-text-muted);
  max-width: 58ch;
  line-height: var(--site-line-normal);
  margin: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-spacing-sm);
  margin-top: var(--site-spacing-sm);
}

.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__image {
  width: min(100%, 320px);
  height: auto;
  border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow-lg);
}

@media (min-width: 768px) {
  .hero { padding-top: var(--site-spacing-3xl); padding-bottom: var(--site-spacing-3xl); }
  .hero__inner { grid-template-columns: 1.4fr 1fr; }
  .hero__image { width: min(100%, 420px); }
}