:root{--logo-top:#010d30; --logo-bottom:#0996e7; --accent:#16a34a}
*{box-sizing:border-box}body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;background:linear-gradient(to bottom,var(--logo-top),var(--logo-bottom));color:#06283D}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;flex-direction:column;align-items:center;padding:36px 12px;}
.logo{height:400px}
.header p{color:white;text-align:center;max-width:820px;margin-top:10px;line-height:1.6;text-shadow:0 3px 10px rgba(0,0,0,0.35)}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:28px;padding:0 12px}
.card{background:white;border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(2,6,23,0.12);display:flex;flex-direction:column;align-items:center}
.card img{width:100%;height:240px;object-fit:cover;border-radius:8px}
.card h3{margin:12px 0 6px}
.price{font-weight:800;color:#0f172a;margin-bottom:8px}
.btn{background:var(--accent);color:white;padding:12px 18px;border-radius:10px;border:none;font-weight:800;cursor:pointer;text-decoration:none}
.footer{margin-top:32px;text-align:center;color:white;opacity:0.9;padding:18px}
.whats{position:fixed;right:18px;bottom:18px;background:linear-gradient(90deg,#22c55e,#16a34a);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(2,6,23,0.18);z-index:9999}
.whats img{width:36px;height:36px}
@media(max-width:600px){.logo{height:180px}.card img{height:180px}}