/* ============================================================
   HPACE Landings — CORE (shared) stylesheet
   Общее для всех лендингов: сброс, лид-форма, текстовая капча,
   попап «Спасибо». Уникальная вёрстка/шрифты/анимации каждого
   лендинга живут в его собственном <style>.
   Темизация — через CSS-переменные на каждой странице:
     --lead-accent, --lead-accent-2, --lead-bg, --lead-card,
     --lead-ink, --lead-muted, --lead-line, --lead-radius
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
img,svg,video{display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{font:inherit}

:root{
  --lead-accent:#6C4DF2;--lead-accent-2:#9b7bff;
  --lead-bg:#0d0c14;--lead-card:#16142a;--lead-ink:#f4f3fb;
  --lead-muted:#9a98ad;--lead-line:rgba(255,255,255,.14);--lead-radius:16px;
  --lead-ok:#19c37d;--lead-err:#ff5d6c;
}

/* ---------- Lead form (общая, темизируемая) ---------- */
.pxl-lead{font-family:inherit;display:grid;gap:24px;width:100%}
.pxl-lead .pxl-captcha{margin-top:6px}
.pxl-lead .pxl-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.pxl-lead .pxl-row{grid-template-columns:1fr}}
.pxl-field{display:grid;gap:11px}
.pxl-field label{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--lead-muted)}
.pxl-field input,.pxl-field textarea,.pxl-field select{
  width:100%;padding:14px 16px;border-radius:calc(var(--lead-radius) - 4px);
  background:color-mix(in srgb, var(--lead-card) 60%, transparent);
  border:1px solid var(--lead-line);color:var(--lead-ink);font-size:15px;
  transition:border-color .2s, box-shadow .2s;outline:none}
.pxl-field textarea{min-height:96px;resize:vertical}
.pxl-field input::placeholder,.pxl-field textarea::placeholder{color:color-mix(in srgb,var(--lead-muted) 80%, transparent)}
.pxl-field input:focus,.pxl-field textarea:focus,.pxl-field select:focus{
  border-color:var(--lead-accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--lead-accent) 22%, transparent)}
.pxl-field.invalid input,.pxl-field.invalid textarea{border-color:var(--lead-err)}
.pxl-err-msg{color:var(--lead-err);font-size:12px;display:none}
.pxl-field.invalid .pxl-err-msg{display:block}

.pxl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0}
/* инлайн-«спасибо» больше не используется — успех показывает попап .pxl-modal */
.pxl-thanks{display:none!important}

.pxl-submit{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;
  margin-top:8px;padding:17px 22px;border-radius:calc(var(--lead-radius) - 2px);
  background:linear-gradient(120deg,var(--lead-accent),var(--lead-accent-2));
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.01em;
  transition:transform .2s, box-shadow .2s, filter .2s;
  box-shadow:0 12px 30px -10px color-mix(in srgb,var(--lead-accent) 60%, transparent)}
.pxl-submit:hover{transform:translateY(-2px);filter:brightness(1.05)}
.pxl-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.pxl-note{font-size:12px;color:var(--lead-muted);line-height:1.5}
.pxl-note a{color:var(--lead-accent);text-decoration:underline}

/* согласие на обработку ПДн / политику */
.pxl-consent{display:flex;align-items:flex-start;gap:11px;margin-top:2px;font-size:12.5px;color:var(--lead-muted);line-height:1.55;cursor:pointer}
.pxl-consent>span{flex:1}
.pxl-consent input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:6px;
  border:1.5px solid var(--lead-line);background:color-mix(in srgb,var(--lead-card) 60%, transparent);transition:.2s;position:relative;cursor:pointer}
.pxl-consent input:checked{background:var(--lead-accent);border-color:var(--lead-accent)}
.pxl-consent input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pxl-consent.invalid input{border-color:var(--lead-err)}
.pxl-consent a{color:var(--lead-accent);text-decoration:underline}

/* иконки (svg вместо эмодзи) */
.ico svg,.b .ic svg,.c .ic svg,.f .ic svg,.feat-ic svg{display:block}

/* ---------- Текстовая капча ---------- */
.pxl-captcha{display:grid;gap:10px}
.pxl-cap-label{font-size:12.5px;font-weight:600;color:var(--lead-muted)}
.pxl-cap-row{display:flex;align-items:center;gap:10px}
.pxl-cap-canvas{flex:1 1 auto;width:auto;height:58px;border-radius:10px;border:1px solid var(--lead-line);background:#eef0f6}
.pxl-cap-refresh{width:48px;height:58px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--lead-line);background:color-mix(in srgb,var(--lead-card) 60%, transparent);
  color:var(--lead-muted);font-size:20px;transition:.25s;flex:0 0 auto}
.pxl-cap-refresh:hover{color:var(--lead-accent);transform:rotate(90deg)}
.pxl-cap-input{width:100%;padding:14px 16px;border-radius:10px;letter-spacing:.3em;
  text-transform:uppercase;font-weight:700;text-align:center;
  background:color-mix(in srgb,var(--lead-card) 60%, transparent);
  border:1px solid var(--lead-line);color:var(--lead-ink);outline:none;transition:.2s}
.pxl-cap-input:focus{border-color:var(--lead-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--lead-accent) 22%, transparent)}
.pxl-captcha.solved .pxl-cap-input{border-color:var(--lead-ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--lead-ok) 22%, transparent)}
.pxl-captcha.error .pxl-cap-row{animation:pxlShake .4s}
@keyframes pxlShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ---------- Попап «Спасибо» ---------- */
.pxl-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,6,16,.6);backdrop-filter:blur(6px)}
.pxl-modal.open{display:flex;animation:pxlFade .25s ease}
.pxl-modal-card{position:relative;width:100%;max-width:420px;text-align:center;
  background:var(--lead-card,#fff);color:var(--lead-ink,#111);border:1px solid var(--lead-line);
  border-radius:22px;padding:38px 30px 30px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  animation:pxlPop .35s cubic-bezier(.2,.8,.2,1)}
.pxl-modal-x{position:absolute;top:12px;right:16px;font-size:26px;line-height:1;color:var(--lead-muted)}
.pxl-modal-check{width:70px;height:70px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  font-size:34px;color:#fff;background:linear-gradient(135deg,var(--lead-accent),var(--lead-accent-2))}
.pxl-modal-card h3{margin:0 0 8px;font-size:23px}
.pxl-modal-card p{margin:0 0 22px;color:var(--lead-muted);font-size:15px;line-height:1.6}
.pxl-modal-ok{padding:13px 28px;border-radius:12px;font-weight:700;color:#fff;
  background:linear-gradient(120deg,var(--lead-accent),var(--lead-accent-2))}
@keyframes pxlFade{from{opacity:0}to{opacity:1}}
@keyframes pxlPop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}

/* ---------- прогресс прокрутки ---------- */
.pxl-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:9999;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--lead-accent),var(--lead-accent-2));transition:transform .1s linear}

/* ---------- плавающая кнопка ---------- */
.pxl-fab{position:fixed;right:18px;bottom:18px;z-index:9000;display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;color:#fff;
  background:linear-gradient(120deg,var(--lead-accent),var(--lead-accent-2));
  box-shadow:0 14px 34px -10px color-mix(in srgb,var(--lead-accent) 70%, transparent);
  transform:translateY(140%);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .4s}
.pxl-fab.show{transform:none;opacity:1}
.pxl-fab:hover{filter:brightness(1.06)}
@media(max-width:560px){.pxl-fab span{display:none}.pxl-fab{padding:15px;border-radius:50%}}

/* ---------- попап кейса ---------- */
.pxl-casemodal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,6,16,.62);backdrop-filter:blur(6px)}
.pxl-casemodal.open{display:flex;animation:pxlFade .25s ease}
.pxl-cm-card{position:relative;width:100%;max-width:560px;background:var(--lead-card,#fff);color:var(--lead-ink,#111);
  border:1px solid var(--lead-line);border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  animation:pxlPop .35s cubic-bezier(.2,.8,.2,1)}
.pxl-cm-x{position:absolute;top:10px;right:14px;z-index:2;font-size:28px;line-height:1;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.pxl-cm-img{aspect-ratio:16/9;overflow:hidden;background:#0a0a14}
.pxl-cm-img img{width:100%;height:100%;object-fit:cover}
.pxl-cm-body{padding:24px}
.pxl-cm-tag{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--lead-accent);font-weight:700}
.pxl-cm-title{margin:8px 0 10px;font-size:24px}
.pxl-cm-desc{margin:0 0 20px;color:var(--lead-muted);font-size:15px;line-height:1.65}
.pxl-cm-actions{display:flex;gap:12px;flex-wrap:wrap}
.pxl-cm-cta{padding:13px 22px;border-radius:12px;font-weight:700;color:#fff;text-decoration:none;
  background:linear-gradient(120deg,var(--lead-accent),var(--lead-accent-2))}
.pxl-cm-link{padding:13px 22px;border-radius:12px;font-weight:600;text-decoration:none;color:var(--lead-ink);
  border:1px solid var(--lead-line)}
.pxl-cm-link:hover{border-color:var(--lead-accent);color:var(--lead-accent)}

/* ---------- утилиты ---------- */
.pxl-hidden{display:none!important}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}