/* ═══════════════════════════════════════════════════════════════════
   Alpha Projects — Navy Theme v3 (theme-blue.css)
   全站視覺主題唯一入口。各頁內嵌 <style> 只管版面骨架;
   顏色、漸層、霧面、hero、資料面板全部在這裡改。
   本版:深海軍藍 + 資料青 (ali-hero 色系)

   ── 調整旋鈕總覽 ──
   1. 色板:--ali-navy-* / --ali-teal-*                  → 全站色調
   2. 霧面:--glass 末位數字、--frost blur                → 卡片質感
   3. 巨字:.mega .l1 的 clamp() 與 color                 → 首頁標題
   4. 面板:.viz 背景;地圖動畫樣式在 index.html 的 #akmap
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ali-hero palette */
  --ali-navy-950:#071320;
  --ali-navy-900:#0A1826;
  --ali-navy-800:#0F2233;
  --ali-navy-700:#16324A;
  --ali-teal:#2FB8A6;
  --ali-teal-bright:#8FE8DC;
  --ali-mist:#8FA9BA;
  --ali-paper:#EEF4F6;

  /* legacy blue tokens(白色玻璃卡內部仍沿用)*/
  --g-deep:#1E33C0;
  --g-mid:#4A6BDC;
  --g-soft:#8FAAEE;
  --g-pale:#DCE7FB;

  --glass:rgba(255,255,255,.8);
  --frost:blur(16px) saturate(1.25);
  --title-ink:var(--ali-paper);     /* 深底 → 淺色標題 */
  --title-sub:#B9CBD6;
  --head-muted:var(--ali-mist);
}

/* ── 背景:ali-hero 深海軍藍 + 青色微光 ── */
body{
  background:
    radial-gradient(1100px 620px at 74% 18%, var(--ali-navy-800) 0%, rgba(15,34,51,0) 62%),
    radial-gradient(760px 520px at 8% 82%, rgba(22,50,74,.85) 0%, rgba(22,50,74,0) 70%),
    radial-gradient(520px 380px at 88% 88%, rgba(47,184,166,.10) 0%, rgba(47,184,166,0) 70%),
    var(--ali-navy-950);
  background-attachment:fixed;
  min-height:100vh;
}

/* ── 顆粒感(grain)── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}
header.site, main, footer{position:relative;z-index:1}

/* ── 導覽與 header:深底淺字 ── */
.topnav{border-bottom:1px solid rgba(143,169,186,.22)}
.topnav a{color:#A9BFCD;text-decoration:none}
.topnav a:hover{color:var(--ali-teal-bright)}
.topnav{position:relative;left:50%;display:flex;width:min(1040px,calc(100vw - 40px));align-items:center;gap:8px 28px;margin-left:0;padding:22px 0 18px;font-size:16px;transform:translateX(-50%)}
.topnav>a{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  box-sizing:border-box;
  padding:9px 17px;
  border:1px solid transparent;
  border-radius:999px;
  color:#A9BFCD;
  line-height:1;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  transition:color .16s ease,border-color .16s ease,box-shadow .16s ease,text-shadow .16s ease;
}
.topnav>a:hover{
  border-color:rgba(183,255,74,.72);
  color:#B7FF4A;
  text-shadow:0 0 12px rgba(183,255,74,.55);
}
.topnav>a:focus-visible{
  border-color:var(--ali-teal-bright);
  color:#B7FF4A;
  outline:2px solid var(--ali-teal-bright);
  outline-offset:2px;
  text-shadow:0 0 12px rgba(183,255,74,.55);
}
.topnav>a.nav-choice-active{
  border-color:var(--ali-teal);
  color:var(--ali-teal-bright);
  text-shadow:none;
  box-shadow:0 0 18px rgba(47,184,166,.3),inset 0 -2px 0 rgba(47,184,166,.58);
}
.topnav .nav-report{margin-left:auto;display:inline-flex;align-items:center;gap:10px}
.topnav .nav-report > a:not(.lang-toggle){
  color:var(--ali-navy-950);font-weight:700;
  background:var(--ali-teal);
  border:1px solid rgba(143,232,220,.4);border-radius:99px;padding:4px 16px;
  transition:background .15s ease, transform .15s ease;
}
.topnav .nav-report > a:not(.lang-toggle):hover{background:var(--ali-teal-bright);color:var(--ali-navy-950);transform:translateY(-1px)}
@media(max-width:640px){.topnav .nav-report{margin-left:0;flex-basis:100%;margin-top:4px}}
@media(max-width:760px){
  .topnav{width:calc(100vw - 32px);gap:5px 18px;padding:16px 0 14px;font-size:14px}
  .topnav>a{min-height:36px;padding:8px 13px}
  .topnav .nav-report>a:not(.lang-toggle){padding:6px 16px;font-size:14px}
}

/* services language switcher */
.topnav.has-lang .lang-toggle{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(143,169,186,.35);
  border-radius:99px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
}
.topnav.has-lang .lang-toggle a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 11px;
  border:1px solid transparent;
  border-radius:99px;
  color:var(--ali-teal-bright);
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  text-decoration:none;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.topnav.has-lang .lang-toggle a:hover{
  color:#FFD84D;
  background-color:rgba(255,216,77,.08);
}
.topnav.has-lang .lang-toggle a.on{
  z-index:1;
  border-color:var(--ali-teal);
  color:var(--ali-paper);
  background-color:rgba(47,184,166,.16);
  box-shadow:0 0 0 1px rgba(47,184,166,.28),0 0 12px rgba(47,184,166,.42);
}
.topnav.has-lang .lang-toggle a:focus-visible{
  z-index:2;
  color:#FFD84D;
  border-color:var(--ali-teal-bright);
  outline:2px solid var(--ali-teal-bright);
  outline-offset:2px;
  box-shadow:0 0 0 1px rgba(47,184,166,.25),0 0 12px rgba(47,184,166,.38);
}

nav.crumbs, nav.crumbs a, nav.crumbs span{color:var(--head-muted)}
header.site h1{color:var(--title-ink)}
header.site p, header.site .entity-def{color:#C6D5DE}
header.site strong{color:var(--title-ink)}
header.site .updated{color:var(--head-muted)}
header.site a{color:var(--ali-teal-bright)}
.topnav a{text-decoration:none}

/* 各頁大標題(index 以外)*/
.h1-display{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.98;font-size:clamp(34px,6.5vw,72px);color:var(--title-ink)}
header.site .service-report-title{font-size:clamp(27.2px,5.2vw,57.6px)}

/* ── 首頁 hero ── */
.hero{text-align:center;padding:38px 0 4px}
.mega{margin:24px 0 0}
.mega .l1{display:block;font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:.9;font-size:clamp(35px,7.34vw,101px);color:var(--title-ink)}
.mega .l1>span{display:block}
.hero h1.hero-topic{margin:28px 0 0;color:var(--title-ink);font-family:'Archivo',sans-serif;font-size:clamp(12.5px,1.75vw,20px);font-weight:600;line-height:1.15;letter-spacing:.055em}
.hero .viz{margin-top:44px}
@media(max-width:640px){
  .hero{padding-top:30px}
  .mega{margin-top:20px}
  .mega .l1{font-size:clamp(34px,15vw,58px)}
  .hero h1.hero-topic{margin-top:24px;font-size:clamp(11.5px,3.5vw,15.5px);letter-spacing:.035em}
  .hero .viz{margin-top:36px}
}
.data-intro{width:100%;max-width:none;margin:44px 0 0;padding:0;background:transparent;text-align:left}
.data-intro__content{width:100%;max-width:none}
header.site .data-intro__eyebrow{margin:0;color:var(--ali-teal-bright);font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}
header.site .data-intro__title{margin:7px 0 0;color:#D8E3E9;font-family:'Fraunces',serif;font-size:21px;font-weight:500;line-height:1.35}
header.site .data-intro__lead{max-width:none;margin:12px 0 0;color:#C6D5DE;font-size:15.5px;line-height:1.6}
header.site .data-intro__description{max-width:none;margin:10px 0 0;color:#B9CBD6;font-size:15px;line-height:1.6}
.data-intro__topics{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.data-intro__topics span{padding:4px 9px;border:1px solid rgba(143,169,186,.28);border-radius:99px;color:#C6D5DE;font-size:12px;line-height:1.35}
header.site .data-intro__note{margin:14px 0 0;color:#A9BFCD;font-size:12.5px;line-height:1.55}
.data-intro__meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:16px;color:var(--head-muted);font-size:11.5px;line-height:1.5}
header.site .data-intro__meta a{color:var(--ali-teal-bright);font-weight:600;text-decoration:none}
header.site .data-intro__meta a:hover{text-decoration:underline}
@media(max-width:820px){
  .data-intro{max-width:100%;margin-top:42px}
}
@media(max-width:640px){
  .data-intro{margin-top:40px}
  header.site .data-intro__title{font-size:20px}
  header.site .data-intro__lead{font-size:15px}
  header.site .data-intro__description{font-size:14.5px}
  .data-intro__meta{font-size:11.5px}
}

/* ── 首頁形象面板(深海軍藍,內容為 index.html 內嵌 #akmap 動畫)── */
.viz{position:relative;margin:36px auto 4px;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg,var(--ali-navy-900) 0%,var(--ali-navy-700) 58%,var(--ali-navy-800) 100%);
  border:1px solid rgba(111,216,203,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  padding:26px 26px 0}
.viz-grid{position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(143,169,186,.08) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(143,169,186,.055) 0 1px, transparent 1px 44px)}
.viz-svg{position:relative;padding:6px 0 10px}
.viz-svg > svg{display:block;width:100%;height:auto;max-height:72vh;margin:0 auto}
@media(max-width:640px){
  .viz{padding:18px 16px 0}
}

/* ── 內容區:霧面玻璃卡片(白玻璃浮在深藍上)── */
main > section, main > article, main > aside, .side section{
  background:var(--glass);
  -webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);
  border:1px solid rgba(255,255,255,.5);
  border-radius:16px;
  box-shadow:0 16px 44px rgba(2,8,16,.5), inset 0 1px 0 rgba(255,255,255,.6);
  padding:30px 28px;
  margin:30px 0;
}
.side section{padding:18px;margin:0 0 18px}
@supports not (backdrop-filter: blur(1px)){
  main > section, main > article, main > aside, .side section{background:rgba(255,255,255,.94)}
}
@media (max-width:640px){main > section, main > article, main > aside{padding:22px 18px;border-radius:14px}}

/* 玻璃上的第二層 */
.snapshot .stat{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.75)}
.zonecard{background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.8)}
.zonecard:hover{border-color:var(--ali-teal);box-shadow:0 8px 22px rgba(2,10,18,.25)}
.zonecard h3{color:#0E4F76}
.zonecard .go{color:var(--ali-teal)}

/* services 頁價格帶 */
header.site .priceband{
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);
  border:1px solid rgba(255,255,255,.55);border-left:4px solid var(--ali-teal);
  color:#16242C;
}
header.site .priceband .tag{color:#0E7A6E}
header.site .priceband .note{color:#5B6B78}

/* Services: shared EN / 中文 layout */
.service-container{
  box-sizing:border-box;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:20px;
}
.service-container .entity-def{
  width:100%;
  max-width:none;
}
.service-container p{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.service-container .priceband .note,
.service-container .preview-notes ul,
.service-container .quote,
.service-container .dyn-note,
.service-container .disclaimer,
.service-container .form-msg,
.service-container #confirmation ol{
  max-width:none;
}
header.service-container .priceband,
main.service-container > .service-card{
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin-inline:0;
}
header.service-container .priceband .price-action{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
}
header.service-container .priceband .report-order-entry{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 18px;
  border:1px solid #374151;
  border-radius:99px;
  background:#374151;
  color:#FFD84D;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
header.service-container .priceband .report-order-entry:hover{
  border-color:#1F2937;
  background:#1F2937;
  color:#FFD84D;
}
header.service-container .priceband .report-order-entry:focus-visible{
  outline:2px solid var(--ali-teal);
  outline-offset:3px;
  box-shadow:0 0 12px rgba(47,184,166,.38);
}
@media(max-width:480px){
  header.service-container .priceband .price-action{
    align-items:flex-start;
    flex-direction:column;
  }
}
main.service-container > .service-card{
  padding:30px 28px;
  border-radius:16px;
  margin-block:30px;
}
@media(max-width:640px){
  main.service-container > .service-card{
    padding:22px 18px;
    border-radius:14px;
  }
}

/* 表單元件 */
input[type=text],input[type=email],textarea{background:#fff}
button.submit,.btn-next{background:var(--ali-teal);color:var(--ali-navy-950)}
button.submit:hover,.btn-next:hover{background:var(--ali-teal-bright)}
.goalgrid label:has(input:checked),
.prigrid label:has(input:checked){border-color:var(--ali-teal);color:#0E7A6E;background:rgba(255,255,255,.9)}
.progress-fill{background:var(--ali-teal)}

/* ── Footer:霧面卡 + 深色字 ── */
footer{
  background:var(--glass);
  -webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);
  border:1px solid rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5);
  border-radius:16px;
  box-shadow:0 16px 44px rgba(2,8,16,.4);
  margin-top:40px;margin-bottom:46px;
  padding:24px 24px 28px;
}
@supports not (backdrop-filter: blur(1px)){footer{background:rgba(255,255,255,.94)}}
.service-legal-footer,.plain-legal-footer{
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:0;border-radius:0;box-shadow:none;
  color:#C6D5DE;
}
.plain-legal-footer{width:100%;padding-right:0;padding-left:0}
.plain-legal-footer p,.plain-legal-footer ul{max-width:none}
.service-legal-footer strong,.plain-legal-footer strong{color:#EEF4F6}
.service-legal-footer a,.plain-legal-footer a{color:var(--ali-teal-bright)}
.service-legal-footer .footer-meta{max-width:none;margin-top:10px;line-height:1.5}
.service-legal-footer .footer-date{white-space:nowrap}
.service-legal-footer .footer-disclaimer{max-width:none;margin-top:12px;padding-top:12px;border-top:1px solid rgba(143,169,186,.25);color:#B9CBD6;font-size:12.5px;line-height:1.55}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* has-lang:服務頁 nav 含語言切換,壓縮間距確保單行(不影響其他頁) */
.topnav.has-lang{gap:8px 18px}
.topnav.has-lang>a{padding:9px 13px}
.topnav.has-lang .nav-report{gap:8px}

/* ═══════════════════════════════════════════════════════════════════
   響應式修正層 (RWD layer) — 2026-08-02
   全站手機／平板共用的版面修正。本區只處理「同一份內容在小螢幕的排法」,
   不改配色決策;顏色仍以上方色板為準。
   ── 內容 ──
   1. 容器與導覽寬度(移除 100vw 造成的水平溢出)
   2. 表格橫向捲動(.table-scroll / .table-wrapper)
   3. 手機表單字級(避免 iOS 聚焦時自動放大頁面)
   4. 手機效能(關閉 backdrop-filter 與顆粒層,捲動更順)
   ═══════════════════════════════════════════════════════════════════ */

/* 1 ── 容器與導覽 ───────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
img{max-width:100%;height:auto}

/* 導覽改為「跟著所在容器的內容寬」,不再用 100vw。
   100vw 在桌機含捲軸寬 → 會多出幾 px 的水平捲動;
   在 methodology(內容寬 880)則會比內文還寬,兩邊不對齊。 */
.topnav{position:static;left:auto;width:100%;max-width:100%;margin-left:0;transform:none}
@media(max-width:760px){.topnav{width:100%}}

/* 2 ── 表格:一律放進可橫向捲動的容器 ─────────────────────────── */
.table-wrapper:not(.zone-table-card),.table-scroll{
  display:block;width:100%;max-width:100%;box-sizing:border-box;
  margin:16px 0;overflow-x:auto;overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.table-wrapper:not(.zone-table-card):focus-visible,.table-scroll:focus-visible{
  outline:3px solid rgba(14,122,110,.32);outline-offset:3px;
}
/* 欄位多的表在窄螢幕維持最小寬度,靠橫捲閱讀,不擠成一團。
   :not(.zone-table) 是為了保留文章頁「一區一張卡」的手機版式。 */
@media(max-width:700px){
  .table-wrapper>table:not(.zone-table){min-width:560px}
  .table-wrapper>table.tw-wide{min-width:680px}
}

/* 3 ── 手機表單:字級 ≥16px,iOS 才不會在聚焦時自動放大整頁 ──── */
@media(max-width:640px){
  input[type=text],input[type=email],input[type=tel],textarea,select{font-size:16px}
  .goalgrid label,.prigrid label{font-size:14.5px}
  .summary dl{grid-template-columns:1fr;gap:2px 0}
  .summary dt{font-size:13px}
  .summary dd{margin-bottom:9px}
  .wnav{gap:10px}
  .btn-next{padding:12px 22px}
}

/* 4 ── 手機效能:霧面模糊與顆粒層在行動裝置上很吃 GPU,關掉更順 ── */
@media(hover:none){
  body{background-attachment:scroll}
}
@media(max-width:640px){
  main > section, main > article, main > aside, .side section, footer{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(255,255,255,.95);
  }
  .service-legal-footer,.plain-legal-footer{background:transparent}
  body::before{display:none}
}

/* 5 ── 長字串(來源網址、代碼)不撐破卡片 ───────────────────── */
main .src,main code{overflow-wrap:anywhere}

/* 6 ── 表格橫捲提示:右緣漸層陰影,滑到底自動消失(純 CSS,無 JS) ── */
.table-wrapper:not(.zone-table-card),.table-scroll,.zone-table-wrapper{
  background-image:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%),
    linear-gradient(to right, rgba(22,50,74,.16), rgba(22,50,74,0)),
    linear-gradient(to left,  rgba(22,50,74,.16), rgba(22,50,74,0));
  background-position:0 0, 100% 0, 0 0, 100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll;
}
/* 手機加一行文字提示,說明可以左右滑 */
@media(max-width:700px){
  .table-wrapper:not(.zone-table-card)::after,.table-scroll::after{
    content:"\2194\FE0E  swipe to see the full table";
    display:block;padding:6px 2px 0;font-size:11.5px;color:#5B6B70;letter-spacing:.02em;
  }
}

/* 7 ── email / 訂單編號:必要時才斷行,不逐字硬切 ── */
.order-box strong,.order-box code,#conf-email,.summary dd{
  overflow-wrap:anywhere;word-break:normal;
}