:root{
    --nile:#0E2A5E; --nile-deep:#050F26; --sand:#E9EEF6;
    --gold:#2E7CF6; --gold-bright:#6FB1FF; --ink:#12151C; --paper:#F7F9FC;
    --line:rgba(14,42,94,0.15); --ice:#EAF2FE; --ice-line:rgba(46,124,246,0.18);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans Arabic',sans-serif; line-height:1.75; overflow-x:hidden;}
  h1,h2,h3{font-family:'Tajawal',sans-serif; font-weight:900; color:var(--nile-deep); line-height:1.3;}
  a{color:inherit; text-decoration:none;}
  .container{max-width:1060px; margin:0 auto; padding:0 24px;}

  header{background:var(--paper); border-bottom:1px solid var(--line);}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1060px; margin:0 auto;}
  .brand{display:flex; align-items:center; gap:12px; font-family:'Tajawal'; font-weight:900; color:var(--nile-deep);}
  .logo-badge{width:44px; height:44px; border-radius:9px; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .logo-badge img{width:88%; height:88%; object-fit:contain;}
  .brand-text{display:flex; flex-direction:column; line-height:1.25;}
  .brand-text small{font-weight:500; font-size:0.75rem; color:var(--gold); direction:ltr; text-align:right;}
  .back{font-size:1rem; font-weight:600; color:var(--gold);}

  .btn{display:inline-block; background:var(--nile); color:var(--sand) !important; padding:13px 26px; border-radius:8px; font-weight:600; font-size:1rem; border:1px solid var(--nile); transition:all .25s;}
  .btn:hover{background:var(--gold); border-color:var(--gold);}
  .btn-outline{background:transparent; color:var(--paper) !important; border:1px solid rgba(247,249,252,0.5);}
  .btn-outline:hover{background:var(--paper); color:var(--nile-deep) !important;}
  .btn-light{background:var(--paper); color:var(--nile-deep) !important; border-color:var(--paper);}
  .btn-light:hover{background:var(--gold-bright); border-color:var(--gold-bright);}

  .hero{background:linear-gradient(135deg,var(--nile) 0%,var(--nile-deep) 100%); color:var(--sand); padding:64px 0;}
  .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;}
  .badge{display:inline-block; background:rgba(111,177,255,0.15); color:var(--gold-bright); border:1px solid rgba(111,177,255,0.4); padding:4px 14px; border-radius:999px; font-size:0.95rem; font-weight:700; margin-bottom:16px;}
  .hero h1{color:var(--paper); font-size:clamp(1.8rem,4.2vw,2.8rem); margin-bottom:14px;}
  .hero p.lead{color:rgba(247,249,252,0.82); font-size:1.05rem; max-width:520px; margin-bottom:20px;}
  .tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
  .tags span{background:rgba(255,255,255,0.1); border-radius:10px; padding:5px 12px; font-size:1rem;}
  .actions{display:flex; flex-wrap:wrap; gap:12px;}

  .phone{justify-self:center; width:220px; background:var(--paper); border-radius:30px; border:7px solid #0b0d12; padding:12px; color:var(--ink); box-shadow:0 18px 40px rgba(0,0,0,.4);}
  .phone .bar{background:var(--nile); color:#fff; border-radius:14px; padding:9px 11px; font-family:'Tajawal'; font-weight:900; font-size:0.78rem;}
  .phone .stat{display:flex; gap:6px; margin:9px 0;}
  .phone .stat div{flex:1; background:#fff; border:1px solid var(--line); border-radius:12px; padding:7px; font-size:0.62rem; color:#5b6575;}
  .phone .stat b{display:block; font-family:'Tajawal'; font-size:0.95rem; color:var(--nile);}
  .phone .go{background:var(--gold); color:#fff; font-family:'Tajawal'; font-weight:900; font-size:0.7rem; text-align:center; border-radius:12px; padding:9px;}
  .phone .row{display:flex; justify-content:space-between; background:#fff; border:1px solid var(--line); border-radius:10px; padding:7px 9px; font-size:0.66rem; margin-top:7px;}
  .phone .row em{font-style:normal; color:var(--gold); font-weight:700;}

  section.block{padding:56px 0 0;}
  .sec-title{font-size:1.7rem; margin-bottom:6px;}
  .sec-sub{color:#5b6575; margin-bottom:24px;}
  .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;}
  .f{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; transition:transform .25s, box-shadow .25s;}
  .f:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(14,42,94,0.1);}
  .f .ic{width:46px; height:46px; border-radius:12px; background:var(--ice); border:1px solid var(--ice-line); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:12px;}
  .f h3{font-size:1.05rem; margin-bottom:4px;}
  .f p{font-size:1rem; color:#4d5560;}

  .roles{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px;}
  .role{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px;}
  .role h3{margin-bottom:10px;}
  .role ul{list-style:none;}
  .role li{padding:5px 0; font-size:1rem;}
  .role li::before{content:"✓ "; color:var(--gold); font-weight:900;}
  .role li.no::before{content:"✕ "; color:#B4382C;}

  table{width:100%; border-collapse:collapse; background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--line);}
  td{padding:13px 18px; border-bottom:1px solid var(--line); font-size:1rem; vertical-align:top;}
  tr:last-child td{border-bottom:none;}
  td:first-child{font-weight:700; color:var(--nile-deep); width:32%; background:var(--ice);}

  .cta{margin-top:56px; background:var(--nile-deep); color:var(--sand); border-radius:20px; padding:44px 24px; text-align:center;}
  .cta h2{color:var(--paper); margin-bottom:8px;}
  .cta p{color:rgba(247,249,252,0.78); margin-bottom:22px;}
  footer{background:var(--nile-deep); color:rgba(247,249,252,0.6); text-align:center; padding:26px 0; margin-top:56px; font-size:1rem; border-top:1px solid rgba(185,194,206,0.25);}
  footer a{text-decoration:underline;}

  @media (max-width:760px){
    .hero{padding:44px 0;}
    .hero-grid{grid-template-columns:1fr;}
    .phone{order:-1;}
    td:first-child{width:38%;}
    .actions{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
    .actions .btn{text-align:center; white-space:nowrap; padding-inline:12px;}
    .actions .btn:first-child{grid-column:1 / -1;}
    .hero .resp-note, .hero .brochure-link{display:block; text-align:center;}
    .lead, .sec-sub{text-align:start;}
  }

  /* related systems */
  .related{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
  a.rel{display:block; color:inherit;}
  a.rel .more{display:inline-block; margin-top:8px; font-weight:700; font-size:1rem; color:var(--gold);}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}


img.shot{display:block; width:100%; max-width:900px; height:auto; margin:0 auto; border-radius:16px; box-shadow:0 16px 40px rgba(14,42,94,.16);}

/* شريط التواصل السريع في الجوال */
.mbar{display:none;}
@media (max-width:860px){
  .mbar{display:grid; grid-template-columns:1fr 1fr; gap:10px; position:fixed; inset-inline:0; bottom:0; z-index:90; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(5,15,38,.96); backdrop-filter:blur(8px); border-top:1px solid rgba(255,255,255,.12);}
  .mbar a{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 8px; border-radius:10px; font-weight:700; font-size:1rem; text-decoration:none; color:#fff;}
  .mbar .mb-call{background:#0E2A5E; border:1px solid rgba(111,177,255,.5);}
  .mbar .mb-wa{background:#25D366; color:#052e16;}
  body{padding-bottom:72px;}
  #whatsappFloat{display:none !important;}
  #backToTop{bottom:84px !important;}
}

.video-wrap{max-width:340px; margin:0 auto; border-radius:22px; overflow:hidden; background:#000; box-shadow:0 18px 44px rgba(14,42,94,.25);}
.video-wrap video{display:block; width:100%; height:auto; aspect-ratio:9/16;}
.video-wrap.wide{max-width:860px; border-radius:16px;}
.video-wrap.wide video{aspect-ratio:16/9;}

  .faq details{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px;}
  .faq summary{cursor:pointer; font-weight:700; color:var(--nile); font-size:1.02rem;}
  .faq details p{margin:10px 0 0; color:#4a5568;}

  .brochure-link{display:inline-block; margin-top:12px; font-weight:700; color:var(--gold-bright); font-size:0.95rem;}