@font-face {
  font-family: 'V2 Original Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/original-tools/fragment-mono-400.ttf) format('truetype');
}
@font-face {
  font-family: 'V2 Original Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/original-tools/manrope-300.ttf) format('truetype');
}
@font-face {
  font-family: 'V2 Original Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/original-tools/manrope-400.ttf) format('truetype');
}
@font-face {
  font-family: 'V2 Original Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/original-tools/manrope-500.ttf) format('truetype');
}
@font-face {
  font-family: 'V2 Original Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/original-tools/manrope-600.ttf) format('truetype');
}
@font-face {
  font-family: 'V2 Original Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/original-tools/manrope-700.ttf) format('truetype');
}
/* Original section styles and responsive rules from anshulraman.com. */
#skills{--bg-3:#262626;--orange:#ff611a;--sans:"V2 Original Manrope",system-ui,sans-serif;--mono:"V2 Original Mono",ui-monospace,monospace;font-family:var(--sans);font-size:15px;line-height:1.55;font-weight:400;color-scheme:dark}
#skills,#skills *,#skills *::before,#skills *::after{box-sizing:border-box}
#skills .section-h{max-width:none;text-wrap:initial}
#skills .skills-intro{margin-top:0}
#skills .stack-grid{border:0;padding:0;overflow:visible;scroll-snap-type:none}
#skills .ic-tile{min-height:0;color:inherit}
#skills .section-eyebrow{
  font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  display:flex; align-items:center; gap:12px; opacity:.6;
  margin-bottom:24px;
}
#skills .section-eyebrow::after{ content:''; flex:1; height:1px; background:currentColor; opacity:.3; }
#skills .section-eyebrow .glyph{ color:var(--orange); font-size:1.4em; }
#skills .section-h{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(40px, 6vw, 84px); line-height:.96; letter-spacing:-.035em;
  margin-bottom:48px;
}
#skills .section-h b{ font-weight:700; }
#skills .section-h em{ font-style:italic; color:var(--orange); }

/* ───────── SKILLS — 3D icon stack ───────── */
#skills.skills-section{ padding:120px 6vw; background:var(--bg-3); color:#fff; }
#skills.skills-section .section-eyebrow{ color:rgba(255,255,255,.7); }
#skills.skills-section .section-h{ color:#fff; }
#skills .skills-intro{ font-size:18px; line-height:1.6; color:rgba(255,255,255,.78); max-width:60ch; margin-bottom:36px; }
#skills .skills-intro strong{ color:#fff; }
#skills .skills-intro kbd{
  font-family:var(--mono); font-size:.85em;
  background:var(--orange); color:#fff;
  padding:2px 7px; border-radius:5px; font-weight:600;
}

#skills .stack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(82px, 1fr));
  gap:10px;
  perspective:900px;
  perspective-origin:50% 50%;
}

#skills .ic-tile{
  --c: #ff611a;
  --rx: 0deg;
  --ry: 0deg;
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  aspect-ratio:1 / 1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:10px 6px;
  cursor:default;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition:transform .12s linear, border-color .35s, box-shadow .35s, background .35s;
  overflow:hidden;
  isolation:isolate;
  opacity:0;
  animation:v2OriginalTileIn .6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes v2OriginalTileIn { to { opacity:1; } }

#skills .ic-tile::before{
  content:''; position:absolute; inset:-1px;
  background:radial-gradient(circle at center, var(--c) 0%, transparent 65%);
  opacity:0; z-index:0;
  transition:opacity .4s ease;
  border-radius:inherit;
}
#skills .ic-tile::after{
  content:''; position:absolute; top:0; bottom:0; left:0; right:0;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.16) 50%, transparent 68%);
  transform:translateX(-110%);
  transition:transform .65s cubic-bezier(.2,.8,.2,1);
  pointer-events:none; z-index:2;
  border-radius:inherit;
}
#skills .ic-tile:hover{
  border-color:var(--c);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow:0 18px 40px -16px var(--c), 0 0 0 1px var(--c) inset;
  z-index:5;
}
#skills .ic-tile:hover::before{ opacity:.18; }
#skills .ic-tile:hover::after{ transform:translateX(110%); }

#skills .ic-tile .icon{
  width:30px; height:30px;
  position:relative; z-index:1;
  background:var(--d, #fff);
  -webkit-mask-image:var(--icon-url);
  mask-image:var(--icon-url);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  transition:background .35s, transform .4s cubic-bezier(.2,.8,.2,1), filter .35s;
}
#skills .ic-tile:hover .icon{
  background:var(--c);
  filter:drop-shadow(0 0 12px var(--c)) drop-shadow(0 0 4px var(--c));
  transform:scale(1.2) rotate(-4deg) translateZ(20px);
}
#skills .ic-tile span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.04em;
  color:rgba(255,255,255,.78);
  text-align:center; line-height:1.1;
  position:relative; z-index:1;
  transition:color .3s, transform .3s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
#skills .ic-tile:hover span{ color:#fff; transform:translateZ(15px); }


@media(max-width:1024px){#skills .stack-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}}
@media(max-width:768px){#skills{padding:64px 5vw}#skills .section-h{font-size:clamp(32px,9vw,48px);margin-bottom:24px}#skills .section-eyebrow{font-size:10.5px;margin-bottom:16px;letter-spacing:.14em}#skills .skills-intro{font-size:14.5px;margin-bottom:22px;line-height:1.55}#skills .stack-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;perspective:600px}#skills .ic-tile{padding:7px 4px;gap:5px;border-radius:11px}#skills .ic-tile .icon{width:22px;height:22px}#skills .ic-tile span{font-size:8px;letter-spacing:0}#skills .ic-tile:hover{transform:translateY(-2px) scale(1.05)}#skills .ic-tile:hover .icon{transform:scale(1.1)}#skills .ic-tile::after{display:none}}
@media(max-width:380px){#skills .section-h{font-size:28px;line-height:1}#skills .stack-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:5px}#skills .ic-tile{padding:6px 3px}#skills .ic-tile .icon{width:20px;height:20px}#skills .ic-tile span{font-size:7.5px}}
@media(hover:none) and (pointer:coarse){#skills .ic-tile{transform:none!important}}
@media(prefers-reduced-motion:reduce){#skills .ic-tile{animation:none;opacity:1;transform:none!important}#skills .ic-tile,#skills .ic-tile::before,#skills .ic-tile::after,#skills .ic-tile .icon,#skills .ic-tile span{transition:none}}
@media(max-width:768px){#skills.skills-section{padding:64px 5vw}}
#skills{scroll-margin-top:84px}
#skills .skills-intro strong{font-weight:700}