/* ============================================================
   博山科技 — 前台(官網)樣式
   ============================================================ */

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:oklch(99.6% 0.002 258 / .85);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.site-header .bar{display:flex; align-items:center; gap:1.5rem; height:72px}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-zh); font-weight:800;
  font-size:1.2rem; color:var(--navy-800); letter-spacing:-.01em; flex:0 0 auto}
.brand img{width:34px; height:34px; flex:0 0 auto}
.brand small{display:block; font-size:.7rem; font-weight:500; color:var(--muted); letter-spacing:.14em; margin-top:1px; white-space:nowrap}
.brand .bt{line-height:1; white-space:nowrap}

.nav{display:flex; align-items:center; gap:.3rem; margin-left:auto}
.nav > a,.nav > .has-mega > button{
  font-family:var(--font-zh); font-weight:600; font-size:var(--t-sm); color:var(--navy-700);
  padding:.6rem .85rem; border-radius:var(--r-md); background:none; border:0; cursor:pointer;
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:.3em; transition:color .15s, background .15s}
.nav > a:hover,.nav > .has-mega > button:hover,.nav > .has-mega:hover > button{color:var(--blue-700); background:var(--bg-alt)}

/* 帳號下拉(右側,靠右對齊) */
.account-dd .login{display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; background:none; border:0; font:inherit; font-family:var(--font-zh); font-weight:600}
.account-dd .av-mini{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:800; color:#fff; background:linear-gradient(135deg,#2563eb,#16c098)}
.account-dd .dd{left:auto; right:0; min-width:180px}
.account-dd .dd::before{left:auto; right:26px}
.account-dd .dd .dd-logout{display:flex; width:100%; align-items:center; padding:.62rem .8rem; border:0; background:none; cursor:pointer; font:inherit; font-family:var(--font-zh); font-size:var(--t-sm); font-weight:500; color:var(--ink); border-radius:var(--r-md)}
.account-dd .dd .dd-logout:hover{background:var(--blue-100); color:var(--blue-700)}
.account-dd .dd form{margin:0}
.nav .chev{width:14px; height:14px; transition:transform .2s var(--ease)}
.has-mega{position:static}

.header-cta{display:flex; align-items:center; gap:.5rem; margin-left:.4rem}
.header-cta .login{font-family:var(--font-zh); font-weight:600; font-size:var(--t-sm); color:var(--navy-700); padding:.5rem .6rem}

/* ---------- Mega menu ---------- */
.mega{position:absolute; left:0; right:0; top:100%; background:var(--surface);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index:99}
.has-mega:hover .mega,.has-mega:focus-within .mega,.mega.open{opacity:1; visibility:visible; transform:translateY(0)}
.mega-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; padding:2rem 0 2.2rem}
.mega-col h4{font-size:var(--t-sm); color:var(--blue-700); margin:0 0 .9rem; padding-bottom:.6rem;
  border-bottom:2px solid var(--blue-100); font-weight:700; display:flex; align-items:center; gap:.5em}
.mega-col h4 .dot{width:8px; height:8px; border-radius:2px; background:var(--accent)}
.mega-col a{display:block; padding:.4rem 0; color:var(--ink-soft); font-size:var(--t-sm); font-weight:500; transition:color .15s, padding .15s}
.mega-col a:hover{color:var(--blue-700); padding-left:.3rem}
.mega-col a span{display:block; font-size:var(--t-xs); color:var(--muted); font-weight:400; margin-top:1px}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1200px 600px at 85% -10%, oklch(94% 0.05 255), transparent 60%),
  radial-gradient(900px 500px at -5% 110%, oklch(96% 0.03 200), transparent 55%), var(--bg)}
.hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center;
  padding-block:clamp(3rem,7vw,5.5rem)}
.hero h1{font-size:clamp(2.3rem,5vw,3.6rem); line-height:1.1}
.hero h1 .hl{color:var(--blue-600)}
.hero .lead{font-size:clamp(1.05rem,2vw,1.25rem); margin:1.2rem 0 1.8rem}
.hero .actions{display:flex; gap:.8rem; flex-wrap:wrap}
.hero-figure{position:relative}
.hero-figure img{width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-lg)}
.hero-badge{position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:.7rem .95rem; display:flex; align-items:center; gap:.6rem; font-family:var(--font-zh)}
.hero-badge .k{font-size:var(--t-xs); color:var(--muted)}
.hero-badge .v{font-size:var(--t-lg); font-weight:800; color:var(--navy-800)}
.hero-badge.b1{left:-18px; top:18%}
.hero-badge.b2{right:-14px; bottom:14%}
.hero-badge .ic{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:#fff}

/* trust strip */
.trust{border-top:1px solid var(--line); padding-block:1.4rem}
.trust .row{display:flex; align-items:center; gap:2rem; flex-wrap:wrap; justify-content:center; color:var(--muted)}
.trust .lbl{font-family:var(--font-zh); font-size:var(--t-sm); font-weight:600}
.trust .tags{display:flex; gap:.6rem; flex-wrap:wrap}
.trust .tags .badge{background:var(--bg-alt); color:var(--ink-soft); font-weight:600}

/* ---------- Stats band ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem}
.stat-item{padding:1.2rem 0}
.stat-item .v{font-family:var(--font-mono); font-size:clamp(2rem,4vw,2.8rem); font-weight:700; color:var(--navy-800); letter-spacing:-.03em; line-height:1}
.stat-item .v small{color:var(--accent); font-size:.55em; font-weight:700; margin-left:.1em}
.stat-item .k{font-family:var(--font-zh); color:var(--ink-soft); font-size:var(--t-sm); margin-top:.5rem}
.stat-item + .stat-item{border-left:1px solid var(--line); padding-left:1.5rem}

/* ---------- Section heads ---------- */
.sec-head{max-width:680px; margin-bottom:2.5rem}
.sec-head.center{margin-inline:auto}
.sec-head h2{font-size:clamp(1.7rem,3.5vw,2.4rem)}

/* ---------- Services(四大產品) ---------- */
.svc-list{display:flex; flex-direction:column; gap:1.2rem}
.svc{display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:2.2rem; transition:box-shadow .25s var(--ease), transform .25s var(--ease)}
.svc:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px)}
.svc:nth-child(even){grid-template-columns:1fr 1.1fr}
.svc:nth-child(even) .svc-media{order:-1}
.svc-body .tag{margin-bottom:.7rem}
.svc-body h3{font-size:var(--t-2xl); margin-bottom:.5rem}
.svc-body > p{color:var(--ink-soft); margin-bottom:1.2rem}
.svc-items{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.4rem}
.svc-items li{display:flex; gap:.6rem; align-items:flex-start; font-size:var(--t-sm)}
.svc-items .ck{flex:0 0 auto; width:20px; height:20px; border-radius:6px; background:var(--blue-100);
  color:var(--blue-700); display:grid; place-items:center; margin-top:1px}
.svc-items .nm{font-family:var(--font-zh); font-weight:600; color:var(--navy-700)}
.svc-items .nt{display:block; font-size:var(--t-xs); color:var(--muted); font-weight:400}
.svc-media img{width:100%; border-radius:var(--r-lg); background:var(--bg-alt)}

/* ---------- Platform 區(深色) ---------- */
.platform{background:linear-gradient(160deg,var(--navy-900),oklch(30% 0.1 264)); color:#eaf1ff; border-radius:var(--r-xl); overflow:hidden}
.platform .wrap{display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:center; padding:clamp(2rem,5vw,3.5rem)}
.platform h2{color:#fff; font-size:clamp(1.7rem,3.5vw,2.4rem)}
.platform p{color:oklch(86% 0.03 255)}
.platform .feat{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:1rem}
.platform .feat li{display:flex; gap:.9rem; align-items:flex-start}
.platform .feat .ic{flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:oklch(100% 0 0 / .08); color:var(--cyan-500); border:1px solid oklch(100% 0 0 / .12)}
.platform .feat b{color:#fff; font-family:var(--font-zh); display:block; margin-bottom:.1rem}
.platform .feat span{color:oklch(82% 0.03 255); font-size:var(--t-sm)}
.platform-media img{width:100%; border-radius:var(--r-lg); box-shadow:0 20px 50px oklch(20% 0.1 264 / .5)}
.platform .actions{margin-top:1.8rem; display:flex; gap:.8rem; flex-wrap:wrap}

/* ---------- Capabilities ---------- */
.caps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.cap{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem;
  transition:border-color .2s, box-shadow .2s, transform .2s var(--ease)}
.cap:hover{border-color:var(--blue-500); box-shadow:var(--shadow-md); transform:translateY(-3px)}
.cap .ic{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; margin-bottom:1rem;
  background:var(--blue-100); color:var(--blue-700)}
.cap h3{font-size:var(--t-lg); margin-bottom:.35rem}
.cap p{font-size:var(--t-sm); color:var(--ink-soft); margin:0}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--blue-700),var(--blue-600)); color:#fff; border-radius:var(--r-xl);
  padding:clamp(2.2rem,5vw,3.5rem); text-align:center; position:relative; overflow:hidden}
.cta-band h2{color:#fff; font-size:clamp(1.6rem,3.5vw,2.3rem)}
.cta-band p{color:oklch(92% 0.03 255); max-width:46ch; margin:.6rem auto 1.6rem}
.cta-band .actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900); color:oklch(82% 0.02 255); margin-top:4rem; padding-block:3.5rem 2rem}
.site-footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem}
.site-footer h5{color:#fff; font-family:var(--font-zh); font-size:var(--t-sm); margin:0 0 1rem; letter-spacing:.03em}
.site-footer a{display:block; color:oklch(78% 0.02 255); font-size:var(--t-sm); padding:.3rem 0; transition:color .15s}
.site-footer a:hover{color:var(--cyan-500)}
.site-footer .fbrand{display:flex; align-items:center; gap:.6rem; color:#fff; font-family:var(--font-zh); font-weight:800; font-size:1.15rem; margin-bottom:.8rem}
.site-footer .fbrand img{width:32px; height:32px}
.site-footer .info{font-size:var(--t-sm); line-height:1.9; color:oklch(74% 0.02 255)}
.site-footer .info b{color:oklch(88% 0.02 255); font-weight:600}
.site-footer .flinks{margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid oklch(100% 0 0 / .1)}
.site-footer .flinks h5{margin-bottom:.8rem}
.site-footer .flinks-row{display:flex; flex-wrap:wrap; gap:.4rem 1.5rem}
.site-footer .flinks-row a{display:inline-flex; align-items:center; gap:.35rem; padding:.25rem 0}
.site-footer .flinks-row a::after{content:"↗"; font-size:.78em; opacity:.55}
.footer-bottom{margin-top:2rem; padding-top:1.4rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:var(--t-xs); color:oklch(66% 0.02 255)}

/* ---------- 行動選單 ---------- */
.hamburger{display:none; background:none; border:1px solid var(--line); border-radius:var(--r-md);
  width:42px; height:42px; cursor:pointer; color:var(--navy-700); place-items:center}
.mobile-menu{display:none}

/* ============================================================
   RWD
   ============================================================ */
@media (max-width:1024px){
  .hero .grid{grid-template-columns:1fr; gap:2rem}
  .hero-figure{max-width:560px; margin-inline:auto}
  .hero-badge.b1{left:0} .hero-badge.b2{right:0}
  .platform .wrap{grid-template-columns:1fr; gap:2rem}
  .platform-media{order:-1}
  .caps{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav,.header-cta .login{display:none}
  .hamburger{display:grid}
  .header-cta .btn{padding:.6rem 1rem}
  .svc,.svc:nth-child(even){grid-template-columns:1fr; gap:1.5rem}
  .svc:nth-child(even) .svc-media{order:0}
  .svc-media{max-width:420px}
  .stats{grid-template-columns:repeat(2,1fr); gap:.5rem}
  .stat-item + .stat-item{border-left:0; padding-left:0}
  .stat-item:nth-child(n+2){border-top:1px solid var(--line)}
  /* 行動 mega 改為頁面內展開,隱藏 hover 版 */
  .mega{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent}
}
@media (max-width:560px){
  .svc-items{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  /* 行動裝置:加大友站連結點擊區 */
  .site-footer .flinks-row{gap:.2rem 1.5rem}
  .site-footer .flinks-row a{padding:.5rem 0}
}

/* ---------- 行動側拉選單 ---------- */
.mobile-menu{position:fixed; inset:0; z-index:200; background:oklch(20% 0.05 264 / .5);
  opacity:0; visibility:hidden; transition:opacity .25s}
.mobile-menu.open{display:block; opacity:1; visibility:visible}
.mobile-panel{position:absolute; right:0; top:0; bottom:0; width:min(86vw,360px); background:var(--surface);
  box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .3s var(--ease);
  padding:1.2rem; overflow-y:auto}
.mobile-menu.open .mobile-panel{transform:translateX(0)}
.mobile-panel .mtop{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem}
.mobile-panel .x{background:none; border:0; font-size:1.5rem; cursor:pointer; color:var(--navy-700); width:40px; height:40px}
.mobile-panel details{border-bottom:1px solid var(--line); padding:.3rem 0}
.mobile-panel summary{font-family:var(--font-zh); font-weight:700; color:var(--navy-800); padding:.7rem .2rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between}
.mobile-panel summary::-webkit-details-marker{display:none}
.mobile-panel details a,.mobile-panel > a{display:block; padding:.55rem .2rem .55rem 1rem; color:var(--ink-soft); font-size:var(--t-sm); font-weight:500}
.mobile-panel > a{font-family:var(--font-zh); font-weight:700; color:var(--navy-800); padding-left:.2rem; border-bottom:1px solid var(--line)}
/* 行動選單:分類底下非連結的服務清單 */
.mobile-panel details .m-sublist{list-style:none; margin:.1rem 0 .5rem; padding:0}
.mobile-panel details .m-sublist li{position:relative; padding:.45rem .2rem .45rem 1.5rem; color:var(--muted); font-size:var(--t-sm)}
.mobile-panel details .m-sublist li::before{content:""; position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--blue-500)}
.mobile-panel .mcta{margin-top:1.2rem; display:grid; gap:.6rem}
@media (min-width:821px){ .mobile-menu{display:none !important} }

/* ============================================================
   線上試算器(/demo)
   ============================================================ */
.demo-hero{background:linear-gradient(160deg,var(--navy-900),oklch(32% 0.1 264)); color:#fff; padding-block:clamp(2.2rem,5vw,3.2rem)}
.demo-hero .eyebrow{color:var(--cyan-500)}
.demo-hero h1{color:#fff; font-size:clamp(1.8rem,4vw,2.6rem)}
.demo-hero p{color:oklch(86% 0.03 255); max-width:60ch}
.demo-wrap{margin-top:-2.5rem; margin-bottom:4rem}
.demo-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden}
.dz-tabs{display:flex; gap:.3rem; padding:.6rem; border-bottom:1px solid var(--line); background:var(--bg-alt); overflow-x:auto}
.dz-tab{flex:0 0 auto; display:inline-flex; align-items:center; gap:.5em; background:none; border:0; cursor:pointer;
  font-family:var(--font-zh); font-weight:600; font-size:var(--t-sm); color:var(--ink-soft);
  padding:.7rem 1.1rem; border-radius:var(--r-md); transition:background .15s, color .15s}
.dz-tab:hover{background:var(--surface); color:var(--navy-700)}
.dz-tab.on{background:var(--blue-700); color:#fff}
.dz-body{padding:clamp(1.4rem,3vw,2rem)}
.dz-panel[hidden]{display:none}
.dz-desc{background:var(--blue-100); color:var(--navy-700); border-radius:var(--r-md); padding:.8rem 1rem;
  font-size:var(--t-sm); margin-bottom:1.3rem; font-family:var(--font-zh)}
.dz-field{margin-bottom:1rem}
.dz-field label{display:block; font-size:var(--t-sm); color:var(--ink-soft); font-weight:600; margin-bottom:.4rem; font-family:var(--font-zh)}
.dz-field textarea,.dz-field input{width:100%; border:1px solid var(--line); border-radius:var(--r-md);
  padding:.7rem .9rem; font:inherit; background:var(--bg); color:var(--ink)}
.dz-field textarea{min-height:54px; resize:vertical; font-family:var(--font-mono)}
.dz-field input{font-family:var(--font-mono)}
.dz-field textarea:focus,.dz-field input:focus{border-color:var(--blue-500); outline:none; box-shadow:0 0 0 3px var(--blue-100)}
.dz-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.dz-row3{display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:end}
.dz-ops{display:flex; gap:.4rem}
.dz-ops button{width:46px; height:46px; border:1px solid var(--line); background:var(--bg); border-radius:var(--r-md);
  font-size:1.2rem; cursor:pointer; color:var(--navy-700); transition:.15s}
.dz-ops button.on{background:oklch(54% 0.185 50); border-color:oklch(54% 0.185 50); color:#fff; font-weight:800}
.dz-actions{display:flex; gap:.7rem; align-items:center; margin-top:1.2rem; flex-wrap:wrap}
.dz-status{font-size:var(--t-sm); color:var(--muted); font-family:var(--font-zh)}
.dz-result{display:none; margin-top:1.5rem; padding-top:1.5rem; border-top:1px dashed var(--line)}
.dz-rhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}
.dz-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
.dz-stat{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-md); padding:.9rem; text-align:center}
.dz-stat .k{font-size:var(--t-xs); color:var(--muted); font-family:var(--font-zh)}
.dz-stat .v{font-size:1.3rem; font-weight:700; color:var(--blue-700); margin-top:.25rem; word-break:break-all}
.dz-big{font-size:2.6rem; font-weight:800; color:var(--blue-700); text-align:center; font-family:var(--font-mono)}
.dz-eq{text-align:center; color:var(--ink-soft); font-family:var(--font-mono); margin-top:.3rem}
.dz-meta{color:var(--muted); font-size:var(--t-sm); margin:1rem 0 0}
.dz-err{color:var(--rose-500); font-family:var(--font-zh)}
.dz-pre{background:var(--navy-900); color:#cfe1ff; border-radius:var(--r-md); padding:1rem; overflow:auto; font-size:var(--t-xs); margin-top:.6rem}

/* 快速範例 chips(基本運算) */
.dz-egs{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1.2rem}
.dz-egs-l{font-size:var(--t-xs); color:var(--muted); font-family:var(--font-zh); margin-right:.1rem}
.dz-egs button{font-family:var(--font-zh); font-size:var(--t-xs); background:var(--bg-alt); border:1px solid var(--line);
  color:var(--navy-700); border-radius:999px; padding:.42rem .85rem; cursor:pointer; transition:background .15s, border-color .15s, color .15s}
.dz-egs button:hover{background:var(--blue-100); border-color:var(--blue-500); color:var(--blue-700)}

/* 分析結果圖表卡片 */
.dz-chart{margin-top:1.4rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.1rem 1.2rem}
.dz-chart-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.9rem}
.dz-chart-head h4{margin:0; font-size:var(--t-base); color:var(--navy-800); font-family:var(--font-zh)}
.dz-chart-head .sub{font-size:var(--t-xs); color:var(--muted); font-family:var(--font-mono); white-space:nowrap}
.dz-chart-box{position:relative; height:300px}

@media (max-width:640px){
  .dz-grid{grid-template-columns:repeat(2,1fr)}
  .dz-row,.dz-row3{grid-template-columns:1fr}
  .dz-row3 .dz-ops{justify-content:center}
  .dz-chart-box{height:240px}
}

/* ============================================================
   Landing(首頁)header:hero 上透明、捲動後變實心
   ============================================================ */
body.lp .site-header{position:fixed; left:0; right:0; top:0; background:transparent; border-bottom-color:transparent; backdrop-filter:none; transition:background .3s var(--ease), border-color .3s}
body.lp .site-header .brand,
body.lp .site-header .nav>a,
body.lp .site-header .nav>.has-mega>button,
body.lp .site-header .header-cta .login{color:#fff}
body.lp .site-header .brand small{color:oklch(82% 0.03 255)}
body.lp .site-header .nav>a:hover,
body.lp .site-header .nav>.has-mega>button:hover{background:oklch(100% 0 0/.12); color:#fff}
body.lp .site-header .hamburger{color:#fff; border-color:oklch(100% 0 0/.28)}
body.lp .site-header.scrolled{background:oklch(99.6% 0.002 258/.88); backdrop-filter:saturate(1.4) blur(10px); border-bottom-color:var(--line); box-shadow:var(--shadow-sm)}
body.lp .site-header.scrolled .brand,
body.lp .site-header.scrolled .nav>a,
body.lp .site-header.scrolled .nav>.has-mega>button,
body.lp .site-header.scrolled .header-cta .login{color:var(--navy-700)}
body.lp .site-header.scrolled .brand small{color:var(--muted)}
body.lp .site-header.scrolled .nav>a:hover,
body.lp .site-header.scrolled .nav>.has-mega>button:hover{background:var(--bg-alt)}
body.lp .site-header.scrolled .hamburger{color:var(--navy-700); border-color:var(--line)}

/* ============================================================
   內頁(關於 / 聯絡 / 平台 / 服務)
   ============================================================ */
.page-hero{position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(700px 380px at 80% -20%, oklch(45% 0.16 262/.5), transparent 60%),
    linear-gradient(160deg, oklch(24% 0.06 264), oklch(30% 0.09 264));
  padding-block:clamp(2.6rem,6vw,4.2rem)}
.page-hero .glow{position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(70px); opacity:.4;
  background:oklch(60% 0.16 240); left:-120px; top:-100px; pointer-events:none}
.page-hero .inner{position:relative; z-index:1; max-width:780px}
.page-hero .crumb{font-family:var(--font-zh); font-size:var(--t-sm); color:oklch(80% 0.03 255); margin-bottom:.7rem}
.page-hero .crumb a{color:var(--cyan-500)} .page-hero .crumb a:hover{color:#fff}
.page-hero h1{color:#fff; font-size:clamp(1.9rem,4.5vw,2.9rem); margin:0}
.page-hero .tag{margin-bottom:.8rem}
.page-hero p{color:oklch(87% 0.03 255); max-width:62ch; margin:.8rem 0 0; font-size:var(--t-lg)}

/* 資訊卡(關於/聯絡) */
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem}
.info-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem}
.info-card .ic{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:var(--blue-100); color:var(--blue-700); margin-bottom:.9rem}
.info-card h3{font-size:var(--t-base); margin:0 0 .3rem}
.info-card p{margin:0; color:var(--ink-soft); font-size:var(--t-sm); overflow-wrap:anywhere}
.info-card a{overflow-wrap:anywhere}
.info-card a{color:var(--blue-700)}

/* 價值/特色 */
.value-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem}
.value{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; transition:transform .25s var(--ease), box-shadow .25s}
.value:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.value .n{font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--blue-700)}
.value h3{font-size:var(--t-lg); margin:.5rem 0 .3rem}
.value p{margin:0; color:var(--ink-soft); font-size:var(--t-sm)}

/* 步驟 */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; counter-reset:s}
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem 1.3rem}
.step::before{counter-increment:s; content:counter(s); display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-700)); color:#fff; font-family:var(--font-mono); font-weight:700; margin-bottom:.9rem}
.step h3{font-size:var(--t-base); margin:0 0 .3rem} .step p{margin:0; color:var(--ink-soft); font-size:var(--t-sm)}

/* 模組卡(平台) */
.mod-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1rem}
.mod{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s}
.mod:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--blue-500)}
.mod .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--blue-100); color:var(--blue-700); margin-bottom:1rem}
.mod h3{font-size:var(--t-lg); margin:0 0 .35rem}
.mod p{margin:0 0 .8rem; color:var(--ink-soft); font-size:var(--t-sm)}
.mod code{font-family:var(--font-mono); font-size:var(--t-xs); background:var(--bg-alt); border:1px solid var(--line); color:var(--navy-700); padding:.2em .5em; border-radius:6px}

/* 聯絡表單 */
.cform{display:grid; gap:1rem}
.cform .two{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.cform label{display:block; font-family:var(--font-zh); font-size:var(--t-sm); font-weight:600; color:var(--navy-700); margin-bottom:.35rem}
.cform input,.cform textarea{width:100%; border:1px solid var(--line); border-radius:var(--r-md); padding:.75rem .9rem; font:inherit; background:var(--surface); color:var(--ink)}
.cform textarea{min-height:130px; resize:vertical}
.cform input:focus,.cform textarea:focus{outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-100)}
.cform .ok{display:none; background:oklch(95% 0.06 155); border:1px solid oklch(70% 0.12 155); color:oklch(45% 0.12 155); border-radius:var(--r-md); padding:.8rem 1rem; font-family:var(--font-zh); font-size:var(--t-sm)}
.map-embed{border:0; width:100%; height:100%; min-height:340px; border-radius:var(--r-lg)}

/* 服務細頁 item */
.svc-detail{display:grid; grid-template-columns:1.4fr 1fr; gap:2.5rem; align-items:start}
.svc-detail .media{position:sticky; top:90px; align-self:start}
.svc-detail .media img{width:100%; border-radius:var(--r-lg)}
.item-row{display:flex; gap:1rem; padding:1.3rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:1rem; transition:transform .2s var(--ease), box-shadow .2s}
.item-row:hover{transform:translateX(4px); box-shadow:var(--shadow-md)}
.item-row .ck{flex:0 0 auto; width:42px; height:42px; border-radius:11px; background:var(--blue-100); color:var(--blue-700); display:grid; place-items:center}
.item-row h3{font-size:var(--t-lg); margin:0 0 .25rem}
.item-row p{margin:0; color:var(--ink-soft); font-size:var(--t-sm)}

@media (max-width:860px){
  .steps{grid-template-columns:1fr 1fr}
  .svc-detail{grid-template-columns:1fr; gap:1.5rem}
  .svc-detail .media{position:static}
  .cform .two{grid-template-columns:1fr}
}
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* 內頁雙欄手機堆疊(覆寫 inline grid) */
@media (max-width:860px){
  .about-cols{grid-template-columns:1fr !important}
  .contact-cols{grid-template-columns:1fr !important}
  .contact-cols .map-embed{min-height:300px}
}

/* mega 選單標題方塊對齊修正 */
.mega-col h4{display:block}
.mega-col h4 a{display:flex; align-items:center; gap:.5em; line-height:1.2; color:var(--blue-700); transition:color .15s}
.mega-col h4 a:hover{color:var(--blue-600)}
.mega-col h4 .dot{width:9px; height:9px; border-radius:3px; background:var(--accent); flex:0 0 auto}

/* 同一分類底下的服務清單(非各自獨立連結,純展示該分類涵蓋的服務) */
.mega-col .mega-list{list-style:none; margin:0; padding:0}
.mega-col .mega-list li{position:relative; padding:.38rem 0 .38rem .95rem; color:var(--ink-soft); font-size:var(--t-sm); font-weight:500}
.mega-col .mega-list li::before{content:""; position:absolute; left:.1rem; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--blue-500)}
/* 分類入口連結 */
.mega-col .mega-more{display:inline-block; margin-top:.55rem; padding:0; color:var(--blue-600); font-size:var(--t-sm); font-weight:600; transition:color .15s, padding .15s}
.mega-col .mega-more:hover{color:var(--blue-700); padding-left:.25rem}

/* ============================================================
   Mega 選單(圖卡式)
   ============================================================ */
.mega-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.6rem 0 2rem}
.mega-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s}
.mega-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--blue-500)}
.mega-card .top{display:flex; gap:.8rem; align-items:center; padding:1rem 1.1rem .5rem}
.mega-card .thumb{width:50px; height:50px; border-radius:12px; overflow:hidden; background:var(--bg-alt); flex:0 0 auto}
.mega-card .thumb img{width:100%; height:100%; object-fit:cover}
.mega-card .tg{font-size:var(--t-xs); color:var(--blue-600); font-family:var(--font-zh); font-weight:600}
.mega-card h4{margin:.1rem 0 0; font-size:var(--t-base); color:var(--navy-800); border:0; padding:0; display:block}
.mega-card .desc{padding:0 1.1rem; color:var(--ink-soft); font-size:var(--t-sm); margin:.3rem 0 .7rem; line-height:1.6}
.mega-card .chips{padding:0 1.1rem .9rem; display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto}
.mega-card .chips span{font-size:var(--t-xs); color:var(--navy-700); background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-full); padding:.22em .65em; font-family:var(--font-zh)}
.mega-card .more{padding:.65rem 1.1rem; border-top:1px solid var(--line-soft); color:var(--blue-700);
  font-family:var(--font-zh); font-weight:600; font-size:var(--t-sm); display:flex; align-items:center; gap:.3em}
.mega-card:hover .more{gap:.6em}
@media (max-width:980px){ .mega-cards{grid-template-columns:1fr 1fr} }

/* ---------- 窄下拉(試用專區) ---------- */
.has-dd{position:relative}
.has-dd .dd{position:absolute; top:100%; left:0; min-width:248px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:.45rem; margin-top:.55rem; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; z-index:60}
.has-dd:hover .dd,.has-dd:focus-within .dd,.has-dd .dd.open{opacity:1; visibility:visible; transform:translateY(0)}
/* hover 橋接:補上按鈕與卡片之間的間隙,避免滑過時閃爍 */
.has-dd .dd::after{content:""; position:absolute; left:0; right:0; top:-.55rem; height:.55rem}
/* 朝上小三角 */
.has-dd .dd::before{content:""; position:absolute; top:-6px; left:26px; width:11px; height:11px;
  background:var(--surface); border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg)}
.has-dd .dd a{display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.62rem .8rem;
  border-radius:var(--r-md); color:var(--ink); font-family:var(--font-zh); font-size:var(--t-sm); font-weight:500;
  white-space:nowrap; transition:background .15s, color .15s}
.has-dd .dd a:hover{background:var(--blue-100); color:var(--blue-700)}
.has-dd .dd a.soon{color:var(--muted)}
.has-dd .dd a.soon:hover{background:var(--bg-alt); color:var(--muted)}
.has-dd .dd a.soon span{font-size:var(--t-xs); color:var(--muted); background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--r-full); padding:.15em .55em; font-weight:500}

/* ============================================================
   圖表卡片(子頁面)
   ============================================================ */
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem}
.chart-grid.c3{grid-template-columns:repeat(3,1fr)}
.chart-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3rem 1.4rem}
.chart-card .ch-head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem}
.chart-card h3{font-size:var(--t-base); margin:0}
.chart-card .ch-sub{font-size:var(--t-xs); color:var(--muted); font-family:var(--font-zh); margin-top:2px}
.chart-card .ch-kpi{font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--blue-700); line-height:1}
.chart-box{position:relative; height:230px}
.chart-box.sm{height:180px}
.chart-gauge-wrap{position:relative; text-align:center}
.chart-gauge-wrap .gv{position:absolute; left:0; right:0; bottom:6px}
.chart-gauge-wrap .gn{font-family:var(--font-mono); font-size:1.9rem; font-weight:700; color:var(--navy-800); line-height:1}
.chart-gauge-wrap .gl{font-size:var(--t-xs); color:var(--muted); font-family:var(--font-zh)}
.ch-note{font-size:var(--t-xs); color:var(--amber-600); font-family:var(--font-zh); background:var(--amber-100); border:1px dashed var(--amber-500); border-radius:var(--r-full); padding:.2em .7em}
@media (max-width:760px){ .chart-grid, .chart-grid.c3{grid-template-columns:1fr} }

/* ============================================================
   開發者 API 文件(/docs):左篩選 + 右規格
   ============================================================ */
.docs-bar{background:linear-gradient(160deg, oklch(24% 0.06 264), oklch(30% 0.09 264)); color:#fff; padding:clamp(1.6rem,4vw,2.4rem) 0}
.docs-bar .crumb{font-family:var(--font-zh); font-size:var(--t-sm); color:oklch(80% 0.03 255); margin-bottom:.5rem}
.docs-bar .crumb a{color:var(--cyan-500)}
.docs-bar h1{color:#fff; font-size:clamp(1.6rem,3.5vw,2.2rem); margin:0}
.docs-bar p{color:oklch(86% 0.03 255); margin:.5rem 0 0; font-size:var(--t-sm)}
.docs-bar code{font-family:var(--font-mono); background:oklch(100% 0 0/.1); color:#cfe1ff; padding:.2em .6em; border-radius:6px; font-size:.9em}

.docs-shell{display:grid; grid-template-columns:288px 1fr; align-items:start}
.docs-side{position:sticky; top:72px; max-height:calc(100dvh - 72px); overflow-y:auto; padding:1.5rem 1.1rem 2rem; border-right:1px solid var(--line)}
.docs-search{position:relative; margin-bottom:1.1rem}
.docs-search input{width:100%; border:1px solid var(--line); border-radius:var(--r-md); padding:.6rem .8rem .6rem 2.2rem; font:inherit; font-size:var(--t-sm); background:var(--surface)}
.docs-search input:focus{outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-100)}
.docs-search svg{position:absolute; left:.65rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted)}
.docs-nav .grp{font-family:var(--font-zh); font-size:var(--t-xs); font-weight:700; color:var(--muted); letter-spacing:.05em; padding:.9rem .5rem .4rem}
.docs-nav a{display:flex; align-items:center; gap:.5rem; padding:.5rem .55rem; border-radius:var(--r-md); color:var(--ink-soft); font-size:var(--t-sm); margin-bottom:1px; transition:background .12s, color .12s}
.docs-nav a:hover{background:var(--bg-alt); color:var(--navy-700)}
.docs-nav a.active{background:var(--blue-100); color:var(--blue-700); font-weight:600}
.docs-nav a .nm{font-family:var(--font-zh)}
.docs-nav .empty{color:var(--muted); font-size:var(--t-sm); padding:1rem .5rem}
.docs-method{font-family:var(--font-mono); font-weight:700; font-size:10px; padding:.25em .5em; border-radius:5px; letter-spacing:.03em; flex:0 0 auto}
.dm-get{background:oklch(94% 0.06 212); color:oklch(45% 0.13 212)}
.dm-post{background:oklch(94% 0.06 155); color:oklch(45% 0.12 155)}
.dm-put{background:oklch(95% 0.06 80); color:oklch(50% 0.13 70)}
.dm-delete{background:oklch(94% 0.05 18); color:oklch(50% 0.18 18)}

.docs-main{padding:2rem clamp(1.2rem,3vw,2.6rem) 4rem; min-width:0}
.docs-ep{scroll-margin-top:88px; padding-bottom:2.2rem; margin-bottom:2.2rem; border-bottom:1px solid var(--line)}
.docs-ep:last-child{border-bottom:0}
.docs-ep .ep-top{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.5rem}
.docs-ep .ep-path{font-family:var(--font-mono); font-weight:600; color:var(--navy-800); font-size:var(--t-base); word-break:break-all}
.docs-ep h2{font-size:var(--t-xl); margin:.3rem 0 .2rem}
.docs-ep .ep-desc{color:var(--ink-soft); margin:0 0 .4rem}
.docs-ep .ep-auth{font-size:var(--t-xs); color:var(--muted); font-family:var(--font-zh)}
.docs-ep h3{font-size:var(--t-sm); color:var(--blue-700); margin:1.5rem 0 .6rem; font-family:var(--font-zh); display:flex; align-items:center; gap:.4em}
.docs-ep h3::before{content:""; width:4px; height:14px; background:var(--accent); border-radius:2px}
.docs-params{width:100%; border-collapse:collapse; font-size:var(--t-sm); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.docs-params th{text-align:left; background:var(--bg-alt); color:var(--muted); font-size:var(--t-xs); font-family:var(--font-zh); padding:.6rem .8rem; border-bottom:1px solid var(--line)}
.docs-params td{padding:.6rem .8rem; border-bottom:1px solid var(--line-soft); vertical-align:top}
.docs-params tr:last-child td{border-bottom:0}
.docs-params code{font-family:var(--font-mono); background:var(--blue-100); color:var(--blue-700); padding:.1em .4em; border-radius:4px; font-size:.92em}
.docs-params .req{color:var(--rose-500); font-weight:600} .docs-params .opt{color:var(--muted)}
.docs-pre{position:relative; background:var(--navy-900); border-radius:var(--r-md); margin:0}
.docs-pre pre{margin:0; padding:1rem 1.1rem; overflow:auto; font-family:var(--font-mono); font-size:var(--t-xs); color:#cfe1ff; line-height:1.6}
.docs-pre .copy{position:absolute; top:.5rem; right:.5rem; background:oklch(100% 0 0/.1); color:#cfe1ff; border:1px solid oklch(100% 0 0/.15);
  border-radius:6px; padding:.25em .6em; font-size:var(--t-xs); cursor:pointer; font-family:var(--font-zh)}
.docs-pre .copy:hover{background:oklch(100% 0 0/.18)}
.docs-grid2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}

.docs-toggle{display:none}
@media (max-width:900px){
  .docs-shell{grid-template-columns:1fr}
  .docs-side{position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line); padding:1.1rem}
  .docs-nav{max-height:240px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-md); padding:.4rem}
  .docs-grid2{grid-template-columns:1fr}
  /* 行動裝置:加大「複製」按鈕點擊區 */
  .docs-pre .copy{min-height:34px; padding:.45em .8em; display:inline-flex; align-items:center}
}

/* ============================================================
   會員(登入 / 註冊 / 會員中心)
   ============================================================ */
.auth-sec{background:var(--bg-alt); min-height:60vh; display:flex; align-items:center}
.auth-wrap{max-width:460px; margin:0 auto; width:100%}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(1.6rem,4vw,2.4rem); box-shadow:var(--shadow-md)}
.auth-card .brand{justify-content:center; margin-bottom:1.2rem}
.auth-card h2{font-size:var(--t-2xl); margin:0 0 .3rem; text-align:center}
.auth-card .sub{text-align:center; color:var(--muted); font-size:var(--t-sm); margin:0 0 1.6rem}
.auth-alt{text-align:center; color:var(--muted); font-size:var(--t-sm); margin-top:1.4rem}
.auth-err{background:oklch(95% 0.05 18); border:1px solid var(--rose-500); color:oklch(50% 0.18 18); border-radius:var(--r-md); padding:.7rem 1rem; font-size:var(--t-sm); margin-bottom:1rem; font-family:var(--font-zh)}
.field-err{color:var(--rose-500); font-size:var(--t-xs); margin-top:.3rem; font-family:var(--font-zh)}
.auth-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:var(--t-sm)}
.auth-row label{display:inline-flex; align-items:center; gap:.4em; color:var(--ink-soft); font-family:var(--font-zh); cursor:pointer; white-space:nowrap}
.auth-row label input{width:16px;height:16px;flex:0 0 auto}
.acc-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.acc-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2rem}
.acc-item .k{font-size:var(--t-xs); color:var(--muted); font-family:var(--font-zh)}
.acc-item .v{font-size:var(--t-lg); color:var(--navy-800); font-weight:600; margin-top:.2rem; word-break:break-word}
@media (max-width:560px){ .acc-grid{grid-template-columns:1fr} }

/* 會員中心:分析紀錄表 */
.acc-tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg)}
.acc-tbl{width:100%; border-collapse:collapse; font-size:var(--t-sm); background:var(--surface)}
.acc-tbl th{text-align:left; background:var(--bg-alt); color:var(--muted); font-size:var(--t-xs); font-family:var(--font-zh); padding:.7rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap}
.acc-tbl td{padding:.8rem 1rem; border-bottom:1px solid var(--line-soft); color:var(--ink); vertical-align:middle}
.acc-tbl tr:last-child td{border-bottom:0}
.acc-tbl tbody tr:hover{background:var(--bg-alt)}
.acc-tbl .num{font-family:var(--font-mono); color:var(--navy-700)}
.acc-tbl .nm{font-family:var(--font-zh); font-weight:600; color:var(--navy-800)}
.acc-empty{background:var(--surface); border:1px dashed var(--line); border-radius:var(--r-lg); padding:2.5rem; text-align:center; color:var(--muted); font-family:var(--font-zh)}
/* 行動裝置:分析紀錄表保留可讀欄寬,整體橫向捲動 */
@media (max-width:560px){ .acc-tbl{min-width:540px} .acc-tbl td{white-space:nowrap} }

/* 修正:landing 深色 header 上,mega 觸發鈕 hover/開啟維持白字(半透明底,不變淺色) */
body.lp .site-header .nav>.has-mega:hover>button,
body.lp .site-header .nav>.has-mega:focus-within>button{background:oklch(100% 0 0/.14); color:#fff}
/* 捲動後 header 變白底,觸發鈕改深色字 + 淺底 */
body.lp .site-header.scrolled .nav>.has-mega:hover>button,
body.lp .site-header.scrolled .nav>.has-mega:focus-within>button{background:var(--bg-alt); color:var(--blue-700)}