/*
Theme Name:  VIA HORIZON
Theme URI:   https://viahorizon.sa
Author:      فريق أفناد سنا
Description: قالب ووردبريس سينمائي لشركة فيا هورايزن للنقل والسفر والسياحة. مشهد ثلاثي الأبعاد بـ CSS خالص (طريق يتلاشى نحو الأفق)، حركة مرتبطة بالتمرير، وتأثيرات عمق متقدمة — بلا jQuery وبلا مكتبات خارجية. RTL أصيل، متجاوب بالكامل، ويخفّف نفسه تلقائياً على الجوال.
Version:     2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GPL-2.0-or-later
Text Domain: via-horizon
Tags:        rtl-language-support, custom-logo, custom-menu, translation-ready, threaded-comments
*/

/* ==========================================================================
   00 — الرموز (Design Tokens) — مطابقة للدليل الإرشادي للهوية
   ========================================================================== */
:root{
  --navy:#082B49; --teal:#00A6B4; --gold:#D6AD55; --cream:#F7F5EF;

  --navy-900:#051D33; --navy-800:#06253D; --navy-700:#0C3A61;
  --teal-700:#00808B;  --teal-300:#5FCBD4;
  --gold-700:#B08C3C;  --gold-300:#E8CE93;
  --cream-200:#EDE9DE; --white:#fff;

  --text:var(--navy);
  --muted:rgba(8,43,73,.68);
  --soft:rgba(8,43,73,.45);
  --line:rgba(8,43,73,.12);
  --line-gold:rgba(214,173,85,.45);

  --bg:var(--cream);
  --surface:#fff;
  --surface-2:var(--cream-200);

  --font:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --font-en:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;

  --h1:clamp(2.25rem,1.25rem+4.2vw,4.25rem);
  --h2:clamp(1.8rem,1.2rem+2.6vw,2.875rem);
  --h3:clamp(1.3rem,1.1rem+1vw,1.75rem);
  --body:1.0625rem;

  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4rem; --s9:6rem;

  --r-sm:10px; --r:18px; --r-lg:28px; --r-pill:999px;

  --sh-sm:0 2px 10px rgba(8,43,73,.06);
  --sh:0 14px 40px rgba(8,43,73,.12);
  --sh-lg:0 30px 80px rgba(8,43,73,.20);
  --sh-3d:0 26px 55px -20px rgba(8,43,73,.5);
  --sh-glow:0 0 40px -8px rgba(214,173,85,.55);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.3s;

  --wrap:1200px;
  --gut:clamp(1rem,4vw,2.5rem);
  --hdr-h:78px;
}

/* ==========================================================================
   01 — الأساس
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 1rem)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--body);line-height:1.85;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--teal-700);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--gold-700)}
h1,h2,h3,h4{line-height:1.24;font-weight:700;margin:0 0 var(--s4);color:var(--text);letter-spacing:-.01em}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3)}
p{margin:0 0 var(--s4)} p:last-child{margin-bottom:0}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--navy)}

.num,.en{font-family:var(--font-en);direction:ltr;unicode-bidi:isolate;font-weight:600}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:9999;
  background:var(--gold);color:var(--navy);padding:.8rem 1.4rem;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{inset-inline-start:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   02 — طبقات عامة: شريط التقدّم + حبيبات الفيلم
   ========================================================================== */
.progress{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:1100;pointer-events:none}
.progress i{display:block;height:100%;transform:scaleX(0);transform-origin:100% 50%;
  background:linear-gradient(90deg,var(--teal),var(--gold));will-change:transform}
@supports (animation-timeline:scroll()){
  .progress i{animation:prog linear both;animation-timeline:scroll(root block)}
  @keyframes prog{to{transform:scaleX(1)}}
}

/* حبيبات خفيفة تمنح إحساساً سينمائياً — ديسكتوب فقط */
.grain{position:fixed;inset:0;z-index:1050;pointer-events:none;opacity:.032;display:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (hover:hover) and (pointer:fine){ .grain{display:block} }

/* ==========================================================================
   03 — التخطيط
   ========================================================================== */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1}
.sect{padding-block:clamp(3.5rem,8.5vw,7rem);position:relative}
.sect--alt{background:var(--surface-2)}
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}

.head{text-align:center;max-width:58ch;margin:0 auto var(--s7)}
.head h2{margin-bottom:var(--s3)}
.head p{color:var(--muted);margin:0}
.arc{width:118px;height:9px;margin:var(--s3) auto var(--s4);
  background:radial-gradient(ellipse at 50% 100%,transparent 57%,var(--gold) 59%,var(--gold) 100%);
  border-radius:50%}
.arc--start{margin-inline:0 auto}

/* فاصل بين الأقسام — قوس ذهبي متوهّج */
.divider{position:relative;height:1px;background:var(--line);max-width:var(--wrap);margin-inline:auto}
.divider::after{content:"";position:absolute;inset-block-start:-4px;inset-inline-start:50%;translate:-50% 0;
  width:160px;height:9px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 100%,transparent 55%,var(--gold) 58%);
  filter:drop-shadow(0 0 10px rgba(214,173,85,.5))}

/* ==========================================================================
   04 — الأزرار
   ========================================================================== */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 2rem;min-height:50px;
  border-radius:var(--r-pill);border:1.5px solid transparent;
  font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  transform:translateZ(0);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease),
             background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
/* لمعة تمرّ عبر الزر عند التحويم */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .7s var(--ease-out)}
.btn:hover::before{transform:translateX(130%)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}

.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{background:var(--gold-300);color:var(--navy);box-shadow:var(--sh-glow)}
.btn--navy{background:var(--navy);color:var(--cream)}
.btn--navy:hover{background:var(--navy-700);color:var(--cream);box-shadow:var(--sh)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--line-gold)}
.btn--ghost:hover{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.btn--onDark{background:rgba(247,245,239,.07);color:var(--cream);border-color:rgba(247,245,239,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--onDark:hover{background:var(--cream);color:var(--navy);border-color:var(--cream)}

/* ==========================================================================
   05 — الشريط العلوي
   ========================================================================== */
.hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:1000;
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease),
             -webkit-backdrop-filter .4s var(--ease),backdrop-filter .4s var(--ease)}
.hdr__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--gut);
  display:flex;align-items:center;gap:var(--s5);min-height:var(--hdr-h)}
.hdr__logo{display:block;position:relative;flex:0 0 auto}
.hdr__logo img{height:46px;width:auto;transition:height .4s var(--ease),opacity .4s var(--ease)}
.hdr__logo .lg-light{position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0;pointer-events:none}
.nav{display:flex;gap:var(--s5);margin-inline-start:auto;align-items:center}
.nav a{color:var(--cream);font-weight:500;font-size:.97rem;position:relative;padding-block:.35rem}
.nav a::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:0;height:2px;background:var(--gold);border-radius:2px;transition:width .35s var(--ease-out)}
.nav a:hover{color:var(--gold)}
.nav a:hover::after,.nav .current-menu-item>a::after{width:100%}
.hdr__cta{display:flex;gap:var(--s3);align-items:center;flex:0 0 auto}

.hdr.is-stuck{background:rgba(247,245,239,.86);box-shadow:0 6px 30px rgba(8,43,73,.09);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.hdr.is-stuck .hdr__in{padding-block:var(--s3)}
.hdr.is-stuck .hdr__logo img{height:38px}
.hdr.is-stuck .lg-dark{opacity:0}
.hdr.is-stuck .lg-light{opacity:1}
.hdr.is-stuck .nav a{color:var(--navy)}
.hdr.is-stuck .nav a:hover{color:var(--teal-700)}
.hdr.is-stuck .btn--onDark{color:var(--navy);border-color:var(--line-gold);background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.hdr.is-stuck .btn--onDark:hover{background:var(--navy);color:var(--cream)}

.burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer;color:var(--cream);margin-inline-start:auto}
.hdr.is-stuck .burger{color:var(--navy)}
.burger span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .35s var(--ease-out),opacity .2s var(--ease)}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ==========================================================================
   06 — البطل السينمائي ثلاثي الأبعاد  ★ قلب التصميم
   طريق يتلاشى نحو أفق ذهبي، بأضواء مركبات تمرّ عليه.
   كل ذلك بـ CSS 3D خالص: بلا صور، بلا فيديو، بلا WebGL.
   VIA = الطريق  •  HORIZON = الأفق
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(100svh,900px);
  display:grid;align-items:center;
  padding-block:calc(var(--hdr-h) + var(--s8)) var(--s9);
  background:radial-gradient(120% 90% at 50% 42%,#0B3A5F 0%,var(--navy) 42%,var(--navy-900) 100%);
  perspective:900px;perspective-origin:50% 44%;
}
.scene{position:absolute;inset:0;z-index:-1;transform-style:preserve-3d;pointer-events:none}

/* نجوم/غبار خفيف أعلى الأفق */
.scene__stars{position:absolute;inset-inline:0;inset-block-start:0;height:46%;opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,rgba(247,245,239,.7),transparent),
    radial-gradient(1.5px 1.5px at 28% 58%,rgba(95,203,212,.6),transparent),
    radial-gradient(1.5px 1.5px at 44% 16%,rgba(247,245,239,.5),transparent),
    radial-gradient(2px 2px   at 61% 44%,rgba(214,173,85,.55),transparent),
    radial-gradient(1.5px 1.5px at 74% 26%,rgba(247,245,239,.6),transparent),
    radial-gradient(1.5px 1.5px at 88% 62%,rgba(95,203,212,.5),transparent),
    radial-gradient(1.5px 1.5px at 6%  72%,rgba(247,245,239,.4),transparent),
    radial-gradient(2px 2px   at 52% 76%,rgba(214,173,85,.4),transparent);
  animation:twinkle 7s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.4}50%{opacity:.75}}

/* أرضية الطريق */
.scene__floor{
  position:absolute;inset-inline:-60%;inset-block-end:-8%;height:80%;
  transform:rotateX(77deg);transform-origin:50% 100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 6%,rgba(0,0,0,.5) 44%,transparent 84%);
          mask-image:linear-gradient(to top,#000 6%,rgba(0,0,0,.5) 44%,transparent 84%);
}
.scene__grid{
  position:absolute;inset-block-start:-100%;inset-inline:0;height:300%;
  background-image:
    repeating-linear-gradient(90deg,rgba(0,166,180,.32) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(214,173,85,.24) 0 1px,transparent 1px 84px);
  animation:road 5.5s linear infinite;will-change:transform;
}
@keyframes road{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,84px,0)}}

/* أضواء المركبات المارّة على الطريق */
.streak{position:absolute;inset-block-start:-12%;width:5px;height:26%;border-radius:99px;
  background:linear-gradient(to bottom,transparent,var(--gold) 70%,var(--gold-300));
  filter:blur(1px);opacity:0;animation:streak 4.2s linear infinite;will-change:transform,opacity}
/* ملاحظة: nth-of-type لا nth-child — العنصر الأول داخل الأرضية هو .scene__grid */
.streak:nth-of-type(1){inset-inline-start:31%;animation-delay:0s}
.streak:nth-of-type(2){inset-inline-start:44%;animation-delay:1.4s;
  background:linear-gradient(to bottom,transparent,var(--teal) 70%,var(--teal-300))}
.streak:nth-of-type(3){inset-inline-start:57%;animation-delay:2.6s}
.streak:nth-of-type(4){inset-inline-start:68%;animation-delay:3.4s;
  background:linear-gradient(to bottom,transparent,var(--teal) 70%,var(--teal-300))}
@keyframes streak{
  0%{transform:translateY(0) scaleY(.4);opacity:0}
  12%{opacity:.9}
  100%{transform:translateY(420%) scaleY(1.9);opacity:0}
}

/* الأفق والتوهّج */
.scene__horizon{position:absolute;inset-inline:0;inset-block-start:40%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,173,85,.9),transparent);
  box-shadow:0 0 24px 2px rgba(214,173,85,.35)}
.scene__glow{position:absolute;inset-inline-start:50%;inset-block-start:40%;
  width:min(122vw,1180px);aspect-ratio:2/1;translate:-50% -84%;
  background:radial-gradient(ellipse at 50% 100%,rgba(0,166,180,.40) 0%,rgba(0,166,180,.14) 35%,transparent 68%);
  animation:breathe 9s ease-in-out infinite}
.scene__sun{position:absolute;inset-inline-start:50%;inset-block-start:40%;
  width:min(76vw,660px);aspect-ratio:3/1;translate:-50% -96%;
  background:radial-gradient(ellipse at 50% 100%,rgba(214,173,85,.58) 0%,rgba(214,173,85,.18) 42%,transparent 72%);
  animation:breathe 9s ease-in-out infinite reverse}
@keyframes breathe{0%,100%{opacity:.85;transform:translate(-50%,-84%) scale(1)}
                   50%{opacity:1;transform:translate(-50%,-84%) scale(1.06)}}

/* طبقات عمق تتبع المؤشر */
.scene__depth{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--ease-out)}
.orb{position:absolute;border-radius:50%;opacity:.55}
.orb--a{inset-block-start:11%;inset-inline-end:7%;width:clamp(190px,27vw,400px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,166,180,.34),transparent 66%);transform:translateZ(70px)}
.orb--b{inset-block-end:15%;inset-inline-start:3%;width:clamp(170px,23vw,330px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(214,173,85,.30),transparent 66%);transform:translateZ(120px)}

/* محتوى البطل */
.hero__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);width:100%;
  transform:translateZ(40px)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.7rem;color:var(--gold);
  font-weight:600;letter-spacing:.06em;margin:0 0 var(--s4);font-size:.95rem}
.hero__eyebrow i{width:38px;height:2px;background:var(--gold);display:block;border-radius:2px;
  transform-origin:100% 50%;animation:lineIn 1s var(--ease-out) both}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero h1{color:var(--cream);max-width:15ch;margin-bottom:var(--s5);
  text-shadow:0 4px 40px rgba(5,29,51,.6)}
.hero h1 em{font-style:normal;
  background:linear-gradient(120deg,var(--teal-300),var(--teal) 55%,var(--gold-300));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{color:rgba(247,245,239,.85);max-width:54ch;font-size:1.15rem;margin-bottom:var(--s6)}
.hero__btns{display:flex;gap:var(--s3);flex-wrap:wrap}

/* دخول متدرّج لعناصر البطل */
.hero__eyebrow,.hero h1,.hero__lead,.hero__btns{animation:up .95s var(--ease-out) both}
.hero h1{animation-delay:.1s}
.hero__lead{animation-delay:.22s}
.hero__btns{animation-delay:.34s}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero__in{animation:none}

/* تلاشي البطل مع التمرير (حيث يدعمه المتصفح) */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero__in{animation:heroOut linear both;animation-timeline:scroll(root block);animation-range:0 78vh}
    @keyframes heroOut{
      to{transform:translateZ(40px) translateY(-56px) scale(.965);opacity:.15}
    }
    .scene__floor{animation:floorOut linear both;animation-timeline:scroll(root block);animation-range:0 78vh}
    @keyframes floorOut{to{opacity:.25}}
  }
}

.hero__scroll{position:absolute;inset-block-end:var(--s5);inset-inline-start:50%;translate:-50% 0;
  color:rgba(247,245,239,.5);font-size:.8rem;display:grid;justify-items:center;gap:.4rem;
  animation:up 1s var(--ease-out) .6s both}
.hero__scroll i{display:block;width:1px;height:36px;
  background:linear-gradient(to bottom,transparent,var(--gold));animation:sink 2.2s ease-in-out infinite}
@keyframes sink{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}

/* ==========================================================================
   07 — شريط الأرقام
   ========================================================================== */
.stats{background:var(--navy-900);position:relative;z-index:1;overflow:hidden}
.stats::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.stats__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s6) var(--gut);
  display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:var(--s4)}
.stats b{display:block;font-family:var(--font-en);font-size:clamp(1.9rem,4.8vw,2.9rem);
  color:var(--gold);line-height:1.05;text-shadow:0 0 30px rgba(214,173,85,.35)}
.stats small{color:rgba(247,245,239,.72);font-size:.9rem}
.stats div+div{border-inline-start:1px solid rgba(247,245,239,.14)}

/* ==========================================================================
   08 — الشريط المتحرك (خدماتنا)
   ========================================================================== */
.marquee{background:var(--navy);overflow:hidden;padding-block:var(--s4);
  border-block:1px solid rgba(247,245,239,.1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__t{display:flex;gap:2.6rem;width:max-content;animation:mq 46s linear infinite;will-change:transform}
.marquee:hover .marquee__t{animation-play-state:paused}
.marquee span{color:rgba(247,245,239,.72);font-weight:600;white-space:nowrap;font-size:.98rem;
  display:inline-flex;align-items:center;gap:2.6rem}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   09 — البطاقات والعمق ثلاثي الأبعاد
   ========================================================================== */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s6);box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transform:translateZ(0);
  transition:box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card:hover{box-shadow:var(--sh);border-color:var(--line-gold)}

/* لمعة ذهبية تتبع المؤشر داخل البطاقة */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(214,173,85,.20),transparent 46%)}
.tilt.is-active .card::after{opacity:1}

/* حاوية الإمالة — تُفعّل بـ JS على الأجهزة المزوّدة بمؤشر فقط */
.tilt{perspective:1000px}
.tilt>*{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease);transform-style:preserve-3d}
.tilt.is-active>*{transition:transform .12s linear}
.tilt.is-active .card{box-shadow:var(--sh-3d)}
.tilt .lift{transform:translateZ(42px)}

/* بطاقة المسار */
.track{text-align:center;padding-block:var(--s7)}
.track__bar{position:absolute;inset-block-start:0;inset-inline:0;height:5px}
.track__ic{width:98px;height:98px;margin:0 auto var(--s5);border-radius:24px;
  display:grid;place-items:center;position:relative;
  box-shadow:0 18px 34px -14px rgba(8,43,73,.75);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease)}
.track:hover .track__ic{transform:translateY(-8px) rotateX(16deg) rotateY(-12deg);
  box-shadow:0 26px 44px -16px rgba(8,43,73,.85)}
.track__ic img{width:54px;filter:brightness(0) invert(1)}
.track--t1 .track__bar,.track--t1 .track__ic{background:var(--gold)}
.track--t2 .track__bar,.track--t2 .track__ic{background:var(--navy)}
.track--t3 .track__bar,.track--t3 .track__ic{background:var(--teal)}
.track h3{margin-bottom:var(--s3)}
.track p{color:var(--muted);font-size:.97rem;margin-bottom:var(--s5)}

/* القيم */
.value{display:flex;gap:var(--s4);align-items:flex-start}
.value__n{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:var(--gold);font-family:var(--font-en);font-weight:700;
  box-shadow:0 12px 24px -12px rgba(8,43,73,.85);
  transition:transform .4s var(--ease-out)}
.value:hover .value__n{transform:rotateY(180deg)}
.value h3{font-size:1.15rem;margin-bottom:.35rem}
.value p{color:var(--muted);font-size:.95rem;margin:0}

/* من نحن */
.about{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center;perspective:1200px}
.about__card{display:grid;place-items:center;padding:var(--s8) var(--s6);
  background:linear-gradient(160deg,var(--cream),var(--white));
  border:1px solid var(--line-gold);border-radius:var(--r-lg);
  box-shadow:var(--sh-3d);transform:rotateY(-9deg) rotateX(4deg);
  transition:transform .8s var(--ease-out),box-shadow .8s var(--ease)}
.about__card:hover{transform:rotateY(0) rotateX(0);box-shadow:var(--sh-lg)}
.about__card img{max-width:270px}
.about p{color:var(--muted)}

/* ==========================================================================
   10 — الأسطول
   ========================================================================== */
.filters{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;margin-bottom:var(--s6)}
.filter{padding:.62rem 1.4rem;min-height:46px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--cream);color:var(--navy);
  font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  transition:transform .3s var(--ease-out),background-color var(--dur) var(--ease),
             color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.filter:hover{border-color:var(--gold);transform:translateY(-2px)}
.filter[aria-pressed="true"]{background:var(--navy);color:var(--cream);border-color:var(--navy);
  box-shadow:0 10px 22px -12px rgba(8,43,73,.9)}

[data-veh]{transition:opacity .4s var(--ease),transform .4s var(--ease-out)}
[data-veh].is-out{opacity:0;transform:scale(.94)}

.veh{padding:var(--s5)}
.veh__ic{width:64px;margin-bottom:var(--s3);opacity:.92;
  transition:transform .5s var(--ease-out)}
.tilt.is-active .veh__ic{transform:translateZ(30px) scale(1.06)}
.veh__cat{font-size:.76rem;font-weight:700;color:var(--teal-700);letter-spacing:.05em}
.veh__en{font-family:var(--font-en);font-weight:700;font-size:1.18rem;color:var(--navy);
  direction:ltr;text-align:right;margin:.3rem 0 .1rem}
.veh__ar{color:var(--gold-700);font-weight:600;font-size:.97rem}
.veh__arc{width:88px;height:7px;margin:var(--s3) 0 var(--s4);border-radius:50%;
  background:radial-gradient(ellipse at 50% 100%,transparent 57%,var(--gold) 59%)}
.veh__tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tag{font-size:.78rem;font-weight:600;padding:.34rem .8rem;border-radius:var(--r-sm);
  background:rgba(214,173,85,.16);color:var(--navy)}
.tag--cap{background:var(--navy);color:var(--cream)}
.empty{text-align:center;color:var(--muted);padding:var(--s7)}

/* ==========================================================================
   11 — النقش والقسم المؤسسي + بقعة الضوء
   ========================================================================== */
.pattern{background-color:var(--navy);
  background-image:
    repeating-linear-gradient(115deg,rgba(247,245,239,.05) 0 2px,transparent 2px 48px),
    repeating-linear-gradient(65deg,rgba(247,245,239,.05) 0 2px,transparent 2px 48px)}
.corp{color:var(--cream);text-align:center;position:relative;overflow:hidden}
.corp h2{color:var(--cream)}
.corp p{color:rgba(247,245,239,.84);max-width:62ch;margin-inline:auto}
/* بقعة ضوء تتبع المؤشر على الأقسام الداكنة */
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .5s var(--ease);
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),
             rgba(214,173,85,.16),transparent 55%)}
.spot.is-active::before{opacity:1}

/* ==========================================================================
   12 — الأسئلة الشائعة
   ========================================================================== */
.faq{max-width:840px;margin-inline:auto}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:var(--s3);overflow:hidden;
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}
.faq details[open]{box-shadow:var(--sh-sm);border-color:var(--line-gold)}
.faq summary{padding:var(--s4) var(--s5);cursor:pointer;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:58px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:14px;height:14px;
  border-inline-end:2.5px solid var(--gold-700);border-block-end:2.5px solid var(--gold-700);
  transform:rotate(45deg) translateY(-3px);transition:transform .35s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details[open] summary{background:var(--surface-2)}
.faq .a{padding:var(--s4) var(--s5);color:var(--muted);font-size:.97rem;margin:0}

/* ==========================================================================
   13 — النماذج
   ========================================================================== */
.formwrap{max-width:780px;margin-inline:auto}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.f{display:flex;flex-direction:column;gap:.4rem}
.f--full{grid-column:1/-1}
.f label{font-size:.9rem;font-weight:600}
.f label .req{color:#C0392B}
.f input,.f select,.f textarea{
  font:inherit;padding:.9rem 1rem;min-height:50px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--surface);color:var(--text);width:100%;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.f textarea{min-height:124px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,166,180,.16)}
.f input[aria-invalid="true"],.f select[aria-invalid="true"]{border-color:#C0392B}
.f .err{font-size:.82rem;color:#C0392B;min-height:1.15em}
.note{font-size:.85rem;color:var(--soft);margin-top:var(--s3)}
.alert{border-radius:var(--r);padding:var(--s5);text-align:center;font-weight:600;margin-bottom:var(--s5)}
.alert--ok{background:rgba(0,166,180,.10);border:1.5px solid var(--teal);color:var(--navy)}
.alert--bad{background:rgba(192,57,43,.08);border:1.5px solid #C0392B;color:#7B241C}

/* ==========================================================================
   14 — الفوتر + واتساب
   ========================================================================== */
.ftr{color:rgba(247,245,239,.75);padding-block:var(--s8) var(--s5);position:relative}
.ftr::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--s7)}
.ftr img.lg{width:170px;margin-bottom:var(--s4)}
.ftr h4{color:var(--cream);font-size:1rem;margin-bottom:var(--s4)}
.ftr a{color:rgba(247,245,239,.75);display:inline-block;padding-block:.28rem}
.ftr a:hover{color:var(--gold)}
.ftr .slogan{color:var(--gold);font-weight:600;margin-bottom:var(--s3)}
.ftr__bot{border-top:1px solid rgba(247,245,239,.14);margin-top:var(--s7);padding-top:var(--s4);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  font-size:.85rem;color:rgba(247,245,239,.55)}
.social{display:flex;gap:var(--s3);margin-top:var(--s3)}
.social a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;padding:0;
  border:1px solid rgba(247,245,239,.28);
  transition:transform .35s var(--ease-out),background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-4px)}
.social svg{width:17px;height:17px;fill:currentColor}

.wa{position:fixed;inset-inline-start:20px;inset-block-end:20px;z-index:900;
  width:58px;height:58px;display:grid;place-items:center;background:#25D366;color:#fff;
  border-radius:var(--r-pill);box-shadow:0 12px 30px -8px rgba(37,211,102,.7);
  transition:transform .35s var(--ease-out)}
.wa::before{content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid #25D366;animation:ping 2.6s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
.wa:hover{transform:scale(1.1);color:#fff}
.wa svg{width:28px;height:28px;fill:currentColor;position:relative}

/* ==========================================================================
   15 — الظهور عند التمرير
   ========================================================================== */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv:nth-child(2){transition-delay:.09s}
.rv:nth-child(3){transition-delay:.18s}
.rv:nth-child(4){transition-delay:.27s}
.rv:nth-child(5){transition-delay:.34s}

/* ==========================================================================
   16 — محتوى ووردبريس العام
   ========================================================================== */
.entry{max-width:820px;margin-inline:auto}
.entry img{border-radius:var(--r);margin-block:var(--s5)}
.entry blockquote{border-inline-start:4px solid var(--gold);margin:var(--s5) 0;
  padding:var(--s4) var(--s5);background:var(--surface-2);border-radius:0 var(--r) var(--r) 0}
.entry table{width:100%;border-collapse:collapse;margin-block:var(--s5)}
.entry th,.entry td{border:1px solid var(--line);padding:.7rem 1rem;text-align:start}
.entry th{background:var(--surface-2);font-weight:700}
.entry code{background:var(--surface-2);padding:.15em .45em;border-radius:5px;font-size:.92em}

.page-hero{position:relative;overflow:hidden;color:var(--cream);text-align:center;
  padding-block:calc(var(--hdr-h) + var(--s7)) var(--s7)}
.page-hero h1{color:var(--cream);margin-bottom:0}
.page-hero .arc{filter:drop-shadow(0 0 10px rgba(214,173,85,.5))}
.crumbs{font-size:.86rem;color:rgba(247,245,239,.62);margin-top:var(--s3)}
.crumbs a{color:var(--gold)}
.pager{display:flex;gap:var(--s3);justify-content:center;margin-top:var(--s7);flex-wrap:wrap}
.pager .page-numbers{padding:.6rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--navy)}
.pager .current{background:var(--navy);color:var(--cream);border-color:var(--navy)}

/* ==========================================================================
   17 — الاستجابة (الجوال يحصل على نسخة أخف تلقائياً)
   ========================================================================== */
@media (max-width:960px){
  .nav{position:fixed;inset-block-start:var(--hdr-h);inset-inline:0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--navy);
    padding:var(--s4) var(--gut) var(--s6);
    transform:translateY(-140%);transition:transform .4s var(--ease-out);
    box-shadow:var(--sh);max-height:calc(100svh - var(--hdr-h));overflow-y:auto}
  .nav[data-open="true"]{transform:translateY(0)}
  .nav a{color:var(--cream)!important;font-size:1.05rem;padding-block:.85rem;
    border-block-end:1px solid rgba(247,245,239,.1)}
  .nav a::after{display:none}
  .burger{display:block;order:2}
  .hdr__cta{order:3}
  .hdr__cta .btn--onDark{display:none}
  .about{grid-template-columns:1fr;gap:var(--s6)}
  .about__card{transform:none;order:-1}
  .ftr__grid{grid-template-columns:1fr;gap:var(--s6)}
  .scene__depth{transform:none!important}
}
@media (max-width:640px){
  :root{--hdr-h:68px}
  .stats__in{grid-template-columns:1fr;gap:var(--s4)}
  .stats div+div{border-inline-start:0;border-block-start:1px solid rgba(247,245,239,.14);padding-top:var(--s4)}
  .form{grid-template-columns:1fr}
  .hero__btns .btn{flex:1 1 100%}
  .hero{min-height:auto;padding-block:calc(var(--hdr-h) + var(--s7)) var(--s8)}
  .scene__floor{height:58%}
  .hero__scroll,.orb,.streak,.scene__stars{display:none}   /* توفير أداء على الجوال */
  .marquee__t{animation-duration:30s}
}

/* ==========================================================================
   18 — تقليل الحركة + الطباعة
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .scene__grid,.streak,.scene__stars,.scene__glow,.scene__sun,.marquee__t,.wa::before{animation:none}
  .streak{display:none}
  .rv{opacity:1;transform:none}
  .about__card{transform:none}
  .grain{display:none}
}
@media print{
  .hdr,.wa,.hero__scroll,.filters,.btn,.grain,.progress,.marquee{display:none!important}
  body{background:#fff;color:#000}
  .scene{display:none}
}