/* Homepage layout & static 3D styling — motion handled by no-motion.css */

.home-3d-main {
  --d3-cyan: #22d3ee;
  --d3-violet: #a78bfa;
  --d3-magenta: #f472b6;
  overflow-x: hidden;
}

.home-3d-hero {
  position: relative;
  min-height: calc(100svh - 4.5rem);
  max-height: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

.home-3d-hero.apple-hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (min-width: 768px) {
  .home-3d-hero.apple-hero {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (min-width: 1024px) {
  .home-3d-hero.apple-hero {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

.home-3d-hero-shell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.home-3d-hero-inner {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  align-content: center;
  justify-items: center;
  width: 100%;
}

.home-3d-visual-wrap {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transform: translateY(0) rotateY(-12deg) rotateX(6deg) translateZ(0);
}

.home-3d-visual-wrap::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--d3-cyan), var(--d3-violet), var(--d3-magenta));
  background-size: 200% 200%;
  background-position: 0% 50%;
  transform: translateZ(-30px) rotateY(8deg);
  opacity: 0.85;
  z-index: -1;
}

.home-3d-tilt-inner {
  transform-style: preserve-3d;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.home-3d-visual-wrap img {
  border-radius: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 32px 64px -16px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(34, 211, 238, 0.35),
    0 0 60px rgba(34, 211, 238, 0.2),
    inset 0 0 40px rgba(255, 255, 255, 0.06);
  transform: rotateY(-6deg) rotateX(4deg) translateZ(40px);
}

.home-3d-card {
  transform-style: preserve-3d;
}

.home-3d-tile {
  transform-style: preserve-3d;
}

.home-3d-cta {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.home-3d-cta::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 180deg at 50% 50%, transparent, rgba(34, 211, 238, 0.12), transparent 40%, rgba(167, 139, 250, 0.15), transparent 75%);
}

.home-3d-cta-inner {
  position: relative;
  z-index: 1;
}

.home-3d-section-perspective {
  perspective: 900px;
  transform-style: preserve-3d;
}