/* roulang page: index */
:root{
      --bg: #120e12;
      --bg-2: #191419;
      --surface: #221b22;
      --surface-2: #2b2229;
      --paper: #f7f1eb;
      --paper-2: #efe7df;
      --line: rgba(255,255,255,.10);
      --line-soft: rgba(18,14,18,.10);
      --text: #f8f2ee;
      --text-dark: #221a1f;
      --muted: #c7b7b0;
      --muted-dark: #6d5d59;
      --accent: #b34f58;
      --accent-2: #d9b26f;
      --accent-3: #8f5b65;
      --shadow: 0 18px 44px rgba(0,0,0,.28);
      --shadow-soft: 0 12px 28px rgba(32,18,24,.10);
      --radius: 18px;
      --radius-sm: 14px;
      --radius-lg: 26px;
      --container: 1240px;
      --gap: 24px;
      --gap-lg: 40px;
      --header-h: 84px;
      --transition: .28s cubic-bezier(.2,.8,.2,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
      background:linear-gradient(180deg,#0f0b0f 0%, #140f14 16%, #f6f0eb 16.1%, #f6f0eb 100%);
      color:var(--text-dark);
      line-height:1.72;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%;height:auto}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(179,79,88,.22);color:#24151a}
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      backdrop-filter:saturate(140%) blur(14px);
      background:rgba(16,11,16,.76);
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:height var(--transition), padding var(--transition), background var(--transition), box-shadow var(--transition);
    }
    .site-header.is-scrolled{
      background:rgba(15,10,15,.9);
      box-shadow:0 10px 30px rgba(0,0,0,.16);
    }
    .header-inner{
      min-height:var(--header-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:14px 0;
      transition:padding var(--transition), min-height var(--transition);
    }
    .site-header.is-scrolled .header-inner{
      min-height:68px;
      padding:8px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      background:
        radial-gradient(circle at 28% 30%, rgba(255,255,255,.34), transparent 28%),
        linear-gradient(160deg, #d46872 0%, #8f3b45 55%, #3a2027 100%);
      box-shadow:0 12px 26px rgba(179,79,88,.28);
      position:relative;
      flex:none;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:11px;
      border:1px solid rgba(255,255,255,.26);
    }
    .brand-text{
      min-width:0;
      color:var(--text);
    }
    .brand-text strong{
      display:block;
      font-size:1.02rem;
      letter-spacing:.02em;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-text span{
      display:block;
      font-size:.82rem;
      color:rgba(248,242,238,.68);
      margin-top:3px;
    }
    .nav-wrap{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .site-nav{
      display:flex;
      align-items:center;
      gap:6px;
      background:rgba(255,255,255,.04);
      padding:8px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:999px;
    }
    .site-nav a{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 14px;
      border-radius:999px;
      color:rgba(248,242,238,.84);
      font-size:.96rem;
      transition:background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
      outline:none;
    }
    .site-nav a:hover{
      background:rgba(255,255,255,.08);
      color:#fff;
      transform:translateY(-1px);
    }
    .site-nav a:focus-visible,
    .btn:focus-visible,
    .menu-btn:focus-visible,
    .mini-link:focus-visible,
    .faq summary:focus-visible,
    input:focus-visible{
      outline:2px solid rgba(217,178,111,.9);
      outline-offset:3px;
    }
    .site-nav a.active,
    .site-nav a[aria-current="page"]{
      background:rgba(179,79,88,.18);
      color:#fff;
      box-shadow:inset 0 0 0 1px rgba(217,178,111,.18);
    }
    .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex:none;
    }
    .btn{
      border:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:12px 18px;
      border-radius:999px;
      font-weight:650;
      letter-spacing:.01em;
      transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, #c85b64 0%, #9e3b46 55%, #7d2734 100%);
      box-shadow:0 16px 28px rgba(179,79,88,.26);
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 34px rgba(179,79,88,.34);
    }
    .btn-secondary{
      color:var(--text);
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.15);
    }
    .btn-secondary:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.09);
      border-color:rgba(255,255,255,.22);
      box-shadow:0 10px 24px rgba(0,0,0,.12);
    }
    .btn-light{
      color:var(--text-dark);
      background:#fff;
      border:1px solid rgba(18,14,18,.08);
      box-shadow:0 10px 18px rgba(18,14,18,.08);
    }
    .btn-light:hover{
      transform:translateY(-2px);
      box-shadow:0 14px 24px rgba(18,14,18,.12);
    }
    .menu-btn{
      display:none;
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#fff;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:transform var(--transition), background var(--transition), border-color var(--transition);
    }
    .menu-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.09)}
    .menu-icon{
      position:relative;
      width:18px;
      height:12px;
    }
    .menu-icon::before,
    .menu-icon::after,
    .menu-icon span{
      content:"";
      position:absolute;
      left:0;
      right:0;
      height:2px;
      border-radius:2px;
      background:#fff;
      transition:transform var(--transition), top var(--transition), opacity var(--transition);
    }
    .menu-icon::before{top:0}
    .menu-icon span{top:5px}
    .menu-icon::after{top:10px}
    .mobile-panel{
      display:none;
      border-top:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(16,11,16,.98), rgba(20,14,20,.98));
    }
    .mobile-panel .panel-inner{
      padding:14px 0 18px;
      display:grid;
      gap:10px;
    }
    .mobile-panel a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 16px;
      border-radius:16px;
      color:var(--text);
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
    }
    .mobile-panel a.active{background:rgba(179,79,88,.2);border-color:rgba(217,178,111,.18)}
    .hero{
      position:relative;
      min-height:calc(100vh - var(--header-h));
      display:flex;
      align-items:center;
      color:var(--text);
      background:
        linear-gradient(90deg, rgba(12,8,12,.92) 0%, rgba(12,8,12,.78) 48%, rgba(12,8,12,.48) 100%),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 22%, rgba(217,178,111,.18), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(179,79,88,.18), transparent 24%);
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      z-index:1;
      width:100%;
      padding:72px 0 54px;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:36px;
      align-items:center;
    }
    .hero-copy{
      max-width:660px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      color:rgba(248,242,238,.88);
      font-size:.92rem;
      letter-spacing:.02em;
      margin-bottom:18px;
    }
    .eyebrow i{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent-2);
      box-shadow:0 0 0 4px rgba(217,178,111,.15);
    }
    .hero h1{
      margin:0;
      font-size:clamp(2.4rem, 5vw, 4.8rem);
      line-height:1.02;
      letter-spacing:-.03em;
      color:#fff;
      text-wrap:balance;
    }
    .hero p{
      margin:20px 0 0;
      max-width:58ch;
      font-size:1.05rem;
      color:rgba(248,242,238,.84);
      line-height:1.85;
      text-wrap:pretty;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:28px;
    }
    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:24px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      color:rgba(248,242,238,.88);
      border:1px solid rgba(255,255,255,.10);
      font-size:.92rem;
      backdrop-filter:blur(10px);
    }
    .badge small{
      color:rgba(248,242,238,.62);
      font-size:.82rem;
    }
    .hero-panel{
      position:relative;
      align-self:stretch;
      min-height:460px;
      border-radius:var(--radius-lg);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      box-shadow:var(--shadow);
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.24)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
    }
    .hero-panel .overlay{
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(18,14,18,.16) 0%, rgba(18,14,18,.52) 100%),
        linear-gradient(135deg, rgba(179,79,88,.22) 0%, rgba(18,14,18,.08) 48%, rgba(217,178,111,.10) 100%);
    }
    .hero-card{
      position:absolute;
      left:22px;
      right:22px;
      bottom:22px;
      padding:18px;
      border-radius:22px;
      background:rgba(19,13,19,.72);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter:blur(18px);
      box-shadow:0 16px 34px rgba(0,0,0,.22);
    }
    .hero-card-top{
      display:flex;
      justify-content:space-between;
      gap:14px;
      align-items:flex-start;
    }
    .hero-card h2{
      margin:0;
      color:#fff;
      font-size:1.18rem;
      line-height:1.3;
    }
    .hero-card p{
      margin:8px 0 0;
      color:rgba(248,242,238,.74);
      font-size:.95rem;
      line-height:1.7;
    }
    .hero-thumb{
      width:132px;
      aspect-ratio:4/5;
      flex:none;
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 14px 28px rgba(0,0,0,.24);
    }
    .hero-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .hero-mini{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
      margin-top:16px;
    }
    .mini-box{
      padding:12px 12px 11px;
      border-radius:16px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
    }
    .mini-box strong{
      display:block;
      color:#fff;
      font-size:1rem;
      line-height:1.2;
    }
    .mini-box span{
      display:block;
      margin-top:5px;
      font-size:.82rem;
      color:rgba(248,242,238,.68);
    }
    .section{
      padding:86px 0;
    }
    .section.tight{padding:72px 0}
    .section.dark{
      background:linear-gradient(180deg, #f6f0eb 0%, #efe8e1 100%);
    }
    .section.deep{
      background:
        radial-gradient(circle at top right, rgba(179,79,88,.06), transparent 28%),
        linear-gradient(180deg, #140f14 0%, #1a1218 100%);
      color:var(--text);
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:26px;
    }
    .section-head h2{
      margin:0;
      font-size:clamp(1.6rem, 2vw, 2.4rem);
      line-height:1.16;
      letter-spacing:-.02em;
      color:inherit;
    }
    .section-head p{
      margin:0;
      max-width:58ch;
      color:inherit;
      opacity:.72;
      font-size:.98rem;
      line-height:1.75;
    }
    .feature-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:var(--gap);
      align-items:stretch;
    }
    .feature-main,
    .feature-side{
      display:grid;
      gap:var(--gap);
    }
    .feature-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-lg);
      border:1px solid var(--line-soft);
      background:#fff;
      box-shadow:var(--shadow-soft);
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      min-height:100%;
    }
    .feature-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 30px rgba(18,14,18,.12);
      border-color:rgba(179,79,88,.16);
    }
    .feature-card.large{
      min-height:510px;
      background:
        linear-gradient(180deg, rgba(18,14,18,.04), rgba(18,14,18,.12)),
        #fff;
    }
    .feature-card .media{
      position:relative;
      height:270px;
      overflow:hidden;
      background:#ddd;
    }
    .feature-card.large .media{
      height:300px;
    }
    .feature-card .media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .6s ease;
    }
    .feature-card:hover .media img{transform:scale(1.04)}
    .feature-card .content{
      padding:20px 20px 22px;
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 12px;
      border-radius:999px;
      font-size:.84rem;
      color:#8d3441;
      background:rgba(179,79,88,.1);
      margin-bottom:12px;
    }
    .feature-card h3,
    .hot-card h3,
    .news-item h3,
    .topic-card h3{
      margin:0;
      color:var(--text-dark);
      font-size:1.18rem;
      line-height:1.4;
    }
    .feature-card p,
    .hot-card p,
    .news-item p,
    .topic-card p{
      margin:10px 0 0;
      color:var(--muted-dark);
      font-size:.96rem;
      line-height:1.78;
    }
    .feature-meta,
    .card-meta,
    .news-meta,
    .topic-meta{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      margin-top:14px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 11px;
      border-radius:999px;
      font-size:.8rem;
      background:rgba(18,14,18,.05);
      color:rgba(34,26,31,.8);
      border:1px solid rgba(18,14,18,.06);
    }
    .tag.accent{
      background:rgba(179,79,88,.10);
      color:#8c3140;
      border-color:rgba(179,79,88,.14);
    }
    .tag.gold{
      background:rgba(217,178,111,.14);
      color:#91672a;
      border-color:rgba(217,178,111,.18);
    }
    .feature-card.large .content{
      position:relative;
      margin-top:-54px;
      background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 18%);
      border-radius:28px 28px 0 0;
    }
    .feature-card.large .content p{
      max-width:62ch;
    }
    .side-stack{
      display:grid;
      gap:var(--gap);
      align-content:start;
    }
    .feature-mini{
      display:grid;
      grid-template-columns:120px 1fr;
      gap:14px;
      align-items:stretch;
      border-radius:22px;
      overflow:hidden;
      border:1px solid var(--line-soft);
      background:#fff;
      box-shadow:var(--shadow-soft);
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .feature-mini:hover{
      transform:translateY(-3px);
      box-shadow:0 16px 26px rgba(18,14,18,.10);
      border-color:rgba(179,79,88,.16);
    }
    .feature-mini .media{
      height:100%;
      min-height:162px;
    }
    .feature-mini .content{
      padding:18px 18px 18px 0;
    }
    .feature-mini h3{font-size:1.02rem}
    .feature-mini p{
      font-size:.93rem;
      margin-top:8px;
    }
    .trust-row{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:var(--gap);
    }
    .trust-item{
      padding:18px 18px 17px;
      border-radius:18px;
      background:rgba(255,255,255,.62);
      border:1px solid rgba(18,14,18,.08);
      box-shadow:var(--shadow-soft);
    }
    .trust-item strong{
      display:block;
      font-size:1.02rem;
      color:var(--text-dark);
      line-height:1.28;
    }
    .trust-item span{
      display:block;
      margin-top:7px;
      color:var(--muted-dark);
      font-size:.92rem;
      line-height:1.65;
    }
    .news-shell{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:var(--gap);
      align-items:start;
    }
    .news-list{
      display:grid;
      gap:14px;
    }
    .news-item{
      display:block;
      padding:18px;
      border-radius:20px;
      background:#fff;
      border:1px solid rgba(18,14,18,.08);
      box-shadow:var(--shadow-soft);
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
    }
    .news-item:hover{
      transform:translateY(-3px);
      border-color:rgba(179,79,88,.18);
      box-shadow:0 18px 30px rgba(18,14,18,.12);
    }
    .news-item h3{
      font-size:1.1rem;
      margin-top:12px;
    }
    .news-item p{
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height:3.35em;
    }
    .news-item .foot{
      margin-top:14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .news-item .link{
      color:#8c3140;
      font-weight:650;
    }
    .news-item .link::after{
      content:"→";
      margin-left:6px;
      transition:transform var(--transition);
    }
    .news-item:hover .link::after{transform:translateX(2px)}
    .empty-state{
      padding:28px 22px;
      border-radius:22px;
      background:rgba(255,255,255,.72);
      border:1px dashed rgba(18,14,18,.16);
      color:var(--muted-dark);
      box-shadow:var(--shadow-soft);
      text-align:center;
      min-height:160px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1rem;
    }
    .news-side{
      display:grid;
      gap:16px;
    }
    .side-note{
      padding:22px;
      border-radius:24px;
      color:var(--text);
      background:
        linear-gradient(160deg, rgba(179,79,88,.94), rgba(89,31,40,.98));
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .side-note::before{
      content:"";
      position:absolute;
      inset:-30% -10% auto auto;
      width:220px;
      height:220px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.2), transparent 60%);
      pointer-events:none;
    }
    .side-note h3{
      margin:0;
      font-size:1.28rem;
      color:#fff;
    }
    .side-note p{
      margin:10px 0 0;
      color:rgba(255,255,255,.84);
      line-height:1.78;
    }
    .side-list{
      display:grid;
      gap:12px;
    }
    .mini-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:15px 16px;
      border-radius:18px;
      background:#fff;
      border:1px solid rgba(18,14,18,.08);
      box-shadow:var(--shadow-soft);
      transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    }
    .mini-link:hover{
      transform:translateY(-2px);
      border-color:rgba(179,79,88,.18);
      box-shadow:0 16px 26px rgba(18,14,18,.10);
    }
    .mini-link strong{
      display:block;
      font-size:1rem;
      color:var(--text-dark);
    }
    .mini-link span{
      display:block;
      margin-top:4px;
      color:var(--muted-dark);
      font-size:.9rem;
    }
    .mini-link em{
      font-style:normal;
      color:#8c3140;
      font-weight:700;
      flex:none;
    }
    .hot-wrap{
      display:grid;
      grid-template-columns:repeat(5, minmax(220px, 1fr));
      gap:16px;
      overflow-x:auto;
      padding-bottom:8px;
      scroll-snap-type:x mandatory;
    }
    .hot-card{
      scroll-snap-align:start;
      min-width:220px;
      border-radius:22px;
      overflow:hidden;
      background:#fff;
      border:1px solid rgba(18,14,18,.08);
      box-shadow:var(--shadow-soft);
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .hot-card:hover{
      transform:translateY(-4px);
      border-color:rgba(179,79,88,.18);
      box-shadow:0 18px 28px rgba(18,14,18,.12);
    }
    .hot-card .media{
      height:180px;
    }
    .hot-card .content{
      padding:16px;
    }
    .hot-card h3{
      font-size:1.04rem;
    }
    .hot-card p{
      font-size:.92rem;
    }
    .hot-card .more{
      margin-top:14px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:#8c3140;
      font-weight:650;
    }
    .faq{
      display:grid;
      gap:14px;
    }
    .faq details{
      border-radius:20px;
      background:#fff;
      border:1px solid rgba(18,14,18,.08);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .faq summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      font-weight:650;
      color:var(--text-dark);
      outline:none;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq summary::after{
      content:"+";
      width:34px;
      height:34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      background:rgba(179,79,88,.10);
      color:#8c3140;
      flex:none;
      transition:transform var(--transition), background var(--transition);
    }
    .faq details[open] summary::after{
      content:"–";
      background:rgba(217,178,111,.16);
    }
    .faq .answer{
      padding:0 20px 20px;
      color:var(--muted-dark);
      line-height:1.86;
    }
    .cta{
      background:
        radial-gradient(circle at top left, rgba(217,178,111,.16), transparent 26%),
        radial-gradient(circle at bottom right, rgba(179,79,88,.16), transparent 22%),
        linear-gradient(180deg, #150f14 0%, #1b1218 100%);
      color:var(--text);
      border-top:1px solid rgba(255,255,255,.08);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .cta-inner{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:var(--gap);
      align-items:center;
    }
    .cta h2{
      margin:0;
      font-size:clamp(1.7rem, 2.6vw, 3rem);
      line-height:1.12;
      color:#fff;
      letter-spacing:-.02em;
    }
    .cta p{
      margin:14px 0 0;
      color:rgba(248,242,238,.8);
      line-height:1.85;
      max-width:58ch;
    }
    .form-card{
      padding:22px;
      border-radius:26px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      backdrop-filter:blur(16px);
      box-shadow:var(--shadow);
    }
    .form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .field{
      display:grid;
      gap:8px;
    }
    .field label{
      font-size:.9rem;
      color:rgba(248,242,238,.84);
    }
    .field input,
    .field textarea{
      width:100%;
      border:none;
      border-radius:16px;
      padding:13px 14px;
      color:#fff;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      outline:none;
      transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
    }
    .field textarea{
      min-height:102px;
      resize:vertical;
      grid-column:1/-1;
    }
    .field input::placeholder,
    .field textarea::placeholder{color:rgba(248,242,238,.48)}
    .field input:focus,
    .field textarea:focus{
      background:rgba(255,255,255,.11);
      border-color:rgba(217,178,111,.42);
      box-shadow:0 0 0 4px rgba(217,178,111,.10);
    }
    .form-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      margin-top:14px;
    }
    .form-note{
      font-size:.9rem;
      color:rgba(248,242,238,.64);
    }
    .site-footer{
      background:#0e0a0e;
      color:rgba(248,242,238,.82);
      padding:42px 0 28px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.1fr .7fr .7fr .8fr;
      gap:var(--gap);
      padding-bottom:24px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .footer-brand .brand{
      margin-bottom:14px;
    }
    .footer-brand p{
      margin:0;
      color:rgba(248,242,238,.64);
      line-height:1.8;
      max-width:32ch;
    }
    .footer-col h3{
      margin:0 0 14px;
      color:#fff;
      font-size:1rem;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      color:rgba(248,242,238,.74);
      transition:color var(--transition), transform var(--transition);
    }
    .footer-links a:hover{
      color:#fff;
      transform:translateX(2px);
    }
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      padding-top:18px;
      font-size:.92rem;
      color:rgba(248,242,238,.58);
    }
    .footer-bottom a{
      color:rgba(248,242,238,.72);
    }
    .footer-bottom a:hover{color:#fff}
    .section-title-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      margin-bottom:16px;
    }
    .section-title-row .note{
      color:inherit;
      opacity:.72;
      font-size:.95rem;
    }
    .content-anchor{
      scroll-margin-top:100px;
    }
    .split-title{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .split-title .tag{
      margin:0;
    }
    .section.deep .section-head p,
    .section.deep .note,
    .section.deep .trust-item span{
      color:rgba(248,242,238,.72);
    }
    .section.deep .trust-item{
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.10);
    }
    .section.deep .trust-item strong{
      color:#fff;
    }
    .section.deep .news-item,
    .section.deep .mini-link,
    .section.deep .faq details{
      background:rgba(255,255,255,.96);
    }
    .section.deep .news-item h3,
    .section.deep .mini-link strong,
    .section.deep .faq summary,
    .section.deep .hot-card h3,
    .section.deep .hot-card p,
    .section.deep .feature-card h3,
    .section.deep .feature-card p{
      color:var(--text-dark);
    }
    .section.deep .news-item p,
    .section.deep .mini-link span,
    .section.deep .faq .answer,
    .section.deep .hot-card p{
      color:var(--muted-dark);
    }
    .section.deep .side-note{
      background:linear-gradient(160deg, rgba(135,58,69,.98), rgba(72,28,36,.98));
    }
    .section.deep .tag{
      background:rgba(18,14,18,.05);
    }
    .topic-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:var(--gap);
    }
    .topic-card{
      overflow:hidden;
      border-radius:24px;
      background:#fff;
      border:1px solid rgba(18,14,18,.08);
      box-shadow:var(--shadow-soft);
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .topic-card:hover{
      transform:translateY(-4px);
      border-color:rgba(179,79,88,.18);
      box-shadow:0 18px 30px rgba(18,14,18,.12);
    }
    .topic-card .media{
      height:220px;
    }
    .topic-card .content{
      padding:18px;
    }
    .topic-card .content .btn{
      margin-top:14px;
    }
    .topic-card .content .btn-light{
      width:fit-content;
    }
    .subtle-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(18,14,18,.12), transparent);
      margin:18px 0 0;
    }
    .clip{
      position:relative;
      overflow:hidden;
    }
    .clip::after{
      content:"";
      position:absolute;
      inset:auto -20% -60% auto;
      width:220px;
      height:220px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(179,79,88,.08), transparent 68%);
      pointer-events:none;
    }
    .small-label{
      font-size:.82rem;
      color:var(--muted-dark);
    }
    .latest-wrap{
      margin-top:20px;
    }
    .anchor-chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(179,79,88,.08);
      color:#8c3140;
      border:1px solid rgba(179,79,88,.14);
      font-size:.88rem;
      font-weight:600;
    }
    @media (max-width: 1199px){
      .hero-inner{grid-template-columns:1fr .92fr}
      .news-shell{grid-template-columns:1fr}
      .cta-inner{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .topic-grid{grid-template-columns:1fr 1fr}
      .feature-grid{grid-template-columns:1fr}
      .feature-mini{grid-template-columns:140px 1fr}
    }
    @media (max-width: 991px){
      .site-nav{display:none}
      .menu-btn{display:inline-flex}
      .mobile-panel{display:none}
      .mobile-panel.is-open{display:block}
      .hero{
        min-height:auto;
      }
      .hero-inner{
        grid-template-columns:1fr;
        padding:58px 0 42px;
      }
      .hero-panel{min-height:380px}
      .trust-row{grid-template-columns:1fr 1fr}
      .topic-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .section{padding:72px 0}
    }
    @media (max-width: 767px){
      :root{--header-h:74px}
      .header-inner{min-height:74px}
      .site-header.is-scrolled .header-inner{min-height:62px}
      .brand-text span{display:none}
      .hero h1{font-size:clamp(2rem, 9vw, 3.2rem)}
      .hero p{font-size:1rem}
      .hero-actions .btn{width:100%}
      .hero-badges{gap:8px}
      .hero-panel{min-height:330px}
      .hero-card{left:14px;right:14px;bottom:14px;padding:14px;border-radius:18px}
      .hero-card-top{flex-direction:column}
      .hero-thumb{width:100%;aspect-ratio:16/9}
      .hero-mini{grid-template-columns:1fr}
      .section-head,
      .section-title-row{
        flex-direction:column;
        align-items:flex-start;
      }
      .trust-row{grid-template-columns:1fr}
      .feature-mini{grid-template-columns:1fr}
      .feature-mini .content{padding:0 18px 18px}
      .feature-mini .media{min-height:210px}
      .news-item .foot{flex-direction:column;align-items:flex-start}
      .footer-grid{grid-template-columns:1fr}
      .footer-bottom{flex-direction:column;align-items:flex-start}
      .form-grid{grid-template-columns:1fr}
      .field textarea{grid-column:auto}
      .hot-wrap{grid-template-columns:repeat(5, minmax(78vw, 1fr))}
      .cta p{max-width:none}
    }
    @media (max-width: 575px){
      .container{width:min(var(--container), calc(100% - 24px))}
      .header-actions .btn-secondary{display:none}
      .brand-mark{width:38px;height:38px;border-radius:12px}
      .hero-inner{padding:44px 0 34px}
      .section{padding:58px 0}
      .section.tight{padding:52px 0}
      .hero-card h2{font-size:1.04rem}
      .hero-card p{font-size:.92rem}
      .hot-card{min-width:82vw}
      .feature-card.large .content{margin-top:-40px}
      .feature-card .content,.feature-mini .content,.hot-card .content,.topic-card .content,.news-item{padding-left:16px;padding-right:16px}
      .news-item{padding:16px}
      .faq summary{padding:16px}
      .faq .answer{padding:0 16px 16px}
      .cta .form-card{padding:16px}
      .btn{padding:11px 16px}
    }

/* roulang page: article */
:root{
            --bg:#120e12;
            --bg-2:#191419;
            --surface:#221b22;
            --surface-2:#2b2229;
            --paper:#f7f1eb;
            --paper-2:#efe7df;
            --line:rgba(255,255,255,.10);
            --line-soft:rgba(18,14,18,.10);
            --text:#f8f2ee;
            --text-dark:#221a1f;
            --muted:#c7b7b0;
            --muted-dark:#6d5d59;
            --accent:#b34f58;
            --accent-2:#d9b26f;
            --accent-3:#8f5b65;
            --shadow:0 18px 44px rgba(0,0,0,.28);
            --shadow-soft:0 12px 28px rgba(32,18,24,.10);
            --radius:18px;
            --radius-sm:14px;
            --radius-lg:26px;
            --container:1240px;
            --gap:24px;
            --gap-lg:40px;
            --header-h:84px;
            --transition:.28s cubic-bezier(.2,.8,.2,1);
        }
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
            background:linear-gradient(180deg,#0f0b0f 0%, #140f14 16%, #f6f0eb 16.1%, #f6f0eb 100%);
            color:var(--text-dark);
            line-height:1.72;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        body.menu-open{overflow:hidden}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%;height:auto}
        button,input,textarea,select{font:inherit}
        ::selection{background:rgba(179,79,88,.22);color:#fff}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:saturate(140%) blur(14px);
            background:rgba(16,11,16,.76);
            border-bottom:1px solid rgba(255,255,255,.08);
            transition:background var(--transition), box-shadow var(--transition), min-height var(--transition);
        }
        .site-header.is-scrolled{
            background:rgba(15,10,15,.92);
            box-shadow:0 10px 30px rgba(0,0,0,.16);
        }
        .header-inner{
            min-height:var(--header-h);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            padding:14px 0;
            transition:padding var(--transition), min-height var(--transition);
        }
        .site-header.is-scrolled .header-inner{
            min-height:68px;
            padding:8px 0;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
        }
        .brand-mark{
            width:42px;
            height:42px;
            border-radius:14px;
            background:
                radial-gradient(circle at 28% 30%, rgba(255,255,255,.34), transparent 28%),
                linear-gradient(160deg, #d46872 0%, #8f3b45 55%, #3a2027 100%);
            box-shadow:0 12px 26px rgba(179,79,88,.28);
            position:relative;
            flex:none;
        }
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:10px;
            border-radius:11px;
            border:1px solid rgba(255,255,255,.26);
        }
        .brand-text{
            min-width:0;
            color:var(--text);
        }
        .brand-text strong{
            display:block;
            font-size:1.02rem;
            letter-spacing:.02em;
            line-height:1.2;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-text span{
            display:block;
            font-size:.82rem;
            color:rgba(248,242,238,.68);
            margin-top:3px;
        }
        .nav-wrap{
            display:flex;
            align-items:center;
            gap:14px;
        }
        .site-nav{
            display:flex;
            align-items:center;
            gap:6px;
            background:rgba(255,255,255,.04);
            padding:8px;
            border:1px solid rgba(255,255,255,.08);
            border-radius:999px;
        }
        .site-nav a{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:10px 14px;
            border-radius:999px;
            color:rgba(248,242,238,.84);
            font-size:.96rem;
            transition:background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
            outline:none;
        }
        .site-nav a:hover{
            background:rgba(255,255,255,.08);
            color:#fff;
            transform:translateY(-1px);
        }
        .site-nav a:focus-visible,
        .btn:focus-visible,
        .menu-btn:focus-visible,
        .mini-link:focus-visible,
        .faq summary:focus-visible,
        input:focus-visible,
        textarea:focus-visible{
            outline:2px solid rgba(217,178,111,.9);
            outline-offset:3px;
        }
        .site-nav a.active,
        .site-nav a[aria-current="page"]{
            background:rgba(179,79,88,.18);
            color:#fff;
            box-shadow:inset 0 0 0 1px rgba(217,178,111,.18);
        }
        .header-actions{
            display:flex;
            align-items:center;
            gap:10px;
            flex:none;
        }
        .btn{
            border:none;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:12px 18px;
            border-radius:999px;
            font-weight:650;
            letter-spacing:.01em;
            transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
            cursor:pointer;
            user-select:none;
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-2px)}
        .btn:active{transform:translateY(1px)}
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, #c85b64 0%, #9e3b46 55%, #7d2734 100%);
            box-shadow:0 16px 28px rgba(179,79,88,.26);
        }
        .btn-primary:hover{box-shadow:0 18px 34px rgba(179,79,88,.34)}
        .btn-secondary{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.15);
        }
        .btn-secondary:hover{
            background:rgba(255,255,255,.09);
            border-color:rgba(255,255,255,.22);
            box-shadow:0 10px 24px rgba(0,0,0,.12);
        }
        .btn-light{
            color:var(--text-dark);
            background:#fff;
            border:1px solid rgba(18,14,18,.08);
            box-shadow:0 10px 18px rgba(18,14,18,.08);
        }
        .btn-light:hover{box-shadow:0 14px 24px rgba(18,14,18,.12)}
        .menu-btn{
            display:none;
            width:44px;
            height:44px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(255,255,255,.06);
            color:#fff;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            transition:transform var(--transition), background var(--transition), border-color var(--transition);
        }
        .menu-btn:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.10);
            border-color:rgba(255,255,255,.20);
        }
        .menu-btn span{
            display:block;
            width:18px;
            height:2px;
            border-radius:999px;
            background:#fff;
            position:relative;
        }
        .menu-btn span::before,
        .menu-btn span::after{
            content:"";
            position:absolute;
            left:0;
            width:18px;
            height:2px;
            border-radius:999px;
            background:#fff;
        }
        .menu-btn span::before{top:-6px}
        .menu-btn span::after{top:6px}
        .mobile-menu{
            position:fixed;
            inset:0;
            z-index:1200;
            display:none;
            background:rgba(12,8,12,.56);
            backdrop-filter:blur(10px);
        }
        .mobile-menu.open{display:block}
        .mobile-menu-panel{
            width:min(92vw, 420px);
            height:100%;
            margin-left:auto;
            background:linear-gradient(180deg, rgba(26,19,26,.98), rgba(18,14,18,.98));
            border-left:1px solid rgba(255,255,255,.08);
            padding:22px;
            display:flex;
            flex-direction:column;
            gap:18px;
            box-shadow:-18px 0 38px rgba(0,0,0,.28);
            animation:slideIn .28s cubic-bezier(.2,.8,.2,1);
        }
        @keyframes slideIn{
            from{transform:translateX(24px);opacity:.6}
            to{transform:translateX(0);opacity:1}
        }
        .mobile-menu-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
        }
        .mobile-close{
            width:42px;
            height:42px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(255,255,255,.06);
            color:#fff;
            font-size:22px;
            line-height:1;
        }
        .mobile-nav{
            display:flex;
            flex-direction:column;
            align-items:stretch;
            gap:8px;
            padding:10px;
            background:rgba(255,255,255,.03);
        }
        .mobile-nav a{
            justify-content:flex-start;
            border-radius:14px;
            padding:14px 16px;
        }
        .mobile-menu-actions{
            display:grid;
            gap:10px;
            margin-top:auto;
        }
        .page-hero{
            position:relative;
            overflow:hidden;
            color:var(--text);
            padding: clamp(34px, 4vw, 56px) 0 56px;
        }
        .page-hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(15,10,15,.90) 0%, rgba(18,14,18,.80) 45%, rgba(246,240,235,0) 100%),
                url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
            opacity:.98;
        }
        .page-hero::after{
            content:"";
            position:absolute;
            inset:auto -12% -56px -12%;
            height:120px;
            background:linear-gradient(180deg, rgba(246,240,235,0), rgba(246,240,235,.92));
            filter:blur(12px);
        }
        .page-hero .container{
            position:relative;
            z-index:1;
        }
        .crumbs{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:8px;
            color:rgba(248,242,238,.74);
            font-size:.92rem;
            margin-bottom:14px;
        }
        .crumbs a{
            color:#fff;
            opacity:.92;
        }
        .crumbs span{opacity:.62}
        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
            gap:28px;
            align-items:stretch;
            min-height:430px;
        }
        .hero-copy{
            padding: 12px 0 8px;
        }
        .hero-flag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.10);
            color:#fff;
            font-size:.88rem;
            margin-bottom:18px;
        }
        .hero-flag::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent-2);
            box-shadow:0 0 0 4px rgba(217,178,111,.14);
        }
        .hero-copy h1{
            margin:0;
            font-size:clamp(2.2rem, 3.8vw, 4.25rem);
            line-height:1.02;
            letter-spacing:-.03em;
            text-wrap:balance;
            max-width:11.5ch;
        }
        .hero-copy p{
            margin:18px 0 0;
            max-width:64ch;
            color:rgba(248,242,238,.82);
            font-size:1.05rem;
        }
        .hero-chip-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin:22px 0 0;
        }
        .pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 13px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.08);
            color:#fff;
            font-size:.88rem;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:26px;
        }
        .hero-panel{
            display:flex;
            flex-direction:column;
            gap:14px;
        }
        .hero-media{
            position:relative;
            height:100%;
            min-height:430px;
            border-radius:var(--radius-lg);
            overflow:hidden;
            box-shadow:var(--shadow);
            background:#1c1418;
            border:1px solid rgba(255,255,255,.08);
        }
        .hero-media img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .hero-media::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(10,6,10,.12), rgba(10,6,10,.38) 72%, rgba(10,6,10,.68));
        }
        .hero-media-copy{
            position:absolute;
            left:18px;
            right:18px;
            bottom:18px;
            z-index:1;
            display:grid;
            gap:8px;
        }
        .hero-media-copy strong{
            font-size:1.1rem;
            line-height:1.35;
            color:#fff;
        }
        .hero-media-copy span{
            display:inline-flex;
            width:max-content;
            padding:7px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.10);
            color:rgba(255,255,255,.9);
            font-size:.84rem;
        }
        .hero-info-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:14px;
        }
        .info-tile{
            padding:14px 16px;
            border-radius:var(--radius);
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.10);
            backdrop-filter:blur(8px);
        }
        .info-tile small{
            display:block;
            color:rgba(248,242,238,.68);
            font-size:.82rem;
            margin-bottom:6px;
        }
        .info-tile strong{
            display:block;
            color:#fff;
            font-size:1rem;
            line-height:1.35;
        }
        main{position:relative}
        .section{
            padding:84px 0;
        }
        .section.paper{
            background:linear-gradient(180deg, #f7f1eb 0%, #f3ece4 100%);
        }
        .section.soft{
            background:linear-gradient(180deg, #f4ede6 0%, #f7f1eb 100%);
        }
        .section-header{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:24px;
            margin-bottom:28px;
        }
        .section-kicker{
            color:var(--accent);
            font-size:.8rem;
            font-weight:700;
            letter-spacing:.16em;
            text-transform:uppercase;
            margin-bottom:10px;
        }
        .section-title{
            margin:0;
            color:var(--text-dark);
            font-size:clamp(1.5rem, 2.15vw, 2.25rem);
            line-height:1.12;
            letter-spacing:-.02em;
        }
        .section-subtitle{
            margin:0;
            max-width:70ch;
            color:var(--muted-dark);
        }
        .section-actions{
            flex:none;
        }
        .section-actions .btn{
            min-width:130px;
        }
        .rail-grid{
            display:grid;
            grid-template-columns:repeat(12, minmax(0,1fr));
            gap:var(--gap);
        }
        .feature-card{
            position:relative;
            border-radius:var(--radius-lg);
            overflow:hidden;
            min-height:320px;
            background:var(--surface);
            box-shadow:var(--shadow-soft);
            border:1px solid rgba(18,14,18,.08);
            transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
            color:var(--text);
        }
        .feature-card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow);
            border-color:rgba(179,79,88,.22);
        }
        .feature-card img{
            width:100%;
            height:100%;
            object-fit:cover;
            opacity:.78;
        }
        .feature-card::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(16,10,16,.08) 0%, rgba(16,10,16,.55) 62%, rgba(16,10,16,.90) 100%);
        }
        .feature-content{
            position:absolute;
            inset:auto 0 0 0;
            z-index:1;
            padding:24px;
            display:grid;
            gap:10px;
        }
        .label-row{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }
        .label{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:8px 11px;
            border-radius:999px;
            background:rgba(255,255,255,.12);
            color:#fff;
            font-size:.84rem;
            backdrop-filter:blur(8px);
        }
        .feature-content h3{
            margin:0;
            color:#fff;
            font-size:clamp(1.15rem, 1.45vw, 1.5rem);
            line-height:1.22;
        }
        .feature-content p{
            margin:0;
            color:rgba(248,242,238,.84);
            max-width:34ch;
        }
        .feature-content .link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#fff;
            font-weight:650;
        }
        .feature-content .link::after{
            content:"→";
            transition:transform var(--transition);
        }
        .feature-card:hover .link::after{transform:translateX(2px)}
        .feature-large{grid-column:span 6; min-height:460px;}
        .feature-tall{grid-column:span 3; min-height:460px;}
        .feature-wide{grid-column:span 4; min-height:220px;}
        .light-card{
            border-radius:var(--radius-lg);
            background:#fff;
            border:1px solid rgba(18,14,18,.08);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
            transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .light-card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow);
            border-color:rgba(179,79,88,.18);
        }
        .latest-grid{
            display:grid;
            grid-template-columns:minmax(0,1fr);
            gap:16px;
        }
        .latest-item{
            display:grid;
            grid-template-columns:130px minmax(0,1fr) auto;
            gap:18px;
            align-items:stretch;
            padding:16px;
            border-radius:var(--radius);
            background:#fff;
            border:1px solid rgba(18,14,18,.08);
            box-shadow:0 8px 20px rgba(18,14,18,.05);
            transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .latest-item:hover{
            transform:translateY(-3px);
            box-shadow:var(--shadow-soft);
            border-color:rgba(179,79,88,.18);
        }
        .latest-thumb{
            border-radius:16px;
            overflow:hidden;
            min-height:110px;
            background:linear-gradient(135deg,#f5ede3,#ebe1d6);
        }
        .latest-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .latest-body{
            display:grid;
            gap:10px;
            min-width:0;
        }
        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            align-items:center;
            color:var(--muted-dark);
            font-size:.85rem;
        }
        .meta-chip{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:6px 10px;
            border-radius:999px;
            background:#f4ede6;
            color:var(--muted-dark);
            border:1px solid rgba(18,14,18,.06);
        }
        .latest-body h3{
            margin:0;
            font-size:1.08rem;
            line-height:1.45;
            color:var(--text-dark);
        }
        .latest-body p{
            margin:0;
            color:var(--muted-dark);
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .latest-action{
            display:flex;
            align-items:center;
            justify-content:flex-end;
            min-width:110px;
        }
        .mini-link{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:11px 14px;
            border-radius:999px;
            background:rgba(179,79,88,.08);
            color:var(--accent);
            border:1px solid rgba(179,79,88,.14);
            font-weight:650;
            transition:transform var(--transition), background var(--transition), box-shadow var(--transition);
        }
        .mini-link:hover{
            transform:translateY(-1px);
            background:rgba(179,79,88,.12);
            box-shadow:0 10px 20px rgba(179,79,88,.10);
        }
        .article-shell{
            padding:84px 0 72px;
            background:linear-gradient(180deg, #f6f0eb 0%, #f4ede6 100%);
        }
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,1fr) 320px;
            gap:28px;
            align-items:start;
        }
        .article-main,
        .sidebar-card{
            border-radius:var(--radius-lg);
            background:#fff;
            border:1px solid rgba(18,14,18,.08);
            box-shadow:var(--shadow-soft);
        }
        .article-main{
            overflow:hidden;
        }
        .article-topbar{
            padding:18px 20px;
            background:linear-gradient(180deg, #fff 0%, #faf6f2 100%);
            border-bottom:1px solid rgba(18,14,18,.06);
        }
        .article-topline{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            align-items:center;
            margin-bottom:12px;
        }
        .article-topline .meta-chip{
            background:#fff;
        }
        .article-topbar h2{
            margin:0;
            font-size:1.15rem;
            line-height:1.35;
            color:var(--text-dark);
        }
        .article-figure{
            margin:0;
            padding:18px 20px 0;
        }
        .article-figure img{
            width:100%;
            aspect-ratio:16/9;
            object-fit:cover;
            border-radius:20px;
            box-shadow:0 18px 30px rgba(18,14,18,.10);
        }
        .article-body{
            padding:24px 20px 26px;
        }
        .article-content{
            font-size:1.02rem;
            line-height:1.88;
            color:#2a2125;
            word-break:break-word;
            overflow-wrap:anywhere;
        }
        .article-content p{
            margin:0 0 1.05em;
        }
        .article-content h2,
        .article-content h3,
        .article-content h4{
            margin:1.9em 0 .8em;
            line-height:1.28;
            letter-spacing:-.02em;
            color:#221a1f;
        }
        .article-content h2{font-size:1.55rem}
        .article-content h3{font-size:1.25rem}
        .article-content h4{font-size:1.08rem}
        .article-content ul,
        .article-content ol{
            padding-left:1.25em;
            margin:0 0 1.1em;
        }
        .article-content li{margin:.34em 0}
        .article-content blockquote{
            margin:1.4em 0;
            padding:16px 18px;
            border-left:4px solid var(--accent);
            background:#fbf6f0;
            color:#4f4145;
            border-radius:0 16px 16px 0;
        }
        .article-content img{
            max-width:100%;
            height:auto;
            border-radius:18px;
            margin:1.25em 0;
            box-shadow:0 12px 28px rgba(18,14,18,.08);
        }
        .article-content hr{
            margin:1.6em 0;
            border:0;
            border-top:1px solid rgba(18,14,18,.10);
        }
        .article-content table{
            width:100%;
            border-collapse:collapse;
            margin:1.2em 0;
            font-size:.95rem;
            background:#fff;
            overflow:hidden;
            border-radius:16px;
            box-shadow:0 8px 20px rgba(18,14,18,.05);
        }
        .article-content th,
        .article-content td{
            border:1px solid rgba(18,14,18,.10);
            padding:10px 12px;
            text-align:left;
            vertical-align:top;
        }
        .article-content th{
            background:#f7f1eb;
            color:#2a2125;
        }
        .article-content a{
            color:var(--accent);
            text-decoration:underline;
            text-underline-offset:3px;
        }
        .article-content strong{color:#1f171b}
        .article-content em{color:#6b5760}
        .article-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:24px;
            padding-top:22px;
            border-top:1px solid rgba(18,14,18,.08);
        }
        .article-actions .btn{min-width:132px}
        .article-empty{
            display:grid;
            place-items:center;
            text-align:center;
            min-height:280px;
            padding:40px 18px;
            gap:12px;
            color:var(--muted-dark);
        }
        .article-empty .icon{
            width:72px;
            height:72px;
            border-radius:24px;
            background:linear-gradient(135deg, rgba(179,79,88,.12), rgba(217,178,111,.18));
            display:grid;
            place-items:center;
            font-size:30px;
            color:var(--accent);
        }
        .sidebar{
            display:grid;
            gap:18px;
            position:sticky;
            top:96px;
        }
        .sidebar-card{
            padding:18px;
        }
        .sidebar-card h3{
            margin:0 0 14px;
            font-size:1.02rem;
            color:var(--text-dark);
        }
        .toc-list,
        .check-list{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:10px;
        }
        .toc-list a,
        .check-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--muted-dark);
        }
        .toc-list a::before,
        .check-list li::before{
            content:"";
            width:8px;
            height:8px;
            margin-top:.55em;
            border-radius:50%;
            background:linear-gradient(135deg,var(--accent),var(--accent-2));
            flex:none;
        }
        .toc-list a:hover{
            color:var(--accent);
        }
        .side-image{
            border-radius:18px;
            overflow:hidden;
            margin-top:10px;
            background:#f1e8df;
        }
        .side-image img{
            width:100%;
            aspect-ratio:4/5;
            object-fit:cover;
        }
        .side-mini-actions{
            display:grid;
            gap:10px;
        }
        .side-mini-actions .btn{
            width:100%;
        }
        .related-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:18px;
        }
        .rel-card{
            overflow:hidden;
            position:relative;
        }
        .rel-thumb{
            position:relative;
            aspect-ratio:16/10;
            overflow:hidden;
        }
        .rel-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .rel-content{
            padding:18px;
            display:grid;
            gap:10px;
        }
        .rel-content h3{
            margin:0;
            font-size:1.05rem;
            line-height:1.4;
            color:var(--text-dark);
        }
        .rel-content p{
            margin:0;
            color:var(--muted-dark);
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .rel-content .meta-row{font-size:.82rem}
        .hot-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:18px;
        }
        .hot-card{
            padding:20px;
            border-radius:var(--radius-lg);
            background:#fff;
            border:1px solid rgba(18,14,18,.08);
            box-shadow:var(--shadow-soft);
            transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .hot-card:hover{
            transform:translateY(-3px);
            box-shadow:var(--shadow);
            border-color:rgba(179,79,88,.18);
        }
        .hot-card .num{
            display:inline-flex;
            width:42px;
            height:42px;
            border-radius:14px;
            align-items:center;
            justify-content:center;
            background:linear-gradient(135deg, rgba(179,79,88,.12), rgba(217,178,111,.16));
            color:var(--accent);
            font-weight:700;
            margin-bottom:14px;
        }
        .hot-card h3{
            margin:0 0 8px;
            font-size:1.08rem;
            line-height:1.35;
            color:var(--text-dark);
        }
        .hot-card p{
            margin:0 0 12px;
            color:var(--muted-dark);
        }
        .faq-wrap{
            display:grid;
            gap:14px;
        }
        .faq{
            border-radius:18px;
            background:#fff;
            border:1px solid rgba(18,14,18,.08);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .faq summary{
            list-style:none;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            padding:18px 20px;
            font-weight:650;
            color:var(--text-dark);
        }
        .faq summary::-webkit-details-marker{display:none}
        .faq summary::after{
            content:"+";
            flex:none;
            width:28px;
            height:28px;
            display:grid;
            place-items:center;
            border-radius:999px;
            background:#f4ede6;
            color:var(--accent);
            font-size:18px;
            line-height:1;
            transition:transform var(--transition), background var(--transition);
        }
        .faq[open] summary::after{
            content:"−";
            background:rgba(179,79,88,.12);
            transform:rotate(180deg);
        }
        .faq-content{
            padding:0 20px 18px;
            color:var(--muted-dark);
        }
        .cta-box{
            border-radius:var(--radius-lg);
            background:linear-gradient(135deg, #1a1418 0%, #22171d 45%, #2b2027 100%);
            color:var(--text);
            padding:28px;
            box-shadow:var(--shadow);
            position:relative;
            overflow:hidden;
        }
        .cta-box::before{
            content:"";
            position:absolute;
            inset:-22% auto auto -8%;
            width:260px;
            height:260px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(217,178,111,.20), rgba(217,178,111,0) 70%);
            pointer-events:none;
        }
        .cta-box::after{
            content:"";
            position:absolute;
            right:-14%;
            bottom:-26%;
            width:280px;
            height:280px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(179,79,88,.18), rgba(179,79,88,0) 70%);
            pointer-events:none;
        }
        .cta-grid{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
            gap:18px;
            align-items:center;
        }
        .cta-copy h2{
            margin:0 0 12px;
            color:#fff;
            font-size:clamp(1.5rem, 2.2vw, 2.2rem);
            line-height:1.16;
        }
        .cta-copy p{
            margin:0;
            color:rgba(248,242,238,.78);
            max-width:60ch;
        }
        .cta-form{
            display:grid;
            grid-template-columns:minmax(0,1fr) auto;
            gap:12px;
            align-items:center;
        }
        .field{
            width:100%;
            padding:14px 16px;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(255,255,255,.06);
            color:#fff;
            outline:none;
            transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
        }
        .field::placeholder{color:rgba(248,242,238,.52)}
        .field:focus{
            border-color:rgba(217,178,111,.6);
            background:rgba(255,255,255,.09);
            box-shadow:0 0 0 4px rgba(217,178,111,.14);
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:16px;
        }
        .cta-note{
            margin-top:10px;
            font-size:.88rem;
            color:rgba(248,242,238,.66);
        }
        .site-footer{
            background:linear-gradient(180deg, #161116 0%, #120e12 100%);
            color:var(--text);
            padding:62px 0 22px;
            border-top:1px solid rgba(255,255,255,.08);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.4fr .8fr .8fr .8fr;
            gap:24px;
            padding-bottom:28px;
        }
        .footer-brand p{
            margin:16px 0 0;
            color:rgba(248,242,238,.68);
            max-width:34ch;
        }
        .footer-col h3{
            margin:0 0 14px;
            font-size:1rem;
            color:#fff;
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:rgba(248,242,238,.74);
            transition:color var(--transition), transform var(--transition);
        }
        .footer-links a:hover{
            color:#fff;
            transform:translateX(2px);
        }
        .footer-bottom{
            display:flex;
            flex-wrap:wrap;
            gap:12px 18px;
            align-items:center;
            justify-content:space-between;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            color:rgba(248,242,238,.62);
            font-size:.92rem;
        }
        .back-top{
            position:fixed;
            right:18px;
            bottom:18px;
            z-index:900;
            width:48px;
            height:48px;
            border-radius:16px;
            border:1px solid rgba(179,79,88,.14);
            background:rgba(255,255,255,.86);
            color:var(--accent);
            display:grid;
            place-items:center;
            box-shadow:0 14px 30px rgba(18,14,18,.16);
            opacity:0;
            pointer-events:none;
            transform:translateY(8px);
            transition:opacity var(--transition), transform var(--transition), background var(--transition);
        }
        .back-top.show{
            opacity:1;
            pointer-events:auto;
            transform:translateY(0);
        }
        .back-top:hover{
            background:#fff;
        }
        .sr-only{
            position:absolute;
            width:1px;
            height:1px;
            padding:0;
            margin:-1px;
            overflow:hidden;
            clip:rect(0,0,0,0);
            white-space:nowrap;
            border:0;
        }
        @media (max-width: 1199.98px){
            .hero-grid{grid-template-columns:1fr .92fr}
            .article-layout{grid-template-columns:minmax(0,1fr) 300px}
            .footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr}
        }
        @media (max-width: 991.98px){
            .site-nav,.header-actions .btn{display:none}
            .menu-btn{display:inline-flex}
            .hero-grid{grid-template-columns:1fr; min-height:auto}
            .hero-media{min-height:340px}
            .hero-copy h1{max-width:14ch}
            .hero-info-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
            .feature-large,.feature-tall,.feature-wide{grid-column:span 6}
            .article-layout{grid-template-columns:1fr}
            .sidebar{position:static}
            .related-grid,.hot-grid{grid-template-columns:1fr 1fr}
            .cta-grid{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr 1fr}
            .latest-item{grid-template-columns:110px minmax(0,1fr)}
            .latest-action{grid-column:1 / -1; justify-content:flex-start}
        }
        @media (max-width: 767.98px){
            .section{padding:64px 0}
            .page-hero{padding:28px 0 40px}
            .hero-copy h1{font-size:clamp(1.95rem, 10vw, 3rem); max-width:none}
            .hero-copy p{font-size:1rem}
            .hero-info-grid{grid-template-columns:1fr}
            .feature-large,.feature-tall,.feature-wide{grid-column:1 / -1; min-height:340px}
            .section-header{flex-direction:column; align-items:flex-start}
            .related-grid,.hot-grid{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr}
            .latest-item{grid-template-columns:1fr; gap:14px}
            .latest-thumb{min-height:180px}
            .article-figure,.article-body,.article-topbar{padding-left:16px; padding-right:16px}
            .article-content{font-size:.98rem; line-height:1.86}
            .cta-form{grid-template-columns:1fr}
            .cta-actions .btn,
            .hero-actions .btn,
            .article-actions .btn{width:100%}
            .footer-bottom{flex-direction:column; align-items:flex-start}
        }
        @media (max-width: 575.98px){
            .container{width:min(var(--container), calc(100% - 24px))}
            .brand-text strong{font-size:.94rem}
            .brand-text span{font-size:.76rem}
            .hero-media{min-height:300px}
            .site-footer{padding-top:52px}
            .article-topbar h2{font-size:1rem}
            .latest-body h3,
            .hot-card h3,
            .rel-content h3{font-size:1rem}
            .faq summary{padding:16px}
            .faq-content{padding:0 16px 16px}
            .cta-box{padding:22px}
        }

/* 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}