/* roulang page: index */
:root {
      --brand: #0A8F3C;
      --brand-dark: #077A30;
      --hot: #E8551A;
      --hot-dark: #c44514;
      --deep: #1B1E1D;
      --deep-soft: #252827;
      --deep-dark: #151716;
      --warm: #F5F3EE;
      --warm-light: #fafaf8;
      --text-main: #1f1f1f;
      --text-weak: #6b6b6b;
      --border-light: #e5e5e5;
      --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
      --shadow-hover: 0 8px 24px rgba(0,0,0,0.10);
      --radius-card: 12px;
      --radius-btn: 8px;
      --radius-score: 16px;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
      font-weight: 400;
      line-height: 1.75;
      color: var(--text-main);
      background-color: #fff;
      -webkit-font-smoothing: antialiased;
    }
    a, button, input, textarea { font-family: inherit; }
    img { max-width: 100%; display: block; }
    .container-main { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }

    /* 导航吸顶与频道 */
    .header-sticky { position: sticky; top: 0; z-index: 50; transition: background 0.3s ease; }
    .header-bg { background: rgba(27,30,29,0.92); backdrop-filter: blur(12px); }
    .nav-brand { font-size: 1.5rem; font-weight: 700; color: var(--brand); letter-spacing: 0.5px; }
    .nav-channel { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; }
    .nav-channel::-webkit-scrollbar { display: none; }
    .channel-link {
      display: inline-block; padding: 0.25rem 0.2rem; margin-right: 2rem; font-size: 0.9rem; font-weight: 500;
      color: #aaa; text-decoration: none; border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s;
      letter-spacing: 0.4px;
    }
    .channel-link:hover, .channel-link.active { color: var(--brand); border-bottom-color: var(--brand); }

    /* Hero 背景 */
    .hero-bg { background: linear-gradient(135deg, #1B1E1D 0%, #2d302f 100%); position: relative; overflow: hidden; }
    .hero-bg::before { content: ''; position: absolute; inset: 0; background: url('/assets/images/backpic/back-1.webp') center/cover no-repeat; opacity: 0.2; mix-blend-mode: overlay; }
    .hero-content { position: relative; z-index: 2; }

    /* 比分卡片 */
    .score-card {
      background: #252827; border-radius: var(--radius-score); padding: 1.5rem;
      transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      min-width: 260px; flex-shrink: 0;
    }
    .score-card:hover { transform: scale(1.03); box-shadow: 0 8px 24px rgba(234,85,26,0.2); }
    .live-dot { width: 10px; height: 10px; background: var(--hot); border-radius: 50%; display: inline-block; animation: pulse 1.4s infinite; }
    @keyframes pulse { 0%{opacity:1;transform:scale(1);}50%{opacity:0.6;transform:scale(1.3);}100%{opacity:1;transform:scale(1);} }

    /* 服务区交替 */
    .service-row { display: flex; align-items: center; gap: 2.5rem; margin-bottom: 4rem; }
    .service-row.reverse { flex-direction: row-reverse; }
    .service-img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }

    /* FAQ 手风琴 */
    .faq-item { border-bottom: 1px solid var(--border-light); }
    .faq-question { cursor: pointer; padding: 1.2rem 0; display: flex; align-items: baseline; gap: 1rem; font-weight: 500; font-size: 1.1rem; transition: color 0.2s; }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; color: #555; line-height: 1.7; }
    .faq-item.open .faq-answer { max-height: 260px; padding-bottom: 1.2rem; }
    .faq-index { width: 28px; height: 28px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; color: #666; flex-shrink: 0; transition: 0.2s; }
    .faq-item.open .faq-index { background: var(--brand); color: white; }

    /* 表单底部线条 */
    .input-line { border: none; border-bottom: 2px solid #d1d1d1; border-radius: 0; padding: 0.7rem 0.2rem; width: 100%; background: transparent; transition: border-color 0.2s; outline: none; font-size: 1rem; }
    .input-line:focus { border-bottom: 2px solid var(--brand); }
    .btn-primary { background: var(--brand); color: white; border-radius: var(--radius-btn); padding: 0.75rem 2rem; font-weight: 600; transition: 0.2s; display: inline-block; text-decoration: none; border: none; cursor: pointer; }
    .btn-primary:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(10,143,60,0.3); }
    .btn-outline { border: 2px solid var(--brand); color: var(--brand); background: transparent; border-radius: var(--radius-btn); padding: 0.65rem 1.8rem; font-weight: 600; transition: 0.2s; text-decoration: none; display: inline-block; }
    .btn-outline:hover { background: rgba(10,143,60,0.08); }
    .btn-hot { background: var(--hot); color: white; border-radius: var(--radius-btn); padding: 0.6rem 1.4rem; font-weight: 600; border: none; cursor: pointer; transition: 0.2s; }
    .btn-hot:hover { background: var(--hot-dark); }

    @media (max-width: 1023px) {
      .service-row, .service-row.reverse { flex-direction: column; }
      .score-card { min-width: 200px; }
    }
    @media (max-width: 767px) {
      .hero-flex { flex-direction: column; }
      .score-card { min-width: 80%; }
    }