.nwc-lead-section {
background: #f4f8fd;
padding: 72px 0;
} .nwc-lead-section,
.nwc-lead-section * {
box-sizing: border-box;
} .nwc-lead-wrap {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: 40px;
align-items: center;
}
@media (min-width: 900px) {
.nwc-lead-wrap {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 64px;
}
} .nwc-lead-heading {
font-size: clamp(1.7rem, 1rem + 2.4vw, 2.6rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.01em;
color: #2934c4;
margin: 14px 0 12px;
}
.nwc-lead-heading .nwc-accent-word {
color: #4bb3ff;
}
.nwc-lead-sub {
font-size: 1.05rem;
line-height: 1.6;
color: #475569;
margin: 0 0 22px;
max-width: 30em;
}
.nwc-lead-points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.nwc-lead-points li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 1rem;
color: #1f2937;
font-weight: 600;
} .nwc-lead-points i {
margin-top: 2px;
width: 24px;
height: 24px;
border-radius: 7px;
background: color-mix(in srgb, var(--nwc-accent, #2934c4) 12%, #fff);
color: var(--nwc-accent, #2934c4);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
flex-shrink: 0;
} .nwc-lead-intro,
.nwc-lead-card-outer {
min-width: 0;
} .nwc-lead-card-outer {
position: relative;
}
.nwc-lead-shadow {
position: absolute;
inset: 0;
border-radius: 26px;
background: color-mix(in srgb, var(--nwc-accent, #2934c4) 14%, transparent);
transform: rotate(-2deg) translateX(14px) translateY(-12px);
pointer-events: none;
}
.nwc-lead-card {
position: relative;
z-index: 1;
background: #fff;
border-radius: 24px;
padding: 34px 30px;
box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
}
.nwc-lead-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.nwc-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.nwc-field label {
font-size: 0.9rem;
font-weight: 700;
color: #1f2937;
}
.nwc-req {
color: var(--nwc-accent, #2934c4);
}
.nwc-opt {
font-weight: 500;
color: #94a3b8;
}
.nwc-field input,
.nwc-field textarea {
width: 100%;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 12px 14px;
font-size: 1rem;
font-family: inherit;
color: #0f172a;
background: #fff;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nwc-field textarea {
resize: vertical;
min-height: 56px;
}
.nwc-field input::placeholder,
.nwc-field textarea::placeholder {
color: #94a3b8;
}
.nwc-field input:focus,
.nwc-field textarea:focus {
outline: none;
border-color: var(--nwc-accent, #2934c4);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--nwc-accent, #2934c4) 14%, transparent);
}
.nwc-field input[aria-invalid="true"],
.nwc-field textarea[aria-invalid="true"] {
border-color: #dc2626;
} .nwc-lead-submit {
margin-top: 4px;
justify-content: center;
background: var(--nwc-accent, #2934c4);
cursor: pointer;
border: none;
}
.nwc-lead-submit[disabled] {
opacity: 0.7;
cursor: progress;
}
.nwc-spinner {
display: none;
width: 16px;
height: 16px;
margin-left: 10px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: nwc-spin 0.7s linear infinite;
}
.nwc-lead-form.is-sending .nwc-spinner {
display: inline-block;
}
@keyframes nwc-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.nwc-spinner {
animation: none;
}
}
.nwc-lead-trust {
font-size: 0.82rem;
color: #94a3b8;
margin: 2px 0 0;
text-align: center;
}
.nwc-lead-status {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
text-align: center;
}
.nwc-lead-status.is-error {
color: #dc2626;
}
.nwc-lead-status.is-success {
color: #15803d;
}
.nwc-lead-status:empty {
display: none;
} .nwc-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .nwc-lead-form.is-done .nwc-field,
.nwc-lead-form.is-done .nwc-lead-submit,
.nwc-lead-form.is-done .nwc-lead-trust {
display: none;
}