/* ========== GLOBAL FIX ========== */
    html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
    /* ========== HERO SLIDER v3.0 STYLES ========== */
    .hero-slider-v3 {
      height: 700px;
      min-height: 700px;
      position: relative;
      overflow: hidden;
      background: var(--color-primary-900);
    }
    .hero-slides-v3 {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .hero-slide-v3 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      transition: opacity 800ms ease;
      display: flex;
      align-items: center;
      /* [HERO-FIX] ensure background image auto-scales to cover the hero at any screen size */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .hero-slide-v3.active {
      opacity: 1;
      pointer-events: auto;
      position: relative;
    }
    .hero-slide-v3--1 { background-image: linear-gradient(135deg, var(--color-primary-900) 0%, #0a1628 40%, var(--color-primary-900) 100%); }
    .hero-slide-v3--2 { background-image: linear-gradient(135deg, var(--color-primary-700) 0%, #0f2a4a 40%, var(--color-primary-700) 100%); }
    .hero-slide-v3--3 { background-image: linear-gradient(135deg, #0a1628 0%, #152244 40%, #0a1628 100%); }
    .hero-slide-v3--4 { background-image: linear-gradient(135deg, var(--color-primary-900) 0%, #142840 40%, var(--color-primary-900) 100%); }
    .hero-slide-v3--5 { background-image: linear-gradient(135deg, var(--color-primary-700) 0%, #1e3a52 40%, var(--color-primary-700) 100%); }

    .hero-progress-bar {
      display: none;
    }

    .hero-dots-v3 {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 8;
      align-items: center;
    }
    .hero-dot-v3 {
      position: relative;
      width: 28px;
      height: 3px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.3);
      border: none;
      cursor: pointer;
      overflow: hidden;
      transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                  height 0.35s ease,
                  background 0.3s ease;
      padding: 0;
      flex-shrink: 0;
    }
    .hero-dot-v3::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0%;
      background: #fff;
      border-radius: 3px;
      transition: none;
      animation-play-state: var(--dot-play-state, running);
    }
    .hero-dot-v3.active {
      width: 52px;
      height: 4px;
      background: rgba(255, 255, 255, 0.18);
    }
    .hero-dot-v3.active::after {
      animation: dotProgressFill var(--dot-dwell, 6000ms) linear forwards;
      animation-play-state: var(--dot-play-state, running);
    }
    @keyframes dotProgressFill {
      from { width: 0%; }
      to   { width: 100%; }
    }
    .hero-dot-v3:hover:not(.active) {
      background: rgba(255, 255, 255, 0.55);
      width: 36px;
    }
    .hero-arrow-v3 {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      z-index: 8;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      opacity: 0;
      pointer-events: none;
    }
    .hero-slider-v3:hover .hero-arrow-v3 {
      opacity: 1;
      pointer-events: auto;
    }
    .hero-arrow-v3:hover {
      background: rgba(255, 255, 255, 0.18);
      transform: translateY(-50%) scale(1.08);
      border-color: rgba(255, 255, 255, 0.3);
    }
    .hero-arrow-v3--prev { left: 20px; }
    .hero-arrow-v3--next { right: 20px; }

    .hero-content-v3 {
      position: relative;
      z-index: 2;
      padding: clamp(20px, 5vw, 60px);
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
    }
    .hero-headline-v3 {
      font-family: var(--font-heading);
      font-size: var(--text-display);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.03em;
      color: #ffffff;
      margin-bottom: 20px;
    }
    .hero-subtitle-v3 {
      font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
      font-size: var(--text-lg);
      font-weight: 400;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.85);
      max-width: 640px;
      margin-bottom: 32px;
    }
    .hero-btns-v3 {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .hero-btns-v3 .btn-cta-primary,
    .hero-btns-v3 .btn-accent {
      padding: clamp(12px, 1.6vw, 17px) clamp(24px, 2.8vw, 40px);
      font-size: var(--text-lg);
      font-weight: 700;
      border-radius: clamp(8px, 0.8vw, 12px);
    }
    .hero-btns-v3 .btn-cta-primary .hero-cta-arrow {
      display: inline-block;
      margin-left: .5em;
      transition: transform .2s var(--cta-ease);
    }
    .hero-btns-v3 .btn-cta-primary:hover .hero-cta-arrow {
      transform: translateX(5px);
    }
    .hero-pattern-v3 {
      position: absolute;
      inset: 0;
      opacity: 0.25;
      pointer-events: none;
    }

    .hero-trust-strip-v3 {
      display: inline-flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .hero-badge-v3 {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.18);
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(4px);
    }

    .hero-spec-cards-v3 {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
    .spec-card-v3 {
      padding: 10px 18px;
      border-radius: 12px;
      background: rgba(232, 134, 58, 0.12);
      border: 1px solid rgba(232, 134, 58, 0.25);
      text-align: center;
      backdrop-filter: blur(4px);
    }
    .spec-card__value { display: block; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; color: var(--color-accent); }
    .spec-card__label { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }

    .hero-trend-badge-v3 {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 16px;
      border-radius: 999px;
      background: rgba(232, 134, 58, 0.9);
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 16px;
    }

    .hero-tech-cards-v3 {
      display: flex;
      gap: 14px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
    .tech-card-v3 {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 12px;
      background: rgba(0, 149, 218, 0.1);
      border: 1px solid rgba(0, 149, 218, 0.22);
      backdrop-filter: blur(6px);
    }
    .tech-card-v3 span:last-child {
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: #fff;
    }

    .hero-partner-badges-v3 {
      display: flex;
      gap: 10px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
    .partner-badge-v3 {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 12px;
      background: rgba(232, 134, 58, 0.1);
      border: 1px solid rgba(232, 134, 58, 0.22);
    }
    .partner-badge-v3 span:last-child {
      font-family: 'Outfit', sans-serif;
      font-size: var(--text-xs);
      font-weight: 600;
      color: rgba(255, 255, 255, 0.88);
    }

    .hero-process-steps-v3 {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
    .process-step-v3 {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 12px;
      background: rgba(16, 185, 129, 0.1);
      border: 1px solid rgba(16, 185, 129, 0.25);
    }
    .process-step__num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(16, 185, 129, 0.25);
      color: #10B981;
      font-family: 'Outfit', sans-serif;
      font-size: var(--text-xs);
      font-weight: 700;
    }
    .process-step__text {
      font-family: 'Work Sans', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
    }
    .process-step__arrow {
      color: rgba(16, 185, 129, 0.5);
      font-size: var(--text-body);
      font-weight: bold;
    }