/*
Theme Name: Super Clean Jeddah
Theme URI: https://superclean-riyadh.com/
Author: Super Clean
Description: قالب ووردبريس عربي (RTL) لشركات النظافة العامة — سوبر كلين جدة. يشمل هيرو بشاشة كاملة، قائمة شاشة كاملة، شبكة خدمات، خطوات العمل، مناطق التغطية، أسئلة شائعة، وأزرار واتساب.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: superclean
Tags: rtl-language-support, one-column, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   Super Clean Jeddah — سوبر كلين جدة
   نظام التصميم: لوحة ألوان coolors (أخضر ليموني → أزرق عميق)
   ========================================================================== */

:root{
  /* اللوحة الأساسية — أزرق (بدون 03045e و023e8a) */
  --c6:#00509D;
  /* الأفتح */
  --c7:#00509D;
  /* الأعمق */

  /* سلّم داكن مشتق من 0077b6 (تغميق متدرّج لنفس اللون) */
  --d1:#003F88;
  /* لون النص فوق التعبئة البرتقالية فقط */
  --d2:#00509D;
  --d3:#00509D;
  --d4:#00509D;
  --deep:var(--b1);
  --ink:var(--b1);
  /* اللمسات — برتقالي بدرجاته */
  --o1:#FFD500;
  --o2:var(--y2);
  --o3:var(--y2);
  --o4:var(--y1);
  --o5:var(--y1);
  --o6:var(--y1);
  --grad-sun:linear-gradient(118deg, var(--y2) 0%, var(--y1) 100%);
  --grad-sea:linear-gradient(118deg, var(--b2) 0%, var(--b1) 100%);
  /* الأسطح والنصوص */
  --paper:var(--d1);
  --paper-2:var(--w3);
  --surface:var(--w1);
  --white:#ffffff;
  --txt:var(--b1);
  --txt-2:rgba(0,63,136,.86);
  /* نص ثانوي — مشتق من caf0f8 */
  --txt-3:rgba(255,255,255,.62);
  --line:rgba(0,80,157,.20);
  /* الخطوط */
  --display:"Cairo","Segoe UI",Tahoma,system-ui,sans-serif;
  --body:"Cairo","Segoe UI",Tahoma,system-ui,sans-serif;
  /* المقاييس */
  --pad:clamp(18px,5vw,74px);
  --r-pill:999px;
  --r-card:22px;
  --shadow-1:none;
  --shadow-2:none;
  --shadow-sun:none;
  --header-h:78px;
  --bg-1:var(--w2);
  /* الأعمق — نص أبيض */
  --bg-2:#00509D;
  /* المتوسط — نص داكن */
  --bg-3:#00509D;
  /* الأفتح — نص داكن */
  --surface:var(--bg-1);
  --on-bright:#003F88;
  --scrim:0,37,58;
  /* سطح النصوص — أبيض فوقه */
  --bg-2:#00509D;
  /* الإطار:الهيرو، الشريط، التوهّجات، حالات المرور */
  --on-fill:#003F88;
  /* لون النص فوق التعبئة البرتقالية فقط */
  --line:rgba(255,255,255,.26);
  --h-1:#FFD500;
  /* #FFD500 — العناوين الكبيرة */
  --h-2:var(--o1);
  --h-2:#FFD500;
  --grad-orange:linear-gradient(200deg, var(--y2) 0%, var(--y1) 100%);
  --ink-dark:#003F88;
  --o1:var(--y2);
  --base:#003F88;
  /* القاعدة العميقة — مشتقة من 0077b6 */
  --surface:#00509D;
  /* الأسطح المرتفعة:البطاقات واللوحات */
  --bg-1:#00509D;
  --bg-2:var(--w3);
  --bg-3:var(--w1);
  --b1:#003F88;
  /* الأزرق العميق:النصوص، الأقسام الداكنة، الفوتر */
  --b2:#00509D;
  /* الأزرق الأفتح:التدرّجات والحدود وحالات المرور */
  --y1:#FDC500;
  /* الأصفر الذهبي:نهاية التدرّجات */
  --y2:#FFD500;
  /* الأصفر الفاتح:بداية التدرّجات */
  --w1:#FFFFFF;
  /* البطاقات */
  --w2:#F7FAFD;
  /* خلفية الصفحة */
  --w3:#EDF3FA;
  /* أقسام متبادلة */

  --base:var(--w2);
  --paper:var(--w2);
  --on-fill:var(--b1);
  --hd:var(--b1);
  --tx:var(--b1);
  --card:var(--w1);
  --tint:var(--w3);
  --ln:rgba(0,80,157,.20);
  --txt-3:rgba(0,63,136,.7)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--d1);color:var(--txt);font-family:var(--body);font-size:17px;line-height:1.9;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.28;margin:0;letter-spacing:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--o4);outline-offset:3px;border-radius:6px}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- عناصر مشتركة ---------- */
.eyebrow{font-family:var(--body);font-size:.8rem;font-weight:400;letter-spacing:.16em;color:var(--o3);display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";height:1px;width:54px;background:currentColor;opacity:.5}
.eyebrow.is-light{color:var(--o3)}
.h-sec{font-size:clamp(1.9rem,4.2vw,3.15rem)}
.lede{font-size:1.06rem;color:var(--txt-2);max-width:62ch}
.btn{display:inline-flex;align-items:center;gap:14px;padding:15px 26px;border-radius:var(--r-pill);font-family:var(--display);font-weight:700;font-size:.96rem;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.38);color:#fff;transition:transform .3s cubic-bezier(.2,.7,.3,1), background .35s, border-color .35s, box-shadow .3s;will-change:transform}
.btn:hover{background:#fff;color:var(--d1);border-color:#fff;transform:translateY(-2px)}
.btn .arw{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:0 0 auto;transition:transform .3s, background .3s}
.btn:hover .arw{background:var(--o4);color:var(--d1);transform:translateX(-4px)}
.btn--sun{background:var(--grad-sun);background-size:180% 100%;color:var(--d1)}
.btn--sun:hover{background-position:100% 0;color:var(--d1)}
.btn--sun .arw{background:rgba(0,63,136,.20);color:var(--d1)}
.btn--sun:hover .arw{background:var(--d1);color:var(--o3)}
.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn--ghost:hover{background:#fff;color:var(--d1);border-color:#fff}
/* ==========================================================================
   1) الهيدر — نفس بنية القائمة في المرجع
   ========================================================================== */
.site-head{position:fixed;inset-block-start:0;inset-inline:0;z-index:70;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding-inline:clamp(16px,3.4vw,44px);transition:height .35s, background .35s, box-shadow .35s, backdrop-filter .35s}
.site-head.is-stuck{height:74px;background:rgba(0,63,136,.94);backdrop-filter:blur(14px)}
.head-left{display:flex;align-items:center;gap:12px}
/* زر القائمة الدائري */
.burger{width:52px;height:52px;border-radius:50%;background:var(--grad-sun);color:var(--d1);display:grid;place-items:center;gap:0;flex:0 0 auto;position:relative;background-size:180% 100%;transition:background-position .45s, transform .3s, box-shadow .3s}
.burger:hover{background-position:100% 0;transform:scale(1.06)}
.burger i{position:absolute;inset-inline:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .2s, width .3s}
.burger i:nth-child(1){transform:translateY(-6px)}
.burger i:nth-child(2){inset-inline-end:16px;inset-inline-start:22px}
.burger i:nth-child(3){transform:translateY(6px)}
.burger:hover i:nth-child(2){inset-inline-start:16px}
.pill-link{display:inline-flex;align-items:center;height:44px;padding-inline:22px;border:1.5px solid rgba(255,255,255,.55);border-radius:var(--r-pill);color:#fff;font-weight:400;font-size:.94rem;transition:background .3s, color .3s, border-color .3s}
.pill-link:hover{background:var(--o3);color:var(--d1);border-color:var(--o3)}
.icon-btn{width:44px;height:44px;border-radius:50%;color:#fff;display:grid;place-items:center;transition:background .3s, color .3s, transform .3s}
.icon-btn:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.icon-btn.is-wa:hover{background:var(--o3);color:#003F88}
/* الشعار */
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand-mark{width:44px;height:44px;flex:0 0 auto}
.brand-txt{display:flex;flex-direction:column;line-height:1.05;text-align:start}
.brand-txt b{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:.01em}
.brand-txt span{font-size:.68rem;letter-spacing:.22em;opacity:.8;font-weight:400}
/* ==========================================================================
   2) الهيرو
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:calc(var(--header-h) + 24px) var(--pad) clamp(78px,11vh,120px);overflow:hidden;isolation:isolate;color:#fff}
/* الخلفية: تدرّج عميق + عروق رخام + لمعة تمر (توقيع الهوية) */
.hero-bg{position:absolute;inset:0;z-index:-3;background:
  radial-gradient(72% 62% at 14% 94%, rgba(253,197,0,.46) 0%, rgba(253,197,0,.14) 46%, transparent 72%),
  radial-gradient(118% 88% at 88% 4%, var(--c6) 0%, transparent 54%),
  radial-gradient(100% 80% at 4% 30%, var(--c6) 0%, transparent 60%),
  linear-gradient(200deg, var(--c7) 0%, var(--d3) 46%, var(--d1) 100%)}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;mix-blend-mode:luminosity}
.hero-veins{position:absolute;inset:0;z-index:-2;opacity:.5;pointer-events:none}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top, rgba(0,63,136,.82) 0%, rgba(0,63,136,.26) 44%, rgba(0,63,136,.58) 100%)}
.hero-shine{position:absolute;z-index:-1;inset-block:-30%;inline-size:26%;inset-inline-start:-30%;background:linear-gradient(100deg, transparent, rgba(255,213,0,.20) 40%, rgba(255,255,255,.38) 50%, rgba(72,202,228,.22) 60%, transparent);transform:rotate(14deg);filter:blur(6px);animation:sweep 9s cubic-bezier(.55,0,.45,1) 1.4s infinite}
@keyframes sweep{
  0%{inset-inline-start:-30%; opacity:0}
  12%{opacity:1}
  55%{inset-inline-start:118%; opacity:0}
  100%{inset-inline-start:118%; opacity:0}
}
.hero-inner{width:100%;max-width:1320px;margin:0 auto;display:grid;gap:26px;justify-items:start;text-align:start}
.hero-inner > *{animation:heroIn .95s cubic-bezier(.2,.7,.3,1) both}
.hero-inner > *:nth-child(1){animation-delay:.15s}
.hero-inner > *:nth-child(2){animation-delay:.3s}
.hero-inner > *:nth-child(3){animation-delay:.45s}
.hero-inner > *:nth-child(4){animation-delay:.6s}
@keyframes heroIn{from{opacity:0; transform:translateY(32px)} to{opacity:1; transform:none}}
.hero-eyebrow{font-size:.86rem;font-weight:400;letter-spacing:.2em;color:var(--o3)}
.hero h1{font-size:clamp(2.3rem,6.8vw,5rem);font-weight:900;line-height:1.22;max-width:20ch;text-wrap:balance}
.hero h1 em{font-style:normal;background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
.hero h1 em{color:var(--o3)}
}
.hero-sub{font-size:clamp(1rem,1.5vw,1.18rem);color:rgba(255,255,255,.92);max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}
/* شريط الخدمات السريع أسفل الهيرو */
.hero-strip{position:absolute;inset-block-end:0;inset-inline:0;z-index:2;display:flex;gap:clamp(16px,3vw,46px);justify-content:center;flex-wrap:wrap;padding:16px var(--pad);font-size:.86rem;font-weight:400;background:rgba(0,63,136,.62);backdrop-filter:blur(8px);border-block-start:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.hero-strip span{display:inline-flex;align-items:center;gap:9px}
.hero-strip span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--o4)}
/* سهم النزول */
.scroll-cue{position:absolute;inset-inline:0;inset-block-end:76px;z-index:3;display:grid;place-items:center;color:rgba(255,255,255,.85)}
.scroll-cue svg{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
/* ==========================================================================
   3) قائمة الشاشة الكاملة
   ========================================================================== */
.overlay{position:fixed;inset:0;z-index:90;color:#fff;background:
    radial-gradient(62% 56% at 8% 96%, rgba(253,197,0,.34) 0%, transparent 68%),
    linear-gradient(200deg, var(--c7) 0%, var(--d3) 46%, var(--d1) 100%);display:grid;grid-template-rows:auto 1fr;padding-block-end:30px;clip-path:circle(0% at 42px 48px);visibility:hidden;transition:clip-path .7s cubic-bezier(.76,0,.24,1), visibility .7s}
.overlay.is-open{clip-path:circle(150% at 42px 48px);visibility:visible}
.overlay-top{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding-inline:clamp(16px,3.4vw,44px)}
.close-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center;transition:background .3s, transform .3s}
.close-btn:hover{background:var(--o3);color:var(--d1);border-color:var(--o3);transform:rotate(90deg)}
.overlay-body{overflow:auto;display:grid;gap:clamp(26px,5vw,70px);grid-template-columns:1.2fr .8fr;align-content:center;padding:clamp(20px,4vw,50px) clamp(20px,5vw,74px)}
.menu-main li{border-block-end:1px solid rgba(255,255,255,.14)}
.menu-main a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(11px,1.7vw,20px) 0;font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,3.1vw,2.15rem);transition:color .3s, padding-inline-start .3s}
.menu-main a small{font-family:var(--body);font-size:.68rem;font-weight:400;letter-spacing:.14em;opacity:.45}
.menu-main a:hover{color:var(--o3);padding-inline-start:16px}
.menu-side h4{font-size:.8rem;letter-spacing:.18em;color:var(--o3);font-weight:400;font-family:var(--body);margin-block-end:14px}
.menu-side ul{display:grid;gap:9px;margin-block-end:32px}
.menu-side a{color:rgba(255,255,255,.9);font-size:.98rem}
.menu-side a:hover{color:var(--o3)}
.menu-call{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.9rem);direction:ltr;display:block;color:var(--o3)}
/* ==========================================================================
   4) شريط الثقة
   ========================================================================== */
.trust{background:var(--d2);border-block:1px solid var(--line)}
/* ==========================================================================
   5) الخدمات
   ========================================================================== */
.sec{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid;gap:16px;margin-block-end:clamp(32px,5vw,58px);max-width:70ch}
.sec-head.is-split{grid-template-columns:1fr auto;align-items:end;max-width:none;gap:26px}
.sec-head.is-split > div{display:grid;gap:14px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.svc{position:relative;overflow:hidden;isolation:isolate;background:var(--d3);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,2.6vw,34px);display:grid;gap:12px;align-content:start;transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s}
.svc::after{/* لمعة التلميع عند المرور */
  content:"";position:absolute;z-index:-1;inset-block:-40%;inline-size:45%;inset-inline-start:-60%;background:linear-gradient(100deg,transparent,rgba(255,213,0,.40),rgba(255,255,255,.60),transparent);transform:rotate(16deg);transition:inset-inline-start .8s cubic-bezier(.3,.7,.3,1)}
.svc:hover{transform:translateY(-6px);background:var(--d4);border-color:rgba(255,213,0,.45)}
.svc:hover::after{inset-inline-start:120%}
.svc h3{font-size:1.18rem}
.svc p{font-size:.94rem;color:var(--txt-2)}
.svc ul{display:flex;flex-wrap:wrap;gap:7px;margin-block-start:4px}
.svc li{font-size:.79rem;padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--txt-2)}
/* ==========================================================================
   6) الخطوات
   ========================================================================== */
.steps-sec{color:#fff;background:
    radial-gradient(56% 52% at 92% 4%, rgba(253,197,0,.30) 0%, transparent 64%),
    linear-gradient(200deg, var(--c6) 0%, var(--d3) 55%, var(--d2) 100%)}
.steps-sec .lede{color:rgba(255,255,255,.88)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);counter-reset:s}
.step{padding-block-start:22px;border-block-start:2px solid rgba(255,255,255,.2);display:grid;gap:10px;align-content:start;transition:border-color .4s}
.step:hover{border-color:var(--o4)}
.step b{font-family:var(--display);font-size:.82rem;font-weight:700;letter-spacing:.14em;color:var(--o3);counter-increment:s}
.step b::before{content:"0" counter(s) " — "}
.step h3{font-size:1.16rem}
.step p{font-size:.93rem;color:rgba(255,255,255,.85)}
/* ==========================================================================
   7) المناطق + لماذا نحن
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,74px);align-items:center}
.areas{display:flex;flex-wrap:wrap;gap:9px;margin-block-start:24px}
.areas li{padding:8px 15px;border-radius:var(--r-pill);background:var(--d3);border:1px solid var(--line);font-size:.9rem;transition:background .3s, color .3s, transform .3s}
.areas li:hover{background:var(--grad-sun);color:var(--d1);border-color:transparent;transform:translateY(-2px)}
.why{display:grid;gap:14px}
.why-item{background:var(--d3);border:1px solid var(--line);border-radius:18px;padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.why-item .tick{width:34px;height:34px;border-radius:50%;background:var(--grad-sun);color:var(--d1);display:grid;place-items:center;flex:0 0 auto}
.why-item h3{font-size:1.03rem;margin-block-end:3px}
.why-item p{font-size:.92rem;color:var(--txt-2)}
/* ==========================================================================
   8) الأسئلة الشائعة
   ========================================================================== */
.faq{display:grid;gap:10px;max-width:920px}
.faq-item{background:var(--d3);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.faq-q{width:100%;text-align:start;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 22px;font-family:var(--display);font-weight:700;font-size:1.02rem}
.faq-q .sign{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;flex:0 0 auto;transition:transform .35s, background .35s, color .35s}
.faq-item.is-open .faq-q .sign{transform:rotate(45deg);background:var(--grad-sun);color:var(--d1)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.3,.7,.3,1)}
.faq-a p{padding:0 22px 22px;font-size:.95rem;color:var(--txt-2)}
/* ==========================================================================
   9) نداء الحجز + الفوتر
   ========================================================================== */
.cta-band{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:
    radial-gradient(66% 72% at 6% 100%, rgba(253,197,0,.54) 0%, rgba(253,197,0,.14) 48%, transparent 74%),
    linear-gradient(120deg, var(--d3), var(--c7) 46%, var(--c6));border-radius:clamp(22px,3vw,34px);padding:clamp(34px,5vw,64px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.cta-band h2{font-size:clamp(1.6rem,3.4vw,2.5rem);max-width:24ch}
.cta-band p{color:rgba(255,255,255,.92);margin-block-start:10px}
.cta-band .bubbles{position:absolute;inset:0;z-index:-1;opacity:.35}
.site-foot{background:var(--d1);border-block-start:1px solid var(--line);color:var(--txt-2);margin-block-start:clamp(48px,7vw,90px)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(24px,3vw,44px);padding-block:clamp(46px,6vw,72px)}
.site-foot h4{color:#fff;font-size:.86rem;letter-spacing:.16em;font-family:var(--body);font-weight:400;margin-block-end:16px}
.site-foot li{margin-block-end:9px;font-size:.94rem}
.site-foot a:hover{color:var(--o3)}
.foot-brand .brand{color:#fff;margin-block-end:16px}
.foot-brand p{font-size:.94rem;max-width:38ch}
.foot-call{font-family:var(--display);font-weight:700;color:var(--o3);font-size:1.35rem;direction:ltr;display:inline-block}
.foot-bar{border-block-start:1px solid rgba(255,255,255,.12);padding-block:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem}
/* واتساب عائم */
.wa-float{position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--o4);color:#003F88;display:grid;place-items:center;transition:transform .3s}
.wa-float:hover{transform:scale(1.08)}
/* ==========================================================================
   حركة الظهور
   ========================================================================== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
/* ==========================================================================
   الاستجابة
   ========================================================================== */
@media (max-width:1080px){
.svc-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.foot-grid{grid-template-columns:1fr 1fr}
.overlay-body{grid-template-columns:1fr}
}
@media (max-width:860px){
.split{grid-template-columns:1fr}
.cta-band{grid-template-columns:1fr}
.sec-head.is-split{grid-template-columns:1fr}
.hide-sm{display:none !important}
.hero-strip{font-size:.78rem;gap:14px}
.scroll-cue{inset-block-end:96px}
}
@media (max-width:620px){
body{font-size:16px}
.svc-grid{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr}
.hero-inner{justify-items:start}
.brand-txt span{display:none}
.hero-strip{display:none}
.scroll-cue{inset-block-end:34px}
}
@media (prefers-reduced-motion:reduce){
*{animation:none !important;transition-duration:.01ms !important}
.rv{opacity:1;transform:none}
}
/* ==========================================================================
   طبقة الأقسام — الخلفيات محصورة في: 0077b6 / 0096c7 / 00b4d8
   القاعدة: النص أبيض فوق 0077b6، وداكن فوق 0096c7 و00b4d8،
   والبرتقالي يُستخدم كتعبئة (أزرار/أيقونات/حدود) لا كلون خط.
   ========================================================================== */
body{background:var(--bg-1);color:#fff}
/* ---- أقسام بخلفية فاتحة ونص داكن ---- */
.sec--mid{background:var(--bg-2);color:var(--on-bright)}
.sec--bright{background:var(--bg-3);color:var(--on-bright)}
.sec--mid .lede,.sec--bright .lede{color:var(--on-bright)}
.sec--mid .eyebrow,.sec--bright .eyebrow{color:var(--on-bright)}
.sec--mid .btn,.sec--bright .btn{background:var(--bg-1);border-color:var(--bg-1);color:#fff}
.sec--mid .btn:hover,.sec--bright .btn:hover{background:var(--on-bright);border-color:var(--on-bright);color:#fff}
/* ---- العنوان التمهيدي: نص واضح + خط برتقالي ---- */
.eyebrow{color:#fff}
.eyebrow.is-light{color:#fff}
.eyebrow::after{background:var(--o4);opacity:1;height:2px}
/* ---- البطاقات: دائماً 0077b6 بنص أبيض ---- */
.svc,.why-item,.faq-item,.areas li{background:var(--bg-1);color:#fff;border-color:rgba(255,255,255,.24)}
.svc p,.why-item p,.faq-a p{color:#fff}
.svc li{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.svc:hover{background:var(--bg-1);border-color:var(--o3)}
.faq-q .sign{background:rgba(255,255,255,.18);color:#fff}
.trust{background:var(--bg-2);border-block:0}
/* ---- الأسطح الداكنة الممتدة ---- */
.site-head.is-stuck{background:rgba(0,80,157,.96)}
.hero-bg{background:
    radial-gradient(70% 60% at 14% 94%, rgba(253,197,0,.50) 0%, rgba(253,197,0,.16) 46%, transparent 72%),
    radial-gradient(112% 86% at 88% 2%, var(--bg-3) 0%, transparent 56%),
    radial-gradient(96% 78% at 4% 26%, var(--bg-2) 0%, transparent 62%),
    linear-gradient(200deg, var(--bg-2) 0%, var(--bg-1) 58%, var(--bg-1) 100%)}
.hero-scrim{background:linear-gradient(to top,
  rgba(var(--scrim),.86) 0%, rgba(var(--scrim),.34) 46%, rgba(var(--scrim),.58) 100%)}
.hero-strip{background:rgba(var(--scrim),.66)}
.overlay{background:
    radial-gradient(62% 56% at 8% 96%, rgba(253,197,0,.34) 0%, transparent 68%),
    linear-gradient(200deg, var(--bg-2) 0%, var(--bg-1) 60%, var(--bg-1) 100%)}
.steps-sec{background:
    radial-gradient(56% 52% at 92% 4%, rgba(253,197,0,.34) 0%, transparent 64%),
    linear-gradient(200deg, var(--bg-2) 0%, var(--bg-1) 62%)}
.cta-band{background:
    radial-gradient(66% 72% at 6% 100%, rgba(253,197,0,.56) 0%, rgba(253,197,0,.16) 48%, transparent 74%),
    linear-gradient(120deg, var(--bg-1), var(--bg-1) 42%, var(--bg-2))}
.site-foot{background:var(--bg-1);border-block-start:1px solid rgba(255,255,255,.2);color:#fff}
.site-foot h4{color:var(--o3)}
.site-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
/* ---- نصوص كانت برتقالية: تصبح بيضاء لضمان الوضوح ---- */
.step b{color:#fff}
.step:hover{border-color:var(--o4)}
.menu-call,.foot-call{color:#fff}
.menu-side h4{color:var(--o3)}
.menu-main a:hover{color:#fff}
.steps-sec .lede,.step p,.cta-band p,.menu-side a{color:rgba(255,255,255,.95)}
/* ---- البرتقالي كتعبئة ---- */
.btn--sun{color:var(--on-bright)}
.btn--sun .arw{background:rgba(0,63,136,.22);color:var(--on-bright)}
.btn--sun:hover .arw{background:var(--on-bright);color:var(--o3)}
.burger{color:var(--on-bright)}
.pill-link:hover,.close-btn:hover{background:var(--o3);border-color:var(--o3);color:var(--on-bright)}
.why-item .tick,.faq-item.is-open .faq-q .sign{color:var(--on-bright)}
.areas li:hover{color:var(--on-bright)}
.btn:hover .arw{background:var(--o4);color:var(--on-bright)}
/* ==========================================================================
   القصر النهائي على لونين: 0077b6 + 0096c7
   الأبيض للنصوص، والبرتقالي للتعبئة فقط.
   ========================================================================== */
body{background:var(--bg-1);color:#fff}
/* كل الأقسام على 0077b6، مع توهّج 0096c7 يميّز كل قسم */
.sec--bright{background:radial-gradient(72% 62% at 94% -6%, var(--bg-2) 0%, transparent 60%), var(--bg-1);color:#fff}
.sec--mid{background:radial-gradient(72% 62% at 6% 106%, var(--bg-2) 0%, transparent 60%), var(--bg-1);color:#fff}
.sec--mid .lede,.sec--bright .lede{color:var(--txt-2)}
.sec--mid .eyebrow,.sec--bright .eyebrow{color:#fff}
.sec--mid .btn,.sec--bright .btn{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.42);color:#fff}
.sec--mid .btn:hover,.sec--bright .btn:hover{background:#fff;border-color:#fff;color:var(--bg-1)}
/* البطاقات: طبقة بيضاء شفافة بدل لون ثالث */
.svc,.why-item,.faq-item,.areas li{background:var(--bg-1);border:1px solid rgba(255,255,255,.30);color:#fff}
.svc:hover{background:var(--bg-1);border-color:var(--o3)}
.areas li:hover{background:var(--grad-sun);color:var(--on-fill);border-color:transparent}
.svc li{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.faq-q .sign{background:rgba(255,255,255,.18);color:#fff}
/* شريط الثقة: الخانات 0077b6 والفواصل 0096c7 */
.trust{background:var(--bg-2);border-block:0}
/* الأسطح الممتدة */
.site-head.is-stuck{background:rgba(0,80,157,.96)}
.hero-bg{background:
    radial-gradient(70% 60% at 14% 94%, rgba(253,197,0,.52) 0%, rgba(253,197,0,.16) 46%, transparent 72%),
    radial-gradient(110% 84% at 88% 0%, var(--bg-2) 0%, transparent 58%),
    linear-gradient(200deg, var(--bg-2) 0%, var(--bg-1) 56%, var(--bg-1) 100%)}
.overlay{background:
    radial-gradient(62% 56% at 8% 96%, rgba(253,197,0,.36) 0%, transparent 68%),
    linear-gradient(200deg, var(--bg-2) 0%, var(--bg-1) 58%, var(--bg-1) 100%)}
.steps-sec{background:
    radial-gradient(56% 52% at 92% 2%, rgba(253,197,0,.36) 0%, transparent 64%),
    linear-gradient(200deg, var(--bg-2) 0%, var(--bg-1) 60%)}
.cta-band{background:
    radial-gradient(66% 72% at 6% 100%, rgba(253,197,0,.58) 0%, rgba(253,197,0,.16) 48%, transparent 74%),
    linear-gradient(120deg, var(--bg-1), var(--bg-1) 44%, var(--bg-2))}
.site-foot{background:var(--bg-1);border-block-start:1px solid rgba(255,255,255,.22);color:var(--txt-2)}
/* الأزرار والروابط */
.btn{background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.42);color:#fff}
.btn:hover{background:#fff;border-color:#fff;color:var(--bg-1)}
.btn .arw{background:rgba(255,255,255,.20)}
.btn:hover .arw{background:var(--o4);color:var(--on-fill)}
.btn--sun,.btn--sun:hover{color:var(--on-fill)}
.btn--sun .arw{background:rgba(0,63,136,.22);color:var(--on-fill)}
.btn--sun:hover .arw{background:var(--on-fill);color:var(--o3)}
.burger,.why-item .tick,.faq-item.is-open .faq-q .sign{color:var(--on-fill)}
.pill-link:hover,.close-btn:hover{background:var(--o3);border-color:var(--o3);color:var(--on-fill)}
.menu-main a:hover{color:#fff}
.menu-main a:hover small{color:var(--o3);opacity:1}
.site-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.menu-side h4,.site-foot h4{color:var(--o3)}
.menu-call,.foot-call{color:#fff}
/* واتساب بلون الهوية بدل الأخضر */
.icon-btn.is-wa:hover{background:var(--o3);color:var(--on-fill)}
.wa-float{background:var(--grad-sun);color:var(--on-fill)}
/* ==========================================================================
   العناوين بدرجات البرتقالي
   القاعدة: فوق 0077b6 تُستخدم الدرجات الفاتحة (o1/o2) لأن الدرجات
   المشبعة (ffb703/fb8500) تباينها 2.8:1 وتذوب في الخلفية.
   الدرجات المشبعة تُستخدم فوق طبقة التعتيم الداكنة في الهيرو.
   ========================================================================== */
h1,h2,h3,h4{color:var(--h-1)}
/* العناوين الصغيرة (أقل من 19px) تحتاج درجة أفتح */
.faq-q,.why-item h3,.brand-txt b,.site-foot h4,.menu-side h4,.step b,.eyebrow,.sec--mid .eyebrow,.sec--bright .eyebrow,.eyebrow.is-light,.hero-eyebrow{color:var(--h-2)}
/* الأرقام والهواتف */
.menu-call,.foot-call{color:var(--h-1)}
/* قائمة الشاشة الكاملة */
.menu-main a{color:var(--h-1)}
.menu-main a:hover{color:#fff}
.menu-main a small{color:var(--h-2)}
/* عنوان الهيرو: الدرجات المشبعة تعمل هنا فوق طبقة التعتيم */
.hero h1{background:linear-gradient(118deg, var(--o3) 0%, var(--o4) 60%, var(--o5) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 em{background:none;-webkit-text-fill-color:#fff;color:#fff}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
.hero h1{color:var(--o3)}
}
/* النص فوق التعبئة البرتقالية يبقى داكناً */
.btn--sun,.btn--sun:hover,.areas li:hover{color:var(--on-fill)}
.sec--mid .btn:hover,.sec--bright .btn:hover,.btn:hover{color:var(--bg-1)}
.why-item .tick,.faq-item.is-open .faq-q .sign,.burger{color:var(--on-fill)}
/* ==========================================================================
   العناوين بالبرتقالي المشبع (#FFD500)
   مع ظل داكن خفيف يرفع وضوح الحروف فوق الأزرق دون تغيير الخلفيات.
   ========================================================================== */
h1,h2,h3,h4,.faq-q,.why-item h3,.brand-txt b,.site-foot h4,.menu-side h4,.step b,.eyebrow,.eyebrow.is-light,.sec--mid .eyebrow,.sec--bright .eyebrow,.hero-eyebrow,.menu-main a,.menu-call,.foot-call{color:var(--o3)}
.menu-main a small{color:var(--o2)}
.menu-main a:hover{color:#fff}
/* العناصر ذات التعبئة البرتقالية: النص داكن وبلا ظل */
.btn--sun,.btn--sun:hover,.areas li:hover,.burger,.why-item .tick,.faq-item.is-open .faq-q .sign{color:var(--on-fill)}
.btn:hover,.sec--mid .btn:hover,.sec--bright .btn:hover{color:var(--bg-1)}
.hero h1 em{-webkit-text-fill-color:#fff;color:#fff}
/* ==========================================================================
   الصور
   ========================================================================== */
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;mix-blend-mode:luminosity}
/* صور بطاقات الخدمات */
.svc{padding:0;display:block;overflow:hidden}
/* خلفية قسم الخطوات */
.steps-sec{position:relative;isolation:isolate;overflow:hidden}
.steps-bg{position:absolute;inset:0;z-index:-1}
.steps-bg img{width:100%;height:100%;object-fit:cover;opacity:.30;mix-blend-mode:luminosity}
.steps-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg, rgba(0,150,199,.86) 0%, rgba(0,80,157,.94) 60%)}
/* صورة قسم المناطق */
.areas-media{margin:26px 0 0;border-radius:var(--r-card);overflow:hidden;border:1px solid rgba(255,255,255,.3);aspect-ratio:5/4}
.areas-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.areas-media:hover img{transform:scale(1.05)}
@media (max-width:620px){
.areas-media{aspect-ratio:16/10}
}
/* ==========================================================================
   سلايدر الخدمات — بملء العرض
   ========================================================================== */
.svc-sec{padding:0;background:var(--bg-1)}
.slider{position:relative;isolation:isolate;overflow:hidden;min-height:min(88svh,860px);display:grid;color:#fff}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s cubic-bezier(.4,0,.2,1), visibility 1s}
.slide.is-active{opacity:1;visibility:visible;z-index:1}
.slide-media{position:absolute;inset:0;overflow:hidden}
.slide-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.slide.is-active .slide-media img{animation:kenburns 9s linear both}
@keyframes kenburns{from{transform:scale(1.02)} to{transform:scale(1.12)}}
.slide-media::after{content:"";position:absolute;inset:0;background:
    linear-gradient(to top, rgba(0,63,136,.94) 0%, rgba(0,63,136,.62) 42%, rgba(0,63,136,.30) 72%, rgba(0,63,136,.66) 100%),
    linear-gradient(to left, rgba(0,63,136,.80) 0%, rgba(0,63,136,.18) 55%, transparent 100%)}
/* الاسم العريض الباهت على الجهة المقابلة */
.slide-wm{position:absolute;inset-inline-end:clamp(16px,4vw,64px);inset-block-end:clamp(120px,17vh,190px);font-family:var(--display);font-weight:900;letter-spacing:-.02em;font-size:clamp(2.6rem,8vw,6.6rem);line-height:1;color:rgba(255,255,255,.13);pointer-events:none;user-select:none;white-space:nowrap}
/* محتوى الشريحة */
.slide-inner{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;padding-block:calc(var(--header-h) + 40px) clamp(120px,17vh,180px)}
.slide-content{max-width:min(560px,92%);display:grid;gap:14px;justify-items:start}
.slide.is-active .slide-content > *{animation:slideUp .8s cubic-bezier(.2,.7,.3,1) both}
.slide.is-active .slide-content > *:nth-child(1){animation-delay:.15s}
.slide.is-active .slide-content > *:nth-child(2){animation-delay:.26s}
.slide.is-active .slide-content > *:nth-child(3){animation-delay:.37s}
.slide.is-active .slide-content > *:nth-child(4){animation-delay:.48s}
.slide.is-active .slide-content > *:nth-child(5){animation-delay:.59s}
@keyframes slideUp{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
.slide-ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--grad-sun);color:var(--on-fill)}
.slide-content h3{font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.24}
.slide-content p{font-size:clamp(.98rem,1.3vw,1.1rem);color:#fff;max-width:52ch}
.slide-tags{display:flex;flex-wrap:wrap;gap:8px}
.slide-tags li{font-size:.8rem;padding:6px 13px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.45);background:rgba(0,63,136,.28);color:#fff}
.slide-cta{display:flex;flex-wrap:wrap;gap:10px}
/* العنوان العلوي فوق الشريحة */
.slider-head{position:absolute;inset-block-start:calc(var(--header-h) + clamp(14px,4vh,44px));inset-inline:0;z-index:3;display:grid;gap:12px;pointer-events:none}
.slider-head h2{font-size:clamp(1.6rem,3.6vw,2.9rem)}
.slider-head .eyebrow{color:var(--o3)}
/* شريط التحكم */
.slider-ui{position:absolute;inset-block-end:clamp(28px,5vh,54px);inset-inline:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.s-bars{display:flex;gap:8px;flex:1 1 260px;max-width:520px}
.s-bar{flex:1;height:20px;display:grid;align-items:center;padding:0;background:none;border:0;cursor:pointer}
.s-bar i{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.34);overflow:hidden;position:relative}
.s-bar i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--o3);border-radius:3px}
.s-bar.is-on i::after{width:100%;transition:width var(--dur,6.5s) linear}
.s-bar.is-done i::after{width:100%;transition:none;background:rgba(255,255,255,.7)}
.s-bar:hover i{background:rgba(255,255,255,.6)}
.slider-nav{display:flex;align-items:center;gap:10px}
.s-count{font-family:var(--display);font-weight:700;font-size:.95rem;color:#fff;letter-spacing:.08em;margin-inline-end:6px}
.s-count b{color:var(--o3);font-size:1.15rem}
.s-count i{font-style:normal;opacity:.5;margin-inline:4px}
.s-arrow{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.5);color:#fff;background:rgba(0,63,136,.35);transition:background .3s, border-color .3s, color .3s, transform .3s}
.s-arrow:hover{background:var(--grad-sun);border-color:transparent;color:var(--on-fill);transform:scale(1.07)}
/* تبويبات كل الخدمات أسفل السلايدر */
.svc-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-block:clamp(20px,3vw,30px) clamp(34px,5vw,56px)}
.svc-tab{padding:9px 17px;border-radius:var(--r-pill);font-size:.9rem;font-weight:400;border:1px solid rgba(255,255,255,.3);color:#fff;background:transparent;transition:background .3s, color .3s, border-color .3s, transform .3s}
.svc-tab:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.svc-tab.is-on{background:var(--grad-sun);color:var(--on-fill);border-color:transparent;font-weight:700}
@media (max-width:860px){
.slider{min-height:min(92svh,760px)}
.slide-wm{display:none}
.slide-inner{padding-block-end:clamp(150px,22vh,200px)}
.slider-ui{flex-direction:column-reverse;align-items:stretch;gap:14px}
.s-bars{max-width:none}
.slider-nav{justify-content:flex-start}
}
@media (max-width:620px){
.slider-head h2{font-size:1.5rem}
.slide-content h3{font-size:1.45rem}
.slide-cta .btn{padding:13px 20px;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
.slide.is-active .slide-media img{animation:none}
.slide.is-active .slide-content > *{animation:none}
}
/* ==========================================================================
   ألوان الهيرو الخاصة: ff9100 / ff8500 / ff7900
   ========================================================================== */
.hero{--hs-1:#FFD500;--hs-2:#FDC500;--hs-3:#FDC500}
.hero-eyebrow{color:var(--hs-1)}
.hero h1{background:linear-gradient(118deg, var(--hs-1) 0%, var(--hs-2) 52%, var(--hs-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 em{background:none;-webkit-text-fill-color:#fff;color:#fff}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
.hero h1{color:var(--hs-2)}
}
.hero-sub{color:var(--hs-1)}
/* زر: اطلب عرض سعر */
.hero .btn--sun{background:linear-gradient(118deg, var(--hs-1) 0%, var(--hs-2) 50%, var(--hs-3) 100%);background-size:180% 100%;color:var(--on-fill)}
.hero .btn--sun:hover{background-position:100% 0}
.hero .btn--sun .arw{background:rgba(0,63,136,.22);color:var(--on-fill)}
.hero .btn--sun:hover .arw{background:var(--on-fill);color:var(--hs-1)}
/* زر: شاهد كل الخدمات */
.hero .btn--ghost{background:transparent;border:1.5px solid var(--hs-2);color:var(--hs-1)}
.hero .btn--ghost:hover{background:linear-gradient(118deg, var(--hs-1), var(--hs-3));border-color:transparent;color:var(--on-fill)}
/* ==========================================================================
   إصلاح عنوان الهيرو
   الظل النصي (text-shadow) يُرسم فوق التدرّج المقصوص داخل الحروف فيُعتّمه،
   لذلك يُستبدل بظل على العنصر نفسه (drop-shadow) الذي يحترم شفافية الحرف.
   ========================================================================== */
/* ==========================================================================
   أقسام بخلفية برتقالية ونصوص داكنة
   ========================================================================== */
/* ---------- قسم: أربع خطوات ---------- */
.steps-sec{background:var(--grad-orange);color:var(--ink-dark)}
.steps-bg img{opacity:.20;mix-blend-mode:luminosity}
.steps-bg::after{background:linear-gradient(200deg, rgba(255,213,0,.88) 0%, rgba(253,197,0,.94) 100%)}
.steps-sec h2,.steps-sec h3,.steps-sec p,.steps-sec .lede,.steps-sec .step b,.steps-sec .step p,.steps-sec .eyebrow,.steps-sec .eyebrow.is-light{color:var(--ink-dark)}
.steps-sec .eyebrow::after{background:var(--ink-dark);opacity:.55}
.steps-sec .step{border-block-start-color:rgba(0,63,136,.32)}
.steps-sec .step:hover{border-block-start-color:var(--ink-dark)}
.steps-sec .step b{opacity:.72;font-weight:700}
/* ---------- قسم: أرسل لنا مساحة المكان ---------- */
.cta-band{background:linear-gradient(120deg, #FDC500 0%, #FDC500 46%, #FFD500 100%);color:var(--ink-dark)}
.cta-band .bubbles{opacity:.22}
.cta-band h2,.cta-band p,.cta-band .eyebrow,.cta-band .eyebrow.is-light{color:var(--ink-dark)}
.cta-band .eyebrow::after{background:var(--ink-dark);opacity:.55}
/* أزرار على الخلفية البرتقالية: تعبئة داكنة */
.cta-band .btn--sun{background:var(--ink-dark);background-size:auto;color:#fff}
.cta-band .btn--sun:hover{background:#00305F;color:#fff}
.cta-band .btn--sun .arw{background:rgba(255,255,255,.22);color:#fff}
.cta-band .btn--sun:hover .arw{background:#FFD500;color:var(--ink-dark)}
.cta-band .btn--ghost{background:transparent;border-color:var(--ink-dark);color:var(--ink-dark)}
.cta-band .btn--ghost:hover{background:var(--ink-dark);border-color:var(--ink-dark);color:#fff}
/* ==========================================================================
   البرتقالي النهائي: ffc233 (فاتح) + ffa800 (عميق)
   ========================================================================== */
.hero{--hs-1:#FFD500;--hs-2:#FDC500;--hs-3:#FDC500}
.hero h1{background:linear-gradient(118deg, #FFD500 0%, #FDC500 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .btn--sun{background:linear-gradient(118deg, #FFD500 0%, #FDC500 100%);background-size:180% 100%}
.hero .btn--ghost{border-color:#FDC500;color:#FFD500}
.hero .btn--ghost:hover{background:linear-gradient(118deg, #FFD500, #FDC500);border-color:transparent;color:var(--on-fill)}
.steps-sec{background:linear-gradient(200deg, #FFD500 0%, #FDC500 100%)}
.steps-bg::after{background:linear-gradient(200deg, rgba(255,213,0,.90) 0%, rgba(253,197,0,.94) 100%)}
.cta-band{background:linear-gradient(120deg, #FDC500 0%, #FFD500 100%)}
/* ==========================================================================
   شريط الثقة — لوحة برتقالية عائمة أسفل الهيرو
   ========================================================================== */
.hero-strip{display:none}
.hero .scroll-cue{inset-block-end:clamp(120px,15vh,160px)}
.trust{background:transparent;border:0;padding:0;position:relative;z-index:5}
/* ملمس مائل خفيف بلون داكن شفاف */
.tstat{display:grid;gap:9px;justify-items:start;align-content:start;position:relative;padding-inline:clamp(12px,1.6vw,24px);background:transparent;border:0}
.tstat + .tstat::before{content:"";position:absolute;inset-block:6px auto;inset-inline-end:0;width:1px;height:calc(100% - 12px);background:rgba(0,63,136,.22)}
.tstat-num{font-family:var(--display);font-weight:900;line-height:1;font-size:clamp(1.8rem,3.4vw,2.7rem);color:#003F88;-webkit-text-fill-color:#003F88;background:none;display:flex;align-items:baseline;gap:6px}
.tstat-num i{font-style:normal;font-size:.42em;font-weight:700;opacity:.75}
.tstat-lbl{font-size:.88rem;color:rgba(0,63,136,.82);line-height:1.6;max-width:20ch}
@media (max-width:980px){
.tstat:nth-child(odd)::before{display:none}
}
@media (max-width:560px){
.tstat{padding-inline:0}
.tstat + .tstat::before{display:none}
.tstat + .tstat{border-block-start:1px solid rgba(0,63,136,.2);padding-block-start:22px}
}
/* ==========================================================================
   شريط الثقة — تصميم 2: حافة مائلة وأرقام مفرّغة
   ========================================================================== */
.trust{background:transparent;border:0;padding:0;position:relative;z-index:5}
.trust-band{margin-block-start:clamp(-70px,-7vh,-46px);background:linear-gradient(118deg, #FFD500 0%, #FDC500 100%);clip-path:polygon(0 clamp(30px,5vw,58px), 100% 0, 100% 100%, 0 100%);padding-block:clamp(64px,8vw,96px) clamp(34px,4.4vw,52px);position:relative;overflow:hidden}
.trust-band::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background:repeating-linear-gradient(118deg, rgba(0,63,136,.05) 0 2px, transparent 2px 22px)}
.trust-in{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(22px,3vw,40px);flex-wrap:wrap}
.tstat{display:grid;gap:2px;background:transparent;border:0;padding:0}
.tstat-num{font-family:var(--display);font-weight:900;line-height:1;font-size:clamp(2.1rem,4.6vw,3.4rem);color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #003F88;background:none;transition:-webkit-text-fill-color .4s, color .4s;display:flex;align-items:baseline;gap:6px}
.tstat:hover .tstat-num{-webkit-text-fill-color:#003F88;color:#003F88}
.tstat-num i{font-style:normal;font-size:.34em;font-weight:700;-webkit-text-stroke:0;-webkit-text-fill-color:#003F88;color:#003F88;opacity:.85}
.tstat-lbl{font-size:.86rem;font-weight:400;color:rgba(0,63,136,.88);line-height:1.55;border-block-start:2px solid rgba(0,63,136,.3);padding-block-start:9px;margin-block-start:8px}
@media (max-width:900px){
.trust-in{flex-direction:column;align-items:stretch}
}
@media (max-width:520px){
.tstat-num{-webkit-text-stroke-width:1.6px}
}
/* ==========================================================================
   ضبط احترافي للألوان — إضافة قاعدة عميقة واحدة
   السبب: #00509D كان أفتح سطح ممكن، فبقي كل شيء بنفس درجة السطوع
   ولم يتجاوز تباين النص البرتقالي 3:1. القاعدة العميقة تحلّ الأمرين.
   ========================================================================== */
body{background:var(--base)}
.svc-sec{background:var(--base)}
.sec--bright{background:radial-gradient(72% 62% at 94% -6%, rgba(0,150,199,.55) 0%, transparent 60%), var(--base)}
.sec--mid{background:radial-gradient(72% 62% at 6% 106%, rgba(0,150,199,.55) 0%, transparent 60%), var(--base)}
.site-foot{background:var(--base);border-block-start:1px solid rgba(255,255,255,.14)}
.site-head.is-stuck{background:rgba(0,63,136,.95)}
.hero-bg{background:
    radial-gradient(70% 60% at 14% 94%, rgba(253,197,0,.42) 0%, rgba(253,197,0,.12) 46%, transparent 72%),
    radial-gradient(110% 84% at 88% 0%, var(--bg-2) 0%, transparent 56%),
    linear-gradient(200deg, var(--bg-1) 0%, var(--base) 62%, var(--base) 100%)}
.overlay{background:
    radial-gradient(62% 56% at 8% 96%, rgba(253,197,0,.30) 0%, transparent 68%),
    linear-gradient(200deg, var(--bg-1) 0%, var(--base) 48%, var(--base) 100%)}
/* البطاقات ترتفع فوق القاعدة بلون أفتح — هنا يظهر العمق */
.svc,.why-item,.faq-item,.areas li{background:var(--surface);border-color:rgba(255,255,255,.22)}
.svc:hover{background:#00509D;border-color:var(--o3)}
/* القاعدة: البرتقالي للعناوين فوق الخلفية العميقة، والأبيض داخل البطاقات */
.faq-q,.why-item h3{color:#fff}
.sec--mid h2,.sec--bright h2,.slider-head h2,.site-foot h4,.menu-side h4,.menu-call,.foot-call,.eyebrow,.hero-eyebrow{color:#FFD500}
.menu-main a{color:#FFD500}
/* ==========================================================================
   شريط الثقة — نسخة مبسّطة: أربعة أرقام قصيرة فقط
   ========================================================================== */
.trust-band{margin-block-start:clamp(-52px,-5vh,-34px);background:linear-gradient(118deg, #FFD500 0%, #FDC500 100%);clip-path:polygon(0 clamp(18px,2.6vw,30px), 100% 0, 100% 100%, 0 100%);padding-block:clamp(44px,5vw,60px) clamp(24px,3vw,34px)}
.trust-band::before{opacity:.35}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:center;flex-wrap:nowrap}
.tstat{display:grid;gap:2px;justify-items:center;text-align:center;position:relative;padding-inline:14px;background:transparent;border:0}
.tstat + .tstat::before{content:"";position:absolute;inset-block:4px;inset-inline-end:0;width:1px;background:rgba(0,63,136,.26)}
.tstat-num{font-family:var(--display);font-weight:900;line-height:1.1;font-size:clamp(1.5rem,3.2vw,2.4rem);color:#003F88;-webkit-text-fill-color:#003F88;-webkit-text-stroke:0;background:none;display:block}
.tstat-lbl{font-size:clamp(.8rem,1.1vw,.92rem);font-weight:400;color:rgba(0,63,136,.8);border:0;padding:0;margin:0;line-height:1.5}
@media (max-width:760px){
.trust-in{grid-template-columns:repeat(2,1fr);gap:22px 0}
.tstat:nth-child(odd)::before{display:none}
}
/* ==========================================================================
   إصلاحات السلايدر
   1) الشرائح كانت absolute فكان ارتفاع القسم ثابتاً والمحتوى يُقصّ على الجوال
      → تكديس بالـ grid: الارتفاع يتبع أطول شريحة تلقائياً.
   2) الاسم العريض الباهت كان يفيض خارج الشاشة ويتزاحم مع أزرار التحكم.
   3) حشوة علوية زائدة كانت تحسب ارتفاع الهيدر رغم أن القسم ليس أعلى الصفحة.
   ========================================================================== */
.slider{min-height:min(76svh,720px);display:grid;grid-template-columns:100%}
.slides{position:relative;inset:auto;display:grid;grid-template-columns:100%;min-height:inherit}
.slide{position:relative;inset:auto;grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none}
.slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.slide-inner{padding-block:clamp(96px,13vh,140px) clamp(104px,14vh,150px);align-items:center}
.slide-content{max-width:min(600px,94%);gap:13px}
.slide-content p{max-width:46ch}
/* الاسم الباهت: محصور، ولا يتجاوز نصف العرض، ويختفي مبكراً */
.slide-wm{inset-block-end:auto;inset-block-start:50%;transform:translateY(-50%);font-size:clamp(2.4rem,5.2vw,4.6rem);max-inline-size:42vw;white-space:normal;text-align:end;line-height:1.1;color:rgba(255,255,255,.11)}
@media (max-width:1180px){
.slide-wm{display:none}
}
/* حركة الصورة تنتهي مع مدة العرض لا بعدها */
.slide.is-active .slide-media img{animation:kenburns 7.2s linear both}
/* عنوان القسم فوق الشريحة: أصغر قليلاً حتى لا يقترب من المحتوى */
.slider-head{inset-block-start:clamp(26px,5vh,54px);gap:8px}
.slider-head h2{font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.3}
@media (max-width:860px){
.slider{min-height:auto}
.slide-inner{padding-block:clamp(120px,20vh,170px) clamp(140px,22vh,190px)}
.slider-head h2 br{display:none}
}
@media (max-width:620px){
.slide-content h3{font-size:1.4rem}
.slide-content p{font-size:.95rem}
.slide-tags{display:none}
}
/* ==========================================================================
   العودة لاختيار العميل: القاعدة #00509D (بدون أي لون مضاف)
   العمق يأتي من الحدود والظلال بدل اختلاف درجة السطح.
   ========================================================================== */
body,.svc-sec,.site-foot{background:var(--base)}
.sec--bright{background:radial-gradient(72% 62% at 94% -6%, var(--bg-2) 0%, transparent 58%), var(--base)}
.sec--mid{background:radial-gradient(72% 62% at 6% 106%, var(--bg-2) 0%, transparent 58%), var(--base)}
.site-head.is-stuck{background:rgba(0,80,157,.96)}
.hero-bg{background:
    radial-gradient(70% 60% at 14% 94%, rgba(253,197,0,.44) 0%, rgba(253,197,0,.12) 46%, transparent 72%),
    radial-gradient(110% 84% at 88% 0%, var(--bg-2) 0%, transparent 58%),
    linear-gradient(200deg, var(--bg-2) 0%, var(--base) 55%, var(--base) 100%)}
.overlay{background:
    radial-gradient(62% 56% at 8% 96%, rgba(253,197,0,.32) 0%, transparent 68%),
    linear-gradient(200deg, var(--bg-2) 0%, var(--base) 52%, var(--base) 100%)}
/* البطاقات: نفس لون القاعدة، يعرّفها الحدّ والظل */
.svc,.why-item,.faq-item,.areas li{background:var(--base);border:1px solid rgba(255,255,255,.30)}
.svc:hover{background:var(--base);border-color:var(--o3)}
/* كل العناوين بالبرتقالي كما طلبت */
.faq-q,.why-item h3,.slide-content h3{color:#FFD500}
/* ==========================================================================
   فوتر أغمق — بلون النص الداكن الموجود أصلاً في اللوحة (#003F88)
   ========================================================================== */
.site-foot{background:#003F88;border-block-start:1px solid rgba(255,213,0,.28);color:rgba(255,255,255,.86)}
.site-foot h4{color:#FFD500}
.foot-call{color:#FFD500}
.site-foot a:hover{color:#FFD500;text-decoration:underline;text-underline-offset:5px}
.foot-bar{border-block-start:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7)}
/* فوتر بلون العميل #003F88 */
.site-foot{background:#003F88}
/* ==========================================================================
   لون الموقع الأساسي: #003F88
   سلّم أزرق من ثلاث درجات: 00527d (القاعدة) ← 0077b6 (الإضاءة) ← 0096c7 (الأعلى)
   ========================================================================== */
body,.svc-sec{background:var(--base)}
.sec--bright{background:radial-gradient(74% 64% at 94% -6%, var(--bg-2) 0%, transparent 60%), var(--base)}
.sec--mid{background:radial-gradient(74% 64% at 6% 106%, var(--bg-2) 0%, transparent 60%), var(--base)}
.site-head.is-stuck{background:rgba(0,63,136,.96)}
.hero-bg{background:
    radial-gradient(70% 60% at 14% 94%, rgba(253,197,0,.44) 0%, rgba(253,197,0,.12) 46%, transparent 72%),
    radial-gradient(104% 80% at 90% 0%, var(--bg-3) 0%, transparent 56%),
    linear-gradient(200deg, var(--bg-2) 0%, var(--base) 52%, var(--base) 100%)}
.overlay{background:
    radial-gradient(62% 56% at 8% 96%, rgba(253,197,0,.32) 0%, transparent 68%),
    linear-gradient(200deg, var(--bg-2) 0%, var(--base) 50%, var(--base) 100%)}
.steps-bg::after{background:linear-gradient(200deg, rgba(255,213,0,.90) 0%, rgba(253,197,0,.94) 100%)}
/* البطاقات على لون القاعدة + حدّ وظل، وحدّها يضيء بالأزرق الأفتح عند المرور */
.svc,.why-item,.faq-item,.areas li{background:var(--base);border:1px solid rgba(255,255,255,.28)}
.svc:hover{background:var(--base);border-color:var(--o3)}
.faq-q .sign{background:rgba(255,255,255,.16)}
.areas li:hover{background:var(--grad-sun);color:var(--on-fill);border-color:transparent}
/* الأزرار الزجاجية والفوتر */
.btn:hover,.sec--mid .btn:hover,.sec--bright .btn:hover{color:var(--base)}
.site-foot{background:#003F88;border-block-start:1px solid rgba(255,213,0,.30)}
/* ==========================================================================
   صفحات الخدمات الفرعية
   ========================================================================== */
/* ---------- الترويسة ---------- */
.phero{position:relative;isolation:isolate;overflow:hidden;color:#fff;min-height:min(70svh,660px);display:flex;align-items:flex-end;padding:calc(var(--header-h) + 40px) var(--pad) clamp(46px,6vh,74px)}
.phero-media{position:absolute;inset:0;z-index:-2}
.phero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.phero-media::after{content:"";position:absolute;inset:0;background:
    linear-gradient(to top, rgba(0,63,136,.94) 0%, rgba(0,63,136,.58) 46%, rgba(0,63,136,.34) 100%),
    linear-gradient(to left, rgba(0,63,136,.78) 0%, rgba(0,63,136,.16) 58%, transparent 100%)}
.phero-glow{position:absolute;z-index:-1;inset-block-end:-30%;inset-inline-start:-10%;width:60%;height:80%;pointer-events:none;background:radial-gradient(closest-side, rgba(253,197,0,.42), transparent 70%)}
.phero-inner{width:100%;max-width:1320px;margin:0 auto;display:grid;gap:18px;justify-items:start}
.crumb{display:flex;align-items:center;gap:9px;font-size:.84rem;color:rgba(255,255,255,.82);flex-wrap:wrap}
.crumb a{color:rgba(255,255,255,.82)}
.crumb a:hover{color:#FFD500}
.crumb i{font-style:normal;opacity:.5}
.crumb b{color:#FFD500;font-weight:400}
.phero h1{font-size:clamp(1.9rem,4.6vw,3.5rem);line-height:1.24;max-width:19ch;background:linear-gradient(118deg, #FFD500 0%, #FDC500 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero-sub{font-size:clamp(1rem,1.4vw,1.14rem);color:#fff;max-width:56ch}
.phero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:4px}
.phero-meta li{display:grid;gap:1px;padding:10px 18px;border-radius:14px;background:rgba(0,63,136,.4);border:1px solid rgba(255,255,255,.28)}
.phero-meta b{font-size:.92rem;color:#FFD500;font-family:var(--display);font-weight:700}
.phero-meta span{font-size:.75rem;color:rgba(255,255,255,.82)}
.phero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-block-start:8px}
/* ---------- جسم الصفحة ---------- */
.sbody{padding-block:clamp(48px,6.5vw,86px)}
.sbody-grid{display:grid;grid-template-columns:1.65fr .95fr;gap:clamp(26px,4vw,58px);align-items:start}
.sbody-main > * + *{margin-block-start:22px}
.sbody-main p{color:#fff;font-size:1.02rem}
.sbody-main h2{font-size:clamp(1.35rem,2.4vw,1.9rem);margin-block-start:34px}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block-start:18px}
.incl li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:15px 17px;border-radius:14px;background:var(--base);border:1px solid rgba(255,255,255,.26);font-size:.94rem;line-height:1.65}
.incl li::before{content:"";width:22px;height:22px;border-radius:50%;margin-block-start:3px;background:var(--grad-sun) center/12px no-repeat,
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300253a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/13px no-repeat}
/* بطاقة الحجز الجانبية */
.sbook{position:sticky;top:calc(var(--header-h) + 16px);background:linear-gradient(118deg, #FFD500 0%, #FDC500 100%);border-radius:22px;padding:clamp(22px,2.4vw,30px);display:grid;gap:14px;color:#003F88}
.sbook h3{color:#003F88;font-size:1.2rem}
.sbook p{font-size:.9rem;color:rgba(0,63,136,.82)}
.sbook .line{height:1px;background:rgba(0,63,136,.22)}
.sbook-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;color:#003F88}
.sbook-row b{font-family:var(--display);font-weight:700}
.sbook .btn--sun{background:#003F88;color:#fff}
.sbook .btn--sun:hover{background:#00305F;color:#fff}
.sbook .btn--sun .arw{background:rgba(255,255,255,.2);color:#fff}
.sbook .btn--ghost{border-color:#003F88;color:#003F88}
.sbook .btn--ghost:hover{background:#003F88;color:#fff}
/* ---------- قبل / بعد ---------- */
.ba-sec{padding-block:clamp(42px,6vw,78px)}
.ba{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.3);user-select:none;touch-action:pan-y}
.ba-after,.ba-before{position:absolute;inset:0}
.ba-after img{width:100%;height:100%;object-fit:cover}
.ba-before{inset-inline-start:0;width:50%;overflow:hidden;border-inline-end:2px solid #FFD500;background:var(--base);display:grid;place-items:center;text-align:center;padding:20px}
.ba-before .ph{display:grid;gap:10px;justify-items:center;color:rgba(255,255,255,.9);max-width:26ch}
.ba-before .ph svg{width:38px;height:38px;color:#FFD500}
.ba-before .ph b{font-size:1rem;color:#FFD500}
.ba-before .ph span{font-size:.84rem;line-height:1.6}
.ba-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;inset-block-start:14px;z-index:4;padding:6px 14px;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;font-family:var(--display);background:rgba(0,63,136,.72);color:#fff;border:1px solid rgba(255,255,255,.3)}
.ba-tag.is-before{inset-inline-start:14px}
.ba-tag.is-after{inset-inline-end:14px}
.ba-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.ba-handle{position:absolute;inset-block:0;inset-inline-start:50%;z-index:4;width:2px;background:#FFD500;pointer-events:none;transform:translateX(50%)}
.ba-handle::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--grad-sun);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300253a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E"), var(--grad-sun);background-repeat:no-repeat;background-position:center;background-size:22px, cover}
/* ---------- تواصل مميز ---------- */
.scontact{border-radius:clamp(22px,3vw,32px);overflow:hidden;display:grid;grid-template-columns:.85fr 1.15fr}
.scontact-side{background:#003F88;padding:clamp(28px,3.4vw,44px);display:grid;align-content:center;gap:14px}
.scontact-side h2{color:#FFD500;font-size:clamp(1.4rem,2.4vw,2rem)}
.scontact-side p{color:rgba(255,255,255,.86);font-size:.96rem}
.scontact-side ul{display:grid;gap:10px;margin-block-start:6px}
.scontact-side li{display:flex;align-items:center;gap:11px;font-size:.94rem;color:#fff}
.scontact-side li svg{width:19px;height:19px;color:#FFD500;flex:0 0 auto}
.scontact-form{background:linear-gradient(118deg, #FFD500 0%, #FDC500 100%);padding:clamp(26px,3.4vw,44px);display:grid;gap:13px;align-content:center}
.scontact-form h3{color:#003F88;font-size:1.15rem}
.scontact-form label{display:grid;gap:6px;font-size:.86rem;font-weight:400;color:#003F88}
.scontact-form input,.scontact-form select,.scontact-form textarea{font-family:var(--body);font-size:.95rem;padding:13px 15px;border-radius:13px;border:1.5px solid rgba(0,63,136,.3);background:rgba(255,255,255,.92);color:#003F88;width:100%;transition:border-color .25s, background .25s}
.scontact-form input:focus,.scontact-form select:focus,.scontact-form textarea:focus{outline:none;border-color:#003F88;background:#fff}
.scontact-form textarea{min-height:84px;resize:vertical}
.scontact-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scontact-form .btn--sun{background:#003F88;color:#fff;justify-content:center}
.scontact-form .btn--sun:hover{background:#00305F}
.scontact-note{font-size:.8rem;color:rgba(0,63,136,.78)}
/* ---------- أهم خدماتنا (بطاقات) ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.rel{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--base);border:1px solid rgba(255,255,255,.26);display:grid;align-content:start;transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s}
.rel:hover{transform:translateY(-6px);border-color:#FFD500}
.rel-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.rel-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.rel:hover .rel-media img{transform:scale(1.07)}
.rel-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, var(--base) 0%, rgba(0,63,136,.35) 45%, transparent 75%)}
.rel-body{padding:20px 22px 24px;display:grid;gap:8px}
.rel-body h3{font-size:1.08rem}
.rel-body p{font-size:.88rem;color:rgba(255,255,255,.9);line-height:1.65}
.rel-go{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:#FFD500;font-family:var(--display);margin-block-start:4px;transition:gap .3s}
.rel:hover .rel-go{gap:14px}
@media (max-width:1000px){
.sbody-grid{grid-template-columns:1fr}
.sbook{position:static}
.rel-grid{grid-template-columns:repeat(2,1fr)}
.scontact{grid-template-columns:1fr}
}
@media (max-width:640px){
.incl{grid-template-columns:1fr}
.rel-grid{grid-template-columns:1fr}
.scontact-form .fields{grid-template-columns:1fr}
.ba{aspect-ratio:4/3}
}
/* ==========================================================================
   الصفحات الفرعية — خلفية فاتحة ونصوص داكنة
   البرتقالي هنا تعبئة فقط: تباينه على الأبيض 2.2 ولا يصلح كلون خط.
   ========================================================================== */
.lightpage{--page:#F7FAFD;/* خلفية الصفحة */
  --card:#ffffff;/* البطاقات */
  --tint:#EDF3FA;/* أقسام متبادلة */
  --hd:#003F88;/* العناوين */
  --tx:#003F88;/* النص */
  --ln:rgba(0,63,136,.18);background:var(--page);color:var(--tx)}
.lightpage h1,.lightpage h2,.lightpage h3,.lightpage h4{color:var(--hd)}
.lightpage .eyebrow{color:var(--hd)}
.lightpage .eyebrow::after{background:var(--o4)}
.lightpage .lede,.lightpage p{color:rgba(0,63,136,.86)}
/* الأقسام */
.lightpage .sec{background:var(--page)}
.lightpage .sec--mid{background:var(--tint);color:var(--tx)}
.lightpage .sec--bright{background:var(--card);color:var(--tx)}
.lightpage .sec--mid .lede,.lightpage .sec--bright .lede{color:rgba(0,63,136,.86)}
.lightpage .sec--mid .eyebrow,.lightpage .sec--bright .eyebrow{color:var(--hd)}
/* البطاقات والقوائم */
.lightpage .incl li{background:var(--card);border:1px solid var(--ln);color:var(--tx)}
.lightpage .faq-item{background:var(--card);border:1px solid var(--ln)}
.lightpage .faq-q{color:var(--hd)}
.lightpage .faq-a p{color:rgba(0,63,136,.84)}
.lightpage .faq-q .sign{background:var(--tint);color:var(--hd)}
.lightpage .faq-item.is-open .faq-q .sign{background:var(--grad-sun);color:var(--on-fill)}
.lightpage .rel{background:var(--card);border:1px solid var(--ln)}
.lightpage .rel:hover{border-color:var(--o4)}
.lightpage .rel-media::after{background:linear-gradient(to top, var(--card) 0%, rgba(255,255,255,.4) 42%, transparent 74%)}
.lightpage .rel-body h3{color:var(--hd)}
.lightpage .rel-body p{color:rgba(0,63,136,.8)}
.lightpage .rel-go{color:var(--o5)}
/* الأزرار على الفاتح */
.lightpage .btn{background:transparent;border:1.5px solid rgba(0,63,136,.45);color:var(--hd)}
.lightpage .btn:hover{background:var(--hd);border-color:var(--hd);color:#fff}
.lightpage .btn .arw{background:rgba(0,63,136,.12);color:var(--hd)}
.lightpage .btn:hover .arw{background:var(--o3);color:var(--on-fill)}
.lightpage .sec--mid .btn,.lightpage .sec--bright .btn{background:transparent;border-color:rgba(0,63,136,.45);color:var(--hd)}
.lightpage .sec--mid .btn:hover,.lightpage .sec--bright .btn:hover{background:var(--hd);border-color:var(--hd);color:#fff}
/* مقارنة قبل/بعد */
.lightpage .ba{border-color:var(--ln)}
.lightpage .ba-before{background:var(--tint)}
.lightpage .ba-before .ph{color:rgba(0,63,136,.86)}
.lightpage .ba-before .ph b{color:var(--hd)}
.lightpage .ba-before .ph svg{color:var(--o5)}
.lightpage .ba-tag{background:rgba(255,255,255,.92);color:var(--hd);border-color:var(--ln)}
/* الترويسة والأقسام البرتقالية تبقى كما هي */
.lightpage .phero h1{color:transparent}
.lightpage .phero .phero-sub,.lightpage .phero .crumb{color:#fff}
.lightpage .phero-meta b{color:#FFD500}
.lightpage .phero-meta span{color:rgba(255,255,255,.84)}
.lightpage .phero .btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.lightpage .phero .btn--ghost:hover{background:#fff;color:var(--hd)}
.lightpage .sbook h3,.lightpage .sbook p,.lightpage .sbook .sbook-row{color:#003F88}
.lightpage .scontact-side h2{color:#FFD500}
.lightpage .scontact-side p,.lightpage .scontact-side li{color:#fff}
.lightpage .scontact-form h3,.lightpage .scontact-form label{color:#003F88}
.lightpage .scontact-form .btn--sun{background:#003F88;color:#fff;border:0}
/* الفوتر يبقى داكناً */
.lightpage .site-foot{background:#003F88;color:rgba(255,255,255,.86)}
.lightpage .site-foot h4,.lightpage .foot-call{color:#FFD500}
.lightpage .site-foot p,.lightpage .site-foot li{color:rgba(255,255,255,.86)}
/* ==========================================================================
   لا ظل على الخطوط
   تعويض الوضوح فوق الصور يتم بتغميق الطبقة خلف النص لا بالظل.
   ========================================================================== */
.hero h1,.phero h1{filter:none}
.hero-scrim{background:linear-gradient(to top,
  rgba(0,63,136,.90) 0%, rgba(0,63,136,.46) 44%, rgba(0,63,136,.62) 100%)}
.slide-media::after{background:
    linear-gradient(to top, rgba(0,63,136,.95) 0%, rgba(0,63,136,.72) 40%, rgba(0,63,136,.42) 72%, rgba(0,63,136,.70) 100%),
    linear-gradient(to left, rgba(0,63,136,.86) 0%, rgba(0,63,136,.26) 56%, transparent 100%)}
.phero-media::after{background:
    linear-gradient(to top, rgba(0,63,136,.96) 0%, rgba(0,63,136,.70) 44%, rgba(0,63,136,.46) 100%),
    linear-gradient(to left, rgba(0,63,136,.84) 0%, rgba(0,63,136,.24) 58%, transparent 100%)}
/* رابط عنوان الشريحة */
.slide-link{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:8px;text-decoration-thickness:2px;transition:color .3s, text-decoration-color .3s}
.slide-link:hover{color:#fff;text-decoration-color:#FDC500}
/* ==========================================================================
   الصفحات التعريفية: من نحن، تواصل، أسئلة، خصوصية
   ========================================================================== */
.pghead{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:calc(var(--header-h) + clamp(48px,7vh,80px)) var(--pad) clamp(44px,6vh,70px);background:
    radial-gradient(62% 70% at 8% 100%, rgba(253,197,0,.34) 0%, transparent 68%),
    linear-gradient(200deg, #00509D 0%, #00509D 42%, #003F88 100%)}
.pghead::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background:repeating-linear-gradient(118deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px)}
.pghead-inner{max-width:1320px;margin:0 auto;display:grid;gap:14px;justify-items:start}
.pghead h1{font-size:clamp(1.7rem,3.8vw,2.9rem);line-height:1.26;max-width:24ch;background:linear-gradient(118deg,#FFD500 0%,#FDC500 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pghead .lead{font-size:clamp(1rem,1.4vw,1.12rem);color:#fff;max-width:62ch}
.pghead .crumb a,.pghead .crumb{color:rgba(255,255,255,.86)}
/* نص طويل */
.prose{max-width:76ch}
.prose > * + *{margin-block-start:18px}
.prose h2{font-size:clamp(1.25rem,2.2vw,1.65rem);margin-block-start:38px}
.prose p{font-size:1.02rem;line-height:1.95}
.prose ul{display:grid;gap:10px;margin-block-start:14px}
.prose ul li{padding-inline-start:24px;position:relative;line-height:1.8}
.prose ul li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:12px;width:9px;height:9px;border-radius:50%;background:var(--o4)}
.prose .updated{font-size:.86rem;opacity:.75}
.prose .callout{border-inline-start:4px solid var(--o4);padding:16px 20px;border-radius:0 14px 14px 0;background:rgba(253,197,0,.10);font-size:.94rem}
.lightpage .prose .callout{background:rgba(253,197,0,.14);color:#003F88}
/* شبكة القيم */
.vals{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,18px)}
.val{padding:clamp(20px,2.2vw,26px);border-radius:18px;display:grid;gap:8px;align-content:start;background:var(--card,var(--base));border:1px solid var(--ln,rgba(255,255,255,.28))}
.val b{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--hd,#FFD500)}
.val span{font-size:.94rem;line-height:1.7}
.val .n{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--grad-sun);color:var(--on-fill);font-family:var(--display);font-weight:700;font-size:.86rem}
/* صفحة التواصل */
.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(22px,3vw,42px);align-items:start}
.cways{display:grid;gap:12px}
.cway{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;text-align:start;background:var(--card,var(--base));border:1px solid var(--ln,rgba(255,255,255,.28));transition:transform .3s, border-color .3s, box-shadow .3s}
.cway:hover{transform:translateY(-3px);border-color:var(--o4)}
.cway-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--grad-sun);color:var(--on-fill)}
.cway-ic svg{width:22px;height:22px}
.cway b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--hd,#FFD500)}
.cway span{font-size:.9rem;opacity:.9}
.cway .go{color:var(--o5);font-size:1.2rem}
.cmap{border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/10;margin-block-start:18px;border:1px solid var(--ln,rgba(255,255,255,.28));background:var(--tint,rgba(255,255,255,.06))}
.cmap iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.85)}
@media (max-width:860px){
.vals,.cgrid{grid-template-columns:1fr}
}
/* ==========================================================================
   تصميم مسطّح — بلا ظلال
   ما يعرّف العناصر: الحدود واختلاف اللون فقط.
   ========================================================================== */
*,*::before,*::after{box-shadow:none !important}
.hero h1,.phero h1,.pghead h1{filter:none}
/* حدود بديلة حيث كان الظل هو الفاصل الوحيد */
.sbook{border:1px solid rgba(0,63,136,.22)}
.scontact{border:1px solid var(--ln,rgba(255,255,255,.24))}
.wa-float{border:2px solid rgba(0,63,136,.16)}
.trust-band{border-block-end:1px solid rgba(0,63,136,.18)}
.site-head.is-stuck{border-block-end:1px solid rgba(255,255,255,.16)}
.slide-ico,.cway-ic,.why-item .tick{border:0}
/* إزالة التعتيم الزخرفي عن الصور التي لا يعلوها نص */
.rel-media::after{display:none}
/* يبقى التعتيم فقط خلف النصوص فوق الصور — بدونه لا تُقرأ */
.hero-scrim,.slide-media::after,.phero-media::after{display:block}
/* نموذج مبسّط: حقلان في سطر واحد */
.scontact-form .fields{grid-template-columns:1.15fr .85fr}
.scontact-form [aria-invalid="true"]{border-color:#003F88;background:#fff}
@media (max-width:620px){
.scontact-form .fields{grid-template-columns:1fr}
}
/* ==========================================================================
   إصلاحان
   1) التوهّج البرتقالي في ترويسة الخدمة كان خلف الأزرار البرتقالية فيبتلعها.
   2) بطاقات «أهم خدماتنا» أصغر وأبسط.
   ========================================================================== */
/* التوهّج ينتقل للجهة المقابلة للنص ويخفّ */
.phero-glow{inset-inline-start:auto;inset-inline-end:-12%;inset-block-end:-24%;width:52%;height:70%;background:radial-gradient(closest-side, rgba(253,197,0,.26), transparent 72%)}
/* حدّ يعرّف الزر البرتقالي فوق أي خلفية */
.btn--sun{border:1.5px solid rgba(0,63,136,.28)}
.btn--sun:hover{border-color:rgba(0,63,136,.5)}
/* بطاقات مضغوطة */
.rel-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.rel{border-radius:16px}
.rel-media{aspect-ratio:4/3}
.rel-body{padding:14px 16px 16px;gap:6px}
.rel-body h3{font-size:.98rem;line-height:1.45}
.rel-go{font-size:.82rem;margin-block-start:2px}
.rel:hover{transform:translateY(-4px)}
@media (max-width:640px){
.rel-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.rel-body{padding:12px 13px 14px}
.rel-body h3{font-size:.9rem}
.rel-go{font-size:.76rem}
}
/* ==========================================================================
   خطة الألوان الجديدة — الأبيض الفاتح أساس الخلفيات
   003F88 · 00509D  |  FDC500 · FFD500  |  أبيض وتدرّجاته
   ========================================================================== */
/* ---------- الأساس: صفحة فاتحة ---------- */
body{background:var(--w2);color:var(--b1)}
h1,h2,h3,h4{color:var(--b1)}
p,li,span,label{color:inherit}
.lede,.svc p,.why-item p,.faq-a p{color:rgba(0,63,136,.86)}
.eyebrow,.eyebrow.is-light{color:var(--b2)}
.eyebrow::after{background:var(--y1);opacity:1}
/* ---------- الأقسام: تنويع بين ثلاث درجات فاتحة ---------- */
.sec{background:var(--w2)}
.sec--bright{background:var(--w1);color:var(--b1)}
.sec--mid{background:var(--w3);color:var(--b1)}
.sec--mid .lede,.sec--bright .lede{color:rgba(0,63,136,.86)}
.sec--mid .eyebrow,.sec--bright .eyebrow{color:var(--b2)}
.svc-sec{background:var(--w2)}
/* ---------- البطاقات: بيضاء بحدّ أزرق ---------- */
.svc,.why-item,.faq-item,.areas li,.rel,.incl li,.cway,.val{background:var(--w1);border:1px solid var(--ln);color:var(--b1)}
.svc:hover,.rel:hover,.cway:hover{border-color:var(--y1);background:var(--w1)}
.areas li:hover{background:var(--grad-sun);color:var(--b1);border-color:transparent}
.svc li{background:var(--w3);border-color:var(--ln);color:rgba(0,63,136,.86)}
.faq-q .sign,.cway-ic{background:var(--w3);color:var(--b2)}
.faq-item.is-open .faq-q .sign,.why-item .tick,.cway-ic{background:var(--grad-sun);color:var(--b1)}
.faq-q{color:var(--b1)}
/* ---------- الأزرار ---------- */
.btn{background:transparent;border:1.5px solid rgba(0,80,157,.45);color:var(--b1)}
.btn:hover{background:var(--b1);border-color:var(--b1);color:#fff}
.btn .arw{background:rgba(0,80,157,.12);color:var(--b1)}
.btn:hover .arw{background:var(--y2);color:var(--b1)}
.btn--sun{background:var(--grad-sun);color:var(--b1);border:1.5px solid rgba(0,63,136,.24)}
.btn--sun:hover{background:var(--y1);color:var(--b1);border-color:rgba(0,63,136,.45)}
.btn--sun .arw{background:rgba(0,63,136,.18);color:var(--b1)}
.btn--sun:hover .arw{background:var(--b1);color:var(--y2)}
/* ---------- الأقسام الداكنة والصفراء ---------- */
.hero-bg{background:
    radial-gradient(66% 58% at 12% 96%, rgba(253,197,0,.34) 0%, transparent 70%),
    linear-gradient(200deg, var(--b2) 0%, var(--b1) 58%, var(--b1) 100%)}
.hero-scrim{background:linear-gradient(to top,
  rgba(0,40,88,.90) 0%, rgba(0,45,98,.46) 46%, rgba(0,45,98,.60) 100%)}
.hero h1{background:linear-gradient(118deg,var(--y2) 0%,var(--y1) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-eyebrow{color:var(--y2)}
.hero-sub{color:#fff}
.hero .btn--ghost{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.hero .btn--ghost:hover{background:#fff;color:var(--b1)}
.hero .btn--sun{background:var(--grad-sun);color:var(--b1)}
.overlay{background:
  radial-gradient(58% 52% at 8% 96%, rgba(253,197,0,.26) 0%, transparent 70%),
  linear-gradient(200deg, var(--b2) 0%, var(--b1) 55%, var(--b1) 100%)}
.overlay,.overlay h1,.overlay h2,.overlay a,.menu-main a{color:#fff}
.menu-main a{color:var(--y2)}
.menu-main a:hover{color:#fff}
.menu-side h4{color:var(--y2)}
.menu-side a{color:rgba(255,255,255,.92)}
.menu-call{color:var(--y2)}
.site-head.is-stuck{background:rgba(0,63,136,.96);border-block-end:1px solid rgba(255,255,255,.16)}
.trust-band{background:linear-gradient(118deg,var(--y2) 0%,var(--y1) 100%)}
.trust-band .tstat-num,.trust-band .tstat-lbl{color:var(--b1)}
.tstat-lbl{border-block-start-color:rgba(0,63,136,.3)}
.steps-sec{background:linear-gradient(200deg,var(--y2) 0%,var(--y1) 100%)}
.steps-sec h2,.steps-sec h3,.steps-sec p,.steps-sec .lede,.steps-sec .step b,.steps-sec .step p,.steps-sec .eyebrow{color:var(--b1)}
.steps-sec .step{border-block-start-color:rgba(0,63,136,.3)}
.steps-sec .step:hover{border-block-start-color:var(--b1)}
.steps-bg img{opacity:.16}
.steps-bg::after{background:linear-gradient(200deg, rgba(255,213,0,.90), rgba(253,197,0,.94))}
.cta-band{background:linear-gradient(120deg,var(--y1) 0%,var(--y2) 100%)}
.cta-band h2,.cta-band p,.cta-band .eyebrow{color:var(--b1)}
.cta-band .btn--sun{background:var(--b1);color:#fff;border-color:var(--b1)}
.cta-band .btn--sun:hover{background:#00305F;color:#fff}
.cta-band .btn--sun .arw{background:rgba(255,255,255,.22);color:#fff}
.cta-band .btn--ghost{border-color:var(--b1);color:var(--b1)}
.cta-band .btn--ghost:hover{background:var(--b1);color:#fff}
.site-foot{background:var(--b1);color:rgba(255,255,255,.88);border-block-start:0}
.site-foot h4,.foot-call{color:var(--y2)}
.site-foot p,.site-foot li,.site-foot span{color:rgba(255,255,255,.88)}
.site-foot a:hover{color:var(--y2)}
/* ---------- السلايدر: صور بغطاء أزرق ---------- */
.slide-media::after{background:
    linear-gradient(to top, rgba(0,45,98,.95) 0%, rgba(0,45,98,.70) 42%, rgba(0,45,98,.40) 74%, rgba(0,45,98,.68) 100%),
    linear-gradient(to left, rgba(0,45,98,.86) 0%, rgba(0,45,98,.24) 58%, transparent 100%)}
.slide-content h3,.slide-content h3 a,.slider-head h2{color:var(--y2)}
.slide-content p,.slide-tags li{color:#fff}
.slide-tags li{border-color:rgba(255,255,255,.5);background:rgba(0,63,136,.34)}
.slider-head .eyebrow{color:var(--y2)}
.slide-ico{background:var(--grad-sun);color:var(--b1)}
.s-count b{color:var(--y2)}
.s-count,.s-arrow{color:#fff}
.s-arrow{border-color:rgba(255,255,255,.55);background:rgba(0,63,136,.34)}
.s-arrow:hover{background:var(--grad-sun);color:var(--b1);border-color:transparent}
.s-bar i{background:rgba(255,255,255,.36)}
.s-bar i::after{background:var(--y2)}
.svc-tab{border-color:rgba(0,80,157,.35);color:var(--b1);background:var(--w1)}
.svc-tab:hover{background:var(--w3)}
.svc-tab.is-on{background:var(--grad-sun);color:var(--b1);border-color:transparent}
/* ---------- ترويسات الصفحات الداخلية ---------- */
.phero-media::after{background:
    linear-gradient(to top, rgba(0,45,98,.96) 0%, rgba(0,45,98,.70) 46%, rgba(0,45,98,.44) 100%),
    linear-gradient(to left, rgba(0,45,98,.84) 0%, rgba(0,45,98,.22) 60%, transparent 100%)}
.phero-glow{background:radial-gradient(closest-side, rgba(253,197,0,.24), transparent 72%)}
.phero h1,.pghead h1{background:linear-gradient(118deg,var(--y2) 0%,var(--y1) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero-sub,.pghead .lead,.phero .crumb,.pghead .crumb,.crumb a{color:#fff}
.crumb b{color:var(--y2)}
.phero-meta li{background:rgba(0,63,136,.42);border-color:rgba(255,255,255,.3)}
.phero-meta b{color:var(--y2)}
.phero-meta span{color:rgba(255,255,255,.86)}
.pghead{background:
  radial-gradient(58% 66% at 8% 100%, rgba(253,197,0,.26) 0%, transparent 70%),
  linear-gradient(200deg, var(--b2) 0%, var(--b1) 48%, var(--b1) 100%)}
/* ---------- بطاقة الحجز ونموذج التواصل ---------- */
.sbook{background:linear-gradient(118deg,var(--y2) 0%,var(--y1) 100%);color:var(--b1);border:1px solid rgba(0,63,136,.22)}
.sbook h3,.sbook p,.sbook .sbook-row{color:var(--b1)}
.sbook .line{background:rgba(0,63,136,.24)}
.sbook .btn--sun{background:var(--b1);color:#fff;border-color:var(--b1)}
.sbook .btn--sun:hover{background:#00305F}
.sbook .btn--ghost{border-color:var(--b1);color:var(--b1)}
.sbook .btn--ghost:hover{background:var(--b1);color:#fff}
.scontact-side{background:var(--b1)}
.scontact-side h2{color:var(--y2)}
.scontact-side p,.scontact-side li{color:#fff}
.scontact-side li svg{color:var(--y2)}
.scontact-form{background:linear-gradient(118deg,var(--y2) 0%,var(--y1) 100%)}
.scontact-form h3,.scontact-form label,.scontact-note{color:var(--b1)}
.scontact-form input,.scontact-form select,.scontact-form textarea{background:rgba(255,255,255,.94);border-color:rgba(0,63,136,.28);color:var(--b1)}
.scontact-form .btn--sun{background:var(--b1);color:#fff;border-color:var(--b1)}
.scontact-form .btn--sun:hover{background:#00305F}
/* ---------- قبل/بعد ومكوّنات أخرى ---------- */
.ba{border-color:var(--ln)}
.ba-before{background:var(--w3)}
.ba-before .ph{color:rgba(0,63,136,.86)}
.ba-before .ph b{color:var(--b1)}
.ba-before .ph svg{color:var(--y1)}
.ba-tag{background:rgba(255,255,255,.94);color:var(--b1);border-color:var(--ln)}
.ba-handle{background:var(--y1)}
.rel-body h3{color:var(--b1)}
.rel-go{color:var(--b2)}
.prose p{color:rgba(0,63,136,.9)}
.prose .callout{background:rgba(255,213,0,.22);border-inline-start-color:var(--y1);color:var(--b1)}
.val b{color:var(--b1)}
.val .n{background:var(--grad-sun);color:var(--b1)}
.cway b{color:var(--b1)}
.cway .go{color:var(--b2)}
.wa-float{background:var(--grad-sun);color:var(--b1);border:2px solid rgba(0,63,136,.2)}
.pill-link{border-color:rgba(255,255,255,.55);color:#fff}
.pill-link:hover{background:var(--y2);border-color:var(--y2);color:var(--b1)}
.burger{background:var(--grad-sun);color:var(--b1)}
.close-btn:hover{background:var(--y2);color:var(--b1);border-color:var(--y2)}
.icon-btn{color:#fff}
.icon-btn:hover{background:rgba(255,255,255,.18)}
.hero-strip{display:none}
:focus-visible{outline-color:var(--y1)}
/* ==========================================================================
   قسم «أربع خطوات» — خط زمني متصل بنقاط مرقّمة
   ========================================================================== */
.steps{position:relative;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,30px);counter-reset:none}
.steps-line{position:absolute;inset-block-start:29px;inset-inline:9% 9%;height:2px;background:repeating-linear-gradient(to left,
    rgba(0,63,136,.42) 0 10px, transparent 10px 18px)}
.step{border:0;padding:0;display:grid;gap:9px;align-content:start;justify-items:start;position:relative}
.step-dot{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--b1);color:var(--y2);position:relative;z-index:1;font-family:var(--display);font-weight:900;font-size:1.15rem;transition:transform .35s cubic-bezier(.2,.7,.3,1), background .35s}
.step-dot b{color:inherit;line-height:1}
.step:hover .step-dot{transform:translateY(-4px) scale(1.06);background:#00305F}
.step h3{font-size:clamp(1.05rem,1.5vw,1.2rem);margin-block-start:6px}
.step p{font-size:.94rem;line-height:1.75;max-width:32ch}
.step b::before{content:none}
@media (max-width:860px){
.steps{grid-template-columns:1fr;gap:0}
.steps-line{inset-block:26px 40px;inset-inline-start:29px;inset-inline-end:auto;width:2px;height:auto;background:repeating-linear-gradient(to bottom,
      rgba(0,63,136,.42) 0 10px, transparent 10px 18px)}
.step{grid-template-columns:auto 1fr;grid-template-areas:"dot title" ". text";gap:6px 18px;padding-block-end:26px;align-items:center}
.step-dot{grid-area:dot;width:56px;height:56px}
.step h3{grid-area:title;margin:0}
.step p{grid-area:text;max-width:none}
}

/* قسم التعريف بالصفحة الرئيسية */
.intro-grid{display:grid; grid-template-columns:1.55fr .95fr; gap:clamp(26px,4vw,56px); align-items:start}
.intro-main{display:grid; gap:16px; justify-items:start}
.intro-main h2{max-width:22ch}
.intro-main p{font-size:1.03rem; line-height:1.95; color:rgba(0,63,136,.88); max-width:66ch}
.intro-side{
  background:var(--w3); border:1px solid var(--ln); border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,30px);
}
.intro-side h3{font-size:1.05rem; margin-block-end:14px}
.intro-side ul{display:grid; gap:2px}
.intro-side li{border-block-end:1px solid rgba(0,80,157,.14)}
.intro-side li:last-child{border-block-end:0}
.intro-side a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 2px; font-size:.95rem; font-weight:400; color:var(--b1);
  transition:color .3s, padding-inline .3s;
}
.intro-side a::after{content:"‹"; color:var(--b2); font-size:1.1rem; transition:transform .3s}
.intro-side a:hover{color:var(--b2); padding-inline:6px 0}
.intro-side a:hover::after{transform:translateX(-4px)}
@media (max-width:860px){.intro-grid{grid-template-columns:1fr}}

/* ==========================================================================
   تقوية العناوين الصفراء
   السبب: التدرّج داخل الحروف يجعل نصفها بالدرجة الفاتحة فتبدو باهتة،
   والحل: لون واحد مصمت بالدرجة الأعمق + تعتيم أقوى أعلى الصور.
   ========================================================================== */
.hero h1,.phero h1,.pghead h1{
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:#FDC500; -webkit-text-fill-color:#FDC500;
}
.slide-content h3,.slide-content h3 a,.slider-head h2,
.hero-eyebrow,.slider-head .eyebrow,.crumb b,.phero-meta b,
.site-foot h4,.menu-side h4,.foot-call,.menu-call,.s-count b,
.scontact-side h2,.slide-link{
  color:#FDC500;
}
.menu-main a{color:#FDC500}
.menu-main a:hover{color:#fff}
.slide-link:hover{color:#fff; text-decoration-color:#FDC500}

/* تعتيم أقوى في المنطقة العلوية حيث يقع عنوان القسم فوق الصورة */
.slide-media::after{
  background:
    linear-gradient(to top, rgba(0,45,98,.95) 0%, rgba(0,45,98,.74) 40%, rgba(0,45,98,.58) 66%, rgba(0,45,98,.86) 100%),
    linear-gradient(to left, rgba(0,45,98,.88) 0%, rgba(0,45,98,.28) 58%, transparent 100%);
}
.phero-media::after{
  background:
    linear-gradient(to top, rgba(0,45,98,.96) 0%, rgba(0,45,98,.76) 44%, rgba(0,45,98,.62) 100%),
    linear-gradient(to left, rgba(0,45,98,.86) 0%, rgba(0,45,98,.26) 60%, transparent 100%);
}
.hero-scrim{background:linear-gradient(to top,
  rgba(0,40,88,.92) 0%, rgba(0,45,98,.56) 46%, rgba(0,45,98,.70) 100%)}