/* roulang page: index */
:root{
      --bg:#07110d;
      --bg-soft:#0c1712;
      --panel:rgba(12,22,18,.84);
      --panel-strong:rgba(15,28,23,.96);
      --line:rgba(228,201,136,.18);
      --line-strong:rgba(126,228,177,.36);
      --text:#f4efe6;
      --muted:#a4b0aa;
      --muted-2:#7f8a84;
      --emerald:#8be5b6;
      --emerald-2:#4dc58b;
      --gold:#e0c36d;
      --gold-2:#b78834;
      --rose:#cb6d5e;
      --shadow:0 20px 50px rgba(0,0,0,.34);
      --radius:18px;
    }
    html { scroll-behavior:smooth; }
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, #06100d 0%, #091411 42%, #06100d 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(to right, rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(135deg, rgba(126,228,177,.05), rgba(0,0,0,0) 42%, rgba(224,195,109,.05));
      background-size: 132px 132px, 132px 132px, 100% 100%;
      opacity:.38;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.72) 80%, rgba(0,0,0,.55));
    }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }
    button, input, select, textarea{ font:inherit; }
    ::selection{ background: rgba(126,228,177,.25); color: #fff; }

    .site-shell{
      position:relative;
      z-index:1;
    }
    .site-container{
      width:min(100% - 2rem, 80rem);
      margin-inline:auto;
    }
    .panel{
      background: linear-gradient(180deg, rgba(17,31,25,.92), rgba(10,18,15,.88));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      backdrop-filter: blur(16px);
    }
    .panel-strong{
      background: linear-gradient(180deg, rgba(18,33,26,.98), rgba(11,19,15,.96));
      border:1px solid rgba(228,201,136,.24);
      border-radius:var(--radius);
      box-shadow:0 24px 52px rgba(0,0,0,.44);
    }
    .panel:hover{
      border-color: rgba(126,228,177,.26);
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.45rem .8rem;
      border-radius:999px;
      background:rgba(126,228,177,.1);
      border:1px solid rgba(126,228,177,.18);
      color:var(--emerald);
      font-size:.78rem;
      line-height:1;
    }
    .section-title{
      font-size:1.6rem;
      line-height:1.2;
      font-weight:800;
      color:var(--text);
    }
    .section-copy{
      color:var(--muted);
      line-height:1.85;
      max-width:66rem;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.4rem .7rem;
      border-radius:999px;
      border:1px solid rgba(224,195,109,.22);
      background:rgba(224,195,109,.08);
      color:#f2dfad;
      font-size:.78rem;
      line-height:1;
      white-space:nowrap;
    }
    .badge-emerald{
      border-color: rgba(126,228,177,.22);
      background:rgba(126,228,177,.08);
      color:#bff4d8;
    }
    .badge-rose{
      border-color: rgba(203,109,94,.22);
      background:rgba(203,109,94,.08);
      color:#f1b0a8;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.52rem .82rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#dbe3de;
      font-size:.88rem;
      line-height:1;
      transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
      white-space:nowrap;
    }
    .chip:hover{
      transform:translateY(-1px);
      border-color:rgba(126,228,177,.28);
      background:rgba(126,228,177,.08);
      color:#fff;
    }
    .chip-active{
      background:linear-gradient(135deg, rgba(126,228,177,.16), rgba(224,195,109,.16));
      border-color:rgba(126,228,177,.32);
      color:#fff;
      box-shadow:0 0 0 1px rgba(126,228,177,.06) inset;
    }
    .btn-primary,
    .btn-secondary,
    .btn-outline{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height:2.9rem;
      padding:.78rem 1.08rem;
      border-radius:14px;
      border:1px solid transparent;
      font-weight:700;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(135deg, #d9c06b 0%, #98e5bd 100%);
      color:#08110d;
      box-shadow:0 16px 30px rgba(104, 176, 136, .16);
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 34px rgba(104, 176, 136, .22);
    }
    .btn-secondary{
      background:rgba(255,255,255,.03);
      border-color:rgba(228,201,136,.22);
      color:#f5efe2;
    }
    .btn-secondary:hover{
      transform:translateY(-2px);
      border-color:rgba(126,228,177,.34);
      background:rgba(126,228,177,.08);
    }
    .btn-outline{
      background:transparent;
      border-color:rgba(255,255,255,.1);
      color:#e9ece7;
    }
    .btn-outline:hover{
      transform:translateY(-2px);
      border-color:rgba(224,195,109,.28);
      background:rgba(224,195,109,.08);
    }
    .metric{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      border-radius:16px;
      padding:1rem;
    }
    .metric-value{
      font-size:1.6rem;
      line-height:1.05;
      font-weight:900;
      color:#fff;
    }
    .metric-label{
      margin-top:.35rem;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.65;
    }
    .nav-strip{
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .nav-strip::-webkit-scrollbar{ display:none; }
    .table-shell table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
    }
    .table-shell thead th{
      background:rgba(255,255,255,.03);
      color:#f3efe8;
      font-weight:800;
      text-align:center;
      padding:1rem .85rem;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .table-shell thead th:first-child{
      text-align:left;
      background:rgba(255,255,255,.02);
      min-width:13rem;
    }
    .table-shell tbody th,
    .table-shell tbody td{
      padding:1rem .9rem;
      border-bottom:1px solid rgba(255,255,255,.06);
      vertical-align:middle;
    }
    .table-shell tbody th{
      text-align:left;
      font-weight:700;
      color:#edf0eb;
      background:rgba(255,255,255,.015);
    }
    .table-shell tbody td{
      text-align:center;
      color:#d8dfda;
    }
    .table-shell tbody tr:hover td,
    .table-shell tbody tr:hover th{
      background:rgba(126,228,177,.04);
    }
    .tier-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(16,28,22,.92), rgba(9,17,14,.92));
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
      min-height:100%;
    }
    .tier-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(224,195,109,.08), rgba(126,228,177,.04), rgba(203,109,94,.03));
      opacity:.85;
      pointer-events:none;
    }
    .tier-card:hover{
      transform:translateY(-3px);
      border-color:rgba(126,228,177,.26);
      box-shadow:0 20px 40px rgba(0,0,0,.28);
    }
    .tier-card > *{ position:relative; z-index:1; }
    .preview-card{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(18,31,25,.95), rgba(10,17,14,.92));
      transition:transform .18s ease, border-color .18s ease;
      min-height:100%;
    }
    .preview-card:hover{
      transform:translateY(-2px);
      border-color:rgba(224,195,109,.25);
    }
    .faq-item{
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      overflow:hidden;
    }
    .faq-item[open]{
      border-color:rgba(126,228,177,.26);
      background:rgba(126,228,177,.04);
    }
    .faq-summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.1rem;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      font-weight:700;
      color:#f4efe6;
    }
    .faq-summary::-webkit-details-marker{ display:none; }
    .faq-answer{
      padding:0 1.1rem 1.1rem 1.1rem;
      color:var(--muted);
      line-height:1.85;
    }
    .faq-chevron{
      transition:transform .18s ease;
      flex:0 0 auto;
      color:#cbd5ce;
      margin-top:.15rem;
    }
    .faq-item[open] .faq-chevron{
      transform:rotate(180deg);
    }
    .text-soft{ color:var(--muted); }
    .thin-rule{
      border-top:1px solid rgba(255,255,255,.08);
    }
    .scroll-hide{
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .scroll-hide::-webkit-scrollbar{ display:none; }
    .floating-cta{
      box-shadow:0 -10px 26px rgba(0,0,0,.36);
      background:rgba(7,17,13,.92);
      backdrop-filter: blur(16px);
    }
    @media (max-width: 768px){
      .site-container{
        width:min(100% - 1.25rem, 80rem);
      }
      .section-title{
        font-size:1.35rem;
      }
      .panel, .panel-strong, .tier-card, .preview-card, .faq-item{
        border-radius:16px;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#06110d;
      --bg-2:#040806;
      --surface:#0b1713;
      --surface-2:#10221b;
      --surface-3:#132923;
      --line:rgba(255,255,255,.08);
      --line-strong:rgba(224,195,109,.24);
      --text:#eef6f1;
      --muted:#98aa9f;
      --muted-2:#7d8f84;
      --gold:#e0c36d;
      --gold-2:#f4df98;
      --green:#7ee4b1;
      --green-2:#b8f3d2;
      --red:#c86f68;
      --shadow:0 22px 60px rgba(0,0,0,.36);
      --shadow-soft:0 12px 28px rgba(0,0,0,.24);
      --radius:18px;
      --radius-sm:14px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(7,17,13,.96), rgba(4,8,6,.98)),
        radial-gradient(1200px 520px at 12% -8%, rgba(126,228,177,.08), transparent 55%),
        radial-gradient(900px 420px at 88% 4%, rgba(224,195,109,.09), transparent 54%),
        var(--bg);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height:1.6;
      letter-spacing:0;
      min-height:100vh;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.26;
      background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size:100% 62px, 62px 100%;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.2) 88%, transparent);
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(224,195,109,.28);color:#fff}
    .site-container{
      width:min(1180px, calc(100% - 32px));
      margin-inline:auto;
    }
    .scroll-hide{
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .scroll-hide::-webkit-scrollbar{display:none}
    .panel{
      background:linear-gradient(180deg, rgba(16,34,27,.94), rgba(8,16,13,.94));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(16px);
    }
    .panel-soft{
      background:rgba(9,17,14,.78);
      border:1px solid rgba(255,255,255,.06);
      border-radius:var(--radius-sm);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      min-height:30px;
      padding:.38rem .78rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:var(--muted);
      font-size:.78rem;
      line-height:1;
      white-space:nowrap;
    }
    .badge-emerald{
      color:#d9fbe9;
      border-color:rgba(126,228,177,.18);
      background:rgba(126,228,177,.1);
    }
    .badge-gold{
      color:#ffeab0;
      border-color:rgba(224,195,109,.22);
      background:rgba(224,195,109,.1);
    }
    .badge-red{
      color:#ffd4d0;
      border-color:rgba(200,111,104,.22);
      background:rgba(200,111,104,.1);
    }
    .chip,
    .filter-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      min-height:40px;
      padding:.5rem .85rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-size:.92rem;
      line-height:1;
      white-space:nowrap;
      transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }
    .chip:hover,
    .filter-chip:hover{
      transform:translateY(-1px);
      border-color:rgba(224,195,109,.24);
      color:#fff;
      background:rgba(255,255,255,.06);
      box-shadow:0 10px 22px rgba(0,0,0,.18);
    }
    .chip-active,
    .filter-chip.is-active{
      color:#fff;
      border-color:rgba(224,195,109,.32);
      background:linear-gradient(135deg, rgba(224,195,109,.16), rgba(126,228,177,.12));
      box-shadow:0 10px 24px rgba(0,0,0,.2), 0 0 0 1px rgba(224,195,109,.06) inset;
    }
    .btn-primary,
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height:46px;
      padding:.78rem 1.05rem;
      border-radius:14px;
      border:1px solid transparent;
      font-weight:700;
      font-size:.95rem;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
      white-space:nowrap;
    }
    .btn-primary:hover,
    .btn-secondary:hover{
      transform:translateY(-2px);
    }
    .btn-primary{
      color:#0b120d;
      background:linear-gradient(135deg, var(--gold), var(--gold-2));
      box-shadow:0 16px 36px rgba(224,195,109,.18);
    }
    .btn-primary:hover{
      box-shadow:0 18px 40px rgba(224,195,109,.22);
    }
    .btn-secondary{
      color:#fff;
      border-color:rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
    }
    .btn-secondary:hover{
      border-color:rgba(224,195,109,.24);
      background:rgba(255,255,255,.07);
    }
    .btn-secondary:focus-visible,
    .btn-primary:focus-visible,
    .chip:focus-visible,
    .filter-chip:focus-visible,
    input:focus-visible,
    summary:focus-visible{
      outline:2px solid rgba(224,195,109,.55);
      outline-offset:2px;
    }
    .section-label{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      color:#dfe9e1;
      font-size:.82rem;
      font-weight:700;
      letter-spacing:0;
    }
    .hero-title{
      line-height:1.06;
      font-weight:900;
    }
    .hero-copy{
      color:var(--muted);
      font-size:1rem;
      line-height:1.9;
    }
    .metric{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:150px;
      padding:1rem;
    }
    .metric-number{
      font-size:clamp(1.6rem, 2.4vw, 2.35rem);
      line-height:1;
      font-weight:900;
      color:#fff;
    }
    .metric-caption{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.7;
    }
    .card-tile{
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(15,30,23,.94), rgba(8,15,12,.96));
      box-shadow:var(--shadow-soft);
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .card-tile:hover{
      transform:translateY(-3px);
      border-color:rgba(224,195,109,.24);
      box-shadow:var(--shadow);
    }
    .card-visual{
      position:relative;
      aspect-ratio:16/10;
      border-bottom:1px solid rgba(255,255,255,.06);
      background:
        radial-gradient(circle at 18% 18%, rgba(126,228,177,.18), transparent 34%),
        radial-gradient(circle at 82% 14%, rgba(224,195,109,.14), transparent 30%),
        linear-gradient(135deg, rgba(7,17,13,.94), rgba(18,39,30,.92));
    }
    .card-visual:after{
      content:"";
      position:absolute;
      inset:12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.06);
      background:
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:22px 22px;
      opacity:.4;
      pointer-events:none;
    }
    .card-ribbon{
      position:absolute;
      top:14px;
      left:14px;
      z-index:1;
    }
    .card-burst{
      position:absolute;
      top:14px;
      right:14px;
      z-index:1;
    }
    .card-body{
      padding:1rem;
    }
    .card-title{
      font-size:1.05rem;
      line-height:1.35;
      font-weight:800;
      color:#fff;
    }
    .card-desc{
      margin-top:.55rem;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.8;
      min-height:3.4em;
    }
    .card-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      margin-top:1rem;
      padding-top:.9rem;
      border-top:1px solid rgba(255,255,255,.06);
    }
    .meta-stack{
      display:flex;
      flex-direction:column;
      gap:.25rem;
      min-width:0;
    }
    .meta-label{
      color:var(--muted-2);
      font-size:.76rem;
    }
    .meta-value{
      color:#fff;
      font-size:.96rem;
      font-weight:700;
    }
    .filter-input{
      width:100%;
      min-height:46px;
      padding:.72rem 1rem .72rem 2.8rem;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:#fff;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
    }
    .filter-input::placeholder{color:#8ea094}
    .filter-input:focus{
      border-color:rgba(224,195,109,.26);
      background:rgba(255,255,255,.05);
      outline:none;
    }
    .faq-item{
      border:1px solid var(--line);
      border-radius:16px;
      background:rgba(255,255,255,.03);
      transition:border-color .18s ease, background .18s ease, transform .18s ease;
    }
    .faq-item:hover{
      border-color:rgba(224,195,109,.18);
      background:rgba(255,255,255,.045);
    }
    .faq-item[open]{
      border-color:rgba(224,195,109,.24);
      background:rgba(255,255,255,.045);
    }
    .faq-summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.05rem;
      font-weight:700;
      color:#fff;
    }
    .faq-summary::-webkit-details-marker{display:none}
    .faq-answer{
      padding:0 1.05rem 1rem;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.85;
    }
    .divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    }
    .footer-link{
      transition:color .18s ease, transform .18s ease;
    }
    .footer-link:hover{
      color:#fff;
      transform:translateX(2px);
    }
    .mobile-cta{
      backdrop-filter:blur(16px);
      background:rgba(4,8,6,.92);
    }
    @media (max-width: 767px){
      .site-container{width:min(100%, calc(100% - 20px))}
      .hero-title{line-height:1.1}
      .card-desc{min-height:auto}
    }