.hero {
  position: relative;
  background: var(--gradient-hero);
  padding-block: calc(var(--space-xl) * 1.4);
  overflow: hidden;
  isolation: isolate;
}

/* Soft decorative blobs */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: -1;
}
.hero::before {
  width: 320px;
  height: 320px;
  background: rgba(55, 161, 217, 0.18);
  top: -120px;
  right: -80px;
}
.hero::after {
  width: 260px;
  height: 260px;
  background: rgba(104, 172, 42, 0.16);
  bottom: -100px;
  left: -60px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero-text h1 { color: var(--color-navy); }

.hero-text p {
  margin-block: var(--space-sm) var(--space-lg);
  font-size: 1.15rem;
  color: var(--color-text-light);
}

.hero-ctas {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.hero-image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  height: auto;
  transition: transform var(--transition-slow);
}
.hero-image img:hover { transform: scale(1.02); }

@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-ctas { justify-content: center; }
  .hero-image { order: -1; }
}