/* roulang page: index */
:root{
      --bg: #f7f1e8;
      --bg-soft: #fdf8f1;
      --surface: #fffaf4;
      --surface-strong: #fff4ea;
      --surface-dark: #2b2420;
      --surface-dark-2: #372f2a;
      --text: #2b2420;
      --muted: #6d5d52;
      --soft: #8f7f74;
      --border: #dcc9ba;
      --border-strong: #caa894;
      --accent: #d96b4b;
      --accent-2: #b85b46;
      --accent-soft: #ffe0d4;
      --accent-warm: #f3b28f;
      --good: #5a7a4d;
      --shadow: 0 10px 24px rgba(62, 43, 31, .08);
      --shadow-soft: 0 4px 12px rgba(62, 43, 31, .06);
      --radius: 8px;
      --radius-sm: 6px;
      --space: 1rem;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
      background:
        linear-gradient(180deg, #fcf8f3 0%, #f7f1e8 36%, #f5efe6 100%);
      color:var(--text);
      letter-spacing:0;
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    a{
      color:inherit;
      text-decoration:none;
      transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }
    a:hover{ color:var(--accent-2); }
    img{ max-width:100%; display:block; }
    button, input, select, textarea{
      font:inherit;
      letter-spacing:0;
    }
    ::selection{
      background: rgba(217,107,75,.18);
      color: var(--text);
    }
    :focus-visible{
      outline: 2px solid rgba(217,107,75,.45);
      outline-offset: 2px;
    }
    .page-wrap{
      position:relative;
      min-height:100vh;
      padding-bottom:0;
    }
    .container-xl{
      max-width:1180px;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:1035;
      background: rgba(252, 248, 243, .92);
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(220,201,186,.75);
    }
    .header-inner{
      min-height:74px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding: .75rem 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:.8rem;
      min-width:0;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:10px;
      background: linear-gradient(145deg, var(--accent), #e88963);
      color:#fff;
      display:grid;
      place-items:center;
      font-weight:800;
      box-shadow: var(--shadow-soft);
      flex:0 0 auto;
    }
    .brand-text{
      min-width:0;
      line-height:1.2;
    }
    .brand-name{
      display:block;
      font-size:1rem;
      font-weight:800;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-note{
      display:block;
      margin-top:.15rem;
      font-size:.82rem;
      color:var(--muted);
      white-space:nowrap;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap: .5rem;
    }
    .desktop-nav a{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.65rem .9rem;
      border-radius:var(--radius-sm);
      color:var(--muted);
      font-weight:600;
      border:1px solid transparent;
    }
    .desktop-nav a:hover{
      background: rgba(217,107,75,.08);
      border-color: rgba(217,107,75,.16);
      color:var(--accent-2);
    }
    .desktop-nav a.active,
    .desktop-nav a[aria-current="page"]{
      background: rgba(217,107,75,.1);
      border-color: rgba(217,107,75,.26);
      color: var(--accent-2);
    }
    .header-meta{
      display:flex;
      align-items:center;
      gap:.7rem;
    }
    .status-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      min-height:40px;
      padding:.45rem .75rem;
      border-radius:999px;
      background: rgba(217,107,75,.08);
      color: var(--accent-2);
      font-size:.88rem;
      font-weight:700;
      border:1px solid rgba(217,107,75,.16);
      white-space:nowrap;
    }
    .status-dot{
      width:8px;
      height:8px;
      border-radius:999px;
      background: var(--good);
      box-shadow: 0 0 0 3px rgba(90,122,77,.12);
      flex:0 0 auto;
    }
    .top-cta{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      min-height:40px;
      padding:.55rem .9rem;
      border-radius:var(--radius-sm);
      background: var(--surface);
      border:1px solid var(--border);
      color: var(--text);
      font-weight:700;
      box-shadow: var(--shadow-soft);
      white-space:nowrap;
    }
    .top-cta:hover{
      transform: translateY(-1px);
      border-color: rgba(217,107,75,.34);
      color: var(--accent-2);
      box-shadow: 0 10px 22px rgba(62,43,31,.09);
    }

    main{
      display:block;
    }
    section{
      padding: 4.2rem 0;
      position:relative;
    }
    section.alt{
      background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.18));
      border-top: 1px solid rgba(220,201,186,.4);
      border-bottom: 1px solid rgba(220,201,186,.4);
    }
    section.dark-band{
      background: linear-gradient(145deg, var(--surface-dark), var(--surface-dark-2));
      color:#fff;
    }

    .crumbs{
      display:flex;
      align-items:center;
      gap:.45rem;
      color:var(--muted);
      font-size:.92rem;
      margin-bottom: 1rem;
      flex-wrap:wrap;
    }
    .crumbs a{
      color:var(--muted);
    }
    .crumbs a:hover{
      color:var(--accent-2);
    }

    .hero{
      padding-top: 2.1rem;
      overflow:hidden;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 1.25rem;
      align-items: stretch;
    }
    .hero-copy-block{
      padding: 1.25rem 0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .8rem;
      border-radius:999px;
      background: rgba(217,107,75,.09);
      border:1px solid rgba(217,107,75,.18);
      color: var(--accent-2);
      font-size:.88rem;
      font-weight:700;
      margin-bottom: 1rem;
      white-space:nowrap;
    }
    .hero h1{
      margin:0;
      font-size: 3.05rem;
      line-height:1.12;
      letter-spacing:0;
      font-weight:900;
      max-width: 11.5em;
    }
    .hero-lead{
      margin: 1rem 0 0;
      max-width: 47rem;
      color: var(--muted);
      font-size: 1.06rem;
    }
    .hero-actions{
      display:flex;
      align-items:center;
      gap:.8rem;
      flex-wrap:wrap;
      margin-top:1.35rem;
    }
    .btn-soft,
    .btn-accent{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      min-height:46px;
      padding:.72rem 1rem;
      border-radius:var(--radius-sm);
      border:1px solid transparent;
      font-weight:800;
      white-space:nowrap;
      box-shadow:none;
      text-decoration:none;
    }
    .btn-accent{
      background: var(--accent);
      border-color: var(--accent);
      color:#fff;
      box-shadow: 0 10px 18px rgba(217,107,75,.18);
    }
    .btn-accent:hover{
      background: #cd5e3f;
      border-color: #cd5e3f;
      color:#fff;
      transform: translateY(-1px);
      box-shadow: 0 12px 20px rgba(217,107,75,.22);
    }
    .btn-soft{
      background: rgba(255,255,255,.76);
      color: var(--text);
      border-color: var(--border);
    }
    .btn-soft:hover{
      background: #fff;
      border-color: rgba(217,107,75,.3);
      color: var(--accent-2);
      transform: translateY(-1px);
      box-shadow: var(--shadow-soft);
    }
    .hero-chips{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:1.2rem;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.38rem .7rem;
      border-radius:999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.68);
      color: var(--muted);
      font-size:.9rem;
      white-space:nowrap;
    }
    .chip strong{
      color: var(--text);
    }

    .hero-panel{
      background: linear-gradient(180deg, rgba(255,250,244,.96), rgba(255,248,239,.94));
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 1rem;
      display:flex;
      flex-direction:column;
      gap: 1rem;
      min-height:100%;
    }
    .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      padding-bottom:.3rem;
      border-bottom:1px solid rgba(220,201,186,.7);
      color: var(--muted);
      font-size:.92rem;
      font-weight:700;
    }
    .hero-bento{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:.8rem;
    }
    .mini-card{
      background: rgba(255,255,255,.85);
      border:1px solid rgba(220,201,186,.9);
      border-radius: var(--radius-sm);
      padding: .95rem;
      min-height: 104px;
      box-shadow: var(--shadow-soft);
    }
    .mini-card h3{
      margin:0;
      font-size: 1.02rem;
      line-height:1.25;
      font-weight:800;
    }
    .mini-card p{
      margin:.45rem 0 0;
      color: var(--muted);
      font-size:.92rem;
    }
    .mini-card.highlight{
      background: linear-gradient(145deg, rgba(217,107,75,.11), rgba(255,255,255,.95));
      border-color: rgba(217,107,75,.2);
    }
    .mini-card .mini-label{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      color: var(--accent-2);
      font-size:.82rem;
      font-weight:800;
      margin-bottom:.45rem;
    }
    .path-list{
      display:grid;
      gap:.55rem;
    }
    .path-item{
      display:flex;
      align-items:flex-start;
      gap:.7rem;
      padding:.7rem .8rem;
      border-radius:var(--radius-sm);
      background: rgba(255,255,255,.74);
      border:1px solid rgba(220,201,186,.82);
      color: var(--muted);
      font-size:.93rem;
      box-shadow: var(--shadow-soft);
    }
    .path-num{
      width:24px;
      height:24px;
      border-radius:999px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      background: rgba(217,107,75,.12);
      color: var(--accent-2);
      font-weight:800;
      font-size:.82rem;
    }

    .section-head{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:1rem;
      align-items:flex-end;
      margin-bottom: 1.4rem;
    }
    .section-head h2{
      margin:0;
      font-size: 2rem;
      line-height:1.2;
      font-weight:900;
    }
    .section-head p{
      margin:0;
      max-width: 44rem;
      color: var(--muted);
    }

    .panel{
      background: var(--surface);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }
    .panel-pad{
      padding: 1rem;
    }
    .issue-card{
      background: linear-gradient(180deg, #fffdfa, #fff7f1);
      border:1px solid rgba(220,201,186,.9);
      border-radius: var(--radius);
      padding:1rem;
      height:100%;
      box-shadow: var(--shadow-soft);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .issue-card:hover{
      transform: translateY(-2px);
      border-color: rgba(217,107,75,.26);
      box-shadow: 0 12px 24px rgba(62,43,31,.08);
    }
    .issue-icon{
      width:42px;
      height:42px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background: rgba(217,107,75,.12);
      color: var(--accent-2);
      margin-bottom:.8rem;
      font-size:1.1rem;
    }
    .issue-card h3{
      margin:0 0 .45rem;
      font-size:1.05rem;
      font-weight:800;
    }
    .issue-card p{
      margin:0;
      color: var(--muted);
      font-size:.95rem;
    }

    .step-card{
      background: var(--surface);
      border:1px solid var(--border);
      border-radius: var(--radius);
      padding:1rem;
      height:100%;
      box-shadow: var(--shadow-soft);
      position:relative;
    }
    .step-card .step-index{
      width:30px;
      height:30px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background: var(--accent);
      color:#fff;
      font-weight:800;
      margin-bottom:.8rem;
      box-shadow: 0 8px 14px rgba(217,107,75,.16);
    }
    .step-card h3{
      margin:0 0 .45rem;
      font-size:1.08rem;
      font-weight:800;
    }
    .step-card p{
      margin:0;
      color: var(--muted);
    }
    .solution-panel{
      height:100%;
      border:1px solid var(--border);
      border-radius: var(--radius);
      background: linear-gradient(180deg, #fffaf4, #fff8f3);
      box-shadow: var(--shadow);
      padding:1rem;
    }
    .solution-panel h3{
      margin:0 0 .65rem;
      font-size:1.15rem;
      font-weight:900;
    }
    .check-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.65rem;
    }
    .check-list li{
      display:flex;
      align-items:flex-start;
      gap:.65rem;
      color: var(--muted);
      padding:.55rem .7rem;
      background: rgba(255,255,255,.82);
      border:1px solid rgba(220,201,186,.8);
      border-radius: var(--radius-sm);
    }
    .check-list i{
      color: var(--good);
      font-size:1rem;
      line-height:1.6;
      margin-top:.06rem;
      flex:0 0 auto;
    }
    .category-strip{
      margin-top: .95rem;
      padding: .95rem;
      border-radius: var(--radius);
      border:1px solid rgba(217,107,75,.18);
      background: linear-gradient(145deg, rgba(217,107,75,.08), rgba(255,255,255,.92));
    }
    .category-strip .label{
      color: var(--accent-2);
      font-size:.84rem;
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      margin-bottom:.4rem;
    }
    .category-strip .title{
      font-size:1.08rem;
      font-weight:900;
      margin:0 0 .35rem;
    }
    .category-strip .meta{
      color: var(--muted);
      margin:0 0 .65rem;
      font-size:.95rem;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.36rem .65rem;
      border-radius:999px;
      font-size:.85rem;
      border:1px solid rgba(220,201,186,.9);
      background: rgba(255,255,255,.88);
      color: var(--muted);
      white-space:nowrap;
    }
    .tag.soft{
      background: rgba(217,107,75,.09);
      color: var(--accent-2);
      border-color: rgba(217,107,75,.16);
      font-weight:700;
    }

    .stat-rail{
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap:.85rem;
    }
    .stat-card{
      background: linear-gradient(180deg, #fffdfb, #fff6ef);
      border:1px solid rgba(220,201,186,.95);
      border-radius: var(--radius);
      padding: 1rem;
      box-shadow: var(--shadow-soft);
      min-height: 150px;
    }
    .stat-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-bottom:.75rem;
    }
    .stat-icon{
      width:38px;
      height:38px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background: rgba(217,107,75,.12);
      color: var(--accent-2);
      flex:0 0 auto;
    }
    .stat-value{
      font-size:2rem;
      line-height:1;
      font-weight:900;
      letter-spacing:0;
      margin:0;
    }
    .stat-label{
      margin:.35rem 0 0;
      color: var(--muted);
      font-weight:700;
    }
    .stat-note{
      margin:.55rem 0 0;
      color: var(--soft);
      font-size:.92rem;
    }
    .progress-mini{
      height: 8px;
      border-radius:999px;
      background: rgba(220,201,186,.35);
      overflow:hidden;
      margin-top: .9rem;
    }
    .progress-mini > span{
      display:block;
      height:100%;
      border-radius:999px;
      background: linear-gradient(90deg, var(--accent), #eb8c62);
    }

    .testimonial-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom: 1.2rem;
      flex-wrap:wrap;
    }
    .avatar-stack{
      display:flex;
      align-items:center;
      gap:-.45rem;
    }
    .avatar{
      width:38px;
      height:38px;
      border-radius:999px;
      border:2px solid #fff;
      display:grid;
      place-items:center;
      font-size:.8rem;
      font-weight:800;
      margin-left:-.45rem;
      box-shadow: var(--shadow-soft);
      flex:0 0 auto;
    }
    .avatar:first-child{ margin-left:0; }
    .avatar.a1{ background:#f4b798; color:#3a251c; }
    .avatar.a2{ background:#d96b4b; color:#fff; }
    .avatar.a3{ background:#f1d1c4; color:#51362c; }
    .avatar.a4{ background:#b85b46; color:#fff; }
    .avatar.a5{ background:#ead8c9; color:#503f34; }
    .avatar.a6{ background:#7f9c75; color:#fff; }
    .testimonial-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:.85rem;
    }
    .quote-card{
      background: linear-gradient(180deg, #fffdfa, #fff7f2);
      border:1px solid rgba(220,201,186,.92);
      border-radius: var(--radius);
      padding: 1rem;
      box-shadow: var(--shadow-soft);
      display:flex;
      flex-direction:column;
      gap:.8rem;
      min-height: 100%;
    }
    .quote-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.7rem;
    }
    .quote-user{
      display:flex;
      align-items:center;
      gap:.65rem;
      min-width:0;
    }
    .quote-user .avatar{
      margin:0;
      width:36px;
      height:36px;
      border-width:1px;
    }
    .quote-user strong{
      display:block;
      font-size:.98rem;
      font-weight:800;
      line-height:1.2;
    }
    .quote-user span{
      display:block;
      color:var(--muted);
      font-size:.84rem;
      margin-top:.1rem;
    }
    .stars{
      color:#d28c2a;
      display:flex;
      gap:.15rem;
      font-size:.86rem;
      flex:0 0 auto;
    }
    .quote-bubble{
      padding: .85rem .95rem;
      border-radius: var(--radius);
      background: rgba(217,107,75,.08);
      border:1px solid rgba(217,107,75,.16);
      color: var(--text);
      position:relative;
      min-height: 76px;
    }
    .quote-bubble::before{
      content:"";
      position:absolute;
      left: 16px;
      top: -7px;
      width: 12px;
      height: 12px;
      background: rgba(217,107,75,.08);
      border-left:1px solid rgba(217,107,75,.16);
      border-top:1px solid rgba(217,107,75,.16);
      transform: rotate(45deg);
    }
    .quote-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
    }

    .lead-wrap{
      display:grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 1rem;
      align-items:stretch;
    }
    .lead-form,
    .lead-note{
      background: var(--surface);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      padding: 1rem;
      height:100%;
    }
    .lead-form h3,
    .lead-note h3{
      margin:0 0 .65rem;
      font-size:1.2rem;
      font-weight:900;
    }
    .lead-form p,
    .lead-note p{
      color: var(--muted);
      margin:0 0 1rem;
    }
    .form-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:.8rem;
    }
    .field{
      display:flex;
      flex-direction:column;
      gap:.35rem;
    }
    .field.full{
      grid-column:1 / -1;
    }
    .field label{
      font-weight:800;
      font-size:.92rem;
      color: var(--text);
    }
    .field input,
    .field select,
    .field textarea{
      width:100%;
      border:1px solid var(--border);
      background:#fff;
      border-radius:var(--radius-sm);
      color:var(--text);
      padding:.78rem .85rem;
      transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .field input::placeholder,
    .field textarea::placeholder{
      color: #a5978d;
    }
    .field input:focus,
    .field select:focus,
    .field textarea:focus{
      border-color: rgba(217,107,75,.45);
      box-shadow: 0 0 0 .18rem rgba(217,107,75,.1);
      outline:none;
    }
    .field textarea{
      min-height: 112px;
      resize: vertical;
    }
    .form-actions{
      display:flex;
      align-items:center;
      gap:.75rem;
      flex-wrap:wrap;
      margin-top: .95rem;
    }
    .form-note{
      margin-top:.8rem;
      color: var(--soft);
      font-size:.9rem;
    }
    .aside-list{
      display:grid;
      gap:.75rem;
    }
    .aside-item{
      display:flex;
      align-items:flex-start;
      gap:.75rem;
      padding:.8rem .85rem;
      border-radius: var(--radius-sm);
      border:1px solid rgba(220,201,186,.88);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,244,.9));
    }
    .aside-item i{
      width:34px;
      height:34px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background: rgba(217,107,75,.12);
      color: var(--accent-2);
      flex:0 0 auto;
    }
    .aside-item strong{
      display:block;
      font-size:.98rem;
      margin-bottom:.12rem;
    }
    .aside-item span{
      display:block;
      color: var(--muted);
      font-size:.92rem;
    }

    .news-wrap{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 1rem;
      align-items:start;
    }
    .news-list,
    .news-side{
      background: var(--surface);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      padding: 1rem;
    }
    .news-list h3,
    .news-side h3{
      margin:0 0 .65rem;
      font-size:1.15rem;
      font-weight:900;
    }
    .news-list p,
    .news-side p{
      color:var(--muted);
      margin:0 0 1rem;
    }
    .news-items{
      display:grid;
      gap:.15rem;
    }
    .news-item{
      display:grid;
      grid-template-columns: auto 1fr auto;
      gap:.8rem;
      align-items:start;
      padding: .95rem 0;
      border-top:1px solid rgba(220,201,186,.7);
    }
    .news-item:first-child{
      border-top:none;
      padding-top:0;
    }
    .news-dot{
      width:36px;
      height:36px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background: rgba(217,107,75,.12);
      color: var(--accent-2);
      flex:0 0 auto;
    }
    .news-item h4{
      margin:0 0 .25rem;
      font-size:1rem;
      font-weight:800;
      line-height:1.35;
    }
    .news-item h4 a:hover{
      color:var(--accent-2);
    }
    .news-item .excerpt{
      color: var(--muted);
      font-size:.93rem;
      margin:0;
    }
    .news-meta{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:.35rem;
      color: var(--soft);
      font-size:.82rem;
      white-space:nowrap;
    }
    .news-side .spotlight{
      padding: .95rem;
      border-radius: var(--radius);
      border:1px solid rgba(217,107,75,.18);
      background: linear-gradient(145deg, rgba(217,107,75,.09), rgba(255,255,255,.92));
      margin-bottom: .95rem;
    }
    .news-side .spotlight strong{
      display:block;
      font-size:1.05rem;
      margin-bottom:.35rem;
    }
    .news-side .spotlight p{
      margin:0;
      color:var(--muted);
    }
    .pill-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:.9rem;
    }

    .privacy-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:.85rem;
    }
    .privacy-card{
      background: var(--surface);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      padding:1rem;
      min-height:100%;
    }
    .privacy-icon{
      width:40px;
      height:40px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background: rgba(217,107,75,.12);
      color: var(--accent-2);
      margin-bottom:.8rem;
      font-size:1.05rem;
    }
    .privacy-card h3{
      margin:0 0 .4rem;
      font-size:1.02rem;
      font-weight:800;
    }
    .privacy-card p{
      margin:0;
      color:var(--muted);
    }
    .privacy-foot{
      margin-top: 1rem;
      padding: .9rem 1rem;
      border-radius: var(--radius);
      background: rgba(255,255,255,.72);
      border:1px solid rgba(220,201,186,.8);
      color: var(--muted);
    }

    .accordion{
      --bs-accordion-bg: #fffaf4;
      --bs-accordion-btn-bg: #fffaf4;
      --bs-accordion-active-bg: #fffaf4;
      --bs-accordion-border-color: rgba(220,201,186,.9);
      --bs-accordion-btn-focus-border-color: rgba(217,107,75,.26);
      --bs-accordion-btn-focus-box-shadow: 0 0 0 .18rem rgba(217,107,75,.08);
      --bs-accordion-btn-color: var(--text);
      --bs-accordion-color: var(--muted);
      --bs-accordion-body-padding-x: 1rem;
      --bs-accordion-body-padding-y: 0 1rem 1rem 1rem;
    }
    .accordion-item{
      border-radius: var(--radius) !important;
      overflow:hidden;
      margin-bottom:.75rem;
      box-shadow: var(--shadow-soft);
    }
    .accordion-button{
      font-weight:800;
      padding: 1rem;
      box-shadow:none !important;
    }
    .accordion-button:not(.collapsed){
      color: var(--accent-2);
      background: linear-gradient(180deg, rgba(217,107,75,.07), rgba(255,255,255,.95));
    }
    .accordion-body{
      padding-top:0;
      color: var(--muted);
    }

    .cta-box{
      padding: 1.3rem;
      background: linear-gradient(145deg, var(--surface-dark), #433730);
      border:1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      color:#fff;
      box-shadow: 0 20px 40px rgba(44,32,24,.18);
    }
    .cta-box h2{
      margin:0;
      font-size:2rem;
      line-height:1.2;
      font-weight:900;
    }
    .cta-box p{
      margin: .85rem 0 0;
      color: rgba(255,255,255,.82);
      max-width: 48rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-top:1.1rem;
    }
    .btn-light-soft{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      min-height:46px;
      padding:.72rem 1rem;
      border-radius:var(--radius-sm);
      background: #fff;
      color: var(--text);
      font-weight:800;
      border:1px solid rgba(255,255,255,.3);
    }
    .btn-light-soft:hover{
      transform: translateY(-1px);
      color: var(--accent-2);
      box-shadow: 0 12px 20px rgba(0,0,0,.12);
    }
    .cta-mini{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:.95rem;
    }
    .cta-mini .chip{
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,255,255,.82);
    }
    .cta-mini .chip strong{
      color:#fff;
    }

    .site-footer{
      padding: 2.2rem 0 6.5rem;
      background: #f4ede4;
      border-top:1px solid rgba(220,201,186,.65);
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr .9fr;
      gap:1rem;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:.8rem;
      margin-bottom:.85rem;
    }
    .footer-brand .brand-mark{
      width:40px;
      height:40px;
    }
    .footer-copy{
      color:var(--muted);
      margin:0;
      max-width: 32rem;
    }
    .footer-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.55rem;
    }
    .footer-list a{
      color:var(--muted);
    }
    .footer-list a:hover{
      color:var(--accent-2);
    }
    .footer-title{
      margin:0 0 .8rem;
      font-size:1rem;
      font-weight:900;
    }
    .copyright{
      margin-top: 1.25rem;
      padding-top: 1rem;
      border-top:1px solid rgba(220,201,186,.7);
      color:var(--soft);
      font-size:.9rem;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:.65rem;
    }

    .mobile-tabs{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:1040;
      display:none;
      background: rgba(252,248,243,.96);
      backdrop-filter: blur(10px);
      border-top:1px solid rgba(220,201,186,.85);
      box-shadow: 0 -10px 24px rgba(62,43,31,.06);
    }
    .mobile-tabs .tabs-inner{
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap:.25rem;
      padding: .5rem .6rem;
    }
    .mobile-tabs a{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:.18rem;
      padding:.52rem .25rem .45rem;
      border-radius: var(--radius-sm);
      color: var(--muted);
      font-size:.78rem;
      font-weight:700;
      min-height:54px;
      border:1px solid transparent;
    }
    .mobile-tabs a i{
      font-size:1.08rem;
      line-height:1;
    }
    .mobile-tabs a.active,
    .mobile-tabs a[aria-current="page"]{
      background: rgba(217,107,75,.09);
      color: var(--accent-2);
      border-color: rgba(217,107,75,.16);
    }
    .mobile-tabs a:hover{
      color: var(--accent-2);
    }

    .section-note{
      color:var(--soft);
      font-size:.9rem;
      margin-top:.75rem;
    }

    @media (max-width: 1199.98px){
      .hero h1{ font-size: 2.8rem; }
      .stat-rail{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .testimonial-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .privacy-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .footer-grid{ grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 991.98px){
      .desktop-nav{ display:none; }
      .hero-grid,
      .lead-wrap,
      .news-wrap{
        grid-template-columns: 1fr;
      }
      .header-meta .status-chip{ display:none; }
      .hero h1{ font-size: 2.45rem; max-width: 12em; }
      .hero-lead{ max-width: 100%; }
      .hero-panel{ order:2; }
      .hero-copy-block{ order:1; }
      .mobile-tabs{ display:block; }
      .page-wrap{ padding-bottom: 5.6rem; }
      .hero-bento{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .stat-rail{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .privacy-grid{ grid-template-columns: 1fr; }
      .footer-grid{ grid-template-columns: 1fr; }
    }
    @media (max-width: 767.98px){
      section{ padding: 3.4rem 0; }
      .header-inner{ min-height:66px; }
      .brand-note{ display:none; }
      .top-cta{
        padding:.5rem .75rem;
      }
      .hero{ padding-top: 1.6rem; }
      .hero h1{ font-size: 2.1rem; }
      .hero-actions .btn-accent,
      .hero-actions .btn-soft,
      .cta-actions .btn-accent,
      .cta-actions .btn-light-soft{
        width:100%;
      }
      .hero-bento{ grid-template-columns: 1fr; }
      .stat-rail{ grid-template-columns: 1fr; }
      .testimonial-grid{ grid-template-columns: 1fr; }
      .news-item{
        grid-template-columns: auto 1fr;
      }
      .news-meta{
        grid-column: 2 / -1;
        align-items:flex-start;
        padding-left: 3.05rem;
      }
      .form-grid{ grid-template-columns: 1fr; }
      .hero-lead,
      .section-head p,
      .cta-box p{
        font-size: .98rem;
      }
      .section-head h2,
      .cta-box h2{
        font-size: 1.55rem;
      }
    }
    @media (max-width: 575.98px){
      .container-xl{
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .brand-name{
        font-size:.96rem;
      }
      .hero h1{
        font-size: 1.9rem;
      }
      .panel,
      .lead-form,
      .lead-note,
      .news-list,
      .news-side,
      .privacy-card,
      .issue-card,
      .step-card,
      .quote-card,
      .stat-card{
        border-radius: 7px;
      }
      .mobile-tabs .tabs-inner{
        padding:.45rem .45rem;
      }
      .mobile-tabs a{
        min-height:52px;
        font-size:.74rem;
      }
    }

/* roulang page: category1 */
:root {
      --bg: #f6efe7;
      --bg-soft: #fbf6f0;
      --surface: #fffaf4;
      --surface-2: #f2e7db;
      --surface-3: #efe3d6;
      --text: #221811;
      --muted: #6f5d51;
      --line: #e6d8ca;
      --line-strong: #d7c4b3;
      --accent: #d56f4d;
      --accent-2: #b96143;
      --accent-soft: #f6d4c2;
      --ink: #1f160f;
      --shadow: 0 18px 40px rgba(68, 42, 24, 0.08);
      --shadow-soft: 0 10px 22px rgba(68, 42, 24, 0.06);
      --radius: 8px;
      --radius-sm: 6px;
      --container-pad: clamp(1rem, 2vw, 1.4rem);
      --section-gap: clamp(2.2rem, 4vw, 4rem);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.92)),
        repeating-linear-gradient(90deg, rgba(198, 176, 160, 0.08) 0 1px, transparent 1px 138px),
        linear-gradient(180deg, #f8f2eb 0%, #f5ede5 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.65;
      letter-spacing: 0;
      overflow-x: hidden;
      padding-bottom: 0;
    }

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

    a:hover {
      color: inherit;
    }

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

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

    :focus-visible {
      outline: 3px solid rgba(213, 111, 77, 0.35);
      outline-offset: 2px;
    }

    .container-xl {
      padding-left: var(--container-pad);
      padding-right: var(--container-pad);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1030;
      background: rgba(252, 247, 241, 0.88);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(231, 219, 208, 0.9);
    }

    .header-inner {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .brand,
    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      min-width: 0;
    }

    .brand-mark,
    .footer-brand .brand-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      flex: 0 0 42px;
      border-radius: 8px;
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
      color: #fff;
      font-weight: 700;
      font-size: 1.05rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
    }

    .brand-text,
    .footer-brand .brand-text {
      display: grid;
      min-width: 0;
    }

    .brand-name {
      font-weight: 800;
      font-size: 1.02rem;
      line-height: 1.2;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand-note {
      font-size: .78rem;
      color: var(--muted);
      line-height: 1.2;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .35rem;
      border: 1px solid rgba(224, 209, 196, 0.85);
      border-radius: 999px;
      background: rgba(255,255,255,.45);
    }

    .desktop-nav a {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .72rem .95rem;
      border-radius: 999px;
      color: var(--muted);
      font-weight: 600;
      transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .desktop-nav a i {
      font-size: .98rem;
    }

    .desktop-nav a:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.7);
      transform: translateY(-1px);
    }

    .desktop-nav a.active,
    .desktop-nav a[aria-current="page"] {
      color: #fff;
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
      box-shadow: var(--shadow-soft);
    }

    .header-meta {
      display: flex;
      align-items: center;
      gap: .6rem;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .status-chip,
    .mini-chip,
    .tag-pill,
    .soft-badge {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      border-radius: 999px;
      border: 1px solid rgba(220, 205, 191, 0.9);
      background: rgba(255,255,255,.72);
      color: var(--muted);
      font-size: .84rem;
      font-weight: 600;
      padding: .5rem .8rem;
      white-space: nowrap;
    }

    .status-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #2aa66d;
      box-shadow: 0 0 0 4px rgba(42, 166, 109, 0.12);
    }

    .top-cta,
    .btn-accent,
    .btn-outline-accent,
    .bottom-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      border-radius: 8px;
      border: 1px solid transparent;
      font-weight: 700;
      line-height: 1;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
      text-decoration: none;
    }

    .top-cta {
      padding: .72rem 1rem;
      background: #fff;
      color: var(--text);
      border-color: rgba(220, 205, 191, 0.92);
      box-shadow: 0 6px 16px rgba(68, 42, 24, 0.04);
    }

    .top-cta:hover {
      color: var(--text);
      transform: translateY(-1px);
      border-color: var(--line-strong);
      box-shadow: 0 10px 22px rgba(68, 42, 24, 0.07);
    }

    .btn-accent {
      padding: .92rem 1.15rem;
      color: #fff;
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
      box-shadow: 0 16px 28px rgba(213, 111, 77, 0.22);
    }

    .btn-accent:hover {
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 18px 34px rgba(213, 111, 77, 0.28);
    }

    .btn-outline-accent {
      padding: .92rem 1.15rem;
      color: var(--accent-2);
      border-color: rgba(213, 111, 77, 0.34);
      background: rgba(255,255,255,.7);
    }

    .btn-outline-accent:hover {
      color: var(--accent-2);
      background: rgba(255, 244, 237, 0.95);
      border-color: rgba(213, 111, 77, 0.54);
      transform: translateY(-1px);
    }

    .page-main {
      padding-bottom: 2rem;
    }

    .hero-section {
      padding: clamp(1.6rem, 3vw, 2.6rem) 0 1rem;
    }

    .hero-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
      gap: 1.25rem;
      align-items: stretch;
    }

    .hero-copy,
    .hero-panel,
    .section-card,
    .stat-card,
    .testimonial-card,
    .catalog-card,
    .cta-panel,
    .faq-shell,
    .news-shell {
      background: var(--surface);
      border: 1px solid rgba(225, 211, 198, 0.95);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }

    .hero-copy {
      padding: clamp(1.35rem, 2.5vw, 2rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }

    .breadcrumb-clean {
      margin-bottom: .8rem;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .35rem;
      color: var(--muted);
      font-size: .88rem;
    }

    .breadcrumb-clean li {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
    }

    .breadcrumb-clean li + li::before {
      content: "•";
      color: #b69f8c;
      margin-right: .35rem;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      align-self: flex-start;
      margin-bottom: .9rem;
      padding: .45rem .75rem;
      border-radius: 999px;
      background: rgba(213, 111, 77, 0.08);
      color: var(--accent-2);
      border: 1px solid rgba(213, 111, 77, 0.16);
      font-size: .84rem;
      font-weight: 700;
    }

    .hero-kicker i {
      font-size: .92rem;
    }

    .hero-title {
      margin: 0;
      font-size: clamp(1.95rem, 3.8vw, 3.35rem);
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: 0;
      color: var(--ink);
      max-width: 12ch;
    }

    .hero-desc {
      margin: 1rem 0 0;
      color: var(--muted);
      font-size: 1.03rem;
      max-width: 46rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      margin-top: 1.3rem;
    }

    .hero-flags {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: 1rem;
    }

    .hero-panel {
      padding: 1rem;
      display: grid;
      gap: .9rem;
      align-content: start;
    }

    .panel-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: .9rem;
    }

    .panel-title {
      margin: 0;
      font-size: 1.02rem;
      font-weight: 800;
      color: var(--text);
    }

    .panel-sub {
      margin: .2rem 0 0;
      font-size: .88rem;
      color: var(--muted);
    }

    .panel-stat {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .45rem .65rem;
      border-radius: 999px;
      background: rgba(42, 166, 109, 0.08);
      color: #1f7d53;
      border: 1px solid rgba(42, 166, 109, 0.14);
      font-size: .8rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .panel-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .75rem;
    }

    .mini-stat {
      padding: .9rem;
      border-radius: 8px;
      border: 1px solid rgba(226, 213, 200, 0.95);
      background: linear-gradient(180deg, #fff 0%, #fcf6ef 100%);
      min-height: 96px;
    }

    .mini-stat strong {
      display: block;
      font-size: 1.3rem;
      line-height: 1.1;
      margin-bottom: .25rem;
      color: var(--ink);
    }

    .mini-stat span {
      color: var(--muted);
      font-size: .84rem;
    }

    .bubble-wall {
      display: grid;
      gap: .7rem;
    }

    .bubble {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: .65rem;
      align-items: start;
      padding: .78rem .82rem;
      border-radius: 8px;
      border: 1px solid rgba(224, 210, 196, 0.95);
      background: rgba(255,255,255,.82);
    }

    .bubble-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: .78rem;
      font-weight: 800;
      color: #fff;
      background: linear-gradient(180deg, #8e6a58 0%, #6f4f42 100%);
    }

    .bubble p {
      margin: 0;
      color: var(--text);
      font-size: .9rem;
      line-height: 1.55;
    }

    .section-gap {
      margin-top: var(--section-gap);
    }

    .section-shell {
      padding: 0 0 0;
    }

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

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      margin-bottom: .45rem;
      color: var(--accent-2);
      font-size: .82rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .section-title {
      margin: 0;
      font-size: clamp(1.45rem, 2.4vw, 2rem);
      line-height: 1.18;
      font-weight: 900;
      color: var(--ink);
    }

    .section-desc {
      margin: .3rem 0 0;
      color: var(--muted);
      max-width: 54rem;
    }

    .section-action {
      flex: 0 0 auto;
      white-space: nowrap;
    }

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

    .section-card {
      padding: 1rem;
      min-height: 100%;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .section-card:hover,
    .catalog-card:hover,
    .testimonial-card:hover {
      transform: translateY(-2px);
      border-color: rgba(213, 111, 77, 0.26);
      box-shadow: var(--shadow);
    }

    .icon-badge {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: rgba(213, 111, 77, 0.09);
      color: var(--accent-2);
      border: 1px solid rgba(213, 111, 77, 0.14);
      margin-bottom: .8rem;
      font-size: 1.1rem;
    }

    .section-card h3 {
      margin: 0 0 .45rem;
      font-size: 1.02rem;
      font-weight: 800;
      color: var(--text);
    }

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

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

    .step-card {
      padding: 1rem;
      display: grid;
      gap: .8rem;
      border: 1px solid rgba(225, 211, 198, 0.95);
      background: linear-gradient(180deg, #fff 0%, #fcf8f3 100%);
      border-radius: var(--radius);
    }

    .step-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .8rem;
    }

    .step-index {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 800;
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
      box-shadow: 0 10px 20px rgba(213, 111, 77, 0.18);
    }

    .step-card h3 {
      margin: 0;
      font-size: 1.02rem;
      font-weight: 800;
    }

    .step-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: .45rem;
    }

    .step-list li {
      display: flex;
      gap: .5rem;
      color: var(--muted);
      font-size: .92rem;
    }

    .step-list i {
      color: var(--accent-2);
      margin-top: .2rem;
      flex: 0 0 auto;
    }

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

    .stat-card {
      padding: 1rem;
      border-radius: var(--radius);
    }

    .stat-value {
      margin: 0;
      font-size: 1.9rem;
      font-weight: 900;
      line-height: 1.08;
      color: var(--ink);
    }

    .stat-label {
      margin: .25rem 0 0;
      color: var(--muted);
      font-size: .92rem;
    }

    .stat-bar {
      margin-top: .85rem;
      height: 8px;
      border-radius: 999px;
      background: #efe5db;
      overflow: hidden;
    }

    .stat-bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent) 0%, #ef9c72 100%);
    }

    .news-shell {
      padding: 1rem;
    }

    .news-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
      gap: .9rem;
      align-items: start;
    }

    .timeline {
      display: grid;
      gap: .65rem;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: .8rem;
      align-items: start;
      padding: .78rem .82rem;
      border-radius: 8px;
      border: 1px solid rgba(225, 211, 198, 0.95);
      background: rgba(255,255,255,.9);
    }

    .timeline-time {
      color: var(--accent-2);
      font-weight: 800;
      font-size: .9rem;
      white-space: nowrap;
    }

    .timeline-item h3 {
      margin: 0 0 .15rem;
      font-size: .98rem;
      font-weight: 800;
    }

    .timeline-item p {
      margin: 0;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.55;
    }

    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
    }

    .tag-pill {
      padding: .48rem .72rem;
      background: #fff;
    }

    .side-note {
      margin-top: .85rem;
      padding: .9rem;
      border-radius: 8px;
      background: rgba(213, 111, 77, 0.06);
      border: 1px solid rgba(213, 111, 77, 0.12);
      color: var(--muted);
      font-size: .92rem;
    }

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

    .testimonial-card {
      padding: 1rem;
    }

    .avatar-row {
      display: flex;
      align-items: center;
      gap: .55rem;
      margin-bottom: .85rem;
    }

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 800;
      font-size: .84rem;
      background: linear-gradient(180deg, #8d6b59 0%, #5e4438 100%);
      box-shadow: 0 8px 16px rgba(68, 42, 24, 0.14);
    }

    .avatar.alt {
      background: linear-gradient(180deg, #d27c57 0%, #b65f40 100%);
    }

    .avatar.alt2 {
      background: linear-gradient(180deg, #8d7a5d 0%, #6d5c42 100%);
    }

    .avatar-meta strong {
      display: block;
      font-size: .95rem;
      line-height: 1.2;
    }

    .avatar-meta span {
      color: var(--muted);
      font-size: .8rem;
    }

    .stars {
      color: #ce8d1b;
      margin-left: auto;
      display: inline-flex;
      gap: .1rem;
      font-size: .95rem;
    }

    .testimonial-card blockquote {
      margin: 0;
      color: var(--text);
      font-size: .96rem;
      line-height: 1.66;
    }

    .testimonial-tags {
      margin-top: .85rem;
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
    }

    .catalog-wrap {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: .9rem;
      align-items: start;
    }

    .filter-shell {
      position: sticky;
      top: 92px;
      padding: 1rem;
      background: var(--surface);
      border: 1px solid rgba(225, 211, 198, 0.95);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }

    .filter-title {
      margin: 0 0 .6rem;
      font-size: 1rem;
      font-weight: 800;
    }

    .filter-list {
      display: grid;
      gap: .45rem;
    }

    .filter-list .tag-pill {
      justify-content: space-between;
      width: 100%;
      border-radius: 8px;
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
    }

    .filter-list .tag-pill:hover {
      transform: translateY(-1px);
      border-color: rgba(213, 111, 77, 0.24);
      background: rgba(255, 247, 241, 0.95);
    }

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

    .catalog-card {
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      min-height: 100%;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .cover-tile {
      position: relative;
      min-height: 154px;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-bottom: 1px solid rgba(224, 210, 196, 0.95);
      background: linear-gradient(160deg, #f5e3d8 0%, #fbf6f1 100%);
    }

    .cover-tile::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 38px;
      background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.64));
      pointer-events: none;
    }

    .cover-a { background: linear-gradient(160deg, #f4dfd2 0%, #fff8f2 100%); }
    .cover-b { background: linear-gradient(160deg, #f1e2d3 0%, #fff8f0 100%); }
    .cover-c { background: linear-gradient(160deg, #efe7d7 0%, #fffaf2 100%); }
    .cover-d { background: linear-gradient(160deg, #f6e3da 0%, #fffaf6 100%); }
    .cover-e { background: linear-gradient(160deg, #f3e4d6 0%, #fff8f3 100%); }
    .cover-f { background: linear-gradient(160deg, #f1dfd0 0%, #fff8f4 100%); }

    .cover-top {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      gap: .8rem;
      align-items: flex-start;
    }

    .cover-label {
      padding: .38rem .62rem;
      border-radius: 999px;
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(224, 210, 196, 0.95);
      font-size: .78rem;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
    }

    .cover-score {
      padding: .42rem .58rem;
      border-radius: 999px;
      background: rgba(31, 125, 83, 0.11);
      color: #1f7d53;
      border: 1px solid rgba(31, 125, 83, 0.12);
      font-size: .78rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .cover-name {
      position: relative;
      z-index: 1;
      margin: auto 0 0;
      font-size: 1.26rem;
      line-height: 1.08;
      font-weight: 900;
      color: var(--ink);
      max-width: 10ch;
    }

    .catalog-body {
      padding: 1rem;
      display: grid;
      gap: .75rem;
    }

    .catalog-head {
      display: flex;
      justify-content: space-between;
      gap: .8rem;
      align-items: flex-start;
    }

    .catalog-head h3 {
      margin: 0;
      font-size: 1.02rem;
      font-weight: 800;
      line-height: 1.3;
    }

    .catalog-head .meta {
      color: var(--muted);
      font-size: .84rem;
      white-space: nowrap;
    }

    .catalog-body p {
      margin: 0;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.6;
    }

    .catalog-badges {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
    }

    .catalog-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .8rem;
      padding-top: .2rem;
      color: var(--muted);
      font-size: .86rem;
    }

    .link-arrow {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      color: var(--accent-2);
      font-weight: 700;
    }

    .faq-shell {
      padding: 1rem;
    }

    .accordion.custom-accordion {
      --bs-accordion-border-width: 0;
      --bs-accordion-btn-padding-x: 0;
      --bs-accordion-btn-padding-y: 1rem;
      --bs-accordion-body-padding-x: 0;
      --bs-accordion-body-padding-y: 0 0 1rem;
      --bs-accordion-bg: transparent;
      --bs-accordion-btn-focus-border-color: transparent;
      --bs-accordion-btn-focus-box-shadow: none;
      --bs-accordion-active-color: var(--ink);
      --bs-accordion-active-bg: transparent;
    }

    .custom-accordion .accordion-item {
      border: 0;
      border-bottom: 1px solid rgba(225, 211, 198, 0.95);
      background: transparent;
    }

    .custom-accordion .accordion-button {
      box-shadow: none;
      background: transparent;
      color: var(--ink);
      font-weight: 800;
      padding-left: 0;
      padding-right: 0;
    }

    .custom-accordion .accordion-button::after {
      background-size: 1rem;
      opacity: .8;
    }

    .custom-accordion .accordion-button:not(.collapsed) {
      color: var(--accent-2);
    }

    .custom-accordion .accordion-body {
      color: var(--muted);
      padding-top: 0;
      padding-right: 0;
      padding-left: 0;
      padding-bottom: 1rem;
    }

    .cta-panel {
      padding: 1.15rem;
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 1rem;
      align-items: start;
    }

    .cta-copy {
      padding: .35rem .15rem;
    }

    .cta-copy h2 {
      margin: 0;
      font-size: clamp(1.35rem, 2vw, 1.8rem);
      line-height: 1.2;
      font-weight: 900;
      color: var(--ink);
    }

    .cta-copy p {
      margin: .7rem 0 0;
      color: var(--muted);
      max-width: 32rem;
    }

    .cta-highlights {
      margin-top: 1rem;
      display: grid;
      gap: .45rem;
    }

    .cta-highlights li {
      display: flex;
      gap: .55rem;
      color: var(--text);
      font-size: .95rem;
    }

    .cta-highlights i {
      color: var(--accent-2);
      margin-top: .18rem;
    }

    .cta-form {
      background: linear-gradient(180deg, #fff 0%, #fcf7f1 100%);
      border: 1px solid rgba(225, 211, 198, 0.95);
      border-radius: var(--radius);
      padding: 1rem;
    }

    .cta-form .form-label {
      font-weight: 700;
      color: var(--ink);
      margin-bottom: .35rem;
    }

    .cta-form .form-control,
    .cta-form .form-select {
      border-radius: 8px;
      border-color: rgba(215, 197, 181, 0.95);
      background-color: #fff;
      min-height: 48px;
      box-shadow: none;
      color: var(--text);
    }

    .cta-form .form-control:focus,
    .cta-form .form-select:focus {
      border-color: rgba(213, 111, 77, 0.55);
      box-shadow: 0 0 0 .25rem rgba(213, 111, 77, 0.12);
    }

    .form-note {
      margin-top: .7rem;
      color: var(--muted);
      font-size: .84rem;
    }

    .site-footer {
      margin-top: var(--section-gap);
      border-top: 1px solid rgba(225, 211, 198, 0.95);
      background: rgba(250, 245, 239, 0.94);
      padding: 2rem 0 5.2rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, .8fr));
      gap: 1.2rem;
      align-items: start;
    }

    .footer-copy {
      margin: .95rem 0 0;
      color: var(--muted);
      max-width: 34rem;
    }

    .footer-title {
      margin: 0 0 .75rem;
      font-weight: 800;
      color: var(--ink);
    }

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

    .footer-list a {
      color: var(--muted);
      transition: color .2s ease, transform .2s ease;
    }

    .footer-list a:hover {
      color: var(--accent-2);
    }

    .copyright {
      margin-top: 1.4rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(225, 211, 198, 0.95);
      display: flex;
      justify-content: space-between;
      gap: .9rem;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: .88rem;
    }

    .mobile-tabbar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1040;
      display: none;
      background: rgba(252, 247, 241, 0.96);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(225, 211, 198, 0.95);
      box-shadow: 0 -10px 24px rgba(68, 42, 24, 0.06);
      padding: .45rem .65rem calc(.45rem + env(safe-area-inset-bottom));
    }

    .mobile-tabbar .tab-item {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .22rem;
      color: var(--muted);
      padding: .42rem .3rem;
      border-radius: 8px;
      font-size: .74rem;
      font-weight: 700;
      min-height: 58px;
      transition: background-color .2s ease, color .2s ease, transform .2s ease;
    }

    .mobile-tabbar .tab-item i {
      font-size: 1.05rem;
      line-height: 1;
    }

    .mobile-tabbar .tab-item.active,
    .mobile-tabbar .tab-item[aria-current="page"] {
      color: var(--accent-2);
      background: rgba(213, 111, 77, 0.08);
    }

    .mobile-tabbar .tab-item:hover {
      transform: translateY(-1px);
    }

    .subtle-divider {
      margin: 0;
      border: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(224, 210, 196, 0.95), transparent);
    }

    @media (max-width: 1199.98px) {
      .catalog-wrap {
        grid-template-columns: 1fr;
      }

      .filter-shell {
        position: static;
      }
    }

    @media (max-width: 991.98px) {
      .hero-wrap,
      .news-grid,
      .cta-panel {
        grid-template-columns: 1fr;
      }

      .pain-grid,
      .solution-grid,
      .score-strip,
      .testimonial-grid,
      .catalog-grid,
      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .header-inner {
        gap: .75rem;
      }

      .desktop-nav {
        display: none;
      }

      .header-meta .status-chip {
        display: none;
      }

      .hero-title {
        max-width: 14ch;
      }

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

      .section-action {
        white-space: normal;
      }
    }

    @media (max-width: 767.98px) {
      .mobile-tabbar {
        display: flex;
        gap: .35rem;
      }

      .pain-grid,
      .solution-grid,
      .score-strip,
      .testimonial-grid,
      .catalog-grid,
      .footer-grid,
      .panel-grid {
        grid-template-columns: 1fr;
      }

      .panel-grid {
        gap: .6rem;
      }

      .timeline-item {
        grid-template-columns: 1fr;
        gap: .3rem;
      }

      .timeline-time {
        white-space: normal;
      }

      .catalog-head {
        flex-direction: column;
      }

      .cover-name {
        max-width: 12ch;
      }

      .hero-actions,
      .hero-flags,
      .tag-cloud {
        gap: .45rem;
      }

      .site-footer {
        padding-bottom: 6.5rem;
      }
    }

    @media (max-width: 575.98px) {
      .brand-note {
        display: none;
      }

      .header-meta {
        gap: .4rem;
      }

      .top-cta {
        padding: .7rem .82rem;
      }

      .hero-copy,
      .hero-panel,
      .section-card,
      .step-card,
      .stat-card,
      .testimonial-card,
      .catalog-body,
      .cta-form,
      .news-shell,
      .faq-shell,
      .filter-shell {
        padding: .9rem;
      }

      .hero-title {
        font-size: 1.9rem;
        max-width: 100%;
      }

      .hero-desc,
      .section-desc,
      .cta-copy p {
        font-size: .96rem;
      }

      .btn-accent,
      .btn-outline-accent {
        width: 100%;
      }

      .hero-actions {
        flex-direction: column;
      }

      .cover-tile {
        min-height: 140px;
      }

      .copy-wrap {
        padding-bottom: 1rem;
      }

      .copyright {
        flex-direction: column;
      }
    }