/* roulang page: index */
:root {
      --bg: #f8fafc;
      --bg-soft: #eff6ff;
      --card: rgba(255,255,255,.92);
      --line: #dbe6f4;
      --text: #0f172a;
      --sub: #334155;
      --mute: #64748b;
      --brand: #2563eb;
      --brand-2: #06b6d4;
      --warn: #f59e0b;
      --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
      --radius: 24px;
    }
    html { scroll-behavior: smooth; }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .08), transparent 30%),
        radial-gradient(circle at top right, rgba(6, 182, 212, .08), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 35%, #eef6ff 100%);
    }
    a { text-decoration: none; }
    img { max-width: 100%; display: block; }
    ::selection { background: rgba(37, 99, 235, .14); }
    .tactical-grid {
      background-image:
        linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
      background-size: 24px 24px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.2));
    }
    .corner-line::before,
    .corner-line::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      border-color: #bfdbfe;
      pointer-events: none;
    }
    .corner-line::before {
      top: -1px;
      left: -1px;
      border-top: 2px solid;
      border-left: 2px solid;
      border-top-left-radius: 14px;
    }
    .corner-line::after {
      right: -1px;
      bottom: -1px;
      border-right: 2px solid;
      border-bottom: 2px solid;
      border-bottom-right-radius: 14px;
    }
    .nav-blur {
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .btn-primary {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #fff;
      box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37, 99, 235, .28); }
    .btn-secondary {
      background: #fff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .btn-secondary:hover { transform: translateY(-1px); background: #eff6ff; border-color: #93c5fd; }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      border-radius: 999px;
      border: 1px solid #dbeafe;
      background: rgba(255,255,255,.88);
      color: #1d4ed8;
      padding: .42rem .8rem;
      font-size: .875rem;
      line-height: 1;
    }
    .chip.active {
      background: #dbeafe;
      color: #1e40af;
      border-color: #bfdbfe;
      font-weight: 700;
    }
    .section-title {
      font-size: clamp(1.65rem, 2.6vw, 2.7rem);
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: -0.03em;
      color: #0f172a;
    }
    .section-desc {
      color: #64748b;
      line-height: 1.8;
      font-size: 1rem;
      max-width: 56rem;
    }
    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 28px;
      box-shadow: var(--shadow);
    }
    .glass {
      background: rgba(255,255,255,.76);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(219, 234, 254, .9);
    }
    .focus-ring:focus {
      outline: none;
      box-shadow: 0 0 0 4px rgba(59, 130, 246, .18);
      border-color: #60a5fa;
    }
    .mini-kpi {
      border: 1px solid #dbeafe;
      background: linear-gradient(180deg, rgba(239,246,255,.9), rgba(255,255,255,.95));
    }
    .fade-up {
      animation: fadeUp .7s ease both;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .faq-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height .28s ease;
    }
    .faq-item[aria-expanded="true"] .faq-panel {
      max-height: 260px;
    }
    .faq-item[aria-expanded="true"] .faq-icon {
      transform: rotate(180deg);
    }
    .faq-icon {
      transition: transform .2s ease;
    }
    .menu-open { display: block; }
    @media (max-width: 768px) {
      .section-title { line-height: 1.12; }
    }

/* roulang page: category1 */
:root {
      --bg: #f8fafc;
      --panel: #ffffff;
      --panel-2: #eff6ff;
      --line: #dbe4f0;
      --text: #0f172a;
      --muted: #475569;
      --soft: #64748b;
      --brand: #2563eb;
      --brand-deep: #1d4ed8;
      --cyan: #06b6d4;
      --ring: rgba(37, 99, 235, .18);
      --shadow: 0 18px 50px rgba(15, 23, 42, .08);
      --radius: 24px;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(circle at top left, rgba(59,130,246,.08), transparent 30%),
        radial-gradient(circle at top right, rgba(6,182,212,.08), transparent 26%),
        linear-gradient(180deg, #f8fafc 0%, #f8fafc 100%);
      color: var(--text);
    }
    .tactical-grid {
      background-image:
        linear-gradient(to right, rgba(148,163,184,.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148,163,184,.10) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.04) 65%, transparent);
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .65rem 1rem;
      border-radius: 9999px;
      border: 1px solid #dbe4f0;
      background: rgba(255,255,255,.84);
      color: #334155;
      font-size: .925rem;
      font-weight: 600;
      transition: all .18s ease;
      box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    }
    .chip:hover {
      border-color: rgba(37, 99, 235, .28);
      color: var(--brand-deep);
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(37, 99, 235, .08);
    }
    .chip.active {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 12px 24px rgba(37, 99, 235, .24);
    }
    .brand-card {
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,246,255,.92));
      border: 1px solid rgba(219,228,240,.9);
      box-shadow: var(--shadow);
      border-radius: 28px;
    }
    .panel-card {
      background: rgba(255,255,255,.92);
      border: 1px solid #dbe4f0;
      box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
      border-radius: 24px;
    }
    .corner-line {
      position: relative;
    }
    .corner-line::before,
    .corner-line::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      border-color: rgba(37, 99, 235, .4);
    }
    .corner-line::before {
      top: 14px;
      left: 14px;
      border-top: 2px solid;
      border-left: 2px solid;
      border-radius: 10px 0 0 0;
    }
    .corner-line::after {
      right: 14px;
      bottom: 14px;
      border-right: 2px solid;
      border-bottom: 2px solid;
      border-radius: 0 0 10px 0;
    }
    .btn-primary {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #fff;
      box-shadow: 0 14px 30px rgba(37, 99, 235, .22);
    }
    .btn-primary:hover {
      filter: brightness(1.02);
      transform: translateY(-1px);
      box-shadow: 0 18px 34px rgba(37, 99, 235, .28);
    }
    .btn-secondary {
      background: #fff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .btn-secondary:hover {
      background: #eff6ff;
      transform: translateY(-1px);
    }
    .input-field {
      width: 100%;
      border-radius: 16px;
      border: 1px solid #dbe4f0;
      background: #fff;
      padding: .9rem 1rem;
      color: #0f172a;
      outline: none;
      transition: all .18s ease;
    }
    .input-field:focus {
      border-color: #60a5fa;
      box-shadow: 0 0 0 4px var(--ring);
    }
    .section-title {
      color: #0f172a;
      letter-spacing: -.02em;
    }
    .mini-label {
      display: inline-flex;
      align-items: center;
      border-radius: 9999px;
      padding: .36rem .75rem;
      background: #eff6ff;
      color: #1d4ed8;
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .08em;
    }
    .faq-item {
      border: 1px solid #dbe4f0;
      background: rgba(255,255,255,.9);
      border-radius: 22px;
      overflow: hidden;
      transition: all .18s ease;
    }
    .faq-item:hover {
      border-color: rgba(37,99,235,.28);
      box-shadow: 0 12px 30px rgba(15,23,42,.05);
    }
    .faq-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height .28s ease;
    }
    .faq-item.open .faq-panel {
      max-height: 240px;
    }
    .faq-item.open .faq-toggle {
      color: #1d4ed8;
    }
    .mobile-nav {
      transition: max-height .25s ease, opacity .2s ease;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
    }
    .mobile-nav.open {
      max-height: 360px;
      opacity: 1;
    }
    .muted-text { color: var(--muted); }
    .soft-text { color: var(--soft); }
    .subtle-grid {
      background-image:
        linear-gradient(rgba(37,99,235,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px);
      background-size: 20px 20px;
    }
    @media (max-width: 767px) {
      .mobile-hide { display: none !important; }
    }

/* roulang page: category2 */
:root{
      --bg:#f8fafc;
      --panel:#ffffff;
      --line:#dbeafe;
      --line-strong:#bfdbfe;
      --text:#0f172a;
      --muted:#475569;
      --weak:#94a3b8;
      --brand:#2563eb;
      --brand-strong:#1d4ed8;
      --accent:#06b6d4;
      --warning:#f59e0b;
      --shadow:0 18px 50px rgba(15,23,42,.08);
      --shadow-soft:0 10px 24px rgba(37,99,235,.08);
      --radius:24px;
    }
    html{scroll-behavior:smooth}
    body{
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(6,182,212,.08), transparent 18%),
        linear-gradient(180deg, #f8fbff 0%, #f8fafc 38%, #ffffff 100%);
      color:var(--muted);
    }
    ::selection{background:rgba(37,99,235,.16); color:var(--text)}
    .tactical-grid{
      background-image:
        linear-gradient(to right, rgba(37,99,235,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(37,99,235,.06) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      border-radius:9999px;
      border:1px solid rgba(191,219,254,.9);
      background:rgba(255,255,255,.82);
      color:#334155;
      padding:.64rem 1rem;
      font-size:.92rem;
      line-height:1;
      font-weight:600;
      transition:all .18s ease;
      backdrop-filter: blur(12px);
    }
    .chip:hover{
      color:var(--brand);
      border-color:rgba(37,99,235,.25);
      background:#eff6ff;
      transform:translateY(-1px);
      box-shadow:0 10px 24px rgba(37,99,235,.08);
    }
    .chip.active{
      background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
      color:#fff;
      border-color:transparent;
      box-shadow:0 14px 28px rgba(37,99,235,.22);
    }
    .glass-panel{
      background:rgba(255,255,255,.9);
      border:1px solid rgba(219,234,254,.9);
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
    }
    .soft-card{
      background:rgba(255,255,255,.96);
      border:1px solid rgba(219,234,254,.9);
      box-shadow:var(--shadow-soft);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .soft-card:hover{
      transform:translateY(-2px);
      border-color:rgba(37,99,235,.28);
      box-shadow:0 18px 38px rgba(37,99,235,.12);
    }
    .section-label{
      letter-spacing:.22em;
      text-transform:uppercase;
      font-size:.76rem;
      font-weight:800;
      color:#60a5fa;
    }
    .focus-ring:focus{
      outline:none;
      box-shadow:0 0 0 4px rgba(59,130,246,.18);
      border-color:#60a5fa;
    }
    details > summary{list-style:none}
    details > summary::-webkit-details-marker{display:none}
    details[open] .faq-icon{transform:rotate(45deg)}
    .corner-line{
      position:absolute;
      width:18px;
      height:18px;
      border-color:rgba(37,99,235,.35);
      border-style:solid;
      content:"";
      pointer-events:none;
    }
    .corner-line.tl{top:16px;left:16px;border-width:2px 0 0 2px;border-top-left-radius:10px}
    .corner-line.tr{top:16px;right:16px;border-width:2px 2px 0 0;border-top-right-radius:10px}
    .corner-line.bl{bottom:16px;left:16px;border-width:0 0 2px 2px;border-bottom-left-radius:10px}
    .corner-line.br{bottom:16px;right:16px;border-width:0 2px 2px 0;border-bottom-right-radius:10px}
    .hero-glow{
      background:
        radial-gradient(circle at 18% 25%, rgba(37,99,235,.14), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(6,182,212,.12), transparent 20%),
        linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(239,246,255,.92) 100%);
    }
    .mini-stat{
      background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border:1px solid rgba(191,219,254,.95);
      border-radius:20px;
      box-shadow:0 12px 30px rgba(15,23,42,.06);
    }
    .table-wrap table{border-collapse:separate;border-spacing:0}
    .table-wrap th:first-child{border-top-left-radius:18px}
    .table-wrap th:last-child{border-top-right-radius:18px}
    .table-wrap tr:last-child td:first-child{border-bottom-left-radius:18px}
    .table-wrap tr:last-child td:last-child{border-bottom-right-radius:18px}
    @media (max-width: 1023px){
      .mobile-scroll{
        overflow-x:auto;
        scrollbar-width:thin;
      }
      .mobile-scroll::-webkit-scrollbar{height:6px}
    }