/* OneCrew product site — shared styles (CIS light theme) */
:root{
  --bg:#F8FAFC; --bg2:#EAF1FF; --card:#FFFFFF; --line:#DCE3EC;
  --ink:#142339; --muted:#525C6D; --brand:#2069FC; --brand2:#5658F9;
  --ok:#20C699; --warn:#B66708;
  --grad:linear-gradient(135deg,#2069FC 0%,#5658F9 100%);
  --grad-team:linear-gradient(135deg,#2069FC 0%,#20C699 50%,#FB9D29 100%);
  --soft:#EAF1FF; --shadow:0 16px 40px rgba(20,35,57,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  background:radial-gradient(circle at 18% 12%,rgba(32,105,252,.13),transparent 28%),
    radial-gradient(circle at 85% 20%,rgba(32,198,153,.12),transparent 24%),
    linear-gradient(180deg,#fff 0%,var(--bg) 42%,#fff 100%);
  color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.brandgrad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);
  background:rgba(248,250,252,.82);border-bottom:1px solid rgba(220,227,236,.7)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.3px}
.logo .dot{width:26px;height:26px;border-radius:8px;background:var(--grad);display:inline-block;
  box-shadow:0 4px 18px rgba(108,140,255,.5)}
.logomark{height:30px;width:auto;display:block;background:#fff;border-radius:8px;padding:3px 5px;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
.navlinks{position:relative;display:flex;gap:4px;color:var(--muted);font-size:14px;align-items:center}
.navlinks a{position:relative;z-index:1;padding:7px 12px;border-radius:9px;transition:color .2s}
.navlinks a:hover,.navlinks a.active{color:var(--ink)}
.navlinks a.active{font-weight:700}
.navind{position:absolute;z-index:0;top:50%;left:0;width:0;height:34px;transform:translateY(-50%);opacity:0;
  background:rgba(108,140,255,.16);border:1px solid rgba(108,140,255,.42);border-radius:9px;
  transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1),opacity .3s}
.btn{display:inline-block;padding:11px 20px;border-radius:11px;font-weight:700;font-size:14px;
  background:var(--grad);color:#fff;box-shadow:0 8px 24px rgba(120,110,255,.35);border:0;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(120,110,255,.5)}
.btn.ghost{background:transparent;border:1px solid var(--line);box-shadow:none;color:var(--ink)}

/* generic section */
section{padding:88px 0}
section.wrap{padding:84px 22px}   /* .wrap 的 padding 優先級較高，用 section.wrap 才真正吃到上下留白 */
[id]{scroll-margin-top:80px}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:800;font-size:13px;
  letter-spacing:1.5px;margin-bottom:14px;padding:6px 14px;border-radius:999px;
  background:rgba(108,140,255,.12);border:1px solid rgba(108,140,255,.35)}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px 1px var(--brand)}
h1{font-size:52px;line-height:1.08;font-weight:850;letter-spacing:-.5px}
h2{font-size:46px;font-weight:850;margin:4px 0 14px;letter-spacing:-.5px;line-height:1.15}
.sub{color:#c3ccef;max-width:680px;font-size:17.5px;line-height:1.6}
.lead{font-size:18px;color:var(--muted);max-width:520px}
.slogan{margin:16px 0 6px;font-size:21px;font-weight:750;color:var(--ink);line-height:1.4}
.slogan .en{display:block;font-size:13px;font-weight:800;letter-spacing:2px;margin-bottom:5px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* page header (sub pages) */
.pagehead{padding:66px 0 8px}
.pagehead .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
  border:1px solid var(--line);padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.02)}

/* hero */
.hero{padding:72px 22px 40px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
/* hero 常駐示範手機移除；右欄改放 CTA + 數據，示範改由「看即時示範」彈窗呈現 */
.hero-side .cta{margin-top:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
  border:1px solid var(--line);padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.02)}
.eyebrow b{color:var(--ok)}
.hero h1{margin:20px 0 16px}
.cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.stats{display:flex;gap:30px;margin-top:36px}
.stats div b{display:block;font-size:26px;font-weight:800}
.stats div span{font-size:13px;color:var(--muted)}

/* phone / chat demo */
.phone{justify-self:center;width:330px;background:#0d1226;border:1px solid var(--line);
  border-radius:30px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative}
.phone .top{display:flex;align-items:center;gap:10px;padding:6px 8px 12px}
.phone .ava{width:34px;height:34px;border-radius:50%;background:var(--grad)}
.phone .top .nm{font-weight:700;font-size:15px}
.phone .top .st{font-size:12px;color:var(--ok)}
.chat{height:420px;overflow:hidden;padding:6px 4px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:10px 13px;border-radius:15px;font-size:14px;opacity:0;transform:translateY(8px);
  animation:pop .4s forwards}
.msg.me{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:#1b2547;border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.bot .tag{font-size:11px;color:var(--brand);font-weight:700;margin-bottom:3px}
@keyframes pop{to{opacity:1;transform:none}}
.btnrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:3px}
.chip{font-size:12px;padding:6px 11px;border-radius:9px;background:#1b2547;border:1px solid var(--line);color:var(--brand)}

/* cards grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;transition:.2s}
.card:hover{transform:translateY(-4px);border-color:#3a4a72;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:23px;
  background:rgba(108,140,255,.14);margin-bottom:14px}
.card h3{font-size:18px;margin-bottom:7px}
.card p{color:var(--muted);font-size:14.5px}

/* team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.member{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.member .em{font-size:30px}
.member b{display:block;margin-top:8px;font-size:15px}
.member span{font-size:12.5px;color:var(--muted)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.step .n{font-size:44px;font-weight:850;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{margin:6px 0 6px;font-size:19px}
.step p{color:var(--muted);font-size:14.5px}

/* how-it-works step animations — 依序點亮：只有 .active 的步驟會變亮並播放 */
#how .step{opacity:.32;filter:saturate(.5);transition:opacity .55s ease,filter .55s ease}
#how .step.active{opacity:1;filter:none}
.step .viz{height:120px;background:#0d1226;border:1px solid var(--line);border-radius:14px;
  margin:14px 0 2px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:14px;
  transition:border-color .4s,box-shadow .4s}
#how .step.active .viz{border-color:#3a4a72;box-shadow:0 12px 34px rgba(108,140,255,.18)}

/* 1 · 打字交代：逐字打出後送出（僅 active 時播放，離開即重置） */
.viz1 .msgline{display:inline-flex;align-items:center;max-width:90%;background:#1b2547;
  border:1px solid var(--line);border-radius:13px;border-bottom-left-radius:5px;
  padding:9px 12px;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden}
.viz1 .type{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0}
.viz1 .caret{flex:none;width:2px;height:15px;background:var(--brand);margin-left:3px;opacity:0}
.step.active .viz1 .type{animation:type1 2.3s forwards}
.step.active .viz1 .msgline{animation:sent1 3s forwards}
.step.active .viz1 .caret{animation:blink .8s steps(1) infinite}
@keyframes type1{0%{max-width:0}70%{max-width:13em}100%{max-width:13em}}
@keyframes sent1{0%,62%{background:#1b2547;color:var(--ink);transform:translateX(0);border-color:var(--line)}
  74%,100%{background:linear-gradient(135deg,#6c8cff,#a06bff);color:#fff;transform:translateX(20px);border-color:transparent}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* 2 · 它去執行：程式碼列 / 儲存格逐條填入 + 齒輪轉動 */
.viz2 .win{width:80%;background:#0a0e1c;border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.viz2 .dots{display:flex;gap:5px;margin-bottom:10px}
.viz2 .dots i{width:8px;height:8px;border-radius:50%;background:#2b365a}
.viz2 .dots i:first-child{background:#ff6b6b}
.viz2 .dots i:nth-child(2){background:#ffcc66}
.viz2 .dots i:nth-child(3){background:#3ddc97}
.viz2 .rows{display:flex;flex-direction:column;gap:8px}
.viz2 .rows span{height:8px;border-radius:4px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.viz2 .rows span:nth-child(1){--w:70%}
.viz2 .rows span:nth-child(2){--w:92%;background:linear-gradient(90deg,#3ddc97,#6c8cff)}
.viz2 .rows span:nth-child(3){--w:55%}
.step.active .viz2 .rows span{animation:grow2 2s forwards}
.step.active .viz2 .rows span:nth-child(2){animation-delay:.3s}
.step.active .viz2 .rows span:nth-child(3){animation-delay:.6s}
.step.active .viz2 .gear{animation:spin2 2.6s linear infinite}
@keyframes grow2{0%{width:0;opacity:.35}60%,100%{width:var(--w,90%);opacity:1}}
.viz2 .gear{position:absolute;right:12px;bottom:9px;font-size:18px}
@keyframes spin2{to{transform:rotate(360deg)}}

/* 3 · 回報成果：結果卡片彈回聊天室後停留 */
.viz3 .rbubble{display:inline-flex;flex-direction:column;gap:6px;background:#1b2547;border:1px solid var(--line);
  border-radius:13px;border-bottom-left-radius:5px;padding:11px 14px;font-size:13.5px;opacity:0}
.viz3 .rbubble b{color:var(--ok)}
.viz3 .file{font-size:12px;color:var(--brand);background:rgba(108,140,255,.12);border:1px solid var(--line);
  border-radius:8px;padding:3px 9px}
.step.active .viz3 .rbubble{animation:pop3 2.4s forwards}
@keyframes pop3{0%{opacity:0;transform:translateY(26px) scale(.96)}30%,100%{opacity:1;transform:none}}

/* split panels */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}
.panel h3{font-size:19px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.panel ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.panel li{color:var(--muted);font-size:14.5px;padding-left:26px;position:relative}
.panel li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.panel.sec li:before{content:"🔒";left:0}

/* module detail rows (modules.html) */
.mod{display:grid;grid-template-columns:64px 1fr;gap:20px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:24px;margin-top:16px}
.mod .em{font-size:38px;line-height:1}
.mod h3{font-size:20px;margin-bottom:4px}
.mod .role{color:var(--brand);font-size:13px;font-weight:700;margin-bottom:10px}
.mod p{color:var(--muted);font-size:14.5px;margin-bottom:12px}
.mod .uses{display:flex;gap:8px;flex-wrap:wrap}
.mod .uses span{font-size:12.5px;padding:5px 11px;border-radius:9px;background:rgba(108,140,255,.12);
  border:1px solid var(--line);color:#c3ccef}

/* org tree (modules.html) */
.orgwrap{margin-top:30px;overflow:visible;text-align:center;padding:10px 0 4px}
.tree{display:inline-flex;justify-content:center}
.tree ul{padding-top:22px;position:relative;display:flex;justify-content:center}
.tree li{list-style:none;text-align:center;position:relative;padding:22px 7px 0}
.tree li::before,.tree li::after{content:'';position:absolute;top:0;right:50%;
  border-top:2px solid var(--line);width:50%;height:22px}
.tree li::after{right:auto;left:50%;border-left:2px solid var(--line)}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:only-child{padding-top:0}
.tree li:first-child::before,.tree li:last-child::after{border:0 none}
.tree li:last-child::before{border-right:2px solid var(--line);border-radius:0 6px 0 0}
.tree li:first-child::after{border-radius:6px 0 0 0}
.tree ul ul::before{content:'';position:absolute;top:0;left:50%;
  border-left:2px solid var(--line);width:0;height:22px}
.tree .node{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px 15px;
  min-width:98px;transition:.2s;cursor:default;outline:none}
.tree .node .em{font-size:22px;line-height:1}
.tree .node b{font-size:14px;white-space:nowrap}
.tree .node small{font-size:11px;color:var(--muted)}
.tree .node:hover{border-color:#3a4a72;transform:translateY(-2px)}
.tree .root{background:var(--grad);border:0;padding:15px 26px;box-shadow:0 12px 30px rgba(120,110,255,.35)}
.tree .root .em{font-size:26px}
.tree .root b{font-size:17px;color:#fff}
.tree .root small{color:rgba(255,255,255,.85)}
/* hover tooltip: 該模組的功能介紹 */
@media(hover:hover){.tree .node:hover{border-color:#4a5c8c;transform:translateY(-2px);z-index:20}}
.tree .node.tapped{border-color:#4a5c8c;z-index:25}
.tree .tip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);
  width:250px;background:#0d1226;border:1px solid var(--line);border-radius:12px;padding:13px 15px;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:40;box-shadow:0 18px 44px rgba(0,0,0,.55);pointer-events:none}
@media(hover:hover){.tree .node:hover .tip,.tree .node:focus-within .tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}}
.tree .node.tapped .tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.tree .tip b{display:block;font-size:14px;color:var(--ink);margin-bottom:6px}
.tree .tip p{font-size:12.5px;color:var(--muted);line-height:1.55;white-space:normal;margin-bottom:10px}
.tree .tip .uses{display:flex;gap:6px;flex-wrap:wrap}
.tree .tip .uses span{font-size:11px;padding:3px 8px;border-radius:7px;background:rgba(108,140,255,.12);
  border:1px solid var(--line);color:#c3ccef;white-space:nowrap}
.tree .tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#0d1226}
/* 根節點的 tip 改往下展開，避免蓋到標題 */
.tree .root .tip{top:calc(100% + 12px);bottom:auto}
.tree .root .tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#0d1226}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.price{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px;display:flex;flex-direction:column}
.price.hot{border-color:var(--brand);box-shadow:0 20px 50px rgba(108,140,255,.22);position:relative}
.price.hot .flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad);
  color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.price h3{font-size:20px}
.price .amt{font-size:30px;font-weight:850;margin:10px 0 2px;white-space:nowrap}
.price .amt small{font-size:13px;color:var(--muted);font-weight:500}
.price .desc{color:var(--muted);font-size:14px;min-height:42px}
.price ul{list-style:none;margin:18px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.price li{font-size:14px;color:#c3ccef;padding-left:24px;position:relative}
.price li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}

/* faq */
.faq{margin-top:30px;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 20px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--brand);font-size:22px}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--muted);font-size:14.5px;padding:0 0 18px}

/* contact form */
.formwrap{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;background:#0d1226;border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;color:var(--ink);font-size:14px;font-family:inherit}
.field textarea{min-height:110px;resize:vertical}
.contactside{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}
.contactside .row{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.contactside .row .em{font-size:22px}
.contactside .row b{display:block;font-size:15px}
.contactside .row span{color:var(--muted);font-size:13.5px}
.note{color:var(--warn);font-size:12.5px;margin-top:8px}

/* cta band */
.cta-band{background:var(--grad);border-radius:24px;padding:52px;text-align:center;margin:20px 0 0}
.cta-band h2{font-size:32px}
.cta-band p{color:rgba(255,255,255,.85);max-width:560px;margin:8px auto 24px}
.cta-band .btn{background:#fff;color:#3a2d7a}

/* footer */
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:13px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.badge{font-size:12px;color:var(--warn);border:1px solid var(--line);padding:3px 10px;border-radius:999px}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:30px}
  h1{font-size:38px}
  h2{font-size:32px}
  section.wrap{padding:56px 22px}
  .grid,.team,.steps,.split,.formwrap{grid-template-columns:1fr}
  .navlinks{display:none}
  .orgwrap{overflow-x:auto}
  .prices{grid-template-columns:repeat(2,1fr)}
  /* 手機：介紹框改固定在畫面底部彈出，避免被橫向捲動容器裁切 */
  .tree .node .tip{position:fixed;left:50%;right:auto;top:auto;bottom:18px;
    transform:translateX(-50%) translateY(12px);width:min(88vw,320px)}
  .tree .node.tapped .tip{transform:translateX(-50%) translateY(0)}
  .tree .root .tip{top:auto;bottom:18px}
  .tree .tip::after{display:none}
}
@media(max-width:560px){ .prices{grid-template-columns:1fr} }

/* ============ CIS light-theme overrides ============ */
/* logo mark: on light nav no white chip needed */
.logomark{background:transparent;box-shadow:none;padding:0}

/* soft card shadows (were dark rgba(0,0,0)) */
.card:hover{box-shadow:0 18px 40px rgba(20,35,57,.10)}
.price.hot{box-shadow:0 20px 50px rgba(32,105,252,.16)}
#how .step.active .viz{box-shadow:0 12px 34px rgba(32,105,252,.14)}
.tree .node:hover .tip,.tree .node.tapped .tip{box-shadow:var(--shadow)}
.tree .tip{box-shadow:var(--shadow)}

/* nav sliding indicator → brand blue */
.navind{background:rgba(32,105,252,.12);border-color:rgba(32,105,252,.38)}

/* card icon chip → soft blue */
.card .ic{background:var(--soft)}

/* hero eyebrow readable on light */
.eyebrow{background:rgba(255,255,255,.75)}

/* form inputs light */
.field input,.field textarea,.field select{background:#fff}

/* how-it-works viz boxes → light surfaces */
.step .viz{background:#fff}
.viz2 .win{background:#F1F5FB;border-color:var(--line)}
.viz2 .dots i{background:#CBD4E6}
.viz2 .dots i:first-child{background:#FB6B6B}
.viz2 .dots i:nth-child(2){background:#FFC24D}
.viz2 .dots i:nth-child(3){background:var(--ok)}
.viz1 .msgline{background:var(--soft);color:var(--ink);border-color:var(--line)}
.viz3 .rbubble{background:var(--soft);color:var(--ink);border-color:var(--line)}

/* org-tree tooltip → light card + light arrow */
.tree .tip{background:#fff;border-color:var(--line)}
.tree .tip b{color:var(--ink)}
.tree .tip::after{border-top-color:#fff}
.tree .root .tip::after{border-bottom-color:#fff}

/* PHONE demo stays dark for contrast (like the CIS mock) */
.phone{background:linear-gradient(135deg,#142339 0%,#243248 100%);border-color:rgba(255,255,255,.08);
  box-shadow:0 24px 70px rgba(20,35,57,.26)}
.phone .top .nm{color:#fff}
.phone .chat .msg.bot{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.92)}
.phone .chat .msg.bot .tag{color:#8fb0ff}
.phone .chat .chip{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16);color:#cfe0ff}

/* org-tree root uses the tri-color team gradient */
.tree .root{background:var(--grad-team)}

/* fix leftover dark-theme values on light */
.sub{color:var(--muted)}
.card:hover{border-color:rgba(32,105,252,.35)}
#how .step.active .viz{border-color:rgba(32,105,252,.35)}
.pagehead .eyebrow{background:rgba(255,255,255,.75)}

/* darken text for light-theme readability */
:root{--muted:#3F4A5C}
.tree .tip .uses span,.mod .uses span{color:#1D3A8A;background:var(--soft);border-color:#C7D6F5}
.price li{color:#2B3648}
.tree .tip p{color:#3F4A5C}
.card p,.mod p,.step p,.member span,.module p{color:#3F4A5C}
.faq p{color:#39434f}

/* ============ modal / lightbox (demo + module detail) ============ */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,15,25,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s}
.modal-card{position:relative;z-index:1;max-width:min(430px,94vw);max-height:90vh;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;
  box-shadow:0 30px 90px rgba(20,35,57,.35);transform:translateY(14px) scale(.98);opacity:0;transition:.22s}
.modal.show .modal-backdrop{opacity:1}
.modal.show .modal-card{transform:none;opacity:1}
.modal-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:15px;cursor:pointer;
  line-height:1;transition:.15s;z-index:2}
.modal-x:hover{color:var(--ink);border-color:var(--brand)}
.modal-phone{margin:0 auto}
.modal-detail b{display:block;font-size:19px;color:var(--ink);margin-bottom:10px}
.modal-detail p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:14px}
.modal-detail .uses{display:flex;gap:8px;flex-wrap:wrap}
.modal-detail .uses span{font-size:12.5px;padding:5px 11px;border-radius:9px;
  background:var(--soft,rgba(108,140,255,.12));border:1px solid var(--line);color:var(--brand)}

/* org-tree node clickable */
@media(hover:none){.tree .node{cursor:pointer}}

/* hover tip 邊緣防裁切：最左靠左緣、最右靠右緣展開 */
.tree ul ul li:first-child .tip{left:0;transform:translateX(0) translateY(6px)}
.tree ul ul li:first-child .node:hover .tip,.tree ul ul li:first-child .node:focus-within .tip{transform:translateX(0) translateY(0)}
.tree ul ul li:first-child .tip::after{left:46px}
.tree ul ul li:last-child .tip{left:auto;right:0;transform:translateX(0) translateY(6px)}
.tree ul ul li:last-child .node:hover .tip,.tree ul ul li:last-child .node:focus-within .tip{transform:translateX(0) translateY(0)}
.tree ul ul li:last-child .tip::after{left:auto;right:46px}

/* ============ 手機版樹狀圖：直向堆疊、每個節點橫向卡片（不用左右捲） ============ */
@media(max-width:900px){
  .orgwrap{overflow-x:visible;overflow-y:visible}
  .tree{display:block}
  .tree>ul{padding-top:0;display:block}
  .tree ul{display:block;padding-top:0}
  .tree ul ul{margin-top:12px;padding-left:14px;border-left:2px dashed var(--line)}
  .tree li{display:block;list-style:none;text-align:left;padding:0;margin:10px 0}
  .tree li::before,.tree li::after,.tree ul ul::before{display:none !important}
  .tree .node{display:flex;flex-direction:row;align-items:center;gap:14px;width:100%;min-width:0;
    padding:14px 16px;border-radius:14px}
  .tree .node .em{font-size:24px;flex:none}
  .tree .node b{font-size:15px;white-space:normal}
  .tree .node small{margin-left:auto;text-align:right;white-space:nowrap}
  .tree .root{width:100%}
  .tree .root .em{font-size:26px}
  .tree .root small{color:rgba(255,255,255,.9)}
}

/* demo 彈窗開啟時，隱藏 hero 右側常駐手機（避免背景出現第二支） */
body.demo-active #demo{opacity:0;pointer-events:none;transition:opacity .22s}