.about-section{
    position:relative;
    padding:84px 0 104px;
    overflow:hidden;
}

.about-grid{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:60px;
    align-items:center;
}

.about-title{
    font-size:clamp(2.5rem,6vw,5.6rem);
    font-weight:900;
    line-height:.98;
    letter-spacing:-.06em;
    margin:0 0 22px;
}

.about-text{
    font-size:1.06rem;
    line-height:1.85;
    color:var(--muted);
    margin-bottom:18px
}

.about-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin:28px 0;
}

.about-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.about-tags span{
    padding:9px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid var(--line);
    font-weight:800;
    color:var(--muted);
    transition:.25s ease;
}

.about-tags span:hover{
    transform:translateY(-4px) rotate(-2deg);
    color:var(--text);
    border-color:rgba(255,255,255,.32);
}

.about-visual{
    position:relative;
}

.about-image-card{
    width:min(430px,100%);
    margin-left:auto;
    padding:14px;
    border-radius:34px;
    transform:rotate(2deg);
    transition:.25s ease;
}

.about-image-card:hover{
    transform:rotate(0deg) translateY(-8px);
}

.about-image{
    display:block;
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:24px;
}

.skill-panel{
    position:absolute;
    left:0;
    bottom:26px;
    width:min(310px,80%);
    padding:20px;
}

.skill-panel h3{
    font-weight:900;
    margin-bottom:16px;
}

.skill-row{
    margin-bottom:14px;
}

.skill-row div{
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-weight:800;
    font-size:.84rem;
    margin-bottom:7px
}

.skill-bar{
    height:8px;
    background:rgba(255,255,255,.1);
    border-radius:99px;
    overflow:hidden;
}

.skill-bar span{
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--accent));
    border-radius:99px;
}

.contact-section{
    padding:0 0 100px;
}

.contact-card{
    padding:32px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:24px;
    align-items:center;
}

.contact-card h2{
    font-weight:900;
    letter-spacing:-.03em;
}

.contact-card p{
    color:var(--muted);
    margin:0;
    line-height:1.7;
}

.contact-details{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

@media(max-width:991.98px){
    .about-grid{
        grid-template-columns:1fr;
    }
    
    .about-image-card{
        margin:0 auto;
    }
    
    .skill-panel{
        position:relative;
        margin:18px auto 0;
        width:100%;
    }
    
    .contact-card{
        grid-template-columns:1fr;
    }
}

@media(max-width:575.98px){
    .about-actions a,
    .contact-details a{
        width:100%;
    }
    
    .about-section{
        padding-top:54px;
    }
}