/* ================================================================
   LoopReset — Contact Page Styles
   ================================================================ */

.hero { background:var(--sf); border-bottom:1px solid var(--bd); padding:4rem 1.5rem; text-align:center; }
.hero-inner { max-width:600px; margin:0 auto; }
.hero h1 { font-size:2.4rem; font-weight:900; color:#fff; line-height:1.15; margin-bottom:1rem; }
.hero-sub { font-size:.95rem; color:var(--mt); line-height:1.8; }

.contact-wrap { max-width:var(--mx); margin:0 auto; padding:4rem 1.5rem 6rem; display:grid; grid-template-columns:1fr 340px; gap:4rem; align-items:start; }

.form-card { background:var(--sf); border:1px solid var(--bd); border-radius:var(--rd); padding:2.5rem; }
.form-card h2 { font-size:1.4rem; font-weight:800; color:#fff; margin-bottom:.4rem; }
.form-card .sub { font-size:.875rem; color:var(--mt); margin-bottom:2rem; }

.field { margin-bottom:1.25rem; }
.field label { display:block; font-size:.82rem; font-weight:600; color:var(--tx); margin-bottom:.45rem; }
.field input,
.field select,
.field textarea {
  width:100%; background:var(--sf2); border:1px solid var(--bd); border-radius:8px;
  padding:.8rem 1rem; font-size:.9rem; color:var(--tx); font-family:inherit;
  outline:none; transition:border-color .2s; -webkit-appearance:none;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color:var(--pr); }
.field input::placeholder,
.field textarea::placeholder { color:var(--gy); }
.field select option { background:var(--sf2); }
.field textarea { resize:vertical; min-height:140px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.submit-btn { width:100%; background:var(--grad); color:#fff; border:none; border-radius:50px; padding:.9rem; font-size:1rem; font-weight:800; font-family:inherit; cursor:pointer; transition:opacity .2s; margin-top:.5rem; }
.submit-btn:hover { opacity:.85; }

.alert { border-radius:var(--rd); padding:1rem 1.25rem; margin-bottom:1.5rem; font-size:.9rem; font-weight:600; }
.alert.success { background:rgba(155,139,244,.12); border:1px solid rgba(155,139,244,.3); color:var(--prm); }
.alert.error   { background:rgba(244,114,182,.1);  border:1px solid rgba(244,114,182,.3);  color:#FB7185; }

.sidebar { display:flex; flex-direction:column; gap:1.25rem; }
.sb-card { background:var(--sf); border:1px solid var(--bd); border-radius:var(--rd); padding:1.5rem; }
.sb-card h3 { font-size:.875rem; font-weight:700; color:#fff; margin-bottom:1rem; }
.sb-row { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.75rem; font-size:.875rem; color:var(--mt); }
.sb-row:last-child { margin-bottom:0; }
.sb-icon { font-size:1.1rem; flex-shrink:0; margin-top:.1rem; }
.sb-row strong { color:var(--tx); display:block; font-size:.8rem; margin-bottom:.1rem; }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#10B981; box-shadow:0 0 8px rgba(16,185,129,.6); animation:pulse 2s infinite; margin-right:.4rem; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }

.sb-cta { background:linear-gradient(135deg,rgba(155,139,244,.08),rgba(244,114,182,.05)); border-color:rgba(155,139,244,.3); text-align:center; }
.sb-cta p { font-size:.82rem; color:var(--mt); margin-bottom:1.25rem; line-height:1.6; }
.sb-cta-price { font-size:1.8rem; font-weight:900; color:#fff; }
.sb-cta-note { font-size:.75rem; color:var(--gy); margin:.2rem 0 1rem; }
.sb-btn { display:flex; align-items:center; justify-content:center; background:var(--grad); color:#fff; padding:.8rem; border-radius:50px; font-size:.875rem; font-weight:700; transition:opacity .2s; }
.sb-btn:hover { opacity:.85; color:#fff; }
.sb-guar { font-size:.72rem; color:var(--gy); margin-top:.6rem; }

@media (max-width:860px) {
  .contact-wrap { grid-template-columns:1fr; }
  .sidebar { order:-1; display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .field-row { grid-template-columns:1fr; }
  .sidebar { display:flex; }
}