/* ==========================================
   GLOBAL RESETS & BASE STYLES
   ========================================== */

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

:root {
    /* BRAND COLORS - From Palette */
    --color-primary: #F4D03F;
    /* Premium Taxi Yellow */
    --color-secondary: #2ECC71;
    /* Emerald Green */

    /* BASE COLORS - From Palette */
    --color-black: #000000;
    --color-black-dark: #0D0D0D;
    --color-white: #FFFFFF;

    /* GRAY SCALE - From Palette */
    --color-gray-100: #B0B0B0;
    --color-gray-200: #8F8F8F;
    --color-gray-300: #888888;

    /* STATUS COLORS - From Palette */
    --color-error: #FF0000;
    --color-error-soft: #FF6B6B;

    /* GLOW SYSTEM - PRIMARY - From Palette */
    /* RGB for #F4D03F is 244, 208, 63 */
    --glow-05: rgba(244, 208, 63, 0.02);
    --glow-1: rgba(244, 208, 63, 0.05);
    --glow-2: rgba(244, 208, 63, 0.1);
    --glow-3: rgba(244, 208, 63, 0.15);
    --glow-5: rgba(244, 208, 63, 0.25);
    --glow-7: rgba(244, 208, 63, 0.35);
    --glow-9: rgba(244, 208, 63, 0.45);

    /* GLOW SYSTEM - SECONDARY - From Palette */
    /* RGB for #2ECC71 is 46, 204, 113 */
    --glow-green-1: rgba(46, 204, 113, 0.05);
    --glow-green-3: rgba(46, 204, 113, 0.15);
    --glow-green-5: rgba(46, 204, 113, 0.25);
    --glow-green-7: rgba(46, 204, 113, 0.35);
    --glow-green-8: rgba(46, 204, 113, 0.4);

    /* Legacy Variable Mappings (for backward compatibility) */
    --neon-primary: var(--color-primary);
    --neon-secondary: var(--color-secondary);
    --bg-black: var(--color-black);
    --bg-card: var(--color-black-dark);
    --text-white: var(--color-white);
    --text-gray: var(--color-gray-200);
    --text-light: var(--color-gray-100);

    /* Spacing & Sizing */
    --border-radius-card: 18px;
    --border-radius-btn: 12px;
    --border-radius-input: 12px;
    --container-max: 1320px;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--color-black);
    color: var(--color-white);
    overflow-x: hidden;
    line-height: 1.6;
    padding-top: 80px;
}

/* ==========================================
   BASE TYPOGRAPHY
   ========================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
}

h1 {
    font-size: clamp(36px, 5vw, 54px);
    font-weight: 900;
}

h2 {
    font-size: clamp(30px, 4vw, 42px);
}

h3 {
    font-size: clamp(24px, 3vw, 30px);
}

h4 {
    font-size: clamp(18px, 2.5vw, 22px);
}

p {
    font-size: clamp(16px, 1.5vw, 17px);
    line-height: 1.7;
    color: var(--color-gray-100);
}

/* ==========================================
   GLOBAL UTILITIES
   ========================================== */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 64px 20px;
}

/* ==========================================
   JS ENABLED FALLBACKS
   ========================================== */
/* By default, all elements are visible (for no-JS fallback) */
/* Only hide animated elements when JS is enabled */
.js-enabled [class*="tagline"],
.js-enabled [class*="title"]:not(.hero-title):not(.form-title),
.js-enabled [class*="subtitle"],
.js-enabled [class*="description"],
.js-enabled [class*="text"],
.js-enabled [class*="card"],
.js-enabled [class*="feature"],
.js-enabled [class*="route"],
.js-enabled [class*="stat"],
.js-enabled [class*="cta"] {
    /* These will be overridden by component-specific CSS */
}

/* ==========================================
   FADE-IN ANIMATIONS (CSS + IntersectionObserver)
   ========================================== */

/* Base fade-in class - elements are hidden initially when JS is enabled */
.js-enabled .fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.js-enabled .fade-in.visible {
    opacity: 1;
}

/* Fade in with upward motion */
.js-enabled .fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-enabled .fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in with downward motion */
.js-enabled .fade-in-down {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-enabled .fade-in-down.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in from left */
.js-enabled .fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-enabled .fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade in from right */
.js-enabled .fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-enabled .fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger delay utilities for multiple elements */
.fade-in-up.delay-1 {
    transition-delay: 0.1s;
}

.fade-in-up.delay-2 {
    transition-delay: 0.2s;
}

.fade-in-up.delay-3 {
    transition-delay: 0.3s;
}

.fade-in-up.delay-4 {
    transition-delay: 0.4s;
}

.fade-in-left.delay-1 {
    transition-delay: 0.1s;
}

.fade-in-left.delay-2 {
    transition-delay: 0.2s;
}

.fade-in-left.delay-3 {
    transition-delay: 0.3s;
}

.fade-in-right.delay-1 {
    transition-delay: 0.1s;
}

.fade-in-right.delay-2 {
    transition-delay: 0.2s;
}

.fade-in-right.delay-3 {
    transition-delay: 0.3s;
}

/* ==========================================
   REDUCED MOTION SUPPORT
   ========================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Show all fade-in elements immediately when reduced motion is preferred */
    .js-enabled .fade-in,
    .js-enabled .fade-in-up,
    .js-enabled .fade-in-down,
    .js-enabled .fade-in-left,
    .js-enabled .fade-in-right {
        opacity: 1 !important;
        transform: none !important;
    }
}