/* A single interaction language, with an individual accent for each service. */
.skills-grid{align-items:start}
.skill-card{--skill-accent:#c78b00;--skill-soft:#fff7da;position:relative;isolation:isolate;overflow:hidden;background:#fff;min-height:222px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.skill-card:nth-child(2){--skill-accent:#1556f0;--skill-soft:#edf3ff}
.skill-card:nth-child(3){--skill-accent:#138c90;--skill-soft:#e4f7f5}
.skill-card:nth-child(4){--skill-accent:#7960cd;--skill-soft:#f0ebff}
.skill-card:before{content:'';position:absolute;z-index:-1;right:-45px;top:-55px;width:160px;height:160px;border-radius:50%;background:var(--skill-soft);opacity:.35;transform:scale(.75);transition:transform .45s ease,opacity .3s ease}
.skill-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.skill-icon-box{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:var(--skill-soft);color:var(--skill-accent);transition:transform .3s ease,background .3s ease}
.skill-icon{width:32px;height:32px;color:inherit;margin:0;transform-origin:50% 75%}
.skill-number{font-size:11px;letter-spacing:2px;color:#94a0b5}
.skill-toggle{appearance:none;border:0;padding:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.skill-toggle:after{content:'';position:absolute;inset:0;z-index:2}
.skill-plus{color:var(--skill-accent);font-size:23px;font-weight:400;transition:transform .3s ease}
.skill-card:has(:focus-visible){outline:3px solid var(--skill-accent);outline-offset:4px}
.skill-toggle:focus{outline:none}
.skill-card:is(:focus-within,.is-open){box-shadow:0 16px 36px #19365e17;border-left-color:var(--skill-accent);border-right-color:var(--skill-accent);border-top-color:var(--skill-accent)}
.skill-card:is(:focus-within,.is-open):before{opacity:1;transform:scale(1.4)}
.skill-card.is-open .skill-plus{transform:rotate(45deg)}
.skill-detail{border-top:1px solid #e5eaf1;margin-top:17px;padding-top:14px;display:flex;flex-wrap:wrap;gap:6px;animation:skill-reveal .3s ease}
.skill-detail[hidden]{display:none}
.skill-detail span{font-size:10px;line-height:1.6;color:var(--skill-accent);background:var(--skill-soft);border-radius:5px;padding:4px 7px}
@media(hover:hover){
 .skill-card:hover{transform:translateY(-7px);box-shadow:0 18px 35px #19365e20;border-top-color:var(--skill-accent)}
 .skill-card:hover:before{opacity:1;transform:scale(1.4)}
 .skill-card:hover .skill-icon-box{transform:rotate(-6deg) scale(1.07)}
 .skill-card:hover .skill-icon{animation:skill-icon-pop .65s ease both}
}
.skill-card:active{transform:translateY(-2px) scale(.99)}
@keyframes skill-icon-pop{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}70%{transform:translateY(1px)}}
@keyframes skill-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.skill-card{min-height:230px}.skill-top{margin-bottom:16px}.skill-icon-box{width:46px;height:46px}.skill-toggle{gap:5px}.skill-plus{font-size:20px}}
@media(prefers-reduced-motion:reduce){.skill-card,.skill-card:before,.skill-icon-box,.skill-plus{transition:none}.skill-card:hover,.skill-card:active,.skill-card:hover .skill-icon-box{transform:none}.skill-card:hover .skill-icon,.skill-detail{animation:none}}