/* roulang page: index */
:root{
      --primary:#2563EB;
      --primary-dark:#1D4ED8;
      --secondary:#38BDF8;
      --success:#10B981;
      --bg:#F6F9FF;
      --surface:#FFFFFF;
      --text:#0F172A;
      --muted:#475569;
      --soft:#64748B;
      --border:#E2E8F0;
      --radius:24px;
      --shadow:0 18px 45px rgba(15,23,42,.08);
      --shadow-hover:0 24px 60px rgba(37,99,235,.14);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(56,189,248,.20), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(37,99,235,.12), transparent 28%),
        linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 42%,#F6F9FF 100%);
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button{font:inherit}
    .site-shell{position:relative;overflow:hidden}
    .site-shell:before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(37,99,235,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.055) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom, black 0%, transparent 44%);
      opacity:.75;
      z-index:0;
    }
    .content-layer{position:relative;z-index:1}
    .container-custom{
      width:min(100% - 40px, 1280px);
      margin-inline:auto;
    }
    .header-wrap{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,255,255,.96);
      border-bottom:1px solid rgba(226,232,240,.86);
      box-shadow:0 6px 24px rgba(15,23,42,.04);
      backdrop-filter:saturate(140%) blur(8px);
    }
    .brand-mark{
      width:42px;height:42px;border-radius:14px;
      background:linear-gradient(135deg,#2563EB,#38BDF8);
      color:white;display:grid;place-items:center;
      font-weight:800;letter-spacing:.02em;
      box-shadow:0 12px 26px rgba(37,99,235,.22);
      flex:0 0 auto;
    }
    .nav-link{
      display:inline-flex;align-items:center;gap:.35rem;
      padding:.58rem .9rem;border-radius:999px;
      color:#475569;font-size:15px;font-weight:650;
      transition:all .25s ease;
    }
    .nav-link:hover{color:var(--primary);background:#EFF6FF}
    .nav-link.active{color:var(--primary);background:#DBEAFE}
    .btn-primary,.btn-secondary{
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      border-radius:999px;font-weight:750;
      transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
      outline:none;
    }
    .btn-primary{
      background:var(--primary);color:white;
      box-shadow:0 14px 28px rgba(37,99,235,.22);
    }
    .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 20px 34px rgba(37,99,235,.28)}
    .btn-secondary{
      background:white;color:var(--primary);
      border:1px solid #BFDBFE;
    }
    .btn-secondary:hover{background:#EFF6FF;transform:translateY(-2px);border-color:#93C5FD}
    .btn-primary:focus-visible,.btn-secondary:focus-visible,.nav-link:focus-visible,.mobile-menu-btn:focus-visible{
      box-shadow:0 0 0 4px rgba(37,99,235,.18);
    }
    .section-kicker{
      display:inline-flex;align-items:center;gap:.45rem;
      padding:.3rem .75rem;border-radius:999px;
      background:#EFF6FF;color:#1D4ED8;
      font-size:.86rem;font-weight:800;
      border:1px solid #DBEAFE;
    }
    .hero-card{
      border:1px solid rgba(226,232,240,.95);
      background:rgba(255,255,255,.92);
      border-radius:32px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .visual-panel{
      background:
        linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.96)),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
    }
    .hover-card{
      transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    }
    .hover-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow-hover);
      border-color:#BFDBFE;
    }
    .icon-box{
      width:46px;height:46px;border-radius:16px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,#EFF6FF,#E0F2FE);
      color:var(--primary);
      border:1px solid #DBEAFE;
      flex:0 0 auto;
    }
    .soft-divider{height:1px;background:linear-gradient(90deg,transparent,#E2E8F0,transparent)}
    .scenario-step:before{
      content:"";
      position:absolute;
      top:34px;left:calc(50% + 28px);
      width:calc(100% - 56px);height:2px;
      background:linear-gradient(90deg,#BFDBFE,transparent);
    }
    .scenario-step:last-child:before{display:none}
    .faq-answer{display:none}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .faq-icon{transition:transform .25s ease}
    .mobile-panel{
      display:none;
      border-top:1px solid var(--border);
      background:white;
    }
    .mobile-panel.open{display:block}
    .footer-link{
      color:#64748B;transition:color .22s ease, transform .22s ease;
      display:inline-flex;
    }
    .footer-link:hover{color:var(--primary);transform:translateX(2px)}
    @media (max-width:1024px){
      .scenario-step:before{display:none}
    }
    @media (max-width:768px){
      .container-custom{width:min(100% - 32px, 1280px)}
      .desktop-nav{display:none}
      .mobile-menu-btn{display:inline-flex}
      .hero-title{font-size:2.25rem!important}
      .section-title{font-size:1.9rem!important}
    }
    @media (min-width:769px){
      .mobile-menu-btn{display:none}
    }
    @media (max-width:520px){
      .container-custom{width:min(100% - 24px, 1280px)}
      .brand-text-small{display:none}
      .hero-title{font-size:2rem!important}
      .mobile-full{width:100%}
    }

/* roulang page: category1 */
:root{
      --brand:#2563eb;
      --brand-2:#38bdf8;
      --brand-soft:#eff6ff;
      --success:#10b981;
      --bg:#f6f9ff;
      --text:#0f172a;
      --muted:#475569;
      --soft:#64748b;
      --line:#e2e8f0;
      --shadow:0 18px 45px rgba(15,23,42,.08);
      --shadow-hover:0 24px 60px rgba(15,23,42,.12);
      --radius:24px;
    }
    html{scroll-behavior:smooth;}
    body{
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 22%),
        radial-gradient(circle at right top, rgba(56,189,248,.08), transparent 18%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 38%, #f6f9ff 100%);
      color: var(--text);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img{max-width:100%; display:block;}
    a{color:inherit; text-decoration:none;}
    .container-custom{
      width:min(100% - 2rem, 1200px);
      margin-inline:auto;
    }
    @media (min-width: 640px){
      .container-custom{width:min(100% - 3rem, 1200px);}
    }
    @media (min-width: 1024px){
      .container-custom{width:min(100% - 5rem, 1200px);}
    }
    .header-wrap{
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid rgba(226,232,240,.9);
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:42px;
      height:42px;
      border-radius:16px;
      background: linear-gradient(135deg, var(--brand), #60a5fa);
      color:#fff;
      font-weight:800;
      letter-spacing:.02em;
      box-shadow: 0 14px 30px rgba(37,99,235,.18);
      flex: 0 0 auto;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding: .65rem 1rem;
      border-radius: 999px;
      border: 1px solid transparent;
      color: #334155;
      font-weight: 700;
      transition: all .25s ease;
    }
    .nav-link:hover{
      color: var(--brand);
      background: #f8fbff;
      border-color: #dbeafe;
      transform: translateY(-1px);
    }
    .nav-link.active,
    .nav-link[aria-current="page"]{
      color: var(--brand);
      background: var(--brand-soft);
      border-color: #bfdbfe;
      box-shadow: 0 10px 24px rgba(37,99,235,.08);
    }
    .btn-primary,
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border-radius: 16px;
      font-weight: 700;
      transition: all .28s ease;
      border: 1px solid transparent;
      min-height: 46px;
      cursor: pointer;
      line-height: 1;
      white-space: nowrap;
    }
    .btn-primary{
      background: linear-gradient(135deg, var(--brand), #1d4ed8);
      color: #fff;
      box-shadow: 0 14px 30px rgba(37,99,235,.18);
    }
    .btn-primary:hover{
      transform: translateY(-1px);
      box-shadow: 0 18px 36px rgba(37,99,235,.24);
      filter: saturate(1.03);
    }
    .btn-secondary{
      background: #fff;
      color: var(--brand);
      border-color: #bfdbfe;
      box-shadow: 0 10px 26px rgba(15,23,42,.05);
    }
    .btn-secondary:hover{
      background: #eff6ff;
      transform: translateY(-1px);
      border-color: #93c5fd;
    }
    .footer-link{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      color:#475569;
      transition: all .22s ease;
      padding: .1rem 0;
    }
    .footer-link:hover{
      color: var(--brand);
      transform: translateX(2px);
    }
    .soft-divider{
      height:1px;
      background: linear-gradient(90deg, transparent, #dbeafe 18%, #cbd5e1 50%, #dbeafe 82%, transparent);
    }
    .card-surface{
      background:#fff;
      border:1px solid rgba(226,232,240,.95);
      border-radius: 28px;
      box-shadow: var(--shadow);
      transition: all .3s ease;
    }
    .card-surface:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
      border-color: #bfdbfe;
    }
    .hero-glow{
      position:absolute;
      inset: auto;
      border-radius: 999px;
      filter: blur(18px);
      pointer-events:none;
    }
    .hero-glow.glow-1{width: 280px; height: 280px; background: rgba(37,99,235,.12); top:-80px; right:-70px;}
    .hero-glow.glow-2{width: 220px; height: 220px; background: rgba(56,189,248,.14); bottom:-70px; left:-40px;}
    .pill-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.6rem .9rem;
      border-radius:999px;
      border:1px solid #dbeafe;
      background:#fff;
      color:#334155;
      font-weight:600;
      box-shadow: 0 8px 22px rgba(15,23,42,.04);
      transition: all .22s ease;
      white-space: nowrap;
    }
    .pill-chip:hover{
      border-color:#93c5fd;
      color: var(--brand);
      transform: translateY(-1px);
      background:#f8fbff;
    }
    .pill-chip.active{
      background: var(--brand);
      color:#fff;
      border-color: var(--brand);
      box-shadow: 0 12px 30px rgba(37,99,235,.18);
    }
    .metric-box{
      border:1px solid #e2e8f0;
      border-radius: 22px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 10px 28px rgba(15,23,42,.05);
    }
    .faq-item{
      border:1px solid #e2e8f0;
      border-radius: 24px;
      background:#fff;
      box-shadow: 0 12px 32px rgba(15,23,42,.05);
      overflow:hidden;
      transition: all .25s ease;
    }
    .faq-item:hover{border-color:#bfdbfe; box-shadow: 0 16px 38px rgba(15,23,42,.08);}
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      user-select:none;
    }
    .faq-item summary::-webkit-details-marker{display:none;}
    .faq-arrow{
      transition: transform .25s ease;
    }
    .faq-item[open] .faq-arrow{
      transform: rotate(180deg);
    }
    .sidebar-link{
      display:flex;
      align-items:flex-start;
      gap:.8rem;
      padding:1rem 1rem;
      border-radius: 18px;
      border:1px solid transparent;
      transition: all .25s ease;
      background:#fff;
    }
    .sidebar-link:hover{
      background:#f8fbff;
      border-color:#dbeafe;
      transform: translateY(-1px);
    }
    .sidebar-link.active{
      background: var(--brand-soft);
      border-color:#bfdbfe;
      box-shadow: 0 12px 26px rgba(37,99,235,.08);
    }
    .mobile-panel{
      border-top:1px solid #e2e8f0;
      background: rgba(255,255,255,.98);
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.45rem .8rem;
      border-radius:999px;
      background:#eff6ff;
      color: var(--brand);
      font-weight:700;
      border:1px solid #dbeafe;
      letter-spacing:.02em;
    }
    .section-title{
      color:#0f172a;
      letter-spacing:-.02em;
    }
    .section-lead{
      color: var(--muted);
      line-height: 1.85;
    }
    .focus-ring:focus-visible{
      outline:none;
      box-shadow: 0 0 0 4px rgba(59,130,246,.16);
    }
    @media (max-width: 767px){
      .desktop-nav{
        display:none !important;
      }
      .mobile-menu-btn{
        display:inline-flex !important;
      }
    }