/* ============================================================================
   INTELLIO Engineering Systems & Services — main.css
   Shared design system: tokens, typography, layout, components, RTL, motion.
   Loaded by every page. Page-specific rules live in assets/css/pages/<page>.css
   ============================================================================ */
:root{
  --navy:#020B34;
  --navy-deep:#01061C;
  --navy-panel:#0A1244;
  --navy-panel-2:#0C1650;
  --line:rgba(211,211,211,.12);
  --line-strong:rgba(216,174,94,.28);
  --gold:#D8AE5E;
  --gold-bright:#EACB86;
  --gold-deep:#B98F44;
  --platinum:#D3D3D3;
  --ink:#EEF0F8;
  --muted:#96A0C0;
  --muted-dim:#6C7699;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--navy);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(216,174,94,.10), transparent 60%),
    radial-gradient(900px 600px at 6% 12%, rgba(50,74,160,.16), transparent 55%),
    radial-gradient(1000px 900px at 50% 120%, rgba(216,174,94,.05), transparent 60%);
}
::selection{background:rgba(216,174,94,.28);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.ar{font-family:'Cairo',sans-serif;direction:rtl}
.mono{font-family:'JetBrains Mono',monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
h1,h2,h3,.display{font-family:'Sora',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.05}
/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin-bottom:26px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.9}
.eyebrow .idx{color:var(--muted-dim)}
/* ---------- tagline (brand signature) ---------- */
.tagline{
  display:inline-flex;align-items:center;gap:15px;
  font-family:'Sora',sans-serif;font-weight:500;
  font-size:clamp(14px,1.5vw,18px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--platinum);
}
.tagline::before{content:"";width:36px;height:1px;background:var(--gold);flex:none}
.hero .tagline{margin-top:22px}
/* ---------- buttons ---------- */
.btn{
  --pad:15px 26px;
  display:inline-flex;align-items:center;gap:11px;padding:var(--pad);
  font-family:'Sora',sans-serif;font-weight:500;font-size:15px;letter-spacing:.01em;
  border-radius:2px;cursor:pointer;border:1px solid transparent;position:relative;
  transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease);
  will-change:transform;
}
.btn svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.btn-gold{background:var(--gold);color:#0A0F26;box-shadow:0 10px 40px -12px rgba(216,174,94,.5)}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:0 18px 50px -14px rgba(216,174,94,.65)}
.btn-gold:hover svg{transform:translateX(4px)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(216,174,94,.08);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
/* ---------- NAV ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
header.nav.scrolled{
  background:rgba(3,10,42,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:80px;gap:16px}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:40px;width:auto}
.brand .bt{display:flex;flex-direction:column;line-height:1}
.brand .bt b{font-family:'Sora';font-weight:600;font-size:18px;letter-spacing:.16em;color:var(--ink)}
.brand .bt span{font-family:'JetBrains Mono';font-size:9px;letter-spacing:.22em;color:var(--gold);margin-top:5px;white-space:nowrap}
header.nav .brand .bt span{display:none}
.nav-links{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}
.nav-links a{font-size:14px;color:var(--muted);font-weight:500;position:relative;transition:color .35s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--gold);transition:width .4s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px;flex:none}
/* language toggle */
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;flex:none}
.lang-toggle button{
  background:none;border:0;cursor:pointer;color:var(--muted);
  padding:8px 15px;font-family:'JetBrains Mono';font-size:12px;letter-spacing:.06em;
  transition:background .3s,color .3s;line-height:1;
}
.lang-toggle button.ar-label{font-family:'Cairo';font-size:13px;letter-spacing:0}
.lang-toggle button.active{background:var(--gold);color:#0A0F26;font-weight:500}
.lang-toggle button:not(.active):hover{color:var(--ink)}
.lang-toggle button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.35s}
.mobile-menu{display:none}
.mobile-lang{margin-bottom:8px}
/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:80px;overflow:hidden}
/* skyline receded to ambient background (V1.2) */
.hero-sky{position:absolute;inset:0;z-index:0;opacity:.32}
/* subtle logo watermark (V1.2) — 3–5% opacity, never competes with content */
.hero-watermark{
  position:absolute;z-index:0;top:50%;right:-4%;transform:translateY(-50%);
  width:min(58vw,620px);height:auto;opacity:.045;pointer-events:none;
  filter:grayscale(1) brightness(1.6);
}
.hero-grid{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(120% 90% at 70% 40%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 40%,#000 20%,transparent 75%);
}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-grid-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-tag{
  display:inline-flex;align-items:center;gap:12px;padding:8px 16px;border:1px solid var(--line-strong);
  border-radius:100px;font-family:'JetBrains Mono';font-size:12px;letter-spacing:.16em;color:var(--gold);
  text-transform:uppercase;margin-bottom:30px;background:rgba(216,174,94,.05)
}
.hero-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(216,174,94,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(216,174,94,.55)}70%{box-shadow:0 0 0 10px rgba(216,174,94,0)}100%{box-shadow:0 0 0 0 rgba(216,174,94,0)}}
.hero h1{font-size:clamp(42px,6.4vw,88px);font-weight:600;letter-spacing:-.03em}
.hero h1 .g{color:transparent;background:linear-gradient(120deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;font-style:italic;font-weight:300}
.hero p.sub{color:var(--muted);font-size:clamp(16px,1.4vw,19px);max-width:560px;margin-top:26px}
.hero-actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:52px;flex-wrap:wrap}
.hstat .n{font-family:'Sora';font-size:34px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.hstat .n .u{color:var(--gold);font-weight:500}
.hstat .l{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);margin-top:6px}
/* telemetry card floating in hero */
.telemetry{
  background:linear-gradient(160deg,rgba(12,20,68,.9),rgba(4,10,40,.82));
  border:1px solid var(--line);border-radius:8px;padding:22px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
}
.telemetry .th{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.telemetry .th b{font-family:'Sora';font-size:14px;font-weight:600;letter-spacing:.02em}
.telemetry .th .live{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.14em;color:#4ADE80;display:flex;align-items:center;gap:7px}
.telemetry .th .live i{width:6px;height:6px;border-radius:50%;background:#4ADE80;animation:pulse 1.8s infinite}
.trow{display:flex;align-items:center;justify-content:space-between;padding:11px 0}
.trow .lab{font-size:13px;color:var(--muted)}
.trow .val{font-family:'JetBrains Mono';font-size:15px;color:var(--gold);font-weight:500}
.tbar{height:4px;border-radius:4px;background:rgba(211,211,211,.1);overflow:hidden;margin-top:6px}
.tbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));border-radius:4px;transition:width 1.2s var(--ease)}
.spark{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:4px}
.spark b{flex:1;background:linear-gradient(180deg,var(--gold),rgba(216,174,94,.25));border-radius:2px 2px 0 0;transition:height .6s var(--ease)}
.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted-dim)}
.scroll-cue .m{width:22px;height:36px;border:1px solid var(--line-strong);border-radius:14px;position:relative}
.scroll-cue .m::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:3px;height:7px;background:var(--gold);border-radius:2px;animation:scdrop 1.8s infinite}
@keyframes scdrop{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}}
.scroll-cue span{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.2em}
/* ---------- SECTIONS ---------- */
section{position:relative}
.section{padding:120px 0}
.section-head{max-width:720px;margin-bottom:64px}
.section-head h2{font-size:clamp(30px,4vw,52px);font-weight:600}
.section-head p{color:var(--muted);font-size:18px;margin-top:22px}
.marquee-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:rgba(1,6,28,.4);overflow:hidden}
.marquee{display:flex;gap:56px;align-items:center;white-space:nowrap;animation:scrollx 34s linear infinite}
.marquee span{font-family:'Sora';font-size:15px;color:var(--muted-dim);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:56px;font-weight:500}
.marquee span::after{content:"";width:5px;height:5px;background:var(--gold);border-radius:50%}
@keyframes scrollx{to{transform:translateX(-50%)}}
/* pillars / why */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar{
  padding:34px 28px 30px;border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(170deg,rgba(10,18,68,.5),rgba(3,9,38,.3));
  position:relative;overflow:hidden;transition:transform .6s var(--ease),border-color .5s,background .5s;
}
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .5s}
.pillar:hover{transform:translateY(-6px);border-color:var(--line-strong);background:linear-gradient(170deg,rgba(14,24,82,.7),rgba(4,11,46,.5))}
.pillar:hover::before{opacity:1}
.pillar .ic{width:46px;height:46px;border:1px solid var(--line-strong);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--gold);background:rgba(216,174,94,.06)}
.pillar .ic svg{width:22px;height:22px}
.pillar h3{font-size:19px;font-weight:600;margin-bottom:10px}
.pillar p{font-size:14px;color:var(--muted);line-height:1.65}
.pillar .k{font-family:'JetBrains Mono';font-size:11px;color:var(--gold-deep);letter-spacing:.1em;margin-top:16px;display:block}
/* framework */
.framework{background:var(--navy-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fw-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin-top:20px}
.fw-track{padding:36px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(170deg,rgba(10,18,68,.45),rgba(3,9,38,.2))}
.fw-track .badge{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.fw-track h3{font-size:24px;margin:16px 0 6px}
.fw-track .accent{color:var(--platinum);font-size:16px;margin-bottom:20px;opacity:.85;display:block}
.fw-item{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.fw-item:first-of-type{border-top:1px solid var(--line-strong)}
.fw-item .n{font-family:'JetBrains Mono';font-size:12px;color:var(--gold-deep);padding-top:2px;flex:none}
.fw-item b{font-size:15px;font-weight:600;color:var(--ink);display:block}
.fw-item span{font-size:13px;color:var(--muted)}
.fw-core{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 30px;position:relative}
.fw-core .node{
  width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--line-strong);background:radial-gradient(circle at 50% 35%,rgba(216,174,94,.16),rgba(4,10,40,.9));
  box-shadow:0 0 60px -10px rgba(216,174,94,.35),inset 0 0 40px rgba(216,174,94,.05);position:relative;
  animation:corePulse 5.4s ease-in-out infinite;
}
@keyframes corePulse{
  0%,100%{box-shadow:0 0 42px -14px rgba(216,174,94,.28),inset 0 0 40px rgba(216,174,94,.05);border-color:rgba(216,174,94,.22)}
  50%{box-shadow:0 0 86px -6px rgba(216,174,94,.55),inset 0 0 58px rgba(216,174,94,.13);border-color:rgba(216,174,94,.42)}
}
.fw-core .node::before,.fw-core .node::after{content:"";position:absolute;border:1px solid var(--line);border-radius:50%;inset:-18px;animation:spin 22s linear infinite}
.fw-core .node::before{animation:spin 22s linear infinite, ringGlow 5.4s ease-in-out infinite}
.fw-core .node::after{inset:-36px;border-color:rgba(216,174,94,.1);animation-duration:34s;animation-direction:reverse}
/* V1.5 — stronger, smoother, still-slow luxurious gold breathing */
@keyframes corePulse{
  0%,100%{box-shadow:0 0 44px -14px rgba(216,174,94,.30),inset 0 0 42px rgba(216,174,94,.07);border-color:rgba(216,174,94,.26)}
  50%{box-shadow:0 0 120px -6px rgba(216,174,94,.62),inset 0 0 72px rgba(216,174,94,.18);border-color:rgba(216,174,94,.54)}
}
@keyframes ringGlow{
  0%,100%{border-color:rgba(216,174,94,.12)}
  50%{border-color:rgba(216,174,94,.44)}
}
.fw-core .node b{font-family:'Sora';font-size:15px;font-weight:600}
.fw-core .node span{font-family:'JetBrains Mono';font-size:9px;letter-spacing:.14em;color:var(--gold);margin-top:6px;text-transform:uppercase}
.fw-core .lbl{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;color:var(--muted-dim);margin-top:22px;text-transform:uppercase;text-align:center}
/* service grid */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc{
  display:flex;gap:22px;padding:32px;border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(170deg,rgba(10,18,68,.4),rgba(3,9,38,.2));
  transition:transform .6s var(--ease),border-color .5s,background .5s;position:relative;overflow:hidden
}
.svc:hover{transform:translateY(-5px);border-color:var(--line-strong);background:linear-gradient(170deg,rgba(14,24,82,.6),rgba(4,11,46,.4))}
.svc .ic{flex:none;width:52px;height:52px;border-radius:10px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(216,174,94,.06)}
.svc .ic svg{width:24px;height:24px}
.svc h3{font-size:19px;margin-bottom:8px;font-weight:600}
.svc p{font-size:14px;color:var(--muted);line-height:1.66}
.svc .num{position:absolute;top:22px;right:26px;font-family:'JetBrains Mono';font-size:12px;color:var(--muted-dim)}
/* platform */
.platform{background:var(--navy-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.plat-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.plat-feat{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.plat-feat .ic{flex:none;width:40px;height:40px;border-radius:8px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(216,174,94,.06)}
.plat-feat .ic svg{width:19px;height:19px}
.plat-feat b{font-size:16px;font-weight:600;display:block;margin-bottom:3px}
.plat-feat span{font-size:13.5px;color:var(--muted)}
.dashboard{
  border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;
  background:linear-gradient(160deg,rgba(12,20,72,.85),rgba(3,9,38,.9));
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9);
}
.db-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.db-top .t{display:flex;align-items:center;gap:10px;font-family:'Sora';font-size:14px;font-weight:600}
.db-top .t .dotrow{display:flex;gap:5px}
.db-top .t .dotrow i{width:8px;height:8px;border-radius:50%;background:rgba(211,211,211,.2)}
.db-top .t .dotrow i:first-child{background:var(--gold)}
.db-top .live{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.14em;color:#4ADE80;display:flex;align-items:center;gap:6px}
.db-top .live i{width:6px;height:6px;border-radius:50%;background:#4ADE80;animation:pulse 1.8s infinite}
.db-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kpi{border:1px solid var(--line);border-radius:8px;padding:14px;background:rgba(1,6,28,.5)}
.kpi .l{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.1em;color:var(--muted-dim);text-transform:uppercase}
.kpi .v{font-family:'Sora';font-size:24px;font-weight:600;margin-top:6px}
.kpi .v small{font-size:13px;color:var(--gold)}
.kpi .d{font-size:10px;color:#4ADE80;margin-top:2px;font-family:'JetBrains Mono'}
.db-chart{border:1px solid var(--line);border-radius:8px;padding:16px 16px 10px;background:rgba(1,6,28,.5)}
.db-chart .ch-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.db-chart .ch-h span{font-family:'JetBrains Mono';font-size:10px;color:var(--muted);letter-spacing:.1em}
.db-chart .ch-h b{font-size:13px;font-weight:600}
.bars{display:flex;align-items:flex-end;gap:8px;height:90px}
.bars .bg{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:0;height:100%}
.bars .bg i{width:100%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--gold),rgba(216,174,94,.2));transition:height 1s var(--ease)}
.bars .bg.alt i{background:linear-gradient(180deg,rgba(211,211,211,.6),rgba(211,211,211,.12))}
.bars-x{display:flex;gap:8px;margin-top:8px}
.bars-x span{flex:1;text-align:center;font-family:'JetBrains Mono';font-size:9px;color:var(--muted-dim)}
/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ind{
  padding:28px 24px;border:1px solid var(--line);border-radius:10px;position:relative;overflow:hidden;
  background:linear-gradient(170deg,rgba(10,18,68,.4),rgba(3,9,38,.15));
  transition:transform .6s var(--ease),border-color .5s;min-height:170px;display:flex;flex-direction:column;justify-content:space-between
}
.ind:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.ind .ic{color:var(--gold);width:30px;height:30px}
.ind .ic svg{width:30px;height:30px}
.ind h3{font-size:16px;font-weight:600;margin-top:auto}
.ind span{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.55}
.ind .no{position:absolute;top:22px;right:24px;font-family:'JetBrains Mono';font-size:11px;color:var(--muted-dim)}
/* projects */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;
  background:var(--navy-panel);transition:transform .6s var(--ease),border-color .5s;
}
.proj:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.proj .viz{height:190px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--navy-deep)}
.proj .viz svg{position:absolute;inset:0;width:100%;height:100%}
.proj .body{padding:24px}
.proj .cat{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.proj h3{font-size:19px;font-weight:600;margin:12px 0 8px}
.proj p{font-size:13.5px;color:var(--muted);line-height:1.6}
.proj .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.proj .tags b{font-family:'JetBrains Mono';font-size:10px;color:var(--muted);border:1px solid var(--line);padding:4px 9px;border-radius:100px;font-weight:400}
.proj-note{font-size:12.5px;color:var(--muted-dim);margin-top:26px;text-align:center;font-style:italic}
/* CTA */
.cta{
  border:1px solid var(--line-strong);border-radius:18px;padding:70px 60px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(14,24,84,.7),rgba(3,9,40,.85));
}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -20%,rgba(216,174,94,.16),transparent 70%)}
.cta .eyebrow{justify-content:center}
.cta h2{font-size:clamp(30px,4.4vw,56px);font-weight:600;position:relative}
.cta .accent{font-family:'Sora',sans-serif;font-size:clamp(18px,2.4vw,26px);color:var(--platinum);margin-top:16px;position:relative;display:block}
.cta p{color:var(--muted);font-size:17px;margin:22px auto 0;max-width:560px;position:relative}
.cta .cta-actions{display:flex;gap:16px;justify-content:center;margin-top:40px;flex-wrap:wrap;position:relative}
/* contact quick */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.cinfo{padding:26px;border:1px solid var(--line);border-radius:10px;background:rgba(1,6,28,.4);transition:border-color .4s}
.cinfo:hover{border-color:var(--line-strong)}
.cinfo .l{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.cinfo .v{font-size:17px;font-weight:600;margin-top:10px;font-family:'Sora'}
.cinfo .v.small{font-size:15px}
/* FOOTER */
footer{background:var(--navy-deep);border-top:1px solid var(--line);padding:80px 0 34px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
.foot-brand img{height:54px;margin-bottom:22px}
.foot-brand p{font-size:14px;color:var(--muted);max-width:300px}
.foot-brand .tagline{margin-top:20px}
.foot-brand .name-ar{font-size:15px;color:var(--platinum);margin-top:16px;opacity:.85}
[dir="rtl"] .foot-brand .name-ar{font-family:'Cairo',sans-serif}
.fcol h3,.fcol h4{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-bottom:20px}
.fcol a,.fcol .fi{display:block;font-size:14px;color:var(--muted);margin-bottom:13px;transition:color .3s}
.fcol a:hover{color:var(--ink)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:30px;border-top:1px solid var(--line);flex-wrap:wrap;gap:16px}
.foot-bottom p{font-size:12.5px;color:var(--muted-dim);font-family:'JetBrains Mono';letter-spacing:.04em}
.socials{display:flex;gap:12px}
.socials a{width:40px;height:40px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.35s}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.socials a svg{width:18px;height:18px}
/* floating whatsapp */
.wa-float{position:fixed;bottom:26px;right:26px;z-index:90;width:56px;height:56px;border-radius:50%;background:#20B858;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px -8px rgba(32,184,88,.6);transition:transform .4s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:28px;height:28px;color:#fff}
/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
/* ============================================================
   V1.1 — RTL / ARABIC OVERRIDES  (design preserved, mirrored)
   ============================================================ */
[dir="rtl"] body{font-family:'Cairo',sans-serif}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .display,
[dir="rtl"] .btn,[dir="rtl"] .brand .bt b,[dir="rtl"] .hstat .n,
[dir="rtl"] .kpi .v,[dir="rtl"] .cinfo .v,[dir="rtl"] .telemetry .th b,
[dir="rtl"] .db-top .t,[dir="rtl"] .marquee span,[dir="rtl"] .tagline,
[dir="rtl"] .fw-core .node b{font-family:'Cairo',sans-serif}
/* Arabic dislikes wide tracking / uppercase — normalise it */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:normal}
[dir="rtl"] .eyebrow,[dir="rtl"] .hero-tag,[dir="rtl"] .fw-track .badge,
[dir="rtl"] .fcol h3,[dir="rtl"] .fcol h4,[dir="rtl"] .proj .cat,[dir="rtl"] .kpi .l,
[dir="rtl"] .cinfo .l,[dir="rtl"] .hstat .l,[dir="rtl"] .tagline,
[dir="rtl"] .marquee span,[dir="rtl"] .brand .bt span,[dir="rtl"] .fw-core .lbl
{text-transform:none;letter-spacing:.02em;font-family:'Cairo',sans-serif}
[dir="rtl"] .tagline{letter-spacing:.06em}
/* directional element mirroring */
[dir="rtl"] .nav-links a::after{left:auto;right:0}
[dir="rtl"] .svc .num{right:auto;left:26px}
[dir="rtl"] .ind .no{right:auto;left:24px}
[dir="rtl"] .btn svg{transform:scaleX(-1)}
[dir="rtl"] .btn-gold:hover svg{transform:scaleX(-1) translateX(4px)}
/* accents are now fully localised — each language shows its own text (V1.5) */
[dir="rtl"] .cta .accent{font-family:'Cairo',sans-serif}
/* ---- V1.2 RTL polish ---- */
/* marquee flows R→L in English, L→R in Arabic */
[dir="rtl"] .marquee{animation-direction:reverse}
/* keep contact data (phone / email / url) rendering left-to-right in any language */
.dir-ltr{direction:ltr;unicode-bidi:embed}
[dir="rtl"] .dir-ltr{text-align:right}
[dir="rtl"] .foot-bottom .dir-ltr,[dir="rtl"] .fcol .dir-ltr{text-align:right}
/* Arabic script needs more line breathing room than the tight Latin display setting */
[dir="rtl"] h1{line-height:1.22;letter-spacing:normal}
[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.32}
[dir="rtl"] .section-head p,[dir="rtl"] .pillar p,[dir="rtl"] .svc p,[dir="rtl"] .fw-item span{line-height:1.85}
[dir="rtl"] .hero p.sub{line-height:1.9}
/* mono index in eyebrow reads more naturally trailing the label in RTL */
[dir="rtl"] .eyebrow .idx{order:2}
/* keep the numeric stat glyphs LTR so "24/7" etc. never reverse */
.hstat .n,.fw-item .n,.svc .num,.ind .no{direction:ltr;unicode-bidi:embed}
/* ---- V1.4 — Arabic footer: centered & balanced contact + socials ---- */
[dir="rtl"] .foot-grid .fcol:last-child{text-align:center}
[dir="rtl"] .foot-grid .fcol:last-child .dir-ltr{text-align:center}
/* V1.7 — Arabic bottom bar mirrors the English layout (RTL): copyright right, socials left, single row */
[dir="rtl"] .foot-bottom{flex-direction:row;text-align:right;gap:16px}
[dir="rtl"] .foot-bottom p{width:auto;text-align:right}
[dir="rtl"] .socials{justify-content:flex-start;width:auto}
/* ---- V1.5 — Arabic contact cards: center label + value inside each card ---- */
[dir="rtl"] .contact-grid .cinfo{text-align:center}
[dir="rtl"] .contact-grid .cinfo .dir-ltr{text-align:center}
/* responsive */
@media(max-width:1360px){
  .nav-links,.nav-cta .lang-toggle,.nav-cta .btn{display:none}
  .burger{display:flex}
  .mobile-menu.open{display:block;position:fixed;inset:80px 0 0;z-index:99;background:rgba(2,8,30,.97);backdrop-filter:blur(20px);padding:36px 28px;overflow-y:auto}
  .mobile-menu a{display:block;font-family:'Sora';font-size:22px;padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  [dir="rtl"] .mobile-menu a{font-family:'Cairo'}
  .mobile-menu .btn{margin-top:28px;width:100%;justify-content:center}
  .mobile-menu .lang-toggle{display:inline-flex}
}
@media(max-width:980px){
  .hero-grid-cols{grid-template-columns:1fr;gap:48px}
  .hero-visual{order:2}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .fw-grid{grid-template-columns:1fr;gap:20px}
  .fw-core{padding:20px 0}
  .svc-grid{grid-template-columns:1fr}
  .plat-grid{grid-template-columns:1fr;gap:40px}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .section{padding:80px 0}
  .wrap{padding:0 20px}
  .pillars,.ind-grid{grid-template-columns:1fr}
  .db-kpis{grid-template-columns:1fr 1fr}
  .cta{padding:48px 24px}
  .foot-grid{grid-template-columns:1fr}
  .hero-stats{gap:24px}
  .brand .bt span{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
/* ==== V7.1 — Arabic hero: prevent glyph clipping & harden layer order ==== */
/* Decorative artwork stays strictly behind all hero text (explicit stack) */
.hero-sky,.hero-grid,.hero-watermark{z-index:0}
.hero-inner{z-index:3}
.hero-copy,.hero-visual{position:relative;z-index:3}
/* Arabic ascenders (hamza) and descenders need a taller line box than the
   Latin display setting; without this the glyphs are cropped by the line box. */
[dir="rtl"] .hero h1{line-height:1.5;padding-block:.10em;overflow:visible}
/* background-clip:text paints to the INLINE box, which crops tall Arabic
   glyphs — promote to inline-block so the gradient box contains the glyph. */
[dir="rtl"] .hero h1 .g{display:inline-block;line-height:1.5;padding-block:.10em;overflow:visible}
[dir="rtl"] .hero .tagline,[dir="rtl"] .hero .hero-tag{overflow:visible}
/* ==== V7.2 — Arabic hero composition (RTL only) ==== */
/* Cairo renders visually larger than Sora at the same point size (larger
   effective x-height, no lowercase), so the Latin-tuned scale overpowers the
   layout in Arabic. Step it down modestly — same type, better fit. */
[dir="rtl"] .hero h1{
  font-size:clamp(34px,4.9vw,66px);
  letter-spacing:normal;
  max-width:14ch;
  padding-inline-end:.12em;
}
/* Balanced breathing room from both edges of the column */
[dir="rtl"] .hero-copy{padding-inline-end:8px;padding-inline-start:8px}
/* The watermark sits at right:-4% — empty space in LTR, but exactly where
   Arabic text BEGINS in RTL. Mirror it to the opposite edge so it complements
   the composition instead of crowding the first letters. */
[dir="rtl"] .hero-watermark{right:auto;left:-6%;transform:translateY(-50%) scaleX(-1);opacity:.035}
/* Sub-copy follows the headline's measure for a balanced text block */
[dir="rtl"] .hero p.sub{max-width:540px}
/* ==== V7.3 — ROOT-CAUSE FIX: Arabic gold headline clipping (RTL only) ====
   Cause 1: font-style:italic — Cairo has no true italic, so the browser applies a
            SYNTHETIC OBLIQUE shear. Shearing pushes glyph ink outside the advance
            box; in RTL the gold span's FIRST letter sits at the right edge, so its
            sheared ink falls outside and is cropped.
   Cause 2: background-clip:text — the gold is a gradient MASKED to the glyph
            outline. With the shear applied the mask and the ink misalign, cutting
            the leading glyph. The mask itself is the clipper, so no amount of
            padding/overflow can rescue it.
   Fix: in Arabic, drop the synthetic italic and the text-mask. The headline stays
        gold and on-brand (solid --gold-bright), but is painted normally, so no
        glyph can ever be clipped. Latin is untouched and keeps the gradient. */
[dir="rtl"] .hero h1 .g{
  font-style:normal;              /* no synthetic oblique -> no sheared ink */
  font-weight:600;                /* match headline weight (Cairo has no 300 italic) */
  background:none;                /* remove the gradient... */
  -webkit-background-clip:border-box;
  background-clip:border-box;     /* ...and the text-mask that was clipping */
  color:var(--gold-bright);       /* solid brand gold — fully legible */
  -webkit-text-fill-color:var(--gold-bright);
  display:inline;                 /* normal inline flow, no inline-block edge cases */
  padding-inline:.10em;           /* breathing room for the first/last glyph */
  overflow:visible;
}
/* Guarantee no ancestor can crop the headline's ink */
[dir="rtl"] .hero h1{
  max-width:none;
  overflow:visible;
  padding-inline:.06em;
  text-wrap:balance;
}
[dir="rtl"] .hero-copy{overflow:visible}
/* Keep decorative art clear of the Arabic text start (RTL begins at the right) */
[dir="rtl"] .hero-watermark{right:auto;left:-8%;opacity:.03}
/* ==== V8.1 — Contact nav item + active-page state ==== */
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{width:100%}
.mobile-menu a.active{color:var(--gold)}
/* ==== V10.0 — rendering performance (no visual change) ====
   Promote only elements that animate transform/opacity, so the compositor
   handles them off the main thread instead of repainting. */
.reveal{will-change:opacity,transform}
.reveal.in{will-change:auto}
/* release the layer once the animation is done */
.marquee{will-change:transform}
.hero-watermark,.hero-sky{will-change:auto;transform:translateZ(0)}
/* own layer, never repainted */
.svc,.ind,.pillar,.chan,.mod,.sector,.impact,.ben,.chal{will-change:auto}
/* Decorative art can't affect layout of anything around it */
.hero-grid,.hero-watermark{contain:strict;pointer-events:none}
/* ==== V11.0 — accessibility (no visual change) ==== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--gold);color:var(--navy-deep);
  padding:12px 20px;border-radius:0 0 8px 0;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
}
.skip-link:focus{left:0}                       /* only ever visible on keyboard focus */
[dir="rtl"] .skip-link:focus{left:auto;right:0;border-radius:0 0 0 8px}
/* Visible keyboard focus ring (was relying on the browser default) */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;border-radius:4px;
}
main:focus{outline:none}