/* ============================================================
   Переиспользуемые компоненты: кнопки, карточки, бейджи, формы.
   ============================================================ */

.btn{
  --btn-bg:var(--surface); --btn-fg:var(--ink); --btn-bd:var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:999px; border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:600; font-size:15px; text-decoration:none; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, border-color .18s;
}

.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-1); border-color:var(--ink-3)}

.btn:active{transform:translateY(0)}

.btn--primary{--btn-bg:var(--brand); --btn-fg:var(--on-brand); --btn-bd:transparent; box-shadow:var(--shadow-brand)}

.btn--primary:hover{--btn-bg:var(--brand-deep); box-shadow:0 16px 30px -14px rgba(32,178,170,.75)}

.btn--lg{padding:17px 30px; font-size:16px}

.btn--block{width:100%}

/* Кнопка WhatsApp: заметная, но не спорит с главной кнопкой формы */
.btn--wa{
  --btn-bg:var(--brand-tint); --btn-fg:var(--brand-ink);
  --btn-bd:color-mix(in srgb, var(--brand) 35%, transparent);
  margin-top:22px;
}
.btn--wa:hover{--btn-bg:var(--brand); --btn-fg:var(--on-brand); --btn-bd:transparent; box-shadow:var(--shadow-brand)}
.wa-note{margin-top:10px; text-align:center; font-size:13px; color:var(--ink-3)}

.btn__arrow{transition:transform .18s cubic-bezier(.2,.7,.3,1)}

.btn:hover .btn__arrow{transform:translateX(4px)}

.badge{
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  font-size:13.5px; font-weight:500; color:var(--ink-2); box-shadow:var(--shadow-1);
}

.badge b{
  flex:none; white-space:nowrap;
  background:var(--yellow); color:var(--on-yellow); font-weight:700;
  padding:3px 9px; border-radius:999px; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
}

/* На узком экране полная фраза не помещалась в строку: переносился
   и текст, и сама пилюля. До 520px показываем короткий вариант. */
.badge__full{display:none}

.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); padding:28px 26px 30px; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}

.card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--yellow));
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.3,1);
}

.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--line-strong)}

.card:hover::after{transform:scaleX(1)}

.card__ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-ink); margin-bottom:20px;
}

.card h3{font-size:1.16rem; letter-spacing:-.015em}

.card p{margin-top:11px; color:var(--ink-2); font-size:15.5px; line-height:1.62}

.stat{
  border:1px solid color-mix(in srgb, var(--on-band) 20%, transparent);
  border-radius:var(--r-m); padding:22px 20px;
  background:color-mix(in srgb, var(--on-band) 6%, transparent);
}

.stat b{
  display:block; font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem); color:var(--yellow); font-variant-numeric:tabular-nums;
}

.stat span{display:block; margin-top:8px; font-size:14px; color:color-mix(in srgb, var(--on-band) 72%, transparent); line-height:1.45}

.app{
  display:flex; gap:15px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:20px; transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}

.app:hover{transform:translateY(-4px); box-shadow:var(--shadow-1); border-color:var(--line-strong)}

.app__ico{
  width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--bg-sunk); border:1px solid var(--line); font-size:18px;
}

.app__ico svg{color:var(--brand-ink)}

.app h3{font-size:.99rem; font-family:var(--body); font-weight:600; line-height:1.4; letter-spacing:0}

.app small{display:block; margin-top:5px; color:var(--ink-3); font-size:13px}

.who__item{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface);
  font-weight:500; font-size:15px; transition:border-color .2s, background .2s, transform .2s;
}

.who__item:hover{border-color:var(--brand); background:var(--brand-tint); transform:translateX(3px)}

.who__item svg{color:var(--brand-ink); flex:none}

.plan{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); padding:30px 28px 32px; display:flex; flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}

.plan:hover{transform:translateY(-4px); box-shadow:var(--shadow-1)}

.plan--top{
  border-color:transparent; box-shadow:var(--shadow-2);
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(150deg,var(--brand),var(--yellow)) border-box;
  border:2px solid transparent;
}

.plan__tag{
  position:absolute; top:-13px; left:28px; padding:5px 13px; border-radius:999px;
  background:var(--yellow); color:var(--on-yellow); font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}

.plan h3{font-size:1.2rem; line-height:1.16}
.plan__tier{
  display:inline-block; vertical-align:2px; margin-left:7px; padding:3px 9px;
  border-radius:999px; background:var(--brand-tint); color:var(--brand-ink);
  font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}

.plan__for{margin-top:11px; color:var(--ink-3); font-size:13.5px; line-height:1.5}

.plan__price{display:flex; align-items:baseline; gap:7px; margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line)}

.plan__price b{font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.03em; white-space:nowrap}

.plan__price span{color:var(--ink-3); font-size:14px}


.plan__specs{margin:22px 0 26px; display:flex; flex-direction:column; gap:11px; flex:1}

.plan__specs li{display:flex; gap:10px; font-size:14px; color:var(--ink-2); line-height:1.4}

.plan__specs li svg{flex:none; margin-top:2px}
.plan__specs li.yes svg{color:var(--brand-ink)}
.plan__specs li.no{color:var(--ink-3)}
.plan__specs li.no svg{color:var(--line-strong)}
.plan__specs em{
  display:block; font-style:normal; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:2px;
}

.step{position:relative; padding-top:30px}

.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,2rem + 2vw,3.6rem);
  letter-spacing:-.04em; color:var(--line-strong); display:block; line-height:1;
}

.step__line{height:1px; background:var(--line); margin:20px 0 22px; position:relative}

.step__line::after{content:""; position:absolute; left:0; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--brand)}

.step h3{font-size:1.22rem}

.step p{margin-top:12px; color:var(--ink-2); font-size:15.5px}

.review{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:28px 26px; display:flex; flex-direction:column; gap:18px;
}

.review blockquote{margin:0; font-size:16px; line-height:1.62; color:var(--ink); flex:1}

.review__who{display:flex; align-items:center; gap:13px; padding-top:18px; border-top:1px solid var(--line)}

.avatar{
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-ink); font-weight:700; font-size:15px;
}

.review__who b{display:block; font-size:15px}

.review__who span{display:block; font-size:13.5px; color:var(--ink-3)}

.form{
  margin-top:28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(24px,3vw,36px); box-shadow:var(--shadow-1);
}

.field{display:grid; gap:7px; margin-bottom:16px}

.field label{font-size:13.5px; font-weight:600; color:var(--ink-2)}

.field label span{color:var(--brand-ink)}

.field input,.field textarea{
  width:100%; padding:13px 15px; border-radius:12px; background:var(--bg);
  border:1px solid var(--line-strong); font-size:15.5px; transition:border-color .2s, box-shadow .2s, background .2s;
}

.field textarea{resize:vertical; min-height:92px}

.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--brand-ink); background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}

.err{font-size:12.5px; color:var(--err); font-weight:500; min-height:0; display:none}

.field.is-err input{border-color:var(--err); box-shadow:0 0 0 4px color-mix(in srgb, var(--err) 12%, transparent)}

.field.is-err .err{display:block}

/* Ловушка для ботов. Инлайновый style="display:none" из сниппета
   Web3Forms блокируется нашим CSP, поэтому прячем ещё и здесь. */
#lead-form [name="botcheck"]{display:none}

.check{display:flex; gap:11px; align-items:flex-start; margin:6px 0 20px; font-size:13.5px; color:var(--ink-2); line-height:1.5; cursor:pointer}

.check input{width:20px; height:20px; flex:none; accent-color:var(--brand-ink); margin:1px 0 0}

.check.is-err{color:var(--err)}

.form__done{
  display:none; text-align:center; padding:34px 10px;
}

.form__done.is-on{display:block}

.form__done .tick{
  width:62px; height:62px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok);
  animation:pop .45s cubic-bezier(.2,1.4,.4,1);
}

.form__done h3{font-size:1.35rem}

.form__done p{margin-top:12px; color:var(--ink-2)}

.form.is-sent .form__fields{display:none}

.socials{display:flex; gap:10px; margin-top:24px}

.socials a{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
  transition:color .2s, border-color .2s, transform .2s, background .2s;
}

.socials a:hover{color:var(--on-brand); background:var(--brand); border-color:var(--brand); transform:translateY(-3px)}

.totop{
  position:fixed; right:14px; bottom:14px; z-index:70; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .25s, transform .25s, visibility .25s, background .2s, color .2s;
}

.totop.is-on{opacity:1; visibility:visible; transform:none}

.totop:hover{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}


@keyframes pop{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}}

/* Выбранный тариф — подсветка после клика по «Подключить» */
.plan.is-picked{box-shadow:var(--shadow-2), 0 0 0 2px var(--brand)}

/* Переключатель категорий тарифов (tablist) */
.switch{
  position:relative; display:flex; gap:4px; padding:5px;
  width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:none;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow-1); margin:0 auto clamp(26px,4vw,42px);
}
.switch::-webkit-scrollbar{display:none}
.switch [role="tab"]{
  position:relative; z-index:1; flex:none; border:0; background:none; cursor:pointer;
  padding:11px 18px; border-radius:999px; white-space:nowrap;
  font-weight:600; font-size:13.5px; color:var(--ink-2);
  transition:color .25s, background .25s;
}
.switch [role="tab"]:hover{color:var(--ink)}
/* Без JS активная вкладка красится сама */
.switch [role="tab"][aria-selected="true"]{background:var(--brand); color:var(--on-brand)}
/* С JS её подсвечивает бегунок */
.switch--js [role="tab"][aria-selected="true"]{background:transparent}
.switch__ind{
  position:absolute; z-index:0; left:0; top:5px; height:calc(100% - 10px); width:0;
  border-radius:999px; background:var(--brand); box-shadow:var(--shadow-brand);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), width .35s cubic-bezier(.2,.7,.3,1);
}
.switch__full{display:none}