/* roulang page: index */
:root {
      --color-primary: #F26B3A;
      --color-primary-dark: #D9572A;
      --color-primary-soft: #FFF0E8;
      --color-secondary: #18A999;
      --color-secondary-soft: #E8FAF7;
      --color-text: #202124;
      --color-heading: #24201C;
      --color-muted: #667085;
      --color-light-muted: #7A7F89;
      --color-bg: #FFF8F1;
      --color-bg-2: #F7F1E8;
      --color-bg-3: #F6F7F9;
      --color-card: #FFFFFF;
      --color-card-warm: #FFFCF8;
      --color-border: #E9DED2;
      --color-border-cool: #ECEFF3;
      --color-footer: #2B2723;
      --color-footer-soft: #BEB6AC;
      --radius-xs: 10px;
      --radius-sm: 14px;
      --radius-md: 18px;
      --radius-lg: 24px;
      --radius-xl: 32px;
      --shadow-soft: 0 18px 45px rgba(35, 28, 20, 0.08);
      --shadow-hover: 0 24px 60px rgba(35, 28, 20, 0.13);
      --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.78);
      --container: 1220px;
      --section-space: 96px;
      --font-cn: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    }

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

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      font-family: var(--font-cn);
      color: var(--color-text);
      background:
        radial-gradient(circle at 8% 6%, rgba(242,107,58,0.12), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(24,169,153,0.10), transparent 26%),
        linear-gradient(180deg, var(--color-bg) 0%, #FFFFFF 42%, var(--color-bg-3) 100%);
      font-size: 16px;
      line-height: 1.75;
      letter-spacing: 0.01em;
      overflow-x: hidden;
    }

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

    a:hover,
    a:focus {
      color: var(--color-primary-dark);
    }

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

    button,
    input,
    textarea {
      font-family: inherit;
    }

    button,
    a,
    input,
    textarea {
      outline: none;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible {
      box-shadow: 0 0 0 4px rgba(242,107,58,0.20);
      border-color: rgba(242,107,58,0.65) !important;
    }

    h1,
    h2,
    h3,
    h4,
    p {
      margin-top: 0;
    }

    h1,
    h2,
    h3,
    h4 {
      color: var(--color-heading);
      font-weight: 800;
      letter-spacing: -0.025em;
    }

    h1 {
      font-size: clamp(2.25rem, 5vw, 3.75rem);
      line-height: 1.13;
      margin-bottom: 22px;
    }

    h2 {
      font-size: clamp(1.9rem, 3.4vw, 2.55rem);
      line-height: 1.2;
      margin-bottom: 16px;
    }

    h3 {
      font-size: 1.28rem;
      line-height: 1.38;
      margin-bottom: 10px;
    }

    p {
      color: var(--color-muted);
      line-height: 1.82;
      margin-bottom: 0;
    }

    section {
      position: relative;
      padding: var(--section-space) 0;
    }

    .site-container {
      width: min(calc(100% - 32px), var(--container));
      margin: 0 auto;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--color-primary-dark);
      background: var(--color-primary-soft);
      border: 1px solid rgba(242,107,58,0.18);
      border-radius: 999px;
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 18px;
    }

    .section-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--color-primary);
      box-shadow: 0 0 0 5px rgba(242,107,58,0.13);
    }

    .section-head {
      max-width: 760px;
      margin-bottom: 38px;
    }

    .section-head.center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .section-head p {
      font-size: 17px;
    }

    .top-notice {
      background: #2B2723;
      color: #FFF6EA;
      font-size: 14px;
      padding: 9px 0;
    }

    .top-notice .notice-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    .notice-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .notice-tags span {
      color: #FFE6D7;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 999px;
      padding: 3px 10px;
      font-size: 12px;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 252, 248, 0.94);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(233,222,210,0.82);
      box-shadow: 0 10px 24px rgba(43,39,35,0.04);
    }

    .nav-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      padding: 16px 0;
    }

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

    .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background:
        linear-gradient(135deg, var(--color-primary) 0%, #FFB36F 62%, #FFF2E7 100%);
      display: grid;
      place-items: center;
      box-shadow: 0 12px 26px rgba(242,107,58,0.24);
      position: relative;
      overflow: hidden;
      flex: 0 0 auto;
    }

    .brand-mark::before {
      content: "";
      position: absolute;
      width: 28px;
      height: 28px;
      border: 2px solid rgba(255,255,255,0.65);
      border-radius: 9px;
      transform: rotate(8deg);
    }

    .brand-mark::after {
      content: "";
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 13px solid #FFFFFF;
      margin-left: 4px;
      z-index: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .brand-title {
      font-size: 16px;
      line-height: 1.25;
      font-weight: 800;
      color: var(--color-heading);
      white-space: nowrap;
    }

    .brand-subtitle {
      color: var(--color-light-muted);
      font-size: 12px;
      font-weight: 600;
    }

    .chip-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px;
      border: 1px solid var(--color-border);
      background: rgba(247,241,232,0.66);
      border-radius: 999px;
      overflow-x: auto;
      scrollbar-width: none;
      max-width: 100%;
    }

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

    .nav-chip {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex: 0 0 auto;
      min-height: 38px;
      padding: 8px 15px;
      border-radius: 999px;
      color: #4B4F57;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .nav-chip::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #D7C9BA;
      transition: background-color .22s ease, transform .22s ease;
    }

    .nav-chip:hover {
      background: #FFFFFF;
      color: var(--color-primary-dark);
      box-shadow: 0 8px 20px rgba(35,28,20,0.06);
      transform: translateY(-1px);
    }

    .nav-chip:hover::before,
    .nav-chip.active::before {
      background: currentColor;
      transform: scale(1.15);
    }

    .nav-chip.active {
      color: #FFFFFF;
      background: var(--color-primary);
      box-shadow: 0 10px 22px rgba(242,107,58,0.22);
    }

    .header-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 12px 18px;
      border-radius: 999px;
      background: var(--color-heading);
      color: #FFFFFF;
      font-weight: 800;
      font-size: 14px;
      white-space: nowrap;
      box-shadow: 0 14px 28px rgba(32,33,36,0.14);
    }

    .header-cta:hover {
      color: #FFFFFF;
      background: var(--color-primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 18px 36px rgba(242,107,58,0.24);
    }

    .btn-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 30px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 48px;
      padding: 13px 23px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 15px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
    }

    .btn-primary {
      background: var(--color-primary);
      color: #FFFFFF;
      box-shadow: 0 15px 32px rgba(242,107,58,0.25);
    }

    .btn-primary:hover {
      color: #FFFFFF;
      background: var(--color-primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 20px 42px rgba(242,107,58,0.32);
    }

    .btn-secondary {
      color: var(--color-heading);
      background: #FFFFFF;
      border-color: var(--color-border);
      box-shadow: 0 10px 26px rgba(35,28,20,0.06);
    }

    .btn-secondary:hover {
      color: var(--color-primary-dark);
      background: var(--color-primary-soft);
      border-color: rgba(242,107,58,0.22);
      transform: translateY(-2px);
    }

    .hero {
      padding: 78px 0 96px;
      overflow: hidden;
    }

    .hero::after {
      content: "";
      position: absolute;
      right: -170px;
      top: 90px;
      width: 430px;
      height: 430px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(24,169,153,0.14), transparent 68%);
      pointer-events: none;
    }

    .hero-copy {
      padding: 28px 0;
    }

    .hero-lead {
      max-width: 650px;
      font-size: 18px;
      color: #5E6672;
    }

    .trust-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }

    .trust-badge,
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      color: #44505A;
      background: rgba(255,255,255,0.76);
      border: 1px solid var(--color-border);
    }

    .trust-badge::before,
    .tag::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--color-secondary);
    }

    .console-card {
      position: relative;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,252,248,0.98));
      border: 1px solid rgba(80,65,45,0.10);
      border-radius: 32px;
      padding: 22px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .console-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(242,107,58,0.08), transparent 32%),
        radial-gradient(circle at 86% 15%, rgba(24,169,153,0.13), transparent 26%);
      pointer-events: none;
    }

    .console-top,
    .console-body,
    .console-stats {
      position: relative;
      z-index: 1;
    }

    .console-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }

    .mock-search {
      flex: 1;
      height: 44px;
      border-radius: 999px;
      background: #FFFFFF;
      border: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      padding: 0 16px;
      color: var(--color-muted);
      font-size: 14px;
      box-shadow: var(--shadow-inner);
    }

    .mock-search span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--color-primary);
      margin-right: 9px;
    }

    .status-pill {
      padding: 10px 12px;
      border-radius: 999px;
      color: #09796E;
      background: var(--color-secondary-soft);
      border: 1px solid rgba(24,169,153,0.20);
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .zone-list {
      display: grid;
      gap: 12px;
      margin-bottom: 18px;
    }

    .zone-item {
      display: grid;
      grid-template-columns: 58px 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 14px;
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(233,222,210,0.9);
      border-radius: 20px;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .zone-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 30px rgba(35,28,20,0.08);
      border-color: rgba(242,107,58,0.26);
    }

    .zone-thumb {
      height: 48px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      color: #FFFFFF;
      font-weight: 900;
      background:
        linear-gradient(135deg, var(--color-primary), #FFB36F);
      position: relative;
    }

    .zone-thumb.alt {
      background: linear-gradient(135deg, var(--color-secondary), #7EE1D4);
    }

    .zone-thumb.dark {
      background: linear-gradient(135deg, #30343B, #7A7F89);
    }

    .zone-thumb::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 10px solid rgba(255,255,255,0.9);
      right: 13px;
      top: 18px;
    }

    .zone-item strong {
      display: block;
      color: var(--color-heading);
      font-size: 16px;
      margin-bottom: 2px;
    }

    .zone-item small {
      color: var(--color-light-muted);
      font-size: 13px;
      font-weight: 600;
    }

    .zone-arrow {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--color-primary-dark);
      background: var(--color-primary-soft);
      font-weight: 900;
    }

    .cover-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 18px 0;
    }

    .mini-cover {
      min-height: 82px;
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(242,107,58,0.88), rgba(255,244,235,0.95)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 8px, transparent 8px 18px);
      border: 1px solid rgba(242,107,58,0.12);
      position: relative;
      overflow: hidden;
    }

    .mini-cover:nth-child(2),
    .mini-cover:nth-child(4) {
      background: linear-gradient(145deg, rgba(24,169,153,0.72), rgba(240,255,251,0.96));
    }

    .mini-cover::before {
      content: "";
      position: absolute;
      left: 14px;
      bottom: 12px;
      width: 48%;
      height: 5px;
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
    }

    .mini-cover::after {
      content: "";
      position: absolute;
      right: 13px;
      top: 13px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: rgba(255,255,255,0.35);
      backdrop-filter: blur(6px);
    }

    .console-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .stat-mini {
      padding: 14px;
      border-radius: 18px;
      background: #FFFFFF;
      border: 1px solid var(--color-border-cool);
      box-shadow: 0 10px 22px rgba(35,28,20,0.05);
    }

    .stat-mini b {
      display: block;
      color: var(--color-heading);
      font-size: 20px;
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .stat-mini span {
      color: var(--color-light-muted);
      font-size: 12px;
      font-weight: 700;
    }

    .bento-section {
      background: #FFFFFF;
    }

    .bento-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
    }

    .bento-stack {
      display: grid;
      gap: 18px;
    }

    .info-card {
      position: relative;
      background: var(--color-card);
      border: 1px solid rgba(80,65,45,0.10);
      border-radius: var(--radius-lg);
      padding: 28px;
      box-shadow: 0 12px 30px rgba(35,28,20,0.05);
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .info-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(242,107,58,0.28);
    }

    .feature-large {
      min-height: 380px;
      background:
        linear-gradient(135deg, #FFFFFF 0%, #FFF4EC 100%);
    }

    .feature-large::after {
      content: "";
      position: absolute;
      right: -60px;
      bottom: -80px;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background: rgba(242,107,58,0.10);
    }

    .card-no {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 15px;
      color: #FFFFFF;
      background: var(--color-primary);
      font-weight: 900;
      margin-bottom: 22px;
      box-shadow: 0 12px 24px rgba(242,107,58,0.22);
    }

    .card-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--color-primary-dark);
      font-weight: 800;
      margin-top: 22px;
    }

    .card-link span {
      transition: transform .22s ease;
    }

    .card-link:hover span {
      transform: translateX(4px);
    }

    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

    .tag-cloud .tag {
      background: #FFFFFF;
    }

    .data-band {
      background: var(--color-bg-2);
    }

    .metrics-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr .9fr 1.1fr;
      gap: 16px;
    }

    .metric-card {
      background: rgba(255,255,255,0.78);
      border: 1px solid var(--color-border);
      border-radius: 24px;
      padding: 24px;
      min-height: 168px;
      box-shadow: 0 12px 28px rgba(35,28,20,0.05);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .metric-card:hover {
      transform: translateY(-4px);
      border-color: rgba(24,169,153,0.32);
      box-shadow: var(--shadow-soft);
    }

    .metric-value {
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1;
      font-weight: 900;
      color: var(--color-primary);
      margin-bottom: 12px;
      letter-spacing: -0.05em;
    }

    .metric-card:nth-child(even) .metric-value {
      color: var(--color-secondary);
    }

    .metric-card h3 {
      margin-bottom: 8px;
    }

    .scenario-section {
      background: #FFFFFF;
    }

    .scenario-row {
      align-items: center;
      margin-bottom: 34px;
    }

    .scenario-row:last-child {
      margin-bottom: 0;
    }

    .ui-snapshot {
      min-height: 290px;
      border-radius: 28px;
      background:
        linear-gradient(180deg, #FFFFFF, #FFF7F0);
      border: 1px solid var(--color-border);
      padding: 22px;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
    }

    .ui-snapshot::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 86% 20%, rgba(242,107,58,0.11), transparent 24%),
        linear-gradient(135deg, transparent 0 56%, rgba(24,169,153,0.08) 56% 100%);
      pointer-events: none;
    }

    .snapshot-bar {
      position: relative;
      z-index: 1;
      height: 14px;
      border-radius: 999px;
      background: #F0E4D8;
      margin-bottom: 16px;
      overflow: hidden;
    }

    .snapshot-bar span {
      display: block;
      width: 58%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--color-primary), #FFB36F);
    }

    .snapshot-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
    }

    .snapshot-line {
      height: 54px;
      border-radius: 16px;
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(233,222,210,0.82);
      display: flex;
      align-items: center;
      padding: 12px;
      gap: 12px;
    }

    .snapshot-dot {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      background: var(--color-primary-soft);
      position: relative;
      flex: 0 0 auto;
    }

    .snapshot-dot::after {
      content: "";
      position: absolute;
      left: 12px;
      top: 8px;
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 10px solid var(--color-primary);
    }

    .snapshot-text {
      flex: 1;
    }

    .snapshot-text b,
    .snapshot-text i {
      display: block;
      height: 8px;
      border-radius: 999px;
      background: #E9DED2;
    }

    .snapshot-text b {
      width: 68%;
      margin-bottom: 8px;
    }

    .snapshot-text i {
      width: 46%;
      opacity: .75;
    }

    .scenario-copy {
      padding: 14px 8px;
    }

    .check-list {
      display: grid;
      gap: 12px;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

    .check-list li {
      display: flex;
      gap: 10px;
      color: #4E5762;
      font-weight: 650;
    }

    .check-list li::before {
      content: "✓";
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      background: var(--color-secondary-soft);
      color: #0B887D;
      font-size: 13px;
      font-weight: 900;
      flex: 0 0 auto;
      margin-top: 3px;
    }

    .process-section {
      background: linear-gradient(180deg, var(--color-bg) 0%, #FFFFFF 100%);
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      counter-reset: step;
    }

    .process-card {
      position: relative;
      padding: 26px;
      border-radius: 24px;
      background: #FFFFFF;
      border: 1px solid var(--color-border);
      box-shadow: 0 12px 28px rgba(35,28,20,0.05);
      transition: transform .22s ease, box-shadow .22s ease;
    }

    .process-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-soft);
    }

    .process-card::before {
      counter-increment: step;
      content: "0" counter(step);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background: var(--color-primary);
      color: #FFFFFF;
      font-weight: 900;
      margin-bottom: 22px;
      box-shadow: 0 12px 24px rgba(242,107,58,0.20);
    }

    .content-preview {
      background: #FFFFFF;
    }

    .content-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 18px;
      align-items: stretch;
    }

    .preview-panel {
      border-radius: 28px;
      background: var(--color-heading);
      color: #FFFFFF;
      padding: 30px;
      overflow: hidden;
      position: relative;
      min-height: 420px;
      box-shadow: var(--shadow-soft);
    }

    .preview-panel::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: rgba(242,107,58,0.30);
    }

    .preview-panel h2,
    .preview-panel p {
      position: relative;
      z-index: 1;
      color: #FFFFFF;
    }

    .preview-panel p {
      color: #D6CEC5;
    }

    .preview-note {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      margin-top: 30px;
    }

    .preview-note div {
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.10);
      color: #FFF4EA;
      font-weight: 700;
    }

    .list-card-wrap {
      display: grid;
      gap: 14px;
    }

    .list-card {
      display: grid;
      grid-template-columns: 96px 1fr auto;
      gap: 16px;
      align-items: center;
      padding: 16px;
      border-radius: 22px;
      border: 1px solid var(--color-border);
      background: var(--color-card-warm);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .list-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-soft);
      border-color: rgba(242,107,58,0.25);
    }

    .list-card:hover .list-arrow {
      transform: translateX(4px);
      color: var(--color-primary-dark);
    }

    .abstract-cover {
      height: 74px;
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(242,107,58,0.9), rgba(255,179,111,0.68)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.16) 0 7px, transparent 7px 16px);
      position: relative;
      overflow: hidden;
    }

    .abstract-cover::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-40%, -50%);
      width: 0;
      height: 0;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      border-left: 15px solid #FFFFFF;
      filter: drop-shadow(0 3px 8px rgba(0,0,0,0.18));
    }

    .list-card:nth-child(even) .abstract-cover {
      background:
        linear-gradient(135deg, rgba(24,169,153,0.88), rgba(189,244,236,0.84));
    }

    .badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 800;
      color: var(--color-primary-dark);
      background: var(--color-primary-soft);
      margin-bottom: 8px;
    }

    .badge.green {
      color: #087A70;
      background: var(--color-secondary-soft);
    }

    .list-card h3 {
      font-size: 17px;
      margin-bottom: 4px;
    }

    .list-card p {
      font-size: 14px;
      line-height: 1.62;
    }

    .list-arrow {
      color: #9A8F82;
      font-weight: 900;
      transition: transform .22s ease, color .22s ease;
    }

    .faq-section {
      background: var(--color-bg-2);
    }

    .faq-wrap {
      max-width: 940px;
      margin: 0 auto;
    }

    .accordion {
      background: transparent;
    }

    .accordion-item {
      margin-bottom: 14px;
      border-radius: 20px;
      overflow: hidden;
      background: #FFFFFF;
      border: 1px solid var(--color-border);
      box-shadow: 0 10px 24px rgba(35,28,20,0.04);
    }

    .accordion-title {
      border: none;
      padding: 20px 56px 20px 22px;
      color: var(--color-heading);
      font-size: 17px;
      font-weight: 800;
      line-height: 1.45;
      background: #FFFFFF;
    }

    .accordion-title:hover,
    .accordion-title:focus {
      background: var(--color-card-warm);
      color: var(--color-primary-dark);
    }

    .accordion-title::before {
      right: 22px;
      top: 50%;
      margin-top: -12px;
      font-size: 22px;
      color: var(--color-primary);
    }

    .accordion-content {
      border: none;
      border-top: 1px solid rgba(233,222,210,0.72);
      padding: 18px 22px 24px;
      color: var(--color-muted);
      line-height: 1.82;
      background: #FFFFFF;
    }

    .cta-section {
      padding: 86px 0;
      background: #FFFFFF;
    }

    .cta-card {
      border-radius: 34px;
      background:
        linear-gradient(135deg, #2B2723 0%, #3B332D 54%, #47362F 100%);
      color: #FFFFFF;
      padding: 42px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 28px 68px rgba(35,28,20,0.18);
    }

    .cta-card::before {
      content: "";
      position: absolute;
      width: 300px;
      height: 300px;
      right: -90px;
      top: -120px;
      border-radius: 50%;
      background: rgba(242,107,58,0.36);
    }

    .cta-card::after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      left: -120px;
      bottom: -120px;
      border-radius: 50%;
      background: rgba(24,169,153,0.26);
    }

    .cta-card h2,
    .cta-card p,
    .cta-card .grid-x {
      position: relative;
      z-index: 1;
    }

    .cta-card h2 {
      color: #FFFFFF;
    }

    .cta-card p {
      color: #E5DCD2;
    }

    .contact-form {
      position: relative;
      z-index: 1;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 24px;
      padding: 22px;
      backdrop-filter: blur(10px);
    }

    .form-field {
      margin-bottom: 14px;
    }

    .form-field label {
      color: #FFF4EA;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 7px;
      display: block;
    }

    .form-field input,
    .form-field textarea {
      width: 100%;
      margin: 0;
      height: auto;
      min-height: 44px;
      padding: 12px 14px;
      color: #FFFFFF;
      border-radius: 14px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: none;
    }

    .form-field textarea {
      min-height: 92px;
      resize: vertical;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
      color: rgba(255,255,255,0.56);
    }

    .form-field input:focus,
    .form-field textarea:focus {
      background: rgba(255,255,255,0.14);
      box-shadow: 0 0 0 4px rgba(242,107,58,0.22);
      border-color: rgba(242,107,58,0.66);
    }

    .form-tip {
      color: #D8CCC1;
      font-size: 13px;
      line-height: 1.6;
      margin-top: 10px;
    }

    .footer {
      background: var(--color-footer);
      color: #F6EFE7;
      padding: 62px 0 28px;
    }

    .footer .brand {
      min-width: auto;
      margin-bottom: 18px;
    }

    .footer .brand-title {
      color: #FFFFFF;
    }

    .footer .brand-subtitle {
      color: var(--color-footer-soft);
    }

    .footer p {
      color: var(--color-footer-soft);
      font-size: 14px;
      line-height: 1.78;
    }

    .footer h3 {
      color: #FFFFFF;
      font-size: 16px;
      margin-bottom: 14px;
    }

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

    .footer-links a {
      color: #D7CEC4;
      font-size: 14px;
      font-weight: 650;
    }

    .footer-links a:hover {
      color: #FFFFFF;
      padding-left: 4px;
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 42px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,0.10);
      color: #AFA59A;
      font-size: 13px;
    }

    .footer-domain {
      color: #FFE0CD;
      font-weight: 800;
    }

    @media (max-width: 1024px) {
      :root {
        --section-space: 76px;
      }

      .nav-wrap {
        align-items: flex-start;
        flex-wrap: wrap;
      }

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

      .chip-nav {
        order: 3;
        width: 100%;
        border-radius: 18px;
        justify-content: flex-start;
      }

      .header-cta {
        flex: 0 0 auto;
      }

      .hero {
        padding-top: 56px;
      }

      .bento-grid,
      .content-grid {
        grid-template-columns: 1fr;
      }

      .metrics-grid,
      .process-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .feature-large {
        min-height: auto;
      }
    }

    @media (max-width: 760px) {
      :root {
        --section-space: 62px;
      }

      body {
        font-size: 15px;
      }

      .site-container {
        width: min(calc(100% - 24px), var(--container));
      }

      .top-notice .notice-inner {
        gap: 10px;
      }

      .notice-tags {
        width: 100%;
      }

      .nav-wrap {
        gap: 12px;
        padding: 12px 0;
      }

      .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 14px;
      }

      .brand-title {
        font-size: 14px;
        white-space: normal;
      }

      .brand-subtitle {
        display: none;
      }

      .header-cta {
        min-height: 40px;
        padding: 10px 13px;
        font-size: 13px;
      }

      .chip-nav {
        padding: 5px;
      }

      .nav-chip {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 13px;
      }

      .hero-copy {
        padding: 0;
      }

      .hero-lead {
        font-size: 16px;
      }

      .btn-row {
        width: 100%;
      }

      .btn {
        width: 100%;
        min-height: 48px;
      }

      .console-card {
        padding: 16px;
        border-radius: 26px;
      }

      .console-top {
        flex-direction: column;
        align-items: stretch;
      }

      .zone-item {
        grid-template-columns: 50px 1fr;
      }

      .zone-arrow {
        display: none;
      }

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

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

      .bento-grid,
      .bento-stack,
      .metrics-grid,
      .process-grid,
      .content-grid {
        grid-template-columns: 1fr;
      }

      .info-card,
      .metric-card,
      .process-card {
        padding: 22px;
        border-radius: 22px;
      }

      .scenario-copy {
        padding: 22px 0 0;
      }

      .scenario-row.reverse-mobile {
        display: flex;
        flex-direction: column-reverse;
      }

      .list-card {
        grid-template-columns: 82px 1fr;
        gap: 12px;
      }

      .list-arrow {
        display: none;
      }

      .abstract-cover {
        height: 68px;
      }

      .preview-panel {
        min-height: auto;
        padding: 24px;
      }

      .accordion-title {
        font-size: 15px;
        padding: 18px 48px 18px 18px;
      }

      .cta-card {
        padding: 26px 18px;
        border-radius: 26px;
      }

      .contact-form {
        margin-top: 24px;
        padding: 18px;
      }

      .footer {
        padding-top: 48px;
      }

      .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 520px) {
      h1 {
        font-size: 2.12rem;
      }

      h2 {
        font-size: 1.72rem;
      }

      .section-head {
        margin-bottom: 28px;
      }

      .trust-row {
        gap: 8px;
      }

      .trust-badge,
      .tag {
        font-size: 12px;
        padding: 7px 10px;
      }

      .mock-search {
        font-size: 13px;
      }

      .list-card {
        grid-template-columns: 1fr;
      }

      .abstract-cover {
        height: 118px;
      }
    }

/* roulang page: category1 */
:root{
      --color-primary:#F26B3A;
      --color-primary-dark:#D95424;
      --color-secondary:#18A999;
      --color-secondary-soft:#E8F7F5;
      --color-text:#202124;
      --color-heading:#17191D;
      --color-muted:#667085;
      --color-light:#7A7F89;
      --color-bg:#FFF8F1;
      --color-bg-soft:#F7F1E8;
      --color-panel:#FFFCF8;
      --color-white:#FFFFFF;
      --color-border:#E9DED2;
      --color-border-soft:#ECEFF3;
      --color-footer:#2B2723;
      --shadow-soft:0 18px 45px rgba(35,28,20,.08);
      --shadow-hover:0 24px 60px rgba(35,28,20,.13);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --container:1200px;
      --transition:all .25s ease;
      --font:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--color-text);
      background:linear-gradient(180deg,var(--color-bg) 0%,#fff 42%,var(--color-bg-soft) 100%);
      font-size:16px;
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none;transition:var(--transition)}
    img,svg{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    section{position:relative}
    :focus-visible{
      outline:3px solid rgba(242,107,58,.38);
      outline-offset:3px;
      border-radius:10px;
    }

    .site-container{
      width:min(calc(100% - 40px),var(--container));
      margin:0 auto;
    }

    .notice-bar{
      background:#2B2723;
      color:#FFF2E3;
      font-size:14px;
      letter-spacing:.01em;
    }
    .notice-inner{
      min-height:38px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      text-align:center;
    }
    .notice-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--color-secondary);
      box-shadow:0 0 0 5px rgba(24,169,153,.18);
      flex:0 0 auto;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,252,248,.94);
      border-bottom:1px solid rgba(80,65,45,.1);
      backdrop-filter:saturate(160%) blur(14px);
    }
    .nav-wrap{
      min-height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:260px;
    }
    .brand-mark{
      width:46px;
      height:46px;
      border-radius:15px;
      background:
        linear-gradient(135deg,var(--color-primary),#FFB076);
      position:relative;
      box-shadow:0 12px 28px rgba(242,107,58,.26);
      flex:0 0 auto;
    }
    .brand-mark::before{
      content:"";
      position:absolute;
      left:18px;
      top:13px;
      width:0;
      height:0;
      border-top:10px solid transparent;
      border-bottom:10px solid transparent;
      border-left:15px solid #fff;
      filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));
    }
    .brand-mark::after{
      content:"区";
      position:absolute;
      right:5px;
      bottom:2px;
      color:rgba(255,255,255,.76);
      font-size:13px;
      font-weight:800;
    }
    .brand-title{
      display:block;
      color:var(--color-heading);
      font-size:17px;
      line-height:1.25;
      font-weight:800;
      white-space:nowrap;
    }
    .brand-subtitle{
      display:block;
      margin-top:2px;
      color:var(--color-muted);
      font-size:12px;
      line-height:1.3;
      white-space:nowrap;
    }
    .chip-nav{
      display:flex;
      align-items:center;
      gap:8px;
      padding:7px;
      border:1px solid var(--color-border);
      background:#FFF7EE;
      border-radius:999px;
      overflow-x:auto;
      scrollbar-width:none;
      max-width:100%;
    }
    .chip-nav::-webkit-scrollbar{display:none}
    .nav-chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:38px;
      padding:0 16px;
      border-radius:999px;
      color:#45484F;
      font-size:14px;
      font-weight:700;
      white-space:nowrap;
      position:relative;
    }
    .nav-chip:hover{
      color:var(--color-primary-dark);
      background:rgba(242,107,58,.08);
    }
    .nav-chip.active{
      color:#fff;
      background:var(--color-primary);
      box-shadow:0 8px 18px rgba(242,107,58,.22);
    }
    .header-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 20px;
      border-radius:999px;
      background:var(--color-heading);
      color:#fff;
      font-size:14px;
      font-weight:800;
      white-space:nowrap;
      box-shadow:0 12px 26px rgba(32,33,36,.14);
    }
    .header-cta:hover{
      transform:translateY(-2px);
      background:var(--color-primary);
      color:#fff;
    }

    .section{
      padding:88px 0;
    }
    .section.alt{
      background:rgba(247,241,232,.72);
    }
    .section-head{
      max-width:760px;
      margin-bottom:36px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(242,107,58,.1);
      color:var(--color-primary-dark);
      font-size:13px;
      font-weight:800;
      margin-bottom:16px;
    }
    .eyebrow::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--color-primary);
    }
    h1,h2,h3,p{margin-top:0}
    h1{
      color:var(--color-heading);
      font-size:clamp(36px,5vw,58px);
      line-height:1.12;
      font-weight:850;
      letter-spacing:-.04em;
      margin-bottom:22px;
    }
    h2{
      color:var(--color-heading);
      font-size:clamp(28px,3.2vw,40px);
      line-height:1.22;
      font-weight:820;
      letter-spacing:-.025em;
      margin-bottom:14px;
    }
    h3{
      color:var(--color-heading);
      font-size:21px;
      line-height:1.35;
      font-weight:780;
      margin-bottom:10px;
    }
    .lead{
      color:var(--color-muted);
      font-size:18px;
      line-height:1.85;
      margin-bottom:28px;
    }
    .muted{color:var(--color-muted)}
    .hero{
      padding:72px 0 84px;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      width:520px;
      height:520px;
      right:-150px;
      top:-180px;
      background:radial-gradient(circle,rgba(242,107,58,.18),rgba(255,248,241,0) 68%);
      pointer-events:none;
    }
    .hero-panel{
      position:relative;
      padding:32px;
      border:1px solid rgba(80,65,45,.12);
      border-radius:var(--radius-xl);
      background:linear-gradient(145deg,#fff,#FFF4E8);
      box-shadow:var(--shadow-soft);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:14px;
      margin:30px 0 24px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:48px;
      padding:0 22px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:800;
      font-size:15px;
      transition:var(--transition);
    }
    .btn-primary{
      color:#fff;
      background:var(--color-primary);
      box-shadow:0 14px 28px rgba(242,107,58,.24);
    }
    .btn-primary:hover{
      color:#fff;
      background:var(--color-primary-dark);
      transform:translateY(-2px);
      box-shadow:0 18px 38px rgba(242,107,58,.3);
    }
    .btn-secondary{
      color:var(--color-heading);
      background:#fff;
      border-color:var(--color-border);
    }
    .btn-secondary:hover{
      color:var(--color-primary-dark);
      background:#FFF2E7;
      border-color:rgba(242,107,58,.35);
      transform:translateY(-2px);
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:8px 12px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--color-border);
      color:#4F5662;
      font-size:13px;
      font-weight:700;
    }
    .tag.green{
      background:var(--color-secondary-soft);
      border-color:rgba(24,169,153,.22);
      color:#0F7F74;
    }

    .channel-board{
      background:#fff;
      border:1px solid rgba(80,65,45,.12);
      border-radius:28px;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      position:relative;
    }
    .board-top{
      padding:20px;
      border-bottom:1px solid var(--color-border-soft);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      background:linear-gradient(180deg,#fff,#FFF8F1);
    }
    .board-title{
      font-size:16px;
      font-weight:850;
      color:var(--color-heading);
    }
    .board-status{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 10px;
      border-radius:999px;
      background:var(--color-secondary-soft);
      color:#087C70;
      font-size:12px;
      font-weight:800;
    }
    .board-status::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--color-secondary);
    }
    .board-body{padding:22px}
    .filter-preview{
      display:flex;
      gap:9px;
      flex-wrap:wrap;
      margin-bottom:20px;
    }
    .mini-filter{
      padding:8px 11px;
      border-radius:12px;
      background:#F8F4EF;
      color:#5B606B;
      font-size:12px;
      font-weight:800;
    }
    .mini-filter.active{
      background:var(--color-primary);
      color:#fff;
    }
    .preview-card{
      display:grid;
      grid-template-columns:90px 1fr;
      gap:14px;
      padding:14px;
      border-radius:18px;
      border:1px solid var(--color-border-soft);
      background:#fff;
      margin-bottom:12px;
      transition:var(--transition);
    }
    .preview-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(35,28,20,.08)}
    .thumb{
      min-height:68px;
      border-radius:15px;
      background:
        radial-gradient(circle at 70% 25%,rgba(255,255,255,.58),transparent 22%),
        linear-gradient(135deg,#F26B3A,#FFD0AE 58%,#F8F1E8);
      position:relative;
      overflow:hidden;
    }
    .thumb::before{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-42%,-50%);
      width:0;
      height:0;
      border-top:11px solid transparent;
      border-bottom:11px solid transparent;
      border-left:17px solid rgba(255,255,255,.92);
    }
    .thumb::after{
      content:"";
      position:absolute;
      left:12px;
      right:12px;
      bottom:12px;
      height:4px;
      border-radius:999px;
      background:rgba(255,255,255,.52);
    }
    .preview-card strong{
      display:block;
      color:var(--color-heading);
      line-height:1.35;
      margin-bottom:5px;
    }
    .preview-card span{
      display:block;
      color:var(--color-muted);
      font-size:13px;
      line-height:1.55;
    }

    .segment-tabs{
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px;
      background:#fff;
      border:1px solid var(--color-border);
      border-radius:999px;
      box-shadow:0 10px 24px rgba(35,28,20,.05);
      overflow-x:auto;
      scrollbar-width:none;
      margin-bottom:26px;
    }
    .segment-tabs::-webkit-scrollbar{display:none}
    .segment-tabs a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
      min-height:42px;
      padding:0 18px;
      border-radius:999px;
      color:#4B515C;
      font-weight:800;
      font-size:14px;
    }
    .segment-tabs a:hover{
      background:#FFF2E7;
      color:var(--color-primary-dark);
    }
    .segment-tabs a.active{
      background:var(--color-primary);
      color:#fff;
      box-shadow:0 10px 22px rgba(242,107,58,.22);
    }

    .filter-box{
      padding:24px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--color-border);
      box-shadow:var(--shadow-soft);
      position:sticky;
      top:112px;
    }
    .filter-group{margin-bottom:22px}
    .filter-group:last-child{margin-bottom:0}
    .filter-title{
      font-size:14px;
      font-weight:850;
      color:var(--color-heading);
      margin-bottom:12px;
    }
    .filter-list{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .filter-list a{
      display:inline-flex;
      padding:8px 12px;
      border-radius:999px;
      background:#FFF8F1;
      border:1px solid var(--color-border);
      color:#555B66;
      font-size:13px;
      font-weight:760;
    }
    .filter-list a:hover,.filter-list a.active{
      background:var(--color-primary);
      border-color:var(--color-primary);
      color:#fff;
    }

    .content-flow{
      display:grid;
      gap:18px;
    }
    .feature-card{
      display:grid;
      grid-template-columns:170px 1fr auto;
      gap:22px;
      align-items:center;
      padding:20px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid rgba(80,65,45,.11);
      box-shadow:0 12px 30px rgba(35,28,20,.05);
      transition:var(--transition);
    }
    .feature-card:hover{
      transform:translateY(-4px);
      border-color:rgba(242,107,58,.34);
      box-shadow:var(--shadow-hover);
    }
    .feature-card.highlight{
      background:linear-gradient(135deg,#fff,#FFF3E7);
      border-color:rgba(242,107,58,.22);
    }
    .card-cover{
      min-height:120px;
      border-radius:20px;
      background:
        linear-gradient(90deg,rgba(255,255,255,.48) 0 28%,transparent 28% 100%),
        linear-gradient(135deg,#F26B3A,#FFA56F 52%,#FFE0CA);
      position:relative;
      overflow:hidden;
    }
    .card-cover::before{
      content:"一区";
      position:absolute;
      left:14px;
      top:12px;
      padding:5px 9px;
      border-radius:999px;
      background:rgba(255,255,255,.82);
      color:var(--color-primary-dark);
      font-size:12px;
      font-weight:900;
    }
    .card-cover::after{
      content:"";
      position:absolute;
      width:48px;
      height:48px;
      border-radius:50%;
      right:16px;
      bottom:16px;
      background:rgba(255,255,255,.82);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
    }
    .card-body .badge-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:10px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      padding:5px 9px;
      border-radius:999px;
      background:#FFF1E8;
      color:var(--color-primary-dark);
      font-size:12px;
      font-weight:850;
    }
    .badge.green{
      background:var(--color-secondary-soft);
      color:#087C70;
    }
    .card-body h3{font-size:22px;margin-bottom:8px}
    .card-body p{
      color:var(--color-muted);
      margin-bottom:12px;
      line-height:1.72;
    }
    .meta{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      color:var(--color-light);
      font-size:13px;
      font-weight:700;
    }
    .arrow{
      width:42px;
      height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:#FFF3EA;
      color:var(--color-primary-dark);
      font-size:22px;
      font-weight:800;
      transition:var(--transition);
    }
    .feature-card:hover .arrow{
      transform:translateX(4px);
      background:var(--color-primary);
      color:#fff;
    }

    .logic-card{
      height:100%;
      padding:28px;
      border-radius:var(--radius-lg);
      border:1px solid var(--color-border);
      background:#fff;
      box-shadow:var(--shadow-soft);
      transition:var(--transition);
    }
    .logic-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(242,107,58,.28);
    }
    .logic-num{
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:15px;
      background:var(--color-primary);
      color:#fff;
      font-weight:900;
      margin-bottom:18px;
    }
    .logic-card p{color:var(--color-muted);margin:0}

    .stats-strip{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
      margin-top:34px;
    }
    .stat{
      padding:22px;
      border-radius:20px;
      background:#fff;
      border:1px solid var(--color-border);
    }
    .stat strong{
      display:block;
      color:var(--color-heading);
      font-size:28px;
      line-height:1.1;
      margin-bottom:8px;
    }
    .stat span{
      color:var(--color-muted);
      font-size:14px;
      font-weight:700;
    }

    .process-card{
      height:100%;
      padding:26px;
      border-radius:var(--radius-lg);
      border:1px solid rgba(80,65,45,.11);
      background:linear-gradient(180deg,#fff,#FFF9F2);
      position:relative;
      overflow:hidden;
    }
    .process-card::after{
      content:"";
      position:absolute;
      width:120px;
      height:120px;
      right:-46px;
      top:-46px;
      border-radius:50%;
      background:rgba(242,107,58,.09);
    }
    .process-step{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:36px;
      height:36px;
      border-radius:50%;
      background:#2B2723;
      color:#fff;
      font-weight:900;
      margin-bottom:16px;
    }
    .process-card p{color:var(--color-muted);margin:0}

    .faq-wrap{
      max-width:900px;
      margin:0 auto;
    }
    .accordion{
      background:transparent;
    }
    .accordion-item{
      margin-bottom:14px;
      border:1px solid var(--color-border);
      border-radius:18px;
      background:#fff;
      overflow:hidden;
      box-shadow:0 10px 24px rgba(35,28,20,.04);
    }
    .accordion-title{
      border:0;
      color:var(--color-heading);
      font-size:17px;
      font-weight:850;
      padding:20px 54px 20px 22px;
      background:#fff;
    }
    .accordion-title:hover,.accordion-title:focus{
      background:#FFF6EC;
      color:var(--color-primary-dark);
    }
    .accordion-title::before{
      color:var(--color-primary);
      font-size:24px;
      margin-top:-14px;
    }
    .accordion-content{
      border:0;
      padding:0 22px 22px;
      color:var(--color-muted);
      background:#fff;
      line-height:1.8;
    }

    .cta-panel{
      padding:38px;
      border-radius:30px;
      background:
        radial-gradient(circle at 82% 10%,rgba(24,169,153,.18),transparent 34%),
        linear-gradient(135deg,#2B2723,#3B332C);
      color:#FFF4E8;
      box-shadow:0 24px 60px rgba(43,39,35,.18);
      overflow:hidden;
    }
    .cta-panel h2{color:#fff}
    .cta-panel p{color:#F3DEC9;margin-bottom:0}
    .contact-form{
      padding:24px;
      border-radius:24px;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.16);
    }
    .contact-form label{
      color:#FFF4E8;
      font-size:13px;
      font-weight:800;
      margin-bottom:6px;
    }
    .contact-form input,.contact-form textarea{
      border:1px solid rgba(255,255,255,.24);
      background:rgba(255,255,255,.92);
      border-radius:14px;
      min-height:46px;
      box-shadow:none;
      color:var(--color-heading);
    }
    .contact-form input:focus,.contact-form textarea:focus{
      border-color:var(--color-primary);
      box-shadow:0 0 0 3px rgba(242,107,58,.22);
      background:#fff;
    }
    .contact-form textarea{min-height:98px;resize:vertical}

    .footer{
      background:var(--color-footer);
      color:#EEDFCC;
      padding:64px 0 28px;
    }
    .footer .brand{
      margin-bottom:18px;
      min-width:0;
    }
    .footer .brand-title{color:#fff}
    .footer .brand-subtitle{color:#D8C8B5}
    .footer p{
      color:#D8C8B5;
      margin-bottom:0;
      line-height:1.8;
    }
    .footer h3{
      color:#fff;
      font-size:16px;
      margin-bottom:14px;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:9px;
    }
    .footer-links a{
      color:#D8C8B5;
      font-size:14px;
    }
    .footer-links a:hover{
      color:#fff;
      padding-left:3px;
    }
    .footer-domain{
      color:#fff;
      font-weight:800;
    }
    .footer-bottom{
      margin-top:42px;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.14);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      color:#C7B7A4;
      font-size:13px;
    }

    @media (max-width:1024px){
      .nav-wrap{
        min-height:auto;
        padding:14px 0;
        flex-wrap:wrap;
      }
      .brand{min-width:auto}
      .chip-nav{
        order:3;
        width:100%;
        justify-content:flex-start;
      }
      .header-cta{margin-left:auto}
      .filter-box{
        position:relative;
        top:0;
        margin-bottom:24px;
      }
      .stats-strip{grid-template-columns:repeat(2,1fr)}
    }

    @media (max-width:768px){
      .site-container{width:min(calc(100% - 28px),var(--container))}
      .notice-inner{justify-content:flex-start;text-align:left}
      .brand-title{font-size:15px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
      .brand-subtitle{font-size:11px}
      .brand-mark{width:42px;height:42px;border-radius:14px}
      .header-cta{
        min-height:40px;
        padding:0 14px;
        font-size:13px;
      }
      .section{padding:62px 0}
      .hero{padding:48px 0 62px}
      .hero-panel{padding:24px}
      .hero-actions .btn{width:100%}
      .segment-tabs{
        border-radius:18px;
        align-items:flex-start;
      }
      .feature-card{
        grid-template-columns:1fr;
        gap:16px;
      }
      .card-cover{min-height:150px}
      .arrow{
        width:100%;
        border-radius:14px;
      }
      .stats-strip{grid-template-columns:1fr}
      .cta-panel{padding:26px}
      .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
      }
    }

    @media (max-width:520px){
      body{font-size:15px}
      .nav-wrap{gap:12px}
      .brand{width:100%}
      .header-cta{width:100%}
      .chip-nav{border-radius:18px}
      .nav-chip{height:36px;padding:0 13px}
      h1{font-size:34px}
      .lead{font-size:16px}
      .preview-card{grid-template-columns:1fr}
      .thumb{min-height:110px}
      .filter-list{
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:4px;
      }
      .filter-list a{white-space:nowrap}
      .contact-form{padding:18px}
    }

/* roulang page: category2 */
:root{
      --color-primary:#F26B3A;
      --color-primary-dark:#D95427;
      --color-primary-soft:#FFF0E8;
      --color-secondary:#18A999;
      --color-secondary-soft:#E8FAF7;
      --color-text:#202124;
      --color-heading:#30343B;
      --color-muted:#667085;
      --color-light-muted:#7A7F89;
      --color-bg:#FFF8F1;
      --color-bg-alt:#F7F1E8;
      --color-surface:#FFFFFF;
      --color-surface-warm:#FFFCF8;
      --color-border:#E9DED2;
      --color-border-light:#ECEFF3;
      --color-footer:#2B2723;
      --radius-xs:10px;
      --radius-sm:14px;
      --radius-md:18px;
      --radius-lg:24px;
      --radius-xl:32px;
      --shadow-soft:0 18px 45px rgba(35,28,20,.08);
      --shadow-hover:0 22px 55px rgba(35,28,20,.13);
      --shadow-card:0 10px 28px rgba(48,52,59,.07);
      --container:1220px;
      --section-space:96px;
      --font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font-family);
      color:var(--color-text);
      background:linear-gradient(180deg,var(--color-bg) 0%,#fff 38%,var(--color-bg-alt) 100%);
      font-size:16px;
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 12% 10%,rgba(242,107,58,.10),transparent 28%),
        radial-gradient(circle at 88% 16%,rgba(24,169,153,.10),transparent 24%),
        linear-gradient(90deg,rgba(32,33,36,.025) 1px,transparent 1px),
        linear-gradient(180deg,rgba(32,33,36,.02) 1px,transparent 1px);
      background-size:auto,auto,72px 72px,72px 72px;
      z-index:-1;
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
    }
    a:hover{color:var(--color-primary)}
    img,svg{max-width:100%;height:auto;display:block}
    button,input,textarea{font:inherit}
    button,a,input,textarea{outline:none}
    a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
      box-shadow:0 0 0 3px rgba(242,107,58,.26);
      border-color:rgba(242,107,58,.55)!important;
    }
    h1,h2,h3,h4,p{margin-top:0}
    h1,h2,h3,h4{color:var(--color-heading);font-weight:800;letter-spacing:-.02em}
    h1{font-size:clamp(2.35rem,5vw,3.85rem);line-height:1.12;margin-bottom:22px}
    h2{font-size:clamp(1.85rem,3vw,2.55rem);line-height:1.2;margin-bottom:16px}
    h3{font-size:1.25rem;line-height:1.35;margin-bottom:12px}
    p{color:var(--color-muted);line-height:1.82}
    section{position:relative;padding:var(--section-space) 0}
    .site-container{
      width:min(calc(100% - 40px),var(--container));
      margin:0 auto;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--color-primary-dark);
      background:var(--color-primary-soft);
      border:1px solid rgba(242,107,58,.18);
      padding:7px 12px;
      border-radius:999px;
      font-size:.88rem;
      font-weight:700;
      margin-bottom:14px;
    }
    .section-kicker:before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--color-primary);
      box-shadow:0 0 0 4px rgba(242,107,58,.13);
    }
    .section-head{
      max-width:760px;
      margin-bottom:38px;
    }
    .section-head.center{
      text-align:center;
      margin-left:auto;
      margin-right:auto;
    }
    .section-head p{font-size:1.06rem}

    .top-note{
      background:#2B2723;
      color:#F8EDE1;
      font-size:.92rem;
      padding:9px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .top-note .site-container{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .top-note span{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#F8EDE1;
      white-space:nowrap;
    }
    .top-note span:before{
      content:"";
      width:7px;
      height:7px;
      border-radius:99px;
      background:var(--color-secondary);
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,252,248,.94);
      backdrop-filter:saturate(140%) blur(14px);
      border-bottom:1px solid rgba(80,65,45,.10);
    }
    .nav-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      min-height:82px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:250px;
    }
    .brand:hover .brand-mark{transform:rotate(-4deg) scale(1.03)}
    .brand-mark{
      width:46px;
      height:46px;
      border-radius:16px;
      background:
        linear-gradient(135deg,var(--color-primary),#FFB085);
      position:relative;
      flex:0 0 auto;
      box-shadow:0 12px 28px rgba(242,107,58,.25);
      transition:transform .25s ease;
    }
    .brand-mark:before{
      content:"";
      position:absolute;
      left:18px;
      top:13px;
      border-left:14px solid #fff;
      border-top:9px solid transparent;
      border-bottom:9px solid transparent;
    }
    .brand-mark:after{
      content:"区";
      position:absolute;
      right:5px;
      bottom:2px;
      color:rgba(255,255,255,.86);
      font-size:13px;
      font-weight:800;
    }
    .brand-text{display:flex;flex-direction:column;line-height:1.25}
    .brand-title{
      color:var(--color-heading);
      font-weight:800;
      font-size:1rem;
      white-space:nowrap;
    }
    .brand-subtitle{
      color:var(--color-light-muted);
      font-size:.78rem;
      margin-top:3px;
      white-space:nowrap;
    }
    .chip-nav{
      display:flex;
      align-items:center;
      gap:8px;
      padding:6px;
      border-radius:999px;
      background:#F6EFE6;
      border:1px solid rgba(80,65,45,.10);
      overflow-x:auto;
      scrollbar-width:none;
    }
    .chip-nav::-webkit-scrollbar{display:none}
    .nav-chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:9px 15px;
      border-radius:999px;
      color:#4B515A;
      font-weight:700;
      font-size:.94rem;
      white-space:nowrap;
    }
    .nav-chip:hover{
      background:#fff;
      color:var(--color-primary-dark);
      box-shadow:0 8px 18px rgba(35,28,20,.06);
    }
    .nav-chip.active{
      background:var(--color-primary);
      color:#fff;
      box-shadow:0 10px 22px rgba(242,107,58,.26);
    }
    .header-cta,.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:999px;
      font-weight:800;
      border:1px solid transparent;
      cursor:pointer;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
    }
    .header-cta{
      min-width:max-content;
      padding:12px 19px;
      background:var(--color-heading);
      color:#fff;
      box-shadow:0 12px 26px rgba(32,33,36,.16);
    }
    .header-cta:hover{
      transform:translateY(-2px);
      color:#fff;
      background:var(--color-primary);
      box-shadow:0 16px 34px rgba(242,107,58,.28);
    }
    .btn{
      padding:14px 24px;
      min-height:48px;
    }
    .btn-primary{
      background:var(--color-primary);
      color:#fff;
      box-shadow:0 15px 30px rgba(242,107,58,.25);
    }
    .btn-primary:hover{
      color:#fff;
      background:var(--color-primary-dark);
      transform:translateY(-2px);
      box-shadow:0 18px 36px rgba(242,107,58,.32);
    }
    .btn-secondary{
      background:#fff;
      color:var(--color-heading);
      border-color:var(--color-border);
    }
    .btn-secondary:hover{
      background:var(--color-primary-soft);
      color:var(--color-primary-dark);
      border-color:rgba(242,107,58,.25);
      transform:translateY(-2px);
    }

    .page-hero{
      padding:72px 0 88px;
      overflow:hidden;
    }
    .page-hero:after{
      content:"";
      position:absolute;
      width:420px;
      height:420px;
      right:-140px;
      top:70px;
      border-radius:50%;
      background:rgba(24,169,153,.10);
      filter:blur(4px);
      z-index:-1;
    }
    .hero-copy{
      padding-right:28px;
    }
    .hero-copy .lead{
      font-size:1.15rem;
      color:#5E6672;
      max-width:700px;
      margin-bottom:28px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin:28px 0;
    }
    .trust-tags{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:20px;
    }
    .tag,.badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      border-radius:999px;
      padding:7px 11px;
      font-size:.86rem;
      font-weight:700;
      color:#4E5560;
      background:#fff;
      border:1px solid var(--color-border);
    }
    .tag:before{
      content:"";
      width:6px;
      height:6px;
      border-radius:50%;
      background:var(--color-secondary);
    }
    .badge{
      background:var(--color-secondary-soft);
      border-color:rgba(24,169,153,.18);
      color:#087D71;
    }
    .magazine-board{
      background:rgba(255,255,255,.84);
      border:1px solid rgba(80,65,45,.12);
      border-radius:var(--radius-xl);
      padding:18px;
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .magazine-board:before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(242,107,58,.08),transparent 38%,rgba(24,169,153,.09));
      pointer-events:none;
    }
    .board-top{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 12px 18px;
    }
    .board-title{
      font-weight:800;
      color:var(--color-heading);
    }
    .board-pills{
      display:flex;
      gap:6px;
    }
    .board-pills span{
      width:10px;height:10px;border-radius:50%;
      background:#E9DED2;
    }
    .board-pills span:nth-child(1){background:var(--color-primary)}
    .board-pills span:nth-child(2){background:var(--color-secondary)}
    .topic-collage{
      position:relative;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:14px;
    }
    .topic-tile{
      min-height:150px;
      border-radius:22px;
      padding:18px;
      background:#fff;
      border:1px solid rgba(80,65,45,.10);
      box-shadow:0 12px 26px rgba(35,28,20,.06);
      overflow:hidden;
      position:relative;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .topic-tile:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(242,107,58,.28);
    }
    .topic-tile.large{
      min-height:318px;
      background:linear-gradient(145deg,#2F2A25,#524438);
      color:#fff;
    }
    .topic-tile.large h3,.topic-tile.large p{color:#fff}
    .topic-tile.large p{opacity:.78}
    .topic-tile:after{
      content:"";
      position:absolute;
      width:150px;height:150px;
      right:-42px;bottom:-44px;
      border-radius:36px;
      transform:rotate(22deg);
      background:linear-gradient(135deg,rgba(242,107,58,.24),rgba(24,169,153,.18));
    }
    .tile-number{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:34px;height:34px;
      border-radius:12px;
      background:var(--color-primary-soft);
      color:var(--color-primary-dark);
      font-weight:900;
      margin-bottom:14px;
    }
    .topic-tile.large .tile-number{background:rgba(255,255,255,.14);color:#fff}
    .play-line{
      position:absolute;
      left:18px;
      right:18px;
      bottom:18px;
      height:8px;
      border-radius:999px;
      background:rgba(255,255,255,.22);
      overflow:hidden;
    }
    .play-line span{
      display:block;
      width:62%;
      height:100%;
      background:linear-gradient(90deg,var(--color-primary),#FFB085);
      border-radius:999px;
    }

    .segment-tabs{
      margin-top:-42px;
      position:relative;
      z-index:2;
    }
    .segment-panel{
      background:#fff;
      border:1px solid rgba(80,65,45,.11);
      border-radius:24px;
      padding:12px;
      box-shadow:var(--shadow-card);
      display:flex;
      gap:10px;
      overflow-x:auto;
      scrollbar-width:none;
    }
    .segment-panel::-webkit-scrollbar{display:none}
    .segment-panel a{
      flex:1;
      min-width:180px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:13px 16px;
      border-radius:18px;
      font-weight:800;
      color:#4C5360;
      background:#FFF8F1;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .segment-panel a:hover{
      color:var(--color-primary-dark);
      border-color:rgba(242,107,58,.22);
      background:#fff;
    }
    .segment-panel a.active{
      background:var(--color-primary);
      color:#fff;
      box-shadow:0 12px 24px rgba(242,107,58,.25);
    }

    .card{
      background:var(--color-surface);
      border:1px solid rgba(80,65,45,.10);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-card);
      padding:28px;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
      height:100%;
    }
    .card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(242,107,58,.26);
    }

    .topic-belt{
      background:#fff;
    }
    .belt-card{
      border-radius:28px;
      overflow:hidden;
      border:1px solid rgba(80,65,45,.10);
      box-shadow:var(--shadow-soft);
      background:var(--color-surface-warm);
    }
    .belt-cover{
      min-height:260px;
      padding:30px;
      background:
        linear-gradient(135deg,rgba(242,107,58,.92),rgba(255,176,133,.65)),
        repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 8px,transparent 8px 18px);
      color:#fff;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      position:relative;
      overflow:hidden;
    }
    .belt-cover:after{
      content:"";
      position:absolute;
      width:210px;height:210px;
      right:-50px;bottom:-60px;
      border:1px solid rgba(255,255,255,.32);
      border-radius:50%;
      box-shadow:inset 0 0 0 28px rgba(255,255,255,.08);
    }
    .belt-cover h3,.belt-cover p{color:#fff;position:relative;z-index:1}
    .belt-cover p{opacity:.86}
    .belt-content{
      padding:30px;
    }
    .mini-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:14px;
    }
    .mini-list li{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:14px;
      background:#fff;
      border:1px solid var(--color-border-light);
      border-radius:16px;
      color:var(--color-muted);
      transition:background .2s ease,transform .2s ease,border-color .2s ease;
    }
    .mini-list li:hover{
      background:var(--color-primary-soft);
      transform:translateX(3px);
      border-color:rgba(242,107,58,.20);
    }
    .mini-list strong{display:block;color:var(--color-heading);margin-bottom:2px}
    .list-dot{
      width:26px;height:26px;
      border-radius:10px;
      background:var(--color-secondary-soft);
      color:#087D71;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
      font-weight:900;
      font-size:.8rem;
    }

    .stagger-section{
      background:linear-gradient(180deg,var(--color-bg-alt),#fff);
    }
    .stagger-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:22px;
      align-items:start;
    }
    .feature-topic{
      padding:32px;
      border-radius:30px;
      background:#fff;
      border:1px solid rgba(80,65,45,.10);
      box-shadow:var(--shadow-soft);
      min-height:330px;
      position:relative;
      overflow:hidden;
    }
    .feature-topic:before{
      content:"";
      position:absolute;
      inset:auto -40px -80px auto;
      width:240px;height:240px;
      border-radius:48px;
      background:linear-gradient(135deg,rgba(242,107,58,.14),rgba(24,169,153,.10));
      transform:rotate(18deg);
    }
    .feature-topic h3{font-size:1.65rem}
    .topic-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:22px 0;
    }
    .topic-meta span{
      border-radius:999px;
      padding:8px 12px;
      background:#FFF8F1;
      border:1px solid var(--color-border);
      color:#5E6672;
      font-weight:700;
      font-size:.9rem;
    }
    .stack-cards{
      display:grid;
      gap:18px;
    }
    .stack-card{
      background:#fff;
      border:1px solid rgba(80,65,45,.10);
      border-radius:22px;
      padding:22px;
      box-shadow:var(--shadow-card);
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .stack-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(24,169,153,.25);
    }
    .stack-card:nth-child(even){
      background:#FFFCF8;
      margin-left:24px;
    }

    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }
    .tag-cloud a{
      display:inline-flex;
      align-items:center;
      min-height:42px;
      padding:10px 14px;
      border-radius:999px;
      background:#fff;
      color:#4E5560;
      border:1px solid var(--color-border);
      font-weight:700;
      box-shadow:0 8px 18px rgba(35,28,20,.04);
    }
    .tag-cloud a:hover{
      color:#fff;
      background:var(--color-secondary);
      border-color:var(--color-secondary);
      transform:translateY(-2px);
    }

    .process{
      background:#fff;
    }
    .process-grid{
      position:relative;
    }
    .process-card{
      background:var(--color-surface-warm);
      border:1px solid rgba(80,65,45,.10);
      border-radius:24px;
      padding:26px;
      min-height:230px;
      box-shadow:var(--shadow-card);
      position:relative;
      overflow:hidden;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .process-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(242,107,58,.25);
    }
    .process-num{
      width:44px;height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:16px;
      background:var(--color-primary);
      color:#fff;
      font-weight:900;
      margin-bottom:18px;
      box-shadow:0 12px 24px rgba(242,107,58,.22);
    }
    .process-card:after{
      content:"";
      position:absolute;
      right:-28px;
      top:-28px;
      width:100px;height:100px;
      border-radius:30px;
      background:rgba(242,107,58,.08);
      transform:rotate(22deg);
    }

    .insight-panel{
      background:linear-gradient(135deg,#2B2723,#37322D);
      border-radius:32px;
      padding:38px;
      color:#fff;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      position:relative;
    }
    .insight-panel:before{
      content:"";
      position:absolute;
      right:-120px;
      top:-120px;
      width:320px;height:320px;
      border-radius:50%;
      background:rgba(242,107,58,.20);
    }
    .insight-panel h2,.insight-panel h3,.insight-panel p{color:#fff}
    .insight-panel p{opacity:.78}
    .kpi-row{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin-top:28px;
    }
    .kpi{
      position:relative;
      z-index:1;
      padding:18px;
      border-radius:18px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
    }
    .kpi strong{
      display:block;
      font-size:1.55rem;
      color:#fff;
      line-height:1.2;
      margin-bottom:6px;
    }
    .kpi span{
      color:rgba(255,255,255,.72);
      font-size:.92rem;
    }

    .faq-section{
      background:var(--color-bg-alt);
    }
    .accordion{
      background:transparent;
      margin:0;
    }
    .accordion-item{
      margin-bottom:14px;
      border-radius:18px;
      overflow:hidden;
      background:#fff;
      border:1px solid rgba(80,65,45,.10);
      box-shadow:0 8px 20px rgba(35,28,20,.045);
    }
    .accordion-title{
      border:none!important;
      color:var(--color-heading);
      font-weight:800;
      font-size:1.02rem;
      padding:20px 54px 20px 22px;
      background:#fff;
    }
    .accordion-title:hover,.accordion-title:focus{
      background:var(--color-primary-soft);
      color:var(--color-primary-dark);
    }
    .accordion-title:before{
      right:22px;
      margin-top:-12px;
      font-size:1.5rem;
      color:var(--color-primary);
    }
    .accordion-content{
      border:none!important;
      padding:0 22px 22px;
      color:var(--color-muted);
      background:#fff;
      line-height:1.8;
    }

    .cta-section{
      padding:86px 0;
      background:#fff;
    }
    .cta-card{
      border-radius:34px;
      background:
        linear-gradient(135deg,rgba(242,107,58,.96),rgba(255,122,69,.82)),
        radial-gradient(circle at 85% 20%,rgba(255,255,255,.24),transparent 26%);
      padding:44px;
      color:#fff;
      box-shadow:0 24px 58px rgba(242,107,58,.24);
      overflow:hidden;
      position:relative;
    }
    .cta-card:after{
      content:"";
      position:absolute;
      right:-70px;
      bottom:-100px;
      width:260px;height:260px;
      border:1px solid rgba(255,255,255,.32);
      border-radius:60px;
      transform:rotate(18deg);
    }
    .cta-card h2,.cta-card p{color:#fff}
    .cta-card p{opacity:.88}
    .contact-card{
      background:#fff;
      border-radius:26px;
      padding:24px;
      border:1px solid rgba(255,255,255,.48);
      box-shadow:0 18px 38px rgba(100,42,20,.15);
      position:relative;
      z-index:1;
    }
    .contact-card label{
      color:var(--color-heading);
      font-weight:800;
      margin-bottom:6px;
    }
    .contact-card input,.contact-card textarea{
      width:100%;
      border:1px solid var(--color-border);
      border-radius:14px;
      background:#FFFCF8;
      box-shadow:none;
      min-height:46px;
      color:var(--color-heading);
    }
    .contact-card textarea{
      min-height:92px;
      resize:vertical;
    }

    .footer{
      background:var(--color-footer);
      color:#F8EDE1;
      padding:64px 0 28px;
    }
    .footer .brand{margin-bottom:18px}
    .footer .brand-title{color:#fff}
    .footer .brand-subtitle{color:rgba(248,237,225,.68)}
    .footer p{
      color:rgba(248,237,225,.72);
      margin-bottom:0;
    }
    .footer h3{
      color:#fff;
      font-size:1rem;
      margin-bottom:16px;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:9px;
    }
    .footer-links a{
      color:rgba(248,237,225,.72);
    }
    .footer-links a:hover{
      color:#fff;
      transform:translateX(2px);
    }
    .footer-domain{
      color:#fff;
      font-weight:800;
    }
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      margin-top:46px;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.12);
      color:rgba(248,237,225,.62);
      font-size:.92rem;
    }

    @media (max-width:1024px){
      :root{--section-space:76px}
      .nav-wrap{
        flex-wrap:wrap;
        padding:14px 0;
        gap:12px;
      }
      .brand{min-width:auto}
      .chip-nav{
        order:3;
        width:100%;
      }
      .chip-nav .nav-chip{flex:0 0 auto}
      .hero-copy{padding-right:0;margin-bottom:28px}
      .stagger-grid{grid-template-columns:1fr}
      .kpi-row{grid-template-columns:repeat(2,1fr)}
      .topic-collage{grid-template-columns:1fr 1fr}
      .topic-tile.large{grid-column:1 / -1;min-height:230px}
    }

    @media (max-width:768px){
      .top-note .site-container{
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
      }
      .top-note span{white-space:normal}
      .site-container{width:min(calc(100% - 28px),var(--container))}
      .brand-title{font-size:.94rem}
      .brand-subtitle{font-size:.72rem}
      .brand-mark{width:42px;height:42px;border-radius:14px}
      .header-cta{
        padding:10px 14px;
        font-size:.9rem;
      }
      .page-hero{padding:52px 0 74px}
      .hero-actions .btn{width:100%}
      .segment-panel a{min-width:150px;flex:0 0 auto}
      .topic-collage{grid-template-columns:1fr}
      .topic-tile,.topic-tile.large{min-height:auto}
      .stack-card:nth-child(even){margin-left:0}
      .kpi-row{grid-template-columns:1fr}
      .cta-card{padding:28px}
      .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
      }
    }

    @media (max-width:520px){
      :root{--section-space:62px}
      body{font-size:15px}
      h1{font-size:2.25rem}
      h2{font-size:1.72rem}
      .nav-wrap{min-height:auto}
      .brand{width:100%}
      .header-cta{width:100%}
      .chip-nav{
        border-radius:18px;
        justify-content:flex-start;
      }
      .nav-chip{font-size:.9rem;padding:8px 13px}
      .card,.feature-topic,.process-card{padding:22px}
      .belt-cover,.belt-content{padding:24px}
      .insight-panel{padding:26px}
      .footer{padding-top:50px}
    }

/* roulang page: category3 */
:root {
      --color-primary: #F26B3A;
      --color-primary-dark: #D95426;
      --color-primary-soft: #FFF0E8;
      --color-secondary: #18A999;
      --color-secondary-soft: #E9FAF7;
      --color-text: #202124;
      --color-heading: #30343B;
      --color-muted: #667085;
      --color-light: #7A7F89;
      --color-bg: #FFF8F1;
      --color-bg-alt: #F7F1E8;
      --color-bg-soft: #F6F7F9;
      --color-card: #FFFFFF;
      --color-card-warm: #FFFCF8;
      --color-border: #E9DED2;
      --color-border-cool: #ECEFF3;
      --color-footer: #2B2723;
      --color-footer-muted: #CFC4B7;
      --shadow-soft: 0 18px 45px rgba(35, 28, 20, 0.08);
      --shadow-hover: 0 22px 54px rgba(35, 28, 20, 0.14);
      --radius-xs: 10px;
      --radius-sm: 14px;
      --radius-md: 18px;
      --radius-lg: 24px;
      --radius-xl: 32px;
      --radius-pill: 999px;
      --container: 1220px;
      --section-space: 96px;
      --section-space-mobile: 64px;
      --font-main: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--font-main);
      color: var(--color-text);
      background:
        radial-gradient(circle at 8% 6%, rgba(242, 107, 58, 0.10), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(24, 169, 153, 0.08), transparent 30%),
        var(--color-bg);
      line-height: 1.75;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

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

    a:hover {
      color: var(--color-primary);
    }

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

    button,
    input,
    textarea {
      font: inherit;
    }

    input,
    textarea {
      width: 100%;
    }

    input:focus,
    textarea:focus,
    button:focus,
    a:focus {
      outline: 2px solid rgba(242, 107, 58, .55);
      outline-offset: 3px;
    }

    p {
      margin: 0 0 1rem;
      color: var(--color-muted);
    }

    h1,
    h2,
    h3,
    h4 {
      margin: 0;
      color: var(--color-heading);
      letter-spacing: -0.02em;
      line-height: 1.2;
      font-weight: 800;
    }

    .site-container {
      width: min(calc(100% - 32px), var(--container));
      margin: 0 auto;
    }

    .section {
      padding: var(--section-space) 0;
      position: relative;
    }

    .section.compact {
      padding: 72px 0;
    }

    .section-alt {
      background: rgba(255, 255, 255, .58);
      border-top: 1px solid rgba(233, 222, 210, .72);
      border-bottom: 1px solid rgba(233, 222, 210, .72);
    }

    .section-title {
      max-width: 760px;
      margin-bottom: 34px;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: var(--radius-pill);
      background: var(--color-primary-soft);
      color: var(--color-primary-dark);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 14px;
    }

    .section-kicker::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--color-primary);
      box-shadow: 0 0 0 4px rgba(242, 107, 58, .13);
    }

    .section-title h2 {
      font-size: clamp(30px, 4vw, 42px);
      margin-bottom: 14px;
    }

    .section-title p {
      font-size: 17px;
      max-width: 700px;
    }

    .top-notice {
      background: #2B2723;
      color: #F7F1E8;
      font-size: 14px;
      padding: 9px 0;
    }

    .notice-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

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

    .notice-badges span {
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: var(--radius-pill);
      padding: 3px 10px;
      color: #F5E9DB;
      font-size: 12px;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 252, 248, .92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(233, 222, 210, .88);
    }

    .nav-wrap {
      min-height: 78px;
      display: flex;
      align-items: center;
      gap: 22px;
      justify-content: space-between;
    }

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

    .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 15px;
      background:
        linear-gradient(135deg, var(--color-primary), #FFB08A);
      position: relative;
      box-shadow: 0 12px 28px rgba(242,107,58,.25);
      flex: 0 0 auto;
    }

    .brand-mark::before {
      content: "";
      position: absolute;
      left: 17px;
      top: 13px;
      width: 0;
      height: 0;
      border-left: 14px solid #fff;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,.10));
    }

    .brand-mark::after {
      content: "区";
      position: absolute;
      right: 5px;
      bottom: 2px;
      color: rgba(255,255,255,.82);
      font-size: 12px;
      font-weight: 900;
    }

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

    .brand-title {
      font-weight: 900;
      color: var(--color-heading);
      font-size: 16px;
      line-height: 1.25;
      white-space: nowrap;
    }

    .brand-subtitle {
      color: var(--color-muted);
      font-size: 12px;
      line-height: 1.35;
      margin-top: 2px;
    }

    .chip-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #F7F1E8;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      padding: 7px;
      max-width: 100%;
    }

    .nav-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 0 15px;
      border-radius: var(--radius-pill);
      color: #4A4F58;
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
    }

    .nav-chip:hover {
      background: rgba(242,107,58,.10);
      color: var(--color-primary-dark);
    }

    .nav-chip.active {
      color: #fff;
      background: var(--color-primary);
      box-shadow: 0 10px 22px rgba(242,107,58,.24);
    }

    .header-cta,
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border-radius: var(--radius-pill);
      min-height: 46px;
      padding: 13px 22px;
      font-weight: 900;
      line-height: 1;
      border: 1px solid transparent;
      cursor: pointer;
    }

    .header-cta,
    .btn-primary {
      background: var(--color-primary);
      color: #fff;
      box-shadow: 0 12px 26px rgba(242,107,58,.22);
    }

    .header-cta:hover,
    .btn-primary:hover {
      background: var(--color-primary-dark);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(242,107,58,.28);
    }

    .btn-secondary {
      background: #fff;
      color: var(--color-heading);
      border-color: var(--color-border);
    }

    .btn-secondary:hover {
      background: var(--color-primary-soft);
      color: var(--color-primary-dark);
      border-color: rgba(242,107,58,.28);
      transform: translateY(-2px);
    }

    .hero {
      padding: 74px 0 52px;
      overflow: hidden;
    }

    .hero-panel {
      border-radius: var(--radius-xl);
      border: 1px solid rgba(233, 222, 210, .95);
      background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,248,241,.88)),
        radial-gradient(circle at 80% 12%, rgba(24,169,153,.12), transparent 28%);
      box-shadow: var(--shadow-soft);
      padding: clamp(28px, 4vw, 48px);
      position: relative;
      overflow: hidden;
    }

    .hero-panel::after {
      content: "";
      position: absolute;
      right: -90px;
      bottom: -90px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: rgba(242,107,58,.09);
      pointer-events: none;
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0;
      margin: 0 0 22px;
      background: transparent;
      font-size: 14px;
      color: var(--color-muted);
    }

    .breadcrumb a {
      color: var(--color-primary-dark);
      font-weight: 800;
    }

    .breadcrumb span {
      color: var(--color-light);
    }

    .hero h1 {
      font-size: clamp(36px, 5.4vw, 60px);
      max-width: 700px;
      margin-bottom: 18px;
      letter-spacing: -0.045em;
      line-height: 1.12;
    }

    .hero-copy {
      font-size: 18px;
      color: var(--color-muted);
      max-width: 680px;
      margin-bottom: 26px;
    }

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

    .hero-tags,
    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .tag,
    .index-tag,
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: var(--radius-pill);
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 800;
      background: #fff;
      color: #4D5662;
      border: 1px solid var(--color-border);
    }

    .tag.hot,
    .badge.primary {
      background: var(--color-primary-soft);
      border-color: rgba(242,107,58,.20);
      color: var(--color-primary-dark);
    }

    .tag.green,
    .badge.green {
      background: var(--color-secondary-soft);
      border-color: rgba(24,169,153,.18);
      color: #0B8174;
    }

    .index-console {
      position: relative;
      z-index: 1;
      border-radius: 28px;
      padding: 22px;
      background: #2B2723;
      color: #fff;
      box-shadow: 0 24px 54px rgba(43,39,35,.22);
      min-height: 420px;
    }

    .console-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }

    .console-dots {
      display: flex;
      gap: 7px;
    }

    .console-dots i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,.32);
    }

    .console-dots i:first-child {
      background: var(--color-primary);
    }

    .console-title {
      color: #FDF5EC;
      font-weight: 900;
      font-size: 14px;
    }

    .search-visual {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 54px;
      border-radius: 18px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.12);
      padding: 0 16px;
      margin-bottom: 16px;
      color: rgba(255,255,255,.72);
    }

    .search-icon {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255,255,255,.62);
      border-radius: 50%;
      position: relative;
      flex: 0 0 auto;
    }

    .search-icon::after {
      content: "";
      position: absolute;
      right: -6px;
      bottom: -5px;
      width: 8px;
      height: 2px;
      background: rgba(255,255,255,.62);
      transform: rotate(45deg);
      border-radius: 2px;
    }

    .console-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
    }

    .console-card {
      border-radius: 20px;
      padding: 16px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
    }

    .console-card h3 {
      color: #fff;
      font-size: 17px;
      margin-bottom: 10px;
    }

    .console-card p {
      color: rgba(255,255,255,.66);
      font-size: 13px;
      margin-bottom: 12px;
    }

    .mini-stat {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .mini-stat span {
      display: block;
      border-radius: 14px;
      padding: 10px;
      background: rgba(255,255,255,.08);
      color: #FDF5EC;
      font-size: 12px;
      font-weight: 800;
    }

    .label-stack {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .label-stack span {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 11px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.76);
      font-size: 13px;
      font-weight: 800;
    }

    .label-stack b {
      color: var(--color-primary);
    }

    .progress-line {
      height: 9px;
      border-radius: 20px;
      background: rgba(255,255,255,.12);
      overflow: hidden;
      margin-top: 14px;
    }

    .progress-line i {
      display: block;
      width: 68%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    }

    .segment-bar {
      margin-top: 22px;
      padding: 8px;
      border-radius: 22px;
      background: #fff;
      border: 1px solid var(--color-border);
      display: flex;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .segment-bar::-webkit-scrollbar {
      display: none;
    }

    .segment-bar a {
      flex: 1 0 auto;
      text-align: center;
      border-radius: var(--radius-pill);
      padding: 11px 16px;
      color: #565D67;
      font-weight: 900;
      font-size: 14px;
    }

    .segment-bar a:hover {
      background: var(--color-primary-soft);
      color: var(--color-primary-dark);
    }

    .segment-bar a.active {
      background: var(--color-primary);
      color: #fff;
      box-shadow: 0 12px 24px rgba(242,107,58,.24);
    }

    .card {
      background: var(--color-card);
      border: 1px solid rgba(80,65,45,.10);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      overflow: hidden;
      height: 100%;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(242,107,58,.28);
    }

    .card-pad {
      padding: 26px;
    }

    .index-toolbar {
      background: #fff;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      padding: 18px;
      box-shadow: var(--shadow-soft);
      display: flex;
      gap: 14px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 26px;
    }

    .toolbar-search {
      flex: 1 1 320px;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      border-radius: var(--radius-pill);
      background: var(--color-bg-soft);
      border: 1px solid var(--color-border-cool);
      padding: 0 16px;
      color: var(--color-muted);
      font-weight: 700;
    }

    .toolbar-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .index-letter-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .index-letter {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid var(--color-border);
      font-weight: 900;
      color: #4A4F58;
    }

    .index-letter:hover,
    .index-letter.active {
      background: var(--color-primary);
      color: #fff;
      border-color: var(--color-primary);
      transform: translateY(-2px);
      box-shadow: 0 12px 22px rgba(242,107,58,.22);
    }

    .directory-card {
      padding: 24px;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(180deg, #fff, #FFFCF8);
      border: 1px solid var(--color-border);
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .directory-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 5px;
      background: linear-gradient(180deg, var(--color-primary), rgba(24,169,153,.78));
      opacity: .82;
    }

    .directory-card h3 {
      font-size: 22px;
      margin-bottom: 10px;
      padding-left: 2px;
    }

    .directory-card p {
      margin-bottom: 18px;
    }

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

    .directory-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 13px;
      border-radius: 14px;
      background: rgba(247,241,232,.66);
      color: #4D5662;
      font-weight: 800;
      font-size: 14px;
    }

    .directory-list li span {
      color: var(--color-muted);
      font-size: 12px;
      font-weight: 700;
    }

    .matrix {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
    }

    .matrix-item {
      grid-column: span 4;
      padding: 20px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      background: #fff;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .matrix-item.wide {
      grid-column: span 6;
      background: linear-gradient(135deg, #fff, #FFF0E8);
    }

    .matrix-item:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-soft);
      border-color: rgba(242,107,58,.30);
    }

    .matrix-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .matrix-item h3 {
      font-size: 19px;
      margin-bottom: 8px;
    }

    .matrix-item p {
      font-size: 14px;
      margin-bottom: 14px;
    }

    .arrow-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--color-primary-dark);
      font-weight: 900;
      font-size: 14px;
    }

    .arrow-link::after {
      content: "→";
      transition: transform .22s ease;
    }

    .matrix-item:hover .arrow-link::after,
    .card:hover .arrow-link::after {
      transform: translateX(4px);
    }

    .stat-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 24px;
    }

    .stat-box {
      padding: 20px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border);
      background: #fff;
      box-shadow: var(--shadow-soft);
    }

    .stat-num {
      display: block;
      font-size: 34px;
      line-height: 1;
      font-weight: 900;
      color: var(--color-primary);
      margin-bottom: 8px;
    }

    .stat-box p {
      margin: 0;
      font-size: 14px;
    }

    .guide-flow {
      counter-reset: guide;
      display: grid;
      gap: 16px;
    }

    .guide-step {
      counter-increment: guide;
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 18px;
      align-items: start;
      padding: 22px;
      background: #fff;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      position: relative;
    }

    .guide-step::before {
      content: counter(guide, decimal-leading-zero);
      width: 54px;
      height: 54px;
      border-radius: 18px;
      background: var(--color-primary-soft);
      color: var(--color-primary-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 18px;
    }

    .guide-step h3 {
      font-size: 20px;
      margin-bottom: 8px;
    }

    .guide-step p {
      margin: 0;
    }

    .recommend-panel {
      border-radius: var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(43,39,35,.98), rgba(55,48,42,.96));
      color: #fff;
      padding: clamp(28px, 4vw, 42px);
      box-shadow: 0 22px 52px rgba(43,39,35,.18);
      overflow: hidden;
      position: relative;
    }

    .recommend-panel::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(242,107,58,.22);
    }

    .recommend-panel h2,
    .recommend-panel h3 {
      color: #fff;
    }

    .recommend-panel p {
      color: rgba(255,255,255,.72);
    }

    .compact-list {
      list-style: none;
      padding: 0;
      margin: 22px 0 0;
      display: grid;
      gap: 12px;
    }

    .compact-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
    }

    .compact-list i {
      width: 9px;
      height: 9px;
      margin-top: 9px;
      border-radius: 50%;
      background: var(--color-secondary);
      flex: 0 0 auto;
    }

    .faq-wrap {
      display: grid;
      gap: 14px;
    }

    .faq-item {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: #fff;
      overflow: hidden;
      box-shadow: 0 14px 30px rgba(35,28,20,.05);
    }

    .faq-question {
      width: 100%;
      min-height: 64px;
      padding: 0 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      background: transparent;
      border: 0;
      color: var(--color-heading);
      font-weight: 900;
      text-align: left;
      cursor: pointer;
    }

    .faq-question::after {
      content: "+";
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--color-primary-soft);
      color: var(--color-primary-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex: 0 0 auto;
      transition: transform .22s ease;
    }

    .faq-item.is-active .faq-question::after {
      content: "−";
      transform: rotate(180deg);
    }

    .faq-answer {
      display: none;
      padding: 0 22px 22px;
    }

    .faq-item.is-active .faq-answer {
      display: block;
    }

    .faq-answer p {
      margin: 0;
      color: var(--color-muted);
    }

    .contact-card {
      border-radius: var(--radius-xl);
      background: linear-gradient(135deg, #fff, #FFF4EC);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-soft);
      padding: clamp(26px, 4vw, 42px);
      overflow: hidden;
    }

    .form-card {
      padding: 24px;
      border-radius: var(--radius-lg);
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: 0 14px 34px rgba(35,28,20,.07);
    }

    .form-card label {
      font-weight: 900;
      color: var(--color-heading);
      margin-bottom: 7px;
      font-size: 14px;
    }

    .form-card input,
    .form-card textarea {
      border: 1px solid var(--color-border);
      border-radius: 14px;
      background: #FFFCF8;
      min-height: 48px;
      box-shadow: none;
      padding: 12px 14px;
      color: var(--color-text);
    }

    .form-card textarea {
      min-height: 112px;
      resize: vertical;
    }

    .form-card input:focus,
    .form-card textarea:focus {
      border-color: rgba(242,107,58,.55);
      box-shadow: 0 0 0 4px rgba(242,107,58,.12);
      background: #fff;
    }

    .footer {
      background: var(--color-footer);
      color: #F7F1E8;
      padding: 66px 0 30px;
    }

    .footer .brand {
      margin-bottom: 18px;
    }

    .footer .brand-title {
      color: #fff;
    }

    .footer .brand-subtitle {
      color: var(--color-footer-muted);
    }

    .footer p {
      color: var(--color-footer-muted);
      margin-bottom: 0;
    }

    .footer h3 {
      color: #fff;
      font-size: 17px;
      margin-bottom: 14px;
    }

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

    .footer-links a {
      color: var(--color-footer-muted);
      font-weight: 700;
      font-size: 14px;
    }

    .footer-links a:hover {
      color: #fff;
      transform: translateX(3px);
    }

    .footer-domain {
      color: #fff;
      font-weight: 900;
    }

    .footer-bottom {
      margin-top: 38px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.12);
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      color: var(--color-footer-muted);
      font-size: 14px;
    }

    @media (max-width: 1024px) {
      .nav-wrap {
        flex-wrap: wrap;
        padding: 14px 0;
        gap: 12px;
      }

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

      .chip-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
      }

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

      .header-cta {
        min-height: 40px;
        padding: 11px 16px;
        font-size: 14px;
      }

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

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

      .matrix-item,
      .matrix-item.wide {
        grid-column: span 6;
      }
    }

    @media (max-width: 768px) {
      :root {
        --section-space: var(--section-space-mobile);
      }

      .top-notice {
        display: none;
      }

      .site-container {
        width: min(calc(100% - 24px), var(--container));
      }

      .brand-title {
        font-size: 14px;
      }

      .brand-subtitle {
        display: none;
      }

      .hero {
        padding: 42px 0 36px;
      }

      .hero-panel {
        padding: 24px;
      }

      .hero-copy {
        font-size: 16px;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .segment-bar a {
        flex: 0 0 auto;
      }

      .index-toolbar {
        padding: 14px;
      }

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

      .matrix-item,
      .matrix-item.wide {
        grid-column: auto;
      }

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

      .guide-step {
        grid-template-columns: 1fr;
      }

      .footer {
        padding-top: 52px;
      }

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

    @media (max-width: 520px) {
      .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 13px;
      }

      .brand-mark::before {
        left: 15px;
        top: 12px;
        border-left-width: 12px;
        border-top-width: 8px;
        border-bottom-width: 8px;
      }

      .header-cta {
        width: 100%;
      }

      .nav-chip {
        min-height: 34px;
        padding: 0 13px;
        font-size: 13px;
      }

      .hero h1 {
        font-size: 34px;
      }

      .section-title h2 {
        font-size: 30px;
      }

      .index-console {
        min-height: auto;
        padding: 18px;
      }

      .footer .grid-x > .cell {
        margin-bottom: 24px;
      }
    }