/* ==========================================================================
   Home / Hero — مبني حرفياً من عقدة Figma رقم 31:13525
   الإطار 1440×810 · الحاوية حشو 0/144/215/144 · فجوات 24/32/40/16
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  block-size: 810px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  font-family: var(--aac-font);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
/* التعتيم: تدرّج شعاعي #161C24 بشفافية 0.24 ← 0.80 عند 68.8% ← 1 */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 62% 38%,
    rgba(22,28,36,0.24) 0%, rgba(22,28,36,0.80) 68.8%, rgba(22,28,36,1) 100%);
}
.hero__inner {
  inline-size: 100%;
  max-inline-size: var(--design-w);
  margin-inline: auto;
  padding: 0 var(--design-gutter) 215px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.hero__titles { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__h1 {
  margin: 0; color: #FFF; text-align: start;
  font-size: var(--t-8xl); line-height: var(--lh-8xl); font-weight: 700;
}
.hero__h2 {
  margin: 0; font-size: var(--t-6xl); line-height: var(--lh-6xl); font-weight: 700;
  background-image: linear-gradient(90deg, var(--a-300) 0%, var(--p-300) 50%, var(--p-500) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--p-300);
}
[dir="rtl"] .hero__h2 { background-image: linear-gradient(-90deg, var(--a-300) 0%, var(--p-300) 50%, var(--p-500) 100%); }
.hero__lead {
  margin: 0; color: #FFF; max-inline-size: 1132px;
  font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 400;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 281px; padding: 14px 28px; border-radius: 8px;
  font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: 600;
  color: #FFF; text-decoration: none; transition: filter .18s ease, background-color .18s ease, color .18s ease;
}
.hero__btn--fill { background-image: linear-gradient(135deg, var(--p-500) 0%, var(--p-300) 100%); }
.hero__btn--fill:hover { filter: brightness(1.12); }
.hero__btn--ghost { border: 2px solid #FFF; }
.hero__btn--ghost:hover { background-color: #FFF; color: var(--p-950); }

@media (max-width: 90rem) {
  .hero__inner { padding-inline: clamp(1.25rem, -1rem + 10vw, 144px); }
}
@media (max-width: 64rem) {
  .hero { block-size: auto; min-block-size: 620px; padding-block: 96px 0; }
  .hero__h1 { font-size: clamp(2.5rem, 1rem + 7vw, 96px); }
  .hero__h2 { font-size: clamp(1.75rem, 0.8rem + 4.4vw, 60px); }
  .hero__inner { padding-bottom: 96px; }
  .hero__lead { font-size: 18px; }
  .hero__btn { min-inline-size: 0; font-size: 18px; flex: 1 1 220px; }
}