/* roulang page: index */
:root{
      --bg:#07111F;
      --bg-2:#081827;
      --panel:rgba(13,31,55,.68);
      --panel-2:rgba(18,42,74,.46);
      --line:rgba(120,180,255,.22);
      --line-strong:rgba(53,229,255,.42);
      --text:#ECF7FF;
      --muted:rgba(221,239,255,.72);
      --weak:rgba(221,239,255,.54);
      --blue:#2F8CFF;
      --cyan:#35E5FF;
      --purple:#7C5CFF;
      --gold:#FFC857;
      --radius-xl:28px;
      --radius-lg:22px;
      --shadow:0 24px 70px rgba(0,0,0,.42);
      --glow:0 0 38px rgba(53,229,255,.16);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 18% 8%, rgba(47,140,255,.22), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(53,229,255,.16), transparent 28%),
        radial-gradient(circle at 50% 70%, rgba(124,92,255,.13), transparent 36%),
        linear-gradient(180deg,#06101d 0%,#081827 42%,#050b14 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-2;
      background-image:
        linear-gradient(rgba(120,180,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,180,255,.06) 1px, transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.18));
      pointer-events:none;
    }
    body:after{
      content:"";
      position:fixed;
      inset:auto -10% -20% -10%;
      height:420px;
      z-index:-1;
      background:radial-gradient(circle, rgba(47,140,255,.12), transparent 65%);
      pointer-events:none;
    }
    a{color:inherit;text-decoration:none}
    img,svg{display:block;max-width:100%}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(53,229,255,.25);color:#fff}
    .site-container{width:min(1180px, calc(100% - 40px));margin:0 auto}
    .glass{
      background:linear-gradient(135deg,var(--panel),var(--panel-2));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }
    .card-hover{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease}
    .card-hover:hover{
      transform:translateY(-5px);
      border-color:var(--line-strong);
      box-shadow:0 22px 70px rgba(0,0,0,.38), var(--glow);
      background:linear-gradient(135deg,rgba(15,38,70,.78),rgba(18,42,74,.52));
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height:46px;
      padding:.78rem 1.15rem;
      border-radius:999px;
      font-weight:800;
      transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease,color .25s ease;
      outline:none;
      white-space:nowrap;
    }
    .btn-primary{
      color:#04111f;
      background:linear-gradient(135deg,var(--cyan),var(--blue));
      box-shadow:0 0 28px rgba(53,229,255,.28), inset 0 1px 0 rgba(255,255,255,.45);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(53,229,255,.38)}
    .btn-secondary{
      color:var(--text);
      border:1px solid rgba(120,180,255,.34);
      background:rgba(8,24,39,.44);
    }
    .btn-secondary:hover{transform:translateY(-2px);border-color:var(--cyan);background:rgba(47,140,255,.14)}
    .btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
      outline:3px solid rgba(53,229,255,.42);
      outline-offset:3px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.38rem;
      border:1px solid rgba(120,180,255,.24);
      background:rgba(13,31,55,.58);
      color:rgba(236,247,255,.84);
      border-radius:999px;
      padding:.36rem .68rem;
      font-size:.82rem;
      line-height:1;
    }
    .badge:before{
      content:"";
      width:7px;height:7px;border-radius:999px;
      background:var(--cyan);
      box-shadow:0 0 14px rgba(53,229,255,.72);
    }
    .section{padding:96px 0;position:relative}
    .section-sm{padding:72px 0}
    .section-title{font-size:clamp(1.8rem,3vw,2.55rem);line-height:1.18;font-weight:900;letter-spacing:-.04em}
    .section-desc{color:var(--muted);font-size:1.02rem;max-width:760px;margin-top:14px}
    .nav-link{
      position:relative;
      color:rgba(236,247,255,.72);
      font-weight:700;
      padding:.45rem .25rem;
      transition:color .2s ease;
    }
    .nav-link:after{
      content:"";
      position:absolute;
      left:.25rem;right:.25rem;bottom:.2rem;
      height:2px;border-radius:2px;
      background:linear-gradient(90deg,var(--cyan),var(--blue));
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .22s ease;
    }
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}
    .hero-shell{
      position:relative;
      min-height:660px;
      display:flex;
      align-items:center;
      overflow:hidden;
      border-bottom:1px solid rgba(120,180,255,.14);
    }
    .hero-shell:before{
      content:"";
      position:absolute;
      inset:86px 28px 36px;
      border:1px solid rgba(120,180,255,.12);
      border-radius:42px;
      background:
        radial-gradient(circle at 20% 22%, rgba(53,229,255,.11), transparent 26%),
        radial-gradient(circle at 80% 42%, rgba(124,92,255,.12), transparent 30%);
      pointer-events:none;
    }
    .stage-card{
      position:relative;
      border-radius:30px;
      overflow:hidden;
    }
    .stage-card:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(120deg,transparent 0 35%,rgba(53,229,255,.14) 46%,transparent 60%),
        radial-gradient(circle at 35% 20%, rgba(255,255,255,.14), transparent 24%);
      pointer-events:none;
    }
    .matrix-tile{
      border:1px solid rgba(120,180,255,.22);
      background:rgba(7,17,31,.42);
      border-radius:20px;
      padding:16px;
      min-height:116px;
      transition:transform .25s ease,border-color .25s ease,background .25s ease;
    }
    .matrix-tile:hover{transform:translateY(-4px);border-color:rgba(53,229,255,.5);background:rgba(47,140,255,.13)}
    .step-card{position:relative}
    .step-card:before{
      content:"";
      position:absolute;
      top:18px;left:18px;right:18px;height:4px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--blue),var(--cyan));
      opacity:.85;
    }
    .compare-table{min-width:860px;border-collapse:separate;border-spacing:0}
    .compare-table th,.compare-table td{
      border-bottom:1px solid rgba(120,180,255,.14);
      padding:18px 16px;
      vertical-align:top;
    }
    .compare-table th{
      background:rgba(10,27,49,.82);
      color:#fff;
      font-weight:900;
      position:sticky;
      top:72px;
      z-index:1;
    }
    .compare-table tr:hover td{background:rgba(47,140,255,.06)}
    .recommended{
      box-shadow:inset 0 0 0 1px rgba(53,229,255,.38), 0 0 28px rgba(53,229,255,.12);
      background:rgba(47,140,255,.08);
    }
    .console{
      background:
        linear-gradient(135deg,rgba(13,31,55,.78),rgba(18,42,74,.46)),
        radial-gradient(circle at 75% 20%,rgba(53,229,255,.18),transparent 34%);
    }
    .form-control{
      width:100%;
      border:1px solid rgba(120,180,255,.24);
      background:rgba(4,14,26,.56);
      color:var(--text);
      border-radius:16px;
      padding:13px 14px;
      transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
    }
    .form-control::placeholder{color:rgba(221,239,255,.42)}
    .form-control:focus{
      border-color:rgba(53,229,255,.72);
      box-shadow:0 0 0 4px rgba(53,229,255,.12);
      background:rgba(7,17,31,.78);
      outline:none;
    }
    select.form-control option{background:#07111F;color:#fff}
    details{
      border:1px solid rgba(120,180,255,.2);
      background:rgba(13,31,55,.52);
      border-radius:22px;
      padding:18px 20px;
      transition:border-color .24s ease,box-shadow .24s ease,background .24s ease;
    }
    details:hover,details[open]{border-color:rgba(53,229,255,.42);box-shadow:0 0 28px rgba(53,229,255,.1)}
    details[open]{background:rgba(47,140,255,.09)}
    summary{cursor:pointer;font-weight:850;color:#fff;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";color:var(--cyan);font-size:1.35rem;line-height:1}
    details[open] summary:after{content:"−"}
    .footer-link{color:rgba(236,247,255,.66);transition:color .2s ease}
    .footer-link:hover{color:#fff}
    .mobile-menu{display:none}
    .mobile-menu.open{display:block}
    @media (max-width:1024px){
      .section{padding:78px 0}
      .hero-shell{min-height:auto;padding:132px 0 72px}
      .hero-shell:before{inset:92px 16px 24px;border-radius:30px}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 28px,1180px)}
      .section{padding:64px 0}
      .section-sm{padding:54px 0}
      .btn{width:100%;min-height:48px}
      .compare-wrap{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
    }
    @media (max-width:520px){
      .hero-shell{padding-top:116px}
      .badge{font-size:.76rem}
      .matrix-tile{min-height:auto}
      .section-title{letter-spacing:-.03em}
    }

/* roulang page: category1 */
:root{
      --bg:#07111F;
      --bg-2:#081827;
      --text:#F4F9FF;
      --muted:rgba(244,249,255,.66);
      --weak:rgba(244,249,255,.46);
      --primary:#2F8CFF;
      --cyan:#35E5FF;
      --violet:#7C5CFF;
      --amber:#FFC857;
      --border:rgba(120,180,255,.22);
      --border-strong:rgba(53,229,255,.44);
      --glass:linear-gradient(145deg,rgba(13,31,55,.72),rgba(18,42,74,.42));
      --glass-soft:rgba(255,255,255,.055);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --shadow:0 20px 70px rgba(0,0,0,.35);
      --shadow-glow:0 0 36px rgba(53,229,255,.14);
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      line-height:1.75;
      background:
        radial-gradient(circle at 16% 8%,rgba(53,229,255,.18),transparent 30%),
        radial-gradient(circle at 84% 20%,rgba(124,92,255,.18),transparent 34%),
        radial-gradient(circle at 50% 86%,rgba(47,140,255,.15),transparent 38%),
        linear-gradient(180deg,#07111F 0%,#081827 48%,#050b15 100%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      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:42px 42px;
      mask-image:radial-gradient(circle at center,black,transparent 78%);
      opacity:.38;
      z-index:-2;
    }
    body:after{
      content:"";
      position:fixed;
      width:520px;
      height:520px;
      right:-220px;
      top:220px;
      border-radius:999px;
      background:radial-gradient(circle,rgba(53,229,255,.13),transparent 70%);
      filter:blur(8px);
      pointer-events:none;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    input,select,textarea{width:100%}
    ::selection{background:rgba(53,229,255,.28);color:#fff}
    .site-container{
      width:min(var(--container),calc(100% - 32px));
      margin-inline:auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      border-bottom:1px solid rgba(255,255,255,.09);
      background:rgba(4,10,19,.72);
      backdrop-filter:blur(20px);
      box-shadow:0 12px 40px rgba(0,0,0,.22);
    }
    .nav-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      height:44px;
      color:rgba(255,255,255,.68);
      font-size:15px;
      font-weight:700;
      transition:color .25s ease;
    }
    .nav-link:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:6px;
      height:2px;
      border-radius:999px;
      transform:scaleX(0);
      transform-origin:center;
      background:linear-gradient(90deg,var(--cyan),var(--primary));
      box-shadow:0 0 16px rgba(53,229,255,.4);
      transition:transform .25s ease;
    }
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height:46px;
      border-radius:999px;
      padding:.78rem 1.15rem;
      font-weight:900;
      letter-spacing:.01em;
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0)}
    .btn:focus-visible,
    .nav-link:focus-visible,
    summary:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    a:focus-visible,
    button:focus-visible{
      outline:3px solid rgba(53,229,255,.38);
      outline-offset:3px;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,#35E5FF 0%,#2F8CFF 48%,#7C5CFF 100%);
      box-shadow:0 0 30px rgba(47,140,255,.35),inset 0 1px 0 rgba(255,255,255,.22);
    }
    .btn-primary:hover{
      box-shadow:0 0 46px rgba(53,229,255,.34),0 16px 34px rgba(47,140,255,.18);
    }
    .btn-secondary{
      color:#EAF7FF;
      border-color:rgba(120,180,255,.28);
      background:rgba(255,255,255,.06);
    }
    .btn-secondary:hover{
      border-color:rgba(53,229,255,.52);
      background:rgba(53,229,255,.10);
      box-shadow:0 0 28px rgba(53,229,255,.13);
    }
    .glass-card{
      border:1px solid var(--border);
      background:var(--glass);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
    }
    .hover-card{
      transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
    }
    .hover-card:hover{
      transform:translateY(-4px);
      border-color:var(--border-strong);
      box-shadow:var(--shadow),var(--shadow-glow);
      background:linear-gradient(145deg,rgba(16,39,70,.82),rgba(18,42,74,.50));
    }
    .section{
      padding:92px 0;
    }
    .section-tight{
      padding:72px 0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      border:1px solid rgba(53,229,255,.28);
      background:rgba(53,229,255,.08);
      color:#BFF7FF;
      border-radius:999px;
      padding:.42rem .76rem;
      font-size:.82rem;
      font-weight:800;
    }
    .eyebrow:before{
      content:"";
      width:.48rem;
      height:.48rem;
      border-radius:999px;
      background:var(--cyan);
      box-shadow:0 0 16px rgba(53,229,255,.8);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      border:1px solid rgba(120,180,255,.22);
      background:rgba(255,255,255,.06);
      border-radius:999px;
      padding:.36rem .68rem;
      color:rgba(255,255,255,.72);
      font-size:.78rem;
      font-weight:800;
    }
    .badge-amber{
      color:#FFE5A6;
      border-color:rgba(255,200,87,.32);
      background:rgba(255,200,87,.08);
    }
    .gradient-text{
      background:linear-gradient(90deg,#fff 0%,#BFF7FF 42%,#78B5FF 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-panel{
      position:relative;
      overflow:hidden;
      border-radius:34px;
    }
    .hero-panel:before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(circle at 20% 16%,rgba(53,229,255,.18),transparent 36%),
        radial-gradient(circle at 82% 18%,rgba(124,92,255,.16),transparent 36%);
      pointer-events:none;
    }
    .matrix-card{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      border:1px solid rgba(120,180,255,.22);
      background:rgba(255,255,255,.055);
    }
    .matrix-card:before{
      content:"";
      position:absolute;
      inset:0 0 auto;
      height:3px;
      background:linear-gradient(90deg,var(--cyan),transparent);
      opacity:.76;
    }
    .filter-pill{
      display:inline-flex;
      align-items:center;
      min-height:42px;
      border-radius:999px;
      padding:.55rem .95rem;
      border:1px solid rgba(120,180,255,.2);
      background:rgba(255,255,255,.05);
      color:rgba(255,255,255,.68);
      font-size:.9rem;
      font-weight:800;
      transition:all .22s ease;
    }
    .filter-pill:hover,.filter-pill.active{
      color:#fff;
      border-color:rgba(53,229,255,.5);
      background:rgba(53,229,255,.10);
      box-shadow:0 0 24px rgba(53,229,255,.12);
    }
    .content-card{
      position:relative;
      overflow:hidden;
      border-radius:26px;
      padding:1.35rem;
    }
    .content-card.feature{
      padding:1.65rem;
      min-height:100%;
    }
    .content-card .topline{
      position:absolute;
      inset:0 0 auto;
      height:3px;
      background:linear-gradient(90deg,var(--cyan),var(--primary),transparent);
      opacity:.9;
    }
    .side-sticky{
      position:sticky;
      top:104px;
    }
    .step-line{
      position:relative;
    }
    .step-line:before{
      content:"";
      position:absolute;
      left:16px;
      top:34px;
      bottom:12px;
      width:1px;
      background:linear-gradient(to bottom,rgba(53,229,255,.5),rgba(53,229,255,0));
    }
    .step-dot{
      display:flex;
      width:34px;
      height:34px;
      flex:none;
      align-items:center;
      justify-content:center;
      border-radius:12px;
      color:#07111F;
      font-weight:950;
      background:linear-gradient(135deg,var(--cyan),var(--primary));
      box-shadow:0 0 20px rgba(53,229,255,.26);
    }
    .compare-row{
      display:grid;
      grid-template-columns:1.1fr repeat(3,1fr);
      gap:1px;
      overflow:hidden;
      border-radius:18px;
      border:1px solid rgba(120,180,255,.18);
      background:rgba(120,180,255,.14);
    }
    .compare-cell{
      min-height:62px;
      padding:1rem;
      background:rgba(8,24,39,.78);
      color:rgba(255,255,255,.72);
      display:flex;
      align-items:center;
    }
    .compare-head{
      color:#fff;
      font-weight:950;
      background:linear-gradient(145deg,rgba(18,42,74,.92),rgba(13,31,55,.88));
    }
    .compare-recommend{
      box-shadow:inset 0 0 0 1px rgba(53,229,255,.36);
      color:#EAFBFF;
    }
    details{
      border:1px solid rgba(120,180,255,.2);
      background:rgba(255,255,255,.055);
      border-radius:22px;
      padding:1rem 1.1rem;
      transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
    }
    details:hover,details[open]{
      border-color:rgba(53,229,255,.46);
      box-shadow:0 0 28px rgba(53,229,255,.10);
      background:rgba(53,229,255,.07);
    }
    summary{
      cursor:pointer;
      list-style:none;
      font-weight:900;
      color:#fff;
    }
    summary::-webkit-details-marker{display:none}
    details p{
      margin-top:.75rem;
      color:rgba(255,255,255,.62);
      font-size:.95rem;
    }
    .form-field label{
      display:block;
      margin-bottom:.45rem;
      color:rgba(255,255,255,.78);
      font-size:.9rem;
      font-weight:850;
    }
    .form-control{
      border:1px solid rgba(120,180,255,.22);
      background:rgba(4,10,19,.46);
      color:#fff;
      border-radius:16px;
      padding:.88rem 1rem;
      outline:none;
      transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
    }
    .form-control::placeholder{color:rgba(255,255,255,.34)}
    .form-control:focus{
      border-color:rgba(53,229,255,.62);
      box-shadow:0 0 0 4px rgba(53,229,255,.12);
      background:rgba(4,10,19,.62);
    }
    .footer-link{
      color:rgba(255,255,255,.56);
      transition:color .22s ease,transform .22s ease;
    }
    .footer-link:hover{
      color:#BFF7FF;
      transform:translateX(3px);
    }
    #mobileMenu{
      display:none;
    }
    #mobileMenu.open{
      display:block;
    }
    @media (max-width:1024px){
      .section{padding:76px 0}
      .side-sticky{position:static}
      .compare-row{
        min-width:850px;
      }
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 24px,var(--container))}
      .section{padding:64px 0}
      .section-tight{padding:54px 0}
      .hero-panel{border-radius:26px}
      .content-card,.content-card.feature{padding:1.15rem}
      .btn{width:auto;min-height:44px}
    }
    @media (max-width:520px){
      .badge{font-size:.72rem}
      .filter-pill{font-size:.82rem;padding:.5rem .8rem}
      .compare-cell{padding:.85rem}
    }