/**
 * Landing Page Styles
 * Flight Price Virtual Trading - Global to Thailand
 * Premium Travel + Fintech Design
 */

:root {
    --primary-dark: #0a1929;
    --primary-blue: #1a365d;
    --accent-gold: #d4af37;
    --accent-saffron: #ffb347;
    --text-light: #e2e8f0;
    --text-muted: #94a3b8;
    --gradient-dark: linear-gradient(135deg, #0a1929 0%, #1a365d 50%, #2d4a7c 100%);
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #ffb347 100%);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 25px 80px rgba(0, 0, 0, 0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--primary-dark);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(10, 25, 41, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 15px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-gold);
}

.brand-icon {
    font-size: 28px;
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

/* Desktop: Show nav-links, hide mobile toggle */
@media (min-width: 769px) {
    .nav-links {
        display: flex !important;
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
    }
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--accent-gold);
}

.btn-nav {
    background: var(--gradient-gold);
    color: var(--primary-dark);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    position: relative;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    outline: none;
}

.mobile-menu-toggle span {
    width: 28px;
    height: 3px;
    background: var(--accent-gold);
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
    position: relative;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Hero Section with Slider */
.hero {
    position: relative;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    opacity: 0;
    transform: translateX(100%) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    visibility: hidden;
}

.hero-slide.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 2;
    visibility: visible;
}

.hero-slide.prev {
    transform: translateX(-100%) scale(0.95);
    opacity: 0;
    visibility: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    will-change: transform, opacity;
    margin: 0;
    padding: 0;
}

.hero-slide:not(.active) .hero-background {
    opacity: 0.7;
    transform: scale(1.05);
}

.hero-slide.active .hero-background {
    opacity: 1;
    transform: scale(1);
}

/* Video Background Styles */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    overflow: hidden;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(180deg, rgba(10, 25, 41, 0.6) 0%, rgba(10, 25, 41, 0.3) 50%, rgba(10, 25, 41, 0.6) 100%),
        radial-gradient(circle at center, transparent 0%, rgba(10, 25, 41, 0.5) 100%);
    z-index: 1;
    pointer-events: none;
}

.video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%) scale(1.1);
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    filter: brightness(0.7) contrast(1.1);
}

/* Video element (uploaded video files) */
video.video-embed {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    background: #000;
}

/* Hide YouTube logo and controls */
.video-embed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1;
}

.video-background-element {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.gradient-overlay-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background removed - no overlay */
    z-index: -1;
    pointer-events: none;
}

.location-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--accent-gold);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 20px;
    color: var(--accent-gold);
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.location-icon {
    font-size: 16px;
}

.hero-slide.active .hero-background {
    animation: zoomIn 12s ease-in-out infinite;
}

@keyframes zoomIn {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.08);
    }
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
    z-index: -1;
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.flight-routes-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 80% 70%, rgba(255, 179, 71, 0.1) 2px, transparent 2px);
    background-size: 200px 200px;
    animation: float 20s infinite ease-in-out;
    z-index: -1;
}

.city-skyline,
.beach-waves {
    position: absolute;
    font-size: 200px;
    opacity: 0.1;
    animation: float 15s infinite ease-in-out;
    z-index: -1;
}

.city-skyline {
    bottom: -50px;
    right: -50px;
}

.beach-waves {
    bottom: -50px;
    left: -50px;
}

.thailand-flag {
    position: absolute;
    font-size: 200px;
    opacity: 0.1;
    animation: float 15s infinite ease-in-out;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.crypto-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: -1;
}

.crypto-icon {
    font-size: 80px;
    opacity: 0.2;
    animation: float 4s ease-in-out infinite;
}

.crypto-icon:nth-child(1) { animation-delay: 0s; }
.crypto-icon:nth-child(2) { animation-delay: 1.3s; }
.crypto-icon:nth-child(3) { animation-delay: 2.6s; }

.world-routes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.route-line {
    position: absolute;
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--accent-gold), transparent);
    transform-origin: bottom;
    animation: routeDraw 2s ease-out infinite;
}

@keyframes routeDraw {
    0% {
        height: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        height: 100px;
        opacity: 0.5;
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

.hero-content {
    text-align: center;
    max-width: 900px;
    z-index: 1;
    position: relative;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    opacity: 0;
    transform: translateY(30px);
    padding: 120px 20px 80px;
    margin: 0 auto;
}

.slide-badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--accent-gold);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Fade In Up Animation */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

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

/* Slider Controls */
.slider-controls {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.slider-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.2);
    border: 2px solid var(--accent-gold);
    color: var(--accent-gold);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.slider-btn:hover {
    background: var(--accent-gold);
    color: var(--primary-dark);
    transform: scale(1.1);
}

.slider-dots {
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.dot.active {
    background: var(--accent-gold);
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.dot:hover {
    background: rgba(212, 175, 55, 0.6);
}

.disclaimer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 179, 71, 0.2);
    border: 1px solid var(--accent-saffron);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 30px;
    color: var(--accent-saffron);
}

.badge-icon {
    font-size: 16px;
}

.hero-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--text-light);
}

.hero-title .highlight {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: clamp(18px, 2.5vw, 24px);
    color: var(--text-muted);
    margin-bottom: 40px;
    line-height: 1.6;
}

.hero-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.btn {
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--gradient-gold);
    color: var(--primary-dark);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    border: 2px solid rgba(212, 175, 55, 0.5);
}

.btn-secondary:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--accent-gold);
}

.btn-large {
    padding: 20px 40px;
    font-size: 18px;
}

.hero-stats {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-family: 'Sora', sans-serif;
    font-size: 48px;
    font-weight: 800;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.stat-label {
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Section Styles */
section {
    padding: 100px 0;
}

.section-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-light);
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 18px;
    margin-bottom: 60px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* How It Works */
.how-it-works {
    background: linear-gradient(135deg, rgba(26, 54, 93, 0.4) 0%, rgba(10, 25, 41, 0.6) 50%, rgba(45, 74, 124, 0.4) 100%);
    position: relative;
    overflow: hidden;
}

.how-it-works::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(240, 147, 251, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.how-it-works .container {
    position: relative;
    z-index: 1;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.step-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(50px);
    animation: slideUpFade 0.8s ease-out forwards;
}

.step-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 0;
}

.step-card:nth-child(1) { 
    animation-delay: 0.1s;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-color: rgba(102, 126, 234, 0.3);
}

.step-card:nth-child(1)::after {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
}

.step-card:nth-child(1)::before {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.step-card:nth-child(2) { 
    animation-delay: 0.3s;
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.15) 0%, rgba(245, 87, 108, 0.15) 100%);
    border-color: rgba(240, 147, 251, 0.3);
}

.step-card:nth-child(2)::after {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.8), rgba(245, 87, 108, 0.8));
}

.step-card:nth-child(2)::before {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.step-card:nth-child(3) { 
    animation-delay: 0.5s;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.15) 100%);
    border-color: rgba(79, 172, 254, 0.3);
}

.step-card:nth-child(3)::after {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.8), rgba(0, 242, 254, 0.8));
}

.step-card:nth-child(3)::before {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

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

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3), 0 0 40px rgba(102, 126, 234, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(102, 126, 234, 0.5), 0 0 60px rgba(102, 126, 234, 0.3);
    }
}

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    border-radius: 24px 24px 0 0;
}

.step-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(102, 126, 234, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.step-card:hover::after {
    opacity: 1;
}

.step-card:nth-child(1):hover {
    border-color: rgba(102, 126, 234, 0.6);
}

.step-card:nth-child(2):hover {
    border-color: rgba(240, 147, 251, 0.6);
}

.step-card:nth-child(3):hover {
    border-color: rgba(79, 172, 254, 0.6);
}

.step-card:hover::before {
    transform: scaleX(1);
}

.step-card:nth-child(1):hover {
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(102, 126, 234, 0.4);
}

.step-card:nth-child(2):hover {
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(240, 147, 251, 0.4);
}

.step-card:nth-child(3):hover {
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(79, 172, 254, 0.4);
}

.step-icon {
    font-size: 72px;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
    display: inline-block;
}

.step-card:hover .step-icon {
    transform: scale(1.1) rotate(5deg);
}

.step-card:nth-child(1) .step-icon {
    filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.5));
}

.step-card:nth-child(2) .step-icon {
    filter: drop-shadow(0 4px 12px rgba(240, 147, 251, 0.5));
}

.step-card:nth-child(3) .step-icon {
    filter: drop-shadow(0 4px 12px rgba(79, 172, 254, 0.5));
}

.step-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Sora', sans-serif;
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 0;
}

.step-card:nth-child(1) .step-number {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-card:nth-child(2) .step-number {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.2), rgba(245, 87, 108, 0.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-card:nth-child(3) .step-number {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-title {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-light);
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-card:nth-child(1) .step-title {
    background: linear-gradient(135deg, #ffffff, rgba(200, 220, 255, 0.9));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-card:nth-child(2) .step-title {
    background: linear-gradient(135deg, #ffffff, rgba(255, 200, 240, 0.9));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-card:nth-child(3) .step-title {
    background: linear-gradient(135deg, #ffffff, rgba(200, 240, 255, 0.9));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-description {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    position: relative;
    z-index: 1;
    font-size: 15px;
}

/* Routes Section */
.routes-section {
    background: var(--primary-dark);
    position: relative;
    overflow: hidden;
}

.routes-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("https://img.freepik.com/free-photo/global-globalization-world-map-environmental-concservation-concept_53876-124164.jpg?semt=ais_hybrid&w=740&q=80");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
    filter: brightness(0.3) contrast(1.2);
}

.routes-section .container {
    position: relative;
    z-index: 1;
}

.routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.route-card {
    background: rgba(26, 54, 93, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: scale(0.8) translateY(30px);
    animation: cardPopIn 0.6s ease-out forwards;
}

.route-card:nth-child(1) { animation-delay: 0.1s; }
.route-card:nth-child(2) { animation-delay: 0.2s; }
.route-card:nth-child(3) { animation-delay: 0.3s; }
.route-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes cardPopIn {
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.route-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-lg);
}

.route-icon {
    margin-bottom: 15px;
    display: block;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1;
    text-align: center;
}

.route-icon .fi {
    font-size: 64px;
    width: 80px;
    height: 60px;
    display: inline-block;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.route-flags {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 10;
}

.route-flag {
    display: inline-block !important;
    width: 40px !important;
    height: 30px !important;
    line-height: 1 !important;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    visibility: visible !important;
    opacity: 1 !important;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.route-flag.fi {
    font-size: 40px;
    line-height: 30px;
}

.route-flag:nth-child(1) { animation-delay: 0s; }
.route-flag:nth-child(2) { animation-delay: 0.2s; }
.route-flag:nth-child(3) { animation-delay: 0.4s; }
.route-flag:nth-child(4) { animation-delay: 0.6s; }
.route-flag:nth-child(5) { animation-delay: 0.8s; }

.route-title {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-light);
}

.route-description {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 20px;
}

.route-stats {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    flex-wrap: wrap;
}

.route-stat {
    background: rgba(212, 175, 55, 0.1);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--accent-saffron);
}

.world-map-container {
    margin-top: 60px;
    height: 400px;
    background: rgba(26, 54, 93, 0.3);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.world-map-placeholder {
    width: 100%;
    height: 100%;
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1000'%3E%3Cdefs%3E%3Cstyle%3E.ocean{fill:%230a1929;}.land{fill:%231a365d;stroke:%232d4a7c;stroke-width:1.2;opacity:0.5;fill-rule:evenodd;}%3C/style%3E%3C/defs%3E%3Crect class='ocean' width='2000' height='1000'/%3E%3Cg class='land'%3E%3Cpath d='M200 120 Q300 100 400 120 Q500 140 600 120 Q700 100 800 120 Q900 140 1000 120 Q1100 100 1200 120 L1300 120 L1300 350 Q1200 370 1100 350 Q1000 330 900 350 Q800 370 700 350 Q600 330 500 350 Q400 370 300 350 Q200 330 150 350 Z'/%3E%3Cpath d='M150 450 Q250 430 350 450 Q450 470 550 450 Q650 430 750 450 Q850 470 950 450 Q1050 430 1150 450 Q1250 470 1350 450 Q1450 430 1550 450 Q1650 470 1750 450 L1850 450 L1850 650 Q1750 670 1650 650 Q1550 630 1450 650 Q1350 670 1250 650 Q1150 630 1050 650 Q950 670 850 650 Q750 630 650 650 Q550 670 450 650 Q350 630 250 650 Q150 670 50 650 Z'/%3E%3Cpath d='M300 200 Q400 180 500 200 Q600 220 700 200 Q800 180 900 200 Q1000 220 1100 200 Q1200 180 1300 200 Q1400 220 1500 200 Q1600 180 1700 200 Q1800 220 1900 200 L1900 480 Q1800 500 1700 480 Q1600 460 1500 480 Q1400 500 1300 480 Q1200 460 1100 480 Q1000 500 900 480 Q800 460 700 480 Q600 500 500 480 Q400 460 300 480 Q200 500 100 480 Z'/%3E%3Cpath d='M100 550 Q200 530 300 550 Q400 570 500 550 Q600 530 700 550 Q800 570 900 550 Q1000 530 1100 550 Q1200 570 1300 550 Q1400 530 1500 550 Q1600 570 1700 550 L1800 550 L1800 780 Q1700 800 1600 780 Q1500 760 1400 780 Q1300 800 1200 780 Q1100 760 1000 780 Q900 800 800 780 Q700 760 600 780 Q500 800 400 780 Q300 760 200 780 Q100 800 0 780 Z'/%3E%3Cpath d='M400 80 Q500 60 600 80 Q700 100 800 80 Q900 60 1000 80 Q1100 100 1200 80 Q1300 60 1400 80 Q1500 100 1600 80 Q1700 60 1800 80 L1900 80 L1900 280 Q1800 300 1700 280 Q1600 260 1500 280 Q1400 300 1300 280 Q1200 260 1100 280 Q1000 300 900 280 Q800 260 700 280 Q600 300 500 280 Q400 260 300 280 Q200 300 100 280 Z'/%3E%3Cpath d='M500 720 Q600 700 700 720 Q800 740 900 720 Q1000 700 1100 720 Q1200 740 1300 720 Q1400 700 1500 720 Q1600 740 1700 720 L1800 720 L1800 950 Q1700 970 1600 950 Q1500 930 1400 950 Q1300 970 1200 950 Q1100 930 1000 950 Q900 970 800 950 Q700 930 600 950 Q500 970 400 950 Z'/%3E%3Cpath d='M600 350 Q700 330 800 350 Q900 370 1000 350 Q1100 330 1200 350 Q1300 370 1400 350 Q1500 330 1600 350 Q1700 370 1800 350 L1900 350 L1900 600 Q1800 620 1700 600 Q1600 580 1500 600 Q1400 620 1300 600 Q1200 580 1100 600 Q1000 620 900 600 Q800 580 700 600 Q600 620 500 600 Z'/%3E%3Cpath d='M1200 150 Q1300 130 1400 150 Q1500 170 1600 150 Q1700 130 1800 150 Q1900 170 2000 150 L2000 480 Q1900 500 1800 480 Q1700 460 1600 480 Q1500 500 1400 480 Q1300 460 1200 480 Q1100 500 1000 480 Q900 460 800 480 Q700 500 600 480 Q500 460 400 480 Q300 500 200 480 Z'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(circle at 30% 40%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, rgba(26, 54, 93, 0.5) 0%, rgba(10, 25, 41, 0.8) 100%);
    background-size: cover, cover, cover;
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    position: relative;
}

.map-route {
    position: absolute;
    font-size: 32px;
    animation: pulse 2s infinite;
}

.map-route .fi {
    font-size: 40px;
    width: 50px;
    height: 38px;
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.map-destination {
    position: absolute;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    gap: 10px;
}

.destination-pulse {
    width: 20px;
    height: 20px;
    background: var(--accent-gold);
    border-radius: 50%;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

/* Why Thailand Section */
.why-thailand-section {
    background: rgba(26, 54, 93, 0.3);
    padding: 100px 0;
}

.thailand-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.feature-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.5s;
    opacity: 0;
    transform: translateY(30px);
    animation: slideUpFade 0.8s ease-out forwards;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 25, 41, 0.7);
    z-index: 0;
    transition: all 0.5s;
    border-radius: 16px;
}

.feature-item:hover::before {
    background: rgba(10, 25, 41, 0.5);
}

.feature-item > * {
    position: relative;
    z-index: 1;
}

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

.feature-item:hover {
    transform: translateY(-10px);
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-lg);
}

.feature-emoji {
    font-size: 48px;
    margin-bottom: 15px;
    display: block;
    animation: float 3s ease-in-out infinite;
}

.feature-item h3 {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-light);
}

.feature-item p {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 14px;
}

/* Thailand Showcase */
.thailand-showcase {
    background: rgba(26, 54, 93, 0.3);
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
}

.destination-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    opacity: 0;
    transform: rotateY(90deg);
    animation: cardFlipIn 0.8s ease-out forwards;
}

.destination-card:nth-child(1) { animation-delay: 0.1s; }
.destination-card:nth-child(2) { animation-delay: 0.2s; }
.destination-card:nth-child(3) { animation-delay: 0.3s; }
.destination-card:nth-child(4) { animation-delay: 0.4s; }
.destination-card:nth-child(5) { animation-delay: 0.5s; }

@keyframes cardFlipIn {
    to {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

.destination-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.destination-image {
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.destination-overlay {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

.destination-name {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 600;
    padding: 20px 20px 10px;
    color: var(--text-light);
}

.destination-info {
    padding: 0 20px;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 15px;
}

.destination-price-trend {
    padding: 15px 20px;
    background: rgba(212, 175, 55, 0.1);
    color: var(--accent-saffron);
    font-size: 14px;
    font-weight: 500;
}

/* TouristDigiPay Section */
.touristdigipay-section {
    background: var(--primary-dark);
    padding: 100px 0;
}

.touristdigipay-header {
    text-align: center;
    margin-bottom: 60px;
}

.touristdigipay-header .link-external {
    color: var(--accent-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-gold);
    transition: all 0.3s;
}

.touristdigipay-header .link-external:hover {
    color: var(--accent-saffron);
    border-bottom-color: var(--accent-saffron);
}

.touristdigipay-showcase {
    margin-bottom: 60px;
}

.tdp-main-card {
    background: rgba(26, 54, 93, 0.6);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 24px;
    padding: 50px;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-xl);
}

.tdp-logo-area {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.2);
}

.tdp-logo {
    font-family: 'Sora', sans-serif;
    font-size: 48px;
    font-weight: 800;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.tdp-tagline {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 500;
}

.tdp-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.tdp-feature {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s;
}

.tdp-feature:hover {
    transform: translateY(-5px);
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-lg);
}

.tdp-feature-icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: block;
}

.tdp-feature h4 {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-light);
}

.tdp-feature p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.tdp-cta-area {
    text-align: center;
    margin-top: 40px;
}

.tdp-note {
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.tdp-note a {
    color: var(--accent-gold);
    text-decoration: none;
}

.tdp-note a:hover {
    text-decoration: underline;
}

.tdp-integration-info {
    background: rgba(26, 54, 93, 0.4);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 40px;
}

.tdp-integration-info h3 {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
    color: var(--text-light);
}

.integration-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.integration-step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    position: relative;
}

.integration-step .step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: var(--gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-dark);
}

.integration-step h4 {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin: 20px 0 10px;
    color: var(--text-light);
}

.integration-step p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.concept-badge {
    text-align: center;
    margin-bottom: 30px;
}

.concept-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.concept-card {
    background: rgba(26, 54, 93, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}

.concept-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.concept-card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-light);
}

.concept-card p {
    color: var(--text-muted);
    line-height: 1.8;
}

.concept-disclaimer {
    background: rgba(255, 179, 71, 0.1);
    border: 1px solid var(--accent-saffron);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: var(--accent-saffron);
    font-size: 14px;
}

/* Features Section */
.features-section {
    background: rgba(26, 54, 93, 0.3);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-light);
}

.feature-card p {
    color: var(--text-muted);
    line-height: 1.8;
}

/* Legal Section */
.legal-section {
    background: var(--primary-dark);
}

.legal-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.legal-card {
    background: rgba(26, 54, 93, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 40px;
}

.legal-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.legal-card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-light);
}

.legal-card ul {
    list-style: none;
    padding: 0;
}

.legal-card li {
    padding: 10px 0;
    color: var(--text-muted);
    padding-left: 25px;
    position: relative;
}

.legal-card li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-gold);
    font-size: 20px;
}

.transparency-box {
    background: rgba(255, 179, 71, 0.1);
    border: 1px solid var(--accent-saffron);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.8;
}

/* Final CTA */
.final-cta {
    background: var(--gradient-dark);
    text-align: center;
    padding: 120px 20px;
}

.cta-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-light);
}

.cta-subtitle {
    font-size: 20px;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.cta-disclaimer {
    color: var(--accent-saffron);
    font-size: 14px;
    margin-top: 30px;
}

/* Footer */
.footer {
    background: rgba(10, 25, 41, 0.8);
    padding: 60px 0 30px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--accent-gold);
}

.footer-section p,
.footer-section a {
    color: var(--text-muted);
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: var(--accent-gold);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    color: var(--text-muted);
    font-size: 14px;
}

/* Ripple Effect */
.btn {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Additional Animations */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.feature-card:hover .feature-icon,
.step-card:hover .step-icon {
    animation: float 2s ease-in-out infinite, shimmer 3s infinite;
    transform: scale(1.1);
}

/* Scroll Progress Indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--gradient-gold);
    z-index: 9999;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s;
}

/* Video Fallback */
.video-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a1929 0%, #1a365d 50%, #2d4a7c 100%);
    z-index: -1;
}

/* Responsive - Mobile Menu */
@media screen and (max-width: 768px) {
    /* CRITICAL: Force hamburger menu to show FIRST */
    .mobile-menu-toggle,
    .nav-container .mobile-menu-toggle,
    button.mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 1001 !important;
        width: 40px !important;
        height: 40px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 8px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
    
    .mobile-menu-toggle span,
    .nav-container .mobile-menu-toggle span {
        display: block !important;
        width: 28px !important;
        height: 3px !important;
        background: #d4af37 !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }
    
    .nav-container {
        padding: 0 15px;
    }

    .nav-brand {
        font-size: 20px;
    }

    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: rgba(10, 25, 41, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
        gap: 0;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        display: flex !important;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-links a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1);
        display: block;
        text-align: center;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    .nav-links a:hover {
        background: rgba(212, 175, 55, 0.1);
        padding-left: 25px;
    }

    .btn-nav {
        margin-top: 10px;
        text-align: center;
        padding: 12px 24px;
    }

    /* Layout order */
    .mobile-menu-toggle {
        order: 3;
    }
    
    .nav-brand {
        order: 1;
        flex: 1;
    }
    
    .nav-links {
        order: 2;
    }

    .hero {
        min-height: 100vh;
        max-height: 100vh;
        height: 100vh;
    }
    
    .hero-slider {
        height: 100vh;
    }
    
    .hero-slide {
        padding: 0;
    }
    
    .hero-content {
        padding: 100px 20px 60px;
    }
    
    .hero-slide {
        padding: 0;
    }
    
    .hero-content {
        padding: 100px 20px 60px;
    }
    
    .video-embed,
    .video-background-element {
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) scale(1.2);
    }
    
    .hero-content {
        max-width: 100%;
        padding: 0 15px;
    }
    
    .slider-controls {
        bottom: 80px;
    }
    
    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .location-badge {
        font-size: 12px;
        padding: 6px 12px;
    }

    .hero-cta {
        flex-direction: column;
        gap: 15px;
    }

    .hero-cta .btn {
        width: 100%;
        text-align: center;
    }

    /* Hero stats - prevent overflow on small */
    .hero-stats {
        gap: 24px;
        padding: 0 15px;
        bottom: 20px;
    }

    .hero-stats .stat-value {
        font-size: 32px;
    }

    .hero-stats .stat-label {
        font-size: 12px;
    }

    .steps-grid,
    .routes-grid,
    .destinations-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }

    section {
        padding: 60px 0;
    }

    .world-map-container {
        height: 280px;
        margin-top: 40px;
    }

    .tdp-main-card {
        padding: 30px 20px;
    }

    .tdp-logo {
        font-size: 36px;
    }

    .tdp-tagline {
        font-size: 16px;
    }

    .legal-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .legal-card {
        padding: 24px 20px;
    }

    .legal-card h3 {
        font-size: 20px;
    }

    .final-cta {
        padding: 60px 20px;
    }

    .cta-title {
        font-size: 28px;
    }

    .cta-subtitle {
        font-size: 16px;
    }

    .footer-content {
        gap: 24px;
    }

    .legal-content {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .section-title {
        font-size: 32px;
    }

    .section-subtitle {
        font-size: 16px;
    }
}

/* Large Screens (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-title {
        font-size: 64px;
    }
    
    .hero-subtitle {
        font-size: 22px;
    }
    
    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .destinations-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Extra Large Screens (1920px and up) */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    .hero-title {
        font-size: 72px;
    }
    
    .hero-subtitle {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    .nav-brand {
        font-size: 18px;
    }

    .nav-brand .brand-icon {
        font-size: 24px;
    }

    .nav-links {
        top: 65px;
        padding: 15px;
    }

    .hero-content {
        padding: 80px 12px 50px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .slide-badge,
    .location-badge {
        font-size: 11px;
        padding: 6px 12px;
    }

    .slider-controls {
        bottom: 60px;
        gap: 12px;
    }

    .slider-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .dot {
        width: 10px;
        height: 10px;
    }

    /* Hero stats - single column or smaller on very small */
    .hero-stats {
        flex-direction: column;
        gap: 16px;
        bottom: 16px;
        padding: 0 10px;
    }

    .hero-stats .stat-value {
        font-size: 28px;
    }

    .hero-stats .stat-label {
        font-size: 11px;
    }

    section {
        padding: 40px 0;
    }

    .section-title {
        font-size: 24px;
    }

    .section-subtitle {
        font-size: 14px;
        margin-bottom: 40px;
    }

    .step-card {
        padding: 24px 20px;
    }

    .step-number {
        font-size: 56px;
        top: 12px;
        right: 12px;
    }

    .step-icon {
        font-size: 56px;
    }

    .step-title {
        font-size: 20px;
    }

    .step-description {
        font-size: 14px;
    }

    .routes-grid {
        gap: 20px;
    }

    .route-card {
        padding: 20px;
    }

    .route-title {
        font-size: 18px;
    }

    .world-map-container {
        height: 220px;
        margin-top: 30px;
    }

    .tdp-main-card {
        padding: 24px 16px;
    }

    .tdp-logo-area {
        margin-bottom: 30px;
        padding-bottom: 20px;
    }

    .tdp-logo {
        font-size: 32px;
    }

    .tdp-tagline {
        font-size: 14px;
    }

    .tdp-features-grid {
        gap: 16px;
    }

    .tdp-feature {
        padding: 18px;
    }

    .tdp-integration-info {
        padding: 24px 16px;
    }

    .tdp-integration-info h3 {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .integration-steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .legal-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .legal-card {
        padding: 20px 16px;
    }

    .legal-card h3 {
        font-size: 18px;
    }

    .final-cta {
        padding: 40px 16px;
    }

    .cta-title {
        font-size: 24px;
    }

    .cta-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .footer {
        padding: 40px 0 24px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-aos] {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

[data-aos][data-delay="100"] {
    animation-delay: 0.1s;
}

[data-aos][data-delay="200"] {
    animation-delay: 0.2s;
}