/* ==========================================================================
الغيد المثالي — قالب خدمات احترافي (Landing)
نظام تصميم واحد نظيف: Tokens → Base → Components → Responsive
الهوية: لبني/سماوي (أساسي) + أسمر برونزي (ثانوي) على خلفية بيضاء.
خط محلي (Cairo) — بدون أي موارد خارجية. RTL.
========================================================================== */
/* --------------------------------------------------------------------------
0) الخط المحلي
-------------------------------------------------------------------------- */
@font-face{
font-family:"Cairo";
src:url("../fonts/cairo-arabic.woff2") format("woff2");
font-weight:200 900; font-display:swap;
unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0660-0669;
}
@font-face{
font-family:"Cairo";
src:url("../fonts/cairo-latin.woff2") format("woff2");
font-weight:200 900; font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2212;
}
/* --------------------------------------------------------------------------
1) Design Tokens
-------------------------------------------------------------------------- */
:root{
/* ---- الألوان: لبني (Sky) ---- */
--sky-050:#eaf7fd;
--sky-100:#cfeefc;
--sky-300:#5cc4f2;
--sky-500:#149fdc; /* اللبني الأساسي (اللوجو) */
--sky-600:#0b82ba;
--sky-700:#086291;
/* ---- الألوان: أسمر برونزي (Bronze) ---- */
--bronze-050:#faf2e8;
--bronze-300:#d6a266;
--bronze-500:#a86a2e; /* الأسمر الأساسي */
--bronze-600:#8a5320;
--bronze-700:#6b3f18;
/* ---- محايدات دافئة ---- */
--ink:#211d18; /* عناوين/نص قوي */
--ink-2:#4b453d; /* نص أساسي */
--muted:#857c72; /* نص ثانوي */
--faint:#a89f94;
--bg:#ffffff; /* خلفية الصفحة — بيضاء */
--surface:#ffffff; /* البطاقات */
--surface-2:#fbfaf8; /* سطح ثانوي دافئ خفيف */
--line:#eceae5; /* حدود ناعمة */
--line-2:#e2ddd5;
/* ---- تدرّجات ---- */
--grad-sky:linear-gradient(135deg,var(--sky-500),var(--sky-300));
--grad-bronze:linear-gradient(135deg,var(--bronze-500),var(--bronze-300));
--grad-brand:linear-gradient(115deg,var(--bronze-600) 0%,var(--bronze-500) 22%,var(--sky-500) 78%,var(--sky-300) 100%);
/* ---- ظلال ناعمة متدرّجة ---- */
--sh-xs:0 1px 2px rgba(33,29,24,.06);
--sh-sm:0 6px 18px -8px rgba(33,29,24,.14);
--sh-md:0 16px 38px -16px rgba(33,29,24,.20);
--sh-lg:0 32px 64px -28px rgba(33,29,24,.28);
--sh-sky:0 20px 44px -20px rgba(20,159,220,.55);
--sh-bronze:0 20px 44px -20px rgba(168,106,46,.45);
/* ---- شكل ومقاسات ---- */
--r-sm:12px; --r-md:18px; --r-lg:26px; --r-full:999px;
--container:1200px;
--gutter:clamp(16px,4vw,32px);
--section-y:clamp(56px,8vw,110px);
--ease:cubic-bezier(.22,1,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
/* ---- زجاج (Glassmorphism) ---- */
--glass-bg:rgba(255,255,255,.62);
--glass-bg-strong:rgba(255,255,255,.8);
--glass-line:rgba(255,255,255,.75);
--glass-blur:blur(18px) saturate(160%);
--glass-sh:0 18px 44px -18px rgba(33,29,24,.22),inset 0 1px 0 rgba(255,255,255,.85);
}
/* --------------------------------------------------------------------------
2) Reset & Base
-------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:"Cairo",system-ui,"Segoe UI",Arial,sans-serif;
font-size:clamp(15px,.5vw + 14px,17px);
line-height:1.85;
color:var(--ink-2);
background:var(--bg);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:clip; /* يمنع التمرير الأفقي دون كسر position:sticky */
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
button{font-family:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid color-mix(in srgb,var(--sky-500) 45%,transparent);outline-offset:3px;border-radius:6px}
::selection{background:var(--sky-100);color:var(--ink)}
/* --------------------------------------------------------------------------
3) Typography & Hierarchy
-------------------------------------------------------------------------- */
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);font-weight:800;line-height:1.22;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);font-weight:900}
h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem);font-weight:900}
h3{font-size:clamp(1.15rem,1rem + .6vw,1.4rem)}
p{margin:0 0 1rem}
strong{color:var(--ink)}
/* --------------------------------------------------------------------------
4) Layout helpers
-------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tint{background:
radial-gradient(120% 80% at 100% 0,var(--sky-050),transparent 60%),
radial-gradient(120% 80% at 0 100%,var(--bronze-050),transparent 60%),
var(--surface-2)}
.section-head{max-width:640px;margin-inline:auto;margin-bottom:clamp(32px,5vw,56px);text-align:center}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
padding:7px 16px;margin-bottom:16px;border-radius:var(--r-full);
font-size:.82rem;font-weight:800;letter-spacing:.02em;
color:var(--sky-700);background:color-mix(in srgb,var(--sky-050) 70%,#fff);
border:1px solid var(--sky-100);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px -8px rgba(20,159,220,.35);
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad-sky);animation:dotPulse 2.4s var(--ease) infinite}
@keyframes dotPulse{50%{box-shadow:0 0 0 5px rgba(20,159,220,.15)}}
.section-title{position:relative;padding-bottom:14px}
/* خط سفلي متدرّج يتمدد عند ظهور العنوان */
.section-title::after{content:"";position:absolute;bottom:0;inset-inline-start:50%;translate:50% 0;width:64px;height:4px;border-radius:4px;background:var(--grad-brand);transform:scaleX(0);transition:transform .8s var(--ease-out) .25s}
.reveal.in .section-title::after,.in .section-title::after{transform:scaleX(1)}
.section-sub{color:var(--muted);font-size:1.05rem;margin:0}
/* --------------------------------------------------------------------------
5) Buttons
-------------------------------------------------------------------------- */
.btn{
--bg:transparent;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:14px 26px;border-radius:var(--r-full);
font-weight:800;font-size:.98rem;line-height:1;
border:1.5px solid transparent;position:relative;overflow:hidden;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn__ico{font-size:1.1em;line-height:1}
.btn--primary{background:var(--grad-sky);color:#fff;box-shadow:var(--sh-sky)}
.btn--primary:hover{box-shadow:0 26px 52px -18px rgba(20,159,220,.7)}
/* لمعة تمرّ عبر الزر */
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.45),transparent 65%);transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn--primary:hover::after{transform:translateX(130%)}
.btn--outline{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn--outline:hover{border-color:var(--sky-500);color:var(--sky-700)}
.btn--light{background:#fff;color:var(--sky-700);box-shadow:var(--sh-md)}
.btn--ghost{background:transparent;border-color:color-mix(in srgb,#fff 55%,transparent);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
/* موجة النقر (Ripple) */
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:btnRipple .65s var(--ease-out) forwards;pointer-events:none}
.btn--outline .ripple,.btn--light .ripple{background:rgba(20,159,220,.25)}
@keyframes btnRipple{to{transform:scale(2.6);opacity:0}}
/* --------------------------------------------------------------------------
6) Header / Navigation
-------------------------------------------------------------------------- */
/* شريط تقدّم القراءة أعلى الصفحة */
.scroll-progress{position:fixed;top:0;inset-inline-start:0;z-index:200;height:3px;width:100%;transform-origin:right;transform:scaleX(0);background:var(--grad-brand);box-shadow:0 1px 8px rgba(20,159,220,.45);pointer-events:none}
.site-header{position:sticky;top:0;z-index:100;padding-block:14px;transition:padding .3s var(--ease)}
.site-header::before{content:"";position:absolute;inset:0;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);opacity:0;transition:opacity .3s;pointer-events:none;border-bottom:1px solid transparent}
.site-header.is-stuck::before{opacity:1;border-bottom-color:rgba(255,255,255,.6);box-shadow:0 12px 32px -18px rgba(33,29,24,.18)}
.site-header.is-stuck{padding-block:8px}
.nav{position:relative;display:flex;align-items:center;gap:20px}
.nav__brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:1.3rem;color:var(--ink)}
.nav__brand .custom-logo-link{display:inline-flex;align-items:center}
.nav__brand img,.custom-logo{max-height:58px;width:auto;transition:max-height .3s var(--ease)}
.site-header.is-stuck .nav__brand img,.site-header.is-stuck .custom-logo{max-height:48px}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--grad-brand);color:#fff;font-size:1.1rem;box-shadow:var(--sh-sm)}
.brand-name{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav__menu{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav__menu a{display:inline-block;padding:10px 15px;border-radius:var(--r-full);font-weight:700;color:var(--ink-2);position:relative}
.nav__menu a::after{content:"";position:absolute;inset-inline:15px;bottom:6px;height:2px;border-radius:2px;background:var(--grad-sky);transform:scaleX(0);transform-origin:right;transition:transform .28s var(--ease)}
.nav__menu a:hover,.nav__menu .current-menu-item>a{color:var(--sky-700)}
.nav__menu a:hover::after,.nav__menu .current-menu-item>a::after{transform:scaleX(1)}
.nav__menu .sub-menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:210px;padding:8px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-md);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease);z-index:5}
.nav__menu .sub-menu a::after{display:none}
.menu-item-has-children{position:relative}
.menu-item-has-children:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav__cta{margin-inline-start:6px}
.nav__toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px}
.nav__toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* --------------------------------------------------------------------------
7) Hero (شبكة غير متماثلة + Bento)
-------------------------------------------------------------------------- */
.hero{position:relative;padding-block:clamp(28px,5vw,64px) var(--section-y);overflow:hidden}
/* توهّجات ناعمة على الأبيض (لا تكسر الخلفية البيضاء) */
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);z-index:-1;opacity:.5}
.hero::before{width:520px;height:520px;background:radial-gradient(circle,rgba(20,159,220,.28),transparent 70%);top:-160px;inset-inline-start:-120px}
.hero::after{width:460px;height:460px;background:radial-gradient(circle,rgba(168,106,46,.18),transparent 70%);bottom:-180px;inset-inline-end:-100px}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero__eyebrow{margin-bottom:22px}
.hero__title{margin-bottom:20px}
.hero__title .mark{position:relative;white-space:nowrap;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__text{font-size:1.12rem;color:var(--muted);max-width:540px;margin-bottom:30px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.hero__trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.95rem}
.hero__avatars{display:flex}
.hero__avatars span{width:38px;height:38px;border-radius:50%;border:2px solid #fff;margin-inline-start:-10px;background:var(--grad-sky);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.8rem;box-shadow:var(--sh-xs)}
.hero__avatars span:first-child{margin-inline-start:0}
.stars{color:#f4b740;letter-spacing:1px}
/* ---- Hero video (إطار سينمائي) ---- */
.hero__media{position:relative}
/* توهّج متدرّج خلف الإطار */
.hero__media::before{content:"";position:absolute;inset:-8% -6%;border-radius:36px;background:linear-gradient(135deg,rgba(20,159,220,.35),rgba(168,106,46,.22));filter:blur(38px);z-index:-1;opacity:.8}
.hero__video{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:16/10;
background:linear-gradient(135deg,var(--sky-700),var(--sky-500));border:1px solid rgba(255,255,255,.5)}
.hero__video video{width:100%;height:100%;object-fit:cover;display:block}
/* طبقة تدرّج خفيفة أسفل الفيديو لإبراز الشارات */
.hero__video::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,39,64,.10) 0%,transparent 30%,transparent 70%,rgba(11,39,64,.22) 100%)}
/* شارات زجاجية عائمة فوق الفيديو */
.hero__vbadge{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-full);
background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);
box-shadow:var(--sh-md);font-weight:800;font-size:.85rem;color:var(--ink)}
.hero__vbadge .stars{color:#f4b740}
.hero__vbadge--rate{top:14px;inset-inline-start:14px;animation:float 6s var(--ease) infinite}
.hero__vbadge--guarantee{bottom:14px;inset-inline-end:14px;color:#0f7a45;animation:float 7s var(--ease) infinite .8s}
@keyframes float{50%{transform:translateY(-9px)}}
/* --------------------------------------------------------------------------
8) Services — مجمّعة حسب النوع + المدن كروابط (Local directory)
-------------------------------------------------------------------------- */
/* تنقّل سريع بين الخدمات — حبوب زجاجية */
.svc-nav{position:sticky;top:76px;z-index:60;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:clamp(30px,4vw,48px);padding:10px;border-radius:var(--r-full);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);box-shadow:var(--glass-sh)}
.svc-nav__pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-full);background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:var(--sh-xs);font-weight:800;font-size:.92rem;color:var(--ink-2);transition:.26s var(--ease)}
.svc-nav__pill span{font-size:1.05rem;line-height:1;transition:transform .3s var(--ease-spring)}
.svc-nav__pill:hover span{transform:scale(1.25) rotate(-8deg)}
.svc-nav__pill:hover,.svc-nav__pill.is-active{color:#fff;background:var(--grad-sky);border-color:transparent;box-shadow:var(--sh-sky);transform:translateY(-3px)}
/* شبكة بطاقات الخدمات — زجاجية مع إضاءة تتبع المؤشر */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px}
.svc-cat{position:relative;overflow:hidden;scroll-margin-top:150px;display:flex;flex-direction:column;gap:14px;padding:20px;
background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-line);border-radius:var(--r-md);box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
/* بقعة ضوء تتبع مؤشر الفأرة (تُغذّى من JS عبر --mx/--my) */
.svc-cat::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .4s;pointer-events:none;
background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(20,159,220,.12),transparent 65%)}
.svc-cat:hover::before{opacity:1}
/* خيط متدرّج علوي */
.svc-cat::after{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--grad-brand);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.svc-cat:hover::after{transform:scaleX(1)}
.svc-cat:hover{transform:translateY(-5px);box-shadow:var(--sh-md),0 24px 48px -24px rgba(20,159,220,.35);border-color:color-mix(in srgb,var(--sky-500) 30%,var(--glass-line))}
.svc-cat>*{position:relative;z-index:1}
.svc-cat__head{display:flex;align-items:center;gap:13px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.svc-cat__icon{flex:0 0 auto;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.45rem;color:#fff;background:var(--grad-brand);box-shadow:var(--sh-sm);transition:transform .4s var(--ease-spring)}
.svc-cat:hover .svc-cat__icon{transform:rotate(-8deg) scale(1.12)}
.svc-cat__title{margin:0;font-size:1.12rem;font-weight:800;line-height:1.3}
.svc-cat__title a:hover{color:var(--sky-700)}
.svc-cat__count{font-size:.8rem;font-weight:700;color:var(--muted)}
/* مدن كروابط (chips) — مضغوطة */
.svc-cat__cities{display:flex;flex-wrap:wrap;gap:7px}
.city{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9px;background:rgba(251,250,248,.85);border:1px solid var(--line);color:var(--ink-2);font-weight:700;font-size:.84rem;transition:.2s var(--ease)}
/* أيقونة موقع SVG أنيقة (تتبع لون النص) */
.city__pin{flex:0 0 auto;width:11px;height:13px;background:var(--sky-500);
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
transition:transform .2s var(--ease)}
.city:hover{background:var(--grad-sky);border-color:transparent;color:#fff;box-shadow:var(--sh-sky);transform:translateY(-2px)}
.city:hover .city__pin{background:#fff;transform:scale(1.1)}
/* --------------------------------------------------------------------------
8b) Cards (تُستخدم في: خدمات ذات صلة داخل المقال)
-------------------------------------------------------------------------- */
.tabs{display:flex;justify-content:center;margin-bottom:clamp(28px,4vw,44px)}
.tabs__list{display:inline-flex;gap:4px;max-width:100%;padding:6px;border-radius:var(--r-full);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);overflow-x:auto;scrollbar-width:none}
.tabs__list::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:11px 20px;border:0;border-radius:var(--r-full);background:transparent;color:var(--ink-2);font-weight:800;font-size:.95rem;transition:.26s var(--ease)}
.tab .tab__ico{font-size:1.05rem;line-height:1}
.tab:hover{color:var(--sky-700)}
.tab.is-active{background:var(--grad-sky);color:#fff;box-shadow:var(--sh-sky)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}
/* بطاقة خدمة أنيقة — زجاجية بأيقونة قيادية موحّدة */
.card{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px 22px;
background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
/* بقعة ضوء تتبع المؤشر */
.card .card__glow{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .4s;pointer-events:none;
background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(20,159,220,.11),transparent 65%)}
.card:hover .card__glow{opacity:1}
.card>*{position:relative;z-index:1}
/* خط علوي متدرّج يظهر عند المرور */
.card::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--grad-sky);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.card:hover::before{transform:scaleX(1)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--sky-500) 30%,var(--line))}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* خانة الأيقونة/الصورة — بحجم موحّد للجميع */
.card__icon{flex:0 0 auto;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:1.7rem;color:#fff;background:var(--grad-sky);box-shadow:var(--sh-sky);overflow:hidden;transition:transform .35s var(--ease)}
.card__icon img{width:100%;height:100%;object-fit:cover}
.card:hover .card__icon{transform:rotate(-5deg) scale(1.05)}
.card__tag{padding:6px 13px;border-radius:var(--r-full);font-size:.78rem;font-weight:800;color:var(--sky-700);background:var(--sky-050);border:1px solid var(--sky-100);white-space:nowrap}
.card__title{margin:0;font-size:1.16rem;font-weight:800;line-height:1.4}
.card__title a:hover{color:var(--sky-700)}
.card__text{margin:0;color:var(--muted);font-size:.94rem;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__foot{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--line)}
.card__link{display:inline-flex;align-items:center;gap:7px;color:var(--sky-700);font-weight:800;font-size:.95rem}
.card__link .arr{transition:transform .3s var(--ease)}
.card__link:hover .arr{transform:translateX(-5px)}
.card__meta{font-size:.8rem;color:var(--faint)}
.card.is-hidden{display:none}
.cards__empty{grid-column:1/-1;text-align:center;padding:40px;color:var(--muted);background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r-md)}
.services__more{text-align:center;margin-top:clamp(28px,4vw,44px)}
/* --------------------------------------------------------------------------
9) Features
-------------------------------------------------------------------------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.feature{position:relative;padding:40px 26px 30px;
background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-line);border-radius:var(--r-lg);text-align:center;box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden;isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
/* شريط علوي متدرّج يظهر عند المرور */
.feature::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--grad-brand);transform:scaleX(0);transform-origin:center;transition:transform .45s var(--ease)}
.feature:hover::before{transform:scaleX(1)}
/* توهّج ناعم يطلع من الأسفل */
.feature::after{content:"";position:absolute;inset-inline:0;bottom:-40%;height:70%;background:radial-gradient(60% 60% at 50% 100%,rgba(20,159,220,.14),transparent 70%);opacity:0;transition:opacity .45s var(--ease);z-index:-1}
.feature:hover::after{opacity:1}
.feature:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--sky-500) 30%,var(--line))}
/* رقم زخرفي كبير في الخلفية */
.feature__num{position:absolute;top:12px;inset-inline-start:20px;font-size:2.7rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.7px var(--sky-300);opacity:.95;transition:.4s var(--ease);z-index:-1}
.feature:hover .feature__num{-webkit-text-stroke-color:var(--sky-500);opacity:1;transform:translateY(-2px)}
/* الأيقونة + هالة نابضة */
.feature__ico{position:relative;width:78px;height:78px;margin:0 auto 20px;border-radius:22px;display:grid;place-items:center;font-size:2rem;color:#fff;background:var(--grad-brand);box-shadow:var(--sh-bronze);transition:transform .45s var(--ease)}
.feature__ico::before{content:"";position:absolute;inset:-10px;border-radius:28px;background:var(--grad-brand);filter:blur(16px);opacity:.32;z-index:-1;animation:haloPulse 3.2s var(--ease) infinite}
.feature__ico span{display:block;transition:transform .45s var(--ease)}
.feature:hover .feature__ico{transform:rotate(-6deg) scale(1.08)}
.feature:hover .feature__ico span{transform:rotate(6deg) scale(1.05)}
@keyframes haloPulse{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.5;transform:scale(1.12)}}
.feature h3{margin:0 0 8px}
.feature p{margin:0;color:var(--muted);font-size:.95rem}
/* تنويع لوني بين البطاقات */
.features .feature:nth-child(even) .feature__ico{background:var(--grad-sky);box-shadow:var(--sh-sky)}
.features .feature:nth-child(even) .feature__ico::before{background:var(--grad-sky)}
/* ظهور متدرّج (stagger) */
.features .feature:nth-child(2){transition-delay:.08s}
.features .feature:nth-child(3){transition-delay:.16s}
.features .feature:nth-child(4){transition-delay:.24s}
/* ومضة تمر عبر البطاقة عند المرور */
.feature__spark{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.5),transparent 60%);transform:translateX(-130%);z-index:1}
.feature:hover .feature__spark{transform:translateX(130%);transition:transform .8s var(--ease)}
/* --------------------------------------------------------------------------
10) Steps
-------------------------------------------------------------------------- */
/* شريط داكن فاخر بعمق زجاجي — أربع بطاقات أفقية بموصلات متحركة */
.steps-band{position:relative;overflow:hidden;color:#fff;background:
radial-gradient(90% 70% at 85% 0,rgba(92,196,242,.28),transparent 60%),
radial-gradient(80% 60% at 8% 100%,rgba(214,162,102,.22),transparent 60%),
linear-gradient(135deg,#081d30,#0b3a58 55%,#086291)}
/* شفق ضوئي يسبح داخل الشريط */
.steps-band::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(90px);
background:radial-gradient(circle,rgba(20,159,220,.4),transparent 65%);top:-320px;inset-inline-start:30%;
animation:blobDrift 14s var(--ease) infinite alternate;pointer-events:none}
/* نقاط شبكية خافتة تضيف عمقاً تقنياً */
.steps-band::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.5px);background-size:26px 26px}
.steps-band>.container{position:relative;z-index:1}
.steps-band .eyebrow{color:#cdeefe;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);box-shadow:none}
.steps-band .section-title{color:#fff}
.steps-band .section-sub{color:rgba(255,255,255,.75)}
.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px;margin:0;padding:0;list-style:none}
.step{position:relative;padding:34px 24px 28px;border-radius:var(--r-lg);
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 48px -24px rgba(0,0,0,.55);
transition:transform .35s var(--ease),background .35s,border-color .35s,box-shadow .35s}
.step:hover{transform:translateY(-10px);background:rgba(255,255,255,.14);border-color:rgba(92,196,242,.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 30px 60px -24px rgba(20,159,220,.5)}
/* رقم ضخم مفرّغ */
.step__num{position:absolute;top:16px;inset-inline-end:20px;font-size:3.4rem;font-weight:900;line-height:1;
color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.32);transition:.35s var(--ease)}
.step:hover .step__num{-webkit-text-stroke-color:var(--sky-300);transform:translateY(-3px)}
/* أيقونة متوهّجة */
.step__ico{position:relative;width:66px;height:66px;border-radius:19px;display:grid;place-items:center;font-size:1.95rem;
background:var(--grad-brand);box-shadow:0 16px 34px -12px rgba(20,159,220,.7);margin-bottom:18px;
transition:transform .4s var(--ease-spring)}
.step__ico::before{content:"";position:absolute;inset:-9px;border-radius:24px;background:var(--grad-brand);filter:blur(15px);opacity:.4;z-index:-1;animation:haloPulse 3.4s var(--ease) infinite}
.step:hover .step__ico{transform:scale(1.14) rotate(-7deg)}
.step h3{color:#fff;margin:0 0 7px;font-size:1.2rem}
.step p{color:rgba(255,255,255,.74);margin:0;font-size:.95rem}
/* شريط تقدّم سفلي يتعبأ عند المرور */
.step__bar{position:absolute;inset-inline:22px;bottom:14px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.step__bar::after{content:"";position:absolute;inset:0;background:var(--grad-sky);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.step:hover .step__bar::after{transform:scaleX(1)}
/* سهم صغير أنيق في منتصف الفراغ — مملوك للبطاقة التالية فلا يختفي خلف الجارة أبداً */
.step:not(:first-child)::after{content:"";position:absolute;top:calc(50% - 7px);inset-inline-start:-46px;width:36px;height:14px;z-index:2;
background:linear-gradient(90deg,var(--sky-300),#fff);
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
filter:drop-shadow(0 0 8px rgba(92,196,242,.85));
animation:arrowGo 1.9s var(--ease) infinite}
@keyframes arrowGo{
0%{transform:translateX(3px);opacity:.35}
45%{opacity:1}
100%{transform:translateX(-3px);opacity:.35}
}
/* ظهور متتالٍ */
.steps__grid .step:nth-child(2){transition-delay:.1s}
.steps__grid .step:nth-child(3){transition-delay:.2s}
.steps__grid .step:nth-child(4){transition-delay:.3s}
/* --------------------------------------------------------------------------
11) Coverage
-------------------------------------------------------------------------- */
.coverage__panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,48px);align-items:center;padding:clamp(28px,4vw,50px);border-radius:var(--r-lg);
background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-line);box-shadow:var(--glass-sh);position:relative;overflow:hidden}
/* فقاعتان متوهّجتان تتنفّسان داخل اللوحة */
.coverage__panel::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(20,159,220,.2),transparent 65%);inset-inline-end:-70px;top:-70px;animation:blobDrift 11s var(--ease) infinite alternate}
.coverage__panel::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(168,106,46,.14),transparent 65%);inset-inline-start:-60px;bottom:-80px;animation:blobDrift 13s var(--ease) infinite alternate-reverse}
@keyframes blobDrift{to{transform:translate(-24px,20px) scale(1.15)}}
.coverage__head{position:relative;z-index:1}
.areas{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px}
.area{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--glass-line);color:var(--ink);font-weight:700;font-size:.92rem;box-shadow:var(--sh-xs),inset 0 1px 0 rgba(255,255,255,.9);transition:.26s var(--ease)}
.area:hover{transform:translateY(-4px) scale(1.04);background:var(--grad-sky);border-color:transparent;color:#fff;box-shadow:var(--sh-sky)}
.area span{transition:transform .3s var(--ease-spring)}
.area:hover span{transform:scale(1.2)}
/* --------------------------------------------------------------------------
10b) Works — معرض أعمال بشريط صور متحرك باستمرار (لا يتوقف أبداً)
-------------------------------------------------------------------------- */
.works{padding-bottom:var(--section-y)}
.works__strip{overflow:hidden;
-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* السرعة ثابتة مهما كان عدد الصور: المدة تتناسب مع العدد */
.works__track{display:flex;gap:18px;width:max-content;padding-block:8px;will-change:transform;
animation:worksMove calc(var(--n,8)*3.4s) linear infinite}
@keyframes worksMove{to{transform:translateX(50%)}}
.works__item{position:relative;flex:0 0 auto;width:min(330px,74vw);aspect-ratio:16/11;border-radius:var(--r-md);overflow:hidden;
border:1px solid var(--glass-line);box-shadow:var(--sh-sm);background:var(--surface-2)}
.works__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.works__item:hover img{transform:scale(1.08)}
/* تظليل سفلي لإبراز العنوان */
.works__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,29,48,.72));opacity:.9;transition:opacity .4s}
.works__item:hover::after{opacity:1}
.works__cap{position:absolute;bottom:12px;inset-inline:14px;z-index:2;color:#fff;font-weight:800;font-size:.92rem;line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.45)}
/* شارة زجاجية صغيرة عند المرور */
.works__item::before{content:"↗";position:absolute;top:10px;inset-inline-start:10px;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;color:#fff;font-weight:900;
background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);
opacity:0;transform:translateY(6px);transition:.35s var(--ease)}
.works__item:hover::before{opacity:1;transform:none}
/* --------------------------------------------------------------------------
11a-2) Marquee — شريط خدمات لا نهائي
-------------------------------------------------------------------------- */
.marquee{overflow:hidden;padding-block:clamp(18px,3vw,30px);border-block:1px solid var(--line);
background:linear-gradient(180deg,var(--surface-2),#fff);
-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:clamp(28px,4vw,52px);width:max-content;animation:marqueeMove 30s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marqueeMove{to{transform:translateX(50%)}}
.marquee__item{display:inline-flex;align-items:center;gap:clamp(28px,4vw,52px);white-space:nowrap;
font-size:clamp(1.05rem,.9rem + .8vw,1.5rem);font-weight:900;color:var(--ink-2);letter-spacing:-.01em;
transition:color .3s}
.marquee__item:hover{color:var(--sky-600)}
.marquee__star{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:.8em;animation:starSpin 6s linear infinite}
@keyframes starSpin{to{transform:rotate(360deg)}}
/* --------------------------------------------------------------------------
11b) About + Stats (E-E-A-T)
-------------------------------------------------------------------------- */
.about__panel{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,52px);align-items:center;padding:clamp(28px,4vw,50px);border-radius:var(--r-lg);
background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-line);box-shadow:var(--glass-sh);position:relative;overflow:hidden}
.about__panel::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(20,159,220,.14),transparent 65%);inset-inline-start:-90px;top:-90px;animation:blobDrift 12s var(--ease) infinite alternate}
.about__text{position:relative;z-index:1}
.about__text p{color:var(--muted);max-width:520px}
.about__points{display:grid;gap:10px;margin-top:18px}
.about__points li{position:relative;padding-inline-start:32px;font-weight:700;color:var(--ink-2)}
.about__points li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;width:22px;height:22px;border-radius:8px;display:grid;place-items:center;font-size:.8rem;font-weight:900;color:#fff;background:var(--grad-sky);box-shadow:var(--sh-xs)}
.about__stats{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{padding:26px 16px;border-radius:var(--r-md);text-align:center;
background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid var(--glass-line);box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .35s var(--ease),box-shadow .35s}
.stat:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.stat__num{display:block;font-size:clamp(1.9rem,1.4rem + 1.5vw,2.5rem);font-weight:900;line-height:1.15;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__lbl{display:block;margin-top:4px;font-size:.9rem;font-weight:700;color:var(--muted)}
/* --------------------------------------------------------------------------
11c) Testimonials
-------------------------------------------------------------------------- */
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.t-card{position:relative;margin:0;display:flex;flex-direction:column;gap:12px;padding:28px 26px 24px;
background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.9);
overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.t-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md),0 24px 48px -24px rgba(20,159,220,.3);border-color:color-mix(in srgb,var(--sky-500) 28%,var(--glass-line))}
/* علامة اقتباس زخرفية كبيرة */
.t-card__quote{position:absolute;top:-14px;inset-inline-end:14px;font-size:6rem;line-height:1;font-weight:900;color:transparent;-webkit-text-stroke:2px var(--sky-100);pointer-events:none;transition:.4s var(--ease)}
.t-card:hover .t-card__quote{-webkit-text-stroke-color:var(--sky-300);transform:translateY(-4px)}
.t-card blockquote{margin:0}
.t-card blockquote p{margin:0;color:var(--ink-2);font-size:.98rem}
.t-card__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.t-card__avatar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;background:var(--grad-brand);box-shadow:var(--sh-sm)}
.t-card__who strong{display:block;color:var(--ink);line-height:1.3}
.t-card__who small{color:var(--muted);font-weight:700}
.t-grid .t-card:nth-child(2),.t-grid .t-card:nth-child(5){transition-delay:.08s}
.t-grid .t-card:nth-child(3),.t-grid .t-card:nth-child(6){transition-delay:.16s}
/* لمعة تعبر البطاقة عند المرور */
.t-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55),transparent 60%);transform:translateX(-140%)}
.t-card:hover::after{transform:translateX(140%);transition:transform .9s var(--ease)}
/* --------------------------------------------------------------------------
11d) FAQ (accordion زجاجي)
-------------------------------------------------------------------------- */
.faq{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-line);border-radius:var(--r-md);box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.9);
overflow:hidden;transition:box-shadow .3s,border-color .3s}
.faq details[open]{box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--sky-500) 30%,var(--glass-line))}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;font-weight:800;color:var(--ink);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--sky-700)}
/* أيقونة + تتحول إلى × عند الفتح */
.faq__ico{position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:10px;background:var(--sky-050);border:1px solid var(--sky-100);transition:.35s var(--ease)}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;inset:0;margin:auto;background:var(--sky-600);border-radius:2px;transition:.35s var(--ease)}
.faq__ico::before{width:12px;height:2px}
.faq__ico::after{width:2px;height:12px}
.faq details[open] .faq__ico{background:var(--grad-sky);border-color:transparent;transform:rotate(135deg)}
.faq details[open] .faq__ico::before,.faq details[open] .faq__ico::after{background:#fff}
.faq__a{padding:0 22px 20px;color:var(--muted)}
.faq__a p{margin:0}
.faq details[open] .faq__a{animation:pop .4s var(--ease) both}
/* --------------------------------------------------------------------------
12) CTA band
-------------------------------------------------------------------------- */
.cta__inner{position:relative;overflow:hidden;text-align:center;padding:clamp(36px,6vw,64px);border-radius:var(--r-lg);color:#fff;
background:linear-gradient(120deg,var(--sky-600),var(--sky-500),var(--sky-300));background-size:200% 100%;animation:ctaShift 9s ease infinite;box-shadow:var(--sh-lg)}
@keyframes ctaShift{50%{background-position:100% 0}}
.cta__inner::before,.cta__inner::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cta__inner::before{width:280px;height:280px;top:-120px;inset-inline-start:-70px;animation:ctaOrb 9s var(--ease) infinite alternate}
.cta__inner::after{width:220px;height:220px;bottom:-120px;inset-inline-end:-60px;animation:ctaOrb 12s var(--ease) infinite alternate-reverse}
@keyframes ctaOrb{to{transform:translate(18px,14px) scale(1.12)}}
.cta__inner>*{position:relative;z-index:1}
.cta__inner h2{color:#fff;margin-bottom:.4em}
.cta__inner p{color:rgba(255,255,255,.92);max-width:560px;margin:0 auto 26px}
.cta__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
/* --------------------------------------------------------------------------
13) Footer
-------------------------------------------------------------------------- */
.site-footer{position:relative;overflow:hidden;margin-top:var(--section-y);background:linear-gradient(180deg,#2a2016,#1c150e);color:#d9cfc2;padding-block:clamp(46px,6vw,72px) 26px}
/* خيط متدرّج علوي + توهّجان لونيّان داخل العتمة */
.site-footer::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--grad-brand);opacity:.9}
.site-footer::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;top:-240px;inset-inline-start:-120px;background:radial-gradient(circle,rgba(20,159,220,.14),transparent 65%);pointer-events:none}
.footer__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.footer__brand .nav__brand{color:#fff}
.footer__brand .brand-name{background:linear-gradient(115deg,#f2e2ce,var(--sky-300));-webkit-background-clip:text;background-clip:text;color:transparent}
/* اللوجو على أرضية بيضاء مستديرة ليظهر بوضوح فوق الخلفية الداكنة */
.footer__brand .custom-logo-link{display:inline-flex;align-items:center;padding:10px 16px;background:#fff;border-radius:16px;box-shadow:var(--sh-md),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .3s var(--ease)}
.footer__brand .custom-logo-link:hover{transform:translateY(-3px)}
.footer__brand .custom-logo{max-height:62px;width:auto}
.footer__brand p{margin-top:14px;color:#b6ab9c;max-width:340px}
.footer__col h3{position:relative;color:#fff;font-size:1.05rem;margin-bottom:16px;padding-bottom:10px}
.footer__col h3::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:28px;height:3px;border-radius:3px;background:var(--grad-sky)}
.footer__col li{padding:6px 0;color:#c3b9aa}
.footer__col a{position:relative;display:inline-block;transition:color .25s,transform .25s var(--ease)}
.footer__col a:hover{color:var(--sky-300);transform:translateX(-5px)}
/* أسفل الفوتر: تكديس متمركز متناظر — بعيد عن الزوايا المشغولة بالأزرار العائمة */
.footer__bottom{position:relative;z-index:1;margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;color:#a89e8f;font-size:.9rem}
.footer__bottom p{margin:0;order:2}
/* روابط الصفحات المهمة — صف علوي متمركز بفواصل نقطية */
.footer__legal{order:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 0}
.footer__legal a{position:relative;padding-inline:16px;color:#d9cfc2;font-weight:800;font-size:.92rem;transition:color .25s}
.footer__legal a:not(:first-child)::before{content:"";position:absolute;inset-inline-start:-2px;top:50%;translate:0 -50%;width:4px;height:4px;border-radius:50%;background:var(--bronze-300);opacity:.6}
.footer__legal a::after{content:"";position:absolute;bottom:-4px;inset-inline:16px;height:2px;border-radius:2px;background:var(--grad-sky);transform:scaleX(0);transform-origin:right;transition:transform .28s var(--ease)}
.footer__legal a:hover{color:var(--sky-300)}
.footer__legal a:hover::after{transform:scaleX(1)}
/* زر حقوق التصميم — صف سفلي متمركز */
.footer__bottom .sp-credit-link{order:3;margin-top:2px}
/* --------------------------------------------------------------------------
14) Floating widgets + Back-to-top
-------------------------------------------------------------------------- */
.floating{position:fixed;inset-inline-end:18px;bottom:84px;z-index:80;display:flex;flex-direction:column;gap:12px}
/* زر العودة في الجهة المقابلة لأزرار الاتصال/الواتساب حتى لا يتغطى بها */
.to-top{position:fixed;inset-inline-start:18px;bottom:18px;z-index:80;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.3rem;box-shadow:var(--sh-md);opacity:0;transform:translateY(16px);transition:.35s var(--ease)}
.to-top.show{opacity:1;transform:none}
.to-top:hover{background:var(--grad-sky);color:#fff;border-color:transparent}
/* حلقة تقدّم القراءة حول زر العودة */
.to-top--ring{display:grid;place-items:center}
.to-top--ring svg{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);transform:rotate(-90deg)}
.to-top--ring circle{fill:none;stroke-width:2.5}
.to-top--ring .ring-bg{stroke:var(--line)}
.to-top--ring .ring-prog{stroke:var(--sky-500);stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.to-top--ring:hover .ring-bg{stroke:rgba(255,255,255,.35)}
.to-top--ring:hover .ring-prog{stroke:#fff}
.to-top__arrow{position:relative;z-index:1;transition:transform .3s var(--ease-spring)}
.to-top--ring:hover .to-top__arrow{transform:translateY(-3px)}
/* --------------------------------------------------------------------------
15) Single / Archive / 404 / Search
-------------------------------------------------------------------------- */
.post{max-width:820px;margin-inline:auto;padding-inline:var(--gutter);padding-bottom:var(--section-y)}
.post__hero{position:relative;text-align:center;padding-block:clamp(28px,5vw,60px) 24px}
/* توهّج ناعم خلف عنوان المقال */
.post__hero::before{content:"";position:absolute;inset-inline:10%;top:0;height:100%;border-radius:50%;background:radial-gradient(60% 80% at 50% 0,rgba(20,159,220,.1),transparent 70%);z-index:-1;filter:blur(20px)}
.crumbs{display:flex;gap:8px;justify-content:center;align-items:center;color:var(--faint);font-size:.9rem;margin-bottom:14px;flex-wrap:wrap}
.crumbs a{padding:5px 13px;border-radius:var(--r-full);background:var(--glass-bg-strong);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--sh-xs);font-weight:700;color:var(--ink-2);transition:.25s var(--ease)}
.crumbs a:hover{color:#fff;background:var(--grad-sky);border-color:transparent;box-shadow:var(--sh-sky)}
.post__meta{display:flex;gap:12px;justify-content:center;color:var(--muted);font-size:.92rem;margin-top:12px;flex-wrap:wrap}
.post__meta span{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-full);background:var(--glass-bg-strong);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--sh-xs)}
.post__thumb{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);margin-bottom:26px}
.post__body{background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.9);padding:clamp(24px,4vw,44px)}
.post__body{font-size:1.05rem;color:var(--ink-2)}
.post__body h2,.post__body h3{color:var(--ink);margin-top:1.4em}
.post__body a{color:var(--sky-700);text-decoration:underline;text-underline-offset:3px}
.post__body img{border-radius:var(--r-md);margin-block:1.2em}
.post__body ul,.post__body ol{padding-inline-start:1.4em}
.post__body li{margin-block:.4em}
.post__body blockquote{margin:1.4em 0;padding:16px 22px;border-inline-start:4px solid var(--sky-500);background:var(--sky-050);border-radius:var(--r-sm)}
.post__body table{width:100%;border-collapse:collapse;margin-block:1.2em}
.post__body th,.post__body td{border:1px solid var(--line-2);padding:10px 14px;text-align:right}
.post-nav{display:flex;gap:16px;flex-wrap:wrap;margin-block:34px}
.post-nav a{flex:1;min-width:220px;padding:16px 20px;background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-line);border-radius:var(--r-md);box-shadow:var(--sh-sm);transition:.3s var(--ease)}
.post-nav a:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--sky-500) 30%,var(--glass-line))}
.post-nav span{display:block;color:var(--sky-700);font-size:.85rem}
.post-nav strong{color:var(--ink)}
/* خدمات في نفس المدينة — شبكة روابط داخلية */
.same-city{margin-block:34px;padding:clamp(20px,3vw,30px);border-radius:var(--r-lg);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);box-shadow:var(--glass-sh)}
.same-city h2{font-size:1.25rem;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.same-city__links{display:flex;flex-wrap:wrap;gap:9px}
.same-city__links a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--r-full);background:rgba(255,255,255,.8);border:1px solid var(--line);font-weight:700;font-size:.9rem;color:var(--ink-2);box-shadow:var(--sh-xs);transition:.25s var(--ease)}
.same-city__links a:hover{color:#fff;background:var(--grad-sky);border-color:transparent;box-shadow:var(--sh-sky);transform:translateY(-2px)}
.archive-head{text-align:center;padding-block:clamp(30px,5vw,56px) 0}
.pagination{display:flex;justify-content:center;margin-top:44px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding-inline:12px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--ink-2);font-weight:800}
.pagination .current,.pagination .page-numbers:hover{background:var(--grad-sky);color:#fff;border-color:transparent}
.search-form{display:flex;gap:8px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:var(--r-full);box-shadow:var(--sh-sm)}
.search-form input{flex:1;border:0;background:transparent;padding:10px 16px;font:inherit;color:var(--ink);outline:none}
.search-form button{padding:10px 22px;border:0;border-radius:var(--r-full);background:var(--grad-sky);color:#fff;font-weight:800}
.error404{max-width:640px;margin-inline:auto;text-align:center;padding-block:var(--section-y)}
.error404__code{font-size:clamp(4rem,14vw,8rem);font-weight:900;line-height:1;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
/* --------------------------------------------------------------------------
16) Widgets (footer/floating from plugins)
-------------------------------------------------------------------------- */
.widget{margin:0}
.widget-title{color:#fff;font-size:1.05rem;margin-bottom:14px}
.floating .widget{margin:0}
/* --------------------------------------------------------------------------
17) Motion (reveal on scroll)
-------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--rd,0s)}
.reveal.in{opacity:1;transform:none}
/* أنماط كشف إضافية للتنويع البصري */
.reveal--left{transform:translateX(-34px)}
.reveal--right{transform:translateX(34px)}
.reveal--scale{transform:scale(.92)}
.reveal--left.in,.reveal--right.in,.reveal--scale.in{transform:none}
/* عناوين تنكشف كلمة-كلمة (يفعّلها JS ما عدا الهيرو) */
.section-title.is-split .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(5px);
transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),filter .55s var(--ease-out);
transition-delay:calc(var(--i,0)*.07s)}
.in .section-title.is-split .w{opacity:1;transform:none;filter:none}
.pop{animation:pop .45s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:fixed;top:-60px;inset-inline-start:16px;z-index:999;padding:10px 16px;background:var(--sky-500);color:#fff;border-radius:10px;transition:top .2s}
.skip-link:focus{top:16px}
/* --------------------------------------------------------------------------
18) Responsive
-------------------------------------------------------------------------- */
@media (max-width:980px){
.hero__grid{grid-template-columns:1fr}
.bento{max-width:520px;margin-inline:auto}
.footer__grid{grid-template-columns:1fr 1fr}
.coverage__panel{grid-template-columns:1fr;text-align:center}
.coverage__head .eyebrow{margin-inline:auto}
.areas{justify-content:center}
.about__panel{grid-template-columns:1fr}
.about__text p{max-width:none}
.steps__grid{grid-template-columns:1fr 1fr;gap:20px}
.step::after{display:none}
}
@media (max-width:820px){
.nav__menu,.nav__cta{display:none}
.nav__toggle{display:flex}
/* قائمة الموبايل المنبثقة */
.nav.is-open .nav__menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;
position:absolute;top:calc(100% + 12px);inset-inline:0;margin:0;padding:12px;
background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg)}
.nav.is-open .nav__cta{display:inline-flex;margin:10px 0 0}
.nav__menu a::after{display:none}
.nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding-inline-start:12px}
}
@media (max-width:820px){
.svc-nav{position:static;border-radius:var(--r-lg)}
}
@media (max-width:560px){
.steps__grid{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr}
.footer__bottom{flex-direction:column;text-align:center;align-items:center}
.cards{grid-template-columns:1fr}
.svc-grid{grid-template-columns:1fr}
.svc-cat{padding:22px}
.hero__actions .btn{flex:1}
}
/* --------------------------------------------------------------------------
19) Reduced motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
.scroll-progress{display:none}
}