/* roulang page: index */
:root{
      --bg:#06111f;
      --bg2:#0a1730;
      --card:rgba(9,18,35,.68);
      --card-strong:rgba(12,23,45,.86);
      --line:rgba(191,219,254,.14);
      --line-strong:rgba(148,163,184,.22);
      --txt:#e8f2ff;
      --muted:#95a9c8;
      --muted2:#7f93b4;
      --brand:#58d7ff;
      --brand2:#5b7cff;
      --brand3:#0fd3a3;
      --warm:#f59e0b;
      --shadow:0 28px 80px rgba(2,8,20,.55);
      --shadow-soft:0 16px 40px rgba(3,10,23,.35);
      --radius:24px;
      --radius-sm:16px;
      --ring:0 0 0 1px rgba(94,234,212,.22), 0 0 0 6px rgba(56,189,248,.08);
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--txt);
      background:
        radial-gradient(1200px 600px at 12% 10%, rgba(88,215,255,.18), transparent 50%),
        radial-gradient(900px 500px at 88% 18%, rgba(91,124,255,.18), transparent 46%),
        radial-gradient(700px 500px at 50% 90%, rgba(15,211,163,.10), transparent 42%),
        linear-gradient(180deg, #07111f 0%, #081425 55%, #06111f 100%);
      min-height:100vh;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:72px 72px;
      mask-image: radial-gradient(circle at 50% 30%, black 0%, rgba(0,0,0,.85) 46%, transparent 92%);
      opacity:.32;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    ::selection{background:rgba(88,215,255,.24);color:#fff}
    .container-page{width:min(1180px, calc(100% - 1.5rem)); margin-inline:auto}
    .glass{
      background:var(--card);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
    }
    .glass-strong{
      background:var(--card-strong);
      border:1px solid var(--line-strong);
      box-shadow:var(--shadow);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }
    .glow-border{
      position:relative;
      isolation:isolate;
    }
    .glow-border::before{
      content:"";
      position:absolute;
      inset:-1px;
      z-index:-1;
      border-radius:inherit;
      background:linear-gradient(135deg, rgba(88,215,255,.55), rgba(91,124,255,.28), rgba(15,211,163,.32));
      filter:blur(10px);
      opacity:.35;
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.88rem 1.2rem;
      color:#05111f;
      background:linear-gradient(135deg, #8be9ff 0%, #62caff 45%, #7e8dff 100%);
      box-shadow:0 14px 30px rgba(88,215,255,.25), 0 0 0 1px rgba(255,255,255,.12) inset;
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
      font-weight:700;
    }
    .btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(88,215,255,.32), 0 0 0 1px rgba(255,255,255,.18) inset; filter:saturate(1.08)}
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.88rem 1.2rem;
      color:var(--txt);
      background:rgba(255,255,255,.04);
      border:1px solid rgba(191,219,254,.16);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
      font-weight:700;
    }
    .btn-secondary:hover{transform:translateY(-2px); border-color:rgba(88,215,255,.42); background:rgba(255,255,255,.07)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.34rem .72rem;
      font-size:.78rem;
      letter-spacing:.02em;
      background:rgba(88,215,255,.10);
      color:#c8efff;
      border:1px solid rgba(88,215,255,.16);
    }
    .badge-warm{
      background:rgba(245,158,11,.10);
      color:#ffe2ac;
      border-color:rgba(245,158,11,.18);
    }
    .section{
      padding:clamp(1.1rem, 2.4vw, 1.8rem) 0;
    }
    .section-title{
      font-size:clamp(1.35rem, 2.3vw, 2rem);
      line-height:1.15;
      font-weight:800;
      letter-spacing:-.02em;
    }
    .section-desc{
      color:var(--muted);
      margin-top:.7rem;
      max-width:68ch;
      line-height:1.8;
    }
    .soft-card{
      border-radius:var(--radius);
      border:1px solid rgba(191,219,254,.12);
      background:linear-gradient(180deg, rgba(12,24,44,.74), rgba(7,17,31,.66));
      box-shadow:var(--shadow-soft);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .mini-panel{
      border-radius:20px;
      border:1px solid rgba(191,219,254,.12);
      background:linear-gradient(180deg, rgba(13,25,47,.86), rgba(10,19,36,.62));
      box-shadow:0 10px 30px rgba(2,8,20,.25);
    }
    .icon-chip{
      width:2.9rem;
      height:2.9rem;
      display:grid;
      place-items:center;
      border-radius:18px;
      background:linear-gradient(135deg, rgba(88,215,255,.16), rgba(91,124,255,.10));
      border:1px solid rgba(88,215,255,.16);
      color:#a9eaff;
    }
    .nav-link{
      color:#c9dbf7;
      transition:color .2s ease, opacity .2s ease;
      position:relative;
    }
    .nav-link:hover{color:#fff}
    .nav-link.active{
      color:#ffffff;
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-.55rem;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(88,215,255,1), rgba(126,141,255,1));
      box-shadow:0 0 16px rgba(88,215,255,.5);
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border-radius:999px;
      padding:.45rem .8rem;
      background:rgba(255,255,255,.04);
      color:#d8e8ff;
      border:1px solid rgba(191,219,254,.10);
      font-size:.82rem;
      white-space:nowrap;
    }
    .stat{
      padding:1rem 1rem;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(191,219,254,.12);
    }
    .stat b{
      display:block;
      font-size:1.08rem;
      color:#fff;
      line-height:1.2;
      margin-bottom:.2rem;
    }
    .stat span{
      color:var(--muted);
      font-size:.86rem;
      line-height:1.45;
    }
    .news-link{
      display:block;
      padding:.96rem 1rem;
      border-radius:18px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(191,219,254,.10);
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .news-link:hover{
      transform:translateY(-2px);
      border-color:rgba(88,215,255,.34);
      background:rgba(255,255,255,.05);
    }
    details.glow{
      border-radius:18px;
      border:1px solid rgba(191,219,254,.12);
      background:rgba(255,255,255,.03);
      overflow:hidden;
    }
    details.glow summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.05rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      font-weight:700;
      color:#ecf4ff;
    }
    details.glow summary::-webkit-details-marker{display:none}
    details.glow[open]{background:rgba(255,255,255,.05); border-color:rgba(88,215,255,.26)}
    details.glow .answer{
      padding:0 1.05rem 1rem;
      color:var(--muted);
      line-height:1.85;
    }
    .footer-link{
      color:#b8cae7;
      transition:color .2s ease, opacity .2s ease;
    }
    .footer-link:hover{color:#fff}
    .bottom-tab{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:.42rem;
      padding:.65rem .6rem;
      border-radius:16px;
      color:#bdd0ec;
      border:1px solid transparent;
      transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    }
    .bottom-tab.active{
      color:#fff;
      background:rgba(88,215,255,.14);
      border-color:rgba(88,215,255,.22);
      box-shadow:0 0 0 1px rgba(88,215,255,.1) inset;
    }
    .bottom-tab:hover{transform:translateY(-1px); color:#fff}
    .mobile-fab{
      display:none;
    }
    .input-glow{
      width:100%;
      border-radius:16px;
      padding:.95rem 1rem;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(191,219,254,.12);
      color:#fff;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .input-glow::placeholder{color:#7f93b4}
    .input-glow:focus{
      border-color:rgba(88,215,255,.34);
      box-shadow:var(--ring);
      background:rgba(255,255,255,.06);
    }
    .divider-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(191,219,254,.18), transparent);
    }
    @media (max-width: 1024px){
      .mobile-fab{display:flex}
    }
    @media (max-width: 768px){
      .section{padding:1rem 0}
      .container-page{width:min(100% - 1rem, 1180px)}
      .nav-desktop{display:none}
      .bottom-safe{padding-bottom:5.9rem}
    }

/* roulang page: category1 */
:root{
      --bg:#07111f;
      --bg-2:#0b1730;
      --panel:rgba(12,19,35,.72);
      --panel-strong:rgba(9,16,31,.88);
      --line:rgba(148,163,184,.14);
      --line-strong:rgba(148,163,184,.22);
      --text:#e7eefc;
      --muted:#94a3b8;
      --accent:#5ee7ff;
      --accent-2:#5b8cff;
      --accent-3:#8b5cf6;
      --warm:#f59e0b;
      --shadow:0 30px 90px rgba(1,6,18,.56);
      --r-lg:24px;
      --r-md:18px;
      --r-sm:14px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1200px 680px at 18% 8%, rgba(91,140,255,.22), transparent 58%),
        radial-gradient(900px 520px at 88% 12%, rgba(94,231,255,.14), transparent 55%),
        radial-gradient(800px 520px at 50% 82%, rgba(139,92,246,.12), transparent 60%),
        linear-gradient(180deg, #06101d 0%, #07111f 38%, #050b16 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.16));
      opacity:.48;
      z-index:-2;
    }
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 20% 20%, rgba(94,231,255,.08), transparent 12%),
        radial-gradient(circle at 80% 18%, rgba(245,158,11,.06), transparent 10%),
        radial-gradient(circle at 55% 78%, rgba(91,140,255,.08), transparent 14%);
      z-index:-3;
    }
    ::selection{background:rgba(94,231,255,.24); color:#fff}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button,input,textarea{font:inherit}
    .container-page{width:min(1200px, calc(100% - 1.5rem)); margin-inline:auto}
    .glass{
      background:linear-gradient(180deg, rgba(18,27,47,.80), rgba(8,15,29,.70));
      border:1px solid rgba(148,163,184,.14);
      box-shadow:var(--shadow);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .glass-strong{
      background:linear-gradient(180deg, rgba(16,24,42,.92), rgba(7,13,24,.86));
      border:1px solid rgba(148,163,184,.18);
      box-shadow:0 30px 90px rgba(2,6,17,.68);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    .nav-wrap{
      position:relative;
      overflow:hidden;
    }
    .nav-wrap::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, rgba(94,231,255,.08), rgba(91,140,255,.03), transparent 58%);
      pointer-events:none;
    }
    .nav-link{
      position:relative;
      color:#cbd5e1;
      transition:transform .22s ease, color .22s ease, opacity .22s ease;
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      color:#fff;
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:#fff;
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-10px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(94,231,255,1), rgba(91,140,255,1));
      box-shadow:0 0 18px rgba(94,231,255,.35);
    }
    .btn-primary,
    .btn-secondary,
    .btn-ghost,
    .chip,
    .footer-link,
    .tab-link{
      transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.92rem 1.2rem;
      background:linear-gradient(135deg, rgba(94,231,255,1), rgba(91,140,255,1) 56%, rgba(139,92,246,1));
      color:#fff;
      font-weight:700;
      letter-spacing:.01em;
      box-shadow:0 14px 34px rgba(91,140,255,.26), 0 0 0 1px rgba(255,255,255,.08) inset;
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      transform:translateY(-2px);
      box-shadow:0 18px 42px rgba(91,140,255,.34), 0 0 0 1px rgba(255,255,255,.12) inset;
    }
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.92rem 1.2rem;
      background:rgba(255,255,255,.05);
      color:#e2e8f0;
      border:1px solid rgba(148,163,184,.18);
      box-shadow:0 8px 26px rgba(2,6,17,.22);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      transform:translateY(-2px);
      background:rgba(255,255,255,.08);
      border-color:rgba(94,231,255,.28);
      color:#fff;
    }
    .btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border-radius:999px;
      padding:.82rem 1.1rem;
      background:transparent;
      color:#d7e2f2;
      border:1px solid rgba(148,163,184,.16);
    }
    .btn-ghost:hover,
    .btn-ghost:focus-visible{
      transform:translateY(-2px);
      border-color:rgba(94,231,255,.28);
      background:rgba(255,255,255,.04);
      color:#fff;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      padding:.38rem .75rem;
      border:1px solid rgba(148,163,184,.16);
      background:rgba(255,255,255,.05);
      color:#cbd5e1;
      font-size:.76rem;
      line-height:1;
      white-space:nowrap;
    }
    .chip-accent{
      background:rgba(94,231,255,.10);
      border-color:rgba(94,231,255,.18);
      color:#bff5ff;
    }
    .section-kicker{
      color:#89dff3;
      letter-spacing:.18em;
      text-transform:uppercase;
      font-size:.72rem;
      font-weight:700;
    }
    .section-title{
      color:#fff;
      font-weight:900;
      letter-spacing:-.03em;
      line-height:1.08;
    }
    .section-desc{
      color:var(--muted);
      line-height:1.85;
    }
    .card-glow{
      position:relative;
      overflow:hidden;
      border:1px solid rgba(148,163,184,.13);
      background:linear-gradient(180deg, rgba(15,24,43,.78), rgba(10,17,31,.72));
      box-shadow:0 16px 40px rgba(2,6,17,.28);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .card-glow::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, rgba(94,231,255,.08), transparent 34%, rgba(91,140,255,.05));
      opacity:.8;
      pointer-events:none;
    }
    .card-glow:hover{
      transform:translateY(-4px);
      border-color:rgba(94,231,255,.22);
      box-shadow:0 22px 55px rgba(2,6,17,.36);
    }
    .card-glow > *{position:relative; z-index:1}
    .soft-border{border-color:rgba(148,163,184,.14)}
    .divider-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(148,163,184,.22), transparent);
    }
    .footer-link{
      color:#cbd5e1;
    }
    .footer-link:hover,
    .footer-link:focus-visible{
      color:#fff;
      padding-left:2px;
    }
    .ring-focus:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px rgba(94,231,255,.22), 0 0 0 1px rgba(94,231,255,.55) inset;
    }
    .tag-line{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
    }
    .mini-stat{
      border:1px solid rgba(148,163,184,.13);
      background:rgba(255,255,255,.04);
      border-radius:16px;
      padding:14px 16px;
    }
    .mini-value{
      font-weight:900;
      font-size:1.05rem;
      color:#fff;
      letter-spacing:-.02em;
    }
    .mini-label{font-size:.78rem; color:var(--muted); margin-top:.2rem}
    .metric-badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.34rem .68rem;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.14);
      background:rgba(255,255,255,.045);
      color:#dce7f7;
      font-size:.76rem;
    }
    .plan-card{
      position:relative;
      overflow:hidden;
    }
    .plan-card.featured{
      border-color:rgba(94,231,255,.28);
      box-shadow:0 0 0 1px rgba(94,231,255,.10), 0 20px 60px rgba(10,15,28,.38), 0 0 35px rgba(94,231,255,.12);
    }
    .plan-card.featured::after{
      content:"推荐";
      position:absolute;
      top:16px;
      right:16px;
      padding:.28rem .58rem;
      border-radius:999px;
      background:rgba(94,231,255,.14);
      color:#bef4ff;
      border:1px solid rgba(94,231,255,.24);
      font-size:.72rem;
      font-weight:700;
    }
    .faq-item{
      border:1px solid rgba(148,163,184,.14);
      border-radius:20px;
      overflow:hidden;
      background:rgba(255,255,255,.04);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      user-select:none;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item[open]{
      border-color:rgba(94,231,255,.22);
      background:rgba(255,255,255,.055);
    }
    .faq-item[open] .faq-arrow{
      transform:rotate(45deg);
      color:#fff;
    }
    .faq-arrow{
      transition:transform .22s ease, color .22s ease;
    }
    .bottom-tab{
      background:linear-gradient(180deg, rgba(9,16,30,.76), rgba(5,10,19,.92));
      border-top:1px solid rgba(148,163,184,.16);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      padding-bottom: calc(env(safe-area-inset-bottom) + 0.45rem);
    }
    .tab-link{
      color:#aab8cc;
      border-radius:16px;
      padding:.55rem .4rem;
    }
    .tab-link.active{
      color:#fff;
      background:rgba(94,231,255,.09);
      box-shadow:0 0 0 1px rgba(94,231,255,.18) inset;
    }
    .tab-link:hover,
    .tab-link:focus-visible{
      color:#fff;
      transform:translateY(-1px);
    }
    .no-scrollbar::-webkit-scrollbar{display:none}
    .no-scrollbar{-ms-overflow-style:none; scrollbar-width:none}
    @media (max-width: 767px){
      .section-title{letter-spacing:-.025em}
    }