/* 暖橙活力版 CSS */
:root {
  --orange: #ff7a2f;
  --orange-light: #ff9f5f;
  --orange-deep: #e65c00;
  --yellow: #ffd166;
  --bg: #fff7f0;
  --bg-card: #ffffff;
  --text: #2d2017;
  --text-light: #7a6452;
  --border: #ffe0c4;
  --shadow: 0 8px 24px rgba(255,122,47,0.12);
  --radius: 16px;
  --radius-sm: 10px;
}
* {box-sizing: border-box; margin: 0; padding: 0;}
html {scroll-behavior: smooth;}
body {
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  background-image: radial-gradient(circle at 10% 0%, rgba(255,209,102,0.15), transparent 40%),
                    radial-gradient(circle at 90% 10%, rgba(255,122,47,0.1), transparent 40%);
}
a {color: inherit; text-decoration: none;}
img {display: block; max-width: 100%;}
.container {width: min(1200px, calc(100% - 32px)); margin: 0 auto;}

/* 导航 */
.nav {
  position: sticky; top:0; z-index: 99;
  background: rgba(255,247,240,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {display: flex; align-items: center; padding: 14px 0; gap: 20px;}
.logo {display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; color: var(--orange-deep);}
.logo-icon {width:42px; height:42px; background: linear-gradient(135deg, var(--orange), var(--yellow)); border-radius: 12px; display: grid; place-items: center; color: white; font-size: 20px; box-shadow: var(--shadow);}
.nav-links {display: none; gap: 8px; margin-left: 20px;}
.nav-links a {padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600; color: var(--text-light); transition: .2s;}
.nav-links a:hover, .nav-links a.active {background: var(--orange); color: white;}
.nav-btn {margin-left: auto; padding: 10px 22px; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); color: white; border-radius: var(--radius-sm); font-weight: 700; box-shadow: var(--shadow); transition: .2s;}
.nav-btn:hover {transform: translateY(-2px);}
.burger {display: block; width: 42px; height:42px; border-radius: var(--radius-sm); border:1px solid var(--border); background: white;}
.mobile-menu {display: none; background: white; border-bottom:1px solid var(--border); padding: 10px 0;}
.mobile-menu.open {display: block;}
.mobile-menu a {display: block; padding: 12px 16px; font-weight: 600; color: var(--text-light);}
.mobile-menu a:hover {color: var(--orange);}

/* Hero */
.hero {padding: 50px 0;}
.hero-inner {display: grid; gap: 30px; align-items: center;}
.hero-badge {display: inline-block; padding: 6px 16px; background: #fff3e6; color: var(--orange-deep); border-radius: 99px; font-size: 13px; font-weight: 700; margin-bottom: 20px;}
h1 {font-size: clamp(32px, 5vw, 56px); line-height: 1.15; font-weight: 900; margin-bottom: 20px;}
h1 span {color: var(--orange-deep);}
.hero-desc {font-size: 17px; color: var(--text-light); margin-bottom: 30px; max-width: 550px;}
.hero-btns {display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px;}
.btn-primary {padding: 14px 28px; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); color: white; border-radius: var(--radius-sm); font-weight: 800; font-size: 15px; box-shadow: var(--shadow);}
.btn-secondary {padding: 14px 28px; background: white; border: 2px solid var(--border); color: var(--text); border-radius: var(--radius-sm); font-weight: 700; font-size:15px;}
.hero-stats {display: flex; gap: 30px; flex-wrap: wrap;}
.stat b {display: block; font-size: 28px; font-weight: 900; color: var(--orange-deep);}
.stat span {font-size: 13px; color: var(--text-light);}
.hero-banner {border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 3px solid white;}
.hero-banner img {width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover;}

/* 通用区块 */
.section {padding: 50px 0;}
.section-head {display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px;}
.section-head h2 {font-size: 26px; font-weight: 900;}
.section-head p {color: var(--text-light); font-size: 14px; margin-top: 4px;}
.more-link {color: var(--orange-deep); font-weight: 700; font-size: 14px;}

/* 主播卡片 */
.host-grid {display: grid; grid-template-columns: 1fr; gap: 20px;}
.host-card {background: var(--bg-card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: .25s; border: 1px solid var(--border);}
.host-card:hover {transform: translateY(-6px);}
.host-img {aspect-ratio: 4/5; overflow: hidden;}
.host-img img {width: 100%; height: 100%; object-fit: cover; transition: .3s;}
.host-card:hover .host-img img {transform: scale(1.05);}
.host-info {padding: 16px;}
.host-tag {display: inline-block; padding: 3px 10px; background: #fff3e6; color: var(--orange-deep); border-radius: 99px; font-size: 12px; font-weight: 700; margin-bottom: 8px;}
.host-name {font-size: 18px; font-weight: 800; margin-bottom: 6px;}
.host-desc {font-size: 13px; color: var(--text-light); margin-bottom: 10px;}
.host-meta {display: flex; justify-content: space-between; font-size: 12px; color: var(--text-light); font-weight: 600;}
.live-dot {display: inline-block; width: 8px; height: 8px; background: #ff4757; border-radius: 50%; margin-right: 4px; animation: pulse 1.5s infinite;}
@keyframes pulse {0%,100%{opacity:1;} 50%{opacity:.4;}}

/* APP下载 */
.download {background: linear-gradient(135deg, var(--orange), var(--yellow)); border-radius: var(--radius); padding: 40px; color: white; display: grid; gap: 30px; align-items: center;}
.download h2 {font-size: 30px; font-weight: 900; margin-bottom: 12px;}
.download p {opacity: .95; margin-bottom: 24px; font-size: 16px;}
.download-btns {display: flex; gap: 12px; flex-wrap: wrap;}
.dl-btn {padding: 12px 24px; background: white; color: var(--orange-deep); border-radius: var(--radius-sm); font-weight: 800;}
.dl-btn.secondary {background: rgba(255,255,255,0.2); color: white;}
.download-img img {max-width: 300px; margin: 0 auto; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.2);}

/* FAQ */
.faq-list {display: grid; gap: 12px;}
.faq-item {background: white; border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 18px 22px;}
.faq-q {font-size: 16px; font-weight: 800; margin-bottom: 8px; color: var(--orange-deep);}
.faq-a {font-size: 14px; color: var(--text-light); line-height: 1.7;}

/* 页脚 */
.footer {background: #2d2017; color: #ffd9b8; padding: 40px 0 24px; margin-top: 40px;}
.footer-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;}
.footer h4 {font-size: 15px; margin-bottom: 14px; color: white;}
.footer a {display: block; color: #c4a88f; font-size: 13px; margin: 8px 0;}
.copyright {border-top: 1px solid #4a3525; padding-top: 20px; font-size: 12px; color: #967a60; text-align: center;}

/* 响应式 */
@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: 1fr 1fr;}
}