:root{
  --primary:#2563eb;
  --dark:#1e3a8a;
  --card-bg:#ffffff;
}
*{box-sizing:border-box}
body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  margin:0;
  padding:0;
  background:linear-gradient(135deg,var(--dark),var(--primary));
  color:#333;
  -webkit-font-smoothing:antialiased;
}
header{
  background:var(--primary);
  color:#fff;
  padding:40px 20px;
  text-align:center;
}
header h1{margin:0;font-size:2.5em}
header p{margin:8px 0 0;font-size:1.1em;color:#e2e8f0}

.container{
  max-width:960px;
  margin:36px auto;
  padding:28px;
  background:var(--card-bg);
  box-shadow:0 12px 30px rgba(2,6,23,0.35);
  border-radius:14px;
  animation:fadeInUp .9s ease;
}
.grid{display:grid;grid-template-columns:1fr 300px;gap:24px}
@media(max-width:860px){.grid{grid-template-columns:1fr} .right-col{order:-1}}

h2{font-size:1.05rem;color:var(--dark);margin:0 0 12px;display:flex;align-items:center;gap:10px}
h2 img.icon{width:22px;height:22px}
p.lead{color:#374151}

.skills{display:flex;flex-wrap:wrap;gap:12px}
.skill{display:flex;flex-direction:column;align-items:center;width:86px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#fbfbff,#f3f7ff);box-shadow:0 6px 18px rgba(37,99,235,0.12);transition:transform .25s}
.skill img{width:36px;height:36px;margin-bottom:8px}
.skill span{font-size:.82rem;color:#0f172a;text-align:center}
.skill:hover{transform:translateY(-6px)}

.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

ul{padding-left:18px;margin:0;color:#0f172a}
ul li{margin-bottom:8px}

.link-btn{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:#fff;font-weight:600;text-decoration:none;color:var(--dark);box-shadow:0 6px 16px rgba(15,23,42,0.06)}
.link-btn img{width:18px;height:18px}
.card{background:linear-gradient(180deg,#ffffff,#fbfdff);padding:16px;border-radius:12px;box-shadow:0 8px 20px rgba(2,6,23,0.06)}

.footer{margin-top:20px;text-align:center;font-style:italic;color:#475569;font-size:1rem}

button.primary{
  margin-top:14px;
  background:var(--primary);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  display:inline-block;
}

@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}