.hero {
  position:         relative;
  min-height:       90vh;
  display:          flex;
  align-items:      center;
  background-color: var(--bg-dark);
  padding:          6rem var(--section-padding-x);
  overflow:         hidden;
}

.hero-bg {
  position:            absolute;
  inset:               -10%;
  z-index:             0;
  background-size:     cover;
  background-position: center right;
  background-repeat:   no-repeat;
  animation:           kenBurns 18s ease-in-out infinite alternate;
  will-change:         transform;
}

@keyframes kenBurns {
  0%   { transform: scale(1)    translateX(0)   translateY(0); }
  33%  { transform: scale(1.06) translateX(-1%) translateY(-1%); }
  66%  { transform: scale(1.10) translateX(1%)  translateY(-2%); }
  100% { transform: scale(1.05) translateX(-1%) translateY(1%); }
}

.hero-overlay {
  position: absolute;
  inset:    0;
  z-index:  1;
  background: linear-gradient(
    to right,
    rgba(9,32,68,0.92) 0%,
    rgba(9,32,68,0.80) 45%,
    rgba(9,32,68,0.30) 100%
  );
}

.hero .container {
  position: relative;
  z-index:  2;
}

.hero-content { max-width: 640px; }

.hero-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  background:     rgba(245,166,35,0.15);
  color:          var(--color-secondary);
  border:         1px solid rgba(245,166,35,0.35);
  border-radius:  var(--radius-full);
  padding:        var(--space-2) var(--space-4);
  font-size:      var(--text-sm);
  font-weight:    var(--font-semibold);
  letter-spacing: 0.04em;
  margin-bottom:  var(--space-6);
}

.hero h1 {
  font-size:     var(--text-6xl);
  font-weight:   var(--font-extrabold);
  color:         var(--text-white);
  line-height:   1.05;
  margin-bottom: var(--space-5);
}

.hero h1 span { color: var(--color-secondary); }

.hero-sub {
  font-size:     var(--text-lg);
  color:         rgba(255,255,255,0.80);
  line-height:   var(--leading-relaxed);
  margin-bottom: var(--space-8);
  max-width:     520px;
}

.hero-btns {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-3);
  margin-bottom: var(--space-8);
}

.hero-info-pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-3);
}

.hero-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  background:     rgba(255,255,255,0.08);
  border:         1px solid rgba(255,255,255,0.15);
  border-radius:  var(--radius-full);
  padding:        var(--space-2) var(--space-4);
  font-size:      var(--text-sm);
  color:          rgba(255,255,255,0.85);
  backdrop-filter:blur(4px);
}

.hero-pill svg { color: var(--color-accent); flex-shrink: 0; }

@media (max-width: 768px) {
  .hero {
    min-height:          80vh;
    padding:             4rem var(--section-padding-x) 3rem;
  }
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(9,32,68,0.90) 0%,
      rgba(9,32,68,0.75) 100%
    );
  }
  .hero h1        { font-size: var(--text-4xl); }
  .hero-sub       { font-size: var(--text-base); }
  .hero-btns .btn { flex: 1; min-width: 140px; justify-content: center; }
  .hero-pill      { font-size: var(--text-xs); }
}

@media (max-width: 480px) {
  .hero h1        { font-size: var(--text-3xl); }
  .hero-btns .btn { width: 100%; }
}