/* roulang page: index */
:root{
  --bg-page:#F7F5EF;
  --bg-deep:#0B342B;
  --primary:#145C4B;
  --primary-hover:#0E4438;
  --accent:#C93A0F;
  --accent-hover:#A22E0A;
  --live:#C62828;
  --surface:#FFFFFF;
  --line:#E6E0D4;
  --text-strong:#1E2A25;
  --text-body:#3E4B46;
  --text-muted:#77857F;
  --success:#1F6B4C;
  --radius:12px;
  --radius-btn:6px;
  --shadow-card:0 8px 24px rgba(16,40,30,.06);
  --shadow-card-hover:0 14px 32px rgba(16,40,30,.1);
  --container:1180px;
  --font-main:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --font-num:"DIN Alternate","Bahnschrift","Arial Narrow","Roboto Condensed",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-main);
  background:var(--bg-page);
  color:var(--text-body);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  font-size:1rem;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
input{font-family:inherit}
ul,ol{list-style:none}
.container{max-width:var(--container);margin:0 auto;padding-left:clamp(1rem,4vw,2.5rem);padding-right:clamp(1rem,4vw,2.5rem)}

h1,h2,h3,h4{color:var(--text-strong);line-height:1.25;font-weight:700}
.section{padding:72px 0}
.section-soft{background:var(--surface);border-block:1px solid var(--line)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px}
.section-head h2{font-size:clamp(1.6rem,2.6vw,2.3rem)}
.kicker{font-size:14px;letter-spacing:.18em;color:var(--accent);font-weight:600;margin-bottom:8px}
.section-caption{color:var(--text-muted);font-size:.92rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-btn);font-weight:600;font-size:15px;
  padding:.78rem 1.35rem;line-height:1.2;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .15s;
  white-space:nowrap;
}
.btn:focus-visible,.nav-toggle:focus-visible{
  outline:2px solid rgba(201,58,15,.6);outline-offset:3px;
}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-hover);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.btn-accent:active{background:#8C2607;transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.btn-primary:active{background:#0B352A}
.btn-ghost{border-color:var(--primary);color:var(--primary);background:transparent}
.btn-ghost:hover{background:rgba(20,92,75,.07)}
.btn-ghost-dark{border-color:rgba(20,92,75,.5);color:var(--primary);background:transparent}
.btn-ghost-dark:hover{border-color:var(--primary);background:rgba(20,92,75,.08)}
.btn-ghost-light{border-color:rgba(255,255,255,.85);color:#fff;background:transparent}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:.50rem .85rem;font-size:.85rem;border-radius:6px}
.btn-block{width:100%}

/* 顶部导航 */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--bg-deep);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,30px);
  min-height:68px;
}
.split-header__visual{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.search-box{position:relative;color:#fff}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.7;width:14px;pointer-events:none}
.search-box input{
  width:205px;height:38px;border-radius:999px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24);color:#fff;outline:0;padding:0 14px 0 34px;
  font-size:13px;transition:border .2s,background .2s;
}
.search-box input::placeholder{color:rgba(255,255,255,.66)}
.search-box input:focus{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.66)}
.header-login{
  border:1px solid rgba(255,255,255,.7);color:#fff;border-radius:999px;
  padding:6px 16px;font-size:13px;font-weight:600;
  transition:background .2s;
  white-space:nowrap;
}
.header-login:hover{background:rgba(255,255,255,.15)}
.split-header__content{display:flex;align-items:center;gap:14px;position:relative}
.brand{display:flex;flex-direction:column;line-height:1.2;padding:6px 0 4px}
.brand-main{font-size:19px;font-weight:800;letter-spacing:.01em;color:#fff;white-space:nowrap}
.brand-tag{font-size:10px;color:#E7BFA5;letter-spacing:.12em;margin-top:1px}
.main-nav{display:flex;align-items:center;gap:2px}
.nav-link{
  position:relative;display:block;padding:8px 13px;color:rgba(255,255,255,.86);
  font-size:14px;font-weight:500;
  border-radius:6px;transition:color .2s;
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-link.active{color:#fff}
.nav-link.active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;
  background:var(--accent);border-radius:2px;
}
.nav-toggle{
  display:none;width:40px;height:40px;border-radius:8px;
  align-items:center;justify-content:center;}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:.25s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:.25s}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* 首页分屏首屏 */
.hero-split{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  min-height:min(720px,calc(100vh - 68px));
  max-width:1400px;margin:0 auto;
}
.hero-visual{
  position:relative;overflow:hidden;background:var(--bg-deep);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.6rem,4vw,4rem);
}
.hero-visual img.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-visual .hero-overlay{
  position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,28,23,.72),rgba(6,28,23,.42) 58%,rgba(6,28,23,.82));
}
.hero-visual-top{
  position:absolute;left:clamp(1.4rem,4vw,4rem);top:1.4rem;right:clamp(1.4rem,4vw,4rem);
  z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.live-pill{
  display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.28);padding:6px 13px;border-radius:999px;
  font-size:13px;backdrop-filter:blur(6px);
}
.live-pill i{width:8px;height:8px;background:var(--live);border-radius:50%;display:inline-block;animation:pulseDot 1.4s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(198,40,40,.8)}70%{box-shadow:0 0 0 8px rgba(198,40,40,0)}100%{box-shadow:0 0 0 0 rgba(198,40,40,0)}}
.hero-audio{font-size:12px;color:rgba(255,255,255,.72)}
.hero-count-title{position:relative;z-index:4;font-size:14px;color:#fff;opacity:.82;margin-bottom:12px}
.countdown-panel{
  position:relative;z-index:4;background:rgba(2,24,18,.62);
  border:1px solid rgba(255,255,255,.18);border-radius:16px;
  padding:16px 16px 18px;backdrop-filter:blur(8px);
  max-width:540px;
}
.countdown-panel .cd-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.countdown-panel .cd-match{font-size:13px;color:rgba(255,255,255,.68)}
.flag-tag{font-size:11px;font-weight:700;color:#FFC;background:rgba(201,58,15,.45);border-radius:999px;padding:2px 10px}
.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.countdown-item{background:rgba(255,255,255,.09);border-radius:8px;text-align:center;padding:5px 2px 4px}
.countdown-item span{display:block;color:rgba(255,255,255,.6);font-size:10px;letter-spacing:.05em}
.countdown-num{
  font-family:var(--font-num);
  font-size:clamp(30px,3.1vw,42px);
  font-weight:700;color:#fff;line-height:1.2;letter-spacing:.02em;
}
.hero-visual-actions{position:relative;z-index:5;margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}

.hero-content{
  background:var(--bg-page);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.8rem,4.5vw,4.5rem);
}
.hero-kicker{color:var(--accent);font-size:13px;letter-spacing:.15em;font-weight:600;margin-bottom:14px}
.hero-title{font-size:clamp(2.4rem,4.6vw,4rem);font-weight:800;letter-spacing:.01em;line-height:1.1;color:var(--text-strong)}
.hero-title small{
  display:block;font-size:clamp(1.1rem,2vw,1.6rem);font-weight:700;
  color:var(--primary);line-height:1.25;margin-top:10px;
}
.hero-lead{max-width:36em;font-size:clamp(1rem,1.15vw,1.075rem);line-height:1.85;margin-top:22px;color:var(--text-body)}
.hero-points{margin-top:26px;padding:20px 0;border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hero-point{display:flex;gap:10px;align-items:flex-start}
.hero-point b{display:block;color:var(--text-strong);font-size:14px;margin-bottom:2px}
.hero-point span{color:var(--text-muted);font-size:12px;line-height:1.5}
.hero-point-icon{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(20,92,75,.1);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:16px;font-weight:700}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* 直播预告流 */
.event-wide{
  display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr) minmax(220px,280px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .25s;
}
.event-wide:hover{box-shadow:var(--shadow-card-hover)}
.event-cover{position:relative;min-height:190px;background:var(--bg-deep)}
.event-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.event-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.5) 100%)}
.badge-live{
  position:absolute;top:12px;left:12px;z-index:3;color:#fff;font-size:12px;font-weight:700;
  background:var(--live);padding:4px 12px;border-radius:999px;letter-spacing:.02em;
}
.badge-will{
  position:absolute;top:12px;left:12px;z-index:3;color:#0B342B;font-size:12px;font-weight:700;
  background:#FFE7CC;padding:4px 12px;border-radius:999px;
}
.event-body{padding:24px 26px;display:flex;flex-direction:column}
.event-meta-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.tag{
  font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:rgba(20,92,75,.1);color:var(--primary);
}
.tag-live{background:rgba(198,40,40,.1);color:var(--live)}
.event-name{font-size:15px;font-weight:600;color:var(--primary);letter-spacing:.01em}
.event-vs{font-size:clamp(1.18rem,2vw,1.45rem);font-weight:800;color:var(--text-strong);margin:7px 0 8px;line-height:1.35}
.event-time-line{color:var(--text-muted);font-size:13px;margin-bottom:14px}
.event-viewpoints{border-top:1px dashed var(--line);padding-top:14px;margin-top:14px;display:grid;gap:8px}
.viewpoint{display:flex;gap:10px;font-size:.94rem;line-height:1.65;color:var(--text-body)}
.viewpoint i{flex:none;width:18px;height:18px;border-radius:4px;background:rgba(20,92,75,.1);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:800;margin-top:5px}
.event-countdown{
  background:var(--bg-deep);color:#fff;padding:20px 18px;
  display:flex;flex-direction:column;justify-content:center;
}
.event-countdown-head{font-size:12px;color:rgba(255,255,255,.68);margin-bottom:13px;text-align:center}
.event-cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.event-cd-grid .cd-cell{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.05);border-radius:7px;
  text-align:center;padding:5px 0 4px;
}
.event-cd-grid b{font-family:var(--font-num);font-size:30px;line-height:1.2;font-weight:700}
.event-cd-grid span{font-size:9px;color:rgba(255,255,255,.66)}
.event-count-cta{display:grid;gap:9px}
.event-count-cta .btn{font-size:13px;padding:.55rem .5rem}
.match-list{display:grid;gap:24px}

/* 回放入口 */
.replay-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.replay-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card)}
.replay-video{position:relative;aspect-ratio:16/9;background:var(--bg-deep)}
.replay-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.replay-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.55))}
.replay-badge{
  position:absolute;left:16px;top:16px;z-index:3;background:rgba(11,52,43,.88);
  color:#fff;border-radius:999px;padding:5px 14px;font-size:12px;
}
.replay-play{
  position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:#fff;color:var(--accent);
  font-size:23px;padding-left:5px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s;
}
.replay-card:hover .replay-play{transform:translate(-50%,-50%) scale(1.08)}
.replay-card-body{padding:20px 22px}
.replay-card-body h3{font-size:1.1rem;line-height:1.4;margin-bottom:8px}
.replay-meta{display:flex;gap:16px;font-size:12px;color:var(--text-muted)}
.replay-mini-list{display:grid;gap:14px}
.replay-mini{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;background:var(--bg-page);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px;transition:box-shadow .2s;
}
.replay-mini:hover{box-shadow:var(--shadow-card)}
.replay-mini-cover{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--bg-deep)}
.replay-mini-cover img{width:100%;height:100%;object-fit:cover}
.replay-mini-copy{padding-top:2px}
.replay-mini-copy h4{font-size:.92rem;line-height:1.4;margin-bottom:4px}
.replay-mini-copy p{font-size:11px;color:var(--text-muted)}
.replay-mini-copy .go-link{display:inline-block;font-size:12px;color:var(--accent);margin-top:4px;font-weight:600}

/* 订阅提醒 */
.subscribe-band{background:var(--bg-deep);color:#fff;position:relative;overflow:hidden;border-radius:22px}
.subscribe-band::after{
  content:"华体在线";position:absolute;right:-14px;bottom:4px;font-size:80px;
  color:rgba(255,255,255,.035);font-weight:800;pointer-events:none;line-height:1;
}
.subscribe-inner{
  max-width:860px;margin:0 auto;padding:52px clamp(1.4rem,5vw,4rem);position:relative;z-index:2;
}
.subscribe-inner h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:13px}
.subscribe-inner p{color:rgba(255,255,255,.78);font-size:15px;margin-bottom:28px}
.subscribe-form{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;
}
.subscribe-form input{
  background:#FBF9F4;border:1px solid var(--line);border-radius:10px;
  padding:12px 15px;outline:0;font-size:14px;color:var(--text-strong);
}
.subscribe-form input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(20,92,75,.15)}
.subscribe-tip{font-size:12px;color:rgba(255,255,255,.48);margin-top:9px}

/* 资讯区 / CMS 显示 */
.cms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.info-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);
  transition:box-shadow .2s;
}
.info-card:hover{box-shadow:var(--shadow-card-hover)}
.info-thumb{position:relative;aspect-ratio:16/9;background:var(--bg-deep)}
.info-thumb img{width:100%;height:100%;object-fit:cover}
.info-thumb .info-cat{
  position:absolute;top:12px;left:12px;background:rgba(11,52,43,.88);color:#fff;
  font-size:11px;padding:3px 10px;border-radius:999px;
}
.info-body{padding:19px 20px;display:flex;flex-direction:column;flex:1}
.info-date{color:var(--text-muted);font-size:12px;display:flex;align-items:center;gap:5px;margin-bottom:8px}
.info-body h3{font-size:1.06rem;margin-bottom:8px;line-height:1.5}
.info-body h3 a:hover{color:var(--primary)}
.info-excerpt{
  font-size:.92rem;color:var(--text-muted);line-height:1.75;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:14px;
}
.info-link-row{margin-top:auto}
.info-link{display:inline-flex;color:var(--accent);font-size:13px;font-weight:700}
.info-link:hover{color:var(--accent-hover)}
.empty-info{
  grid-column:1/-1;border:1px dashed #BDB4A3;border-radius:var(--radius);
  background:#FBF9F4;color:var(--text-muted);text-align:center;padding:44px 20px;
}
.empty-info a{color:var(--primary);font-weight:600;border-bottom:1px solid currentColor}

/* FAQ */
.faq-list{margin:0 auto;max-width:860px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.faq-item summary{
  padding:18px 22px;font-size:1rem;font-weight:600;color:var(--text-strong);
  cursor:pointer;display:flex;justify-content:space-between;gap:16px;list-style:none;
  transition:background .2s;
}
.faq-item summary:hover{background:#FCFAF6}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chevron{transition:transform .25s;color:var(--primary);flex:none}
.faq-item[open] summary .faq-chevron{transform:rotate(180deg)}
.faq-item[open]{border-color:rgba(20,92,75,.24)}
.faq-answer{padding:0 22px 19px;color:var(--text-body);font-size:.94rem;max-width:none}

/* CTA line */
.cta-line{
  text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:44px 28px;
}
.cta-line h2{font-size:clamp(1.4rem,2vw,1.9rem);margin-bottom:9px}
.cta-line p{color:var(--text-muted);max-width:620px;margin:0 auto 24px}

/* footer */
.site-footer{background:var(--bg-deep);color:rgba(255,255,255,.8);margin-top:80px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding:56px 0 42px}
.footer-brand .brand-main{font-size:21px}
.footer-brand p{font-size:13px;line-height:1.9;color:rgba(255,255,255,.6);margin-top:13px;max-width:320px}
.footer-block h4{color:#fff;font-size:14px;margin-bottom:14px;font-weight:600}
.footer-block li{margin-bottom:8px}
.footer-block a{color:rgba(255,255,255,.68);font-size:13px;transition:color .2s}
.footer-block a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:20px 0 22px;
  font-size:12px;color:rgba(255,255,255,.42);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
}
.footer-bottom a{color:rgba(255,255,255,.55)}
.footer-bottom a:hover{color:#fff}

/* 响应式 */
@media (max-width:1180px){
  .event-wide{grid-template-columns:290px 1fr}
  .event-countdown{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
  .event-countdown .event-cd-grid{grid-template-columns:repeat(4,86px);margin-bottom:0}
  .event-count-cta{grid-template-columns:repeat(2,minmax(150px,1fr));justify-content:end}
}
@media (max-width:1023px){
  .hero-split{grid-template-columns:1fr;max-width:900px}
  .hero-visual{min-height:520px;display:flex}
  .hero-content{padding:48px clamp(1.4rem,4vw,3rem) 60px}
  .replay-layout{grid-template-columns:1fr}
  .search-box input{width:150px}
  .brand-main{font-size:17px}
  .brand-tag{display:none}
  .nav-toggle{display:inline-flex}
  .split-header__content .main-nav{
    display:none;flex-direction:column;position:absolute;top:calc(100% + 12px);right:0;
    background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:8px;min-width:220px;box-shadow:var(--shadow-card-hover);gap:4px;
  }
  body.menu-open .main-nav{display:flex}
  .nav-link,.nav-link.active{color:var(--text-body)}
  .nav-link.active{color:var(--primary);background:rgba(20,92,75,.08)}
  .nav-link.active::after{display:none}
  .nav-link:hover,.nav-link.active:hover{background:rgba(20,92,75,.1);color:var(--primary)}
}
@media (max-width:767px){
  .section{padding:48px 0}
  .hero-actions .btn{width:100%}
  .hero-points{grid-template-columns:1fr;gap:13px;padding:16px 0}
  .section-head{flex-direction:column;margin-bottom:26px}
  .cms-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px;padding:44px 0 30px}
  .footer-brand{grid-column:1/-1}
  .subscribe-form{grid-template-columns:1fr;padding:1px}
  .subscribe-form input,.subscribe-form .btn{width:100%}
  .subscribe-band::after{font-size:54px}
  .event-wide{grid-template-columns:1fr}
  .event-cover{aspect-ratio:16/9;min-height:0}
  .eventCountDisplay .event-body{padding:22px 18px}
  .event-countdown{grid-column:auto;grid-template-columns:1fr}
  .event-countdown .event-cd-grid{grid-template-columns:repeat(4,1fr);margin-bottom:14px}
  .event-count-cta{grid-template-columns:1fr}
  .header-inner{min-height:56px}
  .split-header__visual .search-box{display:none}
  .hero-count-title{font-size:12px}
  .countdown-num{font-size:32px}
  .hero-visual-actions .btn{width:100%}
  .replay-video{aspect-ratio:16/10}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;gap:22px}
  .footer-bottom{flex-direction:column}
  .header-login{padding:6px 11px;font-size:12px}
  .brand-main{font-size:15px}
  .event-body{padding:20px 16px}
  .event-vs{font-size:1.2rem}
  .event-body .event-viewpoints{font-size:.9rem}
  .replay-mini{grid-template-columns:100px 1fr}
  .replay-mini-copy p{display:none}
}

/* roulang page: article */
:root{
  --bg-page:#F7F5EF;
  --bg-deep:#0B342B;
  --primary:#145C4B;
  --primary-hover:#0E4438;
  --accent:#C93A0F;
  --accent-hover:#A22E0A;
  --live:#C62828;
  --surface:#FFFFFF;
  --line:#E6E0D4;
  --text-strong:#1E2A25;
  --text-body:#3E4B46;
  --text-muted:#77857F;
  --success:#1F6B4C;
  --radius-lg:12px;
  --radius-md:6px;
  --shadow-sm:0 8px 24px rgba(16,40,30,.06);
  --shadow-hover:0 14px 32px rgba(16,40,30,.1);
  --font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --font-number:"DIN Alternate","Bahnschrift","Arial Narrow","Roboto Condensed",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--text-body);
  font-family:var(--font-family);
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,border-color .2s ease}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding-left:clamp(1rem,4vw,2.5rem);
  padding-right:clamp(1rem,4vw,2.5rem);
}
.skip-link{position:absolute;left:-999px;top:0;z-index:300;padding:.8rem 1.2rem;background:var(--accent);color:#fff}
.skip-link:focus{left:0}

/* 按钮体系 */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:44px;
  padding:.7rem 1.35rem;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  font-weight:600;
  font-size:.95rem;
  line-height:1.2;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
  vertical-align:middle;
}
.btn:focus-visible,.ghost-btn:focus-visible,.input-field:focus-visible{
  outline:2px solid rgba(201,58,15,.45);
  outline-offset:3px;
}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-hover);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);color:#fff;box-shadow:var(--shadow-hover)}
.btn-ghost-light{border-color:rgba(255,255,255,.65);color:#F3F1EA;background:transparent}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.btn-ghost-dark{border-color:var(--primary);color:var(--primary);background:transparent}
.btn-ghost-dark:hover{background:rgba(20,92,75,.08);color:var(--primary-hover)}
.btn-lg{min-height:54px;padding:.9rem 1.8rem;font-size:1.02rem}
.btn-block{width:100%}

/* 表单 */
.input-field{
  display:block;
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#FBF9F4;
  color:var(--text-strong);
  padding:.65rem 1rem;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.input-field::placeholder{color:#98A29D}
.input-field:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(20,92,75,.16);
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(247,245,239,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:68px;
}
.split-header__visual{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 1 auto;
}
.split-header__content{
  display:flex;
  align-items:center;
  gap:26px;
  flex:0 1 auto;
}
.brand{
  display:inline-flex;
  flex-direction:column;
  line-height:1.15;
  white-space:nowrap;
}
.brand-main{
  font-size:1.35rem;
  font-weight:800;
  color:var(--bg-deep);
  letter-spacing:.01em;
}
.brand-tag{
  margin-top:3px;
  font-size:.72rem;
  color:var(--text-muted);
  font-weight:600;
}
.header-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 .9rem;
  border:1px solid var(--primary);
  color:var(--primary);
  border-radius:999px;
  font-size:.88rem;
  font-weight:600;
  white-space:nowrap;
}
.header-login:hover{
  background:var(--primary);
  color:#fff;
}
.search-box{
  display:flex;
  align-items:center;
  gap:.45rem;
  background:rgba(11,52,43,.08);
  border:1px solid rgba(11,52,43,.12);
  border-radius:999px;
  padding:.3rem .45rem .3rem .8rem;
  min-width:220px;
  color:var(--primary);
  transition:border-color .2s ease,background .2s ease;
}
.search-box:focus-within{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(20,92,75,.08);
}
.search-box svg{width:16px;height:16px;flex:0 0 auto}
.search-box input{
  border:0;
  background:transparent;
  outline:none;
  min-width:0;
  width:100%;
  font-size:.9rem;
  color:var(--text-strong);
  padding:.2rem 0;
}
.search-box input::placeholder{color:var(--text-muted)}
.main-nav{
  display:flex;
  align-items:center;
  gap:4px;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.35rem .85rem;
  color:var(--text-body);
  font-weight:600;
  font-size:.95rem;
  border-radius:8px;
  position:relative;
  white-space:nowrap;
}
.nav-link:hover{color:var(--primary);background:rgba(20,92,75,.06)}
.nav-link.active{color:var(--text-strong)}
.nav-link.active::after{
  content:"";
  position:absolute;
  left:.85rem;
  right:.85rem;
  bottom:4px;
  height:2px;
  background:var(--accent);
  border-radius:99px;
}
.nav-toggle{
  display:none;
  width:40px;
  height:40px;
  margin-left:.25rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  display:block;
  width:18px;
  height:2px;
  background:var(--bg-deep);
  border-radius:99px;
  transition:transform .2s ease,opacity .2s ease;
  content:"";
  margin:0 auto;
}
.nav-toggle span{position:relative;background:transparent}
.nav-toggle span::before{transform:translateY(-4px)}
.nav-toggle span::after{transform:translateY(2px)}
body.nav-open .nav-toggle span::before{transform:translateY(-1px) rotate(45deg)}
body.nav-open .nav-toggle span::after{transform:translateY(-1px) rotate(-45deg)}

/* 页面区块 */
.main-content{
  width:100%;
  min-height:70vh;
}
.article-stack{
  background:var(--bg-page);
  padding:clamp(2.2rem,5vw,4rem) 0 0;
}
.section-base{
  padding:clamp(3.4rem,6vw,5.6rem) 0;
}
.section-tight{
  padding:clamp(2.6rem,4vw,3.8rem) 0;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin-bottom:1.6rem;
}
.section-kicker{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--accent);
  text-transform:uppercase;
  margin:0 0 .35rem;
}
.section-title{
  font-size:clamp(1.6rem,2.6vw,2.3rem);
  font-weight:700;
  line-height:1.2;
  margin:0;
  color:var(--text-strong);
  letter-spacing:.01em;
}
.section-more{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  color:var(--primary);
  font-weight:600;
  font-size:.92rem;
  white-space:nowrap;
  border-bottom:1px solid transparent;
}
.section-more:hover{color:var(--accent);border-color:var(--accent)}

/* 面包屑 */
.breadcrumb-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  font-size:.86rem;
  color:var(--text-muted);
  margin-bottom:1.1rem;
}
.breadcrumb-nav a{color:var(--text-muted)}
.breadcrumb-nav a:hover{color:var(--primary)}
.breadcrumb-nav .sep{opacity:.45;font-size:.7rem}
.breadcrumb-nav .current{
  color:var(--text-strong);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:340px;
}
.article-top-box{
  max-width:900px;
  margin:0 auto 2rem;
}
.category-badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  background:rgba(20,92,75,.1);
  color:var(--primary);
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  padding:.25rem .75rem;
}
.article-title{
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  line-height:1.16;
  font-weight:800;
  color:var(--text-strong);
  letter-spacing:.01em;
  margin:.85rem 0 1rem;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem 1.2rem;
  color:var(--text-muted);
  font-size:.88rem;
  border-top:1px solid var(--line);
  padding-top:1rem;
}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:#B8B0A4}
.article-cover{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-deep);
  box-shadow:var(--shadow-sm);
  aspect-ratio:16/9;
  min-height:240px;
}
.article-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.cover-credit{
  position:absolute;
  right:12px;
  bottom:10px;
  background:rgba(6,28,23,.7);
  color:#EDEBE3;
  font-size:.72rem;
  padding:.2rem .6rem;
  border-radius:999px;
  backdrop-filter:blur(6px);
}
.article-body-outer{
  max-width:820px;
  margin:0 auto;
  padding:clamp(2rem,4vw,3rem) 0 1rem;
}
.article-content{
  color:var(--text-body);
  font-size:1.0625rem;
  line-height:1.85;
  word-break:break-word;
}
.article-content > *:first-child{margin-top:0}
.article-content h2{
  font-size:1.45rem;
  color:var(--text-strong);
  line-height:1.3;
  margin:2.2em 0 .8em;
  font-weight:700;
}
.article-content h3{
  font-size:1.18rem;
  color:var(--text-strong);
  line-height:1.35;
  margin:1.8em 0 .65em;
  font-weight:700;
}
.article-content h4{
  font-size:1.05rem;
  color:var(--text-strong);
  font-weight:700;
  margin:1.6em 0 .5em;
}
.article-content p{
  margin:0 0 1.35em;
}
.article-content a{
  color:var(--primary);
  font-weight:600;
  border-bottom:1px solid rgba(20,92,75,.25);
}
.article-content a:hover{color:var(--accent);border-color:var(--accent)}
.article-content ul,.article-content ol{
  margin:0 0 1.4em;
  padding-left:1.3em;
}
.article-content li{margin-bottom:.45em;padding-left:.15em}
.article-content blockquote{
  margin:1.8em 0;
  padding:1rem 1.3rem;
  background:#FBF9F4;
  border-left:4px solid var(--accent);
  border-radius:8px;
  color:var(--text-body);
}
.article-content img{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  margin:1.8em 0 1.4em;
}
.image-cap{
  font-size:.85rem;
  color:var(--text-muted);
  text-align:center;
  margin:-1.1em 0 1.8em;
}
.article-content table{
  width:100%;
  border-collapse:collapse;
  margin:1.6em 0;
  font-size:.95rem;
}
.article-content th{
  background:var(--bg-deep);
  color:#fff;
  padding:.7rem .85rem;
  text-align:left;
}
.article-content td{
  padding:.7rem .85rem;
  border-bottom:1px solid var(--line);
}
.article-end-line{
  height:1px;
  background:var(--line);
  border:0;
  margin:2.8rem 0 1.5rem;
}

.article-tag-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.7rem;
  margin:1.2rem 0 2rem;
}
.article-tag-row .tag{
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  background:#FBF9F4;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.25rem .75rem;
  font-size:.82rem;
  color:var(--primary);
  font-weight:600;
}
.article-tag-row .tag:hover{border-color:var(--primary);background:rgba(20,92,75,.06)}
.post-pager{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  border-top:1px solid var(--line);
  padding-top:1.5rem;
}
.post-pager a{
  display:block;
  min-height:82px;
  padding:1rem 1.2rem;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.post-pager a:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
  border-color:rgba(20,92,75,.25);
}
.post-pager .dir{font-size:.78rem;color:var(--text-muted);font-weight:700;letter-spacing:.08em;display:block}
.post-pager .title{font-size:.98rem;font-weight:700;color:var(--text-strong);line-height:1.45;margin-top:.45rem}
.post-pager .next{text-align:right}

/* 卡片系统 */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
.card:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-3px);
  border-color:rgba(20,92,75,.18);
}
.card-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--bg-deep);
}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media .img-fallback{
  width:100%;height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.55);
  font-weight:600;
  font-size:.95rem;
}
.live-mark{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:.18rem .6rem;
  background:var(--live);
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  border-radius:999px;
  letter-spacing:.05em;
}
.live-mark::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);
  animation:pulse-live 1.6s infinite;
}
@keyframes pulse-live{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.replay-mark{
  position:absolute;
  top:12px;
  left:12px;
  display:inline-flex;
  align-items:center;
  background:rgba(6,40,31,.82);
  color:#fff;
  padding:.22rem .7rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:700;
}
.card-content{padding:1.2rem 1.25rem 1.35rem}
.card-meta{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:var(--text-muted);
  font-size:.8rem;
  margin-bottom:.65rem;
}
.card-title{
  font-size:1.15rem;
  line-height:1.4;
  font-weight:700;
  color:var(--text-strong);
  margin:0 0 .7rem;
}
.card-summary{
  color:var(--text-body);
  font-size:.92rem;
  line-height:1.7;
  margin:0 0 1rem;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.read-more{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  color:var(--primary);
  font-weight:700;
  font-size:.9rem;
}
.read-more:hover{color:var(--accent)}
.card-text-link{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  color:var(--primary);
  font-weight:700;
  font-size:.9rem;
  border-bottom:1px solid transparent;
}
.card-text-link:hover{color:var(--accent);border-color:var(--accent)}

/* 相关推荐 */
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.related-grid .card-title{font-size:1.02rem;line-height:1.4}
.related-grid .card-meta{font-size:.78rem}
.related-grid .size-small{font-size:.9rem}

/* 提醒订阅 */
.notify-band{
  position:relative;
  background:linear-gradient(100deg,#06201B,var(--bg-deep) 58%,#0C4534);
  border-radius:24px;
  color:#F4F2EC;
  padding:clamp(2.2rem,4vw,3.2rem) clamp(1.5rem,4vw,3rem);
  overflow:hidden;
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:2.2rem;
  align-items:center;
  isolation:isolate;
}
.notify-band::before{
  content:"华体在线";
  position:absolute;
  right:-8px;
  bottom:-28px;
  font-size:clamp(7rem,12vw,12rem);
  font-weight:800;
  color:rgba(255,255,255,.035);
  line-height:1;
  transform:rotate(-8deg);
  z-index:-1;
  pointer-events:none;
  white-space:nowrap;
}
.notify-copy h2{
  font-size:clamp(1.6rem,2.8vw,2.1rem);
  line-height:1.2;
  color:#fff;
  margin:0 0 .8rem;
  font-weight:800;
}
.notify-copy p{
  font-size:1rem;
  color:rgba(255,255,255,.78);
  margin:0;
  max-width:48ch;
  line-height:1.8;
}
.notify-copy ul{
  list-style:none;
  margin:.9rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem 1rem;
}
.notify-copy li{
  color:rgba(255,255,255,.88);
  font-size:.9rem;
  padding-left:1.35rem;
  position:relative;
}
.notify-copy li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:14px;
  height:2px;
  background:#E88E6B;
  border-radius:99px;
}
.notify-form{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  padding:1.2rem;
}
.notify-form label{
  display:block;
  font-size:.88rem;
  color:rgba(255,255,255,.78);
  margin-bottom:.5rem;
}
.form-row{
  display:flex;
  gap:.8rem;
  margin:.8rem 0;
}
.form-row .input-field{
  background:#FDFCF8;
  border-color:transparent;
}
.notify-form .btn-accent{flex:0 0 auto;min-width:132px}
.form-tip{font-size:.78rem;color:rgba(255,255,255,.62);line-height:1.55}

/* FAQ */
.faq-list{
  border-top:1px solid var(--line);
  max-width:840px;
  margin:0 auto;
}
.faq-item{
  border-bottom:1px solid var(--line);
  background:transparent;
  transition:background .2s ease;
}
.faq-item.open{background:rgba(255,255,255,.55)}
.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  border:0;
  background:transparent;
  padding:1.1rem .2rem;
  cursor:pointer;
  text-align:left;
  color:var(--text-strong);
  font-size:1rem;
  font-weight:700;
  line-height:1.5;
}
.faq-q:hover{color:var(--primary)}
.faq-icon{
  flex:0 0 26px;
  width:26px;
  height:26px;
  border:1px solid var(--line);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  transition:transform .2s ease,background .2s ease;
}
.faq-item.open .faq-icon{
  transform:rotate(180deg);
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.faq-icon svg{width:13px;height:13px}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 .2rem;
}
.faq-a p{
  font-size:.95rem;
  line-height:1.8;
  color:var(--text-body);
  margin:0 0 .9rem;
  padding-right:2.5rem;
}

.pager-box{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:center;
  padding:2.2rem 0;
  border-top:1px solid var(--line);
}
.pager-box span{color:var(--text-muted);font-size:.88rem}

/* 空态 / 未找到 */
.state-block{
  padding:clamp(3rem,8vw,5.5rem) 0;
}
.state-card{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  padding:clamp(2.2rem,5vw,4rem) clamp(1.2rem,4vw,2.5rem);
  border:1px dashed rgba(20,92,75,.35);
  background:rgba(255,255,255,.5);
  border-radius:var(--radius-lg);
}
.state-card .state-icon{
  width:72px;
  height:72px;
  border-radius:50%;
  background:rgba(20,92,75,.08);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.2rem;
}
.state-card h1{
  font-size:clamp(1.6rem,3.6vw,2.6rem);
  color:var(--text-strong);
  margin:0 0 .8rem;
}
.state-card p{color:var(--text-body);font-size:1rem;margin:0 0 1.8rem}
.state-card .btn{margin:0 .3rem .5rem}
.empty-grid{
  border:1px dashed #C8BFAE;
  border-radius:14px;
  text-align:center;
  padding:2.2rem 1.2rem;
  background:#FBF9F4;
  color:var(--text-muted);
  font-size:.92rem;
}

/* 页脚 */
.site-footer{
  background:var(--bg-deep);
  color:rgba(255,255,255,.75);
  padding:clamp(2.6rem,5vw,4rem) 0 1.2rem;
  margin-top:clamp(3.5rem,7vw,5.5rem);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:2.5rem;
  padding-bottom:2.3rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand .brand{
  margin-bottom:1rem;
}
.footer-brand .brand-main{
  color:#F7F5EF;
  font-size:1.45rem;
}
.footer-brand p{
  color:rgba(255,255,255,.68);
  font-size:.9rem;
  line-height:1.8;
  margin:0;
  max-width:36ch;
}
.footer-block h4{
  color:#F2E5D8;
  font-size:.95rem;
  font-weight:700;
  margin:0 0 1.1rem;
  letter-spacing:.02em;
}
.footer-block ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.62rem;
}
.footer-block a{
  color:rgba(255,255,255,.68);
  font-size:.9rem;
}
.footer-block a:hover{
  color:#fff;
  padding-left:3px;
}
.footer-bottom{
  padding:1.25rem 0 0;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  color:rgba(255,255,255,.5);
  font-size:.8rem;
}

/* 动效 */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
.animate-up{
  animation:fadeUp .7s ease both;
}

/* 响应式 */
@media (max-width:1023px){
  .header-inner{
    min-height:60px;
  }
  .brand-main{font-size:1.18rem}
  .search-box{min-width:190px}
  .split-header__content{gap:16px}
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
  .related-grid{
    grid-template-columns:1fr 1fr;
  }
  .notify-band{
    grid-template-columns:1fr;
    padding:clamp(1.8rem,4vw,2.6rem);
  }
}
@media (max-width:767px){
  body.nav-open .site-header{
    background:var(--bg-page);
  }
  .header-inner{
    flex-wrap:wrap;
    align-items:center;
    min-height:56px;
    padding-top:.45rem;
    padding-bottom:.45rem;
    gap:6px 0;
  }
  .split-header__content{
    order:1;
    width:100%;
    justify-content:space-between;
    align-items:center;
    gap:8px;
  }
  .nav-toggle{
    display:inline-flex;
  }
  .main-nav{
    position:absolute;
    top:calc(100% + 10px);
    left:1rem;
    right:1rem;
    flex-direction:column;
    align-items:stretch;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    display:none;
    padding:.5rem;
    box-shadow:0 20px 50px rgba(16,40,30,.2);
  }
  body.nav-open .main-nav{
    display:flex;
  }
  .nav-link{
    min-height:46px;
    justify-content:space-between;
    padding:.55rem .8rem;
    border-radius:10px;
    font-size:1rem;
  }
  .nav-link.active::after{
    content:"";
    left:auto;
    right:.9rem;
    bottom:auto;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
  }
  .split-header__visual{
    order:2;
    width:100%;
    justify-content:space-between;
    gap:.7rem;
  }
  .search-box{
    flex:1 1 auto;
    min-width:0;
    background:rgba(11,52,43,.08);
  }
  .search-box input{
    min-width:0;
  }
  .header-login{
    flex:0 0 auto;
  }
  .article-top-box{
    margin-bottom:1.3rem;
  }
  .article-title{
    overflow-wrap:anywhere;
  }
  .post-pager{
    grid-template-columns:1fr;
  }
  .post-pager .next{text-align:left}
  .related-grid{
    grid-template-columns:1fr;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .notify-copy ul{
    grid-template-columns:1fr;
  }
  .form-row{
    flex-direction:column;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}
@media (min-width:768px) and (max-width:1024px){
  .footer-brand p{
    max-width:46ch;
  }
}
@media (min-width:1280px){
  .container{
    max-width:1180px;
  }
}

/* roulang page: category1 */
:root{
  --bg-page:#F7F5EF;
  --bg-deep:#0B342B;
  --bg-deep-2:#123F35;
  --primary:#145C4B;
  --primary-hover:#0E4438;
  --accent:#C93A0F;
  --accent-hover:#A22E0A;
  --live:#C62828;
  --surface:#FFFFFF;
  --line:#E6E0D4;
  --text-strong:#1E2A25;
  --text-body:#3E4B46;
  --text-muted:#77857F;
  --success:#1F6B4C;
  --radius:12px;
  --radius-small:6px;
  --shadow:0 8px 24px rgba(16,40,30,.06);
  --shadow-hover:0 14px 32px rgba(16,40,30,.10);
  --font-sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--bg-page);
  color:var(--text-body);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.container{max-width:1180px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid rgba(201,58,15,.55);
  outline-offset:3px;
  border-radius:4px;
}
h1,h2,h3,h4{color:var(--text-strong);line-height:1.25;text-wrap:balance}
h2{font-size:clamp(1.55rem,2.6vw,2.2rem);font-weight:700;letter-spacing:.01em}
h3{font-size:1.13rem;line-height:1.45}
p{text-wrap:pretty}
section{scroll-margin-top:80px}

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:120;
  background:rgba(251,249,244,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:none;
}
.header-inner{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding-block:8px;
}
.split-header__visual{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 1 auto;
}
.search-box{
  display:flex;
  align-items:center;
  gap:8px;
  width:240px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#FBF9F4;
  transition:border-color .2s,box-shadow .2s;
}
.search-box:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(20,92,75,.12);
}
.search-box svg{width:18px;height:18px;color:var(--text-muted);flex:none}
.search-box input{border:0;background:transparent;outline:none;width:100%;font-size:.9rem;color:var(--text-strong)}
.search-box input::placeholder{color:#98A09A;font-size:.86rem}
.header-login{
  font-size:.9rem;
  padding:8px 16px;
  border:1px solid var(--primary);
  border-radius:999px;
  color:var(--primary);
  font-weight:600;
  transition:background .2s,color .2s,box-shadow .2s;
}
.header-login:hover{background:var(--primary);color:#fff}
.split-header__content{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:26px;
  flex:1;
}
.brand{display:flex;flex-direction:column;line-height:1.15;flex:none}
.brand-main{color:var(--text-strong);font-size:1.14rem;font-weight:800;letter-spacing:.01em}
.brand-tag{color:var(--text-muted);font-size:.72rem;font-weight:500;letter-spacing:.08em;margin-top:3px}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-link{
  position:relative;
  padding:7px 13px;
  font-size:.94rem;
  font-weight:500;
  color:var(--text-body);
  border-radius:6px;
  transition:color .2s,background .2s;
}
.nav-link:hover{color:var(--primary);background:rgba(20,92,75,.07)}
.nav-link.active{color:var(--primary);font-weight:600}
.nav-link.active::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:0;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}
.nav-toggle{
  display:none;
  width:42px;height:42px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fff;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";
  display:block;
  width:20px;
  height:2px;
  margin-inline:auto;
  background:var(--text-strong);
  border-radius:2px;
  transition:transform .25s,opacity .25s;
}
.nav-toggle span{position:relative}
.nav-toggle span::before{position:absolute;top:-6px;left:0}
.nav-toggle span::after{position:absolute;top:6px;left:0}
.site-header.nav-open .nav-toggle span{transform:rotate(45deg)}
.site-header.nav-open .nav-toggle span::before{top:0;opacity:0}
.site-header.nav-open .nav-toggle span::after{top:0;transform:rotate(90deg)}
@media (max-width:1023px){
  .header-inner{min-height:66px;flex-wrap:wrap}
  .split-header__visual{flex:1;justify-content:flex-end}
  .split-header__content{flex:1;justify-content:flex-start}
  .nav-link.active::after{height:2px}
}
@media (max-width:767px){
  .site-header{position:sticky}
  .header-inner{
    padding-block:8px;
    align-items:center;
  }
  .split-header__visual{
    order:2;
    width:100%;
    padding-top:8px;
    border-top:1px dashed var(--line);
    justify-content:center;
  }
  .split-header__content{
    order:1;
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .search-box{width:min(280px,70%)}
  .header-login{padding:6px 13px;font-size:.85rem}
  .nav-toggle{display:inline-flex}
  .main-nav{
    display:none;
    flex-direction:column;
    width:100%;
    margin:8px 0 0;
    background:#FBF9F4;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding-block:6px;
  }
  .site-header.nav-open .main-nav{display:flex}
  .nav-link{padding-block:11px;border-radius:0;border-bottom:1px solid rgba(230,224,212,.55)}
  .nav-link:last-child{border-bottom:0}
  .nav-link.active::after{display:none}
  .nav-link.active{background:rgba(20,92,75,.07);color:var(--primary)}
}

/* ===== Category hero ===== */
.cat-hero{
  background:var(--bg-deep);
  color:#F3EFE5;
  overflow:hidden;
}
.cat-hero__media{
  position:relative;
  display:flex;
  align-items:center;
  min-height:336px;
  background:
    linear-gradient(90deg, rgba(6,28,23,.80), rgba(6,28,23,.52) 62%, rgba(6,28,23,.84)),
    url("/assets/images/backpic/back-1.png") center 38%/cover no-repeat;
}
.cat-hero__media::after{
  content:"华体在线赛事日程";
  position:absolute;
  right:22px;
  bottom:-4px;
  writing-mode:vertical-rl;
  font-size:15px;
  letter-spacing:.4em;
  color:rgba(255,255,255,.13);
  font-weight:700;
  transform:scaleY(.92);
}
.cat-hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  padding-block:clamp(2.2rem,5vw,3.6rem);
}
.cat-breadcrumb{
  font-size:.86rem;
  color:rgba(225,234,226,.72);
  margin-bottom:20px;
  display:flex;
  gap:8px;
  align-items:center;
}
.cat-breadcrumb a{transition:color .2s}
.cat-breadcrumb a:hover{color:#fff}
.cat-breadcrumb span{opacity:.55}
.cat-hero h1{
  color:#fff;
  font-size:clamp(2.2rem,5vw,3.9rem);
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.05;
  margin-bottom:18px;
}
.cat-lead{
  max-width:680px;
  font-size:1.03rem;
  line-height:1.85;
  color:rgba(238,244,238,.92);
  margin-bottom:26px;
}
.cat-hero__tags{
  display:flex;flex-wrap:wrap;gap:9px;
}
.cat-hero__tags span{
  padding:6px 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  font-size:.8rem;
  color:#F4E9D7;
  background:rgba(255,255,255,.06);
}
@media (max-width:640px){
  .cat-hero__media{min-height:300px}
  .cat-hero__media::after{display:none}
  .cat-lead{font-size:.98rem}
}

/* ===== Common section ===== */
.site-section{
  padding-block:clamp(3rem,7vw,5.4rem);
}
.site-section--paper{background:#F1EDE3}
.site-section--white{background:var(--surface)}
.section-head{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:30px;
}
.section-head p{color:var(--text-muted);font-size:.95rem;max-width:560px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--accent);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  margin-bottom:10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:var(--radius-small);
  padding:11px 22px;
  font-weight:600;
  font-size:.95rem;
  line-height:1.2;
  transition:background .22s,box-shadow .22s,color .22s,border-color .22s;
}
.btn-accent{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.btn-primary{background:var(--primary);color:#fff;border:1px solid var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-ghost{border:1px solid rgba(255,255,255,.55);color:#F5F1E8}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-soft{
  border:1px solid rgba(20,92,75,.35);
  color:var(--primary);
  background:rgba(20,92,75,.04);
}
.btn-soft:hover{background:rgba(20,92,75,.1);border-color:var(--primary)}
.btn-lg{padding:13px 26px;font-size:1rem;border-radius:8px}
.btn-block{width:100%}
.tag{
  display:inline-flex;
  align-items:center;
  padding:4px 11px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:600;
  line-height:1.4;
}
.tag-live{background:rgba(198,40,40,.1);color:var(--live)}
.tag-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);margin-right:7px;animation:pulse 1.6s infinite}
.tag-will{background:rgba(201,58,15,.09);color:var(--accent)}
.tag-green{background:rgba(20,92,75,.1);color:var(--primary)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ===== Schedule note / brief intro ===== */
.note-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.note-item{
  background:var(--surface);
  padding:26px 24px;
}
.note-item h3{font-size:1rem;margin-bottom:9px;display:flex;gap:8px;align-items:center}
.note-item h3::before{content:"";width:10px;height:10px;background:var(--primary);border-radius:3px;flex:none}
.note-item p{color:var(--text-muted);font-size:.92rem;line-height:1.85}
@media (max-width:768px){.note-grid{grid-template-columns:1fr}}

/* ===== Spotlight matches ===== */
.spotlight-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.match-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,42%) 1fr;
  transition:box-shadow .3s,border-color .3s;
}
.match-card:hover{box-shadow:var(--shadow-hover);border-color:#D8CDBA}
.match-card__cover{
  position:relative;
  min-height:200px;
  background-size:cover;
  background-position:center;
}
.match-card__cover::after{content:"";position:absolute;inset:auto 0 0 0;height:60px;background:linear-gradient(180deg,transparent,rgba(2,18,14,.18))}
.match-card__cover .badge-top{
  position:absolute;
  top:12px;left:12px;
}
.match-card:nth-child(1) .match-card__cover{background-image:url("/assets/images/coverpic/cover-1.webp")}
.match-card:nth-child(2) .match-card__cover{background-image:url("/assets/images/coverpic/cover-2.webp")}
.match-card:nth-child(1) .match-card__cover::before,
.match-card:nth-child(2) .match-card__cover::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,20,16,.02) 0%,rgba(5,20,16,.42) 100%);
}
.match-content{padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.match-kicker{
  display:flex;flex-wrap:wrap;gap:7px;font-size:.76rem;font-weight:600;
  color:var(--text-muted);letter-spacing:.02em;
}
.match-kicker .styx{color:var(--accent)}
.match-title{color:var(--text-strong);font-size:1.15rem;line-height:1.4;font-weight:700}
.match-desc{color:var(--text-body);font-size:.93rem;line-height:1.85}
.match-inline{
  display:flex;
  flex-wrap:wrap;
  gap:17px;
  margin-top:4px;
  font-size:.84rem;
  color:var(--text-muted);
}
.match-inline b{color:var(--text-strong);font-weight:600}
.match-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:6px;
}
.match-points{
  margin-top:4px;
  padding-left:2px;
}
.match-points li{
  position:relative;
  padding-left:16px;
  font-size:.89rem;
  line-height:2.05;
  color:var(--text-body);
}
.match-points li::before{
  content:"看点";
  position:absolute;
  left:0;top:2px;
  font-size:.66rem;
  font-weight:700;
  color:var(--accent);
  border:1px solid rgba(201,58,15,.35);
  border-radius:4px;
  padding:0px 4px;
  line-height:1.5;
}
@media (max-width:1023px){
  .spotlight-grid{grid-template-columns:1fr}
  .match-card{grid-template-columns:minmax(0,250px) 1fr}
}
@media (max-width:680px){
  .match-card{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .match-card__cover{min-height:210px;background-position:center 22%}
}

/* ===== Compact schedule ===== */
.compact-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.compact-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:box-shadow .25s,transform .25s,border-color .25s;
  display:flex;
  flex-direction:column;
}
.compact-card:hover{box-shadow:var(--shadow-hover);border-color:#D6CDBF;transform:translateY(-3px)}
.compact-card__thumb{
  position:relative;
  aspect-ratio:16/10;
  background-color:#214D40;
  background-size:cover;
  background-position:center;
}
.compact-card__thumb span{
  position:absolute;top:9px;left:9px;
}
.compact-card__body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.compact-time{font-size:.76rem;color:var(--text-muted);display:flex;gap:7px;font-weight:600}
.compact-time::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none}
.compact-card__body h3{font-size:.98rem;line-height:1.5;font-weight:700}
.compact-card__body p{font-size:.85rem;color:var(--text-muted);line-height:1.8;flex:1}
.compact-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.text-link{font-size:.86rem;color:var(--primary);font-weight:600}
.text-link:hover{color:var(--accent)}
.compact-card:nth-child(1) .compact-card__thumb{background-image:url("/assets/images/coverpic/cover-3.webp")}
.compact-card:nth-child(2) .compact-card__thumb{background-image:url("/assets/images/coverpic/cover-4.png")}
.compact-card:nth-child(3) .compact-card__thumb{background-image:url("/assets/images/coverpic/cover-5.png")}
.compact-card:nth-child(4) .compact-card__thumb{background-image:url("/assets/images/coverpic/cover-6.webp")}
.compact-card:nth-child(5) .compact-card__thumb{background-image:url("/assets/images/coverpic/cover-7.png")}
.compact-card:nth-child(6) .compact-card__thumb{background-image:url("/assets/images/coverpic/cover-8.png")}
@media (min-width:1023px){
  .compact-card:nth-child(n+5){grid-column:span 2}
  .compact-card:nth-child(n+5) .compact-card__body{padding:20px 22px 22px}
  .compact-card:nth-child(n+5) h3{font-size:1.12rem}
}
@media (max-width:1023px){
  .compact-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
  .compact-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .compact-grid{grid-template-columns:1fr}
}

/* ===== Steps to watch ===== */
.guide-step-section{background:#0B342B;color:#F3EFE7}
.guide-step-section h2{color:#fff}
.guide-step-section .section-head p{color:rgba(224,234,227,.84)}
.step-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:12px;
}
.step-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:24px 20px 21px;
  position:relative;
  transition:background .25s,border-color .25s;
}
.step-card:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.25)}
.step-num{
  font-family:"DIN Alternate","Bahnschrift","Arial Narrow","Roboto Condensed",sans-serif;
  font-weight:700;
  font-size:1.8rem;
  line-height:1;
  color:var(--accent);
  margin-bottom:17px;
  display:block;
}
.step-card h3{color:#fff;font-size:1rem;margin-bottom:10px}
.step-card p{color:rgba(226,235,230,.82);font-size:.89rem;line-height:1.85}
.step-card .step-line{position:absolute;top:28px;left:70px;height:1px;width:calc(100% - 70px);background:rgba(255,255,255,.12)}
@media(max-width:1024px){.step-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.step-grid{grid-template-columns:1fr}}

/* ===== Notify / Subscribe band ===== */
.notify-sec{
  position:relative;
  background:var(--bg-deep-2);
  color:#F1EEE4;
  overflow:hidden;
  padding-block:clamp(2.6rem,6vw,4.2rem);
}
.notify-sec::before{
  content:"华体在线 · 赛事提醒";
  position:absolute;
  right:-10px;
  bottom:-18px;
  writing-mode:vertical-rl;
  font-size:21px;
  letter-spacing:.45em;
  color:rgba(255,255,255,.06);
  font-weight:800;
  pointer-events:none;
}
.notify-box{
  max-width:920px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:36px;
  align-items:center;
}
.notify-copy{position:relative;z-index:2}
.notify-copy h2{color:#fff;font-size:clamp(1.5rem,2.5vw,2rem);margin-bottom:15px}
.notify-copy p{color:rgba(229,239,234,.88);font-size:.98rem;line-height:1.9}
.notify-copy ul{margin-top:20px}
.notify-copy li{
  position:relative;
  padding-left:27px;
  font-size:.91rem;
  color:rgba(238,240,238,.93);
  line-height:2.1;
}
.notify-copy li::before{
  content:"✓";
  position:absolute;
  left:0;top:2px;
  width:18px;height:18px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#F2A786;
  font-size:.8rem;
  text-align:center;
  line-height:18px;
  font-weight:700;
}
.notify-form{
  background:#fff;
  border-radius:14px;
  padding:22px 20px 19px;
  box-shadow:0 14px 30px rgba(2,24,18,.22);
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  z-index:2;
}
.notify-form input{
  border:1px solid var(--line);
  background:#FBF9F4;
  border-radius:10px;
  padding:12px 14px;
  outline:none;
  width:100%;
  font-size:.94rem;
  transition:border-color .2s,box-shadow .2s;
}
.notify-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(20,92,75,.14)}
.notify-form .btn-accent{margin-top:4px;padding:13px}
.notify-form .form-note{font-size:.78rem;text-align:center;color:#77857F;line-height:1.7}
@media(max-width:767px){
  .notify-box{grid-template-columns:1fr;gap:24px}
}

/* ===== FAQ ===== */
.faq-wrap{max-width:820px;margin-inline:auto}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:17px 6px;
  text-align:left;
  font-size:1rem;
  font-weight:600;
  color:var(--text-strong);
  transition:color .2s;
}
.faq-question:hover{color:var(--primary)}
.faq-icon{
  flex:none;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--line);
  position:relative;
  transition:transform .25s,border-color .25s;
}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:var(--primary);width:10px;height:1.6px;transform:translate(-50%,-50%)}
.faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.is-open .faq-icon{transform:rotate(180deg);border-color:var(--primary)}
.faq-item.is-open .faq-icon::after{opacity:0}
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
}
.faq-answer-inner{overflow:hidden}
.faq-item.is-open .faq-answer{grid-template-rows:1fr}
.faq-answer-inner p{
  padding:0 20px 17px 6px;
  color:var(--text-muted);
  font-size:.94rem;
  line-height:1.9;
}

/* ===== Bottom CTA ===== */
.bottom-cta{background:#F1EDE3}
.cta-panel{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  background:var(--bg-deep);
  border-radius:18px;
  padding:clamp(2rem,5vw,3.4rem);
  color:#fff;
  box-shadow:var(--shadow);
}
.cta-panel::after{
  content:"开赛倒计时";
  position:absolute;
  right:18px;
  top:-6px;
  color:rgba(255,255,255,.05);
  font-size:1.6rem;
  letter-spacing:.2em;
  transform:rotate(-90deg) translateY(-100%);
  transform-origin:top right;
  font-weight:700;
}
.cta-panel h2{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:9px}
.cta-panel p{color:rgba(237,243,241,.84);max-width:560px;font-size:.98rem}
.cta-btn-group{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:2}
@media(max-width:640px){
  .cta-panel{flex-direction:column;align-items:flex-start}
  .cta-btn-group{width:100%}
  .cta-btn-group .btn{flex:1}
}

/* ===== Footer ===== */
.site-footer{
  background:#07281F;
  color:rgba(235,243,240,.82);
  padding-top:clamp(2.6rem,5vw,4rem);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr .7fr .8fr 1fr;
  gap:36px;
  padding-bottom:28px;
}
.footer-brand p{
  margin-top:16px;
  font-size:.88rem;
  line-height:1.9;
  color:rgba(224,235,230,.75);
  max-width:340px;
}
.site-footer .brand .brand-main{color:#fff}
.site-footer .brand .brand-tag{color:#D5B28C}
.footer-block h4{
  color:#F8F3EA;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.1em;
  margin:16px 0 14px;
}
.footer-block ul li{margin-bottom:9px}
.footer-block ul a{
  font-size:.88rem;
  color:rgba(225,236,231,.75);
  transition:color .2s,padding-left .2s;
}
.footer-block ul a:hover{color:#fff;padding-left:3px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:17px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-size:.8rem;
  color:rgba(219,229,224,.5);
}
.footer-bottom a{color:#E6EEE9}
.footer-bottom a:hover{color:#fff}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* roulang page: category2 */
:root {
      --bg-page: #F7F5EF;
      --bg-deep: #0B342B;
      --primary: #145C4B;
      --primary-hover: #0E4438;
      --accent: #C93A0F;
      --accent-hover: #A22E0A;
      --live: #C62828;
      --surface: #FFFFFF;
      --line: #E6E0D4;
      --text-strong: #1E2A25;
      --text-body: #3E4B46;
      --text-muted: #77857F;
      --success: #1F6B4C;
      --radius-card: 12px;
      --radius-btn: 6px;
      --shadow-card: 0 8px 24px rgba(16, 40, 30, .06);
      --shadow-hover: 0 14px 32px rgba(16, 40, 30, .1);
      --container: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--bg-page);
      color: var(--text-body);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.78;
      -webkit-font-smoothing: antialiased;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    p,
    ul,
    ol,
    figure,
    blockquote,
    dl,
    dd {
      margin: 0;
    }

    ul,
    ol {
      padding: 0;
      list-style: none;
    }

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

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

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

    .container {
      width: 100%;
      max-width: var(--container);
      margin: 0 auto;
      padding-left: clamp(1rem, 4vw, 2.5rem);
      padding-right: clamp(1rem, 4vw, 2.5rem);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--bg-page);
      border-bottom: 1px solid var(--line);
    }

    .header-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      align-items: center;
      min-height: 68px;
      gap: clamp(.75rem, 2vw, 1.5rem);
    }

    .split-header__visual {
      display: flex;
      align-items: center;
      gap: .75rem;
      min-width: 0;
    }

    .search-box {
      display: inline-flex;
      align-items: center;
      flex: 1;
      max-width: 332px;
      min-width: 180px;
      height: 36px;
      gap: .45rem;
      padding: 0 .85rem;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--text-muted);
      transition: border-color .2s, box-shadow .2s;
    }

    .search-box:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(20, 92, 75, .14);
    }

    .search-box svg {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      opacity: .72;
    }

    .search-box input {
      width: 100%;
      min-width: 0;
      border: 0;
      background: transparent;
      color: var(--text-strong);
      font-size: .875rem;
      outline: none;
    }

    .search-box input::placeholder {
      color: var(--text-muted);
    }

    .header-login {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 16px;
      border: 1px solid var(--primary);
      border-radius: var(--radius-btn);
      color: var(--primary);
      font-size: .875rem;
      font-weight: 600;
      white-space: nowrap;
      transition: background .2s, color .2s, border-color .2s;
    }

    .header-login:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    .split-header__content {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(.9rem, 2.2vw, 1.8rem);
      min-width: 0;
    }

    .brand {
      display: inline-flex;
      align-items: baseline;
      gap: .55rem;
      white-space: nowrap;
      line-height: 1.2;
    }

    .brand-main {
      color: var(--text-strong);
      font-size: 1.08rem;
      font-weight: 800;
      letter-spacing: .01em;
    }

    .brand-tag {
      color: var(--text-muted);
      font-size: .78rem;
      font-weight: 500;
      letter-spacing: .06em;
    }

    .main-nav {
      display: flex;
      gap: .25rem;
      align-items: center;
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 .85rem;
      border-radius: 999px;
      color: var(--text-body);
      font-size: .95rem;
      font-weight: 500;
      position: relative;
      transition: color .2s, background .2s;
    }

    .nav-link:hover {
      color: var(--primary);
      background: rgba(20, 92, 75, .07);
    }

    .nav-link.active {
      color: var(--primary);
      font-weight: 700;
    }

    .nav-link.active::after {
      content: "";
      position: absolute;
      left: .85rem;
      right: .85rem;
      bottom: 1px;
      height: 2px;
      border-radius: 2px;
      background: var(--accent);
    }

    .nav-toggle {
      display: none;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      padding: 0;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .nav-toggle span {
      position: relative;
      width: 16px;
      height: 2px;
      border-radius: 2px;
      background: var(--text-strong);
      transition: background .2s;
    }

    .nav-toggle span::before,
    .nav-toggle span::after {
      content: "";
      position: absolute;
      left: 0;
      width: 16px;
      height: 2px;
      background: var(--text-strong);
      border-radius: 2px;
      transition: transform .2s;
    }

    .nav-toggle span::before {
      top: -5px;
    }

    .nav-toggle span::after {
      top: 5px;
    }

    .site-header.nav-open .nav-toggle span {
      background: transparent;
    }

    .site-header.nav-open .nav-toggle span::before {
      transform: translateY(5px) rotate(45deg);
    }

    .site-header.nav-open .nav-toggle span::after {
      transform: translateY(-5px) rotate(-45deg);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      border: 1px solid transparent;
      border-radius: var(--radius-btn);
      padding: .8rem 1.45rem;
      font-size: .97rem;
      font-weight: 600;
      line-height: 1;
      transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
    }

    .btn-lg {
      padding: .95rem 1.7rem;
      font-size: 1.02rem;
    }

    .btn-accent {
      background: var(--accent);
      color: #fff;
    }

    .btn-accent:hover {
      background: var(--accent-hover);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    }

    .btn-primary {
      background: var(--primary);
      color: #fff;
    }

    .btn-primary:hover {
      background: var(--primary-hover);
    }

    .btn-ghost {
      background: transparent;
      border-color: var(--primary);
      color: var(--primary);
    }

    .btn-ghost:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    .section {
      padding: clamp(2.7rem, 6vw, 4.8rem) 0;
    }

    .section-head {
      max-width: 780px;
      margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      padding: .22rem .72rem;
      background: rgba(20, 92, 75, .1);
      color: var(--primary);
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .08em;
    }

    .section-title {
      margin-top: .7rem;
      color: var(--text-strong);
      font-size: clamp(1.55rem, 2.5vw, 2.2rem);
      font-weight: 700;
      line-height: 1.25;
    }

    .section-intro {
      margin-top: .65rem;
      color: var(--text-body);
      font-size: 1.02rem;
      max-width: 46em;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      color: var(--primary);
      font-size: .9rem;
      font-weight: 600;
      transition: color .2s;
    }

    .text-link:hover {
      color: var(--accent);
    }

    .guide-hero {
      padding: clamp(2.8rem, 6vw, 4.6rem) 0;
      border-bottom: 1px solid var(--line);
      background: var(--bg-page);
    }

    .guide-hero__inner {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
      gap: clamp(1.6rem, 4vw, 3.5rem);
      align-items: center;
    }

    .guide-hero__copy {
      max-width: 560px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      padding: .3rem .78rem;
      background: var(--bg-deep);
      color: #F4E9D8;
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .06em;
    }

    .guide-hero h1 {
      margin-top: 1rem;
      color: var(--text-strong);
      font-size: clamp(2.35rem, 4.6vw, 3.8rem);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: .01em;
    }

    .guide-lead {
      margin-top: 1rem;
      max-width: 34em;
      font-size: 1.07rem;
      line-height: 1.85;
      color: var(--text-body);
    }

    .guide-points {
      margin-top: 1.25rem;
      display: grid;
      gap: .55rem;
    }

    .guide-points li {
      position: relative;
      padding-left: 1.55rem;
      color: var(--text-body);
      font-size: .98rem;
      line-height: 1.7;
    }

    .guide-points li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .5rem;
      width: .5rem;
      height: .5rem;
      border-radius: 50%;
      background: var(--accent);
    }

    .hero-actions {
      margin-top: 1.6rem;
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
    }

    .guide-card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      padding: .75rem .75rem .5rem;
      box-shadow: var(--shadow-card);
    }

    .guide-card__media {
      position: relative;
      background: var(--bg-deep);
      aspect-ratio: 16 / 10;
      border-radius: 10px;
      overflow: hidden;
    }

    .guide-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }

    .guide-media__label {
      position: absolute;
      left: .75rem;
      top: .75rem;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .3rem .7rem;
      background: var(--accent);
      color: #fff;
      border-radius: 999px;
      font-size: .75rem;
      font-weight: 700;
    }

    .guide-route {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .3rem;
      padding: .85rem .2rem .6rem;
    }

    .route-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .22rem;
      min-width: 0;
      flex: 1;
    }

    .route-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border: 1px solid var(--primary);
      color: var(--primary);
      border-radius: 50%;
      font-size: .72rem;
      font-weight: 700;
    }

    .route-text {
      color: var(--text-strong);
      font-size: .82rem;
      font-weight: 600;
      white-space: nowrap;
    }

    .route-arrow {
      flex: 0 0 auto;
      color: var(--line);
      font-size: 1rem;
      font-weight: 700;
    }

    .prep-section {
      background: var(--surface);
      border-bottom: 1px solid var(--line);
    }

    .prep-grid {
      display: grid;
      gap: 1rem;
    }

    .prep-card {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      padding: 1.5rem 1.35rem 1.35rem;
      background: var(--bg-page);
      box-shadow: var(--shadow-card);
      transition: box-shadow .25s, transform .25s, border-color .25s;
    }

    .prep-card:hover {
      box-shadow: var(--shadow-hover);
      border-color: #D7CFC0;
      transform: translateY(-3px);
    }

    .prep-num {
      color: var(--accent);
      font-family: "DIN Alternate", "Bahnschrift", "Arial Narrow", "Roboto Condensed", sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: .03em;
    }

    .prep-card h3 {
      margin-top: .45rem;
      color: var(--text-strong);
      font-size: 1.15rem;
      font-weight: 700;
    }

    .prep-card p {
      margin-top: .55rem;
      color: var(--text-body);
      font-size: .97rem;
      line-height: 1.72;
    }

    .prep-card .text-link {
      margin-top: 1rem;
    }

    .terminal-section {
      background: var(--bg-page);
      border-bottom: 1px solid var(--line);
    }

    .terminal-grid {
      display: grid;
      gap: 1rem;
    }

    .terminal-card {
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      padding: 1.4rem 1.3rem 1.3rem;
      box-shadow: var(--shadow-card);
      transition: box-shadow .25s, border-color .25s;
    }

    .terminal-card:hover {
      box-shadow: var(--shadow-hover);
      border-color: #D7CFC0;
    }

    .terminal-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: 1px solid var(--primary);
      border-radius: 12px;
      color: var(--primary);
      margin-bottom: .9rem;
    }

    .terminal-icon svg {
      width: 22px;
      height: 22px;
      stroke-width: 1.7;
    }

    .terminal-card h3 {
      color: var(--text-strong);
      font-size: 1.1rem;
      font-weight: 700;
    }

    .terminal-card p {
      margin-top: .5rem;
      color: var(--text-body);
      font-size: .95rem;
      line-height: 1.7;
      flex: 1;
    }

    .terminal-card .text-link {
      margin-top: 1rem;
    }

    .faq-section {
      background: var(--bg-page);
    }

    .faq-container {
      max-width: 900px;
    }

    .faq-container .section-head.center,
    .section-head.center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .faq-container .section-intro {
      margin-left: auto;
      margin-right: auto;
    }

    .faq-list {
      border-top: 1px solid var(--line);
      background: var(--surface);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-card);
      overflow: hidden;
    }

    .faq-item {
      border-bottom: 1px solid var(--line);
    }

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

    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
      padding: 1.2rem 1.35rem;
      background: transparent;
      border: 0;
      border-radius: 0;
      text-align: left;
      color: var(--text-strong);
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.5;
      transition: color .2s, background .2s;
    }

    .faq-question:hover {
      background: #FBF9F4;
      color: var(--primary);
    }

    .faq-icon {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      color: var(--primary);
      transition: transform .25s;
    }

    .faq-answer {
      display: none;
      padding: 0 1.35rem 1.25rem;
      color: var(--text-body);
      font-size: .96rem;
      line-height: 1.8;
    }

    .faq-answer p {
      max-width: 720px;
    }

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

    .faq-item.is-open .faq-answer {
      display: block;
    }

    .cta-band {
      position: relative;
      isolation: isolate;
      padding: clamp(3rem, 6vw, 5rem) 0;
      background-image: linear-gradient(90deg, rgba(6, 28, 23, .86), rgba(11, 52, 43, .72), rgba(6, 28, 23, .8)), url("/assets/images/backpic/back-3.png");
      background-position: center;
      background-size: cover;
      color: #F2EBDE;
    }

    .cta-band::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(90deg, rgba(6, 28, 23, .72), rgba(6, 28, 23, .48) 55%, rgba(6, 28, 23, .8));
    }

    .cta-band__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .cta-band h2 {
      max-width: 760px;
      color: #fff;
      font-size: clamp(1.65rem, 3vw, 2.5rem);
      font-weight: 700;
      line-height: 1.25;
    }

    .cta-band p {
      max-width: 620px;
      margin-top: .75rem;
      color: rgba(242, 235, 222, .88);
      font-size: 1rem;
      line-height: 1.8;
    }

    .cta-band .btn {
      margin-top: 1.6rem;
    }

    .site-footer {
      background: var(--bg-deep);
      color: rgba(234, 244, 238, .78);
    }

    .site-footer .container {
      padding-top: clamp(2.6rem, 5vw, 4rem);
      padding-bottom: 1.4rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .footer-brand .brand .brand-main,
    .footer-brand .brand .brand-tag {
      color: #F2EBDE;
    }

    .footer-brand p {
      margin-top: .9rem;
      max-width: 360px;
      color: rgba(234, 244, 238, .68);
      font-size: .9rem;
      line-height: 1.75;
    }

    .footer-block h4 {
      margin-bottom: .9rem;
      color: #F2EBDE;
      font-size: .98rem;
      font-weight: 700;
    }

    .footer-block ul li + li {
      margin-top: .45rem;
    }

    .footer-block a {
      color: rgba(234, 244, 238, .68);
      font-size: .9rem;
      line-height: 1.5;
      transition: color .2s;
    }

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

    .footer-bottom {
      margin-top: clamp(2rem, 4vw, 3rem);
      padding-top: 1.25rem;
      border-top: 1px solid rgba(234, 244, 238, .14);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: .6rem 1rem;
      font-size: .84rem;
      color: rgba(234, 244, 238, .52);
    }

    @media (min-width: 768px) {
      .prep-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .terminal-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .guide-hero__inner {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
        align-items: center;
      }

      .terminal-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (min-width: 1200px) {
      .hero-actions {
        flex-wrap: nowrap;
      }
    }

    @media (max-width: 1023px) {
      .header-inner {
        grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
        min-height: 60px;
      }

      .search-box {
        max-width: none;
        min-width: 0;
      }

      .brand-tag {
        display: none;
      }

      .main-nav .nav-link {
        padding: 0 .6rem;
        font-size: .9rem;
      }

      .guide-hero__inner {
        grid-template-columns: 1fr;
        max-width: 820px;
      }

      .guide-hero__copy {
        max-width: 640px;
      }

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

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

    @media (max-width: 767px) {
      .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
      }

      .split-header__visual {
        order: 3;
        margin-left: auto;
      }

      .split-header__content {
        order: 1;
        flex: 1;
        justify-content: flex-start;
        gap: .35rem;
      }

      .search-box {
        display: none;
      }

      .header-login {
        padding: 5px 12px;
        font-size: .82rem;
        margin-left: .35rem;
      }

      .brand-main {
        font-size: .98rem;
      }

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

      .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: block;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 12px 26px rgba(16, 40, 30, .08);
        transition: max-height .25s, opacity .2s, visibility .2s;
      }

      .site-header.nav-open .main-nav {
        max-height: 260px;
        visibility: visible;
        opacity: 1;
      }

      .nav-link {
        display: flex;
        width: 100%;
        padding: .78rem 1.1rem;
        border-radius: 0;
        font-size: .98rem;
        border-bottom: 1px solid var(--line);
      }

      .nav-link:hover {
        background: #FBF9F4;
      }

      .nav-link.active {
        background: rgba(20, 92, 75, .06);
      }

      .nav-link.active::after {
        left: 0;
        right: auto;
        width: 3px;
        bottom: 0;
        top: 0;
        height: auto;
        border-radius: 0;
      }

      .split-header__visual {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }

    @media (max-width: 575px) {
      .hero-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .prep-grid,
      .terminal-grid {
        grid-template-columns: 1fr;
      }

      .guide-points li {
        font-size: .95rem;
      }

      .guide-card {
        padding: .5rem .5rem .3rem;
      }

      .guide-route {
        gap: .15rem;
      }

      .route-text {
        font-size: .75rem;
      }

      .route-num {
        width: 18px;
        height: 18px;
        font-size: .65rem;
      }

      .faq-question {
        padding: 1rem 1rem;
        font-size: .96rem;
      }

      .faq-answer {
        padding: 0 1rem 1.1rem;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.7rem;
      }

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