/* ==========================================================================
   XSECURE — HOME PAGE (index.html)
   ========================================================================== */

/* Home fits exactly one screen on desktop */
.page-home .main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-size: 100% 100%;
}

.page-home .hero {
    flex: 1;
}

/* Swiper carousel ========================================================= */
/* Wide carousel: the illustration gets more of the row than the intro text */
.page-home .hero {
    padding-left: 4%;
    padding-right: 4%;
    padding-top: calc(var(--nav-height) + 24px);   /* leaves room for the logo strip */
    padding-bottom: 10px;
}

.page-home .hero-container { max-width: 1640px; gap: 32px; }
.page-home .hero-left      { flex: 1.3; min-width: 0; }
.page-home .hero-right     { flex: 1; }

.hero-swiper {
    width: 100%;
    max-width: 720px;             /* carousel size */
    padding-bottom: 36px;
}

.hero-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-home .img-xsecure {
    width: 100%;
    max-width: 720px;
}

.hero-swiper .swiper-pagination-bullet {
    background: var(--color-accent);
    opacity: 0.5;
}

.hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    box-shadow: 0 0 8px var(--color-accent);
}

/* Customer logo marquee ================================================== */
.customers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;                    /* space between "Trusted by" and the logos */
    padding: 6px 0 4px;
}

.customers__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.marquee {
    --logo-scale: 0.68;          /* overall logo size: 1 = full size from index.html */
    width: 100%;
    overflow: hidden;
    /* fade the logos in and out at both edges */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 70s linear infinite;   /* bigger number = slower */
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__list {
    display: flex;
    align-items: center;
    gap: 72px;
    padding-right: 72px;          /* same as the gap, so the loop joins evenly */
    list-style: none;
}

.marquee__list img {
    /* every logo gets the same visual area: --w is set per logo in index.html */
    width: calc(var(--w) * var(--logo-scale, 1));
    height: auto;
    max-width: none;
    opacity: 0.8;
    transition: opacity var(--transition), filter var(--transition);
}

.marquee__list img:hover {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--color-accent-glow));
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Responsive ============================================================== */
@media (max-width: 1024px) {
    .page-home .main-wrapper {
        background-size: cover;
    }

    .page-home .hero-left { width: 100%; }
    .customers { padding-top: 36px; }
}

@media (max-width: 576px) {
    .page-home .img-xsecure { max-width: 100%; }
    .marquee__list { gap: 44px; padding-right: 44px; }
    .marquee { --logo-scale: 0.54; }
}