/*
Theme Name: رؤية - تسليك مجاري بالرياض
Theme URI: https://example.com/roya
Author: Roya
Author URI: https://example.com
Description: قالب ووردبريس عربي احترافي متكامل لشركات تسليك المجاري وتنظيف البيارات بالرياض. يدعم اللغة العربية (RTL) بالكامل، مع نوع خدمات مخصص، لوحة تحكم لتعديل الأرقام والألوان والنصوص، وأزرار اتصال وواتساب عائمة.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roya
Tags: rtl-language-support, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, business, services
*/

/* ============================================================
   1. المتغيرات (Design Tokens)
   ============================================================ */
:root{
  --navy-900:#062033;
  --navy-800:#0A3D5C;
  --navy-700:#0e567e;
  --navy-600:#12689a;
  --aqua:#16BDCA;
  --aqua-600:#0FA6B4;
  --aqua-100:#E4F7F9;
  --amber:#F6A821;
  --whatsapp:#25D366;
  --ink:#0f2230;
  --slate:#556a7a;
  --line:#e5edf2;
  --cloud:#f3f8fb;
  --white:#ffffff;

  --brand:var(--navy-800);
  --accent:var(--aqua);

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:26px;
  --shadow-sm:0 4px 14px rgba(10,61,92,.08);
  --shadow-md:0 14px 40px rgba(10,61,92,.14);
  --shadow-lg:0 26px 70px rgba(6,32,51,.22);
  --container:1200px;
  --header-h:84px;

  --font-display:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  --font-body:'Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;
}

/* ============================================================
   2. إعادة الضبط والأساسيات
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.8;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--navy-700);text-decoration:none;transition:color .2s}
a:hover{color:var(--aqua-600)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--navy-800);line-height:1.3;margin:0 0 .6em;font-weight:800}
p{margin:0 0 1em}
ul{margin:0;padding:0}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:6px}

.container{max-width:var(--container);margin-inline:auto;padding-inline:22px}
.section{padding:92px 0}
.section--tint{background:var(--cloud)}
.section--navy{background:var(--navy-800);color:#dff0f7}
.section--navy h2,.section--navy h3{color:#fff}

/* عنوان القسم */
.sec-head{text-align:center;max-width:720px;margin:0 auto 54px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:.86rem;
  letter-spacing:.5px;color:var(--aqua-600);
  background:var(--aqua-100);padding:7px 16px;border-radius:999px;margin-bottom:16px;
}
.section--navy .eyebrow{background:rgba(22,189,202,.16);color:#7fe6f0}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:14px}
.sec-head p{color:var(--slate);font-size:1.06rem}
.section--navy .sec-head p{color:#bcd6e4}

/* أزرار */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  padding:15px 30px;border-radius:999px;border:2px solid transparent;
  transition:transform .18s,box-shadow .18s,background .18s,color .18s;
  cursor:pointer;white-space:nowrap;
}
.btn svg{width:20px;height:20px}
.btn:hover{transform:translateY(-3px)}
.btn--primary{background:var(--aqua);color:#04303a;box-shadow:0 12px 30px rgba(22,189,202,.4)}
.btn--primary:hover{background:var(--aqua-600);color:#04303a}
.btn--amber{background:var(--amber);color:#4a2f00;box-shadow:0 12px 30px rgba(246,168,33,.38)}
.btn--amber:hover{color:#4a2f00}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff;color:var(--navy-800)}
.btn--navy{background:var(--navy-800);color:#fff}
.btn--navy:hover{background:var(--navy-700);color:#fff}
.btn--wa{background:var(--whatsapp);color:#fff;box-shadow:0 12px 30px rgba(37,211,102,.38)}
.btn--wa:hover{color:#fff}
.btn--block{width:100%}

/* ============================================================
   3. الهيدر
   ============================================================ */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:900;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background .35s,box-shadow .35s,height .35s;
}
.site-header .container{display:flex;align-items:center;gap:26px;width:100%}
.site-header.is-solid{background:var(--navy-800);box-shadow:0 8px 30px rgba(6,32,51,.28);height:72px}

.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand__logo img{max-height:52px;width:auto}
.brand__mark{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(135deg,var(--aqua),var(--navy-700));
  display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px rgba(22,189,202,.4);
}
.brand__mark svg{width:26px;height:26px}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:#fff}
.brand__tag{font-size:.72rem;color:#bfe6ee;letter-spacing:.5px}
.is-solid .brand__name{color:#fff}

/* زر الهمبرجر يظهر دائماً (جوال + كمبيوتر) - مميّز بالبرتقالي */
.nav-toggle{
  display:grid;width:48px;height:48px;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--amber),#f0930f);color:#4a2f00;place-items:center;flex-shrink:0;
  box-shadow:0 8px 22px rgba(246,168,33,.5);transition:transform .2s,box-shadow .2s;
}
.nav-toggle:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(246,168,33,.6);color:#4a2f00}
.nav-toggle svg{width:26px;height:26px}

/* القائمة كدرج جانبي منزلق */
.main-nav{
  position:fixed;top:0;right:0;height:100vh;height:100dvh;
  width:min(86vw,360px);background:var(--navy-800);
  display:flex;flex-direction:column;padding:26px 22px 30px;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg);z-index:960;overflow-y:auto;
}
body.nav-open .main-nav{transform:translateX(0)}
.main-nav ul{display:flex;flex-direction:column;align-items:stretch;gap:4px;list-style:none;width:100%;margin-top:12px}
.main-nav a{
  color:#eaf6fb;font-family:var(--font-display);font-weight:600;font-size:1.12rem;
  padding:14px 16px;border-radius:12px;position:relative;display:block;
}
.main-nav a:hover,.main-nav .current-menu-item>a{color:#fff;background:rgba(255,255,255,.12)}
.main-nav .sub-menu{
  list-style:none;background:rgba(255,255,255,.06);border-radius:12px;
  padding:4px;margin:4px 14px 4px 0;display:flex;flex-direction:column;gap:2px;
}
.main-nav .sub-menu a{color:#cfe6ef;font-size:1rem;font-weight:600}
.main-nav .sub-menu a:hover{color:#fff;background:rgba(255,255,255,.1)}

/* رأس الدرج: شعار + زر إغلاق */
.nav-drawer-brand{display:flex;align-items:center;gap:10px;padding:4px 6px 18px;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none}
.nav-drawer-brand .brand__mark{width:42px;height:42px}
.nav-drawer-brand .brand__name{font-size:1.3rem;font-family:var(--font-display);font-weight:800}
.nav-close{
  position:absolute;inset-block-start:16px;inset-inline-start:16px;
  width:42px;height:42px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;transition:background .2s;
}
.nav-close:hover{background:var(--aqua);color:#04303a}
.nav-close svg{width:24px;height:24px}

/* الخلفية المعتمة */
.nav-overlay{
  position:fixed;inset:0;background:rgba(6,20,32,.55);
  opacity:0;visibility:hidden;transition:opacity .38s,visibility .38s;z-index:955;
}
body.nav-open .nav-overlay{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}

.header-cta{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-inline-start:auto}
.header-phone{
  display:inline-flex;align-items:center;gap:9px;
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.08rem;
  background:rgba(255,255,255,.12);padding:9px 16px;border-radius:999px;
  transition:background .2s;
}
.header-phone:hover{background:var(--aqua);color:#04303a}
.header-phone svg{width:19px;height:19px}

/* ============================================================
   4. الهيرو (بملء الشاشة)
   ============================================================ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  color:#fff;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to left,rgba(6,32,51,.35) 0%,rgba(6,32,51,.72) 55%,rgba(6,32,51,.9) 100%),
    linear-gradient(to top,rgba(6,32,51,.85),rgba(6,32,51,.15));
}
.hero .container{position:relative;z-index:3;width:100%}
.hero__inner{max-width:640px;margin-inline-start:0} /* محاذاة لليمين في RTL */
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:#7fe6f0;margin-bottom:20px;letter-spacing:.5px;
}
.hero__eyebrow::before{content:"";width:40px;height:2px;background:var(--aqua)}
.hero h1{
  color:#fff;font-size:clamp(2.4rem,6vw,4.3rem);font-weight:900;line-height:1.15;
  margin-bottom:22px;text-shadow:0 4px 30px rgba(0,0,0,.35);
}
.hero h1 span{color:var(--aqua)}
.hero__lead{
  font-size:clamp(1.05rem,2vw,1.3rem);color:#dbeaf2;max-width:540px;margin-bottom:34px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* زر التشغيل بالمنتصف */
.hero__play{
  position:absolute;z-index:3;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.16);backdrop-filter:blur(4px);
  display:grid;place-items:center;color:#fff;
}
.hero__play::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);animation:pulse 2.4s ease-out infinite;
}
.hero__play svg{width:34px;height:34px;margin-inline-start:4px}
.hero__play:hover{background:var(--aqua);color:#04303a}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* مؤشر التمرير */
.hero__scroll{
  position:absolute;z-index:3;bottom:26px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:#cfe6ef;font-size:.8rem;font-family:var(--font-display);text-decoration:none;
}
.hero__scroll svg{width:24px;height:24px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* شريط الثقة أسفل الهيرو */
.trust-strip{background:var(--navy-900);color:#dff0f7;position:relative;z-index:5}
.trust-strip__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.trust-item{display:flex;align-items:center;gap:14px;padding:26px 20px}
.trust-item:not(:last-child){border-inline-start:1px solid rgba(255,255,255,.08)}
.trust-item__icon{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  background:rgba(22,189,202,.16);color:var(--aqua);display:grid;place-items:center;
}
.trust-item__icon svg{width:26px;height:26px}
.trust-item h4{color:#fff;font-size:1.05rem;margin:0 0 2px}
.trust-item p{margin:0;font-size:.86rem;color:#a9c6d5}

/* ============================================================
   5. نبذة (About)
   ============================================================ */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about__media{position:relative}
.about__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%;aspect-ratio:4/3;object-fit:cover}
.about__badge{
  position:absolute;inset-block-end:-24px;inset-inline-start:-24px;
  background:var(--aqua);color:#04303a;border-radius:20px;padding:20px 26px;
  box-shadow:var(--shadow-md);text-align:center;
}
.about__badge strong{display:block;font-family:var(--font-display);font-size:2.2rem;line-height:1;font-weight:900}
.about__badge span{font-size:.85rem;font-weight:700}
.about__content h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
.about__list{list-style:none;margin:22px 0 30px;display:grid;gap:14px}
.about__list li{display:flex;align-items:flex-start;gap:12px;color:var(--slate);font-weight:500}
.about__list svg{width:24px;height:24px;color:var(--aqua-600);flex-shrink:0;margin-top:3px}

/* ============================================================
   6. الخدمات
   ============================================================ */
.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.service-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid var(--line);
  transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.service-card__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.service-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.service-card:hover .service-card__media img{transform:scale(1.07)}
.service-card__icon{
  position:absolute;inset-block-end:-22px;inset-inline-end:22px;
  width:52px;height:52px;border-radius:14px;background:var(--aqua);color:#04303a;
  display:grid;place-items:center;box-shadow:0 8px 20px rgba(22,189,202,.5);
}
.service-card__icon svg{width:26px;height:26px}
.service-card__body{padding:30px 26px 26px}
.service-card__body h3{font-size:1.28rem;margin-bottom:10px}
.service-card__body h3 a{color:var(--navy-800)}
.service-card__body h3 a:hover{color:var(--aqua-600)}
.service-card__body p{color:var(--slate);font-size:.98rem;margin-bottom:16px}
.service-card__more{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);
  font-weight:700;color:var(--aqua-600);margin-top:auto;
}
.service-card__more svg{width:18px;height:18px;transition:transform .2s}
.service-card__more:hover svg{transform:translateX(-4px)}

/* ============================================================
   7. لماذا نحن
   ============================================================ */
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feature{
  background:#fff;border-radius:var(--radius);padding:34px 28px;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s;
}
.feature:hover{transform:translateY(-6px)}
.feature__icon{
  width:62px;height:62px;border-radius:16px;margin-bottom:18px;
  background:linear-gradient(135deg,var(--aqua-100),#fff);color:var(--aqua-600);
  display:grid;place-items:center;border:1px solid var(--aqua-100);
}
.feature__icon svg{width:30px;height:30px}
.feature h3{font-size:1.2rem;margin-bottom:8px}
.feature p{color:var(--slate);font-size:.96rem;margin:0}

/* ============================================================
   8. خطوات العمل
   ============================================================ */
.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{position:relative;padding:34px 24px;text-align:center;background:rgba(255,255,255,.05);border-radius:var(--radius);border:1px solid rgba(255,255,255,.1)}
.step__num{
  font-family:var(--font-display);font-weight:900;font-size:2.6rem;
  color:var(--aqua);line-height:1;margin-bottom:12px;
}
.step h3{color:#fff;font-size:1.15rem;margin-bottom:8px}
.step p{color:#bcd6e4;font-size:.92rem;margin:0}

/* ============================================================
   9. الإحصائيات
   ============================================================ */
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center;padding:20px}
.stat__num{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,4vw,3.2rem);color:var(--aqua);line-height:1}
.stat__num small{font-size:1.6rem}
.stat__label{color:#cfe6ef;font-family:var(--font-display);font-weight:600;margin-top:6px}

/* ============================================================
   10. شريط CTA
   ============================================================ */
.cta-band{
  background:linear-gradient(120deg,var(--navy-800),var(--navy-700));
  position:relative;overflow:hidden;color:#fff;border-radius:var(--radius-lg);
  padding:56px 50px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  box-shadow:var(--shadow-lg);
}
.cta-band::after{
  content:"";position:absolute;inset-block-start:-40%;inset-inline-start:-10%;
  width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(22,189,202,.35),transparent 70%);
}
.cta-band__text{position:relative;z-index:2}
.cta-band__text h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:8px}
.cta-band__text p{color:#cfe6ef;margin:0;font-size:1.08rem}
.cta-band__actions{position:relative;z-index:2;display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   11. المدونة
   ============================================================ */
.posts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;
}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.post-card__media{aspect-ratio:16/9;overflow:hidden}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-card:hover .post-card__media img{transform:scale(1.06)}
.post-card__body{padding:24px}
.post-card__date{font-size:.82rem;color:var(--aqua-600);font-weight:700;font-family:var(--font-display)}
.post-card__body h3{font-size:1.16rem;margin:8px 0 10px}
.post-card__body h3 a{color:var(--navy-800)}
.post-card__body p{color:var(--slate);font-size:.94rem;margin:0}

/* ============================================================
   12. التواصل
   ============================================================ */
.contact__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start}
.contact__info{display:grid;gap:18px}
.contact-line{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm)}
.contact-line__icon{width:50px;height:50px;border-radius:13px;background:var(--aqua-100);color:var(--aqua-600);display:grid;place-items:center;flex-shrink:0}
.contact-line__icon svg{width:24px;height:24px}
.contact-line strong{display:block;font-family:var(--font-display);color:var(--navy-800);font-size:1.05rem}
.contact-line span{color:var(--slate);font-size:.92rem}
.contact__form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-md)}
.contact__form h3{font-size:1.4rem;margin-bottom:6px}
.contact__form>p{color:var(--slate);margin-bottom:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--font-display);font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--navy-800)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-family:var(--font-body);font-size:1rem;background:var(--cloud);transition:border .2s,background .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--aqua);background:#fff}
.field textarea{resize:vertical;min-height:120px}

/* ============================================================
   13. الفوتر
   ============================================================ */
.site-footer{background:var(--navy-900);color:#a9c6d5;padding-top:70px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px}
.footer__col h4{color:#fff;font-size:1.15rem;margin-bottom:20px;position:relative;padding-bottom:12px}
.footer__col h4::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:40px;height:3px;background:var(--aqua);border-radius:3px}
.footer__about p{font-size:.95rem;line-height:1.9}
.footer__brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.footer__brand .brand__name{font-size:1.4rem}
.footer-menu{list-style:none;display:grid;gap:11px}
.footer-menu a{color:#a9c6d5;font-size:.96rem;display:inline-flex;align-items:center;gap:8px}
.footer-menu a::before{content:"‹";color:var(--aqua);font-weight:900}
.footer-menu a:hover{color:#fff}
.footer__contact li{list-style:none;display:flex;gap:12px;margin-bottom:14px;font-size:.95rem}
.footer__contact svg{width:20px;height:20px;color:var(--aqua);flex-shrink:0;margin-top:3px}
.footer__social{display:flex;gap:10px;margin-top:18px}
.footer__social a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff}
.footer__social a:hover{background:var(--aqua);color:#04303a}
.footer__social svg{width:20px;height:20px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;text-align:center;font-size:.9rem;color:#7fa0b3}
.footer__bottom a{color:var(--aqua)}

/* ============================================================
   14. الأزرار العائمة + شريط الجوال
   ============================================================ */
.float-btns{position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:800;display:flex;flex-direction:column;gap:14px}
.float-btn{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:var(--shadow-md);position:relative;transition:transform .2s;
}
.float-btn:hover{transform:scale(1.1);color:#fff}
.float-btn svg{width:29px;height:29px;position:relative;z-index:2}
.float-btn--wa{background:var(--whatsapp)}
.float-btn--wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--whatsapp);animation:pulse 2.2s ease-out infinite}
.float-btn--call{background:linear-gradient(135deg,var(--amber),#f0930f);color:#4a2f00}
.float-btn--call::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--amber);animation:pulse 2s ease-out infinite}

.mobile-callbar{
  display:none;position:fixed;inset-block-end:0;inset-inline:0;z-index:850;
  background:var(--navy-800);box-shadow:0 -6px 20px rgba(0,0,0,.25);
}
.mobile-callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 8px;color:#fff;font-family:var(--font-display);font-weight:700;font-size:.98rem;
}
.mobile-callbar a svg{width:20px;height:20px}
.mobile-callbar a+a{border-inline-start:1px solid rgba(255,255,255,.15)}
.mobile-callbar .mc-wa{background:var(--whatsapp)}

/* ============================================================
   15. صفحات المحتوى (المقال/الأرشيف)
   ============================================================ */
.page-hero{
  background:linear-gradient(120deg,var(--navy-800),var(--navy-700));
  color:#fff;padding:calc(var(--header-h) + 60px) 0 70px;text-align:center;position:relative;overflow:hidden;
}
.page-hero::after{content:"";position:absolute;inset-block-end:-50%;inset-inline-end:-5%;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(22,189,202,.3),transparent 70%)}
.page-hero h1{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);position:relative;z-index:2}
.breadcrumbs{position:relative;z-index:2;color:#bcd6e4;font-size:.92rem;margin-top:10px}
.breadcrumbs a{color:var(--aqua)}

.content-layout{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start}
.article{background:#fff}
.article__thumb{border-radius:var(--radius);overflow:hidden;margin-bottom:26px}
.article__meta{display:flex;flex-wrap:wrap;gap:16px;color:var(--slate);font-size:.9rem;margin-bottom:18px;font-family:var(--font-display)}
.article__meta span{display:inline-flex;align-items:center;gap:6px}
.article__meta svg{width:16px;height:16px;color:var(--aqua-600)}
.entry-content{font-size:1.05rem;line-height:1.95}
.entry-content h2{font-size:1.6rem;margin:1.4em 0 .5em}
.entry-content h3{font-size:1.3rem;margin:1.2em 0 .4em}
.entry-content ul,.entry-content ol{padding-inline-start:1.4em;margin:0 0 1.2em}
.entry-content li{margin-bottom:.5em}
.entry-content img{border-radius:var(--radius);margin:1.4em 0}
.entry-content a:not(.btn){color:var(--aqua-600);text-decoration:underline}
.entry-content .btn{text-decoration:none}
.entry-content blockquote{border-inline-start:4px solid var(--aqua);background:var(--cloud);padding:18px 24px;border-radius:0 12px 12px 0;margin:1.4em 0;color:var(--navy-800);font-weight:500}

.sidebar .widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:24px;box-shadow:var(--shadow-sm)}
.sidebar .widget-title{font-size:1.15rem;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--aqua-100)}
.sidebar ul{list-style:none;display:grid;gap:10px}
.sidebar ul a{color:var(--ink);font-weight:500}
.sidebar ul a:hover{color:var(--aqua-600)}
.widget-cta{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#fff;text-align:center}
.widget-cta *{color:#fff}
.widget-cta .btn{margin-top:12px}

.archive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.pagination .page-numbers{
  display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;
  border-radius:12px;background:#fff;border:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;color:var(--navy-800);
}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--aqua);color:#04303a;border-color:var(--aqua)}

/* تعليقات */
.comments-area{margin-top:50px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.comment-list{list-style:none}
.comment-body{padding:18px 0;border-bottom:1px solid var(--line)}
.comment-form input,.comment-form textarea{width:100%;padding:12px 15px;border:1.5px solid var(--line);border-radius:10px;margin-bottom:12px;font-family:var(--font-body)}

/* 404 */
.error404-wrap{text-align:center;padding:calc(var(--header-h) + 80px) 0 100px}
.error404-wrap .big{font-family:var(--font-display);font-weight:900;font-size:clamp(6rem,18vw,12rem);line-height:1;color:var(--aqua);opacity:.9}

/* ============================================================
   16. الاستجابة (Responsive)
   ============================================================ */
@media(max-width:1024px){
  .about__grid,.contact__grid,.content-layout{grid-template-columns:1fr}
  .content-layout .sidebar{order:2}
  .services__grid,.why__grid,.posts__grid{grid-template-columns:repeat(2,1fr)}
  .steps__grid,.stats__grid{grid-template-columns:repeat(2,1fr)}
  .trust-strip__grid{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2){border-inline-start:0}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .about__media{max-width:520px;margin-inline:auto}
}
@media(max-width:768px){
  .section{padding:60px 0}
  .site-header .container{gap:12px}
  :root{--header-h:72px}
  .header-cta{gap:8px}
  .header-phone{padding:10px 12px}
  .header-phone span{display:none}
  .header-cta .btn--wa{display:none}
  /* الهيرو: مساحة علوية لتفادي تداخل الهيدر الثابت */
  .hero{padding-top:calc(var(--header-h) + 16px);padding-bottom:64px}
  .hero__play{width:72px;height:72px}
  .hero h1{margin-bottom:18px}
  .hero__lead{margin-bottom:26px}
  /* الأزرار الطائرة تظهر على الموبايل (بدل الشريط السفلي) */
  .float-btns{display:flex;inset-block-end:18px;inset-inline-start:18px}
  .archive-grid,.form-row{grid-template-columns:1fr}
  .cta-band{padding:38px 26px;text-align:center;justify-content:center}
  .cta-band__actions{justify-content:center;width:100%}
  .cta-band__actions .btn{flex:1;min-width:150px}
  .mobile-callbar{display:none}
  .page-hero{padding:calc(var(--header-h) + 40px) 0 50px}
}
@media(max-width:520px){
  .section{padding:52px 0}
  .container{padding-inline:18px}
  .services__grid,.why__grid,.posts__grid,.steps__grid,.stats__grid,.trust-strip__grid,.footer__grid,.archive-grid{grid-template-columns:1fr}
  .trust-item{border-inline-start:0!important;border-top:1px solid rgba(255,255,255,.08)}
  .about__badge{inset-inline-start:12px;inset-block-end:-16px;padding:14px 18px}
  .hero__inner{margin-inline:auto;text-align:center}
  .hero__eyebrow{justify-content:center}
  .hero__actions{justify-content:center}
  .hero__actions .btn{flex:1;min-width:140px;justify-content:center}
  .brand__tag{display:none}
  .brand__name{font-size:1.15rem}
  .sec-head{margin-bottom:38px}
  .sec-head h2{font-size:1.6rem}
  .btn{padding:13px 22px;font-size:.98rem}
  .cta-band__text h2{font-size:1.5rem}
}
@media(max-width:360px){
  .header-cta .btn--wa{display:none}
  .brand__mark{width:40px;height:40px}
  .hero h1{font-size:2rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}

/* ============================================================
   17. الصفحات الداخلية الجديدة
   ============================================================ */

/* رؤية / رسالة / قيم */
.vmv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vmv-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px 30px;box-shadow:var(--shadow-sm);transition:transform .2s}
.vmv-card:hover{transform:translateY(-6px)}
.vmv-card h3{font-size:1.35rem;margin-bottom:10px}
.vmv-card p{color:var(--slate);margin:0}

/* الأسئلة الشائعة */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s}
.faq-item.is-open{box-shadow:var(--shadow-md)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;padding:22px 26px;text-align:start;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--navy-800);cursor:pointer}
.faq-icon{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--aqua-100);color:var(--aqua-600);transition:transform .3s}
.faq-icon svg{width:18px;height:18px}
.faq-item.is-open .faq-icon{transform:rotate(180deg);background:var(--aqua);color:#04303a}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{margin:0;padding:0 26px 24px;color:var(--slate);line-height:1.9}

/* آراء العملاء */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px;transition:transform .2s,box-shadow .2s;position:relative}
.review-card::before{content:"\201D";position:absolute;inset-block-start:10px;inset-inline-end:24px;font-family:Georgia,serif;font-size:5rem;line-height:1;color:var(--aqua-100)}
.review-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.review-stars{display:flex;gap:3px;position:relative;z-index:1}
.review-stars svg{width:20px;height:20px}
.review-stars .on{color:#f5b301}
.review-stars .off{color:#dfe7ec}
.review-text{color:var(--ink);font-size:1.02rem;line-height:1.9;margin:0;position:relative;z-index:1;flex:1}
.review-author{display:flex;align-items:center;gap:12px;margin-top:auto}
.review-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--aqua),var(--navy-700));color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.3rem;flex-shrink:0}
.review-author strong{display:block;font-family:var(--font-display);color:var(--navy-800)}
.review-author span span,.review-author>span>span{font-size:.85rem;color:var(--slate)}

/* معرض الأعمال */
.gallery-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.gf-btn{background:#fff;border:1.5px solid var(--line);color:var(--navy-800);font-family:var(--font-display);font-weight:700;font-size:.96rem;padding:10px 22px;border-radius:999px;cursor:pointer;transition:all .2s}
.gf-btn:hover{border-color:var(--aqua)}
.gf-btn.is-active{background:var(--aqua);border-color:var(--aqua);color:#04303a}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gallery-item{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:opacity .3s,transform .3s}
.gallery-item.is-hidden{display:none}
.gallery-link{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}
.gallery-link img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-link figcaption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:linear-gradient(to top,rgba(6,32,51,.85),transparent 60%);color:#fff;opacity:0;transition:opacity .3s}
.gallery-item:hover figcaption{opacity:1}
.gallery-tag{align-self:flex-start;background:var(--aqua);color:#04303a;font-family:var(--font-display);font-weight:700;font-size:.78rem;padding:4px 12px;border-radius:999px;margin-bottom:8px}
.gallery-link figcaption strong{font-family:var(--font-display);font-size:1.05rem}
.gallery-zoom{position:absolute;inset-block-start:16px;inset-inline-end:16px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff}
.gallery-zoom svg{width:20px;height:20px}

/* لايت بوكس */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(6,20,32,.94);display:none;align-items:center;justify-content:center;flex-direction:column;padding:30px}
.lightbox.is-open{display:flex}
.lightbox img{max-width:92vw;max-height:82vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox-caption{color:#fff;font-family:var(--font-display);font-weight:600;margin-top:18px;font-size:1.05rem}
.lightbox-close{position:absolute;inset-block-start:22px;inset-inline-end:22px;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center}
.lightbox-close:hover{background:var(--aqua);color:#04303a}
.lightbox-close svg{width:26px;height:26px}

/* الخريطة */
.map-embed{border-radius:0;overflow:hidden;line-height:0}

@media(max-width:1024px){
  .vmv-grid,.reviews-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .vmv-grid,.reviews-grid,.gallery-grid{grid-template-columns:1fr}
  .faq-q{font-size:1rem;padding:18px 20px}
}

/* ============================================================
   18. صفحة الخدمات (قائمة جانبية + لوحة)
   ============================================================ */
.services-layout{display:grid;grid-template-columns:320px 1fr;gap:38px;align-items:start}

/* القائمة الجانبية */
.services-nav{position:sticky;top:calc(var(--header-h) + 16px);display:grid;gap:20px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.panel__title{display:flex;align-items:center;gap:10px;font-size:1.15rem;margin:0 0 16px;padding-bottom:14px;border-bottom:2px solid var(--aqua-100)}
.panel__title svg{width:22px;height:22px;color:var(--aqua-600)}
.services-nav__list ul{list-style:none;display:grid;gap:4px}
.services-nav__link{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  color:var(--navy-800);font-family:var(--font-display);font-weight:600;font-size:1rem;
  transition:background .2s,color .2s;position:relative;
}
.services-nav__icon{width:38px;height:38px;border-radius:10px;background:var(--aqua-100);color:var(--aqua-600);display:grid;place-items:center;flex-shrink:0;transition:all .2s}
.services-nav__icon svg{width:20px;height:20px}
.services-nav__link>span:nth-child(2){flex:1}
.services-nav__arrow{opacity:0;transition:opacity .2s}
.services-nav__arrow svg{width:18px;height:18px}
.services-nav__link:hover,.services-nav__link.is-active{background:var(--navy-800);color:#fff}
.services-nav__link:hover .services-nav__icon,.services-nav__link.is-active .services-nav__icon{background:var(--aqua);color:#04303a}
.services-nav__link:hover .services-nav__arrow,.services-nav__link.is-active .services-nav__arrow{opacity:1;color:#fff}

.panel--cta{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#fff;text-align:center}
.panel--cta h3{color:#fff;font-size:1.2rem;margin-bottom:8px}
.panel--cta p{color:#cfe6ef;font-size:.94rem;margin-bottom:16px}

.services-nav__hours{display:grid;gap:14px}
.services-nav__hours-row{display:flex;align-items:flex-start;gap:12px}
.services-nav__hours-row svg{width:22px;height:22px;color:var(--aqua-600);flex-shrink:0;margin-top:2px}
.services-nav__hours-row strong{display:block;font-family:var(--font-display);color:var(--navy-800);font-size:.98rem}
.services-nav__hours-row span{color:var(--slate);font-size:.88rem}

/* اللوحة الرئيسية */
.services-panel{display:grid;gap:26px}
.service-panel{
  display:grid;grid-template-columns:300px 1fr;gap:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s;scroll-margin-top:calc(var(--header-h) + 20px);
}
.service-panel:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.service-panel__media{position:relative;min-height:220px;overflow:hidden}
.service-panel__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .5s}
.service-panel:hover .service-panel__media img{transform:scale(1.06)}
.service-panel__badge{position:absolute;inset-block-start:16px;inset-inline-start:16px;width:48px;height:48px;border-radius:12px;background:var(--aqua);color:#04303a;display:grid;place-items:center;box-shadow:0 8px 20px rgba(22,189,202,.5)}
.service-panel__badge svg{width:24px;height:24px}
.service-panel__body{padding:30px 30px 28px;display:flex;flex-direction:column}
.service-panel__num{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--aqua-600);letter-spacing:.5px}
.service-panel__body h2{font-size:1.5rem;margin:6px 0 12px}
.service-panel__body p{color:var(--slate);font-size:1rem;margin-bottom:20px;flex:1}
.service-panel__actions{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:1024px){
  .services-layout{grid-template-columns:1fr}
  .services-nav{position:static;grid-template-columns:1fr 1fr;gap:18px}
  .services-nav__list{grid-column:1/-1}
  .services-nav__list ul{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .services-nav{grid-template-columns:1fr}
  .services-nav__list ul{grid-template-columns:1fr}
  .service-panel{grid-template-columns:1fr}
  .service-panel__media{min-height:200px;position:relative;aspect-ratio:16/10}
  .service-panel__actions .btn{flex:1;min-width:140px;justify-content:center}
}

/* ============================================================
   19. اللمسة البرتقالية (تناغم فيروزي + برتقالي)
   ============================================================ */

/* خط برتقالي أنيق تحت عناوين الأقسام (يظهر في كل الصفحات) */
.sec-head h2{position:relative;display:inline-block}
.sec-head h2::after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin:16px auto 0;background:linear-gradient(90deg,var(--amber),#f0930f)}

/* شريط علوي برتقالي رفيع أعلى الفوتر */
.site-footer{border-top:4px solid transparent;border-image:linear-gradient(90deg,var(--amber),#f0930f) 1}
.footer__col h4::after{background:var(--amber)}

/* شارة سنوات الخبرة برتقالية */
.about__badge{background:linear-gradient(135deg,var(--amber),#f0930f);color:#4a2f00}

/* أرقام الخطوات برتقالية */
.step__num{color:var(--amber)}

/* لمسة برتقالية في الهيرو */
.hero__eyebrow{color:#f9c46b}
.hero__eyebrow::before{background:var(--amber)}

/* تسميات صغيرة برتقالية (تواريخ المقالات + أرقام الخدمات) */
.post-card__date,.service-panel__num{color:#d97a06}
.article__meta svg{color:var(--amber)}

/* أيقونات المزايا تتحول للبرتقالي عند المرور */
.feature:hover .feature__icon{background:linear-gradient(135deg,#ffe9c7,#fff);color:#d97a06;border-color:#ffe0b0}

/* أيقونة الخدمة على القائمة الجانبية عند التفعيل تبقى فيروزية، مع لمسة برتقالية للسهم */
.services-nav__link:hover .services-nav__arrow,.services-nav__link.is-active .services-nav__arrow{color:#ffd8a0}

/* توهج برتقالي إضافي في شريط الحث */
.cta-band::before{content:"";position:absolute;inset-block-end:-45%;inset-inline-end:-8%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(246,168,33,.30),transparent 70%);z-index:0}

/* توهج برتقالي في ترويسة الصفحات الداخلية */
.page-hero::before{content:"";position:absolute;inset-block-start:-45%;inset-inline-start:-8%;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(246,168,33,.24),transparent 70%);z-index:1}
.page-hero .container{position:relative;z-index:2}

/* نقطة برتقالية زخرفية بجانب عنوان الودجت */
.widget-title{position:relative}

/* حد برتقالي على البطاقات عند المرور (لمسة دافئة) */
.service-card:hover{border-color:#ffd9a8}
.review-card:hover{border-color:#ffd9a8}
.vmv-card:hover{border-color:#ffd9a8}

/* ============================================================
   20. سلايدر الخدمات بملء الشاشة
   ============================================================ */
.svc-slider{position:relative;min-height:100svh;overflow:hidden;background:#062033;color:#fff}
.svc-slides{position:absolute;inset:0}
.svc-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.svc-slide.is-active{opacity:1;visibility:visible}
.svc-slide__bg{position:absolute;inset:0;overflow:hidden}
.svc-slide__bg img{width:100%;height:100%;object-fit:cover}
.svc-slide.is-active .svc-slide__bg img{animation:svcZoom 7s ease-out forwards}
@keyframes svcZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.svc-slide__overlay{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(6,32,51,.92) 0%,rgba(6,32,51,.5) 45%,rgba(6,32,51,.35) 100%),
  linear-gradient(to left,transparent 40%,rgba(6,32,51,.7) 100%)}
.svc-slide__num{position:absolute;bottom:40px;left:50px;font-family:var(--font-display);font-weight:900;font-size:11rem;line-height:1;color:rgba(255,255,255,.06);z-index:1;pointer-events:none}

.svc-slider__head{position:absolute;top:calc(var(--header-h) + 34px);inset-inline:0;z-index:5;pointer-events:none}
.svc-slider__eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;color:#f9c46b;letter-spacing:.5px;margin-bottom:10px}
.svc-slider__eyebrow::before{content:"";width:38px;height:2px;background:var(--amber)}
.svc-slider__head h1,.svc-slider__head h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.6rem);text-shadow:0 4px 24px rgba(0,0,0,.4);margin:0}

.svc-slide__wrap{position:relative;height:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px}
.svc-slide__content{position:absolute;bottom:120px;inset-inline-end:22px;max-width:560px;z-index:3}
.svc-slide__titlerow{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.svc-slide__icon{width:60px;height:60px;flex-shrink:0;border-radius:16px;background:var(--aqua);color:#04303a;display:grid;place-items:center;box-shadow:0 10px 26px rgba(22,189,202,.5)}
.svc-slide__icon svg{width:30px;height:30px}
.svc-slide__content h2{color:#fff;font-size:clamp(1.8rem,4vw,3rem);margin:0;line-height:1.2;text-shadow:0 4px 24px rgba(0,0,0,.4)}
.svc-slide__content p{color:#dbeaf2;font-size:clamp(1rem,1.6vw,1.15rem);margin:0 0 24px;max-width:520px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.svc-slide__actions{display:flex;gap:12px;flex-wrap:wrap}

/* الأسهم */
.svc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(6,32,51,.35);backdrop-filter:blur(4px);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s}
.svc-arrow:hover{background:var(--amber);border-color:var(--amber);color:#4a2f00}
.svc-arrow svg{width:26px;height:26px}
.svc-arrow--prev{inset-inline-end:26px}
.svc-arrow--next{inset-inline-start:26px}

/* النقاط */
.svc-dots{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:10px}
.svc-dot{width:12px;height:12px;border-radius:50%;border:0;background:rgba(255,255,255,.35);cursor:pointer;transition:background .25s,width .25s;padding:0}
.svc-dot.is-active{background:var(--amber);width:34px;border-radius:6px}

@media(max-width:768px){
  .svc-slide__overlay{background:linear-gradient(to top,rgba(6,32,51,.95) 0%,rgba(6,32,51,.55) 55%,rgba(6,32,51,.4) 100%)}
  .svc-slide__content{bottom:104px;inset-inline:22px;max-width:none}
  .svc-slide__num{font-size:7rem;left:20px;bottom:120px}
  .svc-arrow{width:46px;height:46px}
  .svc-arrow--prev{inset-inline-end:14px}
  .svc-arrow--next{inset-inline-start:14px}
  .svc-slide__icon{width:52px;height:52px}
  .svc-slide__actions .btn{flex:1;min-width:150px;justify-content:center}
}
@media(max-width:480px){
  .svc-arrow{top:auto;bottom:44px;transform:none}
  .svc-arrow--prev{inset-inline-end:18px}
  .svc-arrow--next{inset-inline-start:18px}
  .svc-dots{bottom:52px}
  .svc-slide__content{bottom:118px}
  .svc-slide__num{display:none}
}

/* نسخة السلايدر المدمجة داخل الصفحة الرئيسية (ارتفاع محدد بدل ملء الشاشة) */
.svc-slider--embed{min-height:0;height:640px}
.svc-slider--embed .svc-slider__head{top:36px}
@media(max-width:768px){
  .svc-slider--embed{height:600px}
  .svc-slider--embed .svc-slide__content{bottom:96px}
}
@media(max-width:480px){
  .svc-slider--embed{height:580px}
}


/* ============================================================
   21. تحسينات احترافية للصفحات الداخلية (عناصر بصرية + ألوان)
   ============================================================ */

/* --- ترويسة الصفحات: نمط نقطي + دوائر ضوئية + موجة مائية --- */
.page-hero{
  background:
    radial-gradient(circle at 18% 28%, rgba(22,189,202,.22), transparent 42%),
    radial-gradient(circle at 86% 16%, rgba(246,168,33,.16), transparent 46%),
    linear-gradient(120deg,var(--navy-800),var(--navy-700));
  padding-block:calc(var(--header-h) + 70px) 118px;
  overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.09) 1.4px, transparent 1.4px);
  background-size:26px 26px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent);
}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:92px;z-index:3;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20110%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%2316BDCA%27%20fill-opacity%3D%270.22%27%20d%3D%27M0%2C52%20C400%2C112%201040%2C8%201440%2C60%20L1440%2C110%20L0%2C110%20Z%27%2F%3E%3Cpath%20fill%3D%27%23ffffff%27%20d%3D%27M0%2C72%20C360%2C120%201080%2C34%201440%2C82%20L1440%2C110%20L0%2C110%20Z%27%2F%3E%3C%2Fsvg%3E") bottom center / 100% 100% no-repeat;
}
.page-hero .container{position:relative;z-index:4}
.page-hero h1{margin-bottom:14px}

/* فتات الخبز على شكل شريحة أنيقة */
.breadcrumbs{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:7px 16px;border-radius:999px;backdrop-filter:blur(4px)}

/* --- دوائر ضوئية زخرفية في الأقسام الملوّنة --- */
.section--tint{position:relative;overflow:hidden}
.section--tint::before{content:"";position:absolute;inset-block-start:-90px;inset-inline-end:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(22,189,202,.12),transparent 70%);z-index:0;pointer-events:none}
.section--tint::after{content:"";position:absolute;inset-block-end:-110px;inset-inline-start:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(246,168,33,.10),transparent 70%);z-index:0;pointer-events:none}
.section--tint>.container{position:relative;z-index:1}

/* --- شريط علوي متدرّج يظهر على البطاقات عند المرور --- */
.service-card,.post-card,.review-card,.vmv-card{position:relative;overflow:hidden}
.review-card::after,.vmv-card::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--aqua),var(--amber));transform:scaleX(0);transform-origin:inline-end;transition:transform .35s}
.review-card:hover::after,.vmv-card:hover::after{transform:scaleX(1)}

/* --- اللوحات الجانبية: شريط علوي متدرّج ثابت --- */
.panel{position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;background:linear-gradient(90deg,var(--aqua),var(--amber))}
.panel--cta::before{background:linear-gradient(90deg,var(--amber),#f0930f)}

/* --- بطاقات التواصل: مؤشر جانبي ملوّن + رفع عند المرور --- */
.contact-line{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.contact-line::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;width:4px;background:linear-gradient(var(--aqua),var(--amber));opacity:0;transition:opacity .25s}
.contact-line:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:transparent}
.contact-line:hover::before{opacity:1}

/* --- الأسئلة الشائعة: شارات أرقام احترافية --- */
.faq{counter-reset:faq}
.faq-q>span:first-of-type{flex:1;display:flex;align-items:center;gap:14px}
.faq-q>span:first-of-type::before{
  counter-increment:faq;content:counter(faq,decimal-leading-zero);
  width:38px;height:38px;flex-shrink:0;border-radius:11px;
  background:linear-gradient(135deg,var(--aqua-100),#fff);color:var(--aqua-600);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.95rem;
  border:1px solid var(--aqua-100);transition:all .25s;
}
.faq-item.is-open .faq-q>span:first-of-type::before{background:linear-gradient(135deg,var(--amber),#f0930f);color:#4a2f00;border-color:transparent}

/* --- عنوان الودجت: نقطة برتقالية زخرفية --- */
.sidebar .widget-title{display:flex;align-items:center;gap:9px}
.sidebar .widget-title::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--amber);flex-shrink:0}

/* --- بطاقات معرض الأعمال: زاوية علوية أنيقة --- */
.gallery-item{position:relative}
.gallery-item::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;border-block-start:42px solid rgba(246,168,33,.9);border-inline-end:42px solid transparent;z-index:2;opacity:0;transition:opacity .3s}
.gallery-item:hover::before{opacity:1}

/* --- خطوة العمل: خط رابط متقطّع بين الخطوات --- */
.steps__grid{position:relative}
.step{position:relative}

/* --- توحيد ظلال البطاقات لعمق ألطف --- */
.service-panel,.review-card,.vmv-card,.feature,.post-card,.service-card{box-shadow:0 6px 24px rgba(10,61,92,.07)}
.service-panel:hover,.post-card:hover,.service-card:hover{box-shadow:0 20px 50px rgba(10,61,92,.14)}

/* تحسين ترويسة المقال المفرد */
.article__meta{padding:14px 18px;background:var(--cloud);border-radius:12px;border:1px solid var(--line);display:inline-flex}

/* ============================================================
   22. صفحة الخدمة المفردة الاحترافية
   ============================================================ */
/* هيرو الخدمة */
.page-hero--service{text-align:center}
.svc-hero-icon{width:78px;height:78px;margin:0 auto 18px;border-radius:20px;background:linear-gradient(135deg,var(--aqua),var(--aqua-600));color:#04303a;display:grid;place-items:center;box-shadow:0 14px 34px rgba(22,189,202,.45);position:relative;z-index:4}
.svc-hero-icon svg{width:40px;height:40px}
.svc-hero-lead{max-width:640px;margin:0 auto 24px;color:#cfe6ef;font-size:1.08rem;position:relative;z-index:4}
.svc-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:4;margin-bottom:24px}
.svc-hero-trust{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:4}
.svc-hero-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:8px 16px;border-radius:999px;color:#eaf6fb;font-family:var(--font-display);font-weight:600;font-size:.9rem;backdrop-filter:blur(4px)}
.svc-hero-chip svg{width:18px;height:18px;color:#7fe6f0}

/* الشريط الجانبي الثابت */
.svc-sidebar{position:sticky;top:calc(var(--header-h) + 16px);display:grid;gap:20px;align-self:start}
.svc-sidebar .panel__title{display:flex;align-items:center;gap:10px;font-size:1.1rem;margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--aqua-100)}
.svc-sidebar .panel__title svg{width:20px;height:20px;color:var(--aqua-600)}
.svc-sidebar ul{list-style:none;display:grid;gap:8px}
.svc-sidebar ul a{display:flex;align-items:center;gap:9px;color:var(--navy-800);font-weight:600;font-size:.96rem;padding:8px 10px;border-radius:10px;transition:background .2s}
.svc-sidebar ul a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--aqua);flex-shrink:0}
.svc-sidebar ul a:hover{background:var(--aqua-100);color:var(--aqua-600)}

/* جدول الأسعار / الباقات */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:relative;transition:transform .25s,box-shadow .25s}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.price-card__name{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--navy-800);margin-bottom:6px}
.price-card__desc{color:var(--slate);font-size:.92rem;margin-bottom:18px;min-height:42px}
.price-card__price{font-family:var(--font-display);font-weight:900;font-size:2.4rem;color:var(--navy-800);line-height:1}
.price-card__price small{font-size:.85rem;font-weight:600;color:var(--slate);display:block;margin-bottom:6px}
.price-card__price span{font-size:1.05rem;color:var(--aqua-600);font-weight:700}
.price-card__list{list-style:none;display:grid;gap:12px;margin:22px 0 24px;padding:22px 0 0;border-top:1px solid var(--line)}
.price-card__list li{display:flex;align-items:flex-start;gap:10px;color:var(--ink);font-size:.96rem}
.price-card__list svg{width:20px;height:20px;color:var(--aqua-600);flex-shrink:0;margin-top:2px}
.price-card .btn{margin-top:auto}
.price-card--featured{border-color:var(--aqua);box-shadow:0 20px 50px rgba(22,189,202,.2);transform:translateY(-8px)}
.price-card--featured::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;background:linear-gradient(90deg,var(--aqua),var(--amber));border-radius:var(--radius) var(--radius) 0 0}
.price-badge{position:absolute;inset-block-start:-14px;inset-inline-end:24px;background:linear-gradient(135deg,var(--amber),#f0930f);color:#4a2f00;font-family:var(--font-display);font-weight:700;font-size:.8rem;padding:6px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(246,168,33,.4)}
.pricing-note{text-align:center;color:var(--slate);font-size:.92rem;margin-top:26px}

@media(max-width:1024px){.pricing-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}.price-card--featured{transform:none}}
@media(max-width:768px){.svc-sidebar{position:static}}

/* ============================================================
   23. قسم السيو في الرئيسية
   ============================================================ */
.seo-prose{max-width:880px;margin-inline:auto}
.seo-prose h3{font-size:1.35rem;margin:1.4em 0 .5em;display:flex;align-items:center;gap:10px}
.seo-prose h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--amber);flex-shrink:0}
.seo-prose>ul:not(.seo-areas){list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seo-prose>ul:not(.seo-areas) li{position:relative;padding-inline-start:30px;color:var(--slate)}
.seo-prose>ul:not(.seo-areas) li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:7px;width:16px;height:16px;border-radius:50%;background:var(--aqua-100);border:3px solid var(--aqua);box-sizing:border-box}
.seo-areas{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.seo-areas li{background:#fff;border:1px solid var(--line);color:var(--navy-800);font-family:var(--font-display);font-weight:600;font-size:.9rem;padding:8px 16px;border-radius:999px;box-shadow:var(--shadow-sm);transition:transform .2s,border-color .2s}
.seo-areas li:hover{transform:translateY(-2px);border-color:var(--aqua)}
@media(max-width:600px){.seo-prose>ul:not(.seo-areas){grid-template-columns:1fr}}