/* roulang page: index */
:root{
      --bg:#070b14;
      --panel:#0d1422;
      --panel2:#111a2d;
      --line:rgba(148,163,184,.16);
      --text:#e8eefc;
      --muted:#9aa9c6;
      --accent:#8b5cf6;
      --accent2:#22d3ee;
      --accent3:#fb7185;
      --radius:18px;
      --shadow:0 18px 48px rgba(3,7,18,.45);
    }
    html { scroll-behavior: smooth; }
    body {
      background:
        radial-gradient(1000px 480px at 20% -10%, rgba(139,92,246,.22), transparent 55%),
        radial-gradient(900px 460px at 95% 4%, rgba(34,211,238,.12), transparent 44%),
        radial-gradient(820px 420px at 50% 105%, rgba(251,113,133,.10), transparent 45%),
        linear-gradient(180deg, #060912 0%, #08101c 100%);
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    ::selection { background: rgba(34,211,238,.28); color: #fff; }
    a { color: inherit; text-decoration: none; }
    .site-shell{
      position: relative;
      overflow: hidden;
    }
    .site-shell::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.03), transparent 28%, transparent 72%, rgba(255,255,255,.02));
      opacity:.65;
    }
    .container-xl {
      width: min(1180px, calc(100% - 2rem));
      margin-inline: auto;
    }
    .glass-line {
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      background: linear-gradient(180deg, rgba(17,26,45,.98), rgba(10,16,28,.96));
    }
    .section-card {
      border: 1px solid rgba(148,163,184,.14);
      background: linear-gradient(180deg, rgba(17,26,45,.92), rgba(11,17,30,.94));
      box-shadow: 0 12px 28px rgba(0,0,0,.20);
    }
    .accent-line {
      background: linear-gradient(90deg, transparent, rgba(34,211,238,.55), rgba(139,92,246,.85), transparent);
      height: 1px;
    }
    .btn-main, .btn-sub {
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
    }
    .btn-main:hover, .btn-sub:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(0,0,0,.24);
    }
    .btn-main:focus-visible, .btn-sub:focus-visible, .nav-link:focus-visible, .faq-btn:focus-visible {
      outline: 2px solid rgba(34,211,238,.75);
      outline-offset: 2px;
    }
    .nav-link{
      position: relative;
      transition: color .18s ease, opacity .18s ease;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-9px;
      width:100%;
      height:2px;
      border-radius:999px;
      transform: scaleX(0);
      transform-origin:center;
      transition: transform .2s ease;
      background: linear-gradient(90deg, rgba(34,211,238,.95), rgba(139,92,246,.95));
    }
    .nav-link:hover::after,
    .nav-link.active::after{
      transform: scaleX(1);
    }
    .nav-link.active{
      color:#fff;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap:.45rem;
      border:1px solid rgba(148,163,184,.18);
      background: rgba(255,255,255,.03);
      color:#dbe6fb;
      padding:.48rem .8rem;
      border-radius:999px;
      font-size:.92rem;
      line-height:1;
      transition: .18s ease;
    }
    .chip:hover{
      border-color: rgba(34,211,238,.42);
      background: rgba(34,211,238,.08);
      transform: translateY(-1px);
    }
    .panel-card{
      border:1px solid rgba(148,163,184,.16);
      background: linear-gradient(180deg, rgba(17,26,45,.88), rgba(13,20,34,.96));
      border-radius: 18px;
      box-shadow: 0 14px 32px rgba(0,0,0,.24);
    }
    .quote-card{
      border:1px solid rgba(148,163,184,.14);
      background:
        radial-gradient(540px 180px at 0% 0%, rgba(139,92,246,.14), transparent 60%),
        linear-gradient(180deg, rgba(17,26,45,.9), rgba(12,18,30,.96));
    }
    .bento-badge{
      border: 1px solid rgba(148,163,184,.16);
      background: rgba(255,255,255,.03);
      backdrop-filter: blur(10px);
    }
    .faq-item[open] .faq-arrow {
      transform: rotate(180deg);
    }
    .thin-grid{
      background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 26px 26px;
      background-position: center;
    }
    .bar{
      height: 8px;
      border-radius: 999px;
      background: rgba(148,163,184,.12);
      overflow: hidden;
    }
    .bar > span{
      display:block;
      height:100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(34,211,238,.95), rgba(139,92,246,.92));
    }
    .mobile-menu {
      transition: max-height .25s ease, opacity .2s ease;
    }
    .footer-link{
      transition: color .18s ease, opacity .18s ease;
    }
    .footer-link:hover{
      color: #fff;
    }

/* roulang page: category1 */
:root{
      --bg:#071016;
      --bg-soft:#0b1520;
      --panel:rgba(15,26,37,.78);
      --panel-strong:rgba(18,32,45,.92);
      --line:rgba(255,255,255,.08);
      --line-strong:rgba(255,255,255,.14);
      --text:#eaf0f7;
      --muted:#98a6b8;
      --accent:#c43f90;
      --accent-2:#31d4c2;
      --accent-3:#8f63ff;
      --radius:16px;
      --shadow:0 18px 42px rgba(0,0,0,.36);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%),
        linear-gradient(180deg, #071016 0%, #09131b 48%, #061019 100%);
      font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 120px),
        repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 120px);
      opacity:.12;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.55), transparent);
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    ::selection{background:rgba(49,212,194,.26);color:#fff}
    .container-xl{width:min(1280px,calc(100% - 2rem));margin-inline:auto}
    @media (min-width:640px){.container-xl{width:min(1280px,calc(100% - 3rem));}}
    .surface{
      background:var(--panel);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      backdrop-filter:blur(12px);
    }
    .surface-strong{
      background:var(--panel-strong);
      border:1px solid var(--line-strong);
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
    }
    .nav-link,
    .footer-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.4rem;
      transition:all .18s ease;
    }
    .nav-link{
      border:1px solid transparent;
      border-radius:999px;
      padding:.72rem 1rem;
      color:#c7d3df;
    }
    .nav-link:hover{
      color:#fff;
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.08);
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg, rgba(196,63,144,.16), rgba(49,212,194,.10));
      border-color:rgba(49,212,194,.24);
      box-shadow:0 0 0 1px rgba(49,212,194,.10) inset;
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:.28rem;
      width:1.55rem;
      height:2px;
      border-radius:999px;
      transform:translateX(-50%);
      background:linear-gradient(90deg,var(--accent),var(--accent-2));
    }
    .footer-link{
      transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }
    .footer-link:hover{
      background:rgba(255,255,255,.09);
      color:#fff;
      border-color:rgba(255,255,255,.14);
      transform:translateY(-1px);
    }
    .btn-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.95rem 1.25rem;
      font-weight:700;
      letter-spacing:0;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      border:1px solid transparent;
      cursor:pointer;
      white-space:nowrap;
    }
    .btn-cta:hover{transform:translateY(-1px)}
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--accent), #ef5aa4);
      box-shadow:0 16px 30px rgba(196,63,144,.24);
    }
    .btn-primary:hover{
      box-shadow:0 18px 34px rgba(196,63,144,.30);
    }
    .btn-ghost{
      color:#eef4fa;
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.10);
    }
    .btn-ghost:hover{
      background:rgba(255,255,255,.09);
      border-color:rgba(255,255,255,.16);
    }
    .badge-pill{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.35rem .72rem;
      font-size:.75rem;
      line-height:1;
      color:#dce7f3;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
    }
    .badge-pill.accent{
      color:#fff;
      background:linear-gradient(135deg, rgba(196,63,144,.24), rgba(49,212,194,.18));
      border-color:rgba(49,212,194,.22);
    }
    .meta-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.3rem .65rem;
      font-size:.72rem;
      color:#afbccb;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
    }
    .faux-input{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(8,15,22,.88);
      color:#fff;
      padding:.92rem 1rem;
      outline:none;
      transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .faux-input::placeholder{color:#7f8b9b}
    .faux-input:focus{
      border-color:rgba(49,212,194,.45);
      box-shadow:0 0 0 3px rgba(49,212,194,.10);
      background:rgba(8,15,22,1);
    }
    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.35rem;
      border-radius:999px;
      padding:.64rem .95rem;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:#c7d4e1;
      transition:all .18s ease;
      cursor:pointer;
      white-space:nowrap;
    }
    .pill:hover{
      color:#fff;
      border-color:rgba(49,212,194,.24);
      background:rgba(255,255,255,.07);
      transform:translateY(-1px);
    }
    .pill.active{
      color:#fff;
      border-color:rgba(49,212,194,.28);
      background:linear-gradient(135deg, rgba(49,212,194,.18), rgba(196,63,144,.14));
      box-shadow:0 0 0 1px rgba(49,212,194,.08) inset;
    }
    .stat-tile{
      border-radius:16px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      padding:1rem 1rem 1.05rem;
      transition:transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .stat-tile:hover{
      transform:translateY(-1px);
      border-color:rgba(49,212,194,.18);
      background:rgba(255,255,255,.06);
    }
    .stat-value{
      font-size:1.5rem;
      line-height:1.1;
      font-weight:800;
      color:#fff;
      letter-spacing:0;
    }
    .timeline-dot{
      width:14px;
      height:14px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      box-shadow:0 0 0 4px rgba(49,212,194,.12);
    }
    .feature-card,
    .list-card,
    .mini-card{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      box-shadow:0 12px 26px rgba(0,0,0,.18);
      transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .feature-card:hover,
    .list-card:hover,
    .mini-card:hover{
      transform:translateY(-2px);
      border-color:rgba(49,212,194,.20);
      background:rgba(255,255,255,.055);
      box-shadow:0 18px 38px rgba(0,0,0,.24);
    }
    .cover-frame{
      position:relative;
      overflow:hidden;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(135deg, rgba(196,63,144,.18), rgba(49,212,194,.10)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      min-height:220px;
    }
    .cover-frame::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(118deg, rgba(255,255,255,.10) 0%, transparent 22%),
        linear-gradient(180deg, transparent 0%, rgba(6,10,16,.2) 100%);
      opacity:.7;
    }
    .cover-frame::after{
      content:"";
      position:absolute;
      inset:12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      pointer-events:none;
    }
    .count-box{
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(8,15,22,.66);
      padding:.8rem .7rem;
      text-align:center;
    }
    .count-num{
      display:block;
      font-size:1.35rem;
      line-height:1.1;
      font-weight:800;
      color:#fff;
    }
    .count-label{
      display:block;
      margin-top:.25rem;
      font-size:.72rem;
      color:#9ca9b9;
    }
    details.faq-item{
      border-radius:16px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      overflow:hidden;
      transition:border-color .18s ease, background .18s ease;
    }
    details.faq-item:hover{
      border-color:rgba(49,212,194,.18);
      background:rgba(255,255,255,.055);
    }
    details.faq-item summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.1rem;
      font-weight:700;
      color:#f6fbff;
    }
    details.faq-item summary::-webkit-details-marker{display:none}
    .faq-arrow{
      flex:none;
      width:1.25rem;
      height:1.25rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      display:grid;
      place-items:center;
      color:#d4deea;
      transition:transform .18s ease, border-color .18s ease, background .18s ease;
      background:rgba(255,255,255,.04);
    }
    details[open] .faq-arrow{transform:rotate(180deg)}
    details.faq-item .faq-body{
      padding:0 1.1rem 1rem;
      color:#aeb9c7;
      font-size:.95rem;
      line-height:1.75;
    }
    .pager-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:2.6rem;
      height:2.6rem;
      padding:0 .8rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:#cbd7e2;
      transition:all .18s ease;
    }
    .pager-link:hover{
      color:#fff;
      border-color:rgba(49,212,194,.24);
      background:rgba(255,255,255,.08);
      transform:translateY(-1px);
    }
    .pager-link.active{
      color:#fff;
      border-color:rgba(49,212,194,.28);
      background:linear-gradient(135deg, rgba(196,63,144,.20), rgba(49,212,194,.16));
    }
    .menu-panel{
      background:rgba(8,15,22,.96);
      border-left:1px solid rgba(255,255,255,.09);
      box-shadow:-24px 0 44px rgba(0,0,0,.28);
    }
    .menu-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      padding:1rem 1rem;
      color:#dbe6f1;
      transition:all .18s ease;
    }
    .menu-link:hover{
      background:rgba(255,255,255,.08);
      border-color:rgba(49,212,194,.18);
      color:#fff;
      transform:translateY(-1px);
    }
    .menu-link.active{
      background:linear-gradient(135deg, rgba(196,63,144,.20), rgba(49,212,194,.14));
      border-color:rgba(49,212,194,.24);
      color:#fff;
    }
    .soft-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    }