:root{
--pink:#e00173;
--pink-dark:#b8005e;
--pink-soft:#fdf2f8;
--pink-soft2:#fce7f3;
--ink:#0f0f0f;
--muted:#555;
--line:#f3d3e4;
--gold:#f59e0b;
}

*{box-sizing:border-box}

body{
margin:0;
background:#fff;
color:var(--ink);
font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size:16px;
line-height:1.6;
padding-bottom:84px;
}

img{max-width:100%;display:block}

a{color:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px;margin:0 auto;padding:0 20px}

section{padding:72px 0}
.soft{background:var(--pink-soft)}
.dark{background:var(--ink);color:#fff}
.center{text-align:center}

.topbar{
background:var(--pink-soft);
color:var(--pink-dark);
text-align:center;
font-size:13px;
font-weight:600;
padding:8px 12px;
}

.nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 20px;
max-width:1120px;
margin:0 auto;
}

.brand{font-weight:900;font-size:20px;text-decoration:none}
.brand span{color:var(--pink)}

.nav-links a{
text-decoration:none;
font-size:14px;
font-weight:600;
margin-left:16px;
}

.eyebrow{
display:inline-block;
color:var(--pink);
font-size:13px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:10px;
}

h1{
font-size:48px;
line-height:1.12;
font-weight:800;
margin:0 0 16px;
letter-spacing:-.02em;
}

h1 .hl{color:var(--pink)}
h1 .ul{
background:linear-gradient(transparent 70%,var(--pink-soft2) 70%);
}

h2{
font-size:38px;
line-height:1.2;
font-weight:800;
margin:0 0 14px;
letter-spacing:-.02em;
}

.lead{font-size:18px;color:var(--muted);margin:0 0 22px}
.sub{color:var(--muted);max-width:620px;margin:0 auto 36px}
.dark .sub{color:#bbb}

/* Hero */

.hero{padding:40px 0 64px}

.hero-grid{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:48px;
align-items:center;
}

.kicker{
font-style:italic;
color:var(--muted);
font-size:15px;
margin:0 0 14px;
}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}

.chip{
background:var(--pink-soft);
border:1px solid var(--line);
border-radius:50px;
padding:7px 14px;
font-size:14px;
font-weight:600;
}

.rating{font-size:15px;font-weight:600;margin:0 0 10px}
.rating .stars{color:var(--gold);letter-spacing:2px;font-size:18px}

.price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.price{font-size:44px;font-weight:900;color:var(--pink);line-height:1}
.mrp{font-size:22px;color:#999;text-decoration:line-through}
.off{
background:var(--pink);
color:#fff;
font-weight:800;
font-size:13px;
padding:5px 10px;
border-radius:50px;
}

.btn{
display:inline-block;
background:var(--pink);
color:#fff;
text-decoration:none;
font-weight:800;
font-size:19px;
padding:17px 38px;
border-radius:50px;
box-shadow:0 6px 24px rgba(224,1,115,.32);
transition:transform .15s,background .15s;
text-align:center;
}

.btn:hover{background:var(--pink-dark);transform:translateY(-2px)}
.btn-block{display:block;width:100%}

.btn-note{font-size:13px;color:var(--muted);margin-top:10px}
.dark .btn-note{color:#aaa}

.trust{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:24px;
}

.trust div{
border:1px solid var(--line);
border-radius:14px;
padding:12px 8px;
text-align:center;
font-size:13px;
font-weight:600;
}

.trust b{display:block;font-size:20px}

.hero-img{
background:linear-gradient(135deg,var(--pink-soft),var(--pink-soft2));
border-radius:28px;
padding:28px;
}

.hero-img img{margin:0 auto;border-radius:16px}

.secure{
background:var(--pink-soft);
text-align:center;
font-size:13px;
font-weight:800;
letter-spacing:.06em;
color:var(--pink-dark);
padding:14px 20px;
}

/* Cards */

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
background:#fff;
border:1px solid var(--line);
border-radius:20px;
padding:24px;
}

.card .ico{font-size:32px;line-height:1;margin-bottom:10px}
.card h3{margin:0 0 6px;font-size:19px;font-weight:800}
.card p{margin:0;color:var(--muted);font-size:15px}

.problem{display:flex;gap:14px;align-items:flex-start;text-align:left}
.problem .ico{margin:0}
.problem p{color:var(--ink);font-weight:600;font-size:16px}

.cat .range{
display:inline-block;
font-size:12px;
font-weight:800;
color:var(--pink);
background:var(--pink-soft);
padding:4px 10px;
border-radius:50px;
margin-bottom:12px;
}

/* Preview */

.preview{
position:relative;
overflow:hidden;
padding:0;
text-align:left;
}

.preview .thumb{
height:170px;
background:linear-gradient(135deg,var(--pink-soft2),#f9a8d4);
display:flex;
align-items:center;
justify-content:center;
font-size:54px;
}

.preview .body{padding:16px 18px}
.preview .num{font-size:12px;font-weight:800;color:var(--pink);letter-spacing:.08em}
.preview h3{margin:4px 0 4px}
.preview .lvl{font-size:13px;color:var(--muted)}

.locked .thumb{filter:blur(6px)}
.locked h3{letter-spacing:.2em;color:#999}

.lock{
position:absolute;
top:60px;
left:50%;
transform:translateX(-50%);
background:#fff;
border-radius:50px;
padding:8px 16px;
font-weight:800;
font-size:14px;
box-shadow:0 4px 16px rgba(0,0,0,.12);
white-space:nowrap;
}

.more{margin:28px 0 0;color:var(--muted)}

/* Offer */

.offer{
max-width:560px;
margin:0 auto;
background:#1c1c1c;
border:1px solid #333;
border-radius:24px;
padding:28px;
text-align:left;
}

.offer h3{margin:0 0 16px;font-size:18px}

.offer li{
display:flex;
gap:12px;
align-items:center;
padding:12px 0;
border-bottom:1px solid #2e2e2e;
}

.offer ul{list-style:none;margin:0 0 22px;padding:0}
.offer li span:first-child{font-size:22px}
.offer .today{text-align:center;margin:8px 0 18px}
.offer .today small{display:block;color:#aaa;font-size:13px}
.offer .today b{font-size:46px;color:#ff4fa3;font-weight:900}

/* Reviews */

.review .who{display:flex;gap:12px;align-items:center;margin-bottom:10px}

.avatar{
width:40px;height:40px;
border-radius:50%;
background:var(--pink);
color:#fff;
display:flex;align-items:center;justify-content:center;
font-weight:800;
}

.review .who small{display:block;color:var(--muted);font-size:12px}
.stars{color:var(--gold);letter-spacing:2px}
.review p{color:var(--ink)}
.review .date{font-size:12px;color:#999;margin-top:8px}

/* Inside / steps */

.checks{list-style:none;padding:0;margin:0 auto 36px;max-width:680px;text-align:left}
.checks li{padding:10px 0 10px 34px;position:relative;font-weight:500}
.checks li:before{content:"✅";position:absolute;left:0}

.step .n{
width:40px;height:40px;
border-radius:50%;
background:var(--pink);
color:#fff;
font-weight:900;
display:flex;align-items:center;justify-content:center;
margin:0 auto 12px;
}

.privacy{
max-width:760px;
margin:36px auto 0;
background:#fff;
border:2px dashed var(--line);
border-radius:20px;
padding:22px 24px;
text-align:left;
}

.privacy h3{margin:0 0 6px}
.privacy p{margin:0;color:var(--muted)}

.fit{display:flex;gap:12px;align-items:flex-start;text-align:left}
.fit .ico{font-size:22px;margin:0}

/* FAQ */

details{
background:#fff;
border:1px solid var(--line);
border-radius:16px;
margin-bottom:12px;
padding:0 20px;
}

summary{
cursor:pointer;
font-weight:700;
padding:18px 0;
list-style:none;
position:relative;
padding-right:30px;
}

summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:0;top:14px;font-size:24px;color:var(--pink)}
details[open] summary:after{content:"–"}
details p{margin:0 0 18px;color:var(--muted)}

.final{background:linear-gradient(135deg,var(--pink-soft),var(--pink-soft2))}

footer{
text-align:center;
font-size:13px;
color:#888;
padding:28px 20px;
border-top:1px solid #eee;
}

footer a{margin:0 8px}

/* Sticky bar */

.sticky{
position:fixed;
left:0;right:0;bottom:0;
background:#fff;
border-top:1px solid #eee;
box-shadow:0 -4px 20px rgba(0,0,0,.06);
z-index:50;
}

.sticky .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px}
.sticky .p{font-size:22px;font-weight:900}
.sticky .p s{font-size:14px;color:#999;font-weight:500;margin-left:6px}
.sticky .btn{font-size:16px;padding:12px 26px}

@media (max-width:900px){
.hero-grid{grid-template-columns:1fr;gap:28px}
.hero-img{order:-1;padding:18px}
.g3,.g4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:600px){
section{padding:52px 0}
h1{font-size:34px}
h2{font-size:28px}
.lead{font-size:16px}
.price{font-size:38px}
.btn{font-size:17px;padding:16px 24px;display:block}
.g2,.g3,.g4{grid-template-columns:1fr}
.trust{grid-template-columns:repeat(3,1fr)}
.nav-links a:first-child{display:none}
.sticky .btn{display:inline-block}
}