:root {
          --light_bg: #F6F6F6;
          --bg: #ffff;
          --surface: #ffffff;
          --heading: #111111;
          --text: #3c3c3c;
          --muted: #4f4f4f;
          --label: #757575;

          --underline: rgba(17, 17, 17, .72);

          --border: rgba(0, 0, 0, 0.04);
          --pop-border: rgba(0, 0, 0, 0.08);
          --faq-border: rgba(161, 0, 0, 0.08);

          --shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
          --pop-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);

          --img-placeholder: #dddddd;

          --radius-card: 16px;
          --radius-img: 12px;
          --radius: 18px;

          --cta-bg: #020702;
          --cta-text: #f7f7f7;
          --cta-chip: #171d16;

          --line: #e7e7e7;
          --green: #10cc58;
        }

        [data-theme="dark"] {
          --bg: #121212;
          --light_bg: #181818;
          --surface: #1c1c1c;
          --heading: #f5f5f5;
          --text: #d5d5d5;
          --muted: #c8c8c8;
          --label: #aaaaaa;

          --underline: rgba(245, 245, 245, .72);

          --border: rgba(255, 255, 255, 0.06);
          --pop-border: rgba(255, 255, 255, 0.08);
          --faq-border: rgba(255, 255, 255, 0.10);

          --shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
          --pop-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);

          --img-placeholder: #2a2a2a;

          --cta-bg: #040804;
          --cta-text: #f5f5f5;
          --cta-chip: #1d241d;

          --line: rgba(255, 255, 255, 0.08);
          --green: #04ce4e;
        }


        * {
          box-sizing: border-box;
        }

        html {
          scroll-behavior: smooth;
        }

        body {
          margin: 0;
          font-family: Arial, Helvetica, sans-serif;
          background: var(--bg);
          color: var(--text);
          overflow-x: hidden !important;
          transition: background-color .35s ease, color .35s ease;
        }

        a {
          text-decoration: none;
        }

        /* ======= NAVBAR SESSION START  ======== */
        .lg-navbar {
          position: relative;
          z-index: 9999;
          background: color-mix(in srgb, var(--surface) 72%, transparent);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          /* border-bottom: 1px solid var(--line); */
          transition: background-color .35s ease, border-color .35s ease;
        }

        .nav-shell {
          max-width: 1440px;
          margin: 0 auto;
          padding: 0 26px;
        }

        .lg-navbar .navbar {
          min-height: 82px;
          padding: 0;
        }

        .lg-brand {
          display: inline-flex;
          align-items: center;
          color: var(--heading);
          font-size: 24px;
          font-weight: 600;
          letter-spacing: .8px;
          line-height: 1;
          white-space: nowrap;
          transition: .25s ease;
        }

        .lg-brand:hover {
          color: var(--heading);
          transform: translateY(-1px);
        }

        .lg-desktop-wrap {
          width: 100%;
          min-height: 82px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
        }

        .lg-left-zone,
        .lg-right-zone {
          flex: 1 1 0;
          display: flex;
          align-items: center;
        }

        .lg-left-zone {
          justify-content: flex-start;
        }

        .lg-right-zone {
          justify-content: flex-end;
        }

        .lg-center-logo {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }

        .lg-navbar .navbar-nav {
          gap: 4px;
        }

        .lg-navbar .nav-link {
          position: relative;
          color: var(--muted);
          font-size: 13px;
          font-weight: 600;
          padding: 10px 12px !important;
          transition: .28s ease;
        }

        .lg-navbar .nav-link:hover,
        .lg-navbar .nav-link.show {
          color: var(--heading);
        }

        .lg-navbar .nav-link::before {
          content: "";
          position: absolute;
          left: 12px;
          right: 12px;
          bottom: 6px;
          height: 1px;
          background: var(--underline);
          transform: scaleX(0);
          transform-origin: left;
          transition: transform .28s ease;
        }

        .lg-navbar .nav-link:hover::before,
        .lg-navbar .nav-link.show::before {
          transform: scaleX(1);
        }

        .lg-navbar .nav-link.dropdown-toggle::after {
          border: none;
          content: "\f107";
          font-family: "Font Awesome 6 Free";
          font-weight: 900;
          font-size: 10px;
          margin-left: 7px;
          vertical-align: middle;
          position: relative;
          top: -1px;
        }

        .lg-navbar .dropdown-menu {
          margin-top: 14px;
          min-width: 220px;
          border: 1px solid var(--pop-border);
          border-radius: 18px;
          padding: 12px;
          background: var(--surface);
          box-shadow: var(--pop-shadow);
        }

        .lg-navbar .dropdown-item {
          color: var(--heading);
          font-size: 13px;
          font-weight: 500;
          padding: 11px 13px;
          border-radius: 12px;
          transition: .24s ease;
        }

        .lg-navbar .dropdown-item:hover {
          background: var(--border);
          color: var(--heading);
        }

        .lg-right-inner {
          display: flex;
          align-items: center;
          gap: 14px;
        }

        .lang-drop .dropdown-toggle {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          min-height: 42px;
          padding: 0 14px;
          border-radius: 999px;
          border: 1px solid var(--line);
          color: var(--heading);
          font-size: 13px;
          font-weight: 600;
          background: transparent;
          transition: .28s ease;
        }

        .lang-drop .dropdown-toggle:hover {
          background: var(--border);
          color: var(--heading);
        }

        .lang-drop .dropdown-toggle::after {
          margin-left: 2px;
        }

        .lg-demo-btn {
          position: relative;
          isolation: isolate;
          overflow: hidden;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 44px;
          padding: 10px 18px;
          border-radius: 999px;
          border: 1px solid transparent;
          font-size: 13px;
          font-weight: 700;
          line-height: 1;
          background: var(--cta-bg);
          color: var(--cta-text);
          transition: transform .28s ease, color .28s ease;
        }

        .lg-demo-btn::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: -1;
          transform: translateY(105%);
          border-radius: inherit;
          background: linear-gradient(180deg, #2a2a2a, #000);
          transition: transform .35s ease;
        }

        .lg-demo-btn:hover {
          transform: translateY(-2px);
          color: var(--cta-text);
        }

        .lg-demo-btn:hover::before {
          transform: translateY(0);
        }

        .theme-toggle {
          position: relative;
          width: 62px;
          height: 38px;
          border: 1px solid var(--line);
          border-radius: 999px;
          background: var(--surface);
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
          cursor: pointer;
          transition: .35s ease;
          box-shadow: var(--shadow);
          color: var(--heading);
          flex-shrink: 0;
        }

        .theme-toggle:hover {
          transform: translateY(-1px);
        }

        .theme-toggle i {
          font-size: 13px;
          position: relative;
          z-index: 2;
          transition: color .35s ease, opacity .35s ease;
        }

        .theme-toggle .fa-sun {
          color: #f4b400;
          opacity: 1;
        }

        .theme-toggle .fa-moon {
          color: #6f7cff;
          opacity: .65;
        }

        .theme-toggle-ball {
          position: absolute;
          top: 3px;
          left: 3px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background: var(--heading);
          transition: transform .35s ease, background-color .35s ease;
          z-index: 1;
        }

        [data-theme="dark"] .theme-toggle-ball {
          transform: translateX(24px);
        }

        [data-theme="dark"] .theme-toggle .fa-sun {
          opacity: .55;
        }

        [data-theme="dark"] .theme-toggle .fa-moon {
          opacity: 1;
        }

        .lg-toggler {
          width: 46px;
          height: 46px;
          border: none;
          outline: none;
          box-shadow: none !important;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: var(--surface);
          color: var(--heading);
          transition: .28s ease;
        }

        .lg-toggler:hover {
          transform: rotate(90deg);
        }

        .lg-toggler i {
          font-size: 18px;
        }

        .lg-mobile-top {
          display: none;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          min-height: 78px;
          width: 100%;
        }

        .lg-mobile-brand-wrap {
          flex: 1;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }

        .lg-mobile-right {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .lg-mobile-panel {
          display: none;
        }

        .theme-mobile-wrap {
          display: none;
        }

        /* ======= NAVBAR SESSION END  ======== */

        /* ======= HERO SESSION START  ======== */
        .fleet-hero {
          position: relative;
          overflow: hidden;
          background: var(--bg);
        }

        .fleet-hero::before {
          content: "";
          position: absolute;
          width: 540px;
          height: 540px;
          border-radius: 50%;
          opacity: .10;
          top: -220px;
          left: -80px;
          pointer-events: none;
        }

        .fleet-hero-content {
          padding: 56px 0 0;
          position: relative;
          z-index: 2;
        }

        .fleet-hero-text {
          max-width: 980px;
          margin: 0 auto;
        }

        .fleet-hero-title {
          margin: 0;
          color: var(--heading);
          font-size: clamp(2.8rem, 7vw, 6.2rem);
          line-height: .92;
          font-weight: 700;
          letter-spacing: -2px;
          min-height: 1.9em;
        }

        .fleet-hero-title .cursor {
          display: inline-block;
          width: 1ch;
          animation: blink .8s steps(1) infinite;
        }

        @keyframes blink {
          50% {
            opacity: 0;
          }
        }

        .fleet-hero-subtitle {
          max-width: 560px;
          margin: 28px auto 0;
          color: var(--muted);
          font-size: clamp(1rem, 1.9vw, 1.22rem);
          line-height: 1.55;
          font-weight: 400;
          opacity: 0;
          transform: translateY(26px);
        }

        .fleet-hero-image-wrap {
          width: 100%;
          margin-top: 72px;
          overflow: hidden;
        }

        .fleet-hero-image {
          width: 100%;
          height: clamp(320px, 48vw, 760px);
          object-fit: cover;
          object-position: center center;
          display: block;
          clip-path: circle(2% at 50% 50%);
          transform: scale(1.12);
          will-change: clip-path, transform;
        }

        /* =========================
       MOBILE
    ========================= */
        @media (max-width: 991.98px) {
          .nav-shell {
            padding: 0 16px;
          }

          .lg-desktop-wrap,
          .lg-left-zone,
          .lg-right-zone,
          .lg-center-logo {
            display: none !important;
          }

          .lg-mobile-top {
            display: flex;
          }

          .lg-mobile-top .lg-toggler {
            order: 2;
          }

          .lg-navbar .navbar-collapse {
            padding-top: 0;
          }

          .lg-mobile-panel {
            display: block;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 22px;
            box-shadow: var(--shadow);
            padding: 16px 16px 18px;
            margin: 0 0 16px;
          }

          .lg-mobile-panel .navbar-nav {
            gap: 0;
          }

          .lg-mobile-panel .nav-item {
            border-bottom: 1px solid var(--line);
          }

          .lg-mobile-panel .nav-item:last-child {
            border-bottom: none;
          }

          .lg-mobile-panel .nav-link {
            font-size: 15px;
            font-weight: 600;
            color: var(--heading);
            padding: 14px 4px !important;
          }

          .lg-mobile-panel .nav-link::before {
            display: none;
          }

          .lg-mobile-panel .dropdown-menu {
            position: static !important;
            transform: none !important;
            box-shadow: none;
            margin: 0 0 12px;
            border-radius: 14px;
            border: 1px solid var(--line);
            background: var(--surface);
          }

          .lg-mobile-actions {
            padding-top: 14px;
            display: flex;
            flex-direction: column;
            gap: 12px;
          }

          .lg-mobile-actions .lang-drop .dropdown-toggle,
          .lg-mobile-actions .lg-demo-btn {
            width: 100%;
            justify-content: center;
          }

          .theme-mobile-wrap {
            display: flex;
          }

          .fleet-hero-content {
            padding: 38px 0 0;
          }

          .fleet-hero-title {
            letter-spacing: -1.2px;
          }

          .fleet-hero-subtitle {
            margin-top: 20px;
          }

          .fleet-hero-image-wrap {
            margin-top: 48px;
          }

          .fleet-hero-image {
            height: 420px;
          }
        }

        @media (max-width: 767.98px) {
          .fleet-hero-content {
            padding: 30px 0 0;
          }

          .fleet-hero-text {
            max-width: 100%;
            padding: 0 8px;
          }

          .fleet-hero-title {
            font-size: clamp(2.15rem, 11vw, 3.9rem);
            line-height: .96;
            letter-spacing: -1px;
            min-height: 2.2em;
          }

          .fleet-hero-subtitle {
            margin-top: 16px;
            font-size: 1rem;
            max-width: 100%;
          }

          .fleet-hero-image-wrap {
            margin-top: 34px;
          }

          .fleet-hero-image {
            height: 300px;
          }
        }

        @media (max-width: 575.98px) {
          .lg-brand {
            font-size: 20px;
          }

          .lg-mobile-panel {
            border-radius: 18px;
            padding: 14px 14px 16px;
          }

          .fleet-hero-title {
            font-size: clamp(2rem, 11.5vw, 3rem);
          }

          .fleet-hero-subtitle {
            font-size: .96rem;
          }

          .fleet-hero-image {
            height: 250px;
          }

          .theme-toggle {
            width: 58px;
            height: 36px;
          }

          .theme-toggle-ball {
            width: 28px;
            height: 28px;
          }

          [data-theme="dark"] .theme-toggle-ball {
            transform: translateX(22px);
          }
        }

        /* ======= HERO SESSION END  ======== */

        /* =======  BUSINESS SESSION START  ======== */
        .business-section {
          padding: 90px 0 100px;
          background: var(--light_bg);
        }

        .section-head {
          text-align: center;
          max-width: 720px;
          margin: 0 auto 42px;
        }

        .section-title {
          margin: 0 0 10px;
          font-size: clamp(2rem, 4vw, 3.2rem);
          font-weight: 800;
          letter-spacing: -1.5px;
          color: var(--heading);
        }

        .section-subtitle {
          margin: 0;
          font-size: 0.98rem;
          line-height: 1.5;
          color: var(--muted);
        }

        .business-card {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--radius-card);
          box-shadow: var(--shadow);
          padding: 22px 20px 26px;
          max-width: 300px;
          margin: 0 auto;
          min-height: 250px;
          transition: all .3s ease;
        }

        .business-card:hover {
          transform: translateY(-6px);
        }

        .card-label {
          display: block;
          font-size: 0.76rem;
          color: var(--label);
          margin-bottom: 40px;
          font-weight: 500;
        }

        .card-number {
          margin: 0 0 4px;
          font-size: 2.6rem;
          font-weight: 800;
          color: var(--heading);
        }

        .card-heading {
          margin: 0 0 14px;
          font-size: 1.25rem;
          font-weight: 600;
          color: var(--heading);
        }

        .card-text {
          margin: 0;
          font-size: 0.9rem;
          line-height: 1.4;
          color: var(--text);
        }

        /* =======  BUSINESS SESSION END  ======== */

        /* =======  INTERACTIVE SESSION START  ======== */
        .interactive-text-section {
          background: var(--bg);
          padding: 88px 0 76px;
        }

        .interactive-text-wrap {
          max-width: 1200px;
          margin: 0 auto;
          position: relative;
          overflow: visible !important;
          z-index: 1;
        }

        .interactive-text {
          margin: 0 auto;
          max-width: 720px;
          font-size: clamp(1.9rem, 2.8vw, 2.8rem);
          line-height: 1.36;
          font-weight: 400;
          letter-spacing: -0.55px;
          color: var(--heading);
          position: relative;
          overflow: visible !important;
          z-index: 1;
        }

        .interactive-term {
          position: relative;
          display: inline-flex;
          align-items: center;
          color: inherit;
          text-decoration: underline;
          text-decoration-thickness: 1.4px;
          text-underline-offset: 4px;
          text-decoration-color: var(--underline);
          vertical-align: baseline;
          overflow: visible !important;
          z-index: 2;
        }

        .interactive-term-label {
          position: relative;
          z-index: 2;
          display: inline-block;
          will-change: transform, opacity;
        }

        .has-pop {
          cursor: pointer;
          border-radius: 3px;
          transition: color .42s cubic-bezier(.22, 1, .36, 1);
        }

        .has-pop::before {
          content: "";
          position: absolute;
          left: -5px;
          right: -5px;
          top: 50%;
          height: .98em;
          transform: translateY(-50%) scaleX(0);
          transform-origin: left center;
          background: #111111;
          border-radius: 3px;
          opacity: 1;
          transition: transform .7s cubic-bezier(.22, 1, .36, 1);
          z-index: 1;
          will-change: transform;
        }

        [data-theme="dark"] .has-pop::before {
          background: #f3f3f3;
        }

        .has-pop:hover::before,
        .has-pop:focus-visible::before {
          transform: translateY(-50%) scaleX(1);
        }

        .has-pop:hover,
        .has-pop:focus-visible {
          color: #ffffff;
          text-decoration-color: transparent;
          outline: none;
        }

        [data-theme="dark"] .has-pop:hover,
        [data-theme="dark"] .has-pop:focus-visible {
          color: #111111;
        }

        .interactive-term.has-pop:hover,
        .interactive-term.has-pop:focus-visible,
        .interactive-term.has-pop:focus-within {
          z-index: 9999;
        }

        .interactive-pop {
          position: absolute;
          top: calc(100% + 5px);
          left: 0;
          width: 186px;
          background: var(--surface);
          border: 1px solid var(--pop-border);
          box-shadow: var(--pop-shadow);
          border-radius: 8px;
          overflow: hidden;
          opacity: 0;
          visibility: hidden;
          transform: translateY(16px) scale(.97);
          transition:
            opacity .45s ease,
            transform .55s cubic-bezier(.22, 1, .36, 1),
            visibility .45s ease;
          z-index: 10000;
          pointer-events: none;
          will-change: transform, opacity;
        }

        .interactive-pop--top-right {
          left: auto;
          right: 0;
          top: auto;
          bottom: calc(100% + 10px);
          transform: translateY(-14px) scale(.97);
        }

        .has-pop:hover .interactive-pop,
        .has-pop:focus-visible .interactive-pop,
        .has-pop:focus-within .interactive-pop {
          opacity: 1;
          visibility: visible;
          transform: translateY(0) scale(1);
        }

        .has-pop:hover .interactive-pop--top-right,
        .has-pop:focus-visible .interactive-pop--top-right,
        .has-pop:focus-within .interactive-pop--top-right {
          transform: translateY(0) scale(1);
        }

        .interactive-pop img {
          width: 100%;
          height: 92px;
          object-fit: cover;
          display: block;
        }

        .interactive-pop-body {
          display: block;
          padding: 9px 10px 10px;
        }

        .interactive-pop-text {
          display: block;
          font-size: 14px;
          line-height: 1.28;
          color: var(--text);
          margin-bottom: 10px;
        }

        .interactive-pop-link {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          line-height: 1;
          color: var(--heading);
        }

        /* AOS stacking fix */
        [data-aos] {
          overflow: visible !important;
        }

        .interactive-term-label[data-aos] {
          transition: transform 0.3s ease, opacity 0.3s ease;
        }

        @media (max-width: 767.98px) {
          .interactive-text-section {
            padding: 60px 0 52px;
          }

          .interactive-text {
            max-width: 100%;
            font-size: clamp(1.2rem, 5vw, 1.6rem);
            line-height: 1.42;
          }

          .interactive-pop {
            width: 168px;
          }

          .interactive-pop--top-right {
            bottom: calc(100% + 8px);
          }
        }

        @media (max-width: 575.98px) {
          .interactive-text {
            font-size: 1.1rem;
          }

          .interactive-pop {
            width: 160px;
          }

          .interactive-pop--top-right {
            right: 0;
            left: auto;
            bottom: calc(100% + 6px);
          }
        }

        /* =======  INTERACTIVE SESSION END ======== */

        /* =======  RESULTS SESSION START  ======== */
        .results-section {
          background: var(--light_bg);
          padding: 90px 0 56px;
        }

        .results-head {
          text-align: center;
          margin-bottom: 36px;
        }

        .results-title {
          margin: 0 0 14px;
          font-size: clamp(2.2rem, 4vw, 4rem);
          line-height: .92;
          font-weight: 700;
          letter-spacing: -1.9px;
          color: var(--heading);
        }

        .results-subtitle {
          margin: 0;
          font-size: 15px;
          line-height: 1.5;
          color: var(--text);
        }

        .results-card {
          background: var(--surface);
          border-radius: var(--radius);
          box-shadow: var(--shadow);
          padding: 34px 34px 22px;
          max-width: 1060px;
          margin: 0 auto;
        }

        .results-quote {
          max-width: 760px;
          margin: 0 0 24px;
          font-size: clamp(1.7rem, 2.2vw, 2.45rem);
          line-height: 1.08;
          font-weight: 400;
          letter-spacing: -0.8px;
          color: var(--heading);
        }

        .brand-text {
          color: var(--green);
        }

        .highlight-text {
          color: #ffffff;
          background: #111111;
          padding: 0 .16em .05em;
          border-radius: 3px;
          -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
        }

        [data-theme="dark"] .highlight-text {
          color: #111111;
          background: #f3f3f3;
        }

        .results-person {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 26px;
        }

        .results-avatar {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          overflow: hidden;
          flex: 0 0 34px;
        }

        .results-avatar img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .results-person-name {
          margin: 0;
          font-size: 13px;
          line-height: 1.1;
          font-weight: 700;
          color: var(--heading);
        }

        .results-person-role {
          margin: 2px 0 0;
          font-size: 11px;
          line-height: 1.2;
          color: var(--muted);
        }

        .results-chart {
          position: relative;
          height: 230px;
          border-top: 1px solid var(--line);
          overflow: visible;
        }

        .results-grid {
          position: absolute;
          inset: 0;
          z-index: 1;
        }

        .results-grid .v-line {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 1px;
          background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.03));
        }

        [data-theme="dark"] .results-grid .v-line {
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
        }

        .results-grid .v1 {
          left: 10%;
        }

        .results-grid .v2 {
          left: 36%;
        }

        .results-grid .v3 {
          left: 62%;
        }

        .results-grid .v4 {
          left: 88%;
        }

        .results-chart svg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          top: -33px;
          z-index: 2;
        }

        .results-line {
          fill: none;
          stroke: var(--green);
          stroke-width: 2.4;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        .results-line.draw-line {
          animation: drawLine 2.2s ease forwards;
        }

        @keyframes drawLine {
          to {
            stroke-dashoffset: 0;
          }
        }

        .results-point-glow {
          fill: rgba(52, 196, 106, 0.16);
        }

        .results-point-ring {
          fill: #ffffff;
          stroke: var(--green);
          stroke-width: 2;
        }

        .results-point-core {
          fill: var(--green);
        }

        .results-point-anim {
          opacity: 0;
          transform-origin: center;
        }

        .results-point-anim.show-point {
          animation: resultsPointPop 0.65s ease forwards;
        }

        @keyframes resultsPointPop {
          0% {
            opacity: 0;
            transform: scale(0.2);
          }

          60% {
            opacity: 1;
            transform: scale(1.12);
          }

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

        .results-right-label,
        .results-final-value,
        .results-months {
          z-index: 3;
        }

        .results-right-label,
        .results-final-value {
          position: absolute;
          right: 0;
          font-size: 24px;
          line-height: 1;
          font-weight: 600;
          letter-spacing: -0.5px;
          user-select: none;
          background: transparent;
        }

        .results-right-label {
          top: 16px;
          color: #b8b8b8;
        }

        .results-final-value {
          bottom: 40px;
          color: var(--green);
        }

        .results-months {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 28px;
        }

        .results-months span {
          position: absolute;
          bottom: 0;
          font-size: 12px;
          color: #9c9c9c;
          transform: translateX(-50%);
          user-select: none;
        }

        .results-months .m1 {
          left: 10%;
        }

        .results-months .m2 {
          left: 36%;
        }

        .results-months .m3 {
          left: 62%;
        }

        .results-months .m4 {
          left: 88%;
        }

        @media (max-width: 991.98px) {
          .results-section {
            padding: 72px 0 44px;
          }

          .results-card {
            padding: 28px 24px 18px;
          }

          .results-quote {
            max-width: 100%;
          }
        }

        @media (max-width: 767.98px) {
          .results-section {
            padding: 56px 0 36px;
          }

          .results-head {
            margin-bottom: 26px;
          }

          .results-title {
            font-size: clamp(2rem, 9vw, 3rem);
            letter-spacing: -1.2px;
          }

          .results-subtitle {
            font-size: 14px;
          }

          .results-card {
            border-radius: 14px;
            padding: 22px 16px 14px;
          }

          .results-quote {
            font-size: clamp(1.2rem, 5.2vw, 1.6rem);
            line-height: 1.12;
          }

          .results-chart {
            height: 170px;
          }

          .results-right-label,
          .results-final-value {
            font-size: 18px;
          }

          .results-months span {
            font-size: 10px;
          }

          .results-chart svg {
            top: -28px;
          }
        }

        /* =======  RESULTS SESSION END  ======== */

        /* =======  LOGO STRIP SESSION START  ======== */
        .logo-strip-section {
          background: var(--light_bg);
          width: 100%;
          padding: 0 0 34px;
        }

        .logo-strip-full {
          width: 100%;
          display: flex;
          justify-content: center;
        }

        .logo-strip-wrap {
          width: 100%;
          max-width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          gap: 8px;
          padding: 0 18px;
        }

        .logo-pill {
          min-width: 132px;
          height: 34px;
          padding: 25px 25px;
          border: 1px solid var(--border) !important;
          border-radius: 4px;
          background: var(--surface);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: var(--muted);
          font-size: 16.5px;
          line-height: 1;
          font-weight: 700;
          letter-spacing: -0.2px;
          white-space: nowrap;
          transition: all .3s ease;
        }

        .logo-pill:hover {
          color: var(--heading);
        }

        .logo-two-line {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          line-height: 0.9;
          gap: 1px;
        }

        .logo-two-line span {
          display: block;
        }

        @media (max-width: 991.98px) {
          /* .results-section {
                padding: 72px 0 44px;
            }

            .results-card {
                padding: 28px 24px 18px;
            }

            .results-quote {
                max-width: 100%;
            } */

          .logo-strip-section {
            padding: 0 0 28px;
          }
        }

        @media (max-width: 575.98px) {
          .logo-strip-section {
            padding: 0 0 24px;
          }

          .logo-strip-wrap {
            justify-content: center;
            padding: 0 12px;
          }

          .logo-pill {
            min-width: 58px;
            height: 28px;
            padding: 0 9px;
            font-size: 9px;
          }
        }

        /* =======  LOGO STRIP SESSION END ======== */

        /* =======  LOGO STRIP SESSION START  ======== */
        .compatible-section {
          background: var(--bg);
          padding: 88px 0;
          overflow: hidden;
        }

        .compatible-container {
          max-width: 1220px;
          margin: 0 auto;
          padding: 0 28px;
        }

        .compatible-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 56px;
        }

        .compatible-left {
          flex: 0 0 50%;
          max-width: 50%;
          padding-right: 10px;
        }

        .compatible-right {
          flex: 0 0 50%;
          max-width: 50%;
          padding-left: 10px;

        }

        .compatible-title {
          font-size: clamp(2.4rem, 4.2vw, 4.1rem);
          line-height: 0.95;
          font-weight: 700;
          letter-spacing: -1.7px;
          color: var(--heading);
          margin: 0 0 34px;
          max-width: 470px;
        }

        .compatible-list {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .compatible-item {
          display: flex;
          align-items: flex-start;
          gap: 14px;
          opacity: 1;
          transform: none;
          transition: transform 0.35s ease;
        }

        .compatible-item:hover {
          transform: translateX(6px);
        }

        .compatible-icon {
          width: 18px;
          min-width: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--heading);
          font-size: 13px;
          margin-top: 4px;
        }

        .compatible-content h4 {
          margin: 0 0 6px;
          font-size: 22px;
          line-height: 1.08;
          font-weight: 600;
          color: var(--heading);
          letter-spacing: -0.3px;
        }

        .compatible-content p {
          margin: 0;
          font-size: 13px;
          line-height: 1.52;
          color: var(--text);
          max-width: 430px;
        }

        .compatible-image-wrap {
          display: flex;
          justify-content: flex-end;
        }

        .compatible-image-box {
          width: 100%;
          max-width: 520px;
          height: 640px;
          border-radius: var(--radius-img);
          overflow: hidden;
          background: var(--img-placeholder);
          position: relative;
          isolation: isolate;
          box-shadow: 0 24px 70px rgba(0, 0, 0, 0.12);
          object-fit: cover;
          object-position: left center;
        }

        /* top to bottom reveal mask */
        .image-reveal-box::before {
          content: "";
          position: absolute;
          inset: 0;
          background: var(--bg);
          z-index: 3;
          transform: translateY(0%);
          transition: transform 3.2s cubic-bezier(0.22, 1, 0.36, 1);
          will-change: transform;
        }

        .image-reveal-box.revealed::before {
          transform: translateY(100%);
        }

        .compatible-image-box img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .compatible-reveal-img {
          transform: scale(1.08) translateY(-20px);
          transition: transform 3.4s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .image-reveal-box.revealed .compatible-reveal-img {
          transform: scale(1) translateY(0);
        }

        /* subtle shine */
        .compatible-image-box::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(to bottom,
              rgba(255, 255, 255, 0.18) 0%,
              rgba(255, 255, 255, 0.05) 18%,
              rgba(255, 255, 255, 0) 38%,
              rgba(255, 255, 255, 0.04) 100%);
          z-index: 2;
          pointer-events: none;
        }

        @media (max-width: 1199.98px) {
          .compatible-row {
            gap: 40px;
          }

          .compatible-left {
            flex: 0 0 47%;
            max-width: 47%;
          }

          .compatible-right {
            flex: 0 0 53%;
            max-width: 53%;
          }

          .compatible-image-box {
            max-width: 560px;
            height: 560px;
          }
        }

        @media (max-width: 991.98px) {
          .compatible-section {
            padding: 72px 0;
          }

          .compatible-row {
            flex-direction: column;
            align-items: stretch;
            gap: 34px;
          }

          .compatible-left,
          .compatible-right {
            flex: 0 0 100%;
            max-width: 100%;
            padding-right: 0;
          }

          .compatible-title {
            max-width: 100%;
            margin-bottom: 28px;
          }

          .compatible-content p {
            max-width: 100%;
          }

          .compatible-image-wrap {
            justify-content: center;
          }

          .compatible-image-box {
            max-width: 100%;
            height: 520px;
          }
        }

        @media (max-width: 767.98px) {
          .compatible-section {
            padding: 60px 0;
          }

          .compatible-container {
            padding: 0 20px;
          }

          .compatible-title {
            font-size: clamp(2rem, 8vw, 3rem);
            line-height: 1;
            letter-spacing: -1px;
          }

          .compatible-list {
            gap: 20px;
          }

          .compatible-content h4 {
            font-size: 20px;
          }

          .compatible-content p {
            font-size: 14px;
            line-height: 1.55;
          }

          .compatible-image-box {
            height: 440px;
          }
        }

        @media (max-width: 575.98px) {
          .compatible-container {
            padding: 0 16px;
          }

          .compatible-row {
            gap: 28px;
          }

          .compatible-item {
            gap: 12px;
          }

          .compatible-content h4 {
            font-size: 18px;
          }

          .compatible-content p {
            font-size: 13px;
          }

          .compatible-image-box {
            height: 360px;
            border-radius: 20px;
          }
        }

        /* =======  LOGO STRIP SESSION END ======== */

        /* =======  NEWS SESSION START  ======== */
        .news-section {
          padding: 88px 0 90px;
          background: var(--light_bg);
        }

        .news-head {
          max-width: 760px;
          margin: 0 auto 34px;
        }

        .news-title {
          margin: 0 0 14px;
          font-size: clamp(2rem, 4vw, 3.3rem);
          line-height: .95;
          font-weight: 800;
          letter-spacing: -1.5px;
          color: var(--heading);
        }

        .news-subtitle {
          margin: 0;
          font-size: 1rem;
          line-height: 1.55;
          color: var(--text);
        }

        .news-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 16px;
          max-width: 1180px;
          margin: 0 auto;
        }

        .news-card {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 14px;
          overflow: hidden;
          box-shadow: var(--shadow);
          min-height: 100%;
          transition: transform .28s ease, box-shadow .28s ease;
        }

        .news-card:hover {
          transform: translateY(-4px);
        }

        .news-card-image {
          height: 260px;
          padding: 8px;
          overflow: hidden;
          background: var(--surface);
        }

        .news-card-image img {
          border-radius: 10px;
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .news-card-body {
          padding: 16px 16px 14px;
        }

        .news-card-title {
          margin: 0 0 10px;
          font-size: 1.65rem;
          line-height: 1.06;
          font-weight: 500;
          letter-spacing: -0.7px;
          color: var(--heading);
        }

        .news-card-text {
          margin: 0 0 18px;
          font-size: .95rem;
          line-height: 1.45;
          color: var(--text);
        }

        .news-card-date {
          display: inline-block;
          font-size: .8rem;
          line-height: 1;
          color: var(--muted);
        }

        .news-extra-card {
          display: none;
        }

        .news-grid.news-expanded .news-extra-card {
          display: block;
        }

        .news-actions {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 12px;
          margin-top: 26px;
          flex-wrap: wrap;
        }

        .news-subscribe-btn,
        .news-show-btn {
          min-width: 120px;
          height: 38px;
          border-radius: 999px;
          padding: 0 18px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;
          line-height: 1;
          font-weight: 500;
          text-decoration: none;
          transition: all .25s ease;
          border: none;
        }

        .news-subscribe-btn {
          background: var(--cta-bg);
          color: var(--cta-text);
        }

        .news-subscribe-btn:hover {
          color: var(--cta-text);
          transform: translateY(-1px);
        }

        .news-show-btn {
          background: var(--surface);
          color: var(--heading);
          border: 1px solid var(--border);
          cursor: pointer;
        }

        .news-show-btn:hover {
          color: var(--heading);
          transform: translateY(-1px);
        }

        @media (max-width: 991.98px) {
          .news-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            max-width: 760px;
          }
        }

        @media (max-width: 767.98px) {
          .news-section {
            padding: 60px 0 64px;
          }

          .news-head {
            margin-bottom: 26px;
          }

          .news-title {
            font-size: clamp(2rem, 9vw, 3rem);
            letter-spacing: -1.2px;
          }

          .news-subtitle {
            font-size: .95rem;
          }

          .news-grid {
            grid-template-columns: 1fr;
            max-width: 420px;
          }

          .news-card-image {
            height: 210px;
          }

          .news-card-title {
            font-size: 1.35rem;
          }

          .news-card-text {
            font-size: .9rem;
          }

          .news-actions {
            margin-top: 22px;
            gap: 10px;
          }

          .news-subscribe-btn,
          .news-show-btn {
            min-width: 110px;
            height: 36px;
            font-size: 12px;
          }
        }

        /* =======  NEWS SESSION END ======== */

        /* =======  FAQS SESSION START  ======== */
        .faq-section {
          background: var(--bg);
          padding: 90px 0;
        }

        .faq-left {
          max-width: 320px;
        }

        .faq-title {
          margin: 0 0 120px;
          font-size: clamp(2.2rem, 4vw, 4rem);
          line-height: 0.92;
          font-weight: 700;
          letter-spacing: -1.8px;
          color: var(--heading);
        }

        .faq-help {
          max-width: 220px;
          font-size: 13px;
          line-height: 1.45;
          color: var(--muted);
          margin: 0;
        }

        .faq-help a {
          color: var(--heading);
          text-decoration: underline;
          text-underline-offset: 3px;
        }

        .faq-wrap {
          max-width: 100%;
        }

        .faq-item {
          border-bottom: 1px solid var(--faq-border);
        }

        .faq-question {
          width: 100%;
          background: transparent;
          border: none;
          padding: 18px 0;
          display: flex;
          align-items: flex-start;
          gap: 16px;
          text-align: left;
          cursor: pointer;
          box-shadow: none;
          color: inherit;
        }

        .faq-question:focus {
          outline: none;
        }

        .faq-icon {
          width: 18px;
          min-width: 18px;
          font-size: 24px;
          line-height: 1;
          font-weight: 300;
          color: var(--heading);
          position: relative;
          top: -1px;
          transition: transform .25s ease;
        }

        .faq-question[aria-expanded="true"] .faq-icon {
          transform: rotate(45deg);
        }

        .faq-question-text {
          flex: 1;
          font-size: clamp(1.05rem, 1.5vw, 1.7rem);
          line-height: 1.2;
          font-weight: 500;
          color: var(--heading);
          letter-spacing: -0.4px;
          padding-right: 15px;
        }

        .faq-answer {
          max-height: 0;
          overflow: hidden;
          transition: max-height .35s ease, padding .35s ease;
          padding: 0 0 0 34px;
        }

        .faq-answer-inner {
          max-width: 500px;
          font-size: 15px;
          line-height: 1.55;
          color: var(--muted);
          padding: 0 0 20px;
        }

        /* =======  FAQS SESSION END  ======== */

        /* =======  CTA SESSION START  ======== */
        .cta-section {
          background: var(--bg);
          padding: 70px 0 90px;
        }

        .cta-box {
          background: var(--cta-bg);
          border-radius: 14px;
          padding: 34px;
          max-width: 1020px;
          margin: 0 auto;
        }

        .cta-title {
          margin: 0 0 22px;
          max-width: 690px;
          font-size: clamp(1.8rem, 2.7vw, 3rem);
          line-height: 1.06;
          font-weight: 400;
          letter-spacing: -0.8px;
          color: var(--cta-text);
        }

        .cta-actions {
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
        }

        .cta-btn,
        .cta-chip {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 38px;
          padding: 10px 18px;
          border-radius: 999px;
          text-decoration: none;
          font-size: 13px;
          line-height: 1;
          font-weight: 500;
          transition: all .25s ease;
        }

        .cta-btn {
          background: #ffffff;
          color: #111111;
        }

        .cta-btn:hover {
          color: #111111;
          transform: translateY(-1px);
        }

        .cta-chip {
          background: var(--cta-chip);
          color: #f2f2f2;
        }

        .cta-chip:hover {
          color: #f2f2f2;
        }

        /* =======  CTA SESSION END  ======== */

        @media (max-width: 1199.98px) {
          .compatible-container {
            max-width: 1100px;
          }

          .compatible-title {
            font-size: 44px;
          }

          .compatible-content h4 {
            font-size: 20px;
          }

          .compatible-image-box {
            max-width: 400px;
          }

          .compatible-image-box img {
            height: 510px;
          }
        }

        @media (max-width: 991.98px) {
          .interactive-text {
            max-width: 560px;
          }

          .compatible-section,
          .faq-section {
            padding: 70px 0;
          }

          .compatible-left,
          .faq-left {
            max-width: 100%;
          }

          .compatible-left {
            padding-right: 0;
            margin-bottom: 34px;
          }

          .faq-left {
            margin-bottom: 40px;
          }

          .compatible-title {
            font-size: 40px;
            max-width: 320px;
            margin-bottom: 28px;
          }

          .faq-title {
            margin: 0 0 30px;
          }

          .compatible-content p {
            max-width: 100%;
          }

          .faq-help {
            max-width: 280px;
          }

          .compatible-image-wrap {
            justify-content: center;
          }

          .compatible-image-box {
            max-width: 100%;
          }

          .compatible-image-box img {
            height: 500px;
          }

          .cta-box {
            padding: 30px 28px;
          }
        }

        @media (max-width: 768px) {
          .business-section {
            padding: 60px 0 70px;
          }

          .business-card {
            max-width: 100%;
            min-height: auto;
          }

          .card-label {
            margin-bottom: 26px;
          }

          .card-heading {
            font-size: 1.1rem;
          }

          .card-text br {
            display: none;
          }
        }

        @media (max-width: 767.98px) {

          .interactive-text-section,
          .compatible-section,
          .faq-section,
          .cta-section {
            padding: 56px 0;
          }

          .interactive-text-wrap {
            max-width: 100%;
          }

          .interactive-text {
            max-width: 100%;
            font-size: clamp(1.14rem, 4.8vw, 1.5rem);
            line-height: 1.42;
          }

          .interactive-pop {
            width: 168px;
          }

          .compatible-container {
            padding: 0 18px;
          }

          .compatible-title {
            font-size: 34px;
            line-height: 0.98;
            max-width: 280px;
          }

          .compatible-list {
            gap: 20px;
          }

          .compatible-content h4 {
            font-size: 18px;
          }

          .compatible-content p {
            font-size: 13px;
            line-height: 1.45;
          }

          .compatible-image-box img {
            height: 420px;
          }

          .faq-title {
            font-size: clamp(2rem, 9vw, 3rem);
            margin-bottom: 24px;
          }

          .faq-question {
            gap: 12px;
            padding: 16px 0;
          }

          .faq-icon {
            width: 16px;
            min-width: 16px;
            font-size: 22px;
          }

          .faq-question-text {
            font-size: 1.1rem;
            padding-right: 0;
          }

          .faq-answer {
            padding-left: 28px;
          }

          .faq-answer-inner {
            font-size: 14px;
            padding-bottom: 18px;
          }

          .cta-box {
            border-radius: 12px;
            padding: 26px 20px 24px;
          }

          .cta-title {
            margin-bottom: 18px;
            max-width: 100%;
            font-size: clamp(1.45rem, 7vw, 2.1rem);
            line-height: 1.1;
          }

          .cta-actions {
            gap: 10px;
          }

          .cta-btn,
          .cta-chip {
            min-height: 36px;
            padding: 9px 15px;
            font-size: 12px;
          }
        }

        @media (max-width: 575.98px) {
          .interactive-text {
            font-size: 1.08rem;
          }

          .interactive-pop {
            width: 160px;
            left: 0;
          }

          .compatible-title {
            font-size: 30px;
            max-width: 250px;
          }

          .compatible-item {
            gap: 12px;
          }

          .compatible-icon {
            font-size: 12px;
          }

          .compatible-image-box {
            border-radius: 10px;
          }

          .compatible-image-box img {
            height: 360px;
          }
        }

        /* FOOTER SESSION STRT  */
        .codera-footer {
          margin-top: auto;
          background: var(--bg);
          border-top: 1px solid var(--border);
          padding: 58px 0 0;
        }

        .codera-footer-top {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 48px;
          padding-bottom: 34px;
        }

        .codera-footer-brand {
          min-width: 220px;
          max-width: 220px;
        }

        .codera-footer-logo {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          color: var(--heading);
          font-size: 18px;
          font-weight: 800;
          line-height: 1;
          text-transform: uppercase;
          margin-bottom: 34px;
        }

        .codera-footer-logo-mark {
          width: 12px;
          height: 12px;
          background: var(--heading);
          border-radius: 2px;
          transform: skew(-18deg);
          flex: 0 0 12px;
          display: inline-block;
        }

        .codera-footer-social {
          display: flex;
          align-items: center;
          gap: 26px;
          flex-wrap: wrap;
        }

        .codera-footer-social a,
        .codera-footer-col a {
          color: var(--muted);
          text-decoration: none;
          transition: color .25s ease;
        }

        .codera-footer-social a {
          font-size: 14px;
          line-height: 1.5;
          font-weight: 500;
        }

        .codera-footer-social a:hover,
        .codera-footer-col a:hover {
          color: var(--heading);
        }

        .codera-footer-links {
          display: grid;
          grid-template-columns: repeat(4, auto);
          gap: 70px;
          align-items: start;
        }

        .codera-footer-col {
          display: flex;
          flex-direction: column;
          gap: 8px;
          min-width: 110px;
        }

        .codera-footer-col a {
          font-size: 15px;
          line-height: 1.8;
          font-weight: 500;
        }

        .codera-footer-bottom {
          border-top: 1px solid var(--border);
          text-align: center;
          padding: 18px 15px;
          font-size: 13px;
          line-height: 1.4;
          color: var(--label);
          background: var(--light_bg);
        }

        [data-theme="dark"] .codera-footer-bottom {
          background: rgba(255, 255, 255, 0.02);
        }

        @media (max-width: 991.98px) {
          .codera-footer {
            padding-top: 42px;
          }

          .codera-footer-top {
            flex-direction: column;
            gap: 34px;
          }

          .codera-footer-brand {
            min-width: 100%;
            max-width: 100%;
          }

          .codera-footer-logo {
            margin-bottom: 22px;
          }

          .codera-footer-links {
            width: 100%;
            grid-template-columns: repeat(2, minmax(160px, 1fr));
            gap: 26px 34px;
          }
        }

        @media (max-width: 767.98px) {
          .codera-footer {
            padding-top: 36px;
          }

          .codera-footer-top {
            gap: 28px;
            padding-bottom: 26px;
          }

          .codera-footer-logo {
            font-size: 16px;
          }

          .codera-footer-social {
            gap: 18px;
          }

          .codera-footer-social a {
            font-size: 13px;
          }

          .codera-footer-links {
            grid-template-columns: repeat(2, 1fr);
            gap: 18px 22px;
          }

          .codera-footer-col a {
            font-size: 14px;
            line-height: 1.7;
          }

          .codera-footer-bottom {
            font-size: 12px;
            padding: 15px 12px;
          }
        }

        @media (max-width: 575.98px) {
          .codera-footer-links {
            grid-template-columns: 1fr 1fr;
          }

          .codera-footer-logo {
            font-size: 15px;
          }

          .codera-footer-social a,
          .codera-footer-col a {
            font-size: 13px;
          }

          .codera-footer-bottom {
            font-size: 11px;
          }
        }
        /* FOOTER SESSION END */