/* roulang page: index */
:root{
      --bg:#f4efe7;
      --bg-soft:#fbf7f0;
      --surface:#fffaf2;
      --surface-2:#f4eadc;
      --surface-dark:#191614;
      --surface-dark-2:#231f1b;
      --text:#211913;
      --muted:#6e5f53;
      --muted-2:#8a7c71;
      --border:#e4d6c4;
      --border-dark:#352e29;
      --accent:#c18b4c;
      --accent-2:#8f6a47;
      --accent-soft:rgba(193,139,76,.16);
      --shadow:0 18px 48px rgba(37,27,18,.10);
      --shadow-soft:0 10px 30px rgba(37,27,18,.07);
      --radius:18px;
      --radius-lg:28px;
      --radius-sm:14px;
      --max:1320px;
      --gap:24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 20% 0%, rgba(193,139,76,.08), transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(143,106,71,.08), transparent 26%),
        linear-gradient(180deg,#f8f3ea 0%, #f4efe7 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body::selection{background:rgba(193,139,76,.22); color:var(--text)}
    a{color:inherit; text-decoration:none; transition:all .22s ease}
    a:hover{color:var(--accent)}
    img{max-width:100%; display:block}
    button,input,textarea,select{font:inherit}
    .container-xxl{max-width:var(--max)}
    .site-topbar{
      background:linear-gradient(135deg,#181513 0%,#231f1b 100%);
      color:#f7efe1;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .brand-row{
      min-height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:12px 0;
    }
    .brand-mark{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
    }
    .brand-badge{
      width:42px;height:42px;
      border-radius:14px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 25%),
        linear-gradient(145deg,#d8b07a 0%, #a36d33 100%);
      box-shadow:0 10px 26px rgba(193,139,76,.28);
      position:relative;
      flex:0 0 auto;
    }
    .brand-badge::after{
      content:"";
      position:absolute;
      inset:11px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.26);
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .brand-name{
      font-size:1.18rem;
      font-weight:800;
      letter-spacing:.02em;
      line-height:1.2;
    }
    .brand-sub{
      font-size:.88rem;
      color:rgba(247,239,225,.76);
    }
    .trend-line{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .trend-chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 12px;
      border:1px solid rgba(255,255,255,.1);
      border-radius:999px;
      background:rgba(255,255,255,.04);
      color:#f5ead9;
      font-size:.88rem;
      white-space:nowrap;
    }
    .trend-dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 6px rgba(193,139,76,.12);
    }
    .nav-shell{
      position:sticky;
      top:0;
      z-index:1030;
      background:rgba(247,240,230,.82);
      backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(228,214,196,.85);
      box-shadow:0 8px 30px rgba(37,27,18,.05);
    }
    .nav-inner{
      display:flex;
      align-items:center;
      gap:18px;
      min-height:72px;
      padding:10px 0;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:nowrap;
      overflow-x:auto;
      padding-bottom:4px;
      scrollbar-width:thin;
      scrollbar-color:rgba(193,139,76,.35) transparent;
    }
    .nav-links::-webkit-scrollbar{height:6px}
    .nav-links::-webkit-scrollbar-thumb{background:rgba(193,139,76,.35); border-radius:999px}
    .nav-link-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:11px 16px;
      border-radius:999px;
      color:var(--text);
      background:transparent;
      border:1px solid transparent;
      white-space:nowrap;
      font-weight:600;
      font-size:.96rem;
    }
    .nav-link-chip:hover,
    .nav-link-chip.active{
      background:rgba(193,139,76,.12);
      border-color:rgba(193,139,76,.22);
      color:var(--text);
    }
    .nav-link-chip .mini-dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--accent);
      opacity:.85;
    }
    .nav-search{
      margin-left:auto;
      width:min(360px,100%);
      flex:0 0 360px;
    }
    .search-box{
      position:relative;
      display:flex;
      align-items:center;
      background:#fff;
      border:1px solid var(--border);
      border-radius:999px;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .search-box input{
      border:0;
      outline:0;
      width:100%;
      padding:12px 16px 12px 18px;
      background:transparent;
      color:var(--text);
    }
    .search-box input::placeholder{color:#9a8f84}
    .search-box button{
      border:0;
      background:linear-gradient(135deg,var(--accent),#b57b41);
      color:#fff;
      padding:12px 18px;
      font-weight:700;
      white-space:nowrap;
      transition:all .22s ease;
    }
    .search-box button:hover{
      filter:brightness(1.04);
      transform:translateY(-1px);
    }
    .hero{
      padding:34px 0 18px;
    }
    .hero-shell{
      position:relative;
      border-radius:var(--radius-lg);
      overflow:hidden;
      background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 86% 14%, rgba(255,214,164,.18), transparent 22%),
        linear-gradient(135deg,#191614 0%, #231f1b 45%, #2d251e 100%);
      color:#f8f1e3;
      box-shadow:0 26px 60px rgba(26,18,10,.18);
      border:1px solid rgba(255,255,255,.06);
    }
    .hero-shell::before,
    .hero-shell::after{
      content:"";
      position:absolute;
      inset:auto;
      border-radius:50%;
      pointer-events:none;
      filter:blur(18px);
      opacity:.7;
    }
    .hero-shell::before{
      width:220px;height:220px;
      background:rgba(193,139,76,.14);
      top:-70px; right:8%;
    }
    .hero-shell::after{
      width:280px;height:280px;
      background:rgba(255,255,255,.05);
      bottom:-120px; left:-100px;
    }
    .hero-inner{
      position:relative;
      z-index:1;
      padding:34px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.06fr .94fr;
      gap:28px;
      align-items:center;
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#f1e7d6;
      font-size:.92rem;
      margin-bottom:16px;
      width:fit-content;
    }
    .hero-kicker .dot{
      width:9px;height:9px;border-radius:50%;
      background:#e2b374;
      box-shadow:0 0 0 7px rgba(226,179,116,.12);
    }
    .hero h1{
      font-size:clamp(2rem,4vw,4.1rem);
      line-height:1.06;
      letter-spacing:-.03em;
      margin:0 0 16px;
      font-weight:900;
    }
    .hero-lead{
      font-size:1.08rem;
      color:rgba(248,241,227,.82);
      max-width:58ch;
      margin:0 0 22px;
    }
    .hero-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:22px;
    }
    .btn-hero{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:13px 20px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:700;
      text-decoration:none;
      transition:all .22s ease;
      box-shadow:none;
    }
    .btn-hero.primary{
      background:linear-gradient(135deg,#d19b57,#b17637);
      color:#fff;
      box-shadow:0 16px 28px rgba(193,139,76,.20);
    }
    .btn-hero.primary:hover{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 30px rgba(193,139,76,.26);
    }
    .btn-hero.secondary{
      color:#f7efe1;
      border-color:rgba(255,255,255,.16);
      background:rgba(255,255,255,.05);
    }
    .btn-hero.secondary:hover{
      color:#fff;
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.26);
      background:rgba(255,255,255,.08);
    }
    .hero-metrics{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:8px;
    }
    .metric-pill{
      display:flex;
      align-items:flex-start;
      gap:10px;
      min-width:150px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:#f5ebdd;
    }
    .metric-pill strong{
      display:block;
      font-size:1.05rem;
      line-height:1.2;
    }
    .metric-pill span{
      display:block;
      font-size:.88rem;
      color:rgba(248,241,227,.70);
    }
    .metric-mark{
      width:10px;height:10px;border-radius:50%;
      margin-top:5px;
      background:var(--accent);
      box-shadow:0 0 0 7px rgba(193,139,76,.12);
      flex:0 0 auto;
    }
    .hero-stage{
      position:relative;
      min-height:420px;
    }
    .video-panel{
      position:relative;
      min-height:420px;
      border-radius:24px;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 55%, rgba(255,255,255,.06) 100%),
        radial-gradient(circle at 70% 24%, rgba(255,204,137,.22), transparent 26%),
        linear-gradient(180deg,#2b241d 0%, #171513 100%);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }
    .video-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(17,15,13,.08), rgba(17,15,13,.52)),
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.06), transparent 24%),
        radial-gradient(circle at 76% 68%, rgba(193,139,76,.16), transparent 20%);
    }
    .video-panel::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size:34px 34px;
      opacity:.18;
      mix-blend-mode:screen;
    }
    .play-float{
      position:absolute;
      top:20px;
      left:20px;
      z-index:2;
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:11px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:#f7efe1;
      backdrop-filter:blur(10px);
      font-weight:700;
    }
    .play-badge{
      width:40px;
      height:40px;
      border-radius:50%;
      display:inline-grid;
      place-items:center;
      background:linear-gradient(135deg,#e0b16f,#b97c3b);
      box-shadow:0 16px 24px rgba(193,139,76,.26);
      color:#fff;
      flex:0 0 auto;
    }
    .play-badge svg{margin-left:2px}
    .stage-main{
      position:absolute;
      inset:78px 20px 20px 20px;
      z-index:1;
      display:grid;
      grid-template-rows:1.15fr .7fr;
      gap:14px;
    }
    .stage-card{
      border-radius:20px;
      padding:20px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.09);
      backdrop-filter:blur(10px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
      color:#f7efe1;
      position:relative;
      overflow:hidden;
    }
    .stage-card.big{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:0;
    }
    .stage-label{
      display:inline-flex;
      width:fit-content;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(193,139,76,.14);
      color:#f3d9b4;
      border:1px solid rgba(193,139,76,.18);
      font-size:.84rem;
      font-weight:700;
      margin-bottom:14px;
    }
    .stage-card h3{
      margin:0 0 10px;
      font-size:1.48rem;
      line-height:1.18;
      font-weight:800;
      letter-spacing:-.02em;
    }
    .stage-card p{
      color:rgba(247,239,225,.8);
      margin:0;
      max-width:42ch;
    }
    .stage-bottom{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.09);
      color:#f7efe1;
      font-size:.88rem;
      white-space:nowrap;
    }
    .chip i{
      display:inline-block;
      width:7px;height:7px;border-radius:50%;
      background:#e4b06f;
      box-shadow:0 0 0 6px rgba(228,176,111,.12);
    }
    .stack-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .mini-card{
      border-radius:18px;
      padding:16px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.09);
      color:#f7efe1;
      min-height:112px;
    }
    .mini-card strong{
      display:block;
      margin-bottom:6px;
      font-size:1rem;
    }
    .mini-card span{
      display:block;
      color:rgba(247,239,225,.72);
      font-size:.9rem;
      line-height:1.65;
    }

    .section-pad{
      padding:72px 0;
    }
    .section-head{
      max-width:760px;
      margin-bottom:28px;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(193,139,76,.12);
      color:#8a5f2f;
      border:1px solid rgba(193,139,76,.18);
      font-size:.88rem;
      font-weight:700;
      margin-bottom:12px;
    }
    .section-title{
      margin:0 0 12px;
      font-size:clamp(1.55rem,2.5vw,2.35rem);
      line-height:1.18;
      font-weight:850;
      letter-spacing:-.02em;
    }
    .section-desc{
      margin:0;
      color:var(--muted);
      max-width:64ch;
    }

    .feature-card,
    .topic-card,
    .scene-card,
    .news-panel,
    .case-card,
    .price-card,
    .cta-panel,
    .faq-wrap{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .feature-card{
      height:100%;
      padding:22px;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .feature-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
      border-color:#d6c2aa;
    }
    .feature-icon{
      width:54px;height:54px;
      border-radius:18px;
      background:linear-gradient(135deg,rgba(193,139,76,.18),rgba(143,106,71,.08));
      border:1px solid rgba(193,139,76,.14);
      display:grid;
      place-items:center;
      margin-bottom:16px;
      color:#9f6d34;
    }
    .feature-card h3{
      font-size:1.05rem;
      margin:0 0 10px;
      font-weight:800;
    }
    .feature-card p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:.96rem;
    }

    .topic-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:24px;
      align-items:stretch;
    }
    .topic-card{
      padding:24px;
      height:100%;
      position:relative;
      overflow:hidden;
    }
    .topic-card.featured{
      background:
        radial-gradient(circle at 78% 16%, rgba(193,139,76,.16), transparent 22%),
        linear-gradient(180deg,#fffaf3,#f8f0e2);
    }
    .topic-card .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 13px;
      border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      color:var(--text);
      font-size:.9rem;
      font-weight:600;
    }
    .tag.active{
      background:rgba(193,139,76,.12);
      border-color:rgba(193,139,76,.22);
      color:#895f2d;
    }
    .topic-aside{
      display:grid;
      gap:14px;
    }
    .topic-mini{
      padding:18px 18px 16px;
      border-radius:18px;
      background:var(--surface);
      border:1px solid var(--border);
      box-shadow:var(--shadow-soft);
      min-height:138px;
    }
    .topic-mini strong{
      display:block;
      margin-bottom:8px;
      font-size:1.02rem;
      font-weight:800;
    }
    .topic-mini p{
      margin:0;
      color:var(--muted);
      line-height:1.72;
      font-size:.95rem;
    }
    .topic-visual{
      margin-top:18px;
      padding:18px;
      border-radius:18px;
      border:1px dashed rgba(145,108,70,.28);
      background:rgba(255,255,255,.66);
    }
    .topic-visual-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:12px 0;
      border-bottom:1px solid rgba(228,214,196,.72);
    }
    .topic-visual-row:last-child{border-bottom:0}
    .topic-visual-row span{
      color:var(--muted);
      font-size:.94rem;
    }
    .topic-visual-row b{
      font-size:1rem;
    }

    .scene-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
    }
    .scene-card{
      padding:22px;
      position:relative;
      overflow:hidden;
      transition:transform .22s ease, box-shadow .22s ease;
    }
    .scene-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
    }
    .scene-index{
      display:inline-grid;
      place-items:center;
      width:42px;height:42px;
      border-radius:14px;
      background:linear-gradient(135deg,#1d1814,#47392f);
      color:#fff;
      font-weight:800;
      margin-bottom:16px;
    }
    .scene-card h3{
      margin:0 0 10px;
      font-size:1.06rem;
      font-weight:800;
    }
    .scene-card p{
      margin:0 0 14px;
      color:var(--muted);
      font-size:.96rem;
    }
    .scene-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:8px;
    }
    .scene-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#4d4138;
      font-size:.94rem;
    }
    .scene-list li::before{
      content:"";
      width:7px;height:7px;border-radius:50%;
      background:var(--accent);
      margin-top:9px;
      flex:0 0 auto;
      box-shadow:0 0 0 5px rgba(193,139,76,.12);
    }

    .news-layout{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:24px;
    }
    .news-panel{
      padding:22px;
    }
    .news-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:0;
    }
    .news-item{
      display:grid;
      grid-template-columns:1fr auto;
      gap:16px;
      align-items:center;
      padding:16px 0;
      border-bottom:1px solid var(--border);
    }
    .news-item:first-child{padding-top:0}
    .news-item:last-child{border-bottom:0; padding-bottom:0}
    .news-item a{
      font-weight:700;
      line-height:1.45;
      display:inline-block;
    }
    .news-item p{
      margin:6px 0 0;
      color:var(--muted);
      line-height:1.68;
      font-size:.93rem;
    }
    .news-time{
      color:var(--muted-2);
      font-size:.88rem;
      white-space:nowrap;
    }
    .side-stack{
      display:grid;
      gap:14px;
    }
    .side-box{
      padding:20px;
      border-radius:var(--radius);
      border:1px solid var(--border);
      background:linear-gradient(180deg,#fffaf3,#f8f0e3);
      box-shadow:var(--shadow-soft);
    }
    .side-box h3{
      margin:0 0 12px;
      font-size:1.03rem;
      font-weight:800;
    }
    .side-box p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
      line-height:1.72;
    }
    .mini-stats{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
      margin-top:14px;
    }
    .stat{
      padding:14px;
      border-radius:16px;
      background:#fff;
      border:1px solid var(--border);
    }
    .stat strong{
      display:block;
      font-size:1.22rem;
      line-height:1.2;
      margin-bottom:4px;
    }
    .stat span{
      color:var(--muted);
      font-size:.88rem;
    }
    .link-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }

    .case-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
    }
    .case-card{
      padding:22px;
      height:100%;
      position:relative;
      overflow:hidden;
      transition:transform .22s ease, box-shadow .22s ease;
    }
    .case-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
    }
    .case-card.featured{
      background:
        radial-gradient(circle at top right, rgba(193,139,76,.14), transparent 20%),
        linear-gradient(180deg,#fffdf8,#f8efdf);
      border-color:#dbc7ab;
    }
    .case-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      margin-bottom:16px;
    }
    .case-head h3{
      margin:0;
      font-size:1.06rem;
      font-weight:800;
      line-height:1.45;
    }
    .case-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(193,139,76,.12);
      border:1px solid rgba(193,139,76,.18);
      color:#8d602e;
      font-size:.82rem;
      font-weight:700;
      white-space:nowrap;
    }
    .case-card p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:.95rem;
    }
    .case-footer{
      margin-top:16px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .metric{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 11px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--border);
      font-size:.88rem;
      color:#4f433a;
    }
    .metric b{color:var(--text)}
    .price-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      align-items:stretch;
    }
    .price-card{
      padding:24px;
      position:relative;
      overflow:hidden;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .price-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
    }
    .price-card.recommended{
      background:
        radial-gradient(circle at 84% 18%, rgba(193,139,76,.14), transparent 22%),
        linear-gradient(180deg,#fffaf3,#f7eddc);
      border-color:#d8c1a5;
      box-shadow:0 22px 44px rgba(193,139,76,.12);
    }
    .price-tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(193,139,76,.12);
      color:#8d602e;
      font-size:.84rem;
      font-weight:700;
      margin-bottom:14px;
    }
    .price-card h3{
      margin:0 0 8px;
      font-size:1.12rem;
      font-weight:800;
    }
    .price-card p{
      color:var(--muted);
      margin:0 0 16px;
      line-height:1.72;
      font-size:.95rem;
      min-height:56px;
    }
    .price-value{
      display:flex;
      align-items:flex-end;
      gap:8px;
      margin-bottom:16px;
    }
    .price-value strong{
      font-size:2rem;
      line-height:1;
      font-weight:900;
    }
    .price-value span{
      color:var(--muted);
      padding-bottom:4px;
      font-size:.92rem;
    }
    .price-list{
      list-style:none;
      padding:0;
      margin:0 0 18px;
      display:grid;
      gap:10px;
    }
    .price-list li{
      display:flex;
      gap:10px;
      color:#4f433a;
      line-height:1.6;
      font-size:.95rem;
    }
    .price-list li::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--accent);
      margin-top:8px;
      box-shadow:0 0 0 5px rgba(193,139,76,.12);
      flex:0 0 auto;
    }
    .price-card .btn-hero{
      width:100%;
    }

    .faq-wrap{
      padding:10px 0;
      overflow:hidden;
    }
    .accordion{
      --bs-accordion-bg:transparent;
      --bs-accordion-border-color:transparent;
      --bs-accordion-btn-padding-x:22px;
      --bs-accordion-btn-padding-y:18px;
      --bs-accordion-body-padding-x:22px;
      --bs-accordion-body-padding-y:0 22px 22px;
    }
    .accordion-item{
      background:transparent;
      border-bottom:1px solid var(--border);
    }
    .accordion-item:last-child{border-bottom:0}
    .accordion-button{
      background:transparent;
      color:var(--text);
      box-shadow:none !important;
      font-weight:800;
      font-size:1rem;
      padding-top:18px;
      padding-bottom:18px;
    }
    .accordion-button:not(.collapsed){
      color:var(--accent-2);
      background:transparent;
    }
    .accordion-button::after{
      background-size:1rem;
      filter:grayscale(1) brightness(.45);
    }
    .accordion-body{
      color:var(--muted);
      padding-top:0;
      padding-bottom:18px;
      line-height:1.8;
    }

    .cta-panel{
      padding:26px;
      background:
        radial-gradient(circle at 85% 18%, rgba(193,139,76,.17), transparent 18%),
        linear-gradient(135deg,#1b1714 0%, #26211c 100%);
      color:#f8efe1;
      border-color:rgba(255,255,255,.08);
      box-shadow:0 24px 56px rgba(26,18,10,.18);
    }
    .cta-panel h2{
      margin:0 0 10px;
      font-size:clamp(1.5rem,2.2vw,2.1rem);
      font-weight:900;
      line-height:1.18;
    }
    .cta-panel p{
      margin:0;
      color:rgba(248,241,227,.8);
      max-width:62ch;
    }
    .cta-form{
      margin-top:18px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .cta-form .form-control{
      flex:1 1 320px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.07);
      color:#fff;
      padding:13px 18px;
      box-shadow:none !important;
    }
    .cta-form .form-control::placeholder{color:rgba(247,239,225,.65)}
    .cta-form .form-control:focus{
      border-color:rgba(226,179,116,.65);
      background:rgba(255,255,255,.09);
    }
    .cta-note{
      margin-top:12px;
      color:rgba(248,241,227,.68);
      font-size:.9rem;
    }
    .cta-mini{
      margin-top:16px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    footer{
      margin-top:72px;
      background:linear-gradient(180deg,#1a1714 0%, #141210 100%);
      color:#f2e9dc;
      border-top:1px solid rgba(255,255,255,.06);
    }
    .footer-inner{
      padding:42px 0 24px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr 1fr;
      gap:24px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .footer-brand p{
      margin:0;
      color:rgba(242,233,220,.74);
      max-width:44ch;
      line-height:1.75;
    }
    .footer-title{
      font-size:1.02rem;
      font-weight:800;
      margin-bottom:14px;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      color:rgba(242,233,220,.78);
      width:fit-content;
    }
    .footer-links a:hover{color:#fff}
    .footer-meta{
      display:grid;
      gap:10px;
      color:rgba(242,233,220,.75);
      line-height:1.8;
    }
    .copyright{
      padding:18px 0 24px;
      margin-top:22px;
      border-top:1px solid rgba(255,255,255,.08);
      color:rgba(242,233,220,.64);
      font-size:.92rem;
    }

    .section-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(193,139,76,.22), transparent);
      margin:0;
    }

    .back-to-top{
      position:fixed;
      right:18px;
      bottom:18px;
      width:48px;height:48px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,#d19b57,#b17637);
      color:#fff;
      box-shadow:0 18px 28px rgba(193,139,76,.24);
      border:0;
      z-index:1040;
      opacity:0;
      pointer-events:none;
      transform:translateY(10px);
      transition:all .22s ease;
    }
    .back-to-top.show{
      opacity:1;
      pointer-events:auto;
      transform:translateY(0);
    }

    .btn:focus,
    .form-control:focus,
    .nav-link-chip:focus,
    .btn-hero:focus,
    .tag:focus,
    .back-to-top:focus{
      outline:3px solid rgba(193,139,76,.28);
      outline-offset:2px;
    }

    @media (max-width: 1199.98px){
      .hero-grid,
      .topic-grid,
      .news-layout{
        grid-template-columns:1fr;
      }
      .hero-stage{min-height:auto}
      .video-panel{min-height:390px}
      .nav-search{flex:0 0 300px}
      .footer-grid{grid-template-columns:1fr 1fr}
      .price-grid,
      .case-grid,
      .scene-grid{
        grid-template-columns:repeat(2,1fr);
      }
    }
    @media (max-width: 991.98px){
      .brand-row{
        align-items:flex-start;
        flex-direction:column;
      }
      .trend-line{justify-content:flex-start}
      .nav-inner{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
      }
      .nav-search{
        margin-left:0;
        width:100%;
        flex:1 1 auto;
      }
      .hero-inner{padding:24px}
      .stack-grid{grid-template-columns:1fr}
      .scene-grid,
      .case-grid,
      .price-grid{
        grid-template-columns:1fr;
      }
      .footer-grid{grid-template-columns:1fr}
    }
    @media (max-width: 767.98px){
      .hero{padding-top:20px}
      .hero-shell{border-radius:24px}
      .hero-inner{padding:20px}
      .video-panel{min-height:360px}
      .stage-main{inset:70px 14px 14px 14px}
      .section-pad{padding:56px 0}
      .section-head{margin-bottom:20px}
      .news-item{
        grid-template-columns:1fr;
        gap:6px;
      }
      .news-time{white-space:normal}
      .mini-stats{grid-template-columns:1fr}
      .cta-form .form-control,
      .cta-form .btn-hero{width:100%}
    }
    @media (max-width: 575.98px){
      .brand-name{font-size:1.05rem}
      .brand-sub{font-size:.82rem}
      .nav-link-chip{
        padding:9px 12px;
        font-size:.92rem;
      }
      .hero h1{font-size:clamp(1.9rem,10vw,2.8rem)}
      .hero-lead{font-size:1rem}
      .btn-hero{width:100%}
      .metric-pill{min-width:100%; width:100%}
      .play-float{
        left:14px; top:14px;
        font-size:.92rem;
      }
      .video-panel{min-height:330px}
      .stage-main{
        inset:68px 12px 12px 12px;
      }
      .stage-card h3{font-size:1.22rem}
      .topic-card,
      .feature-card,
      .scene-card,
      .news-panel,
      .case-card,
      .price-card,
      .side-box,
      .cta-panel{
        padding:18px;
      }
    }

/* roulang page: category1 */
:root{
      --bg: #f4efe8;
      --bg-soft: #fbf7f1;
      --surface: #fffdf8;
      --surface-2: #f5ede3;
      --surface-dark: #201711;
      --surface-dark-2: #2d2119;
      --text: #221b15;
      --muted: #6f6154;
      --muted-2: #968575;
      --border: #e5d8c8;
      --border-2: #d8c7b3;
      --accent: #c88b45;
      --accent-2: #9d6b3f;
      --accent-soft: #f4e0be;
      --success: #67986b;
      --warn: #b88a35;
      --shadow: 0 18px 50px rgba(49, 33, 18, .10);
      --shadow-soft: 0 10px 30px rgba(49, 33, 18, .08);
      --radius-lg: 22px;
      --radius-md: 18px;
      --radius-sm: 14px;
      --space-xl: 84px;
      --space-lg: 64px;
      --space-md: 32px;
      --space-sm: 18px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 15% 10%, rgba(200,139,69,.10), transparent 26%),
        radial-gradient(circle at 85% 8%, rgba(157,107,63,.08), transparent 24%),
        linear-gradient(180deg, #f8f3ec 0%, #f4efe8 56%, #efe8dd 100%);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      line-height:1.7;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(200,139,69,.22);color:var(--text)}

    .container-xxl{
      max-width:1320px;
      padding-left:20px;
      padding-right:20px;
    }

    .site-topbar{
      position:sticky;
      top:0;
      z-index:1030;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgba(244,239,232,.86);
      border-bottom:1px solid rgba(229,216,200,.72);
      box-shadow: 0 8px 30px rgba(36, 24, 13, .05);
    }
    .brand-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:14px 0 12px;
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }
    .brand-badge{
      width:44px;
      height:44px;
      border-radius:15px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,0)),
        radial-gradient(circle at 30% 30%, #ffd9a7 0%, #d69d54 52%, #8e6030 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 24px rgba(122, 74, 26, .18);
      position:relative;
      flex:0 0 auto;
    }
    .brand-badge::after{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.35);
    }
    .brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}
    .brand-name{
      font-weight:800;
      letter-spacing:.02em;
      font-size:1.02rem;
      color:#261b13;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-sub{
      font-size:.88rem;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .trend-line{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .trend-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.58);
      border:1px solid rgba(229,216,200,.85);
      color:#5d4f43;
      font-size:.88rem;
      box-shadow:0 8px 18px rgba(53, 33, 18, .04);
    }
    .trend-dot,
    .mini-dot{
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(200,139,69,.14);
      display:inline-block;
      flex:0 0 auto;
    }

    .nav-shell{
      border-top:1px solid rgba(229,216,200,.6);
      background:linear-gradient(180deg, rgba(251,247,241,.95), rgba(248,242,234,.90));
    }
    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:12px 0 14px;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:10px;
      overflow-x:auto;
      scrollbar-width:none;
      -ms-overflow-style:none;
      padding-bottom:2px;
      flex:1 1 auto;
    }
    .nav-links::-webkit-scrollbar{display:none}
    .nav-link-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.75);
      border:1px solid var(--border);
      color:#5c4f43;
      font-weight:600;
      letter-spacing:.01em;
      white-space:nowrap;
      transition:all .22s ease;
    }
    .nav-link-chip:hover,
    .nav-link-chip:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(200,139,69,.45);
      color:#2d2018;
      box-shadow:0 10px 24px rgba(83, 55, 28, .09);
      outline:none;
    }
    .nav-link-chip.active{
      background:linear-gradient(135deg, #2f241a, #4b3728);
      color:#fff6ea;
      border-color:rgba(255,255,255,.08);
      box-shadow:0 14px 28px rgba(35,24,13,.18);
    }
    .nav-search{flex:0 0 360px;max-width:360px;width:100%}
    .search-box{
      display:flex;
      align-items:center;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:999px;
      overflow:hidden;
      box-shadow:0 8px 20px rgba(36, 24, 13, .05);
      transition:all .22s ease;
    }
    .search-box:focus-within{
      border-color:rgba(200,139,69,.55);
      box-shadow:0 10px 28px rgba(200,139,69,.12);
      transform:translateY(-1px);
    }
    .search-box input{
      border:0;
      background:transparent;
      padding:12px 16px;
      min-width:0;
      width:100%;
      color:var(--text);
      outline:none;
    }
    .search-box input::placeholder{color:#9d8e80}
    .search-box button{
      border:0;
      background:linear-gradient(135deg, var(--accent), #d9a25c);
      color:#fff9f1;
      padding:12px 18px;
      font-weight:700;
      transition:all .22s ease;
      white-space:nowrap;
    }
    .search-box button:hover{
      filter:brightness(1.03);
      background:linear-gradient(135deg, #d09243, #e0ac67);
    }

    main{padding:28px 0 0}
    .section-pad{padding:var(--space-lg) 0}
    .section-tight{padding:36px 0}
    .section-title{
      display:flex;
      flex-wrap:wrap;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
      margin-bottom:22px;
    }
    .section-title h2,
    .section-title h3{
      margin:0;
      color:var(--text);
      font-weight:800;
      letter-spacing:.01em;
    }
    .section-title p{
      margin:0;
      color:var(--muted);
      max-width:700px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:.86rem;
      color:var(--accent-2);
      font-weight:700;
      text-transform:none;
      letter-spacing:.02em;
      margin-bottom:12px;
    }
    .eyebrow::before{
      content:"";
      width:18px;
      height:2px;
      border-radius:99px;
      background:linear-gradient(90deg, var(--accent), rgba(200,139,69,.2));
    }

    .hero-section{padding:18px 0 0}
    .hero-panel{
      position:relative;
      overflow:hidden;
      border-radius:30px;
      background:
        radial-gradient(circle at top right, rgba(219,170,96,.28), transparent 26%),
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 20%),
        linear-gradient(135deg, #1c140f 0%, #281b14 42%, #35261c 100%);
      color:#f9f2e8;
      box-shadow:0 28px 70px rgba(27, 18, 12, .22);
      border:1px solid rgba(255,255,255,.08);
    }
    .hero-panel::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(115deg, transparent 0 28%, rgba(255,255,255,.03) 31%, transparent 34%),
        linear-gradient(250deg, transparent 0 35%, rgba(255,255,255,.03) 39%, transparent 44%);
      pointer-events:none;
      opacity:.55;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:30px;
      padding:34px;
      align-items:stretch;
    }
    .hero-copy{
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-width:0;
      padding:8px 0;
    }
    .hero-copy h1{
      margin:0 0 16px;
      font-size:clamp(2.1rem, 4vw, 4rem);
      line-height:1.08;
      font-weight:900;
      letter-spacing:-.03em;
      color:#fff6ea;
    }
    .hero-copy .lead{
      margin:0;
      max-width:680px;
      font-size:1.08rem;
      color:rgba(248,239,225,.83);
    }
    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin:24px 0;
    }
    .stat-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:11px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.08);
      color:#f7ecdd;
      font-size:.95rem;
    }
    .stat-pill strong{font-size:1rem;color:#fff8ee}
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:6px;
    }
    .btn-accent,
    .btn-ghost,
    .btn-soft{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:999px;
      padding:12px 18px;
      font-weight:700;
      letter-spacing:.01em;
      transition:all .22s ease;
      border:1px solid transparent;
      cursor:pointer;
      text-decoration:none;
    }
    .btn-accent{
      background:linear-gradient(135deg, #d49a4d, #ebb874);
      color:#fff8ef;
      box-shadow:0 16px 30px rgba(212,154,77,.28);
    }
    .btn-accent:hover{
      transform:translateY(-2px);
      color:#fff;
      box-shadow:0 18px 36px rgba(212,154,77,.32);
    }
    .btn-ghost{
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.14);
      color:#fff5e8;
    }
    .btn-ghost:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.09);
      color:#fff;
    }
    .btn-soft{
      background:rgba(255,255,255,.9);
      border-color:rgba(255,255,255,.15);
      color:#2c2019;
    }
    .btn-soft:hover{
      transform:translateY(-2px);
      color:#1d140f;
      box-shadow:0 16px 32px rgba(22, 14, 8, .18);
    }

    .hero-aside{
      display:grid;
      grid-template-rows: 1.2fr .7fr .7fr;
      gap:14px;
      min-height:100%;
    }
    .hero-feature,
    .hero-mini{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      padding:20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
        rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    .hero-feature{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:260px;
      background:
        radial-gradient(circle at top right, rgba(255,207,137,.20), transparent 28%),
        linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    }
    .hero-feature .tag,
    .hero-mini .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:max-content;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.09);
      color:#ffedd7;
      border:1px solid rgba(255,255,255,.08);
      font-size:.82rem;
      font-weight:700;
    }
    .hero-feature h5,
    .hero-mini h6{
      margin:14px 0 8px;
      color:#fff8ef;
      font-weight:800;
      letter-spacing:.01em;
    }
    .hero-feature p,
    .hero-mini p{
      margin:0;
      color:rgba(247,235,221,.78);
      font-size:.95rem;
    }
    .hero-figure{
      margin-top:18px;
      display:flex;
      align-items:flex-end;
      gap:12px;
      flex-wrap:wrap;
    }
    .hero-signal{
      flex:1 1 160px;
      border-radius:18px;
      padding:14px 16px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
    }
    .hero-signal small{
      display:block;
      color:rgba(247,235,221,.64);
      margin-bottom:4px;
    }
    .hero-signal strong{
      display:block;
      color:#fff9f1;
      font-size:1.02rem;
    }
    .hero-mini{
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:112px;
    }
    .hero-mini .mini-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .hero-mini .num{
      font-size:1.6rem;
      line-height:1;
      color:#fff9f1;
      font-weight:900;
    }

    .section-panel{
      margin-top:28px;
      background:rgba(255,253,248,.82);
      border:1px solid rgba(229,216,200,.78);
      border-radius:28px;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .toolbar{
      padding:18px 20px;
      border-bottom:1px solid rgba(229,216,200,.78);
      background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(250,245,238,.92));
    }
    .crumbs{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      font-size:.92rem;
      color:var(--muted);
    }
    .crumbs a{
      color:var(--muted);
      transition:color .2s ease;
    }
    .crumbs a:hover{color:var(--text)}
    .crumbs span.sep{color:#b9ab9a}
    .filter-row{
      margin-top:16px;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:14px;
      align-items:center;
    }
    .mini-search{
      display:flex;
      align-items:center;
      background:#fff;
      border:1px solid var(--border);
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 10px 22px rgba(34, 23, 15, .05);
    }
    .mini-search input{
      border:0;
      background:transparent;
      padding:14px 16px;
      min-width:0;
      width:100%;
      outline:none;
      color:var(--text);
    }
    .mini-search input::placeholder{color:#a39282}
    .mini-search button{
      border:0;
      background:#2f241b;
      color:#fff6eb;
      padding:14px 18px;
      font-weight:700;
      white-space:nowrap;
      transition:all .2s ease;
    }
    .mini-search button:hover{background:#433126}
    .sort-group{
      display:flex;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
    }
    .sort-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--border);
      color:#5b4e42;
      font-weight:700;
      transition:all .2s ease;
    }
    .sort-chip:hover,
    .sort-chip:focus-visible{
      border-color:rgba(200,139,69,.44);
      box-shadow:0 10px 18px rgba(49, 33, 18, .06);
      transform:translateY(-1px);
      outline:none;
    }
    .sort-chip.active{
      background:linear-gradient(135deg, #35261d, #5b4130);
      border-color:transparent;
      color:#fff6ea;
      box-shadow:0 14px 28px rgba(35,23,15,.14);
    }
    .filter-tags{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:16px;
    }
    .filter-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 13px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--border);
      color:#66584c;
      font-size:.92rem;
      transition:all .22s ease;
      cursor:pointer;
      user-select:none;
    }
    .filter-chip:hover,
    .filter-chip:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(200,139,69,.5);
      box-shadow:0 10px 18px rgba(49,33,18,.05);
      outline:none;
    }
    .filter-chip.active{
      background:rgba(200,139,69,.12);
      border-color:rgba(200,139,69,.5);
      color:#3a2819;
      font-weight:700;
    }

    .mix-panel{
      padding:22px 20px 0;
    }
    .spotlight-grid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap:16px;
    }
    .spotlight-main,
    .spotlight-side{
      border-radius:24px;
      background:var(--surface);
      border:1px solid var(--border);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .spotlight-main{
      padding:20px;
      display:grid;
      grid-template-columns: 1fr 1.1fr;
      gap:18px;
      align-items:center;
      min-height:320px;
    }
    .spotlight-visual{
      min-height:260px;
      border-radius:20px;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.36), transparent 22%),
        linear-gradient(145deg, #453225 0%, #6e4d32 44%, #d19b56 100%);
    }
    .spotlight-visual::before,
    .spotlight-visual::after{
      content:"";
      position:absolute;
      border-radius:50%;
      background:rgba(255,255,255,.15);
      filter:blur(2px);
    }
    .spotlight-visual::before{width:150px;height:150px;left:-35px;top:-20px}
    .spotlight-visual::after{width:90px;height:90px;right:24px;bottom:24px}
    .spotlight-body .badge{
      display:inline-flex;
      width:max-content;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(200,139,69,.12);
      color:#8b5b2f;
      border:1px solid rgba(200,139,69,.22);
      font-weight:700;
    }
    .spotlight-body h3{
      margin:14px 0 10px;
      font-size:1.6rem;
      line-height:1.2;
      font-weight:900;
      color:#2b2018;
    }
    .spotlight-body p{
      margin:0 0 16px;
      color:var(--muted);
    }
    .spotlight-stats{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .pill-light{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      background:#f9f4ed;
      color:#5f5044;
      border:1px solid var(--border);
      font-size:.9rem;
    }

    .spotlight-side{
      padding:18px;
      display:grid;
      gap:14px;
    }
    .side-card{
      border-radius:18px;
      padding:16px;
      background:linear-gradient(180deg, #fff, #fbf7f1);
      border:1px solid var(--border);
      display:flex;
      flex-direction:column;
      gap:10px;
      min-height:140px;
    }
    .side-card strong{
      color:#2b2018;
      font-size:1.04rem;
    }
    .side-card p{
      margin:0;
      color:var(--muted);
      font-size:.93rem;
    }
    .side-stats{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .mini-stat{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--border);
      color:#6a5a4c;
      font-size:.84rem;
      white-space:nowrap;
    }

    .content-wrap{
      padding:28px 20px 22px;
    }
    .content-layout{
      display:grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap:20px;
      align-items:start;
    }
    .card-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:16px;
    }
    .content-card{
      position:relative;
      overflow:hidden;
      border-radius:22px;
      border:1px solid var(--border);
      background:var(--surface);
      box-shadow:var(--shadow-soft);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      height:100%;
    }
    .content-card:hover{
      transform:translateY(-4px);
      border-color:rgba(200,139,69,.35);
      box-shadow:0 18px 40px rgba(43, 28, 18, .12);
    }
    .content-card .thumb{
      position:relative;
      min-height:170px;
      overflow:hidden;
      background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.34), transparent 20%),
        linear-gradient(135deg, #f0e2cf 0%, #d8ae74 38%, #775037 100%);
    }
    .content-card .thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.18) 0 18%, transparent 22%),
        linear-gradient(180deg, rgba(18,13,9,.02), rgba(18,13,9,.18));
    }
    .content-card .thumb-label{
      position:absolute;
      left:16px;
      bottom:16px;
      z-index:1;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 11px;
      border-radius:999px;
      background:rgba(27,19,14,.56);
      color:#fff7ec;
      border:1px solid rgba(255,255,255,.12);
      font-size:.84rem;
      backdrop-filter: blur(8px);
    }
    .content-card .body{
      padding:18px 18px 16px;
    }
    .content-card .meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:12px;
    }
    .meta-pill{
      display:inline-flex;
      align-items:center;
      padding:5px 9px;
      border-radius:999px;
      background:#f8f2ea;
      border:1px solid var(--border);
      color:#6b5b4d;
      font-size:.8rem;
      white-space:nowrap;
    }
    .content-card h4{
      margin:0 0 10px;
      font-size:1.12rem;
      line-height:1.38;
      font-weight:800;
      color:#2a1f18;
    }
    .content-card p{
      margin:0 0 14px;
      color:var(--muted);
      font-size:.95rem;
      line-height:1.72;
    }
    .content-card .foot{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      padding-top:12px;
      border-top:1px solid rgba(229,216,200,.82);
      color:#7e6d5f;
      font-size:.88rem;
    }
    .link-soft{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#8b5b2f;
      font-weight:700;
    }
    .link-soft:hover{color:#6f4622}

    .sidebar{
      display:grid;
      gap:16px;
      position:sticky;
      top:148px;
    }
    .side-box{
      border-radius:22px;
      background:var(--surface);
      border:1px solid var(--border);
      box-shadow:var(--shadow-soft);
      padding:18px;
    }
    .side-box h5{
      margin:0 0 12px;
      font-size:1.02rem;
      font-weight:800;
      color:#2b2018;
    }
    .side-box p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .tag-cloud .tag{
      display:inline-flex;
      align-items:center;
      padding:8px 11px;
      border-radius:999px;
      background:#f8f2ea;
      border:1px solid var(--border);
      color:#69594c;
      font-size:.88rem;
      transition:all .2s ease;
    }
    .tag-cloud .tag:hover{
      transform:translateY(-1px);
      border-color:rgba(200,139,69,.42);
      box-shadow:0 10px 18px rgba(49,33,18,.05);
    }
    .info-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:12px;
    }
    .info-list li{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:12px 0 0;
      border-top:1px solid rgba(229,216,200,.75);
    }
    .info-list li:first-child{border-top:0;padding-top:0}
    .info-list .ico{
      width:34px;
      height:34px;
      flex:0 0 auto;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:rgba(200,139,69,.12);
      color:#8d5a2e;
    }
    .info-list strong{
      display:block;
      color:#2b2018;
      margin-bottom:2px;
    }
    .info-list span{
      display:block;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.6;
    }

    .pager-wrap{
      margin-top:20px;
      padding:0 20px 24px;
    }
    .pager-box{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      padding:18px 20px;
      border-radius:22px;
      background:linear-gradient(180deg, #fff, #fbf6ef);
      border:1px solid var(--border);
      box-shadow:var(--shadow-soft);
    }
    .pager-box .note{
      color:var(--muted);
      font-size:.94rem;
    }
    .pager{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .pager a,
    .pager span{
      min-width:42px;
      height:42px;
      padding:0 12px;
      border-radius:12px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      border:1px solid var(--border);
      color:#6a5b4c;
      font-weight:700;
      transition:all .2s ease;
    }
    .pager a:hover{
      transform:translateY(-1px);
      border-color:rgba(200,139,69,.42);
      color:#2b2018;
      box-shadow:0 10px 20px rgba(49,33,18,.05);
    }
    .pager .current{
      background:linear-gradient(135deg, #2f241b, #5a4130);
      color:#fff8ee;
      border-color:transparent;
    }

    .faq-block{
      padding:0 20px 20px;
    }
    .faq-panel{
      border-radius:24px;
      border:1px solid var(--border);
      overflow:hidden;
      background:var(--surface);
      box-shadow:var(--shadow-soft);
    }
    .accordion-item{
      border:0;
      border-top:1px solid rgba(229,216,200,.72);
      background:transparent;
    }
    .accordion-item:first-child{border-top:0}
    .accordion-button{
      background:transparent;
      box-shadow:none;
      padding:18px 18px;
      font-weight:800;
      color:#2b2018;
    }
    .accordion-button:not(.collapsed){
      background:rgba(200,139,69,.08);
      color:#2b2018;
    }
    .accordion-button:focus{
      border-color:rgba(200,139,69,.42);
      box-shadow:0 0 0 .22rem rgba(200,139,69,.13);
    }
    .accordion-body{
      padding:0 18px 18px;
      color:var(--muted);
    }

    .cta-block{
      padding:0 20px 34px;
    }
    .cta-panel{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,207,137,.18), transparent 18%),
        radial-gradient(circle at 90% 25%, rgba(255,255,255,.08), transparent 16%),
        linear-gradient(135deg, #221913 0%, #38271d 60%, #1f1610 100%);
      color:#fff6ea;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 26px 60px rgba(29,20,14,.20);
      padding:28px;
    }
    .cta-panel h3{
      margin:0 0 12px;
      font-weight:900;
      font-size:clamp(1.5rem, 2.2vw, 2.2rem);
      color:#fff7ec;
    }
    .cta-panel p{
      margin:0;
      max-width:720px;
      color:rgba(247,235,221,.82);
    }
    .cta-panel .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:20px;
    }

    footer{
      margin-top:8px;
      padding:32px 0 26px;
      background:linear-gradient(180deg, #1e1611 0%, #17110d 100%);
      color:#f3e7d8;
      border-top:1px solid rgba(255,255,255,.05);
    }
    .footer-inner{padding-top:2px}
    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr .8fr .9fr;
      gap:24px;
      align-items:start;
      padding-bottom:18px;
    }
    .footer-brand p{
      margin:14px 0 0;
      color:rgba(242,233,220,.74);
      max-width:380px;
    }
    .footer-title{
      font-weight:800;
      margin-bottom:14px;
      color:#fff3e3;
      letter-spacing:.02em;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      color:rgba(242,233,220,.78);
      transition:color .2s ease, transform .2s ease;
    }
    .footer-links a:hover{
      color:#fff7ea;
      transform:translateX(2px);
    }
    .footer-meta{
      display:grid;
      gap:10px;
      color:rgba(242,233,220,.72);
      font-size:.95rem;
    }
    .copyright{
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      color:rgba(242,233,220,.60);
      font-size:.92rem;
    }

    .icon-circle{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:rgba(200,139,69,.12);
      color:#8b5b2f;
      flex:0 0 auto;
    }
    .mini-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
    }
    .mini-card{
      padding:16px;
      border-radius:18px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow:0 10px 24px rgba(45, 30, 18, .05);
      min-height:110px;
    }
    .mini-card strong{
      display:block;
      color:#2b2018;
      margin:10px 0 6px;
    }
    .mini-card span{
      color:var(--muted);
      font-size:.9rem;
    }

    .top-note{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:16px;
    }
    .top-note .badge-soft{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(200,139,69,.12);
      color:#83562b;
      font-weight:700;
      border:1px solid rgba(200,139,69,.18);
    }
    .top-note small{
      color:var(--muted);
    }

    .accordion{
      --bs-accordion-border-color: transparent;
      --bs-accordion-btn-icon-width: 1rem;
    }

    .focus-ring:focus-visible{
      outline:none;
      box-shadow:0 0 0 .24rem rgba(200,139,69,.18);
    }

    @media (max-width: 1199.98px){
      .hero-grid{grid-template-columns:1fr}
      .hero-aside{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;min-height:auto}
      .spotlight-grid{grid-template-columns:1fr}
      .content-layout{grid-template-columns:1fr}
      .sidebar{position:static}
    }

    @media (max-width: 991.98px){
      .nav-inner{flex-direction:column;align-items:stretch}
      .nav-search{flex:1 1 auto;max-width:none}
      .filter-row{grid-template-columns:1fr}
      .sort-group{justify-content:flex-start}
      .spotlight-main{grid-template-columns:1fr}
      .hero-aside{grid-template-columns:1fr}
      .card-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }

    @media (max-width: 767.98px){
      .brand-row{
        flex-direction:column;
        align-items:flex-start;
      }
      .trend-line{justify-content:flex-start}
      .hero-grid{padding:22px}
      .hero-copy h1{font-size:clamp(1.85rem, 8vw, 2.8rem)}
      .section-pad{padding:44px 0}
      .section-title{align-items:flex-start}
      .mini-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .pager-box{flex-direction:column;align-items:flex-start}
      .cta-panel{padding:22px}
      .content-wrap,.mix-panel,.pager-wrap,.faq-block,.cta-block{padding-left:14px;padding-right:14px}
      .toolbar{padding-left:14px;padding-right:14px}
    }

    @media (max-width: 575.98px){
      .container-xxl{padding-left:14px;padding-right:14px}
      .hero-panel{border-radius:24px}
      .hero-grid{gap:18px;padding:18px}
      .hero-feature,.hero-mini{border-radius:20px}
      .section-panel,.spotlight-main,.spotlight-side,.side-box,.content-card,.faq-panel,.pager-box{border-radius:20px}
      .nav-link-chip,.search-box input,.search-box button,.filter-chip,.sort-chip,.btn-accent,.btn-ghost,.btn-soft{padding-top:10px;padding-bottom:10px}
      .search-box button{padding-left:14px;padding-right:14px}
      .content-card .body{padding:16px}
      .spotlight-main{padding:16px}
      .spotlight-side{padding:16px}
      .toolbar{padding-top:16px;padding-bottom:16px}
      .hero-actions,.cta-panel .cta-actions{width:100%}
      .hero-actions .btn-accent,
      .hero-actions .btn-ghost,
      .cta-panel .btn-accent,
      .cta-panel .btn-ghost{
        width:100%;
      }
    }

/* roulang page: category2 */
:root{
      --bg: #12100f;
      --bg-soft: #1a1715;
      --surface: #f4ede2;
      --surface-2: #efe5d7;
      --paper: #fbf7f0;
      --text: #181312;
      --muted: #6e6258;
      --line: rgba(110,98,88,.18);
      --line-strong: rgba(110,98,88,.28);
      --gold: #c89b5a;
      --gold-2: #e0b874;
      --copper: #a86f45;
      --deep: #151110;
      --shadow: 0 16px 40px rgba(21,17,16,.10);
      --shadow-soft: 0 10px 28px rgba(21,17,16,.08);
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --container: 1280px;
      --ease: all .25s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 20% 15%, rgba(200,155,90,.10), transparent 30%),
        radial-gradient(circle at 80% 0%, rgba(168,111,69,.12), transparent 24%),
        linear-gradient(180deg, #f6f0e6 0%, #f3ede4 24%, #f7f3eb 100%);
      font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,0) 22%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.15), transparent 22%),
        linear-gradient(transparent 0, transparent 96%, rgba(24,19,18,.03) 100%);
      mix-blend-mode:soft-light;
      opacity:.8;
      z-index:0;
    }
    a{text-decoration:none;color:inherit;transition:var(--ease)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(200,155,90,.24);color:#1a1412}
    .container-xxl{position:relative;z-index:1}
    .site-topbar{
      position:sticky;
      top:0;
      z-index:1030;
      backdrop-filter: blur(18px);
      background: rgba(245,239,229,.82);
      border-bottom:1px solid rgba(110,98,88,.14);
      box-shadow: 0 1px 0 rgba(255,255,255,.45) inset;
    }
    .brand-row{
      min-height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.85rem 0;
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.8rem;
      min-width:0;
    }
    .brand-badge{
      width:44px;height:44px;border-radius:14px;
      background:
        linear-gradient(135deg, rgba(248,239,225,1), rgba(200,155,90,.88));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px rgba(168,111,69,.16);
      position:relative;
      flex:0 0 auto;
    }
    .brand-badge::before,
    .brand-badge::after{
      content:"";
      position:absolute;
      inset:11px;
      border-radius:10px;
      border:1px solid rgba(21,17,16,.16);
    }
    .brand-badge::after{
      inset:15px;
      border-radius:8px;
      background:linear-gradient(135deg, rgba(21,17,16,.2), rgba(21,17,16,0));
    }
    .brand-text{display:flex;flex-direction:column;min-width:0}
    .brand-name{
      font-size:1.08rem;
      font-weight:800;
      letter-spacing:.02em;
      color:#1b1513;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-sub{
      font-size:.86rem;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .trend-line{
      display:flex;
      align-items:center;
      gap:.6rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .trend-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.5rem .84rem;
      border-radius:999px;
      border:1px solid rgba(110,98,88,.14);
      background:rgba(255,255,255,.45);
      color:#3a2d27;
      font-size:.88rem;
      box-shadow: 0 4px 14px rgba(21,17,16,.04);
    }
    .trend-dot,
    .mini-dot{
      width:8px;height:8px;border-radius:50%;
      background:linear-gradient(135deg,var(--gold),var(--copper));
      box-shadow:0 0 0 4px rgba(200,155,90,.12);
      display:inline-block;
      flex:0 0 auto;
    }
    .nav-shell{
      border-top:1px solid rgba(110,98,88,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
    }
    .nav-inner{
      min-height:60px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.7rem 0;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:.65rem;
      flex-wrap:wrap;
      overflow-x:auto;
      scrollbar-width:none;
    }
    .nav-links::-webkit-scrollbar{display:none}
    .nav-link-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.62rem .96rem;
      border-radius:999px;
      border:1px solid rgba(110,98,88,.18);
      color:#2d221d;
      background:rgba(255,255,255,.58);
      font-weight:600;
      white-space:nowrap;
      box-shadow:0 4px 16px rgba(21,17,16,.04);
    }
    .nav-link-chip:hover,
    .nav-link-chip:focus-visible{
      color:#13100f;
      border-color:rgba(200,155,90,.42);
      transform:translateY(-1px);
      box-shadow:0 10px 18px rgba(21,17,16,.08);
      outline:none;
    }
    .nav-link-chip.active{
      background:linear-gradient(135deg, #1b1614, #2a221d);
      color:#f6ebde;
      border-color:#1b1614;
      box-shadow:0 10px 22px rgba(21,17,16,.18);
    }
    .nav-link-chip.active .mini-dot{background:linear-gradient(135deg,#f0d9b4,#c89b5a);box-shadow:0 0 0 4px rgba(200,155,90,.2)}
    .nav-search{
      flex:0 0 340px;
      max-width:100%;
    }
    .search-box{
      display:flex;
      gap:.55rem;
      padding:.38rem;
      border-radius:999px;
      background:rgba(255,255,255,.74);
      border:1px solid rgba(110,98,88,.16);
      box-shadow:0 8px 24px rgba(21,17,16,.06);
    }
    .search-box input{
      flex:1;
      border:none;
      background:transparent;
      padding:.62rem .95rem;
      color:#1c1512;
      min-width:0;
    }
    .search-box input::placeholder{color:#8a7e73}
    .search-box input:focus{outline:none}
    .search-box button,
    .btn-soft,
    .btn-gold{
      border:none;
      border-radius:999px;
      padding:.62rem 1rem;
      font-weight:700;
      transition:var(--ease);
    }
    .search-box button{
      background:linear-gradient(135deg,var(--deep),#2a221d);
      color:#fff8ef;
      box-shadow:0 10px 22px rgba(21,17,16,.14);
    }
    .search-box button:hover,
    .search-box button:focus-visible{
      transform:translateY(-1px);
      background:linear-gradient(135deg,#221b18,#362c24);
      outline:none;
    }
    .page-wrap{padding:1.25rem 0 3rem}
    .hero{
      position:relative;
      padding:1.35rem 0 2rem;
    }
    .hero-shell{
      display:grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap:1.5rem;
      align-items:stretch;
    }
    .hero-copy{
      padding:1.2rem 0 1rem;
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:520px;
    }
    .crumbs{
      display:flex;
      align-items:center;
      gap:.5rem;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:.92rem;
      margin-bottom:1rem;
    }
    .crumbs a{color:#4e4137}
    .crumbs a:hover{color:#1a1412}
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      width:fit-content;
      padding:.42rem .8rem;
      border-radius:999px;
      background:rgba(200,155,90,.12);
      color:#81572f;
      border:1px solid rgba(200,155,90,.22);
      font-weight:700;
      margin-bottom:1rem;
    }
    .hero h1{
      font-size:clamp(2.4rem, 4vw, 4.6rem);
      line-height:1.02;
      letter-spacing:.01em;
      margin:0 0 1rem;
      font-weight:900;
      color:#1a1412;
    }
    .hero-lead{
      font-size:1.08rem;
      color:#4a3f36;
      max-width:42rem;
      margin-bottom:1.25rem;
    }
    .hero-kpis{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:.85rem;
      margin:1.4rem 0 1.5rem;
    }
    .kpi-card{
      background:rgba(255,255,255,.66);
      border:1px solid rgba(110,98,88,.14);
      border-radius:18px;
      padding:1rem;
      box-shadow:var(--shadow-soft);
    }
    .kpi-value{
      font-size:1.6rem;
      font-weight:900;
      color:#1c1512;
      line-height:1.1;
    }
    .kpi-label{
      color:var(--muted);
      font-size:.9rem;
      margin-top:.25rem;
    }
    .hero-actions{
      display:flex;
      gap:.8rem;
      flex-wrap:wrap;
      margin-top:.25rem;
    }
    .btn-gold{
      background:linear-gradient(135deg,var(--gold),#d8b06a);
      color:#201915;
      box-shadow:0 12px 26px rgba(200,155,90,.22);
      border:1px solid rgba(168,111,69,.12);
    }
    .btn-gold:hover,
    .btn-gold:focus-visible{
      background:linear-gradient(135deg,#d2aa66,#e4bf83);
      transform:translateY(-1px);
      outline:none;
      color:#17100f;
    }
    .btn-soft{
      background:rgba(255,255,255,.76);
      color:#2a211d;
      border:1px solid rgba(110,98,88,.18);
      box-shadow:0 8px 18px rgba(21,17,16,.06);
    }
    .btn-soft:hover,
    .btn-soft:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(200,155,90,.36);
      outline:none;
    }
    .hero-visual{
      position:relative;
      min-height:520px;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:1rem;
      align-items:stretch;
    }
    .cover-card,
    .info-stack .mini-card,
    .topic-panel,
    .content-card,
    .plan-card,
    .faq-wrap .accordion-item,
    .section-card,
    .side-box{
      border-radius:var(--radius-lg);
      border:1px solid rgba(110,98,88,.16);
      background:rgba(255,255,255,.68);
      box-shadow:var(--shadow-soft);
    }
    .cover-card{
      position:relative;
      overflow:hidden;
      padding:1.2rem;
      background:
        linear-gradient(145deg, rgba(20,17,16,.98), rgba(42,34,29,.96)),
        radial-gradient(circle at 80% 20%, rgba(200,155,90,.35), transparent 25%),
        radial-gradient(circle at 25% 80%, rgba(255,255,255,.10), transparent 28%);
      color:#f8efe1;
      min-height:100%;
    }
    .cover-card::before{
      content:"";
      position:absolute;
      inset:-20% -30% auto auto;
      width:280px;height:280px;border-radius:50%;
      background:radial-gradient(circle, rgba(200,155,90,.28), transparent 62%);
      filter:blur(6px);
    }
    .cover-card::after{
      content:"";
      position:absolute;
      inset:auto -15% -12% auto;
      width:240px;height:240px;
      background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0));
      transform:rotate(25deg);
      filter:blur(10px);
    }
    .cover-visual{
      position:relative;
      height:100%;
      min-height:484px;
      border-radius:calc(var(--radius-lg) - 6px);
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(22,17,16,.12), rgba(22,17,16,.54)),
        radial-gradient(circle at 20% 25%, rgba(248,239,225,.24), transparent 18%),
        radial-gradient(circle at 70% 30%, rgba(200,155,90,.35), transparent 22%),
        linear-gradient(135deg, #201816 0%, #312722 42%, #8a653f 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    }
    .cover-visual::before,
    .cover-visual::after{
      content:"";
      position:absolute;
      inset:auto;
      border-radius:999px;
      background:rgba(248,239,225,.14);
      filter:blur(2px);
    }
    .cover-visual::before{
      width:180px;height:180px;left:-20px;top:28px;
      box-shadow: 240px 160px 0 44px rgba(248,239,225,.05), 330px 34px 0 18px rgba(200,155,90,.16);
    }
    .cover-visual::after{
      width:160px;height:160px;right:20px;bottom:32px;
      box-shadow: -200px -140px 0 56px rgba(248,239,225,.05), -300px 0 0 24px rgba(200,155,90,.16);
    }
    .cover-overlay{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:1.2rem;
    }
    .cover-topline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      color:#f8efe1;
    }
    .cover-tag{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      width:fit-content;
      padding:.42rem .72rem;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.12);
      font-size:.88rem;
    }
    .cover-stats{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:.6rem;
    }
    .cover-stat{
      padding:.82rem .9rem;
      border-radius:16px;
      background:rgba(255,255,255,.11);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
    }
    .cover-stat strong{
      display:block;
      font-size:1.18rem;
      line-height:1.1;
      margin-bottom:.2rem;
    }
    .cover-stat span{
      font-size:.84rem;
      color:rgba(248,239,225,.76);
    }
    .info-stack{
      display:grid;
      gap:1rem;
      min-height:100%;
    }
    .info-stack .mini-card{
      padding:1rem;
      background:rgba(255,255,255,.68);
      position:relative;
      overflow:hidden;
    }
    .mini-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      margin-bottom:.8rem;
    }
    .mini-title{
      font-weight:800;
      color:#1a1412;
    }
    .mini-pill{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.3rem .62rem;
      border-radius:999px;
      background:rgba(200,155,90,.12);
      color:#855d31;
      font-size:.82rem;
      border:1px solid rgba(200,155,90,.18);
    }
    .mini-card p{
      margin:0;
      color:#4f443d;
      font-size:.95rem;
    }
    .stat-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.7rem;
    }
    .stat-list li{
      display:flex;
      align-items:flex-start;
      gap:.7rem;
      padding:.66rem .75rem;
      border-radius:14px;
      background:rgba(244,237,226,.62);
      border:1px solid rgba(110,98,88,.10);
    }
    .stat-list i{
      color:#b47d43;
      margin-top:.2rem;
    }
    .section{
      padding:1rem 0 2rem;
    }
    .section-heading{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .section-title{
      margin:0;
      font-size:1.6rem;
      font-weight:900;
      color:#1b1412;
      line-height:1.2;
    }
    .section-desc{
      margin:.35rem 0 0;
      color:var(--muted);
      max-width:56rem;
    }
    .section-card{
      padding:1rem;
      background:rgba(255,255,255,.7);
    }
    .toolbar{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:.7rem;
      justify-content:space-between;
    }
    .chip-group{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .filter-chip{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      padding:.52rem .84rem;
      border-radius:999px;
      border:1px solid rgba(110,98,88,.16);
      background:rgba(255,255,255,.82);
      color:#2c231f;
      font-weight:600;
      font-size:.92rem;
      cursor:pointer;
      transition:var(--ease);
    }
    .filter-chip:hover,
    .filter-chip:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(200,155,90,.36);
      outline:none;
    }
    .filter-chip.active{
      background:linear-gradient(135deg,#1b1614,#2b231d);
      color:#f7edde;
      border-color:#1b1614;
      box-shadow:0 10px 18px rgba(21,17,16,.12);
    }
    .sort-group{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
    }
    .sort-btn{
      padding:.5rem .82rem;
      border-radius:999px;
      border:1px solid rgba(110,98,88,.16);
      background:#fff;
      color:#3a2d27;
      font-weight:600;
      cursor:pointer;
      transition:var(--ease);
    }
    .sort-btn:hover,
    .sort-btn:focus-visible,
    .sort-btn.active{
      background:#f4eadb;
      border-color:rgba(200,155,90,.34);
      outline:none;
    }
    .main-grid{
      display:grid;
      grid-template-columns: minmax(0, 1fr) 336px;
      gap:1.25rem;
      align-items:start;
    }
    .feature-grid{
      display:grid;
      grid-template-columns: repeat(12, minmax(0,1fr));
      gap:1rem;
    }
    .topic-panel{
      padding:1rem;
      overflow:hidden;
    }
    .topic-cover{
      min-height:220px;
      border-radius:18px;
      background:
        linear-gradient(145deg, rgba(20,17,16,.96), rgba(52,42,35,.88)),
        radial-gradient(circle at 18% 20%, rgba(248,239,225,.18), transparent 18%),
        radial-gradient(circle at 76% 28%, rgba(200,155,90,.28), transparent 24%);
      color:#f8efe1;
      position:relative;
      padding:1rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
    }
    .topic-cover .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      width:fit-content;
      padding:.36rem .68rem;
      border-radius:999px;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.12);
      font-size:.85rem;
    }
    .topic-cover h2{
      margin:.7rem 0 .4rem;
      font-weight:900;
      font-size:1.45rem;
    }
    .topic-cover p{
      margin:0;
      color:rgba(248,239,225,.84);
      max-width:34rem;
    }
    .topic-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:1rem;
    }
    .topic-tags .tag{
      padding:.38rem .68rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.15);
      background:rgba(255,255,255,.08);
      color:#f7ead8;
      font-size:.84rem;
    }
    .content-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:1rem;
    }
    .content-card{
      overflow:hidden;
      background:rgba(255,255,255,.74);
      height:100%;
      transition:var(--ease);
    }
    .content-card:hover{
      transform:translateY(-3px);
      box-shadow:0 16px 34px rgba(21,17,16,.10);
    }
    .content-media{
      height:170px;
      background:
        linear-gradient(135deg, rgba(24,20,18,.92), rgba(78,60,46,.76)),
        radial-gradient(circle at 18% 24%, rgba(248,239,225,.18), transparent 16%),
        radial-gradient(circle at 78% 18%, rgba(200,155,90,.32), transparent 20%),
        linear-gradient(145deg, #2c221d, #8d6740);
      position:relative;
      overflow:hidden;
    }
    .content-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.06), transparent 35%),
        linear-gradient(180deg, transparent 48%, rgba(21,17,16,.22) 100%);
    }
    .content-badge{
      position:absolute;
      top:14px;
      left:14px;
      z-index:1;
      padding:.34rem .6rem;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      color:#fff8ef;
      border:1px solid rgba(255,255,255,.14);
      font-size:.82rem;
    }
    .content-body{
      padding:1rem 1rem 1.1rem;
    }
    .content-body h3{
      font-size:1.05rem;
      font-weight:800;
      margin:0 0 .45rem;
      color:#1b1412;
      line-height:1.35;
    }
    .content-body p{
      margin:0;
      color:#5b4d43;
      font-size:.95rem;
    }
    .meta-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      margin-top:.85rem;
      padding-top:.75rem;
      border-top:1px solid rgba(110,98,88,.12);
      color:#78695f;
      font-size:.84rem;
    }
    .meta-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem;
      margin-top:.75rem;
    }
    .meta-tags span{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      padding:.28rem .55rem;
      border-radius:999px;
      background:#f6efe4;
      border:1px solid rgba(110,98,88,.10);
      font-size:.8rem;
      color:#6b5d53;
    }
    .featured-card{
      grid-column:span 2;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:1rem;
    }
    .featured-card .content-media{
      height:100%;
      min-height:240px;
    }
    .feature-notes{
      display:grid;
      gap:.8rem;
    }
    .note-line{
      display:flex;
      align-items:flex-start;
      gap:.65rem;
      padding:.78rem .85rem;
      border-radius:16px;
      background:rgba(244,237,226,.66);
      border:1px solid rgba(110,98,88,.10);
    }
    .note-line i{color:#b47d43;margin-top:.2rem}
    .note-line strong{display:block;margin-bottom:.15rem;color:#1a1412}
    .note-line span{color:#5d4e44;font-size:.93rem}
    .side-box{
      padding:1rem;
      position:sticky;
      top:150px;
    }
    .side-box + .side-box{margin-top:1rem}
    .side-title{
      font-size:1.03rem;
      font-weight:900;
      color:#1a1412;
      margin:0 0 .9rem;
    }
    .rank-list{
      display:grid;
      gap:.65rem;
    }
    .rank-item{
      display:flex;
      gap:.7rem;
      padding:.72rem .74rem;
      border-radius:16px;
      background:#fff;
      border:1px solid rgba(110,98,88,.10);
    }
    .rank-num{
      flex:0 0 auto;
      width:28px;height:28px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,#1b1614,#2b231d);
      color:#f7edde;
      font-weight:800;
      font-size:.84rem;
    }
    .rank-item h4{
      font-size:.96rem;
      margin:0 0 .2rem;
      color:#1b1412;
      line-height:1.35;
    }
    .rank-item p{
      margin:0;
      font-size:.86rem;
      color:#6a5c52;
    }
    .rank-item:hover{border-color:rgba(200,155,90,.3)}
    .mini-grid{
      display:grid;
      gap:.65rem;
    }
    .mini-entry{
      display:flex;
      justify-content:space-between;
      gap:.8rem;
      align-items:center;
      padding:.72rem .8rem;
      border-radius:16px;
      background:#fff;
      border:1px solid rgba(110,98,88,.10);
    }
    .mini-entry span{color:#64584f;font-size:.9rem}
    .mini-entry strong{
      display:block;
      color:#1a1412;
      line-height:1.3;
    }
    .mini-entry small{color:#8a7e73}
    .plans{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
    }
    .plan-card{
      padding:1.15rem;
      position:relative;
      overflow:hidden;
      background:rgba(255,255,255,.74);
      height:100%;
      transition:var(--ease);
    }
    .plan-card:hover{
      transform:translateY(-3px);
      box-shadow:0 16px 34px rgba(21,17,16,.10);
    }
    .plan-card.recommended{
      background:linear-gradient(180deg, rgba(27,22,20,.98), rgba(38,30,26,.96));
      color:#f8efe1;
      border-color:#1d1816;
      box-shadow:0 18px 34px rgba(21,17,16,.18);
    }
    .plan-card.recommended .plan-price,
    .plan-card.recommended .plan-desc,
    .plan-card.recommended li,
    .plan-card.recommended .plan-meta{color:rgba(248,239,225,.82)}
    .plan-badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.35rem .65rem;
      border-radius:999px;
      background:rgba(200,155,90,.12);
      color:#855d31;
      border:1px solid rgba(200,155,90,.18);
      font-size:.84rem;
      font-weight:700;
      margin-bottom:.75rem;
    }
    .plan-card.recommended .plan-badge{
      background:rgba(255,255,255,.12);
      color:#f8efe1;
      border-color:rgba(255,255,255,.12);
    }
    .plan-name{
      font-size:1.25rem;
      font-weight:900;
      margin:0 0 .3rem;
    }
    .plan-desc{
      margin:0 0 .9rem;
      color:#62574d;
      font-size:.95rem;
    }
    .plan-price{
      display:flex;
      align-items:flex-end;
      gap:.3rem;
      font-weight:900;
      color:#1a1412;
      margin-bottom:.8rem;
    }
    .plan-price strong{
      font-size:2rem;
      line-height:1;
    }
    .plan-price span{
      font-size:.9rem;
      color:#7a6c61;
      padding-bottom:.25rem;
    }
    .plan-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:.55rem;
    }
    .plan-list li{
      display:flex;
      align-items:flex-start;
      gap:.55rem;
      color:#5a4d44;
      font-size:.93rem;
    }
    .plan-list i{color:#c08947;margin-top:.2rem}
    .plan-card .btn-wrap{
      margin-top:1rem;
      display:flex;
      gap:.6rem;
      flex-wrap:wrap;
    }
    .faq-wrap .accordion-item{
      margin-bottom:.85rem;
      overflow:hidden;
      background:rgba(255,255,255,.74);
    }
    .accordion-button{
      background:transparent;
      color:#1a1412;
      font-weight:800;
      box-shadow:none !important;
    }
    .accordion-button:not(.collapsed){
      color:#1a1412;
      background:rgba(200,155,90,.10);
    }
    .accordion-button:focus{
      border-color:rgba(200,155,90,.34);
      box-shadow:0 0 0 .2rem rgba(200,155,90,.12);
    }
    .accordion-body{
      color:#584c43;
      background:rgba(255,255,255,.58);
    }
    .cta-panel{
      padding:1.25rem;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(135deg, rgba(21,17,16,.98), rgba(42,34,29,.96)),
        radial-gradient(circle at 80% 20%, rgba(200,155,90,.28), transparent 22%);
      color:#f8efe1;
      box-shadow:0 18px 36px rgba(21,17,16,.16);
      overflow:hidden;
      position:relative;
    }
    .cta-panel::after{
      content:"";
      position:absolute;
      right:-70px;
      top:-50px;
      width:240px;height:240px;border-radius:50%;
      background:radial-gradient(circle, rgba(200,155,90,.22), transparent 68%);
    }
    .cta-panel h2{
      margin:0 0 .6rem;
      font-weight:900;
      font-size:1.8rem;
    }
    .cta-panel p{
      margin:0;
      color:rgba(248,239,225,.84);
      max-width:58rem;
    }
    .cta-panel .cta-actions{
      margin-top:1rem;
      display:flex;
      gap:.7rem;
      flex-wrap:wrap;
    }
    .cta-panel .btn-soft{
      background:rgba(255,255,255,.1);
      color:#f8efe1;
      border-color:rgba(255,255,255,.12);
    }
    .cta-panel .btn-soft:hover,
    .cta-panel .btn-soft:focus-visible{
      background:rgba(255,255,255,.16);
      color:#fff;
    }
    .pagination-wrap{
      display:flex;
      justify-content:center;
      margin-top:1.2rem;
    }
    .pagination{
      gap:.35rem;
    }
    .page-link{
      color:#3b2f28;
      background:rgba(255,255,255,.7);
      border:1px solid rgba(110,98,88,.16);
      border-radius:12px !important;
      min-width:42px;
      text-align:center;
      transition:var(--ease);
    }
    .page-link:hover{
      color:#1a1412;
      background:#f1e5d2;
      border-color:rgba(200,155,90,.34);
      box-shadow:0 8px 16px rgba(21,17,16,.06);
    }
    .page-item.active .page-link{
      background:linear-gradient(135deg,#1b1614,#2b231d);
      border-color:#1b1614;
      color:#f7edde;
    }
    footer{
      background:linear-gradient(180deg, rgba(21,17,16,.98), rgba(18,15,14,1));
      color:#f8efe1;
      margin-top:1rem;
      position:relative;
      z-index:1;
    }
    .footer-inner{
      padding:2rem 0 1.2rem;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .9fr;
      gap:1.2rem;
      padding-bottom:1.2rem;
      border-bottom:1px solid rgba(248,239,225,.10);
    }
    .footer-brand p{
      margin:1rem 0 0;
      color:rgba(242,233,220,.72);
      max-width:34rem;
    }
    .footer-title{
      font-weight:800;
      margin-bottom:.9rem;
      color:#fff3e2;
    }
    .footer-links,
    .footer-meta{
      display:grid;
      gap:.6rem;
    }
    .footer-links a{
      color:rgba(242,233,220,.78);
      width:fit-content;
    }
    .footer-links a:hover{color:#fff}
    .footer-meta div{
      color:rgba(242,233,220,.72);
      font-size:.95rem;
    }
    .copyright{
      padding-top:1rem;
      color:rgba(242,233,220,.62);
      font-size:.92rem;
    }
    .side-note{
      margin-top:.9rem;
      padding:.78rem .82rem;
      border-radius:16px;
      background:rgba(200,155,90,.12);
      border:1px solid rgba(200,155,90,.16);
      color:#5c452f;
      font-size:.9rem;
    }
    .search-inline{
      display:flex;
      gap:.6rem;
    }
    .search-inline input{
      flex:1;
      border-radius:14px;
      border:1px solid rgba(110,98,88,.18);
      background:rgba(255,255,255,.82);
      padding:.72rem .92rem;
      color:#1c1512;
      min-width:0;
    }
    .search-inline input:focus{
      outline:none;
      border-color:rgba(200,155,90,.45);
      box-shadow:0 0 0 .2rem rgba(200,155,90,.12);
    }
    .search-inline button{
      border:none;
      border-radius:14px;
      background:linear-gradient(135deg,#1b1614,#2b231d);
      color:#f7edde;
      padding:.72rem 1rem;
      font-weight:700;
    }
    .label-row{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:1rem;
    }
    .label-row .tag{
      padding:.42rem .68rem;
      border-radius:999px;
      background:#f4eadb;
      border:1px solid rgba(110,98,88,.10);
      color:#675a50;
      font-size:.84rem;
    }
    @media (max-width: 1199.98px){
      .hero-shell,
      .main-grid,
      .featured-card{
        grid-template-columns:1fr;
      }
      .hero-copy{
        min-height:auto;
        padding-top:0;
      }
      .hero-visual{
        min-height:480px;
      }
      .side-box{
        position:static;
      }
    }
    @media (max-width: 991.98px){
      .nav-inner,
      .brand-row{
        flex-direction:column;
        align-items:flex-start;
      }
      .nav-search{width:100%;flex:1}
      .hero-kpis,
      .plans,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .content-grid{
        grid-template-columns:1fr;
      }
      .cover-stats{
        grid-template-columns:1fr;
      }
      .hero-visual{
        grid-template-columns:1fr;
      }
      .featured-card{grid-column:auto}
    }
    @media (max-width: 767.98px){
      .page-wrap{padding-top:1rem}
      .hero h1{font-size:2.25rem}
      .section-heading,
      .toolbar{
        flex-direction:column;
        align-items:flex-start;
      }
      .search-inline{
        flex-direction:column;
      }
      .cover-visual{min-height:390px}
      .hero-copy{padding-bottom:.3rem}
      .trend-line{justify-content:flex-start}
      .brand-row{min-height:auto}
      .nav-inner{padding:.45rem 0 .9rem}
    }
    @media (max-width: 575.98px){
      .hero,
      .section{
        padding-left:.15rem;
        padding-right:.15rem;
      }
      .hero h1{font-size:2rem}
      .hero-lead{font-size:1rem}
      .kpi-value{font-size:1.35rem}
      .section-title{font-size:1.35rem}
      .content-media{height:150px}
      .accordion-button,
      .plan-name{font-size:1.05rem}
    }
    .focus-ring:focus-visible,
    a:focus-visible,
    button:focus-visible,
    input:focus-visible{
      outline:2px solid rgba(200,155,90,.65);
      outline-offset:2px;
    }