/* ============ 河神娛樂城 LP styles ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg: #04111c;
  --bg2: #07223a;
  --ink: #e9f3ff;
  --ink-dim: #8fb0c9;
  --jade: #1abc9c;
  --jade-glow: #5fe3c9;
  --gold: #d4af37;
  --gold-soft: #ffd86b;
  --line: #06c755;
  --danger: #ff5d6c;
  --serif: 'Noto Serif TC','Cinzel',serif;
  --sans: 'Noto Sans TC',system-ui,-apple-system,sans-serif;
}
html,body{ background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body{
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(26,188,156,.18), transparent 60%),
    radial-gradient(900px 700px at -10% 20%, rgba(212,175,55,.12), transparent 65%),
    linear-gradient(180deg,#04111c 0%, #061a2c 40%, #04111c 100%);
  overflow-x:hidden;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
em{ font-style: normal; }

/* ============ 背景畫布與光暈 ============ */
#bgCanvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aurora-blob{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:.55; mix-blend-mode:screen;
  animation: drift 18s ease-in-out infinite alternate;
}
.aurora-blob.a1{ width:520px; height:520px; left:-120px; top:-120px;
  background: radial-gradient(circle, #1abc9c, transparent 70%); }
.aurora-blob.a2{ width:680px; height:680px; right:-180px; top:120px;
  background: radial-gradient(circle, #d4af37, transparent 70%); animation-delay:-6s; }
.aurora-blob.a3{ width:480px; height:480px; left:30%; bottom:-200px;
  background: radial-gradient(circle, #5fe3c9, transparent 70%); animation-delay:-12s; }
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.1); }
  100% { transform: translate(-30px,40px) scale(.95); }
}

/* 滑鼠水紋 */
#cursorRipple{
  position:fixed; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(95,227,201,.6);
  box-shadow: 0 0 24px rgba(95,227,201,.4) inset, 0 0 24px rgba(95,227,201,.4);
  transform: translate(-50%,-50%); pointer-events:none; z-index:9000;
  transition: transform .12s ease;
  display:none;
}
@media (hover:hover){ #cursorRipple{ display:block; } }

/* ============ 頂端廣播帶 ============ */
.top-banner{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:40px; overflow:hidden;
  background: linear-gradient(90deg, #b0851a 0%, #ffd86b 25%, #ffe9a0 50%, #ffd86b 75%, #b0851a 100%);
  background-size: 200% 100%;
  animation: banShimmer 8s linear infinite;
  border-bottom:1px solid rgba(0,0,0,.2);
  box-shadow: 0 4px 16px rgba(212,175,55,.4);
}
@keyframes banShimmer { from{background-position:0 0} to{background-position:200% 0} }
.top-banner-track{
  display:flex; align-items:center; gap:24px;
  height:100%; width:max-content;
  white-space:nowrap;
  animation: tbScroll 28s linear infinite;
  padding-left: 24px;
}
@keyframes tbScroll {
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
.top-banner strong{ color:#1a1004; font-weight:900; font-size:14px; letter-spacing:.05em; }
.top-banner em{ color:#1a1004; opacity:.5; font-style:normal; font-size:14px; }
.top-banner .tb-pill{
  display:inline-flex; align-items:center;
  padding:5px 12px; border-radius:999px;
  background:#04111c; color:#ffd86b;
  font-size:12px; font-weight:700; letter-spacing:.1em;
  box-shadow: 0 0 0 1.5px rgba(255,216,107,.7);
}

/* 廣播帶下面的內容整體下推 40px */
body{ padding-top:40px; }

@media (max-width: 540px){
  .top-banner{ height:36px; }
  body{ padding-top:36px; }
  .top-banner strong{ font-size:13px; }
}

/* hero badge HOT 樣式（覆寫） */
.hero-badge.hot{
  background: linear-gradient(135deg, rgba(255,93,108,.18), rgba(212,175,55,.18));
  border-color: rgba(255,216,107,.55);
  color: #ffd86b;
  box-shadow: 0 0 30px rgba(212,175,55,.25);
}
.hero-badge.hot .dot{ background:#ff5d6c; box-shadow: 0 0 12px #ff5d6c; }

/* ============ 導覽 ============ */
.nav{
  position:fixed; top:40px; left:0; right:0; z-index:50;
  backdrop-filter: blur(16px) saturate(140%);
  background: linear-gradient(180deg, rgba(4,17,28,.7), rgba(4,17,28,.3));
  border-bottom:1px solid rgba(95,227,201,.08);
}
.nav-inner{
  max-width:1240px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.brand-mark{
  display:grid; place-items:center;
  width:54px; height:46px; border-radius:12px;
  background: linear-gradient(135deg,#1abc9c,#0a4a5c);
  font-family: 'Cinzel', var(--serif); font-weight:900; font-size:18px;
  letter-spacing:.05em;
  color:#04111c; text-shadow: 0 1px 0 #ffd86b;
  box-shadow: 0 0 0 1px rgba(255,216,107,.5), 0 8px 24px rgba(26,188,156,.35);
}
.brand-mark.sm{ width:44px; height:36px; font-size:14px; border-radius:10px; }
.brand-text strong{ display:block; font-family: var(--serif); font-weight:900; letter-spacing:.04em; font-size:18px; }
.brand-text small{ display:block; color:var(--ink-dim); font-size:11px; letter-spacing:.3em; }
.nav-links{ display:flex; gap:28px; margin-left:auto; }
.nav-links a{ color:var(--ink-dim); font-size:14px; transition:color .2s; }
.nav-links a:hover{ color:var(--jade-glow); }
.nav-cta{
  padding:10px 20px; border-radius:999px; font-weight:700; font-size:14px;
  background: linear-gradient(135deg, var(--jade), var(--jade-glow));
  color:#04111c; box-shadow: 0 8px 24px rgba(26,188,156,.35);
  transition: transform .2s, box-shadow .2s;
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 12px 32px rgba(26,188,156,.55); }
@media (max-width: 1024px){ .nav-links{ display:none; } }

/* ============ HERO ============ */
.hero{
  position:relative; z-index:1;
  min-height:100vh; padding: 140px 24px 60px;
  display:flex; align-items:center; justify-content:center;
  max-width:1240px; margin:0 auto;
  gap:40px;
}
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(800px 500px at 30% 50%, rgba(26,188,156,.12), transparent 60%),
    radial-gradient(700px 600px at 80% 30%, rgba(212,175,55,.10), transparent 60%);
}
.hero-deity{
  position:absolute; right:-40px; top:60px; width:560px; max-width:50%;
  pointer-events:none; opacity:.85;
  animation: floatY 6s ease-in-out infinite alternate;
}
.deity-svg{ width:100%; height:auto; filter: drop-shadow(0 0 60px rgba(95,227,201,.3)); }
.silhouette{ animation: pulseS 4s ease-in-out infinite alternate; transform-origin:center; }
@keyframes pulseS { 0%{ filter: drop-shadow(0 0 0 rgba(95,227,201,.3)); } 100%{ filter: drop-shadow(0 0 30px rgba(95,227,201,.7)); } }
.coin{ fill: var(--gold-soft); stroke: var(--gold); stroke-width:1.5; opacity:.85;
  animation: coinFloat 5s ease-in-out infinite alternate; transform-origin:center; }
.coins circle:nth-child(1){ animation-delay:-.5s; }
.coins circle:nth-child(2){ animation-delay:-1.2s; }
.coins circle:nth-child(3){ animation-delay:-1.9s; }
.coins circle:nth-child(4){ animation-delay:-2.6s; }
.coins circle:nth-child(5){ animation-delay:-3.3s; }
.coins circle:nth-child(6){ animation-delay:-4s; }
@keyframes coinFloat {
  0%{ transform: translateY(0) rotate(0); opacity:.7; }
  100%{ transform: translateY(-30px) rotate(180deg); opacity:1; }
}
@keyframes floatY {
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-18px); }
}

.hero-content{
  position:relative; z-index:2; flex:1; max-width:680px;
}
.hero-slogan{
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
  font-family:'Cinzel', var(--serif); font-weight:700;
  letter-spacing:.18em;
  font-size: clamp(13px, 1.5vw, 16px);
  text-transform: uppercase;
  animation: fadeUp .8s 0s backwards;
}
.hero-slogan .hs-line{
  flex:1; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,216,107,.6), transparent);
  max-width:80px;
}
.hero-slogan .hs-text{
  color:#7df0d4;
  text-shadow: 0 0 12px rgba(125,240,212,.4);
}
.hero-slogan .hs-dot{ color:rgba(255,216,107,.6); }
.hero-slogan .hs-bold{
  font-family: var(--serif);
  font-weight:900;
  font-size: 1.4em;
  letter-spacing:.1em;
  background: linear-gradient(180deg, #ffd86b 0%, #d4af37 60%, #ff5d6c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 30px rgba(255,93,108,.4);
  animation: hopeGlow 2.4s ease-in-out infinite alternate;
}
@keyframes hopeGlow {
  0%   { filter: drop-shadow(0 0 6px rgba(255,216,107,.4)); }
  100% { filter: drop-shadow(0 0 18px rgba(255,93,108,.7)); }
}

.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background: rgba(26,188,156,.12);
  border:1px solid rgba(95,227,201,.35);
  color: var(--jade-glow); font-size:13px; font-weight:600;
  margin-bottom:22px;
  animation: fadeUp .8s .1s backwards;
}
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--jade-glow);
  box-shadow: 0 0 12px var(--jade-glow); animation: blink 1.6s infinite; }
@keyframes blink { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.hero-title{
  font-family: var(--serif); font-weight:900; line-height:1.05;
  letter-spacing:.02em;
  font-size: clamp(36px, 5.6vw, 76px);
}
.hero-title .line1, .hero-title .line2, .hero-title .line3{
  display:block; opacity:0; transform: translateY(30px);
  animation: titleIn .9s forwards cubic-bezier(.2,.7,.2,1);
}
.hero-title .line1{ animation-delay:.2s; color:#fff;
  text-shadow: 0 0 40px rgba(95,227,201,.4); }
.hero-title .line2{ animation-delay:.4s; }
.hero-title .line2 em{
  font-family: 'Cinzel', var(--serif);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 60%, #8a6a14 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 40px rgba(212,175,55,.4);
  font-size:1.35em; padding:0 .05em;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.3));
}
.hero-title .line3{ animation-delay:.6s; font-size:.4em; font-weight:500;
  color: var(--ink-dim); letter-spacing:.2em; margin-top:.6em; font-family: var(--sans); }
@keyframes titleIn { to{ opacity:1; transform:translateY(0); } }

.hero-sub{
  margin: 28px 0 36px; max-width:560px;
  color: var(--ink-dim); font-size:17px; line-height:1.7;
  animation: fadeUp .8s .8s backwards;
}

.hero-cta{ display:flex; gap:14px; flex-wrap:wrap;
  animation: fadeUp .8s 1s backwards; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border-radius:14px; font-weight:700; font-size:16px;
  border:none; cursor:pointer; position:relative; overflow:hidden;
  transition: transform .2s, box-shadow .2s, background .2s;
  font-family: var(--sans);
}
.btn-primary{
  background: linear-gradient(135deg, #ffd86b 0%, var(--gold) 60%, #b78a1f 100%);
  color:#1a1004;
  box-shadow:
    0 0 0 1px rgba(255,216,107,.5),
    0 12px 30px rgba(212,175,55,.4),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-100%); transition: transform .8s;
}
.btn-primary:hover::before{ transform: translateX(100%); }
.btn-primary:hover{ transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,216,107,.6), 0 18px 40px rgba(212,175,55,.55), inset 0 1px 0 rgba(255,255,255,.4); }

.btn-ghost{
  background: rgba(95,227,201,.08);
  color: var(--jade-glow);
  border:1px solid rgba(95,227,201,.4);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover{ background: rgba(95,227,201,.18); transform: translateY(-2px); }
.btn-line{
  background: linear-gradient(135deg, #06c755, #04a043);
  color:#fff; box-shadow: 0 12px 30px rgba(6,199,85,.45);
}
.btn-line:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(6,199,85,.6); }

.big-btn{ padding:20px 36px; font-size:18px; }
.full{ width:100%; }

.hero-stats{
  display:flex; gap:32px; margin-top:48px; list-style:none; flex-wrap:wrap;
  animation: fadeUp .8s 1.2s backwards;
}
.hero-stats li{ display:flex; flex-direction:column; }
.hero-stats strong{
  font-family: 'Cinzel', var(--serif); font-size:34px; font-weight:800;
  background: linear-gradient(180deg, #fff, var(--jade-glow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-stats span{ color: var(--ink-dim); font-size:13px; letter-spacing:.1em; }

@keyframes fadeUp { from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }

.scroll-cue{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color: var(--ink-dim); font-size:11px; letter-spacing:.3em;
}
.scroll-cue span{
  width:1px; height:38px; background: linear-gradient(180deg, transparent, var(--jade-glow));
  animation: cueFall 1.8s ease-in-out infinite;
}
@keyframes cueFall { 0%{ transform: scaleY(0); transform-origin: top; } 100%{ transform: scaleY(1); transform-origin: top; } }

@media (max-width: 1024px){
  .hero{ padding: 110px 20px 40px; }
  .hero-deity{ position:relative; right:auto; top:auto; width:80%; max-width:none; margin: 0 auto 20px; opacity:.5; }
}

/* ============ Section 通用 ============ */
section{ position:relative; z-index:1; }
.section-title{
  font-family: var(--serif); font-weight:900; text-align:center;
  font-size: clamp(28px, 3.6vw, 48px);
  margin-bottom:48px;
}
.section-title em{
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.reveal{ opacity:0; transform: translateY(40px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ============ Features ============ */
.features{ max-width:1240px; margin:0 auto; padding:120px 24px; }
.features-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.features-grid.four{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px){ .features-grid.four{ grid-template-columns: repeat(2, 1fr); } }
.feature{
  position:relative; padding:36px 28px;
  background: linear-gradient(180deg, rgba(95,227,201,.06), rgba(95,227,201,.02));
  border:1px solid rgba(95,227,201,.15); border-radius:20px;
  overflow:hidden; transition: transform .4s, border-color .4s;
}
.feature:hover{ transform: translateY(-6px); border-color: rgba(95,227,201,.4); }
.feature.highlight{
  border-color: rgba(255,216,107,.55);
  background: linear-gradient(180deg, rgba(212,175,55,.14), rgba(212,175,55,.04));
  box-shadow: 0 0 0 1px rgba(255,216,107,.3), 0 20px 50px rgba(212,175,55,.18);
  position:relative;
}
.feature.highlight::after{
  content:'核心保障'; position:absolute; top:14px; right:14px;
  padding:4px 10px; border-radius:999px;
  background: linear-gradient(135deg, #ffd86b, #d4af37);
  color:#1a1004; font-size:10px; font-weight:800; letter-spacing:.15em;
  box-shadow: 0 4px 12px rgba(212,175,55,.5);
}
.feature.highlight strong{ color: var(--gold-soft); }
.feature .f-icon{ font-size:42px; margin-bottom:18px;
  filter: drop-shadow(0 0 20px rgba(95,227,201,.5)); }
.feature h3{ font-family: var(--serif); font-size:22px; font-weight:700; margin-bottom:12px; }
.feature p{ color: var(--ink-dim); font-size:15px; line-height:1.7; }
.feature .f-glow{
  position:absolute; right:-30%; bottom:-30%; width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,.25), transparent 70%);
  pointer-events:none; transition: transform .8s;
}
.feature:hover .f-glow{ transform: scale(1.6); }
@media (max-width: 1024px){ .features-grid{ grid-template-columns: 1fr; } .features{ padding:80px 20px; } }

/* ============ 轉線專案 ============ */
.switchline{ padding: 30px 24px 80px; max-width:1100px; margin:0 auto; }
.sw-card{
  position:relative; padding:40px 36px;
  border-radius:24px; overflow:hidden;
  background:
    radial-gradient(800px 400px at 80% 120%, rgba(255,93,108,.18), transparent 60%),
    linear-gradient(180deg, rgba(40,12,18,.85), rgba(20,6,10,.95));
  border:1px solid rgba(255,93,108,.35);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,216,107,.2) inset;
}
.sw-flag{
  display:inline-block; padding:6px 16px; border-radius:999px;
  background: linear-gradient(135deg,#ff5d6c,#d4334b);
  color:#fff; font-size:12px; font-weight:800; letter-spacing:.15em;
  margin-bottom:18px;
  box-shadow: 0 8px 22px rgba(255,93,108,.5);
  animation: tagPulse 1.6s ease-in-out infinite;
}
.sw-title{ font-family:var(--serif); font-size: clamp(24px,3.5vw,38px); font-weight:900; line-height:1.25; }
.sw-title em{
  font-style:normal;
  background: linear-gradient(180deg,#ffd86b,#d4af37);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* 128.8% 主視覺爆點 */
.sw-hero{
  text-align:center; margin: 28px auto 24px;
  padding: 28px 24px;
  border-radius:20px;
  background:
    radial-gradient(500px 200px at 50% 0%, rgba(255,216,107,.25), transparent 60%),
    linear-gradient(180deg, rgba(212,175,55,.08), rgba(255,93,108,.04));
  border:2px solid transparent;
  background-clip: padding-box;
  position:relative;
}
.sw-hero::before{
  content:''; position:absolute; inset:-2px; border-radius:20px; padding:2px;
  background: linear-gradient(135deg,#ffd86b,#ff5d6c,#ffd86b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
  animation: borderRotate 4s linear infinite;
}
.sw-hero-label{
  display:inline-block; padding:5px 14px; border-radius:999px;
  background: rgba(255,93,108,.15); color:#ff8a93;
  font-size:13px; font-weight:700; letter-spacing:.15em;
  border:1px solid rgba(255,93,108,.3);
  margin-bottom:14px;
}
.sw-hero-num{
  font-family:'Cinzel',var(--serif); font-weight:900;
  display:flex; align-items:flex-end; justify-content:center; gap:6px;
  line-height:.9;
}
.sw-hero-num em{
  font-style:normal;
  font-size: clamp(80px, 14vw, 160px);
  background: linear-gradient(180deg, #fff 0%, #ffd86b 35%, #d4af37 75%, #8a6a14 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 80px rgba(212,175,55,.6);
  letter-spacing:-.04em;
}
.sw-hero-num span{
  font-size: clamp(40px, 6vw, 72px);
  background: linear-gradient(180deg,#ffd86b,#d4af37);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:14px;
}
.sw-hero-sub{ margin-top:10px; color:#ffd86b; font-size:14px; letter-spacing:.1em; }

.sw-desc{ color:#cfd6e0; font-size:15px; line-height:1.75; margin:0 0 14px; }
.sw-desc strong{ color:#ffd86b; }
.sw-list{ list-style:none; margin-bottom:24px; }
.sw-list li{ padding:6px 0; color:#cfd6e0; font-size:14px; }

/* 兩段方案 */
.sw-pitch{ display:grid; gap:10px; margin: 0 0 24px; }
.sw-pitch-row{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px; border-radius:14px;
  background: linear-gradient(180deg, rgba(95,227,201,.08), rgba(95,227,201,.02));
  border:1px solid rgba(95,227,201,.25);
}
.sw-pitch-row .sp-step{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg,#1abc9c,#0a4a5c); color:#fff;
  font-family:'Cinzel',var(--serif); font-weight:800; font-size:16px;
}
.sw-pitch-row .sp-text{ flex:1; color:#e9f3ff; font-size:16px; line-height:1.6; }
.sw-pitch-row .sp-text strong{ color:#ffd86b; font-weight:800; font-size:1.05em; }
.sw-pitch-row.hot{
  background: linear-gradient(135deg, rgba(255,216,107,.16), rgba(255,93,108,.08));
  border-color: rgba(255,216,107,.55);
  box-shadow: 0 0 0 1px rgba(255,216,107,.25), 0 12px 30px rgba(212,175,55,.18);
}
.sw-pitch-row.hot .sp-step{
  background: linear-gradient(135deg,#ffd86b,#d4af37); color:#1a1004;
  box-shadow: 0 6px 18px rgba(212,175,55,.5);
}
.sw-pitch-row.hot .sp-text strong{
  font-size:1.15em;
  background: linear-gradient(135deg,#ffd86b,#d4af37);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.sw-cta-btn{ width:100%; }

@media (max-width: 720px){
  .sw-card{ padding:30px 24px; }
  .sw-tier-row{ grid-template-columns: 1fr; gap:6px; text-align:center; }
  .sw-tier-row .t-eg{ text-align:center; }
  .sw-tier-row .t-pct{ justify-self:center; }
}

/* ============ 出金見證實錄 ============ */
.payout{ max-width:1240px; margin:0 auto; padding:80px 24px 100px; }
.payout-head{ text-align:center; margin-bottom:36px; }
.payout-tag{
  display:inline-block; padding:6px 14px; border-radius:999px;
  background: rgba(212,175,55,.12); color: var(--gold-soft);
  font-size:12px; font-weight:700; letter-spacing:.2em;
  border:1px solid rgba(212,175,55,.35);
  margin-bottom:14px;
}
.payout-tag::before{ content:'● '; color:#5fe3c9; animation: blink 1.4s infinite; }
.payout-sub{ color:var(--ink-dim); font-size:15px; margin-top:-24px; margin-bottom:8px; }

.payout-stats{
  display:grid; grid-template-columns: repeat(4,1fr); gap:14px;
  list-style:none; max-width:1100px; margin:0 auto 40px;
  background: linear-gradient(180deg, rgba(7,34,58,.7), rgba(4,17,28,.5));
  border:1px solid rgba(212,175,55,.18); border-radius:20px; padding:24px;
}
.payout-stats li{ text-align:center; padding:8px; border-right:1px solid rgba(212,175,55,.1); }
.payout-stats li:last-child{ border-right:none; }
.payout-stats strong{
  display:block; font-family:'Cinzel',var(--serif); font-size: clamp(22px, 2.4vw, 32px); font-weight:800;
  background: linear-gradient(180deg, #fff 0%, var(--gold-soft) 60%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 30px rgba(212,175,55,.25);
}
.payout-stats span{ color:var(--ink-dim); font-size:12px; letter-spacing:.05em; }
@media (max-width: 720px){ .payout-stats{ grid-template-columns: repeat(2,1fr); } .payout-stats li{ border-right:none; border-bottom:1px solid rgba(212,175,55,.1); padding-bottom:14px; } }

.payout-marquee{
  position:relative;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.track{ overflow:hidden; padding:6px 0; }
.track + .track{ margin-top:14px; }
.track-inner{
  display:flex; gap:14px; width:max-content;
  animation: marqueeL 38s linear infinite;
}
.track-r .track-inner{ animation-name: marqueeR; animation-duration: 46s; }
.track-inner:hover{ animation-play-state: paused; }
@keyframes marqueeL { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
@keyframes marqueeR { 0%{ transform:translateX(-50%); } 100%{ transform:translateX(0); } }

/* 將每一條 track 內容自動 clone 一份做無縫循環 */
.track-inner::after{
  content:''; display:none; /* 用 JS 複製內容 */
}

.payout-card{
  flex: 0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:14px;
  background: linear-gradient(180deg, rgba(95,227,201,.06), rgba(212,175,55,.04));
  border:1px solid rgba(95,227,201,.14);
  min-width:280px;
  transition: transform .3s, border-color .3s;
}
.payout-card:hover{ transform: translateY(-3px); border-color: rgba(212,175,55,.5); }
.payout-card.big{
  border-color: rgba(212,175,55,.55);
  background: linear-gradient(180deg, rgba(212,175,55,.12), rgba(212,175,55,.04));
  box-shadow: 0 0 32px rgba(212,175,55,.2);
}
.pc-avatar{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--jade), #0a4a5c);
  color:#04111c; font-family:var(--serif); font-weight:800; font-size:16px;
  box-shadow: 0 0 0 2px rgba(255,216,107,.3);
}
.payout-card.big .pc-avatar{
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 0 0 2px rgba(95,227,201,.5), 0 0 18px rgba(212,175,55,.5);
}
.pc-body{ flex:1; min-width:0; }
.pc-body b{ display:block; color:#fff; font-size:14px; font-weight:600; }
.pc-body small{ display:block; color:var(--ink-dim); font-size:12px; margin-top:2px; }
.pc-amt{
  flex:0 0 auto; font-family:'Cinzel',var(--serif); font-weight:800; font-size:18px;
  color: var(--gold-soft);
  text-shadow: 0 0 14px rgba(212,175,55,.4);
}
.pc-amt.big{ font-size:22px; color:#ffd86b; }
.pc-time{ flex:0 0 auto; color:var(--ink-dim); font-size:11px; padding-left:8px; border-left:1px solid rgba(95,227,201,.14); }

.payout-foot{ text-align:center; margin-top:28px; color:var(--ink-dim); font-size:12px; }

/* 新卡 flash 高光 */
.payout-card.flash{
  animation: cardFlash 1.6s ease-out;
  border-color: rgba(255,216,107,.7);
}
@keyframes cardFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255,216,107,.0); transform: scale(1); }
  20%  { box-shadow: 0 0 0 8px rgba(255,216,107,.45), 0 0 30px rgba(255,216,107,.6); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 rgba(255,216,107,0); transform: scale(1); }
}

/* 出金 toast */
.payout-toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:14px;
  background: linear-gradient(135deg, rgba(7,34,58,.95), rgba(4,17,28,.95));
  border:1px solid rgba(95,227,201,.4);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  transform: translateX(120%); opacity:0;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s;
}
.payout-toast.in{ transform: translateX(0); opacity:1; }
.payout-toast.out{ transform: translateX(120%); opacity:0; }
.payout-toast.big{ border-color: rgba(255,216,107,.7); box-shadow: 0 16px 40px rgba(212,175,55,.4), 0 0 0 1px rgba(255,216,107,.5); }
.payout-toast .pt-avatar{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--jade), #0a4a5c);
  color:#04111c; font-family:var(--serif); font-weight:800; font-size:15px;
}
.payout-toast.big .pt-avatar{
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 0 16px rgba(212,175,55,.6);
}
.payout-toast .pt-body{ flex:1; min-width:0; }
.payout-toast .pt-body b{ display:block; color:#fff; font-size:13px; font-weight:600; }
.payout-toast .pt-body small{ display:block; color:var(--jade-glow); font-size:11px; margin-top:2px; }
.payout-toast .pt-amt{
  flex:0 0 auto; font-family:'Cinzel',var(--serif); font-weight:800; font-size:16px;
  color: var(--gold-soft);
  text-shadow: 0 0 12px rgba(212,175,55,.5);
}
.payout-toast.big .pt-amt{ font-size:18px; color:#ffd86b; }

/* ============ Bonus 卡片 ============ */
.bonus{ padding:80px 24px 120px; position:relative; }
.bonus-decor{
  position:absolute; inset:0;
  background:
    radial-gradient(600px 400px at 20% 50%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(500px 400px at 80% 50%, rgba(26,188,156,.15), transparent 60%);
  pointer-events:none;
}
.bonus-card{
  position:relative; max-width:760px; margin:0 auto; padding:56px 40px 44px;
  background: linear-gradient(180deg, rgba(7,34,58,.85), rgba(4,17,28,.95));
  border:2px solid transparent;
  border-radius:32px;
  background-clip: padding-box;
  text-align:center;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.bonus-card::before{
  content:''; position:absolute; inset:-2px; border-radius:32px; padding:2px;
  background: linear-gradient(135deg, var(--gold-soft), var(--jade-glow), var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
  animation: borderRotate 4s linear infinite;
}
@keyframes borderRotate { to{ filter: hue-rotate(360deg); } }

.bonus-tag{
  display:inline-block; padding:6px 16px; border-radius:999px;
  background: var(--danger); color:#fff; font-size:13px; font-weight:700;
  margin-bottom:18px; letter-spacing:.1em;
  animation: tagPulse 1.6s ease-in-out infinite;
}
@keyframes tagPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); box-shadow:0 0 30px rgba(255,93,108,.6); } }
.bonus-card h2{ font-family: var(--serif); }
.bonus-card h2 span{ display:block; font-size:18px; color: var(--ink-dim); font-weight:500; letter-spacing:.2em; }
.bonus-card h2 strong{ display:block; font-family:'Cinzel',var(--serif); font-size:32px; margin:8px 0 4px; color:var(--gold-soft); line-height:.9; }
.bonus-card h2 .hbi-unit{ display:block; color:var(--ink-dim); font-size:16px; font-weight:500; margin-top:14px; letter-spacing:.1em; }
.bonus-card h2 .big{
  font-size: clamp(72px, 12vw, 140px); font-weight:900; letter-spacing:-.04em;
  background: linear-gradient(180deg, #fff 0%, var(--gold-soft) 40%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 60px rgba(212,175,55,.5);
  display:inline-block;
}
.bonus-card h2 small{ display:block; color:var(--ink-dim); font-size:15px; font-weight:500; margin-top:8px; }
.bonus-list{ list-style:none; max-width:480px; margin:30px auto; text-align:left; }
.bonus-list li{ padding:14px 18px; margin-bottom:10px; border-radius:12px;
  background: rgba(95,227,201,.06); border-left:3px solid var(--jade);
  font-size:15px; color:#cfe1f1; }
.bonus-list b{ color: var(--gold-soft); margin-right:8px; }
.bonus-fineprint{ display:block; margin-top:18px; color: var(--ink-dim); font-size:12px; }

/* ============ Register（三步入會 → LINE 直導） ============ */
.register{ max-width:820px; margin:0 auto; padding:120px 24px; }
.reg-wrap{
  background: linear-gradient(180deg, rgba(7,34,58,.7), rgba(4,17,28,.5));
  border:1px solid rgba(95,227,201,.18); border-radius:28px; padding:56px 48px;
  backdrop-filter: blur(8px); text-align:center;
}
.reg-side-full{ max-width:560px; margin:0 auto; }
.reg-side-full .reg-steps{ text-align:left; margin-bottom:36px; }
.reg-foot{ display:block; margin-top:14px; color:var(--ink-dim); font-size:12px; }
.reg-side h2{ font-family:var(--serif); font-size:36px; font-weight:900; margin-bottom:32px; }
.reg-steps{ list-style:none; }
.reg-steps li{ display:flex; gap:18px; margin-bottom:22px; }
.reg-steps span{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px;
  background: linear-gradient(135deg, var(--jade), var(--jade-glow));
  color:#04111c; font-family:'Cinzel',var(--serif); font-weight:800; font-size:22px;
  display:grid; place-items:center;
  box-shadow: 0 8px 24px rgba(26,188,156,.4);
}
.reg-steps strong{ display:block; font-size:17px; margin-bottom:4px; }
.reg-steps p{ color: var(--ink-dim); font-size:14px; }

.reg-form h3{ font-family:var(--serif); font-size:24px; font-weight:700; margin-bottom:24px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; color: var(--ink-dim); margin-bottom:6px; letter-spacing:.05em; }
.field input[type=tel],
.field input[type=text],
.field input[type=password]{
  width:100%; padding:14px 16px; border-radius:12px;
  background: rgba(4,17,28,.6); color: var(--ink);
  border:1px solid rgba(95,227,201,.2);
  font-size:15px; font-family: var(--sans);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus{ outline:none; border-color: var(--jade-glow);
  box-shadow: 0 0 0 4px rgba(95,227,201,.15); }
.checkbox{ display:flex; align-items:center; gap:10px; color: var(--ink-dim); font-size:14px; }
.checkbox input{ accent-color: var(--jade); }
.reg-line{ display:block; text-align:center; margin-top:18px;
  color: var(--jade-glow); font-size:14px; }
.reg-line:hover{ text-decoration: underline; }
@media (max-width: 1024px){
  .reg-wrap{ grid-template-columns: 1fr; padding: 32px 24px; }
  .register{ padding: 80px 20px; }
}

/* ============ LINE 區 ============ */
.line{ padding:120px 24px; max-width:760px; margin:0 auto; }
.line-wrap{ text-align:center; }
.line-wrap .line-perks{ display:inline-block; text-align:left; }
.line-tag{ display:inline-block; padding:6px 14px; border-radius:999px;
  background: rgba(6,199,85,.15); color:#7eea9c; font-size:13px; font-weight:700; }
.line-text h2{ font-family: var(--serif); font-size: clamp(28px,4vw,44px); font-weight:900; margin: 16px 0 18px; }
.line-text p{ color:#cfe1f1; font-size:16px; line-height:1.8; margin-bottom:22px; }
.line-text em{ color: var(--gold-soft); font-weight:700; }
.line-perks{ list-style:none; margin-bottom:28px; }
.line-perks li{ padding:6px 0; color: var(--ink-dim); }
.qr-frame{ position:relative; padding:18px;
  background: linear-gradient(180deg, rgba(6,199,85,.15), rgba(6,199,85,.05));
  border:1px solid rgba(6,199,85,.4); border-radius:24px;
  text-align:center;
  box-shadow: 0 20px 60px rgba(6,199,85,.25);
}
.qr-frame::before{
  content:''; position:absolute; inset:-2px; border-radius:24px; padding:2px;
  background: linear-gradient(135deg, #06c755, #7eea9c, #06c755);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: borderRotate 6s linear infinite;
}
.qr-mock{ background:#fff; padding:10px; border-radius:14px; }
.qr-text{ margin-top:12px; color:#7eea9c; font-weight:700; font-size:14px; }
@media (max-width: 1024px){ .line{ padding:80px 20px; } }

/* ============ Trust（玩家親口說 + 跑馬燈） ============ */
.trust{ max-width:1240px; margin:0 auto; padding:100px 24px 100px; }
.trust-sub{ text-align:center; color:var(--ink-dim); font-size:14px; margin-top:-32px; margin-bottom:36px; }
.trust-marquee{
  position:relative; margin-bottom:40px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-marquee .track{ overflow:hidden; padding:6px 0; }
.trust-marquee .track + .track{ margin-top:14px; }
.trust-marquee .track-inner{
  display:flex; gap:14px; width:max-content;
  animation: marqueeL 50s linear infinite;
}
.trust-marquee .track-r .track-inner{ animation-name: marqueeR; animation-duration: 60s; }
.trust-marquee .track-inner:hover{ animation-play-state: paused; }

.quote-card{
  flex:0 0 auto;
  display:flex; align-items:flex-start; gap:14px;
  width: 360px;
  padding:18px 20px; border-radius:16px;
  background: linear-gradient(180deg, rgba(95,227,201,.08), rgba(212,175,55,.04));
  border:1px solid rgba(95,227,201,.18);
  position:relative; transition: transform .3s, border-color .3s;
}
.quote-card:hover{ transform: translateY(-3px); border-color: rgba(212,175,55,.5); }
.qc-avatar{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--jade), #0a4a5c);
  color:#04111c; font-family:var(--serif); font-weight:800; font-size:17px;
  box-shadow: 0 0 0 2px rgba(255,216,107,.3);
}
.quote-card blockquote{
  flex:1; min-width:0;
  font-size:14px; line-height:1.6; color:#e9f3ff;
  position:relative;
}
.quote-card blockquote::before{
  content:'"'; position:absolute; top:-8px; left:-6px;
  font-family:var(--serif); font-size:36px; color: var(--gold-soft); opacity:.3; line-height:1;
}
.quote-card footer{
  display:block; margin-top:8px;
  color:var(--ink-dim); font-size:11px; letter-spacing:.05em;
}

.trust-logos{ display:flex; gap:24px; justify-content:center; flex-wrap:wrap;
  padding:24px; border-top:1px solid rgba(95,227,201,.12); border-bottom:1px solid rgba(95,227,201,.12); }
.trust-logos span{ color:var(--ink-dim); font-size:13px; letter-spacing:.2em;
  padding:6px 14px; border:1px solid rgba(95,227,201,.2); border-radius:8px; }
@media (max-width: 1024px){ .quote-card{ width: 300px; } }

/* ============ Footer ============ */
.footer{ border-top:1px solid rgba(95,227,201,.1); padding:40px 24px;
  background: rgba(4,17,28,.6); position:relative; z-index:1; }
.footer-inner{ max-width:1240px; margin:0 auto; display:flex; gap:24px; justify-content:space-between; flex-wrap:wrap; align-items:center; }
.footer-inner > div:first-child{ display:flex; align-items:center; gap:14px; color:var(--ink-dim); font-size:13px; }
.footer-warn{ font-size:12px; color: var(--ink-dim); max-width:520px; line-height:1.6; }
.footer-warn strong{ color: var(--danger); margin-right:6px; }

/* ============ Float LINE ============ */
.float-line{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:60px; height:60px; border-radius:50%;
  background: linear-gradient(135deg, #06c755, #04a043);
  color:#fff; display:grid; place-items:center;
  box-shadow: 0 12px 30px rgba(6,199,85,.5);
  animation: floatPulse 2s ease-in-out infinite;
}
.float-line span{ position:absolute; bottom:-22px; font-size:11px; color:#7eea9c; font-weight:700; letter-spacing:.1em; }
@keyframes floatPulse {
  0%,100%{ transform: translateY(0); box-shadow: 0 12px 30px rgba(6,199,85,.5); }
  50%{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(6,199,85,.7); }
}

/* 滾動條樣式 */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#04111c; }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #1abc9c, #d4af37); border-radius:10px; }

/* 動畫減量偏好 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01s !important; animation-iteration-count:1 !important; transition-duration:.01s !important; }
}