/* First-screen narrative: independent website layers converge into one page. */
.hero.computer-hero{height:auto;min-height:760px;max-height:none;display:grid;grid-template-columns:.82fr 1.35fr;gap:24px;align-items:center;padding-top:65px;padding-bottom:100px;isolation:isolate}.computer-hero:before{width:90%;height:100%;right:-15%;top:0;background:radial-gradient(ellipse,#9866ff22,transparent 65%)}.computer-copy{position:relative;z-index:7;align-self:center}.computer-hero h1{font-size:clamp(45px,5.2vw,78px);letter-spacing:-.065em;line-height:1.06;margin:28px 0 24px;max-width:600px}.computer-hero h1 em{color:#9866ff}.computer-hero .hero-action{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.computer-hero .hero-action .round{font-size:12px;padding:16px 23px}.computer-hero p{font-size:13px;line-height:1.85;max-width:380px;margin-bottom:0}.computer-hero .eyebrow{font-size:8px;letter-spacing:1.8px}.computer-hero .hero-bottom{left:6%;right:6%;bottom:28px}.computer-stage{position:relative;height:560px;min-width:0;perspective:1400px;display:flex;align-items:center;justify-content:center;z-index:3}.computer-stage:before{content:'';position:absolute;inset:7% -20% -3% -5%;background-image:radial-gradient(#c2b0ff22 .7px,transparent .7px);background-size:25px 25px;mask-image:radial-gradient(ellipse,#000,transparent 70%);transform:rotate(-15deg)}.computer-stack{position:relative;width:100%;max-width:665px;height:390px;transform-style:preserve-3d;transform:rotateX(calc(9deg + 36deg * var(--explode) + var(--ty,0deg))) rotateY(calc(-12deg + 10deg * var(--explode) + var(--tx,0deg))) rotateZ(calc(-3deg - 19deg * var(--explode)));will-change:transform;--explode:1}.site-layer{position:absolute;inset:0;border-radius:10px;transform:translate3d(calc(var(--dx,0px) * var(--distance,1) * var(--spread,.6)),calc(var(--dy,0px) * var(--distance,1) * var(--spread,.6)),calc(var(--depth,0px) * var(--distance,1) * var(--spread,.6)));transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;border:1px solid transparent;pointer-events:none}.site-layer:after{content:attr(data-label);position:absolute;right:12px;top:12px;font:8px/1.3 Manrope,Arial;letter-spacing:1px;color:#c8aaff;background:#211d46ee;border:1px solid #b19bf655;padding:6px 9px;border-radius:30px;opacity:var(--fade,1);transform:translateZ(1px)}.layer-foundation{--dx:0px;--dy:70px;--depth:-155px;background:#fff0d7;box-shadow:0 35px 65px #0007;border-color:#ffe4b244;color:#3b2c23;overflow:hidden}.layer-bar{height:28px;display:flex;align-items:center;gap:5px;padding:0 12px;background:#fff9ea;border-bottom:1px solid #3b2c2314}.layer-bar i{width:4px;height:4px;border-radius:50%;background:#c9bca4}.layer-bar span{font:7px Manrope,Arial;color:#a49681;margin:auto}.layer-foundation:after{top:auto;bottom:10px;right:10px}.layer-structure{--dx:-35px;--dy:35px;--depth:-70px;background:#8f7ae60d;border-color:#9866ff80;opacity:calc(.05 + var(--fade,1) * .95);color:#8a76cb}.structure-nav{position:absolute;top:50px;left:30px;right:30px;border-bottom:1px dashed #b9a2ff70}.structure-cols{position:absolute;inset:100px 28px 75px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.structure-cols i{border:1px dashed #b9a2ff80;border-radius:4px}.structure-footer{position:absolute;left:28px;bottom:23px;right:28px;height:35px;border:1px dashed #b9a2ff80}.layer-imagery{--dx:35px;--dy:-10px;--depth:25px;--lc:#ffe3ba80;--lb:#ccae760a}.coffee-art{position:absolute;right:0;top:75px;width:44%;height:240px;background:linear-gradient(120deg,#e3b181,#c6824e);border-radius:120px 0 0 120px;overflow:hidden;box-shadow:inset 15px -10px 45px #713c1520}.coffee-art:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(95deg,#f3d6b014 0 1px,transparent 1px 12px)}.coffee-saucer{position:absolute;width:195px;height:195px;right:5%;top:24px;border-radius:50%;background:radial-gradient(circle,#eee2cb 0 50%,#c9b79b 51% 53%,#f7ecd5 54% 66%,#d2b997 68%,#eee0c4 72%);box-shadow:13px 18px 20px #79471b66;rotate:-15deg}.coffee-cup{position:absolute;inset:30px;border-radius:50%;background:radial-gradient(circle at 48% 45%,#713b20 0 48%,#b4773e 52%,#9c5d2d 58%,#eddfc5 61%,#fff6dc 68%,#d7c1a3 71%);box-shadow:4px 5px 8px #77421e55}.coffee-cup:before{content:'';position:absolute;width:30px;height:35px;border:9px solid #efe0c4;border-radius:12px;right:-17px;top:44px;z-index:-1}.latte{position:absolute;inset:41% 28% 22% 30%;background:#edcf9a;border-radius:100% 5% 100% 5%;rotate:-48deg;box-shadow:inset -4px 2px 0 #aa6b37}.latte:after{content:'';position:absolute;inset:25% -14% -7% 40%;background:#f5dfb7;border-radius:100% 5% 100% 5%;rotate:35deg}.coffee-caption{position:absolute;right:12px;bottom:12px;font:6px Manrope,Arial;letter-spacing:1.2px;color:#f7e7cc}.layer-type{--dx:-45px;--dy:-35px;--depth:115px;--lc:#9866ffa6;--lb:#ac8eec09;color:#3b2c23}.assembled-nav{position:absolute;top:48px;left:30px;right:25px;display:flex;justify-content:space-between;align-items:center;font:7px Manrope,Arial;color:inherit}.assembled-nav strong{font:italic 22px Georgia;letter-spacing:-1px}.assembled-title{position:absolute;left:30px;top:111px;font:500 49px/.98 Georgia;letter-spacing:-2px;color:#3b2c23;max-width:59%}.assembled-description{position:absolute;left:31px;top:223px;width:39%;font:7px/1.8 Manrope,Arial;color:#75604c}.layer-components{--dx:38px;--dy:-65px;--depth:200px;--lc:#b5ff6580;--lb:#b5ff6506;color:#3b2c23}.menu-preview{position:absolute;left:30px;right:30px;bottom:23px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.menu-preview div{border-top:1px solid #674b2c30;padding-top:12px;display:flex;justify-content:space-between;gap:5px;font:7px Manrope,Arial;color:#674b2c}.menu-preview b{font-weight:500}.layer-interaction{--dx:-20px;--dy:-95px;--depth:290px;--lc:#b5ff65a6;--lb:#b5ff6506;color:#3b2c23}.assembled-button{position:absolute;left:31px;top:271px;background:#3d4933;color:#fff5df;padding:12px 17px;font:7px Manrope,Arial;border-radius:30px}.assembled-nav-button{position:absolute;right:25px;top:49px;background:#3d4933;color:#fff5df;font:6px Manrope,Arial;padding:8px 12px;border-radius:20px}.assembled-hover{position:absolute;right:19px;bottom:69px;font:7px Manrope,Arial;color:#8a6e48}.layers-status{position:absolute;left:10%;right:3%;bottom:5px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:1px;color:#90859d;z-index:8}.layers-status .live{color:#b5ff65;font-size:8px;letter-spacing:1.5px}.layers-status .live:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:8px}.layer-controls{position:relative;margin-top:28px;display:flex;align-items:center;gap:15px;max-width:320px;color:#8d859c;z-index:8}.layer-controls label{font-size:10px;white-space:nowrap;line-height:1.5}.layer-controls input{accent-color:#9866ff;width:110px;min-width:65px;cursor:ew-resize}.replay{display:flex;align-items:center;gap:7px;background:none;border:1px solid #ffffff2a;color:#c8bed7;border-radius:30px;padding:8px 12px;font-size:10px;transition:border-color .25s,color .25s}.replay:hover{border-color:#b5ff6580;color:#fff}.computer-hero .scroll-hint{font-size:9px}.assembled-demo{position:absolute;right:6%;top:23px;font:7px Manrope,Arial;letter-spacing:1px;color:#7e728d;z-index:1}.computer-copy .hero-kicker{font-size:10px;color:#b5ff65;letter-spacing:2px;margin-bottom:12px}.computer-hero .hero-bottom>span{font-size:8px}.computer-hero .hero-art{display:none}.reduced .computer-stack,.reduced .site-layer{will-change:auto}
@media(max-width:1050px){.hero.computer-hero{grid-template-columns:.9fr 1.1fr;gap:10px;padding-top:65px;min-height:760px}.computer-hero h1{font-size:60px}.computer-stage{height:510px}.computer-stack{height:330px}.coffee-art{height:210px;width:44%;top:65px}.coffee-saucer{width:155px;height:155px;top:30px;right:0}.coffee-cup{inset:25px}.assembled-nav{left:23px;top:42px}.assembled-nav strong{font-size:19px}.assembled-title{left:23px;top:101px;font-size:39px}.assembled-description{left:24px;top:192px;font-size:6px}.assembled-button{left:24px;top:237px;font-size:6px;padding:10px 14px}.assembled-nav-button{top:42px;right:20px}.menu-preview{left:23px;right:23px;bottom:18px;gap:8px}.menu-preview div{font-size:6px;padding-top:9px}.layers-status{left:0;font-size:7px}.layers-status .live{font-size:7px}.layer-controls{gap:8px}.layer-controls input{width:85px}.site-layer:after{font-size:7px;padding:5px 7px}.computer-hero .eyebrow{max-width:300px;font-size:7px}}
@media(max-width:760px){.hero.computer-hero{grid-template-columns:1fr;gap:5px;padding-top:40px;padding-bottom:80px;min-height:0}.computer-hero h1{font-size:clamp(45px,10vw,68px);max-width:600px}.computer-hero p{max-width:370px}.computer-copy{padding-bottom:10px}.computer-stage{height:460px;margin:10px 0 0;perspective:1000px}.computer-stack{width:86%;max-width:520px;height:310px}.assembled-title{font-size:41px;top:94px;max-width:60%}.assembled-description{top:186px}.assembled-button{top:226px}.coffee-art{top:63px;height:196px}.menu-preview{bottom:15px}.menu-preview div{padding-top:8px}.layers-status{left:5%;right:5%;bottom:-7px;font-size:7px}.computer-hero .hero-bottom{bottom:20px}.assembled-demo{right:3%;top:5px}.layer-controls{max-width:340px;gap:12px}.layer-controls input{width:110px}.computer-hero .eyebrow{max-width:none}.coffee-cup:before{top:33px;height:30px;width:26px;border-width:7px}}
@media(max-width:430px){.computer-hero h1{font-size:47px;letter-spacing:-.065em;margin-top:22px}.computer-hero .eyebrow{font-size:7px;letter-spacing:1.3px}.computer-hero p{font-size:11px;max-width:310px}.computer-hero .hero-action{gap:12px;margin-top:22px}.computer-hero .hero-action .round{font-size:11px;padding:14px 19px}.computer-stage{height:340px;margin-top:20px}.computer-stack{width:88%;height:225px;transform:rotateX(calc(8deg + 37deg * var(--explode))) rotateY(calc(-10deg + 8deg * var(--explode))) rotateZ(calc(-2deg - 18deg * var(--explode)))}.site-layer{border-radius:6px}.layer-bar{height:18px;padding:0 7px;gap:3px}.layer-bar i{width:3px;height:3px}.layer-bar span{font-size:5px}.assembled-nav{left:15px;right:15px;top:30px;font-size:5px}.assembled-nav strong{font-size:15px}.assembled-nav>span{display:none}.assembled-title{left:15px;top:66px;font-size:29px;letter-spacing:-1.1px;max-width:62%}.assembled-description{left:16px;top:132px;font-size:5px;width:40%;line-height:1.6}.assembled-button{left:16px;top:163px;padding:7px 10px;font-size:5px}.assembled-nav-button{right:14px;top:29px;font-size:4px;padding:6px 8px}.menu-preview{left:15px;right:15px;bottom:13px;gap:8px}.menu-preview div{font-size:4px;padding-top:7px}.coffee-art{top:48px;height:141px;border-radius:80px 0 0 80px;width:43%}.coffee-saucer{width:112px;height:112px;right:-3%;top:15px}.coffee-cup{inset:19px}.coffee-cup:before{top:23px;height:21px;width:20px;border-width:5px;right:-11px;border-radius:7px}.coffee-caption{font-size:4px;letter-spacing:.7px;bottom:8px;right:7px}.structure-nav{top:37px;left:15px;right:15px}.structure-cols{inset:62px 15px 51px;gap:12px}.structure-footer{left:15px;right:15px;bottom:13px;height:25px}.site-layer:after{font-size:5px;letter-spacing:.4px;padding:4px 5px;top:7px;right:7px}.layer-foundation:after{top:auto;bottom:7px}.layers-status{font-size:6px;letter-spacing:.3px;left:0;right:0;bottom:-3px}.layers-status .live{font-size:6px;letter-spacing:1px}.assembled-demo{font-size:5px;top:-5px}.layer-controls{margin-top:22px;gap:8px}.layer-controls label{font-size:7px}.layer-controls input{width:100px}.replay{font-size:7px;padding:8px 10px}.computer-hero .hero-bottom{font-size:7px}.computer-hero .hero-bottom>span{font-size:6px;max-width:160px}.computer-hero .scroll-hint{font-size:6px;gap:8px}.computer-hero .hero-kicker{font-size:8px}}

@media(max-width:760px){.computer-stack{--spread:.45}.computer-hero h1{font-size:52px}.computer-stage{height:380px}}
@media(max-width:430px){.computer-hero h1{font-size:43px}.computer-stage{height:305px}.computer-hero .hero-action{margin-top:18px}.layer-controls{margin-top:18px}}
@media(max-width:760px){.computer-stage{margin-top:55px}.computer-stack{--spread:.35}}@media(max-width:430px){.computer-stack{--spread:.28}}

.layer-type .assembled-title,.layer-type .assembled-nav{color:color-mix(in srgb,#e3d9ff calc(var(--fade,1) * 100%),#3b2c23)}

/* Depth: each floating layer carries its own tint, outline and shadow; only opacity changes while it lands. */
.site-layer:not(.layer-foundation):not(.layer-structure):before{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid var(--lc);background:var(--lb);box-shadow:0 28px 55px #05051480;opacity:var(--fade,1);pointer-events:none}
.layer-foundation{box-shadow:0 35px 65px #0007,0 0 0 1px #ffe4b222}
.computer-hero .hero-action{gap:24px}
.hero-micro{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:11px;color:#a9a4bb}
.hero-micro b{color:#b5ff65;font-weight:600}
.hero-micro span:before{content:'·';margin-right:18px;color:#5d5874}
.computer-stage.is-done{cursor:default}
.tilt-hint{position:absolute;left:10%;top:23px;font-size:9px;letter-spacing:1px;color:#7e728d;opacity:0;transition:opacity .6s .9s;z-index:8}
.is-done .tilt-hint{opacity:1}
@media(hover:none),(pointer:coarse){.tilt-hint{display:none}}
/* Final beat: light sweeps over the finished page, then a cursor presses the call to action. */
.shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.shine:after{content:'';position:absolute;top:-30%;bottom:-30%;left:0;width:28%;background:linear-gradient(100deg,transparent,#ffffff75,transparent);opacity:0;transform:translateX(-160%) skewX(-14deg)}
.is-done .shine:after{animation:heroShine 1.15s cubic-bezier(.3,.1,.2,1) both}
.assembled-button{overflow:visible}
.assembled-button:after{content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid #b5ff65;opacity:0}
.fake-cursor{position:absolute;left:58%;top:52%;width:17px;height:17px;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 3px #0007)}
.is-done .fake-cursor{animation:heroCursor 1.7s cubic-bezier(.22,1,.36,1) .55s both}
.is-done .assembled-button{animation:heroPress 1.7s .55s both}
.is-done .assembled-button:after{animation:heroRing 1.7s .55s both}
.is-static .shine:after,.is-static .fake-cursor,.is-static .assembled-button,.is-static .assembled-button:after{animation:none!important}
@keyframes heroShine{0%{opacity:1;transform:translateX(-160%) skewX(-14deg)}100%{opacity:1;transform:translateX(470%) skewX(-14deg)}}
@keyframes heroCursor{0%{opacity:0;transform:translate(150px,85px)}22%{opacity:1}58%{transform:translate(0,0) scale(1)}66%{transform:translate(0,0) scale(.8)}74%{transform:translate(0,0) scale(1)}88%{opacity:1}100%{opacity:0;transform:translate(5px,3px)}}
@keyframes heroPress{0%,63%{transform:none;background:#3d4933;color:#fff5df}69%{transform:scale(.93);background:#b5ff65;color:#17210d}82%{transform:none;background:#b5ff65;color:#17210d}100%{transform:none;background:#3d4933;color:#fff5df}}
@keyframes heroRing{0%,66%{opacity:0;transform:scale(1)}71%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@media(max-width:760px){.hero-micro{font-size:10px;gap:6px 14px}.hero-micro span:before{margin-right:14px}.computer-hero .hero-action{gap:16px}}
@media(max-width:430px){.fake-cursor{width:12px;height:12px}}
.reduced .tilt-hint{display:none}