/* Modern motion and ambient visual system */
:root{
  --motion-x:50vw;
  --motion-y:24vh;
  --parallax-y:0px;
  --page-progress:0;
}

html.motion-enabled body{
  background:
    radial-gradient(circle at 12% 16%,rgba(103,216,242,.16),transparent 29rem),
    radial-gradient(circle at 88% 72%,rgba(21,155,209,.12),transparent 34rem),
    linear-gradient(180deg,#fbfdfe 0%,#f1f8fa 100%);
}

html.motion-enabled body::before,
html.motion-enabled body::after{
  content:"";
  position:fixed;
  inset:var(--header-h) 0 0;
  z-index:0;
  pointer-events:none;
}

html.motion-enabled body::before{
  opacity:.58;
  background-image:
    linear-gradient(rgba(13,83,127,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,83,127,.025) 1px,transparent 1px),
    radial-gradient(circle at 20% 30%,rgba(103,216,242,.08),transparent 22rem),
    radial-gradient(circle at 78% 68%,rgba(21,155,209,.065),transparent 28rem);
  background-size:72px 72px,72px 72px,100% 100%,100% 100%;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.18));
  animation:background-drift 28s linear infinite;
}

html.motion-enabled body::after{
  width:520px;
  height:520px;
  inset:auto;
  left:var(--motion-x);
  top:var(--motion-y);
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(103,216,242,.13),rgba(103,216,242,.045) 34%,rgba(103,216,242,0) 70%);
  filter:blur(3px);
  transition:left .11s linear,top .11s linear;
}

.ambient{
  opacity:1;
}

.ambient::before{
  content:"";
  position:absolute;
  width:72vw;
  height:72vw;
  min-width:720px;
  min-height:720px;
  left:-22vw;
  top:-26vw;
  border-radius:50%;
  background:conic-gradient(from 20deg,
    rgba(103,216,242,.11),
    rgba(21,155,209,.025),
    rgba(103,216,242,.02),
    rgba(21,155,209,.10),
    rgba(103,216,242,.11));
  filter:blur(78px);
  animation:aurora-orbit 34s linear infinite;
}

.ambient::after{
  width:470px;
  height:470px;
  background:radial-gradient(circle,rgba(103,216,242,.14),rgba(21,155,209,.035) 42%,rgba(103,216,242,0) 72%);
}

.bubble{
  will-change:transform,opacity;
  box-shadow:
    inset 0 0 34px rgba(255,255,255,.16),
    0 0 42px rgba(103,216,242,.06);
  animation-name:float-bubble-modern;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}

.bubble:nth-child(1){animation-delay:-4s}
.bubble:nth-child(2){animation-delay:-12s}
.bubble:nth-child(3){animation-delay:-19s}
.bubble:nth-child(4){animation-delay:-7s}
.bubble:nth-child(5){animation-delay:-14s}
.bubble:nth-child(6){animation-delay:-22s}
.bubble:nth-child(7){animation-delay:-10s}

.scroll-progress{
  position:fixed;
  z-index:150;
  left:0;
  top:0;
  width:var(--progress,0%);
  height:3px;
  background:linear-gradient(90deg,#159bd1,#67d8f2,#d9f8ff);
  box-shadow:0 0 18px rgba(103,216,242,.72);
  transition:width .08s linear;
}

.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  opacity:.7;
  transform:scaleX(.35);
  transform-origin:center;
  background:linear-gradient(90deg,transparent,rgba(103,216,242,.75),transparent);
  transition:transform .45s ease,opacity .45s ease;
}

.site-header.is-scrolled::after{
  transform:scaleX(1);
  opacity:1;
}

.brand img{
  transition:transform .35s ease,filter .35s ease;
}

.brand:hover img{
  transform:translateY(-2px) rotate(-2deg) scale(1.04);
  filter:drop-shadow(0 8px 14px rgba(21,155,209,.18));
}

.menu a{
  position:relative;
  overflow:hidden;
}

.menu a::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:5px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  transform:scaleX(0);
  transition:transform .25s ease;
}

.menu a:hover::after,
.menu a[aria-current="page"]::after{
  transform:scaleX(1);
}

.hero::after{
  content:"";
  position:absolute;
  inset:-40% -35%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.09) 49%,rgba(103,216,242,.13) 52%,transparent 63%);
  transform:translateX(-34%) rotate(4deg);
  animation:hero-light-sweep 11s ease-in-out infinite;
}

.hero-mark{
  will-change:transform;
  transform:translate3d(0,var(--parallax-y),0) rotate(4deg);
  animation:hero-mark-float 12s ease-in-out infinite;
}

.hero-title-word{
  background:linear-gradient(105deg,rgba(255,255,255,.11) 18%,rgba(180,238,250,.34) 42%,rgba(255,255,255,.12) 67%);
  background-size:230% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:title-shimmer 9s ease-in-out infinite;
}

.eyebrow::before,
.label::before{
  animation:dot-pulse 2.8s ease-in-out infinite;
}

.btn,
.header-phone{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn::after,
.header-phone::after{
  content:"";
  position:absolute;
  top:-60%;
  bottom:-60%;
  width:42%;
  left:-70%;
  z-index:-1;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  opacity:.7;
}

.btn:hover::after,
.header-phone:hover::after{
  animation:button-sweep .78s ease-out;
}

.service-showcase::after,
.service-visual::before,
.brand-band::before,
.cta::before{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:inherit;
}

.service-showcase::after,
.service-visual::before{
  inset:-45% -25%;
  background:linear-gradient(112deg,transparent 40%,rgba(103,216,242,.15) 50%,transparent 60%);
  transform:translateX(-45%);
  animation:glass-sweep 10s ease-in-out infinite;
}

.brand-band::before{
  width:440px;
  height:440px;
  right:-120px;
  top:-180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(103,216,242,.22),rgba(103,216,242,0) 68%);
  animation:glow-breathe 7s ease-in-out infinite;
}

.cta{
  position:relative;
  overflow:hidden;
}

.cta::before{
  inset:0;
  background:
    radial-gradient(circle at 88% 20%,rgba(103,216,242,.12),transparent 18rem),
    linear-gradient(110deg,transparent 44%,rgba(255,255,255,.62) 50%,transparent 56%);
  background-size:100% 100%,220% 100%;
  background-position:0 0,-160% 0;
  animation:cta-sheen 12s ease-in-out infinite;
}

.service-card,
.detail-card,
.process-step,
.request-item,
.company-card,
.contact-primary{
  transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease,border-color .35s ease;
}

.service-card::after,
.detail-card::after,
.process-step::after,
.request-item::after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(103,216,242,.95),transparent);
  transform:scaleX(0);
  transition:transform .35s ease;
  pointer-events:none;
}

.service-card:hover::after,
.detail-card:hover::after,
.process-step:hover::after,
.request-item:hover::after{
  transform:scaleX(1);
}

.detail-card:hover,
.process-step:hover,
.request-item:hover,
.company-card:hover{
  transform:translateY(-5px);
  border-color:rgba(21,155,209,.24);
  box-shadow:0 22px 52px rgba(7,31,61,.12);
}

.card-icon{
  position:relative;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease;
}

.card-icon::after{
  content:"";
  position:absolute;
  inset:-35%;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);
  transform:translateX(-80%) rotate(8deg);
  transition:transform .65s ease;
}

.service-card:hover .card-icon{
  transform:translateY(-5px) rotate(-2deg) scale(1.05);
  box-shadow:0 16px 28px rgba(21,155,209,.14);
}

.service-card:hover .card-icon::after{
  transform:translateX(80%) rotate(8deg);
}

.fact,
.trust,
.visual-tags span{
  transition:transform .28s ease,border-color .28s ease,background .28s ease;
}

.fact:hover,
.trust:hover,
.visual-tags span:hover{
  transform:translateY(-2px);
  border-color:rgba(103,216,242,.30);
  background:rgba(255,255,255,.11);
}

.showcase-tab[aria-selected="true"]{
  position:relative;
  overflow:hidden;
}

.showcase-tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:-35%;
  right:-35%;
  top:0;
  height:3px;
  background:linear-gradient(90deg,transparent,#67d8f2,#d9f8ff,#67d8f2,transparent);
  animation:tab-line 2.8s linear infinite;
}

body.motion-ready .reveal-item{
  opacity:0;
  transform:translate3d(0,28px,0) scale(.985);
  filter:blur(7px);
  transition:
    opacity .72s ease var(--reveal-delay,0ms),
    transform .78s cubic-bezier(.2,.75,.2,1) var(--reveal-delay,0ms),
    filter .72s ease var(--reveal-delay,0ms);
}

body.motion-ready .reveal-item.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

@keyframes background-drift{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:72px 72px,-72px 72px,30px -18px,-28px 22px}
}

@keyframes aurora-orbit{
  from{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.08)}
  to{transform:rotate(360deg) scale(1)}
}

@keyframes float-bubble-modern{
  0%{transform:translate3d(0,18px,0) scale(.96);opacity:calc(var(--op) * .78)}
  48%{transform:translate3d(24px,-18px,0) scale(1.04);opacity:var(--op)}
  100%{transform:translate3d(48px,-46px,0) scale(.98);opacity:calc(var(--op) * .82)}
}

@keyframes hero-light-sweep{
  0%,18%{transform:translateX(-38%) rotate(4deg);opacity:0}
  34%{opacity:1}
  68%{opacity:.85}
  82%,100%{transform:translateX(38%) rotate(4deg);opacity:0}
}

@keyframes hero-mark-float{
  0%,100%{margin-bottom:0}
  50%{margin-bottom:18px}
}

@keyframes title-shimmer{
  0%,18%{background-position:100% 0}
  55%,100%{background-position:0 0}
}

@keyframes dot-pulse{
  0%,100%{box-shadow:0 0 0 5px rgba(103,216,242,.12)}
  50%{box-shadow:0 0 0 9px rgba(103,216,242,0),0 0 16px rgba(103,216,242,.75)}
}

@keyframes button-sweep{
  from{left:-70%}
  to{left:135%}
}

@keyframes glass-sweep{
  0%,20%{transform:translateX(-48%);opacity:0}
  34%{opacity:1}
  68%{opacity:.75}
  82%,100%{transform:translateX(48%);opacity:0}
}

@keyframes glow-breathe{
  0%,100%{transform:scale(.94);opacity:.62}
  50%{transform:scale(1.08);opacity:1}
}

@keyframes cta-sheen{
  0%,45%{background-position:0 0,-160% 0}
  62%,100%{background-position:0 0,160% 0}
}

@keyframes tab-line{
  from{transform:translateX(-28%)}
  to{transform:translateX(28%)}
}

@media (max-width:760px){
  html.motion-enabled body::before{opacity:.38;background-size:92px 92px,92px 92px,100% 100%,100% 100%}
  html.motion-enabled body::after{width:340px;height:340px;opacity:.72}
  .ambient::before{min-width:620px;min-height:620px;filter:blur(92px)}
  .bubble:nth-child(n+5){display:none}
  .hero::after{animation-duration:14s}
}

@media (hover:none){
  html.motion-enabled body::after{display:none}
  .detail-card:hover,.process-step:hover,.request-item:hover,.company-card:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html.motion-enabled body::before,
  .ambient::before,
  .bubble,
  .hero::after,
  .hero-mark,
  .hero-title-word,
  .eyebrow::before,
  .label::before,
  .service-showcase::after,
  .service-visual::before,
  .brand-band::before,
  .cta::before,
  .showcase-tab[aria-selected="true"]::after{
    animation:none!important;
  }
  body.motion-ready .reveal-item{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
  .scroll-progress{transition:none}
}