/* roulang page: index */
:root{
      --bg:#0b0908;
      --bg-2:#12100e;
      --panel:#181411;
      --panel-2:#201a16;
      --line:rgba(220, 188, 116, .22);
      --line-strong:rgba(220, 188, 116, .4);
      --text:#f5efe3;
      --muted:#b9aa92;
      --subtle:#8f816e;
      --gold:#d7ad5c;
      --gold-2:#f1d08a;
      --bronze:#a57b40;
      --amber:#8f5f1e;
      --emerald:#2c5b5;
      --wine:#57252a;
      --danger:#a44c45;
      --shadow:0 18px 40px rgba(0,0,0,.28);
      --radius:8px;
      --pixel:0 0 0 1px rgba(241,208,138,.12), inset 0 0 0 1px rgba(0,0,0,.36);
      --max:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-width:320px;
      color:var(--text);
      background:
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
        var(--bg);
      background-size:22px 22px;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      font-size:16px;
      line-height:1.65;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:20;
      opacity:.15;
      background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.02) 4px);
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    img{display:block;max-width:100%}
    .site-shell{overflow:hidden}
    .grid-container{max-width:var(--max);padding-left:22px;padding-right:22px}
    .skip-link{position:absolute;left:-999px;top:0;background:var(--gold-2);color:#1b1308;padding:10px 14px;z-index:100}
    .skip-link:focus{left:12px}
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      border-bottom:1px solid var(--line);
      background:rgba(11,9,8,.94);
      backdrop-filter:blur(12px);
    }
    .topbar{
      min-height:76px;
      display:grid;
      grid-template-columns:auto minmax(290px,1fr) auto;
      gap:22px;
      align-items:center;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      min-width:190px;
      font-size:16px;
      font-weight:800;
      line-height:1.25;
      color:var(--gold-2);
    }
    .brand-mark{
      width:28px;
      height:28px;
      display:grid;
      place-items:center;
      flex:0 0 28px;
      color:#171007;
      background:var(--gold);
      border:2px solid #f6d88d;
      box-shadow:3px 3px 0 #5a3d1c;
    }
    .search-wrap{position:relative;min-width:0}
    .search-wrap i{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      color:var(--gold);
      pointer-events:none;
    }
    .site-search{
      width:100%;
      height:46px;
      padding:0 44px 0 44px;
      border:1px solid var(--line-strong);
      border-radius:6px;
      outline:none;
      color:var(--text);
      background:#15110e;
      box-shadow:var(--pixel);
      transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .site-search::placeholder{color:var(--subtle)}
    .site-search:focus{
      border-color:var(--gold);
      background:#1a1510;
      box-shadow:0 0 0 3px rgba(215,173,92,.13),var(--pixel);
    }
    .clear-search{
      position:absolute;
      right:8px;
      top:50%;
      width:30px;
      height:30px;
      border:0;
      border-radius:4px;
      transform:translateY(-50%);
      color:var(--muted);
      background:transparent;
      opacity:0;
      pointer-events:none;
      transition:.2s ease;
    }
    .clear-search.visible{opacity:1;pointer-events:auto}
    .clear-search:hover{color:var(--gold-2);background:rgba(215,173,92,.1)}
    .nav-actions{display:flex;align-items:center;gap:9px;white-space:nowrap}
    .nav-link,.mini-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-height:38px;
      border:1px solid transparent;
      border-radius:5px;
      color:var(--muted);
      background:transparent;
      transition:.2s ease;
    }
    .nav-link{padding:0 10px;font-size:14px}
    .nav-link:hover,.nav-link.active{color:var(--gold-2);border-color:var(--line);background:rgba(215,173,92,.07)}
    .mini-icon{width:38px;padding:0}
    .mini-icon:hover{color:var(--gold-2);border-color:var(--line-strong);background:var(--panel)}
    .mobile-categories{
      display:none;
      border-top:1px solid rgba(220,188,116,.12);
      overflow-x:auto;
      scrollbar-width:none;
    }
    .mobile-categories::-webkit-scrollbar{display:none}
    .mobile-categories .inner{display:flex;gap:8px;padding:9px 0;min-width:max-content}
    .mobile-categories a{
      padding:5px 10px;
      border:1px solid var(--line);
      border-radius:3px;
      color:var(--muted);
      font-size:13px;
    }
    .mobile-categories a.active{color:#1a1207;background:var(--gold);border-color:var(--gold)}
    .hero{
      position:relative;
      min-height:560px;
      padding:58px 0 42px;
      border-bottom:1px solid var(--line);
      background:
        radial-gradient(ellipse at 84% 38%,rgba(92,64,23,.22),transparent 31%),
        radial-gradient(ellipse at 18% 12%,rgba(87,37,42,.22),transparent 34%);
    }
    .hero:after{
      content:"";
      position:absolute;
      right:4%;
      bottom:0;
      width:38%;
      height:1px;
      background:var(--gold);
      box-shadow:0 0 18px var(--gold);
      opacity:.55;
    }
    .hero-grid{position:relative;z-index:1;align-items:center;min-height:450px}
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin:0 0 14px;
      color:var(--gold-2);
      font-size:13px;
      font-weight:700;
      letter-spacing:.08em;
    }
    .kicker:before{content:"";width:8px;height:8px;background:var(--gold);box-shadow:2px 2px 0 var(--bronze)}
    h1,h2,h3,p{margin-top:0}
    h1{
      max-width:760px;
      margin-bottom:18px;
      color:#fff8e9;
      font-size:clamp(35px,5vw,64px);
      font-weight:900;
      line-height:1.12;
      letter-spacing:0;
      text-wrap:balance;
    }
    .hero-copy{
      max-width:690px;
      margin-bottom:25px;
      color:var(--muted);
      font-size:17px;
    }
    .hero-copy strong{color:var(--gold-2);font-weight:700}
    .hero-points{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:27px}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:28px;
      padding:4px 9px;
      border:1px solid var(--line-strong);
      border-radius:3px;
      color:var(--gold-2);
      background:rgba(40,30,19,.72);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
      font-size:12px;
      font-weight:700;
    }
    .badge i{font-size:11px;color:var(--gold)}
    .badge.wine{border-color:rgba(188,81,88,.5);color:#efaaa7;background:rgba(87,37,42,.38)}
    .badge.green{border-color:rgba(87,145,112,.45);color:#b4dfc0;background:rgba(31,71,54,.38)}
    .button-row{display:flex;flex-wrap:wrap;gap:11px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      padding:0 18px;
      border:1px solid var(--gold);
      border-radius:5px;
      color:#191108;
      background:var(--gold);
      font-size:14px;
      font-weight:800;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
    }
    .btn:hover{transform:translateY(-2px);color:#130d06;background:var(--gold-2);box-shadow:0 7px 18px rgba(215,173,92,.18),0 0 0 2px rgba(215,173,92,.12)}
    .btn:active{transform:translateY(0)}
    .btn:focus-visible,.faq-question:focus-visible,.filter-chip:focus-visible,.page-link:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
    .btn-outline{color:var(--gold-2);background:transparent;border-color:var(--line-strong)}
    .btn-outline:hover{color:#1a1207;background:var(--gold);border-color:var(--gold)}
    .btn-small{min-height:36px;padding:0 12px;font-size:13px}
    .hero-stage{
      position:relative;
      max-width:445px;
      margin:0 0 0 auto;
      padding:15px;
      border:1px solid var(--line-strong);
      background:linear-gradient(145deg,#1d1711,#100e0c);
      box-shadow:var(--shadow),var(--pixel);
      clip-path:polygon(0 11px,11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
    }
    .stage-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
    .stage-title{margin:0;color:var(--gold-2);font-weight:800;font-size:14px}
    .live-dot{display:inline-flex;align-items:center;gap:6px;color:#cbdab6;font-size:11px}
    .live-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#7ab26e;box-shadow:0 0 9px #7ab26e}
    .stage-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:10px}
    .progress-panel,.tier-panel,.benefit-cell{
      border:1px solid rgba(220,188,116,.2);
      background:rgba(9,8,7,.6);
    }
    .progress-panel{padding:18px 15px}
    .meter{
      position:relative;
      width:142px;
      height:142px;
      display:grid;
      place-items:center;
      margin:0 auto 14px;
      border-radius:50%;
      background:conic-gradient(var(--gold) 0 71%,#3a2a19 71% 100%);
    }
    .meter:before{
      content:"";
      position:absolute;
      width:119px;
      height:119px;
      border:1px solid rgba(241,208,138,.22);
      border-radius:50%;
      background:#17110b;
      box-shadow:inset 0 0 16px rgba(0,0,0,.38);
    }
    .meter-value{position:relative;text-align:center;line-height:1.1}
    .meter-value strong{display:block;color:var(--gold-2);font-size:29px}
    .meter-value span{color:var(--subtle);font-size:11px}
    .progress-caption{text-align:center;color:var(--muted);font-size:12px;line-height:1.55}
    .progress-caption b{color:var(--text)}
    .tier-panel{display:grid;gap:8px;padding:10px}
    .tier{
      position:relative;
      padding:10px 9px;
      border:1px solid rgba(220,188,116,.16);
      background:#17120e;
    }
    .tier.recommended{border-color:var(--gold);background:linear-gradient(90deg,rgba(215,173,92,.16),rgba(215,173,92,.03))}
    .tier small{display:block;color:var(--subtle);font-size:11px}
    .tier b{display:block;color:var(--text);font-size:13px}
    .tier em{position:absolute;right:7px;top:8px;color:var(--gold);font-size:10px;font-style:normal}
    .stage-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
    .benefit-cell{padding:9px 8px;text-align:center}
    .benefit-cell i{display:block;margin-bottom:4px;color:var(--gold);font-size:13px}
    .benefit-cell span{display:block;color:var(--muted);font-size:11px;line-height:1.35}
    main{position:relative}
    .section{padding:78px 0;border-bottom:1px solid rgba(220,188,116,.12)}
    .section-dark{background:rgba(7,6,5,.34)}
    .section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:28px}
    .section-heading h2{
      margin:0 0 8px;
      color:#fff8e9;
      font-size:clamp(25px,3vw,36px);
      font-weight:900;
      line-height:1.2;
    }
    .section-heading p{max-width:630px;margin:0;color:var(--muted);font-size:15px}
    .text-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold-2);font-size:14px;font-weight:700;white-space:nowrap}
    .text-link:hover{color:#fff0c9}
    .product-grid{margin-bottom:-20px}
    .product-grid .cell{margin-bottom:20px}
    .product-card{
      height:100%;
      display:flex;
      flex-direction:column;
      border:1px solid var(--line);
      background:linear-gradient(145deg,rgba(30,24,19,.96),rgba(17,14,12,.96));
      box-shadow:var(--pixel);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }
    .product-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 13px 25px rgba(0,0,0,.23),0 0 0 1px rgba(215,173,92,.13)}
    .card-visual{
      position:relative;
      min-height:156px;
      overflow:hidden;
      padding:14px;
      border-bottom:1px solid var(--line);
      background:
        linear-gradient(135deg,rgba(92,64,23,.38),transparent 45%),
        linear-gradient(45deg,#12100e,#292015);
    }
    .card-visual:before{
      content:"";
      position:absolute;
      inset:12px;
      border:1px solid rgba(241,208,138,.16);
      background:repeating-linear-gradient(90deg,transparent 0,transparent 13px,rgba(215,173,92,.055) 14px);
    }
    .visual-number{
      position:relative;
      color:rgba(241,208,138,.23);
      font-size:58px;
      font-weight:900;
      line-height:1;
    }
    .visual-label{
      position:absolute;
      left:15px;
      bottom:14px;
      z-index:1;
      color:var(--gold-2);
      font-size:12px;
      font-weight:800;
      letter-spacing:.08em;
    }
    .hot-mark{
      position:absolute;
      top:13px;
      right:13px;
      z-index:2;
      padding:4px 8px;
      color:#2a1607;
      background:var(--gold);
      box-shadow:2px 2px 0 #6c471d;
      font-size:10px;
      font-weight:900;
    }
    .card-body{display:flex;flex:1;flex-direction:column;padding:18px}
    .card-body h3{margin:0 0 8px;color:var(--text);font-size:18px;line-height:1.35}
    .card-body p{margin:0 0 15px;color:var(--muted);font-size:13px;line-height:1.65}
    .card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;margin-bottom:14px}
    .tag{padding:3px 7px;border:1px solid rgba(220,188,116,.2);color:#cfc2a9;background:rgba(255,255,255,.025);font-size:11px}
    .card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px;border-top:1px solid rgba(220,188,116,.13)}
    .heat{color:var(--subtle);font-size:12px}
    .heat i{margin-right:4px;color:var(--gold)}
    .stage-section{background:linear-gradient(90deg,rgba(87,37,42,.18),transparent 44%,rgba(44,91,53,.12))}
    .screen-stage{
      position:relative;
      min-height:362px;
      padding:16px;
      border:1px solid var(--line-strong);
      background:#12100e;
      box-shadow:var(--shadow),var(--pixel);
    }
    .screen-top{display:flex;align-items:center;justify-content:space-between;padding:0 3px 13px;border-bottom:1px solid var(--line)}
    .window-dots{display:flex;gap:5px}
    .window-dots span{width:8px;height:8px;background:#604325}
    .window-dots span:nth-child(2){background:#88522b}
    .window-dots span:nth-child(3){background:#b87935}
    .screen-title{color:var(--muted);font-size:12px}
    .screen-content{display:grid;grid-template-columns:32% 1fr;gap:12px;padding-top:14px}
    .screen-side{padding:10px;border:1px solid rgba(220,188,116,.16);background:#0d0b0a}
    .side-line{height:9px;margin-bottom:11px;background:#2a2119}
    .side-line.active{width:80%;background:var(--gold)}
    .screen-main{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .mini-tile{min-height:104px;padding:11px;border:1px solid rgba(220,188,116,.16);background:linear-gradient(135deg,#211914,#12100e)}
    .mini-tile b{display:block;margin-bottom:8px;color:var(--gold-2);font-size:12px}
    .mini-tile span{display:block;height:5px;margin-top:7px;background:#433321}
    .mini-tile span:nth-child(3){width:72%}
    .scene-copy{padding:15px 0 0 30px}
    .scene-copy h2{margin-bottom:12px;color:#fff8e9;font-size:34px;line-height:1.25;font-weight:900}
    .scene-copy p{margin-bottom:20px;color:var(--muted)}
    .check-list{display:grid;gap:11px;margin:0 0 25px;padding:0;list-style:none}
    .check-list li{display:flex;gap:10px;color:#d8cebd;font-size:14px}
    .check-list i{margin-top:5px;color:var(--gold)}
    .steps-wrap{padding-top:8px}
    .step-row{position:relative;display:grid;grid-template-columns:82px 1fr;gap:24px;padding-bottom:28px}
    .step-row:last-child{padding-bottom:0}
    .step-row:not(:last-child):before{content:"";position:absolute;left:20px;top:47px;bottom:0;width:1px;background:linear-gradient(var(--gold),rgba(215,173,92,.1))}
    .step-no{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border:1px solid var(--gold);
      color:var(--gold-2);
      background:#1a130c;
      box-shadow:3px 3px 0 rgba(165,123,64,.35);
      font-weight:900;
    }
    .step-content{padding-top:4px}
    .step-content h3{margin:0 0 5px;font-size:19px;color:var(--text)}
    .step-content p{max-width:650px;margin:0;color:var(--muted);font-size:14px}
    .reviews-track{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;scrollbar-color:var(--bronze) transparent}
    .review-card{
      flex:0 0 min(355px,84vw);
      min-height:220px;
      display:flex;
      flex-direction:column;
      padding:22px;
      border:1px solid var(--line);
      background:linear-gradient(145deg,#1b1511,#110f0d);
      box-shadow:var(--pixel);
      scroll-snap-align:start;
    }
    .stars{margin-bottom:15px;color:var(--gold);font-size:14px;letter-spacing:2px}
    .review-card blockquote{margin:0 0 18px;color:#e6ddce;font-size:15px;line-height:1.8}
    .review-foot{display:flex;align-items:center;gap:10px;margin-top:auto}
    .avatar{
      width:32px;height:32px;display:grid;place-items:center;
      border:1px solid var(--gold);border-radius:50%;
      color:#1a1108;background:var(--gold);font-weight:900;font-size:12px;
    }
    .review-name{display:block;color:var(--text);font-size:13px;font-weight:700}
    .review-meta{display:block;color:var(--subtle);font-size:11px}
    .trust-strip{padding:25px 0;background:#0d0b0a;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
    .trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
    .trust-item{display:flex;align-items:center;gap:10px;padding:8px;color:var(--muted);font-size:13px}
    .trust-item i{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--gold);background:#17120e}
    .info-layout{align-items:stretch}
    .rank-panel,.news-panel{
      height:100%;
      padding:22px;
      border:1px solid var(--line);
      background:rgba(24,20,17,.84);
      box-shadow:var(--pixel);
    }
    .panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
    .panel-title h3{margin:0;color:var(--gold-2);font-size:18px}
    .panel-title span{color:var(--subtle);font-size:12px}
    .rank-list,.news-list{margin:0;padding:0;list-style:none}
    .rank-list li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid rgba(220,188,116,.13)}
    .rank-no{color:var(--gold);font-weight:900}
    .rank-name{color:#e9dfcf;font-size:14px}
    .rank-sub{display:block;color:var(--subtle);font-size:11px}
    .rank-heat{color:var(--muted);font-size:12px}
    .news-list li{padding:14px 0;border-top:1px solid rgba(220,188,116,.13)}
    .news-list a{display:flex;justify-content:space-between;gap:12px}
    .news-list strong{color:#e9dfcf;font-size:14px;font-weight:700}
    .news-list span{flex:0 0 auto;color:var(--subtle);font-size:11px}
    .news-list a:hover strong{color:var(--gold-2)}
    .plans{align-items:stretch}
    .plan-card{
      position:relative;
      height:100%;
      padding:25px 22px;
      border:1px solid var(--line);
      background:linear-gradient(155deg,#1c1712,#120f0d);
      box-shadow:var(--pixel);
    }
    .plan-card.featured{transform:translateY(-8px);border-color:var(--gold);background:linear-gradient(155deg,rgba(78,54,23,.95),#17110d)}
    .plan-ribbon{position:absolute;right:12px;top:12px;padding:4px 8px;color:#1d1309;background:var(--gold);font-size:11px;font-weight:900}
    .plan-card h3{margin:0 0 6px;color:var(--gold-2);font-size:21px}
    .plan-card p{min-height:44px;margin:0 0 16px;color:var(--muted);font-size:13px}
    .plan-price{margin-bottom:18px;color:#fff8e9;font-size:26px;font-weight:900}
    .plan-price small{color:var(--subtle);font-size:12px;font-weight:400}
    .plan-list{display:grid;gap:10px;margin:0 0 23px;padding:0;list-style:none}
    .plan-list li{color:#d8cebd;font-size:13px}
    .plan-list i{width:18px;color:var(--gold)}
    .faq-layout{align-items:start}
    .faq-intro{padding-right:32px}
    .faq-intro h2{margin-bottom:12px;color:#fff8e9;font-size:35px;line-height:1.25;font-weight:900}
    .faq-intro p{color:var(--muted)}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      padding:18px 0;
      border:0;
      color:var(--text);
      background:transparent;
      text-align:left;
      font-weight:800;
      font-size:16px;
    }
    .faq-question i{color:var(--gold);transition:transform .2s ease}
    .faq-item.is-open .faq-question i{transform:rotate(45deg)}
    .faq-answer{display:none;padding:0 34px 18px 0;color:var(--muted);font-size:14px}
    .faq-item.is-open .faq-answer{display:block}
    .cta-section{padding:70px 0;background:linear-gradient(105deg,#2d1c0e,#5c3b16 52%,#28170d);border-bottom:1px solid var(--gold)}
    .cta-panel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px;border:1px solid rgba(255,235,181,.47);background:rgba(14,10,7,.34);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
    .cta-panel:before,.cta-panel:after{content:"";position:absolute;width:11px;height:11px;border-color:#f2d18b;border-style:solid}
    .cta-panel:before{left:8px;top:8px;border-width:1px 0 0 1px}
    .cta-panel:after{right:8px;bottom:8px;border-width:0 1px 1px 0}
    .cta-panel h2{margin:0 0 8px;color:#fff5de;font-size:33px;line-height:1.2;font-weight:900}
    .cta-panel p{max-width:640px;margin:0;color:#e4cfa9;font-size:15px}
    .cta-actions{display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;gap:10px}
    .cta-actions .btn{background:#f1d08a;border-color:#f6dd9d}
    .cta-actions .btn-outline{color:#fff0ca;background:transparent;border-color:rgba(255,235,181,.54)}
    .cta-actions .btn-outline:hover{color:#231506;background:#f1d08a}
    .site-footer{padding:48px 0 24px;background:#080706}
    .footer-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:36px;padding-bottom:34px;border-bottom:1px solid var(--line)}
    .footer-brand{max-width:430px}
    .footer-brand .brand{margin-bottom:13px}
    .footer-brand p{margin:0;color:var(--subtle);font-size:13px}
    .footer-column h3{margin:0 0 12px;color:var(--gold-2);font-size:14px}
    .footer-column a{display:block;margin:7px 0;color:var(--muted);font-size:13px}
    .footer-column a:hover{color:var(--gold-2)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:18px;color:#756a5b;font-size:12px}
    .footer-bottom span:last-child{text-align:right}
    .toast{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:90;
      max-width:310px;
      padding:12px 15px;
      border:1px solid var(--gold);
      color:var(--text);
      background:#21180e;
      box-shadow:var(--shadow);
      opacity:0;
      transform:translateY(16px);
      pointer-events:none;
      transition:.25s ease;
      font-size:13px;
    }
    .toast.show{opacity:1;transform:translateY(0)}
    @media (max-width:1024px){
      .topbar{grid-template-columns:auto minmax(240px,1fr) auto;gap:12px}
      .nav-link{padding:0 7px}
      .hero{padding-top:42px}
      .scene-copy{padding-left:16px}
      .trust-grid{grid-template-columns:repeat(3,1fr)}
    }
    @media (max-width:768px){
      .grid-container{padding-left:17px;padding-right:17px}
      .site-header{position:sticky}
      .topbar{grid-template-columns:1fr auto;min-height:auto;padding:11px 0 9px}
      .brand{min-width:0;font-size:14px}
      .brand-mark{width:25px;height:25px;flex-basis:25px}
      .search-wrap{grid-column:1 / -1;grid-row:2;order:3}
      .site-search{height:43px}
      .nav-actions .nav-link{display:none}
      .mobile-categories{display:block}
      .hero{min-height:0;padding:38px 0 32px}
      .hero-grid{min-height:0}
      h1{font-size:39px}
      .hero-copy{font-size:15px}
      .hero-stage{max-width:520px;margin:31px auto 0}
      .section{padding:55px 0}
      .section-heading{display:block;margin-bottom:22px}
      .section-heading .text-link{margin-top:12px}
      .scene-copy{padding:27px 0 0}
      .scene-copy h2,.faq-intro h2{font-size:28px}
      .screen-stage{min-height:310px}
      .trust-grid{grid-template-columns:repeat(2,1fr);gap:4px}
      .trust-item{padding:8px 2px;font-size:12px}
      .plan-card.featured{transform:none}
      .plan-card{margin-bottom:14px}
      .faq-intro{padding:0 0 18px}
      .cta-panel{display:block;padding:27px 22px}
      .cta-panel h2{font-size:27px}
      .cta-actions{justify-content:flex-start;margin-top:22px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
      .footer-brand{grid-column:1 / -1}
    }
    @media (max-width:520px){
      .brand{max-width:195px}
      .nav-actions{gap:4px}
      .mini-icon{width:34px;height:34px;min-height:34px}
      h1{font-size:34px}
      .button-row,.cta-actions{display:grid;grid-template-columns:1fr}
      .btn{width:100%}
      .stage-grid{grid-template-columns:1fr}
      .progress-panel{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:8px;padding:12px}
      .meter{width:116px;height:116px;margin:0}
      .meter:before{width:97px;height:97px}
      .meter-value strong{font-size:23px}
      .stage-footer{grid-template-columns:1fr 1fr}
      .screen-content{grid-template-columns:1fr}
      .screen-side{display:none}
      .screen-main{grid-template-columns:repeat(2,1fr)}
      .mini-tile{min-height:86px}
      .step-row{grid-template-columns:56px 1fr;gap:14px}
      .step-row:not(:last-child):before{left:20px}
      .trust-grid{grid-template-columns:1fr}
      .trust-item{padding:5px 0}
      .footer-grid{grid-template-columns:1fr}
      .footer-brand{grid-column:auto}
      .footer-bottom{display:block}
      .footer-bottom span:last-child{display:block;margin-top:6px;text-align:left}
      .section-heading h2{font-size:27px}
    }

/* roulang page: category1 */
:root {
      --bg: #0b0908;
      --bg-deep: #060504;
      --panel: #15110f;
      --panel-2: #1d1712;
      --panel-3: #241b14;
      --gold: #d6a84d;
      --gold-soft: #f0cf82;
      --bronze: #9b6d36;
      --amber: #c9852f;
      --wine: #35151a;
      --green: #10241c;
      --text: #f6ead4;
      --muted: #c4ad86;
      --weak: #89765d;
      --line: rgba(214, 168, 77, .36);
      --line-strong: rgba(240, 207, 130, .66);
      --shadow: 0 18px 50px rgba(0, 0, 0, .38);
      --inner: inset 0 0 0 1px rgba(255, 236, 180, .06);
      --radius: 10px;
      --radius-sm: 6px;
      --container: 1180px;
      --speed: 180ms ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      line-height: 1.72;
      background:
        linear-gradient(180deg, rgba(44, 17, 21, .32), rgba(6, 5, 4, 0) 280px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0, rgba(255, 255, 255, .018) 1px, transparent 1px, transparent 4px),
        radial-gradient(circle at 12% 10%, rgba(214, 168, 77, .08), transparent 28%),
        var(--bg);
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--speed), border-color var(--speed), background var(--speed), transform var(--speed), box-shadow var(--speed);
    }

    a:hover,
    a:focus {
      color: var(--gold-soft);
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    input:focus,
    button:focus,
    a:focus {
      outline: 2px solid rgba(240, 207, 130, .7);
      outline-offset: 3px;
    }

    .grid-container {
      max-width: var(--container);
      padding-left: 22px;
      padding-right: 22px;
    }

    .pixel-panel {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(255, 224, 145, .06), transparent 36%),
        linear-gradient(180deg, rgba(36, 27, 20, .96), rgba(17, 13, 11, .98));
      box-shadow: var(--shadow), var(--inner);
    }

    .pixel-panel::before,
    .entry-card::before,
    .filter-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(240, 207, 130, .14), transparent 18%, transparent 82%, rgba(240, 207, 130, .1)),
        repeating-linear-gradient(90deg, transparent 0, transparent 16px, rgba(255, 231, 169, .025) 16px, rgba(255, 231, 169, .025) 17px);
      opacity: .55;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(214, 168, 77, .28);
      background: rgba(8, 7, 6, .94);
      backdrop-filter: blur(14px);
    }

    .nav-shell {
      min-height: 82px;
      display: grid;
      grid-template-columns: auto minmax(280px, 1fr) auto;
      align-items: center;
      gap: 18px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--text);
      font-weight: 900;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      display: inline-grid;
      place-items: center;
      color: #1a1209;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: linear-gradient(180deg, var(--gold-soft), var(--gold));
      box-shadow: 0 0 0 3px rgba(214, 168, 77, .08), 0 10px 22px rgba(214, 168, 77, .18);
    }

    .search-wrap {
      width: 100%;
    }

    .search-box {
      position: relative;
      display: flex;
      align-items: center;
      height: 48px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(30, 24, 18, .96), rgba(12, 10, 9, .98));
      box-shadow: inset 0 0 0 1px rgba(255, 242, 199, .06), 0 12px 28px rgba(0, 0, 0, .28);
      overflow: hidden;
    }

    .search-box i {
      margin-left: 18px;
      color: var(--gold-soft);
    }

    .search-box input {
      width: 100%;
      height: 100%;
      border: 0;
      margin: 0;
      padding: 0 46px 0 12px;
      color: var(--text);
      background: transparent;
      box-shadow: none;
    }

    .search-box input::placeholder {
      color: rgba(196, 173, 134, .86);
    }

    .search-box input:focus {
      outline: none;
      box-shadow: none;
    }

    .clear-search {
      position: absolute;
      right: 10px;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(214, 168, 77, .28);
      border-radius: 50%;
      color: var(--muted);
      background: rgba(255, 255, 255, .03);
    }

    .clear-search:hover {
      color: var(--bg-deep);
      background: var(--gold);
      border-color: var(--gold-soft);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 9px;
      white-space: nowrap;
    }

    .nav-link,
    .mini-icon {
      border: 1px solid rgba(214, 168, 77, .28);
      background: rgba(255, 235, 176, .04);
      color: var(--muted);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 800;
    }

    .mini-icon {
      width: 38px;
      height: 38px;
      display: inline-grid;
      place-items: center;
      border-radius: 9px;
    }

    .nav-link:hover,
    .mini-icon:hover,
    .nav-link.active {
      color: #17100a;
      border-color: var(--gold-soft);
      background: linear-gradient(180deg, var(--gold-soft), var(--gold));
      transform: translateY(-1px);
      box-shadow: 0 12px 24px rgba(214, 168, 77, .14), 0 0 0 3px rgba(214, 168, 77, .08);
    }

    .top-strip {
      border-bottom: 1px solid rgba(214, 168, 77, .2);
      background: linear-gradient(90deg, rgba(240, 207, 130, .13), rgba(55, 22, 26, .34), rgba(13, 36, 28, .32));
    }

    .strip-inner {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: var(--muted);
      font-size: 13px;
    }

    .strip-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .badge,
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(214, 168, 77, .34);
      border-radius: var(--radius-sm);
      color: var(--gold-soft);
      background: rgba(214, 168, 77, .08);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
    }

    .badge {
      padding: 6px 9px;
    }

    .tag {
      padding: 5px 8px;
      color: var(--muted);
    }

    .breadcrumb-area {
      padding: 24px 0 10px;
    }

    .breadcrumbs {
      margin: 0;
      padding: 0;
      background: transparent;
    }

    .breadcrumbs li {
      color: var(--weak);
      font-size: 13px;
    }

    .breadcrumbs a {
      color: var(--muted);
    }

    .breadcrumbs a:hover {
      color: var(--gold-soft);
      text-decoration: none;
    }

    .category-hero {
      padding: 14px 0 34px;
    }

    .hero-band {
      min-height: 230px;
      padding: 30px;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr);
      gap: 28px;
      align-items: stretch;
      overflow: hidden;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      color: var(--gold-soft);
      font-size: 13px;
      font-weight: 900;
    }

    h1,
    h2,
    h3 {
      margin: 0;
      color: var(--text);
      line-height: 1.22;
      letter-spacing: 0;
      font-weight: 950;
    }

    h1 {
      max-width: 820px;
      font-size: clamp(32px, 5vw, 56px);
    }

    h2 {
      font-size: clamp(24px, 3vw, 36px);
    }

    h3 {
      font-size: 18px;
    }

    p {
      margin: 0;
    }

    .hero-copy {
      position: relative;
      z-index: 1;
    }

    .hero-copy p {
      max-width: 760px;
      margin-top: 14px;
      color: var(--muted);
      font-size: 17px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 44px;
      padding: 11px 17px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      font-weight: 900;
      line-height: 1.2;
      transition: transform var(--speed), box-shadow var(--speed), background var(--speed), border-color var(--speed), color var(--speed);
    }

    .btn-primary {
      color: #160f08;
      background: linear-gradient(180deg, var(--gold-soft), var(--gold) 56%, var(--amber));
      box-shadow: 0 14px 28px rgba(214, 168, 77, .18), inset 0 1px 0 rgba(255, 255, 255, .32);
    }

    .btn-secondary {
      color: var(--gold-soft);
      background: rgba(214, 168, 77, .06);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 32px rgba(214, 168, 77, .18), 0 0 0 3px rgba(214, 168, 77, .08);
    }

    .btn-secondary:hover {
      color: var(--bg-deep);
      background: var(--gold);
    }

    .hero-side {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .stat-tile {
      min-height: 96px;
      padding: 15px;
      border: 1px solid rgba(214, 168, 77, .28);
      border-radius: 8px;
      background: rgba(6, 5, 4, .42);
      box-shadow: inset 0 0 18px rgba(214, 168, 77, .04);
    }

    .stat-tile strong {
      display: block;
      color: var(--gold-soft);
      font-size: 24px;
      line-height: 1.1;
    }

    .stat-tile span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
    }

    .toolbar {
      padding: 18px;
      margin-bottom: 20px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
    }

    .filter-tags,
    .sort-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      align-items: center;
    }

    .filter-chip,
    .sort-chip,
    .page-link {
      min-height: 34px;
      padding: 7px 11px;
      border: 1px solid rgba(214, 168, 77, .3);
      border-radius: 7px;
      color: var(--muted);
      background: rgba(255, 235, 176, .035);
      font-size: 13px;
      font-weight: 850;
    }

    .filter-chip:hover,
    .sort-chip:hover,
    .filter-chip.active,
    .sort-chip.active,
    .page-link.active {
      color: #150f08;
      border-color: var(--gold-soft);
      background: linear-gradient(180deg, var(--gold-soft), var(--gold));
      transform: translateY(-1px);
    }

    .section {
      padding: 34px 0;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: end;
      margin-bottom: 18px;
    }

    .section-head p {
      max-width: 720px;
      margin-top: 8px;
      color: var(--muted);
    }

    .layout-grid {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }

    .filter-panel {
      position: sticky;
      top: 104px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(29, 23, 18, .98), rgba(12, 10, 9, .98));
      box-shadow: var(--shadow), var(--inner);
    }

    .filter-block {
      position: relative;
      z-index: 1;
      padding: 15px 0;
      border-bottom: 1px solid rgba(214, 168, 77, .18);
    }

    .filter-block:first-child {
      padding-top: 0;
    }

    .filter-block:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .filter-title {
      margin-bottom: 10px;
      color: var(--gold-soft);
      font-size: 14px;
      font-weight: 950;
    }

    .check-row,
    .radio-row {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 34px;
      color: var(--muted);
      font-size: 14px;
    }

    .switch-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 14px;
    }

    .switch {
      position: relative;
      width: 44px;
      height: 24px;
      flex: 0 0 auto;
      border: 1px solid rgba(214, 168, 77, .42);
      border-radius: 999px;
      background: rgba(255, 255, 255, .05);
    }

    .switch::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 4px;
      width: 16px;
      height: 16px;
      border-radius: 4px;
      background: var(--gold);
      box-shadow: 0 0 12px rgba(214, 168, 77, .36);
    }

    .entry-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .entry-card {
      position: relative;
      min-height: 286px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(32, 24, 18, .98), rgba(12, 10, 9, .98));
      box-shadow: 0 12px 28px rgba(0, 0, 0, .24), var(--inner);
      overflow: hidden;
      transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
    }

    .entry-card:hover {
      transform: translateY(-3px);
      border-color: var(--line-strong);
      box-shadow: 0 18px 36px rgba(0, 0, 0, .34), 0 0 0 3px rgba(214, 168, 77, .07);
    }

    .entry-visual {
      position: relative;
      height: 104px;
      border-bottom: 1px solid rgba(214, 168, 77, .22);
      background:
        linear-gradient(135deg, rgba(214, 168, 77, .22), transparent 42%),
        repeating-linear-gradient(45deg, rgba(255, 236, 178, .08) 0, rgba(255, 236, 178, .08) 2px, transparent 2px, transparent 10px),
        linear-gradient(135deg, var(--wine), var(--green));
    }

    .entry-visual::after {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px dashed rgba(240, 207, 130, .38);
      border-radius: 6px;
    }

    .entry-visual i {
      position: absolute;
      right: 16px;
      bottom: 14px;
      color: rgba(240, 207, 130, .78);
      font-size: 24px;
    }

    .entry-body {
      position: relative;
      z-index: 1;
      padding: 15px;
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 10px;
    }

    .entry-card h3 {
      min-height: 44px;
    }

    .entry-card p {
      color: var(--muted);
      font-size: 14px;
    }

    .entry-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: auto;
    }

    .entry-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-top: 4px;
    }

    .heat {
      color: var(--gold-soft);
      font-size: 13px;
      font-weight: 900;
    }

    .small-btn {
      min-height: 34px;
      padding: 7px 10px;
      border: 1px solid rgba(214, 168, 77, .42);
      border-radius: 7px;
      color: var(--gold-soft);
      background: rgba(214, 168, 77, .06);
      font-size: 13px;
      font-weight: 900;
    }

    .small-btn:hover {
      color: #130d07;
      background: var(--gold);
      border-color: var(--gold-soft);
    }

    .proof-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .proof-item {
      padding: 17px;
      border: 1px solid rgba(214, 168, 77, .3);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(30, 23, 17, .92), rgba(11, 9, 8, .96));
      box-shadow: var(--inner);
    }

    .proof-item i {
      color: var(--gold-soft);
      font-size: 22px;
      margin-bottom: 9px;
    }

    .proof-item strong {
      display: block;
      color: var(--text);
      font-size: 15px;
    }

    .proof-item span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
    }

    .pagination-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 22px;
    }

    .compare-panel {
      padding: 22px;
    }

    .compare-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 16px;
    }

    .compare-card {
      padding: 18px;
      border: 1px solid rgba(214, 168, 77, .3);
      border-radius: var(--radius);
      background: rgba(6, 5, 4, .28);
    }

    .compare-card h3 {
      color: var(--gold-soft);
      margin-bottom: 8px;
    }

    .compare-card ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .compare-card li {
      display: flex;
      gap: 9px;
      padding: 7px 0;
      color: var(--muted);
      font-size: 14px;
      border-bottom: 1px solid rgba(214, 168, 77, .12);
    }

    .compare-card li:last-child {
      border-bottom: 0;
    }

    .compare-card li i {
      margin-top: 5px;
      color: var(--gold);
      font-size: 12px;
    }

    .faq-wrap {
      max-width: 900px;
    }

    .accordion {
      margin: 0;
      background: transparent;
    }

    .accordion-item {
      margin-bottom: 10px;
      border: 1px solid rgba(214, 168, 77, .3);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(29, 23, 18, .96), rgba(12, 10, 9, .98));
      overflow: hidden;
      box-shadow: var(--inner);
    }

    .accordion-title {
      padding: 16px 52px 16px 18px;
      border: 0;
      color: var(--text);
      font-size: 16px;
      font-weight: 900;
      background: transparent;
    }

    .accordion-title:hover,
    .accordion-title:focus {
      color: var(--gold-soft);
      background: rgba(214, 168, 77, .06);
    }

    .accordion-title::before {
      color: var(--gold-soft);
      font-size: 20px;
      margin-top: -12px;
    }

    .accordion-content {
      padding: 0 18px 18px;
      border: 0;
      color: var(--muted);
      background: transparent;
    }

    .cta-band {
      padding: 24px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      background:
        linear-gradient(90deg, rgba(214, 168, 77, .16), rgba(55, 21, 26, .38), rgba(16, 36, 28, .32)),
        linear-gradient(180deg, rgba(36, 27, 20, .98), rgba(8, 7, 6, .98));
    }

    .cta-band p {
      margin-top: 8px;
      color: var(--muted);
      max-width: 720px;
    }

    .site-footer {
      margin-top: 36px;
      padding: 44px 0 24px;
      border-top: 1px solid rgba(214, 168, 77, .26);
      background:
        linear-gradient(180deg, rgba(6, 5, 4, .4), rgba(6, 5, 4, .95)),
        #050403;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(160px, .7fr) minmax(160px, .7fr);
      gap: 28px;
    }

    .footer-brand p {
      max-width: 500px;
      margin-top: 14px;
      color: var(--muted);
      font-size: 14px;
    }

    .footer-column h3 {
      margin-bottom: 12px;
      color: var(--gold-soft);
      font-size: 15px;
    }

    .footer-column a {
      display: block;
      padding: 5px 0;
      color: var(--muted);
      font-size: 14px;
    }

    .footer-column a:hover {
      color: var(--gold-soft);
      transform: translateX(2px);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-top: 30px;
      padding-top: 18px;
      border-top: 1px solid rgba(214, 168, 77, .18);
      color: var(--weak);
      font-size: 13px;
    }

    @media screen and (max-width: 1024px) {
      .nav-shell {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 0;
      }

      .brand {
        justify-self: start;
      }

      .nav-actions {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
      }

      .hero-band {
        grid-template-columns: 1fr;
      }

      .layout-grid {
        grid-template-columns: 1fr;
      }

      .filter-panel {
        position: static;
      }

      .entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .proof-row,
      .compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .toolbar,
      .cta-band {
        grid-template-columns: 1fr;
      }
    }

    @media screen and (max-width: 768px) {
      .grid-container {
        padding-left: 16px;
        padding-right: 16px;
      }

      .site-header {
        position: sticky;
      }

      .brand span:last-child {
        max-width: calc(100vw - 92px);
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .search-box {
        height: 46px;
      }

      .nav-link {
        min-height: 40px;
      }

      .strip-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 0;
      }

      .hero-band {
        min-height: auto;
        padding: 22px;
      }

      h1 {
        font-size: 32px;
      }

      .hero-side,
      .entry-grid,
      .proof-row,
      .compare-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .section-head {
        grid-template-columns: 1fr;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }

    @media screen and (max-width: 520px) {
      .hero-actions,
      .sort-actions,
      .filter-tags {
        width: 100%;
      }

      .btn,
      .filter-chip,
      .sort-chip {
        width: 100%;
      }

      .hero-side {
        gap: 10px;
      }

      .entry-foot {
        align-items: stretch;
        flex-direction: column;
      }

      .small-btn {
        width: 100%;
        text-align: center;
      }

      .cta-band {
        padding: 20px;
      }
    }