/* ═══════════════════════════════════════════════════════════════════════════
   سمة أورورا — موقع الرائد للحلول البرمجية
   بطل داكن يذوب إلى أقسام فاتحة، وكائنات ملوّنة تتنقّل بينها وتتحوّل مع التمرير.
   كل الحركة تحترم prefers-reduced-motion في آخر الملف.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── الرموز ───────────────────────────────────────────────────────────────── */
:root {
  --dark:        #070b18;
  --dark-2:      #0d1428;
  --dark-line:   #1d2748;
  --dark-ink:    #eef1fb;
  --dark-dim:    #94a1c8;

  --light:       #f5f6fa;
  --light-2:     #ffffff;
  --light-line:  #e3e6f0;
  --ink:         #111832;
  --dim:         #5b678c;

  --brand:       #5b6cff;
  --brand-2:     #2ad0c8;
  --brand-3:     #ff8a5b;
  --gold:        #ffb648;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --r-xl: 34px;

  --wrap: 1180px;
  --gut:  20px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 72px;
}

/* ── الأساس ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Lenis يتولّى التمرير الناعم؛ لا نجمع بينه وبين smooth الأصلي فيتعارضان */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--dark-ink);
  font-family: 'Tajawal', system-ui, 'Segoe UI', Tahoma, sans-serif;
  font-size: 17px;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
button, input, textarea, select { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.sr, .skip:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 999;
  background: var(--brand); color: #fff; padding: 10px 18px; border-radius: var(--r-sm);
}

:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 4px; }

/* ── طبقة الكائنات المتنقّلة ──────────────────────────────────────────────── */
.stage {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; contain: strict;
}

.orb {
  position: absolute;
  display: block;
  width: 46vmin; height: 46vmin;
  /* الشكل يتحوّل بتحريك نصف القطر لا بتبديل مسار SVG — أنعم وأرخص */
  border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%;
  filter: blur(46px);
  opacity: .55;
  will-change: transform, border-radius, opacity;
  transform: translate3d(0,0,0);
}
.orb-1 { background: radial-gradient(circle at 30% 30%, var(--brand)   0%, transparent 70%); inset-block-start: -8vmin;  inset-inline-start: -6vmin; }
.orb-2 { background: radial-gradient(circle at 70% 40%, var(--brand-2) 0%, transparent 70%); inset-block-start: 22vmin;  inset-inline-end: -12vmin; }
.orb-3 { background: radial-gradient(circle at 40% 70%, var(--brand-3) 0%, transparent 70%); inset-block-end: -14vmin;   inset-inline-start: 18vmin; }
.orb-4 { background: radial-gradient(circle at 60% 30%, var(--gold)    0%, transparent 70%); inset-block-start: 46vmin;  inset-inline-start: 42vmin; width: 30vmin; height: 30vmin; opacity: .38; }

.grid-lines {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(to left,  rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 55% at 50% 30%, #000 0%, transparent 100%);
  transition: opacity .6s var(--ease);
}
/* على الخلفية الفاتحة تُطفأ الشبكة ويهدأ توهّج الكائنات */
body.is-light .grid-lines { opacity: 0; }
body.is-light .orb { opacity: .34; filter: blur(60px); }

main, .nav, .foot { position: relative; z-index: 1; }

/* ── الشريط العلوي ────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
  height: var(--nav-h);
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-block-end: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7,11,24,.72);
  backdrop-filter: saturate(150%) blur(14px);
  border-block-end-color: var(--dark-line);
}
body.is-light .nav.is-stuck {
  background: rgba(255,255,255,.82);
  border-block-end-color: var(--light-line);
  color: var(--ink);
}

.nav-in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  height: 100%; display: flex; align-items: center; gap: 22px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; }
.brand-mark {
  inline-size: 30px; block-size: 30px; display: grid; place-items: center;
  border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 6px 18px rgba(91,108,255,.38);
}
.brand-mark span { inline-size: 10px; block-size: 10px; border-radius: 3px; background: #fff; }
.brand-text { font-size: 17px; white-space: nowrap; }

.nav-links { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.nav-links > a {
  padding: 8px 13px; border-radius: 999px; font-size: 15.5px; font-weight: 500;
  color: var(--dark-dim); transition: color .25s, background .25s;
}
.nav-links > a:hover { color: var(--dark-ink); background: rgba(255,255,255,.07); }
.nav-links > a[aria-current="page"] { color: var(--dark-ink); background: rgba(255,255,255,.1); }
body.is-light .nav.is-stuck .nav-links > a { color: var(--dim); }
body.is-light .nav.is-stuck .nav-links > a:hover,
body.is-light .nav.is-stuck .nav-links > a[aria-current="page"] { color: var(--ink); background: rgba(17,24,50,.06); }

.nav-cta {
  margin-inline-start: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff !important; font-weight: 700;
  box-shadow: 0 8px 22px rgba(91,108,255,.35);
}
.nav-cta:hover { background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important; filter: brightness(1.08); }

.burger {
  display: none; margin-inline-start: auto;
  inline-size: 42px; block-size: 42px; border: 0; background: transparent;
  cursor: pointer; padding: 10px; gap: 5px; flex-direction: column; justify-content: center;
}
.burger span { display: block; block-size: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── الأزرار ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 28px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 16px; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  box-shadow: 0 12px 30px rgba(91,108,255,.34);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(91,108,255,.44); }
.btn-ghost { border-color: rgba(255,255,255,.22); color: var(--dark-ink); background: rgba(255,255,255,.04); }
.btn-ghost:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); }
.sec .btn-ghost, .foot-info .btn-ghost { border-color: var(--light-line); color: var(--ink); background: transparent; }
.sec .btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: rgba(91,108,255,.06); }

/* ── البطل ────────────────────────────────────────────────────────────────── */
.hero {
  min-block-size: 100svh; display: flex; align-items: center;
  padding-block: calc(var(--nav-h) + 40px) 80px;
  position: relative;
}
.hero-in { text-align: center; }

.ticker {
  display: inline-flex; align-items: center; gap: 10px; margin-block-end: 26px;
  padding: 7px 16px 7px 12px; border-radius: 999px; font-size: 14.5px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: var(--dark-dim);
}
.ticker em { font-style: normal; color: var(--dark-ink); }
.ticker-dot {
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--brand-2);
  box-shadow: 0 0 0 0 rgba(42,208,200,.6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 11px rgba(42,208,200,0); }
  100% { box-shadow: 0 0 0 0   rgba(42,208,200,0); }
}

.hero-title {
  font-size: clamp(38px, 8.4vw, 86px);
  line-height: 1.12; margin-block-end: 20px;
  background: linear-gradient(180deg, #fff 30%, #a9b6e8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* SplitText يقسم العنوان كلماتٍ ويحرّكها، والتحويل على ابن عنصرٍ متدرّجِ الطلاء
   ينشئ سياق طلاء جديداً فيبقى الابن شفافاً بلا تدرّج — أي عنوان يختفي تماماً.
   إعادة التدرّج إلى كل كلمة تحلّها، والمظهر واحد لأن التدرّج رأسي. */
.hero-title .hw {
  background-image: linear-gradient(180deg, #fff 30%, #a9b6e8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-lead {
  font-size: clamp(17px, 2.3vw, 21px); color: var(--dark-dim);
  max-inline-size: 62ch; margin-inline: auto; margin-block-end: 34px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.scroll-hint {
  margin-block-start: 60px; color: var(--dark-dim); font-size: 14px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint .arrow {
  inline-size: 1px; block-size: 46px;
  background: linear-gradient(to bottom, var(--brand-2), transparent);
  animation: drop 1.9s var(--ease) infinite;
}
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── شريط الأرقام: جسر بين الداكن والفاتح ─────────────────────────────────── */
.stats {
  padding-block: 54px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.045));
  border-block-start: 1px solid var(--dark-line);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.stats-grid li { padding: 14px 8px; }
.stats-grid .num {
  display: block; font-size: clamp(30px, 5.4vw, 50px); font-weight: 800; line-height: 1.1;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.stats-grid span { color: var(--dark-dim); font-size: 15px; }

/* ── الأقسام الفاتحة ──────────────────────────────────────────────────────── */
.sec {
  position: relative; padding-block: clamp(64px, 9vw, 116px);
  background: var(--light); color: var(--ink);
}
/* أول قسم فاتح يبدأ بمنحنى يذيب الداكن فيه بدل خط قاطع */
.sec-systems::before {
  content: ''; position: absolute; inset-block-start: -58px; inset-inline: 0; block-size: 60px;
  background: var(--light); border-start-start-radius: 50% 100%; border-start-end-radius: 50% 100%;
}
.sec + .sec { padding-block-start: 0; }

.sec-head { text-align: center; margin-block-end: 46px; }
.h-sec { font-size: clamp(27px, 4.2vw, 41px); margin-block-end: 12px; }
.sec .lead, .foot .lead { color: var(--dim); max-inline-size: 60ch; margin-inline: auto; }
.foot .lead { color: var(--dark-dim); }
.sec-more { text-align: center; margin-block-start: 40px; margin-block-end: 0; }
.empty { text-align: center; color: var(--dim); padding-block: 40px; }

/* ── البطاقات ─────────────────────────────────────────────────────────────── */
.cards { display: grid; gap: 22px; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

.card {
  background: var(--light-2); border: 1px solid var(--light-line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card > a { display: flex; flex-direction: column; block-size: 100%; }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(17,24,50,.11); border-color: transparent; }

.card-media {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(135deg, #eef0f8, #e3e7f5);
}
.card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card-media img { transform: scale(1.06); }

/* البديل النائب: كل الصور مفقودة حتى يُنسخ مجلد الإنتاج، فلا تظهر صورة مكسورة */
.ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(91,108,255,.13), rgba(42,208,200,.13));
}
.ph::after {
  content: attr(data-letter);
  font-size: 58px; font-weight: 800; color: rgba(91,108,255,.45);
}

.kind {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
  background: rgba(7,11,24,.72); color: #fff; font-size: 12.5px; font-weight: 500;
  padding: 4px 12px; border-radius: 999px; backdrop-filter: blur(6px);
}

.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body b { font-size: 19px; font-weight: 700; }
.card-body time { font-size: 13.5px; color: var(--dim); }
.card-text { color: var(--dim); font-size: 15.5px; line-height: 1.75; }
.more {
  margin-block-start: auto; padding-block-start: 10px; color: var(--brand); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 7px;
}
.more::after { content: '←'; transition: transform .3s var(--ease); }
.card:hover .more::after { transform: translateX(-5px); }

.card-soft { background: linear-gradient(160deg, #fff, #f7f8fd); }

/* ── الرقائق (القطاعات) ───────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px; font-size: 15.5px; font-weight: 500;
  background: var(--light-2); border: 1px solid var(--light-line); color: var(--ink);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.chip:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 10px 24px rgba(91,108,255,.14); }
.chip i { color: var(--brand); }
.chip.is-special { background: linear-gradient(135deg, rgba(91,108,255,.1), rgba(42,208,200,.1)); border-color: transparent; }

/* ── صفحات داخلية: رأس الصفحة ─────────────────────────────────────────────── */
.phead {
  padding-block: calc(var(--nav-h) + 70px) 66px; text-align: center;
}
.phead h1 { font-size: clamp(30px, 5.6vw, 54px); margin-block-end: 14px; }
.phead p { color: var(--dark-dim); max-inline-size: 62ch; margin-inline: auto; }
.crumbs { color: var(--dark-dim); font-size: 14.5px; margin-block-end: 16px; }
.crumbs a:hover { color: var(--brand-2); }
.crumbs span { opacity: .5; margin-inline: 7px; }

/* ── تفاصيل النظام والإصدارات ─────────────────────────────────────────────── */
.detail { background: var(--light); color: var(--ink); padding-block: clamp(50px, 7vw, 88px); position: relative; }
.detail::before {
  content: ''; position: absolute; inset-block-start: -58px; inset-inline: 0; block-size: 60px;
  background: var(--light); border-start-start-radius: 50% 100%; border-start-end-radius: 50% 100%;
}
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 900px) { .detail-grid.has-media { grid-template-columns: 1.15fr .85fr; align-items: start; } }

.prose { font-size: 16.5px; line-height: 1.95; color: #2b3457; }
.prose :is(h2,h3) { margin-block: 1.5em .5em; color: var(--ink); }
.prose img { border-radius: var(--r); margin-block: 1em; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-inline-start: 1.4em; margin-block: 1em; }
.prose table { inline-size: 100%; border-collapse: collapse; margin-block: 1em; }
.prose :is(td,th) { border: 1px solid var(--light-line); padding: 8px 12px; }

.shot { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--light-line); background: #fff; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-block-start: 18px; }
.gallery img { border-radius: var(--r); aspect-ratio: 4/3; object-fit: cover; inline-size: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; }

/* بطاقات الإصدارات */
.releases { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-block-start: 30px; }
.rel {
  background: var(--light-2); border: 1px solid var(--light-line); border-radius: var(--r-lg);
  padding: 26px 24px; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .3s;
}
.rel:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(17,24,50,.1); }
.rel h3 { font-size: 21px; margin-block-end: 6px; }
.rel .price { font-size: 25px; font-weight: 800; color: var(--brand); margin-block: 10px 16px; font-variant-numeric: tabular-nums; }
.rel .price small { font-size: 14px; font-weight: 500; color: var(--dim); }
.feat { display: flex; flex-direction: column; gap: 9px; margin-block-end: 20px; }
.feat li { display: flex; gap: 9px; align-items: flex-start; font-size: 15.5px; color: #2b3457; }
.feat li::before { content: '✓'; color: var(--brand-2); font-weight: 800; flex: none; }
.feat li.inherited { color: var(--dim); }
.feat li.inherited::before { content: '↑'; color: var(--dim); }
.rel .btn { margin-block-start: auto; }

/* ── الفروع والوكلاء ──────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; justify-content: center; margin-block-end: 34px; flex-wrap: wrap; }
.tabs button {
  padding: 10px 22px; border-radius: 999px; border: 1px solid var(--light-line);
  background: var(--light-2); cursor: pointer; font-weight: 600; color: var(--dim);
  transition: color .25s, border-color .25s, background .25s;
}
.tabs button.is-on { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; }

.branch {
  background: var(--light-2); border: 1px solid var(--light-line); border-radius: var(--r-lg);
  padding: 22px 24px; transition: transform .35s var(--ease), box-shadow .35s;
}
.branch:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,24,50,.09); }
.branch h3 { font-size: 18.5px; margin-block-end: 4px; }
.branch .tagk { font-size: 12.5px; font-weight: 600; padding: 3px 11px; border-radius: 999px; }
.branch .tagk.branch { background: rgba(91,108,255,.12); color: var(--brand); }
.branch .tagk.agent  { background: rgba(255,182,72,.16); color: #b27400; }
.branch ul { margin-block-start: 12px; display: flex; flex-direction: column; gap: 7px; }
.branch li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; color: var(--dim); }
.branch li i { color: var(--brand); inline-size: 17px; text-align: center; margin-block-start: 5px; flex: none; }
.branch a:hover { color: var(--brand); }

/* ── الفريق ───────────────────────────────────────────────────────────────── */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.mate { text-align: center; }
.mate .pic {
  inline-size: 118px; block-size: 118px; margin-inline: auto; margin-block-end: 14px;
  border-radius: 50%; overflow: hidden; border: 3px solid var(--light-2);
  box-shadow: 0 10px 28px rgba(17,24,50,.12);
  background: linear-gradient(135deg, rgba(91,108,255,.16), rgba(42,208,200,.16));
  display: grid; place-items: center;
}
.mate .pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mate .pic span { font-size: 40px; font-weight: 800; color: rgba(91,108,255,.5); }
.mate b { display: block; font-size: 17.5px; }
.mate small { color: var(--dim); font-size: 14.5px; }

/* ── الأسئلة الشائعة ──────────────────────────────────────────────────────── */
.faq { max-inline-size: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--light-2); border: 1px solid var(--light-line); border-radius: var(--r);
  padding: 4px 20px; transition: border-color .25s;
}
.faq details[open] { border-color: var(--brand); }
.faq summary {
  cursor: pointer; font-weight: 700; padding-block: 15px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; color: var(--brand); transition: transform .3s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--dim); padding-block-end: 14px; margin: 0; }

/* ── الترقيم ──────────────────────────────────────────────────────────────── */
.pager ul { display: flex; gap: 8px; justify-content: center; margin-block-start: 44px; flex-wrap: wrap; }
.pager a {
  min-inline-size: 42px; block-size: 42px; display: grid; place-items: center; padding-inline: 12px;
  border-radius: 12px; border: 1px solid var(--light-line); background: var(--light-2);
  color: var(--dim); font-weight: 600; transition: all .25s;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager a.is-active { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-color: transparent; }

/* ── الرسائل الطائرة ──────────────────────────────────────────────────────── */
.flash {
  position: fixed; inset-block-start: calc(var(--nav-h) + 12px); inset-inline-end: 20px; z-index: 80;
  padding: 13px 22px; border-radius: var(--r); font-weight: 600; font-size: 15.5px;
  background: var(--light-2); color: var(--ink); box-shadow: 0 18px 44px rgba(0,0,0,.24);
  border-inline-start: 4px solid var(--brand-2);
  animation: flashin .45s var(--ease);
}
.flash-error { border-inline-start-color: #ef4d5e; }
@keyframes flashin { from { opacity: 0; transform: translateY(-14px); } }

/* ── التذييل ──────────────────────────────────────────────────────────────── */
.foot { background: var(--dark-2); padding-block-start: clamp(56px, 8vw, 96px); border-block-start: 1px solid var(--dark-line); }
.foot-grid { display: grid; gap: 46px; padding-block-end: 56px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.1fr .9fr; } }

.form { display: flex; flex-direction: column; gap: 16px; margin-block-start: 22px; }
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field { position: relative; }
.field :is(input, textarea) {
  inline-size: 100%; padding: 17px 16px 7px; border-radius: var(--r);
  background: rgba(255,255,255,.05); border: 1px solid var(--dark-line); color: var(--dark-ink);
  transition: border-color .25s, background .25s;
  resize: vertical;
}
.field :is(input, textarea):focus { outline: none; border-color: var(--brand); background: rgba(255,255,255,.08); }
.field label {
  position: absolute; inset-block-start: 15px; inset-inline-start: 17px;
  color: var(--dark-dim); font-size: 16px; pointer-events: none;
  transition: transform .22s var(--ease), font-size .22s var(--ease), color .22s;
  transform-origin: top right;
}
.field :is(input, textarea):focus + label,
.field :is(input, textarea):not(:placeholder-shown) + label {
  transform: translateY(-9px); font-size: 12px; color: var(--brand-2);
}
.field.has-error :is(input, textarea) { border-color: #ef4d5e; }
.field em { display: block; font-style: normal; color: #ff8593; font-size: 13.5px; margin-block-start: 6px; }

.foot-contact { display: flex; flex-direction: column; gap: 12px; margin-block: 20px 26px; }
.foot-contact li { display: flex; gap: 12px; align-items: flex-start; color: var(--dark-dim); font-size: 15.5px; }
.foot-contact i { color: var(--brand-2); inline-size: 18px; text-align: center; margin-block-start: 6px; flex: none; }
.foot-contact a:hover { color: var(--dark-ink); }

.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
  inline-size: 42px; block-size: 42px; display: grid; place-items: center; border-radius: 13px;
  background: rgba(255,255,255,.06); border: 1px solid var(--dark-line); color: var(--dark-dim);
  transition: transform .28s var(--ease), background .28s, color .28s, border-color .28s;
}
.socials a:hover { transform: translateY(-4px); background: var(--c); color: #fff; border-color: transparent; }

.foot-bar { border-block-start: 1px solid var(--dark-line); padding-block: 20px; color: var(--dark-dim); font-size: 14.5px; text-align: center; }

/* ── 404 والصيانة ─────────────────────────────────────────────────────────── */
.mid {
  min-block-size: 100svh; display: grid; place-items: center; text-align: center;
  padding-block: calc(var(--nav-h) + 40px) 60px;
}
.mid .code { font-size: clamp(76px, 18vw, 170px); font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.mid h1 { font-size: clamp(24px, 4vw, 36px); margin-block: 10px 12px; }
.mid p { color: var(--dark-dim); margin-block-end: 26px; }

/* ── حالات الدخول قبل تشغيل الحركة ────────────────────────────────────────── */
/* العناصر تبدأ مخفيّة فقط إذا كان JS سيحرّكها — بدونه تظهر طبيعية */
body.js [data-fade], body.js [data-rise] { opacity: 0; }
body.js [data-rise] { transform: translateY(26px); }

/* ── الشاشات الصغيرة ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .burger { display: flex; }
  .nav-links {
    position: fixed; inset-block-start: var(--nav-h); inset-inline: 0;
    background: rgba(7,11,24,.97); backdrop-filter: blur(16px);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 18px var(--gut) 30px; border-block-end: 1px solid var(--dark-line);
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    max-block-size: calc(100svh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links > a { padding: 13px 14px; border-radius: var(--r-sm); font-size: 17px; color: var(--dark-ink); }
  .nav-cta { margin-inline-start: 0; margin-block-start: 10px; text-align: center; justify-content: center; }
  body.is-light .nav.is-stuck .nav-links > a { color: var(--dark-ink); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .flash { inset-inline: 14px; inset-block-start: calc(var(--nav-h) + 8px); }
  .orb { filter: blur(38px); }
}

@media (max-width: 520px) {
  :root { --gut: 16px; }
  .brand-text { font-size: 15.5px; }
  .hero-cta .btn { inline-size: 100%; }
}

/* ── احترام تقليل الحركة ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  body.js [data-fade], body.js [data-rise] { opacity: 1 !important; transform: none !important; }
  .orb { display: none; }
}