/* yhads-3d premium v8 — route hero + sculpted process. Gold #7a6a5e only accent. */
:root{--gold:#7a6a5e;--ink:#39312d;--ink2:rgba(57,49,45,.66);--bg:#f1f1f1}
.v8-hero{position:relative;height:165vh;background:var(--bg);isolation:isolate}
.v8-hero .v8-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.v8-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 55% at 68% 42%,rgba(122,106,94,.10),transparent 70%),radial-gradient(ellipse 80% 70% at 20% 80%,rgba(122,106,94,.08),transparent 70%)}
.v8-hero-stage{position:absolute;inset:0}
.v8-hero-stage canvas.gl{position:absolute;inset:0;width:100%!important;height:100%!important}
.v8-arc{position:absolute;inset:0;width:100%;height:100%}
.v8-hero.gl .v8-arc{display:none}
.v8-city{position:absolute;left:0;top:0;pointer-events:none;font:500 .72rem/1 "Outfit","Noto Sans TC",sans-serif;letter-spacing:.24em;color:rgba(57,49,45,.38);white-space:nowrap;transition:color .6s;margin:-30px 0 0 18px;display:none}
.v8-hero.gl .v8-city{display:block}.v8-city.on{color:var(--gold)}
.v8-copy{position:relative;z-index:2;height:100%;max-width:1240px;margin:0 auto;padding:0 6vw;display:flex;flex-direction:column;justify-content:center;opacity:calc(1 - max(0, var(--p,0) - .55) * 2.6);transform:translateY(calc(var(--p,0) * -60px))}
.v8-eyebrow{font:500 .78rem/1 "Outfit","Noto Sans TC",sans-serif;letter-spacing:.32em;color:var(--gold);margin:0 0 1.6rem}
.v8-title{font-family:"Outfit","Noto Sans TC",sans-serif;font-weight:700;font-size:clamp(2.6rem,5.6vw,5rem);line-height:1.14;letter-spacing:-.01em;color:var(--ink);margin:0;max-width:11em}
.v8-title,.v8-title span{text-shadow:none!important;animation:none!important}.v8-title .hl{display:block;color:var(--gold);-webkit-text-fill-color:var(--gold);background:none!important;font-weight:300}
.v8-sell{margin:2rem 0 0;font-size:1.08rem;color:var(--ink);display:flex;flex-wrap:wrap;gap:.8rem;align-items:baseline}
.v8-sell em{font-style:normal;color:var(--gold);font-family:"Outfit",sans-serif;font-weight:500;border-bottom:1px solid rgba(122,106,94,.5);padding-bottom:2px}
.v8-lead{margin:1.1rem 0 0;max-width:34rem;line-height:1.9;color:var(--ink2);font-size:.98rem}
.v8-ctas{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap}
.v8-btn{display:inline-block;padding:.9rem 1.6rem;border:1px solid var(--gold);color:#f1f1f1;background:var(--gold);text-decoration:none;font-weight:600;letter-spacing:.04em;border-radius:2px}
.v8-btn.ghost{background:transparent;color:var(--ink);border-color:rgba(57,49,45,.28)}
.v8-scroll{position:absolute;left:6vw;bottom:5vh;z-index:2;font:400 .72rem/1 "Outfit",sans-serif;letter-spacing:.3em;color:rgba(57,49,45,.4)}
.v8-scroll::after{content:"";display:inline-block;width:56px;height:1px;background:rgba(122,106,94,.6);vertical-align:middle;margin-left:14px}
/* process */
.v8-flow{position:relative;height:340vh;background:var(--bg);isolation:isolate}
.v8-flow .v8-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.v8-flow-stage{position:absolute;inset:0}
.v8-flow-stage canvas.gl{position:absolute;inset:0;width:100%!important;height:100%!important}
.v8-flow::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 50% at 60% 55%,rgba(122,106,94,.07),transparent 70%)}
.v8-flow-head{position:absolute;z-index:2;left:max(6vw,calc(50% - 620px));top:13vh;max-width:26rem}
.v8-flow-head .v7-sub{color:var(--ink2)}
.v8-steps{position:absolute;z-index:2;left:max(6vw,calc(50% - 620px));right:max(6vw,calc(50% - 620px));bottom:7vh;list-style:none;margin:0;padding:1.6rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:3vw}
.v8-rail{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(46,38,34,.12)}
.v8-rail i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.v8-st{opacity:.32;transition:opacity .6s}
.v8-st.done{opacity:.55}.v8-st.on{opacity:1}
.v8-st b{display:block;font:200 2.4rem/1 "Outfit",sans-serif;color:var(--ink);letter-spacing:-.02em;transition:color .6s}
.v8-st.on b{color:var(--gold)}
.v8-st h3{font:600 1.15rem/1.3 "Outfit","Noto Sans TC",sans-serif;color:var(--ink);margin:.8rem 0 .45rem}
.v8-st p{margin:0;font-size:.88rem;line-height:1.8;color:var(--ink2);max-width:16rem}
.v8-flow:not(.gl) .v8-st{opacity:1}
@media (max-width:820px){
 .v8-hero{height:150vh}.v8-hero.gl .v8-city{display:none}.v8-copy{justify-content:flex-start;padding:22vh 7vw 0}.v8-title{font-size:2.3rem}.v8-scroll{left:7vw}
 .v8-flow{height:320vh}.v8-flow-head{top:11vh;left:7vw;right:7vw}.v8-flow-head .v7-sub{display:none}
 .v8-steps{left:7vw;right:7vw;bottom:6vh;grid-template-columns:1fr;gap:0}
 .v8-flow.gl .v8-st{display:none}.v8-flow.gl .v8-st.on{display:block}
 .v8-flow:not(.gl){height:auto}.v8-flow:not(.gl) .v8-sticky{position:relative;height:auto;padding:7rem 0 3rem}.v8-flow:not(.gl) .v8-flow-head,.v8-flow:not(.gl) .v8-steps{position:relative;top:auto;bottom:auto;left:auto;right:auto;margin:0 7vw}.v8-flow:not(.gl) .v8-steps{gap:2rem;margin-top:2rem}
}
@media (prefers-reduced-motion:reduce){.v8-copy{opacity:1!important;transform:none!important}.v8-hero{height:100vh}}
/* ===== v9: previous site palette (magenta / cyan / lavender glows) with gold as support ===== */
:root{--cy:#7a6a5e;--mg:#e08a5b;--lv:#7a6a5e}
.v8-hero{height:140vh}
.v8-hero::before{background:radial-gradient(ellipse 55% 50% at 72% 38%,rgba(224,138,91,.16),transparent 70%),radial-gradient(ellipse 60% 55% at 85% 75%,rgba(122,106,94,.10),transparent 70%),radial-gradient(ellipse 70% 60% at 15% 30%,rgba(122,106,94,.16),transparent 70%)}
.v8-copy{opacity:calc(1 - max(0, var(--p,0) - .78) * 4.5);transform:translateY(calc(max(0, var(--p,0) - .4) * -90px))}
.v8-eyebrow{color:var(--mg)}
.v8-title .hl{background:linear-gradient(90deg,var(--mg),#7a6a5e 50%,var(--cy))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 22px rgba(224,138,91,.28))}
.v8-sell em{color:var(--gold);border-bottom-color:rgba(122,106,94,.5)}
.v8-btn{background:linear-gradient(90deg,var(--mg),#7a6a5e);border-color:transparent;color:#2e2622;box-shadow:0 10px 30px -10px rgba(224,138,91,.6)}
.v8-btn.ghost{background:transparent;box-shadow:none;border-color:rgba(122,106,94,.4)}
.v8-scroll::after{background:linear-gradient(90deg,var(--mg),var(--cy))}
.v8-city{color:rgba(57,49,45,.4)}.v8-city:nth-of-type(1).on{color:var(--cy)}.v8-city:nth-of-type(2).on{color:var(--mg)}.v8-city:nth-of-type(3).on{color:var(--lv)}
.v8-arc path{stroke:url(#v9g)}
/* process */
.v8-flow::before{background:radial-gradient(ellipse 60% 45% at 65% 55%,rgba(122,106,94,.16),transparent 70%),radial-gradient(ellipse 40% 35% at 85% 70%,rgba(224,138,91,.10),transparent 70%)}
.v8-flow .v7-eyebrow{color:var(--mg)}
.v8-rail i{background:linear-gradient(90deg,var(--cy),var(--mg) 40%,var(--gold) 70%,var(--lv))}
.v8-st:nth-of-type(1) b{color:var(--cy)}.v8-st:nth-of-type(2) b{color:var(--mg)}.v8-st:nth-of-type(3) b{color:var(--gold)}.v8-st:nth-of-type(4) b{color:var(--lv)}
.v8-st b{opacity:.55;transition:opacity .6s,text-shadow .6s}.v8-st.on b{opacity:1}
.v8-st:nth-of-type(1).on b{color:var(--cy);text-shadow:0 0 22px rgba(122,106,94,.55)}.v8-st:nth-of-type(2).on b{color:var(--mg);text-shadow:0 0 22px rgba(224,138,91,.55)}.v8-st:nth-of-type(3).on b{color:var(--gold);text-shadow:0 0 22px rgba(122,106,94,.5)}.v8-st:nth-of-type(4).on b{color:var(--lv);text-shadow:0 0 22px rgba(122,106,94,.6)}
/* platforms colour wash */
.v7-plat .v7-stage::before{content:"";position:absolute;inset:8% 0;border-radius:50%;filter:blur(40px);opacity:.55;transition:background 1s;background:radial-gradient(closest-side,rgba(122,106,94,.45),transparent)}
.v7-plat[data-pf="1"] .v7-stage::before{background:radial-gradient(closest-side,rgba(224,138,91,.42),rgba(122,106,94,.15) 60%,transparent)}
.v7-plat[data-pf="2"] .v7-stage::before{background:radial-gradient(closest-side,rgba(122,106,94,.38),rgba(224,138,91,.12) 60%,transparent)}
.v7-plat[data-pf="3"] .v7-stage::before{background:radial-gradient(closest-side,rgba(122,106,94,.36),rgba(122,106,94,.14) 60%,transparent)}
.v7-plat .v7-eyebrow{color:var(--mg)}
.v7-plat .v7-item.on .v7-idx{color:var(--cy)}
.v7-plat .v7-item.on h3{background:linear-gradient(90deg,#2e2622,#514a45);-webkit-background-clip:text;background-clip:text;color:transparent}
.v7-plat .v7-h,.v8-flow .v7-h{text-shadow:0 0 30px rgba(122,106,94,.25)}
@media (max-width:820px){.v8-hero{height:130vh}.v8-copy{justify-content:flex-end;padding:0 7vw 5vh}.v8-scroll{display:none}.v8-hero.gl .v8-city{display:none}}
.v7-plat .v7-item::before{background:linear-gradient(90deg,var(--mg),var(--cy))}
/* ===== v9 platforms (glass phone + chips) ===== */
.v9-plat{background:#f1f1f1;isolation:isolate}
.v9-plat .pv-sticky{position:sticky}
.v9-plat-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.v9-plat-stage canvas.gl{position:absolute;inset:0;width:100%!important;height:100%!important}
.v9-plat::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 38% 48% at 72% 50%,rgba(122,106,94,.28),transparent 72%),radial-gradient(ellipse 30% 35% at 80% 70%,rgba(122,106,94,.12),transparent 70%),radial-gradient(ellipse 30% 30% at 62% 30%,rgba(224,138,91,.10),transparent 70%)}
.v9-plat .pv-copy{position:relative;z-index:2;max-width:560px}
.v9-plat .pv-sticky{grid-template-columns:1fr}
.v9-plat .pl-tag{color:var(--cy);letter-spacing:.3em;font-size:.72rem}
.v9-plat .pl-item.on:before{background:linear-gradient(var(--mg),var(--cy))}
.v9-plat .pl-body ul li{border-color:rgba(122,106,94,.45)}
.v9-plat .pv-dots{z-index:2}.v9-plat .pv-dots i.on{background:var(--gold);height:18px;border-radius:3px}
.v9-cap{position:absolute;right:4vw;bottom:4vh;z-index:2;font-size:.72rem;color:rgba(57,49,45,.35);margin:0}
.v9-plat.gl .pv-glow{display:none}
/* ===== v9 process (3D wave) ===== */
.v9-flow{position:relative;height:300vh;background:#f1f1f1;isolation:isolate}
.v9-flow::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 55% 45% at 50% 55%,rgba(122,106,94,.30),transparent 72%)}
.v9-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.v9-flow-stage{position:absolute;inset:0}
.v9-flow-stage canvas.gl{position:absolute;inset:0;width:100%!important;height:100%!important}
.v9-flow-head{position:absolute;z-index:2;left:0;right:0;top:9vh;text-align:center;padding:0 6vw}
.v9-eye{font:500 .76rem/1 "Outfit","Noto Sans TC",sans-serif;letter-spacing:.3em;color:var(--mg);margin:0 0 1rem}
.v9-flow-head h2{font-family:"Outfit","Noto Sans TC",sans-serif;font-weight:900;font-size:clamp(2.1rem,3.8vw,3.3rem);line-height:1.18;color:#2e2622;margin:0;text-shadow:0 0 30px rgba(122,106,94,.35)}
.v9-sub{margin:1rem 0 0;color:rgba(57,49,45,.66);font-size:.95rem}
.v9-nodes{list-style:none;margin:0;padding:0}
.v9-node{position:absolute;z-index:2;width:min(15rem,22vw);text-align:center;transform:translate(-50%,0);opacity:0;transition:opacity .7s,margin .7s}
.v9-node.dn{margin-top:38px}.v9-node.up{transform:translate(-50%,-100%);margin-top:-38px}
.v9-node.on{opacity:1}.v9-node.dn.on{margin-top:26px}.v9-node.up.on{margin-top:-26px}
.v9-node b{display:block;font:500 1.9rem/1 "Outfit",sans-serif;letter-spacing:.02em}
.n1 b{color:var(--cy);text-shadow:0 0 18px rgba(122,106,94,.6)}.n2 b{color:var(--mg);text-shadow:0 0 18px rgba(224,138,91,.6)}.n3 b{color:var(--gold);text-shadow:0 0 18px rgba(122,106,94,.55)}.n4 b{color:var(--lv);text-shadow:0 0 18px rgba(122,106,94,.65)}
.v9-node h3{font:700 1.1rem/1.3 "Outfit","Noto Sans TC",sans-serif;color:#2e2622;margin:.55rem 0 .35rem}
.v9-node p{margin:0;font-size:.85rem;line-height:1.75;color:rgba(57,49,45,.7)}
.v9-flow:not(.gl) .v9-nodes{position:absolute;left:6vw;right:6vw;bottom:10vh;display:grid;grid-template-columns:repeat(4,1fr);gap:2vw}
.v9-flow:not(.gl) .v9-node{position:relative;transform:none;margin:0;opacity:1;width:auto}
@media (max-width:820px){
 .v9-plat .pv-sticky{align-items:start;padding-top:12vh}.v9-cap{display:none}
 .v9-flow{height:280vh}.v9-flow-head{top:9vh}.v9-sub{display:none}
 .v9-node{width:44vw;text-align:left}.v9-node.dn,.v9-node.up{transform:translate(16px,-50%);margin-top:0}
 .v9-node.up{transform:translate(calc(-100% - 16px),-50%);text-align:right}
 .v9-node.dn.on,.v9-node.up.on{margin-top:0}
 .v9-node b{font-size:1.5rem}.v9-node p{font-size:.78rem}
 .v9-flow:not(.gl) .v9-nodes{grid-template-columns:1fr;top:26vh;bottom:auto}
}
@media (max-width:820px){
 .v9-flow.gl .v9-flow-head{opacity:calc(1 - var(--p,0) * 7)}
 .v9-flow.gl .v9-node,.v9-flow.gl .v9-node.up,.v9-flow.gl .v9-node.dn{left:auto!important;right:6vw;width:52vw;text-align:left;transform:translateY(-50%);margin:0}
}
/* ===== v10 ===== */
.v8-city{z-index:3;display:none;margin:0!important;padding:.42rem .8rem;border-radius:999px;background:rgba(240,240,240,.74);border:1px solid rgba(46,38,34,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:600 .86rem/1 "Outfit","Noto Sans TC",sans-serif;letter-spacing:.14em;color:rgba(57,49,45,.78);box-shadow:0 6px 20px rgba(247,247,247,.35)}
.v8-hero.gl .v8-city{display:block}
.v8-city.on{color:#2e2622}.v8-city:nth-of-type(1).on{border-color:rgba(122,106,94,.6);box-shadow:0 0 18px rgba(122,106,94,.25)}.v8-city:nth-of-type(2).on{border-color:rgba(224,138,91,.6);box-shadow:0 0 18px rgba(224,138,91,.25)}.v8-city:nth-of-type(3).on{border-color:rgba(122,106,94,.65);box-shadow:0 0 18px rgba(122,106,94,.28)}
.v8-city.on{color:#2e2622!important}
.v9-flow-head{top:11vh}
.v9-node{width:min(18.5rem,24vw)}
.v9-node p{font-size:.98rem;line-height:1.75;color:rgba(57,49,45,.88)}
.v9-node h3{font-size:1.22rem}
.v9-node b{font-size:2.1rem;transition:transform .6s}
.v9-node.on b{transform:scale(1.08)}
.v9-node:hover b{transform:scale(1.14)}
@media (max-width:820px){.v8-hero.gl .v8-city{display:none}.v9-node p{font-size:.86rem}.v9-flow.gl .v9-node{width:54vw}}
/* ===== v11 ===== */
.v9-node p,.v9-node h3,.pl-body p,.v8-lead,.v9-sub,.v7-desc{word-break:keep-all;line-break:strict;text-wrap:balance;overflow-wrap:anywhere}
.v9-node{z-index:4}
.v9-node p{text-shadow:0 1px 10px rgba(241,241,241,.9)}
.v8-sell,.v8-title,.pv-h,.pl-item h3{word-break:keep-all;line-break:strict;text-wrap:balance}
.pf-err{color:#e08a5b;font-size:.9rem;margin:.2rem 0 .6rem}.pf-note{font-size:.85rem;color:rgba(57,49,45,.65);margin:.7rem 0 0}


/* 0.2.62 — soft route join from hero exit into subsequent sections */
.yh-route-join{position:relative;height:0;pointer-events:none;z-index:1}
.yh-route-join-svg{position:absolute;left:0;right:0;top:-8vh;width:100%;height:28vh;opacity:.9}
@media (max-width:820px){.yh-route-join-svg{top:-4vh;height:18vh;opacity:.75}}