/* Онбординг-воронка «Ареал любви» — mobile-first. */
.lnav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.lnav .brand{font-weight:800;font-size:17px;color:var(--ink)}
.lnav .navlinks a{color:var(--ink-soft);font-weight:600;font-size:14px}
#lhearts{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.lfh{position:absolute;bottom:-30px;opacity:0;animation:lrise linear forwards}
@keyframes lrise{0%{opacity:0;transform:translateY(0)}12%{opacity:.8}90%{opacity:.5}100%{opacity:0;transform:translateY(-105vh) rotate(220deg)}}
.btn.big{padding:17px 28px;font-size:17px;border-radius:18px}

.startwrap{position:relative;z-index:1;display:flex;justify-content:center;padding:26px 16px 50px;min-height:calc(100vh - 56px)}
.scard{background:var(--card);border-radius:26px;box-shadow:var(--shadow);padding:30px 22px;width:100%;max-width:480px;text-align:center;animation:sIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes sIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.sdots{display:flex;gap:7px;justify-content:center;margin-bottom:20px}
.sdot{width:9px;height:9px;border-radius:50%;background:#efe3f5;transition:.3s}
.sdot.on{background:linear-gradient(120deg,var(--c1),var(--c2));transform:scale(1.1)}
.s-emoji{font-size:46px;animation:sfloat 3s ease-in-out infinite}
@keyframes sfloat{50%{transform:translateY(-8px)}}
.s-q{font-size:clamp(22px,5.5vw,28px);font-weight:800;color:var(--ink);line-height:1.2;margin:10px 0 6px}
.s-sub{color:var(--ink-soft);font-size:14.5px;margin-bottom:22px;line-height:1.45}

.sopts{display:flex;flex-direction:column;gap:11px}
.sopt{cursor:pointer;border:2px solid #ffe1ec;background:#fff;border-radius:16px;padding:15px 18px;font-family:inherit;text-align:left;display:flex;flex-direction:column;gap:2px;transition:transform .12s,border-color .12s,background .12s,box-shadow .12s}
.sopt:hover{transform:translateY(-2px);border-color:var(--c1);background:#fff5f9;box-shadow:0 10px 24px -12px rgba(255,94,156,.6)}
.sopt.picked{border-color:var(--c1);background:#fff0f6}
.sopt-t{font-size:17px;font-weight:700;color:var(--ink)}
.sopt-d{font-size:13px;color:var(--ink-soft)}
.sback{margin-top:18px;background:none;border:none;color:var(--ink-soft);font-family:inherit;font-size:14px;cursor:pointer}

/* результат: тарифы */
.splans{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.splan{position:relative;cursor:pointer;border:2px solid #ffe1ec;background:#fff;border-radius:18px;padding:18px 18px 14px;font-family:inherit;text-align:left;transition:border-color .15s,box-shadow .15s,transform .12s}
.splan.on{border-color:var(--c1);box-shadow:0 12px 30px -14px rgba(255,94,156,.7)}
.splan.prem.on{border-color:var(--c4,#ffd36e)}
.srec{position:absolute;top:-11px;right:16px;background:linear-gradient(120deg,var(--c1),var(--c2));color:#fff;font-size:11px;font-weight:800;padding:4px 11px;border-radius:20px}
.splan-h{display:flex;justify-content:space-between;align-items:baseline}
.splan-n{font-size:19px;font-weight:800;color:var(--ink)}
.splan-p{font-size:22px;font-weight:900;color:var(--c1)}
.splan ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:5px}
.splan li{padding-left:22px;position:relative;color:var(--ink-soft);font-size:14px}
.splan li::before{content:"✓";position:absolute;left:0;color:var(--c1);font-weight:800}

.qtybox{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#fff0f6;border-radius:14px;padding:12px 16px;margin-bottom:14px;font-size:15px;font-weight:600;color:var(--ink)}
.qstep{display:flex;align-items:center;gap:14px}
.qbtn{width:38px;height:38px;border-radius:12px;border:none;background:#fff;color:var(--c1);font-size:22px;font-weight:800;cursor:pointer;box-shadow:0 6px 16px -10px rgba(255,94,156,.7)}
.qstep b{font-size:20px;min-width:24px;text-align:center}
.priceline{font-size:16px;color:var(--ink);margin-bottom:18px}
.priceline b{font-size:22px;color:var(--c1)}
.pmuted{display:block;color:var(--ink-soft);font-size:12px;margin-top:4px;font-weight:400}

.scard input{width:100%;padding:14px 16px;border:2px solid #ffe1ec;border-radius:14px;font-size:16px;font-family:inherit;margin-bottom:10px;outline:none;color:var(--ink)}
.scard input:focus{border-color:var(--c1)}
.scard .tabs{margin-bottom:16px}

.toastmsg{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:30px;font-weight:700;font-size:14px;z-index:50;opacity:0;transition:.3s}
.toastmsg.show{opacity:1}

/* превью-телефон в воронке */
.sphone{margin:6px auto 22px;width:228px;border-radius:30px;background:#1c1124;padding:9px;box-shadow:0 24px 50px -20px rgba(120,40,90,.55)}
.sphone-scr{border-radius:23px;overflow:hidden;background:linear-gradient(-45deg,#ffd9e8,#ffc7d6,#ffd8c2,#e9d4ff);background-size:300% 300%;animation:sflow 9s ease infinite;padding:26px 14px 22px;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
@keyframes sflow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.spbadge{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#fff;border-radius:20px;padding:5px 10px;font-size:10.5px;font-weight:700;color:#1f9d57;white-space:nowrap;box-shadow:0 6px 16px -10px rgba(0,0,0,.4)}
.sp-card{background:#fffafd;border-radius:18px;padding:20px 16px;width:100%;box-shadow:0 16px 30px -18px rgba(160,60,120,.5);text-align:center}
.sp-emoji{font-size:30px}
.sp-q{font-weight:800;font-size:15px;margin:6px 0 16px;color:var(--ink)}
.sp-yn{display:flex;align-items:center;justify-content:center;gap:10px}
.sp-yes{background:linear-gradient(120deg,var(--c1),var(--c2));color:#fff;font-weight:800;font-size:16px;padding:12px 22px;border-radius:26px;box-shadow:0 10px 22px -8px rgba(255,94,156,.8);animation:sfloat 2s ease-in-out infinite}
.sp-no{color:var(--ink-soft);font-size:10px;opacity:.45;border:1px solid #e7d6ef;border-radius:18px;padding:4px 7px;transform:rotate(-8deg)}
.sp-drop{margin-top:14px;font-size:17px;letter-spacing:5px;animation:sfloat 2.4s ease-in-out infinite}

/* блок срочности */
.urgency{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;background:#fff3df;border:1px solid #ffd36e;border-radius:14px;padding:10px 14px;margin-bottom:18px}
.utimer{font-weight:800;color:#b9772a;font-size:15px;font-variant-numeric:tabular-nums}
.uspots{color:#8a6a2f;font-size:13px}
.uspots b{color:#e0356b}

/* exit-intent модалка */
.exitmodal{position:fixed;inset:0;background:rgba(40,10,30,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;animation:efade .2s}
@keyframes efade{from{opacity:0}to{opacity:1}}
.exitbox{background:var(--card);border-radius:24px;padding:30px 24px;max-width:360px;width:100%;text-align:center;box-shadow:0 30px 60px -20px rgba(120,40,90,.6);animation:sIn .3s}
.exitbox h3{font-size:24px;color:var(--ink);margin:6px 0 8px}
.exitbox p{color:var(--ink-soft);font-size:15px;line-height:1.5;margin-bottom:20px}
.exitbox .sback{margin-top:12px}

@media(min-width:620px){ .splans{flex-direction:row} .splan{flex:1} }