.aja-hero {
  --aja-primary: #123d32;
  --aja-accent: #c9a55c;
  --aja-green: #1f6b54;
  --aja-light-text: #e4ece8;
  --aja-font-display: "Alexandria", "Tajawal", sans-serif;
  --aja-font-body: "Tajawal", sans-serif;
  --aja-content-width: 820px;
  --aja-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  display: flex;
  width: 100%;
  height: calc(100svh - 106px);
  min-height: 650px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #102f27;
  font-family: var(--aja-font-body);
  text-align: center;
}

.aja-hero *, .aja-hero *::before, .aja-hero *::after { box-sizing: border-box; }
.aja-hero__background { position: absolute; z-index: -3; inset: -2%; background-position: center; background-size: cover; transform: scale(1.03); transition: transform 2s var(--aja-ease); }
.aja-hero.is-ready .aja-hero__background { transform: scale(1); }
.aja-hero__shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(12,38,31,.45), rgba(12,38,31,.70), rgba(12,38,31,.38)); }
.aja-hero__light { display: none; }
.aja-hero__content { position: relative; z-index: 2; width: min(var(--aja-content-width), calc(100% - 40px)); margin: 0 auto; }
.aja-hero__eyebrow { margin: 0 0 18px; color: #eee6d4; font-family: var(--aja-font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.6; letter-spacing: 0; }
.aja-hero__title { margin: 0 0 14px; color: #fff; font-family: var(--aja-font-display); font-size: clamp(2rem, 3.5vw, 3.75rem); font-weight: 500; line-height: 1.5; }
.aja-hero__title span, .aja-hero__title strong { display: block; font: inherit; }
.aja-hero__title strong { margin-top: 2px; color: #d5b66f; font-size: .72em; }
.aja-hero__description { max-width: 680px; margin: 0 auto 25px; color: #e1e9e6; font-size: 1rem; line-height: 1.9; }
.aja-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.aja-hero__button { display: inline-flex; min-height: 50px; padding: 10px 22px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; color: #fff; font-size: .84rem; font-weight: 700; line-height: 1.4; text-decoration: none; transition: background-color .25s, color .25s, border-color .25s, transform .25s; }
.aja-hero__button:hover { transform: translateY(-2px); }
.aja-hero__button--primary { background: var(--aja-green); }
.aja-hero__button--primary:hover { color: #fff; background: var(--aja-primary); }
.aja-hero__button--secondary { border-color: rgba(255,255,255,.60); background: rgba(255,255,255,.12); }
.aja-hero__button--secondary:hover { color: var(--aja-primary); background: #fff; }
.aja-hero__scroll { position: absolute; z-index: 2; bottom: 12px; left: 50%; width: 26px; height: 40px; border: 1px solid rgba(255,255,255,.5); border-radius: 20px; transform: translateX(-50%); }
.aja-hero__scroll i { display: block; width: 3px; height: 7px; margin: 8px auto; border-radius: 3px; background: var(--aja-accent); animation: aja-down 1.8s infinite; }
.aja-hero__reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--aja-ease), transform .75s var(--aja-ease); }
.aja-hero.is-ready .aja-hero__reveal { opacity: 1; transform: none; }
.aja-hero.is-ready .aja-hero__title { transition-delay: .1s; }
.aja-hero.is-ready .aja-hero__description { transition-delay: .2s; }
.aja-hero.is-ready .aja-hero__actions { transition-delay: .3s; }

@keyframes aja-down { 50% { opacity: .25; transform: translateY(12px); } }

@media (max-width: 600px) {
  .aja-hero { height: calc(100svh - 82px); min-height: 680px; padding: 40px 18px; }
  .aja-hero__background { background-position: 32% center; }
  .aja-hero__content { width: 100%; }
  .aja-hero__eyebrow { font-size: 1rem; }
  .aja-hero__title { font-size: 2.55rem; line-height: 1.45; }
  .aja-hero__description { font-size: .92rem; line-height: 1.8; }
  .aja-hero__actions { align-items: stretch; flex-direction: column; }
  .aja-hero__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .aja-hero *, .aja-hero *::before, .aja-hero *::after { animation: none !important; transition: none !important; }
  .aja-hero__background, .aja-hero__reveal { opacity: 1; transform: none; }
}