.contact-section { padding: 5rem 0 6rem; } .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: start; } .contact-intro { color: var(--text-muted); font-size: 0.96rem; line-height: 1.85; margin-bottom: 2.5rem; } .contact-links { display: flex; flex-direction: column; gap: 1rem; } .contact-link { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: border-color 0.2s; } .contact-link:hover { border-color: var(--accent); } .contact-link-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; } .contact-link-value { font-size: 0.9rem; color: var(--text); } /* Form */ .contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group label { font-size: 0.8rem; font-family: var(--font-mono); color: var(--text-muted); letter-spacing: 0.05em; } .form-group input, .form-group textarea { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1rem; color: var(--text); font-family: var(--font-main); font-size: 0.9rem; outline: none; transition: border-color 0.2s; resize: vertical; } .form-group input:focus, .form-group textarea:focus { border-color: var(--accent); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; gap: 3rem; } }