/* ─── Hero top padding + gradient bg ─────────────────────────────────────────── */
.vol-hero {
    padding-top: clamp(5rem, 10vw, 8rem);
    background: linear-gradient(135deg, hsl(var(--secondary)) 0%, hsl(var(--background)) 60%, hsl(var(--background)) 100%);
}

/* ─── Role cards grid ────────────────────────────────────────────────────────── */
.vol-roles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .vol-roles-grid { grid-template-columns: repeat(3, 1fr); } }

.vol-role-card {
    background: hsl(var(--background));
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 2px 12px hsl(0 0% 0% / 0.08);
    transition: box-shadow 0.4s ease;
}
.vol-role-card:hover { box-shadow: 0 8px 30px hsl(0 0% 0% / 0.12); }

.vol-role-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: hsl(var(--secondary) / 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.4s ease;
}
.vol-role-card:hover .vol-role-icon { transform: scale(1.05); }
.vol-role-icon img { width: 2.25rem; height: 2.25rem; object-fit: contain; }

.vol-role-card h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-family: var(--font-sans);
    margin-bottom: 0.75rem;
}
.vol-role-card p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.65; }

/* ─── Requirements + Benefits layout ────────────────────────────────────────── */
.vol-rb-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 768px) { .vol-rb-layout { grid-template-columns: 1fr 1fr; } }

.vol-rb-desc { color: hsl(var(--muted-foreground)); margin-bottom: 2rem; }

.vol-req-col h2,
.vol-ben-col h2 { margin-block: 0.75rem 1.5rem; }

/* ─── Requirements list ──────────────────────────────────────────────────────── */
.vol-req-list { display: flex; flex-direction: column; gap: 0.75rem; }

.vol-req-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: hsl(var(--background));
    transition: box-shadow 0.25s ease;
}
.vol-req-item:hover { box-shadow: 0 4px 16px hsl(0 0% 0% / 0.08); }

.vol-req-check {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: hsl(var(--accent) / 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: hsl(var(--accent));
}
.vol-req-check i { width: 1rem; height: 1rem; }
.vol-req-item p { font-size: 0.875rem; font-weight: 500; }

/* ─── Benefits grid ──────────────────────────────────────────────────────────── */
.vol-ben-col { display: flex; flex-direction: column; }

.vol-ben-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
}

.vol-ben-card {
    background: hsl(var(--background));
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 1px 6px hsl(0 0% 0% / 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.vol-ben-card:hover { box-shadow: 0 4px 16px hsl(0 0% 0% / 0.08); transform: translateY(-2px); }

.vol-ben-icon { width: 2rem; height: 2rem; color: hsl(var(--accent)); margin-bottom: 0.75rem; }

.vol-ben-card p { font-size: 0.75rem; font-weight: 500; line-height: 1.4; }

.vol-cta-btn { width: 100%; margin-top: auto; }