/* Contact page — validated demo form + info cards + next-steps list */
.contact-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.form { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-md); }
.field { margin-bottom:1.1rem; }
.field label { display:block; font-size:.84rem; font-weight:600; margin-bottom:.45rem; }
.field input, .field textarea { width:100%; background:var(--bg); border:1.5px solid var(--line); border-radius:11px; padding:.85rem 1rem; font-size:.98rem; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.field textarea { resize:vertical; min-height:118px; }
.field.invalid input, .field.invalid textarea { border-color:#d1453b; }
.field .err { color:#d1453b; font-size:.78rem; margin-top:.35rem; display:none; }
.field.invalid .err { display:block; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form .btn { width:100%; margin-top:.4rem; }
.form__ok { display:none; text-align:center; padding:2.2rem 1rem; }
.form__ok.show { display:block; }
.form__ok .ring { width:62px; height:62px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; margin:0 auto 1.2rem; }
.form.sent .form__inner { display:none; }

.info-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.7rem; margin-bottom:1rem; }
.info-card .row { display:flex; align-items:center; gap:14px; }
.info-card .ic { width:42px; height:42px; border-radius:11px; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; flex:none; }
.info-card h4 { font-family:var(--font-sans); font-size:.98rem; font-weight:700; }
.info-card p, .info-card a { color:var(--text-2); font-size:.92rem; }
.info-card a:hover { color:var(--accent); }
.nexts { counter-reset:step; list-style:none; padding:0; display:grid; gap:1rem; }
.nexts li { display:flex; gap:14px; align-items:flex-start; }
.nexts li::before { counter-increment:step; content:counter(step); flex:none; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:.86rem; display:grid; place-items:center; }
html[data-theme="dark"] .nexts li::before { color:#1a0f0a; }
.nexts li b { display:block; } .nexts li span { color:var(--text-2); font-size:.92rem; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }