/* Premium interaction layer: technical depth without changing the core layout. */
body{
  background-color:var(--bg,#f4f6f8);
  background-image:
    radial-gradient(circle at 8% 12%,rgba(0,166,184,.07),transparent 28rem),
    linear-gradient(rgba(27,58,92,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,58,92,.025) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px;
}
.header{box-shadow:0 8px 30px rgba(17,40,59,.035)}

#services{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(650px circle at var(--section-x,84%) var(--section-y,18%),rgba(0,166,184,.095),transparent 62%),
  linear-gradient(145deg,rgba(255,255,255,.5),rgba(244,247,249,.2));
}
#services::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.72;background:
  linear-gradient(115deg,transparent 0 64%,rgba(27,58,92,.035) 64% 64.15%,transparent 64.15%),
  repeating-linear-gradient(90deg,transparent 0 119px,rgba(27,58,92,.026) 120px);
}
.part-price{background-image:
  linear-gradient(125deg,transparent 0 72%,rgba(0,166,184,.045) 72% 72.15%,transparent 72.15%),
  radial-gradient(circle at 92% 9%,rgba(27,58,92,.065),transparent 28rem)!important;
}
body>main#top>.hero::after{background:
  radial-gradient(620px circle at var(--hero-x,72%) var(--hero-y,38%),rgba(83,220,231,.16),transparent 62%),
  linear-gradient(90deg,rgba(14,31,47,.97) 0%,rgba(20,41,60,.9) 38%,rgba(15,31,46,.15) 76%),
  linear-gradient(0deg,rgba(12,26,39,.5),transparent 50%);
}

.fx-magnetic{--fx-x:0px;--fx-y:0px;transform:translate3d(var(--fx-x),var(--fx-y),0);transition:transform 300ms cubic-bezier(.16,1,.3,1),background-color 160ms,border-color 160ms,box-shadow 160ms}
.fx-magnetic:active{transform:translate3d(var(--fx-x),var(--fx-y),0) scale(.97)}
.fx-card-glow{position:relative;isolation:isolate;overflow:hidden}
.fx-card-glow::before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;opacity:0;background:radial-gradient(360px circle at var(--card-x,50%) var(--card-y,50%),rgba(73,208,220,.12),transparent 68%);transition:opacity 300ms cubic-bezier(.16,1,.3,1)}

@media(hover:hover) and (pointer:fine){
  .fx-magnetic{will-change:transform}
  .fx-magnetic:hover{box-shadow:0 12px 30px rgba(10,47,67,.16)}
  .fx-card-glow:hover::before{opacity:1}
}
@media(max-width:720px){
  body{background-size:auto,32px 32px,32px 32px}
  body>main#top>.hero::after{background:linear-gradient(90deg,rgba(14,31,47,.97),rgba(14,31,47,.62)),linear-gradient(0deg,rgba(12,26,39,.5),transparent)}
}
@media(prefers-reduced-motion:reduce){
  .fx-magnetic,.fx-magnetic:hover,.fx-magnetic:active{transform:none!important;transition-duration:.01ms!important}
  .fx-card-glow::before{display:none}
  body>main#top>.hero::after{background:linear-gradient(90deg,rgba(14,31,47,.97) 0%,rgba(20,41,60,.9) 38%,rgba(15,31,46,.15) 76%),linear-gradient(0deg,rgba(12,26,39,.5),transparent 50%)}
}