.contact-page { padding-top: var(--header-h); } .page-hero { background: linear-gradient(135deg, var(--secondary), var(--primary-dark)); padding: 60px 0; color: #fff; } .page-hero-title { font-size: 40px; font-weight: 900; margin: 8px 0 12px; } .page-hero p { color: rgba(255,255,255,.75); font-size: 16px; } .contact-grid { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start; } .contact-info h2 { font-size: 22px; font-weight: 700; margin-bottom: 28px; } .info-item { display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start; } .info-icon { font-size: 24px; } .info-item strong { display: block; font-size: 13px; font-weight: 700; color: var(--gray-500); margin-bottom: 2px; } .info-item p { font-size: 15px; color: var(--gray-800); } .contact-form { padding: 36px; } .contact-form h2 { font-size: 22px; font-weight: 700; margin-bottom: 24px; } .form-alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; } .form-alert.success { background: #d1fae5; color: #065f46; } .form-alert.error { background: #fee2e2; color: #991b1b; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-group label { font-size: 13px; font-weight: 600; color: var(--gray-700); } .required { color: var(--danger); } .form-group input, .form-group select, .form-group textarea { padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; transition: border-color var(--fast); outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,81,162,.1); } .privacy-agree { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray-600); margin-bottom: 20px; cursor: pointer; } .privacy-agree a { color: var(--primary); } @media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }