:root{--bg:#0b1020;--card:#0f162e;--muted:#98a2b3;--text:#e6eaff;--brand:#4f46e5;--radius:14px;--max:1120px}
:root[data-theme="light"]{--bg:#f6f8ff;--card:#ffffff;--muted:#5a6372;--text:#111826;--brand:#4f46e5}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto}
a{color:inherit;text-decoration:none}
.ctr{max-width:var(--max);margin:0 auto;padding:0 20px}
.hdr{position:sticky;top:0;backdrop-filter:saturate(140%) blur(12px);background:rgba(11,16,32,.65);border-bottom:1px solid rgba(255,255,255,.08);z-index:50}
[data-theme="light"] .hdr{background:rgba(255,255,255,.7)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800}
.logo__dot{width:18px;height:18px;border-radius:6px;background:conic-gradient(from 220deg,#22d3ee,#4f46e5,#22c55e);box-shadow:0 6px 16px rgba(79,70,229,.5)}
.menu{display:flex;gap:14px;align-items:center}
.iconbtn{background:transparent;border:1px solid rgba(255,255,255,.14);padding:6px 10px;border-radius:10px;color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--brand);color:#fff;padding:12px 16px;border-radius:12px;font-weight:700;border:0}
.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--text)}
.tag{display:inline-flex;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:13px}
.hero{padding:64px 0 40px}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:flex-start}
.lead{color:var(--muted)} .chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.chip{border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:6px 10px;color:var(--muted);font-size:13px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:18px}
.kpis{display:flex;gap:16px;margin-top:8px}
.kpis b{font-size:22px} .kpis span{display:block;color:var(--muted);font-size:12px}
input,textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px;color:var(--text)}
.check{display:flex;gap:8px;align-items:center;margin:8px 0}
.check a{white-space:nowrap}
.check input{width:16px;height:16px;accent-color:var(--brand)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px 20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px 0}
.steps{padding:24px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step{position:relative} .step .dot{position:absolute;top:-10px;left:-10px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.case .gain{color:#c7f8d4}
.calc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0}
.calc__out{display:flex;gap:16px;margin:8px 0}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:24px auto;background:linear-gradient(135deg, rgba(79,70,229,.9), rgba(34,197,94,.9));color:#fff}
.ftr{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;color:#98a2b3}
.modal{border:0;border-radius:14px;padding:0}
.modal::backdrop{background:rgba(0,0,0,.5)}
.modal__content{background:var(--card);padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,.1);min-width:320px;max-width:640px;color:var(--text)}
.hp{display:none}
.list{margin:0;padding-left:18px} .list li{margin:6px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.card form{display:grid;gap:12px}
.hero .card input,.hero .card textarea{padding:12px}
.form-actions{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px}
.form-note{font-size:13px;color:var(--muted);text-align:center}
/* placeholders light */
input::placeholder,textarea::placeholder{color:#e6eaff !important;opacity:1 !important}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#e6eaff !important}
input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:#e6eaff !important}
/* FAQ title blocks */
.section-head{max-width:1120px;margin:28px auto 10px;padding:0 20px}
.section-head h2{margin:0 0 6px}
.section-head p{margin:0;color:var(--muted)}
@media (max-width: 960px){
  .hero__grid,.split,.grid-3,.steps,.calc{grid-template-columns:1fr}
  .menu a{display:none} #burger{display:inline-flex}
}
/* toTop */
.to-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;border:none;background:var(--brand);color:#fff;font-size:22px;font-weight:bold;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,transform .2s;z-index:100}
.to-top:hover{transform:translateY(-3px)} .to-top.show{opacity:1;visibility:visible}
/* hide honeypot hard */
.hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important;border:0 !important;padding:0 !important;margin:0 !important}
/* --- DIALOG modal (компактная, центр, затемнение) --- */
.modal {
  padding: 0;
  border: 0;
  background: transparent;       /* сам диалог прозрачный */
  max-width: none;               /* не даём внешним правилам ограничивать */
  z-index: 1000;
}
.modal[open] { display: block; } /* на всякий случай для некоторых браузеров */

.modal::backdrop {
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Внутренняя панель */
.modal__content {
  width: min(560px, calc(100vw - 32px)); /* компактная ширина */
  margin: 0;                             /* центрирование делает сам <dialog> */
  background: var(--card, #0F1221);
  color: var(--text, #EAEAF0);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  display: grid;
  gap: 12px;
  padding: 20px;
  box-sizing: border-box;
}

/* Поля формы */
.fld span {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}
.fld input,
.fld textarea {
  width: 100%;
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.fld input:focus,
.fld textarea:focus {
  border-color: #6D6FF8;
  box-shadow: 0 0 0 3px rgba(109,111,248,.25);
}

.check { display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,.8); }
.hp { display:none !important; } /* honeypot */

/* Кнопки внутри модалки */
.row { display:flex; gap:10px; }
.btn {
  padding: 12px 16px; border: 0; border-radius: 10px;
  background: #635BFF; color: #fff; font-weight: 600; cursor: pointer;
}
.btn--ghost { background: rgba(255,255,255,.08); color: #fff; }
/* ====== Улучшения для модалки ====== */

/* Анимация появления/исчезновения */
@keyframes modal-fade-in {
  from {opacity: 0; transform: translateY(-20px) scale(0.98);}
  to   {opacity: 1; transform: translateY(0) scale(1);}
}
@keyframes modal-fade-out {
  from {opacity: 1; transform: translateY(0) scale(1);}
  to   {opacity: 0; transform: translateY(-20px) scale(0.98);}
}

.modal[open] .modal__content {
  animation: modal-fade-in .25s ease forwards;
}
.modal.closing .modal__content {
  animation: modal-fade-out .2s ease forwards;
}

/* Мобильные улучшения */
@media (max-width: 600px) {
  .modal__content {
    width: 92vw;
    padding: 16px;
    border-radius: 12px;
  }
  .fld input,
  .fld textarea {
    font-size: 14px;
    padding: 10px 12px;
  }
  .btn { padding: 10px 14px; font-size: 14px; }
}

/* Единый стиль кнопок в форме */
.modal__content .btn {
  transition: transform .15s ease, box-shadow .15s ease;
}
.modal__content .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}