/* 新中式国风版 CSS */
:root {
  --red: #c83c3c;
  --red-deep: #a82929;
  --ink: #2b2b2b;
  --paper: #f7f2e9;
  --paper-light: #fdfaf3;
  --gold: #d4a853;
  --text: #2b2b2b;
  --text-light: #6b5f50;
  --border: #e8dcc8;
  --shadow: 0 8px 28px rgba(168,41,41,0.1);
  --radius: 8px;
}
* {box-sizing: border-box; margin:0; padding:0;}
html {scroll-behavior: smooth;}
body {
  font-family: "Noto Serif SC","Songti SC","SimSun",serif;
  background: var(--paper);
  color: var(--text);
  line-height: 1.8;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5v50M5 30h50' stroke='%23e8dcc8' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/svg%3E");
}
a {color: inherit; text-decoration: none;}
img {display: block; max-width: 100%;}
.container {width: min(1180px, calc(100% - 40px)); margin: 0 auto;}

/* 导航 */
.nav {
  position: sticky; top:0; z-index: 99;
  background: rgba(247,242,233,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--red);
}
.nav-inner {display: flex; align-items: center; padding: 16px 0; gap: 20px;}
.logo {display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 24px; color: var(--red-deep); letter-spacing: 2px;}
.logo-seal {width:44px; height:44px; background: var(--red); color: white; display: grid; place-items: center; font-size: 22px; border-radius: 4px; box-shadow: 3px 3px 0 var(--gold); font-weight: 900;}
.nav-links {display: none; gap: 4px; margin-left: 30px;}
.nav-links a {padding: 8px 18px; font-weight: 600; color: var(--text-light); border-radius: 4px; transition: .2s; font-size: 15px;}
.nav-links a:hover, .nav-links a.active {background: var(--red); color: white;}
.nav-btn {margin-left: auto; padding: 10px 24px; background: var(--red); color: white; border-radius: 4px; font-weight: 700; letter-spacing: 1px; box-shadow: var(--shadow); transition: .2s; border: 1px solid var(--red-deep);}
.nav-btn:hover {background: var(--red-deep);}
.burger {display: block; width: 44px; height:44px; border:1px solid var(--border); background: var(--paper-light); border-radius: 4px;}
.mobile-menu {display: none; background: var(--paper-light); border-bottom:2px solid var(--border); padding: 10px 0;}
.mobile-menu.open {display: block;}
.mobile-menu a {display: block; padding: 12px 20px; font-weight: 600; color: var(--text-light); font-size: 16px;}
.mobile-menu a:hover {color: var(--red);}

/* Hero */
.hero {padding: 60px 0; position: relative;}
.hero-inner {display: grid; gap: 40px; align-items: center;}
.hero-verse {color: var(--gold); font-size: 14px; letter-spacing: 4px; margin-bottom: 20px; font-weight: 600;}
h1 {font-size: clamp(36px, 5vw, 60px); line-height: 1.3; font-weight: 900; margin-bottom: 24px; letter-spacing: 2px;}
h1 em {font-style: normal; color: var(--red); border-bottom: 4px double var(--gold); padding-bottom: 4px;}
.hero-desc {font-size: 17px; color: var(--text-light); margin-bottom: 32px; max-width: 520px; line-height: 2;}
.hero-btns {display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px;}
.btn-primary {padding: 14px 32px; background: var(--red); color: white; border-radius: 4px; font-weight: 800; font-size: 16px; letter-spacing: 2px; box-shadow: var(--shadow); border: 1px solid var(--red-deep);}
.btn-secondary {padding: 14px 32px; background: transparent; border: 2px solid var(--red); color: var(--red); border-radius: 4px; font-weight: 700; font-size:16px; letter-spacing: 2px;}
.hero-banner {border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 8px solid var(--paper-light); outline: 2px solid var(--gold);}
.hero-banner img {width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover;}

/* 通用区块 */
.section {padding: 50px 0;}
.section-title {text-align: center; margin-bottom: 40px;}
.section-title h2 {font-size: 30px; font-weight: 900; letter-spacing: 3px; margin-bottom: 10px; position: relative; display: inline-block;}
.section-title h2::before, .section-title h2::after {content: ""; position: absolute; top: 50%; width: 60px; height: 1px; background: var(--gold);}
.section-title h2::before {right: calc(100% + 20px);}
.section-title h2::after {left: calc(100% + 20px);}
.section-title p {color: var(--text-light); font-size: 14px; letter-spacing: 1px;}

/* 主播卡片 - 中式卷轴风 */
.host-grid {display: grid; grid-template-columns: 1fr; gap: 24px;}
.host-card {background: var(--paper-light); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: .25s; border: 1px solid var(--border); position: relative;}
.host-card::before {content: ""; position: absolute; top:0; left:0; right:0; height: 6px; background: linear-gradient(90deg, var(--red), var(--gold), var(--red)); z-index: 2;}
.host-card:hover {transform: translateY(-8px);}
.host-img {aspect-ratio: 3/4; overflow: hidden; position: relative;}
.host-img img {width: 100%; height: 100%; object-fit: cover; transition: .4s; filter: sepia(10%) contrast(1.05);}
.host-card:hover .host-img img {transform: scale(1.05); filter: sepia(0%) contrast(1.1);}
.host-info {padding: 20px; text-align: center;}
.host-style {display: inline-block; padding: 3px 12px; background: var(--red); color: white; border-radius: 2px; font-size: 12px; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px;}
.host-name {font-size: 20px; font-weight: 800; margin-bottom: 8px; letter-spacing: 1px; font-family: "Noto Serif SC",serif;}
.host-desc {font-size: 13px; color: var(--text-light); margin-bottom: 12px; line-height: 1.7;}
.host-meta {display: flex; justify-content: center; gap: 20px; font-size: 12px; color: var(--gold); font-weight: 700; letter-spacing: 1px; padding-top: 12px; border-top: 1px dashed var(--border);}

/* APP下载 */
.download {background: linear-gradient(135deg, #8b2323, var(--red)); border-radius: var(--radius); padding: 48px; color: white; display: grid; gap: 40px; align-items: center; position: relative; overflow: hidden; border: 2px solid var(--gold);}
.download::before {content: ""; position: absolute; inset: 12px; border: 1px solid rgba(212,168,83,0.3); pointer-events: none;}
.download h2 {font-size: 32px; font-weight: 900; margin-bottom: 16px; letter-spacing: 2px;}
.download p {opacity: .9; margin-bottom: 28px; font-size: 16px; line-height: 2;}
.download-btns {display: flex; gap: 16px; flex-wrap: wrap;}
.dl-btn {padding: 14px 28px; background: var(--gold); color: var(--red-deep); border-radius: 4px; font-weight: 800; letter-spacing: 1px;}
.dl-btn.secondary {background: transparent; color: white; border: 1px solid var(--gold);}
.download-img img {max-width: 280px; margin: 0 auto; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); border: 4px solid var(--gold);}

/* FAQ */
.faq-list {display: grid; gap: 16px;}
.faq-item {background: var(--paper-light); border-radius: var(--radius); border-left: 4px solid var(--red); padding: 20px 24px; border: 1px solid var(--border); border-left: 4px solid var(--red);}
.faq-q {font-size: 17px; font-weight: 800; margin-bottom: 10px; color: var(--red-deep); letter-spacing: 1px;}
.faq-a {font-size: 14px; color: var(--text-light); line-height: 1.9;}

/* 页脚 */
.footer {background: #2b2020; color: #e8dcc8; padding: 48px 0 28px; margin-top: 50px; border-top: 4px solid var(--red);}
.footer-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 32px;}
.footer h4 {font-size: 16px; margin-bottom: 16px; color: var(--gold); letter-spacing: 2px;}
.footer a {display: block; color: #c4b59d; font-size: 13px; margin: 10px 0; letter-spacing: 1px;}
.copyright {border-top: 1px solid #4a3838; padding-top: 20px; font-size: 12px; color: #968266; text-align: center; letter-spacing: 1px;}

/* 响应式 */
@media(min-width:768px) {
  .host-grid {grid-template-columns: repeat(2, 1fr);}
  .footer-grid {grid-template-columns: repeat(4, 1fr);}
}
@media(min-width:992px) {
  .nav-links {display: flex;}
  .burger {display: none;}
  .hero-inner {grid-template-columns: 1fr 1fr;}
  .host-grid {grid-template-columns: repeat(4, 1fr);}
  .download {grid-template-columns: 1.2fr 0.8fr;}
}