/* roulang page: index */
:root{
  --pink:#FF4D8D;
  --mint:#34D3C0;
  --lemon:#FFD34E;
  --ink:#241A2E;
  --paper:#FFF8F4;
  --white:#FFFFFF;
  --muted:#6B6475;
  --line:2px solid var(--ink);
  --radius:18px;
  --shadow:4px 4px 0 var(--ink);
  --shadow-soft:0 6px 18px rgba(36,26,46,.06);
  --soft-line:2px dashed rgba(36,26,46,.22);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  font-size:16px;line-height:1.85;color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(36,26,46,.13) 1px,transparent 1px);
  background-size:24px 24px;
  padding-bottom:78px;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;}
em{font-style:normal;}
.num{font-variant-numeric:tabular-nums;}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
.section{padding:72px 0;}
.section.soft{background:rgba(255,255,255,.74);border-top:2px solid rgba(36,26,46,.1);border-bottom:2px solid rgba(36,26,46,.1);}
.sec-head{margin-bottom:34px;}
.sec-head h2{font-size:clamp(22px,2.6vw,34px);font-weight:800;line-height:1.25;padding-left:16px;position:relative;}
.sec-head h2::before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:6px;border-radius:3px;background:var(--pink);}
.sec-head p{max-width:62ch;margin-top:10px;color:var(--muted);}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 24px;border-radius:999px;border:2px solid var(--ink);font-size:15px;font-weight:700;cursor:pointer;transition:transform .16s,box-shadow .16s,background-color .16s,border-color .16s;text-align:center;}
.btn-primary{background:var(--pink);color:#fff;box-shadow:3px 3px 0 var(--ink);}
.btn-primary:hover{background:#ff5f9a;transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.btn-primary:active{transform:none;box-shadow:0 0 0 var(--ink);}
.btn-ghost{background:var(--white);color:var(--ink);}
.btn-ghost:hover{background:#FFE9F1;border-color:var(--pink);color:var(--pink);}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px;}
.btn-block{width:100%;margin-top:14px;}
.btn:focus-visible,.nav-link:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--mint);outline-offset:3px;}

/* 头部导航 */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,248,244,.97);border-bottom:var(--line);}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:12px 0;}
.nav-left,.nav-right{display:flex;align-items:center;gap:24px;}
.nav-right{justify-content:flex-end;}
.nav-link{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .18s;}
.nav-link:hover{color:var(--pink);}
.nav-link:hover::after{transform:scaleX(1);}
.brand{display:inline-flex;align-items:center;gap:10px;justify-self:center;}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--pink);color:#fff;border:var(--line);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;font-size:19px;font-weight:900;}
.brand-name{font-size:18px;font-weight:800;letter-spacing:.5px;}
.nav-toggle{display:none;min-height:44px;padding:0 16px;border-radius:10px;background:var(--white);border:var(--line);font-size:15px;font-weight:700;justify-self:end;cursor:pointer;}
.mobile-menu{display:none;border-top:var(--soft-line);padding:8px 0 14px;}
.mobile-menu a{display:block;min-height:48px;line-height:48px;font-size:15px;font-weight:600;border-bottom:1px dashed rgba(36,26,46,.18);}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu.open{display:block;}

/* 首屏 */
.hero{
  position:relative;
  border-bottom:var(--line);
  background-image:
    radial-gradient(circle at 50% -20%,#FFE3EC 0%,rgba(255,227,236,0) 62%),
    linear-gradient(rgba(255,248,244,.88),rgba(255,248,244,.95)),
    url("/assets/images/506a21b0cb6bb2d4.jpg");
  background-size:cover,cover,cover;
  background-position:center;
}
.hero-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;padding:64px 0 56px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:var(--line);border-radius:999px;padding:4px 14px;font-size:13px;font-weight:700;box-shadow:2px 2px 0 var(--ink);}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink);}
.hero h1{font-size:clamp(30px,4.2vw,52px);font-weight:900;line-height:1.15;letter-spacing:-.5px;margin-top:18px;}
.hl{color:var(--pink);background:linear-gradient(transparent 68%,rgba(255,211,78,.8) 68%);}
.hero-sub{margin-top:14px;font-size:18px;font-weight:700;}
.hero-desc{margin-top:12px;max-width:56ch;color:var(--muted);}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px;padding-top:22px;border-top:var(--soft-line);}
.stat-num{font-size:24px;font-weight:900;line-height:1.3;font-variant-numeric:tabular-nums;}
.stat-label{font-size:13px;color:var(--muted);}

/* 图鉴主卡 */
.spotlight{position:relative;background:var(--white);border:var(--line);border-radius:20px;box-shadow:var(--shadow);padding:16px;}
.spotlight::after{content:"";position:absolute;inset:-12px;border:2px dashed rgba(36,26,46,.3);border-radius:26px;pointer-events:none;}
.spot-cover{position:relative;aspect-ratio:4/5;border:var(--line);border-radius:14px;overflow:hidden;background:var(--paper);}
.spot-cover img{width:100%;height:100%;object-fit:cover;}
.tag-no{position:absolute;top:10px;left:10px;background:var(--lemon);border:2px solid var(--ink);border-radius:8px;padding:1px 8px;font-size:12px;font-weight:800;}
.stars{position:absolute;top:10px;right:10px;background:var(--white);border:2px solid var(--ink);border-radius:8px;padding:1px 8px;color:var(--pink);font-size:12px;letter-spacing:1px;}
.spot-body{padding-top:12px;}
.spot-name{display:flex;align-items:center;gap:6px;font-size:17px;font-weight:800;}
.online{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px;}
.chip{display:inline-flex;align-items:center;height:25px;padding:0 9px;border-radius:8px;border:2px solid var(--ink);background:var(--white);font-size:12px;font-weight:700;}
.chip.pink{background:rgba(255,77,141,.16);}
.chip.mint{background:rgba(52,211,192,.24);}
.demo-tag{font-size:12px;font-weight:600;color:var(--muted);border:1px solid rgba(36,26,46,.3);border-radius:6px;padding:0 5px;}

/* 卖点三连 */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.why-card{position:relative;background:var(--white);border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 20px 18px;}
.why-no{font-size:44px;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(36,26,46,.45);font-variant-numeric:tabular-nums;}
.why-card h3{font-size:17px;font-weight:800;margin-top:10px;display:flex;align-items:center;gap:8px;}
.why-card h3 svg{flex:none;color:var(--mint);}
.why-card p{margin-top:8px;font-size:15px;color:var(--muted);}
.why-note{margin-top:14px;padding-top:12px;border-top:var(--soft-line);font-size:13px;color:var(--muted);}

/* 热门直播间 */
.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.room-card{background:var(--white);border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;}
.room-card:hover{transform:translateY(-2px);box-shadow:6px 6px 0 var(--ink);border-color:var(--pink);}
.room-cover{position:relative;aspect-ratio:4/5;border-bottom:var(--line);overflow:hidden;}
.room-cover img{width:100%;height:100%;object-fit:cover;}
.cat-badge{position:absolute;top:10px;left:0;background:var(--mint);border:2px solid var(--ink);border-left:none;border-radius:0 8px 8px 0;padding:1px 10px 1px 8px;font-size:12px;font-weight:800;}
.live-badge{position:absolute;top:10px;right:10px;background:rgba(36,26,46,.86);color:#fff;border-radius:8px;padding:1px 8px;font-size:12px;font-variant-numeric:tabular-nums;}
.room-body{padding:14px 16px 16px;}
.room-name{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;}
.room-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.heat{margin-top:12px;height:6px;border-radius:99px;background:rgba(36,26,46,.12);overflow:hidden;}
.heat i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--lemon));}

/* 场景演示 */
.scene-wrap{display:grid;grid-template-columns:.85fr 1.6fr;gap:44px;align-items:start;}
.step{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:16px 0;border-bottom:var(--soft-line);}
.step:last-child{border-bottom:none;}
.step-no{font-size:32px;font-weight:900;line-height:1.1;color:transparent;-webkit-text-stroke:2px var(--pink);font-variant-numeric:tabular-nums;}
.step h3{font-size:17px;font-weight:800;}
.step p{margin-top:4px;font-size:14px;color:var(--muted);}
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.shot-img{aspect-ratio:16/10;border:var(--line);border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 3px rgba(255,255,255,.6);}
.shot-img img{width:100%;height:100%;object-fit:cover;}
.shot figcaption{margin-top:10px;text-align:center;font-size:13px;font-weight:700;color:var(--muted);}

/* 分类频道 */
.channel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.channel-card{background:var(--white);border:var(--line);border-left:6px solid var(--mint);border-radius:14px;padding:16px;transition:transform .16s,box-shadow .16s;}
.channel-card:nth-child(2){border-left-color:var(--pink);}
.channel-card:nth-child(3){border-left-color:var(--lemon);}
.channel-card:nth-child(4){border-left-color:#8E7CFF;}
.channel-card:nth-child(5){border-left-color:#FF9A5A;}
.channel-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.channel-no{font-size:13px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;}
.channel-card h3{font-size:16px;font-weight:800;margin-top:2px;display:flex;align-items:center;justify-content:space-between;gap:6px;}
.channel-card h3 svg{flex:none;color:var(--muted);}
.channel-card p{margin-top:6px;font-size:14px;color:var(--muted);line-height:1.7;}

/* 即将开播 */
.up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.up-card{display:grid;grid-template-columns:96px 1fr;gap:14px;background:var(--white);border:var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow-soft);}
.up-cover{aspect-ratio:1/1;border:var(--line);border-radius:12px;overflow:hidden;}
.up-cover img{width:100%;height:100%;object-fit:cover;}
.up-name{font-size:15px;font-weight:800;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.time-badge{display:inline-flex;align-items:center;height:24px;margin-top:6px;padding:0 9px;border-radius:8px;border:2px solid var(--mint);color:#17907f;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;}
.up-link{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-size:14px;font-weight:700;color:var(--pink);}
.up-link:hover{text-decoration:underline;}

/* 社会认同 */
.voices{display:grid;grid-template-columns:4fr 8fr;gap:36px;align-items:start;}
.stat-block{border-left:6px solid var(--pink);padding-left:16px;margin-bottom:22px;}
.stat-block:last-child{margin-bottom:0;}
.stat-block strong{font-size:30px;font-weight:900;line-height:1.2;font-variant-numeric:tabular-nums;}
.stat-block strong small{font-size:14px;font-weight:700;color:var(--muted);margin-left:4px;}
.stat-block span{display:block;font-size:14px;color:var(--muted);}
.voice-card{position:relative;background:var(--white);border:var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-soft);margin-bottom:16px;}
.voice-card:last-child{margin-bottom:0;}
.voice-card::before{content:"“";position:absolute;top:-4px;right:18px;font-size:52px;line-height:1;color:rgba(255,77,141,.28);font-weight:900;}
.voice-top{display:flex;align-items:center;gap:12px;}
.avatar{width:44px;height:44px;border-radius:50%;border:var(--line);background:rgba(52,211,192,.32);display:grid;place-items:center;font-size:16px;font-weight:800;flex:none;}
.voice-name{font-size:15px;font-weight:800;}
.voice-star{font-size:13px;color:var(--pink);letter-spacing:2px;}
.voice-text{margin-top:10px;font-size:15px;color:var(--muted);}
.voice-tag{position:absolute;top:12px;right:64px;font-size:12px;color:var(--muted);}

/* 人气榜 */
.rank-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.rank-item{display:grid;grid-template-columns:48px 1fr 72px;align-items:center;gap:14px;padding:12px 0;border-bottom:var(--soft-line);}
.rank-no{font-size:26px;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px var(--ink);font-variant-numeric:tabular-nums;}
.rank-no.top1{color:var(--pink);}
.rank-no.top2{color:var(--mint);}
.rank-no.top3{color:var(--lemon);}
.rank-name{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:800;}
.rank-meta{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;}
.rank-mini{height:6px;border-radius:99px;background:rgba(36,26,46,.12);overflow:hidden;}
.rank-mini i{display:block;height:100%;border-radius:99px;background:var(--mint);}

/* 对比表格 */
.table-wrap{border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;background:var(--white);}
table{width:100%;border-collapse:collapse;min-width:640px;}
th,td{padding:14px 18px;text-align:left;font-size:15px;border-bottom:1px solid rgba(36,26,46,.1);}
thead th{background:rgba(255,77,141,.13);font-weight:800;}
tbody tr:nth-child(even){background:rgba(255,248,244,.85);}
tbody tr:last-child td{border-bottom:none;}
.mark{display:inline-flex;align-items:center;gap:6px;font-weight:700;}
.mark.yes{color:#17907f;}
.mark.no{color:var(--muted);}

/* 直播动态 */
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.news-item{display:grid;grid-template-columns:170px 1fr;gap:16px;background:var(--white);border:var(--line);border-radius:16px;padding:12px;transition:transform .16s,box-shadow .16s;}
.news-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.news-thumb{aspect-ratio:16/9;border:2px solid var(--ink);border-radius:10px;overflow:hidden;}
.news-thumb img{width:100%;height:100%;object-fit:cover;}
.news-title{font-size:15px;font-weight:800;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-meta{margin-top:8px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px;}

/* 异议拆解 */
.doubt-row{display:grid;grid-template-columns:1fr 1.7fr;gap:16px;margin-bottom:16px;}
.doubt-row:last-child{margin-bottom:0;}
.doubt-q{background:rgba(255,77,141,.1);border:2px dashed rgba(36,26,46,.32);border-radius:14px;padding:16px 18px;font-weight:700;}
.doubt-q span{display:block;font-size:13px;color:var(--pink);font-weight:800;margin-bottom:4px;}
.doubt-a{background:var(--white);border:var(--line);border-radius:14px;padding:16px 18px;color:var(--muted);font-size:15px;}

/* 保障条 */
.promise{background:rgba(52,211,192,.14);border-top:var(--line);border-bottom:var(--line);padding:26px 0;}
.promise-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.promise-list li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;padding-left:18px;border-left:2px dashed rgba(36,26,46,.28);}
.promise-list li:first-child{border-left:none;padding-left:0;}
.promise-list svg{flex:none;color:var(--pink);}

/* FAQ */
.faq-item{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:20px 0;border-bottom:var(--soft-line);}
.faq-item:last-child{border-bottom:none;}
.faq-no{font-size:28px;font-weight:900;line-height:1.2;color:transparent;-webkit-text-stroke:2px var(--pink);font-variant-numeric:tabular-nums;}
.faq-item summary{cursor:pointer;font-size:17px;font-weight:800;list-style:none;line-height:1.5;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"展开";float:right;font-size:13px;font-weight:700;color:var(--pink);padding-left:12px;}
.faq-item[open] summary::after{content:"收起";}
.faq-item p{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.85;}

/* 固定转化条 */
.fixed-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--white);border-top:var(--line);padding:10px 0;}
.fixed-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.fixed-tip{font-size:14px;font-weight:700;}

/* 页脚 */
.site-footer{background:var(--ink);color:rgba(255,248,244,.84);padding:56px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-brand .brand-mark{box-shadow:3px 3px 0 rgba(255,255,255,.35);}
.footer-brand strong{font-size:18px;font-weight:800;color:var(--white);}
.site-footer p{font-size:14px;line-height:1.8;}
.site-footer h4{font-size:15px;font-weight:800;color:var(--white);margin-bottom:12px;}
.site-footer li{margin-bottom:8px;}
.site-footer a{font-size:14px;transition:color .16s;}
.site-footer a:hover{color:var(--mint);}
.footer-bottom{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,248,244,.2);font-size:13px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;}

@media (max-width:1024px){
  .section{padding:56px 0;}
  .nav{grid-template-columns:1fr auto;}
  .nav-left,.nav-right{display:none;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .brand{justify-self:start;}
  .hero-inner{grid-template-columns:1fr;gap:36px;padding:48px 0 44px;}
  .spotlight{max-width:420px;}
  .why-grid{grid-template-columns:1fr;}
  .room-grid{grid-template-columns:repeat(3,1fr);}
  .scene-wrap{grid-template-columns:1fr;gap:28px;}
  .channel-grid{grid-template-columns:repeat(3,1fr);}
  .up-grid{grid-template-columns:repeat(2,1fr);}
  .voices{grid-template-columns:1fr;gap:28px;}
  .rank-cols{grid-template-columns:1fr;gap:0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  body{font-size:15px;padding-bottom:74px;}
  .room-grid{grid-template-columns:repeat(2,1fr);}
  .shot-grid{grid-template-columns:1fr;}
  .channel-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:1fr;}
  .doubt-row{grid-template-columns:1fr;}
  .promise-list{grid-template-columns:1fr 1fr;gap:14px;}
  .promise-list li{border-left:none;padding-left:0;}
  .hero-stats{grid-template-columns:1fr 1fr;}
  .spotlight{max-width:100%;}
  .voice-tag{position:static;display:block;margin-bottom:6px;}
  .faq-item{grid-template-columns:48px 1fr;gap:12px;}
  .fixed-tip{font-size:13px;}
}
@media (max-width:520px){
  .wrap{padding:0 16px;}
  .section{padding:48px 0;}
  .room-grid{grid-template-columns:1fr;}
  .up-grid{grid-template-columns:1fr;}
  .channel-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero h1{font-size:30px;}
  .hero-actions .btn{width:100%;}
  .rank-item{grid-template-columns:40px 1fr;gap:10px;}
  .rank-mini{display:none;}
  .news-item{grid-template-columns:1fr;}
  .faq-item{grid-template-columns:1fr;gap:6px;}
  .faq-no{font-size:22px;}
  .promise-list{grid-template-columns:1fr;}
  .fixed-bar .wrap{gap:10px;}
  .fixed-tip{max-width:52%;line-height:1.5;}
  .btn-sm{min-height:40px;padding:0 14px;font-size:13px;}
}

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