/* ═══════════════════════════════════════════════════════════════════════
   ELBI · a-i.sa/testing — Elbetron house style
   Light body · dark cinematic hero · teal #00C2B2 · Inter · 8px radii
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --teal:#00C2B2;
  /* White on #00C2B2 measures 2.24:1 — under the 4.5:1 AA floor for text.
     The accent is unchanged: --teal still paints borders, bars and accents,
     where contrast rules do not apply. --teal-cta exists only where TEXT
     sits on the colour, and for the focus ring, which needs 3:1. */
  --teal-cta:#00796B; --teal-d:#009688; --teal-dd:#005F55; --teal-l:#5EEAD4;
  --ink:#0F172A; --ink-2:#334155; --ink-3:#64748B; --ink-4:#94A3B8;
  --bg:#FFFFFF; --bg-2:#F8FAFC; --bg-3:#F1F5F9;
  --dark:#080E14; --dark-2:#0F1720; --dark-3:#16212C;
  --line:#E2E8F0; --line-d:rgba(255,255,255,.10);
  --grad:linear-gradient(135deg,#005F55 0%,#00C2B2 50%,#009688 100%);
  --r:8px; --r-l:14px; --r-xl:20px;
  --sh-s:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --sh:0 4px 16px rgba(15,23,42,.08);
  --sh-l:0 18px 50px -12px rgba(15,23,42,.18);
  --max:1180px; --ez:cubic-bezier(.16,1,.3,1);
  --f:'Inter',system-ui,-apple-system,sans-serif;
  --f-ar:'IBM Plex Sans Arabic','Tajawal',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16.5px;
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body[dir="rtl"]{font-family:var(--f-ar);font-size:17.5px;line-height:1.9}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:rgba(0,194,178,.25)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:96px 0;position:relative}
.bg-2{background:var(--bg-2)}
h1,h2,h3{font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3{letter-spacing:0;line-height:1.4}
h1{font-size:clamp(2.3rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.85rem,3.3vw,2.6rem)}
h3{font-size:1.16rem;font-weight:700}
.kicker{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-cta);margin-bottom:14px}
body[dir="rtl"] .kicker{letter-spacing:0}
.sub{font-size:1.06rem;color:var(--ink-3);max-width:66ch;margin-top:14px}
.center{text-align:center}.center .sub{margin-inline:auto}
.dark-sec{background:var(--dark);color:#fff}
.dark-sec h2,.dark-sec h3{color:#fff}
.dark-sec .sub{color:rgba(255,255,255,.66)}
.dark-sec .kicker{color:var(--teal-l)}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;inset-inline:0;z-index:100;background:transparent;border-bottom:1px solid transparent}
/* floating-pill nav: full-bleed at rest, contracts into a glass panel on scroll */
.nav-in{position:relative;max-width:var(--max);margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:26px;
  border:1px solid transparent;border-radius:0;background:transparent;
  transition:max-width .44s var(--ez),width .44s var(--ez),padding .44s var(--ez),margin-top .44s var(--ez),
             border-radius .44s var(--ez),background-color .32s var(--ez),
             border-color .32s var(--ez),box-shadow .32s var(--ez)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:#fff;transition:color .3s}
.nav.on .brand{color:var(--ink)}
.brand-mk{width:34px;height:34px;border-radius:9px;background:var(--grad);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:15px;flex:0 0 auto;box-shadow:0 4px 14px rgba(0,194,178,.4)}
.nav-r{display:flex;gap:9px;align-items:center}
.lang-b{font-size:.82rem;font-weight:700;padding:8px 13px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.24);color:#fff;transition:.2s}
.nav.on .lang-b{border-color:var(--line);color:var(--ink-2)}
.lang-b:hover{background:var(--teal-cta);border-color:var(--teal-cta);color:#fff}
.burger{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.24);border-radius:var(--r);
  background:none;color:#fff;cursor:pointer;padding:0;place-items:center}
.burger svg{width:20px;height:20px;transition:transform .3s ease-in-out}
.burger .bgp{stroke-dasharray:12 63;
  transition:stroke-dasharray .3s ease-in-out,stroke-dashoffset .3s ease-in-out}
.burger[aria-expanded="true"] svg{transform:rotate(-45deg)}
.burger[aria-expanded="true"] .bgp{stroke-dasharray:20 300;stroke-dashoffset:-32.42px}
@media(min-width:941px){
  /* Detached from the top the pill becomes liquid glass — a port of
     21st.dev @uilayout.contact/liquid-weather-glass. Its card stacks four
     layers: a displaced backdrop (feTurbulence -> feDisplacementMap), a depth
     shadow, a specular inset, then content. Both shadow tables are the
     component's own "md" variants, verbatim.
     Attached at the top there is no glass at all — see .nav-in at rest. */
  .nav.on .nav-in{max-width:1020px;width:calc(100% - 48px);margin-top:14px;padding:9px 10px 9px 18px;
    border-radius:var(--r-l);border-color:rgba(255,255,255,.62);
    /* .68 is the floor: below it the nav links drop under 4.5:1 where the pill
       passes over the dark CTA and footer (measured 3.34:1 at .55) */
    background:rgba(255,255,255,.68);
    -webkit-backdrop-filter:blur(14px) saturate(180%);
    backdrop-filter:blur(14px) saturate(180%);
    box-shadow:0 4px 4px rgba(15,23,42,.10),0 0 12px rgba(15,23,42,.06),
               0 0 32px rgba(255,255,255,.15),
               inset 3px 3px 3px 0 rgba(255,255,255,.45),
               inset -3px -3px 3px 0 rgba(255,255,255,.45),
               0 10px 34px -14px rgba(15,23,42,.22)}
  /* the refraction rides on its own layer so it never warps the text */
  .nav.on .nav-in::before{content:"";position:absolute;inset:0;border-radius:inherit;
    z-index:0;pointer-events:none;filter:url(#glass-blur);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .nav.on .nav-in>*{position:relative;z-index:1}
  /* …but not .nav-links: the panel measures from .nav-in, and making the link
     row a containing block would silently shrink every panel to the width of
     the triggers the moment the nav detaches. A flex item honours z-index
     without being positioned, so the stacking still works. */
  .nav.on .nav-in>.nav-links{position:static}
}
/* below the pill breakpoint the bar stays full-bleed and the links collapse to the
   toggle — English nav links need 835px of viewport, well past the old 700px cut */
/* 1080, not 940: the English desktop nav needs about 1060px (brand 79 +
   links 716 + actions 164, plus two 26px gaps and the wrap padding), so
   between 941px and 1034px the desktop nav was still active and the
   language toggle and the CTA were cut off the right edge. Arabic fits in
   less (its links are 594px) but one breakpoint for both beats two that
   drift apart. .card.tilt stays at 940 — it is not nav. */
@media(max-width:1080px){
  .nav.on{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:var(--sh-s)}
  .burger{display:grid}
}
.nav.on .burger{border-color:var(--line);color:var(--ink)}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 34px;border-radius:var(--r);font-weight:650;font-size:.96rem;
  border:2px solid transparent;cursor:pointer;transition:.24s var(--ez);white-space:nowrap;font-family:inherit}
.btn-p{background:var(--teal-cta);color:#fff;box-shadow:0 6px 20px -6px rgba(0,121,107,.55)}
.btn-p:hover{background:var(--teal-d);transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(0,194,178,.7)}
/* Light is the default: only .dark-sec, .cta and the dark hero get the
   reversed treatment. It used to be the other way round, which left the
   #compare CTA on both home pages as white text on a white ground. */
.btn-o{border-color:var(--line);color:var(--ink);background:#fff}
.dark-sec .btn-o,.cta .btn-o,.hero:not(.light) .btn-o{
  border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.btn-o:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.dark-sec .btn-o:hover,.cta .btn-o:hover,.hero:not(.light) .btn-o:hover{
  background:#fff;color:var(--ink);border-color:#fff}
.btn-l{border-color:var(--line);color:var(--ink);background:#fff}
.btn-l:hover{border-color:var(--teal);color:var(--teal-d)}
.btn-sm{padding:10px 20px;font-size:.86rem}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{background:var(--dark);color:#fff;padding:150px 0 96px;position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none}
.hero::before{width:600px;height:600px;background:rgba(0,194,178,.20);top:-190px;inset-inline-end:-140px}
.hero::after{width:480px;height:480px;background:rgba(0,95,85,.30);bottom:-220px;inset-inline-start:-130px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
.hero h1{color:#fff;margin:8px 0 18px}
.hero .sub{color:rgba(255,255,255,.72);font-size:1.1rem}
.hero .kicker{color:var(--teal-l)}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 30px}
.htag{font-size:.79rem;font-weight:600;padding:7px 14px;border-radius:100px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{display:flex;gap:12px;align-items:flex-start;margin-top:32px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12)}
.hero-note .ic{font-size:22px;flex:0 0 auto}
/* Emoji ignore `color`, so this changes nothing visually — it stops the light
   hero inheriting the dark hero's white and tripping every contrast audit. */
.hero.light .hero-note .ic{color:var(--ink-3)}
.hero-note b{display:block;color:#fff;font-size:.95rem}
.hero-note span{font-size:.87rem;color:rgba(255,255,255,.6)}

/* ── chat mock ───────────────────────────────────────────────────────── */
.mock{background:#fff;border-radius:var(--r-xl);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);overflow:hidden}
.mock-h{display:flex;align-items:center;gap:11px;padding:14px 17px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.mock-av{width:36px;height:36px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:13px;flex:0 0 auto}
.mock-h b{font-size:.92rem;display:block;color:var(--ink)}
.mock-h .on-dot{font-size:.75rem;color:#16A34A;display:flex;align-items:center;gap:5px}
.mock-h .on-dot i{width:7px;height:7px;border-radius:50%;background:#16A34A;animation:bp 2s infinite}
@keyframes bp{50%{opacity:.35}}
.mock-b{padding:18px;display:flex;flex-direction:column;gap:12px;background:#fff;min-height:250px}
.msg{display:flex;gap:9px;align-items:flex-start;opacity:0;animation:mup .55s var(--ez) forwards}
@keyframes mup{to{opacity:1;transform:none}}
.msg{transform:translateY(10px)}
.msg .who{width:27px;height:27px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:9.5px;font-weight:800;color:#fff}
.msg.ai .who{background:var(--teal)}
.msg.us{flex-direction:row-reverse}
.msg.us .who{background:var(--ink-3)}
.msg p{background:var(--bg-3);padding:11px 14px;border-radius:var(--r-l);font-size:.87rem;line-height:1.6;color:var(--ink-2)}
.msg.us p{background:var(--teal-cta);color:#fff}
.mock-f{padding:11px 17px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;
  font-size:.79rem;color:var(--ink-3);background:var(--bg-2)}
.eq{display:inline-flex;gap:2.5px;align-items:flex-end;height:15px}
.eq i{width:2.5px;background:var(--teal);border-radius:2px;animation:eq .9s ease-in-out infinite}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.side-card{background:#fff;border-radius:var(--r-l);padding:15px 17px;box-shadow:var(--sh);margin-top:13px}
.side-card .lbl{font-size:.67rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}
body[dir="rtl"] .side-card .lbl{letter-spacing:0}
.bar{height:6px;border-radius:4px;background:var(--bg-3);overflow:hidden;margin:5px 0 9px}
.bar i{display:block;height:100%;border-radius:4px;background:var(--teal);width:0;transition:width 1.3s var(--ez)}
.bar.n i{background:var(--ink-4)}.bar.g i{background:#F59E0B}
.row-sm{display:flex;justify-content:space-between;font-size:.79rem;color:var(--ink-2);margin-top:8px}

/* ── cards ───────────────────────────────────────────────────────────── */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
/* the capability tiles came out 363x339 — square. Two up gives them a
   landscape card shape and lets the copy breathe on fewer lines. */

.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:28px;
  transition:.3s var(--ez);position:relative}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-l);border-color:rgba(0,194,178,.4)}
.card .ic{width:50px;height:50px;border-radius:12px;background:rgba(0,194,178,.1);color:var(--teal-d);
  display:grid;place-items:center;font-size:22px;margin-bottom:16px}
/* stroked marks replace the emoji: consistent weight, one colour, and they
   render the same on every platform instead of Apple-vs-Windows artwork */
.card .ic svg{width:24px;height:24px;stroke:var(--teal-d);fill:none}
.gc-badge svg{width:22px;height:22px;stroke:var(--teal-d);fill:none}
.card p{color:var(--ink-3);font-size:.94rem;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chips span{font-size:.75rem;font-weight:600;padding:5px 11px;border-radius:100px;
  background:var(--bg-3);color:var(--ink-2)}
.persona{font-size:.78rem;color:var(--teal-d);font-weight:700;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line)}

/* ── 3D tilt · port of 21st.dev @kavikatiyar/3d-card ───────────────────
   From the published bundle:
     perspective  1000px            (per card — the demo wraps a single one)
     tilt         rotateX from pointer Y, INVERTED: [-.5,.5]->[10.5,-10.5]deg
                  rotateY from pointer X, same sense: [-.5,.5]->[-10.5,10.5]
     spring       damping 15, stiffness 150, mass 1  (zeta .61 — overshoots)
     structure    a transparent OUTER frame carrying the border and the big
                  shadow, with the content on an INNER plate inset 16px at
                  translateZ(50px) and its own shadow. That gap between frame
                  and plate is what reads as depth — the plate visibly floats
                  inside the border rather than being painted on it.
     depths       plate 50; then within it badge 60, title 50, body 40, so
                  they compose the same way the original stacks them.       */
.card.tilt{background:none;border:1px solid rgba(226,232,240,.55);border-radius:16px;
  padding:0;transform-style:preserve-3d;will-change:transform;
  box-shadow:0 25px 50px -12px rgba(15,23,42,.14);
  transition:box-shadow .35s var(--ez),border-color .35s var(--ez)}
.card.tilt:hover{transform:none;               /* the spring owns transform */
  box-shadow:0 25px 50px -12px rgba(15,23,42,.25);border-color:rgba(0,194,178,.45)}
/* three across, and taller than wide — a portrait card. The plate stretches
   to the frame so the pair keep their 16px gap at any height, and the chips
   sit on the foot rather than floating in the middle of the empty space. */
.card.tilt{min-height:430px;display:flex}
.tilt-plate{flex:1;display:flex;flex-direction:column;margin:16px;padding:24px;border-radius:12px;background:#fff;
  transform:translateZ(50px);transform-style:preserve-3d;
  box-shadow:0 10px 15px -3px rgba(15,23,42,.10),0 4px 6px -4px rgba(15,23,42,.10);
  transition:box-shadow .35s var(--ez)}
.card.tilt:hover .tilt-plate{box-shadow:0 20px 25px -5px rgba(15,23,42,.13),
  0 8px 10px -6px rgba(15,23,42,.10)}
.card.tilt .ic{transform:translateZ(60px);transition:transform .35s var(--ez)}
.card.tilt h3{transform:translateZ(50px);transition:transform .35s var(--ez)}
.card.tilt p{transform:translateZ(40px);transition:transform .35s var(--ez)}
.card.tilt .chips{transform:translateZ(40px);transition:transform .35s var(--ez)}
.card.tilt .persona{transform:translateZ(40px);transition:transform .35s var(--ez)}
.card.tilt .chips,.card.tilt .persona{margin-top:auto}

/* ── glass card · port of 21st.dev @Smit-Prajapati/glass-card ───────────
   Geometry straight from the bundle: rounded-[50px] body, a sheet inset 8px
   at rounded-[55px] carrying only a bottom+left border, content at
   translateZ(26px), and four concentric rings at 170/140/110/80px anchored
   top-right at 8/10/17/23px, riding out to Z 20/40/60/80 with 0/.4/.8/1.2s
   delays; the badge sits at Z 100 and pushes to 120 on hover, 1.6s behind.
   The port's fixed hover tilt (rotate3d(1,1,0,30deg)) has been replaced by
   the pointer-tracking spring in site.js — the same one the agent cards use.

   Recoloured for a light page: the original is zinc-900 -> black with white
   sheets over it. Inverted here — a near-white body, an even lighter sheet,
   and rings in ink at 4-6% rather than white at 10%, so the depth reads as
   soft grey rather than the black-on-black of the original.               */
.card.glass{background:none;border:0;padding:0;box-shadow:none;border-radius:0;
  height:300px;perspective:1000px}
.card.glass:hover{transform:none;box-shadow:none}
.gc-body{position:relative;height:100%;border-radius:50px;transform-style:preserve-3d;
  background:linear-gradient(to bottom right,#FFFFFF,#E4EAF2);
  box-shadow:0 25px 50px -12px rgba(15,23,42,.13);
  /* box-shadow only: the tilt spring writes transform every frame, and a
     transition on it would fight the spring and lag behind the pointer */
  transition:box-shadow .5s ease-in-out}
/* the single fixed 30deg tilt is gone — the pointer-tracking spring owns
   transform now. Dropping it (rather than letting the inline style win) means
   reduced-motion and touch users, where the spring never binds, get no tilt
   at all instead of a 0.5s swing to 30deg. */
.card.glass:hover .gc-body{
  box-shadow:rgba(15,23,42,.16) 30px 50px 25px -40px,rgba(15,23,42,.07) 0 25px 30px 0}
.gc-sheet{position:absolute;inset:8px;border-radius:55px;transform-style:preserve-3d;
  transform:translate3d(0,0,25px);
  border-bottom:1px solid rgba(255,255,255,.9);border-left:1px solid rgba(255,255,255,.9);
  background:linear-gradient(to bottom,rgba(255,255,255,.72),rgba(255,255,255,.28));
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

.gc-rings{position:absolute;top:0;right:0;transform-style:preserve-3d}
body[dir="rtl"] .gc-rings{right:auto;left:0}
.gc-rings span{position:absolute;aspect-ratio:1;border-radius:50%;
  background:rgba(15,23,42,.065);
  box-shadow:rgba(100,100,111,.17) -10px 10px 20px 0;
  transition:all .5s ease-in-out}
body[dir="rtl"] .gc-rings span{box-shadow:rgba(100,100,111,.17) 10px 10px 20px 0}
.gc-rings span:nth-child(1){width:170px;top:8px;right:8px;transform:translate3d(0,0,20px);transition-delay:0s}
.gc-rings span:nth-child(2){width:140px;top:10px;right:10px;transform:translate3d(0,0,40px);transition-delay:.4s}
.gc-rings span:nth-child(3){width:110px;top:17px;right:17px;transform:translate3d(0,0,60px);transition-delay:.8s}
.gc-rings span:nth-child(4){width:80px;top:23px;right:23px;transform:translate3d(0,0,80px);transition-delay:1.2s}
body[dir="rtl"] .gc-rings span:nth-child(1){right:auto;left:8px}
body[dir="rtl"] .gc-rings span:nth-child(2){right:auto;left:10px}
body[dir="rtl"] .gc-rings span:nth-child(3){right:auto;left:17px}
body[dir="rtl"] .gc-rings span:nth-child(4){right:auto;left:23px}
.gc-badge{position:absolute;top:30px;right:30px;width:50px;height:50px;border-radius:50%;
  display:grid;place-content:center;font-size:22px;background:#fff;
  box-shadow:rgba(100,100,111,.22) -10px 10px 20px 0;
  transform:translate3d(0,0,100px);transition:all .5s ease-in-out;transition-delay:1.6s}
body[dir="rtl"] .gc-badge{right:auto;left:30px;box-shadow:rgba(100,100,111,.22) 10px 10px 20px 0}
.card.glass:hover .gc-badge{transform:translate3d(0,0,120px)}

.gc-txt{position:absolute;inset-inline:0;top:0;transform:translate3d(0,0,26px);
  padding:104px 28px 0}
.gc-txt h3{font-size:1.06rem;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.015em}
.gc-txt p{margin-top:12px;font-size:.86rem;line-height:1.55;color:var(--ink-3)}

/* the tip and the layer separation both need a pointer and motion */
@media(hover:none),(prefers-reduced-motion:reduce){
  .card.glass{height:auto;perspective:none}
  .gc-body{transform:none!important;border-radius:var(--r-l);transform-style:flat;
    box-shadow:var(--sh-s);border:1px solid var(--line);padding:26px;
    display:flex;flex-direction:column;gap:14px}
  .gc-sheet,.gc-rings span{display:none}
  .gc-rings{position:static;transform:none}
  .gc-badge{position:static;transform:none;width:50px;height:50px;border-radius:12px;
    background:rgba(0,194,178,.1);box-shadow:none}
  .gc-txt{position:static;transform:none;padding:0}
}
@media(max-width:940px){.card.tilt{min-height:0}}
.card.tilt:hover .ic{transform:translateZ(78px) scale(1.06)}
@media(hover:none),(prefers-reduced-motion:reduce){
  .card.tilt{transform:none!important;transform-style:flat;box-shadow:var(--sh-s);min-height:0;display:block;
    border-color:var(--line)}
  .tilt-plate{transform:none;box-shadow:none;margin:0;padding:28px;transform-style:flat}
  .card.tilt .ic,.card.tilt h3,.card.tilt p,.card.tilt .chips{transform:none!important}
}

/* ── dashboard mock ──────────────────────────────────────────────────── */
.dash{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-l);overflow:hidden;border:1px solid var(--line)}
.dash-h{padding:14px 20px;background:var(--dark);color:#fff;font-size:.86rem;font-weight:600;
  display:flex;justify-content:space-between;align-items:center}
.dash-h .live{font-size:.72rem;color:var(--teal-l);display:flex;gap:6px;align-items:center}
.dash-h .live i{width:7px;height:7px;border-radius:50%;background:var(--teal-l);animation:bp 2s infinite}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.kpi{padding:20px 16px;text-align:center;border-inline-end:1px solid var(--line)}
.kpi:last-child{border-inline-end:0}
.kpi .v{font-size:1.75rem;font-weight:800;color:var(--ink)}
.kpi .k{font-size:.76rem;color:var(--ink-3);margin-top:3px}
.kpi .d{font-size:.72rem;color:#16A34A;margin-top:5px;font-weight:600}
.dash-b{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:24px}

/* ── stats band ──────────────────────────────────────────────────────── */
.stats{background:var(--dark-2);color:#fff;padding:64px 0;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:.13}
.stats .wrap{position:relative;z-index:2}
.stat-g{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.stat .v{font-size:clamp(2.1rem,4vw,3rem);font-weight:800;color:var(--teal-l);line-height:1}
.stat .k{font-size:.88rem;color:rgba(255,255,255,.7);margin-top:8px}

/* ── timeline ────────────────────────────────────────────────────────── */
.tl{position:relative;padding-inline-start:34px}
.tl::before{content:"";position:absolute;inset-inline-start:11px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-i{position:relative;padding-bottom:30px}
.tl-i::before{content:"";position:absolute;inset-inline-start:-29px;top:4px;width:24px;height:24px;
  border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:800;box-shadow:0 0 0 4px #fff}
.tl-i:nth-child(1)::before{content:"1"}.tl-i:nth-child(2)::before{content:"2"}
.tl-i:nth-child(3)::before{content:"3"}.tl-i:nth-child(4)::before{content:"4"}
.tl-i:nth-child(5)::before{content:"5"}
.tl-d{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d)}
body[dir="rtl"] .tl-d{letter-spacing:0}
.tl-i p{color:var(--ink-3);font-size:.93rem;margin-top:5px}

/* ── vision band ─────────────────────────────────────────────────────── */
.vision{background:var(--grad);color:#fff;padding:74px 0;text-align:center}
.vision h2{color:#fff}
.vision p{color:rgba(255,255,255,.9);max-width:74ch;margin:16px auto 0;font-size:1.04rem}
.v-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:11px;margin-top:28px}
.v-pills span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  padding:9px 18px;border-radius:100px;font-size:.87rem;font-weight:600;backdrop-filter:blur(6px)}

/* ── table / faq ─────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:.93rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.tbl th,.tbl td{padding:14px 17px;text-align:start;border-bottom:1px solid var(--line)}
.tbl th{background:var(--bg-2);font-size:.76rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
body[dir="rtl"] .tbl th{letter-spacing:0}
.tbl tr:last-child td{border-bottom:0}
.yes{color:#059669;font-weight:700}.no{color:#DC2626;font-weight:600}

/* ── comparison table ──────────────────────────────────────────────────
   Column widths come from a <colgroup>, not from the content, so the two
   verdict columns stop collapsing to a sliver while Capability and Notes
   swallow the rest. The tick/cross carry the meaning visually; the word
   carries it for screen readers, which announce nothing from a glyph.   */
.tbl{box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -18px rgba(15,23,42,.18)}
.tbl thead th{background:linear-gradient(to bottom,#F8FAFC,#F1F5F9);
  border-bottom:1px solid var(--line);color:var(--ink-3);padding-block:15px}
.tbl tbody tr{transition:background .18s var(--ez)}
.tbl tbody tr:hover{background:rgba(0,194,178,.035)}
.tbl td:first-child{font-weight:600;color:var(--ink)}
.tbl td:last-child{color:var(--ink-3);font-size:.86rem}
/* the Elbi column is the one the eye should land on */
.tbl thead th:nth-child(2){color:var(--teal-cta)}
.tbl td:nth-child(2),.tbl th:nth-child(2){background:rgba(0,194,178,.045)}
.tbl tbody tr:hover td:nth-child(2){background:rgba(0,194,178,.085)}
.tbl .yes,.tbl .no{text-align:center;white-space:nowrap}
.tbl .yes span[aria-hidden],.tbl .no span[aria-hidden]{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-size:.82rem;line-height:1;font-weight:700}
.tbl .yes span[aria-hidden]{background:rgba(5,150,105,.11);color:#047857}
.tbl .no span[aria-hidden]{background:rgba(220,38,38,.09);color:#DC2626}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.scrollx{overflow-x:auto}
.faq-i{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);margin-bottom:12px;overflow:hidden}
.faq-q{padding:18px 22px;font-weight:650;cursor:pointer;display:flex;justify-content:space-between;
  gap:14px;align-items:center;font-size:1rem}
.faq-q::after{content:"+";font-size:22px;color:var(--teal);flex:0 0 auto;transition:.25s;font-weight:400}
.faq-i.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ez);color:var(--ink-3);font-size:.94rem}
.faq-i.open .faq-a{max-height:340px}
.faq-a div{padding:0 22px 20px}

/* ── cta ─────────────────────────────────────────────────────────────── */
.cta{background:var(--dark);color:#fff;padding:86px 0;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;
  background:rgba(0,194,178,.16);filter:blur(120px);top:-280px;left:50%;transform:translateX(-50%)}
.cta .wrap{position:relative;z-index:2}
.cta h2{color:#fff}.cta p{color:rgba(255,255,255,.68);max-width:60ch;margin:14px auto 28px}

/* ── footer ──────────────────────────────────────────────────────────── */
footer{background:var(--dark-2);color:rgba(255,255,255,.68);padding:56px 0 26px;font-size:.9rem}
.f-g{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:44px;margin-bottom:34px}
.f-g h4{color:#fff;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:13px}
body[dir="rtl"] .f-g h4{letter-spacing:0}
.f-g a{display:block;padding:4px 0;transition:.2s}.f-g a:hover{color:var(--teal-l)}
.f-b{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem}

/* ── reveal ──────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ez),transform .7s var(--ez)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.40s}
.note{background:rgba(0,194,178,.07);border-inline-start:3px solid var(--teal);
  padding:16px 20px;border-radius:0 var(--r) var(--r) 0;font-size:.94rem;color:var(--ink-2)}
body[dir="rtl"] .note{border-radius:var(--r) 0 0 var(--r)}
.seg{display:inline-flex;background:var(--bg-3);border-radius:var(--r);padding:4px;gap:3px;flex-wrap:wrap}
.seg button{padding:10px 18px;border:0;background:none;border-radius:var(--r);font-weight:650;
  font-size:.88rem;color:#5A6878;cursor:pointer;font-family:inherit;transition:.2s}
.seg button.on{background:#fff;color:var(--teal-cta);box-shadow:var(--sh-s)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}

@media(max-width:980px){
  .hero-grid,.split,.dash-b{grid-template-columns:1fr}
  /* A grid item defaults to min-width:auto, so the widget mock could not
     shrink below its 392px min-content and sized the single column wider
     than the 327px .wrap — the headline, the tag pills and the CTA all ran
     off the right edge of a 375px phone. */
  .hero-grid>*{min-width:0}
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  .kpis,.stat-g{grid-template-columns:repeat(2,1fr)}
  .f-g{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  section{padding:66px 0}.hero{padding:126px 0 66px}
  .g2,.g3,.g4{grid-template-columns:1fr}.f-g{grid-template-columns:1fr}
  .kpi{border-inline-end:0;border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}.msg{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   PIXEL-FAITHFUL PRODUCT REPLICAS  (matched to product screenshots)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · THE REAL WIDGET ─────────────────────────────────────────────── */
.wgt{width:100%;max-width:392px;margin-inline:auto;background:#fff;border-radius:22px;
  box-shadow:0 44px 96px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;font-family:var(--f);display:flex;flex-direction:column}
body[dir="rtl"] .wgt{font-family:var(--f-ar)}
.wgt-h{background:linear-gradient(135deg,#6c47ff 0%,#00c2ff 100%);
  padding:17px 18px;display:flex;align-items:center;gap:13px;color:#fff}
.wgt-logo{width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center}
.wgt-logo img{height:42px;width:auto;display:block;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.32))}
.wgt-t{flex:1;min-width:0}
.wgt-t b{display:block;font-size:1.4rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.wgt-t span{font-size:.88rem;display:flex;align-items:center;gap:7px;opacity:.96;margin-top:1px}
.wgt-t span i{width:9px;height:9px;border-radius:50%;background:#4ADE80;box-shadow:0 0 9px #4ADE80}
.wgt-btns{display:flex;gap:8px;flex:0 0 auto}
.wgt-btns b{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.19);
  display:grid;place-items:center;cursor:pointer;transition:.2s}
.wgt-btns b:hover{background:rgba(255,255,255,.33)}
.wgt-btns svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.wgt-b{background:#fff;padding:20px 19px;flex:1;min-height:430px;max-height:430px;
  display:flex;flex-direction:column;gap:11px;overflow:hidden}
.wgt-msg{max-width:88%;flex:0 0 auto;background:#f3f0ff;border-radius:17px;padding:15px 18px;font-size:1rem;
  line-height:1.5;color:#2d1d6b;opacity:0;transform:translateY(8px);animation:wm .55s var(--ez) forwards}
@keyframes wm{to{opacity:1;transform:none}}
.wgt-msg .ar{display:block;direction:rtl;text-align:right;margin-top:2px}
.wgt-f{border-top:1px solid #ECE9F5;padding:15px 16px;display:flex;align-items:center;gap:11px}
.wgt-ic{width:47px;height:47px;border-radius:50%;border:1.6px solid #D8D1F5;display:grid;
  place-items:center;flex:0 0 auto;background:#fff;transition:.2s;cursor:pointer}
.wgt-ic svg{width:20px;height:20px;stroke:#6D46F2;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.wgt-ic.fill{background:#EFECFB;border-color:#EFECFB}
.wgt-ic:hover{background:#6D46F2;border-color:#6D46F2}
.wgt-ic:hover svg{stroke:#fff}
.wgt-in{flex:1;height:47px;border-radius:100px;border:1.6px solid #D8D1F5;padding:0 20px;
  display:flex;align-items:center;color:#A9A2C6;font-size:.98rem;min-width:0}
.wgt-p{text-align:center;padding:11px 0 15px;font-size:.86rem;color:#7E7C93;background:#fff}
.wgt-p b{color:#6c47ff;font-weight:600}
.eqm{display:inline-flex;gap:2.5px;align-items:center;height:17px}
.eqm i{width:3px;background:#6D46F2;border-radius:2px;animation:eq .85s ease-in-out infinite}
@keyframes eq{0%,100%{height:5px}50%{height:16px}}

/* ── 2 · CONSTELLATION ───────────────────────────────────────────────── */
.constel{background:#050B1E;color:#fff;padding:96px 0 104px;position:relative;overflow:hidden}
.constel::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 55% at 50% 45%,rgba(0,194,178,.10),transparent 70%)}
.constel .wrap{position:relative;z-index:2}
.constel h2{color:#22D3B8;font-size:clamp(1.9rem,3.6vw,2.9rem)}
.constel .sub{color:rgba(255,255,255,.72);text-align:center;margin-inline:auto}
.cmap{position:relative;margin-top:56px;min-height:470px}
.cmap svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cline{fill:none;stroke:rgba(90,160,255,.36);stroke-width:1.2;stroke-dasharray:5 5;
  animation:dash 9s linear infinite}
@keyframes dash{to{stroke-dashoffset:-140}}
.cdot{fill:#5AA0FF;opacity:.85}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;text-align:center}
.core-orb{width:124px;height:124px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#1D3B7A,#040A18 72%);
  border:1px solid rgba(90,160,255,.42);display:grid;place-items:center;
  box-shadow:0 0 64px rgba(0,194,178,.42),inset 0 0 36px rgba(90,160,255,.3);
  animation:orb 4.5s ease-in-out infinite}
@keyframes orb{50%{box-shadow:0 0 90px rgba(0,194,178,.62),inset 0 0 46px rgba(90,160,255,.42)}}
.core-orb img{height:66px;width:auto;display:block}
.core-tag{margin-top:15px;display:inline-block;padding:9px 22px;border-radius:100px;
  background:linear-gradient(100deg,#6C47FF,#00C2B2);font-weight:700;font-size:.92rem;
  box-shadow:0 6px 26px rgba(0,194,178,.48);white-space:nowrap}
.cnode{position:absolute;text-align:center;z-index:2;width:142px;transform:translate(-50%,-50%)}
.cnode .ci{width:52px;height:52px;border-radius:14px;margin:0 auto 9px;display:grid;place-items:center;
  background:linear-gradient(145deg,#3B2A7A,#241A52);border:1px solid rgba(140,110,255,.44);
  box-shadow:0 6px 22px rgba(0,0,0,.5);transition:.32s var(--ez);
  font-size:12px;font-weight:800;letter-spacing:.02em;color:#C4B5FD}
.cnode .ci.emo{font-size:22px;font-weight:400;letter-spacing:0}
.cnode:hover .ci{transform:translateY(-5px) scale(1.09);border-color:#22D3B8;
  box-shadow:0 12px 34px rgba(108,71,255,.62);color:#22D3B8}
.cnode span{font-size:.79rem;color:rgba(255,255,255,.92);line-height:1.35;display:block}
.cnode em{display:block;font-style:normal;font-size:.68rem;color:rgba(90,160,255,.85);
  letter-spacing:.08em;margin-top:2px}
body[dir="rtl"] .cnode em{letter-spacing:0}
@media(max-width:900px){
  .cmap{min-height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .cmap svg.wires,.core{display:none}
  .cnode{position:static;transform:none;width:auto}
}
@media(max-width:520px){.cmap{grid-template-columns:repeat(2,1fr)}}

/* ── 3 · THE REAL CONSOLE ────────────────────────────────────────────── */
.console{background:#0A0E13;border-radius:14px;overflow:hidden;display:grid;
  grid-template-columns:210px 1fr;box-shadow:0 34px 80px -20px rgba(0,0,0,.72);
  border:1px solid #1B222C;color:#E6EAF0;font-size:13px;line-height:1.5}
.c-side{background:#0C1117;border-inline-end:1px solid #1B222C;padding:15px 11px;
  display:flex;flex-direction:column;gap:2px}
.c-brand{display:flex;align-items:center;gap:9px;padding:5px 7px 15px;font-weight:800;
  font-size:1.12rem;color:#fff}
.c-brand img{height:24px;width:auto;display:block;flex:0 0 auto}
.c-brand .cv{margin-inline-start:auto;color:#5B6676;font-size:15px}
.c-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#8C99AD;
  font-size:12.5px;transition:.2s;cursor:default}
.c-nav svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 auto}
.c-nav.on{background:#10352E;color:#22D3B8;font-weight:600}
.c-nav:hover:not(.on){background:#131A22;color:#CBD5E1}
.c-sep{height:1px;background:#1B222C;margin:10px 6px}
.c-foot{margin-top:auto;padding-top:11px;border-top:1px solid #1B222C;display:flex;
  flex-direction:column;gap:9px;font-size:11.5px;color:#8C99AD}
.c-lang{display:flex;align-items:center;gap:8px;padding:2px 5px}
.c-lang b{width:19px;height:19px;border-radius:4px;background:#161E27;display:grid;
  place-items:center;font-size:10px;color:#CBD5E1;font-weight:600}
.c-me{display:flex;align-items:center;gap:9px;padding:2px 5px}
.c-me i{width:29px;height:29px;border-radius:50%;flex:0 0 auto;font-style:normal;
  background:linear-gradient(145deg,#4B5A6E,#232E3C);display:grid;place-items:center;
  font-size:11px;color:#E2E8F0;font-weight:700}
.c-me b{display:block;color:#DDE3EC;font-size:11.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.c-out{display:flex;align-items:center;gap:9px;padding:5px;color:#8C99AD}
.c-out svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.c-main{padding:15px 17px;min-width:0;background:#0A0E13}
.c-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.c-top h4{font-size:1.06rem;font-weight:600;color:#fff}
.c-top{align-items:flex-start}
.c-top .r{display:flex;gap:8px;align-items:flex-start}
.r-stack{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.c-chip{background:#11171F;border:1px solid #1F2833;border-radius:8px;padding:7px 12px;
  font-size:11.5px;color:#CBD5E1;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.c-sun{width:32px;height:32px;border-radius:8px;background:#11171F;border:1px solid #1F2833;
  display:grid;place-items:center;color:#CBD5E1}
.c-sun svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.c-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:13px;font-size:11.5px;color:#76839A}
.c-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:11px}
.c-kpi{background:#0D131A;border:1px solid #1B222C;border-radius:11px;padding:12px 13px}
.c-kpi .l{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#76839A;
  display:flex;justify-content:space-between;align-items:flex-start;gap:6px;line-height:1.3}
body[dir="rtl"] .c-kpi .l{letter-spacing:0}
.c-kpi .l svg{width:14px;height:14px;stroke:#4E5A6B;fill:none;stroke-width:1.8;flex:0 0 auto}
.c-kpi .n{font-size:1.5rem;font-weight:700;color:#fff;margin:9px 0 5px;letter-spacing:.02em;
  font-family:'JetBrains Mono',ui-monospace,monospace}
.c-kpi .d{font-size:10px;color:#22C55E;display:flex;align-items:center;gap:4px}
.c-kpi .d em{font-style:normal;color:#76839A}
/* a fall in duration or interruptions is an improvement, so direction alone
   does not set the colour — .up/.dn carry the arrow, .bad carries the red */
.c-kpi .d.up,.c-kpi .d.down{color:#22C55E}
.c-kpi .d.up svg,.c-kpi .d.down svg{stroke:#22C55E}
.c-kpi .d.bad{color:#F87171}.c-kpi .d.bad svg{stroke:#F87171}
.c-charts{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:11px}
.c-card{background:#0D131A;border:1px solid #1B222C;border-radius:11px;padding:13px}
.c-card h5{font-size:12.5px;font-weight:600;color:#E6EAF0;margin-bottom:8px;
  display:flex;align-items:center;gap:7px}
.c-card h5 svg{width:14px;height:14px;stroke:#22D3B8;fill:none;stroke-width:1.8}
.c-legend{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:8px;
  font-size:9.5px;color:#8C99AD}
.c-legend b{display:inline-flex;align-items:center;gap:4px;font-weight:400}
.c-legend b i{width:6px;height:6px;border-radius:50%}
.c-wide{background:#0D131A;border:1px solid #1B222C;border-radius:11px;padding:13px}
.c-wide .hd{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;
  color:#E6EAF0;font-weight:600;margin-bottom:6px}
.c-wide .hd span{font-size:10.5px;color:#76839A;font-weight:400}
.ax{font-size:7.5px;fill:#5B6676}
.c-wide .ax{font-size:11px}
.c-chip svg{width:13px;height:13px;stroke:#76839A;fill:none;stroke-width:1.8;flex:0 0 auto}
.c-brand .cv svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.c-kpi .d{align-items:center}
.c-kpi .d svg{width:12px;height:12px;stroke:#22C55E;fill:none;stroke-width:2.2;flex:0 0 auto}
.c-kpi .d em{font-style:normal;color:#76839A}
/* ── container scroll · port of 21st.dev @manuarora700/container-scroll ──
   From the bundle: perspective 1000px on the track; the frame maps scroll
   progress to rotateX [20deg -> 0] and scale [1.05 -> 1] on desktop,
   [0.7 -> 0.9] at <=768px, and carries the six-layer shadow verbatim.
   Frame chrome is the original's: 4px #6C6C6C, #222222 body, 30px radius,
   p-6, wrapping a rounded-2xl screen.

   One adaptation: the original animates over an h-[80rem] track, i.e. it
   adds ~1280px of empty page to scroll through. That is a hero device on an
   otherwise empty page; here the dashboard sits inside a populated section,
   so progress is taken from the frame's own approach to the fold instead —
   tilted as it enters, flat by the time its top reaches a quarter down. */
.cs-track{perspective:1000px}
/* perspective(1000px) + rotateX(20deg) + scale(1.05) paints .cs-frame at about
   1.17x its layout width — 1314px whatever the viewport — and nothing above it
   clips, so between ~901px and ~1330px the window sliced its border and its
   30px corners (17px a side at 1280). The paint ratio, not the layout box, is
   what has to fit. Below 901px .cs-track drops the perspective entirely. */
@media(min-width:901px){
  /* .cs-track> so this outranks the later .cs-frame{max-width:1120px}
     regardless of source order — same-specificity rules are decided by
     position, and this one is declared first. */
  .cs-track>.cs-frame{max-width:min(1120px,calc(84vw - 44px))}}
/* Belt and braces: body{overflow-x:hidden} propagates to the viewport and was
   the only thing stopping this section from scrolling the page sideways. */
#analytics{overflow-x:clip}
.cs-frame{max-width:1120px;margin:0 auto;border:4px solid #6C6C6C;background:#222222;
  border-radius:30px;padding:24px;transform-origin:50% 60%;
  transform:rotateX(20deg) scale(1.05);will-change:transform;
  box-shadow:0 0 #0000004d,0 9px 20px #0000004a,0 37px 37px #00000042,
             0 84px 50px #00000026,0 149px 60px #0000000a,0 233px 65px #00000003}
.cs-screen{height:100%;width:100%;overflow:hidden;border-radius:16px;background:#0A0E13}
.cs-screen .console{border-radius:0;border:0;box-shadow:none}
@media(max-width:900px){/* The rotateX(20deg) scale(1.05) tilt paints ~1.22x the layout box: on a
     375px phone that is 399px, i.e. 12px of sideways page scroll. The tilt is
     a desktop flourish and reads as a rendering fault at this size anyway. */
  .cs-frame{padding:10px;border-radius:22px;transform:none!important;will-change:auto}
  .cs-track{perspective:none}}
@media(prefers-reduced-motion:reduce){.cs-frame{transform:none!important}}

.dash-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dash-scroll .console{min-width:1010px}
@media(max-width:980px){.c-kpis{grid-template-columns:repeat(3,1fr)}.c-charts{grid-template-columns:repeat(2,1fr)}}
.c-side svg,.c-top svg,.c-meta svg,.c-kpi .l svg,.c-kpi .d svg,.c-card h5 svg,
.wgt-btns svg,.wgt-ic svg{stroke-linecap:round;stroke-linejoin:round}
body[dir="rtl"] .wgt-msg .ar{direction:ltr;text-align:left}

/* ── live widget conversation ────────────────────────────────────────── */
.wgt-msg{align-self:flex-start;border-bottom-left-radius:6px}
.wgt-msg.u{align-self:flex-end;background:linear-gradient(135deg,#6c47ff 0%,#00c2ff 100%);color:#fff;
  border-bottom-left-radius:17px;border-bottom-right-radius:6px}
body[dir="rtl"] .wgt-msg{border-bottom-left-radius:17px;border-bottom-right-radius:6px}
body[dir="rtl"] .wgt-msg.u{border-bottom-right-radius:17px;border-bottom-left-radius:6px}
.wgt-msg.gone{animation:wgo .45s var(--ez) forwards}
@keyframes wgo{to{opacity:0;transform:translateY(-6px)}}
.wgt-msg.typing{padding:14px 20px;background:#f3f0ff}
.wgt-dots{display:inline-flex;gap:8px;align-items:center;height:11px}
.wgt-dots i{width:11px;height:11px;border-radius:50%;background:#8B5CF6;
  animation:wdot 1.3s ease-in-out infinite}
.wgt-dots i:nth-child(2){animation-delay:.18s}
.wgt-dots i:nth-child(3){animation-delay:.36s}
@keyframes wdot{0%,64%,100%{opacity:.35;transform:translateY(0)}32%{opacity:1;transform:translateY(-5px)}}
.wgt-cur{display:inline-block;width:2px;height:1em;background:#6D46F2;
  vertical-align:-2px;margin-inline-start:2px;animation:wblink 1s steps(1) infinite}
@keyframes wblink{50%{opacity:0}}
.wgt-in{overflow:hidden;white-space:nowrap}
.wgt-typed{color:#1E1B33}
.wgt-caret{width:1.5px;height:19px;background:#6D46F2;display:none;flex:0 0 auto;
  animation:wblink 1s steps(1) infinite}
.wgt-in.live .wgt-caret{display:block}
.wgt-in.live .wgt-ph{display:none}
@media(prefers-reduced-motion:reduce){
  .wgt-msg,.wgt-dots i,.wgt-cur,.wgt-caret{animation:none!important;opacity:1!important;transform:none!important}
}

/* ── integrations map ────────────────────────────────────────────────── */
.integ{background:#040A16;color:#fff;padding:94px 0 104px;position:relative;overflow:hidden}
.integ::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 52% at 50% 52%,rgba(60,120,255,.13),transparent 72%)}
.integ .wrap{position:relative;z-index:2}
.integ h2{color:#5AA0FF;font-size:clamp(1.9rem,3.6vw,2.9rem)}
.integ .sub{color:rgba(255,255,255,.74);text-align:center;margin-inline:auto;max-width:760px}
.imap{position:relative;margin-top:44px;min-height:580px}
.imap svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.iline{stroke:rgba(90,160,255,.34);stroke-width:1}
.idot{fill:#5AA0FF;opacity:.7}
.icore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;text-align:center}
.icore-orb{width:132px;height:132px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#12275C,#03060F 74%);
  border:1px solid rgba(90,160,255,.5);display:grid;place-items:center;
  box-shadow:0 0 70px rgba(60,120,255,.5),inset 0 0 40px rgba(90,160,255,.28);
  animation:orb 4.5s ease-in-out infinite}
.icore-orb img{height:70px;width:auto;display:block}
.itile{position:absolute;transform:translate(-50%,-50%);z-index:2;width:118px;min-height:56px;
  display:grid;place-items:center;text-align:center;padding:9px 10px;border-radius:13px;
  background:linear-gradient(160deg,rgba(20,32,62,.96),rgba(8,14,30,.96));
  border:1px solid rgba(90,160,255,.30);box-shadow:0 8px 26px rgba(0,0,0,.55);
  transition:.32s var(--ez)}
.itile b{font-size:.78rem;font-weight:600;line-height:1.3;color:rgba(255,255,255,.9);
  letter-spacing:.01em}
.itile:hover{transform:translate(-50%,-50%) scale(1.07);border-color:#5AA0FF;
  box-shadow:0 14px 38px rgba(60,120,255,.5)}
.i-note{max-width:860px;margin:44px auto 0;text-align:center;font-size:.88rem;line-height:1.75;
  color:rgba(255,255,255,.56);border-top:1px solid rgba(255,255,255,.09);padding-top:22px}
@media(max-width:900px){
  .imap{min-height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .imap svg.wires,.icore{display:none}
  .itile{position:static;transform:none;width:auto}
  .itile:hover{transform:none}
}
@media(max-width:520px){.imap{grid-template-columns:repeat(2,1fr)}}
.i-cats{margin-top:58px}
.i-cats h3{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:26px}
body[dir="rtl"] .i-cats h3{letter-spacing:0}
.i-pills{display:flex;flex-wrap:wrap;gap:7px}
.i-pills span{font-size:.78rem;line-height:1;padding:6px 11px 6px 6px;border-radius:100px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.8);transition:.2s;
  display:inline-flex;align-items:center;gap:7px}
body[dir="rtl"] .i-pills span{padding:6px 6px 6px 11px}
/* every capsule gets the same 20px slot, so a real brand mark and a monogram
   line up as one row. Only 11 of the 41 systems have a logo in the open
   library — the rest have none to use, protocols least of all. */
.i-pills .i-lg,.i-pills .i-mono{width:20px;height:20px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center}
.i-pills .i-lg{background:#fff;padding:3px;object-fit:contain}
.i-pills .i-mono{font-size:.56rem;font-weight:800;letter-spacing:.01em;font-style:normal;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.72)}
/* the five protocols have no logo in existence — a meaningful glyph, not a
   two-letter tile, so the row reads as one set */
.i-pills .i-gl{background:rgba(255,255,255,.10);color:rgba(255,255,255,.8);font-style:normal}
.i-pills .i-gl svg{width:12px;height:12px;stroke:currentColor;fill:none}
.i-pills span:hover .i-gl{background:rgba(90,160,255,.28);color:#fff}
.i-pills span:hover .i-mono{background:rgba(90,160,255,.28);color:#fff}
.i-pills span:hover{background:rgba(90,160,255,.16);border-color:rgba(90,160,255,.42);color:#fff}


/* ── integration brand marks ─────────────────────────────────────────── */
.il{width:34px;height:34px;border-radius:9px;background:var(--b,#12203C);
  display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.il.light{background:#fff}
.il svg{width:19px;height:19px;display:block}
.il-t{font-weight:800;letter-spacing:.02em;line-height:1;font-family:var(--f)}
.itile{flex-direction:column;gap:7px;display:flex;align-items:center;justify-content:center;
  width:116px;min-height:74px;padding:11px 9px}
.itile b{font-size:.74rem;line-height:1.25}

/* ── dark variant of the site table ──────────────────────────────────── */
.tbl-d{background:rgba(9,16,32,.72);border-color:rgba(90,160,255,.18);color:rgba(255,255,255,.86)}
.tbl-d th,.tbl-d td{border-bottom-color:rgba(90,160,255,.14);vertical-align:top}
.tbl-d thead th{background:rgba(20,34,64,.9);color:#7FB4FF}
/* (0,2,2), to beat .tbl thead th:nth-child(2) — a light-table rule that was
   painting the dark table's second header at 4.42:1. */
.tbl-d thead th:nth-child(2){color:#7FB4FF}
/* (0,2,1), to beat .tbl td:last-child{color:var(--ink-3)} — same story, 4.04:1. */
.tbl-d td:last-child{color:rgba(255,255,255,.62)}
.tbl-d tbody th{font-size:.85rem;font-weight:700;color:#fff;text-transform:none;letter-spacing:0;
  background:transparent;white-space:nowrap}
.tbl-d .i-use{color:rgba(255,255,255,.62);font-size:.85rem;line-height:1.6;min-width:260px}
.tbl-d .i-pills{max-width:420px}
@media(max-width:900px){.tbl-d{min-width:820px}}

/* ── intent buttons + agent join ─────────────────────────────────────── */
.wgt-opts{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px;padding:0 4px;
  flex:0 0 auto;align-self:stretch;transition:opacity .3s}
.wgt-opts.used{opacity:.6}
.wgt-opt{display:block;width:100%;pointer-events:none;padding:12px 16px;border-radius:14px;
  background:linear-gradient(135deg,#6c47ff 0%,#00c2ff 100%);color:#fff;
  border:1px solid rgba(255,255,255,.28);box-shadow:0 1px 3px rgba(0,0,0,.08);
  font:600 13.5px/1.35 var(--f);text-align:center;
  opacity:0;transform:translateY(8px);animation:wm .38s var(--ez) forwards;
  transition:transform .12s,box-shadow .12s,opacity .12s,filter .12s}
.wgt-opt.secondary{background:transparent;color:#2d1d6b;font-weight:500;box-shadow:none;
  border:1px solid rgba(45,29,107,.3)}
.wgt-opt:disabled{opacity:.45!important;box-shadow:none}
body[dir="rtl"] .wgt-opt{font-family:var(--f-ar)}
.wgt-opt.tap{animation:none;opacity:1;transform:translateY(0) scale(.965);filter:brightness(.96);
  box-shadow:0 0 0 3px rgba(108,71,255,.32),0 4px 12px rgba(0,0,0,.16)}
.wgt-sys{align-self:center;flex:0 0 auto;max-width:82%;text-align:center;font-size:12.5px;
  line-height:1.5;color:#6b6890;padding:2px 0;opacity:0;animation:wm .5s var(--ez) forwards}
.wgt-join{align-self:center;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  gap:6px;margin:14px 0 10px;text-align:center;opacity:0;animation:wm .55s var(--ez) forwards}
.wgt-join i{width:54px;height:54px;border-radius:50%;font-style:normal;font-size:19px;font-weight:700;
  color:#fff;display:grid;place-items:center;background:linear-gradient(135deg,#6c47ff,#00c2ff);
  box-shadow:0 6px 18px rgba(108,71,255,.4)}
.wgt-join span{font-size:12.5px;font-weight:600;color:#2d1d6b}
.wgt-opts.gone,.wgt-sys.gone,.wgt-join.gone{animation:wgo .45s var(--ez) forwards}
@media(prefers-reduced-motion:reduce){.wgt-opt,.wgt-sys,.wgt-join{animation:none!important;opacity:1!important;transform:none!important}}

/* the human agent's own messages, once the handover completes */
.wgt-msg.agent{background:#E7F6F0;color:#0B3B2E}
.wgt-msg.agent .who{display:block;font-size:11px;font-weight:700;color:#0B6B4F;
  margin-bottom:4px;letter-spacing:.02em}
.wgt-msg.agent .wgt-dots i{background:#0B6B4F}
.wgt-msg.agent .wgt-cur{background:#0B6B4F}
.wgt-join img{width:54px;height:54px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid #fff;box-shadow:0 6px 18px rgba(108,71,255,.35),0 0 0 2px rgba(108,71,255,.25)}
.f-co{color:var(--teal-l);font-weight:600;border-bottom:1px solid rgba(0,194,178,.35);
  padding-bottom:1px;transition:.2s}
.f-co:hover{color:#fff;border-bottom-color:#fff}
.c-me img{width:29px;height:29px;border-radius:50%;object-fit:cover;flex:0 0 auto;display:block;
  border:1px solid #2A3441}

/* ── privacy policy page ─────────────────────────────────────────────── */
.pp-h{background:var(--hero-bg,#080E14);color:#fff;padding:110px 0 52px;
  background:radial-gradient(ellipse 70% 60% at 30% 0%,rgba(0,194,178,.14),transparent 65%),#080E14}
.pp-h .kicker{color:var(--teal-l)}
.pp-h h1{font-size:clamp(2rem,4.4vw,3.1rem);margin:8px 0 14px;letter-spacing:-.02em}
.pp-h .sub{color:rgba(255,255,255,.74);max-width:70ch;margin:0}
.pp-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.pp-meta span{font-size:.78rem;padding:6px 13px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.78)}
.pp-wrap{display:grid;grid-template-columns:236px 1fr;gap:46px;padding-block:52px 90px;align-items:start}
.pp-toc{position:sticky;top:86px}
.pp-toc h4{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
body[dir="rtl"] .pp-toc h4{letter-spacing:0}
.pp-toc a{display:block;font-size:.86rem;line-height:1.4;padding:7px 0;color:var(--ink-2);
  border-inline-start:2px solid transparent;padding-inline-start:12px;transition:.2s}
.pp-toc a:hover{color:var(--teal-d);border-inline-start-color:var(--teal)}
.pp-main{min-width:0}
.pp-tldr{background:linear-gradient(150deg,#F0FDFA,#ECFEFF);border:1px solid #99F6E4;
  border-radius:var(--r-l);padding:26px 30px;margin-bottom:42px}
.pp-tldr h3{font-size:1.05rem;margin-bottom:14px;color:var(--teal-dd)}
.pp-tldr ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.pp-tldr li{position:relative;padding-inline-start:26px;font-size:.94rem;line-height:1.65;color:#134E4A}
.pp-tldr li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--teal-d);font-weight:800}
.pp-s{margin-bottom:46px;scroll-margin-top:90px}
.pp-s h2{font-size:1.34rem;margin-bottom:14px;letter-spacing:-.01em}
.pp-s p{margin-bottom:14px;line-height:1.78;color:var(--ink-2)}
.pp-s .tbl{margin:18px 0;font-size:.88rem}
.pp-s .tbl td:first-child{font-weight:600;color:var(--ink)}
.pp-ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:16px 0}
.pp-ul li{position:relative;padding-inline-start:22px;line-height:1.75;color:var(--ink-2)}
.pp-ul li::before{content:"";position:absolute;inset-inline-start:2px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--teal)}
.pp-s code{background:var(--bg-2);padding:2px 7px;border-radius:5px;font-size:.86em}
.pp-s a{color:var(--teal-cta);border-bottom:1px solid rgba(0,194,178,.4)}
.pp-s a:hover{color:var(--teal-dd)}
@media(max-width:900px){.pp-wrap{grid-template-columns:1fr;gap:0}.pp-toc{display:none}}
/* the page-level h1 colour rule wins over the hero's inherited white */
.pp-h h1,.pp-h .kicker{color:#fff}
.pp-h .kicker{color:var(--teal-l)}
.pp-h .nav-r,.pp-page .nav-r{margin-inline-start:auto}
.pp-nav .nav-r{margin-inline-start:auto}

/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY PASS — the site defined ZERO :focus rules, so a keyboard
   user had only the UA default, which is invisible on the dark hero and on
   teal buttons. Ratios below were measured on the live page.
   ═══════════════════════════════════════════════════════════════════════ */
:focus-visible{outline:3px solid var(--teal-cta);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.nav :focus-visible,footer :focus-visible,
.constel :focus-visible,.integ :focus-visible{outline-color:var(--teal-l)}
.btn:focus-visible{outline-offset:4px}
/* sticky nav must not sit on top of the control it just scrolled to */
html{scroll-padding-top:88px}
.skip{position:absolute;inset-inline-start:12px;top:-64px;z-index:2000;
  background:var(--teal-dd);color:#fff;padding:12px 20px;border-radius:0 0 10px 10px;
  font-weight:700;font-size:.92rem;transition:top .18s var(--ez)}
.skip:focus{top:0}

/* contrast: #009688 on white measured 3.67:1 — below the 4.5:1 floor for
   text this small. #005F55 clears it without changing the brand hue. */
.persona,.tl-d{color:var(--teal-dd)}
.wgt-p{color:#5C5A73}          /* was #7E7C93 → 4.05:1 on white */

/* the console mock's headings became divs; keep their look */
.c-title{font-size:1.06rem;font-weight:600;color:#fff}
.c-h5{font-size:12.5px;font-weight:600;color:#E6EAF0;margin-bottom:8px;
  display:flex;align-items:center;gap:7px}
.c-h5 svg{width:14px;height:14px;stroke:#22D3B8;fill:none;stroke-width:1.8}
.f-h{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:14px}
body[dir="rtl"] .f-h{letter-spacing:0}
main:focus{outline:none}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT HERO — white ground, dark type, a slow drift of dots.
   Type follows the measured benchmark (linear.app / cursor.com, 20 Aug):
   weight 520 not 800, tracking -0.024em, line-height 1.03.
   ═══════════════════════════════════════════════════════════════════════ */
.hero.light{background:#FCFCFD;color:var(--ink);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line)}
/* one very soft warm-teal wash so pure white does not feel flat */
.hero.light::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 78% 62% at 22% 8%,rgba(0,194,178,.07),transparent 62%),
             radial-gradient(ellipse 62% 54% at 88% 92%,rgba(108,71,255,.05),transparent 64%)}
.hero.light canvas.dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero.light .wrap{position:relative;z-index:2}

.hero.light h1{color:var(--ink);font-weight:520;letter-spacing:-.024em;line-height:1.03;
  font-size:clamp(2.3rem,4.4vw,3.85rem);margin:0 0 22px}
.hero.light h1 .key{color:var(--teal-dd)}
.hero.light .slogan{font-size:1.1rem;font-weight:450;letter-spacing:-.012em;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:20px;margin:0 0 18px;max-width:44ch}
.hero.light .slogan b{color:var(--ink);font-weight:560}
.hero.light .sub{color:var(--ink-3);font-size:1.02rem;line-height:1.62;max-width:50ch}
.hero.light .htag{background:#fff;border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
.hero.light .btn-o{border-color:var(--line);color:var(--ink);background:#fff}
.hero.light .btn-o:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero.light .hero-note{color:var(--ink-3);border-top-color:var(--line)}
.hero.light .hero-note b{color:var(--ink)}
.hero.light .wgt{box-shadow:0 40px 90px -34px rgba(15,23,42,.35),0 0 0 1px rgba(15,23,42,.06)}

/* the nav sits on white now, so it cannot stay white-on-transparent */
.hero.light ~ * .nav,.nav{color:inherit}
body:has(.hero.light) .nav .brand{color:var(--ink)}
body:has(.hero.light) .nav .nv-t{color:var(--ink-2)}
body:has(.hero.light) .nav .nv-t:hover{color:var(--teal-d)}
body:has(.hero.light) .nav .lang-b{color:var(--ink-2);border-color:var(--line)}
body:has(.hero.light) .nav .burger{color:var(--ink);border-color:var(--line)}
@media(prefers-reduced-motion:reduce){.hero.light canvas.dots{display:none}}
/* the zero-external-AI line is the strongest claim on the page — set it in ink,
   not the muted grey the note inherits */
.hero.light .hero-note span span{color:var(--ink)}

/* ── "Learn more" links on home-page cards ─────────────────────────────
   Each card on the home page now has a detail page behind it. The link sits
   at the foot of the card, reveals its arrow on hover, and inherits the
   card's own hover state so the whole card reads as one target. */
.pg-more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:.84rem;font-weight:650;color:var(--teal-cta);text-decoration:none;
  transition:gap .25s var(--ez),color .25s var(--ez)}
.pg-more::after{content:"\2192";transition:transform .25s var(--ez)}
body[dir="rtl"] .pg-more::after{content:"\2190"}
.pg-more:hover{gap:10px}
.card:hover .pg-more::after{transform:translateX(3px)}
body[dir="rtl"] .card:hover .pg-more::after{transform:translateX(-3px)}
.gc-txt .pg-more{margin-top:12px}
.tilt-plate .pg-more{margin-top:auto;padding-top:14px}

/* ── mega-menu header ───────────────────────────────────────────────────
   A port of 21st.dev @sshahaider/header-3: trigger row, panels that open on
   hover, list items built from a square icon tile, a title and a one-line
   description. The structure (a few broad headings, each opening a grouped
   panel) follows elbetron.com's header.

   The detach behaviour above is untouched — .nav-in still contracts into the
   glass pill on scroll. Everything here lives inside it. */
.nav-links{display:flex;gap:2px;margin-inline-start:auto;align-items:center}
.nv-item{position:static}
.nv-t{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.84rem;font-weight:650;
  letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.82);
  background:none;border:0;cursor:pointer;padding:9px 12px;border-radius:10px;
  transition:color .2s,background-color .2s;white-space:nowrap}
body[dir="rtl"] .nv-t{letter-spacing:0;text-transform:none;font-size:.95rem}
.nv-chev{width:13px;height:13px;flex:0 0 auto;transition:transform .28s var(--ez);opacity:.65}
.nav.on .nv-t{color:var(--ink-2)}
.nv-t:hover,.nv-item:hover .nv-t,.nv-t[aria-expanded="true"]{color:var(--teal)}
.nav.on .nv-t:hover,.nav.on .nv-item:hover .nv-t,.nav.on .nv-t[aria-expanded="true"]{
  color:var(--teal-d);background:rgba(0,194,178,.09)}
.nv-item:hover .nv-chev,.nv-t[aria-expanded="true"] .nv-chev{transform:rotate(180deg)}

/* ── the panel ─────────────────────────────────────────────────────────
   Anchored to .nav-in rather than to the trigger, so a wide panel can never
   run off the edge and it resizes with the pill as the nav detaches. */
.nv-panel{position:absolute;top:calc(100% + 10px);inset-inline:0;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:50% 0;
  transition:opacity .2s var(--ez),transform .26s var(--ez),visibility 0s .26s}
.nv-item:hover .nv-panel,.nv-item.open .nv-panel,.nv-item:focus-within .nv-panel{
  opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ez),transform .26s var(--ez),visibility 0s}
/* Exactly one panel may be visible. .nv-item:hover and .nv-item.open are
   independent triggers, so without this a click-locked panel and a hovered
   sibling both render at the same offset and the same z-index, and overlap.
   JS moves .open onto the hovered item; this keeps the invariant if it cannot. */
.nav-links:has(.nv-item.open) .nv-item:not(.open):hover .nv-panel,
.nav-links:has(.nv-item.open) .nv-item:not(.open):focus-within .nv-panel{
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
  transition:opacity .2s var(--ez),transform .26s var(--ez),visibility 0s .26s}
/* a bridge over the gap, so crossing into the panel does not close it */
.nv-panel::before{content:"";position:absolute;inset-inline:0;top:-12px;height:12px}
.nv-inner{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 44px -12px rgba(15,23,42,.22),
             0 0 0 1px rgba(15,23,42,.02)}
.nv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 14px}
.nv-col h3{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:6px 0 8px 10px}
body[dir="rtl"] .nv-col h3{letter-spacing:0;text-transform:none;font-size:.8rem;margin:6px 10px 8px 0}
.nv-col-s h3:not(:first-child){margin-top:16px}

/* list item — icon tile, title, one line of description */
.nv-li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;
  transition:background-color .18s var(--ez)}
.nv-li:hover{background:var(--bg-2,#F8FAFC)}
.nv-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(0,194,178,.08);border:1px solid var(--line);color:var(--teal-d);
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
.nv-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.nv-ic.emo{font-size:17px;line-height:1}
.nv-ic.img{background:#fff;padding:7px}
.nv-ic.img img{width:100%;height:100%;object-fit:contain;display:block}
.nv-ic.mono{font-size:.6rem;font-weight:800;font-style:normal}
.nv-tx{min-width:0}
.nv-tx b{display:block;font-size:.86rem;font-weight:620;color:var(--ink);letter-spacing:-.008em}
.nv-tx em{display:block;font-style:normal;font-size:.75rem;line-height:1.4;color:var(--ink-3);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-li:hover .nv-tx b{color:var(--teal-d)}
.nv-feat{background:linear-gradient(140deg,rgba(0,194,178,.07),rgba(108,71,255,.05));
  border:1px solid var(--line)}

/* compact link, for the long lists */
.nv-pl{display:block;padding:6px 10px;border-radius:8px;font-size:.83rem;font-weight:550;
  color:var(--ink-2);transition:.18s var(--ez);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-pl:hover{background:var(--bg-2,#F8FAFC);color:var(--teal-d)}

.nv-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.nv-more{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:650;
  color:var(--teal-d);padding:6px 10px;border-radius:8px;transition:.18s var(--ez)}
.nv-more svg{width:14px;height:14px;transition:transform .22s var(--ez)}
body[dir="rtl"] .nv-more svg{transform:scaleX(-1)}
.nv-more:hover{background:rgba(0,194,178,.08)}
.nv-more:hover svg{transform:translateX(3px)}
body[dir="rtl"] .nv-more:hover svg{transform:scaleX(-1) translateX(3px)}
.nv-col-s .nv-more{margin-top:8px}
.nv-t:focus-visible,.nv-li:focus-visible,.nv-pl:focus-visible,.nv-more:focus-visible{
  outline:2px solid var(--teal);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .nv-panel{transition:none}.nv-chev{transition:none}
}

/* ── below the pill breakpoint: the panels become an accordion drawer ─── */
@media(max-width:1080px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;inset-inline:0;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;padding:8px 14px 18px;
    border-bottom:1px solid var(--line);box-shadow:0 12px 28px rgba(15,23,42,.10);
    max-height:calc(100vh - 78px);overflow-y:auto;border-radius:0 0 16px 16px}
  .nav-links.open .nv-t{width:100%;justify-content:space-between;color:var(--ink);
    font-size:.95rem;text-transform:none;letter-spacing:0;padding:13px 6px;
    border-bottom:1px solid var(--line);border-radius:0}
  .nav-links.open .nv-item.open .nv-t{color:var(--teal-d);border-bottom-color:transparent}
  /* display, not opacity — a lingering :hover on touch cannot reopen a closed panel */
  .nav-links.open .nv-panel{position:static;display:none;opacity:1;visibility:visible;transform:none}
  .nav-links.open .nv-item.open .nv-panel{display:block}
  .nav-links.open .nv-inner{border:0;box-shadow:none;border-radius:0;padding:2px 0 12px}
  .nav-links.open .nv-grid{grid-template-columns:1fr;gap:0}
  .nav-links.open .nv-col h3{margin-inline-start:6px}
  .burger{display:grid}
}

/* ── integrations map: tiles are links now ─────────────────────────────
   Each node goes to that system's page, the same way the capsules below the
   map already do. The anchor has to look exactly like the div it replaced. */
a.itile{text-decoration:none;color:inherit;cursor:pointer}
a.itile:focus-visible{outline:2px solid #22D3B8;outline-offset:3px}
.il.light{background:#fff;padding:6px}
.il.light img{width:100%;height:100%;object-fit:contain;display:block}

/* ── footer bottom row ─────────────────────────────────────────────────
   The sitemap link sits on the copyright line, opposite the copyright, rather
   than in a column of its own. */
.f-b{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.f-sm{font-size:.84rem;color:rgba(255,255,255,.62);transition:.2s}
.f-sm:hover{color:var(--teal-l,#22D3B8)}
@media(max-width:560px){.f-b{justify-content:flex-start}}

/* ── brand marks in the Integrations panel ─────────────────────────────
   The compact links carry the same mark the capsules and the map use, so a
   system looks the same everywhere it appears. */
.nv-pl.has-lg{display:flex;align-items:center;gap:9px}
.nv-lg{flex:0 0 auto;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);padding:3px;overflow:hidden}
.nv-lg img{width:100%;height:100%;object-fit:contain;display:block}
.nv-lg.gl{background:rgba(0,194,178,.08);color:var(--teal-d);padding:0}
.nv-lg.gl svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.9}
.nv-lg.mono{background:rgba(15,23,42,.06);color:var(--ink-2);font-size:.52rem;font-weight:800;
  font-style:normal;padding:0}
.nv-pl.has-lg:hover .nv-lg{border-color:rgba(0,194,178,.4)}

/* a top-level nav link with no panel behind it */
.nv-t.nv-flat{text-decoration:none}

/* Touch-target floor. Lives here rather than page.css because the two home
   pages are hand-built and load site.css only. 44px is the Apple/WCAG minimum;
   the nav burger was 40. */
@media(hover:none){
  .burger{min-width:44px;min-height:44px}
  .btn,button[type=submit]{min-height:44px}
}

/* The brand mark is now an image, not a letter in a tinted box — drop the
   gradient plate and the shadow so the logo sits on its own. */
.brand-mk{background:none!important;box-shadow:none!important;border-radius:0!important;
  width:34px;height:34px;object-fit:contain;display:block}

/* ── 320px ───────────────────────────────────────────────────────────
   The narrowest phone still in use. The nav cluster needed 317px of a
   272px content box, and .btn{white-space:nowrap} let a long label run
   straight off the page rather than wrap. */
@media(max-width:359px){
  .nav-in{padding-inline:14px;gap:12px}
  .nav-r{gap:6px}
  .nav-r .btn{padding:11px 16px;font-size:.86rem}
  .btn{white-space:normal;max-width:100%}
}