:root { --primary: rgb(176, 219, 245); --blue:#0b4b75; --deep:#09243d; --text:#17212f; --muted:#5d6b7d; --light:#f4f9fc; --line:#d9edf8; --card:#ffffff; }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; max-width:100%; overflow-x:hidden; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif; color:var(--text); background:#fff; line-height:1.75; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { width:min(1180px, calc(100% - 32px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #edf3f7; box-shadow:0 4px 18px rgba(9,36,61,.04); }
.mobile-header { height:64px; display:grid; grid-template-columns:64px 1fr 82px; align-items:center; padding:0 12px; background:#fff; }
.menu-button { width:44px; height:44px; border:0; background:#f3f8fb; border-radius:14px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 11px; }
.menu-button span { height:2px; background:var(--deep); border-radius:99px; }
.mobile-logo { justify-self:center; }
.mobile-logo img, .desktop-logo img { height:36px; width:auto; object-fit:contain; }
.logo-white, .footer-logo { filter:brightness(0) invert(1); }
.top-action, .main-btn { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:var(--primary); color:#06233a; font-weight:800; border:1px solid rgba(11,75,117,.08); box-shadow:0 8px 18px rgba(11,75,117,.12); transition:.2s; }
.top-action { min-height:38px; padding:0 16px; font-size:14px; }
.main-btn { min-height:46px; padding:0 26px; margin-top:12px; }
.top-action:hover, .main-btn:hover { background:#0b4b75; color:#fff; transform:translateY(-1px); }
.mobile-nav { display:none; padding:8px 16px 18px; background:#fff; border-top:1px solid #edf3f7; grid-template-columns:repeat(2,1fr); gap:8px; }
.mobile-nav.open { display:grid; }
.mobile-nav a { padding:10px 12px; border-radius:14px; background:#f6fbfe; color:var(--blue); font-weight:700; font-size:14px; }
.mobile-nav a.active, .desktop-nav a.active { background:var(--primary); color:#06233a; }
.desktop-header { display:none; height:76px; align-items:center; gap:22px; }
.desktop-logo { flex:0 0 auto; }
.desktop-nav { flex:1; display:flex; justify-content:center; gap:6px; }
.desktop-nav a { padding:10px 13px; border-radius:999px; color:#23384e; font-weight:700; font-size:14px; }
.desktop-nav a:hover { background:#eef8fd; color:var(--blue); }
.search-icon { width:36px; height:36px; border:1px solid #dcebf3; border-radius:50%; position:relative; flex:0 0 auto; }
.search-icon:before { content:""; width:12px; height:12px; border:2px solid var(--blue); border-radius:50%; position:absolute; left:9px; top:8px; }
.search-icon:after { content:""; width:9px; height:2px; background:var(--blue); position:absolute; left:21px; top:22px; transform:rotate(45deg); border-radius:2px; }
section { padding:52px 0; }
.sports-hero, .page-hero { background:linear-gradient(180deg,#f6fbfe 0%,#fff 100%); }
.hero-grid { display:grid; gap:28px; align-items:center; }
.badge, .category-badge { display:inline-flex; align-items:center; width:max-content; padding:6px 12px; border-radius:999px; background:#eaf7fe; color:var(--blue); font-weight:800; font-size:13px; }
h1 { margin:14px 0 12px; font-size:clamp(32px,7vw,58px); line-height:1.15; color:var(--deep); letter-spacing:-.02em; }
h2 { margin:0 0 14px; font-size:clamp(24px,4vw,36px); line-height:1.25; color:var(--deep); }
h3 { margin:0 0 8px; color:var(--deep); }
.lead, .page-summary { font-size:17px; color:#435568; margin:0 0 14px; }
.hero-tags { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 8px; }
.hero-tags span, .service-tag, .status { display:inline-flex; padding:6px 10px; border-radius:999px; background:#eef8fd; color:var(--blue); font-weight:800; font-size:12px; }
.hero-visual { position:relative; border-radius:26px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 50px rgba(9,36,61,.10); background:#fff; }
.hero-visual img { width:100%; min-height:260px; object-fit:cover; }
.hero-data-cards { display:grid; gap:12px; margin-top:16px; }
.hero-data-card, .sports-card, .service-card, .info-card, .faq-item, .score-card, .data-panel { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 10px 28px rgba(9,36,61,.06); }
.hero-data-card strong { font-size:24px; color:var(--blue); display:block; }
.category-grid, .service-grid, .info-grid, .faq-grid, .score-grid { display:grid; gap:16px; }
.section-head { margin-bottom:24px; max-width:760px; }
.card-link { display:inline-flex; margin-top:10px; color:var(--blue); font-weight:800; }
.split, .app-showcase, .score-panel, .security-section { display:grid; gap:26px; align-items:center; }
.split img, .app-showcase img, .score-panel img { border-radius:24px; border:1px solid var(--line); box-shadow:0 18px 36px rgba(9,36,61,.08); background:#fff; }
.data-list, .checklist { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.data-list li, .checklist li { padding:12px 14px; border-radius:14px; background:#f6fbfe; border:1px solid #e5f2f8; color:#31465a; }
.score-card { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.score-card strong { color:var(--deep); }
.score-card .score { font-size:24px; color:var(--blue); font-weight:900; white-space:nowrap; }
.responsible-play-section { background:#eaf7fe; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.responsible-box { background:#fff; border-radius:22px; border:1px solid var(--line); padding:22px; }
.cta-section { background:var(--deep); color:#fff; text-align:center; }
.cta-section h2 { color:#fff; }
.cta-section p { color:#d7e8f2; max-width:760px; margin:0 auto 10px; }
.page-hero { padding:54px 0 38px; }
.content-section { background:#fff; }
.content-layout { display:grid; gap:20px; }
.site-footer { background:var(--deep); color:#d9e8f1; padding:48px 0 22px; }
.footer-grid { display:grid; gap:28px; }
.footer-logo { height:44px; width:auto; margin-bottom:16px; }
.footer-brand p { color:#d9e8f1; margin:0; }
.site-footer h3 { color:#fff; }
.site-footer a { display:block; color:#d9e8f1; margin:8px 0; }
.footer-note { margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:#b9cedc; }
@media (min-width: 700px) {
  .hero-data-cards, .category-grid, .service-grid, .info-grid, .faq-grid { grid-template-columns:repeat(2,1fr); }
  .score-grid { grid-template-columns:repeat(2,1fr); }
  .split, .app-showcase, .score-panel, .security-section, .content-layout { grid-template-columns:1fr 1fr; }
}
@media (min-width: 1024px) {
  .mobile-header, .mobile-nav { display:none !important; }
  .desktop-header { display:flex; }
  section { padding:76px 0; }
  .hero-grid { grid-template-columns:1.05fr .95fr; }
  .hero-data-cards, .category-grid, .service-grid, .info-grid { grid-template-columns:repeat(3,1fr); }
  .faq-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1.4fr .8fr .8fr .8fr; }
}