:root {
  --demo-header: 78px;
}

html {
  scroll-padding-top: var(--demo-header);
}

.demo-ubicom-brand img {
  filter: none;
  background: #00aeef;
  object-position: -9999px;
  mask: url('../images/brand/logo.webp') center / contain no-repeat;
  -webkit-mask: url('../images/brand/logo.webp') center / contain no-repeat;
}

.demo-hero {
  min-height: calc(100dvh - var(--demo-bar) - var(--demo-header));
}

.demo-hero-copy {
  padding-block: clamp(24px, 6dvh, 80px);
}

@media (min-width: 821px) {
  .demo-service,
  .demo-contact {
    min-height: calc(100dvh - var(--demo-header));
    padding-block: clamp(32px, 6dvh, 90px);
  }

  .demo-service-image,
  .demo-service-image img {
    min-height: clamp(360px, 62dvh, 590px);
  }
}

@media (max-width: 580px) {
  :root {
    --demo-header: 68px;
  }
}

.demo-ubicom-back {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid #355265;
  border-radius: 100px;
  color: #dce9f1;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}

.demo-ubicom-back:hover,
.demo-ubicom-back:focus-visible {
  border-color: #00aeef;
  background: rgba(0, 174, 239, .08);
  color: #fff;
}

.demo-whatsapp {
  position: fixed;
  z-index: 60;
  right: 22px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 100px;
  background: #176b47;
  color: #fff;
  box-shadow: 0 14px 36px rgba(3, 22, 14, .28);
  transition: transform .2s, background .2s, box-shadow .2s;
}

.demo-whatsapp:hover,
.demo-whatsapp:focus-visible {
  transform: translateY(-2px);
  border-color: #00aeef;
  background: #07141f;
  color: #32c9ff;
  box-shadow: 0 0 0 1px rgba(0, 174, 239, .18), 0 18px 42px rgba(0, 174, 239, .24);
}

.demo-whatsapp svg {
  flex: 0 0 auto;
  fill: currentColor;
}

.demo-whatsapp span {
  display: grid;
}

.demo-whatsapp strong {
  font-size: .76rem;
}

.demo-whatsapp small {
  font-size: .65rem;
  opacity: .82;
}

@media (max-width: 580px) {
  .demo-ubicom-bar {
    gap: 8px;
    padding-inline: 12px;
  }

  .demo-ubicom-brand {
    gap: 0;
  }

  .demo-ubicom-brand img {
    width: 76px;
  }

  .demo-ubicom-brand span,
  .demo-ubicom-note,
  .demo-ubicom-cta {
    display: none;
  }

  .demo-ubicom-actions {
    gap: 0 !important;
  }

  .demo-ubicom-back {
    min-height: 42px;
    padding-inline: 12px;
    font-size: .69rem;
  }

  .demo-whatsapp {
    right: 12px;
    bottom: 12px;
    min-width: 48px;
    min-height: 48px;
    justify-content: center;
    padding: 10px;
  }

  .demo-whatsapp span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-ubicom-back,
  .demo-whatsapp {
    transition: none;
  }
}