/* Reference-inspired motion layer. All decoration stays behind content and outside the hit area. */
:root { --effect-blue: 56 189 248; }

.redesign-section { background-image: radial-gradient(ellipse at 50% 0%, rgb(var(--effect-blue) / 5%), transparent 58%); }
.services-section { background-image: radial-gradient(ellipse at 12% 0%, rgb(37 99 235 / 9%), transparent 55%); }
.cases-section { background-image: radial-gradient(ellipse at 82% 14%, rgb(37 99 235 / 10%), transparent 58%); }
.process-section { background-image: radial-gradient(ellipse at 28% 12%, rgb(14 165 233 / 7%), transparent 62%); }
.cooperation-section { background-image: radial-gradient(ellipse at 88% 14%, rgb(37 99 235 / 10%), transparent 52%); }
.section-heading { position: relative; }
.section-heading::after {
  content: ""; position: absolute; left: 0; bottom: -1.2rem; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--sky), rgb(56 189 248 / 0%)); transform-origin: left;
  transform: scaleX(1);
}
.section-heading.is-visible::after { animation: effect-rule-in .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes effect-rule-in { from { transform: scaleX(.2); opacity: .25 } to { transform: scaleX(1); opacity: 1 } }

.button-primary, .button-secondary, .nav-cta { --mag-x: 0px; --mag-y: 0px; translate: var(--mag-x) var(--mag-y); transition: translate .18s ease-out, transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, padding .28s ease, font-size .28s ease; }
.button-primary, .nav-cta { position: relative; isolation: isolate; overflow: hidden; }
.button-primary::after, .nav-cta::after {
  content: ""; position: absolute; z-index: 1; inset: -60% auto -60% -45%; width: 34%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 25%), transparent);
  transform: skewX(-22deg) translateX(-180%); pointer-events: none;
}
.button-primary:hover::after, .button-primary:focus-visible::after, .nav-cta:hover::after, .nav-cta:focus-visible::after { animation: effect-sheen .72s ease-out; }
@keyframes effect-sheen { to { transform: skewX(-22deg) translateX(620%); } }
.button-primary .cta-arrow, .button-primary > .site-icon, .button-secondary .link-icon, .text-link .link-icon, .problem-diagnostic .link-icon { transition: transform .24s cubic-bezier(.2,.7,.2,1); }
.button-primary:hover .cta-arrow, .button-primary:focus-visible .cta-arrow, .button-primary:hover > .site-icon, .button-primary:focus-visible > .site-icon { transform: rotate(-8deg) translateX(2px); }
.button-secondary:hover .link-icon, .button-secondary:focus-visible .link-icon, .text-link:hover .link-icon, .text-link:focus-visible .link-icon, .problem-diagnostic:hover .link-icon, .problem-diagnostic:focus-visible .link-icon { transform: translateX(4px); }
.text-link, .button-secondary, .problem-diagnostic { position: relative; text-decoration: none; }
.text-link::after, .button-secondary::after, .problem-diagnostic::after { content: ""; position: absolute; left: 0; right: 0; bottom: .12em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .24s ease; }
.text-link:hover::after, .text-link:focus-visible::after, .button-secondary:hover::after, .button-secondary:focus-visible::after, .problem-diagnostic:hover::after, .problem-diagnostic:focus-visible::after { transform: scaleX(1); }

.service-item:focus-within, .case-grid article:focus-within, .cooperation-grid article:focus-within { border-color: rgb(56 189 248 / 56%); box-shadow: 0 12px 36px rgb(2 6 23 / 32%); }
.service-item .card-icon, .case-grid article .card-icon, .cooperation-grid article .card-icon,
.service-item h3, .case-grid article h3, .cooperation-grid article h3 { transition: transform .28s cubic-bezier(.2,.7,.2,1), color .25s ease; }
.service-item:hover .card-icon, .service-item:focus-within .card-icon, .case-grid article:hover .card-icon, .case-grid article:focus-within .card-icon, .cooperation-grid article:hover .card-icon, .cooperation-grid article:focus-within .card-icon { transform: translateY(-3px) scale(1.05); color: var(--sky-bright); }
.service-item:hover h3, .service-item:focus-within h3, .case-grid article:hover h3, .case-grid article:focus-within h3, .cooperation-grid article:hover h3, .cooperation-grid article:focus-within h3 { transform: translateX(2px); }

.process-list li > span { transition: color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.process-list li:hover > span, .process-list li:focus-within > span { color: var(--sky-bright); border-color: rgb(56 189 248 / 65%); box-shadow: 0 0 22px rgb(56 189 248 / 15%); }

.hero-network-canvas { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .42; }
@media (hover: none), (pointer: coarse) { .hero-network-canvas { opacity: .22; } }
@media (prefers-reduced-motion: reduce) {
  .hero-network-canvas { display: none; }
  .button-primary, .button-secondary, .nav-cta { translate: none !important; }
  .button-primary::after, .nav-cta::after { display: none; }
  .section-heading::after { animation: none; }
  .text-link::after, .button-secondary::after, .problem-diagnostic::after { transition: none; }
  .service-item *, .case-grid article *, .cooperation-grid article * { transition-duration: .01ms !important; }
}