/* roulang page: index */
:root{
      --bg:#f7fbff;
      --panel:rgba(255,255,255,.86);
      --panel-strong:#ffffff;
      --panel-soft:#f4f8ff;
      --line:#dbe6f3;
      --line-strong:#bfd0ec;
      --text:#0f172a;
      --muted:#5d6d84;
      --primary:#2563eb;
      --primary-strong:#1747c9;
      --accent:#14b8a6;
      --shadow-soft:0 18px 42px rgba(37,99,235,.08);
      --shadow-hover:0 28px 62px rgba(15,23,42,.12);
      --radius-xl:24px;
      --radius-lg:18px;
      --radius-md:14px;
      --radius-pill:999px;
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height:1.7;
      background:
        radial-gradient(circle at 12% 0%, rgba(37,99,235,.10), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(20,184,166,.12), transparent 18%),
        linear-gradient(180deg,#fbfdff 0%,#f5f9ff 100%);
      min-height:100vh;
    }
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    button,input,textarea,select{font:inherit}
    :focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:3px}
    .page-container{
      width:min(calc(100% - 2rem), var(--container));
      margin-inline:auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(248,251,255,.84);
      backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(219,230,243,.88);
    }
    .panel{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(10px);
    }
    .panel-strong{
      background:var(--panel-strong);
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-soft);
    }
    .panel-hover{
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
    }
    .panel-hover:hover{
      transform:translateY(-2px);
      border-color:var(--line-strong);
      box-shadow:var(--shadow-hover);
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.4rem .85rem;
      border-radius:var(--radius-pill);
      background:#eff6ff;
      color:var(--primary-strong);
      border:1px solid #dbeafe;
      font-size:.875rem;
      font-weight:700;
      letter-spacing:.02em;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.38rem .82rem;
      border-radius:var(--radius-pill);
      background:#f4f8ff;
      color:var(--muted);
      border:1px solid var(--line);
      font-size:.82rem;
      font-weight:700;
      letter-spacing:.02em;
    }
    .section-title{
      font-size:clamp(1.5rem, 2vw, 2.15rem);
      line-height:1.18;
      font-weight:800;
      letter-spacing:-.02em;
      color:var(--text);
    }
    .section-lead{
      color:var(--muted);
      font-size:1rem;
      max-width:66ch;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:var(--radius-pill);
      border:1px solid var(--line);
      background:#f8fbff;
      color:var(--muted);
      padding:.6rem .95rem;
      font-weight:600;
      font-size:.92rem;
      transition:all .2s ease;
      white-space:nowrap;
    }
    .pill:hover{
      border-color:var(--line-strong);
      color:var(--text);
      background:#ffffff;
      transform:translateY(-1px);
    }
    .pill.active{
      background:linear-gradient(135deg,var(--primary),#3b82f6);
      border-color:transparent;
      color:#fff;
      box-shadow:0 12px 26px rgba(37,99,235,.22);
    }
    .btn-primary,
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.88rem 1.25rem;
      border-radius:var(--radius-pill);
      font-weight:700;
      transition:all .2s ease;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--primary),#3b82f6);
      color:#fff;
      box-shadow:0 14px 28px rgba(37,99,235,.20);
    }
    .btn-primary:hover{
      background:linear-gradient(135deg,var(--primary-strong),var(--primary));
      transform:translateY(-1px);
      box-shadow:0 18px 36px rgba(37,99,235,.25);
    }
    .btn-secondary{
      background:#fff;
      color:var(--text);
      border-color:var(--line);
      box-shadow:0 10px 22px rgba(15,23,42,.04);
    }
    .btn-secondary:hover{
      border-color:var(--line-strong);
      transform:translateY(-1px);
      background:#f8fbff;
    }
    .field{
      display:flex;
      align-items:center;
      gap:.65rem;
      width:100%;
      padding:.82rem 1rem;
      border-radius:var(--radius-pill);
      border:1px solid var(--line);
      background:#fff;
      box-shadow:0 10px 24px rgba(15,23,42,.04);
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .field:focus-within{
      border-color:#a9c4f5;
      box-shadow:0 12px 28px rgba(37,99,235,.08);
      transform:translateY(-1px);
    }
    .field input{
      width:100%;
      border:0;
      outline:none;
      background:transparent;
      color:var(--text);
    }
    .field input::placeholder{color:#8ba0b8}
    .stat-badge{
      display:inline-flex;
      align-items:baseline;
      gap:.45rem;
      padding:.8rem 1rem;
      border-radius:18px;
      border:1px solid var(--line);
      background:linear-gradient(180deg,#fff,#f7fbff);
      box-shadow:0 12px 24px rgba(15,23,42,.05);
    }
    .stat-badge strong{
      font-size:1.2rem;
      line-height:1;
      color:var(--primary-strong);
    }
    .stat-badge span{
      color:var(--muted);
      font-size:.88rem;
      font-weight:600;
    }
    .list-item{
      display:flex;
      align-items:flex-start;
      gap:.85rem;
      padding:.88rem 0;
      border-bottom:1px solid rgba(219,230,243,.9);
    }
    .list-item:last-child{border-bottom:0}
    .dot{
      width:.65rem;
      height:.65rem;
      border-radius:999px;
      background:linear-gradient(135deg,var(--primary),#60a5fa);
      box-shadow:0 0 0 4px rgba(37,99,235,.10);
      flex:none;
      margin-top:.45rem;
    }
    details summary{
      list-style:none;
      cursor:pointer;
    }
    details summary::-webkit-details-marker{display:none}
    .faq-chevron{
      transition:transform .2s ease;
    }
    details[open] .faq-chevron{
      transform:rotate(180deg);
    }
    @media (max-width: 1024px){
      .page-container{width:min(calc(100% - 1.5rem), var(--container))}
    }
    @media (max-width: 768px){
      .section-title{font-size:1.45rem}
      .btn-primary,.btn-secondary{padding:.82rem 1rem}
    }

/* roulang page: category1 */
:root{
            --bg:#f5f8ff;
            --surface:#ffffff;
            --surface-soft:#f9fbff;
            --line:#dce7f6;
            --line-strong:#c8d8ef;
            --text:#0f172a;
            --muted:#5b6b84;
            --brand:#2563eb;
            --brand-2:#38bdf8;
            --accent:#0ea5e9;
            --success:#10b981;
            --shadow:0 18px 45px rgba(37,99,235,.08);
            --shadow-strong:0 24px 55px rgba(37,99,235,.14);
            --radius:24px;
            --radius-lg:30px;
            --space:24px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(circle at 15% 10%, rgba(56,189,248,.13), transparent 28%),
                radial-gradient(circle at 85% 15%, rgba(37,99,235,.12), transparent 26%),
                linear-gradient(180deg, #f7faff 0%, #f3f7ff 100%);
            font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
            line-height:1.75;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(37,99,235,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(37,99,235,.035) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 28%);
            z-index:-1;
        }
        img{max-width:100%; display:block}
        a{color:inherit; text-decoration:none}
        button,input,select,textarea{font:inherit; color:inherit}
        ::selection{background:rgba(37,99,235,.16)}
        .page-container{
            width:min(1200px, calc(100% - 32px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:60;
            backdrop-filter: blur(16px);
            background: rgba(249, 251, 255, .9);
            border-bottom:1px solid rgba(220,231,246,.9);
            box-shadow: 0 8px 30px rgba(15,23,42,.03);
        }
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:.5rem;
            padding:.5rem .8rem;
            border-radius:999px;
            background:rgba(255,255,255,.82);
            border:1px solid var(--line);
            color:var(--muted);
            font-size:.82rem;
            line-height:1;
            box-shadow:0 10px 24px rgba(37,99,235,.05);
        }
        .pill{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.72rem 1rem;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.78);
            color:#41516d;
            font-weight:700;
            font-size:.94rem;
            transition:all .2s ease;
            box-shadow:0 10px 20px rgba(15,23,42,.03);
            white-space:nowrap;
        }
        .pill:hover{
            transform:translateY(-1px);
            border-color:#b6cdf0;
            color:#1d4ed8;
            box-shadow:0 18px 30px rgba(37,99,235,.08);
        }
        .pill.active{
            background:linear-gradient(135deg, var(--brand), var(--brand-2));
            color:white;
            border-color:transparent;
            box-shadow:0 16px 30px rgba(37,99,235,.22);
        }
        .field{
            display:flex;
            align-items:center;
            gap:.75rem;
            padding:.82rem 1rem;
            border-radius:18px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.92);
            box-shadow:0 14px 28px rgba(15,23,42,.04);
            transition:all .2s ease;
        }
        .field:focus-within{
            border-color:#93c5fd;
            box-shadow:0 0 0 4px rgba(37,99,235,.09), 0 16px 32px rgba(15,23,42,.05);
        }
        .field input{
            width:100%;
            border:0;
            background:transparent;
            outline:none;
            color:var(--text);
        }
        .field input::placeholder{color:#7b8ba8}
        .btn-primary, .btn-secondary{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.55rem;
            min-height:48px;
            padding:.9rem 1.25rem;
            border-radius:16px;
            font-weight:800;
            transition:all .2s ease;
            border:1px solid transparent;
        }
        .btn-primary{
            background:linear-gradient(135deg, var(--brand), #1d4ed8 60%, var(--brand-2));
            color:#fff;
            box-shadow:0 16px 30px rgba(37,99,235,.22);
        }
        .btn-primary:hover{
            transform:translateY(-1px);
            box-shadow:0 20px 34px rgba(37,99,235,.28);
        }
        .btn-secondary{
            background:rgba(255,255,255,.85);
            border-color:var(--line);
            color:#27415f;
            box-shadow:0 14px 24px rgba(15,23,42,.04);
        }
        .btn-secondary:hover{
            transform:translateY(-1px);
            border-color:#bfd4f5;
            color:#1d4ed8;
            box-shadow:0 18px 28px rgba(37,99,235,.08);
        }
        .panel{
            background:rgba(255,255,255,.88);
            border:1px solid rgba(220,231,246,.95);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow);
        }
        .panel-strong{
            background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,255,.94));
            border:1px solid rgba(200,216,239,.95);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow-strong);
        }
        .metric{
            padding:1rem 1.1rem;
            border-radius:20px;
            background:rgba(249,251,255,.95);
            border:1px solid var(--line);
            box-shadow:0 12px 26px rgba(15,23,42,.04);
        }
        .metric b{
            display:block;
            font-size:1.2rem;
            line-height:1.2;
            margin-bottom:.15rem;
            color:#0f172a;
        }
        .metric span{
            color:var(--muted);
            font-size:.88rem;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:.4rem;
            padding:.52rem .84rem;
            border-radius:999px;
            background:#eef5ff;
            border:1px solid #d6e4fb;
            color:#264b88;
            font-size:.88rem;
            font-weight:700;
            transition:all .2s ease;
        }
        .chip:hover{
            transform:translateY(-1px);
            background:#e7f0ff;
            border-color:#bdd3f8;
            color:#1d4ed8;
        }
        .chip.active{
            background:var(--brand);
            border-color:var(--brand);
            color:#fff;
            box-shadow:0 14px 24px rgba(37,99,235,.18);
        }
        .list-link{
            display:flex;
            align-items:flex-start;
            gap:.8rem;
            padding:1rem 0;
            border-bottom:1px solid rgba(220,231,246,.8);
            transition:all .2s ease;
        }
        .list-link:last-child{border-bottom:0}
        .list-link:hover{
            transform:translateX(2px);
        }
        .thumb{
            position:relative;
            overflow:hidden;
            border-radius:22px;
            background:
                radial-gradient(circle at 30% 20%, rgba(255,255,255,.48), transparent 28%),
                linear-gradient(135deg, rgba(37,99,235,.93), rgba(56,189,248,.88));
            box-shadow:0 18px 34px rgba(37,99,235,.14);
        }
        .thumb::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, transparent, rgba(15,23,42,.2));
        }
        .card-item{
            border-radius:24px;
            border:1px solid rgba(220,231,246,.95);
            background:rgba(255,255,255,.95);
            box-shadow:0 16px 30px rgba(15,23,42,.04);
            transition:all .2s ease;
            overflow:hidden;
        }
        .card-item:hover{
            transform:translateY(-2px);
            border-color:#c3d6f5;
            box-shadow:0 22px 40px rgba(37,99,235,.09);
        }
        .faq-item{
            border-radius:22px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.92);
            box-shadow:0 14px 26px rgba(15,23,42,.04);
            overflow:hidden;
        }
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:1.05rem 1.15rem;
            font-weight:800;
            color:#183152;
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item[open]{
            border-color:#bfd4f5;
            box-shadow:0 18px 34px rgba(37,99,235,.08);
        }
        .faq-item .answer{
            padding:0 1.15rem 1.1rem;
            color:var(--muted);
            font-size:.96rem;
        }
        .footer-link{
            color:#60718d;
            transition:color .2s ease;
        }
        .footer-link:hover{color:#1d4ed8}
        .soft-title{
            font-size:clamp(1.8rem, 2.5vw, 2.55rem);
            line-height:1.15;
            letter-spacing:-.03em;
            font-weight:900;
            color:#0f172a;
        }
        .soft-subtitle{
            font-size:1.03rem;
            color:var(--muted);
        }
        .section-title{
            font-size:clamp(1.35rem, 2vw, 1.8rem);
            line-height:1.2;
            font-weight:900;
            letter-spacing:-.02em;
            color:#10243f;
        }
        .meta-badge{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.45rem .72rem;
            border-radius:999px;
            font-size:.8rem;
            font-weight:700;
            color:#365685;
            background:#eef5ff;
            border:1px solid #d8e7fb;
        }
        .sticky-rail{
            position:sticky;
            top:110px;
        }
        @media (max-width: 1024px){
            .sticky-rail{position:static; top:auto}
        }
        @media (max-width: 768px){
            .page-container{width:min(100% - 20px, 1200px)}
            .soft-title{font-size:clamp(1.7rem, 7vw, 2.2rem)}
            .soft-subtitle{font-size:.98rem}
        }