body[data-3d-page],
body[data-3d-lite] {
  background:
    radial-gradient(circle at 12% 16%, rgba(89, 199, 249, .18), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(183, 242, 58, .18), transparent 24rem),
    radial-gradient(circle at 80% 78%, rgba(255, 122, 89, .12), transparent 28rem),
    var(--amp-soft);
}

.three-scroll-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
  -webkit-touch-callout: none;
  opacity: .88;
}

.three-scroll-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.68), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 15%, rgba(139,108,255,.12), transparent 24rem);
  mix-blend-mode: normal;
}

body[data-3d-page] .site-shell,
body[data-3d-lite] .site-shell {
  position: relative;
  z-index: 1;
}

body[data-3d-page] .site-header {
  background: rgba(248, 249, 242, .92);
  box-shadow: 0 18px 50px rgba(16, 20, 20, .08);
}

body[data-3d-page] .hero {
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(248,249,242,.72) 100%);
}

body[data-3d-page] .section.white {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(4px);
}

body[data-3d-page] .section.soft {
  background: rgba(248, 249, 242, .76);
  backdrop-filter: blur(3px);
}

body[data-3d-lite] .section.white,
body[data-3d-lite] .section.soft {
  background: rgba(255, 255, 255, .94);
}

body[data-3d-page] main {
  perspective: 1200px;
  transform-style: preserve-3d;
}

body[data-3d-page] .hero,
body[data-3d-page] .section {
  position: relative;
  overflow: hidden;
}

body[data-3d-page] .hero::before,
body[data-3d-page] .section::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.18)),
    radial-gradient(circle at 78% 22%, rgba(89,199,249,.13), transparent 22rem);
}

body[data-3d-page] .hero-grid,
body[data-3d-page] .landing-hero-grid,
body[data-3d-page] .quote-grid,
body[data-3d-page] .contact-grid,
body[data-3d-page] .os-grid,
body[data-3d-page] .blog-hero .hero-card {
  transform-style: preserve-3d;
}

body[data-3d-page] .hero-card,
body[data-3d-page] .screen-card,
body[data-3d-page] .lead-engine,
body[data-3d-page] .form-card,
body[data-3d-page] .price-list,
body[data-3d-page] .os-board {
  transform: translateZ(34px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  box-shadow: 0 24px 70px rgba(16,20,20,.14);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body[data-3d-page] .card,
body[data-3d-page] .work-card,
body[data-3d-page] .logo-tile,
body[data-3d-page] .price-row,
body[data-3d-lite] .card,
body[data-3d-lite] .work-card,
body[data-3d-lite] .logo-tile {
  transform: translate3d(0, var(--scroll-lift, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
}

body[data-3d-page] .card:hover,
body[data-3d-page] .work-card:hover,
body[data-3d-page] .logo-tile:hover,
body[data-3d-lite] .card:hover,
body[data-3d-lite] .work-card:hover {
  box-shadow: 0 22px 54px rgba(16,20,20,.12);
  border-color: rgba(16,20,20,.38);
}

body[data-3d-page] .btn,
body[data-3d-lite] .btn {
  box-shadow: 0 10px 24px rgba(16,20,20,.08);
}

body[data-3d-page] .btn.primary,
body[data-3d-page] .btn.whatsapp,
body[data-3d-page] .btn.accent {
  box-shadow: 0 16px 32px rgba(16,20,20,.14);
}

body[data-3d-page] [data-depth],
body[data-3d-lite] [data-depth] {
  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(.96);
  transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
}

body[data-3d-page] [data-depth].is-visible,
body[data-3d-lite] [data-depth].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Cursor glow — follows pointer */
body[data-3d-page]::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(700px circle at var(--cx, -300px) var(--cy, -300px), rgba(183,242,58,.04), transparent 50%);
}

/* Enhanced card hover */
body[data-3d-page] .card:hover,
body[data-3d-lite] .card:hover {
  box-shadow: 0 28px 56px rgba(16,20,20,.13), 0 0 0 1px rgba(183,242,58,.22);
  border-color: rgba(183,242,58,.38);
}
body[data-3d-page] .work-card:hover {
  box-shadow: 0 32px 64px rgba(16,20,20,.15);
  transform: translateY(-4px);
}

/* Gradient headline in cinematic hero */
body[data-3d-page] .hero-cinematic .h1 {
  background: linear-gradient(140deg, #ffffff 35%, rgba(183,242,58,.88) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body[data-3d-page] .hero [data-depth],
body[data-3d-lite] .hero [data-depth] {
  opacity: 1;
  transform: none;
}

body[data-3d-page].three-fallback .three-scroll-canvas,
body[data-3d-page].three-reduced .three-scroll-canvas {
  display: none;
}

body[data-3d-page].three-reduced *,
body[data-3d-lite].three-reduced * {
  transition-duration: .01ms !important;
  animation-duration: .01ms !important;
}

body[data-3d-page].three-reduced [data-depth],
body[data-3d-lite].three-reduced [data-depth] {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .three-scroll-canvas {
    opacity: .58;
    pointer-events: none !important;
  }

  /* Remove backdrop-filter on mobile — iOS Safari can block touch events on fixed
     elements (navbar, mobile menu) when backdrop-filter compositing layers are active */
  body[data-3d-page] .section.white,
  body[data-3d-page] .section.soft {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Remove 3D stacking context on mobile — perspective on main can trap touch events
     and is not needed when 3D tilt is disabled */
  body[data-3d-page] main {
    perspective: none;
    transform-style: flat;
  }

  /* Fix content clipping: sections have overflow:hidden for 3D effects, but on mobile
     scroll-lift transforms can shift cards outside their section bounds */
  body[data-3d-page] .section {
    overflow: visible;
  }

  /* Disable 3D compositing layers on grid containers — on Android Chrome these can
     create GPU layers that interfere with touch event routing to the fixed navbar */
  body[data-3d-page] .hero-grid,
  body[data-3d-page] .landing-hero-grid,
  body[data-3d-page] .quote-grid,
  body[data-3d-page] .contact-grid,
  body[data-3d-page] .os-grid,
  body[data-3d-page] .blog-hero .hero-card {
    transform-style: flat;
  }

  body[data-3d-page] .hero-card,
  body[data-3d-page] .screen-card,
  body[data-3d-page] .lead-engine,
  body[data-3d-page] .form-card,
  body[data-3d-page] .price-list,
  body[data-3d-page] .os-board {
    transform: translateZ(0);
  }
}

@media (max-width: 640px) {
  .three-scroll-canvas {
    opacity: .42;
    pointer-events: none !important;
  }

  body[data-3d-page] .section.white,
  body[data-3d-page] .section.soft {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-3d-page] main {
    perspective: none;
    transform-style: flat;
  }

  body[data-3d-page] .section {
    overflow: visible;
  }

  body[data-3d-page],
  body[data-3d-lite] {
    background:
      radial-gradient(circle at 20% 8%, rgba(89,199,249,.13), transparent 16rem),
      radial-gradient(circle at 90% 32%, rgba(183,242,58,.13), transparent 15rem),
      var(--amp-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .three-scroll-canvas {
    display: none;
  }

  body[data-3d-page] [data-depth],
  body[data-3d-lite] [data-depth] {
    opacity: 1;
    transform: none;
  }
}

/* Premium 3D refinement layer */
body[data-3d-page],
body[data-3d-lite] {
  --amp-ease-premium: cubic-bezier(.16, 1, .3, 1);
  --amp-shadow-soft: 0 18px 44px rgba(16, 20, 20, .10);
  --amp-shadow-lift: 0 28px 70px rgba(16, 20, 20, .15);
  --amp-inner-light: inset 0 1px 0 rgba(255, 255, 255, .68);
  background:
    radial-gradient(circle at 8% 8%, rgba(89, 199, 249, .16), transparent 26rem),
    radial-gradient(circle at 88% 10%, rgba(183, 242, 58, .16), transparent 24rem),
    radial-gradient(circle at 72% 86%, rgba(139, 108, 255, .10), transparent 28rem),
    linear-gradient(180deg, #fbfcf7 0%, var(--amp-soft) 42%, #fff 100%);
}

.three-scroll-canvas {
  z-index: 0;
  opacity: .74;
  mix-blend-mode: screen;
  filter: saturate(.88) contrast(.95);
}

.three-scroll-glow {
  z-index: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(183, 242, 58, .09), transparent 22rem),
    radial-gradient(circle at 78% 18%, rgba(89, 199, 249, .10), transparent 24rem),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 46%);
}

body[data-3d-page] .section.white,
body[data-3d-page] .section.soft {
  background: rgba(255, 255, 255, .90);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-3d-page] .section.soft {
  background: rgba(248, 249, 242, .92);
}

body[data-3d-page] .hero::before,
body[data-3d-page] .section::before {
  inset: 0;
  background:
    radial-gradient(circle at 84% 18%, rgba(89,199,249,.10), transparent 22rem),
    radial-gradient(circle at 12% 82%, rgba(183,242,58,.08), transparent 18rem);
}

body[data-3d-page] .hero-cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(var(--cx, 50vw)) calc(var(--cy, 20vh)), rgba(183,242,58,.10), transparent 18rem),
    linear-gradient(90deg, rgba(16,20,20,.52) 0%, rgba(16,20,20,.24) 58%, rgba(16,20,20,.36) 100%);
  opacity: .86;
}

body[data-3d-page] .hero-overlay {
  background:
    linear-gradient(110deg, rgba(16,20,20,.88) 0%, rgba(16,20,20,.62) 44%, rgba(16,20,20,.34) 100%),
    radial-gradient(circle at 72% 38%, rgba(89,199,249,.13), transparent 32rem),
    radial-gradient(circle at 14% 76%, rgba(183,242,58,.10), transparent 26rem);
}

body[data-3d-page] .hero-cinematic .hero-content {
  z-index: 2;
  transform: translate3d(0, calc(var(--hero-depth, 0) * -18px), 0);
  transition: transform .2s var(--amp-ease-premium);
}

body[data-3d-page] .hero-cinematic .h1,
body[data-3d-page] .hero-cinematic .hero-content .h1,
body[data-3d-page] .hero-cinematic .landing-hero-copy .h1,
body[data-3d-page] .hero-cinematic .hero-grid .h1 {
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .38), 0 0 48px rgba(183, 242, 58, .10);
}

body[data-3d-page] .hero-cinematic .lede {
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .28);
}

body[data-3d-page] .hero-service-chip,
body[data-3d-page] .hero-stat {
  transform: translate3d(0, var(--scroll-lift, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .55s var(--amp-ease-premium), border-color .55s var(--amp-ease-premium), background .55s var(--amp-ease-premium);
}

body[data-3d-page] .hero-service-chip:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(183,242,58,.36);
  transform: translate3d(0, -2px, 18px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

body[data-3d-page] .card,
body[data-3d-page] .work-card,
body[data-3d-page] .logo-tile,
body[data-3d-page] .price-row,
body[data-3d-lite] .card,
body[data-3d-lite] .work-card,
body[data-3d-lite] .logo-tile {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
  box-shadow: var(--amp-inner-light), 0 1px 0 rgba(16,20,20,.04), var(--amp-shadow-soft);
  transform: translate3d(0, var(--scroll-lift, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: opacity .78s var(--amp-ease-premium), transform .78s var(--amp-ease-premium), box-shadow .55s var(--amp-ease-premium), border-color .55s var(--amp-ease-premium), background .55s var(--amp-ease-premium);
}

body[data-3d-page] .card::after,
body[data-3d-page] .work-card::after,
body[data-3d-page] .logo-tile::after,
body[data-3d-page] .price-row::after,
body[data-3d-page] .form-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(183,242,58,.18), transparent 42%);
  opacity: 0;
  transition: opacity .45s var(--amp-ease-premium);
}

body[data-3d-page] .card:hover,
body[data-3d-page] .work-card:hover,
body[data-3d-page] .logo-tile:hover,
body[data-3d-page] .price-row:hover,
body[data-3d-lite] .card:hover,
body[data-3d-lite] .work-card:hover {
  border-color: rgba(16, 20, 20, .24);
  box-shadow: var(--amp-inner-light), var(--amp-shadow-lift);
  transform: translate3d(0, calc(var(--scroll-lift, 0px) - 5px), 28px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

body[data-3d-page] .card:hover::after,
body[data-3d-page] .work-card:hover::after,
body[data-3d-page] .logo-tile:hover::after,
body[data-3d-page] .price-row:hover::after,
body[data-3d-page] .form-card:hover::after {
  opacity: 1;
}

body[data-3d-page] .logo-tile {
  background: linear-gradient(180deg, #fff, rgba(248,249,242,.92));
}

body[data-3d-page] .logo-tile img {
  transition: transform .55s var(--amp-ease-premium), opacity .55s var(--amp-ease-premium);
}

body[data-3d-page] .logo-tile:hover img {
  transform: translateY(-2px) scale(1.035);
}

body[data-3d-page] .work-card {
  overflow: hidden;
}

body[data-3d-page] .work-card img {
  transition: transform .8s var(--amp-ease-premium), filter .8s var(--amp-ease-premium);
}

body[data-3d-page] .work-card:hover img {
  transform: translateY(-6px) scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}

body[data-3d-page] .price-list,
body[data-3d-page] .form-card,
body[data-3d-page] .os-board {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90));
  box-shadow: var(--amp-inner-light), var(--amp-shadow-soft);
}

body[data-3d-page] .price-row {
  box-shadow: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.84)),
    var(--row-tint, transparent);
}

body[data-3d-page] .tone-sky { --row-tint: rgba(89,199,249,.13); }
body[data-3d-page] .tone-lime { --row-tint: rgba(183,242,58,.16); }
body[data-3d-page] .tone-coral { --row-tint: rgba(255,122,89,.12); }
body[data-3d-page] .tone-violet { --row-tint: rgba(139,108,255,.12); }

body[data-3d-page] .form-card {
  transform: translateZ(30px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .55s var(--amp-ease-premium), box-shadow .55s var(--amp-ease-premium), border-color .55s var(--amp-ease-premium);
}

body[data-3d-page] .form-card:hover {
  border-color: rgba(183,242,58,.34);
  box-shadow: var(--amp-inner-light), 0 28px 72px rgba(16,20,20,.14);
}

body[data-3d-page] .btn {
  transition: transform .32s var(--amp-ease-premium), background .32s var(--amp-ease-premium), border-color .32s var(--amp-ease-premium), box-shadow .32s var(--amp-ease-premium);
}

body[data-3d-page] .btn:hover {
  box-shadow: 0 18px 38px rgba(16,20,20,.13);
}

body[data-3d-page] .btn:active {
  transform: translateY(1px) scale(.985);
}

body[data-3d-page] [data-depth],
body[data-3d-lite] [data-depth] {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.975);
}

body[data-3d-page] [data-depth].is-visible,
body[data-3d-lite] [data-depth].is-visible {
  opacity: 1;
  transform: translate3d(0, var(--scroll-lift, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1);
}

body[data-3d-page] .hero [data-depth],
body[data-3d-lite] .hero [data-depth] {
  opacity: 1;
}

body[data-3d-page] .section.ink {
  background:
    radial-gradient(circle at 72% 18%, rgba(89,199,249,.12), transparent 26rem),
    radial-gradient(circle at 8% 84%, rgba(183,242,58,.10), transparent 20rem),
    var(--amp-ink);
}

body[data-3d-page]::after {
  background: radial-gradient(620px circle at var(--cx, -300px) var(--cy, -300px), rgba(183,242,58,.055), transparent 52%);
}

body[data-3d-page].three-fallback .three-scroll-glow {
  opacity: .85;
}

@media (max-width: 900px) {
  .three-scroll-canvas,
  .three-scroll-glow {
    display: none;
  }

  body[data-3d-page] .hero-cinematic .hero-content {
    transform: none;
  }

  body[data-3d-page] .card,
  body[data-3d-page] .work-card,
  body[data-3d-page] .logo-tile,
  body[data-3d-page] .price-row,
  body[data-3d-page] .form-card,
  body[data-3d-page] .price-list,
  body[data-3d-page] .os-board {
    transform: none !important;
    box-shadow: var(--amp-inner-light), 0 14px 34px rgba(16,20,20,.08);
    will-change: auto;
  }

  body[data-3d-page] [data-depth],
  body[data-3d-page] [data-depth].is-visible,
  body[data-3d-lite] [data-depth],
  body[data-3d-lite] [data-depth].is-visible {
    opacity: 1;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  body[data-3d-page],
  body[data-3d-lite] {
    background:
      radial-gradient(circle at 24% 8%, rgba(89,199,249,.11), transparent 16rem),
      radial-gradient(circle at 94% 30%, rgba(183,242,58,.10), transparent 15rem),
      var(--amp-soft);
  }

  body[data-3d-page] .hero-cinematic .h1,
  body[data-3d-page] .hero-cinematic .hero-content .h1 {
    text-shadow: 0 2px 18px rgba(0,0,0,.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .three-scroll-glow {
    display: none;
  }

  body[data-3d-page] .hero-cinematic .hero-content,
  body[data-3d-page] .card,
  body[data-3d-page] .work-card,
  body[data-3d-page] .logo-tile,
  body[data-3d-page] .price-row,
  body[data-3d-page] .form-card {
    transform: none !important;
  }
}