.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(140deg, #0f1c2e, #1a3a5c 70%);
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-overlay {
  position: relative;
  z-index: 2;
  width: var(--container);
  color: var(--clr-white);
}

.hero-text {
  max-width: 760px;
}

.hero-title {
  font-family: var(--font-en-display);
  font-size: clamp(2rem, 8vw, 4.7rem);
  margin-bottom: .5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: 1s ease;
}

.hero-title.show {
  opacity: 1;
  transform: translateY(0);
}

.hero-ar {
  font-family: var(--font-ar);
  font-size: clamp(1.25rem, 3.2vw, 2.2rem);
  margin-bottom: .5rem;
}

.hero-tagline {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgba(255,255,255,.9);
  min-height: 1.7em;
}

.hero-actions {
  margin-top: 1.4rem;
  display: flex;
  gap: .8rem;
  transform: translateY(24px);
  opacity: 0;
  transition: 0.8s ease;
}

.hero-actions.show {
  opacity: 1;
  transform: translateY(0);
}

.scroll-indicator {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--clr-white);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  opacity: .8;
  animation: bounce 1.6s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -7px); }
}

@media (max-width: 768px) {
  #hero-canvas {
    display: none;
  }

  .hero {
    min-height: 76vh;
  }

  .hero-actions {
    flex-wrap: wrap;
  }
}