@media (max-width: 900px) {

    html, body { overflow-x: hidden; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
    * { box-sizing: border-box; }

    .navbar { display: none; }

    .logo { top: 20px; left: 20px; }
    .logo img { height: 35px; }

    main { padding: 0 20px; width: 100%; max-width: 100%; }

    .products-section { margin-top: 100px; margin-bottom: 40px; }
    .intro-header h1 { font-size: 2.2rem; }

    .hidden-state {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .product-list { gap: 30px; width: 100%; }

    .product-showcase, 
    .product-showcase:nth-child(even) {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background-color: #1a1a1a;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 15px;
        overflow: hidden;
        margin: 0;
    }

    .visual-side {
        height: 220px;
        background: #111;
        padding: 20px;
    }

    .visual-side img {
        max-width: 70%;
        filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
    }

    .glow-bg { display: none; } 

    .text-side {
        padding: 25px 20px;
        text-align: center;
    }

    .text-side h2 {
        font-size: 1.6rem; margin-top: 0;
        background: none; -webkit-text-fill-color: white; color: white;
    }

    .text-side p { font-size: 1rem; margin-bottom: 25px; }

    .btn-modern {
        display: block; width: fit-content; margin: 0 auto;
        background: #1E90FF; color: white;
        padding: 12px 30px; border-radius: 8px; text-decoration: none;
    }
    .btn-modern::after { display: none; }
    .btn-modern:hover { background: #1c77c3; color: white; }

    .footer-container { flex-direction: column; gap: 20px; text-align: center; }
    .footer-right { flex-direction: column; gap: 15px; }
    footer { padding: 30px 20px; }

    .hamburger { display: block; position: absolute; top: 25px; right: 25px; cursor: pointer; z-index: 1001; }
    .bar { width: 26px; height: 2px; background: white; margin: 6px 0; transition: 0.4s; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .mobile-navbar {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: #121212; z-index: 1000;
        display: none; flex-direction: column; padding: 30px; overflow-y: auto;
    }
    .mobile-navbar.active { display: flex; }
    .logo-mobile { display: block; font-size: 1.5rem; font-weight: bold; margin-bottom: 40px; }
    .nav-items { width: 100%; margin-top: 20px; }
    .nav-items a, .nav-dropdown-title {
        display: flex; justify-content: space-between; padding: 18px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1); color: white;
        font-size: 1.2rem; text-decoration: none;
    }
    .nav-dropdown-content {
        margin-left: 10px; max-height: 0; overflow: hidden;
        transition: 0.3s; border-left: 2px solid #4ade80; padding-left: 15px;
    }
    .nav-dropdown-content.active { max-height: 400px; margin: 10px 0; }
    .nav-dropdown-content a { color: #aaa; border: none; padding: 10px 0; font-size: 1rem; }
}