/* 
   !!! CRITICAL CORE FILE - DO NOT DELETE !!! 
   Status: LOCKED (Verified by 15-Step Cross-Audit on 2026-02-07)
   
   [Essential Functions]
   - High-Fidelity Visuals (Hero, Products, About, Contact)
   - Dynamic Modals (Inquiry, Audio, Values)
   - Layout Engine (CSS Grid/Flex)
   - Light Mode & Mobile Adaptations (Self-Contained)

   [Dependencies]
   - lightwinner-mobile.css DEPENDS on this file.
   - All *.js modules DEPEND on classes defined here.
*/

/* --- GLOBAL SPA LAYOUT (Display Toggle & Scroll) --- */
/* v51_BG_FIX: Transparent BG + Specific Display Modes + Layout Fixes */

/* === GLOBAL SCROLLBAR HIDE (User Request) === */
/* Hide scrollbar for Chrome, Safari and Opera */


/* Base Section Class */


/* --- SPECIFIC DISPLAY MODES (Fix Layout Chaos) --- */
#hero.active {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh;
    padding-top: 0;
}

/* HERO CONTENT ENHANCEMENT */
.hero-content {
    width: 90%;
    max-width: 1200px;
    z-index: 5;
}

.glitch-text {
    font-size: 6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -4px;
    margin-bottom: 20px;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.15);
}

.hero-tagline {
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #fff;
    /* Changed to white for better contrast */
    margin-bottom: 80px;
    opacity: 0.9;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 255, 255, 0.3);
    /* Stronger shadow + subtle glow */
}

/* QUICK ACCESS TILES ENHANCED */
.hero-quick-access {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin-top: 40px;
}

.hero-tile {
    flex: 1;
    max-width: 340px;
    padding: 50px 30px;
    background: var(--lw-panel-bg);
    backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate);
    -webkit-backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate);
    border: 1px solid var(--lw-border);
    /* More visible border */
    border-radius: 24px;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.05);
    /* Outer shadow + Inner Glow */
}

.hero-tile:hover {
    transform: translateY(-20px) scale(1.02);
    background: rgba(20, 25, 45, 0.7);
    border-color: var(--accent-color, #00ffff);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(0, 255, 255, 0.1);
}

.tile-icon {
    font-size: 3.5rem;
    margin-bottom: 30px;
    color: var(--accent-color, #00ffff);
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.4));
    transition: all 0.5s ease;
}

.hero-tile:hover .tile-icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 25px rgba(0, 255, 255, 0.7));
}

.tile-info h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.tile-info p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    /* Increased opacity for legibility */
    line-height: 1.6;
    font-weight: 300;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    /* Added shadow for readability */
}

/* SCROLL DISCOVERY */
.scroll-discovery {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    opacity: 0.6;
    animation: fadeIn 2s ease-in-out infinite alternate;
}

.scroll-text {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
}

.scroll-indicator {
    display: none !important;
    visibility: hidden !important;
}

.scroll-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color, #00ffff);
    animation: scrollLine 2s infinite ease-in-out;
}

@keyframes scrollLine {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* --- MOBILE OPTIMIZATION (iPhone SE / Small Screens) --- */
@media (max-width: 480px) {

    /* Hero Title Scaling */
    .glitch-text {
        font-size: 2.8rem !important;
        /* Force smaller size */
        letter-spacing: -2px;
    }

    .hero-tagline {
        font-size: 1rem !important;
        margin-bottom: 40px;
    }

    /* Reduce Hero Padding */
    .section {
        padding-top: 80px !important;
        /* More headroom */
    }

    /* Section Titles */
    .section-title {
        font-size: 2.2rem !important;
        /* Smaller Global Titles */
        margin-bottom: 40px !important;
        letter-spacing: 4px !important;
    }

    /* Project Cards */
    .projects-grid {
        grid-auto-rows: 250px !important;
        /* Shorter cards */
        gap: 15px !important;
    }

    .p-overlay {
        padding: 20px !important;
    }

    .p-overlay h3 {
        font-size: 1.4rem !important;
    }
}

/* --- MOBILE OPTIMIZATION (iPhone SE / Small Screens) --- */
@media (max-width: 380px) {

    /* Hero Title Scaling */
    .glitch-text {
        font-size: 2.4rem !important;
        /* Force smaller size */
        letter-spacing: -2px;
        margin-bottom: 10px !important;
    }

    .hero-tagline {
        font-size: 0.9rem !important;
        /* Smaller tagline */
        margin-bottom: 25px !important;
        letter-spacing: 2px !important;
        line-height: 1.4;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Reduce Hero Padding */
    .section {
        padding-top: 80px !important;
        /* More headroom */
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Section Titles */
    .section-title {
        font-size: 2rem !important;
        /* Smaller Global Titles */
        margin-bottom: 30px !important;
        letter-spacing: 2px !important;
    }

    /* Hero Quick Access Tiles */
    .hero-quick-access {
        gap: 15px !important;
        margin-top: 20px !important;
    }

    .hero-tile {
        padding: 25px 15px !important;
        /* Compact Tiles */
        max-width: 100% !important;
    }

    .tile-icon {
        font-size: 2.2rem !important;
        margin-bottom: 15px !important;
    }

    .tile-info h3 {
        font-size: 1.2rem !important;
    }
}

/* GLITCH ANIMATION SUBSIDIARY */
.glitch-text {
    position: relative;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch-text::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(31px, 9999px, 94px, 0);
    }

    20% {
        clip: rect(62px, 9999px, 42px, 0);
    }

    40% {
        clip: rect(16px, 9999px, 78px, 0);
    }

    60% {
        clip: rect(58px, 9999px, 84px, 0);
    }

    80% {
        clip: rect(13px, 9999px, 93px, 0);
    }

    100% {
        clip: rect(53px, 9999px, 85px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 100px, 0);
    }

    20% {
        clip: rect(30px, 9999px, 30px, 0);
    }

    40% {
        clip: rect(10px, 9999px, 80px, 0);
    }

    60% {
        clip: rect(50px, 9999px, 10px, 0);
    }

    80% {
        clip: rect(90px, 9999px, 90px, 0);
    }

    100% {
        clip: rect(20px, 9999px, 40px, 0);
    }
}

@media (max-width: 900px) {
    .hero-quick-access {
        flex-direction: column;
        align-items: center;
    }

    .hero-tile {
        width: 100%;
        max-width: 400px;
    }

    .glitch-text {
        font-size: 3.5rem;
    }

    .hero-tagline {
        font-size: 1.2rem;
        letter-spacing: 2px;
    }
}

#contact-section.active {
    display: flex !important;
}

#product-container.active,
#lightwinner-section.active,
#projects-section.active,
#values-section.active,
#about-section.active {
    display: block !important;
}

/* --- SPECIFICITY BUSTER (Hide Inactive) --- */
/* Force hide specific IDs when not active to beat lightwinner.css ID selectors */
#hero:not(.active),
#product-container:not(.active),
#lightwinner-section:not(.active),
#projects-section:not(.active),
#values-section:not(.active),
#about-section:not(.active),
#contact:not(.active) {
    display: none !important;
}

/* --------------------------------------------- */


/* --- PREMIUM LANDING PAGE SECTIONS --- */
.section-premium {
    padding: 120px 5% !important;
    padding-bottom: 80px !important;
    /* Adjusted from 300px to 80px to reduce huge gap */
    position: relative;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
}

/* HIGH-IMPACT GLOBAL TITLES */
.section-title {
    font-size: 5rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 12px;
    color: transparent;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.4));
    -webkit-background-clip: text;
    background-clip: text;
    text-align: center;
    margin-bottom: 80px;
    opacity: 0.8;
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .section-title {
        font-size: 3rem;
        letter-spacing: 6px;
    }
}

/* --- PROJECTS SECTION (Cinematic Mosaic) --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 400px;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}


/* --- CONTACT SECTION (Redesigned) --- */
#contact {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100 !important;
    /* Ensure on top */
}

#contact.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 100 !important;
}

#contact::before {
    display: none;
}

/* TITLE REDESIGN - REUSING GLOBAL .section-title */
#contact h2.section-title {
    margin-bottom: 60px;
    margin-top: 0;
    opacity: 1;
    flex-shrink: 0;
}

.contact-wrapper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* USER FIX: Equal Width (Was 1fr 1.2fr) */
    gap: 40px;
    /* USER FIX: Slightly tighter gap */
    max-width: 1100px;
    /* USER FIX: Slightly narrower total width for elegance */
    width: 90%;
    margin: 0 auto;
    flex-shrink: 0;
    align-items: stretch;
    /* USER FIX: Force Equal Height */
    /* Ensure legibility over stars */
    /* No solid background on wrapper, relying on child cards */
}

/* LEFT SIDE: INFO & SOCIAL */
.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 40px;
    background: var(--lw-panel-bg);
    backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate);
    -webkit-backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate);
    border: 1px solid var(--lw-border);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}

.contact-info:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.contact-info h3 {
    font-size: 2.2rem;
    /* USER FIX: Smaller, Elegant Title (Was 3.2rem) */
    font-weight: 400;
    /* USER FIX: Normal weight */
    margin-bottom: 30px;
    background: linear-gradient(135deg, #fff 0%, #aaa 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
    /* USER FIX: More breathing room */
    line-height: 1.2;
    text-align: center;
}

.contact-details {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Spacing between items */
}

.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 0.9rem;
    /* USER FIX: Even Smaller Font (Was 0.95rem) */
    color: #ddd;
    font-weight: 300;
}

.info-item span {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    /* Soft Square */
    font-size: 1.3rem;
    color: var(--accent-color, cyan);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
}

.info-item:hover span {
    background: var(--accent-color, cyan);
    color: #000;
    box-shadow: 0 0 20px var(--accent-color, cyan);
}

/* SOCIAL SECTION */
.social-section {
    text-align: center;
    margin-top: auto;
}

.social-section h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    margin-bottom: 15px;
}

.social-links {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 100%;
}

.s-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.s-icon:hover {
    transform: translateY(-5px) scale(1.1);
    filter: brightness(1.2);
}

/* BRAND COLORS */
.s-icon.fb {
    background: #1877F2;
    border-color: #1877F2;
}

.s-icon.ins {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: transparent;
}

.s-icon.yt {
    background: #FF0000;
    border-color: #FF0000;
}

.s-icon.pin {
    background: #E60023;
    border-color: #E60023;
}

/* PULSE ANIMATIONS */
@keyframes pulse-green {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

@keyframes pulse-cyan {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.5);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(0, 255, 255, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 255, 0);
    }
}

a.info-item.pulse-cyan-active {
    animation: pulse-cyan 3s infinite;
    border-radius: 8px;
    background: rgba(0, 255, 255, 0.05);
    padding: 10px;
    margin-left: -10px;
}

a.info-item.pulse-green-active {
    animation: pulse-green 3s infinite;
    border-radius: 8px;
    background: rgba(37, 211, 102, 0.05);
    padding: 10px;
    margin-left: -10px;
}

/* RIGHT SIDE: FORM */


/* --- MOBILE OPTIMIZATION (Contact) --- */
@media (max-width: 900px) {
    .contact-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        width: 92% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .contact-info {
        width: 100% !important;
        max-width: none !important;
        padding: 25px 20px;
        /* Reduced mobile padding */
    }

    #contact h2.section-title {
        font-size: 2.5rem;
        margin-bottom: 30px;
    }

    .contact-info h3,
    .contact-form-container h3 {
        font-size: 1.8rem;
    }
}



/* RESPONSIVE */
@media (max-width: 900px) {
    .contact-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
        width: 92% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .contact-info {
        padding: 40px;
    }
}


/* --- PRODUCT GRID & CARDS (RESTORED) --- */

.product-layout-container {
    display: flex;
    /* height: 100%; REMOVED for Unified Scroll */
    /* overflow: hidden; REMOVED */
    position: relative;
    padding-top: 80px;
    align-items: flex-start;
    /* Required for Sticky Sidebar */
    gap: 0;
}

/* SIDEBAR */
.category-sidebar {
    width: 320px;
    box-sizing: border-box;
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px 20px 40px;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    border-radius: 0 0 16px 0;
}

.sidebar-section {
    margin-bottom: 25px;
}

.sidebar-section h3,
.cat-group h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color, #00ffff);
    margin-bottom: 12px;
    padding-left: 10px;
    position: relative;
}

.sidebar-section h3::before,
.cat-group h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
}

/* SEARCH & FILTER */
.search-bar-row {
    display: flex;
    gap: 8px;
    height: 40px;
    align-items: center;
    width: 100%;
}

.search-box-container {
    flex: 3;
    position: relative;
    height: 100%;
}

.search-box-container input {
    width: 100%;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0 12px;
    color: #fff;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    /* CRITICAL FIX */
    transition: all 0.3s;
}

.browse-all-btn {
    flex: 1.5;
    height: 100%;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.2);
    color: var(--accent-color, #00ffff);
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-sizing: border-box;
}


.browse-all-btn:hover {
    background: var(--accent-color, #00ffff);
    color: #000;
}

.search-box-container input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color, #00ffff);
}

/* SEARCH SUGGESTIONS DROPDOWN */
.suggestions-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 250%;
    /* Wider than input for readability */
    max-height: 300px;
    overflow-y: auto;
    background: var(--lw-panel-bg);
    backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate);
    -webkit-backdrop-filter: var(--lw-glass-blur) var(--lw-glass-saturate);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    display: none;
    /* Controlled by JS */
}

.suggestion-item {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: rgba(0, 255, 255, 0.1);
}

.suggestion-item .s-name {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}

.suggestion-item .s-cat {
    color: var(--accent-color, #00ffff);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.sort-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sort-group label {
    font-size: 0.8rem;
    color: #888;
}

.sort-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    padding: 8px 12px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s;
}

.sort-btn.active,
.sort-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.sort-btn.active {
    border-color: var(--accent-color, #00ffff);
    color: var(--accent-color, #00ffff);
}

/* MENU LINKS */
.cat-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cat-group li {
    padding: 6px 10px;
    /* FIX: More Compact Padding */
    border-radius: 6px;
    /* Rounded pill shape */
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ffffff;
    /* FIX: Brighter Sidebar Text */
    font-size: 0.88rem;
    /* Slightly smaller for compression */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1px;
    /* FIX: Minimal Margin */
}

.cat-group li:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    transform: translateX(5px);
}

.cat-group li.active {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.1), transparent);
    color: var(--accent-color, #00ffff);
    border-left: 3px solid var(--accent-color, #00ffff);
    font-weight: 500;
}

.cat-count {
    font-size: 0.8rem;
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}



/* LIGHT MODE BACKGROUND (User Request) */
body.light-mode #product-container {
    background-color: #f0f0f0 !important;
    background-image: url('../images/autumn_shadow.webp') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}


/* MAIN AREA */
.product-main-area {
    flex: 1;
    /* overflow-y: auto; REMOVED for Unified Scroll */
    padding: 10px 40px;
    /* USER REQUEST: Minimized Top Padding */
    padding-bottom: 50px;
    /* Reduced padding since parent handles it */
    position: relative;
    /* Hide scrollbar for cleaner look, valid in webkit */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

#product-category-title {
    font-size: 2rem;
    /* Compact Title */
    font-weight: 300;
    margin-top: 0;
    /* FIX: Kill default margin */
    margin-bottom: 15px;
    /* FIX: Tighter gap */
    color: #fff;
    /* Default for Dark Mode */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    /* FIX: Tighter underline */
    line-height: 1.2;
}

body.light-mode #product-category-title {
    color: #333 !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}


/* GRID */
/* GRID (Responsive 4-3-2-1) */
.product-grid {
    display: grid;
    /* Default: 4 Columns (Desktop) */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    /* Reduced Gap */
    width: 100%;
}

@media (max-width: 1400px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 950px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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


/* --- PRODUCT CARD STYLES (CRITICAL) --- */
.product-card {
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtle Border */
    border-radius: 12px;
    /* Slightly smaller radius */
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    opacity: 0;
    animation: fadeCard 0.6s ease forwards;

    /* Removed Global aspect-ratio to prevent desktop overlap */
    display: flex;
    flex-direction: column;
}

/* Restrict Golden Ratio to Mobile only */
@media (max-width: 768px) {
    .product-card {
        aspect-ratio: 0.618 !important;
    }
}

@keyframes fadeCard {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(30, 30, 40, 0.9);
}

/* Image Container (Modern 1:1 Symmetry) */
.card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    overflow: hidden;
    background: #000;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card:hover .card-image img {
    transform: scale(1.08);
    /* Zoom effect */
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    opacity: 0.3;
    transition: opacity 0.3s;
}

.product-card:hover .card-overlay {
    opacity: 0.1;
}

/* Badge - Synced with CCT Fill */
.badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    background: var(--accent-color);
    color: #000;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


/* Info Area (Remaining 38.2%) */
.card-info {
    height: 38.2%;
    padding: 15px 18px;
    /* Compact Padding */
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: space-between;
    /* Distribute vertically */
}

/* Group Name & Desc for flow */
.card-info-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-info h3 {
    margin: 0;
    font-size: 1.1rem;
    /* Smaller Title */
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
}

.desc {
    font-size: 0.8rem;
    /* Smaller Desc */
    color: #d0d0d0;
    /* FIX: Brighter Desc */
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Specs Strip */
.specs {
    display: flex;
    gap: 12px;
    margin-top: auto;
    /* Push to bottom */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* Fainter line */
    padding-top: 10px;
}

.specs span {
    font-size: 0.75rem;
    /* Smaller Specs */
    color: #ffffff;
    /* FIX: Brighter Specs */
    display: flex;
    align-items: center;
    gap: 4px;
}

.icon {
    /* Smaller Icons */
    font-size: 0.8em;
    color: var(--accent-color, cyan);
    font-style: normal;
}


/* --- LIGHT MODE OVERRIDES (PRODUCT CARDS) - PROJECT CARD DESIGN --- */
body.light-mode .product-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(214, 126, 46, 0.15);
    box-shadow: 0 8px 20px rgba(93, 64, 55, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

body.light-mode .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(93, 64, 55, 0.2),
        0 10px 30px rgba(93, 64, 55, 0.15);
    border-color: #d67e2e;
    background: rgba(255, 255, 255, 0.98);
}

/* Light Mode: Card Image - Warm Ivory Background */
body.light-mode .card-image {
    background-color: rgba(255, 250, 245, 0.98) !important;
}

/* Light Mode: Card Overlay - Soft Gradient */
body.light-mode .card-overlay {
    background: linear-gradient(to top,
            rgba(255, 250, 245, 0.85) 0%,
            rgba(255, 250, 245, 0.6) 30%,
            rgba(255, 250, 245, 0.3) 60%,
            transparent 100%);
    opacity: 0.6;
}

body.light-mode .product-card:hover .card-overlay {
    opacity: 0.3;
}

/* Light Mode: Card Info - Glass Effect */
body.light-mode .card-info {
    background: linear-gradient(to top,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.85) 50%,
            rgba(255, 255, 255, 0.75) 100%);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(214, 126, 46, 0.15);
}

body.light-mode .card-info h3 {
    color: #1A1A1A;
}

body.light-mode .desc {
    color: #4A4A4A;
}

body.light-mode .specs {
    border-top-color: rgba(214, 126, 46, 0.12);
}

body.light-mode .specs span {
    color: #5d4037;
}

body.light-mode .badge {
    background: linear-gradient(135deg,
            rgba(214, 126, 46, 0.2) 0%,
            rgba(214, 126, 46, 0.12) 100%);
    color: #d67e2e;
    border: 1px solid rgba(214, 126, 46, 0.35);
    box-shadow: 0 2px 8px rgba(214, 126, 46, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    font-weight: 600;
}

body.light-mode .category-sidebar {
    background: rgba(255, 255, 255, 0.85);
    /* Light glass sidebar */
    border-right-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .cat-group li {
    color: #555;
}

body.light-mode .cat-group li:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
}

body.light-mode #product-category-title {
    color: #111;
    border-bottom-color: #eee;
}



/* PAGINATION */
.pagination-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
    padding-bottom: 40px;
}

.pagination-wrapper {
    display: flex;
    gap: 10px;
}

.page-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.page-btn:hover:not(.disabled) {
    background: var(--accent-color, cyan);
    color: #000;
    border-color: var(--accent-color, cyan);
}

.page-btn.active {
    background: #fff;
    color: #000;
    font-weight: bold;
}

.page-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}


/* --- PRODUCT MODAL (RESTORED & FIXED) --- */
.product-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    /* USER REQUEST: 100% Transparent */
    backdrop-filter: none;
    /* No blur on background */
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-modal-overlay.open {
    opacity: 1;
}

.product-modal-content {
    width: 90%;
    max-width: 1200px;
    height: 85vh;
    /* 修改为不透明背景，确保文字清晰 */
    background: rgba(40, 45, 60, 0.98);
    backdrop-filter: var(--lw-glass-blur);
    -webkit-backdrop-filter: var(--lw-glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    display: flex;
    /* FLEX LAYOUT */
    overflow: hidden;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-modal-overlay.open .product-modal-content {
    transform: scale(1);
}

/* LEFT: MEDIA SECTION */
.modal-media-section {
    flex: 1.5;
    /* Takes 60% approx */
    background: transparent;
    /* USER REQUEST: No Black Void */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    /* Separator */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-carousel {
    width: 100%;
    height: 100%;
}

.media-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    /* USER REQUEST: Glass Feel */
    /* Ensure black bars for contain */
}

.media-slide img,
.media-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* FIX: Prevent cropping */
}

/* RIGHT: INFO SECTION */
.modal-info-section {
    flex: 1;
    /* Takes 40% approx */
    padding: 35px 30px 60px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.01);
    position: relative;
}

/* Typography & Elements */
/* Info Area: Categories/Tags */
.modal-meta-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.modal-badge {
    display: inline-block;
    background: transparent;
    color: #00e5ff;
    padding: 4px 16px;
    border-radius: 2px;
    /* Rectangle shape */
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid #00e5ff;
    font-weight: 600;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

.modal-pos-indicator {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.2);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    font-weight: 500;
}

.modal-footer-paging {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    width: 100%;
}

.modal-header-group h2 {
    font-size: 1.8rem;
    margin: 0 0 12px;
    line-height: 1.2;
    color: #fff;
    font-weight: 500;
}

.modal-desc {
    font-size: 0.95rem;
    color: #999;
    line-height: 1.6;
    margin-bottom: 20px;
}

.modal-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px 24px;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.02);
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.spec-item {
    display: flex;
    flex-direction: column;
}

.spec-label {
    font-size: 0.65rem;
    /* Smaller label */
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.spec-value {
    font-size: 1.0rem;
    /* Smaller value */
    color: #ddd;
    font-family: 'Courier New', monospace;
    /* Tech feel */
    font-weight: 600;
}

/* Controls */
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: #fff;
    color: #000;
    transform: rotate(90deg);
}

.modal-actions-row {
    display: flex;
    gap: 12px;
    margin-top: auto;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
}

.modal-cta {
    width: 90px;
    height: 28px;
    background: var(--accent-color, cyan);
    color: #000;
    border: none;
    border-radius: 14px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.modal-cta:hover {
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
}

.prod-nav {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.prod-nav:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: transparent;
    /* Minimize visual noise: No background */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    /* No border */
    border-radius: 50%;
    color: #00e5ff;
    /* Cyan Arrow */
    font-size: 2rem;
    /* Larger icon for focus */
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    /* Cyan Glow */
    box-shadow: none;
}

.carousel-nav:hover {
    background: rgba(0, 229, 255, 0.1);
    /* Subtle Cyan Hint */
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.8);
    transform: translateY(-50%) scale(1.1);
}

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

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

.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}

.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* Video Controls */
.cct-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-media-container:hover .cct-video-controls {
    opacity: 1;
}

.cct-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    border-radius: 2px;
    overflow: hidden;
}

.cct-progress-fill {
    height: 100%;
    background: var(--accent-color, cyan);
    width: 0%;
    transition: width 0.1s linear;
}

.video-pre-roll {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.5s;
}

.video-pre-roll p {
    font-size: 1.5rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    animation: pulse-text 2s infinite;
}

@keyframes pulse-text {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* ===== MOBILE FIX: 移动端产品Modal上下布局 ===== */
@media (max-width: 768px) {
    .product-modal-content {
        flex-direction: column !important;
        /* 改为上下布局 */
        height: auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* 媒体区域：图片/视频在上方 */
    .modal-media-section {
        flex: none !important;
        width: 100% !important;
        height: 50vh !important;
        /* 固定高度 */
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* 信息区域：参数在下方 */
    .modal-info-section {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px 0 !important;
        /* 移动端:上下20px,左右0 - 让按钮自然居中 */
        overflow-y: visible !important;
    }

    /* 为文字内容添加左右边距 */
    .modal-header-group,
    .modal-tags,
    .modal-desc,
    .modal-specs {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 缩小标题 */
    .modal-header-group h2 {
        font-size: 1.6rem !important;
    }

    /* 缩小规格区域 */
    .modal-specs {
        grid-template-columns: repeat(2, 1fr) !important;
        /* 移动端2列 */
        gap: 8px 12px !important;
        padding: 12px !important;
    }

    .spec-label {
        font-size: 0.6rem !important;
    }

    .spec-value {
        font-size: 0.9rem !important;
    }

    /* 按钮区域 - 自然居中对齐 */
    .modal-actions-row {
        gap: 8px !important;
        /* 减小按钮间距 */
        justify-content: center !important;
        /* 居中对齐 */
        align-items: center !important;
        padding: 5px 10px !important;
        /* 上下5px,左右10px保持边距 */
    }


    /* 压缩主按钮宽度,减小高度 */
    .modal-cta {
        height: 42px !important;
        /* 从44px再减小到42px */
        font-size: 0.85rem !important;
        /* 减小字体 */
        padding: 0 20px !important;
        flex: none !important;
        /* 取消flex:1自动拉伸 */
        max-width: 180px !important;
        /* 从200px减小到180px */
        min-width: 160px !important;
    }

    /* 增大左右导航按钮 */
    .prod-nav {
        width: 48px !important;
        /* 从44px增大到48px */
        height: 48px !important;
        font-size: 1.3rem !important;
        /* 增大箭头图标 */
        flex-shrink: 0 !important;
        /* 防止被压缩 */
    }

    /* 关闭按钮位置调整 */
    .modal-close {
        top: 10px !important;
        right: 10px !important;
        width: 36px !important;
        height: 36px !important;
    }
}


/* --- AUDIO ONBOARDING MODAL (PREMIUM GLASS) --- */
.lw-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    /* USER REQUEST: Fully transparent - no overlay blocking view */
    backdrop-filter: none;
    z-index: 999999;
    /* HIGHEST PRIORITY - Above everything including log modal */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fadeInModal 0.6s ease forwards;
}

@keyframes fadeInModal {
    to {
        opacity: 1;
    }
}

/* Sound modal specific styles - ensure it's a small centered card */
.lw-modal-backdrop .lw-modal-content {
    /* USER REQUEST: Small centered card, not fullscreen */
    background: rgba(40, 45, 60, 0.55);
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    max-width: 550px !important;
    width: 90% !important;
    height: auto !important;
    transform: translateY(20px);
    animation: floatUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.lw-modal-content {
    /* USER REQUEST: Small centered card, not fullscreen */
    background: rgba(40, 45, 60, 0.55);
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    max-width: 550px;
    width: 90%;
    transform: translateY(20px);
    animation: floatUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes floatUp {
    to {
        transform: translateY(0);
    }
}

.lw-modal-content h3 {
    font-size: 2.4rem;
    /* USER REQUEST: Bigger Text */
    color: #fff;
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: -1px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.lw-modal-content p {
    font-size: 1.1rem;
    color: #eee;
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 300;
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Premium Primary Button (Neon) */
.lw-btn-primary {
    background: linear-gradient(135deg, var(--accent-color, cyan), #00bfff);
    border: none;
    color: #000;
    padding: 12px 28px;
    /* USER REQUEST: Smaller Buttons */
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lw-btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.6);
    filter: brightness(1.1);
}

/* Ghost Button (Secondary) */
.lw-btn-text {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.lw-btn-text:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* --- NEW PROJECTS GALLERY (Horizontal Scroll) --- */
.projects-gallery-container {
    width: 100%;
    height: 70vh;
    /* Occupy good vertical space */
    position: relative;
    overflow: hidden;
    margin-top: 40px;
    /* Masking for fade edges */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.projects-track {
    display: flex;
    gap: 40px;
    padding: 0 5vw;
    /* Center start */
    overflow-x: auto;
    scroll-behavior: smooth;
    height: 100%;
    align-items: center;
    scrollbar-width: none;
    /* Firefox hide */
}

.projects-track::-webkit-scrollbar {
    display: none;
    /* Chrome hide */
}

.project-slide {
    flex: 0 0 600px;
    /* Base width */
    height: 90%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.project-slide:hover {
    flex: 0 0 700px;
    /* Expand width on hover */
    transform: scale(1.02);
    border-color: var(--accent-color, cyan);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(var(--cct-raw), 0.2);
    z-index: 10;
}

.proj-media {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.proj-media video,
.proj-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.5s ease;
}

.project-slide:hover .proj-media video,
.project-slide:hover .proj-media img {
    opacity: 1;
    /* Brighten on hover */
}

/* Info Overlay */
.proj-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    transform: translateY(20px);
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.project-slide:hover .proj-info {
    transform: translateY(0);
}

.proj-cat {
    font-size: 0.8rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s 0.1s;
}

.project-slide:hover .proj-cat {
    opacity: 1;
    transform: translateY(0);
}

.proj-info h3 {
    font-size: 2.5rem;
    margin: 0 0 10px 0;
    line-height: 1;
}

.proj-info p {
    color: #ccc;
    font-size: 1rem;
    max-width: 80%;
    margin-bottom: 20px;
    opacity: 0.8;
}

.proj-btn {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s 0.2s;
}

.proj-btn:hover {
    background: #fff;
    color: #000;
}

.project-slide:hover .proj-btn {
    opacity: 1;
    transform: translateY(0);
}

/* --- PRODUCT DUAL-PANE SCROLL ARCHITECTURE (FORCE FIX) --- */
.product-dual-pane {
    display: flex !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
}

.product-dual-pane .product-layout-container {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.product-dual-pane .category-sidebar {
    height: 100% !important;
    position: relative !important;
    top: 0 !important;
    overflow-y: auto !important;
    padding-top: 110px !important;
    padding-bottom: 200px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    flex-shrink: 0 !important;
    scrollbar-width: none !important;
    /* Firefox */
}

.product-dual-pane .category-sidebar::-webkit-scrollbar {
    display: none !important;
    /* Chrome/Safari/Edge */
}

.product-dual-pane .product-main-area {
    flex: 1 !important;
    height: 100% !important;
    overflow-y: auto !important;
    /* V45_FIX: Reduced excessive 300px padding to 60px */
    padding: 110px 4% 60px !important;
    scrollbar-width: none !important;
    /* Firefox */
    box-sizing: border-box !important;
}

/* Hide scrollbars for internal containers while keeping functionality */
.product-main-area::-webkit-scrollbar {
    display: none !important;
}

.product-main-area .product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 0 40px 0 !important;
}

/* --- VALUES SECTION (Premium Glass) --- */
#values-section {
    position: relative;
    /* Deep Radial Gradient to replace Video */
    background: radial-gradient(circle at center, #1a1f2e 0%, #0d1117 100%);
    /* overflow: hidden; REMOVED to allow natural scroll on mobile */
}

@media (min-width: 901px) {
    #values-section {
        overflow: hidden;
        /* Only lock on desktop */
    }
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.value-card {
    /* Subtle Gradient for Depth instead of Flat Color */
    background: linear-gradient(160deg, rgba(30, 35, 45, 0.7) 0%, rgba(10, 15, 20, 0.8) 100%);
    backdrop-filter: var(--lw-glass-blur);
    -webkit-backdrop-filter: var(--lw-glass-blur);
    /* Refined Glass Border */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 60px 35px;
    /* Increased Padding */
    text-align: center;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.45) !important;
    /* V7.7: High-end edge */
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
    /* V7.7: Glass depth */
}

/* V7.7: Architectural Index */
.v-number {
    position: absolute;
    top: 25px;
    right: 30px;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 2px;
    opacity: 0.3;
    font-family: 'Inter', sans-serif;
    transition: all 0.5s;
    z-index: 2;
}

.value-card:hover .v-number {
    opacity: 0.9;
    transform: translateY(-2px);
}

.value-card:hover {
    transform: translateY(-15px);
    /* Cyan Quartz Glow Effect */
    background: rgba(0, 20, 30, 0.75);
    /* Deep Cyan-Black Glass */
    border-color: #00ffff;
    /* Pure Cyan Border */
    /* Complex Glow: Deep Shadow + Outer Neon + Inner Crystal Shine */
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(0, 255, 255, 0.2),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
}

.v-icon-box {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.v-icon {
    font-size: 2.8rem;
    /* Default Fallback (Cyan) */
    background: linear-gradient(135deg, #fff 0%, var(--accent-color, cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.4));
    transition: all 0.5s ease;
    min-width: 50px;
    text-align: center;
    display: inline-block;
}

/* Icon 1: Innovation (Cyan/Blue) */
.value-card:nth-of-type(1) .v-icon {
    background: linear-gradient(135deg, #e0faff 0%, #00ffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.6));
}

/* Icon 2: Sustainability (Green) */
.value-card:nth-of-type(2) .v-icon {
    background: linear-gradient(135deg, #e0ffe0 0%, #4ade80 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.6));
}

/* Icon 3: Human Centric (Orange/Warm) */
.value-card:nth-of-type(3) .v-icon {
    background: linear-gradient(135deg, #fff8e0 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6));
}

.value-card:hover .v-icon {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 0 25px rgba(var(--cct-raw), 0.8));
}

/* V7.3: Unified Glow Management */
.value-card:nth-of-type(1) .v-glow {
    background: var(--accent-color, cyan);
}

.value-card:nth-of-type(2) .v-glow {
    background: var(--lw-accent-green, #4ade80);
}

.value-card:nth-of-type(3) .v-glow {
    background: var(--lw-accent-orange, #fbbf24);
}

.v-glow {
    position: absolute;
    inset: 10%;
    filter: blur(60px);
    /* V7.7: More atmospheric blur */
    opacity: 0.12;
    /* V7.7: Softer aura */
    border-radius: 50%;
    z-index: -1;
    transition: all 0.5s;
}

@keyframes iconFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

.value-card .v-icon-box {
    animation: iconFloat 4s ease-in-out infinite;
}

.value-card:hover .v-glow {
    opacity: 0.6;
    transform: scale(1.4);
    inset: -5%;
}

.value-card h3 {
    font-family: 'Outfit', sans-serif;
    /* Use Outfit for headings if available, else fallback */
    font-size: 2rem;
    /* Larger Title */
    color: #fff;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    /* Tech Feel */
    text-transform: uppercase;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background: linear-gradient(to right, #fff, #b0b0b0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.value-card p {
    color: #e0e0e0;
    /* Brighter White-Grey */
    line-height: 1.8;
    /* More breathing room */
    font-size: 1.05rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    max-width: 90%;
    margin: 0 auto;
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 1000px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns for Tablet */
        gap: 25px;
    }

    .value-card {
        padding: 40px 25px;
    }
}

@media (max-width: 600px) {
    #values-section {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
        min-height: 100vh;
        /* Consolidated Layout Logic - No Force Patches */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .values-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        /* V7.7.1: Expand fill */
        padding: 0 15px !important;
    }

    /* V7.7.1: Architectural Screen-Fill Balance */
    .value-card {
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 40px 25px !important;
        /* V7.7.1: Restore fullness */
        box-sizing: border-box !important;
        border-radius: 16px !important;
    }

    .value-card .v-icon-box {
        width: 55px !important;
        height: 55px !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        /* V7.7.1: Gap fix */
    }

    .value-card h3 {
        font-size: 1.3rem !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
        letter-spacing: 1px !important;
    }

    .value-card p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        opacity: 0.85 !important;
        margin: 0 !important;
    }

    .value-card .v-icon {
        font-size: 2.0rem !important;
    }

    #values-section .section-title {
        font-size: 2.1rem !important;
        font-weight: 300 !important;
        /* V7.7: Cinematic mix */
        letter-spacing: 4px !important;
        margin-bottom: 45px !important;
        /* V7.7.1: Push content down */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    #values-section .section-title::before {
        content: '';
        width: 35px;
        height: 1.5px;
        background: var(--accent-linear);
        opacity: 0.7;
        margin-bottom: 5px;
        border-radius: 2px;
    }

    /* V7.7: Mobile Index positioning */
    .v-number {
        top: 20px !important;
        right: 25px !important;
        font-size: 0.75rem !important;
        opacity: 0.4 !important;
    }
}

/* --- ABOUT SECTION (Cinematic Layout) --- */
/* === ABOUT SECTION (Cinematic Layout) === */
#about-section {
    padding-top: 180px !important;
    padding-bottom: 80px !important;
}

.about-container {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    max-width: 1500px;
    margin: 0 auto;
    align-items: center;
}

.video-frame {
    position: relative;
    width: 100%;
    max-width: 1000px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(0, 255, 255, 0.15),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    /* CINEMATIC PRESENCE: Optimized for height and prominence */
    aspect-ratio: 16/9 !important;
    border: 1px solid rgba(0, 255, 255, 0.3);
    transition: all 0.5s ease;
}

/* ... existing video-frame:hover ... */

/* ... (Omitted frame-corner styles) ... */

/* Right Column Wrapper */
/* Right Column Wrapper */
.about-right-col {
    display: flex;
    flex-direction: column;
    gap: 50px !important;
    /* Increased from 30px (User: "Down more") */
    justify-content: center;
    align-items: center;
    /* Center children */
}

/* Founder Quote Box - Centered Editorial Style */
.founder-quote-box {
    padding: 20px;
    /* Removed Border Left */
    border-left: none !important;
    border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
    /* Top Accent */
    margin-top: 20px !important;
    /* Added breath */
    opacity: 0.95;
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 90%;
    /* Wider width */
    /* Don't span full width */
}

/* ... existing hover ... */

.quote-text {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.5rem;
    /* Enlarge (User: "Bigger") */
    color: #ddd;
    /* Dark Mode Default */
    line-height: 1.5;
    margin-bottom: 30px;
    max-width: 100%;
}

/* ... existing sig row ... */

/* === LIGHT MODE OVERRIDES FOR QUOTE === */
body.light-mode .video-frame {
    box-shadow:
        0 30px 60px rgba(93, 64, 55, 0.3),
        0 0 30px rgba(214, 126, 46, 0.2);
    border: 1px solid rgba(214, 126, 46, 0.3);
    background: rgba(255, 255, 255, 0.3);
}

body.light-mode .founder-quote-box {
    border-left: 4px solid rgba(214, 126, 46, 0.3) !important;
    /* Warm border */
}

body.light-mode .founder-quote-box:hover {
    border-left-color: #d67e2e !important;
}

body.light-mode .quote-text {
    color: #4A4A4A !important;
    /* Readable dark grey */
    font-weight: 600 !important;
    /* Thicker weight */
    text-shadow: none !important;
    /* Remove any lingering shadow */
}

body.light-mode .founder-sig {
    color: #d67e2e !important;
    /* Warm signature */
    font-weight: 600;
}

body.light-mode .sig-line {
    background: #bbb !important;
}

.video-frame:hover {
    border-color: #00ffff;
    box-shadow:
        0 50px 120px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(0, 255, 255, 0.2);
    transform: scale(1.02);
}

.frame-corner {
    position: absolute;
    width: 20px;
    /* Smaller */
    height: 20px;
    border: 2px solid #00ffff;
    /* Thinner, Pure Cyan */
    z-index: 2;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    /* Glowing */
    opacity: 0.8;
}

.corn-TL {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
}

.corn-BR {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
}

/* Right Column Wrapper */
.about-right-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Space between video and quote */
}

/* Founder Quote Box - Minimalist Magazine Style */
.founder-quote-box {
    padding-left: 20px;
    /* Slight indent alignment */
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-top: 10px;
    opacity: 0.8;
    transition: all 0.5s ease;
}

.founder-quote-box:hover {
    opacity: 1;
    border-left-color: var(--accent-color, cyan);
}

.quote-text {
    font-family: 'Georgia', serif;
    /* Classic contrast to geometric sans */
    font-style: italic;
    font-size: 1.1rem;
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 400px;
}

.quote-sig-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sig-line {
    width: 30px;
    height: 1px;
    background: #666;
}

.founder-sig {
    font-family: 'Brush Script MT', 'Bradley Hand', cursive;
    font-size: 2.2rem;
    /* Enlarge Signature (User: "Big") */
    color: var(--accent-color, cyan);
    letter-spacing: 1px;
    transform: rotate(-3deg);
}


.about-text .section-title {
    text-align: left;
    margin-bottom: 25px;
    /* Compacted from 40px */
    font-size: 3.8rem;
    /* Compacted from 5rem */
    font-weight: 200;
    letter-spacing: 4px;
    /* Slightly tighter */
    line-height: 1;
    background: linear-gradient(to right, #fff 30%, #aaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    padding-top: 15px;
    /* Compacted */
    padding-left: 50px;
}

/* Magazine Eyebrow Tag */
.about-text .section-title::before {
    content: "/// INSPECT THE VISION";
    position: absolute;
    top: -5px;
    /* Tighter */
    left: 52px;
    font-size: 0.75rem;
    /* Smaller */
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--accent-color, cyan);
    -webkit-text-fill-color: var(--accent-color, cyan);
    opacity: 0.8;
}

.about-text .lead {
    font-size: 1.6rem;
    /* Compacted from 2.2rem */
    color: #fff;
    margin-bottom: 30px;
    /* Compacted */
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.5px;
    border-left: 1px solid #00ffff;
    padding-left: 30px;
}

.about-text p {
    font-size: 1.05rem;
    /* Slight reduction */
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 25px;
    font-weight: 300;
    letter-spacing: 0.5px;
    max-width: 95%;
    /* Wider line length */
}

.stats-row {
    display: flex;
    gap: 40px;
    /* Compacted from 60px */
    margin-bottom: 20px;
    /* Compacted from 50px */
    margin-top: 10px;
    /* Compacted */
    position: relative;
    padding-bottom: 15px;
    /* Compacted */
    padding-left: 50px;
}

/* Structural Divider Line */
.stats-row::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50px;
    /* Match indent */
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, #00ffff, transparent);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 4.5rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(135deg, #fff 0%, #00ffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
    line-height: 0.9;
    letter-spacing: -2px;
}

.stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    /* Wide tracking for labels */
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    margin-top: 10px;
}

/* --- SECTION BACKGROUND VIDEO --- */
.section-bg-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.content-relative {
    position: relative;
    z-index: 2;
}

@media (max-width: 1000px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .video-frame {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 600px) {
    #about-section {
        padding-top: 85px !important;
        /* V8.4: Increased to prevent eyebrow text overlap */
        padding-bottom: 30px !important;
        /* V8.4: Further compressed */
        height: auto;
        /* Ensure natural height */
    }

    /* V8.2: Force-kill legacy 120px padding from Screenshot 2 */
    .about-text {
        padding-bottom: 0px !important;
    }

    #about-section .about-container {
        gap: 30px !important;
        /* V8.2: Compressed from base gaps */
        padding-bottom: 0px !important;
        text-align: center !important;
        /* V8.2: Kill internal padding */
    }

    .about-right-col {
        gap: 20px !important;
        /* V8.2: Tighten video-to-quote gap */
    }

    #about-section .about-text .section-title {
        font-size: 2.22rem !important;
        padding-left: 0 !important;
        /* V8.3: Purged indent for centering */
        text-align: center !important;
        /* V8.3: Centered */
        letter-spacing: 2px !important;
        margin-bottom: 12px !important;
        /* V8.4: Tightened from desktop 25px */
    }

    #about-section .about-text .section-title::before {
        left: 50% !important;
        /* V8.3: Centered */
        transform: translateX(-50%) !important;
        white-space: nowrap;
        font-size: 0.65rem !important;
        letter-spacing: 2px !important;
    }

    #about-section .stats-row {
        flex-direction: row !important;
        /* Keep horizontal but small */
        justify-content: center !important;
        /* V8.3: Centered */
        gap: 20px !important;
        padding-left: 0 !important;
        /* V8.3: Purged indent */
        margin-bottom: 10px !important;
        /* V8.4: Tightened from 20px */
    }

    #about-section .stats-row::after {
        left: 50% !important;
        /* V8.4: Centered divider */
        /* V8.3: Centered divider */
        transform: translateX(-50%) !important;
    }

    .stat-num {
        font-size: 2.5rem !important;
        /* Prevent overflow */
        letter-spacing: -1px !important;
    }

    .stat-label {
        font-size: 0.7rem !important;
        letter-spacing: 2px !important;
    }

    #about-section .about-text .lead {
        font-size: 1.15rem !important;
        /* V8.4: Slightly smaller for density */
        /* V8.2: Slightly smaller */
        padding-left: 0 !important;
        /* V8.3: Purged indent */
        text-align: center !important;
        /* V8.3: Centered */
        border-left: none !important;
        /* V8.5: Force remove orange border in Light Mode */
        /* V8.3: Symmetry */
        margin-bottom: 8px !important;
        /* V8.4: Tightened from 15px */
        font-weight: 500 !important;
        /* V8.6: Boost weight for legibility */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
        /* V8.6: Background separation */
    }

    #about-section .about-text p {
        font-size: 0.92rem !important;
        /* V8.4: Slightly smaller */
        /* V8.2: Slightly smaller */
        padding-left: 0 !important;
        /* V8.3: Purged indent */
        text-align: center !important;
        /* V8.3: Centered */
        line-height: 1.4 !important;
        /* V8.4: Tightened from 1.5 */
        margin-bottom: 8px !important;
        /* V8.4: Tightened from 12px */
        margin-left: auto !important;
        margin-right: auto !important;
        /* V8.2: Tightened from 20px */
        /* Tightened from 25px */
        color: #ffffff !important;
        /* V8.6: Pure white for maximum contrast in Dark Mode */
        font-weight: 450 !important;
        /* V8.6: Thicker weight for sharpness */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
        /* V8.6: Pop from background stars */
    }
}


/* --- NUCLEAR OVERRIDES (FORCE FIX) --- */
/* User reported changes not taking effect. forcing specifics */
#sound-prompt-modal .lw-modal-content {
    background: rgba(40, 45, 60, 0.55) !important;
    backdrop-filter: blur(60px) !important;
    padding: 60px 40px !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8) !important;
}

#sound-prompt-modal h3 {
    font-size: 2.4rem !important;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}

#btn-enable-sound {
    padding: 12px 28px !important;
    font-size: 0.95rem !important;
}

#btn-keep-silent {
    padding: 12px 24px !important;
    font-size: 0.9rem !important;
}

.lw-btn-text:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* ====================================







/* === FIX: CONTACT FORM INPUT OVERFLOW === */
/* Compel inputs to stay within container independent of padding */
.lw-input,
.lw-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* === USER FIX: CONTACT HEADER GAP === */
/* Reduce top padding for Contact section to match others */
#contact {
    padding-top: 80px !important;
    /* Reduced from potential default */
}

@media (max-width: 900px) {
    #contact {
        height: auto;
        min-height: 100vh;
        display: block !important;
        /* Ensure block flow for scrolling */
    }
}

/* Ensure title doesn't have excess top margin */
#contact .section-title {
    margin-top: 0 !important;
}



/* === INQUIRY MODAL STYLES === */
/* === INQUIRY MODAL STYLES (Redesigned v2) === */
.inquiry-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 200000;
    /* SUPER HIGH to fix mobile overlap */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    /* Ensure it's truly gone from interaction/flow */
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Hide visibility AFTER opacity fades */
    padding: 0px;
    /* Safe padding for mobile */
}

.inquiry-modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    cursor: auto;
    /* Restore system cursor over modal */
    transition: opacity 0.3s ease, visibility 0s linear 0s;
    /* Show visibility IMMEDIATELY */
}

.inquiry-modal-content {
    cursor: default;
    /* Ensure cursor is visible inside */
    width: 90%;
    max-width: 550px;
    background: #ffffff;
    /* Clean White */
    border-radius: 20px;
    padding: 0;
    /* Reset padding, structured layout */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Dark Mode Support */
body.dark-mode .inquiry-modal-content {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.inquiry-modal-overlay.open .inquiry-modal-content {
    transform: translateY(0) scale(1);
}

.inquiry-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

.inquiry-close:hover {
    color: #000;
}

body.dark-mode .inquiry-close:hover {
    color: #fff;
}

/* Header */
.inquiry-header {
    background: transparent;
    /* Seamless design */
    padding: 30px 40px 10px 40px;
    /* Reduced bottom padding */
    border-bottom: none;
    /* Remove border for cleaner look */
    text-align: center;
    /* Center align title */
}

/* Mobile Overrides */
@media (max-width: 600px) {
    .inquiry-modal-content {
        padding: 0;
        width: 95%;
        max-height: 85vh;
        /* Prevent overflow on small screens */
        overflow-y: auto;
        /* Scrollable */
    }

    .inquiry-header {
        padding: 25px 20px 5px 20px;
    }

    #inquiry-form {
        padding: 20px 25px 30px 25px;
        /* Adjust form padding */
    }

    .inquiry-subtitle {
        font-size: 0.85rem;
        margin-top: 5px;
    }
}

body.dark-mode .inquiry-header {
    background: transparent;
    border-color: transparent;
}

.inquiry-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: #111;
    font-weight: 700;
    letter-spacing: -0.5px;
}

body.dark-mode .inquiry-header h2 {
    color: #fff;
}

.inquiry-subtitle {
    margin: 8px 0 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

body.dark-mode .inquiry-subtitle {
    color: #aaa;
}

/* Product Summary Snippet */
.inquiry-product-summary {
    background: rgba(var(--accent-rgb, 64, 224, 208), 0.05);
    padding: 15px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally */
    text-align: center;
    /* Center text */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-mode .inquiry-product-summary {
    border-color: #333;
    background: rgba(255, 255, 255, 0.02);
}

.summary-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 8px;
    /* Slightly more space */
}

.summary-details {
    display: flex;
    gap: 10px;
    align-items: center;
    /* Align vertically center */
    justify-content: center;
    /* Center content */
    flex-wrap: wrap;
    /* Allow wrapping on very small screens */
}

.summary-sku {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--accent-color, #333);
}

.summary-name {
    font-weight: 500;
    color: #333;
}

body.dark-mode .summary-name {
    color: #eee;
}


/* Form Layout */
#inquiry-form {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

/* Mobile responsive for rows */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 20px;
    }

    .submit-btn {
        width: 100%;
        /* Full width on mobile */
        padding: 18px;
        /* Taller touch target */
    }
}

/* Floating Label Inputs */
.input-group {
    position: relative;
    flex: 1;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
    color: #333;
    background: transparent;
    border: none;
    border-bottom: 2px solid #eee;
    outline: none;
    transition: border-color 0.3s;
    border-radius: 0;
    /* Remove default radius */
}

body.dark-mode .input-group input,
body.dark-mode .input-group textarea {
    color: #fff;
    border-color: #444;
}


/* === FIX: CONTACT FORM INPUT OVERFLOW === */
/* Compel inputs to stay within container independent of padding */
.lw-input,
.lw-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* === INQUIRY MODAL STYLES === */
/* === INQUIRY MODAL STYLES (Redesigned v2) === */
.inquiry-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 200000;
    /* SUPER HIGH to fix mobile overlap */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    /* Ensure it's truly gone from interaction/flow */
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Hide visibility AFTER opacity fades */
    padding: 0px;
    /* Safe padding for mobile */
}

.inquiry-modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    cursor: auto;
    /* Restore system cursor over modal */
    transition: opacity 0.3s ease, visibility 0s linear 0s;
    /* Show visibility IMMEDIATELY */
}

.inquiry-modal-content {
    cursor: default;
    /* Ensure cursor is visible inside */
    width: 90%;
    max-width: 550px;
    background: #ffffff;
    /* Clean White */
    border-radius: 20px;
    padding: 0;
    /* Reset padding, structured layout */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Dark Mode Support */
body.dark-mode .inquiry-modal-content {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.inquiry-modal-overlay.open .inquiry-modal-content {
    transform: translateY(0) scale(1);
}

.inquiry-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

.inquiry-close:hover {
    color: #000;
}

body.dark-mode .inquiry-close:hover {
    color: #fff;
}

/* Header */
.inquiry-header {
    background: transparent;
    /* Seamless design */
    padding: 30px 40px 10px 40px;
    /* Reduced bottom padding */
    border-bottom: none;
    /* Remove border for cleaner look */
    text-align: center;
    /* Center align title */
}

/* Mobile Overrides */
@media (max-width: 600px) {
    .inquiry-modal-content {
        padding: 0;
        width: 95%;
        max-height: 85vh;
        /* Prevent overflow on small screens */
        overflow-y: auto;
        /* Scrollable */
    }

    .inquiry-header {
        padding: 25px 20px 5px 20px;
    }

    #inquiry-form {
        padding: 20px 25px 30px 25px;
        /* Adjust form padding */
    }

    .inquiry-subtitle {
        font-size: 0.85rem;
        margin-top: 5px;
    }
}

body.dark-mode .inquiry-header {
    background: transparent;
    border-color: transparent;
}

.inquiry-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: #111;
    font-weight: 700;
    letter-spacing: -0.5px;
}

body.dark-mode .inquiry-header h2 {
    color: #fff;
}

.inquiry-subtitle {
    margin: 8px 0 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

body.dark-mode .inquiry-subtitle {
    color: #aaa;
}

/* Product Summary Snippet */
.inquiry-product-summary {
    background: rgba(var(--accent-rgb, 64, 224, 208), 0.05);
    padding: 15px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally */
    text-align: center;
    /* Center text */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-mode .inquiry-product-summary {
    border-color: #333;
    background: rgba(255, 255, 255, 0.02);
}

.summary-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 8px;
    /* Slightly more space */
}

.summary-details {
    display: flex;
    gap: 10px;
    align-items: center;
    /* Align vertically center */
    justify-content: center;
    /* Center content */
    flex-wrap: wrap;
    /* Allow wrapping on very small screens */
}

.summary-sku {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--accent-color, #333);
}

.summary-name {
    font-weight: 500;
    color: #333;
}

body.dark-mode .summary-name {
    color: #eee;
}


/* Form Layout */
#inquiry-form {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

/* Mobile responsive for rows */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 20px;
    }

    .submit-btn {
        width: 100%;
        /* Full width on mobile */
        padding: 18px;
        /* Taller touch target */
    }
}

/* Floating Label Inputs */
.input-group {
    position: relative;
    flex: 1;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
    color: #333;
    background: transparent;
    border: none;
    border-bottom: 2px solid #eee;
    outline: none;
    transition: border-color 0.3s;
    border-radius: 0;
    /* Remove default radius */
}

body.dark-mode .input-group input,
body.dark-mode .input-group textarea {
    color: #fff;
    border-color: #444;
}

.input-group label {
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    color: #999;
    pointer-events: none;
    transition: .3s ease all;
}

.input-group input:focus,
.input-group textarea:focus {
    border-bottom-color: var(--accent-color, #000);
}

/* Floating Label Logic: When placeholder is not shown (content exists) or focused */
.input-group input:focus~label,
.input-group input:not(:placeholder-shown)~label,
.input-group textarea:focus~label,
.input-group textarea:not(:placeholder-shown)~label {
    top: -10px;
    font-size: 12px;
    color: var(--accent-color, #000);
    font-weight: 600;
}

/* Submit Button */
.submit-btn {
    margin-top: 10px;
    padding: 16px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 80px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

body.dark-mode .submit-btn {
    background: #eee;
    color: #000;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.submit-btn:active {
    transform: translateY(0);
}

.inquiry-header h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    color: #111;
    margin-bottom: 10px;
}

.inquiry-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 30px;
}

.product-summary {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f5f5f7;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.prod-thumb {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
}

.prod-details {
    display: flex;
    flex-direction: column;
}

.prod-sku {
    font-size: 0.75rem;
    color: #888;
    font-family: 'Courier New', monospace;
}

.prod-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* Form Styles */
.form-group {
    position: relative;
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-row .form-group {
    flex: 1;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s;
    border-radius: 0;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: #000;
}

.form-group label {
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 1rem;
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease;
}

.form-group input:focus~label,
.form-group input:not(:placeholder-shown)~label,
.form-group textarea:focus~label,
.form-group textarea:not(:placeholder-shown)~label {
    top: -10px;
    font-size: 0.75rem;
    color: #111;
}

.inquiry-submit-btn {
    width: 100%;
    padding: 15px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
}

.inquiry-submit-btn:hover {
    background: #333;
    transform: translateY(-2px);
}

.inquiry-submit-btn.loading .btn-text {
    opacity: 0;
}

.inquiry-submit-btn.loading .btn-loader {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.form-status {
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-align: center;
    min-height: 20px;
}

.form-status.success {
    color: #28a745;
}

.form-status.error {
    color: #dc3545;
}

/* Dark Mode Inquiry Modal */
body:not(.light-mode) .inquiry-modal-content {
    background: #1a1a1a;
    color: #fff;
}

body:not(.light-mode) .inquiry-header h2,
body:not(.light-mode) .prod-name {
    color: #fff;
}

body:not(.light-mode) .inquiry-close {
    color: #fff;
}

body:not(.light-mode) .product-summary {
    background: #252525;
}

body:not(.light-mode) .form-group input,
body:not(.light-mode) .form-group textarea {
    color: #fff;
    border-bottom-color: #444;
}

body:not(.light-mode) .form-group input:focus,
body:not(.light-mode) .form-group textarea:focus {
    border-bottom-color: var(--cct-ui-color, #ffaa00);
}

body:not(.light-mode) .inquiry-submit-btn {
    background: var(--cct-ui-color, #ffaa00);
    color: #000;
}