/* roulang page: index */
:root{
      --bg:#090712;
      --bg-2:#120B1F;
      --bg-3:#1A102B;
      --text:#F7EEFF;
      --muted:#BFAFD7;
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(236,72,153,.34);
      --accent-1:#7C3AED;
      --accent-2:#EC4899;
      --accent-3:#F97316;
      --cyan:#22D3EE;
      --shadow:0 24px 70px rgba(124,58,237,.18);
      --radius:28px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 12%, rgba(124,58,237,.26), transparent 24%),
        radial-gradient(circle at 85% 15%, rgba(236,72,153,.20), transparent 22%),
        radial-gradient(circle at 75% 82%, rgba(249,115,22,.14), transparent 18%),
        linear-gradient(180deg, #090712 0%, #0d0a18 42%, #090712 100%);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(to bottom, rgba(255,255,255,.022), rgba(255,255,255,0)),
        linear-gradient(120deg, rgba(255,255,255,.02) 0 1px, transparent 1px 100%);
      background-size:auto, 140px 140px;
      opacity:.55;
      mix-blend-mode:screen;
    }
    a{color:inherit;text-decoration:none}
    a:hover{color:#fff}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(236,72,153,.35);color:#fff}
    .site-blur{
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }
    .shell-card{
      background:linear-gradient(180deg, rgba(24,15,41,.88), rgba(13,10,22,.92));
      border:1px solid rgba(255,255,255,.09);
      box-shadow:var(--shadow);
    }
    .glow-border{
      position:relative;
    }
    .glow-border::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(135deg, rgba(124,58,237,.85), rgba(236,72,153,.72), rgba(249,115,22,.62));
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      pointer-events:none;
      opacity:.95;
    }
    .nav-link{
      position:relative;
      color:rgba(247,238,255,.78);
      transition:all .2s ease;
    }
    .nav-link:hover,
    .nav-link:focus{
      color:#fff;
      text-shadow:0 0 20px rgba(236,72,153,.28);
    }
    .nav-link.active{
      color:#fff;
      background:rgba(255,255,255,.06);
      box-shadow:0 0 0 1px rgba(236,72,153,.2), inset 0 0 18px rgba(124,58,237,.15);
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      bottom:-12px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
      box-shadow:0 0 14px rgba(236,72,153,.55);
    }
    .btn-gradient{
      background:linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 56%, var(--accent-3) 100%);
      box-shadow:0 14px 34px rgba(236,72,153,.22), inset 0 1px 0 rgba(255,255,255,.18);
      transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
    }
    .btn-gradient:hover,.btn-gradient:focus{
      transform:translateY(-2px);
      filter:saturate(1.06) brightness(1.04);
      box-shadow:0 18px 42px rgba(236,72,153,.28), 0 0 0 1px rgba(255,255,255,.06) inset;
    }
    .btn-ghost{
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .btn-ghost:hover,.btn-ghost:focus{
      transform:translateY(-2px);
      border-color:rgba(236,72,153,.34);
      background:rgba(255,255,255,.06);
      box-shadow:0 0 0 1px rgba(236,72,153,.16), 0 18px 36px rgba(124,58,237,.14);
    }
    .pill{
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      color:rgba(247,238,255,.82);
    }
    .section-kicker{
      letter-spacing:.18em;
      text-transform:uppercase;
      font-size:.72rem;
      color:#E9D5FF;
    }
    .title-accent{
      display:inline-block;
      background:linear-gradient(90deg, #fff 0%, #F3D7FF 16%, #FCA5F5 52%, #FDBA74 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .title-line{
      width:72px;
      height:3px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
      box-shadow:0 0 18px rgba(236,72,153,.36);
    }
    .card{
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(24,15,41,.88), rgba(12,10,20,.92));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 18px 44px rgba(5,6,17,.34);
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .card:hover{
      transform:translateY(-4px);
      border-color:rgba(236,72,153,.26);
      box-shadow:0 22px 50px rgba(124,58,237,.18);
    }
    .mini-card{
      border-radius:24px;
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.08);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .78rem;
      border-radius:999px;
      font-size:.82rem;
      line-height:1;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.09);
      color:rgba(247,238,255,.88);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    .badge-accent{
      background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(236,72,153,.16));
      border-color:rgba(236,72,153,.22);
      box-shadow:0 0 0 1px rgba(124,58,237,.08), inset 0 1px 0 rgba(255,255,255,.04);
    }
    .badge-soft{
      background:rgba(34,211,238,.10);
      border-color:rgba(34,211,238,.18);
      color:#C6F7FF;
    }
    .grid-line{
      background:linear-gradient(90deg, rgba(124,58,237,.20), rgba(236,72,153,.18), rgba(249,115,22,.18));
      height:1px;
    }
    details.faq-item{
      border-radius:24px;
      background:linear-gradient(180deg, rgba(24,15,41,.86), rgba(12,10,20,.94));
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      transition:border-color .2s ease, box-shadow .2s ease;
    }
    details.faq-item[open]{
      border-color:rgba(236,72,153,.30);
      box-shadow:0 0 0 1px rgba(236,72,153,.10), 0 22px 46px rgba(124,58,237,.14);
    }
    summary{
      list-style:none;
      cursor:pointer;
    }
    summary::-webkit-details-marker{display:none}
    .field{
      width:100%;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      color:#fff;
      padding:.95rem 1rem;
      outline:none;
      transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .field:focus{
      border-color:rgba(236,72,153,.42);
      box-shadow:0 0 0 4px rgba(236,72,153,.12);
      background:rgba(255,255,255,.06);
    }
    .timeline-dot{
      width:1rem;
      height:1rem;
      border-radius:999px;
      background:linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-3));
      box-shadow:0 0 0 6px rgba(236,72,153,.10), 0 0 18px rgba(236,72,153,.28);
      flex:0 0 auto;
    }
    .soft-glow{
      position:absolute;
      inset:auto;
      border-radius:999px;
      filter:blur(30px);
      opacity:.55;
      pointer-events:none;
    }

/* roulang page: category1 */
:root{
      --bg:#090712;
      --bg2:#120B1F;
      --bg3:#1A102B;
      --line:rgba(255,255,255,.10);
      --line2:rgba(236,72,153,.28);
      --text:rgba(255,255,255,.94);
      --muted:rgba(255,255,255,.64);
      --soft:rgba(255,255,255,.08);
      --soft2:rgba(255,255,255,.05);
      --violet:#7C3AED;
      --pink:#EC4899;
      --orange:#F97316;
      --cyan:#22D3EE;
      --radius:28px;
    }
    html{scroll-behavior:smooth;}
    body{
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
        radial-gradient(circle at 15% 10%, rgba(124,58,237,.30), transparent 24%),
        radial-gradient(circle at 85% 8%, rgba(236,72,153,.22), transparent 22%),
        radial-gradient(circle at 70% 22%, rgba(34,211,238,.10), transparent 24%),
        linear-gradient(180deg, #090712 0%, #0d0a18 34%, #090712 100%);
      color: var(--text);
      letter-spacing: .1px;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 18px 18px;
      opacity:.18;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.22));
    }
    ::selection{
      background: rgba(236,72,153,.35);
      color: #fff;
    }
    .shell-card{
      background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 18px 60px rgba(8,7,17,.45);
      backdrop-filter: blur(18px);
    }
    .glow-border{
      position: relative;
      isolation:isolate;
    }
    .glow-border::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius: inherit;
      padding:1px;
      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(236,72,153,.9), rgba(249,115,22,.8));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events:none;
      opacity:.72;
    }
    .nav-link{
      color: rgba(255,255,255,.72);
      border: 1px solid transparent;
      transition: .22s ease;
    }
    .nav-link:hover{
      color:#fff;
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.08);
      transform: translateY(-1px);
    }
    .nav-link.active{
      color:#fff;
      background: linear-gradient(135deg, rgba(124,58,237,.34), rgba(236,72,153,.24));
      border-color: rgba(236,72,153,.35);
      box-shadow: 0 0 0 1px rgba(236,72,153,.16), 0 0 30px rgba(236,72,153,.13);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.80);
      transition:.22s ease;
      white-space: nowrap;
    }
    .badge:hover{
      border-color: rgba(236,72,153,.38);
      background: rgba(255,255,255,.08);
      color:#fff;
      transform: translateY(-1px);
    }
    .btn-primary{
      background: linear-gradient(135deg, var(--violet), var(--pink), var(--orange));
      box-shadow: 0 14px 34px rgba(124,58,237,.25), 0 0 22px rgba(236,72,153,.12);
    }
    .btn-primary:hover{
      transform: translateY(-2px);
      filter: brightness(1.06);
      box-shadow: 0 18px 40px rgba(124,58,237,.32), 0 0 30px rgba(236,72,153,.16);
    }
    .btn-secondary{
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.14);
      color:#fff;
    }
    .btn-secondary:hover{
      background: rgba(255,255,255,.08);
      border-color: rgba(236,72,153,.32);
      transform: translateY(-2px);
    }
    .section-kicker{
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(236,72,153,.84);
    }
    .headline-line{
      height: 1px;
      background: linear-gradient(90deg, rgba(236,72,153,.0), rgba(236,72,153,.9), rgba(124,58,237,.4), rgba(236,72,153,.0));
    }
    .step-dot{
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: linear-gradient(135deg, #fff, rgba(255,255,255,.45));
      box-shadow: 0 0 0 6px rgba(236,72,153,.12), 0 0 22px rgba(236,72,153,.3);
    }
    .step-line{
      background: linear-gradient(180deg, rgba(236,72,153,.55), rgba(124,58,237,.25));
    }
    details.faq-card{
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      border-radius: 24px;
      overflow: hidden;
      transition: .22s ease;
    }
    details.faq-card[open]{
      border-color: rgba(236,72,153,.34);
      box-shadow: 0 0 0 1px rgba(236,72,153,.12), 0 16px 40px rgba(124,58,237,.14);
    }
    details.faq-card summary{
      list-style:none;
      cursor:pointer;
      user-select:none;
    }
    details.faq-card summary::-webkit-details-marker{display:none;}
    .focus-ring:focus-visible{
      outline: none;
      box-shadow: 0 0 0 2px rgba(34,211,238,.5), 0 0 0 5px rgba(236,72,153,.18);
    }
    .card-hover{
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .card-hover:hover{
      transform: translateY(-3px);
      border-color: rgba(236,72,153,.30);
      box-shadow: 0 18px 40px rgba(8,7,17,.45), 0 0 26px rgba(236,72,153,.10);
    }
    .soft-grid{
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 24px 24px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.08));
    }
    @media (max-width: 1023px){
      .mobile-panel{
        backdrop-filter: blur(18px);
      }
    }

/* roulang page: category2 */
:root{
      --bg:#090712;
      --bg2:#120B1F;
      --panel:rgba(18,11,31,.84);
      --panel-strong:rgba(10,8,22,.96);
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(255,255,255,.16);
      --text:rgba(255,255,255,.94);
      --muted:rgba(255,255,255,.66);
      --muted-2:rgba(255,255,255,.46);
      --grad:linear-gradient(135deg,#7C3AED 0%,#EC4899 52%,#F97316 100%);
      --grad-soft:linear-gradient(135deg,rgba(124,58,237,.20),rgba(236,72,153,.18),rgba(249,115,22,.16));
      --radius:28px;
      --radius-lg:34px;
      --shadow:0 24px 90px rgba(236,72,153,.14);
    }
    html{scroll-behavior:smooth}
    body{
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
        radial-gradient(circle at 12% 12%, rgba(124,58,237,.20), transparent 24%),
        radial-gradient(circle at 86% 8%, rgba(236,72,153,.18), transparent 24%),
        radial-gradient(circle at 88% 78%, rgba(249,115,22,.14), transparent 20%),
        linear-gradient(180deg, #090712 0%, #110a1d 56%, #090712 100%);
      color: var(--text);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 18px 18px;
      opacity:.45;
      mix-blend-mode:screen;
      z-index:0;
    }
    ::selection{background:rgba(236,72,153,.35);color:#fff}
    a{transition: all .25s ease}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    .shell-card{
      position:relative;
      background: linear-gradient(180deg, rgba(24,15,40,.92), rgba(12,10,24,.88));
      border:1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      overflow:hidden;
    }
    .glow-border{
      position:relative;
      isolation:isolate;
    }
    .glow-border::before{
      content:"";
      position:absolute;
      inset:0;
      padding:1px;
      border-radius:inherit;
      background: linear-gradient(135deg, rgba(124,58,237,.90), rgba(236,72,153,.72), rgba(249,115,22,.62));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events:none;
      opacity:.92;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05);
      color:rgba(255,255,255,.82);
      padding:.62rem 1rem;
      line-height:1;
      transition: all .22s ease;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .badge:hover{
      background:rgba(255,255,255,.09);
      color:#fff;
      transform: translateY(-1px);
      border-color: rgba(236,72,153,.28);
      box-shadow: 0 0 0 1px rgba(236,72,153,.12), 0 16px 30px rgba(236,72,153,.10);
    }
    .nav-link{
      position:relative;
      color:rgba(255,255,255,.74);
      border:1px solid transparent;
      transition: all .22s ease;
    }
    .nav-link:hover{
      color:#fff;
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.08);
    }
    .nav-link.active{
      color:#fff;
      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(236,72,153,.92), rgba(249,115,22,.82));
      box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 16px 36px rgba(236,72,153,.22);
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      bottom:-9px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, #c4b5fd, #f472b6, #fb923c);
      box-shadow:0 0 14px rgba(236,72,153,.55);
    }
    .text-gradient{
      background: linear-gradient(135deg, #a78bfa 0%, #ec4899 48%, #fb923c 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .section-kicker{
      letter-spacing:.24em;
      text-transform:uppercase;
      color:rgba(255,255,255,.44);
      font-size:.78rem;
      font-weight:700;
    }
    .section-title{
      position:relative;
      display:flex;
      align-items:center;
      gap:14px;
    }
    .section-title::before{
      content:"";
      width:44px;
      height:4px;
      border-radius:999px;
      background:linear-gradient(90deg,#7C3AED,#EC4899,#F97316);
      box-shadow:0 0 16px rgba(236,72,153,.36);
      flex:none;
    }
    .focus-ring:focus{
      outline:none;
      box-shadow:0 0 0 2px rgba(168,85,247,.55), 0 0 0 5px rgba(236,72,153,.16);
    }
    .grid-rail{
      position:relative;
    }
    .grid-rail::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:22px;
      height:1px;
      background: linear-gradient(90deg, rgba(124,58,237,.05), rgba(236,72,153,.28), rgba(249,115,22,.08));
    }
    .progress-dot{
      box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 0 18px rgba(236,72,153,.22);
    }
    .faq-panel{
      transition: all .25s ease;
    }
    .faq-item[aria-expanded="true"] .faq-head{
      border-color: rgba(236,72,153,.34);
      background: rgba(236,72,153,.09);
      box-shadow: 0 0 0 1px rgba(236,72,153,.12), 0 16px 36px rgba(236,72,153,.08);
    }
    .mini-track{
      height:6px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(124,58,237,.70), rgba(236,72,153,.85), rgba(249,115,22,.82));
      box-shadow:0 0 20px rgba(236,72,153,.18);
    }
    .field{
      width:100%;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      color:#fff;
      padding:14px 16px;
      transition: all .2s ease;
    }
    .field::placeholder{color:rgba(255,255,255,.34)}
    .field:focus{
      outline:none;
      border-color:rgba(236,72,153,.42);
      box-shadow:0 0 0 3px rgba(236,72,153,.14);
      background:rgba(255,255,255,.06);
    }
    .noise-overlay{
      background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.05) 0, transparent 12%),
        radial-gradient(circle at 80% 8%, rgba(255,255,255,.04) 0, transparent 10%),
        radial-gradient(circle at 76% 76%, rgba(255,255,255,.04) 0, transparent 12%);
      opacity:.7;
      pointer-events:none;
    }
    @media (max-width: 1024px){
      .hero-grid{grid-template-columns: 1fr}
    }
    @media (max-width: 768px){
      .section-title::before{width:32px}
    }