.hero-p1-card {
background: linear-gradient(180deg, rgba(29, 58, 84, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
border-radius: var(--vstts-radius);
color: #ffffff;
padding: 60px 40px;
position: relative;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.hero-p1-title {
font-size: 38px;
font-weight: 700;
line-height: 1.15;
margin-bottom: 14px;
color: #ffffff;
}
.hero-p1-subtitle {
font-size: 18px;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 28px;
max-width: 650px;
} .p2-slot-card {
background-color: var(--vstts-bg-base-03);
border-radius: var(--vstts-radius);
border: 1px dashed #cbd5e1;
padding: 30px;
text-align: center;
} .useful-link-card {
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
height: auto;
}
.useful-link-card:hover {
background-color: #ebf3fc;
border-color: #e2e8f0;
opacity: 0.75;
}
.useful-link-img {
display: block;
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
border-radius: 16px;
}
@media (max-width: 768px) {
.hero-p1-card {
padding: 40px 24px;
}
.hero-p1-title {
font-size: 26px;
}
.hero-p1-subtitle {
font-size: var(--font-body-m);;
}
}