/* scroll story after the film: decorative stages injected by story.js (aria-hidden); content stays plain HTML */
.stage{position:relative;perspective:1400px;pointer-events:none;user-select:none}
.stage *{will-change:transform,opacity}
/* 01 browser */
.st-web{height:min(62vw,620px);margin:70px auto 0;max-width:1180px;padding:0 52px}
.bw{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.bw-bar,.bw-body,.bw-shadow{position:absolute;left:0;right:0;border:1px solid var(--line);background:#fff}
.bw-bar{top:0;height:46px;border-radius:16px 16px 0 0;display:flex;align-items:center;gap:8px;padding:0 18px}
.bw-bar i{width:11px;height:11px;border-radius:50%;background:#e4e4e9}.bw-bar i:first-child{background:var(--acc)}
.bw-bar b{margin-left:22px;height:24px;flex:0 1 46%;border-radius:7px;background:#f4f4f6;font:500 11px/24px "Geist Mono";letter-spacing:.08em;color:var(--muted);padding:0 12px;white-space:nowrap;overflow:hidden}
.bw-body{top:45px;bottom:0;border-radius:0 0 16px 16px;overflow:hidden;box-shadow:0 40px 90px rgba(17,17,19,.12)}
.bw-page{position:absolute;inset:0 0 auto 0}
.bw-hero{height:clamp(220px,40vw,430px);background:#f4f4f6 center/cover no-repeat;position:relative}
.bw-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,0) 60%)}
.bw-hero u{position:absolute;z-index:1;left:6%;bottom:16%;width:38%;height:16%;border-radius:8px;background:var(--ink);text-decoration:none}
.bw-hero s{position:absolute;z-index:1;left:6%;bottom:8%;width:14%;height:5%;border-radius:6px;background:var(--acc)}
.bw-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4%;padding:5% 6%}
.bw-row i{height:clamp(70px,12vw,150px);border-radius:12px;background:#f4f4f6}.bw-row i:nth-child(2){background:linear-gradient(135deg,#fff3ee,#ffd9c8)}
.bw-band{margin:0 6%;height:clamp(60px,9vw,110px);border-radius:12px;background:var(--ink)}
.bw-shadow{inset:auto 6% -30px 6%;height:40px;border:0;background:radial-gradient(ellipse at 50% 0,rgba(17,17,19,.14),rgba(17,17,19,0) 70%)}
/* 02 machine */
.svc{position:relative}
.svc article{position:relative;transition:border-color .5s,box-shadow .5s}
.svc article.lit{border-color:rgba(255,90,31,.55);box-shadow:0 18px 50px rgba(255,90,31,.14)}
.gear{position:absolute;top:18px;right:18px;width:30px;height:30px;color:#d9d9df;transition:color .5s}
.svc article.lit .gear{color:var(--acc)}
.wire{position:absolute;left:0;top:50%;width:100%;height:4px;margin-top:-2px;z-index:-1;overflow:visible}
.wire path{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round}
/* 03 vault */
.st-vault{height:min(48vw,460px);margin:40px auto 0;max-width:760px;transform-style:preserve-3d}
.vault{position:absolute;left:50%;bottom:6%;width:min(62%,440px);aspect-ratio:2.4;transform:translateX(-50%) rotateX(58deg);transform-style:preserve-3d}
.v-base,.v-lid{position:absolute;inset:0;border-radius:18px;border:1px solid var(--line)}
.v-base{background:linear-gradient(180deg,#f4f4f6,#e9e9ee)}
.v-base:after{content:"";position:absolute;inset:14%;border-radius:12px;background:radial-gradient(ellipse at 50% 50%,rgba(255,90,31,.55),rgba(255,90,31,0) 70%);opacity:var(--glow,0)}
.v-lid{background:#fff;transform-origin:50% 0;box-shadow:0 20px 50px rgba(17,17,19,.1)}
.v-lid i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;border:3px solid var(--acc)}
.layer{position:absolute;left:50%;bottom:18%;width:min(34%,240px);aspect-ratio:1.35;margin-left:max(-17%,-120px);border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px rgba(17,17,19,.1);overflow:hidden;opacity:0}
.layer i{position:absolute;display:block;border-radius:5px;background:#f4f4f6}
.layer i:nth-child(1){left:10%;top:12%;width:80%;height:20%}.layer i:nth-child(2){left:10%;top:42%;width:36%;height:44%;background:var(--acc)}.layer i:nth-child(3){left:54%;top:42%;width:36%;height:44%}
.layer.l2 i:nth-child(1){left:30%;top:16%;width:40%;height:56%;border-radius:50%;background:var(--ink)}.layer.l2 i:nth-child(2){left:20%;top:78%;width:60%;height:8%}.layer.l2 i:nth-child(3){display:none}
.layer.l3 i:nth-child(2){background:#ffd9c8}
/* 04 seal */
#guarantee{position:relative}
.seal{position:absolute;top:-34px;right:-22px;width:112px;height:112px;z-index:2;pointer-events:none}
.seal svg{width:100%;height:100%;display:block}
.seal text{font:600 9.4px "Geist Mono";letter-spacing:.28em;fill:var(--ink)}
/* 05 converge */
.st-end{height:200px;max-width:760px;margin:0 auto 34px}
.st-end .bit{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:7px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px rgba(17,17,19,.08)}
.st-end .bit.o{background:var(--acc);border-color:var(--acc)}
.st-end img{position:absolute;left:50%;top:50%;height:44px;width:auto;transform:translate(-50%,-50%);opacity:0}
.st-end .halo{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.18),rgba(255,90,31,0) 65%);opacity:0}
@media (max-width:767px){
  .st-web{padding:0 20px;height:auto;aspect-ratio:.82;margin-top:44px}.bw-bar{height:36px}.bw-bar b{display:none}.bw-body{top:35px}
  .st-vault{height:300px}.vault{width:78%}.layer{width:44%;margin-left:-22%}
  .seal{width:86px;height:86px;top:-28px;right:-8px}
  .st-end{height:150px}
  .wire{display:none}
}
.reduced .stage{display:none}