/* page-specific styles ported from live glow.team/ai */
@media (min-width:992px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b6e"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b5c"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b38"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b4a"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b26"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}}@media (max-width:991px) and (min-width:768px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b6e"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b5c"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b38"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b4a"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b26"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}}@media (max-width:767px) and (min-width:480px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b1e"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}}@media (max-width:479px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="f5d2f019-648d-6163-5491-6e6276ab2b1e"] {-webkit-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 2rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter: blur(7px);opacity:0;}}

html.lenis {
    height: auto;
  }
  .lenis.lenis-smooth {
    scroll-behavior: auto;
  }
  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }

  body.is-open {
    overflow: hidden;
  }

  .lenis.lenis-stopped {
    overflow: hidden;
  }

  html.lenis,
  body.lenis {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  #main-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  @media screen and (max-width: 767px) {
    .nav_menu.is-open {
      transform: translateY(0);
    }
  }

  .icon-button-2 {
    position: absolute;
    bottom: 37px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 2;
    padding: 0;
  }

  .icon-button-2.animate {
    transform: scale(1.2);
  }

  .icon-button-2 img {
    width: 40px;
    height: 40px;
    display: block;
    pointer-events: none;
  }

  .progress-bar-container-2 {
    position: absolute;
    bottom: 8px;
    left: 12px;
    right: 12px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
    z-index: 1;
  }

  .progress-bar-2 {
    height: 100%;
    width: 0%;
    background-color: white;
    border-radius: 3px;
    transition: width 0.1s linear;
  }

  .sliding-number {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    font-size: 2rem;
  }

  .digit-strip {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .digit-wrapper {
    position: relative;
    height: 1em;
    overflow: hidden;
    display: inline-block;
    width: 0.65em;
  }

  .digit-strip span {
    height: 1em;
    line-height: 1em;
    text-align: center;
  }

  .fade-in {
    animation: fadeIn 0.3s ease forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .stars-svg path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.3s ease;
  }

  .navbar_link.is-icon:hover .stars-svg path {
    animation: star-pop 0.8s ease forwards;
  }

  .navbar_link.is-icon:hover .stars-svg path:nth-of-type(1) {
    animation-delay: 0s;
  }

  .navbar_link.is-icon:hover .stars-svg path:nth-of-type(2) {
    animation-delay: 0.1s;
  }

  .navbar_link.is-icon:hover .stars-svg path:nth-of-type(3) {
    animation-delay: 0.2s;
  }

  @keyframes star-pop {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.6);
    }
    100% {
      transform: scale(1);
    }
  }

  .modal-form-checkbox-item:checked + .modal-form-checkbox-label {
    background-color: #020101;
    color: #fff;
  }

  .button-invert.is-large .white-type {
    height: 3rem;
  }

  .modal-form-input-holder.field-error input {
    border-color: #F04438;
  }
  .modal-form-input-holder.field-error .modal-form-alert-icon,
  .modal-form-input-holder.field-error .modal-form-alert-text {
    display: block;
  }

#clients .splide__slide {
    width: max-content !important;
  }
  .carousel-row.active {
    opacity: 1;
    pointer-events: auto;
  }

  .carousel-logo {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(10px);
    transition: all 1s ease;
  }

  .carousel-logo.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

/* Make text look crisper and more legible in all browsers */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Focus state style for keyboard navigation for the focusable elements */
  *[tabindex]:focus-visible,
  input[type='file']:focus-visible {
    outline: 0.125rem solid #4d65ff;
    outline-offset: 0.125rem;
  }

  /* Set color style to inherit */
  .inherit-color * {
    color: inherit;
  }

  /* Get rid of top margin on first element in any rich text element */
  .w-richtext > :not(div):first-child,
  .w-richtext > div:first-child > :first-child {
    margin-top: 0 !important;
  }

  /* Get rid of bottom margin on last element in any rich text element */
  .w-richtext > :last-child,
  .w-richtext ol li:last-child,
  .w-richtext ul li:last-child {
    margin-bottom: 0 !important;
  }

  .w-richtext::before,
  .w-richtext::after {
    all: unset;
  }

  /* Make sure containers never lose their center alignment */
  .container-medium,
  .container-small,
  .container-large {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* 
  Make the following elements inherit typography styles from the parent and not have hardcoded values. 
  Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
  Uncomment this CSS to use it in the project. Leave this message for future hand-off.
  */
  /*
  a,
  .w-input,
  .w-select,
  .w-tab-link,
  .w-nav-link,
  .w-dropdown-btn,
  .w-dropdown-toggle,
  .w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
  }
  */

  /* Apply "..." after 3 lines of text */
  .text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /* Apply "..." after 2 lines of text */
  .text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* These classes are never overwritten */
  .hide {
    display: none !important;
  }

  @media screen and (max-width: 991px) {
    .hide,
    .hide-tablet {
      display: none !important;
    }
  }

  @media screen and (max-width: 767px) {
    .hide-mobile-landscape {
      display: none !important;
    }
  }
  @media screen and (max-width: 479px) {
    .hide-mobile {
      display: none !important;
    }
  }

  .margin-0 {
    margin: 0rem !important;
  }

  .padding-0 {
    padding: 0rem !important;
  }

  .spacing-clean {
    padding: 0rem !important;
    margin: 0rem !important;
  }

  .margin-top {
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-top {
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
  }

  .margin-right {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-right {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
  }

  .margin-bottom {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-bottom {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
  }

  .margin-left {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
  }

  .padding-left {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
  }

  .margin-horizontal {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
  }

  .padding-horizontal {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }

  .margin-vertical {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-vertical {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  html {
    font-size: 1rem;
  }
  @media screen and (max-width: 1440px) {
    html {
      font-size: calc(-0.004999999999999782rem + 1.1166666666666665vw);
    }
  }
  @media screen and (max-width: 960px) {
    html {
      font-size: calc(-1.1102230246251565e-16rem + 1.666666666666667vw);
    }
  }
  @media screen and (max-width: 720px) {
    html {
      font-size: calc(-0.0008298755186720852rem + 2.2240663900414934vw);
    }
  }
  @media screen and (max-width: 479px) {
    html {
      font-size: calc(-0.0020920502092050207rem + 3.3472803347280333vw);
    }
  }
  @media screen and (max-width: 479px) {
    html {
      font-size: calc(-0.0020920502092050207rem + 4.107vw);
    }
  }

  .navbar-submenu {
    display: grid;
    grid-template-rows: 0fr;
  }

  .navbar-submenu.open {
    grid-template-rows: 1fr;
  }

  .navbar-submenu.is-mobile.open {
    display: block;
  }

  .navbar-submenu.is-mobile.open {
    transform: translateY(0);
  }

  .navbar_link.open .navbar_link-icon {
    transform: rotateZ(0);
  }

  .burger_icon-wrap {
    --thickness: 0.025rem;
    --gap: 0.25rem;
    --rotate: 45;
    --width: 100%;
  }
  .is-open .burger-line {
    transform: scaleX(0);
  }
  .burger-line:last-child {
    width: 80%;
  }
  .is-open .burger-line:first-child {
    /*transform: translateY(calc(var(--thickness) + var(--gap))) rotate(calc(var(--rotate) * -1deg));*/
    transform: rotate(45deg) translate(0.25rem, 0.1825rem);
  }
  .is-open .burger-line:last-child {
    width: 100%;
    /*transform: translateY(calc(var(--thickness) * -1 + var(--gap) * -1)) rotate(calc(var(--rotate) * 1deg));*/
    transform: rotate(-45deg) translate(0.25rem, -0.1825rem);
  }

  .case-card .case-card_img {
    scale: 1;
    transition: scale 0.5s ease;
  }

  .case-card:hover .case-card_img {
    scale: 1.1;
  }

  .card_mob-scroll {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    overflow-y: auto;
  }

  .is-gradient {
    background: linear-gradient(90deg, #9003fd 0%, #fcb73c 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-50% - 1.5rem));
    }
  }

  .scroll {
    animation: scroll 30s linear infinite;
  }

  .reverse {
    animation-direction: reverse;
  }

  .marquee-image {
    -webkit-transform: translateZ(0);
  }

  .reveal-button {
    text-decoration: none;
  }

  @media (min-width: 991px) {
    [stagger-link-text] {
      text-shadow: 0px 1em 0px currentColor;
    }
    .invert-button:hover .text-original {
      transform: translateY(-110%);
    }
    .invert-button:hover .text-reveal {
      top: 0;
    }
    .invert-button:hover .hover-bg {
      top: 0;
      border-radius: 0;
    }
  }

  a[text-link-hover] {
    text-decoration: none;
    color: #020101;
    transition: text-decoration 0.2s ease;
  }

  a[text-link-hover]:hover {
    text-decoration: underline !important;
    text-underline-offset: 0.25rem;
  }

  .invert-button.white-type {
    color: #000;
    background: #fff;
  }

  #invert-header-btn.style-reveal {
    background-color: #fff;
    border-color: #fff;
  }

  #invert-header-btn.style-reveal .hover-bg {
    background: #000;
  }

  #invert-header-btn.style-reveal .invert-button {
    border-color: #fff;
  }

  #invert-header-btn.style-reveal .text-original {
    color: #000;
  }

  #invert-header-btn.style-reveal .text-reveal {
    color: #fff;
  }

  .mvp-step_card.is-last {
    box-shadow:
      0 24px 34px 0 rgba(0, 0, 0, 0.15),
      0 4px 4px 0 rgba(0, 0, 0, 0.1);
  }

  .video-wrapper.is-main {
    height: 0;
  }

  svg {
    display: block;
  }

  .bottom-bar.stuck .radial-blur {
    opacity: 0 !important;
  }
  .bottom-bar.stuck .video-container {
    position: absolute;
    transform: translateX(-2rem) !important;
  }
  .bottom-bar.stuck .email-float {
    position: absolute;
    transform: translateX(2rem) !important;
  }

  /*------- Fix hover button on mobile -----------*/
  @media screen and (min-width: 768px) and (hover: none) and (pointer: coarse) {
    .invert-button {
      transition: transform 0.15s ease;
    }

    .invert-button .text-original,
    .invert-button .text-reveal,
    .invert-button .hover-bg {
      transition-duration: 0.15s;
    }

    .invert-button:active {
      transform: scaleX(1.02);
    }

    .invert-button:active .text-original {
      transform: translateY(-110%);
    }

    .invert-button:active .text-reveal {
      top: 0;
    }

    .invert-button:active .hover-bg {
      top: 0;
      border-radius: 0;
    }

    .video-container.stuck {
      transform: translateX(-1rem) !important;
    }
    .email-float.stuck {
      transform: translateX(1rem) !important;
    }
  }

  #works,
  #why-glow {
    scroll-margin-top: 100px;
  }

  .background-video-2::after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    border: 3px solid #fff;
  }
  .navbar.navbar-invert {
    background-color: var(--gray--500);
  }
  [data-wf--navbar-new--variant='dark'].navbar.navbar-invert {
    background-color: var(--base--white);
  }
  [data-wf--mobile-nav--variant='dark'].mobile-nav.navbar-invert {
    background-color: var(--base--white);
  }
  .mobile-nav.navbar-invert {
    background-color: var(--gray--500);
  }
  [data-wf--mobile-nav--variant='dark'].mobile-nav.navbar-invert .button-tg,
  [data-wf--mobile-nav--variant='dark'].mobile-nav.navbar-invert .burger-btn {
    background-color: var(--gray--500);
  }
  .invert-button.is-dark {
    color: var(--base--white);
    background-color: var(--gray--500);
  }
  .button-invert.is-dark {
    border-color: var(--gray--500);
  }
  .invert-button.is-dark .hover-bg {
    background-color: var(--base--white);
  }
  .invert-button.is-dark .text-reveal {
    color: var(--gray--500);
  }

  .invert-button.is-outline {
    background-color: var(--base--white);
    color: var(--gray--500);
  }
  .button-invert.is-outline {
    border-color: var(--base--white);
  }
  .invert-button.is-outline .hover-bg {
    background-color: var(--gray--500);
  }
  .invert-button.is-outline .text-reveal {
    color: var(--base--white);
  }

  .blur-span::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#fff 8%, #fff0);
    transition: opacity 0.4s ease;
  }

  .blur-span::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#000 8%, #0000);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .invert-button.is-dark {
    color: var(--base--white);
    background-color: var(--gray--500);
  }

  .button-invert.is-dark {
    border-color: var(--gray--500);
    background-color: var(--gray--500);
  }

  .invert-button.is-dark .hover-bg {
    background-color: var(--base--white);
  }

  .invert-button.is-dark .text-reveal {
    color: var(--gray--500);
  }

  .invert-button.is-outline {
    background-color: var(--base--white);
    color: var(--gray--500);
  }

  .button-invert.is-outline {
    border-color: var(--base--white);
    background-color: var(--base--white);
  }

  .invert-button.is-outline .hover-bg {
    background-color: var(--gray--500);
  }

  .invert-button.is-outline .text-reveal {
    color: var(--base--white);
  }

  .blur-span::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#fff 8%, #fff0);
    transition: opacity 0.4s ease;
  }

  .blur-span::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#000 8%, #0000);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .blur-span.is-dark::before {
    opacity: 1;
  }

  .blur-span.is-dark::after {
    opacity: 0;
  }

  .blur-span.is-white::before {
    opacity: 1;
  }

  .blur-span.is-white::after {
    opacity: 0;
  }

  .radial-blur::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#0000, #fff);
    transition: opacity 0.4s ease;
  }

  .radial-blur::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#0000, #000);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .radial-blur.is-dark::before {
    opacity: 1;
  }

  .radial-blur.is-dark::after {
    opacity: 0;
  }

  .radial-blur.is-white::before {
    opacity: 0;
  }

  .radial-blur.is-white::after {
    opacity: 1;
  }

  [data-wf--navbar-new--variant='dark'] .blur-span::after {
    background-image: linear-gradient(#000, #0000);
  }

  [data-wf--navbar-new--variant='dark'] .blur-span::before {
    background-image: linear-gradient(#fff, #fff0);
  }

  [data-wf--bottom-bar--variant='dark-page'] .radial-blur::after {
    background-image: linear-gradient(#0000, #000);
  }

  [data-wf--bottom-bar--variant='dark-page'] .radial-blur::before {
    background-image: linear-gradient(#0000, #fff);
  }

  @media screen and (max-width: 479px) {
    .background-video-2::after {
      border-radius: 8px;
    }
  }

  @media screen and (min-width: 480px) {
    .background-video-2::after {
      border-radius: 1rem;
    }
  }

.hero-card-inner.is-last:before {
    content: "";
    display: block;
    position: absolute;
    top: -0.0625rem;
    left: 2rem;
    width: 90%;
    height: 0.0625rem;
    background-color: #020101;
  }

  @media screen and (min-width: 1920px) {
    .hero-card-inner {
      top: 25vh;
    }
  }

  @media screen and (min-width: 490px) {
    .experience-card {
      -webkit-transform: translateZ(0);
      transition: transform 0.25s ease, opacity 0.25s ease;
      will-change: transform, opacity;
      backface-visibility: hidden;
    }
  }

  .experience-card.active .experience-card-bg {
    opacity: 0.64;
  }
  .experience-card-bg{
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
  }

  @supports (-webkit-hyphens: none) {
    .experience-card-text {
      mix-blend-mode: normal;
      color: rgba(255, 255, 255, 0.65);
    }
  }

  .choice-item.active .choice-item-text {
    opacity: 1;
    transform: translateX(1.5rem);
  }

  .choice-item.active .choice-item-line {
    opacity: 1;
  }

  .choice-slide.visible {
    opacity: 1;
  }

  [data-all-section].is-expanded {
    max-height: none;
  }

  .navbar-submenu-link.is-main:where(.w-variant-f3cc41c2-492d-7e5a-2ec4-1ba48cfa2bbe) {
    background: #020101;
  }
  .navbar-submenu-link.is-main:where(.w-variant-f3cc41c2-492d-7e5a-2ec4-1ba48cfa2bbe) .navbar-submenu-link-title {
    color: #fff;
  }

  .swiper.testimonials {
    overflow: visible;
  }
  .swiper.testimonials .swiper-wrapper {
    transition-timing-function: linear !important;
  }

  .options-item:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.5rem;
    left: -2rem;
    width: 0.3125rem;
    height: 0.3125rem;
    background-color: #DEDEDE;
    border-radius: 50%;
  }

  .options-item:first-child:before {
    content: none;
  }


  @media screen and (max-width: 767px) {
    .swiper {
      overflow: visible;
    }
    .options-item:before {
      content: none;
    }

    .choice-item.active .choice-item-text {
      transform: translateX(1rem);
    }
  }

  .splide,
  .splide__track {
    overflow: visible;
  }

  .splide {
    cursor: pointer;
  }

  .splide__slide.is-visible,
  .splide__slide.is-active {
    opacity: 1;
    visibility: visible;
  }

  .splide {
    position: relative;
    visibility: visible !important;
  }

  @media screen and (min-width: 768px) {
    .carousel-row.active {
      opacity: 1;
      pointer-events: auto;
    }

    .carousel-logo {
      opacity: 0;
      transform: translateY(40px);
      filter: blur(10px);
      transition: all 1s ease;
    }

    .carousel-logo.visible {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
    .navbar .button-telegram.is-icon .tg-svg {
      background-color: var(--base--white) !important;
    }
    .navbar .button-telegram.is-icon .arrow {
      color: var(--gray--500) !important;
    }
    .navbar .button-telegram.is-icon:hover .tg-svg {
      background-color: var(--gray--500) !important;
      color: var(--base--white) !important;
    }
    .navbar .button-telegram.is-icon:hover .arrow {
      color: var(--base--white) !important;
    }
    .navbar .button-telegram.is-icon .tg-svg, .navbar .button-telegram.is-icon .arrow {
      transition: all .3s;
    }
  }
  @media screen and (max-width: 375px) {
    .services-img-wrap {
      height: 11rem;
    }
  }

.is-icon {
  	background-size: 180%;
  }
  
  .is-icon:hover,
  .is-icon:focus {
  	background-position: right;
  }

@media (min-width: 991px) {
[stagger-link-text]{
  	text-shadow: 0px 1em 0px var(--base--white); 
  }
}

:root {
    --color-1: 24, 94%, 54%;
    --color-2: 270 100% 63%;
    --color-3: 287, 100%, 42%;
    --color-4: 217, 84%, 50%;
    --color-5: 319, 100%, 59%;
    --speed: 2s;
  }

  @keyframes rainbow {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 200%;
    }
  }

  .cta-gradient {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 5%;
    background: linear-gradient(
      90deg,
      hsl(var(--color-1)),
      hsl(var(--color-5)),
      hsl(var(--color-3)),
      hsl(var(--color-4)),
      hsl(var(--color-2))
    );
    background-size: 200%;
    filter: blur(1.4rem);
    backdrop-filter: blur(1.4rem);
    animation: rainbow var(--speed) infinite linear;
    z-index: -1;
    opacity: 1;
  }

  .button-glow {
    position: relative;
    background-image: linear-gradient(#121213, #121213),
      linear-gradient(#121213 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0)),
      linear-gradient(
        90deg,
        hsl(var(--color-1)),
        hsl(var(--color-5)),
        hsl(var(--color-3)),
        hsl(var(--color-4)),
        hsl(var(--color-2))
      );
    background-origin: border-box;
    background-clip: padding-box, border-box, border-box;
    background-size: 200%;
    border: calc(0.10 * 1rem) solid transparent;
    animation: rainbow var(--speed) infinite linear;
    z-index: 1;
  }
  .button-glow.is-white {
    background-image: linear-gradient(#fff, #fff);
    background-size: 100%;
    animation: rainbow var(--speed) infinite linear;

  }
  .button-glow::before {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 50%;
    width: 80%;
    height: 130%;
    transform: translateX(-60%);
    background: linear-gradient(
      90deg,
      hsl(var(--color-1)),
      hsl(var(--color-5)),
      hsl(var(--color-3)),
      hsl(var(--color-4)),
      hsl(var(--color-2))
    );
    background-size: 200%;
    filter: blur(0.8rem);
    backdrop-filter: blur(0.8rem);
    animation: rainbow var(--speed) infinite linear;
    z-index: 0;
    opacity: 0.2
  }
  .button-glow.is-white::before {
    bottom: -14%;
    left: 0;
    width: 100%;
    transform: translateX(0);
    opacity: 0.7;
    filter: blur(1.4rem);
    backdrop-filter: blur(1.4rem);
    background-size: 200%;
  }
  .button-glow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 0;
    border-radius: 60rem;
  }
  .button-glow.is-white::after {
    background: #fff;
    opacity: 1;
  }
  .button-glow:hover {
    background-color: var(--gray--500);
  }
  .button-glow.is-white:hover {
    background-color: transparent;
  }
  .animate-text .char {
    backface-visibility: hidden;
    transform: translateZ(0);
  }
/* ============================================================================
   /ai — Figma parity pass (frame 5832:12558). ai-page.css is the LAST sheet the
   page loads, so page-scoped corrections belong here rather than in the shared
   about.css / webflow-shared.css exports.
   ========================================================================== */

/* H1 is 56px in Figma (node 5860:6233 measures 641x112 = 2 lines x 56). The export's
   `.heading-style-h1.text-color-white` overrode the 3.5rem base down to 3rem — the
   colour #d9d9d9 in that rule IS correct per Figma, only the size was wrong. */
.dark-page .heading-style-h1.text-color-white { font-size: 3.5rem; }

/* The first hero card was given a 1140/620 box while cards 2-5 use 1140/640. With
   object-fit:cover that cropped ~10px off the top and bottom of a 640-tall source,
   cutting the testimonial's last line and its "Parteek, November 2019" signature.
   Figma 6354:24003 = 640. */
.dark-page .hero-card-inner.rotate-right.first { aspect-ratio: 1140 / 640; }

/* The nav's ghost "Let's Talk" was added after the invert logic, so it never got an
   inverted state. Over a LIGHT section the dark-page nav flips to a white bar
   (nav-gradient.js toggles .navbar-invert) and the ghost stayed white-on-white —
   invisible above the light pre-footer CTA. The `.button-invert` beside it already
   inverts. Lives here, not in about.css, because about.css's own
   `.dark-page .nav-cta-ghost` border wins over a later longhand in the same file. */
.dark-page .navbar.navbar-invert .nav-cta-ghost {
  color: var(--gray--500);
  border: 1px solid rgba(2, 1, 1, 0.22);
}
.dark-page .navbar.navbar-invert .nav-cta-ghost:hover {
  color: var(--base--white);
  background-color: var(--gray--500);
  border-color: var(--gray--500);
}

/* Choice block: the wrapper reserved 125dvh under a 70dvh sticky block, so once the pin
   released there were 567px of empty black — a full screen of nothing. Figma 5860:7175
   keeps the heading→content gap constant at 80px. */
.dark-page .choice-block-wrapper { height: 70dvh; }

/* The awards marquee shipped markup but no animation — webflow.js drove it and we don't
   load it (Rule #0). Two rows, opposite directions, 40s linear. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ai-awards-left  { from { transform: translateX(0); }                       to { transform: translateX(calc(-100% - 1.5rem)); } }
  @keyframes ai-awards-right { from { transform: translateX(calc(-100% - 1.5rem)); }    to { transform: translateX(0); } }
  .dark-page .awards-marquee-row.to-left  { animation: ai-awards-left  40s linear infinite; }
  .dark-page .awards-marquee-row.to-right { animation: ai-awards-right 40s linear infinite; }
}

/* ---------------------------------------------------------------------------
   Figma tracking. Every shared TEXT STYLE in the file declares letterSpacing 0,
   but almost every node on this page overrides it to tracking-[1px]. The node wins:
   auto-width pills measure exactly +1px per character ("Raw tech" 64.4 vs 72,
   "Investor-ready" 100.6 vs 114). Kept in px — 1px is 0.018em at 56 and 0.05em at
   20, so an em conversion would wreck the eyebrows and step numbers.
   ------------------------------------------------------------------------- */
.dark-page .heading-style-h1,
.dark-page .heading-style-h2,
.dark-page .heading-style-h3,
.dark-page .heading-span,
.dark-page .block-quote-s,
.dark-page .quote-span,
.dark-page .services-title,
.dark-page .services-card_heading,
.dark-page .case-card_text,
.dark-page .experience-card-title,
.dark-page .trial-item-number,
.dark-page .trial-item-title,
.dark-page .trial-item-text,
.dark-page .trial-item-tag-text,
.dark-page .pricing_title,
.dark-page .choice-item-text { letter-spacing: 1px; }
.dark-page .text-size-small,
.dark-page .text-size-regular { letter-spacing: 0.01em; }
.dark-page .section_services .options-text { letter-spacing: 1px; text-transform: capitalize; }

/* Reviews is the ONE block Figma leaves at zero tracking (quotes 6501:14088 / 14113,
   author lines 6501:14107 / 14120). Must come after the sweep above. */
.dark-page .testimonials-text,
.dark-page .testimonials-name { letter-spacing: normal; }

/* Figma uses #d9d9d9 for these three section headings and the step numbers, and the
   Base/White token everywhere else. Scoped per-section so it can never reach the
   pre-footer CTA, whose heading is already #020101 on its light card. */
.dark-page .section_experience .heading-style-h2,
.dark-page .section_trial.is-dark .heading-style-h2,
.dark-page .section_choice .heading-style-h2 { color: #d9d9d9; }
.dark-page .trial-item-number { color: #d9d9d9; }

/* Hero intro column: Figma 320px, ours was 360 — it wrapped to 3 lines instead of 4. */
.dark-page .entry-heading .hero-text { max-width: 20rem; }

/* Choice card, Figma 5860:7190 / 7191 / 7192. The caption was #020101 and only ever
   readable because our old slides were light 3D renders; on the Figma photography it
   would vanish. The scrim under it shipped as `display:none` with its gradient ramp
   running the wrong way (fading OUT toward the text instead of into it). */
.dark-page .choice-slides { height: 34.375rem; }
.dark-page .choice-slide { border: 1px solid rgba(255, 255, 255, 0.11); }
.dark-page .choice-text { color: #fff; letter-spacing: 1px; }
.dark-page .choice-blur {
  display: block;
  height: 158px;
  inset: auto 0 0;
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  -webkit-mask-image: linear-gradient(to bottom, #0000 0%, #000 100%);
  mask-image: linear-gradient(to bottom, #0000 0%, #000 100%);
}

/* Reviews card, Figma 6501:14084 / 14088 / 14103. */
.dark-page .testimonials-top.is-updated { border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.07); }
.dark-page .testimonials-text { font-weight: 500; max-width: 35.625rem; }
.dark-page .testimonials-photo { box-sizing: content-box; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 36px; }

/* ---- Services (Figma 7251:14052 / 14055) --------------------------------- */
/* webflow-shared.css adds a SECOND 2rem inside `.services-card.is-column`'s own 2rem,
   so the text column was 233px instead of 298 and "Speech Recognition" broke to 2 lines. */
.dark-page .services-card_heading { padding: 0; }
/* The illustration is a full-bleed 362x221 layer pinned to the card's bottom edge in
   Figma. Ours sat 32px inset in normal flow, so on the taller cards it overflowed the
   fixed card height and got cropped by 6-42px. */
.dark-page .services-card.is-column .services-img-wrap {
  position: absolute; left: 0; right: 0; bottom: 0; height: 13.8125rem; margin-top: 0;
}
/* Hovers that only Webflow's runtime ever drove (Rule #0). */
.dark-page .services-card:hover .services-overlay { opacity: 1; }
.dark-page .services-card:hover .services-img.hover { opacity: 1; }
.dark-page .services-card:hover .services-img.regular { opacity: 0; }
.dark-page .experience-card:hover .experience-card-bg { opacity: 0.64; }

/* ---- From Model to Product (Figma 5860:6464) ----------------------------- */
/* `.trial-block` / `.trial-item-content` are shared with /free-3-day-trial — scoped here,
   never edited at source. The 5 steps had a pitch equal to their own height = no gap. */
.dark-page .section_trial.is-dark .trial-block { row-gap: 5rem; }
.dark-page .section_trial.is-dark .trial-item-content { grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; }

/* ---- Growth (Figma 5860:7198) — icon→title is 24px, not 16 --------------- */
.dark-page .approach-grid.is-large .services-card-icon { margin-bottom: 0.5rem; }

/* ---- Case-card logos (Figma) --------------------------------------------- */
/* Every logo was normalised to 1.85rem tall, which blew Lendflow up 63% and squashed
   JUCR. Figma gives each its natural box; the shipped SVGs already carry those viewBoxes,
   so setting width only keeps them crisp (height drift <= 0.88px). */
.dark-page .section_case-studies .logo-case,
.dark-page .section_case-studies .logo-case.is-big { height: auto; max-width: none; width: auto; }
.dark-page .section_case-studies .logo-case[src*="welcome-logo"] { width: 116px; }
.dark-page .section_case-studies .logo-case[src*="dropcall-logo"] { width: 119.34px; }
.dark-page .section_case-studies .logo-case[src*="lendflow-logo"] { width: 116px; }
.dark-page .section_case-studies .logo-case[src*="jucr-logo"] { width: 132px; }
.dark-page .section_case-studies .logo-case[src*="bookme-logo"] { width: 179.48px; }

/* ---- Awards edge masks + eyebrow (Figma 5860:7421 / 7425) ---------------- */
.dark-page .logo_container { gap: 1rem; }
.dark-page .awards-gradient-left,
.dark-page .awards-gradient-right { height: 981px; top: 0; filter: blur(60px); }

/* ---- Nav dropdown chevrons were #5F5F5F on #201F1F = 2.55:1 -------------- */
.dark-page .navbar_link .navbar_link-icon { color: rgba(255, 255, 255, 0.6); }

/* ---- Mobile: the services row was an IX2 drag slider, so 5 of 6 cards were
   unreachable (2297px row inside a 358px box, clipped without scroll). Same fix
   already shipped for `.team-list-wrapper` on /about-us (DEC-0039). No scroll-snap:
   Lenis + snap + the 0.8px card/container mismatch is a known jitter source. ---- */
@media screen and (max-width: 767px) {
  .dark-page .services-block {
    width: 100vw; max-width: 100vw;
    margin-left: -0.93rem; margin-right: -0.93rem;
    padding-left: 0.93rem; padding-right: 0.93rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .dark-page .services-block::-webkit-scrollbar { display: none; }
  .dark-page .services-card.is-column { flex: 0 0 auto; }
  .dark-page .services-card.is-column:last-child { margin-right: 0; }
}

/* No-JS: the hero ships inline opacity:0 + blur, so without JS /ai is a black screen. */
@media (scripting: none) {
  .dark-page .hero-card_wr,
  .dark-page .section_experience .heading-style-h2 {
    opacity: 1 !important; filter: none !important; transform: none !important;
  }
}

/* ---- Pre-footer CTA (Figma 5832:13491 / 13492) ---------------------------
   AboutCta renders on ~138 URLs, so every rule here is .dark-page-scoped and the shared
   declarations in about.css are left alone. Our card shipped full-bleed at 1008 tall with
   the footer starting 24px ABOVE its bottom edge (the last 24px clipped by
   main-wrapper's overflow). Figma insets it 24px and puts 64px of black underneath. */
.dark-page .section_cta-wrapper { background: #020101; padding: 0 24px 64px; }
.dark-page .section_cta {
  background-color: #f7f7f7; border-radius: 12px; height: 872px;
  padding: 0 16px 16px; justify-content: center;
}
.dark-page .section_cta .padding-global.padding-section-cta { padding-top: 16px; padding-bottom: 0; }
.dark-page .cta_content { grid-row-gap: 464px; row-gap: 464px; }
.dark-page .cta_heading { max-width: 908px; }
.dark-page .section_cta .button-glow.is-white {
  width: 250px; height: 51px; padding: 10px 32px; border-radius: 66px; border-color: #fff;
}
.dark-page .section_cta .glow-text { letter-spacing: 0.14px; }
/* WEBFLOW_PORT_RULES #2: `.w-inline-block` forces display:block while align/justify are
   live, so the label only centred by symmetric padding. */
.dark-page .button-glow.w-inline-block { display: flex; }

/* Rule #0 — dead Webflow IX2 interaction, recreated in CSS.
   On ≤767px `.approach-grid` is clamped (about.css: max-height 40.125rem + overflow
   hidden), which hides three of the six "How we help you grow" cards behind the fade.
   Webflow's runtime lifted that clamp when "Show More Services" was clicked; our port
   only added an `is-all-open` class that had NO stylesheet rule anywhere, so the cards
   stayed clipped — and because the button hides itself on click, there was no way back. */
@media screen and (max-width: 767px) {
  .approach-grid.is-all-open { max-height: none; overflow: visible; }
}

/* "Why AI Teams Choose Us" — centre the pinned block in the viewport.
   The section was 1064px tall in a 900px viewport, so the pin had nothing to centre: the
   JS start (main.js, `free/2` clamped to the 66px navbar) bottomed out at 66 and the row
   hung 230px past the fold. Making the section exactly the height left under the navbar,
   with its own vertical padding dropped, gives the content room to sit dead centre — and
   the existing pin maths then resolves to that same 66px offset by itself. */
@media (min-width: 768px) {
  /* The pin lands the section at y=66 (main.js clamps its start to the navbar), so a section
     that simply fills the space below the navbar centres its content 33px BELOW the middle of
     the screen. The extra 66px of bottom padding pushes it back up by exactly half of that, so
     the content's midpoint sits on the screen's midpoint. */
  .dark-page .section_choice {
    height: calc(100dvh - 66px);
    padding-bottom: 66px;
    display: flex;
    align-items: center;
  }
  .dark-page .section_choice .padding-global { padding-top: 0; padding-bottom: 0; width: 100%; }
  /* Webflow's sticky offset inside a pinned, non-scrolling section only pushed it off-centre. */
  .dark-page .section_choice .choice-block { position: relative; top: 0; }
  /* The card is a square driven by the column width (550 = half of the 1140 container), so
     it stays 550x550 no matter how tall the row is — which left the heading sitting 4px off
     the navbar with no air anywhere. Shrinking the square is the only real lever: it keeps
     its 1:1 ratio, hugs the layout's right edge, and never drops below 360 so it still reads
     as the hero of the row. 460px of chrome = heading 112 + its 80px gap + ~134 of air top
     and bottom. */
  .dark-page .section_choice .choice-right { align-items: flex-end; }
  .dark-page .section_choice .choice-slides { width: clamp(360px, calc(100dvh - 460px), 100%); }
  .dark-page .choice-block-wrapper,
  .dark-page .section_choice .choice-block { height: min(70dvh, calc(100dvh - 460px)); }
}

/* Awards marquee, left belt. `.to-right` carries Webflow's `justify-content: flex-end`, which
   with `overflow: hidden` pushes the overflow past the container's LEFT edge where it is
   clipped and unreachable — measured scrollWidth 1840 (the container's own width) against
   6168 on the working right belt. So five of its six cards had nowhere to be and the belt
   animated an empty strip. Laying it out from the start makes the overflow spill right, the
   way the other belt already does; the two still travel in opposite directions because their
   keyframes run opposite ways. `flex: none` keeps all three rows at their natural 2040px so
   the -(100% + gap) step lands exactly one row on, seamlessly. */
.dark-page .awards-marquee.to-right { justify-content: flex-start; }
.dark-page .awards-marquee-row { flex: none; }

/* Pricing card (Figma 5832:13468), measured off the exported pixels rather than by eye.
   The card's stroke there is #232627 — all but invisible on black; ours shipped the light-page
   #dedede, which drew a bright rectangle around it. The button is a plain white pill: across
   its edge Figma goes straight from 2,1,1 to 255,255,255, while ours nested two 1px borders
   (white on the .button-invert wrapper, black on the .invert-button inside) and read as a
   double ring — 248,26,243 across three pixels. Borders go transparent rather than removed so
   the pill keeps its exact size and the shared hover sweep is untouched. */
.dark-page .pricing_card { border-color: #232627; }
.dark-page .pricing_card .button-invert,
.dark-page .pricing_card .invert-button { border-color: transparent; }

/* Pre-footer CTA (Figma 5832:13491). The ported markup carries the button twice — Webflow's
   light/dark pair. Every light page hides `.is-white` and shows the plain one; the dark page
   was given `.is-white` back in an earlier wave but the plain one was never hidden, so BOTH
   rendered. `.cta_actions` is `display: contents`, so the column's 464px gap fell between them
   as well: content came to 224 + 464 + 51 + 464 + 52 = 1255px inside an 872px card, pushing
   the real heading 219px above the card's top edge and off screen. Hiding the duplicate brings
   it to 224 + 464 + 51 = 739 and lands the button at y=750, which is where Figma has it. */
.dark-page .section_cta .button-glow:not(.is-white) { display: none; }

/* The label rendered on two lines even though the string is only 152px wide inside a 184px
   box. GSAP SplitText (main.js, `type: "lines, chars"`) bakes the wrap it measures into
   permanent line divs, and it runs before the async webfont has landed (DEC-0027) — the
   fallback face is wider, overflows, and the two-line split is frozen in even after the real
   font arrives. Refusing the wrap means SplitText can only ever measure one line. */
.dark-page .section_cta .button-glow .glow-text { white-space: nowrap; }

/* With the wrap refused, the label sits at 183px (179 + 28 letter-spacings) inside the 186px
   left by 32px padding — 1.5px a side, and GSAP's line mask (`mask: "lines"` puts overflow:
   clip on the line div) shaves the last glyph. Figma reaches the same 183px text because its
   face renders narrower; ours needs the room taken out of the padding instead. The pill stays
   250x51, which is what Figma specifies. */
.dark-page .section_cta .button-glow.is-white { padding-left: 26px; padding-right: 26px; }

/* The two belts translate 36 cards continuously, each inside a rotateY(40deg) 3D context.
   Fixing the left belt tripled what it actually paints (2 visible cards -> 6), so promote the
   animated rows to their own compositor layers instead of repainting them every frame. */
@media (prefers-reduced-motion: no-preference) {
  .dark-page .awards-marquee-row { will-change: transform; }
}

/* Reveal flicker guard — see the inline script in AiLayout's head. Holds every element that
   main.js is about to animate at its from-state from the very first paint, so it cannot be
   painted solid and then snapped to 0. The two exceptions mirror the skips in main.js: the
   bottom-bar chrome never crosses a scroll trigger, and .item-logo reveals on hover, so
   neither is ever animated back to visible and neither may be hidden here. */
html.reveal-pending [data-w-id] { opacity: 0; }
html.reveal-pending .bottom-bar [data-w-id],
html.reveal-pending .item-logo,
html.reveal-pending .item-logo [data-w-id] { opacity: 1; }

/* GSAP SplitText writes `text-align: start` as an INLINE style on the line div it creates,
   so the label sat 11px left of centre (27px of pill on one side, 38 on the other). Inline
   styles only lose to !important. Centred, the label lands 33.5px from each end — which is
   exactly the padding Figma specifies for this button. */
.dark-page .section_cta .button-glow .glow-text,
.dark-page .section_cta .button-glow .glow-text > div { text-align: center !important; }