/* ==========================================================================
   M4 画布容器 · M8 交互模块 · M9 弹层与彩蛋
   ========================================================================== */
.canvas-wrap{position:fixed;inset:0;z-index:0;overflow:hidden;background:#1a1810}
.canvas-wrap canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1s .2s}
.canvas-wrap.ready canvas{opacity:1}
.gl-fallback{position:absolute;inset:0;background:#2a2618 center/cover;opacity:0;transition:opacity .8s,background-image .8s}
.canvas-wrap.fallback .gl-fallback{opacity:1}
.canvas-wrap.fallback canvas{display:none}
.hero-space{height:150svh}

/* ---------- Skills cloud (original: Sidekick Skills, big HW Cigars slash commands with emoji faces) ---------- */
.skills{grid-column:1/-1;position:relative;margin-top:10px}
.sk-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:22px 38px;padding:30px 0 50px}
.sk{position:relative;will-change:transform}
.sk-btn{display:block;color:var(--dark);text-align:left;border-radius:6px;padding:4px 2px}
.sk-tag{display:inline-flex;align-items:center;gap:.22em;white-space:nowrap;transition:color .2s}
.sk-av{display:inline-flex;align-self:center;margin-right:.12em}
.sk-av i{width:.62em;height:.62em;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 2px var(--light);transition:transform .35s var(--ease-out-back)}
.sk-av i+i{margin-left:-.26em}
.sk-n{align-self:flex-start;font:700 11px/1 var(--f-sans);color:var(--grey-mid);margin-top:.1em;letter-spacing:0}
.sk-t{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 92%;transition:background-size .35s var(--ease-out-cubic)}
@media (hover:hover){.sk-btn:hover .sk-t{background-size:100% 1px}.sk-btn:hover .sk-av i:nth-child(2){transform:translateY(-.12em)}.sk-btn:hover .sk-av i:nth-child(3){transform:translateY(.08em)}}
.sk-btn[aria-expanded=true] .sk-t{background-size:100% 1px}
.sk.open{z-index:20}
.sk-pop{position:absolute;left:var(--popup-left,0);top:calc(100% + 8px);width:min(320px,86vw);background:var(--dark);color:var(--light);border-radius:12px;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s var(--ease-out-cubic),opacity .25s;pointer-events:none;box-shadow:0 20px 40px rgba(0,0,0,.25);z-index:5}
.sk-pop>div{overflow:hidden;padding:0 16px}
.sk.open .sk-pop{grid-template-rows:1fr;opacity:1;pointer-events:auto}
.sk.open .sk-pop>div{padding:14px 16px}
.sk-a{margin-top:6px;color:#dcdcd0}
.sk-try{margin-top:12px}
.sk-try span{display:inline-block;padding:5px 9px;border-radius:3px;background:var(--light);color:var(--dark);font-size:11px;font-weight:700}

/* ---------- Cloud prompt cards (original: Sidekick "Custom app generation" parallax cards over painted clouds) ---------- */
.cloud-feat .cloud-wrap{grid-column:1/-1;margin-top:30px}
.cloud-scene{position:relative;aspect-ratio:2210/960;margin-inline:calc(var(--gs) * -1);overflow:hidden}
@media (min-width:769px){.cloud-scene{margin-inline:0}}
.cloud-bg{position:absolute;inset:-6% 0;background:url(../img/clouds.jpg) center/cover;will-change:transform}
.cloud-card{position:absolute;width:31%;aspect-ratio:340/100;left:var(--x);top:var(--y);transform:translate3d(0,var(--py,0px),0);z-index:2;text-align:left;will-change:transform}
.cloud-card .pc{position:absolute;inset:0;display:flex;align-items:center;gap:.8em;padding:0 .9em 0 1.1em;border-radius:14px;background:#fffffb url(../img/paper.jpg) 0 0/300px;background-blend-mode:multiply;box-shadow:0 1px 0 #fff inset,0 12px 30px rgba(38,44,70,.22),0 2px 6px rgba(38,44,70,.12);transition:transform .45s var(--ease-out-back),opacity .3s}
.cloud-card .pc-t{flex:1;color:var(--dark);line-height:1.15;transition:opacity .25s}
.cloud-card .pc-ic{width:2.1em;height:2.1em;flex:none;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff2c9,#d7b36a 60%,#9a7120);color:#3a2a0c}
.cloud-card .pc-ic svg{width:1.05em;height:1.05em}
.cloud-card .pc-go{width:1.9em;height:1.9em;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--dark);color:var(--light);transition:background-color .2s,transform .3s}
.cloud-card .pc-go svg{width:.8em;height:.8em}
.cloud-card .pc-done{position:absolute;left:1.1em;right:4.8em;top:50%;transform:translateY(-50%);color:#2e6b3f;font-weight:700;opacity:0;transition:opacity .25s;pointer-events:none}
.cloud-card:hover .pc,.cloud-card:focus-visible .pc{transform:translateY(-4px) rotate(-.4deg)}
.cloud-card[aria-pressed=true] .pc-t{opacity:0}
.cloud-card[aria-pressed=true] .pc-done{opacity:1}
.cloud-card[aria-pressed=true] .pc-go{background:#2e9a5c;transform:rotate(-45deg)}
.cloud-card.deco{width:24%;z-index:1;filter:blur(1.5px);opacity:.75;pointer-events:none}
.cloud-card.deco .pc-t{height:.5em;border-radius:99px;background:#dcdcd0;flex:.7}
.c0{--x:6%;--y:12%}.c1{--x:52%;--y:6%}.c2{--x:30%;--y:40%}.c3{--x:63%;--y:58%}.c4{--x:4%;--y:70%}
.d0{--x:78%;--y:30%}.d1{--x:34%;--y:78%}
@media (max-width:768px){
  .cloud-scene{aspect-ratio:auto;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:40px var(--gs);scrollbar-width:none}
  .cloud-scene::-webkit-scrollbar{display:none}
  .cloud-card{position:relative;left:auto;top:auto;flex:none;width:78vw;aspect-ratio:245/107;transform:none!important;scroll-snap-align:center}
  .cloud-card.deco{display:none}
  .cloud-bg{inset:0}
}

/* ---------- 吸顶产品故事（对应原版 POS Hub 三段式） ---------- */
.story .st{grid-column:1/-1;min-height:165svh}
.story .st:first-child{margin-top:40svh}
.st-in{position:sticky;top:110px;min-height:calc(100svh - 110px)}
.st-txt{max-width:520px}
@media (min-width:940px){.st-txt{max-width:42%}}
.st-txt .rich-text{margin:15px 0}
.st-txt{opacity:.25;transform:translateY(20px);transition:opacity .6s var(--ease-out-cubic),transform .6s var(--ease-out-cubic)}
.st.on .st-txt{opacity:1;transform:none}
.specs{margin-top:30px;border-block:1px solid #dcdcd01a}
.specs li{display:flex;align-items:center;gap:12px;padding:12px 0}
.specs li+li{border-top:1px solid #dcdcd01a}
.specs svg{width:18px;height:18px;flex:none;color:var(--gold)}
.specs span{color:var(--white)}

/* ---------- 自组网画布 ---------- */
.mesh-wrap{position:relative;width:100%}
.mesh{position:absolute;inset:0;width:100%;height:100%}

/* ---------- 出海：拖动提示 ---------- */
.drag-hint{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 14px 8px 10px;border-radius:99px;background:rgba(41,41,25,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #dcdcd055}
.drag-hint span{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--light);position:relative}
.drag-hint span::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--light);animation:dragDot 2.2s var(--ease-io) infinite}
@keyframes dragDot{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}

/* ---------- 收尾 ---------- */
.closing{grid-column:1/-1;padding:120px 0 160px;display:flex;flex-direction:column;align-items:flex-start;gap:28px;border-top:1px solid #29291926;margin-top:60px}
.closing-btns{display:flex;gap:12px;flex-wrap:wrap}
.roundedButton.big,.navButton.big{height:48px;padding:0 24px;font-size:15px}
.closing .roundedButton{background:var(--dark);color:var(--light)}
.navButton.ghost{box-shadow:inset 0 0 0 1px var(--dark);border-radius:99px;color:var(--dark)}
.navButton.ghost:hover{background:var(--dark);color:var(--light)}

/* ---------- 弹层 ---------- */
.modal{position:fixed;inset:0;z-index:10004}
.modal[hidden]{display:none}
/* 产品短片（对应原版视频弹层） */
.film-bg{position:absolute;inset:0;background:#e9e6d8 url(../img/paper.jpg) 0 0/384px;background-blend-mode:multiply;animation:fadeIn .35s ease-out}
.film-wrap{position:relative;height:100%;display:grid;place-items:center;padding:20px}
.film-stage{position:relative;width:min(90%,calc((85vh - 4.5rem) * 16 / 9));aspect-ratio:16/9;background:#14140c;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.35);animation:filmIn .5s var(--ease-out-cubic)}
.film-x{position:absolute;left:50%;top:max(20px,calc(50% - (min(90vw,calc((85vh - 4.5rem) * 16 / 9)) * 9 / 32) - 74px));transform:translateX(-50%);z-index:3;background:rgba(41,41,25,.75);color:var(--light)}
@keyframes fadeIn{from{opacity:0}}
@keyframes filmIn{from{opacity:0;transform:scale(.96)}}
/* 睡帽彩蛋（对应原版 merch-modal：opacity + 40px 位移，0.3s） */
.merch,.demo{display:grid;place-items:end center;background:rgba(0,0,0,.6)}
@media (min-width:769px){.merch,.demo{place-items:center;padding:12px}}
.merch-box,.demo-box{position:relative;width:100%;background:var(--light);color:var(--dark);padding:20px;animation:sheetIn .3s ease-out}
@media (min-width:769px){.merch-box{max-width:min(400px,calc(100vw - 24px));border-radius:3px}.demo-box{max-width:min(480px,calc(100vw - 24px));border-radius:3px;padding:28px}}
@keyframes sheetIn{from{opacity:0;translate:0 40px}}
.merch-x{position:absolute;right:14px;top:14px;width:48px;height:48px;display:grid;place-items:center;z-index:2}
.merch-x svg{width:16px;height:16px}
.merch-pic{margin:-20px -20px 16px;aspect-ratio:3/2;overflow:hidden}
.merch-pic svg{width:100%;height:100%}
.merch-tag{color:var(--grey-dark);margin-bottom:6px}
.merch-price{display:flex;align-items:baseline;gap:10px;margin:10px 0}
.merch-price .num{font:700 28px/1 var(--f-sans);letter-spacing:-.02em}
.merch-price .bodycopy-2{color:var(--grey-dark)}
.merch-d{color:var(--grey-dark)}
.merch-q{display:inline-flex;align-items:center;gap:14px;margin:16px 0;border:1px solid #29291933;border-radius:99px;padding:4px}
.merch-q button{width:32px;height:32px;border-radius:50%;font:700 18px/1 var(--f-sans)}
.merch-q button:hover{background:#29291914}
.merch-q span{min-width:1.5em;text-align:center;font:700 15px var(--f-sans)}
.merch-add{width:100%;justify-content:center;height:44px;background:var(--dark);color:var(--light)}
.merch-done{margin-top:10px;color:var(--grey-dark)}
.demo-sub{color:var(--grey-dark);margin:10px 0 18px}
#demo-form{display:grid;gap:6px}
#demo-form input[type=text],#demo-form input:not([type]),#demo-form input[autocomplete]{height:44px;padding:0 12px;border:1px solid #29291933;border-radius:3px;background:#fffffb;font:500 15px var(--f-sans);color:var(--dark);margin-bottom:8px;outline:none}
#demo-form input:focus{border-color:var(--dark)}
#demo-form fieldset{border:0;padding:0;margin:6px 0 4px;display:flex;flex-wrap:wrap;gap:8px}
#demo-form legend{margin-bottom:8px}
#demo-form fieldset label{position:relative}
#demo-form fieldset input{position:absolute;opacity:0}
#demo-form fieldset span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:99px;box-shadow:inset 0 0 0 1px #29291933;font:600 13px var(--f-sans);cursor:pointer}
#demo-form fieldset input:checked+span{background:var(--dark);color:var(--light);box-shadow:none}
#demo-form fieldset input:focus-visible+span{outline:1px solid #739bff}
.err{color:#a3281c}
.demo-act{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.demo-act span{color:var(--grey-dark)}
.demo-box .roundedButton{background:var(--dark);color:var(--light);height:40px;padding:0 20px}

/* ---------- 彩蛋：透镜 + 涂鸦层 ---------- */
.lens{position:fixed;z-index:10003;left:0;top:0;width:280px;height:210px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 2px #bf9752,0 0 0 6px #14140c55,0 30px 80px rgba(0,0,0,.45);transform:translate(-50%,-50%);cursor:none}
.lens[hidden]{display:none}
.lens{background:rgba(20,18,10,.08);-webkit-backdrop-filter:contrast(1.15) saturate(1.35);backdrop-filter:contrast(1.15) saturate(1.35)}
.lens canvas{position:absolute;left:0;top:0}
.lens-x{position:absolute;right:6px;top:6px;width:28px;height:28px;border-radius:50%;background:#14140ccc;color:var(--light);display:grid;place-items:center;cursor:pointer}
.lens-x svg{width:12px;height:12px}
.toast{position:fixed;left:50%;bottom:24px;z-index:10005;transform:translate(-50%,20px);padding:10px 16px;border-radius:99px;background:var(--dark);color:var(--light);font:700 13px var(--f-sans);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease-out-cubic)}
.toast.on{opacity:1;transform:translate(-50%,0)}
body.grab{cursor:grab}
body.grabbing{cursor:grabbing}
body.pointer{cursor:pointer}