:root {
      --primary-dark: #1e2736;
      --primary-dark-hover: #293448;
      --bg-white: #ffffff;
      --bg-gray: #f4f6f9;
      --text-main: #333333;
      --text-light: #777777;
      --font-family: 'Montserrat', sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    /* overflow-x: clip ensures horizontal scrolling is hidden without breaking position: sticky! */
    html { background-color: var(--primary-dark); overflow-x: clip; scroll-snap-type: y mandatory; }
    body { font-family: var(--font-family); color: var(--text-main); background-color: transparent; line-height: 1.6; overflow-x: clip; }
    .slide-panel, .scroll-cluster { scroll-snap-align: start; scroll-snap-stop: normal; }
    a { text-decoration: none; color: inherit; }
    .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

    /* Buttons */
    .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-size: 14px; font-weight: 700; border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; }
    .btn-white { background-color: var(--bg-white); color: var(--primary-dark); border: 2px solid var(--bg-white); }
    .btn-white:hover { background-color: transparent; color: var(--bg-white); }
    .btn-outline { background-color: transparent; color: var(--bg-white); border: 2px solid var(--bg-white); }
    .btn-outline:hover { background-color: var(--bg-white); color: var(--primary-dark); }
    .btn-primary { background-color: #4facfe; color: #fff; border: 2px solid #4facfe; }
    .btn-primary:hover { background-color: transparent; color: #4facfe; }

    /* Header */
    .header { background-color: var(--primary-dark); color: var(--bg-white); position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; padding: 15px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.15); transition: padding 0.3s ease; }
    .header .container { display: flex; justify-content: space-between; align-items: center; }
    .logo img { height: 45px; display: block; }
    .nav-links { display: flex; list-style: none; gap: 35px; align-items: center; }
    .nav-links a { font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s; }
    .nav-links a:hover { color: #aeb5c0; }
    .mobile-menu-btn { display: none; background: none; border: none; color: white; font-size: 24px; cursor: pointer; }

    /* --- FIXED BACKGROUNDS (Behind Everything) --- */
    .fixed-backgrounds { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -10; background-color: var(--primary-dark); transition: background-color 0.8s ease-in-out; }
    body.light-theme .fixed-backgrounds { background-color: var(--bg-gray); }
    .bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; }
    .bg-layer.active { opacity: 1; z-index: 1; }
    .bg-dark { background-color: var(--primary-dark); }
    .bg-light { background-color: var(--bg-gray); }

    /* --- FIXED FOREGROUND HORSES (Above Everything) --- */
    .fixed-horses { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9; pointer-events: none; }
    .horse-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; }
    .horse-layer.active { opacity: 1; }
    .horse-panel-progress { 
        position: absolute; bottom: 0px; left: 0px; width: 534px; height: 300px; 
        transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .horse-panel-progress video { width: 100%; height: 100%; object-fit: contain; }
    
    /* Horses moving left-to-right (even JS-index = horse-layer 1, 3, 5, 7) — face right naturally */
    #horse-layer-1 .horse-panel-progress video,
    #horse-layer-3 .horse-panel-progress video,
    #horse-layer-5 .horse-panel-progress video,
    #horse-layer-7 .horse-panel-progress video {
        transform: scaleX(1);
    }

    /* Horses moving right-to-left (odd JS-index = horse-layer 2, 4, 6) — flip to face left */
    #horse-layer-2 .horse-panel-progress video,
    #horse-layer-4 .horse-panel-progress video,
    #horse-layer-6 .horse-panel-progress video {
        transform: scaleX(-1);
    }
    
    /* --- 3D SCENERY (Mountains shared across dark panels) --- */
    .scenery-mountains {
      position: absolute;
      bottom: 25%;
      left: 0;
      width: 200%;
      height: 45vh;
      pointer-events: none;
      opacity: 1; /* Made opaque! */
      display: flex;
      z-index: 0;
      animation: moveMountainsLeft 60s linear infinite;
    }
    .scenery-mountains.bg-2-mountains {
      animation: moveMountainsLeft 60s linear infinite;
    }
    .scenery-mountains.bg-4-mountains {
      animation: moveMountainsRight 60s linear infinite;
    }
    @keyframes moveMountainsLeft {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes moveMountainsRight {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }
    .scenery-mountains svg { width: 100%; height: 100%; }
    

    /* --- TRAIN SCENERY (Panel 1) --- */
    .railway {
      position: absolute;
      bottom: 25%;
      left: 0;
      width: 100%;
      height: 24px;
      pointer-events: none;
      border-top: 2px solid rgba(255,255,255,0.2);
      border-bottom: 5px solid rgba(255,255,255,0.7);
    }
    .railway::before {
      content: '';
      position: absolute;
      top: 2px;
      left: -100px;
      width: calc(100% + 200px);
      height: 17px;
      background: repeating-linear-gradient(to right, transparent, transparent 40px, rgba(255,255,255,0.3) 40px, rgba(255,255,255,0.3) 50px);
      transform: skewX(-45deg);
    }

    .train-container {
      position: absolute;
      bottom: calc(25% + 5px); 
      left: 50%;
      transform: translateX(-50%) scaleX(-1);
      display: flex;
      align-items: flex-end;
      gap: 0px;
      pointer-events: none;
      opacity: 1;
      z-index: 10;
    }
    .train-container > div + div::before {
      content: '';
      position: absolute;
      left: -12px;
      bottom: 30px;
      width: 12px;
      height: 6px;
      background: #4a5568;
      border-top: 2px solid #2d3748;
      z-index: 0;
    }

    .wagon { position: relative; }
    .wagon-coal { width: 350px; height: 160px; }
    .wagon-coal .bogie-left { left: 6%; }
    .wagon-coal .bogie-right { right: 6%; }
    .wagon-coal .bogie { bottom: -2px; width: 100px;}

    .wagon-fuel { width: 416px; height: 160px; }
    .wagon-fuel .bogie-left { left: 6%; }
    .wagon-fuel .bogie-right { right: 7%; }
    .wagon-fuel .bogie { bottom: -2px; width: 100px; z-index: -10}

    .wagon-containers { width: 416px; height: 160px; }
    .wagon-containers .bogie-left { left: 3%; }
    .wagon-containers .bogie-right { left: 75%; }
    .wagon-containers .bogie { bottom: -2px; width: 100px; z-index: -10}

    .locomotive { width: 380px; height: 155px; position: relative; z-index: 5; }
    .loco-bogie-left { left: 5%; z-index: 2; }
    .loco-bogie-right { right: 15%; z-index: 2; }
    .locomotive .bogie { bottom: -2px; width: 100px; mix-blend-mode: screen; }

    .train-body {
      position: absolute; top: 10px; left: 0; width: 100%; height: 100%; z-index: 2;
      animation: vehicleShake 0.35s infinite alternate ease-in-out;
      animation-play-state: paused;
      transform-origin: bottom center;
      will-change: transform;
    }
    .bg-layer.animating .train-body { animation-play-state: running; }
    
    .train-body img { width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
    .bogie { position: absolute; z-index: 2; mix-blend-mode: screen; transform: scaleX(-1); will-change: transform; }

    @keyframes vehicleShake {
      0% { transform: translateY(0px) rotate(0deg); }
      100% { transform: translateY(-2px) rotate(0.15deg); }
    }

    /* --- AUTO ROAD & TRUCK SCENERY (Panel 2) --- */
    .bg-2-mountains {
      animation: moveMountainsRight 60s linear infinite;
      animation-play-state: paused;
      opacity: 1 !important; /* Forces solid colors instead of transparency */
      will-change: transform;
    }
    .bg-layer.animating .bg-2-mountains { animation-play-state: running; }

    @keyframes moveMountainsRight {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    .auto-road-wrapper {
      position: absolute;
      bottom: 10vh; /* Leaves 10% for the horse land */
      left: 0;
      width: 100%;
      height: 25vh; /* Stretches up to 35vh (a good wide road) */
      z-index: 2;
      background: linear-gradient(to top, #1e293b 0%, #0f172a 100%); /* Asphalt fading into darkness */
      border-top: 2px solid rgba(255, 255, 255, 0.1);
      border-bottom: 4px solid rgba(0, 0, 0, 0.8);
      overflow: hidden;
    }

    /* Far Lane (Slow, thin) */
    .auto-road-lane-far {
      position: absolute;
      top: 20%; /* Lowered from 15% */
      left: 0;
      width: 100%;
      height: 2px;
      background: repeating-linear-gradient(to right, transparent, transparent 30px, rgba(255,255,255,0.3) 30px, rgba(255,255,255,0.3) 60px);
      animation: moveRoadFar 3s linear infinite;
      animation-play-state: paused;
    }
    
    /* Central Median Barrier (3D Concrete) */
    .auto-road-median {
      position: absolute;
      top: 45%;
      left: 0;
      width: 100%;
      height: 4px;
      background: #cbd5e1; /* Bright top edge */
      box-shadow: 
        0 4px 0 #94a3b8,   /* Sloped mid section */
        0 10px 0 #475569,  /* Darker bottom base */
        0 16px 12px rgba(0,0,0,0.5); /* Drop shadow on road */
    }
    /* Median segments to show speed */
    .auto-road-median::after {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 14px; /* Cover the main heights */
      background: repeating-linear-gradient(to right, transparent, transparent 120px, rgba(0,0,0,0.35) 120px, rgba(0,0,0,0.35) 124px);
      animation: moveRoadMedian 1.5s linear infinite;
      animation-play-state: paused;
    }

    /* Near Lane (Fast, thick) */
    .auto-road-lane-near {
      position: absolute;
      bottom: 20%;
      left: 0;
      width: 100%;
      height: 4px;
      background: repeating-linear-gradient(to right, transparent, transparent 80px, rgba(255,255,255,0.5) 80px, rgba(255,255,255,0.5) 160px);
      animation: moveRoadNear 0.8s linear infinite;
      animation-play-state: paused;
    }

    .bg-layer.animating .auto-road-lane-far,
    .bg-layer.animating .auto-road-median::after,
    .bg-layer.animating .auto-road-lane-near {
      animation-play-state: running;
    }

    @keyframes moveRoadFar { from { background-position: 0 0; } to { background-position: -60px 0; } }
    @keyframes moveRoadMedian { from { background-position: 0 0; } to { background-position: -105px 0; } }
    @keyframes moveRoadNear { from { background-position: 0 0; } to { background-position: -160px 0; } }

    .road-scenery {
      position: absolute;
      bottom: calc(10vh + 25vh); /* Exactly at the top of the road */
      left: 0;
      width: 3200%;
      height: 200px;
      pointer-events: none;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      animation: moveRoadSceneryLeft 90s linear infinite;
      animation-play-state: paused;
      will-change: transform;
    }
    .bg-layer.animating .road-scenery { animation-play-state: running; }
    @keyframes moveRoadSceneryLeft {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Birds Flock */
    .birds-flock {
      position: absolute;
      top: 15%;
      right: 15%;
      width: 150px;
      height: 100px;
      pointer-events: none;
      z-index: 5;
      transform: scaleX(-1);
    }
    .bird {
      position: absolute;
      width: 14px;
      height: 10px;
      background: #0f172a; /* Dark bird */
      clip-path: polygon(100% 0, 0 50%, 100% 100%, 70% 50%); /* Static left-facing chevron */
      opacity: 0.9;
      animation: flapWings 0.6s ease-in-out infinite alternate;
      animation-play-state: paused;
    }
    .bg-layer.animating .bird { animation-play-state: running; }
    
    .bird:nth-child(1) { top: 50%; left: 0%; animation-delay: 0s; } /* Leader at front left */
    .bird:nth-child(2) { top: 35%; left: 20%; animation-delay: -0.1s; }
    .bird:nth-child(3) { top: 65%; left: 20%; animation-delay: -0.2s; }
    .bird:nth-child(4) { top: 20%; left: 40%; animation-delay: -0.3s; }
    .bird:nth-child(5) { top: 80%; left: 40%; animation-delay: -0.4s; }
    .bird:nth-child(6) { top: 5%; left: 60%; animation-delay: -0.5s; }
    .bird:nth-child(7) { top: 95%; left: 60%; animation-delay: -0.6s; }

    @keyframes flapWings {
      0% { clip-path: polygon(100% 0%, 0% 50%, 100% 100%, 70% 50%); transform: translateY(0); }
      100% { clip-path: polygon(100% 40%, 0% 50%, 100% 60%, 80% 50%); transform: translateY(-4px); }
    }

    
    .road-sign {
      position: relative; 
      width: 4px; 
      height: 120px; 
      background: #2a2d34;
      flex-shrink: 0;
    }
    .road-sign::after {
      content: attr(data-city); 
      position: absolute; 
      top: 10px; 
      left: -48px; 
      width: 100px; 
      height: 34px;
      background: #006838; 
      border: 2px solid #fff; 
      border-radius: 4px; 
      color: #fff;
      font-family: var(--font-family); 
      font-size: 11px; 
      font-weight: 800; 
      letter-spacing: 1px;
      display: flex; 
      align-items: center; 
      justify-content: center; 
      text-align: center;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

    .truck-container {
      position: absolute;
      bottom: calc(13vh + 16vh); /* Lifted to rest on the far lane / above median */
      left: 50%;
      transform: translateX(-50%) scaleX(-1);
      width: 440px; /* Scaled down slightly to match depth */
      height: 176px;
      pointer-events: none;
      z-index: 10;
    }
    .truck-body {
      width: 100%; height: 100%; transform-origin: bottom center;
      animation: vehicleShake 0.4s infinite alternate ease-in-out;
      animation-play-state: paused;
      will-change: transform;
    }
    .bg-layer.animating .truck-body { animation-play-state: running; }
    
    .truck-body img {
      width: 100%; height: 100%; object-fit: contain;
      transform: scaleX(1); /* Resets to native direction (facing left) */
    }


    /* --- SCROLLING CONTENT --- */
    .scrolling-content { position: relative; z-index: 10; }
    .content-panel { position: relative; width: 100%; min-height: 100vh; padding-bottom: 120px; display: flex; flex-direction: column; justify-content: center; }
    
    /* Dark panels */
    #content-1, #content-3, #cluster-2, #cluster-3, #cluster-4 { color: var(--bg-white); }
    #content-1 .section-title, #content-1 .dash-title,
    #content-3 .section-title, #cluster-2 .section-title, #cluster-3 .section-title, #cluster-4 .section-title { color: #fff; }
    
    /* Light panels */
    #content-4 { color: var(--primary-dark); }
    #cluster-1 { color: var(--primary-dark); position: relative; z-index: 20; }
    #cluster-2, #cluster-3, #cluster-4 { position: relative; z-index: 20; }
    #content-4 .section-title, #cluster-1 .section-title { color: var(--primary-dark); }
    
    .section-title { font-size: 36px; margin-bottom: 60px; font-weight: 800; text-align: center; }

    /* Hero Section */
    .hero { position: relative; background-image: url('assets/images/hero_background.png'); background-size: cover; background-position: center; background-attachment: fixed; min-height: 100vh; display: flex; align-items: center; padding: 120px 0 60px 0; }
    .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(30, 39, 54, 0.85) 0%, rgba(30, 39, 54, 0.4) 100%); z-index: 1; }
    .hero .container { position: relative; z-index: 2; }
    .hero-content { max-width: 650px; color: var(--bg-white); }
    .hero-content h1 { font-size: 52px; font-weight: 800; margin-bottom: 25px; line-height: 1.15; }
    .hero-content p { font-size: 18px; margin-bottom: 40px; opacity: 0.9; line-height: 1.6; }
    .hero-buttons { display: flex; gap: 20px; }
    .hero-video-container { position: absolute; right: 0%; top: 35%; z-index: 2; pointer-events: none; width: 100vw; max-width: 650px; opacity: 0.9; }
    .hero-video-container video { width: 100%; height: auto; object-fit: contain; }

    /* === ENHANCED SERVICE INFO PANELS === */
    .svc-info-layout {
      width: 100%; max-width: 1100px; height: 100%; margin: 0 auto; padding: 0 20px;
      display: grid; gap: 16px;
      pointer-events: auto; position: relative; z-index: 20;
    }
    /* Grid layouts per panel type */
    .svc-info-layout.layout-train { grid-template-columns: 1fr 1fr; align-content: start; padding-top: 14vh; }
    .svc-info-layout.layout-truck { grid-template-columns: 1fr 1fr; align-content: start; padding-top: 14vh; }
    .svc-info-layout.layout-air   { grid-template-columns: 1fr 1fr; align-content: end; padding-bottom: 25vh; }
    .svc-info-layout.layout-sea   { grid-template-columns: 1fr 1fr; align-content: start; padding-top: 14vh; }
    .svc-info-layout.layout-warehouse  { grid-template-columns: 1fr 1fr; align-content: start; padding-top: 14vh; }
    .svc-info-layout.layout-multimodal { grid-template-columns: 1fr 1fr; align-content: start; padding-top: 14vh; }
    .svc-info-layout.layout-customs    { grid-template-columns: 1fr 1fr; align-content: start; padding-top: 14vh; }

    /* Main title card - spans full width */
    .svc-title-card {
      grid-column: 1 / -1;
      padding: 22px 30px; border-radius: 16px;
      display: flex; align-items: center; gap: 20px;
    }
    .svc-title-card .svc-icon {
      width: 56px; height: 56px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .svc-title-card h3 { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
    .svc-title-card .svc-subtitle { font-size: 13px; opacity: 0.7; font-weight: 600; }

    /* Info cards */
    .svc-detail-card {
      padding: 20px 24px; border-radius: 14px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .svc-detail-card h4 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 0; display: flex; align-items: center; gap: 8px; }
    .svc-detail-card p { font-size: 13px; line-height: 1.6; opacity: 0.85; margin: 0; }

    /* Stat badges row */
    .svc-stats-row {
      grid-column: 1 / -1;
      display: flex; gap: 12px; flex-wrap: wrap;
    }
    .svc-stat-badge {
      padding: 12px 16px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; min-width: 130px;
    }
    .svc-stat-badge .stat-num { font-size: 22px; font-weight: 800; line-height: 1; }
    .svc-stat-badge .stat-txt { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; line-height: 1.2; text-align: left; }

    /* === DARK THEME CARDS === */
    .svc-dark .svc-title-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; backdrop-filter: blur(16px); }
    .svc-dark .svc-detail-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #fff; backdrop-filter: blur(12px); }
    .svc-dark .svc-stat-badge { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #fff; backdrop-filter: blur(12px); }

    /* === LIGHT THEME CARDS === */
    .svc-light .svc-title-card { background: rgba(255,255,255,0.75); border: 1px solid rgba(0,0,0,0.08); color: var(--primary-dark); backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
    .svc-light .svc-detail-card { background: rgba(255,255,255,0.65); border: 1px solid rgba(0,0,0,0.06); color: var(--primary-dark); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
    .svc-light .svc-stat-badge { background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.06); color: var(--primary-dark); backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0,0,0,0.05); }

    /* === DARK SOLID CARDS (for light backgrounds) === */
    .svc-dark-solid .svc-title-card { background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(255,255,255,0.1); color: #fff; backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
    .svc-dark-solid .svc-detail-card { background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(255,255,255,0.08); color: #fff; backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
    .svc-dark-solid .svc-stat-badge { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255,255,255,0.1); color: #fff; backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
    .svc-dark-solid .svc-subtitle { color: rgba(255,255,255,0.7); }
    .svc-dark-solid .stat-txt { color: rgba(255,255,255,0.7); }
    .svc-dark-solid h4 { color: #fff; }
    .svc-dark-solid p { color: rgba(255,255,255,0.8); }

    /* Accent colors per transport mode */
    .svc-accent-rail .svc-icon { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
    .svc-accent-rail .svc-stat-badge .stat-num { color: #f59e0b; }
    .svc-accent-truck .svc-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; }
    .svc-accent-truck .svc-stat-badge .stat-num { color: #3b82f6; }
    .svc-accent-air .svc-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; }
    .svc-accent-air .svc-stat-badge .stat-num { color: #a78bfa; }
    .svc-accent-sea .svc-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; }
    .svc-accent-sea .svc-stat-badge .stat-num { color: #06b6d4; }
    .svc-light .svc-accent-truck .svc-stat-badge .stat-num { color: #1d4ed8; }
    .svc-light .svc-accent-sea .svc-stat-badge .stat-num { color: #0891b2; }

    /* Accent colors for new service panels */
    .svc-accent-warehouse .svc-icon { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
    .svc-accent-warehouse .svc-stat-badge .stat-num { color: #10b981; }
    .svc-light .svc-accent-warehouse .svc-stat-badge .stat-num { color: #059669; }
    
    .svc-accent-multimodal .svc-icon { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; }
    .svc-accent-multimodal .svc-stat-badge .stat-num { color: #f97316; }
    .svc-light .svc-accent-multimodal .svc-stat-badge .stat-num { color: #ea580c; }
    
    .svc-accent-customs .svc-icon { background: linear-gradient(135deg, #ec4899, #db2777); color: #fff; }
    .svc-accent-customs .svc-stat-badge .stat-num { color: #ec4899; }
    .svc-light .svc-accent-customs .svc-stat-badge .stat-num { color: #db2777; }

    /* Reveal animations for svc cards */
    .svc-info-layout .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .svc-info-layout .reveal.active { opacity: 1; transform: translateY(0); }
    .svc-info-layout .reveal:nth-child(2) { transition-delay: 0.15s; }
    
    /* Disable reveal animation for titles so they stay firmly anchored relative to the panel elements */
    .svc-title-card.reveal, .section-title.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .svc-info-layout .reveal:nth-child(3) { transition-delay: 0.3s; }
    .svc-info-layout .reveal:nth-child(4) { transition-delay: 0.45s; }
    .svc-info-layout .reveal:nth-child(5) { transition-delay: 0.6s; }
    .svc-info-layout .reveal:nth-child(6) { transition-delay: 0.75s; }

    @media (max-width: 768px) {
      .svc-info-layout { grid-template-columns: 1fr !important; padding-top: 10vh !important; padding-bottom: 5vh !important; gap: 15px; }
      .svc-title-card { padding: 15px; }
      .svc-title-card h3 { font-size: 18px; }
      .svc-detail-card { padding: 15px; }
      .svc-detail-card h4 { font-size: 14px; margin-bottom: 8px; }
      .svc-detail-card p { font-size: 12px; }
      
      /* Make stats a 2x2 grid on mobile to save vertical space */
      .svc-stats-row { flex-direction: row; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .svc-stat-badge { flex-direction: column; text-align: center; justify-content: center; padding: 10px; }
      .svc-stat-badge .stat-num { font-size: 16px; margin-bottom: 5px; }
      .svc-stat-badge .stat-txt { font-size: 10px; }
      
      /* Adjust bg-2 (Sea) elements for mobile to prevent overlap */
      .ship-container { bottom: 30%; max-width: 85vw; }
      #bg-2 .sea-container { height: 35vh; }
      #bg-2 .sea-moon { top: 5%; width: 50px; height: 50px; }
      .fixed-horses { transform: scale(0.6); transform-origin: bottom center; }
      
      /* Adjust Train and Truck for mobile */
      .train-container { transform: translateX(-50%) scale(-0.5, 0.5); transform-origin: bottom center; }
      .truck-container { transform: translateX(-50%) scale(-0.5, 0.5); transform-origin: bottom center; }
    }

    /* Floating Stats */
    .stats-glass-container { max-width: 1000px; margin: 60px auto; position: relative; z-index: 10; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; display: flex; justify-content: space-around; padding: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.2); text-align: center; pointer-events: auto; }
    .stat-glass-item { display: flex; flex-direction: column; align-items: center; }
    .stat-val { font-size: 48px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 10px; }
    .stat-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1px; max-width: 150px; }

    /* Dashboard Section (Dark Theme) */
    .dashboard-section { padding: 40px 0 100px 0; position: relative; z-index: 10; background: linear-gradient(to bottom, #f4f7fa, #ffffff); border-top: 1px solid rgba(0,0,0,0.03); }
    .dash-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; }
    .dash-panel { background: #232e42; border-radius: 24px; padding: 40px; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 15px 40px rgba(0,0,0,0.3); }
    .dash-panel h3 { font-size: 22px; margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; display: flex; align-items: center; gap: 10px; color: #fff; }
    
    .hs-search-modern { position: relative; }
    .hs-search-modern input { width: 100%; padding: 18px 25px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; color: #fff; font-size: 16px; outline: none; transition: border 0.3s; }
    .hs-search-modern input:focus { border-color: #fff; }
    .modern-tags { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
    .modern-tag { padding: 8px 16px; background: rgba(255,255,255,0.1); border-radius: 20px; font-size: 13px; cursor: pointer; transition: background 0.3s; border: 1px solid transparent; color: #fff; }
    .modern-tag:hover, .modern-tag.active { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); }
    .hs-result-card { margin-top: 30px; background: #1e2736; padding: 25px; border-radius: 16px; display: none; border: 1px solid rgba(255,255,255,0.05); }
    .hs-result-card.active { display: block; animation: fadeIn 0.4s; }
    .hs-res-code { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 10px; }
    .hs-badges { display: flex; gap: 10px; margin-top: 15px; }
    .hs-badge { background: rgba(0,0,0,0.3); padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #fff; }

    .calc-grid { display: flex; flex-direction: column; gap: 20px; }
    .calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .calc-group { display: flex; flex-direction: column; gap: 8px; }
    .calc-group label { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6); text-transform: uppercase; }
    .calc-input { width: 100%; padding: 15px 20px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: #fff; font-size: 15px; font-family: inherit; outline: none; transition: border 0.3s; }
    .calc-input option { color: #000; }
    .btn-dark { background-color: #fff; color: var(--primary-dark); border: 2px solid #fff; font-weight: bold; }
    .btn-dark:hover { background-color: transparent; color: #fff; }
    .w-100 { width: 100%; }
    
    /* Light Theme Dashboard */
    .dash-panel.light { 
      background: #ffffff; 
      border: 1px solid rgba(30, 39, 54, 0.1); 
      box-shadow: 0 20px 50px rgba(0,0,0,0.05), 0 0 0 4px rgba(30, 39, 54, 0.03); 
      position: relative;
      overflow: hidden;
    }
    .dash-panel.light::before {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 4px;
      background: linear-gradient(90deg, var(--primary-dark), #3a475e);
    }
    .dash-panel.light h3 { color: var(--primary-dark) !important; font-weight: 800; }
    .dash-panel.light .hs-search-modern input { background: rgba(30, 39, 54, 0.03); border: 1px solid rgba(30, 39, 54, 0.15); color: var(--text-main); font-weight: 500; }
    .dash-panel.light .hs-search-modern input:focus { border-color: var(--primary-dark); box-shadow: 0 0 0 3px rgba(30, 39, 54, 0.1); background: #fff; }
    .dash-panel.light .modern-tag { background: #fff; color: var(--text-main); border: 1px solid rgba(30, 39, 54, 0.15); font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
    .dash-panel.light .modern-tag:hover { background: #f0f4f8; border-color: var(--primary-dark); color: var(--primary-dark); transform: translateY(-2px); }
    .dash-panel.light .modern-tag.active { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); box-shadow: 0 5px 15px rgba(30,39,54,0.2); }
    .dash-panel.light .hs-result-card { background: #fff; border: 1px solid rgba(30, 39, 54, 0.2); box-shadow: 0 10px 20px rgba(30, 39, 54, 0.05); border-radius: 12px; padding: 25px; margin-top: 20px; }
    .dash-panel.light .hs-res-code { color: var(--primary-dark); font-size: 24px; font-weight: 900; letter-spacing: 1px; margin-bottom: 5px; }
    .dash-panel.light .hs-badge { background: rgba(30, 39, 54, 0.08); color: var(--primary-dark); border: 1px solid rgba(30, 39, 54, 0.15); font-weight: 700; }
    .dash-panel.light .calc-group label { color: var(--text-light); font-weight: 800; font-size: 12px; letter-spacing: 0.5px; }
    .dash-panel.light .calc-input { background: rgba(30, 39, 54, 0.03); border: 1px solid rgba(30, 39, 54, 0.15); color: var(--text-main); font-weight: 500; }
    .dash-panel.light .calc-input:focus { border-color: var(--primary-dark); background: #fff; box-shadow: 0 0 0 3px rgba(30, 39, 54, 0.1); }
    .dash-panel.light .btn-dark { background: linear-gradient(135deg, var(--primary-dark), #293448); color: #fff; border: none; box-shadow: 0 10px 20px rgba(30, 39, 54, 0.2); }
    .dash-panel.light .btn-dark:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(30, 39, 54, 0.3); }

    /* Video Text Mask (Light Theme) */
    .video-mask-container { position: relative; width: 100%; height: 60vh; min-height: 400px; overflow: hidden; background: var(--bg-gray); margin-bottom: 60px; border-radius: 40px; }
    .video-mask-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
    .video-mask-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-gray); color: #000; mix-blend-mode: screen; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; }
    .video-mask-overlay h2 { font-size: 13vw; line-height: 1; margin: 0; letter-spacing: -3px; }
    .video-mask-overlay p { font-size: 2vw; font-weight: 700; text-transform: uppercase; letter-spacing: 6px; margin-top: -1vw; color: #000; }

    /* Sticky Services (Light Theme) */
    .sticky-services { padding: 80px 0; background: transparent; }
    #cluster-2 { scroll-snap-align: none; }
    #cluster-2 .section-title { 
        position: sticky; 
        top: 100px; /* Bounding box at 100px */
        z-index: 40; 
        margin-bottom: 0 !important; 
        background-color: var(--primary-dark);
        padding-top: 20px; /* Text visually at 120px */
        padding-bottom: 20px; /* Covers the image from below */
        box-shadow: 0 -20px 0 var(--primary-dark); /* Extra coverage above */
    }
    .sticky-layout { display: flex; gap: 60px; align-items: flex-start; position: relative; margin-top: 30vh; }
    .sticky-left { position: sticky; top: 35vh; width: 50%; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
    .sticky-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity: 0; transition: opacity 0.8s ease, transform 10s linear; transform: scale(1); }
    .sticky-img.active { opacity: 1; transform: scale(1.05); }
    .sticky-right { width: 50%; padding-bottom: 30vh; }
    .scroll-card { padding: 50px 40px; margin-bottom: 40px; background: transparent; border-radius: 20px; transition: all 0.4s; border: 1px solid transparent; opacity: 0.5; color: var(--text-main); scroll-snap-align: start; scroll-margin-top: 35vh; scroll-snap-stop: always; }
    .scroll-card.active { background: #fff; border-color: rgba(0,0,0,0.05); box-shadow: 0 20px 50px rgba(0,0,0,0.05); opacity: 1; transform: translateX(-15px); color: var(--primary-dark); }
    .sc-icon { margin-bottom: 25px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-dark); color: #fff; width: 80px; height: 80px; border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.1); flex-shrink: 0; }
    .scroll-card h3 { font-size: 26px; margin-bottom: 15px; color: var(--primary-dark); }

    #cluster-2 .scroll-card { color: rgba(255,255,255,0.6); }
    #cluster-2 .scroll-card.active { background: #232e42; border-color: rgba(255,255,255,0.05); box-shadow: 0 20px 50px rgba(0,0,0,0.4); color: #fff; }
    #cluster-2 .scroll-card.active h3 { color: #fff; }
    #cluster-2 .sc-icon { background: #4facfe; }

    /* Projects Section (Dark Theme) */
    .projects-section { padding: 80px 0 40px; }
    .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
    .project-card { border-radius: 20px; overflow: hidden; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); transition: transform 0.4s, box-shadow 0.4s; }
    .project-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.3); }
    .project-img { width: 100%; height: 250px; overflow: hidden; position: relative; }
    .project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
    .project-card:hover .project-img img { transform: scale(1.1); }
    .project-img::after { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }
    .project-body { padding: 30px; }
    .project-body h3 { font-size: 20px; font-weight: 700; margin-bottom: 15px; color: #fff; line-height: 1.4; }
    .project-body .p-link { color: #4facfe; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-top: 10px; transition: color 0.3s; }
    .project-body .p-link:hover { color: #fff; }
    
    /* Cinematic Map (Dark Theme) */
    .cinematic-map { position: relative; height: 70vh; min-height: 500px; width: 100%; background: transparent; padding: 40px 0; border-radius: 24px; overflow: hidden; }
    .dark-map { width: 100%; height: 100%; z-index: 1; border-radius: 24px; }
    .map-overlay-panel { position: absolute; top: 45%; transform: translateY(-50%); left: 30px; width: 190px; z-index: 10; padding: 20px; border-radius: 12px; color: #fff; background: rgba(20, 25, 35, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 15px 30px rgba(0,0,0,0.5); }
    .map-overlay-panel h3 { margin-bottom: 15px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
    .route-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
    .route-glass-item { padding: 9px 10px; background: rgba(255,255,255,0.03); border-radius: 6px; cursor: pointer; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 8px; color: #fff; font-size: 10px; }
    .route-glass-item:hover, .route-glass-item.active { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); transform: translateX(5px); }
    .route-glass-item strong { font-size: 11px; }
    .route-glass-item small { font-size: 9px; }
    .route-glass-item svg { width: 14px; height: 14px; }
    .leaflet-control-attribution { display: none !important; }

    /* Map Filters UI */
    .filter-btn { position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 8px 5px; border-radius: 8px; width: 100%; box-sizing: border-box; transition: all 0.3s; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
    .filter-btn input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
    .filter-btn svg { width: 14px; height: 14px; opacity: 0.5; transition: all 0.3s; }
    
    .filter-btn:has(input:checked) { color: #fff; }
    .filter-btn:has(input:checked) svg { opacity: 1; }
    
    .filter-btn.auto:has(input:checked) { background: rgba(56, 239, 125, 0.2); border-color: rgba(56, 239, 125, 0.5); }
    .filter-btn.train:has(input:checked) { background: rgba(245, 175, 25, 0.2); border-color: rgba(245, 175, 25, 0.5); }
    .filter-btn.sea:has(input:checked) { background: rgba(234, 175, 200, 0.2); border-color: rgba(234, 175, 200, 0.5); }
    .filter-btn.air:has(input:checked) { background: rgba(79, 172, 254, 0.2); border-color: rgba(79, 172, 254, 0.5); }
    
    /* Zoom Controls */
    .zoom-controls { display: flex; gap: 8px; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.1); }
    .zoom-btn { flex: 1; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; font-weight: bold; font-size: 18px; cursor: pointer; transition: all 0.3s; }
    .zoom-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); transform: scale(1.05); }

    /* Combined Map & Advantages Layout */
    .map-advantages-layout { display: flex; gap: 40px; align-items: stretch; height: 75vh; }
    .adv-col { flex: 0 0 40%; display: flex; flex-direction: column; justify-content: center; }
    .map-col { flex: 1; border-radius: 24px; overflow: hidden; position: relative; }
    .adv-masonry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; grid-auto-rows: minmax(120px, auto); width: 100%; }
    .adv-item { border-radius: 16px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; position: relative; overflow: hidden; transition: transform 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    .adv-item:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.3); }
    .adv-item.big { grid-column: span 2; }
    .adv-item.small { grid-column: span 1; }
    .adv-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); z-index: 1; pointer-events: none; }
    .adv-item .m-icon { margin-bottom: 10px; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); z-index: 2; position: relative; }
    .adv-item h4 { font-size: 16px; margin-bottom: 5px; font-weight: 700; z-index: 2; position: relative; line-height: 1.2; }
    .adv-item p { font-size: 12px; opacity: 0.9; z-index: 2; position: relative; line-height: 1.3; margin: 0; }
    
    .grad-1 { background: linear-gradient(135deg, #1f4037, #99f2c8); }
    .grad-2 { background: linear-gradient(135deg, #f12711, #f5af19); }
    .grad-3 { background: linear-gradient(135deg, #654ea3, #eaafc8); }
    .grad-4 { background: linear-gradient(135deg, #11998e, #38ef7d); }
    .grad-5 { background: linear-gradient(135deg, #FF416C, #FF4B2B); }
    .grad-6 { background: linear-gradient(135deg, #3A1C71, #D76D77, #FFAF7B); }

    /* Custom Contact Section Layout */
    .contact-layout { display: flex; gap: 40px; background: rgba(255,255,255,0.02); padding: 40px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); }
    .contact-form-col { flex: 1; }
    .contact-info-col { flex: 0 0 35%; padding-left: 40px; border-left: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; justify-content: center; }
    .contact-info-item { margin-bottom: 30px; }
    .contact-info-item h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; margin-bottom: 10px; }
    .contact-info-link { color: #4facfe; font-size: 20px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: color 0.3s; }
    .contact-info-link:hover { color: #fff; }
    .contact-info-link svg { flex-shrink: 0; }
    .contact-info-desc { color: rgba(255,255,255,0.7); font-size: 14px; margin-top: 5px; line-height: 1.5; }

    /* Contact Form (Dark Glassmorphism Theme) */
    .contact-section { padding: 80px 0; }
    .contact-box { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 50px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
    .contact-input { width: 100%; padding: 18px 20px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-size: 15px; outline: none; transition: border 0.3s, background 0.3s; }
    .contact-input:focus { border-color: #4facfe; background: rgba(0, 0, 0, 0.4); }
    .contact-input::placeholder { color: rgba(255, 255, 255, 0.5); }
    .contact-select option { color: #000; }
    .contact-btn { width: 100%; padding: 18px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 12px; background: linear-gradient(135deg, #4facfe, #00f2fe); color: #fff; border: none; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
    .contact-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(79, 172, 254, 0.4); }

    /* Contact request modal */
    .contact-modal { display: none; position: fixed; inset: 0; z-index: 11000; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 10, 18, 0.8); backdrop-filter: blur(8px); }
    .contact-modal.is-open { display: flex; }
    .contact-modal-dialog { position: relative; width: min(100%, 760px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 42px; border: 1px solid rgba(255,255,255,0.15); border-radius: 24px; background: #121924; box-shadow: 0 24px 80px rgba(0,0,0,0.55); }
    .contact-modal-close { position: absolute; top: 12px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
    .contact-modal-close:hover { background: rgba(255,255,255,0.18); }
    body.contact-modal-open { overflow: hidden; }
    
    /* Footer */
    .footer { position: relative; z-index: 10; background-color: #121924; color: var(--bg-white); padding: 80px 0 40px; }
    .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px; }
    .footer h4 { font-size: 20px; margin-bottom: 25px; font-weight: 800; color: #fff; }
    .footer p { opacity: 0.6; font-size: 15px; margin-bottom: 15px; display: flex; align-items: flex-start; gap: 10px; }
    .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.05); opacity: 0.4; font-size: 14px; }

    /* Utility */
    .reveal { opacity: 0; transform: translateY(40px); transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .reveal.active { opacity: 1; transform: translateY(0); }
    @keyframes fadeInNode { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* Quick Nav Buttons */
    .quick-nav-btns { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 1000; }
    .quick-nav-btn { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
    .quick-nav-btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-3px); }
    body.light-theme .quick-nav-btn { background: rgba(0, 0, 0, 0.4); border-color: rgba(0, 0, 0, 0.2); color: #fff; }
    body.light-theme .quick-nav-btn:hover { background: rgba(0, 0, 0, 0.6); }
    .quick-nav-btn.hidden { opacity: 0; pointer-events: none; transform: translateY(20px); }
    .quick-nav-btn svg { transition: transform 0.3s ease; }
    .quick-nav-btn:hover svg { transform: scale(1.1); }
    /* Airplane Styles (bg-3) */
    .airplane-container {
        position: absolute; top: 22%; left: 50%; 
        transform: translate(-50%, -50%) scaleX(-1);
        width: 20%; max-width: 550px;
        animation: planeBob 4s ease-in-out infinite;
        z-index: 5;
    }
    @keyframes planeBob {
        0%, 100% { transform: translate(-50%, -50%) scaleX(-1); }
        50% { transform: translate(-50%, -48%) scaleX(-1); }
    }
    .airplane-body { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5)); position: relative; z-index: 1; }
    
    .airplane-engine { position: absolute; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
    /* Precise engine intake coordinates from image grid */
    .engine-far { left: 21.1%; top: 84%; width: 4.8%; z-index: 1; clip-path: polygon(0 45%, 100% 45%, 100% 100%, 0 100%); } /* Cropped top half */
    .engine-far .engine-blades { clip-path: ellipse(56% 68% at 15% 48%); } /* Crescent crop for blades */
    .engine-inner { left: 50.53%; top: 91%; width: 5.2%; z-index: 2; clip-path: ellipse(58% 73% at 15% 51%); } /* Waning crescent crop */
    .engine-outer { left: 69.6%; top: 89.5%; width: 5.2%; z-index: 2; clip-path: ellipse(58% 73% at 15% 51%); } /* Waning crescent crop */

    .engine-blades {
        width: 100%; height: 100%;
        background: url('../images/bg_panel_3/plane_blades.png') center/contain no-repeat;
        /* Slight static blur to simulate high-speed motion without jitter */
        filter: blur(0.5px);
        position: relative;
        overflow: hidden;
        border-radius: 50%;
    }

    /* Simulate the spinning reflections instead of moving the actual image */
    .engine-blades::after {
        content: '';
        position: absolute;
        top: -50%; left: -50%; width: 200%; height: 200%;
        background: conic-gradient(
            rgba(0,0,0,0) 0deg, 
            rgba(255,255,255,0.4) 30deg, 
            rgba(0,0,0,0.3) 90deg, 
            rgba(255,255,255,0.4) 150deg, 
            rgba(0,0,0,0) 180deg, 
            rgba(255,255,255,0.4) 210deg, 
            rgba(0,0,0,0.3) 270deg, 
            rgba(255,255,255,0.4) 330deg, 
            rgba(0,0,0,0) 360deg
        );
        animation: smoothSpin 0.15s linear infinite;
        mix-blend-mode: soft-light;
    }

    @keyframes smoothSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* --- Sea Freight (bg-2) --- */
    #bg-2 { background: linear-gradient(to bottom, #111827 0%, #1e293b 50%, #334155 100%); overflow: hidden; }
    
    /* Aurora Borealis Interference Rays */
    .aurora-container {
        position: absolute; top: -10vh; left: -10vw; width: 120vw; height: 60vh;
        overflow: hidden; pointer-events: none;
        
        /* The container handles the edge fading mask so the sliding divs don't show hard edges */
        mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
        -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
        z-index: 1;
        mix-blend-mode: screen;
    }
    .aurora-layer {
        position: absolute; top: 0; left: -50vw; width: 250vw; height: 100%;
        filter: blur(8px);
        transform-origin: center bottom;
    }
    .layer-1 {
        background: 
            repeating-linear-gradient(90deg, 
                transparent 0%, rgba(32, 210, 163, 0.6) 1vw, transparent 2vw, rgba(147, 112, 219, 0.4) 3vw, transparent 5vw),
            linear-gradient(to bottom, transparent 0%, rgba(64,224,208,0.3) 40%, transparent 100%);
        animation: auroraFlow1 25s linear infinite;
    }
    .layer-2 {
        background: 
            repeating-linear-gradient(90deg, 
                transparent 0%, rgba(147, 112, 219, 0.5) 2vw, transparent 4vw, rgba(64, 224, 208, 0.6) 7vw, transparent 10vw),
            linear-gradient(to bottom, transparent 10%, rgba(147,112,219,0.3) 50%, transparent 90%);
        animation: auroraFlow2 35s linear infinite;
    }
    .layer-3 {
        background: 
            repeating-linear-gradient(90deg, 
                transparent 0%, rgba(64, 224, 208, 0.7) 1vw, transparent 4vw, rgba(32, 210, 163, 0.5) 6vw, transparent 12vw),
            linear-gradient(to bottom, transparent 20%, rgba(32,210,163,0.3) 60%, transparent 100%);
        animation: auroraFlow3 30s linear infinite;
    }

    @keyframes auroraFlow1 {
        0% { transform: translateX(0vw) skewX(-15deg) scaleY(1); opacity: 0.6; }
        50% { transform: translateX(-15vw) skewX(10deg) scaleY(1.2); opacity: 0.9; }
        100% { transform: translateX(0vw) skewX(-15deg) scaleY(1); opacity: 0.6; }
    }
    @keyframes auroraFlow2 {
        0% { transform: translateX(-10vw) skewX(12deg) scaleY(1.1); opacity: 0.8; }
        50% { transform: translateX(10vw) skewX(-8deg) scaleY(1); opacity: 0.5; }
        100% { transform: translateX(-10vw) skewX(12deg) scaleY(1.1); opacity: 0.8; }
    }
    @keyframes auroraFlow3 {
        0% { transform: translateX(5vw) skewX(-5deg) scaleY(0.9); opacity: 0.7; }
        50% { transform: translateX(-5vw) skewX(15deg) scaleY(1.3); opacity: 1; }
        100% { transform: translateX(5vw) skewX(-5deg) scaleY(0.9); opacity: 0.7; }
    }

    .sea-container { position: absolute; bottom: 0; left: 0; width: 100vw; height: 50vh; overflow: hidden; border-top: 2px solid rgba(255,255,255,0.1); }
    .sea-water { 
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
        background: linear-gradient(to bottom, #1e293b 0%, #0f172a 40%, #020617 100%);
    }
    .sea-moon {
        position: absolute;
        top: 20%;
        left: 75%;
        width: 50px;
        height: 50px;
        background: #fdfdfd;
        border-radius: 50%;
        box-shadow: 0 0 50px 15px rgba(255, 255, 255, 0.4), inset -8px -8px 15px rgba(0,0,0,0.1);
        z-index: 2;
    }
    .sea-glitter {
        position: absolute;
        top: -10px;
        left: 76.5%;
        width: 190px;
        height: calc(100% + 2px);
        transform-origin: top center;
        transform: translateX(calc(-50% + 18px)) skewX(12deg);
        background: repeating-linear-gradient(to bottom, 
            rgba(255,255,255,0.0) 0px, 
            rgba(255,255,255,0.5) 25px, 
            rgba(255,255,255,0.0) 38px
        );
        filter: url(#water-ripple) blur(1px);
        mix-blend-mode: screen;
        z-index: 1;
        mask-image: radial-gradient(ellipse at 50% 0%, black 10%, transparent 60%);
        -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 10%, transparent 60%);
    }
    .ship-container {
        position: absolute;
        bottom: 40%; left: 50%;
        transform: translateX(-50%);
        width: 750px; max-width: 70vw;
        animation: shipBob 10s infinite alternate ease-in-out;
        z-index: 2;
    }
    .bg-layer.animating .ship-container { animation-play-state: running; }
    .ship-container { 
        animation-play-state: paused; 
        --split-left: 65%; 
        --split-right: 56%; 
        --split-avg: calc((var(--split-left) + var(--split-right)) / 2);
    }
    
    .ship-main { 
        width: 100%; height: auto; display: block; 
        position: relative; z-index: 2; 
        clip-path: polygon(0 0, 100% 0, 100% var(--split-right), 0 var(--split-left));
    }
    .ship-reflection { 
        width: 100%; height: auto; display: block; 
        position: absolute; top: 0; left: 0;
        z-index: 1;
        opacity: 0.8;
        
        /* Precisely cuts out everything above the angled waterline */
        clip-path: polygon(0 var(--split-left), 100% var(--split-right), 100% 100%, 0 100%);
        
        /* Fades out the reflection as it goes deeper */
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) var(--split-avg), rgba(0,0,0,0) 98%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) var(--split-avg), rgba(0,0,0,0) 98%);
        
        /* Locks the scaling origin exactly to the waterline so it doesn't detach! */
        transform-origin: center var(--split-avg);
        animation: waterRipple 10s infinite alternate ease-in-out;
        
        /* Apply the actual SVG water displacement filter! */
        filter: url(#water-ripple);
    }
    .bg-layer.animating .ship-reflection { animation-play-state: running; }
    .ship-reflection { animation-play-state: paused; }

    @keyframes waterRipple {
        0% { transform: scaleY(1) skewX(0.5deg); opacity: 0.7; }
        100% { transform: scaleY(1.03) skewX(-1deg); opacity: 0.9; }
    }

    @keyframes shipBob {
        0% { transform: translateX(-50%) translateY(0px) rotate(-0.5deg); }
        100% { transform: translateX(-50%) translateY(-10px) rotate(1deg); }
    }
    .land-foreground-light {
        position: absolute; bottom: 0; left: -5vw; width: 110vw; height: 10vh;
        background: #ffffff; 
        border-top: 4px solid #cbd5e1;
        border-radius: 50% 50% 0 0 / 5vh 5vh 0 0;
        z-index: 5; 
    }

    /* --- Parallax Clouds for bg-3 --- */
    #bg-3 { overflow: hidden; } /* Ensure clouds don't cause scrolling */

    /* --- New Service Backgrounds --- */
    #bg-5 { background: linear-gradient(to bottom, #e2e8f0, #cbd5e1); overflow: hidden; }
    #bg-6 { background: radial-gradient(circle at 50% 65%, #fffae6 0%, #fffae6 3%, #ffd369 8%, #ff8c42 25%, #c93f5b 45%, #5c3a64 65%, #20233b 100%); overflow: hidden; }
    #bg-7 { background: linear-gradient(to bottom, #f1f5f9, #e2e8f0); overflow: hidden; }

    /* Hills for bg-3 (similar to bg-2 mountains but gentler, green-tinted) */
    .bg3-hills {
      position: absolute;
      bottom: 10vh;
      left: 0;
      width: 200%;
      height: 30vh;
      pointer-events: none;
      display: flex;
      z-index: 3;
      animation: moveHills 50s linear infinite;
      animation-play-state: paused;
    }
    .bg-layer.animating .bg3-hills { animation-play-state: running; }
    @keyframes moveHills {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .bg3-hills svg { width: 100%; height: 100%; }

    /* White landing strip at bottom of bg-3 */
    .land-foreground-bg3 {
      position: absolute; bottom: 0; left: -5vw; width: 110vw; height: 10vh;
      background: #ffffff;
      border-top: 4px solid #cbd5e1;
      border-radius: 50% 50% 0 0 / 5vh 5vh 0 0;
      z-index: 5;
    }
    
    .cloud {
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.45; /* Slightly increased to compensate for removing screen blend */
        pointer-events: none; /* Don't block clicks */
    }
    
    .cloud-type-1 { background-image: url('../images/bg_panel_3/cloud_style_1.png'); width: 550px; height: 350px; }
    .cloud-type-2 { background-image: url('../images/bg_panel_3/cloud_style_2.png'); width: 1400px; height: 600px; }
    .cloud-type-4 { background-image: url('../images/bg_panel_3/cloud_style_4.png'); width: 450px; height: 250px; }
    .cloud-type-6 { background-image: url('../images/bg_panel_3/cloud_style_6.png'); width: 900px; height: 400px; }

    @keyframes cloudPass {
        0% { transform: translateX(100vw); }
        100% { transform: translateX(-200vw); }
    }

    .cloud-formation {
        position: absolute;
        top: -10vh; left: 0; width: 100vw; height: 45vh;
        pointer-events: none;
    }

    /* --- Cloud Fronts (Top and Bottom Edges) --- */
    .cloud-front {
        position: absolute;
        left: 0; width: 100vw; height: 18vh;
        z-index: 8;
        pointer-events: none;
    }
    .cloud-front-top { 
        top: 0; 
        background: linear-gradient(to bottom, rgba(200,210,220,0.6) 0%, rgba(200,210,220,0.3) 50%, rgba(200,210,220,0) 100%);
    }
    .cloud-front-bottom { 
        bottom: 0; 
        height: 10vh; /* Make bottom front smaller than the top one */
        background: linear-gradient(to top, rgba(200,210,220,0.6) 0%, rgba(200,210,220,0.3) 50%, rgba(200,210,220,0) 100%);
    }

    /* --- Godrays (Light beams from top right) --- */
    .godrays {
        position: absolute;
        top: -10vh; left: 0; width: 100vw; height: 110vh;
        background: conic-gradient(from 195deg at 100% -5%, 
            rgba(255,255,255,0) 0deg,
            rgba(255,255,255,0.06) 5deg,
            rgba(255,255,255,0) 9deg,
            rgba(255,255,255,0) 15deg,
            rgba(255,255,255,0.08) 20deg,
            rgba(255,255,255,0) 25deg,
            rgba(255,255,255,0) 35deg,
            rgba(255,255,255,0.04) 40deg,
            rgba(255,255,255,0) 50deg
        );
        z-index: 6; /* Behind foreground clouds but over background */
        mix-blend-mode: screen; /* Lightning fast compared to overlay */
        pointer-events: none;
        animation: rayPulse 5s infinite alternate ease-in-out;
    }
    
    @keyframes rayPulse {
        0% { opacity: 0.6; }
        100% { opacity: 1; }
    }

    /* Z-index < 5 means behind plane. Z-index > 5 means in front. */
    /* Removed drop-shadow and blur filters as they cause horrific GPU lag when animated */
    .formation-1 { z-index: 2; animation: cloudPass 55s linear infinite -10s; }
    .formation-2 { z-index: 3; animation: cloudPass 35s linear infinite -25s; }
    .formation-3 { z-index: 7; animation: cloudPass 22s linear infinite -5s; }
    .formation-4 { z-index: 4; animation: cloudPass 45s linear infinite -40s; }
    .formation-5 { z-index: 6; animation: cloudPass 28s linear infinite -15s; }

    /* --- bg-5 Warehouse Animations --- */
    .warehouse-scenery {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .warehouse-aisle-container {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200%; /* Double width for scrolling */
        height: 70vh; /* Reduced size */
        display: flex;
        animation: scrollAisle 30s linear infinite;
        animation-play-state: paused;
    }
    .warehouse-aisle-container::after {
        content: '';
        position: absolute;
        top: -15vh;
        left: 0;
        width: 100%;
        height: 30vh;
        background: repeating-linear-gradient(90deg, 
            transparent 0vw, 
            transparent 8vw, 
            rgba(255,255,255,0.7) 10vw, 
            rgba(255,255,255,0.7) 15vw, 
            transparent 17vw, 
            transparent 25vw
        );
        -webkit-mask-image: linear-gradient(to bottom, black, transparent);
        mask-image: linear-gradient(to bottom, black, transparent);
        pointer-events: none;
        z-index: -1;
    }
    .bg-layer.animating .warehouse-aisle-container {
        animation-play-state: running;
    }
    
    @keyframes scrollAisle {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    
    .warehouse-aisle {
        width: 50%;
        height: 100%;
        position: relative;
    }
    
    .warehouse-aisle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    

    @keyframes shipBob {
        0% { transform: translateX(-50%) translateY(0px) rotate(-0.5deg); }
        100% { transform: translateX(-50%) translateY(-10px) rotate(1deg); }
    }
    .land-foreground-light {
        position: absolute; bottom: 0; left: -5vw; width: 110vw; height: 10vh;
        background: #ffffff; 
        border-top: 4px solid #cbd5e1;
        border-radius: 50% 50% 0 0 / 5vh 5vh 0 0;
        z-index: 5; 
    }

    /* --- Parallax Clouds for bg-3 --- */
    #bg-3 { overflow: hidden; } /* Ensure clouds don't cause scrolling */

    /* --- New Service Backgrounds --- */
    #bg-5 { background: linear-gradient(to bottom, #1e293b 0%, #334155 75%, #cbd5e1 100%, #94a3b8 100%); overflow: hidden; }
    #bg-6 { background: radial-gradient(circle at 50% 65%, #fffae6 0%, #fffae6 3%, #ffd369 8%, #ff8c42 25%, #c93f5b 45%, #5c3a64 65%, #20233b 100%); overflow: hidden; }
    #bg-7 { background: linear-gradient(to bottom, #f1f5f9, #e2e8f0); overflow: hidden; }

    /* Hills for bg-3 (similar to bg-2 mountains but gentler, green-tinted) */
    .bg3-hills {
      position: absolute;
      bottom: 10vh;
      left: 0;
      width: 200%;
      height: 30vh;
      pointer-events: none;
      display: flex;
      z-index: 3;
      animation: moveHills 50s linear infinite;
      animation-play-state: paused;
    }
    .bg-layer.animating .bg3-hills { animation-play-state: running; }
    @keyframes moveHills {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .bg3-hills svg { width: 100%; height: 100%; }

    /* White landing strip at bottom of bg-3 */
    .land-foreground-bg3 {
      position: absolute; bottom: 0; left: -5vw; width: 110vw; height: 10vh;
      background: #ffffff;
      border-top: 4px solid #cbd5e1;
      border-radius: 50% 50% 0 0 / 5vh 5vh 0 0;
      z-index: 5;
    }
    
    .cloud {
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.45; /* Slightly increased to compensate for removing screen blend */
        pointer-events: none; /* Don't block clicks */
    }
    
    .cloud-type-1 { background-image: url('../images/bg_panel_3/cloud_style_1.png'); width: 550px; height: 350px; }
    .cloud-type-2 { background-image: url('../images/bg_panel_3/cloud_style_2.png'); width: 1400px; height: 600px; }
    .cloud-type-4 { background-image: url('../images/bg_panel_3/cloud_style_4.png'); width: 450px; height: 250px; }
    .cloud-type-6 { background-image: url('../images/bg_panel_3/cloud_style_6.png'); width: 900px; height: 400px; }

    @keyframes cloudPass {
        0% { transform: translateX(100vw); }
        100% { transform: translateX(-200vw); }
    }

    .cloud-formation {
        position: absolute;
        top: -10vh; left: 0; width: 100vw; height: 45vh;
        pointer-events: none;
    }

    /* --- Cloud Fronts (Top and Bottom Edges) --- */
    .cloud-front {
        position: absolute;
        left: 0; width: 100vw; height: 18vh;
        z-index: 8;
        pointer-events: none;
    }
    .cloud-front-top { 
        top: 0; 
        background: linear-gradient(to bottom, rgba(200,210,220,0.6) 0%, rgba(200,210,220,0.3) 50%, rgba(200,210,220,0) 100%);
    }
    .cloud-front-bottom { 
        bottom: 0; 
        height: 10vh; /* Make bottom front smaller than the top one */
        background: linear-gradient(to top, rgba(200,210,220,0.6) 0%, rgba(200,210,220,0.3) 50%, rgba(200,210,220,0) 100%);
    }

    /* --- Godrays (Light beams from top right) --- */
    .godrays {
        position: absolute;
        top: -10vh; left: 0; width: 100vw; height: 110vh;
        background: conic-gradient(from 195deg at 100% -5%, 
            rgba(255,255,255,0) 0deg,
            rgba(255,255,255,0.06) 5deg,
            rgba(255,255,255,0) 9deg,
            rgba(255,255,255,0) 15deg,
            rgba(255,255,255,0.08) 20deg,
            rgba(255,255,255,0) 25deg,
            rgba(255,255,255,0) 35deg,
            rgba(255,255,255,0.04) 40deg,
            rgba(255,255,255,0) 50deg
        );
        z-index: 6; /* Behind foreground clouds but over background */
        mix-blend-mode: screen; /* Lightning fast compared to overlay */
        pointer-events: none;
        animation: rayPulse 5s infinite alternate ease-in-out;
    }
    
    @keyframes rayPulse {
        0% { opacity: 0.6; }
        100% { opacity: 1; }
    }

    /* Z-index < 5 means behind plane. Z-index > 5 means in front. */
    /* Removed drop-shadow and blur filters as they cause horrific GPU lag when animated */
    .formation-1 { z-index: 2; animation: cloudPass 55s linear infinite -10s; }
    .formation-2 { z-index: 3; animation: cloudPass 35s linear infinite -25s; }
    .formation-3 { z-index: 7; animation: cloudPass 22s linear infinite -5s; }
    .formation-4 { z-index: 4; animation: cloudPass 45s linear infinite -40s; }
    .formation-5 { z-index: 6; animation: cloudPass 28s linear infinite -15s; }

    /* --- bg-5 2.5D Parallax Warehouse --- */
    .parallax-container {
        position: absolute;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        overflow: hidden;
    }
    
    .parallax-scroller {
        position: absolute;
        top: 0; left: 0;
        width: 200vw; height: 100%;
        background-repeat: repeat-x;
        background-size: 50% 100%;
        animation: scrollParallax linear infinite;
        animation-play-state: paused;
    }
    .bg-layer.animating .parallax-scroller {
        animation-play-state: running;
    }
    
    @keyframes scrollParallax {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    
    /* Layer Speeds and Assets */
    .parallax-bg { z-index: 1; top: -120px; height: 90vh; }
    .bg-scroller {
        animation-duration: 60s;
        background-image: url('../images/bg_panel_5/background_wall.png');
        background-size: 50vw 100%;
        background-position: top;
    }
    
    .parallax-mid { z-index: 2; bottom: 22vh; top: auto; height: 72vh; }
    .mid-scroller {
        animation-duration: 30s;
        background-image: url('../images/bg_panel_5/midground_racks.png');
        background-size: 50vw 100%;
        background-position: bottom;
    }
    
    .parallax-fg { z-index: 3; bottom: 0; top: auto; height: 45vh; }
    .fg-scroller {
        animation-duration: 15s;
        background-image: url('../images/bg_panel_5/foreground_floor.png');
        background-size: 50vw 100%;
        background-position: top;
    }
    
    /* Forklift styling */
    .forklift-container {
        position: absolute;
        bottom: 20vh; /* Moved higher */
        left: 50%;
        transform: translateX(-50%);
        width: 30vw;
        max-width: 450px;
        z-index: 10;
    }
    

    .forklift-body {
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* Overlay Wheels to spin */
    .forklift-wheel {
        position: absolute;
        width: 13%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        bottom: 5%;
        background: transparent;
        border: none;
        
        /* Using the same airplane blade spin logic */
        animation: spinWheel 0.4s linear infinite;
        animation-play-state: paused;
    }
    
    /* Soft spinning highlights restricted to the inner hubcap */
    .forklift-wheel::after {
        content: '';
        position: absolute;
        top: 25%; left: 25%; right: 25%; bottom: 25%; /* Only over the inner metal hub */
        border-radius: 50%;
        background: conic-gradient(
            rgba(255,255,255,0.7) 0deg, rgba(255,255,255,0) 60deg, 
            rgba(255,255,255,0.7) 120deg, rgba(255,255,255,0) 180deg,
            rgba(255,255,255,0.7) 240deg, rgba(255,255,255,0) 300deg
        );
        filter: blur(2px);
    }
    .bg-layer.animating .forklift-wheel {
        animation-play-state: running;
    }
    
    .wheel-left { left: 16.5%; width: 12.1%}
    .wheel-right { right: 40%; width: 13%; bottom: 5.6%; }

    @keyframes spinWheel {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* --- BG-6 Multimodal Delivery Animations --- */
    .multimodal-scenery {
        position: absolute;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    
    .multi-floor {
        position: absolute;
        bottom: -5vh;
        width: 100vw;
        height: 35vh;
        background: #2b2b2b; /* Dark neutral gray */
        box-shadow: 0 -20px 50px rgba(0,0,0,0.9);
        filter: blur(2px);
        z-index: 0;
    }
    .container-stack {
        position: absolute;
        bottom: 10vh;
        width: 112.5vw;
        height: 82.5vh;
        filter: brightness(0.8) contrast(0.9) sepia(0.2) hue-rotate(-10deg) blur(0.3px) drop-shadow(0 20px 30px rgba(0,0,0,0.6));
    }
    .left-stack { left: -58vw; background: url('../images/bg_panel_6/container_stack_left.png') center bottom / contain no-repeat; }
    .right-stack { right: -58vw; background: url('../images/bg_panel_6/container_stack_right.png') center bottom / contain no-repeat; }
    
    .center-container {
        position: absolute;
        bottom: 10vh;
        left: 32.5vw; /* Centered exactly at 50vw (50 - 17.5) */
        width: 35vw;
        height: 18vh;
        background: url('../images/bg_panel_6/container_single.png') center / contain no-repeat;
        opacity: 0; /* Hidden initially */
        animation: centerContainerSync 20s linear infinite;
        animation-play-state: paused;
        filter: brightness(0.85) sepia(0.2) blur(0.2px) drop-shadow(0 10px 20px rgba(0,0,0,0.6));
    }
    #bg-6.animating .center-container { animation-play-state: running; }
    
    /* Cranes */
    .crane {
        position: absolute;
        top: 5vh;
        width: 15vw;
        height: 25vh;
        background: url('../images/bg_panel_6/crane.png') center top / contain no-repeat;
        z-index: 2;
        filter: brightness(0.85) sepia(0.2) blur(0.2px) drop-shadow(0 15px 25px rgba(0,0,0,0.5));
    }
    
    .crane-base {
        position: absolute;
        top: -4vh;
        right: -10vw;
        width: 120vw;
        height: 40vh;
        background: url('../images/bg_panel_6/crane_base.png') center top / 100% auto no-repeat;
        z-index: 1;
        pointer-events: none;
        filter: brightness(0.7) contrast(0.9) sepia(0.3) blur(0.5px) drop-shadow(0 30px 40px rgba(0,0,0,0.7));
    }
    
    .crane-cable {
        position: absolute;
        top: 60%;
        left: 50%;
        width: 4px;
        height: 5vh;
        background: #94a3b8;
        transform-origin: top center;
    }
    .crane-cable::after {
        content: '';
        position: absolute;
        bottom: -30px;
        left: -28px;
        width: 60px;
        height: 60px;
        background: url('../images/bg_panel_6/crane_hook.png') center / contain no-repeat;
        filter: brightness(0.7) blur(0.2px) drop-shadow(0 5px 10px rgba(0,0,0,0.5));
    }
    
    .crane-payload {
        position: absolute;
        top: calc(100% + 15px);
        left: calc(-17.5vw + 2px); /* center 35vw container on 4px cable */
        width: 35vw;
        height: 18vh;
        background: url('../images/bg_panel_6/container_single.png') center / contain no-repeat;
        filter: brightness(0.85) sepia(0.2) blur(0.2px) drop-shadow(0 10px 20px rgba(0,0,0,0.6));
    }
    
    .crane-a { transform: translateX(-40vw); animation: craneAMove 20s linear infinite; animation-play-state: paused; }
    .crane-a .crane-cable { animation: craneAHook 20s linear infinite; animation-play-state: paused; }
    .crane-a .crane-payload { animation: payloadAVisibility 20s linear infinite; animation-play-state: paused; }
    
    .crane-b { transform: translateX(110vw); animation: craneBMove 20s linear infinite; animation-play-state: paused; }
    .crane-b .crane-cable { animation: craneBHook 20s linear infinite; animation-play-state: paused; }
    .crane-b .crane-payload { opacity: 0; animation: payloadBVisibility 20s linear infinite; animation-play-state: paused; }
    
    #bg-6.animating .crane-a, #bg-6.animating .crane-a .crane-cable, #bg-6.animating .crane-a .crane-payload,
    #bg-6.animating .crane-b, #bg-6.animating .crane-b .crane-cable, #bg-6.animating .crane-b .crane-payload {
        animation-play-state: running;
    }
    
    /* Animations */
    @keyframes craneAMove {
        0% { transform: translateX(-40vw); animation-timing-function: ease-in-out; }
        15% { transform: translateX(42.5vw); animation-timing-function: linear; }
        35% { transform: translateX(42.5vw); animation-timing-function: ease-in-out; }
        50% { transform: translateX(-40vw); animation-timing-function: linear; }
        100% { transform: translateX(-40vw); }
    }
    
    @keyframes craneAHook {
        0% { height: 5vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        3% { height: 5vh; transform: rotate(15deg); animation-timing-function: ease-in-out; }
        12% { height: 5vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        15% { height: 5vh; transform: rotate(-15deg); animation-timing-function: ease-out; }
        16.5% { height: 5vh; transform: rotate(10deg); animation-timing-function: ease-in-out; }
        18% { height: 5vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        
        /* Lower to center container */
        19% { height: 50vh; transform: rotate(0deg); animation-timing-function: ease-out; } 
        19.5% { height: 48vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        20% { height: 50vh; transform: rotate(0deg); animation-timing-function: linear; }
        
        /* Wait for release */
        25% { height: 50vh; transform: rotate(0deg); animation-timing-function: ease-out; }
        
        /* Release spring */
        25.5% { height: 45vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        26% { height: 47vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        
        /* Raise */
        30% { height: 5vh; transform: rotate(0deg); animation-timing-function: linear; }
        
        /* Wait for raise */
        35% { height: 5vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        38% { height: 5vh; transform: rotate(-15deg); animation-timing-function: ease-in-out; }
        47% { height: 5vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        50%, 100% { height: 5vh; transform: rotate(0deg); }
    }
    
    @keyframes payloadAVisibility {
        0%, 24.9% { opacity: 1; }
        25%, 100% { opacity: 0; }
    }
    
    @keyframes centerContainerSync {
        0%, 24.9% { opacity: 0; transform: scaleY(1) translateY(-5px); }
        25% { opacity: 1; transform: scaleY(0.95) translateY(2px); }
        25.5% { opacity: 1; transform: scaleY(1.02) translateY(-1px); }
        26% { opacity: 1; transform: scaleY(1) translateY(0); }
        74.9% { opacity: 1; transform: scaleY(1) translateY(0); }
        75%, 100% { opacity: 0; transform: scaleY(1) translateY(0); }
    }
    
    @keyframes craneBMove {
        0%, 50% { transform: translateX(110vw); animation-timing-function: ease-in-out; }
        65% { transform: translateX(42.5vw); animation-timing-function: linear; }
        85% { transform: translateX(42.5vw); animation-timing-function: ease-in-out; }
        100% { transform: translateX(110vw); }
    }
    
    @keyframes craneBHook {
        0%, 50% { height: 5vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        53% { height: 5vh; transform: rotate(-15deg); animation-timing-function: ease-in-out; }
        62% { height: 5vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        65% { height: 5vh; transform: rotate(15deg); animation-timing-function: ease-out; }
        66.5% { height: 5vh; transform: rotate(-10deg); animation-timing-function: ease-in-out; }
        68% { height: 5vh; transform: rotate(0deg); animation-timing-function: ease-in; }
        
        /* Lower */
        69% { height: 50vh; transform: rotate(0deg); animation-timing-function: ease-out; }
        69.5% { height: 48vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        70% { height: 50vh; transform: rotate(0deg); animation-timing-function: linear; }
        
        /* Wait for grab */
        75% { height: 50vh; transform: rotate(0deg); animation-timing-function: ease-out; }
        
        /* Grab weight sag */
        75.5% { height: 52vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        
        /* Raise */
        80% { height: 5vh; transform: rotate(0deg); animation-timing-function: linear; }
        
        85% { height: 5vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        88% { height: 5vh; transform: rotate(15deg); animation-timing-function: ease-in-out; }
        97% { height: 5vh; transform: rotate(0deg); animation-timing-function: ease-in-out; }
        100% { height: 5vh; transform: rotate(0deg); }
    }
    
    @keyframes payloadBVisibility {
        0%, 74.9% { opacity: 0; }
        75%, 100% { opacity: 1; }
    }
    
    /* =========================================
       BG-7 Customs (Pure CSS Art 2D Machine)
       ========================================= */
    #bg-7 {
        background: #f1f5f9;
        overflow: hidden;
    }

    .facility-bg {
        position: absolute;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background: #e2e8f0;
        z-index: 0;
    }
    .facility-window {
        position: absolute;
        top: 10vh; left: 10vw; width: 80vw; height: 40vh;
        background: linear-gradient(180deg, #cbd5e1, #94a3b8);
        border: 4px solid #475569;
        border-radius: 4px;
        opacity: 0.5;
    }
    .facility-pillar {
        position: absolute;
        top: 0; width: 4vw; height: 100vh;
        background: linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8);
        border-left: 2px solid #475569;
        border-right: 2px solid #475569;
        opacity: 0.3;
    }
    .fp-1 { left: 15vw; }
    .fp-2 { left: 40vw; }
    .fp-3 { left: 65vw; }
    .fp-4 { left: 90vw; }

    .customs-scenery {
        position: absolute;
        top: 0; left: 0; width: 100vw; height: 100vh;
        pointer-events: none;
        z-index: 1;
    }

    /* Conveyor Belt */
    .css-conveyor-group {
        position: absolute;
        width: 100vw;
        height: 20vh;
        bottom: 0; /* Touches the bottom of the screen */
        left: 0;
        z-index: 1;
    }
    .conveyor-belt {
        position: absolute;
        top: 0; left: -5vw;
        width: 110vw; height: 4vh;
        background: linear-gradient(180deg, #1e293b, #0f172a);
        border-top: 2px solid #334155;
        border-bottom: 4px solid #0f172a;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        z-index: 2;
    }
    .conveyor-rollers-container {
        position: absolute;
        top: 4vh; left: 0; width: 100vw; height: 2vh;
        background: repeating-linear-gradient(90deg, 
            #334155 0, #334155 2vw, 
            #1e293b 2vw, #1e293b 2.5vw);
        border-bottom: 2px solid #0f172a;
        z-index: 1;
    }
    .conveyor-leg {
        position: absolute;
        width: 2vw; height: 16vh;
        background: linear-gradient(90deg, #475569, #94a3b8, #475569);
        top: 4vh;
        border-right: 4px solid #334155;
        border-left: 2px solid #cbd5e1;
        border-radius: 2px;
    }
    .leg-strut {
        position: absolute;
        top: 2vh; left: 50%; transform: translateX(-50%);
        width: 1vw; height: 10vh;
        background: #334155;
        border-radius: 1vw;
    }
    .leg-strut::before, .leg-strut::after {
        content: ''; position: absolute;
        width: 0.8vw; height: 0.8vw;
        background: #1e293b; border-radius: 50%;
        left: 0.1vw;
    }
    .leg-strut::before { top: 0.5vh; }
    .leg-strut::after { bottom: 0.5vh; }

    .leg-1 { left: 10vw; }
    .leg-2 { left: 30vw; }
    .leg-3 { left: 70vw; }
    .leg-4 { left: 90vw; }

    /* Scanner Machine */
    .css-scanner-back {
        position: absolute;
        width: 30vw; height: 50vh;
        bottom: 0; left: 35vw;
        background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
        box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
        z-index: 0; 
        overflow: hidden;
    }
    .scanner-grid {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(90deg, rgba(51,65,85,0.1) 1px, transparent 1px),
                    linear-gradient(180deg, rgba(51,65,85,0.1) 1px, transparent 1px);
        background-size: 2vw 2vw;
    }
    .css-scanner-arch {
        position: absolute;
        width: 34vw; height: 55vh;
        bottom: 0; left: 33vw;
        z-index: 3; 
        pointer-events: none;
    }
    .arch-panel {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: transparent;
        border-left: 6vw solid #475569;
        border-right: 6vw solid #475569;
        border-top: 8vw solid #94a3b8;
        border-radius: 20px 20px 0 0;
        box-sizing: border-box;
        box-shadow: inset 5px 5px 15px rgba(203,213,225,0.2), inset -5px -5px 15px rgba(15,23,42,0.8), 0 20px 30px rgba(15,23,42,0.8);
    }
    .arch-warning {
        position: absolute;
        bottom: 0; left: -6vw;
        width: 6vw; height: 100%;
        background: repeating-linear-gradient(45deg, #475569 0, #475569 20px, #334155 20px, #334155 40px);
        opacity: 0.8;
    }
    .arch-warning.right { left: auto; right: -6vw; }
    .arch-tech-details {
        position: absolute;
        top: -4vw; left: 2vw; width: 18vw; height: 1vh;
        background: #334155;
        border-radius: 2px;
        box-shadow: 0 2vh 0 #334155;
    }
    .laser-beam {
        position: absolute;
        top: 8vw; left: 0; width: 100%; height: 2px;
        background: #38bdf8;
        box-shadow: 0 0 15px 5px rgba(56,189,248,0.5);
        opacity: 0;
    }
    
    /* Monitor */
    .css-monitor {
        position: absolute;
        top: -12vh; left: 50%;
        transform: translateX(-50%);
        width: 14vw; height: 14vh;
        z-index: 5;
    }
    .css-monitor-stand {
        position: absolute;
        bottom: -4vh; left: 50%; transform: translateX(-50%);
        width: 3vw; height: 4vh;
        background: linear-gradient(90deg, #475569, #94a3b8, #475569);
        border-radius: 5px 5px 0 0;
    }
    .css-monitor-screen {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #0f172a;
        border: 10px solid #334155;
        border-radius: 10px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 20px rgba(203,213,225,0.1);
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
    }
    .screen-glare {
        position: absolute;
        top: -50%; left: -50%; width: 200%; height: 200%;
        background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 45%, transparent 50%);
        transform: rotate(15deg);
    }

    /* Boxes */
    .css-box-good, .css-box-bad {
        position: absolute;
        width: 8vw; height: 8vh;
        bottom: 20vh; /* Conveyor height is 20vh, scene at bottom 0 */
        left: -15vw; /* Start offscreen */
        z-index: 2; 
        opacity: 0;
    }
    .box-front {
        position: absolute;
        bottom: 0; left: 0;
        width: 100%; height: 100%;
        background: linear-gradient(180deg, #475569, #334155);
        border-top: 4px solid #94a3b8;
        border-radius: 2px;
        z-index: 10;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }
    .box-front::after {
        content: ''; position: absolute;
        top: -2vh; left: 0; width: 100%; height: 2vh;
        background: #94a3b8;
        transform-origin: bottom;
        transform: perspective(100px) rotateX(-20deg);
    }
    .box-label {
        position: absolute;
        top: 1vh; right: 1vw; width: 3vw; height: 2.5vh;
        background: #e2e8f0; border-radius: 1px;
        padding: 0.2vw;
    }
    .barcode {
        width: 100%; height: 100%;
        background: repeating-linear-gradient(90deg, #0f172a 0, #0f172a 2px, transparent 2px, transparent 4px, #0f172a 4px, #0f172a 5px, transparent 5px, transparent 7px);
    }
    
    /* Good Box contents */
    .folder {
        position: absolute;
        bottom: 2vh; width: 2vw; height: 6vh;
        border-radius: 2px 2px 0 0;
    }
    .f-1 { left: 0.5vw; background: #94a3b8; height: 8vh; }
    .f-2 { left: 3vw; background: #cbd5e1; height: 7.5vh; }
    .f-3 { left: 5.5vw; background: #475569; height: 6vh; }

    /* Bad Box contents */
    .paper {
        position: absolute;
        bottom: 2vh; width: 3vw; height: 3vw;
        background: linear-gradient(135deg, #cbd5e1, #94a3b8);
        border: 1px solid #475569;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }
    .p-1 { left: 0vw; transform: rotate(15deg); bottom: 5vh; }
    .p-2 { left: 2.5vw; transform: rotate(-25deg); bottom: 4vh; }
    .p-3 { left: 4.5vw; transform: rotate(45deg); bottom: 6vh; }
    .p-4 { left: 3vw; transform: rotate(10deg); bottom: 7vh; width: 4vw; }

    /* Screen UI */
    .screen-tick, .screen-cross {
        position: absolute;
        width: 5vw; height: 5vw;
        opacity: 0;
        filter: drop-shadow(0 0 15px currentColor);
    }

    /* Animations */
    #bg-7.animating .conveyor-rollers-container { animation: beltMoveCSS 10s linear infinite; }
    #bg-7.animating .css-box-good { animation: boxGoodMoveCSS 10s linear infinite; }
    #bg-7.animating .css-box-bad { animation: boxBadMoveCSS 10s linear infinite; }
    #bg-7.animating .screen-tick { animation: flashTick 10s linear infinite; }
    #bg-7.animating .screen-cross { animation: flashCross 10s linear infinite; }
    #bg-7.animating .folder { animation: docScanGood 10s linear infinite; }
    #bg-7.animating .paper { animation: docScanBad 10s linear infinite; }
    #bg-7.animating .laser-beam { animation: laserSweep 10s linear infinite; }

    @keyframes beltMoveCSS {
        0% { background-position: 0 0; }
        20% { background-position: 25vw 0; } /* move 1 */
        30% { background-position: 25vw 0; } /* pause */
        70% { background-position: 75vw 0; } /* move 2 */
        80% { background-position: 75vw 0; } /* pause */
        100% { background-position: 100vw 0; } /* move 3 */
    }

    @keyframes laserSweep {
        0%, 19% { top: 8vw; opacity: 0; }
        20% { top: 8vw; opacity: 1; }
        30% { top: 40vh; opacity: 1; }
        31%, 69% { top: 8vw; opacity: 0; }
        70% { top: 8vw; opacity: 1; }
        80% { top: 40vh; opacity: 1; }
        81%, 100% { top: 8vw; opacity: 0; }
    }

    @keyframes docScanGood {
        0%, 18% { margin-bottom: 0; filter: brightness(1); animation-timing-function: ease-out; }
        23%, 27% { margin-bottom: 8vh; filter: brightness(1.5) drop-shadow(0 0 10px #cbd5e1); animation-timing-function: ease-in; }
        32%, 100% { margin-bottom: 0; filter: brightness(1); }
    }
    @keyframes docScanBad {
        0%, 68% { margin-bottom: 0; filter: brightness(1); animation-timing-function: ease-out; }
        73%, 77% { margin-bottom: 8vh; filter: brightness(1.5) drop-shadow(0 0 10px #ef4444); animation-timing-function: ease-in; }
        82%, 100% { margin-bottom: 0; filter: brightness(1); }
    }

    @keyframes boxGoodMoveCSS {
        0% { transform: translateX(0); opacity: 0; }
        5% { opacity: 1; }
        20% { transform: translateX(61vw); opacity: 1; } 
        30% { transform: translateX(61vw); opacity: 1; } 
        45% { transform: translateX(130vw); opacity: 1; } 
        48% { opacity: 0; transform: translateX(130vw); }
        50%, 100% { opacity: 0; transform: translateX(130vw); }
    }

    @keyframes boxBadMoveCSS {
        0%, 50% { transform: translateX(0); opacity: 0; }
        55% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
        70% { transform: translateX(61vw) translateY(0) scale(1); opacity: 1; } 
        80% { transform: translateX(61vw) translateY(0) scale(1); opacity: 1; } 
        88% { opacity: 0; transform: translateX(61vw) translateY(30vh) scale(0.5); } 
        90%, 100% { opacity: 0; transform: translateX(61vw) translateY(30vh) scale(0.5); }
    }

    @keyframes flashTick {
        0%, 20% { opacity: 0; }
        21%, 29% { opacity: 1; }
        30%, 100% { opacity: 0; }
    }

    @keyframes flashCross {
        0%, 70% { opacity: 0; }
        71%, 79% { opacity: 1; }
        80%, 100% { opacity: 0; }
    }
    
    /* --- Advantages Styled List --- */
    .adv-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }
    
    .adv-list-item {
        display: flex;
        align-items: center;
        background: #1e293b; /* Dark card background */
        border-radius: 12px;
        padding: 15px 20px;
        gap: 15px;
        transition: transform 0.3s ease, background 0.3s ease;
        border: 1px solid rgba(255,255,255,0.05);
    }
    
    .adv-list-item:hover {
        background: #273549;
        transform: translateX(5px);
    }
    
    .adv-list-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .adv-list-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .adv-list-text h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 4px;
    }
    
    .adv-list-text p {
        margin: 0;
        font-size: 13px;
        color: #94a3b8; /* Muted text */
        line-height: 1.4;
    }


    /* =========================================
       RESPONSIVE DESIGN (TABLET & MOBILE)
       ========================================= */
       
    /* Mobile Menu Overlay Base (Hidden on Desktop) */
    .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(30, 39, 54, 0.95); backdrop-filter: blur(15px); z-index: 20000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; display: none; }
    .mobile-menu-overlay.active { opacity: 1; pointer-events: auto; }
    .close-menu-btn { position: absolute; top: 25px; right: 25px; background: none; border: none; color: #fff; cursor: pointer; padding: 5px; }
    .mobile-nav-links { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 30px; }
    .mobile-nav-links a { color: #fff; font-size: 24px; font-weight: 700; text-transform: uppercase; text-decoration: none; }

    /* TABLET (up to 1024px) */
    @media (max-width: 1024px) {
        .container { padding: 0 30px; }
        .hero-title { font-size: 3.5rem; }
        .hero-stats { gap: 30px; }
        .calc-row { grid-template-columns: 1fr; gap: 15px; }
        
        /* Reduce gap in Sticky Services */
        .sticky-layout { gap: 30px; }
        .sticky-left { width: 40%; }
        .sticky-right { width: 60%; }

        /* Map and Advantages */
        .adv-masonry-grid { grid-template-columns: repeat(2, 1fr); }
        .adv-item.big { grid-column: span 2; }
    }

    /* MOBILE (up to 768px) */
    @media (max-width: 768px) {
        /* General Layout */
        .container { padding: 0 20px; }
        .section-title { font-size: 2.2rem; }
        .slide-panel, .scroll-cluster { min-height: 100vh; height: auto; } /* Allow content to dictate height if it overflows */
        
        /* Header & Mobile Menu */
        .nav-links { display: none; }
        .mobile-menu-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; color: #fff; cursor: pointer; padding: 5px; }
        .mobile-menu-overlay { display: flex; } /* Override display: none from base */

        /* Hero Section */
        .hero-title { font-size: 2.5rem; }
        .hero-subtitle { font-size: 1rem; }
        .hero-stats { flex-direction: column; gap: 20px; text-align: center; }

        /* Services Panels (svc-info-layout) */
        .svc-info-layout { 
            display: flex !important; 
            flex-direction: column !important; 
            justify-content: flex-start !important; 
            padding-top: 15vh !important;
            padding-bottom: 5vh !important;
            gap: 20px !important;
        }
        .svc-title-card { position: static !important; }
        .svc-desc-card { width: 100%; margin-top: 0; }
        .svc-features-card { width: 100%; }

        /* Projects (Sticky Layout) */
        .sticky-layout { flex-direction: column; margin-top: 5vh; gap: 20px; }
        .sticky-left { position: relative; top: 0; width: 100%; height: 30vh; }
        .sticky-right { width: 100%; padding-bottom: 5vh; }
        .scroll-card { scroll-margin-top: 15vh; padding: 30px 20px; margin-bottom: 20px; }
        
        /* Map and Advantages */
        .map-advantages-layout { flex-direction: column; height: auto; gap: 30px; }
        .adv-col { flex: 0 0 auto; width: 100%; }
        .adv-masonry-grid { grid-template-columns: 1fr; }
        .adv-item.big, .adv-item.small { grid-column: span 1; }
        .map-col { width: 100%; height: 50vh; min-height: 400px; }

        /* Contact Section */
        .contact-layout { flex-direction: column; padding: 30px 20px; }
        .contact-info-col { padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; margin-top: 10px; }
        .contact-modal { padding: 14px; }
        .contact-modal-dialog { max-height: calc(100vh - 28px); padding: 42px 20px 24px; }
        
        /* Dashboard/Calculator Layout */
        .hs-layout { flex-direction: column; height: auto; min-height: 100vh; overflow-y: visible; }
        .hs-left, .hs-right { width: 100%; height: auto; padding: 30px 20px; overflow-y: visible; }

        /* Footer */
        .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
        .footer p { justify-content: center; }
        .footer video { margin: 0 auto 20px; }
    }

    /* Map Route Animation */
    .animated-route {
        animation: routeMove 2s linear infinite;
    }
    @keyframes routeMove {
        to {
            stroke-dashoffset: -30;
        }
    }