/* ===========================================================
   PLAYCARD 首頁改版 v2 — 黑底 + 金色
   放置位置：app/static/css/home_v2.css
   只在首頁載入（home.html 的 {% block head %}），不影響其他頁面
   =========================================================== */

/* 變數同時掛在 body.pc2-page 上，否則 .pc2 外層的 body/footer/navbar 規則取不到變數 */
.pc2, body.pc2-page {
  --pc2-bg: #08080a;
  --pc2-bg2: #0c0c0f;
  --pc2-gold: #f5c518;
  --pc2-gold-hi: #ffd85c;
  --pc2-line: rgba(255, 255, 255, .08);
  --pc2-text: #e9e9ee;
  --pc2-muted: rgba(255, 255, 255, .58);
  --pc2-faint: rgba(255, 255, 255, .35);
}

/* 首頁需要滿版深色：只覆寫首頁的 body / main 容器 */
body.pc2-page { background: var(--pc2-bg) !important; color: var(--pc2-text); }
body.pc2-page main.container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.pc2-page footer { background: var(--pc2-bg) !important; border-top: 1px solid var(--pc2-line); }
body.pc2-page .navbar { background: rgba(8, 8, 10, .86) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--pc2-line) !important; }

.pc2 { font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
.pc2 a { color: var(--pc2-gold); text-decoration: none; }
.pc2 a:hover { color: var(--pc2-gold-hi); }
.pc2 .pc2-wrap { max-width: 1320px; margin: 0 auto; }
.pc2 .pc2-mono { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }
.pc2 .pc2-num { font-family: "Space Grotesk", "Noto Sans TC", sans-serif; font-weight: 700; }

/* --- 區塊標籤 / 標題 --- */
.pc2 .pc2-kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pc2-gold);
}
.pc2 .pc2-h2 { font-weight: 900; font-size: 34px; line-height: 1.2; color: #fff; margin: 12px 0 0; }
.pc2 .pc2-h3 { font-weight: 900; font-size: 27px; line-height: 1.35; color: #fff; margin: 0; }
.pc2 .pc2-body { font-size: 14.5px; line-height: 2.05; color: var(--pc2-muted); text-wrap: pretty; margin: 0; }
.pc2 .pc2-soon {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; color: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .16); padding: 7px 12px; border-radius: 999px;
  white-space: nowrap;
}

/* ===========================================================
   按鈕系統 — Chrome Foil（金屬斜切）
   切角取代圓角；金色用四段拉絲漸層而非純色
   ※ clip-path 會剪掉描邊的切角，所以一律不用 border，
     次要按鈕以半透明漸層填充作為“描邊感”。
   =========================================================== */
.pc2 {
  --pc2-cut: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  --pc2-cut-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  --pc2-foil: linear-gradient(135deg, #ffe89a 0%, #f5c518 38%, #c99406 62%, #ffe08a 100%);
  --pc2-foil-silver: linear-gradient(135deg, #fbfcfd 0%, #d5dae1 36%, #8d949e 60%, #eef1f5 100%);
  --pc2-foil-copper: linear-gradient(135deg, #f6c9a6 0%, #d98f5c 36%, #b06a38 60%, #f0b98f 100%);
  --pc2-holo: linear-gradient(120deg, #a8f0e0 0%, #9ab8ff 26%, #d7a8f0 50%, #ffc9a8 74%, #a8f0e0 100%);
  --pc2-sheen: linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, .92) 46%, rgba(255, 255, 255, .42) 52%, transparent 66%);
}

.pc2 .pc2-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; padding: 13px 22px;
  border: 0; border-radius: 0; color: #fff; text-decoration: none;
  clip-path: var(--pc2-cut);
  background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035));
  transition: background .16s ease, box-shadow .16s ease, color .16s ease;
}
/* 只套在「一般次要按鈕」上；金/銀/銅/送鑑按鈕的 hover 各自只動 background-position，
   若在這裡用 background 縮寫會把它們的圖層清掉、變成黑底（bug 已修）*/
.pc2 .pc2-btn:not(.pc2-btn-gold):not(.pc2-btn-silver):not(.pc2-btn-copper):not(.pc2-btn-grader):not(.pc2-btn-text):hover {
  color: #fff;
  background: linear-gradient(150deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
}

/* 主按鈕：拉絲金 + 滑鳠滑過的金屬閃光
   光帶是背景的第一層，hover 時平移 background-position 掃過。
   ※ 不能用 background: 縮寫覆寫，不然會把圖層清掉。*/
.pc2 .pc2-btn-gold {
  font-weight: 700; color: #1a1204;
  background-image:
    linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, .9) 46%, rgba(255, 255, 255, .4) 52%, transparent 66%),
    var(--pc2-foil);
  background-size: 260% 100%, 100% 100%;
  background-position: 180% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px -8px rgba(245, 197, 24, .6);
  transition: background-position .78s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.pc2 .pc2-btn-gold:hover {
  color: #1a1204;
  background-position: -80% 0, 0 0;
  box-shadow: 0 12px 30px -6px rgba(245, 197, 24, .9);
}

/* 銀：回訪動作（登入）*/
.pc2 .pc2-btn-silver {
  font-weight: 700; color: #1c2026;
  background-image: var(--pc2-sheen), var(--pc2-foil-silver);
  background-size: 260% 100%, 100% 100%;
  background-position: 180% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px -10px rgba(214, 222, 232, .5);
  transition: background-position .78s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.pc2 .pc2-btn-silver:hover {
  color: #1c2026;
  background-position: -80% 0, 0 0;
  box-shadow: 0 12px 30px -8px rgba(214, 222, 232, .75);
}

/* 銅：限時活動（特別活動開團）
   ※ 深色段固定 #b06a38——再深就過不了 4.5:1 小字對比門檻。*/
.pc2 .pc2-btn-copper {
  font-weight: 700; color: #2b1206;
  background-image: var(--pc2-sheen), var(--pc2-foil-copper);
  background-size: 260% 100%, 100% 100%;
  background-position: 180% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px -10px rgba(217, 143, 92, .55);
  transition: background-position .78s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.pc2 .pc2-btn-copper:hover {
  color: #2b1206;
  background-position: -80% 0, 0 0;
  box-shadow: 0 12px 30px -8px rgba(217, 143, 92, .8);
}

@media (prefers-reduced-motion: reduce) {
  .pc2 .pc2-btn-gold,
  .pc2 .pc2-btn-silver,
  .pc2 .pc2-btn-copper { transition: box-shadow .25s ease; }
  .pc2 .pc2-btn-gold:hover,
  .pc2 .pc2-btn-silver:hover,
  .pc2 .pc2-btn-copper:hover { background-position: 180% 0, 0 0; }
}

/* 金色次要：金字 + 金調半透明底 */
.pc2 .pc2-btn-goldline {
  color: var(--pc2-gold);
  background: linear-gradient(150deg, rgba(245, 197, 24, .20), rgba(245, 197, 24, .05));
}
.pc2 .pc2-btn-goldline:hover {
  color: var(--pc2-gold);
  background: linear-gradient(150deg, rgba(245, 197, 24, .34), rgba(245, 197, 24, .1));
}

.pc2 .pc2-btn-lg { font-size: 15px; padding: 17px 32px; }

/* 送鑑廠商：左側 2px 色條區分，滑過才染色 */
.pc2 .pc2-btn-grader {
  font-family: "Space Grotesk", "Noto Sans TC", sans-serif;
  font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  border-left: 2px solid rgba(255, 255, 255, .5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 180% 0, 0 0;
  background-repeat: no-repeat;
  transition: background-position .78s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.pc2 .pc2-btn-grader:hover { background-position: -80% 0, 0 0; }

/* 暗金屬的掃光帶比金色弱，不然白光會抹掉字 */
.pc2 {
  --pc2-sheen-dark: linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, .42) 46%, rgba(255, 255, 255, .16) 52%, transparent 66%);
}
/* 四家送鑑：同一顆暗金屬，只把色相往各家品牌色偏一點，
   差別主要靠左側 2px 色條。不再開新的金屬階層。*/
.pc2 .pc2-btn-grader.is-psa,
.pc2 .pc2-btn-grader.is-bgs,
.pc2 .pc2-btn-grader.is-cgc,
.pc2 .pc2-btn-grader.is-sgc { color: #fff; }

.pc2 .pc2-btn-grader.is-psa {
  border-left-color: #e8534a;
  background-image: var(--pc2-sheen-dark),
    linear-gradient(135deg, #54403c 0%, #352624 36%, #1f1615 60%, #4d3a37 100%);
}
.pc2 .pc2-btn-grader.is-psa:hover { color: #fff; box-shadow: 0 10px 26px -12px rgba(232, 83, 74, .8); }

.pc2 .pc2-btn-grader.is-bgs {
  border-left-color: #8f9cff;
  background-image: var(--pc2-sheen-dark),
    linear-gradient(135deg, #3f4658 0%, #262c3c 36%, #161a26 60%, #394054 100%);
}
.pc2 .pc2-btn-grader.is-bgs:hover { color: #fff; box-shadow: 0 10px 26px -12px rgba(143, 156, 255, .8); }

.pc2 .pc2-btn-grader.is-cgc {
  border-left-color: #7af0d0;
  background-image: var(--pc2-sheen-dark),
    linear-gradient(135deg, #38504b 0%, #223330 36%, #141d1b 60%, #334a45 100%);
}
.pc2 .pc2-btn-grader.is-cgc:hover { color: #fff; box-shadow: 0 10px 26px -12px rgba(122, 240, 208, .8); }

.pc2 .pc2-btn-grader.is-sgc {
  border-left-color: #ff9ad5;
  background-image: var(--pc2-sheen-dark),
    linear-gradient(135deg, #523c4a 0%, #33242e 36%, #1e151a 60%, #4c3744 100%);
}
.pc2 .pc2-btn-grader.is-sgc:hover { color: #fff; box-shadow: 0 10px 26px -12px rgba(255, 154, 213, .8); }

@media (prefers-reduced-motion: reduce) {
  .pc2 .pc2-btn-grader { transition: box-shadow .25s ease; }
  .pc2 .pc2-btn-grader:hover { background-position: 180% 0, 0 0; }
}

/* 銅調的文字連結型按鈕（用在開團區）*/
.pc2 .pc2-btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: rgba(255, 255, 255, .6);
  padding: 12px 4px; background: none; clip-path: none;
  border-bottom: 1px solid rgba(217, 143, 92, .5);
}
.pc2 .pc2-btn-text:hover { color: #e5a97a; border-bottom-color: #e5a97a; background: none; }

/* 導覽列的註冊鍵也改成金屬斜切（取代 Bootstrap btn-warning）*/
/* 導覽列的註冊 / 登入鍵也改成金屬斜切（取代 Bootstrap btn-warning / 純文字連結）*/
body.pc2-page .navbar .btn-warning,
body.pc2-page .navbar .btn-primary,
body.pc2-page .navbar .btn-outline-light,
body.pc2-page .navbar .btn-light {
  border: 0 !important; border-radius: 0 !important;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  font-weight: 700;
  background-size: 260% 100%, 100% 100% !important;
  background-position: 180% 0, 0 0 !important;
  background-repeat: no-repeat !important;
  transition: background-position .78s cubic-bezier(.2, .7, .3, 1);
}
body.pc2-page .navbar .btn-warning,
body.pc2-page .navbar .btn-primary {
  color: #1a1204 !important;
  background-image:
    linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, .92) 46%, rgba(255, 255, 255, .42) 52%, transparent 66%),
    linear-gradient(135deg, #ffe89a 0%, #f5c518 38%, #c99406 62%, #ffe08a 100%) !important;
}
body.pc2-page .navbar .btn-outline-light,
body.pc2-page .navbar .btn-light {
  color: #1c2026 !important;
  background-image:
    linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, .95) 46%, rgba(255, 255, 255, .45) 52%, transparent 66%),
    linear-gradient(135deg, #fbfcfd 0%, #d5dae1 36%, #8d949e 60%, #eef1f5 100%) !important;
}
body.pc2-page .navbar .btn-warning:hover,
body.pc2-page .navbar .btn-primary:hover,
body.pc2-page .navbar .btn-outline-light:hover,
body.pc2-page .navbar .btn-light:hover {
  background-position: -80% 0, 0 0 !important;
}

/* --- Hero --- */
.pc2 .pc2-hero {
  padding: 96px 48px 88px; border-bottom: 1px solid var(--pc2-line);
  background: radial-gradient(85% 120% at 88% 10%, rgba(245, 197, 24, .13), transparent 62%);
}
.pc2 .pc2-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.pc2 .pc2-hero-kicker {
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--pc2-gold);
}
.pc2 .pc2-hero-title { font-weight: 900; font-size: 60px; line-height: 1.14; letter-spacing: -.01em; color: #fff; margin: 22px 0 24px; }
.pc2 .pc2-hero-lead { max-width: 530px; font-size: 15.5px; line-height: 2.05; color: rgba(255, 255, 255, .62); text-wrap: pretty; margin: 0; }
.pc2 .pc2-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pc2 .pc2-hero-media { position: relative; }
.pc2 .pc2-hero-media::before {
  content: ""; position: absolute; inset: -8% -4%; filter: blur(30px);
  background: radial-gradient(60% 60% at 50% 50%, rgba(245, 197, 24, .18), transparent 70%);
}
.pc2 .pc2-hero-img { position: relative; width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; }

/* --- 數據 --- */
.pc2 .pc2-stats { padding: 0 48px; border-bottom: 1px solid var(--pc2-line); }
.pc2 .pc2-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.pc2 .pc2-stat { padding: 36px 32px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.pc2 .pc2-stat + .pc2-stat { border-left: 1px solid var(--pc2-line); }
.pc2 .pc2-stat-label { font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.pc2 .pc2-stat-num { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 40px; line-height: 1; color: #fff; }
.pc2 .pc2-stat-num.is-gold { color: var(--pc2-gold); }

/* --- 關於 --- */
.pc2 .pc2-about { padding: 88px 48px; background: var(--pc2-bg2); border-bottom: 1px solid var(--pc2-line); }
.pc2 .pc2-about-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: center; }
.pc2 .pc2-logos { display: flex; align-items: center; gap: 28px; margin-bottom: 28px; }
.pc2 .pc2-logos img { height: 104px; width: auto; object-fit: contain; }
.pc2 .pc2-about-img { width: 100%; height: auto; border-radius: 10px; display: block; border: 1px solid rgba(255, 255, 255, .1); }

/* --- 服務 --- */
.pc2 .pc2-services { padding: 88px 48px 0; }
.pc2 .pc2-svc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 56px 0; border-top: 1px solid var(--pc2-line);
}
.pc2 .pc2-svc-text { display: flex; flex-direction: column; gap: 18px; }
.pc2 .pc2-svc-no { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 12px; letter-spacing: .18em; color: var(--pc2-faint); }
.pc2 .pc2-svc-img { width: 100%; height: 400px; object-fit: cover; border-radius: 14px; display: block; }
.pc2 .pc2-svc-img.is-tall { height: 460px; }
.pc2 .pc2-svc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc2 .pc2-svc-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pc2 .pc2-note { font-size: 12.5px; line-height: 1.9; color: rgba(255, 255, 255, .4); }
.pc2 .pc2-lead-gold { font-weight: 700; font-size: 16px; line-height: 1.75; color: var(--pc2-gold); margin: 0; }

/* --- 開團 --- */
.pc2 .pc2-groups { padding: 80px 48px; background: var(--pc2-bg2); border-top: 1px solid var(--pc2-line); border-bottom: 1px solid var(--pc2-line); }
.pc2 .pc2-sec-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
.pc2 .pc2-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* --- 開團卡片：全息 refractor 邊框 ---
   外層 .pc2-card 是 1px 的彩色漸層邊，内層 .pc2-card-in 是深色卡面。
   hover 時彩色漸層排移，像卡面斜射。
   HTML 結構：<a class="pc2-card"><div class="pc2-card-in">…</div></a> */
.pc2 .pc2-card {
  display: block; border: 0; border-radius: 0; padding: 1px; color: inherit;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  background-image: var(--pc2-holo);
  background-size: 200% 100%;
  background-position: 0 0;
  transition: background-position .9s cubic-bezier(.2, .7, .3, 1), filter .25s ease;
}
.pc2 .pc2-card:hover {
  color: inherit;
  background-position: 100% 0;
  filter: drop-shadow(0 12px 30px rgba(154, 184, 255, .35));
}
.pc2 .pc2-card-in {
  clip-path: polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px);
  background: #0e0e12; padding: 25px;
}

/* 開團卡上的鑑定廠商標籤 — 跟四家送鑑按鈕同一套暗金屬 + 左側色條。
   全息只出現在卡片邊框，標籤不跟著變彩色。
   HTML：<span class="pc2-tag is-psa">PSA</span> */
.pc2 .pc2-card .pc2-tag:not(.is-ghost) {
  font-family: "Space Grotesk", "Noto Sans TC", sans-serif;
  font-weight: 700; font-size: 11.5px; letter-spacing: .06em;
  color: #fff; padding: 8px 13px;
  border-left: 2px solid #e8534a;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  background-image: var(--pc2-sheen-dark),
    linear-gradient(135deg, #54403c 0%, #352624 36%, #1f1615 60%, #4d3a37 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 180% 0, 0 0;
  background-repeat: no-repeat;
}
.pc2 .pc2-card .pc2-tag.is-ghost {
  font-size: 11px; letter-spacing: .06em; padding: 8px 12px;
  border: 0; border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  background: linear-gradient(150deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
}
.pc2 .pc2-card .pc2-tag.is-bgs {
  border-left-color: #8f9cff;
  background-image: var(--pc2-sheen-dark),
    linear-gradient(135deg, #3f4658 0%, #262c3c 36%, #161a26 60%, #394054 100%);
}
.pc2 .pc2-card .pc2-tag.is-cgc {
  border-left-color: #7af0d0;
  background-image: var(--pc2-sheen-dark),
    linear-gradient(135deg, #38504b 0%, #223330 36%, #141d1b 60%, #334a45 100%);
}
.pc2 .pc2-card .pc2-tag.is-sgc {
  border-left-color: #ff9ad5;
  background-image: var(--pc2-sheen-dark),
    linear-gradient(135deg, #523c4a 0%, #33242e 36%, #1e151a 60%, #4c3744 100%);
}

@media (prefers-reduced-motion: reduce) {
  .pc2 .pc2-card { transition: filter .25s ease; }
  .pc2 .pc2-card:hover { background-position: 0 0; }
}
.pc2 .pc2-tags { display: flex; gap: 8px; margin-bottom: 14px; }
.pc2 .pc2-tag {
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 10.5px; letter-spacing: .14em;
  color: #1a1204; padding: 7px 11px; border-radius: 0;
  clip-path: var(--pc2-cut-sm);
  background: linear-gradient(135deg, #ffe89a, #f5c518 45%, #c99406);
}
.pc2 .pc2-tag.is-ghost {
  font-weight: 400; color: rgba(255, 255, 255, .55);
  background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
}
.pc2 .pc2-card-title { font-weight: 700; font-size: 17px; line-height: 1.5; color: #fff; margin-bottom: 18px; }
/* 卡底：截單日與單張價兩邊對齊，都是 19px 數字。
   截單用橘紅 #ff8f70（時間壓力），金額用金色。*/
.pc2 .pc2-card-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .07);
}
.pc2 .pc2-card-foot > div { display: flex; flex-direction: column; gap: 7px; }
.pc2 .pc2-card-foot > div + div { align-items: flex-end; }
.pc2 .pc2-foot-label {
  font-family: "Noto Sans TC", sans-serif; font-weight: 700; font-size: 11.5px; line-height: 1;
  letter-spacing: .16em; color: #ffb59e;
}
.pc2 .pc2-card-foot > div + div .pc2-foot-label { color: #ffdf8f; }
.pc2 .pc2-deadline {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 19px; line-height: 1;
  color: #ff8f70;
}
.pc2 .pc2-fee {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 19px; line-height: 1;
  color: var(--pc2-gold);
}
.pc2 .pc2-empty { text-align: center; padding: 48px; color: var(--pc2-faint); border: 1px dashed rgba(255, 255, 255, .12); border-radius: 12px; }

/* --- 合作夥伴 / 社群 --- */
.pc2 .pc2-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pc2 .pc2-partner {
  height: 112px; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--pc2-line); border-radius: 10px;
  transition: background .15s, border-color .15s;
}
.pc2 .pc2-partner:hover { background: rgba(255, 255, 255, .09); border-color: rgba(245, 197, 24, .35); }
.pc2 .pc2-partner img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* --- 社群卡：自己跑的環繞光 ---
   結構：<a class="pc2-social"><span class="pc2-beam"></span><div class="pc2-social-in">…</div></a>
   .pc2-beam 是一顆旋轉的 conic-gradient，被外層 overflow:hidden 裁成邊框上的跑马光。
   不需要 hover，載入就自己跑；各卡用負的 animation-delay 錯開。*/
.pc2 .pc2-social {
  position: relative; display: block; overflow: hidden;
  border: 0; border-radius: 12px; padding: 1px;
  background: rgba(255, 255, 255, .09); color: #fff;
}
.pc2 .pc2-social:hover { color: #fff; }
.pc2 .pc2-beam {
  position: absolute; inset: -70%;
  background: conic-gradient(from 0deg,
    transparent 0 74%, rgba(245, 197, 24, .35) 82%, #f5c518 90%, #fff6d6 93%, transparent 97%);
  animation: pc2beam 4.6s linear infinite;
}
.pc2 .pc2-social:nth-child(2) .pc2-beam { animation-delay: -.92s; }
.pc2 .pc2-social:nth-child(3) .pc2-beam { animation-delay: -1.84s; }
.pc2 .pc2-social:nth-child(4) .pc2-beam { animation-delay: -2.76s; }
.pc2 .pc2-social:nth-child(5) .pc2-beam { animation-delay: -3.68s; }
.pc2 .pc2-social-in {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 23px; border-radius: 11px; background: #0c0c10;
}
.pc2 .pc2-social-in i { font-size: 22px; color: var(--pc2-gold); }
.pc2 .pc2-social-in span { font-weight: 700; font-size: 16px; color: #fff; }

@keyframes pc2beam { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pc2 .pc2-beam { animation: none; background: rgba(245, 197, 24, .28); }
}

/* --- 聯絡 --- */
.pc2 .pc2-contact { padding: 64px 48px; background: var(--pc2-bg2); border-top: 1px solid var(--pc2-line); }
.pc2 .pc2-contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; }
.pc2 .pc2-contact-name { font-weight: 900; font-size: 26px; color: #fff; }
.pc2 .pc2-contact-addr { font-size: 13.5px; line-height: 1.9; color: rgba(255, 255, 255, .5); }

@media (max-width: 1200px) {
  .pc2 .pc2-grid5 { grid-template-columns: repeat(3, 1fr); }
  .pc2 .pc2-cards { grid-template-columns: repeat(2, 1fr); }
  .pc2 .pc2-hero { padding: 72px 32px 64px; }
  .pc2 .pc2-hero-grid { gap: 40px; }
  .pc2 .pc2-hero-title { font-size: 48px; }
  .pc2 .pc2-svc { gap: 36px; }
  .pc2 .pc2-svc-img { height: 340px; }
  .pc2 .pc2-svc-img.is-tall { height: 380px; }
}
/* 平板（直式 iPad 等 768–992px）：單欄但保留較大留白與字級；Hero CTA 允許換行 */
@media (max-width: 992px) {
  .pc2 .pc2-grid5 { grid-template-columns: repeat(3, 1fr); }
  .pc2 .pc2-cards { grid-template-columns: repeat(2, 1fr); }
  .pc2 .pc2-hero-cta { flex-wrap: wrap; }
  .pc2 .pc2-hero-cta .pc2-btn { flex: 0 1 auto; }
  .pc2 .pc2-hero-media, .pc2 .pc2-hero-img { max-width: 640px; margin-left: auto; margin-right: auto; }
  .pc2 .pc2-svc-img { max-height: 320px; }
  .pc2 .pc2-sec-head { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 992px) {
  .pc2 .pc2-hero { padding: 56px 24px; }
  .pc2 .pc2-hero-grid, .pc2 .pc2-about-grid, .pc2 .pc2-svc { grid-template-columns: 1fr; gap: 32px; }
  .pc2 .pc2-hero-title { font-size: 40px; }
  .pc2 .pc2-stats, .pc2 .pc2-about, .pc2 .pc2-services, .pc2 .pc2-groups, .pc2 .pc2-contact { padding-left: 24px; padding-right: 24px; }
  .pc2 .pc2-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pc2 .pc2-stat:nth-child(odd) { border-left: none; }
  .pc2 .pc2-stat:nth-child(n+3) { border-top: 1px solid var(--pc2-line); }
  /* 手機時圖片一律排在文字之前 */
  .pc2 .pc2-svc-img { order: -1; height: 260px; }
  .pc2 .pc2-svc-img.is-tall { height: 320px; }
  .pc2 .pc2-logos img { height: 72px; }
  .pc2 .pc2-logos { gap: 16px; }
}
@media (max-width: 768px) {
  .pc2 .pc2-grid5 { grid-template-columns: repeat(2, 1fr); }
  .pc2 .pc2-cards { grid-template-columns: 1fr; }
  .pc2 .pc2-hero-title { font-size: 34px; }
  .pc2 .pc2-hero-cta .pc2-btn { flex: 1 1 100%; justify-content: center; }
  .pc2 .pc2-stats-grid { grid-template-columns: 1fr; }
  .pc2 .pc2-stat { border-left: none; border-top: 1px solid var(--pc2-line); }
  .pc2 .pc2-svc-img { height: 220px; max-height: none; }
  .pc2 .pc2-svc-img.is-tall { height: 260px; }
  .pc2 .pc2-h2 { font-size: 26px; }
  .pc2 .pc2-h3 { font-size: 22px; }
}