:root{--g:#461a7b;--gd:#35096a;--n:#cebfe2;--p:#572b8c;--w:#f8f8f8;--t:#2b2c2e}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--g);color:var(--w);font-family:"Noto Sans TC",system-ui,sans-serif;line-height:1.8;overflow-x:hidden}
a{color:inherit}
.nav{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;z-index:10;background:#fff;box-shadow:0 1px 12px #0003}.logo img{height:38px;display:block}
.logo{text-decoration:none;font-weight:900;font-size:1.3rem}.logo span{font-size:.6rem;letter-spacing:.2em;color:var(--n);margin-left:.5em}
.nav nav{display:none;gap:1.5rem}.nav nav a{text-decoration:none;font-size:.9rem;color:var(--t);font-weight:700}.nav nav a:hover{color:var(--p)}
.lang{background:none;border:1px solid var(--p);color:var(--p);border-radius:99px;padding:4px 12px;font-size:.75rem;opacity:.7}
.eyebrow{color:var(--n);letter-spacing:.2em;font-size:.85rem;margin-bottom:1rem}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:110px 6vw 60px;position:relative;overflow:hidden}
.hero h1{font-size:clamp(3.4rem,15vw,11rem);line-height:1.05;font-weight:900}
.hero em{font-style:normal;color:var(--n)}
.lead{margin:1.5rem 0;font-size:1.1rem;max-width:30em;opacity:.9}
.btn{align-self:flex-start;background:#fff;color:var(--p);padding:12px 26px;border-radius:99px;text-decoration:none;font-weight:700}
.orb{position:absolute;right:-20vw;top:15%;width:70vw;height:70vw;max-width:700px;max-height:700px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--n),transparent 65%);opacity:.25;filter:blur(20px);animation:f 9s ease-in-out infinite}
@keyframes f{50%{transform:translateY(-30px) scale(1.06)}}
.block{padding:18vh 6vw}
.big{font-size:clamp(2.2rem,8vw,6rem);line-height:1.15;font-weight:900;margin-bottom:2rem}
.cols{display:grid;gap:1.5rem;font-size:1.1rem;max-width:60rem}
.story{height:360vh;background:var(--gd)}
.sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:80px 6vw 30px;overflow:hidden}
.steps{position:relative;min-height:16rem;z-index:2}
.step{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(40px);transition:.7s;max-width:30rem}
.step.on{opacity:1;transform:none}
.step .num{color:var(--n);font-weight:700}.step h2{font-size:clamp(4rem,18vw,9rem);line-height:1.1;font-weight:900}
.step p{font-size:1.1rem}
.progress{position:absolute;left:0;top:0;height:3px;width:100%;background:#fff1}.progress i{display:block;height:100%;width:0;background:var(--n)}
.visual{position:absolute;right:-10vw;bottom:5vh;width:80vw;height:80vw;max-width:600px;max-height:600px;opacity:.55}
.ring,.core{position:absolute;border-radius:50%;inset:0;margin:auto;transition:transform .2s linear}
.ring{border:2px solid var(--n)}.r1{width:100%;height:100%}.r2{width:70%;height:70%;border-style:dashed}.r3{width:40%;height:40%}
.core{width:18%;height:18%;background:var(--n)}
.light{background:var(--w);color:var(--t)}.light .big{color:var(--p)}.light .eyebrow{color:var(--p)}
.cards{display:grid;gap:1.5rem}
.card{background:var(--g);color:var(--w);padding:1.5rem;border-radius:24px}
.card h3{font-size:2rem;margin:1rem 0 .3rem;color:var(--n)}.card ul{margin-top:1rem;padding-left:1.2rem;font-size:.9rem}
.ph{aspect-ratio:4/3;border:2px dashed var(--n);border-radius:16px;display:grid;place-items:center;color:var(--n);opacity:.7}
.tbd{background:#ffe14d;color:#222;padding:0 .4em;border-radius:4px;font-size:.85em}
.lead2{max-width:40rem;font-size:1.1rem}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.7rem;margin:2rem 0}
.tags li{border:1px solid var(--n);color:var(--n);border-radius:99px;padding:.4rem 1.3rem;font-size:1.2rem}
.contact{background:var(--gd);font-size:1.15rem}.contact a{color:var(--n)}
footer{padding:2rem 6vw;font-size:.8rem;opacity:.8;background:#240548}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s,transform .9s}.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media(min-width:800px){.nav nav{display:flex}.cards{grid-template-columns:1fr 1fr}.cols{grid-template-columns:1fr 1fr}.block{padding:22vh 8vw}.visual{right:5vw;bottom:auto;top:20vh}.hero{padding:0 8vw}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* --- interactive upgrade --- */
#spores{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero>*:not(canvas):not(.stones):not(.orb){position:relative;z-index:2}
.stones{position:absolute;inset:0;z-index:1;pointer-events:none}
.s{position:absolute;display:block;border-radius:42% 58% 55% 45%/50% 45% 55% 50%;will-change:transform}
.s1{width:34vw;max-width:380px;aspect-ratio:1;right:6vw;bottom:8vh;background:linear-gradient(145deg,var(--p),var(--gd));opacity:.7}
.s2{width:20vw;max-width:220px;aspect-ratio:1;right:26vw;bottom:30vh;background:linear-gradient(145deg,var(--n),var(--p));opacity:.35}
.s3{width:12vw;max-width:130px;aspect-ratio:1;right:3vw;top:20vh;border:2px solid var(--n);opacity:.5}
.ch{display:inline-block;opacity:0;transform:translateY(.6em) rotate(4deg);transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1)}
.in .ch,.ch.in{opacity:1;transform:none}
.reveal.split{opacity:1;transform:none}
.mag{display:inline-block;will-change:transform}
.stonewrap{margin-top:4rem;perspective:900px;display:flex;justify-content:center}
.stone{width:min(300px,80vw);height:340px;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1);cursor:grab;touch-action:pan-y;outline-offset:6px}
.stone.drag{transition:none;cursor:grabbing}
.face{position:absolute;inset:0;border-radius:42% 58% 55% 45%/50% 45% 55% 50%;display:grid;place-content:center;text-align:center;backface-visibility:hidden;padding:2rem;background:linear-gradient(145deg,var(--p),var(--gd));border:2px solid var(--n);box-shadow:0 30px 60px #0006}
.face span{font-size:7rem;font-weight:900;color:var(--n);line-height:1}.face small{color:var(--n);opacity:.8}
.back{transform:rotateY(180deg);background:var(--n);color:var(--gd);font-weight:700;font-size:1.2rem}
.explore{background:var(--p)}
.orbit-wrap{display:grid;gap:2rem;align-items:center}
.orbit{position:relative;width:min(340px,80vw);aspect-ratio:1;margin:auto}.orbit::before{content:'';position:absolute;inset:0;border:2px dashed var(--n);border-radius:50%;animation:spin 40s linear infinite}
.orbit:hover::before{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
.o-core{position:absolute;inset:0;margin:auto;width:90px;height:90px;border-radius:50%;background:var(--n);color:var(--gd);display:grid;place-items:center;font-style:normal;font-weight:900;}
.node{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px;border-radius:50%;border:2px solid var(--n);background:var(--gd);color:var(--w);font:700 .9rem inherit;cursor:pointer;transform:rotate(var(--a)) translateY(calc(min(340px,80vw)/-2)) rotate(calc(var(--a)*-1));transition:background .3s,color .3s}
.node.act,.node:hover{background:var(--n);color:var(--gd)}
.orbit .node{animation:spin 40s linear infinite reverse;animation-name:none}
.panel{background:var(--gd);border-radius:24px;padding:1.5rem;min-height:11rem;border:1px solid var(--n)}
.panel h3{color:var(--n);font-size:1.8rem}.panel.pop{animation:pop .5s}
@keyframes pop{from{opacity:0;transform:translateY(12px)}}
.grow{position:relative;min-height:170vh;background:var(--gd)}
#lz{position:sticky;top:10vh;height:80vh;width:min(100%,420px);display:block;margin-left:auto;margin-right:6vw;float:right}
.growtxt{position:sticky;top:30vh;padding:0 6vw;max-width:40rem}
.tilt{transform-style:preserve-3d;transition:transform .15s,opacity .9s;will-change:transform}
.tilt.in{transition:transform .15s}
#cur,#cur2{position:fixed;left:0;top:0;pointer-events:none;z-index:99;display:none;border-radius:50%}
#cur{width:8px;height:8px;background:var(--n);margin:-4px;mix-blend-mode:difference}
#cur2{width:36px;height:36px;margin:-18px;border:1.5px solid var(--n);transition:width .2s,height .2s,margin .2s,background .2s}
#cur2.big{width:64px;height:64px;margin:-32px;background:#cebfe244}
@media(hover:hover) and (pointer:fine){.cursor-on,.cursor-on *{cursor:none!important}.cursor-on #cur,.cursor-on #cur2{display:block}}
@media(min-width:800px){.orbit-wrap{grid-template-columns:1fr 1fr}.growtxt{position:absolute;top:30vh;left:0}}
@media(prefers-reduced-motion:reduce){.orbit::before{animation:none!important}.ch{opacity:1;transform:none}}