/* ══════════════════════════════════════════════════════════════
   OPPA 共用樣式 — 色票單一真相來源 + 三頁共用元件
   引用者：/index.html（醫師）、/partners/、/impact/
   注意：index.html 另有大量頁面專屬 inline CSS，其 <style> 在本檔
        之後載入，故同名選擇器以 inline 為準。本檔的 :root 變數是
        全站唯一色票來源，index.html 不再自行宣告 :root。
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── 底層 ── */
  --bg:        #f7fafd;   /* 頁面底：冷調近白，非純白，日光燈下不刺眼 */
  --bg-2:      #eef4fa;   /* 交錯區塊底 */
  --bg-3:      #e7eef7;   /* 分隔／chip 底　⚠ 勿在此底上放 accent 內文（4.47:1） */
  --panel:     #ffffff;   /* 卡片：純白，靠陰影浮起 */
  --panel-2:   #f2f7fc;   /* 次級面板 */
  --line:      #d5e0ed;   /* 裝飾性分隔線（非 UI 元件邊框，見 --line-strong） */

  /* ── 文字（全部通過 WCAG AA 4.5:1）── */
  --text:       #0d1f38;  /* on --bg 15.78 / on --panel 16.53 */
  --text-dim:   #45607f;  /* on --bg  6.20 / on --panel  6.50 */
  --text-muted: #5c7085;  /* on --bg  4.88 / on --panel  5.11 */

  /* ── 品牌 accent：色相守在 174°（與原 #4fd1c5 同），僅壓亮度 ── */
  --accent:      #0b7a6e; /* on --bg 4.98 / on --panel 5.22；白字疊其上 5.22 */
  --accent-2:    #0e9384; /* ⚠ 僅 3.63:1 → 只能用於 ≥24px 或 ≥18.7px 粗體、
                                icon、hover 態、裝飾線。14px 內文一律用 --accent */
  --accent-glow: rgba(11, 122, 110, 0.22);

  --warn:   #a35a08;      /* on --bg 4.98 */
  --danger: #c92a20;      /* on --bg 5.23 */
  --ok:     #0e7a37;      /* on --bg 5.20 */

  /* ── 淺色系新增 token ── */
  --on-accent:   #ffffff;            /* accent 當底時的文字色 */
  --line-strong: #748aa6;            /* UI 元件邊框，WCAG 1.4.11 需 3:1
                                        on --panel 3.54 / on --bg 3.38 */
  --shadow:      rgba(13, 31, 56, 0.10); /* 帶藍低透明陰影，白底上不會髒 */

  /* ── 分眾色（沿用展場文宣色帶，壓深至淺底可用）── */
  --aud-doc:     #1d63c9;  /* 醫師　　flyer #5b9dff → on --bg 5.45 */
  --aud-partner: #8a5a05;  /* 夥伴　　flyer #e0a33e → on --bg 5.65 */
  --aud-public:  #0b7a6e;  /* 民眾　　flyer #4fd1c5 → 同品牌 accent */
}

/* ══ 深色反轉區塊：區域內重新宣告變數，其餘規則一行不用改 ══
   用法：<section class="pricing theme-dark">
   保留深色的位置：定價、CTA/表單、footer、hero kiosk（kiosk 用硬寫值） */
.theme-dark{
  --bg: #0a1628; --bg-2: #0f1d33; --bg-3: #132843;
  --panel: #16294a; --panel-2: #1b3358; --line: #26406b;
  --text: #e8eef8; --text-dim: #a9b6cc;
  --text-muted: #8795ae;         /* 原 #7d8aa3 在 --panel 上僅 4.16:1；提亮到 4.79:1 過 AA */
  --accent: #4fd1c5; --accent-2: #5eead4;
  --accent-glow: rgba(79, 209, 197, 0.25);
  --warn: #f59e0b; --danger: #ef4444; --ok: #22c55e;
  --on-accent: #0a1628;          /* 深區塊：accent 底配深字，與改版前一致 */
  --line-strong: #3a5580;
  --shadow: rgba(0, 0, 0, 0.35);
  background: var(--bg);
  color: var(--text);
}

/* ══ Reset / base ══ */
*{box-sizing: border-box; margin: 0; padding: 0;}
html{scroll-behavior: smooth;}
body{
  font-family: 'Noto Sans TC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{color: inherit; text-decoration: none;}
img{max-width: 100%; display: block;}
code, .mono{font-family: 'JetBrains Mono', monospace;}
.container{max-width: 1180px; margin: 0 auto; padding: 0 24px;}

/* ══ 分眾標籤列（三頁最上排，不 sticky）══
   current 頁用 <span class="aud-tab is-active" aria-current="page">，
   另兩格用 <a href>。自我連結不傳權重且會長出 URL 變體。 */
.aud-bar{
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.aud-bar-inner{
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 6px;
}
.aud-tab{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px 10px;
  font-size: 15px; font-weight: 500;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  transition: color .18s, border-color .18s, background .18s;
}
.aud-tab .aud-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .35;
  transition: opacity .18s, transform .18s;
}
.aud-tab .aud-sub{
  font-size: 11.5px; font-weight: 400; opacity: .8;
}
.aud-tab-text{display: flex; flex-direction: column; line-height: 1.35;}
a.aud-tab:hover{
  color: var(--text);
  background: var(--panel-2);
  border-bottom-color: var(--line-strong);
}
/* active：顏色 + 字重 + 指示條 + 淡底，四個線索，不只靠顏色（WCAG 1.4.1）*/
.aud-tab.is-active{
  color: var(--tab-c);
  font-weight: 700;
  border-bottom-color: var(--tab-c);
  background: var(--tab-tint);
}
.aud-tab.is-active .aud-dot{opacity: 1; transform: scale(1.2);}
.aud-tab[data-aud="doctor"] { --tab-c: var(--aud-doc);     --tab-tint: #e8f0fd; }
.aud-tab[data-aud="partner"]{ --tab-c: var(--aud-partner); --tab-tint: #fdf3e2; }
.aud-tab[data-aud="public"] { --tab-c: var(--aud-public);  --tab-tint: #e2f2ef; }
.aud-tab .short{display: none;}

@media (max-width: 640px){
  .aud-bar-inner{padding: 0 10px; gap: 3px;}
  .aud-tab{
    flex: 1 1 0; justify-content: center;
    padding: 11px 4px 9px; font-size: 13.5px;
  }
  .aud-tab .full{display: none;}
  .aud-tab .short{display: inline;}
  .aud-tab .aud-sub{display: none;}
  .aud-tab .aud-dot{width: 6px; height: 6px;}
}

/* ══ Navigation ══ */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 250, 253, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; max-width: 1180px; margin: 0 auto;
}
.logo{
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 22px; letter-spacing: 0.5px;
  color: var(--text);
}
.logo-mark{
  width: 38px; height: 38px; border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.nav-links{display: flex; gap: 24px; align-items: center;}
.nav-links a{color: var(--text-dim); font-size: 14px; transition: color .2s;}
.nav-links a:hover{color: var(--accent);}
.nav-links a.nav-widget{padding-left: 14px; border-left: 1px solid var(--line);}
.nav-links a.nav-cta{
  background: var(--accent); color: var(--on-accent);
  padding: 10px 18px; border-radius: 8px;
  font-weight: 700; font-size: 14px;
  transition: transform .15s, box-shadow .15s;
}
.nav-links a.nav-cta:hover{
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--accent-glow);
}
@media (max-width: 900px){
  .nav-links a:not(.nav-cta){display: none;}
}

/* ══ Section 骨架 ══ */
section{padding: 88px 0;}
.section-header{text-align: center; max-width: 760px; margin: 0 auto 56px;}
.section-eyebrow{
  color: var(--accent); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 14px;
}
h1{
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 900; line-height: 1.15; letter-spacing: -0.5px;
  margin-bottom: 18px;
}
h1 .accent{color: var(--accent);}
h2{
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800; line-height: 1.3;
  margin-bottom: 14px; letter-spacing: -0.3px;
}
h2 .accent{color: var(--accent);}
.section-sub{font-size: 16px; color: var(--text-dim); line-height: 1.75;}
.hero-sub{
  font-size: 17px; color: var(--text-dim);
  margin-bottom: 32px; max-width: 540px; line-height: 1.75;
}

.badge{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 100px;
  background: rgba(11, 122, 110, 0.10);
  border: 1px solid rgba(11, 122, 110, 0.30);
  color: var(--accent);
  font-size: 13px; font-weight: 500;
  margin-bottom: 26px;
}
.badge-dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ══ Buttons ══ */
.hero-actions{display: flex; gap: 14px; flex-wrap: wrap;}
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 10px;
  font-weight: 600; font-size: 15px;
  transition: transform .15s, box-shadow .15s, background .2s;
  cursor: pointer; border: none;
}
.btn-primary{background: var(--accent); color: var(--on-accent);}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--accent-glow);
}
.btn-secondary{
  background: transparent; color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover{border-color: var(--accent); color: var(--accent);}

/* ══ Hero stats ══ */
.hero-stats{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-stat .num{
  font-size: 26px; font-weight: 800; color: var(--accent);
  font-family: 'Inter', sans-serif;
}
.hero-stat .label{font-size: 13px; color: var(--text-muted); margin-top: 4px;}
@media (max-width: 640px){
  .hero-stats{grid-template-columns: 1fr; gap: 16px;}
}

/* ══ 卡片家族 ══
   淺色主題 --panel(#fff) 與 --bg(#f7fafd) 亮度差極小，
   沒有陰影卡片會浮不起來 → 陰影是必要的，不是裝飾。 */
.feat-card, .adv-card, .philo-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px var(--shadow), 0 6px 18px var(--shadow);
}
.feat-card{
  padding: 24px 22px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative; display: flex; flex-direction: column; height: 100%;
}
.feat-card:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 2px 4px var(--shadow), 0 14px 32px var(--shadow);
}
.feat-num{
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--accent); letter-spacing: 1px; margin-bottom: 10px;
}
.feat-card h3{font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; line-height: 1.4;}
.feat-card p{color: var(--text-dim); font-size: 13.5px; line-height: 1.65;}

.adv-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.adv-card{padding: 26px 24px; border-left: 3px solid var(--accent);}
.adv-card h3{
  font-size: 16px; color: var(--text); margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.adv-card h3 .adv-no{
  font-family: 'Inter', sans-serif; color: var(--accent);
  font-weight: 800; font-size: 18px;
}
.adv-card p{font-size: 14px; color: var(--text-dim); line-height: 1.7;}

.philo-card{padding: 30px; border-radius: 16px;}
.philo-card h3{font-size: 21px; font-weight: 700; color: var(--text); margin-bottom: 16px; line-height: 1.45;}
.philo-card p{color: var(--text-dim); font-size: 14.5px; line-height: 1.75; margin-bottom: 14px;}
.philo-card p:last-child{margin-bottom: 0;}

.philo-quote{
  max-width: 820px; margin: 0 auto;
  padding: 22px 26px; border-radius: 0 12px 12px 0;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  color: var(--text-dim); font-size: 15px; line-height: 1.8;
}
.philo-quote strong{color: var(--text);}

/* index.html 內另有這些卡片的 inline 定義（背景／邊框／圓角），
   但都未宣告 box-shadow，故此處補上不會被覆蓋。
   淺色區塊用藍調淡陰影；深色區塊（.theme-dark 內的 price/contact）
   自動吃到 --shadow 的深色值。 */
.engine-card, .why-card, .price-card, .contact-card, .stake-card{
  box-shadow: 0 1px 2px var(--shadow), 0 6px 18px var(--shadow);
}

/* ══ 影片區（三頁共用）══
   點擊才載入 YouTube：在使用者按下播放之前，頁面不會向 YouTube 送出任何請求。
   縮圖託管在自家網域（/video/*.jpg），所以連縮圖都不會外連。 */
.videos{background: var(--bg-2);}
.vid-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 1000px; margin: 0 auto;
}
@media (max-width: 820px){.vid-grid{grid-template-columns: 1fr; gap: 20px;}}

.vid-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px var(--shadow), 0 6px 18px var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vid-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 2px 4px var(--shadow), 0 16px 36px var(--shadow);
}
.vid-frame{
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #0a1628; overflow: hidden;
}
.vid-frame iframe{position: absolute; inset: 0; width: 100%; height: 100%; border: 0;}

.vid-cover{
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; display: block;
}
.vid-cover img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.vid-cover::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,22,40,.06) 0%, rgba(10,22,40,.42) 100%);
  transition: background .3s ease;
}
.vid-cover:hover img{transform: scale(1.04);}
.vid-cover:hover::after{background: linear-gradient(180deg, rgba(10,22,40,.02) 0%, rgba(10,22,40,.30) 100%);}
.vid-cover:focus-visible{outline: 3px solid var(--accent); outline-offset: -3px;}

/* 播放鍵：沿用 YouTube 的圓角矩形語彙，讓人一眼知道是影片 */
.vid-play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 48px; border-radius: 12px;
  background: #ff0000; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(10, 22, 40, .45);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  z-index: 1;
}
.vid-cover:hover .vid-play{
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 12px 32px rgba(10, 22, 40, .55);
}
.vid-play svg{margin-left: 3px;}
.vid-dur{
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  padding: 3px 8px; border-radius: 5px;
  background: rgba(10, 22, 40, .82);
  color: #e8eef8; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vid-meta{padding: 20px 22px 22px;}
.vid-meta h3{font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.5;}
.vid-meta p{font-size: 14px; color: var(--text-dim); line-height: 1.7; margin: 0;}
.vid-privacy{
  max-width: 1000px; margin: 20px auto 0;
  font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.7;
}

/* ══ FAQ ══ */
.faq{background: var(--bg-2);}
.faq-list{max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px;}
.faq-item{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px var(--shadow), 0 4px 12px var(--shadow);
  transition: border-color .2s;
}
.faq-item[open]{border-color: var(--accent);}
.faq-item summary{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px;
  cursor: pointer; list-style: none; user-select: none;
}
.faq-item summary::-webkit-details-marker{display: none;}
.faq-item summary:hover .faq-q{color: var(--accent);}
.faq-q{font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.5; transition: color .2s;}
.faq-icon{position: relative; flex-shrink: 0; width: 20px; height: 20px;}
.faq-icon::before, .faq-icon::after{
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--accent); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.faq-icon::before{width: 14px; height: 2px;}
.faq-icon::after{width: 2px; height: 14px;}
.faq-item[open] .faq-icon::after{transform: translate(-50%, -50%) rotate(90deg); opacity: 0;}
.faq-a{padding: 0 24px 22px;}
.faq-a p{font-size: 14.5px; color: var(--text-dim); line-height: 1.8;}
.faq-a p + p{margin-top: 12px;}
.faq-a strong{color: var(--text);}
@media (max-width: 640px){
  .faq-item summary{padding: 16px 18px;}
  .faq-q{font-size: 15px;}
  .faq-a{padding: 0 18px 18px;}
}

/* ══ CTA ══ */
.cta{
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, var(--accent-glow), transparent 70%),
    var(--bg);
  padding: 110px 0;
  text-align: center;
}
.cta h2{font-size: clamp(28px, 4vw, 44px); margin-bottom: 16px;}
.cta-sub{
  font-size: 17px; color: var(--text-dim);
  margin-bottom: 44px; max-width: 640px; margin-left: auto; margin-right: auto;
}

/* ══ 表單元件邊框（WCAG 1.4.11：UI 元件需 3:1，--line 僅 1.34:1）══ */
.form-input, .form-select, .form-textarea{
  border-color: var(--line-strong);
}

/* ══ Footer ══ */
footer{
  border-top: 1px solid var(--line);
  padding: 36px 0; text-align: center;
  color: var(--text-muted); font-size: 13px;
}
footer .disclaimer{max-width: 680px; margin: 0 auto 8px;}
footer .foot-links{margin: 4px 0 10px; font-size: 13px;}
footer .foot-links a{
  color: var(--text-muted);
  border-bottom: 1px dotted var(--line-strong);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
footer .foot-links a:hover{color: var(--accent); border-color: var(--accent);}

/* ══ Reveal on scroll ══ */
.reveal{opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity: 1; transform: translateY(0);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior: auto;}
  .reveal{opacity: 1; transform: none; transition: none;}
}