/* roulang page: index */
/* ============================================
   设计 Token / CSS Custom Properties
   ============================================ */
:root {
  --color-accent: #16a34a;
  --color-accent-dark: #15803d;
  --color-accent-light: rgba(22,163,74,0.12);
  --color-gold: #d97706;
  --color-gold-bg: rgba(217,119,6,0.15);
  --color-bg: #0f0f0f;
  --color-surface: #1a1a1a;
  --color-surface-2: #222222;
  --color-border: #2e2e2e;
  --color-text: #f0f0f0;
  --color-text-muted: #a3a3a3;
  --color-text-faint: #6b7280;
  --color-danger: #ef4444;
  --radius-lg: 16px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.6);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.7);
  --shadow-nav: 0 4px 20px rgba(0,0,0,0.8);
  --shadow-glow: 0 0 12px rgba(22,163,74,0.4);
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --section-pad: 80px;
  --container-max: 1280px;
  --font-stack: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* ============================================
   Reset & Base
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-stack);
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:var(--color-accent);text-decoration:none;transition:color 180ms ease}
a:hover{color:var(--color-accent-dark)}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}
ul,ol{list-style:none}

/* ============================================
   Container
   ============================================ */
.site-container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--space-sm);
}
@media(min-width:768px){.site-container{padding:0 32px}}

/* ============================================
   Typography
   ============================================ */
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.15}
h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;line-height:1.25}
h3{font-size:1.25rem;font-weight:600;line-height:1.4}
h4{font-size:1.0625rem;font-weight:600}
.text-accent{color:var(--color-accent)}
.text-gold{color:var(--color-gold)}
.text-muted-custom{color:var(--color-text-muted)}
.section-label{
  display:inline-block;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-accent);
  background:var(--color-accent-light);
  border:1px solid var(--color-accent);
  border-radius:var(--radius-sm);
  padding:3px 10px;
  margin-bottom:12px;
}
.section-title{color:var(--color-text);margin-bottom:8px}
.section-desc{color:var(--color-text-muted);font-size:0.9375rem;max-width:600px}

/* ============================================
   Buttons
   ============================================ */
.btn-primary-custom{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--color-accent);
  color:#0f0f0f;
  font-weight:700;font-size:0.9375rem;
  border:none;border-radius:var(--radius-md);
  padding:12px 28px;cursor:pointer;
  transition:background 180ms ease,transform 180ms ease,box-shadow 180ms ease;
  text-decoration:none;white-space:nowrap;
}
.btn-primary-custom:hover{
  background:var(--color-accent-dark);
  color:#0f0f0f;
  transform:scale(1.03);
  box-shadow:var(--shadow-glow);
}
.btn-primary-custom:active{transform:scale(0.98)}
.btn-primary-custom:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.btn-primary-custom:disabled{opacity:0.45;cursor:not-allowed;transform:none}

.btn-outline-custom{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  color:var(--color-accent);
  font-weight:600;font-size:0.9375rem;
  border:1.5px solid var(--color-accent);
  border-radius:var(--radius-md);
  padding:11px 28px;cursor:pointer;
  transition:background 180ms ease,color 180ms ease,transform 180ms ease;
  text-decoration:none;white-space:nowrap;
}
.btn-outline-custom:hover{
  background:var(--color-accent);
  color:#0f0f0f;
  transform:scale(1.02);
}
.btn-outline-custom:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

/* ============================================
   Badges
   ============================================ */
.badge-live{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--color-gold);
  color:#0f0f0f;
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.06em;
  border-radius:var(--radius-sm);
  padding:2px 8px;
  text-transform:uppercase;
}
.badge-live::before{
  content:'';display:block;
  width:6px;height:6px;
  background:#0f0f0f;
  border-radius:50%;
  animation:pulsedot 1.2s ease-in-out infinite;
}
@keyframes pulsedot{0%,100%{opacity:1}50%{opacity:0.3}}

.badge-cat{
  display:inline-block;
  background:var(--color-accent-light);
  color:var(--color-accent);
  border:1px solid var(--color-accent);
  border-radius:var(--radius-sm);
  font-size:0.75rem;font-weight:600;
  padding:2px 8px;
}

/* ============================================
   Cards
   ============================================ */
.card-custom{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  box-shadow:var(--shadow-card);
  transition:transform 200ms ease,box-shadow 200ms ease,border-color 200ms ease;
}
.card-custom:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(22,163,74,0.35);
}
.card-custom-2{background:var(--color-surface-2)}

/* ============================================
   Navigation (Floating Rounded)
   ============================================ */
#site-header{
  position:fixed;top:16px;left:50%;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:calc(var(--container-max) - 32px);
  z-index:1000;
  transition:top 250ms ease,background 250ms ease,box-shadow 250ms ease;
}
.nav-inner{
  background:rgba(15,15,15,0.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-nav);
  padding:0 var(--space-md);
  display:flex;align-items:center;
  height:60px;gap:var(--space-sm);
}
#site-header.scrolled .nav-inner{
  background:rgba(15,15,15,0.96);
  box-shadow:0 6px 28px rgba(0,0,0,0.9);
}
.nav-logo{
  font-size:1.125rem;font-weight:800;
  color:var(--color-accent);
  text-decoration:none;white-space:nowrap;
  flex-shrink:0;
  transition:opacity 150ms;
}
.nav-logo:hover{opacity:0.85;color:var(--color-accent)}
.nav-links{
  display:flex;align-items:center;
  gap:4px;flex:1;justify-content:center;
}
.nav-links a{
  position:relative;
  color:var(--color-text);
  font-size:0.9375rem;
  font-weight:500;
  padding:6px 12px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  transition:color 180ms ease,background 180ms ease;
  white-space:nowrap;
}
.nav-links a::after{
  content:'';position:absolute;
  bottom:2px;left:12px;right:12px;
  height:2px;background:var(--color-accent);
  transform:scaleX(0);transform-origin:center;
  transition:transform 250ms ease;
  border-radius:1px;
}
.nav-links a:hover{color:var(--color-accent);background:var(--color-accent-light)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active{color:var(--color-accent)}
.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{flex-shrink:0}
.hamburger{
  display:none;
  background:none;border:none;
  color:var(--color-text);
  font-size:1.5rem;cursor:pointer;
  padding:6px;border-radius:var(--radius-sm);
  transition:color 150ms;
  margin-left:auto;
}
.hamburger:hover{color:var(--color-accent)}
.mobile-menu{
  display:none;
  position:fixed;inset:0;z-index:999;
  background:rgba(15,15,15,0.97);
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:var(--space-sm);
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  color:var(--color-text);
  font-size:1.25rem;font-weight:600;
  padding:12px 32px;
  border-radius:var(--radius-md);
  text-decoration:none;
  transition:background 150ms,color 150ms;
}
.mobile-menu a:hover{background:var(--color-accent-light);color:var(--color-accent)}
.mobile-menu-close{
  position:absolute;top:24px;right:24px;
  background:none;border:none;
  color:var(--color-text-muted);font-size:2rem;
  cursor:pointer;
}
@media(max-width:991px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .hamburger{display:block}
}
@media(max-width:575px){
  #site-header{top:10px;width:calc(100% - 20px)}
  .nav-inner{padding:0 16px;height:54px}
}

/* ============================================
   Hero Section
   ============================================ */
.hero-section{
  min-height:100vh;
  display:flex;align-items:center;
  position:relative;
  overflow:hidden;
  padding:120px 0 80px;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(22,163,74,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(22,163,74,0.05) 0%, transparent 50%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 38px,
      rgba(22,163,74,0.025) 38px,
      rgba(22,163,74,0.025) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 58px,
      rgba(22,163,74,0.02) 58px,
      rgba(22,163,74,0.02) 60px
    ),
    var(--color-bg);
}
.hero-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 100%, rgba(22,163,74,0.06) 0%, transparent 60%);
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--color-accent-light);
  border:1px solid var(--color-accent);
  border-radius:40px;
  padding:4px 14px;
  font-size:0.8125rem;font-weight:700;
  color:var(--color-accent);
  letter-spacing:0.04em;
  margin-bottom:20px;
}
.hero-title{
  font-size:clamp(2.2rem,6vw,3.75rem);
  font-weight:900;
  line-height:1.1;
  color:var(--color-text);
  margin-bottom:16px;
}
.hero-title .hl{color:var(--color-accent)}
.hero-subtitle{
  font-size:1.0625rem;
  color:var(--color-text-muted);
  max-width:520px;
  margin-bottom:32px;
  line-height:1.7;
}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.hero-stats{
  display:flex;gap:var(--space-md);
  flex-wrap:wrap;
}
.hero-stat-pill{
  display:flex;align-items:center;gap:8px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:40px;
  padding:8px 16px;
  font-size:0.875rem;
}
.hero-stat-pill .num{font-weight:800;color:var(--color-accent);font-variant-numeric:tabular-nums}
.hero-stat-pill .lbl{color:var(--color-text-muted)}
.hero-right-panel{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  box-shadow:0 2px 40px rgba(0,0,0,0.5);
}
.hero-match-preview{
  display:flex;flex-direction:column;gap:12px;
}
.hmp-item{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:12px 16px;gap:12px;
}
.hmp-teams{flex:1;font-weight:600;font-size:0.9375rem}
.hmp-time{font-size:0.8125rem;color:var(--color-text-muted)}
@media(max-width:991px){
  .hero-right-panel{margin-top:48px}
}

/* ============================================
   Section spacing / alternating
   ============================================ */
.section-block{padding:var(--section-pad) 0}
.section-block.surface-bg{background:var(--color-surface)}
.section-block.surface2-bg{background:var(--color-surface-2)}
.section-border{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
@media(max-width:767px){
  .section-block{padding:var(--space-lg) 0}
}

/* ============================================
   Data Dashboard (板块2)
   ============================================ */
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-sm);
}
@media(max-width:991px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.dashboard-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.dash-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:28px var(--space-md);
  text-align:center;
  box-shadow:var(--shadow-card);
  transition:transform 200ms ease,box-shadow 200ms ease;
}
.dash-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.dash-num{
  display:block;
  font-size:clamp(2rem,4vw,2.75rem);
  font-weight:800;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
  margin-bottom:10px;
}
.dash-divider{
  width:32px;height:2px;
  background:var(--color-accent);
  border-radius:1px;
  margin:0 auto 10px;
}
.dash-label{color:var(--color-text-muted);font-size:0.875rem}

/* ============================================
   Match Schedule Horizontal Scroll (板块3)
   ============================================ */
.schedule-scroll-wrap{
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--color-border) transparent;
  padding-bottom:12px;
  cursor:grab;
}
.schedule-scroll-wrap:active{cursor:grabbing}
.schedule-scroll-inner{
  display:flex;gap:16px;
  min-width:max-content;
  padding:4px 2px 4px;
}
.match-card{
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:20px;
  width:230px;flex-shrink:0;
  position:relative;
  transition:transform 200ms ease,border-color 200ms ease,box-shadow 200ms ease;
  box-shadow:var(--shadow-card);
}
.match-card:hover{
  transform:translateY(-3px);
  border-color:rgba(22,163,74,0.4);
  box-shadow:var(--shadow-hover);
}
.match-card-header{
  display:flex;justify-content:space-between;
  align-items:flex-start;margin-bottom:16px;
}
.match-round{font-size:0.75rem;color:var(--color-text-faint)}
.match-teams{
  text-align:center;
  font-size:1rem;font-weight:700;
  margin-bottom:8px;
  line-height:1.4;
}
.match-vs{
  display:block;
  color:var(--color-text-faint);font-size:0.75rem;font-weight:400;
  margin:4px 0;
}
.match-time{
  text-align:center;
  font-size:0.8125rem;color:var(--color-text-muted);
  margin-bottom:16px;
}
.match-card .badge-live{position:absolute;top:16px;right:16px}

/* ============================================
   Service Matrix (板块4)
   ============================================ */
.service-matrix-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:16px;
}
.service-large{
  grid-column:1;
  grid-row:1/3;
}
.service-small{grid-column:2}
@media(max-width:767px){
  .service-matrix-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .service-large{grid-column:1;grid-row:auto}
  .service-small{grid-column:1}
}
.service-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  height:100%;
  box-shadow:var(--shadow-card);
  transition:transform 200ms ease,box-shadow 200ms ease;
}
.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.service-card .feature-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.feature-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.9375rem;color:var(--color-text-muted);
  padding-left:12px;
  border-left:2px solid var(--color-accent);
  line-height:1.5;
}

/* ============================================
   Team Grid (板块5)
   ============================================ */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media(max-width:767px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.team-grid{grid-template-columns:1fr}}
.team-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:24px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color 200ms ease,transform 200ms ease,box-shadow 200ms ease;
  box-shadow:var(--shadow-card);
}
.team-card:hover{
  border-color:var(--color-accent);
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}
.team-dot{
  width:36px;height:36px;
  border-radius:50%;
  margin:0 auto 12px;
  border:2px solid var(--color-border);
}
.team-name{font-weight:700;font-size:1rem;margin-bottom:10px}
.team-link{
  font-size:0.8125rem;color:var(--color-accent);
  font-weight:500;
  text-decoration:none;
  transition:text-decoration 150ms;
}
.team-link:hover{text-decoration:underline;color:var(--color-accent)}

/* ============================================
   Quality Compare (板块6)
   ============================================ */
.quality-row{
  display:flex;flex-direction:column;gap:20px;
  margin-bottom:var(--space-md);
}
.quality-item{}
.quality-header{
  display:flex;justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.quality-label{font-weight:600;font-size:0.9375rem}
.quality-tag{
  font-size:0.75rem;
  background:var(--color-accent-light);
  color:var(--color-accent);
  border-radius:var(--radius-sm);
  padding:2px 8px;font-weight:600;
}
.quality-bar-bg{
  height:10px;
  background:var(--color-surface-2);
  border-radius:5px;
  overflow:hidden;
}
.quality-bar-fill{
  height:100%;
  background:var(--color-accent);
  border-radius:5px;
  transition:width 1s ease;
}
.quality-cards-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;margin-top:var(--space-md);
}
@media(max-width:575px){.quality-cards-row{grid-template-columns:1fr}}

/* ============================================
   Timeline / Milestones (板块7)
   ============================================ */
.timeline-wrap{
  position:relative;
  overflow-x:auto;
}
.timeline-desktop{
  display:flex;align-items:flex-start;
  gap:0;
  padding:var(--space-md) 0;
}
.tl-node{flex:1;min-width:160px;position:relative;padding:0 var(--space-sm)}
.tl-node::after{
  content:'';
  position:absolute;
  top:16px;left:calc(50% + 16px);
  right:calc(-50% + 16px);
  height:2px;
  background:var(--color-border);
}
.tl-node:last-child::after{display:none}
.tl-dot-wrap{display:flex;justify-content:center;margin-bottom:16px}
.tl-dot{
  width:32px;height:32px;
  background:var(--color-accent);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.tl-dot i{color:#0f0f0f;font-size:0.875rem}
.tl-year{
  text-align:center;
  font-size:0.875rem;font-weight:800;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
  margin-bottom:6px;
}
.tl-event{text-align:center;font-size:0.8125rem;color:var(--color-text-muted);line-height:1.5}
@media(max-width:767px){
  .timeline-desktop{flex-direction:column;gap:0;align-items:flex-start}
  .tl-node{min-width:auto;width:100%;padding:0 0 32px 48px;position:relative}
  .tl-node::after{
    left:15px;top:32px;bottom:0;
    width:2px;height:auto;right:auto;
  }
  .tl-dot-wrap{position:absolute;left:0;top:0}
  .tl-year{text-align:left}
  .tl-event{text-align:left}
}

/* ============================================
   News Layout (板块8)
   ============================================ */
.news-main-item{
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--color-border);
}
.news-main-item:last-child{border-bottom:none}
.news-date{
  flex-shrink:0;
  background:var(--color-surface-2);
  border-radius:var(--radius-sm);
  padding:4px 10px;
  font-size:0.75rem;color:var(--color-text-faint);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;align-self:flex-start;margin-top:3px;
}
.news-content{}
.news-title{
  font-size:1rem;font-weight:600;color:var(--color-text);
  margin-bottom:4px;line-height:1.5;
}
.news-title a{color:var(--color-text);text-decoration:none;transition:color 150ms}
.news-title a:hover{color:var(--color-accent)}
.news-excerpt{font-size:0.875rem;color:var(--color-text-muted);line-height:1.6}

.hot-list{display:flex;flex-direction:column;gap:0}
.hot-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--color-border);
}
.hot-item:last-child{border-bottom:none}
.hot-num{
  flex-shrink:0;
  width:22px;height:22px;
  background:var(--color-surface-2);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:700;
  color:var(--color-text-faint);
  margin-top:1px;
}
.hot-num.top{background:var(--color-accent);color:#0f0f0f}
.hot-title a{font-size:0.875rem;color:var(--color-text-muted);text-decoration:none;line-height:1.5}
.hot-title a:hover{color:var(--color-accent)}

/* ============================================
   Replay Grid (板块9)
   ============================================ */
.replay-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media(max-width:991px){.replay-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.replay-grid{grid-template-columns:1fr}}
.replay-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform 200ms ease,box-shadow 200ms ease;
}
.replay-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.replay-thumb{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background:var(--color-surface-2);
  overflow:hidden;
  transition:background 200ms ease;
}
.replay-card:hover .replay-thumb{background:rgba(22,163,74,0.15)}
.replay-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.play-btn{
  width:52px;height:52px;
  background:rgba(15,15,15,0.7);
  border:2px solid var(--color-accent);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background 200ms,transform 200ms;
}
.replay-card:hover .play-btn{background:var(--color-accent);transform:scale(1.08)}
.play-btn svg{fill:var(--color-accent);width:22px;height:22px;margin-left:3px;transition:fill 200ms}
.replay-card:hover .play-btn svg{fill:#0f0f0f}
.replay-body{padding:16px}
.replay-tag{font-size:0.75rem;color:var(--color-text-faint);margin-bottom:6px}
.replay-title{font-size:0.9375rem;font-weight:600;line-height:1.45;margin-bottom:4px}

/* ============================================
   Platform Guarantee (板块10)
   ============================================ */
.guarantee-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-md);
}
@media(max-width:991px){.guarantee-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.guarantee-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
.guarantee-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.guarantee-icon{
  width:48px;height:48px;
  background:var(--color-accent-light);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
}
.guarantee-icon i{font-size:1.375rem;color:var(--color-accent)}
.guarantee-title{font-weight:600;font-size:1rem;margin-bottom:4px}
.guarantee-desc{font-size:0.875rem;color:var(--color-text-muted);line-height:1.65}

/* ============================================
   How To Watch Steps (板块11)
   ============================================ */
.steps-row{
  display:flex;align-items:flex-start;
  gap:0;
}
.step-item{flex:1;padding:0 var(--space-sm);position:relative}
.step-arrow{
  display:flex;align-items:center;
  padding-top:28px;flex-shrink:0;
}
.step-arrow svg{fill:var(--color-accent);width:24px;height:24px}
.step-num{
  width:52px;height:52px;
  background:var(--color-accent);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;font-weight:900;color:#0f0f0f;
  margin-bottom:16px;
}
.step-title{font-weight:700;font-size:1rem;margin-bottom:8px}
.step-desc{font-size:0.875rem;color:var(--color-text-muted);line-height:1.65}
@media(max-width:767px){
  .steps-row{flex-direction:column;gap:32px}
  .step-arrow{display:none}
  .step-item{padding:0}
}

/* ============================================
   Category Entrance (板块12)
   ============================================ */
.cat-entry-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-md);
}
@media(max-width:767px){.cat-entry-grid{grid-template-columns:1fr}}
.cat-entry-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:36px var(--space-md);
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  box-shadow:var(--shadow-card);
  transition:transform 200ms ease,border-color 200ms ease,box-shadow 200ms ease;
}
.cat-entry-card:hover{
  transform:translateY(-3px);
  border-color:rgba(22,163,74,0.4);
  box-shadow:var(--shadow-hover);
}
.cat-entry-card .cat-icon{
  width:52px;height:52px;
  background:var(--color-accent-light);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
}
.cat-entry-card .cat-icon i{font-size:1.5rem;color:var(--color-accent)}
.cat-entry-card h3{margin-bottom:6px}
.cat-entry-card p{font-size:0.9375rem;color:var(--color-text-muted);line-height:1.65}

/* ============================================
   FAQ Accordion (板块13)
   ============================================ */
.faq-accordion .accordion-item{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md) !important;
  margin-bottom:10px;
  overflow:hidden;
}
.faq-accordion .accordion-button{
  background:var(--color-surface);
  color:var(--color-text);
  font-weight:600;font-size:0.9375rem;
  padding:18px 20px;
  box-shadow:none;
  border-left:4px solid transparent;
  transition:background 200ms,border-color 200ms;
}
.faq-accordion .accordion-button:not(.collapsed){
  background:var(--color-surface-2);
  color:var(--color-text);
  border-left-color:var(--color-accent);
  box-shadow:none;
}
.faq-accordion .accordion-button::after{
  filter:invert(1) brightness(0.6);
}
.faq-accordion .accordion-button:not(.collapsed)::after{
  filter:invert(0.4) sepia(1) saturate(5) hue-rotate(95deg);
}
.faq-accordion .accordion-button:focus{
  box-shadow:none;outline:2px solid var(--color-accent);outline-offset:-2px;
}
.faq-accordion .accordion-body{
  background:var(--color-surface);
  color:var(--color-text-muted);
  font-size:0.9375rem;
  line-height:1.75;
  padding:4px 20px 20px;
  border-top:1px solid var(--color-border);
}

/* ============================================
   Subscription Form (板块14)
   ============================================ */
.form-section-inner{
  max-width:520px;margin:0 auto;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:40px var(--space-md);
  box-shadow:var(--shadow-card);
}
.form-group-custom{margin-bottom:20px}
.form-label-custom{
  display:block;
  font-size:0.875rem;font-weight:600;
  color:var(--color-text);
  margin-bottom:6px;
}
.form-control-custom{
  width:100%;
  background:var(--color-surface-2);
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  color:var(--color-text);
  font-size:0.9375rem;
  padding:11px 14px;
  transition:border-color 180ms,box-shadow 180ms;
  outline:none;
  appearance:none;
}
.form-control-custom::placeholder{color:var(--color-text-faint)}
.form-control-custom:focus{
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(22,163,74,0.15);
}
.form-control-custom.is-error{
  border-color:var(--color-danger);
  box-shadow:0 0 0 3px rgba(239,68,68,0.15);
}
.form-error-msg{
  display:none;
  font-size:0.8125rem;color:var(--color-danger);
  margin-top:5px;
}
.form-error-msg::before{content:'⚠ '}
.form-control-custom.is-error + .form-error-msg{display:block}
.btn-submit-form{
  width:100%;
  background:var(--color-accent);
  color:#0f0f0f;
  font-weight:700;font-size:1rem;
  border:none;border-radius:var(--radius-md);
  padding:14px;cursor:pointer;
  transition:background 180ms,transform 150ms;
  margin-top:8px;
}
.btn-submit-form:hover{background:var(--color-accent-dark);transform:scale(1.01)}
.btn-submit-form:disabled{
  opacity:0.45;cursor:not-allowed;transform:none;
  background:var(--color-surface-2);color:var(--color-text-muted);
}

/* ============================================
   Article Cards (板块15)
   ============================================ */
.article-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-sm);
}
@media(max-width:991px){.article-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.article-grid{grid-template-columns:1fr}}
.article-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
  transition:transform 200ms ease,box-shadow 200ms ease;
}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.article-card-body{padding:20px;flex:1;display:flex;flex-direction:column;gap:10px}
.article-meta{display:flex;align-items:center;gap:8px}
.article-date{font-size:0.75rem;color:var(--color-text-faint)}
.article-card h3{font-size:1rem;line-height:1.5}
.article-card h3 a{color:var(--color-text);text-decoration:none;transition:color 150ms}
.article-card h3 a:hover{color:var(--color-accent)}
.article-excerpt{font-size:0.875rem;color:var(--color-text-muted);line-height:1.65;flex:1}

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background:#080808;
  border-top:1px solid var(--color-border);
  padding:60px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:48px;
  margin-bottom:48px;
}
@media(max-width:767px){.footer-grid{grid-template-columns:1fr;gap:32px}}
.footer-logo{font-size:1.125rem;font-weight:800;color:var(--color-accent);margin-bottom:12px;display:block}
.footer-about{font-size:0.875rem;color:var(--color-text-muted);line-height:1.75;max-width:300px}
.footer-col-title{
  font-size:0.8125rem;font-weight:700;
  color:var(--color-text-faint);
  letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:16px;
}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{
  font-size:0.875rem;color:var(--color-text-muted);
  text-decoration:none;
  transition:color 150ms;
}
.footer-links a:hover{color:var(--color-accent)}
.footer-bottom{
  border-top:1px solid var(--color-border);
  padding:20px 0;
  text-align:center;
  font-size:0.8rem;
  color:var(--color-text-faint);
  line-height:1.6;
}

/* ============================================
   Section Entry Animation
   ============================================ */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{transition:none !important;animation:none !important}
}

/* roulang page: category1 */
/* ============================================
   设计 Token / CSS Custom Properties
   ============================================ */
:root {
  --color-accent: #16a34a;
  --color-accent-dark: #15803d;
  --color-accent-light: rgba(22,163,74,0.12);
  --color-gold: #d97706;
  --color-gold-bg: rgba(217,119,6,0.15);
  --color-bg: #0f0f0f;
  --color-surface: #1a1a1a;
  --color-surface-2: #222222;
  --color-border: #2e2e2e;
  --color-text: #f0f0f0;
  --color-text-muted: #a3a3a3;
  --color-text-faint: #6b7280;
  --color-danger: #ef4444;
  --radius-lg: 16px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.6);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.7);
  --shadow-nav: 0 4px 20px rgba(0,0,0,0.8);
  --shadow-glow: 0 0 12px rgba(22,163,74,0.4);
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --section-pad: 80px;
  --container-max: 1280px;
  --font-stack: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-stack);
  font-size:1rem;
  line-height:1.75;
  margin:0;padding:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:var(--color-accent);text-decoration:none;transition:color 180ms ease}
a:hover{color:var(--color-accent-dark)}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}

/* ============================================
   Container
   ============================================ */
.site-container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 32px;
}
@media(max-width:768px){
  .site-container{padding:0 var(--space-sm)}
}

.text-accent{color:var(--color-accent)}
.text-gold{color:var(--color-gold)}
.text-muted-custom{color:var(--color-text-muted)}
.section-label{
  display:inline-block;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-accent);
  background:var(--color-accent-light);
  border:1px solid var(--color-accent);
  border-radius:var(--radius-sm);
  padding:3px 10px;
  margin-bottom:12px;
}
.section-title{color:var(--color-text);margin-bottom:8px}
.section-desc{color:var(--color-text-muted);font-size:0.9375rem;max-width:600px}

/* ============================================
   Buttons
   ============================================ */
.btn-primary-custom{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--color-accent);
  color:#0f0f0f;
  font-weight:700;font-size:0.9375rem;
  border:none;border-radius:var(--radius-md);
  padding:12px 28px;cursor:pointer;
  transition:background 180ms ease,transform 180ms ease,box-shadow 180ms ease;
  text-decoration:none;white-space:nowrap;
}
.btn-primary-custom:hover{
  background:var(--color-accent-dark);
  color:#0f0f0f;
  transform:scale(1.03);
  box-shadow:var(--shadow-glow);
}
.btn-primary-custom:active{transform:scale(0.98)}
.btn-primary-custom:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.btn-primary-custom:disabled{opacity:0.45;cursor:not-allowed;transform:none}

.btn-outline-custom{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  color:var(--color-accent);
  font-weight:600;font-size:0.9375rem;
  border:1.5px solid var(--color-accent);
  border-radius:var(--radius-md);
  padding:11px 28px;cursor:pointer;
  transition:background 180ms ease,color 180ms ease,transform 180ms ease;
  text-decoration:none;white-space:nowrap;
}
.btn-outline-custom:hover{
  background:var(--color-accent);
  color:#0f0f0f;
  transform:scale(1.02);
}
.btn-outline-custom:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

/* ============================================
   Badges
   ============================================ */
.badge-live{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--color-gold);
  color:#0f0f0f;
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.06em;
  border-radius:var(--radius-sm);
  padding:2px 8px;
  text-transform:uppercase;
}
.badge-live::before{
  content:'';display:block;
  width:6px;height:6px;
  background:#0f0f0f;
  border-radius:50%;
  animation:pulsedot 1.2s ease-in-out infinite;
}
@keyframes pulsedot{
  0%,100%{opacity:1}
  50%{opacity:0.4}
}
.badge-cat{
  display:inline-block;
  background:var(--color-accent-light);
  color:var(--color-accent);
  border:1px solid var(--color-accent);
  border-radius:var(--radius-sm);
  font-size:0.75rem;font-weight:600;
  padding:2px 8px;
}
.badge-status{
  display:inline-block;
  font-size:0.75rem;font-weight:600;
  border-radius:var(--radius-sm);
  padding:3px 10px;
}
.badge-upcoming{background:var(--color-surface-2);color:var(--color-text-muted);border:1px solid var(--color-border)}
.badge-finished{background:rgba(107,114,128,0.15);color:var(--color-text-faint);border:1px solid #3a3a3a}

/* ============================================
   Cards
   ============================================ */
.card-custom{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  box-shadow:var(--shadow-card);
  transition:transform 200ms ease,box-shadow 200ms ease,border-color 200ms ease;
}
.card-custom:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(22,163,74,0.35);
}
.card-custom-2{background:var(--color-surface-2)}

/* ============================================
   Navigation
   ============================================ */
#site-header{
  position:fixed;top:16px;left:50%;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:calc(var(--container-max) - 32px);
  z-index:1000;
  transition:top 250ms ease,background 250ms ease,box-shadow 250ms ease;
}
.nav-inner{
  background:rgba(15,15,15,0.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-nav);
  padding:0 var(--space-md);
  display:flex;align-items:center;
  height:60px;gap:var(--space-sm);
}
#site-header.scrolled .nav-inner{
  background:rgba(15,15,15,0.96);
  box-shadow:0 6px 28px rgba(0,0,0,0.9);
}
.nav-logo{
  font-size:1.125rem;font-weight:800;
  color:var(--color-accent);
  text-decoration:none;white-space:nowrap;
  flex-shrink:0;
  transition:opacity 150ms;
}
.nav-logo:hover{opacity:0.85;color:var(--color-accent)}
.nav-links{
  display:flex;gap:var(--space-md);
  margin-left:auto;
  align-items:center;
}
.nav-links a{
  color:var(--color-text);
  font-size:0.9375rem;font-weight:500;
  position:relative;
  padding:4px 0;
  transition:color 200ms;
}
.nav-links a::after{
  content:'';position:absolute;
  bottom:0;left:0;width:0;height:2px;
  background:var(--color-accent);
  transition:width 250ms ease;
}
.nav-links a:hover{color:var(--color-accent)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--color-accent)}
.nav-links a.active::after{width:100%}
.nav-cta{margin-left:var(--space-sm)}

#mobile-menu-toggle{
  display:none;background:transparent;border:none;
  color:var(--color-text);font-size:1.5rem;cursor:pointer;
  margin-left:auto;padding:0;
}
#mobile-menu{
  display:none;
  position:fixed;top:0;left:0;width:100%;height:100vh;
  background:rgba(15,15,15,0.97);
  backdrop-filter:blur(20px);
  z-index:999;padding:80px 24px 24px;
  flex-direction:column;gap:24px;
  opacity:0;
  transition:opacity 300ms ease;
}
#mobile-menu.open{display:flex;opacity:1}
#mobile-menu a{
  color:var(--color-text);
  font-size:1.25rem;font-weight:600;
  padding:12px 0;
  border-bottom:1px solid var(--color-border);
}
#mobile-menu a.active{color:var(--color-accent)}
#mobile-menu .btn-primary-custom{margin-top:12px;justify-content:center}

@media(max-width:992px){
  .nav-links,.nav-cta{display:none}
  #mobile-menu-toggle{display:block}
}

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background:#080808;
  border-top:1px solid var(--color-border);
  padding:var(--space-xl) 0 var(--space-md);
  margin-top:var(--section-pad);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-lg);
  margin-bottom:var(--space-lg);
}
.footer-logo{
  font-size:1.125rem;font-weight:800;
  color:var(--color-accent);
  text-decoration:none;
  display:inline-block;
  margin-bottom:12px;
}
.footer-about{
  color:var(--color-text-muted);
  font-size:0.875rem;
  line-height:1.65;
}
.footer-col-title{
  color:var(--color-text);
  font-size:0.9375rem;font-weight:700;
  margin-bottom:12px;
}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{
  color:var(--color-text-muted);
  font-size:0.875rem;
  transition:color 180ms;
}
.footer-links a:hover{color:var(--color-accent)}
.footer-bottom{
  border-top:1px solid var(--color-border);
  padding-top:var(--space-md);
  text-align:center;
}
.footer-bottom p{
  color:var(--color-text-faint);
  font-size:0.8rem;
  margin:0;
}

/* ============================================
   Page Sections
   ============================================ */
main{padding-top:92px}
section{padding:var(--section-pad) 0}
@media(max-width:768px){
  section{padding:var(--space-lg) 0}
}

/* ============================================
   Category Hero
   ============================================ */
.category-hero{
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-lg);
  margin-bottom:var(--space-xl);
}
.category-hero h1{
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:800;
  color:var(--color-text);
  margin-bottom:12px;
  line-height:1.2;
}
.category-hero-subtitle{
  font-size:1.0625rem;
  color:var(--color-text-muted);
  margin-bottom:0;
}
.category-hero-meta{
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-md);
}
.category-hero-meta h3{
  font-size:1rem;
  font-weight:700;
  color:var(--color-accent);
  margin-bottom:8px;
}
.category-hero-meta p{
  font-size:0.875rem;
  color:var(--color-text-muted);
  margin:0;
  line-height:1.6;
}
@media(max-width:768px){
  .category-hero{padding:var(--space-lg) var(--space-md)}
}

/* ============================================
   Schedule Tabs
   ============================================ */
.schedule-tabs{
  border-bottom:2px solid var(--color-border);
  margin-bottom:var(--space-lg);
}
.schedule-tabs .nav{
  display:flex;
  gap:var(--space-sm);
  flex-wrap:wrap;
}
.schedule-tabs .nav-link{
  background:transparent;
  border:none;
  border-bottom:3px solid transparent;
  color:var(--color-text-muted);
  font-size:0.9375rem;font-weight:600;
  padding:12px 20px;
  cursor:pointer;
  transition:color 200ms,border-color 200ms;
  border-radius:0;
}
.schedule-tabs .nav-link:hover{
  color:var(--color-text);
  background:rgba(255,255,255,0.03);
}
.schedule-tabs .nav-link.active{
  color:var(--color-accent);
  border-bottom-color:var(--color-accent);
  background:transparent;
}

/* ============================================
   Schedule List
   ============================================ */
.schedule-list{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.schedule-item{
  display:grid;
  grid-template-columns:140px 1fr auto auto;
  gap:var(--space-md);
  align-items:center;
  padding:var(--space-md);
  border-bottom:1px solid var(--color-border);
  transition:background 180ms;
}
.schedule-item:last-child{border-bottom:none}
.schedule-item:hover{background:rgba(255,255,255,0.02)}
.schedule-time{
  color:var(--color-text-muted);
  font-size:0.875rem;
  font-weight:600;
}
.schedule-match{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--color-text);
  font-size:0.9375rem;
  font-weight:600;
}
.schedule-vs{
  color:var(--color-text-faint);
  font-weight:400;
  font-size:0.8125rem;
}
.schedule-venue{
  color:var(--color-text-faint);
  font-size:0.8125rem;
}
@media(max-width:768px){
  .schedule-item{
    grid-template-columns:1fr;
    gap:var(--space-sm);
  }
  .schedule-venue{display:none}
}

/* ============================================
   Match Cards
   ============================================ */
.match-card{
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  transition:transform 200ms,box-shadow 200ms,border-color 200ms;
}
.match-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(22,163,74,0.3);
}
.match-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.match-card-round{
  font-size:0.75rem;
  color:var(--color-text-faint);
  font-weight:600;
}
.match-card-teams{
  font-size:1.0625rem;
  font-weight:700;
  color:var(--color-text);
  margin-bottom:8px;
  line-height:1.4;
}
.match-card-time{
  font-size:0.875rem;
  color:var(--color-text-muted);
  margin-bottom:16px;
}

/* ============================================
   Guide Section
   ============================================ */
.guide-list{
  list-style:none;
  padding:0;
  margin:0;
}
.guide-list li{
  padding-left:20px;
  margin-bottom:12px;
  position:relative;
  color:var(--color-text-muted);
  font-size:0.9375rem;
  line-height:1.7;
}
.guide-list li::before{
  content:'';
  position:absolute;
  left:0;top:8px;
  width:3px;height:16px;
  background:var(--color-accent);
  border-radius:2px;
}

/* ============================================
   Team Schedule Cards
   ============================================ */
.team-schedule-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  text-align:center;
  transition:transform 200ms,border-color 200ms;
}
.team-schedule-card:hover{
  transform:translateY(-2px);
  border-color:var(--color-accent);
}
.team-schedule-card h4{
  font-size:1rem;
  font-weight:700;
  color:var(--color-text);
  margin-bottom:8px;
}
.team-schedule-number{
  font-size:2rem;
  font-weight:700;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
  margin-bottom:8px;
}
.team-schedule-card a{
  font-size:0.875rem;
  color:var(--color-accent);
  text-decoration:none;
  font-weight:600;
}
.team-schedule-card a:hover{text-decoration:underline}

/* ============================================
   News Cards
   ============================================ */
.news-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  transition:transform 200ms,box-shadow 200ms;
  height:100%;
}
.news-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}
.news-card h4{
  font-size:1.0625rem;
  font-weight:700;
  color:var(--color-text);
  margin-bottom:8px;
  line-height:1.4;
}
.news-card h4 a{
  color:var(--color-text);
  text-decoration:none;
}
.news-card h4 a:hover{color:var(--color-accent)}
.news-card-excerpt{
  font-size:0.875rem;
  color:var(--color-text-muted);
  line-height:1.6;
  margin-bottom:12px;
}
.news-card-date{
  font-size:0.8125rem;
  color:var(--color-text-faint);
}

/* ============================================
   Accordion / FAQ
   ============================================ */
.accordion-custom .accordion-item{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  margin-bottom:12px;
  overflow:hidden;
}
.accordion-custom .accordion-button{
  background:var(--color-surface);
  color:var(--color-text);
  font-weight:600;
  font-size:0.9375rem;
  padding:18px 20px;
  border:none;
  box-shadow:none;
  transition:background 180ms;
}
.accordion-custom .accordion-button:not(.collapsed){
  background:var(--color-surface-2);
  color:var(--color-accent);
  border-left:4px solid var(--color-accent);
}
.accordion-custom .accordion-button:hover{
  background:var(--color-surface-2);
}
.accordion-custom .accordion-button::after{
  filter:brightness(0) invert(0.7);
  transition:transform 200ms;
}
.accordion-custom .accordion-button:not(.collapsed)::after{
  filter:brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(80deg);
  transform:rotate(180deg);
}
.accordion-custom .accordion-body{
  background:var(--color-surface);
  color:var(--color-text-muted);
  font-size:0.9375rem;
  line-height:1.7;
  padding:0 20px 20px;
}

/* ============================================
   Subscribe Form
   ============================================ */
.subscribe-form-compact{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  max-width:400px;
  margin:0 auto;
}
.subscribe-form-compact h3{
  font-size:1.125rem;
  font-weight:700;
  color:var(--color-text);
  margin-bottom:16px;
  text-align:center;
}
.subscribe-form-compact .form-group{
  margin-bottom:16px;
}
.subscribe-form-compact label{
  display:block;
  font-size:0.875rem;
  font-weight:600;
  color:var(--color-text-muted);
  margin-bottom:6px;
}
.subscribe-form-compact input{
  width:100%;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  color:var(--color-text);
  padding:10px 14px;
  font-size:0.9375rem;
  transition:border-color 200ms;
}
.subscribe-form-compact input:focus{
  outline:none;
  border-color:var(--color-accent);
}
.subscribe-form-compact .btn-primary-custom{
  width:100%;
  justify-content:center;
}

/* ============================================
   Utility
   ============================================ */
.text-center-block{text-align:center;margin:var(--space-lg) auto}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }
}

/* roulang page: category2 */
/* ============================================
   设计 Token / CSS Custom Properties
   ============================================ */
:root {
  --color-accent: #16a34a;
  --color-accent-dark: #15803d;
  --color-accent-light: rgba(22,163,74,0.12);
  --color-gold: #d97706;
  --color-gold-bg: rgba(217,119,6,0.15);
  --color-bg: #0f0f0f;
  --color-surface: #1a1a1a;
  --color-surface-2: #222222;
  --color-border: #2e2e2e;
  --color-text: #f0f0f0;
  --color-text-muted: #a3a3a3;
  --color-text-faint: #6b7280;
  --color-danger: #ef4444;
  --radius-lg: 16px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.6);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.7);
  --shadow-nav: 0 4px 20px rgba(0,0,0,0.8);
  --shadow-glow: 0 0 12px rgba(22,163,74,0.4);
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --section-pad: 80px;
  --container-max: 1280px;
  --font-stack: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-stack);
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:var(--color-accent);text-decoration:none;transition:color 180ms ease}
a:hover{color:var(--color-accent-dark)}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}

/* ============================================
   Container
   ============================================ */
.site-container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 32px;
}
@media(max-width:768px){
  .site-container{padding:0 var(--space-sm)}
}

.text-accent{color:var(--color-accent)}
.text-gold{color:var(--color-gold)}
.text-muted-custom{color:var(--color-text-muted)}

.section-label{
  display:inline-block;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-accent);
  background:var(--color-accent-light);
  border:1px solid var(--color-accent);
  border-radius:var(--radius-sm);
  padding:3px 10px;
  margin-bottom:12px;
}
.section-title{color:var(--color-text);margin-bottom:8px}
.section-desc{color:var(--color-text-muted);font-size:0.9375rem;max-width:600px}

/* ============================================
   Buttons
   ============================================ */
.btn-primary-custom{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--color-accent);
  color:#0f0f0f;
  font-weight:700;font-size:0.9375rem;
  border:none;border-radius:var(--radius-md);
  padding:12px 28px;cursor:pointer;
  transition:background 180ms ease,transform 180ms ease,box-shadow 180ms ease;
  text-decoration:none;white-space:nowrap;
}
.btn-primary-custom:hover{
  background:var(--color-accent-dark);
  color:#0f0f0f;
  transform:scale(1.03);
  box-shadow:var(--shadow-glow);
}
.btn-primary-custom:active{transform:scale(0.98)}
.btn-primary-custom:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.btn-primary-custom:disabled{opacity:0.45;cursor:not-allowed;transform:none}

.btn-outline-custom{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  color:var(--color-accent);
  font-weight:600;font-size:0.9375rem;
  border:1.5px solid var(--color-accent);
  border-radius:var(--radius-md);
  padding:11px 28px;cursor:pointer;
  transition:background 180ms ease,color 180ms ease,transform 180ms ease;
  text-decoration:none;white-space:nowrap;
}
.btn-outline-custom:hover{
  background:var(--color-accent);
  color:#0f0f0f;
  transform:scale(1.02);
}
.btn-outline-custom:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

@media(max-width:576px){
  .btn-primary-custom,.btn-outline-custom{
    width:100%;justify-content:center;
  }
}

/* ============================================
   Badges
   ============================================ */
.badge-live{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--color-gold);
  color:#0f0f0f;
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.06em;
  border-radius:var(--radius-sm);
  padding:2px 8px;
  text-transform:uppercase;
}
.badge-live::before{
  content:'';display:block;
  width:6px;height:6px;
  background:#0f0f0f;
  border-radius:50%;
}

.badge-cat{
  display:inline-block;
  background:var(--color-accent-light);
  color:var(--color-accent);
  border:1px solid var(--color-accent);
  border-radius:var(--radius-sm);
  font-size:0.75rem;font-weight:600;
  padding:2px 8px;
}

/* ============================================
   Cards
   ============================================ */
.card-custom{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  box-shadow:var(--shadow-card);
  transition:transform 200ms ease,box-shadow 200ms ease,border-color 200ms ease;
  height:100%;
}
.card-custom:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(22,163,74,0.35);
}
.card-custom-2{background:var(--color-surface-2)}

/* ============================================
   Navigation (Floating Rounded)
   ============================================ */
#site-header{
  position:fixed;top:16px;left:50%;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:calc(var(--container-max) - 32px);
  z-index:1000;
  transition:top 250ms ease,background 250ms ease,box-shadow 250ms ease;
}
.nav-inner{
  background:rgba(15,15,15,0.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-nav);
  padding:0 var(--space-md);
  display:flex;align-items:center;
  height:60px;gap:var(--space-sm);
}
#site-header.scrolled .nav-inner{
  background:rgba(15,15,15,0.96);
  box-shadow:0 6px 28px rgba(0,0,0,0.9);
}
.nav-logo{
  font-size:1.125rem;font-weight:800;
  color:var(--color-accent);
  text-decoration:none;white-space:nowrap;
  flex-shrink:0;
  transition:opacity 150ms;
}
.nav-logo:hover{opacity:0.85;color:var(--color-accent)}

.nav-links{
  display:flex;
  gap:var(--space-md);
  margin-left:auto;
  align-items:center;
}
.nav-links a{
  color:var(--color-text);
  font-weight:500;
  font-size:0.9375rem;
  padding:6px 0;
  position:relative;
  transition:color 180ms ease;
}
.nav-links a::after{
  content:'';
  position:absolute;
  bottom:0;left:0;
  width:0;height:2px;
  background:var(--color-accent);
  transition:width 250ms ease;
}
.nav-links a:hover{color:var(--color-accent)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--color-accent)}
.nav-links a.active::after{width:100%}

.nav-cta{margin-left:var(--space-sm)}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  margin-left:auto;
}
.hamburger span{
  display:block;
  width:24px;height:2px;
  background:var(--color-text);
  transition:transform 250ms ease,opacity 250ms ease;
}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  display:none;
  position:fixed;
  top:92px;left:16px;right:16px;
  background:rgba(15,15,15,0.97);
  backdrop-filter:blur(16px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  z-index:999;
  flex-direction:column;
  gap:var(--space-sm);
}
.mobile-menu.active{display:flex}
.mobile-menu a{
  color:var(--color-text);
  font-size:1.125rem;
  font-weight:500;
  padding:12px 0;
  border-bottom:1px solid var(--color-border);
}
.mobile-menu a:last-of-type{border-bottom:none}
.mobile-menu a.active{color:var(--color-accent)}

@media(max-width:992px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
}

/* ============================================
   Sections
   ============================================ */
main{padding-top:92px}
.section{padding:var(--section-pad) 0}
@media(max-width:768px){
  .section{padding:var(--space-lg) 0}
  main{padding-top:76px}
}

/* ============================================
   分类页标题区（板块1）
   ============================================ */
.category-header{
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-md);
  margin-bottom:var(--section-pad);
}
.category-header h1{
  font-size:clamp(2rem,5vw,3rem);
  font-weight:800;
  margin-bottom:var(--space-sm);
  color:var(--color-text);
}
.category-header .subtitle{
  font-size:1.125rem;
  color:var(--color-text-muted);
  margin-bottom:0;
}
.stats-bar{
  display:flex;
  gap:var(--space-lg);
  align-items:center;
  flex-wrap:wrap;
}
.stat-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.stat-number{
  font-size:2rem;
  font-weight:700;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
}
.stat-label{
  font-size:0.875rem;
  color:var(--color-text-muted);
}
@media(max-width:768px){
  .category-header{padding:var(--space-lg) var(--space-sm)}
  .stats-bar{gap:var(--space-md)}
  .stat-number{font-size:1.5rem}
}

/* ============================================
   积分榜表格（板块2）
   ============================================ */
.standings-section{
  background:var(--color-bg);
  padding:var(--section-pad) 0;
}
.standings-table-wrap{
  overflow-x:auto;
  border-radius:var(--radius-lg);
  border:1px solid var(--color-border);
}
.standings-table{
  width:100%;
  margin:0;
  border-collapse:collapse;
  background:var(--color-bg);
}
.standings-table thead{
  background:var(--color-surface-2);
}
.standings-table th{
  padding:16px 12px;
  text-align:left;
  font-weight:700;
  font-size:0.875rem;
  color:var(--color-text);
  border-bottom:1px solid var(--color-border);
  white-space:nowrap;
}
.standings-table tbody tr{
  background:var(--color-bg);
  transition:background 150ms ease;
}
.standings-table tbody tr:nth-child(odd){
  background:var(--color-surface);
}
.standings-table tbody tr:hover{
  background:var(--color-surface-2);
}
.standings-table td{
  padding:14px 12px;
  font-size:0.9375rem;
  color:var(--color-text-muted);
  border-bottom:1px solid var(--color-border);
}
.standings-table td.rank{
  font-weight:700;
  color:var(--color-text);
}
.standings-table td.team{
  font-weight:600;
  color:var(--color-text);
}
.standings-table td.points{
  font-weight:700;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
}
.rank-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--color-accent);
  color:#0f0f0f;
  font-weight:800;
  font-size:0.875rem;
}
.table-footer{
  text-align:center;
  margin-top:var(--space-md);
}
@media(max-width:768px){
  .standings-table th,.standings-table td{
    padding:10px 8px;
    font-size:0.8125rem;
  }
}

/* ============================================
   射手榜与助攻榜（板块3）
   ============================================ */
.scorers-section{
  background:var(--color-surface);
  padding:var(--section-pad) 0;
}
.scorer-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.scorer-item{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  padding:12px;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  transition:border-color 150ms ease;
}
.scorer-item:hover{
  border-color:var(--color-accent);
}
.scorer-rank{
  font-size:1.25rem;
  font-weight:700;
  color:var(--color-accent);
  min-width:32px;
}
.scorer-info{
  flex:1;
}
.scorer-name{
  font-weight:600;
  color:var(--color-text);
  margin-bottom:2px;
}
.scorer-team{
  font-size:0.8125rem;
  color:var(--color-text-muted);
}
.scorer-stat{
  font-size:1.5rem;
  font-weight:700;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
}

/* ============================================
   球队数据卡片（板块4）
   ============================================ */
.team-data-section{
  padding:var(--section-pad) 0;
}
.team-data-card{
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  transition:transform 200ms ease,border-color 200ms ease;
}
.team-data-card:hover{
  transform:translateY(-3px);
  border-color:var(--color-accent);
}
.team-data-card h4{
  font-size:1.125rem;
  font-weight:700;
  color:var(--color-text);
  margin-bottom:var(--space-sm);
}
.team-stats{
  display:flex;
  gap:var(--space-md);
  justify-content:space-around;
}
.team-stat{
  text-align:center;
}
.team-stat-value{
  font-size:1.75rem;
  font-weight:700;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
  display:block;
}
.team-stat-label{
  font-size:0.8125rem;
  color:var(--color-text-muted);
}

/* ============================================
   积分走势（板块5）
   ============================================ */
.trend-section{
  background:var(--color-surface);
  padding:var(--section-pad) 0;
}
.trend-bar{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}
.trend-item{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
}
.trend-round{
  min-width:80px;
  font-weight:700;
  color:var(--color-accent);
  font-size:0.9375rem;
}
.trend-progress{
  flex:1;
  height:32px;
  background:var(--color-surface-2);
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  overflow:hidden;
  position:relative;
}
.trend-fill{
  height:100%;
  background:linear-gradient(90deg,var(--color-accent),var(--color-accent-dark));
  display:flex;
  align-items:center;
  padding:0 12px;
  font-size:0.875rem;
  font-weight:600;
  color:#0f0f0f;
  transition:width 600ms ease;
}
@media(max-width:768px){
  .trend-round{min-width:60px;font-size:0.8125rem}
  .trend-progress{height:28px}
}

/* ============================================
   历史冠军（板块6）
   ============================================ */
.champions-section{
  padding:var(--section-pad) 0;
}
.champion-list{
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.champion-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px var(--space-md);
  background:var(--color-surface);
  transition:background 150ms ease;
}
.champion-item:hover{
  background:var(--color-surface-2);
}
.champion-year{
  font-weight:700;
  color:var(--color-accent);
  font-size:1rem;
}
.champion-team{
  font-weight:600;
  color:var(--color-text);
  font-size:1rem;
}
.latest-champion-card{
  background:var(--color-surface);
  border:2px solid var(--color-gold);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  text-align:center;
}
.latest-champion-card h4{
  font-size:0.875rem;
  font-weight:700;
  color:var(--color-gold);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:var(--space-sm);
}
.latest-champion-card .team-name{
  font-size:1.5rem;
  font-weight:800;
  color:var(--color-text);
}

/* ============================================
   直播入口横幅（板块7）
   ============================================ */
.live-cta-banner{
  background:var(--color-accent-light);
  border-top:1px solid var(--color-accent);
  border-bottom:1px solid var(--color-accent);
  padding:var(--space-lg) 0;
  text-align:center;
}
.live-cta-banner h3{
  font-size:1.5rem;
  font-weight:700;
  color:var(--color-text);
  margin-bottom:8px;
}
.live-cta-banner p{
  color:var(--color-text-muted);
  margin-bottom:var(--space-md);
}

/* ============================================
   FAQ（板块8）
   ============================================ */
.faq-section{
  background:var(--color-surface);
  padding:var(--section-pad) 0;
}
.accordion-custom .accordion-item{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--color-border);
}
.accordion-custom .accordion-item:last-child{
  border-bottom:none;
}
.accordion-custom .accordion-button{
  background:var(--color-surface);
  color:var(--color-text);
  font-weight:600;
  font-size:1rem;
  padding:var(--space-md);
  border:none;
  border-left:4px solid transparent;
  transition:background 150ms ease,border-color 150ms ease;
}
.accordion-custom .accordion-button:not(.collapsed){
  background:var(--color-surface-2);
  color:var(--color-accent);
  border-left-color:var(--color-accent);
  box-shadow:none;
}
.accordion-custom .accordion-button:focus{
  box-shadow:none;
  border-color:var(--color-accent);
}
.accordion-custom .accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316a34a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transition:transform 250ms ease;
}
.accordion-custom .accordion-button:not(.collapsed)::after{
  transform:rotate(-180deg);
}
.accordion-custom .accordion-body{
  background:var(--color-surface);
  color:var(--color-text-muted);
  padding:0 var(--space-md) var(--space-md) var(--space-md);
  font-size:0.9375rem;
  line-height:1.7;
}

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background:#080808;
  border-top:1px solid var(--color-border);
  padding:var(--space-xl) 0 var(--space-md);
  margin-top:var(--section-pad);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:var(--space-lg);
  margin-bottom:var(--space-lg);
}
.footer-logo{
  font-size:1.25rem;
  font-weight:800;
  color:var(--color-accent);
  text-decoration:none;
  display:inline-block;
  margin-bottom:var(--space-sm);
}
.footer-logo:hover{opacity:0.85;color:var(--color-accent)}
.footer-about{
  color:var(--color-text-muted);
  font-size:0.875rem;
  line-height:1.7;
}
.footer-col-title{
  font-size:1rem;
  font-weight:700;
  color:var(--color-text);
  margin-bottom:var(--space-sm);
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-links a{
  color:var(--color-text-muted);
  font-size:0.875rem;
  transition:color 180ms ease;
}
.footer-links a:hover{
  color:var(--color-accent);
}
.footer-bottom{
  border-top:1px solid var(--color-border);
  padding-top:var(--space-md);
  text-align:center;
}
.footer-bottom p{
  color:var(--color-text-faint);
  font-size:0.8rem;
  margin:0;
}
@media(max-width:768px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:var(--space-md);
  }
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.fade-in-up{
  animation:fadeInUp 0.5s ease-out forwards;
  opacity:0;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}