.future-section {
    position: relative;
    overflow: hidden;
    padding: 140px 0;

    background:
            radial-gradient(circle at 50% 20%, rgba(203,166,87,.10), transparent 35%),
            linear-gradient(180deg,#050505 0%,#090909 100%);
}

.future-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
            linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);

    background-size: 80px 80px;

    opacity: .3;

    pointer-events: none;
}

.future-head {
    position: relative;
    z-index: 2;

    text-align: center;

    max-width: 850px;
    margin: 0 auto 90px;
}

.future-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

.future-card {
    position: relative;

    height: 320px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow: hidden;


    background:
            linear-gradient(
                    180deg,
                    rgba(12,12,12,.95),
                    rgba(5,5,5,.98)
            ),
            url('../img/metal-texture-mini.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: soft-light;

    border: 1px solid rgba(203,166,87,.18);

    transition: .45s ease;
}

.future-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
            repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 8px,
                    rgba(203,166,87,.015) 8px,
                    rgba(203,166,87,.015) 9px
            );

    pointer-events: none;

    opacity: .15;
}

.future-card::after {
    content: "";

    position: absolute;

    top: -200%;
    left: -50%;

    width: 200%;
    height: 400%;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(212,175,55,.08),
                    transparent
            );

    transform: rotate(18deg);

    animation: futureScan 8s linear infinite;

    pointer-events: none;
}

.future-card:hover {
    transform: translateY(-10px);

    border-color: rgba(203,166,87,.55);

    box-shadow:
            0 0 40px rgba(203,166,87,.15),
            inset 0 0 25px rgba(203,166,87,.08);
}

.future-card:hover .future-lock {
    transform: scale(1.4);
}

.future-code {
    position: relative;
    z-index: 2;

    color: #f1d99d;

    font-size: 28px;
    font-weight: 700;

    letter-spacing: .25em;

    margin-bottom: 20px;

    text-transform: uppercase;
}

.future-state {
    position: relative;
    z-index: 2;

    color: rgba(255,255,255,.65);

    letter-spacing: .25em;
    font-size: 12px;

    text-transform: uppercase;
}

.future-lock {
    position: relative;
    z-index: 2;

    margin-top: 30px;

    color: #cba657;
    font-size: 22px;

    transition: .4s ease;

    animation: futurePulse 2.5s ease-in-out infinite;
}

@keyframes futurePulse {

    0%,100% {
        opacity: .4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

@keyframes futureScan {

    from {
        transform: translateX(-45%) rotate(18deg);
    }

    to {
        transform: translateX(45%) rotate(18deg);
    }
}

@media (max-width: 900px) {

    .future-grid {
        grid-template-columns: 1fr;
    }

    .future-card {
        height: 240px;
    }
}