/* ============================================================
   HOME — HERO
   ============================================================ */


.hero {
  position: relative;
  min-height: 130vh;
  overflow: hidden;
}

.cinematic-hero {
  position: relative;
  min-height: 620px;
  background: #17283b;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin-left: clamp(2rem, 5vw, 6.5rem);
  animation: fadeUp 1s ease forwards;
}
.eyebrow {
  color: #2d8cff;
  letter-spacing: 0.24em;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
}

.hero-content h1 {
  color: white;
  font-size: clamp(4rem, 8vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
}

.hero-content h1 span {
  color: #238cff;
}

.hero-text {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
}

.primary-btn,
.secondary-btn {
  padding: 1rem 1.8rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-btn {
  background: #238cff;
  color: white;
  border: 1px solid #238cff;
}

.secondary-btn {
  background: transparent;
  color: white;
  border: 1px solid #238cff;
}

.primary-btn:hover,
.secondary-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(35, 140, 255, 0.3);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 34, 51, 0.98) 0%, rgba(18, 34, 51, 0.82) 38%, rgba(18, 34, 51, 0.25) 100%),
    linear-gradient(180deg, rgba(18, 34, 51, 0.15), rgba(18, 34, 51, 0.65));
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  z-index: 1;
}


@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}