/* ============================================================
   ClockPoint marketing site v2 — "One working day", real screens
   Night ink → gold → Daylight silver → dusk. GSAP-driven.
   ============================================================ */

:root{
  --night:#0A0F1E; --night-2:#111A33;
  --night-line:rgba(255,255,255,.10);
  --night-text:#E9EDF6; --night-dim:#8B94AC;
  --gold:#E8A33D; --gold-bright:#F5C36B; --gold-dim:rgba(232,163,61,.16);
  --silver:#F4F5F7; --card:#FFFFFF; --ink:#1C2230; --grey:#5A6274; --line:#E3E6EC;
  --ok:#2E9E5B; --bad:#D64545;
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --arabic:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --fs-h1:clamp(2.4rem,6.4vw,4.6rem);
  --fs-h2:clamp(1.65rem,3.6vw,2.6rem);
  --fs-body:clamp(1rem,1.1vw,1.13rem);
  --pad:clamp(1.2rem,5vw,6rem);
  --sec-gap:clamp(4.5rem,10vw,9rem);
}

*{box-sizing:border-box;margin:0;padding:0}
/* fluid root: the whole rem-based layout follows the screen resolution */
html{font-size:clamp(14px, 0.55vw + 7.6px, 22px);overflow-x:clip}
body{
  font-family:var(--body);font-size:var(--fs-body);line-height:1.65;
  background:var(--night);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html.lenis{height:auto} .lenis.lenis-smooth{scroll-behavior:auto}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
b{font-weight:600}
.mono{font-family:var(--mono)}
[lang="ar"],[lang="ckb"]{font-family:var(--arabic)}

.display{
  font-family:var(--display);font-variation-settings:'wdth' 118;
  font-weight:850;letter-spacing:-.015em;line-height:1.06;
}
h1.display{font-size:var(--fs-h1)}
h2.display{font-size:var(--fs-h2)}
.bp{display:none}
@media(min-width:900px){.bp{display:inline}}

.eyebrow{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;
  color:var(--grey);margin-bottom:1.1rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
}
.eyebrow .t{
  color:var(--gold);font-weight:600;font-size:.9rem;
  border:1px solid var(--gold);border-radius:999px;padding:.14em .7em;
}
.eyebrow.gold{color:var(--night-dim)}
.eyebrow.center{justify-content:center}

/* ---------- topbar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:clamp(.7rem,1.6vw,1.1rem) var(--pad);
  transition:background .4s,box-shadow .4s;
}
.topbar.solid{background:rgba(10,15,30,.86);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--night-line)}
.wordmark{display:flex;align-items:center;gap:.55em;font-family:var(--display);font-variation-settings:'wdth' 120;font-weight:850;font-size:1.25rem;color:#fff}
.logo-chip{
  width:2.1rem;height:2.1rem;border-radius:10px;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.logo-chip img{width:78%;height:78%;object-fit:contain}
.logo-chip.sm{width:1.7rem;height:1.7rem;border-radius:8px}
.onode-ic.logo-node{background:#fff;border:1px solid var(--line)}
.onode-ic.logo-node img{width:70%;height:70%;object-fit:contain}
.wordmark span{color:var(--gold)}
.wordmark.small{font-size:1.05rem}
.topbar-right{display:flex;align-items:center;gap:clamp(.6rem,1.5vw,1.1rem)}
.lang-pill{display:flex;border:1px solid var(--night-line);border-radius:999px;overflow:hidden}
.lang-pill button,.lang-pill a{font-family:var(--body);font-size:.78rem;color:var(--night-dim);background:none;border:0;padding:.42em .95em;cursor:pointer;display:inline-block}
.lang-pill button.on,.lang-pill a.on{background:var(--gold);color:var(--night);font-weight:600}

.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-weight:600;font-size:.95rem;border-radius:999px;padding:.72em 1.5em;
  transition:transform .18s,box-shadow .18s,background .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn-demo{background:var(--gold);color:var(--night);padding:.55em 1.2em;font-size:.85rem}
.btn-pdf{
  border:1.5px solid var(--gold);color:var(--gold-bright);
  padding:.5em 1.1em;font-size:.8rem;letter-spacing:.03em;
  font-family:var(--body);font-weight:600;background:rgba(232,163,61,.12);
}
.btn-pdf:hover{background:var(--gold);color:var(--night)}
.btn-pdf .ic{margin-right:.5em}
html[dir="rtl"] .btn-pdf .ic{margin-right:0;margin-left:.5em}
.foot-links{display:flex;gap:1.6rem;flex-wrap:wrap}
.btn-gold{background:var(--gold);color:var(--night);box-shadow:0 8px 30px rgba(232,163,61,.35)}
.btn-gold:hover{background:var(--gold-bright)}
.btn-ghost{border:1px solid var(--night-line);color:var(--night-text)}
.btn-wa{background:#25D366;color:#062812;font-size:1.05rem;padding:.9em 1.7em;box-shadow:0 10px 40px rgba(37,211,102,.3)}

/* ============================================================
   DEVICE FRAMES
   ============================================================ */
.devphone{
  position:relative;width:min(19.5rem,80vw);aspect-ratio:390/844;
  background:#0D1322;border-radius:clamp(28px,4vw,40px);
  padding:10px;box-shadow:0 30px 80px rgba(10,15,30,.35), inset 0 0 0 2px #232B44;
}
.devphone.small{width:min(16rem,68vw)}
.devphone.dark{box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 0 0 2px #2A3352}
.dev-notch{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:38%;height:14px;background:#0D1322;border-radius:0 0 12px 12px;z-index:3;
}
.devphone .devscreen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:clamp(20px,3vw,30px);background:#E9EDF6;
}
.devphone .devscreen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.devphone.dark .devscreen{background:#0B1120}
.devphone.dark .devscreen img{position:relative;inset:auto;height:auto;object-fit:unset;display:block;will-change:transform}

.devlaptop{position:relative;width:min(41rem,92vw)}
.devlaptop.big{width:min(46rem,94vw)}
.devlaptop .devscreen{
  position:relative;aspect-ratio:1440/900;overflow:hidden;
  background:#0D1322;border-radius:14px 14px 0 0;padding:8px 8px 0;
  box-shadow:0 30px 70px rgba(10,15,30,.28), inset 0 0 0 2px #232B44;
}
.devlaptop .devscreen img{position:absolute;inset:8px 8px 0;width:calc(100% - 16px);height:calc(100% - 8px);object-fit:cover;object-position:top;border-radius:8px 8px 0 0}
.devlaptop .devbase{
  height:14px;background:linear-gradient(180deg,#232B44,#141B30);
  border-radius:0 0 16px 16px;margin:0 -4%;
  box-shadow:0 18px 40px rgba(10,15,30,.3);
}

/* crossfading shots inside frames */
.tshot,.sshot{opacity:0;transition:opacity .35s}
.tshot.is-on,.sshot.is-on{opacity:1}

/* tap ripple */
.tapdot{
  position:absolute;width:26px;height:26px;border-radius:50%;z-index:4;
  background:rgba(232,163,61,.65);box-shadow:0 0 0 0 rgba(232,163,61,.55);
  opacity:0;pointer-events:none;
}
.tapdot.go{animation:tap .8s ease-out}
@keyframes tap{
  0%{opacity:0;transform:scale(.4)}
  25%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.9);box-shadow:0 0 0 18px rgba(232,163,61,0)}
}

/* ============================================================
   HERO (night)
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(5rem,10vh,7rem) var(--pad) clamp(3.5rem,8vh,6rem);
  background:
    radial-gradient(70rem 40rem at 78% 30%, rgba(232,163,61,.12), transparent 60%),
    linear-gradient(180deg,#070B16 0%,var(--night) 55%,#0E1526 100%);
  color:var(--night-text);overflow:hidden;
}
.horizon{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 35%,var(--gold-bright) 50%,var(--gold) 65%,transparent);
  opacity:.55;
}

/* ---------- the hero's soul: dawn, grain, living sites ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.au{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform,opacity}
.au1{width:55vw;height:55vw;right:-12vw;top:-18vw;background:radial-gradient(circle,rgba(232,163,61,.16),transparent 65%)}
.au2{width:45vw;height:45vw;left:-14vw;bottom:-20vw;background:radial-gradient(circle,rgba(63,94,181,.20),transparent 65%)}
.au3{width:30vw;height:30vw;right:8vw;bottom:-10vw;background:radial-gradient(circle,rgba(232,163,61,.10),transparent 60%)}
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.constellation{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.cline{fill:none;stroke:rgba(139,148,172,.18);stroke-width:1;stroke-dasharray:2 7}
.cnode .core{fill:var(--gold);opacity:.65}
.cnode .ring{
  fill:none;stroke:var(--gold);stroke-width:1;opacity:0;
  transform-origin:center;transform-box:fill-box;
  animation:sitering 5s ease-out infinite;
}
.cnode.n2 .ring{animation-delay:1.6s}
.cnode.n3 .ring{animation-delay:3.2s}
@keyframes sitering{
  0%{transform:scale(.2);opacity:.7}
  55%{opacity:0}
  100%{transform:scale(1.4);opacity:0}
}
.cursor-glow{
  position:fixed;width:44rem;height:44rem;border-radius:50%;z-index:1;
  left:0;top:0;margin:-22rem 0 0 -22rem;pointer-events:none;
  background:radial-gradient(circle,rgba(232,163,61,.08),transparent 60%);
  mix-blend-mode:screen;opacity:0;
}

/* live check-in pings drifting above the devices */
.live-pings{position:absolute;left:14%;top:-22%;height:24%;width:50%;pointer-events:none;z-index:6}
.ping{
  position:absolute;right:4%;display:flex;align-items:center;gap:.5em;white-space:nowrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:var(--night-dim);
  background:rgba(17,26,51,.75);border:1px solid var(--night-line);border-radius:999px;
  padding:.45em .9em;backdrop-filter:blur(4px);opacity:0;
}
.ping .okdot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 8px rgba(46,158,91,.8)}
.ping b{color:var(--night-text);font-weight:500}

/* the phone gets breath, tilt, and an under-glow */
.hero-device{perspective:1200px}
.hero-device .devphone{will-change:transform}
.hero-device::after{
  content:"";position:absolute;left:50%;bottom:-1rem;transform:translateX(-50%);
  width:80%;height:3.5rem;border-radius:50%;
  background:radial-gradient(ellipse,rgba(232,163,61,.22),transparent 70%);
  filter:blur(12px);pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(2rem,4vw,4rem);align-items:center;
  max-width:min(94vw,104rem);margin:0 auto;width:100%;
}
.hero-copy{max-width:34rem}
.hero-note{font-size:.74rem;letter-spacing:.16em;color:var(--gold);margin-bottom:1.3rem}
.hero-sub{color:var(--night-dim);margin-top:1.4rem;font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:30rem}
.hero-pillars{
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.6rem;
}
.pillar{
  display:flex;gap:.75em;align-items:flex-start;
  border:1px solid var(--night-line);border-radius:12px;
  padding:.75em .9em;background:rgba(17,26,51,.5);backdrop-filter:blur(4px);
  transition:border-color .3s,transform .3s;
}
.pillar:hover{border-color:rgba(232,163,61,.5);transform:translateY(-2px)}
.pillar svg{
  width:1.35rem;height:1.35rem;flex:none;margin-top:.1em;
  stroke:var(--gold);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.pillar span{display:flex;flex-direction:column;gap:.12em}
.pillar b{font-size:.85rem;color:var(--night-text)}
.pillar i{font-style:normal;font-size:.72rem;color:var(--night-dim);line-height:1.45}
.hero-ctas{display:flex;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.hero-proof{
  display:flex;align-items:center;gap:1rem;margin-top:2.6rem;
  padding-top:1.6rem;border-top:1px solid var(--night-line);
}
.avstack{display:flex}
.avstack img{
  width:2.6rem;height:2.6rem;border-radius:50%;border:2.5px solid var(--night);
  margin-left:-.65rem;object-fit:cover;
}
.avstack img:first-child{margin-left:0}
.hero-proof p{font-size:.85rem;color:var(--night-dim);line-height:1.5}
.hero-proof p b{color:var(--night-text)}

/* hero device + floating proof chips */
.hero-device{position:relative;width:max-content;margin:0 auto;padding:1.5rem 0}

/* hero family composition: laptop + tablet + phone */
.hero-family{width:100%;max-width:58rem;min-height:34rem;display:flex;align-items:flex-start;justify-content:center;perspective:1400px;padding-top:1rem}
.hf-laptop{position:relative;width:min(46rem,45vw);z-index:1;will-change:transform}
.hero-family .hf-tablet{
  position:absolute;right:-3%;bottom:-13%;width:min(19rem,19vw);z-index:3;
  transform:rotate(3.5deg);overflow:hidden;aspect-ratio:16/10;border-radius:16px;
  box-shadow:0 30px 70px rgba(5,8,18,.55);will-change:transform;
}
.hf-tablet img{width:100%;height:auto}
.hero-family .hf-phone{
  position:absolute;left:-3%;bottom:-11%;width:min(11.5rem,12vw);z-index:3;
  transform:rotate(-6deg);padding:5px;border-radius:20px;will-change:transform;
}
.hf-phone .devscreen{border-radius:15px}
.hf-phone .h-verify{font-size:.5rem;top:12%;left:4%;right:4%;padding:.5em .6em;border-radius:8px}
.hero-family ~ .hchip.h-gps, .hero-family .h-gps{white-space:nowrap}
.hchip{
  position:absolute;z-index:6;opacity:0;
  background:#fff;color:var(--ink);border-radius:12px;
  box-shadow:0 16px 40px rgba(5,8,18,.5);
  font-size:.7rem;font-weight:600;padding:.6em .9em;
}
.hchip.h-verify{
  position:absolute;left:6%;right:6%;top:16%;
  display:flex;align-items:center;gap:.5em;border-left:4px solid var(--ok);
}
.hchip.h-gps{
  top:-10%;left:0;letter-spacing:.08em;font-size:.62rem;
  background:var(--night-2);color:var(--gold-bright);border:1px solid rgba(232,163,61,.4);
}
.hchip.h-pay{right:2%;top:-12%;display:flex;flex-direction:column;gap:.15em}
.hchip.h-pay span,.hchip.h-rota span{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:var(--grey)}
.hchip.h-pay b{font-size:.85rem}
.hchip.h-rota{left:34%;bottom:-15%;display:flex;flex-direction:column;gap:.15em}
.hchip.h-rota b{color:var(--ok);font-size:.78rem}

/* ============================================================
   DAY (silver)
   ============================================================ */
.day{background:var(--silver);color:var(--ink)}

/* ---------- pinned scene 1: tour ---------- */
.tour{position:relative}
.tour-inner{
  min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:center;
  max-width:min(90vw,92rem);margin:0 auto;padding:clamp(4rem,8vh,6rem) var(--pad);
}
.tour-copy{position:relative}
.tour-steps{position:relative;min-height:16rem}
.tstep{position:absolute;inset:0;opacity:0;transform:translateY(18px);pointer-events:none}
.tstep.is-on{opacity:1;transform:none}
.tstep h2{margin-bottom:1rem}
.tstep p{color:var(--grey);max-width:26rem}
.tour-dots{display:flex;gap:.5rem;margin-top:1.5rem}
.tour-dots span{width:.55rem;height:.55rem;border-radius:999px;background:#C9CFDA;transition:all .3s}
.tour-dots span.on{background:var(--gold);width:1.6rem}
.tour-device{display:flex;justify-content:center}

/* ---------- pinned scene 2: sync ---------- */
.sync{background:var(--silver);position:relative}
.sync-head{max-width:min(90vw,92rem);margin:0 auto;text-align:center;padding:clamp(3rem,7vh,5rem) var(--pad) 0}
.sync-stage{
  display:grid;grid-template-columns:auto minmax(3rem,1fr) auto;
  align-items:center;justify-content:center;gap:0;
  max-width:min(90vw,92rem);margin:0 auto;padding:clamp(2rem,4vh,3rem) var(--pad) 1rem;
}
.sync-wire{width:100%;height:60px;overflow:visible}
#wirePath{stroke:var(--gold);stroke-width:2;stroke-dasharray:6 8;opacity:.55}
#wireDot{fill:var(--gold);opacity:0}
.sync-caption{
  text-align:center;font-size:.8rem;letter-spacing:.16em;color:var(--grey);
  padding:0 var(--pad) clamp(3rem,7vh,5rem);min-height:2.2em;
}

/* overlays on screenshots */
.ov{position:absolute;z-index:5;opacity:0;pointer-events:none}
.ov-toast{
  top:9%;right:4%;display:flex;align-items:center;gap:.5em;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok);
  border-radius:10px;padding:.5em .9em;font-size:.72rem;font-weight:600;color:var(--ink);
  box-shadow:0 12px 30px rgba(28,34,48,.18);
}
.okdot{width:.55rem;height:.55rem;border-radius:50%;background:var(--ok);flex:none}
.ov-badge{
  top:7%;left:16%;background:var(--bad);color:#fff;font-size:.68rem;font-weight:600;
  border-radius:999px;padding:.25em .6em;box-shadow:0 8px 20px rgba(214,69,69,.4);
}
.ov-stamp{
  top:38%;left:50%;transform:translate(-50%,-50%) rotate(-7deg);
  font-size:.9rem;letter-spacing:.2em;color:var(--ok);
  background:rgba(255,255,255,.9);border:3px solid var(--ok);border-radius:8px;padding:.4em 1em;
}
.ov-phone-leave{
  bottom:18%;left:8%;right:8%;display:flex;justify-content:space-between;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7em .9em;
  font-size:.62rem;color:var(--ink);box-shadow:0 12px 30px rgba(28,34,48,.2);
}
.ov-phone-leave b{color:var(--ok)}
.ov-phone-note{
  top:12%;left:6%;right:6%;background:#0D1322;color:#fff;border-radius:12px;
  padding:.7em .9em;font-size:.68rem;box-shadow:0 12px 30px rgba(10,15,30,.4);
}

/* ---------- payroll + fraud ---------- */
.pay,.fraud{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  max-width:min(90vw,98rem);margin:0 auto;padding:calc(var(--sec-gap)*.6) var(--pad);
}
.fraud{grid-template-columns:minmax(0,6fr) minmax(0,4fr)}
.pay-copy p,.fraud-copy p{color:var(--grey)}
.pay-copy h2,.fraud-copy h2{margin-bottom:1rem;color:var(--ink)}
.proof{margin-top:1.4rem;display:flex;flex-direction:column;gap:.75rem}
.proof li{position:relative;padding-left:1.6rem;color:var(--ink);font-size:.98rem}
.proof li::before{content:"";position:absolute;left:0;top:.52em;width:.62em;height:.62em;border-radius:50%;background:var(--gold)}
.kicker{
  margin-top:1.5rem;font-family:var(--display);font-variation-settings:'wdth' 115;
  font-weight:800;font-size:1.15rem;color:var(--ink);
}
.pay-visual,.fraud-visual{display:flex;justify-content:center}

.callout{position:absolute;z-index:6;opacity:0}
.callout i{display:block;width:2px;background:var(--gold);height:2.6rem;margin:0 auto}
.callout em{
  display:block;font-style:normal;font-family:var(--mono);font-size:.62rem;line-height:1.4;
  background:var(--night);color:var(--gold-bright);border-radius:8px;padding:.55em .8em;
  max-width:14rem;box-shadow:0 10px 26px rgba(10,15,30,.35);
}
.callout.c1{left:16%;top:38%}
.callout.c2{left:47%;top:26%}
.callout.c2 em{color:#FF9B9B}
.callout.c2 i{background:var(--bad)}

/* ---------- CEO (dusk band) ---------- */
.ceo{
  background:
    radial-gradient(70rem 30rem at 80% 0%, rgba(232,163,61,.1), transparent 60%),
    linear-gradient(180deg,#0E1526,var(--night));
  color:var(--night-text);
}
.ceo-inner{
  min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:center;
  max-width:min(90vw,92rem);margin:0 auto;padding:clamp(4rem,8vh,6rem) var(--pad);
}
.ceo-copy h2{color:#fff;margin-bottom:1rem}
.ceo-copy p{color:var(--night-dim);max-width:26rem}
.ceo-device{display:flex;justify-content:center}

/* ---------- languages ---------- */
.langs{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  max-width:min(90vw,92rem);margin:0 auto;padding:calc(var(--sec-gap)*.6) var(--pad);
}
.langs-copy p{color:var(--grey)}
.langs-copy h2{margin-bottom:1rem}
.langs-visual{display:flex;justify-content:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(28,34,48,.08)}
.flipslip{width:min(400px,90vw);padding:1.3rem 1.4rem 1rem;perspective:900px}
.flip-inner{position:relative;height:11rem}
.flip-face{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:.6rem;
  opacity:0;transform:rotateY(70deg);transition:opacity .45s,transform .45s;backface-visibility:hidden;
}
.flipslip[data-lang="en"] .f-en,.flipslip[data-lang="ar"] .f-ar,.flipslip[data-lang="ku"] .f-ku{opacity:1;transform:rotateY(0)}
.fs-head{font-size:.72rem;letter-spacing:.12em;color:var(--gold);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:.55rem}
.f-ar .fs-head,.f-ku .fs-head{letter-spacing:0;font-size:.95rem}
.fs-row{display:flex;justify-content:space-between;font-size:.88rem;color:var(--grey)}
.fs-row b{color:var(--ink);font-weight:600}
.flip-tabs{display:flex;gap:.4rem;justify-content:center;border-top:1px solid var(--line);padding-top:.8rem}
.flip-tabs span{font-size:.68rem;padding:.3em .9em;border-radius:999px;color:var(--grey);border:1px solid var(--line);transition:all .3s}
.flip-tabs span.on{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:600}

/* ---------- modular: pay for what you use ---------- */
.modular{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  max-width:min(90vw,92rem);margin:0 auto;padding:calc(var(--sec-gap)*.6) var(--pad);
}
.mod-copy p{color:var(--grey)}
.mod-copy h2{margin-bottom:1rem}
.mod-hint{margin-top:1.4rem;font-weight:600;color:var(--gold);font-size:.95rem}
.mod-builder{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1.2rem;align-items:start}
.mod-cards{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.mod-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:.95rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;cursor:pointer;
  transition:border-color .25s,box-shadow .25s;position:relative;
}
.mod-card:hover{box-shadow:0 10px 26px rgba(28,34,48,.1)}
.mod-card.locked{cursor:default;border-color:rgba(232,163,61,.55);background:linear-gradient(180deg,#FFF9EF,#FFFDF8)}
.mod-card input{position:absolute;opacity:0;pointer-events:none}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.mc-head b{font-size:.88rem;color:var(--ink)}
.mod-card i{font-style:normal;font-size:.74rem;color:var(--grey);line-height:1.5}
.mc-lock{font-size:.56rem;letter-spacing:.12em;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:.25em .6em;white-space:nowrap}
.mc-switch{
  flex:none;width:2.3rem;height:1.25rem;border-radius:999px;background:#D7DBE3;position:relative;
  transition:background .25s;
}
.mc-switch::after{
  content:"";position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(28,34,48,.3);transition:left .25s;
}
.mod-card input:checked ~ .mc-switch{background:var(--ok)}
.mod-card input:checked ~ .mc-switch::after{left:1.2rem}
.mod-card:not(.locked):not(.on) b{color:#9AA1B0}
.mod-card:not(.locked):not(.on) i{opacity:.6}
.mod-card.on{border-color:rgba(46,158,91,.5)}
.mod-receipt{padding:1.2rem 1.3rem;position:sticky;top:6rem}
/* modular: team-size pills + core card (plan model 2026-09-04) */
.mod-tiers{grid-column:1/-1;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;position:relative}
.mt-label{font-size:.6rem;letter-spacing:.14em;color:var(--grey);margin-inline-end:.3rem}
.mod-tiers input{position:absolute;opacity:0;pointer-events:none}
.mod-tiers label span{display:inline-block;font-size:.78rem;font-weight:600;color:var(--grey);border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.35em .9em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.mod-tiers label span:hover{border-color:var(--night)}
.mod-tiers input:checked + span{background:var(--night);color:#fff;border-color:var(--night)}
.mod-card.core{grid-column:1/-1}
.mc-inc{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem .8rem;margin-top:.35rem}
.mc-inc li{font-size:.76rem;color:var(--ink);padding-inline-start:1.15em;position:relative;line-height:1.4}
.mc-inc li::before{content:"\2713";position:absolute;inset-inline-start:0;color:var(--ok);font-weight:700}
.mod-card.na{opacity:.5;cursor:not-allowed}
@media (max-width:560px){.mc-inc{grid-template-columns:1fr 1fr}}

.mr-title{font-size:.68rem;letter-spacing:.2em;color:var(--gold);font-weight:600;border-bottom:1px dashed var(--line);padding-bottom:.7rem;margin-bottom:.8rem}
#mrList{display:flex;flex-direction:column;gap:.45rem;min-height:9rem}
#mrList li{font-size:.74rem;color:var(--ink)}
#mrList li.off{color:#B9BFCC;text-decoration:line-through}
.mr-foot{border-top:1px dashed var(--line);margin-top:1rem;padding-top:.8rem;display:flex;flex-direction:column;gap:.3rem}
.mr-foot span{font-size:.68rem;color:var(--grey)}
.mr-foot b{font-size:.62rem;letter-spacing:.1em;color:var(--ok)}

/* ---------- trust ---------- */
.trust{max-width:min(90vw,92rem);margin:0 auto;padding:calc(var(--sec-gap)*.5) var(--pad) var(--sec-gap);text-align:center}
.trust h2{margin-bottom:2.2rem}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;text-align:left}
.tcard{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.4rem;
  display:flex;flex-direction:column;gap:.5rem;transition:transform .25s,box-shadow .25s;
}
.tcard:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(28,34,48,.1)}
.tcard b{font-size:1rem}
.tcard span{font-size:.86rem;color:var(--grey);line-height:1.55}

/* ---------- checkout / footer / chip ---------- */
.checkout{
  background:
    radial-gradient(80rem 36rem at 50% -20%, rgba(232,163,61,.13), transparent 60%),
    linear-gradient(180deg,#0E1526,var(--night) 45%,#070B16);
  color:var(--night-text);text-align:center;padding:var(--sec-gap) var(--pad);
}
.checkout h2{color:#fff}
.big-timer{display:inline-block;color:var(--gold);font-weight:600;font-size:clamp(3rem,9vw,5.5rem);letter-spacing:.04em;line-height:1.15}
.checkout-sub{color:var(--night-dim);max-width:36rem;margin:1.4rem auto 0}
.checkout-ctas{margin-top:2.4rem}
.dare{margin-top:1.6rem;font-size:.95rem;color:var(--night-dim)}
.dare b{color:#fff}
.footer{
  background:#070B16;color:var(--night-dim);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:center;justify-content:space-between;
  padding:1.6rem var(--pad);padding-inline-end:clamp(9rem,11vw,13rem);
  font-size:.8rem;border-top:1px solid var(--night-line);
}
.foot-partner{opacity:.7}
.foot-partner:hover{opacity:1;color:var(--gold)}
.timer-chip{
  position:fixed;right:clamp(.8rem,2vw,1.6rem);bottom:clamp(.8rem,2vw,1.6rem);z-index:60;
  background:rgba(10,15,30,.88);backdrop-filter:blur(8px);
  border:1px solid rgba(232,163,61,.45);color:var(--night-dim);
  font-size:.7rem;letter-spacing:.14em;border-radius:999px;padding:.5em 1.1em;
  opacity:0;transform:translateY(10px);pointer-events:none;
}
.timer-chip b{color:var(--gold);font-weight:600;margin-left:.2em}

/* ============================================================
   THE PRESENTATION LAYER — spine, drama, breadth
   ============================================================ */

/* ---------- the day spine ---------- */
.dayline{
  position:fixed;left:clamp(.6rem,1.4vw,1.4rem);top:50%;transform:translateY(-50%);
  z-index:55;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  opacity:0;transition:opacity .5s;pointer-events:none;
}
.dayline.on{opacity:1}
.dl-track{position:relative;width:2px;height:38vh;background:rgba(139,148,172,.28);border-radius:2px;display:block}
.dl-sun{
  position:absolute;left:50%;top:0;width:.85rem;height:.85rem;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--gold);
  box-shadow:0 0 12px rgba(232,163,61,.8), 0 0 30px rgba(232,163,61,.35);
}
.dl-time{font-size:.68rem;letter-spacing:.1em;color:var(--gold);font-weight:600}

/* ---------- sunrise transition ---------- */
.sunrise{
  height:clamp(3rem,7vh,5rem);
  background:linear-gradient(180deg,#0E1526 0%,#3A3550 18%,#8A6B4E 45%,#D9B98A 68%,var(--silver) 100%);
  opacity:.9;
}

/* ---------- day temperature: morning → noon → afternoon ---------- */
.tour{background:linear-gradient(180deg,#EEF1F6,var(--silver))}
.sync{background:var(--silver)}
.bento{background:#FDFDFE}
.pay{background:linear-gradient(180deg,#F6F4EF,#F5F2EC)}
.fraud{background:#F5F2EC}
.facewall,.family{background:linear-gradient(180deg,#F4EFE6,#EFE7DA)}

/* ---------- full-screen statements ---------- */
.shout{
  min-height:62svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--silver);position:relative;
}
.shout-inner{position:relative;text-align:center;padding:3rem 1rem}
.shout-line{
  position:relative;font-size:clamp(3.4rem,11vw,10rem);letter-spacing:-.02em;color:var(--ink);
  font-variation-settings:'wdth' 125;white-space:nowrap;
}
.shout-line::before{
  content:attr(data-echo);position:absolute;left:50%;top:46%;
  transform:translate(-50%,-50%);font-size:2.1em;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(28,34,48,.06);
  white-space:nowrap;pointer-events:none;z-index:-1;
}
.shout-line .gold{color:var(--gold)}
.shout-sub{
  margin-top:1.4rem;font-family:var(--mono);font-size:clamp(.8rem,1.2vw,1rem);
  letter-spacing:.1em;color:var(--grey);
}
html[dir="rtl"] .shout-line{font-size:clamp(4rem,13vw,13rem);font-weight:700;letter-spacing:0}
html[dir="rtl"] .shout-line::before{-webkit-text-stroke:1.5px rgba(28,34,48,.07)}
html[dir="rtl"] .shout-sub{letter-spacing:0;font-family:var(--arabic)}

/* ---------- the heart: face is the only key ---------- */
.keys{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  background:var(--silver);text-align:center;padding:4rem var(--pad);
}
.keys-stack{display:flex;flex-direction:column;align-items:center;gap:.35em}
.key-line{
  position:relative;font-family:var(--display);font-variation-settings:'wdth' 120;
  font-weight:800;font-size:clamp(1.6rem,4.6vw,3.6rem);letter-spacing:-.01em;
  color:#A6ADBD;line-height:1.25;
}
.key-line .strike{
  position:absolute;left:-3%;right:-3%;top:52%;height:.09em;border-radius:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left center;
}
.key-final{
  font-size:clamp(2.6rem,8vw,7rem);color:var(--ink);margin-top:.35em;
  font-variation-settings:'wdth' 125;
}
.key-final span{color:var(--gold)}
.key-sub{color:var(--grey);max-width:30rem;margin-top:1.2rem;font-size:.98rem}

/* ---------- the GPS gate ---------- */
.gate{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  max-width:min(90vw,92rem);margin:0 auto;padding:calc(var(--sec-gap)*.6) var(--pad);
}
.gate-copy p{color:var(--grey)}
.gate-copy h2{margin-bottom:1rem;color:var(--ink)}
.gate-visual{width:min(34rem,90vw);margin:0 auto;padding:1.2rem;display:flex;flex-direction:column;gap:1rem}
.gate-map{
  position:relative;height:clamp(15rem,24vw,20rem);border-radius:14px;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(90,98,116,.07) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(90,98,116,.07) 39px 40px),
    linear-gradient(135deg,#EDF0F5,#E2E7EF);
}
.g-site{
  position:absolute;left:34%;top:46%;width:.9rem;height:.9rem;border-radius:50%;
  background:var(--gold);transform:translate(-50%,-50%);z-index:2;
  box-shadow:0 0 0 4px rgba(232,163,61,.25);
}
.g-ring{
  position:absolute;left:34%;top:46%;width:min(13rem,42%);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);border:2.5px dashed var(--gold);
  background:rgba(232,163,61,.07);animation:ringpulse 2.6s ease-in-out infinite;
}
@keyframes ringpulse{0%,100%{opacity:.6}50%{opacity:1}}
.g-label{
  position:absolute;left:34%;top:20%;transform:translateX(-50%);
  font-size:.6rem;letter-spacing:.12em;color:var(--grey);
  background:rgba(255,255,255,.85);border-radius:999px;padding:.3em .8em;
}
.g-worker{
  position:absolute;left:88%;top:74%;width:2.6rem;height:2.6rem;z-index:3;
  transform:translate(-50%,-50%);will-change:left,top;
}
.g-worker img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:2.5px solid var(--bad);transition:border-color .3s;
  box-shadow:0 6px 16px rgba(28,34,48,.3);
}
.g-worker.inside img{border-color:var(--ok)}
.gate-btn{
  position:relative;border-radius:12px;text-align:center;padding:1em;
  font-size:.78rem;letter-spacing:.1em;font-weight:600;overflow:hidden;
  background:#ECEEF2;color:#9AA1B0;transition:background .35s,color .35s;
}
.gate-btn .gb-open{display:none}
.gate-btn.open{background:var(--ok);color:#fff;box-shadow:0 10px 30px rgba(46,158,91,.35)}
.gate-btn.open .gb-open{display:inline}
.gate-btn.open .gb-locked{display:none}

/* ---------- trilingual statement ---------- */
.trish{
  min-height:88svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2em;background:linear-gradient(180deg,#EFE7DA,#F4EFE6);overflow:hidden;
  padding:4rem var(--pad);text-align:center;
}
.tri-line{font-size:clamp(2.2rem,7vw,6rem);line-height:1.25;color:var(--ink);font-weight:600}
.t-ar,.t-ku{font-family:var(--arabic)}
.t-ku{color:var(--gold)}
.t-en{font-variation-settings:'wdth' 122;font-weight:850}
.first-badge{
  margin-top:1.4rem;display:inline-block;font-size:.72rem;letter-spacing:.16em;
  color:var(--gold);border:1.5px solid var(--gold);border-radius:999px;padding:.5em 1.1em;
}

/* ---------- punch-log ticker ---------- */
.ticker{background:var(--night);overflow:hidden;padding:1rem 0;border-block:1px solid var(--night-line)}
.ticker-track{
  display:flex;gap:3.5rem;width:max-content;
  font-size:.72rem;letter-spacing:.1em;color:var(--night-dim);
  animation:tick 38s linear infinite;
}
.ticker-track span{white-space:nowrap}
.ok-t{color:var(--ok);font-weight:500}
.bad-t{color:var(--bad);font-weight:500}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- bento wall ---------- */
.bento{padding:calc(var(--sec-gap)*.7) var(--pad)}
.center-h{text-align:center}
.bento .center-h{margin-bottom:2.6rem}
.bento-grid{
  display:grid;gap:1rem;max-width:min(90vw,92rem);margin:0 auto;
  grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(9.5rem,auto);
}
.btile{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:1.3rem 1.35rem;display:flex;flex-direction:column;gap:.45rem;justify-content:flex-end;
  position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;
}
.btile:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(28,34,48,.1)}
.btile svg{
  width:1.7rem;height:1.7rem;stroke:var(--gold);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:auto;
}
.btile b{font-size:.98rem;color:var(--ink)}
.btile span{font-size:.8rem;color:var(--grey);line-height:1.5}
.btile.wide{grid-column:span 2;grid-row:span 2}
.btile.tall{grid-row:span 2}
.btile.img-tile{padding:0;justify-content:flex-end}
.btile.img-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.btile-cap{
  position:relative;z-index:2;padding:1.2rem 1.35rem;
  background:linear-gradient(180deg,transparent,rgba(10,15,30,.88) 40%);
  display:flex;flex-direction:column;gap:.3rem;
}
.btile-cap b{color:#fff}
.btile-cap span{color:var(--night-dim)}
.btile-langs{margin-top:.5rem;color:var(--gold);letter-spacing:.2em;font-size:.8rem}

/* ---------- Odoo ---------- */
.odoo{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  max-width:min(90vw,92rem);margin:0 auto;padding:calc(var(--sec-gap)*.6) var(--pad);
}
.odoo-copy p{color:var(--grey)}
.odoo-copy h2{margin-bottom:1rem}
.odoo-visual{padding:1.6rem;display:flex;flex-direction:column;gap:1.2rem;width:min(34rem,90vw);margin:0 auto}
.odoo-lanes{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem}
.onode{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-weight:600;font-size:.85rem;color:var(--ink)}
.onode-ic{
  width:3.4rem;height:3.4rem;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--night);color:var(--gold);
}
.onode-ic svg{width:2rem;height:2rem}
.odoo-word{
  width:3.4rem;height:3.4rem;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:#714B67;color:#fff;font-family:var(--body);font-weight:600;font-size:1rem;letter-spacing:.01em;
}
.olane-stack{display:flex;flex-direction:column;gap:1rem}
.olane{position:relative;height:1.7rem;border-radius:999px;background:rgba(90,98,116,.08);overflow:hidden}
.olane::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  border:1px dashed rgba(90,98,116,.25);
}
.opacket{
  position:absolute;top:50%;transform:translateY(-50%);left:0;
  font-size:.55rem;letter-spacing:.08em;font-weight:600;white-space:nowrap;
  padding:.3em .8em;border-radius:999px;
}
.opacket.p1{background:rgba(113,75,103,.14);color:#714B67;border:1px solid rgba(113,75,103,.35)}
.opacket.p2{background:var(--gold-dim);color:#9A6B1F;border:1px solid rgba(232,163,61,.45)}
.odoo-log{display:flex;flex-direction:column;gap:.3rem;font-size:.68rem;color:var(--grey);border-top:1px dashed var(--line);padding-top:.9rem}
.odoo-log b{color:var(--ok)}
.odoo-log .dim{opacity:.6}

/* ---------- AI assistant ---------- */
.ai{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  max-width:min(90vw,92rem);margin:0 auto;padding:calc(var(--sec-gap)*.6) var(--pad);
  background:#F5F2EC;
}
.ai-copy p{color:var(--grey)}
.ai-copy h2{margin-bottom:1rem}
.ai-visual{display:flex;justify-content:center}
.ai-chat{width:min(28rem,90vw);padding:0;overflow:hidden}
.ai-head{
  display:flex;align-items:center;gap:.7rem;padding:.9rem 1.2rem;
  border-bottom:1px solid var(--line);background:#FBFBFC;
}
.ai-bot-ic{
  width:2.2rem;height:2.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--night);color:var(--gold);
}
.ai-bot-ic svg{width:1.4rem;height:1.4rem;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
.ai-title{font-weight:600;font-size:.92rem;color:var(--ink)}
.ai-online{margin-left:auto;font-size:.68rem;color:var(--ok);display:flex;align-items:center;gap:.4em}
.ai-online i{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);display:block;animation:ringpulse 2s infinite}
.ai-msgs{display:flex;flex-direction:column;gap:.7rem;padding:1.2rem;min-height:19rem}
.msg{
  max-width:85%;padding:.7em 1em;border-radius:14px;font-size:.85rem;line-height:1.5;opacity:0;
}
.msg.user{align-self:flex-end;background:var(--night);color:var(--night-text);border-bottom-right-radius:4px}
.msg.user[dir="rtl"]{align-self:flex-end}
.msg.bot{align-self:flex-start;background:#F0F2F6;color:var(--ink);border-bottom-left-radius:4px}
.msg.typing{align-self:flex-start;background:#F0F2F6;display:flex;gap:.3em;padding:.9em 1em}
.msg.typing i{width:.4rem;height:.4rem;border-radius:50%;background:#9AA1B0;animation:tdot 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}
.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

/* ---------- live sites map ---------- */
.sites{padding:calc(var(--sec-gap)*.7) var(--pad);text-align:center;background:linear-gradient(180deg,#F6F7F9,#F2F1EC)}
.sites .center-h{margin-bottom:2.4rem}
.sites-map{
  position:relative;max-width:min(92vw,78rem);margin:0 auto;
  aspect-ratio:900/420;overflow:hidden;border-radius:20px;
}
.smap-bg{position:absolute;inset:0;width:100%;height:100%}
.smarker{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.sm-dot{
  width:1rem;height:1rem;border-radius:50%;background:var(--ok);position:relative;
  box-shadow:0 0 0 4px rgba(46,158,91,.25);
}
.sm-dot::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid rgba(46,158,91,.5);animation:dotpulse 2.2s ease-out infinite;
}
.sm-dot.idle{background:#AEB6C4;box-shadow:0 0 0 4px rgba(139,148,172,.2)}
.sm-dot.idle::after{border-color:rgba(139,148,172,.4)}
.sm-chip{
  display:flex;flex-direction:column;gap:.05rem;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:.5em .9em;box-shadow:0 10px 26px rgba(28,34,48,.14);
}
.sm-chip b{font-size:.8rem;color:var(--ink);white-space:nowrap}
.sm-chip i{font-style:normal;font-size:.68rem;color:var(--ok);font-weight:600}
.m-hq .sm-chip i{color:#8B94AC}
.sites-total{
  position:absolute;right:1.2rem;bottom:1.2rem;
  background:var(--night);color:var(--night-dim);border-radius:999px;
  font-size:.7rem;letter-spacing:.14em;padding:.6em 1.1em;
}
.sites-total b{color:var(--gold);font-size:1rem;margin-right:.3em}

/* ---------- the big number ---------- */
.bignum{
  min-height:88svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.2rem;text-align:center;padding:4rem var(--pad);
  background:linear-gradient(180deg,var(--silver),#F6F4EF);
}
.bignum-pre,.bignum-post{color:var(--grey);max-width:34rem}
.bignum-pre b{color:var(--ink)}
.bignum-value{
  font-size:clamp(2.6rem,8.5vw,8rem);font-weight:500;color:var(--ink);
  letter-spacing:-.02em;line-height:1;display:flex;align-items:baseline;gap:.25em;
}
.bignum-value i{font-style:normal;font-size:.28em;color:var(--gold);font-weight:600;letter-spacing:.1em}
.bignum-post{font-size:.9rem}

/* ---------- evidence still ---------- */
.fraud-visual{position:relative}
.evidence-still{
  position:absolute;right:-4%;bottom:-9%;width:clamp(11rem,16vw,15rem);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:.55rem .55rem 0;box-shadow:0 24px 60px rgba(28,34,48,.3);
  transform:rotate(5deg);
}
.evidence-still img{display:block;width:100%;border-radius:6px;filter:saturate(.75) contrast(1.05)}
.evidence-still figcaption{
  display:flex;flex-direction:column;gap:.15rem;padding:.55rem .2rem .6rem;
  font-size:.58rem;letter-spacing:.06em;color:var(--grey);
}
.evidence-still figcaption b{color:var(--bad)}
.ev-stamp{
  position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-12deg);
  font-size:.8rem;letter-spacing:.3em;color:var(--bad);
  border:2.5px solid var(--bad);border-radius:6px;padding:.3em .8em;
  background:rgba(255,255,255,.82);
}

/* ---------- face wall ---------- */
.facewall{padding:calc(var(--sec-gap)*.7) var(--pad);text-align:center}
.facewall .center-h{margin-bottom:2.4rem}
.fw-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(5.2rem,1fr));
  gap:clamp(.7rem,1.6vw,1.2rem);max-width:min(88vw,72rem);margin:0 auto;
}
.fw-face{
  position:relative;border-radius:50%;aspect-ratio:1;overflow:visible;
}
.fw-face img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
  filter:grayscale(.55) contrast(.95);transition:filter .5s;
}
.fw-face::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2.5px solid transparent;transition:border-color .4s;
}
.fw-face::before{
  content:"✓";position:absolute;right:-2%;bottom:-2%;z-index:2;
  width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--ok);color:#fff;font-size:.8rem;font-weight:700;
  transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.fw-face.ok img{filter:none}
.fw-face.ok::after{border-color:var(--ok)}
.fw-face.ok::before{transform:scale(1)}
.fw-sub{margin-top:2.2rem;color:var(--grey)}

/* ---------- device family ---------- */
.family{padding:calc(var(--sec-gap)*.7) var(--pad) var(--sec-gap);text-align:center}
.family .center-h{margin-bottom:3rem}
.family-stage{
  position:relative;max-width:min(90vw,74rem);margin:0 auto;
  display:flex;justify-content:center;align-items:flex-end;min-height:26rem;
}
.fam-laptop{width:min(46rem,72vw);z-index:1}
.devtablet{
  background:#0D1322;border-radius:16px;padding:9px;
  box-shadow:0 26px 60px rgba(10,15,30,.3), inset 0 0 0 2px #232B44;
}
.devtablet img{display:block;width:100%;border-radius:9px}
.fam-tablet{
  position:absolute;right:max(0px,calc(50% - 34rem));bottom:-1.5rem;width:min(20rem,34vw);
  z-index:2;transform:rotate(3deg);
}
.fam-phone{
  position:absolute;left:max(0px,calc(50% - 32rem));bottom:-2rem;
  width:min(11.5rem,26vw);z-index:3;transform:rotate(-5deg);padding:6px;border-radius:22px;
}
.fam-phone .devscreen{border-radius:16px}

/* small inline icons */
.ic{width:1em;height:1em;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em;margin-right:.35em}
.gold-ic{color:var(--gold)}

/* ---------- reveals (GSAP sets the motion; this is the resting state) ---------- */
.reveal{opacity:0}
.no-js .reveal,.reduced .reveal{opacity:1}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem;text-align:center}
  .hero-copy{margin:0 auto}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-ctas,.hero-proof{justify-content:center}
  .hero-proof{flex-direction:column;align-items:center;text-align:center;gap:.7rem}
  .hero-proof p br{display:none}
  .hchip.h-gps{left:50%;top:-7%;transform:translateX(-50%);white-space:nowrap}
  .hchip.h-pay{right:0;bottom:-8%;top:auto}
  .hchip.h-rota{display:none}
  .live-pings,.cursor-glow{display:none}
  .constellation{opacity:.3}
  .hero-family{max-width:94vw;min-height:0;padding:2.5rem 0 3rem}
  .hf-laptop{width:86vw}
  .hf-tablet{display:none}
  .hf-phone{width:26vw;left:-1%;bottom:-8%}
  .hf-phone .h-verify{display:none}
  .tour-inner,.ceo-inner{grid-template-columns:1fr;gap:2rem;text-align:center}
  .tstep p{margin:0 auto}
  .tour-dots{justify-content:center}
  .sync-stage{grid-template-columns:1fr;gap:1.2rem;justify-items:center}
  .sync-wire{width:60px;height:70px;transform:rotate(90deg)}
  .pay,.fraud,.langs,.odoo,.ai,.gate,.modular{grid-template-columns:1fr;gap:2.2rem}
  .mod-builder{grid-template-columns:1fr}
  .mod-receipt{position:static}
  .ai .ai-visual{order:2}
  .ai .ai-copy{order:1}
  .sites-map{aspect-ratio:auto;min-height:26rem}
  .sm-chip b{font-size:.72rem}
  .fraud .fraud-visual{order:2}
  .fraud .fraud-copy{order:1}
  .callout em{max-width:10rem;font-size:.56rem}
  .callout.c2{left:38%}
}
@media(max-width:1100px){
  .dayline{display:none}
  .bento-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .h1br{display:none}
  .timer-chip{font-size:.62rem;padding:.45em .95em}
  /* compact topbar: logo mark + language pill + demo button */
  .topbar{padding:.6rem .9rem}
  .wordmark{font-size:0;gap:0}
  .btn-pdf{display:none}
  .lang-pill a{padding:.38em .6em;font-size:.72rem}
  .btn-demo{padding:.5em .85em;font-size:.76rem}
  /* module builder: one column of cards */
  .mod-cards{grid-template-columns:1fr}
  /* laptop base bar must not poke past the viewport */
  .devlaptop .devbase{margin:0 -2px}
  .hero-pillars{grid-template-columns:1fr;text-align:left}
  .bento-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .btile.wide{grid-column:auto;grid-row:auto;min-height:14rem}
  .btile.tall{grid-row:auto}
  .family-stage{flex-direction:column;align-items:center;min-height:0;gap:1.6rem}
  .fam-tablet,.fam-phone{position:static;transform:none;width:min(20rem,80vw)}
  .fam-phone{width:min(13rem,60vw)}
  .evidence-still{position:static;transform:rotate(3deg);margin:1.5rem auto 0}
  .shout{min-height:44svh}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ============================================================
   RTL (Arabic / Sorani) — same design, native type
   ============================================================ */
html[dir="rtl"] body{font-family:var(--arabic)}
html[dir="rtl"] .display,
html[dir="rtl"] .key-line,
html[dir="rtl"] .shout-line,
html[dir="rtl"] .kicker,
html[dir="rtl"] .wordmark{
  font-family:var(--arabic);font-variation-settings:normal;letter-spacing:0;font-weight:700;
}
html[dir="rtl"] h1.display,html[dir="rtl"] h2.display{line-height:1.35}
html[dir="rtl"] .eyebrow{letter-spacing:.02em}
html[dir="rtl"] .hero-note{letter-spacing:.04em}
html[dir="rtl"] .mono{font-family:'IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,monospace;letter-spacing:.02em}
html[dir="rtl"] .btn{font-family:var(--arabic)}
html[dir="rtl"] .shout-line{white-space:normal;text-align:center}
html[dir="rtl"] .proof li{padding-left:0;padding-right:1.6rem}
html[dir="rtl"] .proof li::before{left:auto;right:0}
html[dir="rtl"] .ticker-track{direction:ltr}
html[dir="rtl"] .dayline{left:auto;right:clamp(.6rem,1.4vw,1.4rem)}
html[dir="rtl"] .timer-chip{right:auto;left:clamp(.8rem,2vw,1.6rem)}
html[dir="rtl"] .wordmark{gap:.5em;direction:ltr}
html[dir="rtl"] .hero-family{direction:ltr}
html[dir="rtl"] .odoo-lanes{direction:ltr}

/* the big closing chat CTA (replaced the WhatsApp button) */
.btn-cta-big{font-size:1.05rem;padding:.9em 1.7em;box-shadow:0 10px 40px rgba(232,163,61,.4)}