/* roulang page: index */
:root{
      --ink:#12131A;
      --muted:#62606b;
      --violet:#7C3AED;
      --cyan:#22D3EE;
      --cream:#FFF8ED;
      --lime:#A3E635;
      --paper:#fffdf8;
      --line:rgba(18,19,26,.10);
      --line-dark:rgba(255,255,255,.14);
      --shadow:0 18px 55px rgba(18,19,26,.10);
      --shadow-strong:0 28px 90px rgba(124,58,237,.22);
      --radius:28px;
      --radius-lg:36px;
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 2%, rgba(124,58,237,.16), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(34,211,238,.16), transparent 28%),
        linear-gradient(180deg,#fff8ed 0%,#f7f0ff 45%,#fffdf8 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.26;
      background-image:
        linear-gradient(rgba(18,19,26,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,19,26,.035) 1px, transparent 1px);
      background-size:34px 34px;
      mask-image:linear-gradient(to bottom, black, transparent 76%);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(34,211,238,.32)}
    .site-container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
    .section{padding:84px 0}
    .section-tight{padding:58px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.42rem .75rem;
      border-radius:999px;
      color:#31224e;
      background:rgba(124,58,237,.10);
      border:1px solid rgba(124,58,237,.18);
      font-size:.86rem;
      font-weight:700;
      line-height:1.2;
    }
    .dot{width:.55rem;height:.55rem;border-radius:999px;background:linear-gradient(135deg,var(--lime),var(--cyan));box-shadow:0 0 18px rgba(163,230,53,.7)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      border-radius:999px;
      padding:.38rem .68rem;
      font-size:.78rem;
      font-weight:800;
      border:1px solid rgba(18,19,26,.10);
      background:rgba(255,255,255,.74);
      color:#2d2638;
      white-space:nowrap;
    }
    .badge.dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff8ed}
    .badge.lime{background:rgba(163,230,53,.15);border-color:rgba(163,230,53,.35);color:#31480a}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height:48px;
      border-radius:999px;
      padding:.82rem 1.25rem;
      font-weight:900;
      letter-spacing:.01em;
      border:1px solid transparent;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    }
    .btn-primary{
      color:white;
      background:linear-gradient(135deg,var(--violet),#5b7cff 48%,var(--cyan));
      box-shadow:0 16px 38px rgba(124,58,237,.28);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(124,58,237,.36)}
    .btn-primary:active,.btn-secondary:active{transform:translateY(0) scale(.99)}
    .btn-secondary{
      color:var(--ink);
      background:rgba(255,255,255,.72);
      border-color:rgba(18,19,26,.12);
      box-shadow:0 10px 30px rgba(18,19,26,.07);
    }
    .btn-secondary:hover{transform:translateY(-2px);border-color:rgba(124,58,237,.28);box-shadow:0 16px 38px rgba(18,19,26,.10)}
    .btn-dark{
      color:#fff8ed;
      background:rgba(18,19,26,.92);
      border-color:rgba(255,255,255,.10);
    }
    .btn-dark:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(18,19,26,.22)}
    .btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
      outline:3px solid rgba(34,211,238,.55);
      outline-offset:3px;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter:blur(18px);
      background:rgba(255,248,237,.78);
      border-bottom:1px solid rgba(18,19,26,.08);
      transition:box-shadow .2s ease, background .2s ease;
    }
    .site-header.scrolled{box-shadow:0 14px 38px rgba(18,19,26,.10);background:rgba(255,253,248,.92)}
    .nav-wrap{
      height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:.75rem;
      min-width:max-content;
      font-weight:950;
      letter-spacing:-.04em;
    }
    .brand-mark{
      width:44px;
      height:44px;
      border-radius:16px;
      background:linear-gradient(135deg,var(--ink),#2b2240);
      display:grid;
      place-items:center;
      box-shadow:0 16px 35px rgba(18,19,26,.18);
      position:relative;
      overflow:hidden;
    }
    .brand-mark:before{
      content:"";
      position:absolute;
      width:27px;
      height:14px;
      border-radius:8px;
      border:2px solid rgba(255,248,237,.88);
      background:rgba(34,211,238,.18);
      transform:translateY(3px);
    }
    .brand-mark:after{
      content:"";
      width:0;height:0;
      border-top:6px solid transparent;
      border-bottom:6px solid transparent;
      border-left:9px solid var(--lime);
      z-index:1;
      transform:translateX(1px);
    }
    .brand-text{font-size:1.04rem}
    .nav-links{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:.4rem;
      border:1px solid rgba(18,19,26,.08);
      padding:.32rem;
      border-radius:999px;
      background:rgba(255,255,255,.54);
    }
    .nav-links a{
      padding:.58rem .9rem;
      border-radius:999px;
      font-size:.92rem;
      font-weight:800;
      color:#3f3a48;
      transition:background .2s ease,color .2s ease,transform .2s ease;
    }
    .nav-links a:hover{background:rgba(124,58,237,.09);color:var(--violet);transform:translateY(-1px)}
    .nav-links a.active{background:var(--ink);color:#fff8ed}
    .nav-actions{display:flex;align-items:center;gap:.7rem}
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      padding:.5rem .75rem;
      border-radius:999px;
      font-size:.78rem;
      font-weight:900;
      color:#233006;
      background:rgba(163,230,53,.22);
      border:1px solid rgba(163,230,53,.42);
    }
    .menu-toggle{
      display:none;
      width:44px;height:44px;border:0;border-radius:14px;
      background:rgba(18,19,26,.92);
      color:#fff8ed;
      align-items:center;justify-content:center;
    }
    .mobile-panel{
      display:none;
      padding:0 0 18px;
    }
    .mobile-menu{
      border-radius:24px;
      padding:12px;
      background:rgba(255,255,255,.90);
      border:1px solid rgba(18,19,26,.10);
      box-shadow:var(--shadow);
    }
    .mobile-menu a{
      display:flex;
      justify-content:space-between;
      padding:13px 14px;
      border-radius:16px;
      font-weight:850;
    }
    .mobile-menu a.active{background:rgba(124,58,237,.12);color:var(--violet)}
    .hero{
      padding:44px 0 78px;
    }
    .hero-panel{
      position:relative;
      overflow:hidden;
      border-radius:42px;
      padding:34px;
      background:
        radial-gradient(circle at 18% 20%, rgba(163,230,53,.18), transparent 26%),
        radial-gradient(circle at 80% 8%, rgba(34,211,238,.28), transparent 28%),
        linear-gradient(135deg,#171821 0%,#251640 50%,#0b4a57 100%);
      color:#fff8ed;
      box-shadow:var(--shadow-strong);
    }
    .hero-panel:after{
      content:"";
      position:absolute;
      inset:auto -10% -42% -10%;
      height:58%;
      background:linear-gradient(90deg,rgba(124,58,237,.42),rgba(34,211,238,.35));
      filter:blur(60px);
      opacity:.9;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:28px;
      align-items:stretch;
    }
    h1{
      max-width:14em;
      margin:.78rem 0 1rem;
      font-size:clamp(2rem,5vw,3.45rem);
      line-height:1.08;
      font-weight:950;
      letter-spacing:-.065em;
    }
    .hero-copy{
      max-width:43em;
      color:rgba(255,248,237,.82);
      font-size:1.05rem;
      line-height:1.85;
    }
    .hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.55rem}
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-top:1.65rem;
      max-width:680px;
    }
    .metric{
      border-radius:20px;
      padding:14px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.13);
    }
    .metric strong{display:block;font-size:1.35rem;line-height:1;font-weight:950}
    .metric span{display:block;margin-top:.35rem;color:rgba(255,248,237,.72);font-size:.84rem}
    .matrix{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
      align-content:center;
    }
    .matrix-card{
      min-height:126px;
      border-radius:26px;
      padding:18px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter:blur(12px);
      transition:transform .22s ease, background .22s ease;
    }
    .matrix-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.13)}
    .matrix-card:nth-child(1){grid-row:span 2;min-height:266px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.06))}
    .matrix-card .icon{
      width:42px;height:42px;border-radius:15px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,rgba(124,58,237,.8),rgba(34,211,238,.78));
      margin-bottom:16px;
      font-weight:950;
    }
    .matrix-card h3{font-size:1.08rem;font-weight:950;margin:0 0 .42rem}
    .matrix-card p{margin:0;color:rgba(255,248,237,.72);font-size:.92rem;line-height:1.65}
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:24px;
      margin-bottom:28px;
    }
    .section-head h2{
      margin:.75rem 0 0;
      max-width:13em;
      font-size:clamp(1.8rem,3.5vw,2.45rem);
      line-height:1.16;
      font-weight:950;
      letter-spacing:-.045em;
    }
    .section-head p{
      max-width:39em;
      margin:0;
      color:var(--muted);
      font-size:1rem;
    }
    .comparison{
      border-radius:38px;
      padding:26px;
      background:
        radial-gradient(circle at 88% 0%, rgba(34,211,238,.16), transparent 26%),
        linear-gradient(180deg,#171821,#101116);
      color:#fff8ed;
      box-shadow:var(--shadow-strong);
      overflow:hidden;
    }
    .compare-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      margin-bottom:20px;
    }
    .compare-top p{margin:0;color:rgba(255,248,237,.72);max-width:43em}
    .compare-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.12)}
    .compare-table th,.compare-table td{padding:18px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.10);vertical-align:middle}
    .compare-table th{color:#fff;font-weight:950;background:rgba(255,255,255,.06)}
    .compare-table tr:last-child td{border-bottom:0}
    .compare-table td{color:rgba(255,248,237,.78)}
    .compare-table .item{color:#fff8ed;font-weight:850;width:30%}
    .compare-table .featured{background:linear-gradient(180deg,rgba(124,58,237,.22),rgba(34,211,238,.10))}
    .check{
      display:inline-grid;
      place-items:center;
      width:24px;height:24px;border-radius:999px;
      color:#17210a;background:var(--lime);font-weight:950;margin-right:.45rem;
    }
    .mobile-compare{display:none}
    .tier-track{
      display:grid;
      grid-template-columns:.85fr 1.1fr .95fr;
      gap:18px;
      align-items:stretch;
    }
    .tier-card{
      position:relative;
      border-radius:32px;
      padding:24px;
      background:rgba(255,255,255,.74);
      border:1px solid rgba(18,19,26,.10);
      box-shadow:var(--shadow);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .tier-card:hover{transform:translateY(-5px);box-shadow:0 24px 70px rgba(18,19,26,.14);border-color:rgba(124,58,237,.24)}
    .tier-card.primary{
      background:linear-gradient(135deg,#171821,#2b1750 70%,#0f5361);
      color:#fff8ed;
      transform:translateY(-14px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(255,255,255,.18);
    }
    .tier-card.primary p,.tier-card.primary li{color:rgba(255,248,237,.75)}
    .tier-card h3{font-size:1.34rem;font-weight:950;margin:16px 0 8px;letter-spacing:-.03em}
    .tier-card p{color:var(--muted);margin:0 0 16px}
    .tier-card ul{padding:0;margin:0 0 18px;list-style:none;display:grid;gap:10px}
    .tier-card li{display:flex;gap:9px;color:#46414c;font-size:.95rem}
    .content-grid{
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:18px;
    }
    .preview-card{
      border-radius:30px;
      padding:22px;
      min-height:220px;
      background:rgba(255,255,255,.76);
      border:1px solid rgba(18,19,26,.10);
      box-shadow:var(--shadow);
      transition:transform .22s ease, box-shadow .22s ease;
      overflow:hidden;
      position:relative;
    }
    .preview-card:hover{transform:translateY(-4px);box-shadow:0 24px 66px rgba(18,19,26,.13)}
    .preview-card.large{
      grid-column:span 6;
      min-height:370px;
      background:
        radial-gradient(circle at 75% 20%, rgba(34,211,238,.20), transparent 30%),
        linear-gradient(135deg,#fff,#f3eaff);
    }
    .preview-card.small{grid-column:span 3}
    .preview-card.medium{grid-column:span 6;min-height:240px}
    .subtitle-graphic{
      margin-top:24px;
      display:grid;
      gap:10px;
    }
    .subtitle-line{
      height:16px;
      border-radius:999px;
      background:linear-gradient(90deg,rgba(124,58,237,.16),rgba(34,211,238,.22));
      position:relative;
      overflow:hidden;
    }
    .subtitle-line:nth-child(2){width:78%}
    .subtitle-line:nth-child(3){width:62%}
    .subtitle-line:after{
      content:"";
      position:absolute;
      inset:0;
      width:42%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
      animation:shine 3s infinite;
    }
    @keyframes shine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(260%)}}
    .preview-card h3{font-size:1.18rem;font-weight:950;margin:15px 0 8px;letter-spacing:-.025em}
    .preview-card p{color:var(--muted);margin:0 0 18px;font-size:.96rem}
    .guide-wrap{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:18px;
      align-items:stretch;
    }
    .guide-panel{
      border-radius:34px;
      padding:28px;
      background:linear-gradient(135deg,#191a22,#2d174e);
      color:#fff8ed;
      box-shadow:var(--shadow-strong);
    }
    .guide-panel p{color:rgba(255,248,237,.74)}
    .steps{
      display:grid;
      gap:14px;
    }
    .step{
      display:grid;
      grid-template-columns:54px 1fr;
      gap:16px;
      padding:18px;
      border-radius:26px;
      background:rgba(255,255,255,.74);
      border:1px solid rgba(18,19,26,.10);
      box-shadow:0 12px 34px rgba(18,19,26,.07);
    }
    .step-num{
      width:48px;height:48px;border-radius:18px;
      display:grid;place-items:center;
      color:white;font-weight:950;
      background:linear-gradient(135deg,var(--violet),var(--cyan));
    }
    .step h3{margin:0 0 4px;font-size:1.06rem;font-weight:950}
    .step p{margin:0;color:var(--muted);font-size:.94rem}
    .info-layout{
      display:grid;
      grid-template-columns:1.1fr .75fr;
      gap:22px;
      align-items:start;
    }
    .info-list{
      border-radius:32px;
      background:rgba(255,255,255,.76);
      border:1px solid rgba(18,19,26,.10);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .info-item{
      display:grid;
      grid-template-columns:88px 1fr auto;
      gap:16px;
      align-items:center;
      padding:18px;
      border-bottom:1px solid rgba(18,19,26,.08);
      transition:background .2s ease;
    }
    .info-item:last-child{border-bottom:0}
    .info-item:hover{background:rgba(124,58,237,.06)}
    .info-date{
      border-radius:18px;
      padding:10px;
      background:rgba(18,19,26,.06);
      text-align:center;
      font-weight:950;
      line-height:1.25;
    }
    .info-date span{display:block;font-size:.72rem;color:var(--muted);font-weight:800}
    .info-item h3{margin:0;font-size:1.02rem;font-weight:950}
    .info-item p{margin:4px 0 0;color:var(--muted);font-size:.92rem}
    .recommend{
      border-radius:32px;
      padding:24px;
      background:
        radial-gradient(circle at 80% 0%, rgba(34,211,238,.20), transparent 28%),
        linear-gradient(180deg,#fff,#fff7e8);
      border:1px solid rgba(18,19,26,.10);
      box-shadow:var(--shadow);
    }
    .rank-list{display:grid;gap:12px;margin-top:18px}
    .rank{
      display:grid;
      grid-template-columns:36px 1fr;
      gap:12px;
      align-items:start;
      padding:14px;
      border-radius:20px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(18,19,26,.08);
    }
    .rank b{
      width:32px;height:32px;border-radius:12px;
      display:grid;place-items:center;
      background:var(--ink);color:#fff8ed;
    }
    .rank strong{display:block;font-weight:950}
    .rank span{display:block;color:var(--muted);font-size:.9rem;margin-top:2px}
    .proof-grid{
      display:grid;
      grid-template-columns:.78fr 1.22fr;
      gap:20px;
    }
    .score-card{
      border-radius:34px;
      padding:28px;
      background:linear-gradient(135deg,#171821,#0e4a58);
      color:#fff8ed;
      box-shadow:var(--shadow-strong);
    }
    .score{
      font-size:4rem;
      line-height:1;
      font-weight:950;
      letter-spacing:-.08em;
      margin:18px 0 8px;
    }
    .review-list{display:grid;gap:14px}
    .review{
      border-radius:28px;
      padding:20px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(18,19,26,.10);
      box-shadow:0 14px 38px rgba(18,19,26,.08);
    }
    .review p{margin:0;color:#46414c}
    .review footer{margin-top:12px;color:var(--muted);font-size:.9rem}
    .faq-wrap{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:26px;
      align-items:start;
    }
    .faq-side{
      position:sticky;
      top:104px;
      border-radius:34px;
      padding:28px;
      background:rgba(255,255,255,.76);
      border:1px solid rgba(18,19,26,.10);
      box-shadow:var(--shadow);
    }
    .faq-side h2{font-size:2.1rem;line-height:1.18;font-weight:950;margin:14px 0 12px;letter-spacing:-.045em}
    .faq-side p{color:var(--muted)}
    .faq-list{display:grid;gap:14px}
    details{
      border-radius:26px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(18,19,26,.10);
      box-shadow:0 12px 34px rgba(18,19,26,.07);
      overflow:hidden;
      transition:border-color .2s ease, background .2s ease;
    }
    details[open]{border-color:rgba(124,58,237,.34);background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(247,240,255,.86))}
    summary{
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:20px 22px;
      cursor:pointer;
      font-weight:950;
    }
    summary::-webkit-details-marker{display:none}
    summary:after{
      content:"+";
      flex:0 0 auto;
      width:30px;height:30px;
      display:grid;place-items:center;
      border-radius:999px;
      background:rgba(124,58,237,.10);
      color:var(--violet);
      font-size:1.25rem;
      transition:transform .2s ease;
    }
    details[open] summary:after{content:"−";transform:rotate(180deg)}
    details p{margin:0;padding:0 22px 22px;color:var(--muted)}
    .apply-panel{
      position:relative;
      overflow:hidden;
      border-radius:42px;
      padding:30px;
      background:
        radial-gradient(circle at 18% 10%, rgba(163,230,53,.20), transparent 26%),
        radial-gradient(circle at 88% 12%, rgba(34,211,238,.28), transparent 30%),
        linear-gradient(135deg,#171821,#2a174d 55%,#0e4b59);
      color:#fff8ed;
      box-shadow:var(--shadow-strong);
    }
    .apply-grid{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:24px;
      align-items:start;
      position:relative;
      z-index:1;
    }
    .price-card{
      border-radius:30px;
      padding:22px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.14);
      margin-top:20px;
    }
    .price{font-size:2.5rem;font-weight:950;letter-spacing:-.06em}
    .price small{font-size:.95rem;color:rgba(255,248,237,.64);font-weight:800}
    .apply-form{
      border-radius:32px;
      padding:22px;
      background:rgba(255,255,255,.92);
      color:var(--ink);
      border:1px solid rgba(255,255,255,.25);
      box-shadow:0 18px 50px rgba(18,19,26,.18);
    }
    .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .field{display:grid;gap:7px}
    .field.full{grid-column:1/-1}
    .field label{font-size:.88rem;font-weight:900;color:#3a3542}
    .field input,.field select,.field textarea{
      width:100%;
      border:1px solid rgba(18,19,26,.13);
      border-radius:18px;
      padding:13px 14px;
      background:#fffdf8;
      color:var(--ink);
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .field textarea{min-height:104px;resize:vertical}
    .field input:focus,.field select:focus,.field textarea:focus{
      border-color:rgba(34,211,238,.80);
      box-shadow:0 0 0 4px rgba(34,211,238,.15);
      background:#fff;
      outline:none;
    }
    .hint{color:var(--muted);font-size:.86rem;margin-top:10px}
    .footer{
      padding:54px 0 30px;
      background:#101116;
      color:#fff8ed;
      margin-top:72px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr;
      gap:26px;
      align-items:start;
    }
    .footer p{color:rgba(255,248,237,.66);max-width:39em}
    .footer h3{font-size:1rem;font-weight:950;margin:0 0 12px}
    .footer a{display:block;color:rgba(255,248,237,.70);margin:8px 0;transition:color .2s ease,transform .2s ease}
    .footer a:hover{color:#fff;transform:translateX(3px)}
    .copyright{
      margin-top:34px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.10);
      color:rgba(255,248,237,.55);
      font-size:.9rem;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:12px;
    }
    @media (max-width:1024px){
      .site-container{width:min(100% - 32px,var(--container))}
      .nav-links,.status-pill{display:none}
      .menu-toggle{display:flex}
      .mobile-panel.open{display:block}
      .hero-grid,.guide-wrap,.info-layout,.proof-grid,.faq-wrap,.apply-grid{grid-template-columns:1fr}
      .matrix-card:nth-child(1){grid-row:auto;min-height:150px}
      .tier-track{grid-template-columns:1fr}
      .tier-card.primary{transform:none}
      .preview-card.large,.preview-card.small,.preview-card.medium{grid-column:span 6}
      .faq-side{position:static}
    }
    @media (max-width:768px){
      .section{padding:62px 0}
      .section-head{display:block}
      .section-head p{margin-top:12px}
      .hero{padding:28px 0 58px}
      .hero-panel{border-radius:30px;padding:24px}
      .hero-metrics{grid-template-columns:1fr}
      .matrix{grid-template-columns:1fr}
      .compare-table{display:none}
      .mobile-compare{display:grid;gap:14px}
      .compare-card{
        border-radius:24px;
        padding:18px;
        border:1px solid rgba(255,255,255,.12);
        background:rgba(255,255,255,.07);
      }
      .compare-card h3{margin:0 0 10px;font-weight:950}
      .compare-card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:rgba(255,248,237,.76)}
      .preview-card.large,.preview-card.small,.preview-card.medium{grid-column:1/-1}
      .info-item{grid-template-columns:1fr}
      .form-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .nav-wrap{height:66px}
      .brand-text{font-size:.96rem}
    }
    @media (max-width:520px){
      .site-container{width:min(100% - 24px,var(--container))}
      h1{font-size:2.05rem}
      .hero-copy{font-size:.98rem}
      .hero-cta .btn,.nav-actions .btn{width:100%}
      .nav-actions .btn{display:none}
      .compare-top{display:block}
      .apply-panel,.comparison{padding:20px;border-radius:30px}
      .section-head h2,.faq-side h2{font-size:1.72rem}
      .copyright{display:block}
    }

/* roulang page: category1 */
:root{
      --ink:#12131A;
      --ink-2:#242635;
      --muted:#686B7A;
      --warm:#FFF8ED;
      --paper:#FFFFFF;
      --soft:#F4ECFF;
      --purple:#7C3AED;
      --cyan:#22D3EE;
      --green:#A3E635;
      --line:rgba(18,19,26,.11);
      --line-dark:rgba(255,255,255,.14);
      --shadow:0 24px 70px rgba(18,19,26,.12);
      --shadow-soft:0 14px 36px rgba(124,58,237,.14);
      --radius:28px;
      --radius-lg:36px;
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 4%, rgba(34,211,238,.16), transparent 30%),
        radial-gradient(circle at 92% 10%, rgba(124,58,237,.18), transparent 34%),
        linear-gradient(180deg,#fffaf1 0%,#f8f3ff 44%,#fff8ed 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.32;
      background-image:
        linear-gradient(rgba(18,19,26,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,19,26,.025) 1px, transparent 1px);
      background-size:28px 28px;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    .site-container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
    .section{padding:86px 0}
    .section-tight{padding:56px 0}
    .eyebrow,.badge,.status-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      border:1px solid rgba(124,58,237,.18);
      background:rgba(255,255,255,.72);
      color:var(--ink-2);
      box-shadow:0 10px 26px rgba(124,58,237,.08);
      font-size:13px;
      font-weight:700;
      line-height:1;
      white-space:nowrap;
    }
    .eyebrow{padding:9px 13px}
    .badge{padding:8px 12px}
    .dot{
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--green);
      box-shadow:0 0 0 5px rgba(163,230,53,.18);
      flex:0 0 auto;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      padding:0 20px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:800;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
      outline:none;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0)}
    .btn:focus-visible{box-shadow:0 0 0 4px rgba(34,211,238,.28)}
    .btn-primary{
      color:white;
      background:linear-gradient(135deg,var(--purple),var(--cyan));
      box-shadow:0 14px 32px rgba(124,58,237,.26);
    }
    .btn-primary:hover{box-shadow:0 18px 44px rgba(34,211,238,.28)}
    .btn-secondary{
      color:var(--ink);
      background:rgba(255,255,255,.78);
      border-color:rgba(18,19,26,.12);
      box-shadow:0 12px 28px rgba(18,19,26,.08);
    }
    .btn-dark{
      color:var(--warm);
      background:rgba(18,19,26,.92);
      border-color:rgba(255,255,255,.12);
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter:saturate(150%) blur(18px);
      background:rgba(255,248,237,.78);
      border-bottom:1px solid rgba(18,19,26,.08);
      transition:box-shadow .25s ease, background .25s ease;
    }
    .site-header.is-scrolled{
      background:rgba(255,248,237,.92);
      box-shadow:0 16px 44px rgba(18,19,26,.10);
    }
    .nav-wrap{
      height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      font-weight:900;
      letter-spacing:-.02em;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:16px;
      background:
        linear-gradient(135deg,rgba(124,58,237,.96),rgba(34,211,238,.96));
      position:relative;
      box-shadow:0 14px 28px rgba(124,58,237,.24);
    }
    .brand-mark::before{
      content:"";
      position:absolute;
      left:9px;
      right:9px;
      top:12px;
      height:5px;
      border-radius:999px;
      background:white;
      box-shadow:0 10px 0 rgba(255,255,255,.82);
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      right:9px;
      bottom:8px;
      width:0;
      height:0;
      border-top:6px solid transparent;
      border-bottom:6px solid transparent;
      border-left:9px solid var(--green);
    }
    .brand-text{font-size:18px}
    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
      padding:6px;
      border:1px solid rgba(18,19,26,.08);
      border-radius:999px;
      background:rgba(255,255,255,.62);
    }
    .nav-links a{
      padding:10px 14px;
      border-radius:999px;
      color:var(--muted);
      font-size:14px;
      font-weight:800;
      transition:color .2s ease, background .2s ease, transform .2s ease;
    }
    .nav-links a:hover{color:var(--ink);background:rgba(124,58,237,.08);transform:translateY(-1px)}
    .nav-links a.active{
      color:white;
      background:linear-gradient(135deg,var(--purple),var(--cyan));
      box-shadow:0 12px 24px rgba(124,58,237,.20);
    }
    .nav-actions{display:flex;align-items:center;gap:10px}
    .status-pill{padding:10px 12px;color:var(--ink);background:rgba(255,255,255,.68)}
    .menu-toggle{
      display:none;
      width:44px;
      height:44px;
      border:1px solid rgba(18,19,26,.10);
      border-radius:15px;
      background:white;
      color:var(--ink);
      font-size:20px;
    }
    .mobile-panel{display:none}
    .breadcrumb{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      color:var(--muted);
      font-size:14px;
      padding:22px 0 0;
    }
    .breadcrumb a{font-weight:800;color:var(--ink)}
    .breadcrumb span:last-child{color:var(--purple);font-weight:800}
    .hero{
      padding:34px 0 70px;
    }
    .hero-panel{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-lg);
      padding:34px;
      background:
        linear-gradient(135deg,rgba(255,255,255,.92),rgba(244,236,255,.90)),
        radial-gradient(circle at 86% 12%,rgba(34,211,238,.22),transparent 35%);
      border:1px solid rgba(255,255,255,.72);
      box-shadow:var(--shadow);
    }
    .hero-panel::after{
      content:"";
      position:absolute;
      inset:auto -80px -120px auto;
      width:360px;
      height:360px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(124,58,237,.22),transparent 68%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:34px;
      align-items:stretch;
    }
    h1{
      margin:16px 0 18px;
      font-size:clamp(32px,5vw,54px);
      line-height:1.08;
      font-weight:900;
      letter-spacing:-.055em;
      max-width:11em;
    }
    .lead{
      max-width:43em;
      color:#4b4e5e;
      font-size:17px;
      line-height:1.85;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      margin-top:30px;
    }
    .metric{
      border:1px solid rgba(18,19,26,.08);
      background:rgba(255,255,255,.70);
      border-radius:22px;
      padding:16px;
    }
    .metric strong{display:block;font-size:26px;line-height:1;font-weight:900}
    .metric span{display:block;margin-top:7px;color:var(--muted);font-size:13px;font-weight:700}
    .whitepaper-card{
      min-height:100%;
      border-radius:32px;
      padding:24px;
      background:linear-gradient(180deg,var(--ink),#202235);
      color:var(--warm);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 24px 70px rgba(18,19,26,.22);
    }
    .cover{
      border-radius:26px;
      padding:22px;
      background:
        linear-gradient(135deg,rgba(124,58,237,.92),rgba(34,211,238,.84)),
        repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 2px,transparent 2px 10px);
      min-height:190px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
      position:relative;
    }
    .cover::after{
      content:"";
      position:absolute;
      right:18px;
      bottom:18px;
      width:96px;
      height:58px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.45);
      background:rgba(255,255,255,.16);
      box-shadow:inset 0 0 0 10px rgba(255,255,255,.06);
    }
    .cover-title{font-size:24px;font-weight:900;line-height:1.22;max-width:8em}
    .cover-line{display:flex;gap:8px;flex-wrap:wrap}
    .cover-line span{height:8px;border-radius:999px;background:rgba(255,255,255,.78)}
    .cover-line span:nth-child(1){width:78px}
    .cover-line span:nth-child(2){width:118px}
    .cover-line span:nth-child(3){width:54px;background:var(--green)}
    .toc{
      margin:18px 0 0;
      display:grid;
      gap:10px;
    }
    .toc li{
      list-style:none;
      display:flex;
      justify-content:space-between;
      gap:16px;
      padding:12px 0;
      border-bottom:1px solid var(--line-dark);
      color:rgba(255,248,237,.86);
      font-weight:700;
    }
    .toc span{color:var(--green);font-size:13px}
    .section-heading{
      display:grid;
      grid-template-columns:minmax(0,.9fr) minmax(260px,.45fr);
      gap:28px;
      align-items:end;
      margin-bottom:28px;
    }
    .section-heading h2{
      margin:12px 0 0;
      font-size:clamp(28px,4vw,38px);
      line-height:1.18;
      font-weight:900;
      letter-spacing:-.035em;
      max-width:14em;
    }
    .section-heading p{color:var(--muted);margin:0;max-width:36em}
    .filter-shell{
      border-radius:30px;
      padding:18px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(18,19,26,.08);
      box-shadow:var(--shadow-soft);
    }
    .filter-scroll{
      display:flex;
      gap:10px;
      overflow-x:auto;
      padding-bottom:4px;
      scrollbar-width:thin;
    }
    .filter-chip{
      flex:0 0 auto;
      border:1px solid rgba(18,19,26,.10);
      background:white;
      color:var(--ink-2);
      border-radius:999px;
      padding:11px 15px;
      font-weight:800;
      font-size:14px;
      transition:background .2s ease, transform .2s ease, border-color .2s ease;
    }
    .filter-chip:hover,.filter-chip.active{
      transform:translateY(-1px);
      border-color:rgba(124,58,237,.28);
      background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(34,211,238,.12));
    }
    .content-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
      align-items:start;
    }
    .feature-card,.list-card,.process-card,.faq-card,.cta-panel{
      border:1px solid rgba(18,19,26,.09);
      background:rgba(255,255,255,.76);
      border-radius:var(--radius);
      box-shadow:0 16px 40px rgba(18,19,26,.08);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .feature-card:hover,.list-card:hover,.process-card:hover{
      transform:translateY(-4px);
      box-shadow:0 26px 62px rgba(18,19,26,.12);
      border-color:rgba(124,58,237,.22);
    }
    .feature-card{
      padding:26px;
      min-height:100%;
      background:
        radial-gradient(circle at 88% 12%,rgba(34,211,238,.16),transparent 32%),
        linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,248,237,.74));
    }
    .abstract-bars{
      display:grid;
      gap:10px;
      margin:22px 0;
    }
    .abstract-bars span{
      height:16px;
      border-radius:999px;
      background:linear-gradient(90deg,rgba(124,58,237,.92),rgba(34,211,238,.22));
    }
    .abstract-bars span:nth-child(2){width:76%;background:linear-gradient(90deg,rgba(34,211,238,.92),rgba(163,230,53,.35))}
    .abstract-bars span:nth-child(3){width:58%;background:linear-gradient(90deg,rgba(18,19,26,.86),rgba(124,58,237,.26))}
    .card-title{
      font-size:22px;
      line-height:1.32;
      font-weight:900;
      letter-spacing:-.02em;
      margin:14px 0 8px;
    }
    .card-text{color:var(--muted);margin:0}
    .list-stack{display:grid;gap:14px}
    .list-card{
      padding:18px;
      display:grid;
      grid-template-columns:92px minmax(0,1fr) auto;
      gap:16px;
      align-items:center;
    }
    .visual-tile{
      width:92px;
      height:78px;
      border-radius:22px;
      background:
        linear-gradient(135deg,rgba(18,19,26,.94),rgba(124,58,237,.82));
      position:relative;
      overflow:hidden;
    }
    .visual-tile::before,.visual-tile::after{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      height:7px;
      border-radius:999px;
      background:rgba(255,255,255,.82);
    }
    .visual-tile::before{top:22px}
    .visual-tile::after{top:39px;width:48px;right:auto;background:var(--green)}
    .list-card h3{font-size:18px;font-weight:900;margin:0 0 4px;line-height:1.35}
    .list-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
    .side-action{display:grid;gap:8px;justify-items:end}
    .mini-btn{
      border:1px solid rgba(18,19,26,.10);
      border-radius:999px;
      padding:9px 12px;
      background:white;
      font-size:13px;
      font-weight:900;
      color:var(--purple);
      transition:transform .2s ease, background .2s ease;
      white-space:nowrap;
    }
    .mini-btn:hover{transform:translateY(-1px);background:rgba(124,58,237,.08)}
    .process-wrap{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
    }
    .process-card{
      padding:22px;
      position:relative;
      overflow:hidden;
    }
    .process-card::before{
      content:attr(data-step);
      position:absolute;
      right:18px;
      top:12px;
      font-size:46px;
      line-height:1;
      font-weight:900;
      color:rgba(124,58,237,.10);
    }
    .process-card h3{font-size:19px;font-weight:900;margin:0 0 8px}
    .process-card p{margin:0;color:var(--muted)}
    .dark-band{
      border-radius:var(--radius-lg);
      padding:32px;
      background:
        radial-gradient(circle at 12% 20%,rgba(34,211,238,.18),transparent 32%),
        linear-gradient(135deg,var(--ink),#202235);
      color:var(--warm);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 28px 76px rgba(18,19,26,.22);
    }
    .dark-grid{
      display:grid;
      grid-template-columns:.85fr 1.15fr;
      gap:24px;
      align-items:start;
    }
    .compare-list{display:grid;gap:12px}
    .compare-item{
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:12px;
      padding:15px;
      border-radius:20px;
      background:rgba(255,255,255,.07);
      border:1px solid var(--line-dark);
    }
    .check{
      width:26px;
      height:26px;
      display:grid;
      place-items:center;
      border-radius:999px;
      background:rgba(163,230,53,.18);
      color:var(--green);
      font-weight:900;
    }
    .compare-item strong{font-weight:900}
    .compare-item span{color:rgba(255,248,237,.70);font-size:13px;font-weight:700}
    .faq-layout{
      display:grid;
      grid-template-columns:.78fr 1.22fr;
      gap:28px;
      align-items:start;
    }
    .faq-card{padding:10px;background:rgba(255,255,255,.78)}
    details{
      border-radius:22px;
      border:1px solid transparent;
      padding:0 16px;
      transition:background .2s ease,border-color .2s ease;
    }
    details + details{margin-top:8px}
    details[open]{
      background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(34,211,238,.08));
      border-color:rgba(124,58,237,.18);
    }
    summary{
      list-style:none;
      cursor:pointer;
      padding:17px 4px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      font-weight:900;
    }
    summary::-webkit-details-marker{display:none}
    summary::after{
      content:"+";
      display:grid;
      place-items:center;
      width:28px;
      height:28px;
      border-radius:999px;
      background:rgba(18,19,26,.06);
      color:var(--purple);
      flex:0 0 auto;
      transition:transform .2s ease;
    }
    details[open] summary::after{content:"";transform:rotate(90deg);background:linear-gradient(135deg,var(--purple),var(--cyan))}
    details p{
      margin:0;
      padding:0 4px 18px;
      color:var(--muted);
      line-height:1.8;
    }
    .cta-panel{
      overflow:hidden;
      padding:0;
      background:linear-gradient(135deg,rgba(124,58,237,.94),rgba(34,211,238,.82));
      color:white;
      border-color:rgba(255,255,255,.35);
    }
    .cta-inner{
      display:grid;
      grid-template-columns:1fr .95fr;
      gap:24px;
      padding:34px;
      align-items:center;
      background:radial-gradient(circle at 88% 18%,rgba(163,230,53,.22),transparent 30%);
    }
    .form-card{
      border-radius:28px;
      background:rgba(255,255,255,.92);
      color:var(--ink);
      padding:22px;
      box-shadow:0 24px 56px rgba(18,19,26,.18);
    }
    .form-grid{display:grid;gap:12px}
    .field{
      width:100%;
      min-height:50px;
      border-radius:18px;
      border:1px solid rgba(18,19,26,.12);
      background:white;
      padding:0 15px;
      color:var(--ink);
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease;
    }
    textarea.field{padding-top:13px;min-height:92px;resize:vertical}
    .field:focus{
      border-color:rgba(34,211,238,.70);
      box-shadow:0 0 0 4px rgba(34,211,238,.16);
    }
    footer{
      margin-top:40px;
      padding:34px 0;
      background:var(--ink);
      color:rgba(255,248,237,.76);
      border-top:1px solid rgba(255,255,255,.10);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1fr auto;
      gap:22px;
      align-items:center;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--warm);
      font-weight:900;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      justify-content:flex-end;
      font-weight:800;
      font-size:14px;
    }
    .footer-links a:hover{color:white}
    .footer-note{margin-top:12px;color:rgba(255,248,237,.58);font-size:13px}
    @media (max-width:1024px){
      .nav-links{display:none}
      .status-pill{display:none}
      .menu-toggle{display:grid;place-items:center}
      .mobile-panel{
        display:block;
        max-height:0;
        overflow:hidden;
        transition:max-height .25s ease;
      }
      .mobile-panel.open{max-height:360px}
      .mobile-menu{
        margin:0 0 16px;
        padding:12px;
        border-radius:24px;
        background:rgba(255,255,255,.90);
        border:1px solid rgba(18,19,26,.09);
        box-shadow:0 18px 42px rgba(18,19,26,.10);
        display:grid;
        gap:8px;
      }
      .mobile-menu a{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:13px 14px;
        border-radius:17px;
        color:var(--ink);
        font-weight:900;
      }
      .mobile-menu a.active{background:linear-gradient(135deg,var(--purple),var(--cyan));color:white}
      .mobile-menu span{font-size:12px;opacity:.72}
      .hero-grid,.content-grid,.dark-grid,.faq-layout,.cta-inner{grid-template-columns:1fr}
      .process-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
      .section-heading{grid-template-columns:1fr}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 28px,var(--container))}
      .nav-wrap{height:66px}
      .brand-text{font-size:16px}
      .brand-mark{width:38px;height:38px;border-radius:14px}
      .nav-actions .btn{display:none}
      .section{padding:62px 0}
      .hero{padding:22px 0 52px}
      .hero-panel,.dark-band,.cta-inner{padding:22px;border-radius:28px}
      .hero-metrics{grid-template-columns:1fr}
      .list-card{grid-template-columns:74px 1fr}
      .visual-tile{width:74px;height:66px}
      .side-action{grid-column:1 / -1;justify-items:start;display:flex;flex-wrap:wrap}
      .footer-grid{grid-template-columns:1fr}
      .footer-links{justify-content:flex-start}
    }
    @media (max-width:520px){
      h1{font-size:32px;max-width:100%}
      .lead{font-size:15px}
      .hero-actions{display:grid}
      .btn{width:100%}
      .process-wrap{grid-template-columns:1fr}
      .cover{min-height:166px}
      .section-heading h2{font-size:27px}
      .filter-shell{margin-inline:-2px}
      .breadcrumb{font-size:13px}
    }