/* roulang page: index */
:root{
  --ink-900:#0B0A10;
  --ink-800:#12111A;
  --ink-700:#1A1826;
  --line:rgba(255,255,255,.08);
  --crimson:#F5385C;
  --cyan:#6FE3FF;
  --paper:#F6F1E7;
  --muted:#A6A1B2;
  --gold:#E9C46A;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--paper);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3,h4,p,ul,ol,li,figure,figcaption{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
@media (min-width:1024px){.container{padding:0 32px}}
.section{padding:56px 0}
@media (min-width:1024px){.section{padding:88px 0}}
.alt{background:var(--ink-800)}
.sec-head{margin-bottom:28px}
.sec-title{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
@media (min-width:768px){.sec-title{font-size:28px}}
.sec-sub{margin-top:8px;color:var(--muted);font-size:14px;max-width:64ch}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;border-radius:var(--r-sm);
  font-size:15px;font-weight:700;letter-spacing:.01em;
  transition:transform .12s ease-out,background .12s ease-out,border-color .12s ease-out,filter .12s ease-out;
}
.btn-primary{background:var(--crimson);color:var(--paper);box-shadow:0 6px 20px rgba(245,56,92,.2)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{border:1px solid rgba(246,241,231,.2);color:var(--paper)}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(246,241,231,.4)}
.btn-sm{min-height:34px;padding:0 14px;font-size:13px}
.badge{
  display:inline-flex;align-items:center;height:20px;padding:0 7px;
  border:1px solid rgba(111,227,255,.5);border-radius:4px;
  color:var(--cyan);font-size:11px;line-height:1;letter-spacing:.02em;
}
.perf{height:8px;background:repeating-linear-gradient(90deg,rgba(246,241,231,.16) 0 10px,transparent 10px 26px)}

/* ---- header ---- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,10,16,.86);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease-out;
}
.site-header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.4)}
.header-inner{display:flex;align-items:center;gap:18px;min-height:64px}
@media (min-width:1024px){.header-inner{min-height:72px}}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{position:relative;width:32px;height:32px;border-radius:8px;background:var(--crimson);flex-shrink:0}
.brand-mark::after{
  content:"";position:absolute;left:12px;top:9px;
  border-left:11px solid var(--paper);
  border-top:7px solid transparent;border-bottom:7px solid transparent;
}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt strong{font-size:16px;font-weight:800;letter-spacing:-.02em}
.brand-txt small{display:none;font-size:11px;color:var(--muted);letter-spacing:.02em}
@media (min-width:768px){.brand-txt small{display:block}}
.main-nav{display:none}
.main-nav.open{
  display:block;position:absolute;left:0;right:0;top:100%;
  background:var(--ink-800);border-bottom:1px solid var(--line);
  padding:6px 20px 16px;z-index:60;
}
.main-nav a{display:block;padding:13px 0;font-size:16px;border-bottom:1px solid var(--line)}
.main-nav a:last-child{border-bottom:0}
.head-search{display:none;align-items:center;gap:8px;margin-left:auto}
.head-search input{
  width:150px;height:34px;padding:0 12px;border-radius:6px;
  border:1px solid var(--line);background:var(--ink-800);
  font-size:13px;color:var(--paper);
}
.head-search input::placeholder{color:var(--muted)}
.nav-toggle{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13px;color:var(--muted);
}
@media (min-width:1024px){
  .main-nav{
    display:flex;position:static;align-items:center;gap:22px;
    margin-left:12px;padding:0;background:none;border:0;
  }
  .main-nav a{
    display:inline-block;padding:6px 0;font-size:14px;border:0;
    color:var(--muted);position:relative;transition:color .12s ease-out;
  }
  .main-nav a:hover,.main-nav a.on{color:var(--paper)}
  .main-nav a.on::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
    background:var(--crimson);border-radius:2px;
  }
  .head-search{display:flex}
  .nav-toggle{display:none}
}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:44px 0 40px;border-bottom:1px solid var(--line)}
.hero::before{
  content:"";position:absolute;inset:0;
  background:url('/assets/images/6be6a12da8527a4c.jpg') center/cover no-repeat;
  opacity:.16;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(620px 320px at 72% 16%,rgba(245,56,92,.12),transparent 70%);
}
.hero .container{position:relative;z-index:1}
@media (min-width:1024px){
  .hero{padding:64px 0 56px}
  .hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
}
.eyebrow{
  display:inline-block;margin-bottom:14px;padding:3px 10px;border-radius:4px;
  border:1px solid rgba(245,56,92,.55);
  color:var(--crimson);font-size:12px;letter-spacing:.04em;
}
.hero-title{font-size:32px;font-weight:800;line-height:1.2;letter-spacing:-.03em}
@media (min-width:768px){.hero-title{font-size:46px}}
@media (min-width:1024px){.hero-title{font-size:52px}}
.hero-title .hl{color:var(--crimson);box-shadow:inset 0 -4px 0 rgba(245,56,92,.35)}
.hero-sub{margin-top:12px;font-size:16px;font-weight:700;color:var(--paper)}
.hero-desc{margin-top:14px;max-width:52ch;color:var(--muted);font-size:14px;line-height:1.8}
@media (min-width:1024px){.hero-desc{font-size:15px}}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero-actions .btn{width:100%}
@media (min-width:520px){.hero-actions .btn{width:auto}}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;padding-top:16px;
  border-top:1px dashed rgba(233,196,106,.4);
  font-size:12px;color:var(--muted);letter-spacing:.02em;
}
.hero-art{position:relative;height:330px;max-width:300px;margin:34px auto 0}
@media (min-width:1024px){.hero-art{height:420px;max-width:340px;margin:0 auto}}
.stack{
  position:absolute;inset:0;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--ink-800);
}
.stack img{width:100%;height:100%;object-fit:cover}
.s1{transform:rotate(-6deg) translate(-16px,8px);opacity:.55;z-index:1}
.s2{transform:rotate(4deg) translate(18px,0);opacity:.82;z-index:2}
.s3{transform:translateY(-4px);z-index:3;box-shadow:0 18px 42px rgba(0,0,0,.55)}
.stack-score{
  position:absolute;right:0;bottom:0;padding:8px 13px;
  background:var(--crimson);color:var(--paper);
  font-size:24px;font-weight:800;line-height:1;
  border-top-left-radius:8px;font-variant-numeric:tabular-nums;
}

/* ---- pain ---- */
.pain-grid{display:grid;gap:14px}
@media (min-width:768px){.pain-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pain-grid{grid-template-columns:repeat(4,1fr)}}
.pain-item{padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800)}
.pain-dot{
  display:block;width:18px;height:18px;margin-bottom:12px;border-radius:5px;
  border:1px solid rgba(245,56,92,.6);background:rgba(245,56,92,.16);
}
.pain-item h3{font-size:15px;font-weight:700}
.pain-item p{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.7}

/* ---- solution ---- */
.sol-inner{display:grid;gap:32px}
@media (min-width:1024px){.sol-inner{grid-template-columns:5fr 7fr;gap:56px;align-items:start}}
.sol-head p{margin-top:12px;color:var(--muted);font-size:14px}
@media (min-width:1024px){.sol-head{position:sticky;top:96px}}
.sol-list li{
  position:relative;padding:0 0 26px 18px;border-left:2px solid var(--crimson);
  margin-bottom:26px;
}
.sol-list li:last-child{margin-bottom:0;padding-bottom:0}
.sol-no{
  display:block;margin-bottom:6px;color:var(--cyan);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:.1em;
}
.sol-list h3{font-size:17px;font-weight:700}
.sol-list p{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.8}

/* ---- poster grid ---- */
.poster-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:520px){.poster-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:768px){.poster-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.poster-grid{grid-template-columns:repeat(6,1fr);gap:18px}}
.poster{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--ink-800);
  transition:transform .12s ease-out,border-color .12s ease-out,box-shadow .12s ease-out;
}
.poster:hover{
  transform:translateY(-4px);
  border-color:rgba(245,56,92,.6);
  box-shadow:0 8px 24px rgba(245,56,92,.22);
}
.poster img{width:100%;aspect-ratio:2/3;object-fit:cover}
.poster .score{
  position:absolute;top:0;right:0;padding:6px 9px;
  background:var(--crimson);color:var(--paper);
  font-size:12px;font-weight:800;line-height:1;
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%);
  font-variant-numeric:tabular-nums;
}
.poster-foot{
  position:absolute;left:0;right:0;bottom:0;padding:24px 10px 10px;
  background:linear-gradient(transparent,rgba(11,10,16,.94));
}
.poster-foot h3{
  font-size:13px;font-weight:700;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.poster-foot p{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11px;color:var(--muted)}

/* ---- wide cards ---- */
.wide-grid{display:grid;gap:14px}
@media (min-width:768px){.wide-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
.wide{
  display:grid;grid-template-columns:40% 1fr;
  border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;background:var(--ink-800);
  transition:border-color .12s ease-out;
}
.wide:hover{border-color:rgba(245,56,92,.4)}
.wide img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.wide-body{padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.wide-body h3{font-size:14px;font-weight:700;line-height:1.4}
.wide-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.wide-date{font-size:11px;color:var(--muted);opacity:.8}

/* ---- steps ---- */
.steps{display:grid;gap:0}
@media (min-width:768px){.steps{grid-template-columns:repeat(4,1fr);gap:24px}}
.step{position:relative;padding:0 0 24px 28px}
.step::before{
  content:"";position:absolute;left:3px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--crimson);
}
.step::after{
  content:"";position:absolute;left:7px;top:24px;bottom:0;width:0;
  border-left:1px dashed var(--line);
}
.step:last-child{padding-bottom:0}
.step:last-child::after{display:none}
@media (min-width:768px){
  .step{padding:26px 0 0}
  .step::before{left:0;top:2px}
  .step::after{left:22px;right:-24px;top:6px;bottom:auto;width:auto;border-left:0;border-top:1px dashed var(--line)}
  .step:last-child::after{display:block}
}
.step-no{
  display:block;margin-bottom:6px;color:var(--cyan);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.1em;
}
.step h3{font-size:15px;font-weight:700}
.step p{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.7}

/* ---- category ---- */
.cat-grid{display:grid;gap:14px}
@media (min-width:520px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cat-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.cat{
  padding:20px 18px;border:1px solid var(--line);border-left:3px solid var(--crimson);
  border-radius:var(--r-md);background:var(--ink-800);
  transition:background .12s ease-out;
}
.cat:hover{background:var(--ink-700)}
.cat h3{font-size:16px;font-weight:700}
.cat p{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.75}
.cat a{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--crimson)}
.cat a:hover{text-decoration:underline}

/* ---- rank ---- */
.rank-cols{display:grid}
@media (min-width:1024px){
  .rank-cols{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:40px}
}
.rank-row{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line);transition:background .12s ease-out;
}
.rank-row:hover{background:var(--ink-700)}
.rank-no{
  flex-shrink:0;min-width:46px;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-style:italic;font-size:30px;font-weight:800;line-height:1;
  color:rgba(245,56,92,.22);
}
.rank-row.top .rank-no{color:var(--crimson)}
.rank-name{font-size:14px;font-weight:700;line-height:1.4}
.rank-meta{
  margin-left:auto;display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
}
.rank-meta .tag{color:var(--cyan)}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:1024px){.stats{grid-template-columns:repeat(4,1fr);gap:18px}}
.stat{padding:20px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800)}
.stat b{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:38px;font-weight:800;line-height:1;letter-spacing:-.02em;
}
@media (min-width:768px){.stat b{font-size:48px}}
.stat b span{font-size:20px;color:var(--cyan);font-weight:700}
.stat p{margin-top:10px;font-size:12px;color:var(--muted)}

/* ---- metrics ---- */
.metric{margin-bottom:20px}
.metric:last-child{margin-bottom:0}
.metric-top{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:8px}
.metric-top b{color:var(--cyan);font-weight:700;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:3px;background:var(--ink-700);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--crimson),var(--cyan))}

/* ---- voices ---- */
.voice-grid{display:grid;gap:14px}
@media (min-width:768px){.voice-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.voice-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
.voice{
  position:relative;overflow:hidden;padding:22px 18px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800);
}
.voice::before{
  content:"\201C";position:absolute;left:12px;top:-4px;
  font-family:Georgia,serif;font-size:56px;line-height:1;
  color:rgba(246,241,231,.12);
}
.voice-who{display:flex;align-items:center;gap:10px;position:relative}
.avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--crimson);color:var(--paper);font-size:14px;font-weight:700;
}
.voice-who strong{display:block;font-size:14px;font-weight:700;line-height:1.3}
.voice-who small{display:block;font-size:11px;color:var(--muted)}
.voice p{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.75}

/* ---- audience ---- */
.aud-grid{display:grid;gap:14px}
@media (min-width:520px){.aud-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.aud-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
.aud{padding:20px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800)}
.aud-ico{
  display:block;width:26px;height:26px;margin-bottom:12px;border-radius:7px;
  border:1px solid rgba(111,227,255,.5);background:rgba(111,227,255,.1);
}
.aud h3{font-size:15px;font-weight:700}
.aud p{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.7}
.aud a{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--cyan)}
.aud a:hover{text-decoration:underline}

/* ---- topics ---- */
.topic-grid{display:grid;gap:16px}
@media (min-width:768px){.topic-grid{grid-template-columns:repeat(3,1fr)}}
.topic{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:230px;padding:18px;
  border:1px solid var(--line);border-radius:var(--r-md);
}
.topic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.topic::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 15%,rgba(11,10,16,.94));
}
.topic > *{position:relative;z-index:2}
.topic h3{font-size:17px;font-weight:800;letter-spacing:-.01em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tags span{
  padding:2px 9px;border:1px solid rgba(246,241,231,.28);border-radius:999px;
  font-size:11px;color:var(--paper);line-height:1.6;
}

/* ---- news ---- */
.news-grid{display:grid;gap:14px}
@media (min-width:768px){.news-grid{grid-template-columns:1fr 1fr;gap:18px}}
.news{
  display:grid;grid-template-columns:40% 1fr;
  border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;background:var(--ink-800);
  transition:border-color .12s ease-out;
}
.news:hover{border-color:rgba(245,56,92,.4)}
.news img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.news-body{padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.news-body h3{
  font-size:14px;font-weight:700;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.news-meta .tag{color:var(--cyan)}

/* ---- faq ---- */
.faq-list{max-width:860px}
.faq-item{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ink-800);padding:0 16px;margin-bottom:10px;
}
.faq-item summary{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 0;font-size:15px;font-weight:700;cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--crimson);font-size:18px;line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{padding:0 0 16px;font-size:14px;color:var(--muted);line-height:1.8}

/* ---- cta ---- */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:56px 0}
@media (min-width:1024px){.cta{padding:80px 0}}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(560px 260px at 50% 45%,rgba(245,56,92,.16),transparent 70%);
}
.cta-inner{position:relative;z-index:1;max-width:640px;margin:0 auto;text-align:center}
.cta h2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
@media (min-width:768px){.cta h2{font-size:30px}}
.cta p{margin-top:10px;font-size:14px;color:var(--muted)}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.cta-actions .btn{width:100%}
@media (min-width:520px){.cta-actions .btn{width:auto}}

/* ---- footer ---- */
.site-footer{background:var(--ink-800);border-top:1px solid var(--line)}
.foot-grid{display:grid;gap:28px;padding:44px 0 32px}
@media (min-width:520px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot-brand .brand-mark{width:28px;height:28px;border-radius:7px}
.foot-brand .brand-mark::after{left:10px;top:8px;border-left:10px solid var(--paper);border-top:6px solid transparent;border-bottom:6px solid transparent}
.foot-brand strong{font-size:15px;font-weight:800}
.foot-desc{font-size:13px;color:var(--muted);line-height:1.8;max-width:32ch}
.foot-col h3{font-size:13px;font-weight:700;letter-spacing:.04em;margin-bottom:12px;color:var(--paper)}
.foot-col li{margin-bottom:8px}
.foot-col a{font-size:13px;color:var(--muted);transition:color .12s ease-out}
.foot-col a:hover{color:var(--paper)}
.copyright{
  padding:14px 0 24px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);text-align:center;
}