/* ===========================
   Skills Section
=========================== */

.skills{
    background:transparent;
}

.skills-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:24px;
    margin-top:60px;
}

/* ===========================
   Skill Card
=========================== */

.skill-card{

    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
    border-radius:24px;
    backdrop-filter:blur(12px);

    padding:28px;

    display:flex;
    flex-direction:column;

    min-height:260px;
    flex:0 1 300px;
    max-width:320px;
    width:100%;

    opacity:0;
    transform:translateY(20px);

}

.skill-card.animate-in{

    opacity:1;
    transform:translateY(0);

    transition:
        opacity .6s ease,
        transform .6s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.skill-card.animate-in:hover{

    transform:translateY(-8px);

    border-color:var(--accent);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

/* ===========================
   Header
=========================== */

.skill-header{

    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:24px;

}

.skill-header h3{

    margin:0;
    font-size:1.15rem;
    font-weight:600;

}

/* ===========================
   Icon
=========================== */

.skill-icon{

    width:54px;
    height:54px;

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

    border-radius:16px;

    background:var(--accent-soft);
    color:var(--accent);

    font-size:1.2rem;

    flex-shrink:0;

}

/* ===========================
   Progress Bar
=========================== */

.skill-bar{

    width:100%;
    height:8px;

    margin:8px 0 28px;

    border-radius:999px;

    background:rgba(0,0,0,.12);

    overflow:hidden;

}

.skill-progress{

    height:100%;

    border-radius:999px;

    background:var(--accent);

}

/* ===========================
   Tags
=========================== */

.skill-tags{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:auto;

}

.skill-tags span{

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    font-size:.82rem;

    transition:.25s;

}

.skill-tags span:hover{

    background:var(--accent-soft);
    color:var(--accent);

}

/* ===========================
   Dark Mode
=========================== */

body.dark-mode .skill-card{

    background:rgba(18,20,23,.82);

}

body.dark-mode .skill-card:hover{

    background:rgba(25,28,32,.95);

}

body.dark-mode .skill-bar{

    background:rgba(255,255,255,.10);

}
body.dark-mode .skill-progress{

    background:var(--accent);

}

body.dark-mode .skill-marker{

    background:#fff;

    box-shadow:
        0 0 8px rgba(255,255,255,.8),
        0 0 16px rgba(255,255,255,.4);

}

body.dark-mode .skill-tags span{

    background:rgba(255,255,255,.05);

    border-color:rgba(255,255,255,.08);

}

/* ===========================
   Mobile
=========================== */

@media (max-width:768px){

    .skills-grid{

        display:grid;
        grid-template-columns:1fr;

    }

    .skill-card{

        min-height:230px;
        flex:none;
        max-width:none;

    }

}

/* Additional responsive rules moved from css/style.css */
@media (max-width: 992px) {
    .skills-grid { display:grid; grid-template-columns: 1fr; }
}