.digital-store-demo{position:relative;min-height:100svh;overflow:hidden;background:#090c0b}.store-scene{position:absolute;inset:0;perspective:1300px;background:radial-gradient(circle at 55% 34%,#30483a,#131a17 49%,#070908 82%)}.store-scene:before{content:"";position:absolute;left:0;right:0;top:0;height:12%;background:linear-gradient(#080a09,#151b18);border-bottom:1px solid rgba(255,255,255,.1)}.store-ceiling{position:absolute;left:10%;right:8%;top:7%;height:12%;display:flex;justify-content:space-around;transform:rotateX(64deg);transform-origin:top}.store-ceiling i{width:2px;height:100%;background:linear-gradient(#fff9,transparent);box-shadow:0 0 22px #fff}.store-backwall{position:absolute;left:20%;right:12%;top:16%;height:46%;border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.008));box-shadow:0 35px 120px #000a}.store-backwall span{position:absolute;left:39%;top:10%;color:#dbe3de;font-size:11px;font-weight:800;letter-spacing:.22em;text-align:center}.store-floor-grid{position:absolute;left:-10%;right:-10%;bottom:-26%;height:70%;transform:rotateX(64deg);transform-origin:bottom;background:repeating-linear-gradient(90deg,transparent 0 130px,rgba(255,255,255,.06) 131px),repeating-linear-gradient(0deg,transparent 0 95px,rgba(255,255,255,.045) 96px),linear-gradient(#1b241f,#0b0e0d);border-top:1px solid rgba(255,255,255,.2)}.display-wall{position:absolute;top:27%;width:18%;height:31%;border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.01));color:#87918b;font-size:8px;letter-spacing:.18em}.display-wall span{position:absolute;left:12px;top:12px}.display-wall.left{left:23%;transform:rotateY(10deg)}.display-wall.right{right:15%;transform:rotateY(-10deg)}.central-pedestal{position:absolute;left:54%;bottom:11%;width:22%;height:16%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#405349,#17201c 66%);box-shadow:0 54px 45px #000b,0 -12px 38px rgba(217,244,81,.09) inset}.central-display{position:absolute;left:54%;bottom:20%;width:20%;height:33%;display:grid;place-items:center;transform:translateX(-50%)}.central-display img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 28px 20px #000);transition:opacity .25s,transform .4s}.store-screen{position:absolute;left:43%;top:27%;width:22%;height:18%;overflow:hidden;border:1px solid rgba(255,255,255,.22);background:#0b0e0d;box-shadow:0 0 40px rgba(217,244,81,.09)}.store-screen img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .3s}.store-scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,6,5,.9),rgba(4,6,5,.28) 43%,transparent 68%,rgba(4,6,5,.52)),linear-gradient(0deg,rgba(4,6,5,.8),transparent 40%)}.store-hero-copy{position:absolute;z-index:4;left:32px;top:20%;width:min(600px,44vw)}.store-hero-copy h1{margin:18px 0 23px;font-size:clamp(54px,6vw,94px);line-height:.94;letter-spacing:-.08em}.store-hero-copy p{max-width:500px;color:#bac3be;font-size:16px}.store-hero-copy .button{margin-top:20px}.scene-hotspot{position:absolute;z-index:4;width:44px;height:44px;border:1px solid var(--lime);border-radius:50%;background:rgba(8,12,10,.72);color:var(--lime);cursor:pointer;box-shadow:0 0 0 9px rgba(217,244,81,.06)}.scene-hotspot.active{background:var(--lime);color:#11160d}.scene-hotspot span{font:800 10px/1 Consolas,monospace}.scene-hotspot.h1{left:46%;top:60%}.scene-hotspot.h2{right:21%;top:45%}.scene-hotspot.h3{left:30%;top:42%}.zone-panel{position:absolute;z-index:5;right:28px;bottom:82px;width:330px;padding:20px;border:1px solid var(--line);background:rgba(10,14,12,.76);backdrop-filter:blur(18px)}.zone-meta{display:flex;align-items:center;gap:11px}.zone-meta span{color:var(--lime);font:800 28px/1 Consolas,monospace}.zone-meta small{color:#7b8680;font-size:9px;letter-spacing:.15em}.zone-panel h2{margin:16px 0 6px;font-size:28px;letter-spacing:-.045em}.zone-panel p{margin:0 0 14px;color:#9ba59f;font-size:12px}.zone-panel strong{font-size:11px;letter-spacing:.08em}.zone-progress{height:1px;margin:18px 0 12px;background:rgba(255,255,255,.12)}.zone-progress span{display:block;width:33.333%;height:100%;background:var(--lime);transition:width .3s}.zone-controls{display:flex;align-items:center;justify-content:space-between}.zone-controls button{width:36px;height:36px;border:1px solid var(--line);background:transparent;color:#cbd3ce;cursor:pointer}.zone-controls span{color:#7e8983;font:700 10px/1 Consolas,monospace}.channel-rail{position:absolute;z-index:4;left:32px;right:390px;bottom:28px;display:grid;grid-template-columns:1fr repeat(4,auto);gap:28px;padding-top:16px;border-top:1px solid var(--line);color:#8c9791;font-size:9px;letter-spacing:.12em}.channel-rail b{color:#c8d0cb}.store-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}.store-cap-grid article{min-height:285px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.store-cap-grid b{color:var(--lime);font-size:10px;letter-spacing:.1em}.store-cap-grid h3{margin:76px 0 13px;font-size:26px;letter-spacing:-.045em}.store-cap-grid p{color:var(--muted);font-size:13px}.store-usecases{padding:110px 0;background:#111715;border-top:1px solid var(--line)}.store-usecases h2{max-width:950px;margin:18px 0 70px;font-size:clamp(42px,5vw,72px);line-height:1;letter-spacing:-.065em}.usecase-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.usecase-row span{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:#b8c1bb;font-size:11px;letter-spacing:.11em}
@media(max-width:1000px){.store-hero-copy{width:65vw}.zone-panel{width:300px}.channel-rail{right:350px}.store-cap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.digital-store-demo{min-height:960px}.store-hero-copy{left:16px;right:16px;top:120px;width:auto}.store-hero-copy h1{font-size:54px}.store-scene{top:230px;height:580px}.store-scene-shade{background:linear-gradient(180deg,rgba(4,6,5,.9),transparent 45%,rgba(4,6,5,.88))}.store-backwall{left:8%;right:6%;top:23%}.store-screen{left:37%;top:31%;width:36%;height:16%}.display-wall.left{left:10%}.display-wall.right{right:5%}.central-display{width:40%;bottom:20%}.central-pedestal{width:42%}.scene-hotspot.h1{left:39%;top:60%}.zone-panel{left:16px;right:16px;bottom:90px;width:auto}.channel-rail{left:16px;right:16px;bottom:22px;grid-template-columns:1fr 1fr;gap:6px 16px}.channel-rail span{grid-column:1/-1}.store-cap-grid{grid-template-columns:1fr}.store-cap-grid article{min-height:220px}.store-cap-grid h3{margin-top:50px}.usecase-row{grid-template-columns:1fr 1fr}}

/* Zone-specific product staging keeps real vehicle imagery cinematic and contained. */
.central-display img[data-kind="vehicle"]{width:100%;height:auto;max-width:360px;border:1px solid rgba(255,255,255,.18);border-radius:3px;background:#161b18;object-fit:cover;filter:drop-shadow(0 30px 28px #000b)}
.store-hero-copy{width:min(560px,42vw)}
.store-hero-copy h1{font-size:clamp(48px,5.2vw,82px);line-height:.96;letter-spacing:-.075em}
@media(max-width:650px){.store-hero-copy{width:auto}.store-hero-copy h1{font-size:48px}}

/* Keep the store scene visible: the proposition is short, the stage does the selling. */
.store-hero-copy { left: 32px; top: 21%; width: min(560px, 42vw); }
.store-hero-copy h1 {
  max-width: 540px;
  margin: 18px 0 20px;
  font-size: clamp(48px, 5.2vw, 78px);
  line-height: 1.02;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.store-hero-copy p { max-width: 430px; line-height: 1.6; }
.store-scene-shade { background: linear-gradient(90deg, rgba(4,6,5,.94), rgba(4,6,5,.42) 32%, transparent 66%, rgba(4,6,5,.46)), linear-gradient(0deg, rgba(4,6,5,.8), transparent 42%); }

@media(max-width:1000px) and (min-width:651px){
  .store-hero-copy { width: min(520px, 48vw); }
  .store-hero-copy h1 { font-size: clamp(44px, 5vw, 64px); }
}
@media(max-width:650px){
  .digital-store-demo { min-height: 940px; }
  .store-hero-copy { left: 16px; right: 16px; top: 112px; width: auto; }
  .store-hero-copy h1 { max-width: 340px; margin: 15px 0 16px; font-size: clamp(38px, 10.5vw, 45px); line-height: 1.04; }
  .store-hero-copy p { max-width: 320px; font-size: 13px; line-height: 1.55; }
  .store-scene { top: 258px; height: 560px; }
  .store-scene-shade { background: linear-gradient(180deg, rgba(4,6,5,.92) 0%, rgba(4,6,5,.3) 38%, transparent 60%, rgba(4,6,5,.9) 100%); }
}