/* roulang page: index */
:root{
  --color-primary:#E5322D;
  --color-accent:#F5A623;
  --color-info:#18D0B0;
  --color-live:#E5322D;
  --color-dark:#0C0A0F;
  --color-dark-2:#17121D;
  --color-dark-3:#1E1824;
  --color-page:#F6F5F3;
  --color-card:#FFFFFF;
  --color-text:#1C1923;
  --color-text-2:#6C6A75;
  --color-line:#E7E2EA;
  --color-line-deep:rgba(255,255,255,.12);
  --gradient-main:linear-gradient(120deg,#E5322D 0%,#F5A623 100%);
  --gradient-live:linear-gradient(120deg,#15B89D,#18D0B0 50%,#7EE8D4);
  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:12px;
  --shadow-soft:0 2px 4px rgba(15,10,25,.04),0 16px 40px rgba(15,10,25,.08);
  --shadow-hover:0 10px 18px rgba(15,10,25,.06),0 26px 60px rgba(20,15,35,.14);
  --transition-base:.25s ease;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--color-page);
  color:var(--color-text);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:3px;
  border-radius:6px;
}
.grid-container{
  max-width:1240px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.section{padding:92px 0;position:relative}
.section-alt{background:#FFFFFF}
.section-soft{background:#F6F5F3}
.section-dark{background:var(--color-dark);color:#fff}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:38px;
}
.section-head-copy{max-width:820px}
.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--color-primary);
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  margin-bottom:10px;
}
.section-title{
  font-size:clamp(26px,3vw,38px);
  font-weight:700;
  line-height:1.28;
  margin:0;
}
.section-sub{
  color:var(--color-text-2);
  margin:10px 0 0;
}
.section-head-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--color-text-2);
  white-space:nowrap;
  font-size:15px;
}
.section-head-link i{color:var(--color-primary);transition:transform var(--transition-base)}
.section-head-link:hover{color:var(--color-primary)}
.section-head-link:hover i{transform:translateX(4px)}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(12,10,15,.96);
  color:#fff;
  box-shadow:0 10px 30px rgba(12,10,15,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.site-header::after{
  content:"";
  display:block;
  height:2px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent) 35%,var(--color-info) 90%);
  opacity:.85;
  position:absolute;
  left:0;right:0;bottom:-2px;
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:74px;
  padding:12px 0;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.brand-mark{
  width:38px;height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--gradient-main);
  color:#fff;
  font-size:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 20px rgba(229,50,45,.28);
}
.brand-text{
  font-size:20px;
  font-weight:800;
  color:#fff;
  line-height:1.2;
  letter-spacing:.01em;
}
.brand-text small{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,.54);
  font-weight:500;
  letter-spacing:.1em;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:14px;
}
.main-nav a{
  padding:10px 16px;
  color:rgba(255,255,255,.78);
  font-weight:500;
  font-size:16px;
  border-radius:10px;
  position:relative;
  transition:color var(--transition-base),background var(--transition-base);
}
.main-nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}
.main-nav a.active{
  color:var(--color-accent);
  background:rgba(245,166,35,.08);
}
.main-nav a.active::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:3px;
  height:2px;
  background:var(--color-accent);
  box-shadow:0 0 12px rgba(245,166,35,.8);
  border-radius:99px;
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius:12px;
  padding:11px 20px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  line-height:1.4;
  transition:transform var(--transition-base),box-shadow var(--transition-base),filter var(--transition-base),opacity var(--transition-base);
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  color:#fff;
  background:var(--gradient-main);
  box-shadow:0 8px 22px rgba(229,50,45,.2);
}
.btn-primary:hover{
  filter:brightness(1.06);
  box-shadow:0 12px 28px rgba(229,50,45,.3);
  transform:translateY(-2px);
}
.btn-accent{
  color:#160700;
  background:linear-gradient(120deg,#FFD37A,#F5A623);
  box-shadow:0 8px 20px rgba(245,166,35,.22);
}
.btn-accent:hover{
  box-shadow:0 12px 28px rgba(245,166,35,.34);
  transform:translateY(-2px);
}
.btn-outline{
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.32);
}
.btn-outline:hover{
  border-color:var(--color-accent);
  background:rgba(245,166,35,.12);
  transform:translateY(-2px);
}
.btn-dark{
  color:#fff;
  background:var(--color-dark);
  border:1px solid rgba(255,255,255,.15);
}
.btn-dark:hover{
  background:#27212C;
  transform:translateY(-2px);
}
.btn-small{
  padding:8px 14px;
  font-size:14px;
  border-radius:10px;
}
.nav-actions .btn{padding:10px 18px;font-size:15px}
.nav-login-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
}
.nav-login-btn:hover{
  border-color:var(--color-accent);
  color:var(--color-accent);
  transform:translateY(-1px);
}
.nav-remind-btn{
  min-width:92px;
}
.mobile-toggle{
  display:none;
  width:44px;height:44px;
  padding:0;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  color:#fff;
  font-size:20px;
  cursor:pointer;
  transition:background var(--transition-base),border-color var(--transition-base);
}
.mobile-toggle:hover{
  background:rgba(255,255,255,.14);
  border-color:var(--color-accent);
}
.mobile-toggle .fa-times{display:none}
.site-header.open .mobile-toggle .fa-bars{display:none}
.site-header.open .mobile-toggle .fa-times{display:inline-block}

.hero{
  position:relative;
  color:#fff;
  background:var(--color-dark);
  background-image:url('/assets/images/backpic/back-1.webp');
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(1200px 600px at 82% 20%,rgba(229,50,45,.18),transparent 60%),
             radial-gradient(900px 500px at 8% 100%,rgba(24,208,176,.14),transparent 55%),
             linear-gradient(105deg,rgba(12,10,15,.96) 0%,rgba(12,10,15,.72) 48%,rgba(12,10,15,.42) 100%);
  z-index:1;
}
.hero-inner{
  position:relative;
  z-index:2;
  padding:76px 0 90px;
}
.hero-media-col,.hero-content-col{position:relative}
.hero-live-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(12,8,16,.46);
  border:1px solid rgba(255,255,255,.14);
  background:var(--color-dark-3);
}
.hero-shot{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
.hero-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.hero-live-frame:hover .hero-shot img{transform:scale(1.04)}
.live-overlay-top{
  position:absolute;
  top:14px;left:14px;
  display:flex;
  gap:9px;
  align-items:center;
}
.live-state-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(12,10,15,.72);
  backdrop-filter:blur(8px);
  border-radius:999px;
  padding:7px 13px;
  font-size:13px;
  font-weight:600;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
}
.live-state-tag.waiting .live-dot{
  background:var(--color-accent);
  box-shadow:0 0 0 0 rgba(245,166,35,.6);
  animation:pulseGold 1.8s infinite;
}
.live-dot{
  width:9px;height:9px;
  border-radius:50%;
  background:var(--color-accent);
}
@keyframes pulseGold{
  0%{box-shadow:0 0 0 0 rgba(245,166,35,.6)}
  80%{box-shadow:0 0 0 10px rgba(245,166,35,0)}
  100%{box-shadow:0 0 0 0 rgba(245,166,35,0)}
}
.league-tag{
  display:inline-flex;
  align-items:center;
  background:var(--gradient-live);
  color:#06231D;
  font-weight:700;
  padding:6px 12px;
  border-radius:8px;
  font-size:13px;
}
.live-overlay-bottom{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:28px 18px 16px;
  background:linear-gradient(transparent,rgba(12,10,15,.84));
}
.match-subject{
  font-size:16px;
  font-weight:600;
  color:#fff;
  display:flex;
  gap:8px;
  align-items:center;
}
.match-subject .fa-bolt{color:var(--color-accent)}
.hero-kicker{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  font-size:14px;
  color:rgba(255,255,255,.7);
  margin-bottom:20px;
}
.hero-kicker .fa-circle{
  color:var(--color-info);
  font-size:6px;
}
.hero-title{
  font-size:clamp(34px,4.6vw,54px);
  font-weight:800;
  line-height:1.22;
  letter-spacing:.01em;
  margin:0 0 16px;
  color:#fff;
}
.hero-title em{
  font-style:normal;
  background:var(--gradient-main);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:800;
}
.hero-lead{
  color:rgba(255,255,255,.74);
  font-size:16px;
  line-height:1.85;
  margin:0 0 26px;
  max-width:560px;
}
.hero-highlight{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.66);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:9px 14px;
  border-radius:12px;
  font-size:14px;
  margin-bottom:24px;
  max-width:fit-content;
}
.hero-highlight i{
  color:var(--color-accent);
}
.countdown-row{
  display:flex;
  gap:12px;
  margin:0 0 22px;
}
.count-item{
  min-width:76px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  text-align:center;
  padding:10px 6px;
  backdrop-filter:blur(8px);
}
.count-item .cd-num{
  display:block;
  font-family:"DIN Alternate","Roboto Mono",Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:28px;
  line-height:1.1;
  color:#fff;
}
.count-item.is-seconds .cd-num{
  background:var(--gradient-main);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.count-item .cd-label{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:rgba(255,255,255,.48);
}
.hero-points{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin:0 0 30px;
  padding:0;
}
.hero-points li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.8);
  font-size:14px;
}
.hero-points li i{
  width:20px;height:20px;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  background:rgba(24,208,176,.16);
  color:var(--color-info);
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.stats-section{
  background:var(--color-page);
  padding-bottom:0;
  margin-bottom:0;
}
.stats-card-wrap{
  margin-top:-18px;
  position:relative;
  z-index:5;
}
.stats-grid{
  display:grid;
  grid-template-columns:180px 1fr 1fr 1fr;
  gap:16px;
  padding:22px;
  background:#FFFFFF;
  border:1px solid var(--color-line);
  border-radius:28px;
  box-shadow:var(--shadow-soft);
}
.stat-card{
  border-radius:18px;
  padding:20px 20px;
  border:1px solid #F0EBEE;
  background:linear-gradient(180deg,#FFFFFF,#FAF8FA);
  position:relative;
  overflow:hidden;
}
.stat-card::after{
  content:"";
  position:absolute;
  left:18px;right:18px;bottom:0;
  height:3px;
  border-radius:99px;
  background:var(--color-line);
}
.stat-card.featured{
  background:linear-gradient(140deg,#1C1830,#0C0A0F);
  color:#fff;
  border:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.stat-card.featured::after{background:var(--gradient-main)}
.stat-digit{
  font-family:"DIN Alternate","Roboto Mono",Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:46px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
}
.stat-card.featured .stat-digit{
  background:var(--gradient-main);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat-digit sup{
  font-size:19px;
  font-weight:700;
}
.stat-name{
  font-weight:700;
  font-size:16px;
  margin:10px 0 6px;
}
.stat-card.featured .stat-name{color:#fff}
.stat-trend{
  font-size:13px;
  color:var(--color-text-2);
  line-height:1.6;
}
.stat-card.featured .stat-trend{color:rgba(255,255,255,.64)}

.match-section{
  background:var(--color-page);
}
.match-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:stretch;
}
.live-feature-card{
  position:relative;
  min-height:420px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-soft);
}
.live-feature-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.live-feature-card:hover img{transform:scale(1.05)}
.live-feature-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(12,10,15,.02) 22%,rgba(12,10,15,.9) 100%);
}
.feature-node{
  position:relative;
  z-index:2;
  padding:32px;
  color:#fff;
}
.feature-node .node-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(229,50,45,.9);
  color:#fff;
  border-radius:999px;
  padding:5px 13px;
  font-size:12px;
  font-weight:600;
  margin-bottom:16px;
}
.feature-time{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--color-accent);
  font-size:14px;
  font-weight:600;
}
.feature-title{
  font-size:26px;
  line-height:1.4;
  font-weight:700;
  margin:8px 0 10px;
  color:#fff;
}
.feature-desc{
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.8;
  margin-bottom:20px;
}
.match-stack{
  display:flex;
  flex-direction:column;
  gap:20px;
  height:100%;
}
.match-list-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:20px;
  padding:24px;
  flex:1;
  position:relative;
  transition:box-shadow var(--transition-base),transform var(--transition-base);
  overflow:hidden;
}
.match-list-card::before{
  content:"";
  position:absolute;
  top:0;left:0;width:100%;height:3px;
  background:var(--gradient-main);
  opacity:0;
  transition:opacity var(--transition-base);
}
.match-list-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}
.match-list-card:hover::before{opacity:1}
.list-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:12px;
}
.list-topline .tag-soft{
  background:rgba(24,208,176,.1);
  color:#0B9683;
}
.tag-soft{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(229,50,45,.08);
  color:var(--color-primary);
  font-weight:600;
  font-size:12px;
  border-radius:999px;
  padding:4px 11px;
}
.match-list-card h3{
  font-size:20px;
  margin:18px 0 6px;
  line-height:1.5;
}
.match-list-card h3 a:hover{color:var(--color-primary)}
.match-list-card p{
  color:var(--color-text-2);
  font-size:14px;
  margin:0;
  line-height:1.8;
}
.match-bottomlink{
  margin-top:auto;
  padding-top:16px;
  display:flex;
  align-items:center;
  color:var(--color-primary);
  font-weight:600;
  gap:7px;
}
.match-bottomlink i{
  transition:transform var(--transition-base);
}
.match-bottomlink:hover i{transform:translateX(4px)}
.match-time-note{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--color-accent);
  font-weight:600;
}
.match-time-note .time-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--color-accent);
  box-shadow:0 0 9px rgba(245,166,35,.8);
}
.teams-side{
  display:inline-flex;
  gap:8px;
  background:#1E1824;
  color:#fff;
  border-radius:999px;
  padding:6px 15px;
  font-size:14px;
}

.replay-section{background:#FBF9FA}
.replay-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}
.replay-card{
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:22px;
  padding:16px;
  display:grid;
  grid-template-columns:160px 1fr;
  gap:18px;
  align-items:center;
  transition:transform var(--transition-base),box-shadow var(--transition-base);
}
.replay-card:nth-child(even){transform:translateY(26px)}
.replay-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}
.replay-card:nth-child(even):hover{transform:translateY(23px)}
.replay-thumb{
  border-radius:15px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#F1EDEF;
}
.replay-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.replay-card:hover .replay-thumb img{transform:scale(1.06)}
.replay-info{
  min-width:0;
  padding-right:6px;
}
.replay-tagline{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(229,50,45,.07);
  color:var(--color-primary);
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:10px;
}
.replay-info h3{
  font-size:18px;
  margin:0 0 8px;
  line-height:1.5;
}
.replay-info h3 a:hover{color:var(--color-primary)}
.replay-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--color-text-2);
}
.replay-meta .meta-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid #EBE6EA;
  border-radius:999px;
  padding:2px 9px;
}
.replay-meta i{color:var(--color-accent)}
.replay-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  color:var(--color-primary);
}
.replay-link i{transition:transform var(--transition-base)}
.replay-link:hover i{transform:translateX(4px)}

.news-wrap{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:28px;
  align-items:start;
}
.news-main-card{
  background:#FFFFFF;
  border:1px solid var(--color-line);
  border-radius:24px;
  overflow:hidden;
  transition:transform var(--transition-base),box-shadow var(--transition-base);
}
.news-main-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}
.news-main-thumb{
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg,#D9D3DA,#F4F1F2);
  position:relative;
}
.news-main-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.news-main-body{padding:26px}
.news-cat{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(229,50,45,.08);
  color:var(--color-primary);
  border-radius:999px;
  padding:4px 12px;
  font-size:13px;
  font-weight:600;
  margin-bottom:14px;
}
.news-main-title{
  font-size:22px;
  font-weight:700;
  line-height:1.5;
  margin:0 0 10px;
}
.news-main-title a:hover{color:var(--color-primary)}
.news-main-excerpt{
  color:var(--color-text-2);
  font-size:15px;
  line-height:1.85;
  margin:0 0 18px;
}
.news-meta-simple{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--color-text-2);
  font-size:13px;
}
.news-meta-simple i{color:var(--color-accent)}
.news-aside{
  background:#FFFFFF;
  border:1px solid var(--color-line);
  border-radius:24px;
  padding:6px 24px;
}
.news-aside-header{
  padding:16px 0 12px;
  border-bottom:1px solid var(--color-line);
  font-size:17px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}
.news-aside-header .live-dot{
  width:8px;height:8px;
  background:var(--color-primary);
}
.news-list-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 0;
  border-bottom:1px dashed #EAE2E8;
}
.news-list-item:last-child{border-bottom:none}
.news-list-main{flex:1;min-width:0}
.news-list-title{
  font-size:16px;
  font-weight:600;
  line-height:1.55;
  margin:0 0 6px;
}
.news-list-title a:hover{color:var(--color-primary)}
.news-list-arrow{
  color:var(--color-primary);
  flex-shrink:0;
  transition:transform var(--transition-base);
}
.news-list-item:hover .news-list-arrow{transform:translateX(4px)}
.news-list-sub{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:center;
  color:var(--color-text-2);
  font-size:13px;
}
.news-cat-tiny{
  display:inline-flex;
  align-items:center;
  background:#F2EEEE;
  color:var(--color-primary);
  font-weight:600;
  font-size:12px;
  padding:2px 9px;
  border-radius:999px;
}
.cms-empty-item{
  display:block;
  padding:28px 8px;
  color:var(--color-text-2);
  text-align:center;
  font-size:14px;
}

.subscribe-section{
  background:var(--color-dark);
  background-image:url('/assets/images/backpic/back-2.png');
  background-size:cover;
  background-position:center;
  position:relative;
  isolation:isolate;
}
.subscribe-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,rgba(12,10,15,.96) 20%,rgba(12,10,15,.82) 55%,rgba(229,50,45,.22));
  z-index:-1;
}
.subscribe-inner{
  padding:86px 0;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:center;
}
.subscribe-copy h2{
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.3;
  color:#fff;
  margin:0 0 14px;
}
.subscribe-copy p{
  color:rgba(255,255,255,.72);
  font-size:16px;
  margin:0 0 24px;
  max-width:570px;
}
.subscribe-symbols{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  padding-left:0;
  list-style:none;
}
.subscribe-symbols li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.82);
  font-size:14px;
}
.subscribe-symbols li i{
  color:var(--color-info);
}
.subscribe-form-card{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  border-radius:24px;
  padding:30px;
}
.subscribe-form-card .form-title{
  color:#fff;
  font-weight:700;
  font-size:20px;
  margin-bottom:6px;
}
.subscribe-form-card .form-note{
  color:rgba(255,255,255,.62);
  font-size:14px;
  margin-bottom:20px;
}
.sub-input-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}
.sub-input-row input{
  flex:1;
  min-height:50px;
  min-width:0;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.24);
  border-radius:14px;
  color:#fff;
  font-size:16px;
  padding:10px 16px;
  transition:border-color var(--transition-base),box-shadow var(--transition-base);
}
.sub-input-row input::placeholder{color:rgba(255,255,255,.45)}
.sub-input-row input:focus{
  border-color:var(--color-accent);
  box-shadow:0 0 0 4px rgba(245,166,35,.16);
}
.sub-input-row input.is-invalid{
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(229,50,45,.16);
}
.sub-input-row .btn{white-space:nowrap}
.form-error{
  display:block;
  color:#FF8F8B;
  font-size:13px;
  margin-top:9px;
  visibility:hidden;
  min-height:18px;
}
.form-error.show{visibility:visible}
.mini-policy{
  color:rgba(255,255,255,.46);
  font-size:13px;
  margin:14px 0 0;
}

.faq-section{background:#F6F5F3}
.faq-head{
  text-align:center;
  max-width:700px;
  margin:0 auto 44px;
}
.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.faq-item{
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:18px;
  overflow:hidden;
  transition:box-shadow var(--transition-base);
}
.faq-item:hover{box-shadow:0 8px 24px rgba(15,10,25,.04)}
.faq-item[open]{
  box-shadow:var(--shadow-soft);
  border-left:3px solid var(--color-info);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:70px;
  font-weight:700;
  color:var(--color-text);
  padding:16px 20px;
  position:relative;
  transition:color var(--transition-base);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .faq-num{
  font-family:"DIN Alternate",monospace;
  font-weight:600;
  color:var(--color-accent);
  font-size:15px;
  flex-shrink:0;
}
.faq-item summary .faq-title{
  flex:1;
  line-height:1.6;
}
.faq-icon{
  width:28px;height:28px;
  flex-shrink:0;
  border-radius:50%;
  background:#F4F0F2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:var(--color-primary);
  transition:transform var(--transition-base),background var(--transition-base);
}
.faq-item[open] .faq-title{color:var(--color-primary)}
.faq-item[open] .faq-icon{
  transform:rotate(45deg);
  background:rgba(229,50,45,.1);
}
.faq-answer{
  padding:2px 30px 24px 54px;
  color:var(--color-text-2);
  font-size:15px;
  line-height:1.85;
}
.faq-answer p{margin:0 0 8px}
.faq-answer a{
  color:var(--color-primary);
  font-weight:600;
}
.faq-answer a:hover{text-decoration:underline}

.site-footer{
  background:var(--color-dark);
  color:#D8D2E0;
  position:relative;
}
.site-footer::before{
  content:"";
  display:block;
  height:2px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent) 50%,var(--color-info));
  opacity:.9;
}
.footer-upper{
  padding:68px 0 44px;
  display:grid;
  grid-template-columns:1.3fr .8fr .8fr 1fr;
  gap:40px;
}
.footer-brand-copy h4{
  color:#fff;
  font-size:22px;
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-brand-copy p{
  font-size:14px;
  color:rgba(255,255,255,.56);
  margin:0;
  max-width:300px;
  line-height:1.9;
}
.footer-col h5{
  color:#fff;
  font-size:16px;
  margin:0 0 16px;
}
.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-col ul li+li{margin-top:9px}
.footer-col ul a{
  color:#A6A0B4;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:color var(--transition-base);
}
.footer-col ul a:hover{color:#fff}
.footer-col ul a i{
  font-size:12px;
  color:var(--color-primary);
}
.footer-service{
  font-size:14px;
  color:#A6A0B4;
  line-height:1.9;
}
.footer-service strong{color:#fff;display:block;margin-bottom:6px}
.footer-contact-list{
  list-style:none;
  margin:0;
  padding:0;
}
.footer-contact-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  color:#A6A0B4;
  margin-bottom:10px;
}
.footer-contact-list li i{
  color:var(--color-accent);
  width:16px;
  margin-top:6px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:20px 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:rgba(255,255,255,.4);
  font-size:13px;
}
.footer-bottom a{color:rgba(255,255,255,.45)}
.footer-bottom a:hover{color:#fff}

@media (max-width:1199px){
  .stats-grid{grid-template-columns:160px 1fr 1fr 1fr}
  .replay-card{grid-template-columns:140px 1fr}
}
@media (max-width:1023px){
  .section{padding:68px 0}
  .main-nav{
    display:none;
    flex-direction:column;
    width:100%;
    background:rgba(12,10,15,.98);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:10px;
    gap:4px;
  }
  .site-header.open .main-nav{display:flex}
  .mobile-toggle{
    display:inline-flex;
    margin-left:8px;
  }
  .nav-row{
    flex-wrap:wrap;
    align-items:center;
  }
  .nav-actions{
    margin-left:0;
    order:2;
  }
  .nav-actions .btn{
    padding:9px 16px;
    font-size:14px;
    border-radius:10px;
    min-width:auto;
  }
  .main-nav{
    order:3;
    margin-left:0;
    margin-top:8px;
  }
  .main-nav a{
    padding:14px 8px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .main-nav a:last-child{border-bottom:none}
  .stats-grid{
    grid-template-columns:1fr 1fr;
  }
  .stat-card.featured{
    grid-column:span 2;
    min-height:0;
  }
  .match-layout{grid-template-columns:1fr}
  .news-wrap{grid-template-columns:1fr}
  .subscribe-inner{grid-template-columns:1fr;padding:62px 0}
  .footer-upper{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .section{padding:58px 0}
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-inner{padding:46px 0 60px}
  .countdown-row{gap:8px}
  .count-item{min-width:64px;padding:8px 4px}
  .count-item .cd-num{font-size:22px}
  .replay-grid{grid-template-columns:1fr}
  .replay-card:nth-child(even),
  .replay-card:nth-child(even):hover{
    transform:none;
  }
  .replay-card{
    grid-template-columns:110px 1fr;
  }
  .faq-grid{grid-template-columns:1fr}
  .footer-upper{grid-template-columns:1fr;gap:30px}
  .subscribe-section .subscribe-inner{padding:48px 0}
  .sub-input-row{flex-direction:column}
  .sub-input-row .btn{width:100%}
  .nav-row{align-items:center}
  .brand-mark{width:34px;height:34px;border-radius:10px}
  .brand-text{font-size:18px}
}
@media (max-width:559px){
  .nav-actions .nav-login-btn{display:none}
  .stats-grid{gap:12px}
  .stats-card-wrap{padding:14px}
  .stat-card{padding:14px}
  .stat-digit{font-size:36px}
  .live-feature-card{min-height:340px}
  .feature-node{padding:24px}
  .feature-title{font-size:22px}
  .replay-card{
    grid-template-columns:1fr;
  }
  .replay-thumb{
    width:100%;
    aspect-ratio:16/9;
  }
  .match-list-card{padding:20px}
  .news-main-body{padding:20px}
  .news-aside{padding:6px 16px}
  .footer-bottom{flex-direction:column;justify-content:center;text-align:center}
}

/* roulang page: category1 */
:root {
    --color-primary: #E5322D;
    --color-accent: #F5A623;
    --color-signal: #18D0B0;
    --dark-bg: #0C0A0F;
    --light-bg: #F6F5F3;
    --text-main: #1C1923;
    --text-soft: #6C6A75;
    --card-text: #403C48;
    --card-white: #FFFFFF;
    --border-soft: #E7E2EA;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --shadow-soft: 0 2px 4px rgba(15, 10, 25, 0.04), 0 16px 40px rgba(15, 10, 25, 0.08);
    --shadow-hover: 0 8px 18px rgba(15, 10, 25, 0.08), 0 24px 56px rgba(15, 10, 25, 0.12);
    --gradient-main: linear-gradient(120deg, #E5322D, #F5A623);
    --gradient-signal: linear-gradient(120deg, #18D0B0, #0FA08C);
    --font-num: "DIN Alternate", "Roboto Mono", Consolas, monospace;
    --ease: all 0.25s ease;
    --space-section: 96px;
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
    background-color: var(--light-bg);
    color: var(--text-main);
    line-height: 1.75;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img{
    max-width:100%;
    height:auto;
}
a{
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--ease);
}
a:hover{
    color: #B31F1A;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
ul, ol, p, h1, h2, h3, h4, h5, h6{
    list-style: none;
    font-weight: 400;
}
.grid-container{
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
}
::selection {
    background: rgba(229, 50, 45, 0.18);
}

/* Header */
.main-nav{
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(12, 10, 15, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(229, 50, 45, 0.32);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
.top-nav-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 20px;
}
.brand-link{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    white-space: nowrap;
}
.brand-link i{
    font-size: 22px;
    color: var(--color-signal);
    filter: drop-shadow(0 0 6px rgba(24, 208, 176, 0.5));
}
.nav-list{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.nav-list a{
    color: rgba(255, 255, 255, 0.82);
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    transition: var(--ease);
    letter-spacing: 0.02em;
}
.nav-list a:hover{
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06);
}
.nav-list a.active{
    color: #FFFFFF;
    font-weight: 700;
}
.nav-list a.active::after{
    content: "";
    position: absolute;
    bottom: 2px;
    left: 18px;
    right: 18px;
    height: 3px;
    border-radius: 4px;
    background: var(--gradient-main);
    filter: drop-shadow(0 0 8px rgba(229, 50, 45, 0.55));
}
.nav-list a i {
    margin-right: 5px;
    font-size: 13px;
}
.nav-actions{
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-outline-light{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.38);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    border-radius: 999px;
    padding: 9px 20px;
    transition: var(--ease);
    line-height: 1.4;
}
.btn-outline-light:hover{
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(245, 166, 35, 0.08);
}
.btn-gradient-main{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-main);
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 999px;
    border: none;
    padding: 9px 22px;
    font-size: 14px;
    transition: var(--ease);
    line-height: 1.4;
    box-shadow: 0 4px 18px rgba(229, 50, 45, 0.3);
}
.btn-gradient-main:hover{
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(229, 50, 45, 0.4);
    color: #FFFFFF;
}
.mobile-nav-toggle{
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    width: 42px;
    height: 42px;
    color: #FFFFFF;
    font-size: 19px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* hero */
.cat-hero{
    position: relative;
    background: linear-gradient(145deg, #141019 0%, #0C0A0F 74%);
    overflow: hidden;
    padding: 90px 0 80px;
}
.cat-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/images/backpic/back-2.png') no-repeat center/cover;
    opacity: 0.2;
    mix-blend-mode: screen;
}
.cat-hero::after{
    content: "";
    position: absolute;
    bottom: -40%;
    left: 0;
    width: 100%;
    height: 80%;
    background: radial-gradient(ellipse at bottom, rgba(229, 50, 45, 0.22), rgba(229,50,45,0) 70%);
    pointer-events: none;
}
.hero-content{
    position: relative;
    z-index: 2;
    color: #FFFFFF;
    max-width: 780px;
}
.breadcrumb-hero{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 26px;
    align-items: center;
}
.breadcrumb-hero a{
    color: rgba(255,255,255,0.75);
}
.breadcrumb-hero a:hover{
    color: var(--color-accent);
}
.breadcrumb-hero i{
    font-size: 11px;
    margin: 0 4px;
    color: rgba(255,255,255,0.3);
}
.hero-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(24, 208, 176, 0.12);
    border: 1px solid rgba(24, 208, 176, 0.38);
    color: var(--color-signal);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 18px;
}
.hero-badge i{
    font-size: 12px;
    animation: pulseDot 1.6s infinite;
}
@keyframes pulseDot{
    0%,100%{ opacity: 1; }
    50%{ opacity: 0.4; }
}
.cat-hero h1{
    font-size: 48px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    background: linear-gradient(100deg, #FFFFFF 30%, rgba(255,255,255,0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cat-hero h1 strong{
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.hero-desc{
    font-size: 17px;
    color: rgba(255,255,255,0.8);
    line-height: 1.85;
    margin-bottom: 32px;
    max-width: 650px;
}
.hero-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 18px;
    color: rgba(255,255,255,0.55);
    font-size: 14px;
}
.hero-meta span i{
    color: rgba(245,166,35,0.7);
    margin-right: 7px;
}
.hero-left{
    padding-right: 24px;
}

/* section spacing */
.section-pad{
    padding: var(--space-section) 0 40px;
}
.section-pad-bottom{
    padding-bottom: var(--space-section);
}
.section-head{
    margin-bottom: 36px;
    max-width: 860px;
}
.section-eyebrow{
    display: block;
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.section-head h2{
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 12px;
    color: var(--text-main);
    letter-spacing: -0.01em;
}
.section-head p{
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.8;
}

/* spotlight cards */
.spotlight-section{
    position: relative;
    z-index: 3;
    margin-top: -42px;
}
.guide-feature-card{
    background: var(--card-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 34px 28px 28px;
    box-shadow: var(--shadow-soft);
    height: 100%;
    transition: var(--ease);
    position: relative;
    overflow: hidden;
}
.guide-feature-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-main);
    opacity: 0.55;
    transition: var(--ease);
}
.guide-feature-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.guide-feature-card:hover::before{
    opacity: 1;
    background: var(--gradient-signal);
}
.guide-num{
    font-family: var(--font-num);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(120deg, #111, #555);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 14px;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}
.guide-card-icon{
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 18px;
    background: rgba(229, 50, 45, 0.08);
    color: var(--color-primary);
}
.guide-feature-card:nth-child(2) .guide-card-icon{
    background: rgba(245, 166, 35, 0.12);
    color: #C07D16;
}
.guide-feature-card:nth-child(3) .guide-card-icon{
    background: rgba(24, 208, 176, 0.12);
    color: #0B927A;
}
.guide-feature-card h3{
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-main);
}
.guide-feature-card p{
    color: var(--text-soft);
    font-size: 15px;
    margin: 0;
    line-height: 1.75;
}

/* dual-section */
.dual-guide-block{
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-soft);
    margin-bottom: 26px;
}
.dual-guide-block .grid-x{
    align-items: stretch;
}
.dual-media{
    min-height: 300px;
    background: linear-gradient(122deg, rgba(12,10,15,0.1), rgba(12,10,15,0.32)), url('/assets/images/coverpic/cover-4.webp') center/cover no-repeat;
    position: relative;
}
.dual-media:nth-of-type(2n){
    background: linear-gradient(122deg, rgba(12,10,15,0.1), rgba(12,10,15,0.32)), url('/assets/images/coverpic/cover-6.png') center/cover no-repeat;
}
.dual-content{
    padding: 34px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dual-content h3{
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 10px;
}
.dual-content .dual-tag{
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(229, 50, 45, 0.09);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.dual-content p{
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 18px;
}
ul.check-list{
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
}
ul.check-list li{
    color: var(--card-text);
    font-size: 14px;
}
ul.check-list li i{
    color: var(--color-signal);
    margin-right: 8px;
    width: 18px;
}
.btn-circle-arrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    transition: var(--ease);
}
.btn-circle-arrow i{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 99px;
    background: var(--gradient-main);
    color: #FFFFFF;
    font-size: 12px;
    transition: var(--ease);
}
.btn-circle-arrow:hover{
    color: var(--color-primary);
}
.btn-circle-arrow:hover i{
    transform: translateX(3px);
}

/* feature pillar */
.ivy-section{
    background: #FFFFFF;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.ivy-grid-item{
    padding: 34px 22px 28px;
    border-radius: var(--radius-md);
    transition: var(--ease);
    position: relative;
    margin-bottom: 22px;
}
.ivy-grid-item:hover{
    background: #FBF9F7;
}
.ivy-icon{
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    margin-bottom: 18px;
    background: linear-gradient(120deg, rgba(229,50,45,0.1), rgba(245,166,35,0.12));
    color: var(--color-primary);
    border: 1px solid rgba(229,50,45,0.12);
}
.ivy-grid-item h3{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-main);
}
.ivy-grid-item p{
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
}
.ivy-grid-item .step-line{
    font-family: var(--font-num);
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(90deg, #FF807A, var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

/* scene cards */
.scene-card{
    background: var(--card-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 26px;
    box-shadow: var(--shadow-soft);
    transition: var(--ease);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.scene-card:hover{
    transform: translateY(-4px) scale(1.005);
    box-shadow: var(--shadow-hover);
}
.scene-card-media{
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.scene-card-media img{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.55s ease;
}
.scene-card:hover .scene-card-media img{
    transform: scale(1.05);
}
.scene-card-body{
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.scene-timeline{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
}
.scene-timeline i{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.scene-timeline .live{
    background: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(229,50,45,0.15);
    animation: pulseDot 1.4s infinite;
}
.scene-timeline .up{
    background: var(--color-accent);
}
.scene-timeline span {
    color: var(--text-soft);
}
.scene-card h3{
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-main);
    line-height: 1.4;
}
.scene-card p{
    color: var(--text-soft);
    font-size: 14px;
    margin: 0 0 18px;
    flex: 1;
}
.scene-card-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #EFECF0;
    padding-top: 16px;
    margin-top: auto;
}
.scene-meta{
    font-size: 13px;
    color: var(--text-soft);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}
.scene-card-bottom a{
    font-size: 14px;
    font-weight: 600;
}

/* timeline flow */
.flow-section{
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F5F3 100%);
}
.flow-container{
    background: var(--card-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 40px 30px;
    margin-top: 26px;
}
.flow-steps{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    counter-reset: step;
    position: relative;
}
.flow-step{
    position: relative;
    text-align: center;
    padding: 20px 12px 10px;
    border-radius: var(--radius-md);
    transition: var(--ease);
}
.flow-step:hover{
    background: #FBF9F7;
}
.flow-step::before{
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-num);
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}
.flow-step-icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(24, 208, 176, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 19px;
    color: var(--color-primary);
}
.flow-step h4{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-main);
}
.flow-step p{
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.7;
    margin: 0;
}

/* app tip band */
.tip-band{
    background: var(--dark-bg);
    border-radius: var(--radius-lg);
    padding: 52px 46px;
    position: relative;
    overflow: hidden;
    color: #FFFFFF;
}
.tip-band::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-signal);
    opacity: 0.7;
}
.tip-band::after{
    content: "";
    position: absolute;
    right: -120px;
    top: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229,50,45,0.25), transparent 62%);
}
.tip-band .grid-x{
    position: relative;
    z-index: 2;
    align-items: center;
}
.tip-band h2{
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px;
    line-height: 1.3;
}
.tip-band p{
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    max-width: 600px;
    margin-bottom: 0;
}
.tip-band .tip-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}
.tip-band .btn-gradient-main{
    padding: 13px 28px;
    font-size: 16px;
}
.btn-outline-accent{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(245,166,35,0.55);
    color: var(--color-accent);
    font-weight: 600;
    border-radius: 999px;
    padding: 12px 24px;
    font-size: 15px;
    transition: var(--ease);
}
.btn-outline-accent:hover{
    background: rgba(245, 166, 35, 0.12);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* faq */
.faq-wrap{
    background: var(--card-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 35px 34px;
    margin-top: 30px;
}
.acc-item{
    border-left: 3px solid transparent;
    transition: var(--ease);
    border-bottom: 1px solid #EBE7EE;
    padding: 22px 20px;
}
.acc-item:last-child{
    border-bottom: none;
}
.acc-item[data-open="true"]{
    border-left-color: var(--color-primary);
    background: rgba(229, 50, 45, 0.018);
}
.acc-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-main);
    line-height: 1.5;
    transition: var(--ease);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0;
    font-family: inherit;
}
.acc-head:hover{
    color: var(--color-primary);
}
.acc-head .acc-ic{
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-soft);
    font-size: 11px;
    margin-top: 4px;
    transition: var(--ease);
    color: var(--text-soft);
}
.acc-head[aria-expanded="true"] .acc-ic{
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
    transform: rotate(180deg);
}
.acc-content{
    color: var(--text-soft);
    line-height: 1.78;
    font-size: 15px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-left: 34px;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}
.acc-item[data-open="true"] .acc-content{
    max-height: 380px;
    opacity: 1;
    margin-top: 12px;
}

/* step small list */
.quick-entry{
    border-radius: var(--radius-md);
    background: var(--card-white);
    border: 1px solid var(--border-soft);
    padding: 28px 26px;
    text-align: center;
    height: 100%;
    transition: var(--ease);
}
.quick-entry:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}
.quick-entry a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.quick-entry i{
    font-size: 24px;
    margin-bottom: 16px;
    background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.quick-entry h3{
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}
.quick-entry p{
    font-size: 13px;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.6;
}

/* info list */
.status-block{
    background: var(--card-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 26px;
    transition: var(--ease);
    height: 100%;
}
.status-block:hover{
    box-shadow: var(--shadow-soft);
}
.status-block .info-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.match-num{
    background: rgba(24, 208, 176, 0.1);
    color: #118A77;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 99px;
}
.info-time{
    font-family: var(--font-num);
    color: var(--text-soft);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.status-block h4{
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
    line-height: 1.4;
}
.status-block p{
    color: var(--text-soft);
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.7;
}
.status-cta{
    display: inline-block;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 14px;
}
.status-cta i{
    transition: var(--ease);
}
.status-cta:hover i{
    transform: translateX(4px);
}

/* footer */
.site-footer{
    background: var(--dark-bg);
    color: rgba(255,255,255,0.68);
    border-top: 2px solid rgba(229, 50, 45, 0.55);
    position: relative;
    padding-top: 66px;
}
.site-footer::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(229,50,45,0.5), rgba(24,208,176,0.4), transparent);
    filter: drop-shadow(0 0 8px rgba(229,50,45,0.3));
}
.footer-upper{
    display: grid;
    grid-template-columns: 1.4fr 0.7fr 1.1fr 1.2fr;
    gap: 40px;
    padding-bottom: 48px;
}
.footer-brand-copy h4{
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-brand-copy h4 .brand-mark{
    color: var(--color-signal);
    font-size: 20px;
    filter: drop-shadow(0 0 8px rgba(24, 208, 176, 0.4));
}
.footer-brand-copy p{
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255,255,255,0.55);
    margin: 0;
    max-width: 300px;
}
.footer-col h5{
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}
.footer-col h5::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26px;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
}
.footer-col ul li{
    margin-bottom: 10px;
    line-height: 1.7;
}
.footer-col ul li a{
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--ease);
    padding: 4px 0;
}
.footer-col ul li a i{
    font-size: 10px;
    color: var(--color-primary);
    margin-right: 5px;
}
.footer-col ul li a:hover{
    color: var(--color-accent);
}
.footer-service{
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255,255,255,0.55);
    margin-bottom: 18px;
}
.footer-service strong{
    display: block;
    margin-bottom: 4px;
    color: rgba(255,255,255,0.8);
    font-weight: 600;
}
.footer-contact-list li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.62);
    margin-bottom: 12px;
}
.footer-contact-list li i{
    color: var(--color-accent);
    margin-top: 6px;
    opacity: 0.7;
}
.footer-bottom{
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 18px 28px;
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    text-align: center;
}
.footer-bottom a{
    color: rgba(255,255,255,0.5);
}
.footer-bottom a:hover{
    color: var(--color-accent);
}
.site-header .main-nav{
    background: rgba(12, 10, 15, 0.95);
}
@media screen and (max-width: 1023px) {
    :root { --space-section: 76px; }
    .cat-hero h1 { font-size: 40px; }
    .footer-upper { grid-template-columns: 1fr 1fr; gap: 32px; }
    .flow-steps { grid-template-columns: repeat(2, 1fr); }
    .tip-band { padding: 38px 28px; }
    .tip-band .tip-actions { justify-content: flex-start; margin-top: 18px; }
}
@media screen and (min-width: 641px) and (max-width: 1023px) {
    .nav-list { order: 3; width: 100%; justify-content: center; margin-top: 6px; }
    .top-nav-wrap { flex-wrap: wrap; }
    .nav-actions { margin-left: auto; }
}
@media screen and (max-width: 640px) {
    :root { --space-section: 64px; }
    body { overflow-x: hidden; }
    .top-nav-wrap { flex-wrap: wrap; padding: 12px 0; }
    .brand-link { font-size: 17px; }
    .nav-list { display: none; }
    .nav-list.mobile-open { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
    .nav-list.mobile-open a { padding: 13px 14px; border-radius: 10px; }
    .mobile-nav-toggle { display: flex; }
    .cat-hero { padding: 60px 0 56px; }
    .cat-hero h1 { font-size: 32px; }
    .hero-desc { font-size: 15px; }
    .section-pad { padding: 54px 0 34px; }
    .section-head h2 { font-size: 27px; }
    .guide-feature-card { padding: 26px 20px; }
    .dual-content { padding: 24px 20px; }
    .flow-steps { grid-template-columns: 1fr; gap: 8px; }
    .flow-step { padding: 22px 8px 14px; }
    .tip-band { padding: 34px 20px; border-radius: var(--radius-md); }
    .tip-band h2 { font-size: 23px; }
    .faq-wrap { padding: 24px 16px; }
    .footer-upper { grid-template-columns: 1fr; gap: 24px; }
    .nav-actions .btn-gradient-main { padding: 8px 14px; font-size: 13px; }
    .nav-actions .btn-outline-light { padding: 8px 13px; font-size: 13px; }
    .dual-media { min-height: 220px; }
    .status-block { margin-bottom: 18px; }
    .quick-entry { margin-bottom: 18px; }
}
@media screen and (max-width: 360px) {
    .brand-link { font-size: 15px; }
    .top-nav-wrap { gap: 10px; }
    .btn-outline-light { display: none; }
    .cat-hero h1 { font-size: 27px; }
    .section-head h2 { font-size: 24px; }
}

/* roulang page: article */
:root {
      --color-primary: #E5322D;
      --color-primary-dark: #C4231E;
      --color-accent: #F5A623;
      --color-live: #18D0B0;
      --color-live-deep: #0FBF9D;
      --color-dark: #0C0A0F;
      --color-dark-soft: #16121D;
      --color-bg: #F6F5F3;
      --color-card: #FFFFFF;
      --color-text: #1C1923;
      --color-muted: #6C6A75;
      --color-border: #E7E2EA;
      --color-neon-line: rgba(229, 50, 45, .55);
      --gradient-main: linear-gradient(120deg, #E5322D, #F5A623);
      --gradient-live: linear-gradient(120deg, #18D0B0, #0EBCA0);
      --radius-lg: 24px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --radius-pill: 999px;
      --shadow-card: 0 2px 4px rgba(15, 10, 25, .04), 0 16px 40px rgba(15, 10, 25, .08);
      --shadow-raise: 0 10px 24px rgba(15, 10, 25, .10), 0 24px 60px rgba(15, 10, 25, .08);
      --font-body: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      --font-num: "DIN Alternate", "Roboto Mono", Consolas, monospace;
      --transition-fast: .22s ease;
      --section-space: 96px;
      --grid-gap: 24px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-body);
      background: var(--color-bg);
      color: var(--color-text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: inline-block;
      vertical-align: middle;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    button,
    input {
      font-family: inherit;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    .grid-container {
      max-width: 1280px;
      padding-left: 32px;
      padding-right: 32px;
    }

    /* ========== Header ========== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 80;
      background: rgba(12, 10, 15, .96);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      box-shadow: 0 1px 0 rgba(24, 208, 176, .18), 0 6px 30px rgba(0, 0, 0, .28);
    }

    .site-header::after {
      content: "";
      display: block;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(24, 208, 176, .6), rgba(229, 50, 45, .6), transparent);
    }

    .header-inner {
      display: flex;
      align-items: center;
      min-height: 80px;
      gap: 32px;
    }

    .brand-area {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: var(--gradient-main);
      color: #fff;
      font-size: 20px;
      box-shadow: 0 6px 18px rgba(229, 50, 45, .3);
    }

    .brand-text {
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      letter-spacing: .02em;
      white-space: nowrap;
    }

    .brand-text em {
      font-style: normal;
      background: linear-gradient(120deg, #fff 0%, #F5A623 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .header-nav-wrap {
      margin-left: auto;
      display: flex;
      align-items: center;
    }

    .main-nav {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .main-nav a {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      padding: 0 16px;
      color: rgba(255, 255, 255, .78);
      font-size: 15px;
      font-weight: 500;
      border-radius: 10px;
      white-space: nowrap;
      transition: color .22s ease, background .22s ease;
    }

    .main-nav a:hover {
      color: #fff;
      background: rgba(255, 255, 255, .06);
    }

    .main-nav a.active {
      color: #fff;
      font-weight: 600;
    }

    .main-nav a.active::after {
      content: "";
      position: absolute;
      bottom: 2px;
      left: 16px;
      right: 16px;
      height: 3px;
      border-radius: 99px;
      background: var(--gradient-main);
      box-shadow: 0 0 12px rgba(229, 50, 45, .55);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 0 0 auto;
    }

    .header-btn {
      min-height: 40px;
      padding: 0 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
    }

    .header-btn:hover {
      transform: translateY(-1px);
    }

    .header-btn-ghost {
      background: rgba(255, 255, 255, .04);
      color: #fff;
      border-color: rgba(255, 255, 255, .35);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
    }

    .header-btn-ghost:hover {
      border-color: var(--color-accent);
      background: rgba(229, 50, 45, .12);
      color: var(--color-accent);
    }

    .header-btn-solid {
      background: var(--gradient-main);
      color: #fff;
      box-shadow: 0 8px 22px rgba(229, 50, 45, .26);
    }

    .header-btn-solid:hover {
      filter: brightness(1.08);
      box-shadow: 0 10px 30px rgba(229, 50, 45, .36);
    }

    .nav-toggle {
      display: none;
      width: 42px;
      height: 42px;
      margin-left: auto;
      background: rgba(255, 255, 255, .06);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 12px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .site-header.mobile-open .nav-toggle .fa-bars {
      display: none;
    }

    .site-header.mobile-open .nav-toggle .fa-close {
      display: inline-block;
    }

    .site-header.mobile-open .header-nav-wrap {
      display: block;
    }

    @media (max-width: 1100px) {
      .header-inner {
        gap: 16px;
      }

      .header-actions .header-btn-ghost {
        display: none;
      }
    }

    @media (max-width: 899px) {
      .header-inner {
        flex-wrap: wrap;
        min-height: 72px;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .brand-area {
        flex: 1 1 auto;
      }

      .nav-toggle {
        display: inline-flex;
      }

      .header-actions {
        order: 4;
        width: 100%;
        margin-top: 4px;
      }

      .header-actions .header-btn-ghost {
        display: inline-flex;
      }

      .header-nav-wrap {
        display: none;
        order: 5;
        width: 100%;
        padding-top: 12px;
      }

      .main-nav {
        flex-direction: column;
        align-items: stretch;
        background: rgba(22, 18, 29, .92);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 18px;
        padding: 12px;
      }

      .main-nav a {
        min-height: 48px;
        padding: 0 14px;
        border-radius: 12px;
      }

      .main-nav a.active::after {
        display: none;
      }

      .main-nav a.active {
        background: linear-gradient(120deg, rgba(229, 50, 45, .2), rgba(245, 166, 35, .14));
        color: #fff;
      }
    }

    /* ========== Article Hero ========== */
    .article-hero {
      position: relative;
      padding: 68px 0 56px;
      background:
        linear-gradient(180deg, rgba(12, 10, 15, .88), rgba(12, 10, 15, .96)),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .article-hero::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 180px;
      background: linear-gradient(180deg, transparent, rgba(246, 245, 243, 1));
      pointer-events: none;
    }

    .article-hero .grid-container {
      position: relative;
      z-index: 1;
      max-width: 1080px;
    }

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, .58);
      font-size: 13px;
      margin-bottom: 34px;
    }

    .breadcrumb a {
      color: rgba(255, 255, 255, .76);
    }

    .breadcrumb a:hover {
      color: var(--color-accent);
    }

    .breadcrumb-sep {
      color: rgba(255, 255, 255, .35);
    }

    .breadcrumb .crumb-current {
      color: #fff;
      max-width: 280px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .article-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--color-accent);
      font-size: 14px;
      font-weight: 600;
      background: rgba(245, 166, 35, .1);
      border: 1px solid rgba(245, 166, 35, .35);
      padding: 6px 14px;
      border-radius: 999px;
      margin-bottom: 22px;
    }

    .article-kicker i {
      color: var(--color-live);
      font-size: 13px;
    }

    .article-hero h1 {
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: #fff;
      max-width: 900px;
      text-wrap: pretty;
    }

    .post-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 18px;
      margin-top: 34px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .post-meta-left {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px 22px;
      color: rgba(255, 255, 255, .68);
      font-size: 14px;
    }

    .post-meta-left .meta-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .post-meta-left i {
      width: 18px;
      color: var(--color-accent);
      text-align: center;
    }

    .meta-author {
      color: #fff;
      font-weight: 500;
    }

    .meta-category {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--color-accent);
      background: rgba(245, 166, 35, .1);
      border-radius: 999px;
      padding: 4px 12px;
      font-size: 13px;
    }

    .post-meta-right {
      color: rgba(255, 255, 255, .6);
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .post-meta-right .live-dot-small {
      width: 7px;
      height: 7px;
      background: var(--color-live);
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(24, 208, 176, .5);
      animation: pulse-live 2s infinite;
    }

    @keyframes pulse-live {
      0% {
        box-shadow: 0 0 0 0 rgba(24, 208, 176, .6);
      }
      70% {
        box-shadow: 0 0 0 8px rgba(24, 208, 176, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(24, 208, 176, 0);
      }
    }

    @media (max-width: 640px) {
      .article-hero {
        padding: 42px 0 40px;
      }
      .post-meta {
        flex-direction: column;
      }
    }

    /* ========== Article Main ========== */
    .article-main {
      position: relative;
      z-index: 2;
      padding: 44px 0 72px;
    }

    .article-layout {
      max-width: 1080px;
      margin: 0 auto;
    }

    .article-body {
      background: #fff;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card);
      padding: clamp(28px, 6vw, 58px);
      max-width: 860px;
      margin: 0 auto;
    }

    .cms-content {
      word-break: break-word;
      font-size: 17px;
      line-height: 1.9;
      color: #2b2830;
    }

    .cms-content p {
      margin-bottom: 1.6em;
    }

    .cms-content strong {
      color: var(--color-text);
      font-weight: 700;
    }

    .cms-content h2,
    .cms-content h3,
    .cms-content h4 {
      color: var(--color-text);
      margin: 1.9em 0 .8em;
      line-height: 1.35;
      font-weight: 700;
    }

    .cms-content h2 {
      font-size: 28px;
      margin-top: 2.2em;
    }

    .cms-content h3 {
      font-size: 22px;
    }

    .cms-content h4 {
      font-size: 18px;
    }

    .cms-content a {
      color: var(--color-primary);
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-color: rgba(229, 50, 45, .4);
    }

    .cms-content a:hover {
      color: var(--color-primary-dark);
      text-decoration-color: currentColor;
    }

    .cms-content ul,
    .cms-content ol {
      margin: 0 0 1.6em;
      padding-left: 1.4em;
    }

    .cms-content ul li,
    .cms-content ol li {
      margin-bottom: .6em;
    }

    .cms-content ul li::marker {
      color: var(--color-primary);
    }

    .cms-content ol li::marker {
      color: var(--color-accent);
      font-weight: 700;
    }

    .cms-content blockquote {
      border-left: 4px solid var(--color-primary);
      background: linear-gradient(90deg, rgba(229, 50, 45, .05), rgba(245, 166, 35, .02));
      padding: 18px 22px;
      border-radius: 0 16px 16px 0;
      margin: 1.8em 0;
      font-size: 18px;
      line-height: 1.7;
      color: #44404a;
    }

    .cms-content blockquote p {
      margin-bottom: .4em;
    }

    .cms-content img {
      border-radius: 18px;
      margin: 1.2em 0;
      box-shadow: var(--shadow-card);
    }

    .cms-content figure {
      margin: 1.8em 0;
    }

    .cms-content figure img {
      margin-bottom: .6em;
    }

    .cms-content figcaption {
      text-align: center;
      color: var(--color-muted);
      font-size: 13px;
    }

    .cms-content code {
      background: rgba(0, 0, 0, .06);
      border-radius: 6px;
      padding: 2px 7px;
      font-size: .92em;
      font-family: "SFMono-Regular", Consolas, monospace;
      color: #c7254e;
    }

    .cms-content pre {
      background: #15121B;
      padding: 20px 22px;
      border-radius: 16px;
      overflow-x: auto;
      margin: 1.8em 0;
      border: 1px solid rgba(255, 255, 255, .08);
      line-height: 1.7;
    }

    .cms-content pre code {
      background: transparent;
      color: #B9C7D6;
      padding: 0;
      font-size: 14px;
    }

    .cms-content hr {
      border: none;
      height: 1px;
      background: var(--color-border);
      margin: 2.4em 0;
    }

    @media (max-width: 640px) {
      .article-body {
        padding: 24px 18px;
        border-radius: 18px;
      }
    }

    /* ========== Tag ========== */
    .article-tagline {
      margin-top: 34px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
    }

    .article-tagline span {
      color: var(--color-muted);
      font-size: 13px;
    }

    .post-tag {
      display: inline-flex;
      align-items: center;
      background: #F2F0F4;
      color: #4B4752;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      transition: all .2s ease;
    }

    .post-tag:hover {
      color: var(--color-primary);
      background: rgba(229, 50, 45, .08);
    }

    /* ========== Article Footer Navigation ========== */
    .article-pager {
      max-width: 860px;
      margin: 44px auto 0;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }

    .pager-card {
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      min-height: 110px;
      justify-content: center;
      padding: 20px 22px;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .pager-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-card);
      border-color: rgba(229, 50, 45, .25);
    }

    .pager-card .pager-label {
      color: var(--color-muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin-bottom: 8px;
    }

    .pager-card .pager-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-text);
      line-height: 1.4;
    }

    .pager-card .pager-icon {
      color: var(--color-primary);
      font-size: 18px;
      margin-bottom: 10px;
    }

    .pager-card .fa-arrow-right {
      color: var(--color-primary);
    }

    .pager-back {
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, rgba(229, 50, 45, .08), rgba(245, 166, 35, .06));
    }

    .pager-back .pager-back-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .pager-back .fa-grid-2 {
      font-size: 20px;
      color: var(--color-primary);
    }

    .pager-back .pager-label {
      margin-bottom: 0;
    }

    @media (max-width: 760px) {
      .article-pager {
        grid-template-columns: 1fr;
      }
      .pager-card {
        min-height: 90px;
      }
    }

    /* ========== Related ========== */
    .article-related {
      max-width: 1080px;
      margin: 72px auto 0;
      padding-top: 56px;
      border-top: 1px solid var(--color-border);
    }

    .section-headline {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px;
    }

    .section-headline i {
      color: var(--color-primary);
      font-size: 22px;
    }

    .section-headline h2 {
      font-size: 24px;
      font-weight: 700;
      color: var(--color-text);
    }

    .related-empty {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      background: #fff;
      border: 1px dashed #D8D2DD;
      border-radius: 18px;
      padding: 28px 30px;
    }

    .related-empty-content {
      display: flex;
      align-items: center;
      gap: 16px;
      color: var(--color-muted);
    }

    .related-empty-content i {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #F4F1F6;
      border-radius: 50%;
      color: var(--color-primary);
      font-size: 18px;
    }

    .related-empty-content p strong {
      color: var(--color-text);
      display: block;
      margin-bottom: 2px;
    }

    .empty-link-btn {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(229, 50, 45, .1);
      color: var(--color-primary);
      border-radius: 999px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 600;
      transition: all .2s ease;
    }

    .empty-link-btn:hover {
      background: var(--color-primary);
      color: #fff;
      transform: translateY(-2px);
    }

    @media (max-width: 640px) {
      .related-empty {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    /* ========== Article Empty State ========== */
    .article-missing {
      padding: 110px 0 120px;
      background: var(--color-bg);
    }

    .missing-box {
      background: #fff;
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border);
      text-align: center;
      padding: 70px 40px;
      max-width: 640px;
      margin: 0 auto;
      box-shadow: var(--shadow-card);
    }

    .missing-box i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: linear-gradient(120deg, rgba(229, 50, 45, .1), rgba(245, 166, 35, .1));
      color: var(--color-primary);
      font-size: 30px;
      margin-bottom: 26px;
    }

    .missing-box h1 {
      font-size: 30px;
      font-weight: 800;
      color: var(--color-text);
      margin-bottom: 14px;
    }

    .missing-box p {
      color: var(--color-muted);
      margin-bottom: 28px;
    }

    .missing-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--gradient-main);
      color: #fff;
      border-radius: 999px;
      padding: 12px 28px;
      font-weight: 600;
      font-size: 15px;
      transition: all .2s ease, box-shadow .2s ease;
      box-shadow: 0 6px 16px rgba(229, 50, 45, .24);
    }

    .missing-btn:hover {
      filter: brightness(1.06);
      transform: translateY(-2px);
      color: #fff;
    }

    /* ========== Detail CTA ========== */
    .article-cta-section {
      background:
        linear-gradient(rgba(12, 10, 15, .88), rgba(12, 10, 15, .96)),
        url('/assets/images/backpic/back-2.png') center/cover no-repeat;
      padding: 64px 0;
      border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .detail-cta-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      color: #fff;
    }

    .detail-cta-copy h2 {
      font-size: clamp(22px, 3vw, 32px);
      line-height: 1.4;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .detail-cta-copy p {
      color: rgba(255, 255, 255, .7);
      max-width: 460px;
    }

    .detail-cta-form {
      display: flex;
      gap: 12px;
      flex: 0 1 520px;
    }

    .detail-cta-form .cta-input {
      flex: 1 1 auto;
      min-height: 52px;
      border: 1px solid rgba(255, 255, 255, .2);
      background: rgba(255, 255, 255, .08);
      border-radius: 14px;
      padding: 0 20px;
      color: #fff;
      font-size: 15px;
      transition: border-color .2s ease, background .2s ease;
    }

    .detail-cta-form .cta-input::placeholder {
      color: rgba(255, 255, 255, .45);
    }

    .detail-cta-form .cta-input:focus {
      border-color: var(--color-accent);
      background: rgba(255, 255, 255, .1);
      outline: none;
    }

    .detail-cta-form .cta-btn {
      min-width: 150px;
      border: none;
      background: var(--gradient-main);
      color: #fff;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: filter .2s ease, transform .2s ease;
    }

    .detail-cta-form .cta-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.1);
    }

    .form-feedback {
      flex-basis: 100%;
      color: var(--color-accent);
      font-size: 14px;
      margin-top: 6px;
    }

    @media (max-width: 960px) {
      .detail-cta-wrap {
        flex-direction: column;
        align-items: flex-start;
      }
      .detail-cta-form {
        width: 100%;
        flex-basis: auto;
      }
    }

    @media (max-width: 600px) {
      .detail-cta-form {
        flex-direction: column;
      }
      .detail-cta-form .cta-btn {
        min-height: 48px;
      }
    }

    /* ========== Footer ========== */
    .site-footer {
      background: #08070A;
      color: rgba(255, 255, 255, .7);
      border-top: 1px solid rgba(255, 255, 255, .08);
      padding: 72px 0 30px;
      font-size: 14px;
    }

    .site-footer::before {
      content: "";
      display: block;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(24, 208, 176, .5), rgba(229, 50, 45, .5), transparent);
      margin-bottom: 60px;
    }

    .footer-upper {
      display: grid;
      grid-template-columns: 2fr 1fr 1.2fr 1.3fr;
      gap: 36px;
      margin-bottom: 48px;
    }

    .footer-brand-copy h4 {
      font-size: 22px;
      color: #fff;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .footer-brand-copy h4 .brand-mark {
      width: 34px;
      height: 34px;
      font-size: 17px;
    }

    .footer-brand-copy p {
      color: rgba(255, 255, 255, .5);
      line-height: 1.8;
      max-width: 320px;
    }

    .footer-col h5 {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 18px;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col li a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: rgba(255, 255, 255, .6);
      padding: 4px 0;
      font-size: 14px;
    }

    .footer-col li a i {
      color: var(--color-primary);
      font-size: 11px;
    }

    .footer-col li a:hover {
      color: #fff;
    }

    .footer-service {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      padding: 16px;
      border-radius: 14px;
      line-height: 1.7;
    }

    .footer-service strong {
      display: block;
      color: rgba(255, 255, 255, .92);
      margin-bottom: 6px;
    }

    .footer-contact-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer-contact-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(255, 255, 255, .55);
      line-height: 1.6;
    }

    .footer-contact-list li i {
      color: var(--color-accent);
      margin-top: 2px;
      width: 18px;
      text-align: center;
    }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .4);
      font-size: 13px;
    }

    .footer-bottom a {
      color: rgba(255, 255, 255, .5);
    }

    .footer-bottom a:hover {
      color: var(--color-accent);
    }

    @media (max-width: 1024px) {
      .footer-upper {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
      .footer-upper {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .site-footer {
        padding-top: 44px;
      }
      .site-footer::before {
        margin-bottom: 40px;
      }
    }

    @media (max-width: 520px) {
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    /* ========== Reveal & Misc ========== */
    .section-fade {
      animation: reveal-up .7s ease both;
    }

    @keyframes reveal-up {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 700px) {
      .grid-container {
        padding-left: 18px;
        padding-right: 18px;
      }
    }

/* roulang page: category3 */
:root{
    --color-primary:#E5322D;
    --color-accent:#F5A623;
    --color-live:#18D0B0;
    --color-dark:#0C0A0F;
    --color-dark-soft:#16131B;
    --color-page:#F6F5F3;
    --color-card:#FFFFFF;
    --color-text:#1C1923;
    --color-text-soft:#6C6A75;
    --color-border:#E7E2EA;
    --gradient-main:linear-gradient(120deg,#E5322D,#F5A623);
    --gradient-live:linear-gradient(135deg,#18D0B0,#17C2DE);
    --shadow-card:0 2px 4px rgba(15,10,25,.04),0 16px 40px rgba(15,10,25,.08);
    --shadow-hover:0 6px 12px rgba(15,10,25,.08),0 24px 48px rgba(15,10,25,.12);
    --radius-xl:24px;
    --radius-lg:16px;
    --radius-sm:12px;
    --font-primary:"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
    --font-num:"DIN Alternate","Roboto Mono",Consolas,monospace;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font-primary);
    background:var(--color-page);
    color:var(--color-text);
    line-height:1.75;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
  }
  body.no-scroll{overflow:hidden}
  img{max-width:100%;height:auto;display:block}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit}
  .container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
  h1,h2,h3,h4{line-height:1.3;font-weight:700}
  .section-pad{padding:90px 0}
  @media(max-width:860px){.section-pad{padding:60px 0}}

  /* navigation */
  .site-header{
    position:sticky;top:0;z-index:120;background:rgba(12,10,15,.96);
    border-bottom:1px solid rgba(24,208,176,.25);
    box-shadow:0 4px 30px rgba(229,50,45,.06);
  }
  .site-header::after{
    content:"";display:block;height:2px;width:100%;
    background:linear-gradient(90deg,var(--color-primary),var(--color-live));
    opacity:.45;
  }
  .nav-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:0 24px}
  .brand-logo{
    display:flex;align-items:center;gap:12px;color:#fff;font-weight:900;font-size:24px;
    padding:16px 0;letter-spacing:.5px;transition:opacity .3s;
  }
  .brand-logo:hover{opacity:.9}
  .brand-logo i{
    width:38px;height:38px;border-radius:10px;background:var(--gradient-main);
    display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
    box-shadow:0 0 18px rgba(229,50,45,.4);
  }
  .main-nav{display:flex;gap:34px;align-items:center}
  .nav-item{
    position:relative;color:#D5D2DC;font-size:15px;font-weight:500;padding:18px 0;
    transition:color .3s;
  }
  .nav-item:hover{color:var(--color-accent)}
  .nav-item.active{color:#fff}
  .nav-item.active::after{
    content:"";position:absolute;bottom:12px;left:0;right:0;height:3px;border-radius:3px;
    background:var(--gradient-main);box-shadow:0 0 12px var(--color-primary);
  }
  .nav-actions{display:flex;align-items:center;gap:14px;padding:10px 0}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border-radius:999px;font-weight:600;font-size:15px;line-height:1;
    padding:12px 24px;transition:all .3s;cursor:pointer;border:none;outline-offset:2px;
  }
  .btn-border{
    background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;
  }
  .btn-border:hover{border-color:var(--color-accent);color:var(--color-accent)}
  .btn-gradient{
    background:var(--gradient-main);color:#fff;box-shadow:0 0 16px rgba(229,50,45,.3);
  }
  .btn-gradient:hover{filter:brightness(1.15);box-shadow:0 0 24px rgba(229,50,45,.45)}
  .nav-toggle{
    display:none;background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;
    width:44px;height:44px;border-radius:8px;
  }
  .nav-toggle:hover{background:rgba(255,255,255,.08)}
  @media(max-width:1024px){
    .nav-row{padding:0 16px}
    .nav-toggle{display:inline-flex;align-items:center;justify-content:center;z-index:100}
    .main-nav{
      display:flex;position:fixed;top:0;right:0;width:320px;height:100vh;height:100dvh;
      background:rgba(12,10,15,.98);flex-direction:column;gap:0;padding:90px 32px 30px;
      box-shadow:-20px 0 50px rgba(0,0,0,.5);transform:translateX(100%);
      transition:transform .35s ease;z-index:99;border-left:1px solid rgba(255,255,255,.08);
    }
    .main-nav.open{transform:translateX(0)}
    .main-nav a{
      font-size:18px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06);
    }
    .main-nav a.active::after{display:none}
    .nav-actions{display:flex;gap:10px;margin-left:auto}
    .nav-actions .btn{font-size:13px;padding:9px 16px}
  }
  @media(max-width:520px){
    .nav-actions .btn{display:none}
    .brand-logo{font-size:19px;gap:8px}
    .brand-logo i{width:32px;height:32px;font-size:14px}
  }

  /* pagetop / hero for category */
  .category-hero{
    position:relative;background:var(--color-dark) ;
    padding:65px 0 85px;color:#fff;overflow:hidden;
  }
  .category-hero::before{
    content:"";position:absolute;inset:0;background-image:
      radial-gradient(circle at 78% 10%,rgba(229,50,45,.22),transparent 55%),
      radial-gradient(circle at 15% 80%,rgba(24,208,176,.14),transparent 40%);
    pointer-events:none;
  }
  .hero-pattern{
    position:absolute;inset:0;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:40px 40px;
  }
  .hero-grid{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
  @media(max-width:1024px){.hero-grid{grid-template-columns:1fr;gap:44px}}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;border-radius:999px;
    background:rgba(24,208,176,.12);border:1px solid rgba(24,208,176,.3);
    padding:6px 14px;font-size:13px;letter-spacing:1px;color:var(--color-live);
    font-weight:500;
  }
  .eyebrow .live-dot{
    width:8px;height:8px;background:var(--color-live);border-radius:50%;
    box-shadow:0 0 12px var(--color-live);animation:livePulse 2s infinite;
  }
  @keyframes livePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.5}}
  .category-hero h1{
    font-size:47px;line-height:1.2;margin:20px 0 16px;font-weight:900;color:#fff;
  }
  .hero-gradient-text{
    background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .category-hero .lead{
    font-size:18px;line-height:1.75;color:#BDB9C7 ;max-width:560px;margin-bottom:28px;
  }
  .hero-stats{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px}
  .hero-stat{text-align:left}
  .hero-stat strong{
    font-family:var(--font-num);font-size:30px;display:block;font-weight:800;
    color:var(--color-accent);line-height:1;
  }
  .hero-stat span{font-size:13px;color:#A9A3B5;margin-top:6px;display:inline-block}
  .hero-visual{
    position:relative;
  }
  .hero-card{
    background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);
    backdrop-filter:blur(8px);padding:26px;position:relative;overflow:hidden;
  }
  .hero-card img{
    width:100%;height:220px;object-fit:cover;border-radius:var(--radius-lg);
    margin-bottom:20px;
  }
  .hero-live-badge{
    position:absolute;top:42px;left:42px;display:inline-flex;align-items:center;gap:6px;
    background:rgba(12,10,15,.85);color:#fff;padding:6px 16px;
    border-radius:999px;font-size:15px;font-weight:700;z-index:3;
    border:1px solid rgba(24,208,176,.4);
  }
  .hero-live-badge i{color:var(--color-live);font-size:10px;animation:livePulse 1.5s infinite}
  .booking-date-wrap{
    display:flex;justify-content:space-between;align-items:center;
    background:rgba(12,10,15,.45);border-radius:var(--radius-sm);padding:12px 16px;
  }
  .booking-date-label{color:#A9A3B5;font-size:13px;display:block}
  .booking-date-value{color:#fff;font-size:17px;font-weight:700;letter-spacing:.5px}
  .booking-meta{
    display:flex;justify-content:space-between;margin-top:12px;color:#CBC5D6;
    font-size:14px;
  }
  @media(max-width:860px){
    .category-hero{padding:45px 0 65px}
    .category-hero h1{font-size:32px}
  }
  @media(max-width:520px){
    .category-hero h1{font-size:27px}
    .hero-card{padding:14px}
    .hero-live-badge{left:28px;top:30px}
    .hero-card img{height:170px}
  }

  /* content modules */
  .section-title-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap}
  .section-title h2{
    position:relative;padding-left:18px;font-size:32px;
  }
  .section-title h2::before{
    content:"";position:absolute;left:0;top:5px;bottom:5px;width:4px;
    border-radius:4px;background:var(--gradient-main);
  }
  .section-subtitle{
    color:var(--color-text-soft);margin-top:8px;font-size:15px;padding-left:18px;
  }
  .section-link{
    font-size:15px;font-weight:500;color:var(--color-primary);display:inline-flex;
    align-items:center;gap:6px;transition:gap .2s;white-space:nowrap;
  }
  .section-link:hover{gap:10px;color:#B92A26}

  /* booking flow */
  .dark-block{
    background:var(--color-dark);color:#fff;position:relative;overflow:hidden;
  }
  .dark-block::before{
    content:"";position:absolute;
    background:radial-gradient(circle at 80% 100%,rgba(229,50,45,.2),transparent 45%);
    inset:0;pointer-events:none;
  }
  .step-select{
    display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;
  }
  .step-card{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius-lg);padding:28px 22px;transition:all .25s;position:relative;
  }
  .step-card:hover{background:rgba(255,255,255,.08);border-color:var(--color-accent)}
  .step-num{
    font-family:var(--font-num);font-size:36px;font-weight:800;
    background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;line-height:1;color:var(--color-primary);
  }
  .step-card h3{font-size:17px;margin:12px 0 5px;font-weight:700}
  .step-card p{color:#A9A3B5;font-size:14px;line-height:1.6}
  @media(max-width:1024px){
    .step-select{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:520px){
    .step-select{grid-template-columns:1fr}
    .section-title h2{font-size:24px}
  }

  /* card grid specialty */
  .section-white{
    background:#fff;
  }
  .booking-cat-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:26px;
  }
  .booking-feature-card{
    background:var(--color-page);border:1px solid var(--color-border);
    border-radius:var(--radius-xl);padding:28px;
    transition:all .3s;border-left:4px solid var(--color-accent);
  }
  .booking-feature-card:nth-child(even){background:#fff}
  .booking-feature-card:first-child{
    grid-column:1/-1;border-left:5px solid var(--color-primary);background:#fff;
  }
  .booking-feature-card:hover{
    transform:translateY(-4px);box-shadow:var(--shadow-card);
  }
  .fcard-icon{
    width:48px;height:48px;border-radius:14px;background:var(--gradient-main);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;
  }
  .fcard-icon.signal{
    background:linear-gradient(120deg,#18D0B0,#17C2DE);
    box-shadow:0 0 14px rgba(24,208,176,.26);
  }
  .fcard-icon.gold{
    background:linear-gradient(120deg,#F5A623,#F7DC72);
    box-shadow:0 0 14px rgba(245,166,35,.22);
  }
  .booking-feature-card h3{font-size:20px;margin-bottom:8px;}
  .first-card-head{font-size:21px;margin-bottom:10px}
  .booking-feature-card p{
    color:var(--color-text-soft);font-size:15px;line-height:1.7;
  }
  .service-points{
    display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin-top:16px;padding:0;
  }
  .service-points li{
    font-size:14px;background:#fff;padding:6px 16px;border-radius:999px;
    color:var(--color-text);border:1px solid var(--color-border);
  }
  .service-points li i{
    color:var(--color-primary);margin-right:6px;
  }
  @media(max-width:860px){
    .booking-cat-grid{grid-template-columns:1fr;gap:20px}
    .booking-feature-card:first-child{grid-column:1;}
  }

  /* time table */
  .booking-hit-list{
    margin-top:20px;
  }
  .span-table-head,.span-time-row{
    display:grid;grid-template-columns:100px 1.4fr .5fr 230px;gap:18px;
    padding:12px 22px;align-items:center;
  }
  .span-table-head{
    background:var(--color-dark);color:rgba(255,255,255,.7);
    border-radius:14px;font-size:13px;font-weight:500;letter-spacing:1px;
  }
  .span-time-row{
    background:#fff;border:1px solid var(--color-border);border-radius:12px;
    margin-bottom:12px;transition:all .25s;color:var(--color-text);
  }
  .span-time-row:hover{
    box-shadow:var(--shadow-card);transform:translateX(4px);border-color:var(--color-primary);
  }
  .span-date{font-family:var(--font-num);font-weight:700;color:#fff;background:linear-gradient(120deg,#f15753,#d62723);padding:3px 10px;border-radius:7px;display:inline-block;text-align:center}
  .span-team-name{
    font-weight:700;font-size:16px;}
  .span-team-name small{color:var(--color-text-soft);font-weight:400; display:block; line-height:1.4}
  .span-label{
    text-align:center;color:var(--color-text-soft);font-size:14px;
  }
  .span-btn-wrap{display:flex;justify-content:flex-end}
  .span-remind-btn{
    border-radius:12px;padding:8px 20px;border:1.5px solid var(--color-primary);
    color:var(--color-primary);font-weight:600;font-size:14px;
    transition:background .2s;cursor:pointer;background:#fff;
  }
  .span-remind-btn:hover{
    background:var(--color-primary);color:#fff;
    box-shadow:0 0 12px rgba(229,50,45,.2);
  }
  .span-remind-btn.reminded{
    background:var(--color-accent);border-color:var(--color-accent);color:#FFF;
  }
  .span-remind-btn.reminded::before{
    content:"✓ ";font-weight:700;
  }
  @media(max-width:1024px){
    .span-table-head{
      grid-template-columns:100px 1.4fr .5fr;display:grid;
    }
    .span-time-row{
      grid-template-columns:100px 1fr 1.2fr;display:grid;
    }
    .span-btn-wrap{
      position:absolute;right:15px;bottom:10px;
    }
    .span-btn-wrap{justify-content:flex-start}
    .span-time-row{position:relative;padding-bottom:52px}
  }
  @media(max-width:520px){
    .span-table-head{display:none}
    .span-time-row{
      grid-template-columns:88px 1fr;display:grid;gap:6px 12px;padding:16px 12px 54px;
      position:relative;
    }
    .span-label{display:none}
    .span-btn-wrap{position:absolute;right:10px;bottom:8px}
    .span-time-row .span-team-name::before{
      content:"对阵与信息：";font-size:12px;color:var(--color-text-soft);display:block;
    }
  }

  /* flow breakdown */
  .booking-step{
    display:flex;gap:44px;justify-content:space-around;flex-wrap:wrap;
    position:relative;
  }
  .booking-step-item{
    flex:1;min-width:200px;text-align:center;padding:18px;
    background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);
    transition:all .3s;
  }
  .booking-step-item:hover{
    transform:scale(1.03);box-shadow:var(--shadow-card);
  }
  .booking-step-icon{
    font-size:30px;color:var(--color-primary);margin-bottom:10px;
  }
  .booking-step-item h4{font-size:16px;margin-bottom:6px}
  .booking-step-item p{color:var(--color-text-soft);font-size:14px;line-height:1.5;margin-bottom:0}
  @media(max-width:660px){
    .booking-step{flex-direction:column;gap:20px}
  }

  /* device visual */
  .device-block{
    display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;
  }
  .device-single{
    background:#fff;border-radius:var(--radius-xl);border:1px solid var(--color-border);
    padding:25px 28px;transition:all .25s;
  }
  .device-single:hover{
    box-shadow:var(--shadow-hover);border-color:rgba(229,50,45,.2);
  }
  .device-single h3{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .device-single p{color:var(--color-text-soft);font-size:15px}
  .device-single .tagline-mini{
    color:#fff;
    display:inline-flex;align-items:center;gap:5px;font-size:12px;
    background:var(--color-primary);padding:3px 10px;border-radius:6px;
  }
  .device-single .tagline-mini.gold{background:var(--color-accent)}
  .device-single .tagline-mini.signal{background:var(--color-live);color:#0a3a30}
  @media(max-width:760px){
    .device-block{grid-template-columns:1fr}
  }

  /* cta */
  .cta-panel{
    background-image:linear-gradient(120deg,rgba(12,10,15,.92),rgba(12,10,15,.72)),url(/assets/images/backpic/back-1.webp);
    background-size:cover;background-position:center;
    border-radius:var(--radius-xl);padding:54px;color:#fff;position:relative;overflow:hidden;
  }
  .cta-panel h2{font-size:34px;line-height:1.3;max-width:700px}
  .cta-panel p{color:#C7C0CE;max-width:560px;margin:14px 0 24px;font-size:16px}
  @media(max-width:640px){
    .cta-panel{padding:32px 20px}
    .cta-panel h2{font-size:25px;line-height:1.4}
  }

  /* faq */
  .faq-grid{
    display:block;
  }
  .faq-item{
    background:#fff;border:1.5px solid var(--color-border);border-radius:var(--radius-lg);
    margin-bottom:12px;overflow:hidden;transition:box-shadow .25s;position:relative;
  }
  .faq-item.active{border-color:var(--color-primary);box-shadow:var(--shadow-card);border-left:4px solid var(--color-primary)}
  .faq-btn{
    width:100%;background:transparent;border:none;text-align:left;padding:22px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    cursor:pointer;font-weight:600;font-size:16.5px;line-height:1.4;color:var(--color-text);
    transition:background .25s;
  }
  .faq-btn:hover{background:#FFFBFA}
  .faq-btn i{
    color:var(--color-primary);font-size:16px;transition:transform .35s,color .3s;
    flex-shrink:0;width:24px;height:24px;display:flex;
    align-items:center;justify-content:center;
  }
  .faq-item.active .faq-btn i{transform:rotate(180deg)}
  .faq-answer{
    max-height:0;overflow:hidden;transition:max-height .4s ease;
  }
  .faq-content{
    color:#564B5C;padding:0 28px 24px 28px;font-size:14.5px;line-height:1.8;
    font-weight:400;
  }
  /* footer */
  .site-footer{
    background:var(--color-dark);color:#CBC5D6;border-top:2px solid rgba(24,208,176,.45);
  }
  .footer-upper{
    display:grid;grid-template-columns:1.6fr 1fr .9fr 1fr;gap:46px;
    padding:60px 0 40px;
  }
  .site-footer h4{
    display:flex;align-items:center;color:#fff;font-size:20px;
    gap:8px;margin-bottom:16px;
  }
  .site-footer h4 .brand-mark{
    width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;
    justify-content:center;
    background:var(--gradient-main);color:#fff;font-size:13px;
  }
  .site-footer h5{
    color:#fff;font-size:16px;margin:10px 0 14px;font-weight:600;
  }
  .footer-brand-copy p{color:#B4AEBD;font-size:14px;line-height:1.8;margin:0}
  .site-footer .footer-col ul{list-style:none;margin:0;padding:0}
  .site-footer .footer-col li{margin-bottom:10px}
  .site-footer .footer-col ul a{
    color:#CBC5D6;font-size:14px;transition:color .2s;display:inline-flex;align-items:center;gap:8px;
  }
  .site-footer .footer-col ul a i{font-size:12px;color:var(--color-accent)}
  .site-footer .footer-col ul a:hover{color:#fff}
  .footer-service{
    background:rgba(255,255,255,.05);padding:14px 16px;border-radius:10px;
    color:#A9A3B5;font-size:14px;line-height:1.8;
  }
  .footer-service strong{
    display:block;color:#fff;font-size:14px;margin-bottom:4px;
  }
  .footer-contact-list li{
    display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-bottom:12px;
  }
  .footer-contact-list i{color:var(--color-live);margin-top:4px;width:16px;text-align:center}
  .footer-bottom{
    padding:20px 0 18px;border-top:1px solid rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    font-size:13px;color:#8A8494;flex-wrap:wrap;
  }
  .footer-bottom a{color:var(--color-accent)}
  .footer-bottom a:hover{color:#fff}
  @media(max-width:1024px){
    .footer-upper{
      grid-template-columns:1fr 1fr;padding:44px 4px;
      gap:34px;
    }
  }
  @media(max-width:560px){
    .footer-upper{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column}
  }

  /* general media */
  .feature-topic-card{
    background:var(--color-card);border-radius:var(--radius-xl);
    border:1px solid var(--color-border);overflow:hidden;
    transition:transform .3s,box-shadow .3s;
  }
  .feature-topic-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
  .feature-topic-media{overflow:hidden;position:relative}
  .feature-topic-media img{width:100%;height:190px;object-fit:cover;transition:transform .6s}
  .feature-topic-card:hover .feature-topic-media img{transform:scale(1.04)}
  .feature-topic-detail{
    padding:22px;
  }
  .feature-topic-detail h3{
    font-size:19px;margin-bottom:8px;line-height:1.4;transition:color .25s;
  }
  .feature-topic-card:hover h3{color:var(--color-primary)}
  .feature-topic-detail p{
    color:var(--color-text-soft);font-size:15px;
  }
  .feature-topic-detail .tag{
    display:inline-block;background:rgba(24,208,176,.1);padding:3px 8px;border-radius:6px;
    font-size:12px;color:#0B8A76;margin-bottom:10px;
  }
  .list-feature{
    background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);
    padding:16px 18px;display:flex;gap:12px;align-items:center;margin-bottom:8px;
    transition:background .2s;
  }
  .list-feature:hover{background:var(--color-page)}
  .list-feature i{color:var(--color-primary);flex-shrink:0}

  @media(max-width:760px){
    .two-grid{grid-template-columns:1fr!important;gap:18px!important}
    .footer-upper{padding-left:10px;padding-right:10px}
    .brand-copy p{font-size:15px}
  }
  .reveal-step{  list-style: none;  padding-left: 0 !important;  margin-left:0 !important}

/* roulang page: category2 */
:root {
      --color-primary: #E5322D;
      --color-primary-deep: #C9221E;
      --color-accent: #F5A623;
      --color-signal: #18D0B0;
      --color-ink: #0C0A0F;
      --color-surface: #F6F5F3;
      --color-card: #FFFFFF;
      --color-text: #1C1923;
      --color-text-soft: #6C6A75;
      --color-border: #E7E2EA;
      --gradient-main: linear-gradient(120deg, #E5322D, #F5A623);
      --gradient-live: linear-gradient(90deg, #18D0B0, #1EE6BE);
      --shadow-soft: 0 2px 4px rgba(15, 10, 25, .04), 0 16px 40px rgba(15, 10, 25, .08);
      --shadow-hover: 0 6px 14px rgba(15, 10, 25, .08), 0 22px 50px rgba(15, 10, 25, .12);
      --radius-xl: 24px;
      --radius-lg: 16px;
      --radius-sm: 12px;
      --font-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      --font-num: "DIN Alternate", "Roboto Mono", Consolas, monospace;
      --transition: .25s cubic-bezier(.3, 0, .2, 1);
      --section-space: clamp(60px, 8vw, 104px);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-padding-top: 92px;
    }

    body {
      font-family: var(--font-sans);
      background: var(--color-surface);
      color: var(--color-text);
      line-height: 1.75;
      margin: 0;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    body.nav-open {
      overflow: hidden;
    }

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

    a {
      color: var(--color-primary);
      text-decoration: none;
      transition: color var(--transition), background var(--transition), border-color var(--transition);
    }

    a:hover,
    a:focus {
      color: var(--color-primary-deep);
      text-decoration: none;
    }

    button,
    input {
      font-family: inherit;
    }

    button {
      cursor: pointer;
    }

    .grid-container {
      max-width: 1260px;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1200;
      background: rgba(12, 10, 15, .96);
      box-shadow: 0 6px 28px rgba(0, 0, 0, .35);
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .site-header::after {
      content: "";
      display: block;
      height: 2px;
      background: linear-gradient(90deg, rgba(229, 50, 45, .9), rgba(24, 208, 176, .55));
      box-shadow: 0 0 18px rgba(229, 50, 45, .5);
    }

    .header-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      min-height: 72px;
      gap: 14px 24px;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .header-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      color: #ffffff;
      font-size: 19px;
      line-height: 1.2;
      letter-spacing: -.2px;
      flex: 0 0 auto;
    }

    .header-logo:hover {
      color: #ffffff;
    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(229, 50, 45, .95), rgba(245, 166, 35, .9));
      font-size: 17px;
      box-shadow: 0 0 20px rgba(229, 50, 45, .35);
    }

    .main-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .main-nav a {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 12px 18px;
      color: rgba(255, 255, 255, .7);
      font-weight: 500;
      border-radius: 10px;
      font-size: 15px;
      white-space: nowrap;
      transition: color var(--transition), background var(--transition);
    }

    .main-nav a::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 7px;
      height: 3px;
      border-radius: 99px;
      background: transparent;
    }

    .main-nav a:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, .06);
    }

    .main-nav a.active {
      color: #FFD2A4;
      font-weight: 700;
    }

    .main-nav a.active::after {
      background: var(--gradient-main);
      box-shadow: 0 0 14px rgba(245, 166, 35, .8);
    }

    .header-cta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 999px;
      font-weight: 700;
      line-height: 1.5;
      border: 1px solid transparent;
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    }

    .btn:hover,
    .btn:focus-visible {
      transform: translateY(-2px);
    }

    .btn:focus-visible,
    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    .btn-sm {
      min-height: 38px;
      padding: 9px 18px;
      font-size: 14px;
    }

    .btn-md {
      min-height: 48px;
      padding: 13px 26px;
      font-size: 15px;
    }

    .btn-primary {
      background: var(--gradient-main);
      color: #fff;
      border-color: rgba(255, 255, 255, .16);
      box-shadow: 0 10px 28px rgba(229, 50, 45, .28);
    }

    .btn-primary:hover {
      background: linear-gradient(240deg, #F5A623, #E5322D);
      color: #fff;
      box-shadow: 0 14px 34px rgba(229, 50, 45, .4);
    }

    .btn-ghost {
      background: transparent;
      color: #ffffff;
      border-color: rgba(255, 255, 255, .55);
    }

    .btn-ghost:hover {
      border-color: var(--color-accent);
      background: rgba(245, 166, 35, .12);
      color: var(--color-accent);
    }

    .menu-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: rgba(255, 255, 255, .06);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .16);
      color: #fff;
      font-size: 20px;
    }

    .page-hero {
      position: relative;
      background-color: #120E1A;
      color: #fff;
      overflow: hidden;
    }

    .review-hero {
      background-image: linear-gradient(100deg, rgba(8, 6, 12, .92) 0%, rgba(18, 12, 24, .75) 60%, rgba(30, 14, 18, .55) 100%), url('/assets/images/backpic/back-3.png');
      background-size: cover;
      background-position: center 32%;
      padding: clamp(70px, 9vw, 128px) 0 78px;
    }

    .hero-glow {
      position: absolute;
      width: 500px;
      height: 340px;
      right: -120px;
      top: 0;
      background: radial-gradient(closest-side, rgba(229, 50, 45, .45), transparent);
      pointer-events: none;
      filter: blur(6px);
    }

    .hero-glow.glow-2 {
      left: -160px;
      right: auto;
      top: auto;
      bottom: -140px;
      background: radial-gradient(closest-side, rgba(24, 208, 176, .22), transparent);
    }

    .page-hero-inner {
      position: relative;
      z-index: 2;
      max-width: 860px;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .07);
      border-radius: 999px;
      padding: 8px 16px;
      font-size: 14px;
      color: rgba(255, 255, 255, .78);
      backdrop-filter: blur(8px);
      margin-bottom: 28px;
    }

    .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-signal);
      box-shadow: 0 0 0 5px rgba(24, 208, 176, .18), 0 0 18px rgba(24, 208, 176, .8);
      animation: dotPulse 1.8s infinite;
    }

    @keyframes dotPulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(24, 208, 176, .15), 0 0 12px rgba(24, 208, 176, .6); }
      50% { box-shadow: 0 0 0 8px rgba(24, 208, 176, .02), 0 0 22px rgba(24, 208, 176, .9); }
    }

    .page-hero h1 {
      font-size: clamp(44px, 7vw, 72px);
      line-height: 1.1;
      font-weight: 800;
      color: #fff;
      margin: 0 0 18px;
      letter-spacing: -1px;
    }

    .hero-lead {
      font-size: 18px;
      line-height: 1.9;
      color: rgba(255, 255, 255, .76);
      max-width: 750px;
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 32px;
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 10px 18px;
      font-size: 14px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .16);
      color: rgba(255, 255, 255, .86);
    }

    .hero-tag i {
      color: var(--color-signal);
    }

    .page-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .stat-band {
      position: relative;
      z-index: 3;
      background: var(--color-surface);
      padding: 0 0 clamp(56px, 6vw, 80px);
      margin-top: -28px;
    }

    .stat-grid {
      margin-top: -20px;
    }

    .stat-card {
      position: relative;
      background: #ffffff;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      padding: 28px 24px 24px;
      min-height: 150px;
      box-shadow: var(--shadow-soft);
      margin-bottom: 20px;
      overflow: hidden;
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .stat-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }

    .stat-card::before {
      content: "";
      position: absolute;
      left: 24px;
      right: 24px;
      top: 0;
      height: 4px;
      border-radius: 99px;
      background: var(--gradient-main);
    }

    .stat-card.tech-card::before {
      background: var(--gradient-live);
    }

    .stat-number {
      font-family: var(--font-num);
      font-variant-numeric: tabular-nums;
      font-size: 34px;
      font-weight: 800;
      line-height: 1.15;
      color: var(--color-text);
    }

    .stat-card.gradient-number .stat-number {
      background: linear-gradient(120deg, #E5322D, #F5A623);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .stat-card.has-dot .stat-number::after {
      content: "＋";
      color: var(--color-primary);
      font-size: 20px;
      vertical-align: super;
      margin-left: 4px;
    }

    .stat-label {
      font-weight: 600;
      color: var(--color-text);
      margin-top: 10px;
      font-size: 15px;
    }

    .stat-note {
      color: var(--color-text-soft);
      font-size: 13px;
      margin-top: 6px;
    }

    .section {
      padding: var(--section-space) 0;
    }

    .section-tight {
      padding: clamp(24px, 5vw, 64px) 0 clamp(56px, 6vw, 88px);
    }

    .section-head {
      margin-bottom: 44px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
    }

    .section-head h2,
    .section-head .h2 {
      font-size: clamp(27px, 4vw, 38px);
      font-weight: 800;
      line-height: 1.25;
      margin: 0;
      color: var(--color-text);
    }

    .section-head p {
      color: var(--color-text-soft);
      max-width: 600px;
      margin: 0;
      font-size: 15px;
      line-height: 1.8;
    }

    .review-section {
      background: var(--color-surface);
    }

    .review-row {
      display: flex;
      background: #ffffff;
      border: 1px solid var(--color-border);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      margin-bottom: 38px;
      transition: box-shadow var(--transition), transform var(--transition);
    }

    .review-row:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-4px);
    }

    .review-media-cell {
      min-height: 280px;
    }

    .review-figure {
      position: relative;
      background: #e8e4ec;
      height: 100%;
      min-height: 280px;
      margin: 0;
      overflow: hidden;
    }

    .review-figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s ease;
    }

    .review-row:hover .review-figure img {
      transform: scale(1.045);
    }

    .media-badge {
      position: absolute;
      left: 20px;
      top: 18px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(8, 6, 12, .66);
      border: 1px solid rgba(255, 255, 255, .1);
      color: #fff;
      font-size: 13px;
      backdrop-filter: blur(8px);
      letter-spacing: .2px;
    }

    .media-badge i {
      color: var(--color-signal);
    }

    .review-content {
      padding: clamp(28px, 4vw, 48px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .review-category {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 4px 12px;
      font-size: 12px;
      background: #f3eef2;
      color: var(--color-text-soft);
      line-height: 1.6;
    }

    .chip.chip-brand {
      background: rgba(229, 50, 45, .09);
      color: var(--color-primary-deep);
    }

    .chip.chip-live {
      background: rgba(24, 208, 176, .09);
      color: #0C9985;
    }

    .review-content h3 {
      font-size: clamp(21px, 2.8vw, 30px);
      line-height: 1.35;
      font-weight: 700;
      color: var(--color-text);
      margin: 0 0 14px;
    }

    .review-content h3 a {
      color: inherit;
    }

    .review-content h3 a:hover {
      color: var(--color-primary);
    }

    .review-content .review-desc {
      color: var(--color-text-soft);
      font-size: 16px;
      line-height: 1.85;
      margin-bottom: 24px;
    }

    .review-meta-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      margin-bottom: 24px;
      padding: 0;
      list-style: none;
    }

    .review-meta-list li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--color-text-soft);
      font-size: 14px;
    }

    .review-meta-list i {
      color: var(--color-accent);
    }

    .arrow-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 15px;
      color: var(--color-primary);
      margin-top: auto;
    }

    .arrow-link i {
      transition: transform var(--transition);
    }

    .arrow-link:hover i {
      transform: translateX(5px);
    }

    .review-row:nth-child(even) .review-media-cell {
      order: 2;
    }

    @media (max-width: 1023px) {
      .review-row:nth-child(even) .review-media-cell {
        order: 0;
      }
    }

    .workflow-section {
      background: #ffffff;
      border-top: 1px solid rgba(229, 50, 45, .1);
    }

    .workflow-grid {
      gap: 14px;
    }

    .workflow-step {
      position: relative;
      height: 100%;
      border-radius: 20px;
      background: var(--color-surface);
      padding: 30px 28px;
      border: 1px solid var(--color-border);
      transition: background var(--transition), border-color var(--transition), transform var(--transition);
    }

    .workflow-step:hover {
      background: #fff;
      border-color: rgba(229, 50, 45, .4);
      transform: translateY(-4px);
    }

    .step-index {
      font-family: var(--font-num);
      font-variant-numeric: tabular-nums;
      font-size: 14px;
      letter-spacing: 4px;
      background: var(--gradient-main);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 16px;
      display: inline-block;
    }

    .workflow-step h3 {
      font-size: 19px;
      font-weight: 700;
      color: var(--color-text);
      margin: 0 0 10px;
    }

    .workflow-step p {
      color: var(--color-text-soft);
      font-size: 14px;
      line-height: 1.8;
      margin: 0;
    }

    .feature-band {
      background: #120E1A;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .feature-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(60% 60% at 85% 20%, rgba(229, 50, 45, .28), transparent 70%);
      pointer-events: none;
    }

    .feature-band .grid-container {
      position: relative;
      z-index: 2;
    }

    .feature-title-block h2 {
      color: #ffffff;
    }

    .feature-title-block p {
      color: rgba(255, 255, 255, .64);
    }

    .benefit-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .benefit-list li {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .benefit-list li:last-child {
      border-bottom: 0;
    }

    .benefit-list i {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(24, 208, 176, .12);
      color: var(--color-signal);
      font-size: 17px;
    }

    .benefit-list .benefit-line strong {
      display: block;
      font-size: 17px;
      color: #fff;
      margin-bottom: 5px;
    }

    .benefit-list .benefit-line span {
      color: rgba(255, 255, 255, .6);
      font-size: 14px;
      line-height: 1.7;
    }

    .feature-cover {
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .14);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
    }

    .feature-cover img {
      width: 100%;
      min-height: 260px;
      object-fit: cover;
    }

    .faq-section {
      background: var(--color-surface);
    }

    .faq-box {
      border-radius: var(--radius-xl);
      background: #ffffff;
      border: 1px solid var(--color-border);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      margin-top: 20px;
    }

    .faq-item {
      border-bottom: 1px solid #ede7f0;
      background: #ffffff;
      transition: background var(--transition);
      position: relative;
    }

    .faq-item:last-child {
      border-bottom: 0;
    }

    .faq-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--gradient-live);
      opacity: 0;
      transition: opacity var(--transition);
    }

    .faq-item.open::before {
      opacity: 1;
    }

    .faq-question {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      width: 100%;
      background: transparent;
      border: 0;
      padding: 26px 30px;
      text-align: left;
      font-size: 18px;
      font-weight: 600;
      color: var(--color-text);
    }

    .faq-question .icon {
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(229, 50, 45, .1);
      color: var(--color-primary);
      font-size: 15px;
      transition: transform .4s ease, background var(--transition);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease;
    }

    .faq-answer-inner {
      padding: 0 55px 28px 30px;
      color: var(--color-text-soft);
      font-size: 15px;
      line-height: 1.9;
    }

    .cta-section {
      position: relative;
      background-color: #0C0A0F;
      background-image: linear-gradient(110deg, rgba(4, 3, 8, .88), rgba(22, 12, 10, .74)), url('/assets/images/backpic/back-1.webp');
      background-position: center;
      background-size: cover;
      padding: clamp(70px, 8vw, 120px) 0;
      text-align: center;
      overflow: hidden;
    }

    .cta-section::after {
      content: "";
      position: absolute;
      left: 12%;
      right: 12%;
      top: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #E5322D, #F5A623, #18D0B0, transparent);
    }

    .cta-content {
      position: relative;
      z-index: 2;
      max-width: 720px;
      margin: 0 auto;
    }

    .cta-content h2 {
      font-size: clamp(28px, 4.4vw, 44px);
      color: #ffffff;
      font-weight: 800;
      margin: 0 0 18px;
      line-height: 1.25;
    }

    .cta-content p {
      color: rgba(255, 255, 255, .72);
      font-size: 16px;
      line-height: 1.9;
    }

    .cta-content .page-actions {
      justify-content: center;
    }

    .site-footer {
      background: #0C0A0F;
      color: rgba(255, 255, 255, .62);
      border-top: 2px solid transparent;
      border-image: linear-gradient(90deg, rgba(229, 50, 45, .8), rgba(245, 166, 35, .7), rgba(24, 208, 176, .5)) 1;
      padding: 58px 0 0;
      font-size: 14px;
    }

    .footer-upper {
      display: grid;
      grid-template-columns: 1.6fr .8fr 1fr 1.1fr;
      gap: 36px 40px;
      padding-bottom: 38px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .footer-brand-copy h4 {
      color: #ffffff;
      font-size: 21px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 14px;
    }

    .footer-brand-copy p {
      margin: 0;
      line-height: 1.8;
      color: rgba(255, 255, 255, .5);
    }

    .footer-col h5 {
      color: rgba(255, 255, 255, .92);
      font-size: 15px;
      margin: 0 0 16px;
      font-weight: 600;
    }

    .footer-col ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .footer-col ul li {
      margin-bottom: 12px;
    }

    .footer-col ul a {
      color: rgba(255, 255, 255, .62);
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: color var(--transition);
    }

    .footer-col ul a:hover {
      color: var(--color-accent);
    }

    .footer-service {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      padding: 22px;
      border-radius: 14px;
    }

    .footer-service strong {
      display: block;
      color: #ffffff;
      font-size: 15px;
      margin-bottom: 10px;
    }

    .footer-service {
      line-height: 1.8;
      color: rgba(255, 255, 255, .52);
    }

    .footer-contact-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(255, 255, 255, .6);
      margin-bottom: 12px;
      line-height: 1.7;
    }

    .footer-contact-list i {
      color: var(--color-accent);
      margin-top: 5px;
    }

    .footer-bottom {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      color: rgba(255, 255, 255, .42);
      font-size: 13px;
    }

    .footer-bottom a {
      color: rgba(255, 255, 255, .6);
    }

    .footer-bottom a:hover {
      color: var(--color-accent);
    }

    @media (max-width: 1023px) {
      .header-inner {
        flex-wrap: nowrap;
      }

      .main-nav {
        position: fixed;
        inset: 0;
        top: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        background: linear-gradient(150deg, rgba(12, 10, 15, .98), rgba(20, 14, 20, .97));
        padding: 110px 8vw 40px;
        gap: 10px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: -1;
        transition: opacity .3s ease, visibility .3s ease;
      }

      .body-nav-open .main-nav {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        z-index: 950;
      }

      .main-nav a {
        font-size: 18px;
        padding: 17px 8px;
        width: 100%;
      }

      .main-nav a::after {
        display: none;
      }

      .main-nav a.active {
        background: rgba(229, 50, 45, .14);
        border-left: 3px solid var(--color-primary);
      }

      .menu-toggle {
        display: inline-flex;
        position: relative;
        z-index: 1100;
        margin-left: auto;
      }

      .header-cta {
        display: none;
      }

      .body-nav-open .menu-toggle i::before {
        content: "\f00d";
      }

      .footer-upper {
        grid-template-columns: 1fr 1fr;
      }

      .footer-brand-copy {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 767px) {
      .stat-grid {
        margin: 0 -6px;
      }

      .stat-card {
        padding: 22px 18px;
        border-radius: 18px;
      }

      .stat-number {
        font-size: 28px;
      }

      .review-media-cell,
      .review-figure {
        min-height: 220px;
      }

      .review-content {
        padding: 26px 22px;
      }

      .footer-upper {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .footer-brand-copy {
        grid-column: auto;
      }

      .page-hero h1 {
        font-size: 40px;
      }

      .hero-lead {
        font-size: 16px;
      }

      .faq-question {
        padding: 20px;
        font-size: 16px;
      }

      .faq-answer-inner {
        padding: 0 38px 22px 20px;
      }

      .page-actions .btn-md {
        width: 100%;
      }

      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }
    }

    @media (max-width: 520px) {
      .header-logo {
        font-size: 16px;
      }

      .brand-mark {
        width: 34px;
        height: 34px;
      }

      .main-nav a {
        font-size: 16px;
      }

      .social-proof-grid {
        grid-template-columns: 1fr;
      }
    }