.faq {
margin-top: 5rem;
scroll-margin-top: 120px;
} .faq-list {
max-width: 58rem;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
background: transparent;
} .faq-card {
position: relative;
width: 100%;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.05);
border-radius: 1.25rem;
padding:
1.4rem
2rem
2.2rem;
box-shadow:
0 10px 30px rgba(15, 23, 42, 0.04);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
border-color var(--transition-fast),
background var(--transition-fast);
}
.faq-card:hover {
transform: translateY(-1px);
border-color: rgba(37, 99, 235, 0.08);
box-shadow:
0 18px 40px rgba(15, 23, 42, 0.07);
} .faq-card + .faq-card {
margin-top: 1rem;
} .faq-content {
width: 100%;
max-width: 46rem;
margin-inline: auto;
} .faq-head {
display: flex;
align-items: baseline;
gap: .85rem;
margin-bottom: .7rem;
} .faq-icon {
display: inline-block;
flex-shrink: 0;
font-size: .95rem;
line-height: 1;
color: #64748b;
} .faq-card-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
color: var(--color-text-main);
} .faq-text {
margin-bottom: 0;
font-size: .95rem;
line-height: 1.75;
color: var(--color-text-muted);
} .faq-cta {
margin-top: .9rem;
}
.faq-cta a {
display: inline-flex;
align-items: center;
color: #203c85;
text-decoration: none;
font-size: .95rem;
font-weight: 500;
transition:
color var(--transition-fast),
opacity var(--transition-fast);
}
.faq-cta a:hover {
color: #0f172a;
opacity: .85;
} .faq-card.is-open {
background:
linear-gradient(
180deg,
#ffffff 0%,
#f8fbff 100%
);
border-color: rgba(37, 99, 235, 0.08);
box-shadow:
0 20px 44px rgba(15, 23, 42, 0.08);
} @media (max-width: 1024px) {
.faq {
margin-top: 4rem;
}
.faq-list {
max-width: 100%;
}
.faq-card {
padding:
1.15rem
1.25rem
1.35rem;
border-radius: 1rem;
}
.faq-content {
max-width: 100%;
}
.faq-card-title {
font-size: .98rem;
line-height: 1.45;
}
.faq-text {
font-size: .92rem;
line-height: 1.7;
}
}
@media (max-width: 768px) {
.faq-head {
gap: .7rem;
}
.faq-card + .faq-card {
margin-top: .85rem;
}
}