/* ========================================================================== 
   ARC GAMES — Home Benefits
   Home-only value proposition cards below the Hero.
   ========================================================================== */

.arc-home-benefits {
    width: 100%;
    padding-block: clamp(var(--arc-space-xl), 5vw, 4.5rem);
    background: var(--arc-bg-dark);
}

.arc-home-benefits__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--arc-space-lg);
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
}

.arc-home-benefit {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 260px;
    padding: var(--arc-space-lg) var(--arc-space-lg) var(--arc-space-xl);
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 0%,
            color-mix(in srgb, var(--arc-primary) 13%, transparent) 0%,
            transparent 58%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--arc-bg-panel) 94%, var(--arc-primary)) 0%,
            var(--arc-bg-panel) 48%,
            color-mix(in srgb, var(--arc-bg-dark) 82%, var(--arc-bg-panel)) 100%
        );
    border: 0;
    border-radius: 0;
}

.arc-home-benefit::before,
.arc-home-benefit::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--arc-primary) 52%, transparent) 0%,
        color-mix(in srgb, var(--arc-primary) 34%, transparent) 58%,
        transparent 100%
    );
}

.arc-home-benefit::before {
    left: 0;
}

.arc-home-benefit::after {
    right: 0;
}

.arc-home-benefit__icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 0 var(--arc-space-sm);
    flex: 0 0 auto;
}

.arc-home-benefit__icon img {
    display: block;
    width: 78px;
    height: 78px;
    margin: 0;
    object-fit: contain;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--arc-primary) 42%, transparent));
}

.arc-home-benefit__title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
    max-width: 16ch;
    margin: 0 0 var(--arc-space-sm);
    color: var(--arc-primary);
    font-family: var(--arc-font-main);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.arc-home-benefit__text {
    max-width: 31ch;
    margin: 0;
    color: var(--arc-text);
    font-family: var(--arc-font-main);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

@media (min-width: 820px) {
    .arc-home-benefits__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--arc-space-xl);
    }

    .arc-home-benefit {
        min-height: 300px;
        padding: var(--arc-space-lg) var(--arc-space-md) var(--arc-space-xl);
    }
}

@media (min-width: 1200px) {
    .arc-home-benefit {
        padding-inline: var(--arc-space-lg);
    }
}