/* ============================================================
   BizArch — Website Design System
   ============================================================ */
:root{
  /* brand — from the BizArch logo (mark #0369A1, wordmark #0F172A) */
  --navy:        #075985;   /* deep brand blue (sky-800) — wordmark, ghost text */
  --navy-deep:   #0C4A6E;   /* sky-900 */
  --navy-ink:    #0F172A;   /* slate-900 — headings, matches the wordmark */
  --brand:       #0369A1;   /* the logo blue (sky-700) — primary brand */
  --teal:        #0369A1;   /* accent role → brand blue */
  --teal-deep:   #075985;   /* sky-800 */
  --green:       #0EA5E9;   /* former 3rd accent → bright sky (sky-500) */
  --green-deep:  #0284C7;   /* sky-600 */
  --mint:        #7DD3FC;   /* on-dark bright accent (sky-300) */

  /* neutrals — slate, tuned to the #0F172A wordmark */
  --bg:          #FFFFFF;
  --bg-soft:     #F4F8FC;
  --bg-mute:     #E8F1FA;
  --line:        #E1EAF3;
  --line-soft:   #EEF3F9;
  --ink:         #0F172A;
  --ink-2:       #3F4E66;
  --ink-3:       #64748B;

  /* FLAT colour system — one solid brand blue drives buttons, bars,
     underlines and headline highlights. The --grad-* tokens stay same-colour
     so background-clip:text elements (wordmark, highlight words) keep working. */
  --btn:         #0369A1;   /* primary action — the logo blue, white text */
  --btn-hover:   #075985;   /* darken on hover */
  --accent:      #0369A1;   /* solid flat accent = brand */
  --grad-brand:  var(--accent);                              /* bars / rings → solid brand */
  --grad-tg:     linear-gradient(var(--accent), var(--accent)); /* flat, but clip-text safe */
  --grad-mint:   linear-gradient(var(--mint), var(--mint));     /* on-dark accents, flat sky */
  --grad-btn:    var(--btn);
  --grad-dark:   #082F49;   /* dark sections → deep brand blue (sky-950) */

  --shadow-sm:   0 2px 10px rgba(15,23,42,0.06);
  --shadow-md:   0 14px 40px rgba(15,23,42,0.10);
  --shadow-lg:   0 30px 70px rgba(15,23,42,0.16);
  --shadow-glow: 0 20px 60px rgba(3,105,161,0.30);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);

  --nav-h: 76px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 14px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.006em;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: 'Space Grotesk', sans-serif;
  color: var(--navy-ink);
  margin:0;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}
p{ margin:0; color: var(--ink-2); text-wrap: pretty; }
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- type scale ---------- */
.h-display{ font-size: clamp(44px, 7.4vw, 104px); letter-spacing: -0.045em; line-height: 0.96; }
.h1{ font-size: clamp(34px, 4.6vw, 62px); letter-spacing: -0.035em; }
.h2{ font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -0.03em; }
.h3{ font-size: clamp(20px, 1.7vw, 25px); letter-spacing: -0.02em; }
.lead{ font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; color: var(--ink-2); }

.grad-text{
  background: var(--grad-tg);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: grad-flow 7s ease-in-out infinite;
}
.grad-text.mint{ background: var(--grad-mint); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; }
@keyframes grad-flow{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce){ .grad-text{ animation:none; } }

/* ---------- layout ---------- */
.wrap{ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section{ padding: clamp(56px, 7.2vw, 106px) 0; position: relative; }
.section.tight{ padding: clamp(40px, 5vw, 72px) 0; }
/* sections that sit on the same tone as their neighbour don't need a double gap */
.section + .section{ padding-top: clamp(48px, 6vw, 88px); }

.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600; font-size: 12.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal-deep);
}
.eyebrow::before{ content:""; width:30px; height:2px; border-radius:2px; background: var(--grad-tg); }
.eyebrow.on-dark{ color: var(--mint); }
.eyebrow.on-dark::before{ background: var(--mint); }
.eyebrow.center{ justify-content:center; }

.sec-head{ max-width: 760px; }
.sec-head .h2{ margin-top: 20px; }
.sec-head .lead{ margin-top: 22px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Grotesk', sans-serif; font-weight:600;
  font-size: 15.5px; letter-spacing:-0.01em;
  padding: 14px 26px; border-radius: 999px;
  cursor:pointer; border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  white-space: nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{
  color:#fff; background: var(--navy-ink);
  box-shadow: 0 8px 20px rgba(15,23,42,0.22);
}
.btn-primary:hover{ transform: translateY(-3px); background:#1B2740; box-shadow: 0 14px 30px rgba(15,23,42,0.3); }
.btn-primary .arrow{ transition: transform .35s var(--ease); }
.btn-primary:hover .arrow{ transform: translateX(4px); }
/* primary action = near-black across the site (nav, hero, CTAs) — reads clearly on
   white AND on the blue gradient panel, where brand blue went muddy */
.btn-grad{ color:#fff; background: var(--navy-ink); box-shadow: 0 8px 22px rgba(15,23,42,0.24); }
.btn-grad:hover{ transform: translateY(-3px); background:#1B2740; box-shadow: 0 16px 34px rgba(15,23,42,0.32); }
.btn-ghost{ color: var(--navy); background: transparent; border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--teal); color: var(--teal-deep); transform: translateY(-2px); }
.btn-ghost.on-dark{ color:#fff; border-color: rgba(255,255,255,0.28); }
.btn-ghost.on-dark:hover{ border-color: var(--mint); color: var(--mint); }
.btn-lg{ padding: 17px 32px; font-size: 16.5px; }
/* WhatsApp: white-on-#25D366 measured 1.98:1 (fails WCAG even for large text).
   Deepened just enough to clear 3:1 at large-text sizing, while staying WhatsApp green. */
.btn-wa{ color:#fff; background:#15A048; box-shadow: 0 10px 26px rgba(21,160,72,0.32);
  font-size:18.7px; font-weight:700; }
.btn-wa:hover{ transform: translateY(-3px); background:#128C3E; box-shadow: 0 16px 36px rgba(21,160,72,0.42); }
.btn-wa svg{ width:19px; height:19px; }

/* film grain on dark sections — premium texture that also dithers gradient banding */
.section.dark::after{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  height: var(--nav-h);
  display:flex; align-items:center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav.scrolled{
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(15,23,42,0.06);
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ height: 38px; width:auto; }
.brand .word{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size: 22px; letter-spacing:-0.03em; line-height:1; }
.brand .word .biz{ color: var(--navy); }
.brand .word .arch{ background: var(--grad-tg); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links{ display:flex; align-items:center; gap: 6px; }
.nav-links a{
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  padding: 9px 15px; border-radius: 999px;
  transition: color .25s, background .25s;
}
.nav-links a:hover{ color: var(--navy); background: var(--bg-mute); }
.nav-links a.active{ color: var(--navy); background: var(--bg-mute); }
.nav-right{ display:flex; align-items:center; gap: 14px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background: var(--navy); border-radius:2px; transition: .3s; }
.nav-toggle span + span{ margin-top:6px; }

@media (max-width: 940px), (max-width: 1024px) and (orientation: portrait){
  .nav-links{
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap:0;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    padding: 14px var(--gut) 28px; box-shadow: var(--shadow-md);
    transform: translateY(-130%); transition: transform .45s var(--ease);
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-links a{ padding: 14px 8px; font-size: 18px; border-bottom: 1px solid var(--line-soft); border-radius:0; }
  .nav-toggle{ display:block; }
  .nav-right .btn{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + 70px);
  padding-bottom: clamp(70px, 9vw, 130px);
  background:
    radial-gradient(ellipse 70% 60% at 82% -6%, rgba(3,105,161,0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at -8% 108%, rgba(14,165,233,0.12), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F8FC 100%);
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero .wrap{ position: relative; z-index: 2; }
.hero-grid{
  display:grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  padding: 7px 9px 7px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.7); border:1px solid var(--line);
  box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family:'Space Grotesk',sans-serif; font-size: 12.5px; font-weight:600;
  color: var(--ink-2); letter-spacing: 0.01em;
}
.hero-badge .pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 11px; border-radius:999px; color:#fff;
  background: var(--grad-tg); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
}
.hero-badge .dot{ width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.4); animation: pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.hero h1{ margin-top: 26px; }
.hero .lead{ margin-top: 26px; max-width: 540px; }
.hero-cta{ margin-top: 38px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-trust{ margin-top: 40px; display:flex; gap: 28px; flex-wrap:wrap; align-items:center; }
.hero-trust .ht{ display:flex; flex-direction:column; }
.hero-trust .ht .n{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: 26px; color: var(--navy); letter-spacing:-0.03em; }
.hero-trust .ht .l{ font-size: 12.5px; color: var(--ink-3); letter-spacing:0.02em; }
.hero-trust .sep{ width:1px; height: 34px; background: var(--line); }

/* hero visual — orbiting logo / glass panel */
.hero-visual{ position: relative; aspect-ratio: 1/1; display:grid; place-items:center; }
.hero-orb{
  position:absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(125,211,252,0.25), transparent 60%),
              radial-gradient(circle at 70% 75%, rgba(14,165,233,0.18), transparent 55%);
  filter: blur(8px);
}
.orbit-ring{
  position:absolute; border-radius:50%;
  border:1px solid rgba(7,89,133,0.10);
}
.orbit-ring.r1{ inset: 4%; }
.orbit-ring.r2{ inset: 16%; border-color: rgba(3,105,161,0.16); }
.orbit-ring.r3{ inset: 28%; border-color: rgba(14,165,233,0.14); }
.orbit-dot{ position:absolute; top:0; left:50%; width:11px; height:11px; border-radius:50%; transform: translate(-50%,-50%); }
.orbit-spin{ position:absolute; inset:4%; animation: spin 18s linear infinite; }
.orbit-spin.s2{ inset:16%; animation-duration: 26s; animation-direction: reverse; }
.orbit-spin.s3{ inset:28%; animation-duration: 34s; }
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .orbit-spin{ animation:none; } }

.hero-card{
  position: relative; z-index: 3;
  width: 78%;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 26px 26px 22px;
}
.hero-card .logo-big{ display:flex; justify-content:center; }
.hero-card .logo-big img{ height: 96px; width:auto; }
.hero-card .hc-word{ text-align:center; margin-top: 12px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: 30px; letter-spacing:-0.03em; }
.hero-card .hc-word .biz{ color: var(--navy); }
.hero-card .hc-word .arch{ background:var(--grad-tg); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-card .hc-tag{ text-align:center; margin-top:4px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color: var(--ink-3); }
.hero-card .hc-bars{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-top:20px; }
.hero-card .hc-bars .b{ height: 54px; border-radius: 10px; background: var(--bg-soft); border:1px solid var(--line); position:relative; overflow:hidden; }
.hero-card .hc-bars .b::after{ content:""; position:absolute; left:8px; right:8px; bottom:8px; height:var(--bh,40%); border-radius:5px; background: var(--grad-tg); }
.hero-card .hc-bars .b.b1::after{ --bh:38%; }
.hero-card .hc-bars .b.b2::after{ --bh:66%; background: linear-gradient(180deg,var(--navy),var(--teal)); }
.hero-card .hc-bars .b.b3::after{ --bh:50%; background: var(--grad-mint); }

.float-chip{
  position:absolute; z-index:4;
  display:flex; align-items:center; gap:9px;
  padding: 11px 15px; border-radius: 14px;
  background: rgba(255,255,255,0.92); border:1px solid var(--line);
  box-shadow: var(--shadow-md); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size: 13px; color: var(--navy);
}
.float-chip .ic{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff;
  background: linear-gradient(140deg, var(--i1,#075985), var(--i2,#0369A1));
}
.float-chip.fc1{ top: 6%; left: -4%; }
.float-chip.fc2{ bottom: 12%; right: -6%; }
.float-chip.fc3{ bottom: 30%; left: -8%; }
.float{ animation: floaty 5s ease-in-out infinite; }
.float.d1{ animation-delay: -1.6s; }
.float.d2{ animation-delay: -3.2s; }
@keyframes floaty{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }
@media (prefers-reduced-motion: reduce){ .float{ animation:none; } }

/* marquee logo strip */
.logo-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--bg); padding: 26px 0; }
.logo-strip .label{ text-align:center; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color: var(--ink-3); margin-bottom:18px; }
.marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display:flex; gap: 44px; width:max-content; animation: marq 32s linear infinite; }
@keyframes marq{ to{ transform: translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track .item{ display:flex; align-items:center; gap:10px; color: var(--ink-3); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.01em; white-space:nowrap; }
.marquee-track .item svg{ width:20px; height:20px; color: var(--i2, var(--teal-deep)); }

/* ============================================================
   STATS
   ============================================================ */
/* flat stat row — ClickUp style: top rule, thin column dividers, no boxes */
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.stat{
  display:flex; flex-direction:column; min-height: 220px;
  padding: 32px clamp(20px,2.4vw,38px);
  border-left:1px solid var(--line);
}
.stat:first-child{ border-left:0; padding-left:0; }
.stat:last-child{ padding-right:0; }
.stat .lab{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:0.1em; text-transform:uppercase; color: var(--accent);
}
.stat .n{
  margin-top: 14px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(44px,4.6vw,60px); line-height:1; letter-spacing:-0.04em; color: var(--ink);
}
.stat .desc{ margin-top:auto; padding-top: 28px; font-size:14.5px; line-height:1.55; color: var(--ink-3); }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,24px); margin-top: clamp(40px,5vw,64px); }
.svc{
  position:relative; padding: 32px 30px 30px; border-radius: var(--r-md);
  background:#fff; border:1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  overflow:hidden;
}
.svc::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity .4s; pointer-events:none; }
.svc:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc:hover::after{ opacity:1; }
.svc .ic{
  width: 56px; height:56px; border-radius: 16px; display:grid; place-items:center; color:#fff;
}
.svc .ic svg{ width:27px; height:27px; }

/* ---------- icon system — unified to the brand blue (matches the logo) ----------
   Every tile is a sky-blue duotone with a matching soft glow. Kept as separate
   classes so per-card assignment still works; all stay inside the brand family. */
.i-blue  { --i1:#38BDF8; --i2:#0369A1; }
.i-teal  { --i1:#22C3E6; --i2:#075985; }
.i-green { --i1:#38BDF8; --i2:#0284C7; }
.i-gold  { --i1:#7DD3FC; --i2:#0369A1; }
.i-orange{ --i1:#38BDF8; --i2:#0284C7; }
.i-rose  { --i1:#56C5F5; --i2:#0369A1; }
.i-violet{ --i1:#4FB3EE; --i2:#075985; }
.i-indigo{ --i1:#38BDF8; --i2:#0C4A6E; }
.i-cyan  { --i1:#22C3E6; --i2:#0284C7; }
.i-pink  { --i1:#56C5F5; --i2:#0369A1; }
.i-slate { --i1:#7DD3FC; --i2:#0C4A6E; }
.svc .ic, .mod .ic{
  background: linear-gradient(140deg, var(--i1,#075985), var(--i2,#0369A1));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--i2,#075985) 32%, transparent);
}
.svc h3{ margin-top: 22px; color: var(--navy); }
.svc p{ margin-top: 12px; font-size: 15.5px; }
.svc .tags{ margin-top: 20px; display:flex; flex-wrap:wrap; gap:7px; }
.tag{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px; padding:5px 11px; border-radius:999px; background: var(--bg-soft); color: var(--navy); border:1px solid var(--line); }
.svc .num{ position:absolute; top:26px; right:28px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color: var(--ink-3); opacity:.5; letter-spacing:0.1em; }

/* ============================================================
   ERP showcase (dark)
   ============================================================ */
.dark{ background: var(--grad-dark); color:#fff; position:relative; overflow:hidden; }
.dark::before{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 80% 70% at 75% 20%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 75% 20%, #000, transparent 75%);
  pointer-events:none;
}
.dark h1,.dark h2,.dark h3,.dark h4{ color:#fff; }
.dark p{ color: rgba(255,255,255,0.74); }
.cta h1,.cta h2,.cta h3,.cta h4{ color: var(--navy); }
.cta-inner p{ color: var(--ink-2); }
.dark .wrap{ position:relative; z-index:1; }
.glow-orb{ position:absolute; border-radius:50%; filter: blur(70px); pointer-events:none; }
.glow-orb.g1{ width: 420px; height:420px; top:-120px; right:-80px; background: radial-gradient(circle,rgba(3,105,161,0.34),transparent 65%); }
.glow-orb.g2{ width: 380px; height:380px; bottom:-140px; left:-100px; background: radial-gradient(circle,rgba(14,165,233,0.24),transparent 65%); }

.erp-top{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(34px,5vw,72px); align-items:center; }
.erp-feat{ margin-top: 32px; display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.erp-feat .ef{ display:flex; gap:13px; align-items:flex-start; }
.erp-feat .ef .ck{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; background: var(--grad-tg); display:grid; place-items:center; margin-top:2px; }
.erp-feat .ef .ck svg{ width:13px; height:13px; color:#fff; }
.erp-feat .ef b{ color:#fff; font-weight:600; display:block; font-size:15.5px; }
.erp-feat .ef span.d{ font-size:13.5px; color: rgba(255,255,255,0.6); }

/* product window mock */
.win{
  border-radius: var(--r-md); overflow:hidden;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14);
  box-shadow: 0 40px 90px rgba(0,0,0,0.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.win-bar{ display:flex; align-items:center; gap:7px; padding: 13px 16px; border-bottom:1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
.win-bar .dot{ width:11px; height:11px; border-radius:50%; }
.win-bar .dot.r{ background:#FF6058; } .win-bar .dot.y{ background:#FFBE2F; } .win-bar .dot.g{ background:#2ACB42; }
.win-bar .t{ margin-left:10px; font-family:'Space Grotesk',sans-serif; font-size:12px; color: rgba(255,255,255,0.55); letter-spacing:0.04em; }
/* real product screenshot inside the window chrome */
.win-shot{ display:block; width:100%; height:auto; }

/* zatca strip */
.zatca-strip{
  margin-top: clamp(40px,5vw,68px);
  border-radius: var(--r-lg); overflow:hidden; position:relative;
  background: linear-gradient(135deg, rgba(8,47,73,0.6), rgba(7,89,133,0.45));
  border:1px solid rgba(255,255,255,0.14);
  padding: clamp(30px,4vw,52px);
}
.zatca-strip .ksa{ position:absolute; left:0; top:0; bottom:0; width:6px; background: linear-gradient(180deg,var(--green-deep),var(--green)); }
.zatca-strip .ar{ position:absolute; right: clamp(20px,4vw,60px); top:50%; transform:translateY(-50%); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: clamp(80px,12vw,180px); color: rgba(125,211,252,0.07); direction:rtl; line-height:1; pointer-events:none; }
.zatca-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; }
.zatca-pts{ margin-top: 36px; display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; position:relative; z-index:1; }
.zatca-pts .pt .k{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: clamp(26px,3vw,38px); line-height:1; background: var(--grad-mint); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.zatca-pts .pt .l{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:#fff; margin-top:9px; }
.zatca-pts .pt .d{ font-size:13px; color: rgba(255,255,255,0.6); margin-top:5px; line-height:1.45; }

/* ============================================================
   INDUSTRY MODULES
   ============================================================ */
.mod-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: clamp(40px,5vw,60px); }
.mod{
  padding: 24px 22px; border-radius: var(--r-md); background:#fff; border:1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  position:relative; overflow:hidden;
}
.mod::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad-brand); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); }
.mod:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-soft); }
.mod:hover::before{ transform: scaleX(1); }
.mod .ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff; }
.mod .ic svg{ width:23px; height:23px; }
.mod h3{ margin-top:18px; font-size:18px; color: var(--navy); }
.mod .sub{ margin-top:5px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--teal-deep); }
.mod ul{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.mod ul li{ position:relative; padding-left:16px; font-size:13.5px; color: var(--ink-2); line-height:1.4; }
.mod ul li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background: var(--teal); }
.mod.cta-mod{ background: var(--grad-dark); border:none; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.mod.cta-mod h3{ color:#fff; font-size:24px; }
.mod.cta-mod p{ color: rgba(255,255,255,0.72); margin-top:10px; font-size:14px; }
.mod.cta-mod .ek{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--mint); }

/* ============================================================
   AI section (dark)
   ============================================================ */
@keyframes ai-dot{
  0%, 100%{ transform: scale(1); opacity: .7; box-shadow: 0 0 0 0 rgba(125,211,252,.45); }
  50%{ transform: scale(1.35); opacity: 1; box-shadow: 0 0 0 4px rgba(125,211,252,0); }
}
@media (prefers-reduced-motion: reduce){ .ai-tags .t .d{ animation: none; } }

/* ============================================================
   404 PAGE
   ============================================================ */
.nf{ min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 40px var(--gut); position: relative; overflow: hidden; background: var(--grad-dark); color: #fff; }
.nf-inner{ position: relative; z-index: 1; max-width: 560px; }
.nf .brand{ justify-content: center; margin-bottom: 30px; }
.nf .brand img{ height: 42px; }
.nf .brand .word{ font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }
.nf .brand .word .biz{ color: #fff; }
.nf-code{ font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(96px, 19vw, 188px); line-height: .9; letter-spacing: -0.05em; background: var(--grad-mint); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nf h1{ color: #fff; margin-top: 6px; }
.nf .lead{ color: rgba(255,255,255,0.75); margin-top: 16px; margin-inline: auto; }
.nf-cta{ margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .nav, .scroll-progress, .to-top, .cursor-glow, .scroll-cue,
  #hero-canvas, .glow-orb, .aurora, .marquee, .footer-ticker, .lead-form,
  .hero-visual, .reveal-shine{ display: none !important; }
  .reveal, .hero-anim, .split .sw{ opacity: 1 !important; transform: none !important; }
  .section.dark, .section.cta, .footer, .hero{ background: #fff !important; color: #111 !important; }
  .section.dark::before, .section.dark::after, .section.cta::after{ display: none !important; }
  .dark h1, .dark h2, .dark h3, .dark h4, .dark p, .dark b, .dark span,
  .cta-inner *, .footer *, .contact .v, .contact .k{ color: #111 !important; -webkit-text-fill-color: #111 !important; }
  .grad-text{ -webkit-text-fill-color: #075985 !important; color: #075985 !important; }
  body{ font-size: 11pt; }
  .section{ padding: 20px 0 !important; }
  a{ color: #111 !important; text-decoration: none; }
}

/* reduced-motion completeness — guards for early animations that predated their checks */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none !important; }
  .hero-badge .dot{ animation: none !important; }
}

/* creative studio: preview zoom on hover */
.prev.video::after{ transition: transform .35s var(--ease); }
@media (prefers-reduced-motion: reduce){
}

/* stat icons */
.stat-ic{
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--i1,#075985), var(--i2,#0369A1));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--i2,#075985) 26%, transparent); margin-bottom: 16px;
}
.stat-ic svg{ width: 21px; height: 21px; }

/* ============================================================
   CREATIVE STUDIO
   ============================================================ */
.prev.avatar{ background: radial-gradient(ellipse at 70% 30%, rgba(125,211,252,0.4), transparent 50%), linear-gradient(135deg,#075985,var(--navy) 60%,var(--teal-deep)); }
.prev.avatar::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background: linear-gradient(180deg,#FFE4C7,#E6B789); box-shadow: 0 0 0 4px rgba(255,255,255,0.15); }
.prev.avatar::before{ content:""; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); width:72px; height:46px; border-radius:50% 50% 0 0; background: linear-gradient(180deg,var(--teal),var(--teal-deep)); }
.prev.video{ background: radial-gradient(ellipse at 35% 50%, rgba(3,105,161,0.55), transparent 55%), linear-gradient(135deg,var(--navy-deep),var(--navy) 50%,#082F49); }
.prev.video::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:0; height:0; border-left:24px solid #fff; border-top:15px solid transparent; border-bottom:15px solid transparent; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)); }
.prev.design{ background: linear-gradient(135deg,#EAF4FC,#CDE7F8 50%,#A9D6F2); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:7px; padding:11px; }
.prev.design .tl{ border-radius:8px; }
.prev.design .tl.a{ background: linear-gradient(135deg,var(--navy),var(--teal)); }
.prev.design .tl.b{ background: rgba(255,255,255,0.9); }
.prev.design .tl.c{ background: linear-gradient(135deg,#38BDF8,#0284C7); }
.prev.design .tl.d{ background: linear-gradient(135deg,var(--green),var(--teal)); }
.prev.ad{ background: linear-gradient(135deg,var(--navy-deep),var(--navy)); }
.prev.ad::before{ content:"AD"; position:absolute; left:14px; top:14px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.2em; color: var(--mint); padding:4px 9px; border:1px solid rgba(125,211,252,0.4); border-radius:6px; }
.prev.ad::after{ content:""; position:absolute; right:14px; bottom:14px; width:64px; height:16px; border-radius:5px; background: var(--grad-tg); }

/* ---- featured real client work (Ooredoo avatar ad) ---- */
.studio-feature{
  margin-bottom: clamp(28px,3.4vw,44px);
  display:grid; grid-template-columns: minmax(0,1.62fr) minmax(0,1fr);
  gap: clamp(18px,2.2vw,30px) clamp(20px,2.4vw,34px);
  align-items: start;
}
.sf-main{
  grid-column:1; grid-row:1;
  position:relative; margin:0; border-radius: var(--r-md); overflow:hidden;
  background:#082F49; border:1px solid var(--line);
  box-shadow: 0 30px 60px rgba(8,47,73,.18);
  aspect-ratio:16/9;
}
.sf-video{ display:block; width:100%; height:100%; object-fit:cover; background:#082F49; }
.sf-badge{
  position:absolute; left:14px; top:14px; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11.5px; letter-spacing:0.02em; color:#fff;
  background: rgba(8,47,73,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:6px 13px;
}
.sf-dot{ width:7px; height:7px; border-radius:50%; background: var(--green); box-shadow:0 0 0 0 rgba(14,165,233,.6); animation: live-pulse 1.8s ease-out infinite; }
.sf-sound{
  position:absolute; right:14px; bottom:14px; z-index:3;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  color:#082F49; background: rgba(255,255,255,0.92); border:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: transform .25s var(--ease), background .25s;
}
.sf-sound:hover{ transform: scale(1.08); }
.sf-sound .ic-on{ display:none; }
.sf-sound.on{ background: var(--teal); color:#fff; }
.sf-sound.on .ic-on{ display:block; }
.sf-sound.on .ic-off{ display:none; }
.sf-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:66px; height:66px; border-radius:50%; display:none; place-items:center; cursor:pointer;
  color:#082F49; background: rgba(255,255,255,0.94); border:none; padding-left:4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .25s var(--ease);
}
.sf-play:hover{ transform:translate(-50%,-50%) scale(1.08); }
.sf-main.is-paused .sf-play{ display:grid; }
.sf-main.is-paused::after{ content:""; position:absolute; inset:0; background:rgba(8,47,73,.28); z-index:1; }

.sf-phone{
  grid-column:2; grid-row:1; justify-self:center; align-self:start;
  position:relative; width:100%; max-width: 216px;
  background:#082F49; border-radius:24px; padding:8px;
  box-shadow: 0 18px 40px rgba(8,47,73,.32); border:1px solid rgba(255,255,255,.08);
}
.sf-notch{ position:absolute; top:15px; left:50%; transform:translateX(-50%); width:44px; height:5px; border-radius:3px; background: rgba(255,255,255,.22); z-index:2; }
.sf-vertical{ display:block; width:100%; height:auto; border-radius:17px; background:#082F49; }
@media (max-width: 760px){
  .studio-feature{ grid-template-columns: 1fr auto; }
  .sf-phone{ max-width: 150px; }
}
@media (max-width: 520px){
  .studio-feature{ grid-template-columns: 1fr; justify-items:center; }
  .sf-main{ width:100%; }
  .sf-phone{ grid-column:1; grid-row:2; max-width: 190px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce){ .sf-dot{ animation:none; } }

/* ============================================================
   WHY
   ============================================================ */
.why{ position:relative; padding: 30px 28px; border-radius: var(--r-md); background:#fff; border:1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.why:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.why .ic{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; }
.why .ic svg{ width:26px; height:26px; }
.why .num{ position:absolute; top:28px; right:28px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color: var(--ink-3); opacity:.45; letter-spacing:0.1em; }
.why h3{ margin-top:20px; font-size:19px; color: var(--navy); }
.why p{ margin-top:11px; font-size:14.5px; }

/* ============================================================
   CTA / FOOTER
   ============================================================ */
/* CTA — flat LIGHT design (no dark sweep / glows) */
.cta{ background: var(--bg-soft); color: var(--ink); position:relative; overflow:hidden; }
.cta .glow-orb, .cta .aurora{ display:none !important; }
.cta-inner{ text-align:center; max-width: 820px; margin-inline:auto; position:relative; z-index:1; }
.cta-inner .lead{ margin-top: 24px; }
.cta-inner .btns{ margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.contact-grid{ margin-top: clamp(46px,5vw,66px); display:grid; grid-template-columns: repeat(4,1fr); gap:16px; position:relative; z-index:1; }
.contact{ padding: 26px 22px; border-radius: var(--r-md); background:#fff; border:1px solid var(--line); text-align:left; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.contact:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contact .ic{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; }
.contact .ic svg{ width:22px; height:22px; }
.contact .k{ margin-top:18px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color: var(--ink-3); }
.contact .v{ margin-top:7px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; color: var(--navy); }

.footer{ background: var(--navy-ink); color: rgba(255,255,255,0.7); padding: 56px 0 40px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; }
.footer .plaque{ display:inline-flex; align-items:center; gap:13px; padding: 14px 20px 14px 16px; background:#fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(125,211,252,0.16); }
.footer .plaque img{ height: 44px; width: auto; }
.footer .plaque .word{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; letter-spacing:-0.03em; }
.footer .plaque .word .biz{ color: var(--navy); }
.footer .plaque .word .arch{ background:var(--grad-tg); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.footer .plaque .tag{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:9.5px; letter-spacing:0.2em; text-transform:uppercase; color: var(--ink-3); margin-top:3px; }
.footer-nav{ display:flex; gap: 44px; flex-wrap:wrap; }
.footer-nav .col h5{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color: rgba(255,255,255,0.5); margin:0 0 14px; }
.footer-nav .col a{ display:block; font-size:14.5px; color: rgba(255,255,255,0.75); padding:5px 0; transition: color .25s; }
.footer-nav .col a:hover{ color: var(--mint); }
.footer-bottom{ margin-top: 44px; padding-top: 24px; border-top:1px solid rgba(255,255,255,0.1); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; }
.footer-bottom .tagline{ display:flex; align-items:center; gap:12px; font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; font-size:12px; color: rgba(255,255,255,0.7); }
.footer-bottom .tagline .d{ width:6px; height:6px; border-radius:50%; background: var(--mint); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.js .reveal{ opacity:0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* hero load anim */
.js .hero-anim{ opacity:0; transform: translateY(26px); }
.loaded .hero-anim{ opacity:1; transform:none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.loaded .hero-anim[data-d="1"]{ transition-delay:.15s; }
.loaded .hero-anim[data-d="2"]{ transition-delay:.28s; }
.loaded .hero-anim[data-d="3"]{ transition-delay:.41s; }
.loaded .hero-anim[data-d="4"]{ transition-delay:.54s; }
.js .hero-visual.hero-anim{ transform: scale(.94); }
.loaded .hero-visual.hero-anim{ transform: scale(1); }
@media (prefers-reduced-motion: reduce){ .hero-anim{ opacity:1!important; transform:none!important; } }

/* ============================================================
   INTERACTIVE — spotlight, tilt, magnetic
   ============================================================ */
/* cursor-follow spotlight injected into cards */
.card-spot{
  position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0; z-index:0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(200px circle at var(--mx,50%) var(--my,50%),
              rgba(3,105,161,0.12), rgba(14,165,233,0.06) 38%, transparent 62%);
}
.svc:hover .card-spot, .mod:hover .card-spot,
/* keep real content above the tint */
.svc > *:not(.card-spot), .mod > *:not(.card-spot),

/* 3D tilt */
.tilt-wrap{ perspective: 900px; }
.tilt{
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .18s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt.is-active{ transition: transform .05s linear; }

/* magnetic buttons */
.magnetic{ will-change: transform; }

@media (prefers-reduced-motion: reduce){
  .card-spot{ display:none; }
  .tilt{ transform:none !important; }
  .magnetic{ transform:none !important; }
}

/* ============================================================
   IMPROV — rotator, aurora, back-to-top
   ============================================================ */
/* rotating headline word */
.rotator{
  display:inline-flex; position:relative;
  vertical-align:bottom; overflow:hidden;
  transition: width .55s var(--ease);
  white-space:nowrap;
}
.rotator .rot-word{
  display:inline-block;
  /* The gradient + text-clip must live on the element that actually holds the
     glyphs. Without this the word inherits the parent's transparent fill with
     no gradient of its own to clip, and renders invisible. */
  background: var(--grad-tg);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: grad-flow 7s ease-in-out infinite;
  transition: transform .5s var(--ease), opacity .5s var(--ease), filter .5s var(--ease);
}
.rotator.swap-out .rot-word{ transform: translateY(-0.92em); opacity:0; filter: blur(6px); }
.rotator.swap-in .rot-word{ transform: translateY(0.92em); opacity:0; filter: blur(6px); transition:none; }
@media (prefers-reduced-motion: reduce){
  .rotator{ transition:none; }
  .rotator .rot-word{ transition:none; }
}

/* drifting aurora inside dark sections */
.aurora{
  position:absolute; inset:-10% -5%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(3,105,161,0.30), transparent 60%),
    radial-gradient(38% 48% at 80% 25%, rgba(14,165,233,0.24), transparent 60%),
    radial-gradient(45% 55% at 60% 80%, rgba(7,89,133,0.40), transparent 62%);
  filter: blur(26px);
  opacity:.85;
  animation: aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift{
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.12); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.06); }
}
.section.dark .wrap, .section.cta .wrap{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .aurora{ animation:none; } }
/* mobile: the -10%/-5% inset + scale(1.12) drift bleeds past the viewport and
   makes the whole document scroll sideways. Clip it and drop the animated
   26px blur, which is costly on phones. Desktop keeps the drift. */
/* ---------- #ai-vision on phones/tablets: composed, not scroll-jacked ----------
   isStatic() (<760px) already skips the scroll story; these rules make the
   resulting still scene read like a normal hero: headline, stacked CTAs,
   figure, then the four claims as a readable row instead of labels dropped
   on top of the man. Desktop keeps the full sticky visor flight. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  /* full bleed: the clip-path insets both sides and rounds the bottom corners,
     which reads as a floating card on a phone */
  #ai-vision.aihero{ clip-path:none; }
  #ai-vision .aih-stage{ height:auto; }
  #ai-vision .aih-sticky{
    height:auto; min-height:0; overflow:visible; text-align:center;
    padding:0 0 34px;
  }
  #ai-vision .aih-copy{ padding-top:52px; }
  #ai-vision .aih-h{ font-size:38px; line-height:1.06; }

  /* stacked, equal-width CTAs */
  #ai-vision .aih-ctas{ flex-direction:column; align-items:center; gap:10px; margin-top:22px; }
  #ai-vision .aih-ctas .btn{ width:min(100%, 290px); justify-content:center; }

  /* figure sits under the copy rather than pinned to the stage floor */
  #ai-vision .aih-face{ margin:28px auto 0; width:min(74%, 280px); }

  /* the four claims were absolutely placed for the tall stage; in the static
     scene they landed across the figure. Re-flow them into a centred row. */
  #ai-vision .aih-tag{
    position:static; display:inline-block; opacity:1;
    margin:14px 9px 0; font-size:12px; letter-spacing:0.1em; color:#3A4A66;
    transform:none;
  }
  #ai-vision .aih-tag::after{ display:none; }

  /* watermark is sized for a 100vh stage — it crowds the figure at this scale */
  #ai-vision .aih-ghost{ display:none; }
}

/* ---------- #ai on phones: 3,866px of stacked cards ---------- */
/* ---------- #process on phones ----------
   Hidden entirely. On desktop this is a horizontal 5-across timeline and
   #engage is a wide three-column ledger, so the pair reads as two different
   things. On mobile both collapse to "numeral left, copy right, stacked" —
   the visitor gets the same numbered-method device twice in 2,279px. #engage
   is the one that survives: it carries the distinctive positioning, the
   ownership line and the CTA, where Discover/Design/Build/Launch/Support is
   what every vendor publishes. The lone link to this lives in the footer.
   The layout rules below still apply at 641-980px, where it is not hidden. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #process{ display:none; }
  a[href="#process"]{ display:none; }
}
/* Tablet only (641-980px) — below 641 the section is hidden, above 980 the
   horizontal spine returns. Here .tl-line is display:none and the steps are
   rows, so without this the roadmap is five unconnected circles. Node is 59px
   at this range, so the spine centres at 27px rather than the 21px a 44px
   node would need. */
@media (min-width: 641px) and (max-width: 980px) and (orientation: landscape),
       (min-width: 1025px) and (max-width: 980px){
  #process .tl-step:not(:last-child)::after{
    content:""; position:absolute; left:27px; top:64px; bottom:-18px;
    width:2px; background:var(--line); border-radius:2px;
  }
  /* the base 24ch cap is sized for a 5-across desktop column and is far too
     tight in a full-width row — but removing it entirely gave 103 characters
     per line at 820px. Cap at a readable measure instead. */
  #process .tl-card p{ max-width:62ch; }
}

/* ---------- #services flow illustration on phones ----------
   The two outcome bubbles are hidden here, so the right ~40% of the strip is
   empty while the five tool chips and the BizArch mark are squeezed into the
   left 197px — the AI Services chip ended 9px from the mark. Positions are
   inline styles (percentage centres), so overriding them needs !important.
   Chips spread a little wider, and the mark moves into the vacated space so
   the "scattered tools -> one system" read still works. Desktop keeps its
   original spacing because the bubbles are there to balance it. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #services .flow-illus .fchip:nth-of-type(1){ left:8%  !important; }
  #services .flow-illus .fchip:nth-of-type(2){ left:21% !important; }
  #services .flow-illus .fchip:nth-of-type(3){ left:6%  !important; }
  #services .flow-illus .fchip:nth-of-type(4){ left:24% !important; }
  #services .flow-illus .fchip:nth-of-type(5){ left:38% !important; }
  #services .flow-illus .fchip.fmark{ left:70% !important; }
}

/* ---------- hero CTA on phones ----------
   Button and its supporting line sit side by side rather than stacked: 90px
   instead of 115px, and the microcopy earns its place next to the action.
   The button keeps a min-width so it stays the dominant element — at its
   natural 158px it stopped reading as the primary CTA.
   The sentence spans go block here so the column breaks cleanly instead of
   wrapping mid-phrase ("Free consultation. No / commitment."). On desktop the
   spans stay inline and the <br> does the break, so nothing changes there. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  /* flex-wrap stays on: below ~344px the column cannot hold the longest line,
     and dropping the text under the button beats cramming it to four lines. */
  .hero-cu .cu-cta{ align-items:center; gap:14px; }
  .hero-cu .cu-btn{
    width:auto; min-width:190px; flex:0 0 auto;
    padding:18px 26px; justify-content:center;
  }
  /* basis 112px = the longest line at 13.5px, so the row breaks rather than
     the text shredding when the viewport is too narrow to hold both */
  .hero-cu .cu-sub{ flex:1 1 112px; min-width:0; font-size:13.5px; line-height:1.42; }
  .hero-cu .cu-sub > span{ display:block; }
  .hero-cu .cu-sub br{ display:none; }

}

/* ============================================================
   TABLET TIER — 641px to 1024px
   Portrait iPads land here (mini 744, iPad 820, Pro 12.9 1024); landscape
   iPads are 1180/1366 and stay on the desktop layout untouched.
   Nothing here is stretched-mobile or squeezed-desktop: the phone rules stop
   at 640 and are not reused, because a 375px design at 820px gives ~110
   characters per line. This tier exists mainly because one blanket
   `max-width:900px` rule drops three 3-column grids straight to a single
   column, stretching body copy to 100 characters. Two columns fixes it.
   ============================================================ */
@media (min-width: 641px) and (max-width: 900px) and (orientation: landscape){
  /* ID-scoped: the blanket max-width:900px rule these override sits ~2400
     lines further down, so equal specificity would lose on source order. */
  #ai .avx-3, #ai .avx-6{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  #invest .inv-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Measure and touch targets run to 1024, not 900: iPad Pro 12.9 portrait is
   1024 wide and already carries desktop grid counts (3/2/3/4/5/5, which are
   fine at that width) — but it still had 12 over-long paragraphs (worst 138
   characters) and 48 sub-44px controls, because it is a touch device running
   desktop components. Grids stay capped at 900; everything else extends. */
/* Ceiling is 1200, not 1024: at 1025 the desktop layout kicks in but this
   site's desktop design does not become comfortable until ~1200, so 1025-1180
   still had 12 paragraphs over 85 characters. It is also the landscape-iPad
   band (1180 / 1366), which is touch — so the targets are wanted there too.
   The hero block below stays capped at 1024 so landscape iPads keep the
   desktop two-column hero. */
@media (min-width: 641px) and (max-width: 1200px) and (orientation: landscape),
       (min-width: 1025px) and (max-width: 1200px){
  /* Measure. These are intro / support paragraphs that sit inside constrained
     columns on desktop, so they carry max-width:none — at 820px the container
     becomes the full wrap and they run 86-122 characters. Cap the measure and
     keep the centred ones centred. Body copy inside cards is already fine. */
  .lead, .agx-lead, .agx-sub, .avx-sub2, .avx-cr-p, .avx-note,
  .inv-note, .webx-note, .cux-note, .cux-bridge p,
  .faq-a p, .zf-block p, .cu-points li{
    max-width: 68ch;
  }
  .sec-head.center .lead, .modx-head .lead, .avx-mid .avx-sub2, .avx-cta .avx-note{
    margin-inline: auto;
  }
  /* These two are explicitly reset to max-width:none by later media queries
     (line ~3312 and ~2161), so an equal-specificity rule here loses on source
     order. Scope by section id to win regardless of position. */
  #agents .agx-sub{ max-width: 68ch; }
  #erp .zf-block p{ max-width: 68ch; }
  /* 620px at 15px still measures 86 characters */
  #reports .rpx-sub{ max-width: 66ch; }

  /* ---- touch targets ----
     Tablets are touch devices running the desktop component sizes, so 48
     controls sat under the 44px minimum. Where the control's visual size is
     part of the design (inline links, small toggles) the hit area is grown
     with a pseudo-element so nothing shifts; elsewhere the box itself grows. */
  .footer .ftr-nav .col a{ padding:12px 0; }   /* 11px landed at 43 */
  .nav .brand{ min-height:44px; }
  .hero-cu .cu-pill{ min-height:44px; }
  /* swatches are 24px with a 9px gap = 33px apart, so a 44px hit area would
     overlap its neighbour and steal taps. Widen the gap to 44px spacing first,
     then the target can grow safely. */
  #custom .cux-swatches{ gap:20px; }
  #custom .cux-sw{ position:relative; }
  #custom .cux-sw::after{
    content:""; position:absolute; left:50%; top:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
  .nav .lang-switch, .nav .nav-toggle{ min-width:44px; min-height:44px; }
  .nav .nav-links a{ min-height:44px; display:inline-flex; align-items:center; }

}

/* ---- hero shot: crop, do not shrink ----
   Scoped to <=960 because that is where the hero stacks. From 961-1024 the
   hero is still the desktop two-column layout and already crops correctly via
   its own bleed rules — forcing width:168% into that 311px column made the
   image SMALLER (0.24 scale) and pushed 9px of overflow. */
/* The hero stack/crop tier that lived here is gone: portrait tablets now take
   the full mobile treatment, which hides .hero-cu .hero-visual outright, so
   there is no stacked hero left to crop. Landscape tablets get the desktop
   hero unchanged. */

/* remaining touch targets — same 1200 ceiling as the rest of the touch pass;
   these were stranded in the hero block when it was capped back to 1024 */
@media (min-width: 641px) and (max-width: 1200px) and (orientation: landscape),
       (min-width: 1025px) and (max-width: 1200px){
  #ai .sf-sound{ width:44px; height:44px; }
  html .to-top{ width:44px; height:44px; }   /* base rule is later in the file */
  #tour .tf-zoom, #custom .cux-seg button, #custom .cux-docsel button,
  #custom .cux-toggle .on, #custom .cux-toggle button{ min-height:44px; }

  /* inline links: expand the tap area without moving the line box */
  #faq .faq-link, #web .work-link, #web .webx-note a,
  #modules .modx-cta a, #custom .cux-cta{ position:relative; }
  #faq .faq-link::after, #web .work-link::after, #web .webx-note a::after,
  #modules .modx-cta a::after, #custom .cux-cta::after{
    content:""; position:absolute; left:-8px; right:-8px;
    top:50%; height:44px; transform:translateY(-50%);
  }
}

/* Nav chrome and the #web panel were never covered by the earlier per-section
   mobile audits — #web is collapsed by default so its contents were never
   swept, and the nav was never checked at all. The hamburger at 40x34 is the
   primary navigation control on a phone. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .nav .brand{ min-height:44px; }
  .nav .lang-switch, .nav .nav-toggle{ min-width:44px; min-height:44px; }
  .hero-cu .cu-pill{ min-height:44px; }

  #web .webx-svc-lab, #web .work-badge, #web .webx-chips .soon span{ font-size:12px; }
  #web .work-link, #web .webx-note a{ position:relative; }
  #web .work-link::after, #web .webx-note a::after{
    content:""; position:absolute; left:-8px; right:-8px;
    top:50%; height:44px; transform:translateY(-50%);
  }
}

/* Back-to-top retired on phones — the always-visible nav logo already does it.
   Hidden in CSS as well as JS so it cannot flash in before the first scroll. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .to-top{ display:none !important; }
}

/* ---------- footer on phones ----------
   All 19 links were 35px targets and the block ran 1,009px. Raising every link
   to 44px alone would have pushed it past 1,180. Collapse the five groups into
   tappable headers instead: compact by default, and the links get a genuine
   44px target once a group is open. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .footer .ftr-nav{
    grid-template-columns:1fr; gap:0; margin-top:32px;
    border-top:1px solid var(--line);
  }
  .footer .ftr-nav .col{ border-bottom:1px solid var(--line); }
  .footer .ftr-nav h5{
    margin:0; padding:16px 2px; min-height:52px; box-sizing:border-box;
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; font-size:15px;
  }
  .footer .ftr-nav h5::after{
    content:""; width:9px; height:9px; margin-right:5px; flex:0 0 auto;
    border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
    transform:rotate(45deg) translateY(-2px);
    transition: transform .25s var(--ease);
  }
  .footer .ftr-nav .col.open h5::after{ transform:rotate(-135deg) translateY(2px); }
  .footer .ftr-nav .col a{
    max-height:0; opacity:0; visibility:hidden; overflow:hidden; padding:0 2px;
    transition: max-height .28s var(--ease), opacity .2s var(--ease), padding .28s var(--ease);
  }
  .footer .ftr-nav .col.open a{
    max-height:80px; opacity:1; visibility:visible;
    padding:13px 2px; min-height:46px; box-sizing:border-box;
    font-size:15.5px; color: var(--ink-2);
  }
  /* padding-top:4px on the first row made its box shorter than min-height, so
     min-height padded the slack underneath and that row read 13px looser than
     the rest. Keep every row identical; the header's own padding is the gap. */
  .footer .ftr-nav .col.open a:last-of-type{ padding-bottom:18px; }
  /* the last column's rule and .ftr-bottom's own border stacked into two
     hairlines 30px apart — drop one and let the bottom bar sit against it */
  .footer .ftr-nav .col:last-child{ border-bottom:0; }
  .footer .ftr-bottom{ margin-top:0; padding-top:18px; }

  /* tagline was 11px */
  .footer .ftr-tag{ font-size:12px; letter-spacing:0.1em; }
}

/* ---------- #web on phones ----------
   Eyebrow-to-headline was 14px here against 18px in #invest and #contact, and
   this headline has the tightest leading on the page (21.84px on 21px), so it
   read as hugging the kicker. 20px settles it against that tighter block. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #web .webx-h{ margin-top:20px; line-height:1.14; }
  #web .webx-p{ margin-top:12px; }
}

/* ---------- #contact on phones ----------
   Full bleed: the panel floats inside a margin with clamped corner radius,
   which reads as a card on a phone. Meet all four edges squarely. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #contact.cta{ margin:0; border-radius:0; }

  /* iOS Safari zooms the page in whenever a focused field is under 16px, and
     the viewport meta (correctly) allows zoom — so every field in this form
     was yanking the layout on tap. 16px is the threshold, not a preference. */
  #contact .lf-field input,
  #contact .lf-field select,
  #contact .lf-field textarea{ font-size:16px; }

  /* 11.5px field labels and 11px contact-card labels, both under the floor */
  #contact .lf-field label{ font-size:12px; letter-spacing:0.08em; }
  /* submit was 196px against 289px fields — odd one out, and a smaller target */
  #contact .lead-form button[type=submit]{ width:100%; justify-content:center; }
  #contact .contact .k{ font-size:12px; letter-spacing:0.12em; }

  /* Contrast. The panel is a 120deg gradient; on a tall narrow phone its light
     sky-blue end (#38BDF8) lands exactly under the four contact cards, so the
     white text there measured 1.49-3.25:1 against the actual pixels beneath.
     A navy scrim at 0.68 puts the worst card (Web, on rgb(30,174,239)) above
     4.5:1 regardless of where the gradient falls. Desktop is wide and short,
     so the light end lands elsewhere and the cards are fine as they are. */
  #contact .contact{ background: rgba(8,30,55,0.68); border-color: rgba(255,255,255,0.16); }

  /* both were marginal against the darker top of the gradient */
  #contact .cta-inner .lead{ color: rgba(228,240,252,0.90); }
  #contact .eyebrow{ color: rgb(163,228,253); }

  /* The 2-up grid blew out: 1fr cannot shrink below min-content, and
     "+966 535 287 781" forces a 195px column, so the pair measured 393px in a
     335px box. .cta has overflow:hidden, so the right column was not scrolled
     off — it was cut off, losing the office address and web address entirely.
     One column, icon beside the text: correct, and shorter than the break. */
  #contact .contact-grid{ grid-template-columns: minmax(0,1fr); gap:10px; }
  #contact .contact{
    display:grid; grid-template-columns:44px minmax(0,1fr);
    grid-template-areas:"ic k" "ic v";
    align-items:center; column-gap:14px; row-gap:1px;
    padding:14px 16px;
  }
  #contact .contact .ic{ grid-area:ic; width:44px; height:44px; align-self:center; }
  #contact .contact .k{ grid-area:k; margin-top:0; align-self:end; }
  #contact .contact .v{ grid-area:v; margin-top:0; align-self:start; overflow-wrap:anywhere; }

  /* Phone repeats the working tel: CTA sitting 200px above it, and Web is
     self-referential — the visitor is already on bizarch.net. Both go. */
  #contact .contact-grid > .contact:nth-child(1),
  #contact .contact-grid > .contact:nth-child(4){ display:none; }

  /* What is left is reference information, not an action. Four filled
     button-shaped boxes made the three real CTAs above compete with details
     that mostly did nothing when tapped. Hairline rows instead. */
  #contact .contact-grid{
    gap:0; margin-top:30px; border-top:1px solid rgba(255,255,255,0.18);
  }
  #contact .contact{
    background:transparent; border:0; border-radius:0;
    border-bottom:1px solid rgba(255,255,255,0.18);
    padding:15px 2px;
  }
  #contact .contact .ic{ background:rgba(255,255,255,0.14); }

  /* The brand gradient is built for a wide, short desktop panel. On a tall
     phone its light sky-blue end (#38BDF8) dominates the lower half, which is
     exactly where the contact rows sit — white text measured 1.86-3.36:1 there
     once the filled cards were removed, and the text is already pure white so
     it cannot be lightened. Ramp a scrim over the bottom instead: solved
     numerically, 0.74 at the foot clears 4.5:1 for every element below 55%. */
  #contact.cta::before{
    content:""; position:absolute; left:0; right:0; bottom:0; height:45%;
    background: linear-gradient(180deg, rgba(4,20,40,0) 0%, rgba(4,20,40,0.74) 100%);
    pointer-events:none; z-index:0;
  }
}

/* ---------- #faq on phones ----------
   "Just ask" is an inline link 21px tall — under even the 24px WCAG minimum.
   Expand the touch target with a pseudo-element rather than padding, so the
   paragraph's line box does not shift. Only non-interactive copy sits above
   and below it, so the overlap steals nothing. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #faq .faq-link{ position:relative; }
  #faq .faq-link::after{
    content:""; position:absolute; left:-8px; right:-8px;
    top:50%; height:44px; transform:translateY(-50%);
  }
}

/* ---------- #invest on phones ----------
   The cards read well stacked, so nothing is collapsed or hidden — pricing is
   high-intent and detail belongs on screen. Fixes the seven sub-12px labels
   and reclaims the chrome around each block. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  /* 10.5px tier label, 11px flag, 11px "WHAT CHANGES" — all under the floor.
     Tracking is eased so the wider type does not re-wrap. */
  #invest .inv-step{ font-size:12px; letter-spacing:0.1em; }
  #invest .inv-flag{ font-size:12px; letter-spacing:0.02em; padding:5px 11px; }
  #invest .inv-diff b{ font-size:12px; letter-spacing:0.09em; }

  /* spacing: ~45px of chrome wrapped a single price line */
  #invest .inv-card{ padding:18px; }
  #invest .inv-fig{ margin-top:13px; padding:12px 0; }
  #invest .inv-inherit{ margin-top:13px; }
  #invest .inv-x{ margin-top:10px; gap:8px; margin-bottom:14px; }
  #invest .inv-diff{ padding-top:13px; }

  /* the two-price tiers wrap inconsistently: "one-time implementation" fits
     beside its figure, "per year — platform & support retainer" does not, so
     one label sat inline and the other dropped to its own line. Stack both. */
  #invest .inv-fig2 .fr{ flex-direction:column; align-items:flex-start; gap:2px; }
  #invest .inv-fig2 .fr span{ line-height:1.4; }
}

/* ---------- #engage on phones ---------- */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  /* the four tags were 11px, under the legibility floor */
  #engage .stx-tag{ font-size:12px; }
  /* 52px of a 335px row went to the numeral; 42 gives the copy the difference */
  #engage .stx-item{ grid-template-columns: 42px minmax(0,1fr); }
  #engage .stx-body p{ max-width:none; }
  /* the hero accent bar sits at left:0, the same column the numeral starts in,
     so they collide. Move it into the gutter — numerals stay aligned. */
  #engage .stx-hero::after{ left:-10px; }
}

/* ---------- #why on phones ----------
   The ruled table goes to one rule per row. At 2-up each column is only 168px,
   which turns every sentence into a 4-5 line ribbon; full width costs no extra
   height because the copy stops wrapping so hard. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #why .wux-cols{ grid-template-columns:1fr; row-gap:0; margin-top:32px; }
  #why .wc,
  #why .wc:nth-child(even){ padding:20px 0; }
  #why .wc::before,
  #why .wc:nth-child(even)::before{ left:0; }
  /* label was 11.5px, under the legibility floor */
  #why .wc .k{ font-size:12px; letter-spacing:0.14em; }
  #why .wc b{ margin-top:9px; font-size:21px; }
  #why .wc p{ margin-top:8px; max-width:none; font-size:14px; }

  #why .wux-sub{ margin-top:16px; }
  #why .wux-band{ margin-top:44px; padding-top:32px; }
  #why .wux-chips{ gap:9px; }
}

/* BizArch Agents: hidden entirely on phones. The lone link to it lives in the
   footer, so that goes too — otherwise it jumps to a display:none target. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #agents{ display:none; }
  a[href="#agents"]{ display:none; }
}

@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  /* full bleed top and bottom: --te drives the clip-path (0 = inset panel with
     rounded corners, 1 = edge to edge). It is hardcoded 0, so the panel floats
     inside gutters — on a phone it should meet both edges squarely. */
  #ai.section.dark.avx{ --te: 1 !important; }

  /* Card visuals stay (ClickUp keeps one on every card) — the problem was never
     that they existed, it was that their type is 10-11.5px, sized for a 3-up
     desktop grid. Re-scale everything inside them past the 12px floor. */
  #ai .avx-grid article{ min-height:0; padding:24px 18px 26px; }
  #ai .avx-grid p{ max-width:none; }
  #ai .avx-mock{ padding-top:22px; }
  #ai .avx-feed .fr,
  #ai .avx-models .mr,
  #ai .avx-kv div,
  #ai .avx-spark .sp-label,
  #ai .avx-steps div{ font-size:12.5px; }
  #ai .avx-flow span,
  #ai .avx-doc .dchips span,
  #ai .avx-steps b{ font-size:12px; }
  #ai .avx-chat .cb{ font-size:13px; }
  #ai .avx-feed .fr{ padding:9px 12px; }
  #ai .avx-kv .k{ min-width:92px; }
  /* "Works with" was inline with the items, so the row wrapped into three
     ragged lines. Put the label on its own centred line, items beneath. */
  #ai .avx-strip{ gap:9px 14px; letter-spacing:0.08em; }
  /* contrast on #04070E: these are all small text below the 4.5:1 floor.
     "Works with" #55647C = 3.36, the model-router arrows #475569 = 2.66,
     the 01/02 step numerals #55647C = 3.36. */
  #ai .avx-strip-label{ color:#8A99AE; }
  #ai .avx-models .arr{ color:#8A99AE; }
  #ai .avx-flow i{ color:#8A99AE; }
  #ai .avx-steps b{ color:#8A99AE; }
  #ai .avx-strip-label{ flex:0 0 100%; text-align:center; }
  /* .sf-phone replays the same Ooredoo ad vertically cropped: 324px and a
     second video download for no information the main frame doesn't carry */
  #ai .sf-phone{ display:none; }
  /* still: no scroll-in fade, no pulsing live dot */
  #ai .reveal{ opacity:1; transform:none; transition:none; }
  #ai .sf-dot{ animation:none; }
  /* 11.5px is below the 12px floor once these wrap to two rows */
  #ai .avx-cr-chips span{ font-size:12.5px; }
  /* mute toggle was a 40x40 tap target */
  #ai .sf-sound{ width:44px; height:44px; }
}

@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .aurora{ inset:0; animation:none; }
  /* the hover-highlight bleeds -24px each side, but the mobile .wrap gutter is
     only 20px — that 4px was making the whole document scroll sideways */
  .stx-list .stx-item::before{ left:-20px; right:-20px; }
  /* absolute + rotated, so its box is 66px wide vs 58px declared; -18px clears
     the desktop gutter but not the 20px mobile one */
  .zpipe .zpf-seal{ right:-6px; }
  /* -21px bleed vs the 20px mobile gutter — the last source of sideways scroll */
  #erp .erp-orbit::before{ left:-20px; right:-20px; }
}

/* back-to-top */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:#fff; border:1px solid var(--line);
  color:var(--navy); box-shadow: var(--shadow-md);
  opacity:0; transform: translateY(16px) scale(.9); pointer-events:none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .25s var(--ease);
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ box-shadow: var(--shadow-glow); }
.to-top .arr{ width:19px; height:19px; position:relative; z-index:2; transition: transform .25s var(--ease); }
.to-top:hover .arr{ transform: translateY(-2px); }
.to-top .ring{ position:absolute; inset:0; width:100%; height:100%; transform: rotate(-90deg); }
.to-top .ring circle{ fill:none; stroke-width:2.5; }
.to-top .ring .track{ stroke: var(--line); }
.to-top .ring .prog{
  stroke: var(--teal); stroke-linecap:round;
  stroke-dasharray: 125.6; stroke-dashoffset: 125.6;
  transition: stroke-dashoffset .1s linear;
}

.scroll-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1000;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span{
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(3,105,161,0.55);
  will-change: transform;
}

/* parallax layers — JS sets --py; reduced-motion users keep 0 */
[data-parallax]{ will-change: transform; }
@media (prefers-reduced-motion: reduce){
  [data-parallax]{ transform: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .stats{ grid-template-columns: repeat(2,1fr); }
  .mod-grid{ grid-template-columns: repeat(3,1fr); }
  .contact-grid{ grid-template-columns: repeat(2,1fr); }
  .zatca-pts{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ max-width: 420px; margin: 10px auto 0; }
  .erp-top{ grid-template-columns: 1fr; }
  .erp-feat{ grid-template-columns: 1fr 1fr; }
  .float-chip.fc1{ left: 2%; } .float-chip.fc2{ right: 2%; } .float-chip.fc3{ left: 0; }
}
@media (max-width: 620px){
  body{ font-size: 16px; }
  .zatca-pts{ grid-template-columns: 1fr 1fr; }
  .erp-feat{ grid-template-columns: 1fr; }
  .hero-trust .sep:nth-of-type(2){ display:none; }
  .footer-top{ flex-direction: column; }
}
@media (max-width: 520px){
  /* tighter hero rhythm on phones */
  .hero{ padding-top: calc(var(--nav-h) + 40px); }
  .hero-cta{ gap:10px; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  /* trust row: 3-up grid, no dividers, no awkward wrap */
  .hero-trust{ gap:18px 26px; }
  .hero-trust .sep{ display:none; }
  .hero-trust .ht .n{ font-size:23px; }
  /* CTA buttons full-width for easy tapping */
  .cta-inner .btns .btn, .erp-copy .btn{ width:100%; justify-content:center; }
  /* keep the back-to-top clear of thumbs */
  .to-top{ right:16px; bottom:16px; }
}

/* animated hamburger → X */
.nav-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   BRAND INTRO — page-load curtain reveal
   ============================================================ */


/* white brand card */
@keyframes intro-card-in{
  0%{ opacity: 0; transform: translateY(14px) scale(.96); }
  35%{ opacity: 1; }
  100%{ opacity: 1; transform: none; }
}

@keyframes intro-logo{ to{ opacity: 1; transform: none; filter: blur(0); } }
@keyframes intro-sweep{ from{ left: -70%; } to{ left: 130%; } }


/* ============================================================
   PROCESS TIMELINE — "How we work"
   ============================================================ */
.timeline{ position: relative; margin-top: clamp(64px,7.5vw,104px);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.8vw, 24px); }
/* let the roadmap breathe before the next section arrives */
#process{ padding-bottom: clamp(84px, 10vw, 150px); }
.tl-line{
  position: absolute; top: 27px; height: 2px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.tl-fill{
  position: absolute; inset: 0; border-radius: 2px;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 14px rgba(3,105,161,0.55);
  transition: transform .12s linear;
}
.tl-step{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.tl-node{
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--line);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--ink-3); letter-spacing: -0.02em;
  transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), color .3s var(--ease);
}
.tl-node.on{
  background: var(--grad-tg); border-color: transparent; color: #fff;
  transform: scale(1.06); box-shadow: var(--shadow-glow);
}
/* boxless steps — node, title, one line */
.tl-card{
  margin-top: 20px; flex: 1; width: 100%; text-align: center;
  transition: transform .4s var(--ease);
}
.tl-step:hover .tl-card{ transform: translateY(-3px); }
.tl-step:hover .tl-card h3{ color: var(--brand); }
.tl-card h3{ font-family:'Space Grotesk',sans-serif; font-size: 17px; color: var(--navy);
  letter-spacing: -0.01em; transition: color .25s var(--ease); }
.tl-card p{ margin: 9px auto 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); max-width: 24ch; }
@media (max-width: 980px){
  .timeline{ grid-template-columns: 1fr; gap: 18px; }
  .tl-line{ display: none; }
  .tl-step{ flex-direction: row; align-items: flex-start; gap: 16px; }
  .tl-card{ margin-top: 6px; text-align: left; }
  .tl-card p{ margin-left: 0; }
}
@media (max-width: 520px){
  .tl-step{ grid-template-columns: 44px 1fr; gap: 15px; }
  .tl-node{ width: 44px; height: 44px; font-size: 13px; }
  .tl-line{ left: 21px; }
  .tl-card{ padding: 18px 18px; }
}

/* ============================================================
   CURSOR GLOW — soft trailing light (pointer-fine only)
   ============================================================ */
.cursor-glow{
  position: fixed; top: 0; left: 0; z-index: 1500;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(3,105,161,0.45), rgba(14,165,233,0.16) 45%, transparent 70%);
  transition: opacity .35s var(--ease), width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease), background .28s;
  will-change: transform;
}
.cursor-glow.show{ opacity: 1; }
.cursor-glow.lg{
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: radial-gradient(circle, rgba(3,105,161,0.32), rgba(14,165,233,0.12) 50%, transparent 72%);
}
@media (prefers-reduced-motion: reduce){ .cursor-glow{ display: none !important; } }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-grid{ display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(30px,5vw,64px); align-items: start; }
.faq-head .faq-link{ color: var(--teal-deep); font-weight: 600; white-space: nowrap; }
.faq-head .faq-link:hover{ text-decoration: underline; }
.faq-list{ display: flex; flex-direction: column; gap: 12px; }
.faq-item{
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; transition: border-color .3s, box-shadow .3s;
}
.faq-item[open]{ border-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.faq-item summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16.5px;
  color: var(--navy); transition: color .25s;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:hover{ color: var(--teal-deep); }
.faq-item summary:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.chev{
  flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; color: var(--ink-3);
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.faq-item[open] .chev{ transform: rotate(-135deg); margin-top: 2px; color: var(--teal); }
.faq-a{ overflow: hidden; }
.faq-a p{ margin: 0; padding: 0 22px 20px; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 860px){ .faq-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER TICKER — "Innovate · Automate · Elevate"
   ============================================================ */
.footer-ticker{
  margin-top: 44px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.1); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ft-track{
  display: inline-flex; align-items: center; gap: 26px; width: max-content;
  animation: ft-scroll 28s linear infinite;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.02em; white-space: nowrap;
}
.ft-track span{
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.42);
}
.ft-track i{ color: var(--mint); font-style: normal; font-size: 0.42em; transform: translateY(-0.1em); }
@keyframes ft-scroll{ to{ transform: translateX(-50%); } }
.footer-ticker:hover .ft-track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .ft-track{ animation: none; transform: translateX(-12%); } }

/* ============================================================
   SPLIT-TEXT HEADING REVEAL — words rise on scroll-in
   ============================================================ */
.split .sw{
  display: inline-block;
  opacity: 0; transform: translateY(0.42em);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.split.lit .sw{ opacity: 1; transform: none; }

/* ============================================================
   NAV SLIDING INDICATOR + A11Y
   ============================================================ */
/* desktop only — below 941px .nav-links is the fixed off-canvas drawer, and this
   rule would otherwise override its position:fixed and break the mobile menu */
/* Exact inverse of the drawer condition above: relative only when the nav is
   really the desktop bar. Portrait tablets run the drawer, and this rule
   would override its position:fixed and render both navs at once. */
@media (min-width: 941px) and (orientation: landscape),
       (min-width: 1025px){ .nav-links{ position: relative; } }
.nav-ind{
  position: absolute; left: 0; top: 50%; height: 34px; margin-top: -17px;
  border-radius: 999px; background: var(--bg-mute);
  opacity: 0; z-index: 0; pointer-events: none;
  transition: transform .38s var(--ease), width .38s var(--ease), opacity .3s var(--ease);
}
.nav-links a{ position: relative; z-index: 1; }
.nav-links a:hover{ background: transparent; }   /* the sliding pill carries the highlight now */
.nav-links a.active{ background: transparent; }
@media (max-width: 940px), (max-width: 1024px) and (orientation: portrait){ .nav-ind{ display: none; } }

/* skip-to-content link */
.skip{
  position: fixed; top: 12px; left: 12px; z-index: 3000;
  transform: translateY(-160%);
  background: var(--navy); color: #fff; padding: 11px 18px; border-radius: 12px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-md); transition: transform .25s var(--ease);
}
.skip:focus{ transform: none; outline: 2px solid var(--mint); outline-offset: 2px; }

/* global keyboard focus ring */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 8px;
}

/* ============================================================
   LEAD CAPTURE FORM (dark contact section)
   ============================================================ */
.lead-form{
  max-width: 680px; margin: clamp(36px,5vw,52px) auto 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(22px,3vw,34px);
  box-shadow: var(--shadow-md); position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 16px; text-align: left;
}
.lf-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lf-field{ display: flex; flex-direction: column; gap: 7px; }
.lf-field label{
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.lf-field input, .lf-field select, .lf-field textarea{
  font-family: 'Inter Tight', sans-serif; font-size: 15px; color: var(--ink); width: 100%;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.lf-field textarea{ resize: vertical; min-height: 86px; }
.lf-field input::placeholder, .lf-field textarea::placeholder{ color: var(--ink-3); }
.lf-field select{
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230E7C8E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.lf-field select option{ color: #0F172A; }
.lf-field input:focus, .lf-field select:focus, .lf-field textarea:focus{
  border-color: var(--teal); background: #fff;
  box-shadow: 0 0 0 3px rgba(3,105,161,0.15);
}
.lf-field.invalid input, .lf-field.invalid select{
  border-color: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77,0.14);
}
.lf-actions{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.lf-note{ font-size: 13.5px; color: var(--ink-2); }
.lf-note.err{ color: #D42A2A; }
.lf-note.ok{ color: var(--teal-deep); }
.lf-note a{ color: inherit; text-decoration: underline; }
@media (max-width: 560px){ .lf-row{ grid-template-columns: 1fr; } }

/* ============================================================
   MODULE CARD MICRO-INTERACTIONS
   ============================================================ */
.mod .ic{ transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.mod:hover .ic{ transform: translateY(-3px) scale(1.06) rotate(-4deg); box-shadow: 0 14px 28px rgba(3,105,161,0.32); }
.mod h3{ transition: color .3s var(--ease); }
.mod:hover h3{ color: var(--teal-deep); }
.mod ul li{ transition: transform .35s var(--ease); }
.mod ul li::before{ transition: background .35s var(--ease); }
.mod:hover ul li{ transform: translateX(3px); }
.mod:hover ul li::before{ background: var(--green); }
.mod:hover ul li:nth-child(1){ transition-delay: .02s; }
.mod:hover ul li:nth-child(2){ transition-delay: .06s; }
.mod:hover ul li:nth-child(3){ transition-delay: .10s; }
@media (prefers-reduced-motion: reduce){
  .mod:hover .ic{ transform: none; }
  .mod:hover ul li{ transform: none; }
}

/* ============================================================
   PLATFORMS — "Deploy anywhere" device showcase
   ============================================================ */
.plat-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: clamp(40px,5vw,60px); }
.plat{
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.plat:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-soft); }
.plat-vis{
  height: 172px; border-radius: 14px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #E8F1FA, #F4F8FC); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.plat-vis .scr{ background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; }
.plat-vis.browser .scr, .plat-vis.desktop .scr{ width: 78%; height: 72%; }
.scr .bar{ height: 22px; background: var(--bg-mute); display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.scr .bar i{ width: 7px; height: 7px; border-radius: 50%; background: #CED7E6; }
.scr .bar .addr{ margin-left: 8px; flex: 1; height: 9px; border-radius: 5px; background: #fff; border: 1px solid var(--line); }
.browser .body{ padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.browser .body span{ height: 8px; border-radius: 5px; background: var(--bg-mute); }
.browser .body span:nth-child(1){ width: 55%; background: var(--grad-tg); }
.browser .body span:nth-child(2){ width: 88%; }
.browser .body span:nth-child(3){ width: 72%; }
.browser .body span:nth-child(4){ width: 40%; }
.desktop .scr{ display: flex; flex-direction: column; }
.desktop .win2{ flex: 1; display: grid; grid-template-columns: 30px 1fr; }
.desktop .rail{ background: var(--navy-ink); display: flex; flex-direction: column; gap: 6px; padding: 9px 7px; }
.desktop .rail b{ height: 8px; border-radius: 3px; background: rgba(255,255,255,.18); }
.desktop .rail b:first-child{ background: var(--mint); }
.desktop .content{ padding: 11px; display: flex; flex-direction: column; gap: 7px; }
.desktop .content span{ height: 8px; border-radius: 5px; background: var(--bg-mute); }
.desktop .content span:nth-child(1){ width: 60%; background: var(--grad-tg); }
.desktop .content span:nth-child(2){ width: 90%; }
.desktop .content span:nth-child(3){ width: 70%; }
.plat-vis.phone .device{
  width: 92px; height: 80%; background: var(--navy-ink); border-radius: 18px; padding: 6px;
  box-shadow: var(--shadow-md); position: relative;
}
.phone .notch{ position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 34px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); }
.phone .screen{ background: #fff; border-radius: 13px; height: 100%; padding: 13px 9px 9px; display: flex; flex-direction: column; gap: 6px; }
.phone .screen span{ border-radius: 5px; background: var(--bg-mute); }
.phone .screen .t{ height: 10px; width: 60%; background: var(--grad-tg); }
.phone .screen .c1, .phone .screen .c2{ height: 30px; }
.phone .screen .btm{ height: 9px; width: 50%; margin-top: auto; }
.plat-ic{
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--i1,#075985), var(--i2,#0369A1)); margin-top: 18px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--i2,#075985) 28%, transparent);
}
.plat-ic svg{ width: 23px; height: 23px; }
.plat h3{ margin-top: 16px; font-size: 19px; color: var(--navy); }
.plat p{ margin-top: 9px; font-size: 14.5px; }
.plat-tags{ margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.plat-tags span{
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 12px;
  padding: 5px 11px; border-radius: 999px; background: var(--bg-soft); color: var(--navy); border: 1px solid var(--line);
}
@media (max-width: 880px){ .plat-grid{ grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ============================================================
   CLICK-TO-COPY CONTACT CARDS
   ============================================================ */
.contact[data-copy]{ cursor: pointer; }
.contact[data-copy]:hover{ border-color: var(--teal); }
.contact[data-copy]:active{ transform: scale(.985); }
.contact[data-copy] .k::after{
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 7px; vertical-align: -1px; opacity: .4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7892' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") no-repeat center/contain;
  transition: opacity .2s;
}
.contact[data-copy]:hover .k::after{ opacity: .8; }
.contact.copied .k{ color: var(--teal-deep); }
.contact.copied .k::after{ opacity: 0; }
.contact[data-copy]:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }

/* ============================================================
   ENGAGEMENT MODELS
   ============================================================ */
@property --eng-angle{ syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes eng-rotate{ to{ --eng-angle: 360deg; } }
@media (prefers-reduced-motion: reduce){ .eng.featured::before{ animation: none; } }

/* ============================================================
   REVEAL SHINE — brand-tinted light sweep across cards
   ============================================================ */
.reveal-shine{ position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
.reveal-shine i{
  position: absolute; top: -25%; left: -70%; width: 45%; height: 150%;
  transform: rotate(16deg);
  background: linear-gradient(90deg, transparent, rgba(3,105,161,0.16), rgba(14,165,233,0.09), transparent);
  opacity: 0;
}
.reveal.in .reveal-shine i{ animation: reveal-shine 1.15s var(--ease) .15s forwards; }
@keyframes reveal-shine{
  0%{ opacity: 0; left: -70%; }
  25%{ opacity: 1; }
  100%{ opacity: 0; left: 140%; }
}
@media (prefers-reduced-motion: reduce){ .reveal.in .reveal-shine i{ animation: none; } }

/* ============================================================
   FLAT DUOTONE ICON TILES — pale tint + solid colour glyph (no gradients).
   This block is placed after every tile definition so it wins the cascade.
   ============================================================ */
/* on dark backgrounds (AI cards): translucent colour tile + bright glyph */
@media (max-width: 900px){ .eng-grid{ grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ============================================================
   ERP WINDOW — LIVE BADGE
   ============================================================ */
.win-bar .live{
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint);
}
.win-bar .live .ld{
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(14,165,233,0.5); animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(14,165,233,0.5); }
  70%{ box-shadow: 0 0 0 7px rgba(14,165,233,0); }
  100%{ box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}
@media (prefers-reduced-motion: reduce){ .win-bar .live .ld{ animation: none; } }

/* ============================================================
   PRODUCT TOUR — real screenshots with tab switcher
   ============================================================ */
/* stage dominant (~63%) so the product leads, not the flanking lists */
.tour{ display:grid; grid-template-columns: minmax(0,208px) minmax(0,1fr) minmax(0,208px); gap: clamp(16px,1.8vw,26px); align-items:start; margin-top: clamp(26px,3.5vw,42px); }
.tour-col{ display:flex; flex-direction:column; }
.tour-col-h{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px; letter-spacing:0.18em;
  text-transform:uppercase; color: rgba(148,178,208,0.9); padding:0 4px 12px; }
/* The 3-column tour survives down to 901: at 1024 the stacked version gave
   922px-wide tab rows with the number, label and chevron flung apart by
   space-between, which reads as broken. Narrower side rails fit fine. */
@media (min-width: 901px) and (max-width: 1080px){
  #tour .tour{ grid-template-columns: minmax(0,190px) minmax(0,1fr) minmax(0,190px); gap:14px; }
  /* Desktop's stage exactly fills its grid row (432 = 432), so sticky never
     detaches there — that is why the box reads as locked. Here the stage is
     71px shorter than the rails, so sticky engaged and slid the box down
     relative to the tabs. Static reproduces the desktop behaviour exactly. */
  #tour .tour-stage{ order:0; position:static; align-self:start; }
  #tour .tour-tabs [role="tab"]{ padding:10px 12px; }
  #tour .tour-tabs [role="tab"] b{ font-size:14px; }
  #tour .tour-col-h{ font-size:9.5px; letter-spacing:0.14em; }
}
@media (max-width: 900px){
  .tour{ grid-template-columns: 1fr; }
  /* position:static belongs here, with the stacking — not 220px lower at 860.
     Between 861 and 1080 the tour stacked while the stage stayed sticky, so
     the stage pinned at top:90 and the tab lists scrolled straight through it
     (measured at 1024x768: stage fixed at 90-450 while the tabs occupied
     64-429). Sticky only makes sense in the 3-column layout, where the stage
     has flanking lists to stay level with. */
  /* id-scoped: the base `.tour-stage{position:sticky}` is declared ~25 lines
     BELOW this block, so an equal-specificity rule here loses on source order */
  #tour .tour-stage{ order:-1; position: static; }
}
/* accordion list on the left — title always shown, description expands when active */
.tour-tabs{ display:flex; flex-direction:column; gap:7px; }
.tour-tabs [role="tab"]{
  width:100%; text-align:left; cursor:pointer; font: inherit;
  padding: 15px 18px; border-radius:14px; background:#fff; border:1px solid var(--line);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.tour-tabs [role="tab"] .tt-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tour-tabs [role="tab"] b{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15.5px; letter-spacing:-0.01em; color: var(--navy); }
.tour-tabs [role="tab"] .tt-chev{ flex:0 0 auto; color: var(--ink-3); font-size:12px; transition: transform .3s var(--ease), color .25s var(--ease); }
.tour-tabs [role="tab"] .tt-desc{
  display:block; overflow:hidden; max-height:0; opacity:0; margin-top:0;
  font-size:13px; line-height:1.55; color: var(--ink-2);
  transition: max-height .35s var(--ease), opacity .3s var(--ease), margin-top .3s var(--ease);
}
.tour-tabs [role="tab"]:hover{ border-color:#CBD9E8; }
.tour-tabs [role="tab"][aria-selected="true"]{
  border-color: var(--accent); background: rgba(3,105,161,0.05);
  box-shadow: 0 8px 20px rgba(3,105,161,0.10);
}
.tour-tabs [role="tab"][aria-selected="true"] b{ color: var(--accent); }
.tour-tabs [role="tab"][aria-selected="true"] .tt-chev{ transform: rotate(180deg); color: var(--accent); }
.tour-tabs [role="tab"][aria-selected="true"] .tt-desc{ max-height: 96px; opacity:1; margin-top:8px; }
.tour-stage{ position: sticky; top: 90px; }
.tour-frame{
  border-radius: 16px; overflow: hidden; background:#fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.tf-bar{
  height: 30px; display:flex; align-items:center; gap:6px; padding: 0 13px;
  background: var(--bg-mute); border-bottom: 1px solid var(--line);
}
.tf-bar i{ width: 9px; height: 9px; border-radius: 50%; background: #CED7E6; }
.tf-bar .tf-addr{
  margin-left: 10px; font-family:'Space Grotesk',sans-serif; font-size: 11px; letter-spacing: 0.05em;
  color: var(--ink-2); background:#fff; border:1px solid var(--line); border-radius: 999px; padding: 2px 12px;
}
.tour-frame img{ display:block; width:100%; height:auto; transition: opacity .22s ease; }
@media (max-width: 860px){
  .tour{ grid-template-columns: 1fr; gap: 22px; }
  .tour-stage{ position: static; order: -1; }
}

/* real screenshots inside platform mock frames */
.plat-shot{ display:block; width:100%; height:100%; object-fit: cover; object-position: top left; }
.phone .screen{ padding: 0; overflow: hidden; }
.phone-shot{ border-radius: 13px; object-position: top center; }

/* ============================================================
   WORK — websites & storefronts portfolio
   ============================================================ */
.work{
  background:#fff; border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.work:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg, 0 30px 60px rgba(7,89,133,.14)); border-color: var(--line-soft); }

/* browser-framed screenshot */
.wf-bar{
  display:flex; align-items:center; gap:6px; padding: 0 4px 10px;
}
.wf-bar > i{ width: 9px; height: 9px; border-radius: 50%; background: #CBD5E6; }
.wf-bar > i:nth-child(1){ background:#FF6058; } .wf-bar > i:nth-child(2){ background:#FFBE2F; } .wf-bar > i:nth-child(3){ background:#2ACB42; }
.wf-url{
  margin: 0 auto; font-family:'Space Grotesk',sans-serif; font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--ink-2); background:#fff; border:1px solid var(--line); border-radius: 999px; padding: 3px 16px;
  max-width: 80%; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
}
/* hover overlay CTA */

.work-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.work-hd h3{ font-size: 21px; color: var(--navy); }
.work-badge{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size: 11px; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--teal); background: rgba(3,105,161,0.09); border:1px solid rgba(3,105,161,0.22);
  border-radius: 999px; padding: 4px 11px; white-space:nowrap;
}
.work-link{
  margin-top: 18px; align-self:flex-start;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size: 14px; color: var(--teal);
}
.work-link .arrow{ display:inline-block; transition: transform .3s var(--ease); }
.work-link:hover .arrow{ transform: translateX(4px); }
.work-note{ margin-top: 28px; text-align:center; font-size: 15px; color: var(--ink-2); }
.work-note a{ color: var(--teal); font-weight: 600; }
@media (max-width: 900px){ .work-grid{ grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ============================================================
   HERO SCROLL CUE
   ============================================================ */
.scroll-cue{
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40;
  opacity: 0; transition: opacity .5s var(--ease); color: var(--ink-3);
}
.loaded .scroll-cue{ opacity: 1; transition-delay: 1.1s; }
.scroll-cue.hide{ opacity: 0; pointer-events: none; transition-delay: 0s; }
.scroll-cue .mouse{
  position: relative; display: block; width: 24px; height: 38px;
  border: 2px solid currentColor; border-radius: 13px; opacity: .5;
  transition: opacity .25s, border-color .25s;
}
.scroll-cue:hover .mouse{ opacity: .9; border-color: var(--teal); }
.scroll-cue .wheel{
  position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; border-radius: 2px;
  background: var(--teal); transform: translateX(-50%); animation: sc-wheel 1.7s ease-in-out infinite;
}
@keyframes sc-wheel{
  0%{ opacity: 0; transform: translate(-50%, 0); }
  25%{ opacity: 1; } 70%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-50%, 12px); }
}
@media (prefers-reduced-motion: reduce){ .scroll-cue .wheel{ animation: none; top: 13px; } }
@media (max-width: 860px){ .scroll-cue{ display: none; } }

/* ============================================================
   HERO — ClickUp-style layout (BizArch brand colours)
   ============================================================ */
.hero-cu{
  padding-top: calc(var(--nav-h) + 54px);
  padding-bottom: clamp(48px, 6vw, 80px);
  background: #FFFFFF;
  overflow-x: clip;      /* contain the right-bleeding product shot; no h-scroll */
}
.hero-cu .hero-grid{
  grid-template-columns: minmax(0, 545px) 1fr;
  gap: clamp(40px, 6.4vw, 96px);   /* wider middle gap, like ClickUp */
  align-items: center;
}

/* --- pill badge --- */
.cu-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px 8px 10px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13.5px;
  color: var(--ink); letter-spacing:-0.01em; text-decoration:none;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cu-pill:hover{ border-color:#CBD9E8; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cu-pill img{ display:block; }
.cu-pill-mark{ height:22px; width:auto; margin: -2px 0; }   /* ZATCA shield seal */
/* the pill uses the text glyph, so cancel the border-drawn arrow inherited from .chev */
.cu-pill .chev{
  border:0; width:auto; height:auto; transform:none; margin-top:0;
  color: var(--ink-3); font-size:17px; line-height:1; margin-left:2px;
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.cu-pill:hover .chev{ transform: translateX(3px); color: var(--brand); }

/* --- headline --- */
.cu-h1{
  margin-top: 20px;
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(34px, 4.05vw, 54px); line-height: 1.04;
  letter-spacing:-0.035em; color: var(--ink);
}

/* --- checkmark points --- */
.cu-points{ list-style:none; margin: 22px 0 0; padding:0; display:grid; gap:13px; max-width: 520px; }
.cu-points li{ display:flex; align-items:flex-start; gap:12px; font-size: clamp(16px, 1.2vw, 18px); line-height:1.5; color: var(--ink-2); }
.cu-points strong{ color: var(--ink); font-weight:700; }
/* bare tick, no disc — the mark itself carries the brand colour */
.cu-points .ck{
  flex:0 0 auto; margin-top:3px; width:19px; height:19px;
  display:grid; place-items:center; color: var(--brand);
}

/* --- CTA --- */
.cu-cta{ margin-top: 28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 18px 34px; border-radius: 14px;
  background: var(--navy-ink); color:#fff; text-decoration:none;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; letter-spacing:-0.01em;
  box-shadow: 0 10px 26px rgba(15,23,42,0.24);
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.cu-btn:hover{ background:#1B2740; transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15,23,42,0.32); }
.cu-sub{ font-size:14px; line-height:1.35; color: var(--ink-3); font-weight:500; }

/* --- uppercase label --- */
.cu-label{
  margin-top: 30px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-3);
}

/* --- feature chips --- */
.cu-chips{ margin-top: 14px; display:flex; flex-wrap:wrap; gap:10px; max-width: 560px; }
.cu-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding: 9px 16px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px;
  color: var(--ink-2); cursor:default; user-select:none;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.cu-chip:hover{ border-color:#CBD9E8; color: var(--ink); }
.cu-chip.on{
  border-color: var(--accent); color: var(--accent);
  background: rgba(3,105,161,0.06);
}
.cu-chip .chk{
  width:16px; height:16px; border-radius:50%; background: var(--accent); color:#fff;
  display:grid; place-items:center;
}

/* --- product shot (right card) — ClickUp "sneak peek" ---
   The panel bleeds to the right edge of the viewport and dissolves there
   with a soft vignette fade (mask), so only a peek of the ERP is shown. */
.hero-cu .hero-visual{
  aspect-ratio:auto; position:relative; align-self:center;
  display:flex; justify-content:flex-start; align-items:center;   /* left-align the shot (no centering) */
}
.cu-shot{
  position: relative; flex: 0 0 auto;
  /* left edge sits at the column's left edge; bleeds right to the viewport edge */
  width: calc(100% + var(--gut) + max(0px, (100vw - var(--maxw)) / 2));
  /* gently rounded, window-like corners */
  border-radius: 16px 0 0 16px;
  overflow: hidden;
  background:#fff;
  /* thicker, window-like outline (fades on the bleeding edges via the mask) */
  border:2px solid rgba(15,23,42,0.18);
  box-shadow: -2px 40px 90px rgba(15,23,42,0.18), 0 10px 30px rgba(15,23,42,0.10);
  /* tall portrait "peek" — show the top of the app, crop the rest below */
  aspect-ratio: 5 / 4;
  /* soft vignette on BOTH the right and the bottom (intersection of two fades);
     bottom is a gentle, shallow fade so it blends without looking deliberate */
  -webkit-mask-image:
    linear-gradient(90deg, #000 76%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, #000 76%, rgba(0,0,0,0) 100%);
          mask-image:
    linear-gradient(90deg, #000 76%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, #000 76%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.cu-shot img{
  display:block; width:100%; height:100%;
  object-fit: cover; object-position: left top;
}

/* --- trusted-by strip --- */
.cu-trust{ margin-top: clamp(48px, 6vw, 88px); display:flex; align-items:center; gap: clamp(24px, 4vw, 56px); flex-wrap:wrap; }
.cu-trust-label{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:0.12em; text-transform:uppercase; color: var(--ink-3); white-space:nowrap;
}
.cu-trust-logos{ display:flex; align-items:center; gap: clamp(32px, 4.6vw, 64px); flex-wrap:wrap; }
/* text placeholders */
.cu-trust-logos .tl{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;
  color:#94A3B8; letter-spacing:-0.01em; filter: grayscale(1); opacity:.9;
}
/* real logo images — colour files shown grayscale + muted by default,
   then reveal their original brand colour on hover (ClickUp style) */
.cu-trust-logos img.tl{
  height: 28px; width:auto; max-width: 160px; object-fit: contain;
  filter: grayscale(1); opacity:.68;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.cu-trust-logos img.tl.lockup{ height: 40px; }   /* stacked lockups need more height to read */
/* hovering anywhere in the row — logos or the gaps between them — lights up the whole set */
.cu-trust-logos:hover img.tl{ filter: grayscale(0); opacity: 1; }

/* --- responsive --- */
@media (max-width: 960px){
  .hero-cu .hero-grid{ grid-template-columns: 1fr; gap: 36px; }
  .hero-cu .hero-visual{ max-width: 560px; margin: 0 auto; order: 2; }
  .cu-points, .cu-chips{ max-width: none; }
  /* on stacked layout the shot is a normal, fully-shown card (no bleed / fade) */
  .cu-shot{
    width: 100%;
    aspect-ratio: auto;
    border-radius: 16px; border: 2px solid rgba(15,23,42,0.18);
    box-shadow: var(--shadow-lg);
    -webkit-mask-image: none; mask-image: none;
  }
  .cu-shot img{ height: auto; }
}
@media (max-width: 560px){
  .cu-cta{ gap:14px; }
  .cu-btn{ width:100%; }
  .cu-trust{ gap:16px; }
}

/* ============================================================
   SERVICES — "tangle → one system" flow (ClickUp-inspired)
   ============================================================ */
.flow-illus{
  position: relative; width: 100%; max-width: 1000px; margin: clamp(30px,5vw,56px) auto 0;
  aspect-ratio: 1200 / 220;
}
.flow-ribbon{ position:absolute; inset:0; width:100%; height:100%; }
.flow-illus .fchip{
  position:absolute; transform: translate(-50%,-50%);
  width: clamp(38px,4.4vw,52px); height: clamp(38px,4.4vw,52px);
  display:grid; place-items:center; border-radius: 14px;
  background:#fff; border:1px solid var(--line);
  box-shadow: 0 10px 24px rgba(15,23,42,0.10);
  color: var(--brand);
}
.flow-illus .fchip svg{ width: 46%; height:46%; }
.flow-illus .fchip.fmark{
  width: clamp(58px,6.4vw,76px); height: clamp(58px,6.4vw,76px); border-radius: 18px;
  border:1.5px solid rgba(3,105,161,0.28);
  box-shadow: 0 16px 40px rgba(3,105,161,0.26), 0 0 0 6px rgba(3,105,161,0.05);
  z-index:3;
}
.flow-illus .fchip.fmark img{ width: 56%; height:auto; }
.flow-illus .fbubble{
  position:absolute; transform: translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding: 8px 13px; border-radius: 999px;
  background:#fff; border:1px solid var(--line); box-shadow: 0 10px 24px rgba(15,23,42,0.10);
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size: clamp(11px,1vw,13px); color: var(--ink);
}
.flow-illus .fbubble .ck{
  width:16px; height:16px; border-radius:50%; background: var(--accent); color:#fff;
  display:grid; place-items:center; flex:0 0 auto;
}
.flow-illus .fbubble .ck svg{ width:10px; height:10px; }

/* 3 core pillars */
.flow-cols{
  display:grid; grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(24px, 4vw, 56px); row-gap: clamp(34px, 4vw, 52px);
  max-width: 1000px; margin: 0 auto; padding-top: 6px;
}
.flow-col{ position:relative; text-align:left; }
.flow-col:has(.flow-conn){ padding-top: 38px; }   /* only top row leaves room for the connector */
.flow-conn{
  position:absolute; top:0; left:0; width:1.5px; height:30px;
  background: linear-gradient(var(--line), transparent);
}
.flow-conn::before{
  content:""; position:absolute; top:-3px; left:50%; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(3,105,161,0.10);
}
.flow-col h3{ color: var(--navy); }
.flow-col p{ margin-top: 10px; font-size: 15.5px; color: var(--ink-2); max-width: 300px; }
.flow-col p strong{ color: var(--ink); font-weight:700; }

/* complementary services — blended row below */
.flow-more{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: clamp(48px, 6vw, 84px);
  padding-top: clamp(30px, 4vw, 48px); border-top: 1px solid var(--line-soft);
}
.mcard{
  padding: 24px 22px; border-radius: var(--r-md);
  background: var(--bg-soft); border:1px solid var(--line-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line); }
.mcard .mic{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background: linear-gradient(140deg, var(--i1,#075985), var(--i2,#0369A1));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--i2,#075985) 30%, transparent);
}
.mcard .mic svg{ width:22px; height:22px; }
.mcard h4{ margin-top:16px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; letter-spacing:-0.01em; color: var(--navy); }
.mcard p{ margin-top:8px; font-size:14px; line-height:1.55; color: var(--ink-2); }

@media (max-width: 860px){
  .flow-cols{ grid-template-columns: 1fr; gap: 22px; max-width: 460px; }
  .flow-col{ padding-top: 22px; }
  .flow-more{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .flow-illus{ max-width: 420px; }
  .flow-illus .fbubble{ display:none; }        /* declutter on small screens */
  .flow-more{ grid-template-columns: 1fr; max-width: 420px; margin-inline:auto; }
}

/* stat row — divider handling on smaller screens */
@media (max-width: 860px){
  .stats{ grid-template-columns: repeat(2,1fr); }
  .stat{ min-height: auto; padding: 26px clamp(16px,3vw,26px); }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .stat .desc{ padding-top: 20px; }
}
@media (max-width: 520px){
  .stats{ grid-template-columns: 1fr; }
  .stat{ border-left:0 !important; padding: 24px 0; border-top:1px solid var(--line); }
  .stat:first-child{ border-top:0; padding-top: 4px; }
  .stat .desc{ padding-top: 12px; max-width: 420px; }
}

/* pull the stat row up to the services section (kill the huge white gap) */
#services{ padding-bottom: clamp(40px, 5vw, 64px); }
#services + .section.tight{ padding-top: clamp(18px, 3vw, 34px); }

/* ============================================================
   ERP SECTION — light, Daftra-inspired (dark reserved for AI later)
   ============================================================ */
.erp-lite{ background: #FFFFFF; }

/* feature list */
.erp-lite .erp-feat{ margin-top: 30px; display:grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.erp-lite .erp-feat .ef{ display:flex; gap:12px; align-items:flex-start; }
.erp-lite .ef .eic{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff;
  background: linear-gradient(140deg,var(--i1,#075985),var(--i2,#0369A1));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--i2,#075985) 28%, transparent);
}
.erp-lite .ef .eic svg{ width:19px; height:19px; }
.erp-lite .erp-feat .ef b{ color: var(--navy); font-weight:700; font-size:15px; display:block; }
.erp-lite .erp-feat .ef .d{ color: var(--ink-2); font-size:13.5px; margin-top:2px; display:block; line-height:1.45; }

/* product shot + floating accent cards */
.erp-lite .erp-visual{ position:relative; }
.erp-shot{
  border-radius: var(--r-md); overflow:hidden; background:#fff; border:1px solid var(--line);
  box-shadow: 0 40px 90px rgba(15,23,42,0.16), 0 10px 30px rgba(15,23,42,0.08);
}
.erp-bar{ height:34px; display:flex; align-items:center; gap:7px; padding:0 14px; background: var(--bg-mute); border-bottom:1px solid var(--line); }
.erp-bar i{ width:9px; height:9px; border-radius:50%; background:#CED7E6; }
.erp-bar .erp-addr{ margin-left:10px; font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.05em; color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:999px; padding:2px 12px; }
.erp-shot img{ display:block; width:100%; height:auto; }

.erp-floaty{
  position:absolute; z-index:2; display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:14px; background:#fff; border:1px solid var(--line);
  box-shadow: 0 18px 40px rgba(15,23,42,0.14);
}
.erp-floaty .fi{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; background: linear-gradient(140deg,var(--i1),var(--i2)); }
.erp-floaty .fi svg{ width:17px; height:17px; }
.erp-floaty .ft{ display:flex; flex-direction:column; line-height:1.2; }
.erp-floaty .fl{ font-size:10.5px; color:var(--ink-3); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.erp-floaty .fv{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:var(--ink); letter-spacing:-0.01em; }
.erp-floaty .fbadge{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; color:#16A34A; background:#DCFCE7; border-radius:999px; padding:3px 8px; }
.erp-floaty.f-top{ top:-22px; right:-14px; }
.erp-floaty.f-bot{ bottom:-22px; left:-18px; }

/* ZATCA strip — light */
.erp-lite .zatca-strip{ background:#fff; border:1px solid var(--line); box-shadow: var(--shadow-sm); }
.erp-lite .zatca-head p{ color: var(--ink-2); }
.erp-lite .zatca-pts .pt .k{
  background: linear-gradient(120deg,#0EA5E9,#0369A1);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.erp-lite .zatca-pts .pt .l{ color: var(--navy); }
.erp-lite .zatca-pts .pt .d{ color: var(--ink-2); }

@media (max-width: 680px){
  .erp-floaty{ display:none; }              /* declutter on phones */
}

/* ============================================================
   ZATCA — dedicated compliance block (Daftra-style)
   ============================================================ */
.zatca-full{
  margin-top: clamp(44px,6vw,80px);   /* blended into the ERP section, no divider */
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,72px); align-items:center;
}
.zf-title{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(30px,4vw,50px); line-height:1.04; letter-spacing:-0.035em; color: var(--ink);
}
.zf-block{ margin-top: 26px; }
.zf-block h3{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color: var(--navy); }
.zf-block p{ margin-top:8px; font-size:15px; line-height:1.6; color: var(--ink-2); max-width:520px; }
.zf-tags{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
.ztag{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12.5px; color: var(--navy);
  background: var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:6px 13px;
}

.zf-visual{ position:relative; }
.zf-card{
  position:absolute; right:-14px; bottom:-26px; width:236px; z-index:2;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow: 0 22px 48px rgba(15,23,42,0.16); padding:15px 16px;
}
.zc-head{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; color: var(--navy); }
.zc-row{ display:flex; justify-content:space-between; align-items:center; margin-top:11px; font-size:12.5px; color: var(--ink-3); }
.zc-row b{ color: var(--ink); font-weight:600; }
.zc-toggle{ display:flex; align-items:center; gap:9px; margin-top:14px; font-size:12.5px; color: var(--ink-2); }
.zc-toggle .tg{ width:30px; height:18px; border-radius:999px; background:#22C55E; position:relative; flex:0 0 auto; }
.zc-toggle .tg i{ position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:#fff; }
.erp-floaty.zf-f1{ top:-20px; left:-16px; }

@media (max-width: 860px){
  .zatca-full{ grid-template-columns: 1fr; gap: 34px; }
  .zf-block p{ max-width:none; }
}
@media (max-width: 680px){
  .zf-card{ display:none; }
}

/* ZATCA — code-built invoice + settings mockup (replaces screenshot) */
.zf-visual{ position:relative; }
.zf-mock{ position:relative; height: clamp(400px, 34vw, 480px); font-family:'Space Grotesk',sans-serif; }

/* back: e-invoice document */
.zf-inv{
  position:absolute; top:0; left:0; width:64%; padding:18px 18px 16px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow: 0 20px 50px rgba(15,23,42,0.10);
}
.zf-inv-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.zf-brand{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:14px; color:var(--navy); }
.zf-brand img{ display:block; }
.zf-inv-no{ text-align:right; line-height:1.3; }
.zf-inv-no span{ display:block; font-size:9px; color:var(--ink-3); letter-spacing:.04em; }
.zf-inv-no b{ font-size:12px; color:var(--ink); }
.zf-inv-meta{ display:flex; gap:16px; margin-top:12px; font-size:9.5px; color:var(--ink-3); }
.zf-tbl{ width:100%; margin-top:14px; border-collapse:collapse; font-size:10px; }
.zf-tbl th{ text-align:left; color:var(--ink-3); font-weight:600; font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; padding:0 0 7px; border-bottom:1px solid var(--line-soft); }
.zf-tbl th:nth-child(2), .zf-tbl th:nth-child(3){ text-align:center; }
.zf-tbl th:last-child{ text-align:right; }
.zf-tbl td{ padding:8px 0; color:var(--ink-2); border-bottom:1px solid var(--line-soft); }
.zf-tbl td:first-child{ color:var(--ink); font-weight:500; }
.zf-tbl td:nth-child(2), .zf-tbl td:nth-child(3){ text-align:center; }
.zf-tbl td:last-child{ text-align:right; font-weight:600; color:var(--ink); }
.zf-inv-foot{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:14px; }
.zf-qr{ width:44px; height:44px; border-radius:6px; background:
  repeating-conic-gradient(var(--navy-ink) 0% 25%, #fff 0% 50%) 0 0 / 8px 8px; opacity:.85; }
.zf-tot{ text-align:right; }
.zf-tot span{ display:block; font-size:9px; color:var(--ink-3); }
.zf-tot b{ font-size:15px; color:var(--navy); letter-spacing:-0.01em; }

/* floating: send invoice */
.zf-send{
  position:absolute; top:8%; right:0; z-index:4; display:inline-flex; align-items:center; gap:9px;
  padding:11px 16px 11px 12px; border-radius:14px; background:#fff; border:1px solid var(--line);
  box-shadow: 0 18px 40px rgba(15,23,42,0.14); font-weight:700; font-size:14px; color:var(--ink);
}
.zf-send .fi{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; background: linear-gradient(140deg,var(--i1),var(--i2)); }
.zf-send .fi svg{ width:16px; height:16px; }

/* front: electronic invoice settings */
.zf-panel{
  position:absolute; right:0; bottom:0; width:66%; z-index:3; padding:18px 18px 20px;
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow: 0 30px 70px rgba(15,23,42,0.18);
}
.zp-head{ font-weight:700; font-size:15px; color:var(--navy); }
.zp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.zf-panel label{ display:block; font-size:10px; color:var(--ink-3); font-weight:600; }
.zp-full{ margin-top:12px; }
.zp-in, .zp-sel{
  display:flex; align-items:center; justify-content:space-between; margin-top:5px;
  padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:#fff;
  font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.zp-sel i{ color:var(--ink-3); font-style:normal; margin-left:8px; }
.zp-toggle{ display:flex; align-items:center; gap:9px; margin-top:15px; font-size:12px; color:var(--ink-2); font-weight:500; }
.zp-toggle .tg{ width:32px; height:19px; border-radius:999px; background:#22C55E; position:relative; flex:0 0 auto; }
.zp-toggle .tg i{ position:absolute; top:2px; right:2px; width:15px; height:15px; border-radius:50%; background:#fff; }

/* ZATCA shield card */
.zf-shield{
  position:absolute; left:6%; bottom:2%; z-index:4; width:74px; height:74px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow: 0 16px 36px rgba(15,23,42,0.14);
}
.zf-shield img{ display:block; }

@media (max-width: 860px){
  .zf-mock{ height: clamp(360px, 74vw, 460px); max-width:520px; margin:0 auto; }
}
@media (max-width: 420px){
  .zf-send{ font-size:12px; }
  .zf-shield{ display:none; }
}

/* ERP icons — minimalistic brand-line style, matching the illustration chips
   (replaces the solid deep-blue gradient tiles) */
.erp-lite .ef .eic,
.erp-floaty .fi,
.zf-send .fi{
  background:#fff;
  border:1px solid var(--line);
  color: var(--brand);
  box-shadow: 0 6px 16px rgba(15,23,42,0.07);
}

/* subtle separation: product tour sits on a soft band (ERP above is pure white) */
/* tour panel: rounded inset on entry/exit, full bleed while you're inside it.
   The gradient lives on a clipped ::before so nothing reflows and .tour-stage stays sticky. */
#tour{
  --te: 0;                                   /* 0 = inset panel, 1 = full bleed */
  --tgy: clamp(14px, 1.8vw, 30px);
  --tgx: clamp(10px, 1.4vw, 22px);
  --trd: clamp(26px, 3.6vw, 46px);
  position: relative;
  /* spotlight behind the stage lifts the product screens; the base stays quiet */
  background:
    radial-gradient(58% 46% at 62% 46%, rgba(56,189,248,0.16), transparent 62%),
    radial-gradient(70% 40% at 50% 0%, rgba(37,99,235,0.14), transparent 60%),
    linear-gradient(180deg,#071C31 0%, #0A2C4C 55%, #0B3557 100%);
  clip-path: inset(
    calc(var(--tgy) * (1 - var(--te)))
    calc(var(--tgx) * (1 - var(--te)))
    round calc(var(--trd) * (1 - var(--te)))
  );
}
#modules{ background: var(--bg-soft); }

/* --- Product tour on dark: invert type, glass tabs, lifted frame --- */
#tour .eyebrow{ color: var(--mint); }
#tour .eyebrow::before{ background: var(--mint); }
#tour .h2{ color:#fff; }
#tour .lead{ color: rgba(226,238,250,0.76); }
#tour .tour-tabs [role="tab"]{
  background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
}
#tour .tour-tabs [role="tab"] b{ color: rgba(233,241,250,0.92); }
#tour .tour-tabs [role="tab"] .tt-chev{ color: rgba(178,198,220,0.55); }
#tour .tour-tabs [role="tab"] .tt-desc{ color: rgba(200,218,236,0.72); }
#tour .tour-tabs [role="tab"]:hover{ background: rgba(255,255,255,0.09); border-color: rgba(94,234,212,0.35); }
#tour .tour-tabs [role="tab"][aria-selected="true"]{
  background: rgba(94,234,212,0.10); border-color: rgba(94,234,212,0.55);
  box-shadow: 0 10px 26px rgba(2,12,27,0.5);
}
#tour .tour-tabs [role="tab"][aria-selected="true"] b,
#tour .tour-tabs [role="tab"][aria-selected="true"] .tt-chev{ color: var(--mint); }
#tour .tour-frame{
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 34px 80px rgba(2,12,27,0.62);
}
#tour .tf-bar{ background:#132C46; border-bottom-color: rgba(255,255,255,0.10); }
#tour .tf-bar i{ background: rgba(255,255,255,0.22); }
#tour .tf-bar .tf-addr{ color: rgba(200,218,236,0.75); background: rgba(255,255,255,0.07); }
#tour .tour-demobox{ border-color: rgba(255,255,255,0.16); box-shadow: 0 34px 80px rgba(2,12,27,0.62); }

/* ============================================================
   ZATCA — original "live clearance pipeline" card (unique concept)
   ============================================================ */
.erp-lite .zf-visual{ display:flex; justify-content:center; align-items:center; }
.zpipe{
  width:100%; max-width: 430px; background:#fff; border:1px solid var(--line);
  border-radius:18px; box-shadow: 0 30px 70px rgba(15,23,42,0.12); padding: 22px 24px;
  font-family:'Inter Tight', sans-serif;
}
.zpipe .zp-head{ display:flex; align-items:center; justify-content:space-between; }
.zpipe .zp-title{ display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color: var(--navy); }
.zp-live-dot{ width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,0.16); animation: pulse 2s infinite; }
.zpipe .zp-ms{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; color:#15803D; background:#DCFCE7; border-radius:999px; padding:3px 10px; }

.zp-flow{ list-style:none; margin:18px 0 0; padding:0; }
.zp-flow li{ position:relative; display:grid; grid-template-columns:34px 1fr; gap:13px; padding-bottom:18px; }
.zp-flow li:last-child{ padding-bottom:0; }
.zp-flow li:not(.last)::before{ content:""; position:absolute; left:16px; top:34px; bottom:-2px; width:2px; background: var(--line); }
.zp-node{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; z-index:1;
  background: var(--bg-mute); color: var(--brand); border:1px solid var(--line); }
.zp-node svg{ width:16px; height:16px; }
.zp-node.ok{ background:#DCFCE7; color:#16A34A; border-color:#BBF7D0; }
.zp-node.ok svg{ width:15px; height:15px; }
.zp-node.cleared{ background:#16A34A; color:#fff; border-color:#16A34A; box-shadow:0 8px 18px rgba(22,163,74,0.34); }
.zp-body b{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color: var(--navy); }
.zp-body span{ display:block; margin-top:2px; font-size:12.5px; line-height:1.45; color: var(--ink-2); }
.zp-body code{ display:inline-block; margin-top:7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px;
  color: var(--ink-2); background: var(--bg-soft); border:1px solid var(--line-soft); border-radius:7px; padding:3px 9px; letter-spacing:.02em; }
.zp-body code em{ font-style:normal; font-weight:700; color: var(--brand); }

.zp-foot{ display:flex; align-items:center; gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line-soft); }
.zp-qr{ display:block; border:1px solid var(--line); border-radius:9px; padding:5px; background:#fff; }
.zp-foot-r{ flex:1; min-width:0; }
.zp-seal{ display:inline-flex; align-items:center; gap:6px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; color:#15803D; }
.zp-seal svg{ width:13px; height:13px; }
.zp-foot-r b{ display:block; margin-top:4px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color: var(--navy); }
.zp-shield{ display:block; opacity:.92; flex:0 0 auto; }

/* subtle floating accent — a small "cleared" seal on the pipeline card */
.zpipe{ position: relative; }
.zp-stamp{
  position:absolute; top:-18px; right:-16px; z-index:4;
  width:64px; height:64px; border-radius:50%;
  background:#fff; border:2px solid #BBF7D0; box-shadow: 0 14px 30px rgba(15,23,42,0.14);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  transform: rotate(-9deg);
}
.zp-stamp svg{ width:19px; height:19px; color:#16A34A; }
.zp-stamp span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; color:#16A34A; }
@media (max-width: 420px){ .zp-stamp{ display:none; } }

/* multiple subtle floating accents around the clearance card */
.zpf{ position:absolute; z-index:4; }
.zpf-live{
  top:-16px; left:20px;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 13px;
  box-shadow:0 14px 30px rgba(15,23,42,0.12);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; color:var(--navy);
  --r:0deg; animation: zbob 5s ease-in-out infinite;
}
.zpf-dot{ width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,0.16); animation: pulse 2s infinite; }
.zpf-seal{
  top:-20px; right:-18px; width:58px; height:58px; border-radius:50%;
  background:#fff; border:2px solid #E2F5EA; box-shadow:0 16px 34px rgba(15,23,42,0.15);
  display:grid; place-items:center;
  --r:-8deg; animation: zbob 6.2s ease-in-out infinite reverse;
}
.zpf-chip{
  bottom:-16px; right:-12px;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 13px;
  box-shadow:0 14px 30px rgba(15,23,42,0.12);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; color:#16A34A;
  --r:0deg; animation: zbob 5.6s ease-in-out infinite;
}
.zpf-chip svg{ width:15px; height:15px; }
@keyframes zbob{ 0%,100%{ transform: translateY(0) rotate(var(--r,0deg)); } 50%{ transform: translateY(-6px) rotate(var(--r,0deg)); } }
@media (prefers-reduced-motion: reduce){ .zpf{ animation:none !important; } .zpf-dot{ animation:none !important; } }
@media (max-width: 560px){ .zpf-live{ left:-10px; } .zpf-chip{ right:-4px; } }
@media (max-width: 420px){ .zpf-live, .zpf-chip{ display:none; } }

/* archived pill icon (top float) */
.zpf-live svg{ width:14px; height:14px; color: var(--brand); flex:0 0 auto; }

/* ============================================================
   ERP — "module suite" panel (replaces the repeated dashboard shot)
   ============================================================ */
.modpanel{
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow: 0 40px 90px rgba(15,23,42,0.14), 0 10px 30px rgba(15,23,42,0.07);
}
.mp-bar{ height:34px; display:flex; align-items:center; gap:7px; padding:0 14px; background: var(--bg-mute); border-bottom:1px solid var(--line); }
.mp-bar i{ width:9px; height:9px; border-radius:50%; background:#CED7E6; }
.mp-bar .mp-addr{ margin-left:10px; font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.05em; color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:999px; padding:2px 12px; }
.mp-inner{ padding: 20px; }
.mp-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-tile{
  display:flex; gap:11px; align-items:flex-start; padding:14px; border-radius:13px;
  border:1px solid var(--line-soft); background: var(--bg-soft);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.mp-tile:hover{ border-color: var(--line); background:#fff; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.mp-ic{ flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); color: var(--brand); }
.mp-ic svg{ width:19px; height:19px; }
.mp-tile b{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; letter-spacing:-0.01em; color: var(--navy); }
.mp-tile span{ display:block; margin-top:3px; font-size:11.5px; line-height:1.4; color: var(--ink-3); }
.mp-more{ margin-top:14px; text-align:center; font-size:12.5px; color: var(--ink-2); }
.mp-more span{ color: var(--brand); font-weight:700; }
@media (max-width: 520px){ .mp-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   ERP — integration constellation (hub + orbiting module tiles)
   ============================================================ */
.erp-lite .erp-visual{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
.erp-orbit{ position:relative; width:100%; max-width:460px; aspect-ratio:1/1; }

/* dashed orbit rings */
.orb-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:50%; border:1.5px dashed #CBD8E8;
}
.orb-ring.r1{ width:98%; height:98%; opacity:.7; animation: orbspin 70s linear infinite; }
.orb-ring.r2{ width:60%; height:60%; opacity:.55; animation: orbspin 52s linear infinite reverse; }
@keyframes orbspin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

/* center hub */
.orb-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:118px; height:118px; border-radius:50%; background:#fff; display:grid; place-items:center; z-index:2;
  box-shadow: 0 22px 50px rgba(15,23,42,0.16), 0 0 0 9px rgba(255,255,255,0.75), 0 0 0 10px #EAF1F8;
}
.orb-hub::before{
  content:""; position:absolute; inset:-13px; border-radius:50%;
  border:1px solid rgba(3,105,161,0.16); animation: hubpulse 3.4s ease-in-out infinite;
}
@keyframes hubpulse{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.05); opacity:.45; } }
.orb-hub img{ width:46px; height:auto; display:block; }

/* module tiles */
.orb-tile{
  position:absolute; transform:translate(-50%,-50%); z-index:3;
  width: clamp(46px, 12%, 58px); aspect-ratio:1/1; border-radius:16px;
  background:#fff; border:1px solid var(--line); box-shadow: 0 12px 28px rgba(15,23,42,0.10);
  display:grid; place-items:center; color: var(--brand);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.orb-tile svg{ width:45%; height:45%; }
.orb-tile:hover{ box-shadow: 0 18px 38px rgba(3,105,161,0.20); border-color:#BDD3E8; transform:translate(-50%,-50%) scale(1.08); }
.orb-tile.t1{ left:24%; top:24%; } .orb-tile.t2{ left:50%; top:15%; } .orb-tile.t3{ left:76%; top:24%; }
.orb-tile.t4{ left:13%; top:50%; } .orb-tile.t5{ left:87%; top:50%; }
.orb-tile.t6{ left:24%; top:76%; } .orb-tile.t7{ left:50%; top:85%; } .orb-tile.t8{ left:76%; top:76%; }

.orb-cap{ font-family:'Space Grotesk',sans-serif; font-size:14.5px; color: var(--ink-3); text-align:center; }
.orb-cap strong{ color: var(--navy); font-weight:700; }

@media (prefers-reduced-motion: reduce){ .orb-ring, .orb-hub::before{ animation:none !important; } }
@media (max-width: 520px){ .erp-orbit{ max-width:360px; } }

/* ---- constellation polish: connectors, glow, hover labels, depth ---- */
.erp-orbit::before{
  content:""; position:absolute; inset:-6%; z-index:0; border-radius:50%;
  background: radial-gradient(circle at 50% 46%, rgba(3,105,161,0.12), rgba(14,165,233,0.05) 42%, transparent 70%);
}
.orb-links{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.orb-links g{ animation: olflow 2.6s linear infinite; }
@keyframes olflow{ to{ stroke-dashoffset:-7.6; } }

.orb-ring.r1{ opacity:.55; } .orb-ring.r2{ opacity:.4; }

/* richer hub */
.orb-hub{ background: radial-gradient(circle at 50% 38%, #ffffff, #F5FAFE); }

/* hover reveals the module name */
.orb-tile::after{
  content: attr(data-m); position:absolute; top:calc(100% + 8px); left:50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--navy-ink); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.01em; white-space:nowrap; padding:4px 9px; border-radius:7px;
  box-shadow: 0 8px 18px rgba(15,23,42,0.18); opacity:0; pointer-events:none;
  transition: opacity .2s var(--ease), transform .2s var(--ease); z-index:5;
}
.orb-tile:hover::after{ opacity:1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce){ .orb-links g{ animation:none !important; } }

/* ---- constellation premium pass: live core ring + auto-spotlight labels ---- */
/* hub: cleaner frame + rotating conic "core" ring (less generic) */
.orb-hub{ box-shadow: 0 22px 50px rgba(15,23,42,0.16), 0 0 0 7px rgba(255,255,255,0.85); }
.orb-hub::before{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:0;
  background: conic-gradient(from 0deg, rgba(3,105,161,0) 0deg, rgba(3,105,161,0.65) 62deg, rgba(14,165,233,0.18) 140deg, rgba(3,105,161,0) 215deg, rgba(3,105,161,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: coreSpin 6s linear infinite;
}
@keyframes coreSpin{ to{ transform: rotate(360deg); } }

/* auto-spotlight: each module lights up + reveals its label, one at a time */
.orb-tile{ animation: tileCycle 16s ease-in-out infinite; }
@keyframes tileCycle{
  0%,9%   { border-color: var(--accent); background: rgba(3,105,161,0.07); box-shadow:0 18px 40px rgba(3,105,161,0.22); transform: translate(-50%,-50%) scale(1.1); }
  14%,100%{ border-color: var(--line); background:#fff; box-shadow:0 12px 28px rgba(15,23,42,0.10); transform: translate(-50%,-50%) scale(1); }
}
.orb-tile::after{ animation: labelCycle 16s ease-in-out infinite; }
@keyframes labelCycle{
  0%,9%   { opacity:1; transform: translateX(-50%) translateY(0); }
  14%,100%{ opacity:0; transform: translateX(-50%) translateY(4px); }
}
.orb-tile.t1,.orb-tile.t1::after{ animation-delay:0s; }
.orb-tile.t2,.orb-tile.t2::after{ animation-delay:2s; }
.orb-tile.t3,.orb-tile.t3::after{ animation-delay:4s; }
.orb-tile.t4,.orb-tile.t4::after{ animation-delay:6s; }
.orb-tile.t5,.orb-tile.t5::after{ animation-delay:8s; }
.orb-tile.t6,.orb-tile.t6::after{ animation-delay:10s; }
.orb-tile.t7,.orb-tile.t7::after{ animation-delay:12s; }
.orb-tile.t8,.orb-tile.t8::after{ animation-delay:14s; }

/* hover pauses the cycle and shows this module */
.orb-tile:hover{ animation:none; border-color:#BDD3E8; background:#fff; box-shadow:0 18px 38px rgba(3,105,161,0.20); transform: translate(-50%,-50%) scale(1.1); }
.orb-tile:hover::after{ animation:none; opacity:1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce){
  .orb-tile, .orb-tile::after, .orb-hub::before, .orb-links g, .orb-ring{ animation:none !important; }
}

/* ============================================================
   PLATFORMS — scroll-driven device morph (desktop → tablet → mobile)
   ============================================================ */
.pf-scroll{ padding:0; background: var(--bg-soft); }
.pf-track{ position:relative; height: 300vh; }
.pf-sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; }
.pf-inner{ display:grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px,5vw,72px); align-items:center; width:100%; }

/* left copy + step list */
.pf-copy .eyebrow{ margin-bottom: 18px; }
.pf-copy .h2{ margin-bottom: 16px; }
.pf-lead{ font-size: clamp(16px,1.3vw,18px); color: var(--ink-2); line-height:1.55; max-width: 380px; }
.pf-steps{ list-style:none; margin: 30px 0 0; padding:0; display:grid; gap: 8px; }
.pf-steps li{
  display:grid; grid-template-columns: 42px 1fr; gap:13px; align-items:start;
  padding: 14px 16px; border-radius:14px; border:1px solid transparent;
  opacity:.45; transition: opacity .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.pf-si{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color: var(--brand);
  background:#fff; border:1px solid var(--line); }
.pf-si svg{ width:20px; height:20px; }
.pf-steps b{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color: var(--navy); }
.pf-steps span{ display:block; margin-top:3px; font-size:13.5px; line-height:1.5; color: var(--ink-2); }
/* active step */
.pf-scroll[data-stage="0"] li[data-s="0"],
.pf-scroll[data-stage="1"] li[data-s="1"],
.pf-scroll[data-stage="2"] li[data-s="2"]{
  opacity:1; background:#fff; border-color: var(--line); box-shadow: 0 12px 30px rgba(15,23,42,0.07);
}
.pf-scroll[data-stage="0"] li[data-s="0"] .pf-si,
.pf-scroll[data-stage="1"] li[data-s="1"] .pf-si,
.pf-scroll[data-stage="2"] li[data-s="2"] .pf-si{
  background: var(--brand); color:#fff; border-color: var(--brand);
}

/* device stage */
.pf-stage{ position:relative; height: min(72vh, 560px); }
.pf-dev{
  position:absolute; inset:0; margin:auto; display:grid; place-items:center;
  opacity:0; transform: scale(.9) translateY(16px); pointer-events:none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.pf-scroll[data-stage="0"] .pf-desktop,
.pf-scroll[data-stage="1"] .pf-tablet,
.pf-scroll[data-stage="2"] .pf-mobile{ opacity:1; transform: none; }

/* desktop / browser frame */
.pfd-browser{ width: min(94%, 620px); border-radius:14px; overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow: 0 40px 90px rgba(15,23,42,0.18); }
.pfd-bar{ height:32px; display:flex; align-items:center; gap:6px; padding:0 13px; background: var(--bg-mute); border-bottom:1px solid var(--line); }
.pfd-bar i{ width:9px; height:9px; border-radius:50%; background:#CED7E6; }
.pfd-addr{ margin-left:10px; font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.05em; color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:999px; padding:2px 12px; }
.pfd-browser img{ display:block; width:100%; height:auto; }

/* tablet frame */
.pfd-tablet{ width: min(70%, 480px); padding:14px; border-radius:26px; background: #0F172A;
  box-shadow: 0 40px 90px rgba(15,23,42,0.22); }
.pfd-tablet img{ display:block; width:100%; height:auto; border-radius:10px; }

/* phone frame */
.pfd-phone{ position:relative; width: min(46%, 250px); padding:9px; border-radius:34px; background:#0F172A;
  box-shadow: 0 40px 90px rgba(15,23,42,0.24); }
.pfd-notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:38%; height:20px; background:#0F172A; border-radius:0 0 12px 12px; z-index:2; }
.pfd-phone img{ display:block; width:100%; height:auto; border-radius:26px; }

/* progress dots on the far right edge */
.pf-sticky::after{
  content:""; position:absolute; right: clamp(14px,3vw,40px); top:50%; transform:translateY(-50%);
  width:6px; height:96px; border-radius:999px;
  background: linear-gradient(var(--line) 0 100%);
}

/* fallback: no sticky effect on small screens — stack devices normally */
@media (max-width: 860px){
  .pf-track{ height:auto; }
  .pf-sticky{ position:static; height:auto; padding: clamp(60px,10vw,90px) 0; }
  .pf-inner{ grid-template-columns: 1fr; gap: 30px; }
  .pf-stage{ height:auto; display:grid; gap:26px; }
  .pf-dev{ position:static; inset:auto; opacity:1; transform:none; }
  .pf-sticky::after{ display:none; }
  .pf-steps li{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .pf-dev{ transition:none; }
}

/* ---- platforms v2: centered layout, step indicator, slide + outline-morph, shorter dwell ---- */
.pf-track{ height: 230vh; }                 /* shorter dwell */
.pf-sticky{ display:block; }
.pf-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; text-align:center; gap: clamp(18px,2.5vw,30px); }

/* centered header + step indicator (titles only) */
.pf-head{ max-width: 640px; }
.pf-head .h2{ margin-top: 14px; }
.pf-lead{ margin: 14px auto 0; max-width: 460px; }
.pf-steps{ display:inline-flex; justify-content:center; gap: clamp(14px,3vw,40px); margin-top: 22px; }
.pf-step{ position:relative; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size: clamp(13px,1.1vw,15px);
  color: var(--ink-3); padding-bottom: 9px; white-space:nowrap; transition: color .3s var(--ease); }
.pf-step::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background: var(--accent); transform: scaleX(0); transition: transform .35s var(--ease); }
.pf-scroll[data-stage="0"] .pf-step[data-s="0"],
.pf-scroll[data-stage="1"] .pf-step[data-s="1"],
.pf-scroll[data-stage="2"] .pf-step[data-s="2"]{ color: var(--navy); }
.pf-scroll[data-stage="0"] .pf-step[data-s="0"]::after,
.pf-scroll[data-stage="1"] .pf-step[data-s="1"]::after,
.pf-scroll[data-stage="2"] .pf-step[data-s="2"]::after{ transform: scaleX(1); }

/* stage */
.pf-stage{ position:relative; width:100%; max-width: 760px; height: min(50vh, 440px); }

/* morphing outline behind the device (transitions its silhouette per stage) */
.pf-morph{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0;
  border:2px dashed rgba(3,105,161,0.22); background: rgba(3,105,161,0.02);
  transition: width .6s var(--ease), height .6s var(--ease), border-radius .6s var(--ease); }
.pf-scroll[data-stage="0"] .pf-morph{ width:min(96%,640px); height:64%; border-radius:18px; }
.pf-scroll[data-stage="1"] .pf-morph{ width:min(70%,470px); height:88%; border-radius:26px; }
.pf-scroll[data-stage="2"] .pf-morph{ width:min(38%,240px); height:100%; border-radius:36px; }

/* SLIDE transition: current centered, past slid up, future waiting below */
.pf-dev{ z-index:1; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.pf-scroll[data-stage="0"] .pf-desktop{ opacity:1; transform:none; }
.pf-scroll[data-stage="0"] .pf-tablet,
.pf-scroll[data-stage="0"] .pf-mobile{ opacity:0; transform: translateY(50px) scale(.96); }
.pf-scroll[data-stage="1"] .pf-desktop{ opacity:0; transform: translateY(-50px) scale(.96); }
.pf-scroll[data-stage="1"] .pf-tablet{ opacity:1; transform:none; }
.pf-scroll[data-stage="1"] .pf-mobile{ opacity:0; transform: translateY(50px) scale(.96); }
.pf-scroll[data-stage="2"] .pf-desktop,
.pf-scroll[data-stage="2"] .pf-tablet{ opacity:0; transform: translateY(-50px) scale(.96); }
.pf-scroll[data-stage="2"] .pf-mobile{ opacity:1; transform:none; }

@media (max-width: 860px){
  .pf-morph{ display:none; }
  .pf-inner{ height:auto; }
}

/* ---- platforms v3: no morph, more dwell, fixed phone, progress bar, glow ---- */
.pf-morph{ display:none !important; }        /* outline morph removed */
.pf-track{ height: 300vh; }                  /* more dwell so stages don't flip too fast */

/* scroll-progress bar under the steps — signals there's more to scroll */
.pf-progress{ margin: 16px auto 0; width: clamp(160px, 20vw, 240px); height: 3px; border-radius: 2px;
  background: rgba(3,105,161,0.12); overflow:hidden; }
.pf-progress span{ display:block; height:100%; width:100%; background: var(--accent); border-radius:2px;
  transform-origin:left; transform: scaleX(var(--pf-p, 0)); transition: transform .12s linear; }

/* subtle glow under the device for depth */
.pf-stage::before{ content:""; position:absolute; inset:-8% 8%; z-index:0; border-radius:50%;
  background: radial-gradient(ellipse at 50% 46%, rgba(3,105,161,0.08), transparent 66%); }

/* phone: size by height so the tall screenshot no longer stretches past the stage */
.pfd-phone{ width:auto; height: min(56vh, 470px); aspect-ratio: 9 / 19; padding: 8px; }
.pfd-phone img{ width:100%; height:100%; object-fit: cover; object-position: top center; border-radius: 27px; }
.pfd-notch{ top: 8px; }

@media (max-width: 860px){
  .pfd-phone{ height: min(52vh, 400px); }
}

/* ---- platforms → tab-switch (no scroll-jacking) ---- */
.pf-track{ height:auto; }
.pf-sticky{ position:static; height:auto; display:block; padding: clamp(60px,9vw,110px) 0; overflow:visible; }
.pf-step{ cursor:pointer; background:none; border:0; }
.pf-step:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:5px; }

/* ---- Web & Desktop: 3D-perspective MacBook-style laptop ---- */
.pfd-laptop{
  position:relative; width: min(92%, 560px);
  transform: perspective(1800px) rotateX(6deg) rotateY(-14deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 34px 44px rgba(15,23,42,0.30));
  animation: llFloat 6.5s ease-in-out infinite;
}
@keyframes llFloat{
  0%,100%{ transform: perspective(1800px) rotateX(6deg) rotateY(-14deg) translateY(0); }
  50%    { transform: perspective(1800px) rotateX(6deg) rotateY(-14deg) translateY(-9px); }
}
.ll-screen{ position:relative; background:#0B1220; border-radius:16px 16px 5px 5px; padding:10px 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); }
.ll-cam{ position:absolute; top:4.5px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#212B3B; }
.ll-screen img{ display:block; width:100%; height:auto; border-radius:6px; }
.ll-screen::after{ content:""; position:absolute; inset:10px 10px 12px; border-radius:6px; pointer-events:none;
  background: linear-gradient(118deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 42%); }
.ll-base{ position:relative; width:112%; left:-6%; height:15px; margin-top:-2px;
  background: linear-gradient(#E4EAF1 0%, #C2CCD9 55%, #9CA9BB 100%);
  border-radius:3px 3px 11px 11px; box-shadow: 0 12px 18px rgba(15,23,42,0.20); }
.ll-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:15%; height:6px;
  background: linear-gradient(#9CA9BB, #BAC4D2); border-radius:0 0 10px 10px; }

@media (max-width: 560px){
  .pfd-laptop{ width: min(96%, 420px); animation:none;
    transform: perspective(1400px) rotateX(4deg) rotateY(-8deg); }
}
@media (prefers-reduced-motion: reduce){
  .pfd-laptop{ animation:none; }
}

/* ---- laptop: pointer-driven 3D parallax (more drama) ---- */
.pfd-laptop{
  transform: perspective(1500px) rotateX(var(--rx, 5deg)) rotateY(var(--ry, -11deg));
  transition: transform .28s ease-out;
  animation: none;
  will-change: transform;
}
@media (max-width: 560px){
  .pfd-laptop{ transform: perspective(1400px) rotateX(4deg) rotateY(-8deg); }
}

/* ============================================================
   PLATFORMS v4 — device lineup that assembles one-by-one (GIF-like)
   ============================================================ */
.pf-inner{ display:block; height:auto; text-align:center; }
.pf-lineup{ display:flex; align-items:flex-end; justify-content:center;
  gap: clamp(4px, 1.4vw, 20px); margin-top: clamp(34px, 5vw, 60px); }

/* override the old absolute stacked .pf-dev — now inline lineup items */
.pf-lineup .pf-dev{
  position:relative; inset:auto; margin:0; opacity:0; transform:none;
  display:flex; flex-direction:column; align-items:center; flex:0 0 auto; will-change: transform, opacity;
}
.pf-lineup .pf-desktop{ width: clamp(280px, 46%, 540px); z-index:1; }
.pf-lineup .pf-tablet{ width: clamp(150px, 24%, 270px); z-index:2; margin: 0 -1%; }
.pf-lineup .pf-mobile{ width: clamp(70px, 12%, 130px); z-index:3; }

/* devices fill their lineup slot */
.pf-lineup .pfd-laptop{ width:100%; }
.pf-lineup .pfd-tablet{ width:100%; padding:10px; border-radius:22px; }
.pf-lineup .pfd-phone{ width:100%; height:auto; aspect-ratio: 9/19; padding:6px; border-radius:26px; }
.pf-lineup .pfd-phone img{ width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:22px; }
.pf-lineup .pfd-notch{ top:6px; }

.pf-dev figcaption{ margin-top: 16px; font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size: clamp(11px,1vw,13px); letter-spacing:.02em; color: var(--ink-3); }

/* entrance: desktop appears (from centre) → pushes left, tablet pops centre, mobile slides in right */
@keyframes pfDeskIn{ 0%{opacity:0; transform: translateX(120px) scale(.92);} 42%{opacity:1;} 100%{opacity:1; transform: translateX(0) scale(1);} }
@keyframes pfTabIn { 0%{opacity:0; transform: translateY(40px) scale(.78);} 100%{opacity:1; transform:none;} }
@keyframes pfMobIn { 0%{opacity:0; transform: translateX(46px) scale(.85);} 100%{opacity:1; transform:none;} }
.pf-lineup.is-in .pf-desktop{ animation: pfDeskIn .8s var(--ease) .05s both; }
.pf-lineup.is-in .pf-tablet { animation: pfTabIn  .6s var(--ease) .70s both; }
.pf-lineup.is-in .pf-mobile { animation: pfMobIn  .55s var(--ease) 1.12s both; }

@media (max-width: 620px){
  .pf-lineup{ gap:2px; }
  .pf-lineup .pf-desktop{ width: 58%; }
  .pf-lineup .pf-tablet{ width: 30%; }
  .pf-lineup .pf-mobile{ width: 16%; }
  .pfd-laptop{ animation:none; }
}
@media (prefers-reduced-motion: reduce){
  .pf-lineup .pf-dev{ opacity:1 !important; animation:none !important; }
}

/* ============================================================
   PLATFORMS v5 — clean benefit-led (no gimmick)
   ============================================================ */
.plat2{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px,5vw,74px); align-items:center; }
.plat2-list{ list-style:none; margin: 28px 0 0; padding:0; display:grid; gap: 18px; }
.plat2-list li{ display:flex; gap:14px; align-items:flex-start; }
.p2-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  color: var(--brand); background:#fff; border:1px solid var(--line); box-shadow: 0 6px 16px rgba(15,23,42,0.06); }
.p2-ic svg{ width:21px; height:21px; }
.plat2-list b{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color: var(--navy); }
.plat2-list li span{ display:block; margin-top:2px; font-size:14.5px; color: var(--ink-2); line-height:1.5; }

.plat2-visual{ display:flex; justify-content:center; align-items:center; }
.plat2-visual .pfd-laptop{ width: min(100%, 560px); animation:none; }

@media (max-width: 860px){
  .plat2{ grid-template-columns: 1fr; gap: 34px; }
  .plat2-visual{ order:-1; }
}

/* platforms: phone overlapping the laptop (composed web + mobile shot) */
.plat2-devices{ position:relative; width: min(100%, 560px); }
.plat2-devices .pfd-laptop{ width:100%; animation:none;
  transform: perspective(2000px) rotateX(3deg) rotateY(-5deg); }
.plat2-phone{ position:absolute; right:-5%; bottom:-11%; z-index:3;
  width: min(29%, 152px); height:auto; aspect-ratio: 9/19; padding:6px;
  box-shadow: 0 34px 62px rgba(15,23,42,0.32); }
.plat2-phone img{ width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:22px; }
.plat2-phone .pfd-notch{ top:6px; }
@media (max-width: 520px){ .plat2-phone{ width:34%; right:-2%; bottom:-8%; } }

/* ============================================================
   PLATFORMS v6 — centered gradient hero (headline + CTA + shot + phone)
   ============================================================ */
.pf-hero{
  position:relative; overflow:hidden; text-align:center;
  padding: clamp(64px, 9vw, 120px) 0 0;   /* screenshot anchors to the bottom */
  background: linear-gradient(118deg, #2F6BFF 0%, #6D3AE0 30%, #B23BD0 55%, #F0497F 80%, #FF7A4D 100%);
}
.pf-hero-copy{ position:relative; z-index:2; }
.pf-kicker{ display:inline-block; font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,0.82); }
.pf-hero-h{ margin-top:16px; font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff;
  font-size: clamp(40px, 6.2vw, 82px); line-height:1.02; letter-spacing:-0.035em; }
.pf-hero-cta{
  display:inline-flex; align-items:center; margin-top: clamp(26px,3vw,40px);
  padding: 16px 32px; border-radius:999px; background:#fff; color:#0F172A;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16.5px; text-decoration:none;
  box-shadow: 0 14px 34px rgba(0,0,0,0.20);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pf-hero-cta:hover{ transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0,0,0,0.28); }

/* product screenshot anchored to the section bottom */
.pf-hero-shot{ position:relative; z-index:1; width: min(1120px, 92%); margin: clamp(44px,5vw,68px) auto 0; }
.pf-hero-app{ display:block; width:100%; height:auto; border-radius: 16px 16px 0 0;
  border:1px solid rgba(255,255,255,0.55); border-bottom:0;
  box-shadow: 0 -6px 40px rgba(0,0,0,0.18), 0 24px 70px rgba(0,0,0,0.28); }

/* phone overlapping the screenshot's bottom-right */
.pf-hero-phone{ position:absolute; right: clamp(-6px, 1vw, 24px); bottom: -6%; z-index:3;
  width: min(19%, 210px); height:auto; aspect-ratio: 9/19; padding:7px;
  box-shadow: 0 40px 70px rgba(0,0,0,0.34); }
.pf-hero-phone img{ width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:24px; }
.pf-hero-phone .pfd-notch{ top:7px; }

@media (max-width: 620px){
  .pf-hero-phone{ width:30%; right:-2%; bottom:-4%; }
}

/* ---- platforms hero v7: brand gradient, glass frames, bottom-crop, wider/shorter phone ---- */
.pf-hero{ background: linear-gradient(120deg, #0C4A6E 0%, #0369A1 28%, #3730A3 56%, #0EA5E9 84%, #38BDF8 100%); }

/* glass frame around the (bottom-cropped) screenshot */
.pf-hero-frame{
  background: rgba(255,255,255,0.22); padding: 10px 10px 0; border-radius: 22px 22px 0 0;
  border:1px solid rgba(255,255,255,0.55); border-bottom:0;
  box-shadow: 0 -6px 40px rgba(0,0,0,0.14), 0 26px 72px rgba(0,0,0,0.30);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pf-hero-crop{ aspect-ratio: 12 / 5; overflow:hidden; border-radius: 13px 13px 0 0; }   /* crop from the bottom */
.pf-hero-app{ width:100%; height:100%; object-fit:cover; object-position: top center;
  border:0 !important; border-radius:0; box-shadow:none; }

/* wider, half-height (top-trimmed) glass phone */
.pf-hero-phone{
  width: min(23%, 264px); aspect-ratio: 9 / 10; height:auto;
  border-radius: 32px 32px 0 0; padding: 8px 8px 0; bottom: 0; right: clamp(-4px, 1vw, 26px);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.5), 0 40px 70px rgba(0,0,0,0.34);
}
.pf-hero-phone img{ width:100%; height:100%; object-fit:cover; object-position: top center; border-radius: 26px 26px 0 0; }
.pf-hero-phone .pfd-notch{ top:8px; }

@media (max-width: 620px){
  .pf-hero-crop{ aspect-ratio: 3 / 2; }
  .pf-hero-phone{ width:34%; right:-2%; }
}

/* phone: nudge right (ClickUp) + glossy BLACK-glass bezel (white ring would vanish on the light screenshot) */
.pf-hero-phone{
  right: clamp(-60px, -3.5vw, -20px);
  background: linear-gradient(152deg, #2A3543 0%, #141B27 46%, #0A0F17 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.22),   /* top glass sheen */
    inset 0 0 0 1px rgba(255,255,255,0.05),    /* thin inner rim */
    0 0 0 1px rgba(0,0,0,0.45),                /* subtle black outer edge */
    0 42px 72px rgba(0,0,0,0.42);              /* drop shadow */
}
.pf-hero-phone .pfd-notch{ background: #0A0F17; }

/* minimal device caption under the CTA */
.pf-devs{ margin-top: 20px; font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size: 13px; letter-spacing:.06em; color: rgba(255,255,255,0.72); }


/* soft seam: gently fade the bottom of the cropped screenshot so it doesn't end on a hard line */
.pf-hero-crop{ position:relative; }
.pf-hero-crop::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height: 24%;
  background: linear-gradient(to top, rgba(15,23,42,0.55), rgba(15,23,42,0.16) 45%, rgba(15,23,42,0));
  pointer-events:none;
}

/* rounded panel corners (all 4) — gradient block floats on the light page */
.pf-hero{ border-radius: clamp(26px, 3.6vw, 46px); }

/* float the gradient panel: inset from the page edges (white gaps on left/right + around) */
.pf-hero{ margin: clamp(14px, 1.8vw, 30px) clamp(10px, 1.4vw, 22px); }

/* ============================================================
   MODULES v2 — industry matrix (ClickUp-style grid)
   ============================================================ */
.modx{ overflow:hidden; }
.modx-head{ max-width: 720px; margin-inline:auto; text-align:center; }
.modx-head .eyebrow{ justify-content:center; }
.modx-h{ margin-top:16px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(30px,4.4vw,54px); line-height:1.03; letter-spacing:-0.035em; color: var(--ink); }
.modx-dim{ color: var(--ink-3); }
.modx-sub{ margin: 18px auto 0; max-width: 520px; font-size: clamp(15px,1.3vw,18px); color: var(--ink-2); line-height:1.55; }

/* the grid */
.modx-canvas{ position:relative; max-width:1320px; margin: clamp(38px,5vw,64px) auto 0; }
/* one continuous vertical-line layer: runs through the whole matrix AND a touch past
   the top & bottom, so the extensions are literally the same rails (same colour/depth),
   fading only at the outer tips (ClickUp detail). The grid itself only draws horizontals. */
.modx-canvas::before{
  content:""; position:absolute; left:0; right:0; top:-42px; bottom:-42px; z-index:0; pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    repeating-linear-gradient(to right, var(--line-soft) 0 1px, transparent 1px calc(100%/10)),
    linear-gradient(to right, transparent calc(100% - 1px), var(--line-soft) 0);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%),
    linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%),
    linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
          mask-composite: intersect;
}
.modx-grid{
  position:relative; z-index:1; margin:0; max-width:none; width:100%;
  display:grid; grid-template-columns: repeat(10, 1fr); grid-auto-rows: clamp(80px, 8.5vw, 104px);
  grid-auto-flow: row dense;
  border-top:1px solid var(--line-soft);
  /* fade all four edges so the matrix feels boundless (horizontals + content only;
     verticals live on the continuous .modx-canvas::before layer) */
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent),
    linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:
    linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent),
    linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* plain sector cell */
.mx-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding: 12px 6px; text-align:center; color: var(--ink-3); position:relative;
  border-bottom:1px solid var(--line-soft);
  transition: color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.mx-ic svg{ width:23px; height:23px; }
.mx-cell > span:last-child{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:12.5px; letter-spacing:-0.01em; color: var(--ink-2); line-height:1.2; }
.mx-cell:hover{ background:#fff; color: var(--brand); box-shadow: inset 0 0 0 1.6px var(--navy); z-index:3; }
.mx-cell:hover > span:last-child{ color: var(--navy); }

/* flagship = tinted grid cell (part of the chequered matrix, not a floating card) */
.mx-flag{
  position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  margin:0; padding: 16px 14px 15px; border-radius:0; text-decoration:none; box-shadow:none;
  /* opaque interior hides the continuous rail that would otherwise cross the flagship's centre;
     transparent side borders let the flagship's own edge rails show through */
  background: var(--bg); background-clip: padding-box;
  border-left:1px solid transparent; border-right:1px solid transparent;
  border-bottom:1px solid var(--line-soft); overflow:hidden;
}
.mx-flag::before{ content:""; position:absolute; inset:0; z-index:0; transition: opacity .3s var(--ease);
  background: radial-gradient(120% 88% at 50% 24%, rgba(3,105,161,0.16), rgba(14,165,233,0.05) 55%, transparent 78%); }
.mx-art, .mx-flag-b{ position:relative; z-index:1; }
.mf-retail::before{ background: radial-gradient(120% 88% at 50% 24%, rgba(14,165,233,0.18), rgba(56,189,248,0.05) 55%, transparent 80%); }
.mf-mfg::before   { background: radial-gradient(120% 88% at 50% 24%, rgba(37,99,235,0.16), rgba(59,130,246,0.05) 55%, transparent 80%); }
.mf-con::before   { background: radial-gradient(120% 88% at 50% 24%, rgba(79,70,229,0.16), rgba(99,102,241,0.05) 55%, transparent 80%); }
.mf-svc::before   { background: radial-gradient(120% 88% at 50% 24%, rgba(124,58,237,0.15), rgba(167,139,250,0.06) 55%, transparent 80%); }
.mx-flag:hover::before{ opacity:.75; }
.mx-art{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; width:100%; padding: 2px 0 11px; }
.mx-flag-b{ display:flex; align-items:center; justify-content:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: clamp(15px,1.5vw,19px); letter-spacing:-0.02em; color: var(--navy); }
/* glossy "app-logo" icon tiles — one blue-family tone per flagship */
.mx-flag-ic{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:#fff; flex:0 0 auto;
  background: linear-gradient(145deg,#0EA5E9,#0369A1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 6px 14px rgba(3,105,161,0.30); }
.mx-flag-ic svg{ width:19px; height:19px; }
.mf-retail .mx-flag-ic{ background: linear-gradient(145deg,#38BDF8,#0EA5E9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 14px rgba(14,165,233,0.34); }
.mf-mfg .mx-flag-ic{ background: linear-gradient(145deg,#3B82F6,#1D4ED8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 14px rgba(29,78,216,0.32); }
.mf-con .mx-flag-ic{ background: linear-gradient(145deg,#6366F1,#4338CA); box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 6px 14px rgba(67,56,202,0.32); }
.mf-svc .mx-flag-ic{ background: linear-gradient(145deg,#A78BFA,#7C3AED); box-shadow: inset 0 1px 0 rgba(255,255,255,0.44), 0 6px 14px rgba(124,58,237,0.32); }

/* closing CTA under the matrix */
.modx-cta{ margin: clamp(30px,3.4vw,46px) auto 0; text-align:center; font-size: clamp(14px,1.2vw,16px); color: var(--ink-2); }
.modx-cta a{ color: var(--brand); font-weight:600; text-decoration:none; white-space:nowrap; }
.modx-cta a:hover{ color: var(--navy); }
.modx-cta a span{ display:inline-block; transition: transform .2s var(--ease); }
.modx-cta a:hover span{ transform: translateX(4px); }

/* shared white mini-mockup card sitting on the tinted cell */
.fc{ width:100%; max-width:186px; background:#fff; border:1px solid var(--line); border-radius:11px;
  box-shadow: 0 12px 26px rgba(15,23,42,0.10); padding:10px 11px; display:flex; flex-direction:column; gap:6px; }
.fc-top{ display:flex; align-items:center; justify-content:space-between; }
.fc-tag{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10.5px; color: var(--navy); }
.fc-sub{ font-family:'Space Grotesk',sans-serif; font-size:9.5px; color: var(--ink-3); }
.fc-chip{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:8.5px; color: var(--brand); background: rgba(3,105,161,0.10); border-radius:999px; padding:2px 7px; }
.fc-chip.ok{ color:#16A34A; background:#DCFCE7; }
.fc-l{ height:6px; border-radius:3px; background: var(--bg-mute); }
.fc .w60{width:60%}.fc .w55{width:55%}.fc .w50{width:50%}.fc .w45{width:45%}.fc .w40{width:40%}.fc .w35{width:35%}
/* retail invoice */
.fc-item{ display:flex; align-items:center; gap:8px; }
.fc-dot{ width:8px; height:8px; border-radius:3px; flex:0 0 auto; }
.fc-dot.d1{ background:#0EA5E9 } .fc-dot.d2{ background:#0369A1 } .fc-dot.d3{ background:#38BDF8 }
.fc-p{ margin-left:auto; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:9.5px; color: var(--ink-2); }
.fc-tot{ display:flex; align-items:center; gap:6px; margin-top:3px; padding-top:8px; border-top:1px solid var(--line-soft); }
.fc-tot > span{ font-size:9.5px; color: var(--ink-3); } .fc-tot b{ font-family:'Space Grotesk',sans-serif; font-size:12px; color: var(--navy); }
.fc-paid{ margin-left:auto; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:8.5px; color:#16A34A; background:#DCFCE7; border-radius:999px; padding:2px 7px; }
/* manufacturing */
.fc-sq{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
.fc-sq.s1{ background: linear-gradient(140deg,#0EA5E9,#0369A1) } .fc-sq.s2{ background: linear-gradient(140deg,#38BDF8,#0284C7) }
.fc-progress{ display:flex; align-items:center; gap:8px; margin-top:3px; }
.fc-bar{ flex:1; height:8px; border-radius:5px; background: var(--bg-mute); overflow:hidden; }
.fc-bar i{ display:block; height:100%; width:72%; background: linear-gradient(90deg,#0369A1,#0EA5E9); border-radius:5px; }
.fc-pct{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:9.5px; color: var(--brand); }
/* construction gantt */
.fc-g{ display:flex; align-items:center; gap:7px; }
.fc-glab{ width:16px; height:5px; border-radius:3px; background: var(--bg-mute); flex:0 0 auto; }
.fc-gbar{ height:8px; border-radius:5px; }
.fc-gbar.g1{ width:58%; background: linear-gradient(90deg,#0EA5E9,#38BDF8); }
.fc-gbar.g2{ width:46%; margin-left:16%; background: linear-gradient(90deg,#0369A1,#0EA5E9); }
.fc-gbar.g3{ width:36%; margin-left:30%; background: linear-gradient(90deg,#22D3EE,#0EA5E9); }
/* services appointments */
.fc-appt{ display:flex; align-items:center; gap:8px; }
.fc-t{ font-family:'Space Grotesk',sans-serif; font-size:9px; color: var(--ink-3); width:28px; flex:0 0 auto; }
.fc-av{ width:16px; height:16px; border-radius:50%; flex:0 0 auto; }
.fc-av.a1{ background: linear-gradient(140deg,#0EA5E9,#0369A1) } .fc-av.a2{ background: linear-gradient(140deg,#38BDF8,#0284C7) } .fc-av.a3{ background: linear-gradient(140deg,#22D3EE,#0EA5E9) }

@media (max-width: 900px){
  .modx-grid{ grid-template-columns: repeat(6, 1fr); }
  .mx-flag{ grid-column: auto / span 2 !important; grid-row: auto / span 2 !important; }
}
@media (max-width: 560px){
  .modx-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   AI VISION — Acts 1+2 (sticky scroll story, ClickUp-style)
   ============================================================ */
.aihero{
  background:#fff; position:relative;
  /* same side gaps as the AI panel below so both edges line up; bottom corners only, fixed */
  --tgx: clamp(10px, 1.4vw, 22px);
  --trd: clamp(26px, 3.6vw, 46px);
  clip-path: inset(0 var(--tgx) 0 var(--tgx) round 0 0 var(--trd) var(--trd));
}
.aih-stage{ height:300vh; position:relative; }
.aih-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }

/* act-2 ambience (driven by JS opacity) */
.aih-bgfx{ position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 108%, rgba(56,189,248,0.30), rgba(129,140,248,0.16) 44%, rgba(255,255,255,0) 74%);
}
.aih-ghost{ position:absolute; left:50%; top:39%; transform:translateX(-50%); z-index:1; opacity:0; pointer-events:none;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight:700;
  font-size: clamp(44px, 8vw, 110px); letter-spacing:0.16em; color: rgba(30,58,138,0.10); white-space:nowrap;
}

/* Act 1 copy */
.aih-copy{ position:absolute; top:11vh; left:0; right:0; z-index:6; text-align:center; padding:0 20px; }
.aih-copy .eyebrow{ justify-content:center; }
.aih-h{ margin-top:16px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(36px, 5.4vw, 68px); line-height:1.04; letter-spacing:-0.035em; color: var(--ink); }
.aih-grad{ background: linear-gradient(92deg, #0EA5E9, #4F46E5 55%, #22D3EE); -webkit-background-clip:text; background-clip:text; color:transparent; }
.aih-ctas{ margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.aih-visor-home{ width:min(340px, 72vw); height:clamp(170px, 24vh, 240px); margin:5vh auto 0; }

/* face (outer sits at final position; inner slides up) */
.aih-face{ position:absolute; left:50%; bottom:-2px; width:clamp(230px, 24vw, 330px); transform:translateX(-50%); z-index:2; pointer-events:none; }
.aih-face-in{ transform:translateY(112%); will-change:transform; }
.aih-face-in svg, .aih-face-in img{ display:block; width:100%; height:auto; }
.aih-eyeline{ position:absolute; left:50%; top:23.3%; width:41%; aspect-ratio:320/110; transform:translate(-50%,-50%); }

/* visor */
.aih-visor{ position:absolute; left:0; top:0; width:340px; z-index:5; transform-origin:0 0; will-change:transform; pointer-events:none; }
.aih-visor svg{ display:block; width:100%; height:auto; filter: drop-shadow(0 20px 38px rgba(30,64,175,0.28)); }
.aih-visor-in{ animation: aihFloat 4.6s ease-in-out infinite; }
.aih-visor.landed .aih-visor-in{ animation:none; }
@keyframes aihFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

/* annotation tags */
.aih-tag{ position:absolute; z-index:4; opacity:0; pointer-events:none;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: clamp(11px,1vw,13.5px);
  letter-spacing:0.16em; color:#3A4A66; will-change:transform,opacity; }
.aih-tag::after{ content:""; position:absolute; top:58%; width:clamp(46px,6vw,84px); height:1.5px; background:#7C8DA8; }
.from-l::after{ left:calc(100% + 12px); transform-origin:left center; transform:rotate(20deg); }
.from-r::after{ right:calc(100% + 12px); transform-origin:right center; transform:rotate(-20deg); }
.aih-tag.t1{ left:11%; top:37%; }
.aih-tag.t2{ right:9%;  top:30%; }
.aih-tag.t3{ right:12%; bottom:29%; }
.aih-tag.t4{ left:12%;  bottom:25%; }

/* static fallback (mobile / reduced motion): composed final scene, no scroll-jack */
.aih-static .aih-stage{ height:auto; }
.aih-static .aih-sticky{ position:relative; height:auto; min-height:100vh; padding-bottom:0; }
.aih-static .aih-copy{ position:relative; top:auto; padding-top:12vh; }
.aih-static .aih-visor-home{ display:none; }
.aih-static .aih-face{ position:relative; left:auto; bottom:auto; margin:9vh auto 0; transform:none; }
.aih-static .aih-face-in{ transform:none; }
.aih-static .aih-bgfx, .aih-static .aih-ghost{ opacity:1; }
.aih-static .aih-ghost{ top:auto; bottom:34%; }
.aih-static .aih-tag{ opacity:1; }
@media (max-width:760px){
  .aih-tag.t1{ left:6%; top:44%; } .aih-tag.t2{ right:5%; top:40%; } .aih-tag.t3{ right:6%; bottom:22%; } .aih-tag.t4{ left:7%; bottom:18%; }
  .aih-tag::after{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .aih-visor-in{ animation:none; }
}

/* ============================================================
   AI VISION — Act 3 (dark capabilities, ClickUp-style)
   ============================================================ */
.section.dark.avx{
  --te: 0;                                   /* 0 = inset panel, 1 = full bleed */
  --tgy: clamp(14px, 1.8vw, 30px);
  --tgx: clamp(10px, 1.4vw, 22px);
  --trd: clamp(26px, 3.6vw, 46px);
  background:
    radial-gradient(90% 46% at 50% 0%, rgba(37,99,235,0.16), transparent 60%),
    radial-gradient(70% 40% at 50% 105%, rgba(14,165,233,0.10), transparent 65%),
    #04070E;
  clip-path: inset(
    calc(var(--tgy) * (1 - var(--te)))
    calc(var(--tgx) * (1 - var(--te)))
    round calc(var(--trd) * (1 - var(--te)))
  );
}
.avx .wrap{ position:relative; z-index:1; }

/* brand + hero */
.avx-head{ text-align:center; max-width:820px; margin-inline:auto; }
.avx-brandrow{ display:flex; align-items:center; justify-content:center; gap:12px; }
.avx-mark{ width:56px; display:block; filter: drop-shadow(0 0 18px rgba(56,189,248,0.55)); }
.avx-mark svg{ display:block; width:100%; height:auto; }
.avx-brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; letter-spacing:-0.02em; color:#fff; }
.avx-h{ margin-top:26px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(34px,4.8vw,64px); line-height:1.05; letter-spacing:-0.035em;
  background: linear-gradient(180deg,#FFFFFF 20%,#93A3B8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.avx-h em{ font-style:italic; }
.avx-sub{ margin:18px auto 0; max-width:560px; font-size:clamp(15px,1.3vw,18px); line-height:1.55; color:#AAB7C9; }
.avx-strip{ margin-top:30px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 22px;
  font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#8291A8; }
.avx-strip-label{ color:#55647C; }
.avx-strip span:not(.avx-strip-label){ display:inline-flex; align-items:center; gap:8px; }
.avx-strip span:not(.avx-strip-label)::before{ content:""; width:5px; height:5px; border-radius:50%; background:#38BDF8; opacity:0.75; }

/* hairline grids */
.avx-grid{ margin-top: clamp(44px,5vw,72px); display:grid; gap:1px; background: rgba(255,255,255,0.09);
  border:1px solid rgba(255,255,255,0.09); border-radius:2px; overflow:hidden; }
.avx-3{ grid-template-columns: repeat(3,1fr); }
.avx-6{ grid-template-columns: repeat(3,1fr); }
.avx-grid article{ background:#04070E; padding: clamp(22px,2.4vw,34px); display:flex; flex-direction:column; min-height: 230px; }
.avx-k{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-weight:600; font-size:12.5px; letter-spacing:0.2em; text-transform:uppercase; color:#93A3B8; }
.avx-grid p{ margin-top:12px; font-size:14.5px; line-height:1.6; color:#B9C4D4; max-width:34ch; }
.avx-mock{ margin-top:auto; padding-top:20px; }

/* mocks — shared */
.avx-mock .chk{ color:#34D399; font-weight:700; }
/* context feed */
.avx-feed .fr{ display:flex; align-items:center; gap:9px; padding:7px 10px; margin-top:6px; border:1px solid rgba(255,255,255,0.08);
  border-radius:8px; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; color:#C7D2E2; background:rgba(255,255,255,0.02); }
.avx-feed .fr i{ width:6px; height:6px; border-radius:50%; background:#64748B; flex:0 0 auto; }
.avx-feed .ok i{ background:#34D399; box-shadow:0 0 8px rgba(52,211,153,0.7); }
.avx-feed .warn i{ background:#FBBF24; box-shadow:0 0 8px rgba(251,191,36,0.6); }
/* model router */
.avx-models .mr{ display:flex; align-items:center; gap:7px; padding:7px 2px; font-family: ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11.5px; color:#94A3B8; border-bottom:1px solid rgba(255,255,255,0.06); }
.avx-models .mr:last-child{ border-bottom:none; }
.avx-models .mr b{ color:#E2E8F0; font-weight:600; }
.avx-models .arr{ color:#475569; }
.avx-models .chk{ margin-left:auto; }
/* automation key/values */
.avx-kv div{ display:flex; gap:14px; padding:6px 2px; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; }
.avx-kv .k{ color:#38BDF8; min-width:86px; }
.avx-kv .v{ color:#94A3B8; }
/* chat */
.avx-chat .cb{ max-width:85%; padding:8px 12px; border-radius:12px; font-size:12.5px; line-height:1.45; }
.avx-chat .in{ background:rgba(255,255,255,0.07); color:#D7DEE9; border-bottom-right-radius:4px; margin-left:auto; }
.avx-chat .out{ margin-top:8px; background:linear-gradient(120deg,rgba(14,165,233,0.28),rgba(79,70,229,0.28));
  border:1px solid rgba(56,189,248,0.25); color:#E8F2FC; border-bottom-left-radius:4px; margin-right:auto; }
/* document */
.avx-doc .dl{ display:block; height:6px; border-radius:3px; background:rgba(255,255,255,0.10); margin-top:8px; }
.avx-doc .w70{width:70%}.avx-doc .w55{width:55%}.avx-doc .w62{width:62%}
.avx-doc .dchips{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.avx-doc .dchips span{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; color:#C7D2E2;
  border:1px solid rgba(56,189,248,0.30); background:rgba(14,165,233,0.10); border-radius:999px; padding:4px 10px; }
.avx-doc .dchips b{ color:#34D399; }
/* sparkline */
.avx-spark svg{ display:block; width:100%; height:44px; }
.avx-spark .sp-label{ margin-top:10px; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; color:#94A3B8; }
.avx-spark .sp-label b{ color:#38BDF8; }
/* flow */
.avx-flow{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.avx-flow span{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; color:#C7D2E2;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03); border-radius:8px; padding:5px 10px; }
.avx-flow i{ color:#475569; font-style:normal; }
.avx-flow .last{ border-color:rgba(52,211,153,0.4); background:rgba(52,211,153,0.08); }
.avx-flow .last b{ color:#34D399; }
/* training */
/* steps */
.avx-steps{ display:flex; gap:8px; }
.avx-steps div{ flex:1; text-align:center; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; color:#94A3B8;
  border:1px solid rgba(255,255,255,0.10); border-radius:8px; padding:9px 4px; }
.avx-steps b{ display:block; color:#55647C; font-size:10px; letter-spacing:0.12em; margin-bottom:3px; }
.avx-steps .on{ border-color:rgba(56,189,248,0.45); background:rgba(14,165,233,0.08); color:#DCEBFA; }
.avx-steps .on b{ color:#38BDF8; }

/* mid statement + finale */
.avx-mid{ margin-top: clamp(70px,8vw,120px); text-align:center; }
.avx-h2{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,48px); letter-spacing:-0.03em;
  background: linear-gradient(180deg,#FFFFFF 25%,#9AA9BC); -webkit-background-clip:text; background-clip:text; color:transparent; }
.avx-sub2{ margin-top:14px; font-size:clamp(14px,1.2vw,17px); color:#AAB7C9; }
.avx-cta{ margin-top: clamp(70px,8vw,120px); text-align:center; }
.avx-cta .avx-btn{ margin-top:26px; background:#fff; color:#0B1526; font-weight:700; padding:16px 30px; font-size:16px;
  box-shadow: 0 10px 30px rgba(56,189,248,0.25); }
.avx-cta .avx-btn:hover{ transform:translateY(-3px); box-shadow: 0 16px 40px rgba(56,189,248,0.35); }

@media (max-width: 900px){
  .avx-3, .avx-6{ grid-template-columns: 1fr; }
  .avx-grid article{ min-height:0; }
  .avx-grid p{ max-width:none; }
}
@media (min-width: 901px) and (max-width: 1100px){
  .avx-6{ grid-template-columns: repeat(2,1fr); }
}

/* ============================================================
   BIZARCH AGENTS — department squads (tabbed card)
   ============================================================ */
.agx-head{ text-align:center; max-width:720px; margin-inline:auto; }
.agx-head .eyebrow{ justify-content:center; }
.agx-title{ margin-top:16px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(30px,4.4vw,54px); line-height:1.03; letter-spacing:-0.035em; color: var(--ink); }
.agx-dim{ color: var(--ink-3); }
.agx-lead{ margin:16px auto 0; font-size: clamp(15px,1.3vw,18px); color: var(--ink-2); }

/* tabs */
.agx-tabs{ margin-top: clamp(26px,3vw,40px); display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.agx-tab{ appearance:none; cursor:pointer; font: inherit; font-weight:600; font-size:14.5px; color: var(--ink-2);
  background:#fff; border:1.5px dashed var(--line); border-radius:999px; padding:10px 20px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.agx-tab:hover{ color: var(--brand); border-color: var(--brand); }
.agx-tab.on{ color: var(--brand); border:1.5px solid var(--brand); background:#EAF4FB; }

/* card */
.agx-card{ margin-top: clamp(22px,2.6vw,36px); display:grid; background:#F5F7FA; border-radius: clamp(18px,2.4vw,28px);
  padding: clamp(26px,3.6vw,56px); }
.agx-panel{ grid-area:1/1; display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,4vw,64px);
  visibility:hidden; opacity:0; transform: translateY(10px); pointer-events:none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.agx-panel.on{ visibility:visible; opacity:1; transform:none; pointer-events:auto; transition-delay:0s; }

/* left copy */
.agx-h{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: clamp(26px,3vw,42px);
  line-height:1.08; letter-spacing:-0.03em; color: var(--ink); }
.agx-h span{ color: var(--ink-3); }
.agx-sub{ margin-top:16px; max-width:44ch; font-size:15.5px; line-height:1.6; color: var(--ink-2); }
.agx-repl{ margin-top:26px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.agx-repl .lbl{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; letter-spacing:0.16em;
  text-transform:uppercase; color: var(--ink-3); margin-right:4px; }
.agx-repl span:not(.lbl){ font-size:12.5px; color: var(--ink-2); background:#fff; border:1px solid var(--line-soft);
  border-radius:999px; padding:4px 11px; }
.agx-checks{ margin-top:20px; list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.agx-checks li{ position:relative; padding-left:28px; font-size:15px; color: var(--ink-2); }
.agx-checks li::before{ content:"\2713"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff;
  background: linear-gradient(140deg,#0EA5E9,#0369A1); }

/* right: agent stack */
.agx-right{ display:flex; flex-direction:column; gap:12px; }
.agx-agent{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line-soft);
  border-radius:14px; padding:13px 16px; font-size:14.5px; font-weight:500; color: var(--ink);
  box-shadow: 0 2px 10px rgba(15,23,42,0.04);
  opacity:0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.agx-panel.on .agx-agent{ opacity:1; transform:none; }
.agx-panel.on .agx-agent:nth-child(1){ transition-delay:.05s }
.agx-panel.on .agx-agent:nth-child(2){ transition-delay:.12s }
.agx-panel.on .agx-agent:nth-child(3){ transition-delay:.19s }
.agx-panel.on .agx-agent:nth-child(4){ transition-delay:.26s }
.agx-av{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.agx-av svg{ width:20px; height:auto; display:block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.agx-av.av1{ background: linear-gradient(140deg,#38BDF8,#0284C7); }
.agx-av.av2{ background: linear-gradient(140deg,#3B82F6,#1D4ED8); }
.agx-av.av3{ background: linear-gradient(140deg,#6366F1,#4338CA); }
.agx-av.av4{ background: linear-gradient(140deg,#22D3EE,#0891B2); }
.agx-av.av5{ background: linear-gradient(140deg,#A78BFA,#7C3AED); }
.agx-go{ margin-top:10px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  background: var(--navy-ink); color:#fff; font-weight:600; font-size:15px; text-decoration:none;
  border-radius:12px; padding:13px 22px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.agx-go:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,23,42,0.25); }
.agx-go span{ transition: transform .2s var(--ease); }
.agx-go:hover span{ transform: translateX(3px); }

@media (max-width: 900px){
  .agx-panel{ grid-template-columns: 1fr; gap:28px; }
  .agx-sub{ max-width:none; }
}

/* Act 3 repositioning — works-with strip highlight, ERP advantage band, finale note */
.avx-strip .native{ color:#7DD3FC; }
.avx-strip .native::before{ background:#22D3EE; box-shadow:0 0 8px rgba(34,211,238,0.8); }
.avx-note{ margin-top:16px; font-size:13px; color:#7C8BA1; }
@media (max-width: 820px){
}

/* creative studio — blended into the dark AI section */
.avx-creative{ margin-top: clamp(70px,8vw,120px); }
.avx-cr-head{ max-width:640px; }
.avx-cr-h{ margin-top:14px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(24px,3vw,40px); letter-spacing:-0.03em; line-height:1.1;
  background: linear-gradient(180deg,#FFFFFF 25%,#9AA9BC); -webkit-background-clip:text; background-clip:text; color:transparent; }
.avx-cr-p{ margin-top:12px; font-size:15px; line-height:1.6; color:#AAB7C9; }
.avx-cr-chips{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.avx-cr-chips span{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; letter-spacing:0.08em;
  color:#C7D2E2; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.03);
  border-radius:999px; padding:6px 13px; }
.avx-creative .studio-feature{ margin: clamp(26px,3vw,40px) 0 0; }
.avx-creative .sf-main{ border-color: rgba(255,255,255,0.12); box-shadow: 0 30px 70px rgba(2,8,20,0.6); }
.avx-creative .sf-phone{ border-color: rgba(255,255,255,0.14); box-shadow: 0 22px 50px rgba(2,8,20,0.55); }

/* ============================================================
   DEEP CUSTOMIZATION — live invoice customizer
   ============================================================ */
.cux{ background: var(--bg-soft); }
.cux-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(30px,5vw,80px); align-items:center; }
.cux-dim{ color: var(--ink-3); }
.cux-copy .h2{ margin-top: 20px; }
.cux-copy .lead{ margin-top: 22px; }
.cux-points{ margin-top:22px; list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px 18px; }
.cux-points li{ display:flex; align-items:center; gap:11px; font-size:14.5px; color: var(--ink-2); }
/* one distinct glyph per capability — soft tinted tile, not a row of identical ticks */
.cux-pi{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  transition: transform .2s var(--ease); }
.cux-pi svg{ width:16px; height:16px; }
.cux-points li:hover .cux-pi{ transform: translateY(-2px) rotate(-3deg); }
.cux-pi.p1{ color:#0284C7; background:rgba(56,189,248,0.14); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.28); }
.cux-pi.p2{ color:#1D4ED8; background:rgba(59,130,246,0.13); box-shadow: inset 0 0 0 1px rgba(59,130,246,0.26); }
.cux-pi.p3{ color:#4338CA; background:rgba(99,102,241,0.13); box-shadow: inset 0 0 0 1px rgba(99,102,241,0.26); }
.cux-pi.p4{ color:#7C3AED; background:rgba(167,139,250,0.15); box-shadow: inset 0 0 0 1px rgba(167,139,250,0.30); }

/* control panel */
.cux-panel{ margin-top:28px; background:#fff; border:1px solid var(--line-soft); border-radius:16px;
  padding:18px 20px; box-shadow: 0 8px 26px rgba(15,23,42,0.05); }
.cux-panel-label{ display:block; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase; color: var(--brand); margin-bottom:14px; }
.cux-ctl{ display:flex; align-items:center; gap:14px; padding:8px 0; }
.cux-ctl + .cux-ctl{ border-top:1px dashed var(--line-soft); }
.cux-ctl-name{ flex:0 0 76px; font-size:13px; font-weight:600; color: var(--ink-2); }
.cux-swatches{ display:flex; gap:9px; }
.cux-sw{ appearance:none; width:24px; height:24px; border-radius:50%; border:2px solid #fff; cursor:pointer;
  box-shadow: 0 0 0 1.5px var(--line); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.cux-sw:hover{ transform:scale(1.12); }
.cux-sw.on{ box-shadow: 0 0 0 2px var(--navy); transform:scale(1.08); }
.cux-seg{ display:flex; background: var(--bg-mute); border-radius:9px; padding:3px; gap:2px; }
.cux-seg button{ appearance:none; border:0; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600;
  color: var(--ink-2); background:transparent; border-radius:7px; padding:6px 13px;
  transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
.cux-seg button.on{ color: var(--navy); background:#fff; box-shadow: 0 1px 4px rgba(15,23,42,0.12); }
.cux-note{ margin-top:12px; font-size:12px; color: var(--ink-3); }

/* the invoice */
.cux-stage{ display:flex; flex-direction:column; align-items:center; }
.cux-inv{ --acc:#0369A1; --acc-ink: color-mix(in srgb, var(--acc) 65%, #0B2A4A); position:relative; width:100%; max-width:460px; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:26px 28px 22px;
  box-shadow: 0 30px 70px rgba(8,47,73,0.16); transition: box-shadow .3s var(--ease); }
.cux-inv::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; border-radius:14px 14px 0 0;
  background: var(--acc); transition: background .3s var(--ease); }
.cux-inv .lb{ display:inline-flex; align-items:baseline; gap:6px; }
.cux-inv .lb b{ font-weight:600; color: var(--ink-2); }
.cux-inv .lb i{ font-style:normal; font-size:0.82em; color: var(--ink-2); }
/* Arabic mode: flip direction + emphasis */
.cux-inv.ar{ direction:rtl; }
.cux-inv.ar .lb{ flex-direction:row-reverse; }
.cux-inv.ar .lb b{ font-weight:400; font-size:0.82em; color: var(--ink-2); }
.cux-inv.ar .lb i{ font-weight:600; font-size:1em; color: var(--ink-2); }

.cux-inv-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.cux-logo{ display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:14px; color: var(--ink); }
.cux-logo span{ width:26px; height:26px; border-radius:8px; background: var(--acc); transition: background .3s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.cux-title{ text-align:right; display:flex; flex-direction:column; }
.cux-inv.ar .cux-title{ text-align:left; }
.cux-title b{ font-family:'Space Grotesk',sans-serif; font-size:15px; letter-spacing:0.06em; color: var(--acc-ink); transition: color .3s var(--ease); }
.cux-title i{ font-style:normal; font-size:12px; color: var(--ink-3); }

.cux-meta{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; font-size:12.5px; }
.cux-meta > div{ display:flex; justify-content:space-between; gap:10px; border-bottom:1px dotted var(--line-soft); padding-bottom:7px; }
.cux-meta .vl{ font-weight:600; color: var(--ink); white-space:nowrap; }

.cux-tbl{ width:100%; margin-top:16px; border-collapse:collapse; font-size:12.5px; }
.cux-tbl th{ text-align:right; padding:8px 9px; background: color-mix(in srgb, var(--acc) 9%, #fff);
  transition: background .3s var(--ease); }
.cux-tbl th.ta-s, .cux-tbl td.ta-s{ text-align:left; }
.cux-inv.ar .cux-tbl th{ text-align:left; }
.cux-inv.ar .cux-tbl th.ta-s, .cux-inv.ar .cux-tbl td.ta-s{ text-align:right; }
.cux-tbl td{ padding:9px; border-bottom:1px solid var(--line-soft); color: var(--ink-2); text-align:right; }
.cux-tbl td.ta-s{ color: var(--ink); font-weight:500; }

.cux-tot{ margin-top:12px; display:flex; flex-direction:column; gap:7px; font-size:12.5px; margin-left:auto; width:min(66%,300px); }
.cux-inv.ar .cux-tot{ margin-left:0; margin-right:auto; }
.cux-tot > div{ display:flex; justify-content:space-between; gap:12px; }
.cux-tot .grand{ margin-top:3px; padding:9px 12px; border-radius:9px; background: color-mix(in srgb, var(--acc) 10%, #fff);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color: var(--acc-ink);
  transition: background .3s var(--ease), color .3s var(--ease); }
.cux-tot .grand .lb b, .cux-inv.ar .cux-tot .grand .lb i{ color: var(--acc-ink); font-weight:700; }

.cux-foot{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:12px; font-size:11.5px; }
.cux-foot img{ display:block; border:1px solid var(--line-soft); border-radius:6px; padding:3px; background:#fff; }

/* stamp */
.cux-stamp{ position:absolute; left:30px; bottom:70px; width:92px; height:92px; border-radius:50%;
  border:2.5px solid var(--acc); display:flex; flex-direction:column; align-items:center; justify-content:center;
  color: var(--acc-ink); transform: rotate(-14deg) scale(0.55); opacity:0; pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.cux-stamp::before{ content:""; position:absolute; inset:5px; border-radius:50%; border:1px solid var(--acc); opacity:.6; }
.cux-stamp span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; letter-spacing:0.12em; }
.cux-stamp i{ font-style:normal; font-size:11px; }
.cux-inv.stamped .cux-stamp{ opacity:0.88; transform: rotate(-14deg) scale(1); }
.cux-inv.ar .cux-stamp{ left:auto; right:30px; }

/* modern template */
.cux-inv.modern{ border-radius:18px; }
.cux-inv.modern::before{ height:0; }
.cux-inv.modern .cux-inv-head{ margin:-26px -28px 0; padding:20px 28px; border-radius:17px 17px 0 0;
  background: linear-gradient(120deg, var(--acc-ink), color-mix(in srgb, var(--acc-ink) 62%, #0F172A)); }
.cux-inv.modern .cux-logo{ color:#fff; }
.cux-inv.modern .cux-logo span{ background:rgba(255,255,255,0.22); box-shadow:none; }
.cux-inv.modern .cux-title b{ color:#fff; }
.cux-inv.modern .cux-title i{ color:rgba(255,255,255,0.92); }
.cux-inv.modern .cux-tbl th{ background:transparent; border-bottom:2px solid var(--acc); }

@media (max-width: 920px){
  .cux-grid{ grid-template-columns:1fr; }
  .cux-stage{ order:-1; }
  .cux-inv{ max-width:420px; }
}

/* platform customization motion demo */
.cux-grid2{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(30px,5vw,80px); align-items:stretch; }
.cux-try{ margin-top: clamp(34px,4vw,54px); }
/* bridge line — connects the platform claim to the invoice example */
.cux-bridge{ margin-bottom: clamp(26px,3vw,38px); max-width:660px; }
.cux-bridge .h3{ margin-top:15px; font-weight:700; color: var(--navy); line-height:1.24; }
.cux-bridge p{ margin-top:11px; font-size: clamp(15px,1.3vw,16.5px); line-height:1.62; color: var(--ink-2); }
.cux-try-col{ display:flex; flex-direction:column; justify-content:space-between; }
.cux-panel{ margin-top:0; }
/* CTA fills what used to be dead space under the short control panel */
.cux-cta{ margin-top:22px; align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:15px; color: var(--brand); text-decoration:none;
  border-bottom:1.5px solid rgba(3,105,161,0.28); padding-bottom:3px;
  transition: color .2s var(--ease), border-color .2s var(--ease); }
.cux-cta:hover{ color: var(--navy); border-color: var(--navy); }
.cux-cta span{ transition: transform .2s var(--ease); }
.cux-cta:hover span{ transform: translateX(4px); }
.cux-demo{ display:flex; justify-content:center; }
.pmk{ --pa:#0369A1; position:relative; width:100%; max-width:560px; min-height:430px;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow: 0 30px 70px rgba(8,47,73,0.16); overflow:hidden; }
.pmk-body{ flex:1; }
.pmk-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line-soft); background:var(--bg-soft); }
.pmk-bar i{ width:9px; height:9px; border-radius:50%; background:#D7DFE9; }
.pmk-bar span{ margin-left:8px; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px; letter-spacing:0.08em; color: var(--ink-2); }
.pmk-body{ display:grid; grid-template-columns: 118px 1fr; }
.pmk-side{ border-right:1px solid var(--line-soft); padding:18px 11px; display:flex; flex-direction:column; gap:7px; }
.pn{ font-size:11.5px; font-weight:600; color: var(--ink-3); padding:7px 10px; border-radius:8px; }
.pn.on{ color:#fff; background: var(--pa); transition: background .5s var(--ease); }
.pmk-main{ padding:20px 22px 22px; display:flex; flex-direction:column; }
.pmk-head{ display:flex; align-items:center; gap:10px; }
.pmk-title{ font-family:'Space Grotesk',sans-serif; font-size:14px; color: var(--ink); position:relative; min-width:74px; height:18px; }
.pmk-title span{ position:absolute; left:0; top:0; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.pmk-title .t2{ opacity:0; transform: translateY(8px); color: var(--pa); }
.pmk.s4 .t1{ opacity:0; transform: translateY(-8px); }
.pmk.s4 .t2{ opacity:1; transform:none; }
.pmk-dots{ margin-left:auto; display:flex; gap:6px; }
.pmk-dots i{ width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
.pmk-dots .d1{ background:#0369A1; } .pmk-dots .d2{ background:#0D9488; }
.pmk-btn{ font-size:11px; font-weight:700; color:#fff; background: var(--pa); border-radius:7px; padding:5px 10px; transition: background .5s var(--ease); }
.pmk.s2{ --pa:#0F766E; }
.pmk-cards{ margin-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.kc{ border:1px solid var(--line-soft); border-radius:10px; padding:9px 10px; background:#fff; transition: transform .6s var(--ease); }
.kc i{ display:block; width:18px; height:18px; border-radius:6px; background: color-mix(in srgb, var(--pa) 18%, #fff);
  border:1px solid color-mix(in srgb, var(--pa) 40%, #fff); transition: background .5s var(--ease), border-color .5s var(--ease); }
.kc b{ display:block; margin-top:7px; font-family:'Space Grotesk',sans-serif; font-size:14px; color: var(--ink); }
.kc span{ font-size:10.5px; color: var(--ink-3); }
.pmk.s1 .kc1{ transform: translateX(calc(100% + 10px)); }
.pmk.s1 .kc2{ transform: translateX(calc(-100% - 10px)); }
.pmk-form{ margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.pmk-form .fr{ display:flex; align-items:center; gap:10px; }
.pmk-form .fr span{ flex:0 0 92px; font-size:11px; font-weight:600; color: var(--ink-2); }
.pmk-form .fr i{ flex:1; height:22px; border-radius:6px; border:1px solid var(--line-soft); background: var(--bg-soft); }
.pmk-form .fnew{ overflow:hidden; max-height:0; opacity:0; transition: max-height .5s var(--ease), opacity .5s var(--ease); }
.pmk-form .fnew span{ color: var(--pa); }
.pmk.s3 .fnew{ max-height:24px; opacity:1; }
/* cursor + captions */
.pmk-cur{ position:absolute; z-index:5; width:20px; height:20px; top:82%; left:88%;
  transition: top .9s var(--ease), left .9s var(--ease); filter: drop-shadow(0 2px 4px rgba(15,23,42,0.35)); }
.pmk[data-step="1"] .pmk-cur{ top:46%; left:56%; }
.pmk[data-step="2"] .pmk-cur{ top:16.5%; left:88%; }
.pmk[data-step="3"] .pmk-cur{ top:16.5%; left:95%; }
.pmk[data-step="4"] .pmk-cur{ top:17%; left:36%; }
.pmk-cap{ position:absolute; left:14px; bottom:12px; z-index:4; height:24px; }
.pmk-cap .c{ position:absolute; left:0; bottom:0; white-space:nowrap; font-family: ui-monospace,'SF Mono',Menlo,monospace;
  font-size:10.5px; letter-spacing:0.06em; color:#fff; background: var(--navy-ink); border-radius:999px; padding:5px 12px;
  opacity:0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.pmk[data-step="1"] .c1, .pmk[data-step="2"] .c2, .pmk[data-step="3"] .c3, .pmk[data-step="4"] .c4{ opacity:1; transform:none; }
@media (max-width: 920px){
  .cux-grid2{ grid-template-columns:1fr; }
  .pmk-side{ display:none; }
  .pmk-body{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .pmk-cur, .pmk-cap{ display:none; }
}

/* ============================================================
   REPORTS — living watermark wall of report previews
   ============================================================ */
.rpx{ position:relative; background: var(--bg-soft); overflow:hidden; min-height: clamp(560px,58vw,700px); display:flex; align-items:center; }
.rpx-fore{ position:relative; z-index:2; width:100%; }
.rpx-head{ text-align:center; max-width:780px; margin-inline:auto; }
.rpx-h{ margin-top:20px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(30px,4.2vw,52px); line-height:1.05; letter-spacing:-0.03em; color: var(--ink); }
.rpx-dim{ color: var(--ink-3); }
.rpx-sub{ margin:22px auto 0; max-width:620px; font-size: clamp(15px,1.3vw,17.5px); line-height:1.6; color: var(--ink-2); }
.rpx-cats{ margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:9px 18px; }
.rcat{ display:inline-flex; align-items:center; gap:8px; font-family: ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11px; letter-spacing:0.06em; color: var(--ink-2); }
.rcat i{ width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent); }
.rcat b{ font-weight:600; color: var(--c); }

/* the wall */
.rpw{ position:absolute; inset:-60px -50px; z-index:1; display:flex; gap:18px; pointer-events:none;
  -webkit-mask-image:
    radial-gradient(ellipse 50% 46% at 50% 47%, transparent 0 44%, rgba(0,0,0,0.45) 72%, #000 92%),
    linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(ellipse 50% 46% at 50% 47%, transparent 0 44%, rgba(0,0,0,0.45) 72%, #000 92%),
    linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
          mask-composite: intersect;
}
.rpwc{ flex:1 1 0; min-width:0; overflow:hidden; }
.rpwc-track{ display:flex; flex-direction:column; animation: rpwmove var(--dur,80s) linear infinite; }
.rpwc.down .rpwc-track{ animation-direction: reverse; }
.rpwc-stack{ display:flex; flex-direction:column; gap:20px; padding-bottom:20px; }
@keyframes rpwmove{ to{ transform: translateY(-50%); } }

/* mini report preview card */
.rpm{ background:#fff; border:1px solid var(--line-soft); border-radius:13px; padding:13px 14px;
  box-shadow: 0 3px 14px rgba(15,23,42,0.05); opacity:0.85; }
.rpm-h{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; color: var(--ink-2); }
.rpm-h i{ width:7px; height:7px; border-radius:50%; background:var(--c); flex:0 0 auto; transition: background .4s var(--ease); }
.rpm-t{ transition: opacity .38s var(--ease); }
.rpm .mtb{ transition: opacity .38s var(--ease); }
.rpm.swap .rpm-t, .rpm.swap .mtb{ opacity:0; }
.rpm .mtb{ margin-top:10px; display:flex; flex-direction:column; }
.rpm .mtb > div{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:6px 0; border-bottom:1px dotted var(--line-soft); font-size:10.5px; }
.rpm .mtb span{ color: var(--ink-3); }
.rpm .mtb b{ font-family:'Space Grotesk',sans-serif; font-size:10.5px; font-weight:600; color: var(--ink-2); white-space:nowrap; }
.rpm .mtb .tt{ border-bottom:0; }
.rpm .mtb .tt span{ color: var(--ink-2); font-weight:600; }
.rpm .mtb .tt b{ color: var(--c); font-size:11px; }

@media (prefers-reduced-motion: reduce){
  .rpwc-track{ animation:none; }
}

/* ============================================================
   Product tour — live feature demos (overlay the screenshot)
   ============================================================ */
.tour-frame{ position:relative; }
/* both stage modes share one height so switching tabs never shifts the page */
.tour-stage{ --stage-h: clamp(360px, 30vw, 470px); }
.tour-frame{ height: var(--stage-h); display:flex; flex-direction:column; }
.tour-frame img{ flex:1; min-height:0; width:100%; object-fit:cover; object-position:top center; }
.tour-demobox{ display:none; position:relative; border-radius:20px; overflow:hidden;
  background: linear-gradient(160deg,#EFF5FB,#E3ECF7);
  border:1px solid var(--line); box-shadow: var(--shadow-md);
  height: var(--stage-h); width:100%; margin-inline:auto; }
.tour-stage.demo-on .tour-frame{ display:none; }
.tour-stage.demo-on .tour-demobox{ display:block; }
.tour-demo{ position:absolute; inset:0; z-index:3; display:none; }
.tour-demo.on{ display:block; }
.dm-cur{ position:absolute; z-index:9; width:20px; height:20px; top:80%; left:82%;
  transition: top .8s var(--ease), left .8s var(--ease); filter: drop-shadow(0 2px 4px rgba(15,23,42,0.35)); }

/* --- AI Assistant --- */
.ast{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:86%; width:min(400px,80%);
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.16); display:flex; flex-direction:column; }
.ast-head{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; color: var(--ink);
  padding-bottom:12px; border-bottom:1px solid var(--line-soft); }
.ast-head i{ font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:#E0F2FE; color: var(--brand); font-size:12px; font-weight:700; }
.ast-chat{ flex:1; padding:14px 0; display:flex; flex-direction:column; gap:10px; }
.ast-q{ align-self:flex-end; max-width:86%; background: var(--brand); color:#fff; font-size:12.5px;
  border-radius:13px 13px 3px 13px; padding:9px 13px;
  opacity:0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.demo-ast.s2 .ast-q, .demo-ast.s3 .ast-q, .demo-ast.s4 .ast-q, .demo-ast.s5 .ast-q{ opacity:1; transform:none; }
.ast-think{ align-self:flex-start; display:flex; gap:5px; background:#EEF3F9; border-radius:12px; padding:11px 14px; opacity:0; transition: opacity .3s var(--ease); }
.ast-think i{ width:6px; height:6px; border-radius:50%; background:#94A3B8; animation: astdot 1s ease-in-out infinite; }
.ast-think i:nth-child(2){ animation-delay:.16s; } .ast-think i:nth-child(3){ animation-delay:.32s; }
@keyframes astdot{ 0%,100%{ transform:none; opacity:.5 } 40%{ transform: translateY(-4px); opacity:1 } }
.demo-ast.s3 .ast-think{ opacity:1; }
.demo-ast.s4 .ast-think, .demo-ast.s5 .ast-think{ display:none; }
.ast-a{ align-self:flex-start; max-width:92%; background:#F4F8FC; border:1px solid var(--line-soft);
  font-size:12.5px; color: var(--ink-2); border-radius:13px 13px 13px 3px; padding:10px 13px;
  opacity:0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ast-a b{ color: var(--ink); }
.demo-ast.s4 .ast-a, .demo-ast.s5 .ast-a{ opacity:1; transform:none; }
.ast-src{ display:block; margin-top:7px; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:9.5px;
  color: var(--brand); transition: text-shadow .3s var(--ease); }
.demo-ast.s5 .ast-src{ text-shadow: 0 0 12px rgba(14,165,233,0.6); }
.ast-input{ position:relative; border:1.5px solid var(--line); border-radius:11px; padding:10px 13px; font-size:12.5px; min-height:38px; }
.ast-typed{ color: var(--ink); clip-path: inset(0 100% 0 0); }
.demo-ast.s1 .ast-typed{ clip-path: inset(0 0 0 0); transition: clip-path 1.1s steps(24); }
.demo-ast.s2 .ast-typed, .demo-ast.s3 .ast-typed, .demo-ast.s4 .ast-typed, .demo-ast.s5 .ast-typed{ opacity:0; }
.ast-input em{ position:absolute; left:13px; top:10px; font-style:normal; color: var(--ink-3); opacity:1; transition: opacity .2s; }
.demo-ast.s1 .ast-input em{ opacity:0; }
.demo-ast.s2 .ast-input em, .demo-ast.s3 .ast-input em, .demo-ast.s4 .ast-input em, .demo-ast.s5 .ast-input em{ opacity:1; }
.ast-note{ margin-top:9px; font-size:9.5px; color: var(--ink-3); text-align:center; }

/* --- Roles & access --- */
.rls{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(430px,88%);
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.16); }
.rls-head{ display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:700; color: var(--ink);
  padding-bottom:11px; border-bottom:1px solid var(--line-soft); }
.rls-head span{ font-size:11px; font-weight:700; color:#fff; background: var(--brand); border-radius:8px; padding:5px 10px; }
.rls-row{ position:relative; display:flex; align-items:center; gap:10px; padding:10px 4px; font-size:13px; color: var(--ink);
  border-bottom:1px dotted var(--line-soft); }
.av{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700; }
.av.v1{ background:#0369A1 } .av.v2{ background:#6366F1 } .av.v3{ background:#0D9488 }
.rls-row .role{ margin-left:auto; font-size:11.5px; font-weight:600; color: var(--ink-2);
  border:1px solid var(--line); border-radius:8px; padding:4px 10px; }
.rls-row.hot .role{ position:relative; min-width:76px; text-align:center; }
.role.rsw .r1, .role.rsw .r2{ transition: opacity .3s var(--ease); }
.role.rsw .r2{ position:absolute; left:0; right:14px; text-align:center; opacity:0; color: var(--brand); }
.demo-rls.s2 .role.rsw .r1, .demo-rls.s3 .role.rsw .r1, .demo-rls.s4 .role.rsw .r1, .demo-rls.s5 .role.rsw .r1{ opacity:0; }
.demo-rls.s2 .role.rsw .r2, .demo-rls.s3 .role.rsw .r2, .demo-rls.s4 .role.rsw .r2, .demo-rls.s5 .role.rsw .r2{ opacity:1; }
.rls-dd{ position:absolute; right:0; top:calc(100% - 4px); z-index:5; background:#fff; border:1px solid var(--line);
  border-radius:11px; box-shadow: 0 14px 34px rgba(15,23,42,0.16); padding:5px; min-width:130px;
  opacity:0; transform: translateY(-6px); pointer-events:none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.demo-rls[data-s="1"] .rls-dd{ opacity:1; transform:none; }
.rls-dd i{ display:block; font-style:normal; font-size:11.5px; color: var(--ink-2); border-radius:7px; padding:6px 10px; }
.rls-dd .pick{ background:#EAF4FB; color: var(--brand); font-weight:600; }
.rls-perms{ overflow:hidden; max-height:0; opacity:0; transition: max-height .5s var(--ease), opacity .5s var(--ease); }
.demo-rls.s3 .rls-perms, .demo-rls.s4 .rls-perms, .demo-rls.s5 .rls-perms{ max-height:170px; opacity:1; }
.pm{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 4px; font-size:12px; color: var(--ink-2);
  border-bottom:1px dotted var(--line-soft); }
.tg{ width:30px; height:17px; border-radius:999px; background:#DBE3EC; position:relative; transition: background .3s var(--ease); }
.tg::after{ content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(15,23,42,0.25); transition: left .3s var(--ease); }
.demo-rls.s3 .tg.t1, .demo-rls.s4 .tg.t1, .demo-rls.s5 .tg.t1,
.demo-rls.s3 .tg.t2, .demo-rls.s4 .tg.t2, .demo-rls.s5 .tg.t2{ background:#16A34A; }
.demo-rls.s3 .tg.t1::after, .demo-rls.s4 .tg.t1::after, .demo-rls.s5 .tg.t1::after,
.demo-rls.s3 .tg.t2::after, .demo-rls.s4 .tg.t2::after, .demo-rls.s5 .tg.t2::after{ left:15px; }
.pm.wh b{ font-size:11px; color: var(--brand); border:1px solid rgba(3,105,161,0.3); background:#F0F8FE; border-radius:7px; padding:3px 9px;
  transition: box-shadow .3s var(--ease); }
.demo-rls.s4 .pm.wh b, .demo-rls.s5 .pm.wh b{ box-shadow: 0 0 0 3px rgba(14,165,233,0.18); }
.rls-save{ display:flex; align-items:center; justify-content:flex-end; gap:12px; padding-top:12px; }
.rls-save .sv{ font-size:12px; font-weight:700; color:#fff; background: var(--navy-ink); border-radius:9px; padding:7px 16px; }
.rls-save .ok{ font-size:11.5px; font-weight:700; color:#16A34A; opacity:0; transform: translateX(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease); }
.demo-rls.s5 .rls-save .ok{ opacity:1; transform:none; }
.demo-rls[data-s="1"] .dm-cur{ top:34%; left:72%; }
.demo-rls[data-s="2"] .dm-cur{ top:46%; left:74%; }
.demo-rls[data-s="3"] .dm-cur{ top:58%; left:60%; }
.demo-rls[data-s="4"] .dm-cur{ top:70%; left:68%; }
.demo-rls[data-s="5"] .dm-cur{ top:80%; left:60%; }

/* --- Branches --- */
.brx{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(460px,90%);
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.16); }
.brx-head{ position:relative; padding-bottom:12px; border-bottom:1px solid var(--line-soft); }
.brx-sel{ position:relative; display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; color: var(--ink-2);
  border:1.5px solid var(--line); border-radius:10px; padding:8px 13px; min-width:200px; }
.brx-sel .bl{ color: var(--brand); position:absolute; left:64px; opacity:0; transition: opacity .3s var(--ease); }
.brx-sel .b-all{ position:static; opacity:1; margin-left:4px; }
.demo-brx[data-s="2"] .b-all, .demo-brx[data-s="3"] .b-all, .demo-brx[data-s="4"] .b-all{ opacity:0; }
.demo-brx[data-s="2"] .b-jed, .demo-brx[data-s="3"] .b-jed{ opacity:1; }
.demo-brx[data-s="4"] .b-riy{ opacity:1; }
.brx-dd{ position:absolute; left:0; top:calc(100% - 6px); z-index:5; background:#fff; border:1px solid var(--line);
  border-radius:11px; box-shadow: 0 14px 34px rgba(15,23,42,0.16); padding:5px; min-width:160px;
  opacity:0; transform: translateY(-6px); pointer-events:none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.demo-brx[data-s="1"] .brx-dd, .demo-brx[data-s="3"] .brx-dd{ opacity:1; transform:none; }
.brx-dd i{ display:block; font-style:normal; font-size:11.5px; color: var(--ink-2); border-radius:7px; padding:6px 10px; }
.demo-brx[data-s="1"] .brx-dd .pj{ background:#EAF4FB; color: var(--brand); font-weight:600; }
.demo-brx[data-s="3"] .brx-dd .pr{ background:#EAF4FB; color: var(--brand); font-weight:600; }
.brx-kpis{ display:flex; flex-direction:column; }
.brx-kpis > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:11px 4px;
  border-bottom:1px dotted var(--line-soft); font-size:12.5px; color: var(--ink-3); }
.brx-kpis .nn{ position:relative; min-width:150px; text-align:right; }
.brx-kpis .nn b{ font-family:'Space Grotesk',sans-serif; font-size:15px; color: var(--ink);
  transition: opacity .35s var(--ease); }
.brx-kpis .n-jed, .brx-kpis .n-riy{ position:absolute; right:0; top:0; opacity:0; color: var(--brand); }
.demo-brx[data-s="2"] .n-all, .demo-brx[data-s="3"] .n-all, .demo-brx[data-s="4"] .n-all{ opacity:0; }
.demo-brx[data-s="2"] .n-jed, .demo-brx[data-s="3"] .n-jed{ opacity:1; }
.demo-brx[data-s="4"] .n-riy{ opacity:1; }
.brx-note{ margin-top:12px; text-align:center; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-3); transition: color .3s var(--ease); }
.demo-brx[data-s="5"] .brx-note{ color: var(--brand); }
.demo-brx[data-s="1"] .dm-cur{ top:24%; left:44%; }
.demo-brx[data-s="2"] .dm-cur{ top:34%; left:40%; }
.demo-brx[data-s="3"] .dm-cur{ top:24%; left:44%; }
.demo-brx[data-s="4"] .dm-cur{ top:40%; left:41%; }
.demo-brx[data-s="5"] .dm-cur{ top:24%; left:36%; }

@media (prefers-reduced-motion: reduce){
  .ast-think i{ animation:none; }
  .dm-cur{ display:none; }
}

/* --- Bill of Materials demo --- */
.bom{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(440px,88%);
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.16); }
.bom-head{ display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:700; color: var(--ink);
  padding-bottom:11px; border-bottom:1px solid var(--line-soft); }
.bom-chip{ font-size:11px; font-weight:600; color: var(--brand); background:#EAF4FB; border:1px solid rgba(3,105,161,0.25);
  border-radius:999px; padding:4px 11px; }
.bom-rows{ display:flex; flex-direction:column; }
.brw{ display:flex; align-items:baseline; gap:10px; padding:9px 4px; font-size:12.5px; color: var(--ink);
  border-bottom:1px dotted var(--line-soft);
  opacity:0; transform: translateX(-12px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.brw em{ font-style:normal; font-size:11px; color: var(--ink-3); }
.brw b{ margin-left:auto; font-family:'Space Grotesk',sans-serif; font-size:12.5px; color: var(--ink-2); }
.brw.lab{ color: var(--brand); }
.brw.lab span{ font-weight:600; }
.demo-bom.s1 .brw.b1, .demo-bom.s1 .brw.b2,
.demo-bom.s2 .brw.b1, .demo-bom.s2 .brw.b2, .demo-bom.s2 .brw.b3, .demo-bom.s2 .brw.b4,
.demo-bom.s3 .brw, .demo-bom.s4 .brw, .demo-bom.s5 .brw{ opacity:1; transform:none; }
.demo-bom.s1 .brw.b2{ transition-delay:.15s; }
.demo-bom.s2 .brw.b4{ transition-delay:.15s; }
.bom-tot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px;
  border-radius:10px; padding:10px 13px; background: rgba(3,105,161,0.08);
  opacity:0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.demo-bom.s4 .bom-tot, .demo-bom.s5 .bom-tot{ opacity:1; transform:none; }
.bom-tot .ct span{ font-size:11.5px; font-weight:600; color: var(--ink-2); margin-right:8px; }
.bom-tot .ct b{ font-family:'Space Grotesk',sans-serif; font-size:15px; color: var(--brand); }
.bom-tot .mg{ text-align:right; }
.bom-tot .mg span{ display:block; font-size:10px; color: var(--ink-3); }
.bom-tot .mg b{ font-size:11.5px; font-weight:700; color:#16A34A; }
.bom-act{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; }
.bom-act .bd{ font-size:12px; font-weight:700; color:#fff; background: var(--navy-ink); border-radius:9px; padding:7px 15px;
  transition: transform .2s var(--ease); }
.demo-bom.s5 .bom-act .bd{ transform: scale(0.96); }
.bom-act .ok{ font-size:11px; font-weight:700; color:#16A34A; opacity:0; transform: translateX(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease); }
.demo-bom.s5 .bom-act .ok{ opacity:1; transform:none; }
.demo-bom[data-s="1"] .dm-cur{ top:36%; left:64%; }
.demo-bom[data-s="2"] .dm-cur{ top:50%; left:60%; }
.demo-bom[data-s="3"] .dm-cur{ top:60%; left:66%; }
.demo-bom[data-s="4"] .dm-cur{ top:70%; left:58%; }
.demo-bom[data-s="5"] .dm-cur{ top:81%; left:38%; }

/* Ken Burns pass over the real screenshots — zoom, dwell, glide, return */
@media (prefers-reduced-motion: no-preference){
  .tour-frame img{ animation: tourkb var(--kbd,18s) ease-in-out infinite; will-change: transform; }
  .tour-frame:hover img{ animation-play-state: paused; }
}
@keyframes tourkb{
  0%, 100%{ transform: scale(1) translate(0,0); }
  16%, 40%{ transform: scale(var(--kbs,1.55)) translate(var(--k1x,13%), var(--k1y,10%)); }
  56%, 80%{ transform: scale(var(--kbs,1.55)) translate(var(--k2x,-13%), var(--k2y,-10%)); }
}

/* A dashboard's payload is the whole layout, so any pan hides the thing the tab
   promises. Hold it completely still — detail is one Expand click away. */
@media (prefers-reduced-motion: no-preference){
  .tour-frame img.kb-still{ animation: none; transform: none; }
}

/* ============================================================
   WORK — live sites embedded in the frames (concept A)
   ============================================================ */
.wk-list{ margin-top: clamp(34px,4vw,54px); display:flex; flex-direction:column; gap: clamp(44px,5.5vw,84px); }
.wk-row{ display:grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(26px,3.6vw,60px); align-items:center; }
.wk-flip .wk-frame{ order:2; }
.wk-flip .wk-copy{ order:1; }

.wk-frame{ border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow: 0 30px 70px rgba(8,47,73,0.16); }
.wk-view{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0B1220; }
.wk-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; z-index:1; }
.wk-view iframe{ position:absolute; top:0; left:0; border:0; z-index:2; opacity:0;
  transform-origin: top left; transition: opacity .5s var(--ease); background:transparent; }
.wk-view.loaded iframe{ opacity:1; }
/* shield keeps page scroll normal until the visitor opts in */
.wk-shield{ position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:18px; background: linear-gradient(to top, rgba(8,15,30,0.42), rgba(8,15,30,0.06) 34%, transparent 55%); }
.wk-browse{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font:inherit; font-weight:700; font-size:13.5px;
  color: var(--navy-ink); background:#fff; border:0; border-radius:999px; padding:11px 20px;
  box-shadow: 0 10px 30px rgba(2,12,27,0.35); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.wk-browse:hover{ transform: translateY(-2px); box-shadow: 0 16px 38px rgba(2,12,27,0.45); }
.wk-browse svg{ animation: wkbounce 1.6s ease-in-out infinite; }
@keyframes wkbounce{ 0%,100%{ transform: translateY(-1px) } 50%{ transform: translateY(2px) } }
.wk-done{ position:absolute; top:10px; right:10px; z-index:5; display:none; cursor:pointer; font:inherit;
  font-weight:700; font-size:11.5px; color:#fff; background: rgba(8,15,30,0.72); border:1px solid rgba(255,255,255,0.25);
  border-radius:999px; padding:7px 13px; backdrop-filter: blur(4px); }
.wk-view.live .wk-shield{ display:none; }
.wk-view.live .wk-done{ display:inline-flex; }

.wk-copy{ position:relative; }
.wk-idx{ display:block; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; letter-spacing:0.2em;
  color: var(--ink-2); margin-bottom:12px; }
.wk-copy .work-hd{ display:flex; align-items:center; gap:12px; }
.wk-copy h3{ font-family:'Space Grotesk',sans-serif; font-size: clamp(22px,2.2vw,30px); color: var(--navy-ink); }
.wk-copy p{ margin-top:14px; font-size:15px; line-height:1.65; color: var(--ink-2); max-width:46ch; }
.wk-copy .tags{ margin-top:16px; }
.wk-copy .work-link{ margin-top:18px; display:inline-flex; }

@media (max-width: 940px), (max-width: 1024px) and (orientation: portrait){
  .wk-row{ grid-template-columns:1fr; }
  .wk-flip .wk-frame{ order:0; }
  .wk-flip .wk-copy{ order:1; }
}

/* ============================================================
   WHY — statements, not reasons (quiet confidence)
   ============================================================ */
.wux{ background: var(--bg-soft); }
.wux-h{ font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(34px,4.8vw,62px); line-height:1.04; letter-spacing:-0.035em; color: var(--ink); }
.wux-h span{ color: var(--ink-3); }
.wux-sub{ margin-top:20px; max-width:56ch; font-size: clamp(15px,1.35vw,18px); line-height:1.6; color: var(--ink-2); }

.wux-cols{ margin-top: clamp(40px,5vw,64px); display:grid; grid-template-columns: repeat(4, 1fr); }
.wc{ position:relative; padding: 22px 26px 6px 0; border-top: 1px solid var(--line); }
.wc + .wc{ padding-left: 26px; }
/* small notch where each column starts — the ClickUp ruled-table feel, our way */
.wc::before{ content:""; position:absolute; top:-1px; left:0; width:34px; height:2.5px; background: var(--brand); }
.wc + .wc::before{ left:26px; }
.wc .k{ display:block; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px;
  letter-spacing:0.18em; text-transform:uppercase; color: var(--brand); }
.wc b{ display:block; margin-top:14px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(20px,1.9vw,27px); letter-spacing:-0.02em; color: var(--ink); }
.wc p{ margin-top:12px; font-size:13.5px; line-height:1.6; color: var(--ink-2); max-width:30ch; }

.wux-band{ margin-top: clamp(64px,8vw,110px); display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap: clamp(24px,4vw,60px); align-items:center; border-top:1px solid var(--line); padding-top: clamp(36px,4.4vw,60px); }
.wux-h2{ font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(24px,2.8vw,38px); line-height:1.1; letter-spacing:-0.03em; color: var(--ink); }
.wux-h2 span{ color: var(--ink-3); }
.wux-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.wux-chips span{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; letter-spacing:0.06em;
  color: var(--navy); background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.wux-chips span:hover{ border-color: var(--brand); box-shadow: 0 6px 18px rgba(3,105,161,0.12); transform: translateY(-2px); }

@media (max-width: 960px){
  .wux-cols{ grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .wc + .wc{ padding-left:0; }
  .wc:nth-child(even){ padding-left:26px; }
  .wc:nth-child(even)::before{ left:26px; }
  .wc:nth-child(odd)::before{ left:0; }
  .wux-band{ grid-template-columns:1fr; }
  .wux-chips{ justify-content:flex-start; }
}

/* ============================================================
   START SMALL — the honest ledger (replaces engagement models)
   ============================================================ */
.stx-top{ max-width: 900px; }
.stx-h{ font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(32px,4.4vw,56px); line-height:1.05; letter-spacing:-0.035em; color: var(--ink); }
.stx-h span{ color: var(--ink-3); }
.stx-sub{ margin-top:20px; max-width:54ch; font-size: clamp(15px,1.35vw,18px); line-height:1.6; color: var(--ink-2); }

.stx-list{ list-style:none; margin: clamp(46px,5.5vw,76px) 0 0; padding:0; border-top:1px solid var(--line); }
.stx-item{ position:relative; display:grid; grid-template-columns: 74px minmax(0,1fr) auto;
  gap: clamp(16px,2.4vw,38px); align-items:start;
  padding: clamp(24px,2.8vw,34px) 0; border-bottom:1px solid var(--line);
  transition: background .25s var(--ease); }
.stx-item::before{ content:""; position:absolute; left:-24px; right:-24px; top:0; bottom:0; z-index:-1;
  border-radius:14px; background:transparent; transition: background .25s var(--ease); }
.stx-item:hover::before{ background: var(--bg-soft); }
.stx-n{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:12.5px; letter-spacing:0.16em;
  color: var(--ink-3); padding-top:5px; }
.stx-body h3{ font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(19px,1.9vw,25px); letter-spacing:-0.02em; color: var(--ink); }
.stx-body p{ margin-top:11px; max-width:62ch; font-size:14.5px; line-height:1.65; color: var(--ink-2); }
.stx-tag{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--ink-3); white-space:nowrap; padding-top:7px; }

/* the promise nobody else makes — quietly emphasised */
.stx-hero .stx-n{ color: var(--brand); }
.stx-hero .stx-body h3{ color: var(--brand); }
.stx-hero .stx-tag{ color: var(--brand); }
.stx-hero::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:2.5px;
  background: var(--grad-brand); border-radius:2px; }

.stx-foot{ margin-top: clamp(34px,4vw,52px); display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:20px; }
.stx-own{ max-width:56ch; font-size:14px; line-height:1.6; color: var(--ink-2); }
.stx-cta{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  background: var(--navy-ink); color:#fff; font-weight:600; font-size:15px; text-decoration:none;
  border-radius:12px; padding:14px 24px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.stx-cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,23,42,0.25); }
.stx-cta span{ transition: transform .2s var(--ease); }
.stx-cta:hover span{ transform: translateX(4px); }

@media (max-width: 820px){
  .stx-item{ grid-template-columns: 52px minmax(0,1fr); }
  .stx-tag{ grid-column: 2; padding-top:2px; }
}

/* ============================================================
   CONTACT — striking inset gradient panel (fixed, no scroll transition)
   ============================================================ */
.cta{
  background: linear-gradient(135deg, #0B2E4F 0%, #0369A1 26%, #3730A3 58%, #0EA5E9 84%, #38BDF8 100%);
  color: #fff;
  margin: clamp(14px,1.8vw,30px) clamp(10px,1.4vw,22px);
  border-radius: clamp(26px,3.6vw,46px);
  overflow: hidden;
}
.cta h1, .cta h2, .cta h3, .cta h4{ color:#fff; }
.cta-inner p, .cta .lead{ color: rgba(228,240,252,0.84); }
.cta .eyebrow{ color: var(--mint); }
.cta .eyebrow::before{ background: var(--mint); }
/* ghost button needs the on-dark treatment here */
.cta .btn-ghost{ color:#fff; border-color: rgba(255,255,255,0.32); background: transparent; }
.cta .btn-ghost:hover{ color: var(--mint); border-color: var(--mint); }

/* the form stays a solid white card — it's the focal action, and it pops on the gradient */
.cta .lead-form{ box-shadow: 0 34px 80px rgba(2,12,27,0.42); border-color: rgba(255,255,255,0.5); }

/* contact cards become glass so the form keeps the hierarchy */
.cta .contact{
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cta .contact:hover{ background: rgba(255,255,255,0.16); box-shadow: 0 16px 38px rgba(2,12,27,0.38); }
.cta .contact .k{ color: rgba(206,224,242,0.78); }
.cta .contact .v{ color:#fff; }
.cta .contact .ic{
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.24); color:#fff;
}
.cta .contact .ic svg{ stroke:#fff; }
/* gradient headline text was built for light grounds — brighten it on this panel */
.cta .grad-text{ background: linear-gradient(92deg, #7DD3FC 0%, #5EEAD4 46%, #E0F2FE 100%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; }

/* ============================================================
   FOOTER — light, simple link grid
   ============================================================ */
.footer{
  background: var(--bg); color: var(--ink);
  padding: clamp(56px,6vw,88px) 0 clamp(26px,3vw,38px);
}
.ftr-brand{ display:flex; align-items:center; gap:12px; }
.ftr-brand img{ display:block; }
.ftr-word{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:23px; letter-spacing:-0.02em; }
.ftr-word .biz{ color: var(--navy-ink); }
.ftr-word .arch{ color: var(--brand); }

.ftr-nav{ margin-top: clamp(38px,4.4vw,60px);
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(20px,2.6vw,40px); }
.ftr-nav .col{ display:flex; flex-direction:column; }
.ftr-nav h5{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14.5px;
  letter-spacing:-0.01em; color: var(--ink); margin-bottom:16px; }
.ftr-nav a{ font-size:14.5px; line-height:1.45; color: var(--ink-2); text-decoration:none;
  padding:7px 0; transition: color .2s var(--ease); }
.ftr-nav a:hover{ color: var(--brand); }


.ftr-bottom{ margin-top: clamp(30px,3.4vw,46px); padding-top: clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  font-size:13.5px; color: var(--ink-3); }
.ftr-tag{ font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--ink-3); }

@media (max-width: 900px){
  .ftr-nav{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:28px; }
}
/* hairline divider between the contact panel and the footer */
.footer .wrap::before{
  content:""; display:block; height:1px; background: var(--line);
  margin-bottom: clamp(44px,5vw,72px);
}

/* ============================================================
   Consistent light rhythm after the AI chapter — strict alternation
   white / off-white so every section reads as its own chapter
   ============================================================ */

#why{ background: var(--bg); }           /* was off-white */
#process{ background: var(--bg-soft); }  /* was white, doubled with #engage */
/* chips sat on #fff — needs a tone now that Why is white */
.wux-chips span{ background: var(--bg-soft); }

/* CONTACT — the BizArch gradient, identical to the Platforms panel on purpose:
   the product peak and the closing ask bookend the page with the same signature. */
.cta{
  background: linear-gradient(120deg, #0C4A6E 0%, #0369A1 28%, #3730A3 56%, #0EA5E9 84%, #38BDF8 100%);
}
/* film grain — same premium texture as the other dark sections, and it dithers
   any banding in the tour's long vertical gradient */
#tour::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  clip-path: inset(
    calc(var(--tgy) * (1 - var(--te)))
    calc(var(--tgx) * (1 - var(--te)))
    round calc(var(--trd) * (1 - var(--te)))
  );
}
#tour .wrap{ position:relative; z-index:1; }

/* ============================================================
   WhatsApp FAB — primary floating action; back-to-top demotes above it
   ============================================================ */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:901;
  height:56px; min-width:56px; padding:0 16px; border-radius:999px;
  display:flex; align-items:center; gap:0; text-decoration:none;
  background:#25D366; color:#fff;
  box-shadow: 0 10px 30px rgba(37,211,102,0.38), 0 2px 6px rgba(15,23,42,0.18);
  opacity:0; transform: translateY(16px) scale(.9); pointer-events:none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .25s var(--ease), gap .3s var(--ease);
}
.wa-fab.show{ opacity:1; transform:none; pointer-events:auto; }
.wa-fab svg{ width:27px; height:27px; flex:0 0 auto; }
.wa-fab:hover{ background:#22c35e; box-shadow: 0 16px 40px rgba(37,211,102,0.5), 0 2px 6px rgba(15,23,42,0.2); }
/* label slides open on hover (desktop only — no hover on touch) */
.wa-label{ max-width:0; overflow:hidden; white-space:nowrap; font-weight:600; font-size:14.5px;
  opacity:0; transition: max-width .3s var(--ease), opacity .25s var(--ease), margin-right .3s var(--ease); }
@media (hover:hover) and (pointer:fine){
  .wa-fab:hover .wa-label{ max-width:130px; opacity:1; margin-right:10px; }
}
/* back-to-top: smaller satellite, sits above WhatsApp */
.to-top{ width:42px; height:42px; bottom:90px; z-index:900; }
.to-top .arr{ width:16px; height:16px; }

/* ============================================================
   Language switch — placeholder until the Arabic build exists
   ============================================================ */
.lang-switch{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:14px;
  color: var(--ink-2); background: var(--bg-soft);
  border:1px solid var(--line); border-radius:999px; padding:9px 15px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.lang-switch svg{ width:16px; height:16px; flex:0 0 auto; }
.lang-switch:hover{ color: var(--brand); border-color: var(--brand); background:#fff; }
.lang-switch.is-soon{ position:relative; }
/* tiny "coming soon" toast, shown on click until the Arabic site is live */
.lang-toast{
  position:fixed; right:22px; top:calc(var(--nav-h) + 12px); z-index:1200;
  background: var(--navy-ink); color:#fff; font-size:13.5px; font-weight:500;
  border-radius:12px; padding:11px 17px; box-shadow: 0 14px 34px rgba(15,23,42,0.3);
  opacity:0; transform: translateY(-8px); pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lang-toast.show{ opacity:1; transform:none; }
@media (max-width: 980px){
  .lang-switch span{ display:none; }
  .lang-switch{ padding:9px 11px; }
}
/* the ZATCA block is a reveal target inside #erp — its entrance transform lands it
   under the fixed nav, so give it explicit scroll clearance */
#zatca{ scroll-margin-top: calc(var(--nav-h) + 34px); }

/* --- tour: numbered stops so the depth is visible --- */
#tour .tour-tabs{ counter-reset: tourstop var(--start,0); }
#tour .tour-tabs [role="tab"] .tt-row{ counter-increment: tourstop; }
#tour .tour-tabs [role="tab"] .tt-row::before{
  content: counter(tourstop, decimal-leading-zero);
  font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:10px; font-weight:600;
  color: rgba(148,178,208,0.72); margin-right:10px; flex:0 0 auto;
}
#tour .tour-tabs [role="tab"][aria-selected="true"] .tt-row::before{ color: var(--mint); }
.tt-right .tour-tabs{ --start:6; }
/* --- tour: expand-to-read --- */
.tour-frame{ position:relative; }
.tf-zoom{
  position:absolute; right:12px; bottom:12px; z-index:4; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:11.5px; font-weight:600;
  color:#fff; background: rgba(11,27,45,0.72); border:1px solid rgba(255,255,255,0.24);
  border-radius:999px; padding:7px 13px; backdrop-filter: blur(6px);
  opacity:0.9; transition: opacity .25s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.tour-frame:hover .tf-zoom{ opacity:1; }
.tf-zoom:focus-visible{ opacity:1; }
.tf-zoom:hover{ background: rgba(11,27,45,0.9); }
.tf-lightbox{
  position:fixed; inset:0; z-index:2000; display:none; place-items:center;
  background: rgba(4,10,20,0.88); backdrop-filter: blur(6px); padding: clamp(16px,4vw,56px);
}
.tf-lightbox.on{ display:grid; }
.tf-lightbox img{ max-width:100%; max-height:100%; border-radius:12px; box-shadow: 0 40px 90px rgba(0,0,0,0.6); }
.tf-close{
  position:absolute; top:22px; right:26px; cursor:pointer; font:inherit; font-size:22px; line-height:1;
  color:#fff; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);
  border-radius:50%; width:42px; height:42px;
}
/* --- tour: closing CTA at peak intent --- */
.tour-cta{
  margin-top: clamp(20px,2.4vw,32px); display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:14px; text-align:center;
}
.tour-cta p{ font-size:15px; color: rgba(226,238,250,0.8); margin:0; }
.tour-cta a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; font-size:15px;
  color:#0B2E4F; background: var(--mint); border-radius:12px; padding:12px 22px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tour-cta a:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(94,234,212,0.3); }
.tour-cta a span{ transition: transform .2s var(--ease); }
.tour-cta a:hover span{ transform: translateX(4px); }

/* tour tabs: sized to keep every label on a single line */
#tour .tour-tabs [role="tab"]{ padding: 13px 14px; }
#tour .tour-tabs [role="tab"] b{ font-size: 14px; letter-spacing:-0.015em; }
#tour .tour-tabs [role="tab"] .tt-row{ gap: 8px; }
#tour .tour-tabs [role="tab"] .tt-row::before{ font-size: 9.5px; margin-right: 8px; }
#tour .tour-tabs [role="tab"] .tt-desc{ font-size: 12.5px; }

/* customizer: make the interaction obvious */
.cux-panel{ position:relative; }
.cux-panel-label{
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; letter-spacing:0.1em; color: var(--brand); font-weight:700;
}
.cux-panel-label::before{
  content:""; width:9px; height:9px; border-radius:50%; background: var(--brand); flex:0 0 auto;
  box-shadow: 0 0 0 0 rgba(3,105,161,0.5); animation: cuxpulse 2.1s ease-out infinite;
}
@keyframes cuxpulse{
  0%{ box-shadow: 0 0 0 0 rgba(3,105,161,0.45); }
  70%{ box-shadow: 0 0 0 11px rgba(3,105,161,0); }
  100%{ box-shadow: 0 0 0 0 rgba(3,105,161,0); }
}
/* nudge the first control so it reads as touchable */
.cux-swatches .cux-sw:first-child{ animation: cuxnudge 3.4s ease-in-out infinite; }
@keyframes cuxnudge{ 0%,88%,100%{ transform:none } 92%{ transform:scale(1.18) } 96%{ transform:scale(1.05) } }
@media (prefers-reduced-motion: reduce){
  .cux-panel-label::before, .cux-swatches .cux-sw:first-child{ animation:none; }
}

/* ============================================================
   Real client templates — laser-scan generate into the live doc
   ============================================================ */
.cux-stage{ position:relative; }
.cux-real-doc{
  position:absolute; inset:0; z-index:5; display:none; overflow:hidden;
  border-radius:14px; background:#fff; border:1px solid var(--line);
  box-shadow: 0 30px 70px rgba(8,47,73,0.18);
}
.cux-real-doc.on{ display:block; }
.cux-real-doc img{
  display:none; width:100%; height:100%; object-fit:cover; object-position:top center;
  clip-path: inset(0 0 100% 0);                 /* revealed by the scan */
}
.cux-real-doc img.show{ display:block; }
.cux-real-doc.revealed img.show{ clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.4,0,.2,1); }
/* the scan line itself */
.cux-scan{
  position:absolute; left:0; right:0; top:0; height:3px; z-index:6; opacity:0;
  background: linear-gradient(90deg, transparent, #38BDF8, #5EEAD4, #38BDF8, transparent);
  box-shadow: 0 0 22px 6px rgba(56,189,248,0.55);
}
.cux-real-doc.scanning .cux-scan{ opacity:1; animation: cuxscan 1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes cuxscan{ from{ top:0 } to{ top:100% } }
@media (prefers-reduced-motion: reduce){
  .cux-real-doc img{ clip-path:none !important; transition:none !important; }
  .cux-scan{ display:none; }
}

/* document selector — sits with the document it changes */
.cux-docsel{
  margin-top:16px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
  background: var(--bg-mute); border-radius:11px; padding:5px; width:fit-content; margin-inline:auto;
}
.cux-docsel button{
  appearance:none; border:0; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600;
  color: var(--ink-3); background:transparent; border-radius:8px; padding:7px 15px;
  transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.cux-docsel button:hover{ color: var(--brand); }
.cux-docsel button.on{ color: var(--navy); background:#fff; box-shadow: 0 1px 4px rgba(15,23,42,0.12); }
/* document selector: make it obvious the chips are switchable */
.cux-docwrap{ margin-top:9px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.cux-docsel{ margin-top:0; }
.cux-docsel-lab{
  font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px; letter-spacing:0.14em; line-height:1;
  text-transform:uppercase; color: var(--brand); display:inline-flex; align-items:center; gap:7px;
}
.cux-docsel-lab::before{
  content:""; width:7px; height:7px; border-radius:50%; background: var(--brand);
  animation: cuxpulse 2.1s ease-out infinite;
}
/* the two client chips read as the "other" option */
.cux-docsel button[data-tpl-real^="new"], .cux-docsel button[data-tpl-real="euro"]{
  border:1px dashed rgba(3,105,161,0.4); color: var(--brand);
}
.cux-docsel button[data-tpl-real^="new"]:hover, .cux-docsel button[data-tpl-real="euro"]:hover{
  background:#fff; border-style:solid;
}
.cux-docsel button.on{ border:1px solid transparent; }
@media (prefers-reduced-motion: reduce){ .cux-docsel-lab::before{ animation:none; } }

/* ============================================================
   Engagement & investment
   sits between #engage (white) and #faq (soft) — needs a third
   background value so it merges with neither neighbour
   ============================================================ */
.section.inv{ background: var(--bg-mute); }
.inv-head{ max-width: 780px; }
.inv-head .h2{ margin-top:18px; }
.inv-head .lead{ margin-top:20px; }

.inv-grid{
  margin-top: clamp(34px,4vw,54px);
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px,1.5vw,20px);
  align-items:stretch;
}
.inv-card{
  --ic:#0369A1;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding: clamp(20px,2vw,27px);
  box-shadow: 0 14px 34px -26px rgba(11,42,74,0.4);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.inv-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--ic);
}
.inv-card.ic2{ --ic:#1D4ED8; }
.inv-card.ic3{ --ic:#0F766E; }
.inv-card:hover{
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--ic) 32%, var(--line));
  box-shadow: 0 24px 48px -28px rgba(11,42,74,0.5);
}
/* the middle tier is the one most buyers land on — let it lead */
.inv-card.ic2{ border-color: color-mix(in srgb, var(--ic) 40%, var(--line));
  box-shadow: 0 20px 44px -26px rgba(11,42,74,0.5); }
.inv-flag{
  position:absolute; top:0; right:0;
  font-size:11px; font-weight:700; letter-spacing:0.04em; color:#fff;
  background: var(--ic); padding:5px 12px; border-radius:0 0 0 11px;
}
.inv-card.ic2 .inv-step{ margin-top:2px; }

.inv-step{
  font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px; letter-spacing:0.16em;
  text-transform:uppercase; color: var(--ic); font-weight:600;
}
.inv-t{ margin-top:9px; font-size: clamp(20px,1.7vw,24px); font-weight:700; color: var(--navy); letter-spacing:-0.02em; }
.inv-p{ margin-top:9px; font-size:14.5px; line-height:1.62; color: var(--ink-2); }

.inv-fig{
  margin-top:16px; padding:14px 0 15px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.inv-fig b{
  font-family:'Space Grotesk',sans-serif; font-size: clamp(22px,2vw,27px); font-weight:700;
  color: var(--navy); letter-spacing:-0.02em;
}
.inv-fig span{ font-size:12.5px; font-weight:600; color: var(--ink-3); }

.inv-x{ margin:15px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.inv-x li{ position:relative; padding-left:23px; font-size:13.5px; line-height:1.5; color: var(--ink-2); }
.inv-x li::before{
  content:""; position:absolute; left:0; top:6px; width:13px; height:8px;
  border-left:2px solid var(--ic); border-bottom:2px solid var(--ic);
  transform: rotate(-45deg); border-radius:1px;
}

/* ---- what moves the number + closing action ---- */
.inv-foot{
  margin-top: clamp(26px,3vw,40px);
  display:grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1fr);
  gap: clamp(22px,3vw,52px); align-items:center;
  padding-top: clamp(24px,2.6vw,34px); border-top:1px solid var(--line);
}
.inv-dh{ font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-2); }
.inv-dl{ margin:14px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.inv-dl li{
  font-size:13px; font-weight:600; color: var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 11px;
}
.inv-act{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.inv-note{ font-size:15px; line-height:1.62; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce){ .inv-card:hover{ transform:none; } }

@media (max-width: 900px){
  .inv-grid{ grid-template-columns: minmax(0,1fr); }
  .inv-foot{ grid-template-columns: minmax(0,1fr); align-items:flex-start; }
}

/* two-figure tier (setup + yearly retainer) */
.inv-fig2{ flex-direction:column; align-items:stretch; gap:11px; }
.inv-fig2 .fr{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.inv-fig2 .fr b{
  font-family:'Space Grotesk',sans-serif; font-size: clamp(19px,1.6vw,22px); font-weight:700;
  color: var(--navy); letter-spacing:-0.02em;
}
.inv-fig2 .fr span{ font-size:12px; font-weight:600; color: var(--ink-3); }
/* enterprise tier carries words where the others carry a number */
.inv-req{ font-size: clamp(19px,1.7vw,23px) !important; }

/* the line that actually differentiates the tiers — pinned to the card foot */
.inv-diff{
  margin-top:auto; padding-top:15px;
  font-size:13.5px; line-height:1.58; color: var(--ink-2);
  border-top:1px dashed var(--line);
}
.inv-diff b{
  display:block; margin-bottom:5px; font-size:11px; font-weight:700;
  letter-spacing:0.13em; text-transform:uppercase; color: var(--ic);
}
.inv-x{ margin-bottom:16px; }

/* tiers are cumulative — say so, or the top tier reads as the thinnest */
.inv-inherit{
  margin-top:16px; font-size:12.5px; font-weight:700; color: var(--ic);
  display:flex; align-items:center; gap:8px;
}
.inv-inherit::after{ content:""; flex:1; height:1px; background: color-mix(in srgb, var(--ic) 26%, transparent); }
.inv-x{ margin-top:11px; }

.inv-req.sm{ font-size: clamp(15px,1.2vw,17px) !important; color: var(--ink-2) !important; }
/* split whatever slack remains rather than pooling it in one hole */
.inv-inherit{ margin-top:auto; padding-top:16px; }

/* ============================================================
   Web & marketing — collapsed until asked for
   the trigger copy self-selects, so ERP visitors never open it
   ============================================================ */
.section.webx{ background:#fff; padding: clamp(40px,4.4vw,64px) 0 clamp(26px,3vw,40px); }
.webx-bar{
  display:flex; align-items:center; justify-content:space-between; gap: clamp(20px,3vw,48px); flex-wrap:wrap;
}
.webx-lead{ max-width:62ch; }
.webx-h{
  margin-top:14px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(21px,2.1vw,29px); letter-spacing:-0.02em; color: var(--navy);
}
.webx-p{ margin-top:9px; font-size:15.5px; line-height:1.6; color: var(--ink-2); }

.webx-btn{
  flex:0 0 auto; appearance:none; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600; color: var(--navy);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:13px 22px;
  box-shadow: 0 8px 22px -14px rgba(11,42,74,0.4);
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.webx-btn:hover{
  border-color: var(--brand); color: var(--brand);
  transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(11,42,74,0.5);
}
.webx-chev{ width:17px; height:17px; transition: transform .32s var(--ease); }
.webx-btn[aria-expanded="true"] .webx-chev{ transform: rotate(180deg); }

/* smooth open at any content height — no max-height guessing */
.webx-panel{
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.webx-panel.open{ grid-template-rows: 1fr; }
.webx-inner{
  overflow:hidden; min-height:0;
  /* visibility (not just height) keeps collapsed links out of the tab order */
  visibility:hidden; transition: visibility 0s linear .45s;
}
.webx-panel.open .webx-inner{ visibility:visible; transition-delay:0s; }
.webx-panel.open .webx-inner > *{ margin-top: clamp(26px,3vw,40px); }

.webx-svc-lab{
  display:block; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px;
  letter-spacing:0.16em; text-transform:uppercase; color: var(--brand); font-weight:600;
}
.webx-chips{ margin:12px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:9px; }
.webx-chips li{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color: var(--ink-2);
  background: var(--bg-soft); border:1px solid var(--line); border-radius:9px; padding:8px 13px;
}
.webx-chips li.soon{ color: var(--ink-2); background:#fff; border-style:dashed; }
.webx-chips li.soon span{
  font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--ink-2); background: var(--bg-mute); border-radius:999px; padding:2px 7px;
}
.webx-note{ font-size:14.5px; color: var(--ink-2); }
.webx-note a{ color: var(--brand); font-weight:600; text-decoration:none; }
.webx-note a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  .webx-panel{ transition:none; }
  .webx-chev{ transition:none; }
  .webx-btn:hover{ transform:none; }
}

/* ============================================================
   Responsive visibility utilities
   phone = 640 and below · tablet = 641-1024 · desktop = 1025+
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){  .hide-sm{ display:none !important; } }   /* gone on phones */
@media (max-width: 1024px){ .hide-md{ display:none !important; } }   /* gone on phones + tablets */
/* .only-sm shows only under the mobile treatment — which now includes
   portrait tablets, so this guard has to mirror that condition exactly. */
@media (min-width: 1025px), (min-width: 641px) and (orientation: landscape){
  .only-sm{ display:none !important; }
}

/* motion off on phones — keeps layout, drops the CPU/battery cost */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .still-sm, .still-sm *{
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   HERO — phone only (<=640px). Tablet keeps the stacked screenshot.
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  /* the ERP panel is the desktop hero's centrepiece; at phone width it becomes
     an unreadable thumbnail, so it earns nothing for the space it takes */
  .hero-cu .hero-visual{ display:none; }

  /* with the visual gone the hero is a single centred column — the client
     proof should follow that axis instead of hanging left */
  .cu-trust{
    flex-direction:column; align-items:center; text-align:center;
    gap:18px; margin-top: clamp(34px,7vw,48px);
  }
  /* as a flex item in a centred column this sizes to max-content (691px) and
     never wraps — pin it to the container so the logos actually flow */
  .cu-trust-logos{
    width:100%; justify-content:center; gap: 20px 24px;
  }
  .cu-trust-logos img.tl{ height:22px; }
  .cu-trust-logos img.tl.lockup{ height:32px; }
}

/* ============================================================
   SERVICES — accordion on phones only (<=640px)
   six stacked paragraphs (853px) become six scannable rows (~340px)
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .flow-cols{ gap:0; margin-top: clamp(20px,4vw,28px); }
  /* :has(.flow-conn) adds 38px on the first three for the desktop connector,
     and .flow-col{padding-top:22px} at 860px — both outrank a bare padding:0 */
  #services .flow-col,
  #services .flow-col:has(.flow-conn){
    border-top:1px solid var(--line); padding:0;
  }
  .flow-col:last-child{ border-bottom:1px solid var(--line); }
  .flow-col .flow-conn{ display:none; }

  /* the title becomes the tap row */
  .flow-col .h3{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    margin:0; padding:16px 2px; cursor:pointer;
    font-size:17px; line-height:1.3; color: var(--navy);
    -webkit-tap-highlight-color: transparent;
  }
  .flow-col .h3::after{
    content:""; flex:0 0 auto; width:9px; height:9px; margin-right:4px;
    border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
    transform: rotate(45deg) translate(-2px,-2px);
    transition: transform .3s var(--ease), border-color .2s var(--ease);
  }
  .flow-col.open .h3::after{
    transform: rotate(225deg) translate(-2px,-2px); border-color: var(--brand);
  }
  .flow-col .h3:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }

  /* the answer — visibility keeps it out of the tab order while closed */
  .flow-col p{
    margin:0; max-height:0; opacity:0; visibility:hidden; overflow:hidden;
    font-size:14.5px; line-height:1.6; color: var(--ink-2);
    transition: max-height .32s var(--ease), opacity .24s var(--ease),
                padding .32s var(--ease), visibility 0s linear .32s;
  }
  .flow-col.open p{
    max-height:260px; opacity:1; visibility:visible;
    padding:0 2px 16px; transition-delay:0s;
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce),
       (max-width: 1024px) and (orientation: portrait) and (prefers-reduced-motion: reduce){
  .flow-col p, .flow-col .h3::after{ transition:none; }
}

/* ============================================================
   STATS — keep the 2x2 on phones instead of collapsing to a
   4-deep list; four numbers only work when you can compare them
   ============================================================ */
@media (max-width: 520px){
  .stats{ grid-template-columns: repeat(2,1fr); column-gap: 20px; }
  .stat{ padding: 20px 0 22px; border-top:1px solid var(--line); }
  .stat:nth-child(-n+2){ border-top:0; padding-top:4px; }   /* first row, both cells */
  .stat .n{ font-size:36px; }
  .stat .desc{ padding-top:10px; font-size:13px; line-height:1.5; max-width:none; }
}

/* ============================================================
   FLAGSHIP ORBIT — unfold on phones (<=640px)
   The circle reveals its eight module names one at a time over a
   16s cycle. On a phone that costs 350px and 11 running animations
   to deliver information the visitor may never wait for. Same tiles,
   same data-m names — laid flat so all eight read at once.
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .erp-orbit{
    aspect-ratio:auto; max-width:none; width:100%;
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  }
  /* rings overflowed 33px left; orb-links draws connectors between the circular
     tile positions, which no longer exist once the tiles are laid flat */
  .orb-ring, .orb-hub, .orb-links{ display:none; }

  .orb-tile{
    position:static; transform:none !important; animation:none !important;
    width:auto; height:auto; aspect-ratio:auto;
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 12px; border-radius:10px;
    background: var(--bg-soft); border:1px solid var(--line); box-shadow:none;
  }
  .orb-tile svg{ width:16px; height:16px; flex:0 0 auto; }
  .orb-tile::after{
    content: attr(data-m);
    position:static; transform:none !important; animation:none !important; opacity:1 !important;
    background:none; color: var(--ink-2); padding:0; border-radius:0;
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px;
    letter-spacing:0; white-space:nowrap;
  }
}

/* ============================================================
   ZATCA pipeline — the only sub-12px text on phones is the hash
   chain, which is texture rather than information
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .zp-body code{ font-size:12px; padding:4px 9px; }
  .zp-body code em{ color: var(--brand); }
}

/* ============================================================
   INDUSTRIES — deterministic phone layout (<=640px)
   The flagship cards carry inline grid-column:4/6 and 6/8, which are
   coordinates for the 8-column desktop grid. On a 4-column phone grid
   those tracks don't exist, so browsers invent implicit columns and
   render differently (Chrome vs Safari, and per device width).
   Placement is pinned explicitly here; !important is required because
   the coordinates are inline attributes.
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .modx-grid{
    grid-template-columns: repeat(4, 1fr); gap: 8px;
    /* grid-auto-rows is a fixed clamp(80px..) — pin the six structural rows and
       let the compact tail size to its content instead */
    grid-template-rows: repeat(6, 80px);
    grid-auto-rows: min-content;
  }

  /* four cores as a 2x2 block in the middle */
  .mx-flag{ grid-row:auto; }
  .mx-flag.mf-retail{ grid-column:1/3 !important; grid-row:2/4 !important; }
  .mx-flag.mf-mfg   { grid-column:3/5 !important; grid-row:2/4 !important; }
  .mx-flag.mf-con   { grid-column:1/3 !important; grid-row:4/6 !important; }
  .mx-flag.mf-svc   { grid-column:3/5 !important; grid-row:4/6 !important; }

  /* eight sectors only, chosen for value rather than DOM order:
     operationally complex businesses that match the Growth / Custom tiers */
  .modx-grid > div.mx-cell:not(.mx-key-top):not(.mx-key-bot){ display:none; }
  .modx-grid > div.mx-key-top{ grid-row:1; }
  .modx-grid > div.mx-key-bot{ grid-row:6; }
}

/* ============================================================
   INDUSTRIES CTA — on phones this line carries real weight, since
   only 8 of 44 sectors are shown. It was a 17px inline tap target.
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .modx-cta{
    margin-top:18px; text-align:center; font-size:15px; line-height:1.5;
  }
  .modx-cta a{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:44px; padding:10px 16px; margin-top:4px;
    border:1px solid var(--line); border-radius:999px;
    font-weight:600; color: var(--brand); text-decoration:none;
    background:#fff;
  }
}


/* ============================================================
   PRODUCT TOUR — hidden entirely on phones (<=640px)
   The screenshots render at 24% scale there (14px UI text becomes
   3.4px) and Expand only reaches 28%, so the section cannot deliver
   what it promises on a phone. Its links are hidden with it so the
   nav and footer never point at something that isn't there.
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #tour{ display:none; }
  a[href="#tour"]{ display:none; }
}

/* ============================================================
   DEEP CUSTOMIZATION — hide the invoice customizer on phones
   At 390px the panel, stage and invoice all compute to 415px inside
   a 350px container (the 4-column bilingual table sets a min-content
   width the grid can't shrink below), which is the source of the
   page's 45px horizontal overflow. Its Arabic labels also land at
   9.4px. Tier 1 keeps the argument; the toy goes.
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #custom .cux-try{ display:none; }
}

/* ============================================================
   CUSTOMIZATION DEMO — phones only: the four rotating captions are
   the payload, not part of the mock UI, so they can carry more size
   than the 10.5px interface labels around them.
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .pmk-cap{ height:28px; }
  .pmk-cap .c{ font-size:12px; padding:6px 13px; }
}

/* ============================================================
   REPORTS — phones: drop the watermark, keep the category list
   The copy already carries .rpx-cats — Sales 7, Cash & Bank 6, Tax 2
   and so on, 33 reports broken down by category. Converting the
   backdrop into a second list of sample names just restated that,
   unlabelled, which is why it read as disconnected.
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #reports.rpx{ min-height:0; display:block; overflow:hidden; padding:64px 0 68px; }
  #reports .rpw{ display:none; }

  /* with the wall gone this list IS the section — promote it from an 11px
     monospace footnote to a proper 2-up grid that carries the count */
  #reports .rpx-cats{
    margin-top:24px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:9px; justify-content:stretch;
  }
  #reports .rcat{
    display:flex; align-items:center; gap:9px;
    padding:13px 13px; border-radius:11px;
    background:#fff; border:1px solid var(--line);
    font-family:inherit; font-size:12.5px; letter-spacing:0; line-height:1.3;
    color: var(--ink-2); text-align:left;
  }
  #reports .rcat i{ flex:0 0 auto; }

  /* the bare number reads as "Sales 7 — seven what?" once the wall of report
     cards behind it is gone, so label the grid and make the count a badge */
  #reports .rpx-cats::before{
    content:"Reports in each category";
    grid-column:1 / -1; margin-bottom:2px;
    font-family: ui-monospace,'SF Mono',Menlo,monospace;
    font-size:11px; letter-spacing:0.13em; text-transform:uppercase;
    font-weight:600; color: var(--brand); text-align:left;
  }
  #reports .rcat b{
    margin-left:auto; flex:0 0 auto;
    min-width:26px; height:26px; padding:0 7px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13.5px; font-weight:700; line-height:1;
    border-radius:999px;
    /* var(--c) on its own 12%% tint drops to 3.88:1 for the lighter hues —
       darken the numeral toward navy while keeping the category colour */
    color: color-mix(in srgb, var(--c) 62%%, #0B2A4A);
    background: color-mix(in srgb, var(--c) 12%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
  }
}

/* ============================================================
   DEPLOY ANYWHERE — phones: permanently full bleed, square edges
   On desktop the gradient block floats on the light page with a
   26–46px radius and side insets. At 390px those insets eat 20px
   of an already narrow screen and the curve reads as a card rather
   than a section, so both are dropped.
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  .pf-hero{
    border-radius:0;
    margin-left:0; margin-right:0;
    margin-top:0; margin-bottom:0;
  }
}

/* ============================================================
   DEPLOY ANYWHERE — phones: mobile preview only, centred
   The desktop frame renders a 2150px screenshot at 16% scale, and
   the phone was absolutely positioned to the right edge (122px wide,
   right edge at 394 on a 390 viewport). Drop the desktop frame and
   let the phone stand alone, centred and bottom-anchored so it still
   rises out of the section edge the way the desktop layout does.
   ============================================================ */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #platforms .pf-hero-frame{ display:none; }

  /* the device is the payload here — let it dominate, and pull it closer to
     the CTA (72px of dead gradient sat between them) */
  #platforms .pf-hero-shot{
    width:100%; margin:34px 0 0;
    display:flex; justify-content:center; align-items:flex-end;
  }
  #platforms .pf-hero-phone{
    /* relative, not static: the notch is absolutely positioned and needs the
       phone as its containing block, else its 38%% resolves against .pf-hero-shot */
    position:relative; right:auto; bottom:auto;
    /* iPhone silhouette: narrow, tall, thin bezels. 86%% + a 0.9 ratio read as a
       squat Android slab. Height is held near the old 358px so the section
       does not grow. */
    width:min(74%, 280px); aspect-ratio: 0.75;
    margin:0 auto;
    /* erp-mobile.webp starts at the app search bar with no OS status strip, so
       the absolutely-positioned pill sat on top of it and read as a glitch.
       A slim top bezel gives it somewhere to live without a thick forehead. */
    padding:8px 8px 0;
    border-radius:34px 34px 0 0;
  }
  /* Dynamic-Island pill instead of the wide older-iPhone notch */
  /* Glass bezel, matching .pf-hero-frame on desktop (white 22% fill, 55% white
     hairline, 8px backdrop blur). The base style is deliberately black-glass
     because a white ring would vanish against the light screenshot — but that
     only applies to the INNER edge. Here the outer edge sits on the gradient,
     where white reads clearly, so the ring goes outside and a dark inner rim
     keeps the screenshot boundary defined. Ring is a box-shadow, not a border,
     so the aspect-ratio box does not shift. */
  #platforms .pf-hero-phone{
    background: rgba(255,255,255,0.20);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.40),   /* top sheen */
      inset 0 0 0 1px rgba(10,22,44,0.16),      /* inner rim against the screenshot */
      0 0 0 1px rgba(255,255,255,0.55),         /* outer hairline, on the gradient */
      0 26px 60px rgba(0,0,0,0.32);
  }
  /* No notch on glass: a dark pill floating inside a translucent frame reads as
     a blob, not hardware — and the desktop browser frame this now matches has a
     uniform empty bezel. With it gone the 17px forehead (added only to house it)
     drops to a uniform 8px, which also reveals ~9px more of the screenshot. */
  #platforms .pf-hero-phone .pfd-notch{ display:none; }
  #platforms .pf-hero-phone img{ border-radius:24px 24px 0 0; }

  /* CTA was 229x58 with 16/32 padding — heavier than the headline it follows */
  /* One shape for every primary CTA on mobile. The hero's .cu-btn was already a
     14px rect while the shared .btn stayed a 999px pill, so the first CTA a
     visitor saw disagreed with the five below it. Chips, tabs, the language
     switch and the round WhatsApp FAB keep their pills — those aren't CTAs. */
  .btn, .webx-btn, .wk-browse{ border-radius:12px; }

  /* rounded rect, not a pill: the 999px oval competed with the phone's 34px
     corners sitting right below it, and reads softer than the headline above */
  #platforms .pf-hero-cta{ margin-top:22px; padding:14px 26px; font-size:15.5px;
                           border-radius:12px; }

  /* 13px at 72%% white is the dimmest text in the section and it sits on a
     busy gradient — no alpha passes WCAG on the orange end, but the copy
     region is blue/purple where this lifts it from ~3.1 to ~4.2 */
  #platforms .pf-devs{ color: rgba(255,255,255,0.92); margin-top:16px; }
  #platforms .pf-hero-h{ font-size:41px; letter-spacing:-0.04em; }
  #platforms.pf-hero{ padding-top:52px; }
}

/* ============================================================
   TABLET LANDSCAPE / NARROW DESKTOP — 1025px to 1180px
   ------------------------------------------------------------
   Landscape iPads (1024x768, 1366x1024) take the desktop layout, which is
   sized for ~1200+. Below that the nav's three groups meet with no gap at
   all — brand 51-175, links 175-700, right 700-973 — and a few full-width
   lines run long. This tier only relieves those; the layout stays desktop.
   ============================================================ */
@media (min-width: 641px) and (max-width: 1180px) and (orientation: landscape),
       (min-width: 1025px) and (max-width: 1180px){
  /* space-between leaves nothing between the groups once the links strip grows
     to fill the middle — give them a real minimum separation */
  /* Links wrapped to two lines ("BizArch ERP", "Product tour", "Why us") not
     for lack of room — the six labels need only 326px of a 493px strip — but
     because 15px of side padding each (180px total) tipped it 13px over. Stop
     the wrapping outright and trim the padding. */
  header.nav .wrap{ gap: 14px; }
  header.nav .nav-links{ gap: 2px; }
  header.nav .nav-links a{ white-space: nowrap; padding-inline: 10px; }

  /* Hero: the 545px copy column left the shot only 311px, so the dashboard
     rendered small and low. Rebalance toward the visual. */
  .hero-cu .hero-grid{ grid-template-columns: minmax(0,430px) minmax(0,1fr); gap:36px; }

  /* Client logos sat left-aligned ending at 820, leaving a 150px hole on the
     right once the strip wrapped below its label. Spread them across it. */
  .cu-trust{ justify-content:center; }
  .cu-trust-logos{ flex:1 1 100%; justify-content:space-between; }
  /* full-width copy that has no measure of its own */
  #modules .modx-cta{ max-width: 66ch; margin-inline: auto; }   /* 74ch measured 90 chars */
}

/* ============================================================
   TABLET PORTRAIT — 641px to 1024px, portrait only
   ------------------------------------------------------------
   Layered ON TOP of the mobile treatment, which portrait tablets inherit.
   The mobile build is designed for ~375px; at 768 it reads as a stretched
   phone: body copy runs to 111 characters and sections become tall stacks of
   full-width blocks (9 in #ai, 4 in #why and #engage, 3 in #invest).
   This layer only fixes those two things — measure, and columns where a stack
   has room to pair up. Everything else stays as the phone build.
   Appended at the end of the file deliberately: the mobile blocks it refines
   sit ~4000 lines above at equal specificity, so source order decides.
   ============================================================ */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait){

  /* ---- measure: nothing should exceed a readable line ---- */
  .lead, .cu-points li, .cu-sub,
  #erp .zf-block p, #modules .modx-cta, #reports .rpx-sub,
  #custom .cux-note, #custom .cux-bridge p,
  #ai .avx-sub, #ai .avx-sub2, #ai .avx-note, #ai .avx-cr-p, #ai .avx-grid p,
  #why .wux-sub, #why .wc p,
  #engage .stx-sub, #engage .stx-body p, #engage .stx-own,
  #invest .inv-p, #invest .inv-diff, #invest .inv-note, #invest .inv-x li,
  #faq .faq-a p,
  #contact .cta-inner .lead,
  #web .webx-p, #web .webx-note{
    max-width: 62ch;
  }
  .sec-head.center .lead, .modx-head .lead, #contact .cta-inner .lead,
  #ai .avx-sub, #ai .avx-sub2, #ai .avx-note{ margin-inline: auto; }

  /* ---- pair up the stacks that have room ---- */
  #ai .avx-3, #ai .avx-6{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  #invest .inv-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
  /* Both hold 3 items. 2-up + a full-width third gave two tall narrow cards
     followed by one wide short one — pricing tiers you cannot compare, and a
     lopsided pillar row. Three across keeps them the same shape, which is what
     the desktop does and what these groups need. .avx-6 (6 items) stays 2-up. */
  #ai .avx-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  #invest .inv-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }

  /* .studio-feature is a 2-column grid whose right column holds the vertical
     phone — which the phone build hides, leaving a 256px empty column beside
     the video. One column here. */
  #ai .studio-feature{ grid-template-columns: minmax(0,1fr); }
  #why .wux-cols{ grid-template-columns: repeat(2, minmax(0,1fr)); column-gap:30px; }
  #contact .contact-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }

  /* ---- Industries: follow the desktop matrix, not the phone strip ----
     Desktop is a 10-column grid with the four cores clustered dead centre
     (cols 4-8, rows 2-6) and every sector flowing around them via row-dense.
     The phone build instead pins 8 sectors to a top and bottom row and splits
     the cores 2-up, which at 768 left dead bands to the left and right of the
     cores. Rebuild on the desktop model at 8 columns: cores together in the
     middle, sectors filling all four sides. */
  #modules .modx-grid{
    grid-template-columns: repeat(8, minmax(0,1fr));
    grid-template-rows: none;
    grid-auto-rows: 86px;
    grid-auto-flow: row dense;
    gap:0;                          /* desktop separates with borders, not gaps */
  }
  /* Sector count is sized to the frame, not just "show everything": with the
     cores at cols 3-6 / rows 2-5, the ring around them holds exactly 32 slots
     — 8 across the top, 8 down each side, 8 across the bottom. Showing all 44
     spilled 12 extra into rows below the cores, which read as crowded and
     bottom-heavy. Cap at 32 so the matrix closes evenly on all four sides;
     the tail of the list (Florists, Laundry, Nurseries and similar) is what
     drops, which is the least premium end of it. */
  #modules .modx-grid > div.mx-cell{ display:flex; }
  #modules .modx-grid > div.mx-cell:nth-of-type(n+33){ display:none; }
  /* release the phone's row pinning so dense flow can place them */
  #modules .modx-grid > div.mx-key-top,
  #modules .modx-grid > div.mx-key-top2,
  #modules .modx-grid > div.mx-key-bot,
  #modules .modx-grid > div.mx-key-bot2{ grid-row:auto; }
  /* the four cores, together, centred — desktop's arrangement at 8 columns */
  #modules .mx-flag.mf-retail{ grid-column:3/5 !important; grid-row:2/4 !important; }
  #modules .mx-flag.mf-mfg   { grid-column:5/7 !important; grid-row:2/4 !important; }
  #modules .mx-flag.mf-con   { grid-column:3/5 !important; grid-row:4/6 !important; }
  #modules .mx-flag.mf-svc   { grid-column:5/7 !important; grid-row:4/6 !important; }

  /* ---- "what we do" flow illustration ----
     The phone rules pull the five tool chips left and push the BizArch mark to
     70%, because the two outcome bubbles are hidden at that size and the right
     of the strip is empty. At 768 the bubbles are back — so the mark at 70%
     lands straight on top of them (mark 455-513 against bubbles 429-580 and
     467-639). Restore the desktop composition, which is what the bubbles were
     positioned against. Needs !important to beat the phone overrides. */
  #services .flow-illus .fchip:nth-of-type(1){ left:9%  !important; }
  #services .flow-illus .fchip:nth-of-type(2){ left:20% !important; }
  #services .flow-illus .fchip:nth-of-type(3){ left:7%  !important; }
  #services .flow-illus .fchip:nth-of-type(4){ left:23% !important; }
  #services .flow-illus .fchip:nth-of-type(5){ left:33% !important; }
  #services .flow-illus .fchip.fmark{ left:50% !important; }

  /* ---- Platforms: restore the desktop composition ----
     The phone build hides the browser frame and centres the handset on its
     own, capped at min(74%, 280px) — which at 768 is 280px marooned in a
     768-wide band with 244px of dead space each side. There is room here for
     the desktop arrangement (browser frame with the handset overlapping its
     lower-right), so bring that back. Every line below undoes one phone-only
     override, so the desktop rules can take effect again. */
  #platforms .pf-hero-frame{ display:block; }
  #platforms .pf-hero-shot{
    width:min(1120px, 92%); margin:clamp(34px,4.5vw,56px) auto 0;
    display:block; position:relative;
  }
  #platforms .pf-hero-phone{
    position:absolute; right:-2%; bottom:0; left:auto;
    width:34%; height:auto; aspect-ratio:9/10;
    margin:0; padding:8px 8px 0;
    border-radius:32px 32px 0 0;
    /* back to the desktop black-glass bezel: the frosted white version was for
       a handset sitting alone on the gradient, not one overlapping a screenshot */
    background:linear-gradient(152deg,#2A3543 0%,#141B27 46%,#0A0F17 100%);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.22),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      0 0 0 1px rgba(0,0,0,0.45),
      0 42px 72px rgba(0,0,0,0.42);
  }
  #platforms .pf-hero-phone .pfd-notch{
    display:block; width:38%; height:20px; top:8px;
    border-radius:0 0 12px 12px; background:#0A0F17;
  }
}

/* ============================================================
   TOUCH TAP TARGETS — tablets & phones only
   Gated on (hover:none) and (pointer:coarse) so a mouse-driven
   desktop browser never sees these, at any window width. Hit
   areas grow via ::after, which does not shift the line box, so
   no layout moves. Audit found 7 controls under 32px across
   every tablet size; the rest measured 38-44px.
   ============================================================ */
@media (hover: none) and (pointer: coarse){
  #modules .modx-cta a,
  #faq .faq-link,
  #custom .cux-cta{ position: relative; }
  #modules .modx-cta a::after,
  #faq .faq-link::after,
  #custom .cux-cta::after{
    content:""; position:absolute; left:0; right:0;
    top:50%; height:44px; transform:translateY(-50%);
    z-index:1;
  }
  /* Colour swatches were 24x24; pad the hit area out to 44 without
     resizing the visible dot. */
  /* Pitch must be >=44 or neighbouring hit areas overlap and steal each
     other's taps: 24px dot + 20px gap = 44px pitch, exactly no overlap. */
  #custom .cux-swatches{ gap:20px; }
  #custom .cux-sw{ position:relative; }
  #custom .cux-sw::after{
    content:""; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
  /* "Now viewing — tap to switch" is an instruction, not chrome:
     10.5px is below the legibility floor on a touch screen. */
  #custom .cux-docsel-lab{ font-size:12px; }
}

/* ============================================================
   HERO PRODUCT CHIPS — click swaps the hero screenshot
   The chips became <button> so they are keyboard-reachable; the
   .cu-chip rule already sets font/border/background, so only the
   UA button leftovers need clearing.
   ============================================================ */
.cu-chips .cu-chip{
  margin:0; line-height:1.2; text-align:left;
  -webkit-appearance:none; appearance:none;
}
.hero-copy .cu-chips .cu-chip{ cursor:pointer; }
.hero-copy .cu-chips .cu-chip:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
/* Ticks accumulate, so several chips carry a check at once. .on = ticked
   (accent border + check). .is-showing = the one whose screen is displayed,
   which additionally gets the fill — without it you cannot tell which of four
   ticked chips you are actually looking at. */
.cu-chips .cu-chip .chk{ display:none; }
.cu-chips .cu-chip.on .chk{ display:grid; }
.hero-copy .cu-chips .cu-chip.on{
  border-color: var(--accent); color: var(--accent); background: transparent;
}
.hero-copy .cu-chips .cu-chip.is-showing{ background: rgba(3,105,161,0.10); }

/* Cross-fade the shot so a swap does not snap. */
.hero-cu .cu-shot img{ transition: opacity .22s var(--ease); }
.hero-cu .cu-shot.swapping img{ opacity:0; }

/* The hero panel is hidden below 641px (the <source> media query), so
   there is nothing to swap there — present the chips as plain labels. */
@media (max-width: 640px){
  .hero-copy .cu-chips .cu-chip{ cursor:default; }
}

/* Second hero row — the services the product chips do NOT cover.
   These NAVIGATE rather than select, so they must not look like the picker
   above: no fill, no tick, lighter weight, and an outbound arrow. Without
   that, two identical-looking chips would do two different things. */
.cu-navchips{ margin-top:8px; gap:8px; }
.cu-chip-nav{
  padding:7px 13px; font-size:13px; font-weight:500;
  border-style:dashed; border-color:var(--line);
  background:transparent; color:var(--ink-2); cursor:pointer;
}
.cu-chip-nav:hover{
  border-style:solid; border-color:var(--accent);
  color:var(--accent); background:rgba(3,105,161,0.04);
}
.cu-chip-nav:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cu-chip-nav .nav-arw{ opacity:.55; margin-left:1px; }
.cu-chip-nav:hover .nav-arw{ opacity:1; }
/* never show the picker's tick on a navigation chip */
.cu-chips .cu-chip-nav .chk{ display:none !important; }

/* Hero chips on phones / tablet portrait.
   The two rows total 16 chips, which wrapped to 7 rows at 375px and buried
   the trust strip. The product row is inert here anyway (the panel is
   display:none below 641px), so both rows shrink to label size rather than
   staying tap-sized. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  /* The product picker cannot work here — the panel it drives is display:none
     below 641px — so 3 rows of chips were pure decoration. Cut it; the dashed
     navigation row below does work and earns its space on a 20,900px page. */
  /* role changed tablist -> group when the chips became multi-tick toggles;
     the selector silently stopped matching and the dead picker reappeared. */
  .hero-copy .cu-chips[role="group"]{ display:none; }

  .hero-copy .cu-chips{ gap:6px; margin-top:10px; }
  .hero-copy .cu-chips .cu-chip{
    padding:6px 11px; font-size:12.5px; gap:5px;
  }
  .hero-copy .cu-navchips{ margin-top:6px; }
  .hero-copy .cu-navchips .cu-chip-nav{ padding:6px 10px; font-size:12px; }
  /* The arrow signals "this navigates" on hover — there is no hover on touch,
     and it cost ~16px on every chip, pushing the row count from 3 to 4. */
  .hero-copy .cu-navchips .nav-arw{ display:none; }
  /* the tick is a desktop picker affordance; it costs width here */
  .hero-copy .cu-chips .cu-chip .chk{ display:none !important; }
}

/* ============================================================
   PRODUCT TOUR — strip layout
   The eight still-screenshot stops moved to the hero chips, so the
   two flanking rails had four items left between them. One strip
   across the top over a single stage.
   ============================================================ */
#tour .tour.tour-solo{
  display:block;
}
#tour .tour-solo .tour-tabs-top{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
#tour .tour-solo .tour-tabs-top [role="tab"]{
  width:100%;
}
/* the chevron read as "expands below" — wrong signal in a horizontal row */
#tour .tour-solo .tt-chev{ display:none; }
#tour .tour-solo .tt-row{ justify-content:flex-start; }
/* Stage is no longer a sticky column between two rails. It must stay narrow:
   the demo cards cap at 400-460px, so a full 1112px stage left them floating
   in three times the space they were drawn for. 680 matches the 644px column
   they were designed against. */
#tour .tour-solo{ max-width:680px; margin-inline:auto; }
#tour .tour-solo .tour-stage{
  position:static; order:0;
  width:100%; max-width:680px; margin-inline:auto;
}
/* Tabs are one-line pills: the blurbs moved to .tour-note below, because an
   accordion desc inside a GRID row stretched all four tabs to the height of
   the open one — three of them rendered as half-empty boxes. */
#tour .tour-solo .tour-tabs-top .tt-desc{ display:none; }
#tour .tour-solo .tour-tabs-top [role="tab"]{ padding:12px 10px; }
#tour .tour-solo .tour-tabs-top .tt-row{ justify-content:center; }
#tour .tour-solo .tour-tabs-top b{ font-size:14px; white-space:nowrap; }
#tour .tour-note{
  min-height:22px; margin:0 0 14px; text-align:center;
  font-size:14px; line-height:1.5; color: rgba(200,218,236,0.72);
}

@media (max-width: 900px){
  #tour .tour-solo .tour-tabs-top{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
}
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  #tour .tour-solo .tour-tabs-top{ grid-template-columns:minmax(0,1fr); gap:8px; }
  #tour .tour-solo .tt-desc{ display:none; }
}

/* ============================================================
   ARABIC / RTL LAYER  —  scoped entirely to [dir="rtl"]
   Nothing here can affect index.html. dir="rtl" flips text, flex
   and grid by itself; what it does NOT flip is the ~300 physical
   offsets in this file (187 `left:`, 83 `right:`, 36 translateX,
   27 margin-left). Only the ones that actually break are listed.
   ============================================================ */
[dir="rtl"]{
  --font-ar: 'IBM Plex Sans Arabic', 'Space Grotesk', sans-serif;
}
[dir="rtl"] body,
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] span, [dir="rtl"] a,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5,
[dir="rtl"] b, [dir="rtl"] strong, [dir="rtl"] button,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] label{
  font-family: var(--font-ar);
}
/* Arabic has no uppercase; letter-spaced smallcaps eyebrows turn into
   disconnected glyphs, which is the classic giveaway of a bolted-on RTL page. */
[dir="rtl"] .eyebrow, [dir="rtl"] .cu-label, [dir="rtl"] .tour-col-h,
[dir="rtl"] .pf-kicker, [dir="rtl"] .cu-trust-label{
  text-transform: none; letter-spacing: 0;
}
/* Arabic script sits taller than Latin at the same px size. */
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] .lead{ line-height: 1.85; }
[dir="rtl"] .h2, [dir="rtl"] h1{ line-height: 1.45; }

/* Latin runs inside Arabic (BizArch, ZATCA, ERP, POS) keep their own type
   and must not be re-ordered by the bidi algorithm. */
[dir="rtl"] .ltr{
  font-family: 'Space Grotesk', sans-serif;
  direction: ltr; unicode-bidi: isolate; display: inline-block;
}
/* Prices, VAT rates and stats stay Western digits, isolated so a trailing
   symbol cannot jump to the wrong side of the number. */
/* <bdi> not <span>: a bare span collides with component rules like
   `.inv-fig span{font-size:12.5px}`, which shrank every price to 12.5px
   inside a 27px <b>. bdi also isolates direction natively.
   NOTE: no `font:inherit` here. It looks harmless on an inline wrapper but
   wipes the font-size of any BLOCK carrying .num — it flattened the stat
   counters (10+, 40+, 24/7) to 17px body text. The bdi swap already fixes
   the collision, so the inherit was never needed. */
[dir="rtl"] .num{ direction: ltr; unicode-bidi: isolate; }

/* --- RTL: floating page furniture must mirror ---
   These three are pinned with physical offsets, so dir="rtl" leaves them
   stranded on the wrong edge. (.scroll-cue is centred via left:50% and needs
   no change.) Decorative mockups — .orb-*, .zpf-*, the tour demo internals —
   are deliberately NOT mirrored: they depict product UI, and flipping them
   would mean rewriting dozens of coordinates for no gain. */
[dir="rtl"] .to-top{ right:auto; left:22px; }
[dir="rtl"] .wa-fab{ right:auto; left:22px; }
[dir="rtl"] .skip{ left:auto; right:12px; }

/* --- RTL: text-align is physical and does not flip ---
   Only page copy is listed. The rules inside product-UI mockups
   (.zf-*, .cux-*, .brx-*, .bom-*, .rpx-cats) keep their LTR alignment
   on purpose — they are pictures of the app, not page text. */
[dir="rtl"] .contact,
[dir="rtl"] .tl-card,
[dir="rtl"] .lead-form,
[dir="rtl"] .tour-tabs [role="tab"],
[dir="rtl"] .flow-col,
[dir="rtl"] #reports .rcat,
[dir="rtl"] .cu-chips .cu-chip{ text-align: start; }

/* ============================================================
   RTL: units that must NOT be mirrored
   Flipping the page is the default, not the rule. A Latin wordmark
   lockup is an atomic unit — "BizArch" reads left-to-right, so the
   mark has to stay ahead of the word. Mirroring it produced
   [BizArch][B], which is simply the logo backwards.
   ============================================================ */
[dir="rtl"] .brand,
[dir="rtl"] .ftr-brand,
[dir="rtl"] .lang-switch{ direction: ltr; }

/* Hero CTA: the fine print takes the right edge and the button sits to its
   left. Done with `order`, not row-reverse — row-reverse repacks the whole
   group against the left margin (hard up against the screenshot panel),
   whereas swapping order keeps the pair packed on the start edge and only
   exchanges the two items. */
[dir="rtl"] .cu-cta{ flex-direction: row; }
[dir="rtl"] .cu-cta .cu-sub{ order: 1; }
[dir="rtl"] .cu-cta .cu-btn{ order: 2; }

/* --- RTL: the hero product shot dissolves on the opposite edge ---
   In LTR the panel bleeds to the RIGHT viewport edge, so the vignette fades
   right + bottom, the corners round on the left (the edge that stays), and
   the shadow is thrown left. Under `dir="rtl"` the flex start edge is the
   right, so the same panel bleeds LEFT — none of that mirrors on its own:
   the gradient angle, the border-radius corners and the shadow offset are
   all physical. Left unflipped, the Arabic hero dissolved on the edge that
   is anchored and stayed hard-cut on the edge that bleeds. */
/* Only in the bleed layout: at <=960px the shot becomes a plain, fully
   shown card with no mask, and these rules are both later and more
   specific, so unscoped they would switch the fade back on there. */
@media (min-width: 961px){
  [dir="rtl"] .cu-shot{
    border-radius: 0 16px 16px 0;
    box-shadow: 2px 40px 90px rgba(15,23,42,0.18), 0 10px 30px rgba(15,23,42,0.10);
    -webkit-mask-image:
      linear-gradient(270deg, #000 76%, rgba(0,0,0,0) 100%),
      linear-gradient(180deg, #000 76%, rgba(0,0,0,0) 100%);
            mask-image:
      linear-gradient(270deg, #000 76%, rgba(0,0,0,0) 100%),
      linear-gradient(180deg, #000 76%, rgba(0,0,0,0) 100%);
  }
  /* The shot is anchored to the bleeding edge, so the slice that survives the
     crop has to move with it — otherwise the Arabic sidebar, which sits on the
     right, is the first thing cut. */
  [dir="rtl"] .cu-shot img{ object-position: right top; }
}

/* --- RTL: physical borders and absolute markers ---
   border-left/right do not flip. On .stat this put the dividers at
   720/442/164 when the real boundaries are 998/720/442 — so the line between
   the 1st and 2nd stat vanished and a stray line appeared on the outer edge. */
[dir="rtl"] .stat{ border-left:0; border-right:1px solid var(--line); }
[dir="rtl"] .stat:first-child{
  border-right:0; padding-right:0; padding-left:clamp(20px,2.4vw,38px);
}
/* `.stat:last-child{padding-right:0}` flushes the last card to the wrap edge
   in LTR. Under RTL the last card is the LEFTmost one, so that zero lands on
   its inner side and the value (24/7) collides with the divider. Swap sides. */
[dir="rtl"] .stat:last-child{
  padding-right:clamp(20px,2.4vw,38px); padding-left:0;
}
/* Same logic in the 2-column layout: the odd items sit in the RIGHT column
   there, so it is their right edge that is the outer one. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  [dir="rtl"] .stat:nth-child(odd){
    border-right:0; padding-right:0; padding-left:clamp(16px,3vw,26px);
  }
}
/* Mockup sidebar: border-right was the inner edge in LTR; in RTL the sidebar
   moves to the right, so the inner edge becomes the left one. */
[dir="rtl"] .pmk-side{ border-right:0; border-left:1px solid var(--line-soft); }

/* Tick markers are absolutely positioned at left:0 with matching padding.
   The glyph itself is NOT mirrored — a checkmark reads the same either way;
   only its side moves. */
[dir="rtl"] .inv-x li{ padding-left:0; padding-right:23px; }
[dir="rtl"] .inv-x li::before{ left:auto; right:0; }

/* Same marker pattern as .inv-x: bullet/tick pinned at left:0 with the text
   indented by padding-left. Under RTL the text starts on the right while the
   marker stays left, leaving it stranded across the line. */
[dir="rtl"] .mod ul li{ padding-left:0; padding-right:16px; }
[dir="rtl"] .mod ul li::before{ left:auto; right:0; }
[dir="rtl"] .agx-checks li{ padding-left:0; padding-right:28px; }
[dir="rtl"] .agx-checks li::before{ left:auto; right:0; }
[dir="rtl"] .wc{ padding-left:0; padding-right:26px; }
[dir="rtl"] .wc::before{ left:auto; right:0; }

/* --- Orbit tile icons: break a circular height dependency ---
   .orb-tile svg had `height:45%`, which resolves against the tile's height —
   but the tile is a grid whose height is driven by its content, i.e. the svg.
   Most tiles settled at 55x55; t4 ran away to 55x115 (svg 24x51), breaking
   the ring. Deriving height from the svg's own width removes the loop.
   Not RTL-scoped: the defect is identical on the English page. */
.orb-tile svg{ height: auto; aspect-ratio: 1 / 1; }

/* .num sets direction:ltr so digits and a leading "+" read correctly. On an
   INLINE <bdi> that is all it does, but on a block it also flips text-align
   to the ltr start (left), stranding the value away from its Arabic label.
   The stat counters are block-level (and JS rewrites their textContent, so
   they cannot be wrapped in a bdi) — realign them explicitly. */
[dir="rtl"] .stat .n{ text-align: right; }

/* .num forces direction:ltr so a leading "+" and digit groups read correctly.
   On an inline <bdi> that is the whole effect; on a block it ALSO moves
   text-align to the ltr start (left), pulling the value away from its Arabic
   label. text-align is ignored on inline boxes, so this is safe for both. */
[dir="rtl"] .num{ text-align: right; }

/* --- RTL: letter-spacing severs Arabic ligature joins ---
   The eyebrow fix covered five classes; these label/badge styles carry the
   same smallcaps treatment (tracking 0.7-2.5px, some on monospace stacks with
   no Arabic glyphs). Tracking between Arabic letters breaks their joining
   forms — the text renders as disconnected letterforms. Scoped to [dir=rtl]
   so no English page at any width is touched. */
[dir="rtl"] .pmk-notes .c, [dir="rtl"] .c.c1, [dir="rtl"] .c.c2,
[dir="rtl"] .c.c3, [dir="rtl"] .c.c4,
[dir="rtl"] .brx-note, [dir="rtl"] .agx-repl .lbl,
[dir="rtl"] .wux-card .k, [dir="rtl"] .stx-tag,
[dir="rtl"] .inv-step, [dir="rtl"] .inv-dh, [dir="rtl"] .inv-diff b,
[dir="rtl"] .cux-panel-label, [dir="rtl"] .cux-docsel-lab,
[dir="rtl"] .pf-devs, [dir="rtl"] .aih-tag,
[dir="rtl"] .avx-strip-label, [dir="rtl"] .avx-strip span,
[dir="rtl"] .avx-k, [dir="rtl"] .webx-svc-lab, [dir="rtl"] .work-badge,
[dir="rtl"] .ftr-tag, [dir="rtl"] .stat .lab,
[dir="rtl"] .lead-form label, [dir="rtl"] .contact .k,
[dir="rtl"] .why .k, [dir="rtl"] .soon span, [dir="rtl"] .wux-badges span{
  letter-spacing: 0;
  font-family: var(--font-ar);
}
/* Latin runs inside those labels keep their own face via .ltr/bdi */

/* Second pass: these survivors are set by ID-scoped rules (#ai-vision
   .aih-tag at 1-1-0 etc.), which outrank a [dir]+class selector — the html
   prefix + matching ID wins the specificity war. */
html[dir="rtl"] #ai-vision .aih-tag,
html[dir="rtl"] #ai .avx-cr-chips span,
html[dir="rtl"] #why span,
html[dir="rtl"] #invest .inv-step,
html[dir="rtl"] #invest .inv-diff b,
html[dir="rtl"] #contact .lead-form label,
html[dir="rtl"] #contact .k,
html[dir="rtl"] #web .soon span{
  letter-spacing: 0;
}
/* monospace stacks have no Arabic — these two render Arabic copy */
html[dir="rtl"] #why .k,
html[dir="rtl"] #ai .dchips span{
  font-family: var(--font-ar); letter-spacing: 0;
}

/* --- RTL phones/tablet-portrait: hero CTA fine print ---
   The mobile tier stretches .cu-sub (flex:1 1 112px) across the row. In LTR
   its text hugs the button anyway (left-aligned inside the stretched box);
   in RTL the text aligns to the box's far right, opening a huge gap between
   the button and the fine print. Let the box shrink to its content so the
   pair sits adjacent on the start edge, mirroring the English layout. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait){
  [dir="rtl"] .hero-cu .cu-sub{
    flex: 0 1 auto; min-width: 0;
    /* keep the pair on one row: the Arabic copy runs a few px wider than the
       English, which tipped the 190px button + 14px gap over the row width
       and wrapped the fine print underneath. */
    max-width: calc(100% - 204px);
  }
}

/* --- lead form: submitted modal --- */
.lf-modal{
  position:fixed; inset:0; z-index:4000; display:grid; place-items:center;
  background:rgba(10,18,32,0.55); backdrop-filter:blur(3px);
}
.lf-modal-card{
  background:#fff; border-radius:20px; padding:34px 38px; max-width:min(420px,88vw);
  text-align:center; box-shadow:0 30px 80px rgba(2,12,27,0.35);
}
.lf-modal-ck{
  display:grid; place-items:center; width:54px; height:54px; margin:0 auto 14px;
  border-radius:50%; background:#DCFCE7; color:#15803D; font-size:26px; font-weight:700;
}
.lf-modal-card h3{ margin:0 0 8px; font-size:20px; color:var(--navy); }
.lf-modal-card p{ margin:0 0 20px; font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.lf-modal-ok{
  border:0; border-radius:999px; padding:11px 34px; cursor:pointer;
  background:var(--navy-ink,#0B1B33); color:#fff; font-weight:600; font-size:15px;
}
[dir="rtl"] .lf-modal-card{ font-family:var(--font-ar); }