:root {
  --bg: #ffffff;
  --surface: #f7fbff;
  --surface-hover: #eef6ff;
  --border: #ddeaf6;
  --brand: #0865b5;
  --brand-hover: #064b89;
  --brand-soft: #eef7ff;
  --brand-border: #cbe7ff;
  --whatsapp: #22c55e;
  --whatsapp-icon: #4ade80;
  --brand-wave: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20180'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%231286D9'%20fill-opacity='0.18'%20d='M0%2086C142%20110%20260%20110%20412%2080C560%2050%20722%2022%20884%2054C1044%2086%201162%20142%201440%2096V180H0Z'/%3E%3Cpath%20fill='%230865B5'%20fill-opacity='0.09'%20d='M0%20124C156%2092%20328%2090%20490%20118C676%20150%20792%20176%20978%20134C1130%20100%201260%2060%201440%2086V180H0Z'/%3E%3C/svg%3E");
}

html {
  background: #ffffff;
}

body {
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
  background: #ffffff !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -12vh -12vw;
  z-index: 0;
  pointer-events: none;
  background-image:
    var(--brand-wave),
    var(--brand-wave),
    var(--brand-wave);
  background-repeat: repeat-x;
  background-size:
    760px 86px,
    940px 96px,
    680px 74px;
  background-position:
    -22vw 12vh,
    20vw 46vh,
    -30vw 78vh;
  opacity: 0.18;
  transform: translate3d(0, 0, 0);
  animation:
    ambient-wave-drift 36s ease-in-out infinite,
    ambient-wave-breathe 18s ease-in-out infinite;
  will-change:
    background-position,
    opacity,
    transform;
}

body::after {
  background-image:
    var(--brand-wave),
    var(--brand-wave);
  background-size:
    880px 80px,
    720px 70px;
  background-position:
    24vw 28vh,
    -18vw 64vh;
  opacity: 0.12;
  animation:
    ambient-wave-drift-alt 44s ease-in-out infinite,
    ambient-wave-breathe-alt 22s ease-in-out infinite;
  animation-delay:
    -13s,
    -7s;
}

.page {
  position: relative;
  z-index: 1;
}

.share-button:hover,
.service:hover .service-icon,
.service:active .service-icon {
  border-color: #b8dafa;
  background: #e3f2ff;
  color: var(--brand);
}

.whatsapp-button svg,
.floating-whatsapp-button svg,
.whatsapp-icon {
  color: var(--whatsapp-icon);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline-color: rgba(8, 101, 181, 0.22);
}

@keyframes ambient-wave-drift {
  0%,
  100% {
    background-position:
      -22vw 12vh,
      20vw 46vh,
      -30vw 78vh;
    transform: translate3d(-1vw, 0, 0);
  }

  45% {
    background-position:
      26vw 18vh,
      -18vw 54vh,
      20vw 72vh;
    transform: translate3d(1vw, -1vh, 0);
  }

  72% {
    background-position:
      8vw 10vh,
      34vw 42vh,
      -8vw 84vh;
    transform: translate3d(0, 1vh, 0);
  }
}

@keyframes ambient-wave-drift-alt {
  0%,
  100% {
    background-position:
      24vw 28vh,
      -18vw 64vh;
    transform: translate3d(0.5vw, 0.5vh, 0);
  }

  50% {
    background-position:
      -24vw 34vh,
      28vw 58vh;
    transform: translate3d(-1vw, -0.5vh, 0);
  }
}

@keyframes ambient-wave-breathe {
  0%,
  100% {
    opacity: 0.11;
  }

  36% {
    opacity: 0.24;
  }

  66% {
    opacity: 0.16;
  }
}

@keyframes ambient-wave-breathe-alt {
  0%,
  100% {
    opacity: 0.07;
  }

  44% {
    opacity: 0.16;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
    opacity: 0.08;
  }
}