body { font-family:'Inter',sans-serif; margin:0; padding:0; background:#0f172a; color:#e2e8f0; }
.container { max-width:1100px; margin:auto; padding:40px; }
h2 { font-size:1.8rem; border-bottom:1px solid #334155; padding-bottom:10px; margin-bottom:20px; }
.skills-grid, .exp-grid, .edu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; }
.skill-card, .exp-card, .edu-card, .lang-card { background:#1e293b; padding:20px; border-radius:10px; text-align:center; transition:0.3s; }
.skill-card:hover, .exp-card:hover { transform:translateY(-5px); background:#334155; }
.skill-bar { background:#334155; border-radius:6px; height:10px; margin-top:10px; }
.skill-level { width:0; height:10px; border-radius:6px; background:#38bdf8; transition:width 1.5s ease-in-out; }
.exp-logo { width:60px; height:60px; margin-bottom:10px; object-fit:contain; }
.exp-card i.exp-logo { font-size:60px; color:#38bdf8; margin-bottom:10px; }
.hero { display:flex; gap:40px; flex-wrap:wrap; align-items:center; margin-bottom:60px; }
.hero img { width:180px; border-radius:50%; border:4px solid #38bdf8; }
.hero-info h1 { margin:0; font-size:2.5rem; color:#38bdf8; }
.role { color:#94a3b8; margin:5px 0 15px 0; }
.social a { margin-right:10px; font-size:22px; color:#38bdf8; }
.button { display:inline-block; background:#38bdf8; color:#0f172a; padding:10px 20px; border-radius:6px; text-decoration:none; margin-top:10px; }
footer { text-align:center; margin-top:60px; color:#94a3b8; }