/* ═══════════════════════════════════════════════════════════════════════════
   SANAD — landing v3
   Dark-first motion system on the SANAD charcoal/cream palette.
   Logical properties throughout, so RTL and LTR share one stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* surfaces */
  --cream:      #f8f4eb;
  --cream-2:    #f3eee1;
  --cream-3:    #ece5d4;
  --white:      #ffffff;

  /* ink */
  --ink:        #231f1c;
  --ink-2:      #45403a;
  --ink-3:      #7b7268;
  --ink-4:      #a89f93;

  /* dark surfaces */
  --deep:       #14110f;
  --deep-2:     #1a1613;
  --deep-3:     #2b2622;

  /* lines */
  --line:       #e8e0d1;
  --line-2:     #d6ccb8;

  /* brass — the single accent, taken from the payroll screen */
  --brass:      #b08d3a;
  --brass-deep: #8a6d1f;
  --brass-lite: #ecd9a0;
  --brass-pale: #fdf6e4;

  --ok:         #2f7d5f;

  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px;

  --sh-sm: 0 1px 3px rgba(35,31,28,.06);
  --sh-md: 0 8px 24px rgba(35,31,28,.08);
  --sh-lg: 0 24px 60px rgba(35,31,28,.12);

  --ease: cubic-bezier(.2,.7,.2,1);

  /* per-scope colour roles — redefined inside .dk */
  --fg:        var(--ink);
  --fg-dim:    var(--ink-3);
  --bg:        var(--cream);
  --edge:      var(--line);
  --edge-2:    var(--line-2);
  --card:      var(--white);
}

/* dark scope: any section that opts in */
.dk{
  --fg:     var(--cream);
  --fg-dim: rgba(248,244,235,.62);
  --bg:     var(--deep);
  --edge:   rgba(248,244,235,.10);
  --edge-2: rgba(248,244,235,.20);
  --card:   rgba(248,244,235,.04);
  color: var(--fg);
  background: var(--bg);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  overflow-x:clip;
  background:var(--cream);color:var(--ink);
  font-family:'Open Sans','Noto Sans Arabic',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:'Roboto Flex','Noto Sans Arabic',system-ui,sans-serif;font-optical-sizing:auto;font-weight:700;letter-spacing:-.02em;line-height:1.15}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4{letter-spacing:0;line-height:1.3}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--cream)}
.en{font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;direction:ltr;display:inline-block}
.num{font-variant-numeric:tabular-nums;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;direction:ltr;unicode-bidi:isolate}
.flip-rtl{display:inline-block}
[dir='rtl'] .flip-rtl{transform:scaleX(-1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:32px}
@media(max-width:760px){.wrap{padding-inline:18px}}

/* ── reveal ───────────────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(26px);filter:blur(7px);
  transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s ease;
  transition-delay:calc(var(--d,0) * 85ms)}
[data-reveal][data-in]{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* ── atmosphere layers ────────────────────────────────────────────────── */
.aurora{position:absolute;inset:-22% -8% auto;height:760px;z-index:0;filter:blur(100px);opacity:.42;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 20s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:560px;height:360px;inset-inline-start:16%;top:0%;background:rgba(176,141,58,.34)}
.aurora i:nth-child(2){width:480px;height:340px;inset-inline-end:12%;top:14%;background:rgba(236,217,160,.14);animation-duration:25s;animation-delay:-7s}
.aurora i:nth-child(3){width:420px;height:300px;inset-inline-start:46%;top:30%;background:rgba(107,96,86,.34);animation-duration:29s;animation-delay:-14s}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7%,5%,0) scale(1.12)}100%{transform:translate3d(-5%,-4%,0) scale(.94)}}

.grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--edge) 1px,transparent 1px),linear-gradient(90deg,var(--edge) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(ellipse 72% 58% at 50% 20%,#000 8%,transparent 74%);
          mask-image:radial-gradient(ellipse 72% 58% at 50% 20%,#000 8%,transparent 74%)}

.spot{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(236,217,160,.08),transparent 70%);
  transition:background .12s linear}

.noise{position:absolute;inset:0;z-index: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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14.5px;font-weight:700;border-radius:999px;padding:13px 24px;
  transition:transform .22s var(--ease),box-shadow .22s ease,background .2s ease,border-color .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-brass{color:var(--ink);background:linear-gradient(180deg,var(--brass-lite),var(--brass));
  box-shadow:0 0 0 1px rgba(176,141,58,.6),0 12px 34px -10px rgba(176,141,58,.7),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-brass:hover{box-shadow:0 0 0 1px var(--brass),0 18px 44px -10px rgba(176,141,58,.85),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-glass{color:var(--fg);background:rgba(248,244,235,.07);border:1px solid var(--edge-2);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(248,244,235,.14)}
.btn-ink{color:var(--cream);background:var(--ink)}
.btn-ink:hover{background:var(--deep-2);box-shadow:0 14px 34px -12px rgba(35,31,28,.6)}
.btn-line{color:var(--ink);border:1px solid var(--line-2);background:var(--white)}
.btn-line:hover{border-color:var(--ink);box-shadow:var(--sh-md)}
.btn-lg{padding:16px 30px;font-size:15.5px}
.btn .ar{transition:transform .22s ease}
.btn:hover .ar{transform:translateX(4px)}
[dir='rtl'] .btn:hover .ar{transform:scaleX(-1) translateX(4px)}

/* ── section heads ────────────────────────────────────────────────────── */
.head{max-width:800px;margin-inline:auto;text-align:center;margin-block-end:58px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:6px 14px;border-radius:999px;color:var(--brass-deep);background:rgba(176,141,58,.12);
  box-shadow:inset 0 0 0 1px rgba(176,141,58,.25)}
.dk .eyebrow{color:var(--brass-lite);background:rgba(176,141,58,.16)}
.head h2{margin-block-start:20px;font-size:clamp(28px,4vw,50px);color:var(--fg)}
.head p{margin-block-start:16px;font-size:16.5px;line-height:1.9;color:var(--fg-dim)}
.grad{background:linear-gradient(96deg,var(--brass-pale) 0%,var(--brass-lite) 32%,var(--brass) 70%,var(--brass-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 9s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}

/* ═══════════════ NAV ═══════════════ */
.nav{position:fixed;inset-block-start:14px;inset-inline:0;z-index:80;display:flex;justify-content:center;padding-inline:16px;pointer-events:none}
.nav-in{pointer-events:auto;width:100%;max-width:1240px;display:flex;align-items:center;gap:16px;
  padding:9px 10px;padding-inline-start:18px;border-radius:999px;border:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,max-width .45s var(--ease),box-shadow .35s ease}
.nav.on .nav-in{max-width:1080px;background:rgba(20,17,15,.88);backdrop-filter:blur(18px) saturate(1.5);
  border-color:rgba(248,244,235,.12);box-shadow:0 20px 50px -30px #000}
.nav-brand{display:inline-flex;align-items:center;gap:10px;color:var(--cream);flex:none}
.nav-brand img{width:32px;height:32px;filter:brightness(0) invert(1)}
.nav-brand b{display:block;font-size:15px;font-weight:800;line-height:1.1;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.nav-brand small{display:block;font-size:9.5px;letter-spacing:.14em;opacity:.55;font-weight:600;margin-block-start:2px}
.nav-links{display:flex;gap:2px;margin-inline:auto}
.nav-links button,.nav-links a{font-size:13.5px;font-weight:500;color:rgba(248,244,235,.66);border-radius:999px;padding:8px 13px;transition:color .2s,background .2s}
.nav-links button:hover,.nav-links a:hover{color:var(--cream);background:rgba(248,244,235,.09)}
.nav-act{display:flex;align-items:center;gap:8px;flex:none}
.nav-lang{font-size:12.5px;font-weight:700;color:rgba(248,244,235,.66);padding:8px 10px;border-radius:999px}
.nav-lang:hover{color:var(--cream);background:rgba(248,244,235,.09)}
.nav-login{font-size:13.5px;font-weight:600;color:var(--cream);padding:8px 12px;border-radius:999px}
.nav-login:hover{background:rgba(248,244,235,.09)}
.nav-cta{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--cream);border-radius:999px;padding:9px 17px;transition:transform .2s,box-shadow .2s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(248,244,235,.5)}
.burger{display:none;width:40px;height:38px;border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:17px;height:1.8px;background:var(--cream);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav.menu .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav.menu .burger span:nth-child(2){opacity:0}
.nav.menu .burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
@media(max-width:1060px){.nav-links{display:none}.burger{display:flex}.nav-act{margin-inline-start:auto}}
@media(max-width:560px){.nav-login,.nav-lang{display:none}}

/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:70;background:var(--deep);padding:96px 24px 40px;
  display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .3s ease,transform .35s var(--ease),visibility .3s}
.nav.menu ~ .sheet,.sheet.open{opacity:1;visibility:visible;transform:none}
.sheet a{display:flex;align-items:baseline;gap:14px;padding:16px 4px;border-block-end:1px solid rgba(248,244,235,.08);
  color:var(--cream);font-size:20px;font-weight:600;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.sheet a i{font-style:normal;font-size:11px;color:var(--brass);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.sheet .sheet-cta{margin-block-start:22px;display:grid;gap:10px}

/* ═══════════════ HERO ═══════════════ */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:112px 0;--mx:50%;--my:22%}
.hero > .aurora,.hero > .grid-bg,.hero > .spot,.hero > .noise{z-index:-1}
.hero-in{position:relative;max-width:1240px;margin-inline:auto;padding-inline:32px;display:flex;flex-direction:column;align-items:center;text-align:center}
@media(max-width:760px){.hero-in{padding-inline:18px}.hero{padding-block-start:104px}}

.pill{display:inline-flex;align-items:center;gap:10px;padding:5px 15px 5px 5px;padding-inline:5px 15px;border-radius:999px;
  color:var(--cream);font-size:12.5px;font-weight:500;background:rgba(248,244,235,.06);
  border:1px solid rgba(248,244,235,.16);backdrop-filter:blur(10px);position:relative;overflow:hidden}
.pill::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(248,244,235,.20) 50%,transparent 70%);
  transform:translateX(-120%);animation:shimmer 4s ease-in-out infinite}
@keyframes shimmer{60%,100%{transform:translateX(120%)}}
.pill-tag{font-size:11px;font-weight:800;color:var(--ink);background:var(--brass-lite);border-radius:999px;padding:3px 10px}

.hero h1{margin-block-start:24px;font-size:clamp(31px,4.3vw,58px);line-height:1.08;max-width:17ch;text-wrap:balance;color:var(--cream)}
:lang(ar) .hero h1{line-height:1.28;max-width:20ch}
.hero h1 .line{display:block}
.hero-lede{margin-block-start:20px;font-size:clamp(14.5px,1.25vw,17px);line-height:1.9;color:rgba(248,244,235,.64);max-width:62ch}
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;color:var(--cream);font-weight:700}
.rot span{display:inline-block;animation:wordIn .55s var(--ease);border-block-end:1.5px dashed rgba(176,141,58,.65);padding-block-end:2px}
@keyframes wordIn{from{transform:translateY(80%);opacity:0;filter:blur(4px)}to{transform:none;opacity:1;filter:none}}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-block-start:26px}
.hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-block-start:22px;font-size:12.8px;color:rgba(248,244,235,.52)}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust svg{width:15px;height:15px;stroke:var(--brass);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* product stage */
.stage{--tilt:1;position:relative;width:100%;max-width:1060px;margin-block-start:48px;perspective:1900px}
.win{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(248,244,235,.16);background:var(--deep-2);
  transform:rotateX(calc(var(--tilt) * 20deg)) scale(calc(1 - var(--tilt) * .05));transform-origin:50% 0;transition:transform .12s linear;
  box-shadow:0 0 0 6px rgba(248,244,235,.03),0 60px 120px -40px #000,0 30px 80px -40px rgba(176,141,58,.22)}
.win-bar{display:flex;align-items:center;gap:7px;height:36px;padding-inline:14px;background:rgba(248,244,235,.05);border-block-end:1px solid rgba(248,244,235,.10);direction:ltr}
.win-bar i{width:9px;height:9px;border-radius:50%;background:rgba(248,244,235,.18)}
.win-bar span{margin-inline:auto;font-size:11.5px;color:rgba(248,244,235,.5);background:rgba(248,244,235,.07);border-radius:8px;padding:3px 18px;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.win img{width:100%;height:auto}
.stage-glow{position:absolute;inset:12% 8% -4%;z-index:-1;background:radial-gradient(closest-side,rgba(176,141,58,.26),transparent);filter:blur(52px)}
.stage::after{content:'';position:absolute;inset-inline:-2%;inset-block-end:-2px;height:42%;background:linear-gradient(180deg,transparent,var(--deep) 92%);pointer-events:none}

.float{position:absolute;z-index:3;padding:13px 16px;border-radius:16px;background:rgba(20,17,15,.62);
  border:1px solid rgba(248,244,235,.16);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 24px 60px -24px #000;
  text-align:start;animation:bob 6.5s ease-in-out infinite}
.float small{display:block;font-size:11px;color:rgba(248,244,235,.55);font-weight:500}
.float b{display:block;font-size:25px;font-weight:700;letter-spacing:-.02em;color:var(--cream);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.float-a{inset-inline-start:-3%;top:24%;min-width:186px}
.float-b{inset-inline-end:-4%;top:11%;display:flex;gap:12px;align-items:center;animation-delay:-2.2s}
.float-b b{font-size:14px;letter-spacing:0}
.float-c{inset-inline-end:5%;top:57%;animation-delay:-4.4s;min-width:170px}
.float-bar{display:block;height:4px;border-radius:4px;background:rgba(248,244,235,.14);margin-block-start:10px;overflow:hidden}
.float-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--brass-lite));border-radius:inherit;transition:width 1.6s var(--ease) .4s}
.dot-live{width:10px;height:10px;border-radius:50%;background:var(--brass-lite);box-shadow:0 0 0 6px rgba(236,217,160,.22);animation:ping 2.2s ease-out infinite;flex:none}
@keyframes ping{70%{box-shadow:0 0 0 13px rgba(236,217,160,0)}}
@keyframes bob{50%{transform:translateY(-9px)}}
@media(max-width:940px){.float{display:none}.stage{margin-block-start:44px}}

/* ═══════════════ LOGO MARQUEE ═══════════════ */
.logos{position:relative;padding-block:52px 64px}
.logos-lbl{display:block;text-align:center;font-size:12.5px;font-weight:500;color:rgba(248,244,235,.5);margin-block-end:22px}
.marquee{overflow:hidden;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-grp{display:flex;align-items:center;gap:72px;padding-inline-end:72px}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee img{height:30px;width:auto;max-width:132px;object-fit:contain;opacity:.42;filter:grayscale(1) brightness(2.6);transition:opacity .25s}
.marquee img:hover{opacity:.9}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ═══════════════ NUMBERS BAND ═══════════════ */
.numbers{border-block:1px solid rgba(248,244,235,.10);background:linear-gradient(180deg,var(--deep),#191512)}
.numbers-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ncell{padding:44px 22px;display:grid;gap:7px;text-align:center}
.ncell+.ncell{border-inline-start:1px solid rgba(248,244,235,.10)}
.ncell b{font-size:clamp(30px,3.8vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(180deg,var(--cream),rgba(248,244,235,.5));-webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;font-variant-numeric:tabular-nums}
.ncell span{font-size:13px;color:rgba(248,244,235,.58)}
@media(max-width:820px){.numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ncell+.ncell{border-inline-start:0}.ncell{border-block-end:1px solid rgba(248,244,235,.10)}}

/* ═══════ THE SYSTEM MAP — signature section ═══════ */
.net{position:relative;padding-block:112px;overflow:hidden;
  /* background-color must stay separate — the `background` shorthand would wipe
     the .dk base and leave cream text on the cream page underneath */
  background-color:var(--deep);
  background-image:radial-gradient(1100px 620px at 50% 50%,rgba(138,109,31,.17),transparent 72%)}

.nmap-intro{max-width:800px;margin-inline:auto;text-align:center;margin-block-start:34px}
.nmap-intro p{margin-block-start:12px;font-size:14.5px;line-height:1.85;color:rgba(248,244,235,.58)}
.nmap{position:relative;width:100%;aspect-ratio:1200/830;min-height:700px;margin-block-start:18px;isolation:isolate}
.nmap::before{content:'';position:absolute;inset:-6% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 50%,rgba(138,109,31,.20),transparent 72%)}

/* wires sit behind the nodes and never eat a click */
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.wire-track{fill:none;stroke:rgba(248,244,235,.12);stroke-width:1.15}
.wire-flow{fill:none;stroke:var(--brass-lite);stroke-width:1.9;stroke-linecap:round;
  stroke-dasharray:11 89;stroke-dashoffset:100;opacity:.85;
  filter:drop-shadow(0 0 5px rgba(236,217,160,.55));
  animation:wireflow 3.8s linear infinite;animation-delay:calc(var(--i,0) * -0.17s)}
.wire-flow.out{stroke:var(--brass)}
.wire-track.feed,.wire-track.loop{stroke-dasharray:4 5;stroke:rgba(248,244,235,.17)}
.wire-flow.feed{stroke:rgba(236,217,160,.75);stroke-width:1.5}
.wire-flow.loop{stroke:#b8ada0;stroke-width:1.5;filter:none;opacity:.5}
/* an exception day triggering a notification: its own dotted signature */
.wire-track.alert{stroke-dasharray:2 6;stroke:rgba(236,217,160,.22)}
/* a deduction is a real money flow, so it stays a solid wire */
.wire-track.deduct{stroke:rgba(248,244,235,.14)}
.wire-flow.deduct{stroke:var(--brass);stroke-width:1.7}
.wire-flow.alert{stroke:rgba(236,217,160,.8);stroke-width:1.4;stroke-dasharray:7 93;
  animation-duration:2.6s;filter:drop-shadow(0 0 4px rgba(236,217,160,.6))}
@keyframes wireflow{to{stroke-dashoffset:0}}
.wire-track.hot{stroke:rgba(236,217,160,.5)}
.wire-flow.hot{stroke:var(--brass-pale);stroke-width:3.1;opacity:1;stroke-dasharray:26 74;
  animation-duration:1.9s;filter:drop-shadow(0 0 10px rgba(236,217,160,1))}
.wire-track.hot{stroke:rgba(236,217,160,.6);stroke-width:1.6;stroke-dasharray:none}
@media(prefers-reduced-motion:reduce){.wire-flow{animation:none;stroke-dasharray:none;opacity:.3}}

/* ── nodes: polar placement. --x runs along the inline axis, so the whole map
   mirrors itself in RTL with no second set of coordinates ── */
.hero-in .nmap,.hero-in .net-foot,.hero-in .route,.hero-in .nmap-intro{max-width:1240px;width:100%;margin-inline:auto}
.nmap-node,.nmap-hub,.nmap-stage{position:absolute;inset-inline-start:var(--x);top:var(--y);
  transform:translate(-50%,-50%)}
[dir='rtl'] .nmap-node,[dir='rtl'] .nmap-hub,[dir='rtl'] .nmap-stage{transform:translate(50%,-50%)}

.nmap-node{z-index:1;display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:14px;
  background:rgba(248,244,235,.045);border:1px solid rgba(248,244,235,.11);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .5s var(--ease),border-color .28s ease,background .28s ease,box-shadow .28s ease;
  transition-delay:calc(var(--i,0) * 70ms)}
[data-in] .nmap-node{opacity:1}
.nmap-event,.nmap-output{width:178px}
.nmap-approver{width:158px;background:rgba(248,244,235,.06)}
.nmap-t{font-size:12.8px;font-weight:700;color:var(--cream);line-height:1.4;min-width:0}
.nico{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:rgba(176,141,58,.14);border:1px solid rgba(176,141,58,.26);transition:background .28s,border-color .28s}
.nico svg{width:16px;height:16px;fill:none;stroke:var(--brass-lite);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.nmap-node,.nmap-hub{cursor:pointer}
.nmap-node:focus-visible,.nmap-hub:focus-visible{outline:none;border-color:rgba(236,217,160,.7)}
.nmap-node:hover{border-color:rgba(236,217,160,.42);background:rgba(176,141,58,.11)}

/* the small stuff: policies feeding the engine, artefacts falling out of it */
.nmap-always{margin-inline-start:auto;flex:none;font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--ink);
  background:var(--brass-lite);border-radius:999px;padding:2px 7px;animation:alwayspulse 2.6s ease-in-out infinite}
@keyframes alwayspulse{50%{box-shadow:0 0 0 4px rgba(236,217,160,.22)}}
@media(prefers-reduced-motion:reduce){.nmap-always{animation:none}}
.nmap-policy,.nmap-leaf{padding:5px 11px;border-radius:999px;gap:0}
.nmap-policy{background:rgba(176,141,58,.13);border-color:rgba(176,141,58,.3)}
.nmap-leaf{background:rgba(248,244,235,.05);border-style:dashed}
.nmap-policy .nmap-t,.nmap-leaf .nmap-t{font-size:11px;font-weight:600;white-space:nowrap}
.nmap-leaf .nmap-t{color:rgba(248,244,235,.72)}

/* the engine */
.nmap-hub{z-index:3;width:136px;height:136px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:1px;
  background:radial-gradient(circle at 50% 30%,#3a301f,var(--deep-2) 70%);border:1px solid rgba(236,217,160,.38);
  box-shadow:0 0 0 12px rgba(176,141,58,.06),0 26px 60px -18px rgba(176,141,58,.55),inset 0 1px 0 rgba(248,244,235,.12);
  transition:opacity .28s ease}
.nmap-hub img{width:30px;height:30px;filter:brightness(0) invert(1);opacity:.92;margin-block-end:3px}
.nmap-hub b{font-size:17px;font-weight:800;color:var(--cream);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.nmap-hub small{font-size:9.5px;color:var(--brass-lite);max-width:104px;text-align:center;line-height:1.35}
.hubring{position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(236,217,160,.3);
  animation:hubpulse 3.4s ease-out infinite;pointer-events:none}
.hubring2{animation-delay:1.7s}
@keyframes hubpulse{from{transform:scale(.9);opacity:.85}to{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.hubring{animation:none;opacity:.22}}

.nmap-stage{z-index:1;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:rgba(248,244,235,.32);
  white-space:nowrap;pointer-events:none}
.nmap-stage-st3{top:auto;bottom:1%;transform:translateX(-50%)}
[dir='rtl'] .nmap-stage-st3{transform:translateX(50%)}

/* route tracer: hovering an event dims everything that is not on its path */
.nmap.tracing .nmap-node:not(.lit),.nmap.tracing .nmap-stage{opacity:.17}
.nmap.tracing .nmap-hub:not(.lit){opacity:.45}
.nmap.tracing .wire-track:not(.hot){opacity:.13}
.nmap.tracing .wire-flow:not(.hot){opacity:.03}
.nmap-node.lit{border-color:rgba(236,217,160,.6);background:rgba(176,141,58,.15);
  box-shadow:0 0 0 1px rgba(236,217,160,.2),0 14px 30px -16px rgba(176,141,58,.8)}
.nmap-node.lit .nico{background:rgba(176,141,58,.28);border-color:rgba(236,217,160,.6)}

.route{margin-block-start:26px;text-align:center;font-size:13.5px;line-height:1.9;color:rgba(248,244,235,.5);
  min-height:26px;transition:color .25s ease}
.route.on{color:rgba(248,244,235,.85)}
.route b{color:var(--cream);font-weight:700}
.route i{font-style:normal;color:var(--brass);padding-inline:7px}
.route-note{opacity:.6}
.loop-note{display:inline-block;margin-block-start:6px;font-size:12.5px;color:rgba(248,244,235,.5)}

.net-foot{margin-block-start:8px;padding:18px 24px;border-radius:var(--r-lg);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  background:rgba(248,244,235,.04);border:1px solid rgba(248,244,235,.10)}
.net-foot p{margin:0;flex:1 1 320px;font-size:14.5px;color:rgba(248,244,235,.72)}
.net-foot b{color:var(--brass-lite)}

.ticker{flex:1 1 300px;min-width:0;padding:11px 14px;border-radius:14px;background:rgba(20,17,15,.55);border:1px solid rgba(236,217,160,.18)}
.ticker-h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  color:rgba(248,244,235,.42);margin-block-end:8px}
.ticker-h .dot-live{width:7px;height:7px;box-shadow:0 0 0 4px rgba(236,217,160,.2)}
.ticker-list{height:38px;overflow:hidden;position:relative}
.ticker-list p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(248,244,235,.8);animation:tickin .5s var(--ease)}
@keyframes tickin{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}

/* ── the phone gets the same graph, drawn down instead of across ──
   Nodes switch to their `--mx/--my` coordinates and zig-zag: consecutive nodes
   sit on opposite sides, so their boxes can never collide however tight the
   vertical spacing gets. The wire engine measures boxes, so the SVG follows
   this layout with no second code path. */
@media(max-width:1160px){
  .nmap{aspect-ratio:380/1620;min-height:0;margin-block-start:14px}
  .nmap::before{inset:-2% -14%}
  .nmap-node,.nmap-hub,.nmap-stage{inset-inline-start:var(--mx);top:var(--my)}

  .nmap-event,.nmap-output{width:min(46vw,190px)}
  .nmap-approver{width:min(42vw,175px)}
  .nmap-node{padding:8px 10px;gap:8px;border-radius:12px}
  .nmap-t{font-size:11.5px;line-height:1.35}
  .nico{width:26px;height:26px;border-radius:9px}
  .nico svg{width:14px;height:14px}
  .nmap-always{font-size:8px;padding:2px 5px}
  .nmap-policy,.nmap-leaf{padding:4px 9px}
  .nmap-policy .nmap-t,.nmap-leaf .nmap-t{font-size:9.5px}

  .nmap-hub{width:112px;height:112px;border-radius:50%;padding:0;gap:0}
  .nmap-hub img{width:24px;height:24px;margin-block-end:2px}
  .nmap-hub b{font-size:14px}
  .nmap-hub small{font-size:8px;max-width:88px}
  .hubring{inset:-8px}

  .nmap-stage{font-size:9px;letter-spacing:.1em;transform:translate(-50%,-50%)}
  [dir='rtl'] .nmap-stage{transform:translate(50%,-50%)}
  .nmap-stage-st3{top:var(--my);bottom:auto}

  .wire-flow{stroke-width:1.5}
  .wire-flow.hot{stroke-width:2.4}
  .wire-track{stroke-width:1}

  /* tapping a node traces it, so the caption stays */
  .route{display:block;margin-block-start:18px;font-size:12px;padding-inline:4px}
  .nmap-intro{margin-block-start:26px}
  .nmap-intro p{font-size:13.5px}
}

/* very narrow phones: shed the labels and tighten the cards further */
@media(max-width:380px){
  .nmap{aspect-ratio:340/1660}
  .nmap-stage{display:none}
  .nmap-t{font-size:10.5px}
  .nmap-event,.nmap-output{width:47vw}
}

@media(min-width:1161px) and (max-width:1330px){
  .nmap-event,.nmap-output{width:158px}
  .nmap-approver{width:142px}
  .nmap-t{font-size:12px}
}

/* ═══════════════ PRODUCT TABS ═══════════════ */
.product{padding-block:100px;background:var(--cream)}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-block-end:34px}
.tab{font-size:14px;font-weight:600;color:var(--ink-3);padding:10px 20px;border-radius:999px;border:1px solid var(--line);
  background:var(--white);transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.tab:hover{color:var(--ink);border-color:var(--line-2)}
.tab[aria-selected='true']{color:var(--cream);background:var(--ink);border-color:var(--ink);box-shadow:0 10px 26px -12px rgba(35,31,28,.6)}
.panes{position:relative;border-radius:var(--r-xl);border:1px solid var(--line);background:var(--white);
  box-shadow:var(--sh-lg);overflow:hidden}
.pane-bar{display:flex;align-items:center;gap:7px;height:38px;padding-inline:16px;background:var(--cream-2);border-block-end:1px solid var(--line);direction:ltr}
.pane-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.pane-bar span{margin-inline:auto;font-size:11.5px;color:var(--ink-3);background:var(--white);border:1px solid var(--line);border-radius:8px;padding:3px 18px;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.pane{display:none}
.pane.on{display:block;animation:paneIn .5s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane img{width:100%;height:auto}
.pane-note{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-block-start:22px;font-size:13.5px;color:var(--ink-3)}
.pane-note span{display:inline-flex;align-items:center;gap:7px}
.pane-note b{color:var(--ink);font-weight:700}

/* ═══════════════ BENTO ═══════════════ */
.bento{padding-block:100px}
.bento-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(240px,auto);gap:14px}
.tile{--mx:50%;--my:50%;position:relative;overflow:hidden;isolation:isolate;border-radius:24px;padding:1px;display:flex;flex-direction:column;
  background:radial-gradient(340px circle at var(--mx) var(--my),rgba(236,217,160,.45),rgba(248,244,235,.10) 46%)}
.tile::before{content:'';position:absolute;inset:1px;z-index:-1;border-radius:23px;background:linear-gradient(180deg,#1b1714,var(--deep))}
.tile::after{content:'';position:absolute;inset:1px;z-index:-1;border-radius:23px;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(176,141,58,.14),transparent 62%)}
.tile:hover::after{opacity:1}
.tile-viz{flex:1;display:grid;place-items:center;padding:26px 26px 0;min-height:140px}
.t-wide .tile-viz{align-content:center}
.tile-txt{padding:18px 26px 26px}
.tile-txt h3{font-size:17.5px;color:var(--cream)}
.tile-txt p{margin-block-start:8px;font-size:14px;line-height:1.8;color:rgba(248,244,235,.6)}
.t-wide{grid-column:span 4;grid-row:span 2}
.t-half{grid-column:span 2}
@media(max-width:1000px){.bento-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.t-wide{grid-column:span 2;grid-row:auto}.t-half{grid-column:span 1}}
@media(max-width:620px){.bento-grid{grid-template-columns:1fr}.t-wide,.t-half{grid-column:auto}}

/* tile: geofence punch */
.geo{position:relative;width:100%;height:170px;border-radius:16px;overflow:hidden;border:1px solid rgba(248,244,235,.10);
  background:radial-gradient(circle at 50% 52%,rgba(176,141,58,.16),transparent 62%),#191512}
.geo-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(248,244,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(248,244,235,.06) 1px,transparent 1px);background-size:26px 26px}
.geo-ring{position:absolute;inset-inline-start:50%;inset-block-start:52%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;
  border:1.5px dashed rgba(236,217,160,.45);background:rgba(176,141,58,.08)}
.geo-ring::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(236,217,160,.45);animation:pulseRing 3s ease-out infinite}
@keyframes pulseRing{from{transform:scale(.86);opacity:1}to{transform:scale(1.55);opacity:0}}
.geo-pin{position:absolute;inset-inline-start:50%;inset-block-start:52%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:var(--brass-lite);box-shadow:0 0 0 5px rgba(236,217,160,.22),0 0 18px rgba(236,217,160,.8)}
.geo-tag{position:absolute;inset-block-end:12px;inset-inline-start:12px;font-size:11.5px;font-weight:700;color:var(--ink);
  background:var(--brass-lite);border-radius:999px;padding:4px 11px;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.geo-src{position:absolute;inset-block-start:12px;inset-inline-end:12px;display:flex;gap:6px}
.geo-src span{font-size:10.5px;font-weight:700;color:rgba(248,244,235,.7);background:rgba(248,244,235,.08);border:1px solid rgba(248,244,235,.14);border-radius:999px;padding:3px 9px}

/* tile: payroll breakdown */
.brk{width:100%;display:grid;gap:10px}
.brk-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:15px 17px;border-radius:13px;
  background:rgba(248,244,235,.04);border:1px solid rgba(248,244,235,.08);font-size:13px;color:rgba(248,244,235,.78);
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s var(--ease);transition-delay:calc(var(--i,0) * 110ms + 250ms)}
[data-in] .brk-row{opacity:1;transform:none}
.brk-row b{font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;font-variant-numeric:tabular-nums;color:var(--cream);font-size:14px}
.brk-row.minus b{color:var(--brass-lite)}
.brk-row.total{background:linear-gradient(90deg,rgba(176,141,58,.16),transparent 75%);border-color:rgba(176,141,58,.4)}
.brk-row.total b{color:var(--brass-lite);font-size:16px}

/* tile: whatsapp card */
.wa{width:100%;display:grid;gap:9px}
.wa-b{max-width:92%;padding:11px 14px;border-radius:14px;font-size:12.8px;line-height:1.7;color:rgba(248,244,235,.85);
  background:rgba(248,244,235,.06);border:1px solid rgba(248,244,235,.10);border-start-start-radius:4px}
.wa-b b{display:block;color:var(--cream);font-size:13.2px;margin-block-end:3px}
.wa-btns{display:flex;gap:7px;margin-block-start:9px}
.wa-btns span{flex:1;text-align:center;font-size:11.5px;font-weight:700;padding:7px;border-radius:9px;
  background:rgba(248,244,235,.08);border:1px solid rgba(248,244,235,.14);color:rgba(248,244,235,.8)}
.wa-btns span.ok{background:rgba(176,141,58,.22);border-color:rgba(236,217,160,.45);color:var(--brass-lite)}
.wa-typing{display:inline-flex;gap:4px;align-self:flex-end;padding:11px 14px;border-radius:14px;background:rgba(248,244,235,.06);border:1px solid rgba(248,244,235,.10)}
.wa-typing i{width:5px;height:5px;border-radius:50%;background:rgba(248,244,235,.5);animation:typing 1.3s ease-in-out infinite}
.wa-typing i:nth-child(2){animation-delay:.18s}.wa-typing i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* tile: gov files */
.files{width:100%;display:grid;gap:9px}
.file{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:rgba(248,244,235,.04);border:1px solid rgba(248,244,235,.09)}
.file-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:9.5px;font-weight:800;
  color:var(--brass-lite);background:rgba(176,141,58,.16);border:1px solid rgba(176,141,58,.3);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.file b{display:block;font-size:13px;color:var(--cream)}
.file small{display:block;font-size:11px;color:rgba(248,244,235,.5)}
.file-ok{margin-inline-start:auto;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:rgba(176,141,58,.2);flex:none}
.file-ok svg{width:11px;height:11px;stroke:var(--brass-lite);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* tile: languages */
.langs{width:100%;display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.langs span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:rgba(248,244,235,.8);background:rgba(248,244,235,.05);
  border:1px solid rgba(248,244,235,.12);border-radius:999px;padding:7px 14px}
.langs span i{font-style:normal;font-size:10px;font-weight:800;color:var(--brass);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;flex:none}

/* tile: compliance timeline */
.tl2{width:100%;display:grid;gap:0;position:relative;padding-inline-start:20px}
.tl2::before{content:'';position:absolute;inset-block:8px 14px;inset-inline-start:5px;width:1.5px;background:rgba(248,244,235,.14)}
.tl2 div{position:relative;padding-block:8px;font-size:12.6px;color:rgba(248,244,235,.7)}
.tl2 div::before{content:'';position:absolute;inset-inline-start:-19px;inset-block-start:15px;width:9px;height:9px;border-radius:50%;
  background:var(--deep);border:1.5px solid rgba(236,217,160,.55)}
.tl2 div b{color:var(--cream);font-weight:700}

/* ═══════════════ CALCULATOR ═══════════════ */
.calc{padding-block:100px;background:var(--cream-2);border-block:1px solid var(--line)}
.calc-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);background:var(--white);box-shadow:var(--sh-lg)}
.calc-in{padding:38px 36px}
.calc-out{padding:38px 36px;background:linear-gradient(165deg,var(--deep-2),var(--deep));color:var(--cream);position:relative;overflow:hidden}
.calc-out .grid-bg{--edge:rgba(248,244,235,.07)}
@media(max-width:900px){.calc-card{grid-template-columns:1fr}}
@media(max-width:560px){.calc-in,.calc-out{padding:28px 22px}}
.calc-f{margin-block-end:26px}
.calc-f:last-child{margin-block-end:0}
.calc-f label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-block-end:12px}
.calc-f label b{font-size:19px;font-weight:700;color:var(--ink);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;font-variant-numeric:tabular-nums}
.calc-f label b small{font-size:12px;font-weight:600;color:var(--ink-3);margin-inline-start:4px}
input[type='range']{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;background:var(--line);outline:none}
input[type='range']::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;cursor:pointer;
  background:var(--ink);border:3px solid var(--white);box-shadow:0 2px 10px rgba(35,31,28,.35)}
input[type='range']::-moz-range-thumb{width:22px;height:22px;border-radius:50%;cursor:pointer;background:var(--ink);border:3px solid var(--white);box-shadow:0 2px 10px rgba(35,31,28,.35)}
input[type='range']:focus-visible{box-shadow:0 0 0 3px rgba(176,141,58,.4)}
.calc-scale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-4);margin-block-start:8px;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.calc-note{margin-block-start:26px;padding-block-start:20px;border-block-start:1px solid var(--line);font-size:12.5px;line-height:1.8;color:var(--ink-3)}
.calc-res{position:relative;z-index:1;display:grid;gap:18px}
.calc-res-h{font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(248,244,235,.5)}
.calc-big{display:grid;gap:4px}
.calc-big b{font-size:clamp(38px,5vw,58px);line-height:1;font-weight:700;letter-spacing:-.03em;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--brass-pale),var(--brass-lite) 45%,var(--brass));-webkit-background-clip:text;background-clip:text;color:transparent}
.calc-big span{font-size:14px;color:rgba(248,244,235,.6)}
.calc-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-mini div{padding:15px 16px;border-radius:14px;background:rgba(248,244,235,.06);border:1px solid rgba(248,244,235,.12)}
.calc-mini b{display:block;font-size:22px;font-weight:700;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;font-variant-numeric:tabular-nums;color:var(--cream)}
.calc-mini small{display:block;font-size:11.8px;color:rgba(248,244,235,.55);margin-block-start:3px}
.calc-cta{margin-block-start:6px;display:flex;flex-wrap:wrap;gap:10px}

/* ═══════════════ STORY TIMELINE ═══════════════ */
.story{padding-block:100px;background:var(--cream)}
.tl{position:relative;display:grid;gap:42px;padding-inline-start:64px;max-width:900px;margin-inline:auto}
.tl-line{position:absolute;inset-block:10px;inset-inline-start:23px;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.tl-line i{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--brass),var(--brass-deep));transform-origin:top;transform:scaleY(0);transition:transform .15s linear}
.tl-row{position:relative}
.tl-node{position:absolute;inset-inline-start:-64px;inset-block-start:-2px;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--line);color:var(--ink-4);font-weight:800;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;font-size:15px;
  transition:border-color .4s,color .4s,background .4s,box-shadow .4s,transform .4s var(--ease)}
.tl-row.on .tl-node{background:var(--ink);border-color:var(--ink);color:var(--brass-lite);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(35,31,28,.7)}
.tl-row h3{font-size:19px;color:var(--ink)}
.tl-row p{margin-block-start:8px;font-size:14.5px;line-height:1.85;color:var(--ink-3);max-width:60ch}
.tl-row ul{margin-block-start:12px;display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.tl-row li{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.tl-kick{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--brass-deep);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
@media(max-width:680px){.tl{padding-inline-start:52px}.tl-node{inset-inline-start:-52px;width:38px;height:38px;border-radius:13px;font-size:13px}.tl-line{inset-inline-start:18px}}

/* ═══════════════ COMPLIANCE STRIP ═══════════════ */
.comp{padding-block:82px}
.comp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-block-start:14px}
.comp-c{padding:22px 16px;border-radius:16px;text-align:center;background:rgba(248,244,235,.04);border:1px solid rgba(248,244,235,.10);
  transition:border-color .25s,background .25s,transform .25s var(--ease)}
.comp-c:hover{border-color:rgba(236,217,160,.4);background:rgba(176,141,58,.08);transform:translateY(-3px)}
.comp-c b{display:block;font-size:15px;font-weight:800;color:var(--cream);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.comp-c small{display:block;font-size:11.5px;color:rgba(248,244,235,.55);margin-block-start:5px;line-height:1.6}
@media(max-width:900px){.comp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.comp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ═══════════════ TESTIMONIAL ═══════════════ */
.testi{padding-block:96px;background:var(--cream)}
.testi-card{max-width:900px;margin-inline:auto;text-align:center}
.testi-q{font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;font-size:clamp(20px,2.7vw,32px);line-height:1.6;font-weight:600;color:var(--ink);margin-block:26px}
:lang(ar) .testi-q{line-height:1.8}
.testi-by{display:inline-flex;align-items:center;gap:13px}
.testi-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--brass-lite);font-weight:800;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;font-size:15px}
.testi-by div{text-align:start}
.testi-by b{display:block;font-size:15px;color:var(--ink)}
.testi-by small{display:block;font-size:13px;color:var(--ink-3)}

/* ═══════════════ PRICING ═══════════════ */
.pricing{padding-block:100px;background:var(--cream-2);border-block-start:1px solid var(--line)}
.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
@media(max-width:960px){.pr-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.pr{position:relative;padding:32px 28px;border-radius:var(--r-xl);background:var(--white);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s}
.pr:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--line-2)}
.pr-hot{background:linear-gradient(170deg,var(--deep-2),var(--deep));border-color:var(--deep);color:var(--cream);box-shadow:0 30px 70px -30px rgba(35,31,28,.8)}
.pr-hot:hover{box-shadow:0 40px 90px -30px rgba(35,31,28,.9)}
.pr-badge{position:absolute;inset-block-start:-12px;inset-inline-end:26px;font-size:11px;font-weight:800;color:var(--ink);
  background:linear-gradient(180deg,var(--brass-lite),var(--brass));border-radius:999px;padding:5px 14px;box-shadow:0 8px 20px -8px rgba(176,141,58,.8)}
.pr-tier{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--ink-4);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.pr-hot .pr-tier{color:var(--brass)}
.pr h3{margin-block-start:8px;font-size:21px}
.pr-price{margin-block-start:16px;display:flex;align-items:baseline;gap:7px}
.pr-price b{font-size:46px;font-weight:700;letter-spacing:-.03em;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;line-height:1}
.pr-price small{font-size:13px;color:var(--ink-3)}
.pr-hot .pr-price small{color:rgba(248,244,235,.6)}
.pr-floor{margin-block-start:8px;font-size:12.5px;color:var(--ink-3)}
.pr-hot .pr-floor{color:rgba(248,244,235,.6)}
.pr ul{list-style:none;margin-block:22px;display:grid;gap:10px}
.pr li{position:relative;padding-inline-start:26px;font-size:13.8px;line-height:1.7;color:var(--ink-2)}
.pr-hot li{color:rgba(248,244,235,.78)}
.pr li::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:7px;width:15px;height:15px;border-radius:50%;
  background:rgba(176,141,58,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6d1f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:10px 10px;background-position:center;background-repeat:no-repeat}
.pr-hot li::before{background-color:rgba(236,217,160,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd9a0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.pr .btn{width:100%}

/* ═══════════════ FINAL CTA + FOOTER ═══════════════ */
.final{position:relative;isolation:isolate;overflow:hidden;padding-block:110px 0;--mx:50%;--my:40%}
.final > .aurora,.final > .grid-bg,.final > .spot,.final > .noise{z-index:-1}
.final-in{position:relative;text-align:center;max-width:820px;margin-inline:auto}
.final-mark{width:56px;height:56px;margin-inline:auto;margin-block-end:22px;opacity:.75;filter:brightness(0) invert(1)}
.final h2{font-size:clamp(30px,4.4vw,56px);color:var(--cream)}
.final p{margin-block-start:18px;font-size:16.5px;line-height:1.9;color:rgba(248,244,235,.62)}
.final .hero-cta{margin-block-start:32px}
.final-phone{margin-block-start:22px;font-size:14px;color:rgba(248,244,235,.55)}
.final-phone a{color:var(--brass-lite);font-weight:700;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;direction:ltr;display:inline-block}

.foot{position:relative;margin-block-start:96px;border-block-start:1px solid rgba(248,244,235,.10);padding-block:44px 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{display:flex;align-items:center;gap:11px;margin-block-end:14px}
.foot-brand img{width:32px;height:32px;filter:brightness(0) invert(1);opacity:.85}
.foot-brand b{font-size:16px;font-weight:800;color:var(--cream);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif}
.foot p{font-size:13.2px;line-height:1.8;color:rgba(248,244,235,.55);max-width:34ch}
.foot h4{font-size:12px;font-weight:800;letter-spacing:.1em;color:rgba(248,244,235,.45);margin-block-end:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot li a{font-size:13.5px;color:rgba(248,244,235,.7);transition:color .2s}
.foot li a:hover{color:var(--brass-lite)}
.foot-sales{margin-block-start:14px;font-size:13px;color:rgba(248,244,235,.55)}
.foot-sales a{display:block;margin-block-start:4px;color:var(--cream);font-weight:700;font-size:16px;font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;direction:ltr}
.foot-bot{margin-block-start:34px;padding-block-start:22px;border-block-start:1px solid rgba(248,244,235,.08);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12.5px;color:rgba(248,244,235,.45)}

/* ═══════════════ DEMO MODAL (class names kept so landing.js works unchanged) ═══════════════ */
.modal-back{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:rgba(20,17,15,.62);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.modal-back.open{opacity:1;visibility:visible}
.modal{position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 32px;
  box-shadow:0 40px 100px -30px rgba(35,31,28,.5);transform:translateY(14px) scale(.985);transition:transform .32s var(--ease)}
.modal-back.open .modal{transform:none}
@media(max-width:520px){.modal{padding:26px 20px}}
.modal-x{position:absolute;inset-block-start:16px;inset-inline-end:16px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-3);background:var(--cream-2);transition:background .2s,color .2s}
.modal-x:hover{background:var(--cream-3);color:var(--ink)}
.modal h3{font-size:22px;color:var(--ink);padding-inline-end:38px}
.modal .sub{margin-block-start:8px;font-size:14px;line-height:1.8;color:var(--ink-3)}

.call-line{display:flex;align-items:center;gap:13px;margin-block-start:22px;padding:14px 16px;border-radius:var(--r);
  background:var(--cream-2);border:1px solid var(--line)}
.call-line .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--brass-deep);background:rgba(176,141,58,.14)}
.call-line .txt{flex:1;min-width:0}
.call-line .lbl{font-size:12px;color:var(--ink-3)}
.call-line .num{font-size:16px;font-weight:700;color:var(--ink);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;direction:ltr;text-align:start}
.call-btn{flex:none;font-size:13px;font-weight:700;color:var(--cream);background:var(--ink);border-radius:999px;padding:9px 16px;transition:background .2s}
.call-btn:hover{background:var(--deep-2)}

.divider{display:flex;align-items:center;gap:14px;margin-block:22px;color:var(--ink-4);font-size:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

.honeypot{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fld{margin-block-end:16px}
.fld.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:440px){.fld.row{grid-template-columns:1fr}}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-block-end:7px}
.fld .req{color:var(--brass-deep)}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;transition:border-color .2s,box-shadow .2s,background .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;background:var(--white);border-color:var(--ink);box-shadow:0 0 0 3px rgba(35,31,28,.08)}
.fld textarea{resize:vertical;min-height:76px}
.modal-actions{margin-block-start:22px}
.modal-actions .btn{width:100%}
.btn-primary{color:var(--cream);background:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15px;font-weight:700;border-radius:999px;padding:14px 24px;transition:background .2s,transform .2s,box-shadow .2s}
.btn-primary:hover{background:var(--deep-2);transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(35,31,28,.6)}
.btn-primary:disabled{opacity:.6;cursor:default;transform:none}
.btn-ghost{color:var(--ink);border:1px solid var(--line-2);background:var(--white);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:700;border-radius:999px;padding:12px 22px;transition:border-color .2s,box-shadow .2s}
.btn-ghost:hover{border-color:var(--ink)}
.modal-msg{margin-block-start:14px;font-size:13.5px;color:#ba1a1a;min-height:1px}
.modal-msg.ok{color:var(--ok)}

.modal-success{display:none;text-align:center;padding-block:14px}
.modal-success.show{display:block;animation:paneIn .45s var(--ease)}
.ok-circle{width:64px;height:64px;border-radius:50%;margin-inline:auto;margin-block-end:18px;display:grid;place-items:center;
  color:var(--brass-deep);background:rgba(176,141,58,.16);box-shadow:0 0 0 8px rgba(176,141,58,.07)}
.modal-success h3{padding:0}
.modal-success p{margin-block-start:10px;font-size:14.5px;line-height:1.8;color:var(--ink-3)}
.phone-big{display:inline-block;margin-block-start:16px;font-size:21px;font-weight:700;color:var(--ink);font-family:'Roboto Flex','Noto Sans Arabic',sans-serif;direction:ltr}

/* ═══════════════ SMALL SCREENS ═══════════════ */
/* the marquee track is wider than the phone on purpose; keep its wrappers
   inside the column so nothing can leak past `overflow-x: clip` */
.logos,.marquee{width:100%;max-width:100%}

@media(max-width:760px){
  .chain,.bento,.calc,.story,.pricing,.product{padding-block:66px}
  .comp{padding-block:56px}
  .testi{padding-block:64px}
  .final{padding-block:72px 0}
  .head{margin-block-end:38px}
  .foot{margin-block-start:60px}
  .tabs{gap:6px}
  .tab{padding:9px 15px;font-size:13px}
}
.route-note{opacity:.6}
/* the route caption only makes sense next to the drawn graph */
@media(max-width:1160px){.route{display:none}}