:root {
      --ink: #07182c;
      --blue: #0876de;
      --blue-deep: #0359ad;
      --orange: #ff9300;
      --pale: #f1f6fc;
      --line: #b7cce3;
      --text: #233d5c;
      --muted: #6b8098
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      color: var(--text);
      background: #fff;
      font-family: Manrope, Arial, sans-serif
    }

    a {
      color: inherit
    }

    a:focus-visible,
    button:focus-visible {
      outline: 3px solid var(--orange);
      outline-offset: 4px
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      height: 82px;
      background: #ffffffeb;
      border-bottom: 1px solid #e8eef6;
      backdrop-filter: blur(14px);
      transition: height .25s, box-shadow .25s
    }

    .header-inner {
      width: min(1240px, calc(100% - 48px));
      height: 100%;
      margin: auto;
      display: flex;
      align-items: center;
      gap: 30px
    }

    .brand {
      display: flex;
      align-items: center;
      flex: 0 0 auto
    }

    .brand img {
      display: block;
      width: 139px;
      height: auto
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-left: auto
    }

    .desktop-nav a {
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      color: #405570
    }

    .desktop-nav a:hover {
      color: var(--blue)
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 17px;
      margin-left: 7px
    }

    .login {
      font-size: 13px;
      font-weight: 800;
      color: #155d9f;
      text-decoration: none
    }

    .walkthrough,
    .cta-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--blue);
      color: #fff;
      text-decoration: none;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 10px 24px #0876de24
    }

    .walkthrough {
      height: 43px;
      padding: 0 20px
    }

    .menu-toggle {
      display: none;
      border: 0;
      background: transparent;
      font: inherit;
      color: var(--ink);
      font-weight: 800
    }

    .site-header.scrolled {
      height: 66px;
      box-shadow: 0 7px 20px #102d4b12
    }

    .mobile-menu {
      display: none
    }

    .hero {
      position: relative;
      overflow: hidden;
      background: var(--ink);
      color: #fff;
      min-height: 810px;
      padding: 102px 24px 78px;
      background-image: linear-gradient(#27405c80 1px, transparent 1px), linear-gradient(90deg, #27405c80 1px, transparent 1px);
      background-size: 56px 56px
    }

    .hero:before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 72% 57%, #075ba847, transparent 29%), linear-gradient(120deg, transparent 30%, #0a396936)
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(1120px, 100%);
      margin: auto
    }

    .overline,
    .eyebrow {
      margin: 0 0 19px;
      color: #a4cbf8;
      font: 500 11px "DM Mono", monospace;
      letter-spacing: 1.65px;
      text-transform: uppercase
    }

    .overline:before,
    .eyebrow:before {
      content: "";
      display: inline-block;
      width: 22px;
      height: 2px;
      margin: 0 10px 4px 0;
      background: var(--orange)
    }

    .hero-copy {
      max-width: 810px;
      text-align: center;
      margin: 0 auto
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(45px, 6.5vw, 81px);
      line-height: 1.04;
      letter-spacing: -4.6px;
      font-weight: 800
    }

    .hero h1 span {
      color: var(--orange)
    }

    .hero-lead {
      max-width: 690px;
      margin: 25px auto 32px;
      color: #c2d1e2;
      font-size: 18px;
      line-height: 1.7
    }

    .hero-actions {
      display: flex;
      justify-content: center;
      gap: 13px
    }

    .cta-primary,
    .cta-secondary {
      height: 54px;
      padding: 0 25px
    }

    .cta-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #65809b;
      border-radius: 999px;
      color: #fff;
      text-decoration: none;
      font-size: 13px;
      font-weight: 800
    }

    .cta-primary:hover,
    .walkthrough:hover {
      background: var(--blue-deep)
    }

    .cta-secondary:hover {
      border-color: #fff;
      background: #ffffff10
    }

    .ecosystem {
      position: relative;
      width: min(970px, 100%);
      height: 392px;
      margin: 67px auto 0
    }

    .orbital {
      position: absolute;
      left: 50%;
      top: 50%;
      border: 1px solid #42709655;
      border-radius: 50%;
      transform: translate(-50%, -50%)
    }

    .orbit-one {
      width: 690px;
      height: 254px
    }

    .orbit-two {
      width: 840px;
      height: 340px;
      border-style: dashed;
      animation: spin 30s linear infinite
    }

    .node {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid #487da9;
      background: #102d4a;
      color: #cce0f5;
      font: 500 11px "DM Mono", monospace;
      letter-spacing: .4px;
      box-shadow: 0 8px 25px #020b1469
    }

    .node:after {
      content: "";
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 12px var(--orange)
    }

    .n-projects {
      left: 3%;
      top: 44%
    }

    .n-people {
      left: 18%;
      top: 5%
    }

    .n-workflows {
      right: 18%;
      top: 5%
    }

    .n-data {
      right: 3%;
      top: 44%
    }

    .n-visibility {
      left: 18%;
      bottom: 5%
    }

    .n-action {
      right: 18%;
      bottom: 5%
    }

    .node:not(.center) {
      width: 116px;
      height: 42px
    }

    .n-people:after,
    .n-workflows:after {
      bottom: -3px
    }

    .n-projects:after,
    .n-visibility:after {
      right: -3px
    }

    .n-data:after,
    .n-action:after {
      left: -3px
    }

    .center {
      left: 50%;
      top: 50%;
      width: 307px;
      height: 210px;
      overflow: hidden;
      transform: translate(-50%, -50%);
      border: 2px solid #417da9;
      background: #fff;
      box-shadow: 0 22px 45px #020c1775
    }

    .center img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 12%
    }

    .center:before {
      content: "ZI TRACKER";
      position: absolute;
      z-index: 1;
      top: 12px;
      left: 13px;
      padding: 6px 9px;
      border-radius: 4px;
      background: #07182ce6;
      color: #fff;
      font: 500 9px "DM Mono", monospace;
      letter-spacing: 1.2px
    }

    .center:after {
      width: 8px;
      height: 8px;
      right: 11px;
      top: 13px;
      background: #ff9300
    }

    .screen-caption {
      position: absolute;
      left: 50%;
      bottom: -31px;
      transform: translateX(-50%);
      width: max-content;
      color: #88a9c8;
      font: 400 10px "DM Mono", monospace
    }

    .about {
      position: relative;
      padding: 125px 24px 134px;
      overflow: hidden;
      background: #f5f8fc
    }

    .about:before {
      content: "";
      position: absolute;
      right: -130px;
      bottom: -220px;
      width: 690px;
      height: 690px;
      border: 1px solid #d3e1ef;
      border-radius: 50%;
      box-shadow: 0 0 0 58px #e8f0f8, 0 0 0 117px #f0f5fa
    }

    .about-inner {
      position: relative;
      z-index: 1;
      width: min(1120px, 100%);
      margin: auto;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 86px;
      align-items: center
    }

    .about :is(h1,h2) {
      margin: 0;
      color: #102945;
      font-size: clamp(39px, 5vw, 65px);
      line-height: 1.08;
      letter-spacing: -3.6px
    }

    .about :is(h1,h2) span {
      color: var(--blue)
    }

    .about-copy>p:not(.eyebrow) {
      max-width: 625px;
      margin: 24px 0 0;
      color: #5f748c;
      font-size: 17px;
      line-height: 1.75
    }

    .about-copy>p:last-of-type {
      padding-top: 22px;
      border-top: 1px solid #d5e1ee
    }

    .focus-map {
      position: relative;
      min-height: 405px;
      border: 1px solid #d7e3ef;
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 22px 50px #1f54821c;
      overflow: hidden
    }

    .focus-map:before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(#e6edf5 1px, transparent 1px), linear-gradient(90deg, #e6edf5 1px, transparent 1px);
      background-size: 33px 33px
    }

    .map-core {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      width: 138px;
      height: 138px;
      display: grid;
      place-items: center;
      transform: translate(-50%, -50%);
      border: 1px solid #4888c4;
      border-radius: 50%;
      background: #0d5fae;
      color: #fff;
      text-align: center;
      font: 500 12px "DM Mono", monospace;
      letter-spacing: 1px;
      box-shadow: 0 0 0 13px #d7ebff
    }

    .map-core small {
      display: block;
      margin-top: 7px;
      color: #a9d0fa;
      font: 400 8px "DM Mono", monospace;
      letter-spacing: .8px
    }

    .map-label {
      position: absolute;
      z-index: 2;
      padding: 9px 11px;
      border: 1px solid #ccdfef;
      border-radius: 5px;
      background: #fff;
      color: #3b5774;
      font-size: 10px;
      font-weight: 800;
      box-shadow: 0 8px 15px #1a4a7014
    }

    .map-label:after {
      content: "";
      position: absolute;
      background: #93b9da;
      height: 1px;
      transform-origin: left
    }

    .m-projects {
      top: 45px;
      left: 45px
    }

    .m-projects:after {
      width: 109px;
      top: 28px;
      left: 100%;
      transform: rotate(34deg)
    }

    .m-clients {
      top: 45px;
      right: 45px
    }

    .m-clients:after {
      width: 105px;
      top: 28px;
      right: 100%;
      transform-origin: right;
      transform: rotate(-34deg)
    }

    .m-workflow {
      bottom: 45px;
      left: 45px
    }

    .m-workflow:after {
      width: 114px;
      bottom: 27px;
      left: 100%;
      transform: rotate(-34deg)
    }

    .m-insights {
      bottom: 45px;
      right: 45px
    }

    .m-insights:after {
      width: 110px;
      bottom: 27px;
      right: 100%;
      transform-origin: right;
      transform: rotate(34deg)
    }

    .about-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-top: 34px;
      color: #086dcc;
      font-size: 14px;
      font-weight: 800;
      text-decoration: none
    }

    .about-link:hover {
      color: var(--blue-deep)
    }

    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .65s ease, transform .65s ease
    }

    .reveal.show {
      opacity: 1;
      transform: none
    }

    @keyframes spin {
      to {
        transform: translate(-50%, -50%) rotate(360deg)
      }
    }

    @media(max-width:920px) {
      .desktop-nav {
        gap: 17px
      }

      .header-inner {
        width: calc(100% - 36px)
      }

      .about-inner {
        gap: 40px
      }

      .ecosystem {
        height: 360px
      }

      .orbit-one {
        width: 570px
      }

      .orbit-two {
        width: 690px
      }

      .node:not(.center) {
        width: 100px;
        height: 38px;
        font-size: 9px
      }

      .n-projects {
        left: 0
      }

      .n-data {
        right: 0
      }
    }

    @media(max-width:760px) {
      .site-header {
        height: 68px
      }

      .desktop-nav,
      .header-actions {
        display: none
      }

      .header-inner {
        width: calc(100% - 36px)
      }

      .brand img {
        width: 118px
      }

      .menu-toggle {
        display: block;
        margin-left: auto
      }

      .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 8px 18px 20px;
        background: #fff;
        border-bottom: 1px solid #dce6f0;
        box-shadow: 0 12px 20px #102d4b10
      }

      .mobile-menu.open {
        display: grid;
        gap: 3px
      }

      .mobile-menu a {
        padding: 12px 5px;
        color: #314b66;
        font-size: 14px;
        font-weight: 800;
        text-decoration: none
      }

      .mobile-menu .mobile-cta {
        display: flex;
        justify-content: center;
        margin-top: 7px;
        padding: 13px;
        border-radius: 999px;
        background: var(--blue);
        color: #fff
      }

      .hero {
        min-height: auto;
        padding-top: 77px
      }

      .hero h1 {
        letter-spacing: -2.7px
      }

      .hero-lead {
        font-size: 16px
      }

      .ecosystem {
        height: 500px;
        margin-top: 45px
      }

      .orbit-one {
        width: 290px;
        height: 385px
      }

      .orbit-two {
        width: 335px;
        height: 450px
      }

      .center {
        width: 240px;
        height: 166px
      }

      .node:not(.center) {
        width: 98px;
        height: 36px;
        font-size: 8px
      }

      .n-people {
        left: 4%;
        top: 7%
      }

      .n-workflows {
        right: 4%;
        top: 7%
      }

      .n-projects {
        left: 0;
        top: 43%
      }

      .n-data {
        right: 0;
        top: 43%
      }

      .n-visibility {
        left: 4%;
        bottom: 7%
      }

      .n-action {
        right: 4%;
        bottom: 7%
      }

      .about {
        padding: 85px 24px
      }

      .about-inner {
        grid-template-columns: 1fr;
        gap: 53px
      }

      .about :is(h1,h2) {
        letter-spacing: -2.2px
      }

      .focus-map {
        min-height: 356px
      }

      .m-projects {
        left: 21px;
        top: 35px
      }

      .m-clients {
        right: 21px;
        top: 35px
      }

      .m-workflow {
        left: 21px;
        bottom: 35px
      }

      .m-insights {
        right: 21px;
        bottom: 35px
      }

      .map-label {
        padding: 7px;
        font-size: 8px
      }

      .m-projects:after,
      .m-clients:after,
      .m-workflow:after,
      .m-insights:after {
        width: 70px
      }
    }

    @media(max-width:420px) {
      .hero-actions {
        flex-direction: column
      }

      .cta-primary,
      .cta-secondary {
        width: 100%
      }

      .ecosystem {
        transform: scale(.91);
        transform-origin: top center;
        margin-bottom: -42px
      }

      .focus-map {
        transform: scale(.95);
        width: 105%;
        margin-left: -2.5%
      }
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      .reveal {
        opacity: 1;
        transform: none;
        transition: none
      }

      .orbit-two {
        animation: none
      }

      .site-header {
        transition: none
      }
    }
  

    /* Logo tagline positioning */

    .center {
      height: 110px;
    }

    .center img {
      display: block;
      width: 100%;
      height: 110px;
      object-fit: contain;
    }

    .center .screen-caption {
      position: absolute;
      left: 65%;
      top: 60px;
      bottom: auto;
      transform: translateX(-50%);
      width: max-content;
      color: #087ce2;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .center:before,
    .center:after {
      display: none;
    }

    .orbit-two {
      animation-duration: 60s;
    }

    .role-visual.timeline-mode {
      position: relative;
      background: #07182c;
    }

    .role-visual.timeline-mode img {
      opacity: .13;
    }

    .role-visual.timeline-mode:after {
      content: "INITIATE  →  PLAN  →  EXECUTE  →  REVIEW  →  DELIVER";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 28px;
      color: #fff;
      font: 500 12px "DM Mono", monospace;
      letter-spacing: .8px;
      text-align: center;
      line-height: 2;
    }

    .challenge {
      padding-top: 82px;
      padding-bottom: 82px;
    }

    .challenge .section-intro {
      margin-top: 16px;
    }

    .challenge .perspectives {
      margin: 32px 0 0;
    }

    .challenge .perspective {
      padding: 16px 18px;
    }

    @media (max-width: 620px) {
      .challenge {
        padding-top: 62px;
        padding-bottom: 62px;
      }
    }

    .problem {
      padding-bottom: 72px;
    }

    .creative-transition {
      grid-template-columns: 1fr 74px 1fr;
      gap: 0;
      max-width: 980px;
      margin: 42px auto 0;
    }

    .creative-transition .transition-card {
      min-height: 180px;
      padding: 25px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
    }

    .creative-transition .transition-card span {
      font-size: 20px;
      line-height: 1.23;
    }

    .fragmented {
      position: relative;
      background: #fff;
    }

    .fragmented:after {
      content: "";
      position: absolute;
      right: -64px;
      bottom: -64px;
      width: 170px;
      height: 170px;
      border: 1px dashed #c8d9e8;
      border-radius: 50%;
    }

    .fragment-flow {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      max-width: 265px;
    }

    .fragment-flow i {
      padding: 6px 8px;
      border: 1px dashed #b9ccdc;
      border-radius: 4px;
      color: #658099;
      background: #fbfdff;
      font: 500 8px "DM Mono", monospace;
      font-style: normal;
      letter-spacing: .6px;
    }

    .transition-bridge {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      height: 100%;
      color: #0876de;
    }

    .transition-bridge:before {
      content: "";
      position: absolute;
      width: 100%;
      border-top: 1px dashed #77afe0;
    }

    .transition-bridge span {
      display: grid;
      place-items: center;
      width: 39px;
      height: 39px;
      border-radius: 50%;
      background: #0876de;
      color: #fff;
      font-size: 20px;
      box-shadow: 0 0 0 7px #fff;
    }

    .transition-bridge small {
      position: relative;
      z-index: 1;
      margin-top: 8px;
      padding: 2px 5px;
      background: #fff;
      color: #5780a5;
      font: 500 7px "DM Mono", monospace;
      letter-spacing: .6px;
    }

    .creative-transition .connected {
      position: relative;
      align-items: flex-start;
      padding-left: 105px;
      background: linear-gradient(135deg, #f3faff, #e8f5ff);
    }

    .connected-mark {
      position: absolute;
      left: 25px;
      top: 50%;
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      transform: translateY(-50%);
      border-radius: 50%;
      border: 1px solid #8ec5ef;
      background: #fff;
      box-shadow: 0 0 0 8px #dff0fc;
    }

    .connected-mark img {
      width: 50px;
      height: auto;
    }

    @media (max-width: 620px) {
      .problem {
        padding-bottom: 58px;
      }

      .creative-transition {
        grid-template-columns: 1fr;
        gap: 13px;
      }

      .creative-transition .transition-card {
        min-height: 150px;
      }

      .transition-bridge {
        height: 52px;
      }

      .transition-bridge:before {
        width: 1px;
        height: 100%;
        border-top: 0;
        border-left: 1px dashed #77afe0;
      }

      .transition-bridge span {
        transform: rotate(90deg);
      }

      .creative-transition .connected {
        padding-left: 105px;
      }
    }

    .journey-section {
      padding: 116px 24px;
      background: #07182c;
      color: #fff;
      overflow: hidden;
    }

    .journey-section .phase2-inner {
      position: relative;
    }

    .journey-section .phase2-inner:before { display: none; }

    .journey-section :is(h1,h2) {
      color: #fff;
    }

    .journey-section .section-intro {
      color: #b9cbdb;
    }

    .journey-top {
      position: relative;
      z-index: 1;
      max-width: 740px;
    }

    .journey-steps {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
      margin: 60px 0 44px;
    }

    .journey-step {
      min-height: 97px;
      padding: 13px 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid #335674;
      border-radius: 7px;
      background: #0d2942;
      color: #aec7dd;
      text-align: left;
      cursor: pointer;
      transition: transform .2s, background .2s, border-color .2s;
    }

    .journey-step:hover,
    .journey-step.active {
      transform: translateY(-7px);
      border-color: #75b8ed;
      background: #10406a;
      color: #fff;
    }

    .journey-step.active {
      box-shadow: 0 0 0 5px #0b2944, 0 14px 26px #020d1970;
    }

    .journey-step b {
      color: #ffae38;
      font: 500 9px "DM Mono", monospace;
      letter-spacing: .8px;
    }

    .journey-step span {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .2px;
    }

    .journey-detail {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 46px;
      align-items: center;
      padding: 28px;
      border: 1px solid #315674;
      border-radius: 13px;
      background: #fff;
      box-shadow: 0 25px 50px #1e567a1c;
    }

    .stage-number {
      margin: 0 0 15px;
      color: #ff9000;
      font: 500 11px "DM Mono", monospace;
      letter-spacing: 1.2px;
    }

    .journey-detail h3 {
      margin: 0;
      color: #123b5d;
      font-size: clamp(28px, 3.3vw, 42px);
      line-height: 1.1;
      letter-spacing: -2px;
    }

    .journey-detail>div>p:not(.stage-number) {
      margin: 18px 0;
      color: #425b76;
      font-size: 15px;
      line-height: 1.7;
    }

    .stage-value {
      padding-top: 16px;
      border-top: 1px solid #d5e3f0;
      color: #123b5d;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.55;
    }

    .stage-value b {
      color: #087ce2;
      font: 500 9px "DM Mono", monospace;
      letter-spacing: 1px;
    }

    .journey-final {
      position: relative;
      z-index: 1;
      margin: 62px auto 0;
      max-width: 880px;
      padding: 45px 30px;
      border-top: 1px solid #436a8c;
      border-bottom: 1px solid #436a8c;
      text-align: center;
    }

    .journey-final p {
      margin: 0;
      color: #fff;
      font-size: clamp(28px, 4vw, 49px);
      font-weight: 800;
      letter-spacing: -2.8px;
      line-height: 1.12;
    }

    .journey-final p span {
      color: #ff9300
    }

    .solutions-transition {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      margin-top: 24px;
      color: #8fc9fb;
      font-size: 14px;
      font-weight: 800;
      text-decoration: none;
    }

    .solutions-transition:hover {
      color: #fff;
    }

    @media(max-width:900px) {
      .journey-steps {
        grid-template-columns: repeat(4, 1fr)
      }

      .journey-section .phase2-inner:before { display: none; }

      .journey-detail {
        grid-template-columns: 1fr;
        gap: 28px
      }
    }

    @media(max-width:620px) {
      .journey-section {
        padding: 80px 20px
      }

      .journey-steps {
        grid-template-columns: 1fr 1fr;
        margin: 39px 0 28px
      }

      .journey-step {
        min-height: 80px
      }

      .journey-step.active {
        transform: none
      }

      .journey-detail {
        padding: 20px
      }

      .journey-detail h3 {
        letter-spacing: -1.3px
      }

      .journey-final {
        margin-top: 42px;
        padding: 34px 4px
      }

      .journey-final p {
        letter-spacing: -1.5px
      }
    }

    .solutions-section {
      position: relative;
      padding: 116px 24px;
      background: #f4f8fc;
      overflow: hidden
    }

    .solutions-section:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 84px;
      background: linear-gradient(180deg, #07182c, #f4f8fc)
    }

    .solutions-section .phase2-inner {
      position: relative
    }

    .solutions-section :is(h1,h2), .journey-top h1 {
      margin: 0;
      color: #102945;
      font-size: clamp(38px, 5vw, 64px);
      line-height: 1.08;
      letter-spacing: -3.5px
    }

    .solutions-head {
      max-width: 790px
    }

    .solutions-head .section-intro {
      max-width: 690px
    }

    .branch-map {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 13px;
      margin: 50px 0 52px;
      padding: 15px 20px;
      border: 1px solid #d2e1ef;
      border-radius: 10px;
      background: #fff;
      color: #55728d;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: .9px
    }

    .branch-map span {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .branch-map span:not(:last-child):after {
      content: "→";
      color: #ff9300;
      font-size: 18px
    }

    .branch-map b {
      padding: 6px 9px;
      border-radius: 4px;
      background: #e5f3ff;
      color: #0876de;
      font-weight: 500
    }

    .module-experience {
      display: grid;
      grid-template-columns: 285px 1fr;
      gap: 31px;
      align-items: stretch
    }

    .module-tabs {
      display: grid;
      gap: 8px
    }

    .module-tab {
      position: relative;
      min-height: 85px;
      padding: 16px 18px;
      border: 1px solid #d2e1ef;
      border-radius: 8px;
      background: #fff;
      color: #34516c;
      text-align: left;
      font: 700 14px Manrope, Arial, sans-serif;
      cursor: pointer;
      transition: transform .2s, border-color .2s, background .2s
    }

    .module-tab b {
      display: block;
      margin-bottom: 7px;
      color: #7b92a7;
      font: 500 9px "DM Mono", monospace;
      letter-spacing: .9px
    }

    .module-tab:hover,
    .module-tab.active {
      border-color: #69afe9;
      background: #eff8ff;
      color: #086dcc;
      transform: translateX(5px)
    }

    .module-tab.active:after {
      content: "";
      position: absolute;
      right: -32px;
      top: 50%;
      width: 31px;
      border-top: 1px dashed #78afe0
    }

    .module-stage {
      position: relative;
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 26px;
      min-height: 386px;
      padding: 27px;
      border: 1px solid #c6ddea;
      border-radius: 13px;
      background: #fff;
      box-shadow: 0 18px 36px #1e527b12;
      overflow: hidden
    }

    .module-stage:before {
      content: "";
      position: absolute;
      right: -110px;
      bottom: -150px;
      width: 360px;
      height: 360px;
      border: 1px solid #d6e9f7;
      border-radius: 50%;
      box-shadow: 0 0 0 47px #eef7fe
    }

    .module-content {
      position: relative;
      z-index: 1;
      align-self: center
    }

    .module-content p:first-child {
      margin: 0 0 14px;
      color: #0876de;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1px
    }

    .module-content h3 {
      margin: 0;
      color: #173a5a;
      font-size: clamp(27px, 3vw, 39px);
      line-height: 1.1;
      letter-spacing: -1.9px
    }

    .module-content>p:not(:first-child) {
      margin: 16px 0;
      color: #647b92;
      font-size: 14px;
      line-height: 1.7
    }

    .module-flow {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 23px;
      color: #326795;
      font: 500 9px "DM Mono", monospace;
      letter-spacing: .5px
    }

    .module-flow span {
      padding: 7px 8px;
      border: 1px solid #bedaf1;
      border-radius: 4px;
      background: #f5fbff
    }

    .module-flow i {
      color: #ff9300;
      font-size: 15px;
      font-style: normal
    }

    .module-visual {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid #c8dfef;
      border-radius: 8px;
      background: #f5f9fd
    }

    .module-visual img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top
    }

    .module-visual.no-shot {
      background-image: linear-gradient(#dce9f3 1px, transparent 1px), linear-gradient(90deg, #dce9f3 1px, transparent 1px);
      background-size: 26px 26px
    }

    .module-visual.no-shot img {
      width: 158px;
      height: auto;
      object-fit: contain
    }

    .module-visual.no-shot:after {
      content: "CONNECTED WORKFLOW";
      position: absolute;
      bottom: 18px;
      color: #4a759c;
      font: 500 9px "DM Mono", monospace;
      letter-spacing: 1.1px
    }

    .module-note {
      position: absolute;
      z-index: 2;
      bottom: 11px;
      left: 12px;
      padding: 5px 7px;
      border-radius: 3px;
      background: #07182ce3;
      color: #e0effc;
      font: 500 8px "DM Mono", monospace;
      letter-spacing: .5px
    }

    .expansion {
      margin-top: 105px;
      padding: 72px 38px;
      border: 1px solid #c8dce9;
      border-radius: 15px;
      background: #07182c;
      color: #fff;
      overflow: hidden
    }

    .expansion :is(h1,h2) {
      color: #fff
    }

    .expansion .section-intro {
      color: #b8cadb
    }

    .expansion-map {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 13px;
      margin-top: 42px;
      padding-top: 30px
    }

    .expansion-map:before {
      content: "";
      position: absolute;
      left: 6%;
      right: 6%;
      top: 48px;
      border-top: 1px dashed #4b7ea6
    }

    .expansion-node {
      position: relative;
      z-index: 1;
      min-width: 120px;
      padding: 14px 10px;
      border: 1px solid #4e7ea4;
      border-radius: 6px;
      background: #0d2942;
      color: #dbebf9;
      text-align: center;
      font: 500 9px "DM Mono", monospace;
      letter-spacing: .6px
    }

    .expansion-node.current {
      border-color: #ffa933;
      background: #133451;
      color: #ffbd59
    }

    .expansion-node.future {
      background: #102c45aa;
      border-style: dashed;
      color: #a9c7e1
    }

    .action-bridge {
      position: relative;
      margin: 78px auto 0;
      max-width: 820px;
      padding: 35px;
      border-top: 1px solid #c9dfef;
      text-align: center
    }

    .action-bridge p {
      margin: 0;
      color: #274b6e;
      font-size: 22px;
      font-weight: 800;
      line-height: 1.38
    }

    .action-bridge p span {
      color: #0876de
    }

    .action-bridge a {
      margin-top: 23px
    }

    @media(max-width:900px) {
      .module-experience {
        grid-template-columns: 1fr
      }

      .module-tabs {
        grid-template-columns: repeat(4, 1fr)
      }

      .module-tab {
        font-size: 12px
      }

      .module-tab.active:after {
        display: none
      }

      .module-stage {
        grid-template-columns: 1fr
      }

      .module-visual {
        min-height: 260px
      }

      .expansion-map {
        flex-wrap: wrap;
        justify-content: center
      }

      .expansion-map:before {
        display: none
      }
    }

    @media(max-width:620px) {
      .solutions-section {
        padding: 80px 20px
      }

      .solutions-section :is(h1,h2), .journey-top h1 {
        letter-spacing: -2.2px
      }

      .branch-map {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px
      }

      .branch-map span:not(:last-child):after {
        content: "↓";
        margin-left: 5px
      }

      .module-tabs {
        grid-template-columns: 1fr 1fr
      }

      .module-tab {
        min-height: 73px;
        padding: 13px
      }

      .module-stage {
        padding: 19px;
        gap: 20px
      }

      .module-visual {
        min-height: 210px
      }

      .expansion {
        margin-top: 67px;
        padding: 48px 20px
      }

      .expansion-map {
        display: grid;
        grid-template-columns: 1fr 1fr
      }

      .expansion-node {
        min-width: 0
      }

      .action-bridge {
        margin-top: 56px;
        padding: 29px 0
      }

      .action-bridge p {
        font-size: 20px
      }
    }

    .final-section {
      position: relative;
      padding: 126px 24px 0;
      overflow: hidden;
      background: #07182c;
      color: #fff;
      background-image: linear-gradient(#27405c75 1px, transparent 1px), linear-gradient(90deg, #27405c75 1px, transparent 1px);
      background-size: 56px 56px
    }

    .final-section:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 25%, #0763ad42, transparent 29%)
    }

    .final-inner {
      position: relative;
      z-index: 1;
      width: min(1120px, 100%);
      margin: auto
    }

    .final-loop {
      position: relative;
      width: min(790px, 100%);
      height: 330px;
      margin: 46px auto 82px
    }

    .final-loop .loop-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 610px;
      height: 230px;
      border: 1px dashed #4b86b2;
      border-radius: 50%;
      transform: translate(-50%, -50%)
    }

    .final-logo {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 200px;
      transform: translate(-50%, -50%)
    }

    .final-chip {
      position: absolute;
      padding: 10px 13px;
      border: 1px solid #45799f;
      border-radius: 6px;
      background: #102c46;
      color: #c7e0f6;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: .6px
    }

    .final-chip:after {
      content: "";
      position: absolute;
      width: 38px;
      border-top: 1px dashed #73a9d5
    }

    .fc-projects {
      left: 4%;
      top: 43%
    }

    .fc-projects:after {
      left: 100%;
      top: 50%;
      transform: rotate(13deg)
    }

    .fc-people {
      left: 19%;
      top: 4%
    }

    .fc-people:after {
      left: 65%;
      bottom: -20px;
      transform: rotate(47deg)
    }

    .fc-workflows {
      right: 19%;
      top: 4%
    }

    .fc-workflows:after {
      right: 65%;
      bottom: -20px;
      transform-origin: right;
      transform: rotate(-47deg)
    }

    .fc-data {
      right: 4%;
      top: 43%
    }

    .fc-data:after {
      right: 100%;
      top: 50%;
      transform-origin: right;
      transform: rotate(-13deg)
    }

    .fc-visibility {
      left: 19%;
      bottom: 4%
    }

    .fc-visibility:after {
      left: 65%;
      top: -20px;
      transform: rotate(-47deg)
    }

    .fc-action {
      right: 19%;
      bottom: 4%
    }

    .fc-action:after {
      right: 65%;
      top: -20px;
      transform-origin: right;
      transform: rotate(47deg)
    }

    .walkthrough-panel {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 56px;
      padding: 58px 0 88px;
      border-top: 1px solid #345572
    }

    .walkthrough-copy :is(h1,h2) {
      margin: 0;
      font-size: clamp(32px, 3.7vw, 49px);
      line-height: 1.08;
      letter-spacing: -2.7px
    }

    .walkthrough-copy p {
      margin: 18px 0;
      color: #bfd0df;
      font-size: 15px;
      line-height: 1.7
    }

    .existing-user {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
      color: #9ed0fb;
      font-size: 14px;
      font-weight: 800;
      text-decoration: none
    }

    .existing-user:hover {
      color: #fff
    }

    .contact-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 27px;
      border: 1px solid #416888;
      border-radius: 12px;
      background: #0d2942;
      box-shadow: 0 22px 45px #010c1669
    }

    .field {
      display: grid;
      gap: 7px
    }

    .field.full {
      grid-column: 1/-1
    }

    .field label {
      color: #d6e6f4;
      font-size: 12px;
      font-weight: 800
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      padding: 12px 13px;
      border: 1px solid #547898;
      border-radius: 5px;
      background: #092239;
      color: #fff;
      font: 14px Manrope, Arial, sans-serif
    }

    .field textarea {
      min-height: 101px;
      resize: vertical
    }

    .field input::placeholder,
    .field textarea::placeholder {
      color: #86a2ba
    }

    .field select:invalid {
      color: #86a2ba
    }

    .field option {
      color: #173653;
      background: #fff
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: 2px solid #ffa11a;
      outline-offset: 2px;
      border-color: #ffa11a
    }

    .form-submit {
      grid-column: 1/-1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 3px
    }

    .form-status {
      margin: 0;
      color: #a9c3da;
      font-size: 11px;
      line-height: 1.45
    }

    .form-status.error {
      color: #ffc371
    }

    .form-submit .cta-primary {
      border: 0;
      cursor: pointer
    }

    .footer {
      position: relative;
      z-index: 1;
      padding: 48px 24px 28px;
      border-top: 1px solid #31526f;
      background: #061426
    }

    .footer-inner {
      width: min(1120px, 100%);
      margin: auto;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 80px
    }

    .footer-brand img {
      width: 145px;
      height: auto
    }

    .footer-brand p {
      max-width: 410px;
      margin: 17px 0 0;
      color: #a7bccf;
      font-size: 13px;
      line-height: 1.65
    }

    .footer-brand p b {
      display: block;
      margin-bottom: 7px;
      color: #fff;
      font-size: 15px
    }

    .footer-nav {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .footer-nav a {
      white-space: nowrap;
      text-decoration: none;
      font-size: 14px;
      line-height: 1.5;
      font-weight: 400;
      color: #496783;
    }

    .footer-email {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      margin-top: 18px;
      text-decoration: none;
    }

    .footer-email svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .footer-email:hover {
      opacity: 0.7;
    }

    .footer-nav a:hover {
      color: #fff
    }

    .footer-bottom {
      width: min(1120px, 100%);
      margin: 38px auto 0;
      padding-top: 22px;
      border-top: 1px solid #294660;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: #7f98af;
      font-size: 11px
    }

    .footer-bottom a {
      color: #9db5ca;
      text-decoration: none
    }

    .footer-bottom a:hover {
      color: #fff
    }

    @media(max-width:760px) {
      .final-section {
        padding-top: 84px
      }

      .final-loop {
        height: 475px;
        transform: scale(.92);
        transform-origin: top center;
        margin-bottom: -4px
      }

      .final-loop .loop-ring {
        width: 315px;
        height: 410px
      }

      .final-logo {
        width: 174px
      }

      .final-chip {
        font-size: 8px
      }

      .fc-projects {
        left: 0;
        top: 42%
      }

      .fc-data {
        right: 0;
        top: 42%
      }

      .fc-people {
        left: 5%;
        top: 4%
      }

      .fc-workflows {
        right: 5%;
        top: 4%
      }

      .fc-visibility {
        left: 5%;
        bottom: 4%
      }

      .fc-action {
        right: 5%;
        bottom: 4%
      }

      .walkthrough-panel {
        grid-template-columns: 1fr;
        gap: 33px;
        padding-top: 48px
      }

      .footer-inner {
        grid-template-columns: 1fr;
        gap: 34px
      }

      .footer-bottom {
        flex-direction: column;
        gap: 11px
      }
    }

    @media(max-width:500px) {
      .final-loop {
        transform: scale(.78);
        margin-bottom: -78px
      }

      .contact-form {
        grid-template-columns: 1fr;
        padding: 20px
      }

      .field.full,
      .form-submit {
        grid-column: auto
      }

      .form-submit {
        align-items: stretch;
        flex-direction: column
      }

      .form-submit .cta-primary {
        width: 100%
      }

      .footer-nav {
        grid-template-columns: 1fr 1fr
      }
    }
  

    .phase2-section {
      padding: 116px 24px;
      position: relative
    }

    .phase2-inner {
      width: min(1120px, 100%);
      margin: auto
    }

    .phase2-section :is(h1,h2) {
      margin: 0;
      color: #102945;
      font-size: clamp(38px, 5vw, 64px);
      line-height: 1.08;
      letter-spacing: -3.5px
    }

    .section-intro {
      max-width: 670px;
      margin: 20px 0 0;
      color: #63788f;
      font-size: 17px;
      line-height: 1.72
    }

    .problem {
      background: #fff
    }

    .scatter-board {
      position: relative;
      min-height: 470px;
      margin-top: 64px;
      overflow: hidden;
      border: 1px solid #d8e4ef;
      border-radius: 16px;
      background: #fbfdff;
      background-image: radial-gradient(#ccddeb 1px, transparent 1px);
      background-size: 17px 17px
    }

    .scatter-note {
      position: absolute;
      padding: 13px 16px;
      border: 1px solid #d6e1ed;
      border-radius: 7px;
      background: #fff;
      color: #526a84;
      font: 500 11px "DM Mono", monospace;
      letter-spacing: .7px;
      box-shadow: 0 9px 20px #173d5c0f
    }

    .scatter-note:after {
      content: "";
      position: absolute;
      width: 90px;
      border-top: 1px dashed #a9c4db
    }

    .s-trackers {
      left: 8%;
      top: 15%
    }

    .s-trackers:after {
      left: 90%;
      top: 70%;
      transform: rotate(27deg)
    }

    .s-email {
      right: 11%;
      top: 12%
    }

    .s-email:after {
      right: 85%;
      top: 77%;
      transform: rotate(144deg)
    }

    .s-drawings {
      left: 5%;
      top: 52%
    }

    .s-drawings:after {
      left: 90%;
      top: 35%;
      transform: rotate(-9deg)
    }

    .s-messages {
      right: 6%;
      top: 51%
    }

    .s-messages:after {
      right: 90%;
      top: 35%;
      transform: rotate(187deg)
    }

    .s-project {
      left: 17%;
      bottom: 12%
    }

    .s-project:after {
      left: 94%;
      top: 9%;
      transform: rotate(-39deg)
    }

    .s-reports {
      right: 18%;
      bottom: 12%
    }

    .s-reports:after {
      right: 94%;
      top: 9%;
      transform: rotate(219deg)
    }

    .scatter-core {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      width: 166px;
      height: 166px;
      transform: translate(-50%, -50%);
      border: 1px dashed #90b2d0;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 15px #f1f6fb;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 12px;
      color: #6a829b;
      font: 500 13px "DM Mono", monospace;
      letter-spacing: 1px;
      text-align: center
    }

    .scatter-core small {
      display: block;
      margin: 0;
      color: #6a829b;
      font-size: 13px;
      line-height: 1;
      letter-spacing: 1px;
      font-weight: 500
    }

    .connection-transition {
      display: grid;
      grid-template-columns: 1fr 56px 1fr;
      align-items: center;
      gap: 20px;
      margin-top: 52px
    }

    .transition-card {
      padding: 28px;
      border: 1px solid #d8e4ef;
      border-radius: 10px;
      background: #fff
    }

    .transition-card strong {
      display: block;
      font-size: 13px;
      color: #52708d
    }

    .transition-card span {
      display: block;
      margin-top: 9px;
      font-size: 20px;
      font-weight: 800;
      color: #173653
    }

    .transition-card.connected {
      border-color: #82bbea;
      background: #eff8ff
    }

    .transition-arrow {
      display: grid;
      place-items: center;
      color: var(--orange);
      font-size: 30px
    }

    .platform {
      background: #f5f8fc
    }

    .platform-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-top: 54px
    }

    .platform-card {
      min-height: 255px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid #d8e4ef;
      border-radius: 10px;
      background: #fff;
      cursor: pointer;
      transition: transform .2s, border-color .2s, box-shadow .2s
    }

    .platform-card:hover,
    .platform-card.active {
      transform: translateY(-5px);
      border-color: #68aee9;
      box-shadow: 0 15px 30px #1d527c16
    }

    .platform-card b {
      color: #0876de;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1px
    }

    .platform-card h3 {
      margin: 15px 0 8px;
      color: #193858;
      font-size: 19px;
      line-height: 1.2
    }

    .platform-card p {
      margin: 0;
      color: #6c8197;
      font-size: 13px;
      line-height: 1.55
    }

    .micro-flow {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 18px;
      color: #47769f;
      font: 500 8px "DM Mono", monospace
    }

    .micro-flow i {
      color: var(--orange);
      font-style: normal
    }

    .challenge {
      background: #07182c;
      color: #fff;
      overflow: hidden
    }

    .challenge:before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(#2c496633 1px, transparent 1px), linear-gradient(90deg, #2c496633 1px, transparent 1px);
      background-size: 50px 50px
    }

    .challenge .phase2-inner {
      position: relative
    }

    .challenge :is(h1,h2) {
      color: #fff
    }

    .challenge .section-intro {
      color: #bfcedd
    }

    .perspectives {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin: 46px 0
    }

    .perspective {
      padding: 19px;
      border: 1px solid #32526f;
      border-radius: 8px;
      background: #0e2942;
      color: #c7d7e6
    }

    .perspective b {
      display: block;
      margin-bottom: 8px;
      color: #ffaf37;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: .9px
    }

    .perspective span {
      font-size: 14px;
      font-weight: 800
    }

    .questions {
      background: #fff
    }

    .question-layout {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 38px;
      align-items: start;
      margin-top: 51px
    }

    .question-list {
      display: grid;
      gap: 8px
    }

    .question-button {
      padding: 14px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #d7e4ef;
      border-radius: 7px;
      background: #fff;
      color: #39536e;
      text-align: left;
      font: 700 13px Manrope, Arial, sans-serif;
      cursor: pointer;
      transition: border-color .2s, background .2s
    }

    .question-button:hover,
    .question-button.active {
      border-color: #6caee5;
      background: #f0f8ff;
      color: #086dcc
    }

    .question-screen {
      overflow: hidden;
      border: 1px solid #cbdceb;
      border-radius: 12px;
      background: #f3f7fb;
      box-shadow: 0 17px 35px #1d527c1a
    }

    .question-image-scroll {
      height: 300px;
      overflow: auto;
      background: #f3f7fb;
      scrollbar-width: thin;
      scrollbar-color: #9fc2dc #f3f7fb
    }

    .question-image-scroll img {
      display: block;
      width: var(--question-image-width, 105%);
      height: auto;
      max-width: none;
      max-height: none;
      object-fit: contain;
      object-position: top left
    }

    .screen-info {
      padding: 16px 18px;
      background: #fff
    }

    .screen-info b {
      display: block;
      color: #1c3d5e;
      font-size: 14px
    }

    .screen-info span {
      display: block;
      margin-top: 5px;
      color: #70859a;
      font-size: 12px
    }

    .benefits {
      background: #f5f8fc
    }

    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 48px
    }

    .benefit {
      min-height: 270px;
      padding: 25px;
      border-top: 3px solid #ff9300;
      background: #fff;
      box-shadow: 0 10px 23px #1a4f7810
    }

    .benefit b {
      color: #0876de;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1px
    }

    .benefit h3 {
      margin: 15px 0 12px;
      color: #163655;
      font-size: 21px;
      line-height: 1.18
    }

    .benefit p {
      margin: 0;
      color: #6e8399;
      font-size: 13px;
      line-height: 1.65
    }

    .empowers {
      background: #fff
    }

    .empower-lead {
      max-width: 760px;
      margin: 20px 0 45px;
      color: #63788f;
      font-size: 17px;
      line-height: 1.72
    }

    .role-layout {
      display: grid;
      align-items: start
    }

    .role-tabs {
      display: grid;
      gap: 7px
    }

    .role-tab {
      padding: 17px;
      border: 1px solid #d6e3ee;
      border-radius: 7px;
      background: #fff;
      color: #35516d;
      text-align: left;
      font: 700 14px Manrope, Arial, sans-serif;
      cursor: pointer
    }

    .role-tab span {
      display: block;
      margin-top: 4px;
      color: #8395a8;
      font: 400 11px Manrope, Arial, sans-serif
    }

    .role-tab.active,
    .role-tab:hover {
      border-color: #6dafe5;
      background: #eff8ff;
      color: #086dcc
    }

    .role-visual {
      overflow: hidden;
      border: 1px solid #cfdfed;
      border-radius: 12px;
      background: #f4f8fc;
      box-shadow: 0 20px 37px #21557a18
    }

    .role-visual img {
      display: block;
      width: 100%;
      aspect-ratio: 1.82;
      object-fit: cover;
      object-position: top
    }

    .role-copy {
      padding: 20px 22px;
      background: #fff
    }

    .role-copy b {
      display: block;
      color: #183958;
      font-size: 18px
    }

    .role-copy p {
      margin: 7px 0 0;
      color: #6d8298;
      font-size: 13px;
      line-height: 1.6
    }

    .phase-next {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 74px;
      padding: 29px 33px;
      border: 1px solid #bddaf3;
      border-radius: 11px;
      background: #eff8ff
    }

    .phase-next p {
      margin: 0;
      max-width: 570px;
      color: #31516e;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5
    }

    .phase-next a {
      white-space: nowrap
    }

    .phase-next .cta-primary {
      height: 48px
    }

    @media(max-width:900px) {
      .platform-grid {
        grid-template-columns: repeat(3, 1fr)
      }

      .benefit-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .question-layout {
        grid-template-columns: 1fr
      }

      .role-tabs {
        grid-template-columns: repeat(4, 1fr)
      }

      .role-tab {
        font-size: 12px;
        padding: 12px
      }

      .role-tab span {
        display: none
      }
    }

    @media(max-width:620px) {
      .phase2-section {
        padding: 80px 20px
      }

      .phase2-section :is(h1,h2) {
        letter-spacing: -2.2px
      }

      .scatter-board {
        min-height: 490px
      }

      .scatter-note {
        padding: 10px;
        font-size: 8px
      }

      .scatter-note:after {
        width: 45px
      }

      .s-trackers {
        left: 4%;
        top: 8%
      }

      .s-email {
        right: 4%;
        top: 8%
      }

      .s-drawings {
        left: 1%;
        top: 38%
      }

      .s-messages {
        right: 1%;
        top: 38%
      }

      .s-project {
        left: 7%;
        bottom: 8%
      }

      .s-reports {
        right: 7%;
        bottom: 8%
      }

      .connection-transition {
        grid-template-columns: 1fr;
        gap: 10px
      }

      .transition-arrow {
        transform: rotate(90deg)
      }

      .platform-grid,
      .benefit-grid {
        grid-template-columns: 1fr
      }

      .platform-card {
        min-height: auto
      }

      .perspectives {
        grid-template-columns: 1fr 1fr
      }

      .role-tabs {
        grid-template-columns: 1fr 1fr
      }

      .phase-next {
        align-items: flex-start;
        flex-direction: column;
        padding: 25px
      }

      .phase-next .cta-primary {
        width: 100%
      }
    }

    /* Light product showcase: the real application stays bright while the hero keeps its technical contrast. */
    .hero {
      padding-bottom: 108px
    }

    .dashboard-showcase {
      position: relative;
      width: min(1180px, 100%);
      margin: 65px auto 0;
      padding: 0 30px 42px
    }

    .dashboard-showcase:before {
      content: "";
      position: absolute;
      z-index: -1;
      left: 8%;
      right: 8%;
      top: 120px;
      bottom: 80px;
      border-radius: 50%;
      background: radial-gradient(ellipse, #0d7ee070, transparent 68%);
      filter: blur(20px)
    }

    .dashboard-showcase:after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 78px 6% 50px;
      background-image: linear-gradient(#75b5e727 1px, transparent 1px), linear-gradient(90deg, #75b5e727 1px, transparent 1px);
      background-size: 30px 30px;
      mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)
    }

    .dashboard-heading {
      text-align: center
    }

    .dashboard-heading .overline {
      margin-bottom: 13px
    }

    .dashboard-heading :is(h1,h2) {
      margin: 0;
      color: #fff;
      font-size: clamp(30px, 4vw, 50px);
      line-height: 1.12;
      letter-spacing: -2.5px
    }

    .dashboard-heading :is(h1,h2) span {
      color: #ffad35
    }

    .dashboard-tabs {
      display: flex;
      justify-content: center;
      gap: 9px;
      margin: 25px 0 29px
    }

    .dashboard-role-tab {
      position: relative;
      min-height: 42px;
      padding: 0 17px;
      border: 1px solid #d3e4f1;
      background: #f8fbffeb;
      color: #45627e;
      border-radius: 999px;
      font: 800 12px Manrope, Arial, sans-serif;
      cursor: pointer;
      box-shadow: 0 8px 20px #010b1950;
      transition: background .2s, color .2s, transform .2s
    }

    .dashboard-role-tab:hover {
      transform: translateY(-2px);
      border-color: #8bc4ef
    }

    .dashboard-role-tab.active {
      border-color: #0876de;
      background: #0876de;
      color: #fff
    }

    .dashboard-role-tab.active:after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -8px;
      width: 18px;
      height: 3px;
      transform: translateX(-50%);
      border-radius: 9px;
      background: #ff9300
    }

    .dashboard-stage {
      position: relative;
      width: min(1140px, 100%);
      margin: auto
    }

    .dashboard-connector {
      position: absolute;
      z-index: -1;
      border-top: 1px solid #68b5e6;
      opacity: .7;
      transform-origin: left
    }

    .dashboard-connector:after {
      content: "";
      position: absolute;
      right: -4px;
      top: -4px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ff9300;
      box-shadow: 0 0 10px #ff9300
    }

    .dc-one {
      left: 2%;
      top: 19%;
      width: 20%;
      transform: rotate(28deg)
    }

    .dc-two {
      right: 2%;
      top: 20%;
      width: 21%;
      transform: rotate(151deg)
    }

    .dc-three {
      left: 7%;
      bottom: 19%;
      width: 17%;
      transform: rotate(-32deg)
    }

    .dc-four {
      right: 6%;
      bottom: 21%;
      width: 18%;
      transform: rotate(211deg)
    }

    .dashboard-concept {
      position: absolute;
      z-index: -1;
      padding: 6px 9px;
      border: 1px solid #75bce980;
      border-radius: 4px;
      background: #0d2b49b8;
      color: #b9dcf7;
      font: 500 8px "DM Mono", monospace;
      letter-spacing: .8px
    }

    .concept-projects {
      left: 7%;
      top: 9%
    }

    .concept-people {
      right: 9%;
      top: 9%
    }

    .concept-workflows {
      left: 4%;
      bottom: 21%
    }

    .concept-data {
      right: 3%;
      bottom: 21%
    }

    .concept-visibility {
      left: 23%;
      bottom: 5%
    }

    .concept-action {
      right: 22%;
      bottom: 5%
    }

    .dashboard-frame {
      position: relative;
      z-index: 1;
      overflow: hidden;
      border: 1px solid #a9c9e1;
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 0 0 4px #1587e426, 0 26px 55px #010b1c78;
      animation: dashboard-float .8s cubic-bezier(.22, .8, .24, 1) both
    }

    .dashboard-bar {
      height: 51px;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 16px;
      border-bottom: 1px solid #dce8f2;
      background: linear-gradient(180deg, #fff, #f3f8fc);
      color: #243f5b
    }

    .dashboard-control {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #c5d5e3
    }

    .dashboard-control:nth-child(2) {
      background: #a9c2d5
    }

    .dashboard-control:nth-child(3) {
      background: #91b0c8
    }

    .dashboard-title {
      margin-left: 10px;
      font-size: 12px;
      font-weight: 800
    }

    .dashboard-status {
      margin-left: auto;
      padding: 5px 9px;
      border: 1px solid #c9deee;
      border-radius: 999px;
      background: #fff;
      color: #39709a;
      font: 500 9px "DM Mono", monospace;
      letter-spacing: .5px
    }

    .dashboard-expand {
      width: 28px;
      height: 28px;
      margin-left: 8px;
      border: 1px solid #c9deee;
      border-radius: 7px;
      background: #fff;
      color: #39709a;
      font-size: 16px;
      line-height: 1;
      cursor: pointer
    }

    .dashboard-media {
      position: relative;
      aspect-ratio: 1.73;
      overflow: hidden;
      background: #f8fbfd
    }

    .dashboard-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 0
    }

    .dashboard-frame.dashboard-expanded {
      box-shadow: 0 0 0 5px #1587e742, 0 30px 60px #010b1c8c
    }

    @keyframes dashboard-float {
      from {
        opacity: 0;
        transform: translateY(24px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @media(max-width:900px) {
      .dashboard-showcase {
        padding: 0 0 36px
      }

      .dashboard-concept {
        opacity: .65
      }

      .dc-one {
        left: 8%;
        width: 16%
      }

      .dc-two {
        right: 8%;
        width: 17%
      }
    }

    @media(max-width:620px) {
      .hero {
        padding: 77px 16px 70px
      }

      .dashboard-showcase {
        margin-top: 48px;
        padding-bottom: 0
      }

      .dashboard-heading :is(h1,h2) {
        letter-spacing: -1.6px
      }

      .dashboard-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 4px 3px 10px;
        margin: 20px -3px 20px;
        scrollbar-width: thin
      }

      .dashboard-role-tab {
        flex: 0 0 auto
      }

      .dashboard-stage {
        width: 100%
      }

      .dashboard-connector,
      .dashboard-concept {
        display: none
      }

      .dashboard-frame {
        border-radius: 18px;
        box-shadow: 0 0 0 3px #1587e426, 0 17px 32px #010b1c70
      }

      .dashboard-bar {
        height: 43px;
        padding: 0 12px
      }

      .dashboard-title {
        margin-left: 6px;
        font-size: 10px
      }

      .dashboard-status {
        padding: 4px 7px;
        font-size: 7px
      }

      .dashboard-expand {
        width: 25px;
        height: 25px
      }

      .dashboard-media {
        aspect-ratio: 1.72
      }

      .dashboard-media img {
        object-position: 43% 0
      }

      .dashboard-showcase:after {
        display: none
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .dashboard-frame {
        animation: none
      }
    }

    .map-core {
      width: 148px;
      height: 148px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font: 700 14px "DM Mono", monospace;
      letter-spacing: 1.1px
    }

    .map-core img {
      width: var(--map-globe-size, 54px);
      height: auto;
      max-width: 70%;
      display: block;
      object-fit: contain;
      flex: 0 0 auto
    }

    .map-core small {
      position: absolute;
      top: calc(100% + 22px);
      left: 50%;
      width: max-content;
      transform: translateX(-50%);
      color: #316488;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1px;
      white-space: nowrap
    }

    @media(max-width:620px) {
      .map-core {
        width: 148px;
        height: 148px
      }

      .map-core img {
        width: var(--map-globe-size, 54px);
        max-width: 70%
      }
    }

    .scatter-board {
      background-color: #edf5fb;
      background-image: linear-gradient(#bdd9ed85 1px, transparent 1px), linear-gradient(90deg, #bdd9ed85 1px, transparent 1px), radial-gradient(circle at 50% 48%, #ffffff 0 13%, #e4f1fb99 36%, transparent 66%), linear-gradient(135deg, #f9fcff, #e7f2fa);
      background-size: 34px 34px, 34px 34px, auto, auto
    }

    .transition-bridge:before {
      display: none
    }

    .pain-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 27px
    }

    .pain-strip article {
      min-height: 80px;
      padding: 14px;
      border: 1px solid #d6e3ee;
      border-radius: 9px;
      background: #ffffffb8;
      box-shadow: 0 8px 18px #1a4f780b;
      transition: transform .2s, box-shadow .2s
    }

    .pain-strip article:hover {
      transform: translateY(-3px);
      box-shadow: 0 13px 24px #1a4f7814
    }

    .pain-strip b {
      display: block;
      color: #31526f;
      font-size: 11px
    }

    .pain-strip span {
      display: block;
      margin-top: 7px;
      color: #74889d;
      font-size: 11px;
      line-height: 1.45
    }

    .scatter-board {
      margin-top: 34px
    }

    .comparison-intro {
      margin: 52px auto 0;
      max-width: 720px;
      text-align: center
    }

    .comparison-intro h3 {
      margin: 0;
      color: #173653;
      font-size: clamp(23px, 3vw, 34px);
      letter-spacing: -1.4px;
      line-height: 1.18
    }

    .comparison-intro p {
      margin: 11px 0 0;
      color: #698097;
      font-size: 14px;
      line-height: 1.6
    }

    .connection-transition {
      margin-top: 28px
    }

    .platform-visual {
      display: flex;
      align-items: center;
      min-height: 38px;
      margin-top: 17px;
      color: #47769f;
      font: 500 7px "DM Mono", monospace;
      letter-spacing: .5px
    }

    .role-nodes {
      flex-wrap: wrap;
      gap: 5px
    }

    .role-nodes span,
    .insight-widgets span {
      padding: 6px 7px;
      border: 1px solid #c9deee;
      border-radius: 4px;
      background: #f8fcff
    }

    .role-nodes i {
      width: 7px;
      border-top: 1px solid #87b9df
    }

    .data-stream {
      gap: 5px
    }

    .data-stream i {
      width: 26px;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, #9bcff1 0 50%, transparent 50%);
      background-size: 8px 100%;
      animation: data-flow 2.4s linear infinite
    }

    .data-stream i:nth-child(2) {
      animation-delay: -.8s
    }

    .data-stream i:nth-child(3) {
      animation-delay: -1.6s
    }

    .data-stream span {
      padding: 7px 8px;
      border: 1px solid #94c4e8;
      border-radius: 4px;
      background: #eaf6ff;
      color: #0876de
    }

    .insight-widgets {
      gap: 5px
    }

    @keyframes data-flow {
      to {
        background-position: 24px 0
      }
    }

    .core-benefits {
      padding-top: 92px;
      padding-bottom: 92px;
      background: #fff
    }

    .core-benefits-intro {
      text-align: center
    }

    .core-benefits-intro .section-intro {
      margin-left: auto;
      margin-right: auto
    }

    .core-benefit-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 46px
    }

    .core-benefit-grid article {
      min-height: 274px;
      padding: 25px;
      border: 1px solid #d9e5ef;
      border-top: 3px solid #87bbe2;
      border-radius: 12px;
      background: #fbfdff;
      box-shadow: 0 10px 24px #1a4f780d;
      transition: transform .22s, box-shadow .22s, border-color .22s
    }

    .core-benefit-grid article:hover {
      transform: translateY(-6px);
      border-color: #64a8df;
      box-shadow: 0 18px 35px #1a4f7818
    }

    .core-benefit-grid b {
      color: #0876de;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: .9px
    }

    .core-benefit-grid h3 {
      margin: 18px 0 11px;
      color: #163655;
      font-size: 21px;
      line-height: 1.18
    }

    .core-benefit-grid p {
      margin: 0;
      color: #6e8399;
      font-size: 13px;
      line-height: 1.65
    }

    .about-transition {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      margin-top: 48px;
      padding: 31px 34px;
      border: 1px solid #c6deef;
      border-radius: 13px;
      background: #eff8ff
    }

    .about-transition h3 {
      max-width: 660px;
      margin: 0;
      color: #264762;
      font-size: 20px;
      line-height: 1.35
    }

    .about-transition p {
      margin: 9px 0 0;
      color: #647d94;
      font-size: 13px;
      line-height: 1.6
    }

    .about-transition .cta-primary {
      flex: 0 0 auto;
      height: 50px;
      white-space: nowrap
    }

    @media(max-width:900px) {

      .pain-strip,
      .core-benefit-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .core-benefit-grid article {
        min-height: 230px
      }

      .about-transition {
        align-items: flex-start;
        flex-direction: column
      }

    }

    @media(max-width:620px) {
      .pain-strip {
        grid-template-columns: 1fr 1fr;
        gap: 8px
      }

      .pain-strip article {
        min-height: 74px;
        padding: 12px
      }

      .scatter-board {
        margin-top: 28px
      }

      .comparison-intro {
        margin-top: 38px
      }

      .comparison-intro h3 {
        letter-spacing: -1px
      }

      .core-benefits {
        padding-top: 75px;
        padding-bottom: 75px
      }

      .core-benefit-grid {
        grid-template-columns: 1fr;
        margin-top: 32px
      }

      .core-benefit-grid article {
        min-height: auto
      }

      .about-transition {
        margin-top: 32px;
        padding: 25px
      }

      .about-transition h3 {
        font-size: 18px
      }

      .about-transition .cta-primary {
        width: 100%
      }

      .role-nodes {
        gap: 4px
      }

      .role-nodes span,
      .insight-widgets span {
        padding: 5px;
        font-size: 6px
      }
    }

    /* Marketing-site light theme tokens and scoped surface overrides. Dashboard screenshots remain unmodified. */
    :root {
      --ink: #123b5d;
      --blue: #087ce2;
      --blue-deep: #0568bf;
      --orange: #ff9000;
      --pale: #e8f2fc;
      --line: #d5e3f0;
      --text: #425b76;
      --muted: #6b7f95
    }

    .site-header {
      background: rgba(255, 255, 255, .95);
      border-color: #d5e3f0
    }

    .site-header.scrolled {
      box-shadow: 0 8px 24px rgba(30, 86, 130, .08)
    }

    .desktop-nav a,
    .mobile-menu a {
      color: #425b76
    }

    .desktop-nav a:hover,
    .login {
      color: #087ce2
    }

    .walkthrough,
    .cta-primary {
      background: #087ce2;
      box-shadow: 0 10px 24px rgba(30, 86, 130, .14)
    }

    .cta-primary:hover,
    .walkthrough:hover {
      background: #0568bf
    }

    .cta-secondary {
      border-color: #087ce2;
      background: #fff;
      color: #087ce2
    }

    .cta-secondary:hover {
      border-color: #087ce2;
      background: #e8f2fc
    }

    .hero {
      background-color: #f7faff;
      color: #123b5d;
      background-image: linear-gradient(#bdd8ed8c 1px, transparent 1px), linear-gradient(90deg, #bdd8ed8c 1px, transparent 1px);
      background-size: 56px 56px
    }

    .hero:before {
      background: radial-gradient(circle at 72% 57%, #b9e1ff8a, transparent 30%), radial-gradient(circle at 18% 20%, #e8f2fc, transparent 28%)
    }

    .hero h1,
    .dashboard-heading :is(h1,h2) {
      color: #123b5d
    }

    .hero-lead {
      color: #425b76
    }

    .overline,
    .eyebrow {
      color: #087ce2
    }

    .node {
      border-color: #b9d4ea;
      background: #fff;
      color: #123b5d;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .08)
    }

    .orbital {
      border-color: #9bc9e955
    }

    .screen-caption {
      color: #6b7f95
    }

    .dashboard-showcase:before {
      background: radial-gradient(ellipse, #9fd6ff70, transparent 68%)
    }

    .dashboard-showcase:after {
      background-image: linear-gradient(#b9d9ed80 1px, transparent 1px), linear-gradient(90deg, #b9d9ed80 1px, transparent 1px)
    }

    .dashboard-concept {
      border-color: #b9d4ea;
      background: #fff;
      color: #123b5d;
      box-shadow: 0 8px 20px rgba(30, 86, 130, .08)
    }

    .dashboard-frame {
      border-color: #d5e3f0;
      box-shadow: 0 0 0 4px #087ce21f, 0 18px 50px rgba(30, 86, 130, .12)
    }

    .dashboard-frame.dashboard-expanded {
      box-shadow: 0 0 0 5px #087ce233, 0 18px 50px rgba(30, 86, 130, .16)
    }

    .dashboard-role-tab {
      border-color: #d5e3f0;
      background: #fff;
      color: #425b76;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .08)
    }

    .dashboard-role-tab:hover {
      background: #e8f2fc;
      border-color: #b9d4ea;
      color: #087ce2
    }

    .dashboard-role-tab.active {
      border-color: #087ce2;
      background: #087ce2;
      color: #fff
    }

    .about {
      background: #eef5fc
    }

    .focus-map,
    .scatter-board {
      border-color: #d5e3f0;
      box-shadow: 0 18px 50px rgba(30, 86, 130, .08)
    }

    .map-core {
      background: #087ce2;
      border-color: #087ce2;
      box-shadow: 0 0 0 13px #dcecfb
    }

    .map-core small {
      color: #425b76
    }

    .challenge,
    .journey-section,
    .final-section {
      color: #123b5d;
      background: #eef5fc
    }

    .challenge:before {
      background-image: linear-gradient(#bdd8ed8c 1px, transparent 1px), linear-gradient(90deg, #bdd8ed8c 1px, transparent 1px)
    }

    .challenge :is(h1,h2),
    .journey-section :is(h1,h2) {
      color: #123b5d
    }

    .challenge .section-intro,
    .journey-section .section-intro {
      color: #425b76
    }

    .perspective,
    .journey-step,
    .journey-detail,
    .expansion,
    .contact-form {
      border-color: #d5e3f0;
      background: #fff;
      color: #123b5d;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .08)
    }

    .perspective b,
    .journey-step b {
      color: #ff9000
    }

    .journey-step {
      color: #425b76
    }

    .journey-step:hover,
    .journey-step.active {
      border-color: #087ce2;
      background: #e8f2fc;
      color: #123b5d;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .12)
    }

    .journey-detail h3,
    .journey-final p,
    .expansion :is(h1,h2) {
      color: #123b5d
    }

    .journey-detail>div>p:not(.stage-number),
    .stage-value,
    .expansion .section-intro {
      color: #425b76
    }

    .stage-value {
      border-color: #d5e3f0
    }

    .stage-value b,
    .solutions-transition {
      color: #087ce2
    }

    .journey-final {
      border-color: #b9d4ea
    }

    .solutions-transition:hover {
      color: #0568bf
    }

    .solutions-section {
      background: #f7faff
    }

    .solutions-section:before {
      background: linear-gradient(180deg, #eef5fc, #f7faff)
    }

    .module-note {
      background: #e8f2fc;
      color: #123b5d
    }

    .expansion-map:before {
      border-color: #b9d4ea
    }

    .expansion-node,
    .expansion-node.future {
      border-color: #d5e3f0;
      background: #fff;
      color: #425b76
    }

    .expansion-node.current {
      border-color: #ff9000;
      background: #e8f2fc;
      color: #0568bf
    }

    .final-section {
      background-image: linear-gradient(#bdd8ed8c 1px, transparent 1px), linear-gradient(90deg, #bdd8ed8c 1px, transparent 1px)
    }

    .final-section:before {
      background: radial-gradient(circle at 50% 25%, #b9e1ff8a, transparent 30%)
    }

    .final-loop .loop-ring {
      border-color: #9bc9e9
    }

    .final-chip {
      border-color: #b9d4ea;
      background: #fff;
      color: #123b5d;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .08)
    }

    .final-chip:after {
      border-color: #9bc9e9
    }

    .walkthrough-panel {
      border-color: #d5e3f0
    }

    .walkthrough-copy p,
    .form-status {
      color: #425b76
    }

    .existing-user {
      color: #087ce2
    }

    .existing-user:hover {
      color: #0568bf
    }

    .field label {
      color: #123b5d
    }

    .field input,
    .field select,
    .field textarea {
      border-color: #b9d4ea;
      background: #fff;
      color: #123b5d
    }

    .field input::placeholder,
    .field textarea::placeholder,
    .field select:invalid {
      color: #6b7f95
    }

    .footer {
      border-color: #d5e3f0;
      background: #e8f2fc
    }

    .footer-brand p,
    .footer-nav a,
    .footer-bottom,
    .footer-bottom a {
      color: #425b76
    }

    .footer-brand p b {
      color: #123b5d
    }

    .footer-nav a:hover,
    .footer-bottom a:hover {
      color: #087ce2
    }

    .footer-bottom {
      border-color: #d5e3f0
    }

    .mobile-menu {
      background: #fff;
      border-color: #d5e3f0
    }

    .role-visual.timeline-mode {
      background: #e8f2fc
    }

    .role-visual.timeline-mode img {
      opacity: .18
    }

    .role-visual.timeline-mode:after {
      color: #123b5d
    }

    .phase2-section :is(h1,h2),
    .about :is(h1,h2),
    .solutions-section :is(h1,h2), .journey-top h1 {
      color: #123b5d
    }

    .section-intro,
    .empower-lead {
      color: #425b76
    }

    body {
      background: #f7faff
    }

    a:focus-visible,
    button:focus-visible {
      outline-color: #ff9000
    }

    .dashboard-media {
      display: block;
      aspect-ratio: 2.02;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: #9fc2dc #f8fbfd
    }

    .dashboard-media img {
      display: block;
      width: 100%;
      height: auto;
      max-width: none;
      max-height: none;
      min-height: 0;
      object-fit: initial;
      object-position: top
    }

    .dashboard-media::-webkit-scrollbar {
      width: 8px
    }

    .dashboard-media::-webkit-scrollbar-track {
      background: #f8fbfd
    }

    .dashboard-media::-webkit-scrollbar-thumb {
      background: #9fc2dc;
      border-radius: 10px
    }

    .dashboard-carousel-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-top: 17px
    }

    .dashboard-carousel-controls button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 15px;
      border: 1px solid #b9d4ea;
      border-radius: 999px;
      background: #fff;
      color: #087ce2;
      font: 800 12px Manrope, Arial, sans-serif;
      cursor: pointer;
      transition: background .2s, border-color .2s
    }

    .dashboard-carousel-controls button:hover {
      border-color: #087ce2;
      background: #e8f2fc
    }

    .dashboard-carousel-controls button:disabled {
      opacity: .45;
      cursor: default
    }

    .dashboard-carousel-controls div {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px
    }

    .dashboard-carousel-controls .dashboard-indicator {
      width: 8px;
      height: 8px;
      min-height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #b9d4ea;
      cursor: pointer;
      transition: width .2s, background .2s
    }

    .dashboard-carousel-controls .dashboard-indicator.active {
      width: 25px;
      height: 8px;
      min-height: 8px;
      border-radius: 8px;
      background: #087ce2
    }

    .dashboard-media {
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: #9fc2dc #f8fbfd
    }

    .dashboard-media::-webkit-scrollbar {
      width: 8px
    }

    .dashboard-media::-webkit-scrollbar-track {
      background: #f8fbfd
    }

    .dashboard-media::-webkit-scrollbar-thumb {
      background: #9fc2dc;
      border-radius: 10px
    }

    .dashboard-media img {
      display: block;
      width: 100%;
      height: auto;
      min-height: 100%;
      object-fit: contain;
      object-position: top
    }

    @media(max-width:620px) {
      .dashboard-carousel-controls {
        margin-top: 13px
      }

      .dashboard-carousel-controls button {
        min-height: 39px;
        padding: 0 12px
      }

      .dashboard-carousel-controls button span {
        display: none
      }
    }

    @media(max-width:620px) {

      .role-tab {
        min-height: 70px;
        padding: 12px;
        font-size: 11px;
      }

    }

    .pain-strip {
      grid-template-columns: repeat(3, 1fr)
    }

    .role-layout {
      grid-template-columns: 1fr;
      gap: 24px
    }

    .role-tabs {
      grid-template-columns: repeat(3, 1fr);
      gap: 13px
    }

    .role-tab {
      min-height: 104px;
      padding: 20px;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .08);
      transition: transform .2s, box-shadow .2s, border-color .2s
    }

    .role-tab:hover,
    .role-tab.active {
      transform: translateY(-4px);
      border-color: #087ce2;
      background: #e8f2fc;
      box-shadow: 0 14px 28px rgba(30, 86, 130, .12)
    }

    .role-visual {
      max-width: 860px;
      margin: auto
    }

    .audience-comparison {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 46px
    }

    .comparison-panel {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 25px;
      border: 1px solid #d5e3f0;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .08)
    }

    .comparison-copy {
      min-height: 116px
    }

    .comparison-copy p {
      margin: 0 0 9px;
      color: #087ce2;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1px
    }

    .comparison-copy h3 {
      margin: 0;
      color: #123b5d;
      font-size: 26px;
      letter-spacing: -1.2px
    }

    .comparison-copy span {
      display: block;
      margin-top: 9px;
      color: #425b76;
      font-size: 13px;
      line-height: 1.55
    }

    .comparison-scatter {
      flex: 1;
      min-height: 365px;
      margin-top: 18px;
      background: #eef5fc;
      background-image: none;
      box-shadow: none
    }

    .comparison-scatter .scatter-note {
      padding: 10px 11px;
      font-size: 8px
    }

    .comparison-scatter .scatter-note:after {
      width: 56px
    }


    .comparison-scatter .s-project {
      left: 12%;
      bottom: 10%
    }

    .comparison-scatter .s-reports {
      right: 10%;
      bottom: 10%
    }

    .comparison-scatter .scatter-core {
      width: 138px;
      height: 138px;
      font-size: 10px
    }

    .comparison-ecosystem {
      flex: 1;
      width: 100%;
      height: 365px;
      margin: 18px 0 0;
      overflow: hidden;
      border: 1px solid #d5e3f0;
      border-radius: 12px;
      background: #eef5fc
    }

    .comparison-ecosystem .screen-caption {
      font-size: 8px
    }

    .comparison-ecosystem .node:after {
      box-shadow: 0 0 8px #ff9000
    }

    @media(max-width:900px) {
      .audience-comparison {
        grid-template-columns: 1fr
      }

      .comparison-panel {
        padding: 22px
      }

      .comparison-copy {
        min-height: auto
      }

      .comparison-scatter,
      .comparison-ecosystem {
        min-height: 355px
      }

      .role-tabs {
        grid-template-columns: repeat(2, 1fr)
      }

      .role-tab:last-child {
        grid-column: auto;
        max-width: none;
        justify-self: auto;
        width: auto;
      }

    }

    @media(max-width:620px) {
      .pain-strip {
        grid-template-columns: 1fr
      }

      .role-tabs {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }

      .role-tab {
        min-height: 50px !important;
        height: 50px !important;
        padding: 6px !important;

        display: flex;
        align-items: center;
        justify-content: center;

        text-align: center;

        font-size: 9px !important;
        line-height: 1.2;
      }

      .audience-comparison {
        grid-template-columns: 1fr;
        margin-top: 32px;
        gap: 14px
      }

      .comparison-panel {
        padding: 17px
      }

      .comparison-scatter,
      .comparison-ecosystem {
        min-height: 330px;
        height: 330px
      }

      .comparison-ecosystem .orbit-one {
        width: 260px;
        height: 215px
      }

      .comparison-ecosystem .orbit-two {
        width: 310px;
        height: 280px
      }

      .comparison-ecosystem .center {
        width: 155px;
        height: 89px
      }

      .comparison-ecosystem .node:not(.center) {
        min-height: 31px;
        padding: 0 7px;
        font-size: 8px;
        font-weight: 700;
      }

      .comparison-ecosystem .n-people {
        left: 2%;
        top: 7%
      }

      .comparison-ecosystem .n-workflows {
        right: 2%;
        top: 7%
      }

      .comparison-ecosystem .n-projects {
        left: 0;
        top: 44%
      }

      .comparison-ecosystem .n-data {
        right: 0;
        top: 44%
      }

      .comparison-ecosystem .n-visibility {
        left: 2%;
        bottom: 7%
      }

      .comparison-ecosystem .n-action {
        right: 1%;
        bottom: 7%
      }
    }

    .comparison-before {
      justify-content: center;
      min-height: 499px;
      background: #fff
    }

    .comparison-before .comparison-copy {
      min-height: 0;
      max-width: 360px;
      margin: auto;
      text-align: center
    }

    .comparison-with {
      min-height: 499px
    }

    @media(max-width:900px) {

      .comparison-before,
      .comparison-with {
        min-height: 0
      }

      .comparison-with .comparison-ecosystem {
        height: 355px
      }
    }

    @media(max-width:620px) {
      .comparison-with .comparison-ecosystem {
        height: 330px
      }
    }

    .comparison-before {
      justify-content: flex-start
    }

    .comparison-before .comparison-copy {
      max-width: none;
      margin: 0;
      text-align: left
    }

    .comparison-scatter {
      background-color: #edf5fb;
      background-image: linear-gradient(#bdd9ed85 1px, transparent 1px), linear-gradient(90deg, #bdd9ed85 1px, transparent 1px), radial-gradient(circle at 50% 48%, #ffffff 0 13%, #e4f1fb99 36%, transparent 66%), linear-gradient(135deg, #f9fcff, #e7f2fa);
      background-size: 34px 34px, 34px 34px, auto, auto
    }

    @media(min-width:621px) {

      .comparison-scatter,
      .comparison-with .comparison-ecosystem {
        height: 405px;
        min-height: 405px
      }

      .comparison-with .comparison-copy {
        min-height: 0
      }
    }

    .journey-flow {
      display: flex;
      align-items: stretch;
      gap: 28px;
      margin: 52px 0 38px;
      overflow: visible
    }

    .journey-flow .journey-step {
      position: relative;
      z-index: 1;
      flex: 1;
      min-width: 0;
      min-height: 112px;
      padding: 15px 9px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border-color: #b9d4ea;
      background: #fff;
      color: #123b5d;
      text-align: center;
      box-shadow: 0 8px 20px rgba(30, 86, 130, .06)
    }

    .journey-flow .journey-step:not(:last-child):after {
      content: "";
      position: absolute;
      z-index: -1;
      left: 100%;
      top: 50%;
      width: 28px;
      border-top: 1px solid #8fc3e6
    }

    .journey-flow .journey-step:not(:last-child):before {
      content: "→";
      position: absolute;
      z-index: 2;
      right: -28px;
      top: calc(50% - 10px);
      width: 20px;
      height: 20px;
      color: #087ce2;
      background: #eef5fc;
      font-size: 17px;
      line-height: 19px
    }

    .journey-flow .journey-step:hover,
    .journey-flow .journey-step.active {
      transform: translateY(-4px);
      border-color: #087ce2;
      background: #e8f2fc;
      color: #0568bf;
      box-shadow: 0 14px 28px rgba(30, 86, 130, .12)
    }

    .journey-flow .journey-step.active {
      box-shadow: 0 0 0 4px #dcecfb, 0 14px 28px rgba(30, 86, 130, .12)
    }

    .journey-flow .journey-step b {
      color: #ff9000;
      font-size: 10px
    }

    .journey-flow .journey-step span {
      font-size: 10px;
      line-height: 1.25
    }

    .journey-detail {
      display: block;
      padding: 34px;
      border-color: #d5e3f0;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .08)
    }

    .journey-detail h3 {
      margin: 0;
      color: #123b5d;
      font-size: clamp(28px, 3.3vw, 42px)
    }

    .journey-detail>p:not(.stage-number) {
      max-width: 760px;
      margin: 18px 0 0;
      color: #425b76;
      font-size: 16px;
      line-height: 1.7
    }

    .journey-detail .stage-value {
      min-height: 105px;
      margin: 0;
      padding: 18px;
      border: 1px solid #d5e3f0;
      border-radius: 9px;
      background: #eef5fc;
      color: #425b76
    }

    .journey-detail .stage-value b {
      display: block;
      margin-bottom: 9px;
      color: #087ce2
    }

    .journey-detail .stage-value span {
      display: block;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.55
    }

    @media(max-width:900px) {
      .journey-flow {
        overflow-x: auto;
        padding: 5px 5px 13px;
        gap: 25px
      }

      .journey-flow .journey-step {
        flex: 0 0 132px
      }
    }

    @media(max-width:620px) {
      .journey-flow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, auto);
        column-gap: 28px;
        row-gap: 15px;
        overflow: visible;
        margin: 36px 0 28px;
        padding: 0;
      }

      .journey-flow .journey-step {
        width: 100%;
        min-height: 72px;
      }


      /* =========================
     SNAKE-STYLE POSITIONS
     ========================= */

      /* Row 1 */
      .journey-flow .journey-step:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
      }

      .journey-flow .journey-step:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
      }

      /* Row 2 */
      .journey-flow .journey-step:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
      }

      .journey-flow .journey-step:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
      }

      /* Row 3 */
      .journey-flow .journey-step:nth-child(5) {
        grid-column: 1;
        grid-row: 3;
      }

      .journey-flow .journey-step:nth-child(6) {
        grid-column: 2;
        grid-row: 3;
      }

      /* Row 4 */
      .journey-flow .journey-step:nth-child(7) {
        grid-column: 2;
        grid-row: 4;
      }


      /* =========================
     RESET EXISTING ARROWS
     ========================= */

      .journey-flow .journey-step:not(:last-child):after {
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: auto;
        height: auto;
        border: 0;
      }

      .journey-flow .journey-step:not(:last-child):before {
        right: auto;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: auto;
        height: auto;
        background: transparent;
      }


      /* =========================
     INITIATE → PLANNING
     ========================= */

      .journey-flow .journey-step:nth-child(1):after {
        left: 100%;
        top: 50%;
        width: 28px;
        border-top: 1px solid #8fc3e6;
      }

      .journey-flow .journey-step:nth-child(1):before {
        content: "→";
        right: -28px;
        top: calc(50% - 10px);
        width: 20px;
        height: 20px;
        color: #087ce2;
        background: #eef5fc;
        font-size: 17px;
        line-height: 19px;
      }


      /* =========================
     PLANNING ↓ EXECUTION
     ========================= */

      .journey-flow .journey-step:nth-child(2):after {
        left: 50%;
        top: 100%;
        width: 1px;
        height: 15px;
        border-left: 1px solid #8fc3e6;
      }

      .journey-flow .journey-step:nth-child(2):before {
        content: "→";
        left: calc(50% - 10px);
        bottom: -16px;
        width: 20px;
        height: 20px;
        color: #087ce2;
        background: #eef5fc;
        font-size: 17px;
        line-height: 19px;
        transform: rotate(90deg);
      }


      /* =========================
     EXECUTION ← MONITORING
     ========================= */

      .journey-flow .journey-step:nth-child(3):after {
        right: 100%;
        top: 50%;
        width: 28px;
        border-top: 1px solid #8fc3e6;
      }

      .journey-flow .journey-step:nth-child(3):before {
        content: "→";
        left: -28px;
        top: calc(50% - 10px);
        width: 20px;
        height: 20px;
        color: #087ce2;
        background: #eef5fc;
        font-size: 17px;
        line-height: 19px;
        transform: rotate(180deg);
      }


      /* =========================
     MONITORING ↓ REVIEW
     ========================= */

      .journey-flow .journey-step:nth-child(4):after {
        left: 50%;
        top: 100%;
        width: 1px;
        height: 15px;
        border-left: 1px solid #8fc3e6;
      }

      .journey-flow .journey-step:nth-child(4):before {
        content: "→";
        left: calc(50% - 10px);
        bottom: -16px;
        width: 20px;
        height: 20px;
        color: #087ce2;
        background: #eef5fc;
        font-size: 17px;
        line-height: 19px;
        transform: rotate(90deg);
      }


      /* =========================
     REVIEW → APPROVAL
     ========================= */

      .journey-flow .journey-step:nth-child(5):after {
        left: 100%;
        top: 50%;
        width: 28px;
        border-top: 1px solid #8fc3e6;
      }

      .journey-flow .journey-step:nth-child(5):before {
        content: "→";
        right: -28px;
        top: calc(50% - 10px);
        width: 20px;
        height: 20px;
        color: #087ce2;
        background: #eef5fc;
        font-size: 17px;
        line-height: 19px;
      }


      /* =========================
     APPROVAL ↓ DELIVERED
     ========================= */

      .journey-flow .journey-step:nth-child(6):after {
        left: 50%;
        top: 100%;
        width: 1px;
        height: 15px;
        border-left: 1px solid #8fc3e6;
      }

      .journey-flow .journey-step:nth-child(6):before {
        content: "→";
        left: calc(50% - 10px);
        bottom: -16px;
        width: 20px;
        height: 20px;
        color: #087ce2;
        background: #eef5fc;
        font-size: 17px;
        line-height: 19px;
        transform: rotate(90deg);
      }


      /* Delivered is the final card */
      .journey-flow .journey-step:nth-child(7):after,
      .journey-flow .journey-step:nth-child(7):before {
        display: none;
      }


      /* Journey detail below the workflow */
      .journey-detail {
        padding: 23px;
      }

      .journey-detail .stage-value {
        min-height: auto;
      }
    }

    .journey-flow .workflow-icon {
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      stroke: #087ce2;
      stroke-width: 1.7;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .journey-flow .journey-step.active .workflow-icon {
      stroke: #0568bf
    }

    @media(max-width:620px) {
      .journey-flow .workflow-icon {
        width: 27px;
        height: 27px
      }
    }

    .journey-detail {
      padding: 38px;
      background: #fff;
      color: #123b5d;
      box-shadow: 0 18px 50px rgba(30, 86, 130, .12)
    }

    .journey-detail .stage-number {
      margin: 0 0 14px;
      color: #087ce2;
      font-size: 11px
    }

    .journey-detail h3 {
      color: #123b5d;
      font-size: clamp(29px, 3.4vw, 44px);
      letter-spacing: -2px
    }

    .journey-detail>p:not(.stage-number) {
      max-width: 780px;
      color: #425b76
    }

    .journey-detail .stage-value {
      display: block;
      max-width: 780px;
      min-height: 0;
      margin-top: 27px;
      padding: 20px 0 0;
      border: 0;
      border-top: 1px solid #b9d4ea;
      background: transparent;
      color: #425b76;
      border-radius: 0
    }

    .journey-detail .stage-value b {
      color: #087ce2
    }

    .journey-detail .stage-value span {
      font-size: 15px;
      color: #123b5d
    }

    @media(max-width:620px) {
      .journey-detail {
        padding: 26px
      }

      .journey-detail h3 {
        letter-spacing: -1.3px
      }
    }

    .role-experience {
      margin-top: 46px
    }

    .role-tagline {
      margin: 23px 0;
      color: #087ce2;
      text-align: center;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.55
    }

    .role-carousel {
      max-width: 860px;
      margin: auto;
      outline: none
    }

    .role-slide {
      min-height: 510px;
      overflow: hidden;
      border: 1px solid #d5e3f0;
      border-radius: 13px;
      background: #fff;
      box-shadow: 0 18px 40px rgba(30, 86, 130, .1);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .3s ease, transform .3s ease
    }

    .role-slide.slide-visible {
      opacity: 1;
      transform: none
    }

    .role-slide-media {
      min-height: 460px;
      overflow: auto;
      padding: 18px;
      border-left: 1px solid #d5e3f0;
      background: #eef5fc;
      scrollbar-width: thin;
      scrollbar-color: #9fc2dc #eef5fc;
    }

    .role-slide-media img {
      display: block;
      width: var(--role-image-width, 105%);
      height: auto;
      max-width: none;
      border: 1px solid #b9d4ea;
      border-radius: 9px;
    }

    .role-slide-media::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .role-slide-media::-webkit-scrollbar-thumb {
      background: #9fc2dc;
      border-radius: 10px;
    }

    .role-slide-copy {
      padding: 21px 24px;
      background: #fff
    }

    .role-slide-copy b,
    .role-slide-placeholder b {
      display: block;
      color: #123b5d;
      font-size: 21px;
      line-height: 1.25
    }

    .role-slide-copy p,
    .role-slide-placeholder p {
      margin: 8px 0 0;
      color: #425b76;
      font-size: 14px;
      line-height: 1.65
    }

    .role-slide-placeholder {
      min-height: 510px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 54px;
      position: relative;
      background: #eef5fc;
      background-image: linear-gradient(#c9dff055 1px, transparent 1px), linear-gradient(90deg, #c9dff055 1px, transparent 1px);
      background-size: 34px 34px
    }

    .role-slide-placeholder:before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 260px;
      height: 260px;
      transform: translate(-50%, -50%);
      border: 1px solid #b9d4ea;
      border-radius: 50%;
      box-shadow: 0 0 0 34px #e8f2fc
    }

    .role-slide-placeholder>* {
      position: relative;
      z-index: 1
    }

    .role-slide-placeholder span {
      margin-bottom: 15px;
      color: #087ce2;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1px
    }

    .role-slide-placeholder b {
      max-width: 510px;
      font-size: clamp(28px, 3.5vw, 42px)
    }

    .role-slide-placeholder p {
      max-width: 560px;
      font-size: 16px
    }

    .carousel-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-top: 17px
    }

    .carousel-control {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 15px;
      border: 1px solid #b9d4ea;
      border-radius: 999px;
      background: #fff;
      color: #087ce2;
      font: 800 12px Manrope, Arial, sans-serif;
      cursor: pointer;
      transition: background .2s, border-color .2s
    }

    .carousel-control:hover {
      border-color: #087ce2;
      background: #e8f2fc
    }

    .carousel-indicators {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      flex-wrap: wrap
    }

    .carousel-indicator {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #b9d4ea;
      cursor: pointer;
      transition: width .2s, background .2s
    }

    .carousel-indicator.active {
      width: 25px;
      border-radius: 8px;
      background: #087ce2
    }

    @media(max-width:620px) {
      .role-experience {
        margin-top: 31px
      }

      .role-tagline {
        font-size: 14px
      }

      .role-slide {
        min-height: 390px
      }

      .role-slide-media {
        height: 270px
      }

      .role-slide-copy {
        padding: 17px
      }

      .role-slide-copy b {
        font-size: 18px
      }

      .role-slide-placeholder {
        min-height: 390px;
        padding: 32px
      }

      .role-slide-placeholder:before {
        width: 190px;
        height: 190px;
        box-shadow: 0 0 0 23px #e8f2fc
      }

      .role-slide-placeholder b {
        font-size: 27px
      }

      .role-slide-placeholder p {
        font-size: 14px
      }

      .carousel-control {
        min-height: 40px;
        padding: 0 12px
      }

      .carousel-control span {
        display: none
      }
    }

    .role-carousel {
      max-width: 1120px
    }

    .role-slide {
      display: grid;
      grid-template-columns: 2fr 3fr;
      min-height: 460px
    }

    .role-slide-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 42px;
      background: #fff
    }

    .role-slide-label {
      margin-bottom: 15px;
      color: #ff9000;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1.1px
    }

    .role-slide-copy h3 {
      margin: 0;
      color: #123b5d;
      font-size: clamp(27px, 3vw, 42px);
      line-height: 1.12;
      letter-spacing: -1.6px
    }

    .role-slide-copy>p {
      margin: 17px 0 0;
      color: #425b76;
      font-size: 15px;
      line-height: 1.7
    }

    .role-slide-divider {
      width: 100%;
      margin: 25px 0 18px;
      border-top: 1px solid #d5e3f0
    }

    .role-slide-value b {
      display: block;
      color: #087ce2;
      font: 500 9px "DM Mono", monospace;
      letter-spacing: 1px
    }

    .role-slide-value p {
      margin: 9px 0 0;
      color: #123b5d;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.6
    }

    .role-slide-media {
      height: 460px;
      min-height: 460px;
      min-width: 0;
      padding: 18px;
      overflow: auto;
      border-left: 1px solid #d5e3f0;
      background: #eef5fc;
      scrollbar-width: thin;
      scrollbar-color: #9fc2dc #eef5fc;
    }

    .role-slide-media img {
      display: block;
      width: var(--role-image-width, 105%);
      height: auto;
      max-width: none;
      max-height: none;
      object-fit: initial;
      border: 1px solid #b9d4ea;
      border-radius: 9px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .1);
    }

    .role-slide-media::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .role-slide-media::-webkit-scrollbar-track {
      background: #eef5fc;
    }

    .role-slide-media::-webkit-scrollbar-thumb {
      background: #9fc2dc;
      border-radius: 10px;
    }

    .role-preview-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      min-height: 400px;
      padding: 28px;
      border: 1px solid #b9d4ea;
      border-radius: 9px;
      background-color: #fff;
      background-image: linear-gradient(#c9dff055 1px, transparent 1px), linear-gradient(90deg, #c9dff055 1px, transparent 1px);
      background-size: 30px 30px;
      text-align: center
    }

    .role-preview-placeholder span {
      color: #087ce2;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1px
    }

    .role-preview-placeholder b {
      margin-top: 12px;
      color: #123b5d;
      font-size: 22px;
      line-height: 1.25
    }

    @media(max-width:780px) {
      .role-slide {
        grid-template-columns: 1fr;
        min-height: 0
      }

      .role-slide-copy {
        padding: 31px
      }

      .role-slide-media {
        min-height: 330px;
        border-top: 1px solid #d5e3f0;
        border-left: 0
      }

      .role-preview-placeholder {
        min-height: 294px
      }
    }

    @media(max-width:620px) {
      .role-slide-copy {
        padding: 25px
      }

      .role-slide-media {
        min-height: 255px;
        padding: 13px
      }

      .role-preview-placeholder {
        min-height: 228px
      }

      .role-slide-copy h3 {
        letter-spacing: -1.2px
      }

      .role-slide-copy>p {
        font-size: 14px
      }

      .role-slide-value p {
        font-size: 13px
      }
    }

    .module-visual {
      background-color: #f5f9fd;
      background-image: linear-gradient(#dce9f3 1px, transparent 1px), linear-gradient(90deg, #dce9f3 1px, transparent 1px);
      background-size: 26px 26px
    }

    .module-art {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      padding: 18px;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .28s ease, transform .28s ease
    }

    .module-art.visible {
      opacity: 1;
      transform: none
    }

    .module-art svg,
    .module-art img {
      display: block;
      width: 72%;
      height: 72%;
      min-width: 260px;
      max-width: 430px;
      object-fit: contain;
      filter: drop-shadow(0 12px 14px rgba(30, 86, 130, .13))
    }

    @media(max-width:620px) {
      .module-art {
        padding: 12px
      }

      .module-art svg,
      .module-art img {
        width: 76%;
        height: 76%;
        min-width: 210px
      }
    }

    /* Shared major-section rhythm: keeps the marketing narrative connected without altering component interiors. */
    :root {
      --section-spacing-desktop: 96px;
      --section-spacing-tablet: 80px;
      --section-spacing-mobile: 64px
    }

    .about,
    .phase2-section,
    .journey-section,
    .solutions-section {
      padding-top: var(--section-spacing-desktop);
      padding-bottom: var(--section-spacing-desktop)
    }

    .final-section {
      padding-top: var(--section-spacing-desktop)
    }

    .dashboard-showcase {
      margin-top: 48px;
      padding-bottom: 32px
    }

    .core-benefits {
      padding-top: var(--section-spacing-desktop);
      padding-bottom: var(--section-spacing-desktop)
    }

    .expansion {
      margin-top: 64px
    }

    .action-bridge {
      margin-top: 64px
    }

    .journey-final {
      margin-top: 48px
    }

    .walkthrough-panel {
      padding-top: 32px;
      padding-bottom: 64px;
      border-top: 0
    }

    @media(max-width:920px) {

      .about,
      .phase2-section,
      .journey-section,
      .solutions-section {
        padding-top: var(--section-spacing-tablet);
        padding-bottom: var(--section-spacing-tablet)
      }

      .final-section {
        padding-top: var(--section-spacing-tablet)
      }

      .dashboard-showcase {
        padding-bottom: 28px
      }

      .core-benefits {
        padding-top: var(--section-spacing-tablet);
        padding-bottom: var(--section-spacing-tablet)
      }

      .expansion {
        margin-top: 56px
      }

      .action-bridge {
        margin-top: 56px
      }

      .walkthrough-panel {
        padding-top: 28px;
        padding-bottom: 56px
      }
    }

    @media(max-width:620px) {

      .about,
      .phase2-section,
      .journey-section,
      .solutions-section {
        padding-top: var(--section-spacing-mobile);
        padding-bottom: var(--section-spacing-mobile)
      }

      .final-section {
        padding-top: var(--section-spacing-mobile)
      }

      .dashboard-showcase {
        margin-top: 40px;
        padding-bottom: 24px
      }

      .core-benefits {
        padding-top: var(--section-spacing-mobile);
        padding-bottom: var(--section-spacing-mobile)
      }

      .expansion {
        margin-top: 48px
      }

      .action-bridge {
        margin-top: 48px
      }

      .journey-final {
        margin-top: 38px
      }

      .walkthrough-panel {
        padding-top: 24px;
        padding-bottom: 48px
      }
    }

    /* The modules CTA leads straight into contact, so it uses a deliberately tighter handoff. */
    .solutions-section {
      padding-bottom: 32px
    }

    .final-section {
      padding-top: 32px
    }

    @media(max-width:920px) {
      .solutions-section {
        padding-bottom: 28px
      }

      .final-section {
        padding-top: 28px
      }
    }

    @media(max-width:620px) {
      .solutions-section {
        padding-bottom: 24px
      }

      .final-section {
        padding-top: 24px
      }
    }

    /* Responsive display scale: keeps desktop headings impactful without oversized wrapping. */
    .hero h1 {
      text-wrap: balance;
      font-size: clamp(48px, 5.25vw, 76px)
    }

    .about :is(h1,h2),
    .phase2-section :is(h1,h2),
    .solutions-section :is(h1,h2), .journey-top h1 {
      text-wrap: balance;
      font-size: clamp(40px, 4.5vw, 64px)
    }

    .module-content h3 {
      text-wrap: balance;
      font-size: clamp(32px, 3.5vw, 52px)
    }

    .section-intro,
    .empower-lead,
    .about-copy>p:not(.eyebrow) {
      font-size: 18px
    }

    @media(min-width:921px) {
      .hero h1 {
        font-size: clamp(68px, 5.25vw, 76px)
      }

      .about :is(h1,h2),
      .phase2-section :is(h1,h2),
      .solutions-section :is(h1,h2), .journey-top h1 {
        font-size: clamp(54px, 4.5vw, 64px)
      }

      .module-content h3 {
        font-size: clamp(44px, 3.5vw, 52px)
      }
    }

    @media(max-width:920px) {
      .hero h1 {
        font-size: clamp(48px, 6vw, 68px)
      }

      .about :is(h1,h2),
      .phase2-section :is(h1,h2),
      .solutions-section :is(h1,h2), .journey-top h1 {
        font-size: clamp(42px, 5.6vw, 54px)
      }

      .module-content h3 {
        font-size: clamp(34px, 4.8vw, 44px)
      }
    }

    @media(max-width:620px) {
      .hero h1 {
        font-size: clamp(42px, 11vw, 52px)
      }

      .about :is(h1,h2),
      .phase2-section :is(h1,h2),
      .solutions-section :is(h1,h2), .journey-top h1 {
        font-size: clamp(34px, 9vw, 42px)
      }

      .module-content h3 {
        font-size: clamp(30px, 8vw, 38px)
      }

      .section-intro,
      .empower-lead,
      .about-copy>p:not(.eyebrow) {
        font-size: 16px
      }
    }

    .back-to-top {
      position: fixed;
      right: 32px;
      bottom: 32px;
      z-index: 60;
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #087ce2;
      color: #fff;
      box-shadow: 0 12px 28px rgba(30, 86, 130, .22);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(12px);
      transition: opacity .22s ease, transform .22s ease, visibility .22s
    }

    .back-to-top.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0)
    }

    .back-to-top:hover {
      background: #0568bf;
      box-shadow: 0 16px 32px rgba(30, 86, 130, .28);
      transform: translateY(-3px) scale(1.04)
    }

    .back-to-top:active {
      transform: translateY(0) scale(.97)
    }

    .back-to-top svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    @media(max-width:920px) {
      .back-to-top {
        right: 24px;
        bottom: 24px
      }
    }

    @media(max-width:620px) {
      .back-to-top {
        right: 20px;
        bottom: 20px;
        width: 48px;
        height: 48px
      }

      .back-to-top svg {
        width: 21px;
        height: 21px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .back-to-top {
        transition: none
      }
    }

    .image-lightbox {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 40px 24px;
      background: rgba(7, 24, 44, .76);
      backdrop-filter: blur(10px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .22s ease, visibility .22s
    }

    .image-lightbox.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto
    }

    .image-lightbox img {
      display: block;
      max-width: 95vw;
      max-height: 90vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border: 1px solid #b9d4ea;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
      cursor: default;
    }

    .lightbox-close {
      position: fixed;
      right: 20px;
      top: 20px;
      z-index: 999999;
      width: 48px;
      height: 48px;
      padding: 0;
      border: 1px solid #b9d4ea;
      border-radius: 50%;
      background: #fff;
      color: #123b5d;
      font-size: 31px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .18)
    }

    .lightbox-close:hover {
      background: #e8f2fc;
      color: #087ce2
    }

    .lightbox-close:focus-visible {
      outline: 3px solid #ff9000;
      outline-offset: 3px
    }

    body.lightbox-open {
      overflow: hidden
    }

    @media(max-width:620px) {
      .image-lightbox {
        padding: 64px 12px 20px
      }

      .image-lightbox.is-open img {
        max-width: 96vw;
        max-height: 84vh
      }

      .lightbox-close {
        right: 16px;
        top: 16px;
        width: 40px;
        height: 40px;
        font-size: 28px
      }
    }

    .solutions-head+.module-experience {
      margin-top: 24px
    }

    @media(max-width:620px) {
      .solutions-head+.module-experience {
        margin-top: 18px
      }
    }

    .expansion {
      position: relative;
      overflow: hidden;
      background: #f8fcff;
      background-image: linear-gradient(#c9dff055 1px, transparent 1px), linear-gradient(90deg, #c9dff055 1px, transparent 1px);
      background-size: 34px 34px
    }

    .expansion-map {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1.12fr 1fr;
      grid-template-rows: repeat(3, 132px);
      gap: 24px 56px;
      max-width: 980px;
      margin: 48px auto 0;
      padding: 0;
      background: transparent;
      border: 0
    }

    .expansion-links {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible
    }

    .expansion-links path {
      fill: none;
      stroke: #8fc3e6;
      stroke-width: 1.5;
      stroke-dasharray: 5 6;
      animation: expansion-flow 8s linear infinite
    }

    .expansion-node,
    .expansion-core {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 0;
      padding: 18px;
      border: 1px solid #b9d4ea;
      border-radius: 13px;
      background: #fff;
      color: #123b5d;
      text-align: center;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .08);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease
    }

    .expansion-node b {
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.25
    }

    .expansion-node small {
      max-height: 0;
      margin: 0;
      overflow: hidden;
      color: #425b76;
      font-size: 11px;
      line-height: 1.45;
      opacity: 0;
      transition: max-height .22s ease, margin .22s ease, opacity .22s ease
    }

    .expansion-node:hover {
      z-index: 2;
      transform: translateY(-5px);
      border-color: #087ce2;
      background: #f8fcff;
      box-shadow: 0 16px 30px rgba(30, 86, 130, .16)
    }

    .expansion-node:hover small {
      max-height: 48px;
      margin-top: 7px;
      opacity: 1
    }

    .expansion-icon {
      width: 29px;
      height: 29px;
      fill: none;
      stroke: #087ce2;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .expansion-node.current {
      grid-column: 1;
      grid-row: 1;
      border-color: #ff9000
    }

    .future-modules {
      grid-column: 3;
      grid-row: 1
    }

    .workflows {
      grid-column: 1;
      grid-row: 2
    }

    .intelligence {
      grid-column: 3;
      grid-row: 2
    }

    .insights {
      grid-column: 1;
      grid-row: 3
    }

    .ecosystem {
      grid-column: 3;
      grid-row: 3;
      margin: 0;
      width: auto;
      height: auto
    }

    .expansion-core {
      grid-column: 2;
      grid-row: 2;
      border: 2px solid #087ce2;
      border-radius: 50%;
      background: #087ce2;
      color: #fff;
      box-shadow: 0 0 0 12px #dcecfb, 0 18px 34px rgba(30, 86, 130, .2)
    }

    .expansion-core:before {
      content: "";
      position: absolute;
      inset: -28px;
      border: 1px solid #9bc9e9;
      border-radius: 50%;
      pointer-events: none
    }

    .expansion-core span {
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1px
    }

    .expansion-core b {
      margin-top: 5px;
      font-size: 24px;
      letter-spacing: -1px
    }

    .expansion-core small {
      max-width: 155px;
      margin-top: 6px;
      color: #e8f2fc;
      font-size: 10px;
      line-height: 1.35
    }

    @keyframes expansion-flow {
      to {
        stroke-dashoffset: -88
      }
    }

    @media(max-width:900px) {
      .expansion-map {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 128px);
        gap: 18px;
        margin-top: 38px
      }

      .expansion-links {
        display: none
      }

      .expansion-node.current {
        grid-column: 1;
        grid-row: 1
      }

      .future-modules {
        grid-column: 2;
        grid-row: 1
      }

      .workflows {
        grid-column: 1;
        grid-row: 2
      }

      .intelligence {
        grid-column: 2;
        grid-row: 2
      }

      .expansion-core {
        grid-column: 1/-1;
        grid-row: 3
      }

      .insights {
        grid-column: 1;
        grid-row: 4
      }

      .ecosystem {
        grid-column: 2;
        grid-row: 4
      }
    }

    @media(max-width:620px) {
      .expansion {
        padding-left: 20px;
        padding-right: 20px
      }

      .expansion-map {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, auto);
        gap: 13px;
        margin-top: 31px
      }

      .expansion-node {
        min-height: 110px
      }

      .expansion-node small {
        max-height: 48px;
        margin-top: 7px;
        opacity: 1
      }

      .expansion-node.current,
      .future-modules,
      .workflows,
      .intelligence,
      .insights,
      .ecosystem {
        grid-column: 1;
        grid-row: auto
      }

      .expansion-core {
        grid-column: 1;
        grid-row: auto;
        min-height: 176px;
        border-radius: 22px
      }

      .expansion-core:before {
        inset: -8px;
        border-radius: 29px
      }

      .expansion-core small {
        font-size: 11px
      }

      .expansion-node:hover {
        transform: none
      }
    }

    .module-stage {
      height: 430px;
      min-height: 430px;
      grid-template-rows: 1fr
    }

    .module-visual {
      min-height: 0;
      height: 100%
    }

    @media(max-width:900px) {
      .module-stage {
        height: auto;
        min-height: 0
      }

      .module-visual {
        height: 300px;
        min-height: 300px
      }
    }

    @media(max-width:620px) {
      .module-visual {
        height: 230px;
        min-height: 230px
      }
    }

    .comparison-ecosystem .orbital {
      display: none
    }

    .comparison-ecosystem {
      isolation: isolate;
      background-color: #eef5fc;
      background-image: linear-gradient(#c9dff055 1px, transparent 1px), linear-gradient(90deg, #c9dff055 1px, transparent 1px);
      background-size: 28px 28px
    }

    .network-links {
      position: absolute;
      z-index: 0;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible
    }

    .network-link {
      fill: none;
      stroke: #80bce6;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-dasharray: 7 8;
      animation: network-flow 3.5s linear infinite
    }

    .flow {
      fill: #ff9000;
      filter: drop-shadow(0 0 4px #ff9000)
    }

    .network-ring {
      position: absolute;
      z-index: 0;
      left: 50%;
      top: 50%;
      width: 210px;
      height: 210px;
      transform: translate(-50%, -50%);
      border: 1px solid #8fc3e6;
      border-radius: 50%;
      box-shadow: 0 0 0 18px #dcecfb88;
      animation: network-ring 3.5s ease-in-out infinite
    }

    .comparison-ecosystem .center {
      z-index: 2;
      width: 198px;
      height: 72px;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 10px;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible
    }

    .comparison-ecosystem .center:before,
    .comparison-ecosystem .center:after {
      display: none
    }

    .comparison-ecosystem .center img {
      width: 178px;
      height: auto;
      object-fit: contain;
      object-position: center
    }

    @media(max-width:620px) {

      .comparison-ecosystem .center img {
        width: 120px !important;
      }

      .comparison-ecosystem .center {
        width: 135px !important;
      }

      .comparison-ecosystem .node:not(.center) {
        width: 70px !important;
        height: 28px !important;
        font-size: 7.5px !important;
        font-weight: 700 !important;
      }

      .comparison-ecosystem .n-people {
        left: 8% !important;
        width: 88px !important;
      }

      .comparison-ecosystem .n-workflows {
        right: 8% !important;
      }

      .comparison-ecosystem .n-projects {
        left: 15px !important;
      }

      .comparison-ecosystem .n-data {
        right: 15px !important;
      }

      .comparison-ecosystem .n-visibility {
        left: 8% !important;
      }

      .comparison-ecosystem .n-action {
        right: 6% !important;
        width: 190px !important;
      }

      .comparison-ecosystem .screen-caption {
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: -32px !important;
        text-align: center;
      }

    }

    .comparison-ecosystem .center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .comparison-ecosystem .screen-caption {
      bottom: -27px;
      color: #087ce2;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 1px
    }

    .comparison-ecosystem .node:not(.center) {
      z-index: 2;
      white-space: nowrap;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .comparison-ecosystem .n-action {
      width: auto;
      padding: 0 14px;
    }

    .comparison-ecosystem .node:not(.center):hover {
      transform: scale(1.06);
      border-color: #087ce2;
      box-shadow: 0 0 0 4px #dcecfb, 0 12px 24px rgba(30, 86, 130, .16)
    }

    .comparison-ecosystem:has(.node:not(.center):hover) .center {
      border-color: #087ce2 !important;
      box-shadow: 0 0 0 14px #dcecfb, 0 0 28px #87c9f4, 0 15px 28px rgba(30, 86, 130, .16) !important
    }

    .comparison-ecosystem:has(.n-projects:hover) .link-projects,
    .comparison-ecosystem:has(.n-people:hover) .link-people,
    .comparison-ecosystem:has(.n-workflows:hover) .link-workflows,
    .comparison-ecosystem:has(.n-data:hover) .link-data,
    .comparison-ecosystem:has(.n-visibility:hover) .link-analytics,
    .comparison-ecosystem:has(.n-action:hover) .link-action {
      stroke: #087ce2;
      stroke-width: 3.5;
      filter: drop-shadow(0 0 4px #87c9f4)
    }

    @keyframes network-flow {
      to {
        stroke-dashoffset: -60
      }
    }

    @keyframes network-ring {
      50% {
        box-shadow: 0 0 0 28px #dcecfb44
      }
    }

    @media(max-width:620px) {
      .comparison-ecosystem .center {
        width: 210px;
        height: 75px
      }

      .comparison-ecosystem .center img {
        width: 195px
      }

      .network-ring {
        width: 190px;
        height: 190px
      }

      .network-link {
        stroke-width: 1.5
      }

      .flow {
        display: none
      }
    }

    @media screen and (max-width: 620px) {

      /* Common size for all six capsules */
      section.problem .comparison-ecosystem .node:not(.center) {
        width: auto !important;
        min-width: 92px !important;
        max-width: none !important;
        padding: 0 10px !important;

        font-size: 8px !important;
        font-weight: 500 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;
      }

      /* Connecting Team needs slightly more width */
      section.problem .comparison-ecosystem .n-people {
        width: 88px !important;
        min-width: 110px !important;
        max-width: 88px !important;
        left: 8px !important;
        right: auto !important;
      }

      /* Workflows */
      section.problem .comparison-ecosystem .n-workflows {
        right: 12px !important;
        left: auto !important;
      }

      /* Projects and Data */
      section.problem .comparison-ecosystem .n-projects {
        left: 13px !important;
        right: auto !important;
      }

      section.problem .comparison-ecosystem .n-data {
        right: 13px !important;
        left: auto !important;
      }

      /* Analytics */
      section.problem .comparison-ecosystem .n-visibility {
        left: 22px !important;
        right: auto !important;
      }

      /* Structured Action needs extra width and alignment */
      section.problem .comparison-ecosystem .n-action {
        width: 114px !important;
        min-width: 125px !important;
        max-width: 114px !important;
        right: 8px !important;
        left: auto !important;
        padding: 0 3px !important;
        font-size: 6.5px !important;
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .network-link,
      .network-ring {
        animation: none
      }
    }

    .comparison-with .comparison-ecosystem {
      margin-top: 28px
    }

    @media(max-width:620px) {
      .comparison-with .comparison-ecosystem {
        margin-top: 22px
      }

      .comparison-with .comparison-ecosystem {
        width: calc(100% + 25px);
        margin-left: -12px;
      }

      section.problem .comparison-ecosystem .node:not(.center) {
        font-family: "DM Mono", monospace !important;
        font-size: 8px !important;
        font-weight: 500 !important;
        letter-spacing: 0.5px !important;
      }
    }

    .expansion-core {
      width: 132px;
      height: 132px;
      justify-self: center;
      align-self: center
    }

    @media(max-width:620px) {
      .expansion-core {
        width: 100%;
        height: auto
      }
    }

    /* Restore the hero logo as a centered, uncropped connected-intelligence hub. */
    .hero .ecosystem {
      height: 392px;
      margin-top: 56px
    }

    .hero .ecosystem .center {
      width: 270px;
      height: auto;
      margin: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible
    }

    .hero .ecosystem .center:before,
    .hero .ecosystem .center:after {
      display: none
    }

    .hero .ecosystem .center img {
      display: block;
      width: 270px;
      height: auto;
      object-fit: contain;
      object-position: center
    }

    .hero .ecosystem .center {
      width: 270px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hero .ecosystem .center img {
      width: 270px;
      height: auto;
    }

    .hero .ecosystem .screen-caption {
      position: static;
      margin-left: 280px;
      margin-top: 5px;
      color: #087ce2;
      font: 600 11px "DM Mono", monospace;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .hero .ecosystem .node:not(.center) {
      border-color: #b9d4ea;
      background: #fff;
      color: #123b5d;
      box-shadow: 0 8px 24px rgba(30, 86, 130, .08)
    }

    .hero .ecosystem .node:after {
      box-shadow: 0 0 8px #ff9000
    }

    .hero .ecosystem .orbit-one {
      width: 690px;
      height: 254px
    }

    .hero .ecosystem .orbit-two {
      width: 840px;
      height: 340px
    }

    @media(max-width:920px) {
      .hero .ecosystem {
        height: 360px
      }

      .hero .ecosystem .center,
      .hero .ecosystem .center img {
        width: 240px
      }

      .hero .ecosystem .orbit-one {
        width: 570px
      }

      .hero .ecosystem .orbit-two {
        width: 690px
      }
    }

    @media(max-width:920px) {
      .hero .ecosystem {
        height: 360px
      }

      .hero .ecosystem .center,
      .hero .ecosystem .center img {
        width: 240px
      }

      .hero .ecosystem .orbit-one {
        width: 570px;
        height: 300px
      }

      .hero .ecosystem .orbit-two {
        width: 690px;
        height: 350px
      }
    }

    @media(max-width:760px) {
      .hero .ecosystem {
        width: 100%;
        height: 390px;
        margin-top: 34px
      }

      .hero .ecosystem .orbit-one {
        width: 430px;
        height: 260px
      }

      .hero .ecosystem .orbit-two {
        width: 510px;
        height: 315px
      }

      .hero .ecosystem .center,
      .hero .ecosystem .center img {
        width: 165px
      }

      .hero .ecosystem .center {
        top: 50%
      }

      .hero .ecosystem .screen-caption {
        position: absolute;
        left: 50%;
        top: calc(50% + 92px);
        bottom: auto;
        margin: 0;
        transform: translateX(-50%);
        font-size: 7px;
        letter-spacing: 1.4px
      }

      .hero .ecosystem .node:not(.center) {
        width: 88px;
        height: 34px;
        font-size: 7px
      }

      .hero .ecosystem .n-people {
        left: 7%;
        top: 4%
      }

      .hero .ecosystem .n-workflows {
        right: 7%;
        top: 4%
      }

      .hero .ecosystem .n-projects {
        left: 1%;
        top: 44%
      }

      .hero .ecosystem .n-data {
        right: 1%;
        top: 44%
      }

      .hero .ecosystem .n-visibility {
        left: 8%;
        bottom: 4%
      }

      .hero .ecosystem .n-action {
        right: 8%;
        bottom: 4%
      }
    }

    @media(max-width:480px) {
      .hero .ecosystem {
        height: 355px;
        margin-top: 30px
      }

      .hero .ecosystem .orbit-one {
        width: 360px;
        height: 235px
      }

      .hero .ecosystem .orbit-two {
        width: 430px;
        height: 285px
      }

      .hero .ecosystem .center,
      .hero .ecosystem .center img {
        width: 145px
      }

      .hero .ecosystem .screen-caption {
        top: calc(50% + 82px);
        font-size: 6.5px
      }

      .hero .ecosystem .node:not(.center) {
        width: 78px;
        height: 31px;
        font-size: 6.5px
      }

      .hero .ecosystem .n-people {
        left: 2%;
        top: 3%
      }

      .hero .ecosystem .n-workflows {
        right: 2%;
        top: 3%
      }

      .hero .ecosystem .n-projects {
        left: 0;
        top: 45%
      }

      .hero .ecosystem .n-data {
        right: 0;
        top: 45%
      }

      .hero .ecosystem .n-visibility {
        left: 2%;
        bottom: 3%
      }

      .hero .ecosystem .n-action {
        right: 2%;
        bottom: 3%
      }
    }

    @media(max-width:420px) {
      .hero .ecosystem {
        height: 330px;
        margin-top: 26px;
        transform: none;
        margin-bottom: 0
      }

      .hero .ecosystem .orbit-one {
        width: 335px;
        height: 215px
      }

      .hero .ecosystem .orbit-two {
        width: 395px;
        height: 265px
      }

      .hero .ecosystem .center,
      .hero .ecosystem .center img {
        width: 130px
      }

      .hero .ecosystem .screen-caption {
        top: calc(50% + 74px);
        font-size: 6px;
        letter-spacing: 1.2px
      }

      .hero .ecosystem .node:not(.center) {
        width: 73px;
        height: 29px;
        font-size: 6px
      }
    }

    .walkthrough-card {
      min-height: 386px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid #c8ddea;
      border-radius: 13px;
      background: linear-gradient(145deg, #fff, #f5f9fc);
      box-shadow: 0 18px 36px #1e527b12;
    }

    .walkthrough-steps {
      display: flex;
      flex-direction: column;
      margin-top: 8px;
    }

    .walkthrough-step {
      display: flex;
      align-items: center;
      gap: 17px;
    }

    .walkthrough-number {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: grid;
      place-items: center;
      border: 1px solid #9fc8e8;
      border-radius: 50%;
      background: #fff;
      color: #0876de;
      font: 500 10px "DM Mono", monospace;
    }

    .walkthrough-step-copy {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .walkthrough-step-copy b {
      color: #294c6d;
      font: 500 10px "DM Mono", monospace;
      letter-spacing: 1px;
    }

    .walkthrough-step-copy span {
      color: #7b8ea2;
      font-size: 11px;
      line-height: 1.4;
    }

    .walkthrough-line {
      width: 1px;
      height: 34px;
      margin: 5px 0 5px 20px;
      background: #c9ddec;
    }

    .walkthrough-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding-top: 22px;
      border-top: 1px solid #dbe7f0;
    }

    .walkthrough-footer>span {
      color: #8192a4;
      font: 500 9px "DM Mono", monospace;
      letter-spacing: .5px;
    }

    .walkthrough-footer-button {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 44px;
      padding: 0 18px;
      border: 0;
      border-radius: 999px;
      background: #0876de;
      color: #fff;
      text-decoration: none;
      font-family: Manrope, Arial, sans-serif;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 10px 22px #0876de24;
      transition: background .2s, transform .2s;
    }

    .walkthrough-footer-button:hover {
      background: #0359ad;
      transform: translateY(-1px);
    }

    @media(max-width:620px) {
      .walkthrough-card {
        min-height: 340px;
        padding: 24px;
      }

      .walkthrough-step {
        gap: 13px
      }

      .walkthrough-number {
        width: 38px;
        height: 38px;
        flex-basis: 38px
      }

      .walkthrough-line {
        margin-left: 18px;
        height: 27px
      }

      .walkthrough-footer {
        align-items: stretch;
        flex-direction: column
      }

      .walkthrough-footer-button {
        justify-content: center;
      }
    }

    .form-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .form-modal.open {
      display: flex;
    }

    .form-modal-backdrop {
      position: absolute;
      inset: 0;
      background: #061629b8;
      backdrop-filter: blur(5px);
    }

    .form-modal-dialog {
      position: relative;
      z-index: 1;
      width: min(760px, 100%);
      height: min(780px, calc(100vh - 48px));
      overflow: hidden;
      border: 1px solid #c8ddea;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 30px 70px #06162955;
    }

    .form-modal-dialog iframe {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .form-modal-close {
      position: absolute;
      z-index: 2;
      top: 12px;
      right: 12px;
      width: 34px;
      height: 34px;
      border: 1px solid #d5e3ee;
      border-radius: 50%;
      background: #fff;
      color: #365674;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 5px 15px #173d5c18;
    }

    .form-modal-close:hover {
      background: #f4f8fc;
    }

    body.form-modal-open {
      overflow: hidden;
    }

    @media(max-width:620px) {
      .form-modal {
        padding: 10px;
      }

      .form-modal-dialog {
        height: calc(100vh - 20px);
        border-radius: 12px;
      }
    }

    /* FINAL mobile override: stack comparison cards */
    @media screen and (max-width:620px) {

      section.problem .phase2-inner .audience-comparison {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 20px !important;
        width: 100% !important;
      }

      section.problem .audience-comparison>.comparison-panel {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }

      section.problem .comparison-before {
        grid-row: 1 !important;
      }

      section.problem .comparison-with {
        grid-row: 2 !important;
      }
    }
  

    .hero {
      padding: 0 24px 78px
    }

    .hero-inner {
      width: min(1320px, 100%)
    }

    .card-comparison {
      position: relative;
      width: 100%;
      height: calc(100svh - 82px);
      margin: 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .card-orbit {
      position: relative;
      width: 100%;
      height: 100%
    }

    .card-orbit .hero-copy {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(900px, 100%);
      max-width: none;
      margin: 0
    }

    .hero .card-orbit h1,
    .hero .card-comparison-title {
      font-size: clamp(48px, 5.25vw, 76px);
      font-weight: 800;
      line-height: 1.04;
      letter-spacing: -.055em;
      color: #123b5d;
      text-wrap: balance;
      margin: 0
    }

    .hero .card-orbit h1 span,
    .card-comparison-title span {
      color: var(--orange)
    }

    .card-orbit .hero-lead {
      margin: 18px auto 22px;
      max-width: 690px
    }

    .card-orbit .overline {
      margin-bottom: 16px
    }

    .card-slot {
      position: relative;
      min-width: 0;
      min-height: 92px
    }

    .card-orbit .card-slot {
      position: absolute;
      width: clamp(180px, 19vw, 250px)
    }

    .card-orbit .card-slot:nth-of-type(2) {
      top: 24px;
      left: 7%
    }

    .card-orbit .card-slot:nth-of-type(3) {
      top: 24px;
      right: 7%
    }

    .card-orbit .card-slot:nth-of-type(4) {
      bottom: 24px;
      left: 2%
    }

    .card-orbit .card-slot:nth-of-type(5) {
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%)
    }

    .card-orbit .card-slot:nth-of-type(6) {
      bottom: 24px;
      right: 2%
    }

    .popup-feature {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      padding: 19px 20px;
      text-align: left;
      font: inherit;
      color: #173451;
      background: linear-gradient(135deg, #fff, #edf6ff);
      border: 1px solid #c6dbef;
      border-radius: 18px;
      cursor: pointer;
      box-shadow: 0 8px 24px #1537590a;
      transition: transform .24s, box-shadow .24s, filter .24s, opacity .24s, border-color .24s
    }

    .popup-feature strong {
      display: block;
      font-size: 16px;
      color: #0a3159
    }

    .popup-feature .card-tagline {
      display: block;
      font-size: 12px;
      line-height: 1.6;
      margin-top: 7px;
      color: #627b95
    }

    .popup-feature .card-detail {
      display: block;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid #c9e5fc;
      font-size: 13px;
      line-height: 1.75
    }

    .popup-feature .card-detail[hidden] {
      display: none
    }

    .popup-feature[aria-expanded="true"] {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      transform: scale(1.06);
      border-color: #42acff;
      box-shadow: 0 0 0 1px #64c8ff, 0 0 25px #40b6ff66, 0 20px 45px #12548729;
      background: #fff
    }

    .card-slot:has([aria-expanded="true"]) {
      z-index: 10
    }

    .card-orbit .card-slot:nth-of-type(n+4) .popup-feature[aria-expanded="true"] {
      top: auto;
      bottom: 0
    }

    .card-group:has(.popup-feature[aria-expanded="true"]) .popup-feature[aria-expanded="false"] {
      filter: grayscale(1);
      opacity: .38
    }

    .card-row {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 18px;
      align-items: start;
      margin-top: 48px;
      width: 100%;
      overflow: visible
    }

    .card-comparison-second {
      padding: 40px 0 100px
    }

    @media(max-width:920px) {

      .hero .card-orbit h1,
      .hero .card-comparison-title {
        font-size: clamp(42px, 6vw, 68px)
      }

      .card-orbit .hero-copy {
        width: 100%
      }

      .card-orbit .card-slot {
        width: 29%
      }

      .card-orbit .card-slot:nth-of-type(2) {
        left: 12%
      }

      .card-orbit .card-slot:nth-of-type(3) {
        right: 12%
      }

      .card-row {
        gap: 10px
      }

      .popup-feature {
        padding: 16px 12px
      }

      .popup-feature strong {
        font-size: 14px
      }
    }

    @media(max-width:620px) {
      .hero {
        padding: 0 14px 48px
      }

      .card-comparison {
        height: calc(100svh - 72px)
      }

      .hero .card-orbit h1,
      .hero .card-comparison-title {
        font-size: clamp(36px, 9.5vw, 52px)
      }

      .card-orbit .hero-lead {
        font-size: 14px;
        line-height: 1.5;
        margin: 14px auto 18px
      }

      .card-orbit .overline {
        font-size: 9px;
        letter-spacing: 1px
      }

      .card-orbit .hero-actions {
        flex-direction: row;
        gap: 8px
      }

      .card-orbit .hero-actions a {
        padding: 0 12px;
        font-size: 11px;
        height: 42px
      }

      .card-orbit .card-slot {
        width: 31%;
        min-height: 88px
      }

      .card-orbit .card-slot:nth-of-type(2),
      .card-orbit .card-slot:nth-of-type(3) {
        top: 16px;
        width: 43%
      }

      .card-orbit .card-slot:nth-of-type(2) {
        left: 4%
      }

      .card-orbit .card-slot:nth-of-type(3) {
        right: 4%
      }

      .card-orbit .card-slot:nth-of-type(n+4) {
        bottom: 16px
      }

      .card-orbit .card-slot:nth-of-type(4) {
        left: 0
      }

      .card-orbit .card-slot:nth-of-type(6) {
        right: 0
      }

      .popup-feature {
        padding: 13px 9px;
        border-radius: 13px
      }

      .popup-feature strong {
        font-size: 12px
      }

      .popup-feature .card-tagline {
        font-size: 10px;
        line-height: 1.4
      }

      .popup-feature .card-detail {
        font-size: 12px
      }

      .card-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 30px
      }

      .card-comparison-second {
        padding: 24px 0 80px
      }
    }

    @media(max-height:680px) and (min-width:621px) {
      .card-orbit .hero-lead {
        margin: 12px auto;
        font-size: 15px;
        line-height: 1.4
      }

      .card-orbit .overline {
        margin-bottom: 10px
      }

      .card-orbit .hero-actions a {
        height: 42px
      }

      .card-orbit .card-slot:nth-of-type(2),
      .card-orbit .card-slot:nth-of-type(3) {
        top: 12px
      }

      .card-orbit .card-slot:nth-of-type(n+4) {
        bottom: 12px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .popup-feature {
        transition: none
      }
    }

    /* Expand previews inward to keep the supplied screenshots inside the viewport. */
    .popup-feature[aria-expanded="true"] {
      width: min(440px, calc(100vw - 48px));
      transform: scale(1.025)
    }

    .popup-feature .card-preview {
      display: block;
      width: 100%;
      height: auto;
      max-height: 260px;
      object-fit: contain;
      background: #f5f8fc;
      border: 1px solid #dce8f3;
      border-radius: 10px
    }

    .card-orbit .card-slot:nth-of-type(3) .popup-feature[aria-expanded="true"],
    .card-orbit .card-slot:nth-of-type(6) .popup-feature[aria-expanded="true"],
    .card-row .card-slot:nth-child(n+4) .popup-feature[aria-expanded="true"] {
      left: auto;
      right: 0
    }

    .card-orbit .card-slot:nth-of-type(5) .popup-feature[aria-expanded="true"],
    .card-row .card-slot:nth-child(3) .popup-feature[aria-expanded="true"] {
      left: 50%;
      translate: -50% 0;
      transform: scale(1.025)
    }

    @media(max-width:620px) {
      .card-row .card-slot:nth-child(3) .popup-feature[aria-expanded="true"] {
        left: auto;
        right: 0;
        translate: none;
        transform: scale(1.025)
      }

      .card-row .card-slot:nth-child(4) .popup-feature[aria-expanded="true"] {
        left: 0;
        right: auto
      }

      .card-row .card-slot:nth-child(5) .popup-feature[aria-expanded="true"] {
        left: 50%;
        right: auto;
        translate: -50% 0;
        transform: scale(1.025)
      }

      .popup-feature .card-preview {
        max-height: 220px
      }
    }

    /* Preserve the complete original hero above the feature cards. */
    .card-comparison-second {
      padding: 24px 0
    }

    .card-comparison-second .overline {
      margin: 0 0 19px
    }

    .card-comparison-second .overline:before {
      background: var(--orange)
    }

    .card-comparison-second .hero-lead {
      max-width: 850px;
      margin: 18px auto 22px;
      line-height: 1.6
    }

    .card-comparison-second .hero-actions {
      flex-shrink: 0
    }

    .card-comparison-second .card-row {
      margin-top: 32px
    }

    @media(max-width:620px) {
      .card-comparison-second {
        height: auto;
        min-height: calc(100svh - 72px);
        padding: 28px 0
      }

      .card-comparison-second .overline {
        font-size: 10px;
        letter-spacing: 1px
      }

      .card-comparison-second .hero-lead {
        font-size: 14px
      }

      .card-comparison-second .hero-actions {
        flex-direction: row;
        gap: 8px
      }

      .card-comparison-second .hero-actions a {
        height: 44px;
        padding: 0 12px;
        font-size: 12px
      }
    }

    /* Reserve equal space above and below cards for centered image previews. */
    .card-comparison-second {
      height: auto;
      min-height: calc(100svh - 82px);
      padding: 40px 0 24px
    }

    .card-comparison-second .hero-lead {
      margin-bottom: 0
    }

    .card-comparison-second .card-row {
      height: 360px;
      margin: 8px 0;
      align-items: stretch;
      flex-shrink: 0
    }

    .card-comparison-second .card-row .card-slot {
      height: 100%;
      min-height: 0
    }

    .card-comparison-second .card-row .popup-feature {
      position: absolute;
      top: 50%;
      translate: 0 -50%
    }

    .card-comparison-second .card-row .popup-feature[aria-expanded="true"] {
      top: 50%;
      translate: 0 -50%;
      transform: scale(1.025)
    }

    .card-comparison-second .card-row .card-slot:nth-child(3) .popup-feature[aria-expanded="true"] {
      translate: -50% -50%
    }

    .card-comparison-second .card-preview {
      max-height: 220px
    }

    .hero .dashboard-showcase {
      margin-top: 88px
    }

    @media(max-width:620px) {
      .card-comparison-second .card-row {
        height: auto;
        grid-auto-rows: 370px;
        row-gap: 16px;
        margin: 12px 0
      }

      .card-comparison-second .card-row .card-slot:nth-child(3) .popup-feature[aria-expanded="true"] {
        translate: 0 -50%
      }

      .card-comparison-second .card-row .card-slot:nth-child(5) .popup-feature[aria-expanded="true"] {
        translate: -50% -50%
      }

      .hero .dashboard-showcase {
        margin-top: 64px
      }
    }
  

.card-comparison-second .card-row .popup-feature[aria-controls="row-detail-3"][aria-expanded="true"]{width:min(720px,calc(80vw - 48px))}
.card-image-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:center}
.card-image-pair .card-preview{min-width:0;max-height:220px;object-fit:contain}
@media(max-width:620px){
.card-comparison-second .card-row .popup-feature[aria-controls="row-detail-3"][aria-expanded="true"]{width:calc(100vw - 48px)}
.card-image-pair{gap:8px}
}


.card-comparison-second .card-row .popup-feature[aria-controls="row-detail-1"][aria-expanded="true"]{width:min(640px,calc(80vw - 48px))}
.tracking-morph{position:relative;display:block;height:220px;overflow:hidden;border:1px solid #dce8f3;border-radius:10px;background:#f5f8fc}
.tracking-overview,.tracking-timeline{position:absolute;inset:0;display:block;overflow:hidden}
.tracking-overview img{display:block;width:100%;height:100%;object-fit:contain}
.tracking-timeline{opacity:1;container-type:inline-size}
.tracking-timeline img{display:block;width:1404px;max-width:none;height:220px;object-fit:contain}
.popup-feature[aria-expanded="true"] .tracking-timeline img{animation:tracking-pan 10s linear infinite}
@keyframes tracking-overview-morph{
0%,5%,100%{opacity:1;filter:blur(0);transform:scale(1)}
9%,90%{opacity:0;filter:blur(5px);transform:scale(1.045)}
}
@keyframes tracking-timeline-morph{
0%,5%,100%{opacity:0;filter:blur(5px);transform:scale(.975)}
9%,90%{opacity:1;filter:blur(0);transform:scale(1)}
}
@keyframes tracking-pan{
0%,10%{transform:translateX(0)}
60%,100%{transform:translateX(min(0px,calc(100cqw - 1404px)))}
}
@media(max-width:620px){
.card-comparison-second .card-row .popup-feature[aria-controls="row-detail-1"][aria-expanded="true"]{width:calc(100vw - 48px);left:50%;right:auto;translate:-50% -50%}
}
@media(prefers-reduced-motion:reduce){
.popup-feature[aria-expanded="true"] .tracking-overview,
.popup-feature[aria-expanded="true"] .tracking-timeline,
.popup-feature[aria-expanded="true"] .tracking-timeline img{animation:none}
.tracking-overview{display:none}
.tracking-timeline{opacity:1;overflow-x:auto}
}


.card-comparison-second .card-row{height:auto;grid-auto-rows:auto;margin:28px 0 18px;align-items:center}
.card-comparison-second .card-row .card-slot{height:auto;min-height:0;align-self:center}
.card-comparison-second .card-row .popup-feature,
.card-comparison-second .card-row .popup-feature[aria-expanded="true"]{position:relative;top:auto;bottom:auto;translate:none}
.card-comparison-second .card-row .card-slot:nth-child(3) .popup-feature[aria-expanded="true"]{left:50%;translate:-50% 0}
.card-comparison-second .card-row .card-slot:nth-child(n+4) .popup-feature[aria-expanded="true"]{left:100%;right:auto;translate:-100% 0}
@media(max-width:620px){
.card-comparison-second .card-row .card-slot:nth-child(2) .popup-feature[aria-expanded="true"],
.card-comparison-second .card-row .card-slot:nth-child(5) .popup-feature[aria-expanded="true"]{left:50%;translate:-50% 0}
.card-comparison-second .card-row .card-slot:nth-child(3) .popup-feature[aria-expanded="true"]{left:100%;translate:-100% 0}
.card-comparison-second .card-row .card-slot:nth-child(4) .popup-feature[aria-expanded="true"]{left:0;translate:none}
}


/* Equal tracks also match card heights across multiple mobile rows. */
.card-comparison-second .card-row{grid-auto-rows:1fr;align-items:stretch}
.card-comparison-second .card-row .card-slot{height:100%;align-self:stretch;display:flex;align-items:center}
.card-comparison-second .card-row .popup-feature[aria-expanded="false"]{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.card-comparison-second .card-row .popup-feature[aria-expanded="true"]{height:auto;flex-shrink:0}

body{min-height:100vh;display:flex;flex-direction:column}main{flex:1}
[data-include="navbar.html"]{min-height:82px}
.desktop-nav{gap:18px}.header-inner{gap:20px}
.desktop-nav a[aria-current="page"],.mobile-menu a[aria-current="page"],.footer-nav a[aria-current="page"]{color:var(--blue);text-decoration:underline;text-underline-offset:6px}
.include-fallback{padding:20px;display:flex;gap:20px;flex-wrap:wrap}
.contact-page-heading{width:min(1180px,calc(100% - 48px));margin:0 auto 32px;font-size:clamp(38px,5vw,64px);line-height:1.08;letter-spacing:-.04em;color:var(--ink)}
@media(max-width:1100px){.desktop-nav,.header-actions{display:none}.menu-toggle{display:block;margin-left:auto}.header-inner{width:calc(100% - 32px)}}
/* Fill the solution preview with each supplied module image. */
.solutions-section .module-art{display:block;padding:0;position:absolute;inset:0}
.solutions-section .module-art img{width:100%;height:100%;min-width:0;max-width:none;object-fit:cover;object-position:center;filter:none}
/* Separate the questions panel from the workflow card above it. */
.journey-section .questions{margin-top:48px;padding:40px 24px;border:1px solid #d5e3f0;border-radius:20px}
.journey-section .questions>.phase2-inner{width:100%;margin:0}
.journey-questions-heading #questions-title{color:#123b5d}
@media(max-width:620px){.journey-section .questions{margin-top:32px;padding:28px 18px;border-radius:16px}}