/* ═══════════════════════════════════════════════
   KOMET — 3D ACCENT SHAPES
   Small wireframe canvases anchored in section
   gutters — not overlaying text, not fixed.
   ═══════════════════════════════════════════════ */

/* ── Shared accent canvas base ──────────────── */
.shape-accent {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 0;
}
.shape-accent.ready { opacity: 1; }

/* Only show when viewport is wide enough
   to have a real gutter outside content */
@media (max-width: 1360px) {
  .shape-accent { display: none; }
}

/* ── Triangle — left gutter of compare section  */
#shape-triangle {
  left: 20px;
  top: 50%;
  transform: translateY(-55%);
  width: 150px;
  height: 150px;
}

/* ── Geodesic sphere — right gutter of services */
#shape-sphere {
  right: 20px;
  bottom: 140px;
  width: 185px;
  height: 185px;
}

/* Sections need position:relative so canvases
   are scoped to them (added via inline style) */

/* ── 3D tilt cards ──────────────────────────── */
.features-grid  { perspective: 1200px; }
.compare-grid   { perspective: 1400px; }
.pricing-grid   { perspective: 1400px; }

.feature,
.compare-card,
.pricing-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature.tilt-active,
.compare-card.tilt-active,
.pricing-card.tilt-active {
  transition: transform 0.08s linear, box-shadow 0.08s linear;
}

.feature::after,
.compare-card::after,
.pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(192, 132, 252, 0.10) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.feature:hover::after,
.compare-card:hover::after,
.pricing-card:hover::after { opacity: 1; }

.feature:hover,
.compare-card:hover,
.pricing-card:hover {
  box-shadow: 0 28px 60px rgba(0,0,0,0.45),
              0 0 0 1px rgba(192,132,252,0.12);
}
.compare-card--featured:hover {
  box-shadow: 0 28px 60px rgba(0,0,0,0.5),
              0 0 0 1px rgba(192,132,252,0.35);
}