/* ==========================================================================
   style-v2.css — 新增元素樣式（附加式，唔會影響現有 style.css）
   --------------------------------------------------------------------------
   用途：v2 預覽頁專用。所有 class 加咗前綴避免衝突。
   正式採用時，可以整段搬入 style.css 嘅「元件」區。
   ========================================================================== */

/* ==========================================================================
   新增區塊標記（畀你睇邊啲係新加）
   ========================================================================== */
.new-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:99px;
  background:var(--amber-100);color:var(--amber-600);
  font-size:.72rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:var(--sp-4);
}
.new-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--amber-500);
}

.demo-head{
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
  color:#fff;padding:var(--sp-8) 0 var(--sp-7);
}
.demo-head h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:var(--sp-4)}
.demo-head p{color:#b9c9dc;max-width:680px}
.demo-nav{
  display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6);
}
.demo-nav a{
  padding:9px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.22);
  font-size:.85rem;font-weight:600;color:#dbe6f2;transition:all .16s var(--ease);
}
.demo-nav a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff}

/* ==========================================================================
   A. 白話導引區（讓陌生人一看就明白）
   ========================================================================== */
.plain-lead{
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.5;font-weight:650;color:var(--ink);
  letter-spacing:-.015em;max-width:820px;
}
.plain-lead em{
  font-style:normal;color:var(--amber-600);
  background:linear-gradient(transparent 62%,rgba(217,119,6,.18) 62%);
}

/* 三步視覺 */
.explain-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);
  margin:var(--sp-7) 0;
}
.explain-step{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5);position:relative;
}
.explain-step::after{
  content:"";position:absolute;top:50%;right:-13px;width:26px;height:2px;
  background:var(--line-2);
}
.explain-step:last-child::after{display:none}
.explain-ico{
  width:44px;height:44px;border-radius:11px;background:var(--bg-3);
  display:grid;place-items:center;color:var(--navy-700);margin-bottom:var(--sp-4);
}
.explain-step h3{font-size:1.02rem;margin-bottom:8px}
.explain-step p{font-size:.9rem;line-height:1.6}
.explain-step .tagline{
  display:block;margin-top:var(--sp-3);font-size:.82rem;font-weight:650;
  color:var(--amber-600);
}

/* 比喻框 */
.analogy{
  background:var(--navy-900);color:#fff;border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-7);display:grid;
  grid-template-columns:auto 1fr;gap:var(--sp-5);align-items:center;
}
.analogy-ico{
  width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;color:#fbbf24;flex-shrink:0;
}
.analogy p{color:#dbe6f2;font-size:1rem;line-height:1.65;margin:0}
.analogy strong{color:#fff}

/* 「我們唔係咩」 */
.not-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-5)}
.not-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:var(--sp-4) var(--sp-5);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r);
  font-size:.9rem;color:var(--ink-2);
}
.not-x{color:var(--off-600);flex-shrink:0;margin-top:1px;font-weight:700}

/* ==========================================================================
   B. 「你需要我們嗎？」問題卡
   ========================================================================== */
.need-list{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.need-item{
  display:grid;grid-template-columns:1fr auto 1.15fr;gap:var(--sp-5);
  align-items:center;padding:var(--sp-5) var(--sp-6);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);
  transition:all .2s var(--ease);
}
.need-item:hover{border-color:var(--navy-700);box-shadow:var(--shadow)}
.need-q{font-size:1rem;font-weight:650;color:var(--ink);line-height:1.5}
.need-q small{display:block;font-size:.82rem;font-weight:500;color:var(--ink-3);margin-top:5px}
.need-arrow{color:var(--amber-500);flex-shrink:0}
.need-a{font-size:.9rem;color:var(--ink-2);line-height:1.6;padding-left:var(--sp-5);border-left:2px solid var(--ok-600)}
.need-a b{color:var(--ink);font-weight:650;display:block;margin-bottom:2px;font-size:.82rem;color:var(--ok-600);text-transform:uppercase;letter-spacing:.06em}

/* ==========================================================================
   C. 物流與報關
   ========================================================================== */
.logi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-6)}
.logi-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);transition:all .2s var(--ease);
}
.logi-card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.logi-ico{
  width:38px;height:38px;border-radius:9px;background:var(--bg-3);
  display:grid;place-items:center;color:var(--navy-700);margin-bottom:var(--sp-4);
}
.logi-card h3{font-size:.98rem;margin-bottom:7px}
.logi-card p{font-size:.87rem;line-height:1.6}

/* 獨立服務標籤 */
.logi-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:99px;
  background:var(--ok-100);color:var(--ok-600);
  font-size:.82rem;font-weight:700;margin-bottom:var(--sp-4);
}
.logi-badge svg{flex-shrink:0}

/* 全球雙向 */
.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-6)}
.dir-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5);position:relative;overflow:hidden;
}
.dir-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--amber-500),var(--navy-700));
}
.dir-arrow{
  font-family:var(--mono);font-size:1.05rem;font-weight:750;
  color:var(--navy-800);margin-bottom:var(--sp-3);display:block;
}
.dir-card h3{font-size:1rem;margin-bottom:8px}
.dir-card p{font-size:.88rem;line-height:1.62}

/* Incoterms 表 */
.incoterms{margin-top:var(--sp-7)}
.incoterms h3{margin-bottom:var(--sp-4)}
.inc-table{width:100%;border-collapse:collapse;font-size:.875rem;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.inc-table th{
  background:var(--bg-3);text-align:left;padding:12px 15px;
  font-size:.73rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line);
}
.inc-table td{padding:13px 15px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.inc-table tr:last-child td{border-bottom:none}
.inc-table .term{
  font-family:var(--mono);font-weight:750;color:var(--navy-800);
  font-size:.9rem;white-space:nowrap;
}
.inc-table .full{display:block;font-size:.76rem;color:var(--ink-4);font-weight:500;margin-top:2px}
.who{
  display:inline-block;padding:2px 9px;border-radius:99px;
  font-size:.74rem;font-weight:650;white-space:nowrap;
}
.who-you{background:var(--bg-3);color:var(--ink-3)}
.who-us{background:var(--ok-100);color:var(--ok-600)}
.who-both{background:var(--warn-100);color:var(--warn-600)}

/* 合規聲明 */
.compliance{
  margin-top:var(--sp-6);padding:var(--sp-5) var(--sp-6);
  background:var(--ok-100);border-left:4px solid var(--ok-600);
  border-radius:var(--r);font-size:.9rem;color:#065f46;line-height:1.65;
}
.compliance strong{color:#064e3b}

/* ==========================================================================
   D. 白話 FAQ
   ========================================================================== */
.plainfaq{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.faq-item{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg);overflow:hidden;transition:border-color .18s;
}
.faq-item[open]{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.faq-item summary{
  padding:var(--sp-5) var(--sp-6);cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  font-weight:650;font-size:.98rem;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .2s var(--ease);margin-top:-4px;
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq-body{
  padding:0 var(--sp-6) var(--sp-5);color:var(--ink-2);font-size:.92rem;line-height:1.7;
}
.faq-body p+p{margin-top:var(--sp-3)}
.faq-plain{
  display:block;margin-top:var(--sp-4);padding:12px 16px;
  background:var(--bg-3);border-radius:var(--r);
  font-size:.87rem;color:var(--ink-2);border-left:3px solid var(--amber-500);
}
.faq-plain b{color:var(--ink)}

/* ==========================================================================
   E. 情境卡（我們幫邊個）
   ========================================================================== */
.who-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5);margin-top:var(--sp-6)}
.who-card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);
  background:var(--bg);
}
.who-card .quote{
  font-size:.95rem;color:var(--ink);line-height:1.65;font-weight:550;
  padding-left:var(--sp-4);border-left:3px solid var(--amber-500);
  margin-bottom:var(--sp-4);
}
.who-card .ans{font-size:.88rem;color:var(--ink-3);line-height:1.6}

/* ==========================================================================
   F. 選擇閘（First-time visitor gate）
   ========================================================================== */
.gate{
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border-bottom:1px solid #fcd34d;padding:var(--sp-5) 0;
}
.gate-inner{
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-6);align-items:center;
}
.gate-ico{
  width:40px;height:40px;border-radius:10px;background:#fde68a;
  display:grid;place-items:center;color:#92400e;flex-shrink:0;
}
.gate-left{display:flex;gap:var(--sp-4);align-items:flex-start}
.gate-title{font-size:1.05rem;font-weight:750;color:#78350f;margin-bottom:5px}
.gate-sub{font-size:.9rem;color:#92400e;line-height:1.6;max-width:640px}
.gate-actions{display:flex;gap:var(--sp-3);flex-shrink:0;flex-wrap:wrap}
.gate-btn{
  padding:11px 20px;border-radius:var(--r);font-weight:650;font-size:.9rem;
  border:1.5px solid #d97706;background:#fff;color:#92400e;
  transition:all .18s var(--ease);white-space:nowrap;
}
.gate-btn:hover{background:#d97706;color:#fff;transform:translateY(-1px)}
.gate-btn.primary{background:#b45309;color:#fff;border-color:#b45309}
.gate-btn.primary:hover{background:#92400e;border-color:#92400e}

/* 已選擇後嘅精簡版 */
.gate-compact{
  background:var(--bg-2);border-bottom:1px solid var(--line);
  padding:10px 0;font-size:.84rem;color:var(--ink-3);
}
.gate-compact .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.gate-state{display:flex;align-items:center;gap:9px}
.gate-state-dot{width:7px;height:7px;border-radius:50%;background:var(--ok-600);flex-shrink:0}
.gate-reset{
  color:var(--accent);text-decoration:underline;font-size:.82rem;
  background:none;border:none;padding:0;cursor:pointer;
}

/* 兩個版本嘅容器 */
.version{display:none}
.version.active{display:block}

/* 示範用控制面板 */
.demo-panel{
  position:fixed;bottom:var(--sp-5);right:var(--sp-5);z-index:300;
  background:var(--navy-900);color:#fff;border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-lg);
  font-size:.82rem;max-width:270px;
}
.demo-panel h4{color:#fff;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:var(--sp-3)}
.demo-panel .row{display:flex;justify-content:space-between;gap:var(--sp-4);padding:4px 0;color:#b9c9dc}
.demo-panel .row b{color:#fff;font-family:var(--mono);font-size:.8rem}
.demo-panel button{
  margin-top:var(--sp-4);width:100%;padding:9px;border-radius:var(--r);
  background:rgba(255,255,255,.12);color:#fff;font-size:.82rem;font-weight:600;
  border:1px solid rgba(255,255,255,.2);transition:background .16s;
}
.demo-panel button:hover{background:rgba(255,255,255,.22)}

/* 標註 */
.anno{
  display:inline-flex;align-items:center;gap:7px;
  padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:var(--sp-4);
}
.anno-show{background:var(--ok-100);color:var(--ok-600)}
.anno-hide{background:var(--off-100);color:var(--off-600)}
.anno-always{background:#e0e7ff;color:#3730a3}

@media(max-width:860px){
  .gate-inner{grid-template-columns:1fr}
  .gate-actions{width:100%}
  .gate-btn{flex:1}
  .demo-panel{position:static;max-width:100%;margin:var(--sp-5) var(--sp-4)}
}

/* ==========================================================================
   G. 白話導覽（頁內錨點目錄）
   --------------------------------------------------------------------
   同首頁「選擇閘」一脈相承：琥珀色視覺語言，一撳平滑捲去對應區塊。
   純加法，唔影響原有結構；anchor 目標預留 sticky header 位。
   ========================================================================== */
.guide{
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border-bottom:1px solid #fcd34d;
  padding:var(--sp-4) 0;
}
.guide-inner{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
}
.guide-ico{
  width:34px;height:34px;border-radius:9px;background:#fde68a;
  display:grid;place-items:center;color:#92400e;flex-shrink:0;
}
.guide-lead{
  font-size:.86rem;font-weight:700;color:#78350f;
  margin-right:var(--sp-2);white-space:nowrap;
}
.guide-links{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
}
.guide-link{
  display:inline-flex;align-items:center;
  padding:7px 14px;border-radius:99px;
  border:1.5px solid #f0c869;background:#fff;
  color:#92400e;font-size:.84rem;font-weight:600;text-decoration:none;
  transition:all .18s var(--ease);white-space:nowrap;
}
.guide-link:hover{
  background:#fde68a;color:#78350f;border-color:#d97706;
  transform:translateY(-1px);
}
.guide-link.active{
  background:#b45309;color:#fff;border-color:#b45309;
}
.guide-link.cta{
  background:#b45309;color:#fff;border-color:#b45309;
}
.guide-link.cta:hover{background:#92400e;border-color:#92400e}

/* 錨點目標：預留 sticky .nav（min-height 72px + 上下 padding ≈ 92px）*/
#ql-1,#ql-2,#ql-3,#ql-4,#ql-5,
#ab-overview,#ab-stay,#ab-who,#ab-cases,
#pt-catalog{scroll-margin-top:100px}

@media(max-width:560px){
  .guide-lead{display:none}
  .guide-link{padding:6px 12px;font-size:.8rem}
}

/* ==========================================================================
   響應式
   ========================================================================== */
@media(max-width:1024px){
  .explain-steps{grid-template-columns:1fr}
  .explain-step::after{display:none}
  .logi-grid{grid-template-columns:repeat(2,1fr)}
  .dir-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .need-item{grid-template-columns:1fr;gap:var(--sp-3)}
  .need-arrow{display:none}
  .need-a{padding-left:var(--sp-4)}
  .not-grid{grid-template-columns:1fr}
  .who-grid{grid-template-columns:1fr}
  .analogy{grid-template-columns:1fr;text-align:left;padding:var(--sp-5)}
}
@media(max-width:560px){
  .logi-grid{grid-template-columns:1fr}
  .demo-head{padding:var(--sp-7) 0 var(--sp-6)}
  .demo-nav a{font-size:.8rem;padding:8px 13px}
  .inc-table{font-size:.82rem}
  .inc-table th,.inc-table td{padding:10px 11px}
}

/* ==========================================================================
   H. 單頁首頁（one-page）— 錨點導覽 + 捲動偵測高亮
   --------------------------------------------------------------------
   只影響兩樣嘢：
   ① 七個錨點目標預留 sticky .nav 位，等標題唔會被導覽遮住；
   ② 手機（≤860px）導覽由「換行」改為「橫向捲動 pill 條」，
      7 個項目永遠顯示晒，唔使撳先彈 —— 符合「唔好撳先出」嘅要求。
   ========================================================================== */

/* 錨點目標：預留 sticky .nav（min-height 72px + 上下 padding ≈ 92px） */
#home,#services,#parts,#inventory-proof,#quality,#about,#faq{
  scroll-margin-top:100px;
}

/* 手機：導覽收埋入漢堡選單
   撳漢堡展開 → 撳任何項目會自動收起（app.js nav 模組已處理），
   而且因為係真正換頁，去到新頁面選單本身就係收起狀態。 */
@media(max-width:860px){
  .nav-toggle{
    display:block;
    min-width:44px;min-height:44px;   /* 觸控目標 ≥44px */
    padding:0;
  }
  .nav-links{
    display:none;                     /* 收起狀態 */
    flex-basis:100%;margin-left:0;
    flex-direction:column;align-items:stretch;
    gap:2px;padding:var(--sp-3) 0;
    border-top:1px solid var(--line);
  }
  .nav-links.open{display:flex}       /* 展開 */
  .nav-links a{
    padding:11px 12px;border-radius:var(--r);font-size:.95rem;
  }
  .nav-links a.active{
    background:var(--amber-100);
    color:var(--navy-800);
    border-bottom-color:var(--amber-500);
  }
}

/* 手機：區塊頂嘅「查看更多」掣加大觸控範圍（目標 ≥ 44px，好撳） */
@media(max-width:860px){
  .svc-links .btn-sm{
    padding:12px 20px;font-size:.9rem;min-height:44px;
  }
}

/* ==========================================================================
   I. 按鈕高光動畫 — hover 光澤掃過 ＋ 主 CTA 呼吸式發光
   --------------------------------------------------------------------
   ① 光澤掃過（.btn / .chip / .gate-btn）：淨係 hover、focus-visible 先郁，
      用 transform 平移（GPU 合成，唔觸發重排），平時零開銷。
      ::after 設 z-index:-1，而按鈕有 z-index:0 自成 stacking context，
      所以光澤層會畫喺「按鈕背景之上、按鈕文字之下」—— 唔會遮住文字。
   ② 呼吸式發光：淨係 .btn-accent / .btn-primary（主 CTA）先有，
      等客戶一眼睇得出呢度有個掣。Hero／CTA 區嘅白底掣配白色光。
   ③ 全部尊重 prefers-reduced-motion（系統熄咗動態效果就唔會播）。
   ========================================================================== */
.btn,.chip,.gate-btn{position:relative;z-index:0;overflow:hidden}

.btn::after,.chip::after,.gate-btn::after{
  content:"";position:absolute;top:0;bottom:0;left:0;right:0;
  z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,0)   32%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0)   68%);
  transform:translateX(-130%) skewX(-18deg);
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.btn:hover::after,.btn:focus-visible::after,
.chip:hover::after,.chip:focus-visible::after,
.gate-btn:hover::after,.gate-btn:focus-visible::after{
  transform:translateX(130%) skewX(-18deg);
}

@keyframes ttg-breathe-amber{
  0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.50)}
  50%    {box-shadow:0 0 18px 3px rgba(217,119,6,.28)}
}
@keyframes ttg-breathe-navy{
  0%,100%{box-shadow:0 0 0 0 rgba(13,36,64,.50)}
  50%    {box-shadow:0 0 18px 3px rgba(13,36,64,.26)}
}
@keyframes ttg-breathe-light{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  50%    {box-shadow:0 0 18px 3px rgba(255,255,255,.28)}
}
.btn-accent {animation:ttg-breathe-amber 2.8s var(--ease) infinite}
.btn-primary{animation:ttg-breathe-navy  2.8s var(--ease) infinite}
.hero .btn-primary,
.cta  .btn-primary{animation:ttg-breathe-light 2.8s var(--ease) infinite}

@media(prefers-reduced-motion:reduce){
  .btn::after,.chip::after,.gate-btn::after{display:none}
  .btn-accent,.btn-primary,.btn-flash,
  .hero .btn-primary,.cta .btn-primary{animation:none}
}

/* ==========================================================================
   J. 章節列（.guide）貼頂 ＋ 「睇更多」特強發光
   --------------------------------------------------------------------
   ① .nav 本身已經 sticky（z-index:100），所以章節列用 z-index:90 排喺佢下面，
      top 由 JS 量度 .nav 實高後寫入 --guide-top（主導覽喺手機會換行變高，
      所以要量而唔可以寫死）。
   ② 手機將章節列變成單行橫向捲，貼頂時唔會霸佔大半個畫面。
   ③ .btn-flash 係畀「睇更多」呢類重點掣用嘅特強呼吸光。
   ========================================================================== */
.guide.is-sticky{
  position:sticky;
  z-index:90;
  top:var(--guide-top,92px);
  box-shadow:0 4px 14px rgba(11,20,32,.10);
}

@keyframes ttg-breathe-strong{
  0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.85),0 0 12px 2px rgba(217,119,6,.40)}
  50%    {box-shadow:0 0 28px 7px rgba(217,119,6,.55),0 0 18px 4px rgba(217,119,6,.30)}
}
.btn-flash{animation:ttg-breathe-strong 2.2s var(--ease) infinite}

@media(max-width:860px){
  .guide-inner{flex-wrap:nowrap;gap:var(--sp-3)}
  .guide-lead{flex:0 0 auto}
  .guide-links{
    flex:1 1 auto;min-width:0;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    scroll-snap-type:x proximity;padding-bottom:2px;
  }
  .guide-links::-webkit-scrollbar{display:none}
  .guide-link{flex:0 0 auto;scroll-snap-align:center}
}

/* ==========================================================================
   K. 「查看 XX」掣高光閃亮（.btn-shine）
   --------------------------------------------------------------------
   ① 持續高光掃過：ghost（透明底）用琥珀色光先睇得到；
      .btn-accent（琥珀實心底）用白色光先睇得到 —— 兩種底色各自有專用光色。
   ② 柔和呼吸光圈：底色點變都睇到，等掣「識閃」。
   ③ 兩個偽元素／光圈都唔會遮文字：::before 用 z-index:-1（喺文字下面），
      光圈係外層 box-shadow（喺掣外面），所以文字可讀性完全唔受影響。
   ========================================================================== */
.btn-shine::before{
  content:"";position:absolute;top:0;bottom:0;left:0;right:0;
  z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(217,119,6,0)   34%,
    rgba(217,119,6,.30) 50%,
    rgba(217,119,6,0)   66%);
  transform:translateX(-130%) skewX(-18deg);
  animation:ttg-shine 3.6s var(--ease) infinite;
}
@keyframes ttg-shine{
  0%       {transform:translateX(-130%) skewX(-18deg)}
  55%,100% {transform:translateX(130%)  skewX(-18deg)}
}
.btn-shine{animation:ttg-shine-glow 2.6s var(--ease) infinite}
@keyframes ttg-shine-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.42)}
  50%    {box-shadow:0 0 14px 3px rgba(217,119,6,.22)}
}

/* ==========================================================================
   L. 區塊 CTA 掣統一改做「白底 ＋ 橙色高光」
   --------------------------------------------------------------------
   ① 白底（#fff）＋ 深藍字（navy-800）＋ 橙色邊（amber-500）。
      白底深藍字對比度約 14:1，遠超 WCAG AA 要求嘅 4.5:1，可讀性完全冇問題。
   ② 底色由「透明／琥珀實心」變成白色之後，原本畀琥珀底用嘅「白色高光」
      喺白底會睇唔到，所以要改返用琥珀色高光。
   ③ 只改配色，排版、結構、互動（平滑捲動、高亮、閃亮動畫）一概不變。
   ========================================================================== */
.btn-shine,.btn-flash{
  background:#fff;
  color:var(--navy-800);
  border-color:var(--amber-500);
}
.btn-shine:hover,.btn-flash:hover{
  background:#fff;
  color:var(--navy-800);
  border-color:var(--amber-600);
}
/* 可採購料號清單：排名欄用等寬數字、靠右，方便掃 */
.hot-parts th:first-child,
.hot-parts td.hot-rank{
  width:58px;text-align:right;
  font-family:var(--mono);font-weight:700;color:var(--ink-3);
}

/* ⚠️ 一定要放喺檔案最尾：CSS 後面嘅規則會覆蓋前面，
      呢個 block 要排喺所有 animation 定義之後先至關得切。 */
@media(prefers-reduced-motion:reduce){
  .btn::after,.chip::after,.gate-btn::after,.btn-shine::before{display:none}
  .btn-accent,.btn-primary,.btn-flash,.btn-shine,
  .hero .btn-primary,.cta .btn-primary{animation:none}
}