:root {
    --primary: rgb(176, 219, 245);
    --primary-strong: #1f6d96;
    --blue: #0f3554;
    --blue-soft: #eff8fe;
    --blue-line: #d5eaf6;
    --text: #172330;
    --muted: #647484;
    --white: #ffffff;
    --offwhite: #f8fbfd;
    --gray: #eef3f6;
    --dark: #071d31;
    --shadow: 0 14px 34px rgba(15, 53, 84, .08);
    --radius: 20px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; overflow-x:hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color:var(--text); background: linear-gradient(180deg, #fff 0%, #f5fbff 44%, #fff 100%); line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { width:min(100% - 32px, 1220px); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--blue-line); box-shadow:0 6px 22px rgba(15,53,84,.05); }
.mobile-header { height:64px; display:grid; grid-template-columns:48px 1fr 86px; align-items:center; gap:8px; padding:0 14px; background:#fff; }
.desktop-header { display:none; }
.logo img { height:38px; object-fit:contain; }
.mobile-logo { justify-self:center; }
.menu-button { width:42px; height:42px; border:0; border-radius:12px; background:var(--blue-soft); display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 10px; cursor:pointer; }
.menu-button span { display:block; height:2px; border-radius:2px; background:var(--blue); }
.top-action, .main-btn { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:var(--primary); color:var(--blue); font-weight:800; border:1px solid rgba(15,53,84,.12); box-shadow:0 10px 22px rgba(15,53,84,.08); transition:.2s ease; }
.top-action { height:38px; padding:0 16px; font-size:14px; }
.main-btn { min-height:48px; padding:0 24px; }
.top-action:hover, .main-btn:hover { background:var(--primary-strong); color:#fff; transform:translateY(-1px); }
.mobile-nav { display:none; background:#fff; padding:10px 16px 18px; border-top:1px solid var(--blue-line); grid-template-columns:1fr 1fr; gap:10px; }
.mobile-nav.open { display:grid; }
.mobile-nav a { padding:10px 12px; border-radius:14px; background:var(--blue-soft); color:var(--blue); font-weight:700; font-size:14px; }
.mobile-nav a.active { background:var(--primary); }
.search-icon { width:36px; height:36px; border-radius:50%; border:1px solid var(--blue-line); position:relative; background:#fff; }
.search-icon:before { content:""; position:absolute; width:12px; height:12px; border:2px solid var(--blue); border-radius:50%; left:9px; top:8px; }
.search-icon:after { content:""; position:absolute; width:8px; height:2px; background:var(--blue); transform:rotate(45deg); right:9px; bottom:10px; border-radius:2px; }
section { padding:56px 0; }
.sports-hero { padding:44px 0 58px; background:linear-gradient(180deg, var(--blue-soft), #fff); }
.hero-layout, .split, .app-showcase, .score-panel { display:grid; gap:24px; }
.hero-copy h1, .page-hero h1 { margin:14px 0; color:var(--blue); font-size:clamp(32px, 8vw, 60px); line-height:1.12; letter-spacing:-.04em; }
.hero-copy p, .page-hero p, .section-head p { color:var(--muted); font-size:16px; margin:0; }
.badge, .category-badge { display:inline-flex; align-items:center; border-radius:999px; background:var(--blue-soft); color:var(--primary-strong); padding:7px 13px; font-size:13px; font-weight:800; border:1px solid var(--blue-line); }
.hero-tags { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0; }
.hero-tags span { background:#fff; border:1px solid var(--blue-line); border-radius:999px; padding:8px 12px; color:var(--blue); font-weight:700; font-size:14px; }
.hero-visual { position:relative; border-radius:28px; overflow:hidden; background:#fff; box-shadow:var(--shadow); border:1px solid var(--blue-line); }
.hero-visual img { width:100%; min-height:240px; object-fit:cover; }
.hero-data-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; background:#fff; }
.hero-data-cards .data-card { border:1px solid var(--blue-line); border-radius:16px; padding:12px; background:var(--offwhite); }
.data-card strong { display:block; color:var(--blue); font-size:20px; }
.data-card span { font-size:12px; color:var(--muted); }
.section-head { margin-bottom:24px; display:flex; flex-direction:column; gap:8px; }
.section-head h2, .content-section h2 { color:var(--blue); font-size:clamp(24px, 5vw, 38px); margin:0; line-height:1.22; }
.category-grid, .service-grid, .security-grid, .info-grid, .faq-list { display:grid; gap:16px; }
.sports-card, .service-card, .info-card, .faq-item, .content-card, .score-card { background:#fff; border:1px solid var(--blue-line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.sports-card h3, .service-card h3, .info-card h3, .faq-item h3, .content-card h2, .score-card h3 { color:var(--blue); margin:0 0 10px; }
.sports-card p, .service-card p, .info-card p, .faq-item p, .content-card p { color:var(--muted); margin:0 0 12px; }
.card-link { color:var(--primary-strong); font-weight:800; }
.mini-label { display:inline-flex; margin-bottom:12px; border-radius:999px; background:var(--blue-soft); color:var(--primary-strong); padding:4px 10px; font-size:12px; font-weight:800; }
.image-card { border-radius:28px; overflow:hidden; border:1px solid var(--blue-line); box-shadow:var(--shadow); background:#fff; }
.image-card img { width:100%; height:100%; object-fit:cover; }
.checklist { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.checklist li { position:relative; padding-left:28px; color:var(--text); }
.checklist li:before { content:""; position:absolute; left:0; top:.45em; width:16px; height:16px; border-radius:50%; background:var(--primary); box-shadow:inset 0 0 0 4px #fff; border:1px solid var(--blue-line); }
.score-panel { background:linear-gradient(135deg, #fff, var(--blue-soft)); border:1px solid var(--blue-line); border-radius:28px; padding:22px; box-shadow:var(--shadow); }
.score-list { display:grid; gap:12px; }
.score-row { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; padding:14px; border:1px solid var(--blue-line); border-radius:16px; background:#fff; }
.score-num { font-size:22px; font-weight:900; color:var(--blue); }
.status { display:inline-flex; border-radius:999px; background:var(--primary); color:var(--blue); padding:3px 9px; font-size:12px; font-weight:800; }
.data-panel { display:grid; gap:12px; }
.data-panel .metric { padding:16px; border-radius:16px; background:#fff; border:1px solid var(--blue-line); }
.metric strong { color:var(--blue); display:block; }
.app-showcase { background:#fff; border:1px solid var(--blue-line); border-radius:28px; padding:22px; box-shadow:var(--shadow); }
.app-visual img { max-height:440px; margin:auto; object-fit:contain; }
.security-section { background:#fff; }
.responsible-play-section { background:linear-gradient(135deg, #eaf7ff, #fff); border-top:1px solid var(--blue-line); border-bottom:1px solid var(--blue-line); }
.responsible-play-section .info-card { background:rgba(255,255,255,.92); }
.cta-section { background:var(--blue); color:#fff; text-align:center; padding:54px 0; }
.cta-section h2 { margin:0 0 12px; font-size:clamp(26px, 5vw, 42px); }
.cta-section p { color:#d8e7f1; margin:0 auto 22px; max-width:760px; }
.page-hero { padding:54px 0 34px; background:linear-gradient(180deg, var(--blue-soft), #fff); }
.content-section { padding:36px 0; }
.content-grid { display:grid; gap:18px; }
.note-box { border-left:4px solid var(--primary-strong); background:var(--blue-soft); border-radius:16px; padding:18px; color:var(--blue); }
.steps { counter-reset:step; list-style:none; padding:0; display:grid; gap:12px; }
.steps li { counter-increment:step; padding:16px 16px 16px 54px; background:#fff; border:1px solid var(--blue-line); border-radius:16px; position:relative; }
.steps li:before { content:counter(step); position:absolute; left:16px; top:16px; width:26px; height:26px; border-radius:50%; background:var(--primary); color:var(--blue); display:grid; place-items:center; font-weight:900; }
.site-footer { background:var(--dark); color:#d7e7f2; padding:48px 0 24px; }
.footer-grid { display:grid; gap:26px; }
.footer-logo img { height:42px; filter:brightness(0) invert(1); margin-bottom:14px; }
.footer-brand p, .footer-bottom p { color:#bdd0dd; margin:0; }
.footer-col h3 { color:#fff; margin:0 0 10px; }
.footer-col a { display:block; color:#d7e7f2; margin:7px 0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:28px; padding-top:18px; display:grid; gap:8px; font-size:13px; }
@media (min-width: 680px) {
    .category-grid, .service-grid, .security-grid, .info-grid { grid-template-columns:repeat(2,1fr); }
    .faq-list { grid-template-columns:repeat(2,1fr); }
    .content-grid { grid-template-columns:repeat(2,1fr); }
}
@media (min-width: 960px) {
    .mobile-header, .mobile-nav { display:none !important; }
    .desktop-header { height:78px; display:flex; align-items:center; gap:24px; }
    .desktop-nav { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; }
    .desktop-nav a { padding:10px 14px; border-radius:999px; color:var(--blue); font-weight:800; font-size:14px; }
    .desktop-nav a.active, .desktop-nav a:hover { background:var(--primary); }
    .hero-layout { grid-template-columns:1.03fr .97fr; align-items:center; gap:36px; }
    .split, .app-showcase, .score-panel { grid-template-columns:1fr 1fr; align-items:center; gap:34px; }
    .category-grid { grid-template-columns:repeat(3,1fr); }
    .service-grid, .security-grid { grid-template-columns:repeat(3,1fr); }
    .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; }
    .footer-bottom { grid-template-columns:1fr 1fr; }
}