/* ============ HERO ============ */
.s-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  min-height:100vh;
  min-height:100svh;
  padding-block:calc(var(--header-h, 72px) + 72px) 104px;
  padding-inline:clamp(16px, 5vw, 40px);
  overflow:hidden;
  background-color:var(--c-primary);
  color:var(--c-text);
  text-align:center;
}

/* الخلفية */
.s-hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.s-hero__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
  filter:brightness(.9) contrast(1.04);
  transform:scale(1.05);
  animation:heroZoom 22s ease-out both;
}

/* تعتيم أقوى لضمان وضوح النص فوق الصورة */
.s-hero__overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(110% 88% at 50% 44%,
      color-mix(in srgb, var(--c-primary) 68%, transparent) 0%,
      color-mix(in srgb, var(--c-primary) 84%, transparent) 58%,
      color-mix(in srgb, var(--c-primary) 97%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--c-primary) 76%, transparent) 0%,
      color-mix(in srgb, var(--c-primary) 80%, transparent) 46%,
      var(--c-primary) 100%);
}

/* المحتوى */
.s-hero__content{
  position:relative;
  z-index:2;
  max-width:840px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* هالة تعتيم ناعمة خلف كتلة النص لفصلها عن تفاصيل الصورة */
.s-hero__content::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset-block:-9% -12%;
  inset-inline:-16%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--c-primary) 72%, transparent) 0%,
    color-mix(in srgb, var(--c-primary) 46%, transparent) 56%,
    transparent 100%);
  filter:blur(26px);
}

.s-hero__eyebrow{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(.7rem, 1.5vw, .82rem);
  font-weight:700;
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  color:var(--c-accent);
  text-shadow:0 1px 14px color-mix(in srgb, var(--c-primary) 92%, transparent);
}

.s-hero__rule{
  display:block;
  width:76px;
  height:1px;
  margin-block:22px 26px;
  background:linear-gradient(to right,
    transparent 0%,
    var(--c-secondary) 25%,
    var(--c-accent) 50%,
    var(--c-secondary) 75%,
    transparent 100%);
}

.s-hero__title{
  margin:0;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(2rem, 5.4vw, 4.15rem);
  line-height:1.18;
  letter-spacing:-.012em;
  color:var(--c-text);
  text-wrap:balance;
  max-width:20ch;
  text-shadow:
    0 2px 34px color-mix(in srgb, var(--c-primary) 88%, transparent),
    0 1px 4px color-mix(in srgb, var(--c-primary) 75%, transparent);
}

.s-hero__text{
  margin:26px 0 0;
  max-width:60ch;
  font-family:var(--font-body);
  font-size:clamp(.98rem, 1.6vw, 1.14rem);
  line-height:1.85;
  color:color-mix(in srgb, var(--c-text) 94%, transparent);
  text-shadow:
    0 1px 20px color-mix(in srgb, var(--c-primary) 85%, transparent),
    0 1px 3px color-mix(in srgb, var(--c-primary) 70%, transparent);
}

/* الأزرار */
.s-hero__actions{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}

.s-hero .s-hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding-inline:34px;
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.04em;
  border-radius:var(--radius);
  text-decoration:none;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.s-hero .btn-accent{
  background:var(--c-secondary);
  border:1px solid var(--c-secondary);
  color:var(--c-primary);
}
.s-hero .btn-accent:hover{
  background:var(--c-accent);
  border-color:var(--c-accent);
  transform:translateY(-2px);
}

.s-hero .s-hero__btn--ghost{
  background:color-mix(in srgb, var(--c-primary) 42%, transparent);
  border:1px solid color-mix(in srgb, var(--c-text) 55%, transparent);
  color:var(--c-text);
}
.s-hero .s-hero__btn--ghost:hover{
  background:color-mix(in srgb, var(--c-text) 14%, transparent);
  border-color:var(--c-secondary);
  color:var(--c-accent);
  transform:translateY(-2px);
}

.s-hero .s-hero__btn:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:3px;
}

/* مؤشر التمرير */
.s-hero__scroll{
  position:absolute;
  inset-inline:0;
  bottom:26px;
  z-index:2;
  display:flex;
  justify-content:center;
  color:color-mix(in srgb, var(--c-secondary) 85%, transparent);
  animation:heroBounce 2.6s ease-in-out infinite;
}

/* الحركة */
@keyframes heroZoom{
  from{transform:scale(1.12)}
  to{transform:scale(1.02)}
}
@keyframes heroFade{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
@keyframes heroBounce{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(7px);opacity:1}
}

.s-hero__eyebrow,
.s-hero__rule,
.s-hero__title,
.s-hero__text,
.s-hero__actions{
  animation:heroFade .95s cubic-bezier(.22,.61,.36,1) both;
}
.s-hero__eyebrow{animation-delay:.08s}
.s-hero__rule{animation-delay:.18s}
.s-hero__title{animation-delay:.26s}
.s-hero__text{animation-delay:.38s}
.s-hero__actions{animation-delay:.5s}

/* ============ استجابة ============ */
@media (max-width:900px){
  .s-hero{
    padding-block:calc(var(--header-h, 72px) + 56px) 88px;
  }
  .s-hero__title{max-width:22ch}
  .s-hero__text{max-width:52ch}
  .s-hero__actions{margin-top:34px}
  .s-hero__content::before{inset-block:-7% -9%;inset-inline:-12%}
}

@media (max-width:600px){
  .s-hero{
    min-height:92vh;
    min-height:92svh;
    padding-block:calc(var(--header-h, 64px) + 44px) 76px;
  }
  .s-hero__overlay{
    background:
      radial-gradient(120% 92% at 50% 46%,
        color-mix(in srgb, var(--c-primary) 74%, transparent) 0%,
        color-mix(in srgb, var(--c-primary) 88%, transparent) 62%,
        var(--c-primary) 100%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--c-primary) 82%, transparent) 0%,
        color-mix(in srgb, var(--c-primary) 86%, transparent) 48%,
        var(--c-primary) 100%);
  }
  .s-hero__content::before{inset-block:-6% -8%;inset-inline:-9%;filter:blur(20px)}
  .s-hero__eyebrow{
    font-size:.68rem;
    letter-spacing:.24em;
    text-indent:.24em;
  }
  .s-hero__rule{width:60px;margin-block:18px 20px}
  .s-hero__title{font-size:clamp(1.75rem, 8.2vw, 2.4rem);line-height:1.25}
  .s-hero__text{margin-top:20px;line-height:1.8}
  .s-hero__actions{margin-top:28px;gap:12px;width:100%}
  .s-hero .s-hero__btn{flex:1 1 100%;padding-inline:20px}
  .s-hero__scroll{display:none}
}

@media (prefers-reduced-motion:reduce){
  .s-hero__media img,
  .s-hero__scroll,
  .s-hero__eyebrow,
  .s-hero__rule,
  .s-hero__title,
  .s-hero__text,
  .s-hero__actions{
    animation:none !important;
    transform:none !important;
  }
  .s-hero .s-hero__btn{transition:none}
}