/* roulang page: index */
:root{
      --bg: #f6f0ea;
      --bg-2: #fbf8f4;
      --panel: rgba(255,255,255,.82);
      --panel-strong: #ffffff;
      --text: #20162d;
      --muted: #6d627b;
      --line: rgba(85, 59, 126, .14);
      --line-strong: rgba(122, 63, 255, .25);
      --berry: #7a3fff;
      --berry-deep: #2d1846;
      --rose: #ff6f8f;
      --peach: #ffba86;
      --soft: #f2e9ff;
      --soft-2: #ffe7ec;
      --shadow: 0 22px 60px rgba(44, 26, 72, .10);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, system-ui, sans-serif;
      color: var(--text);
      background:
        linear-gradient(180deg, #faf7f2 0%, #f6f0ea 42%, #f2ebe5 100%);
      min-height: 100vh;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    body::before{
      content:"";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(68, 44, 98, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(68, 44, 98, 0.04) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
      opacity: .55;
      z-index: 0;
    }
    ::selection {
      background: rgba(122, 63, 255, .16);
      color: #1f1530;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input {
      font: inherit;
    }
    button {
      cursor: pointer;
    }
    .container-xl {
      width: min(1200px, calc(100vw - 2rem));
      margin: 0 auto;
    }
    .dock {
      position: fixed;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      width: min(1160px, calc(100vw - 1rem));
      z-index: 60;
      border: 1px solid rgba(121, 101, 155, .18);
      background: rgba(255, 255, 255, .86);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: var(--shadow);
    }
    .dock-link {
      position: relative;
      transition: color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
    }
    .dock-link:hover {
      transform: translateY(-1px);
      color: var(--berry-deep);
    }
    .dock-link.active {
      background: linear-gradient(135deg, rgba(122, 63, 255, .10), rgba(255, 111, 143, .10));
      color: var(--berry-deep);
      box-shadow: inset 0 0 0 1px rgba(122, 63, 255, .16);
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .52rem .8rem;
      border-radius: 999px;
      border: 1px solid rgba(122, 63, 255, .14);
      background: rgba(255,255,255,.82);
      color: var(--muted);
      font-size: .92rem;
      line-height: 1;
      transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease;
    }
    .chip:hover {
      border-color: rgba(122, 63, 255, .25);
      color: var(--berry-deep);
      transform: translateY(-1px);
    }
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      box-shadow: 0 14px 38px rgba(47, 29, 75, .06);
    }
    .panel-strong {
      background: var(--panel-strong);
      border: 1px solid rgba(92, 65, 128, .12);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
    }
    .section {
      position: relative;
      z-index: 1;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    .section-tight {
      padding-top: 2.2rem;
      padding-bottom: 2.2rem;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding: .4rem .75rem;
      border-radius: 999px;
      background: rgba(122, 63, 255, .08);
      color: var(--berry-deep);
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: 0;
    }
    .eyebrow::before {
      content: "";
      width: .45rem;
      height: .45rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--berry), var(--rose));
    }
    .section-title {
      font-size: clamp(1.8rem, 3.2vw, 2.55rem);
      line-height: 1.18;
      letter-spacing: 0;
      color: var(--berry-deep);
      font-weight: 800;
    }
    .section-copy {
      font-size: 1rem;
      line-height: 1.85;
      color: var(--muted);
      max-width: 54rem;
    }
    .headline {
      font-size: clamp(2.2rem, 4.8vw, 4.05rem);
      line-height: 1.12;
      letter-spacing: 0;
      color: #241536;
      font-weight: 800;
    }
    .headline span {
      background: linear-gradient(135deg, var(--berry), var(--rose));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .subhead {
      font-size: 1.06rem;
      line-height: 1.9;
      color: var(--muted);
      max-width: 38rem;
    }
    .cta-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .6rem;
      min-height: 48px;
      padding: .84rem 1.25rem;
      border-radius: 999px;
      border: 1px solid transparent;
      background: linear-gradient(135deg, var(--berry), var(--rose));
      color: #fff;
      font-weight: 700;
      box-shadow: 0 14px 28px rgba(122, 63, 255, .18);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .cta-primary:hover {
      transform: translateY(-1px);
      filter: saturate(1.04);
      box-shadow: 0 18px 36px rgba(122, 63, 255, .22);
    }
    .cta-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .6rem;
      min-height: 48px;
      padding: .84rem 1.2rem;
      border-radius: 999px;
      border: 1px solid rgba(122, 63, 255, .2);
      background: rgba(255,255,255,.74);
      color: var(--berry-deep);
      font-weight: 700;
      transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
    }
    .cta-secondary:hover {
      transform: translateY(-1px);
      background: rgba(244, 238, 255, .9);
      border-color: rgba(122, 63, 255, .28);
    }
    .metric {
      border-radius: 20px;
      border: 1px solid rgba(122, 63, 255, .12);
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(250,246,255,.96));
      box-shadow: 0 14px 28px rgba(44, 26, 72, .06);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .metric:hover, .card-hover:hover, .timeline-card:hover, .feedback-card:hover, .faq-card:hover {
      transform: translateY(-2px);
      border-color: rgba(122, 63, 255, .22);
      box-shadow: 0 18px 36px rgba(44, 26, 72, .08);
    }
    .card-hover,
    .timeline-card,
    .feedback-card,
    .faq-card {
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .dark-panel {
      background:
        linear-gradient(180deg, rgba(34, 18, 54, .98), rgba(23, 13, 38, .98));
      color: #f8f4ff;
      border: 1px solid rgba(218, 197, 255, .14);
      border-radius: var(--radius-xl);
      box-shadow: 0 24px 60px rgba(24, 14, 40, .35);
    }
    .dark-muted { color: rgba(242, 235, 255, .74); }
    .dark-line { border-color: rgba(232, 219, 255, .12); }
    .progress-track {
      height: 10px;
      border-radius: 999px;
      background: rgba(76, 56, 111, .16);
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--berry), var(--rose));
    }
    .faq-card summary {
      list-style: none;
    }
    .faq-card summary::-webkit-details-marker {
      display: none;
    }
    .faq-icon {
      display: inline-flex;
      width: 2rem;
      height: 2rem;
      border-radius: 999px;
      align-items: center;
      justify-content: center;
      background: rgba(122, 63, 255, .08);
      color: var(--berry-deep);
      flex: none;
    }
    .faq-card[open] .faq-icon {
      background: rgba(255, 111, 143, .12);
      color: #7e2948;
    }
    .faq-card[open] .faq-plus { display: none; }
    .faq-card:not([open]) .faq-minus { display: none; }
    .mobile-sheet {
      position: absolute;
      top: calc(100% + .65rem);
      left: .5rem;
      right: .5rem;
      border-radius: 22px;
      border: 1px solid rgba(122, 63, 255, .14);
      background: rgba(255,255,255,.96);
      box-shadow: 0 18px 36px rgba(44, 26, 72, .12);
      overflow: hidden;
    }
    .mobile-search {
      display: grid;
      gap: .7rem;
    }
    .soft-line {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(122, 63, 255, .16), transparent);
    }
    .badge-dot {
      width: .55rem;
      height: .55rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--berry), var(--rose));
      box-shadow: 0 0 0 4px rgba(122, 63, 255, .08);
      flex: none;
    }
    .mini-flow {
      position: relative;
    }
    .mini-flow::before {
      content: "";
      position: absolute;
      left: 1.3rem;
      top: 2.5rem;
      bottom: 2.4rem;
      width: 1px;
      background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08));
    }
    .step-node {
      width: .95rem;
      height: .95rem;
      border-radius: 999px;
      background: linear-gradient(135deg, #fff, #f0d6ff);
      box-shadow: 0 0 0 4px rgba(122, 63, 255, .15);
      flex: none;
      margin-top: .25rem;
    }
    .footer-link {
      color: var(--muted);
      transition: color .18s ease, transform .18s ease;
    }
    .footer-link:hover {
      color: var(--berry-deep);
      transform: translateY(-1px);
    }
    @media (max-width: 1024px) {
      .dock {
        width: min(1160px, calc(100vw - .85rem));
      }
      .section {
        padding-top: 3.2rem;
        padding-bottom: 3.2rem;
      }
    }
    @media (max-width: 640px) {
      .dock {
        top: 10px;
        width: calc(100vw - .6rem);
      }
      .section {
        padding-top: 2.7rem;
        padding-bottom: 2.7rem;
      }
      .headline {
        font-size: clamp(2.1rem, 9vw, 2.55rem);
      }
      .section-title {
        font-size: clamp(1.55rem, 7vw, 2rem);
      }
      .cta-primary,
      .cta-secondary {
        width: 100%;
      }
    }

/* roulang page: category1 */
:root{
      --bg: #f8f4ef;
      --panel: rgba(255,255,255,.82);
      --panel-strong: #ffffff;
      --text: #241536;
      --muted: #6d627b;
      --line: rgba(122,63,255,.12);
      --line-strong: rgba(122,63,255,.22);
      --brand: #7a3fff;
      --brand-2: #ff6f8f;
      --shadow: 0 18px 50px rgba(37,21,54,.08);
      --shadow-hover: 0 22px 70px rgba(122,63,255,.14);
      --radius: 24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, system-ui, sans-serif;
      background:
        radial-gradient(circle at 18% 16%, rgba(122,63,255,.09), transparent 24%),
        radial-gradient(circle at 84% 10%, rgba(255,111,143,.10), transparent 22%),
        linear-gradient(180deg, #fbf8f5 0%, #f6f1ec 100%);
      color:var(--text);
      line-height:1.85;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(122,63,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,63,255,.025) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity:.45;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.85));
    }
    a{color:inherit;text-decoration:none}
    button,input,select{font:inherit}
    img{max-width:100%;display:block}
    ::selection{background:rgba(122,63,255,.18);color:#241536}
    .container-xl{max-width:1220px;margin:0 auto;padding:0 20px}
    .dock-wrap{padding:18px 0 0}
    .dock{
      background:rgba(255,255,255,.82);
      backdrop-filter: blur(12px);
      border:1px solid rgba(122,63,255,.12);
      box-shadow: var(--shadow);
    }
    .dock-link{
      transition:all .22s ease;
      color:#51445d;
    }
    .dock-link:hover{
      background:rgba(122,63,255,.07);
      color:var(--brand);
      transform:translateY(-1px);
    }
    .dock-link.active{
      background:linear-gradient(135deg, rgba(122,63,255,.12), rgba(255,111,143,.12));
      color:#5d2fd2;
      box-shadow:inset 0 0 0 1px rgba(122,63,255,.12);
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      color:#fff;
      box-shadow: 0 16px 34px rgba(122,63,255,.18);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      filter:saturate(1.02);
      box-shadow: 0 20px 42px rgba(122,63,255,.22);
    }
    .btn-secondary{
      background:rgba(255,255,255,.82);
      color:#4c3272;
      border:1px solid rgba(122,63,255,.16);
      transition:all .2s ease;
    }
    .btn-secondary:hover{
      background:#f4ecff;
      border-color:rgba(122,63,255,.28);
      transform:translateY(-1px);
    }
    .card{
      background:rgba(255,255,255,.86);
      border:1px solid rgba(122,63,255,.12);
      box-shadow:var(--shadow);
      border-radius:24px;
    }
    .card-hover{
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .card-hover:hover{
      transform:translateY(-3px);
      border-color:rgba(122,63,255,.24);
      box-shadow:var(--shadow-hover);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.38rem .75rem;
      font-size:.78rem;
      line-height:1;
      font-weight:600;
      letter-spacing:.01em;
      background:rgba(122,63,255,.08);
      color:#5d2fd2;
      border:1px solid rgba(122,63,255,.12);
    }
    .badge-rose{
      background:rgba(255,111,143,.09);
      color:#d73c67;
      border-color:rgba(255,111,143,.16);
    }
    .section{
      padding:72px 0;
    }
    .section-tight{padding:48px 0}
    .heading{
      color:#241536;
      letter-spacing:-0.02em;
    }
    .subtle{color:var(--muted)}
    .section-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(122,63,255,.16), transparent);
    }
    .grid-dash{
      background-image:
        linear-gradient(rgba(122,63,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,63,255,.08) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .glow{
      position:absolute;
      filter:blur(40px);
      opacity:.8;
      pointer-events:none;
    }
    .focus-ring:focus{
      outline:none;
      box-shadow:0 0 0 4px rgba(122,63,255,.14);
      border-color:rgba(122,63,255,.32);
    }
    .timeline-line{
      position:relative;
    }
    .timeline-line::before{
      content:"";
      position:absolute;
      left:17px;
      top:18px;
      bottom:18px;
      width:2px;
      background:linear-gradient(180deg, rgba(122,63,255,.36), rgba(255,111,143,.18));
    }
    .faq-item[open] .faq-icon{
      transform:rotate(45deg);
    }
    .faq-panel{
      transition:max-height .22s ease, opacity .22s ease, transform .22s ease;
    }
    .mobile-menu{
      display:none;
    }
    .mobile-menu.show{
      display:block;
    }
    .sticky-aside{
      top:112px;
    }
    @media (max-width: 1023px){
      .section{padding:56px 0}
      .sticky-aside{top:92px}
    }
    @media (max-width: 639px){
      .section{padding:44px 0}
      .container-xl{padding:0 16px}
      .dock-wrap{padding-top:12px}
    }