/* CSS  */
        :root {
            --brand-blue: #004e92;
            --star-gold: #f1c40f;
            --dark-blue: #000428;
            --alkaline-glow: #00d2ff;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; scroll-behavior: smooth; }
        
        html { scroll-padding-top: 90px; }
        body { font-family: 'Poppins', sans-serif; background: #fdfdfd; overflow-x: hidden; }

        /* --- HEADER --- */
        header {
            background: linear-gradient(to right, var(--dark-blue), var(--brand-blue));
            color: white; padding: 10px 3%; display: flex; align-items: center; justify-content: space-between;
            position: sticky; top: 0; z-index: 1000; border-bottom: 3px solid var(--star-gold); min-height: 85px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .header-left { display: flex; align-items: center; gap: 12px; }
        .logo-img { width: 55px; height: 55px; border-radius: 50%; border: 2px solid var(--star-gold); background: white; transition: transform 0.8s ease-in-out; }
        .logo-img:hover { transform: rotate(360deg); }
        .brand-name { font-size: 1.4rem; font-weight: 800; white-space: nowrap; letter-spacing: 2px; }
        .stars { color: var(--star-gold); font-size: 2.2rem; letter-spacing: 2px; }

        /* MENU */
        #menu ul { list-style: none; display: flex; gap: 10px; }
        #menu ul li { 
            background: rgba(255, 255, 255, 0.1); width: 105px; height: 38px; 
            text-align: center; border-radius: 6px; transition: 0.3s; 
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        #menu ul li a { text-decoration: none; color: white; display: block; font-weight: 600; font-size: 13px; line-height: 38px; }
        #menu ul li:hover { background: var(--star-gold); transform: translateY(-2px); }
        #menu ul li:hover a { color: var(--brand-blue); }
        .menu-toggle { display: none; font-size: 26px; cursor: pointer; color: var(--star-gold); }

        /* --- SLIDER ANIMATION --- */
        .slider-container { position: relative; height: 450px; background: #000; overflow: hidden; }
        .slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease-in-out; }
        .slide.active { opacity: 1; }
        .slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 6s linear; }
        .slide.active img { transform: scale(1); }

        /* --- REVEAL ANIMATION ON SCROLL --- */
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* --- PRODUCTS --- */
        .products-section { padding: 80px 5%; text-align: center; background: #fff; }
        .products-section h2 { font-size: 2.2rem; color: var(--dark-blue); margin-bottom: 10px; }
        .brand-slogan { display: block; color: var(--brand-blue); font-weight: 600; margin-bottom: 50px; font-style: italic; font-size: 1.2rem; opacity: 0.8; }
        
        .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
        .product-item { background: #fff; padding: 40px 20px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); position: relative; transition: 0.4s; border: 1px solid #eee; }
        
        .product-item img { height: auto; max-height: 300px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1)); transition: 0.5s ease; }
        .product-item:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); border-color: var(--alkaline-glow); }
        .product-item h3 { margin-top: 20px; color: var(--dark-blue); font-size: 1.3rem; }
        .badge { position: absolute; top: 15px; right: 15px; background: var(--brand-blue); color: white; padding: 5px 12px; border-radius: 50px; font-weight: bold; font-size: 11px; text-transform: uppercase; }

        /* --- CERTIFICATES --- */
        #certificates { padding: 80px 5%; background: #f4f7f9; text-align: center; }
        .cert-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 40px; }
        .cert-item { background: white; padding: 30px; border-bottom: 4px solid var(--star-gold); border-radius: 15px; width: 250px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: 0.3s; font-size: 12px; line-height: 1.6; }
        .cert-item img { width: 80px; height: auto; margin-bottom: 15px; display: block; margin-left: auto; margin-right: auto; }
        .cert-item p { font-weight: 800; color: #222; margin-bottom: 8px; font-size: 14px; }

        /* --- ORDER FORM & PULSE BUTTON --- */
        #order { padding: 80px 5%; background: #f0f4f8; }
        .form-container { max-width: 700px; margin: 0 auto; background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-top: 5px solid var(--brand-blue); }
        .form-group { margin-bottom: 20px; display: flex; flex-direction: column; }
        .form-group label { font-weight: 600; margin-bottom: 8px; color: var(--dark-blue); }
        .form-group input, .form-group select, .form-group textarea { padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; }
        
        @keyframes pulse-blue {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 78, 146, 0.7); }
            70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(0, 78, 146, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 78, 146, 0); }
        }

        .order-btn { 
            width: 100%; background: var(--brand-blue); color: white; padding: 15px; border: none; border-radius: 8px; 
            font-size: 1.1rem; font-weight: 800; cursor: pointer; transition: 0.3s; 
            display: flex; align-items: center; justify-content: center; gap: 10px;
            animation: pulse-blue 2s infinite;
        }
        .order-btn:hover { background: var(--dark-blue); animation: none; }

        /* LIVE PRICE STYLE */
        #priceTag { background: var(--star-gold); color: var(--dark-blue); padding: 10px; border-radius: 8px; text-align: center; font-weight: 800; margin-bottom: 20px; display: none; border: 1px dashed var(--brand-blue); }

        /* --- CONTACT & MAP --- */
        #contact { padding: 60px 5%; background: #fff; }
        .map-box iframe { width: 100%; height: 400px; border-radius: 15px; border: none; }

        /* --- FOOTER --- */
        footer { background: #111; color: #bbb; padding: 80px 5% 30px; border-top: 5px solid var(--brand-blue); }
        .footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 50px; }
        .footer-box { flex: 1; min-width: 250px; }
        .footer-box h3 { color: #fff; border-left: 4px solid var(--star-gold); padding-left: 15px; margin-bottom: 25px; font-size: 1.2rem; }
        .footer-box p { line-height: 1.8; margin-bottom: 10px; }
        
        .social-heading { color: var(--star-gold); font-size: 1rem; font-style: italic; display: block; margin-bottom: 20px; }
        .social-links { display: flex; gap: 12px; margin-bottom: 30px; }
        .social-links a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: white; font-size: 18px; text-decoration: none; transition: 0.3s; }
        .social-links a.facebook { background: #1877F2; }
        .social-links a.instagram { background: linear-gradient(45deg, #f09433 0%,#dc2743 100%); }
        .social-links a.youtube { background: #FF0000; }
        .social-links a.x-twitter { background: #000; }
        .social-links a.github { background: #333; }

        /* QR CODES */
        .qr-center-container { width: 100%; text-align: center; border-top: 1px solid #333; padding-top: 50px; margin-top: 40px; }
        .qr-wrapper { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
        .qr-wrapper .qr-box { background: white; padding: 15px; border-radius: 15px; width: 180px; height: 180px; }
        .qr-img { width: 100%; height: 100%; object-fit: contain; }

        .footer-bottom { text-align: center; border-top: 1px solid #222; margin-top: 50px; padding-top: 30px; font-size: 13px; color: #666; }
        
        /* FLOATING BUTTON */
        .whatsapp-float { position: fixed; bottom: 25px; right: 25px; background: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 30px; z-index: 1000; box-shadow: 0 4px 15px rgba(37,211,102,0.4); }

        /* MOBILE OPTIMIZATION */
        @media (max-width: 768px) {
            .header-center { display: none; }
            .menu-toggle { display: block; }
            #menu { display: none; position: absolute; top: 85px; right: 5%; background: var(--dark-blue); width: 200px; border-radius: 12px; border: 1px solid var(--star-gold); overflow: hidden; }
            #menu.active { display: block; }
            #menu ul { flex-direction: column; gap: 0; }
            #menu ul li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); border-radius: 0; height: 50px; }
            #menu ul li a { line-height: 50px; }
            .slider-container { height: 300px; }
        }