/* ==========================================================================
   ERP 總覽頁（重寫版）
   原則：結構只寫一份，A／B 兩款風格差異放在 token 與少數元件變體。
   A｜數智動態：白底＋淡藍，hero／CTA 深海軍藍，點是主角
   B｜人與情境：暖白底，人物照片是主角，點只做底紋
   ========================================================================== */

/* ---------- Tokens ---------- */
html[data-style="a"]{
  --bg:#fff; --bg-alt:#F5F8FB; --surface:#F5F8FB; --surface-alt:#fff;
  --text:#102A43; --muted:#4E5D70; --line:#E3E8EF;
  --accent:#005AFF; --brand:#00AFF0; --tint:linear-gradient(160deg,#E6F0FF,#D4E4FF); --logo-opacity:.6;
  --h-weight:600; --h1-weight:500; --h2-size:clamp(30px,3.2vw,44px); --h1-size:clamp(40px,4.6vw,64px);
  --dark:#0A1E3A; --dark-text:#fff; --dark-muted:rgba(226,238,252,.76); --dark-link:#8EC0FF; --dark-line:rgba(255,255,255,.22);
}
html[data-style="b"]{
  --bg:#F6F8FA; --bg-alt:#ECF0F4; --surface:#fff; --surface-alt:#fff;
  --text:#17212E; --muted:#5B6673; --line:#DCE2E9;
  --accent:#005AFF; --brand:#00AFF0; --tint:linear-gradient(160deg,#E8EDF2,#D9E1EA); --logo-opacity:.45;
  --h-weight:500; --h1-weight:400; --h2-size:clamp(32px,3.6vw,52px); --h1-size:clamp(40px,4.8vw,68px);
  --dark:#E6EBF1; --dark-text:#17212E; --dark-muted:#5B6673; --dark-link:#005AFF; --dark-line:#D3DBE5;
}
html[data-style]{--card-gap:24px;--header-h:76px}
html[data-style] body{background:var(--bg);color:var(--text)}

/* ---------- 共用基礎 ---------- */
.ov{font-family:var(--f-noto);color:var(--text)}
.ov *{box-sizing:border-box}
.ov img{display:block;max-width:100%}
.ov h1,.ov h2,.ov h3,.ov p{margin:0}
.ov .container{width:min(100%,1280px);margin:0 auto;padding-inline:32px}
.ov .section{padding:112px 0;background:var(--bg)}
.ov .section--alt{background:var(--bg-alt)}
.ov .kicker{color:var(--accent);font-size:14px;font-weight:500;line-height:1.5}
.ov .eyebrow{color:var(--accent);font-size:14px;font-weight:600;letter-spacing:.04em}
.ov .a-link{color:var(--accent)}
.ov .section-head{margin-bottom:56px}
.ov .section-head h2{font-size:var(--h2-size);font-weight:var(--h-weight);line-height:1.25;letter-spacing:-.02em}
.ov .section-head p{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.7}
.ov .section-head--center{text-align:center}
.ov .section-head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.ov .section-head--split p{max-width:440px;margin:0;text-align:right}

/* 右上角方形圓角箭頭（全卡可點） */
.ov .card-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.ov .card-link:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
/* 卡片右上箭頭：全站統一為 28px 白色圓形、無框無陰影，hover/focus 時浮現（觸控裝置常駐），與客戶案例卡一致 */
.ov .corner-arrow{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:#fff;color:#111;opacity:0;transform:translate(-4px,4px) scale(.85);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.ov .corner-arrow svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ov :is(.industry-card,.product-card):is(:hover,:focus-within) .corner-arrow{opacity:1;transform:none}
@media(hover:none){.ov .corner-arrow{opacity:1;transform:none}}

/* 外框膠囊標籤（B2B 維持 14px） */
.ov .tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ov .tag-list li{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500}

/* 數字 */
.ov .metric{display:flex;flex-direction:column;gap:6px}
.ov .metric strong{color:var(--accent);font-size:44px;font-weight:600;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.ov .metric strong small{font-size:.45em;font-weight:500}
.ov .metric span{font-size:16px;font-weight:500}

/* 風格切換（提案用） */
.style-switch{position:fixed;top:96px;right:16px;z-index:60;display:flex;flex-direction:column;overflow:hidden;border-radius:8px;background:#000}
.style-switch a{display:grid;place-items:center;width:36px;height:36px;color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.style-switch a[aria-current="page"]{color:#00AFF0}

/* ---------- 1. Hero ---------- */
.ov .hero{position:relative;overflow:hidden}
.ov .hero__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ov .hero__layout{position:relative;z-index:1}
.ov .hero h1{margin:18px 0 24px;font-size:var(--h1-size);font-weight:var(--h1-weight);line-height:1.12;letter-spacing:-.02em}
.ov .hero h1 em{font-style:normal}
.ov .hero__lead{max-width:560px;font-size:18px;line-height:1.7}
.ov .hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:36px}
.ov .marquee{position:relative;z-index:1;overflow:hidden;margin-top:72px;padding:0 0 48px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ov .marquee__track{display:flex;width:max-content;animation:ov-marquee 40s linear infinite}
.ov .marquee ul{display:flex;gap:88px;margin:0;padding:0 44px;list-style:none}
.ov .marquee img{width:auto;height:18px;opacity:var(--logo-opacity);filter:grayscale(1) brightness(.55) contrast(.9)}
html[data-style="a"] .ov .marquee img{filter:grayscale(1) brightness(1.6)}
html[data-style="b"] .ov .marquee img{opacity:.6}
@keyframes ov-marquee{to{transform:translateX(-50%)}}

/* A：深底、標題置中，點從四周流入匯成環 */
html[data-style="a"] .ov .hero{display:flex;flex-direction:column;min-height:max(760px,100svh);margin-top:calc(var(--header-h) * -1);padding-top:var(--header-h);background:#EAF2FD;color:#fff}
html[data-style="a"] .ov .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 50% 46%,rgba(0,120,220,.26),transparent 70%),linear-gradient(180deg,#07162B,#0A1E3A)}
/* header：在 A 的深色 hero 頂端時透明、文字反白；捲動後或展開選單時回到白底 */
#header-zone .site-header{transition:background-color .3s ease,border-color .3s ease}
html[data-style="a"].at-top:not(:has(#mega-panel:not([hidden]))) body:not(.mobile-menu-open) #header-zone .site-header{border-bottom-color:transparent;background:transparent}
html[data-style="a"].at-top:not(:has(#mega-panel:not([hidden]))) body:not(.mobile-menu-open) #header-zone :is(.nav-trigger,.nav-direct,.icon-button){color:#fff}
html[data-style="a"].at-top:not(:has(#mega-panel:not([hidden]))) body:not(.mobile-menu-open) #header-zone .brand img{filter:brightness(0) invert(1)}
html[data-style="a"].at-top:not(:has(#mega-panel:not([hidden]))) body:not(.mobile-menu-open) #header-zone .mobile-toggle span{background:#fff}
html[data-style="a"] .ov .hero__layout{display:flex;flex:1;align-items:center;justify-content:center;text-align:center}
html[data-style="a"] .ov .hero__copy{display:flex;flex-direction:column;align-items:center;max-width:720px}
html[data-style="a"] .ov .hero__stage{display:none}
html[data-style="a"] .ov .hero .eyebrow{color:#4CC3FF}
html[data-style="a"] .ov .hero h1 em{color:#4CC3FF}
html[data-style="a"] .ov .hero__lead{color:rgba(226,238,252,.78)}
html[data-style="a"] .ov .hero__actions{justify-content:center}
html[data-style="a"] .ov .hero .a-link{color:#fff}

/* B：左文右圖，人物大圖＋堆疊介面卡，背景點陣底紋 */
html[data-style="b"] .ov .hero{padding:72px 0 0;background:var(--bg)}
html[data-style="b"] .ov .hero__layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:64px}
html[data-style="b"] .ov .hero h1 em{color:var(--accent)}
html[data-style="b"] .ov .hero__lead{color:var(--muted)}
/* B hero 比例（參考 Ramp small-business）：圖右緣對齊 header/container，eyebrow 貼齊圖頂，標題區塊在下方空間垂直置中 */
@media(min-width:1021px){
html[data-style="b"] .ov .hero{padding:16px 0 0}
html[data-style="b"] .ov .hero__layout{grid-template-columns:minmax(0,1fr) min(52%,calc(100svh - 200px),660px);gap:clamp(40px,5vw,88px);align-items:stretch}
html[data-style="b"] .ov .hero__copy{display:flex;flex-direction:column;align-items:flex-start;padding:0}
html[data-style="b"] .ov .hero .eyebrow{margin:-4px 0 0;line-height:1.4}
html[data-style="b"] .ov .hero h1{margin-top:auto;font-size:clamp(40px,3.5vw,54px);line-height:1.15}
html[data-style="b"] .ov .hero__actions{margin-bottom:auto}
html[data-style="b"] .ov .hero__lead{max-width:520px}
html[data-style="b"] .ov .hero__stage{padding:0}
html[data-style="b"] .ov .hero__photo{aspect-ratio:1/1;border-radius:12px}
html[data-style="b"] .ov .hero__photo img{object-position:56% center}
html[data-style="b"] .ov .hero__stack{left:-48px;bottom:48px}
html[data-style="b"] .ov .marquee{margin-top:64px}
}
.ov .hero__stage{position:relative;padding:0 0 40px 40px}
.ov .hero__photo{overflow:hidden;aspect-ratio:16/11;border-radius:20px;background:#E4E9EF}
.ov .hero__photo img{width:100%;height:100%;object-fit:cover;object-position:48% center}
.ov .hero__stack{position:absolute;left:0;bottom:0;width:300px;height:110px}
.ov .stack-card{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(10,37,64,.08);border-radius:12px;background:#fff;color:#0A2540;transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s ease}
.ov .stack-card[data-pos="0"]{z-index:3}
.ov .stack-card[data-pos="1"]{z-index:2;transform:translateY(-14px) scale(.94);opacity:.85}
.ov .stack-card[data-pos="2"]{z-index:1;transform:translateY(-28px) scale(.88);opacity:.6}
.ov .stack-card i{flex:none;width:32px;height:32px;border-radius:50%;background:#E6F0FF}
.ov .stack-card--stock i{background:#DDF3E8}
.ov .stack-card--ar i{background:#EFEDFF}
.ov .stack-card span{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.ov .stack-card b{font-size:15px;font-weight:600;line-height:1.4}
.ov .stack-card small{overflow:hidden;color:#5E6A78;font-size:13px;line-height:1.4;white-space:nowrap;text-overflow:ellipsis}
.ov .stack-card em{color:#0E8A5F;font-size:14px;font-style:normal;font-weight:600}

/* ---------- 2. 營運流程 ---------- */
.ov .section--flow{position:relative;overflow:hidden;isolation:isolate}
html[data-style="a"] .ov .section--flow{padding-top:300px;background:linear-gradient(180deg,#0A1E3A 0,#0A1E3A 40px,#5D7FA6 140px,#EAF2FD 280px,#fff 100%)}
html[data-style="b"] .ov .section--flow{background:linear-gradient(180deg,var(--bg) 0%,#ECF0F4 100%)}
.ov .flow{display:grid;grid-template-columns:minmax(0,440px) minmax(0,520px);justify-content:center;align-items:center;gap:64px}
.ov .flow__list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.ov .flow__item{position:relative;padding:20px 0 24px}
.ov .flow__trigger{display:block;width:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:22px;font-weight:var(--h-weight);text-align:left;cursor:pointer}
.ov .flow__trigger:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.ov .flow__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.ov .flow__body>p{overflow:hidden;color:var(--muted);font-size:16px;line-height:1.75}
.ov .flow__item.is-active .flow__body{grid-template-rows:1fr}
.ov .flow__item.is-active .flow__body>p{padding-top:12px}
.ov .flow__progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.ov .flow__progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#005AFF,#7B61FF)}
.ov .flow__item.is-active .flow__progress span{animation:ov-progress var(--flow-duration,6000ms) linear forwards}
.ov .flow.is-paused .flow__progress span{animation-play-state:paused}
@keyframes ov-progress{to{width:100%}}
.ov .flow__stage{position:relative;aspect-ratio:520/546;overflow:hidden;border-radius:16px;background:var(--tint)}
.ov .flow__panel{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.ov .flow__panel.is-active{opacity:1;visibility:visible}
.ov .flow__panel iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ov .flow__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html[data-style="a"] .ov .flow__photo{display:none}
html[data-style="a"] .ov .flow__stage{background:radial-gradient(ellipse 80% 60% at 70% 30%,rgba(0,120,220,.28),transparent 70%),linear-gradient(160deg,#0B2244,#081831)}
.ov .flow__canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.ov .flow__panel{z-index:1}
html[data-style="b"] .ov .flow__canvas{display:none}
html[data-style="b"] .ov .flow__photo{filter:saturate(.9)}
html[data-style="b"] .ov .flow__panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,39,51,.05),rgba(29,39,51,.28))}
html[data-style="b"] .ov .flow__panel iframe{z-index:1}

/* ---------- 點線插圖（A 款）：點永遠「在做事」——沿線流動或組成形狀，不使用均勻點陣 ---------- */
.ov .dotline{display:block;width:100%;height:100%}
.ov .dotline .ln{fill:none;stroke:var(--dl-line,rgba(0,90,255,.18));stroke-width:1.2}
.ov .dotline .fl{fill:none;stroke:var(--dl-dot,rgba(0,90,255,.75));stroke-width:3;stroke-linecap:round;stroke-dasharray:0 14;animation:ov-dotflow var(--d,6s) linear infinite}
.ov .dotline .nd{fill:#fff;stroke:var(--dl-dot,rgba(0,90,255,.75));stroke-width:1.6}
.ov .dotline .nd--hub{fill:var(--dl-dot,rgba(0,90,255,.75));stroke:none}
.ov .dotline .st{fill:rgba(255,255,255,.7);stroke:var(--dl-line,rgba(0,90,255,.18));stroke-width:1.2}
@keyframes ov-dotflow{to{stroke-dashoffset:-140}}

/* ---------- 3. 產業 ---------- */
.ov .industry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap)}
.ov .industry-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:560px;overflow:hidden;border-radius:16px;isolation:isolate}
.ov .industry-card__photo,.ov .industry-card__illus{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;transition:scale .6s ease}
.ov .industry-card:hover :is(.industry-card__photo,.industry-card__illus){scale:1.04}
.ov .industry-card__copy{max-width:460px;padding:36px 84px 0 36px}
.ov .industry-card__copy h3{margin-bottom:12px;font-size:32px;font-weight:var(--h-weight);line-height:1.25}
.ov .industry-card__copy p{font-size:16px;line-height:1.7}
.ov .industry-card .tag-list{padding:0 36px 36px}
.ov .industry-card .corner-arrow{top:20px;right:20px}
html[data-style="a"] .ov .industry-card{background:#fff}
html[data-style="a"] .ov .industry-card__photo{display:none}
html[data-style="a"] .ov .industry-card__illus{inset:auto 0 0;height:100%;background:linear-gradient(180deg,transparent 40%,#F2F7FF)}
html[data-style="a"] .ov .industry-card__illus .dotline{position:absolute;left:0;right:0;bottom:84px;height:62%}
html[data-style="a"] .ov .industry-card__copy p{color:var(--muted)}
html[data-style="b"] .ov .industry-card__illus{display:none}
/* B 產業卡（參考 Ramp「Scale the team」）：圖在上、文字在圖下方，照片完整不被文字壓住 */
html[data-style="b"] .ov .industry-card{height:auto;justify-content:flex-start;overflow:visible;background:transparent;color:var(--text)}
html[data-style="b"] .ov .industry-card::before{content:none}
html[data-style="b"] .ov .industry-card__media{position:relative;order:-1;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:var(--tint)}
html[data-style="b"] .ov .industry-card__photo{z-index:0;scale:1;transition:filter .4s}
html[data-style="b"] .ov .industry-card:hover .industry-card__photo{scale:1;filter:brightness(1.04)}
html[data-style="b"] .ov .industry-card__copy{max-width:560px;padding:28px 0 0}
html[data-style="b"] .ov .industry-card__copy h3{font-size:28px}
html[data-style="b"] .ov .industry-card__copy p{color:var(--muted)}
html[data-style="b"] .ov .industry-card .tag-list{padding:20px 0 0}
html[data-style="b"] .ov .industry-card .tag-list li{border-color:var(--line);color:var(--text)}
html[data-style="b"] .ov .industry-card:hover h3{color:var(--accent)}


/* ---------- 4. 產品 Bento ---------- */
.ov .bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--card-gap)}
.ov .product-card{position:relative;grid-column:span 2;display:flex;flex-direction:column;padding:12px 12px 28px;border-radius:20px;background:var(--surface)}
.ov .product-card--smart{grid-column:span 4}
.ov .product-card__media{position:relative;height:240px;overflow:hidden;border-radius:12px;background:var(--tint)}
.ov .product-card__media img,.ov .product-card__illus{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale .5s ease}
.ov .product-card:hover :is(.product-card__media img,.product-card__illus),.ov .product-card:focus-within :is(.product-card__media img,.product-card__illus){scale:1.05}
.ov .product-card .kicker{margin:24px 16px 10px}
.ov .product-card h3{margin:0 16px 12px;font-size:24px;font-weight:var(--h-weight);line-height:1.3}
.ov .product-card__name{display:flex;align-items:center;height:31px}
.ov .product-card__name img{width:auto;max-width:100%;height:22px}
.ov .product-card__summary{margin:0 16px;color:var(--muted);font-size:16px;line-height:1.75}
.ov .product-card .corner-arrow{top:24px;right:24px}
.ov .product-card--smart .product-card__media img{object-position:center 14%}
html[data-style="a"] .ov .product-card__media img{display:none}
html[data-style="a"] .ov .product-card__illus{padding:20px 24px}
html[data-style="a"] .ov .product-card--workflow .product-card__media{background:linear-gradient(135deg,#E8F6F6,#D4E8EC)}
html[data-style="a"] .ov .product-card--cosmos .product-card__media{background:linear-gradient(135deg,#F1EFFF,#E2DEF7)}
html[data-style="a"] .ov .product-card--a1 .product-card__media{background:linear-gradient(135deg,#F1F3F6,#DFE6ED)}
html[data-style="b"] .ov .product-card__illus{display:none}
html[data-style="b"] .ov .product-card__media{height:300px}



/* ---------- 5. 客戶成果：Ramp Customers 式，三排卡片緩慢往左移動，第二排錯開半張，邊緣淡出 ---------- */
.ov .case-rows{display:flex;flex-direction:column;gap:20px;margin-inline:calc(50% - 50vw);padding-block:16px;margin-block:-16px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ov .case-row__track,.ov .case-row__dup{display:flex;gap:20px}
.ov .case-row__track{width:max-content;animation:ov-case-left 70s linear infinite}
.ov .case-row:nth-child(2) .case-row__track{margin-left:-180px;animation-duration:84s}
.ov .case-rows:hover .case-row__track{animation-play-state:paused}
@keyframes ov-case-left{to{transform:translateX(calc(-50% - 10px))}}
.ov .case-card{display:flex;flex:none;flex-direction:column;width:340px;height:300px;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface-alt)}
.ov .case-card__brand{display:flex;flex-direction:column;gap:4px;font-size:18px;font-weight:700;letter-spacing:.02em}
.ov .case-card__brand span{color:var(--muted);font-size:14px;font-weight:400;letter-spacing:0}
.ov .case-card__metric{display:flex;align-items:baseline;gap:4px;margin-top:auto}
.ov .case-card__metric strong{font-size:76px;font-weight:500;line-height:1;letter-spacing:-.03em}
.ov .case-card__metric small{font-size:18px;font-weight:500}
.ov .case-card__result{margin-top:10px;color:var(--muted);font-size:16px;line-height:1.5}
html[data-style="a"] .ov .case-card{color:var(--text)}
html[data-style="a"] .ov .case-card--tint{border-color:transparent;background:#E3EDFF;color:#0B4FD8}
html[data-style="a"] .ov .case-card--tint :is(.case-card__result,.case-card__brand span){color:#3D63B8}
html[data-style="b"] .ov .case-card--tint{border-color:transparent;background:#E3E9F0}
/* 實拍照片案例卡（兩款共用） */
/* 案例卡可點擊：hover 只出現右上箭頭圓鈕（參考 ElevenLabs customer stories）；logo 不做變色，PNG/JPG logo 也適用 */
.ov a.case-card{position:relative;overflow:hidden;isolation:isolate;color:inherit;text-decoration:none;cursor:pointer;transition:box-shadow .35s}
.ov a.case-card:is(:hover,:focus-visible){box-shadow:0 16px 32px -14px rgba(15,25,40,.24)}
.ov a.case-card--photo{color:#fff}
.ov a.case-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ov .case-card__go{position:absolute;top:18px;right:18px;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#111;opacity:0;transform:translate(-4px,4px) scale(.85);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.ov .case-card__go svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ov a.case-card:is(:hover,:focus-visible) .case-card__go{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ov .case-card__go{transition:opacity .2s}}
/* Logo 案例卡（參考 ElevenLabs/Ramp）：左上產業標籤、中央客戶 logo、底部一句成果。正式上線請換成客戶授權 logo（img） */
.ov .case-card--logo{gap:0}
.ov .case-card__tag{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.ov .case-card__logo{display:flex;flex:1;align-items:center;justify-content:center;margin:0;color:var(--text);font-size:22px;font-weight:700;letter-spacing:.06em;opacity:.78}
.ov .case-card__logo img{width:auto;max-width:70%;height:var(--h,44px);object-fit:contain}
.ov .case-card--logo .case-card__result{margin:0;color:var(--text);font-size:16px}
.ov .case-card--logo .case-card__result b{font-weight:700;color:var(--accent)}
html[data-style="b"] .ov .case-card--logo{border-color:var(--line);background:#EEF2F6}
html[data-style="a"] .ov .case-card--logo{background:#F2F6FC}
.ov .case-card--photo{position:relative;overflow:hidden;border-color:transparent;color:#fff;isolation:isolate}
.ov .case-card--photo .case-card__photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:35% center}
.ov .case-card--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,18,32,.55),rgba(8,18,32,.1) 45%,rgba(8,18,32,.75))}
.ov .case-card--photo :is(.case-card__brand span,.case-card__result){color:rgba(255,255,255,.85)!important}
.ov .case-card--photo .case-card__metric{color:#fff}

/* ---------- 6. AiGP ---------- */
.ov .feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap)}
.ov .feature-card{display:flex;flex-direction:column;align-items:flex-start;padding:32px;border-radius:16px;background:var(--surface)}
.ov .feature-card__mark{width:40px;height:40px;margin-bottom:24px;fill:#4CC3FF}
.ov .feature-card__mark .mark-dots{fill:none;stroke:#4CC3FF;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0 4.6}
html[data-style="b"] .ov .feature-card__mark{display:none}
.ov .feature-card h3{margin:8px 0 12px;font-size:20px;font-weight:var(--h-weight);line-height:1.4}
.ov .feature-card__body>p:not(.kicker){color:var(--muted);font-size:16px;line-height:1.75}
.ov .feature-card .a-link{margin-top:auto;padding-top:24px}


/* ---------- 6＋7. AiGP 與延伸應用：共用一段深色背景（模糊照片＋遮罩），卡片為半透明玻璃 ---------- */
.ov .feature-band{position:relative;overflow:hidden;background:#0A1A2E;color:#fff;isolation:isolate}
.ov .feature-band__bg{position:absolute;inset:-40px;z-index:-2;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(32px) saturate(.8);opacity:.5}
.ov .feature-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,18,32,.6),rgba(8,18,32,.88))}
.ov .feature-band .section{background:transparent}
.ov .feature-band #applications{padding-top:0}
.ov .feature-band .section-head p{color:rgba(226,238,252,.78)}
.ov .feature-band .feature-card{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ov .feature-band .feature-card__body>p:not(.kicker){color:rgba(226,238,252,.76)}
.ov .feature-band :is(.kicker,.a-link){color:#8EC0FF}

/* ===== 背景＋UI 卡（試作：製造業、Workflow ERP）=====
   規則：背景安靜不動、UI 在前、意義由 UI 傳達。A＝靜態點狀漸層（抽象）；B＝情境照片。兩款共用同一張 UI 卡 */
.ov .ui-card{position:relative;z-index:1;width:min(100%,300px);padding:16px 16px 14px;border-radius:12px;background:#fff;color:#17212E;font-size:12px;line-height:1.5;text-align:left;box-shadow:0 18px 40px -18px rgba(15,30,55,.45),0 0 0 1px rgba(15,30,55,.04)}
.ov .ui-card p{margin:0}
.ov .ui-card__head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.ov .ui-card__head b{font-weight:600}
.ov .ui-card__sub{margin-top:2px!important;color:#5B6673}
.ov .ui-card__kpi{color:#005AFF;font-weight:600}
.ov .ui-card__foot{display:flex;justify-content:space-between;margin-top:6px!important;color:#5B6673}
.ov .ui-card__foot b{color:#17212E}
.ov .ui-steps{display:flex;justify-content:space-between;margin:14px 0 10px;padding:0;list-style:none;color:#8A96A5}
.ov .ui-steps li{display:flex;align-items:center;gap:5px}
.ov .ui-steps li::before{content:"";width:8px;height:8px;border:1.5px solid #C5CFDB;border-radius:50%}
.ov .ui-steps li.is-done{color:#1C7A43}
.ov .ui-steps li.is-done::before{border-color:#1C9E5A;background:#1C9E5A}
.ov .ui-steps li.is-now{color:#005AFF;font-weight:600}
.ov .ui-steps li.is-now::before{border-color:#005AFF;box-shadow:0 0 0 3px rgba(0,90,255,.15)}
.ov .ui-meter{height:6px;overflow:hidden;border-radius:3px;background:#E8EDF2}
.ov .ui-meter span{display:block;width:var(--v);height:100%;border-radius:inherit;background:#005AFF}
.ov .ui-gantt{margin-top:12px}
.ov .ui-gantt__days{display:flex;justify-content:space-between;margin:0 0 6px 68px;color:#8A96A5;font-size:11px}
.ov .ui-gantt__days i{font-style:normal}
.ov .ui-gantt p{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:8px;padding:5px 0}
.ov .ui-gantt em{color:#5B6673;font-style:normal;white-space:nowrap}
.ov .ui-gantt p>span{position:relative;height:10px;border-radius:3px;background:repeating-linear-gradient(90deg,#EEF2F6 0 calc(20% - 1px),#fff calc(20% - 1px) 20%)}
.ov .ui-gantt p>span i{position:absolute;top:0;left:var(--s);width:var(--w);height:100%;border-radius:3px;background:#005AFF}
.ov .ui-gantt p>span i.b2{background:#7FA8FF}
.ov .ui-gantt p>span i.b3{background:#4CC3FF}
/* B：UI 疊在情境照左下 */
html[data-style="b"] .ov .has-ui :is(.industry-card__media,.product-card__media) .ui-card{position:absolute;left:20px;bottom:20px}
html[data-style="b"] .ov .product-card.has-ui .product-card__media img{object-position:100% center}
html[data-style="b"] .ov .product-card.has-ui .ui-card{left:16px;bottom:16px;width:250px;transform:scale(.86);transform-origin:left bottom}
/* A：靜態點狀漸層面板，UI 置中 */
html[data-style="a"] .ov .industry-card__media:not(.has-ui){display:contents}
html[data-style="a"] .ov .industry-card.has-ui .industry-card__illus{display:none}
html[data-style="a"] .ov .industry-card.has-ui .industry-card__copy{order:0}
html[data-style="a"] .ov .industry-card.has-ui .industry-card__media{order:1;flex:1;margin:24px 36px 0}
html[data-style="a"] .ov .industry-card.has-ui .tag-list{order:2;padding-top:24px}
html[data-style="a"] .ov .product-card.has-ui .product-card__illus{display:none}
html[data-style="a"] .ov .has-ui :is(.industry-card__media,.product-card__media){position:relative;display:grid;place-items:center;overflow:hidden;border-radius:12px;isolation:isolate;
  background:radial-gradient(70% 80% at 88% 95%,rgba(61,123,255,.22),transparent 70%),radial-gradient(55% 65% at 6% 4%,rgba(76,195,255,.2),transparent 70%),linear-gradient(160deg,#F5F8FF,#E8EFFB)}
html[data-style="a"] .ov .has-ui :is(.industry-card__media,.product-card__media)::before,
html[data-style="a"] .ov .has-ui :is(.industry-card__media,.product-card__media)::after{content:"";position:absolute;inset:0;z-index:-1}
html[data-style="a"] .ov .has-ui :is(.industry-card__media,.product-card__media)::before{background:radial-gradient(circle,#3D7BFF 1px,transparent 1.4px) 0 0/8px 8px;opacity:.6;
  -webkit-mask-image:radial-gradient(60% 70% at 88% 100%,#000,transparent 72%),radial-gradient(40% 50% at 4% 0%,rgba(0,0,0,.55),transparent 72%);mask-image:radial-gradient(60% 70% at 88% 100%,#000,transparent 72%),radial-gradient(40% 50% at 4% 0%,rgba(0,0,0,.55),transparent 72%)}
html[data-style="a"] .ov .has-ui :is(.industry-card__media,.product-card__media)::after{background:radial-gradient(circle,#7B6BFF .9px,transparent 1.3px) 4px 4px/8px 8px;opacity:.4;
  -webkit-mask-image:radial-gradient(45% 55% at 30% 105%,#000,transparent 72%);mask-image:radial-gradient(45% 55% at 30% 105%,#000,transparent 72%)}
/* AiGP：A 款維持三欄卡片；B 款改為左文右圖／左圖右文交錯（參考 Ramp「Built on the intelligence…」），右側為示意 UI，待換正式產品畫面 */
.ov .feature-card__media{display:none}
.ov .feature-card__body{display:contents}
html[data-style="b"] .ov .feature-grid--aigp{display:flex;flex-direction:column;gap:clamp(64px,8vw,112px);margin-top:16px}
html[data-style="b"] .ov .feature-grid--aigp .feature-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(40px,6vw,96px);padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-style="b"] .ov .feature-grid--aigp .feature-card:nth-child(even) .feature-card__media{order:-1}
html[data-style="b"] .ov .feature-grid--aigp .feature-card:nth-child(odd){grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
html[data-style="b"] .ov .feature-grid--aigp .feature-card:nth-child(odd) .feature-card__body{order:-1}
html[data-style="b"] .ov .feature-grid--aigp .feature-card:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
html[data-style="b"] .ov .feature-card__body{display:flex;flex-direction:column;align-items:flex-start;max-width:500px}
html[data-style="b"] .ov .feature-grid--aigp h3{margin:12px 0 16px;font-size:clamp(26px,2.4vw,34px);line-height:1.3}
html[data-style="b"] .ov .feature-grid--aigp .feature-card__body>p:not(.kicker){font-size:17px}
html[data-style="b"] .ov .feature-grid--aigp .a-link{margin-top:0;padding-top:28px}
html[data-style="b"] .ov .feature-card__media{position:relative;display:grid;place-items:center;aspect-ratio:4/3;padding:clamp(24px,4vw,56px);overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:radial-gradient(120% 90% at 20% 0%,rgba(110,160,230,.28),transparent 60%),linear-gradient(160deg,#1C3150,#0F1E33)}
html[data-style="b"] .ov .feature-card__media::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.14) .8px,transparent 1px) 0 0/12px 12px;-webkit-mask-image:linear-gradient(160deg,#000,transparent 75%);mask-image:linear-gradient(160deg,#000,transparent 75%)}
/* 示意 UI */
.ov .mock{position:relative;width:100%;max-width:440px;padding:20px;border-radius:14px;background:#fff;color:#17212E;font-size:13px;line-height:1.5;box-shadow:0 24px 48px -20px rgba(0,0,0,.55)}
.ov .mock p{margin:0}
.ov .mock__head{display:flex;align-items:center;gap:8px;margin-bottom:14px!important;font-weight:600;font-size:14px}
.ov .mock__head i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7CC4FF,#005AFF)}
.ov .mock__label{margin:16px 0 6px!important;color:#5B6673;font-size:12px}
.ov .mock-bubble{max-width:88%;padding:10px 12px;border-radius:12px;background:#EEF2F6}
.ov .mock-bubble--me{margin-left:auto!important;margin-bottom:10px!important;background:#005AFF;color:#fff;border-bottom-right-radius:4px}
.ov .mock-bubble--ai{max-width:100%;border-bottom-left-radius:4px}
.ov .mock-rows{margin:8px 0 0;padding:0;list-style:none}
.ov .mock-rows li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #DCE2E9}
.ov .mock-rows li:first-child{border-top:0}
.ov .mock-rows b{font-weight:600}
.ov .mock-rows span{color:#5B6673;font-size:12px}
.ov .pill{padding:2px 8px;border-radius:999px;background:#E3E9F0;color:#3B4A5C;font-size:12px;font-style:normal;white-space:nowrap}
.ov .pill--warn{background:#FFF1DC;color:#A15C00}
.ov .pill--ok{background:#DDF5E6;color:#1C7A43}
.ov .pill--bad{background:#FDE2E2;color:#B42323}
.ov .mock-actions{display:flex;gap:8px;margin-top:12px!important}
.ov .mock-btn{padding:6px 12px;border-radius:8px;background:#005AFF;color:#fff;font-size:12px}
.ov .mock-btn--ghost{background:#fff;color:#17212E;box-shadow:inset 0 0 0 1px #DCE2E9}
.ov .mock-sec__top{display:flex;align-items:center;gap:20px}
.ov .mock-ring{display:grid;place-content:center;flex:none;width:96px;height:96px;border-radius:50%;background:radial-gradient(closest-side,#fff 78%,transparent 80%),conic-gradient(#1C9E5A calc(var(--p)*1%),#E3E9F0 0);text-align:center}
.ov .mock-ring b{font-size:24px;line-height:1}
.ov .mock-ring small{color:#5B6673;font-size:11px}
.ov .mock-stat{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.ov .mock-stat b{display:block;font-size:18px}
.ov .mock-stat span{color:#5B6673;font-size:12px}
.ov .mock-esg__kpi{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ov .mock-esg__kpi small{display:block;color:#5B6673;font-size:12px}
.ov .mock-esg__kpi b{font-size:28px;line-height:1.2}
.ov .mock-esg__kpi span{margin-left:4px;color:#5B6673}
.ov .mock-bars{display:flex;align-items:flex-end;gap:10px;height:120px;margin:18px 0 14px;padding-bottom:1px;border-bottom:1px solid #DCE2E9}
.ov .mock-bars i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:#C9D6E5}
.ov .mock-bars i.is-now{background:#005AFF}
.ov .mock-legend{display:flex;gap:14px;margin:0;padding:0;list-style:none;color:#5B6673;font-size:12px}
.ov .mock-legend i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px}
.ov .mock-legend .s1{background:#17212E}.ov .mock-legend .s2{background:#005AFF}.ov .mock-legend .s3{background:#9DB4CC}
@media(max-width:1020px){
  html[data-style="b"] .ov .feature-grid--aigp .feature-card:nth-child(n){grid-template-columns:1fr;gap:28px}
  html[data-style="b"] .ov .feature-grid--aigp .feature-card:nth-child(n) .feature-card__body{order:-1}
  html[data-style="b"] .ov .feature-grid--aigp .feature-card:nth-child(n) .feature-card__media{order:0}
  html[data-style="b"] .ov .feature-card__media{aspect-ratio:auto;padding:28px 20px}
}
@media(max-width:560px){.ov .mock{padding:14px;font-size:12px}.ov .mock-ring{width:76px;height:76px}.ov .mock-bars{height:84px}}

/* ---------- 7. 延伸應用：功能項目為帶 icon 的連結 ---------- */
.ov .app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap)}
.ov .app-group{padding:28px 24px 12px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ov .app-group h3{margin:0 0 12px;font-size:20px;font-weight:var(--h-weight)}
.ov .app-group ul{margin:0;padding:0;list-style:none}
.ov .app-group li+li{border-top:1px solid rgba(255,255,255,.12)}
.ov .app-link{display:flex;align-items:center;gap:16px;padding:18px 0;color:#fff;text-decoration:none}
.ov .app-link__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#8EC0FF}
.ov .app-link__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ov .app-link__text{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.ov .app-link__text strong{font-size:16px;font-weight:600}
.ov .app-link__text span{color:rgba(226,238,252,.72);font-size:15px;line-height:1.6}
.ov .app-link>svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.ov .app-link:hover>svg,.ov .app-link:focus-visible>svg{opacity:1;transform:none}
.ov .app-link:focus-visible{outline:2px solid #8EC0FF;outline-offset:4px;border-radius:8px}

/* ---------- 8. FAQ ---------- */
.ov .faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:96px}
.ov .faq__head h2{margin-bottom:14px;font-size:var(--h2-size);font-weight:var(--h-weight);line-height:1.25;letter-spacing:-.02em}
.ov .faq__head p{max-width:280px;color:var(--muted);font-size:16px;line-height:1.7}
.ov .faq-list details{border-bottom:1px solid var(--line)}
.ov .faq-list summary{position:relative;padding:22px 44px 22px 0;font-size:17px;font-weight:600;line-height:1.5;list-style:none;cursor:pointer}
.ov .faq-list summary::-webkit-details-marker{display:none}
.ov .faq-list summary::after{content:"+";position:absolute;top:50%;right:6px;color:var(--accent);font-size:24px;font-weight:400;line-height:1;transform:translateY(-50%);transition:transform .36s cubic-bezier(.2,.7,.2,1)}
.ov .faq-list details[open] summary::after{content:"−"}
.ov .faq-list details[open]:not([data-closing]) summary::after{transform:translateY(-50%) rotate(180deg)}
.ov .faq-list summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.ov .faq-answer{overflow:hidden}
.ov .faq-list details p{padding:0 44px 24px 0;color:var(--muted);font-size:16px;line-height:1.85}

/* ---------- 9. 頁尾 CTA ---------- */
.ov .closing{padding:112px 0;background:var(--dark);color:var(--dark-text)}
.ov .closing__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:center;gap:120px}
.ov .closing h2{font-size:clamp(28px,2.4vw,34px);font-weight:var(--h-weight);line-height:1.3}
.ov .closing h2>span{display:inline-block}
.ov .closing__copy>p{margin-top:16px;color:var(--dark-muted);font-size:16px}
.ov .closing__actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:36px}
.ov .closing .a-link{color:var(--dark-link)}
.ov .closing__side{display:flex;flex-direction:column;align-items:flex-start}
.ov .closing__icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:20px;border:1px solid var(--dark-line);border-radius:8px;color:var(--dark-link)}
.ov .closing__icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.ov .closing__side h3{margin-bottom:8px;font-size:16px;font-weight:600}
.ov .closing__side p{margin-bottom:24px;color:var(--dark-muted);font-size:16px;line-height:1.7}

/* ---------- RWD ---------- */
@media(max-width:1020px){
  .ov .container{padding-inline:28px}
  .ov .flow{grid-template-columns:1fr;gap:40px}
  .ov .flow__stage{max-width:520px;width:100%;margin:0 auto}
  html[data-style="b"] .ov .hero__layout{grid-template-columns:1fr;gap:40px}
  .ov .feature-grid,.ov .app-grid{grid-template-columns:1fr}
  .ov .faq{gap:48px}
  .ov .closing__layout{gap:56px}
}
@media(max-width:780px){
  html[data-style]{--card-gap:16px}
  .ov .container{padding-inline:20px}
  .ov .section{padding:72px 0}
  .ov .section-head{margin-bottom:36px}
  .ov .section-head h2,.ov .faq__head h2{font-size:28px}
  .ov .section-head--split{display:block}
  .ov .section-head--split p,.ov .section-head--split .a-link{display:block;margin-top:14px;text-align:left}
  .ov .hero__lead{font-size:16px}
  html[data-style="a"] .ov .hero{min-height:620px}
  html[data-style="b"] .ov .hero{padding-top:48px}
  .ov .marquee{margin-top:48px}
  html[data-style="b"] .ov .hero h1{font-size:34px}
  .ov .hero__stage{padding:0 0 32px 16px}
  .ov .hero__stack{width:min(280px,85%)}
  .ov .industry-grid{grid-template-columns:1fr}
  .ov .industry-card{height:480px}
  .ov .industry-card__copy{padding:28px 72px 0 24px}
  .ov .industry-card__copy h3{font-size:26px}
  .ov .industry-card .tag-list{padding:0 24px 24px}
  .ov .bento{display:flex;gap:14px;margin-inline:-20px;padding-inline:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .ov .bento::-webkit-scrollbar{display:none}
  .ov .product-card{flex:0 0 82%;scroll-snap-align:start}
  .ov .product-card__media{height:220px!important}
  .ov .case-card{width:260px;height:240px;padding:22px}
  .ov .case-card__metric strong{font-size:56px}
  html[data-style="a"] .ov .section--flow{padding-top:220px}
  .ov .faq{grid-template-columns:1fr;gap:24px}
  .ov .faq__head p{max-width:none}
  .ov .closing{padding:72px 0}
  .ov .closing__layout{grid-template-columns:1fr;gap:32px}
  .ov .closing__side{padding-top:24px;border-top:1px solid var(--dark-line)}
  .style-switch{top:auto;bottom:96px}
}
@media(prefers-reduced-motion:reduce){
  .ov .marquee__track{animation:none}
  .ov .case-row__track,.ov .dotline .fl{animation:none}
  .ov :is(.flow__body,.flow__panel,.stack-card,.industry-card__photo,.industry-card__illus,.product-card__media img,.product-card__illus,.app-link>svg){transition:none}
  #header-zone .site-header{transition:none}
  .ov .flow__item.is-active .flow__progress span{animation:none;width:100%}
}