/* ===== Бренд Імпекс Форкліфт ===== */
:root{
  --primary:#d62f2f;            /* fallback для старих браузерів */
  --primary-fg:#ffffff;
  --fg:#1a1a1a;
  --bg:#ffffff;
  --muted:#6b7280;
  --card:#f4f4f5;
  --card-hover:#ececee;
  --border:#e5e5e7;
  --radius:12px;
  --maxw:480px;
  --footer-h:96px;
}
/* Точний бренд-червоний як у поточному квізі */
@supports (color: oklch(0 0 0)){
  :root{ --primary: oklch(58% .21 27); --ring: oklch(58% .21 27 / .35); }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ===== Прогрес-бар ===== */
.progress{
  position:fixed;top:0;left:0;right:0;height:4px;
  background:#ececed;z-index:50;
}
.progress__fill{
  height:100%;width:0;background:var(--primary);
  transition:width .35s ease;
}

/* ===== Загальний каркас кроку ===== */
#app{min-height:100%}
.step{
  min-height:100dvh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:48px 20px calc(var(--footer-h) + 12px);
}
.step__inner{width:100%;max-width:var(--maxw);margin:0 auto}
.h1{font-size:1.6rem;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.sub{color:var(--muted);font-size:1.02rem;margin-bottom:24px}

/* ===== Опції (single-select) ===== */
.options{display:flex;flex-direction:column;gap:12px}
.option{
  width:100%;padding:18px 20px;
  background:var(--card);
  border:1.5px solid transparent;
  border-radius:var(--radius);
  font-size:1rem;font-weight:500;color:var(--fg);
  text-align:center;transition:.15s;
}
.option:hover{background:var(--card-hover)}
.option.is-active{
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 8%, #fff);
}

/* ===== Текстове поле (крок деталей) ===== */
.textarea{
  width:100%;min-height:140px;resize:vertical;
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:16px;font-size:1rem;
  font-family:inherit;color:var(--fg);
}
.textarea:focus{outline:none;border-color:var(--primary)}
.textarea::placeholder{color:var(--muted)}

/* ===== Нижня навігація (назад / далі) ===== */
.nav{
  position:fixed;left:0;right:0;bottom:0;height:var(--footer-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 20px;max-width:560px;margin:0 auto;
  background:linear-gradient(to top, var(--bg) 70%, transparent);
}
.nav__btn{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.nav__back{background:transparent;color:var(--muted)}
.nav__back:hover{background:var(--card)}
.nav__next{background:var(--primary);color:var(--primary-fg)}
.nav__next[disabled]{opacity:.45;cursor:not-allowed}
.nav__next svg{width:22px;height:22px}
.nav__back svg{width:24px;height:24px}

/* ===== Головна ===== */
.home{
  min-height:100dvh;display:flex;flex-direction:column;
}
.home__media{
  width:100%;background:#f4f4f5;
  display:flex;align-items:center;justify-content:center;
  padding:14px;
}
.home__media img{width:100%;height:auto;object-fit:contain;border-radius:8px}
.home__content{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  text-align:center;padding:28px 22px 40px;max-width:560px;margin:0 auto;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;align-self:center;
  font-size:.85rem;color:var(--muted);font-weight:600;
  background:var(--card);padding:6px 12px;border-radius:999px;margin-bottom:16px;
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.home__content h1{font-size:1.9rem;font-weight:800;margin-bottom:14px}
.home__lead{color:#374151;font-size:1.02rem;margin-bottom:18px}
.home__lead strong{font-weight:700}
.home__facts{margin-bottom:18px}
.home__facts p{font-weight:600;font-size:1.02rem}
.home__facts p + p{color:var(--muted);font-weight:500}
.home__q{font-weight:700;font-size:1.05rem;margin-bottom:18px}

/* Велика кнопка-CTA */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:17px 24px;border-radius:var(--radius);
  background:var(--primary);color:var(--primary-fg);
  font-size:1.05rem;font-weight:700;transition:.15s;
}
.btn:hover{filter:brightness(.95)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.btn svg{width:20px;height:20px}
.btn--ghost{background:var(--card);color:var(--fg)}

/* ===== Форма контакту ===== */
.form{display:flex;flex-direction:column;gap:14px;text-align:left}
.input{
  width:100%;padding:16px;background:var(--card);
  border:1.5px solid transparent;border-radius:var(--radius);
  font-size:1rem;font-family:inherit;color:var(--fg);
}
.input:focus{outline:none;border-color:var(--primary);background:#fff}
.input::placeholder{color:var(--muted)}
.phone{display:flex;gap:10px}
.phone__code{
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:0 14px;background:var(--card);border-radius:var(--radius);
  font-weight:600;
}
.phone__code .flag{font-size:1.1rem}
.phone .input{flex:1}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--primary);flex:none}
.consent a{color:var(--primary);font-weight:600;text-decoration:none}
.consent a:hover{text-decoration:underline}
.form__error{color:var(--primary);font-size:.88rem;min-height:1em}
/* honeypot — приховане поле-пастка для ботів (людина його не бачить і не заповнює) */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;opacity:0;pointer-events:none}

/* ===== Сторінка подяки ===== */
.ty{min-height:100dvh;display:flex;flex-direction:column}
.ty__media{width:100%;background:#f4f4f5;padding:14px;display:flex;justify-content:center}
.ty__media img{width:100%;height:auto;max-height:240px;object-fit:contain;border-radius:8px}
.ty__content{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  text-align:center;padding:26px 22px 36px;max-width:520px;margin:0 auto;
}
.ty h1{font-size:1.55rem;font-weight:800;margin-bottom:14px}
.ty__text{color:#374151;margin-bottom:22px}
.ty__phones{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.ty__phone{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px;border:1.5px solid var(--border);border-radius:var(--radius);
  font-weight:700;font-size:1.05rem;transition:.15s;text-decoration:none;
}
.ty__phone:hover{border-color:var(--primary);color:var(--primary)}
.ty__phone svg{width:18px;height:18px}
.ty__site{margin-bottom:18px;color:var(--muted);font-size:.95rem}
.ty__site a{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:700;text-decoration:none}
.ty__socials{display:flex;justify-content:center;gap:14px;margin-bottom:26px}
.ty__socials a{
  width:42px;height:42px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;transition:.15s;color:var(--fg);
}
.ty__socials a:hover{background:var(--primary);color:#fff}
.ty__socials svg{width:20px;height:20px}

/* ===== Десктоп: спліт-макети ===== */
@media (min-width:768px){
  .home{flex-direction:row}
  .home__media{width:50%;height:100dvh;padding:32px}
  .home__media img{max-height:80dvh}
  .home__content{width:50%;padding:40px}
  .home__content h1{font-size:2.4rem}

  .ty{flex-direction:row;align-items:center}
  .ty__media{width:48%;height:100dvh;align-items:center;padding:32px}
  .ty__media img{max-height:70dvh}
  .ty__content{width:52%}

  .h1{font-size:1.9rem}
  .nav{max-width:var(--maxw);right:auto;left:50%;transform:translateX(-50%)}
}

/* ===== Лід-ген блоки ===== */
/* Смужка довіри */
.trust{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 18px}
.trust span{font-size:.72rem;font-weight:600;color:#374151;background:var(--card);border-radius:999px;padding:5px 10px;white-space:nowrap}
.trust span::before{content:'✓ ';color:var(--primary);font-weight:800}

/* Екран-результат */
.step--result{justify-content:flex-start;padding-top:28px;padding-bottom:32px}
.step__inner--wide{max-width:520px;display:flex;flex-direction:column}
.result__back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);font-weight:600;font-size:.9rem;margin-bottom:12px;background:none}
.result__back:hover{color:var(--fg)}
.result__back svg{width:18px;height:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 16px}
.chip{font-size:.8rem;font-weight:600;color:var(--primary);
  background:color-mix(in srgb,var(--primary) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--primary) 25%,#fff);
  border-radius:999px;padding:5px 12px}

.mcards{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;text-align:left}
.mcard{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1.5px solid var(--border);border-radius:var(--radius);background:#fff}
.mcard__ic{width:44px;height:44px;flex:none;border-radius:10px;background:var(--card);
  display:flex;align-items:center;justify-content:center;color:var(--primary)}
.mcard__ic svg{width:26px;height:26px}
.mcard__b{flex:1;display:flex;flex-direction:column}
.mcard__b strong{font-size:.95rem}
.mcard__b span{font-size:.82rem;color:var(--muted)}
.mcard__price{font-size:.8rem;font-weight:700;color:var(--muted);
  background:var(--card);padding:6px 10px;border-radius:8px;white-space:nowrap}

.result__lead{font-size:.95rem;color:#374151;margin-bottom:16px;text-align:center}
.reassure{font-size:.82rem;color:var(--muted);text-align:center;margin-top:6px}

/* Швидкий контакт (escape-hatch) */
.hatch{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.hatch__btn{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;
  color:var(--fg);background:var(--card);border-radius:999px;padding:9px 14px;text-decoration:none}
.hatch__btn:hover{background:var(--card-hover)}
.hatch__btn svg{width:16px;height:16px;color:var(--primary)}