/* roulang page: index */
:root {
            --primary: #1B2A24;
            --primary-dark: #0F1A16;
            --primary-light: #2D423A;
            --accent: #F5A623;
            --accent-dark: #D48A1D;
            --accent-light: #F8C66B;
            --bg: #F7F5F0;
            --text: #1A1A1A;
            --text-secondary: #6B6B6B;
            --border: rgba(0, 0, 0, 0.08);
            --white: #FFFFFF;
            --radius: 16px;
            --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: all 0.2s ease;
        }

        button {
            font-family: inherit;
            cursor: pointer;
        }

        /* 场地线装饰 */
        .courtline {
            border-top: 3px double rgba(0, 0, 0, 0.15);
            position: relative;
        }

        .courtline::after {
            content: '';
            position: absolute;
            top: -3px;
            left: 0;
            width: 56px;
            height: 3px;
            background: var(--accent);
        }

        /* 聚光灯效果 */
        .spotlight::before {
            content: '';
            position: absolute;
            top: -60%;
            right: -10%;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(245, 166, 35, 0.15) 0%, transparent 70%);
            pointer-events: none;
        }

        /* 斜切角 */
        .clip-corner {
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
        }

        .clip-corner-sm {
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
        }

        /* 记分牌数字 */
        .score-number {
            font-weight: 900;
            font-style: italic;
            letter-spacing: -0.02em;
            color: var(--accent);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(245, 166, 35, 0.2);
        }

        /* 卡片渐变边框 */
        .card-gradient {
            position: relative;
            background: linear-gradient(135deg, rgba(245, 166, 35, 0.12) 0%, transparent 40%);
        }

        /* FAQ动画 */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
        }

        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }

        .faq-icon {
            transition: transform 0.3s ease;
        }

        /* 导航搜索框 */
        .nav-search input:focus {
            box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.25);
            border-color: var(--accent);
            outline: none;
        }

        /* 移动端菜单 */
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .mobile-menu.open {
            max-height: 500px;
        }

        /* 数字动画 */
        @keyframes pulse-glow {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

        .pulse-glow {
            animation: pulse-glow 2s ease-in-out infinite;
        }

        /* 图片兜底 */
        .img-fallback {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 700;
            font-size: 18px;
            min-height: 180px;
        }

        /* 焦点可见性 */
        :focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* 预约弹窗 */
        .modal-overlay {
            display: none;
        }

        .modal-overlay.show {
            display: flex;
        }

        /* 主按钮 */
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--accent);
            color: #1A1A1A;
            font-weight: 700;
            padding: 12px 32px;
            border-radius: 9999px;
            transition: all 0.2s ease;
            border: none;
            font-size: 16px;
        }

        .btn-primary:hover {
            background: var(--accent-dark);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(245, 166, 35, 0.4);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: #fff;
            font-weight: 600;
            padding: 12px 32px;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.4);
            transition: all 0.2s ease;
            font-size: 16px;
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: #fff;
            transform: translateY(-2px);
        }

        .btn-secondary:active {
            transform: translateY(0);
        }

        /* 卡片hover */
        .feature-card {
            transition: all 0.2s ease;
        }

        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: var(--accent);
        }

        /* 数据分隔线 */
        .data-divider {
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 768px) {
            .data-divider {
                border-left: none;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }
        }

        /* 条纹背景 */
        .striped-bg {
            background-image: repeating-linear-gradient(45deg,
                rgba(255, 255, 255, 0.02) 0px,
                rgba(255, 255, 255, 0.02) 2px,
                transparent 2px,
                transparent 8px);
        }

/* roulang page: index */
:root {
  --color-primary: #1B2A24;
  --color-accent: #F5A623;
  --color-bg: #F7F5F0;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B6B;
  --color-border: rgba(0,0,0,0.08);
  --radius-card: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-hover: 0 10px 30px rgba(0,0,0,0.1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

.container-site { max-width:1280px; margin:0 auto; padding-left:16px; padding-right:16px; }
@media(min-width:1024px){ .container-site { padding-left:32px; padding-right:32px; } }

.nav-link {
  position:relative; font-weight:600; font-size:15px; color:#333;
  padding:6px 2px; transition:color .2s ease;
}
.nav-link::after {
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--color-accent); transition:width .2s ease; border-radius:2px;
}
.nav-link:hover { color:var(--color-accent); }
.nav-link.active { color:var(--color-primary); }
.nav-link.active::after { width:100%; }

.btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-accent); color:#1A1A1A; font-weight:700;
  padding:10px 24px; border-radius:9999px; font-size:15px;
  transition:all .2s ease; border:2px solid transparent;
}
.btn-primary:hover { background:#e0961a; transform:translateY(-2px); box-shadow:0 6px 20px rgba(245,166,35,0.35); }
.btn-primary:active { transform:translateY(0); }

.btn-outline-white {
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#fff; font-weight:600;
  padding:10px 24px; border-radius:9999px; font-size:15px;
  border:1.5px solid rgba(255,255,255,0.4); transition:all .2s ease;
}
.btn-outline-white:hover { background:rgba(255,255,255,0.1); border-color:var(--color-accent); color:var(--color-accent); transform:translateY(-2px); }

.btn-dark {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-primary); color:#fff; font-weight:700;
  padding:10px 24px; border-radius:9999px; font-size:15px;
  transition:all .2s ease; border:2px solid transparent;
}
.btn-dark:hover { background:#2a3f36; transform:translateY(-2px); box-shadow:0 6px 20px rgba(27,42,36,0.3); }

.btn-full { width:100%; }

.badge-accent {
  display:inline-block; background:rgba(245,166,35,0.15); color:var(--color-accent);
  font-weight:700; font-size:13px; padding:4px 14px; border-radius:9999px; letter-spacing:0.02em;
}

.scoreboard-card {
  position:relative;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:20px;
  padding:28px 30px;
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));
}
.scoreboard-card .scoreboard-tag {
  position:absolute; top:14px; right:18px;
  background:var(--color-accent); color:#1a1a1a;
  font-size:12px; font-weight:800; padding:2px 12px; border-radius:9999px; letter-spacing:0.03em;
}

.feature-img { position:relative; overflow:hidden; background:var(--color-primary); border-radius:14px 14px 0 0; }
.feature-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.feature-card:hover .feature-img img { transform:scale(1.05); }
.feature-img .img-fallback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.55); font-size:14px; font-weight:600; z-index:0;
}
.feature-img img { position:relative; z-index:1; }

.feature-card {
  background:#fff; border-radius:var(--radius-card); overflow:hidden;
  border:1px solid var(--color-border); box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(245,166,35,0.4);
}
.feature-img-wrap { position:relative; aspect-ratio:16/9; }
.feature-num {
  position:absolute; top:10px; left:10px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:var(--color-accent); color:#1a1a1a;
  font-weight:900; font-size:16px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(245,166,35,0.4);
}
.feature-img-wrap::after {
  content:''; position:absolute; top:0; right:0;
  width:40px; height:40px;
  background:linear-gradient(135deg,transparent 50%,rgba(245,166,35,0.6) 50%);
}

.scenario-row {
  display:grid; grid-template-columns:1fr; gap:20px; align-items:center;
  padding:40px 0; border-bottom:1px dashed rgba(0,0,0,0.08);
}
.scenario-row:last-child { border-bottom:none; }
@media(min-width:1024px){
  .scenario-row { grid-template-columns:1fr 1.2fr; gap:60px; padding:56px 0; }
}
.scenario-num {
  font-size:76px; font-weight:900; line-height:1; color:var(--color-accent);
  font-style:italic; letter-spacing:-0.02em; opacity:0.9;
  -webkit-text-stroke:1.5px rgba(245,166,35,0.2);
  font-family:Georgia,'Times New Roman',serif;
}
@media(min-width:1024px){ .scenario-num { font-size:110px; } }

.data-band {
  background:var(--color-primary); border-radius:20px; padding:40px 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
@media(min-width:1024px){ .data-band { grid-template-columns:repeat(4,1fr); padding:56px 40px; } }
.data-item { text-align:center; position:relative; }
@media(min-width:1024px){
  .data-item:not(:last-child)::after {
    content:''; position:absolute; right:0; top:20%; height:60%;
    width:1px; background:rgba(255,255,255,0.1);
  }
}
.data-number {
  font-size:42px; font-weight:900; color:var(--color-accent);
  font-style:italic; letter-spacing:-0.01em; line-height:1.1;
  font-family:Georgia,'Times New Roman',serif;
}
@media(min-width:1024px){ .data-number { font-size:56px; } }

.price-card {
  position:relative; background:#fff; border-radius:var(--radius-card);
  border:1px solid var(--color-border); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; height:100%;
}
.price-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.price-card.recommended {
  border-color:rgba(245,166,35,0.5);
  box-shadow:0 8px 30px rgba(245,166,35,0.12);
}
.price-top-band { height:6px; }
.price-card.recommended .price-top-band { background:var(--color-accent); }
.price-card .price-top-band { background:#e5e5e5; }
.price-card.recommended .price-top-band.vip { background:var(--color-primary); }
.price-card .price-top-band.vip { background:#333; }

.recommend-badge {
  position:absolute; top:16px; right:-32px; z-index:10;
  background:var(--color-accent); color:#1a1a1a;
  font-size:12px; font-weight:800; padding:4px 36px;
  transform:rotate(38deg); letter-spacing:0.05em;
  box-shadow:0 2px 8px rgba(245,166,35,0.3);
}

.faq-item {
  border:1px solid var(--color-border); border-radius:14px;
  background:#fff; margin-bottom:12px; overflow:hidden;
  transition:box-shadow .2s ease;
}
.faq-item:hover { box-shadow:var(--shadow-sm); }
.faq-btn {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; text-align:left; background:none; border:none;
  font-size:16px; font-weight:700; color:var(--color-text); cursor:pointer;
  transition:color .2s ease;
}
.faq-btn:hover { color:var(--color-accent); }
.faq-icon {
  flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:2px solid rgba(0,0,0,0.15); transition:all .3s ease;
  margin-left:16px;
}
.faq-item.active .faq-icon {
  transform:rotate(45deg); border-color:var(--color-accent); color:var(--color-accent);
}
.faq-content {
  max-height:0; overflow:hidden; transition:max-height .35s ease;
}
.faq-answer {
  padding:0 24px 20px 24px; color:var(--color-text-muted);
  font-size:15px; line-height:1.75;
  border-left:3px solid var(--color-accent); margin-left:24px; margin-right:24px;
  padding-top:0; padding-bottom:18px; margin-bottom:0; border-radius:0 4px 4px 0;
}
.faq-answer p { margin-bottom:0.75em; }
.faq-answer p:last-child { margin-bottom:0; }

.news-list li {
  padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.06);
  transition:padding-left .2s ease;
}
.news-list li:hover { padding-left:8px; }
.news-list a { display:flex; gap:12px; align-items:flex-start; }
.news-list .date {
  flex-shrink:0; background:var(--color-bg); border:1px solid var(--color-border);
  border-radius:10px; padding:4px 10px; font-size:12px; font-weight:600; color:var(--color-text-muted);
  text-align:center; line-height:1.3;
}
.news-list .title { font-weight:600; font-size:15px; line-height:1.5; color:var(--color-text); transition:color .2s ease; }
.news-list a:hover .title { color:var(--color-accent); }

#back-top {
  position:fixed; bottom:30px; right:30px; z-index:50;
  width:44px; height:44px; border-radius:50%;
  background:var(--color-primary); color:var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  border:none; cursor:pointer; transition:all .2s ease;
  opacity:0; visibility:hidden;
}
#back-top.show { opacity:1; visibility:visible; }
#back-top:hover { background:var(--color-accent); color:var(--color-primary); transform:translateY(-4px); }

:focus-visible {
  outline:2px solid var(--color-accent); outline-offset:2px;
}

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }

.hero-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:40px 40px;
}

.mobile-nav { font-weight:600; font-size:15px; padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.04); }
.mobile-nav:hover { color:var(--color-accent); }