/* Upgrade 171 — Home hero visual consistency
   Reworks the home hero from a bright split panel into the same dark,
   photo-led navy hero language used by Careers, Certificates, Services,
   and project pages while preserving the SESCCO sphere feature. */

.hero-home {
  min-height: 705px !important;
  background: #071b36 !important;
  color: #fff !important;
  isolation: isolate !important;
}

.hero-home .hero-visual-layer {
  opacity: 1 !important;
  z-index: 0 !important;
}

.hero-home .hero-visual-photo {
  inset: 0 !important;
  width: 100% !important;
  right: 0 !important;
  left: 0 !important;
  opacity: .92 !important;
  background-size: cover !important;
  background-position: center right !important;
  filter: saturate(1.04) contrast(1.08) brightness(.74) !important;
}

.hero-home .hero-visual-photo::before {
  background:
    linear-gradient(90deg,
      rgba(4, 18, 38, .96) 0%,
      rgba(4, 22, 48, .91) 29%,
      rgba(6, 32, 67, .72) 48%,
      rgba(7, 42, 88, .54) 66%,
      rgba(5, 25, 55, .70) 100%),
    linear-gradient(180deg,
      rgba(3, 17, 36, .32) 0%,
      rgba(3, 17, 36, .04) 45%,
      rgba(3, 17, 36, .32) 100%) !important;
  opacity: 1 !important;
}

.hero-home .hero-visual-photo::after {
  background:
    radial-gradient(circle at 74% 50%, rgba(255,255,255,.14), transparent 25%),
    radial-gradient(circle at 32% 42%, rgba(7, 88, 216, .20), transparent 35%),
    linear-gradient(90deg,
      rgba(7, 88, 216, .10) 0%,
      rgba(0, 166, 223, .07) 52%,
      rgba(3, 17, 36, .42) 100%) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.hero-home::before {
  background:
    linear-gradient(90deg,
      rgba(3, 15, 33, .18) 0%,
      rgba(3, 15, 33, .06) 34%,
      rgba(255,255,255,.04) 54%,
      rgba(3, 15, 33, .16) 100%),
    radial-gradient(circle at 73% 50%, rgba(255,255,255,.16), transparent 27%) !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

.hero-home .hero-inner {
  position: relative !important;
  z-index: 2 !important;
}

.hero-home .hero-content {
  color: #fff !important;
  max-width: 720px !important;
  text-shadow: 0 16px 38px rgba(0, 0, 0, .24) !important;
}

.hero-home .hero-kicker {
  color: #bcd8ff !important;
  text-shadow: none !important;
}

.hero-home h1,
.hero-home p {
  color: #fff !important;
}

.hero-home p {
  color: rgba(255,255,255,.88) !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}

.hero-home .btn-outline {
  background: rgba(255,255,255,.94) !important;
  color: var(--primary) !important;
  border-color: rgba(255,255,255,.58) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
}

.hero-home .btn-primary {
  box-shadow: 0 16px 36px rgba(0,0,0,.22) !important;
}

.hero-home .hero-side-grid {
  opacity: .18 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px) !important;
}

.hero-home .hero-side-glow {
  opacity: .48 !important;
}

.hero-home .hero-trust-sphere-exact {
  filter: saturate(1.04) contrast(1.03) drop-shadow(0 34px 70px rgba(0,0,0,.30)) !important;
}

.hero-home .hero-trust-strip,
.hero-home + .hero-trust-strip,
.home-hero-trust-strip {
  position: relative;
  z-index: 5;
}

/* Arabic/RTL keeps the photo-led dark language with mirrored readability gradient. */
html[dir="rtl"] .hero-home,
html[lang="ar"] .hero-home {
  background: #071b36 !important;
}

html[dir="rtl"] .hero-home .hero-visual-photo,
html[lang="ar"] .hero-home .hero-visual-photo {
  inset: 0 !important;
  width: 100% !important;
  background-position: center left !important;
}

html[dir="rtl"] .hero-home .hero-visual-photo::before,
html[lang="ar"] .hero-home .hero-visual-photo::before {
  background:
    linear-gradient(270deg,
      rgba(4, 18, 38, .96) 0%,
      rgba(4, 22, 48, .91) 29%,
      rgba(6, 32, 67, .72) 48%,
      rgba(7, 42, 88, .54) 66%,
      rgba(5, 25, 55, .70) 100%),
    linear-gradient(180deg,
      rgba(3, 17, 36, .32) 0%,
      rgba(3, 17, 36, .04) 45%,
      rgba(3, 17, 36, .32) 100%) !important;
}

html[dir="rtl"] .hero-home .hero-visual-photo::after,
html[lang="ar"] .hero-home .hero-visual-photo::after {
  background:
    radial-gradient(circle at 26% 50%, rgba(255,255,255,.14), transparent 25%),
    radial-gradient(circle at 68% 42%, rgba(7, 88, 216, .20), transparent 35%),
    linear-gradient(270deg,
      rgba(7, 88, 216, .10) 0%,
      rgba(0, 166, 223, .07) 52%,
      rgba(3, 17, 36, .42) 100%) !important;
}

html[dir="rtl"] .hero-home::before,
html[lang="ar"] .hero-home::before {
  background:
    linear-gradient(270deg,
      rgba(3, 15, 33, .18) 0%,
      rgba(3, 15, 33, .06) 34%,
      rgba(255,255,255,.04) 54%,
      rgba(3, 15, 33, .16) 100%),
    radial-gradient(circle at 27% 50%, rgba(255,255,255,.16), transparent 27%) !important;
}

@media (max-width: 1180px) {
  .hero-home .hero-visual-photo {
    opacity: .82 !important;
  }

  .hero-home .hero-visual-photo::before {
    background:
      linear-gradient(90deg,
        rgba(4,18,38,.97) 0%,
        rgba(4,22,48,.92) 38%,
        rgba(5,25,55,.76) 100%) !important;
  }
}

@media (max-width: 980px) {
  .hero-home {
    min-height: auto !important;
  }

  .hero-home .hero-visual-photo {
    width: 100% !important;
    opacity: .70 !important;
  }

  .hero-home .hero-visual-photo::before {
    background: linear-gradient(180deg,
      rgba(4,18,38,.94) 0%,
      rgba(4,22,48,.88) 48%,
      rgba(5,25,55,.94) 100%) !important;
  }

  .hero-home .hero-content {
    text-align: center !important;
    margin-inline: auto !important;
  }

  .hero-home .hero-actions {
    justify-content: center !important;
  }
}