:root { 
            --primary: #1a2a6c; 
            --accent: #27ae60; 
            --gold: #f1c40f; 
            --dark: #111; 
            --wa-green: #25d366; 
            --light-bg: #f0f4f8;
        }
        
        body { 
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 
            margin: 0; 
            color: #333; 
            line-height: 1.6; 
            background-color: #fff;
        }
        
        /* Hero Section */
        .hero { 
            background: linear-gradient(135deg, #ffffff 0%, var(--light-bg) 100%); 
            padding: 80px 20px; 
            text-align: center; 
        }
        .logo { max-width: 160px; margin-bottom: 20px; }
        .slogan { 
            font-size: 0.95rem; 
            color: var(--accent); 
            font-weight: 700; 
            text-transform: uppercase; 
            letter-spacing: 1.5px; 
            display: block; 
            margin-bottom: 10px;
        }
        h1 { font-size: 2.6rem; color: var(--primary); margin: 0 0 20px 0; }
        
        /* AI Search Bar */
        .search-container { max-width: 650px; margin: 30px auto; }
        .search-input { 
            width: 100%; 
            padding: 18px 30px; 
            border-radius: 50px; 
            border: 1px solid #ddd; 
            font-size: 16px; 
            box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
            outline: none; 
            transition: 0.3s;
            box-sizing: border-box;
        }
        .search-input:focus { 
            border-color: var(--accent); 
            box-shadow: 0 10px 30px rgba(39, 174, 96, 0.15); 
        }
        
        /* Rating Badge */
        .rating-badge { 
            display: inline-block; 
            background: white; 
            padding: 10px 25px; 
            border-radius: 50px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
            margin-top: 10px; 
        }
        .stars { color: var(--gold); font-size: 1.2rem; }

        /* Brand Grid */
        .container { max-width: 1100px; margin: 60px auto; padding: 0 20px; }
        .section-header { margin-bottom: 40px; text-align: left; }
        .section-header h2 { 
            font-size: 1.8rem; 
            border-left: 6px solid var(--accent); 
            padding-left: 15px; 
            color: var(--primary);
        }
        
        .brand-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
            gap: 25px; 
        }
        .brand-card { 
            border: 1px solid #eee; 
            border-radius: 15px; 
            padding: 25px; 
            text-align: center; 
            transition: 0.4s; 
            background: white; 
        }
        .brand-card:hover { 
            transform: translateY(-8px); 
            box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
            border-color: var(--accent); 
        }
        .brand-logo { 
            width: 70px; height: 70px; 
            background: #f8f9fa; 
            border-radius: 50%; 
            margin: 0 auto 15px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 20px; 
            font-weight: bold; 
            color: #cbd5e0; 
        }
        
        .badge { 
            font-size: 10px; 
            padding: 4px 10px; 
            border-radius: 20px; 
            font-weight: 700; 
            margin: 2px; 
            text-transform: uppercase; 
        }
        .badge-halal { background: #dcfce7; color: #166534; }
        .badge-ai { background: #dbeafe; color: #1e40af; }

        /* Call to Action */
        .cta { 
            background: var(--primary); 
            color: white; 
            padding: 80px 20px; 
            text-align: center; 
        }
        .btn-wa { 
            background: var(--wa-green); 
            color: white; 
            padding: 18px 45px; 
            border-radius: 50px; 
            text-decoration: none; 
            font-weight: bold; 
            display: inline-block; 
            font-size: 1.1rem; 
            transition: 0.3s; 
            margin-top: 25px; 
        }
        .btn-wa:hover { 
            background: #1eb956; 
            transform: scale(1.05); 
            box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3); 
        }

        /* Footer */
        footer { background: var(--dark); color: #888; padding: 60px 20px; text-align: center; }
        .footer-nav { margin-bottom: 30px; }
        .footer-nav a { color: #bbb; text-decoration: none; margin: 0 15px; font-size: 14px; transition: 0.3s; }
        .footer-nav a:hover { color: white; }
        .copy { font-size: 12px; color: #555; }