/* ------------------------------------------------------------------
   Track 04 — contact form and contact cards.
   ------------------------------------------------------------------ */

.contact-wrap{
  border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(28px,5vw,52px);
  background:var(--surface); box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.contact-wrap::before{content:""; position:absolute; top:-40%; right:-10%; width:420px; height:420px; border-radius:50%; background:var(--accent-glow); filter:blur(85px); pointer-events:none; transition:background 1.2s var(--ease)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1/-1}
label{font-size:.85rem; font-weight:600; color:var(--text-2)}
input,textarea{
  font-family:var(--font-body); font-size:.96rem; color:var(--text);
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:14px 16px; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); resize:vertical;
}
input:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
textarea{min-height:130px}
input.invalid,textarea.invalid{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.form-note{font-size:.85rem; color:var(--text-3); margin:14px 0 0; transition:color .3s var(--ease)}
.form-note.ok{color:#4ADE80} .form-note.err{color:var(--accent)}
.spinner{display:none; width:15px; height:15px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
#submit.busy{pointer-events:none; opacity:.75}
#submit.busy .btn-arrow{display:none}
#submit.busy .spinner{display:block}
#submit.done{background:#4ADE80; box-shadow:0 10px 30px -10px #4ADE80}
.contact-side{display:flex; flex-direction:column; gap:12px}
.contact-card{
  display:flex; align-items:center; gap:14px; padding:17px 20px; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--surface); transition:all .35s var(--ease);
}
a.contact-card:hover{border-color:var(--accent); transform:translateX(4px)}
.contact-card .ic{width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); transition:color .8s var(--ease), background .8s var(--ease)}
.contact-card .ic svg{width:19px; height:19px}
.contact-card .t{font-size:.76rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.09em}
.contact-card .v{font-weight:600; font-size:.96rem}