/* =========================================================
   ptc العقارية — Design System
   Brand: deep violet (#470281) + champagne gold
   ========================================================= */

:root{
  /* brand */
  --violet-950:#12042A;
  --violet-900:#1B0638;
  --violet-850:#250A4A;
  --violet-800:#33076B;
  --violet-700:#470281;   /* logo purple */
  --violet-600:#5D14A3;
  --violet-500:#7B27C9;
  --violet-400:#9D5BE6;
  --violet-300:#C39BF2;
  --violet-100:#EDE2FB;
  --violet-50:#F7F2FE;

  --gold-600:#C9932E;
  --gold-500:#E0AC42;
  --gold-400:#F0C464;
  --gold-300:#F7DA9A;

  --ink:#1A1030;
  --ink-soft:#5A4C74;
  --line:rgba(71,2,129,.12);
  --white:#fff;
  --bg:#FFFFFF;
  --bg-alt:#F8F5FD;

  --grad-brand:linear-gradient(120deg,var(--violet-700) 0%,var(--violet-500) 45%,var(--violet-400) 100%);
  --grad-gold:linear-gradient(120deg,var(--gold-600),var(--gold-400) 55%,var(--gold-300));

  --shadow-sm:0 4px 16px rgba(37,10,74,.08);
  --shadow-md:0 14px 40px rgba(37,10,74,.12);
  --shadow-lg:0 30px 70px rgba(37,10,74,.20);
  --shadow-gold:0 12px 34px rgba(224,172,66,.35);

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px;
  --ease:cubic-bezier(.22,.68,.32,1);
  --nav-h:82px;
  --container:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.8;
  overflow-x:hidden;
  font-size:16.5px;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{list-style:none; margin:0; padding:0}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font-family:inherit; font-size:1rem}
h1,h2,h3,h4{font-family:'Cairo',sans-serif; line-height:1.45; margin:0; font-weight:900; letter-spacing:-.4px}
p{margin:0}

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

/* visible keyboard focus — the custom controls kill the UA default */
:focus-visible{outline:3px solid var(--gold-400); outline-offset:3px; border-radius:6px}
.hero :focus-visible,.cta :focus-visible,.footer :focus-visible,.lightbox :focus-visible,
.nav :focus-visible,.band :focus-visible{outline-color:var(--gold-300)}

/* scrollbar */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--violet-50)}
::-webkit-scrollbar-thumb{background:var(--violet-500); border-radius:99px; border:3px solid var(--violet-50)}
::-webkit-scrollbar-thumb:hover{background:var(--violet-700)}

.container{width:min(100% - 44px,var(--container)); margin-inline:auto}
.section{padding:clamp(72px,9vw,130px) 0; position:relative}
/* Gradient text. Arabic descenders (م ج ح ي) fall outside the inline background
   box, so pad it — inline vertical padding paints without shifting layout. */
.grad{
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-block:.06em .18em;
}

/* ============ REVEAL ANIMATIONS ============ */
.reveal{opacity:0; transform:translateY(38px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal[data-anim="right"]{transform:translateX(46px)}
.reveal[data-anim="left"]{transform:translateX(-46px)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important; transform:none!important; transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important; animation-iteration-count:1!important}
}

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed; top:0; inset-inline-start:0; height:3px; width:0;
  background:var(--grad-gold); z-index:1000;
  box-shadow:0 0 18px rgba(240,196,100,.7);
}

/* ============ CURSOR GLOW ============ */
.cursor-glow{
  position:fixed; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle,rgba(157,91,230,.16),transparent 62%);
  transform:translate(-50%,-50%); opacity:0; transition:opacity .4s;
  mix-blend-mode:screen;
}
@media (hover:hover) and (min-width:993px){ .cursor-glow.on{opacity:1} }

/* ============ HEADER ============ */
.header{
  position:fixed; inset-inline:0; top:0; z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), height .35s var(--ease), backdrop-filter .4s;
}
.header::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(18,4,42,.55),transparent);
  transition:opacity .4s; pointer-events:none;
}
.header.scrolled{
  height:70px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 8px 34px rgba(37,10,74,.10);
}
.header.scrolled::before{opacity:0}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:22px; width:min(100% - 44px,var(--container)); margin-inline:auto}

.brand{display:grid; align-items:center; z-index:2; line-height:0}
.brand__logo{
  grid-area:1/1; height:38px; width:auto; max-width:190px;
  transition:height .35s var(--ease), opacity .35s var(--ease);
}
.brand__logo--light{filter:drop-shadow(0 3px 12px rgba(0,0,0,.35))}
.brand__logo--dark{opacity:0}
.header.scrolled .brand__logo{height:33px}
.header.scrolled .brand__logo--light{opacity:0}
.header.scrolled .brand__logo--dark{opacity:1}

.nav__list{display:flex; align-items:center; gap:6px}
.nav__link{
  position:relative; display:block; padding:9px 14px; border-radius:99px;
  font-size:.95rem; font-weight:600; color:rgba(255,255,255,.9);
  transition:color .3s, background .3s;
}
.nav__link::after{
  content:''; position:absolute; bottom:4px; inset-inline:50%; height:2px; width:0;
  background:var(--grad-gold); border-radius:2px;
  transition:width .35s var(--ease), inset-inline-start .35s var(--ease);
}
.nav__link:hover::after,.nav__link.is-active::after{width:22px; inset-inline-start:calc(50% - 11px)}
.nav__link:hover{color:var(--gold-400)}
.nav__link.is-active{color:var(--gold-400)}
.header.scrolled .nav__link{color:var(--ink-soft)}
.header.scrolled .nav__link:hover,.header.scrolled .nav__link.is-active{color:var(--violet-700)}

.header__actions{display:flex; align-items:center; gap:14px}

/* burger */
.burger{display:none; width:44px; height:44px; border-radius:12px; position:relative; z-index:2}
.burger span{
  position:absolute; inset-inline:11px; height:2px; border-radius:2px; background:#fff;
  transition:transform .4s var(--ease), opacity .25s, background .3s;
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.header.scrolled .burger span{background:var(--violet-700)}
.burger.open span{background:#fff!important}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============ BUTTONS ============ */
.btn{
  --pad:15px 32px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--pad); border-radius:99px;
  font-weight:700; font-size:1rem; letter-spacing:-.2px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .35s;
  overflow:hidden; white-space:nowrap;
}
.btn__icon{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease)}
.btn:hover .btn__icon{transform:translateX(-4px)}
.btn--sm{--pad:11px 24px; font-size:.92rem}
.btn--block{width:100%}

.btn--gold{background:var(--grad-gold); color:#2A1500; box-shadow:var(--shadow-gold)}
.btn--gold::before{
  content:''; position:absolute; inset:0; translate:-120% 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transition:translate .7s var(--ease);
}
.btn--gold:hover{transform:translateY(-3px); box-shadow:0 18px 44px rgba(224,172,66,.5)}
.btn--gold:hover::before{translate:120% 0}

.btn--ghost{
  color:#fff; border:1.6px solid rgba(255,255,255,.38);
  backdrop-filter:blur(6px); background:rgba(255,255,255,.06);
}
.btn--ghost:hover{background:#fff; color:var(--violet-700); border-color:#fff; transform:translateY(-3px)}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 40px) 0 60px; overflow:hidden; isolation:isolate;
}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__img{width:100%; height:118%; object-fit:cover; will-change:transform; transform:scale(1.06)}

/* ---- hero slider ---- */
.hero__slides{position:absolute; inset:0; will-change:transform}
.hero__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.3s var(--ease);
}
.hero__slide.is-active{opacity:1}
.hero__slide img{
  width:100%; height:118%; object-fit:cover;
  transform:scale(1.06); transition:transform 8s linear;
}
.hero__slide.is-active img{transform:scale(1.14)}

/* slide label */
.hero__label{
  position:absolute; bottom:34px; z-index:4;
  /* line the label up with the content column, not the viewport edge */
  inset-inline-start:max(22px, calc((100vw - var(--container)) / 2));
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 20px; border-radius:99px;
  background:rgba(18,4,42,.55); border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(10px);
  font-size:.82rem; font-weight:600; color:rgba(255,255,255,.9);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hero__label.show{opacity:1; transform:none}
.hero__label b{color:var(--gold-400); font-family:'Cairo',sans-serif; font-weight:700}

/* dot rail + arrows, on the side opposite the copy */
.hero__ctrl{
  position:absolute; inset-inline-end:34px; top:50%; transform:translateY(-50%);
  z-index:5; display:grid; gap:16px; justify-items:center;
}
.hero__dots{display:grid; gap:11px}
.hero__dots button{
  width:9px; height:9px; border-radius:99px; padding:0;
  background:rgba(255,255,255,.35);
  transition:all .4s var(--ease);
}
.hero__dots button:hover{background:rgba(255,255,255,.7)}
.hero__dots button.is-active{height:30px; background:var(--grad-gold)}
.hero__arrows{display:grid; gap:8px; margin-top:6px}
.hero__arrows button{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.30); background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px); transition:all .35s var(--ease);
}
.hero__arrows svg{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.hero__arrows button:hover{background:#fff; border-color:#fff; transform:scale(1.08)}
.hero__arrows button:hover svg{stroke:var(--violet-700)}

@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
  .hero__slide img{transition:none; transform:scale(1.06)}
  .hero__slide.is-active img{transform:scale(1.06)}
}
@media (max-width:992px){
  .hero__ctrl{inset-inline-end:16px; gap:12px}
  .hero__arrows{display:none}
}
@media (max-width:720px){
  .hero__label{bottom:auto; top:calc(var(--nav-h) + 8px); inset-inline-start:22px; font-size:.75rem; padding:6px 14px}
  .hero__ctrl{top:auto; bottom:18px; transform:none; inset-inline:0;
    grid-auto-flow:column; justify-content:center}
  .hero__dots{grid-auto-flow:column; align-items:center}
  .hero__dots button.is-active{height:9px; width:30px}
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to left,rgba(18,4,42,.94) 0%,rgba(27,6,56,.80) 38%,rgba(27,6,56,.35) 70%,rgba(27,6,56,.15) 100%),
    linear-gradient(to top,rgba(18,4,42,.92),transparent 55%);
}
.hero__grid-lines{
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:82px 82px;
  mask-image:radial-gradient(ellipse 80% 70% at 70% 45%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 45%,#000,transparent 78%);
}
.orb{position:absolute; border-radius:50%; filter:blur(90px); z-index:-1; pointer-events:none}
.orb--1{width:520px; height:520px; background:rgba(123,39,201,.42); top:-120px; inset-inline-start:-140px; animation:float1 16s ease-in-out infinite}
.orb--2{width:420px; height:420px; background:rgba(224,172,66,.24); bottom:-140px; inset-inline-end:-100px; animation:float2 20s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,50px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-60px)}}

.hero__content{position:relative; z-index:2; color:#fff; max-width:880px}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 20px; border-radius:99px; margin-bottom:26px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  font-size:.86rem; font-weight:600; letter-spacing:.4px; color:rgba(255,255,255,.94);
}
.eyebrow__dot{width:8px; height:8px; border-radius:50%; background:var(--gold-400); box-shadow:0 0 0 0 rgba(240,196,100,.7); animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(240,196,100,.7)}70%{box-shadow:0 0 0 12px rgba(240,196,100,0)}100%{box-shadow:0 0 0 0 rgba(240,196,100,0)}}

.hero__title{
  font-size:clamp(2.2rem,5.1vw,4.05rem);
  line-height:1.24; margin-bottom:24px; font-weight:900;
  text-shadow:0 12px 50px rgba(0,0,0,.4);
}
.hero__title .line{display:block; overflow:hidden; padding-bottom:.24em; margin-bottom:-.16em}
.hero__title .word{
  display:inline-block; transform:translateY(105%); opacity:0;
  animation:wordUp .95s var(--ease) forwards;
}
.hero__title .line:nth-child(1) .word:nth-child(1){animation-delay:.30s}
.hero__title .line:nth-child(1) .word:nth-child(2){animation-delay:.40s}
.hero__title .line:nth-child(1) .word:nth-child(3){animation-delay:.50s}
.hero__title .line:nth-child(2) .word:nth-child(1){animation-delay:.62s}
.hero__title .line:nth-child(2) .word:nth-child(2){animation-delay:.72s}
@keyframes wordUp{to{transform:translateY(0); opacity:1}}

.hero__text{font-size:clamp(1rem,1.5vw,1.16rem); color:rgba(255,255,255,.86); max-width:610px; margin-bottom:38px}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:60px}

.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  padding-top:30px; border-top:1px solid rgba(255,255,255,.16); max-width:720px;
}
.stat__num{
  font-family:'Cairo',sans-serif; font-weight:900; font-size:clamp(1.7rem,3.2vw,2.5rem);
  line-height:1.1; display:flex; align-items:baseline; gap:4px;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__num i{font-size:.5em; font-style:normal; font-weight:700}
.stat__label{font-size:.88rem; color:rgba(255,255,255,.68); font-weight:500}

.scroll-cue{
  position:absolute; bottom:28px; inset-inline-start:50%; transform:translateX(50%);
  display:grid; justify-items:center; gap:10px; z-index:3;
  color:rgba(255,255,255,.6); font-size:.76rem; letter-spacing:1px;
}
.scroll-cue__line{width:1px; height:52px; background:linear-gradient(to bottom,transparent,var(--gold-400)); position:relative; overflow:hidden}
.scroll-cue__line::after{content:''; position:absolute; top:0; inset-inline:0; height:14px; background:var(--gold-300); animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-16px)}100%{transform:translateY(56px)}}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--violet-700); color:#fff; overflow:hidden; padding:16px 0;
  border-block:1px solid rgba(255,255,255,.12);
}
.marquee__track{
  display:flex; align-items:center; gap:30px; width:max-content;
  animation:marq 34s linear infinite;
  font-family:'Cairo',sans-serif; font-weight:700; font-size:1.05rem;
  white-space:nowrap;
}
.marquee__track .dot{color:var(--gold-400); font-size:.6rem}
@keyframes marq{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ============ SECTION HEADS ============ */
.section__tag{
  display:inline-block; margin-bottom:16px; padding:7px 18px; border-radius:99px;
  background:var(--violet-50); border:1px solid var(--line);
  color:var(--violet-700); font-weight:700; font-size:.84rem; letter-spacing:.6px;
}
.section__title{font-size:clamp(1.9rem,3.9vw,3.1rem); margin-bottom:18px; color:var(--ink)}
.section__lead{color:var(--ink-soft); font-size:1.05rem; max-width:640px}
.section__lead.center{margin-inline:auto}
.section__head{text-align:center; margin-bottom:56px}

/* ============ ABOUT ============ */
.about{background:var(--bg)}
.about__grid{display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(40px,6vw,84px); align-items:center}

.about__visual{position:relative; padding-bottom:70px; padding-inline-start:48px}
.about__img-main{
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:4/4.4;
}
.about__img-main img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.about__visual:hover .about__img-main img{transform:scale(1.06)}
.about__img-sub{
  position:absolute; bottom:0; inset-inline-start:0; width:56%;
  border-radius:var(--r-lg); overflow:hidden; border:7px solid #fff; box-shadow:var(--shadow-md);
  aspect-ratio:4/3;
}
.about__img-sub img{width:100%; height:100%; object-fit:cover}
.about__badge{
  position:absolute; top:26px; inset-inline-end:-14px;
  background:var(--grad-brand); color:#fff; border-radius:var(--r-md);
  padding:18px 22px; text-align:center; box-shadow:var(--shadow-lg);
  animation:bob 5s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.about__badge-num{font-family:'Cairo',sans-serif; font-size:2rem; font-weight:900; line-height:1; color:var(--gold-400)}
.about__badge-txt{font-size:.82rem; opacity:.9; margin-top:4px}

.about__list{margin:28px 0 36px; display:grid; gap:13px}
.about__list li{
  /* NOT flex: a flex li turns every text run and <strong> into its own flex
     item, which splits the sentence into columns. Normal flow + an absolutely
     positioned tick keeps the copy as one continuous line box. */
  position:relative; padding-inline-start:34px;
  color:var(--ink-soft); font-size:1rem;
}
.check{
  position:absolute; inset-inline-start:0; top:7px;
  width:22px; height:22px; border-radius:50%;
  background:var(--grad-brand);
}
/* physical sides on purpose — a tick must not mirror in RTL */
.check::after{
  content:''; position:absolute; left:8px; top:5px;
  width:5px; height:9px; border:2px solid #fff; border-top:0; border-left:0;
  transform:rotate(45deg);
}

.about__pillars{display:grid; gap:10px}
/* icon in its own column, title stacked over the line of copy */
.pillar{display:grid; grid-template-columns:auto 1fr; gap:2px 16px; align-items:center}
.pillar__icon{grid-row:span 2; margin-bottom:0}
.pillar h3{margin-bottom:0; align-self:end}
.pillar p{align-self:start}
.pillar{
  padding:14px 18px; border-radius:var(--r-md); background:var(--bg-alt);
  border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s;
}
.pillar:hover{transform:translateX(4px); box-shadow:var(--shadow-sm); background:#fff}
.pillar__icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:var(--grad-brand); margin-bottom:14px; box-shadow:0 8px 20px rgba(71,2,129,.25);
}
.pillar__icon svg{width:23px; height:23px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.pillar h3{font-size:1.08rem; margin-bottom:7px}
.pillar p{font-size:.9rem; color:var(--ink-soft); line-height:1.7}

/* ============ SERVICES ============ */
.services{background:var(--bg-alt); overflow:hidden}
.services__bg{
  position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:
    radial-gradient(600px 400px at 88% 8%,rgba(157,91,230,.14),transparent 70%),
    radial-gradient(520px 380px at 6% 92%,rgba(224,172,66,.14),transparent 70%);
}
.services__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative}
.svc{
  position:relative; padding:38px 30px 34px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); overflow:hidden; isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), color .45s;
}
.svc::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--grad-brand); transition:opacity .45s var(--ease);
}
.svc::after{
  content:''; position:absolute; inset-inline-end:-60px; top:-60px; width:180px; height:180px; z-index:-1;
  border-radius:50%; background:rgba(224,172,66,.14); transform:scale(.4); opacity:0;
  transition:transform .6s var(--ease), opacity .6s;
}
.svc:hover{transform:translateY(-12px); box-shadow:var(--shadow-lg); color:#fff}
.svc:hover::before{opacity:1}
.svc:hover::after{transform:scale(1); opacity:1}

.svc__no{
  position:absolute; top:22px; inset-inline-end:26px;
  font-family:'Cairo',sans-serif; font-size:2.6rem; font-weight:900;
  color:var(--violet-100); line-height:1; transition:color .45s;
}
.svc:hover .svc__no{color:rgba(255,255,255,.22)}
.svc__icon{
  width:60px; height:60px; border-radius:18px; display:grid; place-items:center; margin-bottom:20px;
  background:var(--violet-50); border:1px solid var(--line);
  transition:background .45s, border-color .45s, transform .45s var(--ease);
}
.svc__icon svg{width:28px; height:28px; fill:none; stroke:var(--violet-700); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .45s}
.svc:hover .svc__icon{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); transform:rotate(-6deg) scale(1.06)}
.svc:hover .svc__icon svg{stroke:var(--gold-400)}
.svc__title{font-size:1.22rem; margin-bottom:11px}
.svc__text{font-size:.95rem; color:var(--ink-soft); line-height:1.8; transition:color .45s}
.svc:hover .svc__text{color:rgba(255,255,255,.85)}
.svc__more{
  display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-weight:700; font-size:.9rem; color:var(--violet-700);
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), color .4s;
}
.svc__more i{font-style:normal; transition:transform .35s var(--ease)}
.svc:hover .svc__more{opacity:1; transform:none; color:var(--gold-400)}
.svc:hover .svc__more i{transform:translateX(-5px)}

/* ============ PROJECTS ============ */
.projects__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  grid-auto-rows:270px; grid-auto-flow:dense;
}
.proj{
  position:relative; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), opacity .45s, filter .45s;
}
.proj--wide{grid-column:span 2}
.proj img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s}
.proj__overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(18,4,42,.92) 0%,rgba(27,6,56,.45) 42%,rgba(27,6,56,.05) 75%);
  transition:opacity .5s;
}
.proj:hover{transform:translateY(-10px); box-shadow:var(--shadow-lg)}
.proj:hover img{transform:scale(1.09)}
.proj__body{position:absolute; inset-inline:26px; bottom:24px; color:#fff; z-index:2}
.proj__cat{
  display:inline-block; margin-bottom:10px; padding:5px 14px; border-radius:99px;
  background:rgba(240,196,100,.92); color:#2A1500; font-size:.76rem; font-weight:800;
}
.proj__title{font-size:1.25rem; margin-bottom:5px}
.proj__meta{font-size:.87rem; color:rgba(255,255,255,.72);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease), opacity .4s var(--ease);
}
.proj:hover .proj__meta{max-height:60px; opacity:1}
.proj__zoom{
  position:absolute; top:20px; inset-inline-end:20px; z-index:3;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px); display:grid; place-items:center;
  opacity:0; transform:scale(.7) rotate(-30deg);
  transition:all .45s var(--ease);
}
.proj__zoom svg{width:19px; height:19px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round}
.proj:hover .proj__zoom{opacity:1; transform:none}
.proj__zoom:hover{background:var(--gold-400); border-color:var(--gold-400)}
.proj__zoom:hover svg{stroke:#2A1500}

.proj.hide{opacity:0; transform:scale(.9); pointer-events:none; position:absolute; visibility:hidden}

/* ============ WHY ============ */
.why{background:var(--bg-alt)}
.why__grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,5vw,72px); align-items:center}
.why__head .btn{margin-top:30px}
.why__items{display:grid; gap:16px}
.why__item{
  display:flex; gap:20px; align-items:flex-start;
  padding:26px 26px; border-radius:var(--r-md); background:#fff;
  border:1px solid var(--line); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.why__item::before{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:var(--grad-gold); transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.why__item:hover{transform:translateX(-10px); box-shadow:var(--shadow-md)}
.why__item:hover::before{transform:scaleY(1)}
.why__no{
  flex:0 0 auto; font-family:'Cairo',sans-serif; font-weight:900; font-size:1.6rem;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.why__item h3{font-size:1.1rem; margin-bottom:6px}
.why__item p{font-size:.94rem; color:var(--ink-soft)}

/* ============ COUNTER BAND ============ */
.band{position:relative; padding:clamp(70px,8vw,110px) 0; overflow:hidden; isolation:isolate}
.band__media{position:absolute; inset:0; z-index:-1}
.band__media img{width:100%; height:100%; object-fit:cover; transform:scale(1.05)}
.band__scrim{position:absolute; inset:0; background:linear-gradient(120deg,rgba(18,4,42,.95),rgba(71,2,129,.86))}
/* ============ PROCESS / TIMELINE ============ */
/* ============ CONTACT ============ */
.contact__grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(38px,5vw,72px); align-items:start}
.contact__list{margin:32px 0; display:grid; gap:18px}
.contact__list li{display:flex; gap:16px; align-items:center}
.contact__ic{
  flex:0 0 50px; width:50px; height:50px; border-radius:16px; display:grid; place-items:center;
  background:var(--violet-50); border:1px solid var(--line); transition:all .4s var(--ease);
}
.contact__ic svg{width:22px; height:22px; fill:none; stroke:var(--violet-700); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .4s}
.contact__list li:hover .contact__ic{background:var(--grad-brand); border-color:transparent; transform:rotate(-8deg)}
.contact__list li:hover .contact__ic svg{stroke:#fff}
.contact__list strong{display:block; font-family:'Cairo',sans-serif; font-size:.96rem}
.contact__list span,.contact__list a{font-size:.93rem; color:var(--ink-soft)}
.contact__list a:hover{color:var(--violet-700)}

.socials{display:flex; gap:11px}
.socials a{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  border:1.5px solid var(--line); transition:all .35s var(--ease);
}
.socials svg{width:19px; height:19px; fill:none; stroke:var(--violet-700); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s, fill .35s}
.socials svg.ic-fill{fill:var(--violet-700); stroke:none; width:17px; height:17px}
.socials a:hover{background:var(--grad-brand); border-color:transparent; transform:translateY(-4px)}
.socials a:hover svg{stroke:#fff}
.socials a:hover svg.ic-fill{fill:#fff; stroke:none}

/* form */
.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(28px,4vw,44px); box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.form::before{content:''; position:absolute; top:0; inset-inline:0; height:5px; background:var(--grad-brand)}
.form__title{font-size:1.5rem; margin-bottom:26px}
.field{position:relative; margin-bottom:18px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field input,.field select,.field textarea{
  width:100%; padding:18px 18px 8px; border-radius:var(--r-sm);
  border:1.6px solid var(--line); background:var(--bg-alt); color:var(--ink);
  transition:border-color .3s, background .3s, box-shadow .3s; outline:none; resize:vertical;
}
.field textarea{padding-top:22px}
.field select{padding-top:22px; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A4C74' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 16px center; background-size:18px;
}
.field label{
  position:absolute; inset-inline-start:18px; top:15px;
  font-size:.97rem; color:var(--ink-soft); pointer-events:none;
  transition:transform .28s var(--ease), font-size .28s var(--ease), color .28s;
  transform-origin:inline-start top;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--violet-500); background:#fff; box-shadow:0 0 0 4px rgba(123,39,201,.10);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-9px); font-size:.74rem; color:var(--violet-700);
}
.field .label--static{top:8px; font-size:.74rem; color:var(--violet-700)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#E0455B; box-shadow:0 0 0 4px rgba(224,69,91,.10)}

.form__note{font-size:.79rem; color:var(--ink-soft); text-align:center; margin-top:14px; line-height:1.7}
.form__success{
  display:none; align-items:center; gap:10px; margin-top:16px;
  padding:14px 18px; border-radius:var(--r-sm);
  background:rgba(46,168,113,.10); border:1px solid rgba(46,168,113,.3);
  color:#1E7A50; font-weight:600; font-size:.93rem;
}
.form__success.show{display:flex; animation:popIn .5s var(--ease)}
.form__success svg{width:20px; height:20px; fill:none; stroke:#2EA871; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; flex:0 0 20px}
@keyframes popIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* ============ FOOTER ============ */
.footer{background:var(--violet-950); color:rgba(255,255,255,.72); padding:70px 0 0; position:relative; overflow:hidden}
.footer::before{
  content:''; position:absolute; top:-160px; inset-inline-start:-100px; width:460px; height:460px;
  border-radius:50%; background:rgba(123,39,201,.28); filter:blur(110px);
}
.footer__grid{
  position:relative; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:40px;
  padding-bottom:48px;
}
.footer__logo{height:44px; width:auto; margin-bottom:18px}
.footer__brand p{font-size:.94rem; line-height:1.9; max-width:330px}
.footer__addr{
  display:flex; gap:11px; align-items:flex-start; margin-top:18px;
  font-style:normal; font-size:.88rem; line-height:1.8; color:rgba(255,255,255,.62);
  max-width:330px;
}
.footer__addr svg{
  flex:0 0 17px; width:17px; height:17px; margin-top:5px;
  fill:none; stroke:var(--gold-400); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
/* the span is a flex item, so dir=ltr would left-align it against an
   otherwise right-aligned column — realign it while keeping LTR reading order */
.footer__addr span{text-align:right}
/* Latin address inside an RTL block: dir=ltr on the inline span fixes the reading
   order, while the block stays right-aligned like the Arabic label above it. */
.addr{line-height:1.75}
.footer__col h4{font-family:'Cairo',sans-serif; color:#fff; font-size:1.02rem; margin-bottom:18px; position:relative; padding-bottom:12px}
.footer__col h4::after{content:''; position:absolute; bottom:0; inset-inline-start:0; width:32px; height:2px; background:var(--grad-gold); border-radius:2px}
.footer__col ul{display:grid; gap:11px}
.footer__col a{font-size:.94rem; transition:color .3s, transform .3s var(--ease); display:inline-block}
.footer__col a:hover{color:var(--gold-400); transform:translateX(-5px)}
.footer__news p{font-size:.9rem; margin-bottom:16px}
.news{display:flex; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:99px; padding:5px 5px 5px 5px}
.news input{flex:1; background:none; border:0; outline:none; color:#fff; padding:10px 16px; font-size:.9rem}
.news input::placeholder{color:rgba(255,255,255,.45)}
.news button{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-gold); transition:transform .35s var(--ease)
}
.news button svg{width:18px; height:18px; fill:none; stroke:#2A1500; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.news button:hover{transform:scale(1.1)}
.news__ok{display:none; margin-top:10px; font-size:.85rem; color:var(--gold-400)}
.news__ok.show{display:block; animation:popIn .5s var(--ease)}

.footer__bottom{
  position:relative; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  padding:22px 0; border-top:1px solid rgba(255,255,255,.10); font-size:.85rem;
}
.footer__legal{color:rgba(255,255,255,.45)}

/* ============ FLOATING ACTIONS ============ */
.to-top,.wa-float{
  position:fixed; z-index:800; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  transition:opacity .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.to-top{
  inset-inline-start:26px; bottom:26px; background:var(--grad-brand);
  box-shadow:0 12px 30px rgba(71,2,129,.35);
  opacity:0; visibility:hidden; transform:translateY(20px) scale(.8);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.to-top.show{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear 0s;
}
.to-top:hover{transform:translateY(-4px) scale(1.06)}
.to-top svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

.wa-float{
  inset-inline-end:26px; bottom:26px; background:#25D366;
  box-shadow:0 12px 30px rgba(37,211,102,.4);
}
.wa-float::after{
  content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366;
  animation:waPing 2.4s var(--ease) infinite;
}
@keyframes waPing{0%{transform:scale(1); opacity:.7}100%{transform:scale(1.7); opacity:0}}
.wa-float svg{width:24px; height:24px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.wa-float:hover{transform:scale(1.1)}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:34px;
  background:rgba(12,3,28,.94); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  /* visibility flips instantly on open (so the close button is focusable at once)
     and only after the fade on close */
  transition:opacity .45s var(--ease), visibility 0s linear .45s;
}
.lightbox.open{opacity:1; visibility:visible; transition:opacity .45s var(--ease), visibility 0s linear 0s}
.lightbox__fig{margin:0; max-width:min(1100px,92vw); transform:scale(.94); transition:transform .5s var(--ease)}
.lightbox.open .lightbox__fig{transform:none}
.lightbox__fig img{width:100%; max-height:76vh; object-fit:contain; border-radius:var(--r-md); box-shadow:var(--shadow-lg)}
.lightbox__fig figcaption{margin-top:16px; text-align:center; color:#fff; font-family:'Cairo',sans-serif; font-size:1.05rem}
.lightbox__close{
  position:absolute; top:24px; inset-inline-start:24px; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); display:grid; place-items:center;
  /* never `all` here: it would transition the visibility inherited from .lightbox
     and leave the button unfocusable for the length of the transition */
  transition:background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.lightbox__close svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round}
.lightbox__close:hover{background:var(--gold-400); transform:rotate(90deg)}
.lightbox__close:hover svg{stroke:#2A1500}

body.no-scroll{overflow:hidden}


/* ============ COMPACT VALUE CHIPS (in About) ============ */
.vchips{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.vchips__label{
  display:block; margin-bottom:12px;
  font-size:.78rem; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--violet-400);
}
.vchips ul{display:flex; flex-wrap:wrap; gap:8px}
.vchips li{
  padding:7px 16px; border-radius:99px; font-size:.86rem; font-weight:600;
  background:var(--violet-50); border:1px solid var(--line); color:var(--violet-700);
  transition:background .3s var(--ease), color .3s, border-color .3s;
}
.vchips li:hover{background:var(--grad-brand); color:#fff; border-color:transparent}

/* ============ SEGMENTS (04) ============ */
.seg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.seg{
  padding:32px 28px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.seg:hover{transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:transparent}
.seg__head{display:flex; gap:16px; align-items:flex-start; margin-bottom:20px}
.seg__icon{
  flex:0 0 54px; width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background:var(--grad-brand); box-shadow:0 10px 24px rgba(71,2,129,.24);
}
.seg__icon svg{width:26px; height:26px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.seg__no{
  display:block; font-family:'Cairo',sans-serif; font-weight:900; font-size:.85rem;
  color:var(--violet-400); letter-spacing:1px;
}
.seg__head h3{font-size:1.12rem; margin:2px 0 3px; line-height:1.45}
.seg__head em{font-style:normal; font-size:.78rem; color:var(--ink-soft); letter-spacing:.3px}
.seg__list{display:grid; gap:12px}
.seg__list li{
  position:relative; padding-inline-start:20px; font-size:.93rem; color:var(--ink-soft); line-height:1.75;
}
.seg__list li::before{
  content:''; position:absolute; inset-inline-start:0; top:11px;
  width:8px; height:8px; border-radius:50%; background:var(--grad-gold);
}

/* ============ TRACK RECORD NOTE ============ */
.track-note{
  display:flex; gap:14px; align-items:flex-start; margin-top:32px;
  padding:22px 26px; border-radius:var(--r-md);
  background:var(--violet-50); border:1px solid var(--line);
}
.track-note p{font-size:.98rem; color:var(--ink-soft); line-height:1.8}
.track-note strong{color:var(--violet-700)}

/* ============ SIX-STEP PROCESS (05) ============ */
.steps6{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.step6{
  position:relative; padding:32px 26px 28px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.step6::before{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:var(--grad-brand); transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--ease);
}
.step6:hover{transform:translateY(-8px); box-shadow:var(--shadow-md)}
.step6:hover::before{transform:scaleY(1)}
.step6__n{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:var(--violet-50); border:1px solid var(--line); margin-bottom:16px;
  font-family:'Cairo',sans-serif; font-weight:900; font-size:1.1rem; color:var(--violet-700);
  transition:background .45s, color .45s, border-color .45s;
}
.step6:hover .step6__n{background:var(--grad-brand); color:#fff; border-color:transparent}
.step6 h3{font-size:1.08rem; margin-bottom:9px; line-height:1.5}
.step6 p{font-size:.92rem; color:var(--ink-soft)}

/* ============ DIFFERENTIATORS BAND (06) ============ */
.band .section__head{margin-bottom:40px}
.band .section__tag{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.20); color:var(--gold-400)}
.diffs{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.diff{
  display:flex; gap:18px; align-items:flex-start;
  padding:24px 24px; border-radius:var(--r-md);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  transition:transform .4s var(--ease), background .4s;
}
.diff:hover{transform:translateY(-6px); background:rgba(255,255,255,.12)}
.diff b{
  flex:0 0 auto; font-family:'Cairo',sans-serif; font-weight:900; font-size:1.3rem; color:var(--gold-400);
}
.diff div{color:rgba(255,255,255,.78); font-size:.93rem; line-height:1.75}
.diff strong{display:block; color:#fff; font-family:'Cairo',sans-serif; font-size:1.02rem; margin-bottom:4px}

/* ============ GOVERNANCE (07) ============ */
.gov__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(38px,5vw,72px); align-items:center}
.licenses{
  padding:38px 34px; border-radius:var(--r-xl);
  background:var(--grad-brand); color:#fff; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.licenses::after{
  content:''; position:absolute; inset-inline-end:-70px; top:-70px; width:220px; height:220px;
  border-radius:50%; background:rgba(240,196,100,.16);
}
.licenses h3{font-size:1.25rem; margin-bottom:22px; position:relative}
.lic{
  position:relative; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 0; border-bottom:1px solid rgba(255,255,255,.18);
}
.lic__label{font-size:.95rem; color:rgba(255,255,255,.85)}
.lic__num{
  font-family:'Cairo',sans-serif; font-weight:900; font-size:1.25rem;
  color:var(--gold-400); letter-spacing:.5px;
}
.lic__note{position:relative; margin-top:18px; font-size:.83rem; color:rgba(255,255,255,.65); line-height:1.75}

/* ============ MISC ADDITIONS ============ */
.about__badge-num{font-size:1.45rem}
.social-handle{
  display:inline-flex; align-items:center; padding:0 16px; height:44px; border-radius:14px;
  border:1.5px solid var(--line); font-family:'Cairo',sans-serif; font-weight:700;
  font-size:.9rem; color:var(--violet-700);
}
.footer__contact{display:grid; gap:10px}
.footer__contact a{font-size:.93rem; transition:color .3s}
.footer__contact a:hover{color:var(--gold-400)}

/* ============ RESPONSIVE ADDITIONS ============ */
@media (max-width:1100px){
  .seg-grid,.steps6{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:992px){
  .gov__grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .seg-grid,.steps6{grid-template-columns:1fr}
  .lic{flex-direction:column; align-items:flex-start; gap:4px}
}





/* ============ PLATFORM SECTION ============ */
.platform{background:var(--violet-950); color:#fff; overflow:hidden; position:relative}
.platform::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(700px 460px at 82% 6%,rgba(157,91,230,.30),transparent 70%),
    radial-gradient(560px 400px at 8% 90%,rgba(224,172,66,.14),transparent 70%);
}
.platform .container{position:relative; z-index:2}
.platform .section__title{color:#fff}
.platform .section__tag{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.20); color:var(--gold-400)}
.platform .section__lead{color:rgba(255,255,255,.76)}

/* browser chrome around a screenshot */
.shot{
  border-radius:var(--r-lg); overflow:hidden; background:#1B0638;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
.shot__bar{
  direction:ltr; /* real window controls never mirror */
  display:flex; align-items:center; gap:7px; padding:11px 16px;
  background:rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.10);
}
.shot__bar i{width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.24)}
.shot__bar i:first-child{background:#FF5F57}
.shot__bar i:nth-child(2){background:#FEBC2E}
.shot__bar i:nth-child(3){background:#28C840}
.shot__url{
  flex:1; margin-inline-start:12px; padding:5px 16px; border-radius:99px;
  background:rgba(0,0,0,.28); font-size:.76rem; color:rgba(255,255,255,.55);
  text-align:center; letter-spacing:.4px;
}
.shot img{width:100%; height:auto; display:block}

.platform__hero{margin-bottom:44px}

/* module list */
.mods{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:44px}
.mod{
  padding:24px 20px; border-radius:var(--r-md);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  transition:transform .4s var(--ease), background .4s;
}
.mod:hover{transform:translateY(-8px); background:rgba(255,255,255,.11)}
.mod__ic{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:var(--grad-brand); margin-bottom:14px;
}
.mod__ic svg{width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.mod h3{font-size:1.02rem; margin-bottom:7px; color:#fff}
.mod p{font-size:.87rem; color:rgba(255,255,255,.7); line-height:1.72}

@media (max-width:1100px){
  .mods{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
}
@media (max-width:720px){
  .mods{grid-template-columns:1fr 1fr; gap:12px}
  .mod{padding:18px 16px}
  .shot__url{display:none}
}

/* ============ LANGUAGE SWITCH ============ */
.lang-switch{
  display:grid; place-items:center; min-width:40px; height:40px; padding:0 12px;
  border-radius:99px; border:1.5px solid rgba(255,255,255,.38);
  font-family:'Cairo',sans-serif; font-weight:700; font-size:.92rem; line-height:1;
  color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(6px);
  transition:background .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease);
}
.lang-switch:hover{background:#fff; color:var(--violet-700); border-color:#fff; transform:translateY(-2px)}
.header.scrolled .lang-switch{border-color:var(--line); color:var(--violet-700); background:var(--violet-50)}
.header.scrolled .lang-switch:hover{background:var(--grad-brand); color:#fff; border-color:transparent}
/* The header switcher stays visible at every width, so the in-menu duplicate
   is hidden — it would only add a second copy to the tab order. */
.nav__lang{display:none}
@media (max-width:992px){ .header__actions .lang-switch{display:grid} }

/* =========================================================
   LTR OVERRIDES — everything else uses logical properties and
   flips on its own; these are the genuinely physical bits.
   ========================================================= */
[dir="ltr"] .hero__scrim{
  background:
    linear-gradient(to right,rgba(18,4,42,.94) 0%,rgba(27,6,56,.80) 38%,rgba(27,6,56,.35) 70%,rgba(27,6,56,.15) 100%),
    linear-gradient(to top,rgba(18,4,42,.92),transparent 55%);
}
[dir="ltr"] .hero__grid-lines{
  mask-image:radial-gradient(ellipse 80% 70% at 30% 45%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 45%,#000,transparent 78%);
}
[dir="ltr"] .btn:hover .btn__icon{transform:translateX(4px)}
[dir="ltr"] .svc:hover .svc__more i{transform:translateX(5px)}
[dir="ltr"] .footer__col a:hover{transform:translateX(5px)}
[dir="ltr"] .marquee__track{animation-name:marqLtr}
@keyframes marqLtr{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- English typography: Outfit (display) + Inter (text) ----
   Cairo is Arabic-first; its Latin is serviceable but generic.
   Outfit mirrors the geometry of the PTC wordmark, Inter carries the body copy. */
[dir="ltr"] body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.65;
  letter-spacing:-.01em;
}
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] h4,
[dir="ltr"] .stat__num,[dir="ltr"] .hero__label b,[dir="ltr"] .lic__num,
[dir="ltr"] .step6__n,[dir="ltr"] .seg__no,[dir="ltr"] .svc__no,[dir="ltr"] .diff b{
  font-family:'Outfit',system-ui,sans-serif;
}
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] h4{
  line-height:1.2; letter-spacing:-.022em; font-weight:700;
}
[dir="ltr"] .hero__title{line-height:1.05; letter-spacing:-.03em; font-weight:800}
[dir="ltr"] .section__title{font-weight:700}
[dir="ltr"] .grad{padding-block:0}
[dir="ltr"] .eyebrow{letter-spacing:.9px; font-weight:500}
[dir="ltr"] .section__tag{letter-spacing:1px; text-transform:uppercase; font-weight:600}
[dir="ltr"] .btn{font-weight:600; letter-spacing:-.005em}
[dir="ltr"] .nav__link{font-weight:500}
[dir="ltr"] .marquee__track{font-family:'Outfit',sans-serif; font-weight:600}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr; gap:34px}
}

@media (max-width:992px){
  :root{--nav-h:72px}
  .nav{
    position:fixed; inset:0; z-index:1;
    background:linear-gradient(160deg,var(--violet-900),var(--violet-800));
    display:grid; place-items:center;
    clip-path:circle(0% at calc(100% - 40px) 40px);
    /* visibility keeps the clipped links out of the tab order */
    visibility:hidden;
    transition:clip-path .7s var(--ease), visibility 0s linear .7s;
  }
  .nav.open{clip-path:circle(150% at calc(100% - 40px) 40px); visibility:visible; transition-delay:0s,0s}
  .nav__list{flex-direction:column; gap:6px}
  .nav__link{font-size:1.3rem; padding:12px 26px; color:#fff!important; opacity:0; transform:translateY(18px)}
  .nav.open .nav__link{animation:navIn .5s var(--ease) forwards}
  .nav.open li:nth-child(1) .nav__link{animation-delay:.16s}
  .nav.open li:nth-child(2) .nav__link{animation-delay:.22s}
  .nav.open li:nth-child(3) .nav__link{animation-delay:.28s}
  .nav.open li:nth-child(4) .nav__link{animation-delay:.34s}
  .nav.open li:nth-child(5) .nav__link{animation-delay:.40s}
  .nav.open li:nth-child(6) .nav__link{animation-delay:.46s}
  .nav.open li:nth-child(7) .nav__link{animation-delay:.52s}
  @keyframes navIn{to{opacity:1; transform:none}}
  .burger{display:block}
  .header__actions .btn{display:none}

  .about__grid,.why__grid,.contact__grid{grid-template-columns:1fr}
  .about__visual{max-width:520px; margin-inline:auto; order:-1}
  .timeline{grid-template-columns:1fr 1fr; gap:70px 20px; padding-top:70px}
  .timeline__line{display:none}
  .projects__grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:240px}
  .proj--wide{grid-column:span 2}
  .band__grid{grid-template-columns:1fr 1fr; gap:34px 20px}
  .band__item:nth-child(2){border-inline-end:0}
}

@media (max-width:720px){
  body{font-size:16px}
  .hero{min-height:auto; padding:calc(var(--nav-h) + 66px) 0 78px}
  .hero__stats{grid-template-columns:1fr 1fr; gap:22px 14px}
  .hero__cta{margin-bottom:44px}
  .hero__cta .btn{flex:1; min-width:180px}
  .scroll-cue{display:none}
  .services__grid{grid-template-columns:1fr}
  .projects__grid{grid-template-columns:1fr; grid-auto-rows:250px}
  .proj--wide{grid-column:span 1}
  .about__pillars{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr; gap:64px}
  .footer__grid{grid-template-columns:1fr; gap:32px}
  .about__visual{padding-inline-start:0; padding-bottom:120px}
  .about__img-sub{width:64%}
  .about__badge{inset-inline-end:0; top:14px}
  .testi__wrap::before{display:none}
  .to-top{inset-inline-start:16px; bottom:16px; width:46px; height:46px}
  .wa-float{inset-inline-end:16px; bottom:16px; width:50px; height:50px}
  .footer__bottom{flex-direction:column; text-align:center; align-items:center}
}

@media (max-width:420px){
  .filters{gap:7px}
  .filter{padding:9px 16px; font-size:.86rem}
  .btn{--pad:14px 24px; font-size:.95rem}
}