:root{--red:#e10600;--red2:#ff3b30;--black:#0a0a0a;--ink:#161616;--white:#fff;--grey:#f4f4f4;--mut:#6b6b6b}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.6}
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;background:rgba(10,10,10,.85);backdrop-filter:blur(10px)}
.logo{color:#fff;font-weight:800;font-size:1.3rem;text-decoration:none;letter-spacing:.5px}.logo b{color:var(--red2)}
nav div a,nav button{color:#fff;margin-left:22px;text-decoration:none;font-size:.95rem;background:none;border:0;cursor:pointer;font-family:inherit}
nav div a:hover{color:var(--red2)}
.btn{display:inline-block;background:var(--red);color:#fff!important;padding:12px 28px;border-radius:50px;border:0;font-weight:700;cursor:pointer;text-decoration:none;transition:.25s;font-size:1rem;font-family:inherit}
.btn:hover{background:var(--red2);transform:translateY(-3px);box-shadow:0 10px 25px rgba(225,6,0,.4)}.btn.ghost{background:transparent;border:2px solid #fff;margin-left:12px}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 5vw 60px;color:#fff;position:relative;overflow:hidden;background:var(--black)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:float 9s ease-in-out infinite}
.hero::before{width:520px;height:520px;background:var(--red);top:-120px;right:-100px}.hero::after{width:380px;height:380px;background:#8a0000;bottom:-120px;left:10%;animation-delay:-4s}
@keyframes float{50%{transform:translate(-40px,50px) scale(1.15)}}
.hero>*{position:relative;z-index:1}.hero h1{font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.1;max-width:900px}.hero h1 span{color:var(--red2)}
.hero p{max-width:620px;margin:22px 0 34px;font-size:1.15rem;color:#ddd}
.stats{display:flex;gap:40px;margin-top:60px;flex-wrap:wrap}.stats b{display:block;font-size:2rem;color:var(--red2)}.stats small{color:#bbb}
section{padding:90px 5vw}.dark{background:var(--black);color:#fff}.grey{background:var(--grey)}
h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:10px}h2::after{content:"";display:block;width:70px;height:5px;background:var(--red);margin-top:12px;border-radius:5px}
.sub{color:var(--mut);margin:14px 0 36px;max-width:640px}.dark .sub{color:#bbb}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.tabs button{padding:10px 22px;border-radius:50px;border:2px solid var(--black);background:#fff;font-weight:600;cursor:pointer;transition:.2s;font-family:inherit}
.tabs button.on,.tabs button:hover{background:var(--red);border-color:var(--red);color:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.card{background:#fff;border-radius:18px;padding:30px;box-shadow:0 8px 30px rgba(0,0,0,.08);border-top:5px solid var(--black);transition:.3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-10px);box-shadow:0 20px 45px rgba(225,6,0,.22);border-top-color:var(--red)}
.card.pop{border-top-color:var(--red);position:relative}.card.pop::after{content:"MOST POPULAR";position:absolute;top:-14px;right:20px;background:var(--red);color:#fff;font-size:.7rem;padding:4px 12px;border-radius:50px;font-weight:700}
.card h3{font-size:1.4rem}.price{font-size:1.7rem;font-weight:800;color:var(--red);margin:10px 0}.price small{font-size:.9rem;color:var(--mut);font-weight:400}
.card ul{list-style:none;padding:0;margin:14px 0 24px;flex:1}.card li{padding:6px 0 6px 28px;position:relative}.card li::before{content:"✔";position:absolute;left:0;color:var(--red);font-weight:700}
form{max-width:640px;display:grid;gap:14px}input,select,textarea{width:100%;padding:14px 16px;border-radius:12px;border:2px solid #333;background:#161616;color:#fff;font:inherit}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--red)}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:600px){.row{grid-template-columns:1fr}nav div a{display:none}}
#msg{margin-top:10px;font-weight:600}.ok{color:#5dff8f}.err{color:#ff7a7a}
footer{background:#000;color:#999;text-align:center;padding:30px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:50}.modal.show{display:flex}
.box{background:#fff;border-radius:18px;padding:34px;width:min(92vw,400px);display:grid;gap:12px}.box input{background:#fff;color:#000;border-color:#ddd}.box h3{font-size:1.5rem}
.rv{opacity:0;transform:translateY(40px);transition:.8s}.rv.in{opacity:1;transform:none}

/* how-it-works cards on dark background */
.dark .card{background:#161616;color:#fff;border-top-color:var(--red)}.dark .card h3{color:var(--red2)}.dark .card p{color:#ddd}
#burger{display:none;font-size:1.6rem;color:#fff;background:none;border:0;cursor:pointer}
body{overflow-x:hidden}img,video{max-width:100%}
/* ---- mobile / tablet auto-fit ---- */
@media(max-width:768px){
 nav{padding:12px 5vw}#burger{display:block}
 #menu{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(10,10,10,.97);padding:10px 5vw 18px;flex-direction:column}
 #menu.open{display:flex}#menu a,#menu button{display:block!important;margin:0;padding:12px 0;border-bottom:1px solid #2a2a2a;text-align:left;font-size:1.05rem}
 .hero{padding:100px 6vw 50px;min-height:auto}.hero .btn{display:block;text-align:center;margin:0 0 12px}.hero .btn.ghost{margin-left:0}
 .hero::before{width:300px;height:300px}.hero::after{width:240px;height:240px}.stats{gap:24px;margin-top:36px}
 section{padding:60px 6vw}.cards{grid-template-columns:1fr}.card{padding:24px}.tabs button{padding:9px 16px;font-size:.9rem}
 input,select,textarea{font-size:16px}.btn{width:100%;text-align:center}.hero p{font-size:1rem}
}
@media(max-width:380px){.hero h1{font-size:2rem}.stats b{font-size:1.6rem}}