:root {
        --color-primary: #001f55;
        --color-primary-dark: #001133;
        --color-secondary: #ff421d;
        --color-secondary-dark: #d83112;
        --color-studio-bg: #f8f9fa;
        --color-tertiary: #0f0f11;
      }

      html,
      body {
        margin: 0;
        padding: 0;
        background-color: var(--color-studio-bg);
        color: var(--color-tertiary);
        font-family: "Inter", sans-serif;
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
      }

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

      /* ── fadeUp animation ── */
      @keyframes fadeUp {
        0% {
          opacity: 0;
          transform: translateY(36px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .fade-up {
        opacity: 0;
        transform: translateY(36px);
        transition: none;
      }

      .fade-up.is-visible {
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      /* ── Hero gradient mesh ── */
      .hero-gradient {
        background: linear-gradient(
            to bottom,
            rgba(20, 30, 48, 0.6) 0%,
            rgba(10, 18, 32, 0.85) 60%,
            rgba(6, 12, 22, 1) 100%
          ),
          url('../../Images/blog/cargo_connect_1780479299956.jpg');
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .hero-gradient::before {
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
      }

      /* ── Floating grid decoration ── */
      .hero-grid {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px
          ),
          linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px
          );
        background-size: 60px 60px;
        pointer-events: none;
      }

      /* ── Floating orbs ── */
      @keyframes orbFloat {
        0%,
        100% {
          transform: translateY(0) scale(1);
        }
        50% {
          transform: translateY(-18px) scale(1.04);
        }
      }

      .orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        pointer-events: none;
        animation: orbFloat 6s ease-in-out infinite;
      }

      .orb-1 {
        width: 300px;
        height: 300px;
        background: rgba(255, 66, 29, 0.1);
        top: 10%;
        left: -5%;
        animation-delay: 0s;
      }

      .orb-2 {
        width: 200px;
        height: 200px;
        background: rgba(0, 31, 85, 0.2);
        bottom: 10%;
        right: -3%;
        animation-delay: 2s;
      }

      .orb-3 {
        width: 150px;
        height: 150px;
        background: rgba(255, 255, 255, 0.04);
        top: 50%;
        left: 60%;
        animation-delay: 4s;
      }

      /* ── Feature cards ── */
      .feature-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 36px 28px;
        position: relative;
        overflow: hidden;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
          0 4px 16px rgba(0, 0, 0, 0.04);
      }

      .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 30px rgba(0, 31, 85, 0.1),
          0 2px 8px rgba(0, 0, 0, 0.06);
      }

      .feature-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #001f55, #ff421d);
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .feature-card:hover::after {
        opacity: 1;
      }

      .feature-icon-wrap {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #001f55 0%, #002a6e 100%);
        flex-shrink: 0;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .feature-card:hover .feature-icon-wrap {
        transform: scale(1.08) rotate(-3deg);
      }

      /* ── Timeline / How it Works ── */
      .timeline-step {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1;
      }

      .timeline-dot {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: 3px solid #001f55;
        position: relative;
        z-index: 2;
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 4px 16px rgba(0, 31, 85, 0.1);
      }

      .timeline-step:hover .timeline-dot {
        background: #001f55;
        transform: scale(1.12);
        box-shadow: 0 8px 28px rgba(0, 31, 85, 0.2);
      }

      .timeline-step:hover .timeline-dot svg {
        color: #ffffff;
      }

      .timeline-line-h {
        position: absolute;
        top: 32px;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 1;
      }

      .timeline-line-h-inner {
        width: 100%;
        height: 100%;
        background: repeating-linear-gradient(
          90deg,
          #001f55 0px,
          #001f55 8px,
          transparent 8px,
          transparent 14px
        );
        opacity: 0.25;
      }

      /* Vertical timeline for mobile */
      @media (max-width: 767px) {
        .timeline-wrapper-h {
          flex-direction: column !important;
          gap: 0 !important;
        }

        .timeline-line-h {
          display: none !important;
        }

        .timeline-step {
          flex-direction: row !important;
          text-align: left !important;
          align-items: flex-start !important;
          padding-left: 0;
          padding-bottom: 40px;
          position: relative;
        }

        .timeline-step::before {
          content: "";
          position: absolute;
          left: 31px;
          top: 64px;
          bottom: 0;
          width: 3px;
          background: repeating-linear-gradient(
            180deg,
            #001f55 0px,
            #001f55 8px,
            transparent 8px,
            transparent 14px
          );
          opacity: 0.25;
        }

        .timeline-step:last-child::before {
          display: none;
        }

        .timeline-step-content {
          margin-left: 20px !important;
          margin-top: 8px !important;
        }
      }

      /* ── Partner pill badges ── */
      .partner-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        background: #ffffff;
        border: 1px solid rgba(0, 31, 85, 0.08);
        border-radius: 100px;
        font-weight: 600;
        font-size: 0.875rem;
        color: #001f55;
        transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
        cursor: default;
      }

      .partner-pill:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 31, 85, 0.1);
        border-color: rgba(0, 31, 85, 0.2);
        background: linear-gradient(135deg, #ffffff, #f0f4ff);
      }

      .partner-pill svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }

      /* ── Section decorator ── */
      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 100px;
        background: rgba(0, 31, 85, 0.06);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #001f55;
      }

      .section-label-light {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
      }

      /* ── Tagline badge ── */
      .tagline-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 100px;
        background: linear-gradient(
          135deg,
          rgba(0, 31, 85, 0.08),
          rgba(255, 66, 29, 0.06)
        );
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #ff421d;
      }

      /* ── Pulse ring on timeline dots ── */
      @keyframes pulseRing {
        0% {
          transform: scale(1);
          opacity: 0.4;
        }
        100% {
          transform: scale(1.6);
          opacity: 0;
        }
      }

      .timeline-dot::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid #001f55;
        opacity: 0;
        animation: pulseRing 2.5s ease-out infinite;
      }

      .timeline-step:nth-child(2) .timeline-dot::before {
        animation-delay: 0.4s;
      }
      .timeline-step:nth-child(3) .timeline-dot::before {
        animation-delay: 0.8s;
      }
      .timeline-step:nth-child(4) .timeline-dot::before {
        animation-delay: 1.2s;
      }

      /* ── Number badge on timeline ── */
      .step-number {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ff421d;
        color: #fff;
        font-size: 0.6875rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
        box-shadow: 0 2px 8px rgba(255, 66, 29, 0.3);
      }

      /* ── Background pattern for integration section ── */
      .integrations-bg {
        background: linear-gradient(
          180deg,
          #ffffff 0%,
          #f0f4ff 50%,
          #ffffff 100%
        );
        position: relative;
      }

      .integrations-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
            circle 300px at 10% 50%,
            rgba(0, 31, 85, 0.03),
            transparent
          ),
          radial-gradient(
            circle 300px at 90% 50%,
            rgba(255, 66, 29, 0.03),
            transparent
          );
        pointer-events: none;
      }

      @media (prefers-reduced-motion: reduce) {
        .fade-up {
          opacity: 1;
          transform: none;
        }
        .orb {
          animation: none;
        }

        .timeline-line-h {
          display: none !important;
        }

        .timeline-step {
          flex-direction: row !important;
          text-align: left !important;
          align-items: flex-start !important;
          padding-left: 0;
          padding-bottom: 40px;
          position: relative;
        }

        .timeline-step::before {
          content: "";
          position: absolute;
          left: 31px;
          top: 64px;
          bottom: 0;
          width: 3px;
          background: repeating-linear-gradient(
            180deg,
            #001f55 0px,
            #001f55 8px,
            transparent 8px,
            transparent 14px
          );
          opacity: 0.25;
        }

        .timeline-step:last-child::before {
          display: none;
        }

        .timeline-step-content {
          margin-left: 20px !important;
          margin-top: 8px !important;
        }
      }

      /* ── Partner pill badges ── */
      .partner-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        background: #ffffff;
        border: 1px solid rgba(0, 31, 85, 0.08);
        border-radius: 100px;
        font-weight: 600;
        font-size: 0.875rem;
        color: #001f55;
        transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
        cursor: default;
      }

      .partner-pill:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 31, 85, 0.1);
        border-color: rgba(0, 31, 85, 0.2);
        background: linear-gradient(135deg, #ffffff, #f0f4ff);
      }

      .partner-pill svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }

      /* ── Section decorator ── */
      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 100px;
        background: rgba(0, 31, 85, 0.06);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #001f55;
      }

      .section-label-light {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
      }

      /* ── Tagline badge ── */
      .tagline-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 100px;
        background: linear-gradient(
          135deg,
          rgba(0, 31, 85, 0.08),
          rgba(255, 66, 29, 0.06)
        );
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #ff421d;
      }

      /* ── Pulse ring on timeline dots ── */
      @keyframes pulseRing {
        0% {
          transform: scale(1);
          opacity: 0.4;
        }
        100% {
          transform: scale(1.6);
          opacity: 0;
        }
      }

      .timeline-dot::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid #001f55;
        opacity: 0;
        animation: pulseRing 2.5s ease-out infinite;
      }

      .timeline-step:nth-child(2) .timeline-dot::before {
        animation-delay: 0.4s;
      }
      .timeline-step:nth-child(3) .timeline-dot::before {
        animation-delay: 0.8s;
      }
      .timeline-step:nth-child(4) .timeline-dot::before {
        animation-delay: 1.2s;
      }

      /* ── Number badge on timeline ── */
      .step-number {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ff421d;
        color: #fff;
        font-size: 0.6875rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
        box-shadow: 0 2px 8px rgba(255, 66, 29, 0.3);
      }

      /* ── Background pattern for integration section ── */
      .integrations-bg {
        background: linear-gradient(
          180deg,
          #ffffff 0%,
          #f0f4ff 50%,
          #ffffff 100%
        );
        position: relative;
      }

      .integrations-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
            circle 300px at 10% 50%,
            rgba(0, 31, 85, 0.03),
            transparent
          ),
          radial-gradient(
            circle 300px at 90% 50%,
            rgba(255, 66, 29, 0.03),
            transparent
          );
        pointer-events: none;
      }

      @media (prefers-reduced-motion: reduce) {
        .fade-up {
          opacity: 1;
          transform: none;
        }
        .orb {
          animation: none;
        }
        .timeline-dot::before {
          animation: none;
        }
      }

.tech-card {
  background: rgba(255, 240, 240, 0.4);
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tech-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,31,85,0.08);
  background: rgba(255, 240, 240, 0.8);
}