/* --- BRIGHT & VIBRANT CSS STYLES --- */
:root {
    --solar-gold: #FFC400; /* Deep Vibrant Gold */
    --electric-cyan: #00E5FF; /* Bright Neon Cyan */
    --power-blue: #0040FF; /* Bold Accent Blue */
    --bright-white: #FFFFFF; /* Pure White Background */
    --soft-grey: #F5F5F7; /* Ultra-Light Grey for depth */
    --text-dark: #1D1D1F; /* Dark text for readability */
    --hot-red: #FF3D00; /* Notification/Badge Red */
}

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

body { 
    font-family: 'Poppins', sans-serif; 
    background-color: var(--bright-white); 
    color: var(--text-dark); 
    scroll-behavior: smooth; 
    overflow-x: hidden; 
}

/* Navigation - Bright Header */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 8%; background: var(--bright-white);
    position: sticky; top: 0; z-index: 3000; border-bottom: 5px solid var(--power-blue);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.logo { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 1.8rem; 
    color: var(--text-dark); 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-weight: 800; 
}

.logo span { color: var(--power-blue); }

.nav-info { 
    font-weight: 800; 
    color: var(--solar-gold); 
    font-size: 0.9rem; 
    background: #FFF9E0; 
    padding: 5px 15px; 
    border-radius: 5px; 
}

/* Super Bright Hero Section */
.hero {
    height: 60vh;
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), 
                url('https://images.unsplash.com/photo-1583121274602-3e2820c69888?auto=format&fit=crop&w=1600&q=80');
    background-size: cover; background-position: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    border-bottom: 10px solid var(--solar-gold);
}

.hero h1 { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 4.5rem; 
    color: var(--text-dark); 
    text-shadow: 2px 2px 0 var(--solar-gold); 
    text-transform: uppercase; 
}

.hero p { 
    color: var(--power-blue); 
    letter-spacing: 4px; 
    font-weight: 800; 
    font-size: 1.1rem; 
    text-shadow: 1px 1px 0 var(--electric-cyan); 
}

/* Sticky Bright Filter System */
.filter-hub { 
    padding: 30px 8%; 
    background: var(--soft-grey); 
    position: sticky; 
    top: 80px; 
    z-index: 2000; 
    border-bottom: 2px solid #EAEAEA; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
}

.filter-label { 
    font-size: 0.8rem; 
    color: var(--text-dark); 
    font-weight: 800; 
    margin-bottom: 12px; 
    display: block; 
    text-transform: uppercase; 
    text-align: center; 
}

.filter-group { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.tab { 
    background: var(--bright-white); border: 2px solid #EAEAEA; color: var(--text-dark); padding: 10px 20px; 
    cursor: pointer; border-radius: 50px; font-weight: 700; font-size: 0.75rem; transition: 0.3s; text-transform: uppercase;
}

.tab:hover { border-color: var(--electric-cyan); background: #FAFDFE; }

.tab.active { 
    background: var(--power-blue); 
    color: white; 
    border-color: var(--power-blue); 
    box-shadow: 0 5px 15px rgba(0,64,255,0.3); 
}

/* Bright Inventory Grid */
.inventory { padding: 80px 8% 120px; background: var(--bright-white); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }

.card { 
    background: var(--bright-white); 
    border-radius: 15px; 
    overflow: hidden; 
    border: 1px solid #EAEAEA; 
    transition: 0.4s; 
    position: relative; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}

.card:hover { 
    transform: translateY(-10px); 
    border-color: var(--solar-gold); 
    box-shadow: 0 15px 40px rgba(255,196,0,0.15); 
}

.image-box { width: 100%; height: 230px; position: relative; background: #F0F0F0; }
.image-box img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }

.badge { 
    position: absolute; top: 15px; right: 15px; padding: 5px 15px; 
    font-size: 0.65rem; font-weight: 900; border-radius: 5px; 
    background: var(--hot-red); color: white; text-transform: uppercase; 
}

.card-info { padding: 25px; border-top: 1px solid #EAEAEA; }
.card-info .tag { color: var(--power-blue); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.card-info h3 { font-size: 1.3rem; margin: 8px 0; color: var(--text-dark); font-weight: 700; }

.price-tag { 
    color: var(--solar-gold); 
    font-size: 1.6rem; 
    font-weight: 800; 
    margin: 15px 0; 
    font-family: 'Poppins', sans-serif; 
}

.btn { 
    width: 100%; padding: 15px; border: none; font-weight: 800; 
    cursor: pointer; border-radius: 8px; text-transform: uppercase; 
    transition: 0.3s; font-size: 0.85rem; letter-spacing: 1px; 
}

.btn-gold { background: var(--solar-gold); color: white; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); }
.btn-gold:hover { background: var(--text-dark); transform: scale(1.02); }

/* Locations - Vibrant Section */
.locations { background: var(--soft-grey); padding: 100px 8%; border-top: 5px solid var(--power-blue); }
.section-title { text-align: center; color: var(--text-dark); font-family: 'Orbitron'; margin-bottom: 50px; }
.loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }

.loc-card { 
    padding: 40px; background: var(--bright-white); border-radius: 12px; 
    border-left: 8px solid var(--electric-cyan); box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}

.loc-card h3 { color: var(--power-blue); font-family: 'Orbitron'; margin-bottom: 15px; font-size: 1.4rem; }
.loc-card p { color: var(--text-dark); margin-bottom: 8px; font-size: 0.95rem; }

/* Contact/Footer */
footer { padding: 80px 8%; text-align: center; border-top: 5px solid var(--solar-gold); background: var(--bright-white); }
footer h2 { font-family: 'Orbitron'; color: var(--text-dark); margin-bottom: 15px; }
footer p { color: #555; margin-bottom: 10px; font-weight: 600; }
.social-icons { margin-top: 20px; color: var(--solar-gold); }
.copyright { margin-top: 30px; font-size: 0.8rem; color: #888; }

@media (max-width: 768px) { 
    .hero h1 { font-size: 2.8rem; } 
    .hero p { font-size: 0.9rem; } 
    .filter-hub { top: 70px; } 
}