/* ==========================================================
   rightToRepair 專屬樣式（由 FrontendCtrler 依樣板檔名自動載入）
   注意：所有選擇器皆以 .r2r 為根，避免影響共用 Header/Footer
   ========================================================== */

/* ----------------------------------------------------------
   字型 —— 與平台前台頁面統一使用自架 OpenSans-Regular / Noto Sans SC
   ---------------------------------------------------------- */
@font-face{
  font-family:"OpenSans-Regular"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/src/core/fonts/opensans-regular.woff) format("woff"),
      url(/assets/src/core/fonts/OpenSans-Regular.ttf) format("truetype");
}
@font-face{
  font-family:"Noto Sans SC"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/src/core/fonts/noto-sans-sc-v11-chinese-simplified-regular.woff2) format("woff2"),
      url(/assets/src/core/fonts/noto-sans-sc-v11-chinese-simplified-regular.woff) format("woff");
}
@font-face{
  font-family:"Noto Sans SC"; font-style:normal; font-weight:500; font-display:swap;
  src:url(/assets/src/core/fonts/noto-sans-sc-v11-chinese-simplified-500.woff2) format("woff2"),
      url(/assets/src/core/fonts/noto-sans-sc-v11-chinese-simplified-500.woff) format("woff");
}
@font-face{
  font-family:"Noto Sans SC"; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/src/core/fonts/noto-sans-sc-v11-chinese-simplified-700.woff2) format("woff2"),
      url(/assets/src/core/fonts/noto-sans-sc-v11-chinese-simplified-700.woff) format("woff");
}

.r2r{
  /* 藍色系（主） */
  --brand:      #0B5FA5;
  --brand-dark: #08497F;
  --brand-mid:  #123F6D;
  --brand-deep: #071C33;

  /* 輔色 */
  --accent:     #00B39F;
  --accent-dk:  #00806F;
  --warn:       #C77A16;

  /* 底色 */
  --tint:       #E8F0F9;
  --tint-2:     #E1F1EE;
  --bg:         #FFFFFF;

  /* 文字 */
  --ink:    #10192A;
  --ink-2:  #5B6A80;
  --ink-3:  #8C99AB;
  --line:   #D9E3EF;

  --wrap:1200px;
  --r:14px;
  --shadow:0 20px 56px rgba(7,28,51,.13);
  --font-zh:"OpenSans-Regular",Helvetica,"Noto Sans SC",Arial,sans-serif;
  --font-en:"OpenSans-Regular",Helvetica,"Noto Sans SC",Arial,sans-serif;

  background:var(--bg); color:var(--ink);
  font-family:var(--font-zh); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.r2r *, .r2r *::before, .r2r *::after{ box-sizing:border-box; }

.r2r h1, .r2r h2, .r2r h3{
  margin:0; line-height:1.3; font-weight:400; letter-spacing:.005em;
  word-break:keep-all; overflow-wrap:normal; text-wrap:balance;
}
.r2r p{ margin:0; word-break:keep-all; overflow-wrap:break-word;font-weight: 100; }
.r2r a{ color:var(--brand); text-decoration:none; }
.r2r img, .r2r svg{ max-width:100%; display:block; }
.r2r :focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

.r2r .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.r2r .sec{ padding:50px 0; position:relative; }

.r2r .sec--tint{ background:linear-gradient(180deg,var(--tint) 0%,#F2F7FC 100%); }
.r2r .sec--dark{
  background:linear-gradient(160deg,var(--brand-deep) 0%,var(--brand-mid) 100%);
  color:#fff;
}
.r2r .sec--dark .lede{ color:#A9BFD8; }
.r2r .sec--dark .eyebrow{ color:var(--accent); }

.r2r .eyebrow{
  font-family:var(--font-en); font-size:13px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brand); margin-bottom:18px;
}
.r2r .h1{ margin-bottom: 18px;
    font-size: clamp(38px, 6vw, 90px);
    line-height: 1.3;
    letter-spacing: -.04em;}
.r2r .h2{ font-size:28px; letter-spacing:-.015em; }
.r2r .lede{ margin-top:20px; color:var(--ink-2); font-size:19px; max-width:800px; }
.r2r .head{ margin-bottom:20px; }
.r2r .head--mid{ text-align:center; max-width:900px; margin-left:auto; margin-right:auto; }
.r2r .head--mid .lede{ margin-left:auto; margin-right:auto; }

/* ---------- 按鈕 ---------- */
.r2r .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px; border-radius:8px; font-weight:500; font-size:17px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s;
}
.r2r .btn--accent{ background:var(--accent); color:#04231F; box-shadow:0 8px 22px rgba(0,179,159,.3); }
.r2r .btn--accent:hover{ background:#00A08E; }
.r2r .btn--onDark{ border-color:rgba(255,255,255,.42); color:#fff; }
.r2r .btn--onDark:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.r2r .btns{ display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; }
.r2r .btns--mid{ justify-content:center; }

.r2r .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Hero ---------- */
.r2r .hero{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  display:flex; align-items:center; justify-content:center;
  min-height:700px; padding:0 6%;
  background:linear-gradient(155deg,#04101F 0%,var(--brand-deep) 34%,#0D3760 76%,#124C82 100%);
}
.r2r .hero__glow{
  position:absolute; width:1100px; height:1100px; left:50%; top:-680px; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(0,179,159,.3) 0%,rgba(11,95,165,.22) 40%,transparent 68%);
  pointer-events:none;
}
.r2r .hero__glow2{
  position:absolute; width:620px; height:620px; left:-220px; bottom:-300px;
  background:radial-gradient(circle,rgba(11,95,165,.45) 0%,transparent 66%);
  pointer-events:none;
}
.r2r .hero__grid{
  position:absolute; inset:0; opacity:.6;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    url(/assets/src/224/img/rightToRepair/bannerBG.webp);
  background-size:     78px 78px, 78px 78px, cover;
  background-position: 0 0,       0 0,       center center;
  background-repeat:   repeat,    repeat,    no-repeat;
}
.r2r .hero__in{ position:relative; width:100%; }
/* 字級與行高對齊 /RepairServices banner：桌機 90px / 35px，≤991px 40px / 20px */
.r2r .hero .h1{ font-size:90px; line-height:1.2; letter-spacing:normal; margin-bottom:.5rem; color:#fff; }
.r2r .hero__sub{ font-size:35px; line-height:40px; font-weight:300; color:#fff; margin:0; }
.r2r .hero__note{ margin:18px auto 0; font-size:17.5px; color:#93AAC4; max-width:34em; }

@media(max-width:991px){
  .r2r .hero{ min-height:400px; }
  .r2r .hero .h1{ font-size:40px; }
  .r2r .hero__sub{ font-size:20px; line-height:24px; }
}

/* ---------- 自我檢核 ---------- */
.r2r .rdy{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.r2r .rdy__i{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:20px; text-align:center;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.r2r .rdy__i:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--brand); }
.r2r .rdy__ic{
  width:62px; height:62px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; background:var(--tint); color:var(--brand);
  transition:background .22s ease, color .22s ease;
}
.r2r .rdy__i:hover .rdy__ic{ background:var(--brand); color:#fff; }
.r2r .rdy__ic svg{ width:30px; height:30px; }
.r2r .rdy__i h3{ font-size:20px; margin-bottom:8px; }
.r2r .rdy__i p{ font-size:16px; line-height:1.7; color: var(--ink-2);}
.r2r .rdyq{
  margin:0 auto 46px; max-width:640px; text-align:center;
  font-size:19px; color:var(--ink-2);
}
@media(max-width:1000px){ .r2r .rdy{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .r2r .rdy{ grid-template-columns:1fr; } }

/* ---------- 什麼是 R2R ---------- */
.r2r .wht{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.r2r .wht__i{
  text-align:center; padding:25px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.r2r .wht__i:hover{ background:rgba(0,179,159,.1); border-color:rgba(0,179,159,.42); transform:translateY(-4px); }
.r2r .wht__ic{
  width:96px; height:96px; margin:0 auto 26px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(0,179,159,.12); border:1px solid rgba(0,179,159,.3); color:var(--accent);
}
.r2r .wht__ic svg{ width:46px; height:46px; }
.r2r .wht__i h3{ font-size:22px; color:#fff; margin-bottom:14px; }
.r2r .wht__i p{ font-size:16.5px; color:#A9BFD8; line-height:1.8; }
@media(max-width:900px){ .r2r .wht{ grid-template-columns:1fr; gap:18px; } .r2r .wht__i{ padding:34px 26px; } }

.r2r .whatkey{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
.r2r .whatkey__i{
  text-align:center; padding:20px;
  background:rgba(0,0,0,.22); border-radius:var(--r); border:1px solid rgba(255,255,255,.1);
}
.r2r .whatkey__n{ font-family:var(--font-en); font-size:clamp(30px,3.6vw,42px); font-weight:700; color:var(--accent); line-height:1.1; }
.r2r .whatkey__l{ font-size:16px; color:#A9BFD8; margin-top:12px; line-height:1.6; }
@media(max-width:820px){ .r2r .whatkey{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .r2r .whatkey{ grid-template-columns:1fr; } }

/* ---------- 時程軸（橫向 SVG） ---------- */
.r2r .tmlfig{ margin:0; }
.r2r .tmlfig svg{ width:100%; height:auto; display:block; }
.r2r .tmlaxis{ stroke:#B9CBDE; stroke-width:2; }
.r2r .ttick{ stroke:#B9CBDE; stroke-width:1.4; }
.r2r .tnode circle{ fill:#fff; stroke:var(--brand); stroke-width:3; }
.r2r .tdate{ font-family:var(--font-en); font-size:16px; font-weight:700; fill:var(--brand); }
.r2r .tlabel{ font-size:17px; font-weight:700; fill:var(--ink); }
.r2r .tdesc{ font-size:13.5px; fill:var(--ink-2); }
.r2r .tnode.is-now circle{ stroke:var(--accent); }
.r2r .tnode.is-now .tdate{ fill:var(--accent-dk); }
.r2r .tpulse{ fill:rgba(0,179,159,.22); stroke:none !important; }
.r2r .tbadge rect{ fill:var(--accent); stroke:none; }
.r2r .tbadge text{ font-size:13px; font-weight:700; fill:#04231F; }
@media (prefers-reduced-motion:no-preference){
  .r2r .tpulse{ transform-origin:416px 180px; animation:r2rTp 3s ease-out infinite; }
  @keyframes r2rTp{ 0%{ transform:scale(.7); opacity:.9; } 100%{ transform:scale(1.9); opacity:0; } }
}

/* ---------- 保固延長比較 ---------- */
.r2r .wcmp{ margin-top:34px; padding:30px 32px; border:1px solid rgba(255,255,255,.15); border-radius:var(--r); background:rgba(0,0,0,.2); }
.r2r .wcmp__t{ font-size:20px; font-weight:700; color:#fff; margin-bottom:6px; }
.r2r .wcmp__s{ font-size:16px; color:#8FA5BE; margin-bottom:24px; }
.r2r .wcmp__r{ display:grid; grid-template-columns:96px 1fr 92px; gap:16px; align-items:center; margin-bottom:14px; }
.r2r .wcmp__r:last-child{ margin-bottom:0; }
.r2r .wcmp__n{ font-size:16px; color:#CFDEEC; }
.r2r .wcmp__bar{ position:relative; height:32px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden; }
.r2r .wcmp__f{ position:absolute; left:0; top:0; bottom:0; border-radius:6px; }
.r2r .wcmp__f--base{ width:66.7%; background:rgba(150,190,230,.42); }
.r2r .wcmp__f--ext{ left:66.7%; width:33.3%; background:var(--accent); }
.r2r .wcmp__lb{ position:absolute; top:50%; transform:translateY(-50%); font-size:13px; font-weight:600; }
.r2r .wcmp__lb--a{ left:14px; color:#DDE9F5; }
.r2r .wcmp__lb--b{ left:70%; color:#04231F; }
.r2r .wcmp__v{ font-family:var(--font-en); font-size:16px; font-weight:700; color:#fff; text-align:right; }
.r2r .wcmp__r.is-hi .wcmp__v{ color:var(--accent); }
@media(max-width:620px){
  .r2r .wcmp__r{ grid-template-columns:1fr; gap:6px; }
  .r2r .wcmp__v{ text-align:left; }
}

/* ---------- 決策樹 ---------- */
.r2r .tree{ margin:0; }
.r2r .tree svg{ width:100%; height:auto; display:block; }
.r2r .trbox rect{ fill:#fff; stroke:var(--line); stroke-width:1.6; }
.r2r .trbox--start rect{ fill:var(--tint); stroke:var(--brand); }
.r2r .trbox--ok rect{ fill:rgba(0,179,159,.12); stroke:var(--accent-dk); stroke-width:2; }
.r2r .trbox--no rect{ fill:#F7F9FC; stroke:#C9D6E4; }
.r2r .trbox text{ font-size:15px; fill:var(--ink); font-weight:700; }
.r2r .trbox--ok text{ fill:var(--accent-dk); }
.r2r .trbox--no text{ font-weight:400; fill:var(--ink-2); font-size:16px; }
.r2r .trdia polygon{ fill:#fff; stroke:var(--brand); stroke-width:1.8; }
.r2r .trdia text{ font-size:14.5px; fill:var(--ink); font-weight:700; }
.r2r .trline{ stroke:#9FB4CC; stroke-width:1.6; fill:none; }
.r2r .trlb{ font-size:16px; fill:var(--ink-2); font-weight:600; }
.r2r .trlb--y{ fill:var(--accent-dk); }
.r2r .trarw{ fill:#9FB4CC; }
.r2r .treecap{ margin-top:18px; font-size:16px; color:var(--ink-3); text-align:center; }

/* ---------- R2R 規範對照 ---------- */
.r2r .cmp{ margin-top:50px; overflow-x:auto; }
.r2r .cmp table{ width:100%; border-collapse:separate; border-spacing:0 4px; min-width:880px; }
.r2r .cmp th{
  padding:10px 22px; font-size:16px; font-weight:600; text-align:center; line-height:1.4;
  background:var(--brand-deep); color:#fff;
}
.r2r .cmp td{ padding:10px 22px; font-size:16px; color:var(--ink); vertical-align:middle; line-height:1.6; }
.r2r .cmp td.req{ background:var(--tint-2); width:32%; }
.r2r .cmp .req__t{ display:block; color:var(--brand); font-weight:600; margin-bottom:4px; }
.r2r .cmp .req__a{ display:block; color:var(--ink-3); font-size:14px; }
.r2r .cmp td.chk{ background:#EFF2F5; width:18%; text-align:center; }
.r2r .cmp td.val{ background:#EFF2F5; color:var(--ink-2); width:32%; }
.r2r .cmp tr:nth-child(even) td.req{ background:#E4F0EB; }
.r2r .cmp tr:nth-child(even) td.chk, .r2r .cmp tr:nth-child(even) td.val{ background:#E9EDEA; }
.r2r .ck{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:#fff; flex:0 0 auto;
}
.r2r .ck svg{ width:15px; height:15px; }

/* ---------- wareconn 解方 ---------- */
.r2r .sol{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.r2r .sol__i{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:20px; position:relative; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.r2r .sol__i::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--sc); transform:scaleY(0); transform-origin:top; transition:transform .28s ease;
}
.r2r .sol__i:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:#C3D3E4; }
.r2r .sol__i:hover::before{ transform:scaleY(1); }
.r2r .sol__i:nth-child(1){ --sc:#0B5FA5; }
.r2r .sol__i:nth-child(2){ --sc:#1877C4; }
.r2r .sol__i:nth-child(3){ --sc:#0E9C93; }
.r2r .sol__i:nth-child(4){ --sc:#00B39F; }
.r2r .sol__i:nth-child(5){ --sc:#2FB395; }
.r2r .sol__i:nth-child(6){ --sc:#4A9BDB; }
.r2r .sol__ic{
  width:56px; height:56px; border-radius:13px; display:grid; place-items:center;
  background:var(--tint); color:var(--sc); margin-bottom:20px;
}
.r2r .sol__ic svg{ width:28px; height:28px; }
.r2r .sol__i h3{ font-size:20px; margin-bottom:9px; }
.r2r .sol__i p{ font-size:16px; color:var(--ink-2); line-height:1.72; }
.r2r .soladv{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px;
  padding-top:40px; border-top:1px solid var(--line);
}
.r2r .soladv__i{ text-align:center; }
.r2r .soladv__ic{
  width:44px; height:44px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,179,159,.12); color:var(--accent-dk);
}
.r2r .soladv__ic svg{ width:22px; height:22px; }
/* 由 h4 改為 h3（修正標題階層）；以下數值等同原 h4 的算繪結果，視覺不變 */
.r2r .soladv__i h3{ font-size:20px; font-weight:400; line-height:1.6; letter-spacing:normal;
  margin:26.6px 0 10px; word-break:normal; text-wrap:wrap; }
.r2r .soladv__i p{ font-size:16px; color:var(--ink-2); line-height:1.68; }
@media(max-width:1000px){ .r2r .sol{ grid-template-columns:repeat(2,1fr); } .r2r .soladv{ grid-template-columns:repeat(2,1fr); gap:26px; } }
@media(max-width:600px){ .r2r .sol{ grid-template-columns:1fr; } .r2r .soladv{ grid-template-columns:1fr; } }

/* ---------- 四項義務 ---------- */
.r2r .obwrap{ display:grid; grid-template-columns:.92fr 1.58fr; gap:72px; align-items:start; }
.r2r .obside{ position:sticky; top:104px; }
.r2r .obside .lede{ max-width:34em; }
.r2r .obscope{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.r2r .obscope__t{
  font-family:var(--font-en); font-size:14px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;
}
.r2r .obscope__l{ display:flex; flex-wrap:wrap; gap:7px; }
.r2r .obscope__l span{
  font-size:14px; color:var(--ink-2); background:var(--tint);
  border-radius:100px; padding:5px 13px;
}

.r2r .ob{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.r2r .ob__i{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:32px 30px 34px;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.r2r .ob__i:nth-child(1){ --c:#0B5FA5; --ct:rgba(11,95,165,.09); }
.r2r .ob__i:nth-child(2){ --c:#1877C4; --ct:rgba(24,119,196,.09); }
.r2r .ob__i:nth-child(3){ --c:#0E9C93; --ct:rgba(14,156,147,.1); }
.r2r .ob__i:nth-child(4){ --c:#00B39F; --ct:rgba(0,179,159,.1); }
.r2r .ob__i::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--c); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.r2r .ob__i:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:#C3D3E4; }
.r2r .ob__i:hover::before{ transform:scaleX(1); }

.r2r .ob__num{
  position:absolute; right:18px; top:6px; font-family:var(--font-en);
  font-size:82px; font-weight:700; line-height:1; color:var(--ct);
  letter-spacing:-.04em; pointer-events:none; transition:color .24s ease;
}
.r2r .ob__i:hover .ob__num{ color:var(--c); opacity:.16; }

.r2r .ob__top{ display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; }
.r2r .ob__ic{
  width:60px; height:60px; border-radius:14px; display:grid; place-items:center;
  background:var(--ct); color:var(--c); flex:0 0 auto;
  transition:background .24s ease, color .24s ease;
}
.r2r .ob__ic svg{ width:29px; height:29px; }
.r2r .ob__i:hover .ob__ic{ background:var(--c); color:#fff; }
.r2r .ob__art{
  font-size:16px; color:var(--c); background:var(--ct);
  border-radius:100px; padding:4px 11px; white-space:nowrap; font-weight:500;
}
.r2r .ob__i h3{ font-size:20px; margin:24px 0 9px; position:relative; }
.r2r .ob__lead{ color: var(--ink-2); font-size:16px; font-weight:300; position:relative; }
@media(max-width:1000px){
  .r2r .obwrap{ grid-template-columns:1fr; gap:48px; }
  .r2r .obside{ position:static; }
}
@media(max-width:620px){ .r2r .ob{ grid-template-columns:1fr; } }

/* ---------- 數據串聯圖 ---------- */
.r2r .pipe{
  border-radius:var(--r); padding:20px 24px 12px;
  background:linear-gradient(150deg,#04101F 0%,#0A2440 48%,#10456F 100%);
  border:1px solid rgba(255,255,255,.12);
}
.r2r .pipe svg{ width:100%; height:auto; display:block; }

/* 英文版：節點下方的英文副標與主標重複，隱藏；歐盟平台框內第三行上移補位 */
html[lang^="en"] .r2r .sb--en{ display:none; }
html[lang^="en"] .r2r .sb--euSub{ transform:translateY(-24px); }

/* 手機：三張寬版圖（時程軸、判斷樹、數據串聯）維持可讀字級，改為左右滑動 */
@media(max-width:760px){
  .r2r .tmlfig, .r2r .tree, .r2r .pipe{
    overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  .r2r .tmlfig svg, .r2r .tree svg, .r2r .pipe svg{ width:760px; max-width:none; }
}

.r2r .nd circle, .r2r .nd rect{ fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.34); stroke-width:1.6; }
.r2r .nd .ico{ fill:none; stroke:#CFDEEC; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.r2r .nd .nm{ fill:#fff; font-size:20px; font-weight:700; }
.r2r .nd .sb{ fill:#8FA5BE; font-size:16px; font-family:var(--font-en); }

.r2r .nd--hub circle{ fill:rgba(0,179,159,.16); stroke:var(--accent); stroke-width:2.2; }
.r2r .nd--hub .ico{ stroke:var(--accent); stroke-width:1.9; }
.r2r .nd--hub .nm{ fill:#fff; font-size:23px; }
.r2r .pring{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.35; }

.r2r .nd--eu rect{ fill:rgba(120,180,255,.1); stroke:rgba(150,205,255,.5); }
.r2r .nd--eu .ico{ stroke:#9FD9FF; }

.r2r .ln{ fill:none; stroke:rgba(255,255,255,.32); stroke-width:2; stroke-dasharray:6 7; }
.r2r .ln--hi{ stroke:var(--accent); stroke-width:2.4; opacity:.85; }
.r2r .lb{ fill:#9FB4CC; font-size:16px; }
.r2r .lb--hi{ fill:var(--accent); font-size:16px; font-weight:600; font-family:var(--font-en); letter-spacing:.08em; }
.r2r .ah{ fill:rgba(255,255,255,.5); }
.r2r .ah--hi{ fill:var(--accent); }
@media (prefers-reduced-motion:no-preference){
  .r2r .ln{ animation:r2rDash 3.6s linear infinite; }
  @keyframes r2rDash{ to{ stroke-dashoffset:-52; } }
  .r2r .pring{ transform-origin:430px 262px; animation:r2rRing 3.4s ease-out infinite; }
  @keyframes r2rRing{ 0%{ transform:scale(.72); opacity:.5; } 100%{ transform:scale(1.5); opacity:0; } }
}

.r2r .pkey{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:26px; }
.r2r .pkey span{
  display:inline-flex; align-items:center; gap:9px; padding:9px 18px;
  border:1px solid rgba(255,255,255,.16); border-radius:100px;
  background:rgba(255,255,255,.05); font-size:16px; color:#CFDEEC;
}
.r2r .pkey i{ width:9px; height:9px; border-radius:50%; background:var(--accent); }
.r2r .pkey span:nth-child(2) i{ background:#9FD9FF; }
.r2r .pkey span:nth-child(3) i{ background:rgba(255,255,255,.5); }
.r2r .fnote{ margin-top:24px; font-size:16px; color:#8FA5BE; text-align:center; }

/* ---------- 數字實績 ---------- */
.r2r .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.r2r .stats__i{
  text-align:center; padding:30px 26px; border-radius:var(--r);
  background:#fff; border:1px solid var(--line);
}
.r2r .stats__n{
  font-family:var(--font-en); font-size:clamp(44px,6vw,68px); font-weight:700;
  letter-spacing:-.03em; line-height:1;
  background:linear-gradient(120deg,var(--brand) 0%,var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.r2r .stats__l{ margin-top:16px; color:var(--ink-2); font-size:20px; }
@media(max-width:700px){ .r2r .stats{ grid-template-columns:1fr; } }

/* ---------- Insights ---------- */
.r2r .posts{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.r2r .post{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:transform .22s, box-shadow .22s, border-color .22s;
}
.r2r .post:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--brand); }
.r2r .post__top{ height:112px; position:relative; }
.r2r .post:nth-child(1) .post__top{ background:linear-gradient(135deg,#0B5FA5,#12406E); }
.r2r .post:nth-child(2) .post__top{ background:linear-gradient(135deg,#0E7E8C,#0B5FA5); }
.r2r .post:nth-child(3) .post__top{ background:linear-gradient(135deg,#00B39F,#0E7E8C); }
.r2r .post:nth-child(4) .post__top{ background:linear-gradient(135deg,#12406E,#0E7E8C); }
.r2r .post__top::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);
  background-size:26px 26px;
}
.r2r .post__tag{
  position:absolute; left:22px; bottom:18px; z-index:1;
  font-family:var(--font-en); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; padding:4px 11px; border-radius:100px;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.3);
}
.r2r .post__body{ padding:20px; flex:1; display:flex; flex-direction:column; }
.r2r .post{ min-width:0; }
/* 卡片窄，keep-all 會讓無空格的中文長句無法換行而被裁切，這裡改回一般斷行 */
.r2r .post h3{ font-size:18px; line-height:1.5; margin-bottom:10px; color:var(--ink); word-break:normal; overflow-wrap:break-word; text-wrap:pretty; }
.r2r .post p{ color:var(--ink-2); font-size:16px; flex:1; word-break:normal; text-wrap:pretty; }
.r2r .post__more{ margin-top:10px; font-size:16px; font-weight:500; color:var(--brand); }
@media(max-width:1200px){ .r2r .posts{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px){ .r2r .posts{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.r2r .faq details{ border-bottom:1px solid var(--line); }
.r2r .faq details:first-child{ border-top:1px solid var(--line); }
.r2r .faq summary{ list-style:none; cursor:pointer; padding:15px 52px 15px 0; position:relative; font-size:20px; font-weight:500; }
.r2r .faq summary::-webkit-details-marker{ display:none; }
.r2r .faq summary::after{ content:"+"; position:absolute; right:6px; top:15px; font-family:var(--font-en); font-size:26px; font-weight:300; color:var(--brand); line-height:1; }
.r2r .faq details[open] summary::after{ content:"\2013"; }
.r2r .faq .ans{ padding:0 52px 15px 0; color:var(--ink-2); font-size:16px; }

/* ---------- CTA ---------- */
.r2r .cta{
  position:relative; overflow:hidden; color:#fff; text-align:center; padding:50px 0;
  background:linear-gradient(150deg,#04101F 0%,#0B3055 44%,#0B5FA5 100%);
}
.r2r .cta__glow{
  position:absolute; width:900px; height:900px; left:50%; top:-460px; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(0,179,159,.3) 0%,transparent 64%); pointer-events:none;
}
.r2r .cta h2{ position:relative; font-size:clamp(26px,3.8vw,42px); letter-spacing:-.015em; }
.r2r .cta p{ position:relative; margin-top:20px; color:#B7C8DC;font-size: 19px; }

/* ---------- 頁面內免責聲明（頁面自有，非站台共用頁尾） ---------- */
.r2r .r2rDisc{ background:#04101F; color:#7F92A9; padding:32px 0 40px; font-size:12.5px; }
.r2r .r2rDisc .wrap{ max-width:70em; }

/* ---------- 進場 ---------- */
/* 只有在 JS 可執行時（.r2r 由頁面開頭的小段 script 加上 .js）才先隱藏再進場；
   未執行 JS（爬蟲、停用 JS、載入失敗）時內容維持可見，不影響索引與可讀性 */
.r2r.js .rev{ opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s ease; }
.r2r.js .rev.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .r2r.js .rev{ opacity:1; transform:none; transition:none; } }