:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-move:cubic-bezier(.4,0,.2,1);--tour-duration:6500ms}
.product-scene{position:relative;margin-top:var(--space-10);isolation:isolate;border-radius:var(--radius-md);overflow:hidden;background:#f4eee4}
.scene-parallax{transform:perspective(1400px) rotateX(var(--scene-x,0deg)) rotateY(var(--scene-y,0deg));transition:transform 600ms var(--ease-out);will-change:transform}
.scene-parallax img{width:100%;animation:scene-breathe 7s var(--ease-move) infinite alternate;transform-origin:center 70%}
@keyframes scene-breathe{from{transform:scale(1)}to{transform:scale(1.022)}}
.scene-explore{position:absolute;bottom:var(--space-4);left:50%;transform:translateX(-50%);min-height:44px;display:flex;align-items:center;justify-content:center;gap:var(--space-6);background:var(--surface);padding:var(--space-2) var(--space-5);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:var(--text-xs);white-space:nowrap;box-shadow:0 8px 24px -14px rgba(26,26,26,.3)}
.scene-explore span{animation:direction-nudge 2.8s var(--ease-move) infinite}
@keyframes direction-nudge{0%,70%,100%{transform:translateY(0)}85%{transform:translateY(4px)}}
.scene-caption{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-4);margin-top:var(--space-2);font-size:var(--text-xs);color:var(--muted);text-align:left}
#motion-toggle{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-pill);white-space:nowrap}
.motion-indicator{width:6px;height:6px;border-radius:50%;background:var(--gold-text);box-shadow:0 0 0 3px rgba(192,160,98,.14)}
.hero h1,.hero-copy,.hero-support,.hero .primary-button{backface-visibility:hidden}
.header{transition:box-shadow 250ms ease,border-color 250ms ease}
.header.scrolled{border-bottom-color:var(--border);box-shadow:0 6px 20px rgba(26,26,26,.025)}
.primary-button span,.demo-link span{transition:transform 220ms var(--ease-out)}
.primary-button:hover span,.demo-link:hover span{transform:translate(3px,-3px)}
.voice-paper{transition:box-shadow 350ms ease}
.voice-paper:hover{box-shadow:0 20px 45px -28px rgba(128,99,46,.4)}
.tour{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.tour-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border)}
.tour-top>p{font-size:var(--text-xs);font-weight:600;letter-spacing:1.1px;text-transform:uppercase}
#tour-play{display:flex;align-items:center;gap:var(--space-3);min-height:44px;min-width:132px;justify-content:center;padding:var(--space-2) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:var(--text-xs)}
#tour-play span{font-size:var(--text-base);line-height:1}
.tour-layout{display:grid;grid-template-columns:235px minmax(0,1fr)}
.tour-rail{padding:var(--space-4);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-2)}
.tour-step{position:relative;text-align:left;display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-5) var(--space-3);border:1px solid transparent;border-radius:var(--radius-sm);min-height:76px;width:100%;overflow:hidden;transition:background 300ms ease,border-color 300ms ease}
.tour-step.active{background:var(--muted-surface);border-color:rgba(192,160,98,.25)}
.tour-number{font-size:var(--text-xs);color:var(--gold-text);padding-top:var(--space-1)}
.tour-step-text{display:flex;flex-direction:column;gap:var(--space-2)}
.tour-step-text strong{font-size:var(--text-sm);font-weight:600;line-height:1.45}
.tour-step-text>span{font-size:var(--text-xs);line-height:1.65;color:var(--muted)}
.tour-step::after{content:"";height:2px;background:var(--gold);position:absolute;bottom:0;left:0;width:100%;transform:scaleX(0);transform-origin:left}
.tour[data-playing="true"][data-visible="true"] .tour-step.active::after{animation:tour-progress var(--tour-duration) linear}
@keyframes tour-progress{to{transform:scaleX(1)}}
.tour-visual{min-width:0;padding:var(--space-5);background:var(--muted-surface)}
.tour-screen{position:relative;overflow:hidden;aspect-ratio:1280/900;border-radius:8px;border:1px solid var(--border);background:var(--paper)}
.tour-desktop{width:100%;height:100%;object-fit:contain;transition:transform 950ms var(--ease-move),opacity 500ms ease;transform-origin:center}
.tour-focus{position:absolute;border:2px solid var(--gold-text);border-radius:6px;box-shadow:0 0 0 999px rgba(26,20,11,.08);left:15.5%;top:12.5%;width:25%;height:82%;transition:left 850ms var(--ease-move),top 850ms var(--ease-move),width 850ms var(--ease-move),height 850ms var(--ease-move),opacity 500ms ease;pointer-events:none}
.tour-focus span{position:absolute;right:8px;top:8px;display:flex;align-items:center;justify-content:center;background:var(--gold-text);color:var(--paper);min-width:28px;min-height:28px;font-size:var(--text-xs);border-radius:var(--radius-pill)}
.tour[data-step="1"] .tour-focus{left:42.5%;top:30.5%;width:53%;height:61%}
.tour[data-step="2"] .tour-focus{left:75%;top:13.7%;width:21%;height:6.1%}
.tour[data-step="2"] .tour-focus span{right:0;top:calc(100% + 8px)}
.tour[data-step="3"] .tour-focus,.tour[data-step="3"] .tour-desktop{opacity:0}
.tour-phone{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding:var(--space-3);background:var(--muted-surface)}
.tour-phone img{height:100%;width:auto;max-width:100%;border:4px solid #26231d;border-radius:20px;box-shadow:0 18px 36px -16px rgba(26,26,26,.26)}
.tour-caption{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-3)}
.tour-caption p{font-size:var(--text-xs);color:var(--muted);max-width:370px}
.tour-caption button{white-space:nowrap;flex-shrink:0}
dialog[open]{animation:dialog-appear 250ms var(--ease-out)}
@keyframes dialog-appear{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:scale(1)}}
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
[data-motion="off"] .scene-parallax{transform:none!important}
[data-motion="off"] .motion-indicator{background:var(--muted);box-shadow:none}
@media(max-width:1000px){.tour-layout{grid-template-columns:205px minmax(0,1fr)}.tour-rail{padding:var(--space-3)}.tour-step{padding:var(--space-4) var(--space-2)}.tour-caption{flex-direction:column;align-items:flex-start;gap:var(--space-1)}}
@media(max-width:720px){
  .product-scene{margin-top:var(--space-8);margin-inline:calc(-1 * var(--space-2));border-radius:var(--radius-sm)}
  .scene-parallax{width:116%;margin-left:-8%}
  .scene-explore{bottom:var(--space-2);padding-inline:var(--space-4);background:rgba(255,255,255,.96);color:#1a1a1a}
  .scene-caption{align-items:flex-start;gap:var(--space-2)}
  .tour-top{padding:var(--space-3) var(--space-4);gap:var(--space-3)}
  .tour-top>p{font-size:var(--text-xs);letter-spacing:.3px}
  #tour-play{min-width:120px;padding-inline:var(--space-3)}
  .tour-layout{grid-template-columns:1fr}
  .tour-rail{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);border-right:0;border-bottom:1px solid var(--border);padding:var(--space-3)}
  .tour-step{padding:var(--space-3) var(--space-2);min-height:70px;gap:var(--space-2)}
  .tour-step-text strong{font-size:var(--text-xs)}
  .tour-step-text>span{display:none}
  .tour-visual{padding:var(--space-3)}
  .tour-focus span{font-size:var(--text-xs);min-height:22px;min-width:22px;top:4px;right:4px}
  .tour-caption{gap:var(--space-2);align-items:flex-start;min-height:88px}
  .tour-phone{padding:var(--space-2)}.tour-phone img{border-width:2px;border-radius:12px}
}
@media(prefers-reduced-motion:reduce){.scene-parallax img,.scene-explore span,.tour-step::after{animation:none!important}}