body {
          font-family: 'Manrope', system-ui, -apple-system, sans-serif;
          scroll-behavior: smooth;
          overflow-x: hidden;
          overflow-y: auto;
      }

      body.is-loading {
          overflow: hidden;
      }

      .page-preloader {
          position: fixed;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 12px;
          background: #f8f9fc;
          z-index: 9999;
          opacity: 1;
          visibility: visible;
          transition: opacity 300ms ease, visibility 300ms ease;
      }

      body.is-loaded .page-preloader {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
      }

      .page-preloader-spinner {
          width: 48px;
          height: 48px;
          border-radius: 9999px;
          border: 3px solid rgba(0, 0, 128, 0.2);
          border-top-color: #000080;
          animation: spin 0.8s linear infinite;
      }

      .page-preloader-text {
          font-size: 12px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          font-weight: 700;
          color: #000080;
      }

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

      /* ============================
         HERO CAROUSEL (CSS ROTATION)
      ============================ */
      .visual-carousel-container {
          position: relative;
          width: 100%;
          height: 80vh;
      }

      .visual-slide {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: opacity 1s ease-in-out;
          animation-fill-mode: both;
      }

      body.is-loading .visual-slide {
          animation-play-state: paused;
      }

      .hero-visual {
          position: relative;
      }

      .hero-float {
          position: absolute;
          z-index: 20;
          pointer-events: none;
      }

      .hero-float img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border: none;
          
      }

      .hero-float-1 {
          top: -6%;
          right: 12%;
          width: 120px;
          height: 120px;
          animation: float 7s ease-in-out infinite;
      }

      .hero-float-2 {
          top: 18%;
          right: -6%;
          width: 88px;
          height: 88px;
          animation: float 8.5s ease-in-out infinite;
      }

      .hero-float-3 {
          bottom: 6%;
          right: 8%;
          width: 110px;
          height: 110px;
          animation: float 6.5s ease-in-out infinite;
      }

      @media (max-width: 768px) {
          .visual-carousel-container {
              height: 50vh;
          }

          .hero-float-1 {
              top: -8%;
              right: 6%;
              width: 90px;
              height: 90px;
          }

          .hero-float-2 {
              top: 18%;
              right: -3%;
              width: 70px;
              height: 70px;
          }

          .hero-float-3 {
              bottom: -4%;
              right: 12%;
              width: 86px;
              height: 86px;
          }
      }

      .visual-slide:nth-child(1) {
          animation: slideShow 12s infinite 0s;
      }

      .visual-slide:nth-child(2) {
          animation: slideShow 12s infinite 4s;
      }

      .visual-slide:nth-child(3) {
          animation: slideShow 12s infinite 8s;
      }

      @keyframes slideShow {
          0% {
              opacity: 0;
              z-index: 1;
              transform: scale(1.02);
          }

          4% {
              opacity: 1;
              z-index: 10;
              transform: scale(1);
          }

          29% {
              opacity: 1;
              z-index: 10;
              transform: scale(1);
          }

          33% {
              opacity: 0;
              z-index: 1;
              transform: scale(1.05);
          }

          100% {
              opacity: 0;
              z-index: 0;
          }
      }


      /* --------------------------------------------
         On-scroll reveal system (chat-style)
         - Uses .reveal-item (existing markup) and supports optional data-reveal directions
         - Does NOT touch the hero carousel (no reveal classes inside)
         -------------------------------------------- */
      .js [data-reveal],
      .js .reveal-item {
          opacity: 0;
          transform: translateY(26px);
          transition: opacity 720ms ease,
              transform 720ms cubic-bezier(0.2, 0.65, 0.3, 1);
          will-change: opacity, transform;
      }

      .js [data-reveal="left"] {
          transform: translateX(-30px);
      }

      .js [data-reveal="right"] {
          transform: translateX(30px);
      }

      .js [data-reveal="up"] {
          transform: translateY(30px);
      }

      .js [data-reveal="scale"] {
          transform: scale(0.985);
      }

      .js [data-reveal].is-revealed,
      .js .reveal-item.is-revealed {
          opacity: 1;
          transform: none;
      }

      /* Respect reduced motion */
      @media (prefers-reduced-motion: reduce) {
          html {
              scroll-behavior: auto;
          }

          .js [data-reveal],
          .js .reveal-item {
              opacity: 1 !important;
              transform: none !important;
              transition: none !important;
          }
      }



      /* CTA pulse */
      @keyframes gentlePulse {

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

          50% {
              transform: scale(1.02);
          }
      }

      .pulse-animation {
          animation: gentlePulse 2s ease-in-out infinite;
      }

      /* Card hover enhancement (CSS only; no JS needed) */
      .group {
          transition: transform 300ms ease, box-shadow 300ms ease;
      }

      .group:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }

      /* Custom scrollbar */
      ::-webkit-scrollbar {
          width: 8px;
      }

      ::-webkit-scrollbar-track {
          background: #f1f1f1;
      }

      ::-webkit-scrollbar-thumb {
          background: #cbd5e1;
          border-radius: 4px;
      }

      ::-webkit-scrollbar-thumb:hover {
          background: #94a3b8;
      }

      /* Mobile menu animation */
      @media (max-width: 768px) {
          nav.mobile-visible {
              display: flex !important;
              animation: slideDown 0.25s ease-out;
          }

          @keyframes slideDown {
              from {
                  opacity: 0;
                  transform: translateY(-14px);
              }

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

      button,
      a {
          transition: all 0.3s ease-out;
      }


      /* ============================
         HERO ROTATING COPY (sync with carousel)
      ============================ */
      .hero-swap {
          will-change: opacity, transform;
          transition: opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.65, 0.3, 1);
      }

      .hero-swap.is-swapping {
          opacity: 0;
          transform: translateY(10px);
      }

      /* ============================
         FLOATING COLOR SHAPES (subtle, scroll-reactive)
      ============================ */
      .floating-field {
          position: absolute;
          inset: 0;
          overflow: hidden;
          pointer-events: none;
          z-index: 0;
      }

      .float-shape {
          position: absolute;
          left: var(--x);
          top: var(--y);
          width: calc(var(--size) * 1.4);
          height: calc(var(--size) * 1.4);
          opacity: 0.88;
          filter: none;
          transform: translate3d(0, 0, 0);
          will-change: transform;
      }

      .float-shape.color-blue {
          background: rgba(14, 86, 255, 0.58);
          border: 1px solid rgba(14, 86, 255, 0.86);
      }

      .float-shape.color-orange {
          background: rgba(249, 115, 22, 0.52);
          border: 1px solid rgba(249, 115, 22, 0.82);
      }

      .float-shape.color-red {
          background: rgba(239, 68, 68, 0.5);
          border: 1px solid rgba(239, 68, 68, 0.8);
      }

      .float-shape.color-yellow {
          background: rgba(234, 179, 8, 0.48);
          border: 1px solid rgba(234, 179, 8, 0.78);
      }

      .float-shape.color-green {
          background: rgba(34, 197, 94, 0.44);
          border: 1px solid rgba(34, 197, 94, 0.72);
      }

      .float-shape.shape-circle {
          border-radius: 9999px;
      }

      .float-shape.shape-squircle {
          border-radius: 14px;
      }

      .float-shape.shape-diamond {
          border-radius: 14px;
          transform: rotate(45deg);
      }

      .float-shape.shape-triangle {
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          border-radius: 0;
      }

      /* Make sure hero/sections content is above the float field */
      .floating-field+* {
          position: relative;
          z-index: 1;
      }

      /* ============================
         SCROLLYTELLING (sticky stage + stacking cards)
      ============================ */
      .scrolly-shell {
          height: calc(var(--steps) * 100vh);
      }

      .scrolly-stage {
          position: sticky;
          top: 86px;
          /* sticky header + spacing */
          height: calc(100vh - 86px);
          display: flex;
          align-items: center;
          transition: background 700ms ease, color 700ms ease;
      }


      /* Scrollytelling theme (background changes per step) */

      .scrolly-section {
          background: var(--scrolly-bg, #ffffff) !important;
          transition: background 700ms ease, color 700ms ease;
      }

      .scrolly-stage {
          background: var(--scrolly-bg, #ffffff);
          background-size: cover;
          background-position: center;
      }

      .scrolly-section[data-tone="dark"] .scrolly-kicker,
      .scrolly-section[data-tone="dark"] #scrollyTitle,
      .scrolly-section[data-tone="dark"] .scrolly-copy .font-bold,
      .scrolly-section[data-tone="dark"] h2,
      .scrolly-section[data-tone="dark"] h3,
      .scrolly-section[data-tone="dark"] h4 {
          color: rgba(255, 255, 255, 0.98) !important;
      }

      .scrolly-section[data-tone="dark"] #scrollyBody,
      .scrolly-section[data-tone="dark"] .text-text-muted,
      .scrolly-section[data-tone="dark"] p {
          color: rgba(255, 255, 255, 0.78) !important;
      }

      .scrolly-section[data-tone="dark"] .scrolly-dot {
          background: rgba(255, 255, 255, 0.28);
      }

      .scrolly-section[data-tone="dark"] .scrolly-dot.is-on {
          background: rgba(255, 255, 255, 0.95);
      }

      .scrolly-grid {
          display: grid;
          grid-template-columns: 1fr 1.15fr;
          gap: 2.25rem;
          align-items: center;
      }

      .scrolly-kicker {
          display: inline-flex;
          width: fit-content;
          align-items: center;
          gap: 0.5rem;
          border-radius: 9999px;
          padding: 0.3rem 0.75rem;
          font-size: 0.75rem;
          font-weight: 800;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: #000080;
          background: rgba(19, 91, 236, 0.08);
          border: 1px solid rgba(19, 91, 236, 0.16);
      }

      .scrolly-dot {
          width: 10px;
          height: 10px;
          border-radius: 9999px;
          background: rgba(17, 24, 39, 0.18);
          transform: scale(0.96);
          transition: transform 220ms ease, background 220ms ease;
      }

      .scrolly-dot.is-on {
          background: #000080;
          transform: scale(1.05);
      }

      .scrolly-cards {
          position: relative;
          height: min(640px, 72vh);
      }

      .scrolly-card {
          position: absolute;
          inset: 0;
          border-radius: 1.25rem;
          overflow: hidden;
          border: 1px solid rgba(15, 23, 42, 0.10);
          box-shadow: 0 30px 70px rgba(2, 6, 23, 0.10);
          background: #fff;
          opacity: 0;
          transform: translateY(26px) scale(0.985);
          transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 0.72, 0.2, 1), filter 420ms ease;
          will-change: opacity, transform;
      }

      .dark .scrolly-card {
          background: rgb(17, 24, 39);
          border-color: rgba(148, 163, 184, 0.18);
      }

      .scrolly-card.is-active {
          opacity: 1;
          transform: translateY(0) scale(1);
          z-index: 30;
          filter: none;
      }

      .scrolly-card.is-past {
          opacity: 1;
          z-index: 10;
          filter: saturate(0.92) brightness(0.99);
          transform: translateY(calc(-18px * var(--stack, 1))) scale(calc(1 - (0.05 * var(--stack, 1))));
      }

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

      .scrolly-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(135deg, rgba(2, 6, 23, 0.72), rgba(2, 6, 23, 0.20));
      }

      .scrolly-card-inner {
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding: 1.25rem;
          color: #fff;
      }

      .scrolly-chip {
          position: absolute;
          top: 1rem;
          left: 1rem;
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          border-radius: 9999px;
          padding: 0.35rem 0.75rem;
          font-size: 0.75rem;
          font-weight: 800;
          background: rgba(255, 255, 255, 0.14);
          border: 1px solid rgba(255, 255, 255, 0.22);
          backdrop-filter: blur(8px);
      }

      .scrolly-chip .material-symbols-outlined {
          font-size: 18px;
      }

      .scrolly-card-title {
          font-size: 1.25rem;
          font-weight: 900;
          letter-spacing: -0.02em;
      }

      .scrolly-card-body {
          margin-top: 0.4rem;
          font-size: 0.95rem;
          color: rgba(255, 255, 255, 0.88);
          max-width: 42ch;
      }

      .scrolly-mini {
          margin-top: 0.9rem;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.82);
      }

      .scrolly-mini .material-symbols-outlined {
          font-size: 18px;
          opacity: 0.9;
      }

      @media (max-width: 900px) {
          .scrolly-stage {
              top: 74px;
              height: calc(100vh - 74px);
          }

          .scrolly-grid {
              grid-template-columns: 1fr;
              gap: 1.25rem;
          }

          .scrolly-cards {
              height: min(680px, 74vh);
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .hero-swap {
              transition: none !important;
          }

          .scrolly-card {
              transition: none !important;
          }
      }

      /* ============================
   NETWORK FLOW ANIMATION
   Creates the "data packet" movement effect
============================ */

/* The animated path itself */
.flow-anim {
    /* 15px is the length of the colored dash 
       150px is the gap between dashes 
    */
    stroke-dasharray: 15, 150; 
    
    /* Pushes the dashes along the path */
    animation: flowData 2s linear infinite;
    
    /* Adds the "Neon" glow effect */
    filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.6));
    opacity: 0.9;
}

@keyframes flowData {
    0% {
        stroke-dashoffset: 165; /* Start position */
    }
    100% {
        stroke-dashoffset: 0; /* End position (moves forward) */
    }
}

/* Optional: Make it subtler on dark mode if needed */
.dark .flow-anim {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

/* ============================
   CARD DATA PACKETS
   Shapes moving along the diagram
============================ */
.data-packet {
    opacity: 0;
    animation: fadeInOut 3s linear infinite;
}

/* Syncs fade with the movement duration */
@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}
/* ============================
   MOVING CARD SHAPES
   Long Rectangles and Capsules
============================ */
/* ============================
   MOVING CARD SHAPES
   Long Rectangles and Capsules
============================ */
.moving-shape {
    /* 1st number (100) = Length of the shape (The visual packet)
       2nd number (1000) = The Gap (Must be huge to prevent overlapping)
    */
    stroke-dasharray: 100, 1000; 
    
    /* Start position: 100px "upstream" (hidden before the start) */
    stroke-dashoffset: 100; 
    
    /* Animation speed */
    animation: flowThrough 3s linear infinite;
    
    /* Visuals */
    opacity: 0.9;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.1));
}

@keyframes flowThrough {
    to {
        /* Move the shape all the way to the end of the longest wire */
        /* -500 ensures it travels the full distance (~250px) + length */
        stroke-dashoffset: -500; 
    }
}

/* ============================
   LIVE REVENUE BARS
   Simulates real-time data fluctuation
============================ */
.bar-anim {
    /* Set the initial height */
    height: var(--h-start);
    /* Animate between start and end heights */
    animation: liveBar 1.4s ease-in-out infinite alternate;
    will-change: height;
}

@keyframes liveBar {
    0% {
        height: var(--h-start);
    }
    100% {
        height: var(--h-end);
    }
}