
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;font-family:Segoe UI,Arial,sans-serif;background:#0b0f1a;color:#fff}
a{text-decoration:none;color:inherit}
header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 48px;background:rgba(12,0,18,.8);position:fixed;top:0;z-index:1000}
header img{height:46px}
nav a{margin-left:22px;font-weight:700;color:#c084fc}
main{padding-top:110px}
.hero{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:url("../img/mu-heroes-bg.jpg") center center / cover no-repeat;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,10,25,.65),rgba(10,10,25,.85));z-index:-1}
.hero-content{padding:120px 32px}
.banner{font-size:clamp(42px,6vw,70px);font-weight:900;letter-spacing:4px;background:linear-gradient(90deg,#8b0000,#a855f7,#dc2626,#7c3aed);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:grad 6s ease infinite,float 3s ease-in-out infinite}
@keyframes grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.btn{display:inline-block;margin-top:26px;padding:14px 34px;border-radius:40px;background:linear-gradient(135deg,#7c3aed,#dc2626);font-weight:900}
.section{padding:80px 48px}
.section h2{text-align:center;color:#c084fc;font-size:2.2rem;margin-bottom:40px}
footer{text-align:center;padding:36px;background:#120016}
.tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.tab{padding:10px 22px;border-radius:30px;cursor:pointer;background:#1a0a24;font-weight:800}
.tab.active,.tab:hover{background:linear-gradient(135deg,#7c3aed,#dc2626)}
.tab-content{display:none}
.tab-content.active{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:40px}
.product-card{background:#121a33;border-radius:18px;padding:24px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.6);position:relative}
.badge{position:absolute;top:12px;right:12px;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:900;background:linear-gradient(135deg,#dc2626,#7c3aed)}
.price{font-size:1.4rem;font-weight:900;color:#f43f5e}
.buy-btn{display:inline-block;margin-top:14px;padding:12px 26px;border-radius:36px;background:linear-gradient(135deg,#7c3aed,#dc2626);font-weight:900}
@media(max-width:640px){header{padding:16px 20px}nav a{margin-left:14px}.section{padding:64px 20px}}
