/* ============================================================================
   SOgistic — marketing site
   Built on the Sogistic Design System tokens (styles.css + tokens/, copied in
   so this folder deploys as a standalone static site).
   Only site-level additions live here; every colour, radius, shadow and easing
   below resolves back to a design-system token.
   ========================================================================== */

:root{
  --ink:var(--purple-950);
  --ink-2:var(--purple-900);
  --on-ink:#FFFFFF;
  --on-ink-mut:rgba(255,255,255,.62);
  --on-ink-fade:rgba(255,255,255,.34);
  --hair-ink:rgba(255,255,255,.12);
  --sec-pad:clamp(96px,14vh,180px);
  --gut:clamp(20px,5vw,64px);
  --max:1240px;
  --ease-cine:cubic-bezier(.22,.65,.18,1);
  --fs-huge:clamp(44px,8.4vw,132px);
  --fs-big:clamp(34px,5.2vw,76px);
}

html{scroll-behavior:auto}
body{background:var(--ink);color:var(--text-body);overflow-x:hidden}
body.is-locked{overflow:hidden}
main{position:relative;z-index:2}
img{max-width:100%;display:block}
::selection{background:var(--purple-400);color:#fff}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.mut{color:var(--text-muted)}
.overline{font:var(--type-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-brand);display:inline-block}
.h-big{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-big);line-height:.98;letter-spacing:-.006em;color:var(--text-heading)}
.display{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-huge);line-height:.92;letter-spacing:-.008em;color:var(--on-ink)}
.display--2{font-size:clamp(36px,6.4vw,104px)}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block;will-change:transform}

/* ── buttons (design-system pill spec) ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--control-h-md);
  padding:0 var(--sp-6);border-radius:var(--radius-pill);border:1px solid transparent;
  font:var(--type-label);font-size:var(--fs-15);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn .ms{font-size:var(--icon-sm)}
.btn--sm{height:var(--control-h-sm);padding:0 var(--sp-4);font-size:var(--fs-13)}
.btn--lg{height:var(--control-h-lg);padding:0 var(--sp-8)}
.btn--pri{background:var(--brand-primary);color:#fff;box-shadow:var(--shadow-brand)}
.btn--pri:hover{background:var(--brand-primary-hover);color:#fff}
.btn--onbrand{background:#fff;color:var(--text-brand)}
.btn--onbrand:hover{background:var(--purple-50);color:var(--text-brand)}
.btn--ghostbrand{background:transparent;color:#fff;border-color:var(--border-on-brand)}
.btn--ghostbrand:hover{background:rgba(255,255,255,.1);color:#fff}
.btn--ghost{background:transparent;color:var(--on-ink);border-color:var(--hair-ink)}
.btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.hdr.is-light .btn--ghost{color:var(--text-brand);border-color:var(--border-strong)}
.hdr.is-light .btn--ghost:hover{background:var(--purple-50);color:var(--text-brand)}

/* ============================== loader ==================================== */
.loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-content:center;justify-items:center;gap:var(--sp-5)}
.loader__logo{display:block;height:54px;width:calc(54px * 1212 / 333);color:var(--on-ink);
  --logo-knock:var(--brand-primary);animation:lpulse 1.6s var(--ease-in-out) infinite}
.loader__bar{width:180px;height:2px;background:var(--hair-ink);border-radius:var(--radius-pill);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--grad-brand);background:linear-gradient(90deg,var(--purple-400),#fff)}
.loader__cap{font:var(--type-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--on-ink-fade)}
@keyframes lpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ============================== pin cursor ================================ */
.pin{position:fixed;top:0;left:0;z-index:180;pointer-events:none;opacity:0;
  transform:translate3d(-100px,-100px,0);will-change:transform}
.pin__svg{overflow:visible;filter:drop-shadow(0 6px 14px rgba(27,13,43,.45))}
.pin__body{fill:var(--brand-primary);stroke:rgba(255,255,255,.9);stroke-width:1.5}
.pin__eye{fill:#fff}
.pin__label{position:absolute;left:38px;top:6px;white-space:nowrap;font:var(--type-overline);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:#fff;background:var(--brand-primary);
  padding:5px 10px;border-radius:var(--radius-pill);opacity:0;transform:translateX(-6px)}
.pin.is-dark .pin__body{fill:#fff;stroke:var(--purple-300)}
.pin.is-dark .pin__eye{fill:var(--brand-primary)}
.pin.is-dark .pin__label{background:#fff;color:var(--text-brand)}
@media (hover:hover) and (pointer:fine){
  body.pin-on,body.pin-on *{cursor:none !important}
}

/* ============================== header ==================================== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:120;padding:var(--sp-4) var(--gut);
  transition:padding var(--dur-slow) var(--ease-out)}
.hdr__inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:var(--sp-6);
  height:56px;padding:0 var(--sp-4);border:1px solid transparent;border-radius:var(--radius-pill);
  transition:background var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out),
             box-shadow var(--dur-slow) var(--ease-out),padding var(--dur-slow) var(--ease-out),
             max-width var(--dur-slow) var(--ease-out)}
.hdr.is-stuck{padding-top:var(--sp-3)}
/* the pill contracts on scroll, but only as far as its contents allow — the
   CTA has to stay inside the container, not hang off the end of it */
.hdr.is-stuck .hdr__inner{max-width:1020px;background:rgba(27,13,43,.72);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-color:var(--hair-ink);box-shadow:var(--shadow-lg);
  padding-inline:var(--sp-4) var(--sp-3);gap:var(--sp-4)}
.hdr.is-stuck .nav a{padding:9px var(--sp-3)}
.hdr.is-stuck .hdr__end{gap:var(--sp-2)}
.hdr.is-light .hdr__inner{background:rgba(255,255,255,.82);border-color:var(--border-default);box-shadow:var(--shadow-md)}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
/* the lockup: currentColor is the mark + wordmark, --logo-knock the monogram */
.brand__logo{display:block;height:30px;width:calc(30px * 1212 / 333);color:var(--on-ink);
  --logo-knock:var(--brand-primary);
  transition:color var(--dur-slow) var(--ease-out)}
.hdr.is-light .brand__logo{color:var(--brand-primary);--logo-knock:#fff}
.brand--ftr .brand__logo{height:46px;width:calc(46px * 1212 / 333)}

.nav{display:flex;align-items:center;gap:var(--sp-1);margin-inline-start:auto}
.nav a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:9px var(--sp-4);white-space:nowrap;
  border-radius:var(--radius-pill);font:var(--type-label);color:var(--on-ink-mut);text-decoration:none;
  transition:color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out)}
.nav a i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.4);
  transition:opacity var(--dur-base),transform var(--dur-base) var(--ease-out)}
.nav a:hover{color:var(--on-ink);background:rgba(255,255,255,.08);text-decoration:none}
.nav a:hover i,.nav a.on i{opacity:1;transform:scale(1)}
.nav a.on{color:var(--on-ink)}
.hdr.is-light .nav a{color:var(--text-muted)}
.hdr.is-light .nav a:hover,.hdr.is-light .nav a.on{color:var(--text-brand);background:var(--purple-50)}

.hdr__end{display:flex;align-items:center;gap:var(--sp-3);margin-inline-start:auto}
/* ── language picker ─────────────────────────────────────────────────────── */
.lang{position:relative;flex:0 0 auto}
.lang__btn{display:inline-flex;align-items:center;gap:6px;height:var(--control-h-sm);padding-inline:var(--sp-3) 10px;
  border:1px solid var(--hair-ink);border-radius:var(--radius-pill);background:transparent;cursor:pointer;
  font:var(--type-label);font-size:var(--fs-13);color:var(--on-ink-mut);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.lang__btn:hover{background:rgba(255,255,255,.08);color:var(--on-ink)}
.lang__btn .ms{font-size:var(--icon-sm)}
.lang__chev{font-size:18px !important;transition:transform var(--dur-base) var(--ease-out)}
.lang.is-open .lang__chev{transform:rotate(180deg)}
.lang__code{font:var(--type-mono);font-size:var(--fs-12);letter-spacing:.04em}
.hdr.is-light .lang__btn{border-color:var(--border-default);color:var(--text-muted)}
.hdr.is-light .lang__btn:hover{background:var(--purple-50);color:var(--text-brand)}

.lang__menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:168px;margin:0;padding:var(--sp-2);
  list-style:none;border-radius:var(--radius-md);background:rgba(27,13,43,.92);border:1px solid var(--hair-ink);
  box-shadow:var(--shadow-lg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base)}
.lang.is-open .lang__menu{opacity:1;visibility:visible;transform:none}
/* the picker names every language in its own script, and that lone Arabic
   string is enough to pull the 740KB DejaVu Arabic file on an English page.
   The system stack renders these names perfectly well and keeps it off the
   wire until someone actually switches to Arabic. */
.lang__menu button{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);width:100%;
  padding:9px var(--sp-3);border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer;
  font:var(--type-label);font-family:system-ui,"Segoe UI",sans-serif;color:var(--on-ink-mut);text-align:left;
  transition:background var(--dur-fast),color var(--dur-fast)}
.lang__menu button:hover{background:rgba(255,255,255,.09);color:#fff}
.lang__menu button[aria-selected="true"]{color:#fff;background:rgba(115,80,160,.34)}
.lang__menu button[aria-selected="true"]::after{content:"check";font-family:"Material Symbols Rounded";
  font-size:17px;color:var(--purple-200)}
.hdr.is-light .lang__menu{background:rgba(255,255,255,.97);border-color:var(--border-default)}
.hdr.is-light .lang__menu button{color:var(--text-body)}
.hdr.is-light .lang__menu button:hover{background:var(--purple-50);color:var(--text-brand)}
.hdr.is-light .lang__menu button[aria-selected="true"]{background:var(--purple-50);color:var(--text-brand)}
.hdr.is-light .lang__menu button[aria-selected="true"]::after{color:var(--brand-primary)}

.hdr__prog{position:absolute;left:var(--gut);right:var(--gut);bottom:2px;height:1px;background:transparent}
.hdr__prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,transparent,var(--purple-400),var(--purple-200))}

.burger{display:none;width:40px;height:40px;border:1px solid var(--hair-ink);background:transparent;
  border-radius:var(--radius-pill);cursor:pointer;padding:0;place-content:center;gap:5px}
.burger i{display:block;width:16px;height:1.5px;background:var(--on-ink);margin:0 auto;transition:transform var(--dur-base) var(--ease-out)}
.burger i+i{margin-top:5px}
body.menu-open .burger i:first-child{transform:translateY(3.2px) rotate(45deg)}
body.menu-open .burger i:last-child{transform:translateY(-3.2px) rotate(-45deg)}

/* ============================== menu overlay ============================== */
.menu{position:fixed;inset:0;z-index:110;visibility:hidden;pointer-events:none;
  display:grid;align-content:center}
.menu__bg{position:absolute;inset:0;background:var(--grad-brand);clip-path:circle(0% at calc(100% - 60px) 48px);
  transition:clip-path .72s var(--ease-cine)}
.menu__list{position:relative;width:100%;display:grid;gap:var(--sp-2);padding:0 var(--gut);max-width:var(--max);margin:0 auto}
.menu__list a{display:flex;align-items:baseline;gap:var(--sp-5);font-family:var(--font-display);
  font-weight:var(--fw-regular);font-size:clamp(32px,7vw,72px);line-height:1.1;letter-spacing:-.006em;
  color:#fff;text-decoration:none;opacity:0;transform:translateY(28px)}
.menu__list a:hover{text-decoration:none;color:var(--purple-200)}
.menu__list a em{font:var(--type-mono);font-size:var(--fs-13);font-style:normal;color:var(--on-ink-mut)}
.menu__acts{position:relative;display:flex;flex-wrap:wrap;gap:var(--sp-3);
  max-width:var(--max);margin:var(--sp-10) auto 0;padding:0 var(--gut)}
.menu__acts .btn{opacity:0;transform:translateY(20px)}
body.menu-open .menu__acts .btn{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out) .5s,transform .5s var(--ease-out) .5s}
body.menu-open .menu{visibility:visible;pointer-events:auto}
body.menu-open .menu__bg{clip-path:circle(150% at calc(100% - 60px) 48px)}

/* ============================== route rail ================================ */
/* A hairline route with a stop per section. Labels stay out of the way until
   the rail is hovered, so it never crowds the content it sits over. */
.rail{position:fixed;right:calc(var(--gut) * .5);top:50%;transform:translateY(-50%);z-index:100;
  height:min(42vh,340px);width:12px;display:flex;justify-content:center;opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out)}
.rail__line{position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--hair-ink) 8%,var(--hair-ink) 92%,transparent)}
.rail__line i{position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(180deg,transparent,var(--purple-300) 22%,var(--purple-200))}
.rail__stops{position:absolute;inset:0}
.rail__stop{position:absolute;left:50%;width:4px;height:4px;margin-left:-2px;margin-top:-2px;border-radius:50%;
  background:var(--on-ink-fade);cursor:pointer;
  transition:background var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base) var(--ease-cine)}
.rail__stop::before{content:"";position:absolute;inset:-9px -8px}   /* hit area */
.rail__stop:hover{background:var(--on-ink);transform:scale(1.5)}
.rail__stop.on{background:#fff;transform:scale(1.9);box-shadow:0 0 0 4px rgba(255,255,255,.12)}
/* section names sit beside every stop; colour follows whatever the rail is
   passing over, so they stay legible on both the ink and the pale sections */
.rail__cap{position:absolute;right:14px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font:var(--type-caption);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-ink-fade);pointer-events:none;opacity:0;
  /* the rail is taller than one section, so a label can sit over the next
     surface along — the halo keeps it readable across the seam */
  text-shadow:0 1px 4px rgba(27,13,43,.75);
  transition:color var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
.rail__stop:hover .rail__cap,.rail__stop.on .rail__cap{opacity:1}
/* only wide viewports have margin enough for the names to clear the content */
@media (min-width:1400px){ .rail__cap{opacity:1} }
.rail__stop:hover .rail__cap{color:#fff}
.rail__stop.on .rail__cap{color:#fff;font-weight:var(--fw-bold)}
.rail__pin{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:9px;height:9px;
  border-radius:50%;border:1.5px solid var(--purple-200);background:rgba(27,13,43,.6)}
.rail__pin .ms{display:none}
.rail.is-light .rail__line{background:linear-gradient(180deg,transparent,var(--border-default) 8%,var(--border-default) 92%,transparent)}
.rail.is-light .rail__line i{background:linear-gradient(180deg,transparent,var(--purple-400) 22%,var(--brand-primary))}
.rail.is-light .rail__stop{background:var(--border-strong)}
.rail.is-light .rail__stop:hover{background:var(--text-muted)}
.rail.is-light .rail__stop.on{background:var(--brand-primary);box-shadow:0 0 0 4px rgba(78,46,113,.12)}
.rail.is-light .rail__cap{color:var(--text-subtle);text-shadow:0 1px 4px rgba(255,255,255,.85)}
.rail.is-light .rail__stop:hover .rail__cap{color:var(--text-brand)}
.rail.is-light .rail__stop.on .rail__cap{color:var(--text-brand)}
.rail.is-light .rail__pin{border-color:var(--brand-primary);background:rgba(255,255,255,.8)}

/* ============================== globe ===================================== */
.globe{position:fixed;inset:0;z-index:1;pointer-events:none}
.globe canvas{width:100%;height:100%;display:block}
.globe__vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%,transparent 38%,rgba(27,13,43,.55) 78%,var(--ink) 100%)}

/* ============================== hero ====================================== */
.hero{height:520vh;position:relative}
.hero__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.hero__scrim{position:absolute;inset:0;opacity:.42;pointer-events:none;
  background:radial-gradient(68% 58% at 50% 50%,rgba(27,13,43,.76) 0%,rgba(27,13,43,.5) 45%,rgba(27,13,43,0) 78%)}
.hero__stage{position:absolute;inset:0;display:grid;align-content:center;padding:0 var(--gut);
  max-width:var(--max);margin:0 auto;pointer-events:none}
.hero__stage--a{align-content:center}
.hero__stage--b{place-content:center;text-align:center;justify-items:center;opacity:0}
.hero__stage--c{place-content:center;justify-items:center;opacity:0}
@media (min-width:1081px){
  .hero__stage--c{justify-content:end;padding-right:clamp(24px,4vw,80px)}
}

.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font:var(--type-overline);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--on-ink-mut);margin-bottom:var(--sp-5);
  padding:8px var(--sp-4);border:1px solid var(--hair-ink);border-radius:var(--radius-pill);width:max-content;
  background:rgba(27,13,43,.35);backdrop-filter:blur(8px)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--purple-300)}
.lede{margin-top:var(--sp-6);max-width:36ch;font-size:clamp(15px,1.4vw,20px);line-height:1.5;color:var(--on-ink-mut)}

.hero__svc{list-style:none;margin:var(--sp-8) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}
.hero__svc li{display:inline-flex;align-items:center;gap:var(--sp-2);padding:10px var(--sp-5);
  border:1px solid var(--hair-ink);border-radius:var(--radius-pill);background:rgba(27,13,43,.42);
  backdrop-filter:blur(8px);font:var(--type-label);color:var(--on-ink)}
.hero__svc li .ms{font-size:var(--icon-sm);color:var(--purple-300)}

.hq-card{background:rgba(27,13,43,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hair-ink);border-radius:var(--radius-xl);padding:var(--sp-8) var(--sp-10);
  text-align:center;box-shadow:var(--shadow-lg);max-width:min(92vw,460px)}
.hq-card .overline{color:var(--purple-300)}
.hq-card__city{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:clamp(44px,7vw,86px);
  line-height:1;letter-spacing:-.008em;color:#fff;margin:var(--sp-3) 0 var(--sp-2)}
.hq-card__sub{color:var(--on-ink-mut);font-size:var(--fs-16)}
.hq-card__coords{display:flex;gap:var(--sp-5);justify-content:center;margin-top:var(--sp-5);
  font:var(--type-mono);color:var(--purple-200)}
.hq-card__meta{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid var(--hair-ink);font:var(--type-caption);color:var(--on-ink-fade)}
.hq-card__meta .ms{font-size:var(--icon-sm)}

.hero__scroll{position:absolute;left:50%;bottom:var(--sp-10);transform:translateX(-50%);display:grid;
  justify-items:center;gap:var(--sp-3)}
.hero__scroll-txt{font:var(--type-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--on-ink-fade)}
.hero__scroll-track{width:1px;height:54px;background:var(--hair-ink);position:relative;overflow:hidden}
.hero__scroll-track i{position:absolute;top:-54px;left:0;width:100%;height:54px;
  background:linear-gradient(180deg,transparent,var(--purple-200));animation:sdrop 2.2s var(--ease-in-out) infinite}
@keyframes sdrop{0%{transform:translateY(0)}100%{transform:translateY(108px)}}

/* ============================== manifesto ================================= */
.manifesto{position:relative;z-index:3;background:var(--ink);padding:var(--sec-pad) 0 calc(var(--sec-pad) * .7);
  border-top:1px solid var(--hair-ink)}
.manifesto__txt{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:clamp(24px,3.6vw,52px);
  line-height:1.18;letter-spacing:-.005em;color:var(--on-ink-fade);max-width:22ch}
.manifesto__txt span{transition:color .4s var(--ease-out)}
.manifesto__txt span.lit{color:var(--on-ink)}
.manifesto__marks{display:flex;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-16);padding-top:var(--sp-8);
  border-top:1px solid var(--hair-ink)}
.manifesto__marks div{display:grid;gap:var(--sp-1)}
.manifesto__marks b{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:clamp(32px,4vw,56px);
  line-height:1;color:var(--purple-200);letter-spacing:-.005em}
.manifesto__marks span{font:var(--type-caption);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--on-ink-fade)}

/* ============================== services (horizontal) ===================== */
.svc{position:relative;z-index:3;background:var(--ink)}
.svc__pin{height:100vh;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-8);overflow:hidden}
.svc__head{max-width:var(--max);width:100%;margin:0 auto;padding:0 var(--gut)}
.svc__head .h-big{color:var(--on-ink);margin-top:var(--sp-3)}
.svc__head .overline{color:var(--purple-300)}
.svc__track{display:flex;gap:var(--sp-6);padding:0 var(--gut);will-change:transform}
.svc__panel{position:relative;flex:0 0 auto;width:min(78vw,510px);height:min(60vh,540px);overflow:hidden;
  border-radius:var(--radius-xl);border:1px solid var(--hair-ink);padding:var(--sp-8);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 62%,var(--ink)) 0%,var(--ink-2) 72%);
  display:grid;align-content:end;gap:var(--sp-2);box-shadow:var(--shadow-lg)}
.svc__num{position:absolute;top:var(--sp-6);left:var(--sp-8);font:var(--type-mono);font-size:var(--fs-13);color:var(--on-ink-mut)}
/* a crisp icon on its own tinted tile, sat under the card number */
.svc__glyph{position:absolute;top:var(--sp-12);left:var(--sp-8);display:grid;place-items:center;width:64px;height:64px;
  border-radius:var(--radius-md);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:32px !important;box-shadow:var(--shadow-sm);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)}
.svc__glyph::after{content:"";position:absolute;inset:-40% -40% -60% -40%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.16),transparent 70%);
  pointer-events:none;z-index:-1}
.svc__panel h3{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:clamp(26px,3vw,40px);
  letter-spacing:-.005em;color:#fff;line-height:1}
.svc__panel p{color:var(--on-ink-mut);font-size:var(--fs-16);max-width:24ch}
.svc__code{font:var(--type-mono);font-size:var(--fs-12);color:var(--purple-200);margin-top:var(--sp-3);
  padding:5px 10px;border:1px solid var(--hair-ink);border-radius:var(--radius-xs);width:max-content}
.svc__wave{position:absolute;inset:auto -20% -30% -20%;height:52%;border-radius:50%;
  background:radial-gradient(60% 100% at 50% 0%,rgba(255,255,255,.14),transparent 70%);pointer-events:none}

/* ============================== how it works ============================== */
.how{position:relative;z-index:3;background:var(--surface-app);color:var(--text-body);
  padding:var(--sec-pad) 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.how__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--sp-16)}
.how__aside{position:sticky;top:22vh;align-self:start}
.how__aside h2{margin:var(--sp-4) 0 var(--sp-5)}
.how__steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-6)}
.step{position:relative;background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--sp-8);overflow:hidden;
  display:flex;gap:var(--sp-6);align-items:center}
.step__ghost{position:absolute;left:-6px;top:50%;transform:translateY(-50%);font-family:var(--font-display);
  font-weight:var(--fw-regular);font-size:120px;line-height:1;color:transparent;
  -webkit-text-stroke:2px var(--purple-300);opacity:.35;pointer-events:none}
.step__body{position:relative;padding-left:var(--sp-12)}
.step__body h3{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:clamp(20px,2.2vw,30px);
  letter-spacing:-.003em;color:var(--text-heading)}
.step__body p{color:var(--text-muted);margin-top:6px;font-size:var(--fs-16)}
.step__chip{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);padding:8px var(--sp-4);
  background:var(--purple-50);border-radius:var(--radius-pill);font:var(--type-label);color:var(--text-brand)}
.step__chip .ms{font-size:var(--icon-sm)}

/* ============================== escrow ==================================== */
.esc{position:relative;z-index:3;background:var(--ink);padding:var(--sec-pad) 0;overflow:hidden}
.esc::before{content:"";position:absolute;inset:auto -10% -40% 40%;height:80%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(115,80,160,.28),transparent 70%);filter:blur(10px);pointer-events:none}
.esc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--sp-16);align-items:center}
.esc__copy .overline{color:var(--purple-300)}
.esc__copy h2{color:var(--on-ink);margin:var(--sp-4) 0 var(--sp-5)}
.esc__copy p{color:var(--on-ink-mut);font-size:var(--fs-16);max-width:40ch}
.esc__list{list-style:none;margin:var(--sp-8) 0 0;padding:0;display:grid;gap:var(--sp-4)}
.esc__list li{display:flex;align-items:flex-start;gap:var(--sp-3);font:var(--type-body);color:var(--on-ink)}
.esc__list .ms{font-size:var(--icon-sm);color:var(--purple-300);margin-top:2px;flex:0 0 auto}

.esc__stage{position:relative}
.esc__card{position:relative;background:rgba(255,255,255,.045);border:1px solid var(--hair-ink);
  border-radius:var(--radius-lg);padding:var(--sp-6);box-shadow:var(--shadow-lg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.esc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
.esc__top .overline{color:var(--on-ink-fade)}
.esc__amt{display:block;margin-top:var(--sp-2);font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.005em;color:#fff}
.esc__amt em{font:var(--type-mono);font-size:var(--fs-13);font-style:normal;color:var(--purple-200);
  vertical-align:middle;margin-right:4px}
.esc__pill{display:inline-flex;align-items:center;gap:6px;padding:7px var(--sp-3);border-radius:var(--radius-pill);
  border:1px solid var(--hair-ink);background:rgba(27,13,43,.4);font:var(--type-caption);color:var(--on-ink-mut);white-space:nowrap}
.esc__pill .ms{font-size:15px;color:var(--purple-300)}
.esc__meter{display:flex;gap:5px;margin:var(--sp-6) 0}
.esc__meter i{flex:1;height:5px;border-radius:var(--radius-pill);background:rgba(255,255,255,.1);
  position:relative;overflow:hidden}
.esc__meter i::after{content:"";position:absolute;inset:0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--purple-400),var(--purple-200));transition:width .5s var(--ease-out)}
.esc__meter i.on::after{width:100%}

.esc__stages{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.esc__stages li{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-top:1px solid var(--hair-ink)}
.esc__n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:var(--type-mono);
  font-size:10px;color:var(--on-ink-fade);border:1px solid var(--hair-ink);transition:all var(--dur-base) var(--ease-out)}
.esc__l{font:var(--type-label);color:var(--on-ink);font-size:var(--fs-14)}
.esc__a{font:var(--type-mono);font-size:var(--fs-13);color:var(--on-ink-mut)}
.esc__c{font:var(--type-caption);font-size:10px;text-transform:uppercase;letter-spacing:var(--ls-caps);
  padding:4px 9px;border-radius:var(--radius-pill);background:rgba(255,255,255,.07);color:var(--on-ink-fade);white-space:nowrap}
.esc__c::after{content:"Held"}
.esc__stages li.done .esc__n{background:var(--purple-500);border-color:transparent;color:#fff}
.esc__stages li.done .esc__a{color:#fff}
.esc__stages li.done .esc__c{background:var(--success-100);color:var(--success-600)}
.esc__stages li.done .esc__c::after{content:"Released"}
.esc__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--hair-ink);
  font:var(--type-caption);color:var(--on-ink-fade)}
.esc__foot b{font:var(--type-h2);color:#fff}
.esc__foot em{font:var(--type-mono);font-size:var(--fs-12);font-style:normal;color:var(--purple-200);margin-right:4px}
.esc__ref{position:absolute;top:-16px;right:var(--sp-6);padding:7px var(--sp-3);border-radius:var(--radius-xs);
  background:var(--brand-primary);box-shadow:var(--shadow-brand)}
.esc__ref code{font:var(--type-mono);font-size:var(--fs-12);color:#fff}

/* ============================== SO assist ================================= */
.ai{position:relative;z-index:3;background:var(--surface-app);padding:var(--sec-pad) 0;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden}
.ai__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-16);align-items:center}
.ai__copy h2{margin:var(--sp-4) 0 var(--sp-5)}
.ai__copy p{font-size:var(--fs-16);max-width:42ch}
.ai__note{display:flex;gap:var(--sp-3);align-items:flex-start;margin-top:var(--sp-6);padding:var(--sp-4) var(--sp-5);
  background:var(--purple-50);border-radius:var(--radius-md);font:var(--type-body-sm);color:var(--text-brand)}
.ai__note .ms{font-size:var(--icon-sm);flex:0 0 auto;margin-top:1px}

.ai__card{position:relative;background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-6);overflow:hidden}
.ai__head{display:flex;align-items:center;gap:var(--sp-2);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border-default)}
.ai__head .ms{font-size:var(--icon-sm);color:var(--brand-primary)}
.ai__title{font:var(--type-label);color:var(--text-heading)}
.ai__tag{margin-left:auto;font:var(--type-caption);font-size:10px;text-transform:uppercase;
  letter-spacing:var(--ls-caps);color:var(--text-brand);background:var(--purple-50);padding:4px 9px;border-radius:var(--radius-pill)}
.ai__draft{min-height:44px;margin:var(--sp-4) 0;padding:var(--sp-3) var(--sp-4);background:var(--surface-sunken);
  border-radius:var(--radius-sm);font:var(--type-mono);font-size:var(--fs-12);color:var(--text-body);line-height:1.6}
.ai__caret{display:inline-block;width:2px;height:12px;background:var(--brand-primary);vertical-align:-2px;
  margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.ai__label{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-2);
  font:var(--type-label);color:var(--text-heading)}
.ai__label em{font:var(--type-caption);font-style:normal;color:var(--text-subtle)}
.ai__bids{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.ai__bid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-card)}
.ai__bid--top{background:var(--purple-50);border-color:var(--purple-300);grid-template-columns:auto 1fr auto auto}
.ai__rank{font:var(--type-mono);font-size:var(--fs-12);color:var(--text-subtle)}
.ai__who{display:grid;gap:2px;font:var(--type-label);color:var(--text-heading)}
.ai__who i{font:var(--type-caption);font-style:normal;color:var(--text-subtle)}
.ai__rate{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-20);
  letter-spacing:-.003em;color:var(--text-heading)}
.ai__bid--top .ai__rate{color:var(--text-brand)}
.ai__badge{font:var(--type-caption);font-size:10px;text-transform:uppercase;letter-spacing:var(--ls-caps);
  color:#fff;background:var(--brand-primary);padding:5px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.ai__guard{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid var(--border-default);font:var(--type-label);color:var(--text-muted)}
.ai__guard .ms{font-size:var(--icon-sm);color:var(--brand-primary)}

/* ============================== who it's for ============================== */
.aud{position:relative;z-index:3;background:var(--ink);padding:var(--sec-pad) 0;overflow:hidden}
.aud__head{margin-bottom:var(--sp-12)}
.aud__head .overline{color:var(--purple-300)}
.aud__head h2{color:var(--on-ink);margin-top:var(--sp-3)}
.aud__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
.aud__card{position:relative;overflow:hidden;padding:var(--sp-10) var(--sp-8) var(--sp-8);
  border:1px solid var(--hair-ink);border-radius:var(--radius-xl);
  background:linear-gradient(165deg,rgba(115,80,160,.28),rgba(27,13,43,.5) 62%);
  box-shadow:var(--shadow-lg);display:grid;align-content:start;gap:var(--sp-5)}
.aud__card--alt{background:linear-gradient(165deg,rgba(78,46,113,.42),rgba(27,13,43,.55) 62%)}
.aud__glyph{position:absolute;top:var(--sp-8);right:var(--sp-8);font-size:104px;line-height:1;
  color:rgba(255,255,255,.075);pointer-events:none}
.aud__card h3{position:relative;font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:clamp(22px,2.4vw,32px);letter-spacing:-.004em;color:#fff}
.aud__card ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.aud__card li{display:flex;align-items:flex-start;gap:var(--sp-3);font:var(--type-body);color:var(--on-ink-mut)}
.aud__card li .ms{font-size:var(--icon-sm);color:var(--purple-300);flex:0 0 auto;margin-top:2px}

/* ============================== provider tiers ============================ */
.tier{position:relative;z-index:3;background:var(--ink);padding:0 0 var(--sec-pad);overflow:hidden}
.tier__head{max-width:760px;margin-bottom:var(--sp-12)}
.tier__head .overline{color:var(--purple-300)}
.tier__head h2{color:var(--on-ink);margin:var(--sp-3) 0 var(--sp-5)}
.tier__lede{color:var(--on-ink-mut);font-size:var(--fs-16);max-width:52ch}
.tier__rail{position:relative;height:1px;background:var(--hair-ink);margin:0 0 var(--sp-6)}
.tier__rail i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--purple-500),var(--purple-200))}
.tier__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}
.tier__item{position:relative;padding:var(--sp-6) var(--sp-5) var(--sp-5);border:1px solid var(--hair-ink);
  border-radius:var(--radius-md);background:rgba(255,255,255,.03);display:grid;gap:var(--sp-2);align-content:start;
  transition:background var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out)}
.tier__dot{position:absolute;top:-25px;left:var(--sp-5);width:9px;height:9px;border-radius:50%;
  background:var(--n-700);transition:all var(--dur-base) var(--ease-out)}
.tier__num{font:var(--type-mono);font-size:var(--fs-12);color:var(--on-ink-fade)}
.tier__item h3{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-24);
  letter-spacing:-.004em;color:var(--on-ink)}
.tier__item p{font:var(--type-body-sm);color:var(--on-ink-mut)}
.tier__meta{margin-top:var(--sp-3);font:var(--type-caption);font-size:10px;text-transform:uppercase;
  letter-spacing:var(--ls-caps);color:var(--on-ink-fade);padding-top:var(--sp-3);border-top:1px solid var(--hair-ink)}
.tier__item.on{background:linear-gradient(165deg,rgba(115,80,160,.34),rgba(115,80,160,.12));border-color:var(--purple-400);box-shadow:0 12px 30px -14px rgba(78,46,113,.9)}
.tier__item.on .tier__dot{background:var(--purple-200);box-shadow:0 0 0 4px rgba(174,152,203,.2)}
.tier__item.on .tier__meta{color:var(--purple-200)}

/* ============================== the app =================================== */
.app{position:relative;z-index:3;background:var(--surface-app);padding:calc(var(--sec-pad) * .4) 0 var(--sec-pad);overflow:hidden}
.app__bgline{position:absolute;inset:auto 0 0 0;height:62%;background:var(--grad-brand);opacity:.06;
  clip-path:polygon(0 22%,100% 0,100% 100%,0 100%)}
.app__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-12);align-items:center}
.app__copy h2{margin:var(--sp-4) 0 var(--sp-5)}
.app__copy .btn{margin-top:var(--sp-8)}
.app__stage{position:relative;display:grid;place-items:center;min-height:min(86vh,760px);padding:0 clamp(0px,4vw,56px)}

.phone{margin:0;position:relative;width:min(300px,72vw);aspect-ratio:300/620;will-change:transform}
.phone__glow{position:absolute;inset:-14% -22%;background:radial-gradient(50% 50% at 50% 50%,rgba(115,80,160,.34),transparent 70%);filter:blur(20px)}
.phone__frame{position:relative;height:100%;border-radius:44px;padding:10px;background:linear-gradient(160deg,var(--purple-800),var(--purple-950));
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.1) inset}
.phone__notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:96px;height:20px;
  background:var(--purple-950);border-radius:var(--radius-pill);z-index:3}
.phone__screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:var(--surface-app);
  display:flex;flex-direction:column}
.pbar{height:56px;flex:0 0 auto;background:var(--brand-primary);color:#fff;display:flex;align-items:center;
  justify-content:space-between;padding:0 14px 0 12px;padding-top:14px}
.pbar b{font:var(--type-h3);font-size:var(--fs-15)}
.pbar .ms{font-size:20px;opacity:.9}
.pbody{flex:1;padding:12px;display:grid;gap:10px;align-content:start;overflow:hidden}
.pcard{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);padding:12px}
.pcard--hero{display:grid;gap:8px}
.povl{font:var(--type-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-subtle)}
.pnum{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:30px;line-height:1;
  letter-spacing:-.005em;color:var(--text-heading)}
.prings{display:flex;gap:10px;margin-top:2px}
.prings svg{width:44px;height:44px;transform:rotate(-90deg)}
.r-bg{fill:none;stroke:var(--n-100);stroke-width:5}
.r-fg{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113}
.plegend{display:flex;flex-wrap:wrap;gap:8px;font:var(--type-caption);font-size:10px;color:var(--text-muted)}
.plegend span{display:inline-flex;align-items:center;gap:4px}
.plegend i{width:6px;height:6px;border-radius:50%}
.prow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prow b{font:var(--type-h3);font-size:var(--fs-14);color:var(--text-heading)}
.pbadge{font:var(--type-caption);font-size:10px;padding:3px 8px;border-radius:var(--radius-pill);
  background:var(--success-100);color:var(--success-600)}
.pbadge--d{background:var(--n-100);color:var(--text-muted)}
.pchips{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.pchips span{font:var(--type-caption);font-size:10px;padding:4px 8px;border-radius:var(--radius-xs);
  background:var(--purple-50);color:var(--text-brand)}
.pmeta{display:flex;align-items:center;gap:5px;margin-top:10px;font:var(--type-caption);font-size:10px;color:var(--text-subtle)}
.pmeta .ms{font-size:13px}
.pmeta em{margin-left:auto;font-style:normal;color:var(--text-brand);font-weight:var(--fw-semibold)}
.pnav{flex:0 0 auto;height:64px;background:var(--surface-card);border-top:1px solid var(--border-default);
  display:flex;align-items:center;justify-content:space-around;padding-bottom:8px}
.pnav>span{display:grid;justify-items:center;gap:3px;font:var(--type-caption);font-size:9px;color:var(--text-subtle)}
.pnav .ms{font-family:"Material Symbols Rounded";font-size:20px;font-weight:400}
.pnav>span.on{color:var(--text-brand)}

.float{position:absolute;background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:12px 14px;display:grid;gap:3px;
  will-change:transform;backdrop-filter:blur(6px)}
.float__k{font:var(--type-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-subtle)}
.float b{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-20);color:var(--text-heading);letter-spacing:-.003em}
.float__m{font:var(--type-caption);color:var(--text-muted)}
.float--bid{top:6%;right:-6%}
.float--chat{bottom:16%;left:-5%;max-width:210px;background:var(--brand-primary);border-color:transparent}
.float--chat .ms{font-size:18px;color:rgba(255,255,255,.75)}
.float--chat p{color:#fff;font-size:var(--fs-13);line-height:1.4}
.float--chat time{font:var(--type-caption);font-size:10px;color:rgba(255,255,255,.6)}
.float--rate{bottom:2%;right:-2%;grid-auto-flow:column;align-items:center;gap:8px}
.float__stars{display:inline-flex;color:var(--warning-500)}
.float__stars .ms{font-size:15px}
.float--ref{top:24%;left:-6%;padding:8px 12px}
.float--ref code{font:var(--type-mono);font-size:var(--fs-12);color:var(--text-brand)}

/* ============================== numbers =================================== */
.nums{position:relative;z-index:3;background:var(--surface-card);padding:var(--sec-pad) 0;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0}
/* the column gap has to clear the widest figure — "100,000+" is more than
   twice the width of "50+", so the type is sized to the long one, not the
   short one, and the four blocks keep daylight between them */
.nums__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-10) var(--sp-12);margin-top:var(--sp-10)}
.nums__item{display:grid;gap:var(--sp-3);padding-top:var(--sp-6);border-top:1px solid var(--border-default)}
.nums__item b{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:clamp(32px,3.6vw,52px);
  line-height:1;letter-spacing:-.005em;color:var(--text-brand)}
.nums__item span{font:var(--type-caption);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-subtle)}

/* ============================== network =================================== */
.net{position:relative;z-index:3;background:var(--ink);padding:var(--sec-pad) 0;overflow:hidden}
.net__facets{position:absolute;inset:-20% 0 auto 0;height:140%;background:url("assets/brand-facets.svg") center/cover;
  opacity:.11;will-change:transform;filter:saturate(.7)}
.net__head{margin-bottom:var(--sp-12)}
.net__head .h-big{color:var(--on-ink);margin-top:var(--sp-3)}
.net__head .overline{color:var(--purple-300)}
.net__lede{max-width:52ch;margin-top:var(--sp-5);color:var(--on-ink-mut);font-size:var(--fs-16)}
.marq{overflow:hidden;padding:var(--sp-3) 0;border-top:1px solid var(--hair-ink);position:relative}
.marq:last-of-type{border-bottom:1px solid var(--hair-ink)}
.marq__row{display:flex;gap:var(--sp-10);width:max-content;will-change:transform}
.marq__row span{display:inline-flex;align-items:center;gap:var(--sp-4);font-family:var(--font-display);
  font-weight:var(--fw-bold);font-size:clamp(26px,3.6vw,54px);letter-spacing:-.005em;color:var(--on-ink-fade);white-space:nowrap}
.marq__row span i{width:8px;height:8px;border-radius:50%;background:var(--purple-500);flex:0 0 auto}
.marq--alt .marq__row span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3)}
.net__foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8);margin-top:var(--sp-12)}
.net__stat{display:grid;gap:var(--sp-3)}
.net__stat b{font:var(--type-h2);color:var(--on-ink)}
.net__stat i{display:block;height:2px;background:var(--hair-ink);position:relative;overflow:hidden}
.net__stat i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:linear-gradient(90deg,var(--purple-400),var(--purple-200))}
.net__stat span{font:var(--type-caption);color:var(--on-ink-fade)}

/* ============================== quote ===================================== */
.quote{position:relative;z-index:3;padding:calc(var(--sec-pad) * 1.1) 0;overflow:hidden;background:var(--ink)}
.quote__grad{position:absolute;inset:0;background:var(--grad-brand);opacity:.95;will-change:transform}
.quote__txt{position:relative;font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:clamp(28px,4.4vw,64px);line-height:1.1;letter-spacing:-.006em;color:#fff;max-width:20ch}
.quote__txt span{display:inline-block;will-change:transform}
.quote__by{position:relative;display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-10)}
/* the mark as the kit draws it — a squared tile, no circular crop — in the
   header's colours: white box, brand-purple letters */
.quote__av{width:48px;height:48px;flex:0 0 auto;line-height:0}
.quote__av svg{display:block;width:48px;height:48px;color:var(--on-ink);--logo-knock:var(--brand-primary)}
.quote__by b{display:block;color:#fff;font:var(--type-h3)}
.quote__by i{font-style:normal;font:var(--type-caption);color:rgba(255,255,255,.7)}

/* ============================== cta ======================================= */
.cta{position:relative;z-index:3;background:var(--ink);
  padding:calc(var(--sec-pad) * .62) 0 calc(var(--sec-pad) * .5)}
.cta__head{text-align:center;display:grid;justify-items:center;gap:var(--sp-3);margin-bottom:var(--sp-10)}
.cta__head .overline{color:var(--purple-300)}
.cta__h{font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:clamp(34px,6vw,84px);line-height:.98;letter-spacing:-.008em;color:var(--on-ink)}
.cta__lbl{font:var(--type-overline);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--on-ink-fade);margin-top:var(--sp-3)}

/* one panel per app, side by side */
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:stretch}
.cta__panel{position:relative;overflow:hidden;border-radius:var(--radius-xl);
  padding:clamp(36px,4.4vw,64px) clamp(24px,3vw,48px);
  text-align:center;display:grid;justify-items:center;align-content:start;gap:var(--sp-4);
  background:var(--grad-brand);box-shadow:var(--shadow-lg)}
.cta__facets{position:absolute;inset:-30% 0;background:url("assets/brand-facets.svg") center/cover;
  opacity:.22;mix-blend-mode:screen;will-change:transform}
.cta__kicker{position:relative;font:var(--type-overline);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.cta__t{position:relative;font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:-.006em;color:#fff}
.cta__p{position:relative;color:rgba(255,255,255,.78);font-size:var(--fs-16);max-width:32ch}
.cta__stores{position:relative;display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center;
  align-items:center;margin-top:var(--sp-4)}
/* Apple's and Google's badges are used as supplied. Only the box they sit in is
   ours, so nothing here recolours, crops or outlines the artwork. Both sets fill
   their viewBox edge to edge � measured, not assumed � so one height on both is
   all it takes for the pair to read as the same size. The widths still differ,
   because the two are drawn at different aspect ratios and neither may be
   stretched to match the other. */
.store{display:inline-flex;align-items:center;text-decoration:none;
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
a.store:hover{transform:translateY(-2px);text-decoration:none}
a.store:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:8px}
.store__badge{display:block;height:44px;width:auto}
/* nothing to link to yet: still legible, but it does not pretend to be a link */
.store.is-soon{cursor:default;opacity:.62}
.btn.is-soon,.ftr__col a.is-soon{cursor:default;opacity:.62}
.btn.is-soon:hover{transform:none}

/* ============================== footer ==================================== */
.ftr{position:relative;z-index:3;background:var(--ink);border-top:1px solid var(--hair-ink);padding:var(--sp-16) 0 var(--sp-8)}
.ftr__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--sp-10)}
.ftr__brand p{margin-top:var(--sp-5);color:var(--on-ink-mut);font-size:var(--fs-14);line-height:1.6}
.ftr__contact{margin-top:var(--sp-6)}
.ftr__contact .overline{display:block;color:var(--on-ink-fade)}
.ftr__mail{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);
  font:var(--type-body-sm);font-weight:var(--fw-medium);color:var(--on-ink-mut);text-decoration:none}
.ftr__mail:hover{color:#fff;text-decoration:none}
.ftr__mail .ms{font-size:var(--icon-sm);color:var(--purple-300)}
.ftr__social{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.ftr__social a{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-pill);
  border:1px solid var(--hair-ink);background:rgba(255,255,255,.04);color:var(--on-ink-mut);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.ftr__social a:hover{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;transform:translateY(-2px)}
.ftr__social a:focus-visible{box-shadow:var(--focus-ring)}
.ftr__social svg{width:17px;height:17px;fill:currentColor;display:block}
.ftr__legal{display:flex;gap:var(--sp-5);margin-right:auto;margin-left:var(--sp-8)}
.ftr__legal a{font:var(--type-caption);font-weight:var(--fw-medium);color:var(--on-ink-fade);text-decoration:none}
.ftr__legal a:hover{color:#fff;text-decoration:none}
.ftr__col{display:grid;gap:var(--sp-3);align-content:start}
.ftr__col .overline{color:var(--on-ink-fade);margin-bottom:var(--sp-1)}
.ftr__col a{color:var(--on-ink-mut);font:var(--type-body-sm);font-weight:var(--fw-medium);text-decoration:none;width:max-content}
.ftr__col a:hover{color:#fff;text-decoration:none}
.ftr__base{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--hair-ink);
  font:var(--type-caption);color:var(--on-ink-fade)}
.ftr__top{display:inline-flex;align-items:center;gap:var(--sp-2);background:transparent;border:1px solid var(--hair-ink);
  color:var(--on-ink-mut);border-radius:var(--radius-pill);padding:9px var(--sp-4);cursor:pointer;
  font:var(--type-label);transition:background var(--dur-base),color var(--dur-base)}
.ftr__top:hover{background:rgba(255,255,255,.08);color:#fff}
.ftr__top .ms{font-size:var(--icon-sm)}

/* ============================== right-to-left ============================= */
/* Arabic flips the document. Most of the layout is logical and mirrors on its
   own; these are the pieces pinned to a physical side, plus the runs of digits
   and codes that must stay left-to-right inside RTL text. */
[dir="rtl"] .rail{right:auto;left:calc(var(--gut) * .5)}
[dir="rtl"] .rail__cap{right:auto;left:16px;transform:translate(-4px,-50%)}
[dir="rtl"] .rail__stop:hover .rail__cap,
[dir="rtl"] .rail:hover .rail__stop.on .rail__cap{transform:translate(0,-50%)}
[dir="rtl"] .aud__glyph{right:auto;left:var(--sp-8)}
[dir="rtl"] .svc__glyph{left:auto;right:var(--sp-8)}
[dir="rtl"] .svc__num{left:auto;right:var(--sp-8)}
[dir="rtl"] .esc__ref{right:auto;left:var(--sp-6)}
/* Every other split section leads with its copy, so mirroring lands the text
   on the right in Arabic. SO AI is the one that leads with the card, which
   mirrors the headline onto the left — the only section where Arabic would
   read from the wrong side. Reordering puts the copy back in the right-hand
   column without touching the LTR rhythm. */
[dir="rtl"] .ai__copy{order:1}
[dir="rtl"] .ai__stage{order:2}
[dir="rtl"] .float--bid{right:auto;left:-6%}
[dir="rtl"] .float--chat{left:auto;right:-5%}
[dir="rtl"] .float--rate{right:auto;left:-2%}
[dir="rtl"] .float--ref{left:auto;right:-6%}
[dir="rtl"] .pin__label{left:auto;right:38px}
[dir="rtl"] .menu__bg{clip-path:circle(0% at 60px 48px)}
[dir="rtl"] body.menu-open .menu__bg{clip-path:circle(150% at 60px 48px)}
[dir="rtl"] .ftr__legal{margin-left:auto;margin-right:var(--sp-8)}
/* progress fills grow from the reading edge, which is the right one here */
[dir="rtl"] .tier__rail i{inset:0 0 0 auto}
[dir="rtl"] .net__stat i::after{inset:0 0 0 auto}
[dir="rtl"] .tier__dot{left:auto;right:var(--sp-5)}
[dir="rtl"] .hdr__prog i{margin-left:auto}
[dir="rtl"] .lang__menu{transform-origin:top left}
/* the arrival card stays on the physical right, where the globe leaves room */
@media (min-width:1081px){ [dir="rtl"] .hero__stage--c{justify-content:start} }
/* figures, codes and coordinates read left-to-right in any language */
[dir="rtl"] code,[dir="rtl"] .esc__a,[dir="rtl"] .esc__amt,[dir="rtl"] .esc__foot b,
[dir="rtl"] .hq-card__coords,[dir="rtl"] .svc__code,[dir="rtl"] .ai__rate,
[dir="rtl"] .ai__rank,[dir="rtl"] .tier__num,[dir="rtl"] .svc__num,
[dir="rtl"] .nums__item b,[dir="rtl"] .manifesto__marks b,[dir="rtl"] .pnum{direction:ltr}
[dir="rtl"] .nums__item b,[dir="rtl"] .manifesto__marks b{text-align:right}

/* the stage chips are CSS content, so they carry their own translations */
[lang="ar"] .esc__c::after{content:"محجوز"}
[lang="ar"] .esc__stages li.done .esc__c::after{content:"أُفرج"}
[lang="fr"] .esc__c::after{content:"Bloqué"}
[lang="fr"] .esc__stages li.done .esc__c::after{content:"Libéré"}
[lang="zh"] .esc__c::after{content:"锁定"}
[lang="zh"] .esc__stages li.done .esc__c::after{content:"已放款"}
[lang="hi"] .esc__c::after{content:"रोका"}
[lang="hi"] .esc__stages li.done .esc__c::after{content:"जारी"}

/* ============================== responsive ================================ */
@media (max-width:1080px){
  .cta__grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .nav{display:none}
  .burger{display:grid}
  .esc__grid,.ai__grid{grid-template-columns:1fr;gap:var(--sp-10)}
  /* order alone stacks the copy above the card; the direction:ltr that used to
     do it here also forced the Arabic copy to read left-to-right */
  .ai__stage{order:2}
  .aud__grid{grid-template-columns:1fr}
  .tier__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-4)}
  /* the rail only reads as a ladder while the four sit in one row */
  .tier__rail{display:none}
  .tier__dot{top:var(--sp-5);left:auto;right:var(--sp-5)}
  .menu__list a{font-size:clamp(24px,5.2vw,40px)}
  .how__grid{grid-template-columns:1fr;gap:var(--sp-10)}
  .how__aside{position:static}
  .app__grid{grid-template-columns:1fr;gap:var(--sp-10)}
  .nums__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-10) var(--sp-10)}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  .rail{display:none}
}
@media (max-width:720px){
  /* the header keeps the logo, the language globe and the menu; both CTAs
     move into the overlay so nothing is dropped */
  .hdr__end .btn{display:none}
  .lang__code,.lang__chev{display:none}
  .lang__btn{padding:0 9px}
  .net__foot{grid-template-columns:1fr;gap:var(--sp-6)}
  .step{padding:var(--sp-6);gap:var(--sp-4)}
  .step__body{padding-left:var(--sp-8)}
  .step__ghost{font-size:92px}
  .float--ref,.float--rate{display:none}
  .float--bid{top:2%;right:-2%}
  .float--chat{bottom:10%;left:-4%;max-width:180px}
  .manifesto__marks{gap:var(--sp-8)}
  .ftr__grid{grid-template-columns:1fr}
  .tier__grid{grid-template-columns:1fr}
  .tier__item{padding-right:var(--sp-10)}
  .esc__card{padding:var(--sp-5)}
  .esc__stages li{grid-template-columns:22px 1fr auto;row-gap:4px}
  .esc__c{grid-column:2 / -1;justify-self:start}
  .esc__ref{right:var(--sp-4);top:-14px}
  .aud__card{padding:var(--sp-8) var(--sp-5) var(--sp-6)}
  .ftr__legal{margin:var(--sp-2) 0 0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .loader,.pin{display:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}