/* roulang page: index */
:root{
      --bg: #f7f1ec;
      --bg-soft: #fff8f4;
      --bg-dark: #171018;
      --bg-dark-2: #221520;
      --surface: #ffffff;
      --surface-soft: #fffaf7;
      --surface-dark: #241621;
      --primary: #5a163f;
      --primary-2: #4b1438;
      --accent: #c9866a;
      --accent-2: #d09a7a;
      --danger: #9c2747;
      --text: #32262d;
      --text-soft: #7f6b73;
      --text-on-dark: #f7ede8;
      --border: rgba(75,20,56,.12);
      --border-strong: rgba(201,134,106,.38);
      --shadow: 0 18px 50px rgba(75,20,56,.08);
      --shadow-dark: 0 18px 60px rgba(0,0,0,.28);
      --radius-xs: 14px;
      --radius-sm: 18px;
      --radius-md: 24px;
      --radius-lg: 32px;
      --radius-pill: 999px;
      --container: 1220px;
      --space-1: 8px;
      --space-2: 12px;
      --space-3: 16px;
      --space-4: 20px;
      --space-5: 24px;
      --space-6: 32px;
      --space-7: 40px;
      --space-8: 56px;
      --space-9: 72px;
      --space-10: 96px;
      --transition: all .28s ease;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 12%, rgba(201,134,106,.11), transparent 20%),
        radial-gradient(circle at 88% 8%, rgba(92,22,63,.10), transparent 18%),
        linear-gradient(180deg, #f8f2ed 0%, #f5ede7 34%, #f8f2ee 100%);
      line-height: 1.8;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    body::before{
      content:"";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(75,20,56,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,20,56,.03) 1px, transparent 1px);
      background-size: 48px 48px;
      opacity: .45;
      z-index: -1;
    }
    a{
      color: var(--primary);
      text-decoration: none;
      transition: var(--transition);
    }
    a:hover, a:focus{
      color: var(--danger);
      text-decoration: none;
    }
    img{ max-width:100%; display:block; }
    p{ margin: 0 0 1rem; }
    h1,h2,h3,h4,h5,h6{ margin: 0 0 .75rem; color: var(--primary-2); line-height: 1.2; letter-spacing: -.02em; }
    h1{ font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 800; }
    h2{ font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; }
    h3{ font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 750; }
    .container-wide{
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
    }
    .section{
      padding: clamp(3rem, 5vw, 6rem) 0;
      position: relative;
    }
    .section-soft{
      background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,248,244,.92));
    }
    .section-dark{
      background:
        radial-gradient(circle at 18% 14%, rgba(201,134,106,.14), transparent 24%),
        linear-gradient(180deg, #1b1218 0%, #161018 100%);
      color: var(--text-on-dark);
    }
    .section-dark h1,
    .section-dark h2,
    .section-dark h3,
    .section-dark h4{
      color: #fff5f0;
    }
    .section-title{
      margin-bottom: 2rem;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: .75rem;
    }
    .section-kicker::before{
      content:"";
      width: 38px;
      height: 1px;
      background: var(--accent);
      opacity: .9;
    }
    .muted{ color: var(--text-soft); }
    .section-dark .muted{ color: rgba(247,237,232,.78); }
    .top-strip{
      background: #120d11;
      color: rgba(247,237,232,.88);
      font-size: .82rem;
      border-bottom: 1px solid rgba(201,134,106,.18);
    }
    .top-strip .container-wide{
      min-height: 40px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      padding: .25rem 0;
    }
    .top-strip .strip-links{
      display:flex;
      align-items:center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .top-strip a{
      color: rgba(247,237,232,.88);
      font-weight: 600;
    }
    .top-strip a:hover{ color: #fff; }
    .top-strip .badge-inline{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding: .24rem .7rem;
      border-radius: var(--radius-pill);
      background: rgba(201,134,106,.12);
      border: 1px solid rgba(201,134,106,.18);
      color: #f8dfd5;
      font-size: .78rem;
      font-weight: 700;
    }
    .site-header{
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(247,241,236,.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(75,20,56,.10);
      box-shadow: 0 10px 30px rgba(75,20,56,.04);
    }
    .site-header.is-scrolled{
      background: rgba(255,250,247,.98);
      box-shadow: 0 18px 40px rgba(75,20,56,.08);
    }
    .nav-shell{
      width: min(var(--container), calc(100% - 24px));
      margin: 0 auto;
    }
    .brand-wrap{
      display:flex;
      align-items:center;
      gap: .95rem;
      padding: .9rem 0;
    }
    .brand-mark{
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 28% 28%, rgba(255,255,255,.55), transparent 26%),
        linear-gradient(145deg, var(--primary), var(--primary-2));
      box-shadow: 0 14px 28px rgba(75,20,56,.22);
      position: relative;
      flex: 0 0 auto;
    }
    .brand-mark::before,
    .brand-mark::after{
      content:"";
      position:absolute;
      inset: 11px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.45);
      transform: rotate(9deg);
    }
    .brand-mark::after{
      inset: 14px;
      opacity: .6;
      transform: rotate(-8deg);
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      gap: .15rem;
    }
    .brand-name{
      font-size: 1.03rem;
      font-weight: 800;
      line-height: 1.15;
      color: var(--primary-2);
    }
    .brand-sub{
      font-size: .8rem;
      color: var(--text-soft);
    }
    .menu a{
      position: relative;
      font-weight: 700;
      color: var(--text);
      padding: .85rem 1rem;
      border-radius: var(--radius-pill);
      transition: var(--transition);
    }
    .menu a:hover{
      background: rgba(201,134,106,.12);
      color: var(--primary);
    }
    .menu a.is-active{
      background: linear-gradient(135deg, rgba(90,22,63,.12), rgba(201,134,106,.12));
      color: var(--primary);
      box-shadow: inset 0 0 0 1px rgba(201,134,106,.22);
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding: .9rem 1.15rem;
      border-radius: var(--radius-pill);
      background: linear-gradient(135deg, var(--primary), var(--danger));
      color:#fff;
      font-weight: 800;
      box-shadow: 0 12px 24px rgba(92,22,63,.18);
      white-space: nowrap;
    }
    .nav-cta:hover{
      color:#fff;
      transform: translateY(-1px);
      box-shadow: 0 16px 30px rgba(92,22,63,.24);
      background: linear-gradient(135deg, var(--danger), var(--primary-2));
    }
    .title-bar{
      background: transparent;
      color: var(--primary-2);
      padding: .65rem 0;
    }
    .menu-icon::after{
      background: var(--primary);
      box-shadow: 0 7px 0 var(--primary), 0 14px 0 var(--primary);
    }
    .top-bar{
      background: transparent;
      padding: 0;
    }
    .top-bar-left,
    .top-bar-right{
      display:flex;
      align-items:center;
    }
    .top-bar-right{
      gap: .9rem;
    }
    .hero{
      padding: clamp(2.4rem, 4vw, 4.8rem) 0 clamp(3rem, 5vw, 5.8rem);
      position: relative;
      overflow: hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset: 18px auto auto 50%;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(201,134,106,.18) 0%, rgba(201,134,106,.05) 40%, transparent 68%);
      filter: blur(2px);
      pointer-events:none;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.12fr .88fr;
      gap: clamp(1.5rem, 3vw, 2.4rem);
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .hero-panel{
      padding: clamp(1.4rem, 3vw, 2.2rem);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,250,247,.94));
      border: 1px solid rgba(75,20,56,.09);
      box-shadow: var(--shadow);
    }
    .hero-panel.dark{
      background:
        radial-gradient(circle at 18% 14%, rgba(201,134,106,.18), transparent 28%),
        linear-gradient(180deg, rgba(34,21,32,.98), rgba(23,16,24,.98));
      color: var(--text-on-dark);
      border-color: rgba(201,134,106,.18);
      box-shadow: var(--shadow-dark);
    }
    .pill-row{
      display:flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-top: 1.1rem;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding: .45rem .8rem;
      border-radius: var(--radius-pill);
      background: rgba(201,134,106,.10);
      border: 1px solid rgba(201,134,106,.22);
      color: var(--primary);
      font-size: .84rem;
      font-weight: 700;
    }
    .section-dark .pill{
      background: rgba(247,237,232,.08);
      border-color: rgba(247,237,232,.14);
      color: #f7ede8;
    }
    .hero-actions{
      display:flex;
      flex-wrap: wrap;
      gap: .85rem;
      margin-top: 1.5rem;
    }
    .btn-modern{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.6rem;
      border: 1px solid transparent;
      padding: .95rem 1.2rem;
      border-radius: var(--radius-pill);
      font-weight: 800;
      font-size: .96rem;
      transition: var(--transition);
      cursor: pointer;
    }
    .btn-primary{
      background: linear-gradient(135deg, var(--primary), var(--danger));
      color:#fff;
      box-shadow: 0 12px 24px rgba(92,22,63,.18);
      border-color: rgba(201,134,106,.22);
    }
    .btn-primary:hover, .btn-primary:focus{
      color:#fff;
      transform: translateY(-2px);
      box-shadow: 0 18px 30px rgba(92,22,63,.24);
    }
    .btn-secondary{
      background: transparent;
      color: var(--primary);
      border-color: rgba(201,134,106,.42);
    }
    .btn-secondary:hover, .btn-secondary:focus{
      color: var(--primary);
      background: rgba(201,134,106,.12);
      transform: translateY(-2px);
    }
    .section-dark .btn-secondary{
      color: #fff;
      border-color: rgba(247,237,232,.28);
    }
    .section-dark .btn-secondary:hover{
      background: rgba(247,237,232,.08);
      color:#fff;
    }
    .hero-trust{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: .8rem;
      margin-top: 1.5rem;
    }
    .trust-item{
      padding: .95rem 1rem;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(75,20,56,.08);
    }
    .hero-panel.dark .trust-item{
      background: rgba(247,237,232,.06);
      border-color: rgba(247,237,232,.12);
    }
    .trust-item strong{
      display:block;
      margin-bottom: .2rem;
      color: var(--primary-2);
    }
    .hero-panel.dark .trust-item strong,
    .hero-panel.dark .trust-item span{
      color: #f8e9e2;
    }
    .hero-cover{
      display:grid;
      grid-template-columns: .88fr 1.12fr;
      gap: .9rem;
      align-items: stretch;
    }
    .cover-stack{
      display:grid;
      gap: .9rem;
    }
    .cover-card{
      border-radius: 26px;
      padding: 1rem;
      min-height: 150px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(201,134,106,.16);
      background:
        linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.04)),
        linear-gradient(135deg, rgba(90,22,63,.92), rgba(156,39,71,.86));
      box-shadow: var(--shadow-dark);
    }
    .cover-card:nth-child(2){
      background:
        linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
        linear-gradient(135deg, #221520, #3d1831);
      min-height: 110px;
    }
    .cover-card:nth-child(3){
      background:
        linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
        linear-gradient(135deg, #c9866a, #9c2747);
      min-height: 110px;
    }
    .cover-card::before{
      content:"";
      position:absolute;
      inset: 0;
      background-image:
        linear-gradient(115deg, rgba(255,255,255,.08) 0 16%, transparent 16% 100%),
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
      background-size: auto, 28px 28px, 28px 28px;
      opacity: .65;
    }
    .cover-card > *{
      position: relative;
      z-index: 1;
    }
    .cover-badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding: .34rem .7rem;
      border-radius: var(--radius-pill);
      background: rgba(255,255,255,.14);
      color:#fff;
      font-size: .78rem;
      font-weight: 700;
      border: 1px solid rgba(255,255,255,.2);
    }
    .cover-title{
      color:#fff;
      font-size: 1.2rem;
      font-weight: 800;
      margin-top: .75rem;
      margin-bottom: .35rem;
    }
    .cover-desc{
      color: rgba(255,255,255,.84);
      font-size: .92rem;
      line-height: 1.7;
    }
    .cover-meter{
      position:absolute;
      right: 1rem;
      bottom: 1rem;
      width: 68px;
      height: 68px;
      border-radius: 22px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.16);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-weight: 800;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }
    .cover-meter span{
      font-size: 1.15rem;
      line-height: 1;
    }
    .cover-meter small{
      font-size: .72rem;
      opacity: .88;
    }
    .content-card,
    .feature-card,
    .case-card,
    .plan-card,
    .faq-card,
    .contact-card,
    .stat-card{
      border-radius: var(--radius-md);
      border: 1px solid rgba(75,20,56,.10);
      box-shadow: var(--shadow);
      background: var(--surface);
      overflow: hidden;
      transition: var(--transition);
    }
    .content-card:hover,
    .feature-card:hover,
    .case-card:hover,
    .plan-card:hover,
    .stat-card:hover{
      transform: translateY(-3px);
      border-color: rgba(201,134,106,.30);
      box-shadow: 0 22px 54px rgba(75,20,56,.12);
    }
    .feature-card{
      padding: 1.2rem;
      background: linear-gradient(180deg, #fff, #fffaf7);
      height: 100%;
    }
    .feature-card.dark{
      background:
        linear-gradient(180deg, rgba(34,21,32,.98), rgba(25,15,22,.98));
      color: #f8eae4;
      border-color: rgba(201,134,106,.18);
    }
    .feature-icon{
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(201,134,106,.12);
      color: var(--primary);
      font-size: 1.15rem;
      margin-bottom: .95rem;
    }
    .feature-card.dark .feature-icon{
      background: rgba(255,255,255,.08);
      color: #f8eae4;
    }
    .feature-no{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      font-size:.8rem;
      font-weight:800;
      color: var(--accent);
      margin-bottom: .7rem;
      letter-spacing: .04em;
    }
    .feature-no::before{
      content:"";
      width: 18px;
      height:1px;
      background: currentColor;
    }
    .feature-title{
      font-weight: 800;
      font-size: 1.15rem;
      color: var(--primary-2);
      margin-bottom: .55rem;
    }
    .feature-card.dark .feature-title,
    .feature-card.dark p{
      color: #f7ede8;
    }
    .feature-card p{
      color: var(--text-soft);
      margin-bottom: 0;
    }
    .feature-grid{
      display:grid;
      grid-template-columns: 1.1fr .95fr .95fr;
      gap: 1rem;
      align-items: stretch;
    }
    .feature-hero{
      padding: 1.4rem;
      border-radius: var(--radius-md);
      background:
        radial-gradient(circle at 30% 25%, rgba(201,134,106,.16), transparent 22%),
        linear-gradient(180deg, #fff, #fff8f5);
      border: 1px solid rgba(75,20,56,.10);
      box-shadow: var(--shadow);
      min-height: 100%;
    }
    .feature-hero .hero-mini{
      display:flex;
      align-items:center;
      gap:.85rem;
      margin-top: 1.15rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(75,20,56,.10);
    }
    .hero-mini .mini-tag{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--primary), var(--danger));
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 800;
      box-shadow: 0 14px 26px rgba(92,22,63,.18);
    }
    .feature-aside{
      display:grid;
      gap: 1rem;
      height: 100%;
    }
    .case-flow{
      column-count: 3;
      column-gap: 1rem;
    }
    .case-card{
      display:inline-block;
      width: 100%;
      margin-bottom: 1rem;
      background: linear-gradient(180deg, #fff, #fff9f6);
    }
    .case-card .cover{
      height: 160px;
      background:
        radial-gradient(circle at 22% 24%, rgba(255,255,255,.2), transparent 22%),
        linear-gradient(135deg, rgba(90,22,63,.92), rgba(201,134,106,.88));
      position: relative;
      overflow: hidden;
    }
    .case-card .cover.alt{
      background:
        radial-gradient(circle at 72% 18%, rgba(255,255,255,.18), transparent 22%),
        linear-gradient(135deg, #231521, #4b1438);
    }
    .case-card .cover.gold{
      background:
        radial-gradient(circle at 22% 24%, rgba(255,255,255,.16), transparent 22%),
        linear-gradient(135deg, #c9866a, #9c2747);
    }
    .case-card .cover::after{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(115deg, rgba(255,255,255,.09) 0 15%, transparent 15% 100%),
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
      background-size: auto, 26px 26px, 26px 26px;
      opacity: .65;
    }
    .case-card .body{
      padding: 1.1rem 1.15rem 1.15rem;
    }
    .tag-row{
      display:flex;
      flex-wrap: wrap;
      gap: .45rem;
      margin-bottom: .8rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      padding: .3rem .65rem;
      border-radius: var(--radius-pill);
      background: rgba(201,134,106,.12);
      color: var(--primary);
      font-size: .76rem;
      font-weight: 800;
      border: 1px solid rgba(201,134,106,.20);
      letter-spacing: .03em;
    }
    .tag.dark{
      background: rgba(247,237,232,.08);
      color: #f8eae4;
      border-color: rgba(247,237,232,.14);
    }
    .case-card h3{
      margin-bottom: .5rem;
      font-size: 1.08rem;
    }
    .case-card p{
      color: var(--text-soft);
      font-size: .95rem;
      margin-bottom: .8rem;
    }
    .case-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      padding-top: .8rem;
      border-top: 1px solid rgba(75,20,56,.08);
      color: var(--text-soft);
      font-size: .84rem;
      font-weight: 600;
    }
    .case-link{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      color: var(--primary);
      font-weight: 800;
    }
    .case-link:hover{
      color: var(--danger);
      gap:.5rem;
    }
    .case-tall{ min-height: 410px; }
    .case-medium{ min-height: 340px; }
    .case-short{ min-height: 280px; }
    .plan-wrap{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 1rem;
    }
    .plan-card{
      padding: 1.4rem;
      background: linear-gradient(180deg, #fff, #fffaf8);
      position: relative;
    }
    .plan-card.recommend{
      border-color: rgba(201,134,106,.48);
      box-shadow: 0 22px 60px rgba(201,134,106,.16);
      transform: translateY(-4px);
    }
    .plan-card.recommend::before{
      content:"推荐";
      position:absolute;
      top: 1rem;
      right: 1rem;
      padding: .28rem .68rem;
      border-radius: var(--radius-pill);
      background: linear-gradient(135deg, var(--accent), var(--danger));
      color:#fff;
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .04em;
    }
    .price-line{
      display:flex;
      align-items: baseline;
      gap: .45rem;
      margin: .7rem 0 1rem;
    }
    .price-line strong{
      font-size: 2rem;
      color: var(--primary);
      line-height: 1;
    }
    .price-line span{
      color: var(--text-soft);
      font-size: .9rem;
    }
    .plan-list{
      list-style:none;
      margin: 0 0 1.15rem;
      padding: 0;
    }
    .plan-list li{
      display:flex;
      gap:.55rem;
      align-items:flex-start;
      padding: .42rem 0;
      border-bottom: 1px dashed rgba(75,20,56,.10);
      color: var(--text);
      font-size: .95rem;
    }
    .plan-list li:last-child{ border-bottom: 0; }
    .plan-list i{
      color: var(--accent);
      margin-top: .28rem;
      flex: 0 0 auto;
    }
    .faq-grid{
      max-width: 920px;
      margin: 0 auto;
    }
    .accordion{
      background: transparent;
      margin-top: 1rem;
    }
    .accordion-item{
      border: 1px solid rgba(75,20,56,.12);
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: .9rem;
      background: rgba(255,255,255,.85);
      box-shadow: var(--shadow);
    }
    .accordion-title{
      font-size: 1rem;
      font-weight: 800;
      color: var(--primary-2);
      padding: 1.05rem 1.15rem;
      background: linear-gradient(180deg, #fff, #fff8f5);
    }
    .accordion-title:hover{
      background: linear-gradient(180deg, #fff, #fff4ef);
      color: var(--danger);
    }
    .accordion-content{
      color: var(--text);
      background: #fffaf7;
      border-top: 1px solid rgba(75,20,56,.08);
      padding: 1rem 1.15rem 1.1rem;
    }
    .accordion-content p:last-child{ margin-bottom: 0; }
    .contact-wrap{
      display:grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 1rem;
      align-items: stretch;
    }
    .contact-intro{
      padding: 1.4rem;
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 22% 20%, rgba(201,134,106,.18), transparent 24%),
        linear-gradient(180deg, rgba(34,21,32,.98), rgba(23,16,24,.98));
      color: #f8eae4;
      box-shadow: var(--shadow-dark);
      border: 1px solid rgba(201,134,106,.16);
    }
    .contact-intro .reason-list{
      list-style:none;
      padding: 0;
      margin: 1rem 0 0;
    }
    .contact-intro .reason-list li{
      display:flex;
      gap:.7rem;
      align-items:flex-start;
      margin-bottom: .9rem;
      color: rgba(247,237,232,.92);
    }
    .contact-intro .reason-list i{
      color: var(--accent-2);
      margin-top: .2rem;
    }
    .contact-card{
      padding: 1.35rem;
      background: linear-gradient(180deg, #fff, #fff8f4);
    }
    .contact-form label{
      font-weight: 700;
      color: var(--primary-2);
      margin-bottom: .4rem;
    }
    .contact-form input,
    .contact-form select,
    .contact-form textarea{
      width:100%;
      min-height: 52px;
      border-radius: 16px;
      border: 1px solid rgba(75,20,56,.16);
      background: #fff;
      color: var(--text);
      padding: .85rem 1rem;
      transition: var(--transition);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
      margin-bottom: 1rem;
    }
    .contact-form textarea{
      min-height: 126px;
      resize: vertical;
    }
    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus{
      outline: none;
      border-color: rgba(201,134,106,.72);
      box-shadow: 0 0 0 4px rgba(201,134,106,.14);
    }
    .contact-form .btn-modern{
      width:100%;
      margin-top: .2rem;
      padding: 1rem 1.2rem;
    }
    .note-line{
      font-size: .88rem;
      color: var(--text-soft);
      margin-top: .85rem;
    }
    .section-dark .note-line{
      color: rgba(247,237,232,.76);
    }
    .footer{
      background:
        radial-gradient(circle at 12% 12%, rgba(201,134,106,.10), transparent 18%),
        linear-gradient(180deg, #181018 0%, #120d11 100%);
      color: rgba(247,237,232,.86);
      border-top: 1px solid rgba(201,134,106,.18);
      padding: 3.2rem 0 1.25rem;
    }
    .footer a{
      color: rgba(247,237,232,.86);
    }
    .footer a:hover{
      color: #fff;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:.9rem;
      margin-bottom: 1rem;
    }
    .footer-title{
      color:#fff5f0;
      font-size: 1.05rem;
      font-weight: 800;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.1fr .9fr .9fr;
      gap: 1.2rem;
      align-items:start;
      padding-bottom: 1.4rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .footer-group h4{
      color: #fff5f0;
      margin-bottom: .9rem;
      font-size: 1rem;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.55rem;
    }
    .footer-links a{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
    }
    .footer-links a::before{
      content:"";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(201,134,106,.9);
      display:inline-block;
      margin-top: .15rem;
    }
    .footer-bottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      padding-top: 1rem;
      flex-wrap: wrap;
      font-size: .88rem;
      color: rgba(247,237,232,.72);
    }
    .hero-stats{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: .85rem;
      margin-top: 1rem;
    }
    .stat-card{
      padding: 1rem;
      background: rgba(255,255,255,.86);
    }
    .stat-card strong{
      display:block;
      color: var(--primary);
      font-size: 1.45rem;
      line-height: 1.1;
      margin-bottom: .25rem;
    }
    .stat-card span{
      color: var(--text-soft);
      font-size: .9rem;
    }
    .mini-index{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 26px;
      padding: 1rem;
    }
    .mini-index .index-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: .7rem;
      margin-bottom: .95rem;
    }
    .mini-index .index-head strong{
      font-size: 1rem;
      color:#fff5f0;
    }
    .mini-index .index-head span{
      color: rgba(247,237,232,.72);
      font-size: .82rem;
    }
    .mini-item{
      display:flex;
      gap: .85rem;
      padding: .92rem 0;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .mini-item:first-of-type{
      border-top: 0;
      padding-top: 0;
    }
    .mini-index .mini-bar{
      width: 12px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--accent), var(--danger));
      flex: 0 0 auto;
      min-height: 46px;
      box-shadow: 0 10px 20px rgba(201,134,106,.20);
    }
    .mini-item:nth-child(2) .mini-bar{ height: 62px; }
    .mini-item:nth-child(3) .mini-bar{ height: 72px; }
    .mini-item:nth-child(4) .mini-bar{ height: 56px; }
    .mini-item:nth-child(5) .mini-bar{ height: 66px; }
    .mini-item h4{
      color:#fff;
      margin-bottom: .25rem;
      font-size: .98rem;
    }
    .mini-item p{
      color: rgba(247,237,232,.74);
      font-size: .88rem;
      line-height: 1.65;
      margin-bottom: .35rem;
    }
    .mini-item .meta{
      display:flex;
      align-items:center;
      gap:.55rem;
      color: rgba(247,237,232,.68);
      font-size: .78rem;
    }
    .mini-item .meta .dot{
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(201,134,106,.9);
    }
    .subtle-line{
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(201,134,106,.55), rgba(201,134,106,0));
      margin: .85rem 0 1rem;
    }
    .content-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap: 1rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
    }
    .content-head p{
      max-width: 680px;
      color: var(--text-soft);
      margin-bottom: 0;
    }
    .section-dark .content-head p{
      color: rgba(247,237,232,.76);
    }
    .dark-band{
      background:
        radial-gradient(circle at 16% 20%, rgba(201,134,106,.11), transparent 22%),
        linear-gradient(180deg, #20141e, #171018);
      border-radius: 32px;
      padding: 1.1rem;
      border: 1px solid rgba(201,134,106,.16);
    }
    .small-caps{
      font-size: .82rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 800;
      color: var(--accent);
    }
    .label-line{
      display:flex;
      gap:.5rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }
    .label{
      font-size: .78rem;
      border-radius: var(--radius-pill);
      padding: .34rem .7rem;
      background: rgba(201,134,106,.10);
      color: var(--primary);
      border: 1px solid rgba(201,134,106,.18);
      font-weight: 700;
    }
    .label.dark{
      background: rgba(255,255,255,.08);
      color: #f7ede8;
      border-color: rgba(255,255,255,.12);
    }
    .sticky-box{
      position: sticky;
      top: 110px;
      border-radius: 28px;
      padding: 1.2rem;
      background: linear-gradient(180deg, #fff, #fff8f4);
      border: 1px solid rgba(75,20,56,.10);
      box-shadow: var(--shadow);
    }
    .sticky-box h3{
      margin-bottom: .7rem;
    }
    .sticky-box ul{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.7rem;
    }
    .sticky-box li{
      display:flex;
      gap:.6rem;
      align-items:flex-start;
      color: var(--text);
      font-size: .94rem;
    }
    .sticky-box li i{
      color: var(--accent);
      margin-top: .25rem;
    }
    .two-column-copy{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    .copy-block{
      padding: 1.15rem;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(75,20,56,.10);
      box-shadow: var(--shadow);
    }
    .copy-block.dark{
      background: rgba(34,21,32,.98);
      color: #f8eae4;
      border-color: rgba(201,134,106,.14);
    }
    .copy-block.dark p, .copy-block.dark li{
      color: rgba(247,237,232,.84);
    }
    .copy-block ul{
      margin: 0;
      padding-left: 1.05rem;
    }
    .copy-block li{
      margin-bottom: .5rem;
    }
    .nav-index{
      display:grid;
      gap:.55rem;
      margin-top: 1rem;
    }
    .nav-index a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: .85rem 1rem;
      border-radius: 18px;
      background: rgba(255,255,255,.08);
      color: #fff5f0;
      border: 1px solid rgba(255,255,255,.10);
    }
    .nav-index a:hover{
      background: rgba(201,134,106,.14);
      color: #fff;
    }
    .nav-index a span{
      opacity: .8;
      font-size: .82rem;
    }
    .nav-index a strong{
      font-size: .95rem;
    }
    @media (max-width: 1024px){
      .hero-grid,
      .feature-grid,
      .contact-wrap,
      .footer-grid,
      .two-column-copy,
      .plan-wrap{
        grid-template-columns: 1fr;
      }
      .case-flow{ column-count: 2; }
      .hero-cover{ grid-template-columns: 1fr 1fr; }
      .sticky-box{ position: static; }
    }
    @media (max-width: 767px){
      .top-strip .container-wide{
        flex-direction: column;
        align-items: flex-start;
        padding: .55rem 0;
      }
      .brand-wrap{
        padding: .7rem 0;
      }
      .hero{ padding-top: 1.6rem; }
      .hero-trust,
      .hero-stats{
        grid-template-columns: 1fr;
      }
      .hero-cover,
      .feature-grid{
        grid-template-columns: 1fr;
      }
      .case-flow{
        column-count: 1;
      }
      .content-head{
        align-items: flex-start;
      }
      .nav-cta{
        width: 100%;
        justify-content: center;
      }
      .top-bar-right{
        width: 100%;
        justify-content: flex-end;
      }
      .footer-bottom{
        flex-direction: column;
        align-items: flex-start;
      }
      .cover-card{
        min-height: 132px;
      }
      .plan-card.recommend{
        transform: none;
      }
    }
    @media (max-width: 520px){
      .container-wide{
        width: min(var(--container), calc(100% - 20px));
      }
      .hero-panel,
      .feature-hero,
      .copy-block,
      .contact-card,
      .contact-intro,
      .sticky-box,
      .plan-card{
        padding: 1rem;
        border-radius: 22px;
      }
      .btn-modern,
      .nav-cta{
        width: 100%;
      }
      .hero-actions{
        flex-direction: column;
      }
      .pill-row{
        gap: .45rem;
      }
      .menu a{
        padding: .8rem .85rem;
      }
    }
    .reveal{
      border-radius: 24px;
      border: 1px solid rgba(75,20,56,.12);
      box-shadow: var(--shadow);
    }
    .reveal:focus{
      outline: none;
    }
    .is-dropdown-submenu{
      border-radius: 18px;
      border: 1px solid rgba(75,20,56,.10);
      box-shadow: var(--shadow);
    }
    .focus-visible:focus{
      outline: 3px solid rgba(201,134,106,.35);
      outline-offset: 3px;
    }

/* roulang page: category2 */
:root{
      --primary:#4B1438;
      --primary-2:#5A163F;
      --primary-dark:#171018;
      --accent:#C9866A;
      --accent-2:#D09A7A;
      --cherry:#9C2747;
      --bg:#F7F1EC;
      --bg-soft:#FFF9F5;
      --card:#FFFFFF;
      --dark-card:#221520;
      --text:#32262D;
      --muted:#7F6B73;
      --light:#F7EDE8;
      --border:rgba(75,20,56,.12);
      --border-strong:#E8D8D1;
      --shadow:0 18px 50px rgba(75,20,56,.08);
      --shadow-dark:0 18px 60px rgba(0,0,0,.28);
      --radius-sm:14px;
      --radius:24px;
      --radius-lg:34px;
      --container:1220px;
      --transition:all .24s ease;
    }

    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.8;
      font-size:16px;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--transition);}
    a:hover,a:focus{color:var(--cherry);}
    img{max-width:100%;height:auto;display:block;}
    button,input,textarea,select{font:inherit;}
    button{cursor:pointer;}
    ::selection{background:rgba(201,134,106,.35);color:var(--primary);}
    .container-wide{
      width:min(calc(100% - 40px),var(--container));
      margin-inline:auto;
    }
    .section{
      padding:86px 0;
      position:relative;
    }
    .section-tight{padding:64px 0;}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.42rem .86rem;
      border-radius:999px;
      font-size:.86rem;
      font-weight:700;
      color:var(--primary);
      background:rgba(201,134,106,.14);
      border:1px solid rgba(201,134,106,.36);
      letter-spacing:.02em;
    }
    .eyebrow.dark{
      color:var(--light);
      background:rgba(201,134,106,.16);
      border-color:rgba(201,134,106,.42);
    }
    h1,h2,h3,h4,p{margin-top:0;}
    h1{
      font-size:clamp(2.35rem,5vw,4.25rem);
      line-height:1.1;
      letter-spacing:-.04em;
      font-weight:850;
      margin-bottom:1.1rem;
    }
    h2{
      font-size:clamp(2rem,3.5vw,3rem);
      line-height:1.18;
      letter-spacing:-.035em;
      font-weight:820;
      margin-bottom:1rem;
    }
    h3{
      font-size:clamp(1.25rem,2vw,1.55rem);
      line-height:1.32;
      font-weight:800;
      margin-bottom:.55rem;
    }
    p{color:var(--muted);}
    .lead{
      font-size:1.08rem;
      line-height:1.9;
      color:rgba(247,237,232,.78);
      max-width:44rem;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height:48px;
      padding:.86rem 1.35rem;
      border-radius:999px;
      border:1px solid transparent;
      font-size:.96rem;
      font-weight:750;
      line-height:1;
      transition:var(--transition);
      box-shadow:none;
    }
    .btn-primary{
      background:var(--primary-2);
      color:#fff;
      border-color:rgba(201,134,106,.58);
      box-shadow:0 12px 28px rgba(75,20,56,.22);
    }
    .btn-primary:hover,.btn-primary:focus{
      background:var(--cherry);
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 18px 38px rgba(156,39,71,.26);
    }
    .btn-ghost{
      color:var(--light);
      border-color:rgba(201,134,106,.48);
      background:rgba(255,255,255,.04);
    }
    .btn-ghost:hover,.btn-ghost:focus{
      color:#fff;
      background:rgba(201,134,106,.16);
      transform:translateY(-2px);
    }
    .btn-light{
      color:var(--primary);
      border-color:rgba(201,134,106,.42);
      background:#fff;
    }
    .btn-light:hover,.btn-light:focus{
      background:#FFF2EA;
      color:var(--cherry);
      transform:translateY(-2px);
    }

    .info-strip{
      background:var(--primary-dark);
      color:rgba(247,237,232,.82);
      font-size:.82rem;
      border-bottom:1px solid rgba(201,134,106,.16);
    }
    .info-inner{
      min-height:40px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .info-inner span,.info-inner a{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
    }
    .info-inner a{color:var(--accent-2);font-weight:700;}
    .site-header{
      position:sticky;
      top:0;
      z-index:80;
      background:rgba(247,241,236,.96);
      backdrop-filter:saturate(140%) blur(10px);
      border-bottom:1px solid var(--border);
      box-shadow:0 10px 30px rgba(75,20,56,.05);
    }
    .nav-shell{
      width:min(calc(100% - 40px),var(--container));
      margin-inline:auto;
    }
    .title-bar{
      background:transparent;
      padding:.9rem 0;
    }
    .title-bar .menu-icon:after{
      background:var(--primary);
      box-shadow:0 7px 0 var(--primary),0 14px 0 var(--primary);
    }
    .top-bar{
      background:transparent;
      padding:.85rem 0;
      gap:1.2rem;
    }
    .top-bar ul{background:transparent;}
    .brand-wrap{
      display:flex;
      align-items:center;
      gap:.8rem;
      color:var(--text);
      min-width:280px;
    }
    .brand-mark{
      width:42px;
      height:42px;
      display:inline-block;
      flex:0 0 auto;
      border-radius:15px;
      background:
        radial-gradient(circle at 28% 24%,rgba(255,255,255,.7),transparent 23%),
        linear-gradient(135deg,var(--primary),var(--cherry) 58%,var(--accent));
      box-shadow:0 12px 24px rgba(75,20,56,.22);
      position:relative;
    }
    .brand-mark:after{
      content:"";
      position:absolute;
      inset:10px;
      border:1px solid rgba(255,255,255,.55);
      border-radius:10px;
    }
    .brand-text{display:flex;flex-direction:column;line-height:1.25;}
    .brand-name{
      font-weight:850;
      color:var(--primary);
      letter-spacing:-.02em;
      font-size:1rem;
    }
    .brand-sub{
      color:var(--muted);
      font-size:.78rem;
      margin-top:.15rem;
    }
    .top-bar-right{
      display:flex;
      align-items:center;
      gap:1rem;
    }
    .nav-menu{
      display:flex;
      align-items:center;
      gap:.25rem;
      margin:0;
      list-style:none;
    }
    .nav-menu a{
      display:inline-flex;
      align-items:center;
      padding:.58rem .86rem;
      border-radius:999px;
      color:#5E4B54;
      font-weight:750;
      font-size:.94rem;
    }
    .nav-menu a:hover{
      background:rgba(201,134,106,.12);
      color:var(--cherry);
    }
    .nav-menu a.is-active{
      color:var(--primary);
      background:rgba(75,20,56,.09);
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.68rem 1rem;
      border-radius:999px;
      color:#fff;
      background:var(--primary);
      border:1px solid rgba(201,134,106,.5);
      font-weight:800;
      box-shadow:0 12px 24px rgba(75,20,56,.16);
    }
    .nav-cta:hover{background:var(--cherry);color:#fff;transform:translateY(-1px);}

    .category-hero{
      background:
        radial-gradient(circle at 12% 22%,rgba(201,134,106,.28),transparent 28%),
        radial-gradient(circle at 80% 12%,rgba(156,39,71,.26),transparent 30%),
        linear-gradient(145deg,#171018 0%,#241321 45%,#4B1438 100%);
      color:var(--light);
      padding:94px 0 72px;
      overflow:hidden;
      position:relative;
    }
    .category-hero:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(247,237,232,.045) 1px, transparent 1px),
        linear-gradient(90deg,rgba(247,237,232,.045) 1px, transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.35));
    }
    .category-hero:after{
      content:"";
      position:absolute;
      right:-90px;
      bottom:-160px;
      width:420px;
      height:420px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(201,134,106,.24),transparent 68%);
    }
    .hero-content{position:relative;z-index:1;}
    .hero-actions{
      display:flex;
      gap:.8rem;
      flex-wrap:wrap;
      margin-top:1.8rem;
    }
    .hero-meta{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1rem;
      margin-top:2rem;
      max-width:46rem;
    }
    .meta-box{
      padding:1rem;
      border-radius:20px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(201,134,106,.22);
    }
    .meta-box strong{
      display:block;
      color:var(--accent-2);
      font-size:1.4rem;
      line-height:1.1;
      margin-bottom:.35rem;
    }
    .meta-box span{color:rgba(247,237,232,.72);font-size:.88rem;}
    .cover-stack{
      position:relative;
      min-height:430px;
    }
    .cover-card{
      position:absolute;
      border-radius:30px;
      padding:1.2rem;
      overflow:hidden;
      border:1px solid rgba(201,134,106,.25);
      box-shadow:var(--shadow-dark);
      background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    }
    .cover-card:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg,rgba(201,134,106,.18),transparent 45%),
        repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 8px,transparent 8px 18px);
      opacity:.9;
    }
    .cover-card > *{position:relative;z-index:1;}
    .cover-main{
      width:76%;
      min-height:310px;
      right:0;
      top:18px;
      background:
        radial-gradient(circle at 26% 20%,rgba(208,154,122,.46),transparent 28%),
        linear-gradient(150deg,#2B1828,#5A163F 55%,#9C2747);
    }
    .cover-side{
      width:56%;
      min-height:210px;
      left:0;
      bottom:8px;
      background:
        radial-gradient(circle at 70% 18%,rgba(201,134,106,.38),transparent 26%),
        linear-gradient(140deg,#21121F,#3B1430 60%,#7A1E3D);
    }
    .cover-label{
      display:inline-flex;
      padding:.36rem .7rem;
      border-radius:999px;
      background:rgba(23,16,24,.58);
      color:var(--accent-2);
      font-size:.78rem;
      font-weight:800;
    }
    .cover-title{
      margin-top:4.8rem;
      font-weight:850;
      font-size:1.65rem;
      line-height:1.18;
      max-width:15rem;
    }
    .cover-side .cover-title{font-size:1.15rem;margin-top:3.4rem;}
    .cover-note{color:rgba(247,237,232,.72);font-size:.86rem;margin-top:.8rem;}

    .topic-band{
      margin-top:-34px;
      position:relative;
      z-index:3;
    }
    .topic-panel{
      background:var(--card);
      border-radius:var(--radius-lg);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      padding:1.1rem;
    }
    .wide-topic{
      min-height:190px;
      padding:1.6rem;
      border-radius:26px;
      background:
        linear-gradient(135deg,rgba(75,20,56,.08),rgba(201,134,106,.10)),
        #fff;
      border:1px solid rgba(75,20,56,.10);
      transition:var(--transition);
      position:relative;
      overflow:hidden;
    }
    .wide-topic:after{
      content:"";
      position:absolute;
      right:-32px;
      top:-32px;
      width:120px;
      height:120px;
      border-radius:50%;
      background:rgba(201,134,106,.18);
    }
    .wide-topic:hover{
      transform:translateY(-4px);
      border-color:rgba(201,134,106,.7);
      box-shadow:0 18px 42px rgba(75,20,56,.10);
    }
    .topic-number{
      display:inline-flex;
      width:38px;
      height:38px;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      color:#fff;
      background:var(--primary);
      font-weight:850;
      margin-bottom:1rem;
    }
    .wide-topic p{font-size:.95rem;margin-bottom:0;}
    .section-head{
      display:flex;
      justify-content:space-between;
      gap:1.2rem;
      align-items:end;
      margin-bottom:2rem;
    }
    .section-head p{max-width:39rem;margin-bottom:0;}

    .dark-section{
      background:var(--primary-dark);
      color:var(--light);
      overflow:hidden;
    }
    .dark-section p{color:rgba(247,237,232,.72);}
    .dark-section:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 10% 15%,rgba(201,134,106,.16),transparent 24%),
        radial-gradient(circle at 90% 52%,rgba(156,39,71,.15),transparent 28%);
      pointer-events:none;
    }
    .masonry{
      column-count:3;
      column-gap:1.25rem;
      position:relative;
      z-index:1;
    }
    .masonry-card{
      break-inside:avoid;
      margin:0 0 1.25rem;
      border-radius:28px;
      overflow:hidden;
      background:#221520;
      border:1px solid rgba(201,134,106,.18);
      box-shadow:0 16px 44px rgba(0,0,0,.22);
      transition:var(--transition);
    }
    .masonry-card:hover{
      transform:translateY(-4px);
      border-color:rgba(201,134,106,.58);
      box-shadow:0 22px 60px rgba(0,0,0,.32);
    }
    .abstract-cover{
      height:150px;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 24% 30%,rgba(208,154,122,.55),transparent 22%),
        radial-gradient(circle at 76% 70%,rgba(156,39,71,.45),transparent 26%),
        linear-gradient(135deg,#35152B,#622044 58%,#C9866A);
      transition:transform .35s ease;
    }
    .masonry-card:hover .abstract-cover{transform:scale(1.03);}
    .abstract-cover.tall{height:230px;}
    .abstract-cover.short{height:112px;}
    .abstract-cover:after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
      background-size:28px 28px;
      opacity:.45;
    }
    .masonry-body{padding:1.35rem;}
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-bottom:.85rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:.24rem .62rem;
      font-size:.75rem;
      font-weight:800;
      color:var(--accent-2);
      background:rgba(201,134,106,.12);
      border:1px solid rgba(201,134,106,.22);
      line-height:1.3;
    }
    .masonry-card h3{color:var(--light);}
    .masonry-card p{font-size:.94rem;margin-bottom:1rem;}
    .card-link{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      color:var(--accent-2);
      font-weight:800;
      font-size:.92rem;
    }
    .card-link:hover{color:#fff;gap:.55rem;}

    .filter-section{
      background:
        linear-gradient(180deg,#F7F1EC 0%,#FFF9F5 100%);
    }
    .filter-board{
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .filter-left{
      height:100%;
      padding:2rem;
      background:
        radial-gradient(circle at 15% 20%,rgba(201,134,106,.22),transparent 26%),
        linear-gradient(145deg,#4B1438,#221520);
      color:var(--light);
    }
    .filter-left p{color:rgba(247,237,232,.72);}
    .filter-list{
      padding:2rem;
      display:grid;
      gap:1rem;
    }
    .filter-item{
      display:flex;
      gap:1rem;
      align-items:flex-start;
      padding:1rem;
      border-radius:22px;
      border:1px solid rgba(75,20,56,.10);
      background:#FFF9F5;
      transition:var(--transition);
    }
    .filter-item:hover{
      transform:translateX(4px);
      border-color:rgba(201,134,106,.55);
      background:#fff;
    }
    .filter-icon{
      width:44px;
      height:44px;
      border-radius:16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--cherry));
      flex:0 0 auto;
    }
    .filter-item h3{font-size:1.1rem;margin-bottom:.25rem;}
    .filter-item p{margin-bottom:0;font-size:.94rem;}
    .pill-cloud{
      display:flex;
      gap:.65rem;
      flex-wrap:wrap;
      margin-top:1.25rem;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.52rem .78rem;
      border-radius:999px;
      color:var(--primary);
      background:#fff;
      border:1px solid rgba(201,134,106,.38);
      font-weight:800;
      font-size:.86rem;
    }

    .compliance-cta{
      background:
        radial-gradient(circle at 82% 18%,rgba(201,134,106,.24),transparent 26%),
        linear-gradient(135deg,#4B1438,#171018);
      color:var(--light);
      border-radius:var(--radius-lg);
      padding:2.6rem;
      overflow:hidden;
      position:relative;
      border:1px solid rgba(201,134,106,.24);
      box-shadow:var(--shadow-dark);
    }
    .compliance-cta p{color:rgba(247,237,232,.76);}
    .compliance-list{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1rem;
      margin-top:1.5rem;
    }
    .compliance-item{
      padding:1rem;
      border-radius:22px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(201,134,106,.18);
    }
    .compliance-item i{color:var(--accent-2);margin-bottom:.6rem;font-size:1.15rem;}
    .compliance-item strong{display:block;color:#fff;margin-bottom:.25rem;}
    .compliance-item span{color:rgba(247,237,232,.68);font-size:.9rem;}

    .faq-wrap{
      max-width:920px;
      margin-inline:auto;
    }
    .accordion{
      background:transparent;
    }
    .accordion-item{
      margin-bottom:.9rem;
      border-radius:22px;
      overflow:hidden;
      border:1px solid var(--border);
      background:#fff;
      box-shadow:0 10px 28px rgba(75,20,56,.05);
    }
    .accordion-title{
      color:var(--primary);
      font-size:1.02rem;
      font-weight:850;
      border:none;
      padding:1.1rem 1.25rem;
      background:#fff;
    }
    .accordion-title:hover,.accordion-title:focus{
      color:var(--cherry);
      background:#FFF4EE;
    }
    .accordion-title:before{
      color:var(--accent);
      font-weight:900;
      right:1.25rem;
    }
    .accordion-content{
      border:none;
      background:#FFF9F5;
      color:var(--muted);
      padding:1.1rem 1.25rem 1.35rem;
      line-height:1.8;
    }

    .contact-section{
      background:#FFF9F5;
    }
    .contact-card{
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      padding:2rem;
    }
    .contact-points{
      display:grid;
      gap:.85rem;
      margin-top:1.3rem;
    }
    .contact-points div{
      display:flex;
      align-items:flex-start;
      gap:.75rem;
      color:var(--muted);
    }
    .contact-points i{color:var(--accent);margin-top:.35rem;}
    .mini-form label{
      color:var(--primary);
      font-weight:800;
      font-size:.9rem;
      margin-bottom:.35rem;
    }
    .mini-form input,.mini-form textarea,.mini-form select{
      width:100%;
      border:1px solid var(--border-strong);
      border-radius:16px;
      background:#FFFDFC;
      box-shadow:none;
      min-height:48px;
      padding:.75rem .9rem;
      color:var(--text);
      transition:var(--transition);
    }
    .mini-form textarea{min-height:118px;resize:vertical;}
    .mini-form input:focus,.mini-form textarea:focus,.mini-form select:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 4px rgba(201,134,106,.16);
      background:#fff;
    }

    .footer{
      background:var(--primary-dark);
      color:var(--light);
      padding:64px 0 28px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr .75fr .85fr;
      gap:2rem;
      padding-bottom:2rem;
      border-bottom:1px solid rgba(201,134,106,.18);
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:.85rem;
      margin-bottom:1rem;
    }
    .footer-title{
      font-weight:850;
      color:#fff;
      font-size:1.1rem;
    }
    .footer h4{
      position:relative;
      color:#fff;
      font-size:1rem;
      font-weight:850;
      margin-bottom:1rem;
      padding-bottom:.65rem;
    }
    .footer h4:after{
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width:38px;
      height:2px;
      background:var(--accent);
    }
    .footer-links{
      margin:0;
      list-style:none;
    }
    .footer-links li{margin-bottom:.55rem;}
    .footer-links a{
      color:rgba(247,237,232,.72);
      font-size:.94rem;
    }
    .footer-links a:hover{color:var(--accent-2);}
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      padding-top:1.35rem;
      color:rgba(247,237,232,.62);
      font-size:.88rem;
    }

    @media (max-width:1024px){
      .top-bar-right{gap:.6rem;}
      .nav-menu a{padding:.52rem .65rem;font-size:.88rem;}
      .nav-cta{padding:.6rem .8rem;}
      .cover-stack{min-height:360px;margin-top:2rem;}
      .masonry{column-count:2;}
      .compliance-list{grid-template-columns:1fr;}
      .footer-grid{grid-template-columns:1fr 1fr;}
    }
    @media (max-width:768px){
      .section{padding:58px 0;}
      .container-wide,.nav-shell{width:min(calc(100% - 28px),var(--container));}
      .info-inner{justify-content:center;text-align:center;flex-wrap:wrap;padding:.35rem 0;}
      .info-hide-small{display:none!important;}
      .top-bar{
        padding:.9rem 0 1.1rem;
        display:block;
        background:#FFF9F5;
        border-radius:0 0 24px 24px;
      }
      .top-bar-left,.top-bar-right{width:100%;}
      .brand-wrap{margin-bottom:.85rem;min-width:0;}
      .top-bar-right{
        flex-direction:column;
        align-items:stretch;
      }
      .nav-menu{
        flex-direction:column;
        align-items:stretch;
        width:100%;
        gap:.35rem;
      }
      .nav-menu a{
        width:100%;
        justify-content:center;
        padding:.78rem 1rem;
        background:rgba(75,20,56,.05);
      }
      .nav-cta{justify-content:center;width:100%;}
      .category-hero{padding:68px 0 58px;}
      .hero-meta{grid-template-columns:1fr;}
      .hero-actions .btn{width:100%;}
      .cover-stack{min-height:320px;}
      .cover-main{width:82%;min-height:260px;}
      .cover-side{width:66%;min-height:170px;}
      .section-head{display:block;}
      .masonry{column-count:1;}
      .filter-left,.filter-list{padding:1.35rem;}
      .compliance-cta{padding:1.45rem;}
      .contact-card{padding:1.35rem;}
      .footer-grid{grid-template-columns:1fr;}
      .footer-bottom{flex-direction:column;}
    }
    @media (max-width:520px){
      body{font-size:15px;}
      h1{font-size:2.35rem;}
      .brand-sub{display:none;}
      .brand-name{font-size:.94rem;}
      .brand-mark{width:38px;height:38px;border-radius:14px;}
      .topic-panel{padding:.75rem;}
      .wide-topic{min-height:auto;padding:1.25rem;}
      .cover-title{font-size:1.25rem;}
      .cover-side .cover-title{font-size:1rem;}
      .filter-item{display:block;}
      .filter-icon{margin-bottom:.8rem;}
    }

/* roulang page: category3 */
:root{
      --primary:#4B1438;
      --primary-2:#5A163F;
      --accent:#C9866A;
      --accent-2:#D09A7A;
      --cherry:#9C2747;
      --night:#171018;
      --night-2:#221520;
      --paper:#F7F1EC;
      --paper-2:#FFF9F5;
      --white:#FFFFFF;
      --text:#32262D;
      --muted:#7F6B73;
      --line:rgba(75,20,56,.12);
      --line-strong:#E8D8D1;
      --radius-sm:14px;
      --radius-md:22px;
      --radius-lg:32px;
      --shadow:0 18px 50px rgba(75,20,56,.08);
      --shadow-strong:0 24px 70px rgba(75,20,56,.16);
      --dark-shadow:0 18px 60px rgba(0,0,0,.28);
      --font:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      --ease:all .26s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 10% 4%, rgba(201,134,106,.18), transparent 32rem),
        linear-gradient(180deg, #fffaf6 0%, var(--paper) 48%, #fffaf6 100%);
      font-size:16px;
      line-height:1.8;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover,a:focus{color:var(--cherry)}
    img{max-width:100%;height:auto;display:block}
    button,input,textarea,select{font-family:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(201,134,106,.35);color:var(--primary)}
    :focus-visible{outline:3px solid rgba(201,134,106,.42);outline-offset:3px;border-radius:12px}

    .container-wide{
      width:min(1180px, calc(100% - 40px));
      margin-inline:auto;
    }
    .section{padding:84px 0}
    .section-tight{padding:58px 0}
    .section-title{
      margin:0 0 14px;
      color:var(--primary);
      font-size:clamp(2rem, 4vw, 2.75rem);
      line-height:1.18;
      font-weight:850;
      letter-spacing:-.04em;
    }
    .section-lead{
      margin:0;
      color:var(--muted);
      max-width:740px;
      font-size:1.04rem;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.45rem .78rem;
      border:1px solid rgba(201,134,106,.42);
      border-radius:999px;
      background:rgba(255,249,245,.86);
      color:var(--primary-2);
      font-size:.86rem;
      font-weight:750;
      line-height:1.2;
    }
    .eyebrow i{color:var(--accent)}
    .btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
    .button.btn-main,
    .btn-main{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      margin:0;
      padding:.95rem 1.35rem;
      border-radius:999px;
      border:1px solid rgba(201,134,106,.55);
      background:linear-gradient(135deg,var(--primary-2),var(--primary));
      color:#fff;
      font-weight:800;
      box-shadow:0 14px 34px rgba(75,20,56,.22);
      transition:var(--ease);
    }
    .button.btn-main:hover,
    .btn-main:hover{
      transform:translateY(-2px);
      background:linear-gradient(135deg,var(--cherry),var(--primary));
      color:#fff;
      box-shadow:0 20px 46px rgba(156,39,71,.28);
    }
    .btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.9rem 1.24rem;
      border-radius:999px;
      border:1px solid rgba(75,20,56,.18);
      color:var(--primary);
      background:rgba(255,255,255,.64);
      font-weight:800;
    }
    .btn-ghost:hover{
      background:rgba(201,134,106,.13);
      border-color:rgba(201,134,106,.48);
      color:var(--cherry);
      transform:translateY(-2px);
    }

    .info-strip{
      background:var(--night);
      color:rgba(247,237,232,.82);
      font-size:.82rem;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .info-strip .container-wide{
      min-height:38px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .info-strip strong{color:var(--accent-2);font-weight:800}
    .info-links{display:flex;gap:18px;align-items:center;white-space:nowrap}
    .info-links a{color:rgba(247,237,232,.84)}
    .info-links a:hover{color:var(--accent-2)}

    .site-header{
      position:sticky;
      top:0;
      z-index:60;
      background:rgba(255,249,245,.94);
      border-bottom:1px solid var(--line);
      box-shadow:0 10px 28px rgba(75,20,56,.06);
      backdrop-filter:saturate(140%) blur(12px);
    }
    .nav-shell{width:min(1180px, calc(100% - 40px));margin-inline:auto}
    .top-bar,
    .top-bar ul{
      background:transparent;
    }
    .top-bar{
      padding:.86rem 0;
    }
    .brand-wrap{
      display:flex;
      align-items:center;
      gap:.85rem;
      color:var(--primary);
      min-width:280px;
    }
    .brand-mark{
      width:42px;
      height:42px;
      flex:0 0 42px;
      border-radius:16px;
      background:
        linear-gradient(135deg, rgba(201,134,106,.98), rgba(156,39,71,.96)),
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.7), transparent 35%);
      box-shadow:0 12px 28px rgba(156,39,71,.22);
      position:relative;
      overflow:hidden;
    }
    .brand-mark::before,
    .brand-mark::after{
      content:"";
      position:absolute;
      border-radius:999px;
      background:rgba(255,249,245,.56);
    }
    .brand-mark::before{width:22px;height:5px;left:10px;top:13px;transform:rotate(-28deg)}
    .brand-mark::after{width:16px;height:5px;right:7px;bottom:12px;transform:rotate(-28deg)}
    .brand-text{display:flex;flex-direction:column;line-height:1.25}
    .brand-name{font-weight:900;letter-spacing:-.03em;font-size:1.03rem}
    .brand-sub{font-size:.78rem;color:var(--muted);margin-top:2px}
    .nav-menu{
      display:flex;
      align-items:center;
      gap:4px;
      margin:0;
      list-style:none;
    }
    .nav-menu a{
      display:inline-flex;
      align-items:center;
      padding:.64rem .88rem;
      border-radius:999px;
      color:var(--text);
      font-size:.94rem;
      font-weight:760;
    }
    .nav-menu a:hover{
      color:var(--primary);
      background:rgba(201,134,106,.12);
    }
    .nav-menu a.is-active{
      color:var(--primary);
      background:rgba(75,20,56,.09);
      box-shadow:inset 0 0 0 1px rgba(75,20,56,.08);
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      gap:.48rem;
      margin-left:12px;
      padding:.72rem 1rem;
      border-radius:999px;
      background:var(--primary);
      color:#fff;
      font-weight:850;
      font-size:.92rem;
      border:1px solid rgba(201,134,106,.48);
      box-shadow:0 12px 26px rgba(75,20,56,.18);
    }
    .nav-cta:hover{background:var(--cherry);color:#fff;transform:translateY(-1px)}
    .title-bar{
      background:transparent;
      padding:.8rem 0;
      color:var(--primary);
    }
    .menu-icon::after{background:var(--primary);box-shadow:0 7px 0 var(--primary),0 14px 0 var(--primary)}

    .premium-hero{
      position:relative;
      overflow:hidden;
      padding:92px 0 66px;
      background:
        linear-gradient(135deg, rgba(255,249,245,.92) 0%, rgba(247,241,236,.98) 52%, rgba(232,216,209,.82) 100%);
      border-bottom:1px solid var(--line);
    }
    .premium-hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(75,20,56,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,20,56,.045) 1px, transparent 1px);
      background-size:44px 44px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.75), transparent 86%);
      pointer-events:none;
    }
    .premium-hero::after{
      content:"";
      position:absolute;
      width:520px;
      height:520px;
      right:-180px;
      top:-160px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(201,134,106,.24), transparent 68%);
      pointer-events:none;
    }
    .hero-center{
      position:relative;
      z-index:1;
      max-width:930px;
      margin:0 auto;
      text-align:center;
    }
    .hero-center h1{
      margin:18px 0 18px;
      color:var(--primary);
      font-size:clamp(2.35rem, 6vw, 4.25rem);
      line-height:1.08;
      font-weight:900;
      letter-spacing:-.055em;
    }
    .hero-center p{
      margin:0 auto 28px;
      max-width:760px;
      color:#604D55;
      font-size:1.12rem;
      line-height:1.9;
    }
    .tag-cloud{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:10px;
      margin:28px auto 0;
      max-width:860px;
    }
    .cloud-tag{
      display:inline-flex;
      align-items:center;
      gap:.44rem;
      padding:.58rem .88rem;
      border-radius:999px;
      border:1px solid rgba(75,20,56,.12);
      background:rgba(255,255,255,.68);
      color:var(--primary-2);
      font-weight:780;
      box-shadow:0 10px 24px rgba(75,20,56,.05);
    }
    .cloud-tag:nth-child(even){background:rgba(201,134,106,.12)}
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      max-width:780px;
      margin:34px auto 0;
    }
    .metric-card{
      padding:18px 16px;
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.72);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .metric-card strong{
      display:block;
      color:var(--primary);
      font-size:1.65rem;
      line-height:1.1;
      font-weight:900;
    }
    .metric-card span{color:var(--muted);font-size:.9rem}

    .zone-entry{
      background:var(--paper-2);
    }
    .zone-card{
      position:relative;
      min-height:290px;
      padding:28px;
      border-radius:var(--radius-lg);
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      transition:var(--ease);
    }
    .zone-card:hover{
      transform:translateY(-6px);
      border-color:rgba(201,134,106,.55);
      box-shadow:var(--shadow-strong);
    }
    .zone-card.dark{
      background:
        linear-gradient(135deg, rgba(75,20,56,.96), rgba(34,21,32,.98));
      color:#F7EDE8;
    }
    .zone-card::after{
      content:"";
      position:absolute;
      width:180px;
      height:180px;
      right:-55px;
      bottom:-70px;
      border-radius:52px;
      transform:rotate(22deg);
      background:linear-gradient(135deg, rgba(201,134,106,.26), rgba(156,39,71,.10));
    }
    .zone-num{
      display:inline-flex;
      width:52px;
      height:52px;
      align-items:center;
      justify-content:center;
      border-radius:18px;
      background:rgba(201,134,106,.15);
      color:var(--primary);
      font-size:1.35rem;
      font-weight:950;
      margin-bottom:20px;
    }
    .zone-card.dark .zone-num{background:rgba(247,237,232,.12);color:var(--accent-2)}
    .zone-card h3{
      margin:0 0 12px;
      font-size:1.45rem;
      color:var(--primary);
      font-weight:900;
      letter-spacing:-.03em;
    }
    .zone-card.dark h3{color:#fff}
    .zone-card p{
      position:relative;
      z-index:1;
      margin:0 0 22px;
      color:var(--muted);
      max-width:23rem;
    }
    .zone-card.dark p{color:rgba(247,237,232,.76)}
    .mini-tags{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
    .mini-tags span{
      display:inline-flex;
      padding:.32rem .62rem;
      border-radius:999px;
      background:rgba(75,20,56,.07);
      color:var(--primary);
      font-size:.82rem;
      font-weight:780;
    }
    .zone-card.dark .mini-tags span{background:rgba(255,255,255,.1);color:rgba(247,237,232,.88)}

    .compare-section{
      background:
        linear-gradient(180deg, var(--paper) 0%, #fffaf6 100%);
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .compare-panel{
      margin-top:34px;
      border-radius:var(--radius-lg);
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .compare-row{
      display:grid;
      grid-template-columns:240px 1fr 1fr;
      border-bottom:1px solid var(--line);
      min-height:96px;
    }
    .compare-row:last-child{border-bottom:0}
    .compare-head{
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
      font-weight:900;
    }
    .compare-row > div{
      padding:24px;
      display:flex;
      align-items:center;
      border-right:1px solid var(--line);
    }
    .compare-row > div:last-child{border-right:0}
    .compare-label{
      background:rgba(201,134,106,.10);
      color:var(--primary);
      font-weight:900;
    }
    .compare-row p{margin:0;color:var(--muted)}
    .compare-head p{color:rgba(255,255,255,.78)}
    .compare-check{
      color:var(--primary);
      font-weight:850;
      gap:10px;
    }
    .compare-check i{color:var(--accent)}

    .featured-wrap{
      background:#fffaf6;
    }
    .rank-layout{
      display:grid;
      grid-template-columns:minmax(0, 1.1fr) minmax(320px, .9fr);
      gap:28px;
      align-items:start;
      margin-top:34px;
    }
    .rank-list{
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .rank-item{
      display:grid;
      grid-template-columns:74px 1fr auto;
      gap:18px;
      align-items:center;
      padding:20px;
      border-radius:24px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 12px 34px rgba(75,20,56,.055);
      transition:var(--ease);
    }
    .rank-item:hover{
      transform:translateX(4px);
      border-color:rgba(201,134,106,.55);
      box-shadow:var(--shadow);
    }
    .rank-index{
      width:58px;
      height:58px;
      border-radius:20px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg, rgba(201,134,106,.22), rgba(75,20,56,.08));
      color:var(--primary);
      font-size:1.2rem;
      font-weight:950;
    }
    .rank-item h3{
      margin:0 0 4px;
      color:var(--primary);
      font-size:1.16rem;
      font-weight:900;
    }
    .rank-item p{margin:0;color:var(--muted);font-size:.96rem}
    .rank-action{
      color:var(--primary);
      font-weight:850;
      white-space:nowrap;
    }
    .rank-action i{transition:var(--ease);margin-left:5px}
    .rank-item:hover .rank-action i{transform:translateX(4px)}
    .editor-card{
      position:sticky;
      top:112px;
      padding:30px;
      border-radius:var(--radius-lg);
      color:#F7EDE8;
      background:
        linear-gradient(145deg, rgba(34,21,32,.98), rgba(75,20,56,.94)),
        radial-gradient(circle at 80% 0%, rgba(201,134,106,.26), transparent 38%);
      box-shadow:var(--dark-shadow);
      overflow:hidden;
    }
    .editor-card::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
      background-size:100% 42px;
      opacity:.45;
    }
    .editor-card > *{position:relative;z-index:1}
    .editor-card h3{
      margin:14px 0 12px;
      color:#fff;
      font-size:1.55rem;
      font-weight:900;
    }
    .editor-card p{color:rgba(247,237,232,.76)}
    .editor-points{
      margin:22px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:12px;
    }
    .editor-points li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:rgba(247,237,232,.84);
    }
    .editor-points i{color:var(--accent-2);margin-top:7px}

    .process{
      background:
        linear-gradient(135deg, var(--night) 0%, #241522 100%);
      color:#F7EDE8;
      position:relative;
      overflow:hidden;
    }
    .process::after{
      content:"";
      position:absolute;
      width:420px;
      height:420px;
      left:-160px;
      bottom:-180px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(201,134,106,.18), transparent 66%);
    }
    .process .section-title{color:#fff}
    .process .section-lead{color:rgba(247,237,232,.74)}
    .step-card{
      position:relative;
      z-index:1;
      padding:26px;
      min-height:240px;
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.06);
      border:1px solid rgba(247,237,232,.12);
      box-shadow:var(--dark-shadow);
      transition:var(--ease);
    }
    .step-card:hover{
      transform:translateY(-5px);
      border-color:rgba(201,134,106,.5);
      background:rgba(255,255,255,.085);
    }
    .step-kicker{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:26px;
      color:var(--accent-2);
      font-weight:900;
    }
    .step-kicker span:last-child{
      font-size:2rem;
      color:rgba(247,237,232,.16);
      line-height:1;
    }
    .step-card h3{
      color:#fff;
      margin:0 0 10px;
      font-size:1.22rem;
      font-weight:900;
    }
    .step-card p{margin:0;color:rgba(247,237,232,.72)}

    .faq-section{background:var(--paper-2)}
    .accordion{
      margin-top:32px;
      background:transparent;
    }
    .accordion-item{
      margin-bottom:12px;
      border:1px solid var(--line);
      border-radius:22px;
      overflow:hidden;
      background:#fff;
      box-shadow:0 10px 28px rgba(75,20,56,.045);
    }
    .accordion-title{
      border:0;
      padding:1.15rem 1.35rem;
      color:var(--primary);
      font-weight:900;
      font-size:1.02rem;
      background:#fff;
    }
    .accordion-title:hover,
    .accordion-title:focus{
      background:rgba(201,134,106,.10);
      color:var(--cherry);
    }
    .accordion-title::before{color:var(--accent);font-weight:900}
    .accordion-content{
      border:0;
      padding:0 1.35rem 1.25rem;
      color:var(--muted);
      background:linear-gradient(180deg, rgba(201,134,106,.08), #fff 52%);
    }

    .cta-section{
      padding:86px 0;
      background:
        radial-gradient(circle at 78% 22%, rgba(201,134,106,.24), transparent 34rem),
        linear-gradient(135deg, var(--primary), var(--night));
      color:#F7EDE8;
    }
    .cta-card{
      border-radius:var(--radius-lg);
      padding:36px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(247,237,232,.14);
      box-shadow:var(--dark-shadow);
    }
    .cta-card h2{
      margin:0 0 14px;
      color:#fff;
      font-size:clamp(2rem, 4vw, 2.8rem);
      line-height:1.18;
      font-weight:900;
      letter-spacing:-.04em;
    }
    .cta-card p{color:rgba(247,237,232,.76);margin-bottom:24px}
    .contact-card{
      padding:28px;
      border-radius:28px;
      background:#fffaf6;
      border:1px solid rgba(201,134,106,.24);
      box-shadow:var(--dark-shadow);
      color:var(--text);
    }
    .contact-card label{
      color:var(--primary);
      font-weight:850;
      margin-bottom:7px;
    }
    .contact-card input,
    .contact-card textarea,
    .contact-card select{
      min-height:48px;
      border-radius:16px;
      border:1px solid var(--line-strong);
      background:#fff;
      box-shadow:none;
      color:var(--text);
      margin-bottom:14px;
      transition:var(--ease);
    }
    .contact-card textarea{min-height:112px;resize:vertical}
    .contact-card input:focus,
    .contact-card textarea:focus,
    .contact-card select:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 4px rgba(201,134,106,.16);
      background:#fff;
    }
    .form-note{
      margin:12px 0 0;
      color:var(--muted);
      font-size:.86rem;
      line-height:1.6;
    }

    .footer{
      background:var(--night);
      color:#F7EDE8;
      padding:58px 0 26px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr .8fr .8fr;
      gap:34px;
      padding-bottom:34px;
      border-bottom:1px solid rgba(247,237,232,.12);
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:.9rem;
      margin-bottom:16px;
    }
    .footer-title{
      color:#fff;
      font-weight:950;
      letter-spacing:-.03em;
      font-size:1.08rem;
    }
    .footer-group h4{
      margin:0 0 16px;
      color:#fff;
      font-size:1rem;
      font-weight:900;
      position:relative;
      padding-bottom:10px;
    }
    .footer-group h4::after{
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width:34px;
      height:2px;
      background:var(--accent);
      border-radius:999px;
    }
    .footer-links{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:9px;
    }
    .footer-links a{color:rgba(247,237,232,.72)}
    .footer-links a:hover{color:var(--accent-2);padding-left:4px}
    .footer-bottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding-top:22px;
      color:rgba(247,237,232,.66);
      font-size:.88rem;
    }

    @media (max-width:1024px){
      .top-bar{
        flex-direction:column;
        align-items:stretch;
        gap:14px;
      }
      .top-bar-left,.top-bar-right{width:100%}
      .top-bar-right{
        display:flex;
        align-items:center;
        justify-content:space-between;
      }
      .nav-menu{flex-wrap:wrap}
      .rank-layout{grid-template-columns:1fr}
      .editor-card{position:relative;top:auto}
      .compare-row{grid-template-columns:180px 1fr 1fr}
      .compare-row > div{padding:20px}
    }

    @media (max-width:767px){
      .container-wide,.nav-shell{width:min(100% - 28px, 1180px)}
      .section{padding:58px 0}
      .section-tight{padding:42px 0}
      .info-strip .container-wide{
        min-height:auto;
        padding:8px 0;
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
      }
      .info-links{gap:12px;flex-wrap:wrap}
      .top-bar{
        padding:.7rem 0 1rem;
        display:none;
      }
      .top-bar.expanded{display:block}
      .top-bar-right{
        display:block;
      }
      .brand-wrap{margin-bottom:12px;min-width:0}
      .nav-menu{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        margin:10px 0;
      }
      .nav-menu a{
        padding:.78rem .9rem;
        background:rgba(75,20,56,.045);
      }
      .nav-cta{
        width:100%;
        justify-content:center;
        margin:10px 0 0;
      }
      .premium-hero{padding:62px 0 48px}
      .hero-center{text-align:left}
      .hero-center p{font-size:1rem}
      .tag-cloud{justify-content:flex-start}
      .hero-metrics{grid-template-columns:1fr}
      .btn-row .btn-main,.btn-row .btn-ghost{width:100%}
      .zone-card{min-height:auto;padding:24px}
      .compare-panel{background:transparent;border:0;box-shadow:none}
      .compare-row{
        grid-template-columns:1fr;
        margin-bottom:14px;
        border:1px solid var(--line);
        border-radius:22px;
        overflow:hidden;
        background:#fff;
      }
      .compare-row > div{
        border-right:0;
        border-bottom:1px solid var(--line);
      }
      .compare-row > div:last-child{border-bottom:0}
      .rank-item{
        grid-template-columns:56px 1fr;
      }
      .rank-action{
        grid-column:2;
      }
      .rank-index{
        width:48px;
        height:48px;
        border-radius:16px;
      }
      .cta-card,.contact-card{padding:24px}
      .footer-grid{grid-template-columns:1fr}
      .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
      }
    }

    @media (max-width:520px){
      .brand-name{font-size:.94rem}
      .brand-sub{display:none}
      .cloud-tag{font-size:.86rem}
      .hero-center h1{font-size:2.25rem}
      .section-title{font-size:2rem}
    }

/* roulang page: category1 */
:root{
      --primary:#5a163f;
      --primary-2:#4b1438;
      --accent:#d09a7a;
      --accent-2:#c9866a;
      --accent-3:#9c2747;
      --bg:#f7f1ec;
      --bg-soft:#fff9f5;
      --bg-dark:#171018;
      --surface:#ffffff;
      --surface-2:#fff5ef;
      --surface-dark:#221520;
      --text:#32262d;
      --text-soft:#7f6b73;
      --text-inverse:#f7ede8;
      --line:rgba(75,20,56,.12);
      --line-strong:rgba(201,134,106,.34);
      --shadow-light:0 18px 50px rgba(75,20,56,.08);
      --shadow-medium:0 20px 60px rgba(75,20,56,.12);
      --shadow-dark:0 18px 60px rgba(0,0,0,.28);
      --radius-sm:14px;
      --radius-md:22px;
      --radius-lg:32px;
      --radius-xl:40px;
      --container:1220px;
      --space-xs:.5rem;
      --space-sm:.875rem;
      --space-md:1.25rem;
      --space-lg:1.75rem;
      --space-xl:2.5rem;
      --space-2xl:3.75rem;
      --space-3xl:5rem;
      --ease:cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(208,154,122,.12), transparent 24%),
        radial-gradient(circle at 88% 10%, rgba(90,22,63,.09), transparent 23%),
        linear-gradient(180deg,#fbf6f2 0%, #f7f1ec 100%);
      line-height:1.8;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(75,20,56,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,20,56,.03) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.14), transparent 80%);
      z-index:-1;
    }
    img{max-width:100%;display:block}
    a{
      color:var(--primary);
      text-decoration:none;
      transition:color .22s var(--ease), background-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
    }
    a:hover,a:focus{color:var(--accent-3)}
    a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px rgba(208,154,122,.22), 0 0 0 1px rgba(208,154,122,.45) inset;
      border-color:var(--accent-2)!important;
    }
    button,input,select,textarea{
      font:inherit;
      color:inherit;
    }
    ul{margin:0;padding:0;list-style:none}
    p{margin:0 0 1rem}
    h1,h2,h3,h4,h5{margin:0 0 .75rem;line-height:1.16;color:var(--primary-2);font-weight:800;letter-spacing:.01em}
    h1{font-size:clamp(2.1rem,4vw,3.65rem);line-height:1.08}
    h2{font-size:clamp(1.7rem,2.7vw,2.55rem)}
    h3{font-size:clamp(1.25rem,2vw,1.65rem)}
    h4{font-size:1.05rem}
    .grid-container{max-width:var(--container)}
    .skip-link{
      position:absolute;
      left:-999px;
      top:0;
      z-index:9999;
      background:var(--primary);
      color:var(--text-inverse);
      padding:.7rem 1rem;
      border-radius:999px;
    }
    .skip-link:focus{left:1rem;top:1rem}
    .site-ribbon{
      background:linear-gradient(90deg, #120d12 0%, #1d1320 50%, #120d12 100%);
      color:rgba(247,237,232,.82);
      font-size:.82rem;
      letter-spacing:.01em;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .ribbon-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      min-height:40px;
      padding:.3rem 0;
      flex-wrap:wrap;
    }
    .ribbon-row span,.ribbon-row a{
      color:rgba(247,237,232,.78);
    }
    .ribbon-row a{
      color:var(--accent);
      font-weight:600;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:90;
      backdrop-filter:saturate(120%);
      transition:box-shadow .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
      background:rgba(251,246,242,.92);
      border-bottom:1px solid rgba(75,20,56,.08);
    }
    .site-header.is-scrolled{
      box-shadow:0 18px 40px rgba(34,21,32,.12);
      background:rgba(251,246,242,.98);
    }
    .nav-shell{
      max-width:var(--container);
      margin:0 auto;
      padding:0 .85rem;
    }
    .title-bar{
      display:flex;
      align-items:center;
      gap:.75rem;
      padding:1rem 0;
      background:transparent;
      color:var(--primary-2);
    }
    .title-bar .menu-icon{
      width:2.5rem;
      height:2.5rem;
      border-radius:999px;
      position:relative;
      background:rgba(75,20,56,.06);
      margin:0;
    }
    .title-bar .menu-icon::after{
      background:var(--primary-2);
      box-shadow:0 7px 0 var(--primary-2), 0 -7px 0 var(--primary-2);
    }
    .title-bar-title{
      font-size:1rem;
      font-weight:800;
      color:var(--primary-2);
      line-height:1.2;
    }
    .top-bar{
      background:transparent;
      padding:1rem 0 1.15rem;
    }
    .top-bar,
    .top-bar ul{
      background:transparent;
    }
    .top-bar-left{
      display:flex;
      align-items:center;
    }
    .brand-wrap{
      display:flex;
      align-items:center;
      gap:.95rem;
      min-width:0;
    }
    .brand-mark{
      width:3rem;
      height:3rem;
      border-radius:18px;
      flex:0 0 auto;
      background:
        radial-gradient(circle at 28% 26%, rgba(255,255,255,.85), transparent 30%),
        linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 55%, var(--accent-2) 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 14px 28px rgba(90,22,63,.18);
      position:relative;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:.42rem;
      border:1px solid rgba(255,255,255,.3);
      border-radius:13px;
    }
    .brand-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
    .brand-name{
      font-size:1.04rem;
      font-weight:800;
      color:var(--primary-2);
      letter-spacing:.01em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-sub{
      font-size:.82rem;
      color:var(--text-soft);
    }
    .top-bar-right{
      display:flex;
      align-items:center;
      gap:1rem;
    }
    .main-menu{
      gap:.35rem;
      align-items:center;
      flex-wrap:wrap;
    }
    .main-menu li{display:flex}
    .main-menu a{
      color:var(--text);
      font-weight:700;
      font-size:.96rem;
      border-radius:999px;
      padding:.7rem 1rem;
      line-height:1;
    }
    .main-menu a:hover{
      background:rgba(75,20,56,.07);
      color:var(--primary-2);
    }
    .main-menu a.is-active,
    .main-menu a[aria-current="page"]{
      color:var(--primary-2);
      background:linear-gradient(135deg, rgba(201,134,106,.2), rgba(90,22,63,.08));
      box-shadow:inset 0 0 0 1px rgba(201,134,106,.35);
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      padding:.82rem 1.15rem;
      border-radius:999px;
      background:linear-gradient(135deg, var(--primary) 0%, var(--accent-3) 100%);
      color:var(--text-inverse);
      font-weight:700;
      letter-spacing:.01em;
      box-shadow:0 14px 28px rgba(90,22,63,.18);
      white-space:nowrap;
    }
    .nav-cta:hover{
      color:var(--text-inverse);
      transform:translateY(-1px);
      box-shadow:0 18px 34px rgba(90,22,63,.24);
      background:linear-gradient(135deg, var(--accent-3) 0%, #7f1f39 100%);
    }
    .button{
      border:none;
      border-radius:999px;
      font-weight:700;
      line-height:1.1;
      padding:1rem 1.35rem;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
      text-decoration:none;
      cursor:pointer;
      margin:0;
    }
    .button:hover{transform:translateY(-2px)}
    .primary-btn{
      background:linear-gradient(135deg, var(--primary) 0%, var(--accent-3) 100%);
      color:var(--text-inverse);
      box-shadow:0 16px 30px rgba(90,22,63,.18);
      border:1px solid rgba(201,134,106,.34);
    }
    .primary-btn:hover,
    .primary-btn:focus{
      color:var(--text-inverse);
      background:linear-gradient(135deg, #7c1d43 0%, #901f44 100%);
      box-shadow:0 22px 40px rgba(90,22,63,.28);
    }
    .secondary-btn{
      background:transparent;
      color:var(--primary-2);
      border:1px solid rgba(201,134,106,.45);
      box-shadow:none;
    }
    .secondary-btn:hover,
    .secondary-btn:focus{
      color:var(--primary-2);
      background:rgba(201,134,106,.12);
      border-color:rgba(201,134,106,.72);
    }
    .btn-row{
      display:flex;
      flex-wrap:wrap;
      gap:.9rem;
      margin-top:1.4rem;
    }
    .section-block{
      padding:clamp(3.2rem,6vw,5.8rem) 0;
      position:relative;
    }
    .section-block.dark{
      color:var(--text-inverse);
      background:linear-gradient(180deg, #1a1119 0%, #171018 100%);
    }
    .section-block.dark h2,
    .section-block.dark h3,
    .section-block.dark h4,
    .section-block.dark .section-title,
    .section-block.dark .section-lead,
    .section-block.dark .eyebrow{color:var(--text-inverse)}
    .section-block.dark .muted{color:rgba(247,237,232,.72)}
    .section-block.warm{
      background:linear-gradient(180deg,#fffaf7 0%, #f8efe8 100%);
    }
    .section-block.soft{
      background:linear-gradient(180deg,#f8f1ec 0%, #fbf7f4 100%);
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1.5rem;
      margin-bottom:1.5rem;
      flex-wrap:wrap;
    }
    .section-head.center{
      flex-direction:column;
      align-items:center;
      text-align:center;
      margin-bottom:2rem;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--accent-3);
      margin-bottom:.75rem;
    }
    .eyebrow::before{
      content:"";
      width:2rem;
      height:1px;
      background:linear-gradient(90deg, transparent, currentColor);
    }
    .eyebrow.light{color:rgba(247,237,232,.82)}
    .eyebrow.light::before{background:linear-gradient(90deg, transparent, rgba(247,237,232,.82))}
    .section-lead{
      color:var(--text-soft);
      font-size:1.03rem;
      max-width:56rem;
    }
    .hero-section{
      padding:clamp(3.4rem,6vw,5.8rem) 0 clamp(4rem,7vw,6.5rem);
      position:relative;
      overflow:hidden;
    }
    .hero-section::before{
      content:"";
      position:absolute;
      inset:-8% -12% auto auto;
      width:36rem;
      height:36rem;
      border-radius:50%;
      background:radial-gradient(circle, rgba(201,134,106,.18), transparent 66%);
      pointer-events:none;
    }
    .hero-section::after{
      content:"";
      position:absolute;
      left:-10%;
      bottom:-20%;
      width:26rem;
      height:26rem;
      border-radius:50%;
      background:radial-gradient(circle, rgba(90,22,63,.09), transparent 68%);
      pointer-events:none;
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.5rem .9rem;
      border-radius:999px;
      background:rgba(201,134,106,.12);
      color:var(--primary-2);
      font-weight:700;
      font-size:.88rem;
      border:1px solid rgba(201,134,106,.25);
      margin-bottom:1rem;
    }
    .hero-kicker strong{color:var(--accent-3)}
    .hero-copy p{
      font-size:1.02rem;
      color:var(--text-soft);
      max-width:42rem;
    }
    .trust-list{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin-top:1.4rem;
    }
    .trust-list li,
    .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.35rem;
      padding:.55rem .82rem;
      border-radius:999px;
      background:rgba(255,255,255,.82);
      border:1px solid var(--line);
      color:var(--text);
      font-size:.85rem;
      font-weight:600;
      box-shadow:0 10px 22px rgba(75,20,56,.05);
    }
    .hero-card{
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,249,245,.96));
      border:1px solid rgba(75,20,56,.10);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-light);
      padding:1.2rem;
      position:relative;
      overflow:hidden;
    }
    .hero-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(90,22,63,.08), transparent 34%),
        linear-gradient(90deg, rgba(201,134,106,.08), transparent 42%);
      pointer-events:none;
    }
    .hero-card-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      position:relative;
      z-index:1;
      padding:.4rem .2rem 1rem;
    }
    .hero-card-head .label{
      font-size:.84rem;
      color:var(--text-soft);
      font-weight:700;
    }
    .hero-stack{
      display:grid;
      gap:.95rem;
      position:relative;
      z-index:1;
    }
    .mini-cover{
      border-radius:24px;
      padding:1rem;
      min-height:118px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:var(--text-inverse);
      position:relative;
      overflow:hidden;
      box-shadow:0 18px 35px rgba(75,20,56,.14);
    }
    .mini-cover::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,.02), rgba(0,0,0,.08));
    }
    .mini-cover.purple{background:linear-gradient(135deg, #5a163f 0%, #2a1225 100%)}
    .mini-cover.rose{background:linear-gradient(135deg, #9c2747 0%, #5c1c35 100%)}
    .mini-cover.sand{background:linear-gradient(135deg, #c9866a 0%, #7a3a2a 100%)}
    .mini-cover .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      width:max-content;
      padding:.28rem .58rem;
      border-radius:999px;
      background:rgba(255,255,255,.14);
      font-size:.76rem;
      letter-spacing:.03em;
    }
    .mini-cover h3{
      color:#fff;
      font-size:1.08rem;
      margin-top:.35rem;
      margin-bottom:.35rem;
      position:relative;
      z-index:1;
    }
    .mini-cover p{
      color:rgba(255,255,255,.82);
      font-size:.88rem;
      margin:0;
      position:relative;
      z-index:1;
    }
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:.8rem;
      margin-top:1rem;
      position:relative;
      z-index:1;
    }
    .stat-tile{
      background:rgba(255,255,255,.88);
      border-radius:20px;
      border:1px solid rgba(75,20,56,.1);
      padding:.9rem .85rem;
      text-align:center;
      box-shadow:0 10px 24px rgba(75,20,56,.05);
    }
    .stat-tile strong{
      display:block;
      font-size:1.15rem;
      color:var(--primary-2);
      margin-bottom:.15rem;
    }
    .stat-tile span{
      font-size:.82rem;
      color:var(--text-soft);
    }
    .note-strip{
      margin-top:1rem;
      padding:.95rem 1rem;
      border-radius:20px;
      background:rgba(75,20,56,.06);
      border:1px dashed rgba(75,20,56,.16);
      color:var(--text);
      font-size:.92rem;
      position:relative;
      z-index:1;
    }
    .intro-card,
    .feature-card,
    .topic-card,
    .entry-card,
    .side-card,
    .process-card,
    .contact-card,
    .faq-card,
    .value-card{
      border-radius:var(--radius-md);
      border:1px solid var(--line);
      background:var(--surface);
      box-shadow:var(--shadow-light);
      overflow:hidden;
      transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease), background-color .24s var(--ease);
    }
    .intro-card:hover,
    .feature-card:hover,
    .topic-card:hover,
    .entry-card:hover,
    .side-card:hover,
    .process-card:hover,
    .contact-card:hover,
    .faq-card:hover,
    .value-card:hover{
      transform:translateY(-4px);
      border-color:rgba(201,134,106,.42);
      box-shadow:var(--shadow-medium);
    }
    .intro-card{
      padding:1.2rem;
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,245,.96));
      margin-bottom:1rem;
    }
    .intro-card h3{
      margin-bottom:.6rem;
    }
    .intro-card p{
      color:var(--text-soft);
      font-size:.96rem;
    }
    .feature-grid{
      align-items:stretch;
    }
    .feature-card{
      min-height:100%;
      padding:1.25rem;
      background:linear-gradient(180deg, #ffffff 0%, #fff8f3 100%);
      position:relative;
    }
    .feature-card.dark{
      background:linear-gradient(135deg, #4d1638 0%, #26111f 100%);
      color:var(--text-inverse);
      border-color:rgba(255,255,255,.06);
    }
    .feature-card.dark h3,
    .feature-card.dark p,
    .feature-card.dark .feature-num{color:var(--text-inverse)}
    .feature-num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:2.2rem;
      height:2.2rem;
      border-radius:14px;
      background:rgba(201,134,106,.12);
      color:var(--accent-3);
      font-weight:800;
      margin-bottom:1rem;
    }
    .feature-card.dark .feature-num{
      background:rgba(255,255,255,.14);
      color:#fff;
    }
    .feature-card p{
      color:var(--text-soft);
      font-size:.95rem;
      margin-bottom:0;
    }
    .feature-card.big{min-height:250px}
    .feature-card.small{min-height:188px}
    .label-row{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:1rem;
    }
    .label-row .chip{
      background:rgba(255,255,255,.9);
    }
    .topic-shell{
      display:grid;
      grid-template-columns:minmax(0,1fr) 310px;
      gap:1.35rem;
      align-items:start;
    }
    .topic-columns{
      columns:2 260px;
      column-gap:1rem;
    }
    .topic-card{
      display:inline-block;
      width:100%;
      margin:0 0 1rem;
      break-inside:avoid;
      background:linear-gradient(180deg, #ffffff 0%, #fff9f6 100%);
    }
    .topic-card .topic-cover{
      position:relative;
      min-height:132px;
      padding:1rem;
      color:#fff;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:linear-gradient(135deg, #5a163f 0%, #221520 56%, #9c2747 100%);
    }
    .topic-card:nth-child(2n) .topic-cover{
      background:linear-gradient(135deg, #c9866a 0%, #6d2f31 50%, #2c1320 100%);
    }
    .topic-card:nth-child(3n) .topic-cover{
      background:linear-gradient(135deg, #9c2747 0%, #4b1438 52%, #20111c 100%);
    }
    .topic-cover::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.18), transparent 20%),
        radial-gradient(circle at 82% 28%, rgba(255,255,255,.12), transparent 18%),
        linear-gradient(120deg, rgba(255,255,255,.04), transparent 40%);
      pointer-events:none;
    }
    .topic-cover .topic-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      position:relative;
      z-index:1;
      font-size:.76rem;
      color:rgba(255,255,255,.8);
    }
    .topic-cover .topic-title{
      font-size:1.08rem;
      line-height:1.35;
      margin:0;
      color:#fff;
      position:relative;
      z-index:1;
    }
    .topic-body{
      padding:1.1rem 1.05rem 1.15rem;
    }
    .topic-body p{
      color:var(--text-soft);
      font-size:.93rem;
      margin-bottom:.9rem;
    }
    .topic-actions{
      display:flex;
      gap:.7rem;
      flex-wrap:wrap;
      align-items:center;
    }
    .inline-link{
      color:var(--primary-2);
      font-weight:700;
      position:relative;
      padding-right:1rem;
    }
    .inline-link::after{
      content:"›";
      position:absolute;
      right:0;
      top:0;
      transition:transform .22s var(--ease);
    }
    .inline-link:hover::after{transform:translateX(3px)}
    .side-card{
      position:sticky;
      top:106px;
      background:linear-gradient(180deg, #1c131a 0%, #24161d 100%);
      color:var(--text-inverse);
      border-color:rgba(255,255,255,.06);
    }
    .side-card h3,
    .side-card h4,
    .side-card p,
    .side-card li{color:var(--text-inverse)}
    .side-card .side-head{
      padding:1.15rem 1.15rem .85rem;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .side-card .side-body{
      padding:1.1rem 1.15rem 1.15rem;
    }
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:.9rem;
    }
    .tag-cloud .chip{
      background:rgba(255,255,255,.08);
      color:rgba(247,237,232,.92);
      border-color:rgba(255,255,255,.1);
      box-shadow:none;
    }
    .sidebar-note{
      margin-top:1rem;
      padding:1rem;
      border-radius:20px;
      background:rgba(255,255,255,.06);
      border:1px dashed rgba(255,255,255,.14);
      font-size:.9rem;
      color:rgba(247,237,232,.84);
    }
    .index-list{
      display:grid;
      gap:.75rem;
      margin-top:1rem;
    }
    .index-item{
      display:flex;
      gap:.85rem;
      align-items:flex-start;
      padding:.9rem 0;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .index-item:first-child{border-top:none;padding-top:.2rem}
    .index-num{
      width:2.1rem;
      height:2.1rem;
      border-radius:13px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(201,134,106,.14);
      color:var(--accent);
      font-weight:800;
      flex:0 0 auto;
    }
    .index-item strong{
      display:block;
      font-size:.98rem;
      margin-bottom:.1rem;
    }
    .index-item span{
      display:block;
      color:rgba(247,237,232,.74);
      font-size:.86rem;
    }
    .entry-list{
      display:grid;
      gap:1rem;
    }
    .entry-card{
      display:grid;
      grid-template-columns:180px minmax(0,1fr);
      background:linear-gradient(180deg, #fff 0%, #fffaf7 100%);
    }
    .entry-media{
      position:relative;
      min-height:100%;
      overflow:hidden;
      background:linear-gradient(135deg, #5a163f 0%, #221520 55%, #c9866a 100%);
    }
    .entry-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 24% 22%, rgba(255,255,255,.22), transparent 22%),
        linear-gradient(145deg, rgba(255,255,255,.06), transparent 45%);
    }
    .entry-media .overlay{
      position:absolute;
      inset:auto 0 0 0;
      padding:1rem;
      color:#fff;
      z-index:1;
    }
    .entry-media .overlay strong{
      display:block;
      font-size:1rem;
      margin-bottom:.15rem;
    }
    .entry-media .overlay span{
      font-size:.78rem;
      color:rgba(255,255,255,.86);
    }
    .entry-body{
      padding:1.2rem 1.2rem 1.25rem;
    }
    .entry-body .meta{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-bottom:.75rem;
    }
    .entry-body h3{
      font-size:1.15rem;
      margin-bottom:.6rem;
    }
    .entry-body p{
      color:var(--text-soft);
      font-size:.94rem;
      margin-bottom:.95rem;
    }
    .entry-footer{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }
    .entry-footer .date{
      color:var(--text-soft);
      font-size:.82rem;
    }
    .value-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
    }
    .value-card{
      padding:1.25rem;
      background:linear-gradient(180deg, #fff 0%, #fff8f3 100%);
      min-height:100%;
    }
    .value-card .symbol{
      width:2.4rem;
      height:2.4rem;
      border-radius:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(201,134,106,.12);
      color:var(--accent-3);
      font-weight:800;
      margin-bottom:1rem;
    }
    .value-card p{
      color:var(--text-soft);
      font-size:.95rem;
      margin-bottom:0;
    }
    .process-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
    }
    .process-card{
      padding:1.25rem;
      background:linear-gradient(180deg, #ffffff 0%, #fff8f4 100%);
    }
    .process-card .step{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:2.2rem;
      height:2.2rem;
      border-radius:999px;
      background:linear-gradient(135deg, var(--primary), var(--accent-3));
      color:var(--text-inverse);
      font-weight:800;
      margin-bottom:1rem;
      padding:0 .7rem;
    }
    .process-card p{
      color:var(--text-soft);
      font-size:.94rem;
      margin-bottom:0;
    }
    .accordion{
      background:transparent;
      border:none;
      margin:0;
    }
    .accordion-item{
      border:none;
      margin-bottom:.9rem;
    }
    .accordion-title{
      background:rgba(255,255,255,.9);
      color:var(--primary-2);
      border:1px solid rgba(75,20,56,.12);
      border-radius:18px;
      font-weight:700;
      font-size:1rem;
      padding:1rem 1.2rem;
      transition:background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
    }
    .accordion-title::before{display:none}
    .accordion-title::after{
      content:"+";
      position:absolute;
      right:1.1rem;
      top:50%;
      transform:translateY(-50%);
      width:1.8rem;
      height:1.8rem;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(201,134,106,.12);
      color:var(--accent-3);
      font-weight:800;
      transition:transform .22s var(--ease), content .22s var(--ease), background-color .22s var(--ease);
    }
    .accordion-title:hover{
      background:#fff4ee;
      border-color:rgba(201,134,106,.34);
      color:var(--primary-2);
    }
    .accordion-item.is-active > .accordion-title{
      background:#fff3ea;
      border-color:rgba(201,134,106,.42);
      box-shadow:0 14px 28px rgba(75,20,56,.06);
    }
    .accordion-item.is-active > .accordion-title::after{
      content:"–";
      background:rgba(201,134,106,.18);
    }
    .accordion-content{
      background:rgba(255,250,246,.92);
      border:1px solid rgba(75,20,56,.08);
      border-top:none;
      border-radius:0 0 18px 18px;
      padding:1rem 1.2rem 1.15rem;
      color:var(--text-soft);
      font-size:.95rem;
      line-height:1.85;
    }
    .contact-section{
      background:linear-gradient(180deg, #1a1119 0%, #171018 100%);
      color:var(--text-inverse);
    }
    .contact-section h2,
    .contact-section h3,
    .contact-section h4,
    .contact-section p,
    .contact-section li,
    .contact-section label{
      color:var(--text-inverse);
    }
    .contact-lead{
      max-width:30rem;
      color:rgba(247,237,232,.78);
    }
    .reason-list{
      display:grid;
      gap:.8rem;
      margin-top:1.25rem;
    }
    .reason-list li{
      display:flex;
      gap:.75rem;
      align-items:flex-start;
      padding:.85rem 0;
      border-bottom:1px solid rgba(255,255,255,.08);
      color:rgba(247,237,232,.88);
    }
    .reason-list li:last-child{border-bottom:none}
    .reason-dot{
      width:.72rem;
      height:.72rem;
      margin-top:.4rem;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(201,134,106,.12);
      flex:0 0 auto;
    }
    .contact-card{
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,248,243,.98));
      padding:1.35rem;
    }
    .form-grid{
      display:grid;
      gap:1rem;
    }
    .field-row{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1rem;
    }
    .contact-card label{
      color:var(--primary-2);
      font-weight:700;
      margin-bottom:.5rem;
      display:block;
      font-size:.92rem;
    }
    .contact-card input,
    .contact-card select,
    .contact-card textarea{
      width:100%;
      border-radius:18px;
      border:1px solid rgba(75,20,56,.14);
      background:#fff;
      color:var(--text);
      box-shadow:none;
      padding:.9rem 1rem;
      transition:border-color .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease);
    }
    .contact-card textarea{min-height:130px;resize:vertical}
    .contact-card input::placeholder,
    .contact-card textarea::placeholder{
      color:#a08a92;
    }
    .contact-card input:focus,
    .contact-card select:focus,
    .contact-card textarea:focus{
      background:#fffdfb;
      border-color:rgba(201,134,106,.72);
      box-shadow:0 0 0 3px rgba(201,134,106,.16);
    }
    .contact-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      align-items:center;
      margin-top:.25rem;
    }
    .form-note{
      margin-top:.9rem;
      color:var(--text-soft);
      font-size:.84rem;
      line-height:1.7;
    }
    .footer{
      background:linear-gradient(180deg, #171018 0%, #120c12 100%);
      color:rgba(247,237,232,.9);
      padding:4rem 0 1.35rem;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.25fr .75fr .75fr;
      gap:1.5rem;
      padding-bottom:1.8rem;
    }
    .footer-brand{
      display:flex;
      align-items:flex-start;
      gap:.9rem;
      margin-bottom:1rem;
    }
    .footer-title{
      font-size:1.12rem;
      font-weight:800;
      color:#fff;
      margin-bottom:.1rem;
    }
    .footer h4{
      color:#fff;
      font-size:1rem;
      margin-bottom:1rem;
      position:relative;
      padding-bottom:.65rem;
    }
    .footer h4::after{
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width:2.2rem;
      height:1px;
      background:var(--accent);
    }
    .footer p{
      color:rgba(247,237,232,.74);
      font-size:.92rem;
      margin:0;
    }
    .footer-links{
      display:grid;
      gap:.65rem;
    }
    .footer-links a{
      color:rgba(247,237,232,.78);
      font-size:.95rem;
    }
    .footer-links a:hover{
      color:var(--accent);
    }
    .footer-bottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      padding-top:1.15rem;
      border-top:1px solid rgba(255,255,255,.08);
      color:rgba(247,237,232,.68);
      font-size:.88rem;
    }
    .muted{color:var(--text-soft)}
    .split-line{
      width:100%;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(201,134,106,.42), transparent);
      margin:1.1rem 0;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.42rem .75rem;
      border-radius:999px;
      background:rgba(201,134,106,.12);
      color:var(--primary-2);
      font-size:.82rem;
      font-weight:700;
    }
    .pill.dark{
      background:rgba(255,255,255,.08);
      color:rgba(247,237,232,.9);
    }
    .small-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      color:var(--text-soft);
      font-size:.84rem;
      margin-top:.9rem;
    }
    .small-meta span{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.35rem .6rem;
      border-radius:999px;
      background:rgba(75,20,56,.05);
      border:1px solid rgba(75,20,56,.08);
    }
    .bg-frame{
      background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,248,244,.96));
      border:1px solid rgba(75,20,56,.08);
      border-radius:var(--radius-lg);
      padding:1rem;
      box-shadow:var(--shadow-light);
    }
    .sticky-intro{
      position:sticky;
      top:106px;
    }

    @media print{
      .site-ribbon,.site-header,.footer,.button,.nav-cta,.skip-link{display:none!important}
      body{background:#fff;color:#000}
      .section-block{padding:1rem 0}
      .intro-card,.feature-card,.topic-card,.entry-card,.side-card,.process-card,.contact-card,.faq-card,.value-card{box-shadow:none}
    }

    @media (max-width: 1024px){
      .footer-grid,
      .value-grid,
      .process-grid{
        grid-template-columns:1fr 1fr;
      }
      .topic-shell{
        grid-template-columns:1fr;
      }
      .side-card{
        position:relative;
        top:auto;
      }
      .sticky-intro{
        position:relative;
        top:auto;
      }
      .hero-stats{
        grid-template-columns:repeat(3,1fr);
      }
      .entry-card{
        grid-template-columns:160px minmax(0,1fr);
      }
    }

    @media (max-width: 768px){
      .ribbon-row{
        justify-content:center;
        text-align:center;
      }
      .top-bar{
        padding:.55rem 0 1rem;
      }
      .top-bar-right{
        display:block;
        width:100%;
      }
      .main-menu{
        display:grid;
        grid-template-columns:1fr;
        gap:.35rem;
        margin-top:.8rem;
      }
      .main-menu a{
        display:block;
        width:100%;
        padding:.92rem 1rem;
        background:rgba(255,255,255,.92);
        border:1px solid rgba(75,20,56,.08);
      }
      .nav-cta{
        width:100%;
        margin-top:.75rem;
      }
      .hero-stats,
      .value-grid,
      .process-grid,
      .footer-grid,
      .field-row{
        grid-template-columns:1fr;
      }
      .entry-card{
        grid-template-columns:1fr;
      }
      .entry-media{
        min-height:160px;
      }
      .btn-row{
        flex-direction:column;
      }
      .button,
      .nav-cta{
        width:100%;
        justify-content:center;
      }
      .section-head{
        align-items:flex-start;
      }
    }

    @media (max-width: 520px){
      h1{font-size:clamp(2rem,8vw,2.6rem)}
      h2{font-size:clamp(1.45rem,7vw,2rem)}
      .hero-section{
        padding-top:2.4rem;
      }
      .hero-copy p,
      .section-lead,
      .contact-lead{
        font-size:.98rem;
      }
      .hero-card,
      .contact-card,
      .intro-card,
      .feature-card,
      .process-card,
      .value-card{
        border-radius:24px;
      }
      .mini-cover{
        min-height:106px;
      }
      .topic-columns{
        columns:1;
      }
      .main-menu a{
        border-radius:18px;
      }
    }