@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

:root{
  --bg:#FBF7EF; --bg-2:#F4EBDC; --surface:#FFFFFF;
  --ink:#241F19; --ink-2:#5B544A; --ink-3:#938A7B;
  --line:#E9DFCE; --line-2:#DCCFB8;
  --accent:#C2622B; --accent-deep:#A24E1E;
  --accent-2:#2E6A53;
  --gold:#C2962E;
  --dark:#231E18; --dark-2:#2C261E;
  --on-dark:#F2EAD9; --on-dark-2:#B9AD98;
  --radius:14px; --radius-lg:26px;
  --maxw:1140px;
  --shadow:0 1px 2px rgba(70,45,20,.05), 0 12px 30px rgba(90,60,25,.07);
  --shadow-lg:0 2px 10px rgba(70,45,20,.06), 0 34px 64px rgba(90,60,25,.13);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Noto Sans TC','Inter',system-ui,sans-serif;
  font-size:17px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.fr{font-family:'Fraunces',Georgia,serif; font-variant-numeric:tabular-nums lining-nums;}
h1,h2,h3{font-family:'Inter','Noto Sans TC',system-ui,sans-serif; font-weight:800; line-height:1.24; letter-spacing:-.01em; margin:0;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* —— bilingual —— */
html[data-lang="zh"] [data-l="en"]{display:none !important;}
html[data-lang="en"] [data-l="zh"]{display:none !important;}

/* —— buttons —— */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#fff; font-weight:600; font-family:inherit;
  padding:12px 22px; border-radius:999px; border:none; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(194,98,43,.28);
  transition:transform .15s ease, filter .15s, box-shadow .15s; font-size:15px;}
.btn:hover{transform:translateY(-2px); filter:brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 12px 24px rgba(194,98,43,.34);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-lg{padding:15px 30px; font-size:17px;}
.btn-sm{padding:9px 18px; font-size:14px;}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:none; border:1.5px solid var(--line-2);}
.btn-ghost:hover{background:rgba(36,31,25,.04); box-shadow:none; filter:none;}

/* —— nav —— */
.nav{position:sticky; top:0; z-index:50; transition:background .25s, box-shadow .25s, border-color .25s;
  border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(251,247,239,.92); backdrop-filter:saturate(1.3) blur(8px); border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700;}
.brand-name{font-family:'Inter','Noto Sans TC',sans-serif; font-size:20px; font-weight:800; letter-spacing:.01em;}
.brand-name em{font-style:normal; color:var(--accent);}
.brand-mark{width:22px; height:22px; border-radius:7px; flex:0 0 auto;
  background:linear-gradient(145deg,var(--accent),var(--gold)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
.nav-links{display:flex; gap:26px; margin-left:auto;}
.nav-links a{font-size:15px; color:var(--ink-2); font-weight:500; transition:color .15s;}
.nav-links a:hover{color:var(--ink);}
.nav-right{display:flex; align-items:center; gap:14px;}
.lang-toggle{background:transparent; border:1.5px solid var(--line-2); color:var(--ink-2);
  border-radius:999px; width:42px; height:34px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;}
.lang-toggle:hover{border-color:var(--accent); color:var(--accent);}
.nav-burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.nav-burger span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s;}

/* —— hero —— */
.hero{position:relative; overflow:hidden; padding:clamp(50px,8vw,100px) 0 clamp(38px,5vw,68px);}
.hero-bg{position:absolute; inset:0; z-index:0; color:var(--accent);}
.hero-arcs{position:absolute; top:-80px; right:-120px; width:680px; height:680px; max-width:none;}
.blob{position:absolute; border-radius:50%; filter:blur(34px); opacity:.5;}
.blob-a{width:360px; height:360px; left:-110px; top:-50px; background:radial-gradient(circle,#F6C99A,transparent 68%);}
.blob-b{width:320px; height:320px; right:-70px; top:120px; background:radial-gradient(circle,#A9D8C8,transparent 68%); opacity:.4;}
.blob-c{width:300px; height:300px; left:32%; bottom:-150px; background:radial-gradient(circle,#F4D9A6,transparent 68%); opacity:.38;}
.hero-inner{position:relative; z-index:1;}
.eyebrow{font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); font-weight:600; margin-bottom:22px;}
.hero-title{font-size:clamp(34px,6vw,68px); font-weight:600; letter-spacing:0; max-width:16ch;}
.hero-sub{margin-top:26px; max-width:62ch;}
.lede{font-size:clamp(17px,2vw,21px); color:var(--ink-2); line-height:1.65;}
.hero-cta{margin-top:38px; display:flex; gap:14px; flex-wrap:wrap;}

/* —— stat band —— */
.band{background:var(--ink); color:var(--on-dark);}
.band-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:34px 24px;}
.stat-num{font-size:clamp(40px,6vw,60px); font-weight:500; line-height:1; color:#fff;}
.stat-num .u{font-size:.45em; color:var(--on-dark-2); margin-left:2px;}
.stat-cap{margin-top:10px; color:var(--on-dark-2); font-size:15px;}

/* —— sections —— */
.sec{padding:clamp(44px,6vw,82px) 0;}
.sec-alt{background:var(--bg-2);}
.kicker{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:18px;}
.sec-title{font-size:clamp(26px,3.6vw,40px); max-width:20ch;}
.sec-lede{margin-top:22px; max-width:60ch; font-size:clamp(16px,1.6vw,19px); color:var(--ink-2);}
.note{margin-top:30px; font-size:15px; color:var(--ink-2); border-left:3px solid var(--accent); padding:6px 0 6px 16px; max-width:64ch;}

/* —— cards-3 —— */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 28px; box-shadow:var(--shadow);}
.card-no{font-family:'Fraunces',serif; font-size:15px; color:var(--accent); font-weight:600; letter-spacing:.08em; margin-bottom:14px;}
.card h3{font-size:21px; margin-bottom:10px;}
.card p{color:var(--ink-2); font-size:15.5px;}

/* —— layers —— */
.layers{margin-top:48px; display:flex; flex-direction:column; gap:16px;}
.layer{display:flex; gap:24px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:28px 30px; box-shadow:var(--shadow);}
.layer-tag{font-family:'Fraunces',serif; font-weight:600; font-size:20px; color:#fff; background:var(--accent-2);
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.layer:nth-child(2) .layer-tag{background:var(--accent);}
.layer:nth-child(3) .layer-tag{background:var(--gold);}
.layer h3{font-size:21px; margin-bottom:8px;}
.layer p{color:var(--ink-2); font-size:16px;}

/* —— product —— */
.product-grid,.sixp-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center;}
.ticks{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:18px;}
.ticks li{position:relative; padding-left:34px; color:var(--ink-2); font-size:16px;}
.ticks li::before{content:""; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:50%;
  background:var(--accent-2); box-shadow:inset 0 0 0 6px rgba(255,255,255,.85), 0 0 0 1px var(--accent-2);}
.ticks b{color:var(--ink); font-weight:700;}
.mock{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden;}
.mock-bar{display:flex; gap:7px; padding:14px 16px; border-bottom:1px solid var(--line); background:#FCFAF5;}
.mock-bar span{width:11px; height:11px; border-radius:50%; background:var(--line-2);}
.mock-body{padding:22px;}
.mock-kpis{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.kpi{background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
.kpi-n{font-size:38px; font-weight:500; color:var(--accent); line-height:1;}
.kpi-n i{font-style:normal; font-size:.5em; color:var(--ink-3); margin-left:2px;}
.kpi-l{margin-top:6px; font-size:13px; color:var(--ink-3);}
.mock-chart{margin-top:18px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px;}
.mock-chart svg{width:100%; height:96px;}
.mock-rows{margin-top:16px; display:flex; flex-direction:column; gap:10px;}
.mock-rows span{height:12px; border-radius:6px; background:var(--bg-2);}
.mock-rows span:nth-child(1){width:90%;} .mock-rows span:nth-child(2){width:72%;} .mock-rows span:nth-child(3){width:80%;}

/* —— six powers —— */
.sixp-legend{margin-top:26px; display:flex; flex-direction:column; gap:14px;}
.sixp-legend p{font-size:15.5px; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start;}
.sixp-legend b{color:var(--ink);}
.dot{width:13px; height:13px; border-radius:50%; flex:0 0 auto; margin-top:6px;}
.dot-fn{background:var(--accent-2);}
.dot-ps{background:var(--surface); border:2px solid var(--ink-3);}
.radar{width:100%; height:auto;}

/* —— tech (dark) —— */
.sec-dark{background:var(--dark); color:var(--on-dark);}
.sec-dark .kicker{color:var(--gold);}
.sec-dark .sec-title{color:#fff;}
.pipeline{margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.node{background:var(--dark-2); border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:24px 22px; position:relative;}
.node-id{font-family:'Fraunces',serif; font-size:14px; color:var(--gold); font-weight:600; letter-spacing:.1em;}
.node b{display:block; margin:12px 0 6px; font-size:18px; color:#fff; font-family:inherit; font-weight:700;}
.node p{color:var(--on-dark-2); font-size:14px;}
.tech-cards{margin-top:24px;}
.card-d{background:var(--dark-2); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-lg); padding:28px 26px;}
.card-d h3{font-size:19px; color:#fff; margin-bottom:10px;}
.card-d p{color:var(--on-dark-2); font-size:15px;}
.note-d{color:var(--on-dark-2); border-left-color:var(--gold);}

/* —— audiences —— */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.aud{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px 34px; box-shadow:var(--shadow);}
.aud h3{font-size:23px; margin-bottom:12px;}
.aud p{color:var(--ink-2); font-size:16px; margin-bottom:20px;}
.link-arrow{color:var(--accent); font-weight:600; font-size:15.5px;}
.link-arrow:hover{color:var(--accent-deep);}

/* —— team —— */
.team{align-items:stretch;}
.team .member{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 26px; box-shadow:var(--shadow); text-align:center; display:flex; flex-direction:column;}
.avatar{width:120px; height:120px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); font-size:12px; font-weight:600; text-align:center; line-height:1.3;
  background:var(--bg-2); border:2px dashed var(--line-2); overflow:hidden; flex:0 0 auto;}
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.member h3{font-size:20px;}
.member .rom{display:block; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink-3); font-weight:500; margin-top:3px; letter-spacing:.02em;}
.member .role{color:var(--accent); font-weight:700; font-size:12px; letter-spacing:.12em; margin:12px 0 6px;}
.member .focus{color:var(--ink); font-weight:600; font-size:14.5px; margin-bottom:10px;}
.member .bio{color:var(--ink-2); font-size:14.5px; text-align:left;}
.member .skills{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:7px; justify-content:center;}
.member .skills span{font-size:12px; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:4px 11px;}

/* —— cta —— */
.sec-cta{background:linear-gradient(160deg,#C85B2A,#A23218); color:#fff; text-align:center;}
.cta-inner h2{font-size:clamp(26px,3.6vw,40px); color:#fff;}
.cta-inner p{margin:18px auto 32px; max-width:48ch; color:rgba(255,255,255,.88); font-size:18px;}
.sec-cta .btn{background:#fff; color:var(--accent-deep); box-shadow:0 10px 30px rgba(0,0,0,.18);}
.sec-cta .btn:hover{filter:none; background:#FFF8EF;}

/* —— footer —— */
.footer{background:var(--dark); color:var(--on-dark-2); padding:56px 0 40px;}
.footer-inner{display:grid; grid-template-columns:1fr 1.4fr auto; gap:28px; align-items:start;}
.footer .brand-name{color:#fff;} .footer .brand-name em{color:var(--gold);}
.foot-co{margin-top:10px; font-size:14px; color:var(--on-dark-2);}
.disclaimer{font-size:13px; line-height:1.7; color:var(--on-dark-2); max-width:60ch;}
.copy{font-size:13px; color:var(--on-dark-2); white-space:nowrap;}

/* —— reveal —— */
html.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);}
html.js .reveal.is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important; transform:none !important; transition:none !important;} html{scroll-behavior:auto;}}

/* —— active nav —— */
.nav-links a.active{color:var(--ink); font-weight:700;}
.nav-links a.active::after{content:""; display:block; height:2px; background:var(--accent); border-radius:2px; margin-top:3px;}

/* —— sub-page hero —— */
.page-hero{position:relative; overflow:hidden; padding:clamp(40px,5.5vw,72px) 0 clamp(28px,3.5vw,48px); background:var(--bg-2); border-bottom:1px solid var(--line);}
.page-hero .blob{opacity:.35;}
.page-hero h1{font-size:clamp(30px,4.6vw,52px); max-width:18ch; position:relative;}
.page-hero .lede{margin-top:18px; max-width:60ch; position:relative;}

/* —— placeholders (fill-me-in) —— */
.ph{position:relative; border:2px dashed var(--line-2); border-radius:var(--radius); background:
  repeating-linear-gradient(135deg, rgba(194,98,43,.04) 0 12px, transparent 12px 24px), var(--bg-2);
  display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink-3);
  font-size:13px; font-weight:600; padding:18px; min-height:120px;}
.ph::before{content:"⊕"; position:absolute; top:10px; left:12px; font-size:14px; color:var(--line-2);}
.ph-16x9{aspect-ratio:16/9;} .ph-4x3{aspect-ratio:4/3;} .ph-sq{aspect-ratio:1/1;}
.ph-tag{display:inline-block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px 10px; margin-bottom:6px;}

/* —— prose (about) —— */
.prose p{color:var(--ink-2); font-size:17px; line-height:1.8; margin-top:18px; max-width:64ch;}
.prose p b{color:var(--ink);}
.lead-q{font-size:clamp(20px,2.6vw,30px); line-height:1.5; color:var(--ink); font-weight:600; max-width:24ch; font-family:'Inter','Noto Sans TC',sans-serif;}

/* —— partners strip —— */
.partners{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px;}
.partners .ph{min-height:84px; border-radius:12px;}

/* —— contact —— */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px;}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 28px; box-shadow:var(--shadow);}
.contact-card h3{font-size:18px; margin-bottom:14px;}
.contact-row{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15.5px;}
.contact-row:last-child{border-bottom:none;}
.contact-row .k{color:var(--ink-3); width:90px; flex:0 0 auto;}
.contact-row .v{color:var(--ink); font-weight:500;}
.ph-inline{color:var(--accent); background:rgba(194,98,43,.08); border:1px dashed var(--line-2); border-radius:6px; padding:1px 8px; font-size:13px; font-weight:600;}

/* —— misc —— */
.center{text-align:center;}
.btnrow{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}
.home-feature{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px;}

/* —— responsive —— */
@media (max-width:880px){
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:8px 24px 18px;}
  .nav.open .nav-links{display:flex;}
  .nav-links a{padding:12px 0; border-bottom:1px solid var(--line);}
  .nav-burger{display:flex;}
  .nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.open .nav-burger span:nth-child(2){opacity:0;}
  .nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .band-grid{grid-template-columns:1fr; gap:28px; text-align:center;}
  .cards-3,.pipeline,.two-col,.product-grid,.sixp-grid,.footer-inner,.contact-grid,.home-feature{grid-template-columns:1fr;}
  .partners{grid-template-columns:1fr 1fr;}
  .product-grid,.sixp-grid{gap:36px;}
  .sixp-visual{max-width:440px; margin:0 auto;}
  .footer-inner{gap:22px;} .copy{white-space:normal;}
}
@media (max-width:520px){
  body{font-size:16px;}
  .nav-right .btn-sm{display:none;}
  .layer{flex-direction:column; gap:14px;}
  .card,.aud,.layer{padding:24px 22px;}
}