/* Contact page — extends ../home/style.css */

.page-hero{
  padding:96px 0 60px;
  background:radial-gradient(600px 320px at 20% 0%, rgba(139,92,246,.16), transparent 70%);
}
.page-hero h1{ font-size:clamp(2rem, 4.6vw, 3rem); max-width:760px; }
.page-hero .lead{ max-width:560px; font-size:1.05rem; margin-top:16px; }

.contact-body{ padding-top:8px; }
.contact-grid{
  display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:start;
}
@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* Honeypot field — hidden from real visitors, catches bots */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-form{ padding:40px; display:flex; flex-direction:column; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.85rem; color:var(--text-muted); font-weight:500; }
.field input,
.field textarea{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:.95rem;
  resize:vertical;
  transition:border-color .15s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--text-faint); }
.field input:focus,
.field textarea:focus{
  outline:none; border-color:var(--accent-b);
}
.contact-form .btn{ align-self:flex-start; }
.form-note{
  font-size:.85rem; min-height:1.2em; margin:0;
}
.form-note.success{ color:var(--accent-c); }
.form-note.error{ color:#f87171; }

.contact-info{ display:grid; gap:20px; }
.info-card{ padding:26px 28px; }
.info-icon{
  width:40px; height:40px; border-radius:10px;
  background:color-mix(in srgb, var(--info-accent, var(--accent-b)) 16%, transparent);
  color:var(--info-accent, var(--accent-b));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.info-icon svg{ width:20px; height:20px; }
.info-card h4{
  font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; font-weight:500;
}
.info-card p{ margin:0; color:var(--text); font-size:.95rem; }
.info-card a{ color:var(--text); }
.info-card a:hover{ color:var(--accent-b); }