:root {
    --green-900: #14532d;
    --green-700: #166534;
    --green-600: #16a34a;
    --green-500: #22c55e;
    --green-300: #86efac;
    --green-100: #dcfce7;
    --green-50:  #f0fdf4;
    --blue-100:  #dbeafe;
    --blue-600:  #2563eb;
    --orange-100:#ffedd5;
    --orange-600:#ea580c;
    --yellow:    #facc15;
    --yellow-600:#ca8a04;
    --ink:       #14261c;
    --ink-soft:  #55665d;
    --ink-faint: #8a9a92;
    --line:      #e3ece6;
    --surface:   #ffffff;
    --page:      #f7fbf8;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; font-size: 16px; }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
    font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--page);
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; }
  .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
  .band { background: var(--surface); }
  .band-soft { background: var(--green-50); }

  /* Nav */
  header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  nav.wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
  .brand svg.brand-icon { height: 38px; width: 38px; border-radius: 10px; display: block; flex-shrink: 0; }
  .brand span small { display: block; font-size: 0.78rem; font-weight: 700; color: var(--green-600); letter-spacing: 0.04em; }
  .navlinks { display: flex; gap: 26px; font-size: 0.94rem; font-weight: 600; color: var(--ink-soft); }
  .navlinks a:hover { color: var(--green-600); }
  .btn-line {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 11px 20px; border-radius: 999px; font-size: 0.92rem; font-weight: 700;
    background: var(--green-600); color: #fff; box-shadow: 0 8px 20px rgba(22,163,74,0.28);
  }
  .btn-line:hover { background: var(--green-700); }
  /* 寬度自動撐開、只設最小寬度：固定成正方形時「LINE」四個字會超出方塊被裁掉 */
  .line-mark { min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px; background: #fff; color: var(--green-600); font-size: 0.86rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; letter-spacing: -0.02em; flex: none; box-sizing: border-box; }

  /* 標題列的對話框圖示 + 聯絡我們彈出視窗。
     同樣受限於禁止執行腳本的安全設定，開關改用 checkbox + :checked 的純 CSS 做法。
     視窗內嵌的是既有的 Google 表單：網站是靜態網頁、沒有後端可以接收表單，
     而 CSP 的 form-action 也限定 'self'，所以自建表單送不出去，用 Google 表單才真的收得到。 */
  .chat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100);
    margin-left: auto; margin-right: 12px; flex: none;
  }
  .chat-icon:hover { background: var(--green-100); color: var(--green-900); }
  .contact-modal-toggle { position: absolute; opacity: 0; pointer-events: none; }
  .contact-modal-toggle:focus-visible ~ header .chat-icon { outline: 3px solid var(--green-500); outline-offset: 2px; }
  .contact-modal { display: none; position: fixed; inset: 0; z-index: 80; }
  .contact-modal-toggle:checked ~ .contact-modal { display: block; }
  .contact-modal-back { position: absolute; inset: 0; background: rgba(12,28,20,0.55); cursor: pointer; }
  .contact-modal-box {
    position: relative; margin: 40px auto; max-width: 560px; width: calc(100% - 32px);
    max-height: calc(100vh - 80px); overflow-y: auto;
    background: var(--surface); border-radius: 18px; box-shadow: 0 30px 70px rgba(12,28,20,0.35);
    padding: 24px 26px 26px;
  }
  .contact-modal-box h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; }
  .contact-modal-box > p { margin: 0 0 16px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
  .contact-modal-x {
    position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%;
    background: var(--page); color: var(--ink-soft); font-size: 0.85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .contact-modal-x:hover { background: var(--green-100); color: var(--green-900); }
  .contact-modal-line {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    background: var(--green-50); border: 1px solid var(--green-100); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 16px; font-size: 0.9rem; font-weight: 700; color: var(--green-700);
  }
  .contact-modal-form iframe { width: 100%; height: 560px; border: 0; border-radius: 12px; background: #fff; display: block; }
  .contact-modal-note { margin: 12px 0 0; text-align: center; font-size: 0.84rem; color: var(--ink-soft); }
  .contact-modal-note a { color: var(--green-600); font-weight: 700; }
  .contact-modal-note a:hover { text-decoration: underline; }
  @media (max-width: 640px) {
    .chat-icon { width: 38px; height: 38px; margin-right: 8px; }
    .contact-modal-box { margin: 16px auto; max-height: calc(100vh - 32px); padding: 20px 16px; }
    .contact-modal-form iframe { height: 480px; }
  }

  /* 右下角固定的 LINE 加好友浮動框。
     網站的安全性設定禁止執行任何網頁腳本，所以收合／展開改用 checkbox + :checked 的純 CSS 做法，
     不需要 JavaScript，也就不必為了這個小功能放寬 CSP。 */
  .line-dock-toggle { position: absolute; opacity: 0; pointer-events: none; }
  .line-dock { position: fixed; right: 18px; bottom: 18px; z-index: 60; }
  .line-dock-panel {
    position: relative; display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--green-100); border-radius: 16px;
    padding: 14px 18px 14px 16px; box-shadow: 0 14px 38px rgba(20,38,28,0.18);
    color: inherit; max-width: 300px;
  }
  .line-dock-panel:hover { border-color: var(--green-300); }
  .line-dock-badge {
    flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--green-600); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; letter-spacing: -0.02em;
  }
  .line-dock-text b { display: block; font-size: 0.94rem; color: var(--ink); line-height: 1.3; }
  .line-dock-text span { display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
  .line-dock-text em { display: block; font-style: normal; font-size: 0.8rem; font-weight: 700; color: var(--green-600); margin-top: 6px; }
  .line-dock-x {
    position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--ink); color: #fff; font-size: 0.7rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 3px 10px rgba(20,38,28,0.3);
  }
  .line-dock-x:hover { background: var(--green-700); }
  /* 收合後縮成一顆圓鈕，讓關掉的人還找得回來 */
  .line-dock-mini {
    display: none; width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
    background: var(--green-600); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: -0.02em;
    align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(22,163,74,0.4);
    margin-left: auto;
  }
  .line-dock-mini:hover { background: var(--green-700); }
  .line-dock-toggle:checked ~ .line-dock .line-dock-panel { display: none; }
  .line-dock-toggle:checked ~ .line-dock .line-dock-mini { display: flex; }
  .line-dock-toggle:focus-visible ~ .line-dock .line-dock-x,
  .line-dock-toggle:focus-visible ~ .line-dock .line-dock-mini { outline: 3px solid var(--green-500); outline-offset: 2px; }
  @media (max-width: 640px) {
    .line-dock { right: 12px; bottom: 12px; left: 12px; }
    .line-dock-panel { max-width: none; padding: 12px 14px; }
    .line-dock-text span { display: none; }
  }

  /* Hero */
  .hero-band {
    background:
      radial-gradient(900px 420px at 78% 18%, rgba(134,239,172,0.5), transparent 62%),
      linear-gradient(180deg, #ffffff 0%, #eefbf1 55%, #e4f7ea 100%);
    border-bottom: 1px solid var(--line);
  }
  .hero { padding: 56px 0 64px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
  .hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.22; margin: 0 0 18px; font-weight: 900; letter-spacing: -0.01em; }
  .hero h1 .hl { position: relative; white-space: nowrap; }
  .hero h1 .hl::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 38%;
    background: var(--yellow); border-radius: 4px; z-index: -1;
  }
  .tagline-pill {
    display: inline-block; background: linear-gradient(135deg, var(--green-700), var(--green-500));
    color: #fff; font-weight: 800; font-size: 1.02rem; padding: 9px 22px; border-radius: 10px; margin: 0 0 24px;
  }
  .trust-row { display: flex; gap: 0; flex-wrap: wrap; margin: 0 0 22px; }
  .trust-row .badge { display: flex; align-items: center; gap: 10px; padding: 0 20px; }
  .trust-row .badge:first-child { padding-left: 0; }
  .trust-row .badge + .badge { border-left: 1px solid var(--line); }
  .trust-row .badge svg { width: 26px; height: 26px; color: var(--green-600); flex-shrink: 0; }
  .trust-row .badge b { display: block; font-size: 0.9rem; }
  .trust-row .badge span { font-size: 0.76rem; color: var(--ink-faint); }
  .repairs-row { display: flex; gap: 0; flex-wrap: wrap; margin: 0 0 26px; }
  .repairs-row .item { display: flex; align-items: center; gap: 9px; padding: 0 18px; font-size: 0.93rem; font-weight: 700; }
  .repairs-row .item:first-child { padding-left: 0; }
  .repairs-row .item + .item { border-left: 1px solid var(--line); }
  .repairs-row .item .ico { font-size: 1.25rem; }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 0.94rem;
    border: 2px solid var(--green-600); color: var(--green-700); background: #fff;
  }
  .btn-ghost:hover { background: var(--green-50); }
  .hero-art { position: relative; display: flex; align-items: center; justify-content: center; }
  .hero-art .halo {
    position: absolute; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(134,239,172,0.55), transparent 68%);
  }
  .hero-art img { position: relative; width: 100%; max-width: 430px; }
  .bubble {
    position: absolute; top: 6%; right: -2%; z-index: 2;
    background: #fff; border: 2px solid var(--green-500); border-radius: 18px;
    padding: 12px 18px; text-align: center; font-weight: 800; line-height: 1.45; font-size: 0.92rem;
    color: var(--green-700); box-shadow: 0 10px 24px rgba(20,83,45,0.12);
  }
  .bubble::after {
    content: ""; position: absolute; left: 18px; bottom: -11px;
    border-width: 10px 9px 0 9px; border-style: solid; border-color: var(--green-500) transparent transparent transparent;
  }
  .bubble em { font-style: normal; color: var(--yellow-600); }

  /* Section heads */
  section { padding: 66px 0; }
  .head-center { text-align: center; margin: 0 auto 40px; max-width: 660px; }
  .head-center h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 10px; font-weight: 800; }
  .head-center h2 .bolt { color: var(--green-500); }
  .head-center p { color: var(--ink-soft); margin: 0; }
  .head-left { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; }
  .head-left h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0; font-weight: 800; }

  /* Service cards */
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .svc { border-radius: 20px; padding: 28px 26px 26px; border: 1px solid transparent; display: flex; flex-direction: column; }
  .svc h3 { margin: 0 0 12px; font-size: 1.22rem; font-weight: 800; line-height: 1.4; }
  .svc > p { margin: 0 0 16px; color: var(--ink-soft); font-size: 0.92rem; }
  .svc ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .svc ul li { font-size: 0.9rem; color: var(--ink-soft); padding-left: 26px; position: relative; }
  .svc ul li::before {
    content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800;
  }
  .svc .go { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 0.9rem; color: #fff; }
  .svc.green { background: var(--green-100); border-color: #bbf7d0; }
  .svc.green h3, .svc.green ul li::before { color: var(--green-700); }
  .svc.green .go { background: var(--green-600); }
  .svc.blue { background: var(--blue-100); border-color: #bfdbfe; }
  .svc.blue h3, .svc.blue ul li::before { color: var(--blue-600); }
  .svc.blue .go { background: var(--blue-600); }
  .svc.orange { background: var(--orange-100); border-color: #fed7aa; }
  .svc.orange h3, .svc.orange ul li::before { color: var(--orange-600); }
  .svc.orange .go { background: var(--orange-600); }
  .svc .photo {
    height: 150px; border-radius: 14px; margin: 0 0 16px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.68); padding: 10px;
  }
  .svc .photo img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(20,38,28,0.14)); }

  /* Why repair */
  .panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 36px 38px;
    box-shadow: 0 10px 30px rgba(20,38,28,0.05);
  }
  .why-repair { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
  .why-repair .lede { color: var(--ink-soft); line-height: 1.9; margin: 0 0 16px; }
  .why-repair .lede b { color: var(--ink); }
  .why-repair .big { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 900; color: var(--green-600); margin: 0 0 10px; }
  .why-repair .foot { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
  .flow4 { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
  .flow4 .node { text-align: center; flex: 1; min-width: 0; }
  .flow4 .node .circle {
    width: 66px; height: 66px; margin: 0 auto 10px; border-radius: 50%;
    background: var(--green-50); border: 1px solid var(--green-100);
    display: flex; align-items: center; justify-content: center;
  }
  .flow4 .node .circle svg { width: 28px; height: 28px; color: var(--green-600); }
  .flow4 .node b { display: block; font-size: 0.86rem; }
  .flow4 .node span { font-size: 0.74rem; color: var(--ink-faint); }
  .flow4 .arrow { color: var(--green-300); font-size: 1.1rem; padding-top: 22px; flex-shrink: 0; }

  /* Battery types */
  .types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .type-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
    box-shadow: 0 8px 22px rgba(20,38,28,0.04); text-align: center;
  }
  .type-card .pic {
    height: 140px; border-radius: 14px; background: var(--green-50);
    display: flex; align-items: center; justify-content: center; padding: 10px; margin: 0 0 14px;
  }
  .type-card .pic img { max-height: 100%; width: auto; object-fit: contain; }
  .type-card b { display: block; font-size: 1rem; font-weight: 800; margin: 0 0 6px; }
  .type-card p { margin: 0; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.7; }
  .types-note { text-align: center; color: var(--ink-faint); font-size: 0.82rem; margin: 18px 0 0; }

  /* 實際維修案例 */
  #repair-case { margin-top: 56px; }
  .case {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: start;
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    padding: 24px; box-shadow: 0 10px 28px rgba(20,38,28,0.05);
  }
  .case + .case { margin-top: 18px; }
  /* 還沒有照片的案例：整張卡片改為單欄，不留空白欄位 */
  .case.no-photos { grid-template-columns: 1fr; }
  /* 照片多於兩張時改為整欄展示：照片橫列在上、說明在下，避免擠在窄欄裡 */
  .case.showcase { grid-template-columns: 1fr; gap: 22px; }
  .case.showcase .case-photos { grid-template-columns: repeat(3, 1fr); }
  .case.showcase .case-pic { height: 240px; }
  .case-shot .tag.mid { background: var(--blue-100); color: var(--blue-600); }
  .case-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .case-shot { margin: 0; }
  .case-pic {
    height: 210px; border-radius: 14px; overflow: hidden; background: var(--green-50);
    display: flex; align-items: center; justify-content: center;
  }
  .case-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* 照片還沒進來前的暫時樣式，實際照片放上去後這個 class 就拿掉 */
  .case-pic.placeholder {
    flex-direction: column; gap: 6px; border: 2px dashed var(--line-strong, #cfe0d5);
    color: var(--ink-faint); font-size: 0.88rem; font-weight: 700;
  }
  .case-pic.placeholder span { font-size: 0.76rem; font-weight: 600; color: var(--green-600); }
  .case-shot figcaption { margin-top: 9px; font-size: 0.84rem; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; }
  .case-shot .tag { font-size: 0.72rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
  .case-shot .tag.before { background: #f2f4f3; color: var(--ink-soft); }
  .case-shot .tag.after { background: var(--green-100); color: var(--green-700); }
  .case-kicker {
    display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em;
    color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100);
    padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
  }
  .case-body h3 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 800; }
  .case-lead { margin: 0 0 16px; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.75; }
  .case-items { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .case-items li {
    position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6;
  }
  .case-items li::before {
    content: "✓"; position: absolute; left: 0; top: 1px;
    width: 18px; height: 18px; border-radius: 50%; background: var(--green-100); color: var(--green-700);
    font-size: 0.68rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
  }
  .case-items li b { color: var(--ink); font-weight: 700; }
  .case-data { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 0.87rem; }
  .case-data th, .case-data td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
  .case-data thead th { background: var(--green-50); color: var(--green-700); font-weight: 800; font-size: 0.8rem; }
  .case-data tbody td:first-child { color: var(--ink); font-weight: 600; }
  .case-data tbody td { color: var(--ink-soft); }
  .case-data tbody tr:last-child td { border-bottom: none; }
  .case-result {
    background: var(--green-50); border: 1px solid var(--green-100); border-radius: 12px;
    padding: 13px 16px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.7;
  }
  .case-result b { color: var(--green-700); }
  @media (max-width: 860px) {
    .case { grid-template-columns: 1fr; padding: 18px; }
    .case-pic, .case.showcase .case-pic { height: 170px; }
    /* 三張並排在手機上會太小，改為兩欄，第三張自動換行並橫跨整列 */
    .case.showcase .case-photos { grid-template-columns: 1fr 1fr; }
    .case.showcase .case-shot:nth-child(3) { grid-column: 1 / -1; }
  }
  .types-cta {
    margin-top: 26px; background: var(--green-50); border: 1px solid var(--green-100); border-radius: 18px;
    padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  }
  .types-cta b { display: block; font-size: 1.05rem; font-weight: 800; }
  .types-cta span { color: var(--ink-soft); font-size: 0.9rem; }

  /* Process */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .step {
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px;
    box-shadow: 0 8px 22px rgba(20,38,28,0.04);
  }
  .step .top { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
  .step .sq {
    width: 44px; height: 44px; border-radius: 12px; background: var(--green-50); border: 1px solid var(--green-100);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .step .sq svg { width: 22px; height: 22px; color: var(--green-600); }
  .step .no { font-size: 0.78rem; font-weight: 800; color: var(--green-600); letter-spacing: 0.06em; }
  .step h4 { margin: 2px 0 0; font-size: 1rem; font-weight: 800; }
  .step p { margin: 0; color: var(--ink-soft); font-size: 0.87rem; line-height: 1.75; }

  /* Why us + FAQ */
  .two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: start; }
  .why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .why-item {
    background: var(--green-50); border: 1px solid var(--green-100); border-radius: 16px;
    padding: 18px 12px; text-align: center;
  }
  .why-item .ico { font-size: 1.5rem; }
  .why-item b { display: block; font-size: 0.85rem; margin: 8px 0 6px; }
  .why-item span { display: block; font-size: 0.74rem; color: var(--ink-soft); line-height: 1.6; }
  .faq { display: flex; flex-direction: column; gap: 10px; }
  .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 20px; }
  .faq summary { cursor: pointer; font-weight: 700; font-size: 0.94rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 1.25rem; color: var(--green-600); flex-shrink: 0; transition: transform .2s ease; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq .a { color: var(--ink-soft); margin-top: 10px; line-height: 1.8; font-size: 0.89rem; }

  /* Solar */
  .solar {
    background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px 32px;
    display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: center;
    box-shadow: 0 10px 30px rgba(20,38,28,0.05);
  }
  .solar img { width: 150px; }
  .solar h3 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 800; }
  .solar p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }
  .solar .go { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 10px; background: var(--green-600); color: #fff; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }

  /* Final CTA */
  .cta-band { background: linear-gradient(135deg, var(--green-700) 0%, var(--green-500) 100%); }
  .cta-inner { display: grid; grid-template-columns: 160px 1fr auto; gap: 30px; align-items: center; padding: 34px 0; }
  .cta-inner img { width: 160px; }
  .cta-inner h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 900; }
  .cta-inner p { margin: 0 0 14px; color: rgba(255,255,255,0.9); font-size: 0.95rem; }
  .cta-inner .checks { display: flex; gap: 22px; flex-wrap: wrap; color: #fff; font-weight: 700; font-size: 0.92rem; }
  .cta-inner .checks span::before { content: "✓ "; color: var(--yellow); }
  .btn-yellow {
    display: inline-flex; align-items: center; gap: 10px; text-align: center; white-space: nowrap;
    background: var(--yellow); color: #3f2d02; font-weight: 900; font-size: 1rem;
    padding: 16px 26px; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.18); line-height: 1.35;
  }
  .btn-yellow:hover { background: #fde047; }

  /* Contact */
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
  .contact-list { display: flex; flex-direction: column; gap: 14px; }
  .c-row { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); font-size: 0.94rem; }
  .c-row b { color: var(--ink); display: block; font-size: 0.9rem; }
  .c-row a { color: var(--green-600); font-weight: 700; }
  .c-row a:hover { text-decoration: underline; }
  .c-row.primary { background: var(--green-50); border: 1px solid var(--green-100); border-radius: 14px; padding: 14px 16px; }
  .c-row.muted { opacity: 0.75; }
  .form-panel { margin-top: 26px; }
  .form-embed iframe { width: 100%; height: 1029px; border: 0; border-radius: 16px; background: #fff; display: block; }
  .form-fallback { text-align: center; margin-top: 14px; font-size: 0.9rem; color: var(--ink-soft); }
  .form-fallback a { color: var(--green-600); font-weight: 700; }
  .form-fallback a:hover { text-decoration: underline; }

  /* Footer */
  footer { background: var(--green-900); color: rgba(255,255,255,0.86); padding: 26px 0; font-size: 0.88rem; }
  footer .f-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  footer .brand { color: #fff; }
  footer .brand span small { color: var(--green-300); }
  footer .f-links { display: flex; gap: 20px; flex-wrap: wrap; }
  footer .f-links a { color: rgba(255,255,255,0.86); }
  footer .f-links a:hover { color: #fff; }
  footer .f-bottom { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.14); text-align: center; color: rgba(255,255,255,0.6); font-size: 0.8rem; }

  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; padding-top: 36px; }
    .hero-art { order: -1; }
    .bubble { right: 2%; }
    .cards { grid-template-columns: 1fr; }
    .why-repair { grid-template-columns: 1fr; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .types { grid-template-columns: repeat(2, 1fr); }
    .types-cta { flex-direction: column; text-align: center; }
    .two-col { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .solar { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .cta-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .cta-inner .checks { justify-content: center; }
    .contact-grid { grid-template-columns: 1fr; }
    .navlinks { display: none; }
    .flow4 .arrow { display: none; }
  }

  /* ---------- 維修案例頁（repair-cases.html） ---------- */
  .navlinks a.active { color: var(--green-600); font-weight: 800; }
  .page-hero { padding: 8px 0 4px; }
  .crumbs { font-size: 0.84rem; color: var(--ink-faint); margin-bottom: 12px; }
  .crumbs a { color: var(--ink-soft); }
  .crumbs a:hover { color: var(--green-600); }
  .crumbs span { margin: 0 4px; }
  .page-hero h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; margin: 0 0 12px; letter-spacing: -0.01em; }
  .page-hero p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.8; max-width: 62ch; }

  .case-article {
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    padding: 28px 30px 30px; box-shadow: 0 10px 28px rgba(20,38,28,0.05);
  }
  .case-article + .case-article { margin-top: 26px; }
  .ca-head { margin-bottom: 20px; }
  .ca-head h2 {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; line-height: 1.45;
    margin: 10px 0 12px; letter-spacing: -0.01em; text-wrap: balance;
  }
  .ca-lead { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.8; }
  .ca-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
  .ca-photos.three { grid-template-columns: repeat(3, 1fr); }
  .ca-photos .case-pic { height: 260px; }
  .case-article h3 {
    font-size: 1.02rem; font-weight: 800; margin: 24px 0 10px;
    padding-left: 12px; border-left: 3px solid var(--green-500);
  }
  .case-article > p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.85; }
  .case-article .case-items { margin-bottom: 0; }
  .case-article .case-data { margin-bottom: 0; }
  .case-article .case-result { margin-top: 24px; }
  .case-result .muted { color: var(--ink-faint); font-size: 0.84rem; }

  .symptoms .sym-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px;
  }
  .sym {
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 15px 18px; font-size: 0.96rem; font-weight: 700; text-align: center;
  }
  .sym::before { content: "「"; color: var(--ink-faint); }
  .sym::after { content: "」"; color: var(--ink-faint); }
  .sym-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: var(--green-50); border: 1px solid var(--green-100); border-radius: 16px; padding: 20px 24px;
  }
  .sym-cta b { display: block; font-size: 1rem; margin-bottom: 5px; }
  .sym-cta span { display: block; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.6; }

  @media (max-width: 860px) {
    .case-article { padding: 20px 18px 22px; }
    .ca-photos, .ca-photos.three { grid-template-columns: 1fr 1fr; }
    .ca-photos.three .case-shot:nth-child(3) { grid-column: 1 / -1; }
    .ca-photos .case-pic { height: 180px; }
    .symptoms .sym-grid { grid-template-columns: 1fr 1fr; }
    .sym-cta { flex-direction: column; align-items: flex-start; }
  }

  /* ---------- 首頁「最新維修案例」摘要卡 ---------- */
  .case-brief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .case-brief {
    display: flex; flex-direction: column; color: inherit;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    box-shadow: 0 8px 22px rgba(20,38,28,0.04); transition: border-color .12s, transform .12s;
  }
  .case-brief:hover { border-color: var(--green-300); transform: translateY(-2px); }
  .cb-pic { height: 172px; background: var(--green-50); }
  .cb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cb-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
  .cb-tag {
    align-self: flex-start; font-size: 0.72rem; font-weight: 800; padding: 3px 10px;
    border-radius: 999px; margin-bottom: 9px;
  }
  .cb-tag.tools { background: var(--green-100); color: var(--green-700); }
  .cb-tag.home { background: var(--blue-100); color: var(--blue-600); }
  .cb-tag.custom { background: var(--orange-100); color: var(--orange-600); }
  .cb-body b { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
  .cb-body p { margin: 0 0 14px; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.9; }
  .cb-body p span {
    display: inline-block; min-width: 34px; font-size: 0.74rem; font-weight: 700;
    color: var(--ink-faint); margin-right: 6px;
  }
  .cb-body em { margin-top: auto; font-style: normal; font-size: 0.86rem; font-weight: 700; color: var(--green-600); }
  @media (max-width: 860px) {
    .case-brief-grid { grid-template-columns: 1fr; }
    .cb-pic { height: 200px; }
  }