:root{
  --brand-red:#cc0000;
  --brand-green:#006400;
  --white:#ffffff;
  --muted:#666666;
  --container:1100px;
  --radius:12px;
}

/* RESET & BASE */
*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:"Poppins",system-ui,Arial,sans-serif; background:var(--white); color:#000; line-height:1.55; overflow-x:hidden}

/* PRELOADER */
#preloader{position:fixed; inset:0; display:flex; justify-content:center; align-items:center; background:#fff; z-index:9999; transition:.6s ease;}
#preloader.loaded{opacity:0; visibility:hidden;}
.preloader-inner{width:320px; position:relative;}
.preloader-logo{width:100%; clip-path:inset(0 100% 0 0); animation:logoReveal 1.1s ease forwards .3s;}
.preloader-brush{position:absolute; inset:0; background:linear-gradient(90deg,var(--brand-green),var(--brand-red),#ffc90e); animation:brushMove 1.2s ease forwards; opacity:.8;}
@keyframes logoReveal{to{clip-path:inset(0 0 0 0)}}
@keyframes brushMove{from{transform:translateX(-120%)} to{transform:translateX(120%);opacity:0}}

/* HEADER */
.site-header{position:sticky; top:0; z-index:100; background:#fff; padding:14px 24px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 4px 12px rgba(0,0,0,.06);}
.brand{display:flex;align-items:center;gap:12px;}
.logo{height:58px;}
.brand-text h1{margin:0;font-size:1.3rem;color:var(--brand-red);}
.tagline{margin:0;font-size:.85rem;color:var(--brand-green);}
.main-nav a{margin-left:16px;text-decoration:none;font-weight:600;color:#000;padding:6px 10px;border-radius:6px;transition:.3s;}
.main-nav a:hover,.main-nav a.active{color:var(--brand-red);background:rgba(204,0,0,.05);}

/* HERO */
.hero{position:relative; padding:110px 20px 90px; text-align:center; overflow:hidden;}
.hero-inner{position:relative; z-index:2; max-width:900px; margin:auto;}
.hero h2{font-size:2.6rem; margin-bottom:10px;}
.hero-sub{color:var(--muted); margin-bottom:24px;}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.hero-logo-bg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.08; animation:logoFloat 10s infinite linear;}
.hero-logo-bg img{width:70%; max-width:900px;}
@keyframes logoFloat{50%{transform:translateY(-12px) scale(1.02)}}

/* FLOATING PAINT */
.paint-motion{position:absolute; inset:0; overflow:hidden; z-index:0;}
.paint{position:absolute; width:260px; height:260px; border-radius:50%; filter:blur(6px); opacity:.35; animation:floatPaint 14s infinite ease-in-out;}
.paint-red{background:var(--brand-red); left:10%; top:60%;}
.paint-green{background:var(--brand-green); left:65%; top:20%;}
.paint-white{background:#f5f5f5; left:40%; top:70%;}
.paint.small{width:160px; height:160px; opacity:.25; animation-duration:18s;}
@keyframes floatPaint{
  0%,100%{ transform:translateY(0) translateX(0) scale(1); }
  25%{ transform:translateY(-40px) translateX(20px) scale(1.05); }
  50%{ transform:translateY(10px) translateX(-30px) scale(0.95); }
  75%{ transform:translateY(-30px) translateX(10px) scale(1.02); }
}

/* BUTTONS */
.btn{padding:12px 22px; border-radius:10px; font-weight:700; text-decoration:none; transition:.3s; cursor:pointer;}
.btn.primary{background:var(--brand-red); color:#fff;}
.btn.primary:hover{background:var(--brand-green); transform:translateY(-2px);}
.btn.outline{border:2px solid var(--brand-red); color:var(--brand-red);}
.btn.outline:hover{background:var(--brand-red); color:#fff;}

/* CONTAINER */
.container{max-width:var(--container); margin:auto; padding:40px 20px;}

/* PRODUCT CARDS */
.product-card, .product{background:#fff; padding:16px; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.08); transition:.4s; position:relative; overflow:hidden;}
.product-card img, .product img{width:100%; height:160px; object-fit:contain; transition:.4s;}
.product-card:hover, .product:hover{transform:translateY(-10px) scale(1.02);}
.product-card:hover img, .product:hover img{transform:rotate(-2deg) scale(1.05);}
.product-card::after, .product::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(204,0,0,.05),transparent); opacity:0; transition:.4s;}
.product-card:hover::after, .product:hover::after{opacity:1;}
.price{color:var(--brand-green); font-weight:700;}

/* ESTIMATOR */
.estimator-section{max-width:650px; margin:90px auto; padding:32px; background:#fff; border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.12); animation:fadeUp .6s ease forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)}}
.estimator-section input, .estimator-section select{width:100%; padding:10px; margin-top:6px; border-radius:8px; border:1px solid #ccc;}
.estimator-section button{margin-top:20px; width:100%; padding:12px; background:var(--brand-red); color:#fff; border:none;}
.estimator-section button:hover{background:var(--brand-green); transform:translateY(-2px);}

/* CART */
#cartSection{display:none; background:#f7f7f7; padding:16px; border-radius:12px; margin-top:20px;}
.cart-item{margin-bottom:10px; font-weight:600;}

/* FOOTER */
.site-footer{background:#000; color:#fff; padding:24px; margin-top:80px;}
.site-footer a{color:#fff; text-decoration:none;}

/* RESPONSIVE */
@media(max-width:900px){
  .hero h2{font-size:2.1rem}
  .hero-logo-bg img{width:100%}
  .paint{display:none}


}.whatsapp-float{
  position:fixed;
  bottom:24px;
  right:24px;
  width:60px;
  height:60px;
  z-index:999;
  cursor:pointer;
  animation: jump 1s ease;
  animation-fill-mode: forwards;
}

.whatsapp-float img{
  width:100%;
  height:100%;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}

@keyframes jump {
  0% { transform: translateY(0); }
  20% { transform: translateY(-20px); }
  40% { transform: translateY(0); }
  60% { transform: translateY(-10px); }
  80% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
/* ===== FLOATING WHATSAPP BUTTON ===== */
.whatsapp-float{
  position: fixed;
  left: 20px;
  bottom: 90px; /* above footer */
  width: 56px;
  height: 56px;
  z-index: 9999; /* higher than cart */
  animation: whatsappBounce 1.2s ease;
}

.whatsapp-float img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* bounce animation */
@keyframes whatsappBounce{
  0%{ transform: translateY(40px); opacity:0; }
  50%{ transform: translateY(-12px); }
  100%{ transform: translateY(0); opacity:1; }
}

/* subtle repeat bounce */
.whatsapp-float.pulse{
  animation: pulse 1.6s infinite;
}

@keyframes pulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

/* mobile */
@media(max-width:768px){
  .whatsapp-float{
    width:50px;
    height:50px;
    bottom:80px;
    left:16px;
  }
}
#cartSummary{
  max-width:280px;
  z-index: 999; /* lower than WhatsApp */
}
/* ===== FLOATING CART PANEL ===== */
.cart-float{
  position: fixed;
  left: 20px;
  bottom: 120px;
  width: 320px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 16px;
  z-index: 999;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: .4s ease;
}

.cart-float.active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cart-title{
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: var(--brand-red);
}

.cart-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: .95rem;
}

.cart-item small{
  color: var(--muted);
}

.cart-controls{
  display: flex;
  gap: 6px;
}

.cart-controls button{
  border: none;
  background: #eee;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.cart-total{
  margin-top: 14px;
  font-weight: 800;
  font-size: 1rem;
}

.cart-checkout{
  margin-top: 14px;
  width: 100%;
}

/* mobile */
@media(max-width:768px){
  .cart-float{
    width: 92%;
    left: 4%;
    bottom: 110px;
  }
}
.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 56px;
  height: 56px;
  z-index: 9999;
}