/* ═══════════════════════════════════════════════════════════════
   Free Prosthesis Bionic — одноэкранный ленд с открытой формой.
   Верхний баннер + карточка с выгодами и формой. Без квиза.
   Медицинская палитра (sky-blue), зелёная CTA как на референсе.
   ═══════════════════════════════════════════════════════════════ */

/* ── reset / base ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#0F172A;
  background:#EAEFF4;
  line-height:1.5;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; display:block; }
button { font:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }

/* ── tokens ───────────────────────────────────────────────── */
:root {
  --card:         #FFFFFF;
  --border:       #E2E8F0;
  --text:         #0F172A;
  --text-mute:    #475569;
  --text-light:   #64748B;
  --primary:      #0369A1;
  --primary-hov:  #075985;
  --primary-soft: #E0F2FE;
  --cta:          #16A34A;
  --cta-hov:      #15803D;
  --accent:       #B91C1C;   /* красная плашка-цена */
  --radius:       14px;
  --radius-lg:    22px;
}

/* ── общий контейнер: одна колонка по центру ──────────────── */
.lp {
  max-width:600px;
  margin:0 auto;
  min-height:100vh;
  background:var(--card);
  box-shadow:0 0 60px -20px rgba(15,23,42,.25);
  display:flex;
  flex-direction:column;
}

/* ═══════════════════════════════════════════════════════════
   БАННЕР
   ═══════════════════════════════════════════════════════════ */
.banner {
  position:relative;
  color:#0F172A;
  padding:26px 28px 30px;
  overflow:hidden;
  background:linear-gradient(135deg, #EFF5FC 0%, #DEEAF6 55%, #C9DCEE 100%);
}
/* продуктовый снимок протеза справа; multiply убирает белый фот jpg */
.banner-media {
  position:absolute;
  top:0; bottom:0; right:14px;
  height:100%;
  width:auto;
  max-width:52%;
  object-fit:contain;
  object-position:right center;
  mix-blend-mode:multiply;
  z-index:0;
  pointer-events:none;
}
/* лёгкий тинт слева — подстраховка читаемости текста на мобилке */
.banner::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(100deg,
    rgba(242,246,251,.85) 0%,
    rgba(242,246,251,.45) 40%,
    rgba(242,246,251,0) 62%);
}
.banner-inner { position:relative; z-index:2; }
.banner-title {
  margin:0 0 16px;
  font-size:clamp(30px, 8.5vw, 44px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.banner-list {
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:grid;
  gap:9px;
}
.banner-list li {
  position:relative;
  padding:8px 14px 8px 40px;
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.01em;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:11px;
  box-shadow:0 8px 20px -14px rgba(15,23,42,.45);
}
.banner-list li::before {
  content:"";
  position:absolute;
  left:12px; top:9px;
  width:19px; height:19px;
  border-radius:50%;
  background:var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.banner-badge {
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  background:var(--accent);
  color:#fff;
  font-size:clamp(20px, 6vw, 28px);
  font-weight:800;
  letter-spacing:-.01em;
  padding:9px 16px;
  border-radius:10px;
  box-shadow:0 12px 26px -10px rgba(185,28,28,.7);
  margin-bottom:20px;
}
.banner-badge span { font-size:14px; font-weight:700; text-transform:uppercase; opacity:.92; }
.banner-badge .rub { font-size:.78em; }
.banner-org {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:12px;
  line-height:1.3;
  color:#475569;
}
.banner-org img {
  height:34px; width:auto;
  opacity:.95;
}

/* ═══════════════════════════════════════════════════════════
   КАРТОЧКА С ФОРМОЙ
   ═══════════════════════════════════════════════════════════ */
.card {
  position:relative;
  margin-top:-16px;
  background:var(--card);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:24px 28px 30px;
  flex:1;
}
.pills { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.pill.pill--fond { background:#FEF3C7; color:#92400E; }

.card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.pill {
  display:inline-block;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:12px;
  font-weight:700;
  padding:7px 14px;
  border-radius:999px;
  line-height:1.2;
}
.card-emblem { height:38px; width:auto; flex-shrink:0; }

.card-title {
  margin:0 0 12px;
  font-size:clamp(22px, 5.5vw, 28px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--text);
}
.card-lede {
  margin:0 0 20px;
  font-size:15px;
  color:var(--text-mute);
  line-height:1.5;
}
.card-sub {
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin-bottom:12px;
}
.benefits {
  list-style:none;
  margin:0 0 24px;
  padding:0;
  display:grid;
  gap:11px;
}
.benefits li {
  position:relative;
  padding-left:32px;
  font-size:15px;
  color:var(--text);
  line-height:1.35;
}
.benefits li b { font-weight:700; }
.benefits li::before {
  content:"";
  position:absolute;
  left:0; top:0;
  width:22px; height:22px;
  border-radius:50%;
  background:#DCFCE7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316A34A' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ── форма ─────────────────────────────────────────────────── */
.form-head {
  font-size:20px;
  font-weight:800;
  color:var(--text);
  margin-bottom:14px;
  letter-spacing:-.01em;
}
.frm { display:grid; gap:12px; }
.field {
  position:relative;
  display:flex;
  align-items:center;
}
.field-ico {
  position:absolute;
  left:16px;
  width:20px; height:20px;
  color:var(--primary);
  pointer-events:none;
}
.field input {
  width:100%;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  background:#F8FAFC;
  padding:16px 16px 16px 46px;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  transition:border-color .15s, background .15s;
}
.field input::placeholder { color:#94A3B8; font-weight:500; }
.field input:focus {
  outline:none;
  border-color:var(--primary);
  background:#fff;
}
.frm-btn {
  margin-top:4px;
  border:0;
  border-radius:var(--radius);
  background:var(--cta);
  color:#fff;
  font-size:18px;
  font-weight:800;
  padding:17px 20px;
  letter-spacing:.01em;
  box-shadow:0 14px 30px -12px rgba(22,163,74,.65);
  transition:background .15s, transform .08s;
}
.frm-btn:hover { background:var(--cta-hov); }
.frm-btn:active { transform:scale(.99); }
.frm-btn[disabled] { opacity:.85; cursor:default; }

.consent {
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:12px;
  line-height:1.4;
  color:var(--text-light);
  cursor:pointer;
  user-select:none;
}
.consent-box {
  flex-shrink:0;
  width:18px; height:18px;
  margin-top:1px;
  border:1.5px solid #CBD5E1;
  border-radius:5px;
  background:#fff;
  position:relative;
  transition:background .12s, border-color .12s;
}
.consent.checked .consent-box {
  background:var(--primary);
  border-color:var(--primary);
}
.consent.checked .consent-box::after {
  content:"";
  position:absolute;
  left:5px; top:1px;
  width:5px; height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.consent a { color:var(--primary); text-decoration:underline; }
.frm-note {
  text-align:center;
  font-size:13px;
  color:var(--text-light);
  margin-top:2px;
}
.phone-line {
  text-align:center;
  margin-top:14px;
  padding-top:16px;
  border-top:1px solid var(--border);
  font-size:15px;
  color:var(--text-mute);
}
.phone-line a { color:var(--text); font-weight:800; font-size:19px; letter-spacing:-.01em; }
.phone-line a:hover { color:var(--primary); }
.phone-line span { display:block; font-size:12px; color:var(--text-light); margin-top:3px; }

/* ═══════════════════════════════════════════════════════════
   ПОДВАЛ
   ═══════════════════════════════════════════════════════════ */
.ftr {
  background:#F1F5F9;
  padding:22px 28px 28px;
  border-top:1px solid var(--border);
}
.ftr-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  justify-content:center;
  margin-bottom:14px;
}
.ftr-links a {
  font-size:13px;
  color:var(--primary);
  text-decoration:underline;
}
.ftr-addr {
  text-align:center;
  font-size:12px;
  color:var(--text-mute);
  margin-bottom:14px;
  line-height:1.5;
}
.ftr-disclaimer p {
  margin:0 0 8px;
  font-size:11px;
  line-height:1.5;
  color:var(--text-light);
  text-align:center;
}

/* ═══════════════════════════════════════════════════════════
   МОДАЛКИ
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(3px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:200;
}
.modal-overlay.active { display:flex; }
.modal-box {
  position:relative;
  background:#fff;
  border-radius:18px;
  max-width:560px;
  width:100%;
  max-height:86vh;
  overflow-y:auto;
  padding:32px 28px 28px;
  box-shadow:0 40px 90px -30px rgba(15,23,42,.5);
}
.modal-close {
  position:absolute;
  top:14px; right:14px;
  width:36px; height:36px;
  border:0;
  border-radius:50%;
  background:#F1F5F9;
  color:var(--text-mute);
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-close:hover { background:#E2E8F0; }
.modal-close svg { width:18px; height:18px; }
.modal-title {
  font-size:20px;
  font-weight:800;
  color:var(--text);
  margin-bottom:16px;
  padding-right:32px;
}
.modal-text { font-size:14px; color:var(--text-mute); line-height:1.55; }
.modal-text h3 { font-size:15px; color:var(--text); margin:16px 0 6px; font-weight:700; }
.modal-text p { margin:0 0 10px; }
.modal-text strong { color:var(--text); }

/* ═══════════════════════════════════════════════════════════
   ДЕСКТОП — карточка шире, баннер выше, но всё та же одна колонка
   ═══════════════════════════════════════════════════════════ */
@media (min-width:640px) {
  .lp { margin:24px auto; min-height:auto; border-radius:24px; overflow:hidden; }
  body { padding:0; }
  .banner { padding:38px 44px 42px; }
  .banner-list { grid-template-columns:auto auto; justify-content:start; gap:10px 14px; }
  .card { padding:32px 44px 40px; margin-top:-18px; }
  .ftr { padding:26px 44px 30px; }
}

/* ── подтверждение номера (появляется после полного ввода) ── */
.consent.pconf { display:none; margin-top:2px; background:#ECFDF3; border:1px solid #16A34A; border-radius:10px; padding:10px 12px; }
.consent.pconf.show { display:flex; }