/* ============================================
   LimmoVTC - Main Stylesheet
   MyVTC - Bien plus qu'un simple trajet
   Palette: Noir #050505 + Or #C8A96E
   Fonts: Playfair Display + Montserrat
   ============================================ */

/* ── CSS VARIABLES ── */
:root {
    --gold: #C8A96E;
    --gold-light: #E8D5A3;
    --gold-dark: #9A7A45;
    --gold-glow: rgba(200,169,110,0.08);
    --glow-gold: rgba(200,169,110,0.15);
    --black: #050505;
    --dark-pure: #020202;
    --dark: #0D0D0D;
    --dark2: #141414;
    --dark3: #1C1C1C;
    --white: #F5F0E8;
    --grey: #888;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
    --font-accent: 'Cormorant Garamond', serif;
    --cream: #F5F0E8;
    --cream-dark: #E8E0D0;
    --cream-text: #2A2520;
    --cream-text-muted: #5A5248;
    /* Glassmorphism tokens */
    --glass-bg: rgba(13,13,13,0.4);
    --glass-border: rgba(200,169,110,0.15);
    --glass-blur: 20px;
    /* Easing tokens */
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snap: cubic-bezier(0.77, 0, 0.18, 1);
    --ease-bounce: cubic-bezier(0.25, 1, 0.5, 1);
    /* Scroll-driven (updated by JS) */
    --scroll-y: 0;
    --viewport-progress: 0;
}

/* ── FLOATING GOLD ORBS ── */
.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(200,169,110,0.08) 0%, transparent 60%);
    z-index: 0;
}
.orb-1 {
    width: 600px; height: 600px;
    top: -200px; left: -200px;
    animation: floatOrb 20s infinite alternate;
}
.orb-2 {
    width: 500px; height: 500px;
    bottom: -100px; right: -100px;
    animation: floatOrb 25s infinite alternate-reverse;
}
@keyframes floatOrb {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 100px); }
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 300;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Film grain noise overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; }

/* ── PRELOADER ── */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #F8F5F0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Curtain split reveal */
.preloader::before,
.preloader::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 50%;
    z-index: 3;
    transition: transform 1.1s var(--ease-snap) 0.15s;
}
.preloader::before {
    left: 0;
    background: linear-gradient(135deg, #F8F5F0 0%, #EDE8E0 100%);
    transform-origin: left;
}
.preloader::after {
    right: 0;
    background: linear-gradient(225deg, #F8F5F0 0%, #EDE8E0 100%);
    transform-origin: right;
}
.preloader.loaded::before { transform: translateX(-100%); }
.preloader.loaded::after { transform: translateX(100%); }
.preloader.loaded {
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s 1.4s;
}
.preloader.loaded .preloader-inner {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.preloader-inner {
    text-align: center;
    position: relative;
    z-index: 4;
}
/* Logo image */
.preloader-logo-img {
    margin-bottom: 30px;
    animation: preloaderFloat 2s ease-in-out infinite;
}
.preloader-logo-img img {
    width: 180px;
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(200,169,110,0.25));
}
@keyframes preloaderFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
/* Gold shimmer sweep across logo */
.preloader-logo-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(200,169,110,0.3) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: preloaderShimmer 1.8s ease-in-out infinite;
    pointer-events: none;
    border-radius: 8px;
}
.preloader-logo-img { position: relative; display: inline-block; }
@keyframes preloaderShimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}
/* Progress bar */
.preloader-bar {
    width: 200px;
    height: 2px;
    background: rgba(200,169,110,0.15);
    margin: 0 auto 16px;
    overflow: hidden;
    border-radius: 2px;
}
.preloader-progress {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
    border-radius: 2px;
    animation: preloaderProgress 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes preloaderProgress {
    0% { width: 0; }
    60% { width: 70%; }
    100% { width: 100%; }
}
.preloader-text {
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #9A917E;
}
/* ── Dark mode preloader ── */
@media (prefers-color-scheme: dark) {
    .preloader { background: var(--black); }
    .preloader::before { background: linear-gradient(135deg, var(--black) 0%, var(--dark) 100%); }
    .preloader::after { background: linear-gradient(225deg, var(--black) 0%, var(--dark) 100%); }
    .preloader-logo-img img { filter: drop-shadow(0 4px 24px rgba(200,169,110,0.35)) brightness(1.05); }
    .preloader-bar { background: rgba(200,169,110,0.1); }
    .preloader-text { color: var(--grey); }
}

/* ── CUSTOM CURSOR (disabled — using default cursor) ── */
.cursor,
.cursor-ring,
.cursor-trail {
    display: none !important;
}

/* ── NOISE TEXTURE OVERLAY ── */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.4;
}

/* ── NAVBAR ── */
.navbar-main {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 28px 60px;
    transition: all 0.5s ease;
}
.navbar-main.scrolled {
    background: rgba(5,5,5,0.92);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 16px 60px;
    border-bottom: 1px solid rgba(200,169,110,0.2);
    box-shadow: 0 4px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(200,169,110,0.08);
}
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}
.logo {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--white);
    text-transform: uppercase;
    text-decoration: none;
}
.logo span { color: var(--gold); }
.logo img { max-height: 50px; width: auto; }

.nav-links { display: flex; gap: 36px; list-style: none; align-items: center; }
.nav-links li { list-style: none; }
.nav-links a {
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(245,240,232,0.7);
    transition: color 0.3s;
    position: relative;
}
.nav-links a::after {
    content: '';
    position: absolute; bottom: -8px; left: 50%;
    width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
    transform: translateX(-50%) scale(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { transform: translateX(-50%) scale(1); }
.nav-links .active > a { color: var(--gold); }
.nav-links .active > a::after { transform: translateX(-50%) scale(1); }

.nav-cta {
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
    padding: 10px 24px !important;
    font-size: 0.65rem !important;
    letter-spacing: 3px;
    transition: all 0.3s ease !important;
}
.nav-cta:hover { background: var(--gold) !important; color: var(--black) !important; }
.nav-cta::after { display: none !important; }
.nav-cta { position: relative; overflow: hidden; }
.nav-cta::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.2), transparent);
    animation: ctaSweep 3s ease-in-out infinite;
}
@keyframes ctaSweep {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,169,110,0.4); }
    50% { box-shadow: 0 0 15px 4px rgba(200,169,110,0.15); }
}
.nav-cta { animation: ctaPulse 3s ease-in-out infinite; }
.nav-cta:hover { transform: scale(1.05); }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    padding: 8px;
    z-index: 1001;
}
.hamburger-line {
    width: 28px;
    height: 2px;
    background: var(--gold);
    transition: all 0.3s ease;
    display: block;
}
.hamburger.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* Navbar entrance animation */
@keyframes navSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.navbar-main { animation: navSlideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Logo hover micro-animation */
.logo { transition: transform 0.3s ease; }
.logo:hover span {
    display: inline-block;
    animation: logoGlow 0.6s ease;
}
@keyframes logoGlow {
    0% { transform: scale(1); text-shadow: none; }
    50% { transform: scale(1.15); text-shadow: 0 0 12px rgba(200,169,110,0.6); }
    100% { transform: scale(1); text-shadow: none; }
}

/* Active nav indicator bar */
.nav-indicator {
    position: absolute;
    bottom: -2px;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 8px rgba(200,169,110,0.4);
}
.nav-links { position: relative; }

/* ── MOBILE MENU OVERLAY ── */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(5,5,5,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.mobile-menu-overlay.open {
    transform: translateX(0);
    opacity: 1;
}
.mobile-menu-content {
    text-align: center;
    width: 100%;
    padding: 20px;
}
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    position: absolute;
    top: 0; left: 0; right: 0;
}
.mobile-close {
    width: 40px; height: 40px;
    background: none; border: none;
    position: relative;
}
.mobile-close span {
    position: absolute;
    width: 28px; height: 2px;
    background: var(--gold);
    top: 50%; left: 50%;
}
.mobile-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mobile-nav-links li a {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s;
    display: inline-block;
}
.mobile-nav-links li a:hover { color: var(--gold); }

.mobile-nav-links li {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-overlay.open .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.mobile-menu-overlay.open .mobile-nav-links li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.open .mobile-nav-links li:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu-overlay.open .mobile-nav-links li:nth-child(3) { transition-delay: 0.3s; }
.mobile-menu-overlay.open .mobile-nav-links li:nth-child(4) { transition-delay: 0.4s; }
.mobile-menu-overlay.open .mobile-nav-links li:nth-child(5) { transition-delay: 0.5s; }
.mobile-menu-overlay.open .mobile-nav-links li:nth-child(6) { transition-delay: 0.6s; }
.mobile-menu-overlay.open .mobile-nav-links li:nth-child(7) { transition-delay: 0.7s; }
.mobile-menu-overlay.open .mobile-nav-links li:nth-child(8) { transition-delay: 0.8s; }
.mobile-menu-overlay.open .mobile-nav-links li:nth-child(9) { transition-delay: 0.9s; }
.mobile-menu-overlay.open .mobile-nav-links li:nth-child(10) { transition-delay: 1.0s; }

.mobile-menu-footer {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease 0.8s, transform 0.5s ease 0.8s;
}
.mobile-menu-overlay.open .mobile-menu-footer {
    opacity: 1;
    transform: translateY(0);
}

.mobile-phone svg, .mobile-whatsapp svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
}
.mobile-phone, .mobile-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s, color 0.3s;
    border-radius: 4px;
}
.mobile-phone:hover, .mobile-whatsapp:hover {
    background: rgba(200,169,110,0.1);
}

.mobile-menu-footer {
    position: absolute;
    bottom: 40px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.mobile-phone, .mobile-whatsapp {
    color: var(--gold);
    font-size: 0.75rem;
    letter-spacing: 2px;
    padding: 10px 20px;
    border: 1px solid rgba(200,169,110,0.3);
}

/* ── HERO SLIDER ── */
.hero { position: relative; height: 100vh; overflow: hidden; }
.slides {
    display: flex; width: 300%; height: 100%;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.18, 1);
}
.slide {
    width: 33.333%; height: 100%;
    position: relative; flex-shrink: 0;
}
.slide-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 8s var(--ease-snap), filter 0.3s ease;
    will-change: transform, filter;
}
.slide.active .slide-bg { transform: scale(1); }

/* Video background support */
.slide-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(0.55) saturate(0.8);
    transition: filter 0.3s ease;
}

.slide-1 .slide-bg {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1208 50%, #0a0a0a 100%);
}
.slide-2 .slide-bg {
    background: linear-gradient(135deg, #050505 0%, #111008 50%, #050505 100%);
}
.slide-3 .slide-bg {
    background: linear-gradient(135deg, #080808 0%, #150f05 50%, #080808 100%);
}
.slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(5,5,5,0.95) 40%, rgba(5,5,5,0.3) 100%);
}
.slide-content {
    position: absolute;
    top: 50%; left: 10%;
    transform: translateY(-50%);
    max-width: 600px;
    z-index: 2;
}
.slide-tag {
    font-size: 0.6rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 24px;
    display: flex; align-items: center; gap: 16px;
    opacity: 0; transform: translateY(20px);
    transition: all 0.8s ease 0.3s;
}
.slide-tag::before {
    content: '';
    display: block; width: 40px; height: 1px; background: var(--gold);
}
.slide.active .slide-tag { opacity: 1; transform: translateY(0); }

.slide-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 5.5rem);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 28px;
    opacity: 1; transform: none;
}
.slide-title em { font-style: italic; color: var(--gold); }

/* Kinetic word-reveal animation */
.slide-title .word-reveal {
    display: inline-block;
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    transform: translateY(20px);
    transition: clip-path 0.7s var(--ease-smooth), opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}
.slide.active .slide-title .word-reveal {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateY(0);
}
.slide-title em .word-reveal,
.slide-title .word-reveal-em {
    transform: translateY(20px) skewX(-4deg);
}
.slide.active .slide-title em .word-reveal,
.slide.active .slide-title .word-reveal-em {
    transform: translateY(0) skewX(0deg);
}

.slide-desc {
    font-size: 0.85rem;
    line-height: 1.9;
    color: rgba(245,240,232,0.6);
    max-width: 440px;
    margin-bottom: 48px;
    opacity: 0; transform: translateY(30px);
    transition: all 0.9s ease 0.7s;
}
.slide.active .slide-desc { opacity: 1; transform: translateY(0); }

.slide-btns {
    display: flex; gap: 20px; flex-wrap: wrap;
    opacity: 0; transform: translateY(30px);
    transition: all 0.9s ease 0.9s;
}
.slide.active .slide-btns { opacity: 1; transform: translateY(0); }

/* Buttons */
.btn-gold {
    display: inline-block;
    background: var(--gold);
    color: var(--black);
    border: none;
    padding: 16px 36px;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    text-decoration: none;
}
.btn-gold::before {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}
.btn-gold:hover::before { left: 100%; }
.btn-gold:hover { background: var(--gold-light); }

.btn-outline {
    display: inline-block;
    border: 1px solid rgba(245,240,232,0.4);
    color: var(--white);
    background: transparent;
    padding: 16px 36px;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: all 0.4s ease;
    text-decoration: none;
}
.btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 20px rgba(200,169,110,0.1), inset 0 0 20px rgba(200,169,110,0.05);
}
.btn-gold:active, .btn-outline:active {
    transform: scale(0.97);
}

/* Slider Controls */
.slider-nav {
    position: absolute; bottom: 50px; left: 10%;
    display: flex; align-items: center; gap: 20px; z-index: 10;
}
.slider-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(245,240,232,0.3);
    transition: all 0.3s ease;
    border: none;
}
.slider-dot.active {
    background: var(--gold);
    width: 30px; border-radius: 3px;
}
.slider-arrows {
    position: absolute; bottom: 40px; right: 10%;
    display: flex; gap: 12px; z-index: 10;
}
.arrow-btn {
    width: 50px; height: 50px;
    border: 1px solid rgba(200,169,110,0.4);
    background: transparent;
    color: var(--gold);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center;
}
.arrow-btn:hover { background: var(--gold); color: var(--black); }

/* Scroll hint */
.scroll-hint {
    position: absolute; bottom: 50px;
    left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: 0.55rem; letter-spacing: 4px; text-transform: uppercase;
    color: rgba(245,240,232,0.4);
    animation: float 2s ease-in-out infinite;
    z-index: 10;
}
.scroll-line {
    width: 1px; height: 50px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

/* ── BOOKING BAR ── */
.booking-bar {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 40px 10%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    z-index: 5;
    overflow: hidden;
}
/* Animated conic-gradient border glow */
.booking-bar::before {
    content: '';
    position: absolute; inset: -1px;
    background: conic-gradient(from var(--booking-angle, 0deg), transparent 0%, var(--glow-gold) 10%, transparent 20%, transparent 50%, var(--glow-gold) 60%, transparent 70%);
    border-radius: 9px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: bookingBorderSpin 4s linear infinite;
}
.booking-bar:hover::before,
.booking-bar:focus-within::before { opacity: 1; }
@keyframes bookingBorderSpin {
    to { --booking-angle: 360deg; }
}
@property --booking-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.booking-field {
    padding: 0 28px;
    border-right: 1px solid rgba(200,169,110,0.1);
    display: flex; flex-direction: column; gap: 8px;
}
.booking-field:last-of-type { border-right: none; }
.field-label {
    font-size: 0.55rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
}
.field-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 300;
    width: 100%;
    position: relative;
}
.field-input::placeholder { color: rgba(245,240,232,0.3); }
.field-input::-webkit-calendar-picker-indicator { filter: invert(0.7); }
/* Gold underline focus animation */
.booking-field {
    position: relative;
}
.booking-field::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 28px; right: 28px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform 0.4s var(--ease-smooth);
}
.booking-field:focus-within::after {
    transform: scaleX(1);
}
.booking-submit {
    background: var(--gold);
    border: none;
    padding: 0 40px;
    margin-left: 20px;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--black);
    transition: background 0.3s, transform 0.15s;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.booking-submit:hover { background: var(--gold-light); }
.booking-submit:active { transform: scale(0.97); }
/* Ripple effect container */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: scale(0);
    animation: rippleOut 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes rippleOut {
    to { transform: scale(4); opacity: 0; }
}

/* ── STATS (Bento Asymmetric) ── */
.stats {
    padding: 70px 10%;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    text-align: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
}
.stats::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--glass-border), transparent);
}
/* Gold light trail sweep */
.stats::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 200px;
    background: linear-gradient(90deg, transparent, var(--gold-glow), transparent);
    animation: statsSweep 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes statsSweep {
    0% { left: -200px; }
    100% { left: calc(100% + 200px); }
}
.stat-item { display: flex; flex-direction: column; gap: 8px; }
.stat-item:first-child {
    padding: 20px 0;
}
.stat-item:first-child .stat-number {
    font-size: 5rem;
}
.stat-number {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold), var(--gold-dark));
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
    overflow: hidden;
}
/* Slot machine digit container */
.stat-digit {
    display: inline-block;
    overflow: hidden;
    height: 1em;
    line-height: 1;
    vertical-align: bottom;
}
.stat-digit-inner {
    display: block;
    animation: slotRoll 1.5s var(--ease-smooth) forwards;
    animation-play-state: paused;
}
.stat-digit-inner.animate { animation-play-state: running; }
@keyframes slotRoll {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.stat-label {
    font-size: 0.6rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(245,240,232,0.4);
}

/* ── SECTION HEADER ── */
.section-header { text-align: center; margin-bottom: 70px; }
.section-tag {
    font-size: 0.6rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center; gap: 20px;
}
.section-tag::before, .section-tag::after {
    content: '';
    width: 40px; height: 1px; background: var(--gold);
}
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}
.section-title em { font-style: italic; color: var(--gold); }
.section-desc {
    font-size: 0.85rem;
    line-height: 1.9;
    color: rgba(245,240,232,0.5);
    max-width: 500px;
    margin: 0 auto;
}

/* ── SECTION LIGHT VARIANT ── */
.section-light {
    background: var(--cream) !important;
    color: var(--cream-text);
}
.section-light .section-title { color: var(--cream-text); }
.section-light .section-title em { color: var(--gold-dark); }
.section-light .section-tag { color: var(--gold-dark); }
.section-light .section-tag::before,
.section-light .section-tag::after { background: var(--gold-dark); }
.section-light .section-desc { color: var(--cream-text-muted); }

/* Light feature cards */
.section-light .feature-card {
    background: rgba(255,255,255,0.6);
    border-color: rgba(200,169,110,0.15);
}
.section-light .feature-card:hover {
    background: rgba(255,255,255,0.9);
    border-color: rgba(200,169,110,0.3);
}
.section-light .feature-card::before { background: var(--gold-dark); }
.section-light .feature-title { color: var(--cream-text); }
.section-light .feature-desc { color: var(--cream-text-muted); }
.section-light .feature-icon { color: var(--gold-dark); }
.section-light .feature-icon svg { stroke: var(--gold-dark); }

/* Light about section */
.section-light .about-text { color: var(--cream-text-muted); }
.section-light .value-item span { color: var(--cream-text); }
.section-light .value-icon { border-color: var(--gold-dark); }
.section-light .value-icon svg { stroke: var(--gold-dark); }
.section-light .about-image-placeholder {
    background: linear-gradient(135deg, #DDD5C8, #C8BFA8);
}
.section-light .about-gold-frame { border-color: var(--gold-dark); }
.section-light .about-stats-card { background: var(--gold-dark); color: #fff; }
.section-light .about-title { color: var(--cream-text); }

/* Light testimonials */
.section-light .testi-card {
    background: rgba(255,255,255,0.7);
    border-color: rgba(200,169,110,0.15);
}
.section-light .testi-card:hover { border-color: rgba(200,169,110,0.35); transform: translateY(-5px); }
.section-light .testi-text { color: var(--cream-text-muted); }
.section-light .testi-stars { color: var(--gold-dark); }
.section-light .testi-name { color: var(--cream-text); }
.section-light .testi-location { color: var(--cream-text-muted); }
.section-light .testi-avatar { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #fff; }
.section-light.testimonials::before { color: rgba(200,169,110,0.08); }

/* ── BOOKING STEPS ── */
.booking-steps {
    padding: 100px 10%;
    position: relative;
}
.steps-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.steps-line {
    position: absolute;
    top: 55px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(200,169,110,0.3), rgba(200,169,110,0.3), transparent);
    z-index: 0;
}
.step-item {
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.step-number {
    font-family: var(--font-heading);
    font-size: 8rem;
    font-weight: 900;
    color: var(--gold);
    opacity: 0.06;
    line-height: 1;
    position: absolute;
    top: -20px;
    right: 10px;
    z-index: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}
.step-item:hover .step-number { opacity: 0.12; transform: scale(1.05); }
.step-icon {
    width: 70px; height: 70px;
    border: 1px solid rgba(200,169,110,0.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    color: var(--gold-dark);
    background: var(--cream);
    transition: all 0.4s ease;
    position: relative;
}
.step-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: border-color 0.4s ease;
}
.step-item:hover .step-icon {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
    transform: scale(1.08);
}
.step-item:hover .step-icon::after { border-color: rgba(200,169,110,0.3); }
.step-item:hover .step-icon svg { stroke: var(--black); }
.step-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--cream-text);
}
.step-desc {
    font-size: 0.78rem;
    line-height: 1.8;
    color: var(--cream-text-muted);
}

/* ── FLEET (Bento Grid + Spotlight) ── */
.fleet { padding: 100px 10%; background: var(--dark); }
.fleet-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 16px;
}
.fleet-card {
    position: relative; overflow: hidden;
    aspect-ratio: 4/5;
    background: #1a1916;
    border: 1px solid rgba(200,169,110,0.18);
    border-radius: 16px;
    transition: transform 0.6s var(--ease-bounce), box-shadow 0.6s ease, border-color 0.4s ease, filter 0.5s ease, opacity 0.5s ease;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
/* Bottom glow pulse (ambient life) */
.fleet-card::before {
    content: '';
    position: absolute;
    bottom: -2px; left: 10%; right: 10%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    z-index: 5;
    opacity: 0.3;
    filter: blur(4px);
    animation: fleetGlowPulse 3s ease-in-out infinite;
}
@keyframes fleetGlowPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}
.fleet-card:hover::before { opacity: 1; filter: blur(0px); animation: none; }
/* Gold shimmer sweep */
.fleet-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(105deg, transparent 40%, rgba(200,169,110,0.08) 45%, rgba(200,169,110,0.15) 50%, rgba(200,169,110,0.08) 55%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
}
.fleet-card:hover::after { transform: translateX(100%); }
.fleet-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 80px var(--gold-glow);
    border-color: rgba(200,169,110,0.35);
}
/* Spotlight mode: when any card is hovered, others dim */
.fleet-grid:hover .fleet-card:not(:hover) {
    filter: brightness(0.5);
    opacity: 0.85;
}
/* Featured card (first = larger) */
.fleet-card-featured { grid-row: span 2; aspect-ratio: auto; }
.fleet-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #1a1916, #22201a);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s ease;
    background-size: cover;
    background-position: center;
    filter: grayscale(0.2) brightness(0.8);
    border-radius: 16px;
}
.fleet-bg-tesla {
    background: linear-gradient(135deg, #1a1a2e 0%, #252540 50%, #1e1e30 100%);
}
.fleet-bg-classev {
    background: linear-gradient(135deg, #1e1e28 0%, #28263a 50%, #1a1a2e 100%);
}
.fleet-bg-classes {
    background: linear-gradient(135deg, #22201a 0%, #2e2a20 50%, #1e1c16 100%);
}
.fleet-card:hover .fleet-bg { transform: scale(1.05); filter: grayscale(0) brightness(0.85); }
.fleet-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(15,13,10,0.97) 0%, rgba(15,13,10,0.8) 30%, rgba(15,13,10,0.3) 55%, transparent 75%);
    border-radius: 16px;
    transition: background 0.5s ease;
}
.fleet-card:hover .fleet-overlay {
    background: linear-gradient(to top, rgba(15,13,10,0.98) 0%, rgba(15,13,10,0.85) 35%, rgba(15,13,10,0.2) 65%, transparent 80%);
}
/* Passengers badge (top-right) */
.fleet-passengers {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 4;
    display: flex; align-items: center; gap: 6px;
    background: rgba(20,18,14,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(200,169,110,0.3);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    transition: background 0.3s, border-color 0.3s;
}
.fleet-passengers svg { width: 14px; height: 14px; stroke: var(--gold); }
.fleet-card:hover .fleet-passengers {
    background: rgba(200,169,110,0.2);
    border-color: var(--gold);
}
/* Price indicator (top-left) */
.fleet-price {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 4;
    background: var(--gold);
    color: var(--black);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fleet-price span {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    margin-left: 4px;
}
.fleet-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 28px;
    z-index: 2;
    transform: translateY(30px);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.fleet-card:hover .fleet-info { transform: translateY(0); }
.fleet-cat {
    font-size: 0.6rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
    font-weight: 500;
}
.fleet-name {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
/* Fleet specs as icons row */
.fleet-specs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.fleet-spec-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.5px;
}
.fleet-spec-item svg {
    width: 16px; height: 16px;
    stroke: var(--gold);
    flex-shrink: 0;
}
.fleet-spec-divider {
    width: 1px;
    height: 14px;
    background: rgba(200,169,110,0.3);
}
.fleet-separator {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    margin-bottom: 14px;
    border-radius: 1px;
    transition: width 0.5s ease;
}
.fleet-card:hover .fleet-separator { width: 80px; }
.fleet-amenities-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    opacity: 0.8;
    transition: opacity 0.4s ease;
}
.fleet-card:hover .fleet-amenities-mini { opacity: 1; }
/* Premium SVG Amenity Icons */
.amenity-icon-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(200,169,110,0.25);
    border-radius: 8px;
    color: var(--gold-light);
    background: rgba(200,169,110,0.08);
    position: relative;
    transition: all 0.3s ease;
}
.amenity-icon-tag:hover {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(200,169,110,0.3);
}
.amenity-icon-tag:hover svg { stroke: var(--black); }
.amenity-icon-tag::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5,5,5,0.95);
    color: var(--gold-light);
    font-size: 0.55rem;
    letter-spacing: 1px;
    padding: 5px 10px;
    white-space: nowrap;
    border: 1px solid rgba(200,169,110,0.3);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
}
.amenity-icon-tag:hover::after {
    opacity: 1;
    visibility: visible;
}
/* Legacy text tag fallback */
.amenity-tag {
    font-size: 0.55rem;
    letter-spacing: 1px;
    padding: 4px 10px;
    border: 1px solid rgba(200,169,110,0.3);
    border-radius: 4px;
    color: var(--gold-light);
    background: rgba(200,169,110,0.05);
}
.fleet-detail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--black);
    background: var(--gold);
    padding: 10px 20px;
    border-radius: 4px;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(10px);
}
.fleet-card:hover .fleet-detail { opacity: 1; transform: translateY(0); }
.fleet-detail:hover {
    background: var(--gold-light);
    box-shadow: 0 4px 16px rgba(200,169,110,0.3);
}
.fleet-detail::after { content: '\2192'; transition: transform 0.3s; }
.fleet-card:hover .fleet-detail::after { transform: translateX(5px); }
/* Toggle modifiers */
.fleet-card.no-shimmer::after { display: none; }
.fleet-card.no-gold-line::before { display: none; }

/* ── FEATURES (Glassmorphism Bento) ── */
.features { padding: 100px 10%; background: var(--dark-pure); position: relative; }
/* Ambient warm glow center */
.features::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(200,169,110,0.04), transparent 70%);
    pointer-events: none;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    position: relative;
    z-index: 1;
}
/* First card spans 2 columns for bento feel */
.features-grid .feature-card:first-child {
    grid-column: span 2;
}
.feature-card {
    padding: 50px 35px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(200,169,110,0.02));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    transition: all 0.4s var(--ease-smooth);
    position: relative;
    overflow: hidden;
}
/* Watermark number */
.feature-card::after {
    content: attr(data-number);
    position: absolute;
    top: 10px; right: 16px;
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 900;
    color: var(--gold);
    opacity: 0.04;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.feature-card:hover::after { opacity: 0.08; }
.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-smooth);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(200,169,110,0.04));
    border-color: rgba(200,169,110,0.25);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px var(--gold-glow);
}
.feature-icon {
    display: block;
    margin-bottom: 24px;
    color: var(--gold);
    opacity: 0.7;
    transition: opacity 0.4s ease, transform 0.4s ease;
    position: relative;
}
/* Glow behind icon */
.feature-icon::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 60px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--gold-glow), transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.feature-card:hover .feature-icon::before { opacity: 1; }
.feature-icon svg { stroke: var(--gold); position: relative; z-index: 1; }
.feature-card:hover .feature-icon { opacity: 1; transform: scale(1.1); }
.feature-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 14px;
}
.feature-desc {
    font-size: 0.78rem;
    line-height: 1.9;
    color: rgba(245,240,232,0.45);
}

/* ── ABOUT SECTION ── */
.about-section {
    padding: 100px 10%;
    background: var(--dark);
}
.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.about-title { text-align: left; }
.about-text {
    font-size: 0.85rem;
    line-height: 1.9;
    color: rgba(245,240,232,0.6);
    margin-bottom: 20px;
}
.about-values {
    display: flex;
    gap: 30px;
    margin-top: 36px;
}
.value-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
}
.value-icon {
    width: 36px; height: 36px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.value-icon svg { stroke: var(--gold); width: 16px; height: 16px; }

.about-visual { position: relative; order: -1; }
.about-image-wrapper { position: relative; }
.about-content.reveal-left {
    margin-left: -80px;
    position: relative;
    z-index: 10;
    background: var(--dark);
    padding: 60px;
    border-top: 3px solid var(--gold);
    box-shadow: 0 50px 100px rgba(0,0,0,0.3);
}
.about-image-placeholder {
    aspect-ratio: 3/4;
    background: linear-gradient(135deg, var(--dark2), var(--dark3));
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 30px;
    overflow: hidden;
}
/* Ken Burns slow zoom effect */
.about-image-placeholder img,
.about-image-placeholder::after {
    animation: kenBurns 20s ease-in-out infinite alternate;
}
@keyframes kenBurns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.08) translate(-1%, -1%); }
}
.about-gold-frame {
    position: absolute;
    top: -15px; right: -15px;
    width: 100%; height: 100%;
    border: 1px solid var(--gold);
    opacity: 0.3;
    z-index: -1;
    /* Draw-on animation */
    clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0);
    animation: frameDrawOn 2s var(--ease-smooth) forwards;
    animation-play-state: paused;
}
.about-visual.visible .about-gold-frame {
    animation-play-state: running;
}
@keyframes frameDrawOn {
    0% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
    25% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
    50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); }
    75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.about-stats-card {
    background: var(--gold);
    color: var(--black);
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.about-stat-big {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
}
.about-stat-text {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ── TESTIMONIALS ── */
.testimonials {
    padding: 100px 10%;
    background: var(--dark2);
    position: relative; overflow: hidden;
}
.testimonials::before {
    content: '\201C';
    position: absolute; top: -20px; left: 8%;
    font-family: var(--font-heading);
    font-size: 400px;
    font-weight: 900;
    color: rgba(200,169,110,0.04);
    line-height: 1;
    pointer-events: none;
}
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi-card {
    padding: 40px;
    background: var(--dark3);
    border: 1px solid rgba(200,169,110,0.08);
    border-radius: 16px;
    transition: all 0.5s var(--ease-smooth);
}
.testi-card:hover {
    border-color: rgba(200,169,110,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 30px var(--gold-glow);
}
/* 3D depth stack on carousel cards */
.testi-track .testi-card {
    transition: all 0.8s var(--ease-snap);
}
.testi-track .testi-card.testi-side-left {
    transform: perspective(1000px) rotateY(3deg) scale(0.92);
    opacity: 0.5;
}
.testi-track .testi-card.testi-side-right {
    transform: perspective(1000px) rotateY(-3deg) scale(0.92);
    opacity: 0.5;
}
.testi-track .testi-card.testi-center {
    transform: perspective(1000px) rotateY(0) scale(1);
    opacity: 1;
    z-index: 2;
}
.testi-stars { color: var(--gold); font-size: 0.75rem; letter-spacing: 3px; margin-bottom: 20px; }
.testi-text {
    font-family: var(--font-accent);
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.8;
    color: rgba(245,240,232,0.8);
    margin-bottom: 28px;
}
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.9rem; color: var(--black);
}
.testi-name { font-size: 0.8rem; font-weight: 500; margin-bottom: 3px; }
.testi-location { font-size: 0.65rem; color: rgba(245,240,232,0.4); letter-spacing: 1px; }

/* ── CTA SECTION (Immersive) ── */
.cta-section {
    padding: 120px 10%;
    background: var(--dark-pure);
    text-align: center;
    position: relative; overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(200,169,110,0.07) 0%, transparent 70%);
}
/* Floating bokeh dots CSS-only */
.cta-section::after {
    content: '';
    position: absolute;
    top: 20%; left: 10%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.15;
    box-shadow:
        200px -60px 0 3px rgba(200,169,110,0.08),
        400px 40px 0 2px rgba(200,169,110,0.12),
        600px -80px 0 4px rgba(200,169,110,0.06),
        150px 100px 0 2px rgba(200,169,110,0.1),
        500px 120px 0 3px rgba(200,169,110,0.07),
        350px -30px 0 5px rgba(200,169,110,0.05),
        700px 60px 0 2px rgba(200,169,110,0.09);
    animation: bokehFloat 12s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes bokehFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-20px, 15px); }
}
.cta-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 24px;
    position: relative;
}
.cta-title em { font-style: italic; color: var(--gold); }
.cta-subtitle {
    font-size: 0.85rem;
    color: rgba(245,240,232,0.5);
    margin-bottom: 50px;
    letter-spacing: 1px;
    position: relative;
}
.cta-btns { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; position: relative; }
.phone-link {
    display: inline-flex; align-items: center; gap: 12px;
    border: 1px solid rgba(200,169,110,0.3);
    padding: 16px 32px;
    color: var(--white);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}
.phone-link svg {
    flex-shrink: 0;
    animation: phoneRing 5s ease-in-out infinite;
}
@keyframes phoneRing {
    0%, 90%, 100% { transform: rotate(0); }
    92% { transform: rotate(10deg); }
    94% { transform: rotate(-8deg); }
    96% { transform: rotate(6deg); }
    98% { transform: rotate(-4deg); }
}
.phone-link:hover { border-color: var(--gold); color: var(--gold); }
.phone-link:hover svg { animation: none; }

/* ── FOOTER ── */
.site-footer {
    padding: 70px 10% 40px;
    background: var(--black);
    border-top: 1px solid rgba(200,169,110,0.1);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}
.footer-brand .logo, .footer-brand .footer-logo { font-size: 1.3rem; display: block; margin-bottom: 16px; }
.footer-slogan {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--gold);
    margin-bottom: 12px;
}
.footer-desc {
    font-size: 0.78rem;
    line-height: 1.9;
    color: rgba(245,240,232,0.4);
    max-width: 280px;
    margin-bottom: 20px;
}
.footer-social {
    display: flex;
    gap: 12px;
}
.social-link {
    font-size: 0.65rem;
    letter-spacing: 1px;
    padding: 6px 14px;
    border: 1px solid rgba(200,169,110,0.2);
    color: rgba(245,240,232,0.5);
    transition: all 0.3s;
}
.social-link:hover { border-color: var(--gold); color: var(--gold); }
.footer-col h4 {
    font-size: 0.6rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 24px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul a {
    text-decoration: none;
    font-size: 0.78rem;
    color: rgba(245,240,232,0.4);
    transition: color 0.3s;
}
.footer-col ul a:hover { color: var(--gold); }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(245,240,232,0.05);
    font-size: 0.65rem;
    color: rgba(245,240,232,0.25);
    letter-spacing: 1px;
}
.footer-badge {
    font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold); opacity: 0.6;
}

/* ── WHATSAPP FLOATING BUTTON ── */
.whatsapp-float {
    position: fixed;
    bottom: 30px; right: 30px;
    width: 56px; height: 56px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(37,211,102,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: whatsappBounce 2s ease-in-out infinite;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37,211,102,0.5);
}
@keyframes whatsappBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.whatsapp-float:hover { animation: none; transform: scale(1.1); }

/* ── SCROLL REVEAL ANIMATIONS ── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* ── PAGE HERO (Luxury Inner Page Header) ── */
.page-hero,
.page-header-section {
    min-height: 340px;
    padding: 160px 10% 80px;
    background-color: var(--dark);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5,5,5,0.75) 0%, rgba(5,5,5,0.88) 100%);
    z-index: 1;
}
.page-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,169,110,0.3), transparent);
    z-index: 2;
}
.page-header-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,169,110,0.3), transparent);
}
.page-hero > * { position: relative; z-index: 2; }
.page-hero-tag {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.page-hero-tag::before,
.page-hero-tag::after {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--gold);
    opacity: 0.5;
}
.page-hero h1,
.page-hero-title,
.page-header-section h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--white);
}
.page-hero h1 em,
.page-hero-title em,
.page-header-section h1 em { font-style: italic; color: var(--gold); }
.page-hero-desc {
    font-size: 0.85rem;
    color: rgba(245,240,232,0.55);
    max-width: 500px;
    line-height: 1.8;
    margin: 0 auto 20px;
}
.page-hero .breadcrumbs { margin-top: 24px; position: relative; }
.page-hero .breadcrumbs::before {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--gold);
    opacity: 0.4;
    margin: 0 auto 16px;
}
.breadcrumbs {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(245,240,232,0.4);
}
.breadcrumbs a { color: var(--gold); transition: opacity 0.3s; }
.breadcrumbs a:hover { opacity: 0.7; }
.breadcrumbs .separator { margin: 0 8px; }
.breadcrumbs .current { color: rgba(245,240,232,0.6); }

/* Gold diagonal accent line */
.page-hero-accent {
    position: absolute;
    top: -60px;
    right: 8%;
    width: 1px;
    height: 200px;
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    opacity: 0.15;
    transform: rotate(25deg);
    z-index: 1;
}

.page-content {
    padding: 80px 10%;
    max-width: 900px;
    margin: 0 auto;
}
.page-content p {
    font-size: 0.9rem;
    line-height: 2;
    color: rgba(245,240,232,0.7);
    margin-bottom: 20px;
}

/* ── IMMERSIVE 404 PAGE ── */
.error-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 10%;
    position: relative;
    overflow: hidden;
    background: var(--dark);
}
.error-404-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    filter: grayscale(0.6);
}
.error-404-number {
    font-family: var(--font-heading);
    font-size: clamp(8rem, 20vw, 18rem);
    font-weight: 900;
    color: var(--gold);
    opacity: 0.06;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    animation: float404 6s ease-in-out infinite;
}
@keyframes float404 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-15px); }
}
.error-404-content {
    position: relative;
    z-index: 2;
    max-width: 550px;
}
.error-404-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 16px;
}
.error-404-content h1 em { font-style: italic; color: var(--gold); }
.error-404-content p {
    color: rgba(245,240,232,0.5);
    font-size: 0.88rem;
    line-height: 1.8;
    margin-bottom: 36px;
}
.error-404-search {
    display: flex;
    gap: 0;
    max-width: 400px;
    margin: 0 auto 40px;
    border: 1px solid rgba(200,169,110,0.2);
    border-radius: 0;
    overflow: hidden;
}
.error-404-search input {
    flex: 1;
    padding: 14px 20px;
    background: rgba(20,20,20,0.8);
    border: none;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.8rem;
    outline: none;
}
.error-404-search input::placeholder { color: rgba(245,240,232,0.3); }
.error-404-search button {
    padding: 14px 24px;
    background: var(--gold);
    border: none;
    color: var(--black);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.3s;
}
.error-404-search button:hover { background: var(--gold-light); }
.error-404-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.error-404-links a {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(245,240,232,0.5);
    padding: 10px 20px;
    border: 1px solid rgba(200,169,110,0.12);
    transition: all 0.3s;
}
.error-404-links a:hover {
    color: var(--gold);
    border-color: rgba(200,169,110,0.4);
    transform: translateY(-2px);
}
.error-404-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    animation: goldFloat404 var(--dur, 5s) var(--delay, 0s) infinite;
}
@keyframes goldFloat404 {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.6; }
    80% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-150px) translateX(var(--dx, 30px)) scale(1); }
}

/* Blog */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    padding: 80px 10%;
}
.blog-card {
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.08);
    transition: border-color 0.3s, transform 0.3s;
}
.blog-card:hover { border-color: rgba(200,169,110,0.2); transform: translateY(-4px); }
.blog-card-image {
    aspect-ratio: 16/10;
    background: var(--dark3);
    overflow: hidden;
}
.blog-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.blog-card:hover .blog-card-image img { transform: scale(1.05); }
.blog-card-content { padding: 28px; }
.blog-card-meta {
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}
.blog-card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.4;
}
.blog-card-title a { color: var(--white); transition: color 0.3s; }
.blog-card-title a:hover { color: var(--gold); }
.blog-card-excerpt {
    font-size: 0.8rem;
    line-height: 1.8;
    color: rgba(245,240,232,0.5);
}

/* ── TEXT REVEAL ANIMATION ── */
.char-reveal {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: charReveal 0.5s ease forwards;
}
@keyframes charReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* ── STEP PULSE ANIMATION ── */
@keyframes stepPulse {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── CARD TILT 3D ── */
.fleet-card {
    will-change: transform;
}

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 10001;
    background: transparent;
}
.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(200,169,110,0.5), 0 0 3px rgba(200,169,110,0.8);
    animation: progressGlow 2s ease-in-out infinite;
}
@keyframes progressGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(200,169,110,0.5), 0 0 3px rgba(200,169,110,0.8); }
    50% { box-shadow: 0 0 16px rgba(200,169,110,0.7), 0 0 5px rgba(200,169,110,1); }
}

/* ── PARTNER MARQUEE (Double Band + Glass) ── */
.partners-marquee {
    padding: 0;
    border: none;
    overflow: hidden;
    background: linear-gradient(90deg, var(--dark), rgba(200,169,110,0.08), var(--dark));
    position: relative;
}
/* Fade masks on edges */
.partners-marquee::before,
.partners-marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.partners-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--dark), transparent);
}
.partners-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--dark), transparent);
}
.marquee-track {
    display: flex;
    width: fit-content;
    animation: marqueeScroll 35s linear infinite;
    padding: 18px 0;
}
/* Second reverse track */
.marquee-track-reverse {
    display: flex;
    width: fit-content;
    animation: marqueeScrollReverse 40s linear infinite;
    padding: 18px 0;
    border-top: 1px solid rgba(200,169,110,0.08);
}
@keyframes marqueeScrollReverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.partners-marquee:hover .marquee-track,
.partners-marquee:hover .marquee-track-reverse {
    animation-play-state: paused;
}
.marquee-content {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-shrink: 0;
    padding-right: 40px;
}
.partner-logo {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.4s ease;
    opacity: 0.6;
}
.partner-logo:hover {
    color: var(--gold-light);
    opacity: 1;
}
.partner-divider {
    color: rgba(200,169,110,0.2);
    font-size: 0.6rem;
}
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── SECTION DIVIDERS ── */
.section-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -1px;
    margin-bottom: -1px;
}
.section-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}
/* Gold edge glow on dividers */
.section-divider::after {
    content: '';
    position: absolute;
    left: 10%; right: 10%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glow-gold), transparent);
    pointer-events: none;
    opacity: 0.5;
}

/* ── AMBIENT GLOW ZONES ── */
/* Alternating warm glow centers between sections */
.fleet::before,
.services-showcase::before,
.cta-section .cta-glow,
.faq-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background: radial-gradient(ellipse, rgba(200,169,110,0.04), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.fleet { position: relative; }
.faq-section { position: relative; }

/* Floating bokeh dots CSS-only (fleet & services) */
.fleet::after {
    content: '';
    position: absolute;
    top: 15%; left: 5%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.1;
    box-shadow:
        100px 80px 0 2px rgba(200,169,110,0.06),
        300px -40px 0 3px rgba(200,169,110,0.08),
        500px 60px 0 2px rgba(200,169,110,0.05),
        700px -20px 0 4px rgba(200,169,110,0.04);
    animation: bokehFloat 15s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* ── FLEET CAROUSEL ── */
.fleet-carousel {
    overflow: hidden;
    margin: 0 -2%;
    padding: 0 2%;
}
.fleet-track {
    display: flex;
    gap: 24px;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.18, 1);
    cursor: grab;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fleet-track::-webkit-scrollbar { display: none; }
.fleet-track:active { cursor: grabbing; }
.fleet-track.dragging { scroll-snap-type: none; transition: none; }
.fleet-track .fleet-card {
    min-width: min(420px, 85vw);
    aspect-ratio: 3/4;
    flex-shrink: 0;
    scroll-snap-align: center;
}
.fleet-controls, .testi-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

/* ── SERVICES SHOWCASE (Scroll-Driven Horizontal) ── */
.services-showcase {
    padding: 100px 10%;
    background: var(--dark);
    position: relative;
    overflow: hidden;
}
/* Scroll-driven sticky wrapper */
.services-scroll-drive {
    height: 300vh;
    position: relative;
}
.services-scroll-drive .services-showcase {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 10%;
}
.horizontal-scroll-container {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.horizontal-scroll-container::-webkit-scrollbar {
    display: none;
}
.services-track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding-bottom: 20px;
    transition: transform 0.1s ease-out;
}
/* Progress dots indicator */
.services-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}
.services-progress-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(200,169,110,0.2);
    transition: all 0.3s ease;
}
.services-progress-dot.active {
    background: var(--gold);
    width: 24px;
    border-radius: 4px;
}
.service-card {
    flex-shrink: 0;
    width: 320px;
    background: var(--dark2);
    padding: 50px 35px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(200,169,110,0.08);
    transition: all 0.5s var(--ease-smooth);
}
/* Focus state for center card (via JS) */
.service-card.is-focused {
    transform: scale(1.05);
    border-color: var(--glass-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 60px var(--gold-glow);
    background: var(--dark3);
}
.service-card:not(.is-focused) {
    opacity: 0.6;
    transform: scale(0.95);
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-smooth);
}
.service-card:hover::before,
.service-card.is-focused::before {
    transform: scaleX(1);
}
/* Gold gradient reveal on hover */
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(200,169,110,0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: 16px;
}
.service-card:hover::after,
.service-card.is-focused::after { opacity: 1; }
.service-number {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(200,169,110,0.06);
    position: absolute;
    top: 20px;
    right: 25px;
    line-height: 1;
    transition: all 0.5s var(--ease-smooth);
}
.service-card.is-focused .service-number {
    color: rgba(200,169,110,0.12);
    transform: scale(1.2);
}
.service-icon {
    margin-bottom: 24px;
    color: var(--gold);
    transition: transform 0.4s ease;
}
.service-card:hover .service-icon,
.service-card.is-focused .service-icon {
    transform: scale(1.15);
}
.service-card-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--white);
}
.service-card-desc {
    font-size: 0.8rem;
    color: rgba(245,240,232,0.5);
    line-height: 1.7;
    margin-bottom: 24px;
}
.service-link {
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    transition: letter-spacing 0.3s ease;
}
.service-card:hover .service-link {
    letter-spacing: 4px;
}

/* ── PRICING ── */
.pricing {
    padding: 100px 10%;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.pricing-card {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(200,169,110,0.12);
    padding: 50px 36px;
    text-align: center;
    transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.4s ease, backdrop-filter 0.5s ease, clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    clip-path: inset(0 0 0 0 round 0);
}
.pricing-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.12);
    border-color: rgba(200,169,110,0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    clip-path: inset(0 0 0 0 round 16px);
}
.pricing-card-body {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}
.pricing-card:hover .pricing-card-body {
    transform: translateY(-8px);
}
.pricing-card-featured {
    background: rgba(255,255,255,0.7);
    border: 2px solid transparent;
    padding: 60px 36px;
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 16px 48px rgba(0,0,0,0.06);
    border-radius: 16px;
    position: relative;
    overflow: visible;
}
/* Animated rotating border on featured card */
.pricing-card-featured::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: conic-gradient(from var(--pricing-angle, 0deg), var(--gold) 0%, transparent 15%, transparent 45%, var(--gold-light) 50%, transparent 65%, transparent 90%, var(--gold) 100%);
    z-index: -1;
    animation: pricingBorderSpin 6s linear infinite;
}
.pricing-card-featured::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    border-radius: 16px;
    z-index: -1;
}
@keyframes pricingBorderSpin {
    to { --pricing-angle: 360deg; }
}
@property --pricing-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.pricing-card-featured:hover {
    transform: scale(1.05) translateY(-8px);
}
/* Hover expand/compress effect on grid */
.pricing-grid:hover .pricing-card:not(:hover):not(.pricing-card-featured) {
    transform: scale(0.97);
}
.pricing-badge {
    position: absolute;
    top: -1px;
    right: 30px;
    background: var(--gold);
    color: var(--black);
    font-size: 0.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 6px 14px;
    z-index: 1;
    /* Shimmer animation */
    background-image: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}
.pricing-tier {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cream-text);
    margin-bottom: 4px;
}
.pricing-vehicle {
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 28px;
}
.pricing-price-list {
    margin-bottom: 28px;
    text-align: left;
}
.pricing-route {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(200,169,110,0.08);
}
.route-name {
    font-size: 0.75rem;
    color: var(--cream-text-muted);
}
.route-price {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cream-text);
}
.pricing-features {
    text-align: left;
    margin-bottom: 28px;
}
.pricing-features li {
    font-size: 0.78rem;
    color: var(--cream-text-muted);
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
}
.pricing-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--gold-dark);
    font-weight: 600;
}
.pricing-card .btn-gold, .pricing-card .btn-outline {
    width: 100%;
    text-align: center;
    display: block;
}

/* ── ZONES DESSERVIES ── */
.zones-section {
    padding: 100px 10%;
    background: var(--dark);
    position: relative;
    overflow: hidden;
}
.zones-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(200,169,110,0.06) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.zones-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.zones-map-container {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
}
.zones-map-svg {
    width: 100%;
    height: auto;
}
.map-outline {
    opacity: 0.8;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2.5s ease-out;
}
.map-outline.drawn {
    stroke-dashoffset: 0;
}
.zone-point {
    cursor: pointer;
    transition: filter 0.3s ease;
}
.zone-point:hover {
    filter: drop-shadow(0 0 10px rgba(200,169,110,0.7));
}
.zone-point:hover circle:nth-child(2) {
    transition: r 0.3s ease;
}
.zone-point text {
    pointer-events: none;
    transition: fill 0.3s ease;
}
.zone-point:hover text {
    fill: var(--gold) !important;
}

/* Zone tooltip */
.zone-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(5,5,5,0.94);
    border: 1px solid rgba(200,169,110,0.3);
    border-radius: 10px;
    padding: 14px 18px;
    min-width: 180px;
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 10;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.zone-tooltip.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.zone-tooltip-city {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--gold);
    margin-bottom: 6px;
    font-weight: 600;
}
.zone-tooltip-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.3), transparent);
    margin: 8px 0;
}
.zone-tooltip-info {
    font-size: 0.75rem;
    color: rgba(245,240,232,0.7);
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.zone-tooltip-info span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Map connection lines animation */
.map-line {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.map-line.drawn {
    stroke-dashoffset: 0;
}

/* Pulse waves on hover */
@keyframes pulseWave {
    0% { r: 6; opacity: 0.6; }
    100% { r: 40; opacity: 0; }
}

/* Gold particles on map */
.zones-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.zones-particle {
    position: absolute;
    width: 3px; height: 3px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    animation: floatParticle var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes floatParticle {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.6; }
    80% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-120px) scale(1.2); }
}

/* Shimmer on section tag */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.zones-section .section-tag {
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold), var(--gold-dark));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
    border-color: transparent;
}

/* Stats grid redesign */
.zones-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(200,169,110,0.1);
}
.zones-stat-card {
    text-align: center;
    padding: 28px 16px;
    background: rgba(200,169,110,0.04);
    border: 1px solid rgba(200,169,110,0.08);
    border-radius: 14px;
    transition: border-color 0.4s, background 0.4s, transform 0.4s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    will-change: transform;
}
.zones-stat-card:hover {
    border-color: rgba(200,169,110,0.25);
    background: rgba(200,169,110,0.08);
    transform: translateY(-4px);
}
.zones-stat-icon {
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
}
.zones-stat-icon svg {
    width: 32px; height: 32px;
    color: var(--gold);
    stroke: var(--gold);
    fill: none;
}
.zones-stat-card .stat-number,
.zones-stat-value {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--gold);
    font-weight: 700;
    line-height: 1.2;
}
.zones-stat-card .stat-label {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* CTA in zones */
.zones-cta {
    text-align: center;
    margin-top: 36px;
}

/* Cinematic entrance */
.zones-section .section-header {
    overflow: hidden;
}
.cinematic-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cinematic-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.cinematic-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1s ease 0.4s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.cinematic-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease 0.6s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
.cinematic-left.visible,
.cinematic-right.visible,
.cinematic-scale.visible,
.cinematic-up.visible {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
}

/* Typewriter cursor */
.typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--gold);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: typewriterBlink 0.8s step-end infinite;
}
@keyframes typewriterBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Mobile city list */
.zones-mobile-list {
    display: none;
}
.zones-mobile-heading {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--gold);
    margin-bottom: 14px;
    font-weight: 600;
}
.zones-mobile-list ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.zones-mobile-list li {
    font-size: 0.85rem;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(200,169,110,0.06);
    transition: color 0.3s;
}
.zones-mobile-list li:hover {
    color: var(--gold);
}
.zones-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(200,169,110,0.4);
}
.zones-dot--border {
    background: var(--gold-dark);
    box-shadow: 0 0 6px rgba(154,122,69,0.4);
}
.zones-meta {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(245,240,232,0.4);
    letter-spacing: 0.5px;
}

/* Canvas overlay for particles */
.zones-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ── TESTIMONIALS CAROUSEL ── */
.testi-carousel {
    overflow: hidden;
    margin: 0 -4%;
    padding: 0 4%;
}
.testi-track {
    display: flex;
    gap: 24px;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.18, 1);
}
.testi-track .testi-card {
    min-width: min(380px, 85vw);
    flex-shrink: 0;
}
.testi-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 1rem;
}
.testi-current {
    color: var(--gold-dark);
    font-weight: 700;
}
.testi-separator {
    color: rgba(200,169,110,0.3);
    font-size: 0.8rem;
}
.testi-total {
    color: var(--cream-text-muted);
}

/* ── FAQ SECTION (Enhanced) ── */
.faq-section {
    padding: 100px 10%;
    background: var(--dark);
}
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid rgba(200,169,110,0.08);
    position: relative;
    transition: background 0.4s ease;
}
/* Gold left border on active */
.faq-item::before {
    content: '';
    position: absolute;
    left: -20px; top: 0; bottom: 0;
    width: 2px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s var(--ease-smooth);
}
.faq-item.active::before {
    transform: scaleY(1);
}
.faq-item.active {
    background: linear-gradient(90deg, rgba(200,169,110,0.03), transparent);
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 28px 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--white);
    text-align: left;
    transition: color 0.3s ease;
}
.faq-question:hover {
    color: var(--gold);
}
.faq-toggle {
    font-size: 1.5rem;
    color: var(--gold);
    transition: transform 0.4s var(--ease-smooth);
    flex-shrink: 0;
    margin-left: 20px;
}
.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease-smooth);
}
.faq-answer p {
    font-size: 0.82rem;
    line-height: 1.9;
    color: rgba(245,240,232,0.5);
    padding-bottom: 28px;
}
.faq-typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--gold);
    margin-left: 2px;
    animation: blink 0.8s infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ── CONTACT IMMERSIVE (Bento Glassmorphism) ── */
.contact-immersive {
    position: relative;
    padding: 120px 10%;
    text-align: center;
    overflow: hidden;
    background: var(--dark-pure);
}
.contact-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(200,169,110,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.contact-inner {
    position: relative;
    z-index: 1;
}
.contact-immersive .section-tag {
    justify-content: center;
}
.contact-immersive .section-title {
    margin-bottom: 60px;
}
/* Bento layout: phone/WhatsApp larger, email/availability smaller */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}
.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 30px;
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(200,169,110,0.02));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    transition: all 0.4s var(--ease-smooth);
}
.contact-item:hover {
    border-color: rgba(200,169,110,0.3);
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(200,169,110,0.04));
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px var(--gold-glow);
}
.contact-item-icon {
    width: 64px;
    height: 64px;
    border: 1px solid rgba(200,169,110,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    transition: background 0.4s ease, transform 0.4s ease;
    /* Float animation with unique delays */
    animation: contactIconFloat 4s ease-in-out infinite;
}
.contact-item:nth-child(1) .contact-item-icon { animation-delay: 0s; }
.contact-item:nth-child(2) .contact-item-icon { animation-delay: -1s; }
.contact-item:nth-child(3) .contact-item-icon { animation-delay: -2s; }
.contact-item:nth-child(4) .contact-item-icon { animation-delay: -3s; }
@keyframes contactIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.contact-item:hover .contact-item-icon {
    background: rgba(200,169,110,0.1);
    animation-play-state: paused;
    transform: scale(1.1);
}
.contact-item-label {
    font-size: 0.55rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
}
.contact-item-value {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--white);
    transition: color 0.3s ease;
}
a.contact-item-value:hover {
    color: var(--gold);
}
/* Live pulse on availability item */
.contact-item-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.contact-item-live::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74,222,128,0.5);
    animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

/* ── BACK TO TOP ── */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 100px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(200,169,110,0.3);
    background: rgba(5,5,5,0.85);
    backdrop-filter: blur(10px);
    color: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999;
    pointer-events: none;
}
.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(200,169,110,0.25);
}
.back-to-top svg { width: 18px; height: 18px; }

/* ── SERVICE ARCHIVE CARD ── */
.service-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 80px 10%;
}
.service-archive-card {
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.08);
    padding: 48px 30px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.service-archive-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.service-archive-card:hover::before { transform: scaleX(1); }
.service-archive-card:hover {
    border-color: rgba(200,169,110,0.25);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 30px rgba(200,169,110,0.06);
}
.service-archive-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(200,169,110,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    transition: border-color 0.3s, transform 0.3s;
}
.service-archive-icon svg { width: 28px; height: 28px; stroke: var(--gold); fill: none; }
.service-archive-card:hover .service-archive-icon {
    border-color: var(--gold);
    transform: scale(1.08);
}
.service-archive-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--white);
}
.service-archive-card p {
    font-size: 0.8rem;
    line-height: 1.8;
    color: rgba(245,240,232,0.5);
    margin-bottom: 20px;
}
.service-archive-link {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    transition: letter-spacing 0.3s;
}
.service-archive-link:hover { letter-spacing: 3px; }

/* ── VEHICLE DETAIL PAGE ── */
.vehicle-detail {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    padding: 80px 10%;
    align-items: start;
}
.vehicle-gallery {}
.vehicle-gallery-main {
    aspect-ratio: 16/10;
    overflow: hidden;
    border: 1px solid rgba(200,169,110,0.08);
    position: relative;
    cursor: zoom-in;
}
.vehicle-gallery-main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.vehicle-gallery-main:hover img { transform: scale(1.03); }
.vehicle-gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.vehicle-gallery-thumb {
    width: 80px;
    height: 60px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    border: 1px solid transparent;
    transition: all 0.3s;
}
.vehicle-gallery-thumb.active,
.vehicle-gallery-thumb:hover {
    opacity: 1;
    border-color: var(--gold);
}
.vehicle-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-info-panel {}
.vehicle-type-tag {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}
.vehicle-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 20px;
}
.vehicle-desc {
    font-size: 0.85rem;
    line-height: 1.9;
    color: rgba(245,240,232,0.6);
    margin-bottom: 30px;
}
.vehicle-specs-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(200,169,110,0.06);
    margin-bottom: 30px;
}
.vehicle-spec-row {
    background: var(--dark2);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vehicle-spec-label {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
}
.vehicle-spec-value {
    font-size: 0.9rem;
    color: var(--white);
}
.vehicle-amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}
.vehicle-amenity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.06);
    text-align: center;
    transition: border-color 0.3s;
}
.vehicle-amenity-item:hover { border-color: rgba(200,169,110,0.2); }
.vehicle-amenity-item svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; }
.vehicle-amenity-item span {
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(245,240,232,0.5);
}
.vehicle-cta-box {
    background: var(--dark3);
    padding: 36px;
    border-top: 2px solid var(--gold);
    text-align: center;
    margin-top: 10px;
}
.vehicle-cta-price {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(245,240,232,0.5);
    margin-bottom: 8px;
}
.vehicle-cta-price span {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    margin-top: 4px;
}

/* ── SERVICE DETAIL PAGE ── */
.service-detail {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 10%;
}
.service-detail-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
}
.service-detail-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    border: 1px solid rgba(200,169,110,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-detail-icon svg { width: 28px; height: 28px; stroke: var(--gold); fill: none; }
.service-detail-meta {}
.service-detail-cat {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}
.service-detail-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
}
.service-detail-image {
    margin-bottom: 40px;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.service-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.service-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 40px 0;
}
.service-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.06);
}
.service-feature-item svg { width: 20px; height: 20px; min-width: 20px; stroke: var(--gold); fill: none; margin-top: 2px; }
.service-feature-item span {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(245,240,232,0.7);
}
.service-cta-box {
    background: var(--dark3);
    padding: 40px;
    text-align: center;
    margin-top: 50px;
    border: 1px solid rgba(200,169,110,0.08);
}
.service-cta-box h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.service-cta-box p {
    color: rgba(245,240,232,0.5);
    font-size: 0.85rem;
    margin-bottom: 24px;
}
.service-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.service-related {
    padding: 60px 0 0;
}
.service-related h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}

/* ── BLOG LAYOUT (Sidebar) ── */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    padding: 80px 10%;
    align-items: start;
}
.blog-main {}
.blog-sidebar {
    position: sticky;
    top: 120px;
}
.blog-sidebar-widget {
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.06);
    padding: 28px;
    margin-bottom: 20px;
}
.blog-sidebar-widget:last-child { margin-bottom: 0; }
.blog-sidebar-title {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(200,169,110,0.1);
}
.blog-sidebar-widget ul { list-style: none; padding: 0; margin: 0; }
.blog-sidebar-widget li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(200,169,110,0.05);
}
.blog-sidebar-widget li:last-child { border-bottom: none; }
.blog-sidebar-widget a {
    font-size: 0.8rem;
    color: rgba(245,240,232,0.6);
    transition: color 0.3s;
}
.blog-sidebar-widget a:hover { color: var(--gold); }
.blog-featured-post {
    margin-bottom: 30px;
}
.blog-featured-post .blog-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.blog-featured-post .blog-card-image { aspect-ratio: auto; min-height: 280px; }
.blog-featured-post .blog-card-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-featured-post .blog-card-title { font-size: 1.4rem; }
.blog-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.blog-filter-tab {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 18px;
    border: 1px solid rgba(200,169,110,0.12);
    background: transparent;
    color: rgba(245,240,232,0.5);
    cursor: pointer;
    transition: all 0.3s;
}
.blog-filter-tab:hover,
.blog-filter-tab.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(200,169,110,0.06);
}
.blog-reading-time {
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: rgba(245,240,232,0.35);
    margin-left: 12px;
}

/* ── SINGLE POST ENHANCEMENTS ── */
.post-meta-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    font-size: 0.7rem;
    color: rgba(245,240,232,0.45);
}
.post-meta-bar span { display: flex; align-items: center; gap: 6px; }
.post-meta-bar svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; }
.post-share {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 40px 0;
    padding: 24px 0;
    border-top: 1px solid rgba(200,169,110,0.08);
    border-bottom: 1px solid rgba(200,169,110,0.08);
}
.post-share-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(245,240,232,0.4);
}
.post-share a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200,169,110,0.12);
    color: rgba(245,240,232,0.5);
    transition: all 0.3s;
}
.post-share a:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-2px);
}
.post-share a svg { width: 14px; height: 14px; }
.related-posts {
    padding: 60px 0 0;
}
.related-posts h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 40px 0;
}
.post-nav-item {
    padding: 24px;
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.06);
    transition: border-color 0.3s;
}
.post-nav-item:hover { border-color: rgba(200,169,110,0.2); }
.post-nav-label {
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}
.post-nav-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.4;
}

/* ── CONTACT PAGE ── */
.contact-page-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    padding: 80px 10%;
    align-items: start;
}
.contact-form {
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.08);
    padding: 40px;
}
.contact-form-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 24px;
}
.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.contact-form-field label {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(245,240,232,0.5);
}
.contact-form-field input,
.contact-form-field textarea,
.contact-form-field select {
    padding: 14px 16px;
    background: rgba(5,5,5,0.5);
    border: 1px solid rgba(200,169,110,0.1);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.3s;
}
.contact-form-field input:focus,
.contact-form-field textarea:focus,
.contact-form-field select:focus {
    border-color: var(--gold);
}
.contact-form-field textarea { min-height: 160px; resize: vertical; }
.contact-form-submit {
    width: 100%;
    padding: 16px;
    margin-top: 8px;
}
.contact-info-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contact-info-card {
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.06);
    padding: 28px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: border-color 0.3s;
}
.contact-info-card:hover { border-color: rgba(200,169,110,0.2); }
.contact-info-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: 1px solid rgba(200,169,110,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-info-card-icon svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; }
.contact-info-card-label {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}
.contact-info-card-value {
    font-size: 0.9rem;
    color: var(--white);
    line-height: 1.6;
}
.contact-info-card-value a { color: var(--white); transition: color 0.3s; }
.contact-info-card-value a:hover { color: var(--gold); }
.contact-hours {
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.06);
    padding: 28px;
}
.contact-hours-title {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}
.contact-hours-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(200,169,110,0.05);
    font-size: 0.8rem;
}
.contact-hours-row:last-child { border-bottom: none; }
.contact-hours-day { color: rgba(245,240,232,0.5); }
.contact-hours-time { color: var(--gold); font-weight: 500; }
.contact-map {
    width: 100%;
    aspect-ratio: 16/7;
    border: 1px solid rgba(200,169,110,0.06);
    overflow: hidden;
}
.contact-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.8) invert(0.92) contrast(0.9); }

/* ── ABOUT PAGE ── */
.about-page-stats {
    padding: 0 10% 60px;
}
.about-timeline {
    padding: 60px 10%;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}
.about-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--gold), var(--gold), transparent);
    opacity: 0.3;
}
.timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 50px;
    position: relative;
}
.timeline-item:nth-child(odd) { padding-right: calc(50% + 30px); }
.timeline-item:nth-child(even) { padding-left: calc(50% + 30px); flex-direction: row-reverse; text-align: right; }
.timeline-item:nth-child(even) .timeline-content { text-align: right; }
.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: var(--dark);
    z-index: 2;
}
.timeline-year {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 8px;
}
.timeline-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.timeline-text {
    font-size: 0.82rem;
    line-height: 1.8;
    color: rgba(245,240,232,0.5);
}
.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 60px 10%;
}
.about-value-card {
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.06);
    padding: 40px 28px;
    text-align: center;
    transition: all 0.3s;
}
.about-value-card:hover {
    border-color: rgba(200,169,110,0.2);
    transform: translateY(-4px);
}
.about-value-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(200,169,110,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.about-value-icon svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; }
.about-value-card h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.about-value-card p {
    font-size: 0.8rem;
    line-height: 1.8;
    color: rgba(245,240,232,0.5);
}
.about-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
    padding: 60px 10%;
}
.team-card {
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.06);
    overflow: hidden;
    text-align: center;
    transition: all 0.3s;
}
.team-card:hover { border-color: rgba(200,169,110,0.2); transform: translateY(-4px); }
.team-card-photo {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--dark3);
}
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.team-card:hover .team-card-photo img { transform: scale(1.05); }
.team-card-info { padding: 24px; }
.team-card-name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.team-card-role {
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}
.team-card-social {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.team-card-social a {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(200,169,110,0.12);
    color: rgba(245,240,232,0.5);
    transition: all 0.3s;
}
.team-card-social a:hover { border-color: var(--gold); color: var(--gold); }
.team-card-social a svg { width: 14px; height: 14px; }

/* ── PRICING / TARIFS PAGE ── */
.tarifs-comparison {
    padding: 0 10% 60px;
    overflow-x: auto;
}
.tarifs-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}
.tarifs-table th {
    background: var(--dark2);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--gold);
    padding: 16px 20px;
    text-align: left;
    border-bottom: 2px solid rgba(200,169,110,0.15);
}
.tarifs-table td {
    padding: 14px 20px;
    font-size: 0.85rem;
    color: rgba(245,240,232,0.7);
    border-bottom: 1px solid rgba(200,169,110,0.05);
}
.tarifs-table tr:hover td { background: rgba(200,169,110,0.03); }
.tarifs-table .tarifs-price {
    font-weight: 600;
    color: var(--gold);
}

/* ── LEGAL / MENTIONS LEGALES ── */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 10%;
}
.legal-content h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 40px 0 16px;
    padding-left: 16px;
    border-left: 3px solid var(--gold);
}
.legal-content h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 24px 0 12px;
}
.legal-content p, .legal-content li {
    font-size: 0.85rem;
    line-height: 1.9;
    color: rgba(245,240,232,0.65);
    margin-bottom: 14px;
}
.legal-toc {
    background: var(--dark2);
    border: 1px solid rgba(200,169,110,0.06);
    padding: 28px;
    margin-bottom: 40px;
}
.legal-toc-title {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}
.legal-toc ol {
    list-style: decimal;
    padding-left: 20px;
    margin: 0;
}
.legal-toc li {
    padding: 6px 0;
    font-size: 0.8rem;
}
.legal-toc a { color: rgba(245,240,232,0.6); transition: color 0.3s; }
.legal-toc a:hover { color: var(--gold); }

/* ── SEARCH RESULTS ── */
.search-results-header {
    text-align: center;
    padding: 0 10% 20px;
}
.search-results-count {
    font-size: 0.75rem;
    color: rgba(245,240,232,0.4);
}
.search-empty {
    text-align: center;
    padding: 80px 10%;
}
.search-empty h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.search-empty p {
    color: rgba(245,240,232,0.5);
    margin-bottom: 30px;
}
.search-empty-form {
    max-width: 400px;
    margin: 0 auto;
}

/* ── PAGINATION STYLED ── */
.pagination-wrap {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 20px 10% 60px;
}
.pagination-wrap .page-numbers {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(245,240,232,0.5);
    border: 1px solid rgba(200,169,110,0.1);
    transition: all 0.3s;
}
.pagination-wrap .page-numbers:hover {
    border-color: rgba(200,169,110,0.3);
    color: var(--gold);
}
.pagination-wrap .page-numbers.current {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
    font-weight: 600;
}
.pagination-wrap .page-numbers.dots { border: none; }

/* ── LIGHTBOX ── */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5,5,5,0.95);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: zoom-out;
}
.lightbox-overlay.active { opacity: 1; }
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    cursor: default;
}
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(200,169,110,0.3);
    background: transparent;
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold); }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 1px solid rgba(200,169,110,0.2);
    background: rgba(5,5,5,0.7);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.lightbox-nav:hover { border-color: var(--gold); color: var(--gold); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

/* ── ENHANCED STAGGER ── */
.stagger-5 { transition-delay: 0.6s; }
.stagger-6 { transition-delay: 0.75s; }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* ── LARGE DESKTOP (1400px+) ── */
@media (min-width: 1400px) {
    .fleet-grid { gap: 3px; }
}

/* ── LAPTOP / SMALL DESKTOP (<= 1200px) ── */
@media (max-width: 1200px) {
    .nav-links { gap: 24px; }
    .nav-links a { font-size: 0.68rem; letter-spacing: 2px; }
    .nav-indicator { display: block; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .pricing-grid { grid-template-columns: repeat(3, 1fr); }
    .contact-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }

    /* Inner pages */
    .service-archive-grid { grid-template-columns: repeat(2, 1fr); }
    .vehicle-detail { gap: 40px; }
    .about-values-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── TABLET (<= 992px) ── */
@media (max-width: 992px) {
    /* Navbar -> Hamburger */
    .nav-links { display: none !important; }
    .hamburger { display: flex; }
    .navbar-main { padding: 20px 30px; }
    .navbar-main.scrolled { padding: 14px 30px; }

    /* Hero */
    .slide-content { left: 8%; max-width: 90%; }
    .slide-title { font-size: clamp(2rem, 6vw, 3.5rem); }
    .slide-desc { max-width: 100%; }
    .slider-arrows { display: none; }
    .scroll-hint { display: none; }

    /* Booking bar */
    .booking-bar {
        position: relative;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 30px 8%;
        background: var(--dark2);
        backdrop-filter: none;
    }
    .booking-field { border-right: none; padding: 0; }
    .booking-submit {
        grid-column: 1 / -1;
        padding: 16px;
        margin-left: 0;
    }

    /* Stats (reset bento to 2-col) */
    .stats { grid-template-columns: repeat(2, 1fr); padding: 50px 8%; }
    .stat-item:first-child { grid-column: span 2; }
    .stat-item:first-child .stat-number { font-size: 3.5rem; }

    /* Booking Steps */
    .booking-steps { padding: 80px 8%; }
    .steps-container { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .steps-line { display: none; }

    /* Fleet */
    .fleet { padding: 80px 8%; }
    .fleet-grid { grid-template-columns: 1fr; gap: 2px; }
    .fleet-card { aspect-ratio: 16/9; }
    .fleet-card-featured { grid-row: auto; aspect-ratio: 16/9; }
    .fleet-info { transform: translateY(0); }
    .fleet-amenities-mini { opacity: 1; }
    .fleet-detail { opacity: 1; }

    /* Features */
    .features { padding: 80px 8%; }
    .features-grid { grid-template-columns: 1fr 1fr; }

    /* About */
    .about-section { padding: 80px 8%; }
    .about-container { grid-template-columns: 1fr; gap: 50px; }
    .about-visual { order: 0; }
    .about-content.reveal-left { margin-left: 0; padding: 40px 30px; }
    .about-title { text-align: center; }
    .about-content .section-tag { justify-content: center; }
    .about-values { justify-content: center; }

    /* Testimonials */
    .testimonials { padding: 80px 8%; }
    .testi-grid { grid-template-columns: 1fr; gap: 20px; }

    /* CTA */
    .cta-section { padding: 80px 8%; }

    /* Footer */
    .site-footer { padding: 50px 8% 30px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

    /* Fleet Carousel */
    .fleet-carousel { margin: 0; padding: 0; }
    .fleet-track .fleet-card { min-width: min(350px, 80vw); }

    /* Services — disable scroll-drive at tablet */
    .services-scroll-drive { height: auto; }
    .services-scroll-drive .services-showcase { position: relative; height: auto; }
    .services-showcase { padding: 80px 8%; }
    .services-track { flex-wrap: wrap; width: 100%; }
    .service-card { width: calc(50% - 1px); opacity: 1 !important; transform: none !important; }
    .service-card.is-focused { transform: none !important; }
    .services-progress { display: none; }

    /* Features — first-child back to 1-col span */
    .features-grid .feature-card:first-child { grid-column: span 1; }
    .feature-card::after { font-size: 4rem; }

    /* Fleet spotlight off at tablet */
    .fleet-grid:hover .fleet-card:not(:hover) { filter: none; }

    /* Pricing */
    .pricing { padding: 80px 8%; }
    .pricing-grid { grid-template-columns: 1fr; gap: 20px; max-width: 500px; }
    .pricing-card-featured { transform: none; }
    .pricing-card-featured:hover { transform: translateY(-8px); }

    /* Zones */
    .zones-section { padding: 80px 8%; }
    .zones-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .nav-indicator { display: none; }

    /* Testimonials Carousel */
    .testi-carousel { margin: 0; padding: 0; }
    .testi-track .testi-card { min-width: min(340px, 80vw); }

    /* FAQ */
    .faq-section { padding: 80px 8%; }

    /* Contact */
    .contact-immersive { padding: 80px 8%; }
    .contact-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }

    /* Marquee */
    .partner-logo { font-size: 0.8rem; letter-spacing: 2px; }

    /* Section Dividers */
    .section-divider svg { height: 40px; }

    /* Inner pages — Tablet */
    .page-hero { min-height: 280px; padding: 140px 8% 60px; background-attachment: scroll; }
    .vehicle-detail { grid-template-columns: 1fr; gap: 40px; }
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
    .contact-page-grid { grid-template-columns: 1fr; }
    .about-timeline::before { left: 20px; }
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) { padding-left: 50px; padding-right: 0; flex-direction: row; text-align: left; }
    .timeline-item:nth-child(even) .timeline-content { text-align: left; }
    .timeline-dot { left: 20px; }
    .about-values-grid { grid-template-columns: repeat(2, 1fr); }
    .service-archive-grid { grid-template-columns: repeat(2, 1fr); }
    .service-features-grid { grid-template-columns: 1fr; }
    .related-posts-grid { grid-template-columns: repeat(2, 1fr); }
    .post-nav { grid-template-columns: 1fr; }
    .blog-featured-post .blog-card { grid-template-columns: 1fr; }
    .blog-featured-post .blog-card-image { min-height: 200px; }
    .back-to-top { right: 20px; bottom: 90px; }
}

/* ── MOBILE (<= 768px) ── */
@media (max-width: 768px) {
    .navbar-main { padding: 16px 20px; }
    .navbar-main.scrolled { padding: 12px 20px; }
    .logo { font-size: 1.3rem; }

    /* Hero */
    .hero { height: 100vh; min-height: 600px; }
    .slide-content { left: 6%; right: 6%; max-width: 100%; }
    .slide-title { font-size: clamp(1.8rem, 8vw, 2.8rem); margin-bottom: 20px; }
    .slide-desc { font-size: 0.8rem; margin-bottom: 32px; }
    .slide-btns { flex-direction: column; gap: 12px; }
    .slide-btns .btn-gold,
    .slide-btns .btn-outline {
        text-align: center;
        padding: 14px 28px;
    }
    .slider-nav { left: 6%; bottom: 30px; }
    .slider-dot { width: 5px; height: 5px; }
    .slider-dot.active { width: 24px; }

    /* Hide orbs on mobile */
    .orb { display: none; }

    /* Booking */
    .booking-bar {
        grid-template-columns: 1fr;
        padding: 24px 6%;
    }

    /* Stats — reset bento first-child at mobile */
    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding: 40px 6%;
    }
    .stat-item:first-child { grid-column: span 2; }
    .stat-item:first-child .stat-number { font-size: 3rem; }
    .stat-number { font-size: 2.5rem; }

    /* Booking Steps */
    .booking-steps { padding: 60px 6%; }
    .steps-container { grid-template-columns: 1fr 1fr; gap: 24px; }
    .step-number { font-size: 5rem; }
    .step-icon { width: 60px; height: 60px; }

    /* Amenity Icons */
    .amenity-icon-tag { width: 30px; height: 30px; }
    .amenity-icon-tag svg { width: 13px; height: 13px; }

    /* Fleet */
    .fleet { padding: 60px 6%; }
    .fleet-card { aspect-ratio: 4/5; }
    .fleet-card-featured { aspect-ratio: 4/5; }

    /* Features */
    .features { padding: 60px 6%; }
    .features-grid { grid-template-columns: 1fr; }
    .feature-card { padding: 35px 25px; }

    /* About */
    .about-section { padding: 60px 6%; }
    .about-values { flex-direction: column; gap: 16px; align-items: center; }
    .about-text { text-align: center; }

    /* Testimonials */
    .testimonials { padding: 60px 6%; }
    .testi-card { padding: 28px; }
    .testimonials::before { font-size: 200px; }

    /* CTA */
    .cta-section { padding: 60px 6%; }
    .cta-btns { flex-direction: column; align-items: center; }
    .phone-link { width: 100%; max-width: 300px; justify-content: center; }

    /* Footer */
    .site-footer { padding: 40px 6% 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .footer-brand .logo, .footer-brand .footer-logo { margin: 0 auto 16px; }
    .footer-desc { margin: 0 auto 20px; }
    .footer-social { justify-content: center; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

    /* WhatsApp */
    .whatsapp-float { bottom: 20px; right: 20px; width: 50px; height: 50px; }
    .whatsapp-float svg { width: 24px; height: 24px; }

    /* Section headers */
    .section-header { margin-bottom: 40px; }
    .section-title { font-size: clamp(1.6rem, 6vw, 2.5rem); }
    .section-desc { font-size: 0.8rem; }

    /* Mobile menu */
    .mobile-nav-links li a { font-size: 1.4rem; }

    /* Hide custom cursor on touch devices */
    .cursor-dot, .cursor-ring, .cursor-trail { display: none !important; }

    /* Hide bokeh on mobile for perf */
    .fleet::after, .services-showcase::after, .cta-section::after { display: none; }

    /* Services */
    .services-showcase { padding: 60px 6%; }
    .services-track { flex-wrap: wrap; width: 100%; }
    .service-card { width: 100%; }
    .service-number { font-size: 2.5rem; }

    /* Pricing */
    .pricing { padding: 60px 6%; }
    .pricing-card { padding: 35px 24px; }
    .pricing-card-featured { padding: 40px 24px; }

    /* Zones */
    .zones-section { padding: 60px 6%; }
    .zones-map-svg { min-height: 280px; }
    .zones-stat-card .stat-number, .zones-stat-value { font-size: 1.8rem; }
    .zones-stat-card { padding: 20px 12px; }

    /* FAQ */
    .faq-section { padding: 60px 6%; }
    .faq-question { font-size: 0.9rem; padding: 22px 0; }

    /* Contact */
    .contact-immersive { padding: 60px 6%; }
    .contact-grid { grid-template-columns: 1fr; gap: 30px; }
    .contact-item-icon { width: 54px; height: 54px; }

    /* Marquee */
    .partner-logo { font-size: 0.7rem; }
    .marquee-content { gap: 30px; padding-right: 30px; }

    /* Section Dividers */
    .section-divider svg { height: 30px; }

    /* Fleet Carousel */
    .fleet-track .fleet-card { min-width: 85vw; }

    /* Testi Carousel */
    .testi-track .testi-card { min-width: 85vw; }

    /* Inner pages — Mobile */
    .page-hero h1, .page-hero-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .page-hero { padding: 120px 6% 50px; min-height: 260px; }
    .page-hero-tag { font-size: 0.55rem; }
    .service-archive-grid { grid-template-columns: 1fr; padding: 60px 6%; }
    .vehicle-detail { padding: 60px 6%; }
    .vehicle-gallery-thumbs { overflow-x: auto; }
    .vehicle-specs-table { grid-template-columns: 1fr; }
    .vehicle-amenities-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-layout { padding: 60px 6%; }
    .blog-grid { padding: 40px 6%; }
    .contact-page-grid { padding: 60px 6%; }
    .contact-form { padding: 28px; }
    .contact-form-row { grid-template-columns: 1fr; }
    .about-timeline { padding: 40px 6%; }
    .about-values-grid { padding: 40px 6%; grid-template-columns: 1fr; }
    .about-team-grid { padding: 40px 6%; }
    .legal-content { padding: 60px 6%; }
    .tarifs-comparison { padding: 0 6% 40px; }
    .error-404 { padding: 100px 6%; }
    .error-404-links { flex-direction: column; align-items: center; }
    .error-404-search { flex-direction: column; }
    .error-404-search button { padding: 14px; }
    .related-posts-grid { grid-template-columns: 1fr; }
    .post-share { flex-wrap: wrap; }
    .service-detail { padding: 60px 6%; }
    .service-detail-header { flex-direction: column; text-align: center; }
}

/* ── SMALL-MEDIUM MOBILE (<= 640px) ── */
@media (max-width: 640px) {
    .zones-map-svg { display: none; }
    .zones-particles { display: none; }
    .zones-canvas { display: none; }
    .zones-mobile-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .zones-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── SMALL MOBILE (<= 480px) ── */
@media (max-width: 480px) {
    .hero { min-height: 550px; }
    .slide-content { left: 5%; right: 5%; }
    .slide-tag { font-size: 0.5rem; letter-spacing: 3px; }
    .slide-title { font-size: 1.6rem; }
    .slide-desc { font-size: 0.75rem; }
    .btn-gold, .btn-outline { padding: 12px 20px; font-size: 0.6rem; }

    .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
    .stat-item:first-child { grid-column: span 2; }
    .stat-item:first-child .stat-number { font-size: 2.5rem; }
    .stat-number { font-size: 2rem; }
    .stat-label { font-size: 0.5rem; }

    .booking-bar { padding: 20px 5%; }
    .field-input { font-size: 0.8rem; }
    .booking-submit { font-size: 0.55rem; padding: 14px; }

    .steps-container { grid-template-columns: 1fr; }
    .step-number { font-size: 2rem; }
    .amenity-icon-tag { width: 28px; height: 28px; }
    .amenity-icon-tag svg { width: 12px; height: 12px; }

    .fleet-name { font-size: 1.2rem; }
    .fleet-specs { gap: 8px; }
    .fleet-spec-item { font-size: 0.6rem; }
    .fleet-spec-item svg { width: 14px; height: 14px; }
    .fleet-spec-divider { height: 12px; }

    .about-stat-big { font-size: 2rem; }
    .about-stats-card { padding: 16px 20px; }

    .cta-title { font-size: clamp(1.8rem, 8vw, 3rem); }

    .mobile-nav-links li a { font-size: 1.2rem; }
    .mobile-menu-footer { flex-direction: column; align-items: center; gap: 12px; bottom: 30px; }
    .service-card { padding: 35px 24px; }
    .service-number { font-size: 2rem; }
    .pricing-card { padding: 30px 20px; }
    .faq-question { font-size: 0.82rem; }
    .contact-item-value { font-size: 0.85rem; }
    .section-divider svg { height: 20px; }
    .fleet-track .fleet-card { min-width: 90vw; }
    .testi-track .testi-card { min-width: 90vw; }
    .zones-mobile-list { grid-template-columns: 1fr; gap: 20px; }
    .zones-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .zones-stat-card { padding: 16px 10px; }
    .zones-stat-card .stat-number, .zones-stat-value { font-size: 1.5rem; }
}

/* ── LANDSCAPE MOBILE ── */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: 100vh; }
    .slide-title { font-size: 1.8rem; }
    .slide-desc { display: none; }
    .slider-nav { bottom: 15px; }
}

/* ── PRINT ── */
@media print {
    .navbar-main, .cursor, .cursor-ring, .preloader, .whatsapp-float,
    .mobile-menu-overlay, .hamburger, .scroll-hint { display: none !important; }
    body { background: #fff; color: #000; }
    .hero { height: auto; page-break-after: always; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .slide-bg { transition: none; }
    .slides { transition: none; }
    .reveal, .reveal-left { opacity: 1; transform: none; }
    .map-outline { stroke-dashoffset: 0 !important; }
    .map-line { stroke-dashoffset: 0 !important; }
    .cinematic-left, .cinematic-right, .cinematic-scale, .cinematic-up {
        opacity: 1 !important; transform: none !important;
    }
    .zones-particle { animation: none !important; }
    .orb { animation: none !important; }
    body::after { display: none; }
    .zones-section .section-tag {
        -webkit-text-fill-color: var(--gold);
        animation: none !important;
    }
    /* New R2026 animations */
    .slide-title .word-reveal { clip-path: none; opacity: 1; transform: none; }
    .slide-video { display: none; }
    .preloader::before, .preloader::after { transition: none; }
    .preloader-logo-img { animation: none; }
    .cursor-trail { display: none; }
    .fleet-card::before { animation: none; }
    .contact-item-icon { animation: none; }
    .phone-link svg { animation: none; }
    .services-scroll-drive { height: auto; }
    .services-scroll-drive .services-showcase { position: relative; height: auto; }
    .service-card { opacity: 1 !important; transform: none !important; }
}