:root { --primary: rgb(217, 192, 176); --primary-dark:#876f60; --ink:#111827; --muted:#5f6673; --deep:#14324a; --line:#e8edf2; --soft:#f8f3ef; --pale:#f6fbff; --card:#ffffff; --gray:#f5f6f8; --shadow:0 16px 38px rgba(20,50,74,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif; color:var(--ink); background:linear-gradient(180deg,#fff 0%,#fbfdff 55%,#fff 100%); line-height:1.75; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
.site-header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.mobile-header { height:64px; display:grid; grid-template-columns:48px 1fr 82px; align-items:center; gap:8px; padding:0 14px; }
.mobile-logo { justify-self:center; } .mobile-logo img,.desktop-logo img,.footer-brand img { max-height:38px; width:auto; }
.menu-button { width:42px; height:42px; display:flex; flex-direction:column; justify-content:center; gap:5px; border:0; background:#fff; padding:8px; cursor:pointer; }
.menu-button span { display:block; height:2px; width:24px; background:var(--deep); border-radius:2px; }
.top-action,.main-btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 18px; border-radius:999px; background:var(--primary); color:#18202b; font-weight:700; border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 20px rgba(217,192,176,.25); transition:.2s ease; white-space:nowrap; }
.top-action:hover,.main-btn:hover { background:var(--primary-dark); color:#fff; transform:translateY(-1px); }
.mobile-nav { display:none; padding:8px 16px 16px; background:#fff; border-top:1px solid var(--line); grid-template-columns:1fr 1fr; gap:8px; }
.mobile-nav.open { display:grid; }
.mobile-nav a { padding:10px 12px; border:1px solid var(--line); border-radius:14px; color:var(--deep); font-size:14px; }
.mobile-nav a.active { background:var(--primary); color:#111; border-color:var(--primary); font-weight:700; }
.desktop-header { display:none; max-width:1240px; margin:0 auto; height:78px; padding:0 24px; align-items:center; gap:22px; }
.desktop-logo { flex:0 0 auto; } .desktop-nav { display:flex; align-items:center; gap:6px; flex:1; justify-content:center; }
.desktop-nav a { padding:10px 13px; border-radius:999px; color:#263445; font-size:15px; }
.desktop-nav a.active,.desktop-nav a:hover { background:var(--primary); color:#111; font-weight:700; }
.search-icon { width:34px; height:34px; border:1.5px solid var(--line); border-radius:50%; position:relative; background:#fff; }
.search-icon:before { content:""; position:absolute; width:10px; height:10px; border:2px solid var(--deep); border-radius:50%; left:8px; top:8px; }
.search-icon:after { content:""; position:absolute; width:9px; height:2px; background:var(--deep); transform:rotate(45deg); right:7px; bottom:8px; border-radius:2px; }
.container,.section-inner { max-width:1240px; margin:0 auto; padding:0 18px; }
.sports-hero { padding:46px 0 34px; background:linear-gradient(180deg,#fff 0%,var(--soft) 100%); }
.hero-grid { display:grid; gap:28px; align-items:center; }
.hero-copy h1,.page-hero h1 { margin:0 0 16px; font-size:34px; line-height:1.18; letter-spacing:-.02em; color:var(--deep); }
.hero-copy p,.page-summary { color:var(--muted); font-size:16px; margin:0 0 22px; }
.badge-row,.tag-row { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.badge,.category-badge,.mini-tag { display:inline-flex; align-items:center; border-radius:999px; padding:7px 12px; background:#f2e6df; color:#6f5446; font-weight:700; font-size:13px; }
.hero-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hero-visual { position:relative; } .banner-section { border-radius:28px; overflow:hidden; box-shadow:var(--shadow); background:#fff; border:1px solid var(--line); }
.banner-section img { width:100%; min-height:260px; object-fit:cover; }
.hero-data-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.hero-data-card,.score-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:0 8px 22px rgba(20,50,74,.05); }
.hero-data-card strong { display:block; color:var(--deep); font-size:20px; }
.section { padding:54px 0; } .section.alt { background:var(--pale); } .section.soft { background:var(--soft); }
.section-head { margin-bottom:24px; max-width:760px; } .section-head h2 { margin:0 0 10px; color:var(--deep); font-size:28px; line-height:1.25; } .section-head p { margin:0; color:var(--muted); }
.category-grid,.service-grid,.info-grid,.security-grid,.faq-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.sports-card,.service-card,.info-card,.faq-item,.content-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:0 10px 28px rgba(20,50,74,.06); }
.sports-card h3,.service-card h3,.info-card h3,.content-card h2,.faq-item h3 { margin:0 0 10px; color:var(--deep); }
.sports-card p,.service-card p,.info-card p,.content-card p,.faq-item p { color:var(--muted); margin:0 0 12px; }
.card-link { font-weight:800; color:#6f5446; }
.label { display:inline-flex; padding:4px 9px; border-radius:999px; background:var(--primary); color:#111; font-size:12px; font-weight:800; margin-bottom:12px; }
.split { display:grid; gap:28px; align-items:center; } .split.reverse .split-media { order:-1; }
.split-media img { border-radius:26px; border:1px solid var(--line); box-shadow:var(--shadow); width:100%; object-fit:cover; }
.checklist { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.checklist li { position:relative; padding-left:28px; color:#344255; }
.checklist li:before { content:""; position:absolute; left:0; top:8px; width:16px; height:16px; border-radius:50%; background:var(--primary); box-shadow:inset 0 0 0 4px #fff; border:1px solid rgba(0,0,0,.06); }
.score-panel,.data-panel { background:#fff; border:1px solid var(--line); border-radius:24px; padding:20px; box-shadow:var(--shadow); }
.score-list { display:grid; gap:12px; margin:16px 0; } .score-card { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; text-align:center; } .score-card b { color:var(--deep); }
.status-tag { display:inline-flex; padding:4px 8px; border-radius:999px; background:#eef8ff; color:#26617f; font-size:12px; font-weight:700; }
.data-panel ul { margin:14px 0 0; padding-left:18px; color:var(--muted); }
.app-showcase { background:linear-gradient(180deg,#fff,#f7fbff); border:1px solid var(--line); border-radius:28px; padding:22px; box-shadow:var(--shadow); }
.app-showcase .main-btn { margin-top:16px; }
.security-section .info-card { min-height:160px; }
.responsible-play-section { background:linear-gradient(180deg,#f8f3ef,#ffffff); }
.responsible-box { border-radius:26px; padding:24px; border:1px solid #e9d8cd; background:#fff; box-shadow:var(--shadow); }
.responsible-box h2 { color:var(--deep); margin-top:0; }
.page-hero { padding:48px 0 30px; background:linear-gradient(180deg,#fff,var(--soft)); }
.content-section { padding:42px 0; }
.content-layout { display:grid; gap:18px; }
.notice-card { background:#fff8f4; border:1px solid #ead7ca; border-left:5px solid var(--primary); border-radius:18px; padding:18px; color:#4e4038; }
.cta { margin:52px 0 0; border-radius:28px; background:linear-gradient(135deg,var(--deep),#214b68); color:#fff; padding:32px 22px; text-align:center; }
.cta h2 { margin:0 0 10px; } .cta p { color:#dce8f0; margin:0 auto 18px; max-width:740px; }
.site-footer { background:#101820; color:#d6dde5; padding:42px 0 20px; }
.footer-inner { max-width:1240px; margin:0 auto; padding:0 18px; display:grid; gap:22px; }
.footer-brand p,.footer-notice p { color:#aeb8c4; margin:12px 0 0; } .footer-col h3 { color:#fff; margin:0 0 12px; } .footer-col a { display:block; color:#c8d0d8; margin:7px 0; }
.footer-notice { max-width:1240px; margin:26px auto 0; padding:18px 18px 0; border-top:1px solid rgba(255,255,255,.1); font-size:13px; }
.download-panel { max-width:820px; margin:0 auto; text-align:center; } .download-panel .main-btn { margin:16px auto 22px; }
@media (min-width:680px) { .category-grid,.service-grid,.info-grid,.security-grid,.faq-grid { grid-template-columns:repeat(2,1fr); } .hero-data-cards { grid-template-columns:repeat(3,1fr); } .content-layout { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .mobile-header,.mobile-nav { display:none!important; } .desktop-header { display:flex; } .sports-hero { padding:72px 0 56px; } .hero-grid,.split { grid-template-columns:1fr 1fr; } .hero-copy h1,.page-hero h1 { font-size:50px; } .category-grid { grid-template-columns:repeat(3,1fr); } .service-grid,.info-grid,.security-grid { grid-template-columns:repeat(3,1fr); } .faq-grid { grid-template-columns:repeat(2,1fr); } .split.reverse .split-media { order:initial; } .footer-inner { grid-template-columns:2fr 1fr 1fr 1fr; } .section { padding:74px 0; } }