@font-face{font-family:Codec Pro;src:url("/assets/fonts/CodecPro-Regular.woff2")format("woff2");font-weight:100 500;font-style:normal;font-display:swap}@font-face{font-family:Codec Pro;src:url("/assets/fonts/CodecPro-Italic.woff2")format("woff2");font-weight:100 500;font-style:italic;font-display:swap}@font-face{font-family:Codec Pro;src:url("/assets/fonts/CodecPro-Bold.woff2")format("woff2");font-weight:600 700;font-style:normal;font-display:swap}@font-face{font-family:Codec Pro;src:url("/assets/fonts/CodecPro-ExtraBold.woff2")format("woff2");font-weight:800 900;font-style:normal;font-display:swap}.cc-banner{z-index:9999;background:#fff;border:1px solid #eaecf0;border-radius:16px;flex-direction:column;gap:14px;width:min(430px,100vw - 48px);padding:20px 22px;font-family:Inter,system-ui,sans-serif;display:flex;position:fixed;bottom:24px;left:24px;box-shadow:0 24px 60px -20px #0a143259;opacity:1!important}.cc-banner__text{color:#344054;margin:0;font-size:14px;line-height:1.55}.cc-banner__text a{color:#2d6ff7;text-decoration:underline}.cc-banner__btns{justify-content:flex-end;gap:10px;display:flex}.cc-banner__btn{appearance:none;cursor:pointer;border-radius:10px;padding:9px 20px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s}.cc-banner__btn--ghost{color:#344054;background:#fff;border:1px solid #dfe3ea}.cc-banner__btn--ghost:hover{background:#f7f9fc}.cc-banner__btn--primary{color:#fff;background:linear-gradient(135deg,#4f7bff,#2d6ff7);border:1px solid #0000}.cc-banner__btn--primary:hover{transform:translateY(-1px)}@media (max-width:520px){.cc-banner{bottom:16px;left:16px}}html[data-cc-set] .cc-banner{display:none!important}

@font-face {
  font-family: 'Freehand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/freehand/v34/cIf-Ma5eqk01VjKTgAmB.ttf") format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf") format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf") format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf") format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf") format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZg.ttf") format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPQ.ttf") format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxjPQ.ttf") format('truetype');
}


  :root {
    --navy: #0f1729;
    --navy-deep: #050913;
    --navy-soft: #1d2939;
    --blue: #2d6ff7;
    --blue-light: #5b8df9;
    --blue-glow: #7da9ff;
    --blue-faint: #eef4ff;
    --purple: #7a5af8;
    --teal: #06b6d4;
    --ink: #101828;
    --ink-2: #344054;
    --ink-3: #667085;
    --ink-4: #98a2b3;
    --line: #eaecf0;
    --line-2: #d0d5dd;
    --bg: #ffffff;
    --bg-2: #f9fafb;
    --bg-3: #f2f4f7;
    --bg-soft: #f4f7fc;
    --bg-twin-img: url("/assets/cw/b4d682035f86acfe.webp");
    --bg-pale: #eef1f8;
    --bg-warm: #fafbfd;
    --green: #12b76a;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --r-pill: 100px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06),
      0 1px 3px rgba(16, 24, 40, 0.08);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08),
      0 2px 4px -2px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, 0.18),
      0 4px 6px -2px rgba(16, 24, 40, 0.05);
    --shadow-xl: 0 24px 64px -16px rgba(16, 24, 40, 0.24);
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    zoom: 0.96;
    font-family: "Codec Pro", "Inter", -apple-system, system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  img {
    max-width: 100%;
    display: block;
  }
  .mono {
    font-family: "JetBrains Mono", monospace;
  }

  .container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ---------- NAV ---------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 32px;
  }
  .logo {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
  }
  .logo-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: none;
  }
  .logo-mark img {
    width: 36px;
    height: 36px;
    display: block;
  }
  .logo-mark svg {
    width: 20px;
    height: 20px;
  }
  .logo-word {
    font-weight: 700;
    letter-spacing: -0.015em;
  }
  .nav-links {
    display: flex;
    gap: 4px;
    flex: 1;
    margin-left: 24px;
  }
  .nav-links a {
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
  }
  .nav-links a:hover {
    color: var(--ink);
    background: var(--bg-2);
  }
  .nav-about-link {
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
  }
  .nav-about-link:hover {
    color: var(--ink);
    background: var(--bg-2);
  }
  .nav-link-drop svg {
    opacity: 0.6;
    transition: transform 0.15s;
  }
  .nav-link-drop:hover svg {
    transform: translateY(1px);
  }
  .nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .nav-login {
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s;
  }
  .nav-login:hover {
    color: var(--ink);
  }

  /* Platform mega-menu */
  .nav-mega-wrap {
    position: relative;
  }
  .nav-link-drop-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s, background 0.15s;
  }
  .nav-link-drop-trigger:hover,
  .nav-mega-wrap.open .nav-link-drop-trigger {
    color: var(--ink);
    background: var(--bg-2);
  }
  .nav-link-drop-trigger svg {
    opacity: 0.6;
    transition: transform 0.2s;
  }
  .nav-mega-wrap.open .nav-link-drop-trigger svg {
    transform: rotate(180deg);
  }

  /* The big mega-menu panel, anchored to the trigger's left edge so it
     can't slide off-screen, but allowed to extend up to 960px wide. */
  .nav-mega {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    transform: translateY(-6px);
    width: min(960px, calc(100vw - 48px));
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 50px -12px rgba(15, 23, 41, 0.28),
      0 0 0 1px rgba(15, 23, 41, 0.05);
    padding: 14px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease,
      visibility 0s linear 0.18s;
    z-index: 200;
  }
  .nav-mega-wrap.open .nav-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  /* LEFT, sidebar tabs */
  .nav-mega-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: linear-gradient(180deg, #fafbfd, #f3f5f9);
    border-radius: 12px;
  }
  .nav-mega-tab {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-radius: 9px;
    transition: background 0.15s;
    font: inherit;
  }
  .nav-mega-tab:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  .nav-mega-tab.active {
    background: #fff;
    box-shadow: 0 4px 12px -4px rgba(15, 23, 41, 0.1);
  }
  .nav-mega-tab-ico {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(45, 111, 247, 0.08);
    color: var(--blue);
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .nav-mega-tab-ico svg {
    width: 17px;
    height: 17px;
  }
  .nav-mega-tab.active .nav-mega-tab-ico {
    background: linear-gradient(135deg, #4f7bff, #2d6ff7);
    color: #fff;
  }
  .nav-mega-tab-body strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
  }
  .nav-mega-tab-body small {
    display: block;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.35;
    margin-top: 2px;
  }

  /* RIGHT, content panes */
  .nav-mega-content {
    background: #f6f8fb;
    border-radius: 12px;
    padding: 16px;
    min-height: 380px;
    position: relative;
  }
  .nav-mega-pane {
    display: none;
    animation: navMegaFade 0.18s ease;
  }
  .nav-mega-pane.active {
    display: block;
  }
  @keyframes navMegaFade {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .nav-mega-grid {
    display: grid;
    gap: 4px 12px;
  }
  .nav-mega-grid.grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .nav-mega-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 9px;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s;
  }
  .nav-mega-item:hover {
    background: #fff;
  }
  .nav-mega-item strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
  }
  .nav-mega-item small {
    display: block;
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.35;
    margin-top: 2px;
  }
  .nav-mega-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    margin-top: 2px;
    flex-shrink: 0;
  }
  .nav-mega-ico svg {
    width: 15px;
    height: 15px;
  }
  .ico-blue {
    background: rgba(45, 111, 247, 0.1);
    color: var(--blue);
  }
  .ico-violet {
    background: rgba(124, 58, 237, 0.1);
    color: #6d28d9;
  }
  .ico-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
  }
  .ico-green {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
  }
  .ico-cyan {
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
  }

  /* Cards used by the Solutions pane */
  .nav-mega-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease,
      border-color 0.15s ease;
  }
  .nav-mega-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(15, 23, 41, 0.15);
    border-color: rgba(45, 111, 247, 0.3);
  }
  .nav-mega-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .nav-mega-card-tag {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    color: #fff;
    background: linear-gradient(135deg, #2d6ff7, #7c3aed);
  }
  .nav-mega-card-tier {
    font-family: "Codec Pro", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    background: linear-gradient(135deg, #2d6ff7, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .nav-mega-card strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .nav-mega-card p {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.45;
  }
  .nav-mega-card-foot {
    margin-top: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.04em;
  }

  /* Grid variants */
  .nav-mega-grid.grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  /* Bigger User-Type cards, 2-col, more padding, larger icon */
  .grid-roles {
    gap: 10px;
  }
  .nav-mega-role {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px 18px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease,
      box-shadow 0.15s ease;
  }
  .nav-mega-role:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 111, 247, 0.3);
    box-shadow: 0 10px 22px -8px rgba(15, 23, 41, 0.12);
  }
  .nav-mega-role-ico {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
  }
  .nav-mega-role-ico svg {
    width: 24px;
    height: 24px;
  }
  .nav-mega-role-body strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
  }
  .nav-mega-role-body small {
    display: block;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.4;
    margin-top: 3px;
  }

  /* Bigger Technology cards, 3-col but card-style padding */
  .grid-tech {
    gap: 10px;
  }
  .nav-mega-tech {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease,
      box-shadow 0.15s ease;
    min-height: 130px;
  }
  .nav-mega-tech:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 111, 247, 0.3);
    box-shadow: 0 10px 22px -8px rgba(15, 23, 41, 0.12);
  }
  .nav-mega-tech-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
  }
  .nav-mega-tech-ico svg {
    width: 18px;
    height: 18px;
  }
  .nav-mega-tech strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }
  .nav-mega-tech small {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
    margin-top: auto;
  }

  /* Modules pane, master / detail */
  .nav-modules-md {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 12px;
  }
  .nav-md-rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: linear-gradient(180deg, #fafbfd, #f3f5f9);
    border-radius: 12px;
  }
  .nav-md-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    border-radius: 9px;
    transition: background 0.15s, box-shadow 0.15s;
    align-items: center;
    font: inherit;
  }
  .nav-md-row:hover {
    background: rgba(255, 255, 255, 0.7);
  }
  .nav-md-row.active {
    background: #fff;
    box-shadow: 0 4px 12px -4px rgba(15, 23, 41, 0.1);
  }
  .nav-md-row-ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .nav-md-row-ico svg {
    width: 17px;
    height: 17px;
  }
  .mod-blue {
    background: rgba(45, 111, 247, 0.1);
    color: var(--blue);
  }
  .mod-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
  }
  .mod-green {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
  }
  .mod-violet {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
  }
  .nav-md-row.active .nav-md-row-ico.mod-blue {
    background: linear-gradient(135deg, #4f7bff, #2d6ff7);
    color: #fff;
  }
  .nav-md-row.active .nav-md-row-ico.mod-amber {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
  }
  .nav-md-row.active .nav-md-row-ico.mod-green {
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #fff;
  }
  .nav-md-row.active .nav-md-row-ico.mod-violet {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    color: #fff;
  }
  .nav-md-row-body {
    min-width: 0;
    overflow: hidden;
  }
  .nav-md-row-body strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
  }
  .nav-md-row-body small {
    display: block;
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.3;
    margin-top: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .nav-md-detail {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
    min-height: 340px;
    overflow: hidden;
  }
  .nav-md-pane {
    display: none;
  }
  .nav-md-pane.active {
    display: block;
    animation: navMdPaneIn 0.22s ease;
  }
  @keyframes navMdPaneIn {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .nav-md-pane-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
  }
  .nav-md-pane-tag {
    font-family: "Codec Pro", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    display: inline-block;
  }
  .mod-blue-tag {
    background: rgba(45, 111, 247, 0.1);
    color: var(--blue);
  }
  .mod-amber-tag {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
  }
  .mod-green-tag {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
  }
  .mod-violet-tag {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
  }
  .nav-md-pane-head h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0 4px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .nav-md-pane-head p {
    font-size: 13px;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.45;
  }
  .nav-md-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .nav-md-feat {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: start;
    padding: 9px 10px;
    border-radius: 8px;
    transition: background 0.15s;
    text-decoration: none;
    color: var(--ink);
  }
  .nav-md-feat:hover {
    background: var(--bg-2);
  }
  .nav-md-feat-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    flex-shrink: 0;
  }
  .nav-md-feat-ico svg {
    width: 15px;
    height: 15px;
  }
  .nav-md-feat-body {
    min-width: 0;
  }
  .nav-md-feat-body strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
  }
  .nav-md-feat-body small {
    display: block;
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.4;
    margin-top: 2px;
  }

  /* Platform-wide footer row */
  .nav-modules-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .nav-modules-footer-label {
    font-family: "Codec Pro", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-right: 6px;
  }
  .nav-modules-footer-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: var(--r-pill);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }
  .nav-modules-footer-item .ico {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(45, 111, 247, 0.08);
    color: var(--blue);
    display: grid;
    place-items: center;
  }
  .nav-modules-footer-item .ico svg {
    width: 11px;
    height: 11px;
  }
  .nav-modules-footer-item {
    cursor: default;
  }

  /* Footer link under a pane */
  .nav-mega-foot {
    padding: 14px 14px 6px;
    margin-top: 10px;
    border-top: 1px solid var(--line);
  }
  .nav-mega-foot-link {
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .nav-mega-foot-link:hover {
    text-decoration: underline;
  }

  /* Resources dropdown, same pattern as Platform but compact */
  .nav-res-wrap {
    position: relative;
  }
  .nav-res-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    transform: translateY(-6px);
    width: 340px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 50px -12px rgba(15, 23, 41, 0.28),
      0 0 0 1px rgba(15, 23, 41, 0.05);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease,
      visibility 0s linear 0.18s;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .nav-res-wrap.open .nav-res-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .nav-res-wrap.open .nav-link-drop-trigger {
    color: var(--ink);
    background: var(--bg-2);
  }
  .nav-res-wrap.open .nav-link-drop-trigger svg {
    transform: rotate(180deg);
  }
  /* nav-hover-fallback */
  /* nav-scroll-morph */
  .nav {
    transition: padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav .nav-inner {
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
  }
  .nav.scrolled {
    padding-top: 14px !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom-color: transparent !important;
  }
  .nav.scrolled .nav-inner {
    max-width: min(1080px, calc(100vw - 40px)) !important;
    height: 62px !important;
    padding-left: 22px !important;
    padding-right: 12px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
    backdrop-filter: saturate(180%) blur(14px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    box-shadow: 0 22px 55px -22px rgba(15, 23, 41, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav,
    .nav .nav-inner {
      transition: none;
    }
  }
  .nav-links:has(.nav-mega-wrap:hover) .nav-res-panel,
  .nav-links:has(.nav-mega-wrap:focus-within) .nav-res-panel,
  .nav-links:has(.nav-res-wrap:hover) .nav-mega,
  .nav-links:has(.nav-res-wrap:focus-within) .nav-mega {
    opacity: 0;
    visibility: hidden;
  }
  .nav-mega-wrap:hover .nav-mega,
  .nav-mega-wrap:focus-within .nav-mega,
  .nav-res-wrap:hover .nav-res-panel,
  .nav-res-wrap:focus-within .nav-res-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .nav-mega-wrap:hover .nav-link-drop-trigger,
  .nav-mega-wrap:focus-within .nav-link-drop-trigger,
  .nav-res-wrap:hover .nav-link-drop-trigger,
  .nav-res-wrap:focus-within .nav-link-drop-trigger {
    color: var(--ink);
    background: var(--bg-2);
  }
  .nav-mega-wrap:hover .nav-link-drop-trigger svg,
  .nav-mega-wrap:focus-within .nav-link-drop-trigger svg,
  .nav-res-wrap:hover .nav-link-drop-trigger svg,
  .nav-res-wrap:focus-within .nav-link-drop-trigger svg {
    transform: rotate(180deg);
  }
  .nav-res-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 9px;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s;
  }
  .nav-res-item:hover {
    background: var(--bg-2);
  }
  .nav-res-item strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }
  .nav-res-item small {
    display: block;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.35;
    margin-top: 2px;
  }
  .nav-res-item .nav-mega-ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .nav-res-item .nav-mega-ico svg {
    width: 17px;
    height: 17px;
  }

  /* VR Boost Agency Studio button, distinct creator-style pill */
  .nav-studio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 10px;
    border-radius: var(--r-pill);
    text-decoration: none;
    background: #1e3a8a;
    border: 1px solid rgba(125, 169, 255, 0.4);
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.2s ease,
      border-color 0.2s ease;
  }
  .nav-studio:hover {
    transform: translateY(-1px);
    border-color: rgba(236, 72, 153, 0.55);
    box-shadow: 0 10px 22px -8px rgba(79, 123, 255, 0.45);
  }
  .nav-studio-spark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(
      circle at 35% 35%,
      #f0abfc 0%,
      #ec4899 45%,
      #4f7bff 100%
    );
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.55);
  }
  .nav-studio-spark svg {
    width: 12px;
    height: 12px;
  }
  .nav-studio-text {
    line-height: 1;
    display: flex;
    align-items: center;
  }
  .nav-studio-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.005em;
  }
  .nav-studio-arrow {
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .nav-studio:hover .nav-studio-arrow {
    color: #ec4899;
    transform: translate(2px, -2px);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
  }
  .btn-pill {
    border-radius: var(--r-pill);
    padding: 0 22px;
  }
  .btn-primary {
    background: var(--navy);
    color: #fff;
  }
  .btn-primary:hover {
    background: #000;
    transform: translateY(-1px);
  }
  .btn-blue {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 1px 2px rgba(45, 111, 247, 0.2);
  }
  .btn-blue:hover {
    background: #2360de;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -6px rgba(45, 111, 247, 0.5);
  }
  .btn-secondary {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
  }
  .btn-secondary:hover {
    border-color: var(--ink);
  }
  .btn-ghost-dark {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .btn-ghost-dark:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  /* ---------- HERO ---------- */
  .hero {
    position: relative;
    z-index: 1; /* paint the overhanging twin above .logos */
    margin-top: -65px; /* extend under the navbar incl. its 1px border */
    padding: 175px 0 100px;
    overflow: visible;
    overflow-x: clip; /* edge tooltips must not widen the page on mobile */
    color: #fff;
  }
  .hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .hero-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(5, 9, 19, 0.82) 0%,
      rgba(15, 23, 41, 0.9) 55%,
      rgba(5, 9, 19, 0.96) 100%
    );
  }
  .hero-burst {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    /* starts invisible; app/hero-burst.jsx reveals it once WebGL is running */
    opacity: 0;
    transition: opacity 1.4s ease;
  }
  .hero-inner {
    position: relative;
    z-index: 3;
  }
  /* Dark-bg overrides for the inherited light-theme rules */
  .hero .hero-eyebrow {
    background: rgba(45, 111, 247, 0.18);
    border: 1px solid rgba(125, 169, 255, 0.3);
    color: var(--blue-light, #7da9ff);
    backdrop-filter: blur(8px);
  }
  .hero .hero-eyebrow-dot {
    background: var(--blue-light, #7da9ff);
    box-shadow: 0 0 8px var(--blue-light, #7da9ff);
  }
  .hero h1 {
    color: #fff;
  }
  .hero h1 em {
    background: linear-gradient(135deg, #7da9ff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: 0.14em;
    color: transparent;
  }
  .hero-sub {
    color: rgba(255, 255, 255, 0.72);
  }
  .hero .btn-ghost-dark {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
  }
  .hero-grid-bg {
    display: none;
  }

  /* ----- Hero v14 layered intelligence stack (from Concept 02) ----- */
  .hero-c2-stage {
    position: relative;
    z-index: 3;
    margin: 48px auto 0;
    max-width: 1180px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.85),
      0 0 0 1px rgba(125, 169, 255, 0.1);
    background: #050813;
  }
  .hero-c2-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: rgba(15, 18, 30, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .hero-c2-chrome .d {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
  }
  .hero-c2-chrome .url {
    margin-left: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-family: "Codec Pro", "Inter", sans-serif;
    letter-spacing: 0.01em;
  }
  .hero-c2-chrome .layer-chips {
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
  }
  .hero-c2-chrome .layer-chip {
    font-size: 9.5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    animation: heroChipIn 0.5s ease forwards;
  }
  .hero-c2-chrome .layer-chip.l1 {
    animation-delay: 1s;
  }
  .hero-c2-chrome .layer-chip.l2 {
    animation-delay: 2s;
  }
  .hero-c2-chrome .layer-chip.l3 {
    animation-delay: 3s;
  }
  .hero-c2-chrome .layer-chip.l4 {
    animation-delay: 4s;
  }
  .hero-c2-chrome .layer-chip.active {
    background: rgba(45, 111, 247, 0.18);
    color: #7da9ff;
  }
  @keyframes heroChipIn {
    to {
      opacity: 1;
    }
  }

  .hero-c2-body {
    position: relative;
    aspect-ratio: 16 / 7.6;
    background: url("/assets/cw/4b6e9b35d31c15e7.webp") center / cover no-repeat;
  }
  .hero-c2-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: heroLayerIn 1s ease forwards;
  }
  @keyframes heroLayerIn {
    to {
      opacity: 1;
    }
  }
  .hero-c2-layer.L1 {
    animation-delay: 1s;
  }
  .hero-c2-layer.L2 {
    animation-delay: 2s;
  }
  .hero-c2-layer.L3 {
    animation-delay: 3s;
  }
  .hero-c2-layer.L4 {
    animation-delay: 4s;
  }

  .hero-c2-pin {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2d6ff7;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 5px rgba(45, 111, 247, 0.32);
    transform: translate(-50%, -50%);
    animation: heroPinPulse 2.4s ease-out infinite;
  }
  @keyframes heroPinPulse {
    0%,
    100% {
      box-shadow: 0 0 0 5px rgba(45, 111, 247, 0.32);
    }
    50% {
      box-shadow: 0 0 0 14px rgba(45, 111, 247, 0);
    }
  }

  .hero-c2-tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 6px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    color: #0f1729;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 10px 22px -5px rgba(0, 0, 0, 0.5);
  }
  .hero-c2-tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2d6ff7;
  }
  .hero-c2-tag.warn::before {
    background: #f59e0b;
  }
  .hero-c2-tag.green::before {
    background: #10b981;
  }

  .hero-c2-pid {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hero-c2-pid path {
    stroke: #7da9ff;
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: heroPidDraw 2.4s ease 2.6s forwards;
    opacity: 0.85;
  }
  @keyframes heroPidDraw {
    to {
      stroke-dashoffset: 0;
    }
  }
  .hero-c2-pid circle {
    fill: rgba(125, 169, 255, 0.85);
    opacity: 0;
    animation: heroDotIn 0.4s ease 4.6s forwards;
  }
  @keyframes heroDotIn {
    to {
      opacity: 1;
    }
  }

  /* TAI loading panel docked bottom-left */
  .hero-c2-tai {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 6;
    width: 320px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px) saturate(1.1);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.45;
    color: #0f1729;
  }
  .hero-c2-tai-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #eaecf0;
    background: linear-gradient(180deg, #fff, #f7f8fa);
  }
  .hero-c2-tai-head .dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #7c3aed, #2d6ff7);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
  }
  .hero-c2-tai-head .name {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .hero-c2-tai-head .live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: #10b981;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .hero-c2-tai-head .live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
    animation: heroPulseDot 1.4s ease-in-out infinite;
  }
  @keyframes heroPulseDot {
    50% {
      opacity: 0.35;
    }
  }
  .hero-c2-tai-body {
    padding: 12px 14px 10px;
  }
  .hero-c2-tai-q {
    display: inline-block;
    padding: 7px 11px;
    background: rgba(45, 111, 247, 0.06);
    border: 1px solid rgba(45, 111, 247, 0.18);
    border-radius: 14px 14px 14px 4px;
    color: #0f1729;
    font-weight: 500;
    margin-bottom: 12px;
    font-size: 12.5px;
  }
  .hero-c2-tai-load {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .hero-c2-tai-load-bar {
    flex: 1;
    height: 4px;
    background: rgba(45, 111, 247, 0.1);
    border-radius: 2px;
    overflow: hidden;
  }
  .hero-c2-tai-load-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #2d6ff7, #7c3aed);
    border-radius: 2px;
    animation: heroTaiLoadFill 2.4s ease-out forwards;
  }
  @keyframes heroTaiLoadFill {
    to {
      width: 100%;
    }
  }
  .hero-c2-tai-load-label {
    font-size: 10.5px;
    color: #667085;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .hero-c2-tai-answer {
    opacity: 0;
    animation: heroTaiAnswerIn 0.6s ease 2.6s forwards;
    font-size: 12.5px;
    margin-bottom: 10px;
  }
  @keyframes heroTaiAnswerIn {
    to {
      opacity: 1;
    }
  }
  .hero-c2-tai-cite {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: #2d6ff7;
  }
  .hero-c2-tai-tickets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }
  .hero-c2-tai-ticket {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(4px);
    animation: heroTaiTicketIn 0.5s ease forwards;
  }
  .hero-c2-tai-ticket.t1 {
    animation-delay: 3.2s;
  }
  .hero-c2-tai-ticket.t2 {
    animation-delay: 3.5s;
  }
  @keyframes heroTaiTicketIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .hero-c2-tai-ticket-ico {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(45, 111, 247, 0.08);
    color: #2d6ff7;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .hero-c2-tai-ticket.t2 .hero-c2-tai-ticket-ico {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
  }
  .hero-c2-tai-ticket-ico svg {
    width: 12px;
    height: 12px;
  }
  .hero-c2-tai-ticket-body strong {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #0f1729;
  }
  .hero-c2-tai-ticket-body span {
    font-size: 10px;
    color: #667085;
  }
  .hero-c2-tai-ticket-meta {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #667085;
    text-transform: uppercase;
  }
  @media (max-width: 760px) {
    .hero-c2-tai {
      display: none;
    }
  }

  .hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(
      ellipse 80% 60% at 50% 30%,
      #000,
      transparent 80%
    );
    pointer-events: none;
  }
  .hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
  }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #d0d5dd;
    margin-bottom: 32px;
  }
  .hero-eyebrow-dot {
    width: 6px;
    height: 6px;
    background: var(--blue-light);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--blue-light);
    animation: dotPulse 2s infinite;
  }
  @keyframes dotPulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.5;
      transform: scale(0.8);
    }
  }
  .hero h1 {
    font-size: clamp(38px, 5.4vw, 68px);
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1.15;
    max-width: 1000px;
    margin: 0 auto 14px;
  }
  .hero h1 em {
    font-style: normal;
    color: var(--blue-light);
    font-weight: 700;
    /* ShinyText (React Bits) recreated as CSS-only per site rules: a white
       shine sweeps across the base color (speed 2s, spread 120deg, left). */
    background-image: linear-gradient(
      120deg,
      var(--blue-light) 0%,
      var(--blue-light) 35%,
      #ffffff 50%,
      var(--blue-light) 65%,
      var(--blue-light) 100%
    );
    background-size: 200% auto;
    background-position: 150% center;
    -webkit-background-clip: text;
    background-clip: text;
    padding: 0.2em 0.14em 0.2em 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-text-fill-color: transparent;
    animation: heroShine 2s linear infinite;
  }
  @keyframes heroShine {
    from {
      background-position: 150% center;
    }
    to {
      background-position: -50% center;
    }
  }
  .hero-sub {
    font-size: 16px;
    line-height: 1.55;
    color: #d0d5dd;
    max-width: 620px;
    margin: 0 auto 24px;
  }
  .hero-cta {
    display: flex;
    gap: 10px;
    margin-bottom: 36px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Walking worker, canvas chroma-key (canvas is truly transparent) */
  .hero-worker-canvas {
    position: absolute;
    bottom: -40px;
    left: -340px;
    height: 100%;
    max-height: 620px;
    width: auto;
    z-index: 20; /* ABOVE all UI elements */
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 30px 26px rgba(0, 0, 0, 0.55));
    animation: heroWorkerWalkIn 4.5s cubic-bezier(0.4, 0.06, 0.3, 1) 0.8s
        forwards,
      heroWorkerFadeWalk 0.8s ease 5s forwards;
  }
  @keyframes heroWorkerWalkIn {
    0% {
      opacity: 0;
      left: -340px;
    }
    14% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      left: 8%;
    }
  }
  @keyframes heroWorkerFadeWalk {
    /* fade the walking video out after he stops, so the look-up still
       can take over cleanly */
    to {
      opacity: 0;
    }
  }

  /* Static "looking up" pose, fades in once he's stopped */
  .hero-worker-look {
    position: absolute;
    bottom: -40px;
    left: 8%;
    height: 100%;
    max-height: 620px;
    width: auto;
    z-index: 21;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 30px 26px rgba(0, 0, 0, 0.55));
    animation: heroLookIn 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 5s forwards;
  }
  @keyframes heroLookIn {
    to {
      opacity: 1;
    }
  }

  /* Hidden source video, must stay laid out so iOS autoplay works */
  .hero-worker-src {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  /* "Connected" ping, appears at his chest after he looks up */
  .hero-worker-ping {
    position: absolute;
    bottom: 38%;
    left: 13%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(125, 169, 255, 0.55);
    box-shadow: 0 0 0 0 rgba(125, 169, 255, 0.4);
    z-index: 22;
    pointer-events: none;
    opacity: 0;
    animation: heroPingShow 0.3s ease 5.6s forwards,
      heroPingPulse 2.4s ease-out 5.8s infinite;
  }
  @keyframes heroPingShow {
    to {
      opacity: 1;
    }
  }
  @keyframes heroPingPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(125, 169, 255, 0.4);
    }
    70% {
      box-shadow: 0 0 0 28px rgba(125, 169, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(125, 169, 255, 0);
    }
  }

  @media (max-width: 1080px) {
    .hero-worker-canvas {
      max-height: 480px;
    }
    .hero-worker-look {
      max-height: 480px;
    }
    @keyframes heroWorkerWalkIn {
      0% {
        opacity: 0;
        left: -260px;
      }
      14% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        left: 2%;
      }
    }
    .hero-worker-look {
      left: 2%;
    }
  }
  @media (max-width: 760px) {
    .hero-worker-canvas,
    .hero-worker-look,
    .hero-worker-ping {
      display: none;
    }
  }

  /* Hero visual, composite product shot */
  .hero-visual {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 60px;
  }

  /* The product frame */
  .hero-frame {
    position: relative;
    background: #0f1729;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow: 0 -16px 60px -10px rgba(45, 111, 247, 0.32),
      0 24px 60px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: floatUp 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
  }
  @keyframes floatUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .hero-frame-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: #f2f4f7;
    border-bottom: 1px solid var(--line);
  }
  .hero-frame-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0d5dd;
  }
  .hero-frame-dot:nth-child(1) {
    background: #ff5f57;
  }
  .hero-frame-dot:nth-child(2) {
    background: #febc2e;
  }
  .hero-frame-dot:nth-child(3) {
    background: #28c840;
  }
  .hero-frame-url {
    margin-left: 12px;
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: 11.5px;
    color: var(--ink-3);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 3px 10px;
    flex: 1;
    max-width: 360px;
  }
  .hero-frame-ask {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .hero-frame-stage {
    position: relative;
    aspect-ratio: 16 / 8.5;
    background-size: cover;
    background-position: center;
  }
  .hero-frame-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(15, 23, 41, 0.2) 0%,
      rgba(15, 23, 41, 0.1) 40%,
      rgba(15, 23, 41, 0.55) 100%
    );
  }

  /* App rail */
  .hero-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 7px;
    z-index: 3;
  }
  .hero-rail-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--ink-3);
  }
  .hero-rail-icon svg {
    width: 14px;
    height: 14px;
  }
  .hero-rail-icon.active {
    background: var(--blue-faint);
    color: var(--blue);
  }

  /* Asset tag pin */
  .hero-asset-tag {
    position: absolute;
    top: 38%;
    left: 18%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.96);
    padding: 6px 12px 6px 8px;
    border-radius: 100px;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.45);
    animation: heroTagIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s both;
  }
  @keyframes heroTagIn {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .hero-asset-pin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(45, 111, 247, 0.3);
    flex: none;
    animation: heroPulse 2s ease-out infinite;
  }
  @keyframes heroPulse {
    0%,
    100% {
      box-shadow: 0 0 0 4px rgba(45, 111, 247, 0.25);
    }
    50% {
      box-shadow: 0 0 0 8px rgba(45, 111, 247, 0.15);
    }
  }
  .hero-asset-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .hero-asset-text strong {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
  }
  .hero-asset-text span {
    font-size: 10px;
    color: var(--ink-3);
  }

  .hero-isa {
    position: absolute;
    top: 62%;
    left: 48%;
    z-index: 3;
    padding: 4px 9px;
    background: rgba(15, 23, 41, 0.82);
    color: #fff;
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    animation: heroTagIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s both;
  }
  .hero-isa strong {
    color: #93c5fd;
    font-weight: 700;
    margin-left: 2px;
  }

  /* TAI chat docked right */
  .hero-chat {
    position: absolute;
    top: 8%;
    right: 14px;
    bottom: 8%;
    width: 32%;
    max-width: 280px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.45);
    padding: 10px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: hidden;
    animation: heroTagIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.65s both;
  }
  .hero-chat-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
  }
  .hero-chat-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 9.5px;
    font-weight: 700;
  }
  .hero-chat-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .hero-chat-status span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 4px var(--green);
  }
  .hero-chat-bubble {
    font-size: 10.5px;
    line-height: 1.4;
    padding: 7px 10px;
    border-radius: 9px;
    max-width: 95%;
  }
  .hero-chat-user {
    align-self: flex-end;
    background: var(--blue-faint);
    color: #1e40af;
    border-bottom-right-radius: 3px;
    animation: heroBubble 0.35s ease 1s both;
  }
  .hero-chat-ai {
    align-self: flex-start;
    background: var(--bg-2);
    color: var(--ink-2);
    border-bottom-left-radius: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: heroBubble 0.35s ease 1.8s both;
  }
  @keyframes heroBubble {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .hero-chat-dots {
    display: inline-flex;
    gap: 3px;
    flex: none;
  }
  .hero-chat-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-3);
    animation: heroDot 1.2s ease-in-out infinite;
  }
  .hero-chat-dots span:nth-child(2) {
    animation-delay: 0.15s;
  }
  .hero-chat-dots span:nth-child(3) {
    animation-delay: 0.3s;
  }
  @keyframes heroDot {
    0%,
    80%,
    100% {
      transform: scale(0.6);
      opacity: 0.4;
    }
    40% {
      transform: scale(1);
      opacity: 1;
    }
  }
  .hero-chat-text {
    font-size: 10.5px;
    color: var(--ink-2);
  }

  /* Floating mobile / field workflow card */
  .hero-mobile {
    position: absolute;
    right: -10px;
    bottom: -42px;
    width: 220px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: 10px 12px;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.45);
    z-index: 6;
    animation: heroTagIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.95s both,
      heroBob 5s ease-in-out infinite alternate;
  }
  @keyframes heroBob {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-6px);
    }
  }
  .hero-mobile-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
  .hero-mobile-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(45, 111, 247, 0.25);
  }
  .hero-mobile-label {
    flex: 1;
    color: var(--ink);
  }
  .hero-mobile-icon {
    color: var(--ink-3);
  }
  .hero-mobile-icon svg {
    width: 12px;
    height: 12px;
  }
  .hero-mobile-step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .hero-mobile-step-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
    flex: none;
  }
  .hero-mobile-step-num i {
    font-style: normal;
    color: var(--ink-3);
    font-size: 11px;
  }
  .hero-mobile-step-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .hero-mobile-step-body strong {
    font-size: 12px;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.2;
  }
  .hero-mobile-step-body span {
    font-size: 10px;
    color: var(--ink-3);
  }
  .hero-mobile-progress {
    height: 3px;
    background: var(--bg-3);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
  }
  .hero-mobile-progress span {
    display: block;
    height: 100%;
    width: 37%;
    background: linear-gradient(90deg, var(--blue), var(--blue-glow));
    animation: heroProgress 5s ease-in-out infinite;
  }
  @keyframes heroProgress {
    0% {
      width: 37%;
    }
    50% {
      width: 70%;
    }
    100% {
      width: 37%;
    }
  }
  .hero-mobile-foot {
    font-size: 9.5px;
    color: var(--ink-3);
    font-weight: 500;
  }

  /* Floating TAI · LIVE chip */
  .hero-chip {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink);
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
    animation: heroTagIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s both,
      heroBob 5s ease-in-out 1s infinite alternate;
  }
  .hero-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    box-shadow: 0 0 8px rgba(45, 111, 247, 0.7);
  }
  .hero-chip-tai {
    top: 16px;
    left: -10px;
  }

  /* Live stats pills */
  .hero-stats {
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(15, 23, 41, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    z-index: 6;
    box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    animation: heroTagIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.85s both;
  }
  .hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }
  .hero-stat:last-child {
    border-right: none;
    padding-right: 0;
  }
  .hero-stat strong {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, #7da9ff);
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: 0.14em;
    -webkit-text-fill-color: transparent;
  }

  @media (max-width: 1080px) {
    .hero-visual {
      padding: 0 24px;
    }
    .hero-chat {
      width: 36%;
      max-width: 220px;
    }
    .hero-mobile {
      right: 0;
      bottom: -30px;
      width: 180px;
    }
    .hero-chip-tai {
      top: 10px;
      left: 0;
    }
  }
  @media (max-width: 760px) {
    .hero {
      padding: 36px 0 28px;
    }
    .hero-visual {
      padding: 0 8px;
    }
    .hero-chat {
      display: none;
    }
    .hero-mobile {
      display: none;
    }
    .hero-chip-tai {
      display: none;
    }
    .hero-isa {
      display: none;
    }
    .hero-asset-tag {
      left: 12%;
    }
    .hero-stats {
      font-size: 10px;
      gap: 6px;
      padding: 6px 10px;
      bottom: -28px;
    }
    .hero-stat strong {
      font-size: 11.5px;
    }
  }

  /* ---------- NX interactive hero twin ---------- */
  .hero-sub2 {
    font-size: 14px;
    color: var(--ink-4, #98a2b3);
    margin: 6px auto 0;
    max-width: 600px;
    text-align: center;
  }
  .nx-twin {
    margin-top: 26px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    position: relative;
    animation: nxTwinIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both;
  }
  @keyframes nxTwinIn {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-twin {
      animation: none;
      transform: none;
    }
  }
  .nx-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: #f3f4f6;
  }
  .nx-chrome .d {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(10, 13, 24, 0.15);
  }
  .nx-chrome .url {
    margin-left: 8px;
    font-size: 12px;
    color: rgba(10, 13, 24, 0.55);
  }
  .nx-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(10, 13, 24, 0.45);
  }
  .nx-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
  }
  .nx-canvas {
    position: relative;
    height: clamp(360px, 40vw, 440px);
    overflow: hidden;
    background: linear-gradient(
        180deg,
        rgba(8, 11, 20, 0.46),
        rgba(8, 11, 20, 0.74)
      ),
      url("/assets/cw/factory-hero.webp") center / cover no-repeat;
  }
  .nx-grid {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: linear-gradient(
        rgba(125, 169, 255, 0.1) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(125, 169, 255, 0.1) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(
      ellipse 80% 80% at 55% 45%,
      #000,
      transparent 92%
    );
    mask-image: radial-gradient(
      ellipse 80% 80% at 55% 45%,
      #000,
      transparent 92%
    );
    pointer-events: none;
  }
  .nx-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 4;
  }
  .nx-dot {
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #c4b5fd, #4f7bff);
    box-shadow: 0 0 0 6px rgba(79, 123, 255, 0.22);
    animation: nxPulse 2s ease-in-out infinite;
  }
  @keyframes nxPulse {
    0%,
    100% {
      box-shadow: 0 0 0 6px rgba(79, 123, 255, 0.22);
    }
    50% {
      box-shadow: 0 0 0 11px rgba(79, 123, 255, 0.08);
    }
  }
  .nx-pin.is-active .nx-dot {
    box-shadow: 0 0 0 6px rgba(79, 123, 255, 0.45);
    animation: none;
  }
  .nx-tip {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    background: #fff;
    color: #0f1729;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 7px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.55);
    transition: opacity 0.16s ease, transform 0.16s ease;
  }
  .nx-tip:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #fff;
  }
  .nx-canvas:hover .nx-tip,
  .nx-pin:hover .nx-tip,
  .nx-pin:focus-visible .nx-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .nx-pin.is-active .nx-tip {
    opacity: 0 !important;
  }
  .nx-route {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 2;
  }
  .nx-route.show {
    opacity: 1;
  }
  .nx-rdot {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    background: #5b8cff;
    box-shadow: 0 0 10px rgba(91, 140, 255, 0.95);
    opacity: 0;
  }
  .nx-route.show .nx-rdot {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
    animation: nxFlow 2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.18s);
  }
  @keyframes nxFlow {
    0%,
    72%,
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.5;
    }
    36% {
      transform: translate(-50%, -50%) scale(1.55);
      opacity: 1;
      box-shadow: 0 0 16px rgba(125, 169, 255, 1);
    }
  }
  .nx-here {
    position: absolute;
    left: 12%;
    top: 85%;
    transform: translate(-50%, -200%);
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(10, 13, 24, 0.7);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    padding: 3px 8px;
    border-radius: 100px;
    white-space: nowrap;
  }
  .nx-detail {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 250px;
    max-width: 70%;
    background: #fff;
    color: #0f1729;
    border-radius: 13px;
    box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.6);
    padding: 15px 16px;
    opacity: 0;
    transform: scale(0.96);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 7;
  }
  .nx-detail.open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  .nx-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: 0;
    color: #98a2b3;
    cursor: pointer;
    padding: 2px;
  }
  .nx-dc {
    display: none;
  }
  .nx-dc.show {
    display: block;
  }
  .nx-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
    margin-bottom: 8px;
  }
  .nx-tag-blue {
    color: #1e54d1;
    background: rgba(45, 111, 247, 0.12);
  }
  .nx-tag-amber {
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
  }
  .nx-tag-green {
    color: #047857;
    background: rgba(16, 185, 129, 0.14);
  }
  .nx-detail h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
  }
  .nx-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 11px;
  }
  .nx-r {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
  }
  .nx-r span {
    color: #667085;
  }
  .nx-r b {
    font-weight: 600;
    color: #0f1729;
  }
  .nx-ok {
    color: #059669 !important;
  }
  .nx-warn {
    color: #d97706 !important;
  }
  .nx-docs {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
  }
  .nx-doc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #344054;
    background: #f6f8fb;
    border-radius: 7px;
    padding: 7px 9px;
  }
  .nx-doc svg {
    width: 14px;
    height: 14px;
    color: #2d6ff7;
    flex: none;
  }
  .nx-steps {
    margin: 0 0 12px;
    padding-left: 16px;
    font-size: 12px;
    color: #344054;
    line-height: 1.5;
  }
  .nx-steps li {
    margin-bottom: 3px;
  }
  .nx-dir {
    font-size: 12.5px;
    color: #344054;
    line-height: 1.5;
    margin: 0 0 12px;
  }
  .nx-act-btn {
    width: 100%;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #4f7bff, #2d6ff7);
    border: 0;
    border-radius: 9px;
    padding: 9px;
    cursor: pointer;
    font-family: inherit;
  }
  .nx-done {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: 12.5px;
    font-weight: 700;
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 9px;
    padding: 9px;
  }
  .nx-done svg {
    width: 15px;
    height: 15px;
  }
  .nx-done.show {
    display: flex;
    animation: nxPop 0.3s ease;
  }
  @keyframes nxPop {
    0% {
      transform: scale(0.85);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  .nx-nav {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    display: none;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: #0f1729;
    border-radius: 13px;
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.6);
    padding: 12px 16px 12px 12px;
    z-index: 8;
    min-width: 230px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nx-nav.show {
    display: flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .nx-nav-ico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #4f7bff, #2d6ff7);
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
  }
  .nx-nav-ico svg {
    width: 22px;
    height: 22px;
  }
  .nx-nav-txt b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }
  .nx-nav-txt small {
    font-size: 11.5px;
    color: #667085;
  }
  .nx-route.navigating .nx-rdot {
    animation: nxTravel 1.6s ease-in-out infinite;
  }
  @keyframes nxTravel {
    0%,
    100% {
      opacity: 0.35;
      transform: translate(-50%, -50%) scale(0.9);
    }
    50% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.7);
      box-shadow: 0 0 18px rgba(125, 169, 255, 1);
    }
  }

  .nx-tai {
    position: absolute;
    left: 16px;
    bottom: 16px;
    width: 252px;
    max-width: 66%;
    max-height: calc(100% - 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-radius: 13px;
    padding: 12px;
    z-index: 5;
  }
  .nx-tai-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    flex: none;
  }
  .nx-tai-ava {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(135deg, #4f7bff, #7c3aed);
    display: grid;
    place-items: center;
    flex: none;
  }
  .nx-tai-ava svg {
    width: 14px;
    height: 14px;
    color: #fff;
  }
  .nx-tai-h b {
    font-size: 12.5px;
    color: #0a0d18;
    font-weight: 600;
  }
  .nx-tai-h span {
    font-size: 10.5px;
    color: rgba(10, 13, 24, 0.45);
  }
  .nx-tai-msgs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 9px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .nx-tai-msgs:empty {
    display: none;
  }
  .nx-tai-chips {
    flex: none;
  }
  .nx-msg {
    font-size: 11.5px;
    line-height: 1.45;
    padding: 7px 10px;
    border-radius: 10px;
    max-width: 94%;
  }
  .nx-msg-u {
    align-self: flex-end;
    background: #2d6ff7;
    color: #fff;
    border-bottom-right-radius: 3px;
  }
  .nx-msg-t {
    align-self: flex-start;
    background: #f1f3f6;
    color: #1c2333;
    border-bottom-left-radius: 3px;
  }
  .nx-msg-t .src {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: #9db8ff;
  }
  .nx-tai-chips {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .nx-tai-chip {
    text-align: left;
    font-size: 11px;
    color: #1f2733;
    background: #eef0f3;
    border: 0;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    font-family: inherit;
  }
  .nx-tai-chip:hover {
    background: rgba(125, 169, 255, 0.18);
  }
  .nx-tai-chip:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .nx-hint {
    padding: 10px 14px;
    font-size: 11px;
    color: rgba(10, 13, 24, 0.45);
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f8f9fb;
  }
  .nx-hint svg {
    width: 13px;
    height: 13px;
    flex: none;
  }
  @media (max-width: 760px) {
    .nx-canvas {
      height: 520px;
    }
    .nx-detail {
      width: 220px;
    }
    .nx-tai {
      width: 220px;
    }
  }

  /* ---------- NB brain orbit + chat ---------- */
  .nb-stage {
    position: relative;
    width: 480px;
    height: 480px;
    max-width: 100%;
    margin: 0 auto;
  }
  .nb-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  .nb-halo1 {
    width: 360px;
    height: 360px;
    border: 1px dashed rgba(125, 169, 255, 0.2);
  }
  .nb-halo2 {
    width: 480px;
    height: 480px;
    border: 1px solid rgba(125, 169, 255, 0.08);
  }
  .nb-brain {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 286px;
    height: 286px;
    border-radius: 50%;
    background: radial-gradient(
      circle at 50% 40%,
      rgba(125, 169, 255, 0.18),
      rgba(79, 123, 255, 0.02)
    );
    display: grid;
    place-items: center;
    color: #9db8ff;
  }
  .nb-brain-img {
    width: 78%;
    aspect-ratio: 1 / 1;
    background-color: #9db8ff;
    -webkit-mask: url("/assets/brain-mask.png") center / contain no-repeat;
    mask: url("/assets/brain-mask.png") center / contain no-repeat;
  }
  .nb-orbit {
    position: absolute;
    inset: 0;
    animation: nbSpin 48s linear infinite;
  }
  @keyframes nbSpin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes nbSpinR {
    to {
      transform: rotate(-360deg);
    }
  }
  .nb-onode {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(var(--a)) translateY(-200px);
  }
  .nb-os {
    animation: nbSpinR 48s linear infinite;
  }
  .nb-oc {
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .nb-stage:hover .nb-orbit,
  .nb-stage:hover .nb-os {
    animation-play-state: paused;
  }
  .nb-odot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex: none;
    background: radial-gradient(circle at 35% 35%, #c4b5fd, #4f7bff);
    box-shadow: 0 0 0 5px rgba(79, 123, 255, 0.14);
  }
  .nb-olabel {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
  }
  .nb-chatnode {
    cursor: pointer;
  }
  .nb-chatnode .nb-oc {
    flex-direction: column;
    gap: 4px;
  }
  .nb-cic {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, #4f7bff, #7c3aed);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.22);
    animation: nbPulse 2s ease-in-out infinite;
  }
  .nb-cic svg {
    width: 18px;
    height: 18px;
    color: #fff;
  }
  @keyframes nbPulse {
    0%,
    100% {
      box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.22);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(124, 58, 237, 0.08);
    }
  }
  .nb-clab {
    font-size: 11px;
    font-weight: 700;
    color: #c4b5fd;
    letter-spacing: 0.04em;
  }
  .nb-hint {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 14px;
  }
  .nb-hint b {
    color: #c4b5fd;
    font-weight: 600;
  }
  .nb-chat {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) scale(0.9);
    transform-origin: left center;
    width: min(340px, 56%);
    height: 440px;
    background: #fff;
    border-radius: 16px;
    display: none;
    flex-direction: column;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    z-index: 6;
    opacity: 0;
  }
  .tai-brain.chat-open .nb-chat {
    display: flex;
    animation: nbOpen 0.45s cubic-bezier(0.4, 0.06, 0.3, 1) forwards;
  }
  @keyframes nbOpen {
    to {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }
  }
  .nb-ask {
    position: absolute;
    top: calc(50% + 96px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    z-index: 4;
  }
  .nb-ask-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f7bff, #2d6ff7);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px rgba(45, 111, 247, 0.18),
      0 10px 24px -8px rgba(45, 111, 247, 0.6);
    animation: nbAskPulse 2.4s ease-in-out infinite;
  }
  .nb-ask-circle svg {
    width: 24px;
    height: 24px;
    color: #fff;
  }
  @keyframes nbAskPulse {
    0%,
    100% {
      box-shadow: 0 0 0 6px rgba(45, 111, 247, 0.18),
        0 10px 24px -8px rgba(45, 111, 247, 0.6);
    }
    50% {
      box-shadow: 0 0 0 11px rgba(45, 111, 247, 0.07),
        0 10px 24px -8px rgba(45, 111, 247, 0.6);
    }
  }
  .nb-ask:hover .nb-ask-circle {
    transform: scale(1.06);
  }
  .nb-ask-lab {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #c4b5fd;
  }
  .nb-conn {
    position: absolute;
    top: 50%;
    left: 56%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
    z-index: 3;
    pointer-events: none;
  }
  .nb-conn i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #c4b5fd, #4f7bff);
    box-shadow: 0 0 8px rgba(125, 169, 255, 0.9);
    animation: nbConn 1.4s ease-in-out infinite;
  }
  .nb-conn i:nth-child(2) {
    animation-delay: 0.2s;
  }
  .nb-conn i:nth-child(3) {
    animation-delay: 0.4s;
  }
  @keyframes nbConn {
    0%,
    100% {
      transform: scale(0.7);
      opacity: 0.5;
    }
    50% {
      transform: scale(1.2);
      opacity: 1;
    }
  }
  .tai-brain.chat-open .nb-chat {
    display: flex;
  }
  .tai-brain.chat-open .nb-orbit {
    opacity: 0;
    visibility: hidden;
  }
  .tai-brain.chat-open .nb-hint {
    visibility: hidden;
  }
  .tai-brain.chat-open .nb-stage {
    transform: translateX(-26%);
    transition: transform 0.45s cubic-bezier(0.4, 0.06, 0.3, 1);
  }
  .tai-brain.chat-open .nb-conn {
    opacity: 1;
  }
  .nb-chat-h {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 15px;
    border-bottom: 1px solid #eef1f6;
  }
  .nb-chat-ava {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, #4f7bff, #7c3aed);
    display: grid;
    place-items: center;
    flex: none;
  }
  .nb-chat-ava svg {
    width: 16px;
    height: 16px;
    color: #fff;
  }
  .nb-chat-t b {
    font-size: 14px;
    font-weight: 700;
    color: #0f1729;
  }
  .nb-chat-t span {
    font-size: 12px;
    color: #98a2b3;
  }
  .nb-chat-x {
    margin-left: auto;
    background: none;
    border: 0;
    color: #98a2b3;
    cursor: pointer;
    padding: 2px;
  }
  .nb-chat-x svg {
    width: 16px;
    height: 16px;
  }
  .nb-chat-msgs {
    flex: 1;
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
    min-height: 0;
  }
  .nb-b {
    font-size: 13px;
    line-height: 1.45;
    padding: 9px 12px;
    border-radius: 13px;
    max-width: 88%;
  }
  .nb-bt {
    align-self: flex-start;
    background: #f1f4f9;
    color: #0f1729;
    border-bottom-left-radius: 4px;
  }
  .nb-bu {
    align-self: flex-end;
    background: #2d6ff7;
    color: #fff;
    border-bottom-right-radius: 4px;
  }
  .nb-bt .nb-src {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #2d6ff7;
  }
  .nb-chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 15px 10px;
  }
  .nb-chat-chip {
    font-size: 12px;
    color: #2d6ff7;
    background: #fff;
    border: 1px solid #cfe0fb;
    border-radius: 100px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
  }
  .nb-chat-chip:hover {
    background: #f3f8ff;
  }
  .nb-chat-chip:disabled {
    opacity: 0.45;
    cursor: default;
  }
  .nb-chat-input {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-top: 1px solid #eef1f6;
  }
  .nb-ci-box {
    flex: 1;
    font-size: 12.5px;
    color: #98a2b3;
    background: #f6f8fb;
    border-radius: 100px;
    padding: 9px 14px;
  }
  .nb-ci-send {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2d6ff7;
    display: grid;
    place-items: center;
    flex: none;
  }
  .nb-ci-send svg {
    width: 15px;
    height: 15px;
    color: #fff;
  }
  .nb-chat-disc {
    font-size: 10px;
    color: #b6bfca;
    text-align: center;
    padding: 0 0 10px;
    margin: 0;
  }
  @media (max-width: 760px) {
    .nb-stage {
      width: 320px;
      height: 320px;
    }
    .nb-brain {
      width: 200px;
      height: 200px;
    }
    .nb-halo1 {
      width: 250px;
      height: 250px;
    }
    .nb-halo2 {
      width: 320px;
      height: 320px;
    }
    .nb-onode {
      transform: rotate(var(--a)) translateY(-128px);
    }
  }

  /* ---------- HOMEPAGE PARTNERS ---------- */
  .ph {
    background: #fff;
    padding: 96px 0;
    border-top: 1px solid var(--line);
  }
  .ph-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 44px;
  }
  .ph-head h2 {
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 14px 0 12px;
  }
  .ph-head h2 em {
    font-style: italic;
    font-weight: 600;
    background: linear-gradient(135deg, var(--blue), #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: 0.14em;
    color: transparent;
  }
  .ph-head p {
    font-size: 17px;
    color: var(--ink-2);
    margin: 0;
  }
  .ph-partners {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 16px;
    max-width: 1040px;
    margin: 0 auto 14px;
  }
  .ph-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(160deg, #f6f9ff, #eef2fb);
    border: 1px solid var(--line);
    border-radius: var(--r-lg, 18px);
    padding: 32px 34px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
      border-color 0.2s ease;
  }
  .ph-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 54px -24px rgba(45, 111, 247, 0.3);
    border-color: rgba(45, 111, 247, 0.25);
  }
  .ph-hero-logo {
    display: flex;
    align-items: center;
    min-height: 46px;
  }
  .ph-hero-logo img {
    max-height: 46px;
    max-width: 230px;
    object-fit: contain;
  }
  .ph-hero-word {
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: clamp(32px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
  }
  .ph-hero-word span {
    color: #e02d3c;
  }
  .ph-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-2, #1e54d1);
    background: rgba(45, 111, 247, 0.1);
    padding: 4px 11px;
    border-radius: 100px;
    margin-bottom: 9px;
  }
  .ph-hero-body p {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
  }
  .ph-side {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
  }
  .ph-int {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1040px;
    margin: 0 auto;
  }
  .il-cell,
  .ph-side .il-cell {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 120px;
    box-shadow: var(--shadow-sm, 0 4px 10px -3px rgba(15, 23, 41, 0.06));
    transition: transform 0.18s ease, box-shadow 0.18s ease,
      border-color 0.18s ease;
  }
  .il-cell:hover {
    transform: translateY(-2px);
    border-color: rgba(45, 111, 247, 0.25);
    box-shadow: 0 14px 28px -12px rgba(15, 23, 41, 0.18);
  }
  a.il-cell {
    text-decoration: none;
    color: inherit;
  }
  .il-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
  }
  .il-mark img {
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: none;
    opacity: 1;
    transition: filter 0.18s ease, opacity 0.18s ease;
  }
  .il-word {
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink-2);
    letter-spacing: -0.01em;
  }
  .il-role {
    font-size: 11.5px;
    color: var(--ink-3);
  }
  .ph-div {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1040px;
    margin: 30px auto 16px;
  }
  .ph-div span {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
  }
  .ph-div::before,
  .ph-div::after {
    content: "";
    height: 1px;
    background: var(--line);
    flex: 1;
  }
  .ph-api {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    max-width: 1040px;
    margin: 16px auto 0;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 15px 18px;
  }
  .ph-api-ic {
    color: var(--blue);
    display: grid;
    place-items: center;
  }
  .ph-api-ic svg {
    width: 19px;
    height: 19px;
  }
  .ph-api span {
    font-size: 14.5px;
    color: var(--ink-2);
  }
  .ph-api strong {
    color: var(--ink);
    font-weight: 700;
  }
  @media (max-width: 860px) {
    .ph-partners {
      grid-template-columns: 1fr;
    }
    .ph-int {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  /* ---------- LOGOS: dark proof wall (Framer grid pattern) ---------- */
  .logos {
    background: #fff;
    padding: 96px 0 104px;
    position: relative;
    overflow-x: clip; /* edge-cell stat tooltips must not widen the page */
  }
  .lg-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #0a0d18;
    text-align: left;
    margin-bottom: 52px;
  }
  .lg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(10, 13, 24, 0.1);
    border-radius: 16px;
  }
  .lg-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    text-decoration: none;
    border-right: 1px solid rgba(10, 13, 24, 0.08);
    border-bottom: 1px solid rgba(10, 13, 24, 0.08);
    transition: background 0.18s ease;
  }
  .lg-cell:nth-child(4n) {
    border-right: 0;
  }
  .lg-cell:nth-child(n + 9) {
    border-bottom: 0;
  }
  .lg-cell:first-child {
    border-top-left-radius: 16px;
  }
  .lg-cell:nth-child(4) {
    border-top-right-radius: 16px;
  }
  .lg-cell:nth-child(9) {
    border-bottom-left-radius: 16px;
  }
  .lg-cell:nth-child(12) {
    border-bottom-right-radius: 16px;
  }
  .lg-cell:hover {
    background: rgba(10, 13, 24, 0.03);
  }
  .lg-cell img {
    max-height: 40px;
    max-width: 150px;
    width: auto;
    filter: brightness(0);
    opacity: 0.75;
    transition: opacity 0.18s ease;
  }
  .lg-cell:hover img {
    opacity: 1;
  }
  .lg-stat {
    /* bottom edge overlaps 16px into the cell, so the pointer never crosses a
       dead gap on the way up; pointer-events flip on while visible so hovering
       the card itself keeps it open */
    position: absolute;
    left: 50%;
    bottom: calc(100% - 16px);
    transform: translate(-50%, 6px);
    width: 224px;
    background: #0a0d18;
    color: #fff;
    border-radius: 8px;
    padding: 16px 18px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.22s ease,
      visibility 0s linear 0.2s;
    z-index: 6;
    pointer-events: none;
    text-align: left;
  }
  .lg-cell:hover .lg-stat {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
    pointer-events: auto;
  }
  .lg-stat strong {
    display: block;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 3px;
    color: #fff;
  }
  .lg-stat span {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
  }
  .lg-stat em {
    display: inline-block;
    margin-top: 10px;
    font-style: normal;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  @media (max-width: 900px) {
    .lg-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .lg-cell {
      height: 140px;
    }
    .lg-cell:nth-child(4n) {
      border-right: 1px solid rgba(10, 13, 24, 0.08);
    }
    .lg-cell:nth-child(2n) {
      border-right: 0;
    }
    .lg-cell:nth-child(n + 9) {
      border-bottom: 1px solid rgba(10, 13, 24, 0.08);
    }
    .lg-cell:nth-child(n + 11) {
      border-bottom: 0;
    }
  }

  /* ---------- SECTION TAG ---------- */
  .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 16px;
  }
  .section-tag::before {
    content: "→";
    color: var(--blue);
  }

  /* ---------- TAI, INTELLIGENCE LAYER (the centerpiece) ---------- */
  .tai-section {
    background: linear-gradient(
        180deg,
        rgba(5, 9, 19, 0.82) 0%,
        rgba(15, 23, 41, 0.92) 60%,
        rgba(5, 9, 19, 0.96) 100%
      ),
      var(--bg-twin-img) center/cover no-repeat fixed;
    color: #fff;
    padding: 80px 0 90px;
    overflow: hidden;
    position: relative;
  }
  .tai-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 18% 28%,
        rgba(45, 111, 247, 0.22),
        transparent 55%
      ),
      radial-gradient(
        circle at 82% 70%,
        rgba(122, 90, 248, 0.18),
        transparent 55%
      ),
      radial-gradient(
        ellipse 90% 60% at 50% 50%,
        transparent 0%,
        rgba(5, 9, 19, 0.55) 90%
      );
    pointer-events: none;
  }
  .tai-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(
      ellipse 80% 70% at 50% 50%,
      #000,
      transparent 85%
    );
    pointer-events: none;
  }
  .tai-inner {
    position: relative;
    z-index: 1;
  }

  .tai-head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 40px;
  }
  .tai-head .section-tag {
    color: var(--blue-light);
    justify-content: center;
    display: inline-flex;
  }
  .tai-head .section-tag::before {
    color: var(--blue-light);
  }
  .tai-head h2 {
    font-size: clamp(30px, 4.4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.02;
    margin-bottom: 14px;
  }
  .tai-head h2 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--blue-light), var(--purple));
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: 0.14em;
    -webkit-text-fill-color: transparent;
  }
  .tai-head p {
    font-size: 15.5px;
    line-height: 1.55;
    color: #d0d5dd;
    max-width: 640px;
    margin: 0 auto;
  }

  /* Stage: 2 columns, caps + brain (chat) */
  .tai-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.15fr);
    gap: 40px;
    align-items: stretch;
  }
  .tai-stage-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }
  .tai-cap {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    transition: all 0.25s;
  }
  .tai-cap:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(125, 169, 255, 0.4);
    transform: translateX(3px);
  }
  .tai-cap-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px -2px rgba(45, 111, 247, 0.4);
  }
  .tai-cap-icon svg {
    width: 18px;
    height: 18px;
    color: #fff;
    stroke-width: 1.8;
  }
  .tai-cap h4 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
    letter-spacing: -0.005em;
  }
  .tai-cap p {
    font-size: 12.5px;
    line-height: 1.45;
    color: #98a2b3;
  }

  /* RIGHT, the brain composition */
  .tai-brain {
    position: relative;
    padding: 18px 18px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .tai-counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    z-index: 3;
  }
  .tai-counter {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    backdrop-filter: blur(20px);
  }
  .tai-counter-num {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #fff, #7da9ff);
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: 0.14em;
    -webkit-text-fill-color: transparent;
  }
  .tai-counter-label {
    font-size: 9.5px;
    color: #98a2b3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Canvas, chat sits in the center, orbited by source nodes */
  .tai-canvas {
    position: relative;
    aspect-ratio: 6 / 5;
    min-height: 360px;
  }
  .tai-canvas svg.tai-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1;
  }

  /* ---------- TAI BRAIN IMAGE (replaces chat-as-brain canvas) ---------- */
  .tai-canvas-image {
    position: relative;
    aspect-ratio: 16 / 11;
    min-height: 380px;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    animation: taiBrainFloat 7s ease-in-out infinite alternate;
  }
  @keyframes taiBrainFloat {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-6px);
    }
  }
  .tai-brain-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 1;
  }

  /* Soft pulsing glow behind the brain */
  .tai-brain-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56%;
    height: 76%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(125, 169, 255, 0.35) 0%,
      rgba(122, 90, 248, 0.18) 45%,
      transparent 70%
    );
    filter: blur(12px);
    z-index: 2;
    mix-blend-mode: screen;
    animation: taiBrainBreath 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes taiBrainBreath {
    0%,
    100% {
      opacity: 0.55;
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.08);
    }
  }
  /* Sweeping scan-line across the image */
  .tai-brain-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 0%,
      transparent 38%,
      rgba(125, 169, 255, 0.1) 48%,
      rgba(125, 169, 255, 0.3) 50%,
      rgba(125, 169, 255, 0.1) 52%,
      transparent 62%,
      transparent 100%
    );
    background-size: 220% 100%;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    animation: taiBrainScan 6.5s linear infinite;
  }
  @keyframes taiBrainScan {
    0% {
      background-position: 120% 0;
    }
    100% {
      background-position: -120% 0;
    }
  }

  /* Synthetic data-feed pulses anchored to each peripheral pill in the artwork */
  .tai-feed {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #bddbff;
    box-shadow: 0 0 6px rgba(189, 219, 255, 0.95),
      0 0 14px rgba(125, 169, 255, 0.7), 0 0 26px rgba(82, 128, 255, 0.45);
    z-index: 4;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
  }
  /* Each pulse travels from its pill into the brain center.
     Coordinates approximate the eight pills in image (3).png:
     left side  → SOPs(top-left), P&IDs, Work Orders, Assets(bottom-left)
     right side → IoT, 3D Twin, Alerts, Analytics                          */
  .tai-feed-1 {
    animation: taiFeedL1 3.2s ease-in-out infinite;
    animation-delay: 0s;
  }
  .tai-feed-2 {
    animation: taiFeedL2 3.2s ease-in-out infinite;
    animation-delay: 0.4s;
  }
  .tai-feed-3 {
    animation: taiFeedL3 3.2s ease-in-out infinite;
    animation-delay: 0.8s;
  }
  .tai-feed-4 {
    animation: taiFeedL4 3.2s ease-in-out infinite;
    animation-delay: 1.2s;
  }
  .tai-feed-5 {
    animation: taiFeedR1 3.2s ease-in-out infinite;
    animation-delay: 0.2s;
  }
  .tai-feed-6 {
    animation: taiFeedR2 3.2s ease-in-out infinite;
    animation-delay: 0.6s;
  }
  .tai-feed-7 {
    animation: taiFeedR3 3.2s ease-in-out infinite;
    animation-delay: 1s;
  }
  .tai-feed-8 {
    animation: taiFeedR4 3.2s ease-in-out infinite;
    animation-delay: 1.4s;
  }
  /* Left side feeders: start near pill (left ~18%, varied tops) and end near
     brain center-left (~44%, 50%). Curving via two keyframes for organic feel. */
  @keyframes taiFeedL1 {
    0% {
      left: 19%;
      top: 23%;
      opacity: 0;
      transform: scale(0.6);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 44%;
      top: 50%;
      opacity: 0;
      transform: scale(0.5);
    }
  }
  @keyframes taiFeedL2 {
    0% {
      left: 18%;
      top: 38%;
      opacity: 0;
      transform: scale(0.6);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 44%;
      top: 50%;
      opacity: 0;
      transform: scale(0.5);
    }
  }
  @keyframes taiFeedL3 {
    0% {
      left: 18%;
      top: 54%;
      opacity: 0;
      transform: scale(0.6);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 44%;
      top: 52%;
      opacity: 0;
      transform: scale(0.5);
    }
  }
  @keyframes taiFeedL4 {
    0% {
      left: 19%;
      top: 70%;
      opacity: 0;
      transform: scale(0.6);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 44%;
      top: 56%;
      opacity: 0;
      transform: scale(0.5);
    }
  }
  /* Right side feeders: mirror */
  @keyframes taiFeedR1 {
    0% {
      left: 81%;
      top: 23%;
      opacity: 0;
      transform: scale(0.6);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 56%;
      top: 50%;
      opacity: 0;
      transform: scale(0.5);
    }
  }
  @keyframes taiFeedR2 {
    0% {
      left: 82%;
      top: 38%;
      opacity: 0;
      transform: scale(0.6);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 56%;
      top: 50%;
      opacity: 0;
      transform: scale(0.5);
    }
  }
  @keyframes taiFeedR3 {
    0% {
      left: 82%;
      top: 54%;
      opacity: 0;
      transform: scale(0.6);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 56%;
      top: 52%;
      opacity: 0;
      transform: scale(0.5);
    }
  }
  @keyframes taiFeedR4 {
    0% {
      left: 81%;
      top: 70%;
      opacity: 0;
      transform: scale(0.6);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 56%;
      top: 56%;
      opacity: 0;
      transform: scale(0.5);
    }
  }
  .tai-core-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 70%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(125, 169, 255, 0.22) 0%,
      rgba(122, 90, 248, 0.08) 50%,
      transparent 70%
    );
    z-index: 1;
    animation: taiAura 5s ease-in-out infinite;
    filter: blur(8px);
    pointer-events: none;
  }
  @keyframes taiAura {
    0%,
    100% {
      opacity: 0.65;
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.06);
    }
  }

  /* Orbiting source nodes */
  .tai-orbit {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 6px 16px -6px rgba(15, 23, 41, 0.6);
    animation: taiOrbitFloat 6s ease-in-out infinite alternate;
  }
  .tai-orbit svg {
    width: 14px;
    height: 14px;
    color: var(--blue-light);
    flex: none;
  }
  .tai-orbit i {
    font-style: normal;
    color: var(--blue-light);
    font-size: 10px;
    font-weight: 700;
    margin-left: 2px;
  }
  @keyframes taiOrbitFloat {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-4px);
    }
  }
  .tai-orbit-1 {
    top: 6%;
    left: 4%;
    animation-delay: 0s;
  }
  .tai-orbit-2 {
    top: 6%;
    right: 4%;
    animation-delay: 1.5s;
  }
  .tai-orbit-3 {
    top: 45%;
    left: -2%;
    animation-delay: 0.8s;
  }
  .tai-orbit-4 {
    top: 45%;
    right: -2%;
    animation-delay: 2.2s;
  }
  .tai-orbit-5 {
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 3s;
  }
  .tai-orbit-5 {
    /* center bottom anchor, override transform-origin */
    animation-name: taiOrbitFloatBottom;
  }
  @keyframes taiOrbitFloatBottom {
    0% {
      transform: translate(-50%, 0);
    }
    100% {
      transform: translate(-50%, -4px);
    }
  }

  /* Chat panel, the brain */
  .tai-chat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68%;
    max-width: 420px;
    background: #fff;
    color: var(--ink);
    border-radius: 14px;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 5;
    overflow: hidden;
  }
  .tai-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  .tai-chat-menu {
    width: 18px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .tai-chat-menu span {
    height: 1.6px;
    background: var(--ink-3);
    border-radius: 1px;
  }
  .tai-chat-title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
  }
  .tai-chat-x {
    font-size: 18px;
    color: var(--ink-3);
    line-height: 1;
  }
  .tai-chat-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
  }
  .tai-chat-prompt {
    align-self: flex-end;
    padding: 8px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-2);
    animation: taiChatIn 0.4s ease 0.4s both;
  }
  .tai-chat-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    animation: taiChatIn 0.4s ease 1s both;
  }
  .tai-chat-row .tai-chat-avatar {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
  }
  .tai-chat-msg {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.45;
    flex: 1;
  }
  .tai-chat-msg-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
  }
  .tai-chat-tickets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
  }
  .tai-chat-ticket {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--ink);
    opacity: 0;
    animation: taiChatIn 0.4s ease forwards;
  }
  .tai-chat-ticket:nth-of-type(1) {
    animation-delay: 1.6s;
  }
  .tai-chat-ticket:nth-of-type(2) {
    animation-delay: 2s;
  }
  .tai-chat-ticket-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #fee2e2;
    color: #b91c1c;
    display: grid;
    place-items: center;
    flex: none;
  }
  .tai-chat-ticket:nth-of-type(2) .tai-chat-ticket-icon {
    background: var(--blue-faint);
    color: var(--blue);
  }
  .tai-chat-ticket-icon svg {
    width: 12px;
    height: 12px;
  }
  .tai-chat-ticket-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .tai-chat-ticket-body strong {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
  }
  .tai-chat-ticket-body span {
    font-size: 10px;
    color: var(--ink-3);
  }
  .tai-chat-ticket-meta {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ink-3);
    background: #fff;
    border: 1px solid var(--line);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
  }
  .tai-chat-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: #fff;
  }
  .tai-chat-input-plus {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    flex: none;
  }
  .tai-chat-input-text {
    flex: 1;
    font-size: 12px;
    color: var(--ink-3);
  }
  .tai-chat-input-send {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
  }
  .tai-chat-input-send svg {
    width: 12px;
    height: 12px;
  }
  .tai-chat-disclaimer {
    text-align: center;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 6px;
  }
  @keyframes taiChatIn {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Override mono-font defaults inside this section */
  .tai-section [font-family],
  .tai-section text {
    font-family: "Codec Pro", "Inter", sans-serif !important;
  }

  @media (max-width: 960px) {
    .tai-stage {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .tai-canvas {
      min-height: 320px;
    }
  }
  @media (max-width: 640px) {
    .tai-orbit {
      font-size: 9.5px;
      padding: 5px 8px;
    }
    .tai-orbit svg {
      width: 11px;
      height: 11px;
    }
    .tai-chat {
      width: 88%;
    }
  }

  /* ---------- SECTION SHELL ---------- */
  section.std {
    padding: 120px 0;
  }
  .section-head {
    max-width: 760px;
    margin: 0 auto 64px;
    text-align: center;
  }
  .section-head h2 {
    font-size: clamp(32px, 4.2vw, 56px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.04;
    margin-bottom: 18px;
    color: var(--ink);
  }
  .section-head p {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
  }
  .section-head .section-tag {
    justify-content: center;
    display: inline-flex;
  }

  /* ---------- TABBED PRODUCT SHOWCASE (MaintainX-style) ---------- */
  .showcase {
    background: var(--bg-2);
    padding: 120px 0;
  }
  .showcase-tabs {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 2%,
      #000 98%,
      transparent
    );
  }
  .showcase-tabs::-webkit-scrollbar {
    display: none;
  }
  .showcase-tab {
    flex: none;
  }
  @media (min-width: 1200px) {
    .showcase-tabs {
      justify-content: center;
      overflow-x: visible;
      mask-image: none;
    }
  }
  .showcase-tab {
    background: transparent;
    border: none;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .showcase-tab:hover {
    color: var(--ink);
  }
  .showcase-tab.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
  }
  .showcase-panels {
    position: relative;
  }
  .showcase-panel {
    display: none;
    animation: fadePanel 0.4s ease;
  }
  .showcase-panel.active {
    display: grid;
  }
  @keyframes fadePanel {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .showcase-panel {
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center;
  }
  .showcase-content h3 {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 20px;
  }
  .showcase-content p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    margin-bottom: 24px;
  }
  .showcase-content .badge {
    display: inline-block;
    background: var(--blue-faint);
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 100px;
    margin-bottom: 16px;
  }
  .showcase-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 600;
  }
  .showcase-image {
    background: linear-gradient(135deg, var(--navy-deep), var(--navy-soft));
    border-radius: var(--r-xl);
    padding: 28px;
    border: 1px solid var(--navy-soft);
    position: relative;
    overflow: hidden;
  }
  .showcase-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at 0% 0%,
      rgba(45, 111, 247, 0.2),
      transparent 50%
    );
    pointer-events: none;
  }
  .showcase-image img {
    width: 100%;
    border-radius: var(--r-md);
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
  }
  /* Custom showcase visual for AR */
  .showcase-ar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    position: relative;
    z-index: 1;
  }
  .showcase-ar-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    color: #fff;
  }
  .showcase-ar-card.featured {
    background: rgba(45, 111, 247, 0.12);
    border-color: rgba(45, 111, 247, 0.4);
    position: relative;
  }
  .showcase-ar-card.featured::after {
    content: "Unique";
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--blue);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    border-radius: 4px;
    text-transform: uppercase;
  }
  .showcase-ar-card svg {
    width: 32px;
    height: 32px;
    color: var(--blue-light);
    margin: 0 auto 12px;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .showcase-ar-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .showcase-ar-card p {
    font-size: 12px;
    color: #98a2b3;
    line-height: 1.5;
    margin: 0;
  }
  /* Custom showcase visual for P&ID */
  .showcase-pid {
    color: #fff;
    position: relative;
    z-index: 1;
  }
  .showcase-pid-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-family: "JetBrains Mono", monospace;
    color: #98a2b3;
    margin-bottom: 20px;
  }
  .pid-live {
    color: var(--blue-light);
    animation: dotPulse 2s infinite;
  }
  .showcase-pid-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
  }
  .pid-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d0d5dd;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  .pid-row .check {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: var(--green);
    display: grid;
    place-items: center;
  }
  .pid-row .check svg {
    width: 10px;
    height: 10px;
  }
  .pid-row .num {
    color: var(--blue-light);
    margin-left: auto;
    font-weight: 600;
  }
  .pid-progress-bar {
    margin-top: 16px;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
  }
  .pid-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--purple));
    width: 100%;
    border-radius: 3px;
    animation: progressFill 3s ease-in-out infinite;
  }
  @keyframes progressFill {
    0% {
      width: 30%;
    }
    100% {
      width: 100%;
    }
  }

  /* IoT showcase visual */
  .showcase-iot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
    color: #fff;
  }
  .iot-row {
    display: grid;
    grid-template-columns: 1.2fr 2fr auto;
    gap: 20px;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s;
  }
  .iot-row.alert {
    background: rgba(240, 68, 56, 0.08);
    border-color: rgba(240, 68, 56, 0.3);
  }
  .iot-asset-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
  }
  .iot-asset-tag {
    font-size: 10px;
    font-family: "JetBrains Mono", monospace;
    color: #98a2b3;
    letter-spacing: 0.04em;
  }
  .iot-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .iot-metric-label {
    font-size: 10px;
    color: #98a2b3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
  }
  .iot-metric-val {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    font-family: "JetBrains Mono", monospace;
  }
  .iot-metric-val span {
    font-size: 11px;
    color: #98a2b3;
    font-weight: 400;
    margin-left: 2px;
  }
  .iot-metric-val.alert-val {
    color: #f97066;
  }
  .iot-status {
    font-size: 16px;
    line-height: 1;
  }
  .iot-status.ok {
    color: var(--green);
    animation: dotPulse 2s infinite;
  }
  .iot-status.alert {
    color: #f04438;
    animation: dotPulse 1s infinite;
  }

  /* ---------- MODULES (Connected Worker stack) ---------- */
  .modules {
    background: radial-gradient(
        ellipse 65% 50% at 50% 0%,
        rgba(45, 111, 247, 0.06),
        transparent 70%
      ),
      radial-gradient(
        ellipse 40% 60% at 100% 100%,
        rgba(122, 90, 248, 0.04),
        transparent 70%
      ),
      linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-pale) 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  .modules::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  }

  /* Stack visualization */
  .mod-stack-viz {
    max-width: 720px;
    margin: 0 auto 64px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mod-stack-layer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    border-radius: var(--r-lg);
    border: 1px solid;
    font-size: 14px;
    transition: transform 0.2s ease;
  }
  .mod-stack-layer:hover {
    transform: translateY(-1px);
  }
  .mod-stack-pill {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.6);
    flex: none;
  }
  .mod-stack-name {
    font-weight: 600;
    color: var(--ink);
    flex: none;
  }
  .mod-stack-where {
    color: var(--ink-3);
    font-size: 13px;
    margin-left: auto;
    text-align: right;
  }
  .mod-stack-foundation {
    background: linear-gradient(90deg, #f8fafc 0%, #eef2f7 100%);
    border-color: #d6dee8;
  }
  .mod-stack-foundation .mod-stack-pill {
    color: #475569;
    background: #fff;
    border: 1px solid #d6dee8;
  }
  .mod-stack-ops {
    background: linear-gradient(90deg, #f0f4ff 0%, #e5ecff 100%);
    border-color: #c9d6ff;
    margin: 0 24px;
  }
  .mod-stack-ops .mod-stack-pill {
    color: var(--blue);
    background: #fff;
    border: 1px solid #c9d6ff;
  }
  .mod-stack-iot {
    background: linear-gradient(90deg, #ecfeff 0%, #cffafe 100%);
    border-color: #a5f3fc;
    margin: 0 48px;
  }
  .mod-stack-iot .mod-stack-pill {
    color: #0891b2;
    background: #fff;
    border: 1px solid #a5f3fc;
  }
  .mod-stack-ar {
    background: linear-gradient(90deg, #1e1b4b 0%, #312e81 100%);
    border-color: #4338ca;
    color: #fff;
    margin: 0 72px;
    box-shadow: 0 12px 32px -12px rgba(67, 56, 202, 0.4);
  }
  .mod-stack-ar .mod-stack-name {
    color: #fff;
  }
  .mod-stack-ar .mod-stack-where {
    color: rgba(255, 255, 255, 0.65);
  }
  .mod-stack-ar .mod-stack-pill {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* Tabs */
  .mod-tabs-wrap {
    display: contents;
  }
  .mod-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  .mod-tab {
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-3);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
  .mod-tab:hover {
    color: var(--ink);
    background: var(--bg-2);
  }
  .mod-tab.active {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 41, 0.25);
  }
  .mod-tab-num {
    font-family: "Codec Pro", sans-serif;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.65;
  }
  .mod-tab.active .mod-tab-num {
    opacity: 1;
    color: var(--blue-glow);
  }
  .mod-tab-name {
    font-weight: 600;
  }

  /* Panels */
  .mod-panels {
    position: relative;
  }
  .mod-panel {
    display: none;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 40px;
    box-shadow: var(--shadow-sm);
    animation: modFade 0.4s ease;
  }
  .mod-panel.active {
    display: grid;
  }
  @keyframes modFade {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Visual side */
  .mod-visual {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--ink);
    box-shadow: 0 16px 48px -16px rgba(15, 23, 41, 0.25);
  }
  .mod-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 6s ease;
  }
  .mod-visual:hover img {
    transform: scale(1.04);
  }
  .mod-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 50%,
      rgba(15, 23, 41, 0.55) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* App-frame variant, shows real product UI with browser chrome */
  .mod-visual-ui {
    aspect-ratio: 16 / 10;
    background: var(--bg-3);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px -16px rgba(15, 23, 41, 0.28),
      0 2px 8px -2px rgba(15, 23, 41, 0.08);
    border: 1px solid var(--line);
  }
  .mod-visual-ui::before {
    display: none;
  }
  .mod-ui-chrome {
    flex: none;
    height: 32px;
    background: #f2f4f7;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 6px;
  }
  .mod-ui-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0d5dd;
    flex: none;
  }
  .mod-ui-dot:nth-child(1) {
    background: #ff5f57;
  }
  .mod-ui-dot:nth-child(2) {
    background: #febc2e;
  }
  .mod-ui-dot:nth-child(3) {
    background: #28c840;
  }
  .mod-ui-url {
    margin-left: 12px;
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: 11px;
    color: var(--ink-2);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 3px 12px;
    flex: 1;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mod-ui-path {
    color: var(--ink-4);
  }
  .mod-ui-screen {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #fff;
  }
  .mod-ui-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 6s ease;
  }
  .mod-visual-ui:hover .mod-ui-screen img {
    transform: scale(1.02);
  }
  .mod-ui-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 55%,
      rgba(15, 23, 41, 0.45) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
  .mod-ui-live {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: rgba(15, 23, 41, 0.78);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.005em;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mod-ui-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.25);
    animation: modPulse 2s infinite;
  }

  .mod-visual-overlay {
    position: absolute;
    inset: auto 20px 20px 20px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .mod-visual-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
  }
  .mod-visual-chip-amber {
    background: rgba(254, 243, 199, 0.95);
    color: #92400e;
  }
  .mod-visual-chip-blue {
    background: rgba(219, 234, 254, 0.95);
    color: #1e40af;
  }
  .mod-visual-chip-purple {
    background: rgba(67, 56, 202, 0.95);
    color: #fff;
  }
  .mod-visual-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.2);
    animation: modPulse 2s infinite;
  }
  .mod-visual-dot-amber {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  }
  .mod-visual-dot-blue {
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  }
  .mod-visual-dot-purple {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
  }
  @keyframes modPulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.7;
    }
  }
  .mod-visual-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .mod-tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink-2);
    backdrop-filter: blur(8px);
    white-space: nowrap;
  }
  .mod-tag-amber {
    background: rgba(254, 243, 199, 0.95);
    color: #92400e;
  }
  .mod-tag-red {
    background: rgba(254, 226, 226, 0.95);
    color: #991b1b;
  }
  .mod-tag-dark {
    background: rgba(15, 23, 41, 0.85);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Content side */
  .mod-content {
    min-width: 0;
  }
  .mod-content-eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--blue);
    margin-bottom: 16px;
  }
  .mod-content h3 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 16px;
  }
  .mod-content > p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 520px;
  }

  /* Highlights, 3 short feature blocks */
  .mod-highlights {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
  .mod-highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .mod-highlight-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--blue-faint);
    color: var(--blue);
    display: grid;
    place-items: center;
    flex: none;
  }
  .mod-highlight-icon svg {
    width: 18px;
    height: 18px;
  }
  .mod-highlight h4 {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.005em;
  }
  .mod-highlight p {
    font-size: 13.5px;
    color: var(--ink-3);
    line-height: 1.55;
  }

  /* ---------- KNOWLEDGE MODULE: LIVE UI MOCKUP ---------- */
  .kn-screen {
    background: #fff;
  }
  .kn-screen::before {
    display: none;
  }
  .kn-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 41, 0.18) 0%,
        rgba(15, 23, 41, 0.05) 35%,
        rgba(15, 23, 41, 0.3) 100%
      ),
      url("/assets/cw/9dc99d4a3200e9ed.webp") center/cover no-repeat;
    filter: saturate(0.95);
  }
  .kn-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      120% 80% at 50% 35%,
      rgba(15, 23, 41, 0) 0%,
      rgba(15, 23, 41, 0.18) 100%
    );
    pointer-events: none;
  }

  /* Left sidebar */
  .kn-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 7px;
    z-index: 3;
  }
  .kn-side-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--ink-3);
  }
  .kn-side-icon svg {
    width: 14px;
    height: 14px;
  }
  .kn-side-icon.active {
    background: var(--blue-faint);
    color: var(--blue);
  }

  /* Equipment drawer (top-left) */
  .kn-drawer {
    position: absolute;
    top: 12px;
    left: 48px;
    width: 30%;
    min-width: 168px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 26px -8px rgba(15, 23, 41, 0.2);
    padding: 10px 12px;
    z-index: 4;
    animation: knDrawerIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
  }
  @keyframes knDrawerIn {
    from {
      opacity: 0;
      transform: translateX(-14px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .kn-drawer-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }
  .kn-drawer-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
  }
  .kn-drawer-tab {
    font-size: 8.5px;
    font-weight: 600;
    color: var(--ink-3);
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--bg-2);
    display: inline-flex;
    gap: 4px;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .kn-drawer-tab i {
    font-style: normal;
    background: var(--ink);
    color: #fff;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 7.5px;
  }
  .kn-drawer-tab.active {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
  }
  .kn-drawer-doc {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .kn-drawer-doc-head {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
  }
  .kn-drawer-doc-line {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-3);
    width: 100%;
  }
  .kn-drawer-doc-line.w80 {
    width: 80%;
  }
  .kn-drawer-doc-line.w65 {
    width: 65%;
  }
  .kn-drawer-doc-line.w90 {
    width: 90%;
  }
  .kn-drawer-doc-line.w55 {
    width: 55%;
  }

  /* Floating P&ID with pulsing tag pin */
  .kn-pnid {
    position: absolute;
    top: 38%;
    left: 33%;
    width: 26%;
    aspect-ratio: 3/2;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 14px 34px -10px rgba(15, 23, 41, 0.3);
    z-index: 5;
    color: var(--ink);
    animation: knFloat 6s ease-in-out infinite,
      knPnidIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
  }
  @keyframes knFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-6px);
    }
  }
  @keyframes knPnidIn {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.94);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .kn-pnid-svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .kn-pnid-pin {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4338ca;
    box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.22);
    animation: knPulse 2.2s ease-out infinite;
  }
  @keyframes knPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(67, 56, 202, 0.55);
    }
    70% {
      box-shadow: 0 0 0 12px rgba(67, 56, 202, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(67, 56, 202, 0);
    }
  }
  .kn-link-line {
    position: absolute;
    top: 62%;
    left: 46%;
    width: 1px;
    height: 12%;
    background: linear-gradient(
      180deg,
      rgba(67, 56, 202, 0.6),
      rgba(67, 56, 202, 0)
    );
    z-index: 3;
  }

  /* ISA tag chips floating on the scene */
  .kn-isa {
    position: absolute;
    z-index: 4;
    background: rgba(15, 23, 41, 0.86);
    color: #fff;
    font-family: "JetBrains Mono", monospace;
    font-size: 8.5px;
    font-weight: 500;
    padding: 4px 7px;
    border-radius: 4px;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    line-height: 1;
  }
  .kn-isa strong {
    color: #93c5fd;
    font-weight: 700;
  }
  .kn-isa-1 {
    top: 74%;
    left: 42%;
    animation: knFade 0.5s ease 0.6s both;
  }
  .kn-isa-2 {
    top: 56%;
    left: 68%;
    animation: knFade 0.5s ease 0.85s both;
  }
  @keyframes knFade {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Flows progress bar (bottom-center) */
  .kn-flow-bar {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px;
    background: rgba(15, 23, 41, 0.92);
    color: rgba(255, 255, 255, 0.92);
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px -8px rgba(15, 23, 41, 0.45);
    font-size: 10.5px;
    font-weight: 600;
    z-index: 6;
    white-space: nowrap;
    animation: knFlowIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both;
  }
  @keyframes knFlowIn {
    from {
      opacity: 0;
      transform: translate(-50%, 10px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
  .kn-flow-icon {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    background: var(--blue);
    color: #fff;
    border-radius: 50%;
  }
  .kn-flow-icon svg {
    width: 9px;
    height: 9px;
  }
  .kn-flow-step {
    color: rgba(255, 255, 255, 0.55);
    font-size: 9.5px;
  }
  .kn-flow-progress {
    width: 64px;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    overflow: hidden;
  }
  .kn-flow-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--blue-glow));
    width: 66%;
    animation: knFlowFill 5s ease-in-out infinite;
  }
  @keyframes knFlowFill {
    0% {
      width: 33%;
    }
    50% {
      width: 66%;
    }
    100% {
      width: 33%;
    }
  }

  /* TAI chat panel (top-right) */
  .kn-tai {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34%;
    min-width: 178px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 32px -10px rgba(15, 23, 41, 0.2);
    padding: 10px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 7px;
    animation: knTaiIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;
  }
  @keyframes knTaiIn {
    from {
      opacity: 0;
      transform: translateX(14px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .kn-tai-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .kn-tai-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700;
  }
  .kn-tai-bubble {
    font-size: 9.5px;
    line-height: 1.4;
    padding: 6px 9px;
    border-radius: 8px;
    max-width: 92%;
  }
  .kn-tai-user {
    background: var(--blue-faint);
    color: #1e40af;
    align-self: flex-end;
    border-bottom-right-radius: 3px;
    animation: knBubbleIn 0.35s ease 0.9s both;
  }
  .kn-tai-ai {
    background: var(--bg-2);
    color: var(--ink-2);
    align-self: flex-start;
    border-bottom-left-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: knBubbleIn 0.35s ease 1.7s both;
  }
  @keyframes knBubbleIn {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .kn-tai-dots {
    display: inline-flex;
    gap: 3px;
  }
  .kn-tai-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-3);
    animation: knDot 1.2s infinite ease-in-out;
  }
  .kn-tai-dots span:nth-child(2) {
    animation-delay: 0.15s;
  }
  .kn-tai-dots span:nth-child(3) {
    animation-delay: 0.3s;
  }
  @keyframes knDot {
    0%,
    80%,
    100% {
      transform: scale(0.6);
      opacity: 0.4;
    }
    40% {
      transform: scale(1);
      opacity: 1;
    }
  }
  .kn-tai-text {
    font-size: 9.5px;
    color: var(--ink-2);
  }
  .kn-tai-text em {
    color: var(--blue);
    font-style: normal;
    font-weight: 600;
  }

  @media (max-width: 720px) {
    .kn-sidebar {
      width: 30px;
    }
    .kn-side-icon {
      width: 22px;
      height: 22px;
    }
    .kn-drawer {
      left: 38px;
      min-width: 140px;
      padding: 8px 9px;
    }
    .kn-tai {
      min-width: 150px;
      padding: 8px;
    }
    .kn-pnid {
      width: 32%;
    }
  }
  /* ---------- MAINTENANCE / IoT / AR, SCOPED BACKDROPS ---------- */
  .mt-bg {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 41, 0.22) 0%,
        rgba(15, 23, 41, 0.08) 35%,
        rgba(15, 23, 41, 0.45) 100%
      ),
      url("/assets/cw/96c8c29211a1e2a2.webp") center/cover no-repeat !important;
  }
  .io-bg {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 41, 0.3) 0%,
        rgba(15, 23, 41, 0.1) 35%,
        rgba(15, 23, 41, 0.55) 100%
      ),
      url("/assets/cw/b0a38c9ff7c48287.webp") center/cover no-repeat !important;
  }
  .ar-bg {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 41, 0.45) 0%,
        rgba(15, 23, 41, 0.25) 40%,
        rgba(15, 23, 41, 0.6) 100%
      ),
      url("/assets/cw/e08ddc23bc0e4b54.jpg") center/cover no-repeat !important;
    filter: saturate(0.92);
  }

  /* ---------- MAINTENANCE ---------- */
  .mt-wo {
    position: absolute;
    top: 12px;
    left: 48px;
    width: 36%;
    min-width: 184px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 10px 26px -8px rgba(15, 23, 41, 0.2);
    z-index: 4;
    animation: knDrawerIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
  }
  .mt-wo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .mt-wo-tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 700;
    color: var(--ink-3);
  }
  .mt-wo-priority {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .mt-wo-priority span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
    animation: knPulse 1.6s ease-out infinite;
  }
  .mt-wo-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .mt-wo-sub {
    font-size: 9.5px;
    color: var(--ink-3);
    margin-bottom: 8px;
  }
  .mt-wo-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--line);
  }
  .mt-wo-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e0e7ff;
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 8.5px;
    font-weight: 700;
  }
  .mt-wo-due {
    font-size: 9px;
    color: var(--ink-2);
  }

  .mt-sched {
    position: absolute;
    bottom: 14px;
    left: 48px;
    width: 36%;
    min-width: 184px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 10px 24px -8px rgba(15, 23, 41, 0.2);
    z-index: 5;
    animation: knDrawerIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both;
  }
  .mt-sched-head {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    font-size: 8px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .mt-sched-rows {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .mt-sched-pill {
    height: 14px;
    border-radius: 3px;
    border-left: 2px solid;
    background: var(--bg-2);
  }
  .mt-pill-red {
    border-color: #dc2626;
    background: #fee2e2;
  }
  .mt-pill-amber {
    border-color: #f59e0b;
    background: #fef3c7;
  }
  .mt-pill-blue {
    border-color: var(--blue);
    background: var(--blue-faint);
  }
  .mt-pill-green {
    border-color: #16a34a;
    background: #dcfce7;
  }
  .mt-pill-new {
    animation: mtSlideIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1.4s both;
  }
  @keyframes mtSlideIn {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mt-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38%;
    min-width: 184px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 11px;
    box-shadow: 0 12px 32px -10px rgba(15, 23, 41, 0.22);
    z-index: 6;
    animation: knTaiIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;
  }
  .mt-check-head {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .mt-check-head i {
    font-style: normal;
    background: var(--blue-faint);
    color: var(--blue);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 8.5px;
    font-weight: 700;
    margin-left: auto;
  }
  .mt-check-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 9.5px;
    color: var(--ink-2);
    padding: 3px 0;
    line-height: 1.2;
  }
  .mt-check-box {
    width: 12px;
    height: 12px;
    border: 1.4px solid var(--ink-4);
    border-radius: 3px;
    flex: none;
    display: grid;
    place-items: center;
    color: #fff;
  }
  .mt-check-box svg {
    width: 9px;
    height: 9px;
    opacity: 0;
  }
  .mt-check-row.done .mt-check-box {
    background: var(--blue);
    border-color: var(--blue);
  }
  .mt-check-row.done .mt-check-box svg {
    opacity: 1;
  }
  .mt-check-row.done {
    color: var(--ink-3);
    text-decoration: line-through;
    text-decoration-color: var(--ink-4);
  }
  .mt-check-row.ticking .mt-check-box {
    animation: mtTick 4s ease-in-out infinite;
  }
  .mt-check-row.ticking .mt-check-box svg {
    animation: mtTickSvg 4s ease-in-out infinite;
  }
  @keyframes mtTick {
    0%,
    40% {
      background: #fff;
      border-color: var(--ink-4);
    }
    50%,
    100% {
      background: var(--blue);
      border-color: var(--blue);
    }
  }
  @keyframes mtTickSvg {
    0%,
    40% {
      opacity: 0;
      transform: scale(0.5);
    }
    50%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .mt-pin {
    position: absolute;
    top: 56%;
    left: 56%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.3),
      0 0 0 8px rgba(220, 38, 38, 0.15);
    animation: knPulse 1.8s ease-out infinite;
    z-index: 4;
  }
  .mt-isa {
    top: 64%;
    left: 50%;
  }

  /* ---------- IOT ---------- */
  .io-asset {
    position: absolute;
    top: 12px;
    left: 48px;
    width: 36%;
    min-width: 188px;
    background: rgba(15, 23, 41, 0.88);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 12px 32px -10px rgba(15, 23, 41, 0.45);
    z-index: 5;
    animation: knDrawerIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
  }
  .io-asset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
  }
  .io-asset-tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 700;
    color: #93c5fd;
  }
  .io-asset-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 8.5px;
    font-weight: 700;
    color: #bbf7d0;
    letter-spacing: 0.05em;
  }
  .io-asset-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
    animation: knPulse 1.5s ease-out infinite;
  }
  .io-asset-title {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
  }
  .io-asset-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .io-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.6);
  }
  .io-val {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    animation: ioFlicker 3.4s ease-in-out infinite;
  }
  .io-val-warn {
    color: #fca5a5;
  }
  .io-val:nth-of-type(2) {
    animation-delay: 0.8s;
  }
  .io-val:nth-of-type(3) {
    animation-delay: 1.6s;
  }
  @keyframes ioFlicker {
    0%,
    45%,
    55%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.55;
    }
  }

  .io-chart {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36%;
    min-width: 188px;
    background: rgba(15, 23, 41, 0.92);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 12px 32px -10px rgba(15, 23, 41, 0.45);
    z-index: 5;
    animation: knTaiIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
  }
  .io-chart-head {
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: 0.03em;
  }
  .io-chart-svg {
    width: 100%;
    height: 64px;
    display: block;
  }
  .io-chart-line {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: ioDraw 3s ease-out 0.6s forwards;
  }
  @keyframes ioDraw {
    to {
      stroke-dashoffset: 0;
    }
  }
  .io-chart-cursor {
    animation: ioCursor 2s ease-in-out 3.4s infinite;
  }
  @keyframes ioCursor {
    0%,
    100% {
      r: 3;
    }
    50% {
      r: 4.5;
    }
  }
  .io-chart-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    font-size: 9.5px;
  }
  .io-chart-foot span:first-child {
    font-family: "JetBrains Mono", monospace;
    color: #fca5a5;
    font-weight: 600;
  }
  .io-chart-delta {
    font-size: 9px;
    color: #fca5a5;
    font-weight: 700;
  }

  .io-alert {
    position: absolute;
    top: 56%;
    left: 38%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 8px 20px -6px rgba(220, 38, 38, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 4;
    animation: knFade 0.5s ease 1s both;
  }
  .io-alert-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.32);
    animation: knPulse 1.2s ease-out infinite;
  }

  .io-stream {
    position: absolute;
    bottom: 18%;
    left: 14%;
    right: 22%;
    height: 2px;
    z-index: 3;
    overflow: visible;
  }
  .io-stream i {
    position: absolute;
    top: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-glow);
    box-shadow: 0 0 12px rgba(82, 128, 255, 0.7);
    animation: ioFlow 3.2s linear infinite;
  }
  .io-stream i:nth-child(2) {
    animation-delay: 0.8s;
  }
  .io-stream i:nth-child(3) {
    animation-delay: 1.6s;
  }
  .io-stream i:nth-child(4) {
    animation-delay: 2.4s;
  }
  @keyframes ioFlow {
    0% {
      left: 0;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      left: 100%;
      opacity: 0;
    }
  }
  .io-isa {
    bottom: 12%;
    left: 56%;
    top: auto;
  }

  /* ---------- AR ---------- */
  .ar-screen {
    background: #000;
  }
  .ar-status {
    position: absolute;
    top: 14px;
    left: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(67, 56, 202, 0.85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r-pill);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    z-index: 5;
    backdrop-filter: blur(8px);
    animation: knFade 0.5s ease 0.15s both;
  }
  .ar-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #bbf7d0;
    box-shadow: 0 0 0 3px rgba(187, 247, 208, 0.32);
    animation: knPulse 1.4s ease-out infinite;
  }

  .ar-target {
    position: absolute;
    top: 32%;
    left: 38%;
    width: 110px;
    height: 110px;
    z-index: 4;
    animation: arTargetIn 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
  }
  @keyframes arTargetIn {
    from {
      opacity: 0;
      transform: scale(0.6);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .ar-target-frame {
    position: absolute;
    inset: 0;
    border: 1.5px solid #93c5fd;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.2),
      0 0 20px rgba(147, 197, 253, 0.3);
    animation: arBreath 2.4s ease-in-out infinite;
  }
  .ar-target-frame::before,
  .ar-target-frame::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2.5px solid #fff;
  }
  .ar-target-frame::before {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
  }
  .ar-target-frame::after {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
  }
  @keyframes arBreath {
    0%,
    100% {
      transform: scale(1);
      box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.2),
        0 0 20px rgba(147, 197, 253, 0.3);
    }
    50% {
      transform: scale(1.04);
      box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.45),
        0 0 32px rgba(147, 197, 253, 0.5);
    }
  }
  .ar-target-line {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, #93c5fd, rgba(147, 197, 253, 0));
  }
  .ar-target-card {
    position: absolute;
    top: -8px;
    left: calc(100% + 56px);
    background: rgba(15, 23, 41, 0.92);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 9.5px;
    line-height: 1.35;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 1px;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4);
  }
  .ar-target-card strong {
    color: #93c5fd;
    font-size: 10.5px;
    font-weight: 700;
  }
  .ar-target-card .ar-target-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 8.5px;
    margin-top: 2px;
  }

  .ar-beam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10%;
    width: 12%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(147, 197, 253, 0.1) 50%,
      transparent
    );
    z-index: 3;
    animation: arBeam 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes arBeam {
    0%,
    100% {
      left: -15%;
      opacity: 0;
    }
    20% {
      opacity: 0.8;
    }
    80% {
      opacity: 0.8;
    }
    100% {
      left: 105%;
      opacity: 0;
    }
  }

  .ar-step {
    position: absolute;
    bottom: 50px;
    right: 12px;
    width: 32%;
    min-width: 168px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.45);
    z-index: 5;
    animation: knTaiIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;
  }
  .ar-step-head {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 4px;
  }
  .ar-step-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
  }
  .ar-step-of {
    font-size: 9.5px;
    color: var(--ink-3);
    font-weight: 600;
  }
  .ar-step-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 7px;
  }
  .ar-step-progress {
    height: 3px;
    background: var(--bg-3);
    border-radius: 2px;
    overflow: hidden;
  }
  .ar-step-fill {
    display: block;
    height: 100%;
    width: 37%;
    background: linear-gradient(90deg, var(--blue), var(--blue-glow));
    animation: arStepFill 5s ease-in-out infinite;
  }
  @keyframes arStepFill {
    0% {
      width: 37%;
    }
    50% {
      width: 60%;
    }
    100% {
      width: 37%;
    }
  }

  .ar-hud {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 6;
    animation: knFlowIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both;
  }
  .ar-hud-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(15, 23, 41, 0.85);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-pill);
    font-size: 9.5px;
    font-weight: 600;
    backdrop-filter: blur(8px);
    white-space: nowrap;
  }
  .ar-hud-pill svg {
    width: 10px;
    height: 10px;
    opacity: 0.8;
  }

  @media (max-width: 720px) {
    .mt-wo,
    .mt-sched,
    .mt-check {
      min-width: 138px;
      padding: 7px 8px;
    }
    .io-asset,
    .io-chart {
      min-width: 142px;
      padding: 7px 8px;
    }
    .ar-step {
      min-width: 132px;
      padding: 7px 8px;
    }
    .ar-target {
      width: 78px;
      height: 78px;
    }
    .ar-target-card {
      left: calc(100% + 36px);
      padding: 5px 7px;
      font-size: 8.5px;
    }
    .ar-target-line {
      width: 36px;
    }
    .ar-hud {
      gap: 4px;
    }
    .ar-hud-pill {
      padding: 4px 7px;
      font-size: 8.5px;
    }
  }

  /* Footer */
  .mod-footer {
    margin-top: 32px;
    padding: 28px 36px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .mod-footer p {
    color: var(--ink-2);
    font-size: 15px;
    max-width: 640px;
    line-height: 1.55;
  }

  @media (max-width: 960px) {
    .mod-panel {
      grid-template-columns: 1fr;
      padding: 24px;
      gap: 24px;
    }
    .mod-content h3 {
      font-size: 24px;
    }
    .mod-tabs-wrap {
      display: block;
      position: relative;
      width: 100%;
    }
    .mod-tabs-wrap::before,
    .mod-tabs-wrap::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 44px;
      pointer-events: none;
      z-index: 2;
      transition: opacity 0.2s ease;
    }
    .mod-tabs-wrap::before {
      left: 0;
      background: linear-gradient(90deg, #f4f7fc, rgba(244, 247, 252, 0));
      opacity: 0;
    }
    .mod-tabs-wrap::after {
      right: 0;
      background: linear-gradient(270deg, #f4f7fc, rgba(244, 247, 252, 0));
    }
    .mod-tabs-wrap.scrolled::before {
      opacity: 1;
    }
    .mod-tabs-wrap.at-end::after {
      opacity: 0;
    }
    .mod-tabs {
      width: 100%;
      overflow-x: auto;
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 8px;
      padding: 2px 4px;
      background: transparent;
      border: none;
      box-shadow: none;
      border-radius: 0;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .mod-tabs::-webkit-scrollbar {
      display: none;
    }
    .mod-tab {
      flex: none;
      scroll-snap-align: start;
      background: #fff;
      border: 1px solid var(--line);
      padding: 10px 16px;
    }
    .mod-tab.active {
      background: var(--navy);
      border-color: var(--navy);
    }
    .mod-stack-viz {
      margin-bottom: 40px;
    }
    .mod-stack-ops,
    .mod-stack-iot,
    .mod-stack-ar {
      margin-left: 0;
      margin-right: 0;
    }
    .mod-stack-where {
      display: none;
    }
    .mod-footer {
      flex-direction: column;
      align-items: flex-start;
      padding: 24px;
    }
  }

  /* ---------- WHO USES VR BOOST AGENCY, tabbed showcase ---------- */
  .personas {
    background: #fff;
    padding: 110px 0 110px;
    position: relative;
    overflow: hidden;
  }
  .personas::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      rgba(15, 23, 41, 0.06) 1px,
      transparent 1px
    );
    background-size: 20px 20px;
    mask-image: radial-gradient(
      ellipse 80% 70% at 50% 50%,
      #000,
      transparent 80%
    );
    pointer-events: none;
  }
  .who-section {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
  }
  .who-head {
    text-align: center;
    margin-bottom: 32px;
  }
  .who-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 18px;
  }
  .who-eyebrow::before {
    content: "→";
  }
  .who-h2 {
    font-size: clamp(40px, 5.6vw, 68px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: var(--ink);
  }
  .who-h2 em {
    font-style: normal;
    color: var(--ink);
    display: inline-block;
    padding: 0 0.08em 0 0.03em;
    background: none;
  }
  .who-h2 .dot {
    color: var(--ink);
  }

  /* Tabs */
  .who-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 100px;
    margin: 36px auto 40px;
    width: fit-content;
    max-width: 100%;
    box-shadow: 0 2px 6px rgba(15, 23, 41, 0.04);
  }
  .who-tab {
    background: transparent;
    border: none;
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-3);
    padding: 10px 18px;
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
    letter-spacing: -0.005em;
  }
  .who-tab:hover {
    color: var(--ink);
    background: var(--bg-2);
  }
  .who-tab.active {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 41, 0.25);
  }

  /* Panels */
  .who-panels {
    position: relative;
  }
  .who-panel {
    display: none;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
    animation: whoFade 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .who-panel.active {
    display: grid;
  }
  @keyframes whoFade {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .who-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    overflow: hidden;
    background: #0f1729;
    box-shadow: 0 24px 56px -16px rgba(15, 23, 41, 0.3), 0 0 0 1px var(--line);
  }
  .who-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 8s ease;
  }
  .who-panel.active .who-visual img {
    transform: scale(1.04);
  }
  .who-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 35%,
      rgba(15, 23, 41, 0.55) 100%
    );
    pointer-events: none;
  }

  /* The product-UI mockup floating bottom-right of the photo */
  .who-mock {
    position: absolute;
    bottom: 22px;
    right: 22px;
    z-index: 2;
    width: 56%;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    color: var(--ink);
    font-family: "Codec Pro", "Inter", sans-serif;
  }
  .who-mock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    text-transform: uppercase;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .who-mock-head .badge {
    background: var(--blue-faint);
    color: var(--blue);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .who-mock-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .who-mock-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }
  .who-mock-row .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc2626;
    flex: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
  }
  .who-mock-row .dot.amber {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  }
  .who-mock-row .dot.green {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.18);
  }
  .who-mock-row .dot.blue {
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(45, 111, 247, 0.18);
  }
  .who-mock-sub {
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.35;
  }

  /* OEE-style KPI tile */
  .who-mock-kpi {
    display: flex;
    align-items: flex-end;
    gap: 14px;
  }
  .who-mock-kpi-num {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
  }
  .who-mock-kpi-num span {
    font-size: 18px;
    color: var(--ink-3);
    font-weight: 700;
    margin-left: 2px;
  }
  .who-mock-kpi-num em {
    font-style: normal;
    font-size: 11px;
    color: var(--green);
    font-weight: 700;
    display: block;
    margin-top: 4px;
  }
  .who-mock-kpi-spark {
    flex: 1;
    height: 38px;
  }
  .who-mock-kpi-spark svg {
    width: 100%;
    height: 100%;
  }

  /* Drawing/revision tile */
  .who-mock-rev {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .who-mock-rev svg {
    width: 22px;
    height: 22px;
    color: var(--blue);
    flex: none;
  }
  .who-mock-rev div {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .who-mock-rev strong {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
  }
  .who-mock-rev span {
    font-size: 10.5px;
    color: var(--ink-3);
  }

  /* Conic compliance gauge */
  .who-mock-gauge {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .who-mock-gauge-circle {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: conic-gradient(var(--green) 0 96%, var(--bg-3) 96% 100%);
    display: grid;
    place-items: center;
    flex: none;
  }
  .who-mock-gauge-circle::after {
    content: "";
    position: absolute;
    inset: 5px;
    background: #fff;
    border-radius: 50%;
  }
  .who-mock-gauge-circle b {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .who-mock-gauge-body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1px;
  }
  .who-mock-gauge-body span {
    font-size: 11px;
    color: var(--ink-3);
  }

  /* Content side */
  .who-content {
    min-width: 0;
  }
  .who-label {
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 18px;
    display: inline-block;
  }
  .who-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 22px;
  }
  .who-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
  }
  .who-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--ink-2);
  }
  .who-bullets li::before {
    content: "→";
    flex: none;
    color: var(--blue);
    font-weight: 700;
    font-size: 16px;
    margin-top: 1px;
  }

  @media (max-width: 960px) {
    .who-panel {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .who-mock {
      width: 70%;
    }
  }
  @media (max-width: 640px) {
    .who-tabs {
      overflow-x: auto;
      flex-wrap: nowrap;
      justify-content: flex-start;
      max-width: calc(100vw - 32px);
    }
    .who-tab {
      font-size: 12.5px;
      padding: 9px 14px;
    }
    .who-mock {
      width: 80%;
      right: 14px;
      bottom: 14px;
    }
  }

  /* Indoor Navigation showcase visual */
  .showcase-nav {
    position: relative;
    z-index: 1;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .snav-header {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
  }
  .snav-header-tag {
    font-size: 10px;
    font-family: "JetBrains Mono", monospace;
    color: var(--blue-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .snav-header-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
  }
  .snav-header-meta {
    font-size: 11px;
    color: #98a2b3;
  }
  .snav-map {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    overflow: hidden;
  }
  .snav-map svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .snav-route {
    animation: routeFlow 1.8s linear infinite;
  }
  @keyframes routeFlow {
    from {
      stroke-dashoffset: 0;
    }
    to {
      stroke-dashoffset: -20;
    }
  }
  .snav-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: navPulse 2s ease-out infinite;
  }
  @keyframes navPulse {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    100% {
      transform: scale(2.2);
      opacity: 0;
    }
  }
  .snav-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .snav-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s;
  }
  .snav-step.active {
    background: rgba(45, 111, 247, 0.12);
    border: 1px solid rgba(45, 111, 247, 0.3);
  }
  .snav-step-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
  }
  .snav-step.done .snav-step-dot {
    background: var(--green);
  }
  .snav-step.active .snav-step-dot {
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(45, 111, 247, 0.2);
    animation: dotPulse 1.5s ease-in-out infinite;
  }
  .snav-step.target .snav-step-dot {
    background: var(--blue-light);
    box-shadow: 0 0 8px var(--blue-light);
  }
  .snav-step-label {
    flex: 1;
    color: #d0d5dd;
    font-family: "Codec Pro", "Inter", sans-serif;
  }
  .snav-step.active .snav-step-label {
    color: #fff;
    font-weight: 500;
  }
  .snav-step.done .snav-step-label {
    color: #98a2b3;
  }
  .snav-step-time {
    font-size: 11px;
    color: #98a2b3;
    font-family: "JetBrains Mono", monospace;
  }

  /* ---------- BIG STATS ---------- */
  .stats {
    background: #fff;
    padding: 120px 0;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
  }
  .stat-cell {
    background: #fff;
    padding: 44px 24px;
    text-align: center;
    transition: background 0.2s;
  }
  .stat-cell:hover {
    background: var(--bg-2);
  }
  .stat-num {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 12px;
  }
  .stat-num-val {
    display: inline-block;
    font-variant-numeric: tabular-nums;
  }
  .stat-num .unit {
    font-size: 32px;
    color: rgb(32 85 255);
  }
  .stat-label {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-3);
    max-width: 200px;
    margin: 0 auto;
  }

  /* ---------- TESTIMONIALS ---------- */
  .testimonials {
    background: radial-gradient(
        circle at 18% 28%,
        rgba(45, 111, 247, 0.18),
        transparent 55%
      ),
      radial-gradient(
        circle at 82% 70%,
        rgba(122, 90, 248, 0.14),
        transparent 55%
      ),
      var(--navy-deep);
    color: #fff;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  .testimonials::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(
      ellipse 80% 70% at 50% 50%,
      #000,
      transparent 85%
    );
    pointer-events: none;
  }
  .testimonials > .container {
    position: relative;
    z-index: 1;
  }
  .testimonials .section-head h2 {
    color: #fff;
  }
  .testimonials .section-head p {
    color: rgba(255, 255, 255, 0.72);
  }
  .testimonials .section-tag {
    color: var(--blue-glow);
  }
  .testimonials .section-tag::before {
    color: var(--blue-light);
  }
  .testimonials-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
    padding: 4px 4px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  }
  .testimonials-grid::-webkit-scrollbar {
    height: 8px;
  }
  .testimonials-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
  }
  .testimonials-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 4px;
  }
  /* ----- TESTIMONIAL CARDS ----- */
  .tcard {
    position: relative;
    flex: 0 0 340px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 34px 30px 28px;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
      border-color 0.25s ease;
    box-shadow: 0 4px 14px -6px rgba(15, 23, 41, 0.1);
  }
  .tcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 48px -18px rgba(45, 111, 247, 0.3);
    border-color: rgba(45, 111, 247, 0.2);
  }
  .tcard-accent {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--purple));
  }
  .tcard-text {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 10px 0 26px;
    flex: 1;
    letter-spacing: -0.003em;
  }
  .tcard-text::before {
    content: "\201C";
  }
  .tcard-text::after {
    content: "\201D";
  }
  .tcard-attr {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .tcard-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(45, 111, 247, 0.3);
  }
  .tcard-who {
    flex: 1;
    min-width: 0;
  }
  .tcard-name {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .tcard-role {
    font-size: 12.5px;
    color: var(--ink-3);
    margin-top: 2px;
    letter-spacing: -0.005em;
  }
  .tcard-logo {
    height: 26px;
    width: auto;
    max-width: 76px;
    object-fit: contain;
    flex: none;
    opacity: 0.85;
  }
  /* Prominent logo used in place of a headshot when no photo is available */
  .tcard-logo-lead {
    height: 46px;
    width: auto;
    max-width: 172px;
    object-fit: contain;
    flex: none;
  }

  /* ---------- ENTERPRISE STRIP ---------- */
  .enterprise {
    background: radial-gradient(
        ellipse 50% 40% at 50% 0%,
        rgba(122, 90, 248, 0.04),
        transparent 70%
      ),
      var(--bg-warm);
    padding: 120px 0;
    position: relative;
  }
  .ent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .ent-card {
    padding: 32px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    transition: all 0.2s;
  }
  .ent-card:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
  }
  .ent-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
  }
  .ent-card-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ent-card h4 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
  }
  .ent-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-3);
  }
  .ent-badges {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 24px;
    margin-top: 8px;
  }
  .ent-badge {
    padding: 8px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .ent-badge svg {
    width: 14px;
    height: 14px;
    color: var(--green);
  }

  /* ---------- CTA ---------- */
  .cta {
    /* GridScan WebGL backdrop (mounted by app/grid-scan-mount.jsx into
       [data-grid-scan]); no photo, no fixed-attachment parallax. */
    background: #000;
    color: #fff;
    padding: 150px 0;
    position: relative;
    overflow: hidden;
  }
  .cta-scan {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  /* let empty-space clicks reach the canvas (click triggers a scan pulse) */
  .cta > .container {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }
  .cta-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
  }
  .cta-inner h2 {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .cta-inner p {
    font-size: 18px;
    color: #d0d5dd;
    margin-bottom: 36px;
    line-height: 1.55;
  }
  .cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .cta-actions .btn {
    pointer-events: auto;
  }

  /* ---------- FOOTER ---------- */
  footer {
    background: var(--navy-deep);
    color: #98a2b3;
    padding: 48px 0 32px;
  }
  .foot-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }
  .foot-inner .logo {
    color: #fff;
  }
  .foot-inner .logo-mark {
    background: rgba(255, 255, 255, 0.1);
  }
  .foot-inner .logo-mark svg path {
    fill: var(--blue-light);
  }
  .foot-links {
    display: flex;
    gap: 24px;
    font-size: 13px;
  }
  .foot-links a:hover {
    color: #fff;
  }

  /* ---------- SPATIAL LAYER (3D + AR, v17) ---------- */
  .spatial {
    background: #fff;
    color: var(--ink);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  .spatial-inner {
    position: relative;
    z-index: 1;
  }

  /* ---------- HEAD ---------- */
  .spatial-head {
    text-align: center;
    margin-bottom: 64px;
  }
  .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Codec Pro", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-glow);
    margin-bottom: 20px;
  }
  .section-tag::before {
    content: "→";
    color: var(--blue-light);
  }
  .spatial-head h2 {
    font-family: "Codec Pro", sans-serif;
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: var(--ink);
    max-width: min(100%, 24ch);
    margin: 0 auto;
    overflow-wrap: break-word;
  }
  .spatial-head h2 em {
    font-style: italic;
    background: linear-gradient(90deg, var(--blue-light), var(--purple));
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: 0.14em;
    color: transparent;
    display: inline-block;
    padding: 0.04em 0.14em 0.16em 0.03em;
  }

  /* Sub-paragraph under the section heading */
  .spatial-head .spatial-sub {
    margin: 14px auto 0;
    max-width: 720px;
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.55;
  }

  /* Base tier card, full width, distinct from the two 'level up' cards */
  .spatial-base {
    margin-bottom: 48px;
    padding: 28px 32px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(45, 111, 247, 0.05),
        rgba(125, 169, 255, 0.025) 70%
      ),
      #fff;
    border: 1px solid var(--line);
    box-shadow: 0 14px 30px -10px rgba(15, 23, 41, 0.1),
      0 0 0 1px rgba(45, 111, 247, 0.05) inset;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 28px 40px;
    align-items: center;
  }
  .spatial-base-meta h3 {
    font-family: "Codec Pro", sans-serif;
    font-size: 26px;
    font-weight: 600;
    margin: 10px 0 8px;
    line-height: 1.18;
    letter-spacing: -0.01em;
  }
  .spatial-base-sub {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 480px;
  }
  .spatial-base-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: start;
    padding-top: 4px;
  }
  .spatial-base-chip {
    font-family: "Codec Pro", sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
  }
  .spatial-base-foot {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px dashed var(--line);
    flex-wrap: wrap;
  }
  .spatial-base-foot-label {
    font-family: "Codec Pro", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-right: 4px;
  }
  .spatial-base-platform {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 10px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
  }
  .spatial-base-platform svg {
    width: 14px;
    height: 14px;
    color: var(--blue);
  }

  /* Variant tags for the section: "Day one" (base) + "Level up" (3D/AR) */
  .spatial-card-tag-base {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #047857 !important;
  }
  .spatial-card-tag-base .dot {
    background: #10b981 !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.45) !important;
  }
  .spatial-card-tag-up {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #6d28d9 !important;
  }
  .spatial-card-tag-up .dot {
    background: #7c3aed !important;
    box-shadow: 0 0 6px rgba(124, 58, 237, 0.4) !important;
  }

  @media (max-width: 760px) {
    .spatial-base {
      grid-template-columns: 1fr;
      padding: 22px 20px;
    }
    .spatial-base-foot {
      padding-top: 12px;
    }
  }

  /* ---------- STAGE ---------- */
  .spatial-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
  }
  .spatial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .spatial-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Codec Pro", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    width: fit-content;
  }
  .spatial-card-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(45, 111, 247, 0.2);
    animation: pulse 2s infinite;
  }
  .spatial-card h3 {
    font-family: "Codec Pro", sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--ink);
  }

  /* ---------- VISUALS ---------- */
  .spatial-visual {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #000;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .spatial-card:hover .spatial-visual {
    transform: translateY(-3px);
    box-shadow: 0 32px 80px -16px rgba(45, 111, 247, 0.3),
      0 0 0 1px rgba(91, 141, 249, 0.2);
  }
  .spatial-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* ---------- CHIPS ---------- */
  .spatial-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .spatial-chip {
    font-family: "Codec Pro", sans-serif;
    font-size: 11px;
    font-weight: 400;
    padding: 6px 11px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.05);
  }

  /* Tech-stack "Powered by" row under each spatial card visual */
  .spatial-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 14px;
  }
  .spatial-tech-label {
    font-family: "Codec Pro", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-right: 2px;
  }
  .spatial-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--line);
    font-family: "Codec Pro", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.05);
  }
  .spatial-tech-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--blue);
  }

  /* ===== Spatial section, Option C (timeline + clickable preview) ===== */
  .opc-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: stretch;
  }
  .opc-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: center;
  }
  .opc-step {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    font: inherit;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
      transform 0.2s ease;
  }
  .opc-step:hover {
    border-color: rgba(45, 111, 247, 0.25);
    transform: translateX(2px);
  }
  .opc-step.active {
    border-color: var(--blue);
    box-shadow: 0 10px 22px -6px rgba(45, 111, 247, 0.2);
    transform: translateX(3px);
  }
  .opc-step-n {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-2);
    color: var(--ink-3);
    display: grid;
    place-items: center;
    font-family: "Codec Pro", sans-serif;
    font-size: 15px;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
  }
  .opc-step.active .opc-step-n {
    background: linear-gradient(135deg, #4f7bff, #7c3aed);
    color: #fff;
  }
  .opc-step-body strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .opc-step-body small {
    display: block;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.45;
    margin-top: 4px;
  }
  .opc-step.sf {
    grid-template-columns: 44px 1fr;
  }
  .sf-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(
      135deg,
      rgba(79, 123, 255, 0.14),
      rgba(124, 58, 237, 0.14)
    );
    color: var(--blue);
    display: grid;
    place-items: center;
    transition: background 0.2s, color 0.2s;
  }
  .sf-ico svg {
    width: 21px;
    height: 21px;
  }
  .opc-step.sf.active .sf-ico {
    background: linear-gradient(135deg, #4f7bff, #7c3aed);
    color: #fff;
  }
  .sf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
  }
  .sf-chips i {
    font-style: normal;
    font-size: 11px;
    color: var(--ink-2);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 3px 10px;
  }
  .sf-chips i.hl {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #2d6ff7, #7c3aed);
    border-color: transparent;
  }
  .sf-2d {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 4px;
    padding: 15px 17px;
    border: 1px dashed var(--line-2);
    border-radius: 13px;
    background: transparent;
  }
  .sf-2d-tag {
    flex: none;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    background: rgba(45, 111, 247, 0.08);
    border-radius: 100px;
    padding: 4px 9px;
    margin-top: 1px;
  }
  .sf-2d-body strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-2);
    letter-spacing: -0.005em;
  }
  .sf-2d-body p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
  }
  .opc-preview {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    background: #0a0d18;
    box-shadow: 0 20px 40px -12px rgba(15, 23, 41, 0.22),
      0 0 0 1px rgba(15, 23, 41, 0.04);
  }
  .opc-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
  }
  .opc-layer.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* 2D app mockup inside the preview */
  .opc-app2d {
    position: absolute;
    inset: 0;
    background: #fbfcfe;
    color: var(--ink);
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: 42px 1fr;
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
  }
  .opc-app-top {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .opc-app-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 12px;
  }
  .opc-app-logo img {
    width: 18px;
    height: 18px;
  }
  .opc-app-portfolio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
  }
  .opc-app-portfolio svg {
    width: 9px;
    height: 9px;
    opacity: 0.6;
  }
  .opc-app-search {
    flex: 1;
    max-width: 280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bg-2);
    border-radius: 6px;
    color: var(--ink-3);
    font-size: 10.5px;
  }
  .opc-app-search svg {
    width: 11px;
    height: 11px;
    opacity: 0.65;
  }
  .opc-app-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .opc-app-ask {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #4f7bff, #7c3aed);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: 10.5px;
    font-weight: 700;
  }
  .opc-app-ask svg {
    width: 10px;
    height: 10px;
  }
  .opc-app-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f2937, #0f1729);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700;
  }
  .opc-app-side {
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .opc-app-side-item {
    display: grid;
    grid-template-rows: 14px auto;
    place-items: center;
    padding: 6px 2px;
    color: var(--ink-3);
    font-size: 8.5px;
    font-weight: 600;
    border-left: 2px solid transparent;
  }
  .opc-app-side-item svg {
    width: 12px;
    height: 12px;
  }
  .opc-app-side-item.active {
    color: var(--blue);
    border-left-color: var(--blue);
  }
  .opc-app-side-item.active svg path,
  .opc-app-side-item.active svg circle,
  .opc-app-side-item.active svg rect,
  .opc-app-side-item.active svg polygon,
  .opc-app-side-item.active svg line,
  .opc-app-side-item.active svg polyline {
    stroke: var(--blue);
  }
  .opc-app-main {
    overflow: hidden;
    padding: 12px 14px;
  }
  .opc-app-section-head {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
  }
  .opc-app-section-head h3 {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .opc-app-section-head h3 svg {
    width: 10px;
    height: 10px;
    opacity: 0.65;
  }
  .opc-app-flows,
  .opc-app-notes {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .opc-app-flow {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 7px 9px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
  }
  .opc-app-flow .play {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(45, 111, 247, 0.1);
    color: var(--blue);
    display: grid;
    place-items: center;
  }
  .opc-app-flow .play svg {
    width: 8px;
    height: 8px;
  }
  .opc-app-flow .body strong {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
  }
  .opc-app-flow .body small {
    display: block;
    font-size: 8.5px;
    color: var(--ink-3);
    margin-top: 1px;
  }
  .opc-app-flow .pill {
    font-size: 8.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--r-pill);
    background: rgba(45, 111, 247, 0.1);
    color: var(--blue);
  }
  .opc-app-note {
    padding: 7px 9px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 7px;
    border-left: 2px solid var(--red);
  }
  .opc-app-note .title {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .opc-app-note .desc {
    font-size: 8.5px;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  /* 3D + AR visuals reuse the existing animations from spatial-card */
  .opc-vis-3d,
  .opc-vis-ar {
    position: absolute;
    inset: 0;
  }
  .opc-vis-3d img,
  .opc-vis-ar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .opc-laptop-ring {
    position: absolute;
    top: 41%;
    left: 47%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--blue-light);
    transform: translate(-50%, -50%);
    animation: ringExpand 2.4s ease-out infinite;
    pointer-events: none;
  }
  .opc-ar-alert {
    position: absolute;
    top: 56%;
    left: 64%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--red);
    transform: translate(-50%, -50%);
    animation: ringExpand 2.4s ease-out infinite 0.8s;
    pointer-events: none;
  }
  .opc-ar-dot {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(125, 211, 252, 0.6) 35%,
      transparent 75%
    );
    box-shadow: 0 0 12px rgba(125, 211, 252, 0.9),
      0 0 22px rgba(125, 211, 252, 0.4);
    opacity: 0;
    animation: navGlow 3.6s ease-in-out infinite;
    mix-blend-mode: screen;
  }

  @media (max-width: 880px) {
    .opc-wrap {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- LEFT ANIMATIONS (laptop) ---------- */
  .laptop-ring {
    position: absolute;
    top: 41%;
    left: 47%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--blue-light);
    transform: translate(-50%, -50%);
    animation: ringExpand 2.4s ease-out infinite;
    pointer-events: none;
  }
  @keyframes ringExpand {
    0% {
      width: 14px;
      height: 14px;
      opacity: 1;
    }
    100% {
      width: 64px;
      height: 64px;
      opacity: 0;
    }
  }

  /* ---------- RIGHT ANIMATIONS (AR) ---------- */
  .ar-alert {
    position: absolute;
    top: 56%;
    left: 64%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--red);
    transform: translate(-50%, -50%);
    animation: ringExpand 2.4s ease-out infinite;
    animation-delay: 0.8s;
    pointer-events: none;
  }
  /* Sequential nav-dot glow overlaid on existing blue trail spheres */
  .ar-nav-dot {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(125, 211, 252, 0.6) 35%,
      transparent 75%
    );
    box-shadow: 0 0 12px rgba(125, 211, 252, 0.9),
      0 0 22px rgba(125, 211, 252, 0.4);
    opacity: 0;
    animation: navGlow 3.6s ease-in-out infinite;
    mix-blend-mode: screen;
  }
  @keyframes navGlow {
    0%,
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.6);
    }
    6% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.2);
    }
    14% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.6);
    }
  }

  /* ---------- CENTER SYNC BADGE ---------- */
  .spatial-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
  }
  .spatial-link-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
    color: #fff;
    font-family: "Codec Pro", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 20px 56px -8px rgba(45, 111, 247, 0.6),
      0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 0 0 8px rgba(15, 23, 41, 0.6);
    white-space: nowrap;
  }
  .spatial-link-badge svg {
    width: 13px;
    height: 13px;
    animation: syncSpin 10s linear infinite;
  }
  @keyframes syncSpin {
    to {
      transform: rotate(360deg);
    }
  }
  .spatial-link-badge::before,
  .spatial-link-badge::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 60px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(125, 169, 255, 0.6) 50%,
      transparent
    );
  }
  .spatial-link-badge::before {
    right: 100%;
  }
  .spatial-link-badge::after {
    left: 100%;
  }
  .spatial-link-pulse {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue-glow);
    box-shadow: 0 0 12px var(--blue-glow);
    transform: translateY(-50%);
  }
  .pulse-left {
    animation: travelLeft 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }
  .pulse-right {
    animation: travelRight 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    animation-delay: 1.6s;
  }
  @keyframes travelLeft {
    0% {
      left: 0%;
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      left: -240%;
      opacity: 0;
    }
  }
  @keyframes travelRight {
    0% {
      left: 100%;
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 340%;
      opacity: 0;
    }
  }

  @keyframes pulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.6;
    }
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px) {
    .spatial-stage {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .spatial-link {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      margin: -4px auto;
      width: fit-content;
    }
    .spatial-link-badge::before,
    .spatial-link-badge::after {
      display: none;
    }
    .spatial {
      padding: 80px 0;
    }
    .spatial-card h3 {
      font-size: 24px;
    }
  }

  /* ---------- CAPTURE, TAI Flows video reveal ---------- */
  .capture {
    background: linear-gradient(
        180deg,
        rgba(5, 9, 19, 0.82) 0%,
        rgba(15, 23, 41, 0.92) 60%,
        rgba(5, 9, 19, 0.96) 100%
      ),
      url("/assets/cw/b54ec81278408a57.webp") center/cover no-repeat fixed;
    color: #fff;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  .capture::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(
      ellipse 80% 70% at 50% 50%,
      #000,
      transparent 85%
    );
    pointer-events: none;
    z-index: 0;
  }
  .capture > .container {
    position: relative;
    z-index: 1;
  }
  .capture .section-head h2 {
    color: #fff;
  }
  .capture .section-head h2 em {
    background: linear-gradient(135deg, var(--blue-glow), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: 0.14em;
    color: transparent;
  }
  .capture .section-head p {
    color: rgba(255, 255, 255, 0.72);
  }
  .capture .section-tag {
    color: var(--blue-glow);
  }
  .capture .section-tag::before {
    color: var(--blue-light);
  }

  /* Full-bleed video */
  .video-wrap {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #000;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: 78vh;
    margin-top: 48px;
    margin-bottom: 64px;
    box-shadow: 0 24px 80px -16px rgba(0, 0, 0, 0.6);
  }
  .video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .video-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 110% 70% at 50% 50%,
      transparent 55%,
      rgba(0, 0, 0, 0.35) 100%
    );
    pointer-events: none;
    z-index: 2;
  }

  /* Timed captions */
  .video-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(16px);
    z-index: 5;
    font-family: "Codec Pro", "Inter", sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 7.5vw, 112px);
    letter-spacing: -0.025em;
    line-height: 1.02;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55),
      0 0 60px rgba(45, 111, 247, 0.45);
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
    white-space: nowrap;
    pointer-events: none;
    filter: blur(2px);
  }
  .video-caption em {
    font-style: italic;
    background: linear-gradient(135deg, var(--blue-glow), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: 0.14em;
    color: transparent;
    display: inline-block;
    padding: 0.04em 0.18em 0.16em 0.04em;
    margin-right: -0.05em;
    line-height: 1.15;
  }
  .video-caption.show {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
    filter: blur(0);
  }

  /* Tagged points row */
  .cap-points {
    list-style: none;
    margin: 0 auto;
    padding: 22px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-lg);
    backdrop-filter: blur(12px);
    max-width: 1080px;
  }
  .cap-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.35;
    letter-spacing: -0.005em;
  }
  .cap-points li svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--blue-glow);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  @media (max-width: 760px) {
    .capture {
      padding: 72px 0;
    }
    .cap-points {
      grid-template-columns: 1fr 1fr;
      padding: 18px;
      gap: 14px;
    }
    .video-wrap {
      aspect-ratio: 16/10;
      max-height: none;
    }
  }

  /* ---------- DEVICE FAMILY, desktop · mobile · glasses ---------- */
  .device-family {
    position: relative;
    overflow: hidden;
    color: var(--ink);
    background: radial-gradient(
        ellipse 65% 55% at 50% 0%,
        rgba(45, 111, 247, 0.05),
        transparent 70%
      ),
      radial-gradient(
        ellipse 40% 50% at 95% 100%,
        rgba(122, 90, 248, 0.06),
        transparent 70%
      ),
      linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-soft) 100%);
    padding: 110px 0 120px;
  }
  .device-family .section-head {
    margin-bottom: 32px;
  }
  .device-family .section-head h2 {
    color: var(--ink);
  }
  .device-family .section-head h2 em {
    font-style: italic;
    background: linear-gradient(135deg, var(--blue-light), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: 0.14em;
    color: transparent;
    display: inline-block;
    padding: 0.04em 0.14em 0.16em 0.03em;
  }
  .device-family .section-head p {
    color: var(--ink-2);
    max-width: 640px;
    margin: 0 auto;
  }

  .df-stage {
    position: relative;
    min-height: 620px;
    margin-top: 30px;
    perspective: 1800px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .df-rig {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(12deg) rotateY(-16deg);
    animation: dfSpin 14s ease-in-out infinite alternate;
    width: 620px;
    max-width: 92vw;
  }
  @keyframes dfSpin {
    from {
      transform: rotateX(12deg) rotateY(-16deg);
    }
    to {
      transform: rotateX(8deg) rotateY(-8deg);
    }
  }
  .df-floor {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 780px;
    height: 60px;
    background: radial-gradient(
      ellipse,
      rgba(15, 23, 41, 0.25),
      transparent 70%
    );
    filter: blur(14px);
    z-index: 0;
  }

  /* ----- Laptop ----- */
  .df-laptop {
    position: relative;
    width: 620px;
  }
  .df-laptop-lid {
    background: #0a0e16;
    border-radius: 16px 16px 0 0;
    padding: 12px 12px 0;
  }
  .df-laptop-screen {
    position: relative;
    border-radius: 7px 7px 0 0;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #0a0e16;
  }
  .df-laptop-screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  .df-laptop-screen img.active {
    opacity: 1;
  }
  .df-laptop-base {
    height: 14px;
    background: linear-gradient(180deg, #1a1f2b, #0a0e16);
    border-radius: 0 0 12px 12px;
    position: relative;
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.45);
  }
  .df-laptop-base::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 5px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0 0 8px 8px;
  }

  /* ----- Phone ----- */
  .df-phone {
    position: absolute;
    right: -90px;
    bottom: -40px;
    width: 210px;
    z-index: 6;
    aspect-ratio: 9/19.3;
    background: #0a0e16;
    border-radius: 42px;
    padding: 11px;
    transform: translateZ(120px);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.45),
      0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(255, 255, 255, 0.06) inset;
  }
  .df-phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    background: #0a0e16;
  }
  .df-phone-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  .df-phone-shot.active {
    opacity: 1;
  }
  .df-phone-notch {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 18px;
    background: #0a0e16;
    border-radius: 12px;
    z-index: 3;
  }

  /* ----- Smart glasses ----- */
  /* ----- Smart glasses (real Ray-Ban Meta photo) ----- */
  .df-glasses {
    position: absolute;
    left: -90px;
    bottom: -40px;
    width: 360px;
    z-index: 6;
    transform: translateZ(100px) rotateY(-4deg);
    filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.35));
  }
  .df-glasses-img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
    position: relative;
    z-index: 2;
  }
  /* Through-lens cycling scenes, one cell per eye, sitting BEHIND
     the photo. The Ray-Ban Meta PNG has transparent lens openings, so
     each cell only peeks through its own opening. Coordinates are
     hand-tuned %s of the .df-glasses box (which is 1:1 with the
     photo's pixel grid). */
  .df-lens-cell {
    position: absolute;
    left: var(--lx);
    top: var(--ly);
    width: var(--lw);
    height: var(--lh);
    border-radius: var(--lr, 14px);
    overflow: hidden;
    z-index: 1; /* BEHIND .df-glasses-img (z:2) */
  }
  /* LEFT eye, the larger, front-facing lens in the photo. */
  .df-lens-cell.l {
    --lx: 6.4%;
    --ly: 23.8%;
    --lw: 19.75%;
    --lh: 56%;
    --lr: 18px 22px 22px 18px / 16px 22px 26px 20px;
  }
  /* RIGHT eye, smaller, tilted back due to 3/4 perspective. */
  .df-lens-cell.r {
    --lx: 38.9%;
    --ly: 28%;
    --lw: 27.4%;
    --lh: 65.25%;
    --lr: 16px 14px 14px 16px / 14px 14px 18px 16px;
    /* Trace the actual lens contour so the cell can't bleed past the
       lens on the bottom-left (the bridge gap below the right rim). */
    clip-path: polygon(
      32.4% 0.5%,
      64.8% 0.5%,
      95.9% 16.8%,
      100% 33.2%,
      100% 49.5%,
      99.5% 65.8%,
      97.3% 82.1%,
      80.4% 98.4%,
      50.7% 98.4%,
      21.5% 82.1%,
      14.6% 65.8%,
      8.2% 49.5%,
      1.4% 33.2%,
      43.4% 16.8%
    );
  }
  .df-lens-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(125, 169, 255, 0.22),
      transparent
    );
    transform: translateX(-100%);
    animation: dfLensScan 5s linear infinite;
    z-index: 2;
    pointer-events: none;
  }
  @keyframes dfLensScan {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  .df-lens-shot {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
    animation: dfKen 8s ease-in-out infinite alternate;
  }
  .df-lens-shot.active {
    opacity: 0.9;
  }
  @keyframes dfKen {
    0% {
      transform: scale(1) translate(0, 0);
    }
    100% {
      transform: scale(1.12) translate(-1%, -2%);
    }
  }
  /* Debug mode: add class="df-debug" to .df-glasses to visualize the
     two lens cells. Easy to remove once positions are dialed in. */
  .df-glasses.df-debug .df-lens-cell {
    background: rgba(255, 0, 200, 0.55);
    outline: 2px solid #ff00c8;
  }
  .df-glasses.df-debug .df-lens-shot {
    display: none;
  }

  /* AR overlay on the glasses, rotating tag/pin pairs */
  .df-ar {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .df-ar.active {
    opacity: 1;
  }
  .df-pin {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--blue);
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 4px rgba(45, 111, 247, 0.4);
    transform: translate(-50%, -50%);
  }
  .df-pin::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid var(--blue-glow);
    animation: dfRing 2.4s ease-out infinite;
  }
  @keyframes dfRing {
    0% {
      transform: scale(0.6);
      opacity: 0.8;
    }
    100% {
      transform: scale(2.2);
      opacity: 0;
    }
  }
  .df-tag {
    position: absolute;
    transform: translate(-50%, 0);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 6px 14px -3px rgba(0, 0, 0, 0.3);
  }
  .df-tag .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(45, 111, 247, 0.25);
  }
  .df-ar.ar-1 .df-pin {
    top: 50%;
    left: 52%;
  }
  .df-ar.ar-1 .df-tag {
    top: 92%;
    left: 52%;
  }
  .df-ar.ar-2 .df-pin {
    top: 50%;
    left: 17%;
  }
  .df-ar.ar-2 .df-tag {
    top: 92%;
    left: 17%;
  }
  .df-ar.ar-3 .df-pin {
    top: 50%;
    left: 52%;
  }
  .df-ar.ar-3 .df-tag {
    top: 92%;
    left: 52%;
  }

  /* Platform badges below */
  .df-badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    flex-wrap: wrap;
  }
  .df-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(45, 111, 247, 0.18);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 10px -2px rgba(15, 23, 41, 0.08);
    backdrop-filter: blur(8px);
  }
  .df-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 8px rgba(45, 111, 247, 0.5);
  }

  @media (max-width: 900px) {
    .df-rig {
      transform: none;
      animation: none;
      width: 100%;
    }
    .df-laptop {
      width: 92vw;
    }
    .df-phone {
      right: -10px;
      bottom: -30px;
      width: 150px;
      transform: none;
    }
    .df-glasses {
      left: -10px;
      bottom: -30px;
      width: 240px;
      transform: none;
    }
  }

  /* ---------- INTEGRATIONS (PLUGS INTO YOUR STACK) ---------- */
  .integrations {
    background: radial-gradient(
        ellipse 70% 40% at 50% 0%,
        rgba(45, 111, 247, 0.06),
        transparent 70%
      ),
      radial-gradient(
        ellipse 60% 50% at 50% 100%,
        rgba(122, 90, 248, 0.04),
        transparent 70%
      ),
      linear-gradient(180deg, var(--bg-pale) 0%, var(--bg-soft) 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }

  .integ-stage {
    position: relative;
    height: 600px;
    margin: 0 auto 32px;
    max-width: 1100px;
  }
  .integ-stage-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        rgba(45, 111, 247, 0.04) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(45, 111, 247, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(
      ellipse 70% 60% at 50% 50%,
      #000,
      transparent 85%
    );
    pointer-events: none;
  }
  .integ-orbits {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* Center twin card */
  .integ-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
  /* ---------- STACKED PLATFORM LAYERS (centre of the integration hub) ---------- */
  /* ---------- INTEGRATIONS, central stack ---------- */
  .a-stack {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 220px;
    z-index: 3;
  }
  .a-layer {
    position: absolute;
    width: 200px;
    height: 144px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--line);
    overflow: hidden;
    box-shadow: 0 20px 40px -16px rgba(15, 23, 41, 0.3),
      0 6px 14px -4px rgba(15, 23, 41, 0.15),
      0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    transform-origin: 50% 100%;
  }
  .a-layer-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.04em;
    font-family: "Codec Pro", "Inter", sans-serif;
  }
  .a-layer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 2px rgba(45, 111, 247, 0.2);
    flex: none;
  }
  .a-layer-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.08em;
  }
  .a-layer-live i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 2px rgba(18, 183, 106, 0.25);
    animation: aBlink 1.6s ease-out infinite;
  }
  .a-layer-body {
    position: relative;
    height: calc(100% - 26px);
    overflow: hidden;
    background-size: cover;
    background-position: center;
  }
  .a-layer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(15, 23, 41, 0.1) 0%,
      rgba(15, 23, 41, 0.05) 40%,
      rgba(15, 23, 41, 0.4) 100%
    );
  }
  /* 3D Twin layer (bottom of stack) */
  .a-twin {
    z-index: 1;
    transform: translate(38px, 36px) rotate(-7deg);
    animation: aFloatA 6s ease-in-out infinite alternate;
  }
  .a-twin-body {
    background-color: #0f1729;
  }
  .a-twin-pin {
    position: absolute;
    top: 50%;
    left: 38%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(45, 111, 247, 0.3);
    z-index: 2;
    animation: aBlink 2s ease-out infinite;
  }
  /* AR Mobile layer (middle) */
  .a-ar {
    z-index: 2;
    transform: translate(19px, 18px) rotate(-3.5deg);
    animation: aFloatB 6.5s ease-in-out infinite alternate;
  }
  .a-ar-body {
    background: radial-gradient(circle at 50% 55%, #1d2939 0%, #050913 100%);
  }
  .a-ar-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        rgba(125, 169, 255, 0.12) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(125, 169, 255, 0.12) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(
      ellipse 80% 70% at 50% 50%,
      #000,
      transparent 85%
    );
  }
  .a-ar-target {
    position: absolute;
    top: 50%;
    left: 38%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border: 1.4px solid #93c5fd;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(82, 128, 255, 0.55),
      inset 0 0 8px rgba(82, 128, 255, 0.2);
    animation: aRing 2.6s ease-in-out infinite;
  }
  .a-ar-target-cross::before,
  .a-ar-target-cross::after {
    content: "";
    position: absolute;
    background: rgba(125, 169, 255, 0.9);
    box-shadow: 0 0 6px rgba(82, 128, 255, 0.6);
  }
  .a-ar-target-cross::before {
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1.5px;
    transform: translateY(-50%);
  }
  .a-ar-target-cross::after {
    left: 50%;
    top: 10%;
    bottom: 10%;
    width: 1.5px;
    transform: translateX(-50%);
  }
  .a-ar-callout {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    background: rgba(15, 23, 41, 0.92);
    color: #93c5fd;
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid rgba(125, 169, 255, 0.3);
  }
  /* TAI Chat layer (top, most prominent) */
  .a-tai {
    z-index: 3;
    transform: translate(0, 0);
    animation: aFloatC 7s ease-in-out infinite alternate;
    box-shadow: 0 28px 48px -16px rgba(45, 111, 247, 0.28),
      0 10px 18px -6px rgba(15, 23, 41, 0.18),
      0 0 0 1px rgba(45, 111, 247, 0.18) inset;
  }
  .a-tai-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #fff;
  }
  .a-tai-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .a-tai-av {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    flex: none;
  }
  .a-tai-msg {
    font-size: 10.5px;
    color: var(--ink-2);
    line-height: 1.3;
  }
  .a-tai-bubble {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 10px;
    color: var(--ink);
  }
  .a-tai-bubble i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
    flex: none;
  }
  .a-center-foot {
    position: absolute;
    top: calc(100% + 22px);
    left: 50%;
    transform: translateX(-50%);
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  @keyframes aFloatA {
    0% {
      transform: translate(38px, 36px) rotate(-7deg);
    }
    100% {
      transform: translate(38px, 32px) rotate(-7.5deg);
    }
  }
  @keyframes aFloatB {
    0% {
      transform: translate(19px, 18px) rotate(-3.5deg);
    }
    100% {
      transform: translate(19px, 14px) rotate(-3deg);
    }
  }
  @keyframes aFloatC {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(0, -4px);
    }
  }
  @keyframes aBlink {
    0%,
    100% {
      box-shadow: 0 0 0 3px rgba(45, 111, 247, 0.3);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(45, 111, 247, 0.12);
    }
  }
  @keyframes aRing {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.85;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.1);
      opacity: 1;
    }
  }

  /* ---------- INTEGRATIONS, live perimeter cards ---------- */
  .a-pill {
    position: absolute;
    z-index: 2;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    width: 236px;
    box-shadow: 0 10px 22px -8px rgba(15, 23, 41, 0.1);
  }
  .a-pill-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 11px;
  }
  .a-pill-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--blue-faint);
    color: var(--blue);
    display: grid;
    place-items: center;
    flex: none;
  }
  .a-pill-icon svg {
    width: 17px;
    height: 17px;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .a-pill-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .a-pill-tech {
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
  }
  .a-pill-logos {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .a-pill-logo {
    height: 13px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.2s ease;
    flex-shrink: 1;
    min-width: 0;
  }
  .a-pill-logo:hover {
    opacity: 1;
  }
  /* Brand-name chip (for brands without an embedded logo) */
  .a-pill-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 3px;
    font-family: "Codec Pro", "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
    line-height: 1.5;
    white-space: nowrap;
  }
  .a-pill-chip strong {
    font-weight: 700;
    color: var(--ink);
  }
  /* Grid layout for pills with many brand chips (e.g. IoT) */
  .a-pill-logos.grid-2 {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-auto-rows: auto;
    gap: 5px 8px;
    justify-content: start;
  }
  .a-pill-demo {
    position: relative;
    height: 48px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }

  /* CMMS demo */
  .demo-cmms {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    animation: demoCmmsSlide 4.5s ease-in-out infinite;
  }
  .demo-cmms i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    flex: none;
    font-size: 0;
  }
  .demo-cmms strong {
    color: var(--blue);
    font-weight: 700;
  }
  @keyframes demoCmmsSlide {
    0%,
    8% {
      left: -120%;
      opacity: 0;
    }
    18%,
    75% {
      left: 14px;
      opacity: 1;
    }
    92%,
    100% {
      left: 110%;
      opacity: 0;
    }
  }

  /* Identity demo */
  .demo-id {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
  }
  .demo-id-av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blue-faint);
    border: 1px solid var(--blue-light);
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex: none;
  }
  .demo-id-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .demo-id-name {
    font-size: 10.5px;
    color: var(--ink-2);
    font-weight: 600;
  }
  .demo-id-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--green);
  }
  .demo-id-tick {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    animation: demoIdTick 3s ease-in-out infinite;
  }
  .demo-id-tick svg {
    width: 9px;
    height: 9px;
  }
  @keyframes demoIdTick {
    0%,
    35%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.25);
    }
  }

  /* IoT demo */
  .demo-iot {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
  }
  .demo-iot-spark {
    flex: 1;
    height: 28px;
    position: relative;
  }
  .demo-iot-spark svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .demo-iot-spark path {
    stroke: var(--blue);
    stroke-width: 1.6;
    fill: none;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: demoIotDraw 3s linear infinite;
  }
  @keyframes demoIotDraw {
    0% {
      stroke-dashoffset: 220;
    }
    60% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  .demo-iot-val {
    font-family: "Codec Pro", "Inter", monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
  }
  .demo-iot-val i {
    font-style: normal;
    font-size: 9.5px;
    color: var(--ink-3);
    font-weight: 600;
  }

  /* Data lake demo */
  .demo-dl {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
  }
  .demo-dl-side {
    display: flex;
    gap: 4px;
  }
  .demo-dl-side span {
    width: 14px;
    height: 10px;
    background: var(--blue-faint);
    border: 1px solid var(--blue-light);
    border-radius: 2px;
  }
  .demo-dl-arrow {
    flex: 1;
    height: 14px;
    margin: 0 8px;
    position: relative;
    border-top: 1px dashed rgba(45, 111, 247, 0.45);
    border-bottom: 1px dashed rgba(45, 111, 247, 0.45);
  }
  .demo-dl-arrow i {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue);
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(45, 111, 247, 0.6);
    animation: demoDlDot 2.4s linear infinite;
  }
  .demo-dl-arrow i:nth-child(2) {
    animation-delay: 0.8s;
  }
  .demo-dl-arrow i:nth-child(3) {
    animation-delay: 1.6s;
  }
  @keyframes demoDlDot {
    0% {
      left: 0;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 100%;
      opacity: 0;
    }
  }

  /* Scan & capture demo */
  .demo-scan {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #050913, #0f1729);
  }
  .demo-scan-wire {
    position: relative;
    width: 72%;
    height: 70%;
    border: 1px solid rgba(125, 169, 255, 0.45);
    background: linear-gradient(rgba(125, 169, 255, 0.1) 1px, transparent 1px) 0
        0/10px 10px,
      linear-gradient(90deg, rgba(125, 169, 255, 0.1) 1px, transparent 1px) 0 0/10px
        10px;
    border-radius: 3px;
    overflow: hidden;
  }
  .demo-scan-beam {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--blue-glow),
      transparent
    );
    box-shadow: 0 0 10px var(--blue-glow);
    animation: demoScanBeam 2.4s linear infinite;
  }
  @keyframes demoScanBeam {
    0% {
      top: 0;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      top: 100%;
      opacity: 0;
    }
  }

  /* Wearables demo */
  .demo-wear {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  .demo-wear-dev {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600;
    color: var(--ink-3);
    opacity: 0.55;
  }
  .demo-wear-dev svg {
    width: 18px;
    height: 18px;
    color: var(--ink-3);
  }
  .demo-wear-dev:nth-child(1) {
    animation: wearAct 6s -0s infinite;
  }
  .demo-wear-dev:nth-child(2) {
    animation: wearAct 6s -2s infinite;
  }
  .demo-wear-dev:nth-child(3) {
    animation: wearAct 6s -4s infinite;
  }
  @keyframes wearAct {
    0%,
    16%,
    100% {
      opacity: 1;
      color: var(--blue);
    }
    25%,
    92% {
      opacity: 0.55;
      color: var(--ink-3);
    }
  }

  /* Perimeter pill positions on the integ-stage */
  .a-pos-tl {
    top: 40px;
    left: 0;
  }
  .a-pos-top {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .a-pos-tr {
    top: 40px;
    right: 0;
  }
  .a-pos-bl {
    bottom: 40px;
    left: 0;
  }
  .a-pos-bot {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .a-pos-br {
    bottom: 40px;
    right: 0;
  }

  .integ-note {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
  }
  .integ-note-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
  }
  .integ-note-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .integ-note-text {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  .integ-note-text strong {
    color: var(--ink);
    font-weight: 600;
  }

  @media (max-width: 960px) {
    .integ-stage {
      height: auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .integ-stage-grid,
    .integ-orbits {
      display: none;
    }
    .a-stack {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      margin: 0 auto 80px;
    }
    .a-pill {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
      width: 100%;
    }
  }

  /* ---------- INDUSTRIES STRIP ---------- */
  .industries {
    background: #000;
    padding: 104px 0 112px;
    position: relative;
  }
  .ind-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #fff;
    text-align: left;
    margin-bottom: 52px;
  }
  .ind-marquee {
    overflow: hidden;
  }
  .ind-track {
    display: flex;
    width: max-content;
    animation: indScroll 45s linear infinite;
  }
  .ind-marquee:hover .ind-track {
    animation-play-state: paused;
  }
  @keyframes indScroll {
    to {
      transform: translateX(-50%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ind-track {
      animation: none;
    }
  }
  .ind-card {
    position: relative;
    flex: none;
    width: 340px;
    aspect-ratio: 3 / 4;
    margin-right: 16px;
    border-radius: 14px;
    overflow: hidden;
    background: #0b0b0d;
    text-decoration: none;
  }
  .ind-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: brightness(0.55);
    transform: scale(1.04);
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .ind-card:hover img {
    opacity: 1;
    transform: scale(1);
  }
  .ind-name {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    z-index: 1;
  }
  .ind-ico {
    width: 30px;
    height: 30px;
    opacity: 0.9;
  }
  .ind-more {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    z-index: 1;
    text-underline-offset: 3px;
    transition: color 0.18s ease;
  }
  .ind-more svg {
    transition: transform 0.18s ease;
  }
  .ind-card:hover .ind-more {
    color: #fff;
    text-decoration: underline;
  }
  .ind-card:hover .ind-more svg {
    transform: translateX(3px);
  }
  @media (max-width: 700px) {
    .ind-card {
      width: 240px;
    }
  }
  @media (max-width: 700px) {
    /* Mobile touch ergonomics: roomier footer tap targets */
    .ftr-ico {
      width: 40px;
      height: 40px;
    }
    .ftr-col a {
      padding: 8px 0;
    }
  }

  /* TAI bento grid (Framer /ai pattern): hairline-separated cells, each a
     small CSS-animated vignette + "Bold label. description" caption */
  .taib {
    background: linear-gradient(
        180deg,
        rgba(5, 9, 19, 0.78) 0%,
        rgba(15, 23, 41, 0.88) 55%,
        rgba(5, 9, 19, 0.96) 100%
      ),
      url("/assets/cw/f2f863227ec3f1fd.webp") center / cover no-repeat;
    padding: 104px 0 112px;
  }
  .taib-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #fff;
    text-align: left;
    margin-bottom: 18px;
  }
  .taib-sub {
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
    max-width: 540px;
    margin: 0 0 52px;
    text-align: left;
  }
  .tb-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    overflow: hidden;
  }
  .tb-cell {
    background: #060607;
    padding: 30px 28px 26px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .tb-wide {
    grid-column: span 2;
  }
  .tb-vis {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    min-height: 180px;
  }
  .tb-cap {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.52);
    margin: 0;
    max-width: 320px;
  }
  .tb-cap b {
    color: #fff;
    font-weight: 600;
  }

  /* 1: chat */
  .tb-chat {
    width: 100%;
    max-width: 280px;
  }
  .tb-q {
    background: #17181c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    min-height: 42px;
  }
  .tb-type {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    vertical-align: bottom;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    animation: tbType 11s steps(28, end) infinite;
  }
  @keyframes tbType {
    0% {
      width: 0;
      opacity: 1;
    }
    26% {
      width: 28ch;
    }
    80% {
      width: 28ch;
      opacity: 1;
    }
    86%,
    100% {
      width: 28ch;
      opacity: 0;
    }
  }
  .tb-a {
    margin-top: 10px;
    background: rgba(45, 111, 247, 0.12);
    border: 1px solid rgba(125, 169, 255, 0.22);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: tbAns 11s ease infinite;
  }
  .tb-a i {
    display: inline-block;
    margin-top: 8px;
    font-style: normal;
    font-size: 10.5px;
    color: #9db8ff;
    background: rgba(45, 111, 247, 0.15);
    border-radius: 5px;
    padding: 2px 7px;
  }
  @keyframes tbAns {
    0%,
    32% {
      opacity: 0;
      transform: translateY(4px);
    }
    40% {
      opacity: 1;
      transform: none;
    }
    80% {
      opacity: 1;
    }
    88%,
    100% {
      opacity: 0;
    }
  }

  /* 2: languages */
  .tb-langs {
    position: relative;
    width: 100%;
    height: 40px;
  }
  .tb-langs span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16.5px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.01em;
    opacity: 0;
    animation: tbLang 12s ease infinite;
  }
  .tb-langs span:nth-child(2) {
    animation-delay: 3s;
  }
  .tb-langs span:nth-child(3) {
    animation-delay: 6s;
  }
  .tb-langs span:nth-child(4) {
    animation-delay: 9s;
  }
  @keyframes tbLang {
    0% {
      opacity: 0;
      transform: translateY(6px);
    }
    4%,
    21% {
      opacity: 1;
      transform: none;
    }
    27%,
    100% {
      opacity: 0;
    }
  }

  /* 3: citations */
  .tb-cites {
    width: 100%;
    max-width: 270px;
  }
  .tb-cites p {
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 14px;
  }
  .tb-cite {
    display: inline-block;
    margin: 0 6px 6px 0;
    font-style: normal;
    font-size: 11px;
    color: #9db8ff;
    background: rgba(45, 111, 247, 0.13);
    border: 1px solid rgba(125, 169, 255, 0.2);
    border-radius: 6px;
    padding: 4px 9px;
    animation: tbCite 9s ease infinite;
  }
  @keyframes tbCite {
    0% {
      opacity: 0.3;
    }
    5% {
      opacity: 1;
    }
    32% {
      opacity: 1;
    }
    40%,
    100% {
      opacity: 0.3;
    }
  }

  /* 4: checklist */
  .tb-list {
    width: 100%;
    max-width: 250px;
  }
  .tb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 0;
    opacity: 0;
    animation: tbRow 10s ease infinite;
  }
  .tb-row i {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid rgba(125, 169, 255, 0.7);
    position: relative;
  }
  .tb-row i::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid #9db8ff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
  }
  @keyframes tbRow {
    0% {
      opacity: 0;
      transform: translateX(-6px);
    }
    6% {
      opacity: 1;
      transform: none;
    }
    82% {
      opacity: 1;
    }
    92%,
    100% {
      opacity: 0;
    }
  }

  /* 5: sparkline */
  .tb-iot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .tb-spark {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 64px;
  }
  .tb-spark i {
    width: 7px;
    border-radius: 3px;
    background: linear-gradient(180deg, #7da9ff, #2d6ff7);
    height: calc(var(--h) * 64px);
    transform-origin: bottom;
    animation: tbBar 2.2s ease-in-out infinite alternate;
  }
  @keyframes tbBar {
    from {
      transform: scaleY(0.55);
    }
    to {
      transform: scaleY(1);
    }
  }
  .tb-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }
  .tb-live em {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    animation: tbDot 1.6s ease-in-out infinite;
  }
  @keyframes tbDot {
    50% {
      opacity: 0.35;
    }
  }

  /* 6: lock */
  .tb-lock {
    position: relative;
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
    color: #9db8ff;
  }
  .tb-lock svg {
    width: 36px;
    height: 36px;
    position: relative;
    z-index: 1;
  }
  .tb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(125, 169, 255, 0.45);
    animation: tbRing 3.2s ease-out infinite;
  }
  @keyframes tbRing {
    0% {
      transform: scale(0.45);
      opacity: 0.8;
    }
    100% {
      transform: scale(1.15);
      opacity: 0;
    }
  }

  /* 7: voice */
  .tb-voice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }
  .tb-wave {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 56px;
  }
  .tb-wave i {
    width: 5px;
    height: 42px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.75);
    animation: tbWave 1.15s ease-in-out infinite alternate;
  }
  @keyframes tbWave {
    from {
      transform: scaleY(0.2);
    }
    to {
      transform: scaleY(1);
    }
  }
  .tb-voice-q {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  /* 8: integrations */
  .tb-int {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .tb-int i {
    font-style: normal;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 14px;
    animation: tbInt 6s ease infinite;
  }
  @keyframes tbInt {
    0% {
      color: rgba(255, 255, 255, 0.55);
      border-color: rgba(255, 255, 255, 0.12);
    }
    8% {
      color: #fff;
      border-color: rgba(125, 169, 255, 0.6);
    }
    22%,
    100% {
      color: rgba(255, 255, 255, 0.55);
      border-color: rgba(255, 255, 255, 0.12);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tb-wrap * {
      animation: none !important;
    }
    .tb-a,
    .tb-row,
    .tb-langs span:first-child {
      opacity: 1 !important;
    }
  }
  @media (max-width: 900px) {
    .tb-wrap {
      grid-template-columns: 1fr;
    }
    .tb-wide {
      grid-column: auto;
    }
    .tb-cell {
      min-height: 260px;
    }
  }

  /* Modules bento: inverted twin of the TAI grid - same cell anatomy,
     photo-free CSS vignettes on white */
  .modb {
    background: #fff;
    padding: 104px 0 112px;
    overflow-x: clip;
  }
  .modb-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #0a0d18;
    text-align: left;
    margin-bottom: 18px;
  }
  .modb-sub {
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(10, 13, 24, 0.55);
    max-width: 540px;
    margin: 0 0 52px;
    text-align: left;
  }
  /* ---- Module tab switcher (MaintainX-style: tabs on top, text left,
             visual right). Replaces the old modules slider. ---- */
  .modx {
    margin-top: 8px;
  }
  .modx-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    border-bottom: 1px solid rgba(10, 13, 24, 0.1);
    margin-bottom: 44px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .modx-tabs::-webkit-scrollbar {
    display: none;
  }
  .modx-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 18px 26px;
    font: inherit;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: rgba(10, 13, 24, 0.55);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
  }
  .modx-tab:hover {
    color: rgba(10, 13, 24, 0.85);
  }
  .modx-tab.active {
    color: #080808;
    border-bottom-color: rgb(32 85 255);
  }
  .modx-panels {
    position: relative;
  }
  .modx-panel {
    display: none;
  }
  .modx-panel.active {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 60px;
    align-items: center;
    animation: modxFade 0.35s ease;
  }
  @keyframes modxFade {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .modx-text h3 {
    font-size: clamp(24px, 2.6vw, 33px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: #080808;
    margin: 0 0 16px;
  }
  .modx-text p {
    font-size: 16.5px;
    line-height: 1.62;
    color: rgba(10, 13, 24, 0.6);
    margin: 0 0 20px;
    max-width: 420px;
  }
  .modx-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    max-width: 440px;
  }
  .modx-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(10, 13, 24, 0.74);
  }
  .modx-list li svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: rgb(32 85 255);
    margin-top: 1px;
  }
  .modx-text .mb-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 0;
    height: 48px;
    padding: 0 26px;
    border-radius: var(--r-md);
    background: var(--blue);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(45, 111, 247, 0.2);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .modx-text .mb-more:hover {
    background: #2360de;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -6px rgba(45, 111, 247, 0.5);
  }
  .modx-text .mb-more svg {
    transition: transform 0.18s ease;
  }
  .modx-text .mb-more:hover svg {
    transform: translateX(3px);
  }
  /* the down-scale/negative-margin hack only made sense in the slider;
         in the two-column tab layout the visual just fills its column */
  .modx-visual .viz {
    transform: none;
    margin-bottom: 0;
  }
  @media (max-width: 700px) {
    .modx {
      margin-top: 4px;
    }
    .modx-tabs {
      justify-content: flex-start;
      margin-bottom: 26px;
      gap: 0;
    }
    .modx-tab {
      font-size: 16.5px;
      padding: 14px 16px;
    }
    .modx-panel.active {
      grid-template-columns: 1fr;
      gap: 22px;
    }
    .modx-text p {
      max-width: none;
    }
  }
  /* module composite visuals (scoped to .modb) */
  .modb .viz {
    position: relative;
    aspect-ratio: 4/3;
    /* scale the whole composite (photo + fixed-px overlay cards) down as one
       unit so proportions stay identical; the negative margin reclaims the
       vertical space the scale frees, keeping rhythm with the caption + CTA.
       -13.5% = (1 - 0.82) * 0.75 (the 4:3 height ratio), so it tracks width. */
    transform: scale(0.82);
    transform-origin: top center;
    margin-bottom: -13.5%;
  }
  .modb .viz-photo {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 8%;
    bottom: 8%;
    border-radius: 20px;
    overflow: hidden;
    background: #0b0f1a;
    box-shadow: 0 34px 80px -26px rgba(15, 23, 41, 0.45);
  }
  .modb .viz-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .modb .fc {
    position: absolute;
    z-index: 2;
    background: #fff;
    border: 1px solid rgba(15, 23, 41, 0.06);
    border-radius: 14px;
    box-shadow: 0 22px 50px -18px rgba(15, 23, 41, 0.38);
    padding: 13px 15px;
    font-size: 12.5px;
    color: #101828;
  }
  .modb .fc-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #98a2b3;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .modb .fc-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .modb .fc-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 12.5px;
    color: #475467;
  }
  .modb .fc-ico {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid #eaecf0;
    color: transparent;
    font-size: 9px;
    flex: none;
  }
  .modb .fc-ico.ok {
    background: #2d6ff7;
    border-color: #2d6ff7;
    color: #fff;
  }
  .modb .fc-btn {
    margin-top: 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2d6ff7;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 7px 13px;
    border-radius: 8px;
  }
  .modb .dr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 6px 0;
    border-top: 1px solid #f2f4f7;
    font-size: 12px;
  }
  .modb .dr:first-of-type {
    border-top: 0;
  }
  .modb .dr span {
    color: #98a2b3;
  }
  .modb .dr b {
    font-weight: 600;
    color: #101828;
  }
  .modb .fc-foot {
    margin: 9px -15px -13px;
    padding: 9px 15px;
    background: linear-gradient(90deg, #2d6ff7, #5b8df9);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 0 0 13px 13px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .modb .st {
    font-size: 11px;
    font-weight: 600;
    color: #475467;
    background: #f2f4f7;
    border-radius: 7px;
    padding: 6px 10px;
  }
  .modb .st.done {
    background: #16a34a;
    color: #fff;
  }
  .modb .st.sev {
    background: #fee2e2;
    color: #b91c1c;
  }
  .modb .live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16c172;
    box-shadow: 0 0 0 0 rgba(22, 193, 114, 0.5);
    animation: modPulse 1.8s infinite;
  }
  @keyframes modPulse {
    70% {
      box-shadow: 0 0 0 6px rgba(22, 193, 114, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(22, 193, 114, 0);
    }
  }
  .modb .alert {
    display: flex;
    align-items: center;
    gap: 10px;
    border-color: rgba(239, 68, 68, 0.25);
  }
  .modb .alert-ic {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex: none;
  }
  .modb .alert b {
    font-size: 12.5px;
  }
  .modb .alert span {
    font-size: 11px;
    color: #98a2b3;
    display: block;
  }
  .modb .spark {
    display: block;
    margin-top: 8px;
    width: 150px;
    height: 34px;
  }
  .modb .prog {
    height: 5px;
    border-radius: 3px;
    background: #eef2f7;
    margin-top: 9px;
    overflow: hidden;
  }
  .modb .prog i {
    display: block;
    height: 100%;
    width: 62%;
    border-radius: 3px;
    background: linear-gradient(90deg, #2d6ff7, #5b8df9);
  }
  .modb .pin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: #101828;
    background: #fff;
    padding: 7px 12px;
    border-radius: 100px;
    box-shadow: 0 12px 30px -12px rgba(15, 23, 41, 0.4);
  }
  .modb .pin i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2d6ff7;
    box-shadow: 0 0 0 4px rgba(45, 111, 247, 0.18);
  }
  @keyframes modFloaty {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-9px);
    }
  }
  .modb .floaty {
    animation: modFloaty 6.5s ease-in-out infinite;
  }
  .modb .floaty.d1 {
    animation-delay: -1.6s;
  }
  .modb .floaty.d2 {
    animation-delay: -3.9s;
  }
  @media (prefers-reduced-motion: reduce) {
    .modb .floaty {
      animation: none;
    }
  }
  .mb-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(10, 13, 24, 0.1);
    border: 1px solid rgba(10, 13, 24, 0.1);
    border-radius: 16px;
    overflow: hidden;
  }
  .mb-cell {
    background: #fff;
    padding: 30px 28px 26px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: background 0.18s ease;
  }
  .mb-cell:hover {
    background: #fafbfd;
  }
  .mb-wide {
    grid-column: span 2;
  }
  .mb-vis {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    min-height: 180px;
  }
  .mb-card {
    display: block;
    background: #fff;
    border: 1px solid rgba(10, 13, 24, 0.12);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(10, 13, 24, 0.7);
    max-width: 270px;
    width: 100%;
    transition: transform 0.25s ease;
  }
  .mb-cell:hover .mb-card {
    transform: translateY(-3px);
  }
  .mb-card > b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0a0d18;
    margin-bottom: 3px;
  }
  .mb-high {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.1);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 5px;
    vertical-align: 1px;
  }
  .mb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 12px;
  }
  .mb-chips i {
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    color: rgb(32 85 255);
    background: rgba(32, 85, 255, 0.08);
    border: 1px solid rgba(32, 85, 255, 0.2);
    border-radius: 6px;
    padding: 4px 9px;
    animation: tbCite 9s ease infinite;
  }
  .mb-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: rgba(10, 13, 24, 0.6);
    white-space: nowrap;
  }
  .mb-bar {
    display: inline-block;
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(32, 85, 255, 0.14);
    overflow: hidden;
  }
  .mb-bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: rgb(32 85 255);
    animation: mbFill 4s ease-in-out infinite alternate;
  }
  @keyframes mbFill {
    from {
      width: 25%;
    }
    to {
      width: 85%;
    }
  }
  .mb-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(10, 13, 24, 0.75);
    padding: 5px 0;
    opacity: 0;
    animation: tbRow 10s ease infinite;
    margin-top: 2px;
  }
  .mb-check i {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid rgb(32 85 255);
    position: relative;
  }
  .mb-check i::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: 1px;
    width: 4px;
    height: 7px;
    border: solid rgb(32 85 255);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
  }
  .mb-iot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .mb-spark {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 56px;
  }
  .mb-spark i {
    width: 7px;
    border-radius: 3px;
    background: rgb(32 85 255);
    height: calc(var(--h) * 56px);
    transform-origin: bottom;
    animation: tbBar 2.2s ease-in-out infinite alternate;
  }
  .mb-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(10, 13, 24, 0.65);
  }
  .mb-live em {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    animation: tbDot 1.6s ease-in-out infinite;
  }
  .mb-ar {
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .mb-pin {
    position: relative;
    width: 96px;
    height: 96px;
    flex: none;
  }
  .mb-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: rgb(32 85 255);
  }
  .mb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(32, 85, 255, 0.45);
    animation: tbRing 3.2s ease-out infinite;
  }
  .mb-tag {
    font-size: 12.5px;
    font-weight: 600;
    color: #0a0d18;
    background: #fff;
    border: 1px solid rgba(10, 13, 24, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    transition: transform 0.25s ease;
  }
  .mb-cell:hover .mb-tag {
    transform: translateY(-3px);
  }
  .mb-amber {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
  }
  .mb-cycle {
    animation: mbCycle 8s ease infinite;
  }
  @keyframes mbCycle {
    0%,
    35% {
      opacity: 0;
      transform: translateY(4px);
    }
    45% {
      opacity: 1;
      transform: none;
    }
    85% {
      opacity: 1;
    }
    95%,
    100% {
      opacity: 0;
    }
  }
  .mb-cap {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(10, 13, 24, 0.55);
    max-width: 420px;
  }
  .mb-cap b {
    color: #080808;
    font-weight: 600;
  }
  .mb-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    color: #080808;
    font-weight: 500;
    white-space: nowrap;
    text-underline-offset: 3px;
  }
  .mb-more svg {
    transition: transform 0.18s ease;
  }
  .mb-cell:hover .mb-more {
    text-decoration: underline;
  }
  .mb-cell:hover .mb-more svg {
    transform: translateX(3px);
  }
  .mb-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    border: 1px solid var(--line, #e4e7ed);
    border-radius: 16px;
    padding: 26px 30px;
    margin-top: 24px;
    text-align: left;
  }
  .mb-banner p {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(10, 13, 24, 0.65);
    margin: 0;
    max-width: 620px;
  }
  @media (max-width: 900px) {
    .mb-wrap {
      grid-template-columns: 1fr;
    }
    .mb-wide {
      grid-column: auto;
    }
    .mb-cell {
      min-height: 260px;
    }
  }

  /* Integrations: Framer table grid - whitened logos, per-brand gradient
     lights up the cell on hover (set via --brand on each cell) */
  .intg {
    background: radial-gradient(
        ellipse 70% 40% at 50% 0%,
        rgba(45, 111, 247, 0.06),
        transparent 70%
      ),
      radial-gradient(
        ellipse 60% 50% at 50% 100%,
        rgba(122, 90, 248, 0.04),
        transparent 70%
      ),
      linear-gradient(180deg, var(--bg-pale) 0%, var(--bg-soft) 100%);
    padding: 104px 0 112px;
  }
  .intg-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--ink);
    text-align: left;
    margin-bottom: 18px;
  }
  .intg-sub {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-3);
    max-width: 540px;
    margin: 0 0 52px;
    text-align: left;
  }
  .ig-wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
  }
  .ig-cell {
    position: relative;
    background: #fff;
    padding: 24px 22px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    text-decoration: none;
    text-align: left;
  }
  .ig-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      130% 170% at 18% 0%,
      var(--brand) 0%,
      rgba(255, 255, 255, 0) 62%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .ig-cell:hover::before {
    opacity: 0.12;
  }
  .ig-cell > * {
    position: relative;
    z-index: 1;
  }
  .ig-logo {
    height: 22px;
    width: auto;
    max-width: 82%;
    object-fit: contain;
    object-position: left;
    align-self: flex-start;
    opacity: 1;
    transition: opacity 0.2s ease;
  }
  .ig-cell:hover .ig-logo {
    opacity: 1;
  }
  .ig-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .ig-cell span {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-3);
    transition: color 0.2s ease;
  }
  .ig-cell:hover span {
    color: var(--ink-2);
  }
  .ig-wide {
    grid-column: span 2;
  }
  .ig-logo-lg {
    height: 30px;
  }
  .ig-wide .ig-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-3);
    max-width: 380px;
  }
  .ig-wide .ig-desc b {
    color: var(--ink);
    font-weight: 600;
  }
  .ig-api {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-height: 96px;
  }
  .ig-sum {
    grid-column: span 2;
    min-height: 96px;
    justify-content: center;
    gap: 6px;
  }
  @media (max-width: 900px) {
    .ig-wrap {
      grid-template-columns: repeat(2, 1fr);
    }
    .ig-wide,
    .ig-api {
      grid-column: span 2;
    }
    .ig-cell {
      min-height: 120px;
    }
  }

  /* Who-uses: same marquee pattern as the industries rail, with role,
     headline, and description per card; photos reveal on hover */
  .awho {
    background: #000;
    padding: 104px 0 112px;
  }
  .aw-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #fff;
    text-align: left;
    margin-bottom: 52px;
  }
  .aw-marquee {
    overflow: hidden;
  }
  .aw-track {
    display: flex;
    width: max-content;
    animation: indScroll 55s linear infinite;
  }
  .aw-marquee:hover .aw-track {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce) {
    .aw-track {
      animation: none;
    }
  }
  .aw-card {
    position: relative;
    flex: none;
    width: 420px;
    min-height: 470px;
    margin-right: 16px;
    border-radius: 14px;
    overflow: hidden;
    background: #0b0b0d;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    /* the card is a link + a background image; disable the browser's
           native drag-ghost so pressing a card can't be dragged around */
    -webkit-user-drag: none;
    user-select: none;
  }
  .aw-ico {
    position: absolute;
    top: 26px;
    left: 30px;
    z-index: 1;
    color: rgba(255, 255, 255, 0.85);
  }
  .aw-ico svg {
    width: 26px;
    height: 26px;
  }
  .aw-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* stop the native image drag-ghost when a card is clicked/held */
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    pointer-events: none;
    opacity: 0;
    filter: brightness(0.42);
    transform: scale(1.04);
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .aw-card:hover img {
    opacity: 1;
    transform: scale(1);
  }
  .aw-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding: 0 30px 28px;
  }
  .aw-role {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: -0.005em;
  }
  .aw-name {
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.015em;
    line-height: 1.25;
  }
  .aw-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 330px;
  }
  .aw-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    text-underline-offset: 3px;
    transition: color 0.18s ease;
  }
  .aw-more svg {
    transition: transform 0.18s ease;
  }
  .aw-card:hover .aw-more {
    color: #fff;
    text-decoration: underline;
  }
  .aw-card:hover .aw-more svg {
    transform: translateX(3px);
  }
  .aw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  .aw-nav {
    display: none;
  }
  @media (max-width: 700px) {
    .aw-card {
      width: 300px;
      min-height: 400px;
    }
    .aw-nav {
      display: flex;
      gap: 10px;
      flex: none;
      margin-top: 4px;
    }
    .aw-nav .ms-arrow {
      display: grid;
      position: static;
      width: 40px;
      height: 40px;
    }
    /* Mobile: continuous marquee becomes a swipeable, snap-per-card carousel */
    .awho .aw-marquee {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      cursor: grab;
    }
    .awho .aw-marquee::-webkit-scrollbar {
      display: none;
    }
    .awho .aw-marquee.is-dragging {
      cursor: grabbing;
      scroll-snap-type: none;
    }
    .awho .aw-track {
      animation: none;
      padding: 0 calc((100vw - 300px) / 2);
    }
    .awho .aw-card {
      scroll-snap-align: center;
    }
    .awho .aw-card[aria-hidden="true"] {
      display: none;
    }
    /* Active slide mirrors the hover state (photo revealed) */
    .awho .aw-card.is-active img {
      opacity: 1;
      transform: scale(1);
    }
    .awho .aw-card.is-active .aw-more {
      color: #fff;
      text-decoration: underline;
    }
  }

  /* Named guest cursor inside the live-demo section (app/html-scripts.jsx) */
  .proto {
    position: relative;
  }
  @media (pointer: fine) {
    .proto,
    .proto * {
      cursor: none;
    }
  }
  .guest-cursor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .guest-cursor.on {
    opacity: 1;
  }
  .guest-cursor svg {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
    transform-origin: 4.6px 2.8px;
  }
  .gc-label {
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(32 85 255);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
    transform-origin: 0 50%;
    will-change: transform;
  }

  /* Capture section: contained rounded video card + quiet checklist row */
  .capv {
    background: #000;
    padding: 104px 0 112px;
  }
  .capv .modb-title {
    color: #fff;
  }
  .capv .modb-sub {
    margin-bottom: 44px;
    color: rgba(255, 255, 255, 0.55);
  }
  .capv-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 21 / 10;
    background: #0b0b0d;
  }
  .capv-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .capv-chip {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: #fff;
    background: rgba(8, 10, 18, 0.55);
    backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 8px 13px;
  }
  .capv-points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 28px;
  }
  .capv-points span {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    text-align: left;
  }
  .capv-points i {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.5px solid rgb(32 85 255);
    position: relative;
  }
  .capv-points i::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.5px;
    width: 4px;
    height: 7px;
    border: solid rgb(32 85 255);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
  }
  @media (max-width: 900px) {
    .capv-points {
      grid-template-columns: 1fr 1fr;
    }
    .capv-media {
      aspect-ratio: 16 / 10;
    }
  }

  /* Enterprise bento: dark twin cells with security/uptime vignettes */
  .entb {
    background: #000;
    padding: 104px 0 112px;
  }
  .entb .taib-title {
    margin-bottom: 52px;
  }
  .ent-cry {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
  .ent-cry-line {
    position: relative;
    display: block;
    height: 22px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
  }
  .ent-cry-line em {
    position: absolute;
    inset: 0;
    font-style: normal;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ent-plain {
    animation: entCry 6s ease infinite;
  }
  .ent-cipher {
    color: #9db8ff;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    opacity: 0;
    animation: entCry 6s ease 3s infinite;
  }
  @keyframes entCry {
    0% {
      opacity: 0;
    }
    8%,
    42% {
      opacity: 1;
    }
    50%,
    100% {
      opacity: 0;
    }
  }
  .ent-tag {
    display: inline-block;
    font-style: normal;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 4px 10px;
  }
  .ent-tenants {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .ent-tenant {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    background: #101014;
  }
  .ent-tenant-hl {
    color: #fff;
    background: rgba(32, 85, 255, 0.16);
  }
  .ent-tenant-hl .tb-ring {
    border-radius: 12px;
    border-color: rgba(125, 169, 255, 0.5);
  }
  .ent-up {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .ent-ticks {
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .ent-ticks i {
    width: 4px;
    height: 26px;
    border-radius: 2px;
    background: #10b981;
    opacity: 0.85;
  }
  .ent-tick-heal {
    animation: entHeal 7s ease infinite;
  }
  @keyframes entHeal {
    0%,
    55% {
      background: #10b981;
    }
    60%,
    75% {
      background: #f59e0b;
    }
    82%,
    100% {
      background: #10b981;
    }
  }
  .ent-up-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.7);
  }
  .ent-up-label em {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    animation: tbDot 1.6s ease-in-out infinite;
  }
  .ent-int i {
    font-size: 12.5px;
  }
  .ent-link {
    text-decoration: none;
    transition: background 0.18s ease;
  }
  .ent-link:hover {
    background: #0b0b0e;
  }
  .ent-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #fff;
    text-underline-offset: 4px;
  }
  .ent-more svg {
    transition: transform 0.18s ease;
  }
  .ent-link:hover .ent-more {
    text-decoration: underline;
  }
  .ent-link:hover .ent-more svg {
    transform: translateX(3px);
  }

  /* Testimonials: signature cards; company photo + tilt reveal on hover */
  .tst {
    background: #f5f6f8;
    padding: 104px 0 112px;
    overflow-x: clip;
  }
  .tst-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 52px;
  }
  .tst-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #0a0d18;
    text-align: left;
    margin: 0;
  }
  .tst-nav {
    display: flex;
    gap: 10px;
    flex: none;
  }
  .tst-nav .ms-arrow {
    position: static;
  }
  .tslider {
    position: relative;
    margin-left: calc(50% - 50vw / 0.96);
    margin-right: calc(50% - 50vw / 0.96);
  }
  .ts-view {
    overflow: hidden;
  }
  .ts-track {
    display: flex;
    gap: 16px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }
  .ts-track.dragging {
    cursor: grabbing;
  }
  .ts-slide {
    flex: none;
    width: min(420px, 82%);
  }
  .ts-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 440px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    padding: 30px 30px 28px;
  }
  .ts-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: brightness(0.45);
    transform: scale(1.04);
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .ts-card:hover .ts-bg {
    opacity: 1;
    transform: scale(1);
  }
  .ts-card > *:not(.ts-bg) {
    position: relative;
    z-index: 1;
  }
  .ts-ava {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;
    background: #f0f1f4;
  }
  .ts-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ts-quote {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(10, 13, 24, 0.75);
    margin: 0 0 24px;
    transition: color 0.3s ease;
  }
  .ts-sig {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
  }
  .ts-sig b {
    font-family: "Freehand", "Codec Pro", cursive;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #0a0d18;
    transition: color 0.3s ease;
  }
  .ts-sig i {
    font-style: normal;
    font-size: 13px;
    color: rgba(10, 13, 24, 0.55);
    transition: color 0.3s ease;
  }
  .ts-card:hover .ts-quote {
    color: rgba(255, 255, 255, 0.88);
  }
  .ts-card:hover .ts-sig b {
    color: #fff;
  }
  .ts-card:hover .ts-sig i {
    color: rgba(255, 255, 255, 0.7);
  }
  @media (max-width: 700px) {
    .tst-head {
      flex-direction: column;
      align-items: flex-start;
    }
    .ts-slide {
      width: 90%;
    }
  }

  /* Modules slider: infinite, autoplaying, draggable (logic in
     app/html-scripts.jsx); neighbours peek at both edges */
  .mslider {
    position: relative;
    margin-top: 56px;
    /* full-bleed: the rail runs from window edge to window edge.
       50vw is divided by the body's zoom (0.96) because vw units ignore
       zoom; slight overshoot is clipped by the page's overflow-x. */
    margin-left: calc(50% - 50vw / 0.96);
    margin-right: calc(50% - 50vw / 0.96);
  }
  .ms-view {
    overflow: hidden;
  }
  .ms-track {
    display: flex;
    gap: 20px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }
  .ms-track.dragging {
    cursor: grabbing;
  }
  .ms-slide {
    flex: none;
    width: min(860px, 80%);
  }
  .ms-card .mod-visual {
    border-radius: 16px;
    overflow: hidden;
    /* transformed/animated children escape border-radius clipping without
       their own compositing layer on the clipper */
    transform: translateZ(0);
  }
  .ms-card {
    display: flex;
    flex-direction: column;
  }
  .ms-cap {
    order: -1; /* title/caption sits above the visual, not below */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0 4px 20px;
    margin: 0;
  }
  .ms-cap b {
    font-size: 16px;
    font-weight: 600;
    color: #080808;
    letter-spacing: -0.01em;
  }
  .ms-cap > span {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(10, 13, 24, 0.55);
    max-width: 560px;
  }
  .ms-cap .mb-more {
    margin: 4px 0 0;
  }
  .ms-cap .mb-more:hover {
    text-decoration: underline;
  }
  .ms-cap .mb-more:hover svg {
    transform: translateX(3px);
  }
  .ms-arrow {
    position: absolute;
    top: 42%;
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line, #e4e7ed);
    display: grid;
    place-items: center;
    color: #0a0d18;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .ms-arrow:hover {
    background: #f4f6f8;
  }
  .ms-prev {
    left: 28px;
  }
  .ms-next {
    right: 28px;
  }
  /* Carousel dots are static in the markup but only shown on mobile, where
         the carousels become native scroll-snap; the mobile rule below flips
         this to flex. */
  .car-dots {
    display: none;
  }
  @media (max-width: 700px) {
    /* The 0.96 body zoom (a desktop density tweak) breaks position:fixed on
           mobile - the menu overlay mispositions and leaves a gap under the nav.
           At phone size the 4% scale is imperceptible, so drop it here. */
    body {
      zoom: 1;
    }
    .ms-arrow {
      display: none;
    }
    /* the desktop down-scale only exists to balance the big side-by-side
           layout; on phones it just shrinks the card and leaves dead space,
           so let the composite fill the slide at full size. */
    .modb .viz {
      transform: none;
      margin-bottom: 0;
    }
    /* Mobile carousels use native CSS scroll-snap instead of the JS
           transform (which relied on zoom + full-bleed vw math that drifts on
           iOS Safari, leaving cards half-shown). The JS carousel bails on
           mobile - see initCarousel in app/html-scripts.jsx. */
    .mslider,
    .tslider {
      margin-left: 0;
      margin-right: 0;
    }
    .ms-view,
    .ts-view {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 4px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .ms-view::-webkit-scrollbar,
    .ts-view::-webkit-scrollbar {
      display: none;
    }
    .ms-track,
    .ts-track {
      transform: none !important;
      gap: 14px;
      padding: 0 4px;
      cursor: default;
      /* the JS carousel set pan-y to reserve horizontal for its own drag
             handler; native scroll needs the browser to own horizontal panning */
      touch-action: auto;
    }
    .ms-slide,
    .ts-slide {
      width: 86%;
      scroll-snap-align: start;
    }
    /* The floating overlay cards keep fixed-px sizing, so on the smaller
           phone-width viz they read oversized and overlap. Scale each bubble
           down proportionally (box + content together) to fit the card. */
    .modb .fc {
      zoom: 0.74;
    }
    /* obvious swipe affordance under each mobile carousel */
    .car-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 18px;
    }
    .car-dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(10, 13, 24, 0.2);
      cursor: pointer;
      transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
    }
    .car-dot.active {
      width: 22px;
      border-radius: 4px;
      background: rgb(32 85 255);
    }
  }

  /* ---------- STATS UPGRADE ---------- */
  .stats {
    position: relative;
  }
  .stat-cell.feat {
    background: rgb(32 85 255);
    border-color: transparent;
    color: #fff;
  }
  .stat-cell.feat:hover {
    background: rgb(32 85 255);
  }
  .stat-cell.feat .stat-num {
    color: #fff;
  }
  .stat-cell.feat .stat-num .unit {
    color: #fff;
    font-size: 56px;
    font-weight: 700;
    margin-left: 0;
  }
  .stat-cell.feat .stat-label {
    color: rgba(255, 255, 255, 0.85);
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1024px) {
    .tai-stage {
      grid-template-columns: 1fr;
    }
    .showcase-panel.active {
      grid-template-columns: 1fr;
    }
    .hero-float-1 {
      left: 8px;
      top: 12%;
    }
    .hero-float-2 {
      right: 8px;
      top: 60%;
    }
    .spatial-stage {
      grid-template-columns: 1fr;
    }
    .spatial-link {
      min-height: 60px;
    }
    .spatial-link-line {
      left: 0;
      right: 0;
      top: 50%;
      bottom: auto;
      width: 100%;
      height: 1px;
      transform: none;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(125, 169, 255, 0.4) 20%,
        rgba(125, 169, 255, 0.4) 80%,
        transparent
      );
    }
    .spatial-link-pulse {
      left: auto;
      top: 50%;
      transform: translateY(-50%);
    }
    .spatial-link-pulse:nth-child(2) {
      left: 15%;
      top: 50%;
    }
    .spatial-link-pulse:nth-child(3) {
      left: 35%;
      top: 50%;
    }
    .spatial-link-pulse:nth-child(5) {
      left: 65%;
      top: 50%;
    }
    .spatial-link-pulse:nth-child(6) {
      left: 85%;
      top: 50%;
    }
    .capture-grid {
      grid-template-columns: 1fr;
    }
    .integrations-stage {
      grid-template-columns: 1fr;
    }
    .industries-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 960px) {
    .nav-links,
    .nav-login,
    .nav-studio {
      display: none;
    }
    .nav-cta .btn-secondary {
      display: none;
    }
    .nav-inner {
      gap: 12px;
    }
    .hero {
      padding: 64px 0 48px;
    }
    .stats-grid {
      grid-template-columns: 1fr 1fr;
    }
    .testimonials-grid .tcard {
      flex-basis: 85vw;
    }
    .ent-grid {
      grid-template-columns: 1fr;
    }
    section.std,
    .tai-section,
    .showcase,
    .stats,
    .testimonials,
    .enterprise,
    .cta,
    .personas,
    .spatial,
    .capture,
    .integrations {
      padding: 80px 0;
    }
    .industries {
      padding: 64px 0 72px;
    }
    .cta-card {
      padding: 56px 28px;
    }
    .hero-float {
      display: none;
    }
  }
  @media (max-width: 560px) {
    .container {
      padding: 0 20px;
    }
    .stats-grid {
      grid-template-columns: 1fr;
    }
    .tcard.featured .tcard-text {
      font-size: 18px;
    }
    .showcase-ar {
      grid-template-columns: 1fr;
    }
    .logos-track span {
      font-size: 20px;
    }
    .industries-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .vidflow {
      grid-template-columns: 1fr;
    }
    .vidflow-arrow {
      transform: rotate(90deg);
    }
    .integ-note {
      flex-direction: column;
      text-align: center;
    }
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .fade-up {
    animation: fadeUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .fade-delay-1 {
    animation-delay: 0.1s;
  }
  .fade-delay-2 {
    animation-delay: 0.2s;
  }
  .fade-delay-3 {
    animation-delay: 0.3s;
  }

  /* ============================ WHO-USES, magazine grid ============================ */
  .alt-who {
    background: var(--bg);
    padding: 96px 0 96px;
  }
  .alt-lead-dark {
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.5;
    margin: 14px 0 0;
  }
  .alt-who-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 340px 240px 240px;
    gap: 18px;
  }
  .alt-who-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 30px -12px rgba(15, 23, 41, 0.25);
    isolation: isolate;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .alt-who-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -16px rgba(15, 23, 41, 0.35);
  }
  .alt-who-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
  }
  .alt-who-card:hover .alt-who-photo {
    transform: scale(1.04);
  }
  .alt-who-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(15, 23, 41, 0) 30%,
      rgba(15, 23, 41, 0.92) 100%
    );
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
  }
  .alt-who-tag {
    align-self: start;
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
  }
  .alt-who-overlay strong {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .alt-who-overlay p {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
  }
  .alt-who-lead {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  .alt-who-tall {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .alt-who-card[data-persona="eng"] {
    grid-column: 1;
    grid-row: 2;
  }
  .alt-who-card[data-persona="safety"] {
    grid-column: 2;
    grid-row: 2;
  }
  .alt-who-wide {
    grid-column: 1 / span 3;
    grid-row: 3;
  }
  .alt-who-lead .alt-who-overlay strong {
    font-size: 26px;
  }
  .alt-who-lead .alt-who-overlay p {
    font-size: 14px;
  }
  .alt-who-tall .alt-who-overlay strong {
    font-size: 22px;
  }
  .alt-who-wide .alt-who-overlay strong {
    font-size: 22px;
  }

  @media (max-width: 900px) {
    .alt-who-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, 280px);
    }
    .alt-who-lead,
    .alt-who-tall,
    .alt-who-wide,
    .alt-who-card[data-persona="eng"],
    .alt-who-card[data-persona="safety"] {
      grid-column: 1;
      grid-row: auto;
    }
  }

  .alt-who-card.who-highlight {
    outline: 3px solid var(--blue);
    outline-offset: 4px;
    box-shadow: 0 0 0 10px rgba(45, 111, 247, 0.14),
      0 30px 60px -15px rgba(15, 23, 41, 0.3);
    animation: whoPulse 1.1s ease 2;
  }
  @keyframes whoPulse {
    0%,
    100% {
      outline-color: var(--blue);
    }
    50% {
      outline-color: rgba(45, 111, 247, 0.25);
    }
  }


  .nav-studio {
    background: #fff !important;
    border: 1px solid #e4e7ed !important;
    color: #0a0d18 !important;
    padding: 7px 14px 7px 9px !important;
    gap: 9px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04) !important;
  }
  .nav-studio-spark {
    width: 18px !important;
    height: 18px !important;
  }
  .nav-studio-spark svg {
    width: 11px !important;
    height: 11px !important;
  }
  .nav-studio-text strong {
    color: #0a0d18 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }
  .nav-studio-arrow {
    color: #667085 !important;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .nav-studio:hover {
    border-color: rgba(30, 58, 138, 0.55) !important;
    box-shadow: 0 10px 24px -8px rgba(30, 58, 138, 0.55) !important;
    transform: translateY(-1px) !important;
  }
  .nav-studio:hover .nav-studio-arrow {
    color: #1e3a8a !important;
  }


  /* ---------- LOGOS marquee ---------- */
  .logos {
    background: #ffffff;
    padding: 60px 0 64px;
    position: relative;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .logos-label {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    margin-bottom: 36px;
  }
  .logos-marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 10%,
      #000 90%,
      transparent
    );
  }
  .logos-track {
    display: flex;
    align-items: center;
    gap: 60px;
    animation: marquee 55s linear infinite;
    width: max-content;
    padding-right: 60px;
  }
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  .logos-track img {
    height: 34px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    flex: none;
    opacity: 1;
    transition: transform 0.25s ease;
  }
  .logos-track img:hover {
    transform: scale(1.06);
  }
  /* NNPC wordmark carries internal padding; render larger so it matches the
     visual weight of the neighbouring logos in the rail */
  .logos-track img[src*="nnpc"] {
    height: 54px;
  }


    /* ============ Clean flat navbar (Webflow-style redesign) ============
       Self-contained: nv-* classes only; the legacy nav-* CSS in the page
       style block no longer matches anything. Root keeps class .nav so the
       central scroll handler (app/html-scripts.jsx) still targets it. */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #fff !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      border-bottom: 1px solid #e9ecf1;
      padding: 0 !important;
      transition: background 0.25s ease, border-color 0.25s ease;
    }
    /* Neutralise the legacy pill-morph on scroll; keep a soft shadow cue. */
    .nav.scrolled {
      padding-top: 0 !important;
      background: #fff !important;
      border-bottom-color: #e9ecf1 !important;
      box-shadow: none;
    }
    .nv-inner {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 24px;
      height: 64px;
      display: flex;
      align-items: center;
    }
    .nv-logo {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      flex: none;
      color: #080808;
      text-decoration: none;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .nv-logo img {
      width: 28px;
      height: 28px;
      display: block;
    }

    .nv-links {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-left: 20px;
      flex: 1;
    }
    .nv-top {
      position: relative;
      background: none;
      border: 0;
      cursor: pointer;
      font: inherit;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: #080808;
      text-decoration: none;
      padding: 21px 14px;
      line-height: 22px;
      display: inline-flex;
      align-items: center;
      transition: color 0.14s ease;
    }
    .nv-top::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 0;
      height: 2px;
      background: var(--blue, #2055ff);
      border-radius: 2px;
      opacity: 0;
      transform: scaleX(0.4);
      transform-origin: left center;
      transition: opacity 0.16s ease, transform 0.2s ease;
    }
    .nv-top:hover::after,
    .nv-item:hover > .nv-top::after,
    .nv-item:focus-within > .nv-top::after {
      opacity: 1;
      transform: scaleX(1);
    }

    /* Full-width dropdown panel, anchored under the bar */
    .nv-panel {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #fff;
      border-bottom: 1px solid #e6e8ee;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 0.16s ease,
        transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
        visibility 0s linear 0.16s;
    }
    .nv-item:hover .nv-panel,
    .nv-item:focus-within .nv-panel {
      opacity: 1;
      visibility: visible;
      transform: none;
      pointer-events: auto;
      transition-delay: 0s;
    }
    .nv-panel-in {
      max-width: 1240px;
      margin: 0 auto;
      padding: 42px 24px 44px;
    }
    .nv-cols {
      display: grid;
      gap: 28px;
    }
    .nv-cols-5 {
      grid-template-columns: repeat(5, 1fr);
    }
    .nv-cols-res {
      grid-template-columns: 1fr 1fr 420px;
      align-items: stretch;
    }
    .nv-side {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .nv-side .nv-promo {
      flex: 1;
    }
    .nv-eyebrow {
      font-size: 14px;
      font-weight: 400;
      color: #6b7180;
      margin-bottom: 16px;
    }
    .nv-link {
      display: block;
      text-decoration: none;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: -0.014em;
      color: #0b0d12;
      padding: 9px 0;
      line-height: 1.3;
      transition: color 0.12s ease;
    }
    .nv-link:hover {
      color: var(--blue, #2055ff);
    }
    .nv-new {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: var(--blue, #2055ff);
      margin-left: 5px;
      vertical-align: super;
    }

    /* Promo cards */
    .nv-promos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 38px;
    }
    .nv-promo {
      display: block;
      text-decoration: none;
      border-radius: 10px;
      padding: 20px 22px;
      background: linear-gradient(
        105deg,
        var(--blue, #2055ff) 0%,
        #1436b8 55%,
        #0d1430 100%
      );
      color: #fff;
      transition: filter 0.15s ease, transform 0.18s ease;
    }
    .nv-promo:hover {
      filter: brightness(1.1);
      transform: translateY(-1px);
    }
    .nv-promo strong {
      display: block;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin-bottom: 4px;
    }
    .nv-promo span {
      font-size: 13px;
      line-height: 1.45;
      color: rgba(255, 255, 255, 0.78);
    }
    .nv-promo-ink {
      background: linear-gradient(
        105deg,
        #0d1430 0%,
        #1a2350 55%,
        #1436b8 100%
      );
    }

    /* Right side */
    .nv-cta {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-left: auto;
      flex: none;
    }
    .nv-txt {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: #080808;
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.14s ease;
    }
    .nv-txt:hover {
      color: var(--blue, #2055ff);
    }
    .nv-txt svg {
      opacity: 0.55;
      transition: opacity 0.14s ease, transform 0.18s ease;
    }
    .nv-txt:hover svg {
      opacity: 1;
      transform: translate(1px, -1px);
    }
    .nv-btn {
      background: var(--blue, #2055ff);
      color: #fff !important;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 12px 20px;
      border-radius: 8px;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.15s ease;
    }
    .nv-btn:hover {
      background: #1a46d9;
    }

    @media (max-width: 960px) {
      .nv-links,
      .nv-txt {
        display: none;
      }
      .nv-inner {
        height: 60px;
      }
    }
    @media (max-width: 460px) {
      .nv-btn {
        display: none;
      }
    }

    /* Over-hero mode: on the home page (marked by its [data-hero-burst]
       backdrop) the bar starts transparent with a hairline outline and white
       text; the central scroll handler adds .scrolled, flipping it to the
       solid white bar. Other pages keep the solid bar from the start. */
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      ) {
      background: transparent !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      )
      .nv-logo,
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      )
      .nv-top,
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      )
      .nv-txt {
      color: #fff;
    }
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      )
      .nv-top:hover,
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      )
      .nv-item:hover
      > .nv-top,
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      )
      .nv-item:focus-within
      > .nv-top,
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      )
      .nv-txt:hover {
      color: var(--blue-light, #7da9ff);
    }
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      )
      .nv-top::after {
      background: var(--blue-light, #7da9ff);
    }
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      )
      .mnav-burger {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.35);
    }
    #page-html:has([data-hero-burst])
      .nav:not(.scrolled):not(:hover):not(:focus-within):not(
        :has(.mnav-burger.open)
      )
      .mnav-burger
      span {
      background: #fff;
    }

    /* Announcement banner above the bar (scrolls away; the bar stays sticky) */
    .nv-banner {
      background: var(--blue, #2055ff);
      text-align: center;
      padding: 9px 16px;
    }
    .nv-banner-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #fff;
      text-decoration: none;
      font-size: 13.5px;
      font-weight: 500;
      letter-spacing: -0.005em;
    }
    .nv-banner-link svg {
      transition: transform 0.15s ease;
    }
    .nv-banner-link:hover svg {
      transform: translateX(2px);
    }
    @media (max-width: 640px) {
      .nv-banner-link {
        font-size: 12.5px;
      }
    }

    /* Page dims behind an open dropdown (sits below all nav content) */
    .nv-scrim {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: 100vh;
      z-index: -1;
      background: rgba(8, 10, 18, 0.44);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .nav:has(.nv-item:hover) .nv-scrim,
    .nav:has(.nv-item:focus-within) .nv-scrim {
      opacity: 1;
    }

    /* ============ Mobile menu: full sheet with drill-in levels ============ */
    .mnav-burger {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line, #e4e7ed);
      background: #fff;
      border-radius: 11px;
      cursor: pointer;
      padding: 0;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
      flex: none;
    }
    .mnav-burger span {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 2px;
      background: #0a0d18;
      transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
    }
    .mnav-burger.open span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }
    .mnav-burger.open span:nth-child(2) {
      opacity: 0;
    }
    .mnav-burger.open span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }
    .mnav {
      position: fixed;
      left: 0;
      right: 0;
      top: 64px;
      bottom: 0;
      z-index: 190;
      background: #fff;
    }
    .mnav[hidden] {
      display: none;
    }
    /* When the menu is open, drop the announcement banner so the sticky nav bar
       pins to the top - otherwise the banner offsets the bar and the fixed
       overlay covers the close (X) button. Keep the bar above the overlay. */
    #page-html:has(.mnav-burger.open) .nv-banner {
      display: none;
    }
    #page-html:has(.mnav-burger.open) .nav {
      z-index: 200;
    }
    .mnav-sheet {
      height: 100%;
      display: flex;
      flex-direction: column;
      animation: mnavIn 0.24s ease;
    }
    @keyframes mnavIn {
      from {
        opacity: 0;
        transform: translateY(-6px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    .mnav-track {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
    .mnav-view {
      position: absolute;
      inset: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 8px 22px 24px;
      background: #fff;
      transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
        opacity 0.24s ease;
    }
    .mnav-sheet.sub .mnav-view-root {
      transform: translateX(-18%);
      opacity: 0;
      pointer-events: none;
    }
    .mnav-view-sub {
      transform: translateX(100%);
      opacity: 0;
      pointer-events: none;
    }
    .mnav-view-sub.active {
      transform: none;
      opacity: 1;
      pointer-events: auto;
    }
    .mnav-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: 0;
      border-bottom: 1px solid #ececf0;
      cursor: pointer;
      font: inherit;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: #080808;
      text-decoration: none;
      text-align: left;
      padding: 17px 2px;
    }
    .mnav-item svg {
      color: #9aa1ad;
      flex: none;
    }
    .mnav-back {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: none;
      border: 0;
      cursor: pointer;
      font: inherit;
      font-size: 15px;
      font-weight: 500;
      color: #6b7180;
      padding: 14px 2px 6px;
    }
    .mnav-eyebrow {
      font-size: 12.5px;
      font-weight: 400;
      color: #6b7180;
      margin: 18px 0 4px;
    }
    .mnav-sub-link {
      display: block;
      text-decoration: none;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: -0.012em;
      color: #0b0d12;
      padding: 9px 2px;
    }
    .mnav-foot {
      padding: 14px 22px calc(18px + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid #ececf0;
    }
    .mnav-cta {
      display: block;
      text-align: center;
      text-decoration: none;
      background: var(--blue, #2055ff);
      color: #fff !important;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.01em;
      padding: 14px;
      border-radius: 8px;
    }
    @media (max-width: 960px) {
      .mnav-burger {
        display: inline-flex;
      }
    }
  

    /* ---- new video hero (scoped, self-contained) ---- */
    .vhero {
      position: relative;
      z-index: 1; /* paint over .logos, like the old hero */
      margin-top: -65px; /* tuck the bg under the in-flow nav */
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      padding: 84px 0 56px; /* clear the nav, breathe at the bottom */
      overflow: hidden;
      overflow-x: clip;
      color: #fff;
    }
    .vhero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .vhero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        180deg,
        rgba(5, 9, 19, 0.82) 0%,
        rgba(15, 23, 41, 0.9) 55%,
        rgba(5, 9, 19, 0.96) 100%
      );
    }
    .vhero-inner {
      position: relative;
      z-index: 3;
      flex: 1;
      display: flex;
      align-items: center;
      gap: clamp(32px, 4vw, 64px);
      width: 100%;
      max-width: 1440px; /* stops the content spreading on wide monitors */
      margin: 0 auto;
      padding: 0 clamp(24px, 4vw, 56px);
    }
    .vh-copy {
      flex: 1 1 auto;
      min-width: 0;
    }
    .vhero .vh-title {
      font-family: "Codec Pro", "Inter", sans-serif;
      font-size: clamp(2.2rem, 3.9vw, 3.9rem);
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -0.02em;
      margin: 0 0 clamp(28px, 4vw, 60px);
      color: #fff;
      text-wrap: balance;
    }
    .vhero .vh-title em {
      font-style: normal;
      color: #7da9ff;
      font-weight: 700;
      /* ShinyText — matches the live site: a white shine sweeps across the
         blue base (speed 2s, spread 120deg, gliding left). */
      background-image: linear-gradient(
        120deg,
        #7da9ff 0%,
        #7da9ff 35%,
        #ffffff 50%,
        #7da9ff 65%,
        #7da9ff 100%
      );
      background-size: 200% auto;
      background-position: 150% center;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      padding: 0.2em 0.14em 0.2em 0;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      animation: vhHeroShine 2s linear infinite;
    }
    @keyframes vhHeroShine {
      from {
        background-position: 150% center;
      }
      to {
        background-position: -50% center;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .vhero .vh-title em {
        animation: none;
      }
    }
    .vh-sub {
      font-size: clamp(16px, 1.4vw, 19.5px);
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.74);
      max-width: 48ch;
      margin: 0;
    }
    .vh-media {
      flex: 0 0 47%; /* proportion of the container, scales with both columns */
      max-width: 720px;
    }
    .vh-stage {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      background: #050813;
      aspect-ratio: 16 / 9;
      width: 100%;
      box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7);
    }
    .vh-stage video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .vh-trust {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(24px, 3vw, 48px);
      width: 100%;
      max-width: 1440px;
      margin: 72px auto 0;
      padding: 0 clamp(24px, 4vw, 56px);
    }
    .vh-stat {
      display: flex;
      flex-direction: column;
      gap: 5px;
      position: relative;
      padding-left: 16px;
      min-width: 0;
    }
    .vh-stat::before {
      content: "";
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      width: 3px;
      border-radius: 3px;
      background: linear-gradient(#7da9ff, #c4b5fd);
    }
    .vh-stat b {
      font-family: "Codec Pro", "Inter", sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: #fff;
      line-height: 1.12;
      letter-spacing: -0.015em;
      text-wrap: balance;
    }
    .vh-stat span {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.58);
      line-height: 1.35;
    }
    @media (max-width: 1024px) {
      .vh-media {
        flex-basis: 50%;
      }
    }
    @media (max-width: 860px) {
      .vhero {
        min-height: 0;
        padding: 96px 0 48px;
      }
      .vhero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
      }
      .vh-media {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
      }
      .vh-trust {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 20px;
        margin-top: 40px;
      }
    }
    @media (max-width: 520px) {
      .vh-trust {
        grid-template-columns: 1fr 1fr;
      }
    }
  

:root{--taib-brain:url("/assets/cw/tai-brain.png")}
/* new design centers the head; site base .taib-title/.taib-sub are left-aligned */
.taib .taib-head .taib-title{text-align:center;margin:0 0 12px}
.taib .taib-head .taib-sub{text-align:center;margin-left:auto;margin-right:auto}

      /* TAI brain section, option B. All classes are taib- prefixed: .cap, .g and
         friends are already in use elsewhere on this page. */
      .taib { overflow: hidden; }
      .taib .container { position: relative; z-index: 1; }
      .taib-glow { position: absolute; inset: 0; pointer-events: none;
        background: radial-gradient(ellipse 50% 46% at 50% 32%, rgba(45,111,247,.24), transparent 70%); }
      .taib-head { max-width: 640px; margin: 0 auto 34px; text-align: center; }
      .taib .taib-title, .taib .taib-sub { text-align: center; }
      .taib .taib-sub { margin: 0 auto; max-width: 52ch; }
      .taib-kick { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
        letter-spacing: .16em; text-transform: uppercase; color: #7da9ff; margin: 0 0 14px; }
      .taib-kick i { width: 5px; height: 5px; border-radius: 50%; background: #7da9ff; box-shadow: 0 0 8px #7da9ff; }

      /* symmetric columns: an asymmetric pair puts the brain off the true centre */
      .taib-caprow, .taib-flow { display: grid; grid-template-columns: 1fr 84px 236px 84px 1fr; }
      .taib-caprow { margin: 0 0 12px; }
      .taib-flow { grid-template-rows: auto auto; align-items: stretch; }
      .taib-fcap { font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
        text-transform: uppercase; color: rgba(255,255,255,.46); margin: 0;
        text-align: right; }
      .taib-fcap.r { text-align: left; }
      .taib-col { display: flex; flex-direction: column; }
      .taib-col.l { grid-area: 1 / 1; } .taib-col.r { grid-area: 1 / 5; }
      .taib-gap-in { grid-area: 1 / 2; } .taib-gap-out { grid-area: 1 / 4; }
      .taib-core { grid-area: 1 / 3; position: relative; }
      .taib-gap-in, .taib-gap-out { position: relative; align-self: stretch; min-height: 344px; }
      .taib-gap-in svg, .taib-gap-out svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
      /* space-around lands each item at (i+.5)/n - exactly where its wire arrives */
      .taib-items { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
      /* left column mirrors the right: cards sit next to the brain, icon inward */
      .taib-col.l .taib-items { align-items: flex-end; }

      .taib-src { display: flex; align-items: center; gap: 10px; font-size: 13.5px;
        font-weight: 600; color: #eef1f7; flex-direction: row-reverse; text-align: right; }
      .taib-src .taib-g { margin: 0; }

      /* centrepiece */
      .taib-centre { position: relative; width: 100%; aspect-ratio: 1/1; margin: 0 auto; }
      .taib-brain { position: absolute; inset: 24%;
        -webkit-mask: var(--taib-brain) center/contain no-repeat;
        mask: var(--taib-brain) center/contain no-repeat;
        background: linear-gradient(165deg, #eaf1ff, #7da9ff 38%, #2d6ff7);
        filter: drop-shadow(0 0 30px rgba(45,111,247,.62)); }
      .taib-rays { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
      .taib-fil { stroke: rgba(125,169,255,.6); stroke-width: .55; stroke-linecap: round;
        vector-effect: non-scaling-stroke; animation: taibFlick 3.4s ease-in-out infinite; }
      .taib-fil.f1 { animation-delay: .5s } .taib-fil.f2 { animation-delay: 1.1s } .taib-fil.f3 { animation-delay: 1.8s }
      @keyframes taibFlick { 0%,100% { opacity: .2 } 50% { opacity: .8 } }
      .taib-rim { fill: none; stroke: rgba(125,169,255,.2); stroke-width: .5; vector-effect: non-scaling-stroke; }
      .taib-halo, .taib-halo2 { position: absolute; border-radius: 50%; pointer-events: none; }
      .taib-halo { inset: 8%; animation: taibBreathe 6s ease-in-out infinite;
        background: radial-gradient(circle, rgba(45,111,247,.38), rgba(45,111,247,.1) 48%, transparent 72%); }
      .taib-halo2 { inset: 26%; animation: taibBreathe 6s ease-in-out infinite reverse;
        background: radial-gradient(circle, rgba(125,169,255,.24), transparent 64%); }
      @keyframes taibBreathe { 0%,100% { opacity: .55; transform: scale(.97) } 50% { opacity: 1; transform: scale(1.05) } }
      .taib-pring { position: absolute; inset: 14%; border-radius: 50%;
        border: 1px solid rgba(125,169,255,.4); opacity: 0; animation: taibPulse 4.4s ease-out infinite; }
      .taib-pring.p2 { animation-delay: 2.2s }
      @keyframes taibPulse { 0% { opacity: .65; transform: scale(.8) } 100% { opacity: 0; transform: scale(1.7) } }

      /* wires: a travelling streak drawn along the line, no dots */
      .taib-wire { fill: none; stroke: rgba(125,169,255,.24); stroke-width: .9;
        stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
      .taib-pulse { fill: none; stroke: #dbe8ff; stroke-width: 1.7; stroke-linecap: round;
        vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px #7da9ff);
        stroke-dasharray: 18 400; stroke-dashoffset: 418; animation: taibStreak 3s linear infinite; }
      @keyframes taibStreak { from { stroke-dashoffset: 418 } to { stroke-dashoffset: 0 } }

      /* the six capabilities */
      .taib-cap { position: relative; display: grid; grid-template-columns: auto 1fr;
        column-gap: 12px; text-align: left; }
      .taib-g { display: block; width: 16px; height: 16px; color: #7da9ff; }
      .taib-g svg { width: 16px; height: 16px; display: block; }
      .taib-cap .taib-g { grid-row: 1 / 3; align-self: center; }
      .taib-cn { font-size: 15px; font-weight: 700; letter-spacing: -.008em; color: #fff; }
      .taib-cl { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.46); }
      .taib-cap::after { content: ""; position: absolute; left: -10px; top: 50%; width: 2px; height: 60%;
        transform: translateY(-50%); opacity: 0;
        background: linear-gradient(180deg, transparent, #7da9ff, transparent);
        animation: taibCellCue 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.5s); }
      @keyframes taibCellCue { 0%,2% { opacity: 0 } 6% { opacity: .95 } 15%,100% { opacity: 0 } }
      .taib-cap .taib-g { animation: taibGCue 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.5s); }
      @keyframes taibGCue { 0%,2% { color: #7da9ff; filter: none }
        6% { color: #fff; filter: drop-shadow(0 0 9px #7da9ff) }
        16%,100% { color: #7da9ff; filter: none } }

      /* claim, directly beneath the brain, spanning wider than its column */
      .taib-claimwrap { grid-row: 2; grid-column: 2 / 5; text-align: center; margin: 20px auto 0; }
      .taib-rule { display: block; width: 44px; height: 2px; margin: 0 auto 18px; border-radius: 2px;
        background: linear-gradient(90deg, transparent, #7da9ff, transparent); }
      .taib-claim { margin: 0 auto; max-width: 24ch; font-size: clamp(17px, 1.9vw, 22px);
        font-weight: 300; line-height: 1.36; letter-spacing: -.012em; color: rgba(255,255,255,.64); }
      .taib-claim b { font-weight: 700; color: #fff; }

      @media (max-width: 1000px) {
        .taib-caprow { display: none; }
        .taib-flow { grid-template-columns: 1fr; gap: 20px; }
        .taib-col.l, .taib-col.r, .taib-gap-in, .taib-gap-out, .taib-core, .taib-claimwrap {
          grid-area: auto; grid-row: auto; grid-column: 1; }
        .taib-gap-in, .taib-gap-out { display: none; }
        .taib-items { gap: 16px; justify-content: flex-start; }
        .taib-col.l .taib-items { align-items: flex-start; }
        .taib-col.l .taib-src { flex-direction: row; text-align: left; }
        .taib-core { width: min(210px, 46vw); margin: 0 auto; }
        .taib-claimwrap { margin-top: 6px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .taib-halo, .taib-halo2, .taib-fil, .taib-pring, .taib-pulse,
        .taib-cap::after, .taib-cap .taib-g { animation: none; }
        .taib-pring, .taib-pulse, .taib-cap::after { display: none; }
      }
      /* pin the 4 left nodes to the same top/bottom as the 6 right nodes
         (8.33% .. 91.67%) so the ends line up with Chat / On-site AR */
      @media (min-width: 1001px) {
        .taib-col.l .taib-items { position: relative; }
        .taib-col.l .taib-src {
          position: absolute; right: 0; transform: translateY(-50%);
        }
        .taib-col.l .taib-src:nth-of-type(1) { top: 8.33%; }
        .taib-col.l .taib-src:nth-of-type(2) { top: 36.11%; }
        .taib-col.l .taib-src:nth-of-type(3) { top: 63.89%; }
        .taib-col.l .taib-src:nth-of-type(4) { top: 91.67%; }
      }
    

    .site-footer {
      background: #000;
      color: #fff;
      padding: 88px 0 30px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .site-footer .container {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .ftr-grid {
      display: grid;
      grid-template-columns: 1.3fr repeat(5, 1fr);
      gap: 36px;
      padding-bottom: 64px;
    }
    .ftr-logo {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #fff;
      text-decoration: none;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .ftr-logo img {
      width: 26px;
      height: 26px;
      display: block;
    }
    .ftr-col h4 {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      margin: 0 0 14px;
      letter-spacing: -0.01em;
    }
    .ftr-col a {
      display: block;
      color: rgba(255, 255, 255, 0.58);
      text-decoration: none;
      font-size: 14px;
      letter-spacing: -0.005em;
      padding: 5px 0;
      transition: color 0.14s ease;
    }
    .ftr-col a:hover {
      color: #fff;
    }
    .ftr-new {
      display: inline-block;
      vertical-align: 2px;
      margin-left: 7px;
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 4px;
      padding: 1px 4px;
      line-height: 1.4;
    }
    .ftr-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
      flex-wrap: wrap;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 24px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.55);
    }
    .ftr-set {
      display: inline-flex;
      align-items: center;
      gap: 13px;
    }
    .ftr-set > span {
      letter-spacing: -0.005em;
    }
    .ftr-ico {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      color: rgba(255, 255, 255, 0.6);
      transition: color 0.14s ease;
    }
    .ftr-ico:hover {
      color: #fff;
    }
    .ftr-ico svg {
      width: 17px;
      height: 17px;
    }
    .ftr-cert {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(255, 255, 255, 0.55);
      text-decoration: none;
      transition: color 0.14s ease;
    }
    .ftr-cert:hover {
      color: #fff;
    }
    .ftr-cert svg {
      width: 16px;
      height: 16px;
    }
    .ftr-cp {
      color: rgba(255, 255, 255, 0.45);
    }
    @media (max-width: 1080px) {
      .ftr-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .ftr-brand {
        grid-column: 1/-1;
      }
    }
    @media (max-width: 640px) {
      .ftr-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  

  /* ================= RESKIN: Webflow/Framer design language =================
     See DESIGN-LANGUAGE.md. Layered last so it wins the cascade; the original
     section CSS above is untouched. Move rules inline as sections migrate. */

  /* Display type: one title scale everywhere (the taib/Framer treatment);
     italic gradient <em> accents are neutralised; eyebrow rows retire */
  section h2 {
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    font-size: clamp(28px, 3.2vw, 42px) !important;
    line-height: 1.14 !important;
  }
  section h2 em {
    font-style: normal !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
    padding: 0 !important;
  }
  .section-head {
    margin-bottom: 52px !important;
  }
  .section-head .section-tag,
  .who-eyebrow {
    display: none !important;
  }
  .section-head p {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: rgba(10, 13, 24, 0.55) !important;
    max-width: 540px !important;
    margin: 14px auto 0 !important;
  }
  section[class] .section-head h2 + p {
    margin-top: 14px !important;
  }

  /* Eyebrows: pills/chips/caps become quiet sentence-case labels */
  .section-tag,
  .ph-badge,
  .ph-div span,
  .who-eyebrow,
  .mod-content-eyebrow,
  .snav-header-tag,
  .spatial-card-tag,
  .spatial-tech-label,
  .alt-who-tag,
  .who-label,
  .tai-counter-label,
  .a-center-foot,
  .showcase-content .badge {
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6b7180 !important;
    box-shadow: none !important;
  }

  /* Flat surfaces: no decorative shadows; hairlines and tints do the work.
     The floating hero demo window keeps its depth. */
  section,
  section * {
    box-shadow: none !important;
  }

  /* Buttons: 8px radius, hover changes color only (never a glow) */
  .btn,
  a.btn,
  .mnav-cta {
    border-radius: 8px !important;
  }

  /* Hero link cards (Figma spec: text left-centered, large visual anchored
     right, image drifts up slightly on hover) */
  .hero-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 52px auto 0;
    max-width: 1180px;
    text-align: left;
  }
  .hero-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 142px;
    height: 142px;
    padding: 20px;
    text-decoration: none;
    overflow: hidden;
    background: rgba(147, 180, 255, 0.07);
    border: 1px solid rgba(147, 180, 255, 0.12);
    border-radius: 12px;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .hero-card:hover {
    background: rgba(147, 180, 255, 0.12);
    border-color: rgba(147, 180, 255, 0.22);
  }
  .hero-card-txt {
    position: relative;
    z-index: 1;
    max-width: 44%;
  }
  .hero-card-txt strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: -0.015em;
  }
  .hero-card-txt > span {
    display: block;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.68);
  }
  .hero-card-visual {
    /* anchored to the bottom-right corner; hard left boundary at 46% keeps
       images off the text block whatever their aspect ratio */
    position: absolute;
    left: 46%;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .hero-card-visual img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: right bottom;
    display: block;
    transition: opacity 0.2s ease;
  }
  .hero-card:hover .hero-card-visual img {
    opacity: 0.35;
  }
  .hero-card:hover .hero-card-visual {
    transform: translateY(-5px) scale(1.03);
  }
  .hero-card-go {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--blue, #2055ff);
    color: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.18s ease,
      transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .hero-card-go svg {
    width: 18px;
    height: 18px;
  }
  .hero-card:hover .hero-card-go {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  /* Spatial section (Figma): rounded wrapper, two inner cards, video card
     with overlaid caption */
  .spw {
    background: #fff;
    border: 1px solid var(--line, #e4e7ed);
    border-radius: 24px;
    padding: 20px;
    margin-top: 48px;
    text-align: left;
  }
  .spw-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
  }
  .spw-card {
    background: #f3f4f6;
    border-radius: 16px;
    padding: 20px 24px 26px;
  }
  .spw-media {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .spw-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .spw-media-contain img {
    object-fit: contain;
    padding: 5%;
  }
  .spw-card h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #080808;
    margin: 24px 0 10px;
  }
  .spw-card p {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2, #475467);
    margin: 0;
    max-width: 520px;
  }
  .spw-video {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 21 / 10;
  }
  .spw-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .spw-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 40%,
      rgba(0, 0, 0, 0.6) 100%
    );
  }
  .spw-video-txt {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 24px;
    z-index: 1;
    color: #fff;
  }
  .spw-video-txt h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
  }
  .spw-video-txt p {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 480px;
  }
  @media (max-width: 900px) {
    .spw-row {
      grid-template-columns: 1fr;
    }
    .spw-video {
      aspect-ratio: 16 / 12;
    }
  }
  .hero-more {
    margin-top: 30px;
    text-align: center;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: -0.005em;
  }
  .hero-more a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    color: #fff;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .hero-more a svg {
    transition: transform 0.18s ease;
  }
  .hero-more a:hover svg {
    transform: translateX(3px);
  }
  @media (max-width: 860px) {
    .hero-cards {
      grid-template-columns: 1fr;
    }
  }

  /* The live demo, now its own section below the hero */
  .proto {
    background: #fff;
    padding: 96px 0 16px;
    overflow-x: clip;
  }
  .proto .nx-twin {
    margin-top: 0;
  }