:root{
  --ink:#141311; --paper:#ffffff; --paper-2:#f3f2ee; --line:#141311;
  --mute:#6e6a62; --mute-2:#b9b5ac;
  --lofi:#5b45d6; --lofi-soft:#ebe7fb; --lofi-ink:#1a1233;
  --hodl:#f2621b; --hodl-soft:#fdeadf; --hodl-ink:#2b1608;
  --solo:#f4b400; --solo-sky:#a9d3f0; --solo-soft:#fff5cc; --solo-ink:#2a2008;
  --trike:#c4552b; --trike-soft:#fbe6dc; --trike-ink:#3a1a0e;
  --focus:#5b45d6;
  --rule:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f3f2ee; --paper:#141311; --paper-2:#1e1d1a; --line:#f3f2ee;
    --mute:#a39f95; --mute-2:#5a574f;
    --lofi:#9d8cff; --lofi-soft:#211a45; --lofi-ink:#efeaff;
    --hodl:#ff8a4d; --hodl-soft:#3a1c0b; --hodl-ink:#ffe9db;
    --solo:#ffc933; --solo-sky:#2b5876; --solo-soft:#3a2f08; --solo-ink:#fff3c4;
    --trike:#ff8f5e; --trike-soft:#3d1c10; --trike-ink:#ffe4d6;
    --focus:#9d8cff;
  }
}
:root[data-theme="dark"]{
  --ink:#f3f2ee; --paper:#141311; --paper-2:#1e1d1a; --line:#f3f2ee;
  --mute:#a39f95; --mute-2:#5a574f;
  --lofi:#9d8cff; --lofi-soft:#211a45; --lofi-ink:#efeaff;
  --hodl:#ff8a4d; --hodl-soft:#3a1c0b; --hodl-ink:#ffe9db;
  --solo:#ffc933; --solo-sky:#2b5876; --solo-soft:#3a2f08; --solo-ink:#fff3c4;
  --trike:#ff8f5e; --trike-soft:#3d1c10; --trike-ink:#ffe4d6;
  --focus:#9d8cff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.display{font-family:"Unbounded","Noto Sans TC",sans-serif;font-weight:900;letter-spacing:-.01em;line-height:1.05;text-wrap:balance}
.mono{font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--mute);margin:0 0 18px}
.eyebrow::before{content:"";width:28px;height:var(--rule);background:currentColor;flex:none}
h1,h2,h3,h4{margin:0}
p{margin:0}
.rule{border:0;border-top:var(--rule) solid var(--line);margin:0}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:var(--rule) solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:"Unbounded",sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em}
.brand img{height:30px;width:auto}
.nav{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-weight:500;font-size:15px;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--ink)}
@media (max-width:820px){.nav{display:none}.top .wrap{gap:12px}.top .btn{white-space:nowrap;padding:10px 16px;font-size:14px}}
@media (max-width:480px){.brand{font-size:0;gap:0}.top .btn{padding:9px 14px;font-size:13px}}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:700;font-size:15px;padding:12px 22px;border-radius:999px;border:var(--rule) solid var(--ink);transition:transform .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--lofi)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{box-shadow:4px 4px 0 var(--ink)}
.btn.ig img{width:20px;height:20px;display:block;filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.ig img{filter:none}}
:root[data-theme="dark"] .btn.ig img{filter:none}

/* hero */
.hero{padding:clamp(48px,7vw,96px) 0 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,72px);align-items:end}
.hero-grid>div{min-width:0}
.hero h1{font-size:clamp(36px,5.4vw,74px);text-wrap:pretty}
.hero h1 em{font-style:normal;display:inline-block;background:var(--ink);color:var(--paper);padding:0 .18em;border-radius:.2em;transform:rotate(-1.5deg)}
.hero .lede{font-size:clamp(18px,1.6vw,21px);max-width:34em;margin-top:28px;color:var(--ink)}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.mark{justify-self:end;width:min(100%,420px)}
.mark img{width:100%}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line)}
.stats div{padding:22px 0 20px;border-right:1px solid var(--mute-2)}
.stats div:last-child{border-right:0}
.stats div:not(:first-child){padding-left:22px}
.stats b{display:block;font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,32px);font-variant-numeric:tabular-nums;line-height:1.1}
.stats span{display:block;color:var(--mute);font-size:14px;margin-top:6px}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .mark{justify-self:start;width:min(60%,300px);order:-1}
  .stats{grid-template-columns:1fr 1fr}
  .stats div{border-right:0;border-bottom:1px solid var(--mute-2)}
  .stats div:nth-child(odd){border-right:1px solid var(--mute-2)}
  .stats div:not(:first-child){padding-left:0}
  .stats div:nth-child(even){padding-left:22px}
  .stats div:nth-last-child(-n+2){border-bottom:0}
}

/* marquee */
.marquee{overflow:hidden;border-top:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);padding:14px 0;white-space:nowrap}
.marquee .track{display:inline-flex;gap:48px;animation:slide 40s linear infinite;padding-right:48px}
.marquee span{font-family:"Unbounded",sans-serif;font-weight:500;font-size:14px;color:var(--mute)}
.marquee span::before{content:"✦";margin-right:48px;color:var(--ink)}
.marquee span a{color:inherit;text-decoration:none}
.marquee span a:hover,.marquee span a:focus-visible{color:var(--ink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* section heads */
.section{padding:clamp(56px,7vw,104px) 0}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.section-head h2{font-size:clamp(32px,4.4vw,60px)}
.section-head p{color:var(--mute);font-size:17px;max-width:32em}
#services-h{font-size:clamp(28px,3.8vw,52px)} .nw{white-space:nowrap}
@media (max-width:820px){.section-head{grid-template-columns:1fr}}

/* products */
.product{border-top:var(--rule) solid var(--line);padding:clamp(40px,5vw,72px) 0}
.product .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.product.flip .grid > .media{order:-1}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--acc-soft);color:var(--acc-ink)}
.tag i{width:10px;height:10px;border-radius:50%;background:var(--acc);display:inline-block}
.product h3{font-size:clamp(34px,4.6vw,64px);margin-top:16px}
.product h3 small{display:block;font-family:"Noto Sans TC",sans-serif;font-weight:700;font-size:clamp(17px,1.6vw,22px);color:var(--mute);letter-spacing:0;margin-top:6px}
.product .desc{margin-top:22px;max-width:32em}
.feat{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.feat li{padding-left:18px;position:relative;font-size:15px;line-height:1.55}
.feat li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--acc);border-radius:50%}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-family:"DM Mono",monospace;font-size:13px;color:var(--mute)}
.meta b{color:var(--ink);font-weight:500}
.product .links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.media{position:relative}
.media .frame{border:var(--rule) solid var(--line);background:var(--acc-soft);overflow:hidden;box-shadow:10px 10px 0 var(--acc)}
.media .frame img{width:100%;height:auto}
.media .caption{margin-top:14px;font-family:"DM Mono",monospace;font-size:12px;color:var(--mute);letter-spacing:.04em}
.p-lofi{--acc:var(--lofi);--acc-soft:var(--lofi-soft);--acc-ink:var(--lofi-ink)}
.p-hodl{--acc:var(--hodl);--acc-soft:var(--hodl-soft);--acc-ink:var(--hodl-ink)}
.p-solo{--acc:var(--solo);--acc-soft:var(--solo-soft);--acc-ink:var(--solo-ink)}
.p-trike{--acc:var(--trike);--acc-soft:var(--trike-soft);--acc-ink:var(--trike-ink)}
#lofi-trike{border-top:0;padding-top:0}
.solo-stage{position:relative;border:var(--rule) solid var(--line);padding:32px 28px;display:grid;place-items:center;isolation:isolate;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%,rgba(102,68,236,.75),rgba(102,68,236,0) 70%),
    radial-gradient(ellipse 40% 30% at 85% 10%,rgba(0,255,163,.22),transparent 70%),
    #0a0a0f;
  box-shadow:10px 10px 0 #6644ec}
.solo-stage .phone{box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.solo-stage .icon{width:96px;height:96px;border-radius:22px;border:3px solid var(--line);overflow:hidden;background:#a9d3f0}
.solo-stage .phone{border:3px solid var(--line);border-radius:26px;overflow:hidden;background:#fff;width:min(100%,180px)}
.solo-stage .phone img{width:100%;height:auto}
.note{font-size:13px;color:var(--mute);margin-top:12px}
.fee{font-size:13px;line-height:1.7;color:var(--mute);margin-top:12px}.svc .fee p{margin:0 0 2px;font-size:13px;color:var(--mute);max-width:none}.svc .fee p.fee-h{color:var(--ink);font-weight:700}.fee-hi{color:var(--mute-2)}.svc .fee p:not(.fee-h)::before{content:"→";font-family:"DM Mono",monospace;color:var(--svc);margin-right:8px}
@media (max-width:820px){
  .product .grid{grid-template-columns:1fr}
  .product.flip .grid > .media{order:0}
  .feat{grid-template-columns:1fr}
  .media .frame{box-shadow:6px 6px 0 var(--acc)}
}

/* services */
.services{background:var(--ink);color:var(--paper);--line:var(--paper);--mute:var(--mute-2)}
.services .eyebrow{color:var(--mute-2)}
.services .section-head p{color:var(--mute-2)}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);border:var(--rule) solid var(--paper)}
.svc{padding:clamp(24px,3vw,40px);border-right:var(--rule) solid var(--paper);border-bottom:var(--rule) solid var(--paper);display:flex;flex-direction:column;gap:18px}
.svc:nth-child(2n){border-right:0}
.svc:nth-last-child(-n+2){border-bottom:0}
.svc .no{font-family:"Unbounded",sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--mute-2)}
.svc h3{font-size:clamp(24px,2.6vw,34px);font-weight:900;line-height:1.15}
.svc h3 span{display:block;font-family:"Unbounded",sans-serif;font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--mute-2);margin-top:6px;text-transform:uppercase}
.svc p{color:#e6e3dc;font-size:15.5px;max-width:30em}
:root[data-theme="dark"] .svc p{color:#2b2a27}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .svc p{color:#2b2a27}}
.svc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.svc li{display:flex;gap:10px;align-items:flex-start}
.svc li::before{content:"→";font-family:"DM Mono",monospace;flex:none;color:var(--svc)}
.svc .price{margin-top:auto;padding-top:16px;border-top:1px solid var(--mute-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:"DM Mono",monospace;font-size:13px;color:var(--mute-2)}
.svc .price b{color:var(--paper);font-weight:500}
.svc.s1{--svc:var(--hodl)} .svc.s2{--svc:var(--solo)} .svc.s3{--svc:#5ad1a8} .svc.s4{--svc:var(--lofi)}
.svc .stripe{height:8px;background:var(--svc);margin:-1px 0 4px}
@media (max-width:820px){
  .svc-grid{grid-template-columns:1fr}
  .svc{border-right:0}
  .svc:nth-last-child(-n+2){border-bottom:var(--rule) solid var(--paper)}
  .svc:last-child{border-bottom:0}
}

/* how we work */
.how{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:var(--rule) solid var(--line)}
.how div{padding:24px 24px 24px 0;border-right:1px solid var(--mute-2)}
.how div:not(:first-child){padding-left:24px}
.how div:last-child{border-right:0}
.how b{display:block;font-family:"Unbounded",sans-serif;font-weight:700;font-size:15px;margin-bottom:8px}
.how p{font-size:14.5px;color:var(--mute)}
@media (max-width:1000px){.how{grid-template-columns:1fr 1fr}.how div{border-right:0;border-bottom:1px solid var(--mute-2);padding-left:0}.how div:nth-child(odd){border-right:1px solid var(--mute-2)}.how div:nth-child(even){padding-left:24px}.how div:last-child{border-bottom:0}}

/* timeline river */
.river{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.river::before{content:"";position:absolute;left:0;right:0;top:7px;height:3px;background:linear-gradient(90deg,var(--lofi),var(--solo),var(--hodl),#5ad1a8,var(--trike));border-radius:3px}
.river li{position:relative;padding:36px 20px 0 0;display:flex;flex-direction:column}
.river li::before{content:"";position:absolute;top:0;left:0;width:17px;height:17px;border-radius:50%;background:var(--paper);border:3px solid var(--c)}
.river .when{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.08em;color:var(--c);font-weight:700}
.river b{font-family:"Unbounded","Noto Sans TC",sans-serif;font-weight:700;font-size:15px;margin:6px 0 8px}
.river p{font-size:14px;color:var(--mute);margin:0}
@media (max-width:900px){
  .river{grid-template-columns:1fr;padding-left:28px}
  .river::before{left:7px;right:auto;top:0;bottom:0;width:3px;height:auto;background:linear-gradient(180deg,var(--lofi),var(--solo),var(--hodl),#5ad1a8,var(--trike))}
  .river li{padding:0 0 32px 0}
  .river li::before{left:-28px;top:2px}
  }

/* AI summary — collapsed accordion */
.ai{padding:16px 0 clamp(40px,5vw,64px)}
.ai details{border:1.5px solid var(--mute-2);border-radius:10px;background:var(--paper)}
.ai summary{cursor:pointer;padding:14px 18px;font-family:"DM Mono",monospace;font-size:13.5px;letter-spacing:.04em;color:var(--mute);display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none}
.ai summary:hover{color:var(--ink)}
.ai summary code{font-family:inherit;padding:1px 6px;border:1px solid var(--mute-2);border-radius:6px}
.ai summary::-webkit-details-marker{display:none}
.ai summary::after{content:"+";font-family:"Unbounded",sans-serif;font-size:18px;color:var(--ink)}
.ai details[open] summary::after{content:"−"}
.ai .llms-body{border-top:1.5px solid var(--mute-2)}
.ai .llms-note{margin:0;padding:14px 18px;font-size:13.5px;color:var(--mute)}
.ai .llms-note a{color:var(--ink)}
.ai .llms-open{display:inline-block;margin-left:10px;font-family:"DM Mono",monospace;font-size:12.5px;font-weight:700}
.ai pre{margin:0;padding:18px;border-top:1.5px solid var(--mute-2);white-space:pre-wrap;font-family:"DM Mono",monospace;font-size:13px;line-height:1.75;color:var(--ink);overflow-x:auto}

/* contact */
.contact{padding:clamp(64px,8vw,120px) 0}
.contact h2{font-size:clamp(36px,6vw,84px)}
.contact .row{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-top:36px}
.contact dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:15.5px}
.contact dt{color:var(--mute);font-family:"DM Mono",monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding-top:4px}
.contact dd{margin:0}
@media (min-width:600px){.contact dd{white-space:nowrap}}
.contact .row>div{min-width:0}.contact dd,.contact .btn{overflow-wrap:anywhere}
@media (max-width:820px){.contact .row{grid-template-columns:1fr}}
/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.faq details{border:2px solid var(--mute-2);border-radius:14px;background:var(--paper)}
.faq details[open]{border-color:var(--ink)}
.faq summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;font-size:16px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Unbounded",sans-serif;font-size:18px;flex:none;line-height:1.2}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 18px 18px;font-size:15px;color:var(--ink)}
.faq .a p{margin:0}
.faq .a p+p{margin-top:8px}
@media (max-width:820px){.faq{grid-template-columns:1fr}}
footer{border-top:var(--rule) solid var(--line);padding:22px 0;font-size:13px;color:var(--mute);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer .llms-btn{font-family:"DM Mono",monospace;font-size:12px;color:var(--mute);text-decoration:none;border:1px solid var(--mute-2);border-radius:999px;padding:4px 12px}footer .llms-btn:hover{color:var(--ink);border-color:var(--ink)}

/* ───────────── i18n: language switcher ───────────── */
.top .right{display:flex;align-items:center;gap:12px}
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:8px 12px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;line-height:1}
.lang-btn:hover{box-shadow:3px 3px 0 var(--lofi);transform:translate(-1px,-1px)}
.lang-btn svg{width:18px;height:18px;flex:none}
.lang-btn .cur{font-family:"DM Mono",monospace;font-size:12.5px;letter-spacing:.06em}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:180px;margin:0;padding:6px;list-style:none;background:var(--paper);color:var(--ink);border:var(--rule) solid var(--line);box-shadow:6px 6px 0 var(--lofi);z-index:30}
.lang-menu[hidden]{display:none}
.lang-menu a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;text-decoration:none;font-weight:500;font-size:15px}
.lang-menu a:hover,.lang-menu a:focus-visible{background:var(--paper-2)}
.lang-menu a[aria-current="true"]{font-weight:700}
.lang-menu a[aria-current="true"]::after{content:"✓";font-family:"DM Mono",monospace}
.lang-menu .native{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase}
@media (max-width:480px){.lang-btn .cur{display:none}.lang-btn{padding:8px}}

/* ───────────── i18n: non-intrusive geo banner (never redirects) ───────────── */
.geo{position:sticky;top:calc(64px + var(--rule));z-index:19;background:var(--lofi);color:#fff;border-bottom:var(--rule) solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:10px clamp(16px,4vw,48px);font-size:14.5px;
  animation:geo-in .45s cubic-bezier(.2,.8,.2,1) both}
.geo[hidden]{display:none}
.geo a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.geo button{background:transparent;border:0;color:#fff;font:inherit;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;opacity:.85}
.geo button:hover{opacity:1}
@keyframes geo-in{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

/* ───────────── global / cross-border section ───────────── */
.global{background:var(--paper-2)}
.global-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:var(--rule) solid var(--line);background:var(--paper)}
.global-grid article{padding:clamp(24px,3vw,40px);border-right:var(--rule) solid var(--line);display:flex;flex-direction:column;gap:14px}
.global-grid article:last-child{border-right:0}
.global-grid .glyph{font-size:34px;line-height:1}
.global-grid h3{font-size:clamp(20px,2vw,26px);font-weight:900;line-height:1.2}
.global-grid h3 span{display:block;font-family:"DM Mono",monospace;font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;margin-top:6px}
.global-grid p{font-size:15.5px;color:var(--ink)}
.global-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.global-grid li{display:flex;gap:10px;align-items:flex-start}
.global-grid li::before{content:"→";font-family:"DM Mono",monospace;flex:none;color:var(--g)}
.global-grid .g1{--g:var(--lofi)} .global-grid .g2{--g:#2a9d6f} .global-grid .g3{--g:var(--hodl)}
.global-grid .stripe{height:8px;background:var(--g);margin:-1px 0 4px}
.global-grid .more{margin-top:auto;padding-top:14px}
@media (max-width:900px){.global-grid{grid-template-columns:1fr}.global-grid article{border-right:0;border-bottom:var(--rule) solid var(--line)}.global-grid article:last-child{border-bottom:0}}

/* ───────────── cross-document View Transitions (progressive enhancement) ───────────── */
@view-transition{navigation:auto}
.brand img{view-transition-name:brand-logo}
.hero h1{view-transition-name:hero-title}
.mark img{view-transition-name:hero-mark}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(hero-title),::view-transition-new(hero-title){animation-duration:.5s}
@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ───────────── English-page typography & header fit ───────────── */
.nav a{white-space:nowrap}
.top .btn{white-space:nowrap}
html[lang="en"] body{font-family:"Noto Sans TC","Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
html[lang="en"] .hero h1{font-size:clamp(34px,4.9vw,66px);text-wrap:balance}
html[lang="en"] .hero h1 em{transform:rotate(-1.2deg)}
html[lang="en"] .section-head h2{font-size:clamp(30px,4vw,54px)}
html[lang="en"] #services-h{font-size:clamp(26px,3.3vw,46px)}
html[lang="en"] .contact h2{font-size:clamp(34px,5.4vw,76px)}
html[lang="en"] .product h3{font-size:clamp(32px,4.2vw,58px)}
.lang-btn .cur,.lang-menu a,.lang-menu .native{white-space:nowrap}
.lang-menu{min-width:220px}

/* ───────────── header fit (2026-10-20): never let brand / nav / buttons overlap ───────────── */
.top .wrap{gap:16px}
.brand{flex:none}
.brand img{flex:none}
.nav{flex:0 1 auto;min-width:0;gap:clamp(12px,1.6vw,24px);justify-content:center}
.nav a{font-size:14.5px}
.top .right{flex:none;gap:10px}
.top .btn{padding:10px 16px;font-size:14px}
@media (max-width:1240px){.lang-btn .cur{display:none}.lang-btn{padding:8px}}
@media (max-width:1100px){.nav{display:none}html[lang="en"] .nav{display:none}}
@media (max-width:480px){.brand{font-size:0;gap:0}.top .btn{padding:9px 12px;font-size:13px}.top .wrap{gap:8px}}
.geo{flex-wrap:nowrap;justify-content:center;gap:10px}
.geo>span{flex:0 1 auto;min-width:0;text-align:center;line-height:1.45}
.geo button{flex:none;padding:0 8px}
@media (max-width:480px){.geo{font-size:13.5px;padding:9px 12px;justify-content:space-between}.geo>span{text-align:left}}

/* ───────────── EN page display font: Bricolage Grotesque (poster weight, modern, no wobble) ───────────── */
html[lang="en"] .display,
html[lang="en"] .brand,
html[lang="en"] .stats b,
html[lang="en"] .marquee span,
html[lang="en"] .svc .no,
html[lang="en"] .svc h3 span,
html[lang="en"] .how b,
html[lang="en"] .river b,
html[lang="en"] .ai summary::after,
html[lang="en"] .faq summary::after{font-family:"Bricolage Grotesque","Archivo Black","Helvetica Neue",Arial,sans-serif}
html[lang="en"] .display{font-weight:800;letter-spacing:-.025em;line-height:1.02;font-variation-settings:"opsz" 96}
html[lang="en"] .hero h1{font-size:clamp(38px,5.6vw,80px)}
html[lang="en"] .hero h1 em{transform:rotate(-1deg);padding:0 .14em}
html[lang="en"] .section-head h2{font-size:clamp(32px,4.4vw,60px)}
html[lang="en"] #services-h{font-size:clamp(28px,3.6vw,50px)}
html[lang="en"] .product h3{font-size:clamp(34px,4.6vw,62px)}
html[lang="en"] .contact h2{font-size:clamp(36px,5.8vw,82px)}
html[lang="en"] .brand{font-weight:800;letter-spacing:.01em}
html[lang="en"] .stats b{font-weight:800}
html[lang="en"] .global-grid h3,html[lang="en"] .svc h3{font-family:"Bricolage Grotesque","Noto Sans TC",sans-serif;font-weight:800;letter-spacing:-.01em}

/* Me Season stage: garden illustration from meseason.app behind the phone */

/* Me Season stage: plain black background (2026-10-20, garden art removed) */
.solo-stage{background:#000;box-shadow:10px 10px 0 #6644ec}
.solo-stage::after{content:none}