.skills-section{padding:6rem 0;background:var(--dark-mode)}.dark-mode .skills-section{padding:6rem 0;background:var(--light-mode)}.skills-container{max-width:1275px;margin:0 auto;padding:0 2rem}.skills-title{font-size:2.5rem;text-align:center;color:#00ff88;margin-bottom:4rem;text-shadow:0 0 15px rgba(0,255,136,.3)}.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;position:relative}.skill-item{background:#1a1a1a;border:1px solid #2d2d2d;border-radius:12px;padding:2rem;display:flex;flex-direction:column;align-items:center;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.skill-item .gradient-border{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;padding:2px;background:linear-gradient(45deg,#00ff88,#61dafb);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}.skill-item:hover .gradient-border{opacity:1}.skill-item:hover{transform:translateY(-8px);box-shadow:0 12px 24px rgba(0,0,0,.3),0 0 40px rgba(96,218,251,.1)}.skill-icon{height:90px;width:90px;margin-bottom:1.5rem;-o-object-fit:contain;object-fit:contain;filter:grayscale(100%);transition:all .4s ease}.skill-item:hover .skill-icon{filter:grayscale(0);transform:scale(1.15) rotate(5deg)}.skill-title{font-size:1.25rem;font-weight:600;color:#fff;position:relative;transition:color .3s ease}.skill-item:hover .skill-title{color:#00ff88;text-shadow:0 0 12px rgba(0,255,136,.4)}@media (max-width:1280px){.skills-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:1024px){.skills-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.skills-grid{grid-template-columns:1fr}.skill-item{padding:1.5rem}.skill-icon{height:70px;width:70px}}.category-tabs{display:flex;justify-content:center;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}.tab-button{padding:.8rem 2rem;border:1px solid transparent;border-radius:8px;background:#1a1a1a;color:#fff;font-size:1.1rem;cursor:pointer;transition:background .3s ease,transform .15s ease,box-shadow .3s ease;position:relative}.tab-button:hover{background:#252525;transform:translateY(-2px) scale(1.05)}.tab-button:focus{outline:none;box-shadow:0 0 0 2px rgba(0,255,136,.5)}.tab-button.active{color:#0a0a0a;border-color:#00ff88;box-shadow:0 4px 15px rgba(0,255,136,.3);transition:background .3s ease,box-shadow .3s ease;padding:.9rem 2.1rem}.tab-button.active,.tab-button.active:before{background:linear-gradient(45deg,#00ff88,#61dafb)}.tab-button.active:before{content:"";position:absolute;inset:0;border-radius:8px;padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:exclude;mask-composite:exclude}