/* ============================================================
   CRENURT 創培科技 — Design System
   Concept C｜Particle Duet 粒子協作
   ============================================================ */
:root{
  --bg:#0C0B09; --bg2:#12100C; --ink:#F2EEE4; --mut:#8E887B; --line:#2A2822;
  --acc:#E8552D; --acc-deep:#C2401C; --blue:#6E8DB0;
  --mono:'Space Mono','Noto Sans TC',monospace;
  --gro:'Archivo','Noto Sans TC',sans-serif;
  --serif:'Noto Serif TC','Instrument Serif',serif;
  --news:'Newsreader','Noto Serif TC',serif;
  --ink2:#C9C3B6; --ink3:#B9B2A4; --onacc:#140B06;
  --pad:40px;
  --maxw:1280px;
  /* 版心邊界：螢幕寬時置中於 1280px，窄時退回 --pad（百分比以元素自身容器寬度計算） */
  --gut:max(var(--pad), calc((100% - var(--maxw)) / 2));
}
/* ── 亮色模式 ─────────────────────────────── */
[data-theme="light"]{
  --bg:#F5F2EB; --bg2:#EAE6DB; --ink:#1B1813; --mut:#59544A; --line:#D5CFC0;
  --acc:#D8491F; --acc-deep:#B23A12; --blue:#3E6390;
  --ink2:#3C372E; --ink3:#49443B; --onacc:#140B06;
}
[data-theme="light"] .grain{opacity:.04;}
[data-theme="light"] .face.front{background:linear-gradient(160deg,#FFFFFF,#F0ECE4);}
[data-theme="light"] .face .orb{background:radial-gradient(circle at 35% 35%, rgba(216,73,31,.16), transparent 65%); filter:blur(10px);}
[data-theme="light"] .face .grid-deco{opacity:.55;}
[data-theme="light"] .mod.soon-card{background:repeating-linear-gradient(-45deg, var(--bg), var(--bg) 14px, #E1DCCD 14px, #E1DCCD 28px);}
[data-theme="light"] .final-sec .btn-a:hover{box-shadow:0 10px 40px rgba(0,0,0,.18);}
[data-theme="light"] .hero-mode b{color:var(--acc-deep);}
[data-theme="light"] .sec-tag .lbl, [data-theme="light"] .crumbs, [data-theme="light"] .hero-eyebrow{color:var(--ink3);}
[data-theme="light"] .map-wrap iframe{filter:saturate(.85) contrast(1.02);}
.theme-toggle{background:none; border:1px solid var(--line); color:var(--mut); width:36px; height:36px; border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:.3s; flex:none;}
.theme-toggle:hover{border-color:var(--acc); color:var(--acc);}
.theme-toggle svg{width:17px; height:17px; display:block;}
@media (max-width:900px){ .theme-toggle{width:32px; height:32px;} }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Noto Sans TC',sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased;}
::selection{background:var(--acc); color:#0C0B09;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
.mono{font-family:var(--mono);}
.accent{color:var(--acc);}
.serif{font-family:var(--serif);}

/* ---------- grain ---------- */
.grain{position:fixed; inset:-100%; width:300%; height:300%; pointer-events:none; z-index:90; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-8%)} 20%{transform:translate(-13%,3%)}
  30%{transform:translate(6%,-12%)} 40%{transform:translate(-4%,14%)} 50%{transform:translate(-12%,7%)}
  60%{transform:translate(11%,0)} 70%{transform:translate(0,10%)} 80%{transform:translate(3%,13%)} 90%{transform:translate(-8%,4%)}
}

/* ---------- nav ---------- */
nav.top{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut); color:var(--ink); border-bottom:1px solid transparent;
  transition:background-color .35s, border-color .35s, padding .35s, backdrop-filter .35s;}
nav.top.scrolled{background:rgba(12,11,9,.82); border-bottom-color:var(--line); padding-top:12px; padding-bottom:12px;
  -webkit-backdrop-filter:saturate(1.2) blur(14px); backdrop-filter:saturate(1.2) blur(14px);}
[data-theme="light"] nav.top.scrolled{background:rgba(245,242,235,.86);}
.logo-img{height:26px; width:auto; display:block;}
.wordmark{font-family:var(--gro); font-weight:900; font-size:20px; letter-spacing:.03em;}
.wordmark sup{font-size:9px; color:var(--acc);}
.nav-links{display:flex; gap:26px; font-size:13px; letter-spacing:.18em; font-weight:500;}
.nav-links a{opacity:.7; transition:opacity .25s;}
.nav-links a:hover{opacity:1;}
.cta-pill{border:1px solid var(--ink); padding:9px 22px; border-radius:999px; font-size:13px; letter-spacing:.15em; transition:.3s; display:inline-block;}
.cta-pill:hover{background:var(--ink); color:var(--bg);}
.burger{display:none; width:40px; height:40px; position:relative; cursor:pointer; background:none; border:none;}
.burger i{position:absolute; left:8px; right:8px; height:1.5px; background:var(--ink); transition:.35s;}
.burger i:nth-child(1){top:14px;} .burger i:nth-child(2){top:24px;}
.burger.open i:nth-child(1){top:19px; transform:rotate(45deg);}
.burger.open i:nth-child(2){top:19px; transform:rotate(-45deg);}

/* mobile menu */
#menu{position:fixed; inset:0; background:var(--bg); z-index:99; display:flex; flex-direction:column; justify-content:center; padding:0 32px;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s cubic-bezier(.8,0,.2,1);}
#menu.open{clip-path:inset(0 0 0 0);}
#menu a.mlink{font-family:var(--serif); font-weight:900; font-size:clamp(30px,8vw,44px); padding:12px 0; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline;}
#menu a.mlink span{font-family:var(--mono); font-weight:400; font-size:11.5px; letter-spacing:.26em; color:var(--mut);}
#menu .mfoot{margin-top:36px; font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--mut); line-height:2.2;}

/* ---------- breadcrumb ---------- */
.crumbs{position:absolute; top:88px; left:var(--gut); z-index:5; font-family:var(--mono); font-size:11.5px; letter-spacing:.24em; color:var(--mut); display:flex; gap:10px;}
.crumbs a{transition:color .25s;} .crumbs a:hover{color:var(--acc);}
.crumbs .sep{color:var(--mut);}


/* ---------- hero 3D 視差靜圖 ---------- */
.hero-3d{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.hero-3d-glow{position:absolute; width:46vw; height:26vw; max-width:760px; max-height:420px;
  left:58%; top:16%; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse, rgba(232,85,45,.26), rgba(232,85,45,.07) 45%, transparent 68%);
  filter:blur(30px); animation:glowPulseC 5s ease-in-out infinite;}
[data-theme="light"] .hero-3d-glow{background:radial-gradient(ellipse, rgba(216,73,31,.15), rgba(216,73,31,.04) 45%, transparent 68%);}
.hero-3d-img{position:absolute; right:-6vw; left:auto; top:clamp(84px,11vh,120px); width:max(72vw, 900px); max-width:none; height:auto; will-change:transform;
  animation:heroFloat 7s ease-in-out infinite;
  /* 素材左右兩端與右上角是硬切：左端與頂端用遮罩淡出，右端直接出血到畫面外 */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 16%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 16%);
  mask-composite:intersect;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.45));}
[data-theme="light"] .hero-3d-img{filter:drop-shadow(0 40px 60px rgba(80,50,30,.22));}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes glowPulseC{0%,100%{opacity:.85; transform:translateX(-50%) scale(1)}50%{opacity:1; transform:translateX(-50%) scale(1.06)}}
@media (max-width:768px){
  .hero-3d-img{width:170vw; right:-38vw; top:84px;}
  .hero-3d-glow{width:110vw; height:64vw; left:50%; top:96px;}
}
@media (prefers-reduced-motion:reduce){
  .hero-3d-img,.hero-3d-glow{animation:none;}
}

/* ---------- inner hero 3D 視差靜圖（子頁） ---------- */
.phero-3d{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.phero-3d-glow{position:absolute; border-radius:50%; filter:blur(30px);
  background:radial-gradient(ellipse, rgba(232,85,45,.26), rgba(232,85,45,.07) 45%, transparent 68%);}
[data-theme="light"] .phero-3d-glow{background:radial-gradient(ellipse, rgba(216,73,31,.15), rgba(216,73,31,.04) 45%, transparent 68%);}
.phero-3d-img{position:absolute; height:auto; will-change:transform; margin-top:36px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
  mask-composite:intersect;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.45));}
[data-theme="light"] .phero-3d-img{filter:drop-shadow(0 40px 60px rgba(80,50,30,.22));}
@keyframes pheroFloatC{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
@keyframes pheroFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes glowPulseS{0%,100%{opacity:.85; transform:scale(1)}50%{opacity:1; transform:scale(1.06)}}

/* 版位 A：置中偏上 */
.phero-3d.pos-a .phero-3d-img{left:50%; top:4%; width:min(44vw, 720px); transform:translateX(-50%); animation:pheroFloatC 7s ease-in-out infinite;}
.phero-3d.pos-a .phero-3d-glow{width:40vw; height:22vw; max-width:620px; max-height:340px; left:50%; top:9%; transform:translateX(-50%); animation:glowPulseC 5s ease-in-out infinite;}
/* 版位 A 變體：偏右置中（高構圖適用） */
.phero-3d.pos-ar .phero-3d-img{left:60%; top:5%; width:min(34vw, 540px); transform:translateX(-50%); animation:pheroFloatC 7s ease-in-out infinite;}
.phero-3d.pos-ar .phero-3d-glow{width:32vw; height:22vw; max-width:480px; max-height:330px; left:60%; top:11%; transform:translateX(-50%); animation:glowPulseC 5s ease-in-out infinite;}
/* 版位 B：右側構圖 */
.phero-3d.pos-b .phero-3d-img{right:5%; top:11%; width:min(28vw, 470px); animation:pheroFloatY 7s ease-in-out infinite;}
.phero-3d.pos-b .phero-3d-glow{width:28vw; height:24vw; max-width:420px; max-height:360px; right:8%; top:14%; animation:glowPulseS 5s ease-in-out infinite;}
/* 版位 C：左→右動勢寬幅構圖 */
.phero-3d.pos-c .phero-3d-img{left:50%; top:8%; width:min(56vw, 900px); transform:translateX(-50%); animation:pheroFloatC 7s ease-in-out infinite;}
.phero-3d.pos-c .phero-3d-glow{width:46vw; height:24vw; max-width:680px; max-height:360px; left:50%; top:12%; transform:translateX(-50%); animation:glowPulseC 5s ease-in-out infinite;}

/* 版位 C 變體：上移避開標題（光軌類構圖適用） */
.phero-3d.pos-c.up .phero-3d-img{top:1%; width:min(46vw, 760px);}
.phero-3d.pos-c.up .phero-3d-glow{top:5%;}
/* 版位 C 變體：整體偏右（避開左上麵包屑） */
.phero-3d.pos-c.rt .phero-3d-img{left:56%; top:5%;}
.phero-3d.pos-c.rt .phero-3d-glow{left:56%; top:9%;}
/* 版位 A 偏右變體：下移縮小（高構圖避開導航列） */
.phero-3d.pos-ar.low .phero-3d-img{top:10%; width:min(30vw, 480px);}
.phero-3d.pos-ar.low .phero-3d-glow{top:15%; width:28vw;}
/* 版位 A 偏右變體：再往右縮（長標題頁適用） */
.phero-3d.pos-ar.far .phero-3d-img{left:68%; top:6%; width:min(28vw, 450px);}
.phero-3d.pos-ar.far .phero-3d-glow{left:68%; width:26vw;}

@media (max-width:768px){
  .phero-3d .phero-3d-img{left:50% !important; right:auto !important; top:16% !important; width:min(72vw, 380px) !important; transform:translateX(-50%); animation:pheroFloatC 7s ease-in-out infinite !important;}
  .phero-3d .phero-3d-glow{left:50% !important; right:auto !important; top:15% !important; width:86vw !important; height:52vw !important; max-width:none !important; max-height:none !important; transform:translateX(-50%); animation:glowPulseC 5s ease-in-out infinite !important;}
  /* 高構圖（pos-ar）：縮小避免壓到標題 */
  .phero-3d.pos-ar .phero-3d-img{width:min(46vw, 240px) !important; top:11% !important;}
  .phero-3d.pos-ar .phero-3d-glow{width:64vw !important; top:11% !important;}
  /* 長標題頁（far）：手機再縮小上移 */
  .phero-3d.pos-ar.far .phero-3d-img{width:min(40vw, 210px) !important; top:6% !important;}
  .phero-3d .phero-3d-img.m-tiny{width:min(40vw, 200px) !important; top:7% !important;}
  .phero-3d .phero-3d-img.m-up{width:min(33vw, 160px) !important; top:2% !important;}
}
@media (prefers-reduced-motion:reduce){
  .phero-3d-img,.phero-3d-glow{animation:none;}
}

/* ---------- hero (home) ---------- */
.hero{position:relative; height:100vh; min-height:640px; overflow:hidden;}
.pcanvas{position:absolute; inset:0; width:100%; height:100%;}
.hero-ui{position:absolute; inset:0; z-index:3; pointer-events:none; display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--gut) 44px;}
.hero-eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--mut); margin-bottom:20px; display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.hero-eyebrow .dot{width:7px;height:7px;background:var(--acc);border-radius:50%; animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)}}
.hero-h{font-family:var(--serif); font-weight:900; font-size:clamp(30px,4.4vw,64px); line-height:1.25; max-width:14em; text-wrap:balance;}
.hero-h .hl{color:var(--acc); font-family:var(--news); font-style:italic; font-weight:400;}
.hero-line{overflow:hidden;}
.hero-line>span{display:block; transform:translateY(110%); animation:heroUp 1s cubic-bezier(.2,.9,.2,1) forwards;}
.hero-line:nth-child(2)>span{animation-delay:.15s;}
@keyframes heroUp{to{transform:translateY(0)}}
.hero-bottom{display:flex; justify-content:space-between; align-items:flex-end; margin-top:34px; border-top:1px solid var(--line); padding-top:18px; gap:32px;}
.hero-bottom .lede{font-size:16px; line-height:1.95; color:var(--ink3); max-width:520px;}
.hero-bottom .lede strong{color:var(--ink);}
.hero-cta{display:flex; gap:16px; pointer-events:auto; flex-shrink:0;}
.scroll-hint{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3; font-family:var(--mono); font-size:11px; letter-spacing:.4em; color:var(--mut);}
@media (max-width:768px){
  .hero{height:auto; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:calc(84px + 74vw);}
  .hero-ui{position:relative; inset:auto;}
  .hero-eyebrow .eb-en{display:none;}
  .scroll-hint{display:none;}
}

/* ---------- inner hero ---------- */
.phero{position:relative; min-height:78vh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding:150px var(--gut) 0;}
.phero .pcanvas{opacity:.95;}
.phero-content{position:relative; z-index:3; padding-bottom:0; pointer-events:none;}
.phero-content h1{font-family:var(--serif); font-weight:900; font-size:clamp(34px,5.2vw,76px); line-height:1.22; max-width:13em; text-wrap:balance;}
.phero-content h1 .hl{color:var(--acc); font-family:var(--news); font-style:italic; font-weight:400;}
.phero-content .lede{font-size:16px; line-height:2; color:var(--ink3); max-width:560px; margin-top:28px;}
.phero-content .lede strong{color:var(--ink);}
.phero-bar{position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--line); margin-top:44px; padding:16px 0 20px; font-family:var(--mono); font-size:11.5px; letter-spacing:.24em; color:var(--mut);}

/* ---------- buttons ---------- */
.btn-a{background:var(--acc); color:var(--onacc); font-weight:700; padding:15px 34px; border-radius:999px; font-size:14px; letter-spacing:.06em; transition:.3s; display:inline-block; border:none; cursor:pointer;}
.btn-a:hover{transform:translateY(-2px); box-shadow:0 8px 30px rgba(232,85,45,.35);}
.btn-b{border:1px solid var(--line); padding:15px 34px; border-radius:999px; font-size:14px; transition:.3s; display:inline-block; color:var(--ink);}
.btn-b:hover{border-color:var(--acc); color:var(--acc);}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:20px 0; position:relative; z-index:4; background:var(--bg);}
.mq-track{display:flex; white-space:nowrap; width:max-content; will-change:transform;}
.mq-item{font-family:var(--serif); font-weight:900; font-size:26px; padding:0 28px; display:flex; align-items:center; gap:28px;}
.mq-item i{font-family:var(--news); font-style:italic; font-weight:400; color:var(--acc); font-size:22px;}
.mq-item::after{content:'✳'; color:var(--acc); font-size:18px;}

/* ---------- sections ---------- */
section{padding:110px var(--pad); position:relative; overflow-x:clip;} /* 進場動畫的位移不撐寬手機版面 */
section>.wrap{max-width:var(--maxw); margin:0 auto; position:relative; z-index:2;}

/* （已移除 Z 字交錯：全站統一靠左對齊） */
.sec-tag{display:flex; align-items:baseline; gap:18px; margin-bottom:44px;}
.sec-tag .no{font-family:var(--mono); font-size:12px; color:var(--acc); letter-spacing:.2em;}
.sec-tag .lbl{font-family:var(--mono); font-size:12px; letter-spacing:.28em; color:var(--mut); text-transform:uppercase;}
.sec-tag .rule{flex:1; height:1px; background:var(--line); transform-origin:left; transform:scaleX(0); transition:transform 1.2s cubic-bezier(.2,.9,.2,1);}
.inview .rule{transform:scaleX(1);}
.rv{opacity:0; transform:translateY(50px); transition:opacity .9s cubic-bezier(.2,.9,.2,1), transform .9s cubic-bezier(.2,.9,.2,1);}
.inview .rv{opacity:1; transform:none;}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}.rv.d5{transition-delay:.5s}.rv.d6{transition-delay:.6s}
h2.head{font-family:var(--serif); font-weight:900; font-size:clamp(28px,3.1vw,46px); line-height:1.3; max-width:22em; margin-bottom:20px; text-wrap:balance;}
h2.head em{font-family:var(--news); font-style:italic; font-weight:400; color:var(--acc);}
.sub{color:var(--ink3); font-size:16px; line-height:2; max-width:580px; margin-bottom:56px;}
.sub strong{color:var(--ink);}

/* ---------- fact block (AIO/GEO) ---------- */
.fact{border:1px solid var(--line); border-left:2px solid var(--acc); padding:28px 32px; max-width:720px; background:var(--bg2);}
.fact .q{font-family:var(--mono); font-size:12px; letter-spacing:.24em; color:var(--acc); margin-bottom:14px;}
.fact p{font-size:15.5px; line-height:2; color:var(--ink2);}
.meta-line{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--mut); margin-top:18px;}

/* ---------- flip cards (human × AI) ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:none;}
.flip{perspective:1600px; height:430px; cursor:pointer;}
.flip-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.3,.9,.3,1);}
.flip:hover .flip-inner, .flip.flipped .flip-inner{transform:rotateY(180deg);}
.face{position:absolute; inset:0; backface-visibility:hidden; border-radius:18px; padding:44px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;}
.face.front{background:linear-gradient(160deg,#1B1813,#12100C); border:1px solid var(--line);}
.face.back{transform:rotateY(180deg); border:1px solid var(--acc);}
.face .tag{font-family:var(--mono); font-size:12px; letter-spacing:.26em; color:var(--mut);}
.face h3{font-family:var(--serif); font-weight:900; font-size:60px; line-height:1;}
.face h3 span{display:block; font-family:var(--gro); font-weight:500; font-size:13px; letter-spacing:.2em; color:var(--mut); margin-top:14px;}
.face p{font-size:15.5px; line-height:1.95; color:var(--ink3);}
.face .hint{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--mut); display:flex; align-items:center; gap:10px;}
.face .hint::after{content:'⟲'; font-size:14px; color:var(--acc);}
.face.human-back{background:var(--acc); color:var(--onacc);}
.face.human-back p{color:#4A2412; font-weight:500;}
.face.human-back .tag{color:#7A3A1E;}
.face.ai-back{background:#16202E; border-color:#3A5A80; color:#DCE6F2;}
.face.ai-back p{color:#A9BED6;}
.face.ai-back .tag{color:#6E8DB0;}
.face ul{list-style:none; font-size:14px; line-height:2.2; font-weight:500;}
.face ul li::before{content:'—'; margin-right:10px; opacity:.6;}
.face .orb{position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(232,85,45,.5), transparent 65%); filter:blur(4px);}
.face .grid-deco{position:absolute; inset:0; opacity:.14;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;}

/* ---------- problems two-col ---------- */
.prob-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; max-width:none;}
.prob-h{font-family:var(--mono); font-size:12px; letter-spacing:.3em; margin-bottom:34px;}
.prob-list{list-style:none;}
.prob-list li{font-family:var(--serif); font-weight:600; font-size:clamp(16px,1.45vw,21px); padding:16px 0; border-bottom:1px solid var(--line); line-height:1.55;
  opacity:0; transform:translateX(40px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.2,1);}
.inview .prob-list li{opacity:1; transform:none;}
.inview .prob-list li:nth-child(1){transition-delay:.05s}.inview .prob-list li:nth-child(2){transition-delay:.14s}
.inview .prob-list li:nth-child(3){transition-delay:.23s}.inview .prob-list li:nth-child(4){transition-delay:.32s}
.inview .prob-list li:nth-child(5){transition-delay:.41s}.inview .prob-list li:nth-child(6){transition-delay:.5s}
.inview .prob-list li:nth-child(7){transition-delay:.59s}.inview .prob-list li:nth-child(8){transition-delay:.68s}
.inview .prob-list li:nth-child(9){transition-delay:.77s}.inview .prob-list li:nth-child(10){transition-delay:.86s}
.prob-list.no li{color:var(--ink3); text-decoration:line-through; text-decoration-color:rgba(232,85,45,.55); text-decoration-thickness:1.5px;}
.prob-list.yes li::before{content:'—'; color:var(--acc); margin-right:12px;}

/* ---------- solution index rows ---------- */
.sol{display:grid; grid-template-columns:100px 1.1fr 1fr 70px; gap:32px; align-items:center; padding:38px 0; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.sol:first-of-type{border-top:1px solid var(--line);}
.sol::before{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(232,85,45,.12), transparent 65%); transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.2,.9,.2,1);}
.sol:hover::before{transform:scaleX(1);}
.sol .num{font-family:var(--mono); font-size:14px; color:var(--acc); position:relative;}
.sol h3{font-family:var(--serif); font-weight:900; font-size:clamp(22px,2.3vw,34px); position:relative; transition:transform .45s cubic-bezier(.2,.9,.2,1);}
.sol:hover h3{transform:translateX(14px);}
.sol h3 span{display:block; font-family:var(--mono); font-weight:400; font-size:11.5px; color:var(--mut); letter-spacing:.24em; margin-top:9px; text-transform:uppercase;}
.sol .desc{font-size:15px; line-height:1.9; color:var(--ink3); position:relative;}
.sol .arr{font-family:var(--news); font-size:32px; color:var(--mut); text-align:right; position:relative; transition:.45s;}
.sol:hover .arr{color:var(--acc); transform:translateX(8px) rotate(-45deg);}
.sol .badge{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--onacc); background:var(--acc); padding:3px 10px; border-radius:3px; vertical-align:middle; margin-left:12px;}

/* ---------- capability chips / feature lists ---------- */
.caps{display:flex; flex-wrap:wrap; gap:12px; max-width:none;}
.cap{border:1px solid var(--line); border-radius:999px; padding:10px 24px; font-size:14px; color:var(--ink2); transition:.3s; background:transparent;}
.cap:hover{border-color:var(--acc); color:var(--acc); transform:translateY(-2px);}
.cap-groups{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.cap-group{background:var(--bg); padding:40px 32px;}
.cap-group h3{font-family:var(--serif); font-weight:900; font-size:22px; margin-bottom:8px;}
.cap-group h3 span{display:block; font-family:var(--mono); font-weight:400; font-size:11.5px; letter-spacing:.22em; color:var(--acc); margin-top:8px; text-transform:uppercase;}
.cap-group ul{list-style:none; margin-top:24px;}
.cap-group li{font-size:15px; line-height:2.1; color:var(--ink3);}
.cap-group li::before{content:'·'; color:var(--acc); margin-right:8px;}

/* ---------- CMS growth path ---------- */
.cms-grid{display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; max-width:none;}
.growth{position:relative; padding-left:40px;}
.growth::before{content:''; position:absolute; left:10px; top:16px; bottom:16px; border-left:1px dashed var(--line);}
.g-line{position:absolute; left:9px; top:16px; width:2px; background:var(--acc); height:0; transition:height 1.8s cubic-bezier(.2,.9,.2,1);}
.inview .g-line{height:calc(100% - 32px);}
.g-step{position:relative; display:flex; align-items:center; gap:16px; padding:12.5px 0; font-size:16.5px;
  opacity:0; transform:translateX(30px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1);}
.inview .g-step{opacity:1; transform:none;}
.inview .g-step:nth-child(2){transition-delay:.05s}.inview .g-step:nth-child(3){transition-delay:.15s}
.inview .g-step:nth-child(4){transition-delay:.25s}.inview .g-step:nth-child(5){transition-delay:.35s}
.inview .g-step:nth-child(6){transition-delay:.45s}.inview .g-step:nth-child(7){transition-delay:.55s}
.inview .g-step:nth-child(8){transition-delay:.65s}.inview .g-step:nth-child(9){transition-delay:.75s}
.inview .g-step:nth-child(10){transition-delay:.85s}.inview .g-step:nth-child(11){transition-delay:.95s}
.inview .g-step:nth-child(12){transition-delay:1.05s}
.g-step::before{content:''; position:absolute; left:-35px; top:50%; transform:translateY(-50%); width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--acc);}
.g-step .mono{font-size:11px; color:var(--mut); letter-spacing:.18em;}
.g-step.core{font-family:var(--serif); font-weight:900; font-size:23px;}
.g-step.coming{color:var(--mut);}
.g-step.coming .soon, .soon{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--acc); border:1px solid var(--acc); border-radius:3px; padding:2px 9px; white-space:nowrap;}

/* ---------- module cards ---------- */
.mods{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.mod{background:var(--bg); padding:40px 32px 48px; position:relative; overflow:hidden; transition:background .4s;}
.mod:hover{background:var(--bg2);}
.mod .mno{font-family:var(--news); font-style:italic; font-size:34px; color:var(--acc); display:block; margin-bottom:22px;}
.mod h3{font-family:var(--serif); font-weight:900; font-size:22px; margin-bottom:6px;}
.mod .fit{font-size:14px; color:var(--mut); line-height:1.9; margin:14px 0 18px;}
.mod .fit b{color:var(--ink2); font-weight:500;}
.mod ul{list-style:none;}
.mod li{font-size:14.5px; line-height:2.05; color:var(--ink3);}
.mod li::before{content:'·'; color:var(--acc); margin-right:8px;}
.mod.soon-card{background:repeating-linear-gradient(-45deg, var(--bg), var(--bg) 14px, #100E0B 14px, #100E0B 28px);}

/* ---------- packages ---------- */
.packs{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px;}
.pack{border:1px solid var(--line); border-radius:14px; padding:36px 28px 42px; position:relative; transition:.35s; background:var(--bg2);}
.pack:hover{transform:translateY(-6px); border-color:var(--acc);}
.pack .pname{font-family:var(--gro); font-weight:900; font-size:26px; letter-spacing:.04em;}
.pack .pzh{font-family:var(--serif); font-weight:600; font-size:15px; color:var(--mut); margin-top:6px;}
.pack p{font-size:14.5px; line-height:1.95; color:var(--mut); margin:20px 0;}
.pack ul{list-style:none;}
.pack li{font-size:14px; line-height:2.1; color:var(--ink3);}
.pack li::before{content:'—'; color:var(--acc); margin-right:8px;}
.pack .price{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; color:var(--mut); margin-top:22px; display:block;}
.pack.dim{opacity:.75;}

/* ---------- why grid ---------- */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); max-width:none;}
.why-grid .cell{padding:44px 34px 60px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .4s;}
.why-grid .cell:hover{background:var(--bg2);}
.why-grid .n{font-family:var(--news); font-style:italic; font-size:42px; color:var(--acc); display:block; margin-bottom:26px;}
.why-grid h3{font-family:var(--serif); font-weight:900; font-size:20px; margin-bottom:14px;}
.why-grid p{font-size:15px; line-height:1.9; color:var(--ink3);}

/* ---------- process ---------- */
.proc{display:grid; grid-template-columns:repeat(6,1fr); max-width:none; border-top:1px solid var(--line);}
.proc.proc-3{grid-template-columns:repeat(3,1fr);}
.proc .st{padding:30px 22px 44px; border-left:1px solid var(--line); position:relative; transition:background .4s;}
.proc .st:first-child{border-left:none; padding-left:0;}
.proc .st:hover{background:var(--bg2);}
.proc .st .mono{font-size:11.5px; color:var(--acc); letter-spacing:.22em; display:block; margin-bottom:44px;}
.proc .st h3{font-family:var(--gro); font-weight:700; font-size:19px; letter-spacing:.03em;}
.proc .st .zh{font-size:14px; color:var(--mut); display:block; margin-top:8px;}
.proc .st .dd{font-size:13.5px; color:var(--ink3); display:block; margin-top:12px; line-height:1.8;}
.proc .st::after{content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.9,.2,1);}
.proc .st:hover::after{transform:scaleX(1);}

/* ---------- FAQ ---------- */
.faq{max-width:none;}
.faq details{border-bottom:1px solid var(--line);}
.faq details:first-child{border-top:1px solid var(--line);}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 4px; font-family:var(--serif); font-weight:900; font-size:clamp(16px,1.5vw,20px); transition:color .3s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--acc);}
.faq summary .pm{font-family:var(--news); font-size:26px; color:var(--acc); transition:transform .35s; flex-shrink:0;}
.faq details[open] summary .pm{transform:rotate(45deg);}
.faq .ans{padding:0 4px 30px; font-size:14.5px; line-height:2.05; color:var(--ink3); max-width:640px;}

/* ---------- team ---------- */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:none;}
.member{border:1px solid var(--line); border-radius:14px; padding:36px 30px; position:relative; overflow:hidden; transition:.35s; background:var(--bg2);}
.member:hover{transform:translateY(-6px); border-color:var(--acc);}
.member .avatar{width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:900; font-size:28px; margin-bottom:26px; background:#1B1813; border:1px solid var(--line); color:var(--acc);}
.member h3{font-family:var(--gro); font-weight:700; font-size:22px;}
.member .role{font-size:14px; color:var(--mut); margin:8px 0 20px; letter-spacing:.06em;}
.member .mail{font-family:var(--mono); font-size:12px; color:var(--acc); letter-spacing:.04em; word-break:break-all;}

/* ---------- partners ---------- */
.partner-list{max-width:none;}
@media (min-width:1024px){ .partner-list{display:grid; grid-template-columns:1fr 1fr; column-gap:64px;} .partner-list .partner:nth-child(2){border-top:1px solid var(--line);} }
.partner{display:flex; align-items:baseline; gap:28px; padding:26px 0; border-bottom:1px solid var(--line); transition:.35s; position:relative;}
.partner:first-child{border-top:1px solid var(--line);}
.partner:hover{padding-left:16px;}
.partner .pn{font-family:var(--mono); font-size:11.5px; color:var(--acc); letter-spacing:.16em; width:44px; flex-shrink:0;}
.partner h3{font-family:var(--serif); font-weight:900; font-size:clamp(18px,1.9vw,26px);}
.partner .pc{margin-left:auto; font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--mut); text-align:right; flex-shrink:0;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:start;}
.info-block{margin-bottom:44px;}
.info-block h3{font-family:var(--mono); font-size:12px; letter-spacing:.26em; color:var(--acc); margin-bottom:18px; font-weight:400;}
.info-block p{font-size:15px; line-height:2; color:var(--ink2);}
.info-block .big{font-family:var(--serif); font-weight:900; font-size:26px; color:var(--ink);}
form.cform{display:grid; grid-template-columns:1fr 1fr; gap:26px 24px;}
.cform .full{grid-column:1/-1;}
.cform label{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.22em; color:var(--mut); margin-bottom:10px;}
.cform label b{color:var(--acc); font-weight:400;}
.cform input, .cform select, .cform textarea{
  width:100%; background:var(--bg2); border:1px solid var(--line); border-radius:8px; color:var(--ink);
  font-family:'Noto Sans TC'; font-size:14.5px; padding:14px 16px; transition:border .3s; outline:none;}
.cform input:focus, .cform select:focus, .cform textarea:focus{border-color:var(--acc);}
.cform textarea{min-height:130px; resize:vertical;}
.cform .topic-chips{display:flex; flex-wrap:wrap; gap:10px;}
.cform .topic-chips .tp{background:none; font-family:inherit; border:1px solid var(--line); border-radius:999px; padding:8px 18px; font-size:14px; cursor:pointer; transition:.25s; user-select:none; color:var(--ink2);}
.cform .topic-chips .tp.on{background:var(--acc); border-color:var(--acc); color:var(--onacc); font-weight:700;}
.cform .note{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--mut); line-height:1.9;}

/* ---------- cases / insights ---------- */
.cat-filter{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:56px;}
.cat-filter .cf{border:1px solid var(--line); border-radius:999px; padding:9px 22px; font-size:14px; color:var(--ink2); transition:.25s; cursor:pointer;}
.cat-filter .cf:hover, .cat-filter .cf.on{border-color:var(--acc); color:var(--acc);}
.case-frame{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); max-width:none;}
.case-frame .cf-step{padding:34px 22px 50px; border-left:1px solid var(--line);}
.case-frame .cf-step:first-child{border-left:none; padding-left:0;}
.case-frame .n{font-family:var(--news); font-style:italic; font-size:34px; color:var(--acc); display:block; margin-bottom:22px;}
.case-frame h3{font-family:var(--gro); font-weight:700; font-size:17px; letter-spacing:.04em;}
.case-frame .zh{font-family:var(--serif); font-weight:600; font-size:15px; display:block; margin:8px 0 14px;}
.case-frame p{font-size:14.5px; line-height:1.9; color:var(--mut);}
.article-tpl{max-width:none; border:1px solid var(--line); border-radius:16px; padding:0; overflow:hidden;}
.article-tpl .row{display:flex; gap:24px; align-items:baseline; padding:22px 32px; border-bottom:1px solid var(--line); transition:background .3s;}
.article-tpl .row:last-child{border-bottom:none;}
.article-tpl .row:hover{background:var(--bg2);}
.article-tpl .no{font-family:var(--mono); font-size:11.5px; color:var(--acc); letter-spacing:.18em; width:90px; flex-shrink:0;}
.article-tpl h3{font-family:var(--serif); font-weight:900; font-size:18px;}
.article-tpl .dd{font-size:13.5px; color:var(--mut); margin-left:auto; text-align:right;}

/* ---------- final cta ---------- */
.final-sec{background:var(--acc); color:var(--onacc); padding:110px var(--gut); overflow:hidden; position:relative;}
.final-sec .mono{font-size:12px; letter-spacing:.34em; display:block; margin-bottom:44px; color:#7A3A1E;}
.final-sec h2{font-family:var(--serif); font-weight:900; font-size:clamp(34px,5vw,76px); line-height:1.2; max-width:16em; margin-bottom:30px;}
.final-sec p{font-size:17px; line-height:2; max-width:540px; color:#4A2412; margin-bottom:56px; font-weight:500;}
.final-sec .btn-a{background:var(--onacc); color:var(--acc); font-size:16px; padding:20px 50px;}
.final-sec .btn-a:hover{box-shadow:0 10px 40px rgba(0,0,0,.3);}
.final-sec .big-bg{position:absolute; right:-2%; bottom:-6%; font-family:var(--gro); font-weight:900; font-size:24vw; line-height:.8; color:rgba(20,11,6,.07); pointer-events:none; letter-spacing:-.02em;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:80px var(--gut) 0;}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; margin-bottom:80px;}
.foot-grid h4{font-family:var(--mono); font-size:11.5px; letter-spacing:.3em; color:var(--mut); margin-bottom:22px; font-weight:400;}
.foot-grid ul{list-style:none;}
.foot-grid li{font-size:13.5px; padding:6px 0;}
.foot-grid li a{color:var(--ink3); transition:color .25s;}
.foot-grid li a:hover{color:var(--acc);}
.foot-grid .brandline{font-size:14.5px; line-height:1.95; color:var(--ink3); max-width:300px;}
.foot-grid .brandline strong{color:var(--ink); font-family:var(--serif);}
.giant{font-family:var(--gro); font-weight:900; font-size:15.5vw; line-height:.8; letter-spacing:-.015em; text-align:center; transform:translateY(.14em); user-select:none;}
.giant sup{font-size:.11em; color:var(--acc);}
.foot-bar{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:20px 0 24px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--mut);}

/* ---------- utility ---------- */
.alt{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:70px; max-width:none; align-items:start;}
.value-list{list-style:none;}
.value-list li{padding:22px 0; border-bottom:1px solid var(--line); display:flex; gap:22px; align-items:baseline;}
.value-list .vn{font-family:var(--news); font-style:italic; font-size:24px; color:var(--acc); width:44px; flex-shrink:0;}
.value-list h3{font-family:var(--serif); font-weight:900; font-size:19px; margin-bottom:6px;}
.value-list p{font-size:15px; line-height:1.9; color:var(--ink3);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--pad:20px;}
  section>.wrap{max-width:100%;}
  nav{padding:16px 20px;}
  .nav-links{display:none;} .burger{display:block;}
  .hero-ui{padding:0 20px 30px;}
  .hero-side{display:none;} .hero-mode{left:20px; top:88px;}
  .hero-bottom{flex-direction:column; align-items:flex-start; gap:28px;}
  .crumbs{top:78px; left:20px;}
  .phero{padding:130px 20px 0; min-height:70vh;}
  section{padding:70px 20px;}
  .duo{grid-template-columns:1fr;} .flip{height:400px;}
  .prob-grid, .two-col{grid-template-columns:1fr; gap:52px;}
  .sol{grid-template-columns:44px 1fr 34px; gap:16px;} .sol .desc{display:none;}
  .cms-grid{grid-template-columns:1fr; gap:56px;}
  .why-grid{grid-template-columns:1fr;}
  .proc, .proc.proc-3{grid-template-columns:1fr 1fr;}
  .proc .st:nth-child(odd){border-left:none; padding-left:0;}
  .case-frame{grid-template-columns:1fr;}
  .case-frame .cf-step{border-left:none; padding-left:0; border-top:1px solid var(--line);}
  .case-frame .cf-step:first-child{border-top:none;}
  .team{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr; gap:60px;}
  form.cform{grid-template-columns:1fr;}
  .final-sec{padding:80px 20px;}
  footer{padding:56px 20px 0;} .foot-grid{grid-template-columns:1fr 1fr; gap:36px;}
}

/* footer brand logo */
.giant{display:flex; justify-content:flex-start; transform:none; padding:20px 0 0;}
.giant img{width:min(880px,100%); height:auto; opacity:.92; user-select:none;}

/* ---------- article ---------- */
.article-wrap{max-width:820px; margin:0;}
.toc{border:1px solid var(--line); border-radius:12px; padding:28px 32px; margin-bottom:64px; background:var(--bg2);}
.toc .mono{font-size:11.5px; letter-spacing:.26em; color:var(--acc); display:block; margin-bottom:16px;}
.toc ol{list-style:none; counter-reset:toc;}
.toc ol{columns:2; column-gap:48px;}
.toc li{counter-increment:toc; padding:7px 0; break-inside:avoid;}
@media (max-width:900px){ .toc ol{columns:1;} }
.toc li a{color:var(--ink2); font-size:14.5px; transition:color .25s;}
.toc li a:hover{color:var(--acc);}
.toc li a::before{content:'0' counter(toc); font-family:var(--mono); font-size:11px; color:var(--mut); margin-right:14px; letter-spacing:.1em;}
.article-meta{display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--mut); margin:22px 0 0;}
.article-meta .cat{color:var(--acc);}
.article-body h2{font-family:var(--serif); font-weight:900; font-size:clamp(22px,2.4vw,30px); margin:72px 0 22px; line-height:1.4;}
.article-body h3{font-family:var(--serif); font-weight:700; font-size:19px; margin:40px 0 14px;}
.article-body p{font-size:16px; line-height:2.05; color:var(--ink2); margin-bottom:20px;}
.article-body ul, .article-body ol{margin:0 0 24px 1.2em; font-size:15.5px; line-height:2.1; color:var(--ink2);}
.article-body li{margin-bottom:6px;}
.article-body li::marker{color:var(--acc);}
.article-body strong{color:var(--ink);}
.article-body blockquote{border-left:2px solid var(--acc); padding:6px 0 6px 26px; margin:36px 0; font-family:var(--serif); font-weight:600; font-size:19px; line-height:1.9; color:var(--ink);}
.article-body table{width:100%; border-collapse:collapse; margin:28px 0 36px; font-size:14px;}
.article-body th{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; color:var(--acc); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:400;}
.article-body td{padding:13px 14px; border-bottom:1px solid var(--line); color:var(--ink2); line-height:1.8; vertical-align:top;}
.article-body td:first-child{color:var(--ink); font-weight:500;}
.figure{border:1px solid var(--line); border-radius:14px; padding:36px; margin:36px 0; background:var(--bg2); text-align:center;}
.figure svg{max-width:100%; height:auto;}
.figure .cap{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--mut); margin-top:18px;}
.keypoints{border:1px solid var(--line); border-left:2px solid var(--acc); border-radius:0 12px 12px 0; padding:30px 34px; margin:56px 0; background:var(--bg2);}
.keypoints .mono{font-size:11.5px; letter-spacing:.26em; color:var(--acc); display:block; margin-bottom:16px;}
.keypoints ul{margin:0;}
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:56px;}
.rel-card{border:1px solid var(--line); border-radius:12px; padding:26px; transition:.3s; display:block;}
.rel-card:hover{border-color:var(--acc); transform:translateY(-4px);}
.rel-card .mono{font-size:11.5px; letter-spacing:.2em; color:var(--acc); display:block; margin-bottom:12px;}
.rel-card h3{font-family:var(--serif); font-weight:900; font-size:17px; line-height:1.6;}
@media (max-width:900px){ .article-body table{font-size:12.5px;} }

/* toc 覆寫（避免吃到 nav 全域樣式） */
.toc{position:static !important; display:block !important; padding:24px 30px !important;}
/* 錨點跳轉避開固定導覽列 */
.article-body h2, .article-body h3{scroll-margin-top:110px;}

/* ============ 法律顧問證書 / 隱私權政策 ============ */
.doc-meta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:44px 0;}
.doc-meta .dm{background:var(--bg); padding:24px 26px;}
.doc-meta .dm .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; color:var(--acc); display:block; margin-bottom:10px;}
.doc-meta .dm .v{font-family:var(--serif); font-weight:600; font-size:17px; line-height:1.7; color:var(--ink);}
.doc-meta .dm .v small{display:block; font-family:var(--sans); font-weight:400; font-size:13.5px; color:var(--mut); margin-top:6px; letter-spacing:.02em;}
.cert-frame{border:1px solid var(--line); border-radius:16px; background:var(--bg2); padding:22px; margin:20px 0 14px;}
.cert-frame img{width:100%; height:auto; display:block; border-radius:8px;}
.cert-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:22px;}
.pdf-embed{border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:34px; background:var(--bg2);}
.pdf-embed iframe{width:100%; height:82vh; min-height:560px; display:block; border:0;}
.policy-body ol.policy-list{list-style:none; counter-reset:pl; margin:26px 0; padding:0;}
.policy-body ol.policy-list>li{counter-increment:pl; border:1px solid var(--line); border-radius:12px; padding:24px 26px 24px 76px; margin-bottom:16px; position:relative; background:var(--bg);}
.policy-body ol.policy-list>li::before{content:counter(pl,decimal-leading-zero); position:absolute; left:24px; top:22px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--acc);}
.policy-body ol.policy-list>li h3{font-family:var(--serif); font-weight:900; font-size:16.5px; margin-bottom:10px;}
.policy-body ol.policy-list>li p{margin:0 0 8px; font-size:14.5px; color:var(--ink2); line-height:1.9;}
@media (max-width:720px){ .policy-body ol.policy-list>li{padding-left:60px;} .policy-body ol.policy-list>li::before{left:18px;} }

/* footer 法律連結 */
.foot-legal a{color:var(--mut); letter-spacing:.18em; transition:.25s;}
.foot-legal a:hover{color:var(--acc);}

/* ---------- 懸浮按鈕群 FAB ---------- */
.fab{position:fixed; right:20px; bottom:24px; z-index:120; display:flex; flex-direction:column; gap:12px; align-items:center;}
.fab a, .fab button{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg2); border:1px solid var(--line); color:var(--ink); cursor:pointer; transition:.28s; text-decoration:none; padding:0;}
.fab a:hover, .fab button:hover{border-color:var(--acc); color:var(--acc); transform:translateY(-3px); background:var(--bg2);}
.fab svg{width:22px; height:22px; display:block;}
.fab .fab-top{opacity:0; pointer-events:none; transform:translateY(8px) scale(.9);}
.fab .fab-top.show{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
.fab .fab-lb{position:absolute; right:64px; top:50%; transform:translateY(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--mut); background:var(--bg2);
  border:1px solid var(--line); padding:5px 10px; border-radius:6px; opacity:0; pointer-events:none; transition:.22s;}
.fab a:hover .fab-lb, .fab button:hover .fab-lb{opacity:1;}
@media (max-width:900px){
  /* 手機版移除頂部預約諮詢，避免壓字（漢堡選單內已有） */
  nav.top .cta-pill{display:none;}
  .fab{right:16px; bottom:18px; gap:10px;}
  .fab a, .fab button{width:48px; height:48px;}
  .fab .fab-lb{display:none;}
}

/* ---------- 首頁首屏：懸浮按鈕先隱藏，避免壓住主要 CTA ---------- */
.fab a{transition:.28s;}
body.at-hero .fab a{opacity:0; pointer-events:none; transform:translateY(10px);}

/* ---------- 鍵盤焦點 ---------- */
a:focus-visible, button:focus-visible, .tp:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:6px;}

/* ---------- 首頁：最新觀點卡片 ---------- */
.post-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:none;}
.post-card{display:flex; flex-direction:column; gap:18px; padding:32px 30px 28px; border:1px solid var(--line); border-radius:14px; background:var(--bg); transition:.35s; min-height:250px;}
.post-card:hover{border-color:var(--acc); transform:translateY(-4px);}
.post-card .pc-cat{font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; color:var(--acc);}
.post-card h3{font-family:var(--serif); font-weight:900; font-size:clamp(18px,1.6vw,22px); line-height:1.5; flex:1;}
.post-card .pc-meta{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--mut);}
.post-card .pc-meta i{font-family:var(--news); font-size:22px; font-style:normal; transition:.35s;}
.post-card:hover .pc-meta i{color:var(--acc); transform:translateX(6px);}
.method-note{margin-top:44px; display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px; padding:26px 30px; border:1px solid var(--line); border-left:2px solid var(--acc); background:var(--bg); max-width:none;}
.method-note p{font-size:15px; line-height:1.9; color:var(--ink3); flex:1; min-width:260px;}
.method-note p b{color:var(--ink); font-weight:500;}
@media (max-width:900px){ .post-cards{grid-template-columns:1fr;} .post-card{min-height:0;} }

/* ---------- 聯絡表單：郵件程式未開啟時的備援 ---------- */
.mail-fallback{display:none; border:1px solid var(--acc); border-radius:12px; padding:22px 24px; background:var(--bg2); font-size:14.5px; line-height:1.9; color:var(--ink2);}
.mail-fallback.show{display:block;}
.mail-fallback .mf-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px;}
.mail-fallback .btn-b{padding:11px 22px; font-size:13.5px; background:none; cursor:pointer; font-family:inherit;}
.topic-err{display:none; color:var(--acc); font-size:13px; margin-top:10px;}
.topic-err.show{display:block;}

/* ---------- 法律顧問頁 ---------- */
.phero-3d.pos-legal .phero-3d-img{left:61%; top:2%; width:min(50vw, 820px); transform:translateX(-50%); animation:pheroFloatC 7s ease-in-out infinite;}
.phero-3d.pos-legal .phero-3d-glow{width:34vw; height:22vw; max-width:520px; max-height:340px; left:61%; top:14%; transform:translateX(-50%); animation:glowPulseC 5s ease-in-out infinite;}
.counsel{display:grid; grid-template-columns:1.1fr 1fr; gap:24px; max-width:none;}
.counsel-card{border:1px solid var(--line); border-radius:16px; padding:40px 38px; background:var(--bg2); position:relative; overflow:hidden;}
.counsel-card::after{content:''; position:absolute; right:-80px; top:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(232,85,45,.22), transparent 65%); pointer-events:none;}
.counsel-card .mono{font-size:11.5px; letter-spacing:.24em; color:var(--acc); display:block; margin-bottom:22px;}
.counsel-card h3{font-family:var(--serif); font-weight:900; font-size:clamp(26px,2.6vw,36px); line-height:1.3;}
.counsel-card .who{font-size:16px; color:var(--ink3); margin-top:12px;}
.counsel-dl{display:grid; grid-template-columns:auto 1fr; gap:14px 28px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line); font-size:15px;}
.counsel-dl dt{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--mut); padding-top:3px;}
.counsel-dl dd{color:var(--ink2); line-height:1.7;}
.counsel-scope{list-style:none;}
.counsel-scope li{padding:20px 0; border-bottom:1px solid var(--line); display:flex; gap:20px; align-items:baseline;}
.counsel-scope li:first-child{border-top:1px solid var(--line);}
.counsel-scope .vn{font-family:var(--news); font-style:italic; font-size:22px; color:var(--acc); width:36px; flex-shrink:0;}
.counsel-scope h4{font-family:var(--serif); font-weight:900; font-size:18px; margin-bottom:6px;}
.counsel-scope p{font-size:15px; line-height:1.85; color:var(--ink3);}
.cert-frame{display:block; max-width:1000px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.45); transition:.35s;}
.cert-frame:hover{transform:translateY(-4px); border-color:var(--acc);}
.cert-frame img{display:block; width:100%; height:auto;}
.cert-actions{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:30px;}
.cert-actions .note{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--mut);}
@media (max-width:900px){
  .counsel{grid-template-columns:1fr;}
  .counsel-card{padding:32px 26px;}
}

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none;}
  .hero-line>span{animation:none; transform:none;}
  .rv{transition:none; opacity:1; transform:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   桌機版排版（≥1024px）
   1. 區塊標題與說明左右並排，填補右側空白
   2. 首頁與子頁首圖改為「左文右圖」，文字垂直置中、按鈕緊接說明
   ============================================================ */
@media (min-width:1024px){
  section>.wrap{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); column-gap:clamp(48px,6vw,104px); align-items:start;}
  section>.wrap>*{grid-column:1/-1; min-width:0;}
  section>.wrap>.head{grid-column:1; margin-bottom:0;}
  section>.wrap>.head+.sub{grid-column:2; align-self:end; margin:0; padding-bottom:6px;}
  section>.wrap>.head+.sub+*, section>.wrap>.head+:not(.sub){margin-top:56px;}
  section>.wrap>a, section>.wrap>.cert-frame{justify-self:start;}
  section>.wrap>.cert-frame{grid-column:1; max-width:none; justify-self:stretch;}
  section>.wrap>.cert-frame+.cert-actions{grid-column:2; align-self:end; flex-direction:column; align-items:flex-start; margin-top:0;}

  /* 首頁 hero */
  .hero{display:flex; align-items:center; height:auto; min-height:max(680px, 100vh); padding:110px var(--gut) 96px;}
  .hero-ui{position:relative; inset:auto; padding:0; display:block; width:min(54%, 700px);}
  .hero-h{font-size:clamp(40px,4vw,68px); max-width:none;}
  .hero-bottom{display:block; border-top:none; padding-top:0; margin-top:30px;}
  .hero-bottom .lede{font-size:17px; max-width:540px;}
  .hero-cta{margin-top:40px;}
  .hero-3d-img{right:-11vw; width:min(68vw, 1320px); top:calc(50% - min(68vw, 1320px) * .225);
    -webkit-mask-image:linear-gradient(to right, transparent 0, transparent 12%, #000 42%), linear-gradient(to bottom, transparent 0, #000 14%);
    mask-image:linear-gradient(to right, transparent 0, transparent 12%, #000 42%), linear-gradient(to bottom, transparent 0, #000 14%);}
  .hero-3d-glow{left:72%; top:calc(50% - 13vw);}
  .scroll-hint{left:var(--gut); transform:none; bottom:32px;}

  /* 子頁 hero：文字左欄垂直置中，主視覺固定於右欄 */
  .phero{min-height:min(86vh, 820px); padding-top:120px;}
  .phero-content{flex:1; display:flex; flex-direction:column; justify-content:center; max-width:min(50%, 640px); padding:40px 0 24px;}
  .phero-content h1{font-size:clamp(36px,3.5vw,56px); max-width:none;}
  .mods{grid-template-columns:repeat(3,1fr);}
  header.phero .phero-3d[class] .phero-3d-img{left:auto; right:var(--gut); top:calc(50% + 20px); width:auto; height:min(60vh, 540px); max-width:44%;
    object-fit:contain; margin-top:0; transform:translateY(-50%); animation:pheroFloatMid 7s ease-in-out infinite;}
  header.phero .phero-3d[class] .phero-3d-glow{left:auto; right:calc(var(--gut) + 6%); top:calc(50% - 160px); width:34vw; height:24vw; max-width:520px; max-height:360px; transform:none; animation:none;}
}
@keyframes pheroFloatMid{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 12px))}}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  header.phero .phero-3d[class] .phero-3d-img{animation:none;}
}

.brandline .taxid{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--mut);}

/* ============================================================
   手機與平板（<1024px）：主視覺固定在上方、文字在下方，兩者不重疊
   ============================================================ */
@media (max-width:1023px){
  .phero{--img-top:92px; --img-h:min(50vw, 340px); min-height:0; padding-top:calc(var(--img-top) + var(--img-h) + 24px);}
  .crumbs{top:76px;}
  header.phero .phero-3d[class] .phero-3d-img{top:var(--img-top) !important; left:50% !important; right:auto !important; width:auto !important;
    height:var(--img-h) !important; max-width:88vw; object-fit:contain; margin-top:0; transform:translateX(-50%);
    animation:pheroFloatC 7s ease-in-out infinite !important;}
  header.phero .phero-3d[class] .phero-3d-glow{top:calc(var(--img-top) + 20px) !important; left:50% !important; right:auto !important;
    width:80vw !important; height:44vw !important; max-width:none !important; max-height:none !important; transform:translateX(-50%);}
  .phero-content h1{font-size:clamp(32px,6.4vw,54px);}
}
@media (min-width:769px) and (max-width:1023px){
  /* 平板首頁：握手圖放在上方，文字區在下方 */
  .hero{height:auto; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; padding-top:calc(96px + 50vw);}
  .hero-ui{position:relative; inset:auto; padding-bottom:56px;}
  .hero-3d-img{width:118vw; right:-20vw; top:92px;}
  .hero-3d-glow{left:50%; top:110px; width:80vw; height:40vw;}
  .scroll-hint{display:none;}
}

/* ============================================================
   文章頁／隱私權政策（≥1100px）：內文維持易讀寬度，右側固定目錄
   FAQ 區塊同樣分兩欄，延伸閱讀放右側
   ============================================================ */
@media (min-width:1100px){
  .article-wrap:has(> .toc), .article-wrap:has(> .faq){max-width:none !important; display:grid;
    grid-template-columns:minmax(0,780px) minmax(260px,320px); justify-content:space-between; column-gap:64px; align-items:start;}
  .article-wrap:has(> .toc) > *, .article-wrap:has(> .faq) > *{grid-column:1; min-width:0;}
  .article-wrap > .toc{grid-column:2; grid-row:1 / span 4; position:sticky !important; top:104px; margin-top:0 !important;}
  .article-wrap > .toc ol{columns:1;}
  .article-wrap > .faq{max-width:none;}
  .article-wrap > .related{grid-column:2; grid-row:1; grid-template-columns:1fr; margin-top:0;}
  .article-wrap > .related::before{content:'RELATED — 延伸閱讀'; font-family:var(--mono); font-size:11.5px; letter-spacing:.24em; color:var(--acc); display:block;}
}

@media (max-width:600px){ .doc-meta{grid-template-columns:1fr;} }

/* ---------- 導覽列：標示目前所在頁 ---------- */
.nav-links a[aria-current="page"]{opacity:1; color:var(--acc); position:relative;}
.nav-links a[aria-current="page"]::after{content:''; position:absolute; left:0; right:.18em; bottom:-7px; height:1px; background:var(--acc);}
#menu a.mlink[aria-current="page"]{color:var(--acc);}

/* ---------- 麵包屑改為中文，字距收小 ---------- */
.crumbs{letter-spacing:.12em;}

/* ---------- 手機版：深淺色切換靠右、放在選單按鈕旁 ---------- */
@media (max-width:900px){ nav.top .theme-toggle{margin-left:auto; margin-right:10px;} }

/* ---------- 懸浮按鈕：手機版合併為一顆，點開後再顯示 LINE／電話 ---------- */
.fab .fab-toggle{display:none;}
.fab-toggle .ic-close{display:none;}
@media (max-width:900px){
  .fab .fab-toggle{display:flex; background:var(--acc); border-color:var(--acc); color:var(--onacc);}
  .fab .fab-act{opacity:0; pointer-events:none; transform:translateY(12px) scale(.9); height:0; margin-top:-10px; overflow:hidden; border-width:0;}
  .fab.open .fab-act{opacity:1; pointer-events:auto; transform:none; height:48px; margin-top:0; border-width:1px;}
  .fab.open .fab-toggle .ic-open{display:none;}
  .fab.open .fab-toggle .ic-close{display:block;}
  body.at-hero .fab .fab-toggle{opacity:0; pointer-events:none;}
}

/* ---------- 翻轉卡片：鍵盤焦點 ---------- */
.flip:focus-visible{outline:2px solid var(--acc); outline-offset:6px; border-radius:20px;}

/* ---------- footer 品牌字標縮小 ---------- */
.giant img{width:min(440px, 60%);}
.giant{padding:8px 0 24px;}

/* ---------- 404 頁 ---------- */
.err-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; pointer-events:auto;}

/* ---------- 子頁：大標上方服務名稱、首圖下方資訊列 ---------- */
.phero-eyebrow{font-size:14px; font-weight:500; letter-spacing:.08em; color:var(--acc); margin-bottom:18px; display:flex; align-items:center; gap:12px;}
.phero-eyebrow::before{content:''; width:22px; height:1px; background:var(--acc); flex:none;}
.phero-bar{font-family:inherit; letter-spacing:.04em; font-size:14px; color:var(--ink3); flex-wrap:wrap; row-gap:8px;}
.phero-bar .pb-scope{color:var(--ink2);}
.phero-bar .pb-aside{color:var(--mut); text-align:right;}
@media (max-width:768px){ .phero-bar{flex-direction:column; align-items:flex-start;} .phero-bar .pb-aside{text-align:left;} }
abbr[title]{text-decoration:underline dotted; text-underline-offset:3px; cursor:help;}

/* ---------- 品牌頁：SEO／GEO／AEO／AIO 說明 ---------- */
.cap-note{font-size:14.5px; line-height:1.9; color:var(--ink3); margin-top:22px; padding-left:14px; border-left:2px solid var(--acc);}

/* ---------- 文章作者署名 ---------- */
.article-meta .byline{color:var(--ink2); letter-spacing:.06em;}

/* ---------- 團隊卡片：照片、簡介、專長、聯絡 ---------- */
.member{display:flex; flex-direction:column; padding:0; overflow:hidden;}
.member .photo{aspect-ratio:4/5; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--line);}
.member .photo img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; transition:transform .6s cubic-bezier(.2,.9,.2,1);}
.member:hover .photo img{transform:scale(1.03);}
.member .avatar{margin:30px 30px 0;}
.member h3, .member .role, .member .bio, .member .m-tags, .member .m-cta{margin-left:30px; margin-right:30px;}
.member h3{margin-top:26px;}
.member .role{margin-top:6px; margin-bottom:0;}
.member .bio{font-size:14.5px; line-height:1.9; color:var(--ink3); margin-top:16px;}
.member .m-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.member .m-tags span{border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:12.5px; color:var(--ink2);}
.member .m-cta{margin-top:auto; padding:22px 0 28px; font-size:14px; color:var(--acc); transition:.25s;}
.member .m-cta:hover{letter-spacing:.04em;}
.member .bio{margin-bottom:0;}
.member .m-tags{margin-bottom:6px;}

/* ---------- 團隊照片：去背人像，背景由樣式產生並隨亮暗模式切換 ---------- */
.member .photo.cut{position:relative; background:radial-gradient(62% 48% at 50% 33%, rgba(232,85,45,.32), rgba(232,85,45,.07) 62%, transparent 78%), linear-gradient(180deg,#201a15 0%,#0e0c0a 100%);}
.member .photo.cut::before{content:''; position:absolute; left:50%; top:31%; width:74%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; border:1.5px solid rgba(255,170,110,.6); box-shadow:0 0 26px rgba(232,85,45,.45), inset 0 0 26px rgba(232,85,45,.22); pointer-events:none;}
.member .photo.cut img{position:relative; z-index:1;}
[data-theme="light"] .member .photo.cut{background:radial-gradient(62% 48% at 50% 33%, rgba(216,73,31,.18), rgba(216,73,31,.04) 62%, transparent 78%), linear-gradient(180deg,#F8F4ED 0%,#E8E1D4 100%);}
[data-theme="light"] .member .photo.cut::before{border-color:rgba(216,73,31,.45); box-shadow:0 0 22px rgba(216,73,31,.22), inset 0 0 22px rgba(216,73,31,.1);}

/* ---------- 團隊：四人一排（平板兩欄、手機一欄） ---------- */
.team{grid-template-columns:repeat(4,1fr); gap:20px; max-width:none;}
.team .member h3, .team .member .role, .team .member .bio, .team .member .m-tags, .team .member .m-cta{margin-left:24px; margin-right:24px;}
@media (max-width:1199px){ .team{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .team{grid-template-columns:1fr;} }

/* ---------- 法律顧問證書：僅供瀏覽，不可點擊、拖曳或長按儲存 ---------- */
.cert-frame.cert-locked{cursor:default;}
.cert-frame.cert-locked:hover{transform:none; border-color:var(--line);}
.cert-frame.cert-locked img{pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none;}