*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
body{background:#f7fbff;color:#111;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.container{width:min(1280px,92%);margin:auto}

.topbar{background:#000;color:#fff;font-size:14px;padding:9px 0}
.topbar .container{display:flex;justify-content:space-between;gap:15px}

.header{background:#fff;padding:22px 0;border-bottom:1px solid #eee}
.header-inner{display:grid;grid-template-columns:260px 1fr 120px;align-items:center;gap:35px}
.logo{display:flex;align-items:center;gap:14px;font-size:34px;font-weight:900}
.logo img{width:64px;height:64px;border-radius:14px;object-fit:cover}
.logo b,.blue{color:#008cff}

.search{display:flex;height:54px;border:1px solid #ddd;border-radius:14px;overflow:hidden;background:#fff}
.search input{flex:1;border:0;padding:0 18px;outline:0;font-size:15px}
.search button{width:70px;border:0;background:linear-gradient(135deg,#00b7ff,#006eff);color:white;font-size:22px}
.header-icons{text-align:right}
.header-icons a{font-size:30px;color:#111}

.navbar{background:#fff;border-bottom:1px solid #eee}
.menu{display:flex;list-style:none;gap:35px;align-items:center;height:64px}
.menu>li{position:relative}
.menu>li>a{display:block;color:#111;font-weight:900;font-size:16px}
.dropdown{display:none;position:absolute;top:35px;left:0;width:270px;background:#fff;box-shadow:0 18px 45px rgba(0,0,0,.15);border-radius:0 0 18px 18px;overflow:hidden;z-index:9999}
.dropdown a{display:block;padding:14px 20px;font-weight:800;border-bottom:1px solid #eee;color:#111}
.dropdown a:hover{background:#f1f8ff;color:#008cff}
.menu>li:hover .dropdown{display:block}

.hero{
position:relative;
padding:55px 0 70px;
text-align:center;
overflow:hidden;
background:
radial-gradient(circle at 0% 45%,rgba(0,174,255,.22),transparent 32%),
radial-gradient(circle at 100% 45%,rgba(0,174,255,.22),transparent 32%),
linear-gradient(180deg,#fff,#eef9ff 60%,#fff);
}

.hero .container{position:relative;z-index:2}
.badge-top{display:inline-block;border:2px solid #008cff;color:#0077ff;padding:10px 22px;border-radius:999px;font-weight:900;margin-bottom:28px;background:#fff}
.hero h1{font-size:clamp(50px,8vw,110px);font-weight:900;letter-spacing:-3px;line-height:.9}
.hero p{font-size:22px;color:#444;margin:24px auto 30px;max-width:850px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:30px auto 35px;max-width:1050px}
.stat{background:#fff;border-radius:20px;padding:26px;box-shadow:0 16px 45px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;gap:18px}
.stat .icon{font-size:40px;color:#008cff}
.stat h2{font-size:32px}
.stat p{font-size:14px;margin-top:4px;color:#333}

.btn{display:inline-block;background:linear-gradient(135deg,#00b7ff,#006eff);color:#fff;border:0;padding:16px 34px;border-radius:16px;font-weight:900;cursor:pointer;box-shadow:0 14px 35px rgba(0,132,255,.3)}
.btn:hover{transform:translateY(-3px)}
.btn.small{padding:10px 14px;font-size:13px;border-radius:10px;box-shadow:none}

.section{padding:35px 0 70px;background:#fff}
.section h1,.section h2{font-size:34px;margin-bottom:8px;color:#111}
.section h2 span{color:#008cff}
.lead{color:#555;margin-bottom:25px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.card{background:#fff!important;color:#111!important;border:1px solid #e5e5e5!important;border-radius:18px;overflow:hidden;box-shadow:0 12px 35px rgba(0,0,0,.08)!important}
.card img{width:100%;height:170px;object-fit:cover;background:#eee}
.card-content{padding:16px;color:#444!important}
.card h3{font-size:20px;margin:5px 0;color:#111}
.card p{font-size:14px;color:#666!important}
.price{font-size:20px;font-weight:900;margin-top:12px;color:#008cff!important}
.badge{display:inline-block;background:#d9efff!important;color:#0077ff!important;padding:6px 10px;border-radius:8px;font-size:12px;font-weight:900;margin-top:8px}

.center{text-align:center;margin-top:25px}
.outline-btn{display:inline-block;padding:13px 44px;border:1px solid #bbb;border-radius:14px;font-weight:900;background:white}

.floating-cart{position:fixed;right:28px;bottom:28px;width:min(360px,92vw);background:linear-gradient(180deg,#151515,#050505)!important;color:#fff;border-radius:24px;padding:24px;z-index:9999;box-shadow:0 0 0 2px #00aaff,0 18px 55px rgba(0,0,0,.35)}
.floating-cart h3{font-size:26px;margin-bottom:10px}
#cart-items{color:#ddd;margin-bottom:16px}
.coupon{display:flex;gap:10px;margin:16px 0}
.coupon input{flex:1;border:0;padding:14px;border-radius:12px}
.coupon button{border:0;background:#008cff;color:#fff;font-weight:900;border-radius:12px;padding:0 18px}
.cart-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #333}
.cart-line button{background:none;border:0;color:#fff;font-size:18px}
.cart-total{display:flex;justify-content:space-between;font-size:28px;font-weight:900;margin:20px 0}

footer{background:#fff!important;color:#111!important;padding:35px;text-align:center;margin-top:50px;border-top:1px solid #eee}
footer a{color:#111!important;font-weight:800;margin:0 10px}

@media(max-width:900px){
.header-inner{grid-template-columns:1fr}
.search{width:100%}
.menu{overflow-x:auto;gap:25px}
.stats{grid-template-columns:1fr 1fr}
.floating-cart{position:static;width:92%;margin:30px auto}
}