/*
=========================================================
BPD GAMING NETWORK
ABOUT US
=========================================================
*/

.about-page {
    --about-panel:
        rgba(18, 18, 18, 0.94);
    --about-panel-light:
        rgba(29, 29, 29, 0.88);
    --about-border:
        rgba(255, 255, 255, 0.09);
    --about-border-bright:
        rgba(255, 138, 36, 0.34);
    --about-text:
        #f5f5f5;
    --about-text-muted:
        #b8b8b8;
    --about-accent:
        #ff8a24;
    --about-accent-light:
        #ffb45f;
    --about-accent-soft:
        rgba(255, 138, 36, 0.13);

    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 60vh;
    padding:
        clamp(
            28px,
            5vw,
            70px
        )
        clamp(
            12px,
            3vw,
            28px
        );
    overflow: hidden;
    color: var(--about-text);
}

.about-page::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(
            circle at 78% 12%,
            rgba(255, 138, 36, 0.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(255, 209, 102, 0.05),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #050505,
            #0c0c0c 50%,
            #050505
        );
    content: "";
    pointer-events: none;
}

.about-page-content {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(100%, 980px);
    min-width: 0;
    margin-inline: auto;
}

.about-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding:
        clamp(
            28px,
            5vw,
            52px
        );
    overflow: hidden;
    border:
        1px solid
        var(--about-border);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            var(--about-panel-light),
            var(--about-panel)
        );
    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.35);
}

.about-card::before {
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background:
        linear-gradient(
            180deg,
            var(--about-accent),
            transparent
        );
    content: "";
    opacity: 0.75;
}

.about-label {
    display: block;
    color:
        var(--about-accent-light);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.22em;
}

.about-card h1 {
    margin: 12px 0 0;
    color: var(--about-text);
    font-size:
        clamp(
            2.4rem,
            6vw,
            4.5rem
        );
    line-height: 1;
    letter-spacing: -0.045em;
}

.about-card p {
    max-width: 780px;
    margin: 22px 0 0;
    color:
        var(--about-text-muted);
    font-size:
        clamp(
            0.95rem,
            1.8vw,
            1.05rem
        );
    line-height: 1.75;
}

.about-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 28px;
    padding: 0 20px;
    border:
        1px solid
        var(--about-border-bright);
    border-radius: 10px;
    background:
        var(--about-accent-soft);
    color:
        var(--about-accent-light);
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        color 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.about-contact-link:hover,
.about-contact-link:focus-visible {
    border-color:
        var(--about-accent-light);
    background:
        rgba(255, 138, 36, 0.2);
    color: #ffffff;
    box-shadow:
        0 0 18px
        rgba(255, 138, 36, 0.25);
    outline: none;
    transform: translateY(-2px);
}

.about-contact-link:focus-visible {
    outline:
        2px solid
        var(--about-accent-light);
    outline-offset: 3px;
}

.about-contact-link:active {
    transform: translateY(0);
}

@media (max-width: 640px) {
    .about-page {
        min-height: 50vh;
        padding: 20px 10px 42px;
    }

    .about-card {
        padding: 28px 23px;
        border-radius: 15px;
    }

    .about-card::before {
        top: 24px;
        bottom: 24px;
    }

    .about-card p {
        margin-top: 18px;
    }

    .about-contact-link {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-page
    .about-contact-link {
        transition: none;
    }
}

body[data-animations="off"]
.about-page
.about-contact-link {
    transition: none;
}