:root{--serif:Georgia,"Times New Roman",serif}
.scroll-story{height:320vh;background:#ff8c78;position:relative;color:var(--ink)}.story-track{height:100vh;min-height:620px;position:sticky;top:0;display:grid;grid-template-columns:46% 54%;overflow:hidden}.story-copy{padding:clamp(85px,10vh,130px) 3vw 70px clamp(25px,8vw,130px);position:relative;z-index:2}.story-kicker{font:800 12px var(--mono);letter-spacing:.15em;display:flex;gap:25px;align-items:center}.story-kicker span{font:700 28px var(--sans)}.story-step{position:absolute;top:49%;left:clamp(25px,8vw,130px);right:4vw;transform:translateY(-38%) translateY(28px);opacity:0;pointer-events:none;transition:opacity .45s,transform .55s}.story-step.active{opacity:1;transform:translateY(-38%);pointer-events:auto}.story-index{font:800 11px var(--mono);letter-spacing:.15em;color:#6035bd}.story-step h2{font:800 clamp(52px,6.2vw,104px)/.91 var(--display);letter-spacing:-.09em;margin:22px 0 26px}.story-step h2 em{font:italic 500 1em var(--serif);letter-spacing:-.07em}.story-step p{font-size:clamp(15px,1.3vw,19px);line-height:1.6;max-width:390px}.story-cta{margin-top:20px;background:var(--ink);color:white;border:0;border-radius:100px;padding:16px 21px;font-weight:800;font-size:13px;display:flex;gap:26px;align-items:center;box-shadow:0 6px 0 #bd5a71}.story-cta:hover{transform:translateY(2px);box-shadow:0 4px 0 #bd5a71}.story-progress{position:absolute;bottom:54px;left:clamp(25px,8vw,130px);width:min(285px,42%);height:5px;background:#17102f2b;border-radius:9px;overflow:hidden}.story-progress-bar{display:block;width:0;height:100%;background:var(--ink);border-radius:9px}.story-step-count{position:absolute;bottom:45px;left:calc(clamp(25px,8vw,130px) + min(300px,45%));font:800 13px var(--mono)}.story-step-count span{opacity:.45}.story-stage{position:relative;overflow:hidden;background:#241245;--approach:0;--reveal:0}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:56px 56px;transform:perspective(500px) rotateX(14deg) scale(1.2)}.stage-glow{position:absolute;width:560px;height:560px;border-radius:50%;left:50%;top:48%;transform:translate(-50%,-50%);background:radial-gradient(circle,#9c50ff91 0,#6a2ee74a 32%,transparent 68%);filter:blur(15px);opacity:calc(.6 + var(--approach)*.4)}.stage-ring{position:absolute;width:560px;height:560px;border:1px solid #cfaaff45;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) scale(calc(.75 + var(--approach)*.18));opacity:calc(.4 + var(--approach)*.5)}.ring-two{width:400px;height:400px;border-color:#ff8c784d;transform:translate(-50%,-50%) scale(calc(.83 + var(--approach)*.18))}.stage-nfc{position:absolute;width:240px;height:320px;left:17%;top:51%;transform:translate(-50%,-50%) rotate(-15deg) scale(calc(1 - var(--approach)*.12));border-radius:22px;background:linear-gradient(150deg,#aa70ff 0%,#6e3ce8 45%,#4c22bc 100%);border:1px solid #e4ccff;box-shadow:0 35px 90px #09031db0,inset 0 1px #fff8;z-index:3;color:white;padding:20px;display:flex;flex-direction:column;justify-content:space-between}.stage-nfc:after{content:'';position:absolute;inset:8px;border:1px solid #ffffff38;border-radius:16px;pointer-events:none}.stage-nfc-top,.stage-nfc-bottom{display:flex;justify-content:space-between;align-items:start;gap:10px}.stage-nfc-top b{font:900 16px var(--display);letter-spacing:-.07em}.stage-nfc-top b span{color:var(--accent)}.stage-nfc-top small{font:7px var(--mono);text-align:right;line-height:1.5;opacity:.8}.nfc-signal{font:110px/.8 var(--sans);align-self:center;transform:rotate(90deg);color:var(--accent);text-shadow:0 0 30px #ff8c7880}.stage-nfc-bottom strong{font:800 21px var(--display);letter-spacing:-.07em}.stage-nfc-bottom span{font:7px/1.5 var(--mono);text-align:right}.qr-mark{position:absolute;bottom:60px;right:25px;width:30px;height:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px}.qr-mark i{border:3px solid white;border-radius:2px}.qr-mark i:last-child{background:white}.stage-phone{position:absolute;z-index:4;width:270px;height:540px;left:calc(70% - var(--approach)*19%);top:calc(50% + (1 - var(--approach))*35%);transform:translate(-50%,-50%) rotate(calc(18deg - var(--approach)*18deg)) scale(calc(.81 + var(--approach)*.19));border:9px solid #0e0d16;border-radius:42px;background:#0e0d16;box-shadow:0 42px 95px #05020ec9,0 0 0 2px #ffffff6b;overflow:hidden;transition:box-shadow .2s}.stage-phone-sensor{position:absolute;z-index:8;left:50%;top:7px;transform:translateX(-50%);width:88px;height:21px;border-radius:0 0 15px 15px;background:#0e0d16}.stage-screen{height:100%;border-radius:32px;overflow:hidden;position:relative;background:#b88aff}.screen-clock{position:absolute;inset:0;background:radial-gradient(circle at 70% 80%,#f59bdb,#6335cc 54%,#261051);color:white;padding:56px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:calc(1 - var(--reveal));transition:opacity .3s}.screen-clock span{position:absolute;top:61px;font:800 49px var(--display);letter-spacing:-.08em}.screen-clock strong{font:800 27px/1.08 var(--display);letter-spacing:-.07em}.screen-clock small{position:absolute;bottom:52px;font:10px var(--mono)}.screen-open{position:absolute;inset:0;background:#faf8f3;padding:39px 12px 15px;opacity:var(--reveal);transform:translateY(calc((1 - var(--reveal))*25px));transition:opacity .3s,transform .3s}.screen-open-top{display:flex;justify-content:space-between;align-items:center;font:900 13px var(--display);letter-spacing:-.06em}.screen-open-top span{font-size:24px;color:#fc615d}.screen-open-photo{height:205px;background:radial-gradient(circle at 75% 65%,#eaa557,#cf4f2e 35%,#633126 75%);border-radius:18px;margin-top:12px;padding:18px;color:white;display:flex;flex-direction:column;justify-content:space-between}.screen-open-photo span{font:8px var(--mono)}.screen-open-photo b{font:800 24px/.96 var(--display);letter-spacing:-.06em}.screen-open-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.screen-open-actions span{background:#261b1d;color:white;border-radius:10px;text-align:center;padding:10px 3px;font:700 9px var(--sans)}.screen-open-actions span:last-child{background:#eee7de;color:#261b1d}.screen-open-item{display:flex;gap:7px;align-items:center;margin-top:13px;font:700 9px var(--sans)}.screen-open-item i{width:32px;height:32px;border-radius:8px;background:radial-gradient(circle,#d96b31,#e1bb82)}.screen-open-item span{flex:1}.screen-open-item small{display:block;color:#928477;font-size:7px;margin-top:3px}.screen-open-item b{font:9px var(--mono)}.stage-spark{position:absolute;color:var(--accent);font-size:55px;z-index:5;opacity:var(--approach);transform:scale(calc(.5 + var(--approach)*.5))}.spark-one{top:16%;left:42%;animation:heroSpin 12s linear infinite}.spark-two{right:9%;bottom:24%;color:var(--pink);font-size:32px}.stage-status{position:absolute;left:26px;bottom:25px;right:26px;border:1px solid #ffffff35;background:#ffffff13;backdrop-filter:blur(12px);border-radius:13px;padding:14px 16px;color:white;display:grid;grid-template-columns:8px 1fr;column-gap:10px;align-items:center}.status-led{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 13px var(--accent);grid-row:span 2}.stage-status b{font:800 10px var(--mono);letter-spacing:.1em}.stage-status small{font:8px var(--mono);color:#b7a3da;margin-top:3px}

@media(max-width:850px){.scroll-story{height:300vh}.story-track{grid-template-columns:43% 57%}.story-copy{padding-left:5vw}.story-step{left:5vw}.story-step h2{font-size:clamp(43px,6vw,65px)}.story-stage .stage-nfc{left:20%;width:190px;height:260px;padding:15px}.story-stage .nfc-signal{font-size:80px}.stage-phone{width:220px;height:445px}.screen-open-photo{height:155px}.screen-open-photo b{font-size:18px}.story-progress{left:5vw}.story-step-count{left:calc(5vw + 200px)}}
@media(max-width:580px){.scroll-story{height:300vh}.story-track{height:100svh;min-height:560px;display:block}.story-copy{position:absolute;inset:0 0 auto;height:45%;padding:25px 22px;z-index:5;background:var(--accent)}.story-kicker{font-size:9px}.story-step{top:50%;left:22px;right:22px;transform:translateY(-34%) translateY(20px)}.story-step.active{transform:translateY(-34%)}.story-step h2{font-size:clamp(43px,12vw,63px);margin:10px 0 12px}.story-step p{font-size:12px;line-height:1.45;max-width:330px;margin:0}.story-cta{margin-top:10px;padding:10px 14px;font-size:10px}.story-progress{bottom:14px;left:22px;width:170px;height:4px}.story-step-count{bottom:8px;left:204px;font-size:10px}.story-stage{position:absolute;inset:45% 0 0}.story-stage .stage-nfc{left:22%;top:45%;width:135px;height:185px;padding:10px;border-radius:15px}.stage-nfc-top b{font-size:10px}.stage-nfc-top small{font-size:5px}.stage-nfc-bottom strong{font-size:13px}.stage-nfc-bottom span{font-size:5px}.story-stage .nfc-signal{font-size:54px}.qr-mark{width:18px;height:18px;bottom:36px;right:13px;gap:2px}.qr-mark i{border-width:2px}.stage-phone{width:170px;height:340px;left:calc(72% - var(--approach)*18%);border-width:6px;border-radius:29px}.stage-phone-sensor{width:54px;height:14px}.stage-screen{border-radius:22px}.screen-clock{padding:30px 10px}.screen-clock span{font-size:28px;top:35px}.screen-clock strong{font-size:16px}.screen-clock small{font-size:6px}.screen-open{padding:24px 7px 10px}.screen-open-top{font-size:9px}.screen-open-top span{font-size:14px}.screen-open-photo{height:126px;border-radius:10px;padding:9px;margin-top:5px}.screen-open-photo span{font-size:5px}.screen-open-photo b{font-size:14px}.screen-open-actions span{font-size:6px;padding:6px 2px}.screen-open-item{font-size:6px}.screen-open-item i{width:22px;height:22px}.screen-open-item small{font-size:5px}.screen-open-item b{font-size:6px}.stage-status{bottom:10px;left:10px;right:10px;padding:8px}.stage-status b{font-size:7px}.stage-status small{font-size:5px}.stage-spark{font-size:30px}.spark-one{top:7%}.spark-two{bottom:17%}}
@media(min-width:581px) and (max-width:850px){.story-stage .stage-nfc{left:29%}}
    @media(max-width:580px){.story-stage .stage-nfc{left:30%}.story-step{display:none;transition:none}.story-step.active{display:block}}
@keyframes heroSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.story-step,.stage-phone,.screen-clock,.screen-open{transition:none!important}.stage-spark{animation:none!important}}
.dash-bars{display:grid;gap:9px;margin-top:19px;padding-top:14px;border-top:1px solid #e8e1f1}.dash-bar-title{color:#92899d;font:8px var(--mono);letter-spacing:.08em;margin-bottom:2px}.dash-bar-row{display:grid;grid-template-columns:95px 1fr 26px;gap:9px;align-items:center;font:9px var(--sans);color:#675b78}.dash-bar-row b{font:9px var(--mono);text-align:right;color:#3b2758}.dash-bar-track{height:6px;border-radius:99px;background:#eee8f7;overflow:hidden}.dash-bar-track i{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#7442de,#ab74fc)}.dash-bar-row:nth-child(4) .dash-bar-track i{background:linear-gradient(90deg,#8b55ea,#e288d4)}
@media(max-width:580px){.dash-bar-row{grid-template-columns:78px 1fr 26px;font-size:8px}}
@media(min-width:851px){.story-stage .stage-nfc{left:25%}}