/* ========== LEAD SECTION ========== */

.leadbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));border:1px solid rgba(111,196,255,.4);border-radius:26px;overflow:hidden;background:linear-gradient(135deg,rgba(20,60,160,.4),rgba(8,18,56,.6));backdrop-filter:blur(20px);box-shadow:0 16px 48px rgba(30,123,255,.15);transition:all .4s;animation:leadAppear .8s ease-out backwards}

@keyframes leadAppear{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.leadbox:hover{border-color:rgba(111,196,255,.6);background:linear-gradient(135deg,rgba(30,80,190,.6),rgba(15,30,80,.8));box-shadow:0 24px 60px rgba(30,123,255,.25);transform:translateY(-8px)}

.leadbox .info{padding:clamp(28px,4.5vw,54px) clamp(22px,4vw,50px)}
.leadbox .info h2{font-size:clamp(30px,3.6vw,42px);text-transform:uppercase}
.leadbox .info p{margin-top:16px}

.leadbox ul{list-style:none;margin-top:26px;display:grid;gap:13px}
.leadbox li{display:flex;gap:12px;align-items:center;color:#fff;font-size:15px;animation:fadeInUp .5s ease-out backwards}
.leadbox li:nth-child(1){animation-delay:.1s}
.leadbox li:nth-child(2){animation-delay:.2s}
.leadbox li:nth-child(3){animation-delay:.3s}

.leadbox li svg{width:24px;height:24px;flex:none;padding:5px;border-radius:50%;background:rgba(30,123,255,.22);border:1px solid rgba(120,168,255,.4);stroke:var(--cyan)}

.leadbox .ct{margin-top:28px;font-size:15px}
.leadbox .ct a{color:#fff;font-weight:600}

/* ========== FORM ========== */

.form{padding:clamp(28px,4.5vw,54px) clamp(22px,4vw,50px);background:rgba(3,8,28,.55)}

.f{margin-bottom:16px}
.f label{display:block;font-size:13px;color:var(--dim);margin-bottom:7px}
.f input,.f textarea{width:100%;background:rgba(10,22,60,.7);border:1px solid var(--line);border-radius:11px;padding:13px 16px;color:#fff;font-family:inherit;font-size:15px;transition:all .3s ease-out;letter-spacing:.3px}
.f input::placeholder,.f textarea::placeholder{color:#6b7c99}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--blue);background:rgba(14,35,80,.9);box-shadow:0 0 0 4px var(--glow);transform:scale(1.01)}

.f.bad input{border-color:#ff5b5b;animation:wobble .5s ease-in-out}

@keyframes wobble{0%,100%{transform:translateX(0)}15%{transform:translateX(-5px)}30%{transform:translateX(5px)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}}

.f .m{font-size:12px;color:#ff8b8b;margin-top:6px;display:none}
.f.bad .m{display:block}

.f textarea{resize:vertical;min-height:80px}

.agree{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px;font-size:12.5px;color:var(--dim)}
.agree input{margin-top:3px;accent-color:var(--blue);width:16px;height:16px;flex:none}
.agree a{color:var(--cyan);text-decoration:underline}

.form .btn-pri{width:100%}
.note{margin-top:14px;font-size:12px;color:#5e6f96;text-align:center}

.ok{display:none;text-align:center;padding:50px 20px;animation:successSlide .8s cubic-bezier(.34,1.56,.64,1)}
.ok.show{display:block}

@keyframes successSlide{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

.ok .r{width:88px;height:88px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(16,185,129,.2),transparent);border:2px solid var(--success);animation:successPulse 2s ease-in-out infinite;box-shadow:0 0 0 2px var(--success)}

@keyframes successPulse{0%,100%{box-shadow:0 0 0 0 var(--success),0 0 0 8px rgba(16,185,129,.2)}50%{box-shadow:0 0 0 8px var(--success),0 0 0 16px rgba(16,185,129,.1)}}

.ok .r svg{width:44px;height:44px;stroke:var(--success);stroke-width:2.5;animation:flip 1s ease-in-out}

@keyframes flip{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

.ok h3{font-size:28px;text-transform:uppercase;color:#fff;margin-top:8px}
.ok p{margin-top:10px;color:var(--ink)}
.ok-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}

/* ========== FOOTER ========== */

footer{border-top:1px solid var(--line);padding:48px 0 36px;background:rgba(3,7,22,.6)}

.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot .col p{font-size:14px;color:var(--dim);max-width:320px;margin-top:16px}

.fl{display:flex;gap:54px;flex-wrap:wrap}
.fl h5{color:#fff;font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.fl a{display:block;font-size:14px;color:var(--dim);margin-bottom:9px}
.fl a:hover{color:#fff}

.cr{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:#5e6f96;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ========== MOBILE CTA ========== */

.mcta{position:fixed;inset:auto 0 0;z-index:55;display:none;gap:10px;padding:12px 16px;background:rgba(4,10,38,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line)}

.mcta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;border-radius:11px;padding:14px;animation:ctaSlide .5s ease-out backwards}
.mcta .c{animation-delay:0s;color:#fff;border:1px solid var(--line);background:rgba(120,168,255,.08)}
.mcta .l{animation-delay:.1s;color:#fff;background:linear-gradient(135deg,#2a8bff,#1450d8)}

@keyframes ctaSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.mcta .c svg{width:18px;height:18px;stroke:var(--cyan)}
.mcta a:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(30,123,255,.3)}

/* лид-бокс и отступы стали флюидными — медиазапрос нужен только мобильной CTA-панели */
@media(max-width:620px){
  body{padding-bottom:74px}
  .mcta{display:flex}
}