/* roulang page: index */
body{font-family:"Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.7;color:#1f2937;background:#f7f9fc}
  header,footer{background:#0f172a;color:#fff} header a,footer a{color:inherit;text-decoration:none}
  main section{padding:64px 0} .container{max-width:1180px}
  .hero,.site-hero{background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff}
  .card,.feature-card,.service-card,.category-card{border:1px solid rgba(15,23,42,.08);box-shadow:0 12px 32px rgba(15,23,42,.08);border-radius:16px}
  .btn,.button,a[class*="btn"]{border-radius:999px;font-weight:700}
  img{max-width:100%;height:auto} @media(max-width:768px){main section{padding:42px 0} h1{font-size:2rem}}

/* roulang page: category1 */
:root{
      --bg: #f6fbf8;
      --bg-2: #eef8f3;
      --card: #ffffff;
      --text: #1f2d2a;
      --muted: #5f716a;
      --line: #dcece4;
      --line-strong: #c5e5d8;
      --brand: #2bbf9c;
      --brand-strong: #14967b;
      --brand-soft: #e4faf4;
      --accent: #ffb86b;
      --accent-soft: #fff4e5;
      --shadow: 0 16px 40px rgba(31,45,42,.08);
      --shadow-hover: 0 20px 50px rgba(31,45,42,.12);
      --radius: 16px;
    }
    html { scroll-behavior: smooth; }
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 10% 10%, rgba(43,191,156,.08), transparent 22%),
        radial-gradient(circle at 90% 0%, rgba(255,184,107,.12), transparent 20%),
        linear-gradient(180deg, #fbfffd 0%, var(--bg) 46%, #f9fcfa 100%);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height:1.6;
      letter-spacing:0;
    }
    *{ box-sizing:border-box; }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }
    button, input, select, textarea{ font:inherit; }
    .site-shell{
      position:relative;
      overflow:hidden;
    }
    .site-shell::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(31,45,42,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,45,42,.04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 86%);
      opacity:.45;
    }
    .container-custom{
      width:min(100%, 80rem);
      margin:0 auto;
      padding-left:1rem;
      padding-right:1rem;
    }
    @media (min-width:640px){
      .container-custom{ padding-left:1.5rem; padding-right:1.5rem; }
    }
    @media (min-width:1024px){
      .container-custom{ padding-left:2rem; padding-right:2rem; }
    }
    .glass-bar{
      background: rgba(246,251,248,.82);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(220,236,228,.9);
    }
    .nav-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.7rem .95rem;
      color:var(--muted);
      border-radius:999px;
      transition: all .2s ease;
    }
    .nav-link:hover{
      color:var(--text);
      background: rgba(43,191,156,.08);
    }
    .nav-link.active{
      color:var(--text);
      background: rgba(43,191,156,.12);
      box-shadow: inset 0 -2px 0 var(--brand);
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height:48px;
      padding:.85rem 1.2rem;
      border-radius:12px;
      color:#fff;
      background: linear-gradient(135deg, var(--brand), var(--brand-strong));
      box-shadow: 0 10px 24px rgba(43,191,156,.22);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn-primary:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(43,191,156,.26);
    }
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height:48px;
      padding:.85rem 1.2rem;
      border-radius:12px;
      color:var(--text);
      background: #fff;
      border:1px solid var(--line);
      box-shadow: 0 8px 20px rgba(31,45,42,.05);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .btn-secondary:hover{
      transform: translateY(-2px);
      border-color: var(--line-strong);
      background: #fbfffd;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.35rem .7rem;
      border-radius:999px;
      font-size:.78rem;
      font-weight:600;
      line-height:1;
      white-space:nowrap;
    }
    .badge-soft{
      background: var(--brand-soft);
      color: var(--brand-strong);
    }
    .badge-warm{
      background: var(--accent-soft);
      color: #b76b16;
    }
    .panel{
      background: rgba(255,255,255,.9);
      border:1px solid rgba(220,236,228,.92);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
    }
    .panel-strong{
      border-color: rgba(197,229,216,.95);
    }
    .section-pad{
      padding-top:3.5rem;
      padding-bottom:3.5rem;
    }
    @media (min-width:1024px){
      .section-pad{
        padding-top:5rem;
        padding-bottom:5rem;
      }
    }
    .hero-grid{
      position:relative;
      display:grid;
      gap:1.5rem;
      align-items:stretch;
    }
    @media (min-width:1024px){
      .hero-grid{
        grid-template-columns: 1.15fr .85fr;
        gap:2rem;
      }
    }
    .hero-card{
      position:relative;
      overflow:hidden;
      border-radius: 24px;
      background:
        radial-gradient(circle at top left, rgba(43,191,156,.12), transparent 32%),
        radial-gradient(circle at bottom right, rgba(255,184,107,.16), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
      border:1px solid rgba(220,236,228,.95);
      box-shadow: var(--shadow);
    }
    .hero-card::after{
      content:"";
      position:absolute;
      inset:auto -8% -18% auto;
      width:240px;
      height:240px;
      border-radius:50%;
      background:
        radial-gradient(circle, rgba(43,191,156,.08), rgba(43,191,156,0) 70%);
      pointer-events:none;
    }
    .metric{
      background: rgba(255,255,255,.92);
      border:1px solid rgba(220,236,228,.9);
      border-radius: 18px;
      padding: 1rem;
      box-shadow: 0 10px 26px rgba(31,45,42,.05);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .metric:hover{
      transform: translateY(-2px);
      border-color: rgba(43,191,156,.35);
      box-shadow: var(--shadow-hover);
    }
    .metric-value{
      font-size:1.35rem;
      font-weight:800;
      line-height:1.1;
      color:var(--text);
    }
    .metric-label{
      margin-top:.35rem;
      font-size:.82rem;
      color:var(--muted);
    }
    .section-title{
      font-size:1.4rem;
      line-height:1.2;
      font-weight:800;
      color:var(--text);
    }
    @media (min-width:1024px){
      .section-title{ font-size:1.8rem; }
    }
    .section-sub{
      color:var(--muted);
      margin-top:.55rem;
      max-width: 42rem;
    }
    .filter-btn{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      min-height:42px;
      padding:.55rem .95rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--muted);
      transition: all .2s ease;
      white-space:nowrap;
    }
    .filter-btn:hover{
      color:var(--text);
      border-color: var(--line-strong);
      background: #f9fffd;
    }
    .filter-btn.is-active{
      color: var(--brand-strong);
      border-color: rgba(43,191,156,.32);
      background: rgba(43,191,156,.1);
    }
    .entry-card{
      position:relative;
      overflow:hidden;
      background:#fff;
      border:1px solid rgba(220,236,228,.95);
      border-radius:18px;
      padding:1rem;
      box-shadow: 0 12px 28px rgba(31,45,42,.05);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .entry-card:hover{
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(43,191,156,.34);
    }
    .entry-card::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:3px;
      background: linear-gradient(90deg, var(--brand), rgba(43,191,156,.2));
    }
    .node{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:2rem;
      height:2rem;
      border-radius:999px;
      background: rgba(43,191,156,.12);
      color: var(--brand-strong);
      font-weight:800;
      font-size:.88rem;
      flex-shrink:0;
    }
    .sidebar-card{
      background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
      border:1px solid rgba(220,236,228,.95);
      border-radius:18px;
      box-shadow: 0 12px 28px rgba(31,45,42,.05);
    }
    .faq details{
      background:#fff;
      border:1px solid rgba(220,236,228,.92);
      border-radius:16px;
      box-shadow: 0 10px 24px rgba(31,45,42,.04);
      overflow:hidden;
    }
    .faq details + details{ margin-top:.9rem; }
    .faq summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      padding:1rem 1.1rem;
      font-weight:700;
      color:var(--text);
    }
    .faq summary::-webkit-details-marker{ display:none; }
    .faq .faq-body{
      padding: 0 1.1rem 1rem 1.1rem;
      color:var(--muted);
      border-left: 3px solid transparent;
    }
    .faq details[open] .faq-body{
      border-left-color: var(--brand);
    }
    .faq-icon{
      flex-shrink:0;
      width:1.4rem;
      height:1.4rem;
      border-radius:999px;
      background: rgba(43,191,156,.1);
      color: var(--brand-strong);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      transition: transform .2s ease;
    }
    details[open] .faq-icon{
      transform: rotate(45deg);
    }
    .footer-link{
      color:var(--muted);
      transition: color .2s ease;
    }
    .footer-link:hover{ color:var(--brand-strong); }
    .mobile-menu{
      display:none;
    }
    .mobile-menu.is-open{
      display:block;
    }
    .hero-path{
      position:absolute;
      inset:auto 0 0 0;
      height: 130px;
      background:
        linear-gradient(90deg, transparent, rgba(43,191,156,.08), transparent),
        linear-gradient(135deg, transparent 0 28%, rgba(43,191,156,.12) 28% 29%, transparent 29% 58%, rgba(255,184,107,.16) 58% 59%, transparent 59% 100%);
      opacity:.6;
      pointer-events:none;
      mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
    }
    .mini-line{
      position:relative;
    }
    .mini-line::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-.35rem;
      width:3rem;
      height:2px;
      background: linear-gradient(90deg, var(--brand), transparent);
      border-radius:999px;
    }