/* Real 3D point geometry; the copy keeps the official product-page layout. */
.detail-page .product-banner {
  --ai-particle-drop: 64px;
  height: 560px;
  background: radial-gradient(ellipse at 77% 52%, #093765 0%, #041d3b 40%, #021125 78%);
  color: #f2f7ff;
}
.detail-page .product-banner::before { display: none; }
.detail-page .banner-inner { z-index: 2; pointer-events: none; }
.detail-page .banner-copy { top: 185px; color: #f2f7ff; width: min(560px, 42vw); }
.detail-page .banner-copy h1 { font-size: 34px; line-height: 1.45; padding: 0; margin-bottom: 24px; letter-spacing: 0; }
.detail-page .banner-copy h1 span { color: #64d8ff; }
.detail-page .banner-copy > p { padding: 0; font-size: 18px; line-height: 1.9; color: #b8cce2; }
.particle-stage { position: absolute; inset: 0; z-index: 1; }
.particle-view { position: absolute; top: 84px; bottom: 52px; left: 48%; right: max(16px, calc((100% - 1500px) / 2)); pointer-events: none; }
#hero-particle-canvas, .particle-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#hero-particle-canvas { opacity: 0; transition: opacity .3s; }
.particle-fallback { transform: translateY(var(--ai-particle-drop)); }
.particle-stage[data-ready=true] #hero-particle-canvas { opacity: 1; }
.particle-stage[data-ready=true] .particle-fallback { visibility: hidden; }
.particle-controls { position: absolute; z-index: 3; left: 48%; right: max(16px, calc((100% - 1500px) / 2)); bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 24px; }
.particle-controls[hidden] { display: none; }
.particle-shapes { display: flex; gap: 22px; }
.particle-shapes button { display: flex; align-items: center; gap: 7px; color: #8daac9; font-size: 12px; padding: 5px 0; border: 0; background: transparent; white-space: nowrap; }
.particle-shapes button::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #5d80a5; }
.particle-shapes button[aria-pressed=true] { color: #75e0ff; }
.particle-shapes button[aria-pressed=true]::before { background: #75e0ff; box-shadow: 0 0 0 3px #75e0ff17; }
.particle-shapes button:hover { color: #75e0ff; }
.hero-motion-toggle { display: flex; align-items: center; gap: 6px; color: #59718f; font-size: 11px; padding: 5px 0 5px 20px; border: 0; border-left: 1px solid #a4bbd14d; background: transparent; line-height: 1.4; white-space: nowrap; }
.hero-motion-toggle::before { content: ''; width: 5px; height: 7px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.hero-motion-toggle[aria-pressed=true]::before { width: 0; height: 0; border: 4px solid transparent; border-left: 6px solid currentColor; border-right: 0; }
.hero-motion-toggle:hover { color: #006bdf; }
.hero-motion-toggle[hidden] { display: none; }
.particle-controls button:disabled { opacity: .45; cursor: default; }
@media (max-width: 1200px) {
  .detail-page .banner-copy { top: 162px; left: 60px; width: 43vw; }
  .detail-page .banner-copy h1 { font-size: 30px; }
  .detail-page .banner-copy > p { font-size: 17px; }
  .particle-view, .particle-controls { left: 51%; right: 14px; }
  .particle-controls { gap: 15px; }
  .particle-shapes { gap: 14px; }
  .hero-motion-toggle { padding-left: 14px; }
}
@media (max-width: 700px) {
  .detail-page .product-banner { --ai-particle-drop: 24px; height: 760px; background: linear-gradient(180deg, #021125 35%, #06284d 100%); }
  .detail-page .banner-copy { left: 24px; right: 24px; top: 112px; width: auto; }
  .detail-page .banner-copy h1 { font-size: 27px; margin-bottom: 20px; }
  .detail-page .banner-copy > p { font-size: 16px; line-height: 1.9; }
  .particle-view { left: 8px; right: 8px; top: 330px; bottom: 55px; }
  .particle-controls { left: 12px; right: 12px; bottom: 18px; gap: 14px; }
  .particle-shapes { gap: 16px; }
  .particle-shapes button { font-size: 11px; }
  .hero-motion-toggle { padding-left: 13px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #hero-particle-canvas { transition: none; }
  .hero-motion-toggle { display: none; }
}