:root {
  --primary-purple: #5e239d;
  --primary-pink:   #b70468;
  --hero-bg: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-pink) 100%);
  --hero-padding-desktop: 70px 20px 60px;
  --hero-padding-mobile: 55px 16px 45px;
}


.hero-section {
  background: var(--hero-bg) !important;
  color: white !important;
  padding: var(--hero-padding-desktop) !important;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}



.hero-section > .container,
.hero-section > div {
  width: 100%;
}

.hero-section h1,
.hero-section h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.hero-section h1,
.hero-section h2,
.hero-section p {
  text-align: center !important;
}

.hero-section h1 {
  font-size: 3rem !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

.hero-section h2 {
  font-size: 2rem !important;
  font-weight: 600 !important;
  margin-bottom: 25px !important;
  opacity: 0.95 !important;
}

.hero-section p {
  font-size: 1.3rem !important;
  max-width: 800px !important;
  margin: 0 auto 30px !important;
  opacity: 0.95 !important;
}



/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-section {
    padding: var(--hero-padding-mobile) !important;
    min-height: 260px;
  }
  .hero-section h1 {
    font-size: 2rem !important;
  }
  .hero-section h2 {
    font-size: 1.5rem !important;
  }
  .hero-section p {
    font-size: 1.1rem !important;
  }

  .company-header {
    padding: var(--hero-padding-mobile) !important;
  }
  .company-header h1 {
    font-size: 1.8rem !important;
  }
  .company-header p {
    font-size: 1rem !important;
  }
}