*{margin:0;padding:0;box-sizing:border-box;font-family:Inter}
body{background:#111;color:#fff;overflow-x:hidden}
html{scroll-behavior:smooth}

/* RAGE MODE */
body.rage{animation:shake .12s infinite alternate;filter:contrast(1.2) saturate(1.4)}
@keyframes shake{0%{transform:translateX(-2px)}100%{transform:translateX(2px)}}

/* HERO */
.hero{
position:relative;min-height:100vh;
display:flex;flex-direction:column;
justify-content:center;align-items:center;
text-align:center;padding:40px;overflow:hidden
}
.hero video{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;z-index:-2
}
.hero::after{
content:"";position:absolute;inset:0;
background:rgba(0,0,0,.65);z-index:-1
}
.hero h1{font-size:clamp(3rem,6vw,5.5rem);font-weight:800}
.hero p{max-width:900px;margin:15px auto;font-size:1.2rem}

.counter{
margin-top:15px;background:#000;
padding:10px 22px;border-radius:30px
}

/* BUTTONS */
.buttons{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.btn{
padding:14px 30px;border-radius:50px;
font-weight:800;border:none;cursor:pointer;transition:.2s
}
.primary{background:#ffcc00;color:#000}
.danger{background:#ff004c;color:#fff}
.dark{background:#000;color:#fff;border:2px solid #fff}
.btn:hover{transform:scale(1.08) rotate(-1deg)}

section{padding:80px 8%}
.section-title{font-size:2.6rem;font-weight:800}
.section-sub{opacity:.8;margin:10px 0 30px}

/* CAROUSEL */
.carousel{display:flex;gap:30px;overflow-x:auto;scroll-behavior:smooth}
.carousel::-webkit-scrollbar{display:none}
.card{
min-width:300px;background:#000;border-radius:26px;
box-shadow:0 0 40px rgba(255,0,76,.35);transition:.3s
}
.card:hover{transform:translateY(-14px)}
.card-content{padding:22px}
.lesson{
margin-top:10px;background:#ff004c;
padding:10px;border-radius:14px;font-size:.85rem
}

/* DIY */
.diy{
background:linear-gradient(135deg,#000,#22000a);
border-radius:30px;padding:40px;
box-shadow:0 0 40px rgba(255,0,76,.4)
}
.diy ul{margin-top:20px;line-height:1.8}
.diy b{color:#ffcc00}

/* FORM */
.form{
background:#000;padding:30px;border-radius:26px;
box-shadow:0 0 40px rgba(255,0,76,.35)
}
.form input,.form textarea{
width:100%;padding:14px;margin:10px 0;
background:#111;color:#fff;border-radius:14px;border:none
}

/* MODAL */
.modal{
position:fixed;inset:0;
background:rgba(0,0,0,.9);
display:none;align-items:center;justify-content:center;z-index:999
}
.modal-box{
background:#000;padding:35px;border-radius:30px;
text-align:center;box-shadow:0 0 40px #ff004c
}

/* FOOTER */
footer{
background:#000;padding:40px;text-align:center;
font-size:.9rem;opacity:.85
}