/* Winlead — компоненты главной страницы (герой, студия голоса, инфографика, тарифы).
   Грузится поверх wl.css. Источник — landing-visual. */

.ico{width:26px;height:26px;stroke:var(--acc);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ic-badge{width:48px;height:48px;border-radius:13px;background:var(--acc-dim);display:grid;place-items:center;flex:none}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1.16fr;gap:40px;align-items:center;padding-block:48px 24px}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:26px}}
.hero h1{font-size:clamp(34px,5.4vw,56px);font-weight:900;letter-spacing:-.035em}
.hero .sub{margin-top:20px;color:var(--tx-2);font-size:17px;max-width:46ch}
.hero .cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}
.hero .rf{margin-top:16px;font-size:13px;color:var(--acc-warm);font-weight:500}

/* voice studio */
.studio{background:var(--card);border:1px solid var(--brd);border-radius:20px;box-shadow:0 30px 70px -36px rgba(60,40,120,.4);overflow:hidden}
.studio .top{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--brd)}
.studio .top .wv{display:flex;gap:3.5px;align-items:flex-end;height:22px}
.studio .top .wv i{width:3.5px;background:var(--acc);border-radius:2px;animation:wv 1.1s ease-in-out infinite}
@keyframes wv{0%,100%{height:6px}50%{height:21px}}
.studio .top .lab{font-size:13.5px;color:var(--tx-2);font-weight:500}
.voices{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.v{font-family:var(--body);font-size:13px;font-weight:600;color:var(--tx-2);background:var(--raise);border:1px solid var(--brd);padding:7px 14px;border-radius:999px;cursor:pointer}
.v.on{background:var(--acc);border-color:transparent;color:#fff}
.studio .sb{padding:28px 28px 30px}
.studio .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--raise);color:var(--tx-2)}.pill.a{color:var(--acc);background:var(--acc-dim)}.pill.g{color:var(--good);background:var(--good-bg)}
#type{font-size:17.5px;line-height:1.65;min-height:8.4em}#type .cur{display:inline-block;width:2px;height:1em;background:var(--acc-warm);margin-left:1px;vertical-align:-2px;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-block:14px}
@media(max-width:760px){.tiles{grid-template-columns:1fr 1fr}}
.tile{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:16px;display:flex;gap:12px;align-items:center}
.tile .n{font-family:var(--disp);font-weight:800;font-size:22px}.tile .l{font-size:12.5px;color:var(--tx-2)}

/* sections + section heading (homepage sizing) */
section{padding-block:46px}
.sh{text-align:left;max-width:58ch;margin:0 0 32px}
.sh .kick{margin-bottom:14px}
.sh h2{font-size:clamp(26px,4.4vw,42px);font-weight:900;letter-spacing:-.03em}
.sh p{color:var(--tx-2);font-size:16px;margin-top:12px}

/* pain cards */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.grid4{grid-template-columns:1fr 1fr}}@media(max-width:480px){.grid4{grid-template-columns:1fr}}
.pc{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:20px}
.pc .ic-badge{background:var(--crit-bg);margin-bottom:14px}.pc .ico{stroke:var(--crit)}
.pc h3{font-family:var(--body);font-weight:700;font-size:15px;margin-bottom:6px}.pc p{font-size:13.5px;color:var(--tx-2)}

/* pipeline */
.flow{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;justify-content:center}
.fstep{flex:1;min-width:150px;background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:20px;text-align:center;position:relative}
.fstep .ic-badge{margin:0 auto 12px}
.fstep h3{font-family:var(--body);font-weight:700;font-size:15px;margin-bottom:5px}.fstep p{font-size:12.5px;color:var(--tx-2)}
.farr{display:flex;align-items:center;justify-content:center;color:var(--acc);padding:0 4px}
@media(max-width:860px){.farr{transform:rotate(90deg)}}
@media(max-width:700px){.flow{flex-direction:column}.fstep{width:100%;min-width:0}.farr{padding:4px 0}}

/* ROI */
.roi{background:var(--card);border:1px solid var(--brd);border-radius:20px;padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
@media(max-width:760px){.roi{grid-template-columns:1fr;gap:20px}}
.roi h2{font-family:var(--disp);font-size:clamp(24px,3.6vw,36px);font-weight:900;letter-spacing:-.03em}
.roi .big{color:var(--acc)}
.roi p{color:var(--tx-2);margin-top:12px;font-size:15px}
.bars{display:flex;flex-direction:column;gap:16px}
.bar .bl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;color:var(--tx-2)}
.bar .track{height:30px;border-radius:9px;background:var(--raise);overflow:hidden}
.bar .fill{height:100%;border-radius:9px;display:flex;align-items:center;padding:0 12px;font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden}
.bar.a .fill{width:92%;background:var(--muted-fill);color:var(--tx)}
.bar.b .fill{width:14%;background:linear-gradient(90deg,#9b86e8,#7262b0)}

/* who */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:720px){.aud{grid-template-columns:1fr}}
.ac{background:var(--card);border:1px solid var(--brd);border-radius:18px;padding:24px}
.ac .hd{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ac .who{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);font-weight:700}
.ac h3{font-family:var(--body);font-weight:700;font-size:18px;margin-top:2px}
.ac .lbl{font-size:11px;font-weight:700;color:var(--tx-3);text-transform:uppercase;letter-spacing:.04em;margin-top:12px}.ac p{color:var(--tx-2);font-size:14px;margin-top:4px}

/* why */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media(max-width:820px){.grid3{grid-template-columns:1fr}}
.wc{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:22px}
.wc .ic-badge{margin-bottom:14px}.wc h3{font-family:var(--body);font-weight:700;font-size:16px;margin-bottom:7px}.wc p{color:var(--tx-2);font-size:14px}

/* pricing */
.price{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media(max-width:900px){.price{grid-template-columns:1fr 1fr}}@media(max-width:520px){.price{grid-template-columns:1fr}}
.tier{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px;position:relative}
.tier.best{border-color:var(--acc);box-shadow:0 20px 50px -30px var(--acc)}
.tier .flag{position:absolute;top:-10px;left:20px;background:var(--acc);color:#fff;font-size:11px;font-weight:700;padding:3px 11px;border-radius:999px}.tier .flag.alt{background:var(--raise);color:var(--tx-2);border:1px solid var(--brd-2)}
.tier .name{font-weight:700}.tier .cost{font-family:var(--disp);font-weight:800;font-size:25px}.tier .cost span{font-family:var(--body);font-size:13px;color:var(--tx-2);font-weight:400}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--tx-2)}.tier li{display:flex;gap:8px}
.tier .over{font-size:11.5px;color:var(--tx-3);line-height:1.4;margin-top:-2px}

/* калькулятор экономии */
.calc{background:var(--card);border:1px solid var(--brd);border-radius:20px;padding:clamp(24px,4vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media(max-width:760px){.calc{grid-template-columns:1fr;gap:24px}}
.calc .ctrl{display:flex;flex-direction:column;gap:22px}
.calc .row label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--tx-2);margin-bottom:9px}
.calc .row label b{color:var(--tx);font-weight:700;font-family:var(--body);font-size:15px}
.calc input[type=range]{width:100%;accent-color:var(--acc);height:6px;cursor:pointer}
.calc .cap{font-size:11.5px;color:var(--tx-3);margin-top:5px}
.calc .res .lbl{font-size:13px;color:var(--tx-3);margin-bottom:4px}
.calc .save{font-family:var(--disp);font-weight:900;font-size:clamp(30px,5.2vw,50px);letter-spacing:-.03em;color:var(--acc);line-height:1.04}
.calc .lines{margin-top:16px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--tx-2)}
.calc .lines b{color:var(--tx);font-weight:700}
.calc .tag{display:inline-block;margin-top:16px;font-size:12.5px;font-weight:700;color:#fff;background:var(--acc);padding:7px 14px;border-radius:999px}