.webdev-service-showcase{--panel-radius:1.35rem;align-items:stretch;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:#060c187a;border:1px solid hsla(0,0%,100%,.1);border-radius:calc(var(--panel-radius) + .5rem);box-shadow:inset 0 1px #ffffff14,0 24px 70px #00000047;display:flex;gap:.65rem;margin-top:clamp(1.3rem,3vw,2rem);min-height:clamp(26rem,48vw,34rem);overflow:hidden;padding:.65rem;width:100%}.webdev-service-panel{--section2-border-angle:0deg;background:#101827;border:1px solid hsla(0,0%,100%,.12);border-radius:var(--panel-radius);box-shadow:0 12px 34px #00000047;cursor:pointer;flex:1 1 0%;min-width:0;opacity:1;overflow:hidden;position:relative;transform:translate(0);transition:flex .7s cubic-bezier(.25,.8,.25,1),opacity .64s cubic-bezier(.16,1,.3,1),transform .64s cubic-bezier(.16,1,.3,1),border-color .52s ease,box-shadow .52s ease;will-change:flex,transform,opacity}.webdev-service-panel:after{background:conic-gradient(from var(--section2-border-angle),#94f2ff,rgba(126,112,255,.96),rgba(255,84,184,.96),#b2fff5,#94f2ff);border-radius:inherit;content:"";filter:drop-shadow(0 0 12px color-mix(in srgb,var(--panel-accent) 38%,transparent));top:0;right:0;bottom:0;left:0;-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;padding:2px;pointer-events:none;position:absolute;transition:opacity .52s ease,filter .52s ease;z-index:4}.js .webdev-service-panel{opacity:0;transform:translate(-44px)}.js .webdev-service-showcase:not(.is-ready) .webdev-service-panel{transition-delay:0s,var(--panel-entry-delay,0s),var(--panel-entry-delay,0s),0s,0s}.js .webdev-service-showcase.is-ready .webdev-service-panel{opacity:1;transform:translate(0)}.webdev-service-panel.is-active{border-color:#ffffff2e;box-shadow:0 22px 68px #0000007a,0 0 24px color-mix(in srgb,var(--panel-accent) 24%,transparent);flex:7 1 0%}.webdev-service-panel.is-active:after{animation:section2GlowSpin 6.5s linear infinite;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--panel-accent) 56%,transparent));opacity:.95}.webdev-service-panel__button,.webdev-service-panel__media,.webdev-service-panel__shade{top:0;right:0;bottom:0;left:0;position:absolute}.webdev-service-panel__media{filter:saturate(.94) contrast(1.05) brightness(.78);height:100%;-o-object-fit:cover;object-fit:cover;transform:scale(1.04);transition:transform .85s cubic-bezier(.16,1,.3,1),filter .7s ease;width:100%}.webdev-service-panel.is-active .webdev-service-panel__media{filter:saturate(1.08) contrast(1.02) brightness(.92);transform:scale(1)}.webdev-service-panel__shade{background:linear-gradient(180deg,#070c160f 0,#070c1659 48%,#04070de6),radial-gradient(90% 80% at 20% 100%,color-mix(in srgb,var(--panel-accent) 24%,transparent) 0,transparent 62%);opacity:.74;pointer-events:none;transition:opacity .62s ease}.webdev-service-panel.is-active .webdev-service-panel__shade{opacity:1}.webdev-service-panel__content{--panel-content-pad:clamp(1rem,2.4vw,1.45rem);--panel-icon-size:clamp(3.6rem,6vw,4.25rem);--panel-copy-gap:.95rem;bottom:clamp(1rem,2.4vw,1.45rem);height:clamp(4.15rem,6.4vw,4.7rem);left:0;min-width:0;padding:0 var(--panel-content-pad);pointer-events:none;position:absolute;right:0;z-index:2}.webdev-service-panel__icon{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:radial-gradient(circle at 34% 28%,hsla(0,0%,100%,.12),transparent 34%),#080d16d1;border:1px solid hsla(0,0%,100%,.32);border-radius:999px;box-shadow:inset 0 1px #ffffff29,0 12px 28px #00000057,0 0 18px color-mix(in srgb,var(--panel-accent) 34%,transparent);display:inline-flex;height:var(--panel-icon-size);justify-content:center;left:var(--panel-content-pad);position:absolute;top:50%;transform:translateY(-50%);width:var(--panel-icon-size)}.webdev-service-panel__svg{color:var(--panel-accent);display:block;fill:none;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--panel-accent) 56%,transparent));height:68%;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.4;width:68%}.webdev-service-panel__svg--code{height:72%;width:72%}.webdev-service-panel__svg-accent{color:#ff5ecf;stroke:currentColor}.webdev-service-panel__copy{color:#fff;left:calc(var(--panel-content-pad) + var(--panel-icon-size) + var(--panel-copy-gap));max-width:min(33rem,70vw);min-width:15rem;overflow:hidden;position:absolute;top:50%;transform:translate3d(0,-50%,0);will-change:transform}.webdev-service-panel__copy>*{filter:blur(3px);opacity:0;transform:translate3d(1.55rem,0,0);transition:opacity .52s ease,filter .62s cubic-bezier(.16,1,.3,1),transform .76s cubic-bezier(.16,1,.3,1);transition-delay:0s;will-change:opacity,filter,transform}.webdev-service-panel.is-active .webdev-service-panel__copy>*{filter:blur(0);opacity:1;transform:translateZ(0)}.webdev-service-panel.is-active .webdev-service-panel__num{transition-delay:.18s}.webdev-service-panel.is-active h3{transition-delay:225ms}.webdev-service-panel.is-active p{transition-delay:285ms}.webdev-service-panel__num{color:var(--panel-accent);display:block;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;margin-bottom:.12rem}.webdev-service-panel h3{color:#fff;font-size:clamp(1.18rem,2.1vw,1.65rem);line-height:1.08;margin:0;white-space:nowrap}.webdev-service-panel p{color:color-mix(in srgb,var(--panel-accent) 42%,#fff);font-size:clamp(.88rem,1.2vw,.98rem);font-weight:500;line-height:1.42;margin:.28rem 0 0;max-width:34rem;white-space:nowrap}.webdev-service-panel__button{background:transparent;border:0;border-radius:inherit;color:transparent;cursor:pointer;display:block;height:100%;width:100%;z-index:3}.webdev-service-panel__button:focus-visible{outline:2px solid var(--panel-accent);outline-offset:-6px}@media (max-width:760px){.webdev-service-showcase{flex-direction:column;min-height:0;overflow:visible}.webdev-service-panel{flex:1 1 auto;min-height:7.6rem;transform:translateY(28px);transition:min-height .62s cubic-bezier(.25,.8,.25,1),opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1),border-color .5s ease,box-shadow .5s ease}.webdev-service-panel.is-active{flex:1 1 auto;min-height:19rem}.webdev-service-panel__copy{max-width:calc(100vw - 8rem);min-width:0}.webdev-service-panel h3,.webdev-service-panel p{white-space:normal}}@media (prefers-reduced-motion:reduce){.webdev-service-panel,.webdev-service-panel:after,.webdev-service-panel__copy,.webdev-service-panel__media,.webdev-service-panel__shade{animation:none!important;transition-duration:.01ms!important}}