:root{--primary:#0c1862;--accent:#db2f36;--muted:#eef2f9;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;direction:rtl;font-family:'Almarai',system-ui,-apple-system,Segoe UI,Arial;scroll-behavior:smooth;color:#0c1020;background:#fffline-height:2.2}
a{color:var(--primary);text-decoration:none}
.container{max-width:1240px;margin:auto;padding:0 18px}
/* Topbar */
.topbar{background:var(--primary);color:#e7ecf7;font-size:14px}
.topbar .container{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0}
.topbar a{color:#e7ecf7}
/* Nav */
nav{position:sticky;top:0;background:#fff;border-bottom:1px solid #eceff6;z-index:30}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:20px}
.brand{display:flex;gap:10px;align-items:center}
/* 3D buttons */
.menu{list-style:none;display:flex;gap:14px;margin:0;padding:0}
.menu a{display:inline-block;padding:10px 16px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#f1f4fb);border:1px solid #e2e7f2;box-shadow:0 6px 12px rgba(12,24,98,.08), inset 0 -2px 0 #e0e4ef;font-weight:800;transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease; color:#0c1862}
.menu a:hover{transform:translateY(-2px); background:#db2f36; color:#fff; box-shadow:0 10px 18px rgba(12,24,98,.16), inset 0 -2px 0 #b12126}
.menu a:active{transform:translateY(0);box-shadow:inset 0 3px 8px rgba(0,0,0,.08)}
#menu-toggle{display:none}
@media(max-width:760px){
  #menu-toggle{display:block}
  .menu{display:none;flex-direction:column;gap:10px;padding:10px 0}
  .menu.open{display:flex}
}
/* Hero slider */
.hero{position:relative;height:72vh;min-height:420px;overflow:hidden;background:#000}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 900ms ease}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.slide .caption{position:absolute;inset:auto 0 14% 0;color:#fff}
.caption .inner{max-width:1240px;margin:auto;padding:0 18px}
.badge{display:inline-flex;gap:8px;align-items:center;background:#ffffff25;border:1px solid #ffffff3a;padding:6px 12px;border-radius:999px;margin-bottom:10px}
.h1{font-size:42px;line-height:1.25;margin:8px 0 14px;font-weight:800}
.slider-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:3}
.slider-dots button{width:12px;height:12px;border-radius:999px;border:none;background:#ffffff70;cursor:pointer}
.slider-dots button.active{background:var(--accent)}
.arrows{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 6px;z-index:4}
.arrow{width:44px;height:44px;border-radius:50%;background:#ffffffa0;border:1px solid #fff;display:grid;place-items:center;cursor:pointer}
.arrow:hover{background:#fff}
/* Sections */
.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg,#fafcff,#f2f6fc)}
.h2{font-size:28px;font-weight:800;margin:0 0 16px;border-right:7px solid var(--accent);padding-right:12px}
.grid{display:grid;gap:18px}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.cards-3{grid-template-columns:repeat(2,1fr)}.cards-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards-3,.cards-4{grid-template-columns:1fr}.h1{font-size:30px}}
.card{background:#fff;border:1px solid #e6eaf3;border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(12,24,98,.06)}
.card .img{height:180px;overflow:hidden;background:#f7f9fe;display:grid;place-items:center}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .body{padding:16px}
.icon3d{width:96px;height:96px}
/* Footer */
footer{background:#0a0f25;color:#cdd3e1;padding:28px 0;margin-top:50px}
footer a{color:#cdd3e1}
/* Utility */
.lead{font-size:18px;color:#2c3142;max-width:900px}
.kpis{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.kpi{background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:14px 16px;min-width:180px;box-shadow:0 8px 22px rgba(0,0,0,.03)}
.kpi strong{display:block;font-size:24px;color:var(--primary)}

/* Force LTR for phone numbers */
ul [dir='ltr']{unicode-bidi:embed;direction:ltr}

/* Hero caption text color white */
.hero .lead{color:#fff!important}

/* Natural logo size */
.brand img{height:auto;width:auto;max-height:90px}

/* Section hover visual feedback */
.section{transition: background 220ms ease, box-shadow 220ms ease, border-color 220ms ease}
.section:hover{background:linear-gradient(180deg,#ffffff,#f6f8ff); box-shadow: inset 0 0 0 2px rgba(12,24,98,.06)}

.card{transition: transform 160ms ease, box-shadow 220ms ease, border-color 220ms ease}
.card:hover{transform: translateY(-3px); box-shadow:0 14px 30px rgba(12,24,98,.12); border-color:#dde3f3}

/* Global paragraph spacing */
p{margin:0 0 14px}


/* ===================== Animations & Motion (v3.6) ===================== */
@keyframes fadeUp { from {opacity:0; transform: translateY(26px)} to {opacity:1; transform: translateY(0)} }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }

.reveal { opacity:0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease }
.reveal.is-visible { opacity:1; transform: translateY(0) }

/* Card tilt & elevation */
.card:hover { transform: translateY(-4px) rotateX(0.5deg) rotateY(-0.5deg); box-shadow:0 16px 34px rgba(12,24,98,.18) }

/* KPI number emphasis */
.kpi strong { letter-spacing:.3px; transition: transform .25s ease }
.kpi:hover strong { transform: scale(1.06) }

/* Subtle ripple highlight for interactive items */
.menu a, .btn { position:relative; overflow:hidden }
.menu a::after, .btn::after {
  content:""; position:absolute; inset:auto auto 0 0; width:0; height:2px; background:#fff; opacity:.9; transition: width .25s ease;
}
.menu a:hover::after { width:100% }

/* Smooth shadow on sections as they become active */
.section.active { box-shadow: inset 0 0 0 2px rgba(12,24,98,.07) }

/* Parallax: keep caption layered */
.hero .caption { will-change: transform, opacity }


/* ===================== Mobile Enhancements (v3.7) ===================== */
@media (max-width: 880px){
  .hero{height:64vh; min-height:380px}
  .h1{font-size:32px}
  .h2{font-size:22px}
  .navbar{padding:12px 0}
  .menu a{padding:12px 16px}
  .kpi{min-width:unset}
}
@media (max-width: 640px){
  .container{padding:0 14px}
  .hero{height:56vh; min-height:340px}
  .caption .inner{padding:0 14px}
  .h1{font-size:26px}
  .lead{font-size:16px}
  .cards-3, .cards-4{grid-template-columns: 1fr}
  #menu-toggle{display:block}
  #main-menu{display:none;flex-direction:column;gap:10px}
  #main-menu.open{display:flex}
  .menu a{display:block; text-align:center}
}
/* Improve touch targets */
a, button{ -webkit-tap-highlight-color: rgba(0,0,0,0.05) }