/* Same Streamer Command layout and palette, with physically layered surfaces.
 * Depth never hides content or controls. Motion is optional and pointer-only.
 */
.sc-depth .product-preview {
  --depth-rest-y: -9deg;
  --depth-rest-x: 5deg;
  transform: perspective(1500px) rotateX(var(--depth-x, var(--depth-rest-x))) rotateY(var(--depth-y, var(--depth-rest-y)));
  transform-style: preserve-3d;
  background: linear-gradient(145deg, #29233c, #14111f 52%, #0f0e18);
  border-color: #514060;
  box-shadow: inset 0 1px 0 #ffffff21, 1px 2px 0 #292034, 2px 4px 0 #241a30,
    3px 6px 0 #20172b, 4px 8px 0 #1a1224, 5px 10px 0 #110c19,
    14px 32px 50px #0009, 0 0 65px #9146ff17;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
[dir="rtl"] .sc-depth .product-preview { --depth-rest-y: 9deg; }
.sc-depth .preview-top { transform: translateZ(32px); }
.sc-depth .preview-grid { transform-style: preserve-3d; }
.sc-depth .preview-card {
  transform: translateZ(20px);
  border-color: #41364f;
  background: linear-gradient(150deg, #1c1829, #12101e);
  box-shadow: inset 0 1px 0 #ffffff0d, 0 5px 0 #090712, 0 14px 20px #0005;
}
.sc-depth .preview-card.wide { transform: translateZ(30px); }
.sc-depth .preview-value { text-shadow: 0 2px 1px #0008; }
.sc-depth .preview-dots i { box-shadow: inset 0 1px 1px #fff3, 0 2px 3px #0008; }
.sc-depth .pill { box-shadow: inset 0 1px 0 #ffffff14, 0 3px 0 #151020; }
.sc-depth :is(.feature-card, .pricing-card) {
  --depth-rest-x: 0deg; --depth-rest-y: 0deg;
  transform: perspective(1300px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
  box-shadow: inset 0 1px 0 #ffffff12, 0 5px 0 #0a0811, 0 18px 32px #0004;
}
.sc-depth :is(.feature-card, .pricing-card):hover { border-color: #775098; }
.sc-depth .feature-icon {
  transform: translateZ(22px);
  background: linear-gradient(145deg, #4c2877, #26193d);
  box-shadow: inset 0 1px 0 #ffffff26, 0 4px 0 #1b0f2c, 0 10px 18px #0005;
}
.sc-depth :is(.feature-card h3, .pricing-card .price) { transform: translateZ(12px); }
.sc-depth :is(.button, .btn, .ops-page button:not(.ghost)) {
  box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #0004, 0 3px 0 #170d27, 0 6px 12px #0003;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.sc-depth :is(.button, .btn, .ops-page button):active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 #ffffff14, 0 1px 0 #170d27;
}
.sc-depth :is(.brand-mark, .feature-icon) { border: 1px solid #cfa8ff24; }
.sc-depth :is(.auth-card, .card, .service-card, .ops-card, .ops-tile, .pricing-info, .cta) {
  box-shadow: inset 0 1px 0 #ffffff0c, 0 4px 0 #08060f, 0 12px 28px #0003;
}
.sc-depth :is(.trust-row, .faq details) { box-shadow: inset 0 1px 0 #ffffff0a, 0 4px 0 #08060f; }
.sc-depth :is(.button, .btn, button, a):focus-visible { outline: 2px solid #c7a2ff; outline-offset: 4px; }
@media (max-width: 920px), (prefers-reduced-motion: reduce) {
  .sc-depth :is(.product-preview, .preview-card, .preview-card.wide, .preview-top, .feature-card, .pricing-card, .feature-icon, .feature-card h3, .pricing-card .price) { transform: none; transition: none; }
}
@media (max-width: 620px) {
  .sc-depth .site-header .nav { flex-wrap: wrap; gap: 12px; padding-block: 12px; }
  .sc-depth .nav-actions { flex-wrap: wrap; gap: 8px; }
  .sc-depth .nav-actions .button { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-depth :is(.product-preview, .feature-card, .pricing-card, .button, .btn, button) { transition: none; }
}
@media (forced-colors: active) {
  .sc-depth :is(.product-preview, .feature-card, .pricing-card, .button, .btn, .card, .service-card) { box-shadow: none; }
}