APEX Flux - Enhance your Atmospere by @Darkness977 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<object>Incorpora risorse varie nella pagina web.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
srcIndica la provenienza di una risorsa esterna (tramite URL).
<td>Definisce una cella di una tabella HTML.
<caption>Definisce didascalie all'interno di una tabella
<hr>Inserisce una linea orizzontale

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

spotify dashboard

Esercitazione 1

HTML, CSS altre cose

Selezione Telefoni

Heads Or Tails Random Tally

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Flux - Shape Your Atmosphere</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>

    <!-- NEW: Soft Main Menu -->
    <nav id="main-menu">
        <div class="menu-logo">APEX</div>
        <ul class="menu-links">
            <li><a href="#art-of-light">Experience</a></li>
            <li><a href="#demo">Interactive</a></li>
            <li><a href="#configurator">Configure</a></li>
            <li><a href="#" class="menu-contact">Contact</a></li>
        </ul>
    </nav>

    <!-- 1. Hero Section with Animated Background -->
    <header id="hero">
        <div class="light-beams"></div>
        <div class="hero-content">
            <h1>APEX Flux</h1>
            <p>Shape Your Atmosphere.</p>
            <a href="#demo" class="cta-button">Experience Light</a>
        </div>
    </header>

    <main>
        <!-- 2. The Art of Light Section -->
        <section id="art-of-light">
            <div class="slider-container">
                <div class="slides">
                    <div class="slide" style="background-image: url('https://picsum.photos/seed/fluxliving/1200/600.jpg');">
                        <div class="slide-text">
                            <h3>For the Living Space</h3>
                            <p>Create moods that move with you.</p>
                        </div>
                    </div>
                    <div class="slide" style="background-image: url('https://picsum.photos/seed/fluxoffice/1200/600.jpg');">
                        <div class="slide-text">
                            <h3>For the Creative Studio</h3>
                            <p>Illuminate your inspiration.</p>
                        </div>
                    </div>
                    <div class="slide" style="background-image: url('https://picsum.photos/seed/fluxgallery/1200/600.jpg');">
                        <div class="slide-text">
                            <h3>For the Gallery</h3>
                            <p>Frame your world in color.</p>
                        </div>
                    </div>
                </div>
                <button class="slider-button prev">&#10094;</button>
                <button class="slider-button next">&#10095;</button>
            </div>
        </section>

        <!-- 3. Interactive Demo Section -->
        <section id="demo">
            <h2>Interactive Light</h2>
            <p>Click the buttons below to control the APEX Flux module in real-time.</p>
            <div class="demo-container">
                <div id="flux-module" class="flux-module-default"></div>
            </div>
            <div class="demo-controls">
                <h3>Color</h3>
                <div class="color-buttons">
                    <button data-color="electric-blue" style="background: linear-gradient(45deg, #00d2ff, #3a7bd5);"></button>
                    <button data-color="sunset-purple" style="background: linear-gradient(45deg, #ff6a00, #ee0979);"></button>
                    <button data-color="aurora-green" style="background: linear-gradient(45deg, #11998e, #38ef7d);"></button>
                    <button data-color="neutral-white" style="background: linear-gradient(45deg, #f5f7fa, #c3cfe2);"></button>
                </div>
                <h3>Animation</h3>
                <div class="animation-buttons">
                    <button id="anim-pulse">Pulse</button>
                    <button id="anim-flow">Flow</button>
                    <button id="anim-static">Static</button>
                </div>
            </div>
        </section>

        <!-- 4. Modularity Section -->
        <section id="modularity">
            <div class="feature-card">
                <div class="icon-expand"></div>
                <h3>Expand</h3>
                <p>Start with one and build your system. Each Flux module connects magnetically and seamlessly.</p>
            </div>
            <div class="feature-card">
                <div class="icon-connect"></div>
                <h3>Connect</h3>
                <p>Control your entire system from our intuitive app or with simple voice commands.</p>
            </div>
            <div class="feature-card">
                <div class="icon-control"></div>
                <h3>Control</h3>
                <p>Choose from millions of colors or sync your lights with music, movies, and games.</p>
            </div>
        </section>

        <!-- 5. Build Your System Section -->
        <section id="configurator">
            <h2>Build Your Apex System</h2>
            <div class="config-product">
                <img src="https://picsum.photos/seed/fluxmodule/400/400.jpg" alt="APEX Flux Module">
                <div class="config-details">
                    <h3>APEX Flux Module</h3>
                    <p>The foundational element of your personalized lighting system.</p>
                    <div class="config-stepper">
                        <button id="decrement">-</button>
                        <span id="module-count">1</span>
                        <button id="increment">+</button>
                    </div>
                    <div class="config-price">
                        <span>Price:</span>
                        <span id="total-price">$199</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 6. Final CTA Section (MODIFIED) -->
        <section id="cta-final">
            <h2>Ready to redefine your space?</h2>
            <button class="btn-primary-large">Add to Cart</button>
            <button class="btn-secondary-large">Find a Retailer</button>
        </section>
    </main>

<!-- 7. Footer (Enhanced) -->
<footer>
    <div class="footer-content">
        <!-- Column 1: Brand & Newsletter -->
        <div class="footer-column footer-brand">
            <h4>APEX</h4>
            <p>Shaping the future of ambient light. Experience the perfect blend of art, technology, and design.</p>
            <div class="newsletter-form">
                <h5>Stay in the Light</h5>
                <p>Get the latest on APEX innovations and exclusive offers.</p>
                <form id="newsletter">
                    <input type="email" placeholder="Enter your email" required>
                    <button type="submit">Subscribe</button>
                </form>
            </div>
        </div>

        <!-- Column 2: Quick Links -->
        <div class="footer-column">
            <h4>Discover</h4>
            <ul>
                <li><a href="#">Products</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Community Gallery</a></li>
                <li><a href="#">Innovation Lab</a></li>
            </ul>
        </div>

        <!-- Column 3: Support -->
        <div class="footer-column">
            <h4>Support</h4>
            <ul>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Installation Guide</a></li>
                <li><a href="#">FAQs</a></li>
                <li><a href="#">Warranty & Returns</a></li>
            </ul>
        </div>

        <!-- Column 4: Company -->
        <div class="footer-column">
            <h4>Company</h4>
            <ul>
                <li><a href="#">Our Story</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">Sustainability</a></li>
            </ul>
        </div>
    </div>

    <!-- Bottom Bar: Social & Copyright -->
    <div class="footer-bottom">
        <div class="social-icons">
            <a href="#" aria-label="Instagram">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/></svg>
            </a>
            <a href="#" aria-label="Twitter">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
            </a>
            <a href="#" aria-label="LinkedIn">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            </a>
            <a href="#" aria-label="YouTube">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
            </a>
        </div>
        <div class="copyright">
            &copy; 2024 APEX. All rights reserved.
        </div>
    </div>
</footer>

    <script src="script.js"></script>
</body>
</html>

/* --- Global Variables & Resets --- */
:root {
    --color-bg: #f4f4f6;
    --color-surface: #ffffff;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    --color-accent: #3a7bd5; /* Electric Blue */
    --font-sans: 'Poppins', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --spacing-unit: 2rem;
    --border-radius: 12px;
    --shadow-light: 0 4px 15px rgba(0,0,0,0.05);
    --shadow-medium: 0 8px 25px rgba(0,0,0,0.1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 4rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

section {
    padding: calc(var(--spacing-unit) * 3) 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 1. Hero Section with Animated Light Beams --- */
#hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    overflow: hidden;
}

.light-beams {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.light-beams::before, .light-beams::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    animation: beam-move 8s linear infinite;
}

.light-beams::after {
    top: 50%;
    animation-delay: -4s;
    transform: rotate(45deg);
}

@keyframes beam-move {
    0% { transform: translateX(-50%) translateY(-50%) rotate(45deg); }
    100% { transform: translateX(50%) translateY(-50%) rotate(45deg); }
}

.hero-content {
    text-align: center;
    z-index: 2;
    position: relative;
}

.hero-content p {
    font-size: 1.5rem;
    font-family: var(--font-mono);
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.cta-button {
    padding: 1rem 2.5rem;
    background-color: var(--color-accent);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

/* --- 2. Art of Light Slider --- */
#art-of-light {
    padding: 0;
    max-width: 100%;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.slide-text {
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 2rem;
    width: 100%;
    text-align: center;
}

.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.7);
    border: none;
    padding: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s;
}

.slider-button:hover {
    background: rgba(255,255,255,0.9);
}
.prev { left: 20px; }
.next { right: 20px; }

/* --- 3. Interactive Demo --- */
#demo {
    text-align: center;
}

.demo-container {
    margin: 3rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

#flux-module {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 40px rgba(58, 123, 213, 0.5);
}

.flux-module-default { background: linear-gradient(45deg, #f5f7fa, #c3cfe2); }
.flux-module-blue { background: linear-gradient(45deg, #00d2ff, #3a7bd5); }
.flux-module-purple { background: linear-gradient(45deg, #ff6a00, #ee0979); }
.flux-module-green { background: linear-gradient(45deg, #11998e, #38ef7d); }

.animate-pulse { animation: pulse 2s infinite; }
.animate-flow { animation: flow 4s infinite ease-in-out; }

@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(58, 123, 213, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(58, 123, 213, 0.8); }
}

@keyframes flow {
    0%, 100% { border-radius: 20px; }
    50% { border-radius: 50%; }
}

.demo-controls h3 { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 1rem; }
.color-buttons button, .animation-buttons button {
    border: none;
    width: 50px;
    height: 50px;
    margin: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: var(--shadow-light);
}
.color-buttons button:hover, .animation-buttons button:hover { transform: scale(1.1); }
.animation-buttons button { width: auto; padding: 0 1rem; border-radius: 50px; background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-mono); }

/* --- 4. Modularity Section --- */
#modularity {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-unit);
}

.feature-card {
    background: var(--color-surface);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-card .icon-expand, .icon-connect, .icon-control {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background-color: var(--color-bg);
    border-radius: 50%;
    position: relative;
}
.icon-expand::after { content: '↗'; font-size: 2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.icon-connect::after { content: '⇄'; font-size: 2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.icon-control::after { content: '✦'; font-size: 2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* --- 5. Configurator Section --- */
#configurator .config-product {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    background: var(--color-surface);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
}

#configurator img {
    width: 150px;
    border-radius: var(--border-radius);
}

.config-stepper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.config-stepper button {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-accent);
    background: transparent;
    color: var(--color-accent);
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
}
.config-stepper button:hover { background: var(--color-accent); color: white; }

#module-count {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--font-mono);
}

#total-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
}

/* --- 6. Final CTA Section --- */
#cta-final {
    text-align: center;
    background: var(--color-surface);
    border-radius: var(--border-radius);
}

.btn-primary-large, .btn-secondary-large {
    padding: 1rem 3rem;
    margin: 1rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.btn-primary-large {
    background: var(--color-accent);
    color: white;
    box-shadow: var(--shadow-light);
}
.btn-primary-large:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }

.btn-secondary-large {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}
.btn-secondary-large:hover { background: var(--color-accent); color: white; }

/* --- 7. Footer --- */
footer {
    background: var(--color-surface);
    padding: calc(var(--spacing-unit) * 2) 5%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--spacing-unit);
    border-top: 1px solid #e0e0e0;
}

.footer-column h4 {
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 1rem;
}
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 0.5rem; }
.footer-column ul li a { font-size: 0.9rem; color: var(--color-text-secondary); }

/* --- Responsive Design --- */
@media (max-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2rem; }

    #modularity {
        grid-template-columns: 1fr;
    }
    
    #configurator .config-product {
        flex-direction: column;
    }

    .slider-button {
        font-size: 1rem;
        padding: 0.7rem;
    }
}
/* --- Global Variables & Resets --- */
:root {
    --color-bg: #f4f4f6;
    --color-surface: #ffffff;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    --color-accent: #3a7bd5; /* Electric Blue */
    /* NEW: Dark surface for footer */
    --color-dark-surface: #1a1a1a;
    --font-sans: 'Poppins', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --spacing-unit: 2rem;
    --border-radius: 12px;
    --shadow-light: 0 4px 15px rgba(0,0,0,0.05);
    --shadow-medium: 0 8px 25px rgba(0,0,0,0.1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 4rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

section {
    padding: calc(var(--spacing-unit) * 3) 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- NEW: Soft Main Menu --- */
#main-menu {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background-color: rgba(255, 255, 255, 0.1); /* Transparent */
    backdrop-filter: blur(10px); /* Blurred effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

#main-menu.scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-light);
}

.menu-logo {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.menu-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.menu-links a {
    font-weight: 500;
    color: var(--color-text-primary);
    transition: color 0.3s ease;
}

.menu-links a:hover {
    color: var(--color-accent);
}

.menu-contact {
    background-color: var(--color-accent);
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 50px;
}

.menu-contact:hover {
    opacity: 0.9;
}


/* --- 1. Hero Section with Animated Light Beams --- */
#hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    overflow: hidden;
}

/* ... (rest of the CSS is the same until the footer) ... */

/* --- 6. Final CTA Section (MODIFIED) --- */
#cta-final {
    /* MODIFIED: Make full width */
    max-width: none;
    padding: calc(var(--spacing-unit) * 3) 5%;
    text-align: center;
    background: var(--color-surface);
    border-top: 1px solid #e0e0e0;
}

.btn-primary-large, .btn-secondary-large {
    padding: 1rem 3rem;
    margin: 1rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.btn-primary-large {
    background: var(--color-accent);
    color: white;
    box-shadow: var(--shadow-light);
}
.btn-primary-large:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }

.btn-secondary-large {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}
.btn-secondary-large:hover { background: var(--color-accent); color: white; }

/* --- 7. Footer (MODIFIED) --- */
/* --- 7. Footer (Enhanced) --- */
footer {
    background: var(--color-dark-surface);
    color: #e0e0e0;
    padding: 0; /* Reset padding, handled by inner containers */
    margin-top: calc(var(--spacing-unit) * 3); /* Add space above the footer */
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Brand column is wider */
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3) 5%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-column h4 {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--color-text-primary); /* Brighter text for headings */
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

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

.footer-column ul li {
    margin-bottom: 0.8rem;
}

.footer-column ul li a {
    font-size: 0.95rem;
    color: #a0a0a0; /* Muted link color */
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block; /* Allows for transform */
}

.footer-column ul li a:hover {
    color: var(--color-accent);
    transform: translateX(3px);
}

/* --- Brand & Newsletter Specifics --- */
.footer-brand p {
    max-width: 90%;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.newsletter-form h5 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.newsletter-form p {
    font-size: 0.9rem;
    color: #a0a0a0;
    margin-bottom: 1.5rem;
}

#newsletter {
    display: flex;
    gap: 0.5rem;
}

#newsletter input[type="email"] {
    flex-grow: 1;
    padding: 0.8rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

#newsletter input[type="email"]:focus {
    outline: none;
    border-color: var(--color-accent);
    background-color: rgba(255, 255, 255, 0.08);
}

#newsletter input[type="email"]::placeholder {
    color: #777;
}

#newsletter button {
    padding: 0.8rem 1.5rem;
    background-color: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-family: var(--font-sans);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#newsletter button:hover {
    background-color: #2c5fb8; /* Darker shade of accent */
    transform: translateY(-2px);
}

/* --- Bottom Bar --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    flex-wrap: wrap;
    gap: 1rem;
}

.social-icons {
    display: flex;
    gap: 1.5rem;
}

.social-icons a {
    color: #777; /* Muted icon color */
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-icons a:hover {
    color: var(--color-accent);
    transform: scale(1.1);
}

.social-icons svg {
    width: 24px;
    height: 24px;
    fill: currentColor; /* Allows color to be controlled by the 'a' tag */
}

.copyright {
    font-size: 0.85rem;
    color: #555;
    font-family: var(--font-mono);
}

/* --- Responsive Design for Footer --- */
@media (max-width: 968px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-unit);
    }
    .footer-brand {
        grid-column: 1 / -1; /* Make brand column span full width */
    }
}

@media (max-width: 600px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2rem; }

    #main-menu {
        padding: 1rem 2rem;
    }
    .menu-links {
        gap: 1rem;
        font-size: 0.9rem;
    }
    .menu-contact {
        padding: 0.4rem 0.8rem;
    }

    #modularity {
        grid-template-columns: 1fr;
    }
    
    #configurator .config-product {
        flex-direction: column;
    }

    .slider-button {
        font-size: 1rem;
        padding: 0.7rem;
    }
}

document.addEventListener('DOMContentLoaded', function() {

    // --- NEW: Sticky Menu Scroll Effect ---
    const mainMenu = document.getElementById('main-menu');
    
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) { // If scrolled more than 50px
            mainMenu.classList.add('scrolled');
        } else {
            mainMenu.classList.remove('scrolled');
        }
    });


    // --- Interactive Demo Logic ---
    const fluxModule = document.getElementById('flux-module');
    const colorButtons = document.querySelectorAll('.color-buttons button');
    const animationButtons = document.querySelectorAll('.animation-buttons button');

    // Color Control
    colorButtons.forEach(button => {
        button.addEventListener('click', function() {
            const color = this.dataset.color;
            // Remove all existing color classes
            fluxModule.className = '';
            // Add the new color class
            if (color) {
                fluxModule.classList.add(`flux-module-${color}`);
            }
        });
    });

    // Animation Control
    document.getElementById('anim-pulse').addEventListener('click', () => {
        fluxModule.classList.remove('animate-flow');
        fluxModule.classList.add('animate-pulse');
    });
    document.getElementById('anim-flow').addEventListener('click', () => {
        fluxModule.classList.remove('animate-pulse');
        fluxModule.classList.add('animate-flow');
    });
    document.getElementById('anim-static').addEventListener('click', () => {
        fluxModule.classList.remove('animate-pulse', 'animate-flow');
    });

    // --- Slider Logic ---
    const slides = document.querySelector('.slides');
    const slideCount = document.querySelectorAll('.slide').length;
    let currentSlide = 0;

    document.querySelector('.next').addEventListener('click', () => {
        if (currentSlide < slideCount - 1) {
            currentSlide++;
        } else {
            currentSlide = 0;
        }
        slides.style.transform = `translateX(-${currentSlide * 100}%)`;
    });

    document.querySelector('.prev').addEventListener('click', () => {
        if (currentSlide > 0) {
            currentSlide--;
        } else {
            currentSlide = slideCount - 1;
        }
        slides.style.transform = `translateX(-${currentSlide * 100}%)`;
    });

    // --- Configurator Logic ---
    const moduleCountDisplay = document.getElementById('module-count');
    const totalPriceDisplay = document.getElementById('total-price');
    const incrementButton = document.getElementById('increment');
    const decrementButton = document.getElementById('decrement');
    
    let moduleCount = 1;
    const pricePerModule = 199;

    function updateConfigurator() {
        moduleCountDisplay.textContent = moduleCount;
        totalPriceDisplay.textContent = `$${moduleCount * pricePerModule}`;
    }

    incrementButton.addEventListener('click', () => {
        moduleCount++;
        updateConfigurator();
    });

    decrementButton.addEventListener('click', () => {
        if (moduleCount > 1) {
            moduleCount--;
            updateConfigurator();
        }
    });

});
document.addEventListener('DOMContentLoaded', function() {
    // ... (all your existing code) ...

    // --- NEW: Newsletter Form Submission ---
    const newsletterForm = document.getElementById('newsletter');
    newsletterForm.addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the form from actually submitting
        const email = this.querySelector('input[type="email"]').value;
        if (email) {
            // In a real application, you would send this data to a server.
            // For this demo, we'll just log it to the console.
            console.log(`Newsletter subscription attempted with email: ${email}`);
            alert(`Thank you for subscribing with ${email}! (This is a demo)`);
            this.querySelector('input[type="email"]').value = ''; // Clear the input field
        }
    });

});