/* ==========================================================================
   NGS TECH — Design System
   Tokens follow the brief exactly. Signature: a "circuit trace" motif —
   animated node/line dividers + blueprint grid — bridging Infrastructure ⇄ Software.
   ========================================================================== */

:root{
  --primary:#0057D9;
  --primary-600:#0048B3;
  --secondary:#00B4FF;
  --accent:#00D084;
  --dark:#0F172A;
  --dark-800:#16213E;
  --dark-700:#1E2A45;
  --bg:#F8FAFC;
  --bg-alt:#EEF2F7;
  --ink:#0F172A;
  --ink-soft:#475569;
  --ink-faint:#94A3B8;
  --border:#E2E8F0;
  --white:#FFFFFF;

  --font-head:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-sm:10px;
  --radius:18px;
  --radius-lg:28px;
  --shadow-sm:0 2px 10px rgba(15,23,42,0.05);
  --shadow:0 10px 40px rgba(15,23,42,0.08);
  --shadow-lg:0 25px 70px rgba(15,23,42,0.14);
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--dark);
  margin:0;
  line-height:1.12;
  letter-spacing:-0.02em;
}

p{color:var(--ink-soft); line-height:1.7; margin:0;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
button{font-family:var(--font-body); cursor:pointer;}

::selection{background:var(--primary); color:#fff;}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--primary);
  font-weight:600;
  padding:7px 14px 7px 10px;
  border:1px solid rgba(0,87,217,0.18);
  background:rgba(0,87,217,0.05);
  border-radius:100px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px rgba(0,208,132,0.18);
  animation:pulseDot 2s ease-in-out infinite;
}
.eyebrow.on-dark{ color:#8FD3FF; border-color:rgba(143,211,255,0.25); background:rgba(143,211,255,0.08); }

@keyframes pulseDot{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:.5; transform:scale(1.3);}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-weight:600;
  font-size:15px;
  padding:14px 26px;
  border-radius:100px;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn svg{width:17px; height:17px; transition:transform .3s var(--ease);}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  box-shadow:0 8px 24px rgba(0,87,217,0.28);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,87,217,0.38); }
.btn-primary:hover svg{ transform:translateX(3px); }
.btn-ghost{
  background:#fff;
  color:var(--dark);
  border-color:var(--border);
}
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.btn-on-dark{ background:rgba(255,255,255,0.06); color:#fff; border-color:rgba(255,255,255,0.18); backdrop-filter:blur(8px); }
.btn-on-dark:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.35); transform:translateY(-3px); }
.btn-sm{ padding:10px 18px; font-size:13.5px; }
.btn-block{ width:100%; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0;
  transition:padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:12px 0;
  background:rgba(248,250,252,0.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--border);
  box-shadow:0 4px 20px rgba(15,23,42,0.04);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:19px; color:var(--dark); }
.brand-mark{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:800; letter-spacing:-0.03em;
  box-shadow:0 6px 16px rgba(0,87,217,0.35);
}
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--ink-soft);
  padding:10px 16px; border-radius:100px; transition:color .25s, background .25s;
  position:relative;
}
.nav-links a:hover, .nav-links a.active{ color:var(--dark); background:rgba(15,23,42,0.045); }
.nav-links a.active{ color:var(--primary); font-weight:600; }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle svg{ width:24px; height:24px; color:var(--dark); }

@media (max-width:960px){
  .nav-links{
    position:fixed; top:0; right:-100%; height:100vh; width:min(340px,84vw);
    background:#fff; flex-direction:column; align-items:stretch; gap:4px;
    padding:100px 24px 24px; box-shadow:-20px 0 60px rgba(15,23,42,0.15);
    transition:right .45s var(--ease); z-index:999;
  }
  .nav-links.open{ right:0; }
  .nav-links a{ padding:14px 16px; font-size:16px; }
  .nav-toggle{ display:block; z-index:1001; }
  .nav-cta .btn-ghost{ display:none; }
}

.nav-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,0.5); z-index:998;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease); backdrop-filter:blur(3px);
}
.nav-overlay.open{ opacity:1; pointer-events:auto; }

/* ---------- Section rhythm ---------- */
.section{ padding:120px 0; position:relative; }
.section-sm{ padding:80px 0; }
@media (max-width:768px){
  .section{ padding:80px 0; }
  .section-sm{ padding:56px 0; }
}
.section-head{ max-width:680px; margin-bottom:64px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(30px,4vw,44px); margin-top:16px; }
.section-head p{ font-size:17px; margin-top:16px; }

.section-dark{ background:var(--dark); color:#fff; }
.section-dark h2, .section-dark h3, .section-dark h4{ color:#fff; }
.section-dark p{ color:rgba(255,255,255,0.62); }

/* ---------- Circuit trace divider (signature element) ---------- */
.circuit-divider{ width:100%; height:56px; display:block; opacity:0.9; }
.circuit-divider path{
  fill:none; stroke:var(--border); stroke-width:1.5;
}
.circuit-divider .trace{
  stroke:url(#traceGrad);
  stroke-width:2;
  stroke-dasharray:8 10;
  animation:traceFlow 3.5s linear infinite;
}
.circuit-divider circle{ fill:var(--secondary); }
@keyframes traceFlow{ to{ stroke-dashoffset:-180; } }

.section-dark .circuit-divider path{ stroke:rgba(255,255,255,0.12); }

/* ---------- Blueprint grid backdrop ---------- */
.grid-backdrop{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,87,217,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,87,217,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 100%);
  pointer-events:none;
}
.section-dark .grid-backdrop{
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
}

.glow-orb{
  position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0;
  opacity:0.5;
}

/* ---------- Reveal animations ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="left"].in{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(32px); }
[data-reveal="right"].in{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(0.94); }
[data-reveal="scale"].in{ transform:scale(1); }

.stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }

.glass{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* ---------- Division cards (home) ---------- */
.division-card{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  padding:48px 40px; min-height:460px; display:flex; flex-direction:column;
  color:#fff; isolation:isolate;
}
.division-card::before{
  content:''; position:absolute; inset:0; z-index:-2;
}
.division-card.it::before{ background:linear-gradient(155deg,#0A1A3E 0%, var(--dark) 55%, #071026 100%); }
.division-card.sw::before{ background:linear-gradient(155deg,#003B73 0%, var(--primary-600) 55%, #001B3A 100%); }
.division-card::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  transition:opacity .5s var(--ease);
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%), rgba(0,180,255,0.28), transparent 60%);
}
.division-card:hover::after{ opacity:1; }
.division-card:hover{ transform:translateY(-8px); box-shadow:0 30px 80px rgba(0,20,60,0.35); }
.division-icon{
  width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); margin-bottom:28px;
}
.division-icon svg{ width:28px; height:28px; color:var(--secondary); }
.division-card h3{ font-size:28px; color:#fff; margin-bottom:6px; }
.division-tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--secondary); margin-bottom:14px; display:block;}
.division-card p{ color:rgba(255,255,255,0.65); margin-bottom:26px; }
.division-list{ list-style:none; padding:0; margin:0 0 32px; display:grid; gap:11px; }
.division-list li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:rgba(255,255,255,0.85); }
.division-list li svg{ width:15px; height:15px; color:var(--accent); flex-shrink:0; }
.division-card .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- Feature / service cards ---------- */
.icon-tile{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(0,87,217,0.1), rgba(0,180,255,0.1));
  margin-bottom:20px;
}
.icon-tile svg{ width:24px; height:24px; color:var(--primary); }

.service-card{ padding:32px 28px; }
.service-card h4{ font-size:18px; margin-bottom:10px; }
.service-card p{ font-size:14.5px; }

/* ---------- Stats ---------- */
.stat-num{
  font-family:var(--font-head); font-weight:700; font-size:clamp(32px,4vw,48px);
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ font-size:13.5px; color:var(--ink-faint); margin-top:6px; font-weight:500; }
.section-dark .stat-label{ color:rgba(255,255,255,0.5); }

/* ---------- Badge / pill ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:100px; background:var(--bg-alt); color:var(--ink-soft);
}
.pill-accent{ background:rgba(0,208,132,0.1); color:#0A8F5B; }

/* ---------- Footer ---------- */
.footer{ background:var(--dark); color:rgba(255,255,255,0.6); padding:80px 0 28px; }
.footer h4{ color:#fff; font-size:15px; margin-bottom:18px; }
.footer a{ color:rgba(255,255,255,0.55); font-size:14px; transition:color .25s; }
.footer a:hover{ color:var(--secondary); }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); margin-top:56px; padding-top:26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:13px; }
.social-row{ display:flex; gap:10px; }
.social-row a{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); transition:background .25s, transform .3s var(--ease);
}
.social-row a:hover{ background:var(--primary); transform:translateY(-3px); }
.social-row svg{ width:17px; height:17px; }

/* ---------- Breadcrumb / page hero (interior pages) ---------- */
.page-hero{
  position:relative; padding:200px 0 90px; background:var(--dark); color:#fff; overflow:hidden;
}
.page-hero h1{ color:#fff; font-size:clamp(36px,5vw,58px); }
.page-hero p{ color:rgba(255,255,255,0.65); font-size:18px; max-width:640px; margin-top:18px; }

/* ---------- Utility ---------- */
.text-primary{ color:var(--primary); }
.text-accent{ color:var(--accent); }
.mono{ font-family:var(--font-mono); }
.flex-center{ display:flex; align-items:center; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }

.marquee-track{ display:flex; gap:64px; animation:marquee 28s linear infinite; width:max-content; }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.float{ animation:floatY 6s ease-in-out infinite; }
.float-slow{ animation:floatY 9s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} }

/* ---------- Timeline (process / about) ---------- */
.timeline{ position:relative; }
.timeline::before{
  content:''; position:absolute; left:23px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(var(--border), var(--border));
}
.timeline-item{ position:relative; padding-left:64px; padding-bottom:44px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
  background:#fff; border:2px solid var(--primary); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; color:var(--primary); font-size:14px; z-index:1;
}

/* ---------- Forms ---------- */
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--dark); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--border);
  font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:#fff;
  transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(0,87,217,0.12);
}
.field textarea{ resize:vertical; min-height:120px; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}

/* Tabs (software page) */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab-btn{
  padding:11px 20px; border-radius:100px; border:1px solid var(--border); background:#fff;
  font-size:14px; font-weight:600; color:var(--ink-soft); transition:all .3s var(--ease);
}
.tab-btn.active, .tab-btn:hover{ background:var(--dark); color:#fff; border-color:var(--dark); }

/* Back to top */
.to-top{
  position:fixed; bottom:28px; right:28px; width:48px; height:48px; border-radius:50%;
  background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:center;
  border:none; opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease); z-index:500; box-shadow:var(--shadow);
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top svg{ width:20px; height:20px; }

/* ==========================================================================
   RESPONSIVE HARDENING — mobile & tablet
   Overrides inline grid declarations so every layout collapses cleanly.
   ========================================================================== */

/* Tablet: wide multi-column grids tighten up */
@media (max-width:1080px){
  [style*="repeat(5,1fr)"], [style*="repeat(6,1fr)"]{ grid-template-columns:repeat(3,1fr) !important; }
}

/* Small tablet / large phone: all two-column splits stack, card grids go 2-up */
@media (max-width:960px){
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; gap:20px !important; }
  [style*="repeat(3,1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(5,1fr)"],
  [style*="repeat(6,1fr)"],
  [style*="1.4fr 1fr 1fr 1fr"]{ grid-template-columns:repeat(2,1fr) !important; }
  [style*="order:1"], [style*="order:2"]{ order:0 !important; }
}

/* Phone */
@media (max-width:600px){
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  /* keep compact icon cards 2-up so they don't become an endless column */
  [style*="repeat(5,1fr)"], [style*="repeat(6,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
}

/* --- Hero & page hero spacing --- */
.hero-home{ padding:140px 0 80px !important; }
@media (max-width:768px){
  .hero-home{ padding:118px 0 60px !important; }
  .page-hero{ padding:130px 0 60px; }
  .page-hero p{ font-size:16.5px; }
}

/* --- Padding overrides for generously padded blocks --- */
@media (max-width:768px){
  [style*="padding:64px 48px"], [style*="padding:60px 48px"]{ padding:40px 22px !important; }
  [style*="padding:44px"]{ padding:26px !important; }
  [style*="padding:48px"]{ padding:28px !important; }
  [style*="padding:40px"]{ padding:24px !important; }
  [style*="padding:38px"]{ padding:24px !important; }
  [style*="padding:32px"]{ padding:22px !important; }
  .division-card{ padding:32px 24px; min-height:auto; }
  .container{ padding:0 18px; }
  .section-head{ margin-bottom:40px; }
  .timeline-item{ padding-left:56px; }
}

/* --- Type scale down on phone --- */
@media (max-width:600px){
  h2[style*="font-size:34px"]{ font-size:26px !important; }
  h3[style*="font-size:30px"]{ font-size:24px !important; }
  h3[style*="font-size:28px"]{ font-size:23px !important; }
  h3[style*="font-size:24px"]{ font-size:21px !important; }
  h4{ font-size:16.5px; }
  .section-head h2{ font-size:26px; }
  .btn{ font-size:14.5px; padding:13px 22px; }
  .stat-num{ font-size:26px !important; }
}

/* --- Tabs scroll horizontally instead of wrapping into a wall --- */
@media (max-width:768px){
  .tabs{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start !important;
    padding-bottom:6px; scrollbar-width:none; -ms-overflow-style:none;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab-btn{ flex:0 0 auto; }
}

/* --- Buttons full-width on very small screens --- */
@media (max-width:480px){
  .page-hero .btn, .hero-home .btn{ width:100%; }
  [style*="display:flex; gap:14px"]{ flex-direction:column; align-items:stretch !important; }
}

/* --- Mobile drawer CTA (nav) --- */
.nav-drawer-cta{ display:none !important; }
@media (max-width:960px){
  .nav-drawer-cta{
    display:block !important; margin-top:16px; text-align:center;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff !important; font-weight:600 !important; border-radius:100px;
  }
  .nav-drawer-cta:hover{ background:linear-gradient(135deg,var(--primary),var(--secondary)) !important; }
}

/* --- Prevent any accidental horizontal scroll on phones --- */
@media (max-width:768px){
  .marquee-track{ gap:36px; }
  .circuit-divider{ height:40px; }
}

/* --- Language switcher --- */
.lang-switch{ display:flex; gap:2px; padding:3px; border-radius:100px; background:rgba(15,23,42,0.05); border:1px solid var(--border); }
.lang-switch button{
  border:none; background:transparent; font-size:12px; font-weight:700; letter-spacing:.03em;
  color:var(--ink-faint); padding:6px 11px; border-radius:100px; transition:all .25s var(--ease);
  font-family:var(--font-body);
}
.lang-switch button.active{ background:#fff; color:var(--primary); box-shadow:var(--shadow-sm); }
@media (max-width:600px){ .lang-switch button{ padding:6px 9px; font-size:11.5px; } }

/* ==========================================================================
   LOGO — crossfades between white (over dark hero) and color (scrolled nav)
   ========================================================================== */
.brand{ position:relative; display:flex; align-items:center; gap:0; }
.brand-logo{
  height:34px; width:auto; display:block;
  transition:opacity .35s var(--ease);
}
.brand-logo-color{ opacity:0; }                     /* in flow: reserves the space */
.brand-logo-white{
  position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:1;
}
.nav.scrolled .brand-logo-color{ opacity:1; }
.nav.scrolled .brand-logo-white{ opacity:0; }

.footer-logo{ height:38px; width:auto; margin-bottom:18px; display:block; }

@media (max-width:600px){
  .brand-logo{ height:28px; }
  .footer-logo{ height:32px; }
}

/* Emblem watermark on interior page heroes */
.hero-emblem{
  position:absolute; right:-40px; bottom:-60px; width:min(420px,46vw);
  opacity:0.05; pointer-events:none; z-index:1;
}
@media (max-width:768px){ .hero-emblem{ width:260px; right:-70px; bottom:-40px; opacity:0.04; } }

/* ==========================================================================
   RTL / ARABIC
   ========================================================================== */
html.is-ar body,
html.is-ar p,
html.is-ar .btn,
html.is-ar .pill,
html.is-ar .nav-links a,
html.is-ar .field label,
html.is-ar .field input,
html.is-ar .field select,
html.is-ar .field textarea,
html.is-ar .stat-label,
html.is-ar .footer a{ font-family:'Cairo', var(--font-body); }
html.is-ar h1, html.is-ar h2, html.is-ar h3, html.is-ar h4{
  font-family:'Cairo', var(--font-head); letter-spacing:0; line-height:1.35;
}
html.is-ar .eyebrow{ font-family:'Cairo', var(--font-body); letter-spacing:0; }
/* keep latin product names & data readouts in the mono/latin face */
html.is-ar .mono{ font-family:var(--font-mono); }

[dir="rtl"] .timeline::before{ left:auto; right:23px; }
[dir="rtl"] .timeline-item{ padding-left:0; padding-right:64px; }
[dir="rtl"] .timeline-dot{ left:auto; right:0; }
[dir="rtl"] .brand-logo-white{ left:auto; right:0; }
[dir="rtl"] .hero-emblem{ right:auto; left:-40px; transform:scaleX(-1); }
[dir="rtl"] .to-top{ right:auto; left:28px; }
[dir="rtl"] .division-card .btn{ align-self:flex-end; }
[dir="rtl"] .btn svg{ transform:scaleX(-1); }
[dir="rtl"] .btn:hover svg{ transform:scaleX(-1) translateX(3px); }
[dir="rtl"] .section-head:not(.center){ text-align:right; }
[dir="rtl"] .footer-bottom{ direction:rtl; }
[dir="rtl"] .marquee-track{ direction:ltr; }

@media (max-width:960px){
  [dir="rtl"] .nav-links{ right:auto; left:-100%; box-shadow:20px 0 60px rgba(15,23,42,0.15); }
  [dir="rtl"] .nav-links.open{ left:0; right:auto; }
}
@media (max-width:768px){
  [dir="rtl"] .timeline-item{ padding-right:56px; }
  [dir="rtl"] .to-top{ left:18px; }
}

/* ==========================================================================
   MAP CARD
   ========================================================================== */
.map-card{
  display:block; overflow:hidden; padding:0; height:360px; position:relative;
  background:linear-gradient(140deg,#0F172A,#16294D); border:1px solid var(--border);
  border-radius:var(--radius); text-decoration:none;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.map-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.map-card .map-inner{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:6px; padding:24px;
}
.map-pin{
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(0,180,255,0.14); border:1px solid rgba(0,180,255,0.35); margin-bottom:8px;
}
.map-pin svg{ width:26px; height:26px; color:var(--secondary); }
.map-card h4{ color:#fff; font-size:19px; }
.map-card p{ color:rgba(255,255,255,0.6); font-size:14px; }
@media (max-width:600px){ .map-card{ height:280px; } }

/* Language switcher — light text while the nav is transparent over the dark hero */
.nav:not(.scrolled) .lang-switch{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); }
.nav:not(.scrolled) .lang-switch button{ color:rgba(255,255,255,0.62); }
.nav:not(.scrolled) .lang-switch button.active{ background:rgba(255,255,255,0.18); color:#fff; box-shadow:none; }
.nav-cta{ gap:12px; }