/* Presentation belongs to the website; the vector panels retain the app UI. */
.product-gallery { border:1px solid #2b2c35; border-radius:16px; overflow:hidden; }
.gallery-panel { border-radius:0; }
.gallery-image-button { isolation:isolate; padding:0; background:radial-gradient(ellipse at 76% 9%,#302341 0,transparent 64%),linear-gradient(150deg,#1b1b24,#101116 76%); }
.gallery-image-button::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,transparent 70%,#101116 100%); }
.interface-art-motion { position:absolute; inset:0; display:block; pointer-events:none; transform-origin:50% 40%; }
.interface-demo-host { position:relative; display:block; }
.interface-demo-frame { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; opacity:0; pointer-events:none; }
.interface-demo-host.demo-ready .interface-demo-frame { opacity:1; }
.interface-demo-host.demo-ready > img { visibility:hidden; }
.gallery-arrows .demo-toggle { width:auto; padding:0 14px; font:14px/1.2 var(--sans); white-space:nowrap; }
.gallery-arrows .demo-toggle[hidden] { display:none; }
.gallery-image-button.art-enter .demo-ready .interface-demo-frame { animation:interface-art-enter .85s cubic-bezier(.16,1,.3,1) both; }
@media(max-width:560px){.gallery-arrows .demo-toggle{font-size:12px;padding:0 8px}.gallery-bottom{flex-wrap:wrap;gap:12px}}
@media(prefers-reduced-motion:reduce){.gallery-image-button.art-enter .interface-demo-frame{animation:none}}
.interface-art-frame { position:absolute; top:5%; left:5%; width:92%; display:block; border:1px solid #ffffff10; border-radius:13px; background:#191a20; box-shadow:0 35px 70px #0007,0 3px 12px #0005; transform:perspective(1700px) rotateY(-6deg) rotateX(2deg) rotateZ(-1.2deg); transform-origin:center 15%; overflow:hidden; transition:filter .3s ease; }
.gallery-image-button[data-art="analysis"] .interface-art-frame { width:96%; left:2%; top:47%; transform:translateY(-50%); border:0; border-radius:12px; box-shadow:none; }
.gallery-image-button[data-art="analysis"] .interface-art-motion { transform:none !important; }
.gallery-image-button[data-art="analysis"]::after { background:linear-gradient(180deg,transparent 94%,#101116); }
.gallery-image-button .interface-art-frame img { display:block; width:100%; height:auto; max-width:none; object-fit:initial; object-position:initial; transition:opacity .18s ease; }
.gallery-image-button[data-art="categories"] .interface-art-frame,
.gallery-image-button[data-art="draws"] .interface-art-frame { width:96%; left:2%; top:47%; transform:translateY(-50%) perspective(1800px) rotateY(-4deg) rotateZ(-1deg); padding:12px; box-sizing:border-box; }
.gallery-image-button[data-art="draws"] .interface-art-frame { padding:24px; }
.gallery-image-button[data-art="statistics"] .interface-art-frame { width:125%; top:7%; left:3%; }
.gallery-image-button[data-art="replayer"] .interface-art-frame { width:126%; top:6%; left:3%; }
.gallery-image-button[data-art="range"] .interface-art-frame { width:94%; left:4%; top:5%; }
.interface-art-note { position:absolute; z-index:3; bottom:28px; left:28px; color:#787487; font-family:var(--mono); font-size:10px; letter-spacing:.12em; line-height:1.4; }
.image-zoom-hint { z-index:3; bottom:18px; right:18px; padding:9px 14px; border:1px solid #ffffff0a; background:#282731; color:#e2deed; }
.gallery-image-button:hover .image-zoom-hint { background:#3b2b60; border-color:#a28bff33; }
.gallery-image-button:focus-visible { outline:2px solid #a28bff; outline-offset:-3px; }
.interface-art-error { display:none; position:relative; z-index:3; max-width:310px; padding:24px; color:#c9c4d4; font:16px/1.6 var(--sans); }
.gallery-image-button.has-error .interface-art-error { display:block; }
.gallery-image-button.has-error .interface-art-frame,.gallery-image-button.has-error .image-zoom-hint { visibility:hidden; }
.gallery-image-button.art-enter .interface-art-frame img { animation:interface-art-enter .85s cubic-bezier(.16,1,.3,1) both; }
@keyframes interface-art-enter { from { opacity:0; transform:translate3d(24px,34px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
.gallery-bottom { padding:18px 22px; background:#191a20; }
.feature-art { position:relative; isolation:isolate; height:315px; overflow:hidden; margin:0 0 28px; background:transparent; border:0; border-radius:0; }
.feature-art::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 48%,#0f1014 100%); }
.feature-art img { display:block; position:absolute; width:90%; height:auto; top:30px; left:8%; max-width:none; border-radius:9px; transform:perspective(1500px) rotateY(-6deg) rotateZ(-1.5deg); transform-origin:center top; box-shadow:none; }
.feature-art-analysis img { width:85%; left:10%; }
.feature-art-draws img { width:91%; left:6%; top:38px; }
.feature-art-replayer img { width:142%; left:5%; top:23px; }
.feature-art-statistics img { width:116%; left:6%; }
.feature-art-draws::after { background:linear-gradient(180deg,transparent 65%,#0f1014 100%); }
@media (min-width:1800px) { .feature-art { height:365px; } }
@media (max-width:1100px) { .interface-art-note { display:none; } .gallery-image-button[data-art="categories"] .interface-art-frame,.gallery-image-button[data-art="draws"] .interface-art-frame { padding:12px; } .feature-art { height:265px; } }
@media (max-width:800px) { .gallery-image-button { min-height:490px; } .interface-art-frame { width:91%; left:5%; } .gallery-image-button[data-art="statistics"] .interface-art-frame,.gallery-image-button[data-art="replayer"] .interface-art-frame { width:112%; left:3%; } .feature-art { height:310px; } }
@media (max-width:560px) { .gallery-image-button { min-height:370px; } .interface-art-frame { width:96%; left:3%; top:5%; border-radius:9px; } .gallery-image-button[data-art="categories"] .interface-art-frame,.gallery-image-button[data-art="draws"] .interface-art-frame { width:96%; left:2%; padding:9px; } .gallery-image-button[data-art="statistics"] .interface-art-frame,.gallery-image-button[data-art="replayer"] .interface-art-frame { width:119%; } .gallery-image-button[data-art="range"] .interface-art-frame { width:96%; left:3%; } .gallery-bottom { padding:14px; } .gallery-caption { display:none; } .feature-art { height:275px; } .image-zoom-hint { right:12px; bottom:12px; font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .gallery-image-button.art-enter .interface-art-frame img { animation:none; } .interface-art-frame,.gallery-image-button .interface-art-frame img { transition:none; } }
.gallery-image-button[data-art="categories"] .interface-art-frame { width:96%; left:2%; top:47%; transform:translateY(-50%); padding:0; border:0; box-shadow:none; }
.gallery-image-button[data-art="categories"] .interface-art-motion { transform:none !important; }
.gallery-image-button[data-art="categories"]::after { background:linear-gradient(180deg,transparent 98%,#101116); }
.gallery-image-button[data-art="draws"] .interface-art-frame { width:94%; left:5%; top:48%; padding:0; border:0; box-shadow:0 30px 65px #0005; transform:translateY(-50%) perspective(1800px) rotateY(-7deg) rotateX(2deg) rotateZ(-1.4deg); transform-origin:50% 50%; }
.gallery-image-button[data-art="draws"] .interface-art-motion { transform:none !important; }
.gallery-image-button[data-art="draws"]::after { background:none; }
.gallery-image-button[data-art="analysis"] .interface-art-frame,
.gallery-image-button[data-art="categories"] .interface-art-frame { width:101%; left:1%; transform:translateY(-50%) perspective(1800px) rotateY(-6deg) rotateX(1.5deg) rotateZ(-1deg); transform-origin:50% 50%; }
@media(max-width:560px){.gallery-image-button[data-art="draws"] .interface-art-frame{width:98%;left:2%;transform:translateY(-50%) perspective(1800px) rotateY(-3deg) rotateZ(-.6deg)}}
.gallery-image-button[data-art="statistics"] .interface-art-frame { width:95%;left:2%;top:47%;transform:translateY(-50%) perspective(1800px) rotateY(-6deg) rotateX(1deg) rotateZ(-1deg);transform-origin:50% 50%;border:0; }
.gallery-image-button[data-art="statistics"] .interface-art-motion { transform:none!important; }
.gallery-image-button[data-art="statistics"]::after { background:linear-gradient(180deg,transparent 97%,#101116); }
.gallery-image-button[data-gallery-visual] { cursor:default; }
.gallery-image-button[data-art="replayer"] .interface-art-frame { width:98%;left:2%;top:48%;transform:translateY(-50%) perspective(1800px) rotateY(-6deg) rotateX(1deg) rotateZ(-1deg);transform-origin:center;border:0; }
.gallery-image-button[data-art="replayer"] .interface-art-motion { transform:none!important; }
.gallery-image-button[data-art="replayer"]::after { background:none; }
.gallery-image-button[data-art="range"] .interface-art-frame { width:101%;left:1%;top:48%;transform:translateY(-50%) perspective(1800px) rotateY(-6deg) rotateX(1deg) rotateZ(-1deg);transform-origin:center;border:0; }
.gallery-image-button[data-art="range"] .interface-art-motion { transform:none!important; }
.gallery-image-button[data-art="range"]::after { background:none; }

/* One presentation viewport for every slide, independent of source aspect ratio.
   Camera zooms stay inside this viewport instead of moving its outer edges. */
.gallery-image-button[data-art] .interface-art-frame {
  top:6%; left:4%; width:92%; height:82%;
  padding:0; border:0; border-radius:13px; box-sizing:border-box;
  transform:perspective(1800px) rotateY(-6deg) rotateX(1deg) rotateZ(-1deg);
  transform-origin:center;
  background:#191a20; box-shadow:0 30px 65px #0005;
}
.gallery-image-button[data-art] .interface-demo-host { width:100%; height:100%; }
.gallery-image-button[data-art] .interface-art-frame img {
  width:100%; height:100%; object-fit:contain; object-position:center;
}
.gallery-image-button[data-art]::after { background:none; }
@media(max-width:560px) {
  .gallery-image-button[data-art] .interface-art-frame {
    transform:perspective(1800px) rotateY(-3deg) rotateZ(-.6deg);
    border-radius:9px;
  }
}

/* Immediate press feedback without changing the demo viewport geometry. */
/* Match the existing fixed-height feature crops at every breakpoint. */
.feature-art.feature-art-context { padding:0; overflow:hidden; }
.feature-art.feature-art-context::after { background:linear-gradient(180deg,transparent 48%,#0f1014 100%); }
.feature-art.feature-art-context img {
  position:absolute; top:12px; left:2%; width:96%; height:auto;
  border-radius:0; transform:perspective(1500px) rotateY(-3deg) rotateZ(-.6deg);
  transform-origin:center top; box-shadow:none;
  transition:transform .65s cubic-bezier(.22,1,.36,1);
}
/* Animate only the image: the crop, bottom fade and card layout stay fixed. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .feature-art.feature-art-context:hover img {
    transform:perspective(1500px) translateY(-4px) rotateY(0deg) rotateZ(0deg) scale(1.045);
  }
}
@media (prefers-reduced-motion:no-preference) {
  .benefit-feature:focus-within .feature-art.feature-art-context img {
    transform:perspective(1500px) translateY(-4px) rotateY(0deg) rotateZ(0deg) scale(1.045);
  }
}
@media (prefers-reduced-motion:reduce) {
  .feature-art.feature-art-context img { transition:none; }
}
.gallery-tab-indicator { position:absolute; left:0; top:7px; bottom:7px; border-radius:7px; background:#5c3ddb; pointer-events:none; transition:transform .48s cubic-bezier(.22,1,.36,1),width .48s cubic-bezier(.22,1,.36,1); }
.gallery-tabs:has(.gallery-tab-indicator) button { position:relative; z-index:1; }
.gallery-tabs:has(.gallery-tab-indicator) button[aria-selected='true'] { background:transparent; }
.gallery-image-button.art-enter .demo-ready .interface-demo-frame { animation:none; }
@media(prefers-reduced-motion:reduce) { .gallery-tab-indicator { transition:none; } }
.gallery-tabs button, .gallery-arrows button { min-height:44px; touch-action:manipulation; }
.gallery-tabs button:active, .gallery-arrows button:active:not(:disabled) {
  filter:brightness(1.18);
}
/* Keep keyboard focus inside the clipped tab strip. */
.sales-home .gallery-tabs button:focus-visible { outline-offset:-3px; }
.gallery-arrows button:disabled { cursor:wait; opacity:.65; }
@media(prefers-reduced-transparency:reduce) {
  .homepage-redesign header.nav, .homepage-redesign header.nav.scrolled {
    background:#191a20; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}
@media(prefers-contrast:more) {
  .homepage-redesign header.nav, .homepage-redesign header.nav.scrolled {
    background:#191a20; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-bottom:1px solid #b8b8c2;
  }
  .gallery-tabs button, .gallery-caption, .interface-art-note { color:#e5e5eb; }
  .gallery-tabs button[aria-selected='true'] { outline:2px solid #fff; outline-offset:-3px; }
}