:root {
            --paper: #FFFDF9;
            --beige: #F1E9DC;
            --light-grey: #E9EDF0;
            --sky: #B9DDF2;
            --sky-strong: #79BBDD;
            --ocean: #123D59;
            --ocean-deep: #082C40;
            --red: #EF4B4B;
            --ink: #26343D;
            --muted: #6E7B83;
        }

        body {
            background-color: var(--paper);
            color: var(--ink);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--beige); }
        ::-webkit-scrollbar-thumb { background: var(--sky-strong); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--ocean); }

        .tabular-num {
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
        }

        /* Hero Scrollytelling Heights */
        .hero-track { height: 400vh; position: relative; }
        .capacity-track { height: 430vh; position: relative; }
        
        .sticky-viewport {
            position: sticky;
            top: 0;
            height: 100vh;
            height: 100dvh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Runway Animation Specifics */
        .runway-world {
            position: absolute;
            top: 0;
            left: 50%;
            transform-origin: bottom center;
            transform: translateX(-50%);
            width: 100%;
            height: 1000vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            will-change: transform;
        }

        .runway-surface {
            width: 100%;
            max-width: 600px;
            height: 100%;
            background-color: #8E969C;
            position: relative;
            clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
        }

        .runway-centerline {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 8px;
            background-image: linear-gradient(to bottom, transparent 50%, #FFFDF9 50%);
            background-size: 100% 100px;
            transform: translateX(-50%);
        }
        
        .runway-edge-left, .runway-edge-right {
             position: absolute;
             top: 0;
             bottom: 0;
             width: 4px;
             background-color: #FFFDF9;
        }
        .runway-edge-left { left: 2%; }
        .runway-edge-right { right: 2%; }

        /* Airplane styles */
        #hero-airplane {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50vw;
            max-width: 360px;
            transform: translate(-50%, -50%);
            will-change: transform, opacity;
            z-index: 20;
        }

        /* Cloud Parallax */
        .cloud-layer {
            position: absolute;
            width: 100%;
            height: 100%;
            background-repeat: repeat;
            pointer-events: none;
            opacity: 0;
            will-change: transform, opacity;
        }

        /* 3 Airports Interactive SVG */
        .airport-svg-container {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            position: relative;
        }
        .node-btn { cursor: pointer; pointer-events: auto; }
        
        /* Map Styles */
        .map-route {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            transition: stroke-dashoffset 0.8s ease-in-out, stroke 0.3s;
        }
        .map-route.drawn {
            stroke-dashoffset: 0;
        }
        .map-node {
            cursor: pointer;
            transition: all 0.3s;
        }
        .map-node:hover circle {
            stroke-width: 3;
        }

        /* Animation utilities */
        .fade-in-up {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hotspot Tooltip style */
        .hotspot-panel {
            display: none;
            animation: fadeIn 0.3s ease;
        }
        .hotspot-panel.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Animated Routes on Map */
        .map-route-default {
            stroke-dasharray: 8, 8;
            animation: dashFlow 2s linear infinite;
            transition: all 0.3s ease;
        }
        @keyframes dashFlow {
            to { stroke-dashoffset: -32; }
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }