/* ── Hero ─────────────────────────────────────────────── */
.hero {
  padding-top: 120px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

/* Animated gradient mesh — blob 1 */
.hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    oklch(74% 0.2 45 / 28%) 0%,
    oklch(70% 0.24 20 / 16%) 40%,
    transparent 70%
  );
  pointer-events: none;
  filter: blur(60px);
  animation: meshFloat1 12s ease-in-out infinite;
}

/* Animated gradient mesh — blob 2 */
.hero::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    oklch(68% 0.22 350 / 22%) 0%,
    oklch(80% 0.17 85 / 12%) 40%,
    transparent 70%
  );
  pointer-events: none;
  filter: blur(50px);
  animation: meshFloat2 10s ease-in-out infinite;
}

:root.light .hero::before {
  background: radial-gradient(
    circle,
    oklch(58% 0.22 45 / 12%) 0%,
    oklch(55% 0.24 20 / 6%) 40%,
    transparent 70%
  );
}

:root.light .hero::after {
  background: radial-gradient(
    circle,
    oklch(52% 0.22 350 / 10%) 0%,
    oklch(65% 0.18 85 / 5%) 40%,
    transparent 70%
  );
}

.hero-title {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  max-width: 720px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  animation: fadeInUp 0.8s var(--ease-out-expo) both;
}

.hero-subtitle {
  font-size: 17px;
  color: oklch(75% 0.02 270);
  margin-top: 20px;
  max-width: 600px;
  line-height: 1.8;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.1s both;
}

:root.light .hero-subtitle {
  color: oklch(40% 0.028 270);
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.2s both;
}
