/* =============================================
   DESTINATION WHIPS — Premium Design System
   Palette: Dark navy / Orange-Gold / Light gray
   Inspired by Turo, Sixt, Kayak premium tier
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* Brand */
    --navy: #0a0a1a;
    --navy-light: #1a1a2e;
    --navy-mid: #16213e;
    --accent: #ffa726;
    --accent-hover: #ff9100;
    --accent-light: #fff3e0;
    --accent-dark: #e65100;
    --red: #e63946;

    /* Surfaces */
    --bg-body: #f4f4f6;
    --bg-card: #ffffff;
    --bg-card-hover: #fafafa;
    --bg-dark: var(--navy);
    --bg-dark-light: var(--navy-light);

    /* Text */
    --text-primary: #111111;
    --text-secondary: #6b6b6b;
    --text-muted: #9a9a9a;
    --text-inverse: #ffffff;
    --text-accent: var(--accent);

    /* Borders */
    --border: #e8e8e8;
    --border-hover: #d0d0d0;
    --border-accent: var(--accent);

    /* Status */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* Aliases for backward compat */
    --primary: var(--accent);
    --primary-hover: var(--accent-hover);
    --primary-light: var(--accent-light);
    --gold-400: var(--accent);
    --gold-500: var(--accent-hover);
    --border-color: var(--border);
    --white: #ffffff;
    --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
    --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151;
    --gray-800: #1f2937; --gray-900: #111827; --black: #000000;
    --dark-500: #374151; --dark-600: #1f2937; --dark-700: #111827; --dark-800: #0f172a; --dark-900: #030712;

    /* Typography */
    --font-display: 'Bebas Neue', 'Impact', sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px;
    --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 40px; --text-5xl: 56px;
    --font-light: 300; --font-normal: 400; --font-medium: 500;
    --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900;

    /* Spacing */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

    /* Radius */
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
    --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
    --shadow-xl: 0 24px 60px rgba(0,0,0,0.12);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.06);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --container-width: 1280px;
    --header-height: 72px;
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-primary);background:var(--bg-body);line-height:1.6;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--accent);color:var(--white);}

/* === UTILITY === */
.text-accent,.text-orange,.gold{color:var(--accent)!important;}
.text-muted{color:var(--text-muted);}
.text-secondary{color:var(--text-secondary);}
.text-xs{font-size:var(--text-xs);} .text-sm{font-size:var(--text-sm);} .text-center{text-align:center;} .text-right{text-align:right;}
.text-gold{color:var(--accent);}
.font-display{font-family:var(--font-display);}
.container{max-width:var(--container-width);margin:0 auto;padding:0 var(--space-6);}
.container-md{max-width:900px;}
.section{padding:var(--space-20) 0;}
.section-sm{padding:var(--space-10) 0;}
.section-dark{background:var(--bg-dark);color:var(--text-inverse);}
.section-gray{background:var(--bg-body);}
.section-navy{background:var(--navy-light);color:var(--text-inverse);}
.animate-in{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease;}
.animate-in.visible{opacity:1;transform:none;}
.delay-1{transition-delay:0.1s;} .delay-2{transition-delay:0.2s;} .delay-3{transition-delay:0.3s;}
.hover-lift{transition:transform var(--transition-base),box-shadow var(--transition-base);}
.hover-lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);}
.grid{display:grid;gap:var(--space-6);}
.grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-2{gap:var(--space-2);} .gap-3{gap:var(--space-3);}
.mb-2{margin-bottom:var(--space-2);} .mt-2{margin-top:var(--space-2);} .mt-4{margin-top:var(--space-4);}
.font-semibold{font-weight:var(--font-semibold);}
.perk-item{display:flex;align-items:center;gap:var(--space-2);}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}