/*==================================================
                    ABOUT
==================================================*/

.about-section {
    display:flex;
    align-items:center;
    gap:80px;
}

.about-stats{
    display:flex;
    flex-direction:column;
    gap:25px;
    margin-top:40px;
}

/*--------------------- About Image ---------------------*/

.about-image-wrapper{
    position:relative;
    display:inline-block;
    overflow:hidden;
    border-radius:14px;
    border:1px solid rgba(var(--color-accent-rgb),.45);
    box-shadow:
        0 0 20px rgba(var(--color-accent-rgb),.15);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.about-image-wrapper img{
    display:block;
    width:100%;
    height: auto;
    transition:
        transform .45s ease,
        filter .45s ease;
    filter:
        contrast(1.05)
        brightness(.96)
        saturate(.92);
}

.about-image-wrapper:hover{
    transform:translateY(-6px);
    border-color:var(--color-accent);
    box-shadow:
        0 0 15px var(--color-accent),
        0 0 35px rgba(var(--color-accent-rgb),.45);
}

/*--------------------- About Image Zoom ---------------------*/

.about-image-wrapper:hover img{
    transform:scale(1.03);
}

.status-badge{
    position:absolute;
    right:18px;
    bottom:18px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border:1px solid var(--color-accent);
    border-radius:8px;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(6px);
    color:var(--color-accent);
    font-size:14px;
    font-family:monospace;
}

/*--------------------- About Image LED ---------------------*/

.status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--color-accent);
    box-shadow:
        0 0 10px var(--color-accent),
        0 0 18px rgba(var(--color-accent-rgb),.8);
    animation:statusPulse 2s infinite;
}

@keyframes statusPulse{
    0%{
        transform:scale(1);
        opacity:1;
    }

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

    100%{
        transform:scale(1);
        opacity:1;
    }
}

/*--------------------- Stat Cards ---------------------*/

.stat-main{
    margin-top:18px;
    font-size:1.35rem;
    font-weight:700;
    color:var(--color-accent);
    letter-spacing:1px;
}

.stat-sub{
    margin-top:16px;
    color: var(--color-text-muted);
    font-size:.95rem;
    line-height:1.6;
}

.stat-card{
    padding:24px;
    background:rgba(5,10,8,.55);
    border:1px solid rgba(var(--color-accent-rgb),.25);
    border-radius:12px;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.stat-card:hover{
    transform:translateY(-6px);
    border-color:var(--color-accent);
    box-shadow:
        0 0 15px rgba(var(--color-accent-rgb),.30),
        0 0 35px rgba(var(--color-accent-rgb),.12);
}


/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 768px) {

    .about-section {
        flex-direction: column;
        align-items: center;

        gap: 45px;

        padding-left: 20px;
        padding-right: 20px;
    }

    .about-image-wrapper {
        flex: none;

        width: min(82vw, 320px);
        max-width: 320px;

        margin: 0 auto;
    }

    .about-right {
        width: 100%;
        min-width: 0;
    }

    .status-badge {
        right: 12px;
        bottom: 12px;

        gap: 8px;

        padding: 8px 12px;

        font-size: 0.75rem;
    }

    .status-dot {
        width: 8px;
        height: 8px;
    }
}