/* =====================================================================
   Coach Youssri — Premium Personal Trainer Portfolio
   Stylesheet organized by: tokens → base → header → hero → about →
   certifications → programs → transformation → testimonials →
   why-choose → faq → contact → footer → utilities/animations → responsive
   ===================================================================== */

/* ===== 1. Design tokens ===== */
:root {
  --bg: #0d0f12; /* خلفية الموقع الفحمية */
  --bg-elevated: #101317; /* خلفية قسم مرتفعة قليلاً للتبديل بين الأقسام */
  --surface: #161a20; /* لون البطاقات والأسطح */
  --surface-2: #1e232b; /* سطح ثانوي عند التمييز */
  --accent: #c6ff00; /* اللون المميّز: أخضر ليموني حيوي */
  --accent-dim: #9fd400; /* درجة أغمق للتدرّجات */
  --accent-glow: rgba(198, 255, 0, 0.28); /* توهّج شفاف للعمق */
  --accent-glow-soft: rgba(198, 255, 0, 0.12);
  --text: #f2f3f5; /* لون النص الأساسي */
  --muted: #9aa1ab; /* لون النص الثانوي */
  --muted-2: #6b7280; /* نص باهت أكثر (تسميات صغيرة) */
  --border: #2a2f37; /* لون الحدود الخفيفة */
  --border-strong: #363c46;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --maxw: 1180px; /* أقصى عرض للمحتوى */
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.45); /* ظل ناعم موحّد */
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.22, 0.8, 0.25, 1);
  --dur-fast: 0.2s;
  --dur: 0.4s;
  --dur-slow: 0.8s;
  --font-display:
    "Bebas Neue", "Cairo", sans-serif; /* خط عرض عصري وضخم للعنوان؛ يتراجع تلقائياً لـ Cairo مع الأحرف العربية */
}

/* ===== 2. Base / reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
}

html[lang="en"] body {
  font-family: "Poppins", system-ui, "Segoe UI", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
button {
  font: inherit;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 22px;
}

/* generous section rhythm, tokenized so it never collides with element paddings */
.section {
  padding-block: 108px;
  position: relative;
}
.section-alt {
  background: var(--bg-elevated);
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-block-end: 56px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--accent);
  display: inline-block;
}
.section-title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 900;
  margin-block: 14px 12px;
  letter-spacing: -0.01em;
}
.section-sub {
  color: var(--muted);
  font-size: 1.02rem;
}

/* reveal-on-scroll utility, JS toggles .is-visible */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 {
  transition-delay: 0.08s;
}
.reveal-delay-2 {
  transition-delay: 0.16s;
}
.reveal-delay-3 {
  transition-delay: 0.24s;
}
.reveal-delay-4 {
  transition-delay: 0.32s;
}

/* متغيّرات اتجاهية: تدخل من جهة فيزيائية محددة (يسار/يمين) بغض النظر عن اتجاه اللغة */
.reveal.reveal-left {
  transform: translateX(-90px);
}
.reveal.reveal-right {
  transform: translateX(90px);
}
.reveal.reveal-left.is-visible,
.reveal.reveal-right.is-visible {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===== 3. Buttons (shared) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: #0d0f12;
  box-shadow: 0 10px 30px var(--accent-glow);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px var(--accent-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-3px);
}
.btn-block {
  width: 100%;
}
.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ===== 4. Header — small rounded floating pill, centered over the hero ===== */
.site-header {
  position: fixed;
  top: 18px;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  padding-inline-end: 24px; /* الكبسولة تنتقل إلى الزاوية المقابلة لشارة الشركة */
  background: transparent;
  border: none;
  pointer-events: none;
}
.header-inner {
  position: relative; /* مرجع لعنصر ::before الذي يحمل التوهّج، حتى لا يصبح header-inner نفسه سياقاً مُقيَّداً لعناصر position:fixed داخله (مثل القائمة المنسدلة على الجوال) */
  pointer-events: auto;
  width: auto;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0; /* يلغي التوسيط التلقائي الموروث من class="container" حتى تعمل flex-end على العنصر الأب */
  display: flex;
  align-items: center;
  gap: 22px;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 8px 10px 8px 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: border-color var(--dur-fast) ease;
  z-index: 1;
  /* لا تشغيل تلقائي عند تحميل الصفحة — نفس أسلوب صورة البطل: تبقى مخفية حتى يضيف JS
     كلاس play-entrance مباشرة عند اختفاء شاشة التحميل، حتى تُرى الحركة فعلياً بدل أن تنتهي خلفها */
  opacity: 0;
  transform: translateY(-160%);
}
.header-inner.play-entrance {
  animation: navSlideDown 0.85s cubic-bezier(0.16, 0.9, 0.2, 1) forwards;
}
@keyframes navSlideDown {
  from {
    transform: translateY(-160%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header-inner {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(13, 15, 18, 0.38);
  backdrop-filter: blur(18px) saturate(160%);
  transition: background var(--dur-fast) ease;
}
html[dir="rtl"] .header-inner {
  padding: 8px 22px 8px 10px;
}
.header-inner:hover {
  border-color: rgba(255, 255, 255, 0.16);
}
.header-inner:hover::before {
  background: rgba(13, 15, 18, 0.5);
}

.brand {
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  display: inline-flex;
  gap: 5px;
  direction: ltr;
}
.brand-mark {
  color: var(--accent);
}
.brand-name {
  color: var(--text);
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav a {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  transition: color var(--dur-fast) ease;
  position: relative;
  padding-block: 4px;
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -2px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--dur-fast) var(--ease);
}
.nav a:hover {
  color: var(--accent);
}
.nav a:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* زر تبديل اللغة: دائرة شفافة عصرية بدل الخلفية الداكنة الصلبة */
.lang-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  /* إصلاح: الزر يعرض حرف "ع" في وضع الإنجليزية، لكن body في وضع الإنجليزية يتحوّل إلى خط
     Poppins (بلا دعم عربي إطلاقاً)، فيضطر المتصفح لاختيار خط بديل غير متوقّع لعرض هذا الحرف
     الوحيد — وهو ما كان يُظهره مشوَّهاً يشبه "ON" بدل "ع". تثبيت خط Cairo هنا (المُحمَّل مسبقاً
     ويدعم العربية بشكل كامل) يضمن ظهور الحرف بشكله الصحيح دائماً، بصرف النظر عن لغة الصفحة. */
  font-family: "Cairo", sans-serif;
}
.lang-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(159, 212, 0, 0.1);
}

/* ضبط دقيق: حرف "ع" (يظهر فقط في وضع LTR/الإنجليزية) يملك صندوق قياسات رأسية مختلفاً عن
   الحروف اللاتينية "EN" في نفس خط Cairo، فيبدو حبره البصري منزاحاً للأسفل قليلاً رغم أن
   flex يتمركز حسب صندوق السطر لا حسب الحبر الفعلي — بينما "EN" (في RTL) يبقى متمركزاً تماماً
   دون أي تعديل. القيمة 3.5px قِيست فعلياً (مركز حبر "ع" كان أسفل مركز الدائرة بمقدار 3.5px
   تحديداً) فترفعه هنا فقط في LTR، دون أي أثر على حالة "EN" في RTL أو على شكل الدائرة نفسها. */
html[dir="ltr"] .lang-btn {
  transform: translateY(-3.5px);
}

.whatsapp-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) ease;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.whatsapp-btn svg {
  width: 18px;
  height: 18px;
}
.whatsapp-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5);
}

/* مفتاح قائمة الجوال (Hamburger): أخطّ خضراء عصرية بدل الأبيض */
.nav-toggle {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(159, 212, 0, 0.35);
  background: rgba(159, 212, 0, 0.08);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  transition: background var(--dur-fast) ease;
}
.nav-toggle:hover {
  background: rgba(159, 212, 0, 0.16);
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--accent-dim);
  transition:
    transform var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ===== 5. Hero — exactly one screen tall; slow drifting two-line typography behind a cutout portrait ===== */
.hero {
  position: relative;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 96px 28px;
  overflow: hidden;
  background: radial-gradient(
    ellipse 60% 45% at 50% 6%,
    #090a06 0%,
    #030303 55%,
    #020202 100%
  );
}
.hero-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 60% at 50% 40%,
    black 20%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 70% 60% at 50% 40%,
    black 20%,
    transparent 75%
  );
  opacity: 0.18;
}
.hero-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(120px);
  background: radial-gradient(
    circle,
    rgba(159, 212, 0, 0.09) 0%,
    transparent 70%
  ); /* توهّج أخضر خافت جداً فقط، لا غسل أخضر كامل للخلفية */
  width: 360px;
  height: 360px;
  inset-block-start: -140px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* حاوية مشتركة لكلا النسختين (سطح المكتب/الجوال) */
.hero-marquee {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  top: 12%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}
.hero-marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  direction: ltr; /* الحركة الفيزيائية من اليمين لليسار ثابتة بغض النظر عن لغة الصفحة */
  will-change: transform;
  line-height: 1;
}
@keyframes heroMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track {
    animation: none;
  }
}

/* ===== نسخة سطح المكتب: عنوان مكدّس بسطرين، بالطراز الأصلي تماماً (لا تُستخدم خط Bebas هنا) ===== */
.hero-marquee-mobile {
  display: none;
}
.hero-marquee-desktop .hero-marquee-track {
  gap: 5rem;
  animation: heroMarquee 85s linear infinite;
}
.hero-heading-unit {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  line-height: 0.88;
}
.hero-heading-unit span {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3rem, 12vw, 9.5rem);
  letter-spacing: -0.02em;
}
.hero-heading-unit .line1 {
  color: var(--text);
  opacity: 0.92;
}
.hero-heading-unit .line2 {
  color: var(--accent-dim);
} /* #9fd400 */

/* ===== نسخة الجوال: ثلاثة صفوف متراصّة، تتحرّك بنفس السرعة والاتجاه بالضبط لتبقى مصطفّة رأسياً ===== */
@media (max-width: 860px) {
  .hero-marquee-desktop {
    display: none;
  }
  .hero-marquee-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-marquee-mobile .hero-marquee-track {
    gap: 2.2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    animation: heroMarquee 70s linear infinite; /* سرعة موحّدة لكل الصفوف الثلاثة لتبقى متزامنة */
  }
  .hero-marquee-mobile .hero-marquee-track span {
    font-size: clamp(2.6rem, 15vw, 4.6rem);
    display: inline-block;
  }
  .hero-marquee-row-1 {
    color: var(--text);
    opacity: 0.2;
    margin-block-end: -0.12em;
  }
  .hero-marquee-row-2 {
    color: var(--text);
    opacity: 0.48;
    margin-block-end: -0.12em;
  }
  .hero-marquee-row-3 {
    color: var(--accent-dim);
    opacity: 1;
  }
}

/* --- cutout portrait: slides up from below the fold on load --- */
.hero-photo-wrap {
  position: relative;
  z-index: 2;
  max-width: 300px;
  width: 54%; /* أصغر قليلاً من السابق ليتّسع مجال أعلى الرأس بعيداً عن الكبسولة العائمة */
  margin-block-start: 7vh;
  opacity: 0;
  transform: translateY(65%);
  /* لا تشغيل تلقائي عند تحميل الصفحة — الحركة تبدأ فقط عند إضافة .play-entrance من JS بعد اختفاء شاشة التحميل مباشرة،
     حتى لا تنتهي الحركة خلف شاشة التحميل قبل أن يراها الزائر */
}
.hero-photo-wrap.play-entrance {
  animation: heroSlideUp 1.7s cubic-bezier(0.16, 0.9, 0.2, 1) forwards;
}
@keyframes heroSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-photo-glow {
  position: absolute;
  z-index: 0;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  background: radial-gradient(
    circle,
    rgba(159, 212, 0, 0.1) 0%,
    transparent 72%
  );
  inset-block-end: 6%;
  left: 50%;
  transform: translateX(-50%);
}

.hero-photo-cutout {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
  animation: floatY 6s ease-in-out 1.9s infinite;
}
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* تعتيم أسود تدريجي من أسفل الصورة (المعدة فما تحت) حتى تندمج بالخلفية — الوجه والذراعان يبقيان واضحين بالكامل */
.hero-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 52%,
    rgba(2, 2, 2, 0.55) 68%,
    rgba(2, 2, 2, 0.88) 82%,
    #020202 96%
  );
}

.hero-platform {
  position: absolute;
  z-index: 0;
  inset-block-end: 2%;
  width: 50%;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 72%);
  filter: blur(2px);
  left: 50%;
  transform: translateX(-50%);
}

/* ===== custom cursor (desktop / fine-pointer only) ===== */
body.custom-cursor-active,
body.custom-cursor-active a,
body.custom-cursor-active button {
  cursor: none;
}
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:
    width var(--dur-fast) var(--ease),
    height var(--dur-fast) var(--ease),
    background var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
}
.cursor-dot.is-active,
.cursor-ring.is-active {
  opacity: 1;
}
.cursor-ring.is-hover {
  width: 64px;
  height: 64px;
  background: var(--accent-glow-soft);
}
@media (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

/* ===== 6. About — full-bleed split: one side is entirely image, the other is text ===== */
/* يشغل شاشة واحدة بالضبط تماماً كقسم البداية، بلا أي تمرير إضافي داخله */
.about {
  height: 100svh;
  overflow: hidden;
}
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  height: 100%;
}
.about-media {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 15, 18, 0) 60%,
    rgba(13, 15, 18, 0.55) 100%
  );
}

.about-text-wrap {
  display: flex;
  align-items: center;
  background: var(--bg);
  height: 100%;
  overflow: visible; /* أُزيل overflow-y:auto — كان يُنشئ حاوية تمرير متداخلة تلتقط عجلة الفأرة وتسبّب تعثّراً أثناء التمرير */
}
.about-text-wrap .container {
  padding-block: 40px;
}

.about-text .eyebrow {
  margin-bottom: 10px;
}
/* عنوان "من أنا؟" بخط عرض ضخم، مطابق لطابع العنوان الرئيسي في البطل */
.about-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text);
}
.about-lead {
  font-size: 1.15rem;
  font-weight: 700;
  margin-block: 18px 14px;
  color: var(--text);
}
.about-text p {
  color: var(--muted);
  margin-bottom: 14px;
}

/* اقتباس مميّز بشريط جانبي بلون العلامة، كما في المرجع */
.about-quote {
  display: block;
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 16px;
  margin-block-start: 22px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-dim);
  font-style: normal;
}

/* ===== 6b. Services — full-bleed looping background video with photo cards on top ===== */
.services-video {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #050506; /* لون احتياطي قبل تحميل الفيديو */
}
.services-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(5, 6, 7, 0.78) 0%,
    rgba(5, 6, 7, 0.5) 45%,
    rgba(5, 6, 7, 0.88) 100%
  );
}
.services-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 110px;
}

.services-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.service-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4.6; /* بطاقات أكبر وأطول */
  border-radius: 0; /* حواف حادة (مربّعة) بدل الاستدارة، كما طُلب */
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease);
}
.service-card {
  cursor: pointer;
}
.service-card:hover {
  transform: translateY(-6px) scale(1.015);
}
.service-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* حركة الدخول: تبدأ كل بطاقة من مركز الشبكة (--sx/--sy تُحسب في JS) بحجم أصغر وشفافية صفر،
   ثم تنزلق إلى موضعها الطبيعي — نفس الحركة تماماً على الجوال وسطح المكتب */
.service-card.reveal {
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
  transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(0.4);
}
.service-card.reveal.is-visible {
  transform: translate(0, 0) scale(1);
}
.service-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .service-card-photo {
    object-position: center 15%; /* mobile: crop mostly from bottom, small buffer from top */
  }
  .service-card-photo[src*="assets/images/service3.jpeg"] {
    object-position: center;
  }
}
/* تعتيم أسود فوق صورة كل بطاقة حتى يبقى النص واضحاً بلا أي أيقونة */
.service-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 6, 7, 0.4) 0%,
    rgba(5, 6, 7, 0.7) 55%,
    rgba(5, 6, 7, 0.95) 100%
  );
}
.service-card-body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  padding: 26px 22px;
}
.service-card-body h3 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.service-card-body p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  margin: 0;
}

/* "اعرف المزيد" — يظهر أسفل نص البطاقة، بسهم ينزلق عند مرور الفأرة، يفتح نفس النافذة المنبثقة (النقر ينتقل تلقائياً للبطاقة الأب) */
.service-card-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 12px;
  color: var(--accent-dim);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.service-card-learn-more svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease);
}
.service-card:hover .service-card-learn-more {
  color: var(--accent);
}
.service-card:hover .service-card-learn-more svg {
  transform: translateX(4px);
}
html[dir="rtl"] .service-card:hover .service-card-learn-more svg {
  transform: translateX(-4px) scaleX(-1);
}
.service-card-learn-more svg {
  transform: scaleX(1);
}
html[dir="rtl"] .service-card-learn-more svg {
  transform: scaleX(-1);
}

/* على الجوال: حركة ظهور بسيطة (تلاشٍ + صعود خفيف) بدل حركة "الانطلاق من المركز" التي تبقى حصراً لسطح المكتب */
@media (max-width: 860px) {
  .services-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-card {
    aspect-ratio: 4 / 2.6;
  }
  .service-card.reveal {
    transform: translateY(24px) !important;
    transition:
      opacity 0.8s var(--ease),
      transform 0.8s var(--ease);
  }
  .service-card.reveal.is-visible {
    transform: translateY(0) !important;
  }
}

/* ===== 13. Contact — form that submits to WhatsApp, with background image ===== */
.contact {
  position: relative;
  padding-block: 100px;
  overflow: hidden;
  border-block: 1px solid var(--border);
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.contact-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(5, 6, 7, 0.82) 0%,
    rgba(5, 6, 7, 0.72) 60%,
    rgba(5, 6, 7, 0.9) 100%
  );
}
.contact-split {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

/* عنوان ضخم بسطرين، بلا أي نص إضافي — يطابق طابع المرجع تماماً */
.contact-heading {
  line-height: 0.88;
}
.contact-heading span {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(4.5rem, 13vw, 11rem);
  letter-spacing: 0.01em; /* أكبر بوضوح ليطابق حجم نص "FITNESS TRAINER" في البطل */
}
.contact-heading .line1 {
  color: var(--text);
}
.contact-heading .line2 {
  color: var(--accent-dim);
}

/* نموذج أصغر وأكثر شفافية، مع إبقاء النص واضحاً للقراءة */
.contact-form-col {
  max-width: 440px;
}
.contact-form {
  background: rgba(22, 26, 32, 0.32);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 13px;
  margin-block-end: 22px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  min-width: 0;
}
.form-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.form-field span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  font-weight: 600;
}
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: rgba(13, 15, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color var(--dur-fast) ease;
  width: 100%;
  max-width: 100%; /* يمنع تجاوز الحقول لحاوية النموذج (بعض المتصفحات تعطي عرضاً جوهرياً لهذه العناصر) */
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-field textarea {
  resize: vertical;
  min-height: 70px;
}

/* رسالة تحقّق مصمّمة بهوية الموقع (بديل فقاعة المتصفح الافتراضية) */
.form-error {
  display: none;
  align-items: center;
  gap: 8px;
  color: #ff8080;
  background: rgba(255, 90, 90, 0.1);
  border: 1px solid rgba(255, 90, 90, 0.35);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}
.form-error.is-visible {
  display: flex;
  animation: formErrorIn 0.3s var(--ease);
}
@keyframes formErrorIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.form-field input.has-error,
.form-field textarea.has-error {
  border-color: #ff5a5a;
  box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.15);
}
.form-field select {
  appearance: none;
  cursor: pointer;
}

.contact-icon-links {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
}
.icon-link {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  transition: all var(--dur-fast) ease;
}
.icon-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.icon-link svg {
  width: 20px;
  height: 20px;
}

/* ===== 14. Footer ===== */
.site-footer {
  padding-block: 30px;
  text-align: center;
  color: var(--muted-2);
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.footer-links a {
  color: var(--muted);
  transition: color var(--dur-fast) ease;
}
.footer-links a:hover {
  color: var(--accent);
}

.designer-credit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-block-start: 12px;
  color: var(--muted-2);
  font-size: 0.82rem;
  transition: color var(--dur-fast) ease;
}
.designer-credit:hover {
  color: var(--accent);
}
.designer-logo {
  height: 200px;
  width: auto;
  display: block;
  /* يُعوّض الفراغ غير المرئي الناتج عن قصّ أيقونة "S" (logo-icon-hidden) من الجهة
     اليسرى الفيزيائية للصورة، بحيث يتمركز النص المرئي "SMART IT SOLUTIONS SYSTEM"
     فعلياً تحت نص "صُمّم بواسطة" بدل الانزياح نحو اليمين. القيمة = نصف نسبة القصّ (34.5% ÷ 2). */
  transform: translateX(-17.25%);
  /* السبب الفعلي للفراغ الرأسي الكبير أسفل "صُمّم بواسطة": ملف designer-logo.png نفسه (900×720px)
     يحتوي هامشاً شفافاً متماثلاً أعلى وأسفل المحتوى المرئي (الأيقونة + النص تقعان بين y=253
     و y=467، أي هامش 253px من كل جهة = 35.14% من ارتفاع الصورة) — وهذا الهامش الشفاف يتمدّد مع
     تكبير الصورة إلى height:200px، فيحجز ~70px غير مرئية أعلى الشعار وأسفله بالإضافة إلى الـ
     gap الفعلي. لا علاقة لهذا بـ gap أو padding أو line-height في .designer-credit، وليس له
     علاقة بـ logo-icon-hidden (الذي يقصّ أفقياً فقط). الحل: هامش سالب يعادل هامش الصورة الشفاف
     (200px × 253/720 ≈ 70.28px) من الأعلى والأسفل، بحيث يلتصق المحتوى المرئي فعلياً بالـ gap
     الحالي (8px) بدل الفراغ الإضافي، دون تغيير حجم الصورة (height يبقى 200px). */
  margin-block: -70.28px;
}

/* ===== TEMP (reversible): hides only the circular "S" icon baked into the left
   side of designer-logo.png, leaving the "SMART IT SOLUTIONS SYSTEM" text visible.
   Crops at the transparent gap between icon and text — no layout/size change.
   To restore the icon: remove the "logo-icon-hidden" class from the <img> tags,
   or delete this rule. ===== */
.logo-icon-hidden {
  clip-path: inset(0 0 0 34.5%);
}

/* ===== 15. Back to top ===== */
.to-top {
  position: fixed;
  z-index: 90;
  inset-block-end: 26px;
  inset-inline-end: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #0d0f12;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--dur-fast) ease,
    transform var(--dur-fast) ease,
    visibility var(--dur-fast);
  cursor: pointer;
  border: none;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top svg {
  width: 20px;
  height: 20px;
}
html[dir="rtl"] .to-top {
  inset-inline-end: auto;
  inset-inline-start: 26px;
}

/* ===== شعار الشركة داخل قسم البداية — الزاوية المقابلة لكبسولة التنقّل، وعلى نفس الخط الرأسي (نفس top) ===== */
.company-badge {
  position: absolute;
  z-index: 3;
  top: -56px;
  inset-inline-start: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  transition: transform var(--dur-fast) ease;
}
.company-badge:hover {
  transform: translateY(-2px);
}

.company-badge img {
  height: 200px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}

@media (max-width: 860px) {
  .company-badge {
    top: -30px;
    inset-inline-start: 1px;
    gap: 6px;
  }

  .company-badge img {
    height: 150px;
  }

  /* إصلاح مهم: logo-icon-hidden يقصّ الأيقونة من الجهة الفيزيائية اليسرى للصورة دائماً (clip-path
     لا يتأثر باتجاه dir)، وهذا يترك فراغاً غير مرئي على حافة الشعار في وضع LTR فقط، فيظهر النص
     المرئي مزاحاً نحو المنتصف (قريباً من قائمة Coach Youssri). في RTL يقع هذا الفراغ صدفةً في
     الجهة الداخلية فلا يظهر أثره كثيراً. الحل: نزيح الصندوق في LTR فقط حتى تلتصق حافة النص المرئي
     بالحافة الخارجية بنفس المسافة النسبية الموجودة فعلاً في RTL (لا صفر تماماً، لأن ملف الشعار نفسه
     يحتوي هامشاً شفافاً صغيراً على يمين النص "SYSTEM" قبل حافة الصورة، وهذا الهامش هو ما يفصل
     الشعار عن الحافة في RTL). النسبة المستخدمة (27.9%) محسوبة من أبعاد ملف الشعار الفعلية
     (designer-logo.png، 900×720px): بداية النص المرئي بعد قصّ الأيقونة تقع عند 330px من أصل 900
     (36.667%)، والهامش الشفاف المقابل في RTL بعد نهاية النص عند 821px يساوي (900-821)/900 = 8.778%
     — فالإزاحة المطلوبة = 8.778% − 36.667% ≈ −27.9%، ما يجعل الفجوتين متطابقتين تماماً. */
  html[dir="ltr"] .company-badge {
    transform: translateX(-27.9%);
  }
  html[dir="ltr"] .company-badge:hover {
    transform: translateX(-27.9%) translateY(-2px);
  }
}

/* =====================================================================
   Responsive — tablet & mobile (grouped, mobile-first overrides last)
   ===================================================================== */
@media (max-width: 860px) {
  /* على الجوال: القائمة تنسدل كبطاقة عائمة أسود شفاف (يطابق ثيم الموقع)، بعرض أكبر ليتّسع للاسم الكامل */
  .nav {
    position: fixed;
    inset-inline: 10px;
    top: 78px;
    z-index: 96;
    background: rgba(5, 6, 7, 0.78);
    backdrop-filter: blur(20px) saturate(140%);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 20px 16px;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--dur-fast) ease;
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav a {
    padding-block: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav a:last-child {
    border-bottom: none;
  }
  .nav-toggle {
    display: flex;
  }
  /* الكبسولة العلوية نفسها أعرض قليلاً وبحشو أكبر لتشبه المرجع */
  .header-inner {
    padding: 8px 10px 8px 16px;
    gap: 10px;
  }
  html[dir="rtl"] .header-inner {
    padding: 8px 16px 8px 10px;
  }

  /* زر واتساب العائم في الشريط نفسه مخفي تماماً على الجوال (لا واتساب في وضع الجوال إطلاقاً) */
  .whatsapp-btn {
    display: none;
  }

  /* صورة الكابتن: أصغر وأكثر انخفاضاً حتى يتّضح الوجه تماماً أسفل شريط النص */
  .hero-photo-wrap {
    width: 58%;
    max-width: 230px;
    margin-block-start: 10vh;
  }

  /* إصلاح مهم: على الجوال يتكدّس القسمان رأسياً (صورة ثم نص)، فلا يصحّ إبقاء ارتفاع الشاشة الواحدة الثابت
     وإخفاء الفائض — كان هذا يقصّ النص فعلياً ويجعله غير مرئي. هنا نسمح بالارتفاع الطبيعي بدلاً من ذلك. */
  .about {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
  .about-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    align-items: start;
  }
  .about-media {
    height: 340px;
    min-height: 340px;
  } /* ارتفاع أكبر ليظهر الوجه كاملاً بدل العينين فقط */
  .about-text-wrap {
    height: auto;
    min-height: 320px;
    overflow: visible;
  }
  .section-title {
    margin-block: 8px 6px;
  }
  .about-text .eyebrow {
    margin-bottom: 2px;
  }
  .about-text-wrap .container {
    padding-block: 8px;
  }
  .about-lead {
    font-size: 0.92rem;
    margin-bottom: 6px;
  }
  .about-text p {
    font-size: 0.8rem;
    margin-bottom: 5px;
    line-height: 1.4;
  }
  .about-quote {
    font-size: 0.84rem;
    margin-block-start: 8px;
  }
  .reveal.reveal-left,
  .reveal.reveal-right {
    transform: translateY(28px);
  } /* على الجوال: نفس حركة الظهور الرأسية الموحّدة */

  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-form {
    padding: 18px;
  }
  .contact {
    min-height: auto;
    padding-block: 70px;
  }
  .contact-split {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .contact-heading span {
    font-size: clamp(3rem, 16vw, 5.5rem);
  }
  .contact-form-col {
    max-width: 100%;
    margin-inline: auto;
    text-align: start;
  }
  .contact-icon-links {
    justify-content: center;
  }

  .section {
    padding-block: 80px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: 18px;
  }
}

/* ===== نافذة تفاصيل الخدمة المنبثقة (Popup) ===== */
.service-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) ease,
    visibility var(--dur);
}
.service-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.service-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 2, 0.82);
  backdrop-filter: blur(6px);
}
.service-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: scale(0.85) translateY(20px);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.16, 0.9, 0.2, 1),
    opacity 0.35s ease;
}
.service-modal.is-open .service-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.service-modal-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-modal-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.service-modal-body {
  padding: 22px 24px 26px;
}
.service-modal-body h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--text);
}
.service-modal-body p {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

/* ===== شاشة التحميل (Preloader) — فيديو شعار الشركة، بحد أقصى 5 ثوانٍ، بنفس هوية الموقع الداكنة/الليمونية ===== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* TEMP (reversible): warm amber/black vignette recreated to match the original
     assets/videos/smart-it-logo.mp4 preloader's own background glow (the video
     normally supplied this look via its pixels; since the video is temporarily
     replaced by text, the glow is reproduced here in CSS instead). This is NOT
     the site's theme color — it intentionally does not use var(--accent) etc.
     To restore the video preloader, swap this back to the site-neutral version:
     radial-gradient(ellipse 70% 60% at 50% 45%, #0d0f12 0%, #050506 55%, #020202 100%); */
  background: radial-gradient(
    ellipse 60% 55% at 50% 45%,
    #2c1c08 0%,
    #180f04 32%,
    #0a0602 58%,
    #030201 82%,
    #000 100%
  );
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-label {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.preloader-video {
  width: min(750px, 75vh);
  height: min(700px, 75vh);
  object-fit: contain;
  /* لا drop-shadow ولا خلفية ولا حدود — كانت الظلال تُظهر إطاراً/صندوقاً حول الفيديو */
  clip-path: inset(
    1% 5% 7% 5%
  ); /* يقصّ الحواف الجانبية وشريطاً أكبر من الأسفل لإخفاء الحافة الذهبية الظاهرة أثناء التشغيل */
}

/* ===== TEMP (reversible): wrapper just lets the mask below size/position itself
   against the video without altering the <video> element or file at all. ===== */
.preloader-video-wrap {
  position: relative;
  display: inline-block;
}

/* ===== TEMP (reversible): small overlay sitting ONLY over the circular "S" icon
   inside the preloader video (measured at ~27.5%–43.5% of the video's width and
   ~37%–52.7% of its height), leaving the rest of the video — text, tagline, dots —
   fully visible and playing normally underneath. It works by blurring/dimming
   whatever is behind it (backdrop-filter), so it naturally matches whatever local
   color is playing there instead of a flat/solid patch, with a radial mask-image
   feathering the edges so there's no visible hard edge. Does not touch the <video>
   element or file itself — only an overlay painted on top of it.
   NOTE: left/top/width/height are used (no "right"/"bottom"/"inset") because this
   page is dir="rtl": setting left+width while a stylesheet "right" is also set
   would make the browser ignore "left" and mis-position the mask on the wrong side.
   To restore the video: delete the .preloader-icon-mask <div> from index.html
   (and this rule + .preloader-video-wrap above, if desired). ===== */
.preloader-icon-mask {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 27.5%;
  top: 37%;
  width: 16%;
  height: 15.7%;
  -webkit-backdrop-filter: blur(26px) saturate(1.3) brightness(0.78);
  backdrop-filter: blur(26px) saturate(1.3) brightness(0.78);
  -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 78%);
  mask-image: radial-gradient(circle, #000 50%, transparent 78%);
}
/* ===== TEMP (reversible): modern text-based preloader standing in for the
   video above, while the original is disabled but kept intact in the markup.
   Shows only "Smart IT Solutions System" — plain text, no S icon, no logo
   image. Colors/fonts here are hardcoded to match the ORIGINAL company video's
   own gold/cream wordmark (assets/videos/smart-it-logo.mp4), deliberately NOT
   the Coach Youssri site theme — none of this uses var(--accent)/var(--text)/etc,
   so it cannot drift if the site palette changes, and nothing here affects any
   other component. To restore the video preloader: swap the markup back in
   index.html; these rules can stay here unused, they simply won't render
   without .preloader-text-brand. ===== */
.preloader-text-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 16px 10px;
}
/* soft blurred amber halo behind the wordmark, echoing the glow the circular
   "S" medallion cast in the original video */
.preloader-text-brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(520px, 88vw);
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    rgba(224, 168, 74, 0.32) 0%,
    rgba(224, 168, 74, 0) 70%
  );
  filter: blur(6px);
}
.preloader-text-main {
  display: block;
  font-family: "Cinzel", "Cairo", serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 5.4vw, 3.1rem);
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.2;
  background: linear-gradient(
    100deg,
    #a9761f 15%,
    #f6dd9e 40%,
    #fff3d6 50%,
    #f6dd9e 60%,
    #a9761f 85%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(214, 160, 66, 0.35));
  animation: preloaderGoldShine 3.4s ease-in-out infinite;
}
.preloader-text-sub {
  display: block;
  font-family: "Cinzel", "Cairo", serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 1.7vw, 0.95rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* re-centers the line under the extra trailing tracking */
  text-align: center;
  color: #ecdfc2;
  margin-top: 8px;
  opacity: 0.92;
}
.preloader-text-brand::after {
  content: "";
  display: block;
  width: 200px;
  max-width: 46vw;
  height: 1px;
  margin: 20px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(230, 190, 120, 0.65),
    transparent
  );
}
@keyframes preloaderGoldShine {
  0% {
    background-position: 0% 0;
  }
  50% {
    background-position: -180% 0;
  }
  100% {
    background-position: -180% 0;
  }
}

.preloader-caption {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.preloader-caption::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 14px;
}

@media (max-width: 860px) {
  .preloader-video {
    width: min(560px, 68vh);
    height: min(560px, 68vh);
  }
  .preloader-label {
    font-size: 0.7rem;
  }
  .preloader-caption {
    font-size: 0.82rem;
  }
  .preloader-text-main {
    letter-spacing: 0.035em;
  }
  .preloader-text-sub {
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    transition: none;
  }
  .preloader-text-main {
    animation: none;
  }
}