/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --cyan:#00A9E0;
  --cyan-bright:#1FB9EF;
  --azure:#0A5FB6;
  --navy:#062C84;
  --navy-deep:#04205E;
  --ink:#07193F;
  --ink-60:#3c548a;
  --mist:#E9F5FC;
  --paper:#F5FBFE;
  --line:#d7e6f5;
  --white:#ffffff;

  --grad: linear-gradient(135deg,#00A9E0 0%, #0A5FB6 48%, #062C84 100%);
  --grad-soft: linear-gradient(135deg,#1FB9EF 0%, #0A5FB6 60%, #062C84 100%);
  --grad-text: linear-gradient(100deg,#1FB9EF, #4f9fe0 55%, #bfe2f7);

  --r-sm:14px; --r:22px; --r-lg:30px; --r-pill:999px;

  --shadow-sm:0 4px 18px rgba(20,44,82,.08);
  --shadow:0 24px 60px -20px rgba(20,44,82,.28);
  --shadow-lg:0 40px 90px -28px rgba(20,44,82,.40);
  --glow:0 18px 50px -12px rgba(0,169,224,.55);

  --font-body:'Tajawal',sans-serif;
  --font-display:'Tajawal',sans-serif;
  --maxw:1200px;
}
html[lang="en"]{ --font-body:'Inter',sans-serif; --font-display:'Sora',sans-serif; }

/* ============================================================
   RESET / BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;font-weight:800;letter-spacing:-.01em}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{letter-spacing:0}
section{position:relative}
::selection{background:var(--cyan);color:#fff}
:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--azure);
}
html[lang="ar"] .eyebrow{letter-spacing:.06em;font-size:.86rem}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  padding:.95rem 1.7rem;border-radius:var(--r-pill);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, color .35s;
  will-change:transform;white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.btn--primary:hover{transform:translateY(-4px);box-shadow:0 28px 60px -12px rgba(0,169,224,.7)}
.btn--ghost{background:rgba(255,255,255,.06);color:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:var(--shadow-sm)}
.btn--on-dark{color:#fff;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.07)}
.btn--on-dark:hover{transform:translateY(-4px);border-color:#fff;background:rgba(255,255,255,.16)}

/* ============================================================
   AMBIENT BACKGROUND
   ============================================================ */
.bg-fx{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bg-fx .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.bg-fx .g1{width:520px;height:520px;background:radial-gradient(circle,#bfe6f7,transparent 70%);top:-160px;inset-inline-start:-120px}
.bg-fx .g2{width:560px;height:560px;background:radial-gradient(circle,#d8e9f9,transparent 70%);bottom:-220px;inset-inline-end:-140px}
.bg-fx .g3{width:420px;height:420px;background:radial-gradient(circle,#e7f4fb,transparent 70%);top:42%;inset-inline-start:48%}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:fixed;top:0;inset-inline:0;z-index:100;padding:18px 0;transition:padding .3s}
.site-header.shrink{padding:10px 0}
.nav{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:1.2rem;
  background:rgba(255,255,255,.72);
 /* backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);*/
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow);
  border-radius:var(--r-pill);
  padding:.6rem .7rem .6rem 1.3rem;
}
html[dir="rtl"] .nav{padding:.6rem 1.3rem .6rem .7rem}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand__mark{
  width:44px;height:44px;border-radius:13px;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-family:var(--font-display);
  font-weight:800;font-size:1.05rem;box-shadow:var(--glow);position:relative;overflow:hidden;
}
.brand__mark::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%)}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--ink);line-height:1.05}
.brand__sub{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--azure);font-weight:700}
html[lang="ar"] .brand__sub{letter-spacing:.02em;font-size:.72rem}

.nav__links{display:flex;align-items:center;gap:.35rem;margin-inline-start:auto}
.nav__links a{
  font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--ink-60);
  padding:.55rem .85rem;border-radius:var(--r-pill);transition:color .25s,background .25s;position:relative;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a.active{color:var(--navy);background:rgba(0,169,224,.1)}
.nav__tools{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.lang-toggle{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:.5rem .9rem;color:var(--navy);transition:.25s;display:flex;align-items:center;gap:.4rem;
}
.lang-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.nav__cta{padding:.62rem 1.25rem;font-size:.88rem}
.nav__burger{display:none;width:46px;height:46px;border-radius:14px;border:1.5px solid var(--line);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav__burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* mobile drawer */
.m-drawer{position:fixed;inset:0;z-index:99;background:rgba(14,39,72,.45);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.3s}
.m-drawer.open{opacity:1;visibility:visible}
.m-drawer__panel{
  position:absolute;top:0;inset-inline-end:0;height:100%;width:min(86vw,360px);
  background:#fff;box-shadow:var(--shadow-lg);padding:90px 28px 28px;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:.4rem;
}
html[dir="rtl"] .m-drawer__panel{transform:translateX(-100%)}
.m-drawer.open .m-drawer__panel{transform:translateX(0)}
.m-drawer a{font-family:var(--font-display);font-weight:700;font-size:1.15rem;padding:.9rem .4rem;border-bottom:1px solid var(--line);color:var(--ink)}
.m-drawer .btn{margin-top:1.2rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:170px 0 90px;overflow:hidden;position:relative}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero__pill{
  display:inline-flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.5rem 1rem .5rem .55rem;font-weight:700;font-size:.82rem;
  color:var(--navy);box-shadow:var(--shadow-sm);margin-bottom:1.6rem;
}
html[dir="rtl"] .hero__pill{padding:.5rem .55rem .5rem 1rem}
.hero__pill .dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(0,169,224,.18);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(0,169,224,0)}}
.hero h1{font-size:clamp(2.3rem,4.7vw,3.7rem);color:var(--ink)}
.hero h1 .pre{display:block;color:var(--ink-60);font-weight:700;font-size:.82em}
.rotator{position:relative;display:inline-block;min-height:1.25em;overflow:hidden;vertical-align:bottom}
.rotator__word{
  display:inline-block;
  background:linear-gradient(100deg,#00A9E0,#0A5FB6 60%,#062C84);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  will-change:transform,opacity;
}
.rotator__word.in{animation:wordIn .6s cubic-bezier(.2,.8,.2,1)}
.rotator__word.out{animation:wordOut .45s ease forwards}
@keyframes wordIn{from{opacity:0;transform:translateY(70%)}to{opacity:1;transform:translateY(0)}}
@keyframes wordOut{to{opacity:0;transform:translateY(-70%)}}
.hero__lead{margin-top:1.4rem;font-size:1.08rem;color:var(--ink-60);max-width:48ch}
.hero__cta{margin-top:2.1rem;display:flex;gap:.9rem;flex-wrap:wrap}
.hero__trust{margin-top:2.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
.hero__trust span{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
html[lang="ar"] .hero__trust span{letter-spacing:0;font-size:.84rem}
.chip{
  font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.04em;
  background:#fff;border:1px solid var(--line);color:var(--navy);padding:.4rem .8rem;border-radius:var(--r-pill);
}

/* portrait */
.portrait{position:relative;justify-self:center;width:min(420px,100%)}
.portrait__frame{
  position:relative;aspect-ratio:5/6;border-radius:42px;overflow:hidden;
  background:var(--grad);box-shadow:var(--shadow-lg);isolation:isolate;
}
.portrait__frame::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.18), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Ccircle cx='30' cy='30' r='2.4' fill='%23ffffff' fill-opacity='0.10'/%3E%3C/svg%3E");
  z-index:0;
}
.portrait__art{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.portrait__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.portrait__badge{
  position:absolute;inset-block-end:18px;inset-inline-start:18px;z-index:3;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:16px;padding:.7rem 1rem;font-family:var(--font-display);
}
.portrait__badge b{display:block;font-size:1rem;font-weight:800}
.portrait__badge small{font-size:.72rem;opacity:.85}
.float-chip{
  position:absolute;z-index:4;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:.6rem .85rem;box-shadow:var(--shadow);font-family:var(--font-display);
  font-weight:700;font-size:.82rem;color:var(--navy);display:flex;align-items:center;gap:.5rem;
  animation:floaty 6s ease-in-out infinite;
}
.float-chip i{width:8px;height:8px;border-radius:50%;background:var(--grad)}
.float-chip.fc1{top:8%;inset-inline-start:-34px;animation-delay:0s}
.float-chip.fc2{top:46%;inset-inline-end:-44px;animation-delay:1.2s}
.float-chip.fc3{bottom:7%;inset-inline-end:6%;animation-delay:2.1s}
@keyframes floaty{50%{transform:translateY(-14px)}}

/* ============================================================
   STATS
   ============================================================ */
.stats{margin-top:18px}
.stats__band{
  background:var(--grad);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:42px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;overflow:hidden;
}
.stats__band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% -10%,rgba(255,255,255,.18),transparent 50%)}
.stat{text-align:center;color:#fff;position:relative;z-index:1;padding:6px 8px}
.stat + .stat{border-inline-start:1px solid rgba(255,255,255,.2)}
.stat__num{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,2.9rem);line-height:1;display:flex;justify-content:center;align-items:baseline;gap:2px}
.stat__suf{font-size:.55em;opacity:.9}
.stat__label{margin-top:.5rem;font-size:.86rem;opacity:.92;font-weight:500}

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.section{padding:96px 0}
.section--soft{background:linear-gradient(180deg,var(--paper),var(--mist) 60%,var(--paper))}
.section__head{max-width:760px;margin:0 auto 56px;text-align:center}
.section__head h2{font-size:clamp(1.9rem,3.4vw,2.75rem);color:var(--ink);margin:.7rem 0}
.section__head p{color:var(--ink-60);font-size:1.05rem}

/* ============================================================
   SERVICES (capsule cards)
   ============================================================ */
.services__row{display:flex;gap:22px;align-items:stretch;flex-wrap:wrap;justify-content:center}
.svc{
  position:relative;flex:1 1 200px;max-width:218px;min-height:380px;
  border-radius:110px;padding:34px 22px 30px;cursor:pointer;overflow:hidden;
  background:var(--grad);color:#fff;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:var(--shadow);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  will-change:transform;
}
/* (old capsule ::before/::after decorations removed — superseded by the v8 services block below) */
.svc__icon{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);transition:transform .4s;
}
.svc:hover .svc__icon{transform:scale(1.08) translateY(-2px)}
.svc__icon svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:1.7}
.svc__title{font-family:var(--font-display);font-weight:800;font-size:1.06rem;margin-top:auto;position:relative;z-index:1;line-height:1.3}
.svc__more{
  margin-top:14px;position:relative;z-index:1;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:.4rem;opacity:.92;
  border-top:1px solid rgba(255,255,255,.25);padding-top:12px;
}
html[lang="ar"] .svc__more{letter-spacing:0;text-transform:none;font-size:.85rem}
.svc__more svg{width:14px;height:14px;stroke:#fff;fill:none;transition:transform .3s}
html[dir="rtl"] .svc__more svg{transform:scaleX(-1)}
.svc:hover .svc__more svg{transform:translateX(4px)}
html[dir="rtl"] .svc:hover .svc__more svg{transform:scaleX(-1) translateX(4px)}

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:start}
.about__card{
  position:sticky;top:110px;background:var(--grad);border-radius:var(--r-lg);
  padding:34px;color:#fff;box-shadow:var(--shadow-lg);overflow:hidden;
}
.about__card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 110% 0,rgba(255,255,255,.18),transparent 45%)}
.about__photo{position:relative;z-index:1;aspect-ratio:1/1;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.about__photo svg{width:100%;height:100%}
.about__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about__name{position:relative;z-index:1;margin-top:1.3rem;font-family:var(--font-display);font-weight:800;font-size:1.5rem;text-align:center}
.about__role{position:relative;z-index:1;text-align:center;opacity:.9;font-size:.94rem;margin-top:.2rem}
.about__connect{position:relative;z-index:1;margin-top:1.4rem;display:flex;justify-content:center}
.about__socials{position:relative;z-index:1;margin-top:1.2rem;display:flex;gap:.7rem;justify-content:center}
.soc{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);transition:.3s;
}
.soc svg{width:19px;height:19px;fill:#fff}
.soc:hover{background:#fff;transform:translateY(-3px)}
.soc:hover svg{fill:var(--navy)}

.about__body h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:1.2rem;color:var(--ink)}
.about__body p{color:var(--ink-60);margin-bottom:1.1rem;font-size:1.03rem}
.about__body p strong{color:var(--ink)}
.frameworks{margin:1.6rem 0;display:flex;flex-wrap:wrap;gap:.6rem}
.fw{
  font-family:var(--font-display);font-weight:700;font-size:.84rem;color:#fff;
  background:var(--grad);padding:.5rem 1rem;border-radius:12px;box-shadow:var(--shadow-sm);
  transition:transform .3s;
}
.fw:nth-child(even){background:linear-gradient(135deg,#062C84,#0A5FB6)}
.fw:hover{transform:translateY(-3px)}
.solvpro{
  margin-top:1.8rem;display:flex;gap:1rem;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--cyan);
  border-radius:var(--r);padding:1.3rem 1.4rem;box-shadow:var(--shadow-sm);
}
.solvpro__mark{
  width:52px;height:52px;border-radius:14px;background:var(--grad);flex-shrink:0;
  display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:800;font-size:.78rem;
}
.solvpro h4{font-family:var(--font-display);font-size:1.05rem;color:var(--ink);margin-bottom:.3rem}
.solvpro p{font-size:.95rem;color:var(--ink-60);margin:0}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{padding:54px 0 50px;background:var(--grad);position:relative;overflow:hidden}
.partners::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -20%,rgba(255,255,255,.16),transparent 55%)}
.partners .section__head h2{color:#fff}
.partners .section__head p{color:rgba(255,255,255,.85)}
.partners__head{text-align:center;margin-bottom:30px;position:relative;z-index:1}
.partners__head .eyebrow{color:#bfe6f7}
.partners__head .eyebrow::before{background:rgba(255,255,255,.6)}
.partners__head h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.75rem);margin-top:.6rem}
.marquee{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,28px)}
.marquee__track{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="ltr"] .marquee__track{animation-direction:reverse}
.plogo{
  width:170px;height:170px;border-radius:50%;flex:0 0 auto;background:#fff;margin:16px 18px;
  display:grid;place-items:center;text-align:center;padding:26px;box-shadow:0 20px 45px -16px rgba(4,32,94,.30);
  transition:transform .4s;
}
.plogo:hover{transform:translateY(-8px) scale(1.04)}
.plogo span{font-family:var(--font-display);font-weight:800;font-size:.92rem;color:var(--navy);line-height:1.25}
.plogo small{display:block;font-weight:600;font-size:.7rem;color:var(--azure);margin-top:.25rem}
.partners__ctrl{display:flex;gap:.8rem;justify-content:center;margin-top:34px;position:relative;z-index:1}
.pnav{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center;transition:.3s}
.pnav svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.pnav:hover{background:#fff}
.pnav:hover svg{stroke:var(--navy)}

/* ============================================================
   FAQ
   ============================================================ */
.faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.acc{
  background:#fff;border-radius:var(--r);position:relative;
  box-shadow:var(--shadow-sm);transition:box-shadow .35s,transform .35s;overflow:hidden;
}
.acc::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,var(--cyan),var(--navy));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;transition:opacity .35s;
}
.acc.open,.acc:hover{box-shadow:var(--shadow)}
.acc.open::before{opacity:1}
.acc__q{
  width:100%;display:flex;align-items:center;gap:1rem;text-align:start;
  padding:1.25rem 1.4rem;font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;color:var(--ink);line-height:1.4;
}
.acc__plus{
  width:34px;height:34px;flex-shrink:0;border-radius:10px;position:relative;background:var(--grad);
  box-shadow:var(--shadow-sm);transition:transform .4s;
}
.acc__plus::before,.acc__plus::after{content:"";position:absolute;inset-inline:9px;top:50%;height:2.4px;background:#fff;border-radius:2px;transform:translateY(-50%);transition:.4s}
.acc__plus::after{transform:translateY(-50%) rotate(90deg)}
.acc.open .acc__plus{transform:rotate(135deg)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .45s ease}
.acc__a p{padding:0 1.4rem 1.35rem;color:var(--ink-60);font-size:.97rem;margin:0}
.acc__q .acc__txt{flex:1}

/* ============================================================
   CONTACT
   ============================================================ */
.contact__band{
  background:var(--grad);border-radius:var(--r-lg);padding:56px 44px;color:#fff;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;text-align:center;
}
.contact__band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 120%,rgba(255,255,255,.16),transparent 45%)}
.contact__band > *{position:relative;z-index:1}
.contact__band h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:.8rem}
.contact__band p{opacity:.92;max-width:54ch;margin:0 auto 2rem;font-size:1.05rem}
.contact__rows{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2rem}
.contact__phone{
  display:inline-flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);border-radius:var(--r-pill);padding:.7rem 1.3rem;
  font-family:var(--font-display);font-weight:700;transition:.3s;
}
.contact__phone:hover{background:#fff;color:var(--navy)}
.contact__phone svg{width:18px;height:18px}
.contact__phone .num{direction:ltr;unicode-bidi:embed}
.contact__cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:linear-gradient(180deg,#0A368C 0%,#04205C 100%);color:#fff;padding:72px 0 0}
.footer__brand .brand__mark{width:58px;height:58px;font-size:1.35rem;border-radius:17px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer__brand .brand__name{color:#fff}
.footer__brand p{color:rgba(255,255,255,.6);font-size:.94rem;margin-top:1.1rem;max-width:34ch}
.footer__socials{display:flex;gap:.6rem;margin-top:1.4rem}
.footer__socials .soc{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.footer h4{font-family:var(--font-display);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:#6cc4ef;margin-bottom:1.3rem}
html[lang="ar"] .footer h4{letter-spacing:0;font-size:1rem}
.footer ul li{margin-bottom:.7rem}
.footer ul a{color:rgba(255,255,255,.72);font-size:.95rem;transition:.25s}
.footer ul a:hover{color:#fff;padding-inline-start:5px}
.footer__contact a{display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.72);margin-bottom:.8rem;font-size:.95rem}
.footer__contact a:hover{color:#fff}
.footer__contact svg{width:17px;height:17px;flex-shrink:0;fill:#6cc4ef}
.footer__contact .num{direction:ltr;unicode-bidi:embed}
.footer__bar{margin-top:54px;border-top:1px solid rgba(255,255,255,.1);padding:22px 0;text-align:center;color:rgba(255,255,255,.5);font-size:.86rem}

/* ============================================================
   MODAL
   ============================================================ */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:.3s}
.modal.open{opacity:1;visibility:visible}
.modal__overlay{position:absolute;inset:0;background:rgba(14,39,72,.55);backdrop-filter:blur(8px)}
.modal__box{
  position:relative;width:min(900px,100%);max-height:88vh;overflow:auto;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  transform:translateY(24px) scale(.98);transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.modal.open .modal__box{transform:translateY(0) scale(1)}
.modal__hero{background:var(--grad);color:#fff;padding:34px 38px;display:flex;align-items:center;gap:1.2rem;position:relative;overflow:hidden}
.modal__hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0,rgba(255,255,255,.18),transparent 45%)}
.modal__icon{width:66px;height:66px;border-radius:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;flex-shrink:0;position:relative;z-index:1}
.modal__icon svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.7}
.modal__htxt{position:relative;z-index:1}
.modal__htxt small{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-weight:700}
html[lang="ar"] .modal__htxt small{letter-spacing:0}
.modal__htxt h3{font-family:var(--font-display);font-size:1.5rem;margin-top:.2rem}
.modal__close{position:absolute;top:18px;inset-inline-end:18px;z-index:2;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;transition:.25s}
.modal__close:hover{background:#fff}
.modal__close svg{width:18px;height:18px;stroke:#fff;stroke-width:2.4}
.modal__close:hover svg{stroke:var(--navy)}
.modal__body{padding:30px 38px 38px}
.modal__intro{color:var(--ink-60);margin-bottom:1.6rem;font-size:1.02rem}
.modal__items{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mitem{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem 1.1rem;transition:.3s}
.mitem:hover{border-color:var(--cyan);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.mitem b{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:.98rem;color:var(--ink)}
.mitem b::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--grad);flex-shrink:0}
.mitem p{font-size:.88rem;color:var(--ink-60);margin:.4rem 0 0;padding-inline-start:17px}

/* ============================================================
   REVEAL ANIM
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
[data-reveal].show{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex}
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .portrait{order:-1;width:min(360px,82%)}
  .float-chip.fc1{inset-inline-start:-10px}
  .float-chip.fc2{inset-inline-end:-16px}
  .about__grid{grid-template-columns:1fr;gap:36px}
  .about__card{position:relative;top:0;max-width:420px;margin:0 auto}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .wrap{padding:0 20px}
  .section{padding:72px 0}
  .stats__band{grid-template-columns:1fr 1fr;gap:24px 12px;padding:34px 20px}
  .stat:nth-child(3){border-inline-start:none}
  .stat:nth-child(2)::before,.stat:nth-child(4)::before{display:none}
  .faq__grid{grid-template-columns:1fr}
  .modal__items{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .contact__band{padding:40px 24px}
  .svc{max-width:none;flex:1 1 100%;min-height:0;border-radius:34px;flex-direction:row;text-align:start;gap:18px;padding:24px}
  html[dir="ltr"] .svc{text-align:left}
  .svc__icon{margin:0}
  .svc__title{margin-top:0}
  .svc__more{border-top:none;padding-top:0;margin-top:8px}
  .svc__body{display:flex;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms;transition-duration:.001ms}
  .marquee__track{animation:none}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
/* ============================================================
   v2 — MOTION + REDESIGNED COMPONENTS (overrides)
   ============================================================ */
/* scroll progress */
.scroll-prog{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;z-index:300;background:var(--grad);box-shadow:0 0 12px rgba(0,169,224,.6);transition:width .12s linear}

/* ambient drifting background */
.bg-fx .g1{animation:drift1 24s ease-in-out infinite}
.bg-fx .g2{animation:drift2 30s ease-in-out infinite}
.bg-fx .g3{animation:drift3 27s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(60px,40px) scale(1.12)}}
@keyframes drift2{50%{transform:translate(-70px,-30px) scale(1.08)}}
@keyframes drift3{50%{transform:translate(30px,-50px) scale(1.1)}}

/* logo continuous shine */
.brand__mark::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:55%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-160%);animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{0%,55%{transform:translateX(-160%)}80%,100%{transform:translateX(280%)}}

/* hero portrait gentle idle motion */
.portrait__frame{transition:transform .25s ease-out}
.portrait__art{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.03)}}

/* ---- SERVICES: compact balanced capsule ---- */
.svc{
  flex:1 1 186px;max-width:206px;min-height:300px;
  border-radius:104px;padding:40px 22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
}
.svc__body{display:flex;flex-direction:column;align-items:center;gap:9px}
.svc__title{margin-top:0}
.svc__more{margin-top:0;border-top:none;padding-top:0;opacity:.9}
.svc:hover .svc__icon{transform:scale(1.1) translateY(-2px) rotate(-3deg)}

/* ---- FRAMEWORKS showcase grid ---- */
.about__fwh{font-family:var(--font-display);color:var(--ink);margin:.6rem 0 .2rem;font-size:1.1rem}
.fw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;margin:1.3rem 0}
.fw-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:1.05rem .8rem;text-align:center;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s;
}
.fw-card::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:center;transition:transform .45s}
.fw-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.fw-card:hover::before{transform:scaleX(1)}
.fw-card b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.06rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.01em}
.fw-card small{display:block;margin-top:.35rem;font-size:.73rem;color:var(--ink-60);font-weight:600;line-height:1.3}

/* ---- FAQ redesigned ---- */
.acc{border-radius:20px;border:1px solid var(--line);transition:box-shadow .4s,transform .4s,border-color .4s}
.acc::before{display:none}
.acc::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .45s}
.acc:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.acc.open{box-shadow:var(--shadow);border-color:transparent}
.acc.open::after{transform:scaleY(1)}
.acc__q{gap:.85rem;padding:1.3rem 1.35rem}
.acc__n{
  flex-shrink:0;font-family:var(--font-display);font-weight:800;font-size:.92rem;
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(0,169,224,.12);color:var(--azure);transition:.45s;
}
.acc.open .acc__n{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.acc__ic{flex-shrink:0;width:26px;height:26px;display:grid;place-items:center;color:var(--azure);transition:transform .45s}
.acc__ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4}
.acc.open .acc__ic{transform:rotate(180deg);color:var(--cyan)}
.faq__cta{text-align:center;margin-top:34px}
.faq__cta a{color:var(--navy);font-family:var(--font-display);font-weight:700;display:inline-flex;align-items:center;gap:.5rem}
.faq__cta a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s}
html[dir="rtl"] .faq__cta a svg{transform:scaleX(-1)}
.faq__cta a:hover svg{transform:translateX(4px)}
html[dir="rtl"] .faq__cta a:hover svg{transform:scaleX(-1) translateX(4px)}

/* ---- CONTACT two-column + form ---- */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.contact__panel{background:var(--grad);color:#fff;border-radius:var(--r-lg);padding:44px 38px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;justify-content:center}
.contact__panel::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 110% 0,rgba(255,255,255,.16),transparent 45%)}
.contact__panel>*{position:relative;z-index:1}
.contact__panel h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:.6rem 0 1rem}
.contact__panel p{opacity:.92;margin-bottom:1.9rem;font-size:1.02rem}
.contact__methods{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.8rem}
.cmethod{display:flex;align-items:center;gap:.85rem;color:#fff;transition:transform .3s}
.cmethod:hover{transform:translateY(-2px)}
.cmethod__ic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;flex-shrink:0;transition:.3s}
.cmethod:hover .cmethod__ic{background:#fff}
.cmethod__ic svg{width:20px;height:20px;fill:#fff;transition:.3s}
.cmethod:hover .cmethod__ic svg{fill:var(--navy)}
.cmethod small{display:block;font-size:.74rem;opacity:.82}
.cmethod b{font-family:var(--font-display);font-size:1.04rem}
.contact__panel .contact__socials{justify-content:flex-start;margin-top:1.6rem}

.qform{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 34px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.9rem}
.qform__eyebrow{font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--azure)}
html[lang="ar"] .qform__eyebrow{letter-spacing:.04em;font-size:.84rem}
.qform h3{font-family:var(--font-display);font-size:1.4rem;color:var(--ink);margin-top:.1rem}
.qform__sub{color:var(--ink-60);font-size:.93rem;margin-bottom:.5rem;line-height:1.6}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.qfield{display:flex;flex-direction:column;gap:.35rem}
.qfield label{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--navy)}
.qfield input,.qfield textarea{font-family:inherit;font-size:.95rem;color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:.75rem .9rem;background:var(--paper);transition:border-color .3s,box-shadow .3s,background .3s;resize:vertical;width:100%}
.qfield input:focus,.qfield textarea:focus{outline:none;border-color:var(--cyan);background:#fff;box-shadow:0 0 0 4px rgba(0,169,224,.12)}
.qfield input.err,.qfield textarea.err{border-color:#e0556b;box-shadow:0 0 0 4px rgba(224,85,107,.1)}
.qform__btn{margin-top:.5rem;width:100%}
.qform__note{font-size:.8rem;color:var(--ink-60);text-align:center;margin:.2rem 0 0;transition:color .3s}
.qform__note.ok{color:#1f9d57;font-weight:700}
.qform__note.bad{color:#e0556b;font-weight:700}

@media(max-width:880px){
  .contact__grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .svc{min-height:0;border-radius:34px;flex-direction:row;justify-content:flex-start;text-align:start;gap:16px;padding:24px}
  html[dir="ltr"] .svc{text-align:left}
  .svc__body{align-items:flex-start;gap:6px}
  .svc__title{margin-top:0}
}
@media(max-width:520px){
  .qrow{grid-template-columns:1fr}
}
/* hero themed backdrop */
.hero .wrap{position:relative;z-index:2}
.hero__bg{position:absolute;inset:0;z-index:0;opacity:.1;pointer-events:none;overflow:hidden;transform:scale(1.06);transform-origin:center;animation:heroPan 34s ease-in-out infinite}
.hero__bg svg{width:100%;height:100%;display:block}
@keyframes heroPan{0%,100%{transform:scale(1.06) translate(0,0)}50%{transform:scale(1.11) translate(-16px,12px)}}
@media(max-width:600px){.hero__bg{opacity:.07}}
/* full justification of body paragraphs */
.hero__lead,
.about__body p,
.acc__a p,
.contact__panel p,
.modal__intro,
.footer__brand p,
.qform__sub{text-align:justify}
.section__head p{text-align:justify;text-align-last:center}
/* brand logo image */
.brand__logo{height:38px;width:auto;display:block}
.site-header.shrink .brand__logo{height:33px}
.footer__brand .brand__logo{height:56px;width:auto;filter:brightness(0) invert(1)}
@media(max-width:600px){.brand__logo{height:32px}}
/* partner logo slots (logos are embedded as data URIs in PARTNER_LOGOS) */
.plogo{position:relative}
.plogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.plogo--empty::after{content:"";position:absolute;inset:0;background:center/46px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A5FB6' stroke-width='1.4' stroke-opacity='0.45'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-9 8'/%3E%3C/svg%3E")}

/* mirror profile photo by language direction (Arabic vs English face opposite ways) */
html[lang="en"] .portrait__photo,
html[lang="en"] #profileImg2{transform:scaleX(-1)}
/* ============================================================
   v3 — HERO + HEADER (match reference screenshot)
   ============================================================ */
/* Tajawal everywhere (also English) */
html[lang="en"]{ --font-body:'Tajawal',sans-serif; --font-display:'Tajawal',sans-serif; }

/* header: solid white pill — links on the left, logo on the right */
.site-header{padding-top:30px;padding-bottom:0}
.site-header.shrink{padding-top:16px}
.nav{background:#fff;border-color:#fff;box-shadow:0 12px 34px -14px rgba(10,40,90,.30)}
.nav__links{order:1;margin-inline-start:0;margin-inline-end:auto;gap:.2rem}
.brand{order:2}
.nav__tools{order:3}
.nav__cta{display:none}
.nav__links a{color:#4f86c7;font-weight:600}
.nav__links a:hover{color:var(--navy);background:transparent}
.nav__links a.active{color:#06183F;background:transparent;font-weight:800}

/* hero: blue rounded panel with maze backdrop */
.hero{
  background:linear-gradient(160deg,#2585c6 0%, #15639f 48%, #0b3f88 100%);
  margin:14px 14px 0;border-radius:30px 30px 0 0;
  padding:150px 0 0;
}
.hero__bg{opacity:1}
.hero__grid{grid-template-columns:1.12fr .88fr;gap:32px;align-items:end}
.hero__copy{align-self:center;padding:28px 0}
/* text colors on the blue panel */
.hero h1{color:#fff}
.hero h1 .pre{color:#fff}
.rotator__word{background:none;-webkit-text-fill-color:#0a2350;color:#0a2350}
.hero__lead{color:rgba(255,255,255,.94);max-width:52ch}
/* hero buttons */
.hero__cta .btn--primary{background:#fff;color:var(--navy);box-shadow:0 16px 36px -14px rgba(0,0,0,.4)}
.hero__cta .btn--primary:hover{background:#fff;color:var(--navy);transform:translateY(-3px)}
.hero__cta .btn--ghost{background:#07193F;color:#fff;border:none}
.hero__cta .btn--ghost:hover{background:#0d2a5e;color:#fff;border:none;transform:translateY(-3px)}
/* portrait: transparent cutout, no frame / badge / chips */
.hero .portrait{width:100%;max-width:none;align-self:end;justify-self:center}
.hero .portrait__frame{aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;overflow:visible;isolation:auto}
.hero .portrait__frame::before{display:none}
.hero .portrait__art{display:none}
.hero .portrait__badge{display:none}
.hero .float-chip{display:none}
.hero .portrait__photo{position:relative;width:100%;height:auto;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 22px 38px rgba(4,20,50,.32))}

@media(max-width:980px){
  .hero{padding-top:118px;margin:10px 10px 0;border-radius:24px 24px 0 0}
  .hero__grid{grid-template-columns:1fr;gap:6px;align-items:center}
  .hero__copy{align-self:auto;padding:8px 0;text-align:center;order:0}
  .hero__lead{margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero .portrait{order:1;width:min(330px,80%);margin:0 auto}
}
/* ============================================================
   v4 — split header pills · solid blue · faint strategy pattern
   ============================================================ */
/* one solid dark-blue (no gradient) */
.hero{background:#15639f}
/* faint pattern, covering the whole hero */
.hero__bg{opacity:1;inset:0}

/* HEADER: two separated white pills */
.nav{background:none;border:none;box-shadow:none;padding:0 24px;gap:14px;justify-content:space-between}
html[dir="rtl"] .nav{padding:0 24px}
.nav__bar{
  display:flex;align-items:center;gap:1.5rem;background:#fff;border-radius:var(--r-pill);
  box-shadow:0 14px 36px -16px rgba(8,32,72,.34);padding:.5rem 1.7rem;
}
.nav__links{order:1;margin:0;gap:.2rem}
.brand{order:2}
.nav__tools{
  order:3;background:#fff;border-radius:var(--r-pill);
  box-shadow:0 14px 36px -16px rgba(8,32,72,.34);padding:.45rem .65rem;gap:.5rem;
}
.lang-toggle{border-color:var(--line)}
.brand__logo{height:40px}
.site-header.shrink .brand__logo{height:35px}
@media(max-width:600px){.brand__logo{height:34px}}
/* ============================================================
   v5 — match reference (gradient · spread nav · big portrait · static white heading · outlined btn)
   ============================================================ */
/* left→right gradient: cyan (#1C9DD9) to corporate blue (#4E6FB8) */
.hero{background:linear-gradient(to right,#1C9DD9 0%,#4E6FB8 100%);padding:128px 0 0}
.hero__bg{opacity:1;inset:0}

/* NAVBAR: equal-height rounded pills; menu items spread; logo on the left */
.nav{align-items:stretch}
.nav__bar{flex:1;gap:1.6rem;border-radius:24px;padding:.55rem 1.9rem;align-items:center}
.nav__tools{border-radius:24px;align-items:center;padding:.5rem .8rem}
.nav__links{order:1;flex:1;display:flex;justify-content:space-between;align-items:center;margin:0;gap:0}
.brand{order:2;flex-shrink:0}
.nav__links a{font-size:1.04rem;font-weight:600}
.nav__links a.active{font-weight:800;color:#06183F;background:transparent}
.lang-toggle{border:none;padding:.4rem .65rem}

/* HERO layout: larger portrait on the left, text on the right */
.hero__grid{grid-template-columns:1.4fr 1.05fr;gap:40px;align-items:end}
.hero__copy{align-self:center;padding:0}
.hero .portrait{width:100%;max-width:none;align-self:end;justify-self:center}
.hero .portrait__photo{width:100%;height:auto;object-fit:contain;object-position:bottom center}

/* TYPOGRAPHY: white, large, bold, two lines */
.hero h1{color:#fff;font-weight:800;font-size:clamp(2rem,3.8vw,2.75rem);line-height:1.3}
.hero__lead{color:#fff;font-size:1.08rem;line-height:1.8;margin-top:1.7rem;max-width:none}
.hero__cta{margin-top:2.4rem}

/* BUTTONS: تواصل الآن solid white · اعرف المزيد outlined white; icon on the left */
.hero__cta .btn{border-radius:14px;padding:.85rem 1.6rem;font-size:1rem;font-weight:700;gap:.55rem}
.hero__cta .btn--primary{background:#fff;color:#10305c;box-shadow:0 16px 36px -16px rgba(0,0,0,.4)}
.hero__cta .btn--primary:hover{background:#fff;color:#10305c;transform:translateY(-3px)}
.hero__cta .btn--ghost{background:transparent;color:#fff;border:1.7px solid rgba(255,255,255,.9)}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;transform:translateY(-3px)}
html[dir="rtl"] .hero__cta .btn{flex-direction:row-reverse}

@media(max-width:980px){
  .hero{padding-top:116px}
  .hero__grid{grid-template-columns:1fr;gap:8px;align-items:center}
  .hero__copy{align-self:auto;text-align:center;padding:8px 0}
  .hero .portrait{order:1;width:min(330px,80%)}
  .hero h1{font-size:clamp(1.9rem,7vw,2.4rem)}
  .nav__bar{flex:0 1 auto}
}
/* ============================================================
   v6 — FULL-BLEED hero · split navbar (main nav / logo gap / tail)
   ============================================================ */
html,body{margin:0;padding:0}
body{overflow-x:hidden}

/* FULL-BLEED hero: blue gradient reaches every edge, no white margins */
.hero{position:relative;width:100%;margin:0;border-radius:0;padding:0;overflow:hidden;
  background:linear-gradient(90deg,#1C9DD9 0%,#4F67B1 100%)}
.hero__bg{opacity:1;inset:0}
.hero .wrap{max-width:none;margin:0;padding:0}

/* header overlays the hero (absolute) so the logo gap shows the blue behind it */
.site-header{position:fixed;top:0;left:0;right:0;padding:0;background:none;box-shadow:none}
.site-header.shrink{padding:0}
.site-header .wrap,.nav{max-width:none;margin:0}
.nav{display:flex;align-items:stretch;direction:rtl;gap:0;height:92px;margin-top:50px;
  padding:0;background:none;border:none;box-shadow:none}
html[dir="rtl"] .nav{padding:0}

/* RIGHT — main white nav (~67%), flush to right edge, rounded on the inner (left) side */
.nav__bar{order:0;flex:0 0 67%;display:flex;align-items:center;background:#fff;
  border-radius:30px 0 0 30px;box-shadow:0 18px 44px -22px rgba(8,32,72,.34);padding:0 2.4rem 0 1.7rem}
.nav__links{flex:1;display:flex;justify-content:space-between;align-items:center;margin:0;gap:0}
.nav__links a{font-size:1.04rem;font-weight:600;padding:.35rem 0}
.nav__links a.active{font-weight:800;color:#06183F;background:transparent}

/* MIDDLE — logo gap (~200px) directly on the blue hero background */
.brand{order:1;flex:0 0 clamp(170px,14vw,215px);display:flex;align-items:center;justify-content:center;
  background:none;box-shadow:none}
.brand__logo{height:50px;width:auto}

/* LEFT — white tail fills the rest, flush to left edge, rounded on the inner (right) side */
.nav__tail{order:2;flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:.35rem;
  background:#fff;border-radius:0 30px 30px 0;box-shadow:0 18px 44px -22px rgba(8,32,72,.34);padding:0 1.2rem}
.lang-toggle{border:none;padding:.4rem .6rem}

/* HERO CONTENT clears the navbar; man left (touches edge, no shadow), text right */
.hero__grid{padding-top:170px;grid-template-columns:1fr clamp(360px,33vw,500px);
  gap:clamp(16px,2.5vw,42px);align-items:end}
.hero__copy{align-self:center;max-width:600px;justify-self:start;padding:0 clamp(20px,4vw,68px) 0 0}
.hero__lead{color:#fff;font-size:1.06rem;line-height:1.8;margin-top:1.4rem;max-width:46ch}
.hero__cta{margin-top:2.2rem}
.hero .portrait{width:100%;max-width:none;justify-self:start;align-self:end}
.hero .portrait__photo{filter:none;width:100%;height:auto;object-fit:contain;object-position:bottom left}

/* ROTATING TITLE — "مستشار في" white (line 1), rotating phrase navy (line 2), no shift */
.hero h1{color:#fff;font-weight:800;font-size:clamp(2rem,3.7vw,2.7rem);line-height:1.3}
.hero h1 .pre{display:block;color:#fff}
.hero h1 .rotator{display:block;min-height:1.34em;overflow:visible}
.rotator__word{color:#07235f;-webkit-text-fill-color:#07235f;background:none}

/* BUTTONS — تواصل الآن white (navy text) · اعرف المزيد navy #062A5F; hover both -> #062A5F */
.hero__cta .btn{border-radius:12px;padding:.85rem 1.55rem;font-size:1rem;font-weight:700;gap:.55rem;transition:all .3s ease}
.hero__cta .btn--primary{background:#fff;color:#0a2a66;border:1.6px solid #fff}
.hero__cta .btn--ghost{background:#062A5F;color:#fff;border:1.6px solid #062A5F}
.hero__cta .btn--primary:hover,.hero__cta .btn--ghost:hover{background:#062A5F;color:#fff;border-color:#062A5F;transform:translateY(-2px)}
html[dir="rtl"] .hero__cta .btn{flex-direction:row-reverse}

@media(max-width:980px){
  .nav{height:auto;margin-top:22px;flex-wrap:wrap;gap:8px;padding:0 14px;justify-content:space-between}
  .nav__links{display:none}
  .nav__bar{flex:0 1 auto;border-radius:26px;padding:.5rem 1.3rem}
  .brand{flex:0 0 auto}
  .nav__tail{flex:0 0 auto;border-radius:26px}
  .hero__grid{padding-top:118px;grid-template-columns:1fr;gap:8px;align-items:center}
  .hero__copy{align-self:auto;max-width:none;justify-self:auto;text-align:center;margin:0 auto;padding:8px 16px}
  .hero__lead{margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero .portrait{order:1;width:min(330px,80%);margin:0 auto}
}
/* ============================================================
   v7 — white navbar (logo on white) · shorter + gap above · tighter heading
   ============================================================ */
/* one clean white navbar bar: shorter, gap above (not stuck to top), logo on white */
.nav{background:#fff;border-radius:20px;box-shadow:0 18px 44px -22px rgba(8,32,72,.32);
  height:64px;margin:0 clamp(12px,1.6vw,22px);padding:0 1.1rem;gap:0;align-items:center}
.site-header{padding-top:46px}
.nav__bar{order:0;flex:1 1 auto;background:none;box-shadow:none;border-radius:0;padding:0 1.1rem 0 .4rem;height:auto}
.nav__links{flex:1;justify-content:space-between}
.brand{order:1;flex:0 0 auto;align-self:center;background:none;box-shadow:none;padding:0 clamp(12px,1.8vw,30px)}
.brand__logo{height:38px}
.nav__tail{order:2;flex:0 0 auto;background:none;box-shadow:none;border-radius:0;padding:0;min-width:0;justify-content:flex-start}
.lang-toggle{border:none;padding:.35rem .5rem}

/* hero content clears the shorter navbar */
.hero__grid{padding-top:142px}

/* wider text -> fewer description lines; rotating phrase smaller & single line (never 2 lines) */
.hero__copy{max-width:730px;padding:0 clamp(16px,3vw,52px) 0 0}
.hero__lead{max-width:none;font-size:1.04rem;line-height:1.78}
.hero h1{font-size:clamp(1.9rem,3.3vw,2.45rem);line-height:1.26}
.hero h1 .pre{display:block;font-size:1em}
.hero h1 .rotator{display:block;white-space:nowrap;min-height:1.3em;overflow:visible}
.rotator__word{font-size:.84em}

@media(max-width:980px){
  .nav{height:auto;margin:22px 12px 0;padding:.5rem .9rem;flex-wrap:wrap;border-radius:18px}
  .hero__grid{padding-top:118px}
  .hero__copy{max-width:none;padding:8px 16px}
}
/* ============================================================
   v8 — SERVICES capsule slider + sticky-header polish
   ============================================================ */
html{scroll-padding-top:118px}
.site-header.shrink{padding-top:0}
.nav{transition:margin .28s ease,border-radius .28s ease,height .28s ease,box-shadow .28s ease}
.site-header.shrink .nav{margin:0;border-radius:0;height:58px;box-shadow:0 6px 18px -8px rgba(8,32,72,.3)}

/* SERVICES canvas: light cyan */
#services{background:#E9F4FB;position:relative;overflow:hidden}
#services::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(720px 460px at 50% 10%,rgba(28,118,200,.06),transparent 66%),
             radial-gradient(980px 600px at 50% 70%,rgba(20,70,150,.04),transparent 72%)}
#services .wrap{position:relative;z-index:1}
#services .section__head h2{color:#16357D}
html[lang="en"] #services .section__head h2{color:#1E78BD}
#services .section__head p{color:#36507a;max-width:792px;margin-inline:auto}

/* ============================================================
   SERVICES — one compact row of 5 on desktop; smooth carousel on
   tablet/mobile (5→3→2→1 per view). White cards · gradient icon chips.
   --g is BOTH the inter-card gap and the viewport side-padding, so the
   next card always sits exactly at the clip edge (never a half-card). */
.svc-slider{--g:20px;display:flex;flex-direction:column;align-items:center;max-width:1160px;margin:38px auto 0}
.svc-viewport{width:100%;overflow:hidden;padding:18px var(--g) 30px}
.svc-track{display:flex;gap:var(--g);width:100%;align-items:stretch;
  transform:translateX(0);transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform}
html[dir="rtl"] .svc-track{direction:rtl}

.svc-card{
  flex:0 0 calc((100% - 4 * var(--g)) / 5);box-sizing:border-box;
  display:flex;flex-direction:column;align-items:flex-start;text-align:start;
  background:#fff;border:1px solid rgba(20,52,125,.08);border-radius:20px;
  padding:24px 20px 22px;cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 12px 30px -16px rgba(20,44,82,.22);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.svc-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,#00A9E0,#1FB9EF,#062C84);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .svc-card::after{transform-origin:right}
.svc-card:hover{transform:translateY(-7px);box-shadow:0 28px 50px -22px rgba(20,44,82,.32);border-color:rgba(0,169,224,.45)}
.svc-card:hover::after{transform:scaleX(1)}
.svc-card__icon{flex:0 0 auto;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(140deg,#1FB9EF 0%,#1C84D6 48%,#062C84 100%);
  box-shadow:0 12px 22px -10px rgba(6,44,132,.55);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.svc-card__icon svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8;display:block}
.svc-card:hover .svc-card__icon{transform:scale(1.07) rotate(-3deg)}
.svc-card__title{width:100%;font-family:var(--font-display);font-weight:800;font-size:1rem;line-height:1.34;color:#0F2E6E;margin:18px 0 0}
.svc-card__desc{width:100%;font-size:.875rem;line-height:1.68;color:#56678a;margin:9px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc-card__more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;
  font-family:var(--font-display);font-weight:700;font-size:.86rem;color:#0E76C0}
.svc-card__more svg{width:17px;height:17px;transition:transform .3s}
html[dir="rtl"] .svc-card__more svg{transform:scaleX(-1)}
.svc-card:hover .svc-card__more svg{transform:translateX(4px)}
html[dir="rtl"] .svc-card:hover .svc-card__more svg{transform:scaleX(-1) translateX(4px)}

/* nav (arrows + dots) — JS shows it only when the carousel can move (hidden on desktop) */
.svc-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
.svc-arrow{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;color:#1E5AA8;display:grid;place-items:center;
  box-shadow:0 10px 24px -12px rgba(20,44,82,.45);transition:transform .2s,color .2s,box-shadow .2s,opacity .2s}
.svc-arrow svg{width:22px;height:22px}
.svc-arrow:hover:not(:disabled){color:#0F3C7C;transform:scale(1.1)}
.svc-arrow:disabled{opacity:.32;cursor:default;box-shadow:none}
.svc-dots{display:flex;align-items:center;gap:8px}
.svc-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(30,90,168,.3);transition:width .25s,background .25s}
.svc-dot.is-active{width:24px;border-radius:5px;background:#1E5AA8}

/* responsive: 5 → 3 → 2 → 1 per view (equal height kept by the flex track) */
@media(max-width:1079px){
  .svc-slider{--g:18px}
  .svc-card{flex-basis:calc((100% - 2 * var(--g)) / 3)}
}
@media(max-width:759px){
  .svc-card{flex-basis:calc((100% - 1 * var(--g)) / 2)}
}
@media(max-width:519px){
  .svc-slider{--g:16px}
  .svc-card{flex-basis:100%;padding:28px 22px 24px}
  .svc-card__icon{width:56px;height:56px}
  .svc-card__icon svg{width:30px;height:30px}
  .svc-card__title{font-size:1.08rem}
  .svc-card__desc{font-size:.92rem}
}

/* ============================================================
   FAQ — dark glass redesign (reference display model)
   ============================================================ */
#faq.faq--dark{position:relative;overflow:hidden;
  background:radial-gradient(132% 125% at 87% 93%,#1372c2 0%,#0b4a95 30%,#073066 52%,#051f49 76%,#03132f 100%)}
#faq.faq--dark .wrap{position:relative;z-index:1}
.faq__wm{position:absolute;top:50%;inset-inline-start:-3%;transform:translateY(-50%);
  font-family:var(--font-display);font-weight:900;font-size:clamp(110px,24vw,300px);
  line-height:.8;letter-spacing:.01em;color:rgba(120,185,239,.06);
  pointer-events:none;z-index:0;white-space:nowrap;user-select:none}
html[dir="rtl"] .faq__wm{inset-inline-start:auto;inset-inline-end:-3%}

.faq__head{text-align:center}
.faq__eyebrow{display:inline-block;font-family:var(--font-display);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:#1FB9EF;margin-bottom:.55rem}
#faq.faq--dark .section__head h2.faq__title{color:#fff;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.18;margin:0}
#faq.faq--dark .faq__sub{color:rgba(223,238,235,.68);margin:.7rem auto 0;max-width:600px;font-size:1rem}

.faq__panel{position:relative;z-index:1;max-width:860px;margin:36px auto 0;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:30px;
  padding:18px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 44px 100px -46px rgba(0,0,0,.7)}
.faq__grid{display:flex;flex-direction:column;gap:12px;grid-template-columns:none}

.acc{background:rgba(200,222,245,.08);border:1px solid rgba(255,255,255,.09);border-radius:16px;
  position:relative;overflow:hidden;box-shadow:none;
  transition:background .4s,box-shadow .4s,border-color .4s}
.acc::before{display:none}
.acc::after{display:none}
.acc__q{width:100%;display:flex;align-items:center;gap:1rem;text-align:start;border:none;background:none;
  padding:1.05rem 1.2rem;font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:#e8f1fb;line-height:1.45;cursor:pointer}
.acc__txt{flex:1}
.acc__ic{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:#0A5FB6;box-shadow:0 5px 13px -5px rgba(0,0,0,.45);
  transition:transform .45s,background .45s,color .45s,box-shadow .45s}
.acc__ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.6}
.acc.open{background:#fff;border-color:transparent;box-shadow:0 26px 54px -24px rgba(0,0,0,.55)}
.acc.open .acc__q{color:#07193F}
.acc.open .acc__ic{transform:rotate(180deg);color:#fff;
  background:radial-gradient(circle at 34% 28%,#7fdcf7 0%,#1FB9EF 42%,#0A5FB6 100%);
  box-shadow:0 7px 18px -5px rgba(0,169,224,.6)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .45s ease}
.acc__a p{padding:.1rem 1.35rem 1.25rem;color:#5d6b78;font-size:.95rem;line-height:1.75;margin:0}

.faq--dark .faq__cta{text-align:center;margin-top:30px}
.faq--dark .faq__cta a{color:#1FB9EF}
.faq--dark .faq__cta a svg{stroke:#1FB9EF}

@media(max-width:560px){
  .faq__panel{padding:13px;border-radius:24px}
  .acc__q{padding:.95rem 1rem;font-size:.93rem;gap:.7rem}
  .acc__ic{width:30px;height:30px}
}

/* ============================================================
   v9 — NAVBAR + HERO REFINEMENT  (this iteration: header + hero only)
   - Premium, compact, balanced navbar: logo · centred links · toggle
   - True direction switch (real RTL for Arabic, real LTR for English)
   - One-line rotating headline:  "مستشار في" + phrase (never wraps)
   - Larger, more readable hero description
   - Profile image: flush to the outer edge, face turned toward the copy
   ============================================================ */

/* ---------------- NAVBAR ---------------- */
/* direction follows the active language (overrides the forced rtl in v6) */
html[dir="rtl"] .nav{direction:rtl}
html[dir="ltr"] .nav{direction:ltr}

/* one clean floating white bar — three balanced zones
   (scoped to .site-header so it beats v6's .site-header .wrap margin:0 rule) */
.site-header .nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  height:60px;
  max-width:min(940px,calc(100% - 32px));
  margin:0 auto;
  padding:0 clamp(16px,1.4vw,24px);
  background:#fff;
  border:1px solid rgba(11,40,90,.05);
  border-radius:18px;
  box-shadow:0 16px 40px -20px rgba(8,32,72,.30);
}
html[dir="rtl"] .nav{padding:0 clamp(14px,1.6vw,22px)}
.site-header{padding-top:clamp(20px,3.6vw,42px)}

/* zones: logo at the start · links centred · actions at the end */
.site-header .brand{order:0;justify-self:start;background:none ;box-shadow:none;padding:0;flex-shrink:0}
.nav__bar{order:1;justify-self:center;display:flex;align-items:center;background:none;box-shadow:none;border-radius:0;padding:0;flex:0 1 auto}
.nav__tail{order:2;justify-self:end;display:flex;align-items:center;gap:.5rem;background:none;box-shadow:none;border-radius:0;padding:0;min-width:0}
.site-header .brand__logo{height:44px;width:auto;display:block}
.site-header.shrink .brand__logo{height:40px}

/* compact, elegant link cluster (replaces the spread-out space-between) */
.nav__links{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:0;flex:0 1 auto}
.nav__links a{
  position:relative;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.005em;
  color:#46587a;
  padding:.5rem .92rem;
  border-radius:10px;
  background:transparent;
  white-space:nowrap;
  transition:color .25s ease;
}
/* underline grows from the centre on hover / active */
.nav__links a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:.3rem;
  width:0;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-bright));
  transform:translateX(-50%);
  transition:width .28s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover{color:var(--navy);background:transparent}
.nav__links a.active{color:var(--navy);font-weight:800;background:transparent}
.nav__links a:hover::after,
.nav__links a.active::after{width:calc(100% - 1.7rem)}

/* language toggle — refined pill */
.lang-toggle{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.46rem .85rem;border-radius:999px;
  color:var(--navy);
  border:1.5px solid rgba(11,40,90,.14);
  background:#fff;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.lang-toggle:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,169,224,.06)}
.lang-toggle svg{width:15px;height:15px}

/* keep the nav CTA hidden on desktop (avoids a duplicate "contact"); burger is mobile-only */
.nav__cta{display:none}
.nav__burger{margin-inline-start:.1rem}

/* scrolled / docked state keeps the grid, just flattens the bar */
.site-header.shrink .nav{margin:0 auto;border-radius:0;height:58px;box-shadow:0 8px 22px -10px rgba(8,32,72,.30)}

/* ---------------- HERO ---------------- */
/* keep the existing full-bleed blue gradient; refine layout + type */
.hero{min-height:100vh}
.hero__grid{
  grid-template-columns:1fr clamp(345px,34vw,505px);
  gap:clamp(20px,3vw,52px);
  align-items:end;
  align-content:stretch;
  min-height:100vh;
  box-sizing:border-box;
  padding-top:clamp(150px,24vh,300px);
  padding-bottom:0;
}
.hero__copy{
  align-self:start;
  max-width:740px;
  justify-self:start;
  padding-inline-start:clamp(72px,5.5vw,92px);
  padding-inline-end:clamp(6px,1.4vw,22px);
  text-align:start;
  transform:translateY(20px);
}

/* headline — "مستشار في" + rotating phrase on ONE line, never a second line */
.hero h1{
  color:#fff;font-weight:800;line-height:1.32;letter-spacing:0;
  font-size:clamp(.95rem,3.6vw,2.15rem);
  white-space:nowrap;
  text-shadow:0 2px 20px rgba(4,18,46,.26);
}
.hero h1 .pre{display:inline;color:#fff;font-weight:700;font-size:1em;margin-inline-end:.25ch}
.hero h1 .rotator{display:inline-block;vertical-align:baseline;min-height:0;overflow:visible;white-space:nowrap}
.rotator__word{
  display:inline-block;
  color:#ffffff;-webkit-text-fill-color:#ffffff;background:none ;
  font-weight:800;font-size:1em;
  padding-bottom:.06em;
  border-bottom:.09em solid var(--cyan-bright);
}

/* description — slightly larger, airier, cleaner alignment */
.hero__lead{
  color:#fff;
  font-size:clamp(1.04rem,1.55vw,1.18rem);
  line-height:1.9;
  letter-spacing:.002em;
  margin-top:1.7rem;
  max-width:54ch;
  text-align:justify;
  text-justify:inter-word;
  text-shadow:0 1px 10px rgba(4,18,46,.18);
}
html[dir="ltr"] .hero__lead{max-width:62ch}
.hero__cta{margin-top:2.3rem}

/* portrait flush to the OUTER (end) edge; face flip stays language-driven */
.hero .portrait{width:100%;max-width:none;justify-self:end;align-self:end}
.hero .portrait__photo{width:100%;height:auto;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 18px 34px rgba(4,18,46,.30))}

/* tablet / small-laptop: stack to one column so the headline keeps room */
@media(max-width:1080px){
  .hero{min-height:100vh;min-height:100dvh}
  .hero__grid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;align-items:center;min-height:100vh;min-height:100dvh;box-sizing:border-box;padding-top:clamp(104px,15vw,132px);padding-bottom:0}
  .hero__copy{align-self:start;max-width:none;justify-self:stretch;text-align:start;margin:0;padding:8px clamp(16px,5vw,40px);transform:none}
  .hero__lead{max-width:62ch;margin-inline:0;text-align:start;font-size:clamp(1.08rem,2.2vw,1.2rem);line-height:1.92}
  .hero__cta{justify-content:flex-start;gap:.72rem}
  .hero__cta .btn{padding:.68rem 1.2rem}
  .hero .portrait{order:1;width:min(430px,86%);margin:0 auto;justify-self:center;align-self:end}
  /* stronger headline hierarchy: larger fixed text (main headline) sized per language */
  html[lang="ar"] .hero h1{font-size:clamp(1.35rem,6vw,1.9rem)}
  html[lang="en"] .hero h1{font-size:clamp(1.12rem,5vw,1.55rem)}
  /* rotating keyword: smaller + dark navy so it reads as the dynamic part (fixed text stays white) */
  .rotator__word{font-size:.72em;color:#062C84;-webkit-text-fill-color:#062C84;border-bottom:none}
}

/* mobile navbar: logo (start) + actions (end); links live in the drawer */
@media(max-width:980px){
  .site-header .nav{grid-template-columns:1fr auto;height:auto;min-height:56px;max-width:none;margin:0 12px;padding:.45rem .8rem;border-radius:16px;gap:.5rem}
  .nav__bar{display:none}
  .site-header .brand{order:0;justify-self:start}
  .nav__tail{order:1;justify-self:end;gap:.35rem}
  .site-header.shrink .nav{margin:0;border-radius:0}
}
@media(max-width:560px){
  .hero__lead{font-size:1.1rem;line-height:1.95}
}

/* ============================================================
   NAVBAR — stable on scroll + correct stacking (scope: navbar only)
   ============================================================ */
/* the fixed header spans the full width but is visually only the centred pill,
   so let pointer events pass through its transparent frame and keep the pill live.
   z-index stays 100: above all page content, still below the modal (200). */
.site-header{pointer-events:none}
.site-header .nav{pointer-events:auto}
/* neutralise the on-scroll "shrink" so position / height / radius / width / logo
   stay identical while scrolling — no jump, no layout shift, nothing breaks */
.site-header.shrink{padding-top:clamp(20px,3.6vw,42px)}
.site-header.shrink .brand__logo{height:44px}
@media(min-width:981px){
  .site-header.shrink .nav{margin:0 auto;height:60px;border-radius:18px;box-shadow:0 16px 40px -20px rgba(8,32,72,.30)}
}
@media(max-width:980px){
  .site-header.shrink .nav{margin:0 12px;height:auto;min-height:56px;border-radius:16px;box-shadow:0 16px 40px -20px rgba(8,32,72,.30)}
}
@media(max-width:600px){
  .site-header.shrink .brand__logo{height:32px}
}

/* ============================================================
   ABOUT — image fixes KEPT, colours REVERTED to the original,
   cropping-safe at 100% zoom (scope: About section only)
   ============================================================ */
/* (kept) only one profile image — hide the placeholder silhouette behind the photo */
.about__photo svg{display:none}
/* (kept) face direction: Arabic → looks left (flip) · English → looks right (natural).
   Overrides the shared hero flip-rule for #profileImg2 ONLY — hero portrait untouched. */
html[lang="en"] #profileImg2{transform:none}
html[lang="ar"] #profileImg2{transform:scaleX(-1)}
/* (kept) card stays non-sticky so its full height is always visible (it was being clipped) */
.about__card{position:relative;top:auto}
/* colours revert automatically: with no #about background and no card-colour overrides,
   the section returns to the light page background and the card to its original blue gradient */
/* (cropping) responsive spacing that clears the fixed navbar; no fixed height, nothing clipped */
#about{padding-top:clamp(104px,11vh,140px);padding-bottom:clamp(64px,8vh,96px);overflow:visible}
/* natural text alignment per direction */
html[dir="rtl"] .about__body{text-align:right}
html[dir="ltr"] .about__body{text-align:left}


/* ============================================================
   PARTNERS — mobile sizing (scope: partners slider only)
   ============================================================ */
@media(max-width:768px){
  .partners{padding:48px 0 52px}
  .partners__head{margin-bottom:22px}
  .plogo{width:118px;height:118px;padding:18px;margin:10px 11px}
  .marquee__track{animation-duration:34s}
}

/* ============================================================
   PARTNERS — manual Swiper carousel + animated colour wave
   (scope: partners section only)
   ============================================================ */
/* gentle colour wave over the (unchanged) blue gradient */
.partners::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 24%,rgba(31,185,239,.30) 44%,rgba(255,255,255,.12) 52%,rgba(10,95,182,.24) 60%,transparent 80%);
  background-size:260% 260%;animation:partnersWave 17s ease-in-out infinite;mix-blend-mode:screen}
@keyframes partnersWave{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.partners .wrap,.lmarquee{position:relative;z-index:1}

/* white monochrome logo marquee — no cards; the logos are the hero */
.lmarquee{overflow:hidden;direction:ltr;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.lmarquee__track{display:flex;direction:ltr;width:max-content;align-items:center;height:clamp(96px,11vw,140px);
  animation:lscroll 52s linear infinite}
@keyframes lscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lmarquee:hover .lmarquee__track{animation-play-state:paused}
.llogo{flex:0 0 auto;height:100%;display:flex;align-items:center;justify-content:center;margin:0 clamp(26px,3.4vw,58px)}
.llogo img{max-height:95%;max-width:clamp(132px,16.5vw,231px);width:auto;height:auto;object-fit:contain;display:block;
  filter:none;opacity:1;transition:transform .35s ease,opacity .35s ease}
.llogo img:hover{transform:scale(1.08);opacity:1}
@media(max-width:980px){
  .lmarquee__track{height:clamp(78px,13vw,104px);animation-duration:46s}
  .llogo{margin:0 clamp(18px,4vw,34px)}
}
@media(max-width:600px){
  .lmarquee__track{height:64px;animation-duration:38s}
  .llogo{margin:0 16px}
  .llogo img{max-width:143px}
}

/* ============================================================
   FAQ — clean white two-column accordion (scope: FAQ section only)
   ============================================================ */
#faq.faq--dark{background:#fff}
#faq .faq__wm{display:none}
#faq .faq__eyebrow{display:none}
#faq.faq--dark .section__head h2.faq__title{color:#0E2748;margin:0}
#faq .faq__head{margin:0 auto 40px;max-width:760px}
#faq.faq--dark .faq__sub{color:#5F6B7A;margin:.8rem auto 0}
#faq .faq__panel{background:none;border:none;border-radius:0;padding:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;max-width:1040px;margin:0 auto}
#faq .faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:768px){ #faq .faq__grid{grid-template-columns:1fr} }
#faq .acc{background:#fff;border:2px solid #0E63B6;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.04);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
#faq .acc::before,#faq .acc::after{display:none}
#faq .acc:hover{transform:translateY(-3px);box-shadow:0 18px 35px rgba(0,0,0,.08);border-color:#00A6D6}
#faq .acc.open{background:#fff;border-color:#0E63B6;box-shadow:0 18px 35px rgba(0,0,0,.08)}
#faq .acc__q{width:100%;min-height:96px;display:flex;align-items:center;gap:1rem;text-align:start;border:none;background:none;
  padding:18px 28px;font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:#0E2748;line-height:1.5;cursor:pointer}
#faq .acc.open .acc__q{color:#0E2748}
#faq .acc__txt{flex:1;line-height:1.6}
#faq .acc__ic{flex-shrink:0;width:24px;height:24px;border-radius:0;background:none;box-shadow:none;
  position:relative;color:#0E63B6;transition:transform .3s ease}
#faq .acc__ic svg{display:none}
#faq .acc__ic::before,#faq .acc__ic::after{content:"";position:absolute;top:50%;left:50%;
  width:16px;height:2.6px;background:#0E63B6;border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .3s ease,opacity .3s ease}
#faq .acc__ic::after{transform:translate(-50%,-50%) rotate(90deg)}
#faq .acc.open .acc__ic{transform:none;color:#0E63B6}
#faq .acc.open .acc__ic::after{opacity:0}
#faq .acc__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
#faq .acc__a p{padding:0 28px 22px;color:#5F6B7A;font-size:.97rem;line-height:1.75;margin:0;
  opacity:0;transition:opacity .3s ease}
#faq .acc.open .acc__a p{opacity:1}
#faq.faq--dark .faq__cta a,#faq .faq__cta a{color:#0E63B6}
#faq .faq__cta a svg{stroke:#0E63B6}



/* ===================== NAV + HEADLINE TWEAKS (appended-last) ===================== */
/* navbar: more breathing room between links */
.site-header .nav__links{gap:clamp(.35rem,1vw,.95rem)}
.site-header .nav__links a{padding-inline:clamp(.75rem,1.5vw,1.35rem)}

/* rotating keyword: navy on desktop (like mobile) */
.rotator__word{color:#062C84;-webkit-text-fill-color:#062C84}

/* mobile: same font size as "مستشار في", stay navy, allow wrap (no overflow) */
@media(max-width:1080px){
  .hero h1{white-space:normal}
  .rotator__word{font-size:1em;color:#062C84;-webkit-text-fill-color:#062C84}
}
/* ===================== /NAV + HEADLINE TWEAKS ===================== */

/* ===================== FOOTER REDESIGN (scoped, appended-last) ===================== */
.footer{position:relative;overflow:hidden;color:#D9E6F5;
  background:linear-gradient(105deg,#2186c8 0%,#286cb4 52%,#3e5696 100%);padding:90px 0 0}
.footer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.5px);background-size:26px 26px}
.footer .wrap{position:relative;z-index:1}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1.15fr 1.2fr;gap:48px;align-items:start}

.footer__brand{position:relative}
.footer__brand::before{content:"";position:absolute;top:-46px;inset-inline-start:-34px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(31,185,239,.26),transparent 70%);filter:blur(8px);pointer-events:none;z-index:0}
.footer__brand>*{position:relative;z-index:1}
.footer__brand .brand{display:inline-flex;align-items:center}
.footer__brand .brand__logo{height:62px;width:auto;display:block;filter:brightness(0) invert(1);transition:filter .3s,transform .3s}
.footer__brand .brand:hover .brand__logo{filter:brightness(0) invert(1) drop-shadow(0 0 14px rgba(124,201,242,.75));transform:translateY(-1px)}
.footer__brand .footer__desc{color:#D9E6F5;opacity:.82;font-size:.96rem;line-height:1.85;margin:1.2rem 0 0;max-width:34ch;text-align:start}

.footer__socials{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.footer__socials .soc{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  transition:transform .3s,background .3s,border-color .3s,box-shadow .3s}
.footer__socials .soc svg{width:19px;height:19px;fill:#D9E6F5;transition:fill .3s}
.footer__socials .soc:hover{transform:translateY(-4px);background:rgba(31,185,239,.2);
  border-color:rgba(124,201,242,.55);box-shadow:0 12px 26px rgba(3,18,55,.55)}
.footer__socials .soc:hover svg{fill:#fff}
.footer__socials .soc:focus-visible{outline:2px solid rgba(124,201,242,.8);outline-offset:3px}

.footer h4{font-family:var(--font-display);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:#eaf4fd;font-weight:800;margin:0 0 1.4rem}
html[lang="ar"] .footer h4{letter-spacing:.04em;font-size:.96rem}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col li{margin-bottom:.85rem}
.footer .footer__link{position:relative;display:inline-block;color:#D9E6F5;font-size:.95rem;padding:0 0 3px;
  text-decoration:none;transition:color .3s}
.footer .footer__link::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:0;height:1.5px;
  background:#7cc9f2;border-radius:2px;transition:width .3s}
.footer .footer__link:hover{color:#fff;padding-inline-start:0}
.footer .footer__link:hover::after{width:100%}
.footer .footer__link:focus-visible{outline:2px solid rgba(124,201,242,.8);outline-offset:3px}

.footer__contact a,.footer__contact .fc-line{display:flex;align-items:center;gap:.6rem;color:#D9E6F5;
  font-size:.95rem;margin-bottom:.9rem;text-decoration:none;transition:color .3s}
.footer__contact a:hover{color:#fff}
.footer__contact svg{width:18px;height:18px;flex-shrink:0;fill:#7cc9f2;transition:fill .3s}
.footer__contact a:hover svg{fill:#fff}
.footer__contact .num,.footer__contact .mail{direction:ltr;unicode-bidi:embed}

.footer__bar{margin-top:62px;border-top:1px solid rgba(255,255,255,.14);padding:30px 0 46px;
  text-align:center;color:rgba(255,255,255,.62);font-size:.85rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.footer__by{font-size:.82rem;color:rgba(255,255,255,.6)}
.footer__brandlink{color:#cdeeff;font-weight:800;letter-spacing:.02em;text-decoration:none;transition:color .25s,text-shadow .25s}
.footer__brandlink:hover{color:#fff;text-shadow:0 0 10px rgba(205,238,255,.7)}

@media(max-width:900px){
  .footer{padding:74px 0 0}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px 36px}
}
@media(max-width:560px){
  .footer__grid{grid-template-columns:1fr;text-align:center;gap:40px}
  .footer__brand{display:flex;flex-direction:column;align-items:center}
  .footer__brand .footer__desc{margin-inline:auto;text-align:center}
  .footer__brand::before{inset-inline-start:50%;transform:translateX(-50%);top:-30px}
  .footer__socials{justify-content:center}
  .footer__contact a,.footer__contact .fc-line{justify-content:center}
  .footer .footer__link::after{inset-inline-start:50%;transform:translateX(-50%)}
}
/* ===================== /FOOTER REDESIGN ===================== */

/* ===================== CONTACT REDESIGN (scoped, appended-last) ===================== */
#contact{background:#f6fbff;padding:clamp(64px,9vh,110px) 20px}
#contact .wrap{max-width:880px}

/* intro */
#contact .contact__intro{text-align:center;max-width:720px;margin:0 auto clamp(30px,4.5vw,46px)}
#contact .contact__crumb{display:flex;justify-content:center;align-items:center;gap:.5rem;font-size:.85rem;color:#7d8aa0;margin-bottom:.5rem}
#contact .contact__crumb a{color:#0E63B6;text-decoration:none}
#contact .contact__crumb a:hover{text-decoration:underline}
#contact .contact__crumb b{color:#0E2748;font-weight:700}
#contact .contact__intro h2{position:relative;display:inline-block;color:#0E2748;
  font-size:clamp(2rem,4vw,2.9rem);line-height:1.15;margin:.2rem 0 1.1rem}
#contact .contact__intro h2::after{content:"";position:absolute;left:50%;bottom:-.5rem;transform:translateX(-50%);
  width:62px;height:4px;border-radius:4px;background:var(--grad)}
#contact .contact__lead{color:#5F6B7A;font-size:1.06rem;line-height:1.95;max-width:620px;margin:0 auto 1.9rem}
#contact .contact__pick{color:#0E2748;font-size:1.16rem;font-weight:800;margin:0 0 1.15rem}

/* channel icons */
#contact .contact__channels{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin:0 0 .4rem}
#contact .chan{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#fff;border:1.5px solid rgba(14,99,182,.2);color:#0E2748;text-decoration:none;
  box-shadow:0 6px 18px rgba(8,29,56,.06);transition:transform .25s ease,background .25s,color .25s,border-color .25s,box-shadow .25s}
#contact .chan svg{width:22px;height:22px;fill:currentColor;transition:fill .25s}
#contact .chan:hover{transform:translateY(-5px);background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 16px 30px rgba(10,95,182,.32)}
#contact .chan:focus-visible{outline:3px solid rgba(0,166,214,.5);outline-offset:3px}

/* "or" divider line */
#contact .contact__or{display:flex;align-items:center;gap:1rem;justify-content:center;
  color:#5F6B7A;font-size:1rem;max-width:620px;margin:1.6rem auto 0}
#contact .contact__or::before,#contact .contact__or::after{content:"";height:1px;flex:1;background:rgba(14,99,182,.18)}
#contact .contact__or span{flex:0 0 auto;max-width:70%}

/* form card */
#contact .qform{max-width:860px;margin:clamp(26px,4vw,40px) auto 0;background:#fff;border:1px solid rgba(14,99,182,.12);
  border-radius:28px;padding:clamp(28px,4vw,44px);box-shadow:0 24px 70px rgba(8,29,56,.10);display:flex;flex-direction:column}
#contact .qfield{display:flex;flex-direction:column;margin-bottom:1.05rem}
#contact .qfield label{color:#0E2748;font-weight:600;font-size:.9rem;margin-bottom:.45rem;text-align:start}
#contact .qfield input,#contact .qfield textarea{width:100%;background:#f6fbff;border:1px solid rgba(14,99,182,.22);
  border-radius:14px;padding:15px 18px;font:inherit;font-size:1rem;color:#0E2748;transition:border-color .2s,box-shadow .2s,background .2s}
#contact .qfield input::placeholder,#contact .qfield textarea::placeholder{color:#9bb0c4}
#contact .qfield input:focus,#contact .qfield textarea:focus{outline:none;background:#fff;border-color:#00A6D6;box-shadow:0 0 0 4px rgba(0,166,214,.12)}
#contact .qfield textarea{resize:vertical;min-height:140px}
#contact .qfield input.err,#contact .qfield textarea.err{border-color:#e0556b;box-shadow:0 0 0 4px rgba(224,85,107,.12)}
#contact .qrow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#contact .qform__btns{display:flex;gap:.8rem;margin-top:.6rem}
#contact .qform__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1rem;border-radius:14px;font-weight:700;font-size:1rem;cursor:pointer;
  border:1.6px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
#contact .qform__btn svg{width:19px;height:19px}
#contact .qform__btn.btn--primary{color:#fff;box-shadow:0 12px 26px rgba(10,95,182,.28)}
#contact .qform__btn.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(10,95,182,.36)}
#contact .qform__btn--ghost{background:#fff;color:#0E63B6;border-color:#0E63B6}
#contact .qform__btn--ghost svg{fill:currentColor}
#contact .qform__btn--ghost:hover{background:#0E63B6;color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,99,182,.26)}
#contact .qform__note{margin:1rem 0 0;font-size:.9rem;color:#5F6B7A;text-align:center;min-height:1.2em;transition:color .2s}
#contact .qform__note.ok{color:#1f9d57}
#contact .qform__note.bad{color:#e0556b}

@media(max-width:560px){
  #contact{padding:56px 16px}
  #contact .chan{width:50px;height:50px}
  #contact .qrow{grid-template-columns:1fr}
  #contact .qform__btns{flex-direction:column}
}

/* single CTA + send-method sheet */
#contact .qform__send{align-self:center;min-width:240px;display:inline-flex;align-items:center;justify-content:center;
  margin-top:.9rem;padding:.95rem 2.4rem;border-radius:14px;font-weight:700;font-size:1.05rem;cursor:pointer;
  color:#fff;border:none;box-shadow:0 14px 30px rgba(10,95,182,.30);transition:transform .2s,box-shadow .2s}
#contact .qform__send:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(10,95,182,.4)}
#contact .qform__note:empty{margin:0;min-height:0}

#sendSheet{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
#sendSheet.open{display:flex}
#sendSheet .send-sheet__backdrop{position:absolute;inset:0;background:rgba(7,25,63,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:sheetFade .25s ease}
#sendSheet .send-sheet__panel{position:relative;z-index:1;width:100%;max-width:420px;background:#fff;border-radius:22px;
  padding:30px 26px 26px;box-shadow:0 40px 90px rgba(7,25,63,.35);animation:sheetIn .3s cubic-bezier(.2,.8,.2,1)}
#sendSheet h4{margin:0 0 1.2rem;text-align:center;color:#0E2748;font-size:1.2rem;font-weight:800}
#sendSheet .send-sheet__x{position:absolute;top:14px;inset-inline-end:16px;width:34px;height:34px;border:none;
  background:#eef5fc;border-radius:50%;color:#5F6B7A;font-size:1.3rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
#sendSheet .send-sheet__x:hover{background:#0E2748;color:#fff}
#sendSheet .send-sheet__opt{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  padding:.95rem 1rem;border-radius:14px;font-weight:700;font-size:1rem;cursor:pointer;margin-top:.75rem;
  border:1.6px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
#sendSheet .send-sheet__opt svg{width:20px;height:20px;fill:currentColor}
#sendSheet .send-sheet__opt--wa{background:var(--grad);color:#fff;box-shadow:0 12px 26px rgba(10,95,182,.28)}
#sendSheet .send-sheet__opt--wa:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(10,95,182,.36)}
#sendSheet .send-sheet__opt--email{background:#fff;color:#0E63B6;border-color:#0E63B6}
#sendSheet .send-sheet__opt--email:hover{background:#0E63B6;color:#fff;transform:translateY(-2px)}
@keyframes sheetFade{from{opacity:0}to{opacity:1}}
@keyframes sheetIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:560px){
  #sendSheet{align-items:flex-end;padding:0}
  #sendSheet .send-sheet__panel{max-width:none;border-radius:22px 22px 0 0;animation:sheetUp .3s ease}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
/* ===================== /CONTACT REDESIGN ===================== */

/* ===================== GLOBAL TEXT JUSTIFY (AR + EN) ===================== */
/* body paragraphs that were not yet justified */
.svc-card__desc,.svc__desc{text-align:justify;text-justify:inter-word}
/* centered intro: justified lines but keep last line centered so it still reads centered */
#contact .contact__lead{text-align:justify;text-justify:inter-word;text-align-last:center}
/* footer description: justify from tablet up; stays centered on mobile stack */
@media(min-width:561px){ .footer__brand .footer__desc{text-align:justify;text-justify:inter-word} }
/* (hero lead, about paragraphs, FAQ answers, form sub, and all section intros
   are already justified in earlier rules) */
/* ===================== /GLOBAL TEXT JUSTIFY ===================== */

@media (max-width: 768px) {

    .hero__lead{
        text-align: justify ;
        text-align-last: left;
        text-justify: inter-word;
        max-width: 100%;
        width: 100%;
    }

    html[dir="rtl"] .hero__lead{
        text-align-last: right;
    }

}

@media (max-width: 768px) {

  .hero__copy h1 {
    font-size: 1.55rem ;
    line-height: 1.15 ;
    font-weight: 800 ;
  }

  .hero__copy h1 .pre,
  .hero__copy h1 .rotator,
  .hero__copy h1 .rotator__word {
    font-size: inherit ;
    line-height: inherit ;
    font-weight: 800 ;
  }

  .hero__lead {
    font-size: 1.05rem ;
  }

}

/* Desktop: enlarge hero portrait and move it into the empty space */
@media (min-width: 1081px) {

  .hero__grid {
    grid-template-columns: 0.95fr 0.85fr ;
    gap: 10px ;
  }

  .hero .portrait {
    width: 118% ;
    max-width: 620px ;
    transform: translateX(-70px) ;
  }

  html[dir="rtl"] .hero .portrait {
    transform: translateX(-70px) ;
  }

  html[dir="ltr"] .hero .portrait {
    transform: translateX(70px) ;
  }

  .hero .portrait__photo {
    width: 118% ;
  }

}


/* ===== FINAL HERO + NAV FIX ===== */

@media (min-width:1080px){

  .hero__copy{
    max-width:850px;
  }

  .hero h1{
    font-size:3.5rem;
    line-height:1.15;
  }

  .hero__lead{
    font-size:1.3rem;
    line-height:2;
    max-width:700px;
  }

  .hero__cta .btn{
    font-size:1.15rem;
    padding:18px 34px;
  }

  .hero__grid{
    grid-template-columns:52% 48%;
    align-items:end;
  }

  .hero .portrait{
    position:absolute;
    bottom:0;
    width:38vw;
    max-width:660px;
    min-width:550px;
  }

  html[dir="rtl"] .hero .portrait{
    left:70px;
    right:auto;
  }

  html[dir="ltr"] .hero .portrait{
    right:70px;
    left:auto;
  }

  .hero .portrait__frame{
    transform:none;
  }

  .hero .portrait__photo{
    width:100%;
  }

  html[dir="rtl"] .hero .portrait__photo{
    transform:none;
  }

  html[dir="ltr"] .hero .portrait__photo{
    transform:scaleX(-1);
  }

}

@media (min-width:981px){

  .site-header .nav{
    display:flex;
    align-items:center;
    gap:14px;
    width:calc(115% - 260px);
    max-width:calc(115% - 260px);
    background:transparent;
    box-shadow:none;
    border:none;
    padding:0;
  }

  .nav__empty{
    width:240px;
    height:60px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 16px 40px -20px rgba(8,32,72,.30);
    flex-shrink:0;
  }

  .site-header .brand{
    background:transparent;
    box-shadow:none;
    padding:0 18px;
    flex-shrink:0;
  }

  .nav__bar{
    flex:1;
    height:60px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 16px 40px -20px rgba(8,32,72,.30);
    padding:0 28px;
  }

  .nav__tail{
    height:60px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 16px 40px -20px rgba(8,32,72,.30);
    padding:0 18px;
  }

}
/* FINAL MOBILE NAV FIX */
@media (max-width:980px){

  .site-header{
    padding-top:14px;
  }

  .site-header .nav{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    width:auto;
    max-width:none;
    margin:0 14px;
    padding:10px 12px;
    height:74px;
    min-height:74px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 16px 40px -20px rgba(8,32,72,.30);
    gap:10px;
  }

  .nav__empty,
  .nav__bar{
    display:none;
    width:0;
    height:0;
    padding:0;
    margin:0;
  }

  .site-header .brand{
    order:0;
    justify-self:start;
    padding:0;
    margin:0;
    background:transparent;
    box-shadow:none;
  }

  .site-header .brand__logo{
    height:54px;
    width:auto;
  }

  .nav__tail{
    order:1;
    justify-self:end;
    display:flex;
    align-items:center;
    gap:8px;
    background:transparent;
    box-shadow:none;
    border:none;
    padding:0;
    margin:0;
    height:auto;
  }

  .nav__burger{
    display:flex;
    width:46px;
    height:46px;
    flex-shrink:0;
  }
@media (max-width:768px){

  .footer__brand{
      padding-top:30px;
  }

  .footer__brand .brand{
      margin-top:20px;
 }

.footer__contact .num,
.footer__contact .mail{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
  text-align:left;
}

html[dir="rtl"] .footer__contact a{
  direction:rtl;
}

html[dir="rtl"] .footer__contact .num,
html[dir="rtl"] .footer__contact .mail{
  direction:ltr;
}