/* ==========================================================================
   Venaqi — Hero (fond sombre)
   ========================================================================== */

.hero {
  position: relative;
  background: var(--color-hero-bg);
  color: var(--color-hero-text);
  padding-top: 120px;
  padding-bottom: 120px;
  overflow: hidden;
}

/* Halo vert discret en arrière-plan */
.hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -160px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(22, 147, 133, .28) 0%, rgba(22, 147, 133, 0) 68%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -260px;
  left: -180px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(22, 147, 133, .14) 0%, rgba(22, 147, 133, 0) 70%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; max-width: 860px; }
.hero--center .hero__inner { margin: 0 auto; text-align: center; }

.hero__eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(22, 147, 133, .16);
  border: 1px solid rgba(22, 147, 133, .4);
  border-radius: 100px;
}

.hero__title {
  color: #fff;
  font-size: 60px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.hero__title .accent { color: var(--color-primary); }

.hero__subtitle {
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  max-width: 720px;
  margin: 0 0 36px;
}
.hero--center .hero__subtitle { margin-left: auto; margin-right: auto; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero--center .hero__actions { justify-content: center; }

@media (max-width: 768px) {
  .hero { padding-top: 80px; padding-bottom: 80px; }
  .hero__title { font-size: 40px; }
  .hero__subtitle { font-size: 18px; }
}
@media (max-width: 420px) {
  .hero__title { font-size: 33px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}