/* ══════════════════════════════════════════════════════════
   STAR MEDIA — Landing Page
   Dark / Gold identity · RTL Arabic · WebGL-backed
   ══════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────── */
:root{
  --gold:#E8B923;
  --gold-lite:#F7DC8A;
  --gold-deep:#C8901A;
  --gold-dim:rgba(232,185,35,.14);

  --ink:#0E0E10;
  --ink-2:#141417;
  --ink-3:#1A1A1E;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --fg:#F4F3F1;
  --fg-2:#A9A9B2;
  --fg-3:#6E6E78;

  --ff:'Tajawal','Segoe UI',system-ui,sans-serif;
  --ff-alt:'Space Grotesk','Tajawal',system-ui,sans-serif;

  --wrap:1280px;
  --pad:clamp(20px,5vw,72px);
  --r:18px;
  /* the single readability layer used by EVERY band on the page,
     so nothing reads as a second, differently-tinted sheet of glass */
  --scrim:radial-gradient(94% 76% at 58% 50%,
     rgba(12,12,14,.95) 0%,
     rgba(12,12,14,.88) 56%,
     rgba(12,12,14,.76) 100%);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --head-h:82px;     /* 16px offset + 66px bar */
}

/* ── reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overscroll-behavior-x:none}
body{
  font-family:var(--ff);
  background:var(--ink);
  color:var(--fg);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
::selection{background:var(--gold);color:#000}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:clamp(90px,13vh,160px);z-index:2}
/* Depth: the WebGL city runs behind the whole page and every band gets the
   SAME scrim — one consistent sheet, never a stack of different tints. */
.hero::before,
.section::before,
.stats::before,
.marquee::before,
.work::before,
.clients::before,
.contact::before,
.footer::before,
.cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--scrim);
}
.skip-link{position:fixed;inset-inline-start:-999px;top:12px;z-index:999;background:var(--gold);color:#000;padding:10px 18px;border-radius:8px}
.skip-link:focus{inset-inline-start:12px}

/* focus ring */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;
}

/* ── type ───────────────────────────────────────────────── */
.h2{
  font-size:clamp(2.1rem,5.4vw,4.4rem);
  line-height:1.12;font-weight:800;
  letter-spacing:normal;      /* Arabic must never be letter-spaced */
}
.h2 em,.cta__title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold-lite),var(--gold) 45%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.h2 .line,.hero__title .line,.cta__title .line{
  display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em;
}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--fg-2);max-width:56ch}
.kicker{
  font-family:var(--ff-alt);font-size:.76rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:34px;height:1px;background:linear-gradient(to left,var(--gold),transparent)}
.kicker.center{justify-content:center}
.kicker.center::after{content:"";width:34px;height:1px;background:linear-gradient(to right,var(--gold),transparent)}
.section__head{margin-bottom:clamp(44px,6vw,80px);max-width:44ch}

/* ── background chrome ──────────────────────────────────── */
#webgl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 42%,transparent 38%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.88) 100%);
}
.grain{
  position:fixed;inset:-120%;z-index:3;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-5%)} 50%{transform:translate(-3%,4%)}
  66%{transform:translate(5%,2%)}  83%{transform:translate(-5%,-2%)}
}

/* ── preloader ──────────────────────────────────────────── */
.preloader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{display:grid;justify-items:center;gap:26px;width:min(280px,70vw)}
.preloader__star{width:56px;height:56px;fill:var(--gold);animation:spinStar 2.4s var(--ease-io) infinite}
@keyframes spinStar{0%{transform:rotate(0) scale(.86);opacity:.5}50%{transform:rotate(180deg) scale(1);opacity:1}100%{transform:rotate(360deg) scale(.86);opacity:.5}}
.preloader__bar{width:100%;height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.preloader__bar i{display:block;height:100%;width:0;background:linear-gradient(to left,var(--gold-lite),var(--gold-deep));transition:width .25s linear}
.preloader__num{font-family:var(--ff-alt);font-size:.8rem;letter-spacing:.2em;color:var(--fg-3)}

/* Arriving from the other language: the shell is already cached, so the
   loading bar is skipped entirely rather than replayed. */
html.sm-hop .preloader{display:none}

/* No view transition on the language switch, deliberately.
   A root transition snapshots the <canvas>, the grain and the vignette and
   cross-fades them against themselves — the background never reloads, but it
   is re-presented, which looks identical to a reload. The switch changes the
   words and leaves everything behind them untouched. */

/* ── cursor ─────────────────────────────────────────────── */
.cursor{position:fixed;top:0;left:0;z-index:150;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;translate:-50% -50%}
.cursor__dot{width:5px;height:5px;background:var(--gold)}
.cursor__ring{
  width:34px;height:34px;border:1px solid rgba(232,185,35,.65);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s;
}
.cursor.is-hot .cursor__ring{width:62px;height:62px;background:rgba(232,185,35,.12)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ── scroll progress ────────────────────────────────────── */
.scrollbar{position:fixed;top:0;inset-inline:0;height:2px;z-index:120;background:rgba(255,255,255,.05)}
.scrollbar i{display:block;height:100%;width:0;background:linear-gradient(to left,var(--gold-lite),var(--gold-deep));box-shadow:0 0 14px rgba(232,185,35,.55)}

/* ── header ───────────────────────────────────────────────
   No bar. The header is an invisible three-track grid, and the GLASS sits on
   the pieces that need it — the menu and the language switch — while the
   logo and the call-to-action stand on their own.

   That is the right way round. A single wide pane has to be opaque enough to
   carry its weakest content, so it ends up darkening the full width of the
   photograph behind it to solve a problem that only exists under six small
   words. Glazing each group separately means each is only as heavy as its
   own contents require, and the scene stays visible between them.

   The logo and the button already carry themselves: one is a gold mark, the
   other a gold pill. Framing either would be glass for the sake of glass. */
.header{
  position:fixed;top:16px;inset-inline:clamp(12px,3vw,26px);z-index:100;
  height:66px;
  /* Three tracks with the outer two equal, so the menu is centred on the
     HEADER. Centring it in the gap between a logo and a button of unequal
     widths would leave it visibly off-centre, and drifting as the labels
     change length between English and Arabic. */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(8px,1.4vw,16px);
  padding-inline:4px;
  transition:top .5s var(--ease),height .5s var(--ease),
             inset-inline .5s var(--ease),transform .45s var(--ease);
  /* `backwards`, not `both`: the header holds the opening frame through the
     delay, plays in, then hands transform back to the normal cascade so
     .is-hidden can still slide it away. With `both` the finished animation
     keeps winning and hide-on-scroll silently stops working.

     It is a CSS keyframe rather than a GSAP tween for a harder reason: a
     `from` tween applies its start value the moment it is created, so the
     header was parked above the viewport before a single frame ran, and
     anything that stopped the timeline finishing left it there for good.
     Site navigation must not depend on an animation completing. */
  animation:headerIn .85s var(--ease) .12s backwards;
}
@keyframes headerIn{
  from{transform:translateY(-150%);opacity:0}
  to{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){ .header{animation:none} }
.header.is-stuck{top:10px;height:58px;inset-inline:clamp(12px,6vw,96px)}
.header.is-hidden{transform:translateY(-160%);transition:transform .45s var(--ease)}

/* ── the glass, shared by the groups that need it ─────── */
.nav ul,.langsw{
  background:linear-gradient(180deg,rgba(22,22,28,.34),rgba(13,13,17,.22));
  /* Legibility comes from `brightness()` inside the filter, not from an
     opaque layer: it darkens whatever the group sits over — bright cloud
     included — while the scene still reads through it. Measured against the
     brightest sky the header passes over, .46 is what keeps the menu above
     4.5:1; the previous value left it at 2.1:1. */
  backdrop-filter:blur(26px) saturate(165%) brightness(.46);
  -webkit-backdrop-filter:blur(26px) saturate(165%) brightness(.46);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 36px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.header.is-stuck .nav ul,.header.is-stuck .langsw{
  background:linear-gradient(180deg,rgba(18,18,23,.52),rgba(11,11,15,.40));
  border-color:rgba(255,255,255,.14);
}

/* the logo carries itself — a shadow, not a container */
/* Columns are assigned EXPLICITLY, not left to auto-placement. On a phone the
   menu becomes a fixed full-screen overlay and therefore leaves the grid flow
   — and auto-placement then slides the actions group up into the middle
   column, so the language switch and the burger end up floating in the centre
   of the bar instead of sitting at its edge. */
.header__logo{
  grid-column:1;justify-self:start;
  color:var(--fg);display:flex;align-items:center;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.8));
}
.header__logo img{height:42px;width:auto;transition:height .5s var(--ease)}
.header.is-stuck .header__logo img{height:36px}

/* Past the hero, only the MENU travels with you.
   The logo, the language switch and the call-to-action are introductions:
   they belong to the first screen, where somebody is deciding whether to
   stay. Carrying them down the whole page spends attention on things the
   reader has already answered, and puts three more objects over artwork
   they came to look at. The menu is the only part that stays useful, so it
   is the only part that stays.
   visibility, not just opacity — a faded-out link that is still in the tab
   order is a trap for anyone navigating by keyboard. */
.header__logo,.header__end{
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
}
.header.is-past-hero .header__logo,
.header.is-past-hero .header__end{
  opacity:0;visibility:hidden;transform:translateY(-8px);
}

/* ── navigation ─────────────────────────────────────────
   A pill slides between the links: one element moved by transform, not a
   background switched on under each in turn. A single pill reads as one
   object travelling along the menu; per-link backgrounds blink, however
   nicely they fade. */
.nav{grid-column:2;justify-self:center}
.nav ul{
  position:relative;display:flex;align-items:center;gap:2px;
  padding:5px;border-radius:100px;
}
.nav__pill{
  position:absolute;top:5px;bottom:5px;left:0;width:0;
  border-radius:100px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(232,185,35,.26),rgba(232,185,35,.10));
  border:1px solid rgba(232,185,35,.32);
  box-shadow:0 4px 16px -8px rgba(232,185,35,.75);
  transition:transform .42s var(--ease),width .42s var(--ease),opacity .3s var(--ease);
}
.nav a{
  position:relative;z-index:1;display:inline-flex;align-items:center;
  font-family:var(--ff-alt);font-size:.86rem;font-weight:500;
  /* not --fg-2: that measured 2.1:1 against the brightest cloud once the
     glass went transparent, so it no longer cleared AA */
  color:#DCDBD8;white-space:nowrap;
  padding:8px clamp(9px,.95vw,14px);border-radius:100px;
  transition:color .28s var(--ease);
}
[dir="rtl"] .nav a{letter-spacing:normal}    /* Arabic must never be tracked */
.nav a:hover{color:#FFFFFF}
/* The active link sits ON the gold pill, so gold text on it measured
   3.2:1 — gold on gold. The pill already carries the brand colour;
   the label only has to be readable against it. */
.nav a.is-active{color:#FFF4D6}

/* ── language ───────────────────────────────────────────
   A segmented control, not a lone button: it shows which language you are in
   as well as which one you can move to. Only the other one is a link. */
.header__end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.langsw{
  display:inline-flex;align-items:center;gap:2px;padding:4px;
  border-radius:100px;
}
.langsw__on,.langsw__off{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:28px;padding:0 9px;border-radius:100px;
  font-family:var(--ff-alt);font-size:.76rem;font-weight:700;line-height:1;
}
.langsw__on{
  background:linear-gradient(140deg,var(--gold-lite),var(--gold) 55%,var(--gold-deep));
  color:#120D02;
}
.langsw__off{color:#C9C8C4;transition:color .28s,background .28s}
.langsw__off:hover{color:#FFFFFF;background:rgba(255,255,255,.12)}
/* Space Grotesk carries no Arabic, so the segment showing ع must be set in
   the Arabic face or it falls back at the wrong size and optical weight */
.langsw [lang="ar"]{font-family:var(--ff);font-size:.94rem;font-weight:700;line-height:1.1}

.burger{
  display:none;width:40px;height:40px;place-items:center;gap:6px;cursor:pointer;
  border-radius:100px;
  background:linear-gradient(180deg,rgba(22,22,28,.34),rgba(13,13,17,.22));
  backdrop-filter:blur(26px) saturate(165%) brightness(.46);
  -webkit-backdrop-filter:blur(26px) saturate(165%) brightness(.46);
  border:1px solid rgba(255,255,255,.10);
  transition:background .28s;
}
.burger:hover{background:rgba(255,255,255,.14)}
.burger i{display:block;width:20px;height:1.5px;background:var(--fg);transition:transform .4s var(--ease),opacity .3s}
.burger.is-open i:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger.is-open i:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-weight:700;font-size:.97rem;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
  will-change:transform;
}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(-5px)}
.btn--gold{background:linear-gradient(105deg,var(--gold-lite),var(--gold) 50%,var(--gold-deep));color:#120D02;box-shadow:0 8px 34px -12px rgba(232,185,35,.75)}
.btn--gold::before{
  content:"";position:absolute;inset:0;z-index:-1;translate:-120% 0;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transition:translate .7s var(--ease);
}
.btn--gold:hover{box-shadow:0 14px 44px -10px rgba(232,185,35,.85);transform:translateY(-2px)}
.btn--gold:hover::before{translate:120% 0}
.btn--ghost{border:1px solid var(--line-2);color:var(--fg)}
.btn--ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);scale:0 1;transform-origin:100% 50%;transition:scale .5s var(--ease)}
.btn--ghost:hover{color:#120D02;border-color:var(--gold)}
.btn--ghost:hover::before{scale:1 1}
.btn--sm{padding:11px 22px;font-size:.88rem}
.btn--lg{padding:19px 44px;font-size:1.06rem}
.btn--block{width:100%;justify-content:center}
.header__cta{background:linear-gradient(105deg,var(--gold-lite),var(--gold) 50%,var(--gold-deep));color:#120D02;padding:10px 20px;font-size:.85rem;font-family:var(--ff-alt)}
[dir="rtl"] .header__cta{font-family:var(--ff)}

/* ── hero ───────────────────────────────────────────────── */
.hero{
  position:relative;z-index:2;min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--head-h) + 48px) 0 104px;
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;width:100%;position:relative;z-index:1;
}
.hero__copy{max-width:min(660px,56%)}

.hero__title{
  font-size:clamp(2.2rem,5vw,4.5rem);
  line-height:1.08;font-weight:800;letter-spacing:normal;
  margin:6px 0 26px;text-wrap:balance;
}
.hero__title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold-lite),var(--gold) 42%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__title,.hero__lead{text-shadow:0 2px 26px rgba(0,0,0,.5)}
.hero__lead{font-size:clamp(1rem,1.45vw,1.16rem);color:var(--fg-2);max-width:46ch;margin-bottom:34px}
.hero__actions{display:flex;flex-wrap:wrap;gap:13px}

/* trust strip — same rhythm as the rest of the page */
.hero__trust{margin-top:clamp(30px,4.2vw,48px);padding-top:22px;border-top:1px solid var(--line)}
.hero__trust-label{
  display:block;font-family:var(--ff-alt);font-size:.7rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--fg-3);
}
.hero__brands{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,36px);margin-top:14px}
.hero__brands li{
  font-family:var(--ff-alt);font-size:clamp(.82rem,1.1vw,.98rem);font-weight:700;
  letter-spacing:.18em;color:var(--fg-2);opacity:.78;
  transition:color .35s,opacity .35s;
}
.hero__brands li:hover{color:var(--gold);opacity:1}

/* The hero is the one band whose scrim is directional: weighted behind the
   headline and clearing entirely on the side the road runs away to, so the
   photograph is never dimmed where it is doing the work. It is deliberately
   lighter than the shared scrim — the 3D behind it is a bright midday plate,
   and a night-weight veil over daylight just reads as a dirty window.
   A short gradient at the top keeps the navigation legible against sky. */
.hero::before{
  background:
    linear-gradient(to right,rgba(10,10,13,.88) 0%,rgba(10,10,13,.66) 26%,rgba(10,10,13,.16) 54%,rgba(10,10,13,0) 70%),
    linear-gradient(to top,rgba(10,10,13,.82) 0%,rgba(10,10,13,0) 26%),
    linear-gradient(to bottom,rgba(10,10,13,.55) 0%,rgba(10,10,13,0) 14%);
}
[dir="rtl"] .hero::before{
  background:
    linear-gradient(to left,rgba(10,10,13,.88) 0%,rgba(10,10,13,.66) 26%,rgba(10,10,13,.16) 54%,rgba(10,10,13,0) 70%),
    linear-gradient(to top,rgba(10,10,13,.82) 0%,rgba(10,10,13,0) 26%),
    linear-gradient(to bottom,rgba(10,10,13,.55) 0%,rgba(10,10,13,0) 14%);
}

.hero__scroll{
  position:absolute;bottom:30px;left:50%;translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  font-family:var(--ff-alt);font-size:.68rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--fg-3);transition:color .3s;
}
.hero__scroll:hover{color:var(--gold)}
.hero__scrollline{width:1px;height:52px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.hero__scrollline::after{content:"";position:absolute;inset-inline:0;top:-52px;height:52px;background:linear-gradient(transparent,var(--gold-lite));animation:drop 2.1s var(--ease-io) infinite}
@keyframes drop{0%{transform:translateY(0)}100%{transform:translateY(104px)}}

/* ── marquee ──────────────────────────────────────────────
   The words were set as transparent text with a 1px outline. At a hairline
   that thin the Latin merely looked weak — but Arabic is a joined script
   built from connected strokes and dots, and reducing it to a wire outline
   takes the letters apart. Worse, the whole strip carried .12em of tracking,
   which in Arabic prises the joins open and stops the words being words at
   all. Both are gone: the type is filled, and the two scripts are set in
   their own faces at their own weights. */
.marquee{
  position:relative;z-index:4;overflow:hidden;direction:ltr;
  padding-block:24px;
  /* words arrive and leave instead of being sliced off at the edge */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{display:flex;gap:46px;width:max-content;align-items:center;will-change:transform;direction:ltr}
.marquee__track span{
  font-family:var(--ff-alt);
  font-size:clamp(1.1rem,2.5vw,2rem);
  font-weight:700;letter-spacing:.07em;line-height:1.15;
  color:rgba(244,243,241,.9);
  white-space:nowrap;
}
/* Tajawal 800 is already self-hosted, so the heavier Arabic costs nothing to
   download. It is set a shade larger as well: at matching point sizes Arabic
   reads smaller than Latin caps, and matching the NUMBER is not the same as
   matching the presence. */
.marquee__track span[lang="ar"]{
  font-family:var(--ff);font-weight:800;letter-spacing:normal;
  font-size:clamp(1.25rem,2.9vw,2.3rem);
}
.marquee__track .is-brand{color:var(--gold)}
.marquee__track b{
  color:var(--gold);font-size:clamp(.58rem,1vw,.8rem);opacity:.7;
  transform:translateY(-.1em);
}

/* ── stats ──────────────────────────────────────────────── */
.stats{position:relative;z-index:4;padding-block:clamp(48px,7vw,80px)}
.stats__grid{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);
}
/* dividers as cell borders — a gap+background here would bleed into the
   grid's inline padding and show as two grey slabs at the edges */
.stat{padding:26px 18px;text-align:center;border-inline-start:1px solid var(--line)}
.stat:first-child{border-inline-start:0}
.stat .num{
  display:block;font-family:var(--ff-alt);font-weight:700;
  font-size:clamp(2.2rem,5vw,3.9rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(170deg,var(--gold-lite),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{display:block;margin-top:10px;font-size:.88rem;color:var(--fg-2)}

/* ── about ──────────────────────────────────────────────── */
.about__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,6vw,90px);align-items:start}
.about__body p+p{margin-top:20px}
.about__body strong{color:var(--gold-lite);font-weight:700}
.ticks{margin-top:34px;display:grid;gap:14px}
.ticks li{position:relative;padding-inline-start:32px;color:var(--fg-2);font-size:.97rem}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;width:16px;height:16px;
  border-radius:50%;border:1px solid var(--gold);
  background:radial-gradient(circle,var(--gold) 0 2.6px,transparent 2.6px);
}

/* ── service cards ──────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.card{
  position:relative;padding:36px 32px 40px;border-radius:var(--r);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border:1px solid var(--line);overflow:hidden;isolation:isolate;
  transform-style:preserve-3d;will-change:transform;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.card:hover{border-color:rgba(232,185,35,.42);box-shadow:0 26px 64px -30px rgba(232,185,35,.42)}
.card__glow{
  position:absolute;width:320px;height:320px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(232,185,35,.26),transparent 68%);
  opacity:0;transition:opacity .45s;pointer-events:none;
  translate:-50% -50%;left:var(--mx,50%);top:var(--my,50%);
}
.card:hover .card__glow{opacity:1}
.card__no{
  position:absolute;top:22px;inset-inline-end:26px;
  font-family:var(--ff-alt);font-size:2.9rem;font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);
  transition:-webkit-text-stroke-color .45s;
}
.card:hover .card__no{-webkit-text-stroke-color:rgba(232,185,35,.5)}
.card__icon{
  width:58px;height:58px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(232,185,35,.18),rgba(232,185,35,.04));
  border:1px solid rgba(232,185,35,.26);margin-bottom:24px;
  transform:translateZ(38px);
}
.card__icon svg{width:27px;height:27px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.32rem;font-weight:700;margin-bottom:12px;transform:translateZ(22px)}
.card p{color:var(--fg-2);font-size:.96rem;transform:translateZ(12px)}

/* ── network ────────────────────────────────────────────── */
.network__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.network__copy .btn{margin-top:32px}
.cities{display:grid;gap:10px}
.city{
  position:relative;display:flex;align-items:baseline;gap:14px;
  padding:20px 24px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .45s,background .45s;
}
.city:hover{transform:translateX(-10px);border-color:rgba(232,185,35,.4);background:rgba(232,185,35,.06)}
.city b{font-size:1.1rem;font-weight:700}
.city span{font-size:.85rem;color:var(--fg-3);margin-inline-start:auto}
.city__pulse{
  position:absolute;inset-inline-start:24px;top:50%;translate:0 -50%;
  width:8px;height:8px;border-radius:50%;background:var(--gold);
  animation:ping 2.4s var(--ease) infinite;
}
.city:has(.city__pulse){padding-inline-start:50px}

/* ── work (horizontal) ──────────────────────────────────── */
.work{position:relative;z-index:4}
.work__pin{height:100svh;display:flex;align-items:center;overflow:hidden}
.work__track{display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding-inline:var(--pad);will-change:transform}
.work__intro{flex:0 0 auto;width:min(440px,78vw)}
.work__intro .h2{margin-block:10px 18px;line-height:1.2}
.work__hint{display:inline-block;margin-top:22px;font-size:.76rem;letter-spacing:.24em;color:var(--gold);animation:nudge 1.8s var(--ease-io) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
.wcard{flex:0 0 auto;width:min(420px,74vw)}
.wcard__media{
  position:relative;aspect-ratio:9/11;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--ink-3);
}
.wcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.wcard:hover .wcard__media img{transform:scale(1.07);filter:saturate(1.15)}
.wcard__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(14,14,16,.82),transparent 52%);
}
.wcard figcaption{padding-top:18px}
.wcard figcaption b{display:block;font-size:1.12rem;font-weight:700}
.wcard figcaption span{font-size:.85rem;color:var(--gold)}
.work__end{flex:0 0 auto;width:min(380px,74vw);text-align:center}
.work__end h3{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:800;line-height:1.24;margin-bottom:26px;letter-spacing:normal}
.work__end em{font-style:normal;background:linear-gradient(100deg,var(--gold-lite),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── process ────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.step{
  position:relative;padding:40px 30px 46px;
  background:rgba(255,255,255,.022);
  border-inline-start:1px solid var(--line);
  transition:background .5s var(--ease);
}
.step:first-child{border-inline-start:0}
.step:hover{background:rgba(255,255,255,.055)}
.step b{
  display:block;font-family:var(--ff-alt);font-size:.82rem;font-weight:700;
  letter-spacing:.2em;color:var(--gold);margin-bottom:26px;
}
.step h3{font-size:1.2rem;font-weight:700;margin-bottom:12px}
.step p{font-size:.94rem;color:var(--fg-2)}
.step::after{
  content:"";position:absolute;top:0;inset-inline-end:0;width:0;height:2px;
  background:linear-gradient(to left,var(--gold),transparent);transition:width .6s var(--ease);
}
.step:hover::after{width:100%}

/* ── faq ────────────────────────────────────────────────── */
.faq__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
.faq .section__head{margin-bottom:0}
.acc__item{border-bottom:1px solid var(--line)}
.acc__item summary{
  display:flex;align-items:center;gap:20px;cursor:pointer;list-style:none;
  padding-block:24px;font-size:clamp(1rem,1.6vw,1.16rem);font-weight:700;
  transition:color .3s;
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary:hover{color:var(--gold)}
.acc__item summary span{flex:1}
.acc__item summary i{
  position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-2);transition:border-color .35s,rotate .45s var(--ease);
}
.acc__item summary i::before,.acc__item summary i::after{
  content:"";position:absolute;inset:50% auto auto 50%;translate:-50% -50%;
  background:var(--gold);transition:opacity .3s;
}
.acc__item summary i::before{width:11px;height:1.5px}
.acc__item summary i::after{width:1.5px;height:11px}
.acc__item[open] summary{color:var(--gold)}
.acc__item[open] summary i{rotate:180deg;border-color:var(--gold)}
.acc__item[open] summary i::after{opacity:0}
.acc__body{overflow:hidden}
.acc__body p{padding-bottom:26px;color:var(--fg-2);max-width:62ch}

/* ── cta ────────────────────────────────────────────────── */
.cta{position:relative;z-index:2;padding-block:clamp(110px,16vh,190px);text-align:center;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:-4%;z-index:-2;
  background:url("../img/cta-bg.jpg") center/cover no-repeat;
  opacity:.34;filter:saturate(.9);
}

.cta__inner{display:grid;justify-items:center;gap:22px}
.cta__title{font-size:clamp(2.4rem,7vw,6rem);font-weight:800;line-height:1.1;letter-spacing:normal}
.cta__inner p{color:var(--fg-2);max-width:48ch}

/* ── contact ────────────────────────────────────────────── */
.contact{position:relative;z-index:4}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.contact__list{margin-top:44px;display:grid;gap:26px}
.contact__lbl{display:block;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin-bottom:6px}
.contact__val{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:700;transition:color .3s}
a.contact__val:hover{color:var(--gold)}
.socials{display:flex;gap:12px;margin-top:40px}
.socials a{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);transition:border-color .35s,background .35s,transform .35s var(--ease);
}
.socials svg{width:20px;height:20px;fill:none;stroke:var(--fg-2);stroke-width:1.6;transition:stroke .35s}
.socials a:hover{border-color:var(--gold);background:var(--gold-dim);transform:translateY(-3px)}
.socials a:hover svg{stroke:var(--gold)}

.form{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding:clamp(24px,3vw,40px);border-radius:var(--r);
  background:rgba(255,255,255,.028);border:1px solid var(--line);
}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field select,.field textarea{
  width:100%;padding:24px 16px 10px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  transition:border-color .35s,background .35s;resize:vertical;
}
.field select{padding-top:24px;color:var(--fg);appearance:none;cursor:pointer}
.field select option{background:var(--ink-2);color:var(--fg)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:rgba(232,185,35,.05)}
.field label{
  position:absolute;inset-inline-start:17px;top:17px;font-size:.95rem;color:var(--fg-3);
  pointer-events:none;transform-origin:100% 0;
  transition:transform .3s var(--ease),color .3s;
}
.field input:focus+label,.field textarea:focus+label,
.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label,
.label--static{transform:translateY(-10px) scale(.76);color:var(--gold)}
.field:has(select) .label--static{transform:translateY(-10px) scale(.76)}
.field:has(select)::after{
  content:"";position:absolute;inset-inline-start:18px;top:26px;
  width:8px;height:8px;border-inline-start:1.5px solid var(--fg-3);border-bottom:1.5px solid var(--fg-3);
  rotate:-45deg;pointer-events:none;
}
.form .btn{grid-column:1/-1;margin-top:8px}
.form__note{grid-column:1/-1;font-size:.85rem;color:var(--fg-3);text-align:center}
.form__note a{color:var(--gold)}
.form__status{grid-column:1/-1;font-size:.88rem;text-align:center;min-height:1.4em;color:var(--gold)}
.field.is-error input,.field.is-error select{border-color:#E0553F}

/* ── footer ─────────────────────────────────────────────── */
.footer{position:relative;z-index:4;padding-top:clamp(56px,7vw,86px)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:56px}
.footer__logo{height:66px;width:auto}
.footer__desc{margin-top:18px;color:var(--fg-2);font-size:.94rem;max-width:36ch}
.footer h3{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer li{margin-bottom:11px;color:var(--fg-2);font-size:.94rem}
.footer li a{transition:color .3s}
.footer li a:hover{color:var(--gold)}
.footer__bar{
  border-top:1px solid var(--line);padding:22px var(--pad);
  display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;
  font-size:.82rem;color:var(--fg-3);max-width:var(--wrap);margin-inline:auto;width:100%;
}


/* ── whatsapp fab ───────────────────────────────────────── */
.whatsapp{
  position:fixed;bottom:22px;inset-inline-start:22px;z-index:110;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#2AC46A,#128C4A);
  box-shadow:0 10px 34px -10px rgba(42,196,106,.7);
  transition:transform .4s var(--ease),box-shadow .4s;
  opacity:0;translate:0 70px;
}
.whatsapp.is-in{opacity:1;translate:0 0}
.whatsapp:hover{transform:scale(1.08);box-shadow:0 16px 44px -10px rgba(42,196,106,.9)}
.whatsapp svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.whatsapp svg path:last-child{fill:#fff;stroke:none}

/* ── reveal states (set by JS; CSS fallback via .no-js) ─── */
.reveal-up{opacity:1}
html.js .reveal-up{opacity:0;transform:translateY(34px)}
html.js .hero__scroll{opacity:0}
html.js .whatsapp{opacity:0}
html:not(.js) .preloader,html:not(.js) .cursor{display:none}
html:not(.js) .whatsapp{opacity:1;translate:0 0}
.char{display:inline-block;will-change:transform}
html.no-anim .reveal-up{opacity:1;transform:none}

/* ══ responsive ══════════════════════════════════════════ */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(odd){border-inline-start:0}
  .step:nth-child(n+3){border-top:1px solid var(--line)}
  .about__grid,.network__grid,.faq__grid,.contact__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--head-h:72px}
  .burger{display:grid}
  /* the burger is the menu control on a phone, so the group it lives in
     stays — only the introductions inside it go */
  .header.is-past-hero .header__end{opacity:1;visibility:visible;transform:none}
  .header.is-past-hero .langsw,
  .header.is-past-hero .header__cta{display:none}
  /* ...but the language switch cannot simply vanish for the rest of the page.
     On a phone the burger IS the menu, so the OPEN menu carries the switch —
     otherwise a reader deep in the FAQ has no way to change language without
     scrolling all the way back to the top. */
  .header.is-menu-open .langsw{
    display:inline-flex;position:relative;z-index:2;
    opacity:1;visibility:visible;transform:none;
  }
  .header.is-menu-open .header__end{opacity:1;visibility:visible;transform:none}
  .header__cta{display:none}
  .nav{
    /* justify-self:center is for the desktop bar. Left on here it makes the
       overlay shrink-wrap its own menu list instead of stretching to inset:0,
       so the full-screen menu opens as a narrow 116px column down the middle
       of the screen. */
    justify-self:stretch;align-self:stretch;
    position:fixed;inset:0;margin:0;background:rgba(10,10,12,.97);backdrop-filter:blur(22px);
    display:grid;place-items:center;
    clip-path:circle(0 at calc(100% - 44px) 36px);
    transition:clip-path .75s var(--ease);
  }
  .nav.is-open{clip-path:circle(150% at calc(100% - 44px) 36px)}
  /* the capsule and its sliding pill belong to the desktop bar only */
  .nav ul{flex-direction:column;gap:26px;text-align:center;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav__pill{display:none}
  .header{padding-inline:16px 12px;gap:10px}
    .nav a{font-size:1.5rem;font-weight:700;color:var(--fg)}
  .hero{padding-top:calc(var(--head-h) + 34px);padding-bottom:92px}
  .hero__copy{max-width:none}
  .hero::before,[dir="rtl"] .hero::before{
    background:linear-gradient(to bottom,rgba(10,10,13,.88) 0%,rgba(10,10,13,.72) 52%,rgba(10,10,13,.18) 100%);
  }
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(odd){border-inline-start:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .hero__scroll{display:none}
  .header__end{gap:8px}
  .work__pin{height:auto;padding-block:80px}
  .work__track{flex-direction:column;align-items:stretch;transform:none!important;gap:44px}
  .work__intro,.wcard,.work__end{width:100%}
  .work__hint{display:none}
}
@media (max-width:620px){
  .cards,.steps{grid-template-columns:1fr}
  .step{border-inline-start:0}
  .step:nth-child(n+2){border-top:1px solid var(--line)}
  .form{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero{padding-bottom:80px}
  .btn{padding:14px 24px}
}

/* ── reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .grain{animation:none}
  .reveal-up{opacity:1!important;transform:none!important}
  #webgl{opacity:.55}
}

/* ── print ──────────────────────────────────────────────── */
@media print{
  #webgl,.grain,.vignette,.cursor,.scrollbar,.whatsapp,.preloader,.marquee{display:none!important}
  body{background:#fff;color:#000}
}


/* ══ direction-sensitive details ═════════════════════════ */
[dir="ltr"] .kicker::before{background:linear-gradient(to right,var(--gold),transparent)}
[dir="ltr"] .kicker.center::after{background:linear-gradient(to left,var(--gold),transparent)}
[dir="ltr"] .scrollbar i,
[dir="ltr"] .preloader__bar i{background:linear-gradient(to right,var(--gold-lite),var(--gold-deep))}
[dir="ltr"] .btn svg{transform:scaleX(-1)}
[dir="ltr"] .btn:hover svg{transform:scaleX(-1) translateX(-5px)}
[dir="ltr"] .btn--ghost::before{transform-origin:0 50%}
[dir="ltr"] .city:hover{transform:translateX(10px)}
[dir="ltr"] .work__hint::after{content:" →"}
[dir="rtl"] .work__hint::before{content:"← "}
.field:has(select)::after{inset-inline-start:auto;inset-inline-end:18px}