
:root{
--maroon:#8b1538;
--maroon-dark:#6f102d;
--black:#111;
--white:#fff;
--gray:#f6f6f7;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,sans-serif;background:#fff;color:#111}
.container{max-width:430px;margin:auto;background:#fff}
.hero{padding:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.logo{font-weight:800;color:var(--maroon);font-size:28px}
.hero-grid h1{font-size:48px;line-height:1}
.hero-grid h1 span{color:var(--maroon)}
.hero-grid p{margin:15px 0;font-size:18px;line-height:1.5}
.btn{background:linear-gradient(135deg,var(--maroon),var(--maroon-dark));color:#fff;padding:16px 24px;border-radius:14px;display:inline-block;text-decoration:none;font-weight:700}
.skyline{width:100%;border-radius:20px;margin-top:20px}
.card{background:#faf7f8;border:1px solid #eee;border-radius:24px;padding:20px;margin:16px 20px}
.bid-card{display:grid;grid-template-columns:1fr;gap:20px}
.product-box{background:#fff;padding:16px;border-radius:20px}
.product-box img{width:100%;border-radius:12px}
.price{font-size:40px;color:var(--maroon);font-weight:800}
.bid-btn{width:100%;border:none;background:var(--maroon);color:#fff;padding:14px;border-radius:12px;margin-top:10px}
.section{padding:20px}
.section-title{font-size:30px;font-weight:800;margin-bottom:15px}
.categories{display:flex;overflow:auto;gap:14px}
.cat{min-width:95px;text-align:center}
.circle{width:80px;height:80px;border-radius:50%;background:#fff;border:1px solid #eee;display:flex;align-items:center;justify-content:center;font-size:30px;margin:auto}
.products{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.product{border:1px solid #eee;border-radius:18px;overflow:hidden;background:#fff}
.product img{width:100%;height:150px;object-fit:cover}
.product-info{padding:12px}
.product-info h4{font-size:15px}
.product-info .bid{color:var(--maroon);font-weight:800}
.footer-banner{margin:20px;background:linear-gradient(135deg,var(--maroon),#a81d4a);color:#fff;padding:30px;border-radius:24px;text-align:center}
.bottom-nav{position:sticky;bottom:0;background:#fff;border-top:1px solid #eee;display:flex;justify-content:space-around;padding:14px}
@media(min-width:768px){
.container{max-width:1200px}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center}
.bid-card{grid-template-columns:1fr 1fr}
.products{grid-template-columns:repeat(4,1fr)}
}
