/* Critical fixes — load after phase4.css */

/* Loader must cover the full viewport (phase4 had accidentally set position:relative) */
.page-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0a0a0b !important;
  gap: 1.25rem;
  margin: 0 !important;
  transform: none !important;
}

.page-loader.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.nav,
main,
.footer,
.footer-clay {
  position: relative;
  z-index: 2;
}

/* Hero cards depth */
.hero-stage {
  perspective: 1400px;
}
.hero-stage__canvas {
  z-index: 12 !important;
}
.hero-float {
  z-index: 8;
  transform-style: preserve-3d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background: linear-gradient(145deg, rgba(30, 30, 34, 0.94), rgba(10, 10, 12, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-float--whatsapp {
  transform: rotateY(12deg) rotateX(4deg);
  animation: float-a-3d 7.5s ease-in-out infinite;
}
.hero-float--ads {
  transform: rotateY(-14deg) rotateX(6deg);
  animation: float-b-3d 8.5s ease-in-out infinite;
}
.hero-float--web {
  transform: rotateY(8deg) rotateX(-5deg);
  animation: float-c-3d 9s ease-in-out infinite;
}
.hero-float:hover {
  transform: translateY(-8px) scale(1.03) !important;
  border-color: rgba(212, 168, 75, 0.35);
}
@keyframes float-a-3d {
  0%, 100% { transform: rotateY(12deg) rotateX(4deg) translateY(0); }
  50% { transform: rotateY(12deg) rotateX(4deg) translateY(-12px); }
}
@keyframes float-b-3d {
  0%, 100% { transform: rotateY(-14deg) rotateX(6deg) translateY(0); }
  50% { transform: rotateY(-14deg) rotateX(6deg) translateY(10px); }
}
@keyframes float-c-3d {
  0%, 100% { transform: rotateY(8deg) rotateX(-5deg) translateY(0); }
  50% { transform: rotateY(8deg) rotateX(-5deg) translateY(-8px); }
}

.service-visual {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(212, 168, 75, 0.08), transparent 65%);
}
.service-visual__canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.service-row:hover .service-visual__canvas,
.service-row.active .service-visual__canvas {
  opacity: 1;
}