/* roulang page: index */
:root{
      --bg:#070710;
      --bg-2:#0b1020;
      --bg-3:#11172a;
      --surface:rgba(14,18,32,.82);
      --surface-2:rgba(20,26,44,.92);
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(255,255,255,.18);
      --text:#eef2ff;
      --muted:#a4adc6;
      --muted-2:#7f8aa8;
      --accent:#ff3d8d;
      --accent-2:#8b5cf6;
      --accent-3:#31d6d1;
      --warn:#fbbf24;
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --shadow-soft:0 18px 60px rgba(0,0,0,.42);
      --shadow-strong:0 24px 80px rgba(0,0,0,.56);
    }

    *{box-sizing:border-box}
    html{
      scroll-behavior:smooth;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    body{
      margin:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) 0 0/100% 100% no-repeat,
        linear-gradient(135deg, rgba(139,92,246,.10), transparent 30%),
        linear-gradient(315deg, rgba(49,214,209,.09), transparent 36%),
        radial-gradient(1200px 600px at 20% 0%, rgba(255,61,141,.10), transparent 55%),
        linear-gradient(180deg, #070710 0%, #090b14 38%, #0b1020 100%);
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      min-height:100vh;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0/100% 42px,
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0/140px 100%;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 84%);
      opacity:.28;
      z-index:-1;
    }
    ::selection{background:rgba(255,61,141,.28); color:#fff}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:2px solid rgba(49,214,209,.9); outline-offset:3px}

    .shell{
      width:min(1180px, calc(100% - 32px));
      margin:0 auto;
    }
    .glass-nav{
      background:linear-gradient(180deg, rgba(17,23,42,.92), rgba(12,16,29,.78));
      border:1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .brand-mark{
      letter-spacing:0;
      background: linear-gradient(90deg, #fff 0%, #ffd4e2 28%, #bdefff 56%, #ffffff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .nav-link{
      transition: color .22s ease, background-color .22s ease, transform .22s ease, border-color .22s ease;
      border:1px solid transparent;
    }
    .nav-link:hover{
      color:#fff;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.08);
      transform:translateY(-1px);
    }
    .nav-link.active{
      background:linear-gradient(135deg, rgba(255,61,141,.18), rgba(139,92,246,.16));
      border-color:rgba(255,255,255,.13);
      color:#fff;
      box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:#dbe3f7;
      border-radius:999px;
      padding:.4rem .8rem;
      font-size:.76rem;
      line-height:1;
      transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
      white-space:nowrap;
    }
    .chip:hover{
      transform:translateY(-1px);
      border-color:rgba(49,214,209,.38);
      background:rgba(49,214,209,.08);
    }
    .btn-primary,.btn-secondary,.btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:16px;
      padding:.9rem 1.15rem;
      font-weight:700;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease;
      border:1px solid transparent;
    }
    .btn-primary{
      color:white;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 18px 40px rgba(255,61,141,.22), 0 0 0 1px rgba(255,255,255,.08) inset;
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 24px 60px rgba(255,61,141,.30), 0 0 0 1px rgba(255,255,255,.12) inset;
    }
    .btn-secondary{
      color:#eef2ff;
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.10);
    }
    .btn-secondary:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.16);
    }
    .btn-ghost{
      color:#dbe3f7;
      background:transparent;
      border-color:rgba(255,255,255,.12);
    }
    .btn-ghost:hover{
      transform:translateY(-2px);
      background:rgba(49,214,209,.08);
      border-color:rgba(49,214,209,.32);
      color:#fff;
    }
    .title-xl{
      font-size:clamp(2rem, 4vw, 4.5rem);
      line-height:1.02;
      letter-spacing:0;
    }
    .title-lg{
      font-size:clamp(1.7rem, 2.5vw, 2.8rem);
      line-height:1.08;
      letter-spacing:0;
    }
    .title-md{
      font-size:clamp(1.2rem, 1.7vw, 1.65rem);
      line-height:1.12;
      letter-spacing:0;
    }
    .panel{
      background:linear-gradient(180deg, rgba(19,25,42,.88), rgba(13,18,31,.95));
      border:1px solid rgba(255,255,255,.10);
      box-shadow:var(--shadow-soft);
    }
    .lift{
      transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease;
      will-change:transform;
    }
    .lift:hover{
      transform:translateY(-4px) scale(1.01);
      border-color:rgba(255,255,255,.18);
      box-shadow:var(--shadow-strong);
    }
    .track::-webkit-scrollbar{height:10px}
    .track::-webkit-scrollbar-thumb{
      background:linear-gradient(90deg, rgba(255,61,141,.55), rgba(139,92,246,.55));
      border-radius:999px;
      border:2px solid transparent;
      background-clip:padding-box;
    }
    .track{
      scrollbar-width:thin;
      scrollbar-color:rgba(255,61,141,.5) transparent;
    }
    .overlay-card{
      background:
        linear-gradient(180deg, rgba(10,10,20,.10), rgba(10,10,20,.82)),
        linear-gradient(135deg, rgba(255,61,141,.14), rgba(139,92,246,.10));
      border:1px solid rgba(255,255,255,.08);
    }
    .stat{
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
    }
    .progress{
      background:rgba(255,255,255,.08);
      border-radius:999px;
      overflow:hidden;
      height:10px;
    }
    .progress > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
      box-shadow:0 0 20px rgba(49,214,209,.34);
    }
    .dot-list li{
      position:relative;
      padding-left:1rem;
    }
    .dot-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.65rem;
      width:.45rem;
      height:.45rem;
      border-radius:999px;
      background:linear-gradient(135deg, var(--accent), var(--accent-3));
      box-shadow:0 0 0 4px rgba(255,255,255,.03);
    }
    .quote{
      position:relative;
      padding:1.2rem 1.2rem 1.1rem;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.08);
    }
    .quote::after{
      content:"";
      position:absolute;
      left:22px;
      bottom:-10px;
      width:18px;
      height:18px;
      transform:rotate(45deg);
      background:rgba(255,255,255,.035);
      border-right:1px solid rgba(255,255,255,.08);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .news-link{
      display:block;
      padding:1rem 0;
      border-bottom:1px solid rgba(255,255,255,.08);
      transition: color .2s ease, transform .2s ease;
    }
    .news-link:hover{
      color:#fff;
      transform:translateX(4px);
    }
    .news-link:last-child{border-bottom:none}
    .news-card{
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.08);
    }
    .faq-item{
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .faq-item:last-child{border-bottom:none}
    .footer-link{
      color:#c7d2ea;
      transition: color .2s ease;
    }
    .footer-link:hover{color:#fff}

    .fixed-cta{
      background:linear-gradient(180deg, rgba(12,16,29,.78), rgba(9,12,22,.92));
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 20px 60px rgba(0,0,0,.45);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    @media (max-width: 1024px){
      .title-xl{font-size:clamp(2rem, 6vw, 3.6rem)}
    }
    @media (max-width: 768px){
      .shell{width:min(100% - 20px, 1180px)}
      .glass-nav{border-radius:24px}
      .nav-scroll{overflow-x:auto; scrollbar-width:none}
      .nav-scroll::-webkit-scrollbar{display:none}
    }
    @media (max-width: 520px){
      .title-xl{font-size:clamp(2rem, 9vw, 2.9rem)}
      .title-lg{font-size:clamp(1.4rem, 7vw, 2rem)}
    }

/* roulang page: category1 */
:root{
      --bg:#080912;
      --bg-2:#111126;
      --panel:#15162b;
      --panel-2:#1d1a34;
      --line:rgba(255,255,255,.1);
      --text:#f8fafc;
      --muted:#a7b0c5;
      --weak:#707992;
      --pink:#ff3d8d;
      --purple:#8b5cf6;
      --cyan:#31d6d1;
      --green:#44f0a7;
      --amber:#ffd166;
      --radius:26px;
      --radius-sm:16px;
      --shadow:0 24px 80px rgba(0,0,0,.42);
      --glow:0 0 36px rgba(255,61,141,.26);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--text);
      line-height:1.65;
      background:
        radial-gradient(circle at 12% 8%, rgba(255,61,141,.20), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(49,214,209,.14), transparent 28%),
        radial-gradient(circle at 50% 0%, rgba(139,92,246,.18), transparent 38%),
        linear-gradient(180deg,#070812 0%,#0d0d1a 46%,#090a12 100%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.34;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    img{max-width:100%;display:block}
    ::selection{background:rgba(255,61,141,.38);color:#fff}
    .shell{width:min(1180px,calc(100% - 32px));margin-inline:auto}
    .glass-nav{
      background:linear-gradient(180deg,rgba(23,24,45,.84),rgba(13,14,28,.72));
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 18px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter:blur(18px);
    }
    .brand-mark{
      background:linear-gradient(90deg,#fff 0%,#ffd8ea 42%,#88fff9 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      letter-spacing:.01em;
    }
    .nav-scroll{overflow-x:auto;scrollbar-width:none}
    .nav-scroll::-webkit-scrollbar{display:none}
    .nav-link{
      position:relative;
      white-space:nowrap;
      transition:.25s ease;
      border:1px solid transparent;
    }
    .nav-link:hover{
      color:#fff;
      background:rgba(255,255,255,.07);
      border-color:rgba(255,255,255,.1);
    }
    .nav-link.active{
      background:linear-gradient(135deg,rgba(255,61,141,.95),rgba(139,92,246,.86));
      color:#fff;
      box-shadow:0 12px 30px rgba(255,61,141,.24);
    }
    .section{padding:76px 0}
    .section-tight{padding:48px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#dbeafe;
      padding:8px 12px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      letter-spacing:.04em;
    }
    .eyebrow:before{
      content:"";
      width:7px;height:7px;border-radius:999px;
      background:var(--green);
      box-shadow:0 0 16px rgba(68,240,167,.85);
    }
    .hero-title{
      font-size:clamp(34px,6vw,68px);
      line-height:1.04;
      letter-spacing:-.055em;
      font-weight:950;
    }
    .section-title{
      font-size:clamp(28px,4vw,42px);
      line-height:1.14;
      letter-spacing:-.035em;
      font-weight:900;
    }
    .lead{color:#c5ccda;font-size:clamp(15px,1.6vw,17px)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-height:46px;padding:0 18px;border-radius:16px;
      font-weight:900;font-size:14px;border:1px solid transparent;
      transition:transform .24s ease, box-shadow .24s ease, background .24s ease, border-color .24s ease;
    }
    .btn-primary{
      color:white;
      background:linear-gradient(135deg,var(--pink),var(--purple));
      box-shadow:0 18px 45px rgba(255,61,141,.25),0 0 0 1px rgba(255,255,255,.08) inset;
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 24px 58px rgba(255,61,141,.36)}
    .btn-ghost{
      color:#f8fafc;
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.12);
    }
    .btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
    .btn:focus-visible,.nav-link:focus-visible,.footer-link:focus-visible,input:focus-visible{
      outline:3px solid rgba(49,214,209,.45);
      outline-offset:3px;
    }
    .hero-card,.panel-card{
      border:1px solid rgba(255,255,255,.11);
      background:linear-gradient(180deg,rgba(26,27,52,.82),rgba(16,17,33,.78));
      box-shadow:var(--shadow);
      border-radius:var(--radius);
      overflow:hidden;
    }
    .promo-burst{
      position:absolute;right:20px;top:-18px;
      width:112px;height:112px;border-radius:32px;
      display:grid;place-items:center;text-align:center;
      color:#180811;font-weight:950;font-size:15px;line-height:1.15;
      background:conic-gradient(from 20deg,#fff176,#ff7ab8,#8efcff,#fff176);
      box-shadow:0 16px 50px rgba(255,61,141,.32);
      transform:rotate(8deg);
    }
    .status-row{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:12px 14px;border-radius:18px;
      background:rgba(0,0,0,.24);
      border:1px solid rgba(255,255,255,.08);
    }
    .progress{
      height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;
    }
    .progress span{
      display:block;height:100%;border-radius:inherit;
      background:linear-gradient(90deg,var(--cyan),var(--green));
      box-shadow:0 0 20px rgba(49,214,209,.32);
    }
    .metric{
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.055);
      border-radius:20px;
      padding:16px;
    }
    .metric strong{display:block;font-size:28px;line-height:1;font-weight:950}
    .metric span{display:block;margin-top:8px;color:var(--muted);font-size:13px}
    .rail{
      display:flex;gap:18px;overflow-x:auto;padding:8px 4px 24px;
      scroll-snap-type:x mandatory;
      scrollbar-color:rgba(255,61,141,.55) rgba(255,255,255,.06);
    }
    .rail::-webkit-scrollbar{height:10px}
    .rail::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
    .rail::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--pink),var(--purple));border-radius:999px}
    .cover-card{
      position:relative;flex:0 0 278px;height:360px;
      border-radius:26px;overflow:hidden;scroll-snap-align:start;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at 30% 15%,rgba(255,61,141,.42),transparent 34%),
        radial-gradient(circle at 78% 30%,rgba(49,214,209,.25),transparent 30%),
        linear-gradient(145deg,#24213a,#0e1021 72%);
      box-shadow:0 18px 55px rgba(0,0,0,.34);
      transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    }
    .cover-card:hover{transform:translateY(-8px) scale(1.025);border-color:rgba(255,61,141,.46);box-shadow:0 28px 70px rgba(0,0,0,.46),var(--glow)}
    .cover-card:after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.28) 44%,rgba(0,0,0,.88) 100%);
    }
    .cover-content{position:absolute;z-index:2;inset:auto 18px 18px 18px}
    .badge{
      display:inline-flex;align-items:center;gap:6px;
      padding:6px 10px;border-radius:999px;
      font-size:12px;font-weight:900;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.13);
      color:#fff;
    }
    .badge-hot{background:rgba(255,61,141,.16);border-color:rgba(255,61,141,.36)}
    .badge-cyan{background:rgba(49,214,209,.13);border-color:rgba(49,214,209,.32)}
    .feature{
      border:1px solid rgba(255,255,255,.1);
      background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
      border-radius:24px;padding:22px;
      transition:.24s ease;
    }
    .feature:hover{transform:translateY(-4px);border-color:rgba(49,214,209,.28);background:rgba(255,255,255,.08)}
    .scene-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px}
    .step{
      display:grid;grid-template-columns:44px 1fr;gap:14px;
      padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.09);
      background:rgba(0,0,0,.18);
    }
    .step-num{
      width:44px;height:44px;border-radius:16px;display:grid;place-items:center;
      font-weight:950;background:linear-gradient(135deg,var(--pink),var(--purple));
      box-shadow:0 12px 32px rgba(255,61,141,.22);
    }
    .quote{
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.055);
      border-radius:24px;padding:22px;
    }
    .faq-item{
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.05);
      border-radius:20px;padding:20px;
    }
    .faq-item h3{font-weight:900;color:#fff;font-size:16px}
    .faq-item p{margin-top:8px;color:#b8c1d6;font-size:14px;line-height:1.75}
    .subscribe-box{
      background:
        radial-gradient(circle at 18% 20%,rgba(255,61,141,.25),transparent 34%),
        radial-gradient(circle at 82% 28%,rgba(49,214,209,.18),transparent 28%),
        linear-gradient(135deg,rgba(31,26,52,.96),rgba(12,13,26,.96));
      border:1px solid rgba(255,255,255,.13);
      border-radius:30px;
      box-shadow:var(--shadow);
    }
    .form-input{
      width:100%;min-height:50px;border-radius:16px;
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
      color:#fff;padding:0 16px;transition:.2s ease;
    }
    .form-input::placeholder{color:#778197}
    .form-input:focus{border-color:rgba(49,214,209,.55);background:rgba(255,255,255,.1)}
    .footer-link{color:#9aa4bb;transition:.2s ease}
    .footer-link:hover{color:#fff;transform:translateX(3px)}
    .sticky-cta{
      position:fixed;z-index:60;left:50%;bottom:18px;transform:translateX(-50%);
      width:min(760px,calc(100% - 28px));
      border:1px solid rgba(255,255,255,.13);
      background:rgba(13,14,29,.86);
      backdrop-filter:blur(18px);
      border-radius:999px;
      box-shadow:0 18px 60px rgba(0,0,0,.48);
      padding:10px 12px 10px 18px;
    }
    @media (max-width:1024px){
      .scene-grid{grid-template-columns:1fr}
      .promo-burst{right:14px;top:-12px;width:96px;height:96px;font-size:13px}
    }
    @media (max-width:768px){
      .shell{width:min(100% - 24px,1180px)}
      .section{padding:58px 0}
      .glass-nav{border-radius:24px;padding:12px!important}
      .nav-scroll{margin-left:0;width:100%;padding-top:8px}
      .glass-nav .flex.items-center.gap-4{flex-wrap:wrap}
      .hero-card{border-radius:24px}
      .cover-card{flex-basis:238px;height:328px}
      .sticky-cta{border-radius:24px;padding:12px}
      .sticky-cta .inner{display:grid;gap:10px}
      .metric strong{font-size:24px}
    }
    @media (max-width:520px){
      .hero-title{font-size:36px}
      .section-title{font-size:29px}
      .promo-burst{position:relative;right:auto;top:auto;margin:0 0 14px auto;transform:rotate(5deg)}
      .btn{width:100%}
      .status-row{align-items:flex-start;flex-direction:column}
      .cover-card{flex-basis:82vw}
      .step{grid-template-columns:38px 1fr}
      .step-num{width:38px;height:38px;border-radius:14px}
    }