/* ============================================================
   Grammerce — модалка «Заявка под ключ» (самодостаточная).
   Свои переменные, не зависит от палитры страницы. Разметку
   инжектит /public/js/turnkey.js. Стиль совпадает с index.css.
   ============================================================ */
.turnkey-overlay {
  --c-accent:   #34e5a4;
  --c-accent-2: #22d3ee;
  --c-text:     #f4f5f6;
  --c-muted:    #9499a1;
  --c-border:   rgba(255, 255, 255, .1);
  --c-border-2: rgba(255, 255, 255, .14);

  position: fixed; inset: 0; z-index: 4000;
  display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(4, 6, 8, .72); backdrop-filter: blur(6px);
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
}
.turnkey-overlay.open { display: flex; animation: turnkeyFade .2s ease; }
@keyframes turnkeyFade { from { opacity: 0; } to { opacity: 1; } }
.turnkey-card {
  position: relative; width: 100%; max-width: 420px;
  background: #101319; border: 1px solid var(--c-border-2);
  border-radius: 20px; padding: 28px 24px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .85);
  animation: turnkeyPop .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes turnkeyPop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.turnkey-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--c-border);
  color: var(--c-muted); font-size: 22px; line-height: 1;
  display: grid; place-items: center; transition: all .2s;
}
.turnkey-close:hover { background: rgba(255, 255, 255, .1); color: var(--c-text); }
.turnkey-card h3 { margin: 0 36px 8px 0; font-size: 20px; font-weight: 800; color: var(--c-text); }
.turnkey-sub { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.turnkey-form { display: flex; flex-direction: column; gap: 12px; }
.turnkey-form input {
  width: 100%; box-sizing: border-box;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--c-border);
  border-radius: 11px; padding: 13px 14px; font-size: 15px; color: var(--c-text);
  font-family: inherit; transition: border-color .2s;
}
.turnkey-form input::placeholder { color: #6b7178; }
.turnkey-form input:focus { outline: none; border-color: rgba(52, 229, 164, .5); }
.turnkey-error { margin: 0; font-size: 13px; color: #ff7a7a; }
.turnkey-submit {
  margin-top: 4px; cursor: pointer; border: none;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  color: #04130d; font-weight: 700; font-size: 15px; font-family: inherit;
  padding: 14px; border-radius: 12px; transition: transform .2s, opacity .2s;
}
.turnkey-submit:hover { transform: translateY(-2px); }
.turnkey-submit:disabled { opacity: .6; cursor: default; transform: none; }
.turnkey-success {
  margin: 8px 0 0; padding: 16px; text-align: center;
  font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--c-accent);
  background: rgba(52, 229, 164, .1); border: 1px solid rgba(52, 229, 164, .3); border-radius: 12px;
}