:root{ --bg:#07080b; --panel:#0d1016; --panel2:#111522; --text:#ebedf6; --muted:#b8bbcb; --gold:#d4af37; --border:#24293a; --accent:#00d1ff; --shadow:0 18px 45px rgba(0,0,0,.55); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text); font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";} a{color:#ffd978;text-decoration:none} a:hover{text-decoration:underline} .container{max-width:1200px;margin:0 auto;padding:20px} .header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(8,10,15,.85),rgba(8,10,15,.45)); border-bottom:1px solid var(--border);backdrop-filter:saturate(1.1) blur(10px)} .nav{display:flex;gap:18px;align-items:center;padding:12px 0} .brand{display:flex;align-items:center;gap:10px;font-weight:900} .brand img{width:28px;height:28px;border-radius:7px;object-fit:cover} .badge{display:inline-block;padding:.22rem .6rem;border:1px solid var(--gold);border-radius:999px;color:#ffd978;font-size:.78rem} .spacer{flex:1} .lang-toggle{display:flex;gap:6px;align-items:center;background:rgba(255,255,255,.03);padding:4px;border:1px solid var(--border);border-radius:999px} .lang-toggle button{border:0;background:transparent;color:var(--muted);padding:.4rem .7rem;border-radius:999px;cursor:pointer} .lang-toggle button.active{color:#061014;background:linear-gradient(180deg,#ffd978,#d4af37)} .btn{display:inline-block;padding:.85rem 1.1rem;border-radius:14px;border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:var(--text);font-weight:800;letter-spacing:.2px; box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);position:relative;overflow:hidden} .btn:hover{transform:translateY(-1px)} .btn-gold{border-color:#e9c86c;background:linear-gradient(180deg,#ffd9782e,#ffd97814);color:#fff} .btn-primary{border-color:#22d3ee;background:linear-gradient(180deg,#0bd1ff33,#0bd1ff1a);color:#b7f3ff} .hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch;padding:34px 0 18px} .card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow)} .h1{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.12;margin:.4rem 0 1rem;background:linear-gradient(92deg,#fafafa,#ffd978,#fff2b0,#fafafa); -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shimmer 8s linear infinite} @keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}} .kicker{color:#8be9ff;font-weight:800;letter-spacing:.1em;font-size:.85rem} .lead{color:var(--muted);font-size:1.02rem} .banner{width:100%;height:260px;display:block;object-fit:cover;object-position:center;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .feature{background:linear-gradient(180deg,#0f131a,#0e1117);border:1px solid var(--border);border-radius:16px;padding:14px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease} .feature:hover{transform:translateY(-2px);border-color:#2b3145;box-shadow:0 14px 30px rgba(0,0,0,.48)} .feature b{color:#ffd978} .ticker{height:180px;overflow:hidden;mask-image: linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);} .ticker .inner{display:flex;flex-direction:column;gap:10px;animation:scrollY 18s linear infinite} @keyframes scrollY{0%{transform:translateY(0)}100%{transform:translateY(-50%)}} .review{padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02)} .stars{letter-spacing:2px;color:#ffd978;font-weight:900} .carousel{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,#0e1016,#0f121a)} .carousel-track{display:flex;gap:10px;animation:scrollX 40s linear infinite} .carousel-item{min-width:220px;padding:12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02)} @keyframes scrollX{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .footer{border-top:1px solid var(--border);margin-top:34px;padding:16px 0;color:var(--muted)} .reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} @media(max-width:980px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}} @media(max-width:640px){.grid,.grid-2{grid-template-columns:1fr}}
/* === Animated background glows === */
body{position:relative}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(400px 400px at 20% 30%, rgba(0,180,255,.18), transparent 60%),
    radial-gradient(420px 420px at 80% 70%, rgba(255,200,0,.14), transparent 60%);
  animation: zp-glow-move 28s ease-in-out infinite alternate;
}
@keyframes zp-glow-move{
  0%   { background-position: 15% 25%, 85% 75%; }
  50%  { background-position: 25% 35%, 75% 65%; }
  100% { background-position: 18% 30%, 82% 78%; }
}
.header, main, footer{ position:relative; z-index:1; }


/* ===== VISIBILITY FIX (always readable on dark bg) ===== */
body { color: #e8e8e8; }
main.container, .section, .card, .feature { color: inherit; }
h1, h2, h3, h4, h5, h6, p, li, .small, .lead, .kicker, b, strong, span { color: inherit; }
a { color: #f5c451; }
a:hover { opacity: .9; }

/* ==== 星空呼吸動態效果 ==== */

@keyframes starTwinkle {
  0%, 100% { opacity: 0.6; transform: translateY(0px); }
  50% { opacity: 1; transform: translateY(-1px); }
}
.star {
  animation: starTwinkle 3s ease-in-out infinite;
}


/* ==== 修正黑色文字問題 ==== */
h1, h2, h3, h4, h5, h6,
p, li, .small, .lead, .kicker,
b, strong, span {
  color: var(--text) !important;
}


/* ==== Footer 視覺修正：避免文字變黑 ==== */
footer.footer, .footer, .footer * {
  color: var(--muted) !important;
}
.footer a {
  color: var(--muted) !important;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}


/* ==== Footer 強制白色 ==== */
footer.footer, .footer, .footer * {
  color: #ffffff !important;
}
.footer a {
  color: #ffffff !important;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}

/* v23.5 footer bar + badge fix */
.footer-bar {
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(6px);
}
.badge {
  margin: 0 8px;
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
}

/* ==== v23.5 footer overlap fix ==== */
:root{
  --footer-h: 64px; /* 頁尾高度，可依實際需求調整 */
}
.footer-bar{
  z-index: 30;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(6px);
}
body{ padding-bottom: var(--footer-h); }

.floating-nav,
.float-tools,
.side-badges,
.scroll-top,
.sticky-tools{
  position: fixed;
  bottom: calc(var(--footer-h) + 16px);
  z-index: 20;
}
.badge{ margin: 0 8px; box-shadow: 0 0 4px rgba(0,0,0,0.8); }