/*
 * ==========================================================================
 * #PAGE: Home Page — ZHM-X v5.0.1
 * ==========================================================================
 *
 * ONLY layout, positioning, and page-specific context.
 * All colors, fonts, sizes, shadows → _canonical-ui.css
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. FAQ SECTION — Layout Context
   ═══════════════════════════════════════════════════════════════════════ */

.si-siteeman .container {
   
    margin: 0 auto;
    /*padding: 0 var(--sys-spacing-lg);*/
}

.si-siteeman .faq-section {
    padding: var(--sys-spacing-3xl) 0;
    background-color: var(--sys-color-neutral-0);
}

/* Search Input — layout only */
.si-siteeman .faq-search {
    margin-bottom: var(--sys-spacing-xl);
    text-align: center;
}

/* Category Filter — layout only */
.si-siteeman .faq-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sys-spacing-md);
    margin-bottom: var(--sys-spacing-3xl);
}

/* Hidden state for filter/search */
.si-siteeman .zfaq-item.hidden {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. PARTICLE BACKGROUND — Page-Specific Animation
   ═══════════════════════════════════════════════════════════════════════ */

.bg-home-an {
    --_particle-size: 1px;
    --_particle-spacing-fast: 30px;
    --_particle-spacing-slow: 60px;
    --_particle-color: var(--sys-color-secondary);
    --_anim-duration-fast: 6s;
    --_anim-duration-slow: 12s;

    position: relative;
    overflow: hidden;
    background-color: var(--sys-color-neutral-0);
}

.bg-home-an::before,
.bg-home-an::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    will-change: transform;
    z-index: 0;
}

.bg-home-an::before {
    background-image: radial-gradient(
        circle,
        var(--_particle-color) var(--_particle-size),
        transparent var(--_particle-size)
    );
    background-size: var(--_particle-spacing-fast) var(--_particle-spacing-fast);
    animation: bg-home-move-fast var(--_anim-duration-fast) linear infinite;
    opacity: 0.6;
}

.bg-home-an::after {
    background-image: radial-gradient(
        circle,
        var(--_particle-color) var(--_particle-size),
        transparent var(--_particle-size)
    );
    background-size: var(--_particle-spacing-slow) var(--_particle-spacing-slow);
    animation: bg-home-move-slow var(--_anim-duration-slow) linear infinite;
    opacity: 0.3;
}

.bg-home-an > * {
    position: relative;
    z-index: 1;
}

@keyframes bg-home-move-fast {
    from { transform: translate(0, 0); }
    to   { transform: translate(
        calc(-1 * var(--_particle-spacing-fast)),
        calc(-1 * var(--_particle-spacing-fast))
    ); }
}

@keyframes bg-home-move-slow {
    from { transform: translate(0, 0); }
    to   { transform: translate(
        var(--_particle-spacing-slow),
        var(--_particle-spacing-slow)
    ); }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. PRINCIPLES SECTION — Layout Only
   ═══════════════════════════════════════════════════════════════════════ */

.gc-principles-section {
    padding: var(--sys-spacing-3xl) 0;
    background-color: var(--sys-color-neutral-75);
    overflow: hidden;
}

.gc-container {
    margin: 0 auto;
    padding: 0 var(--sys-spacing-lg);
    max-width: 1200px;
    text-align: center;
}

/* Grid layout */
.gc-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sys-spacing-xl);
}

/* Scroll animation — page-specific */
.gc-principle-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out,
                transform 0.6s ease-out;
}

.gc-principles-section.is-visible .gc-principle-card {
    opacity: 1;
    transform: translateY(0);
}

.gc-principles-section.is-visible .gc-principle-card:nth-child(1) { transition-delay: 0.1s; }
.gc-principles-section.is-visible .gc-principle-card:nth-child(2) { transition-delay: 0.2s; }
.gc-principles-section.is-visible .gc-principle-card:nth-child(3) { transition-delay: 0.3s; }

/* ═══════════════════════════════════════════════════════════════════════
   4. RESPONSIVE — Layout Only
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    
    
    .si-siteeman .faq-categories {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sys-spacing-sm);
      
    }

    .si-siteeman .faq-categories .zbtn {
        width: 100%;
        white-space: normal;
    }

    .gc-principles-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .gc-principles-section {
        padding: var(--sys-spacing-2xl) 0;
    }
}