.tech-item{position:relative}.tech-item::before{content:"";position:absolute;left:14px;top:50%;width:28px;height:28px;transform:translateY(-50%);background:var(--tech-color);opacity:0;transition:opacity .2s ease;pointer-events:none}.tech-icon{transition:opacity .2s ease}@media(hover:hover){.tech-item:hover::before{-webkit-mask:var(--tech-mask) center/contain no-repeat;mask:var(--tech-mask) center/contain no-repeat;opacity:1}.tech-item:hover .tech-icon{opacity:0}}
.tech-item[data-tech="php"]{--tech-color:#777BB4;--tech-mask:url("../assets/tech/php.svg")}
.tech-item[data-tech="go"]{--tech-color:#00ADD8;--tech-mask:url("../assets/tech/go.svg")}
.tech-item[data-tech="vuedotjs"]{--tech-color:#4FC08D;--tech-mask:url("../assets/tech/vuedotjs.svg")}
.tech-item[data-tech="react"]{--tech-color:#61DAFB;--tech-mask:url("../assets/tech/react.svg")}
.tech-item[data-tech="javascript"]{--tech-color:#F7DF1E;--tech-mask:url("../assets/tech/javascript.svg")}
.tech-item[data-tech="flutter"]{--tech-color:#02569B;--tech-mask:url("../assets/tech/flutter.svg")}
.tech-item[data-tech="laravel"]{--tech-color:#FF2D20;--tech-mask:url("../assets/tech/laravel.svg")}
.tech-item[data-tech="python"]{--tech-color:#3776AB;--tech-mask:url("../assets/tech/python.svg")}
.tech-item[data-tech="swift"]{--tech-color:#F05138;--tech-mask:url("../assets/tech/swift.svg")}
.tech-item[data-tech="kotlin"]{--tech-color:#7F52FF;--tech-mask:url("../assets/tech/kotlin.svg")}
.tech-item[data-tech="nuxt"]{--tech-color:#00DC82;--tech-mask:url("../assets/tech/nuxt.svg")}
.tech-item[data-tech="postgresql"]{--tech-color:#4169E1;--tech-mask:url("../assets/tech/postgresql.svg")}
.tech-item[data-tech="nodedotjs"]{--tech-color:#5FA04E;--tech-mask:url("../assets/tech/nodedotjs.svg")}
.tech-item[data-tech="dotnet"]{--tech-color:#512BD4;--tech-mask:url("../assets/tech/dotnet.svg")}
.tech-item[data-tech="android"]{--tech-color:#3DDC84;--tech-mask:url("../assets/tech/android.svg")}
.tech-item[data-tech="ios"]{--tech-color:#C4F752;--tech-mask:url("../assets/tech/ios.svg")}
.tech-item[data-tech="dart"]{--tech-color:#0175C2;--tech-mask:url("../assets/tech/dart.svg")}
.tech-item[data-tech="html5"]{--tech-color:#E34F26;--tech-mask:url("../assets/tech/html5.svg")}
.tech-item[data-tech="css"]{--tech-color:#663399;--tech-mask:url("../assets/tech/css.svg")}
.tech-item[data-tech="typescript"]{--tech-color:#3178C6;--tech-mask:url("../assets/tech/typescript.svg")}
.tech-item[data-tech="nextdotjs"]{--tech-color:#C4F752;--tech-mask:url("../assets/tech/nextdotjs.svg")}
.tech-item[data-tech="express"]{--tech-color:#C4F752;--tech-mask:url("../assets/tech/express.svg")}
.tech-item[data-tech="nestjs"]{--tech-color:#E0234E;--tech-mask:url("../assets/tech/nestjs.svg")}
.tech-item[data-tech="mysql"]{--tech-color:#4479A1;--tech-mask:url("../assets/tech/mysql.svg")}
.tech-item[data-tech="redis"]{--tech-color:#FF4438;--tech-mask:url("../assets/tech/redis.svg")}
.tech-item[data-tech="mongodb"]{--tech-color:#47A248;--tech-mask:url("../assets/tech/mongodb.svg")}
.tech-item[data-tech="docker"]{--tech-color:#2496ED;--tech-mask:url("../assets/tech/docker.svg")}
.tech-item[data-tech="kubernetes"]{--tech-color:#326CE5;--tech-mask:url("../assets/tech/kubernetes.svg")}
.tech-item[data-tech="git"]{--tech-color:#F03C2E;--tech-mask:url("../assets/tech/git.svg")}
.tech-item[data-tech="github"]{--tech-color:#C4F752;--tech-mask:url("../assets/tech/github.svg")}
.tech-item[data-tech="gitlab"]{--tech-color:#FC6D26;--tech-mask:url("../assets/tech/gitlab.svg")}
.tech-item[data-tech="linux"]{--tech-color:#FCC624;--tech-mask:url("../assets/tech/linux.svg")}
.tech-item[data-tech="nginx"]{--tech-color:#009639;--tech-mask:url("../assets/tech/nginx.svg")}
.tech-item[data-tech="graphql"]{--tech-color:#E10098;--tech-mask:url("../assets/tech/graphql.svg")}
.tech-item[data-tech="firebase"]{--tech-color:#DD2C00;--tech-mask:url("../assets/tech/firebase.svg")}
.tech-item[data-tech="googlecloud"]{--tech-color:#4285F4;--tech-mask:url("../assets/tech/googlecloud.svg")}
.tech-item[data-tech="figma"]{--tech-color:#F24E1E;--tech-mask:url("../assets/tech/figma.svg")}
.tech-item[data-tech="tailwindcss"]{--tech-color:#06B6D4;--tech-mask:url("../assets/tech/tailwindcss.svg")}
.tech-item[data-tech="bootstrap"]{--tech-color:#7952B3;--tech-mask:url("../assets/tech/bootstrap.svg")}
.tech-item[data-tech="vite"]{--tech-color:#9135FF;--tech-mask:url("../assets/tech/vite.svg")}
.button{position:relative;isolation:isolate;overflow:hidden;border:1px solid transparent;transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}.button::before{content:"";position:absolute;z-index:-1;inset:-100% -65%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 48%,rgba(196,247,82,.28) 52%,transparent 65%);transform:translateX(-100%) rotate(8deg);opacity:0;pointer-events:none}@media(hover:hover){.button:hover{background:rgba(196,247,82,.11);color:#f2f5ed;border-color:rgba(196,247,82,.75);box-shadow:0 0 24px rgba(196,247,82,.2),inset 0 0 18px rgba(255,255,255,.08);backdrop-filter:blur(8px)}.button:hover::before{opacity:1;animation:button-shine 1.4s ease-in-out infinite}}.button:focus-visible{outline:2px solid #c4f752;outline-offset:4px}@keyframes button-shine{0%{transform:translateX(-100%) rotate(8deg)}75%,100%{transform:translateX(100%) rotate(8deg)}}@media(prefers-reduced-motion:reduce){.button:hover::before{animation:none;opacity:0}}