/* roulang page: index */
:root{
      --bg:#f3ece3;
      --bg-soft:#fff8f0;
      --surface:#ffffff;
      --surface-soft:#fffdf9;
      --panel:#17110e;
      --panel-soft:#231915;
      --text:#221914;
      --muted:#6b6158;
      --line:#e6d8c9;
      --line-strong:#d7c4b3;
      --accent:#e64a27;
      --accent-2:#ff7b1d;
      --accent-3:#bf3518;
      --cool:#2f7480;
      --success:#0f7a6b;
      --shadow:0 16px 34px rgba(28, 19, 13, .08);
      --shadow-strong:0 22px 54px rgba(28, 19, 13, .14);
      --radius:8px;
      --radius-sm:6px;
      --container:1240px;
    }

    html{
      scroll-behavior:smooth;
    }

    *{
      box-sizing:border-box;
    }

    body{
      margin:0;
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.6;
      background:
        radial-gradient(circle at top left, rgba(230,74,39,.08), transparent 26%),
        radial-gradient(circle at 90% 10%, rgba(47,116,128,.08), transparent 24%),
        linear-gradient(180deg, #f7f1ea 0%, #f2ebe2 100%);
      overflow-x:hidden;
    }

    body, button, input, textarea, select{
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

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

    button,
    input,
    select,
    textarea{
      font:inherit;
    }

    button{
      cursor:pointer;
    }

    :focus-visible{
      outline:3px solid rgba(230,74,39,.32);
      outline-offset:2px;
    }

    ::selection{
      background:rgba(230,74,39,.18);
      color:var(--text);
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:60;
      background:linear-gradient(180deg, rgba(15,11,9,.96), rgba(15,11,9,.92));
      backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(255,255,255,.07);
    }

    .status-strip{
      color:rgba(255,255,255,.78);
      font-size:.88rem;
      border-bottom:1px solid rgba(255,255,255,.07);
      padding:.55rem 0;
    }

    .status-strip .status-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }

    .status-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.28rem .65rem;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      color:#fff;
      border:1px solid rgba(255,255,255,.08);
      white-space:nowrap;
    }

    .status-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent-2);
      box-shadow:0 0 0 4px rgba(255,123,29,.12);
    }

    .nav-shell{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:.85rem;
      min-width:0;
      color:#fff;
      flex:0 0 auto;
    }

    .brand-mark{
      width:46px;
      height:46px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:
        linear-gradient(145deg, var(--accent-2), var(--accent));
      box-shadow:0 12px 28px rgba(230,74,39,.25);
      color:#fff;
      font-weight:800;
      letter-spacing:0;
      flex:0 0 auto;
    }

    .brand-text{
      min-width:0;
      display:flex;
      flex-direction:column;
      line-height:1.15;
    }

    .brand-text strong{
      font-size:1.02rem;
      font-weight:800;
      letter-spacing:0;
      white-space:nowrap;
    }

    .brand-text span{
      margin-top:.25rem;
      color:rgba(255,255,255,.64);
      font-size:.84rem;
      white-space:nowrap;
    }

    .nav-pills{
      display:flex;
      align-items:center;
      gap:.6rem;
      margin:0;
      padding:0;
      list-style:none;
      min-width:0;
      overflow-x:auto;
      scrollbar-width:none;
      -ms-overflow-style:none;
      flex:1 1 auto;
      justify-content:center;
    }

    .nav-pills::-webkit-scrollbar{
      display:none;
    }

    .nav-pills a{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      min-height:42px;
      padding:.72rem 1rem;
      border-radius:var(--radius);
      background:rgba(255,255,255,.94);
      border:1px solid rgba(255,255,255,.08);
      color:var(--text);
      box-shadow:0 8px 18px rgba(16, 11, 8, .08);
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
      white-space:nowrap;
      flex:0 0 auto;
    }

    .nav-pills a:hover,
    .nav-pills a:focus-visible,
    .nav-pills a.is-active{
      transform:translateY(-1px);
      background:linear-gradient(145deg, var(--accent), var(--accent-2));
      color:#fff;
      border-color:transparent;
      box-shadow:0 14px 24px rgba(230,74,39,.28);
    }

    .nav-pills a i{
      font-size:.92rem;
    }

    .nav-cta{
      flex:0 0 auto;
      display:flex;
      gap:.6rem;
      align-items:center;
    }

    .button{
      margin:0;
      border:1px solid transparent;
      border-radius:var(--radius);
      padding:.78rem 1rem;
      min-height:44px;
      font-weight:700;
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
      box-shadow:none;
    }

    .button:hover,
    .button:focus-visible{
      transform:translateY(-1px);
    }

    .button.primary{
      background:linear-gradient(145deg, var(--accent), var(--accent-2));
      color:#fff;
      box-shadow:0 14px 28px rgba(230,74,39,.26);
    }

    .button.primary:hover,
    .button.primary:focus-visible{
      background:linear-gradient(145deg, var(--accent-3), var(--accent));
      color:#fff;
    }

    .button.hollow{
      background:transparent;
      color:var(--text);
      border-color:var(--line-strong);
    }

    .button.hollow:hover,
    .button.hollow:focus-visible{
      border-color:var(--accent);
      color:var(--accent);
      background:rgba(230,74,39,.04);
    }

    .button.secondary{
      background:#fff;
      color:var(--text);
      border-color:var(--line);
    }

    .button.secondary:hover,
    .button.secondary:focus-visible{
      border-color:var(--accent);
      color:var(--accent);
    }

    .button.tiny{
      padding:.55rem .78rem;
      min-height:38px;
      font-size:.9rem;
    }

    .main-shell{
      padding-bottom:3rem;
    }

    section{
      scroll-margin-top:110px;
    }

    .hero-cover{
      position:relative;
      color:#fff;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(18,13,11,.98), rgba(45,27,19,.95) 58%, rgba(23,15,12,.98)),
        radial-gradient(circle at 80% 18%, rgba(255,123,29,.2), transparent 28%);
      padding:2.3rem 0 3.2rem;
    }

    .hero-cover::before{
      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:28px 28px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.08));
      pointer-events:none;
    }

    .hero-grid{
      position:relative;
      z-index:1;
      align-items:center;
    }

    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.32rem .72rem;
      border-radius:999px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.86);
      font-size:.9rem;
      margin-bottom:1rem;
    }

    .profile-bar{
      display:flex;
      align-items:center;
      gap:.9rem;
      margin-bottom:1.2rem;
    }

    .profile-avatar{
      width:52px;
      height:52px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg, var(--accent-2), var(--accent));
      color:#fff;
      font-weight:800;
      box-shadow:0 12px 24px rgba(230,74,39,.22);
      flex:0 0 auto;
    }

    .profile-meta{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:.18rem;
    }

    .profile-meta strong{
      font-size:1.04rem;
      font-weight:800;
      color:#fff;
      white-space:nowrap;
    }

    .profile-meta span{
      color:rgba(255,255,255,.68);
      font-size:.92rem;
    }

    .hero-title{
      font-size:3rem;
      line-height:1.06;
      margin:0 0 1rem;
      font-weight:900;
      letter-spacing:0;
    }

    .hero-lead{
      margin:0;
      max-width:42rem;
      font-size:1.08rem;
      color:rgba(255,255,255,.82);
    }

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin:1.4rem 0 1.35rem;
    }

    .hero-actions .button{
      min-width:132px;
    }

    .hero-actions .button.secondary{
      background:rgba(255,255,255,.06);
      color:#fff;
      border-color:rgba(255,255,255,.14);
    }

    .hero-actions .button.secondary:hover,
    .hero-actions .button.secondary:focus-visible{
      color:#fff;
      border-color:rgba(255,255,255,.26);
      background:rgba(255,255,255,.1);
    }

    .hero-stats{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:.8rem;
      margin-top:.8rem;
    }

    .stat-card{
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.12);
      border-radius:var(--radius);
      padding:1rem 1rem .95rem;
      min-height:88px;
      box-shadow:0 10px 26px rgba(0,0,0,.12);
    }

    .stat-card strong{
      display:block;
      font-size:1.45rem;
      line-height:1;
      font-weight:900;
      color:#fff;
      margin-bottom:.35rem;
    }

    .stat-card span{
      color:rgba(255,255,255,.72);
      font-size:.9rem;
    }

    .hero-stage{
      padding-left:1rem;
    }

    .hero-stage-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-bottom:1rem;
    }

    .stage-note{
      color:rgba(255,255,255,.72);
      font-size:.9rem;
    }

    .stage-note .stage-badge{
      display:inline-flex;
      align-items:center;
      gap:.38rem;
      padding:.3rem .6rem;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.08);
      margin-right:.4rem;
      margin-bottom:.35rem;
      white-space:nowrap;
    }

    .mosaic-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      grid-template-rows:1fr 1fr;
      gap:12px;
      min-height:340px;
    }

    .mosaic-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius);
      padding:1rem;
      color:#fff;
      box-shadow:var(--shadow-strong);
      border:1px solid rgba(255,255,255,.12);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:160px;
      isolation:isolate;
    }

    .mosaic-card::before,
    .mosaic-card::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
    }

    .mosaic-card::before{
      background:linear-gradient(180deg, rgba(255,255,255,.09), transparent 48%);
      z-index:0;
    }

    .mosaic-card::after{
      background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.24) 0 7px, transparent 8px),
        radial-gradient(circle at 82% 30%, rgba(255,255,255,.18) 0 6px, transparent 7px),
        radial-gradient(circle at 70% 76%, rgba(255,255,255,.14) 0 11px, transparent 12px),
        linear-gradient(135deg, rgba(255,255,255,.12) 1px, transparent 1px);
      background-size:auto,auto,auto,18px 18px;
      opacity:.9;
      z-index:0;
      mix-blend-mode:screen;
    }

    .mosaic-card > *{
      position:relative;
      z-index:1;
    }

    .mosaic-card strong{
      font-size:1.18rem;
      line-height:1.25;
      margin-bottom:.25rem;
    }

    .mosaic-card span{
      display:inline-flex;
      align-self:flex-start;
      padding:.28rem .55rem;
      border-radius:999px;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.12);
      font-size:.82rem;
      margin-bottom:.6rem;
    }

    .mosaic-card em{
      font-style:normal;
      color:rgba(255,255,255,.8);
      font-size:.92rem;
    }

    .mosaic-card .mosaic-flag{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      margin-top:auto;
      font-size:.86rem;
      color:rgba(255,255,255,.9);
    }

    .mosaic-large{
      grid-row:span 2;
      background:linear-gradient(145deg, #f36a37, #b92f18);
    }

    .mosaic-a{
      background:linear-gradient(145deg, #2d3846, #11161f);
    }

    .mosaic-b{
      background:linear-gradient(145deg, #7b4324, #41201a);
    }

    .mosaic-c{
      background:linear-gradient(145deg, #17636b, #11343a);
    }

    .assurance-bar{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:.8rem;
      margin-top:1rem;
    }

    .assurance-item{
      display:flex;
      align-items:center;
      gap:.65rem;
      padding:.82rem .9rem;
      border-radius:var(--radius);
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.9);
      font-size:.92rem;
    }

    .assurance-item i{
      color:var(--accent-2);
      flex:0 0 auto;
    }

    .section-band{
      padding:4.2rem 0;
    }

    .section-band.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.15));
      border-top:1px solid rgba(255,255,255,.34);
      border-bottom:1px solid rgba(255,255,255,.34);
    }

    .section-head{
      margin-bottom:1.45rem;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
    }

    .section-head h2{
      font-size:2rem;
      line-height:1.15;
      margin:0 0 .35rem;
      font-weight:900;
      letter-spacing:0;
    }

    .section-head p{
      margin:0;
      max-width:54rem;
      color:var(--muted);
      font-size:1rem;
    }

    .section-tag{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.34rem .6rem;
      border-radius:999px;
      background:rgba(230,74,39,.08);
      color:var(--accent-3);
      font-size:.84rem;
      margin-bottom:.65rem;
      border:1px solid rgba(230,74,39,.12);
      white-space:nowrap;
    }

    .directory-tools{
      display:flex;
      gap:1rem;
      align-items:flex-end;
      justify-content:space-between;
      margin:1rem 0 1.3rem;
      flex-wrap:wrap;
    }

    .directory-summary{
      color:var(--muted);
      font-size:.96rem;
    }

    .directory-summary strong{
      color:var(--accent-3);
    }

    .search-shell{
      position:relative;
      width:min(100%, 360px);
      flex:1 1 280px;
    }

    .search-shell i{
      position:absolute;
      left:1rem;
      top:50%;
      transform:translateY(-50%);
      color:var(--accent);
      pointer-events:none;
    }

    .search-shell input{
      width:100%;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      color:var(--text);
      padding:.88rem 1rem .88rem 2.55rem;
      min-height:46px;
      box-shadow:0 10px 22px rgba(21, 14, 9, .05);
    }

    .search-shell input::placeholder{
      color:#8f8377;
    }

    .filter-row{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin:0 0 1.45rem;
    }

    .filter-row .button{
      background:#fff;
      color:var(--text);
      border-color:var(--line);
      box-shadow:0 8px 18px rgba(21, 14, 9, .05);
      font-size:.92rem;
    }

    .filter-row .button.is-active,
    .filter-row .button:hover,
    .filter-row .button:focus-visible{
      background:linear-gradient(145deg, var(--accent), var(--accent-2));
      color:#fff;
      border-color:transparent;
      box-shadow:0 14px 26px rgba(230,74,39,.24);
    }

    .topic-card{
      display:flex;
      flex-direction:column;
      height:100%;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .topic-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(230,74,39,.22);
    }

    .topic-visual{
      position:relative;
      min-height:176px;
      padding:1rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
      isolation:isolate;
    }

    .topic-visual::before,
    .topic-visual::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
    }

    .topic-visual::before{
      background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 42%);
    }

    .topic-visual::after{
      background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.16) 0 5px, transparent 6px),
        radial-gradient(circle at 82% 25%, rgba(255,255,255,.2) 0 8px, transparent 9px),
        radial-gradient(circle at 74% 70%, rgba(255,255,255,.14) 0 12px, transparent 13px),
        linear-gradient(135deg, rgba(255,255,255,.12) 1px, transparent 1px);
      background-size:auto,auto,auto,18px 18px;
      opacity:.9;
      mix-blend-mode:screen;
    }

    .topic-visual > *{
      position:relative;
      z-index:1;
    }

    .topic-visual .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem;
    }

    .topic-visual .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem .55rem;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.12);
      font-size:.8rem;
      white-space:nowrap;
    }

    .topic-visual strong{
      font-size:1.16rem;
      line-height:1.28;
      margin:.6rem 0 .35rem;
      max-width:14rem;
    }

    .topic-visual .date{
      font-size:.88rem;
      color:rgba(255,255,255,.84);
      margin-bottom:.2rem;
    }

    .topic-visual .hot{
      display:inline-flex;
      align-self:flex-start;
      align-items:center;
      gap:.35rem;
      padding:.26rem .5rem;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.12);
      font-size:.8rem;
      white-space:nowrap;
    }

    .topic-a{
      background:linear-gradient(145deg, #f36a37, #b92f18);
    }

    .topic-b{
      background:linear-gradient(145deg, #6b3e23, #34211b);
    }

    .topic-c{
      background:linear-gradient(145deg, #2b3b4b, #141b23);
    }

    .topic-d{
      background:linear-gradient(145deg, #177077, #11333a);
    }

    .topic-e{
      background:linear-gradient(145deg, #b55a21, #5e2917);
    }

    .topic-f{
      background:linear-gradient(145deg, #37475f, #1a2231);
    }

    .topic-body{
      padding:1rem 1rem 1.05rem;
      display:flex;
      flex-direction:column;
      gap:.75rem;
      flex:1 1 auto;
    }

    .topic-body h3{
      margin:0;
      font-size:1.1rem;
      line-height:1.32;
      font-weight:800;
      letter-spacing:0;
    }

    .topic-body p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }

    .topic-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      color:#8a7c6d;
      font-size:.86rem;
    }

    .topic-meta span{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.2rem .45rem;
      border-radius:999px;
      background:var(--bg-soft);
      border:1px solid var(--line);
      white-space:nowrap;
    }

    .topic-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:auto;
    }

    .topic-actions .button{
      font-size:.86rem;
      padding:.58rem .8rem;
      min-height:38px;
    }

    .topic-actions .button.hollow{
      background:#fff;
    }

    .benefit-grid{
      margin-top:.4rem;
    }

    .benefit-card{
      height:100%;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:1.05rem;
      box-shadow:var(--shadow);
      transition:transform .18s ease, box-shadow .18s ease;
    }

    .benefit-card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow-strong);
    }

    .benefit-icon{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      margin-bottom:.9rem;
      background:linear-gradient(145deg, rgba(230,74,39,.12), rgba(255,123,29,.14));
      color:var(--accent);
      font-size:1.1rem;
    }

    .benefit-card h3{
      margin:0 0 .5rem;
      font-size:1.06rem;
      line-height:1.3;
      font-weight:800;
    }

    .benefit-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }

    .benefit-foot{
      margin-top:.75rem;
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      color:var(--accent-3);
      font-size:.88rem;
      font-weight:700;
    }

    .featured-layout{
      align-items:stretch;
    }

    .featured-main{
      height:100%;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }

    .featured-cover{
      position:relative;
      min-height:260px;
      padding:1.2rem;
      color:#fff;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:
        linear-gradient(145deg, rgba(230,74,39,.98), rgba(185,47,24,.96)),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.22), transparent 28%);
      overflow:hidden;
      isolation:isolate;
    }

    .featured-cover::before,
    .featured-cover::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
    }

    .featured-cover::before{
      background:
        linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%);
      z-index:0;
    }

    .featured-cover::after{
      background:
        radial-gradient(circle at 18% 28%, rgba(255,255,255,.22) 0 6px, transparent 7px),
        radial-gradient(circle at 78% 30%, rgba(255,255,255,.18) 0 8px, transparent 9px),
        radial-gradient(circle at 70% 80%, rgba(255,255,255,.18) 0 12px, transparent 13px);
      z-index:0;
      mix-blend-mode:screen;
    }

    .featured-cover > *{
      position:relative;
      z-index:1;
    }

    .featured-cover .cover-kicker{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.3rem .6rem;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.14);
      width:max-content;
      font-size:.82rem;
    }

    .featured-cover h3{
      margin:.75rem 0 .5rem;
      font-size:1.55rem;
      line-height:1.22;
      font-weight:900;
    }

    .featured-cover p{
      margin:0;
      max-width:30rem;
      color:rgba(255,255,255,.86);
    }

    .featured-body{
      padding:1.2rem;
      display:grid;
      gap:1rem;
    }

    .featured-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }

    .featured-meta span{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem .55rem;
      border-radius:999px;
      background:var(--bg-soft);
      border:1px solid var(--line);
      color:var(--text);
      font-size:.86rem;
      white-space:nowrap;
    }

    .featured-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }

    .featured-side{
      display:grid;
      gap:1rem;
      height:100%;
    }

    .side-card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:1rem;
      display:flex;
      gap:.9rem;
      align-items:flex-start;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .side-card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(230,74,39,.2);
    }

    .side-index{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg, rgba(230,74,39,.14), rgba(255,123,29,.18));
      color:var(--accent-3);
      flex:0 0 auto;
      font-weight:900;
    }

    .side-content{
      min-width:0;
      flex:1 1 auto;
    }

    .side-content h3{
      margin:0 0 .3rem;
      font-size:1rem;
      line-height:1.3;
      font-weight:800;
    }

    .side-content p{
      margin:0 0 .6rem;
      color:var(--muted);
      font-size:.92rem;
    }

    .side-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem;
      margin-bottom:.6rem;
    }

    .side-meta span{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.22rem .45rem;
      border-radius:999px;
      background:var(--bg-soft);
      border:1px solid var(--line);
      font-size:.8rem;
      white-space:nowrap;
    }

    .news-layout{
      align-items:stretch;
    }

    .news-list-wrap{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:1rem 1.15rem;
      height:100%;
    }

    .news-list{
      margin:0;
      padding:0;
      list-style:none;
    }

    .news-item{
      padding:1rem 0;
      border-bottom:1px solid var(--line);
    }

    .news-item:first-child{
      padding-top:.1rem;
    }

    .news-item:last-child{
      border-bottom:none;
      padding-bottom:.1rem;
    }

    .news-link{
      display:block;
      font-weight:800;
      line-height:1.32;
      margin-bottom:.35rem;
      color:var(--text);
      transition:color .18s ease;
    }

    .news-link:hover,
    .news-link:focus-visible{
      color:var(--accent);
    }

    .news-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      align-items:center;
      font-size:.86rem;
      color:#897b6d;
      margin-bottom:.35rem;
    }

    .news-meta span{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      padding:.2rem .45rem;
      border-radius:999px;
      background:var(--bg-soft);
      border:1px solid var(--line);
      white-space:nowrap;
    }

    .news-item p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }

    .news-side{
      display:grid;
      gap:1rem;
    }

    .news-side-box{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:1rem;
    }

    .news-side-box h3{
      margin:0 0 .8rem;
      font-size:1.03rem;
      font-weight:800;
    }

    .mini-pills{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:.8rem;
    }

    .mini-pills span{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.3rem .55rem;
      border-radius:999px;
      background:rgba(47,116,128,.08);
      border:1px solid rgba(47,116,128,.14);
      color:var(--cool);
      font-size:.82rem;
      white-space:nowrap;
    }

    .mini-reco{
      display:grid;
      gap:.85rem;
    }

    .mini-reco .reco-card{
      display:flex;
      gap:.8rem;
      padding:.85rem;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:var(--bg-soft);
      transition:transform .18s ease, border-color .18s ease;
    }

    .mini-reco .reco-card:hover{
      transform:translateY(-2px);
      border-color:rgba(230,74,39,.18);
    }

    .mini-reco .reco-thumb{
      width:74px;
      aspect-ratio:1/1;
      border-radius:var(--radius-sm);
      flex:0 0 auto;
      position:relative;
      overflow:hidden;
    }

    .mini-reco .reco-thumb::before,
    .mini-reco .reco-thumb::after{
      content:"";
      position:absolute;
      inset:0;
    }

    .mini-reco .reco-thumb::before{
      background:linear-gradient(145deg, rgba(230,74,39,.96), rgba(255,123,29,.96));
    }

    .mini-reco .reco-thumb::after{
      background:
        radial-gradient(circle at 25% 26%, rgba(255,255,255,.25) 0 5px, transparent 6px),
        radial-gradient(circle at 78% 72%, rgba(255,255,255,.18) 0 8px, transparent 9px);
      mix-blend-mode:screen;
    }

    .mini-reco .reco-body{
      min-width:0;
    }

    .mini-reco .reco-body strong{
      display:block;
      line-height:1.3;
      margin-bottom:.3rem;
      font-weight:800;
    }

    .mini-reco .reco-body p{
      margin:0 0 .45rem;
      color:var(--muted);
      font-size:.9rem;
    }

    .mini-reco .reco-body .button{
      min-height:36px;
      padding:.48rem .72rem;
      font-size:.84rem;
    }

    .related-band{
      overflow:hidden;
    }

    .related-strip{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:1rem;
    }

    .related-card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:1rem;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      display:flex;
      gap:.85rem;
      align-items:flex-start;
      min-height:136px;
    }

    .related-card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(230,74,39,.2);
    }

    .related-thumb{
      width:78px;
      aspect-ratio:1/1;
      border-radius:var(--radius-sm);
      flex:0 0 auto;
      position:relative;
      overflow:hidden;
    }

    .related-thumb::before,
    .related-thumb::after{
      content:"";
      position:absolute;
      inset:0;
    }

    .related-thumb::before{
      background:linear-gradient(145deg, #1f2937, #4b5563);
    }

    .related-thumb::after{
      background:
        radial-gradient(circle at 28% 26%, rgba(255,255,255,.18) 0 5px, transparent 6px),
        radial-gradient(circle at 74% 72%, rgba(255,255,255,.14) 0 8px, transparent 9px),
        linear-gradient(135deg, rgba(255,255,255,.12) 1px, transparent 1px);
      background-size:auto,auto,16px 16px;
      mix-blend-mode:screen;
    }

    .related-body{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:.4rem;
    }

    .related-body h3{
      margin:0;
      font-size:1rem;
      line-height:1.3;
      font-weight:800;
    }

    .related-body p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }

    .related-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem;
    }

    .related-meta span{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.2rem .45rem;
      border-radius:999px;
      background:var(--bg-soft);
      border:1px solid var(--line);
      color:#7b6d60;
      font-size:.8rem;
      white-space:nowrap;
    }

    .cta-band{
      background:
        linear-gradient(135deg, rgba(17,12,10,.98), rgba(43,27,20,.96)),
        radial-gradient(circle at 80% 18%, rgba(255,123,29,.18), transparent 25%);
      color:#fff;
      position:relative;
      overflow:hidden;
    }

    .cta-band::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size:30px 30px;
      opacity:.34;
      pointer-events:none;
    }

    .cta-inner{
      position:relative;
      z-index:1;
    }

    .cta-copy h2{
      color:#fff;
    }

    .cta-copy p{
      color:rgba(255,255,255,.8);
      max-width:58rem;
    }

    .copy-shell{
      display:grid;
      gap:.7rem;
      margin-top:1.3rem;
    }

    .copy-shell label{
      font-size:.92rem;
      color:rgba(255,255,255,.72);
    }

    .copy-row{
      display:flex;
      align-items:center;
      gap:.75rem;
      flex-wrap:wrap;
    }

    .copy-row input{
      flex:1 1 340px;
      min-height:48px;
      padding:.9rem 1rem;
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.08);
      color:#fff;
      box-shadow:0 12px 26px rgba(0,0,0,.12);
    }

    .copy-row input::selection{
      background:rgba(255,255,255,.18);
      color:#fff;
    }

    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      margin-top:1rem;
    }

    .cta-actions .button{
      min-width:124px;
    }

    .cta-actions .button.secondary{
      background:rgba(255,255,255,.08);
      color:#fff;
      border-color:rgba(255,255,255,.12);
    }

    .cta-actions .button.secondary:hover,
    .cta-actions .button.secondary:focus-visible{
      background:rgba(255,255,255,.12);
      color:#fff;
      border-color:rgba(255,255,255,.2);
    }

    .faq-band{
      background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.16));
    }

    .accordion{
      margin:0;
    }

    .accordion-item{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      box-shadow:var(--shadow);
      overflow:hidden;
      margin-bottom:.9rem;
    }

    .accordion-title{
      background:#fff;
      color:var(--text);
      font-weight:800;
      font-size:1rem;
      padding:1rem 1.05rem;
      border:none;
      transition:color .18s ease, background-color .18s ease;
    }

    .accordion-title:hover,
    .accordion-title:focus-visible{
      color:var(--accent);
      background:rgba(230,74,39,.03);
    }

    .accordion-content{
      background:#fff;
      border-top:1px solid var(--line);
      padding:0 1.05rem 1rem;
      color:var(--muted);
    }

    .site-footer{
      background:#14100d;
      color:rgba(255,255,255,.84);
      padding:3rem 0 2rem;
      border-top:1px solid rgba(255,255,255,.08);
    }

    .footer-top{
      display:flex;
      justify-content:space-between;
      gap:1.5rem;
      flex-wrap:wrap;
      padding-bottom:1.2rem;
      border-bottom:1px solid rgba(255,255,255,.08);
      margin-bottom:1.2rem;
    }

    .footer-brand{
      max-width:32rem;
    }

    .footer-brand strong{
      display:block;
      font-size:1.08rem;
      margin-bottom:.45rem;
      color:#fff;
    }

    .footer-brand p{
      margin:0;
      color:rgba(255,255,255,.68);
    }

    .footer-columns{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:1rem;
      margin-top:1rem;
    }

    .footer-block h3{
      margin:0 0 .75rem;
      font-size:1rem;
      color:#fff;
    }

    .footer-links{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:.55rem;
    }

    .footer-links a{
      color:rgba(255,255,255,.7);
      transition:color .18s ease;
    }

    .footer-links a:hover,
    .footer-links a:focus-visible{
      color:#fff;
    }

    .footer-note{
      margin-top:1.2rem;
      padding-top:1rem;
      border-top:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.58);
      font-size:.92rem;
      display:flex;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }

    .footer-note a{
      color:#fff;
    }

    .toast{
      position:fixed;
      left:50%;
      bottom:22px;
      transform:translateX(-50%) translateY(12px);
      background:rgba(20, 14, 11, .94);
      color:#fff;
      padding:.8rem 1rem;
      border-radius:999px;
      box-shadow:0 16px 34px rgba(0,0,0,.22);
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
      z-index:80;
      font-size:.92rem;
      white-space:nowrap;
    }

    .toast.is-visible{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }

    .spacer-xs{
      height:.35rem;
    }

    .section-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(230,74,39,.18), transparent);
      margin:0;
      border:none;
    }

    @media (max-width: 1024px){
      .hero-title{
        font-size:2.45rem;
      }

      .hero-stage{
        padding-left:0;
        margin-top:1.5rem;
      }

      .mosaic-grid{
        min-height:300px;
      }

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

      .section-head{
        align-items:flex-start;
        flex-direction:column;
      }

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

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

    @media (max-width: 768px){
      .nav-shell{
        align-items:flex-start;
        flex-direction:column;
      }

      .nav-pills{
        width:100%;
        justify-content:flex-start;
      }

      .nav-cta{
        width:100%;
      }

      .nav-cta .button{
        width:100%;
      }

      .hero-title{
        font-size:2.1rem;
      }

      .hero-lead{
        font-size:1rem;
      }

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

      .mosaic-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto;
      }

      .mosaic-large{
        grid-row:auto;
        min-height:220px;
      }

      .assurance-bar{
        grid-template-columns:1fr 1fr;
      }

      .directory-tools{
        align-items:stretch;
      }

      .search-shell{
        width:100%;
      }

      .featured-layout{
        gap:1rem;
      }

      .news-layout{
        gap:1rem;
      }

      .copy-row{
        flex-direction:column;
      }

      .copy-row input,
      .copy-row .button{
        width:100%;
      }

      .related-strip{
        grid-template-columns:1fr;
      }

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

    @media (max-width: 520px){
      .status-strip{
        font-size:.82rem;
      }

      .brand-mark{
        width:40px;
        height:40px;
        border-radius:12px;
      }

      .brand-text strong{
        font-size:.96rem;
      }

      .hero-cover{
        padding:2rem 0 2.4rem;
      }

      .hero-title{
        font-size:1.95rem;
      }

      .hero-actions{
        gap:.55rem;
      }

      .hero-actions .button,
      .cta-actions .button,
      .featured-actions .button{
        width:100%;
      }

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

      .assurance-bar{
        grid-template-columns:1fr;
      }

      .topic-visual{
        min-height:164px;
      }

      .section-band{
        padding:3.4rem 0;
      }

      .section-head h2{
        font-size:1.65rem;
      }

      .featured-cover h3{
        font-size:1.32rem;
      }
    }

/* roulang page: category1 */
:root{
  --bg:#f4f5f7;
  --panel:#ffffff;
  --panel-soft:#fff8f2;
  --ink:#171717;
  --muted:#5c6470;
  --line:#e4e6ea;
  --line-strong:#d8dbe1;
  --accent:#ef4d2f;
  --accent-dark:#d64025;
  --accent-2:#f97316;
  --accent-soft:#fff1e8;
  --success:#11835d;
  --dark:#111318;
  --shadow:0 16px 34px rgba(15, 23, 42, 0.08);
  --shadow-soft:0 8px 18px rgba(15, 23, 42, 0.05);
  --radius:8px;
  --radius-sm:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(239,77,47,.06), transparent 22%),
    radial-gradient(circle at right top, rgba(249,115,22,.05), transparent 16%),
    linear-gradient(180deg,#f8f9fb 0%,#f4f5f7 42%,#f7f8fa 100%);
  color:var(--ink);
  line-height:1.6;
}
a{color:inherit;text-decoration:none;transition:all .18s ease}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
main{display:block}
::selection{background:rgba(239,77,47,.18);color:var(--ink)}

.grid-container{max-width:1240px}
.site-header{
  position:sticky;
  top:0;
  z-index:100;
}
.status-strip{
  background:#111318;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.status-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  flex-wrap:wrap;
}
.status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#f8fafc;
  font-size:13px;
  line-height:1.2;
}
.status-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent-2);
  box-shadow:0 0 0 4px rgba(249,115,22,.2);
}
.nav-shell{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow-soft);
  margin-bottom:16px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:16px;
  backdrop-filter:saturate(110%) blur(8px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
  flex:0 0 auto;
}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 18px rgba(239,77,47,.18);
}
.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.brand-text strong{
  font-size:18px;
  line-height:1.15;
}
.brand-text span{
  color:var(--muted);
  font-size:13px;
}
.nav-pills{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-pills::-webkit-scrollbar{display:none}
.nav-pills li{flex:0 0 auto}
.nav-pills a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.nav-pills a:hover{
  transform:translateY(-1px);
  border-color:#f3b49d;
  box-shadow:0 8px 16px rgba(239,77,47,.08);
}
.nav-pills a.is-active,
.nav-pills a[aria-current="page"]{
  background:linear-gradient(135deg,rgba(239,77,47,.12),rgba(249,115,22,.12));
  border-color:rgba(239,77,47,.35);
  color:var(--accent-dark);
}
.nav-cta{flex:0 0 auto}

.section-pad{padding:26px 0}
.hero-section{padding:10px 0 22px}
.hero-shell{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,248,243,.95)),
    #fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-grid{padding:28px}
.hero-kicker,
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent-dark);
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}
.hero-kicker::before,
.section-kicker::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(239,77,47,.14);
}
.hero-title{
  margin:10px 0 14px;
  font-size:44px;
  line-height:1.1;
  letter-spacing:0;
  font-weight:800;
}
.hero-title span{
  display:block;
  color:var(--accent-dark);
}
.hero-subtitle{
  max-width:58ch;
  margin:0 0 18px;
  color:var(--muted);
  font-size:17px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.button{
  border-radius:7px;
  border:1px solid transparent;
  font-weight:700;
  box-shadow:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.button i{margin-right:6px}
.button.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 24px rgba(239,77,47,.18);
}
.button.primary:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(239,77,47,.22);
}
.button.secondary{
  background:#fff;
  color:var(--ink);
  border-color:var(--line-strong);
}
.button.secondary:hover{
  transform:translateY(-1px);
  border-color:#f2b097;
  box-shadow:0 10px 18px rgba(15,23,42,.05);
}
.button.hollow{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.button.hollow:hover{
  background:#fff;
  border-color:#f2b097;
  transform:translateY(-1px);
}
.button.small{
  padding:.72rem 1rem;
  font-size:14px;
}
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  border:1px solid rgba(239,77,47,.16);
  font-size:13px;
  font-weight:700;
}
.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.metric{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 14px 13px;
  box-shadow:var(--shadow-soft);
}
.metric strong{
  display:block;
  font-size:24px;
  line-height:1;
  color:var(--accent-dark);
  margin-bottom:4px;
}
.metric span{
  display:block;
  color:var(--muted);
  font-size:13px;
}
.hero-visual{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:14px;
  align-items:stretch;
}
.visual-card,
.visual-mini,
.directory-card,
.feature-card,
.mini-feature,
.related-card,
.info-card,
.cta-band{
  border-radius:var(--radius);
}
.visual-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  min-height:100%;
  box-shadow:var(--shadow-soft);
}
.visual-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:4 / 5;
}
.visual-card-lg img{aspect-ratio:5 / 6}
.visual-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:16px;
  background:linear-gradient(180deg, transparent 0%, rgba(17,19,24,.82) 100%);
  color:#fff;
}
.visual-overlay .overlay-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:12px;
  margin-bottom:8px;
}
.visual-overlay strong{
  display:block;
  font-size:18px;
  line-height:1.2;
}
.visual-overlay span{
  display:block;
  font-size:13px;
  color:rgba(255,255,255,.86);
  margin-top:4px;
}
.visual-side{
  display:grid;
  gap:12px;
}
.visual-mini{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  min-height:176px;
}
.visual-mini img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:4 / 3;
}
.visual-mini .mini-pin{
  position:absolute;
  top:12px;
  left:12px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(17,19,24,.82);
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.visual-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.visual-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:11px 10px;
  text-align:center;
  box-shadow:var(--shadow-soft);
}
.visual-stat strong{
  display:block;
  font-size:20px;
  line-height:1;
  color:var(--accent-dark);
  margin-bottom:3px;
}
.visual-stat span{
  display:block;
  font-size:12px;
  color:var(--muted);
}
.proof-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.proof-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  box-shadow:0 2px 10px rgba(15,23,42,.03);
  font-size:13px;
}
.proof-item i{color:var(--accent-dark)}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.section-head h2{
  margin:6px 0 0;
  font-size:28px;
  line-height:1.15;
  letter-spacing:0;
}
.section-head p{
  margin:6px 0 0;
  color:var(--muted);
}
.section-summary{
  color:var(--muted);
  font-size:14px;
  white-space:nowrap;
}
.switch-row{
  display:flex;
  gap:12px;
  padding:14px;
  margin-bottom:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow-soft);
}
.switch-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
}
.switch-card strong{
  font-size:16px;
}
.switch-card span{
  color:var(--muted);
  font-size:13px;
}
.switch-card.is-active{
  border-color:rgba(239,77,47,.35);
  background:linear-gradient(135deg,rgba(239,77,47,.08),rgba(249,115,22,.08));
}
.filter-bar{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:14px;
  margin-bottom:16px;
}
.filter-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.search-form{
  flex:1 1 280px;
}
.search-form input{
  width:100%;
  min-height:46px;
  border-radius:7px;
  border:1px solid var(--line-strong);
  background:#fff;
  padding:0 14px;
  margin:0;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.search-form input:focus{
  border-color:rgba(239,77,47,.42);
  box-shadow:0 0 0 4px rgba(239,77,47,.08);
}
.filter-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.filter-group .button{
  margin:0;
  padding:.78rem 1rem;
}
.filter-group .button.is-active{
  background:linear-gradient(135deg,rgba(239,77,47,.14),rgba(249,115,22,.14));
  border-color:rgba(239,77,47,.3);
  color:var(--accent-dark);
}
.filter-summary{
  color:var(--muted);
  font-size:14px;
  padding-left:4px;
}
.filter-summary strong{
  color:var(--accent-dark);
  font-size:18px;
}
.directory-layout{
  align-items:start;
}
.directory-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.directory-card{
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.directory-card:hover{
  transform:translateY(-2px);
  border-color:#f2b299;
  box-shadow:0 14px 28px rgba(15,23,42,.08);
}
.card-media{
  position:relative;
  overflow:hidden;
  background:#f6f6f8;
}
.card-media img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
}
.media-tags{
  position:absolute;
  left:12px;
  top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1.2;
  border:1px solid transparent;
}
.label.hot{background:rgba(239,77,47,.92);color:#fff}
.label.light{background:rgba(255,255,255,.92);color:#171717;border-color:rgba(255,255,255,.4)}
.label.soft{background:#fff;color:var(--accent-dark);border-color:rgba(239,77,47,.16)}
.card-body{
  padding:14px 14px 15px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card-title{
  margin:0;
  font-size:18px;
  line-height:1.25;
}
.card-summary{
  color:var(--muted);
  font-size:14px;
  margin:0;
  min-height:42px;
}
.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:12px;
}
.meta-row span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.card-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}
.card-actions .button{
  margin:0;
  padding:.62rem .9rem;
  font-size:13px;
}
.card-actions .button.hollow{
  padding:.62rem .88rem;
}
.is-hidden{display:none !important}

.sidebar-stack{
  position:sticky;
  top:122px;
  display:grid;
  gap:14px;
}
.info-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  padding:16px;
}
.info-card.accent{
  background:linear-gradient(180deg, rgba(239,77,47,.08), rgba(255,255,255,.96));
  border-color:rgba(239,77,47,.16);
}
.info-card h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
}
.info-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.stat-stack{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.stat-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
}
.stat-box strong{
  display:block;
  font-size:20px;
  line-height:1;
  color:var(--accent-dark);
  margin-bottom:3px;
}
.stat-box span{
  color:var(--muted);
  font-size:12px;
}
.info-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.info-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--muted);
  font-size:14px;
}
.info-list i{
  color:var(--success);
  margin-top:3px;
  flex:0 0 auto;
}
.info-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  color:var(--accent-dark);
  font-weight:700;
}

.featured-grid{
  align-items:stretch;
}
.feature-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  min-height:100%;
}
.feature-media{
  position:relative;
  min-height:100%;
}
.feature-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:4 / 3;
}
.feature-copy{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
}
.feature-copy h3{
  margin:0;
  font-size:24px;
  line-height:1.18;
}
.feature-copy p{
  margin:0;
  color:var(--muted);
}
.feature-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.feature-points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.feature-points li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:var(--muted);
  font-size:14px;
}
.feature-points i{
  color:var(--accent-dark);
  margin-top:3px;
}
.feature-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}
.feature-actions .button{margin:0}
.feature-side{
  display:grid;
  gap:12px;
}
.mini-feature{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  padding:12px;
  display:grid;
  grid-template-columns:102px 1fr;
  gap:12px;
  align-items:center;
}
.mini-feature img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:7px;
}
.mini-feature h4{
  margin:0 0 6px;
  font-size:16px;
  line-height:1.25;
}
.mini-feature p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.mini-feature .mini-actions{
  margin-top:10px;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.related-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  display:grid;
  grid-template-columns:160px 1fr;
  min-height:100%;
}
.related-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:1 / 1;
}
.related-copy{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:center;
}
.related-copy h4{
  margin:0;
  font-size:18px;
  line-height:1.25;
}
.related-copy p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.related-copy .button{
  margin:4px 0 0;
  align-self:flex-start;
}
.faq-shell{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.accordion.faq-accordion{
  background:transparent;
  margin:0;
}
.faq-accordion .accordion-item{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.faq-accordion .accordion-title{
  color:var(--ink);
  font-weight:700;
  border:none;
  padding:18px 18px 18px 52px;
  line-height:1.35;
}
.faq-accordion .accordion-title::before{
  left:18px;
  right:auto;
  top:18px;
  color:var(--accent-dark);
  content:"+";
  font-size:20px;
  line-height:1;
  width:20px;
  text-align:center;
}
.faq-accordion .is-active > .accordion-title::before{
  content:"–";
}
.faq-accordion .accordion-content{
  border:none;
  padding:0 18px 18px 52px;
  color:var(--muted);
}
.cta-band{
  background:
    linear-gradient(135deg, rgba(239,77,47,.12), rgba(255,255,255,.95)),
    #fff;
  border:1px solid rgba(239,77,47,.18);
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.cta-copy h2{
  margin:6px 0 8px;
  font-size:28px;
  line-height:1.18;
}
.cta-copy p{
  margin:0;
  color:var(--muted);
  max-width:64ch;
}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.cta-actions .button{margin:0}

.site-footer{
  margin-top:18px;
  background:#111318;
  color:#e5e7eb;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:24px 0 18px;
}
.footer-brand strong{
  display:block;
  color:#fff;
  font-size:20px;
  margin-bottom:8px;
}
.footer-brand p{
  margin:0;
  max-width:58ch;
  color:#c9d0d9;
}
.footer-links-cta .button{
  margin:0;
}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  padding:14px 0 22px;
}
.footer-block{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:16px;
}
.footer-block h3{
  margin:0 0 10px;
  color:#fff;
  font-size:16px;
}
.footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.footer-links a,
.footer-links span{
  color:#c9d0d9;
}
.footer-links a:hover{color:#fff}
.footer-note{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:16px 0 24px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#aeb7c2;
  font-size:13px;
}
.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:300;
  background:#111318;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 30px rgba(0,0,0,.2);
  border-radius:7px;
  padding:12px 14px;
  font-size:14px;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.toast.is-visible{
  opacity:1;
  transform:translateY(0);
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

@media screen and (max-width: 1024px){
  .hero-grid{padding:22px}
  .hero-title{font-size:38px}
  .directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-card{grid-template-columns:1fr}
  .featured-grid .cell{margin-bottom:14px}
  .related-grid{grid-template-columns:1fr}
}
@media screen and (max-width: 768px){
  .nav-shell{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .brand{min-width:0}
  .nav-pills{order:3; width:100%; padding-top:4px}
  .nav-cta{display:none}
  .hero-grid{padding:18px}
  .hero-title{font-size:32px}
  .hero-subtitle{font-size:16px}
  .hero-visual{grid-template-columns:1fr}
  .hero-metrics{grid-template-columns:1fr 1fr}
  .switch-row{flex-direction:column}
  .directory-layout .cell.large-8,
  .directory-layout .cell.large-4{width:100%}
  .sidebar-stack{position:static}
  .directory-grid{grid-template-columns:1fr}
  .filter-row{align-items:stretch}
  .search-form{flex:1 1 100%}
  .cta-band{flex-direction:column; align-items:flex-start}
  .cta-actions{justify-content:flex-start}
  .footer-top,
  .footer-note{flex-direction:column}
  .footer-columns{grid-template-columns:1fr}
  .mini-feature{grid-template-columns:88px 1fr}
}
@media screen and (max-width: 520px){
  .status-inner{gap:8px}
  .status-chip{width:100%; justify-content:flex-start}
  .brand-text strong{font-size:16px}
  .hero-title{font-size:28px}
  .hero-metrics{grid-template-columns:1fr}
  .proof-row{gap:8px}
  .proof-item{width:100%; justify-content:flex-start}
  .section-head{flex-direction:column; align-items:flex-start}
  .section-head h2{font-size:24px}
  .section-summary{white-space:normal}
  .related-card{grid-template-columns:1fr}
  .related-card img{aspect-ratio:16 / 9}
  .feature-copy h3{font-size:22px}
  .cta-copy h2{font-size:24px}
  .card-actions .button,
  .feature-actions .button,
  .cta-actions .button{width:100%; justify-content:center}
}

/* roulang page: category2 */
:root{
  --bg: #f5f6f8;
  --bg-soft: #fcfbf8;
  --surface: #ffffff;
  --surface-2: #fff8f2;
  --ink: #191714;
  --ink-soft: #4f565f;
  --muted: #6f7781;
  --line: #e7e1d8;
  --line-strong: #d8c6b8;
  --accent: #e34a2f;
  --accent-2: #ff8a1f;
  --accent-soft: #fff0e9;
  --accent-strong: #b92f1e;
  --shadow: 0 14px 36px rgba(25, 23, 20, 0.08);
  --shadow-soft: 0 8px 20px rgba(25, 23, 20, 0.06);
  --radius: 8px;
  --radius-sm: 6px;
  --gap: 24px;
  --container: 1200px;
  --good: #0f766e;
}

*,
*::before,
*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  color:var(--ink);
  background:
    linear-gradient(180deg, #fffaf5 0%, #f5f6f8 100%);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height:1.7;
  letter-spacing:0;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.018) 0 1px, transparent 1px 16px);
  opacity:.48;
  z-index:-1;
}

a{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

a:hover{color:var(--accent);}
img,svg{display:block;max-width:100%;}
button,input{
  font:inherit;
}
button{
  cursor:pointer;
}
input{
  border-radius:var(--radius);
}
::selection{
  background:rgba(227,74,47,.18);
  color:var(--ink);
}

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

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter:saturate(140%) blur(12px);
  background:rgba(250,247,243,.93);
  border-bottom:1px solid rgba(25,23,20,.08);
}

.status-strip{
  background:#1a1817;
  color:#f8f2eb;
  font-size:.88rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.status-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:42px;
  padding:8px 0;
  flex-wrap:wrap;
}

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#f8f2eb;
}

.status-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent-2);
  box-shadow:0 0 0 3px rgba(255,138,31,.15);
}

.site-header .nav-shell{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:226px;
}

.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  font-weight:800;
  font-size:1.2rem;
  box-shadow:0 10px 22px rgba(227,74,47,.22);
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.brand-text strong{
  display:block;
  font-size:1.05rem;
  line-height:1.2;
  color:var(--ink);
}

.brand-text span{
  display:block;
  font-size:.86rem;
  color:var(--muted);
}

.nav-pills{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
  flex:1;
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

.nav-pills li{
  flex:0 0 auto;
}

.nav-pills a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-soft);
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}

.nav-pills a:hover{
  transform:translateY(-1px);
  border-color:#ddb39d;
  color:var(--ink);
  box-shadow:var(--shadow-soft);
}

.nav-pills a.is-active,
.nav-pills a[aria-current="page"]{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 20px rgba(227,74,47,.24);
}

.nav-cta{
  margin-left:auto;
  flex:0 0 auto;
}

.button{
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  line-height:1;
  padding:.82rem 1.15rem;
  box-shadow:none;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.button i{
  margin-right:.45rem;
}

.button:hover{
  transform:translateY(-1px);
}

.button.primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(227,74,47,.22);
}

.button.primary:hover,
.button.primary:focus{
  background:linear-gradient(135deg, var(--accent-strong), #ff7b0f);
  color:#fff;
  box-shadow:0 14px 26px rgba(227,74,47,.28);
}

.button.secondary{
  background:#22201d;
  color:#fff;
  border-color:#22201d;
}

.button.secondary:hover{
  background:#111;
  color:#fff;
}

.button.hollow{
  background:#fff;
  color:var(--ink);
  border-color:#cfc7be;
}

.button.hollow:hover{
  border-color:#b78d72;
  background:var(--accent-soft);
  color:var(--ink);
}

.button.small{
  padding:.66rem .92rem;
  font-size:.92rem;
}

.button.tiny{
  padding:.56rem .78rem;
  font-size:.82rem;
}

.badge,
.label,
.section-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid rgba(227,74,47,.12);
  font-size:.82rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.label{
  background:#f5f1ea;
  color:#7a4d38;
  border-color:#e2d6cc;
}

.section-band{
  padding:58px 0;
  position:relative;
}

.section-band + .section-band{
  border-top:1px solid rgba(25,23,20,.06);
}

.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
}

.section-head h2{
  margin:8px 0 0;
  font-size:1.95rem;
  line-height:1.15;
  color:var(--ink);
}

.section-head p{
  margin:0;
  max-width:760px;
  color:var(--muted);
}

.section-head .section-tag{
  margin-bottom:2px;
}

.hero-band{
  padding:34px 0 52px;
  background:
    linear-gradient(135deg, rgba(227,74,47,.08) 0%, rgba(255,138,31,.06) 28%, rgba(255,255,255,.68) 60%, rgba(240,243,247,.85) 100%);
  border-bottom:1px solid rgba(25,23,20,.06);
}

.hero-band .grid-x{
  align-items:center;
}

.hero-copy-box{
  padding:14px 0;
}

.hero-kicker{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.hero-kicker-text{
  color:var(--muted);
  font-size:.96rem;
}

.hero-copy-box h1{
  margin:0 0 14px;
  font-size:3.15rem;
  line-height:1.08;
  color:var(--ink);
  letter-spacing:0;
}

.hero-copy{
  margin:0 0 18px;
  max-width:560px;
  color:var(--ink-soft);
  font-size:1.08rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}

.hero-metrics,
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.trust-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink-soft);
  font-size:.92rem;
}

.trust-item i{
  color:var(--good);
}

.hero-visual{
  position:relative;
  margin:0;
}

.hero-art-frame{
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(135deg, #fff9f3 0%, #f8fbfd 100%);
  border:1px solid rgba(221,179,157,.6);
  box-shadow:var(--shadow);
}

.hero-art{
  width:100%;
  height:auto;
  display:block;
}

.hero-rail{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.hero-rail .trust-item{
  background:rgba(255,255,255,.9);
}

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

.stat-card{
  height:100%;
  padding:18px 18px 16px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.stat-card .stat-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.stat-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-soft);
  color:var(--accent);
  flex:0 0 auto;
}

.stat-card strong{
  display:block;
  font-size:1.05rem;
  line-height:1.3;
  margin-bottom:3px;
}

.stat-card p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.search-box{
  flex:1 1 360px;
  max-width:520px;
}

.search-box label{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:.92rem;
}

.search-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.search-row input{
  flex:1;
  height:48px;
  margin:0;
  border-radius:var(--radius);
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--ink);
  padding:0 14px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}

.search-row input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(227,74,47,.14);
  outline:none;
}

.filter-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.filter-group .button{
  margin:0;
}

.filter-help{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.9rem;
}

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

.topic-card{
  height:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.topic-thumb{
  position:relative;
  min-height:172px;
  padding:16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  background:linear-gradient(135deg, #1d1b19 0%, #503528 100%);
  color:#fff;
}

.topic-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 16px);
  opacity:.52;
  pointer-events:none;
}

.thumb-a{background:linear-gradient(135deg, #231f1d 0%, #7a3626 100%);}
.thumb-b{background:linear-gradient(135deg, #fff0e2 0%, #ffb684 100%); color:#2b1f18;}
.thumb-c{background:linear-gradient(135deg, #1f2329 0%, #3f4a57 100%);}
.thumb-d{background:linear-gradient(135deg, #ffe9dd 0%, #ff9a57 100%); color:#2c1f17;}
.thumb-e{background:linear-gradient(135deg, #202020 0%, #5d4836 100%);}
.thumb-f{background:linear-gradient(135deg, #fff6ed 0%, #ffcaa7 100%); color:#2c1f17;}

.topic-thumb .thumb-badge,
.topic-thumb .thumb-index{
  position:relative;
  z-index:1;
}

.thumb-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:inherit;
  font-size:.82rem;
  font-weight:700;
  backdrop-filter:blur(8px);
}

.thumb-index{
  font-size:2.5rem;
  line-height:1;
  font-weight:800;
  letter-spacing:0;
  opacity:.96;
}

.topic-body{
  padding:16px 16px 18px;
}

.topic-meta,
.ranking-meta,
.mini-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.meta-soft{
  color:var(--muted);
  font-size:.88rem;
}

.topic-body h3,
.spotlight-copy h3,
.related-card h3,
.mini-card h4{
  margin:0 0 10px;
  color:var(--ink);
  line-height:1.24;
}

.topic-body h3{
  font-size:1.18rem;
}

.topic-body p,
.spotlight-copy p,
.related-card p,
.mini-card p,
.ranking-body p{
  margin:0;
  color:var(--muted);
}

.topic-body p{
  min-height:3.45em;
}

.card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.spotlight-grid{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr);
  gap:18px;
  align-items:stretch;
}

.spotlight-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.spotlight-layout{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:0;
  min-height:100%;
}

.spotlight-media{
  position:relative;
  padding:18px;
  background:linear-gradient(135deg, #1f1a18 0%, #5a3528 56%, #8a4324 100%);
  color:#fff;
}

.spotlight-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 34%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 15px);
  opacity:.34;
}

.spotlight-media .media-shell{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
}

.spotlight-visual{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  min-height:238px;
  border-radius:20px;
  padding:18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)),
    linear-gradient(135deg, #1e1b19 0%, #7e3f28 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.spotlight-visual .visual-copy{
  max-width:160px;
}

.spotlight-visual .visual-copy strong{
  display:block;
  font-size:2rem;
  line-height:1;
  margin-bottom:6px;
}

.spotlight-visual .visual-copy span{
  color:rgba(255,255,255,.86);
  font-size:.92rem;
}

.price-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:#fff;
  color:var(--accent);
  font-weight:800;
  font-size:.88rem;
  box-shadow:0 8px 16px rgba(0,0,0,.16);
}

.spotlight-copy{
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.spotlight-copy .section-tag{
  margin-bottom:12px;
}

.point-list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.point-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--ink-soft);
}

.point-list i{
  color:var(--accent);
  margin-top:.18rem;
}

.side-stack{
  display:grid;
  gap:16px;
}

.mini-card{
  padding:18px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.mini-card h4{
  font-size:1.06rem;
}

.mini-card p{
  margin-bottom:12px;
}

.mini-card .mini-meta{
  margin-bottom:12px;
}

.mini-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.mini-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:#f7f4ef;
  border:1px solid #e7ded4;
  color:var(--ink-soft);
  font-size:.94rem;
}

.mini-list li strong{
  color:var(--ink);
}

.ranking-grid{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(300px, 1fr);
  gap:18px;
  align-items:start;
}

.ranking-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:14px;
}

.ranking-item{
  display:grid;
  grid-template-columns:74px minmax(0, 1fr) 190px;
  gap:16px;
  align-items:stretch;
  padding:16px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.rank-index{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:6px;
  font-size:2.3rem;
  font-weight:800;
  line-height:1;
  color:var(--accent);
}

.ranking-media{
  position:relative;
  overflow:hidden;
  min-height:120px;
  border-radius:var(--radius);
  border:1px solid rgba(0,0,0,.06);
  background:linear-gradient(135deg, #fff0e4 0%, #ffb384 100%);
}

.ranking-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 1px, transparent 1px 14px);
  opacity:.45;
}

.ranking-media .thumb-badge{
  position:absolute;
  left:14px;
  top:14px;
  z-index:1;
}

.ranking-media .media-note{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:1;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.2);
}

.ranking-body{
  min-width:0;
}

.ranking-body h3{
  margin:0 0 10px;
  font-size:1.22rem;
  line-height:1.25;
}

.ranking-meta{
  margin:12px 0 0;
}

.ranking-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#f5f1ea;
  color:var(--ink-soft);
  font-size:.88rem;
}

.ranking-actions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.quick-panel{
  padding:20px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.quick-panel h3{
  margin:0 0 10px;
  font-size:1.15rem;
}

.quick-panel p{
  margin:0 0 14px;
  color:var(--muted);
}

.quick-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.quick-tags .badge,
.quick-tags .label{
  background:#fff;
}

.quick-box{
  padding:14px;
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  border:1px solid #edd7ca;
  color:var(--ink-soft);
}

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

.related-card{
  display:flex;
  gap:14px;
  align-items:stretch;
  padding:16px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  min-height:160px;
}

.related-thumb{
  width:112px;
  flex:0 0 112px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg, #231f1d 0%, #7b3d27 100%);
  position:relative;
  overflow:hidden;
}

.related-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 1px, transparent 1px 12px);
  opacity:.42;
}

.related-card:nth-child(2) .related-thumb{background:linear-gradient(135deg, #fff0e2 0%, #ffb273 100%);}
.related-card:nth-child(3) .related-thumb{background:linear-gradient(135deg, #1f2329 0%, #4b5763 100%);}

.related-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.related-body .card-actions{
  margin-top:12px;
}

.faq-wrap .accordion{
  background:transparent;
  border:0;
}

.faq-wrap .accordion-item{
  margin-bottom:12px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  background:var(--surface);
}

.faq-wrap .accordion-title{
  color:var(--ink);
  font-weight:700;
  font-size:1rem;
  background:#fff;
  padding:1rem 1.1rem;
  border:0;
  line-height:1.45;
}

.faq-wrap .accordion-title:hover,
.faq-wrap .accordion-title:focus{
  background:var(--accent-soft);
  color:var(--ink);
}

.faq-wrap .accordion-title::before{
  color:var(--accent);
  font-size:1.25rem;
  margin-top:-0.2rem;
}

.faq-wrap .accordion-content{
  border:0;
  background:#fff;
  padding:0 1.1rem 1rem;
  color:var(--muted);
}

.faq-wrap .accordion-content p{
  margin:0;
}

.cta-callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:24px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, #1b1716 0%, #312521 52%, #4d2416 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}

.cta-callout h2{
  margin:10px 0 10px;
  color:#fff;
  font-size:1.9rem;
  line-height:1.2;
}

.cta-callout p{
  margin:0;
  color:rgba(255,255,255,.82);
  max-width:620px;
}

.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.cta-callout .button.hollow{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.28);
}

.cta-callout .button.hollow:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.45);
}

.site-footer{
  background:#151312;
  color:#f2ebe4;
  padding:34px 0 20px;
  border-top:1px solid rgba(255,255,255,.08);
}

.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-brand strong{
  display:block;
  font-size:1.05rem;
  margin-bottom:6px;
}

.footer-brand p{
  margin:0;
  color:rgba(242,235,228,.72);
  max-width:560px;
}

.footer-columns{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  padding:20px 0 12px;
}

.footer-block h3{
  margin:0 0 12px;
  font-size:1rem;
  color:#fff;
}

.footer-links{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.footer-links a,
.footer-links span{
  color:rgba(242,235,228,.76);
}

.footer-links a:hover{
  color:#fff;
}

.footer-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(242,235,228,.62);
  font-size:.92rem;
}

.no-results{
  margin-top:16px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px dashed #d9c6b7;
  background:#fff8f2;
  color:var(--ink-soft);
}

.action-toast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  min-width:220px;
  max-width:300px;
  padding:12px 14px;
  border-radius:var(--radius);
  background:#111;
  color:#fff;
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}

.action-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}

.topic-card:hover,
.stat-card:hover,
.spotlight-card:hover,
.mini-card:hover,
.ranking-item:hover,
.related-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(25,23,20,.10);
}

.topic-card,
.stat-card,
.spotlight-card,
.mini-card,
.ranking-item,
.related-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

:focus-visible{
  outline:3px solid rgba(227,74,47,.22);
  outline-offset:2px;
}

@media screen and (max-width: 1024px){
  .hero-copy-box h1{
    font-size:2.7rem;
  }
  .spotlight-layout,
  .ranking-grid{
    grid-template-columns:1fr;
  }
  .spotlight-visual{
    min-height:220px;
  }
  .topic-grid,
  .related-row,
  .footer-columns{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .ranking-item{
    grid-template-columns:70px minmax(0, 1fr);
  }
  .ranking-media{
    grid-column:1 / -1;
    min-height:160px;
    order:3;
  }
  .ranking-body{
    grid-column:1 / -1;
  }
}

@media screen and (max-width: 768px){
  .site-header .nav-shell{
    flex-wrap:wrap;
  }
  .brand{
    min-width:0;
    width:100%;
  }
  .nav-pills{
    width:100%;
    padding-bottom:2px;
  }
  .hero-copy-box h1{
    font-size:2.25rem;
  }
  .section-head h2{
    font-size:1.55rem;
  }
  .update-strip,
  .topic-grid,
  .related-row,
  .footer-columns{
    grid-template-columns:1fr;
  }
  .spotlight-layout{
    grid-template-columns:1fr;
  }
  .cta-callout,
  .footer-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .cta-actions{
    width:100%;
    justify-content:flex-start;
  }
  .ranking-item{
    grid-template-columns:1fr;
  }
  .rank-index{
    justify-content:flex-start;
    padding-top:0;
    font-size:1.9rem;
  }
  .ranking-media{
    min-height:150px;
    order:0;
  }
  .hero-actions,
  .hero-metrics,
  .trust-row,
  .hero-rail{
    gap:8px;
  }
  .button{
    width:auto;
  }
}

@media screen and (max-width: 520px){
  .grid-container{
    padding-left:14px;
    padding-right:14px;
  }
  .site-header .nav-shell{
    padding:12px 0;
  }
  .brand-mark{
    width:40px;
    height:40px;
    font-size:1.05rem;
  }
  .brand-text strong{
    font-size:1rem;
  }
  .hero-copy-box h1{
    font-size:1.95rem;
  }
  .hero-copy{
    font-size:1rem;
  }
  .hero-art-frame{
    border-radius:20px;
  }
  .topic-thumb,
  .ranking-media,
  .related-thumb{
    min-height:138px;
  }
  .related-card{
    flex-direction:column;
  }
  .related-thumb{
    width:100%;
    flex-basis:auto;
  }
  .action-toast{
    left:14px;
    right:14px;
    min-width:0;
    max-width:none;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}