.contact-hero {
background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-primary) 100%);
padding: var(--space-24) 0 var(--space-16);
position: relative;
overflow: hidden;
}

.contact-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.1;
}

.contact-hero-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 800px;
margin: 0 auto;
}

.contact-hero h1 {
color: var(--color-text-inverse);
margin-bottom: var(--space-6);
font-size: var(--font-size-5xl);
}

.contact-hero .lead {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-xl);
line-height: var(--line-height-relaxed);
margin-bottom: 0;
}

.contact-methods {
padding: var(--space-16) 0;
background-color: var(--color-bg-alt);
}

.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}

@media (min-width: 640px) {
.contact-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 1024px) {
.contact-grid {
grid-template-columns: repeat(3, 1fr);
}
}

.contact-card {
height: 100%;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.contact-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-2xl);
}

.contact-icon {
width: 56px;
height: 56px;
background-color: var(--color-primary);
color: var(--color-text-inverse);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
}

.contact-card.card-premium .contact-icon {
background-color: var(--color-accent);
color: var(--color-charcoal);
}

.contact-card h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-3);
color: var(--color-charcoal);
}

.contact-card p {
color: var(--color-gray-700);
margin-bottom: 0;
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
}

.contact-card a {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
text-decoration: underline;
text-underline-offset: 2px;
}

.contact-card a:hover {
color: var(--color-secondary);
}

.contact-form-section {
padding: var(--space-20) 0;
background-color: var(--color-bg);
}

.contact-form-wrapper {
max-width: 800px;
margin: 0 auto var(--space-16);
}

.form-header {
text-align: center;
margin-bottom: var(--space-10);
}

.form-header h2 {
color: var(--color-charcoal);
margin-bottom: var(--space-4);
}

.form-header p {
color: var(--color-gray-600);
max-width: 600px;
margin: 0 auto;
}

.contact-form {
background-color: var(--color-bg);
border: 2px solid var(--color-gray-100);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
}

.form-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
.form-row {
grid-template-columns: repeat(2, 1fr);
}
}

.form-group {
margin-bottom: var(--space-4);
}

.form-group label {
display: block;
font-weight: var(--font-weight-semibold);
color: var(--color-charcoal);
margin-bottom: var(--space-2);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
}

.required {
color: var(--color-primary);
}

.error-message {
display: block;
color: var(--color-danger);
font-size: var(--font-size-sm);
margin-top: var(--space-1);
min-height: 20px;
}

.form-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-6);
}

.form-note {
font-size: var(--font-size-sm);
color: var(--color-gray-500);
margin: 0;
}

.form-success {
background-color: var(--color-success);
color: var(--color-text-inverse);
padding: var(--space-8);
border-radius: var(--radius-xl);
text-align: center;
margin-top: var(--space-6);
}

.success-content svg {
margin: 0 auto var(--space-4);
}

.success-content h3 {
color: var(--color-text-inverse);
margin-bottom: var(--space-2);
}

.success-content p {
color: rgba(255, 255, 255, 0.9);
margin: 0;
}

.support-info {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
max-width: 800px;
margin: 0 auto;
}

@media (min-width: 640px) {
.support-info {
grid-template-columns: repeat(2, 1fr);
}
}

.support-block {
background-color: var(--color-bg-alt);
padding: var(--space-6);
border-radius: var(--radius-lg);
border-left: 4px solid var(--color-secondary);
}

.support-block h3 {
font-size: var(--font-size-lg);
margin-bottom: var(--space-3);
color: var(--color-charcoal);
}

.support-block p {
margin: 0;
color: var(--color-gray-700);
font-size: var(--font-size-base);
}

.support-block a {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}

.support-block a:hover {
color: var(--color-secondary);
}

.support-guarantee {
border-left-color: var(--color-accent);
}

.social-section {
padding: var(--space-16) 0;
background-color: var(--color-charcoal);
}

.social-content {
text-align: center;
max-width: 600px;
margin: 0 auto;
}

.social-section h2 {
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}

.social-section p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--space-6);
}

.social-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
}

.social-links .btn-outline {
border-color: rgba(255, 255, 255, 0.5);
color: var(--color-text-inverse);
}

.social-links .btn-outline:hover {
background-color: var(--color-text-inverse);
color: var(--color-charcoal);
border-color: var(--color-text-inverse);
}

.btn-lg {
padding: var(--space-4) var(--space-8);
font-size: var(--font-size-lg);
}

@media (max-width: 767px) {
.contact-hero {
padding: var(--space-16) 0 var(--space-10);
}

.contact-hero h1 {
font-size: var(--font-size-3xl);
}

.contact-form {
padding: var(--space-6);
}

.contact-form-wrapper {
margin-bottom: var(--space-10);
}
}