/* base: tokens, light/dark, layout, nav, home page */
:root{
  --paper:#FAFAF7; --paper-2:#F0F2EC; --ink:#15202B; --ink-2:#4A5560; --rule:#D9DDD6;
  --accent:#2B4ACB; --accent-soft:#E4E8FA; --before:#B8BEC6; --card:#FFFFFF;
  --cjk:"PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Heiti TC";
  --display:"Plus Jakarta Sans", "Segoe UI", var(--cjk), system-ui, sans-serif;
  --body:"Inter", "Segoe UI", var(--cjk), system-ui, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12181F; --paper-2:#1A222B; --ink:#EEF0EC; --ink-2:#A9B2BB; --rule:#2C3640;
    --accent:#8FA3FF; --accent-soft:#222C4D; --before:#56606B; --card:#1A222B;
  }
}
:root[data-theme="dark"]{
  --paper:#12181F; --paper-2:#1A222B; --ink:#EEF0EC; --ink-2:#A9B2BB; --rule:#2C3640;
  --accent:#8FA3FF; --accent-soft:#222C4D; --before:#56606B; --card:#1A222B;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px); scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-0.02em; line-height:1.15; margin:0}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{font-family:var(--display); font-weight:700; font-size:22px; text-decoration:none}
.brand span{color:var(--ink-2); font-weight:450}
.nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0}
.nav a.l{text-decoration:none; color:var(--ink-2); font-size:16px}
.nav a.l:hover{color:var(--ink)}
.nav ul{margin-left:auto}
.brand,.nav a.l{white-space:nowrap}
.tools{display:flex; align-items:center; gap:8px; margin-left:24px; flex-shrink:0}
.tools button{all:unset; box-sizing:border-box; white-space:nowrap; cursor:pointer; display:inline-grid; place-items:center; height:36px; min-width:36px; padding:0 10px; border:1px solid var(--rule); border-radius:999px; color:var(--ink-2); font-size:14px; font-weight:600; transition:color .2s, border-color .2s, background .2s}
.tools button:hover{color:var(--ink); border-color:var(--ink-2)}
.tools button:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.theme-btn{padding:0}
.theme-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.theme-btn .i-moon{fill:currentColor; stroke:none}
.theme-btn[data-mode="dark"] .i-moon,.theme-btn:not([data-mode="dark"]) .i-sun{display:none}
html.lang-pending body>*{visibility:hidden}
@media (max-width:560px){
  .brand span{display:none}
  .nav .wrap{gap:12px; padding:0 18px}
  .nav .wrap ul{gap:12px}
  .tools{margin-left:4px; gap:6px}
  .tools button{height:32px; min-width:32px; padding:0 8px; font-size:13px}
  .theme-btn{padding:0}
}

/* hero */
.hero{padding-top:72px; padding-bottom:56px}
.hero h1{font-size:clamp(40px, 6vw, 80px); max-width:16ch; font-weight:700}
.hero p.lead{font-size:clamp(19px,2vw,23px); color:var(--ink-2); max-width:40ch; margin:28px 0 0}
.hero .who{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:44px; font-size:16px; color:var(--ink-2)}
.hero .who b{color:var(--ink); font-weight:600}

section.block{padding:88px 0; border-top:1px solid var(--rule)}
.sec-title{display:flex; flex-direction:column; gap:8px; margin-bottom:40px}
.sec-title h2{font-size:clamp(30px,3.6vw,44px)}
.sec-title p{margin:0; color:var(--ink-2); max-width:56ch}
.kicker{font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}

/* work */
.feature{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; text-decoration:none; padding:32px; margin:0; border:1px solid var(--rule); background:var(--card); border-radius:20px; transition:border-color .2s, box-shadow .2s, transform .2s}
.feature:hover{border-color:var(--accent); box-shadow:0 20px 40px -28px rgba(21,32,43,.35); transform:translateY(-2px)}
.feature img{border-radius:12px; aspect-ratio:16/9; object-fit:cover; width:100%; box-shadow:0 1px 0 var(--rule), 0 24px 48px -28px rgba(21,32,43,.45)}
.feature h3{font-size:clamp(30px,3.4vw,44px); margin:10px 0 14px}
.feature p{margin:0 0 20px; color:var(--ink-2)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:0; list-style:none}
.tags li{font-size:14px; padding:5px 12px; border-radius:999px; background:var(--accent-soft); color:var(--ink)}
.stat-line{display:flex; align-items:baseline; gap:14px; border-top:1px solid var(--rule); padding-top:18px}
.stat-line strong{font-family:var(--display); font-size:40px; color:var(--accent); font-weight:700; line-height:1}
.stat-line span{font-size:15px; color:var(--ink-2)}
.btn{display:inline-block; margin-top:22px; font-weight:600; font-size:16px; color:var(--accent); text-decoration:underline; text-underline-offset:4px}
.soon{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px}
.soon div{border:1.5px dashed var(--rule); border-radius:16px; padding:28px; color:var(--ink-2); font-size:16px}
.soon b{display:block; font-family:var(--display); font-size:22px; color:var(--ink); margin-bottom:6px}

/* about */
.about{display:grid; grid-template-columns:1.1fr 1fr; gap:56px}
.about p{margin:0 0 18px; max-width:58ch}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--rule)}
.facts div{padding:22px 0; border-bottom:1px solid var(--rule)}
.facts div:nth-child(odd){padding-right:20px}
.facts strong{display:block; font-family:var(--display); font-size:36px; line-height:1.1; font-weight:700}
.facts span{font-size:15px; color:var(--ink-2)}

/* process */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(7,1fr); border-top:2px solid var(--ink)}
.steps li{padding:18px 14px 0 0; position:relative}
.steps li::before{content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--ink)}
.steps li:last-child::before{background:var(--accent); border-color:var(--accent)}
.steps b{display:block; font-family:var(--display); font-size:20px; margin:8px 0 4px}
.steps small{display:block; font-size:12px; color:var(--ink-2)}
.steps span{font-size:15px; color:var(--ink-2); line-height:1.45; display:block}
.frames{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px}
.frames div{background:var(--paper-2); border-radius:16px; padding:26px 28px}
.frames h3{font-size:20px; margin-bottom:8px}
.frames p{margin:0; color:var(--ink-2); font-size:16px}

/* contact */
.contact{padding:110px 0 120px; border-top:1px solid var(--rule)}
.contact h2{font-size:clamp(40px,6vw,80px); max-width:16ch}
.contact .links{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.contact .links a{padding:12px 22px; border:1.5px solid var(--ink); border-radius:999px; text-decoration:none; font-weight:600; font-size:16px}
.contact .links a:first-child{background:var(--ink); color:var(--paper)}
footer{padding:28px 0 40px; font-size:14px; color:var(--ink-2)}


/* home: hero, photo, journey line, numbers */
.hi-kick{font-size:16px; font-weight:600; color:var(--accent); margin:0 0 14px}
.hero .lead{max-width:62ch}
.lead2{font-size:18px; color:var(--ink-2); max-width:64ch; margin:40px 0 0}
.journey{margin-top:36px}
.j-hint{font-size:14px; color:var(--ink-2); margin:0 0 18px}
.path{display:grid; grid-template-columns:repeat(5,1fr); position:relative}
.path button{all:unset; box-sizing:border-box; cursor:pointer; position:relative; padding:28px 16px 12px 0; border-radius:8px; transition:transform .2s}
.path button::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--rule); transition:background .3s}
.path button.done::before{background:var(--accent)}
.path button:last-child::before{right:auto; width:0}
.path button::after{content:""; position:absolute; top:-7px; left:0; width:14px; height:14px; border-radius:50%; background:var(--paper); border:2px solid var(--ink-2); transition:all .25s}
.path button.done::after{border-color:var(--accent)}
.path button[aria-selected="true"]::after{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 7px var(--accent-soft); transform:scale(1.15)}
.path button:hover{transform:translateY(-2px)}
.path button:focus-visible{outline:3px solid var(--accent); outline-offset:4px}
.path b{display:block; font-family:var(--display); font-size:19px; line-height:1.2; color:var(--ink-2); transition:color .2s}
.path button[aria-selected="true"] b,.path button.done b{color:var(--ink)}
.path span{font-size:14px; color:var(--ink-2)}
.j-story{margin:18px 0 0; min-height:3.4em; font-size:clamp(18px,1.9vw,22px); max-width:60ch; padding:18px 22px; border-left:4px solid var(--accent); background:var(--accent-soft); border-radius:0 12px 12px 0; animation:jin .35s ease}
@keyframes jin{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (max-width:900px){
  .path{grid-template-columns:1fr; padding-left:24px}
  .path button{padding:2px 0 20px 0}
  .path button::before{top:8px; bottom:-8px; left:-18px; right:auto; width:3px; height:auto}
  .path button:last-child::before{display:none}
  .path button::after{top:2px; left:-24px}
}
.path{list-style:none; padding:0; margin:40px 0 0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative}
.path li{position:relative; padding:26px 16px 0 0}
.path li::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--rule)}
.path li::after{content:""; position:absolute; top:-6px; left:0; width:14px; height:14px; border-radius:50%; background:var(--paper); border:2px solid var(--ink-2)}
.path li.now::after{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 6px var(--accent-soft)}
.path li.now::before{background:none}
.path b{display:block; font-family:var(--display); font-size:19px; line-height:1.2}
.path span{font-size:14px; color:var(--ink-2)}
.nums{display:flex; flex-wrap:wrap; gap:16px 56px; margin-top:40px; padding-top:28px; border-top:1px solid var(--rule)}
.nums strong{display:block; font-family:var(--display); font-size:clamp(34px,4vw,48px); line-height:1; font-weight:700; color:var(--accent)}
.nums span{font-size:15px; color:var(--ink-2)}
@media (max-width:900px){
  .path{grid-template-columns:1fr; padding-left:22px}
  .path li{padding:0 0 22px 0}
  .path li::before{top:0; bottom:0; left:-16px; right:auto; width:2px; height:auto}
  .path li::after{top:4px; left:-22px}
}

.hero-top{display:grid; grid-template-columns:1fr 380px; gap:64px; align-items:center}
.hero-text .lead2{margin-top:24px}
.me{margin:0; position:relative; animation:meIn .9s cubic-bezier(.2,.7,.2,1) both}
.me::before{content:""; position:absolute; inset:28px -18px -18px 28px; border-radius:200px 200px 28px 28px; background:var(--accent-soft); z-index:0}
.me-frame{position:relative; z-index:1; border-radius:200px 200px 28px 28px; overflow:hidden; aspect-ratio:4/5; background:#E6F0F8; box-shadow:0 30px 60px -34px rgba(21,32,43,.45)}
.me-frame img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.me:hover .me-frame img{transform:scale(1.035)}
.me figcaption{position:absolute; z-index:2; left:-22px; bottom:36px; display:flex; align-items:center; gap:10px; background:var(--card); color:var(--ink); font-size:15px; font-weight:600; padding:10px 18px; border-radius:999px; box-shadow:0 12px 30px -14px rgba(21,32,43,.4); animation:meIn .9s .35s cubic-bezier(.2,.7,.2,1) both}
.me .dot{width:9px; height:9px; border-radius:50%; background:#2FB36B; box-shadow:0 0 0 4px rgba(47,179,107,.18)}
@keyframes meIn{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.hero .journey{margin-top:64px}
@media (max-width:900px){
  .hero-top{grid-template-columns:1fr; gap:40px}
  .me{order:-1; width:min(260px,70%)}
  .me figcaption{left:auto; right:-12px; bottom:20px; font-size:14px}
}