/* ===== Skills Tabs (unique prefix: sk-) ===== */
:root{
  --sk-blue:#4f7df5;
  --sk-blue-2:#8aa7ff;
  --sk-ink:#0f172a;
  --sk-muted:#64748b;
  --sk-card:#f7f9ff;
  --sk-border:#e7edff;
  --sk-gap:22px;
}

*{box-sizing:border-box}
body{margin:0;font-family:"Urbanist",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--sk-ink);background:#fff}

/* Section shell */
.sk-wrap{max-width:1200px;margin:0 auto;padding:56px 16px 86px}
.sk-head{display:flex;justify-content:center;margin-bottom:26px}

/* Tabs (pill group) */
.sk-tabs{
  display:flex;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid #edf2ff;border-radius:999px;padding:6px;
  box-shadow:0 6px 16px rgba(79,125,245,.05);
}
.sk-tab{
  appearance:none;border:1px solid transparent;cursor:pointer;
  padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;
  color:#334155;background:#fff;transition:all .2s ease;outline:none;
}
.sk-tab:hover{border-color:#e6ebff;background:#fafcff}
.sk-tab[aria-selected="true"]{
  background:linear-gradient(180deg,#6f8efe,#4f7df5);
  color:#fff;
}

/* Grid */
.sk-grid{display:grid;gap:var(--sk-gap)}
@media (min-width:680px){ .sk-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .sk-grid{grid-template-columns:repeat(4,1fr)} }

/* Card — taller + reduced shadow */
.sk-card{
  background:#fbfcff;border:1px solid var(--sk-border);border-radius:16px;
  padding:28px 22px; /* more vertical padding */
  min-height:270px;  /* make box lengthy on desktop */
  box-shadow:0 4px 10px rgba(15,23,42,.04); /* reduced shadow */
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex;flex-direction:column;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
.sk-card.sk-in{
  opacity:1;
  transform:none;
}
.sk-card:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(15,23,42,.08);border-color:#dfe6ff}
.sk-top{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.sk-badge{
  width:48px;height:48px;border-radius:999px;display:grid;place-items:center;
  background:#eef3ff;border:1px solid #e1e9ff;box-shadow:inset 0 2px 6px rgba(79,125,245,.12)
}
.sk-badge svg{width:26px;height:26px}

/* Titles & text */
.sk-title{margin:0;font-weight:700;font-size:18px}
.sk-desc{margin: 30px 0 18px;color:var(--sk-muted);font-size:14px;line-height:1.6;min-height:64px;}

/* Progress (thicker + clearly visible) */
.sk-progress{position:relative;margin-top:auto}
.sk-percent{position:absolute;right:0;top:-22px;font-weight:700;font-size:14px}
.sk-bar{
  height:8px;border-radius:999px;background:#e6eaf5;overflow:hidden;position:relative
}
/* add/replace this rule */
.sk-fill{
  display:block;                 /* <— key fix */
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#6f8efe,#4f7df5);
  transition:width 1s cubic-bezier(.22,.61,.36,1);
}
.sk-fill::after{
  content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);
  width:18px;height:8px;border-radius:6px;background:#e6eaf5
}

/* Hidden panels */
.sk-panel{display:none}
.sk-panel[aria-hidden="false"]{display:block}

/* Reveal on scroll */
.sk-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.sk-reveal.sk-in{opacity:1;transform:none}

/* Mobile polish */
@media (max-width:680px){
  .sk-wrap{padding:42px 14px 70px}
  /* Tabs: stack & center */
  .sk-head{justify-content:center}
  .sk-tabs{display:grid;grid-template-columns:1fr;gap:10px;border-radius:14px;padding:10px;width:80%;max-width:460px}
  .sk-tab{width:100%;text-align:center;padding:12px 16px}
  /* Taller cards on mobile too */
  .sk-card{padding:30px 18px;min-height:250px}
  .sk-desc{min-height:auto}
}