/* خبراء الصيانة — ستايل الموقع (Cairo، عربي RTL) */
:root{
  --navy:#0B3B5C; --navy-900:#07293F; --navy-700:#10507B;
  --amber:#F5A51B; --amber-700:#D98A09;
  --ink:#1A2430; --muted:#5A6B7B; --soft:#F4F8FB; --line:#DFE8F0;
  --wa:#0F7D42; --wa-700:#0B6534;
  --on-navy:#FFFFFF; --on-amber:#1A2430;
  --wrap:1180px; --r:14px; --r-lg:22px;
  --shadow:0 10px 30px rgba(11,59,92,.10);
  --shadow-sm:0 4px 14px rgba(11,59,92,.07);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:"Cairo",system-ui,"Segoe UI",sans-serif;
  font-size:18px; line-height:1.8; letter-spacing:0;
}
img,svg{max-width:100%; height:auto; display:block}
[hidden]{display:none !important}
a{color:var(--navy); text-decoration:none}
a:hover{color:var(--navy-700)}
h1,h2,h3,h4{margin:0 0 .6em; line-height:1.3; letter-spacing:0; font-weight:800}
h1{font-size:clamp(28px,4.4vw,48px)}
h2{font-size:clamp(24px,3.1vw,36px)}
h3{font-size:clamp(19px,2vw,22px); font-weight:700}
p{margin:0 0 1em}
ul{margin:0 0 1em; padding-inline-start:1.2em}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.skip:focus{position:static; width:auto; height:auto; clip-path:none; display:inline-block; padding:10px; background:var(--amber); color:var(--on-amber); font-weight:700}

/* ===== أزرار ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--amber); color:var(--on-amber); font-weight:800; font-size:17px;
  padding:13px 24px; border-radius:999px; border:0; cursor:pointer;
  box-shadow:0 6px 18px rgba(245,165,27,.3); transition:background .18s,transform .18s;
  white-space:nowrap; font-family:inherit;
}
.btn:hover{background:var(--amber-700); color:var(--on-amber); transform:translateY(-1px)}
.btn--lg{font-size:19px; padding:16px 30px}
.btn--ghost{background:transparent; color:var(--on-navy); border:2px solid rgba(255,255,255,.55); box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.12); color:var(--on-navy)}
.btn--wa{background:var(--wa); color:#fff; box-shadow:0 6px 18px rgba(31,168,85,.26)}
.btn--wa:hover{background:var(--wa-700); color:#fff}
.btn--dark{background:var(--navy); color:var(--on-navy); box-shadow:var(--shadow-sm)}
.btn--dark:hover{background:var(--navy-700); color:var(--on-navy)}
.btn .ic{width:20px; height:20px; flex:0 0 auto; fill:currentColor}
.icon{width:24px; height:24px}

/* ===== الهيدر ===== */
.header{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--line)}
.header-in{display:flex; align-items:center; gap:18px; min-height:76px}
.logo{display:flex; align-items:center; gap:12px; font-weight:800; color:var(--navy); font-size:21px; white-space:nowrap}
.logo img{width:44px; height:44px}
.logo small{display:block; font-size:14px; font-weight:600; color:var(--muted); line-height:1.35}
.nav{margin-inline-start:auto; display:flex; align-items:center; gap:4px}
.nav a{
  padding:9px 13px; border-radius:999px; font-weight:700; font-size:16.5px;
  color:var(--ink); white-space:nowrap;
}
.nav a:hover{background:var(--soft); color:var(--navy)}
.nav a.is-active{color:var(--navy); background:var(--soft)}
.btn-call{
  display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:var(--on-navy);
  font-weight:800; font-size:16.5px; padding:10px 18px; border-radius:999px; white-space:nowrap;
}
.btn-call:hover{background:var(--navy-700); color:var(--on-navy)}
.btn-call .ic{width:18px; height:18px; fill:currentColor}
.nav-toggle{display:none}

/* ===== البانر الرئيسي ===== */
.hero{background:var(--navy); color:var(--on-navy); padding:68px 0 76px; position:relative; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset-block:0; inset-inline-start:-10%; width:55%;
  background:radial-gradient(60% 70% at 50% 50%, rgba(16,80,123,.85), transparent 70%); pointer-events:none;
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.18fr .82fr; gap:44px; align-items:center}
.hero h1{color:var(--on-navy); margin-bottom:18px; line-height:1.34}
.hero-text p{color:rgba(255,255,255,.9); font-size:19px; max-width:54ch; margin-bottom:26px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px}
.pills{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.pill{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); color:var(--on-navy);
  padding:7px 14px; border-radius:999px; font-size:15.5px; font-weight:600;
}
.pill b{font-weight:800}
.hero-art img{width:100%; max-width:560px; margin-inline-start:auto; border-radius:var(--r-lg)}

/* ===== شريط التلفون ===== */
.phone-strip{background:var(--amber); color:var(--on-amber)}
.phone-strip .wrap{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 22px; padding-block:16px; text-align:center}
.phone-strip b{font-size:19px; font-weight:800}
.phone-strip a{
  color:var(--on-amber); font-weight:800; font-size:24px; display:inline-flex; align-items:center; gap:10px;
  direction:ltr; unicode-bidi:isolate;
}
.phone-strip a:hover{color:#000}
.phone-strip .ic{width:22px; height:22px; fill:currentColor}

/* ===== الأقسام ===== */
.section{padding:72px 0}
.section--soft{background:var(--soft)}
.section--navy{background:var(--navy); color:var(--on-navy)}
.section--navy h2,.section--navy h3{color:var(--on-navy)}
.section--navy p{color:rgba(255,255,255,.88)}
.section--navy .eyebrow{color:var(--amber)}
.section-head{max-width:720px; margin-bottom:38px}
.section-head.center{margin-inline:auto; text-align:center}
.eyebrow{
  display:block; font-weight:800; font-size:15px; color:var(--navy); margin-bottom:10px;
}
.section-head p{color:var(--muted); font-size:18px; margin:0}
.section--navy .section-head p{color:rgba(255,255,255,.85)}

/* ===== كروت ===== */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.cards--5{display:flex; flex-wrap:wrap; justify-content:center; gap:22px}
.cards--5>*{flex:1 1 280px; max-width:calc((100% - 44px)/3)}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column;
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.card img{width:56px; height:56px; margin-bottom:14px}
.card h3{margin-bottom:8px; color:var(--navy)}
.card p{color:var(--muted); font-size:17px; margin-bottom:16px}
.card .more{margin-top:auto; font-weight:800; color:var(--navy); display:inline-flex; align-items:center; gap:8px}
.card .more::after{content:"‹"; font-size:22px; line-height:1}
.section--navy .card{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); box-shadow:none}
.section--navy .card h3{color:var(--on-navy)}
.section--navy .card p{color:rgba(255,255,255,.85)}
.feat{display:flex; gap:16px; align-items:flex-start}
.feat .num{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--amber); color:var(--on-amber);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px;
}
.feat h3{margin-bottom:6px}

/* ===== قائمة بعلامات صح ===== */
.checklist{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 26px; list-style:none; margin:0; padding:0}
.checklist li{display:flex; gap:12px; align-items:flex-start; font-size:17.5px}
.checklist li::before{
  content:""; flex:0 0 auto; width:26px; height:26px; margin-top:5px; border-radius:50%;
  background:var(--amber) url("assets/icon-check.svg") center/15px no-repeat;
}
.section--navy .checklist li{color:rgba(255,255,255,.92)}

/* ===== خطوات مرقّمة ===== */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:s}
.steps li{counter-increment:s; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px; box-shadow:var(--shadow-sm)}
.steps li::before{
  content:counter(s); display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--on-navy);
  font-weight:800; font-size:20px; margin-bottom:14px;
}
.steps h3{margin-bottom:6px; color:var(--navy)}
.steps p{color:var(--muted); font-size:17px; margin:0}

/* ===== عمودان: نص + رسمة ===== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.split-art img{width:100%; border-radius:var(--r-lg)}
.split-text h2{margin-bottom:14px}
.split-text p{color:var(--muted)}
.section--navy .split-text p{color:rgba(255,255,255,.88)}

/* ===== أسئلة شائعة ===== */
.faq{max-width:860px; margin-inline:auto}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; box-shadow:var(--shadow-sm)}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 22px; font-weight:700; font-size:18px; color:var(--navy);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--amber-700); font-size:26px; font-weight:800; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0; padding:0 22px 20px; color:var(--muted); font-size:17.5px}

/* ===== نص طويل / قانوني ===== */
.wrap.prose,.wrap.legal{max-width:var(--wrap)}
.prose>*{max-width:800px}
.legal>*{max-width:800px}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.3em; color:var(--navy)}
.prose p,.prose li{color:#36434f; font-size:18px}
.prose ul{padding-inline-start:1.3em}
.prose li{margin-bottom:.4em}

.legal h2{font-size:24px; margin-top:1.8em}
.legal p,.legal li{color:#36434f; font-size:17.5px}
.legal .updated{color:var(--muted); font-size:16px}

/* ===== مناطق الخدمة ===== */
.areas{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.areas-note{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg); padding:24px 26px; font-weight:600;
}

/* ===== نموذج طلب فني ===== */
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow)}
.form{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1 / -1}
.field label{font-weight:700; font-size:16.5px; color:var(--ink)}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:17px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; line-height:1.6;
  -webkit-appearance:none; appearance:none; min-height:53px;
}
.field select{
  background-image:url("assets/icon-chevron.svg"); background-repeat:no-repeat;
  background-position:left 14px center; background-size:16px; padding-inline-end:14px; padding-inline-start:40px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy-700); outline:none; box-shadow:0 0 0 3px rgba(16,80,123,.14)}
.field textarea{min-height:110px; resize:vertical}
.form-note{grid-column:1 / -1; color:var(--muted); font-size:15.5px; margin:0}

/* ===== كروت التواصل ===== */
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.contact-cards--4{grid-template-columns:repeat(4,1fr)}
.contact-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm)}
.contact-card h3{margin-bottom:6px; color:var(--navy); font-size:19px}
.contact-card p{margin:0; color:var(--muted); font-size:17px}
.contact-card .big{font-size:23px; font-weight:800; color:var(--navy); direction:ltr; unicode-bidi:isolate; display:inline-block}

/* ===== شريط دعوة للاتصال ===== */
.callband{background:var(--navy-900); color:var(--on-navy); padding:52px 0}
.callband .wrap{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.callband h2{margin:0 0 6px; color:var(--on-navy)}
.callband p{margin:0; color:rgba(255,255,255,.85)}
.callband .acts{display:flex; gap:14px; flex-wrap:wrap}

/* ===== بانر الصفحات الداخلية ===== */
.page-hero{background:var(--navy); color:var(--on-navy); padding:44px 0 52px}
.page-hero h1{color:var(--on-navy); margin-bottom:12px; line-height:1.32}
.page-hero p{color:rgba(255,255,255,.9); max-width:62ch; margin:0}
.page-hero .hero-actions{margin:24px 0 0}
.crumbs{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0; font-size:15.5px}
.crumbs li{color:rgba(255,255,255,.75)}
.crumbs li+li::before{content:"‹"; margin-inline-end:8px; color:var(--amber)}
.crumbs a{color:rgba(255,255,255,.9)}
.crumbs a:hover{color:#fff; text-decoration:underline}

/* ===== الفوتر ===== */
.footer{background:var(--navy-900); color:rgba(255,255,255,.82); padding:56px 0 0; font-size:17px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:34px}
.footer h3{color:#fff; font-size:18px; margin-bottom:14px}
.footer .logo{color:#fff}
.footer .logo small{color:rgba(255,255,255,.7)}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:9px}
.footer a{color:rgba(255,255,255,.82)}
.footer a:hover{color:#fff; text-decoration:underline}
.footer-col p{color:rgba(255,255,255,.75)}
.footer-bottom{margin-top:40px; border-top:1px solid rgba(255,255,255,.14); padding:18px 0; text-align:center; font-size:15.5px; color:rgba(255,255,255,.7)}
.footer-bottom p{margin:0}
.footer-credit{margin-top:7px}
.footer-credit a{color:#fff; font-weight:700}
.footer-credit a:hover{color:var(--amber); text-decoration:underline}
.ltr{direction:ltr; unicode-bidi:isolate; display:inline-block}

/* ===== شريط الموبايل الثابت ===== */
.mobile-bar{display:none}

/* ===== حركة خفيفة (بعد تحميل السكربت فقط، وتحت الشاشة الأولى) ===== */
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.js .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  *{scroll-behavior:auto !important}
}

/* ===== شاشات متوسطة ===== */
@media (max-width:1060px){
  .cards,.cards--4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .nav a{padding:9px 10px; font-size:16px}
}
@media (max-width:900px){
  body{font-size:17px}
  .hero{padding:48px 0 56px}
  .hero-grid,.split,.areas{grid-template-columns:1fr; gap:32px}
  .hero-art img{margin-inline:auto; max-width:460px}
  .contact-cards,.contact-cards--4{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section{padding:56px 0}

  /* قائمة الموبايل */
  .nav-toggle{
    display:inline-flex; align-items:center; gap:8px; margin-inline-start:auto; background:var(--soft);
    border:1px solid var(--line); border-radius:12px; padding:10px 14px; font:inherit; font-weight:700;
    color:var(--navy); cursor:pointer;
  }
  .nav{
    display:none; position:absolute; inset-inline:0; top:100%; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 16px; box-shadow:var(--shadow);
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 8px; border-radius:10px; font-size:17.5px; border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .header-in{position:relative}
  .header .btn-call{display:none}
  body{padding-bottom:72px}
  .mobile-bar{
    display:flex; position:fixed; inset-inline:0; bottom:0; z-index:50; gap:0;
    box-shadow:0 -6px 20px rgba(7,41,63,.18);
  }
  .mobile-bar a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
    padding:15px 8px; font-weight:800; font-size:17px;
  }
  .mobile-bar .call{background:var(--navy); color:#fff}
  .mobile-bar .wa{background:var(--wa); color:#fff}
  .mobile-bar .ic{width:20px; height:20px; fill:currentColor}
  .cards--5>*{max-width:calc((100% - 22px)/2)}
}

/* ===== موبايل ===== */
@media (max-width:620px){
  body{font-size:16.5px}
  .wrap{padding-inline:16px}
  .hero{padding:36px 0 44px}
  .hero-text p{font-size:17.5px}
  .hero-actions .btn{flex:1 1 100%}
  .cards,.cards--2,.cards--4,.contact-cards--4,.steps,.contact-cards,.form,.footer-grid{grid-template-columns:1fr}
  .cards--5>*{max-width:100%; flex:1 1 100%}
  .checklist{grid-template-columns:1fr}
  .section{padding:44px 0}
  .section-head{margin-bottom:28px}
  .form-card{padding:22px 18px}
  .phone-strip a{font-size:22px}
  .callband{padding:40px 0}
  .callband .acts .btn{flex:1 1 100%}
  .logo{font-size:19px}
  .logo img{width:40px; height:40px}
}
@media (max-width:380px){
  .wrap{padding-inline:13px}
}