/* roulang page: index */
:root{
      --bg:#120807;
      --bg-2:#1A0B08;
      --panel:#24100B;
      --panel-2:#30140D;
      --text:#FFF7ED;
      --muted:#D6A98A;
      --weak:#9A7B6A;
      --red:#F43F2F;
      --orange:#FF8A1F;
      --gold:#FFB020;
      --green:#22C55E;
      --line:rgba(255,138,31,.24);
      --line-red:rgba(244,63,47,.34);
      --shadow:0 22px 70px rgba(244,63,47,.16);
      --radius:24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      line-height:1.75;
      background:
        radial-gradient(circle at 50% 0%, rgba(244,63,47,.30), transparent 34rem),
        radial-gradient(circle at 12% 24%, rgba(255,138,31,.18), transparent 28rem),
        radial-gradient(circle at 88% 58%, rgba(244,63,47,.14), transparent 32rem),
        linear-gradient(180deg,#120807 0%,#1A0B08 52%,#0c0504 100%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;inset:0;pointer-events:none;z-index:-2;
      background-image:
        linear-gradient(rgba(255,138,31,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,138,31,.05) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.28));
    }
    body:after{
      content:"";
      position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.28;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 60%, rgba(255,176,32,.10) 0 1px, transparent 1px);
      background-size:18px 18px,26px 26px;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    img{max-width:100%;display:block}
    .site-container{max-width:1240px;margin-inline:auto;padding-inline:1rem}
    @media (min-width:640px){.site-container{padding-inline:1.5rem}}
    @media (min-width:1024px){.site-container{padding-inline:2rem}}
    .skip-link{position:absolute;left:-999px;top:12px;background:var(--orange);color:#160705;padding:.7rem 1rem;border-radius:999px;z-index:50}
    .skip-link:focus{left:12px}
    .nav-shell{
      position:sticky;top:0;z-index:40;
      background:rgba(18,8,7,.92);
      border-bottom:1px solid rgba(255,138,31,.22);
      box-shadow:0 10px 36px rgba(0,0,0,.28);
      backdrop-filter:blur(10px);
    }
    .brand-mark{
      display:inline-flex;align-items:center;gap:.75rem;font-weight:900;letter-spacing:-.03em;
      color:#fff7ed;white-space:nowrap;
    }
    .brand-bolt{
      width:38px;height:38px;border-radius:14px;
      background:linear-gradient(135deg,var(--red),var(--orange));
      display:grid;place-items:center;color:#220805;
      box-shadow:0 0 26px rgba(244,63,47,.42);
      transform:skewX(-8deg);
    }
    .seg-nav{
      display:flex;align-items:center;gap:.45rem;padding:.3rem;border:1px solid rgba(255,138,31,.22);
      background:rgba(48,20,13,.58);border-radius:999px;overflow-x:auto;scrollbar-width:none;
    }
    .seg-nav::-webkit-scrollbar{display:none}
    .seg-link{
      display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:.45rem .9rem;
      border-radius:999px;font-weight:800;font-size:.9rem;color:#f6c79e;white-space:nowrap;
      border:1px solid transparent;transition:.22s ease;
    }
    .seg-link:hover{background:rgba(255,138,31,.12);border-color:rgba(255,138,31,.28);color:#fff7ed}
    .seg-link.active{background:linear-gradient(135deg,var(--red),var(--orange));color:#210805;box-shadow:0 10px 28px rgba(244,63,47,.26)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;
      padding:.85rem 1.2rem;font-weight:900;line-height:1;border:1px solid transparent;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
      cursor:pointer;
    }
    .btn-primary{
      color:#210805;background:linear-gradient(135deg,var(--gold),var(--orange) 45%,var(--red));
      box-shadow:0 15px 38px rgba(244,63,47,.28);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 52px rgba(255,138,31,.34)}
    .btn-ghost{
      color:#fff1dd;background:rgba(48,20,13,.72);border-color:rgba(255,138,31,.28);
    }
    .btn-ghost:hover{transform:translateY(-2px);border-color:rgba(255,138,31,.56);background:rgba(255,138,31,.12)}
    .btn:focus-visible,.seg-link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
      outline:3px solid rgba(255,176,32,.45);outline-offset:3px;
    }
    .badge{
      display:inline-flex;align-items:center;gap:.42rem;border-radius:999px;padding:.42rem .75rem;
      border:1px solid rgba(255,138,31,.28);background:rgba(255,138,31,.10);
      color:#ffd9ad;font-size:.82rem;font-weight:800;white-space:nowrap;
    }
    .badge.hot{border-color:rgba(244,63,47,.45);background:rgba(244,63,47,.16);color:#fff0e6}
    .panel{
      background:linear-gradient(180deg,rgba(48,20,13,.88),rgba(28,11,8,.88));
      border:1px solid var(--line);border-radius:var(--radius);
      box-shadow:var(--shadow);position:relative;overflow:hidden;
    }
    .panel:before{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(135deg,rgba(255,176,32,.10),transparent 32%,rgba(244,63,47,.08));
      opacity:.9;
    }
    .panel > *{position:relative}
    .cut-card{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
    .section{padding:4.5rem 0}
    .section-tight{padding:3rem 0}
    .section-title{font-size:clamp(1.8rem,3.2vw,2.65rem);line-height:1.12;font-weight:900;letter-spacing:-.04em}
    .section-desc{color:var(--muted);font-size:1rem;max-width:760px}
    .hero-title{
      font-size:clamp(2.15rem,6.4vw,4.65rem);line-height:1.06;font-weight:950;letter-spacing:-.055em;
      text-shadow:0 8px 34px rgba(244,63,47,.24);
    }
    .grad-text{background:linear-gradient(135deg,#fff7ed 8%,#ffcf87 42%,#f43f2f 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero-stage{
      min-height:620px;border-radius:34px;overflow:hidden;position:relative;
      background:
        radial-gradient(circle at 50% 38%,rgba(244,63,47,.42),transparent 28rem),
        linear-gradient(145deg,rgba(36,16,11,.92),rgba(18,8,7,.96));
      border:1px solid rgba(255,138,31,.28);
      box-shadow:0 30px 90px rgba(0,0,0,.38),0 0 80px rgba(244,63,47,.13);
    }
    .hero-stage:after{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:repeating-linear-gradient(115deg,transparent 0 18px,rgba(255,138,31,.045) 18px 19px);
      opacity:.8;
    }
    .vertical-feed{
      width:min(420px,88vw);margin-inline:auto;border-radius:30px;
      background:linear-gradient(180deg,rgba(18,8,7,.96),rgba(48,20,13,.95));
      border:1px solid rgba(255,138,31,.34);box-shadow:0 0 0 8px rgba(244,63,47,.08),0 26px 70px rgba(0,0,0,.36);
      padding:1rem;position:relative;
    }
    .feed-item{
      display:flex;gap:.8rem;align-items:flex-start;padding:.9rem;border-radius:20px;
      background:rgba(255,138,31,.075);border:1px solid rgba(255,138,31,.18);margin-bottom:.75rem;
      transition:.22s ease;
    }
    .feed-item:hover{background:rgba(255,138,31,.12);border-color:rgba(255,138,31,.38);transform:translateY(-1px)}
    .cover-abstract{
      min-height:156px;border-radius:22px;
      background:
        radial-gradient(circle at 24% 22%,rgba(255,176,32,.74),transparent 18%),
        radial-gradient(circle at 78% 76%,rgba(244,63,47,.72),transparent 22%),
        linear-gradient(135deg,#35120b,#130606);
      position:relative;overflow:hidden;border:1px solid rgba(255,138,31,.2);
    }
    .cover-abstract:after{
      content:"";position:absolute;inset:0;
      background:
        linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
      background-size:16px 16px;mix-blend-mode:screen;opacity:.38;
    }
    .progress{height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
    .progress > span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red),var(--orange),var(--gold))}
    .coupon-card,.deal-card,.review-card,.news-card,.faq-card{
      border:1px solid rgba(255,138,31,.20);background:rgba(36,16,11,.76);border-radius:24px;
      transition:.22s ease;box-shadow:0 14px 42px rgba(0,0,0,.16);
    }
    .coupon-card:hover,.deal-card:hover,.review-card:hover,.news-card:hover{
      transform:translateY(-4px);border-color:rgba(255,138,31,.55);box-shadow:0 22px 60px rgba(244,63,47,.18);
    }
    .price-chip{
      display:inline-flex;align-items:baseline;gap:.18rem;color:#200805;background:linear-gradient(135deg,var(--gold),var(--orange));
      border-radius:14px;padding:.42rem .62rem;font-weight:950;box-shadow:0 10px 25px rgba(255,138,31,.22);
    }
    .rule-row{
      display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1rem;border-radius:20px;
      background:rgba(255,138,31,.07);border:1px solid rgba(255,138,31,.16);
    }
    .rule-num{
      width:2.35rem;height:2.35rem;border-radius:14px;display:grid;place-items:center;
      background:linear-gradient(135deg,var(--red),var(--orange));color:#210805;font-weight:950;
    }
    .table-wrap{overflow-x:auto}
    .compare-table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
    .compare-table th,.compare-table td{padding:1rem;border-bottom:1px solid rgba(255,138,31,.16);text-align:left}
    .compare-table th{color:#ffe2bd;background:rgba(244,63,47,.14);font-weight:900}
    .compare-table td{color:#f4c9a8}
    .compare-table tr:hover td{background:rgba(255,138,31,.06)}
    .marquee{display:flex;gap:1rem;overflow:hidden}
    .marquee-track{display:flex;gap:1rem;min-width:max-content;animation:scroll-x 32s linear infinite}
    @keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    @media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;min-width:0}}
    details summary{list-style:none;cursor:pointer}
    details summary::-webkit-details-marker{display:none}
    details[open]{border-color:rgba(255,138,31,.55);background:rgba(255,138,31,.08)}
    .form-field{
      width:100%;border-radius:18px;border:1px solid rgba(255,138,31,.25);background:rgba(18,8,7,.72);
      color:#fff7ed;padding:.9rem 1rem;transition:.2s ease;
    }
    .form-field::placeholder{color:#9a7b6a}
    .form-field:focus{border-color:rgba(255,138,31,.66);box-shadow:0 0 0 4px rgba(255,138,31,.13);outline:none}
    .footer{
      background:#090403;border-top:1px solid rgba(255,138,31,.26);
      position:relative;overflow:hidden;
    }
    .footer:before{
      content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,138,31,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,138,31,.04) 1px,transparent 1px);
      background-size:34px 34px;opacity:.8;
    }
    .mobile-sticky{
      position:fixed;left:12px;right:12px;bottom:12px;z-index:35;display:none;
      border-radius:999px;background:rgba(18,8,7,.96);border:1px solid rgba(255,138,31,.34);
      box-shadow:0 18px 55px rgba(0,0,0,.42);padding:.45rem;
    }
    @media (max-width:767px){
      .section{padding:3.2rem 0}
      .hero-stage{min-height:auto;border-radius:26px}
      .mobile-sticky{display:flex}
      body{padding-bottom:78px}
      .seg-nav{width:100%}
      .marquee{overflow-x:auto}.marquee-track{animation:none}
    }

/* roulang page: category2 */
:root{
      --bg:#120807;
      --bg-2:#1a0b08;
      --panel:#21100b;
      --panel-2:#2a130d;
      --red:#f43f2f;
      --orange:#ff8a1f;
      --gold:#ffb020;
      --green:#22c55e;
      --text:#fff7ed;
      --muted:#d6a98a;
      --weak:#9a7b6a;
      --border:rgba(255,138,31,.24);
      --border-red:rgba(244,63,47,.34);
      --shadow:0 22px 70px rgba(244,63,47,.14);
      --radius:24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      line-height:1.75;
      color:var(--text);
      background:
        radial-gradient(circle at 18% 4%, rgba(244,63,47,.28), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(255,138,31,.2), transparent 28%),
        linear-gradient(180deg, #120807 0%, #1a0b08 46%, #0d0605 100%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-2;
      background-image:
        linear-gradient(rgba(255,138,31,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,138,31,.05) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.18));
    }
    body:after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.32;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
      mix-blend-mode:screen;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    img,svg{max-width:100%}
    .site-container{width:min(100% - 2rem, 1240px);margin-inline:auto}
    .nav-shell{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(18,8,7,.92);
      border-bottom:1px solid rgba(255,138,31,.18);
      box-shadow:0 10px 40px rgba(0,0,0,.28);
      backdrop-filter:blur(10px);
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.75rem;
      color:var(--text);
      font-weight:900;
      letter-spacing:-.02em;
      transition:transform .22s ease, filter .22s ease;
    }
    .brand-mark:hover{transform:translateY(-1px);filter:drop-shadow(0 0 16px rgba(255,138,31,.35))}
    .brand-bolt{
      display:grid;
      place-items:center;
      width:42px;
      height:42px;
      border-radius:15px;
      color:#1b0806;
      background:linear-gradient(135deg,var(--gold),var(--red));
      box-shadow:0 12px 30px rgba(244,63,47,.32);
      border:1px solid rgba(255,255,255,.24);
    }
    .seg-nav{
      display:flex;
      align-items:center;
      gap:.45rem;
      overflow-x:auto;
      padding:.38rem;
      border:1px solid rgba(255,138,31,.18);
      border-radius:999px;
      background:rgba(44,18,12,.62);
      scrollbar-width:none;
    }
    .seg-nav::-webkit-scrollbar{display:none}
    .seg-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
      border-radius:999px;
      border:1px solid rgba(255,138,31,.18);
      padding:.62rem .95rem;
      color:rgba(255,247,237,.76);
      font-size:.9rem;
      font-weight:800;
      transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
    }
    .seg-link:hover{
      color:#fff;
      border-color:rgba(255,138,31,.48);
      background:rgba(255,138,31,.13);
      transform:translateY(-1px);
    }
    .seg-link.active{
      color:#210906;
      border-color:transparent;
      background:linear-gradient(135deg,var(--gold),var(--red));
      box-shadow:0 12px 30px rgba(244,63,47,.26);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      border-radius:999px;
      border:1px solid transparent;
      padding:.78rem 1.15rem;
      font-weight:900;
      line-height:1;
      transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, border-color .22s ease, background .22s ease;
    }
    .btn-primary{
      color:#260906;
      background:linear-gradient(135deg,var(--gold),var(--orange) 42%,var(--red));
      box-shadow:0 16px 34px rgba(244,63,47,.32);
    }
    .btn-primary:hover{transform:translateY(-2px);filter:saturate(1.12);box-shadow:0 22px 46px rgba(244,63,47,.42)}
    .btn-secondary{
      color:var(--text);
      background:rgba(255,138,31,.08);
      border-color:rgba(255,138,31,.3);
    }
    .btn-secondary:hover{transform:translateY(-2px);background:rgba(255,138,31,.15);border-color:rgba(255,176,32,.52)}
    .btn:focus-visible,.seg-link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(255,138,31,.22),0 0 0 1px rgba(255,176,32,.8);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid rgba(255,138,31,.2);
      border-radius:999px;
      padding:.45rem .72rem;
      color:rgba(255,247,237,.78);
      background:rgba(255,138,31,.07);
      font-weight:800;
      font-size:.82rem;
      white-space:nowrap;
    }
    .section{padding:78px 0}
    .section-tight{padding:54px 0}
    .panel{
      position:relative;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(42,19,13,.9), rgba(26,11,8,.92));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .panel:before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(135deg, rgba(255,176,32,.13), transparent 24%, transparent 70%, rgba(244,63,47,.12));
    }
    .slant{
      clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    }
    .hero-coupon{
      padding:110px 0 52px;
    }
    .coupon-wall{
      position:relative;
      display:grid;
      gap:1rem;
      grid-template-columns:1fr;
      align-items:stretch;
    }
    @media (min-width:1024px){
      .coupon-wall{grid-template-columns:1.05fr .95fr}
    }
    .main-coupon{
      min-height:420px;
      padding:2rem;
      border-radius:32px;
      border:1px solid rgba(255,176,32,.32);
      background:
        radial-gradient(circle at 80% 16%, rgba(255,176,32,.28), transparent 28%),
        linear-gradient(135deg, rgba(244,63,47,.18), rgba(255,138,31,.08) 45%, rgba(35,16,11,.95));
      box-shadow:0 28px 90px rgba(244,63,47,.2);
    }
    .coupon-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.38rem .65rem;
      color:#2a0b06;
      background:linear-gradient(135deg,var(--gold),var(--orange));
      font-weight:900;
      font-size:.78rem;
    }
    .price-mark{
      color:transparent;
      background:linear-gradient(135deg,#fff7ed 0%,var(--gold) 28%,var(--orange) 62%,var(--red) 100%);
      -webkit-background-clip:text;
      background-clip:text;
      text-shadow:0 16px 44px rgba(244,63,47,.18);
    }
    .mini-coupon{
      border:1px solid rgba(255,138,31,.22);
      border-radius:22px;
      background:rgba(33,16,11,.84);
      padding:1rem;
      transition:transform .22s ease,border-color .22s ease,background .22s ease;
    }
    .mini-coupon:hover{transform:translateY(-3px);border-color:rgba(255,176,32,.5);background:rgba(47,21,13,.9)}
    .quick-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.85rem;
    }
    @media (min-width:768px){.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media (min-width:1024px){.quick-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
    .quick-card{
      min-height:132px;
      padding:1rem;
      border-radius:22px;
      border:1px solid rgba(255,138,31,.2);
      background:linear-gradient(180deg,rgba(42,19,13,.72),rgba(18,8,7,.78));
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }
    .quick-card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,176,32,.52);
      box-shadow:0 18px 48px rgba(244,63,47,.16);
    }
    .masonry{
      columns:1;
      column-gap:1rem;
    }
    @media (min-width:768px){.masonry{columns:2}}
    .masonry-card{
      break-inside:avoid;
      margin-bottom:1rem;
      border:1px solid rgba(255,138,31,.23);
      border-radius:26px;
      background:linear-gradient(180deg,rgba(42,19,13,.88),rgba(18,8,7,.9));
      overflow:hidden;
      box-shadow:0 18px 55px rgba(0,0,0,.24);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }
    .masonry-card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,176,32,.56);
      box-shadow:0 24px 70px rgba(244,63,47,.17);
    }
    .abstract-cover{
      height:118px;
      background:
        radial-gradient(circle at 28% 20%, rgba(255,176,32,.45), transparent 25%),
        linear-gradient(135deg, rgba(244,63,47,.5), rgba(255,138,31,.12)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 8px, transparent 8px 16px);
      position:relative;
    }
    .abstract-cover:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to bottom, transparent, rgba(18,8,7,.55));
    }
    .meter{height:8px;border-radius:999px;background:rgba(255,138,31,.14);overflow:hidden}
    .meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--gold),var(--red))}
    .verify-strip{
      border:1px solid rgba(34,197,94,.22);
      border-radius:26px;
      background:linear-gradient(90deg,rgba(34,197,94,.1),rgba(255,138,31,.09),rgba(244,63,47,.09));
      box-shadow:0 18px 56px rgba(34,197,94,.06);
    }
    .check-item{
      display:flex;
      gap:.8rem;
      padding:.95rem;
      border:1px solid rgba(255,138,31,.16);
      border-radius:18px;
      background:rgba(255,138,31,.055);
    }
    .check-icon{
      flex:0 0 auto;
      display:grid;
      place-items:center;
      width:28px;
      height:28px;
      border-radius:999px;
      color:#07170c;
      background:linear-gradient(135deg,var(--green),var(--gold));
      font-weight:900;
    }
    .compare-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border:1px solid rgba(255,138,31,.18);
      border-radius:22px;
    }
    .compare-table th,.compare-table td{
      padding:1rem;
      text-align:left;
      border-bottom:1px solid rgba(255,138,31,.12);
      color:rgba(255,247,237,.78);
      vertical-align:top;
    }
    .compare-table th{
      color:#fff7ed;
      background:rgba(244,63,47,.16);
      font-weight:900;
    }
    .compare-table tr:last-child td{border-bottom:0}
    .compare-table .hot{background:rgba(255,138,31,.08);color:#fff}
    details.faq-item{
      border:1px solid rgba(255,138,31,.2);
      border-radius:20px;
      background:rgba(42,19,13,.58);
      overflow:hidden;
    }
    details.faq-item[open]{border-color:rgba(255,176,32,.48);box-shadow:0 16px 44px rgba(244,63,47,.1)}
    details.faq-item summary{
      cursor:pointer;
      list-style:none;
      padding:1.15rem 1.25rem;
      font-weight:900;
      color:#fff7ed;
      display:flex;
      justify-content:space-between;
      gap:1rem;
    }
    details.faq-item summary::-webkit-details-marker{display:none}
    details.faq-item summary:after{content:"+";color:var(--gold);font-size:1.25rem}
    details.faq-item[open] summary:after{content:"−"}
    details.faq-item p{padding:0 1.25rem 1.2rem;color:rgba(255,247,237,.68);margin:0}
    .form-control{
      width:100%;
      border-radius:16px;
      border:1px solid rgba(255,138,31,.22);
      background:rgba(18,8,7,.74);
      color:#fff7ed;
      padding:.9rem 1rem;
      outline:none;
      transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
    }
    .form-control:focus{
      border-color:rgba(255,176,32,.65);
      background:rgba(18,8,7,.92);
      box-shadow:0 0 0 4px rgba(255,138,31,.14);
    }
    .footer{
      position:relative;
      background:#0a0404;
      border-top:1px solid rgba(255,138,31,.22);
      overflow:hidden;
    }
    .footer:before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.32;
      background-image:
        linear-gradient(rgba(255,138,31,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,138,31,.06) 1px, transparent 1px);
      background-size:34px 34px;
    }
    .floating-cta{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:40;
      border-radius:22px;
      border:1px solid rgba(255,176,32,.38);
      background:linear-gradient(135deg,rgba(42,19,13,.96),rgba(18,8,7,.96));
      box-shadow:0 20px 64px rgba(244,63,47,.26);
      padding:.75rem;
    }
    @media (max-width:767px){
      .section{padding:54px 0}
      .section-tight{padding:40px 0}
      .hero-coupon{padding:80px 0 34px}
      .main-coupon{min-height:auto;padding:1.25rem;border-radius:26px}
      .seg-link{padding:.56rem .82rem;font-size:.84rem}
      .floating-cta{left:12px;right:12px;bottom:10px;border-radius:18px;padding:.55rem}
      body{padding-bottom:74px}
      .compare-wrap{overflow-x:auto}
      .compare-table{min-width:680px}
    }
    @media (prefers-reduced-motion:reduce){
      *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
    }

/* roulang page: category1 */
:root{
      --bg:#120807;
      --bg-2:#1A0B08;
      --panel:#23100B;
      --panel-2:#2b130d;
      --red:#F43F2F;
      --orange:#FF8A1F;
      --gold:#FFB020;
      --green:#22C55E;
      --text:#FFF7ED;
      --muted:#D6A98A;
      --weak:#9A7B6A;
      --line:rgba(255,138,31,.24);
      --line-red:rgba(244,63,47,.32);
      --shadow:0 22px 60px rgba(244,63,47,.14);
      --radius:24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 50% 0%, rgba(244,63,47,.22), transparent 34rem),
        radial-gradient(circle at 12% 18%, rgba(255,138,31,.16), transparent 28rem),
        linear-gradient(135deg, #120807 0%, #1A0B08 45%, #0b0504 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-2;
      background-image:
        linear-gradient(rgba(255,138,31,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,138,31,.05) 1px, transparent 1px),
        linear-gradient(135deg, rgba(244,63,47,.05) 0 12%, transparent 12% 100%);
      background-size:44px 44px,44px 44px,18px 18px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.35));
    }
    body:after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.18;
      background-image:radial-gradient(rgba(255,247,237,.22) .6px, transparent .8px);
      background-size:4px 4px;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .site-container{width:min(100% - 32px, 1220px);margin-inline:auto}
    .nav-shell{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(18,8,7,.92);
      border-bottom:1px solid rgba(255,138,31,.22);
      box-shadow:0 12px 40px rgba(0,0,0,.28);
      backdrop-filter:blur(10px);
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.75rem;
      color:var(--text);
      font-weight:900;
      letter-spacing:-.02em;
      transition:transform .2s ease, filter .2s ease;
    }
    .brand-mark:hover{transform:translateY(-1px);filter:drop-shadow(0 0 16px rgba(255,138,31,.35))}
    .brand-bolt{
      display:grid;
      place-items:center;
      width:42px;
      height:42px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--red),var(--orange));
      box-shadow:0 12px 30px rgba(244,63,47,.35);
      color:#fff7ed;
      border:1px solid rgba(255,255,255,.18);
    }
    .seg-nav{
      display:flex;
      align-items:center;
      gap:.45rem;
      overflow-x:auto;
      scrollbar-width:none;
      border:1px solid rgba(255,138,31,.22);
      border-radius:999px;
      padding:.35rem;
      background:rgba(35,16,11,.72);
      max-width:100%;
    }
    .seg-nav::-webkit-scrollbar{display:none}
    .seg-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
      min-height:38px;
      padding:.5rem .95rem;
      border-radius:999px;
      color:rgba(255,247,237,.74);
      font-size:.92rem;
      font-weight:800;
      border:1px solid transparent;
      transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
    }
    .seg-link:hover{
      color:#fff7ed;
      background:rgba(244,63,47,.16);
      border-color:rgba(255,138,31,.32);
      transform:translateY(-1px);
    }
    .seg-link.active{
      color:#fff;
      background:linear-gradient(135deg,var(--red),var(--orange));
      box-shadow:0 12px 28px rgba(244,63,47,.28);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      min-height:44px;
      border:1px solid rgba(255,138,31,.28);
      border-radius:999px;
      padding:.75rem 1.25rem;
      font-weight:900;
      line-height:1;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    }
    .btn-primary{
      color:#fff7ed;
      background:linear-gradient(135deg,var(--red),var(--orange));
      box-shadow:0 14px 36px rgba(244,63,47,.32);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(255,138,31,.38)}
    .btn-secondary{
      color:#fff7ed;
      background:rgba(255,138,31,.1);
      border-color:rgba(255,138,31,.36);
    }
    .btn-secondary:hover{transform:translateY(-2px);background:rgba(244,63,47,.18);border-color:rgba(255,138,31,.58)}
    .btn:focus-visible,.seg-link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
      outline:3px solid rgba(255,176,32,.42);
      outline-offset:3px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      width:max-content;
      border:1px solid rgba(255,138,31,.25);
      background:rgba(255,138,31,.08);
      color:rgba(255,247,237,.82);
      border-radius:999px;
      padding:.45rem .75rem;
      font-size:.78rem;
      font-weight:800;
    }
    .section{padding:72px 0}
    .section-tight{padding:46px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      border:1px solid rgba(244,63,47,.34);
      background:rgba(244,63,47,.12);
      color:#ffd7bd;
      border-radius:999px;
      padding:.42rem .75rem;
      font-size:.78rem;
      font-weight:900;
    }
    .panel{
      position:relative;
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(43,19,13,.94), rgba(25,10,7,.92));
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .panel:before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(135deg, rgba(255,138,31,.14), transparent 22%),
        radial-gradient(circle at 100% 0%, rgba(244,63,47,.14), transparent 32%);
    }
    .panel > *{position:relative}
    .cut-card{
      border:1px solid rgba(255,138,31,.22);
      background:rgba(35,16,11,.78);
      border-radius:22px;
      transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
      overflow:hidden;
    }
    .cut-card:hover{
      transform:translateY(-3px);
      border-color:rgba(255,138,31,.58);
      box-shadow:0 18px 48px rgba(244,63,47,.16);
      background:rgba(48,20,12,.88);
    }
    .hero-title{
      font-size:clamp(2.15rem, 5vw, 4.35rem);
      line-height:1.08;
      letter-spacing:-.055em;
      font-weight:950;
    }
    .grad-text{
      background:linear-gradient(135deg,#fff7ed 0%,#ffddad 28%,#ff8a1f 62%,#f43f2f 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-shadow:0 20px 70px rgba(244,63,47,.18);
    }
    .cover-sheet{
      min-height:455px;
      border-radius:30px;
      border:1px solid rgba(255,138,31,.35);
      background:
        radial-gradient(circle at 50% 16%, rgba(255,138,31,.42), transparent 26%),
        linear-gradient(160deg, rgba(244,63,47,.34), rgba(35,16,11,.95) 42%, rgba(12,5,4,.94));
      box-shadow:0 26px 80px rgba(244,63,47,.2);
      position:relative;
      overflow:hidden;
    }
    .cover-sheet:before{
      content:"";
      position:absolute;
      inset:18px;
      border:1px dashed rgba(255,176,32,.32);
      border-radius:24px;
      pointer-events:none;
    }
    .cover-sheet:after{
      content:"";
      position:absolute;
      inset:-20%;
      background:repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 2px, transparent 2px 18px);
      opacity:.22;
      transform:rotate(-6deg);
    }
    .energy-line{
      height:8px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--red),var(--orange),rgba(255,176,32,.2));
      box-shadow:0 0 24px rgba(255,138,31,.36);
    }
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
    }
    .filter-chip{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      padding:.62rem .9rem;
      border-radius:999px;
      border:1px solid rgba(255,138,31,.23);
      background:rgba(35,16,11,.82);
      color:rgba(255,247,237,.78);
      font-weight:800;
      font-size:.9rem;
      transition:all .2s ease;
    }
    .filter-chip:hover,.filter-chip.is-on{
      color:#fff;
      border-color:rgba(255,138,31,.65);
      background:linear-gradient(135deg,rgba(244,63,47,.9),rgba(255,138,31,.78));
      box-shadow:0 12px 28px rgba(244,63,47,.22);
      transform:translateY(-1px);
    }
    .promo-card{
      display:grid;
      grid-template-columns:116px 1fr auto;
      gap:1rem;
      align-items:stretch;
      padding:1rem;
    }
    .abstract-thumb{
      min-height:126px;
      border-radius:18px;
      border:1px solid rgba(255,138,31,.25);
      background:
        radial-gradient(circle at 35% 25%, rgba(255,176,32,.55), transparent 24%),
        linear-gradient(135deg, rgba(244,63,47,.6), rgba(35,16,11,.82)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 4px, transparent 4px 12px);
      position:relative;
      overflow:hidden;
    }
    .abstract-thumb span{
      position:absolute;
      left:.7rem;
      bottom:.55rem;
      font-size:2rem;
      font-weight:950;
      color:rgba(255,247,237,.88);
      line-height:1;
    }
    .price-box{
      min-width:150px;
      border-radius:18px;
      border:1px solid rgba(255,176,32,.35);
      background:rgba(255,138,31,.1);
      padding:1rem;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:flex-start;
      gap:.75rem;
    }
    .price-hot{
      color:#ffbd58;
      font-size:1.55rem;
      line-height:1;
      font-weight:950;
      letter-spacing:-.04em;
    }
    .check-list li{
      display:flex;
      gap:.65rem;
      align-items:flex-start;
      padding:.6rem 0;
      color:rgba(255,247,237,.76);
      border-bottom:1px solid rgba(255,138,31,.1);
    }
    .check-list li:last-child{border-bottom:0}
    .check-dot{
      flex:0 0 auto;
      width:22px;
      height:22px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:rgba(34,197,94,.16);
      color:#5df08b;
      font-weight:950;
      margin-top:.1rem;
    }
    .table-card{
      overflow:hidden;
      border-radius:22px;
      border:1px solid rgba(255,138,31,.24);
    }
    .compare-row{
      display:grid;
      grid-template-columns:1.1fr 1fr 1fr;
      border-bottom:1px solid rgba(255,138,31,.13);
    }
    .compare-row:last-child{border-bottom:0}
    .compare-row > div{
      padding:1rem;
      color:rgba(255,247,237,.76);
      border-right:1px solid rgba(255,138,31,.13);
    }
    .compare-row > div:last-child{border-right:0}
    .compare-head > div{
      background:rgba(244,63,47,.18);
      color:#fff7ed;
      font-weight:900;
    }
    .review-strip{
      display:flex;
      gap:1rem;
      overflow-x:auto;
      padding-bottom:.35rem;
      scroll-snap-type:x mandatory;
    }
    .review-strip::-webkit-scrollbar{height:8px}
    .review-strip::-webkit-scrollbar-thumb{background:rgba(255,138,31,.38);border-radius:999px}
    .review-card{
      min-width:280px;
      scroll-snap-align:start;
      border:1px solid rgba(255,138,31,.22);
      background:rgba(35,16,11,.78);
      border-radius:22px;
      padding:1rem;
    }
    details.faq-item{
      border:1px solid rgba(255,138,31,.22);
      background:rgba(35,16,11,.72);
      border-radius:20px;
      overflow:hidden;
      transition:border-color .2s ease, background .2s ease;
    }
    details.faq-item[open]{
      border-color:rgba(255,138,31,.55);
      background:rgba(48,20,12,.82);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:1.1rem 1.25rem;
      font-weight:900;
      color:#fff7ed;
      display:flex;
      justify-content:space-between;
      gap:1rem;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{
      content:"+";
      color:#ffb020;
      font-size:1.35rem;
      line-height:1;
    }
    .faq-item[open] summary:after{content:"−"}
    .faq-item p{padding:0 1.25rem 1.15rem;color:rgba(255,247,237,.68);font-size:.95rem}
    .form-control{
      width:100%;
      min-height:48px;
      border-radius:16px;
      border:1px solid rgba(255,138,31,.22);
      background:rgba(12,5,4,.72);
      color:#fff7ed;
      padding:.85rem 1rem;
      transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .form-control::placeholder{color:rgba(214,169,138,.52)}
    .form-control:focus{
      border-color:rgba(255,138,31,.75);
      box-shadow:0 0 0 4px rgba(255,138,31,.12);
      background:rgba(18,8,7,.92);
      outline:none;
    }
    .footer{
      position:relative;
      border-top:1px solid rgba(255,138,31,.25);
      background:
        linear-gradient(180deg, rgba(18,8,7,.92), rgba(8,3,3,.98)),
        radial-gradient(circle at 80% 0%, rgba(244,63,47,.12), transparent 26rem);
      overflow:hidden;
    }
    .footer:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:linear-gradient(rgba(255,138,31,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,138,31,.04) 1px, transparent 1px);
      background-size:38px 38px;
      pointer-events:none;
    }
    .floating-cta{
      position:fixed;
      left:12px;
      right:12px;
      bottom:12px;
      z-index:40;
      display:none;
      border:1px solid rgba(255,138,31,.35);
      background:rgba(18,8,7,.96);
      border-radius:999px;
      padding:.45rem;
      box-shadow:0 20px 60px rgba(0,0,0,.38);
    }
    @media (max-width:1024px){
      .promo-card{grid-template-columns:96px 1fr}
      .promo-card .price-box{grid-column:1 / -1;min-width:0;flex-direction:row;align-items:center;justify-content:space-between}
      .section{padding:56px 0}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 24px, 1220px)}
      .seg-nav{border-radius:22px;justify-content:flex-start}
      .hero-title{letter-spacing:-.04em}
      .cover-sheet{min-height:360px}
      .compare-row{grid-template-columns:1fr}
      .compare-row > div{border-right:0;border-bottom:1px solid rgba(255,138,31,.12)}
      .compare-row > div:last-child{border-bottom:0}
      .floating-cta{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
      main{padding-bottom:72px}
    }
    @media (max-width:520px){
      .promo-card{grid-template-columns:1fr}
      .abstract-thumb{min-height:150px}
      .btn{width:100%}
      .chip-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem}
      .filter-chip{white-space:nowrap}
    }