:root {--primary: #c9a227; --primary-dark: #a8841a; --secondary: #1a1a2e; --dark: #0f0f1a; --light: #f8f9fa; --text: #333; --text-light: #666; --white: #fff; --gold-gradient: linear-gradient(135deg, #c9a227 0%, #f0d878 50%, #c9a227 100%); --shadow: 0 4px 20px rgba(0,0,0,0.15); --shadow-lg: 0 10px 40px rgba(0,0,0,0.2)} * {margin: 0; padding: 0; box-sizing: border-box} html {scroll-behavior: smooth} body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif; color: var(--text); line-height: 1.7; background: var(--light)} a {text-decoration: none; color: inherit} img {max-width: 100%; height: auto} .container {max-width: 1200px; margin: 0 auto; padding: 0 20px} .header {background: var(--secondary); position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow)} .header-inner {display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; max-width: 1200px; margin: 0 auto} .logo {font-size: 1.5rem; font-weight: 800; color: var(--primary); letter-spacing: 1px} .logo span {color: var(--white)} .nav {display: flex; gap: 8px; align-items: center} .nav a {color: #ccc; padding: 8px 14px; border-radius: 6px; font-size: 0.9rem; transition: all 0.3s} .nav a:hover {color: var(--primary); background: rgba(201,162,39,0.1)} .nav .cta-btn {background: var(--primary); color: var(--dark); font-weight: 700; padding: 8px 18px} .nav .cta-btn:hover {background: var(--primary-dark); color: var(--white)} .mobile-menu-btn {display: none; font-size: 1.5rem; color: var(--white); cursor: pointer} .hero {background: var(--dark); padding: 80px 0 60px; position: relative; overflow: hidden} .hero::before {content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(201,162,39,0.15) 0%, transparent 70%); border-radius: 50%} .hero-inner {display: flex; align-items: center; gap: 60px; position: relative} .hero-content {flex: 1} .hero h1 {font-size: 2.8rem; color: var(--white); margin-bottom: 16px; line-height: 1.3} .hero h1 .highlight {background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text} .hero-subtitle {font-size: 1.2rem; color: #aaa; margin-bottom: 32px} .hero-badges {display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap} .badge {display: flex; align-items: center; gap: 6px; background: rgba(201,162,39,0.15); border: 1px solid rgba(201,162,39,0.3); padding: 8px 14px; border-radius: 30px; color: var(--primary); font-size: 0.85rem; font-weight: 600} .hero-cta {display: flex; gap: 16px; flex-wrap: wrap} .btn {display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: 8px; font-weight: 700; font-size: 1rem; transition: all 0.3s; cursor: pointer; border: none} .btn-primary {background: var(--gold-gradient); color: var(--dark); box-shadow: 0 4px 15px rgba(201,162,39,0.4)} .btn-primary:hover {transform: translateY(-2px); box-shadow: 0 6px 25px rgba(201,162,39,0.5)} .btn-outline {background: transparent; color: var(--primary); border: 2px solid var(--primary)} .btn-outline:hover {background: var(--primary); color: var(--dark)} .btn-lg {padding: 16px 40px; font-size: 1.1rem} .trust-section {background: var(--secondary); padding: 40px 0; border-top: 1px solid rgba(255,255,255,0.05)} .trust-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px} .trust-item {text-align: center; color: #ccc} .trust-item .number {font-size: 2rem; font-weight: 800; color: var(--primary); display: block} .trust-item .label {font-size: 0.9rem; margin-top: 4px} .section {padding: 60px 0} .section-header {text-align: center; margin-bottom: 48px} .section-header h2 {font-size: 2rem; color: var(--secondary); margin-bottom: 12px} .section-header p {color: var(--text-light); font-size: 1.05rem} .games-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px} .game-card {background: var(--white); border-radius: 12px; padding: 28px 20px; text-align: center; box-shadow: var(--shadow); transition: all 0.3s; border: 1px solid #eee} .game-card:hover {transform: translateY(-5px); box-shadow: var(--shadow-lg)} .game-icon {width: 60px; height: 60px; background: var(--gold-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.5rem} .game-card h3 {font-size: 1.1rem; margin-bottom: 8px; color: var(--secondary)} .game-card p {font-size: 0.85rem; color: var(--text-light); margin-bottom: 12px} .game-card .link {color: var(--primary-dark); font-weight: 600; font-size: 0.9rem} .promo-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px} .promo-card {background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid #eee} .promo-card .promo-header {background: var(--secondary); color: var(--primary); padding: 16px 20px; font-weight: 700; font-size: 1.1rem} .promo-card .promo-body {padding: 20px} .promo-card .promo-body p {margin-bottom: 12px; color: var(--text-light); font-size: 0.95rem} .promo-card .promo-body ul {margin-left: 20px; margin-bottom: 16px; color: var(--text)} .promo-card .promo-body li {margin-bottom: 6px; font-size: 0.95rem} .promo-card-img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 0} .promo-card .promo-header + .promo-card-img {border-top: 1px solid #eee} .steps-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px} .step-card {text-align: center; position: relative} .step-card::after {content: '→'; position: absolute; top: 30px; right: -26px; font-size: 1.5rem; color: var(--primary); font-weight: 700} .step-card:last-child::after {display: none} .step-number {width: 60px; height: 60px; background: var(--gold-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.5rem; font-weight: 800; color: var(--dark)} .step-card h3 {font-size: 1.2rem; margin-bottom: 8px} .step-card p {color: var(--text-light); font-size: 0.95rem} .faq-list {max-width: 800px; margin: 0 auto} .faq-item {background: var(--white); border-radius: 10px; margin-bottom: 12px; box-shadow: var(--shadow); overflow: hidden} .faq-question {padding: 18px 24px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--secondary)} .faq-answer {padding: 0 24px 18px; color: var(--text-light); line-height: 1.8; display: none} .faq-item.active .faq-answer {display: block} .cta-section {background: var(--secondary); padding: 60px 0; text-align: center} .cta-section h2 {color: var(--white); font-size: 2rem; margin-bottom: 16px} .cta-section p {color: #aaa; font-size: 1.1rem; margin-bottom: 32px} .footer {background: var(--dark); padding: 48px 0 24px; color: #888} .footer-grid {display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px} .footer-col h4 {color: var(--white); margin-bottom: 16px; font-size: 1rem} .footer-col p {font-size: 0.9rem; line-height: 1.8; margin-bottom: 12px} .footer-col ul {list-style: none} .footer-col li {margin-bottom: 10px} .footer-col a {color: #888; font-size: 0.9rem; transition: color 0.3s} .footer-col a:hover {color: var(--primary)} .footer-bottom {border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; text-align: center; font-size: 0.85rem} .breadcrumb {background: #f0f0f0; padding: 12px 0; font-size: 0.85rem; color: var(--text-light)} .breadcrumb a {color: var(--primary-dark)} .breadcrumb span {margin: 0 8px} .page-content {padding: 40px 0 60px} .page-content h1 {font-size: 2.2rem; color: var(--secondary); margin-bottom: 24px} .page-content h2 {font-size: 1.6rem; color: var(--secondary); margin: 36px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--primary); display: inline-block} .page-content h3 {font-size: 1.25rem; color: var(--secondary); margin: 28px 0 12px} .page-content p {margin-bottom: 16px; color: var(--text); line-height: 1.8} .page-content ul, .page-content ol {margin: 0 0 20px 24px} .page-content li {margin-bottom: 8px; line-height: 1.7} .page-content table {width: 100%; border-collapse: collapse; margin: 20px 0; background: var(--white); box-shadow: var(--shadow); border-radius: 8px; overflow: hidden} .page-content th {background: var(--secondary); color: var(--primary); padding: 12px 16px; text-align: left; font-weight: 700} .page-content td {padding: 12px 16px; border-bottom: 1px solid #eee} .page-content tr:last-child td {border-bottom: none} .faq-page .page-content ul li a {color: #c9a227; font-weight: 700; text-decoration: none; border-bottom: 2px solid rgba(201, 162, 39, 0.4); transition: all 0.25s ease; padding: 1px 0} .faq-page .page-content ul li a:hover {color: #e8c547; border-bottom: 2px solid #e8c547; text-shadow: 0 0 8px rgba(201, 162, 39, 0.3)} @media (max-width: 768px) {.faq-page .page-content ul li a {padding: 4px 0; display: inline-block} } .page-content blockquote {border-left: 4px solid var(--primary); padding-left: 20px; margin: 20px 0; color: var(--text-light); font-style: italic} .internal-links {background: #f8f9fa; border-radius: 10px; padding: 24px; margin: 32px 0; border-left: 4px solid var(--primary)} .internal-links h4 {margin-bottom: 12px; color: var(--secondary)} .internal-links ul {list-style: none; margin: 0} .internal-links li {margin-bottom: 8px} .internal-links a {color: var(--primary-dark); font-weight: 600} .internal-links a:hover {text-decoration: underline} @media (max-width: 1024px) {.games-grid {grid-template-columns: repeat(3, 1fr)} .promo-grid {grid-template-columns: repeat(2, 1fr)} .trust-grid {grid-template-columns: repeat(2, 1fr)} .footer-grid {grid-template-columns: repeat(2, 1fr)} } @media (max-width: 768px) {.nav {display: none} .mobile-menu-btn {display: block} .hero {padding: 50px 0 40px} .hero h1 {font-size: 2rem} .hero-inner {flex-direction: column; gap: 30px} .games-grid {grid-template-columns: repeat(2, 1fr)} .promo-grid {grid-template-columns: 1fr} .steps-grid {grid-template-columns: 1fr} .step-card::after {display: none} .trust-grid {grid-template-columns: repeat(2, 1fr)} .footer-grid {grid-template-columns: 1fr} .section-header h2 {font-size: 1.6rem} .page-content h1 {font-size: 1.8rem} } @media (max-width: 480px) {.games-grid {grid-template-columns: 1fr} .trust-grid {grid-template-columns: 1fr} .hero h1 {font-size: 1.6rem} .btn-lg {padding: 14px 28px; font-size: 1rem} } .text-center {text-align: center} .mt-20 {margin-top: 20px} .mb-20 {margin-bottom: 20px} .bg-white {background: var(--white)} .bg-light {background: #f8f9fa} .bg-dark {background: var(--secondary); color: var(--white)} .article-cover {margin: -20px -20px 24px -20px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--surface)} .article-cover img, .article-cover picture img {width: 100%; height: auto; display: block; object-fit: cover} .promo-img {margin: -20px -20px 16px -20px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--surface); aspect-ratio: 600 / 340} .promo-img img {width: 100%; height: 100%; object-fit: cover; display: block} @media (max-width: 768px) {.article-cover {margin: -16px -16px 20px -16px; border-radius: 0} .promo-img {margin: -16px -16px 12px -16px; border-radius: 0} } .floating-cta {position: fixed; right: 24px; bottom: 24px; width: 90px; height: 90px; border-radius: 50%; background: var(--gold-gradient); color: var(--dark); font-weight: 700; font-size: 14px; text-align: center; line-height: 1.2; display: flex; align-items: center; justify-content: center; flex-direction: column; text-decoration: none; z-index: 9999; box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 15px rgba(201,162,39,0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; border: 2px solid rgba(255,255,255,0.15); letter-spacing: 0.5px} .floating-cta:hover {transform: scale(1.1); box-shadow: 0 6px 30px rgba(0,0,0,0.5), 0 0 25px rgba(201,162,39,0.5); text-decoration: none; color: var(--dark)} .floating-cta span {display: block} @media (max-width: 768px) {.floating-cta {width: 70px; height: 70px; right: 16px; bottom: 16px; font-size: 12px} } .logo img{height:42px;width:auto;display:block;border-radius:4px}.logo{display:flex;align-items:center}@media(max-width:768px){.logo img{height:35px}}