/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position:    relative;
  background:  var(--gradient-dark);
  color:       #fff;
  min-height:  100vh;
  min-height:  100svh;
  display:     flex;
  align-items: center;
  padding:     96px 0 100px;
  overflow:    hidden;
}

.hero-inner {
  width:       90%;
  max-width:   1920px;
  margin:      0 auto;
  display:     flex;
  flex-wrap:   wrap;
  gap:         48px;
  align-items: center;
}

.hero-inner > div:first-child { flex: 1.2 1 420px; }
.hero-image-wrap              { flex: 0.8 1 280px; }

.hero-eyebrow {
  display:        inline-block;
  background:     rgba(224,123,84,.18);
  color:          var(--orange);
  font-weight:    600;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding:        6px 14px;
  border-radius:  10px;
  margin-bottom:  18px;
}

.hero h1 {
  font-size:     2.5rem;
  font-weight:   800;
  line-height:   1.2;
  margin-bottom: 18px;
}

.hero h1 span {
  background:              linear-gradient(135deg, var(--teal) 0%, #8FE3E0 100%);
  -webkit-background-clip: text;
  background-clip:         text;
  color:                   transparent;
}

.hero p.lead {
  font-size:     1.1rem;
  color:         #D8E4E2;
  margin-bottom: 28px;
  max-width:     540px;
}

.hero-ctas {
  display:       flex;
  gap:           14px;
  flex-wrap:     wrap;
  margin-bottom: 30px;
}

.btn-primary {
  background:    linear-gradient(135deg, var(--orange) 0%, var(--orange-dk) 100%);
  color:         #fff;
  padding:       15px 30px;
  border-radius: 10px;
  font-weight:   700;
  font-size:     1rem;
  display:       inline-block;
  transition:    transform .15s, box-shadow .15s;
}

.btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 10px 24px rgba(224,123,84,.35);
}

.btn-secondary {
  background:    transparent;
  color:         #fff;
  padding:       15px 30px;
  border:        2px solid rgba(255,255,255,.35);
  border-radius: 10px;
  font-weight:   700;
  font-size:     1rem;
  display:       inline-block;
  transition:    border-color .15s;
}

.btn-secondary:hover { border-color: var(--teal); }

.hero-tags {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}

.hero-tag {
  background:      rgba(58,171,170,.12);
  border:          1px solid rgba(58,171,170,.35);
  padding:         8px 14px;
  border-radius:   10px;
  font-weight:     500;
  color:           #BFE8E6;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:      border-color .15s, background .15s;
}

.hero-tag:hover {
  border-color: var(--teal);
  background:   rgba(58,171,170,.2);
}

.hero-image-wrap {
  display:         flex;
  justify-content: center;
}

.hero-image-wrap img {
  width:         100%;
  max-width:     520px;
  aspect-ratio:  4 / 3;
  object-fit:    cover;
  border-radius: 18px;
  box-shadow:    0 24px 60px rgba(0,0,0,.4);
  display:       block;
}