*,
    :after,
    :before {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-pan-x: ;
      --tw-pan-y: ;
      --tw-pinch-zoom: ;
      --tw-scroll-snap-strictness: proximity;
      --tw-gradient-from-position: ;
      --tw-gradient-via-position: ;
      --tw-gradient-to-position: ;
      --tw-ordinal: ;
      --tw-slashed-zero: ;
      --tw-numeric-figure: ;
      --tw-numeric-spacing: ;
      --tw-numeric-fraction: ;
      --tw-ring-inset: ;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: rgba(59, 130, 246, .5);
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      --tw-blur: ;
      --tw-brightness: ;
      --tw-contrast: ;
      --tw-grayscale: ;
      --tw-hue-rotate: ;
      --tw-invert: ;
      --tw-saturate: ;
      --tw-sepia: ;
      --tw-drop-shadow: ;
      --tw-backdrop-blur: ;
      --tw-backdrop-brightness: ;
      --tw-backdrop-contrast: ;
      --tw-backdrop-grayscale: ;
      --tw-backdrop-hue-rotate: ;
      --tw-backdrop-invert: ;
      --tw-backdrop-opacity: ;
      --tw-backdrop-saturate: ;
      --tw-backdrop-sepia: ;
      --tw-contain-size: ;
      --tw-contain-layout: ;
      --tw-contain-paint: ;
      --tw-contain-style:
    }

    ::backdrop {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-pan-x: ;
      --tw-pan-y: ;
      --tw-pinch-zoom: ;
      --tw-scroll-snap-strictness: proximity;
      --tw-gradient-from-position: ;
      --tw-gradient-via-position: ;
      --tw-gradient-to-position: ;
      --tw-ordinal: ;
      --tw-slashed-zero: ;
      --tw-numeric-figure: ;
      --tw-numeric-spacing: ;
      --tw-numeric-fraction: ;
      --tw-ring-inset: ;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: rgba(59, 130, 246, .5);
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      --tw-blur: ;
      --tw-brightness: ;
      --tw-contrast: ;
      --tw-grayscale: ;
      --tw-hue-rotate: ;
      --tw-invert: ;
      --tw-saturate: ;
      --tw-sepia: ;
      --tw-drop-shadow: ;
      --tw-backdrop-blur: ;
      --tw-backdrop-brightness: ;
      --tw-backdrop-contrast: ;
      --tw-backdrop-grayscale: ;
      --tw-backdrop-hue-rotate: ;
      --tw-backdrop-invert: ;
      --tw-backdrop-opacity: ;
      --tw-backdrop-saturate: ;
      --tw-backdrop-sepia: ;
      --tw-contain-size: ;
      --tw-contain-layout: ;
      --tw-contain-paint: ;
      --tw-contain-style:
    }

    /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
    *,
    :after,
    :before {
      box-sizing: border-box;
      border: 0 solid #e5e7eb
    }

    :after,
    :before {
      --tw-content: ""
    }

    :host,
    html {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      -moz-tab-size: 4;
      -o-tab-size: 4;
      tab-size: 4;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-feature-settings: normal;
      font-variation-settings: normal;
      -webkit-tap-highlight-color: transparent
    }

    body {
      margin: 0;
      line-height: inherit
    }

    hr {
      height: 0;
      color: inherit;
      border-top-width: 1px
    }

    abbr:where([title]) {
      -webkit-text-decoration: underline dotted;
      text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: inherit;
      font-weight: inherit
    }

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

    b,
    strong {
      font-weight: bolder
    }

    code,
    kbd,
    pre,
    samp {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
      font-feature-settings: normal;
      font-variation-settings: normal;
      font-size: 1em
    }

    small {
      font-size: 80%
    }

    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline
    }

    sub {
      bottom: -.25em
    }

    sup {
      top: -.5em
    }

    table {
      text-indent: 0;
      border-color: inherit;
      border-collapse: collapse
    }

    button,
    input,
    optgroup,
    select,
    textarea {
      font-family: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      font-size: 100%;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      color: inherit;
      margin: 0;
      padding: 0
    }

    button,
    select {
      text-transform: none
    }

    button,
    input:where([type=button]),
    input:where([type=reset]),
    input:where([type=submit]) {
      -webkit-appearance: button;
      appearance: button;
      background-color: transparent;
      background-image: none
    }

    :-moz-focusring {
      outline: auto
    }

    :-moz-ui-invalid {
      box-shadow: none
    }

    progress {
      vertical-align: baseline
    }

    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button {
      height: auto
    }

    [type=search] {
      -webkit-appearance: textfield;
      appearance: textfield;
      outline-offset: -2px
    }

    ::-webkit-search-decoration {
      -webkit-appearance: none
    }

    ::-webkit-file-upload-button {
      -webkit-appearance: button;
      font: inherit
    }

    summary {
      display: list-item
    }

    blockquote,
    dd,
    dl,
    figure,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    p,
    pre {
      margin: 0
    }

    fieldset {
      margin: 0
    }

    fieldset,
    legend {
      padding: 0
    }

    menu,
    ol,
    ul {
      list-style: none;
      margin: 0;
      padding: 0
    }

    dialog {
      padding: 0
    }

    textarea {
      resize: vertical
    }

    input::-moz-placeholder,
    textarea::-moz-placeholder {
      opacity: 1;
      color: #B8BFD0
    }

    input::placeholder,
    textarea::placeholder {
      opacity: 1;
      color: #B8BFD0
    }

    [role=button],
    button {
      cursor: pointer
    }

    :disabled {
      cursor: default
    }

    audio,
    canvas,
    embed,
    iframe,
    img,
    object,
    svg,
    video {
      display: block
    }

    img,
    video {
      max-width: 100%;
      height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
      display: none
    }

    /* Forms plugin base */
    input:where(:not([type])),
    input:where([type=date]),
    input:where([type=datetime-local]),
    input:where([type=email]),
    input:where([type=month]),
    input:where([type=number]),
    input:where([type=password]),
    input:where([type=search]),
    input:where([type=tel]),
    input:where([type=text]),
    input:where([type=time]),
    input:where([type=url]),
    input:where([type=week]),
    select,
    select:where([multiple]),
    textarea {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: #fff;
      border-color: #5C6680;
      border-width: 1px;
      border-radius: 0;
      padding: .5rem .75rem;
      font-size: 1rem;
      line-height: 1.5rem;
      --tw-shadow: 0 0 #0000
    }

    input:where(:not([type])):focus,
    input:where([type=date]):focus,
    input:where([type=datetime-local]):focus,
    input:where([type=email]):focus,
    input:where([type=month]):focus,
    input:where([type=number]):focus,
    input:where([type=password]):focus,
    input:where([type=search]):focus,
    input:where([type=tel]):focus,
    input:where([type=text]):focus,
    input:where([type=time]):focus,
    input:where([type=url]):focus,
    input:where([type=week]):focus,
    select:focus,
    select:where([multiple]):focus,
    textarea:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-inset: var(--tw-empty,
          /*!*/
          /*!*/
        );
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: #1E70C8;
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      border-color: #1E70C8
    }

    input::-moz-placeholder,
    textarea::-moz-placeholder {
      color: #5C6680;
      opacity: 1
    }

    input::placeholder,
    textarea::placeholder {
      color: #5C6680;
      opacity: 1
    }

    ::-webkit-datetime-edit-fields-wrapper {
      padding: 0
    }

    ::-webkit-date-and-time-value {
      min-height: 1.5em;
      text-align: inherit
    }

    ::-webkit-datetime-edit {
      display: inline-flex
    }

    ::-webkit-datetime-edit,
    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-meridiem-field,
    ::-webkit-datetime-edit-millisecond-field,
    ::-webkit-datetime-edit-minute-field,
    ::-webkit-datetime-edit-month-field,
    ::-webkit-datetime-edit-second-field,
    ::-webkit-datetime-edit-year-field {
      padding-top: 0;
      padding-bottom: 0
    }

    select {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
      background-position: right .5rem center;
      background-repeat: no-repeat;
      background-size: 1.5em 1.5em;
      padding-right: 2.5rem;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact
    }

    select:where([multiple]),
    select:where([size]:not([size="1"])) {
      background-image: none;
      background-position: 0 0;
      background-repeat: unset;
      background-size: initial;
      padding-right: .75rem;
      -webkit-print-color-adjust: unset;
      print-color-adjust: unset
    }

    input:where([type=checkbox]),
    input:where([type=radio]) {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding: 0;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      display: inline-block;
      vertical-align: middle;
      background-origin: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      flex-shrink: 0;
      height: 1rem;
      width: 1rem;
      color: #1E70C8;
      background-color: #fff;
      border-color: #5C6680;
      border-width: 1px;
      --tw-shadow: 0 0 #0000
    }

    input:where([type=checkbox]) {
      border-radius: 0
    }

    input:where([type=radio]) {
      border-radius: 100%
    }

    input:where([type=checkbox]):focus,
    input:where([type=radio]):focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-inset: var(--tw-empty,
          /*!*/
          /*!*/
        );
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: #1E70C8;
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    input:where([type=checkbox]):checked,
    input:where([type=radio]):checked {
      border-color: transparent;
      background-color: currentColor;
      background-size: 100% 100%;
      background-position: 50%;
      background-repeat: no-repeat
    }

    input:where([type=checkbox]):checked {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")
    }

    @media (forced-colors:active) {
      input:where([type=checkbox]):checked {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto
      }
    }

    input:where([type=radio]):checked {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
    }

    @media (forced-colors:active) {
      input:where([type=radio]):checked {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto
      }
    }

    input:where([type=checkbox]):checked:focus,
    input:where([type=checkbox]):checked:hover,
    input:where([type=radio]):checked:focus,
    input:where([type=radio]):checked:hover {
      border-color: transparent;
      background-color: currentColor
    }

    input:where([type=checkbox]):indeterminate {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
      border-color: transparent;
      background-color: currentColor;
      background-size: 100% 100%;
      background-position: 50%;
      background-repeat: no-repeat
    }

    @media (forced-colors:active) {
      input:where([type=checkbox]):indeterminate {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto
      }
    }

    input:where([type=checkbox]):indeterminate:focus,
    input:where([type=checkbox]):indeterminate:hover {
      border-color: transparent;
      background-color: currentColor
    }

    input:where([type=file]) {
      background: unset;
      border-color: inherit;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-size: unset;
      line-height: inherit
    }

    input:where([type=file]):focus {
      outline: 1px solid ButtonText;
      outline: 1px auto -webkit-focus-ring-color
    }

    /* Container */
    .container {
      width: 100%
    }

    @media (min-width:640px) {
      .container {
        max-width: 640px
      }
    }

    @media (min-width:768px) {
      .container {
        max-width: 768px
      }
    }

    @media (min-width:1024px) {
      .container {
        max-width: 1024px
      }
    }

    @media (min-width:1280px) {
      .container {
        max-width: 1280px
      }
    }

    @media (min-width:1536px) {
      .container {
        max-width: 1536px
      }
    }

    /* Utilities */
    .pointer-events-none {
      pointer-events: none
    }

    .visible {
      visibility: visible
    }

    .fixed {
      position: fixed
    }

    .absolute {
      position: absolute
    }

    .relative {
      position: relative
    }

    .inset-0 {
      inset: 0
    }

    .bottom-0 {
      bottom: 0
    }

    .bottom-6 {
      bottom: 1.5rem
    }

    .left-0 {
      left: 0
    }

    .left-1\/2 {
      left: 50%
    }

    .left-6 {
      left: 1.5rem
    }

    .left-\[calc\(50\%\+28px\)\] {
      left: calc(50% + 28px)
    }

    .right-0 {
      right: 0
    }

    .right-\[-50\%\] {
      right: -50%
    }

    .top-0 {
      top: 0
    }

    .top-1\/2 {
      top: 50%
    }

    .top-7 {
      top: 1.75rem
    }

    .z-0 {
      z-index: 0
    }

    .z-10 {
      z-index: 10
    }

    .z-20 {
      z-index: 20
    }

    .z-50 {
      z-index: 50
    }

    .mx-auto {
      margin-left: auto;
      margin-right: auto
    }

    .my-2 {
      margin-top: .5rem;
      margin-bottom: .5rem
    }

    .mb-10 {
      margin-bottom: 2.5rem
    }

    .mb-12 {
      margin-bottom: 3rem
    }

    .mb-16 {
      margin-bottom: 4rem
    }

    .mb-2 {
      margin-bottom: .5rem
    }

    .mb-20 {
      margin-bottom: 5rem
    }

    .mb-4 {
      margin-bottom: 1rem
    }

    .mb-6 {
      margin-bottom: 1.5rem
    }

    .mb-8 {
      margin-bottom: 2rem
    }

    .mt-1 {
      margin-top: .25rem
    }

    .mt-12 {
      margin-top: 3rem
    }

    .mt-2 {
      margin-top: .5rem
    }

    .mt-4 {
      margin-top: 1rem
    }

    .mt-8 {
      margin-top: 2rem
    }

    .block {
      display: block
    }

    .flex {
      display: flex
    }

    .inline-flex {
      display: inline-flex
    }

    .grid {
      display: grid
    }

    .hidden {
      display: none
    }

    .h-10 {
      height: 2.5rem
    }

    .h-12 {
      height: 3rem
    }

    .h-14 {
      height: 3.5rem
    }

    .h-16 {
      height: 4rem
    }

    .h-2 {
      height: .5rem
    }

    .h-4 {
      height: 1rem
    }

    .h-9 {
      height: 2.25rem
    }

    .h-\[200px\] {
      height: 200px
    }

    .h-\[300px\] {
      height: 300px
    }

    .h-\[400px\] {
      height: 400px
    }

    .h-\[500px\] {
      height: 500px
    }

    .h-\[600px\] {
      height: 600px
    }

    .h-full {
      height: 100%
    }

    .h-px {
      height: 1px
    }

    .min-h-\[819px\] {
      min-height: 819px
    }

    .min-h-screen {
      min-height: 100vh
    }

    .w-10 {
      width: 2.5rem
    }

    .w-12 {
      width: 3rem
    }

    .w-14 {
      width: 3.5rem
    }

    .w-2 {
      width: .5rem
    }

    .w-24 {
      width: 6rem
    }

    .w-4 {
      width: 1rem
    }

    .w-9 {
      width: 2.25rem
    }

    .w-\[1000px\] {
      width: 1000px
    }

    .w-\[400px\] {
      width: 400px
    }

    .w-\[500px\] {
      width: 500px
    }

    .w-\[600px\] {
      width: 600px
    }

    .w-\[800px\] {
      width: 800px
    }

    .w-\[900px\] {
      width: 900px
    }

    .w-fit {
      width: -moz-fit-content;
      width: fit-content
    }

    .w-full {
      width: 100%
    }

    .max-w-2xl {
      max-width: 42rem
    }

    .max-w-3xl {
      max-width: 48rem
    }

    .max-w-container-max {
      max-width: 1440px
    }

    .max-w-xs {
      max-width: 20rem
    }

    .flex-grow {
      flex-grow: 1
    }

    .-translate-x-1\/2 {
      --tw-translate-x: -50%
    }

    .-translate-x-1\/2,
    .-translate-y-1\/2 {
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .-translate-y-1\/2 {
      --tw-translate-y: -50%
    }

    .scale-75 {
      --tw-scale-x: .75;
      --tw-scale-y: .75
    }

    .scale-75,
    .transform {
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    @keyframes ping {

      75%,
      to {
        transform: scale(2);
        opacity: 0
      }
    }

    .animate-ping {
      animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite
    }

    .resize {
      resize: both
    }

    .grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .flex-col {
      flex-direction: column
    }

    .flex-wrap {
      flex-wrap: wrap
    }

    .items-center {
      align-items: center
    }

    .justify-center {
      justify-content: center
    }

    .justify-between {
      justify-content: space-between
    }

    .gap-12 {
      gap: 3rem
    }

    .gap-2 {
      gap: .5rem
    }

    .gap-3 {
      gap: .75rem
    }

    .gap-4 {
      gap: 1rem
    }

    .gap-5 {
      gap: 1.25rem
    }

    .gap-6 {
      gap: 1.5rem
    }

    .gap-8 {
      gap: 2rem
    }

    .gap-gutter {
      gap: 24px
    }

    .overflow-hidden {
      overflow: hidden
    }

    .overflow-x-hidden {
      overflow-x: hidden
    }

    .rounded {
      border-radius: .125rem
    }

    .rounded-2xl {
      border-radius: 1rem
    }

    .rounded-3xl {
      border-radius: 1.5rem
    }

    .rounded-full {
      border-radius: .75rem
    }

    .rounded-lg {
      border-radius: .25rem
    }

    .rounded-xl {
      border-radius: .5rem
    }

    .border {
      border-width: 1px
    }

    .border-primary\/20 {
      border-color: rgba(30, 112, 200, .2)
    }

    .border-primary\/25 {
      border-color: rgba(30, 112, 200, .25)
    }

    .border-tertiary\/20 {
      border-color: rgba(30, 112, 200, .2)
    }

    .border-tertiary\/25 {
      border-color: rgba(30, 112, 200, .25)
    }

    .bg-background {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
    }

    .bg-primary,
    .bg-primary-container {
      --tw-bg-opacity: 1;
      background-color: rgb(30 112 200/var(--tw-bg-opacity, 1))
    }

    .bg-primary\/10 {
      background-color: rgba(30, 112, 200, .1)
    }

    .bg-tertiary {
      --tw-bg-opacity: 1;
      background-color: rgb(30 112 200/var(--tw-bg-opacity, 1))
    }

    .bg-tertiary\/10 {
      background-color: rgba(30, 112, 200, .1)
    }

    .bg-gradient-to-r {
      background-image: linear-gradient(to right, var(--tw-gradient-stops))
    }

    .from-primary {
      --tw-gradient-from: #1E70C8 var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(30, 112, 200, 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
    }

    .from-primary\/40 {
      --tw-gradient-from: rgba(30, 112, 200, .4) var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(30, 112, 200, 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
    }

    .from-tertiary\/40 {
      --tw-gradient-from: rgba(30, 112, 200, .4) var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(30, 112, 200, 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
    }

    .to-primary\/10 {
      --tw-gradient-to: rgba(30, 112, 200, .1) var(--tw-gradient-to-position)
    }

    .to-tertiary {
      --tw-gradient-to: #1E70C8 var(--tw-gradient-to-position)
    }

    .to-tertiary\/10 {
      --tw-gradient-to: rgba(30, 112, 200, .1) var(--tw-gradient-to-position)
    }

    .bg-clip-text {
      -webkit-background-clip: text;
      background-clip: text
    }

    .p-12 {
      padding: 3rem
    }

    .p-2 {
      padding: .5rem
    }

    .p-4 {
      padding: 1rem
    }

    .p-5 {
      padding: 1.25rem
    }

    .p-8 {
      padding: 2rem
    }

    .px-10 {
      padding-left: 2.5rem;
      padding-right: 2.5rem
    }

    .px-3 {
      padding-left: .75rem;
      padding-right: .75rem
    }

    .px-4 {
      padding-left: 1rem;
      padding-right: 1rem
    }

    .px-8 {
      padding-left: 2rem;
      padding-right: 2rem
    }

    .px-margin-desktop {
      padding-left: 64px;
      padding-right: 64px
    }

    .px-margin-mobile {
      padding-left: 20px;
      padding-right: 20px
    }

    .py-1\.5 {
      padding-top: .375rem;
      padding-bottom: .375rem
    }

    .py-2 {
      padding-top: .5rem;
      padding-bottom: .5rem
    }

    .py-3 {
      padding-top: .75rem;
      padding-bottom: .75rem
    }

    .py-3\.5 {
      padding-top: .875rem;
      padding-bottom: .875rem
    }

    .py-32 {
      padding-top: 8rem;
      padding-bottom: 8rem
    }

    .py-4 {
      padding-top: 1rem;
      padding-bottom: 1rem
    }

    .py-6 {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem
    }

    .pb-16 {
      padding-bottom: 4rem
    }

    .pb-8 {
      padding-bottom: 2rem
    }

    .pr-0 {
      padding-right: 0
    }

    .pt-16 {
      padding-top: 4rem
    }

    .pt-24 {
      padding-top: 6rem
    }

    .pt-4 {
      padding-top: 1rem
    }

    .text-center {
      text-align: center
    }

    .font-body-lg,
    .font-body-md {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif
    }

    .font-headline-lg-mobile,
    .font-headline-md {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif
    }

    .font-label-mono {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif
    }

    .text-2xl {
      font-size: 1.5rem;
      line-height: 2rem
    }

    .text-\[16px\] {
      font-size: 16px
    }

    .text-\[18px\] {
      font-size: 18px
    }

    .text-\[22px\] {
      font-size: 22px
    }

    .text-\[24px\] {
      font-size: 24px
    }

    .text-\[28px\] {
      font-size: 28px
    }

    .text-base {
      font-size: 1rem;
      line-height: 1.5rem
    }

    .text-body-lg {
      font-size: 18px;
      letter-spacing: -.01em
    }

    .text-body-lg,
    .text-body-md {
      line-height: 1.6;
      font-weight: 400
    }

    .text-body-md {
      font-size: 16px;
      letter-spacing: 0
    }

    .text-headline-lg-mobile {
      font-size: 32px;
      line-height: 1.2;
      letter-spacing: -.02em;
      font-weight: 600
    }

    .text-headline-md {
      font-size: 24px;
      line-height: 1.4;
      letter-spacing: -.02em;
      font-weight: 600
    }

    .text-label-mono {
      font-size: 13px;
      line-height: 1.2;
      letter-spacing: .05em;
      font-weight: 500
    }

    .text-sm {
      font-size: .875rem;
      line-height: 1.25rem
    }

    .font-bold {
      font-weight: 700
    }

    .font-medium {
      font-weight: 500
    }

    .uppercase {
      text-transform: uppercase
    }

    .leading-none {
      line-height: 1
    }

    .leading-relaxed {
      line-height: 1.625
    }

    .tracking-tight {
      letter-spacing: -.025em
    }

    .tracking-wider {
      letter-spacing: .05em
    }

    .tracking-widest {
      letter-spacing: .1em
    }

    .text-on-primary-container {
      --tw-text-opacity: 1;
      color: rgb(255 255 255/var(--tw-text-opacity, 1))
    }

    .text-on-surface {
      --tw-text-opacity: 1;
      color: rgb(17 24 39/var(--tw-text-opacity, 1))
    }

    .text-on-surface-variant {
      --tw-text-opacity: 1;
      color: rgb(75 85 99/var(--tw-text-opacity, 1))
    }

    .text-primary {
      --tw-text-opacity: 1;
      color: rgb(30 112 200/var(--tw-text-opacity, 1))
    }

    .text-tertiary {
      --tw-text-opacity: 1;
      color: rgb(30 112 200/var(--tw-text-opacity, 1))
    }

    .text-transparent {
      color: transparent
    }

    .opacity-75 {
      opacity: .75
    }

    .outline {
      outline-style: solid
    }

    .blur {
      --tw-blur: blur(8px)
    }

    .blur,
    .blur-\[100px\] {
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .blur-\[100px\] {
      --tw-blur: blur(100px)
    }

    .blur-\[140px\] {
      --tw-blur: blur(140px)
    }

    .blur-\[140px\],
    .blur-\[160px\] {
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .blur-\[160px\] {
      --tw-blur: blur(160px)
    }

    .blur-\[80px\] {
      --tw-blur: blur(80px);
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .backdrop-blur-md {
      --tw-backdrop-blur: blur(12px)
    }

    .backdrop-blur-md,
    .backdrop-filter {
      backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
    }

    .transition {
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: .15s
    }

    .transition-all {
      transition-property: all;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: .15s
    }

    .transition-colors {
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: .15s
    }

    .transition-opacity {
      transition-property: opacity;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: .15s
    }

    .transition-transform {
      transition-property: transform;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: .15s
    }

    .delay-100 {
      transition-delay: .1s
    }

    .delay-200 {
      transition-delay: .2s
    }

    .delay-300 {
      transition-delay: .3s
    }

    .delay-500 {
      transition-delay: .5s
    }

    .duration-1000 {
      transition-duration: 1s
    }

    .duration-200 {
      transition-duration: .2s
    }

    .duration-300 {
      transition-duration: .3s
    }

    .ease-in-out {
      transition-timing-function: cubic-bezier(.4, 0, .2, 1)
    }

    .hover\:border-primary\/30:hover {
      border-color: rgba(30, 112, 200, .3)
    }

    .hover\:border-tertiary\/30:hover {
      border-color: rgba(30, 112, 200, .3)
    }

    .hover\:bg-inverse-primary:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(37 99 235/var(--tw-bg-opacity, 1))
    }

    .hover\:bg-white\/5:hover {
      background-color: hsla(0, 0%, 100%, .05)
    }

    .hover\:text-on-surface:hover {
      --tw-text-opacity: 1;
      color: rgb(17 24 39/var(--tw-text-opacity, 1))
    }

    .hover\:opacity-80:hover {
      opacity: .8
    }

    .group:hover .group-hover\:scale-100 {
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    @media (min-width:640px) {
      .sm\:w-auto {
        width: auto
      }

      .sm\:flex-row {
        flex-direction: row
      }
    }

    @media (min-width:768px) {
      .md\:col-span-2 {
        grid-column: span 2/span 2
      }

      .md\:col-span-4 {
        grid-column: span 4/span 4
      }

      .md\:col-span-5 {
        grid-column: span 5/span 5
      }

      .md\:col-span-7 {
        grid-column: span 7/span 7
      }

      .md\:mt-0 {
        margin-top: 0
      }

      .md\:block {
        display: block
      }

      .md\:flex {
        display: flex
      }

      .md\:hidden {
        display: none
      }

      .md\:h-\[600px\] {
        height: 600px
      }

      .md\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
      }

      .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .md\:flex-row {
        flex-direction: row
      }

      .md\:p-20 {
        padding: 5rem
      }

      .md\:px-margin-desktop {
        padding-left: 64px;
        padding-right: 64px
      }

      .md\:pl-12 {
        padding-left: 3rem
      }

      .md\:pr-12 {
        padding-right: 3rem
      }

      .md\:font-headline-display,
      .md\:font-headline-lg {
        font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif
      }

      .md\:text-\[38px\] {
        font-size: 38px
      }

      .md\:text-headline-display {
        font-size: 64px;
        line-height: 1.1;
        letter-spacing: -.04em;
        font-weight: 700
      }

      .md\:text-headline-lg {
        font-size: 40px;
        line-height: 1.2;
        letter-spacing: -.03em;
        font-weight: 600
      }
    }

    @media (min-width:1024px) {
      .lg\:col-span-2 {
        grid-column: span 2/span 2
      }

      .lg\:block {
        display: block
      }

      .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
      }

      .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
      }

      .lg\:gap-4 {
        gap: 1rem
      }
    }

    /* ==================== BUSINESSES HELPED SECTION (v3) ==================== */
    .bb-section {
      max-width: 1400px;
      margin: 0 auto;
      padding: 80px 52px 40px 52px;
    }

    .bb-inner {
      max-width: 1120px;
      margin: 0 auto;
    }

    /* ── 1. Header (static) + industry roll ────────────────────────────── */
    .bb-head {
      max-width: 680px;
      margin: 0 auto;
      text-align: center;
    }

    .pitem {
      position: absolute;
      left: 0;
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(10, 17, 30, 0.7);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border: 1px solid rgba(40, 60, 90, 0.5);
      border-radius: 8px;
      padding: 0 14px;
      font-size: 11.5px;
      font-weight: 500;
      color: #E2E8F0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
      transform: translateY(-50%);
    }

    .bb-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--b400);
      margin-bottom: 20px;
    }

    .bb-eyebrow-line {
      width: 22px;
      height: 1.5px;
      background: var(--b400);
      border-radius: 1px;
      flex-shrink: 0
    }

    .bb-h {
      font-size: clamp(32px, 3.2vw, 48px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.03em;
      color: var(--g700);
    }

    .bb-h em {
      font-style: normal;
      color: var(--b400)
    }

    .bb-industry {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
      margin-top: 16px;
      font-size: 19px;
      font-weight: 600;
    }

    .bb-industry .lead {
      color: var(--g400);
    }

    .bb-roll {
      height: 28px;
      overflow: hidden;
      display: inline-block;
    }

    .bb-roll-inner {
      display: flex;
      flex-direction: column;
      animation: bbRoll 14s cubic-bezier(.76, 0, .24, 1) infinite;
    }

    .bb-roll-inner span {
      height: 28px;
      line-height: 28px;
      color: var(--b400);
      white-space: nowrap;
    }

    @keyframes bbRoll {

      0%,
      21% {
        transform: translateY(0)
      }

      25%,
      46% {
        transform: translateY(-28px)
      }

      50%,
      71% {
        transform: translateY(-56px)
      }

      75%,
      96% {
        transform: translateY(-84px)
      }

      100% {
        transform: translateY(-112px)
      }
    }

    .bb-rule {
      width: 32px;
      height: 1px;
      background: var(--g200);
      margin: 30px auto 0;
    }

    /* ── group labels ──────────────────────────────────────────────────── */
    .bb-group {
      margin-top: 52px;
    }

    .bb-cap {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--g300);
    }

    .bb-subtitle {
      font-size: 15.5px;
      font-weight: 500;
      color: var(--g600);
      line-height: 1.55;
      margin-top: 6px;
      max-width: 560px;
    }

    .bb-group-head {
      margin-bottom: 18px;
    }

    .bb-group-head.row {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
    }

    .bb-group-note {
      font-size: 13px;
      color: var(--g400);
      font-weight: 500;
    }

    .bb-grid {
      display: grid;
      gap: 14px;
    }

    .cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }

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

    /* ── base card recipe ──────────────────────────────────────────────── */
    .bb-card {
      background: var(--white);
      border: 1px solid rgba(30, 112, 200, .12);
      border-radius: 12px;
      box-shadow: 0 4px 18px rgba(30, 112, 200, .06);
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
      display: flex;
      flex-direction: column;
    }

    .bb-card:hover {
      border-color: rgba(30, 112, 200, .30);
      box-shadow: 0 8px 26px rgba(30, 112, 200, .10);
      transform: translateY(-2px);
    }

    .bb-mono {
      width: 42px;
      height: 42px;
      border-radius: 9px;
      flex-shrink: 0;
      background: var(--b50);
      border: 1px solid var(--b100);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: var(--b600);
      letter-spacing: .02em;
    }

    .bb-sector {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--b400);
    }

    /* status pills */
    .bb-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: flex-start;
      padding: 4px 10px;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: .02em;
    }

    .bb-status .s-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .bb-status.live {
      background: var(--b50);
      border: 1px solid var(--b100);
      color: var(--b600);
    }

    .bb-status.live .s-dot {
      background: var(--b400);
      animation: bbpulse 2.4s ease-in-out infinite;
    }

    .bb-status.build {
      background: var(--g100);
      border: 1px solid var(--g200);
      color: var(--g500);
    }

    .bb-status.build .s-dot {
      background: var(--g300);
    }

    @keyframes bbpulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .35;
        transform: scale(.7)
      }
    }

    /* ── workflow flow component (live + product) ──────────────────────── */
    .bb-flow {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 0;
    }

    .bb-flow-step {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border: 1px solid var(--g200);
      background: var(--white);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      color: var(--g500);
      white-space: nowrap;
      transition: border-color .4s ease, background .4s ease, color .4s ease;
    }

    .bb-flow-step .n-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--g300);
      flex-shrink: 0;
      transition: background .4s ease;
    }

    .bb-flow-step.active {
      border-color: var(--b400);
      background: var(--b50);
      color: var(--b600);
    }

    .bb-flow-step.active .n-dot {
      background: var(--b400);
    }

    .bb-flow-line {
      display: inline-flex;
      align-items: center;
      color: var(--g300);
      padding: 0 5px;
      flex-shrink: 0;
      transition: color .4s ease;
    }

    .bb-flow-line.lit {
      color: var(--b400);
    }

    .bb-flow-line svg {
      width: 15px;
      height: 15px;
      display: block;
    }

    .flow.sm .bb-flow-step {
      padding: 6px 9px;
      font-size: 11px;
    }

    .flow.sm .bb-flow-line {
      padding: 0 3px;
    }

    .flow.sm .bb-flow-line svg {
      width: 13px;
      height: 13px;
    }

    /* ── 2. LIVE SYSTEMS — hero cards (largest) ────────────────────────── */
    .bb-live-card {
      position: relative;
      flex-direction: row;
      align-items: center;
      gap: 28px;
      padding: 26px 26px 26px 28px;
      border-color: rgba(30, 112, 200, .20);
      box-shadow: 0 6px 24px rgba(30, 112, 200, .08);
    }

    .bb-live-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--b400);
      border-radius: 12px 12px 0 0;
    }

    .bb-live-id {
      flex: 0 0 34%;
      min-width: 210px;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .bb-live-idtop {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .bb-live-name {
      font-size: 17px;
      font-weight: 700;
      color: var(--g700);
      line-height: 1.15;
      letter-spacing: -.01em;
    }

    .bb-live-desc {
      font-size: 13px;
      color: var(--g500);
      line-height: 1.6;
    }

    .bb-live-flow {
      flex: 1;
      min-width: 0;
    }

    /* ── 3. CLIENT PORTFOLIO — lighter supporting cards ────────────────── */
    .bb-cl {
      padding: 16px 17px;
      gap: 8px;
    }

    .bb-cl-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--g700);
      line-height: 1.2;
    }

    .bb-cl-built {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--g600);
      line-height: 1.5;
    }

    .bb-cl-outcome {
      font-size: 12.5px;
      color: var(--g500);
      line-height: 1.55;
    }

    .bb-cl-divider {
      height: 1px;
      background: var(--g100);
      margin: 2px 0;
    }

    /* ── 4. TECHNOLOGY PARTNERS ────────────────────────────────────────── */
    .bb-intro {
      font-size: 14px;
      color: var(--g600);
      line-height: 1.7;
      max-width: 600px;
      margin-top: 8px;
    }

    .bb-partner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      background: var(--b50);
      border: 1px solid var(--b100);
      padding: 22px 24px;
    }

    .bb-partner-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .bb-partner-name {
      font-size: 17px;
      font-weight: 700;
      color: var(--g700);
      letter-spacing: -.01em;
    }

    .bb-partner-role {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--b400);
      margin-top: 4px;
    }

    .bb-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .bb-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border-radius: 5px;
      border: 1px solid var(--b100);
      background: var(--white);
      font-size: 12px;
      font-weight: 600;
      color: var(--b600);
      line-height: 1;
      letter-spacing: .01em;
    }

    .bb-pill .p-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--b400);
      flex-shrink: 0;
    }

    /* ── 5. PRODUCTS WE'RE BUILDING ────────────────────────────────────── */
    .bb-prod {
      padding: 18px 18px 16px;
      gap: 13px;
    }

    .bb-prod-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .bb-prod-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--g700);
      line-height: 1.2;
    }

    .bb-prod-desc {
      font-size: 12.5px;
      color: var(--g500);
      line-height: 1.55;
    }

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

    .bb-reveal.visible {
      opacity: 1;
      transform: none;
    }

    /* ── responsive (ERP pattern) ──────────────────────────────────────── */
    @media(max-width:860px) {
      .bb-section {
        padding: 56px 24px 28px 24px;
      }

      .cols-3 {
        grid-template-columns: repeat(2, 1fr);
      }

      .bb-live-card {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
      }

      .bb-live-id {
        flex-basis: auto;
      }

      .bb-partner {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media(max-width:560px) {

      .cols-3,
      .cols-2 {
        grid-template-columns: 1fr;
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .bb-roll-inner {
        animation: none !important;
      }

      .bb-reveal {
        transition: none !important;
      }

      .bb-status.live .s-dot {
        animation: none;
      }
    }

    /* ====================  VHANDL WAY SECTION  ==================== */

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    /* vHandl Way: body rule scoped away — handled by wrapper */
    .vhandl-way-section .section {
      width: 100%;
      max-width: 1360px;
      margin: 0 auto;
      padding: 48px 56px 48px 56px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
    }

    .vhandl-way-head {
      width: 100%;
      max-width: 1360px;
      margin: 0 auto;
      text-align: center;
      padding: 40px 56px 0 56px;
    }

    .vhandl-way-section .left {
      display: flex;
      flex-direction: column
    }

    .label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #1E70C8;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .vhandl-way-eyebrow-line {
      width: 22px;
      height: 1.5px;
      background: #1E70C8;
      border-radius: 1px;
      flex-shrink: 0;
    }

    .headline {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: clamp(32px, 3.2vw, 48px);
      font-weight: 700;
      line-height: 1.08;
      color: #111827;
      margin-bottom: 24px;
      letter-spacing: -0.03em;
      text-align: center;
    }

    .headline em {
      font-style: normal;
      color: #1E70C8
    }

    .opening {
      font-size: 16px;
      color: #111827;
      line-height: 1.75;
      margin-bottom: 40px;
    }

    .opening .question {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: #111827;
      border-left: 3px solid #1E70C8;
      padding-left: 16px;
      margin: 16px 0;
      font-style: italic;
    }

    .principles {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 40px
    }

    .principle {
      padding: 16px 18px 16px 22px;
      border-radius: 12px;
      cursor: pointer;
      position: relative;
      border: 1px solid transparent;
      transition: background 0.25s, border-color 0.25s;
    }

    .principle::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 0;
      background: #1E70C8;
      border-radius: 0 3px 3px 0;
      transition: height 0.35s ease;
    }

    .principle.active {
      background: #EEF5FF;
      border-color: rgba(30, 112, 200, 0.18);
    }

    .principle.active::before {
      height: 60%
    }

    .principle:hover:not(.active) {
      background: #F8FAFC
    }

    .principle-header {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .principle-num {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: #1E70C8;
      opacity: 0.5;
      min-width: 22px;
      text-transform: uppercase;
    }

    .principle-title {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #111827;
      text-transform: uppercase;
    }

    .principle-body {
      font-size: 13.5px;
      color: #111827;
      line-height: 1.7;
      overflow: hidden;
      opacity: 0;
      height: 0;
      transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease 0.08s,
        margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        overflow 0s linear 0.4s;
      margin-top: 0;
      padding-left: 36px;
    }

    .principle.active .principle-body {
      height: var(--principle-body-h, auto);
      opacity: 1;
      margin-top: 10px;
      /* overflow only switches to visible once the 0.4s height
         transition has finished (see the delayed "overflow" entry
         above), so text can never spill into a neighboring box
         mid-animation even if a measurement is briefly stale. */
      overflow: visible;
    }

    /* Reserve the tallest body's height on the whole list at all times
           so the track's total height never changes as boxes open and
           close — this is what stops footer-statement from shifting.
           The exact px value is set inline by measurePrincipleBodyHeight()
           in JS; this calc is just a safe fallback before that JS runs. */
    .principles {
      min-height: calc(4 * 56px + 3 * 6px + var(--principle-body-h, 120px) + 14px);
    }

    .footer-statement {
      border-top: 1px solid #E5E7EB;
      padding-top: 26px;
    }

    .footer-words {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: #1E70C8;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .footer-lines {
      font-size: 14.5px;
      color: #111827;
      line-height: 1.75;
      margin-bottom: 10px;
    }

    .footer-tagline {
      font-size: 15px;
      font-weight: 700;
      color: #111827
    }

    .vhandl-way-section .right {
      position: sticky;
      top: 48px;
      border-radius: 20px;
      overflow: hidden;
      background: #F4F7FB;
      border: 1px solid rgba(0, 0, 0, 0.08);
      aspect-ratio: 1/1.1;
      max-height: 680px;
      box-shadow: 0 4px 32px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
    }

    #animCanvas {
      width: 100%;
      height: 100%;
      display: block
    }

    @media(max-width:960px) {
      .vhandl-way-section .section {
        grid-template-columns: 1fr;
        padding: 32px 28px 32px 28px;
        gap: 48px
      }

      .vhandl-way-head {
        padding: 28px 28px 0 28px;
      }

      .headline {
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -0.03em;
        font-weight: 700
      }

      .vhandl-way-section .right {
        max-height: 480px;
        position: static
      }
    }
  

    .icon {
      display: inline-block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      vertical-align: middle;
    }

    /* Ambient Background Pattern — light, very subtle */
    .bg-grid-pattern {
      background-size: 40px 40px;
      background-image: linear-gradient(to right, rgba(30, 112, 200, 0.022) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(30, 112, 200, 0.022) 1px, transparent 1px);
    }

    /* Glassmorphism utility — light mode */
    .glass-panel {
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(221, 225, 235, 0.9);
      border-top-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    /* Button Glows — soft light-mode elevation */
    .primary-glow {
      box-shadow: 0 4px 14px rgba(30, 112, 200, 0.25), 0 1px 3px rgba(0, 0, 0, 0.08);
      border-top: 1px solid rgba(255, 255, 255, 0.35);
    }

    /* Scroll Reveal Animations */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal-left.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .reveal-right {
      opacity: 0;
      transform: translateX(40px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal-right.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .reveal-scale {
      opacity: 0;
      transform: scale(0.92);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal-scale.visible {
      opacity: 1;
      transform: scale(1);
    }

    /* Delay utilities (custom — supplement Tailwind's) */
    .delay-400 {
      transition-delay: 0.4s;
    }

    .delay-600 {
      transition-delay: 0.6s;
    }

    /* Glass Card Hover — light mode */
    .glass-card {
      background: #ffffff;
      border: 1px solid #DDE1EB;
      border-top-color: #F0F2F6;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
      transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }

    .glass-card:hover {
      background: #F8FAFF;
      border-color: rgba(30, 112, 200, 0.18);
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(30, 112, 200, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    /* Service Card Hover — light mode */
    .service-card {
      background: #ffffff;
      border: 1px solid #DDE1EB;
      border-top-color: #F0F2F6;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
      transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
    }

    .service-card:hover {
      background: #F0F7FF;
      border-color: rgba(30, 112, 200, 0.22);
      transform: translateY(-6px);
      box-shadow: 0 20px 48px rgba(30, 112, 200, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .service-card:hover .service-icon {
      color: #1E70C8;
      transform: scale(1.15);
    }

    .service-icon {
      transition: color 0.3s ease, transform 0.3s ease;
    }

    /* Section Divider — light */
    .section-divider {
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08), transparent);
    }


    /* Stat Counter — solid Intel Blue, matching ERP emphasis color */
    .stat-number {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 52px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      color: #1E70C8;
    }

    @media (max-width: 768px) {
      .stat-number {
        font-size: 38px;
      }
    }

    /* Emphasis text — solid Intel Blue, matching ERP's <em> pattern */
    .gradient-text {
      color: #1E70C8;
    }

    /* CTA Section glow — soft blue elevation on white */
    .cta-glow {
      box-shadow: 0 0 80px rgba(30, 112, 200, 0.10), 0 8px 32px rgba(0, 0, 0, 0.06);
    }

    /* Tag pill — light */
    .tag-pill {
      background: rgba(30, 112, 200, 0.05);
      border: 1px solid rgba(30, 112, 200, 0.12);
      transition: background 0.2s, border-color 0.2s;
    }

    .tag-pill:hover {
      background: rgba(30, 112, 200, 0.10);
      border-color: rgba(30, 112, 200, 0.25);
    }

    /* Footer link hover — light */
    .footer-link {
      color: #5C6680;
      transition: color 0.2s ease;
    }

    .footer-link:hover {
      color: #1E70C8;
    }

    /* Why card icon container — light */
    .why-icon-wrap {
      background: linear-gradient(135deg, rgba(30, 112, 200, 0.08), rgba(30, 112, 200, 0.04));
      border: 1px solid rgba(30, 112, 200, 0.14);
      transition: background 0.3s, border-color 0.3s, transform 0.3s;
    }

    .glass-card:hover .why-icon-wrap {
      background: linear-gradient(135deg, rgba(30, 112, 200, 0.14), rgba(30, 112, 200, 0.07));
      border-color: rgba(30, 112, 200, 0.25);
      transform: scale(1.1);
    }

    /* Section label — light */
    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(30, 112, 200, 0.05);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(30, 112, 200, 0.12);
      border-top-color: rgba(255, 255, 255, 0.8);
      padding: 6px 14px;
      border-radius: 999px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .section-label-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #1E70C8;
    }

    /* Services section heading — kicker + headline */
    .services-kicker {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #1E70C8;
      margin-bottom: 10px;
    }

    .services-headline {
      font-size: clamp(32px, 3.2vw, 48px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.03em;
      color: #0B1220;
      margin: 0;
    }

    @media (max-width: 640px) {
      .services-headline {
        font-size: 28px;
      }
    }

    /* Parallax subtle */
    .parallax-section {
      position: relative;
      overflow: hidden;
    }

    /* ===================== ABOUT SECTION (ERP-aligned) ===================== */
    .about-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #1E70C8;
      margin-bottom: 22px;
    }

    .about-eyebrow-line {
      width: 22px;
      height: 1.5px;
      background: #1E70C8;
      border-radius: 1px;
      flex-shrink: 0;
    }

    .about-heading {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: clamp(32px, 3.2vw, 48px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.03em;
      color: #1E2433;
      max-width: 720px;
      margin: 0 auto 18px;
    }

    .about-heading em {
      font-style: normal;
      color: #1E70C8;
    }

    .about-tagline {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 17px;
      font-weight: 500;
      color: #3D4660;
      line-height: 1.6;
      max-width: 560px;
      margin: 0 auto 32px;
    }

    .about-philosophy {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 19px;
      font-weight: 600;
      color: #1E2433;
      line-height: 1.5;
      max-width: none;
      white-space: nowrap;
      margin: 0 auto 40px;
    }

    .about-philosophy em {
      font-style: normal;
      color: #1E70C8;
    }

    .about-logos-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #B8BFD0;
      margin-bottom: 16px;
    }

    .about-logos {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 30px;
    }

    .about-logo-chip {
      display: inline-flex;
      align-items: center;
      background-color: #EEF5FD;
      border: 1px solid #CCDFF7;
      color: #1E70C8;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      padding: 6px 14px;
      border-radius: 5px;
      white-space: nowrap;
    }

    .about-rule {
      width: 32px;
      height: 1px;
      background: #DDE1EB;
      margin: 0 auto 35px;
    }

    .about-story-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #B8BFD0;
      margin-bottom: 28px;
    }

    .about-story {
      max-width: 620px;
      margin: 0 auto 48px;
      text-align: left;
    }

    .about-story-p {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.8;
      color: #3D4660;
      margin-bottom: 22px;
    }

    .about-story-p:last-child {
      margin-bottom: 0;
    }

    .about-story-p strong {
      font-weight: 600;
      color: #1E2433;
    }

    .about-quote-block {
      max-width: 580px;
      margin: 28px auto;
      padding: 24px 32px;
      background: #EEF5FD;
      border-left: 3px solid #1E70C8;
      border-radius: 0 10px 10px 0;
      text-align: left;
    }

    .about-quote-block p {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 16px;
      font-weight: 500;
      font-style: italic;
      line-height: 1.7;
      color: #1E2433;
    }

    .about-final-quote {
      max-width: 580px;
      margin: 0 auto;
      padding: 28px 32px;
      background: #EEF5FD;
      border-left: 3px solid #1E70C8;
      border-radius: 0 12px 12px 0;
      text-align: left;
    }

    .about-final-quote p {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: clamp(17px, 1.8vw, 21px);
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: -0.01em;
      color: #1E2433;
    }

    .about-final-quote em {
      font-style: normal;
      color: #1E70C8;
    }

    .about-final-quote-attr {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: #B8BFD0;
      margin-top: 14px;
    }


    /* ===================== STORYTELLING SERVICES ===================== */
    .story-services {
      overflow: hidden;
    }

    .story-service {
      display: grid;
      grid-template-columns: 42% 58%;
      gap: 0;
      min-height: 500px;
      max-width: 1152px;
      margin: 0 auto;
      padding: 48px 50px;
      align-items: center;
    }

    .story-left {
      padding-right: 40px;
    }

    .story-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.15em;
      color: #1E70C8;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .story-eyebrow::before {
      content: '';
      width: 22px;
      height: 1.5px;
      background: #1E70C8;
      border-radius: 1px;
    }

    .story-heading {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: clamp(32px, 3.2vw, 48px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.03em;
      color: #1E2433;
      margin-bottom: 6px;
    }

    .story-heading em {
      font-style: normal;
      color: #1E70C8;
      background: none;
      -webkit-text-fill-color: initial;
      background-clip: initial;
    }

    .story-sub {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 15.5px;
      font-weight: 500;
      color: #3D4660;
      line-height: 1.55;
      margin-bottom: 18px;
      max-width: 380px;
    }

    .story-desc {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #8892A8;
      line-height: 1.78;
      margin-bottom: 32px;
      max-width: 380px;
    }

    .story-caps-label {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #B8BFD0;
      margin-bottom: 12px;
      position: relative;
      padding-top: 25px;
    }

    .story-caps-label::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 32px;
      height: 1px;
      background-color: #DDE1EB;
      border-radius: 1px;
    }

    .story-caps-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .story-cap {
      display: inline-flex;
      align-items: center;
      background-color: #EEF5FD;
      border: 1px solid #CCDFF7;
      color: #1E70C8;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1;
      padding: 5px 12px;
      border-radius: 5px;
      box-sizing: border-box;
      white-space: nowrap;
    }

    .story-cap-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #1E70C8;
      margin-right: 5px;
      flex-shrink: 0;
      display: inline-block;
    }

    .story-anim-frame {
      background: linear-gradient(145deg, #F4F8FD, #EEF4FB);
      border: 1px solid #CCDFF7;
      border-radius: 14px;
      position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 3;
    }

    .story-anim-frame canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 14px;
    }

    .story-stage-badge {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: #B8BFD0;
      text-transform: uppercase;
      white-space: nowrap;
      z-index: 10;
      background: #FFFFFF;
      padding: 4px 12px;
      border-radius: 20px;
      border: 1px solid rgba(30, 112, 200, 0.12);
    }

    .story-connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      position: relative;
      max-width: 1440px;
      margin: 0 auto;
    }

    .story-connector-line {
      width: 1px;
      height: 80px;
      background: linear-gradient(to bottom, rgba(30, 112, 200, 0.06), rgba(30, 112, 200, 0.2), rgba(30, 112, 200, 0.06));
      position: relative;
    }

    .story-connector-line::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #1E70C8;
      animation: storyConnPulse 2.5s ease-in-out infinite;
    }

    @keyframes storyConnPulse {

      0%,
      100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
      }

      50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.4);
      }
    }

    /* ---- Workflow Automation Scoped Styles (svc2-) ---- */
    .svc2-right {
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      padding: 0;
      aspect-ratio: auto;
    }

    .svc2-anim-container {
      width: 100%;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, #F4F8FD, #EEF4FB);
      border: 1px solid #CCDFF7;
      border-radius: 14px;
      position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 3;
    }

    .svc2-stage {
      display: none;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 32px 40px;
      box-sizing: border-box;
    }

    .svc2-stage.svc2-active {
      display: flex;
      animation: svc2StageFade 0.5s ease;
    }

    @keyframes svc2StageFade {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .svc2-stage-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #5C6680;
      margin-bottom: 14px;
      align-self: flex-start;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    .svc2-task-card {
      background: #FFFFFF;
      border: 1px solid rgba(30, 112, 200, 0.15);
      border-radius: 10px;
      padding: 11px 16px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 500;
      color: #1E2433;
      margin-bottom: 6px;
      transition: all 0.3s ease;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    .svc2-task-card.svc2-warning {
      border-color: #F59E0B;
      background: #FEF3C7;
    }

    .svc2-task-badge {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 20px;
      font-weight: 500;
      background: rgba(30, 112, 200, 0.08);
      color: #1E70C8;
    }

    .svc2-task-badge.svc2-warn-badge {
      background: #FDE68A;
      color: #92400E;
    }

    .svc2-warn-icon {
      font-size: 12px;
      color: #F59E0B;
      margin-right: 4px;
    }

    .svc2-pending-counter {
      text-align: center;
      margin-top: 18px;
    }

    .svc2-counter-num {
      font-size: 52px;
      font-weight: 800;
      color: #1E2433;
      line-height: 1;
      letter-spacing: -0.04em;
      transition: all 0.3s ease;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    .svc2-counter-num.svc2-animating {
      color: #1E70C8;
      transform: scale(1.08);
    }

    .svc2-counter-num.svc2-zero {
      color: #059669;
    }

    .svc2-counter-label {
      font-size: 12px;
      color: #5C6680;
      margin-top: 4px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    .svc2-engine-block {
      background: #FFFFFF;
      border: 1.5px solid #1E70C8;
      border-radius: 14px;
      padding: 20px 28px;
      text-align: center;
      width: 100%;
      position: relative;
      overflow: hidden;
    }

    .svc2-engine-block::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(30, 112, 200, 0.04), rgba(30, 112, 200, 0.0));
      pointer-events: none;
    }

    .svc2-engine-eyebrow {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: #1E70C8;
      text-transform: uppercase;
      margin-bottom: 4px;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    .svc2-engine-name {
      font-size: 18px;
      font-weight: 700;
      color: #1E2433;
      letter-spacing: -0.02em;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    .svc2-engine-sub {
      font-size: 12px;
      color: #5C6680;
      margin-top: 3px;
    }

    .svc2-engine-pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #1E70C8;
      margin: 10px auto 0;
      animation: svc2Pulse 1.4s ease-in-out infinite;
    }

    @keyframes svc2Pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.4;
        transform: scale(0.7);
      }
    }

    .svc2-flow-row {
      display: flex;
      gap: 8px;
      width: 100%;
    }

    .svc2-flow-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    .svc2-flow-task-mini {
      background: #FFFFFF;
      border: 1px solid rgba(30, 112, 200, 0.15);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 500;
      color: #1E2433;
      width: 100%;
      text-align: center;
    }

    .svc2-flow-arrow {
      font-size: 14px;
      color: #1E70C8;
      line-height: 1;
    }

    .svc2-flow-engine-mini {
      background: rgba(30, 112, 200, 0.08);
      border: 1px solid #1E70C8;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 600;
      color: #1E70C8;
      width: 100%;
      text-align: center;
    }

    .svc2-flow-done {
      background: #D1FAE5;
      border: 1px solid rgba(5, 150, 105, 0.3);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #059669;
      width: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .svc2-particle-line {
      position: relative;
      height: 24px;
      width: 100%;
      overflow: hidden;
    }

    .svc2-particle {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #1E70C8;
      top: 50%;
      transform: translateY(-50%);
      animation: svc2MoveP 0.8s linear infinite;
      opacity: 0;
    }

    .svc2-particle:nth-child(1) {
      animation-delay: 0s;
    }

    .svc2-particle:nth-child(2) {
      animation-delay: 0.27s;
    }

    .svc2-particle:nth-child(3) {
      animation-delay: 0.54s;
    }

    @keyframes svc2MoveP {
      0% {
        left: 0;
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        left: calc(100% - 4px);
        opacity: 0;
      }
    }

    .svc2-hero-zero {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      animation: svc2HeroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes svc2HeroReveal {
      from {
        opacity: 0;
        transform: scale(0.85);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .svc2-hero-num {
      font-size: 88px;
      font-weight: 900;
      color: #059669;
      line-height: 1;
      letter-spacing: -0.06em;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    .svc2-hero-label {
      font-size: 13px;
      font-weight: 600;
      color: #5C6680;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    .svc2-hero-brand {
      margin-top: 20px;
      font-size: 18px;
      font-weight: 700;
      color: #1E70C8;
      letter-spacing: -0.01em;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      animation: svc2HeroReveal 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .svc2-outcome-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 24px;
      justify-content: center;
      animation: svc2HeroReveal 0.8s 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .svc2-outcome-pill {
      background: #D1FAE5;
      color: #065F46;
      border: 1px solid rgba(5, 150, 105, 0.25);
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    .svc2-replay-btn {
      margin-top: 20px;
      padding: 9px 20px;
      border: 1px solid #1E70C8;
      border-radius: 8px;
      background: transparent;
      color: #1E70C8;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      letter-spacing: 0.02em;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      animation: svc2HeroReveal 0.8s 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .svc2-replay-btn:hover {
      background: rgba(30, 112, 200, 0.06);
    }

    .svc2-stage-indicator {
      display: flex;
      gap: 5px;
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
    }

    .svc2-stage-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(30, 112, 200, 0.15);
      transition: background 0.3s;
    }

    .svc2-stage-dot.svc2-active {
      background: #1E70C8;
    }

    .svc2-pile-card {
      animation: svc2PileIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes svc2PileIn {
      from {
        opacity: 0;
        transform: translateX(-12px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .svc2-warn-pulse {
      animation: svc2WarnPulse 1.8s ease-in-out infinite;
    }

    @keyframes svc2WarnPulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    .svc2-complete-card {
      animation: svc2CompletePop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes svc2CompletePop {
      from {
        opacity: 0;
        transform: scale(0.92);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* ---- Responsive ---- */
    @media (max-width: 768px) {
      .story-service {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        min-height: auto;
      }

      .story-left {
        padding-right: 0;
        margin-bottom: 32px;
      }

      .story-heading {
        font-size: 28px;
      }

      .story-anim-frame {
        aspect-ratio: 4/3;
      }

      .svc2-right {
        aspect-ratio: 4/3;
        padding: 0;
      }

      .svc2-hero-num {
        font-size: 64px;
      }
    }
  

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --blue: #1E70C8;
      --blue-mid: #2563EB;
      --blue-light: #3B82F6;
      --blue-pale: #BFDBFE;
      --dark-card: #07111F;
      --panel-bg: #101C2C;
      --gray-text: #5A6475;
      --white: #FFFFFF;
      --intel-blue: #1E70C8;
      --near-black: #111827;
    }

    html,
    body {
      font-family: 'Inter', sans-serif;
      background: var(--white);
      color: #0F172A;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ══════════════════════════════
       NAVBAR
    ══════════════════════════════ */
    .navbar-wrap {
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(16px) saturate(1.4);
      -webkit-backdrop-filter: blur(16px) saturate(1.4);
      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
      position: relative;
      z-index: 100;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px -20px rgba(15, 23, 42, 0.25);
    }

    .navbar {
      display: flex;
      align-items: center;
      padding: 0 56px;
      height: 84px;
      max-width: 1440px;
      margin: 0 auto;
    }

    .nav-logo {
      font-size: 22px;
      font-weight: 800;
      color: var(--blue);
      letter-spacing: -0.5px;
      text-decoration: none;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
    }

    .nav-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 44px;
      list-style: none;
    }

    .nav-center a {
      font-size: 15.5px;
      font-weight: 500;
      color: var(--near-black);
      text-decoration: none;
      position: relative;
      padding-bottom: 4px;
      letter-spacing: -0.1px;
      transition: color 0.2s;
    }

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

    .nav-center a.active {
      color: var(--blue);
    }

    .nav-center a.active::after {
      content: '';
      position: absolute;
      bottom: -7px;
      left: -2px;
      right: -2px;
      height: 2px;
      background: var(--blue);
      border-radius: 3px;
    }

    .nav-right {
      margin-left: auto;
      display: flex;
      align-items: center;
    }

    .nav-cta {
      background: linear-gradient(180deg, #2378D4 0%, var(--blue) 100%);
      color: var(--white);
      border: none;
      border-radius: 12px;
      padding: 11px 26px;
      font-size: 14.5px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.1px;
      transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 12px rgba(30, 112, 200, 0.22), 0 1px 2px rgba(15, 23, 42, 0.08);
    }

    .nav-cta:hover {
      background: linear-gradient(180deg, #2A82E8 0%, #1A63B0 100%);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 20px rgba(30, 112, 200, 0.32), 0 2px 4px rgba(15, 23, 42, 0.1);
      transform: translateY(-1px);
    }

    /* ══════════════════════════════
       HERO SECTION
    ══════════════════════════════ */
    .hero-wrap {
      min-height: calc(100vh - 72px);
      display: flex;
      align-items: center;
      background:
        radial-gradient(ellipse 70% 60% at 75% 50%, rgba(30, 112, 200, 0.055) 0%, transparent 70%),
        radial-gradient(ellipse 55% 70% at 20% 80%, rgba(30, 112, 200, 0.035) 0%, transparent 60%),
        var(--white);
    }

    .hero {
      display: flex;
      align-items: center;
      padding: 0 56px;
      max-width: 1440px;
      margin: 0 auto;
      width: 100%;
      gap: 64px;
      position: relative;
      overflow: visible;
    }

    /* Page background — clean white + subtle radial hints */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 75% 50%, rgba(30, 112, 200, 0.055) 0%, transparent 70%),
        radial-gradient(ellipse 55% 70% at 20% 80%, rgba(30, 112, 200, 0.035) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    /* Decorative arc behind left content */
    .hero::before {
      content: '';
      position: absolute;
      left: -180px;
      top: 50%;
      transform: translateY(-50%);
      width: 600px;
      height: 600px;
      border-radius: 50%;
      border: 1px solid rgba(30, 112, 200, 0.07);
      pointer-events: none;
      z-index: 0;
    }

    .hero::after {
      content: '';
      position: absolute;
      left: -100px;
      top: 50%;
      transform: translateY(-50%);
      width: 420px;
      height: 420px;
      border-radius: 50%;
      border: 1px solid rgba(30, 112, 200, 0.05);
      pointer-events: none;
      z-index: 0;
    }

    /* ══════════════════════════════
       LEFT CONTENT
    ══════════════════════════════ */
    .hero-left {
      flex: 0 0 580px;
      max-width: 580px;
      position: relative;
      z-index: 2;
      animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(24px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Category pill */
    .category-pill {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      display: inline-flex;
      align-items: center;
      border: 1.5px solid rgba(30, 112, 200, 0.35);
      border-radius: 999px;
      padding: 6px 18px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--blue);
      background: rgba(30, 112, 200, 0.08);
      width: fit-content;
      margin-bottom: 22px;
    }

    /* Main heading */
    .hero-h1 {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 48px;
      font-weight: 800;
      line-height: 1.01;
      letter-spacing: -0.035em;
      color: #1E2433;
      margin-bottom: 20px;
    }

    .hero-h1 .blue {
      color: var(--blue);
    }

    /* Body paragraph */
    .hero-para {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.65;
      color: #4A5568;
      max-width: 460px;
      margin-bottom: 30px;
    }

    /* Explore link */
    .explore-link {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 15.5px;
      font-weight: 600;
      color: var(--blue);
      text-decoration: none;
      margin-bottom: 40px;
      transition: gap 0.2s;
    }

    .explore-link:hover {
      gap: 15px;
    }

    .explore-link .arr {
      font-size: 17px;
    }

    /* ── Service row ── */
    .service-row {
      display: flex;
      align-items: center;
      border-top: 1px solid #E4EAF3;
      padding-top: 24px;
      gap: 14px;
      flex-wrap: nowrap;
    }

    .svc {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 9px;
      position: relative;
    }

    .svc:not(:last-child) {
      border-right: 1px solid #E4EAF3;
      padding-right: 14px;
    }

    .svc-icon {
      color: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: rgba(30, 112, 200, 0.08);
    }

    .svc-icon svg {
      width: 16px;
      height: 16px;
    }

    .svc-label {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--near-black);
      text-align: left;
      line-height: 1.35;
      letter-spacing: -0.1px;
      white-space: nowrap;
    }

    /* ══════════════════════════════
       RIGHT ILLUSTRATION
    ══════════════════════════════ */
    .hero-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      z-index: 2;
      animation: fadeRight 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
    }

    @keyframes fadeRight {
      from {
        opacity: 0;
        transform: translateX(28px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Dark card ── */
    .dcard {
      width: 720px;
      height: 480px;
      background: #060B14;
      border-radius: 24px;
      border: 1px solid rgba(28, 58, 94, 0.55);
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow:
        0 24px 48px -12px rgba(8, 15, 28, 0.4),
        0 8px 20px -6px rgba(8, 15, 28, 0.3),
        0 0 48px rgba(30, 112, 200, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    /* Radial glow overlay — concentrated tightly around the center circle, minimal spill */
    .dcard::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 48%, rgba(30, 112, 200, 0.26) 0%, rgba(30, 112, 200, 0.08) 22%, transparent 42%),
        radial-gradient(circle at 50% 48%, rgba(30, 112, 200, 0.08) 0%, transparent 62%);
      pointer-events: none;
      z-index: 0;
    }

    /* SVG canvas */
    .dsvg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    /* ── Block nodes ── */
    .bnode {
      position: absolute;
      background: #0B1220;
      border: 1px solid #1C2B42;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      color: #E2E8F0;
      line-height: 1.3;
      padding: 10px 14px;
      z-index: 4;
      box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
      transform: translate(-50%, -50%);
    }

    .n-erp {
      width: 90px;
      height: 44px;
      top: 70px;
      left: 360px;
    }

    .n-custom {
      width: 90px;
      height: 48px;
      top: 240px;
      left: 230px;
    }

    .n-workflow {
      width: 130px;
      height: 44px;
      top: 410px;
      left: 360px;
    }

    .n-ai {
      width: 90px;
      height: 48px;
      top: 240px;
      left: 490px;
    }

    /* ── Center vHandl circle ── */
    .vcircle {
      position: absolute;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: radial-gradient(circle at center, #0F2040 0%, #060E1A 80%);
      border: 2px solid #1E70C8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.5px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 5;
      animation: pulse-core 3s ease-in-out infinite;
    }

    @keyframes pulse-core {

      0%,
      100% {
        box-shadow:
          0 0 0 5px rgba(30, 112, 200, 0.08),
          0 0 16px rgba(30, 112, 200, 0.32),
          inset 0 0 16px rgba(30, 112, 200, 0.32);
      }

      50% {
        box-shadow:
          0 0 0 10px rgba(30, 112, 200, 0.12),
          0 0 30px rgba(30, 112, 200, 0.48),
          inset 0 0 30px rgba(30, 112, 200, 0.48);
      }
    }

    /* ── Side Panels ── */
    .panel-wrap {
      position: absolute;
      top: 0;
      width: 152px;
      height: 100%;
      z-index: 4;
    }

    .lpanel {
      left: 16px;
    }

    .rpanel {
      right: 16px;
    }

    .ptitle {
      position: absolute;
      top: 30px;
      left: 4px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #94A3B8;
      text-transform: uppercase;
    }

    .pitem {
      position: absolute;
      left: 0;
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      gap: 12px;
      background: #0B1220;
      border: 1px solid #1C2B42;
      border-radius: 9px;
      padding: 0 14px;
      font-size: 11.5px;
      font-weight: 500;
      color: #E2E8F0;
      box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
      transform: translateY(-50%);
    }

    .picon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94A3B8;
    }

    .picon svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
    }

    /* Glowing dots on panel items */
    .lpanel .pitem::after {
      content: "";
      position: absolute;
      right: -5px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      background: #1E70C8;
      border-radius: 50%;
      border: 1.5px solid #060B14;
      box-shadow: 0 0 10px #1E70C8;
      z-index: 2;
    }

    .rpanel .pitem::before {
      content: "";
      position: absolute;
      left: -5px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      background: #1E70C8;
      border-radius: 50%;
      border: 1.5px solid #060B14;
      box-shadow: 0 0 10px #1E70C8;
      z-index: 2;
    }

    /* ── Status pill ── */
    .spill {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(10, 17, 30, 0.8);
      border: 1px solid #1C2B42;
      border-radius: 999px;
      padding: 0px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 500;
      color: #A8BACA;
      z-index: 6;
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }

    .sdot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22C55E;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
      animation: blink 2s ease-in-out infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: 0.4
      }
    }

    /* Particle dots */
    .ptcl {
      position: absolute;
      border-radius: 50%;
      background: rgba(30, 112, 200, 0.6);
      animation: pf 4.5s ease-in-out infinite;
      z-index: 2;
    }

    @keyframes pf {

      0%,
      100% {
        opacity: 0.15;
        transform: scale(1);
      }

      50% {
        opacity: 0.80;
        transform: scale(1.5);
      }
    }


    .wave-lines {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80px;
      z-index: 2;
      pointer-events: none;
      opacity: 0.18;
    }
  

            /* Visualization Container */
            .viz-container {
              width: 100%;
              height: 100%;
              max-width: none;
              aspect-ratio: unset;
              position: absolute;
              inset: 0;
              border-radius: 0;
              background: radial-gradient(circle at 50% 50%, #F8FAFC 0%, #EEF4FB 100%);
              border: none;
              box-shadow: none;
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 1;
              transition: opacity 0.6s ease;
            }

            .viz-container.state-fade-out {
              opacity: 0;
            }

            /* Scalable Inner Scene for perfect SVG matching */
            .scene-inner {
              position: absolute;
              width: 580px;
              height: 580px;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%) scale(var(--scale, 1));
              transform-origin: center center;
              pointer-events: none;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            /* Connecting Lines */
            .connection-lines {
              position: absolute;
              inset: 0;
              z-index: 1;
            }

            .line-svg {
              width: 580px;
              height: 580px;
              position: absolute;
              top: 0;
              left: 0;
            }

            .path-line {
              fill: none;
              stroke: var(--b300);
              stroke-width: 1.5;
              stroke-linecap: round;
              stroke-dasharray: 400;
              stroke-dashoffset: 400;
              opacity: 0;
            }

            /* Modules Scene */
            .scene-modules {
              position: absolute;
              inset: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 2;
              transition: opacity 0.4s ease;
            }

            .viz-container.state-dashboard .scene-inner {
              opacity: 0;
            }

            /* Core Platform */
            .core-platform {
              position: absolute;
              width: 80px;
              height: 80px;
              background: linear-gradient(135deg, var(--b400) 0%, var(--b600) 100%);
              border-radius: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 16px 32px -8px rgba(21, 88, 168, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
              z-index: 3;
              opacity: 0;
              transform: scale(0.5);
              will-change: transform, opacity, border-radius;
            }

            .core-platform::before {
              content: '';
              position: absolute;
              inset: -12px;
              border-radius: inherit;
              border: 1px solid var(--b300);
              opacity: 0;
            }

            @keyframes pulse-ring {
              0% {
                transform: scale(0.9);
                opacity: 0;
              }

              50% {
                opacity: 0.4;
              }

              100% {
                transform: scale(1.4);
                opacity: 0;
              }
            }

            /* Individual Module Cards */
            .module-wrapper {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%) translate(0, 0);
              opacity: 0;
              will-change: transform, opacity;
              z-index: 2;
            }

            .module-card {
              background: rgba(255, 255, 255, 0.85);
              backdrop-filter: blur(12px);
              -webkit-backdrop-filter: blur(12px);
              border: 1px solid rgba(204, 223, 247, 0.6);
              padding: 12px 16px;
              border-radius: 12px;
              box-shadow: 0 8px 24px -6px rgba(8, 43, 94, 0.08);
              display: flex;
              align-items: center;
              gap: 10px;
              transform: scale(0.8);
              will-change: transform;
            }

            .module-icon {
              width: 32px;
              height: 32px;
              border-radius: 8px;
              background: var(--b50);
              color: var(--b500);
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .module-icon svg {
              width: 16px;
              height: 16px;
            }

            .module-info {
              display: flex;
              flex-direction: column;
              gap: 2px;
            }

            .module-title {
              font-size: 13px;
              font-weight: 600;
              color: var(--g700);
              line-height: 1;
            }

            .module-status {
              font-size: 10px;
              color: var(--g400);
              font-weight: 500;
              line-height: 1;
            }

            @keyframes float {

              0%,
              100% {
                transform: translateY(0);
              }

              50% {
                transform: translateY(-8px);
              }
            }

            /* --- STATE: ASSEMBLE --- */
            .viz-container.state-assemble .core-platform {
              opacity: 1;
              transform: scale(1);
              transition: transform 1.2s var(--ease-spring), opacity 0.8s ease;
            }

            .viz-container.state-assemble .core-platform::before {
              animation: pulse-ring 3s infinite var(--ease-out) 1s;
            }

            .viz-container.state-assemble .module-wrapper {
              opacity: 1;
              transform: translate(-50%, -50%) translate(var(--tx), var(--ty));
              transition: transform 1.2s var(--ease-spring), opacity 0.8s ease;
            }

            .viz-container.state-assemble .module-card {
              transform: scale(1);
              transition: transform 1.2s var(--ease-spring);
              animation: float 4s ease-in-out infinite;
              animation-delay: var(--delay);
            }

            .viz-container.state-assemble .path-line {
              opacity: 0.4;
              stroke-dashoffset: 0;
              transition: stroke-dashoffset 1.5s var(--ease-in-out), opacity 0.8s ease;
            }

            /* --- STATE: MERGE --- */
            .viz-container.state-merge .module-wrapper {
              transform: translate(-50%, -50%) translate(0, 0);
              opacity: 0;
              transition: transform 0.8s var(--ease-in-out), opacity 0.6s ease 0.2s;
            }

            .viz-container.state-merge .module-card {
              transform: scale(0.5);
              transition: transform 0.8s var(--ease-in-out);
            }

            .viz-container.state-merge .path-line {
              opacity: 0;
              transition: opacity 0.4s ease;
            }

            .viz-container.state-merge .core-platform {
              transform: scale(15);
              border-radius: 50%;
              opacity: 0;
              transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1), opacity 0.4s ease 0.5s, border-radius 0.5s;
            }

            .viz-container.state-merge .core-platform::before {
              display: none;
            }

            /* --- STATE: DASHBOARD --- */
            .scene-dashboard {
              position: absolute;
              inset: 0;
              padding: 24px;
              display: grid;
              grid-template-columns: 1fr 1fr;
              grid-template-rows: auto 1fr 1fr;
              gap: 16px;
              opacity: 0;
              pointer-events: none;
              z-index: 4;
            }

            .viz-container.state-dashboard .scene-dashboard {
              opacity: 1;
              pointer-events: auto;
              transition: opacity 0.4s ease 0.4s;
            }

            .dash-header {
              grid-column: 1 / -1;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 12px 20px;
              background: rgba(255, 255, 255, 0.95);
              backdrop-filter: blur(12px);
              -webkit-backdrop-filter: blur(12px);
              border-radius: 12px;
              border: 1px solid rgba(255, 255, 255, 0.5);
              box-shadow: 0 4px 12px -4px rgba(8, 43, 94, 0.05);
              transform: perspective(1000px) rotateX(10deg) translateY(-20px);
              opacity: 0;
              transform-origin: top center;
            }

            .dash-logo {
              display: flex;
              align-items: center;
              gap: 8px;
              font-size: 14px;
              font-weight: 700;
              color: var(--b600);
            }

            .dash-status {
              font-size: 11px;
              font-weight: 600;
              color: #10B981;
              display: flex;
              align-items: center;
              gap: 6px;
            }

            .dash-status::before {
              content: '';
              width: 6px;
              height: 6px;
              background: currentColor;
              border-radius: 50%;
              box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
            }

            .bento-box {
              background: rgba(255, 255, 255, 0.95);
              backdrop-filter: blur(12px);
              -webkit-backdrop-filter: blur(12px);
              border-radius: 16px;
              border: 1px solid rgba(255, 255, 255, 0.6);
              padding: 20px;
              box-shadow: 0 8px 24px -8px rgba(8, 43, 94, 0.06);
              transform: perspective(1000px) rotateX(15deg) translateY(30px) scale(0.95);
              opacity: 0;
              transform-origin: bottom center;
              display: flex;
              flex-direction: column;
            }

            .bento-large {
              grid-column: 1 / -1;
              display: flex;
              flex-direction: row;
              align-items: center;
              gap: 24px;
            }

            .viz-container.state-dashboard .dash-header,
            .viz-container.state-dashboard .bento-box {
              transform: perspective(1000px) rotateX(0) translateY(0) scale(1);
              opacity: 1;
              transition: transform 1s var(--ease-spring), opacity 0.8s ease;
            }

            .viz-container.state-dashboard .dash-header {
              transition-delay: 0.5s;
            }

            .viz-container.state-dashboard .bento-box:nth-child(2) {
              transition-delay: 0.6s;
            }

            .viz-container.state-dashboard .bento-box:nth-child(3) {
              transition-delay: 0.7s;
            }

            .viz-container.state-dashboard .bento-box:nth-child(4) {
              transition-delay: 0.8s;
            }

            .box-title {
              font-size: 11px;
              font-weight: 700;
              color: var(--g400);
              margin-bottom: 4px;
              text-transform: uppercase;
              letter-spacing: 0.05em;
            }

            .box-value {
              font-size: 28px;
              font-weight: 700;
              color: var(--g700);
              margin-bottom: 8px;
              letter-spacing: -0.02em;
            }

            .box-trend {
              font-size: 12px;
              font-weight: 600;
              color: #10B981;
              display: flex;
              align-items: center;
              gap: 4px;
            }

            .chart-bars {
              display: flex;
              align-items: flex-end;
              gap: 8px;
              height: 60px;
              flex: 1;
            }

            .chart-bar {
              flex: 1;
              background: var(--b50);
              border-radius: 4px;
              position: relative;
              overflow: hidden;
              height: 100%;
            }

            .chart-bar-fill {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background: linear-gradient(180deg, var(--b300) 0%, var(--b500) 100%);
              border-radius: 4px;
              height: 0%;
              transition: height 1.2s var(--ease-spring);
            }

            .metric-row {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 8px 0;
              border-bottom: 1px solid var(--g100);
            }

            .metric-row:last-child {
              border-bottom: none;
              padding-bottom: 0;
            }

            .m-label {
              font-size: 12px;
              color: var(--g500);
              font-weight: 500;
            }

            .m-val {
              font-size: 13px;
              color: var(--g700);
              font-weight: 600;
            }

            @media(max-width:860px) {
              .section {
                grid-template-columns: 1fr;
                padding: 56px 24px
              }

              .left {
                padding-right: 0;
                border-right: none;
                border-bottom: 1px solid var(--g200);
                padding-bottom: 40px;
                margin-bottom: 36px
              }

              .sub,
              .desc {
                max-width: 100%
              }

              .right {
                padding-left: 0
              }

              .scene-dashboard {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                overflow-y: auto;
                padding: 16px;
              }

              .bento-large {
                flex-direction: column;
                align-items: stretch;
                gap: 16px;
              }

              .chart-bars {
                height: 80px;
              }
            }
          

            /* ── ANIMATION SHELL — matches canvas-shell from ERP ───────────── */
            .anim-shell {
              width: 100%;
              max-width: 560px;
              aspect-ratio: 1/1;
              position: relative;
              background: linear-gradient(145deg, #F4F8FD 0%, #EEF4FB 100%);
              border-radius: 18px;
              border: 1px solid var(--b100);
              overflow: hidden;
            }

            /* ── STAGE LABEL ────────────────────────────────────────────────── */
            .stage-label {
              position: absolute;
              bottom: 16px;
              left: 50%;
              transform: translateX(-50%);
              font-size: 9.5px;
              font-weight: 700;
              letter-spacing: .1em;
              text-transform: uppercase;
              color: var(--g400);
              white-space: nowrap;
              z-index: 20;
              background: rgba(255, 255, 255, 0.88);
              backdrop-filter: blur(4px);
              padding: 5px 14px;
              border-radius: 20px;
              border: 1px solid var(--g200);
              transition: opacity .4s ease;
            }

            /* ── PROGRESS BAR ───────────────────────────────────────────────── */
            .progress-bar {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 0%;
              height: 2px;
              background: var(--b400);
              border-radius: 0 1px 1px 0;
              z-index: 21;
              transition: width linear;
            }

            /* ── SCENE CONTAINER ────────────────────────────────────────────── */
            .scene {
              position: absolute;
              inset: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              transition: opacity .5s ease;
              pointer-events: none;
            }

            .scene.active {
              opacity: 1;
              pointer-events: auto;
            }

            /* ════════════════════════════════════════════════════════════════
   STAGE 1 — Trapped Data  ·  CLAYMORPHISM
   ════════════════════════════════════════════════════════════════ */
            .s1 {
              flex-wrap: wrap;
              padding: 28px 24px;
              gap: 10px;
              align-content: center;
              /* warmer shell background for stage 1 */
              background: linear-gradient(150deg, #F0F6FE 0%, #F5F0FC 50%, #F0F8F4 100%);
            }

            /* Clay base — applies to every .data-block */
            .data-block {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              padding: 10px 16px 10px 12px;
              border-radius: 14px;
              /* chunky rounded corners = clay */
              border: none;
              /* clay colour comes per-block via --clay-* vars */
              background: var(--clay-bg, var(--b50));
              /* thick bottom/right shadow = pressed-clay depth; top highlight = light source */
              box-shadow:
                0 6px 0 0 var(--clay-shadow, rgba(30, 112, 200, .25)),
                /* depth tab */
                0 2px 0 0 rgba(255, 255, 255, .85) inset,
                /* top highlight */
                0 10px 24px rgba(0, 0, 0, .08);
              /* ambient */
              font-size: 12px;
              font-weight: 700;
              color: var(--clay-text, var(--b600));
              letter-spacing: .01em;
              opacity: 0;
              transform: translateY(10px) scale(.96);
              transition: opacity .38s ease, transform .38s ease;
            }

            .data-block.shown {
              opacity: 1;
              transform: translateY(0) scale(1);
            }

            .data-block svg {
              flex-shrink: 0;
              width: 17px;
              height: 17px;
            }

            /* ── Per-block clay colour assignments ────────────────────────── */
            /* db0 Emails      → blue  */
            #db0 {
              --clay-bg: #DDEEFB;
              --clay-shadow: rgba(30, 100, 200, .32);
              --clay-text: #0E4186;
            }

            /* db1 Spreadsheets → green */
            #db1 {
              --clay-bg: #D4EFDF;
              --clay-shadow: rgba(22, 110, 60, .28);
              --clay-text: #1F7A4A;
            }

            /* db2 Documents   → purple */
            #db2 {
              --clay-bg: #E5DEFA;
              --clay-shadow: rgba(100, 70, 200, .28);
              --clay-text: #4E349A;
            }

            /* db3 ERP Systems → teal */
            #db3 {
              --clay-bg: #CFF0EE;
              --clay-shadow: rgba(20, 120, 120, .28);
              --clay-text: #1A7F7F;
            }

            /* db4 Reports     → amber */
            #db4 {
              --clay-bg: #FAE8CE;
              --clay-shadow: rgba(180, 100, 30, .28);
              --clay-text: #A05A20;
            }

            /* db5 Customer    → rose */
            #db5 {
              --clay-bg: #FAD6E0;
              --clay-shadow: rgba(180, 60, 90, .28);
              --clay-text: #A03055;
            }

            /* db6 Invoices    → gold */
            #db6 {
              --clay-bg: #FBF0C4;
              --clay-shadow: rgba(180, 148, 20, .28);
              --clay-text: #8A6800;
            }

            /* ── Icon colours matched per block ──────────────────────────── */
            #db0 svg path,
            #db0 svg rect,
            #db0 svg line,
            #db0 svg circle {
              stroke: #1E70C8
            }

            #db1 svg path,
            #db1 svg rect,
            #db1 svg line,
            #db1 svg circle {
              stroke: #1F7A4A
            }

            #db2 svg path,
            #db2 svg rect,
            #db2 svg line,
            #db2 svg circle {
              stroke: #4E349A
            }

            #db3 svg path,
            #db3 svg rect,
            #db3 svg line,
            #db3 svg circle {
              stroke: #1A7F7F
            }

            #db4 svg path,
            #db4 svg rect,
            #db4 svg line,
            #db4 svg circle {
              stroke: #A05A20
            }

            #db5 svg path,
            #db5 svg rect,
            #db5 svg line,
            #db5 svg circle {
              stroke: #A03055
            }

            #db6 svg path,
            #db6 svg rect,
            #db6 svg line,
            #db6 svg circle {
              stroke: #8A6800
            }

            /* stagger float — clay blocks bob gently */
            .data-block:nth-child(2) {
              animation: float1 4.2s ease-in-out infinite 0s;
            }

            .data-block:nth-child(3) {
              animation: float2 3.9s ease-in-out infinite .55s;
            }

            .data-block:nth-child(4) {
              animation: float3 4.4s ease-in-out infinite .25s;
            }

            .data-block:nth-child(5) {
              animation: float2 4.1s ease-in-out infinite 1.0s;
            }

            .data-block:nth-child(6) {
              animation: float1 3.7s ease-in-out infinite .45s;
            }

            .data-block:nth-child(7) {
              animation: float3 4.3s ease-in-out infinite .15s;
            }

            .data-block:nth-child(8) {
              animation: float1 4.0s ease-in-out infinite .75s;
            }

            /* translate Y floats — keep box-shadow from shifting with scale */
            @keyframes float1 {

              0%,
              100% {
                transform: translateY(0);
              }

              50% {
                transform: translateY(-5px);
              }
            }

            @keyframes float2 {

              0%,
              100% {
                transform: translateY(0);
              }

              50% {
                transform: translateY(-4px);
              }
            }

            @keyframes float3 {

              0%,
              100% {
                transform: translateY(0);
              }

              50% {
                transform: translateY(-6px);
              }
            }

            /* disconnect indicator — small dashed lines between blocks */
            .s1-disconnect {
              position: absolute;
              inset: 0;
              z-index: 1;
              pointer-events: none;
              opacity: 0;
              transition: opacity .6s ease;
            }

            .s1-disconnect svg {
              width: 100%;
              height: 100%;
              position: absolute;
              inset: 0;
            }

            /* ════════════════════════════════════════════════════════════════
   STAGE 2 — vHandl AI Core
   ════════════════════════════════════════════════════════════════ */
            .s2 {
              flex-direction: column;
              gap: 20px;
            }

            .ai-core {
              position: relative;
              width: 130px;
              height: 130px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
            }

            /* pulse rings */
            .pulse-ring {
              position: absolute;
              border-radius: 50%;
              border: 1px solid rgba(30, 112, 200, .18);
              animation: pulseRing 2.8s ease-out infinite;
            }

            .pulse-ring:nth-child(1) {
              width: 100%;
              height: 100%;
              animation-delay: 0s;
            }

            .pulse-ring:nth-child(2) {
              width: 130%;
              height: 130%;
              animation-delay: .9s;
            }

            .pulse-ring:nth-child(3) {
              width: 160%;
              height: 160%;
              animation-delay: 1.8s;
            }

            @keyframes pulseRing {
              0% {
                transform: scale(.75);
                opacity: 0;
              }

              40% {
                opacity: 1;
              }

              100% {
                transform: scale(1.1);
                opacity: 0;
              }
            }

            /* core circle */
            .core-circle {
              position: relative;
              z-index: 2;
              width: 90px;
              height: 90px;
              border-radius: 50%;
              background: linear-gradient(135deg, #2A82D8 0%, #1E70C8 60%, #1558A8 100%);
              box-shadow:
                0 0 0 1px rgba(30, 112, 200, .3),
                0 0 32px rgba(30, 112, 200, .28),
                0 4px 24px rgba(30, 112, 200, .22);
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 2px;
              animation: corePulse 2.4s ease-in-out infinite;
            }

            @keyframes corePulse {

              0%,
              100% {
                box-shadow: 0 0 0 1px rgba(30, 112, 200, .3), 0 0 32px rgba(30, 112, 200, .28), 0 4px 24px rgba(30, 112, 200, .22);
              }

              50% {
                box-shadow: 0 0 0 1px rgba(30, 112, 200, .4), 0 0 44px rgba(30, 112, 200, .38), 0 4px 32px rgba(30, 112, 200, .32);
              }
            }

            .core-label {
              font-size: 10px;
              font-weight: 700;
              letter-spacing: .1em;
              color: rgba(255, 255, 255, .55);
              text-transform: uppercase;
            }

            .core-name {
              font-size: 13px;
              font-weight: 700;
              letter-spacing: -.01em;
              color: #fff;
            }

            .core-subtext {
              text-align: center;
              max-width: 220px;
            }

            .core-subtext p {
              font-size: 13.5px;
              font-weight: 500;
              color: var(--g600);
              line-height: 1.55;
            }

            .core-subtext strong {
              font-weight: 700;
              color: var(--b500);
            }

            /* ════════════════════════════════════════════════════════════════
   STAGE 3 — Ingestion / Processing
   ════════════════════════════════════════════════════════════════ */
            .s3 {
              flex-direction: row;
              padding: 28px;
            }

            /* left: stream */
            .stream-col {
              flex: 0 0 44%;
              display: flex;
              flex-direction: column;
              gap: 9px;
              justify-content: center;
              padding-right: 16px;
            }

            .stream-card {
              display: flex;
              align-items: center;
              gap: 8px;
              padding: 8px 12px;
              border-radius: 9px;
              background: var(--sc-bg, var(--white));
              border: 1px solid var(--sc-border, var(--g200));
              box-shadow: 0 1px 4px rgba(0, 0, 0, .06), 0 3px 0 0 var(--sc-shadow, var(--g200));
              font-size: 11.5px;
              font-weight: 700;
              color: var(--sc-text, var(--g700));
              opacity: 0;
              transform: translateX(-16px);
              transition: opacity .35s ease, transform .35s ease;
            }

            #sc0 {
              --sc-bg: #DDEEFB;
              --sc-border: #A8CCF0;
              --sc-shadow: rgba(30, 100, 200, .2);
              --sc-text: #0E4186;
            }

            #sc1 {
              --sc-bg: #FAE8CE;
              --sc-border: #EDCFA0;
              --sc-shadow: rgba(180, 100, 30, .2);
              --sc-text: #A05A20;
            }

            #sc2 {
              --sc-bg: #E5DEFA;
              --sc-border: #C0ACEC;
              --sc-shadow: rgba(100, 70, 200, .2);
              --sc-text: #4E349A;
            }

            #sc3 {
              --sc-bg: #FAD6E0;
              --sc-border: #EDAABA;
              --sc-shadow: rgba(180, 60, 90, .2);
              --sc-text: #A03055;
            }

            #sc4 {
              --sc-bg: #D4EFDF;
              --sc-border: #9ADAB6;
              --sc-shadow: rgba(22, 110, 60, .2);
              --sc-text: #1F7A4A;
            }

            .stream-card.in {
              opacity: 1;
              transform: translateX(0);
            }

            .stream-card.out {
              opacity: 0;
              transform: translateX(16px);
            }

            .stream-card-icon {
              width: 28px;
              height: 28px;
              border-radius: 6px;
              background: rgba(255, 255, 255, .55);
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
            }

            /* center: mini core */
            .mini-core-wrap {
              flex: 0 0 50px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 0;
              position: relative;
            }

            .mini-core {
              width: 44px;
              height: 44px;
              border-radius: 50%;
              background: linear-gradient(135deg, #2A82D8, #1558A8);
              box-shadow: 0 0 20px rgba(30, 112, 200, .3);
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              animation: corePulse 2.4s ease-in-out infinite;
            }

            .mini-core-txt {
              font-size: 7px;
              font-weight: 700;
              color: rgba(255, 255, 255, .7);
              letter-spacing: .06em;
              line-height: 1.2;
              text-align: center;
            }

            /* flow arrow — dashes */
            .flow-arrow {
              width: 100%;
              display: flex;
              align-items: center;
              position: relative;
              margin: 4px 0;
            }

            .flow-line {
              flex: 1;
              height: 1px;
              background: repeating-linear-gradient(90deg, var(--b300) 0, var(--b300) 4px, transparent 4px, transparent 9px);
              position: relative;
              overflow: hidden;
            }

            .flow-dot {
              position: absolute;
              top: 50%;
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: var(--b400);
              transform: translateY(-50%);
              animation: flowDot 1.4s linear infinite;
            }

            @keyframes flowDot {
              from {
                left: -6px;
              }

              to {
                left: 100%;
              }
            }

            /* right: feed */
            .feed-col {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              padding-left: 16px;
              border-left: 1px solid var(--g200);
            }

            .feed-label {
              font-size: 9px;
              font-weight: 700;
              letter-spacing: .12em;
              text-transform: uppercase;
              color: var(--g300);
              margin-bottom: 10px;
            }

            .feed-item {
              display: flex;
              align-items: center;
              gap: 7px;
              padding: 5px 0;
              border-bottom: 1px solid var(--g100);
              font-size: 11px;
              font-weight: 500;
              color: var(--g600);
              opacity: 0;
              transform: translateX(8px);
              transition: opacity .3s ease, transform .3s ease;
            }

            .feed-item:last-child {
              border-bottom: none;
            }

            .feed-item.in {
              opacity: 1;
              transform: translateX(0);
            }

            .feed-check {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              flex-shrink: 0;
              background: var(--b400);
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .feed-check svg {
              width: 8px;
              height: 8px;
            }

            /* ════════════════════════════════════════════════════════════════
   STAGE 4 — Intelligent Output
   ════════════════════════════════════════════════════════════════ */
            .s4 {
              flex-direction: column;
              gap: 10px;
              padding: 28px;
            }

            .s4-header {
              text-align: center;
              flex-shrink: 0;
            }

            .s4-label {
              font-size: 9.5px;
              font-weight: 700;
              letter-spacing: .12em;
              text-transform: uppercase;
              color: var(--b400);
              margin-bottom: 6px;
            }

            .s4-title {
              font-size: 17px;
              font-weight: 700;
              letter-spacing: -.02em;
              color: var(--g700);
              line-height: 1.2;
            }

            .s4-title em {
              font-style: normal;
              color: var(--b400);
            }

            .out-grid {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 8px;
              flex: 1;
            }

            .out-card {
              background: var(--oc-bg, var(--b50));
              border: 1.5px solid var(--oc-border, var(--b100));
              border-radius: 12px;
              padding: 14px 14px 12px;
              box-shadow:
                0 4px 0 0 var(--oc-shadow, rgba(30, 112, 200, .18)),
                0 8px 20px rgba(0, 0, 0, .06);
              display: flex;
              flex-direction: column;
              gap: 6px;
              opacity: 0;
              transform: translateY(12px);
              transition: opacity .4s ease, transform .4s ease, box-shadow .2s ease;
              cursor: default;
            }

            .out-card:hover {
              box-shadow: 0 6px 0 0 var(--oc-shadow, rgba(30, 112, 200, .22)), 0 10px 28px rgba(0, 0, 0, .1);
              transform: translateY(-1px);
            }

            .out-card.shown {
              opacity: 1;
              transform: translateY(0);
            }

            .out-card:hover.shown {
              transform: translateY(-2px);
            }

            /* ── Per-output-card colours ──────────────────────────────────── */
            /* oc0 AI Assistants        → blue (brand) */
            #oc0 {
              --oc-bg: #DDEEFB;
              --oc-border: #9AC2EF;
              --oc-shadow: rgba(30, 100, 200, .22);
            }

            /* oc1 Knowledge Search     → teal */
            #oc1 {
              --oc-bg: #CFF0EE;
              --oc-border: #8CD8D5;
              --oc-shadow: rgba(20, 120, 120, .22);
            }

            /* oc2 Document Intelligence → purple */
            #oc2 {
              --oc-bg: #E5DEFA;
              --oc-border: #C0ACEC;
              --oc-shadow: rgba(100, 70, 200, .22);
            }

            /* oc3 Business Intelligence → amber */
            #oc3 {
              --oc-bg: #FAE8CE;
              --oc-border: #EDCFA0;
              --oc-shadow: rgba(180, 100, 30, .22);
            }

            /* oc4 Predictive Analytics  → green */
            #oc4 {
              --oc-bg: #D4EFDF;
              --oc-border: #9ADAB6;
              --oc-shadow: rgba(22, 110, 60, .22);
            }

            /* oc5 Workflow Automation    → rose */
            #oc5 {
              --oc-bg: #FAD6E0;
              --oc-border: #EDAABA;
              --oc-shadow: rgba(180, 60, 90, .22);
            }

            /* gentle float per card */
            .out-card.shown:nth-child(1) {
              animation: float1 4.8s ease-in-out infinite .0s;
            }

            .out-card.shown:nth-child(2) {
              animation: float2 5.2s ease-in-out infinite .7s;
            }

            .out-card.shown:nth-child(3) {
              animation: float3 4.6s ease-in-out infinite .3s;
            }

            .out-card.shown:nth-child(4) {
              animation: float2 5.0s ease-in-out infinite 1.1s;
            }

            .out-card.shown:nth-child(5) {
              animation: float1 4.9s ease-in-out infinite .5s;
            }

            .out-card.shown:nth-child(6) {
              animation: float3 5.3s ease-in-out infinite .9s;
            }

            .out-card-icon {
              width: 30px;
              height: 30px;
              border-radius: 7px;
              background: rgba(255, 255, 255, .6);
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .out-card-name {
              font-size: 11.5px;
              font-weight: 700;
              color: var(--g700);
              letter-spacing: -.01em;
            }

            .out-card-bar {
              width: 100%;
              height: 3px;
              border-radius: 2px;
              background: rgba(255, 255, 255, .6);
              position: relative;
              overflow: hidden;
            }

            .out-card-bar-fill {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              border-radius: 2px;
              background: var(--oc-shadow, var(--b400));
              opacity: .7;
              width: 0%;
              transition: width 1s ease .2s;
            }

            .out-card.shown .out-card-bar-fill {
              width: var(--bar-w, 60%);
            }

            /* oc icon SVG stroke colours */
            #oc0 .out-card-icon svg path,
            #oc0 .out-card-icon svg circle,
            #oc0 .out-card-icon svg line,
            #oc0 .out-card-icon svg rect {
              stroke: #1E70C8
            }

            #oc1 .out-card-icon svg path,
            #oc1 .out-card-icon svg circle,
            #oc1 .out-card-icon svg line,
            #oc1 .out-card-icon svg rect {
              stroke: #1A7F7F
            }

            #oc2 .out-card-icon svg path,
            #oc2 .out-card-icon svg circle,
            #oc2 .out-card-icon svg line,
            #oc2 .out-card-icon svg rect {
              stroke: #4E349A
            }

            #oc3 .out-card-icon svg path,
            #oc3 .out-card-icon svg circle,
            #oc3 .out-card-icon svg line,
            #oc3 .out-card-icon svg rect {
              stroke: #A05A20
            }

            #oc4 .out-card-icon svg path,
            #oc4 .out-card-icon svg circle,
            #oc4 .out-card-icon svg line,
            #oc4 .out-card-icon svg rect {
              stroke: #1F7A4A
            }

            #oc5 .out-card-icon svg path,
            #oc5 .out-card-icon svg circle,
            #oc5 .out-card-icon svg line,
            #oc5 .out-card-icon svg rect {
              stroke: #A03055
            }

            /* special: first card wide (span 2) */
            .out-card.wide {
              grid-column: span 2;
            }

            /* ── RESPONSIVE ─────────────────────────────────────────────────── */
            @media(max-width:860px) {
              .section {
                grid-template-columns: 1fr;
                padding: 56px 24px;
              }

              .left {
                padding-right: 0;
                border-right: none;
                border-bottom: 1px solid var(--g200);
                padding-bottom: 40px;
                margin-bottom: 36px;
              }

              .sub,
              .desc {
                max-width: 100%;
              }

              .anim-shell {
                max-width: 100%;
                aspect-ratio: 4/3;
              }

              .right {
                padding-left: 0;
              }
            }

            /* ── REDUCE MOTION ──────────────────────────────────────────────── */
            @media(prefers-reduced-motion:reduce) {

              .data-block,
              .out-card.shown,
              .pulse-ring,
              .core-circle {
                animation: none !important;
              }

              .flow-dot {
                animation: none !important;
              }

              .scene,
              .data-block,
              .stream-card,
              .feed-item,
              .out-card {
                transition: none !important;
              }
            }
          


          

            *,
            *::before,
            *::after {
              box-sizing: border-box;
              margin: 0;
              padding: 0
            }

            :root {
              --b50: #EEF5FD;
              --b100: #CCDFF7;
              --b200: #9AC2EF;
              --b300: #5599E0;
              --b400: #1E70C8;
              --b500: #1558A8;
              --b600: #0E4186;
              --b700: #082B5E;
              --g50: #F8F9FB;
              --g100: #F0F2F6;
              --g200: #DDE1EB;
              --g300: #B8BFD0;
              --g400: #8892A8;
              --g500: #5C6680;
              --g600: #3D4660;
              --g700: #1E2433;
              --white: #FFFFFF;
            }

            html,
            body {
              width: 100%;
              background: var(--white);
              font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif
            }

            /* ── Section layout — mirrors ERP benchmark ── */
            .section {
              display: grid;
              grid-template-columns: 42fr 58fr;
              gap: 0;
              align-items: stretch;
              min-height: 640px;
              max-width: 1400px;
              margin: 0 auto;
              padding: 80px 48px 80px 52px;
            }

            .left {
              display: flex;
              flex-direction: column;
              justify-content: center;
              padding-right: 48px;
              border-right: 1px solid var(--g200);
            }

            .eyebrow {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              font-size: 10.5px;
              font-weight: 700;
              letter-spacing: .15em;
              text-transform: uppercase;
              color: var(--b400);
              margin-bottom: 22px;
            }

            .eyebrow-line {
              width: 22px;
              height: 1.5px;
              background: var(--b400);
              border-radius: 1px;
              flex-shrink: 0
            }

            h2.heading {
              font-size: clamp(32px, 3.2vw, 48px);
              font-weight: 700;
              line-height: 1.08;
              letter-spacing: -.03em;
              color: var(--g700);
              margin-bottom: 6px;
            }

            h2.heading em {
              font-style: normal;
              color: var(--b400)
            }

            .sub {
              font-size: 15.5px;
              font-weight: 500;
              color: var(--g600);
              line-height: 1.55;
              margin-bottom: 18px;
              max-width: 380px;
            }

            .desc {
              font-size: 14px;
              color: var(--g400);
              line-height: 1.78;
              margin-bottom: 32px;
              max-width: 380px;
            }

            .rule {
              width: 32px;
              height: 1px;
              background: var(--g200);
              margin-bottom: 24px
            }

            .cap-head {
              font-size: 10px;
              font-weight: 700;
              letter-spacing: .12em;
              text-transform: uppercase;
              color: var(--g300);
              margin-bottom: 12px
            }

            .caps {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 8px 16px
            }

            .cap-item {
              display: flex;
              align-items: center;
              gap: 8px;
              font-size: 13px;
              color: var(--g600);
              font-weight: 500;
            }

            .cap-dot {
              width: 5px;
              height: 5px;
              border-radius: 50%;
              background: var(--b400);
              flex-shrink: 0
            }

            /* ── Right panel ── */
            .right {
              padding-left: 44px;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .anim-shell {
              width: 100%;
              max-width: 560px;
              aspect-ratio: 1/1;
              position: relative;
              border-radius: 18px;
              border: 1px solid var(--b100);
              overflow: hidden;
              background: #F4F8FD;
            }

            /* ── Stage label ── */
            .stage-pill {
              position: absolute;
              bottom: 18px;
              left: 50%;
              transform: translateX(-50%);
              font-size: 10px;
              font-weight: 700;
              letter-spacing: .10em;
              text-transform: uppercase;
              color: var(--g400);
              white-space: nowrap;
              z-index: 100;
              background: rgba(255, 255, 255, 0.9);
              padding: 5px 14px;
              border-radius: 20px;
              border: 1px solid var(--g200);
              backdrop-filter: blur(4px);
              transition: opacity .4s ease;
            }

            /* ════════════════════════════════════════════
   SCENE WRAPPER — all scenes stack absolutely
   ════════════════════════════════════════════ */
            .scene {
              position: absolute;
              inset: 0;
              opacity: 0;
              transition: opacity .7s ease;
              pointer-events: none;
            }

            .scene.active {
              opacity: 1;
              pointer-events: auto
            }

            /* label badge shared across scenes */
            .nm-tag {
              font-size: 9px;
              font-weight: 700;
              letter-spacing: .08em;
              text-transform: uppercase;
              color: var(--g400);
            }

            /* ════════════════════════════════════════════
   SCENE 2 — Claymorphism "Fragmented Chaos"
   ════════════════════════════════════════════ */
            #s2 {
              background: #ECEEF3;
              overflow: hidden;
              display: block;
              position: absolute;
              inset: 0
            }

            .clay-base {
              position: absolute;
              inset: 0;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 14px;
              padding: 32px;
            }

            /* Reuse the nm cards as dim background */
            .clay-nm-row {
              width: 100%;
              display: flex;
              align-items: center;
              gap: 12px;
              padding: 12px 18px;
              border-radius: 12px;
              background: #ECEEF3;
              box-shadow: 5px 5px 12px #c8cad0, -5px -5px 12px #ffffff;
              opacity: .38;
            }

            .clay-nm-line {
              height: 7px;
              border-radius: 4px;
              background: #ECEEF3;
              box-shadow: inset 2px 2px 4px #c8cad0, inset -2px -2px 4px #ffffff
            }

            /* Clay blocks drop in */
            .clay-block {
              position: absolute;
              border-radius: 18px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 5px;
              font-size: 11px;
              font-weight: 700;
              color: #fff;
              letter-spacing: .04em;
              animation: clayDrop .55s cubic-bezier(.34, 1.56, .64, 1) both;
              padding: 14px 18px;
              /* inner highlight + deep outer shadow = clay */
              box-shadow:
                0 8px 24px rgba(0, 0, 0, .18),
                0 2px 4px rgba(0, 0, 0, .12),
                inset 0 2px 6px rgba(255, 255, 255, .35),
                inset 0 -3px 6px rgba(0, 0, 0, .15);
            }

            @keyframes clayDrop {
              from {
                transform: translateY(-120px) rotate(-8deg) scale(.8);
                opacity: 0
              }

              to {
                transform: translateY(0) rotate(var(--rot, 0deg)) scale(1);
                opacity: 1
              }
            }

            .cb-excel {
              background: linear-gradient(145deg, #2e9e5e, #1e7a47);
              top: 30px;
              left: 38px;
              width: 110px;
              height: 76px;
              --rot: -6deg;
              animation-delay: .05s
            }

            .cb-email {
              background: linear-gradient(145deg, #4a90e8, #2563eb);
              top: 18px;
              left: 195px;
              width: 120px;
              height: 68px;
              --rot: 3deg;
              animation-delay: .18s
            }

            .cb-crm {
              background: linear-gradient(145deg, #e87f3a, #c25e1a);
              top: 42px;
              right: 30px;
              width: 108px;
              height: 72px;
              --rot: 5deg;
              animation-delay: .30s
            }

            .cb-sheet {
              background: linear-gradient(145deg, #d4a017, #b8860b);
              bottom: 98px;
              left: 54px;
              width: 118px;
              height: 70px;
              --rot: -3deg;
              animation-delay: .44s
            }

            .cb-legacy {
              background: linear-gradient(145deg, #7c6b9e, #5b4f7a);
              bottom: 80px;
              right: 44px;
              width: 112px;
              height: 74px;
              --rot: 7deg;
              animation-delay: .58s
            }

            .cb-whatsapp {
              background: linear-gradient(145deg, #25c86a, #1aaa55);
              bottom: 30px;
              left: 50%;
              transform: translateX(-50%) rotate(-2deg) !important;
              width: 126px;
              height: 66px;
              --rot: -2deg;
              animation-delay: .72s
            }

            .clay-icon {
              font-size: 18px;
              line-height: 1
            }

            .clay-lbl {
              font-size: 10px;
              font-weight: 700;
              letter-spacing: .06em;
              text-transform: uppercase;
              opacity: .92
            }

            /* chaos zig-zag connection lines svg */
            .clay-lines {
              position: absolute;
              inset: 0;
              pointer-events: none;
              opacity: .28
            }

            /* ════════════════════════════════════════════
   SCENE 3 — Glassmorphism "Lens of Clarity"
   ════════════════════════════════════════════ */
            #s3 {
              overflow: hidden;
              display: block;
              position: absolute;
              inset: 0;
              background: #ECEEF3
            }

            .glass-chaos-bg {
              position: absolute;
              inset: 0;
              filter: blur(1.5px);
              opacity: .5
            }

            /* reuse clay positions but blurred behind */

            .glass-pane {
              position: absolute;
              top: 0;
              bottom: 0;
              right: 0;
              width: 100%;
              background: rgba(255, 255, 255, 0.52);
              backdrop-filter: blur(14px) saturate(1.4);
              -webkit-backdrop-filter: blur(14px) saturate(1.4);
              border-left: 1.5px solid rgba(255, 255, 255, .8);
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 18px;
              padding: 36px 32px;
              animation: glassSlidein .9s cubic-bezier(.22, 1, .36, 1) both;
              box-shadow: -8px 0 32px rgba(30, 112, 200, .06);
            }

            @keyframes glassSlidein {
              from {
                transform: translateX(100%);
                opacity: 0
              }

              to {
                transform: translateX(0);
                opacity: 1
              }
            }

            /* data nodes inside glass */
            .glass-node-row {
              display: flex;
              align-items: center;
              gap: 14px;
              width: 100%
            }

            .glass-node {
              flex: 1;
              padding: 12px 14px;
              border-radius: 12px;
              background: rgba(255, 255, 255, .72);
              border: 1px solid rgba(30, 112, 200, .18);
              box-shadow: 0 4px 16px rgba(30, 112, 200, .08), inset 0 1px 2px rgba(255, 255, 255, .9);
              display: flex;
              flex-direction: column;
              gap: 6px;
              animation: glassNodeIn .5s ease both;
            }

            .glass-node:nth-child(1) {
              animation-delay: .55s
            }

            .glass-node:nth-child(2) {
              animation-delay: .72s
            }

            @keyframes glassNodeIn {
              from {
                opacity: 0;
                transform: translateY(12px)
              }

              to {
                opacity: 1;
                transform: translateY(0)
              }
            }

            .gn-label {
              font-size: 9px;
              font-weight: 700;
              letter-spacing: .10em;
              text-transform: uppercase;
              color: var(--g400)
            }

            .gn-value {
              font-size: 18px;
              font-weight: 700;
              letter-spacing: -.02em;
              color: var(--g700)
            }

            .gn-bar-bg {
              height: 4px;
              border-radius: 2px;
              background: var(--g200)
            }

            .gn-bar {
              height: 4px;
              border-radius: 2px;
              background: var(--b400);
              animation: barGrow .8s .9s ease both
            }

            @keyframes barGrow {
              from {
                width: 0 !important
              }

              to {}
            }

            .glass-center-node {
              padding: 16px 24px;
              border-radius: 16px;
              background: rgba(255, 255, 255, .8);
              border: 1px solid rgba(30, 112, 200, .22);
              box-shadow: 0 8px 28px rgba(30, 112, 200, .10), inset 0 2px 4px rgba(255, 255, 255, .95);
              text-align: center;
              animation: glassNodeIn .5s .38s ease both;
              width: 100%;
            }

            .gc-eyebrow {
              font-size: 9px;
              font-weight: 700;
              letter-spacing: .12em;
              text-transform: uppercase;
              color: var(--b400);
              margin-bottom: 4px
            }

            .gc-title {
              font-size: 16px;
              font-weight: 700;
              letter-spacing: -.02em;
              color: var(--g700)
            }

            .gc-sub {
              font-size: 12px;
              color: var(--g400);
              margin-top: 3px
            }

            /* glowing connection dots */
            .glass-dot-row {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 10px;
              width: 100%
            }

            .glass-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: var(--b400);
              opacity: .7;
              box-shadow: 0 0 0 4px rgba(30, 112, 200, .12);
            }

            .glass-dot:nth-child(2) {
              width: 10px;
              height: 10px;
              opacity: 1;
              box-shadow: 0 0 0 5px rgba(30, 112, 200, .18), 0 0 12px rgba(30, 112, 200, .3)
            }

            .glass-dot-line {
              flex: 1;
              height: 1px;
              background: linear-gradient(90deg, transparent, rgba(30, 112, 200, .28), transparent)
            }

            /* ════════════════════════════════════════════
   SCENE 4 — Aurora + Glass Cards "Fluid Engine"
   ════════════════════════════════════════════ */
            #s4 {
              position: absolute;
              inset: 0;
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: center
            }

            /* Aurora background blobs — pastel blue/white only */
            .aurora-bg {
              position: absolute;
              inset: 0;
              background: #f0f5fc
            }

            .blob {
              position: absolute;
              border-radius: 50%;
              filter: blur(52px);
              animation: blobDrift linear infinite alternate;
            }

            .blob1 {
              width: 260px;
              height: 260px;
              background: rgba(204, 223, 247, .65);
              top: -40px;
              left: -30px;
              animation-duration: 8s;
              animation-delay: 0s
            }

            .blob2 {
              width: 220px;
              height: 220px;
              background: rgba(154, 194, 239, .45);
              top: 30px;
              right: -20px;
              animation-duration: 10s;
              animation-delay: -3s
            }

            .blob3 {
              width: 280px;
              height: 280px;
              background: rgba(238, 245, 253, .8);
              bottom: -60px;
              left: 60px;
              animation-duration: 12s;
              animation-delay: -6s
            }

            .blob4 {
              width: 180px;
              height: 180px;
              background: rgba(85, 153, 224, .22);
              bottom: 20px;
              right: 40px;
              animation-duration: 9s;
              animation-delay: -2s
            }

            @keyframes blobDrift {
              0% {
                transform: translate(0, 0) scale(1)
              }

              33% {
                transform: translate(18px, -14px) scale(1.06)
              }

              66% {
                transform: translate(-12px, 20px) scale(.96)
              }

              100% {
                transform: translate(10px, 8px) scale(1.03)
              }
            }

            /* Floating glass cards */
            .aurora-cards {
              position: relative;
              z-index: 10;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 16px;
              padding: 32px 36px;
              width: 100%;
            }

            .au-card {
              width: 100%;
              padding: 18px 22px;
              border-radius: 16px;
              background: rgba(255, 255, 255, .62);
              backdrop-filter: blur(16px) saturate(1.6);
              -webkit-backdrop-filter: blur(16px) saturate(1.6);
              border: 1px solid rgba(255, 255, 255, .85);
              box-shadow: 0 8px 32px rgba(30, 112, 200, .10), 0 1px 3px rgba(30, 112, 200, .06), inset 0 1px 2px rgba(255, 255, 255, .95);
              animation: cardFloat ease-in-out infinite alternate, cardEnter .7s cubic-bezier(.22, 1, .36, 1) both;
            }

            .au-card:nth-child(1) {
              animation-duration: 5s, 0s;
              animation-delay: -1s, .08s
            }

            .au-card:nth-child(2) {
              animation-duration: 6.5s, 0s;
              animation-delay: -3s, .24s
            }

            .au-card:nth-child(3) {
              animation-duration: 4.8s, 0s;
              animation-delay: -2s, .40s
            }

            .au-card:nth-child(4) {
              animation-duration: 7s, 0s;
              animation-delay: -4s, .56s
            }

            @keyframes cardFloat {
              from {
                transform: translateY(-3px)
              }

              to {
                transform: translateY(3px)
              }
            }

            @keyframes cardEnter {
              from {
                opacity: 0;
                transform: translateY(18px) scale(.97)
              }

              to {
                opacity: 1;
                transform: translateY(0) scale(1)
              }
            }

            .au-card-top {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 8px
            }

            .au-card-label {
              font-size: 10px;
              font-weight: 700;
              letter-spacing: .10em;
              text-transform: uppercase;
              color: var(--g400)
            }

            .au-card-badge {
              font-size: 9px;
              font-weight: 700;
              letter-spacing: .06em;
              padding: 2px 8px;
              border-radius: 10px;
              background: rgba(30, 112, 200, .10);
              color: var(--b500);
              border: 1px solid rgba(30, 112, 200, .18);
            }

            .au-card-value {
              font-size: 22px;
              font-weight: 700;
              letter-spacing: -.03em;
              color: var(--g700);
              line-height: 1
            }

            .au-card-sub {
              font-size: 12px;
              color: var(--g400);
              margin-top: 3px
            }

            .au-card-bar-bg {
              height: 3px;
              border-radius: 2px;
              background: rgba(30, 112, 200, .10);
              margin-top: 10px
            }

            .au-card-bar {
              height: 3px;
              border-radius: 2px;
              background: linear-gradient(90deg, var(--b300), var(--b400))
            }

            .au-card.accent {
              background: rgba(30, 112, 200, .08);
              border: 1px solid rgba(30, 112, 200, .22);
            }

            .au-card.accent .au-card-value {
              color: var(--b500)
            }

            .au-outcome-row {
              display: flex;
              align-items: center;
              gap: 10px
            }

            .au-check {
              width: 20px;
              height: 20px;
              border-radius: 6px;
              flex-shrink: 0;
              background: rgba(30, 112, 200, .12);
              border: 1px solid rgba(30, 112, 200, .2);
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .au-check svg {
              width: 11px;
              height: 11px
            }

            .au-outcome-text {
              font-size: 13px;
              font-weight: 600;
              color: var(--g600)
            }

            /* ════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════ */
            @media(max-width:860px) {
              .section {
                grid-template-columns: 1fr;
                padding: 56px 24px
              }

              .left {
                padding-right: 0;
                border-right: none;
                border-bottom: 1px solid var(--g200);
                padding-bottom: 40px;
                margin-bottom: 36px
              }

              .sub,
              .desc {
                max-width: 100%
              }

              .anim-shell {
                max-width: 100%;
                aspect-ratio: 4/3
              }

              .right {
                padding-left: 0
              }
            }
          

          /* ── Product Studio Scoped Styles ── */
          .ps-section-wrapper {
            --ps-bg-page: #F8FAFC;
            --ps-bg-dash: #040914;
            --ps-text-main: #0F172A;
            --ps-text-muted: #94A3B8;
            --ps-color-blue: #3B82F6;
            --ps-color-purple: #A855F7;
            --ps-color-green: #10B981;
            --ps-color-orange: #F97316;
            --ps-color-cyan: #06B6D4;

            font-family: 'Inter', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 0;
            box-sizing: border-box;
          }

          .ps-section-wrapper *,
          .ps-section-wrapper *::before,
          .ps-section-wrapper *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
          }

          /* 100vh Scale Wrapper */
          .ps-section-wrapper .ps-app-scale-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            transform-origin: top center;
            width: 100%;
            transition: transform 0.1s ease-out;
            padding: 24px;
          }

          .ps-section-wrapper .ps-header {
            text-align: center;
            margin-bottom: 48px;
            z-index: 20;
            position: relative;
          }

          .ps-section-wrapper .ps-header h1 {
            font-size: clamp(32px, 3.2vw, 48px);
            font-weight: 700;
            line-height: 1.08;
            letter-spacing: -0.03em;
            margin-bottom: 12px;
            color: #111827;
          }

          .ps-section-wrapper .ps-header h1 span {
            color: #1E70C8;
            -webkit-text-fill-color: #1E70C8;
          }

          @keyframes psGradientShift {
            0% {
              background-position: 0% 50%;
            }

            100% {
              background-position: 100% 50%;
            }
          }

          .ps-section-wrapper .ps-header p {
            font-size: 20px;
            color: #475569;
            font-weight: 500;
          }

          .ps-section-wrapper .ps-dashboard {
            width: 100%;
            max-width: 1200px;
            background-color: var(--ps-bg-dash);
            border-radius: 24px;
            padding: 40px;
            box-shadow:
              0 30px 60px -12px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.08);
            position: relative;
            overflow: hidden;
            color: #FFFFFF;
          }

          /* Animated Backgrounds */
          .ps-section-wrapper .ps-dashboard-grid {
            position: absolute;
            top: -100px;
            left: -100px;
            right: -100px;
            bottom: -100px;
            background-image:
              linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: 0;
            animation: psMoveGrid 20s linear infinite;
          }

          @keyframes psMoveGrid {
            0% {
              transform: translateY(0) translateX(0);
            }

            100% {
              transform: translateY(40px) translateX(40px);
            }
          }

          .ps-section-wrapper .ps-dashboard-glow {
            position: absolute;
            top: -200px;
            left: 50%;
            transform: translateX(-50%);
            width: 1000px;
            height: 800px;
            background: radial-gradient(circle, rgba(30, 58, 138, 0.15) 0%, transparent 70%);
            z-index: 0;
            pointer-events: none;
            animation: psAmbientPulse 8s ease-in-out infinite alternate;
          }

          @keyframes psAmbientPulse {
            0% {
              opacity: 0.6;
              transform: translateX(-50%) scale(0.95);
            }

            100% {
              opacity: 1;
              transform: translateX(-50%) scale(1.1);
            }
          }

          .ps-section-wrapper .ps-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
              radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 1.5px, transparent 1.5px);
            background-size: 150px 150px;
            background-position: 0 0;
            z-index: 0;
            animation: psDrift 30s linear infinite;
          }

          .ps-section-wrapper .ps-particles-2 {
            background-size: 250px 250px;
            opacity: 0.5;
            animation: psDrift 20s linear infinite reverse;
          }

          @keyframes psDrift {
            0% {
              background-position: 0px 0px;
            }

            100% {
              background-position: 300px 300px;
            }
          }

          .ps-section-wrapper .ps-dash-header {
            position: relative;
            z-index: 10;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 56px;
          }

          .ps-section-wrapper .ps-dash-header-left {
            display: flex;
            align-items: center;
            gap: 16px;
          }

          .ps-section-wrapper .ps-dash-logo {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3B82F6, #1E3A8A);
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
            animation: psLogoShimmer 4s ease infinite;
          }

          @keyframes psLogoShimmer {
            0% {
              box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 rgba(59, 130, 246, 0);
            }

            50% {
              box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.6), 0 0 15px rgba(59, 130, 246, 0.4);
            }

            100% {
              box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 rgba(59, 130, 246, 0);
            }
          }

          .ps-section-wrapper .ps-dash-header-center {
            display: flex;
            gap: 16px;
          }

          .ps-section-wrapper .ps-dash-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 20px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.5px;
            animation: psPillBreath 4s ease-in-out infinite alternate;
          }

          @keyframes psPillBreath {
            0% {
              transform: scale(1);
              opacity: 0.9;
            }

            100% {
              transform: scale(1.02);
              opacity: 1;
            }
          }

          .ps-section-wrapper .ps-dash-pill-green {
            border: 1px solid rgba(16, 185, 129, 0.4);
            background: rgba(16, 185, 129, 0.05);
            color: #34D399;
            box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.1);
          }

          .ps-section-wrapper .ps-dash-pill-blue {
            border: 1px solid rgba(59, 130, 246, 0.4);
            background: rgba(59, 130, 246, 0.05);
            color: #60A5FA;
            box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.1);
          }

          .ps-section-wrapper .ps-dash-header-right {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--ps-text-muted);
          }

          .ps-section-wrapper .ps-status-dot {
            width: 8px;
            height: 8px;
            background: var(--ps-color-green);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--ps-color-green);
            animation: psDotPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
          }

          @keyframes psDotPulse {
            0% {
              opacity: 0.4;
              transform: scale(0.8);
              box-shadow: 0 0 5px var(--ps-color-green);
            }

            50% {
              opacity: 1;
              transform: scale(1.2);
              box-shadow: 0 0 15px var(--ps-color-green);
            }

            100% {
              opacity: 0.4;
              transform: scale(0.8);
              box-shadow: 0 0 5px var(--ps-color-green);
            }
          }

          .ps-section-wrapper .ps-ecosystem-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            z-index: 10;
            position: relative;
          }

          .ps-section-wrapper .ps-ecosystem {
            position: relative;
            width: 1076px;
            height: 680px;
          }

          /* Connection Lines */
          .ps-section-wrapper .ps-connectors {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
          }

          .ps-section-wrapper .ps-path-line {
            stroke-dasharray: 8 8;
            animation: psDashFlow 30s linear infinite, psStrokeBreath 4s ease-in-out infinite alternate;
          }

          @keyframes psDashFlow {
            to {
              stroke-dashoffset: -400;
            }
          }

          @keyframes psStrokeBreath {
            0% {
              stroke-opacity: 0.2;
              stroke-width: 1.5px;
            }

            100% {
              stroke-opacity: 0.6;
              stroke-width: 2.5px;
              filter: drop-shadow(0 0 4px currentColor);
            }
          }

          /* Product Cards */
          .ps-section-wrapper .ps-card {
            background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(2, 6, 23, 0.9) 100%);
            border-radius: 20px;
            padding: 20px;
            position: absolute;
            backdrop-filter: blur(12px);
            display: flex;
            flex-direction: column;
            z-index: 10;
            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
          }

          @keyframes psCardFloat {
            0% {
              transform: translateY(0px);
            }

            100% {
              transform: translateY(-8px);
            }
          }

          @keyframes psCardGlowBreath {
            0% {
              box-shadow: 0 0 30px -10px var(--ps-glow-color), inset 0 0 15px -10px var(--ps-glow-color);
              border-color: rgba(var(--ps-glow-rgb), 0.3);
            }

            100% {
              box-shadow: 0 0 50px -5px var(--ps-glow-color), inset 0 0 25px -5px var(--ps-glow-color);
              border-color: rgba(var(--ps-glow-rgb), 0.6);
            }
          }

          .ps-section-wrapper .ps-card:hover {
            transform: translateY(-12px) scale(1.02) !important;
            z-index: 20;
            animation-play-state: paused;
          }

          .ps-section-wrapper .ps-card-top-left {
            top: 0;
            left: 68px;
            width: 350px;
            height: 320px;
            --ps-glow-color: rgba(59, 130, 246, 0.4);
            --ps-glow-rgb: 59, 130, 246;
            animation: psCardFloat 7s ease-in-out infinite alternate 0s, psCardGlowBreath 4s ease-in-out infinite alternate 0s;
          }

          .ps-section-wrapper .ps-card-top-right {
            top: 0;
            right: 68px;
            width: 350px;
            height: 320px;
            --ps-glow-color: rgba(168, 85, 247, 0.4);
            --ps-glow-rgb: 168, 85, 247;
            animation: psCardFloat 6s ease-in-out infinite alternate -2s, psCardGlowBreath 5s ease-in-out infinite alternate -1s;
          }

          .ps-section-wrapper .ps-card-bottom-left {
            bottom: 0;
            left: 0;
            width: 312px;
            height: 260px;
            --ps-glow-color: rgba(16, 185, 129, 0.4);
            --ps-glow-rgb: 16, 185, 129;
            animation: psCardGlowBreath 4.5s ease-in-out infinite alternate -2s;
          }

          .ps-section-wrapper .ps-card-bottom-center {
            bottom: 0;
            left: 50%;
            width: 312px;
            height: 260px;
            margin-left: -156px;
            --ps-glow-color: rgba(249, 115, 22, 0.4);
            --ps-glow-rgb: 249, 115, 22;
            animation: psCardGlowBreath 5.5s ease-in-out infinite alternate -3s;
          }

          .ps-section-wrapper .ps-card-bottom-center:hover {
            transform: translateY(-12px) scale(1.02) !important;
          }

          .ps-section-wrapper .ps-card-bottom-right {
            bottom: 0;
            right: 0;
            width: 312px;
            height: 260px;
            --ps-glow-color: rgba(6, 182, 212, 0.4);
            --ps-glow-rgb: 6, 182, 212;
            animation: psCardGlowBreath 4s ease-in-out infinite alternate -1s;
          }

          /* Center Node */
          .ps-section-wrapper .ps-center-logo {
            position: absolute;
            top: 330px;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 72px;
            height: 72px;
            z-index: 5;
          }

          .ps-section-wrapper .ps-center-logo-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg, #3B82F6, #1E3A8A);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 2;
            animation: psNodeBreath 3s ease-in-out infinite alternate;
          }

          @keyframes psNodeBreath {
            0% {
              box-shadow: 0 0 30px rgba(59, 130, 246, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.3);
              transform: scale(0.95);
            }

            100% {
              box-shadow: 0 0 70px rgba(59, 130, 246, 0.9), inset 0 0 25px rgba(255, 255, 255, 0.7);
              transform: scale(1.05);
            }
          }

          .ps-section-wrapper .ps-center-logo-ring-1 {
            position: absolute;
            top: -14px;
            left: -14px;
            right: -14px;
            bottom: -14px;
            border-radius: 50%;
            border: 1.5px dashed rgba(59, 130, 246, 0.6);
            animation: psSpin 20s linear infinite;
            z-index: 1;
          }

          .ps-section-wrapper .ps-center-logo-ring-2 {
            position: absolute;
            top: -28px;
            left: -28px;
            right: -28px;
            bottom: -28px;
            border-radius: 50%;
            border: 1px solid rgba(59, 130, 246, 0.2);
            animation: psSpin 30s linear infinite reverse;
            z-index: 1;
          }

          .ps-section-wrapper .ps-node-particles {
            position: absolute;
            top: -20px;
            left: -20px;
            width: 112px;
            height: 112px;
            z-index: 3;
            pointer-events: none;
          }

          @keyframes psSpin {
            100% {
              transform: rotate(360deg);
            }
          }

          /* Card Internals */
          .ps-section-wrapper .ps-badge-live {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
          }

          .ps-section-wrapper .ps-badge-live.ps-blue {
            background: #2563EB;
            color: white;
            box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
          }

          .ps-section-wrapper .ps-badge-live.ps-purple {
            background: #9333EA;
            color: white;
            box-shadow: 0 0 10px rgba(147, 51, 234, 0.5);
          }

          .ps-section-wrapper .ps-badge-building {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #94A3B8;
            margin-bottom: 14px;
            background: rgba(255, 255, 255, 0.05);
          }

          .ps-section-wrapper .ps-card-header-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
          }

          .ps-section-wrapper .ps-card-title {
            color: white;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 2px;
            line-height: 1.25;
          }

          .ps-section-wrapper .ps-card-subtitle {
            color: var(--ps-text-muted);
            font-size: 13px;
          }

          .ps-section-wrapper .ps-icon-circle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: psIconShimmer 3s ease infinite alternate;
          }

          @keyframes psIconShimmer {
            0% {
              box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
            }

            100% {
              box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
            }
          }

          .ps-section-wrapper .ps-icon-box {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: psIconShimmer 3s ease infinite alternate;
          }

          .ps-section-wrapper .ps-stat-grid {
            display: flex;
            gap: 40px;
            margin: 24px 0;
          }

          .ps-section-wrapper .ps-stat-label {
            color: var(--ps-text-muted);
            font-size: 12px;
            margin-bottom: 6px;
          }

          .ps-section-wrapper .ps-stat-value {
            color: white;
            font-size: 24px;
            font-weight: 700;
          }

          .ps-section-wrapper .ps-stat-flex {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 6px;
          }

          /* Fixed Bar Charts */
          .ps-section-wrapper .ps-bar-chart-container {
            height: 48px;
            width: 100%;
            margin-bottom: 24px;
            padding: 0 4px;
            overflow: hidden;
            position: relative;
          }

          .ps-section-wrapper .ps-bar-chart {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            height: 100%;
            width: 100%;
          }

          .ps-section-wrapper .ps-bar-chart div {
            flex: 1;
            border-radius: 2px 2px 0 0;
            opacity: 0.9;
            transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
          }

          .ps-section-wrapper .ps-bar-chart.ps-blue div {
            background: var(--ps-color-blue);
            box-shadow: 0 -2px 8px rgba(59, 130, 246, 0.3);
          }

          .ps-section-wrapper .ps-bar-chart.ps-purple div {
            background: var(--ps-color-purple);
            box-shadow: 0 -2px 8px rgba(168, 85, 247, 0.3);
          }

          .ps-section-wrapper .ps-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
            margin: 0 0 16px 0;
            width: 100%;
          }

          /* Progress Bars */
          .ps-section-wrapper .ps-progress-track {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            margin: 10px 0 18px 0;
            position: relative;
          }

          .ps-section-wrapper .ps-progress-fill {
            height: 100%;
            border-radius: 3px;
            position: absolute;
            left: 0;
            top: 0;
            width: 0%;
            transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
          }

          .ps-section-wrapper .ps-progress-shine {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            pointer-events: none;
          }

          .ps-section-wrapper .ps-progress-shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            animation: psShine 2.5s infinite linear;
          }

          @keyframes psShine {
            100% {
              left: 200%;
            }
          }

          .ps-section-wrapper .ps-progress-thumb {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fff;
            transition: left 1.5s cubic-bezier(0.4, 0, 0.2, 1);
            animation: psThumbPulse 2s infinite alternate;
            z-index: 2;
          }

          @keyframes psThumbPulse {
            0% {
              transform: translateY(-50%) scale(1);
              box-shadow: 0 0 8px currentColor;
            }

            100% {
              transform: translateY(-50%) scale(1.4);
              box-shadow: 0 0 16px currentColor;
            }
          }

          /* SVG Line Charts Container */
          .ps-section-wrapper .ps-line-chart-container {
            height: 64px;
            width: 100%;
            margin-bottom: 14px;
            position: relative;
            overflow: hidden;
            border-radius: 0 0 4px 4px;
            background-image:
              linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 20px 20px;
            background-position: center bottom;
          }

          .ps-section-wrapper .ps-line-chart-group {
            transform-origin: bottom center;
            animation: psFlexGraph 4s ease-in-out infinite alternate;
          }

          @keyframes psFlexGraph {
            0% {
              transform: scaleY(0.95);
            }

            100% {
              transform: scaleY(1.05);
            }
          }

          /* ── Line chart "draws itself in" on load ──
             Replaces the old behaviour where the chart line/fill/dots were
             simply present from frame one (with only a lone highlight dot
             floating over otherwise-empty space until the section had
             visually "caught up"). Now the loading motion follows the
             actual graph path: the stroke sweeps left-to-right, the area
             fill fades in behind it, each data dot appears only once the
             line has reached it, and the bright highlight dot rides along
             the path during the draw instead of floating in a blank gap. */
          .ps-section-wrapper .ps-line-chart-stroke {
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            animation: psLineDraw 1.6s cubic-bezier(0.65, 0, 0.35, 1) both;
            animation-delay: var(--ps-line-delay, 0.3s);
          }

          .ps-section-wrapper .ps-line-chart-fill {
            opacity: 0;
            animation: psLineFillIn 1s ease-out both;
            animation-delay: calc(var(--ps-line-delay, 0.3s) + 0.5s);
          }

          .ps-section-wrapper .ps-line-chart-dot {
            opacity: 0;
            transform: scale(0.3);
            transform-box: fill-box;
            transform-origin: center;
            animation: psLineDotIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
          }

          .ps-section-wrapper .ps-line-chart-rider {
            offset-rotate: 0deg;
            offset-distance: 0%;
            animation: psLineRider 1.6s cubic-bezier(0.65, 0, 0.35, 1) both;
            animation-delay: var(--ps-line-delay, 0.3s);
          }

          /* Gentle idle bob once the rider has finished travelling the
             path and settled at the final data point — separated onto
             its own element state (added by JS after the travel
             animation ends) so its delay never has to fight the
             per-card --ps-line-delay stagger above. */
          .ps-section-wrapper .ps-line-chart-rider.ps-line-rider-settled {
            animation: psLineRiderBob 3s ease-in-out infinite;
          }

          @keyframes psLineDraw {
            to {
              stroke-dashoffset: 0;
            }
          }

          @keyframes psLineFillIn {
            to {
              opacity: 1;
            }
          }

          @keyframes psLineDotIn {
            to {
              opacity: 1;
              transform: scale(1);
            }
          }

          /* Rides the same path as the stroke so the highlight dot
             travels the visible line as it draws, rather than sitting
             over empty space. offset-path/offset-distance keep it glued
             to the exact path geometry. */
          @keyframes psLineRider {
            from {
              offset-distance: 0%;
              opacity: 1;
            }

            to {
              offset-distance: 100%;
              opacity: 1;
            }
          }

          @keyframes psLineRiderBob {
            0%, 100% {
              transform: translateY(0);
            }

            50% {
              transform: translateY(-4px);
            }
          }

          @media (prefers-reduced-motion: reduce) {

            .ps-section-wrapper .ps-line-chart-stroke,
            .ps-section-wrapper .ps-line-chart-fill,
            .ps-section-wrapper .ps-line-chart-dot,
            .ps-section-wrapper .ps-line-chart-rider {
              animation: none !important;
              opacity: 1 !important;
              stroke-dashoffset: 0 !important;
              transform: none !important;
            }

            /* Rest the highlight dot at the end of the line (its final,
               fully-drawn position) instead of the start of the path. */
            .ps-section-wrapper .ps-line-chart-rider {
              offset-distance: 100% !important;
            }
          }

          .ps-section-wrapper .ps-status-text {
            color: var(--ps-text-muted);
            font-size: 12px;
            animation: psTextBreath 3s ease-in-out infinite alternate;
          }

          @keyframes psTextBreath {
            0% {
              opacity: 0.6;
            }

            100% {
              opacity: 1;
            }
          }

          /* Responsive Mobile Stack */
          @media (max-width: 768px) {
            .ps-section-wrapper {
              padding: 24px 16px;
            }

            .ps-section-wrapper .ps-app-scale-wrapper {
              transform: none !important;
              padding: 0;
            }

            .ps-section-wrapper .ps-dash-header {
              flex-direction: column;
              gap: 24px;
            }

            .ps-section-wrapper .ps-dash-header-center {
              width: 100%;
              flex-direction: column;
            }

            .ps-section-wrapper .ps-ecosystem-wrapper {
              display: block;
            }

            .ps-section-wrapper .ps-ecosystem {
              transform: none;
              height: auto;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 32px;
            }

            .ps-section-wrapper .ps-connectors {
              display: none;
            }

            .ps-section-wrapper .ps-card {
              position: static !important;
              width: 100% !important;
              max-width: 400px;
              transform: none !important;
              margin: 0 !important;
            }

            .ps-section-wrapper .ps-card:hover {
              transform: translateY(-4px) !important;
            }

            .ps-section-wrapper .ps-center-logo {
              position: static !important;
              transform: none !important;
              margin: 24px 0;
            }

            .ps-section-wrapper .ps-dashboard {
              padding: 24px;
            }
          }
        


      /* ============ SECTION SHELL ============ */
      .close {
        position: relative;
        max-width: 1400px;
        margin: 0 auto;
        padding: 56px 48px 0;
        overflow: hidden;
      }

      /* ============ 1. OPENING CONVERSATION ============ */
      .conv {
        max-width: 640px;
        margin: 0 auto;
        text-align: center;
        transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
      }

      .conv.settled {
        transform: translateY(-20px);
        opacity: .12;
      }

      .conv-line {
        font-size: 17.5px;
        font-weight: 450;
        color: var(--g500);
        line-height: 1.55;
        letter-spacing: -.005em;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .4s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1);
        margin-bottom: 6px;
      }

      .conv-line.in {
        opacity: 1;
        transform: translateY(0)
      }

      .conv-line:last-child {
        margin-bottom: 0
      }

      /* ============ 2. PRIMARY STATEMENT ============ */
      .primary-wrap {
        text-align: center;
        margin-top: 14px;
      }

      .primary {
        font-size: clamp(32px, 3.2vw, 48px);
        font-weight: 700;
        letter-spacing: -.03em;
        line-height: 1.08;
        color: var(--g700);
        max-width: 760px;
        margin: 0 auto;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1);
      }

      .primary.in {
        opacity: 1;
        transform: translateY(0)
      }

      .primary em {
        font-style: normal;
        color: var(--b400)
      }

      .secondary {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
      }

      .sec-line {
        font-size: 15px;
        font-weight: 500;
        color: var(--g400);
        line-height: 1.5;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .35s cubic-bezier(.22, .61, .36, 1), transform .35s cubic-bezier(.22, .61, .36, 1);
      }

      .sec-line.in {
        opacity: 1;
        transform: translateY(0)
      }

      .sec-line.conclude {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.008em;
        color: var(--g700);
        margin-top: 4px;
      }

      /* ============ 3. INDUSTRY LINE ============ */
      .industry-wrap {
        margin-top: 36px;
        text-align: center;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .4s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1);
      }

      .industry-wrap.in {
        opacity: 1;
        transform: translateY(0)
      }

      .industry-line {
        font-size: 14.5px;
        font-weight: 500;
        letter-spacing: -.005em;
        color: var(--b400);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 24px;
      }

      .industry-rotator {
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 460px;
        height: 20px;
      }

      .industry-word {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        text-align: center;
        white-space: nowrap;
        color: var(--b400);
        font-weight: 500;
        opacity: 0;
        transition: opacity 1s ease;
      }

      .industry-word.show {
        opacity: 1
      }

      @media(max-width:640px) {
        .industry-line {
          font-size: 13px
        }

        .industry-word {
          white-space: normal;
          line-height: 1.4
        }

        .industry-rotator {
          height: auto;
          min-height: 20px
        }
      }

      /* ============ TRANSITION — the coffee/beer setup ============ */
      .close-transition {
        margin-top: 36px;
        text-align: center;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
      }

      .trans-line {
        font-size: 17px;
        font-weight: 500;
        color: var(--g500);
        line-height: 1.5;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
      }

      .trans-line.in {
        opacity: 1;
        transform: translateY(0)
      }

      .trans-line+.trans-line {
        margin-top: 4px
      }

      .trans-line.wink {
        font-size: 15px;
        color: var(--g400);
        margin-top: 8px;
      }

      /* ============ 4. COFFEE / BEER — ONE TABLE, TWO SEATS ============ */
      .invite {
        margin-top: 64px;
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1);
      }

      .invite.in {
        opacity: 1;
        transform: translateY(0)
      }

      .table {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        max-width: 640px;
        margin: 0 auto;
        gap: 0 96px;
      }

      .seat {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 8px 28px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: opacity .5s ease;
      }

      .seat:focus-visible {
        outline: 2px solid var(--b300);
        outline-offset: 6px;
        border-radius: 8px
      }

      .seat-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 28px;
        filter: drop-shadow(0 0 0 rgba(30, 112, 200, 0));
        transition: filter .6s ease;
      }

      .seat:hover .seat-icon,
      .seat:focus-visible .seat-icon {
        filter: drop-shadow(0 0 8px rgba(30, 112, 200, .2));
      }

      .seat-title {
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -.015em;
        color: var(--g700);
        margin-bottom: 14px;
        transition: color .4s ease;
      }

      .seat:hover .seat-title,
      .seat:focus-visible .seat-title {
        color: var(--b500);
      }

      .seat-line {
        font-size: 14px;
        font-weight: 500;
        color: var(--g500);
        line-height: 1.55;
        max-width: 230px;
      }

      .seat-topics {
        margin-top: 16px;
        font-size: 12px;
        font-weight: 500;
        color: var(--g300);
        letter-spacing: .01em;
      }

      .seat-topics span {
        color: var(--g400)
      }

      /* steam / bubble — organic, JS-spawned, never synchronized */
      .steam-layer,
      .bubble-layer {
        overflow: visible
      }

      .steam-curl {
        opacity: 0;
        stroke-dasharray: 22;
        stroke-dashoffset: 22;
      }

      .steam-curl.run {
        animation-name: steamCurl;
        animation-timing-function: cubic-bezier(.3, .1, .4, 1);
        animation-fill-mode: forwards;
      }

      @keyframes steamCurl {
        0% {
          stroke-dashoffset: 22;
          opacity: 0;
          transform: translateY(0) scaleX(1)
        }

        15% {
          opacity: .34
        }

        55% {
          opacity: .2
        }

        100% {
          stroke-dashoffset: 0;
          opacity: 0;
          transform: translateY(-3px) scaleX(1.18)
        }
      }

      .beer-bubble {
        opacity: 0;
        transform-origin: center;
        --rise: -14px;
      }

      .beer-bubble.run {
        animation-name: bubbleFloat;
        animation-timing-function: cubic-bezier(.25, .1, .3, 1);
        animation-fill-mode: forwards;
      }

      @keyframes bubbleFloat {
        0% {
          opacity: 0;
          transform: translateY(0) scale(.5)
        }

        10% {
          opacity: .75
        }

        85% {
          opacity: .4
        }

        100% {
          opacity: 0;
          transform: translateY(var(--rise)) scale(.85)
        }
      }

      /* ============ 5. BRAND PHILOSOPHY — HERO CLOSE ============ */
      .brand-line {
        margin-top: 96px;
        margin-bottom: 4px;
        text-align: center;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
      }

      .brand-line.in {
        opacity: 1;
        transform: translateY(0)
      }

      .brand-line-text {
        font-size: clamp(33px, 4.5vw, 52px);
        font-weight: 700;
        letter-spacing: -.032em;
        line-height: 1.2;
        color: var(--g700);
      }

      .brand-line-sign {
        margin-top: 22px;
        margin-right: -14%;
        font-size: 13px;
        font-weight: 500;
        color: var(--g300);
        letter-spacing: .02em;
        font-style: italic;
      }

      /* ============ 6. FOOTER — MINIMAL, INTIMATE ============ */
      .foot-grid {
        margin-top: 96px;
        padding-top: 32px;
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid var(--g100);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .4s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1);
      }

      .foot-grid.in {
        opacity: 1;
        transform: translateY(0)
      }

      .foot-col-brand .foot-word {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--g400);
        margin-bottom: 3px;
      }

      .foot-col-brand .foot-tag {
        font-size: 11px;
        font-weight: 500;
        color: var(--g300);
      }

      .foot-col {
        display: flex;
        flex-direction: column;
        gap: 7px
      }

      .foot-col.foot-center {
        align-items: center
      }

      .foot-col.foot-right {
        align-items: flex-end
      }

      .foot-heading {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--g300);
        margin-bottom: 3px;
      }

      .foot-link {
        font-size: 12px;
        font-weight: 500;
        color: var(--g400);
        text-decoration: none;
        letter-spacing: -.002em;
        transition: color .35s ease;
      }

      .foot-link:hover {
        color: var(--b400)
      }

      .foot-bottom {
        margin-top: 24px;
        padding: 0 0 44px;
        text-align: center;
        opacity: 0;
        transition: opacity .4s cubic-bezier(.22, .61, .36, 1);
      }

      .foot-bottom.in {
        opacity: 1
      }

      .foot-copyright {
        font-size: 10.5px;
        color: var(--g300);
        font-weight: 500;
        letter-spacing: .01em;
      }

      /* ============ RESPONSIVE ============ */
      @media(max-width:860px) {
        .close {
          padding: 44px 24px 0
        }

        .conv-line {
          font-size: 15.5px
        }

        .invite {
          margin-top: 36px
        }

        .table {
          grid-template-columns: 1fr;
          max-width: 320px;
          gap: 56px;
        }

        .seat {
          padding: 8px 16px
        }

        .seat-icon {
          width: 62px;
          height: 62px
        }

        .brand-line {
          margin-top: 56px
        }

        .foot-grid {
          grid-template-columns: 1fr;
          gap: 32px;
          text-align: center;
          margin-top: 64px;
        }

        .foot-col.foot-right {
          align-items: center
        }

        .foot-bottom {
          padding-bottom: 40px
        }
      }

      @media(prefers-reduced-motion:reduce) {

        .conv-line,
        .primary,
        .sec-line,
        .industry-wrap,
        .trans-line,
        .invite,
        .brand-line,
        .foot-grid,
        .foot-bottom,
        .conv {
          transition: opacity .3s ease !important;
          transform: none !important;
        }

        .industry-word {
          transition: none !important
        }

        .steam-curl,
        .beer-bubble {
          animation: none !important;
          opacity: 0 !important
        }

        .seat-icon {
          transition: none !important
        }
      }
    

      #services .story-connector {
        display: none !important;
      }

      #services .svc-carousel-stage {
        position: relative;
        max-width: 1152px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        perspective: 1600px;
        z-index: 1;
      }

      #services .svc-slide {
        grid-area: 1 / 1;
        width: 100%;
        margin: 0 auto;
        opacity: 0;
        transform: translate3d(80px, 0, 0) scale(0.94);
        /* GPU-only transition: animating blur/backdrop-filter forces
               full-layer raster on every frame. Keep them STATIC. */
        transition:
          opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
        pointer-events: none;
        will-change: transform, opacity;
        /* Static glass look — applied once, never animated */
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.65);
        border-radius: 24px;
        box-shadow: 0 24px 64px -24px rgba(0, 60, 140, 0.22);
        overflow: hidden;
        box-sizing: border-box;
      }

      /* Compact the original cards when inside the carousel */
      #services .svc-slide.story-service {
        padding: 16px 30px !important;
        /* Reduced top/bottom padding */
        min-height: 550px;
        /* Floor height — cards can grow taller if content needs it */
        height: auto;
        /* Let height follow content instead of clipping it */
        box-sizing: border-box;
        overflow: visible;
        /* No scrollbar — content is contained by the aspect-ratio frame instead */
      }

      #services .svc-slide .story-service>* {
        margin-top: 0;
      }


      #services .svc-slide.is-prev {
        transform: translate3d(-80px, 0, 0) scale(0.94);
      }

      #services .svc-slide.is-active {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        pointer-events: auto;
        z-index: 3;
      }

      /* Morphing blob background */
      #services .svc-blob-bg {
        position: absolute;
        inset: -120px;
        z-index: 0;
        pointer-events: none;
        filter: blur(80px);
        opacity: 0.55;
      }

      #services .svc-blob-bg span {
        position: absolute;
        display: block;
        border-radius: 50%;
        mix-blend-mode: multiply;
        animation: svcBlob 18s ease-in-out infinite;
        will-change: transform, border-radius;
      }

      #services .svc-blob-bg span:nth-child(1) {
        width: 460px;
        height: 460px;
        left: 4%;
        top: 8%;
        background: rgba(30, 112, 200, 0.35);
      }

      #services .svc-blob-bg span:nth-child(2) {
        width: 400px;
        height: 400px;
        right: 6%;
        top: 25%;
        background: rgba(85, 153, 224, 0.30);
        animation-delay: -6s;
      }

      #services .svc-blob-bg span:nth-child(3) {
        width: 360px;
        height: 360px;
        left: 35%;
        bottom: 4%;
        background: rgba(91, 63, 168, 0.22);
        animation-delay: -12s;
      }

      @keyframes svcBlob {

        0%,
        100% {
          transform: translate3d(0, 0, 0) scale(1);
          border-radius: 50%;
        }

        33% {
          transform: translate3d(50px, -40px, 0) scale(1.12);
          border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
        }

        66% {
          transform: translate3d(-40px, 40px, 0) scale(0.92);
          border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
        }
      }

      /* Controls — named tab pills */
      #services .svc-controls {
        position: relative;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin: 30px auto 0;
        max-width: 640px;
      }

      #services .svc-tabs {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
      }

      #services .svc-tab {
        border: 1px solid rgba(30, 112, 200, 0.18);
        background: #fff;
        color: #3A4257;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 18px;
        border-radius: 999px;
        cursor: pointer;
        transition: all 0.25s ease;
        white-space: nowrap;
      }

      #services .svc-tab:hover {
        border-color: rgba(30, 112, 200, 0.4);
        color: #1E70C8;
      }

      #services .svc-tab.active {
        background: #1E70C8;
        border-color: #1E70C8;
        color: #fff;
        box-shadow: 0 8px 20px -8px rgba(30, 112, 200, 0.55);
      }

      @media (max-width: 640px) {
        #services .svc-controls {
          gap: 8px;
        }

        #services .svc-tab {
          font-size: 13px;
          padding: 8px 14px;
        }
      }

      /* Progress ring around active dot */
      #services .svc-progress {
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(30, 112, 200, 0.55);
      }

      @media (max-width: 1024px) {
        #services .svc-carousel-stage {
          min-height: auto;
          max-height: none;
        }

        #services .svc-slide .story-service {
          padding: 24px 24px !important;
        }
      }

      @media (max-width: 768px) {
        #services .svc-carousel-stage {
          min-height: auto;
          max-height: none;
        }

        #services .svc-slide {
          border-radius: 16px;
        }

        #services .svc-slide .story-service {
          padding: 18px 16px !important;
        }
      }


      @media (prefers-reduced-motion: reduce) {
        #services .svc-slide {
          transition: opacity 0.3s ease;
          transform: none !important;
        }

        #services .svc-blob-bg span {
          animation: none;
        }
      }
    

      /*
         * Exact effect from recording:
         *
         * ALL words are present from the start but begin as near-white (#f0eeeb)
         * — invisible against the white page background.
         *
         * A color wave sweeps left→right starting at ~1s after page load:
         *   near-white → hot-pink (#E8409A) → purple (#7C3AED) → navy (#1B2340)
         *
         * Each word's color animation is staggered by --wi × 0.55s so the
         * "darkening front" travels word by word left to right, giving the
         * perfect illusion of a left-to-right text reveal.
         *
         * After the wave passes, every word settles at dark navy and stays there
         * while the color wave continues looping (navy→pink→purple→pink→navy).
         */
      /* Infinite Intel-style flowing wave */
      /* Intel Blue Breathing Only */



      :root {
        --intel-blue: #1E70C8;
        --near-black: #111827;
        --white: #FFFFFF;
      }

      /* ---------- PHASE 1 : ONE TIME WAVE REVEAL ---------- */

      @keyframes waveReveal {

        0% {

          color: var(--white);

          text-shadow: none;

        }

        35% {

          color: var(--intel-blue);

          text-shadow:
            0 0 6px rgba(30, 112, 200, .10);

        }

        100% {

          color: var(--near-black);

          text-shadow: none;

        }

      }

      /* ---------- PHASE 2 : BREATH LOOP ---------- */

      @keyframes breatheGlow {

        0%,
        50% {

          color: var(--near-black);

          text-shadow: none;

        }

        75% {

          color: var(--intel-blue);

          text-shadow:
            0 0 3px rgba(30, 112, 200, .08),
            0 0 8px rgba(30, 112, 200, .03);

        }

        87.5% {

          color: var(--intel-blue);

          text-shadow:
            0 0 4px rgba(30, 112, 200, .10),
            0 0 10px rgba(30, 112, 200, .05);

        }

        100% {

          color: var(--near-black);

          text-shadow: none;

        }

      }

      .hero-wave-headline {
        overflow: visible;
      }

      .wave-word {
        display: inline-block;
        white-space: nowrap;
      }

      .wave-char {

        display: inline-block;

        color: var(--white);
        opacity: 0;

        will-change:
          color,
          text-shadow,
          opacity;

        /*
Reveal:
0.7s per letter
0.08 stagger

Then:
wait

Then:
black + breathe infinite
*/

        animation:

          waveRevealIn .01s linear calc(0.8s + var(--ci)*0.08s) 1 forwards,

          waveReveal 1s ease-out calc(0.8s + var(--ci)*0.08s) 1 forwards,

          breatheGlow 6s ease-in-out calc(4s + var(--ci)*0s) infinite;

      }

      .wave-char-blue {
        display: inline-block;
        color: var(--white);
        opacity: 0;
        will-change: color, text-shadow, opacity;
        animation:
          waveRevealIn .01s linear calc(0.8s + var(--ci)*0.08s) 1 forwards,
          waveRevealBlue 1s ease-out calc(0.8s + var(--ci)*0.08s) 1 forwards,
          breatheGlowBlue 6s ease-in-out calc(4s + var(--ci)*0s) infinite;
      }

      @keyframes waveRevealIn {
        to {
          opacity: 1;
        }
      }


      @keyframes waveRevealBlue {
        0% {
          color: var(--white);
          text-shadow: none;
        }

        35% {
          color: #5BBBFF;
          text-shadow: 0 0 6px rgba(30, 112, 200, .10);
        }

        100% {
          color: var(--intel-blue);
          text-shadow: none;
        }
      }

      @keyframes breatheGlowBlue {

        0%,
        100% {
          color: var(--intel-blue);
          text-shadow: none;
        }

        50% {
          color: var(--intel-blue);
          text-shadow: 0 0 12px rgba(30, 112, 200, 0.25);
        }
      }

      @media (prefers-reduced-motion:reduce) {

        .wave-char {

          animation: none;

          color: var(--near-black);
          opacity: 1;

        }

        .wave-char-blue {

          animation: none;

          color: var(--intel-blue);
          opacity: 1;

        }

      }

      /* ============================================================
           SERVICE HEADING WAVE ANIMATION
           Mirrors the hero waveReveal + breatheGlow system exactly,
           but is scroll/carousel-triggered instead of page-load triggered.
           ============================================================ */

      /* Shared keyframes are already defined above (waveReveal, breatheGlow) */

      .svc-wave-headline {
        overflow: visible;
      }

      .svc-wave-word {
        display: inline-block;
        white-space: nowrap;
      }

      /* em wrapper: strip italic, keep inline-block flow */
      .svc-wave-em {
        font-style: normal;
      }

      .svc-wave-char {
        display: inline-block;
        /* Start invisible — same as hero: color matches dark bg so it's hidden */
        color: var(--near-black);
        will-change: color, text-shadow;
        /* No animation by default — JS adds/removes .svc-wave-run class */
      }

      /* The blue italic chars (Development / Automation / Solutions / Integration) */
      .svc-wave-char--em {
        /* Will animate to and settle at intel-blue via svcWaveRevealBlue */
        color: var(--near-black);
      }

      /* --- Run state (added by JS when slide becomes active) --- */

      /* Regular (dark) chars: white → blue flash → near-black */
      .svc-wave-headline.svc-wave-run .svc-wave-char:not(.svc-wave-char--em) {
        animation:
          waveReveal 1s ease-out calc(0.1s + var(--ci) * 0.07s) 1 forwards,
          breatheGlow 6s ease-in-out calc(1.1s + var(--ci) * 0.07s) infinite;
      }

      /* Blue/em chars: white → blue flash → stay intel-blue + gentle breathe */
      .svc-wave-headline.svc-wave-run .svc-wave-char--em {
        animation:
          svcWaveRevealBlue 1s ease-out calc(0.1s + var(--ci) * 0.07s) 1 forwards,
          svcBreatheBlue 6s ease-in-out calc(1.1s + var(--ci) * 0.07s) infinite;
      }

      @keyframes svcWaveRevealBlue {
        0% {
          color: var(--near-black);
          text-shadow: none;
        }

        35% {
          color: var(--intel-blue);
          text-shadow: 0 0 6px rgba(30, 112, 200, .18);
        }

        100% {
          color: var(--intel-blue);
          text-shadow: none;
        }
      }

      @keyframes svcBreatheBlue {

        0%,
        50% {
          color: var(--intel-blue);
          text-shadow: none;
        }

        75% {
          color: var(--intel-blue);
          text-shadow:
            0 0 4px rgba(30, 112, 200, .20),
            0 0 12px rgba(30, 112, 200, .10);
        }

        87.5% {
          color: var(--intel-blue);
          text-shadow:
            0 0 6px rgba(30, 112, 200, .28),
            0 0 16px rgba(30, 112, 200, .14);
        }

        100% {
          color: var(--intel-blue);
          text-shadow: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .svc-wave-char {
          animation: none !important;
          color: var(--near-black);
        }

        .svc-wave-char--em {
          animation: none !important;
          color: var(--intel-blue);
        }
      }
    

      /* Force-pause every CSS animation inside an offscreen section.
         !important is required because these animations are declared with
         a wide variety of specificities throughout the file. */
      .gpu-idle,
      .gpu-idle * {
        animation-play-state: paused !important;
      }
html { scroll-behavior: smooth; }