/* ============================================================
   ITMAM — “Blue Air” edition
   White canvas · deep-navy ink · electric-blue light ·
   generous whitespace · bento grid · scroll-stacking cards
   Bilingual EN/AR (RTL)
   ============================================================ */

:root {
  /* canvas */
  --white:   #ffffff;
  --cloud:   #f5f7fb;
  --cloud-2: #eef2f9;
  --hair:    #e3e9f2;
  --hair-2:  #d3dce9;

  /* ink */
  --ink:     #081226;
  --ink-2:   #2c3a54;
  --muted:   #5d6b85;
  --muted-2: #93a0b7;

  /* brand blues */
  --navy:     #0b1f4b;
  --navy-deep:#040d24;
  --royal:    #1e5eff;
  --azure:    #2f7cff;
  --sky:      #38bdf8;
  --cyan:     #22d3ee;
  --icefog:   #dbeafe;

  --grad: linear-gradient(100deg, var(--navy) 0%, var(--royal) 48%, var(--sky) 100%);
  --grad-text: linear-gradient(95deg, var(--royal) 0%, var(--sky) 90%);

  /* dark band */
  --band:      #050e24;
  --band-2:    #081633;
  --band-line: rgba(148, 184, 255, .14);
  --band-text: #f2f6ff;
  --band-mut:  #8fa1c4;

  --radius:    22px;
  --radius-lg: 32px;
  --maxw:      1360px;
  --nav-h:     92px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2:    cubic-bezier(0.76, 0, 0.24, 1);

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-ar:      "Tajawal", "Segoe UI", system-ui, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip;
  scroll-padding-top: 96px; }   /* keep section titles clear of the fixed header when jumping to anchors */
/* belt-and-suspenders for scrollIntoView (section-dots rail) + anchors — skip the home "deck" snap */
html:not(.deck) section, html:not(.deck) .section { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: clip;            /* clip (not hidden): no scroll-container → smooth RTL scroll + sticky works */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: auto;
}
@media (max-width: 900px), (pointer: coarse) { body { cursor: auto; } }

html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { font-family: var(--font-ar); }

a { color: inherit; text-decoration: none; }

/* ---------- global polish ---------- */
::selection { background: rgba(47,107,255,.22); color: var(--ink); }
:focus-visible { outline: 2.5px solid #2f6bff; outline-offset: 3px; border-radius: 4px; }  /* keyboard nav */
:focus:not(:focus-visible) { outline: none; }
h1, h2, h3 { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
* { scrollbar-width: thin; scrollbar-color: #b9c5db transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #b9c5db; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #93a4c4; }
::-webkit-scrollbar-track { background: transparent; }
img { max-width: 100%; height: auto; }
.skip-link { position: fixed; inset-inline-start: 14px; top: -60px; z-index: 3000; padding: 10px 18px;
  background: var(--ink); color: #fff; border-radius: 10px; font-size: 14px; font-weight: 600;
  transition: top .25s var(--ease); }
.skip-link:focus-visible { top: 12px; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
@media (max-width: 900px), (pointer: coarse) { button { cursor: pointer; } }
::selection { background: var(--royal); color: #fff; }

/* ---------- wordmark (white png → recolor) ---------- */
.wordmark { height: 42px; width: auto; transition: opacity .3s; }  /* real black/white PNG swapped on scroll */
.foot-logo { height: 50px; width: auto; }                          /* full white lockup (has slogan) */

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 1000; background: var(--navy-deep);
  display: grid; place-items: center;
  transition: clip-path 1s var(--ease-2);
  clip-path: inset(0 0 0 0);
}
.loader.done { clip-path: inset(0 0 100% 0); }
.loader .l-inner { overflow: hidden; }
.loader .wordmark { height: clamp(32px, 6vw, 60px); animation: loaderUp 1s var(--ease) both .15s; }
.loader .l-bar { margin-top: 28px; height: 2px; width: 100%; background: rgba(255,255,255,.14);
  position: relative; overflow: hidden; border-radius: 2px; }
.loader .l-bar::after { content: ""; position: absolute; inset: 0; background: var(--grad);
  transform: scaleX(0); transform-origin: left; animation: loadbar 1.1s var(--ease-2) forwards .2s; }
@keyframes loaderUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes loadbar { to { transform: scaleX(1); } }

/* ---------- cursor ---------- */
.cursor-dot, .cursor-ring { display: none !important; }   /* custom cursor removed — use the normal pointer */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none; border-radius: 50%; }
.cursor-dot { width: 7px; height: 7px; background: var(--royal); transform: translate(-50%, -50%); }
.cursor-ring { width: 38px; height: 38px; border: 1.5px solid rgba(30,94,255,.4);
  transform: translate(-50%, -50%);
  transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s; }
.cursor-ring.hover { width: 64px; height: 64px; border-color: var(--royal); background: rgba(30,94,255,.08); }
.cursor-ring.on-dark { border-color: rgba(255,255,255,.55); }
@media (max-width: 900px), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(22px, 5vw, 64px); position: relative; z-index: 1; }
section { position: relative; }
.section { padding: clamp(60px, 8vw, 112px) 0; }
/* detail/product pages: tighter vertical rhythm — less empty space between sections.
   (Sections with inline padding-top:0 keep it; only the generous defaults shrink.) */
.detail-page .section { padding-top: clamp(38px, 4.5vw, 64px); padding-bottom: clamp(38px, 4.5vw, 64px); }
.detail-page .pg-arch { margin-top: clamp(20px, 3vw, 44px); margin-bottom: clamp(20px, 3vw, 44px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--royal); font-weight: 600; margin-bottom: 30px;
}
.eyebrow .tick { width: 22px; height: 2px; border-radius: 2px; background: var(--grad); display: inline-block; }
html[dir="rtl"] .eyebrow { letter-spacing: normal; }
.on-band .eyebrow { color: var(--sky); }

.title-lg {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(2.1rem, 5vw, 4.1rem); line-height: 1.04; color: var(--ink);
}
.accent-serif {
  font-family: var(--font-display); font-style: normal; font-weight: 500; letter-spacing: -0.03em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline-end: .04em;
}
html[dir="rtl"] .accent-serif { font-family: var(--font-ar); font-weight: 700; }
.lead { color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.25rem); max-width: 58ch; }

/* ---------- reveals (cinematic: rise + fade + soft blur) ---------- */
[data-reveal] { opacity: 0; transform: translateY(52px); filter: blur(5px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }
[data-reveal][data-delay="1"] { transition-delay: .09s; }
[data-reveal][data-delay="2"] { transition-delay: .18s; }
[data-reveal][data-delay="3"] { transition-delay: .27s; }
[data-reveal][data-delay="4"] { transition-delay: .36s; }
[data-reveal][data-delay="5"] { transition-delay: .45s; }

/* ============================================================
   NAV — minimal bar, glass pill links
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px clamp(22px, 4vw, 56px);
  transition: padding .4s var(--ease), background .4s var(--ease);
}
.nav .brand { display: inline-flex; align-items: center; flex-shrink: 0; }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  /* flat, centred links (no pill) — matches the reference nav */
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a { font-size: 15px; color: var(--ink-2); font-weight: 500; padding: 9px 16px; border-radius: 100px;
  transition: color .25s, background .25s; white-space: nowrap; }
.nav-links a:hover { color: var(--royal); background: var(--icefog); }

.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.lang-toggle {
  display: inline-flex; align-items: center; padding: 10px 17px; border-radius: 100px;
  border: 1.5px solid var(--hair-2); font-size: 13px; font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,.7); backdrop-filter: blur(10px);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.lang-toggle:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-1px); }

.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 100px;
  font-weight: 600; font-size: 15px; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s, color .35s, border-color .35s, background .35s;
  will-change: transform;
}
.btn .arrow { transition: transform .35s var(--ease); }
html[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
.btn:hover .arrow { transform: translateX(5px); }
html[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(5px); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad);
  transform: translateY(101%); transition: transform .45s var(--ease-2); border-radius: inherit; }
.btn-ink:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -8px rgba(30,94,255,.5); }
.btn-ink:hover::before { transform: none; }

.btn-line { border: 1.5px solid var(--hair-2); color: var(--ink); background: rgba(255,255,255,.6); }
.btn-line:hover { border-color: var(--ink); background: var(--ink); color: #fff; transform: translateY(-2px); }

.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(2,8,30,.4); }
.btn-line-w { border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.btn-line-w:hover { background: #fff; color: var(--navy); transform: translateY(-2px); }

.nav .btn { padding: 12px 24px; font-size: 13.5px; }
/* nav CTA as a solid blue pill (reference nav "Book a demo") */
.nav .btn-ink { background: var(--royal); }
.nav .btn-ink:hover { box-shadow: 0 16px 40px -10px rgba(30,94,255,.5); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 25px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease); }

@media (max-width: 1080px) {
  /* height uses the viewport (100dvh), NOT bottom:0 — so the nav's scroll-blur containing block
     can't shrink the drawer after scrolling. */
  /* LTR: drawer pinned to the right edge (explicit physical props override the desktop left:50%).
     RTL is handled below with the mirrored edge — mixing logical + physical props broke RTL. */
  .nav-links { position: fixed; top: 0; right: 0; left: auto;
    height: 100vh; height: 100dvh;
    width: 100vw; flex-direction: column;
    justify-content: flex-start; align-items: flex-start; gap: 13px; padding: 86px 26px 40px; border-radius: 0;
    background: rgba(255,255,255,.97); transform: translateX(100%); box-shadow: none;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transition: transform .55s var(--ease); border-inline-start: 1px solid var(--hair); }
  html[dir="rtl"] .nav-links { right: auto; left: 0; transform: translateX(-100%); }
  .nav-links.open { transform: translateX(0); }
  html[dir="rtl"] .nav-links.open { transform: translateX(0); }   /* RTL: outrank the dir rule so it opens */
  /* dim the page behind the open drawer (tap to close) */
  .nav-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(4,10,25,.5);
    opacity: 0; visibility: hidden; transition: opacity .45s var(--ease); }
  .nav-scrim.show { opacity: 1; visibility: visible; }
  .nav-links a { font-size: 18px; font-family: var(--font-display); padding: 4px 0; }
  .nav-toggle { display: flex; }
  .nav .btn-ink { display: none; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   HERO — pure white, huge air, blue aurora, floating chips
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 102px 0 48px; overflow: hidden; background: var(--white); }
#aurora { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  -webkit-mask-image: radial-gradient(120% 95% at 78% 30%, #000 25%, transparent 70%);
          mask-image: radial-gradient(120% 95% at 78% 30%, #000 25%, transparent 70%); }
html[dir="rtl"] #aurora { -webkit-mask-image: radial-gradient(120% 95% at 22% 30%, #000 25%, transparent 70%);
  mask-image: radial-gradient(120% 95% at 22% 30%, #000 25%, transparent 70%); }

/* faint blueprint grid, fades toward center */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--hair) 1px, transparent 1px),
                    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 72px 72px; opacity: .5;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 40%, transparent 35%, #000 100%);
          mask-image: radial-gradient(90% 80% at 50% 40%, transparent 35%, #000 100%);
}
.hero .wrap { z-index: 2; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; margin-bottom: 26px;
  border-radius: 100px; border: 1px solid var(--hair); background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px); font-size: 13px; color: var(--ink-2); font-weight: 500;
}
.hero-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--royal);
  box-shadow: 0 0 0 4px rgba(30,94,255,.15); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
@media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.04em;
  font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 0.99; max-width: 15ch;
  margin-bottom: 40px; color: var(--ink);
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.hero h1 .word { display: inline-block; transform: translateY(115%); animation: wordUp 1.1s var(--ease) forwards; }
@keyframes wordUp { to { transform: none; } }

.hero-sub { color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.22rem); max-width: 50ch; margin-bottom: 30px;
  opacity: 0; animation: fadeUp 1s var(--ease) .75s forwards; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  opacity: 0; animation: fadeUp 1s var(--ease) .95s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* floating product chips over the aurora */
.hero-chips { position: absolute; z-index: 1; inset-inline-end: clamp(20px, 7vw, 120px); top: 24%;
  display: flex; flex-direction: column; gap: 18px; pointer-events: none; }
.chip-card {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-radius: 16px; background: rgba(255,255,255,.8); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 44px -18px rgba(8,30,80,.25);
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink);
  opacity: 0; animation: chipIn 1s var(--ease) forwards, bob 5.5s ease-in-out infinite;
}
.chip-card:nth-child(1) { animation-delay: 1.15s, 1.15s; margin-inline-end: 44px; }
.chip-card:nth-child(2) { animation-delay: 1.3s, 2s; }
.chip-card:nth-child(3) { animation-delay: 1.45s, 3s; margin-inline-end: 70px; }
.chip-card .ci { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-size: 16px; flex-shrink: 0; }
@keyframes chipIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 1150px) { .hero-chips { display: none; } }

.scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted-2);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  opacity: 0; animation: fadeUp 1s 1.6s forwards; }
html[dir="rtl"] .scroll-hint { letter-spacing: normal; }
.scroll-hint .lineY { width: 1px; height: 46px; background: var(--hair-2); position: relative; overflow: hidden; }
.scroll-hint .lineY::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--royal); animation: drip 1.8s var(--ease-2) infinite; }
@keyframes drip { to { top: 110%; } }

/* ============================================================
   MARQUEE — outlined type on white
   ============================================================ */
.marquee { padding: clamp(40px, 6vw, 76px) 0; overflow: hidden; background: var(--white);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.marquee-track { display: flex; gap: 80px; width: max-content; animation: scrollX 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
html[dir="rtl"] .marquee-track { animation-direction: reverse; }
.marquee-track span {
  font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 3.8rem); font-weight: 600;
  letter-spacing: -0.02em; white-space: nowrap; display: inline-flex; align-items: center; gap: 80px;
  color: transparent; -webkit-text-stroke: 1.5px var(--hair-2);
  transition: color .4s, -webkit-text-stroke-color .4s;
}
.marquee-track span:hover { color: var(--royal); -webkit-text-stroke-color: var(--royal); }
html[dir="rtl"] .marquee-track span { -webkit-text-stroke: 0; color: var(--hair-2); }
html[dir="rtl"] .marquee-track span:hover { color: var(--royal); }
.marquee-track span::after { content: "◆"; color: var(--icefog); -webkit-text-stroke: 0; font-size: .35em; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ============================================================
   MANIFESTO — huge air
   ============================================================ */
.manifesto { padding: clamp(72px, 9vw, 128px) 0; background: var(--white); text-align: center; }
.manifesto .eyebrow { justify-content: center; }
.manifesto .big {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 4.6vw, 3.8rem); line-height: 1.2; max-width: 22ch; margin: 0 auto;
}
.manifesto .big .w { color: var(--hair-2); transition: color .45s var(--ease); }
.manifesto .big .w.lit { color: var(--ink); }

/* ============================================================
   PLATFORM — bento grid on cloud
   ============================================================ */
.platform { background: var(--cloud); border-radius: 0; margin: 0; }
.platform .section-head { text-align: center; max-width: 800px; margin: 0 auto clamp(56px, 7vw, 96px); }
.platform .section-head .eyebrow { justify-content: center; }
.platform .section-head .lead { margin: 26px auto 0; }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.bento-cell {
  position: relative; border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--hair); padding: 30px 30px 28px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 210px;
  transition: transform .5s var(--ease), box-shadow .5s, border-color .4s;
}
.bento-cell::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(30,94,255,.09), transparent 65%);
  transition: opacity .4s; }
.bento-cell:hover { transform: translateY(-7px); border-color: var(--hair-2);
  box-shadow: 0 34px 70px -28px rgba(8, 30, 80, .28); }
.bento-cell:hover::after { opacity: 1; }
.bento-cell .b-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--cloud-2); color: var(--royal); font-size: 23px; margin-bottom: 22px;
  transition: transform .5s var(--ease), background .4s, color .4s; }
.bento-cell:hover .b-ico { transform: translateY(-3px) rotate(-6deg) scale(1.07); background: var(--grad); color: #fff; }
.bento-cell h4 { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.bento-cell p { font-size: 14px; color: var(--muted); }
.bento-cell .b-tag { position: absolute; top: 22px; inset-inline-end: 22px; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
  border: 1px solid var(--hair); padding: 5px 11px; border-radius: 100px; }
html[dir="rtl"] .bento-cell .b-tag { letter-spacing: normal; }

/* crown cell — big gradient */
.bento-cell.crown { grid-column: span 3; grid-row: span 2; background: var(--grad);
  border-color: transparent; color: #fff; justify-content: flex-end; min-height: 430px; }
.bento-cell.crown h4 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: #fff; }
.bento-cell.crown p { color: rgba(255,255,255,.82); font-size: 15px; max-width: 40ch; }
.bento-cell.crown .b-ico { background: rgba(255,255,255,.16); color: #fff; }
.bento-cell.crown .b-tag { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35); }
.bento-cell.crown::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.85), transparent 65%); filter: blur(40px);
  top: -120px; inset-inline-end: -100px; transition: transform 1s var(--ease); }
.bento-cell.crown:hover::before { transform: scale(1.3); }
.bento-cell.crown::after { background: radial-gradient(500px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.18), transparent 60%); }

.bento-cell.w3 { grid-column: span 3; }
.bento-cell.w2 { grid-column: span 2; }
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-cell.crown, .bento-cell.w3, .bento-cell.w2 { grid-column: span 2; }
  .bento-cell.crown { min-height: 320px; }
}

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.pill { padding: 9px 17px; border-radius: 100px; border: 1px solid var(--hair-2); font-size: 13px;
  color: var(--muted); background: var(--white); transition: .3s; }
.pill:hover { color: var(--royal); border-color: var(--royal); }

/* ============================================================
   PRODUCTS — dark navy band · scroll-stacking cards
   ============================================================ */
.products { background: var(--band); color: var(--band-text); border-radius: 0;
  margin: clamp(56px, 7vw, 100px) 0; position: relative; overflow: clip; }
.products::before { content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(45% 50% at 12% 4%,  rgba(30,94,255,.30), transparent 60%),
    radial-gradient(40% 45% at 92% 40%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(35% 40% at 55% 105%, rgba(11,31,75,.8), transparent 60%);
}
.products .wrap { position: relative; z-index: 1; }
.products .title-lg { color: var(--band-text); }
.products .lead { color: var(--band-mut); }
.products .section-head { max-width: 880px; margin-bottom: clamp(34px, 4vw, 56px); }

.stack-cards { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px); }
.p-card {
  position: sticky; top: calc(var(--nav-h) + 14px);
  display: grid; grid-template-columns: 1.05fr 1fr; min-height: clamp(280px, 40vh, 384px);
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(140deg, var(--band-2), #0a1c42 65%, #0c2350);
  border: 1px solid var(--band-line);
  box-shadow: 0 -20px 60px -30px rgba(0,0,0,.8);
  transform-origin: top center; will-change: transform, filter;
}
.p-card .p-copy { padding: clamp(30px, 4vw, 56px); display: flex; flex-direction: column; }
.p-card .p-idx { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; color: var(--sky); margin-bottom: 20px; }
html[dir="rtl"] .p-card .p-idx { font-family: var(--font-ar); letter-spacing: normal; }
.p-card h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 18px; color: var(--band-text); }
.p-card .p-desc { color: var(--band-mut); font-size: 15.5px; max-width: 46ch; }
.p-card .p-feats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.p-card .p-feats span { font-size: 12.5px; padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--band-line); color: var(--band-mut); }
.p-card .p-more { margin-top: auto; padding-top: 30px; display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: #fff; }
.p-card .p-more .chip { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--band-line);
  display: grid; place-items: center; font-size: 15px; transition: .35s var(--ease); }
html[dir="rtl"] .p-card .p-more .chip { transform: scaleX(-1); }
.p-card:hover .p-more .chip { background: var(--grad); border-color: transparent; transform: rotate(-45deg); }
html[dir="rtl"] .p-card:hover .p-more .chip { transform: scaleX(-1) rotate(-45deg); }

.p-card .p-art { position: relative; overflow: hidden; display: flex; align-items: center;
  justify-content: center; padding: clamp(22px, 3vw, 40px); }
.p-card .p-art .orb { position: absolute; border-radius: 50%; filter: blur(46px); transition: transform 1.2s var(--ease); }
.p-card:hover .p-art .orb { transform: scale(1.35) rotate(20deg); }
.p-card .p-art::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px; }

.p-art-1 { background: linear-gradient(135deg, #0b1f4b, #1e5eff); }
.p-art-2 { background: linear-gradient(135deg, #041027, #16418f); }
.p-art-3 { background: linear-gradient(135deg, #1e5eff, #38bdf8); }
.p-art-4 { background: linear-gradient(135deg, #0a2540, #1573b9); }
.p-art-5 { background: linear-gradient(135deg, #12275e, #4655e0); }
.p-art-6 { background: linear-gradient(135deg, #020617, #23365c); }
.p-art-1 .orb { width: 280px; height: 280px; background: #38bdf8; top: -70px; inset-inline-end: -60px; opacity: .7; }
.p-art-2 .orb { width: 240px; height: 240px; background: #22d3ee; bottom: -80px; inset-inline-start: 12%; opacity: .55; }
.p-art-3 .orb { width: 300px; height: 300px; background: #dbeafe; top: 20%; inset-inline-end: -80px; opacity: .55; }
.p-art-4 .orb { width: 260px; height: 260px; background: #7dd3fc; top: -60px; inset-inline-start: -60px; opacity: .6; }
.p-art-5 .orb { width: 280px; height: 280px; background: #93c5fd; bottom: -90px; inset-inline-end: 8%; opacity: .55; }
.p-art-6 .orb { width: 260px; height: 260px; background: #3b82f6; bottom: -60px; inset-inline-end: -60px; opacity: .6; }

@media (max-width: 860px) {
  .p-card { grid-template-columns: 1fr; min-height: 0; }
  .p-card .p-art { min-height: 200px; order: -1; }
}

/* ============================================================
   STATS — airy numbers
   ============================================================ */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(30px, 4vw, 60px); }
.stat { text-align: center; padding: 10px 0; }
.stat .num { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(3rem, 7vw, 5.6rem); line-height: 1; color: var(--ink); }
.stat .num .plus { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .label { color: var(--muted); font-size: 14.5px; margin-top: 14px; }
@media (max-width: 760px) { .stats-row { grid-template-columns: 1fr 1fr; gap: 44px 20px; } }

/* ============================================================
   SERVICES — editorial rows
   ============================================================ */
.services { background: var(--white); }
.svc-list { border-top: 1px solid var(--hair); }
.svc-row {
  display: grid; grid-template-columns: 110px 1.2fr 1fr auto; align-items: center; gap: 30px;
  padding: clamp(32px, 4.5vw, 52px) 12px; border-bottom: 1px solid var(--hair); position: relative;
  transition: padding .45s var(--ease), background .45s;
}
.svc-row:hover { background: var(--cloud); padding-inline: 30px; }
.svc-row .s-num { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.8rem);
  color: var(--muted-2); transition: color .3s; }
html[dir="rtl"] .svc-row .s-num { font-family: var(--font-ar); font-style: normal; }
.svc-row:hover .s-num { color: var(--royal); }
.svc-row .s-name { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.05; }
.svc-row .s-desc { color: var(--muted); font-size: 14.5px; max-width: 42ch; }
.svc-row .s-plus { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--hair-2);
  display: grid; place-items: center; font-size: 20px; color: var(--ink-2); transition: .4s var(--ease); }
.svc-row:hover .s-plus { background: var(--grad); color: #fff; border-color: transparent; transform: rotate(90deg); }
@media (max-width: 820px) { .svc-row { grid-template-columns: 52px 1fr; }
  .svc-row .s-desc, .svc-row .s-plus { display: none; } }

/* ============================================================
   APPROACH — value cards
   ============================================================ */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 30px); }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }
.value { padding: 42px 36px; border-radius: var(--radius-lg); background: var(--cloud);
  border: 1px solid transparent; position: relative; overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s, background .45s, border-color .45s; }
.value:hover { transform: translateY(-8px); background: var(--white); border-color: var(--hair);
  box-shadow: 0 34px 70px -30px rgba(8, 30, 80, .3); }
.value .v-num { font-family: var(--font-serif); font-style: italic; font-size: 48px; line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 24px; }
html[dir="rtl"] .value .v-num { font-family: var(--font-ar); font-style: normal; }
.value h4 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 13px; letter-spacing: -0.01em; }
.value p { color: var(--muted); font-size: 14.5px; }

/* ============================================================
   CTA — deep blue gradient panel
   ============================================================ */
.cta { padding: 0; background: var(--white); }
.cta > .wrap { max-width: none; padding: 0; }
/* detail pages: extra top room in the CTA so its title clears the always-visible fixed header */
body.detail-page .cta-box { padding-top: clamp(108px, 11vw, 140px); padding-bottom: 50px; }
.cta-box {
  position: relative; border-radius: 0;
  padding: clamp(44px, 6vw, 80px) clamp(28px, 5vw, 64px);
  text-align: center; overflow: hidden; color: #fff;
  background:
    radial-gradient(85% 120% at 20% 0%, rgba(34,211,238,.4), transparent 55%),
    radial-gradient(85% 120% at 85% 100%, rgba(30,94,255,.55), transparent 60%),
    linear-gradient(130deg, var(--navy-deep) 0%, var(--navy) 55%, #103a8f 100%);
}
.cta-box > .eyebrow, .cta-box > h2, .cta-box > p, .cta-box > .hero-cta {
  position: relative; z-index: 1; max-width: 1180px; margin-inline: auto; }
.cta-box::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%); }
.cta-box > * { position: relative; z-index: 1; }
.cta-box .eyebrow { color: var(--sky); justify-content: center; }
.cta-box .eyebrow .tick { background: var(--sky); }
.cta-box h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(2rem, 4.8vw, 3.5rem); line-height: 1.05; margin-bottom: 18px; }
.cta-box h2 .accent-serif { background: none; -webkit-text-fill-color: currentColor; color: var(--cyan); }
.cta-box p { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0 auto 22px; }
.cta-box .hero-cta { justify-content: center; opacity: 1; animation: none; }
.cta-box .btn { padding: 11px 26px; }

/* ============================================================
   FOOTER — navy
   ============================================================ */
.footer { background: var(--navy-deep); color: var(--band-text); padding: clamp(26px, 3vw, 40px) 0 18px; }
.footer-grid { display: grid; grid-template-columns: 1.8fr repeat(4, 1fr); gap: 40px; margin-bottom: 16px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } .footer-grid .f-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .f-about { max-width: 34ch; color: var(--band-mut); font-size: 14px; line-height: 1.6; margin-top: 8px; }
.footer .f-loc { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--band-mut); }
.footer h5 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--band-mut); margin-bottom: 8px; }
html[dir="rtl"] .footer h5 { letter-spacing: normal; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.footer ul a { color: rgba(242,246,255,.8); font-size: 14px; transition: color .25s; }
.footer ul a:hover { color: var(--sky); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding-top: 14px; border-top: 1px solid var(--band-line); color: var(--band-mut); font-size: 13px; flex-wrap: wrap; }
.footer-bottom .socials { display: flex; gap: 12px; }
.footer-bottom .socials a { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--band-line);
  display: grid; place-items: center; transition: .3s; color: var(--band-mut); font-size: 13px; font-weight: 600; }
.footer-bottom .socials a:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-3px); }

/* progress bar */
.progress { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0; z-index: 200; background: var(--grad); }

/* ============================================================
   PRODUCT MOCK SCREENS — “show, don’t tell”
   ============================================================ */
.mono { font-family: var(--font-mono); }

.mock {
  width: 100%; max-width: 440px; border-radius: 14px; overflow: hidden; position: relative; z-index: 3;
  background: rgba(3, 10, 28, .82); border: 1px solid var(--band-line);
  box-shadow: 0 34px 70px -28px rgba(0,0,0,.75); backdrop-filter: blur(8px);
  font-family: var(--font-mono); direction: ltr;
  transition: transform .6s var(--ease);
}
.p-card:hover .mock { transform: translateY(-4px); }
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 11px 13px;
  background: rgba(255,255,255,.045); border-bottom: 1px solid var(--band-line); }
.mock-bar .d { width: 9px; height: 9px; border-radius: 50%; background: #2b3f68; }
.mock-bar .d:nth-child(1) { background: #ff5f57; opacity: .85; }
.mock-bar .d:nth-child(2) { background: #febc2e; opacity: .85; }
.mock-bar .d:nth-child(3) { background: #28c840; opacity: .85; }
.mock-bar .mock-title { font-size: 11px; color: var(--band-mut); margin-inline-start: 8px; }
.mock-bar .mock-live { margin-inline-start: auto; font-size: 9px; letter-spacing: .14em; color: #6fe08a;
  display: inline-flex; align-items: center; gap: 6px; }
.mock-bar .mock-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #28c840; box-shadow: 0 0 8px #28c840; animation: pulse 1.6s infinite; }
.mock-body { padding: 15px; display: flex; flex-direction: column; gap: 11px; }

/* OOH */
.mk-map { position: relative; height: 78px; border-radius: 8px; border: 1px solid var(--band-line); overflow: hidden;
  background:
    linear-gradient(rgba(30,94,255,.10), rgba(30,94,255,.02)),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(255,255,255,.03) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(255,255,255,.03) 15px 16px); }
.mk-map .pin { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--sky);
  box-shadow: 0 0 0 4px rgba(56,189,248,.18); }
.mk-map .pin.hot { background: #ff7a2f; box-shadow: 0 0 0 4px rgba(255,122,47,.22); }
.mk-metric { position: absolute; right: 9px; bottom: 7px; font-size: 9.5px; color: var(--band-mut); }
.mk-metric b { color: #fff; }
.mk-rows { display: flex; flex-direction: column; gap: 8px; }
.mk-row { display: flex; align-items: center; gap: 9px; font-size: 10px; color: var(--band-mut); }
.mk-row > span { flex: 0 0 44%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row .bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.mk-row .bar b { display: block; height: 100%; background: var(--grad); border-radius: 3px; }

/* PSIM */
.mk-grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cam { position: relative; height: 40px; border-radius: 6px; border: 1px solid var(--band-line);
  background: rgba(255,255,255,.03); font-size: 8px; color: var(--band-mut); display: flex; align-items: flex-end; padding: 5px; }
.cam .s { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #28c840; }
.cam.alarm { border-color: rgba(255,95,87,.55); background: rgba(255,95,87,.09); color: #ffb4ae; }
.cam.alarm .s { background: #ff5f57; box-shadow: 0 0 8px #ff5f57; animation: pulse 1.1s infinite; }
.mk-status { font-size: 10px; color: #ff8a84; display: flex; align-items: center; gap: 8px; }
.mk-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; box-shadow: 0 0 8px #ff5f57; }

/* VMS */
.mk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tile { height: 42px; border-radius: 6px; position: relative; overflow: hidden; border: 1px solid var(--band-line);
  background: linear-gradient(135deg, #0a1c42, #16418f); }
.tile.t1 { background: linear-gradient(135deg,#0a1c42,#16418f); }
.tile.t2 { background: linear-gradient(135deg,#102a4e,#1573b9); }
.tile.t3 { background: linear-gradient(135deg,#0c1f3a,#2b4a7e); }
.tile .rec { position: absolute; top: 5px; left: 6px; font-size: 7.5px; color: #ff7a74; display: inline-flex; align-items: center; gap: 3px; }
.tile .rec::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ff5f57; animation: pulse 1.4s infinite; }
.tile::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.045) 3px 4px); }
.mk-log { font-size: 9.5px; color: var(--band-mut); display: flex; gap: 8px; }
.mk-log b { color: #6fe08a; }

/* Insurance — AI ranked */
.mk-quotes { display: flex; flex-direction: column; gap: 6px; }
.q { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--band-line);
  font-size: 10.5px; color: var(--band-mut); }
.q b { margin-inline-start: auto; color: #fff; }
.q.best { border-color: rgba(56,189,248,.55); background: rgba(56,189,248,.09); }
.q.best em { font-style: normal; font-size: 7.5px; letter-spacing: .1em; color: #04122c; background: var(--sky);
  padding: 2px 7px; border-radius: 100px; margin-inline-start: 8px; }
.mk-cta { margin-top: 2px; font-family: inherit; font-size: 10.5px; color: #fff; background: var(--grad);
  border-radius: 8px; padding: 9px; text-align: center; }

/* Charter — seat map */
.mk-seats { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.seat { aspect-ratio: 1; border-radius: 3px; background: rgba(255,255,255,.09); }
.seat.on { background: var(--sky); } .seat.sel { background: var(--royal); }
.mk-wallet { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--band-mut); }
.mk-wallet .w-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 100px;
  border: 1px solid var(--band-line); }
.mk-wallet b { color: #fff; }

/* BOAT SaaS — tenant dashboard */
.mk-spark { width: 100%; height: 46px; display: block; }
.mk-tenants { display: flex; flex-direction: column; gap: 7px; }
.tn { display: flex; align-items: center; font-size: 10.5px; color: var(--band-mut); }
.tn .tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); margin-inline-end: 8px; }
.tn span { margin-inline-start: auto; font-size: 8px; color: #6fe08a; border: 1px solid rgba(40,200,64,.4);
  padding: 2px 8px; border-radius: 100px; }
.mk-foot { font-size: 9px; color: var(--muted-2); letter-spacing: .08em; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust { padding: clamp(38px, 4.5vw, 60px) 0; background: var(--white); text-align: center; }
.trust .t-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); }
html[dir="rtl"] .trust .t-kicker { letter-spacing: normal; font-family: var(--font-ar); }
.trust .t-sub { color: var(--muted-2); font-size: 14px; margin-top: 10px; }
.trust-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(24px, 4vw, 60px); margin-top: 40px; }
.trust-logos .cli { font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 2vw, 21px);
  color: var(--muted-2); opacity: .68; transition: .3s; letter-spacing: -.01em; }
.trust-logos .cli:hover { color: var(--navy); opacity: 1; transform: translateY(-2px); }
.t-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 40px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
html[dir="rtl"] .t-status { font-family: var(--font-ar); }
.t-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #28c840;
  box-shadow: 0 0 10px #28c840; animation: pulse 1.6s infinite; }

/* ============================================================
   AI SECTION — the clear AI statement, runpod-credible
   ============================================================ */
.ai { color: var(--band-text); border-radius: 0;
  margin: clamp(56px, 7vw, 100px) 0; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #071a3f 0%, #0c2f7a 52%, #1543a8 100%); }
/* home (mobile flow): the .ai margins opened a white gap next to the dark ecosystem section —
   close them so the dark sections meet flush (desktop deck already zeroes section margins) */
body.home #ai { margin-block: 0; }
body.home #partners { margin-top: 0; }
/* distinct from the near-black products band: bright blue + neural dot-mesh */
.ai::before { content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 50% at 84% 8%, rgba(34,211,238,.42), transparent 60%),
    radial-gradient(44% 48% at 10% 92%, rgba(56,189,248,.30), transparent 60%); }
.ai::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1.1px, transparent 1.1px);
  background-size: 24px 24px; opacity: .12;
  -webkit-mask-image: radial-gradient(80% 80% at 65% 45%, #000, transparent 82%);
          mask-image: radial-gradient(80% 80% at 65% 45%, #000, transparent 82%); }
.ai .wrap { position: relative; z-index: 1; }
.ai-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 84px); align-items: center; }
@media (max-width: 980px) { .ai-grid { grid-template-columns: 1fr; } }
.ai-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; color: var(--sky); border: 1px solid rgba(56,189,248,.4); padding: 7px 14px;
  border-radius: 100px; background: rgba(56,189,248,.07); margin-bottom: 28px; }
html[dir="rtl"] .ai-badge { letter-spacing: normal; font-family: var(--font-ar); }
.ai-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky);
  box-shadow: 0 0 10px var(--sky); animation: pulse 1.8s infinite; }
.ai .title-lg { color: var(--band-text); }
.ai .lead { color: var(--band-mut); margin-top: 24px; }
.ai-metrics { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.ai-metric { padding: 16px 20px; border-radius: 16px; border: 1px solid var(--band-line);
  background: rgba(255,255,255,.03); min-width: 120px; }
.ai-metric .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--band-mut); }
html[dir="rtl"] .ai-metric .k { letter-spacing: normal; font-family: var(--font-ar); }
.ai-metric .v { font-family: var(--font-display); font-size: 21px; color: #fff; margin-top: 6px; }

/* console */
.ai-console { max-width: none; }
.ai-stream { padding: 20px 22px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85; min-height: 236px; }
.ai-stream .l { color: var(--band-mut); white-space: pre-wrap; word-break: break-word; }
.ai-stream .l .tok { color: var(--sky); }
.ai-stream .l .pth { color: #cfe0ff; }
.ai-stream .l.out { color: #dbe7ff; }
.ai-stream .cursor { display: inline-block; width: 8px; height: 15px; background: var(--sky);
  vertical-align: -2px; margin-inline-start: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai-meta { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--band-line);
  font-size: 10.5px; color: var(--muted-2); }

/* AI flag on the bento cell */
.bento-cell .ai-flag { position: absolute; top: 22px; inset-inline-end: 22px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .12em; color: var(--sky); border: 1px solid rgba(56,189,248,.5);
  padding: 4px 9px; border-radius: 100px; background: rgba(56,189,248,.08); }
.bento-cell.ai-cell { border-color: rgba(56,189,248,.35); }
.bento-cell.ai-cell .b-ico { background: rgba(56,189,248,.12); color: var(--sky); }
.bento-cell.ai-cell:hover .b-ico { background: var(--grad); color: #fff; }

/* ============================================================
   HERO CONSTELLATION — the platform, alive
   ============================================================ */
.hero-visual { position: relative; display: grid; place-items: center; }
@media (max-width: 720px) { .hero-visual { display: none; } }
.constellation { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin-inline: auto; }
.cx-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.cx-lines line { stroke: url(#cxg); stroke-width: 1.3; stroke-dasharray: 4 9;
  animation: cxflow 2.6s linear infinite; }
@keyframes cxflow { to { stroke-dashoffset: -130; } }

.cx-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; z-index: 1; }
.cx-ring.r1 { width: 55%; height: 55%; border: 1px dashed rgba(56,189,248,.4); animation: spin 26s linear infinite; }
.cx-ring.r2 { width: 82%; height: 82%; border: 1px dashed rgba(30,94,255,.2); animation: spin 42s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.cx-hub { position: absolute; inset: 0; margin: auto; width: 116px; height: 116px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; z-index: 3;
  background: radial-gradient(circle at 32% 26%, #3f8cff, #0a1f4e 72%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset, 0 22px 60px -14px rgba(30,94,255,.7), 0 0 70px rgba(56,189,248,.4);
  animation: hubPulse 4s ease-in-out infinite; }
@keyframes hubPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset, 0 22px 60px -14px rgba(30,94,255,.7), 0 0 60px rgba(56,189,248,.35); }
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 22px 60px -14px rgba(30,94,255,.8), 0 0 92px rgba(56,189,248,.6); } }
.cx-hub .h-label { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: #fff; letter-spacing: .02em; }
.cx-hub .h-sub { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .2em; color: var(--sky); margin-top: 3px; }
html[dir="rtl"] .cx-hub .h-sub { font-family: var(--font-ar); letter-spacing: normal; }

.cx-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px;
  background: rgba(255,255,255,.92); border: 1px solid var(--hair); backdrop-filter: blur(6px);
  box-shadow: 0 14px 32px -14px rgba(8,30,80,.35); z-index: 2; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink);
  animation: bob 5.5s ease-in-out infinite; transition: transform .3s var(--ease), box-shadow .3s; }
.cx-node::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad);
  box-shadow: 0 0 8px var(--sky); flex-shrink: 0; }
.cx-node:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 18px 40px -12px rgba(30,94,255,.5);
  border-color: var(--royal); z-index: 4; }
.cx-node:nth-child(2) { animation-delay: -.4s; } .cx-node:nth-child(3) { animation-delay: -.9s; }
.cx-node:nth-child(4) { animation-delay: -1.4s; } .cx-node:nth-child(5) { animation-delay: -2s; }
.cx-node:nth-child(6) { animation-delay: -2.6s; } .cx-node:nth-child(7) { animation-delay: -3.1s; }
.cx-node:nth-child(8) { animation-delay: -3.7s; } .cx-node:nth-child(9) { animation-delay: -4.2s; }

/* ============================================================
   PLATFORM FOOTPRINT — core banner + capability grid
   ============================================================ */
.core-banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; color: #fff;
  padding: clamp(34px, 5vw, 60px); margin-bottom: clamp(16px, 2vw, 24px);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center;
  background: radial-gradient(120% 160% at 85% 10%, rgba(34,211,238,.35), transparent 55%),
              linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #103a8f); }
@media (max-width: 800px) { .core-banner { grid-template-columns: 1fr; } }
.core-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(90% 90% at 80% 20%, #000, transparent 75%);
          mask-image: radial-gradient(90% 90% at 80% 20%, #000, transparent 75%); }
.core-banner > * { position: relative; z-index: 1; }
.core-banner .cb-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sky); }
html[dir="rtl"] .core-banner .cb-kicker { letter-spacing: normal; font-family: var(--font-ar); }
.core-banner h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.05; margin: 14px 0 16px; }
.core-banner p { color: rgba(255,255,255,.82); font-size: 15px; max-width: 44ch; }
.core-banner .pill-row { justify-content: flex-start; margin-top: 26px; }
.core-banner .pill { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }
.core-banner .pill:hover { color: #fff; border-color: var(--sky); }

.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.cap { position: relative; border-radius: var(--radius); background: var(--white); border: 1px solid var(--hair);
  padding: 26px 24px; overflow: hidden; isolation: isolate; min-height: 168px; display: flex; flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s, border-color .4s; }
.cap::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(30,94,255,.09), transparent 65%);
  transition: opacity .4s; }
.cap:hover { transform: translateY(-6px); border-color: var(--hair-2); box-shadow: 0 30px 60px -26px rgba(8,30,80,.3); }
.cap:hover::after { opacity: 1; }
.cap .cap-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--cloud-2); color: var(--royal); font-size: 21px; margin-bottom: 18px;
  transition: transform .5s var(--ease), background .4s, color .4s; }
.cap:hover .cap-ico { transform: translateY(-2px) rotate(-6deg) scale(1.06); background: var(--grad); color: #fff; }
.cap h4 { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 7px; }
.cap p { font-size: 13px; color: var(--muted); line-height: 1.55; }
.cap .cap-flag { position: absolute; top: 20px; inset-inline-end: 20px; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .12em; color: var(--sky); border: 1px solid rgba(56,189,248,.5); padding: 3px 8px; border-radius: 100px;
  background: rgba(56,189,248,.08); }
.cap.flagged { border-color: rgba(56,189,248,.4); }
/* AI-flagged cells keep the same icon theme as the rest (distinction is the AI badge) */

/* ============================================================
   STATS — “by the numbers”, editorial
   ============================================================ */
.figures .fig-head { max-width: 720px; margin-bottom: clamp(46px, 6vw, 76px); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
@media (max-width: 760px) { .stats-row { grid-template-columns: 1fr 1fr; gap: 40px 20px; } }
.stat { text-align: start; padding-top: 26px; border-top: 1px solid var(--hair-2); position: relative; }
.stat::after { content: ""; position: absolute; top: -1px; inset-inline-start: 0; height: 2px; width: 0;
  background: var(--grad); transition: width 1.1s var(--ease); }
.stat.in::after { width: 46%; }
.stat .num { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; color: var(--ink); }
.stat .num .plus { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .label { color: var(--ink-2); font-size: 15px; font-weight: 600; margin-top: 14px; }
.stat .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ============================================================
   SERVICES — hover-preview showcase
   ============================================================ */
.services .section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.svc-showcase { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (max-width: 920px) { .svc-showcase { grid-template-columns: 1fr; } }
.svc-menu { display: flex; flex-direction: column; }
.svc-item { padding: 26px 10px; border-top: 1px solid var(--hair); position: relative; transition: padding .4s var(--ease); }
.svc-item:last-child { border-bottom: 1px solid var(--hair); }
.svc-item .si-top { display: flex; align-items: center; gap: 16px; }
.svc-item .si-num { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }
.svc-item .si-name { font-family: var(--font-display); font-size: clamp(1.35rem, 2.8vw, 2.1rem); font-weight: 500;
  letter-spacing: -0.02em; transition: color .3s; }
.svc-item .si-arrow { margin-inline-start: auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--hair-2); display: grid; place-items: center; color: var(--ink-2);
  transition: .4s var(--ease); font-size: 16px; }
html[dir="rtl"] .svc-item .si-arrow { transform: scaleX(-1); }
.svc-item .si-desc { color: var(--muted); font-size: 14px; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .45s var(--ease), margin-top .45s var(--ease); }
.svc-item.active { padding-inline: 20px; }
.svc-item.active .si-name { color: var(--royal); }
.svc-item.active .si-arrow { background: var(--grad); color: #fff; border-color: transparent; transform: rotate(-45deg); }
html[dir="rtl"] .svc-item.active .si-arrow { transform: scaleX(-1) rotate(-45deg); }
.svc-item.active .si-desc { max-height: 90px; opacity: 1; margin-top: 14px; }

.svc-preview { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px;
  border: 1px solid var(--band-line); background: var(--band); position: sticky; top: calc(var(--nav-h) + 16px); }
.svc-panel { position: absolute; inset: 0; padding: clamp(28px, 3vw, 46px); display: flex; flex-direction: column;
  justify-content: flex-end; opacity: 0; transform: scale(1.05); transition: opacity .55s var(--ease), transform .7s var(--ease);
  pointer-events: none; }
.svc-panel.active { opacity: 1; transform: none; }
.svc-panel .sp-grad { position: absolute; inset: 0; z-index: 0; }
.svc-panel .sp-grad::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; opacity: .6; }
.sp-g1 { background: radial-gradient(90% 90% at 20% 20%, rgba(56,189,248,.55), transparent 60%), linear-gradient(135deg, #0b1f4b, #1e5eff); }
.sp-g2 { background: radial-gradient(90% 90% at 80% 20%, rgba(34,211,238,.5), transparent 60%), linear-gradient(135deg, #041027, #16418f); }
.sp-g3 { background: radial-gradient(90% 90% at 30% 80%, rgba(125,211,252,.5), transparent 60%), linear-gradient(135deg, #12275e, #4655e0); }
.sp-g4 { background: radial-gradient(90% 90% at 80% 80%, rgba(56,189,248,.5), transparent 60%), linear-gradient(135deg, #0a2540, #1573b9); }
.svc-panel .sp-idx { position: absolute; top: clamp(24px,3vw,40px); inset-inline-start: clamp(24px,3vw,44px); z-index: 1;
  font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.7); }
.svc-panel .sp-tag { position: relative; z-index: 1; align-self: flex-start; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em; color: #fff; border: 1px solid rgba(255,255,255,.35);
  padding: 6px 13px; border-radius: 100px; margin-bottom: 18px; }
html[dir="rtl"] .svc-panel .sp-tag { letter-spacing: normal; font-family: var(--font-ar); }
.svc-panel .sp-name { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: -0.02em; color: #fff; line-height: 1.05; }
.svc-panel .sp-bullets { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.svc-panel .sp-bullets span { border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 8px 14px;
  border-radius: 100px; font-size: 12.5px; background: rgba(255,255,255,.06); }

/* ============================================================
   APPROACH — connected steps
   ============================================================ */
.values { position: relative; }
.values::before { content: ""; position: absolute; top: 74px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--hair-2), transparent); z-index: 0; }
@media (max-width: 900px) { .values::before { display: none; } }
.value { position: relative; z-index: 1; }
.value .v-step { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 16px; }
html[dir="rtl"] .value .v-step { letter-spacing: normal; font-family: var(--font-ar); }
.value .v-ico { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 24px;
  background: var(--white); border: 1px solid var(--hair); color: var(--royal); margin-bottom: 22px;
  box-shadow: 0 10px 24px -12px rgba(8,30,80,.25); transition: transform .45s var(--ease), background .4s, color .4s; }
.value:hover .v-ico { transform: translateY(-3px) rotate(-6deg); background: var(--grad); color: #fff; border-color: transparent; }

/* ============================================================
   HERO GRAPHICS — halo, orbits, data pulses, floating shapes
   ============================================================ */
/* floating geometric shapes behind the whole hero */
.hero-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hs { position: absolute; opacity: .5; }
.hs-ring { border: 1.5px solid rgba(30,94,255,.18); border-radius: 50%; }
.hs-ring.a { width: 190px; height: 190px; top: 16%; left: 6%; animation: floatY 12s ease-in-out infinite; }
.hs-ring.b { width: 90px; height: 90px; bottom: 20%; left: 40%; border-color: rgba(56,189,248,.22); animation: floatY 9s ease-in-out infinite reverse; }
.hs-tri { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent;
  border-bottom: 28px solid rgba(56,189,248,.22); top: 30%; left: 30%; animation: spinSlow 20s linear infinite, floatY 10s ease-in-out infinite; }
.hs-plus { color: rgba(30,94,255,.28); font-size: 30px; font-weight: 300; top: 62%; left: 12%; animation: floatY 8s ease-in-out infinite; }
.hs-plus.b { top: 12%; left: 46%; font-size: 20px; animation-duration: 11s; }
.hs-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 14px rgba(56,189,248,.6);
  top: 74%; left: 34%; animation: floatY 7s ease-in-out infinite; }
.hs-blob { width: 260px; height: 260px; border-radius: 50%; filter: blur(60px); opacity: .4;
  background: radial-gradient(circle, rgba(56,189,248,.5), transparent 70%); top: 8%; left: 20%; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .hs-ring.a, .hs-tri, .hs-dot { display: none; } }

/* conic halo behind the core */
.cx-halo { position: absolute; inset: 0; margin: auto; width: 168px; height: 168px; border-radius: 50%; z-index: 2;
  background: conic-gradient(from 0deg, transparent 0%, rgba(56,189,248,.55) 18%, transparent 38%, transparent 60%, rgba(30,94,255,.4) 78%, transparent 96%);
  filter: blur(3px); animation: spin 7s linear infinite; }
.cx-halo.slow { width: 210px; height: 210px; opacity: .6; animation: spin 12s linear infinite reverse; }

/* orbiting particles (graphical dots riding invisible orbits) */
.cx-orbit { position: absolute; inset: 0; margin: auto; border-radius: 50%; z-index: 2; }
.cx-orbit::before { content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translateX(-50%); background: #fff; box-shadow: 0 0 12px var(--sky), 0 0 4px #fff; }
.cx-orbit.o1 { width: 44%; height: 44%; animation: spin 9s linear infinite; }
.cx-orbit.o2 { width: 64%; height: 64%; animation: spin 15s linear infinite reverse; }
.cx-orbit.o2::before { width: 6px; height: 6px; background: var(--sky); }
.cx-orbit.o3 { width: 88%; height: 88%; animation: spin 22s linear infinite; }
.cx-orbit.o3::before { width: 7px; height: 7px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

/* data pulses travelling node → core along each spoke */
.cx-pulse { position: absolute; width: 6px; height: 6px; border-radius: 50%; z-index: 2;
  background: var(--sky); box-shadow: 0 0 10px var(--sky); transform: translate(-50%, -50%);
  animation: pulseTravel 2.6s linear infinite; }
@keyframes pulseTravel {
  0%   { left: var(--x); top: var(--y); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 50%; top: 50%; opacity: 0; }
}

/* nodes: more graphical (glassy, glowing marker) */
.cx-node { background: rgba(255,255,255,.86); box-shadow: 0 14px 34px -14px rgba(8,30,80,.4), 0 0 0 1px rgba(56,189,248,.12); }

/* ============================================================
   HERO v3 — split: message + large animated AI core
   ============================================================ */
#neural { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  -webkit-mask-image: radial-gradient(130% 95% at 60% 40%, #000 40%, transparent 84%);
          mask-image: radial-gradient(130% 95% at 60% 40%, #000 40%, transparent 84%); }
.hero-split { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr 0.98fr;
  align-items: center; gap: clamp(20px, 4vw, 56px); }
@media (max-width: 960px) { .hero-split { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 48px); } }
.hero-copy { max-width: 620px; }
.hero-copy .hero-sub { margin-inline: 0; }
.hero h1 { font-size: clamp(2.3rem, 4.7vw, 4.2rem); line-height: 0.98; max-width: 15ch; margin: 0 0 20px; }
.hero h1 .ht-line { display: block; }

/* fixed single-line height so changing word length never reflows the copy below */
.rotator { display: block; position: relative; overflow: hidden; white-space: nowrap;
  height: 1.15em; line-height: 1.15; }
.rot-word { display: inline-block; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;
  background: linear-gradient(92deg, var(--royal), var(--sky)); -webkit-background-clip: text; background-clip: text;
  color: transparent; transition: transform .5s var(--ease), opacity .4s var(--ease); }
html[dir="rtl"] .rot-word { font-family: var(--font-ar); font-weight: 700; }
.rot-word.out { transform: translateY(-100%); opacity: 0; }
.rot-word.pre { transform: translateY(100%); opacity: 0; }

.hero-spectrum { display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 16px; margin-top: clamp(22px, 3vh, 36px); padding-top: 22px; position: relative;
  opacity: 0; animation: fadeUp 1s var(--ease) 1.25s forwards; }
.hero-spectrum::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 88%; height: 1px;
  background: linear-gradient(90deg, var(--royal) 0%, var(--sky) 60%, transparent); }
html[dir="rtl"] .hero-spectrum::before { background: linear-gradient(270deg, var(--royal) 0%, var(--sky) 60%, transparent); }
.hero-spectrum .sp-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--royal); }
html[dir="rtl"] .hero-spectrum .sp-label { letter-spacing: normal; font-family: var(--font-ar); }
.hero-spectrum .sp-ind { font-family: var(--font-display); font-weight: 500; font-size: 13.5px; color: var(--ink-2); }
.hero-spectrum .sp-sep { width: 5px; height: 5px; border-radius: 50%; background: var(--hair-2); }
@media (max-width: 620px) { .hero-spectrum .sp-sep { display: none; } }

/* ---------------- large AI core ---------------- */
.hero-core { position: relative; z-index: 2; width: 100%; max-width: clamp(340px, 42vw, 540px);
  aspect-ratio: 1; margin-inline: auto; justify-self: center; }
@media (max-width: 960px) { .hero-core { max-width: 380px; } }
@media (max-width: 480px) { .hero-core { max-width: 300px; } }
.hero-core > span, .hero-core > div { position: absolute; }

.hc-glow { inset: 8%; border-radius: 50%; z-index: 0; filter: blur(48px);
  background: radial-gradient(circle, rgba(56,189,248,.6), rgba(30,94,255,.28) 45%, transparent 72%);
  animation: orbPulse 4.2s ease-in-out infinite; }
.hc-grid { inset: 0; border-radius: 50%; z-index: 1; opacity: .5;
  background-image: radial-gradient(rgba(30,94,255,.35) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%);
          mask-image: radial-gradient(circle, #000 55%, transparent 72%); }

.hc-sphere { inset: 33%; border-radius: 50%; z-index: 4; overflow: hidden;
  background: radial-gradient(circle at 34% 26%, #cfe6ff 0%, #4a91ff 34%, #1a52d6 62%, #08245e 100%);
  box-shadow: 0 0 60px rgba(56,189,248,.6), inset 0 -10px 26px rgba(3,10,40,.75), inset 0 8px 20px rgba(255,255,255,.5);
  animation: orbPulse 4.2s ease-in-out infinite; }
.hc-sphere .hc-shine { position: absolute; inset: -25%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,.6) 14%, transparent 32%, transparent 64%, rgba(120,200,255,.5) 82%, transparent 100%);
  mix-blend-mode: screen; animation: spin 5s linear infinite; }
.hc-sphere .hc-spark { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  font-size: clamp(22px, 3vw, 34px); color: #fff; text-shadow: 0 0 18px rgba(180,220,255,.95); animation: sparkle 4.2s ease-in-out infinite; }

.hc-orbit { inset: 0; border-radius: 50%; border: 1px solid rgba(56,189,248,.28); z-index: 3; }
.hc-orbit.ob1 { animation: spin 18s linear infinite; }
.hc-orbit.ob2 { inset: 13%; border-color: rgba(30,94,255,.24); border-style: dashed; animation: spin 26s linear infinite reverse; }
.hc-orbit.ob3 { inset: 24%; border-color: rgba(56,189,248,.32); animation: spin 12s linear infinite; }
.hc-orbit .hc-sat { position: absolute; top: -5px; left: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translateX(-50%); background: #fff; box-shadow: 0 0 14px var(--sky), 0 0 5px #fff; }
.hc-orbit.ob2 .hc-sat { width: 9px; height: 9px; background: var(--sky); box-shadow: 0 0 12px var(--sky); }
.hc-orbit.ob3 .hc-sat { width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); top: auto; bottom: -4px; }

/* particle streams converging INTO the core (coherent inward direction) */
.hc-stream { top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; z-index: 3;
  background: var(--sky); box-shadow: 0 0 10px var(--sky);
  animation: streamIn 3s linear infinite; }
.hc-stream.s1 { --a: 20deg;  animation-delay: 0s; }
.hc-stream.s2 { --a: 130deg; animation-delay: .8s; }
.hc-stream.s3 { --a: 235deg; animation-delay: 1.5s; }
.hc-stream.s4 { --a: 310deg; animation-delay: 2.2s; }
@keyframes streamIn {
  0%   { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-150px) rotate(calc(var(--a) * -1)); opacity: 0; }
  20%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-42px) rotate(calc(var(--a) * -1)); opacity: 0; }
}

/* floating AI keyword chips */
.hc-kw { z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 100px;
  background: rgba(255,255,255,.92); border: 1px solid var(--hair); backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px -14px rgba(8,30,80,.4); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: var(--ink-2); white-space: nowrap; animation: bob 6s ease-in-out infinite; }
.hc-kw i { width: 6px; height: 6px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px var(--sky); }
.hc-kw.k1 { top: 6%;  left: -6%;  animation-delay: -0.5s; }
.hc-kw.k2 { top: 20%; right: -8%; animation-delay: -2s; }
.hc-kw.k3 { bottom: 20%; left: -10%; animation-delay: -3.5s; }
.hc-kw.k4 { bottom: 4%; right: -4%; animation-delay: -1.2s; }
@media (max-width: 480px) { .hc-kw { display: none; } }

/* ---------------- SaaS Portal nav link (conversion) ---------------- */
/* SaaS Portal removed from the main nav (desktop + mobile) */
.nav-links .saas-link { display: none !important; align-items: center; gap: 6px; color: var(--royal);
  font-weight: 600; background: rgba(30,94,255,.08); border: 1px solid rgba(30,94,255,.28); }
.nav-links .saas-link::after { display: none; }
.nav-links .saas-link:hover { background: var(--royal); color: #fff; }
.saas-link .ext { font-size: 12px; line-height: 1; }
html[dir="rtl"] .saas-link .ext { transform: scaleX(-1); }
.nav.on-dark .nav-links .saas-link { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.nav.on-dark .nav-links .saas-link:hover { background: #fff; color: var(--navy); }

/* drawer footer (logo + social icons) lives only inside the mobile slide-in menu */
.nav-foot { display: none; }
@media (max-width: 1080px) { .nav-links .saas-link { align-self: flex-start; } }

/* slogan aligns to the taller logo */
.brand-tag { align-self: center; }

/* header protection backdrop on scroll — light & subtle */
.nav.scrolled { padding-top: 13px; padding-bottom: 13px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 var(--hair), 0 12px 40px -30px rgba(20,32,94,.5); }
.nav.on-dark.scrolled { background: rgba(6,16,40,.28); box-shadow: 0 3px 18px -16px rgba(0,0,0,.35); }

/* nav lockup logo (wordmark + slogan baked in), larger */
.navlogo { height: 56px; width: auto; display: block; transition: height .3s var(--ease); }
.nav.scrolled .navlogo { height: 48px; }
@media (max-width: 1080px) { .navlogo { height: 50px; } }
@media (max-width: 380px) { .navlogo, .nav.scrolled .navlogo { height: 34px; } }

/* Z-Fold / very narrow front screens (~280–380px) */
@media (max-width: 380px) {
  .nav { padding: 11px 14px; gap: 10px; }
  .lang-toggle { padding: 7px 11px; font-size: 12px; }
  .nav-toggle { padding: 6px; }
  .wrap { padding: 0 18px; }
}

/* ============================================================
   HERO PRODUCT-UI MONTAGE (concrete product screens)
   ============================================================ */
.hero-montage { position: relative; z-index: 2; width: 100%; max-width: clamp(360px, 44vw, 560px);
  aspect-ratio: 1 / 0.9; margin-inline: auto; justify-self: center; perspective: 1500px; }
@media (max-width: 960px) { .hero-montage { max-width: 480px; margin-top: 8px; } }

.hm-glow { position: absolute; inset: 6% 6% 12% 6%; z-index: 0; filter: blur(52px); border-radius: 42%;
  background: radial-gradient(circle at 60% 42%, rgba(56,189,248,.5), rgba(30,94,255,.24) 50%, transparent 74%);
  animation: orbPulse 5s ease-in-out infinite; }

.hm-win { position: absolute; border-radius: 15px; overflow: hidden; z-index: 2;
  background: linear-gradient(160deg, #0a1c42, #071634 70%, #0a1f4a);
  border: 1px solid rgba(120,160,255,.16); font-family: var(--font-mono);
  box-shadow: 0 40px 80px -30px rgba(6,20,60,.6), 0 10px 26px -14px rgba(6,20,60,.5); }
.hm-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(120,160,255,.12); }
.hm-bar.sm { padding: 7px 10px; }
.hm-bar .d { width: 8px; height: 8px; border-radius: 50%; background: #2b3f68; }
.hm-bar .d:nth-child(1){ background:#ff5f57 } .hm-bar .d:nth-child(2){ background:#febc2e } .hm-bar .d:nth-child(3){ background:#28c840 }
.hm-bar .hm-url { font-size: 10px; color: var(--band-mut); margin-inline-start: 8px; }
.hm-bar .hm-live { margin-inline-start: auto; font-size: 8.5px; letter-spacing: .12em; color: #6fe08a;
  display: inline-flex; align-items: center; gap: 5px; }
.hm-bar .hm-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #28c840;
  box-shadow: 0 0 8px #28c840; animation: pulse 1.6s infinite; }

/* main dashboard */
.hm-main { top: 4%; inset-inline-start: 0; width: 82%; transform: rotateY(6deg) rotateX(2deg);
  transform-origin: left center; animation: floatY 8s ease-in-out infinite; }
html[dir="rtl"] .hm-main { transform: rotateY(-6deg) rotateX(2deg); transform-origin: right center; }
.hm-app { display: grid; grid-template-columns: 42px 1fr; }
.hm-side { padding: 12px 8px; display: flex; flex-direction: column; gap: 9px; align-items: center;
  border-inline-end: 1px solid rgba(120,160,255,.1); background: rgba(255,255,255,.02); }
.hm-logo { width: 20px; height: 20px; border-radius: 6px; background: var(--grad); box-shadow: 0 0 10px rgba(56,189,248,.5); }
.hm-nav { width: 20px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); }
.hm-nav.on { background: var(--sky); box-shadow: 0 0 8px rgba(56,189,248,.6); width: 22px; }
.hm-content { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 11px; }
.hm-head { display: flex; align-items: center; justify-content: space-between; }
.hm-title { width: 44%; height: 9px; border-radius: 4px; background: rgba(255,255,255,.22); }
.hm-pill { width: 46px; height: 16px; border-radius: 100px; background: var(--grad); }
.hm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hm-kpi { padding: 9px 9px; border-radius: 9px; border: 1px solid rgba(120,160,255,.14); background: rgba(255,255,255,.03); }
.hm-kpi .kl { display: block; font-size: 7px; letter-spacing: .08em; color: var(--band-mut); }
.hm-kpi .kv { display: block; font-size: 12.5px; color: #fff; margin-top: 3px; font-weight: 500; }
.hm-kpi.acc { border-color: rgba(56,189,248,.5); background: rgba(56,189,248,.08); }
.hm-kpi.acc .kv { color: var(--sky); }
.hm-chart { height: 72px; border-radius: 9px; border: 1px solid rgba(120,160,255,.12);
  background: rgba(255,255,255,.02); overflow: hidden; padding: 6px; }
.hm-chart svg { width: 100%; height: 100%; display: block; }
.hm-rows { display: flex; flex-direction: column; gap: 6px; }
.hm-rows span { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); }
.hm-rows span:nth-child(2) { width: 82%; } .hm-rows span:nth-child(3) { width: 62%; }

/* floating AI console */
.hm-ai { top: 0; inset-inline-end: 0; width: 47%; z-index: 4; transform: rotateY(-8deg);
  transform-origin: right center; animation: floatY 7s ease-in-out infinite -1.5s; }
html[dir="rtl"] .hm-ai { transform: rotateY(8deg); transform-origin: left center; }
.hm-ai-body { padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 10px; line-height: 1.5; }
.hm-ai-body .l { color: var(--band-mut); white-space: nowrap; }
.hm-ai-body .l b { color: var(--sky); }
.hm-ai-body .l.dim { color: var(--muted-2); }
.hm-ai-body .l.out { color: #cfe0ff; }

/* floating metric card */
.hm-metric { bottom: 2%; inset-inline-start: 8%; width: 40%; z-index: 5; padding: 13px 15px 15px;
  display: flex; flex-direction: column; gap: 4px; transform: rotateY(5deg);
  animation: floatY 9s ease-in-out infinite -3s; }
html[dir="rtl"] .hm-metric { transform: rotateY(-5deg); }
.hm-metric .hm-m-label { font-size: 8px; letter-spacing: .12em; color: var(--band-mut); }
.hm-metric .hm-m-row { display: flex; align-items: center; gap: 10px; }
.hm-metric .hm-m-val { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: #fff; }
.hm-metric .hm-spark { width: 56px; height: 22px; }
.hm-metric .hm-m-sub { font-size: 9px; color: var(--band-mut); }
@media (max-width: 480px) { .hm-main { width: 88%; } .hm-ai { width: 54%; } .hm-metric { width: 48%; } }

/* ============================================================
   NAV DROPDOWN (Company)
   ============================================================ */
/* ---------------- section-dots navigator (side rail) ---------------- */
/* dots are the ONLY in-flow content (uniform width) so they form a straight line in LTR and RTL;
   the label is absolutely positioned beside the dot, toward the screen centre. */
.snav { position: fixed; inset-inline-end: 24px; top: 50%; transform: translateY(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 15px; align-items: center; }
.snav a { position: relative; display: grid; place-items: center; color: var(--muted-2); }
.snav .lbl { position: absolute; top: 50%; white-space: nowrap; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; opacity: 0; transition: .3s var(--ease); pointer-events: none;
  right: calc(100% + 11px); transform: translateY(-50%) translateX(6px); }
html[dir="rtl"] .snav .lbl { right: auto; left: calc(100% + 11px); transform: translateY(-50%) translateX(-6px);
  font-family: var(--font-ar); letter-spacing: normal; }
.snav a:hover .lbl, .snav a.on .lbl { opacity: 1; transform: translateY(-50%); color: var(--royal); }
.snav .d { width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--muted-2); background: transparent; transition: .3s var(--ease); }
.snav a.on .d { background: var(--royal); border-color: var(--royal); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(30,94,255,.15); }
.snav a:hover .d { border-color: var(--royal); }
/* over a dark section the rail label turns white (dots lighten for contrast) */
.snav.on-dark a.on .lbl, .snav.on-dark a:hover .lbl { color: #fff; }
.snav.on-dark .d { border-color: rgba(255,255,255,.5); }
@media (max-width: 1160px) { .snav { display: none; } }

.nav-drop { position: relative; }
.nav-drop-t { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: var(--ink-2);
  font-weight: 500; padding: 9px 16px; border-radius: 100px; transition: color .25s, background .25s; white-space: nowrap; }
.nav-drop-t .caret { font-size: 9px; transition: transform .25s; }
.nav-drop:hover .nav-drop-t { color: var(--royal); background: var(--icefog); }
.nav-drop:hover .nav-drop-t .caret { transform: rotate(180deg); }
.nav-drop-menu { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; transform: translateY(8px);
  min-width: 200px; padding: 8px; border-radius: 16px; background: rgba(255,255,255,.97); backdrop-filter: blur(16px);
  border: 1px solid var(--hair); box-shadow: 0 20px 50px -16px rgba(8,30,80,.28);
  display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transition: .3s var(--ease); z-index: 20; }
/* transparent bridge across the 10px gap so moving the cursor from the trigger to the
   menu doesn't cross a non-hover dead zone and close it mid-move */
.nav-drop-menu::before { content: ""; position: absolute; top: -14px; inset-inline: 0; height: 14px; }
.nav-drop:hover .nav-drop-menu, .nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop-menu a { padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--ink-2); font-weight: 500; transition: .2s; }
.nav-drop-menu a::after { display: none; }
.nav-drop-menu a:hover { background: var(--cloud-2); color: var(--ink); }
.nav.on-dark .nav-drop-t { color: rgba(255,255,255,.78); }
.nav.on-dark .nav-drop:hover .nav-drop-t { color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 1080px) {
  .nav-drop { width: 100%; }
  .nav-drop-t { font-size: 18px; font-family: var(--font-display); padding: 4px 0; }
  .nav-drop-menu { position: static; transform: none !important; opacity: 1; visibility: visible; background: none;
    border: none; box-shadow: none; padding: 6px 0 0 14px; min-width: 0; backdrop-filter: none; }
  html[dir="rtl"] .nav-drop-menu { padding: 6px 14px 0 0; }
  .nav-drop-menu a { font-size: 14px; padding: 6px 0; }
}

/* ============================================================
   MANIFESTO enrichment (Who we are)
   ============================================================ */
.manifesto { position: relative; overflow: hidden; }
.man-orb { position: absolute; top: -12%; inset-inline-end: -6%; width: 440px; height: 440px; border-radius: 50%;
  z-index: 0; filter: blur(72px); opacity: .5;
  background: radial-gradient(circle, rgba(56,189,248,.42), rgba(30,94,255,.2) 50%, transparent 72%);
  animation: orbPulse 6s ease-in-out infinite; }
.manifesto .wrap { position: relative; z-index: 1; }
.man-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 52px); margin-top: clamp(40px, 5vw, 64px); }
.man-badges .mb { display: inline-flex; align-items: baseline; gap: 2px; }
.man-badges .mb b { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.man-badges .mb .plus { font-family: var(--font-display); font-size: 1.2rem; color: var(--sky); align-self: flex-start; }
.man-badges .mb em { font-style: normal; font-size: 13.5px; color: var(--muted); margin-inline-start: 7px; }

/* ============================================================
   USE CASES
   ============================================================ */
.uc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 780px) { .uc-grid { grid-template-columns: 1fr; } }
.uc-card { position: relative; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--hair);
  padding: clamp(26px, 3vw, 34px); overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  transition: transform .45s var(--ease), box-shadow .45s, border-color .4s; }
.uc-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at 80% 0%, rgba(30,94,255,.07), transparent 60%); transition: opacity .4s; }
.uc-card:hover { transform: translateY(-6px); border-color: var(--hair-2); box-shadow: 0 32px 68px -28px rgba(8,30,80,.28); }
.uc-card:hover::after { opacity: 1; }
.uc-card .uc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.uc-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--royal);
  border: 1px solid rgba(30,94,255,.28); padding: 5px 11px; border-radius: 100px; background: rgba(30,94,255,.05); white-space: nowrap; }
html[dir="rtl"] .uc-tag { letter-spacing: normal; font-family: var(--font-ar); }
.uc-metric { text-align: end; flex-shrink: 0; }
.uc-metric b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.uc-metric em { font-style: normal; font-size: 11px; color: var(--muted); }
.uc-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.uc-card p { color: var(--muted); font-size: 14.5px; }

/* ============================================================
   ASSURANCE
   ============================================================ */
.assurance { background: var(--cloud); }
.assur-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 900px) { .assur-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .assur-grid { grid-template-columns: 1fr; } }
.assur { padding: 28px 22px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--hair);
  transition: transform .4s var(--ease), box-shadow .4s; }
.assur:hover { transform: translateY(-5px); box-shadow: 0 24px 54px -26px rgba(8,30,80,.24); }
.assur .a-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 20px;
  background: var(--cloud-2); color: var(--royal); margin-bottom: 16px; }
.assur h4 { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; margin-bottom: 7px; }
.assur p { color: var(--muted); font-size: 13px; }

/* ============================================================
   KNOWLEDGE
   ============================================================ */
.kn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 820px) { .kn-grid { grid-template-columns: 1fr; } }
.kn-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hair); background: var(--white);
  display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s; }
.kn-card:hover { transform: translateY(-6px); box-shadow: 0 32px 68px -28px rgba(8,30,80,.26); }
.kn-art { height: 118px; position: relative; overflow: hidden; }
.kn-art::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px; }
.kn-art-1 { background: linear-gradient(135deg, #0b1f4b, #1e5eff); }
.kn-art-2 { background: linear-gradient(135deg, #12275e, #38bdf8); }
.kn-art-3 { background: linear-gradient(135deg, #0a2540, #22d3ee); }
.kn-art .kn-cat { position: absolute; bottom: 12px; inset-inline-start: 14px; z-index: 1; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; color: #fff; border: 1px solid rgba(255,255,255,.45); padding: 4px 9px; border-radius: 100px; }
html[dir="rtl"] .kn-art .kn-cat { letter-spacing: normal; font-family: var(--font-ar); }
.kn-b { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.kn-b h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.32; letter-spacing: -0.01em; }
.kn-b .kn-meta { margin-top: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
  display: flex; align-items: center; gap: 8px; }
.kn-b .kn-meta .arrow { margin-inline-start: auto; color: var(--royal); font-size: 14px; transition: transform .3s var(--ease); }
html[dir="rtl"] .kn-b .kn-meta .arrow { transform: scaleX(-1); }
.kn-card:hover .kn-meta .arrow { transform: translateX(4px); }
html[dir="rtl"] .kn-card:hover .kn-meta .arrow { transform: scaleX(-1) translateX(4px); }

/* ============================================================
   CAREERS
   ============================================================ */
.career-box { position: relative; border-radius: clamp(28px, 4vw, 44px); overflow: hidden; color: #fff;
  padding: clamp(48px, 7vw, 92px) clamp(28px, 5vw, 76px);
  background: radial-gradient(90% 130% at 85% 8%, rgba(34,211,238,.35), transparent 55%),
              linear-gradient(120deg, var(--navy-deep), var(--navy) 60%, #103a8f); }
.career-box::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 60px 60px; -webkit-mask-image: radial-gradient(80% 80% at 70% 40%, #000, transparent 100%);
          mask-image: radial-gradient(80% 80% at 70% 40%, #000, transparent 100%); }
.career-copy { position: relative; z-index: 1; max-width: 640px; }
.career-box .eyebrow { color: var(--sky); }
.career-box .title-lg { color: #fff; margin: 14px 0 16px; }
.career-box p { color: rgba(255,255,255,.82); margin-bottom: 26px; max-width: 46ch; }
.career-roles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.career-roles span { border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 8px 15px; border-radius: 100px;
  font-size: 13px; background: rgba(255,255,255,.05); transition: .25s; }
.career-roles span:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }

/* ============================================================
   AI ASSISTANT WIDGET (signature gesture)
   ============================================================ */
.ai-widget { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 300; font-family: var(--font-body); }
.aiw-fab { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 9px; border-radius: 100px;
  background: var(--ink); color: #fff; box-shadow: 0 16px 40px -12px rgba(8,30,80,.5);
  transition: transform .3s var(--ease), box-shadow .3s; }
html[dir="rtl"] .aiw-fab { padding: 9px 9px 9px 18px; }
.aiw-fab:hover { transform: translateY(-3px); box-shadow: 0 22px 52px -12px rgba(30,94,255,.55); }
.aiw-fab-core { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); box-shadow: 0 0 16px rgba(56,189,248,.6); }
.aiw-fab-core::after { display: none; }   /* pulse ring removed — its scale animation overflowed the viewport → horizontal scroll on mobile */
.aiw-spark { font-size: 15px; color: #fff; animation: sparkle 3s ease-in-out infinite; }
.aiw-fab-label { font-size: 14px; font-weight: 600; }
@media (max-width: 560px) { .aiw-fab-label { display: none; } .aiw-fab { padding: 8px; } }

.aiw-panel { position: absolute; bottom: calc(100% + 14px); inset-inline-end: 0; width: min(360px, calc(100vw - 30px));
  border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--hair);
  box-shadow: 0 34px 74px -20px rgba(8,30,80,.42); opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.97); transform-origin: bottom right; transition: .32s var(--ease); }
html[dir="rtl"] .aiw-panel { transform-origin: bottom left; }
.ai-widget.open .aiw-panel { opacity: 1; visibility: visible; transform: none; }
.aiw-head { display: flex; align-items: center; gap: 12px; padding: 15px 16px; color: #fff;
  background: linear-gradient(120deg, var(--navy), var(--royal)); }
.aiw-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 17px;
  background: rgba(255,255,255,.18); box-shadow: 0 0 14px rgba(56,189,248,.4); }
.aiw-id { display: flex; flex-direction: column; line-height: 1.25; }
.aiw-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.aiw-status { font-size: 11px; color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: 6px; }
.aiw-status i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.aiw-close { margin-inline-start: auto; color: rgba(255,255,255,.85); font-size: 14px; }
.aiw-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; background: var(--cloud); }
.aiw-msg { max-width: 86%; padding: 10px 14px; border-radius: 15px; font-size: 13.5px; line-height: 1.55; }
.aiw-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--hair); color: var(--ink-2); border-end-start-radius: 4px; }
.aiw-msg.user { align-self: flex-end; background: var(--ink); color: #fff; border-end-end-radius: 4px; }
.aiw-typing { display: inline-flex; gap: 4px; align-items: center; }
.aiw-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); animation: typing 1.2s infinite; }
.aiw-typing i:nth-child(2) { animation-delay: .2s; } .aiw-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.aiw-prompts { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; background: var(--cloud); }
.aiw-prompts button { font-size: 12px; padding: 7px 12px; border-radius: 100px; border: 1px solid var(--hair-2);
  background: #fff; color: var(--royal); transition: .2s; }
.aiw-prompts button:hover { background: var(--royal); color: #fff; border-color: var(--royal); }
.aiw-input { display: flex; align-items: center; gap: 8px; padding: 11px 12px 11px 16px; border-top: 1px solid var(--hair); background: #fff; }
.aiw-input input { flex: 1; border: none; font-family: inherit; font-size: 13.5px; color: var(--ink); background: transparent; }
.aiw-input input:focus { outline: none; }                      /* container carries the focus ring instead */
.aiw-input:focus-within { border-color: #2f6bff; box-shadow: 0 0 0 3px rgba(47,107,255,.18); }
.aiw-input button { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
html[dir="rtl"] .aiw-input button { transform: scaleX(-1); }
@media (max-width: 900px), (pointer: coarse) {
  .aiw-fab, .aiw-close, .aiw-prompts button, .aiw-input button, .nav-drop-t { cursor: pointer; }
}

/* ============================================================
   SCROLL JOURNEY — reveal variants + parallax targets
   ============================================================ */
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="scale"] { transform: scale(.93); }
html[dir="rtl"] [data-reveal="left"]  { transform: translateX(48px); }
html[dir="rtl"] [data-reveal="right"] { transform: translateX(-48px); }
[data-reveal].in { transform: none; }
/* RTL: the .in reset above (specificity 0,2,0) loses to the directional rules (0,2,1), so once
   revealed a right/left element stayed offset (e.g. the AI console slid off the left edge).
   This higher-specificity reset makes revealed RTL elements settle to none. */
html[dir="rtl"] [data-reveal].in { transform: none; }
.man-orb { animation: none; will-change: transform; }   /* now parallax-driven */
[data-parallax] { will-change: transform; }

/* word-by-word heading reveal (mask + rise) — the signature scroll move.
   Word state (hidden→shown) is set via INLINE styles in JS so it can't be
   dropped by the renderer's cascade quirk; CSS only supplies the transition. */
.wl { display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .12em; margin-bottom: -.12em; line-height: inherit; }
.wi { display: inline-block; transition: transform 1s var(--ease), opacity .7s var(--ease); }
.title-lg[data-reveal] { opacity: 1; transform: none; filter: none; }  /* words carry the reveal */

/* product sub-brand logo on cards */
.p-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.p-logo { height: 24px; width: auto; opacity: .96; }
html[dir="rtl"] .p-logo { }

/* knowledge: breathing room + life */
.knowledge .section-head { margin-bottom: clamp(40px, 5vw, 66px); }
.usecases .section-head { margin-bottom: clamp(34px, 4vw, 56px); }
/* ============================================================
   USE CASES — fit the whole section within ONE screen:
   3 cards per row, compact heading + type, no scroll (desktop/tablet).
   Mobile (≤780px) keeps 1 column and scrolls naturally.
   ============================================================ */
@media (min-width: 781px) {
  /* fill one screen, but CENTER the (compact) content — don't stretch the cards */
  .usecases { min-height: 100vh; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(var(--nav-h) + clamp(12px, 2vh, 24px));
    padding-bottom: clamp(14px, 2.4vh, 32px); }

  /* heading + CTA on ONE row (were overlapping), tighter spacing + smaller title */
  .usecases .section-head.head-flex { display: flex; align-items: center; justify-content: space-between;
    gap: 24px; margin-bottom: clamp(18px, 2.6vh, 34px); }
  .usecases .section-head .eyebrow { margin-bottom: clamp(6px, 1vh, 14px); }
  .usecases .title-lg { font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.05; }
  .usecases .section-head .btn { flex: 0 0 auto; }

  /* 3 cards per row; cards size to their CONTENT (no tall empty boxes) */
  .usecases .uc-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vh, 22px); }
  .usecases .uc-card { padding: clamp(18px, 2.2vh, 28px); gap: clamp(8px, 1.2vh, 14px); }
  .usecases .uc-card h3 { font-size: clamp(15px, 1.1vw, 18px); }
  .usecases .uc-card p { font-size: clamp(12.5px, 0.9vw, 13.5px); line-height: 1.45; }
  .usecases .uc-card .uc-metric b { font-size: clamp(1.15rem, 1.7vw, 1.55rem); }
}
.kn-art { transition: transform .6s var(--ease); }
.kn-card:hover .kn-art { transform: scale(1.05); }
.kn-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.32) 50%, transparent 66%);
  transform: translateX(-130%); transition: transform .9s var(--ease); }
.kn-card:hover .kn-shine { transform: translateX(130%); }

/* ============================================================
   CAREERS — redesigned light & distinct (was a twin of the CTA)
   ============================================================ */
.careers-sec { background: var(--white); }
.careers-split { position: relative; display: grid; grid-template-columns: 1.05fr 0.9fr; gap: clamp(30px, 4vw, 60px);
  align-items: center; border: 1px solid var(--hair); border-radius: clamp(24px, 3vw, 38px);
  padding: clamp(34px, 5vw, 62px); background: linear-gradient(160deg, var(--cloud), var(--white)); overflow: hidden; }
@media (max-width: 860px) { .careers-split { grid-template-columns: 1fr; } }
.careers-sec .career-copy { max-width: 560px; }
.careers-sec .eyebrow { color: var(--royal); }
.careers-sec .title-lg { color: var(--ink); margin: 14px 0 14px; }
.careers-sec .career-copy p { color: var(--muted); margin-bottom: 24px; max-width: 42ch; }
.careers-sec .career-roles span { border-color: var(--hair-2); color: var(--ink-2); background: var(--white); }
.careers-sec .career-roles span:hover { border-color: var(--royal); color: var(--royal); background: var(--cloud-2); }
.careers-visual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 860px) { .careers-visual { max-width: 320px; } }
.careers-visual .tile { aspect-ratio: 1; border-radius: 12px; background: var(--cloud-2); border: 1px solid var(--hair);
  animation: tilePulse 4.5s ease-in-out infinite; }
.careers-visual .tile.g { background: var(--grad); border-color: transparent; box-shadow: 0 8px 24px -8px rgba(30,94,255,.45); }
.careers-visual .tile.s { background: rgba(56,189,248,.22); border-color: rgba(56,189,248,.32); }
.careers-visual .tile:nth-child(2n) { animation-delay: -1s; }
.careers-visual .tile:nth-child(3n) { animation-delay: -2.2s; }
.careers-visual .tile:nth-child(5n) { animation-delay: -3.4s; }
@keyframes tilePulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

/* ============================================================
   PARTNERS — 3D rotating carousel (video-inspired cinematic)
   ============================================================ */
.partners { background: #050e24; color: var(--band-text); position: relative; overflow: hidden; }
.partners::before { content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(42% 52% at 18% 6%, rgba(30,94,255,.28), transparent 60%),
              radial-gradient(42% 52% at 84% 94%, rgba(56,189,248,.16), transparent 60%); }
.partners::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(120,170,255,.5) 1px, transparent 1px); background-size: 26px 26px; opacity: .07;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 82%);
          mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 82%); }
.partners .wrap { position: relative; z-index: 2; }
.partners .p-head { text-align: center; max-width: 760px; margin: 0 auto; }
.partners .eyebrow { justify-content: center; color: var(--sky); }
.partners .t-sub { color: var(--band-mut); }

/* layered echo heading */
.p-echo { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 600;
  letter-spacing: -0.03em; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; color: #fff; margin: 14px 0 14px; }
.p-echo::before, .p-echo::after { content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1;
  color: transparent; -webkit-text-stroke: 1px rgba(120,170,255,.28); pointer-events: none; }
.p-echo::before { transform: translate(8px, 8px); }
.p-echo::after { transform: translate(-8px, -8px); -webkit-text-stroke-color: rgba(120,170,255,.15); }
html[dir="rtl"] .p-echo::before { transform: translate(-8px, 8px); }
html[dir="rtl"] .p-echo::after { transform: translate(8px, -8px); }

/* WebGL canvas (Three.js) — covers the carousel stage when active */
.p-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 3;
  opacity: 0; transition: opacity 1.1s var(--ease); pointer-events: none; }
body.gl-on .p-gl { opacity: 1; }
body.gl-on .ring-outer { opacity: 0; visibility: hidden; }   /* hide CSS-3D fallback */

/* 3D carousel */
.carousel-3d { position: relative; height: clamp(360px, 46vh, 500px); perspective: 1300px; margin: clamp(26px, 4vw, 52px) 0; }
.ring-outer { position: absolute; inset: 0; margin: auto; width: 240px; height: 148px;
  transform-style: preserve-3d; transform: rotateX(8deg); transition: transform .15s linear; will-change: transform; }
.ring { position: absolute; inset: 0; transform-style: preserve-3d; animation: ringSpin 40s linear infinite; }
.partners:hover .ring { animation-play-state: paused; }
@keyframes ringSpin { to { transform: rotateY(360deg); } }
.p-item { position: absolute; left: 0; top: 0; width: 240px; height: 148px; border-radius: 16px;
  display: grid; place-items: center; gap: 10px; padding: 16px; text-align: center;
  border: 1px solid rgba(120,170,255,.22); backface-visibility: hidden;
  background: linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.015));
  backdrop-filter: blur(7px);
  box-shadow: 0 26px 64px -24px rgba(0,0,0,.75), inset 0 0 34px rgba(56,189,248,.06);
  font-family: var(--font-display); font-weight: 600; font-size: 19px; color: #fff; letter-spacing: -0.01em; }
.p-item .ring-dot { width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid var(--sky);
  box-shadow: 0 0 12px var(--sky); }
.p-status { text-align: center; }
.partners .t-status { color: var(--band-mut); }

/* ecosystem product logo wall (replaces the 3D partners carousel) */
.logo-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin: clamp(22px, 2.6vw, 38px) auto 0; }
@media (max-width: 860px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .logo-wall { grid-template-columns: 1fr; } }

/* Clients — full-width auto-scrolling logo slider (two rows, opposite directions), from Umbraco media */
.clients { text-align: center; }
.clients .wrap { max-width: none; }   /* span the full page width */
.clients-slider { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 36px); margin-top: clamp(28px, 3vw, 52px);
  direction: ltr; }   /* keep the marquee layout/animation identical in RTL (Arabic) — logos aren't directional */
.cl-row { overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cl-track { display: flex; width: max-content; align-items: center; animation: clScroll 95s linear infinite; }
.cl-track.rev { animation-direction: reverse; }
.clients-slider:hover .cl-track { animation-play-state: paused; }   /* pause on hover */
@keyframes clScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cl-item { flex: 0 0 auto; display: grid; place-items: center; margin-inline-end: clamp(34px, 4.5vw, 72px); }
.cl-item img { height: clamp(38px, 4.2vw, 62px); width: auto; max-width: 210px; object-fit: contain;
  filter: grayscale(1); opacity: .58; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.cl-item img:hover { filter: grayscale(0); opacity: 1; }
/* smaller logos + tighter spacing on small screens */
@media (max-width: 760px) {
  .cl-item { margin-inline-end: clamp(22px, 6vw, 34px); }
  .cl-item img { height: 34px; max-width: 140px; }
}
@media (max-width: 480px) {
  .cl-item { margin-inline-end: 20px; }
  .cl-item img { height: 28px; max-width: 116px; }
}
@media (prefers-reduced-motion: reduce) { .cl-track { animation: none; } }
.logo-cell { position: relative; display: grid; place-items: center; min-height: clamp(100px, 10vw, 132px);
  padding: 24px 26px; border-radius: var(--radius); border: 1px solid var(--band-line);
  background: rgba(255,255,255,.03); overflow: hidden; isolation: isolate;
  transition: transform .45s var(--ease), border-color .4s, background .4s; }
.logo-cell::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(300px circle at 50% 32%, rgba(56,189,248,.14), transparent 66%); transition: opacity .4s; }
.logo-cell:hover { transform: translateY(-6px); border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.05); }
.logo-cell:hover::after { opacity: 1; }
.logo-cell img { max-width: min(80%, 214px); max-height: 58px; width: auto; height: auto; object-fit: contain;
  opacity: .8; transition: opacity .4s, transform .5s var(--ease); }
.logo-cell:hover img { opacity: 1; transform: scale(1.05); }
@media (max-width: 560px) {
  .carousel-3d { height: 260px; }
  .ring-outer, .p-item { width: 190px; height: 120px; }
  .p-item { font-size: 16px; }
}

/* ============================================================
   FLOATING 3D CUBE CLUSTERS (spread the cube motif) + SECTION TRANSITIONS
   ============================================================ */
.cube-cluster { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  perspective: 1000px; }
.cube-cluster .cube3-w { position: absolute; transform-style: preserve-3d; }
.cube3 { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d;
  animation: cube3spin linear infinite; }
.cube3 .cf { position: absolute; width: var(--s); height: var(--s); border: 1px solid rgba(56,189,248,.22);
  background: linear-gradient(135deg, rgba(56,189,248,.08), rgba(30,94,255,.015)); }
.cube3 .a { transform: translateZ(calc(var(--s) / 2)); }
.cube3 .b { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube3 .c { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube3 .d { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube3 .e { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube3 .f { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
@keyframes cube3spin { to { transform: rotateX(360deg) rotateY(360deg); } }
.cta-box .cube-cluster { z-index: 0; }
@media (max-width: 700px) { .cube-cluster { display: none; } }

/* section transition — subtle scroll-linked 3D settle (JS sets transform inline) */
[data-sx] { will-change: transform; transform-style: preserve-3d; }

/* ============================================================
   JOURNEY — scroll-scrubbed 3D flythrough video
   ============================================================ */
.journey { position: relative; height: 100svh; min-height: 560px; background: #03060f; }
.jn-sticky { position: relative; top: 0; height: 100%; overflow: hidden; }
.jn-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  opacity: 0; transition: opacity 1s var(--ease); background: #03060f; }
.jn-video.ready { opacity: 1; }
/* animated fallback (shown until the video is decoded, and if it fails) */
.jn-fallback { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(50% 60% at 50% 45%, rgba(30,94,255,.35), transparent 70%),
    radial-gradient(40% 50% at 80% 80%, rgba(34,211,238,.18), transparent 70%),
    #03060f;
  background-size: 200% 200%; animation: jnDrift 12s ease-in-out infinite; }
@keyframes jnDrift { 0%,100% { background-position: 40% 40%; } 50% { background-position: 60% 60%; } }
.jn-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(3,6,15,.55) 100%),
    linear-gradient(180deg, rgba(3,6,15,.5) 0%, transparent 24%, transparent 70%, rgba(3,6,15,.75) 100%); }
.jn-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; text-align: center; padding: 0 24px; }
.jn-line { position: absolute; opacity: 0; transform: translateY(24px) scale(.98); filter: blur(6px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; color: #fff;
  font-size: clamp(2rem, 6.5vw, 5rem); line-height: 1.05; max-width: 18ch;
  text-shadow: 0 8px 40px rgba(0,0,0,.6); }
.jn-line.on { opacity: 1; transform: none; filter: none; }
.jn-line span { background: linear-gradient(120deg, #ffffff 40%, #9cc8ff); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; }
/* scrub progress bar removed with the scroll-scrub → self-playing flythrough */
.jn-progress { display: none; }
@media (max-width: 700px) { .journey { height: 100svh; min-height: 480px; } }

/* ============================================================
   PLATFORM constellation centerpiece
   ============================================================ */
.plat-head { text-align: center; max-width: 820px; margin: 0 auto clamp(12px, 1.8vw, 22px); }
.plat-head .eyebrow { justify-content: center; margin-bottom: 18px; }
.plat-head .lead { margin: 14px auto 0; font-size: clamp(0.96rem, 1.25vw, 1.1rem); }
.plat-head .title-lg { font-size: clamp(1.6rem, 3.1vw, 2.55rem); }
.plat-visual { display: grid; place-items: center; margin: clamp(2px, 0.8vw, 12px) auto clamp(16px, 2.4vw, 34px); }
.plat-visual .constellation { max-width: clamp(330px, 40vw, 452px); }
.plat-visual .cx-node { font-size: 12.5px; }
/* pull the whole section up + compact so heading + diagram sit together on one screen */
.platform.section { padding-top: clamp(34px, 4.2vw, 64px); padding-bottom: clamp(40px, 5vw, 78px); }

/* ============================================================
   BRAND SLOGAN LOCKUP + scroll-aware nav theme
   ============================================================ */
.brand { gap: 12px; }
.brand-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding-inline-start: 12px; border-inline-start: 1px solid var(--hair-2);
  line-height: 1.1; max-width: 12ch; transition: color .35s, border-color .35s; }
html[dir="rtl"] .brand-tag { letter-spacing: normal; font-family: var(--font-ar); font-size: 11px; }
.brand.col { display: inline-flex; align-items: center; }
.footer .brand-tag { color: var(--band-mut); border-color: var(--band-line); }
@media (max-width: 620px) { .nav .brand-tag { display: none; } }

/* nav flips to light content when over dark sections */
.nav.on-dark .wordmark { filter: none; }                 /* white logo */
.nav.on-dark .brand-tag { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.22); }
.nav.on-dark .nav-links { background: none; box-shadow: none; }
.nav.on-dark .nav-links a { color: rgba(255,255,255,.78); }
.nav.on-dark .nav-links a:hover { color: #fff; background: rgba(255,255,255,.12); }
/* dropdown items sit on a white panel even on dark pages — keep them dark & readable */
.nav.on-dark .nav-links .nav-drop-menu a { color: var(--ink-2); }
.nav.on-dark .nav-links .nav-drop-menu a:hover { color: var(--ink); background: var(--cloud-2); }
.nav.on-dark .lang-toggle { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.nav.on-dark .lang-toggle:hover { background: #fff; color: var(--navy); border-color: #fff; }
.nav.on-dark .btn-ink { background: #fff; color: var(--navy); }
.nav.on-dark .btn-ink:hover { color: #fff; }
.nav.on-dark .nav-toggle span { background: #fff; }

/* ============================================================
   HERO AI CORE ORB (rich, animated focal graphic)
   ============================================================ */
.ai-orb { position: relative; width: clamp(128px, 17vw, 188px); aspect-ratio: 1;
  margin: 0 auto clamp(26px, 4vh, 46px); z-index: 2; }
.ai-orb span { position: absolute; border-radius: 50%; }
.orb-core { inset: 30%; z-index: 3; overflow: hidden;
  background: radial-gradient(circle at 34% 28%, #9fd0ff 0%, #2f7cff 45%, #0b2a6b 100%);
  box-shadow: 0 0 44px rgba(56,189,248,.65), inset 0 -6px 18px rgba(4,12,40,.6), inset 0 6px 14px rgba(255,255,255,.4);
  animation: orbPulse 3.6s ease-in-out infinite; }
.orb-core::after { content: ""; position: absolute; inset: -20%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,.55) 16%, transparent 34%, transparent 66%, rgba(56,189,248,.5) 82%, transparent 100%);
  mix-blend-mode: screen; animation: spin 4.5s linear infinite; }
.orb-glow { inset: 16%; z-index: 1; filter: blur(26px);
  background: radial-gradient(circle, rgba(56,189,248,.7), transparent 70%); animation: orbPulse 3.6s ease-in-out infinite; }
.orb-ring { inset: 0; border: 1px solid rgba(30,94,255,.32); z-index: 2; }
.orb-ring.r1 { animation: spin 16s linear infinite; }
.orb-ring.r2 { inset: -13%; border-style: dashed; border-color: rgba(56,189,248,.3); animation: spin 26s linear infinite reverse; }
.orb-ring.r3 { inset: 12%; border-color: rgba(30,94,255,.22); animation: spin 11s linear infinite; }
.orb-sat { inset: 0; z-index: 4; }
.orb-sat::before { content: ""; position: absolute; border-radius: 50%; }
.orb-sat.s1 { animation: spin 7s linear infinite; }
.orb-sat.s1::before { top: -5px; left: 50%; width: 11px; height: 11px; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 14px var(--sky), 0 0 5px #fff; }
.orb-sat.s2 { inset: -13%; animation: spin 13s linear infinite reverse; }
.orb-sat.s2::before { top: -4px; left: 50%; width: 8px; height: 8px; transform: translateX(-50%);
  background: var(--sky); box-shadow: 0 0 12px var(--sky); }
.orb-sat.s3 { inset: 12%; animation: spin 9s linear infinite; }
.orb-sat.s3::before { bottom: -4px; left: 50%; width: 7px; height: 7px; transform: translateX(-50%);
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.orb-spark { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  font-size: 26px; color: #fff; text-shadow: 0 0 16px rgba(56,189,248,.9); animation: sparkle 3.6s ease-in-out infinite; border-radius: 0; }
@keyframes orbPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes sparkle { 0%,100% { opacity: .85; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(90deg); } }

/* perspective grid floor */
.grid-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 92%);
          mask-image: linear-gradient(to top, #000 8%, transparent 92%);
  perspective: 340px; perspective-origin: 50% 0%; }
.grid-floor .plane { position: absolute; left: -50%; right: -50%; top: 0; bottom: -40%;
  background-image: linear-gradient(rgba(30,94,255,.28) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(30,94,255,.28) 1px, transparent 1px);
  background-size: 46px 46px; transform: rotateX(74deg); transform-origin: top center;
  animation: gridMove 4.5s linear infinite; }
@keyframes gridMove { to { background-position: 0 46px; } }
@media (max-width: 720px) { .grid-floor { height: 34%; } }

/* ============================================================
   DETAIL PAGES (platform.html / product deep-dives)
   Reuses global chrome; adds page-specific components (.pg-*).
   All potentially-colliding helpers are scoped to .detail-page.
   ============================================================ */
.detail-page .section-head { max-width: 860px; margin-bottom: clamp(30px, 4vw, 52px); }
.detail-page .section-head.center { text-align: center; margin-inline: auto; }
.detail-page .section-head.center .eyebrow { justify-content: center; }
.detail-page .section-head.center .lead { margin-inline: auto; }
.detail-page .section-head.head-flex { display: flex; justify-content: space-between;
  align-items: flex-end; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; max-width: none; }
.detail-page .section-head.head-flex > div { max-width: 640px; }

/* breadcrumb */
.pg-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-size: 13px; color: var(--muted); font-weight: 500; }
.pg-crumb a { color: var(--royal); transition: opacity .25s; }
.pg-crumb a:hover { opacity: .7; }
.pg-crumb .sep { color: var(--muted-2); }
html[dir="rtl"] .pg-crumb .sep { transform: scaleX(-1); }

/* detail hero */
/* full-screen hero: fills the viewport, content vertically centred (nav clearance on top) */
.pg-hero { min-height: 100svh; padding: calc(var(--nav-h) + clamp(20px, 4vh, 48px)) 0 clamp(40px, 6vh, 80px); }
.pg-hero .hero-split { align-items: center; }
.pg-h1 { margin: 0 0 24px; }
.pg-hero .hero-sub { max-width: 54ch; }

/* ===== About hero: split layout + layered-platform illustration ===== */
.ab-hero2 .wrap { position: relative; z-index: 2; }
.ab-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 68px); align-items: center; width: 100%; }
.ab-hero-copy { max-width: 560px; }
.ab-hero-copy .pg-crumb { justify-content: flex-start; }
.ab-hero-copy .hero-sub { margin-inline: 0; max-width: 52ch; }
.ab-hero-copy .hero-cta { justify-content: flex-start; }
@media (max-width: 980px) {
  .ab-hero-grid { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 40px); }
  .ab-viz { max-width: 440px; }
}

.ab-viz { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin-inline: auto; }
/* backdrop: plexus dot-sphere + connective web + tilted orbit rings */
.abv-plexus { position: absolute; inset: 4%; border-radius: 50%; opacity: .55; pointer-events: none;
  background-image: radial-gradient(rgba(40,80,220,.42) 1.1px, transparent 1.5px); background-size: 19px 19px;
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-image: radial-gradient(circle, #000 40%, transparent 70%); }
.abv-web { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.abv-orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px solid rgba(30,94,255,.16); }
.abv-orbit.o1 { width: 92%; height: 92%; transform: translate(-50%,-50%) rotate(-24deg) scaleY(.44); }
.abv-orbit.o2 { width: 98%; height: 98%; transform: translate(-50%,-50%) rotate(20deg) scaleY(.5); border-color: rgba(52,211,153,.22); }
.abv-orbit.o3 { width: 84%; height: 84%; transform: translate(-50%,-50%) scaleY(.92); border-color: rgba(30,94,255,.1); }
/* isometric glowing layer stack */
.abv-stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1100px; }
.abv-stack { position: relative; width: 210px; height: 210px; transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-44deg); animation: abvSpin 20s ease-in-out infinite alternate; }
.abv-layer { position: absolute; inset: 0; border-radius: 28px; border: 1px solid rgba(255,255,255,.45);
  background: linear-gradient(135deg, #8f98ff, #4a5cff);
  box-shadow: 0 30px 60px -16px rgba(45,65,210,.6), inset 0 2px 8px rgba(255,255,255,.35); }
.abv-layer.l1 { transform: translateZ(4px); background: linear-gradient(135deg, #b3b9ff, #7683ff); }
.abv-layer.l2 { transform: translateZ(34px); background: linear-gradient(135deg, #9aa2ff, #5d6dff); }
.abv-layer.l3 { transform: translateZ(64px); background: linear-gradient(135deg, #8b96ff, #4e60ff); }
.abv-layer.l4 { transform: translateZ(94px); background: linear-gradient(135deg, #8290ff, #4356ff); }
.abv-layer.l5 { transform: translateZ(124px); background: linear-gradient(135deg, #9dbcff, #3b5bff);
  box-shadow: 0 34px 74px -14px rgba(45,65,210,.72), inset 0 2px 10px rgba(255,255,255,.5); }
.abv-glow { position: absolute; inset: 8%; border-radius: 50%; transform: translateZ(152px);
  background: radial-gradient(circle, rgba(195,222,255,1), rgba(110,150,255,.42) 46%, transparent 70%); filter: blur(4px); }
/* layer labels — upright pills with a connector dot, cascading down the stack front */
.abv-labels { position: absolute; inset: 0; pointer-events: none; }
.abv-lb { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: #1b2440;
  background: rgba(255,255,255,.9); border: 1px solid rgba(120,140,255,.45); border-radius: 100px; padding: 5px 13px 5px 9px;
  box-shadow: 0 10px 24px -12px rgba(30,50,160,.55); backdrop-filter: blur(4px);
  transform: translate(calc(-50% + (var(--i) - 2) * 4px), calc(-50% + (var(--i) - 2) * 39px)); }
.abv-lb::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); flex: none; }
html[dir="rtl"] .abv-lb { font-family: var(--font-ar); }
/* floating data cards */
.abv-card { position: absolute; background: rgba(255,255,255,.94); border: 1px solid var(--hair);
  border-radius: 15px; box-shadow: 0 26px 50px -22px rgba(20,30,90,.5); padding: 11px 13px;
  backdrop-filter: blur(8px); animation: abvFloat 6s ease-in-out infinite; }
.abvc-t { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.abv-flow { top: 3%; left: 0; width: 156px; }
.abv-flow svg { width: 100%; height: auto; display: block; }
.abv-area { top: 10%; right: 0; width: 146px; animation-delay: -2s; }
.abv-area svg { width: 100%; height: 42px; display: block; }
.abv-kpi { bottom: 16%; left: 1%; display: flex; align-items: center; gap: 9px; animation-delay: -1s; }
.abv-kpi svg { width: 50px; height: 50px; }
.abv-kpi-v { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.abv-clients { bottom: 7%; right: 0; display: flex; align-items: center; gap: 10px; animation-delay: -3.5s; }
.abv-avs { display: inline-flex; }
.abv-avs i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(135deg, #8a93ff, #4759ff); margin-inline-start: -9px; }
.abv-avs i:first-child { margin-inline-start: 0; background: linear-gradient(135deg, #a0aaff, #6d7bff); }
.abv-cl-t { display: flex; flex-direction: column; line-height: 1.15; font-size: 12px; color: var(--muted); }
.abv-cl-t b { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
@keyframes abvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes abvSpin { from { transform: rotateX(56deg) rotateZ(-50deg); } to { transform: rotateX(56deg) rotateZ(-38deg); } }
@media (prefers-reduced-motion: reduce) { .abv-card, .abv-stack { animation: none; } }


/* hero stat row */
.pg-stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); margin-top: 38px;
  opacity: 0; animation: fadeUp 1s var(--ease) 1.15s forwards; }
.pg-stat { display: flex; flex-direction: column; gap: 3px; position: relative; padding-inline-start: 18px; }
.pg-stat::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 3px; background: var(--grad); }
.pg-stat b { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.pg-stat span { font-size: 13px; color: var(--muted); max-width: 16ch; }

/* hero layered-stack visual */
.pg-stack { position: relative; align-self: center; width: 100%; max-width: 440px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.pg-stack-glow { position: absolute; inset: -14% -10% 6% -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(60% 60% at 60% 40%, rgba(30,94,255,.28), transparent 70%); filter: blur(22px); }
.pg-slab { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; border-radius: 14px; background: rgba(255,255,255,.82);
  border: 1px solid var(--hair); box-shadow: 0 14px 34px -22px rgba(8,30,80,.5);
  backdrop-filter: blur(7px); font-family: var(--font-display); font-weight: 500;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.3;
  margin-inline-start: calc(var(--i) * 14px); width: calc(100% - var(--i) * 14px);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.pg-slab::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--royal); box-shadow: 0 0 0 4px rgba(30,94,255,.12); flex: none; order: -1; }
.pg-slab:hover { transform: translateX(6px); box-shadow: 0 20px 40px -20px rgba(30,94,255,.5);
  border-color: rgba(30,94,255,.4); }
html[dir="rtl"] .pg-slab:hover { transform: translateX(-6px); }
.pg-slab.ai { border-color: rgba(56,189,248,.55); background: linear-gradient(100deg, rgba(56,189,248,.14), rgba(255,255,255,.85)); }
.pg-slab.ai::before { background: var(--sky); box-shadow: 0 0 0 4px rgba(56,189,248,.16); }
.pg-slab.ai em { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: .12em;
  color: #fff; background: var(--grad); padding: 3px 8px; border-radius: 100px; }
.pg-slab-base { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px;
  padding: 18px 20px; border-radius: 16px; color: #fff; background: var(--grad);
  box-shadow: 0 24px 50px -20px rgba(30,94,255,.6); }
.pg-slab-base span { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .04em; }
.pg-slab-base em { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: .18em; opacity: .85; }
html[dir="rtl"] .pg-slab-base em { letter-spacing: normal; }
@media (max-width: 960px) { .pg-stack { max-width: 520px; margin-top: 8px; } }

/* overview highlights */
.pg-hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(30px, 4vw, 52px); }
@media (max-width: 860px) { .pg-hl-grid { grid-template-columns: 1fr; } }
.pg-hl { border: 1px solid var(--hair); border-radius: var(--radius); background: var(--white);
  padding: 30px 28px; transition: transform .45s var(--ease), box-shadow .45s, border-color .4s; }
.pg-hl:hover { transform: translateY(-6px); border-color: var(--hair-2); box-shadow: 0 30px 60px -26px rgba(8,30,80,.28); }
.pg-hl-ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 22px;
  color: var(--royal); background: rgba(30,94,255,.08); margin-bottom: 20px; }
.pg-hl h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; margin-bottom: 10px; letter-spacing: -.01em; }
.pg-hl p { color: var(--muted); font-size: 15px; }

/* architecture — dark band */
.pg-arch { background: var(--band); color: var(--band-text); border-radius: 0; overflow: hidden;
  margin: clamp(40px, 6vw, 88px) 0; }
.pg-arch::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 80% 0%, rgba(30,94,255,.16), transparent 60%); }
.pg-arch .wrap { position: relative; z-index: 1; }
.pg-arch .title-lg { color: var(--band-text); }
.pg-arch .lead { color: var(--band-mut); margin-top: 22px; }
/* platform page: remove the white gap between the architecture band and the AI section
   (both are dark; their collapsing vertical margins were showing the white page through) */
#architecture { margin-bottom: 0; }
#architecture + #ai { margin-top: 0; }
.pg-layers { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(28px, 4vw, 48px); }
.pg-layer { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px);
  padding: 20px clamp(18px, 2.4vw, 30px); border-radius: 18px;
  border: 1px solid var(--band-line); background: rgba(255,255,255,.03);
  transition: transform .4s var(--ease), background .4s, border-color .4s; }
.pg-layer:hover { transform: translateX(6px); background: rgba(56,189,248,.06); border-color: rgba(56,189,248,.32); }
html[dir="rtl"] .pg-layer:hover { transform: translateX(-6px); }
.pg-l-idx { font-family: var(--font-mono); font-size: 13px; color: var(--sky); flex: none; width: 28px; }
.pg-l-main { flex: 1; }
.pg-l-top { display: flex; align-items: center; gap: 12px; }
.pg-l-top h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; color: var(--band-text); letter-spacing: -.01em; }
.pg-l-flag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: #041024;
  background: var(--sky); padding: 2px 8px; border-radius: 100px; }
.pg-l-main p { color: var(--band-mut); font-size: 14.5px; margin-top: 5px; }
.pg-l-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--band-mut); border: 1px solid var(--band-line); padding: 6px 13px; border-radius: 100px; flex: none; }
html[dir="rtl"] .pg-l-tag { letter-spacing: normal; }
.pg-layer.ai { border-color: rgba(56,189,248,.28); background: rgba(56,189,248,.05); }
@media (max-width: 680px) {
  .pg-layer { flex-wrap: wrap; gap: 10px; }
  .pg-l-idx { width: auto; }
  .pg-l-tag { order: 3; }
}

/* why grid */
.pg-why-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(30px, 4vw, 52px); }
.pg-why-c { flex: 1 1 210px; max-width: 320px; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--white);
  padding: 28px 24px; text-align: center; transition: transform .45s var(--ease), box-shadow .45s, border-color .4s; }
@media (max-width: 520px) { .pg-why-c { flex-basis: 100%; max-width: none; } }
.pg-why-c:hover { transform: translateY(-6px); border-color: var(--hair-2); box-shadow: 0 28px 56px -26px rgba(8,30,80,.26); }
.pg-why-ico { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 16px; display: grid; place-items: center;
  font-size: 24px; color: #fff; background: var(--grad); box-shadow: 0 14px 30px -12px rgba(30,94,255,.5); }
.pg-why-c h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-bottom: 8px; }
.pg-why-c p { color: var(--muted); font-size: 14.5px; }

/* ---- Company pages (Approach / Knowledge / Careers / Contact) rich-text body ---- */
.company-body { max-width: 760px; margin: 0 auto; color: var(--ink-2); font-size: 1.05rem; line-height: 1.75; }
.company-body > :first-child { margin-top: 0; }
.company-body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--ink); letter-spacing: -.01em; margin: 2.2em 0 .6em; }
.company-body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  color: var(--ink); margin: 1.8em 0 .5em; }
.company-body p { margin: 0 0 1.1em; }
.company-body ul, .company-body ol { margin: 0 0 1.2em; padding-inline-start: 1.3em; }
.company-body li { margin-bottom: .55em; }
.company-body li::marker { color: var(--royal); }
.company-body a { color: var(--royal); text-decoration: underline; text-underline-offset: 3px; }
.company-body strong { color: var(--ink); font-weight: 600; }

/* related products */
.pg-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(30px, 4vw, 52px); }
@media (max-width: 900px) { .pg-rel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pg-rel-grid { grid-template-columns: 1fr; } }

/* ===== products-it-powers → PINNED horizontal scroll (section fills screen, scroll drives cards) ===== */
.pg-rel.hscroll { position: relative; }
.hscroll-pin { position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(18px, 3vh, 40px);
  padding-top: calc(var(--nav-h) + clamp(16px, 3vh, 44px)); padding-bottom: clamp(20px, 3vh, 40px); }
.pg-rel-grid.rp-track { display: flex; grid-template-columns: none; gap: clamp(18px, 2vw, 26px);
  padding-inline: max(22px, calc((100vw - var(--maxw)) / 2)); will-change: transform; }
.hprog { width: min(var(--maxw), 92vw); margin: 0 auto; height: 4px; background: var(--hair); border-radius: 4px; overflow: hidden; flex: none; }
.hprog i { display: block; height: 100%; width: 8%; background: var(--grad); border-radius: 4px; transition: width .1s linear; }
.rp-card { flex: 0 0 clamp(300px, 32vw, 420px); display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: var(--radius-lg); background: linear-gradient(180deg, #fff, #fafbff);
  overflow: hidden; transition: transform .45s var(--ease), border-color .45s, box-shadow .45s; }
.rp-card:hover { transform: translateY(-5px); border-color: rgba(47,107,255,.28); box-shadow: 0 34px 60px -38px rgba(20,28,60,.5); }
.rp-card-top { padding: clamp(24px, 2vw, 32px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.rp-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--royal); }
html[dir="rtl"] .rp-tag { letter-spacing: normal; font-family: var(--font-ar); }
.rp-card-top h3 { font-family: var(--font-display); font-size: clamp(1.15rem, 1.5vw, 1.5rem); font-weight: 600;
  letter-spacing: -.015em; color: var(--ink); line-height: 1.15; margin: 0; }
.rp-card-top > p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.rp-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rp-feats span { border: 1px solid rgba(30,94,255,.18); background: rgba(30,94,255,.05); color: var(--royal);
  border-radius: 100px; padding: 6px 12px; font-size: 12px; white-space: nowrap; }
.rp-more { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; color: var(--royal); }
.rp-more .chip { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(30,94,255,.1); transition: transform .3s var(--ease); }
html[dir="rtl"] .rp-more .chip { transform: scaleX(-1); }
.rp-card:hover .rp-more .chip { transform: translateX(3px); }
html[dir="rtl"] .rp-card:hover .rp-more .chip { transform: translateX(-3px) scaleX(-1); }
/* light dashboard mockup (namespaced .rpmk-*) */
.rp-card-art { padding: 0 clamp(24px, 2vw, 32px) clamp(24px, 2vw, 32px); }
.rpmk { border-radius: 14px; border: 1px solid var(--hair); background: #fff; overflow: hidden; box-shadow: 0 20px 44px -28px rgba(20,28,60,.4); }
.rpmk-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--hair); background: var(--cloud); }
.rpmk-dot { width: 8px; height: 8px; border-radius: 50%; background: #cdd6ea; flex: none; }
.rpmk-dot.r { background: #ff5f57; } .rpmk-dot.y { background: #febc2e; } .rpmk-dot.g { background: #28c840; }
.rpmk-url { margin-inline-start: 8px; flex: 1; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  background: #fff; border: 1px solid var(--hair); border-radius: 7px; padding: 4px 10px; direction: ltr; }
.rpmk-body { display: flex; gap: 12px; padding: 14px; }
.rpmk-side { flex: 0 0 42px; display: flex; flex-direction: column; gap: 7px; }
.rpmk-nav { height: 8px; border-radius: 3px; background: var(--cloud-2); }
.rpmk-nav.a { background: var(--royal); }
.rpmk-main { flex: 1; min-width: 0; }
.rpmk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.rpmk-kpi { border: 1px solid var(--hair); border-radius: 10px; padding: 9px 6px; text-align: center; }
.rpmk-kpi b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.rpmk-kpi i { font-style: normal; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; }
.rpmk-chart { display: flex; align-items: flex-end; gap: 6px; height: 80px; padding: 0 2px; }
.rpmk-chart i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #6f9bff, var(--royal)); }
.rpmk-line { height: 8px; border-radius: 4px; background: var(--cloud-2); margin-top: 12px; }
.rpmk-line.s { width: 60%; margin-top: 8px; }
/* pinned view: tighter spacing + smaller type so the whole card fits inside one screen */
.hscroll-pin { padding-top: calc(var(--nav-h) + 6px); padding-bottom: clamp(12px, 2vh, 22px); gap: clamp(8px, 1.4vh, 18px); }
.hscroll .section-head { margin-bottom: 0; }
.hscroll .title-lg { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.06; }
.hscroll .section-head .lead { font-size: clamp(.9rem, 1.05vw, 1rem); margin-top: 8px !important; }
.hscroll .rp-card { flex-basis: clamp(290px, 29vw, 390px); }
.hscroll .rp-card-top { padding: clamp(16px, 1.5vw, 22px); gap: 8px; }
.hscroll .rp-card-top h3 { font-size: clamp(1.05rem, 1.25vw, 1.3rem); }
.hscroll .rp-card-top > p { font-size: 13px; line-height: 1.45; }
.hscroll .rp-feats span { padding: 5px 10px; font-size: 11.5px; }
.hscroll .rp-more { font-size: 13px; padding-top: 4px; }
.hscroll .rp-card-art { padding: 0 clamp(16px, 1.5vw, 22px) clamp(16px, 1.5vw, 22px); }
.hscroll .rpmk-bar { padding: 8px 10px; }
.hscroll .rpmk-body { padding: 10px; gap: 10px; }
.hscroll .rpmk-kpis { margin-bottom: 10px; gap: 6px; }
.hscroll .rpmk-kpi { padding: 6px 4px; }
.hscroll .rpmk-kpi b { font-size: 12px; }
.hscroll .rpmk-chart { height: 50px; gap: 5px; }
.hscroll .rpmk-line { margin-top: 9px; }
.hscroll .rpmk-line.s { margin-top: 6px; }
/* mobile / reduced-motion: no pinning — cards stack vertically and the page scrolls normally */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .pg-rel.hscroll { height: auto !important; }
  .hscroll-pin { position: static; height: auto; overflow: visible;
    padding-top: clamp(40px, 8vw, 72px); padding-bottom: clamp(40px, 8vw, 72px); }
  .pg-rel-grid.rp-track { flex-direction: column; padding-inline: 0; transform: none !important;
    width: min(var(--maxw), 92vw); margin-inline: auto; }
  .rp-card { flex: none; width: 100%; }
  .hprog { display: none; }
}
.pg-rel-c { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--white); padding: 26px 24px; transition: transform .45s var(--ease), box-shadow .45s, border-color .4s; }
.pg-rel-c:hover { transform: translateY(-6px); border-color: var(--hair-2); box-shadow: 0 30px 60px -26px rgba(8,30,80,.28); }
.pg-rel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pg-rel-ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 22px;
  color: var(--royal); background: rgba(30,94,255,.08); }
.pg-rel-idx { font-family: var(--font-mono); font-size: 13px; color: var(--muted-2); }
.pg-rel-c h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-bottom: 9px; letter-spacing: -.01em; }
.pg-rel-c p { color: var(--muted); font-size: 14.5px; flex: 1; }
.pg-rel-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; font-size: 14px; color: var(--royal); }
.pg-rel-more .chip { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(30,94,255,.1); font-size: 12px; transition: transform .3s var(--ease); }
html[dir="rtl"] .pg-rel-more .chip { transform: scaleX(-1); }
.pg-rel-c:hover .pg-rel-more .chip { transform: translateX(3px); }
html[dir="rtl"] .pg-rel-c:hover .pg-rel-more .chip { transform: translateX(-3px) scaleX(-1); }

/* ---------- product detail page (product.html) ---------- */
.pp-h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.03em;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.05; color: var(--ink); margin: 0 0 20px; }

/* hero product-screen mockup */
.pp-mock { position: relative; width: 100%; max-width: 480px; margin-inline: auto; z-index: 2; }
.pp-mock-glow { position: absolute; inset: -12% -8% 2% -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(58% 58% at 62% 42%, rgba(30,94,255,.3), transparent 70%); filter: blur(24px); }
.pp-mock #ppMock .mock { box-shadow: 0 40px 90px -34px rgba(6,20,60,.6); transform: rotate(-.6deg);
  transition: transform .5s var(--ease); }
.pp-mock:hover #ppMock .mock { transform: rotate(0deg) translateY(-4px); }
@media (max-width: 960px) { .pp-mock { max-width: 540px; margin-top: 8px; } }

/* what-you-get checklist (inside dark .pg-arch band) */
.pp-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 640px) { .pp-points { grid-template-columns: 1fr; } }
.pp-point { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 14px;
  border: 1px solid var(--band-line); background: rgba(255,255,255,.03); color: var(--band-text);
  font-weight: 500; font-size: 15.5px; transition: transform .4s var(--ease), background .4s, border-color .4s; }
.pp-point:hover { transform: translateY(-3px); background: rgba(56,189,248,.06); border-color: rgba(56,189,248,.32); }
.pp-check { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; color: #041024; background: var(--sky); box-shadow: 0 0 14px rgba(56,189,248,.5); }

/* powered-by-BOAT panel */
.pp-built-box { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(28px, 5vw, 64px); align-items: center;
  border: 1px solid var(--hair); border-radius: var(--radius-lg); background:
    radial-gradient(120% 120% at 100% 0%, rgba(30,94,255,.06), transparent 55%), var(--cloud);
  padding: clamp(32px, 5vw, 60px); }
@media (max-width: 820px) { .pp-built-box { grid-template-columns: 1fr; } .pp-built-badge { display: none; } }
.pp-built-badge { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 240px; margin-inline: auto; width: 100%; }
.ppb-core { position: relative; z-index: 2; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: .04em; color: #fff;
  background: var(--grad); box-shadow: 0 24px 50px -18px rgba(30,94,255,.6); }
.ppb-ring { position: absolute; inset: 18%; border-radius: 50%; border: 1.5px solid rgba(30,94,255,.28); animation: ppbSpin 14s linear infinite; }
.ppb-ring.b { inset: 2%; border-style: dashed; border-color: rgba(56,189,248,.32); animation-duration: 22s; animation-direction: reverse; }
@keyframes ppbSpin { to { transform: rotate(360deg); } }
.pg-caps.pp-first { padding-top: clamp(60px, 8vw, 112px); }

/* the-challenge (problem) band */
.pp-problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 900px) { .pp-problems { grid-template-columns: 1fr; } }
.pp-problem { position: relative; padding: 30px 28px 28px; border-radius: 18px; border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(190,30,55,.03), transparent 60%), #fff; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.pp-problem:hover { transform: translateY(-4px); border-color: rgba(190,30,55,.28); box-shadow: 0 26px 50px -30px rgba(20,20,40,.4); }
.pp-prob-n { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .1em;
  color: #be1e37; opacity: .85; }
.pp-problem h4 { margin: 14px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pp-problem p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* who-it's-for (audience) band */
.pp-aud-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
.pp-aud-tag { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--cloud); color: var(--ink); font-weight: 500; font-size: 15px;
  transition: transform .35s var(--ease), background .35s, border-color .35s, color .35s; }
.pp-aud-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); flex: none; }
.pp-aud-tag:hover { transform: translateY(-3px); border-color: rgba(30,94,255,.35); background: #fff; }
.pp-tech { margin-top: clamp(32px, 4vw, 52px); padding: 24px 26px; border-radius: 16px;
  border: 1px solid var(--hair); background: var(--cloud);
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
@media (max-width: 640px) { .pp-tech { grid-template-columns: 1fr; gap: 10px; } }
.pp-tech-k { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); padding-top: 3px; white-space: nowrap; }
.pp-tech p { margin: 0; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.9; color: var(--ink); }

/* how-it-works — architecture diagram (elegant) */
.pg-flow .dg-card { border: 1px solid var(--hair); border-radius: 22px; overflow-x: auto; overflow-y: hidden;
  background: radial-gradient(135% 130% at 0% 0%, rgba(47,107,255,.07), transparent 52%), linear-gradient(180deg, #ffffff, #fafbff);
  padding: clamp(18px, 2.6vw, 34px); box-shadow: 0 40px 80px -46px rgba(18,26,58,.42), inset 0 1px 0 rgba(255,255,255,.6); }
.dg-svg { width: 100%; min-width: 720px; height: auto; display: block; contain: paint; }  /* isolate diagram repaints */
.dg-svg.dg-paused .dg-flow.dash { animation-play-state: paused; }   /* freeze when off-screen */
.dg-dot { fill: #e4ebf6; }
.dg-node rect:not(.dg-bar) { stroke: #dce3f0; stroke-width: 1.3; }
.dg-node.acc rect:not(.dg-bar) { stroke: #2f6bff; stroke-width: 1.6; }
.dg-node.warn rect:not(.dg-bar) { stroke: #ec93a6; stroke-width: 1.4; }
.dg-node.dash rect:not(.dg-bar) { stroke: #c6cfe0; stroke-dasharray: 5 5; }
.dg-bar { fill: #9fb0cf; stroke: none; }
.dg-node.acc .dg-bar { fill: #2f6bff; }
.dg-node.warn .dg-bar { fill: #d8455f; }
.dg-node.dash .dg-bar { fill: #bcc6d8; }
.dg-t { fill: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 14px; text-anchor: middle; letter-spacing: -.01em; }
.dg-node.acc .dg-t { fill: #14336f; }
.dg-node.warn .dg-t { fill: #8f2033; }
.dg-s { fill: var(--muted); font-family: var(--font-mono); font-size: 10.5px; text-anchor: middle; letter-spacing: .02em; }
.dg-lane rect:not(.dg-lane-tab) { fill: rgba(47,107,255,.04); stroke: #d5deee; stroke-width: 1.3; stroke-dasharray: 3 7; }
.dg-lane-tab { fill: #eaf0fb; stroke: #d5deee; stroke-width: 1; }
.dg-lane-t { fill: #5f6d88; text-anchor: middle; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; }
.dg-flow { stroke: #b3bccf; stroke-width: 1.7; fill: none; stroke-linecap: round; }
.dg-flow.acc { stroke: #2f6bff; stroke-width: 1.9; }
.dg-flow.dash { stroke-dasharray: 5 6; animation: dgDash 1.1s linear infinite; }
@keyframes dgDash { to { stroke-dashoffset: -11; } }
@media (prefers-reduced-motion: reduce) { .dg-flow.dash { animation: none; } }
.dg-ah { fill: #b3bccf; }
.dg-ah-acc { fill: #2f6bff; }
.dg-pkt { fill: #2f6bff; }
.dg-pkt.mut { fill: #9fb0cf; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .dg-pkt { display: none; } }
/* footprint-diagram nodes (BOAT layer chips) */
.dg-node.dim rect { opacity: .55; }
.dg-fdot { fill: #eef2f9; }
.dg-node.acc .dg-fdot { fill: rgba(47,107,255,.92); }
.dg-fico { text-anchor: middle; font-size: 15px; fill: #7c88a0; }
.dg-node.acc .dg-fico { fill: #fff; }
.dg-fname { text-anchor: start; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; fill: var(--muted); }
.dg-node.acc .dg-fname { fill: #14336f; }
.uc-fp-card { margin-top: clamp(22px, 3vw, 34px); }
.dg-note { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; text-anchor: middle; }
.dg-note.acc { fill: #2f6bff; } .dg-note.warn { fill: #c0374e; }
.pp-flow-cap { margin: 20px auto 0; max-width: 720px; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* inside-the-product — screen gallery */
.pp-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(28px, 4vw, 48px); align-items: start; }
@media (max-width: 900px) { .pp-screens { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }
.pp-screens .pv-scr { margin: 0; width: 100%; transform: none; }
.pp-screens .pv-scr:hover { transform: translateY(-5px); }
.pp-scr-cap { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-align: center; }

/* under-the-hood — engineering cards */
.pp-arch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 900px) { .pp-arch { grid-template-columns: 1fr; } }
.pp-arch-c { padding: 26px 24px; border: 1px solid var(--hair); border-radius: 16px; background: var(--cloud);
  transition: transform .4s var(--ease), border-color .4s; }
.pp-arch-c:hover { transform: translateY(-4px); border-color: rgba(47,107,255,.32); }
.pp-arch-n { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: #2f6bff; }
.pp-arch-c h4 { margin: 12px 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pp-arch-c p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); }

/* use-case technology footprint (BOAT layers used) */
.uc-fp-head { margin-top: clamp(34px, 4.5vw, 60px); }
.uc-fp-h { margin: 10px 0 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.uc-fp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: clamp(22px, 3vw, 34px); }
@media (max-width: 820px) { .uc-fp { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .uc-fp { grid-template-columns: repeat(2, 1fr); } }
.uc-fp-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 20px 12px; border-radius: 16px; border: 1px solid var(--hair); background: var(--cloud);
  opacity: .5; filter: saturate(.5); transition: transform .4s var(--ease), opacity .4s, box-shadow .4s, border-color .4s, background .4s; }
.uc-fp-tile.on { opacity: 1; filter: none; background: #fff; border-color: rgba(47,107,255,.32);
  box-shadow: 0 22px 44px -30px rgba(30,70,200,.5); }
.uc-fp-tile.on:hover { transform: translateY(-4px); }
.uc-fp-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 20px;
  color: #7c88a0; background: #eef2f9; }
.uc-fp-tile.on .uc-fp-ico { color: #fff; background: var(--grad); box-shadow: 0 10px 22px -8px rgba(47,107,255,.6); }
.uc-fp-name { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: -.01em; }
.uc-fp-tile.on .uc-fp-name { color: var(--ink); }
.uc-fp-note { margin: 18px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.uc-fp-note b { color: #2f6bff; font-weight: 600; }

/* platform deployment — two modes (SaaS / On-Premise) */
.dep-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 780px) { .dep-modes { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.dep-mode { padding: 32px 30px; border-radius: 20px; border: 1px solid var(--hair);
  background: linear-gradient(180deg, #fff, #fafbff);
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s; }
.dep-mode:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -38px rgba(20,28,60,.5); border-color: rgba(47,107,255,.28); }
.dep-mode.acc { border-color: rgba(47,107,255,.4);
  background: radial-gradient(130% 120% at 100% 0%, rgba(47,107,255,.09), transparent 55%), linear-gradient(180deg, #fff, #f6f9ff); }
.dep-mode-h { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.dep-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 24px;
  color: #fff; background: var(--grad); box-shadow: 0 14px 28px -10px rgba(47,107,255,.6); }
.dep-mode-h h3 { margin: 0 0 3px; font-size: 21px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.dep-mode-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.dep-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.dep-list li { position: relative; padding-inline-start: 28px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.dep-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 1px; width: 18px; height: 18px;
  display: grid; place-items: center; font-size: 11px; border-radius: 50%; color: #fff; background: var(--grad); }
.dep-parity { margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .04em; color: var(--muted); }
.dep-parity span { display: inline-block; padding: 9px 18px; border: 1px dashed var(--hair); border-radius: 999px; background: var(--cloud); }

/* ---------- service detail page (service.html) ---------- */
.pg-hero-center .wrap { text-align: center; }
.sv-hero-inner { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.pg-hero-center .pg-crumb { justify-content: center; }
.pg-hero-center .hero-sub { margin-inline: auto; max-width: 60ch; }
.pg-hero-center .hero-cta { justify-content: center; }
.pg-hero-center .pg-stats { justify-content: center; }
.sv-medallion { position: relative; width: clamp(78px, 9vw, 104px); aspect-ratio: 1; border-radius: 26px;
  display: grid; place-items: center; font-size: clamp(32px, 4vw, 46px); color: #fff; background: var(--grad);
  box-shadow: 0 24px 54px -18px rgba(30,94,255,.6); margin-bottom: 28px; }
.sv-medallion::after { content: ""; position: absolute; inset: -9px; border-radius: 33px;
  border: 1px solid rgba(30,94,255,.25); animation: ppbSpin 16s linear infinite; }

/* index services-showcase panel CTA (links to service.html) */
.svc-panel .sp-more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start; margin-top: 22px; font-weight: 600; font-size: 14.5px; color: #fff;
  pointer-events: none; transition: gap .3s var(--ease); }
.svc-panel.active .sp-more { pointer-events: auto; }
.svc-panel .sp-more .chip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); font-size: 12px; transition: transform .3s var(--ease); }
html[dir="rtl"] .svc-panel .sp-more .chip { transform: scaleX(-1); }
.svc-panel .sp-more:hover .chip { transform: translateX(3px); }
html[dir="rtl"] .svc-panel .sp-more:hover .chip { transform: translateX(-3px) scaleX(-1); }

/* ---------- use-case detail page (usecase.html) ---------- */
/* hero headline-result card */
.uc-hero-card { position: relative; align-self: center; width: 100%; max-width: 400px; margin-inline: auto; z-index: 2;
  border: 1px solid var(--hair); border-radius: var(--radius-lg); background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px); padding: clamp(34px, 4vw, 52px); text-align: center;
  box-shadow: 0 40px 90px -40px rgba(6,20,60,.5); }
.uc-hero-glow { position: absolute; inset: -12% -8% 2% -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(58% 58% at 60% 40%, rgba(30,94,255,.28), transparent 70%); filter: blur(24px); }
.uc-hero-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--royal); }
html[dir="rtl"] .uc-hero-eyebrow { letter-spacing: normal; font-family: var(--font-ar); }
.uc-hero-card b { display: block; margin: 12px 0 6px; font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em;
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.uc-hero-card > span:last-child { color: var(--muted); font-size: 15px; }
@media (max-width: 960px) { .uc-hero-card { max-width: 460px; margin-top: 8px; } }

/* built-with row */
.uc-built { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 46px); }
.uc-built-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
html[dir="rtl"] .uc-built-label { letter-spacing: normal; font-family: var(--font-ar); }
.uc-built .pill-row { margin: 0; }

/* results metric cards (inside dark .pg-arch band) */
.uc-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(28px, 4vw, 46px); }
@media (max-width: 720px) { .uc-results { grid-template-columns: 1fr; } }
.uc-result { border: 1px solid var(--band-line); border-radius: 18px; background: rgba(255,255,255,.03);
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 32px); transition: transform .4s var(--ease), border-color .4s, background .4s; }
.uc-result:hover { transform: translateY(-4px); border-color: rgba(56,189,248,.32); background: rgba(56,189,248,.05); }
.uc-result b { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--sky); }
.uc-result span { display: block; margin-top: 10px; color: var(--band-mut); font-size: 14.5px; }

/* tag chip on related use-case cards */
.pg-rel-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--royal); background: rgba(30,94,255,.08); padding: 5px 11px; border-radius: 100px; }
html[dir="rtl"] .pg-rel-tag { letter-spacing: normal; font-family: var(--font-ar); }

/* index use-case card "read the story" affordance */
.uc-card .uc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; font-size: 14px; color: var(--royal); }
.uc-card .uc-more .chip { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(30,94,255,.1); font-size: 12px; transition: transform .3s var(--ease); }
html[dir="rtl"] .uc-card .uc-more .chip { transform: scaleX(-1); }
.uc-card:hover .uc-more .chip { transform: translateX(3px); }
html[dir="rtl"] .uc-card:hover .uc-more .chip { transform: translateX(-3px) scaleX(-1); }

/* ============================================================
   HOMEPAGE FLIP DECK: each section fills the window, snaps, and
   flips as a whole card while scrolling (desktop only).
   Snap + sizing are CSS; the per-section rotateX/opacity is set
   every scroll frame by deckFlip() in main.js.
   ============================================================ */
html.deck { scroll-snap-type: y proximity; }
@media (min-width: 900px) {
  /* every section is its own full-screen "landing page"; the ONLY transition is the card flip */
  body.deck .hero, body.deck section {
    scroll-snap-align: start; overflow: hidden;
    transform-origin: 50% 50%; backface-visibility: hidden;
    /* will-change is applied DYNAMICALLY by deckFlip() only to the section currently flipping —
       promoting all ~7 full-screen sections at once thrashes the compositor and flickers (esp. RTL text). */
  }
  body.deck section {
    height: 100vh; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  body.deck .hero { height: 100vh; }
  body.deck section > .wrap { width: 100%; }
  /* kill every other scroll transition — reveals/settles are forced visible */
  body.deck [data-reveal], body.deck .wi { opacity: 1 !important; transform: none !important; filter: none !important; }
  body.deck [data-sx] { transform: none !important; }
  /* PRODUCTS → KEEP the stacking cards. The whole section is ONE flip card that you scroll
     THROUGH (systems stack internally), then it flips out to the next section. So it is NOT
     forced to 100vh, and deckFlip leaves it un-transformed while it covers the viewport. */
  body.deck .products { height: auto; overflow: visible; display: block;
    margin-top: 0; margin-bottom: 0; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 100px); }
  /* the section is overflow:visible here (for sticky stacking), so keep the decorative glow
     from bleeding into the next section — contain it to the section bounds */
  body.deck .products::before { inset: 0; }
  /* keep the section title pinned while the systems stack under it */
  body.deck .products .section-head { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 6;
    background: transparent; padding: 12px 0 16px; margin-bottom: clamp(28px, 3.5vw, 56px); pointer-events: none; }
  body.deck .products .section-head .lead { display: none; }
  body.deck .products .section-head .title-lg { font-size: clamp(1.4rem, 2.4vw, 2rem); }
  /* smaller cards, stuck LOWER (with clear space under the pinned title) */
  body.deck .products .p-card { top: calc(var(--nav-h) + 168px); min-height: clamp(180px, 24vh, 244px);
    will-change: transform; }
  body.deck .products .p-card .p-copy { padding: clamp(22px, 2.4vw, 34px); }
  body.deck .products .p-card h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); margin-bottom: 12px; }
  body.deck .products .p-card .p-desc { font-size: 14px; }
  body.deck .products .p-card .p-art { padding: clamp(14px, 1.8vw, 26px); }
  /* SERVICES → a 2×2 card grid; show EVERY card's description (not just the active one) */
  body.deck .services .svc-showcase { display: block; }
  body.deck .services .svc-preview { display: none; }
  body.deck .services .svc-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); }
  body.deck .services .svc-item { border: 1px solid var(--hair) !important; border-radius: var(--radius);
    padding: clamp(20px, 2vw, 28px); }
  body.deck .services .svc-item .si-desc { max-height: 120px !important; opacity: 1 !important; margin-top: 12px !important; }
  body.deck .services .section-head { margin-bottom: clamp(14px, 2vw, 24px); }
  body.deck .services .section-head .title-lg { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
  body.deck .services .section-head .lead { display: none; }
  /* PLATFORM → heading + live diagram only; the full 10-cap grid lives on platform.html */
  body.deck .platform .caps, body.deck .platform .pill-row, body.deck .platform .plat-more { display: none; }
  /* CTA + FOOTER together fill ONE screen (merged into .deck-last by main.js).
     No top padding, so the dark CTA runs up behind the nav (which turns dark over it);
     the CTA content is vertically centred, so it never slides under the fixed menu. */
  body.deck .deck-last { scroll-snap-align: start; overflow: hidden; height: 100vh;
    box-sizing: border-box;
    display: flex; flex-direction: column; transform-origin: 50% 50%; backface-visibility: hidden; }
  body.deck .deck-last #contact { flex: 1 1 auto; height: auto; min-height: 0; display: flex; }
  body.deck .deck-last #contact > .wrap { flex: 1; display: flex; min-height: 0; }
  body.deck .deck-last #contact .cta-box { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  body.deck .deck-last .footer { flex: 0 0 auto; padding-top: clamp(20px, 2.2vw, 32px); }
}
@media (max-width: 899px) {
  html.deck { scroll-snap-type: none; }
}

/* ============================================================
   MEGA-NAV — hover dropdown panels (Products / Services / Use Cases)
   Built by main.js buildNav() so it lives on every page.
   ============================================================ */
.nav-mega { position: relative; display: inline-flex; }
.nav-mega-t { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: var(--ink-2);
  font-weight: 500; padding: 9px 16px; border-radius: 100px; transition: color .25s, background .25s; white-space: nowrap; }
.nav-mega-t .caret { font-size: 9px; transition: transform .25s; }
.nav-mega:hover .nav-mega-t { color: var(--royal); background: var(--icefog); }
.nav-mega:hover .nav-mega-t .caret { transform: rotate(180deg); }
.nav.on-dark .nav-mega-t { color: rgba(255,255,255,.8); }
.nav.on-dark .nav-mega:hover .nav-mega-t { color: #fff; background: rgba(255,255,255,.12); }

.nav-mega-panel { position: absolute; top: 100%; inset-inline-start: 0; transform: translateY(10px);
  padding-top: 15px; width: min(820px, 94vw); z-index: 120;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; }
.nav-mega:hover .nav-mega-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.nmp-inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 12px; padding: 14px;
  border-radius: 22px; background: rgba(255,255,255,.98); backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--hair); box-shadow: 0 34px 80px -26px rgba(8,18,38,.34); }
.nmp-list { display: flex; flex-direction: column; gap: 2px; }
.nmp-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; transition: background .2s; }
.nmp-item:hover, .nmp-item.active { background: var(--cloud-2); }
.nmp-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px;
  color: var(--royal); background: rgba(30,94,255,.08); flex: none; }
.nmp-txt { display: flex; flex-direction: column; line-height: 1.28; min-width: 0; }
.nmp-txt b { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nmp-txt em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nmp-preview { position: relative; border-radius: 16px; overflow: hidden; padding: 18px; min-height: 250px;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 100% at 100% 0, rgba(30,94,255,.1), transparent 58%), var(--cloud);
  border: 1px solid var(--hair); }
.nmp-prev-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px;
  color: #fff; background: var(--grad); box-shadow: 0 14px 30px -12px rgba(30,94,255,.5); }
.nmp-prev-name { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; margin-top: 14px;
  color: var(--ink); letter-spacing: -.01em; }
.nmp-prev-desc { font-size: 13.5px; color: var(--muted); margin-top: 8px; flex: 1; }
.nmp-prev-cta { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--royal); margin-top: 14px; }
/* platform layer preview — an illustrative "screen" that fills the space and describes the layer */
.nmp-prev-layer .nmp-prev-desc { flex: none; }
.nmp-art { flex: 1; min-height: 0; margin-top: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--hair);
  box-shadow: 0 16px 40px -26px rgba(20,28,60,.5); padding: 13px; display: flex; flex-direction: column; gap: 11px; overflow: hidden; }
.nmp-art-hd { display: flex; align-items: center; gap: 10px; }
.nmp-art-glyph { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center;
  font-size: 15px; color: #fff; background: var(--grad); }
.nmp-art-t { flex: 1; height: 8px; border-radius: 4px; background: var(--cloud-2); }
.nmp-art-rows { display: flex; flex-direction: column; gap: 6px; }
.nmp-art-rows i { height: 7px; border-radius: 4px; background: var(--cloud-2); }
.nmp-art-rows i:nth-child(1) { width: 92%; }
.nmp-art-rows i:nth-child(2) { width: 68%; }
.nmp-art-rows i:nth-child(3) { width: 80%; }
.nmp-art-chart { margin-top: auto; display: flex; align-items: flex-end; gap: 5px; height: 48px; }
.nmp-art-chart b { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #6f9bff, var(--royal)); }
a.nav-mega-t { text-decoration: none; }
.nmp-prev-cta span { transition: transform .3s var(--ease); }
html[dir="rtl"] .nmp-prev-cta span { transform: scaleX(-1); }
.nmp-preview:hover .nmp-prev-cta span { transform: translateX(3px); }

/* product preview = a real product screen (reuses productMock) */
.nmp-screen { flex: 1; border-radius: 12px; overflow: hidden; display: flex; min-height: 0;
  box-shadow: 0 16px 40px -22px rgba(8,20,60,.55); }
.nmp-screen .mock { width: 100%; box-shadow: none; border-radius: 12px; }
.nmp-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.nmp-cap b { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.nmp-cap .nmp-prev-cta { margin-top: 0; }
/* service preview = capability chips diagram */
.nmp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; flex: 1; align-content: flex-start; }
.nmp-chips span { border: 1px solid var(--hair-2); border-radius: 100px; padding: 7px 13px; font-size: 12.5px;
  color: var(--ink-2); background: #fff; }
/* use-case preview = headline result */
.nmp-metric b { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(2rem, 3vw, 2.6rem); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nmp-metric span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* mobile: mega becomes an inline accordion inside the slide-in menu */
@media (max-width: 1080px) {
  .nav-mega { width: 100%; display: block; }
  .nav-mega-t { width: 100%; justify-content: space-between; font-size: 18px; font-family: var(--font-display);
    padding: 4px 0; background: none !important; color: var(--ink) !important; }
  .nav-mega-panel { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    width: 100%; padding-top: 0; max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
  .nav-mega.open .nav-mega-panel { max-height: 820px; }
  .nav-mega.open .nav-mega-t .caret { transform: rotate(180deg); }
  .nmp-inner { grid-template-columns: 1fr; background: none; border: none; box-shadow: none; padding: 8px 0 4px; backdrop-filter: none; }
  .nmp-preview { display: none; }
  .nmp-item { padding: 7px 4px; gap: 10px; }
  .nmp-ico { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
  .nmp-txt b { font-size: 13.5px; }
  .nmp-txt em { font-size: 11.5px; }
}

/* mobile menu polish — even rhythm, row dividers, clearer carets, tidy sub-items */
@media (max-width: 1080px) {
  /* lock the page behind the open drawer — no scrolling the site while the menu is open */
  html.nav-open, html.nav-open body { overflow: hidden; touch-action: none; }
  /* keep the header controls (language toggle + close X) clickable above the full-width drawer */
  .nav-right { position: relative; z-index: 110; }
  /* hide the floating "Ask ITMAM AI" widget while the drawer is open, so the menu sits on top */
  html.nav-open .ai-widget { opacity: 0; visibility: hidden; pointer-events: none; }
  /* open drawer: keep the whole header strip solid white (no dark/blur tint), logo + controls on top */
  html.nav-open .nav { background: #fff !important; backdrop-filter: none !important; box-shadow: none !important; }
  html.nav-open .progress { display: none; }
  .nav .brand { position: relative; z-index: 110; }   /* keep the site logo visible above the full-width drawer */
  /* solid drawer — no page content bleeding through behind the menu items */
  .nav-links { gap: 0; padding-top: 80px; background: #fff; }
  /* Dark-hero pages keep .nav.on-dark even while the drawer is open (see line ~1698/1700/1704/1708),
     which turns the drawer transparent + its text white. Force a solid white menu with dark controls. */
  html.nav-open .nav.on-dark .nav-links { background: #fff; box-shadow: none; }
  html.nav-open .nav.on-dark .nav-links a,
  html.nav-open .nav.on-dark .nav-links .nav-mega-t,
  html.nav-open .nav.on-dark .nav-links .nav-drop-t,
  html.nav-open .nav.on-dark .nav-links .nmp-txt b { color: var(--ink); }
  html.nav-open .nav.on-dark .nav-links .nav-drop-menu a { color: var(--ink-2); }
  html.nav-open .nav.on-dark .nav-toggle span { background: var(--ink); }
  html.nav-open .nav.on-dark .lang-toggle { color: var(--ink); border-color: var(--hair); background: var(--icefog); }
  /* every top-level row spans the drawer with a hairline divider + comfy tap target */
  .nav-links > .nav-mega,
  .nav-links > .nav-drop,
  .nav-links > a:not(.saas-link) { width: 100%; border-bottom: 1px solid var(--hair); }
  .nav-links > a:not(.saas-link) { padding: 14px 2px; font-size: 18px; }
  .nav-links .nav-mega-t, .nav-links .nav-drop-t { width: 100%; justify-content: space-between;
    padding: 14px 2px; font-size: 18px; font-family: var(--font-display); }
  /* proper chevrons pinned right (not tiny dots), muted but legible */
  .nav-mega-t .caret, .nav-drop-t .caret { font-size: 15px; opacity: .68; margin-inline-start: auto;
    color: var(--royal); }
  /* no sticky hover pills / rounded backgrounds on touch — rows are divider-separated */
  .nav-links a, .nav-links .nav-mega-t, .nav-links .nav-drop-t { border-radius: 0; }
  .nav-links > a:not(.saas-link):hover,
  .nav-mega:hover .nav-mega-t, .nav-drop:hover .nav-drop-t,
  .nav-mega-t:hover, .nav-drop-t:hover { background: none; color: var(--ink); }

  /* nested sub-menus (mega panels + Company) — clean indent, no rail border */
  .nav-mega .nmp-inner { padding: 4px 0 10px; margin-inline-start: 2px; padding-inline-start: 6px; }
  .nmp-item { padding: 9px 8px; border-radius: 10px; gap: 12px; }
  .nmp-item:hover { background: none; }
  .nmp-item.active { background: var(--cloud-2); }
  .nmp-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--cloud-2); color: var(--royal); }
  .nmp-item.active .nmp-ico { background: #fff; }
  .nmp-txt b { font-size: 14.5px; color: var(--ink); }
  .nmp-txt em { font-size: 12px; color: #7b879e; }

  /* Company is a collapsible accordion too — closed until tapped, no rail border */
  .nav-drop-menu { max-height: 0; overflow: hidden; opacity: 1; visibility: visible;
    transition: max-height .35s var(--ease);
    margin-inline-start: 2px; padding: 0; padding-inline-start: 6px; border-inline-start: none; }
  .nav-drop.open .nav-drop-menu { max-height: 320px; padding-bottom: 8px; }
  .nav-drop.open .nav-drop-t .caret { transform: rotate(180deg); }
  .nav-drop-menu a { padding: 9px 0; font-size: 15px; color: var(--ink-2); border-radius: 0; }
  .nav-drop-menu a:hover { background: none; }

  /* SaaS Portal button removed from the mobile menu (still shown in the desktop nav) */
  .nav-links .saas-link { display: none; }

  /* drawer footer: social icons, pushed to the very bottom of the menu and centred (mobile only) */
  .nav-foot { display: flex; flex-direction: column; align-items: center;
    width: 100%; margin-top: auto; padding-top: 28px; padding-bottom: 6px; }
  .nav-foot-socials { display: flex; gap: 14px; justify-content: center; }
  .nav-foot-socials a { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--hair-2);
    display: grid; place-items: center; color: var(--ink-2); font-weight: 600; font-size: 15px;
    text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
  .nav-foot-socials a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
  .nav-foot-socials a img { width: 18px; height: 18px; object-fit: contain; }
}

/* ============================================================
   COMPACT SCREENS — laptop monitors (short viewports) + mobile
   ============================================================ */
/* short desktop/laptop monitors (e.g. 1366×768): everything must fit the 100vh deck cards */
@media (min-width: 900px) and (max-height: 860px) {
  .title-lg { font-size: clamp(1.9rem, 4vw, 3rem); }
  .hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
  .hero-sub { font-size: clamp(.95rem, 1.2vw, 1.05rem); margin-bottom: 22px; }
  .section { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
  .section-head, .plat-head { margin-bottom: clamp(18px, 2.4vw, 30px); }
  .lead { font-size: 15.5px; }
  body.deck .products .p-card { top: calc(var(--nav-h) + 128px); min-height: clamp(160px, 22vh, 210px); }
  body.deck .products .section-head { margin-bottom: clamp(18px, 2vw, 32px); }
  body.deck .deck-last .cta-box { padding: clamp(18px, 2.6vh, 32px) clamp(24px, 4vw, 56px); }
  body.deck .deck-last .cta-box h2 { font-size: clamp(1.45rem, 2.9vw, 2.05rem); }
  body.deck .deck-last .cta-box p { font-size: 14.5px; margin: 12px 0 18px; }
  body.deck .deck-last .footer { padding-top: 16px; padding-bottom: 18px; }
  body.deck .deck-last .footer-grid { margin-bottom: 20px; gap: 28px; }
  body.deck .deck-last .footer-bottom { padding-top: 14px; }
  body.deck .deck-last .f-about { font-size: 13px; margin-top: 10px; }
  body.deck .deck-last .footer ul { gap: 8px; }
  body.deck .deck-last .footer ul a { font-size: 13.5px; }
  body.deck .deck-last .footer h5 { margin-bottom: 10px; }
  body.deck .deck-last .foot-logo { height: 48px; }
  .man-badges { margin-top: 26px; }
  .stats-row .num { font-size: clamp(2rem, 3.6vw, 2.8rem); }
  .uc-card { padding: 22px 22px 18px; }
  .caps .cap { padding: 20px 18px; }
  :root { --nav-h: 72px; }
  .nav { padding-top: 13px; padding-bottom: 13px; }
}
/* mobile / narrow: diagrams scale down to fit — no horizontal scrolling */
@media (max-width: 720px) {
  .dg-svg { min-width: 0; }
  .dg-card, .pg-flow .dg-card { overflow-x: hidden; padding: 10px; border-radius: 14px; }
  .uc-fp-card { padding: 8px; }
  .pp-flow-cap { font-size: 13px; }
}