/* ===== SELF-HOSTED FONTS ===== */
/* ═══════════════════════════════════════════════════════════════════════
   Self-hosted brand fonts.

   Served from our own origin instead of fonts.googleapis.com +
   fonts.gstatic.com. That removes two DNS lookups, two TLS handshakes and a
   render-blocking stylesheet from the critical path, and — because the two
   faces the hero needs are preloaded from the same origin — the swap lands
   before first paint instead of reflowing the page a second or two in, which
   was the entire source of the layout shift on a cold visit.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Tajawal';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/tajawal-400-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Tajawal';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/tajawal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Tajawal';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/tajawal-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/tajawal-800-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Tajawal';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/tajawal-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════
   DIGITAL ERA UAE — 3D scroll experience
   Brand: ERA cyan #00AEDB · cyan #00AEDB · magenta #EC1280 · gold #FBB117
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ERA logo colours — sampled from the official mark */
  --era-cyan:#00AEDB;
  --era-amber:#FBB117;
  --era-magenta:#EC1280;

  /* no dark navy anywhere - the ink is a deep teal from the cyan family */
  --ink-deep:#0B3A4A;
  --ink-2:#14556B;
  --tint-cyan:#E9F6FB;
  --tint-amber:#FEF5E6;
  --tint-magenta:#FDEAF3;
  --cyan:#00AEDB;
  --cyan-soft:#7FD9EE;
  --magenta:#EC1280;
  --gold:#FBB117;
  --cream:#F7F3EC;
  --cream-2:#F0EADF;
  --ink:#0B3A4A;
  --muted:#5E7480;
  --muted-dark:#6E8794;
  --white:#fff;

  /* cyan → amber → magenta: the logo sweep, and never through purple */
  --grad:linear-gradient(90deg,#00AEDB 0%,#FBB117 52%,#EC1280 100%);
  --grad-soft:linear-gradient(120deg,rgba(0,174,219,.14),rgba(251,177,23,.14));

  --font-en:'Plus Jakarta Sans',system-ui,sans-serif;
  /* Plus Jakarta is deliberately NOT a fallback here: a single glyph missing
     from Tajawal (a bullet, an arrow) was enough to pull down 54KB of an
     English webfont on the Arabic page. The system font covers those. */
  --font-ar:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-tech:'Plus Jakarta Sans','Tajawal',system-ui,sans-serif;

  --ease:cubic-bezier(.645,.045,.355,1);
  --ease-soft:cubic-bezier(.6,0,.4,1);

  --maxw:1240px;
  --pad:clamp(18px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--font-ar);
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] body{font-family:var(--font-en)}

/* On the Arabic page the Latin bits (domains, prices, labels) are set in
   Tajawal's own Latin, so Plus Jakarta's three Latin faces — 80KB — are never
   requested. Only the 800 weight loads, for the ERA wordmark. */
html[lang="ar"]{--font-tech:'Tajawal',system-ui,-apple-system,sans-serif}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
svg path,svg circle,svg line{vector-effect:non-scaling-stroke}

body.is-locked{overflow:hidden;height:100vh}

/* ══════════════════ PRELOADER ══════════════════ */
#loader{
  position:fixed;inset:0;z-index:4000;
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{text-align:center;color:var(--ink)}
.loader-mark svg{overflow:visible}
.lm-track{fill:none;stroke:rgba(11,58,74,.1);stroke-width:5}
.lm-fill{
  fill:none;stroke:var(--cyan);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:314;stroke-dashoffset:314;
  transform:rotate(-90deg);transform-origin:60px 60px;
  transition:stroke-dashoffset .35s linear;
  filter:drop-shadow(0 0 8px rgba(0,174,219,.7));
}
.lm-text{
  fill:var(--ink);font-family:var(--font-en);font-size:24px;font-weight:800;
  text-anchor:middle;dominant-baseline:middle;letter-spacing:3px;
}
.loader-label{margin-top:22px;font-size:14px;letter-spacing:.5px;color:var(--muted)}
.loader-pct{margin-top:6px;font-family:var(--font-tech);font-size:28px;font-weight:800;
  color:var(--era-cyan);letter-spacing:.5px}

/* ══════════════════ CUSTOM CURSOR ══════════════════ */
#hover-icon{
  position:fixed;top:0;left:0;z-index:3500;
  width:46px;height:46px;border-radius:50%;
  border:2px solid var(--cyan);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;opacity:0;
  display:flex;align-items:center;justify-content:center;
  transition:width .2s,height .2s,border-color .2s,opacity .2s,background-color .2s;
  mix-blend-mode:normal;
}
#hover-icon span{
  width:6px;height:6px;border-radius:50%;background:var(--cyan);
  transition:.2s;
}
#hover-icon.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#hover-icon.big{width:74px;height:74px;border-color:var(--magenta);background:rgba(236,18,128,.1)}
#hover-icon.big span{background:var(--magenta);width:8px;height:8px}
@media (hover:none),(max-width:900px){#hover-icon{display:none}}

/* ══════════════════ 3D CANVAS ══════════════════ */
#world{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  z-index:0;outline:none;pointer-events:none;
}
#world-veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 10%,transparent 45%,rgba(11,58,74,.06) 100%);
  opacity:0;transition:opacity .8s var(--ease);
}
body.veil-on #world-veil{opacity:1}

/* ══════════════════ WAVE TRANSITION ══════════════════ */
#transition-container{
  position:fixed;z-index:2500;
  left:-30%;width:160vw;
  bottom:-320%;
  transform:rotate(-14deg);
  pointer-events:none;
  visibility:hidden;
  will-change:bottom;
}
html[dir="ltr"] #transition-container{transform:rotate(14deg)}
/* three hard bands, not a blend — the mark has three solid colours, and a
   cyan→magenta ramp turns muddy through the middle */
#transition-body{
  height:130vh;
  background:linear-gradient(180deg,
    #00AEDB 0 33.34%, #FBB117 33.34% 66.67%, #EC1280 66.67% 100%);
}
#transition-wave-top,#transition-wave-bottom{
  display:block;width:100%;height:90px;margin-bottom:-2px;
}
#transition-wave-bottom{margin:-2px 0 0}
#transition-wave-top path,#transition-wave-bottom path{fill:#00AEDB}
#transition-wave-bottom path{fill:#EC1280}
#transition-container.sweep{
  visibility:visible;
  animation:waveSweep 1.15s var(--ease-soft) forwards;
}
@keyframes waveSweep{
  0%  {bottom:-320%}
  42% {bottom:-10%}
  58% {bottom:-10%}
  100%{bottom:175%}
}

/* ══════════════════ HEADER ══════════════════ */
#header-container{
  position:fixed;top:0;inset-inline:0;z-index:2000;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);
  transition:transform .45s var(--ease),background-color .4s,backdrop-filter .4s;
}
body.head-hide #header-container{transform:translateY(-130%)}
body.head-solid #header-container{
  background:rgba(246,241,232,.82);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(11,58,74,.07);
}

.brand{display:flex;align-items:center;gap:10px}
.brand-mark{display:grid;place-items:center;filter:drop-shadow(0 6px 14px rgba(11,58,74,.18))}
.era-glyph{
  fill:#fff;font-family:var(--font-en);font-weight:800;font-size:96px;
  text-anchor:middle;dominant-baseline:central;
}
/* On the Arabic page the wordmark is set in Tajawal's own Latin, which is
   already loaded. Otherwise four SVG letters would pull in the whole English
   family for nothing. Plus Jakarta is then only fetched on /en. */
html[lang="ar"] .era-glyph,
html[lang="ar"] .lm-text{font-family:'Tajawal',system-ui,sans-serif}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-size:16px;font-weight:800;letter-spacing:.2px}
.brand-text i{font-style:normal;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  font-family:var(--font-tech);color:var(--muted)}

.header-tools{display:flex;align-items:center;gap:9px}
.pill-btn{
  height:40px;min-width:40px;padding:0 14px;border-radius:999px;
  display:grid;place-items:center;
  /* always opaque: 3D props drift behind the header and would otherwise
     swallow the controls before the solid header state kicks in */
  background:rgba(255,255,255,.88);
  box-shadow:0 4px 14px -8px rgba(11,58,74,.45);
  color:var(--ink);
  font-family:var(--font-tech);font-size:12.5px;font-weight:700;letter-spacing:1px;
  transition:background-color .25s,color .25s,transform .25s;
}
.pill-btn.icon-btn{padding:0;width:40px}
.pill-btn:hover{transform:translateY(-2px);background:#fff}

.pill-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill-btn svg .snd-on{fill:currentColor;stroke:none}
.pill-btn svg .snd-off{display:none}
body.muted .pill-btn svg .snd-wave{display:none}
body.muted .pill-btn svg .snd-off{display:block}

.burger{display:grid;gap:4px}
.burger i{display:block;width:17px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s}
body.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ══════════════════ FULL MENU ══════════════════ */
#full-menu{
  position:fixed;inset:0;z-index:1900;
  background:linear-gradient(150deg,#FFFFFF,var(--tint-cyan) 55%,var(--tint-amber));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:28px;
  clip-path:circle(0% at calc(100% - 60px) 40px);
  transition:clip-path .8s var(--ease);
  pointer-events:none;
}
html[dir="ltr"] #full-menu{clip-path:circle(0% at calc(100% - 60px) 40px)}
body.menu-open #full-menu{clip-path:circle(150% at calc(100% - 60px) 40px);pointer-events:all}
#full-menu ul{list-style:none;margin:0;padding:0;text-align:center}
#full-menu li{overflow:hidden}
#full-menu li a{
  display:flex;align-items:baseline;gap:14px;justify-content:center;
  padding:7px 0;color:var(--ink);
  font-size:clamp(28px,6vw,54px);font-weight:800;letter-spacing:-.5px;
  transform:translateY(110%);opacity:0;
  transition:transform .7s var(--ease),opacity .5s,color .3s;
}
body.menu-open #full-menu li a{transform:translateY(0);opacity:1}
body.menu-open #full-menu li:nth-child(1) a{transition-delay:.12s}
body.menu-open #full-menu li:nth-child(2) a{transition-delay:.18s}
body.menu-open #full-menu li:nth-child(3) a{transition-delay:.24s}
body.menu-open #full-menu li:nth-child(4) a{transition-delay:.30s}
body.menu-open #full-menu li:nth-child(5) a{transition-delay:.36s}
body.menu-open #full-menu li:nth-child(6) a{transition-delay:.42s}
#full-menu li a em{
  font-style:normal;font-family:var(--font-tech);font-size:13px;
  color:var(--cyan);opacity:.8;letter-spacing:2px;
}
#full-menu li a:hover{color:var(--era-magenta)}
.menu-foot{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;
  color:var(--muted);font-size:14px;font-family:var(--font-tech);
  opacity:0;transition:opacity .5s .55s}
body.menu-open .menu-foot{opacity:1}
.menu-foot a:hover{color:var(--era-cyan)}

/* ══════════════════ SECTION SCAFFOLD ══════════════════ */
main{position:relative;z-index:10}

.scene-section,.flat-section{
  position:relative;
  padding-block:clamp(90px,13vh,140px);
  padding-inline:var(--pad);
}
.scene-section{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.flat-section{z-index:12}

.scene-section.tint-cyan,.scene-section.tint-amber{color:var(--ink)}

/* shared heads */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-tech);font-size:12px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--cyan);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--era-cyan);border-radius:2px}
.sec-head{max-width:720px;margin-bottom:clamp(34px,5vw,58px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{
  margin:.45em 0 .35em;
  font-size:clamp(28px,4.6vw,52px);font-weight:800;line-height:1.14;letter-spacing:-.5px;
}
.sec-head p{margin:0;color:var(--muted);font-size:clamp(14.5px,1.6vw,17px);line-height:1.75}

/* ══════════════════ REVEAL ENGINE ══════════════════ */
.reveal{opacity:0;will-change:transform,opacity;
  transition:opacity .85s var(--ease),transform .95s var(--ease)}
.reveal[data-fly="up"]   {transform:translateY(52px)}
.reveal[data-fly="down"] {transform:translateY(-38px)}
.reveal[data-fly="left"] {transform:translateX(64px)}
.reveal[data-fly="right"]{transform:translateX(-64px)}
html[dir="rtl"] .reveal[data-fly="left"] {transform:translateX(-64px)}
html[dir="rtl"] .reveal[data-fly="right"]{transform:translateX(64px)}
/* must out-specify the [dir] rules above, or RTL elements stay translated */
html[dir] .reveal.in,
.reveal.in{opacity:1;transform:none}

/* ══════════════════ 01 HERO ══════════════════ */
#hero{padding-top:clamp(110px,13vh,150px);padding-bottom:clamp(64px,8vh,96px)}
.hero-copy{max-width:min(640px,53%);position:relative;z-index:2}
/* a soft scrim so the copy always stays legible over the 3D world */
.hero-copy::before{
  content:"";position:absolute;z-index:-1;
  inset:-8% -18% -12% -30%;
  background:radial-gradient(75% 65% at 70% 45%,
      rgba(246,241,232,.94) 0%,rgba(246,241,232,.82) 45%,rgba(246,241,232,0) 78%);
  opacity:var(--hero-scrim,1);
  pointer-events:none;
}
html[dir="ltr"] .hero-copy::before{
  inset:-8% -30% -12% -18%;
  background:radial-gradient(75% 65% at 30% 45%,
      rgba(246,241,232,.94) 0%,rgba(246,241,232,.82) 45%,rgba(246,241,232,0) 78%);
}
.hero-copy::before{transition:opacity .25s linear}
@media (max-width:980px){
  /* No panel, no scrim: the copy sits directly on the 3D world.
     Legibility comes from a white halo behind the glyphs, which is invisible
     over the light ground and only shows where the artwork goes dark. */
  .hero-copy{max-width:100%;background:none;border:0;box-shadow:none;padding:0}
  .hero-copy::before,
  html[dir="ltr"] .hero-copy::before{display:none}

  #hero h1,
  .hero-sub,
  .hero-ticks li,
  .hero-stats .stat b,
  .hero-stats .stat span,
  .scroll-cue{
    text-shadow:
      0 0 3px #fff, 0 0 3px #fff,
      0 0 12px rgba(255,255,255,.98),
      0 0 26px rgba(255,255,255,.9),
      0 0 46px rgba(255,255,255,.75);
  }
  #hero h1{font-weight:800}
  .hero-sub{color:var(--ink);font-weight:600}
  .hero-ticks li{color:var(--ink);font-weight:700}
  .hero-ticks li::before{box-shadow:0 0 0 3px rgba(255,255,255,.9)}
  .licence-chip{
    background:rgba(255,255,255,.88);
    border-color:rgba(0,174,219,.28);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  }
  .hero-stats{gap:10px}
  .hero-stats .stat{
    flex:1 1 0;min-width:0;text-align:center;
    background:none;border:0;box-shadow:none;padding:0;
  }
  .hero-stats .stat span{line-height:1.35}
  /* the buttons carry their own colour, so they need no halo */
  .hero-cta .btn{text-shadow:none;box-shadow:0 14px 30px -12px rgba(11,58,74,.45)}
}

.licence-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;
  background:rgba(11,58,74,.055);
  border:1px solid rgba(11,58,74,.09);
  font-size:12.5px;font-weight:600;color:var(--ink);
  backdrop-filter:blur(6px);
}
.licence-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(251,177,23,.22);animation:pulseDot 2.4s infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px rgba(251,177,23,.22)}50%{box-shadow:0 0 0 9px rgba(251,177,23,0)}}

#hero h1{
  margin:18px 0 14px;
  font-size:clamp(32px,5.3vw,62px);font-weight:800;line-height:1.1;letter-spacing:-1px;
}
#hero h1 .line{display:block}
#hero h1 .grad{color:var(--era-cyan)}
.hero-sub{margin:0 0 22px;max-width:52ch;color:var(--muted);
  font-size:clamp(14.5px,1.7vw,17.5px);line-height:1.8}

.hero-ticks{list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
.hero-ticks li{position:relative;padding-inline-start:26px;font-size:13.8px;font-weight:600;color:#25406e}
.hero-ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:3px;
  width:17px;height:17px;border-radius:50%;background:var(--era-cyan);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
@media (max-width:560px){.hero-ticks{grid-template-columns:1fr}}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:999px;
  font-size:14.5px;font-weight:700;
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s,background-color .3s,color .3s;
}
.btn i{font-style:normal}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .75s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
.btn-grad{background:var(--era-magenta);color:#fff;box-shadow:0 12px 30px -12px rgba(236,18,128,.6)}
.btn-grad:hover{transform:translateY(-3px);background:#d60f74;box-shadow:0 20px 40px -14px rgba(236,18,128,.7)}
.btn-ghost{background:rgba(11,58,74,.06);color:var(--ink);border:1px solid rgba(11,58,74,.1)}
.btn-ghost:hover{transform:translateY(-3px);background:rgba(11,58,74,.1)}

.btn-wa{background:#25D366;color:#fff;box-shadow:0 12px 28px -12px rgba(37,211,102,.7)}
.btn-wa:hover{transform:translateY(-3px)}
.btn.full{width:100%;justify-content:center}

.hero-stats{
  margin-top:clamp(28px,5vh,56px);
  display:flex;gap:clamp(20px,4vw,54px);flex-wrap:wrap;
  position:relative;z-index:2;
}
.hero-stats .stat{display:flex;flex-direction:column;gap:2px}
.hero-stats .stat b{
  font-family:var(--font-tech);font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1;
  letter-spacing:-.5px;color:var(--era-cyan);
  /* digits all share one advance width, so counting up never reflows */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  display:inline-block;
}
/* Arabic glyphs join — any tracking at all tears the word apart */
html[lang="ar"] .hero-stats .stat b,
html[lang="ar"] .lic-row b,
html[lang="ar"] .svc-price .amt,
html[lang="ar"] .eyebrow,
html[lang="ar"] .brand-text i,
html[lang="ar"] .scroll-cue,
html[lang="ar"] .holo-head,
html[lang="ar"] .contact-lines b,
html[lang="ar"] .pill-btn{letter-spacing:normal}
html[lang="ar"] #hero h1,
html[lang="ar"] .sec-head h2,
html[lang="ar"] .contact-copy h2{letter-spacing:normal}
/* the three stats echo the three letters of the mark */
.hero-stats .stat:nth-child(1) b{color:var(--era-cyan)}
.hero-stats .stat:nth-child(2) b{color:var(--era-amber)}
.hero-stats .stat:nth-child(3) b{color:var(--era-magenta)}
.hero-stats .stat span{font-size:12.5px;color:var(--muted);font-weight:600}

.scroll-cue{
  position:absolute;inset-inline:0;bottom:22px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  font-family:var(--font-tech);color:var(--muted);
  transition:opacity .4s;
}
body.scrolled .scroll-cue{opacity:0}
.scroll-border-container{
  width:24px;height:38px;border:2.5px solid var(--ink);border-radius:12px;
  display:flex;justify-content:center;opacity:.55;
}
.scroll-wheel{width:4px;height:9px;border-radius:2px;background:var(--ink);margin-top:5px;
  animation:wheel 1.8s infinite var(--ease)}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(13px);opacity:0}100%{opacity:0}}

/* ══════════════════ 02 ABOUT · HOLO CARDS ══════════════════ */
#about{padding-block:clamp(110px,16vh,170px)}
.about-grid{
  width:min(560px,100%);
  display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"main" "lic" "list";
  align-items:start;
}
@media (min-width:1500px){.about-grid{width:min(620px,52%)}}
.holo-card{
  grid-area:main;
  padding:clamp(20px,2.4vw,30px);
  border-radius:18px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,174,219,.22);
  backdrop-filter:blur(14px);
  box-shadow:0 26px 58px -32px rgba(11,58,74,.32);
  position:relative;overflow:hidden;
}
.holo-card::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#00AEDB 0 34%,#FBB117 34% 67%,#EC1280 67% 100%);
}
.holo-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,174,219,.035) 0 1px,transparent 1px 5px);
  opacity:.8;
}
.holo-card.small{grid-area:lic}
.holo-card.list{grid-area:list}
.holo-head{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-tech);font-size:11.5px;font-weight:700;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--era-cyan);
}
.hc-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);animation:pulseDot2 2s infinite}
@keyframes pulseDot2{0%,100%{opacity:1}50%{opacity:.25}}
.holo-card h2{margin:12px 0 12px;font-size:clamp(21px,2.5vw,30px);font-weight:800;line-height:1.25}
.holo-card p{margin:0;color:var(--muted);font-size:14.9px;line-height:1.95}
.lic-row{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.lic-row b{
  font-family:var(--font-tech);font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:.5px;
  color:var(--era-amber);
}
.lic-row span{color:var(--muted);font-size:13.4px;font-weight:600}
.holo-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px}
.holo-list li{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 13px;border-radius:12px;
  background:var(--tint-cyan);
  border:1px solid rgba(0,174,219,.14);
  font-size:14px;font-weight:600;color:var(--ink);
  transition:transform .3s var(--ease),background-color .3s;
}
.holo-list li:hover{transform:translateX(-5px);background:rgba(0,174,219,.16);border-color:rgba(0,174,219,.4)}
html[dir="ltr"] .holo-list li:hover{transform:translateX(5px)}
.holo-list li i{font-style:normal;font-size:17px;line-height:1.2}
@media (max-width:980px){.about-grid{width:100%}}

/* ══════════════════ 03 SERVICES RAIL ══════════════════ */
#services{padding-block:clamp(100px,14vh,150px)}
.svc-rail{
  width:min(var(--maxw),100%);margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width:1080px){.svc-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.svc-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}}
@media (max-width:420px){.svc-rail{gap:9px}}
.svc-card{
  position:relative;padding:26px 24px 24px;border-radius:20px;
  background:rgba(255,255,255,.93);
  border:1px solid rgba(11,58,74,.08);
  backdrop-filter:blur(14px);
  box-shadow:0 26px 58px -34px rgba(11,58,74,.3);
  display:flex;flex-direction:column;
  transform-style:preserve-3d;
  transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;
}
.svc-card:hover{
  transform:translateY(-8px);
  border-color:rgba(0,174,219,.45);
  box-shadow:0 40px 70px -34px rgba(0,174,219,.45);
}
.svc-card.popular{border-color:rgba(236,18,128,.45)}
.svc-badge{
  position:absolute;top:-11px;inset-inline-end:20px;
  padding:5px 13px;border-radius:999px;background:var(--era-magenta);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.4px;
  box-shadow:0 8px 20px -8px rgba(236,18,128,.8);
}
.svc-icon{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  font-size:25px;background:var(--tint-cyan);
  border:1px solid rgba(0,174,219,.16);margin-bottom:15px;
}
.svc-card h3{margin:0 0 9px;font-size:18.5px;font-weight:800;line-height:1.35}
.svc-card > p{margin:0 0 15px;color:var(--muted);font-size:13.8px;line-height:1.85}
.svc-points{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px}
.svc-points li{position:relative;padding-inline-start:20px;font-size:13.2px;color:var(--ink-2);font-weight:400}
.svc-points li::before{
  content:"";position:absolute;inset-inline-start:0;top:6px;width:9px;height:9px;
  border-radius:3px;background:var(--era-cyan);
}
.svc-price{margin-top:auto;padding-top:15px;border-top:1px solid rgba(11,58,74,.1)}
.svc-price .amt{
  font-family:var(--font-tech);font-weight:700;line-height:1.15;
  font-size:clamp(20px,2.4vw,27px);
  display:inline-block;max-width:100%;
  color:var(--era-cyan);
}
.svc-price .amt small{font-size:13px;font-weight:600;margin-inline-start:5px}
.svc-price .amt.words{font-size:15px;font-weight:700;letter-spacing:0;line-height:1.5;
  font-family:inherit;color:var(--era-amber)}
.svc-price .unit{display:block;margin-top:5px;font-size:11.8px;color:var(--muted)}
.svc-link{
  margin-top:14px;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--cyan);
  transition:gap .3s,color .3s;
}
.svc-link:hover{gap:12px;color:var(--magenta)}
.svc-link::after{content:"→"}
html[dir="rtl"] .svc-link::after{content:"←"}

/* ══════════════════ 04 WORK — filters · grid · 3D page flip ══════════ */
#work{overflow:hidden}

/* the flat chapters stay translucent so the 3D world keeps showing through */
.flat-section{background:rgba(247,243,236,.84);backdrop-filter:blur(5px)}
.flat-section.tint{background:linear-gradient(180deg,rgba(247,243,236,.86),rgba(240,234,223,.9))}

/* ══════════════════ MID-PAGE CTA BAND ══════════════════ */
.cta-band{
  width:min(var(--maxw),100%);margin:clamp(34px,5vw,56px) auto 0;
  background:var(--white);border:1px solid rgba(11,58,74,.08);
  border-radius:22px;padding:clamp(20px,3vw,30px) clamp(18px,3vw,34px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,26px);flex-wrap:wrap;
  box-shadow:0 14px 38px rgba(11,58,74,.07);
  position:relative;overflow:hidden;
}
/* the mark's three colours as a spine down the leading edge */
.cta-band::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;
  background:linear-gradient(180deg,var(--cyan) 0 34%,var(--gold) 34% 67%,var(--magenta) 67% 100%);
}
.cta-band p{
  margin:0;flex:1 1 320px;min-width:0;
  font-size:clamp(15px,1.8vw,18px);font-weight:700;line-height:1.6;color:var(--ink);
}
.cta-band .btn{flex:0 0 auto}
@media(max-width:640px){
  .cta-band{
    flex-direction:column;align-items:stretch;text-align:center;
    border-radius:18px;padding:20px 16px;gap:14px;
  }
  .cta-band p{flex:none;font-size:14.6px}
  .cta-band .btn{width:100%;justify-content:center}
}

/* ══════════════════ THE STACK ══════════════════ */
.stack-grid{
  width:min(var(--maxw),100%);margin:0 auto;
  display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.stack-card{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid rgba(11,58,74,.08);
  border-radius:20px;padding:22px 20px 20px;
  display:flex;flex-direction:column;gap:9px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
/* a hairline in the technology's own colour, taken from --tech on the card */
.stack-card::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:var(--tech,var(--cyan));
  transform:scaleX(0);transform-origin:var(--fly-origin,left);
  transition:transform .45s var(--ease);
}
.stack-card:hover{
  transform:translateY(-4px);
  border-color:rgba(11,58,74,.14);
  box-shadow:0 16px 40px rgba(11,58,74,.1);
}
.stack-card:hover::before{transform:scaleX(1)}
html[dir="rtl"] .stack-card{--fly-origin:right}
.stack-mark{
  width:54px;height:54px;border-radius:15px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--tech,var(--cyan)) 10%,var(--white));
}
/* color-mix is recent; without it the chip simply stays cream */
@supports not (background:color-mix(in srgb,red 10%,white)){
  .stack-mark{background:var(--cream-2)}
}
.stack-card h3{
  margin:0;font-size:clamp(15px,1.5vw,16.5px);font-weight:800;
  color:var(--ink);line-height:1.35;
}
.stack-card p{
  margin:0;font-size:13.4px;line-height:1.65;color:var(--muted);
}
@media(max-width:560px){
  /* two per row on a phone, as everywhere else on this site */
  .stack-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stack-card{padding:16px 13px 14px;border-radius:16px;gap:7px}
  .stack-mark{width:44px;height:44px;border-radius:12px}
  .stack-mark svg{width:27px;height:27px}
  .stack-card h3{font-size:13.4px}
  .stack-card p{font-size:11.6px;line-height:1.55}
}

.work-filters{
  width:min(var(--maxw),100%);margin:0 auto clamp(22px,3vw,34px);
  display:flex;flex-wrap:wrap;gap:9px;
}
.work-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  background:#fff;border:1.5px solid rgba(11,58,74,.1);
  font-size:13.4px;font-weight:700;color:var(--ink);
  box-shadow:0 8px 20px -16px rgba(11,58,74,.5);
  transition:transform .28s var(--ease),border-color .28s,background-color .28s,color .28s;
}
.work-chip i{font-style:normal;font-size:15px;line-height:1}
.work-chip b{
  font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;
  background:var(--tint-cyan);color:var(--era-cyan);
}
.work-chip:hover{transform:translateY(-2px);border-color:rgba(0,174,219,.45)}
.work-chip.on{background:var(--era-cyan);border-color:var(--era-cyan);color:#fff}
.work-chip.on b{background:rgba(255,255,255,.25);color:#fff}

.work-stage{width:min(var(--maxw),100%);margin-inline:auto;perspective:1600px}
.work-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  transform-style:preserve-3d;
}
@media (max-width:1080px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones keep two per row, on purpose — the cards go compact instead of stacking */
@media (max-width:760px){
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .work-card{border-radius:16px}
  .work-card .wc-face{padding:14px 13px 15px}
  .wi-top{margin-bottom:10px;flex-direction:column;align-items:flex-start;gap:8px}
  .wi-icon{width:40px;height:40px;border-radius:12px;font-size:19px}
  .wi-meta{justify-content:flex-start}
  .wi-meta span{font-size:9.4px;padding:3px 7px}
  .work-card h3{font-size:14px;line-height:1.3}
  .wi-domain{font-size:10px;margin-bottom:7px}
  .work-card p{
    font-size:11.6px;line-height:1.65;margin-bottom:10px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  }
  .wi-tags{gap:4px;margin-bottom:11px}
  .wi-tags span:nth-child(n+3){display:none}
  .wi-tags span{font-size:9.4px;padding:3px 7px}
  .wi-visit{padding:9px 12px;font-size:11.4px}
  .work-chip{padding:7px 11px;font-size:11.6px;gap:6px}
  .work-chip i{font-size:13px}
  .work-chip b{font-size:9.6px;padding:1px 6px}
  .work-filters{gap:7px;justify-content:center}
  .work-navigation-button{width:42px;height:42px}
}
/* the service cards go compact at the same breakpoint */
@media (max-width:760px){
  .svc-card{padding:18px 15px 17px;border-radius:16px}
  .svc-icon{width:42px;height:42px;border-radius:12px;font-size:20px;margin-bottom:11px}
  .svc-card h3{font-size:14.6px}
  .svc-card > p{font-size:12px;line-height:1.7;margin-bottom:11px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .svc-points li{font-size:11.6px;padding-inline-start:16px}
  .svc-points li::before{width:7px;height:7px;top:5px}
  .svc-price .amt{font-size:19px}
  .svc-price .amt.words{font-size:12.4px}
  .svc-price .unit{font-size:10.4px}
  .svc-link{font-size:11.8px}
  .svc-badge{font-size:9.6px;padding:4px 9px;inset-inline-end:10px}
}

.work-card{
  background:#fff;border-radius:20px;
  border:1px solid rgba(11,58,74,.07);
  box-shadow:0 24px 50px -32px rgba(11,58,74,.42);
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform,opacity;
}
.work-card .wc-face{padding:22px;display:flex;flex-direction:column;height:100%}
.work-card.in{animation:cardIn .62s var(--ease) backwards}
.work-card.out{animation:cardOut .42s var(--ease) forwards}
@keyframes cardIn{
  from{transform:rotateY(78deg) translateZ(-60px) scale(.9);opacity:0}
  to  {transform:none;opacity:1}
}
@keyframes cardOut{
  from{transform:none;opacity:1}
  to  {transform:rotateY(-78deg) translateZ(-60px) scale(.9);opacity:0}
}
.work-card:hover{
  transform:translateY(-8px) rotateX(2.5deg);
  box-shadow:0 44px 70px -36px rgba(0,174,219,.5);
  transition:transform .4s var(--ease),box-shadow .4s;
}

/* project screenshot: edge to edge across the top of the card, 16:10, the
   top of the site first; the icon then overlaps its lower edge */
.wi-shot{
  margin:-22px -22px 0;aspect-ratio:16/10;overflow:hidden;
  border-radius:20px 20px 0 0;background:var(--tint-cyan);
  border-bottom:1px solid rgba(11,58,74,.07);
}
.wi-shot img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;
  transition:transform .6s var(--ease)}
.work-card:hover .wi-shot img{transform:scale(1.04)}
.has-shot .wi-top{margin-top:-24px;position:relative}
.has-shot .wi-icon{background:#fff;box-shadow:0 10px 22px -12px rgba(11,58,74,.5)}
.has-shot .wi-meta{padding-top:30px}
@media (max-width:760px){
  .wi-shot{margin:-14px -13px 0;border-radius:16px 16px 0 0}
  .has-shot .wi-top{margin-top:-18px}
  .has-shot .wi-meta{padding-top:0}
}
.wi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.wi-icon{
  width:52px;height:52px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;font-size:25px;
  background:var(--tint-cyan);border:1px solid rgba(0,174,219,.2);
}
.wi-meta{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.wi-meta span{
  padding:4px 9px;border-radius:999px;font-size:10.4px;font-weight:700;
  background:var(--tint-amber);color:#8A5A07;
}
.work-card h3{margin:0 0 5px;font-size:17px;font-weight:800;line-height:1.35}
.wi-domain{
  display:inline-block;margin-bottom:10px;
  font-family:var(--font-tech);font-size:11.6px;color:var(--era-cyan);font-weight:700;
  word-break:break-all;
}
.work-card p{margin:0 0 14px;font-size:12.9px;line-height:1.78;color:var(--muted)}
.wi-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}
.wi-tags span{
  padding:4px 9px;border-radius:8px;font-size:10.6px;font-weight:600;
  background:var(--tint-cyan);color:var(--ink-2);
}
.wi-visit{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:999px;background:var(--ink);color:#fff;
  font-size:12.8px;font-weight:700;transition:background-color .3s,transform .3s;
}
.wi-visit:hover{background:var(--era-magenta);transform:translateY(-2px)}

.work-nav{
  width:min(var(--maxw),100%);margin:clamp(22px,3vw,32px) auto 0;
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.work-navigation-button{
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;color:var(--ink);
  border:1.5px solid rgba(11,58,74,.1);
  box-shadow:0 10px 24px -18px rgba(11,58,74,.6);
  transition:.3s;
}
.work-navigation-button svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.work-navigation-button:hover{background:var(--era-magenta);border-color:var(--era-magenta);color:#fff;transform:scale(1.08)}
.work-navigation-button:disabled{opacity:.32;pointer-events:none}
html[dir="rtl"] .work-navigation-button svg{transform:scaleX(-1)}
.work-pages{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:52vw}
.work-pages i{width:8px;height:8px;border-radius:50%;background:rgba(11,58,74,.18);
  transition:.3s;cursor:pointer}
.work-pages i.on{width:26px;border-radius:999px;background:var(--era-magenta)}
.work-count{
  width:min(var(--maxw),100%);margin:12px auto 0;text-align:center;
  font-size:12.4px;color:var(--muted);font-weight:600;
}

/* ══════════════════ 05 PROCESS + FAQ ══════════════════ */
.proc-line{
  width:min(var(--maxw),100%);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;
  position:relative;
}
.proc-line::before{
  content:"";position:absolute;top:34px;inset-inline:8%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,174,219,.45),rgba(236,18,128,.45),transparent);
}
@media (max-width:820px){.proc-line::before{display:none}}
@media (max-width:760px){
  .proc-line{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .proc-step b{width:52px;height:52px;font-size:19px;margin-bottom:11px}
  .proc-step h3{font-size:14px}
  .proc-step p{font-size:11.8px;line-height:1.65}
}
.proc-step{position:relative;text-align:center;padding:0 8px}
.proc-step b{
  display:grid;place-items:center;width:68px;height:68px;margin:0 auto 16px;
  border-radius:50%;background:var(--cream);border:2px solid transparent;
  background-image:linear-gradient(var(--cream),var(--cream)),
    linear-gradient(180deg,#00AEDB 0 34%,#FBB117 34% 67%,#EC1280 67% 100%);
  background-origin:border-box;background-clip:padding-box,border-box;
  font-family:var(--font-tech);font-size:24px;font-weight:700;color:var(--ink);
  box-shadow:0 14px 30px -16px rgba(0,174,219,.7);
  transition:transform .4s var(--ease);
}
.proc-step:hover b{transform:translateY(-6px) scale(1.06)}
.proc-step h3{margin:0 0 7px;font-size:16.5px;font-weight:800}
.proc-step p{margin:0;font-size:13.2px;line-height:1.8;color:var(--muted)}

.faq-wrap{width:min(860px,100%);margin:clamp(70px,10vh,110px) auto 0;
  /* /#faq lands on this block; keep its heading clear of the fixed header */
  scroll-margin-top:92px}
.faq{display:grid;gap:11px}
.faq-item{
  background:#fff;border:1px solid rgba(11,58,74,.07);border-radius:15px;overflow:hidden;
  box-shadow:0 12px 30px -24px rgba(11,58,74,.5);
  transition:border-color .3s,box-shadow .3s;
}
.faq-item.open{border-color:rgba(0,174,219,.4);box-shadow:0 22px 44px -26px rgba(0,174,219,.55)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;text-align:start;font-size:15px;font-weight:700;
}
.faq-q svg{flex:0 0 auto;fill:none;stroke:var(--cyan);stroke-width:2.6;stroke-linecap:round;
  transition:transform .4s var(--ease)}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{margin:0;padding:0 20px 20px;font-size:13.8px;line-height:1.9;color:var(--muted)}

/* ══════════════════ 06 CONTACT ══════════════════ */
.contact-section{
  /* transparent so the 3D contact station reads as the page background */
  background:transparent;
  z-index:12;
}
.contact-grid{
  width:min(var(--maxw),100%);margin-inline:auto;
  display:grid;gap:clamp(26px,4vw,54px);
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:start;
}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-copy{position:relative;z-index:2}
.contact-copy::before{
  content:"";position:absolute;z-index:-1;inset:-10% -22%;
  background:radial-gradient(72% 62% at 55% 45%,
      rgba(239,231,218,.95) 0%,rgba(239,231,218,.82) 48%,rgba(239,231,218,0) 80%);
  pointer-events:none;
}
.contact-copy h2{margin:.5em 0 .4em;font-size:clamp(28px,4.4vw,48px);font-weight:800;line-height:1.14;letter-spacing:-.6px}
.contact-copy > p{margin:0 0 26px;color:var(--muted);font-size:15.5px;line-height:1.8;max-width:46ch}
.contact-lines{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.contact-lines li{display:flex;gap:14px;align-items:flex-start}
.contact-lines i{
  font-style:normal;width:44px;height:44px;flex:0 0 auto;border-radius:13px;
  display:grid;place-items:center;font-size:19px;
  background:#fff;box-shadow:0 10px 24px -14px rgba(11,58,74,.5);
}
.contact-lines b{display:block;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  font-family:var(--font-tech);color:var(--muted);margin-bottom:3px}
.contact-lines a{font-weight:700;font-size:14.5px;transition:color .25s}
.contact-lines a:hover{color:var(--magenta)}
.contact-lines span{font-size:14.2px;font-weight:600}

.contact-form{
  background:#fff;border-radius:22px;padding:clamp(22px,3vw,32px);
  box-shadow:0 34px 70px -40px rgba(11,58,74,.55);
  border:1px solid rgba(11,58,74,.06);
  /* /#contact lands here; keep the form's title clear of the fixed header */
  scroll-margin-top:84px;
}
.contact-form h3{margin:0 0 20px;font-size:17px;font-weight:800;line-height:1.5}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:12px;
  border:1.5px solid rgba(11,58,74,.1);background:#FAFBFD;
  font:inherit;font-size:16px;color:var(--ink);
  transition:border-color .25s,box-shadow .25s,background-color .25s;
}
.field textarea{resize:vertical;min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cyan);background:#fff;
  box-shadow:0 0 0 4px rgba(0,174,219,.14);
}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.form-note{margin-top:12px;font-size:13px;font-weight:600;min-height:20px}
.form-note.ok{color:#118A5A}
.form-note.bad{color:#C6335A}

.site-footer{
  width:min(var(--maxw),100%);margin:clamp(50px,8vh,80px) auto 0;
  padding-top:22px;border-top:1px solid rgba(11,58,74,.1);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.6px;color:var(--muted);
}
.foot-links a{font-family:var(--font-tech);transition:color .25s}
.foot-links a:hover{color:var(--magenta)}

/* ══════════════════ FLOATING SOCIAL RAIL ══════════════════ */
.social-rail{
  position:fixed;z-index:1500;
  inset-inline-start:18px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:9px;
}
.social-rail .soc{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:#fff;color:var(--ink);
  border:1px solid rgba(11,58,74,.08);
  box-shadow:0 10px 26px -16px rgba(11,58,74,.55);
  transition:transform .3s var(--ease),background-color .3s,color .3s,box-shadow .3s;
}
.social-rail .soc svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.social-rail .soc svg .fill,.social-rail .soc svg .dot{fill:currentColor;stroke:none}
.social-rail .soc:hover{transform:translateY(-3px) scale(1.07);color:#fff}
.soc-ig:hover{background:#E1306C;box-shadow:0 14px 30px -14px rgba(225,48,108,.8)}
.soc-fb:hover{background:#1877F2;box-shadow:0 14px 30px -14px rgba(24,119,242,.8)}
.soc-tt:hover{background:#111;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.soc-li:hover{background:#0A66C2;box-shadow:0 14px 30px -14px rgba(10,102,194,.8)}

@media (max-width:900px){
  .social-rail{
    top:auto;bottom:20px;transform:none;
    inset-inline-start:16px;
    flex-direction:row;gap:8px;
  }
  .social-rail .soc{width:38px;height:38px;border-radius:12px}
}

/* ══════════════════ WHATSAPP FAB ══════════════════ */
.wa-fab{
  position:fixed;z-index:1500;bottom:22px;inset-inline-end:22px;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;color:#fff;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.75);
  transition:transform .35s var(--ease);
  animation:waPulse 3s infinite;
}
.wa-fab svg{fill:currentColor}
.wa-fab:hover{transform:scale(1.1) rotate(-6deg)}
@keyframes waPulse{
  0%,100%{box-shadow:0 14px 30px -10px rgba(37,211,102,.75),0 0 0 0 rgba(37,211,102,.45)}
  55%    {box-shadow:0 14px 30px -10px rgba(37,211,102,.75),0 0 0 16px rgba(37,211,102,0)}
}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width:980px){
  #hero{padding-top:92px;padding-bottom:26px;justify-content:flex-start}
  #hero h1{font-size:clamp(23px,7.2vw,30px);line-height:1.3;margin:11px 0 9px}
  .hero-sub{font-size:13.4px;line-height:1.62;margin-bottom:14px}
  .hero-ticks{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin-bottom:16px}
  .hero-ticks li{font-size:12px;padding-inline-start:21px}
  .hero-ticks li::before{width:14px;height:14px;top:2px}
  .licence-chip{font-size:11px;padding:6px 12px}
  /* The phone hero drops the buttons and the counters entirely. They were
     stacked over the 3D desk and pushed the whole scene below the fold; the
     ask moves to the .cta-band just before the contact section instead. */
  .hero-cta,
  .hero-stats{display:none}
  #hero h1{margin:14px 0 12px}
  .hero-sub{margin-bottom:18px}
  .hero-ticks{margin-bottom:22px;gap:7px}
}
@media (max-width:620px){
  #hero{padding-top:88px}
  .hero-stats{gap:16px}
  .hero-stats .stat{flex:1 1 28%}
  .hero-stats .stat b{font-size:26px}
  .hero-stats .stat span{font-size:11px}
  .work-grid{gap:12px}
  .scroll-cue span{display:none}
  .brand-text i{display:none}
  .brand-mark svg{width:80px;height:30px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  #transition-container{display:none}
}

/* ═══════════════ CONTACT MAP ═══════════════
   Managed in the panel. The box keeps its height before the frame arrives so
   accepting cookies does not shove the page down. */
.contact-map{margin-top:clamp(18px,3vw,26px);border-radius:16px;overflow:hidden;
  background:var(--cream-2);border:1px solid rgba(11,58,74,.08)}
.contact-map iframe{display:block;border:0}
.map-consent{width:100%;min-height:inherit;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:26px 20px;
  background:transparent;border:0;cursor:pointer;font:inherit;color:var(--ink);text-align:center}
.map-consent b{font-size:15px;font-weight:800}
.map-consent span{font-size:12.5px;color:var(--muted);max-width:32ch;line-height:1.7}
.map-consent:hover b{color:var(--cyan)}

/* ═══════════════ PANEL CONTROLS ═══════════════
   What "Pages and sections" in the panel can do to this page. */

/* A hidden 3D station keeps its place with no height: scene.js times the
   camera from each [data-station] section, so removing one would throw
   every station after it out of step. */
.sec-off{min-height:0!important;height:0;padding-block:0!important;overflow:hidden;visibility:hidden}
@media (min-width:761px){
  .sec-off-d{min-height:0!important;height:0;padding-block:0!important;overflow:hidden;visibility:hidden}
  .hide-d{display:none!important}
}
@media (max-width:760px){
  .sec-off-m{min-height:0!important;height:0;padding-block:0!important;overflow:hidden;visibility:hidden}
  .hide-m{display:none!important}
}

/* built-in blocks moved out of, or into, another section */
.flat-section > .faq-wrap,
.flat-section > .cta-band{margin-top:0}
.nested-flat{margin-top:clamp(70px,10vh,110px)}

/* the stack's columns, as set in the panel (desktop / phone) */
@media (min-width:981px){.stack-grid.has-cols{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}
@media (max-width:560px){.stack-grid.has-cols-m{grid-template-columns:repeat(var(--cols-m),minmax(0,1fr))}}

/* footer: the panel's links plus privacy and terms */
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px}

/* ═══════════════ SECTIONS ADDED IN THE PANEL ═══════════════
   Drawn by app.js (buildBlocks) from DE_CONTENT, in the page's own cards,
   type and colours. */
.gsec-nested{margin-top:clamp(56px,8vh,90px)}
.gb-inner{width:min(var(--maxw),100%);margin-inline:auto}
.gb-body p{margin:0 0 1em;color:var(--muted);font-size:clamp(14.5px,1.5vw,16px);line-height:1.9}
.gb-body p:last-child{margin-bottom:0}
.gb-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.gb-center{text-align:center}
.gb-center .gb-btns{justify-content:center}

/* text + image */
.gb-tm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,56px);align-items:center}
.gb-tm.img-start .gb-tm-media{order:-1}
.gb-tm .sec-head{margin:0 0 16px;text-align:start}
.gb-tm-media img{width:100%;height:auto;border-radius:20px;display:block;
  box-shadow:0 30px 60px -36px rgba(11,58,74,.55)}
@media (max-width:760px){.gb-tm{grid-template-columns:1fr}.gb-tm-media{order:-1}}

/* cards / steps */
.gb-grid{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:980px){.gb-grid:not(.one){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.gb-grid{grid-template-columns:repeat(var(--cols-m,2),minmax(0,1fr));gap:10px}}
.gb-card{background:#fff;border:1px solid rgba(11,58,74,.07);border-radius:20px;padding:22px;
  box-shadow:0 24px 50px -34px rgba(11,58,74,.42);display:flex;flex-direction:column;gap:8px}
.gb-card .gb-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:23px;
  background:var(--tint-cyan);border:1px solid rgba(0,174,219,.2)}
.gb-card img{width:100%;height:auto;border-radius:14px;display:block}
.gb-card h3{margin:4px 0 0;font-size:16.5px;font-weight:800;line-height:1.35}
.gb-card p{margin:0;color:var(--muted);font-size:13.4px;line-height:1.75}
.gb-card a.gb-more{margin-top:auto;padding-top:6px;font-weight:700;font-size:13px;color:var(--era-cyan)}
@media (max-width:760px){.gb-card{padding:15px 13px;border-radius:16px}.gb-card h3{font-size:14px}.gb-card p{font-size:12px}}

/* gallery */
.gb-gallery{display:grid;gap:12px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:760px){.gb-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.gb-gallery figure{margin:0;border-radius:16px;overflow:hidden;background:var(--cream-2)}
.gb-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.gb-gallery figure:hover img{transform:scale(1.04)}
.gb-gallery figcaption{padding:8px 12px;font-size:12.6px;color:var(--muted)}

/* figures */
.gb-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4vw,56px)}
.gb-stats .stat{text-align:center;min-width:120px}
.gb-stats .stat b{display:block;font-family:var(--font-tech);font-size:clamp(30px,4vw,44px);font-weight:800;color:var(--ink)}
.gb-stats .stat span{font-size:13px;color:var(--muted)}
html[lang="ar"] .gb-stats .stat b{letter-spacing:normal}

/* logos */
.gb-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(14px,3vw,34px)}
.gb-logos a,.gb-logos span{display:grid;place-items:center;height:64px;padding:8px 14px;
  background:#fff;border-radius:14px;border:1px solid rgba(11,58,74,.07)}
.gb-logos img{max-height:44px;max-width:140px;width:auto;height:auto;object-fit:contain}
.gb-logos.gray img{filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.gb-logos.gray a:hover img,.gb-logos.gray span:hover img{filter:none;opacity:1}

/* steps */
.gb-steps{counter-reset:gbstep}
.gb-step{position:relative;text-align:center;padding:0 8px}
.gb-step b{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 14px;border-radius:50%;
  background:#fff;border:2px solid var(--era-cyan);font-family:var(--font-tech);font-size:21px;font-weight:700}
.gb-step h3{margin:0 0 6px;font-size:16px;font-weight:800}
.gb-step p{margin:0;color:var(--muted);font-size:13.4px;line-height:1.75}

/* rich text */
.gb-text{width:min(820px,100%);margin-inline:auto}
.gb-text .sec-head{max-width:none;margin:0 0 18px}

/* ═══════════════ OFFERS LINK ═══════════════
   Shown only while an offer is live. In the header on tablets and desktops
   (a phone has no room beside the logo, so it reaches the offers from the
   menu, where the item carries a "new" tag), and in the footer. */
.offers-pill{display:inline-flex;align-items:center;gap:7px;padding:0 15px;
  background:var(--era-magenta);color:#fff;font-family:inherit;letter-spacing:normal;
  box-shadow:0 8px 20px -10px rgba(236,18,128,.85)}
.offers-pill:hover{background:#d60f74;color:#fff}
.offers-pill svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:519px){.offers-pill{display:none}}
.menu-new{align-self:center;padding:4px 10px;border-radius:999px;background:var(--era-magenta);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:normal;line-height:1.2}
#full-menu li a.menu-offers{color:var(--era-magenta)}
#full-menu li a.menu-offers:hover{color:#d60f74}
body.menu-open #full-menu li:nth-child(7) a{transition-delay:.48s}
body.menu-open #full-menu li:nth-child(8) a{transition-delay:.54s}