.psyguild-container {
    width: 100%;
    max-width: var(--psyguild-container-max);
    margin: 0 auto;
    padding: 0 var(--psyguild-container-pad);
}

.section-dark-panel {
    background: rgba(10, 17, 34, 0.4);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--psyguild-border-dark);
    border-bottom: 1px solid var(--psyguild-border-dark);
}

/* ── Section Spacing ─────────────────────────────────────────────── */
/* Khoảng cách chuẩn — dùng cho mọi section trên trang chủ */
.section-padding {
    padding-top:    var(--space-section);
    padding-bottom: var(--space-section);
}
.section-padding-top    { padding-top:    var(--space-section); }
.section-padding-bottom { padding-bottom: var(--space-section); }

/* Block đầu tiên sát header: padding top vừa phải */
.front-page-main > section:first-of-type {
    padding-top: clamp(28px, 4vw, 56px);
}

/* Khoảng cách giữa các section liền kề — dùng token chính */
.front-page-main > section + section {
    padding-top: var(--space-section);
}

/* Hero: vừa phải — không cần full vh */
.psyguild-hero.section-padding {
    min-height: clamp(360px, 55vh, 620px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Fluid Grid Utilities */
.psyguild-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 300px)), 1fr));
    gap: var(--space-card);
}
.psyguild-grid-split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-card);
}
@media (max-width: 991px) {
    .psyguild-grid-split {
        grid-template-columns: 1fr;
    }
}

.text-center { text-align: center; }
.mt-4 { margin-top: 2rem; }
.mb-4 { margin-bottom: 2rem; }

/* ── Scroll Reveal Utility ─────────────────────────────────────────── */
/* Hướng mặc định: fade lên. Các hướng khác được JS đặt qua --reveal-from. */
.reveal,
[data-reveal] {
    opacity: 0;
    transform: var(--reveal-from, translateY(28px));
    will-change: opacity, transform;
    transition:
        opacity   0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active,
[data-reveal].active {
    opacity: 1;
    transform: none;
}