/* ── TEMPLATE 3: NAVY & ROSE — Clean White + Navy Blue #0D4269 + Rose ── */
    :root {
      --pri: #0D4269;
      --pri-d: #0A3154;
      --pri-l: #E5F0F8;
      --pri-m: #B8D4E6;
      --rose: #E11D48;
      --rose-l: #FFF1F2;
      --rose-m: #FECDD3;
      --amber: #F59E0B;
      --amber-l: #FFFBEB;
      --dark: #111827;
      --mid: #374151;
      --muted: #6B7280;
      --light: #9CA3AF;
      --bg: #FFFFFF;
      --bg2: #F9FAFB;
      --bg3: #F3F4F6;
      --border: #E5E7EB;
      --border-l: #F3F4F6;
      --sh-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 3px 8px rgba(0, 0, 0, .04);
      --sh-md: 0 4px 12px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .05);
      --sh-lg: 0 8px 24px rgba(0, 0, 0, .08), 0 20px 40px rgba(0, 0, 0, .06);
      --sh-pri: 0 4px 20px rgba(13, 66, 105, .28);
      --sh-rose: 0 4px 20px rgba(225, 29, 72, .25);
      --r8: 8px;
      --r12: 12px;
      --r16: 16px;
      --r20: 20px;
      --r24: 24px;
      --r-full: 9999px;
      --tr: all .22s ease;
      --tr-s: all .48s ease;
    }

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

    html {
      scroll-behavior: smooth;
      scrollbar-width: thin;
      scrollbar-color: var(--pri) var(--bg2)
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px
    }

    ::-webkit-scrollbar-track {
      background: var(--bg2)
    }

    ::-webkit-scrollbar-thumb {
      background: var(--pri);
      border-radius: var(--r-full);
      border: 2px solid var(--bg2)
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--pri-d)
    }

    body {
      font-family: 'DM Sans', sans-serif;
      color: var(--dark);
      background: var(--bg);
      overflow-x: hidden;
      line-height: 1.65
    }

    /* ── CURSOR FOLLOWER ── */
    .cursor-dot,
    .cursor-ring {
      position: fixed;
      top: 0;
      left: 0;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      mix-blend-mode: difference
    }

    .cursor-dot {
      width: 8px;
      height: 8px;
      background: #fff;
      transition: opacity .2s ease
    }

    .cursor-ring {
      width: 34px;
      height: 34px;
      border: 1.5px solid #fff;
      transition: width .25s ease, height .25s ease, opacity .2s ease, border-color .25s ease
    }

    .cursor-ring.hover {
      width: 54px;
      height: 54px;
      background: rgba(255, 255, 255, .1)
    }

    body.cursor-hide .cursor-dot,
    body.cursor-hide .cursor-ring {
      opacity: 0
    }

    @media(hover:none),
    (max-width:900px) {

      .cursor-dot,
      .cursor-ring {
        display: none
      }
    }

    img {
      max-width: 100%;
      display: block
    }

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

    ul {
      list-style: none
    }

    button {
      border: none;
      background: none;
      cursor: pointer;
      font-family: inherit
    }

    /* ── NAV ── */
    .navbar {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: #fff;
      box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0, 0, 0, .05)
    }

    .nav-inner {
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 32px;
      height: 72px;
      display: flex;
      align-items: center;
      gap: 24px
    }

    .nav-logo img {
      height: 48px;
      width: auto
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      gap: 26px
    }

    .nav-links>li {
      position: relative;
      padding: 24px 0
    }

    .nav-links a {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--dark);
      font-weight: 600;
      font-size: .92rem;
      white-space: nowrap;
      transition: var(--tr)
    }

    .nav-links>li>a:hover {
      color: var(--pri)
    }

    .dd-chev {
      width: 14px;
      height: 14px;
      stroke: var(--light);
      transition: transform .2s ease
    }

    .has-dd:hover .dd-chev {
      transform: rotate(180deg)
    }

    .has-dd .dd-panel {
      position: fixed;
      top: 72px;
      left: 50%;
      transform: translateX(-50%) translateY(-8px);
      width: max-content;
      max-width: min(1100px, 92vw);
      background: #15042E;
      border-radius: var(--r20);
      box-shadow: var(--sh-lg);
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s ease, transform .25s ease, visibility .25s;
      z-index: 10
    }

    .has-dd .dd-panel.dd-solutions {
      width: min(1100px, 92vw)
    }

    .has-dd:hover .dd-panel {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0)
    }

    .dd-panel.dd-icons .dd-inner {
      display: flex;
      justify-content: center;
      max-width: 1000px;
      margin: 0 auto
    }

    .dd-panel.dd-icons a {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 30px 36px;
      position: relative;
      color: #fff !important;
      font-weight: 700;
      font-size: .9rem;
      text-align: center;
      white-space: nowrap
    }

    .dd-panel.dd-icons a:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 22%;
      bottom: 22%;
      width: 1px;
      background: rgba(255, 255, 255, .15)
    }

    .dd-panel.dd-icons a svg {
      width: 34px;
      height: 34px;
      stroke: #fff;
      opacity: .95
    }

    .dd-panel.dd-icons a img {
      width: 34px;
      height: 34px;
      object-fit: contain;
      opacity: .95
    }

    .dd-panel.dd-solutions .dd-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 36px;
      margin: 0 auto;
      padding: 32px 36px
    }

    .dd-sol-col h4 {
      color: #fff;
      font-family: 'OptimaNovaProLight', 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 1.4rem;
      margin-bottom: 12px
    }

    .dd-sol-col>p {
      color: rgba(255, 255, 255, .6);
      font-size: .82rem;
      line-height: 1.6;
      margin-bottom: 20px;
      max-width: 380px
    }

    .dd-ind-list {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px 24px
    }

    .dd-ind-list a {
      color: #fff !important;
      font-weight: 700;
      font-size: .92rem;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap
    }

    .dd-ind-list a:hover,
    .dd-ind-list a.active {
      color: #ED7D31 !important
    }

    .dd-ind-list .chev2 {
      opacity: 0;
      color: #ED7D31;
      transition: opacity .2s ease
    }

    .dd-ind-list a:hover .chev2,
    .dd-ind-list a.active .chev2 {
      opacity: 1
    }

    .dd-sol-list {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .dd-sol-list a {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      color: #fff !important;
      opacity: 1;
      transition: opacity .2s ease, transform .25s ease
    }

    .dd-sol-list a.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s ease, transform .25s ease, visibility 0s linear .2s
    }

    .dd-sol-list a svg {
      width: 14px;
      height: 14px;
      stroke: #ED7D31;
      flex-shrink: 0;
      margin-top: 4px
    }

    .dd-sol-list a strong {
      color: #fff;
      font-weight: 700
    }

    .dd-sol-list a span {
      font-size: .85rem;
      line-height: 1.5;
      color: rgba(255, 255, 255, .7)
    }

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

    .nav-socials {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .nav-socials a {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: var(--tr)
    }

    .nav-socials a:hover {
      transform: translateY(-2px)
    }

    .nav-socials svg {
      width: 16px;
      height: 16px;
      fill: #fff
    }

    .nav-socials .soc-li,
    .nav-socials .soc-yt,
    .nav-socials .soc-fb,
    .nav-socials .soc-ig {
      background: var(--pri)
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 6px;
      margin-left: auto
    }

    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--dark);
      border-radius: 2px
    }

    /* ── HERO ── */
    #hero {
      position: relative;
      height: calc(100vh - 72px);
      min-height: 600px;
      background: #000;
      overflow: hidden
    }

    #heroVideo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: brightness(1) contrast(1);
      transition: filter 1.1s ease
    }

    .hero-loading {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      opacity: 1;
      visibility: visible;
      transition: opacity .6s ease, visibility 0s linear 0s
    }

    .hero-loading.hero-loaded {
      opacity: 0;
      visibility: hidden;
      transition: opacity .6s ease, visibility 0s linear .6s
    }

    .hero-loading-logo {
      width: clamp(110px, 16vw, 200px);
      animation: heroLoadPulse 1.7s ease-in-out infinite
    }

    @keyframes heroLoadPulse {

      0%,
      100% {
        opacity: .5;
        transform: scale(.92)
      }

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

    #hero.logo-end #heroVideo {
      filter: brightness(1.06) contrast(1.06)
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, rgba(10, 49, 84, .38) 0%, rgba(13, 66, 105, .22) 35%, rgba(17, 24, 39, .3) 100%);
      transition: opacity 1.1s ease
    }

    #hero.logo-end .hero-overlay {
      opacity: 0
    }

    .hero-logo-glow {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      opacity: 0;
      overflow: hidden;
      background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 48%);
      transform: scale(.85);
      transition: opacity 1.1s ease, transform 1.6s cubic-bezier(.16, 1, .3, 1)
    }

    #hero.logo-end .hero-logo-glow {
      opacity: 1;
      transform: scale(1)
    }

    .hero-logo-glow::before,
    .hero-logo-glow::after {
      content: '';
      position: absolute;
      top: 0;
      height: 100%;
      transform: skewX(-12deg)
    }

    .hero-logo-glow::after {
      left: -60%;
      width: 42%;
      background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%)
    }

    .hero-logo-glow::before {
      left: -90%;
      width: 20%;
      background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%)
    }

    #hero.logo-end .hero-logo-glow::after {
      animation: heroLogoShine 1.3s ease-in-out .2s 2
    }

    #hero.logo-end .hero-logo-glow::before {
      animation: heroLogoShine 1.3s ease-in-out .5s 2
    }

    @keyframes heroLogoShine {
      0% {
        left: -60%
      }

      100% {
        left: 130%
      }
    }

    .carousel {
      position: relative;
      z-index: 2;
      height: 100%
    }

    .slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      padding: 160px 0 58px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .9s ease
    }

    .slide.active {
      opacity: 1;
      pointer-events: all
    }

    .slide-content {
      max-width: 980px;
      margin: 0 auto;
      text-align: center;
      transition: opacity .5s ease
    }

    .slide.hero-hide-text .slide-content {
      opacity: 0 !important;
      pointer-events: none
    }

    .slide .container {
      display: flex;
      justify-content: center
    }

    .slide-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      opacity: 0;
      width: 100%
    }

    .slide.active .slide-kicker {
      animation: upIn .6s cubic-bezier(.16, 1, .3, 1) .15s forwards
    }

    .kicker-dot {
      width: 6px;
      height: 6px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--rose);
      animation: pulse 2s ease-in-out infinite
    }

    .kicker-text {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .88);
      padding: 7px 18px;
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 50px;
      background: rgba(255, 255, 255, .08)
    }

    .slide h1,
    .slide h2 {
      font-size: clamp(1.4rem, 2.8vw, 2.5rem);
      font-weight: 300;
      line-height: 1.2;
      color: #fff;
      margin-bottom: 14px;
      opacity: 0;
      letter-spacing: -.5px
    }

    .slide.active h1,
    .slide.active h2 {
      animation: upIn .65s cubic-bezier(.16, 1, .3, 1) .3s forwards
    }

    .slide h1 .acc,
    .slide h2 .acc {
      color: #C7D2FE
    }

    .slide h1 .rose,
    .slide h2 .rose {
      color: #FDA4AF
    }

    .slide p {
      font-size: clamp(1rem, 1.8vw, 1.2rem);
      color: rgba(255, 255, 255, .92);
      font-weight: 700;
      line-height: 1.6;
      margin: 0 auto 36px;
      max-width: 580px;
      opacity: 0;
      text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
      white-space: nowrap
    }

    @media (max-width: 640px) {
      .slide p {
        white-space: normal
      }
    }

    .slide.active p {
      animation: upIn .6s cubic-bezier(.16, 1, .3, 1) .48s forwards
    }

    .slide-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      opacity: 0;
      justify-content: center
    }

    .slide.active .slide-btns {
      animation: upIn .6s cubic-bezier(.16, 1, .3, 1) .62s forwards
    }

    .hero-client-logos {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 30px;
      opacity: 0
    }

    .slide.active .hero-client-logos {
      animation: upIn .6s cubic-bezier(.16, 1, .3, 1) .62s forwards
    }

    .hero-client-logos img {
      height: 50px;
      width: auto;
      max-width: 150px;
      object-fit: contain;
      background: rgba(255, 255, 255, .92);
      border-radius: var(--r8);
      padding: 10px 16px
    }

    .car-nav {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      gap: 8px;
      align-items: center
    }

    .car-dot {
      position: relative;
      width: 28px;
      height: 26px;
      padding: 0;
      background: transparent;
      cursor: pointer;
      border: none
    }

    .car-dot::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 3px;
      border-radius: 2px;
      background: rgba(255, 255, 255, .3);
      transform: translateY(-50%);
      transition: var(--tr)
    }

    .car-dot.active::after {
      background: var(--rose)
    }

    .car-prog {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(255, 255, 255, .08);
      z-index: 3
    }

    .prog-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--pri), var(--rose));
      width: 0%;
      transition: width .1s linear
    }

    /* ── BUTTONS ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 26px;
      border-radius: var(--r8);
      font-weight: 700;
      font-size: .875rem;
      transition: var(--tr);
      white-space: nowrap
    }

    .btn-pri {
      background: var(--pri);
      color: #fff;
      box-shadow: var(--sh-pri)
    }

    .btn-pri:hover {
      background: var(--pri-d);
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(13, 66, 105, .4)
    }

    .btn-rose {
      background: var(--rose);
      color: #fff;
      box-shadow: var(--sh-rose)
    }

    .btn-rose:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(225, 29, 72, .35)
    }

    .btn-white {
      background: #fff;
      color: var(--pri);
      font-weight: 700
    }

    .btn-white:hover {
      background: var(--pri-l);
      transform: translateY(-2px)
    }

    .btn-glass {
      background: rgba(255, 255, 255, .1);
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, .25);
      backdrop-filter: blur(8px)
    }

    .btn-glass:hover {
      background: rgba(255, 255, 255, .18);
      border-color: rgba(255, 255, 255, .5);
      transform: translateY(-2px)
    }

    .btn-outline {
      background: transparent;
      color: var(--pri);
      border: 1.5px solid var(--border);
      font-weight: 600
    }

    .btn-outline:hover {
      border-color: var(--pri);
      background: var(--pri-l)
    }

    /* ── LAYOUT ── */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 32px
    }

    .sec-head {
      margin-bottom: 56px
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: var(--r-full);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 14px
    }

    .tag-ind {
      background: var(--pri-l);
      color: var(--pri)
    }

    .tag-rose {
      background: var(--rose-l);
      color: var(--rose)
    }

    .tag-white {
      background: rgba(255, 255, 255, .15);
      color: rgba(255, 255, 255, .9);
      border: 1px solid rgba(255, 255, 255, .2)
    }

    h2.sec-title {
      font-size: clamp(1.875rem, 3.5vw, 2.75rem);
      font-weight: 800;
      line-height: 1.18;
      color: var(--dark);
      margin-bottom: 14px;
      letter-spacing: -0.5px
    }

    h2.sec-title.light {
      color: #fff
    }

    p.sub {
      font-size: 1rem;
      color: var(--muted);
      line-height: 1.75;
      max-width: 580px
    }

    /* ── REVENUE TECH SERVICES ── */
    .rts-sec {
      position: relative;
      padding: 110px 0 150px;
      overflow: hidden;
      background: linear-gradient(120deg, #F1E9FB 0%, #FBF3EE 45%, #FCEAE0 100%);
    }

    .rts-sec::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(13, 66, 105, .04) 1px, transparent 1px),
        linear-gradient(rgba(13, 66, 105, .04) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, transparent, #000 15%, #000 70%, transparent);
      pointer-events: none
    }

    .rts-sec .container {
      position: relative
    }

    .rts-head {
      text-align: center;
      max-width: 860px;
      margin: 0 auto 56px
    }

    .rts-head h2 {
      font-size: clamp(1.9rem, 3.4vw, 2.6rem);
      font-weight: 700;
      color: #4C7FE0;
      letter-spacing: -0.5px;
      margin-bottom: 20px
    }

    .rts-head p {
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.85
    }

    .rts-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 76px 24px
    }

    .rts-card {
      display: flex;
      flex-direction: column;
      height: 100%;
      background: #fff;
      box-shadow: var(--sh-md);
      text-align: center;
      padding-bottom: 26px;
      transition: transform .4s cubic-bezier(.2, .8, .2, 1), background-color .4s ease, box-shadow .4s ease;
      position: relative
    }

    .rts-card:hover {
      transform: translateY(-10px) rotate(1.2deg);
      background: #000835;
      box-shadow: 0 20px 45px rgba(0, 8, 53, .35);
      z-index: 5
    }

    .rts-card::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 14px
    }

    .rts-card h3,
    .rts-card p {
      transition: color .35s ease
    }

    .rts-card:hover h3 {
      color: #fff
    }

    .rts-card:hover p {
      color: rgba(255, 255, 255, .82)
    }

    .rts-card:hover .rts-icon {
      transform: translateX(-50%) scale(1.08)
    }

    .rts-card-img {
      position: relative;
      line-height: 0;
      overflow: hidden
    }

    .rts-card-img img {
      width: 100%;
      height: 210px;
      object-fit: cover;
      display: block
    }

    .rts-discover {
      position: absolute;
      left: 22px;
      right: 22px;
      top: calc(100% + 14px);
      display: block;
      text-align: center;
      background: #3A8BFF;
      color: #fff;
      font-weight: 700;
      font-size: .9rem;
      padding: 13px;
      box-shadow: 0 14px 30px rgba(58, 139, 255, .4);
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .3s ease, transform .3s ease;
      pointer-events: none
    }

    .rts-card:hover .rts-discover {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto
    }

    .rts-icon {
      position: absolute;
      left: 50%;
      bottom: -28px;
      transform: translateX(-50%);
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--pri);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--sh-pri);
      border: 3px solid #fff;
      transition: transform .4s cubic-bezier(.2, .8, .2, 1)
    }

    .rts-icon img {
      width: 24px;
      height: 24px;
      object-fit: contain
    }

    .rts-card h3 {
      margin-top: 44px;
      color: #4C7FE0;
      font-size: 1.1rem;
      font-weight: 700
    }

    .rts-card p {
      color: var(--mid);
      font-size: .85rem;
      line-height: 1.7;
      padding: 0 22px;
      margin-top: 8px;
      flex: 1
    }

    .rts-foot {
      text-align: right;
      margin-top: 32px
    }

    .rts-foot a {
      color: #4C7FE0;
      font-weight: 600;
      font-size: .9rem
    }

    .rts-foot a:hover {
      text-decoration: underline
    }

    /* ── CAPABILITIES ACCORDION ── */
    .acc-sec {
      padding: 0 0 90px;
      background: linear-gradient(115deg, #E9F2FB 0%, #F1EDFA 40%, #FCF6EA 75%, #FBEEE1 100%)
    }

    .acc-wrap {
      width: 100%
    }

    .acc-list {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: var(--sh-lg)
    }

    .acc-item {
      border: none
    }

    .acc-item summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 15px clamp(24px, 6vw, 72px);
      color: #fff;
      -webkit-user-select: none;
      user-select: none
    }

    .acc-item summary::-webkit-details-marker {
      display: none
    }

    .acc-item:nth-child(1) summary {
      background: #2B095D
    }

    .acc-item:nth-child(2) summary {
      background: #22074B
    }

    .acc-item:nth-child(3) summary {
      background: #1A0538
    }

    .acc-item:nth-child(4) summary {
      background: #15042E
    }

    .acc-title {
      font-size: clamp(1rem, 2vw, 1.2rem);
      font-weight: 700;
      letter-spacing: .2px
    }

    .acc-toggle {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .14);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative
    }

    .acc-toggle svg {
      width: 12px;
      height: 12px;
      stroke: #fff;
      stroke-width: 2.5;
      position: absolute;
      transition: opacity .2s, transform .25s
    }

    .acc-toggle .icon-minus {
      opacity: 0
    }

    .acc-item[open] .acc-toggle .icon-plus {
      opacity: 0;
      transform: rotate(90deg)
    }

    .acc-item[open] .acc-toggle .icon-minus {
      opacity: 1
    }

    .acc-panel {
      padding: 56px clamp(24px, 6vw, 72px)
    }

    .acc-panel-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 52px;
      align-items: center;
      max-width: 1080px;
      margin: 0 auto
    }

    .acc-panel-inner img {
      width: 100%;
      height: 320px;
      object-fit: cover;
      border-radius: var(--r16);
      box-shadow: var(--sh-lg);
      display: block
    }

    .acc-panel-text p {
      color: var(--mid);
      font-size: 1rem;
      line-height: 1.85;
      margin-bottom: 30px
    }

    .acc-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 24px
    }

    .acc-links a {
      color: var(--pri-d);
      font-weight: 600;
      font-size: .88rem
    }

    .acc-links a:hover {
      color: var(--rose)
    }

    .acc-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 15px 36px;
      border-radius: var(--r-full);
      background: #3A8BFF;
      color: #fff;
      font-weight: 700;
      font-size: .9rem;
      box-shadow: 0 12px 28px rgba(58, 139, 255, .35);
      transition: var(--tr)
    }

    .acc-btn:hover {
      background: #2872e0;
      transform: translateY(-2px)
    }

    /* ── CASE STUDIES ── */
    @font-face {
      font-family: 'OptimaNovaProLight';
      src: url('fonts/OptimaNovaProLight.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
      font-display: swap
    }

    .cs-sec {
      padding: 100px 0;
      background: #fff;
      position: relative;
      overflow: hidden
    }

    .cs-sec::after {
      content: '';
      position: absolute;
      right: -10%;
      bottom: -20%;
      width: 60%;
      height: 70%;
      background: radial-gradient(circle, rgba(58, 139, 255, .10) 0%, rgba(140, 26, 246, .06) 45%, transparent 75%);
      pointer-events: none
    }

    .cs-sec .container {
      position: relative
    }

    .cs-title {
      font-family: 'OptimaNovaProLight', 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: clamp(2rem, 4vw, 2.9rem);
      color: #0A1442;
      margin-bottom: 48px;
      letter-spacing: -.5px
    }

    .cs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px
    }

    .cs-card {
      display: block;
      background: #fff;
      border-radius: var(--r16);
      overflow: hidden;
      box-shadow: var(--sh-md);
      border: 1px solid var(--border-l);
      transition: var(--tr)
    }

    .cs-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg)
    }

    .cs-card img {
      width: 100%;
      height: 210px;
      object-fit: cover;
      display: block
    }

    .cs-card-body {
      padding: 24px 26px 30px
    }

    .cs-card h3 {
      color: #4C7FE0;
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 14px
    }

    .cs-card p {
      color: var(--muted);
      font-size: .875rem;
      line-height: 1.7
    }

    .cs-foot {
      text-align: center;
      margin-top: 52px
    }

    .cs-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 18px 58px;
      border-radius: var(--r-full);
      background: #3A4FE5;
      color: #fff;
      font-weight: 700;
      font-size: .95rem;
      box-shadow: 0 14px 30px rgba(58, 79, 229, .35);
      transition: var(--tr)
    }

    .cs-btn:hover {
      background: #2c3ecf;
      transform: translateY(-2px)
    }

    /* ── WHY CHOOSE RTS ── */
    .why2-sec {
      background: #15042E;
      padding: 90px 0 0;
      position: relative;
      overflow: hidden
    }

    .why2-title {
      text-align: center;
      color: #fff;
      font-family: 'OptimaNovaProLight', 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: clamp(2rem, 4.5vw, 3.4rem);
      letter-spacing: 2px;
      margin-bottom: 64px
    }

    .why2-top {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 40px;
      align-items: center
    }

    .why2-arrow {
      display: flex;
      justify-content: center
    }

    .why2-arrow img {
      width: 100%;
      max-width: 300px;
      height: auto
    }

    .why2-list {
      list-style: none;
      position: relative;
      padding-left: 60px
    }

    .why2-list::before {
      content: '';
      position: absolute;
      left: 91px;
      top: 32px;
      bottom: 32px;
      width: 1px;
      background: rgba(255, 255, 255, .12)
    }

    .why2-item {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 22px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .12)
    }

    .why2-item:last-child {
      border-bottom: none
    }

    .why2-item img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      flex-shrink: 0;
      position: relative;
      z-index: 1
    }

    .why2-item span {
      font-size: 1.1rem;
      font-weight: 500;
      color: #fff
    }

    .why2-excellence {
      position: relative;
      margin-top: 20px;
      padding: 40px 0 90px;
      border-top: 1px solid rgba(255, 255, 255, .1);
      background-image: url('images/why-choose/bg-glow.webp');
      background-repeat: no-repeat;
      background-position: 110% 100%;
      background-size: 50% auto
    }

    .why2-ex-label {
      color: #fff;
      font-size: 1.15rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 44px
    }

    .why2-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      max-width: 780px
    }

    .why2-stat {
      padding-left: 32px;
      border-left: 1px solid rgba(255, 255, 255, .12)
    }

    .why2-stat:first-child {
      padding-left: 0;
      border-left: none
    }

    .why2-stat-lbl {
      color: rgba(255, 255, 255, .55);
      font-size: .82rem;
      margin-bottom: 14px
    }

    .why2-stat-num {
      color: #3A8BFF;
      font-size: clamp(2.4rem, 5vw, 3.8rem);
      font-weight: 500;
      line-height: 1
    }

    .why2-stat-num .plus {
      font-size: .55em
    }

    /* ── BLOG ── */
    .blog-sec {
      padding: 100px 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(120deg, #F1E9FB 0%, #FBF3EE 45%, #FCEAE0 100%)
    }

    .blog-sec::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(13, 66, 105, .04) 1px, transparent 1px),
        linear-gradient(rgba(13, 66, 105, .04) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
      pointer-events: none
    }

    .blog-sec .container {
      position: relative
    }

    .blog-head {
      text-align: center;
      margin-bottom: 56px
    }

    .blog-head h2 {
      font-size: clamp(1.9rem, 3.6vw, 2.6rem);
      font-weight: 700;
      color: #4C7FE0;
      letter-spacing: 2px;
      margin-bottom: 10px
    }

    .blog-head p {
      font-family: 'OptimaNovaProLight', 'DM Sans', sans-serif;
      font-size: 1.3rem;
      color: var(--dark)
    }

    .blog-feat {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      margin-bottom: 26px
    }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 26px
    }

    .blog-card {
      display: block;
      background: #fff;
      border-radius: var(--r16);
      overflow: hidden;
      box-shadow: var(--sh-md);
      transition: var(--tr)
    }

    .blog-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg)
    }

    .blog-card img {
      width: 100%;
      height: 210px;
      object-fit: cover;
      display: block
    }

    .blog-feat .blog-card img {
      height: 280px
    }

    .blog-card-body {
      padding: 20px 24px 26px
    }

    .blog-cat {
      color: var(--muted);
      font-size: .85rem;
      margin-bottom: 8px
    }

    .blog-card h3 {
      color: #4C7FE0;
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.4
    }

    .blog-foot {
      text-align: center;
      margin-top: 48px
    }

    .blog-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 17px 52px;
      border-radius: var(--r-full);
      background: #3A4FE5;
      color: #fff;
      font-weight: 700;
      font-size: .95rem;
      box-shadow: 0 14px 30px rgba(58, 79, 229, .35);
      transition: var(--tr)
    }

    .blog-btn:hover {
      background: #2c3ecf;
      transform: translateY(-2px)
    }

    /* ── CTA v2 ── */
    .cta2-sec {
      position: relative;
      overflow: hidden;
      background: #15042E;
      padding: 110px 0;
      text-align: center
    }

    .yt-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none
    }

    .yt-bg video {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .yt-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: radial-gradient(ellipse at 50% 0%, rgba(42, 16, 80, .55) 0%, rgba(21, 4, 46, .78) 55%, rgba(12, 2, 32, .9) 100%);
      pointer-events: none
    }

    .cta2-sec::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
      pointer-events: none
    }

    .cta2-sec .container {
      position: relative;
      z-index: 3;
      max-width: 900px
    }

    .cta2-sec h2 {
      color: #fff;
      font-size: clamp(1.4rem, 2.6vw, 1.9rem);
      font-weight: 500;
      line-height: 1.5;
      margin-bottom: 40px
    }

    .cta2-sec h2 .hl {
      color: #ED7D31
    }

    .cta2-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 19px 48px;
      border-radius: var(--r-full);
      background: #3A5CFF;
      color: #fff;
      font-weight: 700;
      font-size: 1rem;
      box-shadow: 0 16px 34px rgba(58, 92, 255, .4);
      transition: var(--tr);
      position: relative;
      z-index: 3
    }

    .cta2-btn:hover {
      background: #2a49e0;
      transform: translateY(-2px)
    }

    .float-icon {
      position: absolute;
      z-index: 2;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
      background: #fff
    }

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

    .fi-1 {
      width: 76px;
      height: 76px;
      left: 19%;
      top: 6%
    }

    .fi-2 {
      width: 54px;
      height: 54px;
      left: 79%;
      top: 9%
    }

    .fi-3 {
      width: 160px;
      height: 160px;
      left: 4%;
      top: 24%
    }

    .fi-4 {
      width: 160px;
      height: 160px;
      left: 89%;
      top: 26%
    }

    .fi-5 {
      width: 110px;
      height: 110px;
      left: 30%;
      top: 62%
    }

    .fi-6 {
      width: 100px;
      height: 100px;
      left: 68%;
      top: 56%
    }

    /* ── FOOTER v2 ── */
    .ft2 {
      background: linear-gradient(160deg, #1a0640 0%, #0D0322 60%, #090218 100%);
      padding: 90px 0 0;
      position: relative;
      overflow: hidden
    }

    .ft2-top {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr 1.2fr 1fr;
      gap: 32px;
      padding-bottom: 60px
    }

    .ft2-hq h4 {
      color: #ED7D31;
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 14px
    }

    .ft2-hq p {
      color: rgba(255, 255, 255, .8);
      font-size: .9rem;
      line-height: 1.7;
      margin-bottom: 18px
    }

    .ft2-hq p strong {
      color: #fff
    }

    .ft2-badges {
      display: flex;
      gap: 10px;
      align-items: flex-start
    }

    .ft2-badges img {
      height: 74px;
      width: auto
    }

    .ft2-col h4 {
      color: #ED7D31;
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 18px
    }

    .ft2-col ul {
      list-style: none
    }

    .ft2-col li {
      margin-bottom: 16px
    }

    .ft2-col a {
      color: rgba(255, 255, 255, .78);
      font-size: .9rem;
      line-height: 1.5;
      transition: var(--tr)
    }

    .ft2-col a:hover {
      color: #fff
    }

    .ft2-col a em {
      font-style: italic
    }

    .ft2-bottom {
      border-top: 1px solid rgba(255, 255, 255, .1);
      padding: 26px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px
    }

    .ft2-bottom p {
      color: rgba(255, 255, 255, .7);
      font-size: .85rem
    }

    .ft2-socials {
      display: flex;
      gap: 14px
    }

    .ft2-socials a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: var(--tr)
    }

    .ft2-socials a:hover {
      transform: translateY(-2px)
    }

    .ft2-socials svg {
      width: 16px;
      height: 16px;
      fill: #fff
    }

    .ft2-socials .soc-li,
    .ft2-socials .soc-yt,
    .ft2-socials .soc-fb,
    .ft2-socials .soc-ig {
      background: var(--pri)
    }

    /* ── MOBILE ── */
    .mob-menu {
      position: fixed;
      inset: 0;
      background: rgba(255, 255, 255, .98);
      backdrop-filter: blur(20px);
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 22px;
      padding: 90px 32px 40px;
      overflow-y: auto;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s ease
    }

    .mob-menu.open {
      opacity: 1;
      pointer-events: all
    }

    .mob-menu a {
      color: var(--muted);
      font-size: 1.05rem;
      font-weight: 600;
      transition: var(--tr)
    }

    .mob-menu a:hover {
      color: var(--dark)
    }

    .mob-menu .mob-solo {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--dark)
    }

    .mob-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border-l)
    }

    .mob-head {
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--pri)
    }

    .mob-close {
      position: absolute;
      top: 24px;
      right: 24px;
      color: var(--light);
      font-size: 26px;
      cursor: pointer
    }

    /* ── SCROLL ANIMATIONS ── */
    .anim {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .6s ease, transform .6s ease
    }

    .anim.in {
      opacity: 1;
      transform: none
    }

    .anim-l {
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity .6s ease, transform .6s ease
    }

    .anim-l.in {
      opacity: 1;
      transform: none
    }

    .anim-r {
      opacity: 0;
      transform: translateX(40px);
      transition: opacity .6s ease, transform .6s ease
    }

    .anim-r.in {
      opacity: 1;
      transform: none
    }

    .anim-s {
      opacity: 0;
      transform: scale(.95);
      transition: opacity .6s ease, transform .6s ease
    }

    .anim-s.in {
      opacity: 1;
      transform: none
    }

    .d1 {
      transition-delay: .1s
    }

    .d2 {
      transition-delay: .2s
    }

    .d3 {
      transition-delay: .3s
    }

    .d4 {
      transition-delay: .4s
    }

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

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes ldSpin {
      to {
        transform: rotate(360deg)
      }
    }

    @keyframes pulse {

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

      50% {
        opacity: .5;
        transform: scale(.8)
      }
    }

    @media(max-width:1100px) {

      .nav-links,
      .nav-actions {
        display: none
      }

      .hamburger {
        display: flex
      }
    }

    @media(max-width:1024px) {

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

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

      .acc-panel-inner {
        grid-template-columns: 1fr;
        gap: 28px
      }

      .acc-panel-inner img {
        height: 240px
      }

      .why2-top {
        grid-template-columns: 1fr
      }

      .why2-arrow {
        display: none
      }

      .why2-list {
        padding-left: 0
      }

      .why2-list::before {
        left: 31px
      }

      .why2-stats {
        grid-template-columns: 1fr 1fr
      }

      .why2-stat:nth-child(2) {
        padding-left: 32px;
        border-left: 1px solid rgba(255, 255, 255, .12)
      }

      .blog-feat {
        grid-template-columns: 1fr
      }

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

      .fi-2,
      .fi-6 {
        display: none
      }

      .ft2-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px
      }
    }

    @media(max-width:768px) {

      .nav-links,
      .nav-actions {
        display: none
      }

      .hamburger {
        display: flex
      }

      .rts-grid,
      .cs-grid {
        grid-template-columns: 1fr
      }

      .why2-stats {
        grid-template-columns: 1fr;
        gap: 28px
      }

      .why2-stat,
      .why2-stat:nth-child(2) {
        padding-left: 0;
        border-left: none
      }

      .why2-excellence {
        background-size: 80% auto
      }

      .rts-foot {
        text-align: center
      }

      .acc-item summary {
        padding: 14px 22px
      }

      .acc-panel {
        padding: 36px 22px
      }

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

      .float-icon {
        display: none
      }

      .fi-3,
      .fi-4 {
        display: block;
        width: 70px;
        height: 70px
      }

      .ft2-top {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .ft2-bottom {
        justify-content: center;
        text-align: center
      }
    }

    /* ── VELOCITY CARGO PAGE ── */
    .vc-banner {
      position: relative;
      height: 30vh;
      min-height: 240px;
      background: #000;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .vc-banner img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .vc-banner::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(10, 15, 61, .35) 0%, rgba(10, 15, 61, .25) 50%, rgba(10, 15, 61, .55) 100%)
    }

    .vc-banner h1 {
      position: relative;
      z-index: 1;
      display: inline-block;
      max-width: 92vw;
      margin: 0 auto;
      padding: 16px 40px;
      color: #fff;
      text-align: center;
      font-style: italic;
      font-weight: 500;
      font-size: clamp(1rem, 2.6vw, 2.6rem);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: rgba(10, 15, 61, .55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-radius: 999px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25)
    }

    .vc-page-hero {
      padding: 70px 0 20px;
      background: #fff;
      text-align: center
    }

    .vc-eyebrow {
      display: inline-block;
      color: var(--pri);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: .78rem;
      margin-bottom: 14px
    }

    .vc-page-hero h1 {
      font-size: clamp(2rem, 4vw, 2.9rem);
      font-weight: 800;
      color: var(--dark);
      letter-spacing: -.5px;
      max-width: 780px;
      margin: 0 auto
    }

    .vc-page-hero h1 em {
      color: var(--pri);
      font-style: italic
    }

    .vc-intro-sec {
      padding: 100px 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #EAF4F3 0%, #F3F1FA 55%, #EDE7F8 100%)
    }

    .vc-intro-sec::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(13, 66, 105, .05) 1px, transparent 1px),
        linear-gradient(rgba(13, 66, 105, .05) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
      pointer-events: none
    }

    .vc-intro-sec .container {
      position: relative
    }

    .vc-intro-grid {
      display: grid;
      grid-template-columns: 420px 1fr;
      gap: 64px;
      align-items: center
    }

    .vc-intro-media .vc-side-img {
      width: 100%;
      height: 380px;
      object-fit: cover;
      border-radius: var(--r24);
      box-shadow: var(--sh-lg);
      display: block
    }

    .vc-intro-text h2 {
      font-family: 'OptimaNovaProLight', 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      color: var(--dark);
      margin-bottom: 20px
    }

    .vc-intro-text h2 em {
      color: var(--pri);
      font-style: italic
    }

    .vc-intro-text p {
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.85
    }

    .vc-stack-sec {
      background: #0A0F3D;
      padding: 90px 0 140px;
      position: relative
    }

    .vc-stack-title {
      text-align: center;
      color: #fff;
      font-family: 'OptimaNovaProLight', 'DM Sans', sans-serif;
      font-weight: 400;
      letter-spacing: 4px;
      text-transform: uppercase;
      font-size: clamp(1rem, 2vw, 1.3rem);
      margin-bottom: 60px
    }

    .vc-card-stack {
      max-width: 1080px;
      margin: 0 auto;
      position: relative
    }

    .vc-card-row {
      position: sticky;
      background: #F2F2F2;
      border-radius: 28px;
      box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
      display: grid;
      grid-template-columns: 1fr 220px;
      align-items: center;
      min-height: 340px;
      padding: 48px 56px;
      margin-bottom: 34px
    }

    .vc-card-row:nth-child(1) {
      top: 90px
    }

    .vc-card-row:nth-child(2) {
      top: 118px
    }

    .vc-card-row:nth-child(3) {
      top: 146px
    }

    .vc-card-row:nth-child(4) {
      top: 174px
    }

    .vc-card-row:nth-child(5) {
      top: 202px
    }

    .vc-card-row:nth-child(6) {
      top: 230px
    }

    .vc-card-row:nth-child(7) {
      top: 258px
    }

    .vc-card-row:nth-child(8) {
      top: 286px
    }

    .vc-card-row:nth-child(9) {
      top: 314px
    }

    .vc-card-row:nth-child(10) {
      top: 342px
    }

    .vc-card-row:nth-child(11) {
      top: 370px
    }

    .vc-card-row:last-child {
      margin-bottom: 0
    }

    .vc-card-icon {
      width: 96px;
      height: 96px;
      object-fit: contain;
      margin-bottom: 28px
    }

    .vc-card-row h3 {
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 16px
    }

    .vc-card-row p {
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.7;
      max-width: 560px
    }

    .vc-card-num {
      font-size: clamp(4rem, 9vw, 7rem);
      font-weight: 800;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 2px var(--pri);
      text-align: right;
      justify-self: end;
      transition: color .4s ease, -webkit-text-stroke-color .4s ease
    }

    .vc-card-row.active .vc-card-num {
      color: var(--pri);
      -webkit-text-stroke: 2px var(--pri)
    }

    .vc-deploy-sec {
      padding: 110px 0;
      background: linear-gradient(160deg, #FBFDFF 0%, #EEF4FB 60%, #E7EFFA 100%)
    }

    .vc-deploy-grid {
      display: grid;
      grid-template-columns: 1fr 460px;
      gap: 80px;
      align-items: center
    }

    .vc-deploy-card {
      background: #fff;
      border-radius: var(--r20);
      box-shadow: var(--sh-md);
      padding: 44px;
      max-width: 480px
    }

    .vc-deploy-card img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      margin-bottom: 22px
    }

    .vc-deploy-card h3 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 14px
    }

    .vc-deploy-card p {
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.75
    }

    .vc-deploy-media {
      position: relative
    }

    .vc-deploy-media::before {
      content: '';
      position: absolute;
      right: -22px;
      bottom: -22px;
      width: 100%;
      height: 100%;
      background: #3A2ED0;
      border-radius: var(--r20)
    }

    .vc-deploy-img {
      position: relative;
      border-radius: var(--r20);
      overflow: hidden;
      box-shadow: var(--sh-lg)
    }

    .vc-deploy-img img {
      width: 100%;
      height: 460px;
      object-fit: cover;
      display: block
    }

    @media(max-width:1024px) {

      .vc-banner {
        height: 30vh;
        min-height: 220px
      }

      .vc-banner h1 {
        font-size: clamp(0.85rem, 2.6vw, 1.6rem);
        padding: 12px 26px
      }

      .vc-intro-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center
      }

      .vc-intro-media .vc-side-img {
        height: 300px
      }

      .vc-card-row {
        grid-template-columns: 1fr 140px;
        padding: 36px
      }

      .vc-deploy-grid {
        grid-template-columns: 1fr;
        gap: 50px
      }

      .vc-deploy-card {
        max-width: none
      }
    }

    @media(max-width:768px) {

      .vc-banner h1 {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.35;
        border-radius: var(--r20);
        max-width: 88vw
      }

      .vc-card-row {
        grid-template-columns: 1fr;
        text-align: center;
        min-height: unset
      }

      .vc-card-icon {
        margin: 0 auto 20px
      }

      .vc-card-row p {
        max-width: none;
        margin: 0 auto
      }

      .vc-card-num {
        text-align: center;
        justify-self: center;
        margin-top: 20px
      }

      .vc-deploy-media::before {
        right: -14px;
        bottom: -14px
      }

      .vc-deploy-img img {
        height: 320px
      }
    }

    /* ── SERVICES PAGE (AI & DATA ANALYTICS) ── */
    .svc-hero {
      position: relative;
      height: 60vh;
      min-height: 430px;
      padding: 70px 24px;
      background: linear-gradient(135deg, #5B93FF 0%, #2E6BF2 100%);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .svc-hero-inner {
      position: relative;
      width: 100%;
      max-width: 1240px;
      height: 290px
    }

    .svc-hero-card {
      position: absolute;
      top: 0;
      left: 2%;
      width: 85%;
      aspect-ratio: 1170 / 535;
      -webkit-mask-image: url(images/ai-analytics/hero-shape.svg);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-image: url(images/ai-analytics/hero-shape.svg);
      mask-repeat: no-repeat;
      mask-size: 100% 100%;
      filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .35));
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 64px;
      overflow: hidden;
      background: #060B33
    }

    .svc-hero-card video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0
    }

    .svc-hero-card::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(115deg, rgba(6, 11, 51, .55) 0%, rgba(12, 44, 153, .5) 32%, rgba(27, 75, 240, .45) 52%, rgba(6, 11, 51, .6) 78%, rgba(8, 26, 107, .65) 100%)
    }

    .svc-hero-card::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .10) 47%, transparent 58%)
    }

    .svc-hero-title {
      position: relative;
      z-index: 2;
      color: #fff;
      font-size: clamp(1.3rem, 2.4vw, 2.1rem);
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-align: right
    }

    .svc-hero-img {
      position: absolute;
      left: -2%;
      top: 5%;
      height: 108%;
      width: auto;
      max-width: 48%;
      object-fit: contain;
      z-index: 2;
      filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .3))
    }

    .svc-areas {
      background: var(--bg)
    }

    .svc-areas-grid {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 60px
    }

    .svc-areas-col {
      padding: 100px 0
    }

    .svc-areas-label {
      display: block;
      color: var(--pri);
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: .92rem;
      margin-bottom: 40px
    }

    .svc-areas-list {
      display: flex;
      flex-direction: column;
      gap: 46px
    }

    .svc-area-item {
      display: flex;
      gap: 24px;
      align-items: flex-start
    }

    .svc-area-item img {
      width: 58px;
      height: 58px;
      object-fit: contain;
      flex-shrink: 0
    }

    .svc-area-item h3 {
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--dark);
      margin-bottom: 10px
    }

    .svc-area-item p {
      color: var(--muted);
      font-size: .98rem;
      line-height: 1.7;
      max-width: 46ch
    }

    .svc-areas-arrow-col {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center
    }

    .svc-scroll-arrow {
      position: sticky;
      top: 140px;
      width: 260px;
      height: auto;
      flex-shrink: 0;
      transform: scaleX(-1)
    }

    @media(max-width:1024px) {

      .svc-hero-inner {
        height: 230px
      }

      .svc-hero-card {
        top: 0;
        left: 4%;
        width: 92%;
        padding: 0 32px
      }

      .svc-hero-img {
        max-width: 56%
      }

      .svc-areas-grid {
        grid-template-columns: 1fr
      }

      .svc-areas-arrow-col {
        display: none
      }
    }

    @media(max-width:768px) {

      .svc-hero {
        min-height: 320px
      }

      .svc-hero-inner {
        height: 180px
      }

      .svc-hero-title {
        font-size: 1.1rem
      }

      .svc-area-item {
        gap: 16px
      }

      .svc-area-item img {
        width: 46px;
        height: 46px
      }
    }

    /* ── ABOUT US PAGE ── */
    .au-hero {
      position: relative;
      padding: 140px 24px 70px;
      background: linear-gradient(180deg, #0A1F4D 0%, #12336E 35%, #2160D6 75%, #3B82F6 100%);
      background-image: url(images/about-us/bg-pattern.svg), linear-gradient(180deg, #0A1F4D 0%, #12336E 35%, #2160D6 75%, #3B82F6 100%);
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      overflow: hidden
    }

    .au-hero-title {
      text-align: center;
      color: #fff;
      font-weight: 800;
      letter-spacing: .04em;
      font-size: clamp(1.8rem, 5vw, 3.6rem);
      margin: 0 auto 64px;
      max-width: 1100px
    }

    .au-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      max-width: 1100px;
      margin: 0 auto;
      text-align: center
    }

    .au-stat {
      position: relative;
      padding: 0 20px
    }

    .au-stat:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 10%;
      bottom: 10%;
      width: 1px;
      background: rgba(255, 255, 255, .2)
    }

    .au-stat-num {
      color: #fff;
      font-weight: 800;
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      line-height: 1
    }

    .au-stat-num .suf {
      font-size: .5em;
      font-weight: 700
    }

    .au-stat-label {
      color: rgba(255, 255, 255, .75);
      font-size: .95rem;
      margin-top: 10px
    }

    .au-scroll-dot {
      display: block;
      margin: 56px auto 0;
      width: 16px;
      height: auto;
      object-fit: contain;
      animation: auBob 1.8s ease-in-out infinite
    }

    @keyframes auBob {

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

      50% {
        transform: translateY(10px)
      }
    }

    .au-profit-sec {
      padding: 90px 24px 110px;
      background: linear-gradient(180deg, #12336E 0%, #2160D6 55%, #3B82F6 100%)
    }

    .au-profit-inner {
      max-width: 1100px;
      margin: 0 auto
    }

    .au-profit-inner h3 {
      color: var(--amber);
      font-size: clamp(1.5rem, 2.6vw, 2rem);
      font-weight: 700;
      margin-bottom: 18px
    }

    .au-profit-inner>p {
      color: rgba(255, 255, 255, .92);
      font-size: 1.15rem;
      line-height: 1.8;
      margin-bottom: 64px
    }

    .au-mv-grid {
      display: flex;
      flex-direction: column;
      gap: 64px
    }

    .au-mv-grid>div {
      max-width: 900px
    }

    .au-mv-grid h3 {
      color: var(--amber);
      font-size: clamp(1.5rem, 2.6vw, 2rem);
      font-weight: 700;
      margin-bottom: 14px
    }

    .au-mv-grid p {
      color: rgba(255, 255, 255, .88);
      line-height: 1.75
    }

    .au-story-sec {
      padding: 100px 0;
      background: var(--bg)
    }

    .au-story-tabs {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 50px
    }

    .au-story-tab {
      padding: 12px 30px;
      border-radius: var(--r-full);
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--muted);
      font-weight: 700;
      cursor: pointer;
      transition: var(--tr)
    }

    .au-story-tab.active {
      background: var(--pri);
      border-color: var(--pri);
      color: #fff
    }

    .au-story-panel {
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center
    }

    .au-story-panel.active {
      display: grid
    }

    .au-story-panel img {
      width: 100%;
      height: 340px;
      object-fit: cover;
      border-radius: var(--r20);
      box-shadow: var(--sh-lg)
    }

    .au-story-panel ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .au-story-panel li {
      position: relative;
      padding-left: 26px;
      color: var(--mid);
      line-height: 1.6
    }

    .au-story-panel li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 9px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--pri)
    }

    .au-customers-sec {
      padding: 40px 24px 120px;
      background: #3B82F6
    }

    .au-customers-card {
      max-width: 1300px;
      margin: 0 auto;
      background: var(--bg);
      border-radius: 32px;
      box-shadow: var(--sh-lg);
      padding: 64px 56px
    }

    .au-customers-card h2 {
      text-align: center;
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 40px
    }

    .au-cust-tabs {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 44px
    }

    .au-cust-tab {
      padding: 12px 26px;
      border-radius: var(--r-full);
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--mid);
      font-weight: 600;
      cursor: pointer;
      transition: var(--tr)
    }

    .au-cust-tab.active {
      background: var(--pri-l);
      border-color: var(--pri);
      color: var(--pri-d)
    }

    .au-cust-panel {
      display: none
    }

    .au-cust-panel.active {
      display: block
    }

    .au-logo-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px
    }

    .au-logo-grid img {
      width: 100%;
      height: 90px;
      object-fit: contain;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--r16);
      box-shadow: var(--sh-sm);
      padding: 18px 22px
    }

    .au-testi-carousel {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
      min-height: 220px
    }

    .au-testi-quote {
      color: #7DC4F5;
      font-size: 3.4rem;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 10px
    }

    .au-testi {
      display: none;
      flex-direction: column;
      gap: 8px
    }

    .au-testi.active {
      display: flex
    }

    .au-testi p {
      color: var(--mid);
      line-height: 1.8;
      font-size: 1.1rem;
      font-style: italic
    }

    .au-testi cite {
      font-style: normal;
      font-weight: 700;
      color: #3A82F0;
      font-size: 1.2rem;
      margin-top: 18px;
      display: block
    }

    .au-testi span {
      color: var(--muted);
      font-size: .95rem
    }

    .au-testi-nav-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      margin-top: 34px
    }

    .au-testi-nav {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--mid);
      font-size: 1.4rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--tr)
    }

    .au-testi-nav:hover {
      background: var(--pri);
      border-color: var(--pri);
      color: #fff
    }

    .au-testi-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px
    }

    .au-testi-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border);
      border: none;
      cursor: pointer;
      padding: 0
    }

    .au-testi-dot.active {
      background: var(--dark)
    }

    .au-values-sec {
      padding: 100px 24px;
      background: var(--bg2);
      text-align: center
    }

    .au-values-sec h2 {
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 700;
      color: var(--dark)
    }

    .au-values-sec h2 em {
      color: var(--pri);
      font-style: italic
    }

    .au-values-sec>p {
      max-width: 640px;
      margin: 18px auto 56px;
      color: var(--muted)
    }

    .au-values-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      max-width: 1100px;
      margin: 0 auto
    }

    .au-value-item {
      background: var(--bg);
      border-radius: var(--r20);
      padding: 36px 26px;
      box-shadow: var(--sh-sm)
    }

    .au-value-letter {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--pri);
      color: #fff;
      font-weight: 800;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px
    }

    .au-value-item h3 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 10px
    }

    .au-value-item p {
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.6
    }

    .au-team-sec {
      padding: 100px 24px;
      background: #15042E
    }

    .au-team-sec .au-dark-eyebrow {
      display: block;
      text-align: center;
      color: #fff;
      font-size: clamp(1.4rem, 2.6vw, 2rem);
      letter-spacing: .08em;
      margin-bottom: 8px
    }

    .au-team-sec h2 {
      text-align: center;
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      font-weight: 600;
      color: #6FB4F0;
      margin-bottom: 56px
    }

    .au-team-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      max-width: 1300px;
      margin: 0 auto
    }

    .au-team-card {
      text-align: center
    }

    .au-team-card img {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      object-fit: cover;
      margin: 0 auto 18px;
      box-shadow: var(--sh-md)
    }

    .au-team-card h3 {
      font-size: 1.05rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px
    }

    .au-team-card p {
      color: rgba(255, 255, 255, .6);
      font-size: .86rem;
      line-height: 1.55
    }

    .au-locations-sec {
      padding: 100px 24px;
      background: #15042E
    }

    .au-locations-sec .au-dark-eyebrow {
      display: block;
      text-align: center;
      color: #fff;
      font-size: clamp(1.4rem, 2.6vw, 2rem);
      letter-spacing: .08em;
      margin-bottom: 8px
    }

    .au-locations-sec h2 {
      text-align: center;
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      font-weight: 600;
      color: #6FB4F0;
      margin-bottom: 56px
    }

    .au-loc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      max-width: 1100px;
      margin: 0 auto
    }

    .au-loc-card {
      text-align: center;
      padding: 12px
    }

    .au-loc-card img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      margin: 0 auto 20px;
      box-shadow: var(--sh-md)
    }

    .au-loc-card h5 {
      font-size: 1.15rem;
      font-weight: 600;
      color: #6FB4F0;
      margin-bottom: 8px
    }

    .au-loc-card p {
      color: rgba(255, 255, 255, .85);
      font-size: .9rem;
      line-height: 1.6
    }

    @media(max-width:1024px) {

      .au-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px
      }

      .au-stat:nth-child(2)::after {
        display: none
      }

      .au-mv-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .au-story-panel {
        grid-template-columns: 1fr
      }

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

      .au-testi-nav {
        width: 38px;
        height: 38px
      }

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

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

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

    @media(max-width:640px) {

      .au-stats-grid {
        grid-template-columns: 1fr;
        gap: 30px
      }

      .au-stat::after {
        display: none
      }

      .au-logo-grid {
        grid-template-columns: 1fr
      }

      .au-values-grid {
        grid-template-columns: 1fr
      }

      .au-team-grid {
        grid-template-columns: 1fr
      }

      .au-loc-grid {
        grid-template-columns: 1fr
      }
    }

    /* ── OUR STORY PAGE ── */
    .os-hero {
      padding: 160px 24px 80px;
      background: #15042E;
      text-align: center
    }

    .os-hero h1 {
      color: #fff;
      font-weight: 600;
      font-size: clamp(1.8rem, 3.6vw, 2.8rem)
    }

    .os-timeline-sec {
      padding: 90px 24px 110px;
      background: #15042E;
      position: relative;
      overflow: hidden
    }

    .os-timeline {
      position: relative;
      max-width: 1200px;
      margin: 0 auto
    }

    .os-timeline::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: rgba(255, 255, 255, .18);
      transform: translateX(-50%)
    }

    .os-item {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 60px 1fr;
      align-items: start;
      gap: 40px;
      margin-bottom: 70px
    }

    .os-marker {
      margin-top: 4px
    }

    .os-item:last-child {
      margin-bottom: 0
    }

    .os-marker {
      grid-column: 2;
      grid-row: 1;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--pri);
      border: 4px solid rgba(255, 255, 255, .5);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      box-shadow: 0 0 0 6px rgba(58, 130, 240, .18)
    }

    .os-marker svg {
      width: 20px;
      height: 20px;
      stroke: #fff;
      fill: none;
      stroke-width: 2
    }

    .os-content {
      background: var(--bg);
      border-radius: var(--r16);
      padding: 36px 40px;
      box-shadow: var(--sh-lg)
    }

    .os-item.right .os-content {
      grid-column: 3;
      grid-row: 1
    }

    .os-item.left .os-content {
      grid-column: 1;
      grid-row: 1
    }

    .os-media {
      display: flex;
      align-items: center;
      grid-row: 1
    }

    .os-item.right .os-media {
      grid-column: 1;
      justify-content: flex-end
    }

    .os-item.left .os-media {
      grid-column: 3;
      justify-content: flex-start
    }

    .os-media img {
      width: 100%;
      max-width: 320px;
      background: var(--bg);
      border-radius: var(--r16);
      box-shadow: var(--sh-lg);
      padding: 30px;
      object-fit: contain
    }

    .os-year {
      color: #3A82F0;
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 18px
    }

    .os-content h3 {
      color: #3A82F0;
      font-size: 1.15rem;
      font-weight: 700;
      margin: 20px 0 10px
    }

    .os-content h3:first-of-type {
      margin-top: 0
    }

    .os-content ul {
      list-style: disc;
      padding-left: 22px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .os-content li {
      color: var(--mid);
      line-height: 1.6;
      font-size: .96rem
    }

    .os-content li em {
      font-style: italic;
      color: var(--dark)
    }

    @media(max-width:900px) {

      .os-timeline::before {
        left: 22px
      }

      .os-item {
        grid-template-columns: 46px 1fr;
        gap: 20px
      }

      .os-marker {
        grid-column: 1;
        grid-row: 1
      }

      .os-item.right .os-content,
      .os-item.left .os-content {
        grid-column: 2;
        grid-row: 1
      }

      .os-item .os-media {
        display: none
      }

      .os-content {
        padding: 26px
      }
    }

    /* ── CUSTOMERS PAGE ── */
    .cu-hero {
      position: relative;
      line-height: 0
    }

    .cu-hero img {
      width: 100%;
      height: 30vh;
      min-height: 240px;
      max-height: none;
      object-fit: cover;
      display: block
    }

    .au-customers-sec.cu-standalone {
      padding: 0 24px 120px;
      background: #3B82F6
    }

    .au-customers-sec.cu-standalone .au-customers-card {
      border-radius: 0 0 32px 32px;
      padding-top: 64px
    }

    /* ── CASE STUDIES PAGE ── */
    .csp-hero {
      position: relative;
      line-height: 0
    }

    .csp-hero img {
      width: 100%;
      height: 30vh;
      min-height: 240px;
      max-height: none;
      object-fit: cover;
      object-position: center;
      display: block
    }

    .csp-hero img.blg-hero-img {
      object-position: center 25%
    }

    .csp-hero::after,
    .cu-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(10, 16, 40, .1) 0%, rgba(10, 16, 40, .6) 100%);
      pointer-events: none
    }

    .hero-page-label {
      position: absolute;
      left: 50%;
      bottom: 44px;
      transform: translateX(-50%);
      color: #fff;
      font-size: clamp(1.9rem, 4.2vw, 3.2rem);
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
      z-index: 1;
      width: 90%
    }

    .csp-sec {
      padding: 90px 0 120px;
      background: var(--bg2)
    }

    .csp-sec.csp-sec-grad {
      position: relative;
      overflow: hidden;
      background: linear-gradient(120deg, #F1E9FB 0%, #FBF3EE 45%, #FCEAE0 100%)
    }

    .csp-sec.csp-sec-grad::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(13, 66, 105, .04) 1px, transparent 1px),
        linear-gradient(rgba(13, 66, 105, .04) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
      pointer-events: none
    }

    .csp-sec.csp-sec-grad .csp-wrap {
      position: relative
    }

    .csp-wrap {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 48px;
      align-items: start
    }

    .csp-main {
      display: flex;
      flex-direction: column;
      gap: 36px
    }

    .csp-main-full {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px
    }

    .csp-main-full .csp-card-media img {
      height: 220px
    }

    .csp-main-full .csp-card-body {
      padding: 32px 26px 26px
    }

    .csp-main-full .csp-card-body p {
      font-size: .88rem
    }

    .csp-card {
      display: block;
      background: #fff;
      border-radius: var(--r16);
      overflow: hidden;
      box-shadow: var(--sh-md);
      border: 1px solid var(--border-l);
      transition: var(--tr)
    }

    .csp-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg)
    }

    .csp-card-media {
      position: relative;
      line-height: 0
    }

    .csp-card-media img {
      width: 100%;
      height: 340px;
      object-fit: cover;
      display: block
    }

    .csp-date {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--pri-d);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1.15;
      box-shadow: var(--sh-md)
    }

    .csp-date b {
      font-size: 1.05rem;
      font-weight: 700
    }

    .csp-date span {
      font-size: .62rem;
      font-weight: 500;
      letter-spacing: .5px;
      text-transform: uppercase;
      opacity: .85
    }

    .csp-card-body {
      padding: 32px 32px 30px
    }

    .csp-card-body h3 {
      color: var(--dark);
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 14px
    }

    .csp-card-body p {
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.7
    }

    .csp-aside {
      display: flex;
      flex-direction: column;
      gap: 44px
    }

    .csp-widget h4 {
      color: #4C7FE0;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      margin-bottom: 16px
    }

    .csp-widget h4::after {
      content: '';
      display: block;
      width: 42px;
      height: 3px;
      margin-top: 12px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--pri), #70e3fd)
    }

    .csp-list li {
      list-style: none;
      border-bottom: 1px solid var(--border-l);
      padding: 6px 0
    }

    .csp-list li:first-child {
      padding-top: 0
    }

    .csp-list li:last-child {
      border-bottom: none
    }

    .csp-list a {
      color: #4C7FE0;
      font-family: 'OptimaNovaProLight', 'DM Sans', sans-serif;
      font-size: .82rem;
      line-height: 1.5;
      transition: var(--tr)
    }

    .csp-list a:hover {
      color: var(--pri-d)
    }

    @media(max-width:960px) {
      .csp-wrap {
        grid-template-columns: 1fr
      }

      .csp-card-media img {
        height: 260px
      }

      .csp-main-full {
        grid-template-columns: 1fr
      }

      .csp-main-full .csp-card-media img {
        height: 260px
      }
    }

    /* ── BLOG PAGE ── */
    .blg-main {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
      align-content: start
    }

    .blg-main-full {
      grid-template-columns: repeat(3, 1fr)
    }

    .blg-card {
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: var(--r16);
      overflow: hidden;
      box-shadow: var(--sh-md);
      border: 1px solid var(--border-l);
      transition: var(--tr)
    }

    .blg-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg)
    }

    .blg-card-media {
      position: relative;
      line-height: 0
    }

    .blg-card-media img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block
    }

    .blg-card-body {
      padding: 24px 26px 28px
    }

    .blg-cat {
      color: var(--muted);
      font-size: .76rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 10px
    }

    .blg-card-body h3 {
      color: var(--dark);
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 10px
    }

    .blg-card-body p {
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.65
    }

    .blg-pagination {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 16px
    }

    .blg-page-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--mid);
      font-weight: 600;
      font-size: .95rem;
      cursor: pointer;
      transition: var(--tr)
    }

    .blg-page-btn:hover {
      background: var(--pri-l);
      border-color: var(--pri-m)
    }

    .blg-page-btn.active {
      background: var(--pri-d);
      color: #fff;
      border-color: var(--pri-d)
    }

    .blg-page-prev,
    .blg-page-next {
      font-size: 1.3rem;
      line-height: 1
    }

    @media(max-width:960px) {
      .blg-main {
        grid-template-columns: 1fr
      }

      .blg-main-full {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:1240px) and (min-width:961px) {
      .blg-main-full {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    /* ── NEWS ROOM PAGE ── */
    .csp-hero img.news-hero-img {
      object-position: center 30%
    }

    .news-card {
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: var(--r16);
      overflow: hidden;
      box-shadow: var(--sh-md);
      border: 1px solid var(--border-l);
      transition: var(--tr)
    }

    .news-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg)
    }

    .news-card-media {
      line-height: 0;
      background: var(--bg3)
    }

    .news-card-media img {
      width: 100%;
      height: 170px;
      object-fit: contain;
      display: block;
      padding: 18px
    }

    .news-card-body {
      padding: 6px 26px 28px
    }

    .news-card-body h3 {
      color: var(--dark);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.45;
      margin-bottom: 12px
    }

    .news-card-body p {
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.65
    }

    /* ── PODCASTS PAGE ── */
    .csp-hero img.pod-hero-img {
      object-position: center 30%
    }

    .pod-soon {
      padding: 160px 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(120deg, #F1E9FB 0%, #FBF3EE 45%, #FCEAE0 100%)
    }

    .pod-soon::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(13, 66, 105, .04) 1px, transparent 1px),
        linear-gradient(rgba(13, 66, 105, .04) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
      pointer-events: none
    }

    .pod-soon-inner {
      position: relative;
      text-align: center
    }

    .pod-soon-title {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-weight: 700;
      font-size: clamp(2.6rem, 8vw, 5.5rem);
      line-height: 1.1;
      margin-bottom: 22px;
      background: linear-gradient(100deg, #1a2b4a 0%, #1a2b4a 32%, #d9a441 62%, #f0c869 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .pod-soon-sub {
      font-family: 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 4px;
      color: var(--muted);
      font-size: .95rem;
      margin-bottom: 26px
    }

    .pod-soon-divider {
      display: inline-block;
      width: 70px;
      height: 2px;
      background: var(--light)
    }

    @media(max-width:600px) {
      .pod-soon {
        padding: 100px 0
      }

      .pod-soon-sub {
        letter-spacing: 2px
      }
    }

    /* ── CAREERS PAGE ── */
    .car-hero {
      position: relative;
      height: 640px;
      min-height: 480px;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center
    }

    .car-hero-inner {
      position: relative;
      width: 100%;
      height: 100%
    }

    .car-hero-title {
      position: absolute;
      top: 38%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: clamp(2rem, 4vw, 2.6rem);
      text-align: center
    }

    .car-quote {
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 34px;
      max-width: 780px;
      display: flex;
      align-items: center;
      gap: 26px;
      background: rgba(199, 210, 245, .88);
      padding: 26px 40px;
      border-radius: var(--r16)
    }

    .car-quote img {
      width: 40px;
      height: 40px;
      flex-shrink: 0
    }

    .car-quote p {
      color: #111827;
      font-size: 1.05rem;
      line-height: 1.6;
      margin: 0
    }

    .car-intro {
      padding: 110px 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(120deg, #F1E9FB 0%, #FBF3EE 45%, #FCEAE0 100%)
    }

    .car-intro::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(13, 66, 105, .04) 1px, transparent 1px),
        linear-gradient(rgba(13, 66, 105, .04) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
      pointer-events: none
    }

    .car-intro-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 60px;
      align-items: center
    }

    .car-intro-copy p {
      color: var(--mid);
      font-size: 1.05rem;
      line-height: 1.85;
      margin-bottom: 36px
    }

    .car-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 18px 46px;
      border-radius: var(--r-full);
      background: #3B82F6;
      color: #fff;
      font-weight: 700;
      font-size: .95rem;
      box-shadow: 0 14px 30px rgba(59, 130, 246, .35);
      transition: var(--tr)
    }

    .car-btn:hover {
      background: #2563eb;
      transform: translateY(-2px)
    }

    .car-intro-media img {
      width: 100%;
      display: block
    }

    .car-why {
      line-height: 0
    }

    .car-why img {
      width: 100%;
      display: block
    }

    .car-life {
      padding: 110px 0;
      background: var(--bg2)
    }

    .car-life-head {
      text-align: center;
      margin-bottom: 52px
    }

    .car-life-kicker {
      display: block;
      color: #4C7FE0;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: .85rem;
      margin-bottom: 10px
    }

    .car-life-head h2 {
      font-size: clamp(1.9rem, 3.6vw, 2.6rem);
      color: var(--dark);
      font-weight: 600
    }

    .car-life-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px
    }

    .car-life-card {
      background: #fff;
      border-radius: var(--r16);
      overflow: hidden;
      box-shadow: var(--sh-md);
      transition: var(--tr)
    }

    .car-life-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg)
    }

    .car-life-card img {
      width: 100%;
      height: 210px;
      object-fit: cover;
      display: block
    }

    .car-life-card h3 {
      padding: 20px;
      text-align: center;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--dark)
    }

    .car-teams {
      padding: 110px 0;
      position: relative;
      background-color: #15042E;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover
    }

    .car-teams::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, .22);
      pointer-events: none
    }

    .car-teams .container {
      position: relative
    }

    .car-teams-head {
      text-align: center;
      margin-bottom: 52px
    }

    .car-teams-kicker {
      display: block;
      color: rgba(255, 255, 255, .65);
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: .85rem;
      margin-bottom: 12px
    }

    .car-teams-head h2 {
      color: #fff;
      font-size: clamp(1.9rem, 3.6vw, 2.6rem);
      font-weight: 600
    }

    .car-teams-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 90px
    }

    .car-teams-media {
      position: relative;
      border-radius: var(--r16);
      overflow: hidden;
      margin-bottom: 18px
    }

    .car-teams-media img {
      width: 100%;
      height: 190px;
      object-fit: cover;
      display: block
    }

    .car-teams-card h3 {
      color: #fff;
      text-align: center;
      font-size: 1.15rem;
      font-weight: 500
    }

    .car-join {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: start
    }

    .car-join-kicker {
      display: block;
      color: rgba(255, 255, 255, .65);
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: .85rem;
      margin-bottom: 10px
    }

    .car-join-copy h3 {
      color: #fff;
      font-size: clamp(1.8rem, 3.4vw, 2.4rem);
      font-weight: 600;
      margin-bottom: 30px
    }

    .car-join-text {
      color: rgba(255, 255, 255, .7);
      font-size: 1rem;
      line-height: 1.85;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .15)
    }

    @media(max-width:960px) {
      .car-intro-grid {
        grid-template-columns: 1fr
      }

      .car-intro-media {
        order: -1
      }

      .car-life-grid {
        grid-template-columns: 1fr 1fr
      }

      .car-teams-grid {
        grid-template-columns: 1fr 1fr
      }

      .car-join {
        grid-template-columns: 1fr
      }

      .car-hero {
        height: 640px
      }

      .car-quote {
        left: 16px;
        right: 16px;
        bottom: 24px;
        max-width: none;
        width: auto;
        padding: 22px 24px
      }
    }

    @media(max-width:600px) {
      .car-hero {
        height: 600px
      }

      .car-hero-title {
        top: 24%
      }

      .car-quote {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        left: 12px;
        right: 12px;
        bottom: 16px;
        padding: 20px 20px
      }

      .car-life-grid {
        grid-template-columns: 1fr
      }

      .car-teams-grid {
        grid-template-columns: 1fr
      }
    }

    /* ── BLOG POST PAGE ── */
    .post-hero {
      position: relative;
      height: clamp(280px, 42vw, 560px);
      overflow: hidden
    }

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

    .post-hero-title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: 82%;
      background: rgba(8, 18, 40, .58);
      backdrop-filter: blur(2px);
      padding: 26px 48px;
      border-radius: var(--r12);
      text-align: center
    }

    .post-hero-title h1 {
      color: #fff;
      font-size: clamp(1.2rem, 2.6vw, 1.9rem);
      font-weight: 600;
      line-height: 1.4
    }

    .post-sec {
      padding: 90px 0 110px;
      background: #fff
    }

    .post-body {
      max-width: 860px;
      margin: 0 auto
    }

    .post-body h2,
    .post-body h3,
    .post-body h4 {
      color: #4C7FE0;
      font-weight: 700;
      line-height: 1.4;
      margin: 42px 0 18px
    }

    .post-body h2:first-child,
    .post-body h3:first-child,
    .post-body h4:first-child {
      margin-top: 0
    }

    .post-body h2 {
      font-size: 1.55rem
    }

    .post-body h3 {
      font-size: 1.35rem
    }

    .post-body h4 {
      font-size: 1.15rem
    }

    .post-body p {
      color: var(--mid);
      font-size: 1.05rem;
      line-height: 1.9;
      margin-bottom: 22px
    }

    .post-body ul,
    .post-body ol {
      color: var(--mid);
      font-size: 1.05rem;
      line-height: 1.85;
      margin: 0 0 22px 26px
    }

    .post-body li {
      margin-bottom: 14px
    }

    .post-body a {
      color: #4C7FE0;
      text-decoration: underline
    }

    .post-body strong {
      color: var(--dark)
    }

    .post-body figure {
      margin: 30px 0
    }

    .post-body figure img {
      max-width: 100%;
      height: auto;
      border-radius: var(--r12);
      display: block;
      margin: 0 auto
    }

    .post-related {
      padding: 90px 0 110px;
      background: var(--bg2);
      text-align: center
    }

    .post-related-kicker {
      display: block;
      color: #4C7FE0;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      font-size: .85rem;
      margin-bottom: 10px
    }

    .post-related h2 {
      font-family: 'OptimaNovaProLight', 'DM Sans', sans-serif;
      font-weight: 400;
      color: #0A1442;
      font-size: clamp(1.9rem, 3.8vw, 2.7rem);
      margin-bottom: 52px
    }

    .post-related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      max-width: 1100px;
      margin: 0 auto;
      text-align: left
    }

    .post-related-card {
      display: block;
      background: #fff;
      border-radius: var(--r16);
      overflow: hidden;
      box-shadow: var(--sh-md);
      transition: var(--tr)
    }

    .post-related-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg)
    }

    .post-related-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block
    }

    .post-related-card-body {
      padding: 22px 24px 28px
    }

    .post-related-cat {
      color: var(--muted);
      font-size: .85rem;
      margin-bottom: 10px
    }

    .post-related-card h3 {
      color: #4C7FE0;
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.4;
      margin: 0
    }

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

    @media(max-width:600px) {
      .post-hero-title {
        max-width: 92%;
        padding: 18px 26px
      }

      .post-related-grid {
        grid-template-columns: 1fr
      }
    }

    /* ── CATEGORY PAGE ── */
    .cat-hero {
      position: relative;
      height: clamp(240px, 36vw, 440px);
      overflow: hidden
    }

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

    .cat-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(10, 16, 40, .25) 0%, rgba(10, 16, 40, .55) 100%)
    }

    .cat-hero-label {
      position: absolute;
      left: 50%;
      bottom: 36px;
      transform: translateX(-50%);
      color: #fff;
      font-size: clamp(1.5rem, 3.4vw, 2.4rem);
      font-weight: 700;
      text-align: center;
      z-index: 1;
      width: 90%
    }

    .cat-empty {
      text-align: center;
      padding: 60px 20px;
      background: #fff;
      border-radius: var(--r16);
      box-shadow: var(--sh-md)
    }

    .cat-empty p {
      color: var(--muted);
      font-size: 1.05rem;
      margin-bottom: 28px
    }

    /* ── BPM INDUSTRY PAGE ── */
    .bpm-hero {
      position: relative;
      height: clamp(320px, 44vw, 560px);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .bpm-hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .bpm-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(10, 15, 30, .28)
    }

    .bpm-hero h1 {
      position: relative;
      z-index: 1;
      color: #fff;
      font-family: 'OptimaNovaProLight', 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      text-align: center
    }

    .bpm-intro-sec {
      position: relative;
      overflow: hidden;
      padding: 90px 0 150px;
      background: linear-gradient(120deg, #F1E9FB 0%, #FBF3EE 45%, #FCEAE0 100%)
    }

    .bpm-intro-sec::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(13, 66, 105, .04) 1px, transparent 1px),
        linear-gradient(rgba(13, 66, 105, .04) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
      pointer-events: none
    }

    .bpm-intro-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px
    }

    .bpm-intro-item {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%
    }

    .bpm-intro-card {
      display: flex;
      flex-direction: column;
      flex: 1;
      position: relative;
      z-index: 1;
      background: #fff;
      box-shadow: var(--sh-lg);
      text-align: center;
      overflow: hidden;
      transition: background .4s ease, transform .4s ease, box-shadow .4s ease
    }

    .bpm-intro-item:hover .bpm-intro-card {
      background: linear-gradient(155deg, #0c1338 0%, #080d28 100%);
      transform: translateY(-14px);
      box-shadow: 0 26px 55px rgba(6, 10, 35, .35)
    }

    .bpm-intro-media {
      position: relative;
      line-height: 0
    }

    .bpm-intro-media img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      display: block
    }

    .bpm-intro-icon {
      position: absolute;
      left: 50%;
      bottom: -32px;
      transform: translateX(-50%);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: var(--sh-md);
      border: 3px solid #fff
    }

    .bpm-intro-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .bpm-intro-card h3 {
      margin: 48px 28px 12px;
      font-size: 1.15rem;
      font-weight: 700;
      color: #3B82F6;
      transition: color .35s ease
    }

    .bpm-intro-item:hover .bpm-intro-card h3 {
      color: #fff
    }

    .bpm-intro-card p {
      margin: 0 28px 32px;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.6;
      transition: color .35s ease
    }

    .bpm-intro-item:hover .bpm-intro-card p {
      color: rgba(255, 255, 255, .72)
    }

    .bpm-intro-btn-bar {
      display: block;
      position: relative;
      z-index: 0;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      text-align: center;
      color: #fff;
      font-weight: 600;
      font-size: .9rem;
      background: #6b7690;
      transition: max-height .4s ease .05s, opacity .3s ease .05s
    }

    .bpm-intro-item:hover .bpm-intro-btn-bar {
      max-height: 64px;
      opacity: 1;
      padding: 20px 0 16px
    }

    .bpm-section {
      position: relative;
      padding: 100px 0;
      background-color: #fbfbfd;
      background-image: url('images/bpm/hex-pattern.svg');
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 1400px auto
    }

    .bpm-section:nth-child(even) {
      background-color: #f4f5fa
    }

    .bpm-section-head {
      position: relative;
      text-align: center;
      max-width: 760px;
      margin: 0 auto 70px
    }

    .bpm-section-title {
      color: #3B82F6;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 600;
      font-size: clamp(1.3rem, 2.6vw, 1.9rem);
      margin-bottom: 14px
    }

    .bpm-section-subtitle {
      color: var(--dark);
      letter-spacing: .5px;
      font-size: 1.05rem;
      line-height: 1.6
    }

    .bpm-subsection {
      position: relative;
      max-width: 1140px;
      margin: 0 auto;
      padding-top: 70px
    }

    .bpm-subsection:first-child {
      padding-top: 0
    }

    .bpm-subsection-grid {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 60px;
      align-items: start
    }

    .bpm-subsection.alt .bpm-subsection-grid {
      grid-template-columns: 1fr 340px
    }

    .bpm-subsection.alt .bpm-subsection-media {
      order: 2
    }

    .bpm-subsection.alt .bpm-card-stack {
      order: 1
    }

    .bpm-subsection-media {
      position: sticky;
      top: 110px;
      text-align: center
    }

    .bpm-subsection-media img {
      width: 100%;
      height: 320px;
      object-fit: cover;
      border-radius: var(--r20);
      box-shadow: var(--sh-lg);
      display: block
    }

    .bpm-subsection-media h3 {
      margin-top: 22px;
      font-size: 1.4rem;
      font-weight: 500;
      color: var(--dark)
    }

    .bpm-card-stack {
      position: relative
    }

    .bpm-card-row {
      position: sticky;
      background: linear-gradient(155deg, #0c1338 0%, #080d28 100%);
      border-radius: var(--r24);
      box-shadow: 0 26px 55px rgba(6, 10, 35, .4);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 20px;
      width: 92%;
      min-height: 240px;
      padding: 38px 44px;
      margin: 0 auto 24px
    }

    .bpm-card-row:nth-child(1) {
      top: 100px
    }

    .bpm-card-row:nth-child(2) {
      top: 120px
    }

    .bpm-card-row:nth-child(3) {
      top: 140px
    }

    .bpm-card-row:nth-child(4) {
      top: 160px
    }

    .bpm-card-row:nth-child(5) {
      top: 180px
    }

    .bpm-card-row:nth-child(6) {
      top: 200px
    }

    .bpm-card-row:nth-child(7) {
      top: 220px
    }

    .bpm-card-row:nth-child(8) {
      top: 240px
    }

    .bpm-card-row:last-child {
      margin-bottom: 0
    }

    .bpm-card-row h3 {
      color: #fff;
      font-size: 1.35rem;
      font-weight: 700;
      margin-bottom: 14px;
      line-height: 1.35
    }

    .bpm-card-row p {
      color: rgba(255, 255, 255, .68);
      font-size: .95rem;
      line-height: 1.7;
      max-width: 520px
    }

    .bpm-card-num {
      font-size: clamp(2.6rem, 5.6vw, 4.6rem);
      font-weight: 800;
      line-height: 1;
      justify-self: end;
      color: transparent;
      -webkit-text-stroke: 2px #3B82F6;
      opacity: .55;
      transition: opacity .4s ease, color .4s ease
    }

    .bpm-card-row.active .bpm-card-num {
      opacity: 1;
      color: #fff;
      -webkit-text-stroke: 2px #3B82F6;
      background: linear-gradient(180deg, #7db2ff, #3B82F6);
      -webkit-background-clip: text;
      background-clip: text
    }

    @media(max-width:960px) {
      .bpm-intro-grid {
        grid-template-columns: 1fr
      }

      .bpm-subsection-grid {
        grid-template-columns: 1fr
      }

      .bpm-subsection.alt .bpm-subsection-grid {
        grid-template-columns: 1fr
      }

      .bpm-subsection-media,
      .bpm-subsection.alt .bpm-subsection-media {
        order: 0;
        position: static;
        margin-bottom: 30px
      }

      .bpm-card-stack,
      .bpm-subsection.alt .bpm-card-stack {
        order: 0
      }

      .bpm-card-row {
        position: relative;
        top: 0 !important
      }
    }

    @media(max-width:600px) {
      .bpm-card-row {
        grid-template-columns: 1fr;
        padding: 30px 26px
      }

      .bpm-card-num {
        justify-self: start
      }
    }

    /* ── RTS VELOCITY MAIN PAGE ── */
    .vel-hero {
      position: relative;
      height: clamp(340px, 46vw, 620px);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .vel-hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .vel-hero-title {
      position: relative;
      z-index: 1;
      background: rgba(30, 25, 45, .55);
      backdrop-filter: blur(2px);
      padding: 26px 60px;
      border-radius: var(--r16)
    }

    .vel-hero-title h1 {
      color: #fff;
      font-family: Georgia, 'Times New Roman', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.8rem, 4vw, 2.6rem)
    }

    .vel-intro-sec {
      padding: 110px 0;
      background: #fff
    }

    .vel-intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 40px
    }

    .vel-intro-kicker {
      display: block;
      color: #3B82F6;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 600;
      font-size: .95rem;
      margin-bottom: 14px
    }

    .vel-intro-text h2 {
      font-size: clamp(1.8rem, 3.6vw, 2.6rem);
      color: var(--dark);
      font-weight: 400;
      margin-bottom: 26px
    }

    .vel-intro-text p {
      color: var(--mid);
      font-size: 1.02rem;
      line-height: 1.9
    }

    .vel-intro-text p strong {
      color: var(--dark)
    }

    .vel-intro-arrow {
      justify-self: center
    }

    .vel-intro-arrow img {
      width: 100%;
      max-width: 260px;
      height: auto;
      display: block
    }

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

      .vel-intro-arrow {
        display: none
      }
    }

    .vc-card-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 18px;
      color: var(--mid);
      font-size: .9rem;
      font-weight: 600;
      transition: var(--tr)
    }

    .vc-card-row:hover .vc-card-more {
      color: var(--pri)
    }

    .vc-stack-heading {
      text-align: center;
      color: #fff;
      font-weight: 300;
      font-size: clamp(1.6rem, 3.4vw, 2.4rem);
      margin: -40px 0 60px
    }