/* =====================================================================
   Atrustos | Request a demo / Get early access
   Real scene behind, story left, glass form card right.
   ===================================================================== */
.lead-page { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--nav-h) + 64px) 0 80px; overflow: hidden; }
.lead-page__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: drift 46s ease-in-out infinite alternate; }
.lead-page::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(3,4,10,.82) 0%, rgba(3,4,10,.45) 55%, rgba(3,4,10,.7) 100%),
              linear-gradient(180deg, rgba(3,4,10,.5) 0%, transparent 25%, transparent 80%, var(--bg) 100%); }
.lead-page__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.lead-page__text h1 { margin: 22px 0 18px; font-size: clamp(40px, 5vw, 72px); letter-spacing: -.05em; line-height: .98; }
.lead-page__text .lead { margin-bottom: 24px; max-width: 520px; }
.lead-page__tick { flex: none; width: 20px; color: var(--mint); font-weight: 700; }
.lead-card { max-width: none; padding: clamp(22px, 3vw, 36px); }

/* ---------- form ---------- */
.lead-form { display: grid; gap: 16px; }
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label, .seg legend { font-size: 13px; font-weight: 550; color: var(--text-2); }
.field__opt { margin-left: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--text-3); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--text); padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-2); outline: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.field select option { background: #0c0e1c; color: var(--text); }
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(255,154,107,.7); background: rgba(255,255,255,.07); box-shadow: 0 0 0 4px rgba(255,106,43,.14); }
.field--error input, .field--error select { border-color: rgba(255,92,134,.7); }
.field__err { font-size: 12.5px; color: #ff9ab4; }

.seg { border: 0; display: grid; gap: 8px; }
.seg legend { margin-bottom: 8px; }
.seg__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg__opt { position: relative; cursor: pointer; }
.seg__opt input { position: absolute; opacity: 0; }
.seg__opt span { display: grid; gap: 3px; height: 100%; padding: 13px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2);
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.seg__opt b { font-size: 14.5px; font-weight: 600; }
.seg__opt small { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.seg__opt input:checked + span { border-color: var(--accent); background: rgba(255,106,43,.1); }
.seg__opt input:focus-visible + span { box-shadow: 0 0 0 4px rgba(255,106,43,.2); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.lead-form__error { padding: 12px 14px; border-radius: 12px; font-size: 14px; color: #ffd0dc; background: rgba(255,92,134,.12); border: 1px solid rgba(255,92,134,.35); }
.lead-form__submit { width: 100%; margin-top: 4px; }
.lead-form__submit:disabled { opacity: .7; cursor: progress; }

.lead-done { display: grid; justify-items: start; gap: 14px; padding: 12px 4px; }
.lead-done__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #04130c;
  background: linear-gradient(180deg, #4ff0b4, #1fb57f); box-shadow: 0 0 40px -6px rgba(79,240,180,.8); }
.lead-done h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; }
.lead-done p { color: var(--text-2); max-width: 44ch; margin-bottom: 8px; }

@media (max-width: 1020px) {
  .lead-page__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .lead-page { padding-top: calc(var(--nav-h) + 36px); }
  .lead-form__row, .seg__opts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lead-page__bg { animation: none; } }