@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* ========================================
   RESET AND BASE STYLES
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Gotham SSm A', 'Gotham SSm B', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #171a20;
    overflow-x: hidden;
}

/* ========================================
   TESLA-STYLE NAVIGATION
   ======================================== */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    transition: background-color 0.3s ease;
}

/* Normal Mode - Default styling (white background, black elements) */
.site-nav .logo-symbol,
.site-nav .logo-text {
    filter: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Logo hover effect - Normal mode */
.site-nav .logo-symbol:hover,
.site-nav .logo-text:hover {
    transform: scale(1.05);
    opacity: 0.85;
}

/* Logo click/active effect - Normal mode */
.site-nav .logo-symbol:active,
.site-nav .logo-text:active {
    transform: scale(0.95);
    opacity: 0.7;
}

/* Hero Mode - Corporate Style (when in hero-slideshow section) */
.site-nav.hero-mode {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: all 0.3s ease;
}

/* Hover state - when any nav-item is hovered */
.site-nav.hero-mode:has(.nav-item:hover) {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Remove drop shadows from logos when nav-item is hovered */
.site-nav.hero-mode:has(.nav-item:hover) .logo-symbol,
.site-nav.hero-mode:has(.nav-item:hover) .logo-text {
    filter: brightness(0) invert(1);
}

/* Remove text shadows from all nav-links when any nav-item is hovered */
.site-nav.hero-mode:has(.nav-item:hover) .nav-link {
    text-shadow: none;
}

/* Default logo styling with drop shadows */
.site-nav.hero-mode .logo-symbol,
.site-nav.hero-mode .logo-text {
    filter: brightness(0) invert(1)
            drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.63))
            drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.63))
            drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.45));
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Logo hover effect - Hero mode */
.site-nav.hero-mode .logo-symbol:hover,
.site-nav.hero-mode .logo-text:hover {
    transform: scale(1.05);
    filter: brightness(0) invert(1)
            drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.75))
            drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.75))
            drop-shadow(6px 6px 5px rgba(0, 0, 0, 0.55));
}

/* Logo click/active effect - Hero mode */
.site-nav.hero-mode .logo-symbol:active,
.site-nav.hero-mode .logo-text:active {
    transform: scale(0.95);
    filter: brightness(0) invert(1)
            drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

/* Default nav-link styling */
.site-nav.hero-mode .nav-link {
    color: #ffffff;
    text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
}

/* Hover effect on individual nav-link */
.site-nav.hero-mode .nav-link:hover,
.site-nav.hero-mode .nav-item:hover .nav-link {
    background-color: rgba(255, 255, 255, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.6);
    outline-offset: 0;
}

/* Active/clicked state - when mega menu is open */
.site-nav.hero-mode:has(.nav-item.active) {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* Remove drop shadows from logos when mega menu is active */
.site-nav.hero-mode:has(.nav-item.active) .logo-symbol,
.site-nav.hero-mode:has(.nav-item.active) .logo-text {
    filter: brightness(0) invert(1);
}

/* Remove text shadows from all nav-links when mega menu is active */
.site-nav.hero-mode:has(.nav-item.active) .nav-link {
    text-shadow: none;
}

/* Active/clicked nav-link styling */
.site-nav.hero-mode .nav-item.active .nav-link {
    color: #1e3a8a;
    text-shadow: none;
    background-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 1024px) {
    .site-nav {
        background: transparent;
    }
}

.nav-container {
    display: flex;
    align-items: center;
    padding: 0 48px;
    height: 67px;
    gap: 0;
}

@media (max-width: 1024px) {
    .nav-container {
        padding: 0 20px;
        justify-content: space-between;
    }
}

/* Logo Symbol Wrapper - Left Side */
.logo-symbol-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Logo Text Wrapper - Centered between logo and nav items */
.logo-text-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 0 24px;
}

.logo-symbol,
.logo-text {
    height: 29px;
    width: auto;
}

/* Mobile/Tablet Styles - Keep original behavior */
@media (max-width: 1024px) {
    .logo-symbol-wrapper {
        display: none;
    }

    .logo-text-wrapper {
        flex: 0;
        margin: 0;
    }

    /* Company name - normal mode (black, no drop shadow) */
    .logo-text {
        filter: none;
    }

    /* Company name - hero mode (white with drop shadow) */
    .site-nav.hero-mode .logo-text {
        filter: brightness(0) invert(1)
                drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.7));
    }
}

/* Right Side Navigation (Desktop) */
.nav-center {
    display: flex;
    gap: 2px;
    list-style: none;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .nav-center {
        display: none;
    }
}

.nav-item {
    position: relative;
}

.nav-link {
    display: block;
    padding: 5px 14px;
    color: #171a20;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: 4px;
    text-shadow: none;
    transition: all 0.3s ease;
}

/* Normal mode hover effect - black outline */
.nav-link:hover,
.nav-item:hover .nav-link {
    background-color: rgba(0, 0, 0, 0.04);
    outline: 1px solid rgba(0, 0, 0, 0.6);
    outline-offset: 0;
}

/* ... Keep all existing Reset, Base, and Navigation styles exactly as they are ... */

/* ========================================
   MEGA MENU PANEL (AMENDED)
   ======================================== */
.mega-menu-panel {
    display: none; /* Hidden by default */
    position: fixed;
    top: 100%; /* Sits directly under the nav link */
    left: 0;
    width: 100vw; /* Full viewport width */
    background: white;
    z-index: 1000;
    margin-top: 0; /* Ensures no gap for mouse movement */
    pointer-events: auto;
}

/* #1. Show the panel only when .active class is applied via JS Click */
.nav-item.active .mega-menu-panel {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* ========================================
   HERO MODE: MEGA MENU PANEL STYLING
   Match navbar hover background exactly: rgba(255, 255, 255, 0.1) + blur(20px)
   ======================================== */

/* STEP 1: Disable normal mode backgrounds for mega menu in hero mode */
.site-nav.hero-mode .mega-menu-panel {
    background: transparent !important;
}

.site-nav.hero-mode .mega-menu-panel::before {
    display: none !important;
}

.site-nav.hero-mode .mega-menu-panel::after {
    background-color: transparent !important;
}

.site-nav.hero-mode .mega-menu-content {
    background-color: transparent !important;
}

/* STEP 2: Apply glassmorphism frosted glass effect when active/hover */
.site-nav.hero-mode .nav-item.active .mega-menu-panel,
.site-nav.hero-mode .nav-item:hover .mega-menu-panel {
    /* Fallback for browsers without backdrop-filter support - transparency reduced by 20% */
    background: rgba(205, 212, 220, 0.75) !important;

    /* Glassmorphism effect - transparency reduced by 20%, blur increased by 30% */
    background: rgba(205, 212, 220, 0.65) !important;
    -webkit-backdrop-filter: blur(31px) !important;
    backdrop-filter: blur(31px) !important;

    /* Low-opacity border */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;

    /* Soft shadow for depth */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important;
}

/* BLUR EFFECT FOR BACKGROUND - Normal Mode */
.mega-menu-panel::before {
    content: '';
    position: fixed;
    top: 67px;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: -1;
    pointer-events: none;
}

/* ... Keep all other Mega Menu Content, Product, and Mobile styles exactly as they are ... */

.mega-menu-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: #fff;
    min-height: 100%;
    z-index: -1;
}

/* Mega Menu Content Container */
.mega-menu-content {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px;
    background-color: #fff;
    display: grid;
    gap: 24px;
    box-sizing: border-box;
}

/* ========================================
   HERO MODE OVERRIDES - MUST COME AFTER NORMAL MODE STYLES
   ======================================== */

/* Override normal mode white backgrounds in hero mode */
.site-nav.hero-mode .mega-menu-panel::after {
    background-color: transparent !important;
}

.site-nav.hero-mode .mega-menu-content {
    background-color: transparent !important;
}

/* Ensure text and UI elements inside remain fully sharp */
.site-nav.hero-mode .nav-item.active .mega-menu-content,
.site-nav.hero-mode .nav-item:hover .mega-menu-content {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.site-nav.hero-mode .nav-item.active .product-title,
.site-nav.hero-mode .nav-item:hover .product-title,
.site-nav.hero-mode .nav-item.active .product-action-link,
.site-nav.hero-mode .nav-item:hover .product-action-link,
.site-nav.hero-mode .nav-item.active .secondary-links-list a,
.site-nav.hero-mode .nav-item:hover .secondary-links-list a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.mega-menu-products--count-3 {
    grid-template-columns: repeat(3, 1fr) 200px;
}

.mega-menu-products--count-2 {
    grid-template-columns: repeat(2, 1fr) 200px;
}

.mega-menu-links-only {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
}

/* Individual Product Column */
.mega-menu-product {
    display: flex;
    flex-direction: column;
}

.product-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
}

.product-link-wrapper:hover {
    transform: translateY(-2px);
}

.product-image-wrapper {
    width: 100%;
    height: 200px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
}

.product-link-wrapper:hover .product-img {
    transform: scale(1.015);
}

.product-info {
    text-align: center;
}

.product-title {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    color: #171a20;
    margin-bottom: 12px;
    letter-spacing: 0.6px;
    line-height: 1.2;
}

.product-actions {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.product-action-link {
    font-size: 15px;
    font-weight: 400;
    color: #5c5e62;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 150ms ease;
}

.product-action-link:hover {
    color: #171a20;
    font-weight: bold;
}

/* Secondary Links Column */
.mega-menu-secondary-links {
    padding-top: 8px;
}

.secondary-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.secondary-links-list li {
    margin-bottom: 12px;
}

.secondary-links-list a {
    font-size: 15px;
    font-weight: 400;
    color: #5c5e62;
    text-decoration: none;
    display: block;
    transition: color 150ms ease;
}

.secondary-links-list a:hover {
    color: #171a20;
    font-weight: bold;
}

/* ========================================
   NAV RIGHT (Mobile Menu Button)
   ======================================== */
.nav-right {
    display: none;
    align-items: center;
}

@media (max-width: 1024px) {
    .nav-right {
        display: flex;
    }
}

/* ========================================
   MOBILE MENU
   ======================================== */
/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: #393c41;
    font-family: 'Orbitron', sans-serif;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

@media (max-width: 768px) {
    /* Normal mode - black text, no drop shadow */
    .mobile-menu-btn {
        display: block;
        color: #171a20;
        text-shadow: none;
    }

    /* Hero mode - white text with drop shadow */
    .site-nav.hero-mode .mobile-menu-btn {
        color: #ffffff;
        text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.7);
    }
}

/* Hero mode styling for mobile menu button - matches nav-item */
.site-nav.hero-mode .mobile-menu-btn {
    color: #ffffff;
    text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
}

/* Hover effect - normal mode with black outline */
.mobile-menu-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    outline: 1px solid rgba(0, 0, 0, 0.6);
    outline-offset: 0;
    color: #171a20;
}

/* Hover effect - hero mode with white outline */
.site-nav.hero-mode .mobile-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    text-shadow: none;
    outline: 1px solid rgba(255, 255, 255, 0.6);
    outline-offset: 0;
    color: #ffffff;
}

/* Active/clicked effect - matches nav-item active */
.site-nav.hero-mode .mobile-menu-btn:active {
    color: #1e3a8a;
    text-shadow: none;
    background-color: rgba(255, 255, 255, 0.15);
}

/* Mobile Menu Overlay - Glassmorphism Effect */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 320px;
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;

    /* Glassmorphism frosted glass effect */
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);

    /* Rounded corners */
    border-radius: 20px 0 0 20px;

    /* Subtle border for glass edge effect */
    border-left: 1px solid rgba(255, 255, 255, 0.4);

    /* Light shadow for depth */
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15),
                -2px 0 8px rgba(0, 0, 0, 0.1);
}

.mobile-menu-overlay.active {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
}

.mobile-close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #393c41;
    padding: 4px 8px;
}

.mobile-menu-list {
    list-style: none;
    padding: 0;
}

.mobile-menu-list > li {
    border-bottom: 1px solid #e5e5e5;
}

.mobile-menu-list a,
.mobile-menu-list button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 24px;
    text-align: left;
    color: #393c41;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.mobile-menu-list .chevron {
    color: #999;
    font-size: 18px;
    display: inline-block;
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), color 200ms ease;
    transform-origin: 50% 50%;
}

/* Rotate chevron when its toggle has the `open` class */
.mobile-menu-list button.open .chevron {
    transform: rotate(90deg);
}

/* SVG sizing inside the chevron wrapper */
.chevron-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}

/* Add a subtle animated stroke / pop when toggled open */
.mobile-menu-list button .chevron-icon path {
    transition: stroke 200ms ease, transform 250ms cubic-bezier(0.2,0,0,1);
}
.mobile-menu-list button.open .chevron-icon path {
    transform: translateX(1px);
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-list .chevron,
    .mobile-menu-list button.open .chevron {
        transition: none;
        transform: none;
    }
}

/* Submenu (collapsed by default; uses max-height + opacity for smooth transitions)
   JS toggles the `open` class on `.mobile-submenu` */
.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    background: #f8f8f8;
    padding: 0 0; /* inner links keep their own padding */
    opacity: 0;
    transition: max-height 320ms cubic-bezier(0.2, 0, 0, 1),
                opacity 200ms ease,
                padding 200ms ease;
}

.mobile-submenu.open {
    max-height: 1000px; /* large enough for content; clipped by overflow */
    opacity: 1;
    padding: 8px 0;
}

.mobile-submenu a {
    display: block;
    padding: 12px 24px 12px 48px;
    font-size: 14px;
    font-weight: 400;
}

/* Hover / Selected affordance: dark-red bold with a smooth shift */
.mobile-menu-list button,
.mobile-menu-list a {
    transition: color 200ms ease, transform 180ms cubic-bezier(0.2,0,0,1), font-weight 120ms;
}

.mobile-menu-list button:hover,
.mobile-menu-list a:hover,
.mobile-menu-list button.open {
    color: #8B0000; /* dark red */
    font-weight: 700;
    transform: translateX(-6px);
}

/* Ensure submenu links also show selected state when hovered */
.mobile-submenu a:hover {
    color: #8B0000;
    font-weight: 700;
    transform: translateX(-6px);
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-list button,
    .mobile-menu-list a,
    .mobile-menu-list .chevron,
    .chevron-icon {
        transition: none !important;
        transform: none !important;
    }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mobile-submenu,
    .mobile-submenu.open {
        transition: none;
    }
}

/* Backdrop - Soft blur effect */
.mobile-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, backdrop-filter 0.3s;
}

.mobile-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   HERO SLIDESHOW
   ======================================== */
.hero-slideshow {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide.active {
    opacity: 1;
}

/* Removed overlay - no tint effect */
/* .slide::before is now removed completely */

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 900px;
    padding: 40px;
    width: 90%;
}

.hero-content h1 {
    font-size: clamp(32px, 6vw, 72px);
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
}

.hero-content p {
    font-size: clamp(16px, 2.5vw, 24px);
    margin-bottom: 40px;
    opacity: 0.95;
    text-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
}

/* ========================================
   CAROUSEL NAVIGATION BUTTONS - TESLA STYLE
   ======================================== */
.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(23, 26, 32, 0.6);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show buttons on hover */
.hero-slideshow:hover .carousel-nav-btn {
    opacity: 1;
    visibility: visible;
}

.carousel-nav-btn:hover {
    background: rgba(23, 26, 32, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-nav-prev {
    left: 32px;
}

.carousel-nav-next {
    right: 32px;
}

.carousel-nav-icon {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .carousel-nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .carousel-nav-prev {
        left: 16px;
    }
    
    .carousel-nav-next {
        right: 16px;
    }
    
    .carousel-nav-icon {
        width: 20px;
        height: 20px;
    }
}

/* ========================================
   SLIDE INDICATORS
   ======================================== */
.slide-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 12px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    padding: 0;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.7);
}

.indicator.active {
    background: white;
    width: 40px;
    border-radius: 6px;
}

/* ========================================
   BUTTONS
   ======================================== */
.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.btn-primary {
    background: white;
    color: #2B5CD4;
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: #2B5CD4;
}

/* ========================================
   PRODUCTS SECTION
   ======================================== */
.products-section {
    padding: 100px 40px;
    background: #F7F7F7;
}

.section-title {
    text-align: center;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    margin-bottom: 60px;
    color: #2D3436;
}

.products-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.product-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.product-image {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, #2B5CD4 0%, #4ECDC4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-content {
    padding: 30px;
}

.product-content h3 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #2B5CD4;
}

.product-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.learn-more {
    color: #2B5CD4;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s ease;
}

.learn-more:hover {
    gap: 10px;
}

/* ========================================
   INNOVATION SECTION
   ======================================== */
.innovation-section {
    padding: 100px 40px;
    background: linear-gradient(135deg, #2B5CD4 0%, #4ECDC4 100%);
    color: white;
}

.innovation-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 1024px) {
    .innovation-content {
        grid-template-columns: 1fr;
    }
}

.innovation-text h2 {
    font-size: clamp(32px, 5vw, 48px);
    margin-bottom: 30px;
}

.innovation-text p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .stats {
        grid-template-columns: 1fr;
    }
}

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

.stat-number {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 16px;
    opacity: 0.9;
}

/* ========================================
   LIFESTYLE SECTION
   ======================================== */
.lifestyle-section {
    padding: 100px 40px;
    background: white;
}

.lifestyle-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

@media (max-width: 768px) {
    .lifestyle-grid {
        grid-template-columns: 1fr;
    }
}

.lifestyle-item {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.lifestyle-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
}

.lifestyle-overlay h3 {
    font-size: 32px;
    margin-bottom: 10px;
}

.lifestyle-overlay p {
    font-size: 16px;
}

/* ========================================
   CTA SECTION
   ======================================== */
.cta-section {
    padding: 100px 40px;
    background: linear-gradient(135deg, #2B5CD4 0%, #4ECDC4 100%);
    text-align: center;
    color: white;
}

.cta-section h2 {
    font-size: clamp(32px, 5vw, 48px);
    margin-bottom: 30px;
}

.cta-section p {
    font-size: clamp(16px, 2vw, 20px);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   FOOTER
   ======================================== */
footer {
    background: #2D3436;
    color: white;
    padding: 60px 40px 30px;
}

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

.footer-section h4 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #2B5CD4;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #4ECDC4;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #444;
    color: #999;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}