/* roulang page: index */
:root{
      --bg:#fbf7ef;
      --paper:#fffaf1;
      --ink:#241a2e;
      --muted:#695b76;
      --line:rgba(109,40,217,.16);
      --line-strong:rgba(236,72,153,.22);
      --accent:#6d28d9;
      --accent2:#ec4899;
      --accent3:#f97316;
      --accent4:#fbbf24;
      --dark:#17111f;
      --dark2:#24152f;
      --shadow:0 18px 60px rgba(80,40,120,.10);
      --shadow-strong:0 24px 80px rgba(236,72,153,.18);
      --radius-lg:32px;
      --radius-md:24px;
      --radius-sm:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(124,58,237,.09), transparent 24%),
        radial-gradient(circle at top right, rgba(236,72,153,.08), transparent 22%),
        linear-gradient(180deg, #fdfaf4 0%, var(--bg) 42%, #f6efe4 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(to bottom, rgba(251,247,239,.16), rgba(251,247,239,0) 24%),
        repeating-linear-gradient(90deg, rgba(109,40,217,.026) 0 1px, transparent 1px 92px),
        repeating-linear-gradient(0deg, rgba(109,40,217,.018) 0 1px, transparent 1px 92px);
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.3) 55%, transparent 100%);
      z-index:-1;
    }
    a,button,input,select,textarea{transition:all .18s ease}
    a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
      outline:2px solid rgba(109,40,217,.75);
      outline-offset:2px;
    }
    ::selection{background:rgba(236,72,153,.18); color:var(--ink)}
    .container-shell{max-width:1240px;margin:0 auto;padding:0 20px}
    @media (min-width:640px){.container-shell{padding:0 24px}}
    @media (min-width:1024px){.container-shell{padding:0 32px}}
    .nav-shell{
      backdrop-filter:blur(14px);
      background:rgba(255,250,241,.82);
      border-bottom:1px solid rgba(109,40,217,.12);
      box-shadow:0 10px 40px rgba(54,26,89,.06);
    }
    .nav-link{
      position:relative;
      color:var(--ink);
      text-decoration:none;
      font-size:14px;
      font-weight:650;
      letter-spacing:0;
      padding:.6rem .2rem;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:.2rem;
      width:100%;
      height:2px;
      border-radius:999px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .18s ease;
      background:linear-gradient(90deg,var(--accent),var(--accent2));
    }
    .nav-link:hover::after,
    .nav-link[aria-current="page"]::after{transform:scaleX(1)}
    .nav-link:hover{color:var(--accent)}
    .brand-mark{
      width:34px;height:34px;border-radius:12px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.12) 38%, transparent 40%),
        linear-gradient(135deg, rgba(109,40,217,1), rgba(236,72,153,1));
      box-shadow:0 12px 30px rgba(109,40,217,.22), inset 0 1px 0 rgba(255,255,255,.3);
      position:relative;
      flex:none;
    }
    .brand-mark::before,
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:8px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.35);
    }
    .brand-mark::after{
      inset:14px;
      background:rgba(255,255,255,.18);
      border-radius:50%;
      border:none;
    }
    .search-shell{
      min-width:260px;
      background:rgba(255,255,255,.9);
      border:1px solid rgba(109,40,217,.16);
      border-radius:999px;
      box-shadow:0 8px 24px rgba(80,40,120,.08);
    }
    .search-shell:focus-within{
      border-color:rgba(109,40,217,.44);
      box-shadow:0 0 0 4px rgba(109,40,217,.10), 0 10px 30px rgba(80,40,120,.08);
    }
    .search-shell input{
      background:transparent;
      border:none;
      outline:none;
      width:100%;
      color:var(--ink);
      font-size:14px;
    }
    .search-shell input::placeholder{color:#897a97}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      padding:.45rem .8rem;
      font-size:12px;
      font-weight:700;
      letter-spacing:0;
      line-height:1;
      white-space:nowrap;
    }
    .badge-soft{
      color:#5c2dd5;
      background:rgba(109,40,217,.08);
      border:1px solid rgba(109,40,217,.12);
    }
    .badge-hot{
      color:#8f1f58;
      background:rgba(236,72,153,.11);
      border:1px solid rgba(236,72,153,.16);
    }
    .badge-warm{
      color:#8b4b00;
      background:rgba(251,191,36,.16);
      border:1px solid rgba(251,191,36,.22);
    }
    .badge-dark{
      color:#f8f0ff;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.14);
    }
    .cta-primary,
    .cta-secondary,
    .cta-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      font-weight:700;
      letter-spacing:0;
      text-decoration:none;
      border:1px solid transparent;
      min-height:46px;
      padding:.85rem 1.2rem;
      line-height:1;
    }
    .cta-primary{
      color:white;
      background:linear-gradient(135deg, var(--accent2), var(--accent3));
      box-shadow:var(--shadow-strong);
    }
    .cta-primary:hover{
      transform:translateY(-2px);
      filter:brightness(1.03);
      box-shadow:0 22px 70px rgba(236,72,153,.24);
    }
    .cta-secondary{
      color:var(--ink);
      background:rgba(255,250,241,.88);
      border-color:rgba(109,40,217,.18);
      box-shadow:0 12px 30px rgba(80,40,120,.08);
    }
    .cta-secondary:hover{
      transform:translateY(-2px);
      background:#f6efff;
      border-color:rgba(109,40,217,.32);
    }
    .cta-ghost{
      color:var(--ink);
      background:transparent;
      border-color:rgba(109,40,217,.12);
    }
    .cta-ghost:hover{
      background:rgba(109,40,217,.06);
      border-color:rgba(109,40,217,.24);
      transform:translateY(-1px);
    }
    .hero-stage{
      position:relative;
      overflow:hidden;
      border-radius:clamp(28px,4vw,40px);
      background:
        radial-gradient(circle at 20% 18%, rgba(236,72,153,.22), transparent 24%),
        radial-gradient(circle at 84% 8%, rgba(109,40,217,.35), transparent 20%),
        linear-gradient(135deg, rgba(23,17,31,1), rgba(34,19,51,1) 58%, rgba(53,22,73,1));
      color:#f9f2e7;
      box-shadow:0 30px 120px rgba(23,17,31,.28);
    }
    .hero-stage::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(circle at 20% 20%, rgba(236,72,153,.24), transparent 18%),
        radial-gradient(circle at 78% 10%, rgba(251,191,36,.20), transparent 16%),
        linear-gradient(115deg, rgba(255,255,255,.08), rgba(255,255,255,0) 30%, rgba(255,255,255,.04) 60%, rgba(255,255,255,0));
      pointer-events:none;
      mix-blend-mode:screen;
    }
    .paper-card{
      border:1px solid rgba(109,40,217,.14);
      background:rgba(255,250,241,.84);
      box-shadow:var(--shadow);
      border-radius:var(--radius-md);
      backdrop-filter:blur(8px);
    }
    .paper-card:hover{
      transform:translateY(-2px);
      box-shadow:0 22px 70px rgba(80,40,120,.12);
      border-color:rgba(109,40,217,.24);
    }
    .dark-card{
      border-radius:var(--radius-md);
      background:linear-gradient(180deg, rgba(30,20,43,.97), rgba(21,16,31,.98));
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 18px 60px rgba(10,6,17,.36);
      color:#f8f0e6;
    }
    .dark-card:hover{
      transform:translateY(-2px);
      box-shadow:0 22px 74px rgba(10,6,17,.46);
      border-color:rgba(236,72,153,.22);
    }
    .section-title{
      font-size:clamp(28px,4vw,42px);
      line-height:1.08;
      letter-spacing:0;
      font-weight:900;
      color:var(--ink);
    }
    .section-sub{
      color:var(--muted);
      font-size:17px;
      line-height:1.8;
      max-width:70ch;
    }
    .soft-list li{
      display:flex;
      align-items:flex-start;
      gap:.7rem;
      padding:.75rem 0;
      border-bottom:1px solid rgba(109,40,217,.10);
    }
    .soft-list li:last-child{border-bottom:none}
    .check-dot{
      width:22px;height:22px;border-radius:999px;
      flex:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(109,40,217,.09);
      color:var(--accent);
      margin-top:.1rem;
      box-shadow:inset 0 0 0 1px rgba(109,40,217,.08);
    }
    .list-link{
      display:block;
      text-decoration:none;
      color:var(--ink);
      border-bottom:1px solid rgba(109,40,217,.10);
      padding:1rem 0;
    }
    .list-link:hover{color:var(--accent); transform:translateX(2px)}
    .list-link:last-child{border-bottom:none}
    .tiny-note{
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
    }
    .meter{
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.09);
      overflow:hidden;
    }
    .meter > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--accent2), var(--accent3));
      width:82%;
    }
    details.faq{
      border:1px solid rgba(109,40,217,.12);
      border-radius:22px;
      background:rgba(255,250,241,.88);
      box-shadow:0 12px 34px rgba(80,40,120,.08);
      overflow:hidden;
    }
    details.faq[open]{border-color:rgba(109,40,217,.24)}
    details.faq summary{
      list-style:none;
      cursor:pointer;
      padding:1.1rem 1.2rem;
      font-weight:700;
      color:var(--ink);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    details.faq summary::-webkit-details-marker{display:none}
    details.faq summary .arrow{
      width:34px;height:34px;border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;
      background:rgba(109,40,217,.08);
      color:var(--accent);
      flex:none;
      transition:transform .18s ease;
    }
    details.faq[open] summary .arrow{transform:rotate(180deg)}
    details.faq .faq-body{
      padding:0 1.2rem 1.15rem;
      color:var(--muted);
      font-size:15px;
      line-height:1.85;
    }
    .input-shell{
      width:100%;
      border-radius:18px;
      border:1px solid rgba(109,40,217,.16);
      background:rgba(255,250,241,.92);
      color:var(--ink);
      padding:.95rem 1rem;
      min-height:48px;
      box-shadow:0 10px 26px rgba(80,40,120,.08);
    }
    .input-shell:focus{
      border-color:rgba(109,40,217,.46);
      box-shadow:0 0 0 4px rgba(109,40,217,.10), 0 10px 26px rgba(80,40,120,.08);
    }
    .field-label{
      font-size:13px;
      color:var(--muted);
      font-weight:650;
      margin-bottom:.45rem;
      display:block;
    }
    .footer-link{
      color:rgba(249,242,231,.88);
      text-decoration:none;
      font-size:14px;
      font-weight:650;
    }
    .footer-link:hover{color:#fff}
    .page-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      padding:.55rem .85rem;
      font-size:12px;
      font-weight:700;
      letter-spacing:0;
      background:rgba(255,255,255,.08);
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
    }
    .mobile-drawer{
      border-top:1px solid rgba(109,40,217,.12);
      background:rgba(255,250,241,.98);
      box-shadow:0 20px 60px rgba(80,40,120,.12);
    }
    .mobile-drawer a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:1rem 0;
      color:var(--ink);
      font-weight:700;
      text-decoration:none;
      border-bottom:1px solid rgba(109,40,217,.10);
    }
    .mobile-drawer a:last-child{border-bottom:none}
    .tag-line{
      position:relative;
      display:inline-block;
      padding:0 .2rem;
    }
    .tag-line::after{
      content:"";
      position:absolute;
      left:-.04rem;
      right:-.04rem;
      bottom:.15rem;
      height:.5rem;
      background:linear-gradient(90deg, rgba(251,191,36,.42), rgba(236,72,153,.25));
      z-index:-1;
      border-radius:999px;
    }
    @media (max-width:767px){
      .section-title{font-size:30px}
      .section-sub{font-size:16px}
    }

/* roulang page: category1 */
:root{
      --bg: #fbf7ef;
      --bg-soft: #f6efe4;
      --ink: #241a2e;
      --ink-soft: rgba(36,26,46,.72);
      --violet: #7c3aed;
      --violet-deep: #17111f;
      --pink: #ec4899;
      --amber: #f97316;
      --line: rgba(109,40,217,.14);
      --shadow: 0 18px 60px rgba(80, 40, 120, .10);
      --radius-xl: 32px;
      --radius-lg: 24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 12% 8%, rgba(236,72,153,.08), transparent 22%),
        radial-gradient(circle at 88% 0%, rgba(124,58,237,.08), transparent 24%),
        linear-gradient(180deg, #fbf7ef 0%, #fbf7ef 48%, #f8f1e7 100%);
      overflow-x:hidden;
    }
    body::selection{background: rgba(124,58,237,.18)}
    a{color:inherit;text-decoration:none;transition:all .25s ease}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    .container-shell{
      width:min(1240px, calc(100% - 2rem));
      margin-inline:auto;
    }
    .brand-mark{
      width:1.15rem;height:1.15rem;border-radius:.38rem;
      background: linear-gradient(135deg, #7c3aed 0%, #ec4899 55%, #f97316 100%);
      box-shadow: 0 0 0 6px rgba(124,58,237,.12), 0 0 18px rgba(236,72,153,.22);
      position:relative;
      flex:0 0 auto;
    }
    .brand-mark::after{
      content:"";
      position:absolute;inset:.24rem;
      border:1px solid rgba(255,255,255,.68);
      border-radius:.26rem;
    }
    .nav-link{
      position:relative;
      color:rgba(36,26,46,.72);
      font-weight:700;
      letter-spacing:.01em;
      padding:.35rem 0;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-.52rem;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--violet) 0%, var(--pink) 100%);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .28s ease;
    }
    .nav-link:hover,.nav-link[aria-current="page"]{color:var(--ink)}
    .nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
    .footer-link{
      color:rgba(255,255,255,.70);
      position:relative;
      width:fit-content;
    }
    .footer-link:hover{color:#fff;transform:translateX(2px)}
    .badge{
      display:inline-flex;align-items:center;gap:.45rem;
      border-radius:999px;
      padding:.5rem .85rem;
      font-size:.78rem;
      line-height:1;
      font-weight:800;
      letter-spacing:.08em;
      white-space:nowrap;
    }
    .badge-soft{
      background:rgba(124,58,237,.10);
      color:var(--violet);
      border:1px solid rgba(124,58,237,.16);
    }
    .badge-dark{
      background:rgba(255,255,255,.08);
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
    }
    .surface{
      background:rgba(255,255,255,.84);
      border:1px solid rgba(109,40,217,.12);
      box-shadow:var(--shadow);
      border-radius:var(--radius-xl);
      backdrop-filter:blur(10px);
    }
    .surface-strong{
      background:linear-gradient(180deg, rgba(23,17,31,.96), rgba(27,19,38,.94));
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 24px 80px rgba(12,7,18,.36);
      border-radius:34px;
      backdrop-filter:blur(10px);
    }
    .btn-primary{
      background:linear-gradient(135deg, #7c3aed 0%, #ec4899 54%, #f97316 100%);
      color:#fff;
      box-shadow:0 18px 38px rgba(236,72,153,.26);
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 22px 46px rgba(236,72,153,.34);
      filter:saturate(1.06);
    }
    .btn-secondary{
      background:rgba(255,255,255,.88);
      color:var(--ink);
      border:1px solid rgba(124,58,237,.16);
    }
    .btn-secondary:hover{
      background:#f4edff;
      border-color:rgba(124,58,237,.28);
      transform:translateY(-1px);
    }
    .ghost-btn{
      background:rgba(255,255,255,.1);
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
    }
    .ghost-btn:hover{
      background:rgba(255,255,255,.16);
      transform:translateY(-1px);
    }
    .input-shell{
      background:rgba(255,255,255,.92);
      border:1px solid rgba(124,58,237,.16);
      border-radius:999px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
      transition:all .25s ease;
    }
    .input-shell:focus-within{
      border-color:rgba(124,58,237,.54);
      box-shadow:0 0 0 4px rgba(124,58,237,.12), inset 0 1px 0 rgba(255,255,255,.68);
    }
    .mini-input{
      background:transparent;
      border:0;
      outline:none;
      color:var(--ink);
      width:100%;
    }
    .mini-input::placeholder{color:rgba(36,26,46,.48)}
    .chip{
      display:inline-flex;align-items:center;gap:.4rem;
      border-radius:999px;
      padding:.48rem .8rem;
      font-size:.8rem;
      font-weight:700;
      border:1px solid rgba(109,40,217,.14);
      background:rgba(255,255,255,.74);
      color:rgba(36,26,46,.78);
      transition:all .25s ease;
    }
    .chip:hover{
      transform:translateY(-1px);
      background:#fff;
      border-color:rgba(124,58,237,.24);
    }
    .chip-active{
      background:linear-gradient(135deg, rgba(124,58,237,.14), rgba(236,72,153,.14));
      color:var(--ink);
      border-color:rgba(236,72,153,.22);
      box-shadow:0 10px 24px rgba(124,58,237,.10);
    }
    .info-card{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      border:1px solid rgba(109,40,217,.12);
      background:rgba(255,255,255,.84);
      box-shadow:var(--shadow);
      transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
    }
    .info-card:hover{
      transform:translateY(-3px);
      border-color:rgba(124,58,237,.26);
      box-shadow:0 24px 64px rgba(80,40,120,.14);
    }
    .info-card.dark{
      background:linear-gradient(180deg, rgba(29,20,42,.98), rgba(23,17,31,.96));
      border:1px solid rgba(255,255,255,.10);
      color:#fff;
    }
    .glow-orb{
      position:absolute;border-radius:999px;filter:blur(24px);pointer-events:none;
      opacity:.9;
    }
    .glow-orb.pink{background:rgba(236,72,153,.22)}
    .glow-orb.violet{background:rgba(124,58,237,.22)}
    .glow-orb.amber{background:rgba(249,115,22,.16)}
    .section-title{
      font-size:clamp(1.85rem, 2.6vw, 3rem);
      line-height:1.12;
      letter-spacing:-.03em;
      font-weight:900;
      color:var(--ink);
    }
    .section-subtitle{
      margin-top:1rem;
      max-width:62ch;
      color:rgba(36,26,46,.72);
      line-height:1.9;
      font-size:1rem;
    }
    .dark-title{
      font-size:clamp(1.9rem, 2.8vw, 3.35rem);
      line-height:1.08;
      letter-spacing:-.04em;
      font-weight:900;
      color:#fff;
    }
    .step-list li{
      display:flex;gap:.9rem;align-items:flex-start;
    }
    .step-list .dot{
      margin-top:.55rem;
      width:.72rem;height:.72rem;border-radius:999px;flex:0 0 auto;
      background:linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
      box-shadow:0 0 0 4px rgba(124,58,237,.10);
    }
    .faq-item{
      border:1px solid rgba(109,40,217,.12);
      border-radius:24px;
      background:rgba(255,255,255,.90);
      box-shadow:0 10px 28px rgba(80,40,120,.06);
      overflow:hidden;
    }
    .faq-item[open]{
      background:#fff;
      border-color:rgba(124,58,237,.22);
    }
    .faq-summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1.18rem 1.28rem;
      font-weight:800;
      color:var(--ink);
    }
    .faq-summary::-webkit-details-marker{display:none}
    .faq-summary::marker{content:""}
    .faq-content{
      padding:0 1.28rem 1.25rem;
      color:rgba(36,26,46,.76);
      line-height:1.85;
    }
    .faq-arrow{
      width:2rem;height:2rem;border-radius:999px;
      display:grid;place-items:center;
      background:rgba(124,58,237,.08);
      color:var(--violet);
      flex:0 0 auto;
      transition:transform .25s ease, background .25s ease;
    }
    .faq-item[open] .faq-arrow{transform:rotate(45deg);background:rgba(236,72,153,.12)}
    .mobile-panel{
      border-top:1px solid rgba(124,58,237,.12);
      background:rgba(251,247,239,.96);
    }
    .footer-link::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-.18rem;
      height:1px;
      border-radius:999px;
      background:rgba(255,255,255,.25);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .24s ease;
    }
    .footer-link:hover::after{transform:scaleX(1)}
    .tiny-kicker{
      display:inline-flex;align-items:center;gap:.45rem;
      border-radius:999px;
      padding:.38rem .7rem;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.82);
      font-size:.78rem;
      font-weight:700;
      letter-spacing:.06em;
    }
    .shadow-glow{
      box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 24px 80px rgba(12,7,18,.28), 0 0 60px rgba(236,72,153,.10);
    }
    @media (max-width: 1024px){
      .nav-link::after{bottom:-.36rem}
    }
    @media (max-width: 640px){
      .container-shell{width:min(1240px, calc(100% - 1.1rem))}
      .faq-summary{padding:1rem 1.05rem}
      .faq-content{padding:0 1.05rem 1.05rem}
    }

/* roulang page: category2 */
:root{
      --bg:#fbf7ef;
      --bg-soft:#f6efe4;
      --paper:#fffaf1;
      --ink:#241a2e;
      --muted:#6f647d;
      --line:rgba(109,40,217,.16);
      --line-strong:rgba(236,72,153,.24);
      --purple:#6d28d9;
      --purple-2:#7c3aed;
      --pink:#ec4899;
      --orange:#f97316;
      --amber:#fbbf24;
      --dark:#17111f;
      --dark-2:#22182d;
      --shadow-soft:0 18px 60px rgba(80,40,120,.10);
      --shadow-stage:0 0 50px rgba(236,72,153,.25);
      --radius-xl:30px;
      --radius-lg:24px;
      --radius-md:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(900px 420px at 78% -10%, rgba(124,58,237,.10), transparent 60%),
        radial-gradient(760px 360px at 8% 12%, rgba(236,72,153,.10), transparent 52%),
        linear-gradient(180deg, #faf5ea 0%, #fbf7ef 26%, #f7f0e4 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.42), transparent 20%),
        radial-gradient(circle at 12% 22%, rgba(255,255,255,.18), transparent 18%),
        radial-gradient(circle at 88% 16%, rgba(255,255,255,.14), transparent 14%);
      mix-blend-mode:soft-light;
      opacity:.55;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(124,58,237,.18);color:var(--ink)}
    .container-shell{
      width:min(1240px, calc(100% - 1.5rem));
      margin-inline:auto;
    }
    .brand-mark{
      width:42px;height:42px;border-radius:16px;
      background:
        radial-gradient(circle at 34% 34%, #ffd6ee 0 16%, transparent 17%),
        radial-gradient(circle at 66% 66%, #ffc76c 0 14%, transparent 15%),
        linear-gradient(145deg, #7c3aed 0%, #ec4899 55%, #f97316 100%);
      box-shadow:0 10px 30px rgba(124,58,237,.26), inset 0 1px 0 rgba(255,255,255,.35);
      position:relative;
      flex:none;
    }
    .brand-mark:before,.brand-mark:after{
      content:"";
      position:absolute;
      border-radius:999px;
      background:rgba(255,255,255,.88);
      box-shadow:0 0 0 4px rgba(255,255,255,.12);
    }
    .brand-mark:before{width:8px;height:8px;left:11px;top:12px}
    .brand-mark:after{width:8px;height:8px;right:10px;bottom:11px}
    .nav-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      padding:.7rem 1rem;
      border-radius:999px;
      color:#4b4158;
      font-weight:700;
      transition:all .22s ease;
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      background:rgba(124,58,237,.08);
      color:var(--purple);
      outline:none;
      transform:translateY(-1px);
    }
    .nav-link[aria-current="page"],
    .nav-link.nav-active{
      background:linear-gradient(135deg, rgba(124,58,237,.14), rgba(236,72,153,.10));
      color:var(--dark);
      box-shadow:inset 0 0 0 1px rgba(124,58,237,.14);
    }
    .footer-link{
      color:rgba(255,255,255,.72);
      transition:all .2s ease;
      display:inline-flex;
      width:fit-content;
    }
    .footer-link:hover,
    .footer-link:focus-visible{
      color:#fff;
      transform:translateX(2px);
      outline:none;
    }
    .command-search{
      display:flex;
      align-items:center;
      gap:.7rem;
      min-width:280px;
      padding:.9rem 1.05rem;
      border-radius:999px;
      border:1px solid rgba(109,40,217,.16);
      background:rgba(255,255,255,.82);
      box-shadow:0 8px 24px rgba(80,40,120,.08);
      transition:all .22s ease;
    }
    .command-search:hover,
    .command-search:focus-within{
      border-color:rgba(124,58,237,.46);
      box-shadow:0 0 0 4px rgba(124,58,237,.08), 0 10px 28px rgba(80,40,120,.10);
      transform:translateY(-1px);
    }
    .command-search input{
      width:100%;
      border:0;
      background:transparent;
      outline:none;
      color:var(--ink);
    }
    .command-search input::placeholder{color:#92879c}
    .btn-primary,
    .btn-secondary,
    .btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      min-height:48px;
      padding:.85rem 1.1rem;
      border-radius:999px;
      font-weight:800;
      transition:all .22s ease;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--purple) 0%, var(--pink) 55%, var(--orange) 100%);
      box-shadow:0 12px 28px rgba(236,72,153,.26), 0 0 0 1px rgba(255,255,255,.14) inset;
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      transform:translateY(-2px);
      box-shadow:0 18px 36px rgba(236,72,153,.30), 0 0 0 1px rgba(255,255,255,.18) inset;
      outline:none;
      filter:saturate(1.05);
    }
    .btn-secondary{
      color:var(--purple);
      background:rgba(255,255,255,.84);
      border-color:rgba(109,40,217,.18);
      box-shadow:0 10px 24px rgba(80,40,120,.08);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      transform:translateY(-2px);
      outline:none;
      background:#f4ecff;
      border-color:rgba(124,58,237,.34);
    }
    .btn-ghost{
      color:#342742;
      background:transparent;
      border-color:rgba(109,40,217,.16);
    }
    .btn-ghost:hover,
    .btn-ghost:focus-visible{
      background:rgba(124,58,237,.06);
      border-color:rgba(124,58,237,.30);
      outline:none;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .75rem;
      border-radius:999px;
      font-size:.8rem;
      font-weight:800;
      letter-spacing:.02em;
      line-height:1;
    }
    .badge-soft{
      color:#5b25b8;
      background:rgba(124,58,237,.10);
      border:1px solid rgba(124,58,237,.16);
    }
    .badge-dark{
      color:#fff;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.12);
    }
    .badge-warm{
      color:#8a4d00;
      background:rgba(251,191,36,.18);
      border:1px solid rgba(251,191,36,.22);
    }
    .paper-card{
      background:rgba(255,250,241,.88);
      border:1px solid rgba(109,40,217,.14);
      box-shadow:var(--shadow-soft);
      border-radius:var(--radius-xl);
      backdrop-filter:blur(10px);
    }
    .paper-card-strong{
      background:linear-gradient(180deg, rgba(255,250,241,.96), rgba(251,247,239,.92));
      border:1px solid rgba(124,58,237,.16);
      box-shadow:0 18px 60px rgba(80,40,120,.11);
      border-radius:var(--radius-xl);
    }
    .stage-card{
      position:relative;
      color:#fff;
      background:
        radial-gradient(900px 360px at 12% 16%, rgba(236,72,153,.20), transparent 40%),
        radial-gradient(680px 320px at 84% 20%, rgba(124,58,237,.22), transparent 38%),
        linear-gradient(145deg, #130d1a 0%, #1a1323 54%, #241530 100%);
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 28px 80px rgba(23,17,31,.34), var(--shadow-stage);
      border-radius:34px;
      overflow:hidden;
    }
    .stage-card:before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        linear-gradient(125deg, rgba(255,255,255,.10), transparent 18%, transparent 82%, rgba(255,255,255,.10));
      pointer-events:none;
      opacity:.42;
    }
    .stage-orb{
      position:absolute;
      border-radius:999px;
      filter:blur(18px);
      opacity:.65;
      pointer-events:none;
    }
    .stage-orb.pink{width:160px;height:160px;left:-20px;top:-18px;background:rgba(236,72,153,.32)}
    .stage-orb.purple{width:220px;height:220px;right:-54px;top:30px;background:rgba(124,58,237,.22)}
    .stage-orb.amber{width:120px;height:120px;right:18%;bottom:-35px;background:rgba(251,191,36,.18)}
    .section-title h2{
      font-size:clamp(1.65rem, 1.2rem + 1.7vw, 2.7rem);
      line-height:1.12;
      letter-spacing:-.03em;
      color:var(--dark);
      font-weight:900;
    }
    .section-title p{
      color:var(--muted);
      font-size:clamp(1rem, .96rem + .2vw, 1.1rem);
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .75rem;
      border-radius:999px;
      font-size:.78rem;
      font-weight:800;
      letter-spacing:.15em;
      text-transform:uppercase;
      color:#5f3cb8;
      background:rgba(124,58,237,.08);
      border:1px solid rgba(124,58,237,.12);
    }
    .timeline{
      position:relative;
      padding-left:1rem;
    }
    .timeline:before{
      content:"";
      position:absolute;
      left:11px;
      top:.15rem;
      bottom:.15rem;
      width:2px;
      background:linear-gradient(180deg, rgba(124,58,237,.34), rgba(236,72,153,.18));
    }
    .timeline-item{
      position:relative;
      padding-left  position:relative;
  padding:1.2rem 0 1.2rem 2.1rem;
}
.timeline-item:before{
  content:"";
  position:absolute;
  left:4px;
  top:1.52rem;
  width:14px;height:14px;
  border-radius:999px;
  background:linear-gradient(135deg, #7c3aed, #ec4899);
  box-shadow:0 0 0 6px rgba(124,58,237,.08), 0 0 18px rgba(236,72,153,.18);
}
.timeline-item .year{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.78rem;
  font-weight:800;
  color:#6a3fd0;
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.12);
  padding:.3rem .55rem;
  border-radius:999px;
}
.glow-line{
  position:relative;
}
.glow-line:after{
  content:"";
  position:absolute;
  inset:auto 0 -1px 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,.36), rgba(236,72,153,.28), transparent);
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.64rem .9rem;
  border-radius:999px;
  font-size:.88rem;
  font-weight:800;
  color:#4a4257;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(109,40,217,.12);
  box-shadow:0 10px 20px rgba(80,40,120,.06);
  transition:all .22s ease;
}
.filter-chip:hover,
.filter-chip:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(124,58,237,.28);
  background:#f5edff;
  color:#4f2bb7;
  outline:none;
}
.filter-chip.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
  box-shadow:0 12px 26px rgba(236,72,153,.24);
}
.stat-box{
  border-radius:24px;
  padding:1rem 1.05rem;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(109,40,217,.12);
  box-shadow:0 12px 24px rgba(80,40,120,.07);
}
.stat-num{
  display:block;
  font-size:1.65rem;
  line-height:1;
  font-weight:900;
  color:var(--dark);
  letter-spacing:-.04em;
}
.stat-label{
  display:block;
  margin-top:.35rem;
  font-size:.86rem;
  color:var(--muted);
  line-height:1.5;
}
.note-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.38rem .62rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
  color:#7b4a00;
  background:rgba(251,191,36,.18);
  border:1px solid rgba(251,191,36,.22);
}
.checklist li{
  position:relative;
  padding-left:1.7rem;
}
.checklist li:before{
  content:"";
  position:absolute;
  left:0;
  top:.45rem;
  width:1rem;
  height:1rem;
  border-radius:999px;
  background:linear-gradient(135deg, #7c3aed, #ec4899);
  box-shadow:0 0 0 4px rgba(124,58,237,.08);
}
.faq-item{
  border-radius:22px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(109,40,217,.12);
  overflow:hidden;
  box-shadow:0 10px 24px rgba(80,40,120,.07);
}
.faq-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.05rem 1.1rem;
  text-align:left;
  background:transparent;
  border:0;
  color:var(--dark);
  font-weight:800;
}
.faq-btn:hover{background:rgba(124,58,237,.04)}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
}
.faq-item.open .faq-answer{max-height:220px}
.faq-answer > div{
  padding:0 1.1rem 1rem 1.1rem;
  color:var(--muted);
}
.faq-icon{
  flex:none;
  width:32px;height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(124,58,237,.10);
  color:var(--purple);
  transition:transform .24s ease;
}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.input-field{
  width:100%;
  min-height:50px;
  border-radius:999px;
  border:1px solid rgba(109,40,217,.16);
  background:rgba(255,255,255,.9);
  padding:.9rem 1.05rem;
  outline:none;
  color:var(--ink);
  box-shadow:0 8px 24px rgba(80,40,120,.06);
  transition:all .22s ease;
}
.input-field:focus{
  border-color:rgba(124,58,237,.42);
  box-shadow:0 0 0 4px rgba(124,58,237,.08), 0 10px 28px rgba(80,40,120,.10);
}
.field-label{
  display:block;
  margin-bottom:.55rem;
  font-size:.88rem;
  font-weight:800;
  color:#433651;
}
.section-gap{padding-block:clamp(3.5rem, 4vw, 6.3rem)}
.hero-pad{padding-top:clamp(1rem, 2vw, 1.8rem)}
.soft-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(109,40,217,.16), rgba(236,72,153,.18), transparent);
}
.menu-panel{
  display:none;
}
.menu-panel.open{display:block}
.panel-card{
  border-radius:28px;
  background:rgba(255,250,241,.95);
  border:1px solid rgba(109,40,217,.14);
  box-shadow:var(--shadow-soft);
}
@media (max-width: 1023px){
  .command-search{min-width:0;width:100%}
}
@media (max-width: 767px){
  .section-gap{padding-block:3.5rem}
  .timeline{padding-left:.5rem}
  .timeline-item{padding-left:1.8rem}
  .timeline-item:before{left:2px}
}