.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px}
.skill-card{padding:28px 20px;text-align:center;background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .3s}
.skill-card:hover{border-color:var(--accent)}
.skill-icon{width:64px;height:64px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:34px;border-radius:50%;background:rgba(255,255,255,.07);color:#e8e0d2}
.skill-card h3{font-size:1.1rem;font-weight:500;margin-bottom:4px}
.skill-card span{color:var(--muted);font-size:.9rem}


/* Tech stack marquee */
.tech-stack{padding:0 0 96px}
.tech-stack .container{max-width:none}
.tech-stack .section-title{max-width:none;margin-bottom:24px;padding-inline:max(6%,calc((100% - var(--max-width)) / 2))}
.tech-stack .section-title h3{font-size:1.4rem;font-weight:500}
.marquee{overflow:hidden;margin:12px 0;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee-content{display:flex;width:max-content;animation:marquee 45s linear infinite}
.reverse .marquee-content{animation-direction:reverse}
.marquee:hover .marquee-content{animation-play-state:paused}
.tech-card{display:flex;align-items:center;gap:14px;min-width:180px;margin-right:16px;padding:14px 24px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px}
.tech-card i{font-size:1.8rem;color:#e8e0d2}
.tech-card span{font-weight:500}
@keyframes marquee{to{transform:translateX(-50%)}}