@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@400;700;800&display=swap');
:root{--c1:#E84A7F;--c1d:#B83262;--c2:#3D8BFF;--c3:#FF7A45;--c4:#FFE29A;--c5:#5AC48F;--bg:#F7F2FF;--soft:#FBF8FF;--band:#1E1B2E;--txt:#1E1B2E;--mid:#625E73;--line:rgba(0,0,0,.08);--page:#fff;--r:26px;--sh:0 12px 30px rgba(0,0,0,.08);--tit:'Baloo 2',system-ui,sans-serif;--tx:'Nunito',system-ui,sans-serif;--accent:var(--c1);--accent-2:var(--c2);--paper:#fff;--muted:var(--mid)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.6 var(--tx);color:var(--txt);background:var(--bg);overflow-x:hidden}
a{color:var(--c2)}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--tit);font-weight:800;letter-spacing:-.01em}
header.top{background:var(--page);position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.brand{text-decoration:none;color:var(--txt);display:flex;align-items:center;gap:10px}
.brand .mark{width:38px;height:38px;border-radius:12px;background:var(--c1);color:#fff;display:grid;place-items:center;font:800 15px var(--tit)}
.brand b{font:800 19px/1.1 var(--tit)}.brand small{display:block;font:700 12px var(--tx);color:var(--mid)}
.menu{display:flex;gap:8px;align-items:center}.menu a{color:#fff;text-decoration:none;font:800 13px var(--tx);padding:9px 14px;border-radius:999px}
.menu a:nth-child(1){background:var(--c2)}.menu a:nth-child(2){background:var(--c1)}.menu a:nth-child(3){background:var(--c3)}.menu a:nth-child(4){background:var(--c5)}
.age{font:800 12px var(--tx);color:var(--txt);border:2px solid var(--txt);border-radius:999px;padding:6px 9px}
.btn{display:inline-block;background:var(--txt);color:#fff;padding:14px 24px;border-radius:999px;text-decoration:none;font:800 14px var(--tx);white-space:nowrap;transition:transform .15s}.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:var(--c2)}.btn.sm{padding:10px 16px;font-size:13px}
.hero{position:relative;padding:40px 0 60px;overflow:hidden;border-radius:0 0 40px 40px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.blob{position:absolute;border-radius:50%;z-index:-1}
.blob-1{width:460px;height:460px;background:var(--c4);right:-140px;top:-90px}.blob-2{width:220px;height:220px;background:var(--c2);right:60px;bottom:-110px;opacity:.7}.blob-3{width:170px;height:170px;background:var(--c1);left:-100px;bottom:-70px}
.eyebrow{display:inline-block;background:var(--page);border-radius:999px;padding:8px 14px;font:800 12px var(--tx);letter-spacing:.06em;text-transform:uppercase;color:var(--mid);margin:0 0 18px;box-shadow:var(--sh)}
h1{font-size:clamp(3rem,6.2vw,5.4rem);line-height:.95;margin:0 0 20px}
h1 span{display:inline-block}h1 span:nth-child(1){color:var(--c2)}h1 span:nth-child(2){color:var(--c1)}h1 span:nth-child(3){color:var(--c3)}
.lead{font-size:19px;color:var(--mid);margin:0 0 26px;max-width:560px;font-weight:700}
.trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.trust span{background:var(--page);border-radius:999px;padding:7px 13px;font:800 13px var(--tx);color:var(--txt);box-shadow:var(--sh)}
.podium{position:relative;background:var(--page);border-radius:var(--r);padding:26px;box-shadow:var(--sh);transform:rotate(-2deg)}
.podium h3{margin:0 0 14px;font:800 13px var(--tx);letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.pod{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:2px dashed var(--line)}.pod:first-of-type{border-top:0}
.mono{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font:800 18px var(--tit);color:#fff;flex:none}
.pod b{font:800 17px var(--tit);display:block}.pod small{font:700 13px var(--tx);color:var(--mid)}
.pod .sc{margin-left:auto;font:800 22px var(--tit);color:var(--c1);background:var(--c4);border-radius:999px;padding:4px 12px}
.sticker{position:absolute;right:14px;top:-44px;width:130px;height:130px;border-radius:50%;background:var(--c1);color:#fff;display:grid;place-items:center;text-align:center;font:800 17px/1.05 var(--tit);transform:rotate(12deg);border:5px dashed #fff;padding:10px;box-shadow:var(--sh)}
section{padding:46px 0}section h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.05;margin:0 0 8px}section h2 span:nth-child(1){color:var(--c2)}section h2 span:nth-child(2){color:var(--c1)}section h2 span:nth-child(3){color:var(--c3)}
.sub{color:var(--mid);margin:0 0 26px;font-size:17px;font-weight:700}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pick{border-radius:var(--r);padding:26px 24px 22px;position:relative;color:#fff;overflow:hidden;box-shadow:var(--sh)}
.pick::before{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.22)}
.pick:nth-child(1){background:var(--c1)}.pick:nth-child(2){background:var(--c2)}.pick:nth-child(3){background:var(--c3)}
.pick .tag{position:absolute;top:16px;left:22px;background:#fff;color:var(--txt);font:800 12px var(--tx);padding:5px 11px;border-radius:999px}
.pick .head{display:flex;align-items:center;gap:12px;margin:34px 0 12px}.pick .head .mono{background:#fff!important;color:var(--txt)}.pick .head b{font:800 22px var(--tit)}.pick .head small{font:700 13px var(--tx);opacity:.9;display:block}
.pick p{margin:0 0 16px;font-size:15px;font-weight:600;position:relative}.pick .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:relative}.pick .price{font:800 13px var(--tx);margin-left:auto;background:rgba(255,255,255,.25);padding:5px 10px;border-radius:999px}
.pick .btn{background:#fff;color:var(--txt)}.pick .btn.ghost{background:var(--txt);color:#fff}
.rank{display:grid;gap:14px}.rank .hd{display:none}
.r{display:grid;grid-template-columns:48px 52px 1.3fr 1fr 130px 210px;gap:14px;align-items:center;padding:16px 22px;background:var(--page);border-radius:20px;box-shadow:var(--sh);transition:transform .15s}.r:hover{transform:translateY(-3px)}
.r .n{font:800 26px var(--tit);color:var(--c3)}.r b{font:800 18px var(--tit);display:block}.r small{font:700 13px var(--tx);color:var(--mid)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font:800 12px var(--tx);background:var(--bg);color:var(--txt);padding:5px 9px;border-radius:999px}
.bar{height:10px;background:var(--bg);border-radius:6px;position:relative;overflow:hidden}.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,var(--c2),var(--c1))}
.sc2{font:800 20px var(--tit);margin-bottom:6px}
.r .act{display:flex;gap:8px;justify-content:flex-end;align-items:center}.r .act a.t{font:800 13px var(--tx);color:var(--c2);text-decoration:none;border-bottom:2px solid var(--c2)}
table.cmp{border-collapse:separate;border-spacing:0;width:100%;font:700 14px var(--tx);background:var(--page);border-radius:20px;overflow:hidden;box-shadow:var(--sh)}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:13px 12px;text-align:left}.cmp th{background:var(--band);color:#fff;font-weight:800}.cmp td.c{text-align:center}.cmp .y{color:var(--c5)}.cmp .n{color:var(--c1)}.cmp tr:last-child td{border-bottom:0}
.method{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}.method p{font-weight:600}
.crit{list-style:none;padding:22px;margin:0;background:var(--page);border-radius:var(--r);box-shadow:var(--sh)}.crit li{display:grid;grid-template-columns:150px 1fr 48px;gap:12px;align-items:center;padding:10px 0;font:800 14px var(--tx)}.crit .w{text-align:right;color:var(--c1)}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g{background:var(--page);border-radius:var(--r);padding:22px;text-decoration:none;color:var(--txt);display:block;box-shadow:var(--sh);transition:transform .15s}.g:hover{transform:translateY(-3px)}.g b{font:800 18px var(--tit);display:block;margin:8px 0}.g small{font:700 13px var(--tx);color:var(--mid)}.g .k{display:inline-block;font:800 12px var(--tx);color:#fff;background:var(--c5);padding:4px 10px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}.g:nth-child(2) .k{background:var(--c2)}.g:nth-child(3) .k{background:var(--c3)}
details{border-radius:18px;background:var(--page);padding:14px 20px;margin:10px 0;box-shadow:var(--sh)}summary{cursor:pointer;font:800 16px var(--tx)}details p{font-weight:600}
.author{display:flex;gap:14px;align-items:center;margin:8px 0 0;padding:18px 22px;border-radius:var(--r);background:var(--c4);font:600 15px var(--tx)}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--c1);display:grid;place-items:center;font:800 18px var(--tit);color:#fff;flex:none}
.note{background:var(--page);border-left:6px solid var(--c3);border-radius:0 18px 18px 0;padding:14px 18px;margin:22px 0;font-size:15px;font-weight:700}
footer{background:var(--band);color:#cfd3dd;margin-top:40px;padding:34px 0;font:600 14px var(--tx)}footer a{color:#fff}
article{padding:20px 0;max-width:780px}article h2{font-size:28px;margin:34px 0 10px}article h3{font-size:20px;margin:24px 0 8px}article table{border-collapse:separate;border-spacing:0;width:100%;font:700 14px var(--tx);background:var(--page);border-radius:18px;overflow:hidden;box-shadow:var(--sh);margin:16px 0}article th,article td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}article th{background:var(--band);color:#fff}
.box{background:var(--c4);border-radius:18px;padding:16px 20px;margin:20px 0;font-weight:700}
.cta{background:var(--page);border-radius:var(--r);padding:26px;margin:32px 0;text-align:center;box-shadow:var(--sh)}.cta p{margin:0 0 14px;color:var(--mid);font-weight:700}
.meta{display:inline-block;background:var(--page);border-radius:999px;padding:7px 13px;font:800 12px var(--tx);color:var(--mid);box-shadow:var(--sh);margin-bottom:14px}
.score{font:800 46px/1 var(--tit);color:var(--c1)}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
ul.pro li::marker{color:var(--c5)}ul.con li::marker{color:var(--c1)}
@media(max-width:900px){.hero{grid-template-columns:1fr}.podium{transform:none;margin-top:10px}.sticker{right:6px;top:-26px;width:104px;height:104px;font-size:14px}.picks,.guides,.grid3{grid-template-columns:1fr}.method{grid-template-columns:1fr}.r{grid-template-columns:36px 44px 1fr;gap:10px}.r .bar,.r .chips{display:none}.r .act{grid-column:1/-1;justify-content:flex-start}.menu a{padding:7px 10px;font-size:12px}.blob-1{width:300px;height:300px;right:-160px}.blob-2{display:none}}
