*{
margin:0;
padding:0;
box-sizing;
font-family:'Poppins',sans-serif;
}

body{
background:#050816;
color;
overflow-x;
}

.skills-section{
position;
min-height:100vh;
padding:120px 8%;
overflow;

background: radial-gradient(circle at top left, rgba(0,255,255,.12), transparent 35%), radial-gradient(circle at bottom right, rgba(139,92,246,.15), transparent 35%), #050816;

}

/* =====================
STARS
===================== */

.skills-section::before{

content:""; position:absolute; inset:0; background-image: radial-gradient( white 1px, transparent 1px ); background-size:70px 70px; opacity:.12; animation: starsMove 50s linear infinite;

}

/* =====================
CONTAINER
===================== */

.container{
max-width:1300px;
margin;
position;
z-index:2;
}

/* =====================
HEADER
===================== */

.section-header{
text-align;
margin-bottom:80px;
}

.section-tag{

color:#00ffff; letter-spacing:4px; font-size:14px; font-weight:600;

}

.section-header h1{

font-size:3rem; margin-top:15px; margin-bottom:15px;

}

.section-header p{

color:#cbd5e1; max-width:700px; margin:auto; line-height:1.8;

}

/* =====================
SKILLS GRID
===================== */

.skills-grid{

display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:30px; margin-bottom:80px;

}

/* =====================
SKILL CARD
===================== */

.skill-card{

background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius:25px; padding:30px; transition:.5s; position:relative; overflow:hidden;

}

.skill-card::before{

content:""; position:absolute; width:180px; height:180px; top:-90px; right:-90px; border-radius:50%; background: radial-gradient( circle, rgba(0,255,255,.25), transparent );

}

.skill-card{

transform: translateY(-10px); box-shadow: 0 0 35px rgba(0,255,255,.25);

}

.skill-card h3{

margin-bottom:25px; color:#00ffff;

}

/* =====================
SKILL ITEM
===================== */

.skill-item{

display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; color:#cbd5e1;

}

/* =====================
TOOLS
===================== */

.tools-section{

margin-top:50px;

}

.tools-section h2{

text-align:center; margin-bottom:40px; color:#00ffff;

}

.tools-grid{

display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:20px;

}

.tool-card{

background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(20px); border-radius:15px; padding:20px; text-align:center; transition:.4s;

}

.tool-card{

transform: translateY(-8px); box-shadow: 0 0 25px rgba(0,255,255,.25); color:#00ffff;

}

/* =====================
STATS
===================== */

.skills-stats{

display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:25px; margin-top:80px;

}

.stat-box{

background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(20px); border-radius:20px; text-align:center; padding:30px;

}

.stat-box h2{

color:#00ffff; font-size:2rem; margin-bottom:10px;

}

.stat-box p{

color:#cbd5e1;

}

/* =====================
ANIMATION
===================== */

@keyframes starsMove{

from{ transform:translateY(0); } to{ transform:translateY(150px); }

}