/* roulang page: index */
:root{
      --bg:#0b1220;
      --bg-2:#0f1728;
      --panel:#10192d;
      --panel-2:#13203a;
      --card:#111b31;
      --card-soft:#17243d;
      --text:#eef3ff;
      --muted:#a9b5d0;
      --soft:#8090b1;
      --line:rgba(255,255,255,.09);
      --line-2:rgba(255,255,255,.14);
      --accent:#ff4d2d;
      --accent-2:#ff8a1f;
      --accent-3:#ffd36e;
      --good:#35d08c;
      --bad:#ff6b6b;
      --shadow:0 24px 60px rgba(0,0,0,.35);
      --shadow-soft:0 12px 30px rgba(0,0,0,.22);
      --radius:24px;
      --radius-sm:16px;
      --radius-xs:12px;
      --container:1200px;
      --space:clamp(16px,2vw,28px);
      --transition:.25s ease;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(255,77,45,.18), transparent 26%),
        radial-gradient(circle at 85% 15%, rgba(255,138,31,.18), transparent 24%),
        linear-gradient(180deg, #07101d 0%, #0b1220 34%, #0a1220 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
      background-size:44px 44px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.34), transparent 88%);
      opacity:.5;
      z-index:0;
    }
    a{color:inherit;text-decoration:none;transition:color var(--transition), opacity var(--transition), transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition)}
    a:hover{color:#fff}
    img{max-width:100%;display:block;border:0}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(255,77,45,.3);color:#fff}
    .page-wrap{position:relative;z-index:1}
    .grid-container{max-width:var(--container)}
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      backdrop-filter:blur(18px);
      background:rgba(10,15,27,.84);
      border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow:0 1px 0 rgba(255,255,255,.04);
    }
    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:18px 0;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      color:#fff;
      font-weight:800;
      letter-spacing:.03em;
    }
    .brand-mark{
      width:42px;height:42px;border-radius:14px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#fff;
      box-shadow:0 12px 28px rgba(255,77,45,.35);
      position:relative;
      overflow:hidden;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:auto -12px -12px auto;
      width:20px;height:20px;
      border-radius:50%;
      background:rgba(255,255,255,.16);
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.1;
    }
    .brand-text strong{font-size:1.04rem}
    .brand-text span{font-size:.77rem;color:var(--muted);font-weight:500;margin-top:4px}
    .nav-wrap{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
      list-style:none;
      margin:0;
      padding:0;
    }
    .nav-links a{
      position:relative;
      display:inline-flex;
      align-items:center;
      padding:10px 14px;
      border-radius:999px;
      color:var(--muted);
      font-weight:600;
      letter-spacing:.01em;
      border:1px solid transparent;
    }
    .nav-links a:hover{
      color:#fff;
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.06);
      transform:translateY(-1px);
    }
    .nav-links a.active,
    .nav-links a[aria-current="page"]{
      color:#fff;
      background:rgba(255,77,45,.14);
      border-color:rgba(255,77,45,.34);
      box-shadow:0 8px 20px rgba(255,77,45,.12);
    }
    .nav-links a.active::after,
    .nav-links a[aria-current="page"]::after{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      bottom:7px;
      height:2px;
      border-radius:2px;
      background:linear-gradient(90deg, var(--accent), var(--accent-2));
      opacity:.95;
    }
    .menu-toggle{
      display:none;
      align-items:center;
      justify-content:center;
      width:48px;height:48px;
      border-radius:14px;
      background:rgba(255,255,255,.05);
      color:#fff;
      border:1px solid rgba(255,255,255,.08);
      cursor:pointer;
      transition:all var(--transition);
    }
    .menu-toggle:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
    .hero{
      position:relative;
      padding:34px 0 28px;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(6,10,18,.84) 0%, rgba(6,10,18,.72) 42%, rgba(6,10,18,.6) 100%),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
      filter:saturate(1.05);
      transform:scale(1.01);
      z-index:-2;
    }
    .hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 20% 20%, rgba(255,77,45,.24), transparent 30%),
                 radial-gradient(circle at 76% 22%, rgba(255,138,31,.2), transparent 28%);
      z-index:-1;
    }
    .hero-inner{
      min-height:620px;
      padding:32px 0;
      display:flex;
      align-items:center;
    }
    .hero-content{
      padding:28px 0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      color:#fff;
      border:1px solid rgba(255,255,255,.1);
      font-size:.88rem;
      letter-spacing:.02em;
      box-shadow:var(--shadow-soft);
    }
    .eyebrow i{color:var(--accent-3)}
    .hero h1{
      margin:18px 0 14px;
      font-size:clamp(2.45rem,5.3vw,4.85rem);
      line-height:1.02;
      letter-spacing:-.04em;
      max-width:10.5ch;
      text-wrap:balance;
    }
    .hero p{
      max-width:40rem;
      color:#d9e1f3;
      font-size:1.05rem;
      margin:0 0 22px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin:18px 0 18px;
    }
    .button{
      margin:0;
      border-radius:999px;
      padding:14px 22px;
      font-weight:700;
      letter-spacing:.01em;
      transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
      border:1px solid transparent;
    }
    .button:hover,
    .button:focus{
      transform:translateY(-2px);
      box-shadow:0 14px 28px rgba(0,0,0,.24);
    }
    .button.primary{
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#fff;
      box-shadow:0 16px 34px rgba(255,77,45,.28);
    }
    .button.primary:hover{color:#fff}
    .button.secondary{
      background:rgba(255,255,255,.05);
      color:#fff;
      border-color:rgba(255,255,255,.12);
    }
    .button.ghost{
      background:transparent;
      color:#fff;
      border-color:rgba(255,255,255,.18);
    }
    .hero-points{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:10px;
    }
    .point{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:#eff4ff;
      font-size:.94rem;
    }
    .point i{color:var(--good)}
    .hero-panel{
      position:relative;
      padding:0;
    }
    .stage{
      position:relative;
      border-radius:28px;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(12,18,33,.22), rgba(12,18,33,.84)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      border:1px solid rgba(255,255,255,.1);
      box-shadow:var(--shadow);
      padding:22px;
      min-height:540px;
    }
    .stage::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(10,15,27,.1), rgba(10,15,27,.76));
    }
    .stage > *{position:relative;z-index:1}
    .stage-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:18px;
    }
    .price-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,77,45,.18);
      border:1px solid rgba(255,77,45,.28);
      color:#fff;
      font-weight:700;
      white-space:nowrap;
    }
    .price-badge strong{
      color:#fff;
      font-size:1.2rem;
      letter-spacing:.01em;
    }
    .stage-caption{
      color:#d7deef;
      max-width:16rem;
      font-size:.94rem;
      text-align:right;
    }
    .progress-wrap{
      display:grid;
      grid-template-columns:120px 1fr;
      gap:18px;
      align-items:center;
      padding:18px;
      border-radius:22px;
      background:rgba(8,12,22,.62);
      border:1px solid rgba(255,255,255,.08);
      margin-bottom:18px;
      backdrop-filter:blur(12px);
    }
    .progress-ring{
      width:120px;height:120px;
      border-radius:50%;
      background:conic-gradient(var(--accent) calc(var(--progress) * 1%), rgba(255,255,255,.08) 0);
      padding:12px;
      display:grid;
      place-items:center;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .progress-ring .inner{
      width:100%;
      height:100%;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(180deg, rgba(14,22,37,.96), rgba(10,16,28,.96));
      border:1px solid rgba(255,255,255,.08);
      text-align:center;
    }
    .progress-ring .inner strong{
      display:block;
      font-size:1.6rem;
      line-height:1;
      color:#fff;
    }
    .progress-ring .inner span{
      display:block;
      color:var(--muted);
      font-size:.8rem;
      margin-top:4px;
    }
    .progress-copy h3{
      margin:0 0 8px;
      font-size:1.18rem;
      line-height:1.2;
    }
    .progress-copy p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .tier-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:12px;
      margin-bottom:14px;
    }
    .tier-card{
      position:relative;
      padding:16px 14px;
      border-radius:20px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      min-height:130px;
    }
    .tier-card.recommend{
      background:linear-gradient(180deg, rgba(255,77,45,.24), rgba(255,138,31,.1));
      border-color:rgba(255,140,64,.35);
    }
    .tier-card .tag{
      display:inline-flex;
      margin-bottom:10px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.09);
      color:#fff;
      font-size:.76rem;
      border:1px solid rgba(255,255,255,.1);
    }
    .tier-card h4{
      margin:0 0 8px;
      font-size:1rem;
    }
    .tier-card .amount{
      font-size:1.8rem;
      font-weight:800;
      line-height:1;
      color:#fff;
      letter-spacing:-.03em;
    }
    .tier-card .amount small{
      font-size:.92rem;
      font-weight:600;
      color:var(--muted);
    }
    .tier-card p{
      margin:10px 0 0;
      color:#d6def0;
      font-size:.9rem;
      line-height:1.5;
    }
    .trust-bar{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:10px;
      margin-top:10px;
    }
    .trust-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
      font-size:.88rem;
    }
    .trust-item i{
      color:var(--accent-3);
      font-size:1rem;
    }
    .section{
      padding:74px 0;
      position:relative;
    }
    .section.tight{padding:52px 0}
    .section-title{
      margin-bottom:26px;
      max-width:800px;
    }
    .section-title h2{
      margin:10px 0 10px;
      font-size:clamp(1.8rem,3vw,2.8rem);
      line-height:1.12;
      letter-spacing:-.03em;
    }
    .section-title p{
      margin:0;
      color:var(--muted);
      max-width:62rem;
    }
    .panel{
      background:linear-gradient(180deg, rgba(18,26,44,.92), rgba(14,20,36,.92));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .panel.pad{padding:22px}
    .grid-gap{gap:18px}
    .latest-layout{
      display:grid;
      grid-template-columns:1.45fr .95fr;
      gap:18px;
      align-items:stretch;
    }
    .update-rail{
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .update-card{
      display:flex;
      gap:14px;
      align-items:flex-start;
      padding:16px;
      border-radius:20px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
    }
    .date-chip{
      min-width:72px;
      text-align:center;
      padding:10px 8px;
      border-radius:16px;
      background:linear-gradient(135deg, rgba(255,77,45,.22), rgba(255,138,31,.18));
      border:1px solid rgba(255,140,64,.24);
      color:#fff;
      font-weight:800;
      line-height:1.1;
    }
    .date-chip span{
      display:block;
      font-size:.78rem;
      color:#ffe9dc;
      margin-top:4px;
      font-weight:600;
    }
    .update-body h3{
      margin:0 0 6px;
      font-size:1.04rem;
      line-height:1.3;
    }
    .update-body p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.95rem;
    }
    .right-promo{
      padding:18px;
      border-radius:24px;
      background:
        linear-gradient(180deg, rgba(255,77,45,.16), rgba(15,23,40,.8)),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
      border:1px solid rgba(255,140,64,.22);
      box-shadow:var(--shadow);
      display:flex;
      flex-direction:column;
      gap:16px;
      min-height:100%;
    }
    .right-promo h3{
      margin:0;
      font-size:1.36rem;
      line-height:1.2;
    }
    .promo-price{
      display:flex;
      align-items:baseline;
      gap:10px;
      flex-wrap:wrap;
    }
    .promo-price strong{
      font-size:2.4rem;
      color:#fff;
      letter-spacing:-.04em;
      line-height:1;
    }
    .promo-price strong em{
      font-style:normal;
      color:var(--accent-3);
    }
    .promo-price span{
      color:#f5dccf;
      font-weight:700;
    }
    .countdown{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:8px;
    }
    .count-box{
      padding:12px 10px;
      border-radius:16px;
      background:rgba(9,13,22,.52);
      border:1px solid rgba(255,255,255,.08);
      text-align:center;
    }
    .count-box strong{
      display:block;
      font-size:1.25rem;
      line-height:1.1;
    }
    .count-box span{
      display:block;
      color:var(--muted);
      font-size:.77rem;
      margin-top:4px;
    }
    .mini-form{
      display:flex;
      gap:10px;
      align-items:stretch;
      margin-top:2px;
    }
    .mini-form input{
      flex:1;
      min-width:0;
      height:48px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(7,10,18,.55);
      color:#fff;
      padding:0 14px;
      outline:none;
      transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
    }
    .mini-form input::placeholder{color:#95a2bc}
    .mini-form input:focus{
      border-color:rgba(255,77,45,.58);
      box-shadow:0 0 0 4px rgba(255,77,45,.12);
      background:rgba(8,12,20,.82);
    }
    .mini-form .button{height:48px;padding-inline:18px}
    .benefit-strip{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:10px;
    }
    .benefit-chip{
      padding:12px 12px;
      border-radius:16px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
      display:flex;
      align-items:center;
      gap:10px;
      font-size:.88rem;
    }
    .benefit-chip i{color:var(--good)}
    .entry-grid{
      margin-top:18px;
      display:grid;
      grid-template-columns:repeat(5, 1fr);
      gap:12px;
    }
    .entry-card{
      position:relative;
      min-height:168px;
      overflow:hidden;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      box-shadow:var(--shadow-soft);
      display:flex;
      flex-direction:column;
    }
    .entry-card img{
      width:100%;
      height:94px;
      object-fit:cover;
      opacity:.95;
    }
    .entry-card .entry-body{
      padding:14px;
      display:flex;
      flex:1;
      flex-direction:column;
      gap:8px;
    }
    .entry-card h3{
      margin:0;
      font-size:1rem;
    }
    .entry-card p{
      margin:0;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.55;
      flex:1;
    }
    .entry-card .button{
      align-self:flex-start;
      padding:9px 14px;
      font-size:.86rem;
    }
    .quick-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }
    .faq-item{
      padding:0;
      overflow:hidden;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
    }
    .faq-item + .faq-item{margin-top:14px}
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      font-weight:700;
      color:#fff;
      transition:background var(--transition);
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:hover{background:rgba(255,255,255,.03)}
    .faq-item summary .q{
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .faq-item summary .q span{
      display:inline-flex;
      width:28px;height:28px;
      border-radius:50%;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
      background:rgba(255,77,45,.15);
      border:1px solid rgba(255,77,45,.3);
      color:#fff;
      margin-top:1px;
      font-size:.85rem;
    }
    .faq-item summary .arrow{
      color:var(--accent-3);
      transition:transform var(--transition);
    }
    .faq-item[open] summary .arrow{transform:rotate(180deg)}
    .faq-item .answer{
      padding:0 20px 18px 60px;
      color:var(--muted);
    }
    .news-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .news-card{
      overflow:hidden;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(18,26,44,.94), rgba(12,18,32,.94));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      display:flex;
      flex-direction:column;
      min-height:100%;
    }
    .news-card img{
      width:100%;
      height:180px;
      object-fit:cover;
    }
    .news-body{
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:10px;
      flex:1;
    }
    .news-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:var(--muted);
      font-size:.86rem;
    }
    .news-meta .mark{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .news-body h3{
      margin:0;
      font-size:1.06rem;
      line-height:1.38;
    }
    .news-body p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.95rem;
      flex:1;
    }
    .news-body .button{
      align-self:flex-start;
      margin-top:4px;
      padding:10px 16px;
      font-size:.88rem;
    }
    .table-panel{
      overflow:hidden;
    }
    .compare-head{
      display:grid;
      grid-template-columns:1.1fr .9fr .9fr .9fr;
      gap:0;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
    }
    .compare-head div,
    .compare-row div{
      padding:16px 18px;
      border-right:1px solid rgba(255,255,255,.06);
      min-width:0;
    }
    .compare-head div:last-child,
    .compare-row div:last-child{border-right:none}
    .compare-head .head{
      font-weight:800;
      color:#fff;
    }
    .compare-row{
      display:grid;
      grid-template-columns:1.1fr .9fr .9fr .9fr;
      gap:0;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .compare-row:last-child{border-bottom:none}
    .compare-row .plan-name{
      font-weight:700;
      color:#fff;
    }
    .compare-row .plan-name small{
      display:block;
      color:var(--muted);
      font-weight:500;
      margin-top:4px;
    }
    .compare-row .yes{color:#fff}
    .compare-row .no{color:#7d89a6}
    .compare-row.hot{
      background:linear-gradient(90deg, rgba(255,77,45,.14), rgba(255,138,31,.08));
    }
    .compare-row.hot .plan-name{color:#fff}
    .compare-row.hot .hot-tag{
      display:inline-flex;
      padding:5px 9px;
      margin-left:8px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      color:#fff;
      font-size:.74rem;
      vertical-align:middle;
    }
    .brand-story{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
      align-items:start;
      margin-bottom:18px;
    }
    .brand-copy{
      padding:22px;
      border-radius:24px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
    }
    .brand-copy h3{
      margin:0 0 10px;
      font-size:1.28rem;
    }
    .brand-copy p{
      margin:0;
      color:var(--muted);
      font-size:.98rem;
    }
    .bubble-wall{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
    }
    .bubble{
      padding:16px 16px 14px;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.08);
      position:relative;
      box-shadow:var(--shadow-soft);
    }
    .bubble::before{
      content:"";
      position:absolute;
      top:18px;left:-6px;
      width:12px;height:12px;
      background:inherit;
      border-left:1px solid rgba(255,255,255,.08);
      border-bottom:1px solid rgba(255,255,255,.08);
      transform:rotate(45deg);
    }
    .bubble .who{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:8px;
      color:#fff;
      font-weight:700;
    }
    .avatar{
      width:34px;height:34px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(255,77,45,.95), rgba(255,138,31,.95));
      color:#fff;
      font-size:.82rem;
      font-weight:800;
      box-shadow:0 10px 18px rgba(255,77,45,.2);
    }
    .bubble p{
      margin:0;
      color:var(--muted);
      line-height:1.65;
      font-size:.92rem;
    }
    .safety{
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(9,15,26,.88), rgba(12,19,34,.94)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      border-top:1px solid rgba(255,255,255,.08);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .safety::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(9,15,26,.2), rgba(9,15,26,.78));
    }
    .safety > .grid-container{position:relative;z-index:1}
    .safety-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin-top:18px;
    }
    .safe-card{
      padding:18px;
      border-radius:22px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      min-height:180px;
    }
    .safe-icon{
      width:48px;height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      margin-bottom:14px;
      background:linear-gradient(135deg, rgba(255,77,45,.2), rgba(255,138,31,.18));
      color:#fff;
      border:1px solid rgba(255,140,64,.24);
      font-size:1.2rem;
    }
    .safe-card h3{
      margin:0 0 8px;
      font-size:1.06rem;
    }
    .safe-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.7;
    }
    .safe-list{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
      margin-top:16px;
    }
    .safe-list .item{
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
      display:flex;
      align-items:center;
      gap:10px;
      font-size:.88rem;
    }
    .safe-list .item i{color:var(--good)}
    .app-layout{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:18px;
      align-items:stretch;
    }
    .app-card{
      border-radius:26px;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(18,26,44,.96), rgba(12,18,32,.96));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
    }
    .app-visual{
      position:relative;
      min-height:420px;
      background:
        linear-gradient(180deg, rgba(10,15,27,.22), rgba(10,15,27,.8)),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
    }
    .app-visual::after{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 30% 18%, rgba(255,77,45,.18), transparent 24%),
                 radial-gradient(circle at 80% 74%, rgba(255,138,31,.22), transparent 22%);
    }
    .app-preview{
      position:absolute;
      inset:auto 18px 18px 18px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      z-index:1;
    }
    .phone-card,
    .qr-card{
      border-radius:22px;
      background:rgba(10,15,25,.78);
      backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,.08);
      padding:14px;
      box-shadow:var(--shadow-soft);
    }
    .phone-card img{
      width:100%;
      height:170px;
      object-fit:cover;
      border-radius:16px;
      margin-bottom:10px;
    }
    .phone-card h3,
    .qr-card h3{
      margin:0 0 8px;
      font-size:1.02rem;
    }
    .phone-card p,
    .qr-card p{
      margin:0;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.6;
    }
    .qr-box{
      margin-top:12px;
      height:132px;
      border-radius:18px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.08) 25%, transparent 25%) -8px 0/16px 16px,
        linear-gradient(225deg, rgba(255,255,255,.08) 25%, transparent 25%) -8px 0/16px 16px,
        linear-gradient(315deg, rgba(255,255,255,.08) 25%, transparent 25%) 0px 0/16px 16px,
        linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%) 0px 0/16px 16px,
        rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      display:grid;
      place-items:center;
      text-align:center;
      color:#fff;
      font-weight:800;
      letter-spacing:.08em;
      line-height:1.5;
    }
    .app-copy{
      padding:24px;
    }
    .app-copy h2{
      margin:8px 0 12px;
      font-size:clamp(1.8rem,3vw,2.5rem);
      line-height:1.12;
    }
    .app-copy p{
      margin:0 0 16px;
      color:var(--muted);
    }
    .app-points{
      margin:18px 0 22px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .app-points .item{
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#fff;
      font-size:.92rem;
    }
    .app-points .item i{
      color:var(--accent-3);
      margin-top:4px;
    }
    .app-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:8px;
    }
    .footer{
      padding:28px 0 34px;
      border-top:1px solid rgba(255,255,255,.08);
      background:rgba(7,10,17,.92);
    }
    .footer-inner{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .footer-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }
    .footer-copy{
      max-width:48rem;
      color:var(--muted);
    }
    .footer-links{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      color:#dce4f6;
    }
    .footer-links a{
      color:#dce4f6;
      opacity:.9;
    }
    .footer-links a:hover{opacity:1;color:#fff}
    .footer-meta{
      padding-top:16px;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      color:var(--soft);
      font-size:.9rem;
    }
    .to-top{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:1200;
      width:50px;height:50px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#fff;
      box-shadow:0 16px 30px rgba(255,77,45,.28);
      border:1px solid rgba(255,255,255,.08);
    }
    .to-top:hover{transform:translateY(-3px);color:#fff}
    .muted{color:var(--muted)}
    .section-note{
      color:var(--soft);
      font-size:.92rem;
    }
    .accent-text{color:var(--accent-3)}
    .tab-line{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top:12px;
    }
    .mini-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
      font-size:.86rem;
    }
    .mini-badge i{color:var(--good)}
    .divider{
      height:1px;
      background:rgba(255,255,255,.08);
      margin:14px 0;
    }
    .info-line{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      color:#fff;
    }
    .info-line strong{
      color:var(--accent-3);
      font-size:1.1rem;
    }
    .pill-list{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:10px;
    }
    .pill-list span{
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
      font-size:.84rem;
    }
    .news-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:18px;
      flex-wrap:wrap;
    }
    .news-head .hint{
      color:var(--muted);
      max-width:38rem;
    }
    .table-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:16px;
    }
    .table-title p{margin:0;color:var(--muted)}
    .table-scroll{
      overflow-x:auto;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
    }
    .table-scroll::-webkit-scrollbar{height:10px}
    .table-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
    .compare-table{
      width:100%;
      min-width:900px;
      border-collapse:separate;
      border-spacing:0;
    }
    .compare-table th,
    .compare-table td{
      padding:16px 18px;
      text-align:center;
      border-bottom:1px solid rgba(255,255,255,.06);
      color:#e9effd;
    }
    .compare-table thead th{
      background:rgba(255,255,255,.05);
      font-size:.94rem;
    }
    .compare-table thead th:first-child{
      text-align:left;
      color:#fff;
      font-weight:800;
    }
    .compare-table tbody td:first-child{
      text-align:left;
      color:#fff;
      font-weight:700;
      width:28%;
    }
    .compare-table .hot-col{
      background:linear-gradient(180deg, rgba(255,77,45,.14), rgba(255,138,31,.08));
      position:relative;
    }
    .compare-table .hot-col .label{
      display:inline-flex;
      margin-left:8px;
      padding:5px 9px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      color:#fff;
      font-size:.72rem;
      vertical-align:middle;
    }
    .compare-table td small{color:var(--muted)}
    .compare-table .yes{color:#fff}
    .compare-table .no{color:#7d88a1}
    .section-id{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--accent-3);
      font-weight:700;
      letter-spacing:.02em;
      text-transform:none;
    }
    .card-shadow{
      box-shadow:var(--shadow-soft);
    }
    .mobile-only{display:none}
    @media (max-width: 1100px){
      .latest-layout,
      .brand-story,
      .app-layout{
        grid-template-columns:1fr;
      }
      .hero-inner{min-height:auto}
      .safety-grid,
      .news-grid{
        grid-template-columns:repeat(2,1fr);
      }
      .entry-grid{
        grid-template-columns:repeat(2,1fr);
      }
      .trust-bar,
      .benefit-strip,
      .safe-list{
        grid-template-columns:repeat(2,1fr);
      }
      .tier-grid{
        grid-template-columns:1fr;
      }
    }
    @media (max-width: 767px){
      .header-inner{padding:14px 0}
      .menu-toggle{display:inline-flex}
      .nav-wrap{
        position:relative;
        width:100%;
        justify-content:flex-end;
      }
      .nav-links{
        position:absolute;
        right:0;
        top:calc(100% + 14px);
        width:min(92vw, 360px);
        flex-direction:column;
        align-items:stretch;
        padding:12px;
        border-radius:22px;
        background:rgba(12,18,32,.98);
        border:1px solid rgba(255,255,255,.08);
        box-shadow:var(--shadow);
        opacity:0;
        pointer-events:none;
        transform:translateY(-10px);
        transition:opacity var(--transition), transform var(--transition);
      }
      .site-header.nav-open .nav-links{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
      }
      .nav-links a{width:100%;justify-content:flex-start}
      .hero{padding-top:14px}
      .hero h1{max-width:12ch}
      .stage{min-height:auto;padding:18px}
      .progress-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
      .stage-caption{text-align:center;max-width:100%}
      .trust-bar,
      .benefit-strip,
      .safe-list,
      .countdown,
      .news-grid,
      .safety-grid,
      .quick-grid,
      .entry-grid,
      .bubble-wall,
      .app-points{
        grid-template-columns:1fr;
      }
      .entry-grid{margin-top:16px}
      .news-card img{height:170px}
      .mini-form{flex-direction:column}
      .compare-head,
      .compare-row{grid-template-columns:1fr 1fr}
      .compare-head div:nth-child(3),
      .compare-head div:nth-child(4),
      .compare-row div:nth-child(3),
      .compare-row div:nth-child(4){display:none}
      .app-preview{
        grid-template-columns:1fr;
        position:static;
        padding:16px;
      }
      .app-visual{min-height:auto}
      .phone-card img{height:150px}
      .footer-top,
      .footer-meta{
        flex-direction:column;
        align-items:flex-start;
      }
    }
    @media (max-width: 520px){
      .section{padding:56px 0}
      .section.tight{padding:40px 0}
      .hero h1{font-size:clamp(2.2rem,12vw,3.2rem)}
      .hero p{font-size:1rem}
      .hero-actions .button,
      .app-actions .button{width:100%;justify-content:center}
      .section-title h2{font-size:1.7rem}
      .stage-top{
        flex-direction:column;
        align-items:flex-start;
      }
      .stage-caption{text-align:left}
      .price-badge{white-space:normal}
      .compare-table{min-width:760px}
    }

/* roulang page: category1 */
:root{
  --bg:#fff8f3;
  --bg-soft:#fff1e8;
  --card:#ffffff;
  --card-2:#fff6ef;
  --text:#1f1d1a;
  --muted:#6f675f;
  --line:#ead9cf;
  --primary:#ff4d2d;
  --primary-2:#ff8a00;
  --primary-deep:#c72a12;
  --success:#12a57a;
  --shadow:0 18px 50px rgba(140, 61, 26, .12);
  --shadow-strong:0 24px 70px rgba(140, 61, 26, .18);
  --radius:24px;
  --radius-sm:16px;
  --space:clamp(20px, 2.2vw, 32px);
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 138, 0, .10), transparent 24%),
    radial-gradient(circle at top right, rgba(255, 77, 45, .08), transparent 28%),
    linear-gradient(180deg, #fffaf7 0%, #fff 22%, #fff7f1 100%);
  line-height:1.75;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:all .24s ease}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
::selection{background:rgba(255,77,45,.18);color:var(--text)}
.grid-container{
  max-width:var(--container);
  padding-left:clamp(16px, 2.5vw, 28px);
  padding-right:clamp(16px, 2.5vw, 28px);
}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(140%) blur(18px);
  border-bottom:1px solid rgba(234,217,207,.9);
  box-shadow:0 8px 28px rgba(67,30,12,.05);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
  gap:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand-mark{
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  box-shadow:0 10px 24px rgba(255,77,45,.24);
  flex:0 0 auto;
}
.brand-mark i{font-size:1.08rem}
.brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.brand-text strong{
  font-size:1.04rem;
  letter-spacing:.2px;
  line-height:1.15;
}
.brand-text span{
  color:var(--muted);
  font-size:.82rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-wrap{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  color:#3a342f;
  font-size:.95rem;
  border-radius:999px;
  border:1px solid transparent;
}
.nav-links a:hover,
.nav-links a:focus{
  color:var(--primary-deep);
  background:#fff7f2;
  border-color:#ffd8c8;
  box-shadow:0 10px 20px rgba(255, 77, 45, .08);
}
.nav-links a.active{
  color:var(--primary-deep);
  background:linear-gradient(180deg, #fff 0%, #fff4ef 100%);
  border-color:#ffc4af;
  box-shadow:inset 0 -2px 0 var(--primary), 0 12px 24px rgba(255,77,45,.08);
}
.menu-toggle{
  display:none;
  width:46px;
  height:46px;
  border:none;
  border-radius:14px;
  background:linear-gradient(180deg, #fff 0%, #fff4ee 100%);
  color:var(--primary-deep);
  box-shadow:inset 0 0 0 1px #f0d3c7;
}
.menu-toggle:hover,
.menu-toggle:focus{
  background:#fff;
  box-shadow:0 10px 18px rgba(255,77,45,.12), inset 0 0 0 1px #f0c0ad;
}
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(34px, 4vw, 58px) 0 clamp(22px, 2.8vw, 40px);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,250,247,.78), rgba(255,250,247,.55)),
    url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
  z-index:-2;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto -10% -42% -10%;
  height:480px;
  background:radial-gradient(circle, rgba(255,138,0,.18), transparent 62%);
  z-index:-1;
  filter:blur(6px);
}
.hero-shell{
  display:grid;
  grid-template-columns:1.16fr .84fr;
  gap:clamp(18px, 3vw, 36px);
  align-items:stretch;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255, 154, 109, .25);
  color:var(--primary-deep);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(255, 77, 45, .08);
}
.eyebrow i{color:var(--primary)}
.hero h1{
  margin:16px 0 12px;
  font-size:clamp(2rem, 4.6vw, 4rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
.hero-lead{
  max-width:42rem;
  color:#4a423b;
  font-size:1.02rem;
  margin:0 0 18px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:18px 0 0;
}
.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 20px;
  border-radius:999px;
  font-weight:700;
  border:1px solid transparent;
  box-shadow:0 16px 28px rgba(50, 21, 10, .08);
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
}
.btn-primary:hover,
.btn-primary:focus{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 18px 30px rgba(255, 77, 45, .28);
}
.btn-light{
  color:var(--primary-deep);
  background:rgba(255,255,255,.9);
  border-color:#ffd9cb;
}
.btn-light:hover,
.btn-light:focus{
  transform:translateY(-2px);
  box-shadow:0 16px 26px rgba(255,77,45,.10);
}
.hero-notes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.note-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid #f1ddd2;
  color:#4e453d;
  font-size:.88rem;
}
.note-tag i{color:var(--primary)}
.hero-card{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,247,241,.95));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:var(--shadow-strong);
  padding:22px;
}
.hero-card .cover{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  min-height:220px;
  margin-bottom:18px;
  background:
    linear-gradient(180deg, rgba(37, 18, 10, .10), rgba(37, 18, 10, .58)),
    url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
}
.hero-card .cover .cover-text{
  position:absolute;
  inset:auto 18px 18px 18px;
  color:#fff;
}
.cover-text strong{
  display:block;
  font-size:1.1rem;
  margin-bottom:4px;
}
.cover-text span{
  font-size:.92rem;
  color:rgba(255,255,255,.9);
}
.promo-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.promo-badges span{
  padding:7px 10px;
  border-radius:999px;
  background:#fff6f1;
  border:1px solid #ffd6c5;
  color:#8d3a1c;
  font-size:.82rem;
}
.reward-box{
  padding:18px;
  border-radius:22px;
  background:linear-gradient(135deg, #fff, #fff6ef);
  border:1px solid #f2ddd0;
}
.reward-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.reward-head h2,
.reward-head strong{
  margin:0;
  font-size:1.02rem;
}
.reward-price{
  text-align:right;
  color:var(--primary-deep);
  font-weight:800;
}
.reward-price small{
  display:block;
  color:var(--muted);
  font-weight:600;
  font-size:.78rem;
}
.progress-wrap{
  margin-top:14px;
}
.progress-label{
  display:flex;
  justify-content:space-between;
  color:#665d55;
  font-size:.88rem;
  margin-bottom:8px;
}
.progress-track{
  width:100%;
  height:12px;
  border-radius:999px;
  background:#f2ded4;
  overflow:hidden;
}
.progress-bar{
  width:72%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  box-shadow:0 8px 18px rgba(255,77,45,.28);
}
.reward-list{
  margin:16px 0 0;
  padding:0;
  list-style:none;
}
.reward-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 0;
  border-top:1px dashed #f0ddd2;
  color:#4c453f;
}
.reward-list li:first-child{border-top:none}
.reward-list i{
  color:var(--primary);
  margin-top:4px;
}
.reward-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.trust-strip{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  border:1px solid #f0ddd2;
  box-shadow:0 12px 26px rgba(76, 40, 20, .05);
}
.trust-item .ico{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
}
.trust-item strong{
  display:block;
  line-height:1.15;
}
.trust-item span{
  display:block;
  color:var(--muted);
  font-size:.86rem;
}
.section{
  padding:clamp(20px, 3vw, 36px) 0;
}
.section-title{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.section-title h2{
  margin:0;
  font-size:clamp(1.4rem, 2.4vw, 2.2rem);
  line-height:1.15;
}
.section-title p{
  margin:0;
  max-width:44rem;
  color:var(--muted);
}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}
.quick-card{
  position:relative;
  padding:18px 16px;
  border-radius:22px;
  background:linear-gradient(180deg, #fff, #fff7f2);
  border:1px solid #f0ddd2;
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height:180px;
}
.quick-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(255,138,0,.12), transparent 38%);
  pointer-events:none;
}
.quick-card .icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  margin-bottom:14px;
  box-shadow:0 12px 24px rgba(255,77,45,.18);
}
.quick-card h3{
  margin:0 0 8px;
  font-size:1.02rem;
}
.quick-card p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:.92rem;
}
.quick-card a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--primary-deep);
  font-weight:700;
}
.quick-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-strong);
}
.ribbon{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  background:#ffe9df;
  color:#b33d1d;
  font-size:.78rem;
  font-weight:700;
  margin-bottom:10px;
}
.flow-grid{
  display:grid;
  grid-template-columns:1fr 1.18fr;
  gap:18px;
}
.flow-panel,
.compare-panel,
.tier-card,
.preview-card,
.note-card,
.faq-card,
.cta-card{
  border-radius:28px;
  border:1px solid #efd9cd;
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow);
}
.flow-panel{
  padding:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,246,239,.95)),
    url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
}
.flow-panel h3{
  margin:0 0 10px;
  font-size:1.28rem;
}
.flow-panel p{margin:0 0 16px;color:#4f463e}
.meter{
  margin:18px 0;
  padding:16px;
  border-radius:22px;
  background:#fff;
  border:1px solid #f3ddd0;
}
.meter-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  color:#665d55;
}
.meter-top strong{color:var(--primary-deep)}
.timeline{
  display:grid;
  gap:14px;
}
.timeline-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px;
  border-radius:20px;
  background:#fff9f5;
  border:1px solid #f4ded3;
}
.timeline-num{
  width:36px;
  height:36px;
  flex:0 0 auto;
  border-radius:12px;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
}
.timeline-item strong{
  display:block;
  margin-bottom:4px;
}
.timeline-item span{
  color:var(--muted);
  font-size:.92rem;
}
.compare-panel{
  padding:22px;
}
.compare-panel h3{
  margin:0 0 8px;
  font-size:1.28rem;
}
.compare-table-wrap{
  overflow:auto;
  margin-top:18px;
  border-radius:20px;
  border:1px solid #f0ddd2;
  background:#fff;
}
.compare-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}
.compare-table th,
.compare-table td{
  padding:16px 14px;
  border-bottom:1px solid #f5e5db;
  text-align:left;
  vertical-align:top;
}
.compare-table th{
  background:linear-gradient(180deg, #fff9f5, #fff);
  color:#4a4239;
  font-weight:800;
}
.compare-table tbody tr:nth-child(even){
  background:#fffaf7;
}
.compare-table .price{
  font-size:1.22rem;
  color:var(--primary-deep);
  font-weight:900;
}
.compare-table .hot{
  background:#fff3ec;
}
.compare-table .tag-yes{
  color:#0f7c5b;
  font-weight:700;
}
.compare-table .tag-no{
  color:#b2a39b;
}
.tick{
  color:var(--success);
  margin-right:6px;
}
.xmark{
  color:#c76a54;
  margin-right:6px;
}
.tier-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.tier-card{
  padding:22px;
  position:relative;
  overflow:hidden;
}
.tier-card.featured{
  background:linear-gradient(180deg, #fff9f5, #ffffff);
  border-color:#ffb79b;
  box-shadow:0 22px 60px rgba(255,77,45,.15);
}
.tier-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff0e8;
  color:#b33d1d;
  font-size:.78rem;
  font-weight:800;
}
.tier-card h3{
  margin:12px 0 8px;
  font-size:1.24rem;
}
.price-row{
  display:flex;
  align-items:end;
  gap:10px;
  margin:14px 0 12px;
}
.price-row strong{
  font-size:2rem;
  line-height:1;
  color:var(--primary-deep);
}
.price-row span{
  color:var(--muted);
  font-size:.92rem;
}
.tier-list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.tier-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:9px 0;
  border-top:1px solid #f3e3d8;
  color:#4d463f;
}
.tier-list li:first-child{border-top:none}
.tier-card .btn-pill{margin-top:18px;width:100%}
.preview-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:16px;
  align-items:stretch;
}
.preview-card{
  overflow:hidden;
  position:relative;
}
.preview-image{
  position:relative;
  min-height:100%;
  min-height:460px;
  background:
    linear-gradient(180deg, rgba(31,29,26,.06), rgba(31,29,26,.58)),
    url('/assets/images/coverpic/cover-4.webp') center/cover no-repeat;
}
.preview-image .img-text{
  position:absolute;
  inset:auto 20px 20px 20px;
  color:#fff;
}
.img-text .label{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  margin-bottom:10px;
  font-size:.8rem;
}
.img-text h3{
  margin:0 0 8px;
  font-size:1.45rem;
}
.img-text p{
  margin:0;
  max-width:28rem;
  color:rgba(255,255,255,.9);
}
.preview-copy{
  padding:22px;
}
.preview-copy h3{
  margin:0 0 10px;
  font-size:1.28rem;
}
.preview-copy p{
  margin:0 0 14px;
  color:var(--muted);
}
.preview-list{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.preview-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  background:#fff7f3;
  border:1px solid #f4ddd1;
}
.preview-item i{
  width:38px;
  height:38px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  flex:0 0 auto;
}
.preview-item strong{display:block;margin-bottom:3px}
.preview-item span{color:var(--muted);font-size:.92rem}
.story-grid{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:16px;
}
.story-card{
  border-radius:28px;
  border:1px solid #efd9cd;
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow);
  padding:24px;
}
.story-card h3{
  margin:0 0 10px;
  font-size:1.2rem;
}
.story-card p{
  margin:0 0 14px;
  color:#534a42;
}
.story-points{
  display:grid;
  gap:12px;
}
.story-point{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:#fff8f4;
  border:1px solid #f3dfd4;
}
.story-point .bullet{
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  margin-top:7px;
  flex:0 0 auto;
}
.story-point strong{
  display:block;
  margin-bottom:4px;
}
.story-point span{
  color:var(--muted);
  font-size:.92rem;
}
.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.news-card{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg, #fff, #fff7f2);
  border:1px solid #efd9cd;
  box-shadow:var(--shadow);
}
.news-card time{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff1e7;
  color:#ad4425;
  font-size:.82rem;
  font-weight:700;
}
.news-card h3{
  margin:14px 0 10px;
  font-size:1.04rem;
}
.news-card p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:.94rem;
}
.link-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--primary-deep);
  font-weight:800;
}
.faq-grid{
  display:grid;
  gap:14px;
}
.faq-card{
  padding:0;
  overflow:hidden;
}
details{
  border:none;
}
summary{
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  font-weight:800;
}
summary::-webkit-details-marker{display:none}
summary:hover{
  background:#fff8f4;
}
summary .plus{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#fff2e9;
  color:var(--primary-deep);
  flex:0 0 auto;
}
details[open] summary{
  border-bottom:1px solid #f0ddd2;
  background:#fff8f4;
}
.faq-body{
  padding:0 20px 18px;
  color:#544b43;
}
.cta-card{
  padding:24px;
  background:
    linear-gradient(135deg, rgba(255,77,45,.96), rgba(255,138,0,.95)),
    url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
  color:#fff;
  overflow:hidden;
  position:relative;
}
.cta-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,77,45,.10), rgba(34,14,8,.18));
  pointer-events:none;
}
.cta-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
}
.cta-card h2{
  margin:0 0 10px;
  font-size:clamp(1.4rem, 2.6vw, 2.2rem);
}
.cta-card p{
  margin:0;
  max-width:46rem;
  color:rgba(255,255,255,.92);
}
.cta-form{
  margin-top:18px;
  display:grid;
  grid-template-columns:1.1fr .8fr auto;
  gap:12px;
}
.input,
.select,
textarea{
  width:100%;
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.96);
  color:#1f1d1a;
  padding:14px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.input::placeholder,
textarea::placeholder{color:#8c8178}
.input:focus,
.select:focus,
textarea:focus{
  outline:none;
  border-color:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.18), 0 12px 24px rgba(53,20,8,.12);
}
.cta-form .btn-pill{
  min-height:52px;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.25);
}
.cta-foot{
  margin-top:12px;
  font-size:.86rem;
  color:rgba(255,255,255,.9);
}
.breadcrumb-mini{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.breadcrumb-mini a,
.breadcrumb-mini span{
  color:#675e56;
  font-size:.88rem;
}
.breadcrumb-mini i{
  color:#c28e73;
  font-size:.7rem;
  margin-top:5px;
}
.footer{
  margin-top:26px;
  padding:34px 0 24px;
  background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,245,238,.95));
  border-top:1px solid rgba(234,217,207,.95);
}
.footer-inner{
  display:grid;
  gap:18px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}
.footer-copy{
  max-width:46rem;
  color:var(--muted);
  font-size:.95rem;
}
.footer-meta{
  display:grid;
  gap:8px;
  color:#655c54;
  font-size:.88rem;
}
.footer-links a{
  color:var(--primary-deep);
  font-weight:700;
}
.footer-links a:hover,
.footer-links a:focus{
  text-decoration:underline;
}
.focus-ring:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(255,77,45,.26);
  outline-offset:2px;
}
@media (max-width: 1120px){
  .hero-shell,
  .flow-grid,
  .preview-grid,
  .story-grid,
  .cta-inner{
    grid-template-columns:1fr;
  }
  .trust-strip,
  .quick-grid,
  .tier-grid,
  .news-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width: 768px){
  .header-inner{
    min-height:68px;
  }
  .menu-toggle{display:inline-grid;place-items:center}
  .nav-wrap{
    position:relative;
  }
  .nav-links{
    position:absolute;
    right:0;
    top:58px;
    width:min(86vw, 340px);
    display:grid;
    gap:8px;
    padding:14px;
    border-radius:22px;
    background:rgba(255,255,255,.98);
    border:1px solid #f0ddd2;
    box-shadow:var(--shadow-strong);
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:all .22s ease;
  }
  .nav-wrap.open .nav-links{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav-links a{
    width:100%;
    justify-content:flex-start;
  }
  .trust-strip,
  .quick-grid,
  .tier-grid,
  .news-grid{
    grid-template-columns:1fr;
  }
  .cta-form{
    grid-template-columns:1fr;
  }
  .compare-table{
    min-width:720px;
  }
}
@media (max-width: 520px){
  .hero{
    padding-top:22px;
  }
  .hero-card,
  .flow-panel,
  .compare-panel,
  .tier-card,
  .preview-copy,
  .story-card,
  .news-card,
  .cta-card{
    border-radius:22px;
  }
  .cta-inner{
    gap:12px;
  }
  .hero-actions,
  .reward-cta{
    flex-direction:column;
  }
  .btn-pill{
    width:100%;
  }
  .note-tag,
  .promo-badges span{
    width:100%;
    justify-content:center;
  }
  .footer-top{
    flex-direction:column;
  }
}

/* roulang page: category3 */
:root{
      --bg:#f5f2ec;
      --bg-soft:#fbf7f2;
      --surface:#ffffff;
      --surface-2:#fff8f2;
      --surface-3:#f8efe6;
      --text:#162033;
      --muted:#667085;
      --line:#e7ddd1;
      --line-2:#d8c8b7;
      --primary:#ff5a1f;
      --primary-2:#ff8b1a;
      --primary-deep:#d53b16;
      --red:#e83c31;
      --green:#14b86a;
      --gold:#d59b1d;
      --shadow:0 18px 50px rgba(19, 24, 40, .10);
      --shadow-2:0 12px 28px rgba(19, 24, 40, .12);
      --radius:22px;
      --radius-sm:14px;
      --radius-lg:28px;
      --container:1180px;
      --space:24px;
      --space-lg:40px;
      --space-xl:72px;
      --header-h:84px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(255,90,31,.08), transparent 28%),
        radial-gradient(circle at top right, rgba(255,139,26,.10), transparent 22%),
        linear-gradient(180deg, #fbfaf8 0%, #f5f2ec 100%);
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none;transition:all .22s ease}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(255,90,31,.16)}
    .grid-container{
      max-width:var(--container);
      padding-left:20px;
      padding-right:20px;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      background:rgba(251,247,242,.86);
      border-bottom:1px solid rgba(231,221,209,.86);
    }
    .header-inner{
      min-height:var(--header-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:14px;
      flex:0 0 auto;
      min-width:220px;
    }
    .brand-mark{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow:0 12px 26px rgba(255,90,31,.22);
      font-size:18px;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.2;
    }
    .brand-text strong{
      font-size:1.03rem;
      letter-spacing:.04em;
      color:var(--text);
    }
    .brand-text span{
      font-size:.84rem;
      color:var(--muted);
      margin-top:4px;
    }

    .nav-wrap{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:28px;
      list-style:none;
      margin:0;
      padding:0;
    }
    .nav-links a{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      color:#3a465a;
      font-size:.98rem;
      font-weight:600;
      letter-spacing:.02em;
      padding:0 2px;
    }
    .nav-links a::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:4px;
      height:2px;
      border-radius:999px;
      background:transparent;
      transform:scaleX(.35);
      transform-origin:center;
      transition:all .22s ease;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible{
      color:var(--primary-deep);
    }
    .nav-links a:hover::after,
    .nav-links a:focus-visible::after,
    .nav-links a.active::after{
      background:linear-gradient(90deg, var(--primary), var(--primary-2));
      transform:scaleX(1);
    }
    .nav-links a.active{
      color:var(--primary-deep);
    }
    .menu-toggle{
      display:none;
      width:46px;
      height:46px;
      border-radius:14px;
      border:1px solid var(--line);
      background:var(--surface);
      color:var(--text);
      box-shadow:0 8px 18px rgba(17,24,39,.05);
      cursor:pointer;
      transition:all .22s ease;
    }
    .menu-toggle:hover,
    .menu-toggle:focus-visible{
      border-color:rgba(255,90,31,.34);
      color:var(--primary-deep);
      box-shadow:0 12px 24px rgba(255,90,31,.12);
      transform:translateY(-1px);
      outline:none;
    }

    main{
      display:block;
    }
    .hero{
      padding:34px 0 18px;
      position:relative;
    }
    .hero-shell{
      position:relative;
      border:1px solid rgba(231,221,209,.88);
      border-radius:34px;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,248,242,.98) 46%, rgba(255,244,236,.95) 100%);
      box-shadow:var(--shadow);
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(100deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 34%, rgba(255,90,31,.04) 100%),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      opacity:.16;
      pointer-events:none;
      mix-blend-mode:multiply;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:5fr 7fr;
      gap:24px;
      padding:28px;
      align-items:center;
      min-height:540px;
    }
    .hero-copy{
      position:relative;
      z-index:1;
      padding:16px 4px 16px 10px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid rgba(255,90,31,.18);
      background:rgba(255,90,31,.08);
      color:var(--primary-deep);
      font-size:.88rem;
      font-weight:700;
      letter-spacing:.04em;
      margin-bottom:18px;
    }
    .eyebrow i{color:var(--primary)}
    h1,h2,h3,h4,p{margin-top:0}
    .hero-title{
      margin:0;
      font-size:clamp(2rem, 4vw, 4.2rem);
      line-height:1.06;
      letter-spacing:-.03em;
      max-width:10ch;
    }
    .hero-title .accent{
      background:linear-gradient(135deg, var(--primary-deep), var(--primary-2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-lead{
      margin:18px 0 0;
      font-size:1.05rem;
      color:#39465d;
      max-width:40em;
    }
    .hero-points{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:22px 0 0;
      padding:0;
      list-style:none;
    }
    .hero-points li{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.88);
      border:1px solid rgba(231,221,209,.92);
      color:#445165;
      font-size:.92rem;
      box-shadow:0 6px 16px rgba(19,24,40,.04);
    }
    .hero-points i{
      color:var(--primary);
      font-size:.92rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:26px;
    }
    .btn{
      appearance:none;
      border:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 18px;
      border-radius:14px;
      font-weight:700;
      cursor:pointer;
      transition:all .22s ease;
      text-align:center;
      white-space:nowrap;
    }
    .btn:focus-visible{
      outline:3px solid rgba(255,90,31,.22);
      outline-offset:2px;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow:0 16px 28px rgba(255,90,31,.24);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      transform:translateY(-2px);
      box-shadow:0 18px 36px rgba(255,90,31,.30);
      color:#fff;
    }
    .btn-secondary{
      background:#fff;
      color:var(--text);
      border:1px solid var(--line);
      box-shadow:0 10px 24px rgba(19,24,40,.05);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      transform:translateY(-2px);
      border-color:rgba(255,90,31,.26);
      color:var(--primary-deep);
      box-shadow:0 16px 30px rgba(255,90,31,.10);
    }
    .btn-ghost{
      background:transparent;
      border:1px dashed rgba(255,90,31,.22);
      color:var(--primary-deep);
    }
    .btn-ghost:hover,
    .btn-ghost:focus-visible{
      background:rgba(255,90,31,.06);
      transform:translateY(-2px);
    }
    .hero-kpis{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      margin-top:28px;
    }
    .kpi{
      padding:16px 14px;
      background:rgba(255,255,255,.88);
      border:1px solid rgba(231,221,209,.9);
      border-radius:18px;
      box-shadow:0 10px 22px rgba(19,24,40,.05);
    }
    .kpi strong{
      display:block;
      font-size:1.25rem;
      line-height:1.1;
      color:var(--primary-deep);
      margin-bottom:6px;
    }
    .kpi span{
      display:block;
      font-size:.88rem;
      color:var(--muted);
      line-height:1.45;
    }
    .hero-visual{
      position:relative;
      z-index:1;
      min-height:100%;
    }
    .hero-photo{
      position:relative;
      margin-left:auto;
      width:min(100%, 620px);
      aspect-ratio:7/5;
      border-radius:32px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.7);
      background:#d6d1c8;
      box-shadow:0 30px 80px rgba(17,24,39,.18);
      transform:translateY(12px);
    }
    .hero-photo img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1.02);
    }
    .hero-photo::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(10,14,25,.04) 0%, rgba(10,14,25,.12) 100%);
      pointer-events:none;
    }
    .floating-card{
      position:absolute;
      z-index:2;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(17,24,39,.86);
      color:#fff;
      box-shadow:0 16px 30px rgba(17,24,39,.26);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      max-width:200px;
    }
    .floating-card strong{
      display:block;
      font-size:.98rem;
      margin-bottom:4px;
    }
    .floating-card span{
      display:block;
      color:rgba(255,255,255,.76);
      font-size:.85rem;
      line-height:1.45;
    }
    .floating-card.top{
      top:24px;
      left:-10px;
      transform:rotate(-3deg);
      border:1px solid rgba(255,255,255,.14);
    }
    .floating-card.bottom{
      right:12px;
      bottom:20px;
      transform:rotate(3deg);
      background:linear-gradient(135deg, rgba(255,90,31,.94), rgba(255,139,26,.94));
      border:1px solid rgba(255,255,255,.16);
    }
    .section-band{
      padding:16px 0 0;
    }
    .trust-bar{
      padding:16px 18px;
      border-radius:22px;
      background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,248,242,.98));
      border:1px solid rgba(231,221,209,.92);
      box-shadow:0 10px 26px rgba(19,24,40,.05);
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
    }
    .trust-item{
      display:flex;
      align-items:center;
      gap:12px;
      padding:10px 12px;
      border-radius:16px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(231,221,209,.7);
    }
    .trust-icon{
      width:38px;
      height:38px;
      border-radius:12px;
      display:grid;
      place-items:center;
      color:var(--primary-deep);
      background:rgba(255,90,31,.10);
      flex:0 0 auto;
    }
    .trust-item strong{
      display:block;
      font-size:.96rem;
      line-height:1.2;
      margin-bottom:3px;
    }
    .trust-item span{
      display:block;
      color:var(--muted);
      font-size:.84rem;
      line-height:1.35;
    }

    .content-section{
      padding:28px 0;
    }
    .section-panel{
      background:rgba(255,255,255,.82);
      border:1px solid rgba(231,221,209,.92);
      border-radius:30px;
      box-shadow:var(--shadow);
      padding:30px;
      margin-top:22px;
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:22px;
    }
    .section-head .copy{
      max-width:760px;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--primary-deep);
      font-size:.86rem;
      font-weight:700;
      letter-spacing:.04em;
      text-transform:none;
      margin-bottom:10px;
    }
    .section-kicker i{color:var(--primary)}
    .section-title{
      font-size:clamp(1.5rem, 2.6vw, 2.4rem);
      line-height:1.18;
      margin:0;
      letter-spacing:-.02em;
    }
    .section-desc{
      margin:12px 0 0;
      color:var(--muted);
      max-width:68em;
      line-height:1.9;
    }

    .compare-wrap{
      overflow-x:auto;
      border-radius:22px;
      border:1px solid rgba(231,221,209,.88);
      background:linear-gradient(180deg, #fff 0%, #fffaf6 100%);
    }
    .compare-table{
      width:100%;
      min-width:860px;
      border-collapse:separate;
      border-spacing:0;
    }
    .compare-table thead th{
      background:linear-gradient(135deg, #fff6ef, #fff);
      color:var(--text);
      font-size:.96rem;
      text-align:center;
      padding:18px 14px;
      border-bottom:1px solid var(--line);
    }
    .compare-table thead th:first-child{
      text-align:left;
      border-top-left-radius:20px;
    }
    .compare-table thead th:last-child{
      border-top-right-radius:20px;
    }
    .compare-table tbody th,
    .compare-table tbody td{
      padding:16px 14px;
      border-bottom:1px solid rgba(231,221,209,.7);
      vertical-align:middle;
      background:#fff;
    }
    .compare-table tbody th{
      width:28%;
      text-align:left;
      font-weight:700;
      color:#293246;
      background:#fffdfa;
    }
    .compare-table tbody tr:nth-child(even) td,
    .compare-table tbody tr:nth-child(even) th{
      background:#fffaf6;
    }
    .compare-table td{
      text-align:center;
      color:#435066;
      font-size:.95rem;
    }
    .check{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:28px;
      height:28px;
      border-radius:999px;
      background:rgba(20,184,106,.12);
      color:var(--green);
      font-size:.82rem;
    }
    .tag-off{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:7px 10px;
      border-radius:999px;
      background:#f1f3f6;
      color:#79859a;
      font-size:.8rem;
      font-weight:700;
    }
    .tag-highlight{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,90,31,.12);
      color:var(--primary-deep);
      font-size:.8rem;
      font-weight:700;
    }

    .level-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }
    .level-card{
      position:relative;
      overflow:hidden;
      padding:24px;
      border-radius:26px;
      border:1px solid rgba(231,221,209,.92);
      background:
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,248,242,.98) 100%);
      box-shadow:0 14px 34px rgba(19,24,40,.08);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .level-card:hover{
      transform:translateY(-4px);
      box-shadow:0 22px 46px rgba(19,24,40,.12);
      border-color:rgba(255,90,31,.28);
    }
    .level-card.recommended{
      border-color:rgba(255,90,31,.35);
      box-shadow:0 18px 48px rgba(255,90,31,.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,242,233,.98) 100%);
    }
    .level-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,90,31,.1);
      color:var(--primary-deep);
      font-size:.84rem;
      font-weight:700;
      margin-bottom:14px;
    }
    .level-title{
      margin:0 0 8px;
      font-size:1.32rem;
    }
    .price{
      display:flex;
      align-items:end;
      gap:8px;
      margin:8px 0 16px;
    }
    .price strong{
      font-size:2.05rem;
      line-height:1;
      color:var(--primary-deep);
      letter-spacing:-.03em;
    }
    .price span{
      color:var(--muted);
      font-size:.92rem;
      padding-bottom:3px;
    }
    .level-card ul{
      margin:0;
      padding:0;
      list-style:none;
    }
    .level-card li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#445165;
      margin-bottom:10px;
      line-height:1.6;
    }
    .level-card li i{
      color:var(--green);
      margin-top:4px;
      flex:0 0 auto;
    }
    .level-card .btn{
      width:100%;
      margin-top:18px;
    }

    .preview-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }
    .preview-card{
      overflow:hidden;
      border-radius:24px;
      border:1px solid rgba(231,221,209,.92);
      background:#fff;
      box-shadow:0 14px 34px rgba(19,24,40,.08);
      transition:transform .22s ease, box-shadow .22s ease;
    }
    .preview-card:hover{
      transform:translateY(-4px);
      box-shadow:0 22px 48px rgba(19,24,40,.12);
    }
    .preview-media{
      position:relative;
      aspect-ratio:16/10;
      overflow:hidden;
    }
    .preview-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1.01);
    }
    .preview-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(12,18,30,.05), rgba(12,18,30,.28));
    }
    .preview-label{
      position:absolute;
      left:16px;
      top:16px;
      z-index:1;
      padding:8px 10px;
      border-radius:999px;
      background:rgba(17,24,39,.84);
      color:#fff;
      font-size:.8rem;
      font-weight:700;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }
    .preview-body{
      padding:18px 18px 20px;
    }
    .preview-body h3{
      margin:0 0 8px;
      font-size:1.1rem;
    }
    .preview-body p{
      margin:0;
      color:var(--muted);
      line-height:1.85;
      font-size:.95rem;
    }
    .preview-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    .mini-tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:#f5f7fb;
      color:#516074;
      font-size:.8rem;
      border:1px solid #e7edf6;
    }

    .steps-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }
    .step-card{
      padding:24px;
      border-radius:22px;
      border:1px solid rgba(231,221,209,.92);
      background:linear-gradient(180deg, #fff, #fff8f1);
      box-shadow:0 14px 30px rgba(19,24,40,.07);
      position:relative;
      overflow:hidden;
    }
    .step-index{
      width:46px;
      height:46px;
      border-radius:16px;
      display:grid;
      place-items:center;
      font-weight:800;
      color:#fff;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow:0 12px 24px rgba(255,90,31,.24);
      margin-bottom:16px;
    }
    .step-card h3{
      margin:0 0 10px;
      font-size:1.08rem;
    }
    .step-card p{
      margin:0;
      color:var(--muted);
      line-height:1.85;
      font-size:.95rem;
    }
    .step-card ul{
      margin:14px 0 0;
      padding:0;
      list-style:none;
    }
    .step-card li{
      display:flex;
      gap:10px;
      margin-bottom:8px;
      color:#445165;
      line-height:1.6;
    }
    .step-card li i{
      color:var(--primary);
      margin-top:5px;
      flex:0 0 auto;
    }

    .about-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:20px;
      align-items:start;
    }
    .about-copy{
      padding:6px 0 0;
    }
    .about-copy p{
      margin:0 0 16px;
      color:#425065;
      line-height:1.95;
    }
    .quote-box{
      border-radius:24px;
      padding:24px;
      background:linear-gradient(135deg, rgba(255,90,31,.08), rgba(255,139,26,.08));
      border:1px solid rgba(255,90,31,.15);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
    }
    .quote-box strong{
      display:block;
      font-size:1.08rem;
      margin-bottom:10px;
      color:var(--primary-deep);
    }
    .quote-box p{
      margin:0;
      color:#49586b;
      line-height:1.9;
    }
    .value-list{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      margin-top:16px;
    }
    .value-item{
      padding:14px 14px 15px;
      border-radius:18px;
      background:#fff;
      border:1px solid rgba(231,221,209,.9);
      box-shadow:0 10px 22px rgba(19,24,40,.05);
    }
    .value-item strong{
      display:block;
      margin-bottom:6px;
      color:#223048;
    }
    .value-item span{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.65;
    }

    .faq-list{
      display:grid;
      gap:12px;
    }
    details.faq-item{
      border-radius:20px;
      border:1px solid rgba(231,221,209,.92);
      background:#fff;
      overflow:hidden;
      box-shadow:0 10px 22px rgba(19,24,40,.05);
    }
    details.faq-item[open]{
      border-color:rgba(255,90,31,.2);
      box-shadow:0 16px 34px rgba(255,90,31,.08);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      color:#233045;
      font-weight:700;
      outline:none;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary i{
      color:var(--primary);
      transition:transform .22s ease;
    }
    .faq-item[open] summary i{transform:rotate(180deg)}
    .faq-answer{
      padding:0 20px 18px;
      color:#4b596c;
      line-height:1.9;
    }

    .cta-band{
      padding:8px 0 54px;
    }
    .cta-panel{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      padding:34px;
      background:
        radial-gradient(circle at top right, rgba(255,139,26,.18), transparent 26%),
        linear-gradient(135deg, #172033 0%, #111827 100%);
      color:#fff;
      box-shadow:0 28px 80px rgba(17,24,39,.22);
      border:1px solid rgba(255,255,255,.06);
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:auto -12% -35% auto;
      width:380px;
      height:380px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,90,31,.32), transparent 68%);
      pointer-events:none;
    }
    .cta-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:20px;
      align-items:center;
    }
    .cta-copy h2{
      color:#fff;
      margin:0 0 14px;
      font-size:clamp(1.8rem, 3vw, 3rem);
      line-height:1.12;
      letter-spacing:-.02em;
    }
    .cta-copy p{
      margin:0;
      color:rgba(255,255,255,.78);
      line-height:1.95;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:22px;
    }
    .btn-light{
      background:#fff;
      color:var(--primary-deep);
      box-shadow:0 16px 28px rgba(0,0,0,.18);
    }
    .btn-light:hover,
    .btn-light:focus-visible{
      transform:translateY(-2px);
      color:var(--primary-deep);
    }
    .btn-outline{
      color:#fff;
      border:1px solid rgba(255,255,255,.24);
      background:rgba(255,255,255,.04);
    }
    .btn-outline:hover,
    .btn-outline:focus-visible{
      background:rgba(255,255,255,.10);
      color:#fff;
      transform:translateY(-2px);
    }
    .cta-side{
      padding:18px;
      border-radius:24px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
    }
    .cta-side .price-box{
      padding:20px;
      border-radius:20px;
      background:linear-gradient(135deg, rgba(255,90,31,.16), rgba(255,139,26,.16));
      border:1px solid rgba(255,255,255,.16);
      margin-bottom:16px;
    }
    .cta-side .price-box strong{
      display:block;
      font-size:1.08rem;
      margin-bottom:8px;
    }
    .cta-side .price-box .big{
      display:flex;
      align-items:end;
      gap:8px;
      margin-top:4px;
    }
    .cta-side .price-box .big span{
      font-size:1rem;
      color:rgba(255,255,255,.72);
      padding-bottom:5px;
    }
    .cta-side .price-box .big em{
      font-style:normal;
      font-size:2.5rem;
      line-height:1;
      font-weight:800;
      color:#fff;
    }
    .cta-side ul{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .cta-side li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:rgba(255,255,255,.82);
      line-height:1.65;
      font-size:.94rem;
    }
    .cta-side li i{
      color:#ffd38f;
      margin-top:4px;
      flex:0 0 auto;
    }

    .footer{
      padding:28px 0 34px;
      border-top:1px solid rgba(231,221,209,.92);
      background:rgba(255,255,255,.75);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    .footer-inner{
      display:grid;
      gap:18px;
    }
    .footer-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      padding-bottom:14px;
      border-bottom:1px solid rgba(231,221,209,.8);
    }
    .footer-copy{
      max-width:720px;
      color:#4a576b;
      line-height:1.9;
    }
    .footer-meta{
      display:grid;
      gap:8px;
      color:#667085;
      font-size:.92rem;
      line-height:1.7;
    }
    .footer-links a{
      color:var(--primary-deep);
      font-weight:700;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color:var(--primary);
      text-decoration:underline;
    }

    .section-spacer{
      height:8px;
    }

    @media (max-width: 1080px){
      .hero-grid,
      .cta-grid,
      .about-grid{
        grid-template-columns:1fr;
      }
      .hero-photo{
        width:min(100%, 720px);
        margin-left:0;
      }
      .trust-bar,
      .level-grid,
      .preview-grid,
      .steps-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .hero-grid{
        min-height:auto;
      }
      .hero-title{
        max-width:12ch;
      }
    }

    @media (max-width: 768px){
      :root{
        --header-h:74px;
      }
      .header-inner{
        min-height:74px;
      }
      .brand{
        min-width:auto;
      }
      .brand-text span{
        display:none;
      }
      .menu-toggle{
        display:inline-grid;
        place-items:center;
      }
      .nav-wrap{
        position:relative;
      }
      .nav-links{
        display:none;
        position:absolute;
        top:calc(100% + 12px);
        right:0;
        left:-60vw;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        padding:12px;
        width:min(320px, 84vw);
        background:rgba(255,255,255,.98);
        border:1px solid var(--line);
        border-radius:20px;
        box-shadow:0 18px 40px rgba(19,24,40,.12);
      }
      .nav-wrap.open .nav-links{
        display:flex;
      }
      .nav-links a{
        justify-content:flex-start;
        padding:12px 12px;
        border-radius:12px;
      }
      .nav-links a::after{
        display:none;
      }
      .nav-links a.active,
      .nav-links a:hover{
        background:rgba(255,90,31,.08);
      }
      .hero{
        padding-top:18px;
      }
      .hero-shell,
      .section-panel,
      .cta-panel{
        border-radius:24px;
      }
      .hero-grid,
      .section-panel,
      .cta-panel{
        padding:20px;
      }
      .hero-title{
        max-width:100%;
        font-size:clamp(1.9rem, 8vw, 3rem);
      }
      .hero-lead,
      .section-desc,
      .about-copy p,
      .cta-copy p{
        font-size:.98rem;
      }
      .hero-kpis,
      .trust-bar,
      .level-grid,
      .preview-grid,
      .steps-grid,
      .value-list{
        grid-template-columns:1fr;
      }
      .hero-points{
        gap:8px;
      }
      .hero-points li{
        width:100%;
        border-radius:16px;
      }
      .hero-actions,
      .cta-actions{
        flex-direction:column;
      }
      .btn{
        width:100%;
      }
      .floating-card{
        max-width:170px;
      }
      .floating-card.top{
        left:10px;
      }
      .floating-card.bottom{
        right:10px;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .compare-table{
        min-width:780px;
      }
      .footer-top{
        flex-direction:column;
      }
    }

    @media (max-width: 520px){
      .grid-container{
        padding-left:14px;
        padding-right:14px;
      }
      .hero-grid{
        padding:16px;
      }
      .hero-photo{
        aspect-ratio:4/3;
        transform:none;
      }
      .floating-card{
        position:static;
        margin-top:12px;
        display:inline-block;
      }
      .hero-visual{
        display:flex;
        flex-direction:column;
        gap:10px;
      }
      .section-panel,
      .cta-panel{
        padding:16px;
      }
      .compare-table{
        min-width:720px;
      }
      .level-card,
      .preview-card,
      .step-card,
      .quote-box,
      .trust-item{
        border-radius:18px;
      }
      .price strong{
        font-size:1.8rem;
      }
      .cta-side .price-box .big em{
        font-size:2.2rem;
      }
    }

    .btn:active,
    .nav-links a:active,
    .menu-toggle:active{
      transform:translateY(1px);
    }
    .hidden-note{
      font-size:.84rem;
      color:#7c8797;
    }

/* roulang page: category4 */
:root{
      --color-primary:#ff4d1d;
      --color-primary-dark:#d7350f;
      --color-orange:#ff8a00;
      --color-gold:#ffd166;
      --color-red:#ef233c;
      --color-ink:#17171d;
      --color-title:#202027;
      --color-text:#555967;
      --color-muted:#7c8190;
      --color-soft:#fff6ef;
      --color-soft-2:#fffaf3;
      --color-bg:#fffdfb;
      --color-card:#ffffff;
      --color-line:#eee4dc;
      --color-dark:#17120f;
      --shadow-sm:0 8px 24px rgba(37,26,20,.08);
      --shadow-md:0 18px 48px rgba(255,77,29,.14);
      --shadow-lg:0 28px 80px rgba(28,17,12,.18);
      --radius-sm:12px;
      --radius-md:20px;
      --radius-lg:30px;
      --radius-xl:42px;
      --container:1180px;
      --ease:all .24s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--color-text);
      background:
        radial-gradient(circle at top left,rgba(255,138,0,.12),transparent 34rem),
        linear-gradient(180deg,#fffaf6 0%,#fffdfb 48%,#fff 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover{color:var(--color-primary)}
    img{display:block;max-width:100%;height:auto}
    button,input{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(255,77,29,.18);color:var(--color-ink)}
    .grid-container{max-width:var(--container);padding-left:22px;padding-right:22px}
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,253,251,.86);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(238,228,220,.82);
    }
    .header-inner{
      min-height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:13px;
      color:var(--color-title);
      min-width:max-content;
    }
    .brand:hover{color:var(--color-title);transform:translateY(-1px)}
    .brand-mark{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:50%;
      color:#fff;
      background:linear-gradient(135deg,var(--color-red),var(--color-orange));
      box-shadow:0 12px 28px rgba(255,77,29,.24);
    }
    .brand-text{display:flex;flex-direction:column;line-height:1.25}
    .brand-text strong{font-size:20px;letter-spacing:.03em;color:var(--color-title)}
    .brand-text span{font-size:12px;color:var(--color-muted);margin-top:3px}
    .nav-wrap{display:flex;align-items:center;gap:16px}
    .nav-links{
      display:flex;
      align-items:center;
      gap:4px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .nav-links a{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:7px 13px;
      border-radius:999px;
      font-size:14px;
      color:#50515c;
      font-weight:600;
      white-space:nowrap;
    }
    .nav-links a::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:3px;
      width:0;
      height:2px;
      border-radius:99px;
      background:linear-gradient(90deg,var(--color-red),var(--color-orange));
      transform:translateX(-50%);
      transition:var(--ease);
    }
    .nav-links a:hover{background:#fff2e8;color:var(--color-primary-dark)}
    .nav-links a:hover::after{width:22px}
    .nav-links a.active{
      background:#fff0e4;
      color:var(--color-primary-dark);
      box-shadow:inset 0 0 0 1px rgba(255,77,29,.16);
    }
    .nav-links a.active::after{width:26px}
    .menu-toggle{
      display:none;
      width:42px;
      height:42px;
      border:1px solid var(--color-line);
      border-radius:14px;
      background:#fff;
      color:var(--color-title);
      box-shadow:var(--shadow-sm);
    }
    .page-hero{
      position:relative;
      min-height:620px;
      display:flex;
      align-items:center;
      overflow:hidden;
      color:#fff;
      background:#1b120d;
    }
    .video-backdrop{
      position:absolute;
      inset:0;
      background-image:linear-gradient(90deg,rgba(18,10,7,.92),rgba(33,15,6,.68) 48%,rgba(255,77,29,.25)),url("/assets/images/backpic/back-2.webp");
      background-size:cover;
      background-position:center;
      transform:scale(1.02);
    }
    .video-backdrop::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 72% 24%,rgba(255,209,102,.24),transparent 20rem),
        linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.46));
    }
    .hero-content{
      position:relative;
      z-index:2;
      width:100%;
      padding:92px 0 74px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.04fr) minmax(320px,.66fr);
      gap:42px;
      align-items:center;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:8px 13px;
      border-radius:999px;
      color:#ffe7d6;
      background:rgba(255,255,255,.11);
      border:1px solid rgba(255,255,255,.2);
      backdrop-filter:blur(10px);
      font-size:13px;
      font-weight:700;
      margin-bottom:20px;
    }
    .eyebrow i{color:var(--color-gold)}
    h1{
      margin:0 0 20px;
      color:#fff;
      font-size:clamp(38px,6vw,74px);
      line-height:1.05;
      letter-spacing:-.055em;
      max-width:820px;
    }
    .hero-lead{
      max-width:720px;
      margin:0 0 30px;
      font-size:18px;
      color:rgba(255,255,255,.82);
    }
    .hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:48px;
      padding:13px 20px;
      border-radius:999px;
      font-weight:800;
      border:1px solid transparent;
      transition:var(--ease);
      line-height:1.1;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,var(--color-red),var(--color-orange));
      box-shadow:0 14px 34px rgba(255,77,29,.34);
    }
    .btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 42px rgba(255,77,29,.42)}
    .btn-light{
      color:#fff;
      background:rgba(255,255,255,.12);
      border-color:rgba(255,255,255,.24);
      backdrop-filter:blur(10px);
    }
    .btn-light:hover{color:#fff;background:rgba(255,255,255,.18);transform:translateY(-2px)}
    .btn-ghost{
      color:var(--color-primary-dark);
      background:#fff7ef;
      border-color:rgba(255,77,29,.16);
    }
    .btn-ghost:hover{background:#fff0e4;color:var(--color-primary-dark);transform:translateY(-2px)}
    .play-card{
      position:relative;
      min-height:390px;
      border-radius:var(--radius-xl);
      overflow:hidden;
      background:#21140f;
      box-shadow:var(--shadow-lg);
      border:1px solid rgba(255,255,255,.16);
    }
    .play-card img{width:100%;height:390px;object-fit:cover;opacity:.82}
    .play-card::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.66));
    }
    .play-button{
      position:absolute;
      z-index:2;
      left:50%;
      top:44%;
      transform:translate(-50%,-50%);
      width:82px;
      height:82px;
      display:grid;
      place-items:center;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.38);
      color:#fff;
      background:rgba(255,77,29,.88);
      box-shadow:0 20px 50px rgba(0,0,0,.32);
    }
    .play-button:hover{color:#fff;background:var(--color-orange);transform:translate(-50%,-50%) scale(1.05)}
    .play-caption{
      position:absolute;
      z-index:2;
      left:24px;
      right:24px;
      bottom:22px;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:14px;
      color:#fff;
    }
    .play-caption strong{display:block;font-size:22px;margin-bottom:4px}
    .play-caption span{font-size:13px;color:rgba(255,255,255,.74)}
    .price-pill{
      min-width:112px;
      text-align:center;
      border-radius:18px;
      padding:12px 14px;
      background:#fff;
      color:var(--color-primary-dark);
      box-shadow:0 14px 34px rgba(0,0,0,.18);
      font-weight:900;
    }
    .price-pill small{display:block;font-size:12px;color:#8b6f62;font-weight:700}
    main{background:linear-gradient(180deg,#fffdfb 0%,#fff 100%)}
    .section{padding:86px 0}
    .section-tight{padding:66px 0}
    .section-alt{background:#fff8f1}
    .section-dark{
      background:linear-gradient(135deg,#1b120f,#2b1610 58%,#3b1a0d);
      color:rgba(255,255,255,.78);
    }
    .section-head{
      max-width:840px;
      margin-bottom:34px;
    }
    .section-head.center{text-align:center;margin-left:auto;margin-right:auto}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--color-primary-dark);
      font-size:13px;
      font-weight:900;
      letter-spacing:.08em;
      margin-bottom:10px;
    }
    .section-kicker::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--color-red),var(--color-orange));
      box-shadow:0 0 0 6px rgba(255,77,29,.12);
    }
    h2{
      margin:0 0 12px;
      color:var(--color-title);
      font-size:clamp(28px,3.5vw,46px);
      line-height:1.16;
      letter-spacing:-.035em;
    }
    .section-dark h2{color:#fff}
    .section-desc{font-size:17px;color:var(--color-muted);margin:0}
    .section-dark .section-desc{color:rgba(255,255,255,.68)}
    .trust-strip{
      margin-top:-36px;
      position:relative;
      z-index:3;
    }
    .trust-box{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:0;
      background:#fff;
      border:1px solid var(--color-line);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-md);
      overflow:hidden;
    }
    .trust-item{
      display:flex;
      align-items:center;
      gap:13px;
      padding:24px 22px;
      border-right:1px solid var(--color-line);
    }
    .trust-item:last-child{border-right:0}
    .trust-icon{
      width:44px;
      height:44px;
      flex:0 0 44px;
      display:grid;
      place-items:center;
      border-radius:15px;
      color:var(--color-primary-dark);
      background:#fff0e4;
    }
    .trust-item strong{display:block;color:var(--color-title);font-size:16px}
    .trust-item span{display:block;color:var(--color-muted);font-size:13px;margin-top:2px}
    .compare-wrap{
      background:#fff;
      border:1px solid var(--color-line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    .compare-top{
      display:grid;
      grid-template-columns:1.05fr repeat(3,.82fr);
      background:linear-gradient(135deg,#fff5eb,#fff);
      border-bottom:1px solid var(--color-line);
    }
    .compare-cell{
      padding:24px 20px;
      border-right:1px solid var(--color-line);
    }
    .compare-cell:last-child{border-right:0}
    .plan-name{
      display:flex;
      align-items:center;
      gap:9px;
      color:var(--color-title);
      font-weight:900;
      font-size:18px;
      margin-bottom:8px;
    }
    .plan-name .tag{
      padding:4px 8px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--color-red),var(--color-orange));
      color:#fff;
      font-size:12px;
      font-weight:900;
    }
    .plan-price{
      color:var(--color-primary-dark);
      font-size:34px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.04em;
    }
    .plan-price small{font-size:13px;color:var(--color-muted);font-weight:700;letter-spacing:0}
    .compare-row{
      display:grid;
      grid-template-columns:1.05fr repeat(3,.82fr);
      border-bottom:1px solid var(--color-line);
    }
    .compare-row:last-child{border-bottom:0}
    .compare-row .compare-cell{padding:18px 20px}
    .feature-title{font-weight:900;color:var(--color-title)}
    .yes{color:#0f9f6e;font-weight:900}
    .hot{color:var(--color-primary-dark);font-weight:900}
    .muted{color:var(--color-muted)}
    .highlight-col{background:#fff8f0}
    .level-grid{
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:32px;
      align-items:stretch;
    }
    .level-visual{
      position:relative;
      border-radius:var(--radius-xl);
      overflow:hidden;
      min-height:500px;
      box-shadow:var(--shadow-md);
    }
    .level-visual img{width:100%;height:100%;object-fit:cover}
    .level-visual::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.62));
    }
    .visual-note{
      position:absolute;
      z-index:2;
      left:24px;
      right:24px;
      bottom:24px;
      padding:20px;
      border-radius:24px;
      background:rgba(255,255,255,.9);
      color:var(--color-title);
      backdrop-filter:blur(10px);
    }
    .visual-note strong{font-size:22px;display:block;margin-bottom:5px}
    .level-list{display:grid;gap:16px}
    .level-card{
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:16px;
      align-items:center;
      padding:22px;
      border:1px solid var(--color-line);
      border-radius:var(--radius-md);
      background:#fff;
      box-shadow:var(--shadow-sm);
      transition:var(--ease);
    }
    .level-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(255,77,29,.22)}
    .level-num{
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      border-radius:16px;
      color:#fff;
      font-weight:950;
      background:linear-gradient(135deg,var(--color-red),var(--color-orange));
    }
    .level-card h3{margin:0 0 4px;color:var(--color-title);font-size:20px}
    .level-card p{margin:0;color:var(--color-muted);font-size:14px}
    .level-badge{
      padding:8px 11px;
      border-radius:999px;
      background:#fff2e8;
      color:var(--color-primary-dark);
      font-size:12px;
      font-weight:900;
      white-space:nowrap;
    }
    .preview-layout{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:20px;
    }
    .preview-card{
      position:relative;
      min-height:360px;
      border-radius:var(--radius-lg);
      overflow:hidden;
      background:#1d1510;
      box-shadow:var(--shadow-sm);
    }
    .preview-card.wide{grid-column:span 2}
    .preview-card img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:var(--ease)}
    .preview-card:hover img{transform:scale(1.05);opacity:.9}
    .preview-overlay{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      padding:24px;
      color:#fff;
      background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72));
    }
    .preview-overlay .label{
      align-self:flex-start;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,77,29,.9);
      color:#fff;
      font-size:12px;
      font-weight:900;
      margin-bottom:12px;
    }
    .preview-overlay h3{margin:0 0 8px;font-size:24px;color:#fff}
    .preview-overlay p{margin:0;color:rgba(255,255,255,.76);font-size:14px}
    .flow{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
      counter-reset:step;
    }
    .flow-card{
      position:relative;
      padding:26px 22px;
      border-radius:var(--radius-md);
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
    }
    .flow-card::before{
      counter-increment:step;
      content:"0" counter(step);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      border-radius:14px;
      color:#fff;
      background:linear-gradient(135deg,var(--color-red),var(--color-orange));
      font-weight:950;
      margin-bottom:18px;
    }
    .flow-card h3{margin:0 0 8px;color:#fff;font-size:19px}
    .flow-card p{margin:0;color:rgba(255,255,255,.68);font-size:14px}
    .scenario-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:24px;
      align-items:start;
    }
    .scenario-main{
      padding:34px;
      border-radius:var(--radius-xl);
      background:#fff;
      border:1px solid var(--color-line);
      box-shadow:var(--shadow-sm);
    }
    .scenario-main h2{font-size:38px}
    .scenario-list{display:grid;gap:14px;margin-top:22px}
    .scenario-item{
      display:flex;
      gap:14px;
      padding:16px;
      border-radius:18px;
      background:#fff7ef;
      border:1px solid rgba(255,77,29,.1);
    }
    .scenario-item i{color:var(--color-primary-dark);margin-top:5px}
    .scenario-item strong{display:block;color:var(--color-title)}
    .scenario-item span{display:block;color:var(--color-muted);font-size:14px;margin-top:2px}
    .deal-card{
      position:sticky;
      top:104px;
      padding:28px;
      border-radius:var(--radius-xl);
      color:#fff;
      background:
        radial-gradient(circle at 80% 0%,rgba(255,209,102,.36),transparent 17rem),
        linear-gradient(135deg,var(--color-red),var(--color-orange));
      box-shadow:var(--shadow-md);
      overflow:hidden;
    }
    .deal-card::before{
      content:"";
      position:absolute;
      right:-38px;
      bottom:-42px;
      width:180px;
      height:180px;
      border-radius:50%;
      background:rgba(255,255,255,.16);
    }
    .deal-card > *{position:relative;z-index:2}
    .deal-card h3{margin:0 0 10px;color:#fff;font-size:28px}
    .deal-card p{color:rgba(255,255,255,.84);margin:0 0 18px}
    .coupon{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.16);
      border:1px dashed rgba(255,255,255,.5);
      margin:18px 0;
    }
    .coupon strong{font-size:24px}
    .faq-wrap{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:36px;
      align-items:start;
    }
    .faq-side{
      padding:30px;
      border-radius:var(--radius-xl);
      background:#fff7ef;
      border:1px solid rgba(255,77,29,.12);
    }
    .faq-side h2{font-size:36px}
    .accordion{
      background:transparent;
      margin:0;
    }
    .accordion-item{
      border:1px solid var(--color-line);
      border-radius:20px;
      overflow:hidden;
      background:#fff;
      margin-bottom:14px;
      box-shadow:0 8px 22px rgba(37,26,20,.05);
    }
    .accordion-title{
      border:0;
      color:var(--color-title);
      font-weight:900;
      font-size:16px;
      padding:20px 54px 20px 22px;
    }
    .accordion-title:hover,.accordion-title:focus{
      background:#fff4ea;
      color:var(--color-primary-dark);
    }
    .accordion-title::before{right:22px;color:var(--color-primary-dark)}
    .accordion-content{
      border:0;
      color:var(--color-muted);
      padding:0 22px 22px;
      background:#fff;
    }
    .cta{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-xl);
      padding:46px;
      color:#fff;
      background:
        linear-gradient(90deg,rgba(24,12,8,.92),rgba(24,12,8,.68)),
        url("/assets/images/backpic/back-3.webp") center/cover;
      box-shadow:var(--shadow-lg);
    }
    .cta::after{
      content:"";
      position:absolute;
      inset:auto -80px -110px auto;
      width:280px;
      height:280px;
      border-radius:50%;
      background:rgba(255,138,0,.28);
    }
    .cta-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:1fr auto;
      gap:30px;
      align-items:center;
    }
    .cta h2{color:#fff;margin-bottom:10px}
    .cta p{margin:0;color:rgba(255,255,255,.74);max-width:720px}
    .cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
    .footer{
      padding:46px 0;
      background:#130f0d;
      color:rgba(255,255,255,.72);
    }
    .footer-inner{display:grid;gap:26px}
    .footer-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:34px;
      padding-bottom:24px;
      border-bottom:1px solid rgba(255,255,255,.1);
    }
    .footer .brand-text strong{color:#fff}
    .footer .brand-text span{color:rgba(255,255,255,.52)}
    .footer-copy{max-width:620px;color:rgba(255,255,255,.68);font-size:14px}
    .footer-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      font-size:13px;
      color:rgba(255,255,255,.56);
    }
    .footer-links a{color:rgba(255,255,255,.76)}
    .footer-links a:hover{color:#fff}
    .focus-card:focus,.btn:focus,.menu-toggle:focus,.nav-links a:focus{
      outline:3px solid rgba(255,138,0,.34);
      outline-offset:3px;
    }
    @media (max-width:1024px){
      .header-inner{min-height:76px}
      .hero-grid,.level-grid,.scenario-grid,.faq-wrap{grid-template-columns:1fr}
      .deal-card{position:relative;top:auto}
      .trust-box{grid-template-columns:repeat(2,1fr)}
      .trust-item:nth-child(2){border-right:0}
      .trust-item:nth-child(1),.trust-item:nth-child(2){border-bottom:1px solid var(--color-line)}
      .flow{grid-template-columns:repeat(2,1fr)}
      .compare-wrap{overflow-x:auto}
      .compare-top,.compare-row{min-width:880px}
      .preview-layout{grid-template-columns:1fr 1fr}
      .preview-card.wide{grid-column:span 2}
    }
    @media (max-width:840px){
      .menu-toggle{display:inline-grid;place-items:center}
      .nav-links{
        position:absolute;
        top:76px;
        left:22px;
        right:22px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding:16px;
        border:1px solid var(--color-line);
        border-radius:22px;
        background:rgba(255,255,255,.96);
        box-shadow:var(--shadow-md);
      }
      .nav-links.is-open{display:flex}
      .nav-links a{justify-content:flex-start;padding:12px 14px}
      .page-hero{min-height:auto}
      .hero-content{padding:72px 0 56px}
      .play-card,.play-card img{height:330px;min-height:330px}
      .footer-top{flex-direction:column}
      .footer-meta{flex-direction:column;align-items:flex-start}
    }
    @media (max-width:640px){
      .grid-container{padding-left:16px;padding-right:16px}
      .section{padding:64px 0}
      .section-tight{padding:52px 0}
      .hero-actions,.cta-actions{width:100%;justify-content:flex-start}
      .btn{width:100%}
      .trust-box,.flow,.preview-layout{grid-template-columns:1fr}
      .trust-item{border-right:0!important;border-bottom:1px solid var(--color-line)}
      .trust-item:last-child{border-bottom:0}
      .preview-card,.preview-card.wide{grid-column:auto;min-height:310px}
      .level-card{grid-template-columns:auto 1fr}
      .level-badge{grid-column:1/-1;width:max-content}
      .scenario-main,.faq-side,.cta{padding:24px}
      .cta-grid{grid-template-columns:1fr}
      .cta-actions{justify-content:flex-start}
      .play-caption{flex-direction:column;align-items:flex-start}
      .price-pill{text-align:left}
    }

/* roulang page: category2 */
:root{
      --bg:#f5f6fb;
      --bg-soft:#ffffff;
      --text:#121826;
      --muted:#5f6b81;
      --line:#e7eaf1;
      --primary:#e53935;
      --primary-2:#ff6a00;
      --primary-dark:#b91c1c;
      --accent:#ff8a00;
      --green:#17a34a;
      --shadow:0 18px 44px rgba(17,24,39,.10);
      --shadow-soft:0 10px 30px rgba(17,24,39,.08);
      --radius:22px;
      --radius-sm:16px;
      --radius-xs:12px;
      --space:clamp(18px,2vw,28px);
      --max:1200px;
      --header-h:78px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(255,106,0,.08), transparent 30%),
        radial-gradient(circle at top right, rgba(229,57,53,.08), transparent 26%),
        linear-gradient(180deg, #fbfbfd 0%, #f4f6fb 100%);
      line-height:1.75;
      overflow-x:hidden;
      padding-top:var(--header-h);
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none;transition:color .25s var(--ease),transform .25s var(--ease),opacity .25s var(--ease)}
    button,input,textarea,select{font:inherit}
    .grid-container{
      width:min(var(--max),calc(100% - 32px));
      margin:0 auto;
      padding-left:0;
      padding-right:0;
    }
    .site-header{
      position:fixed;
      inset:0 0 auto 0;
      z-index:1200;
      background:rgba(255,255,255,.84);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(231,234,241,.9);
      box-shadow:0 8px 30px rgba(17,24,39,.04);
    }
    .header-inner{
      min-height:var(--header-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:0;
      flex:0 0 auto;
    }
    .brand-mark{
      width:44px;height:44px;
      display:grid;place-items:center;
      border-radius:14px;
      color:#fff;
      background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
      box-shadow:0 12px 24px rgba(229,57,53,.25);
      flex:0 0 auto;
    }
    .brand-mark i{font-size:18px}
    .brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
    .brand-text strong{
      font-size:1.02rem;
      letter-spacing:.2px;
      white-space:nowrap;
    }
    .brand-text span{
      margin-top:5px;
      color:var(--muted);
      font-size:.78rem;
      white-space:nowrap;
    }
    .nav-wrap{display:flex;align-items:center;gap:14px}
    .nav-links{
      list-style:none;
      display:flex;
      align-items:center;
      gap:8px;
      margin:0;
      padding:0;
    }
    .nav-links a{
      position:relative;
      display:inline-flex;
      align-items:center;
      padding:12px 14px;
      color:#273244;
      font-size:.95rem;
      font-weight:600;
      border-radius:999px;
    }
    .nav-links a::after{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      bottom:7px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--primary-2));
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .25s var(--ease);
    }
    .nav-links a:hover,
    .nav-links a:focus-visible{
      color:var(--primary-dark);
      background:rgba(229,57,53,.06);
      outline:none;
    }
    .nav-links a:hover::after,
    .nav-links a:focus-visible::after,
    .nav-links a.active::after{transform:scaleX(1)}
    .nav-links a.active{
      color:var(--primary-dark);
      background:rgba(229,57,53,.08);
      box-shadow:inset 0 0 0 1px rgba(229,57,53,.10);
    }
    .menu-toggle{
      display:none;
      width:44px;height:44px;
      border:1px solid var(--line);
      background:#fff;
      color:#1f2937;
      border-radius:14px;
      box-shadow:0 10px 24px rgba(17,24,39,.05);
      cursor:pointer;
      transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    }
    .menu-toggle:hover,
    .menu-toggle:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(229,57,53,.25);
      box-shadow:0 14px 28px rgba(229,57,53,.10);
      outline:none;
    }

    main{display:block}
    .hero-section{
      position:relative;
      padding:24px 0 28px;
    }
    .hero-shell{
      position:relative;
      border-radius:30px;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(10,13,26,.92), rgba(13,18,34,.84)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.12);
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 15% 20%, rgba(255,106,0,.22), transparent 28%),
        radial-gradient(circle at 80% 15%, rgba(229,57,53,.18), transparent 22%),
        radial-gradient(circle at 70% 80%, rgba(255,138,0,.14), transparent 26%);
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      padding:clamp(24px,4vw,42px);
      color:#fff;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.55fr) minmax(320px,.95fr);
      gap:18px;
      align-items:stretch;
    }
    .hero-main,
    .hero-side-card{
      position:relative;
      border-radius:26px;
      overflow:hidden;
      backdrop-filter:blur(10px);
    }
    .hero-main{
      padding:clamp(24px,3vw,36px);
      background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
      border:1px solid rgba(255,255,255,.14);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
      min-height:420px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:20px;
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:max-content;
      font-size:.8rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#fff;
      background:linear-gradient(90deg, rgba(255,106,0,.95), rgba(229,57,53,.95));
      padding:8px 14px;
      border-radius:999px;
      box-shadow:0 14px 30px rgba(229,57,53,.28);
    }
    .hero-title{
      margin:18px 0 14px;
      font-size:clamp(2.1rem,5vw,4.4rem);
      line-height:1.06;
      letter-spacing:-.04em;
      max-width:12ch;
    }
    .hero-desc{
      margin:0;
      max-width:62ch;
      color:rgba(255,255,255,.84);
      font-size:1.02rem;
    }
    .hero-points{
      list-style:none;
      margin:22px 0 0;
      padding:0;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    .hero-points li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      padding:14px 14px;
      border-radius:18px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      color:#f7f8fb;
      min-height:72px;
    }
    .hero-points i{
      width:30px;height:30px;
      display:grid;place-items:center;
      border-radius:10px;
      background:rgba(255,255,255,.12);
      color:#ffd7cc;
      flex:0 0 auto;
    }
    .hero-points strong{display:block;font-size:.95rem;line-height:1.25}
    .hero-points span{display:block;color:rgba(255,255,255,.72);font-size:.84rem;margin-top:2px}
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      margin-top:12px;
    }
    .btn-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border-radius:999px;
      padding:14px 20px;
      font-weight:700;
      border:1px solid transparent;
      cursor:pointer;
      transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
      color:#fff;
      box-shadow:0 16px 30px rgba(229,57,53,.25);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      transform:translateY(-2px);
      box-shadow:0 20px 34px rgba(229,57,53,.30);
      color:#fff;
      outline:none;
    }
    .btn-ghost{
      color:#fff;
      border-color:rgba(255,255,255,.20);
      background:rgba(255,255,255,.06);
    }
    .btn-ghost:hover,
    .btn-ghost:focus-visible{
      transform:translateY(-2px);
      background:rgba(255,255,255,.12);
      border-color:rgba(255,255,255,.32);
      outline:none;
    }
    .hero-trust{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:8px;
    }
    .trust-item{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.88);
      font-size:.86rem;
    }
    .trust-item i{color:#ffb39c}
    .hero-side{
      display:grid;
      gap:18px;
      align-content:stretch;
    }
    .hero-side-card{
      padding:22px;
      min-height:201px;
      background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,250,247,.94));
      color:var(--text);
      border:1px solid rgba(255,255,255,.35);
      box-shadow:0 16px 34px rgba(17,24,39,.12);
    }
    .hero-side-card::after{
      content:"";
      position:absolute;
      inset:auto -40px -40px auto;
      width:130px;height:130px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,106,0,.16), rgba(255,106,0,0) 68%);
      pointer-events:none;
    }
    .hero-side-card .mini-label{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(229,57,53,.08);
      color:var(--primary-dark);
      font-size:.78rem;
      font-weight:700;
      margin-bottom:12px;
    }
    .hero-side-card h3{
      margin:0 0 8px;
      font-size:1.15rem;
      line-height:1.3;
    }
    .hero-side-card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .hero-side-card .mini-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:16px;
    }
    .mini-chip{
      padding:7px 10px;
      border-radius:999px;
      background:#fff7f4;
      color:#bb341f;
      border:1px solid rgba(229,57,53,.10);
      font-size:.82rem;
      font-weight:700;
    }
    .mini-chip.alt{
      background:#fff8ee;
      color:#b45b00;
      border-color:rgba(255,138,0,.16);
    }

    .section{
      padding:18px 0 6px;
    }
    .section-card{
      background:rgba(255,255,255,.82);
      border:1px solid rgba(231,234,241,.95);
      border-radius:28px;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .section-inner{
      padding:clamp(22px,3vw,34px);
    }
    .section-head{
      display:flex;
      flex-wrap:wrap;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
      margin-bottom:18px;
    }
    .section-title-wrap{max-width:760px}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(229,57,53,.08), rgba(255,106,0,.10));
      color:var(--primary-dark);
      font-size:.8rem;
      font-weight:800;
      margin-bottom:12px;
    }
    .section-title{
      margin:0;
      font-size:clamp(1.4rem,2.5vw,2.2rem);
      line-height:1.2;
      letter-spacing:-.03em;
    }
    .section-desc{
      margin:10px 0 0;
      color:var(--muted);
      max-width:68ch;
      font-size:.98rem;
    }
    .section-note{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:14px;
      background:#fff7f2;
      border:1px solid rgba(255,106,0,.14);
      color:#b24d00;
      font-size:.9rem;
      font-weight:700;
      white-space:nowrap;
    }

    .signal-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
    }
    .signal-card{
      position:relative;
      padding:18px 18px 18px;
      border-radius:22px;
      background:linear-gradient(180deg,#fff,#fffaf7);
      border:1px solid rgba(231,234,241,.95);
      box-shadow:0 12px 28px rgba(17,24,39,.05);
      min-height:152px;
      overflow:hidden;
      transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    }
    .signal-card:hover{
      transform:translateY(-3px);
      box-shadow:0 16px 34px rgba(229,57,53,.10);
      border-color:rgba(229,57,53,.14);
    }
    .signal-card .icon{
      width:44px;height:44px;
      display:grid;place-items:center;
      border-radius:14px;
      background:linear-gradient(135deg, rgba(229,57,53,.10), rgba(255,106,0,.12));
      color:var(--primary-dark);
      margin-bottom:12px;
      font-size:1.05rem;
    }
    .signal-card h3{
      margin:0 0 8px;
      font-size:1.02rem;
      line-height:1.3;
    }
    .signal-card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .signal-card .tag-row{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:12px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      padding:6px 9px;
      border-radius:999px;
      background:#fff7f2;
      color:#b24d00;
      border:1px solid rgba(255,106,0,.14);
      font-size:.78rem;
      font-weight:700;
    }

    .compare-wrap{
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:18px;
      align-items:start;
    }
    .table-shell{
      background:#fff;
      border-radius:24px;
      border:1px solid var(--line);
      padding:14px;
      box-shadow:0 12px 28px rgba(17,24,39,.05);
    }
    .table-scroll{overflow-x:auto}
    .compare-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      min-width:720px;
      overflow:hidden;
      border-radius:18px;
    }
    .compare-table th,
    .compare-table td{
      padding:16px 14px;
      text-align:left;
      border-bottom:1px solid var(--line);
      vertical-align:top;
      font-size:.95rem;
    }
    .compare-table thead th{
      background:linear-gradient(180deg,#fff8f4,#fff);
      color:#263042;
      font-size:.88rem;
      letter-spacing:.02em;
      text-transform:none;
    }
    .compare-table thead th:nth-child(3){
      color:var(--primary-dark);
    }
    .compare-table tbody tr:hover td{background:#fffdfb}
    .compare-table tbody tr:last-child td{border-bottom:none}
    .compare-table .feature-name{
      font-weight:800;
      color:#162033;
      width:22%;
    }
    .compare-table .highlight-col{
      background:linear-gradient(180deg, rgba(255,106,0,.08), rgba(255,106,0,.04));
      color:#9c3f00;
      font-weight:700;
    }
    .compare-table .free-col{color:#5f6b81}
    .compare-table .vip-col{color:#a81f1f}
    .compare-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-bottom:10px;
      padding:7px 11px;
      border-radius:999px;
      background:#fff0e8;
      color:#b84500;
      font-size:.78rem;
      font-weight:800;
      border:1px solid rgba(255,106,0,.16);
    }
    .compare-side{
      display:grid;
      gap:14px;
    }
    .side-box{
      padding:20px;
      border-radius:22px;
      background:linear-gradient(180deg,#fff,#fff8f4);
      border:1px solid var(--line);
      box-shadow:0 12px 28px rgba(17,24,39,.05);
    }
    .side-box h3{
      margin:0 0 10px;
      font-size:1.1rem;
    }
    .side-box p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }
    .side-list{
      list-style:none;
      margin:16px 0 0;
      padding:0;
      display:grid;
      gap:12px;
    }
    .side-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#2c3748;
      font-size:.92rem;
    }
    .side-list i{
      color:var(--green);
      margin-top:.2rem;
      width:18px;
      flex:0 0 auto;
    }

    .level-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }
    .level-card{
      position:relative;
      border-radius:24px;
      background:linear-gradient(180deg,#fff,#fff9f6);
      border:1px solid var(--line);
      overflow:hidden;
      box-shadow:0 12px 28px rgba(17,24,39,.05);
      transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    }
    .level-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 34px rgba(229,57,53,.11);
      border-color:rgba(229,57,53,.16);
    }
    .level-card.featured{
      border-color:rgba(255,106,0,.22);
      box-shadow:0 18px 40px rgba(255,106,0,.12);
    }
    .level-top{
      padding:20px 20px 16px;
      border-bottom:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,106,0,.06), rgba(255,255,255,0) 56%);
    }
    .level-label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:999px;
      background:#fff0e8;
      color:#b84500;
      border:1px solid rgba(255,106,0,.14);
      font-size:.78rem;
      font-weight:800;
    }
    .level-card h3{
      margin:14px 0 8px;
      font-size:1.22rem;
    }
    .level-price{
      display:flex;
      align-items:baseline;
      gap:8px;
      margin-top:10px;
      color:var(--primary-dark);
    }
    .level-price strong{
      font-size:2rem;
      line-height:1;
      letter-spacing:-.04em;
    }
    .level-price span{
      font-size:.9rem;
      color:#8a95a8;
    }
    .level-body{padding:18px 20px 20px}
    .level-body p{margin:0 0 14px;color:var(--muted)}
    .level-body ul{
      margin:0;
      padding-left:18px;
      color:#273244;
    }
    .level-body li{margin:8px 0}
    .level-foot{
      padding:0 20px 20px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }
    .level-chip{
      display:inline-flex;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      background:#f5f8ff;
      color:#39517e;
      font-size:.8rem;
      font-weight:700;
    }
    .level-chip.hot{
      background:#fff1e8;
      color:#b84500;
    }

    .preview-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }
    .preview-card{
      overflow:hidden;
      border-radius:24px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 12px 28px rgba(17,24,39,.05);
      display:flex;
      flex-direction:column;
      transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    }
    .preview-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 34px rgba(229,57,53,.10);
      border-color:rgba(229,57,53,.14);
    }
    .preview-media{
      position:relative;
      aspect-ratio:16/10;
      overflow:hidden;
    }
    .preview-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .45s var(--ease);
    }
    .preview-card:hover .preview-media img{transform:scale(1.04)}
    .preview-badge{
      position:absolute;
      left:16px;
      top:16px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(17,24,39,.82);
      color:#fff;
      font-size:.78rem;
      font-weight:800;
      backdrop-filter:blur(8px);
    }
    .preview-body{
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:10px;
      flex:1;
    }
    .preview-body h3{
      margin:0;
      font-size:1.08rem;
      line-height:1.35;
    }
    .preview-body p{
      margin:0;
      color:var(--muted);
      font-size:.93rem;
    }
    .preview-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:auto;
      align-items:center;
    }
    .date-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:#fff5f0;
      color:#b84500;
      border:1px solid rgba(255,106,0,.12);
      font-size:.8rem;
      font-weight:800;
    }
    .text-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--primary-dark);
      font-weight:800;
      font-size:.9rem;
      margin-left:auto;
    }
    .text-link:hover{color:#8c1818}
    .story-grid{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      gap:18px;
      align-items:center;
    }
    .story-media{
      border-radius:26px;
      overflow:hidden;
      min-height:340px;
      box-shadow:var(--shadow);
    }
    .story-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      min-height:340px;
    }
    .story-copy{
      padding:8px 0;
    }
    .story-copy .lead{
      font-size:1rem;
      color:#293244;
      margin:0 0 14px;
    }
    .story-copy p{
      margin:0 0 14px;
      color:var(--muted);
    }
    .story-points{
      list-style:none;
      margin:18px 0 0;
      padding:0;
      display:grid;
      gap:10px;
    }
    .story-points li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      padding:14px 16px;
      background:#fff;
      border-radius:18px;
      border:1px solid var(--line);
      box-shadow:0 10px 24px rgba(17,24,39,.04);
    }
    .story-points i{
      width:28px;height:28px;
      display:grid;place-items:center;
      border-radius:10px;
      background:linear-gradient(135deg, rgba(229,57,53,.10), rgba(255,106,0,.12));
      color:var(--primary-dark);
      flex:0 0 auto;
      margin-top:1px;
    }
    .story-points strong{display:block;font-size:.96rem}
    .story-points span{display:block;color:var(--muted);font-size:.9rem}

    .process-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }
    .process-step{
      padding:20px;
      border-radius:22px;
      border:1px solid var(--line);
      background:linear-gradient(180deg,#fff,#fffaf7);
      box-shadow:0 12px 28px rgba(17,24,39,.05);
      position:relative;
    }
    .process-step::before{
      content:"";
      position:absolute;
      inset:18px 18px auto auto;
      width:70px;height:70px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,106,0,.14), rgba(255,106,0,0) 66%);
    }
    .process-num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:42px;height:42px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff;
      font-weight:800;
      box-shadow:0 14px 28px rgba(229,57,53,.24);
      margin-bottom:14px;
    }
    .process-step h3{
      margin:0 0 8px;
      font-size:1.08rem;
    }
    .process-step p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }
    .process-step ul{
      margin:14px 0 0;
      padding-left:18px;
      color:#273244;
    }
    .process-step li{margin:6px 0}

    .faq-wrap{
      display:grid;
      gap:12px;
    }
    .faq-item{
      border-radius:20px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 10px 24px rgba(17,24,39,.04);
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      font-weight:700;
      color:#1c2535;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      width:30px;height:30px;
      display:grid;
      place-items:center;
      border-radius:10px;
      background:#fff1ea;
      color:var(--primary-dark);
      font-size:1.1rem;
      flex:0 0 auto;
      transition:transform .25s var(--ease), background .25s var(--ease);
    }
    .faq-item[open] summary{
      background:linear-gradient(180deg,#fff8f4,#fff);
      border-bottom:1px solid var(--line);
    }
    .faq-item[open] summary::after{
      content:"−";
      background:#ffe8de;
      transform:rotate(0deg);
    }
    .faq-item .faq-body{
      padding:0 20px 18px;
      color:var(--muted);
    }
    .faq-item .faq-body p{margin:14px 0 0}
    .faq-item summary:hover{background:#fffaf7}

    .cta-band{
      border-radius:28px;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(13,18,34,.98), rgba(28,32,55,.96)),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
      color:#fff;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.10);
      position:relative;
    }
    .cta-band::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 24%, rgba(255,106,0,.18), transparent 25%),
        radial-gradient(circle at 85% 15%, rgba(229,57,53,.16), transparent 20%);
      pointer-events:none;
    }
    .cta-inner{
      position:relative;
      padding:clamp(24px,4vw,40px);
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:18px;
      align-items:center;
    }
    .cta-inner h2{
      margin:0 0 12px;
      font-size:clamp(1.5rem,2.8vw,2.5rem);
      line-height:1.15;
    }
    .cta-inner p{
      margin:0;
      color:rgba(255,255,255,.82);
      max-width:60ch;
    }
    .cta-visual{
      display:grid;
      gap:12px;
    }
    .cta-badge-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-start;
    }
    .cta-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      font-size:.88rem;
      font-weight:700;
    }
    .cta-badge i{color:#ffd2c1}
    .cta-card{
      padding:18px;
      border-radius:22px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    .cta-card .price-flag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:linear-gradient(135deg, rgba(255,106,0,.95), rgba(229,57,53,.96));
      color:#fff;
      font-weight:800;
      box-shadow:0 16px 28px rgba(229,57,53,.25);
      margin-bottom:14px;
    }
    .cta-card strong{
      display:block;
      font-size:1.12rem;
      margin-bottom:8px;
    }
    .cta-card p{
      margin:0;
      color:rgba(255,255,255,.78);
      font-size:.94rem;
    }

    .footer{
      margin-top:24px;
      padding:28px 0 34px;
      background:#0f1424;
      color:#d6dbe8;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-inner{
      display:grid;
      gap:18px;
    }
    .footer-top{
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:flex-start;
    }
    .footer .brand .brand-mark{
      background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
    }
    .footer .brand-text strong{color:#fff}
    .footer .brand-text span{color:#aab2c5}
    .footer-copy{
      max-width:660px;
      color:#aab2c5;
      font-size:.95rem;
    }
    .footer-meta{
      display:grid;
      gap:8px;
      color:#9ba6bb;
      font-size:.9rem;
      padding-top:4px;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-links a{
      color:#ffcab6;
      margin:0 2px;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color:#fff;
      outline:none;
    }

    .section-spacer{height:14px}

    @media (max-width: 1024px){
      .hero-grid,
      .compare-wrap,
      .story-grid,
      .cta-inner{
        grid-template-columns:1fr;
      }
      .signal-grid,
      .preview-grid,
      .level-grid,
      .process-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .hero-main{min-height:auto}
      .hero-points{grid-template-columns:1fr}
      .footer-top{flex-direction:column}
    }
    @media (max-width: 768px){
      body{padding-top:72px}
      .grid-container{width:min(calc(100% - 22px), var(--max))}
      .header-inner{min-height:72px}
      .nav-wrap{margin-left:auto}
      .menu-toggle{display:inline-grid;place-items:center}
      .nav-links{
        position:absolute;
        top:72px;
        left:11px;
        right:11px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        background:rgba(255,255,255,.98);
        border:1px solid var(--line);
        border-radius:20px;
        padding:10px;
        box-shadow:0 18px 34px rgba(17,24,39,.12);
      }
      .nav-wrap.is-open .nav-links{display:flex}
      .nav-links a{
        width:100%;
        justify-content:flex-start;
        border-radius:14px;
      }
      .nav-links a::after{display:none}
      .hero-points li{min-height:auto}
      .signal-grid,
      .preview-grid,
      .level-grid,
      .process-grid{
        grid-template-columns:1fr;
      }
      .section-head{align-items:flex-start}
      .section-note{white-space:normal}
      .compare-table th,
      .compare-table td{padding:14px 12px}
    }
    @media (max-width: 520px){
      .hero-inner,
      .section-inner,
      .cta-inner{padding:18px}
      .hero-title{max-width:none}
      .hero-actions,
      .cta-badge-row{
        flex-direction:column;
        align-items:stretch;
      }
      .btn-pill{width:100%}
      .hero-side-card{min-height:auto}
      .section-title{font-size:1.35rem}
      .section-desc,.hero-desc,.story-copy p{font-size:.94rem}
      .signal-card,.level-card,.preview-card,.process-step,.faq-item{border-radius:18px}
      .hero-shell{border-radius:22px}
      .cta-band{border-radius:22px}
      .table-shell{padding:10px}
    }
    a:focus-visible,
    button:focus-visible,
    summary:focus-visible{
      outline:3px solid rgba(255,106,0,.35);
      outline-offset:2px;
    }

/* roulang page: category5 */
:root{
      --bg:#f6f7fb;
      --bg-2:#ffffff;
      --panel:#fff7f3;
      --panel-2:#ffffff;
      --text:#18202b;
      --muted:#6d7783;
      --line:#e6e9ef;
      --line-2:#ffd7c7;
      --primary:#ff5a2f;
      --primary-2:#ff8a00;
      --primary-3:#ffb14a;
      --dark:#111722;
      --soft:#fff0e8;
      --shadow:0 18px 45px rgba(19,28,43,.12);
      --shadow-2:0 12px 30px rgba(255,90,47,.18);
      --radius:22px;
      --radius-sm:14px;
      --radius-lg:30px;
      --container:1200px;
      --gap:24px;
      --speed:.28s ease;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top right, rgba(255,138,0,.12), transparent 24%),
        radial-gradient(circle at left 25%, rgba(255,90,47,.08), transparent 18%),
        var(--bg);
      line-height:1.75;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    a{color:inherit;text-decoration:none;transition:color var(--speed),background var(--speed),transform var(--speed),opacity var(--speed)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(255,90,47,.18);color:var(--dark)}
    .grid-container{max-width:var(--container)}
    .site-header{
      position:sticky;top:0;z-index:1000;
      background:rgba(246,247,251,.82);
      backdrop-filter:saturate(180%) blur(18px);
      border-bottom:1px solid rgba(230,233,239,.75);
    }
    .header-inner{
      min-height:84px;
      display:flex;align-items:center;justify-content:space-between;gap:18px;
    }
    .brand{
      display:inline-flex;align-items:center;gap:14px;
      min-width:0;
    }
    .brand-mark{
      width:46px;height:46px;border-radius:16px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff;font-size:1.05rem;box-shadow:var(--shadow-2);
      flex:0 0 auto;
    }
    .brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
    .brand-text strong{font-size:1.08rem;letter-spacing:.02em}
    .brand-text span{font-size:.82rem;color:var(--muted);margin-top:4px}
    .nav-wrap{display:flex;align-items:center;gap:12px}
    .nav-links{
      display:flex;align-items:center;gap:6px;
      list-style:none;margin:0;padding:0;
    }
    .nav-links a{
      display:inline-flex;align-items:center;justify-content:center;
      padding:12px 14px;border-radius:999px;
      color:#273141;font-size:.96rem;font-weight:600;
      position:relative;
    }
    .nav-links a:hover,
    .nav-links a:focus{
      color:var(--primary);
      background:rgba(255,90,47,.08);
      outline:none;
    }
    .nav-links a.active{
      color:var(--primary);
      background:rgba(255,90,47,.12);
      box-shadow:inset 0 -2px 0 var(--primary);
    }
    .nav-links a.active::after{
      content:"";position:absolute;left:18px;right:18px;bottom:8px;height:2px;border-radius:2px;
      background:linear-gradient(90deg,var(--primary),var(--primary-2));
      opacity:0;
    }
    .menu-toggle{
      display:none;
      width:46px;height:46px;border-radius:14px;
      border:1px solid var(--line);background:#fff;color:var(--dark);
      box-shadow:0 8px 18px rgba(17,23,34,.05);
    }
    .menu-toggle:hover{border-color:var(--line-2);color:var(--primary)}
    .section{
      padding:76px 0;
      position:relative;
    }
    .section-tight{padding:56px 0}
    .section-dark{
      background:linear-gradient(135deg,#101725 0%, #171f2e 52%, #0f1520 100%);
      color:#eef2f7;
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      color:var(--primary);
      background:rgba(255,90,47,.08);
      border:1px solid rgba(255,90,47,.15);
      padding:7px 14px;border-radius:999px;
      font-size:.86rem;font-weight:700;letter-spacing:.04em;
    }
    .eyebrow.dark{
      color:#ffd4c5;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)
    }
    h1,h2,h3,h4{margin:0;line-height:1.18}
    h1{font-size:clamp(2.2rem,4vw,4.3rem);letter-spacing:-.03em}
    h2{font-size:clamp(1.55rem,2.3vw,2.55rem);letter-spacing:-.02em}
    h3{font-size:1.22rem}
    p{margin:0 0 1rem}
    .hero{
      padding:30px 0 44px;
      position:relative;
      overflow:hidden;
    }
    .hero-shell{
      position:relative;
      border-radius:34px;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(11,17,27,.86), rgba(17,23,34,.70)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      box-shadow:0 30px 70px rgba(8,13,22,.22);
      border:1px solid rgba(255,255,255,.08);
    }
    .hero-shell::after{
      content:"";
      position:absolute;inset:auto -8% -20% auto;
      width:380px;height:380px;border-radius:50%;
      background:radial-gradient(circle, rgba(255,138,0,.22), transparent 62%);
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      padding:34px;
    }
    .hero-content{
      padding:24px 6px 8px 0;
      color:#f7f9fc;
    }
    .hero-content h1{max-width:12ch}
    .hero-lead{
      font-size:1.06rem;
      color:rgba(237,242,247,.85);
      max-width:62ch;
      margin-top:18px;
    }
    .hero-badges{
      display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 18px;
    }
    .pill{
      display:inline-flex;align-items:center;gap:8px;
      padding:9px 13px;border-radius:999px;
      background:rgba(255,255,255,.08);
      color:#f5f7fb;
      border:1px solid rgba(255,255,255,.1);
      font-size:.88rem;
    }
    .pill i{color:#ffd4c5}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
    .btnx{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      min-height:48px;padding:0 22px;border-radius:999px;
      font-weight:800;letter-spacing:.01em;
      border:1px solid transparent;
      cursor:pointer;
      transition:transform var(--speed),box-shadow var(--speed),background var(--speed),border-color var(--speed),color var(--speed);
    }
    .btnx:hover{transform:translateY(-2px)}
    .btn-primaryx{
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff;box-shadow:var(--shadow-2);
    }
    .btn-primaryx:hover{box-shadow:0 18px 36px rgba(255,90,47,.28);color:#fff}
    .btn-outlinex{
      background:rgba(255,255,255,.08);
      color:#fff;border-color:rgba(255,255,255,.14)
    }
    .btn-outlinex:hover{background:rgba(255,255,255,.14);color:#fff}
    .hero-card{
      background:rgba(255,255,255,.95);
      border:1px solid rgba(255,255,255,.18);
      border-radius:28px;
      box-shadow:0 24px 46px rgba(9,14,25,.22);
      overflow:hidden;
      height:100%;
    }
    .hero-card-head{
      padding:18px 18px 0;
      display:flex;justify-content:space-between;gap:10px;align-items:center;
    }
    .mini-tag{
      display:inline-flex;align-items:center;gap:8px;
      font-size:.83rem;font-weight:800;
      color:#9c3d20;
      background:#ffe8dc;
      padding:7px 12px;border-radius:999px;
    }
    .hero-card-body{padding:16px 18px 18px}
    .hero-cover{
      border-radius:20px;
      overflow:hidden;
      position:relative;
      margin-bottom:16px;
      background:#0d131d;
    }
    .hero-cover img{
      width:100%;height:248px;object-fit:cover;
      opacity:.92;
    }
    .hero-cover .cover-overlay{
      position:absolute;inset:auto 14px 14px 14px;
      background:rgba(13,19,29,.76);
      color:#fff;border:1px solid rgba(255,255,255,.12);
      border-radius:18px;padding:14px 15px;
      backdrop-filter:blur(10px);
    }
    .cover-overlay strong{display:block;font-size:1.02rem;margin-bottom:4px}
    .cover-overlay span{font-size:.86rem;color:rgba(240,245,250,.82)}
    .summary-list{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
      margin:14px 0 12px;
    }
    .summary-item{
      background:#fff7f3;
      border:1px solid #ffd9ca;
      border-radius:16px;
      padding:12px 12px 11px;
    }
    .summary-item strong{display:block;font-size:.92rem;margin-bottom:4px}
    .summary-item span{font-size:.84rem;color:var(--muted);line-height:1.5}
    .cta-strip{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding-top:12px;border-top:1px dashed #f0d5c6;
      margin-top:10px;
    }
    .cta-strip .price{
      font-size:1.35rem;font-weight:900;color:var(--primary);
    }
    .cta-strip .price small{font-size:.82rem;color:var(--muted);font-weight:600}
    .trust-bar{
      margin-top:-22px;
      position:relative;z-index:2;
    }
    .trust-panel{
      background:rgba(255,255,255,.94);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      border-radius:24px;
      padding:18px 20px;
    }
    .trust-items{
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
    }
    .trust-item{
      display:flex;align-items:flex-start;gap:12px;
      padding:8px 4px;
    }
    .trust-item i{
      width:38px;height:38px;border-radius:12px;
      display:grid;place-items:center;
      background:var(--soft);color:var(--primary);
      flex:0 0 auto;
    }
    .trust-item strong{display:block;font-size:.98rem;margin-bottom:2px}
    .trust-item span{display:block;color:var(--muted);font-size:.86rem;line-height:1.55}
    .section-head{
      display:flex;align-items:end;justify-content:space-between;gap:18px;
      margin-bottom:28px;
    }
    .section-head .lead{
      max-width:68ch;color:var(--muted);font-size:1rem
    }
    .cardx{
      background:var(--bg-2);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:0 12px 28px rgba(17,23,34,.06);
      overflow:hidden;
      transition:transform var(--speed),box-shadow var(--speed),border-color var(--speed);
    }
    .cardx:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
      border-color:#ffd6c9;
    }
    .cardx .card-pad{padding:22px}
    .section-dark .cardx{
      background:rgba(255,255,255,.04);
      color:#eef2f7;
      border-color:rgba(255,255,255,.08);
      box-shadow:none;
    }
    .section-dark .cardx p,.section-dark .muted{color:rgba(232,237,244,.76)}
    .section-dark .cardx .soft{color:#fff}
    .badge-row{
      display:flex;flex-wrap:wrap;gap:8px;margin-top:10px
    }
    .tag{
      display:inline-flex;align-items:center;gap:6px;
      padding:7px 11px;border-radius:999px;
      background:#f7fafc;border:1px solid var(--line);
      color:#44505f;font-size:.82rem;font-weight:700;
    }
    .tag.warn{
      background:#fff1e8;border-color:#ffd3c0;color:#ab411e;
    }
    .tag.hot{
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff;border-color:transparent;
    }
    .grid-gap{gap:var(--gap)}
    .table-wrap{
      background:var(--bg-2);
      border:1px solid var(--line);
      border-radius:26px;
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .table-head{
      display:flex;justify-content:space-between;align-items:center;gap:16px;
      padding:20px 22px;border-bottom:1px solid var(--line);
      background:linear-gradient(180deg,#fff, #fff7f3);
    }
    .table-head .note{color:var(--muted);font-size:.92rem}
    .compare-table{
      width:100%;
      border-collapse:collapse;
      font-size:.95rem;
    }
    .compare-table th,
    .compare-table td{
      padding:16px 14px;
      border-bottom:1px solid #edf0f4;
      text-align:left;
      vertical-align:top;
    }
    .compare-table th{
      background:#fffaf7;
      color:#425062;
      font-size:.88rem;
      letter-spacing:.02em;
    }
    .compare-table tr:last-child td{border-bottom:none}
    .compare-table td:first-child{
      width:18%;
      font-weight:800;
      color:#243042;
      background:#fffefc;
    }
    .mark-yes{
      color:#0f8f53;font-weight:800
    }
    .mark-no{
      color:#d45b47;font-weight:800
    }
    .price-badge{
      display:inline-flex;align-items:center;gap:7px;
      padding:8px 12px;border-radius:999px;
      background:linear-gradient(135deg,#fff3ea,#ffe0cf);
      color:#a23e1e;
      font-weight:900;
      margin-bottom:8px;
    }
    .levels{
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
    }
    .level-card{
      position:relative;
      padding:0;
      overflow:hidden;
    }
    .level-cover{
      height:170px;
      overflow:hidden;
      position:relative;
    }
    .level-cover img{
      width:100%;height:100%;object-fit:cover;
      filter:saturate(1.02) contrast(1.02);
      transform:scale(1.02);
    }
    .level-cover::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(8,12,20,.08),rgba(8,12,20,.64));
    }
    .level-badge{
      position:absolute;left:16px;top:16px;z-index:1;
      background:rgba(255,255,255,.94);
      color:#213042;
      border-radius:999px;padding:7px 12px;font-weight:800;font-size:.82rem;
    }
    .level-body{padding:20px}
    .level-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
    .level-title strong{font-size:1.15rem}
    .level-price{
      color:var(--primary);
      font-size:1.32rem;font-weight:900;
    }
    .level-price small{font-size:.8rem;color:var(--muted);font-weight:600}
    .list-check{
      list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px
    }
    .list-check li{
      display:flex;gap:10px;align-items:flex-start;
      color:#354154;
    }
    .list-check li i{color:var(--primary);margin-top:4px}
    .preview-grid{
      display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch;
    }
    .prose-card{
      padding:26px;
      background:linear-gradient(180deg,#ffffff,#fffaf6);
      border:1px solid var(--line);
      border-radius:28px;
      box-shadow:var(--shadow);
    }
    .prose-card p{
      color:#354154;font-size:1rem;
      margin-bottom:1.05rem;
    }
    .prose-card .highlight{
      color:var(--primary);
      font-weight:800;
    }
    .preview-panel{
      display:grid;grid-template-rows:auto auto;gap:18px;
    }
    .preview-hero{
      padding:18px;
      border-radius:28px;
      background:linear-gradient(135deg,#fff7f3,#ffffff);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .preview-hero img{
      width:100%;height:232px;object-fit:cover;border-radius:20px;
      margin-bottom:14px;
    }
    .preview-meta{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px
    }
    .metric{
      padding:14px 14px 13px;
      border-radius:18px;
      background:#fff;
      border:1px solid #f1d6ca;
    }
    .metric strong{
      display:block;font-size:1.08rem;color:#1e2b3d;margin-bottom:4px
    }
    .metric span{font-size:.84rem;color:var(--muted)}
    .info-stack{
      display:grid;gap:12px;
    }
    .info-row{
      display:flex;align-items:flex-start;gap:14px;
      padding:16px 18px;background:#fff;border-radius:18px;border:1px solid var(--line);
    }
    .info-row i{
      width:40px;height:40px;border-radius:14px;
      display:grid;place-items:center;
      background:var(--soft);color:var(--primary);
      flex:0 0 auto;
    }
    .info-row strong{display:block;margin-bottom:4px}
    .info-row span{display:block;font-size:.88rem;color:var(--muted);line-height:1.6}
    .brand-intro{
      border-radius:30px;
      padding:30px;
      background:
        linear-gradient(135deg, rgba(255,90,47,.08), rgba(255,138,0,.04)),
        #fff;
      border:1px solid #ffe0d2;
      box-shadow:var(--shadow);
    }
    .brand-intro p{
      color:#334052;
      margin-bottom:1rem;
    }
    .brand-intro p:last-child{margin-bottom:0}
    .faq-list{
      display:grid;gap:14px;
    }
    .faq-item{
      background:#fff;
      border:1px solid var(--line);
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 10px 24px rgba(17,23,34,.05);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      font-weight:800;
      color:#273141;
      display:flex;align-items:center;justify-content:space-between;gap:16px;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary i{color:var(--primary);transition:transform var(--speed)}
    .faq-item[open] summary{border-bottom:1px solid #f1e5df;background:#fffaf8}
    .faq-item[open] summary i{transform:rotate(180deg)}
    .faq-body{padding:16px 20px 20px;color:#44505f}
    .cta-zone{
      background:
        linear-gradient(135deg, rgba(17,23,34,.88), rgba(31,42,59,.88)),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
      color:#fff;
      border-radius:34px;
      overflow:hidden;
      box-shadow:0 28px 60px rgba(11,17,27,.2);
      border:1px solid rgba(255,255,255,.08);
    }
    .cta-zone .grid-x{align-items:stretch}
    .cta-copy{
      padding:32px 32px 32px 34px;
    }
    .cta-copy h2{margin-bottom:12px}
    .cta-copy p{color:rgba(235,240,247,.82)}
    .cta-points{
      display:grid;gap:12px;margin-top:20px
    }
    .cta-point{
      display:flex;gap:10px;align-items:flex-start;
      padding:12px 14px;border-radius:16px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.09);
    }
    .cta-point i{color:#ffd4c5;margin-top:4px}
    .cta-form-wrap{
      background:rgba(255,255,255,.95);
      color:var(--text);
      padding:26px;
      border-left:1px solid rgba(255,255,255,.09);
    }
    .form-shell{
      background:#fff;
      border-radius:24px;
      padding:24px;
      border:1px solid #f1d7ca;
      box-shadow:0 12px 28px rgba(17,23,34,.08);
    }
    .form-shell h3{margin-bottom:8px}
    .form-shell .sub{color:var(--muted);margin-bottom:18px;font-size:.92rem}
    .field{
      margin-bottom:14px;
    }
    .field label{
      display:block;margin-bottom:8px;font-size:.88rem;font-weight:700;color:#334052
    }
    .field input,.field textarea{
      width:100%;
      border:1px solid #dfe5ee;
      border-radius:16px;
      background:#fbfcfe;
      padding:13px 14px;
      outline:none;
      transition:border-color var(--speed),box-shadow var(--speed),background var(--speed);
    }
    .field input:focus,.field textarea:focus{
      border-color:rgba(255,90,47,.55);
      box-shadow:0 0 0 4px rgba(255,90,47,.12);
      background:#fff;
    }
    .form-note{
      font-size:.84rem;color:var(--muted);line-height:1.6;margin-top:10px
    }
    .submit-row{
      display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px
    }
    .small-link{
      color:var(--primary);font-weight:700;
    }
    .footer{
      padding:28px 0 34px;
      background:#0f1520;
      color:#d7dde6;
      border-top:1px solid rgba(255,255,255,.06);
    }
    .footer-inner{
      display:flex;flex-direction:column;gap:18px;
    }
    .footer-top{
      display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
      padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08);
    }
    .footer .brand-text strong{color:#fff}
    .footer .brand-text span{color:rgba(220,227,236,.72)}
    .footer-copy{
      max-width:66ch;
      color:rgba(220,227,236,.78);
      font-size:.94rem;
    }
    .footer-meta{
      display:flex;flex-direction:column;gap:8px;
      font-size:.9rem;color:rgba(220,227,236,.82);
    }
    .footer-links a{color:#ffd0bf}
    .footer-links a:hover{color:#fff}
    .section-note{
      color:var(--muted);
      font-size:.92rem;
      margin-top:10px;
    }
    .soft-divider{
      height:1px;background:linear-gradient(90deg, transparent, rgba(255,90,47,.18), transparent);
      margin:20px 0;
    }
    .mini-columns{
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px
    }
    .mini-box{
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      padding:16px;
      box-shadow:0 8px 20px rgba(17,23,34,.04);
    }
    .mini-box strong{display:block;margin-bottom:6px}
    .mini-box span{display:block;color:var(--muted);font-size:.88rem;line-height:1.55}
    .timeline{
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
    }
    .step{
      background:linear-gradient(180deg,#fff,#fff8f4);
      border:1px solid #ffe0d4;
      border-radius:20px;
      padding:18px;
      position:relative;
    }
    .step .num{
      width:34px;height:34px;border-radius:50%;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff;font-weight:900;margin-bottom:12px;
    }
    .step strong{display:block;margin-bottom:6px}
    .step span{display:block;color:var(--muted);font-size:.88rem;line-height:1.6}
    .cover-card{
      background:#fff;
      border-radius:24px;
      border:1px solid var(--line);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .cover-card img{width:100%;height:200px;object-fit:cover}
    .cover-card .inner{padding:18px}
    .cover-card .inner strong{display:block;margin-bottom:8px}
    .cover-card .inner p{font-size:.9rem;color:var(--muted);margin:0}
    .grid-articles{
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
    }
    .article-card{
      padding:18px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:20px;
      box-shadow:0 10px 22px rgba(17,23,34,.05);
    }
    .article-card .date{
      display:inline-flex;
      padding:6px 10px;border-radius:999px;
      background:#fff3ea;color:#b04c22;
      font-size:.8rem;font-weight:800;
      margin-bottom:12px;
    }
    .article-card h3{margin-bottom:8px}
    .article-card p{color:var(--muted);font-size:.92rem;margin-bottom:14px}
    .article-card a{
      color:var(--primary);font-weight:800;
    }
    .article-card a:hover{color:var(--primary-2)}
    .muted{color:var(--muted)}
    .focus-line{height:1px;background:linear-gradient(90deg, rgba(255,90,47,.0), rgba(255,90,47,.35), rgba(255,90,47,.0));margin:16px 0 0}
    .section-title{
      display:flex;flex-direction:column;gap:10px;
    }
    .section-title p{margin:0}
    .inline-list{
      display:grid;gap:12px;margin:16px 0 0;padding:0;list-style:none
    }
    .inline-list li{
      display:flex;gap:10px;align-items:flex-start;color:#344050
    }
    .inline-list i{color:var(--primary);margin-top:4px}
    .assist-panel{
      background:linear-gradient(180deg,#fff 0%, #fffaf7 100%);
      border:1px solid #f3d7cb;
      border-radius:22px;
      padding:20px;
      box-shadow:0 14px 26px rgba(17,23,34,.05);
    }
    .assist-panel h3{margin-bottom:8px}
    .assist-panel p{color:var(--muted);font-size:.93rem}
    .money{
      color:var(--primary);font-weight:900
    }
    .mini-note{
      font-size:.84rem;color:var(--muted)
    }
    .download-chip{
      display:inline-flex;align-items:center;gap:8px;
      background:#fff0e8;border:1px solid #ffd6c7;color:#ab421d;
      padding:8px 12px;border-radius:999px;font-weight:800;font-size:.84rem;
    }
    .gold{
      color:#9c6111
    }
    .section-dark .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08)}
    .section-dark .btn-outlinex{background:rgba(255,255,255,.08)}
    .section-dark .btn-outlinex:hover{background:rgba(255,255,255,.14)}
    .section-dark .soft-divider{background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent)}
    .notice-bar{
      display:flex;flex-wrap:wrap;gap:10px;align-items:center;
      margin-top:16px;color:rgba(241,246,251,.84)
    }
    .notice-bar .notice{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 12px;border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.08);
      font-size:.84rem;
    }
    .notice-bar .notice i{color:#ffd4c5}
    .mobile-only{display:none}
    @media (max-width: 1100px){
      .trust-items,.levels,.timeline,.grid-articles,.mini-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
      .preview-grid{grid-template-columns:1fr}
      .cta-copy,.cta-form-wrap{padding:24px}
    }
    @media (max-width: 900px){
      .nav-links{
        position:absolute;
        top:84px;right:18px;left:18px;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding:14px;
        background:rgba(255,255,255,.98);
        border:1px solid var(--line);
        border-radius:22px;
        box-shadow:var(--shadow);
        display:none;
      }
      .nav-wrap.open .nav-links{display:flex}
      .nav-links a{justify-content:flex-start;padding:14px 16px}
      .menu-toggle{display:inline-grid;place-items:center}
      .hero-inner{padding:22px}
      .hero-content h1{max-width:none}
      .summary-list{grid-template-columns:1fr}
      .cta-zone .grid-x{display:block}
      .cta-form-wrap{border-left:none;border-top:1px solid rgba(255,255,255,.09)}
    }
    @media (max-width: 767px){
      .section{padding:56px 0}
      .section-head{flex-direction:column;align-items:flex-start}
      .trust-items,.levels,.timeline,.grid-articles,.mini-columns,.preview-meta{grid-template-columns:1fr}
      .hero-shell{border-radius:24px}
      .hero-card{margin-top:20px}
      .hero-cover img{height:220px}
      .hero-content{padding-right:0}
      .btnx{width:100%}
      .hero-actions{display:grid;grid-template-columns:1fr}
      .table-head{flex-direction:column;align-items:flex-start}
      .compare-table{display:block;overflow-x:auto;white-space:nowrap}
      .compare-table th,.compare-table td{white-space:normal}
      .compare-table td:first-child{width:auto}
      .mobile-only{display:block}
      .footer-top{flex-direction:column}
      .footer-meta{font-size:.86rem}
    }
    @media (max-width: 520px){
      .header-inner{min-height:74px}
      .brand-mark{width:40px;height:40px;border-radius:13px}
      .brand-text strong{font-size:1rem}
      .brand-text span{font-size:.78rem}
      .hero-inner{padding:16px}
      .hero-content{padding-top:8px}
      h1{font-size:2rem}
      .cardx .card-pad,.prose-card,.assist-panel,.form-shell{padding:18px}
      .cta-copy,.cta-form-wrap{padding:18px}
      .table-head,.compare-table th,.compare-table td{padding:14px 12px}
      .faq-item summary{padding:16px}
      .faq-body{padding:0 16px 16px}
    }