/* ========== Forms ========== */
.form{
  display:grid; gap:1rem;
}
.field{ display:grid; gap:.35rem }
.label{
  color:var(--cs-text); font-weight:600;
  display:flex; align-items:center; gap:.5rem;
}
.input,
.select,
.textarea{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) padding-box,
              linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) border-box;
  border:1px solid transparent;
  color:var(--cs-text);
  padding:.85rem 1rem; border-radius:var(--r-md);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.input::placeholder,
.textarea::placeholder{ color: rgba(232,236,247,.55) }
.input:focus,
.select:focus,
.textarea:focus{ box-shadow: var(--ring) }

.inline{
  display:flex; gap:.8rem; align-items:center; flex-wrap:wrap
}

/* Radios / checkboxes */
.choice{ display:flex; align-items:center; gap:.6rem; cursor:pointer }
.choice input{ accent-color: var(--cs-accent) }

/* Success / error */
.is-error .input, .is-error .select, .is-error .textarea{ border-color: rgba(255,107,107,.6) }
.is-success .input, .is-success .select, .is-success .textarea{ border-color: rgba(56,230,182,.6) }
.msg{ font-size:.9rem }
.msg--error{ color:#ff9a9a }
.msg--help{ color:var(--cs-muted) }

/* ========== Steps timeline ("How it works") ========== */
.steps{ display:grid; gap:1rem }
.steps__item{
  position:relative; display:grid; gap:.3rem; padding:1rem 1rem 1rem 3.2rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) border-box;
  border:1px solid transparent; border-radius:var(--r-md);
}
.steps__item::before{
  content: attr(data-step);
  position:absolute; left:1rem; top:1rem;
  width:1.8rem; height:1.8rem; border-radius:50%;
  background: linear-gradient(135deg, #ffe27a, #38e6b6); color:#242424;
  display:grid; place-items:center; font-weight:800; font-size:.95rem;
  box-shadow: var(--cs-glow);
}
.steps__item::after{
  content:''; position:absolute; left:1.9rem; top:3rem; bottom:-1rem; width:2px;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0));
}
.steps__item:last-child::after{ display:none }

/* ========== Icon list ========== */
.icon-list{ display:grid; gap:.7rem }
.icon-item{ display:flex; gap:.7rem; align-items:flex-start }
.icon-item__ico{
  width:28px; height:28px; border-radius:8px;
  background: linear-gradient(135deg, rgba(255,213,77,.35), rgba(56,230,182,.25));
  display:grid; place-items:center; color:#111;
}

/* ========== Badges ========== */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .55rem; border-radius:999px; font-weight:600; font-size:.85rem;
  background: rgba(255,255,255,.06); border:1px solid var(--cs-border)
}
.badge--success{ background: rgba(56,230,182,.18); border-color: rgba(56,230,182,.35); color:#caffec }
.badge--warn{ background: rgba(255,213,77,.18); border-color: rgba(255,213,77,.35); color:#fff2c4 }

/* ========== Stat pill (компонент) ========== */
.stat-pill{
  display:grid; gap:.35rem; padding:1rem 1.1rem; border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) border-box;
  border:1px solid transparent; min-width: 180px;
}
.stat-pill__label{ color: var(--cs-muted); font-size:.95rem }
.stat-pill__value{ font-weight:800; font-size: clamp(18px, 3.8vw, 28px) }
.stat-pill__suffix{ opacity:.85; font-weight:700; margin-left:.15rem }

/* Сетка стат-пилюль */
.stats{ display:flex; gap:.9rem; flex-wrap:wrap }

/* ========== Sticky CTA (mobile) ========== */
#sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  transform: translateY(100%); transition: transform .25s ease, opacity .2s ease;
  opacity:0; pointer-events:none;
}
#sticky-cta[data-show="true"]{
  transform: translateY(0); opacity:1; pointer-events:auto;
}
#sticky-cta .bar{
  margin: .6rem .6rem env(safe-area-inset-bottom) .6rem;
  padding:.65rem .8rem; border-radius:16px;
  background: linear-gradient(180deg, rgba(26,32,64,.98), rgba(21,26,51,.98));
  border:1px solid var(--cs-border); box-shadow: 0 -6px 24px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
}
#sticky-cta .txt{ display:flex; align-items:center; gap:.6rem; color:var(--cs-text); font-weight:700 }
#sticky-cta .txt .dot{
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffe27a, #ffb300);
  box-shadow: 0 0 10px rgba(255,213,77,.6), 0 0 20px rgba(255,213,77,.25);
}
#sticky-cta .btn{ padding:.7rem .95rem }

/* Показываем только на мобильных/планшетах */
@media (min-width: 1001px){
  #sticky-cta{ display:none }
}

/* ========== Minor polish ========== */
.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: rgba(255,255,255,.06); border:1px solid var(--cs-border); border-radius:8px;
  padding:.15rem .4rem; font-size:.88rem
}