/* Scroll-triggered animations */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .animate-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Staggered animations */
    .animate-stagger > * {
      opacity: 0;
      animation: slide-up 0.6s ease-out forwards;
    }

    .animate-stagger > :nth-child(1) { animation-delay: 0.1s; }
    .animate-stagger > :nth-child(2) { animation-delay: 0.2s; }
    .animate-stagger > :nth-child(3) { animation-delay: 0.3s; }
    .animate-stagger > :nth-child(4) { animation-delay: 0.4s; }
    .animate-stagger > :nth-child(5) { animation-delay: 0.5s; }
    .animate-stagger > :nth-child(6) { animation-delay: 0.6s; }

    /* Smooth card hover effects */
    .card-hover {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Smooth button transitions */
    .btn-smooth {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .btn-smooth:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .btn-smooth:active {
      transform: translateY(0);
    }

    .testimonial-viewport {
      overflow: hidden;
    }

    .testimonial-track {
      display: flex;
      gap: 1.5rem;
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-bottom: 0.5rem;
    }

    .testimonial-track::-webkit-scrollbar {
      display: none;
    }

    .testimonial-track > article {
      flex: 0 0 min(100%, 26rem);
      scroll-snap-align: start;
    }

    .testimonial-control {
      display: inline-flex;
      height: 3rem;
      width: 3rem;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(15, 23, 42, 0.14);
      border-radius: 9999px;
      background: #ffffff;
      color: #002b64;
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    }

    .testimonial-control:hover {
      transform: translateY(-2px);
      border-color: rgba(0, 43, 100, 0.35);
      background: #002b64;
      color: #ffffff;
    }

    .testimonial-control:disabled {
      cursor: not-allowed;
      opacity: 0.45;
      transform: none;
    }

    @media (min-width: 768px) {
      .testimonial-track > article {
        flex-basis: calc((100% - 1.5rem) / 2);
      }
    }

    @media (min-width: 1280px) {
      .testimonial-track > article {
        flex-basis: calc((100% - 3rem) / 3);
      }
    }

    /* Gradient animation for hero */
    @keyframes gradient-shift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .gradient-animated {
      background-size: 200% 200%;
      animation: gradient-shift 6s ease infinite;
    }

    /* Circular motion backdrop using the light aqua palette from the iBoss mark. */
    .hero-stage {
      background: #eaf9fb;
      isolation: isolate;
    }

    .hero-motion {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 76% 43%, rgba(65, 184, 196, 0.25), transparent 39%),
        radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.94), transparent 40%),
        linear-gradient(114deg, #f5feff 0%, #d8f3f6 58%, #eafafb 100%);
    }

    .hero-motion::before {
      position: absolute;
      inset: -25%;
      content: "";
      background:
        radial-gradient(ellipse at 69% 38%, rgba(13, 151, 174, 0.15), transparent 27%),
        radial-gradient(ellipse at 72% 60%, rgba(104, 211, 219, 0.21), transparent 22%),
        radial-gradient(ellipse at 22% 76%, rgba(255, 255, 255, 0.78), transparent 27%);
      filter: blur(18px);
      animation: hero-ambient-drift 14s ease-in-out infinite alternate;
    }

    .hero-motion::after {
      position: absolute;
      inset: 0;
      content: "";
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(240, 252, 254, 0.26) 46%, transparent 100%),
        linear-gradient(0deg, rgba(224, 247, 249, 0.52), transparent 52%);
    }

    @keyframes hero-ambient-drift {
      from { transform: translate3d(-2%, -1%, 0) scale(1); }
      to { transform: translate3d(3%, 2%, 0) scale(1.08); }
    }

    @keyframes hero-orb-float {
      0%, 100% { transform: translateY(-50%) scale(1); }
      50% { transform: translateY(calc(-50% - 14px)) scale(1.018); }
    }

    @keyframes hero-orb-turn {
      to { transform: rotate(360deg); }
    }

    @keyframes hero-orb-turn-back {
      to { transform: rotate(-360deg); }
    }

    @keyframes hero-orb-pulse {
      0%, 100% { opacity: 0.66; transform: scale(0.96); }
      50% { opacity: 0.98; transform: scale(1.04); }
    }

    .hero-orb-field {
      position: absolute;
      top: 54%;
      right: 32%;
      width: clamp(540px, 58vw, 850px);
      aspect-ratio: 1;
      transform: translateY(-50%);
      animation: hero-orb-float 9s ease-in-out infinite;
    }

    .hero-orb-core,
    .hero-orb-ring,
    .hero-orb-track {
      position: absolute;
      border-radius: 50%;
    }

    .hero-orb-core {
      inset: 24%;
      background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.96), transparent 20%),
        radial-gradient(circle at 50% 46%, rgba(178, 239, 243, 0.9) 0%, rgba(108, 206, 215, 0.55) 38%, rgba(25, 145, 169, 0.15) 67%, transparent 72%);
      box-shadow:
        0 0 100px rgba(42, 169, 187, 0.22),
        inset -26px -28px 55px rgba(25, 145, 169, 0.14);
      animation: hero-orb-pulse 6s ease-in-out infinite;
    }

    .hero-orb-ring {
      border: 1px solid rgba(5, 114, 142, 0.2);
    }

    .hero-orb-ring::before,
    .hero-orb-track::before {
      position: absolute;
      content: "";
      border-radius: 50%;
    }

    .hero-orb-ring-one {
      inset: 13%;
      border-top-color: rgba(4, 126, 157, 0.78);
      border-right-color: rgba(13, 156, 178, 0.52);
      animation: hero-orb-turn 18s linear infinite;
    }

    .hero-orb-ring-one::before {
      top: 9%;
      right: 16%;
      width: 10px;
      height: 10px;
      background: #ff7a00;
      box-shadow: 0 0 22px #ff7a00;
    }

    .hero-orb-ring-two {
      inset: 5%;
      border-color: rgba(4, 87, 128, 0.2);
      border-bottom-color: rgba(255, 122, 0, 0.58);
      animation: hero-orb-turn-back 27s linear infinite;
    }

    .hero-orb-ring-two::before {
      bottom: 14%;
      left: 12%;
      width: 7px;
      height: 7px;
      background: #52d8e3;
      box-shadow: 0 0 18px #52d8e3;
    }

    .hero-orb-ring-three {
      inset: -5%;
      border-color: rgba(5, 96, 142, 0.12);
      border-left-color: rgba(9, 135, 160, 0.36);
      animation: hero-orb-turn 38s linear infinite;
    }

    .hero-orb-track {
      inset: 19%;
      border: 1px dashed rgba(7, 115, 147, 0.29);
      animation: hero-orb-turn-back 15s linear infinite;
    }

    .hero-orb-track::before {
      left: 2%;
      top: 39%;
      width: 8px;
      height: 8px;
      background: rgba(255, 161, 71, 0.94);
      box-shadow: 0 0 18px rgba(255, 122, 0, 0.84);
    }

    .hero-orb-sheen {
      position: absolute;
      inset: 21%;
      border-radius: 50%;
      background: linear-gradient(125deg, rgba(255, 255, 255, 0.18), transparent 39%);
      mix-blend-mode: screen;
    }

    .hero-vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 72% 50%, transparent 14%, rgba(209, 242, 246, 0.2) 48%, rgba(255, 255, 255, 0.52) 100%);
    }

    .hero-media-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      margin-top: 1.75rem;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(0, 59, 110, 0.8);
    }

    .hero-media-toggle-icon {
      display: inline-flex;
      height: 2rem;
      width: 2rem;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(0, 76, 120, 0.22);
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.66);
    }

    .hero-motion.is-paused *,
    .hero-motion.is-paused::before {
      animation-play-state: paused;
    }

    @media (max-width: 639px) {
      .hero-orb-field {
        right: -72%;
        top: 390px;
        width: 500px;
      }

      .hero-motion::after {
        background: rgba(239, 252, 253, 0.42);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-motion::before,
      .hero-orb-field,
      .hero-orb-core,
      .hero-orb-ring,
      .hero-orb-track,
      .hero-image,
      .hero-image-panel::before,
      .hero-image-panel::after,
      .hero-data-node,
      .hero-data-line,
      .hero-floating-chip,
      .animated-globe,
      .globe-sphere::before,
      .globe-sphere::after,
      .globe-ring,
      .globe-axis,
      .hero-content {
        animation: none;
      }

      .hero-media-toggle {
        display: none;
      }
    }

    /* Text reveal animation */
    @keyframes text-reveal {
      0% { 
        opacity: 0;
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
      }
      100% {
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      }
    }

    .text-reveal {
      animation: text-reveal 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    }

    /* Counter animation */
    @keyframes count-up {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .counter-animated {
      animation: count-up 0.5s ease-out;
    }

    .feature-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
    }

    .floating {
      animation: float 4s ease-in-out infinite;
    }

    .floating:hover {
      animation-play-state: paused;
    }

    .feature-card:hover {
      transform: translateY(-8px) !important;
      box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    }

    .glow-btn:hover {
      box-shadow: 0 0 30px rgba(147, 51, 234, .5);
    }

    .green-glow-btn:hover {
      box-shadow: 0 0 30px rgba(57, 255, 20, .65);
    }

    .glowing-floating-text {
      animation: float 4s ease-in-out infinite, glow-text 2.8s ease-in-out infinite;
      color: #7cffd4;
      text-shadow: 0 0 12px rgba(124, 255, 212, .65), 0 0 28px rgba(57, 255, 20, .35);
    }

    .value-glow-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    }

    .value-glow-card:nth-child(2) { animation-delay: 0.18s; }
    .value-glow-card:nth-child(3) { animation-delay: 0.36s; }
    .value-glow-card:nth-child(4) { animation-delay: 0.54s; }
    .value-glow-card:nth-child(5) { animation-delay: 0.72s; }
    .value-glow-card:nth-child(6) { animation-delay: 0.9s; }
    .value-glow-card:nth-child(7) { animation-delay: 1.08s; }
    .value-glow-card:nth-child(8) { animation-delay: 1.26s; }
    .value-glow-card:nth-child(9) { animation-delay: 1.44s; }
    .value-glow-card:nth-child(10) { animation-delay: 1.62s; }

    .value-glow-card:hover {
      animation-play-state: paused;
      border-color: rgba(124, 255, 212, .48);
      background-color: rgba(255, 255, 255, .14);
      box-shadow: 0 0 34px rgba(57, 255, 20, .28), 0 18px 46px rgba(6, 182, 212, .16);
      transform: translateY(-8px) !important;
    }

    .values-heading-glow {
      animation: float 4.6s ease-in-out infinite, values-heading-pulse 3.2s ease-in-out infinite;
      color: #e6fffb;
      text-shadow: 0 0 14px rgba(34, 211, 238, .58), 0 0 34px rgba(45, 212, 191, .32);
    }

    @keyframes values-heading-pulse {
      0%, 100% {
        color: #e6fffb;
        text-shadow: 0 0 14px rgba(34, 211, 238, .58), 0 0 34px rgba(45, 212, 191, .32);
      }
      50% {
        color: #ffffff;
        text-shadow: 0 0 20px rgba(125, 211, 252, .9), 0 0 52px rgba(14, 165, 233, .54), 0 0 72px rgba(16, 185, 129, .28);
      }
    }

    .insights-kicker {
      animation: insight-kicker-drift 3.4s ease-in-out infinite;
      text-shadow: 0 0 16px rgba(6, 182, 212, .28);
    }

    .insights-heading {
      animation: insight-heading-float 4.2s ease-in-out infinite, insight-heading-glow 3s ease-in-out infinite;
    }

    .insights-copy {
      margin-right: auto;
      margin-left: auto;
      animation: insight-copy-drift 4.8s ease-in-out infinite;
    }

    .insight-card {
      position: relative;
      min-height: 15rem;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .insight-card:nth-child(2) { animation-delay: 0.22s; }
    .insight-card:nth-child(3) { animation-delay: 0.44s; }

    .insight-card::before {
      position: absolute;
      inset: 0 0 auto;
      height: 0.25rem;
      content: "";
      background: linear-gradient(90deg, #06b6d4, #22c55e, #002b64);
      opacity: 0.78;
    }

    .insight-card:hover {
      animation-play-state: paused;
      border-color: rgba(6, 182, 212, .42);
      box-shadow: 0 0 34px rgba(6, 182, 212, .26), 0 20px 46px rgba(15, 23, 42, .12);
      transform: translateY(-8px) !important;
    }

    @keyframes insight-kicker-drift {
      0%, 100% { transform: translateY(0); color: #0f766e; }
      50% { transform: translateY(-5px); color: #0891b2; }
    }

    @keyframes insight-heading-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @keyframes insight-heading-glow {
      0%, 100% {
        color: #0f172a;
        text-shadow: 0 0 0 rgba(6, 182, 212, 0);
      }
      50% {
        color: #063c58;
        text-shadow: 0 0 18px rgba(6, 182, 212, .28), 0 0 34px rgba(34, 197, 94, .16);
      }
    }

    @keyframes insight-copy-drift {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(4px); }
    }

    @keyframes glow-text {
      0%, 100% {
        color: #7cffd4;
        text-shadow: 0 0 12px rgba(124, 255, 212, .65), 0 0 28px rgba(57, 255, 20, .35);
      }
      50% {
        color: #ffffff;
        text-shadow: 0 0 18px rgba(124, 255, 212, .95), 0 0 42px rgba(57, 255, 20, .65);
      }
    }

    /* Tagline animation */
    @keyframes tagline-pulse {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }

    .tagline-animated {
      animation: tagline-pulse 3s ease-in-out infinite;
    }

    /* Hero content smooth fade in */
    @keyframes hero-fade-in {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hero-content {
      animation: hero-fade-in 0.8s ease-out 0.3s both;
    }

    /* Smooth transitions for all interactive elements */
    a, button, input, textarea, select {
      transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* Fade in on page load */
    @keyframes fade-in-page {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    body {
      animation: fade-in-page 0.4s ease-out;
    }

    .mega-menu {
      visibility: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    }

    .menu-group:hover .mega-menu,
    .menu-group:focus-within .mega-menu {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }

    .site-header {
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(239, 253, 255, 0.94)),
        radial-gradient(circle at 18% 0%, rgba(14, 165, 233, 0.18), transparent 34%);
      box-shadow: 0 16px 50px rgba(15, 23, 42, 0.08);
    }

    .primary-nav {
      border: 1px solid rgba(0, 43, 100, 0.1);
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.72);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 35px rgba(15, 23, 42, 0.08);
      padding: 0.35rem;
    }

    .primary-nav > a,
    .primary-nav > .menu-group > a {
      position: relative;
      border-radius: 9999px;
      padding: 0.72rem 1rem;
      color: #0f274a;
      line-height: 1;
      transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }

    .primary-nav > a::after,
    .primary-nav > .menu-group > a::after {
      position: absolute;
      right: 1rem;
      bottom: 0.35rem;
      left: 1rem;
      height: 2px;
      content: "";
      border-radius: 9999px;
      background: linear-gradient(90deg, #06b6d4, #ff7a00);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.25s ease;
    }

    .primary-nav > a:hover,
    .primary-nav > .menu-group:hover > a,
    .primary-nav > .menu-group:focus-within > a {
      color: #ffffff;
      background: linear-gradient(135deg, #002b64, #0e7490);
      box-shadow: 0 12px 28px rgba(0, 43, 100, 0.22);
      transform: translateY(-1px);
    }

    .primary-nav > a:hover::after,
    .primary-nav > .menu-group:hover > a::after,
    .primary-nav > .menu-group:focus-within > a::after {
      transform: scaleX(1);
    }

    .primary-nav > .menu-group > a span {
      display: inline-block;
      transition: transform 0.25s ease;
    }

    .primary-nav > .menu-group:hover > a span,
    .primary-nav > .menu-group:focus-within > a span {
      transform: rotate(180deg);
    }

    .primary-nav .mega-menu {
      border-color: rgba(14, 165, 233, 0.18);
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
      backdrop-filter: blur(18px);
    }

    .primary-nav .mega-menu a {
      transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
    }

    .primary-nav .mega-menu a:hover {
      color: #002b64;
      background: linear-gradient(90deg, rgba(6, 182, 212, 0.12), rgba(255, 122, 0, 0.12));
      transform: translateX(4px);
    }

    .hero-slide {
      display: none;
    }

    .hero-slide.is-active {
      display: grid;
    }

    .hero-slide h1,
    .hero-slide h2,
    .hero-slide h3 {
      opacity: 1 !important;
    }

    .hero-dot {
      height: 0.625rem !important;
      width: 0.625rem !important;
      border-radius: 9999px !important;
      background: #cbd5e1 !important;
    }

    .hero-dot.is-active {
      width: 2rem !important;
      background: #002b64 !important;
    }

    .hero-visual {
      background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.95), transparent 34%),
        radial-gradient(circle at 72% 58%, rgba(90, 201, 213, 0.34), transparent 42%),
        linear-gradient(135deg, #f6feff 0%, #d9f4f7 58%, #effdff 100%);
    }

    .hero-image-panel {
      isolation: isolate;
    }

    .hero-image-panel::before {
      position: absolute;
      inset: -35%;
      z-index: 1;
      content: "";
      background:
        radial-gradient(circle at 24% 28%, rgba(6, 182, 212, 0.22), transparent 24%),
        radial-gradient(circle at 72% 52%, rgba(255, 122, 0, 0.16), transparent 20%),
        conic-gradient(from 120deg, transparent, rgba(255, 255, 255, 0.28), transparent 32%);
      animation: hero-image-orbit 16s linear infinite;
      mix-blend-mode: screen;
      pointer-events: none;
    }

    .hero-image-panel::after {
      position: absolute;
      inset: 0;
      z-index: 3;
      content: "";
      background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0.08) 58%, transparent 100%);
      transform: translateX(-125%);
      animation: hero-image-sheen 6.8s ease-in-out infinite;
      pointer-events: none;
    }

    .hero-image {
      animation: hero-image-float 10s ease-in-out infinite;
      transform-origin: center;
      will-change: transform;
    }

    .hero-data-layer {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
    }

    .hero-data-node {
      position: absolute;
      width: 0.7rem;
      height: 0.7rem;
      border: 2px solid rgba(255, 255, 255, 0.9);
      border-radius: 9999px;
      background: rgba(6, 182, 212, 0.86);
      box-shadow: 0 0 22px rgba(6, 182, 212, 0.85);
      animation: hero-node-pulse 2.8s ease-in-out infinite;
    }

    .hero-data-node:nth-child(1) { left: 18%; top: 22%; animation-delay: 0s; }
    .hero-data-node:nth-child(2) { left: 63%; top: 19%; animation-delay: 0.55s; background: rgba(255, 122, 0, 0.9); box-shadow: 0 0 22px rgba(255, 122, 0, 0.7); }
    .hero-data-node:nth-child(3) { left: 78%; top: 68%; animation-delay: 1.1s; }
    .hero-data-node:nth-child(4) { left: 34%; top: 76%; animation-delay: 1.65s; background: rgba(37, 99, 235, 0.9); box-shadow: 0 0 22px rgba(37, 99, 235, 0.72); }

    .hero-data-line {
      position: absolute;
      height: 1px;
      border-radius: 9999px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
      transform-origin: left;
      animation: hero-line-flow 4.8s ease-in-out infinite;
    }

    .hero-data-line-one {
      left: 19%;
      top: 24%;
      width: 44%;
      transform: rotate(-3deg);
    }

    .hero-data-line-two {
      left: 36%;
      top: 73%;
      width: 42%;
      transform: rotate(-12deg);
      animation-delay: 0.9s;
    }

    .hero-floating-chip {
      position: absolute;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
      color: #002b64;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      padding: 0.65rem 0.9rem;
      text-transform: uppercase;
      animation: hero-chip-float 5.5s ease-in-out infinite;
      backdrop-filter: blur(12px);
    }

    .hero-floating-chip::before {
      width: 0.48rem;
      height: 0.48rem;
      content: "";
      border-radius: 9999px;
      background: #06b6d4;
      box-shadow: 0 0 16px rgba(6, 182, 212, 0.78);
    }

    .hero-floating-chip-one {
      top: 12%;
      left: 8%;
    }

    .hero-floating-chip-two {
      right: 8%;
      bottom: 12%;
      animation-delay: 1.2s;
    }

    .animated-globe {
      position: absolute;
      right: clamp(1.25rem, 4vw, 3rem);
      bottom: clamp(5.75rem, 10vw, 7.5rem);
      z-index: 6;
      display: block;
      width: clamp(7.5rem, 16vw, 11rem);
      aspect-ratio: 1;
      border-radius: 9999px;
      filter: drop-shadow(0 22px 38px rgba(0, 43, 100, 0.26));
      perspective: 700px;
      pointer-events: none;
    }

    .globe-sphere,
    .globe-ring,
    .globe-axis {
      position: absolute;
      inset: 0;
      border-radius: 9999px;
    }

    .globe-sphere {
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.72);
      background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.96), transparent 16%),
        radial-gradient(circle at 64% 60%, rgba(255, 122, 0, 0.34), transparent 18%),
        linear-gradient(135deg, rgba(6, 182, 212, 0.92), rgba(0, 43, 100, 0.9));
      box-shadow:
        inset -22px -20px 34px rgba(0, 22, 48, 0.34),
        inset 16px 14px 28px rgba(255, 255, 255, 0.22);
    }

    .globe-sphere::before {
      position: absolute;
      inset: 14%;
      content: "";
      border-radius: 9999px;
      background:
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.42) 19px 20px),
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(255, 255, 255, 0.35) 23px 24px);
      mask-image: radial-gradient(circle, #000 64%, transparent 66%);
      animation: globe-grid-drift 8s linear infinite;
      opacity: 0.8;
    }

    .globe-sphere::after {
      position: absolute;
      inset: 17% 13% 19% 17%;
      content: "";
      border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%;
      background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.75), transparent 13%),
        linear-gradient(135deg, rgba(173, 255, 236, 0.92), rgba(255, 190, 91, 0.82));
      animation: globe-land-drift 10s ease-in-out infinite;
      opacity: 0.66;
    }

    .globe-ring {
      border: 1px solid rgba(255, 255, 255, 0.58);
      transform-style: preserve-3d;
    }

    .globe-ring-one {
      transform: rotateX(67deg) rotateZ(-14deg);
      animation: globe-ring-turn 6.6s linear infinite;
    }

    .globe-ring-two {
      transform: rotateY(68deg) rotateZ(20deg);
      animation: globe-ring-turn-back 7.8s linear infinite;
    }

    .globe-axis {
      inset: -13%;
      border: 1px dashed rgba(255, 255, 255, 0.5);
      transform: rotate(-22deg);
      animation: globe-axis-pulse 3.2s ease-in-out infinite;
    }

    @keyframes hero-image-float {
      0%, 100% { transform: scale(1.04) translate3d(0, 0, 0); }
      50% { transform: scale(1.1) translate3d(-1.3%, -1%, 0); }
    }

    @keyframes hero-image-orbit {
      to { transform: rotate(360deg); }
    }

    @keyframes hero-image-sheen {
      0%, 38% { transform: translateX(-125%); opacity: 0; }
      48% { opacity: 1; }
      64%, 100% { transform: translateX(125%); opacity: 0; }
    }

    @keyframes hero-node-pulse {
      0%, 100% { opacity: 0.58; transform: scale(0.76); }
      50% { opacity: 1; transform: scale(1.28); }
    }

    @keyframes hero-line-flow {
      0%, 100% { opacity: 0.24; clip-path: inset(0 100% 0 0); }
      50% { opacity: 0.92; clip-path: inset(0 0 0 0); }
    }

    @keyframes hero-chip-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

    @keyframes globe-grid-drift {
      from { transform: translateX(-18%) rotate(0deg); }
      to { transform: translateX(18%) rotate(1turn); }
    }

    @keyframes globe-land-drift {
      0%, 100% { transform: translate3d(-8%, -2%, 0) scale(0.96); }
      50% { transform: translate3d(10%, 5%, 0) scale(1.06); }
    }

    @keyframes globe-ring-turn {
      to { transform: rotateX(67deg) rotateZ(346deg); }
    }

    @keyframes globe-ring-turn-back {
      to { transform: rotateY(68deg) rotateZ(-340deg); }
    }

    @keyframes globe-axis-pulse {
      0%, 100% { opacity: 0.42; transform: rotate(-22deg) scale(0.98); }
      50% { opacity: 0.86; transform: rotate(-22deg) scale(1.04); }
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-left 42s linear infinite;
      will-change: transform;
    }

    .marquee-right {
      animation-name: marquee-right;
    }

    .partner-marquee:hover .marquee-track {
      animation-play-state: paused;
    }

    .partner-marquee {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(6, 182, 212, 0.24);
      border-radius: 8px;
      background:
        linear-gradient(90deg, rgba(255, 122, 0, 0.12), rgba(6, 182, 212, 0.14), rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1)),
        #ffffff;
      box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
    }

    .partner-marquee::before,
    .partner-marquee::after {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      width: clamp(3rem, 10vw, 8rem);
      content: "";
      pointer-events: none;
    }

    .partner-marquee::before {
      left: 0;
      background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0));
    }

    .partner-marquee::after {
      right: 0;
      background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0));
    }

    .partner-logo-card {
      position: relative;
      display: flex;
      height: 8.75rem;
      width: 12.75rem;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
      overflow: hidden;
      border: 1px solid rgba(226, 232, 240, 0.86);
      border-radius: 8px;
      background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(255, 122, 0, 0.55), rgba(6, 182, 212, 0.55), rgba(99, 102, 241, 0.45)) border-box;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }

    .partner-logo-card::before {
      position: absolute;
      inset: 0;
      display: block;
      content: "";
      background: radial-gradient(circle at 18% 12%, rgba(255, 122, 0, 0.16), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(6, 182, 212, 0.15), transparent 30%);
      pointer-events: none;
    }

    .partner-logo-card:nth-child(3n + 2)::before {
      background: radial-gradient(circle at 18% 12%, rgba(34, 197, 94, 0.16), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(255, 122, 0, 0.14), transparent 30%);
    }

    .partner-logo-card:nth-child(3n + 3)::before {
      background: radial-gradient(circle at 18% 12%, rgba(99, 102, 241, 0.15), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(236, 72, 153, 0.13), transparent 30%);
    }

    .partner-logo-card:hover {
      border-color: rgba(6, 182, 212, 0.34);
      box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
      transform: translateY(-3px);
    }

    .partner-logo-card img {
      position: relative;
      z-index: 1;
      width: auto;
      height: auto;
      max-height: 6.8rem;
      max-width: 10.25rem;
      object-fit: contain;
      image-rendering: auto;
    }

    .partner-logo-card.partner-logo-wide {
      width: 18rem;
    }

    .partner-logo-card.partner-logo-wide img {
      max-width: 15.5rem;
      max-height: 5.6rem;
    }

    @keyframes marquee-left {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    @keyframes marquee-right {
      from { transform: translateX(-50%); }
      to { transform: translateX(0); }
    }

    .why-special {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background:
        radial-gradient(circle at 14% 14%, rgba(0, 43, 100, 0.12), transparent 32%),
        radial-gradient(circle at 86% 24%, rgba(82, 216, 227, 0.22), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #eefcff 48%, #f8fbff 100%);
    }

    .why-special::before {
      position: absolute;
      inset: auto -12% -42% 38%;
      height: 540px;
      content: "";
      border-radius: 9999px;
      background: radial-gradient(circle, rgba(0, 43, 100, 0.16), transparent 68%);
      filter: blur(18px);
      animation: why-bg-drift 12s ease-in-out infinite alternate;
      z-index: -1;
    }

    .why-badge {
      position: relative;
      display: grid;
      min-height: 330px;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(0, 43, 100, 0.14);
      border-radius: 2rem;
      background: rgba(255, 255, 255, 0.72);
      box-shadow: 0 28px 90px rgba(0, 43, 100, 0.14);
      backdrop-filter: blur(18px);
    }

    .why-badge::before {
      position: absolute;
      width: 76%;
      aspect-ratio: 1;
      content: "";
      border-radius: 9999px;
      background: conic-gradient(from 0deg, #002b64, #52d8e3, #ff7a00, #002b64);
      animation: why-orbit 9s linear infinite;
    }

    .why-badge::after {
      position: absolute;
      width: 62%;
      aspect-ratio: 1;
      content: "";
      border-radius: 9999px;
      background: #ffffff;
      box-shadow: inset 0 0 42px rgba(82, 216, 227, 0.2);
    }

    .why-badge-content {
      position: relative;
      z-index: 1;
      text-align: center;
      animation: why-badge-float 5s ease-in-out infinite;
    }

    .why-badge-number {
      display: block;
      font-size: clamp(5rem, 12vw, 8.25rem);
      font-weight: 800;
      line-height: 0.82;
      letter-spacing: -0.08em;
      color: #002b64;
      text-shadow: 0 18px 46px rgba(0, 43, 100, 0.22);
    }

    .why-step {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(148, 163, 184, 0.36);
      background: rgba(255, 255, 255, 0.74);
      backdrop-filter: blur(16px);
      opacity: 1 !important;
      transform: translateY(0) !important;
      transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    }

    .why-step::before {
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      content: "";
      background: linear-gradient(180deg, #002b64, #52d8e3);
      transform: scaleY(0.3);
      transform-origin: top;
      animation: why-line-flow 3.8s ease-in-out infinite;
    }

    .why-step:hover {
      border-color: rgba(0, 43, 100, 0.28);
      box-shadow: 0 24px 68px rgba(0, 43, 100, 0.13);
      transform: translateY(-8px) !important;
    }

    .why-special h2,
    .why-special h3 {
      opacity: 1 !important;
    }

    .why-step-index {
      display: inline-flex;
      height: 2.5rem;
      width: 2.5rem;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      background: #002b64;
      color: #ffffff;
      font-size: 0.78rem;
      font-weight: 800;
      box-shadow: 0 14px 32px rgba(0, 43, 100, 0.22);
    }

    @keyframes why-orbit {
      to { transform: rotate(360deg); }
    }

    @keyframes why-badge-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

    @keyframes why-bg-drift {
      from { transform: translate3d(-4%, 1%, 0) scale(1); }
      to { transform: translate3d(4%, -3%, 0) scale(1.08); }
    }

    @keyframes why-line-flow {
      0%, 100% { transform: scaleY(0.28); opacity: 0.5; }
      50% { transform: scaleY(1); opacity: 1; }
    }

    .modal-backdrop {
      display: none;
    }

    .modal-backdrop.is-open {
      display: flex;
    }

    .module-card.is-hidden {
      display: none;
    }

    #module-grid {
      align-items: stretch;
    }

    .module-card {
      display: flex;
      height: 100%;
      min-height: 16rem;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    @media (min-width: 768px) and (max-width: 1279px) {
      #module-grid.module-grid-expanded .module-card:last-child {
        grid-column: 1 / -1;
        width: min(100%, calc((100% - 1.5rem) / 2));
        justify-self: center;
      }
    }

    @media (min-width: 1280px) {
      #module-grid.module-grid-expanded .module-card:last-child {
        grid-column: 2;
      }
    }

    .module-card::before {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 0.25rem;
      content: "";
      background: linear-gradient(90deg, #ff7a00, #06b6d4, #002b64);
    }

    .module-icon {
      display: inline-flex;
      height: 2.65rem;
      width: 2.65rem;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(0, 43, 100, 0.12);
      border-radius: 9999px;
      background: transparent;
      color: #002b64;
      line-height: 1;
      margin-bottom: 1.15rem;
    }

    .module-icon svg {
      width: 1.55rem;
      height: 1.55rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .back-to-top {
      position: fixed;
      right: 1.25rem;
      bottom: 1.25rem;
      z-index: 90;
      display: inline-flex;
      height: 3.45rem;
      width: 3.45rem;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.74);
      border-radius: 9999px;
      background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.94), transparent 18%),
        conic-gradient(from 0deg, #ff7a00, #06b6d4, #22c55e, #6366f1, #ec4899, #ff7a00);
      color: #ffffff;
      box-shadow:
        0 18px 42px rgba(0, 43, 100, 0.28),
        0 0 0 0 rgba(6, 182, 212, 0.42);
      opacity: 0;
      pointer-events: none;
      transform: translateY(18px);
      transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
      animation: back-to-top-glow 2.4s ease-in-out infinite;
    }

    .back-to-top::before {
      position: absolute;
      inset: -32%;
      content: "";
      background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.84), transparent 34%);
      animation: back-to-top-sheen 2.8s linear infinite;
    }

    .back-to-top::after {
      position: absolute;
      inset: 0.28rem;
      content: "";
      border-radius: 9999px;
      background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.22), rgba(0, 43, 100, 0.52));
      box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.24);
    }

    .back-to-top.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .back-to-top:hover {
      box-shadow:
        0 24px 58px rgba(0, 43, 100, 0.42),
        0 0 0 8px rgba(6, 182, 212, 0.16);
      transform: translateY(-5px) scale(1.04);
    }

    .back-to-top .animated-globe {
      position: absolute;
      inset: 0.42rem;
      right: auto;
      bottom: auto;
      z-index: 1;
      width: auto;
      filter: none;
      opacity: 0.96;
    }

    .back-to-top .globe-sphere {
      border-color: rgba(255, 255, 255, 0.7);
      background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.96), transparent 16%),
        radial-gradient(circle at 70% 65%, rgba(255, 122, 0, 0.54), transparent 22%),
        linear-gradient(135deg, rgba(6, 182, 212, 0.98), rgba(0, 43, 100, 0.96));
      box-shadow:
        inset -8px -8px 16px rgba(0, 22, 48, 0.32),
        inset 7px 7px 14px rgba(255, 255, 255, 0.2);
    }

    .back-to-top .globe-sphere::before {
      inset: 10%;
      background:
        repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.44) 9px 10px),
        repeating-linear-gradient(0deg, transparent 0 8px, rgba(255, 255, 255, 0.34) 9px 10px);
    }

    .back-to-top .globe-sphere::after {
      inset: 18%;
    }

    .back-to-top .globe-ring,
    .back-to-top .globe-axis {
      border-color: rgba(255, 255, 255, 0.66);
    }

    .back-to-top-arrow {
      position: relative;
      z-index: 2;
      width: 1.2rem;
      height: 1.2rem;
      color: #ffffff;
      filter: drop-shadow(0 2px 6px rgba(0, 22, 48, 0.78));
      animation: back-to-top-arrow-bounce 1.7s ease-in-out infinite;
    }

    @keyframes back-to-top-glow {
      0%, 100% {
        box-shadow:
          0 18px 42px rgba(0, 43, 100, 0.28),
          0 0 0 0 rgba(6, 182, 212, 0.42);
      }
      50% {
        box-shadow:
          0 22px 52px rgba(0, 43, 100, 0.34),
          0 0 0 9px rgba(255, 122, 0, 0.16);
      }
    }

    @keyframes back-to-top-sheen {
      to { transform: rotate(360deg); }
    }

    @keyframes back-to-top-arrow-bounce {
      0%, 100% { transform: translateY(2px); }
      50% { transform: translateY(-3px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .marquee-track {
        animation: none;
      }

      .why-special::before,
      .why-badge::before,
      .why-badge-content,
      .why-step::before,
      .back-to-top,
      .back-to-top::before,
      .back-to-top-arrow {
        animation: none;
      }
    }