/* ============================================================
   廣告落地頁 - 樣式表（自包含 html-css-js-img 項目）
   ------------------------------------------------------------
   結構：
     01 變量與基礎      02 頂部提示條    03 頭部
     04 CTA 按鈕        05 首屏          06 中獎跑馬燈
     07 倒計時          08 數據          09 賽事圖標跑馬燈
     10 福利卡片        11 活動畫廊      12 步驟
     13 FAQ             14 結尾行動區    15 頁腳
     16 懸浮按鈕        17 即時提示      18 彈窗
     19 入場動效        20 響應式
   ============================================================ */

/* ---------- 01 變量與基礎 ---------- */
:root {
  --brand-yellow: #ffe418;
  --brand-yellow-deep: #f5c800;
  --brand-mint: #28ffbb;
  --bg: #0c1712;
  --bg-2: #101f18;
  --card: #16261e;
  --card-2: #1b2b23;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f2f5f3;
  --text-dim: #9fb0a7;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --font: "Inter", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }
button { font-family: inherit; }
em { font-style: normal; }

/* ---------- 02 頂部提示條 ---------- */
.notice-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 7px 16px;
  font-size: 12px;
  color: var(--text-dim);
  background: #08120d;
  border-bottom: 1px solid var(--line);
}
.notice-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-dim);
  opacity: 0.6;
}

/* ---------- 03 頭部 ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 24px;
}
.brand { display: inline-flex; }
.brand img { height: 28px; width: auto; }

.header-nav { display: flex; gap: 26px; }
.header-nav-link {
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s ease;
}
.header-nav-link:hover { color: var(--brand-yellow); }

.login-link {
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.login-link:hover {
  color: var(--brand-yellow);
  border-bottom-color: var(--brand-yellow);
}

/* ---------- 04 CTA 按鈕 ---------- */
.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 46px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #0b3d2c;
  background: linear-gradient(180deg, var(--brand-yellow) 0%, var(--brand-yellow-deep) 100%);
  border: 2px solid #fff3a8;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(255, 228, 24, 0.28), 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.cta-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 44px rgba(255, 228, 24, 0.45), 0 4px 14px rgba(0, 0, 0, 0.4);
}
.cta-btn:active { transform: translateY(0) scale(0.98); }

.cta-btn::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -30%;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-18deg);
  animation: cta-shine 3.2s ease-in-out infinite;
}
@keyframes cta-shine {
  0%, 55% { left: -40%; }
  85%, 100% { left: 130%; }
}

.cta-btn-lg { padding: 20px 64px; font-size: 22px; }
.cta-btn-block { width: 100%; padding: 15px 24px; font-size: 17px; }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  padding: 17px 30px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.ghost-btn:hover {
  color: var(--brand-yellow);
  border-color: rgba(255, 228, 24, 0.6);
  background: rgba(255, 228, 24, 0.06);
}

/* ---------- 05 首屏 ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 24px 64px;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -40px 0 auto 0;
  height: 480px;
  background:
    radial-gradient(560px 320px at 18% 28%, rgba(255, 228, 24, 0.10), transparent 70%),
    radial-gradient(520px 340px at 82% 12%, rgba(40, 255, 187, 0.08), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--brand-mint);
  background: rgba(40, 255, 187, 0.1);
  border: 1px solid rgba(40, 255, 187, 0.35);
  border-radius: 999px;
}

.hero-title {
  margin-top: 20px;
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 2px;
}
.hero-title em {
  color: var(--brand-yellow);
  text-shadow: 0 0 36px rgba(255, 228, 24, 0.35);
}

.hero-sub {
  margin: 14px 0 30px;
  font-size: 18px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--text-dim);
}
.trust-row li { display: flex; align-items: center; gap: 8px; }
.trust-row li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-mint);
  box-shadow: 0 0 10px rgba(40, 255, 187, 0.7);
}

/* 首屏右側視覺：主卡 + 背卡 + 浮動小卡 */
.hero-visual {
  position: relative;
  padding: 26px 12px;
}
.hero-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.hero-card img { width: 100%; }
.hero-card-main {
  position: relative;
  z-index: 2;
  transform: rotate(2deg);
  transition: transform 0.3s ease;
}
.hero-card-back {
  position: absolute;
  right: 26px;
  bottom: 6px;
  left: 52px;
  z-index: 1;
  opacity: 0.5;
  transform: rotate(-3.5deg);
}
.hero-visual:hover .hero-card-main { transform: rotate(0.5deg) translateY(-5px); }

.chip {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(22, 38, 30, 0.92);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.chip b { font-size: 18px; color: var(--brand-yellow); letter-spacing: 0.5px; }
.chip-a { top: 4px; left: -18px; animation: chip-float 4.5s ease-in-out infinite; }
.chip-b { bottom: 22px; right: -10px; animation: chip-float 4.5s ease-in-out 1.4s infinite; }
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---------- 06 中獎跑馬燈 ---------- */
.winner-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
  background: rgba(40, 255, 187, 0.05);
  border: 1px solid rgba(40, 255, 187, 0.16);
  border-radius: var(--radius);
}
.winner-strip-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--brand-mint);
}
.winner-strip-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-mint);
  box-shadow: 0 0 10px rgba(40, 255, 187, 0.9);
  animation: winner-blink 1.6s ease-in-out infinite;
}
@keyframes winner-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.winner-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.winner-track {
  display: inline-flex;
  gap: 44px;
  white-space: nowrap;
  animation: winner-scroll 26s linear infinite;
}
.winner-item { font-size: 13px; color: var(--text-dim); }
.winner-item b { color: var(--brand-yellow); font-weight: 700; }
@keyframes winner-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- 07 倒計時 ---------- */
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1120px;
  margin: 40px auto 0;
  padding: 20px 24px;
  background: linear-gradient(90deg, rgba(255, 228, 24, 0.07), rgba(40, 255, 187, 0.06));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.countdown-label { font-size: 15px; font-weight: 700; letter-spacing: 2px; }
.countdown-cells { display: flex; align-items: center; gap: 10px; }
.cd-cell {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 74px;
  justify-content: center;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cd-cell b {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--brand-yellow);
  letter-spacing: 1px;
}
.cd-cell span { font-size: 12px; color: var(--text-dim); }
.cd-sep { font-size: 22px; font-weight: 700; color: var(--text-dim); }

/* ---------- 08 數據 ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 40px auto 0;
  padding: 0 24px;
}.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stat b {
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--brand-yellow);
  font-variant-numeric: tabular-nums;
}
.stat > span {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 2px;
}

/* 通用段落容器 */
.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 84px 24px 0;
}
.section-alt {
  max-width: none;
  margin-top: 84px;
  padding: 72px 24px 84px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-alt .section-title,
.section-alt .section-sub,
.section-alt .gallery {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.section-title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
}
.section-sub {
  margin: 10px 0 40px;
  font-size: 15px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 1px;
}

/* ---------- 09 賽事圖標跑馬燈 ---------- */
.sport-marquee {
  overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sport-marquee + .sport-marquee { margin-top: 6px; }
.sport-track {
  display: inline-flex;
  gap: 14px;
  white-space: nowrap;
  animation: sport-scroll 44s linear infinite;
}
.sport-marquee-reverse .sport-track { animation-direction: reverse; }
.sport-marquee:hover .sport-track { animation-play-state: paused; }
@keyframes sport-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.sport-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 118px;
  padding: 16px 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.sport-tile:hover {
  border-color: rgba(255, 228, 24, 0.45);
  transform: translateY(-3px);
}
.sport-tile img { height: 50px; width: auto; }
.sport-tile span { font-size: 13px; color: var(--text-dim); letter-spacing: 1px; }

/* ---------- 10 福利卡片 ---------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.benefit-card {
  padding: 28px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.benefit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 228, 24, 0.4);
}
.benefit-card-hl {
  background: linear-gradient(160deg, rgba(255, 228, 24, 0.14), var(--card) 60%);
  border-color: rgba(255, 228, 24, 0.45);
}
.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  color: var(--brand-yellow);
  background: rgba(255, 228, 24, 0.1);
  border: 1px solid rgba(255, 228, 24, 0.3);
  border-radius: 12px;
}
.benefit-icon svg { width: 24px; height: 24px; }
.benefit-card h3 { font-size: 17px; font-weight: 700; letter-spacing: 0.5px; }
.benefit-card p { margin-top: 8px; font-size: 13px; color: var(--text-dim); }

/* ---------- 11 活動畫廊 ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.gallery-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gallery-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 228, 24, 0.4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.gallery-card img {
  width: 100%;
  transition: transform 0.35s ease;
}
.gallery-card:hover img { transform: scale(1.03); }
.gallery-card figcaption {
  padding: 12px 18px 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  border-top: 1px solid var(--line);
}

/* ---------- 12 步驟 ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  position: relative;
  padding: 28px 22px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* 步驟之間的虛線連接（桌面端） */
.steps li + li::before {
  content: "";
  position: absolute;
  top: 47px;
  left: -18px;
  width: 18px;
  border-top: 2px dashed rgba(255, 228, 24, 0.4);
}
.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 900;
  color: #0b3d2c;
  background: var(--brand-yellow);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(255, 228, 24, 0.3);
}
.steps h3 { font-size: 17px; font-weight: 700; }
.steps p { margin-top: 6px; font-size: 13px; color: var(--text-dim); }

/* ---------- 13 FAQ ---------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details + details { margin-top: 12px; }
.faq summary {
  position: relative;
  padding: 18px 52px 18px 22px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--brand-yellow);
  border-bottom: 2px solid var(--brand-yellow);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p {
  padding: 0 22px 20px;
  font-size: 14px;
  color: var(--text-dim);
}

/* ---------- 14 結尾行動區 ---------- */
.final-cta {
  position: relative;
  max-width: 1120px;
  margin: 84px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.final-cta-bg {
  position: absolute;
  inset: 0;
  opacity: 0.16;
}
.final-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.final-cta-inner {
  position: relative;
  padding: 64px 24px;
  text-align: center;
  background: radial-gradient(480px 240px at 50% 0%, rgba(255, 228, 24, 0.12), transparent 70%);
}
.final-cta h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
  letter-spacing: 2px;
}
.final-cta h2 em { color: var(--brand-yellow); }
.final-cta p { margin: 12px 0 32px; color: var(--text-dim); letter-spacing: 1px; }

/* ---------- 15 頁腳 ---------- */
.site-footer {
  max-width: 1120px;
  margin: 72px auto 120px;
  padding: 32px 24px 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer-logo { margin: 0 auto 18px; }
.footer-partner { margin-bottom: 20px; }
.footer-partner img { margin: 0 auto; opacity: 0.85; }
.site-footer p { font-size: 12px; color: var(--text-dim); }
.footer-fine { margin-top: 6px; opacity: 0.7; }

/* ---------- 16 懸浮按鈕 ---------- */
.float-cta {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 58px;
  color: #0b3d2c;
  background: linear-gradient(180deg, var(--brand-yellow) 0%, var(--brand-yellow-deep) 100%);
  border: 2px solid #fff3a8;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(255, 228, 24, 0.4), 0 6px 18px rgba(0, 0, 0, 0.5);
  animation: float-pulse 2.4s ease-in-out infinite;
  transition: transform 0.15s ease;
}
.float-cta:hover { transform: translateX(-50%) scale(1.03); }
.float-cta:active { transform: translateX(-50%) scale(0.97); }
@keyframes float-pulse {
  0%, 100% { box-shadow: 0 14px 40px rgba(255, 228, 24, 0.35), 0 6px 18px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 18px 64px rgba(255, 228, 24, 0.65), 0 6px 18px rgba(0, 0, 0, 0.5); }
}
.float-cta-shine {
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -30%;
  width: 32%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-18deg);
  animation: cta-shine 3.2s ease-in-out infinite;
}
.float-cta-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
}
.float-cta-text small { font-size: 14px; font-weight: 700; letter-spacing: 5px; opacity: 0.8; }
.float-cta-text strong { font-size: 28px; font-weight: 900; letter-spacing: 2px; }

/* ---------- 17 即時提示 ---------- */
.toast-holder {
  position: fixed;
  left: 20px;
  bottom: 96px;
  z-index: 85;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text);
  background: rgba(22, 38, 30, 0.96);
  border: 1px solid rgba(40, 255, 187, 0.3);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  animation: toast-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast.toast-out { animation: toast-out 0.3s ease forwards; }
.toast-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #0b3d2c;
  background: var(--brand-mint);
  border-radius: 50%;
}
.toast-icon svg { width: 16px; height: 16px; }
.toast strong { color: var(--brand-yellow); }
.toast-time { display: block; font-size: 11px; color: var(--text-dim); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(-16px); }
}

/* ---------- 18 彈窗 ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 10, 7, 0.78);
  backdrop-filter: blur(4px);
  animation: overlay-in 0.2s ease;
}
.modal-overlay[hidden] { display: none; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 36px 32px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: card-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  text-align: center;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.modal-close:hover { color: #fff; border-color: var(--brand-yellow); }

.modal-body h2 { font-size: 26px; font-weight: 900; letter-spacing: 1px; }
.modal-body h2 em { color: var(--brand-yellow); }
.modal-sub { margin: 10px 0 24px; font-size: 13px; color: var(--text-dim); }

.phone-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 4px 18px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.15s ease;
}
.phone-field:focus-within { border-color: var(--brand-yellow); }
.phone-prefix {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dim);
  padding-right: 10px;
  border-right: 1px solid var(--line);
}
.phone-field input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
  letter-spacing: 2px;
}
.phone-field input::placeholder { color: var(--text-dim); letter-spacing: 1px; }

.field-error {
  margin: 10px 0 0;
  font-size: 12px;
  color: #ff7a7a;
}
.claim-form .cta-btn { margin-top: 18px; }
.field-error + .cta-btn { margin-top: 12px; }

.modal-terms {
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.8;
}
.modal-card.shake { animation: shake 0.35s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  60% { transform: translateX(6px); }
  85% { transform: translateX(-3px); }
}

.modal-success .success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  color: #0b3d2c;
  background: var(--brand-mint);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(40, 255, 187, 0.45);
}
.modal-success .success-icon svg { width: 32px; height: 32px; }
.modal-success h3 { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.modal-success p { margin: 10px 0 24px; font-size: 14px; color: var(--text-dim); }

/* ---------- 19 入場動效（JS 添加 .reveal，無 JS 時內容照常顯示） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

.hero-main > * {
  animation: rise-in 0.6s ease backwards;
}
.hero-main > *:nth-child(2) { animation-delay: 0.08s; }
.hero-main > *:nth-child(3) { animation-delay: 0.16s; }
.hero-main > *:nth-child(4) { animation-delay: 0.24s; }
.hero-main > *:nth-child(5) { animation-delay: 0.32s; }
@keyframes rise-in {
  from { transform: translateY(18px); }
  to { transform: none; }
}

/* ---------- 20 響應式 ---------- */
@media (max-width: 900px) {
  .header-nav { display: none; }

  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 36px;
  }
  .hero-visual { max-width: 460px; margin: 0 auto; width: 100%; }
  .chip-a { left: -6px; }
  .chip-b { right: -2px; }

  .winner-strip { flex-direction: column; align-items: flex-start; gap: 8px; }

  .benefits { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps li + li::before { display: none; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding: 18px 16px; }
  .site-footer { margin-bottom: 150px; }

  .toast-holder { left: 12px; right: 12px; bottom: 104px; }

  /* 懸浮按鈕改為底部通欄 */
  .float-cta {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    border-width: 2px 0 0;
  }
  .float-cta:hover, .float-cta:active { transform: none; }
  .float-cta-text { flex-direction: row; align-items: baseline; gap: 10px; }
  .float-cta-text small { font-size: 13px; letter-spacing: 2px; }
  .float-cta-text strong { font-size: 21px; }
}

@media (max-width: 560px) {
  .benefits { grid-template-columns: 1fr; }
  .hero-title { letter-spacing: 1px; }
  .cta-btn { padding: 15px 32px; font-size: 17px; }
  .cta-btn-lg { padding: 16px 36px; font-size: 18px; }
  .ghost-btn { padding: 15px 24px; }
  .countdown { gap: 12px; }
  .cd-cell { min-width: 62px; }
  .sport-tile { width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-btn::after,
  .float-cta-shine,
  .float-cta,
  .chip-a, .chip-b,
  .winner-track,
  .sport-track,
  .hero-main > * { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}