/* ==========================================================================
   Zarbedar — Motion design layer (zb-core)
   Shared by the homepage and every static public page. Extends the existing
   --ns-* tokens instead of replacing them, so header, footer, buttons and the
   demo modal keep their current look while gaining the new motion language.

   Signature motif: the brand mark "×" (ضربدر). It shows up in the cursor,
   the scroll-progress dial, separators and section transitions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography, self-hosted: Peyda for headings (/fonts/brand) and the
   licensed YekanBakh 4 ProPlus for body text (/fonts/yekanbakh4).
   -------------------------------------------------------------------------- */
@font-face { font-family: Peyda; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/brand/PeydaWeb-Medium.woff2) format("woff2"); }
@font-face { font-family: Peyda; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/brand/PeydaWeb-SemiBold.woff2) format("woff2"); }
@font-face { font-family: Peyda; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/brand/PeydaWeb-Bold.woff2) format("woff2"); }
@font-face { font-family: Peyda; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/brand/PeydaWeb-ExtraBold.woff2) format("woff2"); }
@font-face { font-family: Peyda; font-style: normal; font-weight: 900; font-display: swap; src: url(/fonts/brand/PeydaWeb-Black.woff2) format("woff2"); }

@font-face { font-family: YekanBakh; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/yekanbakh4/YekanBakh-Light.woff2) format("woff2"); }
@font-face { font-family: YekanBakh; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/yekanbakh4/YekanBakh-Regular.woff2) format("woff2"); }
@font-face { font-family: YekanBakh; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/yekanbakh4/YekanBakh-SemiBold.woff2) format("woff2"); }
@font-face { font-family: YekanBakh; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/yekanbakh4/YekanBakh-SemiBold.woff2) format("woff2"); }
@font-face { font-family: YekanBakh; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/yekanbakh4/YekanBakh-Bold.woff2) format("woff2"); }
@font-face { font-family: YekanBakh; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/yekanbakh4/YekanBakh-ExtraBold.woff2) format("woff2"); }
@font-face { font-family: YekanBakh; font-style: normal; font-weight: 900; font-display: swap; src: url(/fonts/yekanbakh4/YekanBakh-Black.woff2) format("woff2"); }

:root {
  --zb-font-body: YekanBakh, Vazirmatn, system-ui, sans-serif;
  --zb-font-display: Peyda, YekanBakh, system-ui, sans-serif;
  --zb-display-weight: 800;
}

/* Beats the older inline html[dir=rtl] :where(...) Vazirmatn rule (higher specificity). */
html.zb[dir] body,
html.zb[dir] :where(h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, button, input, textarea, select, option, label, strong, b, em, small, blockquote, figcaption, td, th, div, section, article, header, footer, nav, form, time, dt, dd) { font-family: var(--zb-font-body) !important; }
html.zb[dir] :where(h1, h2, .zb-display, .zh-acard__num, .zh-steps__count b, .sec__cta-title, .zh-cross__ribbon .zb-marquee__item, .zh-acc__q, .zh-step__title, .zh-fcard__title, .zh-acard__title, .sec__card-title, .sec__layer-title, .pg-tabs__tab) { font-family: var(--zb-font-display) !important; }
/* Split headings wrap every word in a span; carry the display face into them. */
html.zb[dir] :where(h1, h2, .zb-display, .zh-acard__num, .zh-steps__count b, .sec__cta-title, .zh-cross__ribbon .zb-marquee__item, .zh-acc__q, .zh-step__title, .zh-fcard__title, .zh-acard__title, .sec__card-title, .sec__layer-title, .pg-tabs__tab) :where(span, a, strong, b, em, small) { font-family: var(--zb-font-display) !important; }
html.zb[dir] :where(h1, h2) { font-weight: var(--zb-display-weight) !important; }
/* Persian is a joined script: no tracking on headings. */
html.zb[dir="rtl"] :where(h1, h2, h3, .zb-h2, .zh-hero__title, .sec__title, .sec__h2, .sec__cta-title, .zmm__link, .zh-cross__ribbon) { letter-spacing: 0 !important; }

:root {
  /* brand */
  --zb-indigo: #4642fc;
  --zb-indigo-deep: #2c27d9;
  --zb-blue: #2f7bff;
  --zb-sky: #55d8ff;
  --zb-violet: #7a5cff;
  --zb-navy: #142e6e;

  /* gold accent — sampled from the product renders (coins / bars) */
  --zb-gold: #f0b43c;
  --zb-gold-soft: #ffe2a3;
  --zb-gold-deep: #b5741c;
  --zb-gold-grad: linear-gradient(100deg, #b5741c 0%, #f0b43c 24%, #fff0c4 46%, #f0b43c 66%, #b5741c 100%);

  /* neutrals */
  --zb-ink: #0b1020;
  --zb-ink-2: #1b2133;
  --zb-muted: #646b7f;
  --zb-muted-2: #8b91a3;
  --zb-line: rgba(17, 24, 48, 0.08);
  --zb-line-2: rgba(17, 24, 48, 0.14);
  --zb-paper: #f5f6fb;
  --zb-surface: #fff;
  --zb-night: #060914;
  --zb-night-2: #0c1122;
  --zb-night-line: rgba(255, 255, 255, 0.09);

  /* type scale (CLAUDE.md) */
  --zb-h1: clamp(40px, 5.2vw, 76px);
  --zb-h2: clamp(30px, 3.8vw, 56px);
  --zb-h3: clamp(20px, 1.6vw, 24px);
  --zb-body: clamp(15px, 1.15vw, 18px);

  /* shape */
  --zb-r-sm: 10px;
  --zb-r-md: 16px;
  --zb-r-lg: 24px;
  --zb-r-xl: 32px;
  --zb-r-2xl: 48px;
  --zb-r-hero: 56px;
  --zb-container: 1280px;
  --zb-gutter: clamp(16px, 4vw, 40px);
  --zb-section-y: clamp(72px, 9vw, 128px);

  /* depth */
  --zb-shadow-soft: 0 20px 60px rgba(15, 23, 42, 0.08);
  --zb-shadow-card: 0 24px 80px rgba(15, 23, 42, 0.1);
  --zb-shadow-hover: 0 30px 90px rgba(15, 23, 42, 0.14);
  --zb-glow-indigo: 0 18px 50px rgba(70, 66, 252, 0.28);

  /* motion */
  --zb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --zb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --zb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html.zb { -webkit-text-size-adjust: 100%; }
html.zb body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.zb ::selection { background: rgba(70, 66, 252, 0.18); color: inherit; }
html.zb :focus-visible { outline: 2px solid var(--zb-indigo); outline-offset: 3px; border-radius: 6px; }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.lenis { scroll-behavior: auto !important; }

/* Cross-document page transitions (Chromium); harmless elsewhere */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: zbVtOut 0.32s var(--zb-ease) both; }
::view-transition-new(root) { animation: zbVtIn 0.5s var(--zb-ease-out) both; }
@keyframes zbVtOut { to { opacity: 0; transform: translateY(-14px); } }
@keyframes zbVtIn { from { opacity: 0; transform: translateY(18px); } }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.zb-container {
  width: 100%;
  max-width: calc(var(--zb-container) + var(--zb-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--zb-gutter);
}
.zb-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Eyebrow pill with the brand cross as bullet */
.zb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 16px;
  border: 1px solid rgba(70, 66, 252, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--zb-indigo);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.zb-eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--zb-x-mask) center / contain no-repeat;
  mask: var(--zb-x-mask) center / contain no-repeat;
}
.zb-eyebrow--dark {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #c9c6ff;
}
.zb-eyebrow--gold { color: var(--zb-gold-deep); border-color: rgba(240, 180, 60, 0.3); background: rgba(255, 246, 225, 0.8); }

:root {
  --zb-x-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.4 0 5 3.6 8.6 0 10 1.4 6.4 5 10 8.6 8.6 10 5 6.4 1.4 10 0 8.6 3.6 5 0 1.4z'/%3E%3C/svg%3E");
}

/* Section heading system */
.zb-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.zb-head > .zb-eyebrow { align-self: flex-start; }
.zb-head--center { align-items: center; margin-inline: auto; text-align: center; max-width: 1000px; }
.zb-head--center > .zb-eyebrow { align-self: center; }
.zb-h2 {
  margin: 0 !important;
  color: var(--zb-ink);
  font-size: var(--zb-h2) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em;
}
.zb-h2 em, .zb-h1 em { font-style: normal; }
.zb-lead {
  margin: 0;
  color: var(--zb-muted);
  font-size: var(--zb-body);
  line-height: 1.9;
}
.zb-dark .zb-h2 { color: #fff; }
.zb-dark .zb-lead { color: rgba(226, 230, 245, 0.68); }

/* Molten-gold text: a slow liquid sweep across the word */
.zb-gold-text {
  background: var(--zb-gold-grad);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-position: 30% 50%;
}
.zb-gold-text--live { animation: zbMolten 6s ease-in-out infinite; }
@keyframes zbMolten {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.zb-indigo-text {
  background: linear-gradient(100deg, var(--zb-indigo) 0%, var(--zb-blue) 55%, var(--zb-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   Header — adaptive glass pill (light / dark zones, hide on scroll down)
   -------------------------------------------------------------------------- */
.nsh .nsh__pill {
  transition:
    transform 0.6s var(--zb-ease-out),
    background-color 0.45s var(--zb-ease),
    border-color 0.45s var(--zb-ease),
    box-shadow 0.45s var(--zb-ease) !important;
  max-width: var(--ns-header-max, 1290px);
}
.nsh .nsh__pill.is-scrolled {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(220, 220, 232, 0.7) !important;
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.08) !important;
}
html.zb-header-hidden .nsh .nsh__pill { transform: translate(-50%, calc(-100% - 28px)) !important; }

/* On the hero the header floats transparent */
.nsh.zb-on-hero .nsh__pill:not(.is-scrolled) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Over dark sections the header turns into dark glass */
html.zb-dark-zone .nsh .nsh__pill,
html.zb-dark-zone .nsh .nsh__pill.is-scrolled {
  background: rgba(10, 13, 26, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.3) !important;
}
html.zb-dark-zone .nsh .nsh__navlink { color: rgba(235, 238, 255, 0.7) !important; }
html.zb-dark-zone .nsh .nsh__navlink:hover { color: #fff !important; }
/* Over dark sections the header swaps to the official white logotype (the mark keeps its blue). */
html.zb-dark-zone .nsh .nsh__logo-wordmark { content: url(/brand/logo-white.svg); }
html.zb-dark-zone .nsh .nsh__burger { background: rgba(255, 255, 255, 0.1) !important; }
html.zb-dark-zone .nsh .nsh__burger span { background: #fff !important; }

/* Animated underline for nav links */
.nsh .nsh__navlink span { position: relative; }
.nsh .nsh__navlink span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--zb-indigo);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--zb-ease-out);
}
.nsh .nsh__navlink:hover span::after,
.nsh .nsh__navlink[aria-current="page"] span::after { transform: scaleX(1); }
.nsh .nsh__navlink[aria-current="page"] { color: var(--ns-fg) !important; }
html.zb-dark-zone .nsh .nsh__navlink span::after { background: var(--zb-gold); }

/* --------------------------------------------------------------------------
   Custom cursor (pointer: fine only — enabled from JS)
   -------------------------------------------------------------------------- */
.zb-cursor, .zb-cursor-ring, .zb-cursor-label { display: none; }
html.zb-has-cursor .zb-cursor,
html.zb-has-cursor .zb-cursor-ring,
html.zb-has-cursor .zb-cursor-label { display: block; }

html.zb-has-cursor,
html.zb-has-cursor body,
html.zb-has-cursor a,
html.zb-has-cursor button,
html.zb-has-cursor [role="button"],
html.zb-has-cursor label,
html.zb-has-cursor summary { cursor: none !important; }
html.zb-has-cursor input,
html.zb-has-cursor textarea,
html.zb-has-cursor select,
html.zb-has-cursor [contenteditable] { cursor: auto !important; }

.zb-cursor,
.zb-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 2147483000;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}
.zb-cursor {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  transition: opacity 0.3s, width 0.3s var(--zb-ease-out), height 0.3s var(--zb-ease-out), margin 0.3s var(--zb-ease-out);
}
.zb-cursor-ring {
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transition:
    width 0.45s var(--zb-ease-out), height 0.45s var(--zb-ease-out), margin 0.45s var(--zb-ease-out),
    background-color 0.35s, border-color 0.35s, opacity 0.3s;
}
html.zb-cursor-hover .zb-cursor-ring {
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  background: #fff;
  border-color: transparent;
}
html.zb-cursor-hover .zb-cursor { opacity: 0; }
html.zb-cursor-down .zb-cursor-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
html.zb-cursor-hidden .zb-cursor,
html.zb-cursor-hidden .zb-cursor-ring,
html.zb-cursor-hidden .zb-cursor-label { opacity: 0 !important; }

/* Label mode: the ring turns into a solid pill with a word inside */
.zb-cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: 2147483001;
  pointer-events: none;
  will-change: transform;
}
.zb-cursor-label > span {
  display: grid;
  place-items: center;
  min-width: 92px;
  height: 92px;
  padding: 0 14px;
  margin: -46px 0 0 -46px;
  border-radius: 999px;
  background: var(--zb-indigo);
  box-shadow: 0 18px 40px rgba(70, 66, 252, 0.35);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transform: scale(0);
  transition: transform 0.5s var(--zb-ease-spring);
}
.zb-cursor-label.is-gold > span { background: var(--zb-gold); color: #241600; box-shadow: 0 18px 40px rgba(240, 180, 60, 0.4); }
html.zb-cursor-labelled .zb-cursor-label > span { transform: scale(1); }
html.zb-cursor-labelled .zb-cursor,
html.zb-cursor-labelled .zb-cursor-ring { opacity: 0; }

/* --------------------------------------------------------------------------
   × scroll dial — progress + back to top
   -------------------------------------------------------------------------- */
.zb-xdial {
  position: fixed;
  left: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 900;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.14), inset 0 0 0 1px rgba(17, 24, 48, 0.06);
  color: var(--zb-ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.4s var(--zb-ease), transform 0.5s var(--zb-ease-out), background-color 0.4s, color 0.4s;
}
.zb-xdial.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.zb-xdial svg.zb-xdial__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.zb-xdial__track { fill: none; stroke: rgba(17, 24, 48, 0.08); stroke-width: 2.5; }
.zb-xdial__bar {
  fill: none;
  stroke: url(#zbDialGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 163.36;
  stroke-dashoffset: 163.36;
}
.zb-xdial__x {
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--zb-x-mask) center / contain no-repeat;
  mask: var(--zb-x-mask) center / contain no-repeat;
  transition: opacity 0.3s;
}
.zb-xdial__arrow {
  position: absolute;
  width: 18px; height: 18px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.4s var(--zb-ease-out);
}
.zb-xdial:hover .zb-xdial__x { opacity: 0; }
.zb-xdial:hover .zb-xdial__arrow { opacity: 1; transform: none; }
html.zb-dark-zone .zb-xdial { background: rgba(14, 18, 34, 0.75); color: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
html.zb-dark-zone .zb-xdial__track { stroke: rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------------------------------
   Split-text helpers (Persian: split by words only, never by characters)
   -------------------------------------------------------------------------- */
.zb-wm {
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  padding-block: 0.16em;
  margin-block: -0.16em;
  padding-inline: 0.04em;
  margin-inline: -0.04em;
}
.zb-word { display: inline-block; }
[data-scrub-words] .zb-word { opacity: 0.16; transition: none; }
html.zb-js [data-split]:not(.zb-split-ready) { opacity: 0; }

/* --------------------------------------------------------------------------
   Spotlight card (cursor-tracked glow + border light)
   -------------------------------------------------------------------------- */
.zb-spot { position: relative; isolation: isolate; }
.zb-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(70, 66, 252, 0.1), transparent 46%);
  opacity: 0;
  transition: opacity 0.5s var(--zb-ease);
  pointer-events: none;
}
.zb-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(70, 66, 252, 0.55), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.5s var(--zb-ease);
  pointer-events: none;
}
.zb-spot:hover::before, .zb-spot:hover::after { opacity: 1; }
.zb-dark .zb-spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(122, 92, 255, 0.16), transparent 46%); }
.zb-dark .zb-spot::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 180, 60, 0.7), transparent 60%); }

/* 3D tilt (values written by JS) */
[data-tilt] {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.6s var(--zb-ease-out);
  transform-style: preserve-3d;
}
[data-tilt].is-tilting { transition: transform 0.12s linear; }

/* --------------------------------------------------------------------------
   Marquee ribbons
   -------------------------------------------------------------------------- */
.zb-marquee { position: relative; overflow: hidden; direction: ltr; }
.zb-marquee__track { display: flex; width: max-content; will-change: transform; }
.zb-marquee__group { display: flex; flex: none; align-items: center; }
.zb-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  padding-inline-end: clamp(18px, 2vw, 30px);
  direction: rtl;
  white-space: nowrap;
}
.zb-marquee__x {
  width: 0.62em; height: 0.62em;
  flex: none;
  background: var(--zb-gold);
  -webkit-mask: var(--zb-x-mask) center / contain no-repeat;
  mask: var(--zb-x-mask) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Magnetic elements get a smooth return
   -------------------------------------------------------------------------- */
[data-magnetic] { will-change: transform; }
[data-magnetic] > * { pointer-events: none; }
.btn-v3[data-magnetic] > *, .nsh__cta[data-magnetic] > * { pointer-events: none; }

/* --------------------------------------------------------------------------
   Buttons — shared refinements on top of btn-v3
   -------------------------------------------------------------------------- */
.btn-v3,
.saaslyn-3-btn.btn-v3,
.nsh__cta,
.sf__btn,
.bi__btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-v3::after,
.nsh__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, 0.28), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--zb-ease);
  pointer-events: none;
}
.btn-v3:hover::after, .nsh__cta:hover::after { opacity: 1; }
.btn-v3--light::after { background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(70, 66, 252, 0.1), transparent 70%); }

.zb-btn-gold.btn-v3 {
  background: var(--zb-gold) !important;
  color: #2a1a00 !important;
  box-shadow: 0 16px 40px rgba(240, 180, 60, 0.3);
}
.zb-btn-ghost-dark.btn-v3 {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Utility animations
   -------------------------------------------------------------------------- */
@keyframes zbFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes zbSpin { to { transform: rotate(360deg); } }
@keyframes zbPulse { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes zbShine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }

/* Elements animated by GSAP start hidden only when JS is ready */
html.zb-js [data-anim]:not(.zb-in) { opacity: 0; }

/* --------------------------------------------------------------------------
   Reduced motion: everything visible, no loops, no custom cursor
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.zb-js [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .zb-gold-text { animation: none; }
  [data-scrub-words] .zb-word { opacity: 1 !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .zb-xdial__x { transition: none; }
}
@media (hover: none), (pointer: coarse) {
  .zb-cursor, .zb-cursor-ring, .zb-cursor-label { display: none !important; }
}

/* --------------------------------------------------------------------------
   Mobile menu — full-screen sheet that grows from the burger as a circle;
   links arrive one by one; the burger becomes a ×.
   -------------------------------------------------------------------------- */
.nsh .nsh__burger span { transition: transform 0.5s var(--zb-ease-out), opacity 0.3s, width 0.4s var(--zb-ease-out); transform-origin: center; }
.nsh.nsh--menu-open .nsh__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nsh.nsh--menu-open .nsh__burger span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.nsh.nsh--menu-open .nsh__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nsh.nsh--menu-open .nsh__burger { background: var(--zb-ink) !important; }
.nsh.nsh--menu-open .nsh__burger span { background: #fff !important; }
.nsh.nsh--menu-open .nsh__pill {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, 0) !important;
}
html.zb-dark-zone .nsh.nsh--menu-open .nsh__logo-wordmark { content: url(/brand/logo.svg); }

.zmm {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ns-z-header, 1000) - 1);
  background: #fff;
  clip-path: circle(0px at var(--ox, 90%) var(--oy, 40px));
  transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: clip-path;
}
.zmm.is-open { clip-path: circle(150vmax at var(--ox, 90%) var(--oy, 40px)); }
.zmm.is-closing { transition-duration: 0.5s; }
.zmm::before {
  content: "";
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(70, 66, 252, 0.1), transparent);
  pointer-events: none;
}
.zmm__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 104px clamp(20px, 6vw, 40px) calc(24px + env(safe-area-inset-bottom));
}
.zmm__list { list-style: none; margin: 0; padding: 0; }
.zmm__item {
  border-bottom: 1px solid var(--zb-line);
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.5s var(--zb-ease-out), transform 0.7s var(--zb-ease-out);
  transition-delay: 0s;
}
.zmm.is-open .zmm__item { opacity: 1; transform: none; transition-delay: calc(0.18s + var(--i, 0) * 0.055s); }
.zmm__link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 2px;
  border: 0;
  background: none;
  color: var(--zb-ink);
  font: inherit;
  font-family: var(--zb-font-display) !important;
  font-size: clamp(24px, 7.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: right;
  text-decoration: none;
  cursor: pointer;
}
.zmm__n { flex: none; min-width: 30px; color: var(--zb-muted-2); font-family: var(--zb-font-body) !important; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.zmm__label { flex: 1; }
.zmm__arrow {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--zb-paper);
  color: var(--zb-ink);
  transform: rotate(0deg);
  transition: background 0.3s, color 0.3s, transform 0.5s var(--zb-ease-spring);
}
.zmm__arrow svg { width: 18px; height: 18px; }
.zmm__link:active .zmm__arrow, .zmm__link:hover .zmm__arrow { background: var(--zb-indigo); color: #fff; transform: rotate(-45deg); }
.zmm__link[aria-current="page"] { color: var(--zb-indigo); }
.zmm__link[aria-current="page"] .zmm__n { color: var(--zb-gold-deep); }
.zmm__plus { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--zb-paper); transition: transform 0.5s var(--zb-ease-spring), background 0.3s; }
.zmm__plus::before, .zmm__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--zb-ink); transition: background 0.3s; }
.zmm__plus::after { transform: rotate(90deg); }
.zmm__group.is-open .zmm__plus { transform: rotate(135deg); background: var(--zb-ink); }
.zmm__group.is-open .zmm__plus::before, .zmm__group.is-open .zmm__plus::after { background: #fff; }
.zmm__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--zb-ease-out); }
.zmm__group.is-open .zmm__sub { grid-template-rows: 1fr; }
.zmm__sub-inner { overflow: hidden; display: flex; flex-direction: column; padding-inline-start: 44px; }
.zmm__sublink { padding: 10px 0; color: var(--zb-muted); font-size: 16px; font-weight: 600; text-decoration: none; }
.zmm__sublink:last-child { margin-bottom: 14px; }
.zmm__sublink[aria-current="page"] { color: var(--zb-indigo); }
.zmm__foot {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--zb-ease-out), transform 0.7s var(--zb-ease-out);
}
.zmm.is-open .zmm__foot { opacity: 1; transform: none; transition-delay: calc(0.22s + var(--i, 0) * 0.055s); }
.zmm__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  border-radius: 18px;
  background: var(--zb-ink);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.zmm__cta-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, 0.14); }
.zmm__cta-icon svg { width: 20px; height: 20px; fill: currentColor; }
.zmm__contact { display: flex; justify-content: space-between; gap: 12px; color: var(--zb-muted); font-size: 14px; }
.zmm__contact a { color: inherit; text-decoration: none; }
@media (min-width: 1280px) { .zmm { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .zmm, .zmm__item, .zmm__foot { transition: none !important; }
}
/* The legacy scoped `.mm button` rule resets fonts; out-rank it. */
html .mm .zmm .zmm__link {
  font-size: clamp(24px, 7.2vw, 34px);
  font-weight: 800;
  color: var(--zb-ink);
}
html.zb[dir] .mm .zmm .zmm__link,
html.zb[dir] .mm .zmm .zmm__label { font-family: var(--zb-font-display) !important; }
html.zb[dir] .mm .zmm .zmm__n { font-family: var(--zb-font-body) !important; }

/* Looping animations sleep while their section is off screen */
.zb-offscreen *, .zb-offscreen *::before, .zb-offscreen *::after { animation-play-state: paused !important; }


/* --------------------------------------------------------------------------
   Custom scroll rail — the browser scrollbar is hidden on mouse devices
   -------------------------------------------------------------------------- */
/* Hidden from the first paint (no width jump when the rail appears). */
@media (hover: hover) and (pointer: fine) {
  html.zb { scrollbar-width: none; }
  html.zb::-webkit-scrollbar, html.zb body::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
.zb-rail {
  position: fixed;
  right: 8px;
  top: 96px;
  bottom: 96px;
  z-index: 950;
  width: 14px;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.35s var(--zb-ease);
}
.zb-rail:hover, .zb-rail.is-dragging { opacity: 1; }
.zb-rail.is-idle { display: none; }
.zb-rail__track {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(17, 24, 48, 0.1);
  transition: width 0.3s var(--zb-ease-out), margin 0.3s var(--zb-ease-out);
}
.zb-rail:hover .zb-rail__track, .zb-rail.is-dragging .zb-rail__track { width: 5px; margin-left: -2.5px; }
.zb-rail__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--zb-indigo), var(--zb-sky) 60%, var(--zb-gold));
  transform: scaleY(0);
  transform-origin: top;
}
.zb-rail__thumb {
  position: absolute;
  left: 50%; top: 0;
  display: grid;
  place-items: center;
  width: 14px; height: 34px;
  margin-left: -7px;
  border-radius: 999px;
  background: var(--zb-ink);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
  cursor: grab;
  transition: width 0.3s var(--zb-ease-out), margin 0.3s var(--zb-ease-out), background-color 0.3s;
}
.zb-rail__thumb svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.zb-rail:hover .zb-rail__thumb { width: 16px; margin-left: -8px; background: var(--zb-indigo); }
.zb-rail.is-dragging .zb-rail__thumb { cursor: grabbing; background: var(--zb-indigo); }
html.zb-dark-zone .zb-rail__track { background: rgba(255, 255, 255, 0.14); }
html.zb-dark-zone .zb-rail__thumb { background: #fff; }
html.zb-dark-zone .zb-rail__thumb svg { stroke: var(--zb-ink); }

/* Mobile / touch: thin top progress bar with a glowing head (fills right → left) */
.zb-prog-m {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--ns-z-header, 1000) + 2);
  height: 3px;
  pointer-events: none;
}
.zb-prog-m__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, var(--zb-indigo), var(--zb-sky) 55%, var(--zb-gold));
  transform: scaleX(0);
  transform-origin: 100% 50%;
  will-change: transform;
}
.zb-prog-m__head {
  position: absolute;
  top: -3px;
  right: -4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--zb-gold);
  box-shadow: 0 0 0 3px rgba(240, 180, 60, 0.28), 0 0 12px rgba(240, 180, 60, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
  will-change: transform;
}
.zb-prog-m.is-active .zb-prog-m__head { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .zb-prog-m { display: none; } }

/* --------------------------------------------------------------------------
   Footer — five columns (platform · guides · resources · contact ·
   newsletter), tighter gaps, extra side padding; badge + copyright on the right
   -------------------------------------------------------------------------- */
html .ft .ft__card { padding-inline: clamp(24px, 5.5vw, 84px); }
html .ft .ft__logo img { height: 44px; width: auto; }
html .ft .ft__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}
html .ft .ft__cols, html .ft .ft__aside { display: contents; }
html .ft .ft__col, html .ft .ft__contact, html .ft .ft__news { min-width: 0; }
html .ft .ft__col-title { margin-bottom: 14px; color: #fff; font-size: 15px; font-weight: 700; }
html .ft .ft__list { display: flex; flex-direction: column; gap: 4px; }
html .ft .ft__list-item { padding-block: 5px; }
html .ft .ft__link { line-height: 1.7; }
html .ft .ft__contact { gap: 18px; }
html .ft .ft__contact-title { margin-bottom: 6px; color: #fff; font-size: 15px; font-weight: 700; }
html .ft .ft__news { gap: 10px; }
html .ft .ft__news .ft__col-title { margin-bottom: 4px; }
html .ft .ft__input, html .ft .ft__sub { height: 48px; border-radius: 12px; }
html .ft .ft__sub-icon { border-radius: 9px; }
html .ft .ft__news-note { font-size: 12px; line-height: 1.8; }

html .ft .ft__bottom { justify-content: flex-start !important; align-items: center !important; gap: 14px !important; }
html .ft .ft__badges { order: -2; display: flex; align-items: center; }
html .ft .ft__copy { order: -1; text-align: right; }
html .ft .ft__legal:empty { display: none; }

@media (max-width: 1023.98px) {
  html .ft .ft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html .ft .ft__news { grid-column: span 2; }
}
@media (max-width: 639.98px) {
  html .ft .ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  html .ft .ft__contact, html .ft .ft__news { grid-column: 1 / -1; }
  html .ft .ft__bottom { flex-direction: row !important; flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   Newsletter button — blue box on the left, centred label; on hover the box
   grows to full width and the arrow turns once and settles in the centre.
   -------------------------------------------------------------------------- */
html .ft .ft__sub {
  position: relative;
  isolation: isolate;
  justify-content: center;
  gap: 0;
  height: 52px;
  max-height: none;
  padding: 4px;
  overflow: hidden;
  border-radius: 14px;
}
html .ft .ft__sub-text {
  position: relative;
  z-index: 1;
  flex: 1;
  padding-inline: 12px 56px; /* keep the label centred in the white area */
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.35s var(--zb-ease), transform 0.5s var(--zb-ease-out);
}
html .ft .ft__sub-icon {
  position: absolute;
  top: 4px; bottom: 4px;
  left: 4px;
  z-index: 2;
  display: block;
  width: 48px;
  height: auto;
  border-radius: 10px;
  background: linear-gradient(135deg, #7a6cff, var(--zb-indigo));
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.35);
  transition: width 0.65s cubic-bezier(0.76, 0, 0.24, 1);
}
html .ft .ft__spark { transition: none !important; }
html .ft .ft__spark--1 { transform: translateX(0); }
html .ft .ft__spark--2 { display: none !important; }
html .ft .ft__spark svg { width: 16px; height: 16px; color: #fff; }
html .ft .ft__sub:hover .ft__sub-icon,
html .ft .ft__sub:focus-visible .ft__sub-icon { width: calc(100% - 8px); }
html .ft .ft__sub:hover .ft__spark--1,
html .ft .ft__sub:focus-visible .ft__spark--1 { animation: zbArrowLap 1.05s linear both; }
/* Arrow leaves through the left edge, re-enters from the right, settles in the centre. */
@keyframes zbArrowLap {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  38% { transform: translateX(-150px); }
  38.01% { transform: translateX(260px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  100% { transform: translateX(0); }
}


html .ft .ft__sub:hover .ft__sub-text,
html .ft .ft__sub:focus-visible .ft__sub-text { opacity: 0; transform: translateX(-12px); }
@media (prefers-reduced-motion: reduce) {
  html .ft .ft__sub-icon, html .ft .ft__spark, html .ft .ft__sub-text { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Arrow buttons for an RTL site: the arrow box sits on the LEFT and points
   left; on hover it travels to the right while the label slides left.
   -------------------------------------------------------------------------- */
html.zb [data-button-v3] { flex-direction: row-reverse; }
html.zb [data-button-v3] [data-button-v3-icon] svg { transform: scaleX(-1); }
html.zb .btn-v3[data-button-v3],
html.zb .saaslyn-3-btn[data-button-v3] { padding-left: 6px !important; padding-right: 26px !important; }
html.zb .nsh__cta[data-button-v3],
html.zb .sf__btn[data-button-v3] { padding-left: 5px !important; padding-right: 28px !important; }
html.zb .bi__btn[data-button-v3]:not(.bi__btn--center) { padding-left: 5px !important; padding-right: 22px !important; }
/* Newsletter arrow points left too */
html .ft .ft__spark svg { transform: scaleX(-1); }