/* roulang page: index */
:root {
            --primary-rose: #d63384;
            --primary-dark: #6f1d46;
            --secondary-coral: #fd7e14;
            --accent-warm: #fff0f6;
            --neutral-dark: #1f2421;
            --neutral-gray: #495057;
            --neutral-light: #f8f9fa;
            --border-color: #f1d7e2;
            --shadow-soft: 0 10px 30px rgba(214, 51, 132, 0.08);
            --shadow-hover: 0 16px 36px rgba(214, 51, 132, 0.16);
            --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            --radius-md: 12px;
            --radius-lg: 20px;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
            color: var(--neutral-dark);
            background-color: #ffffff;
            line-height: 1.7;
            margin: 0;
            padding: 0;
        }

        /* 顶部内容频道导航系统 */
        .site-header {
            background: #ffffff;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .header-top {
            padding: 16px 0;
            border-bottom: 1px solid #fceef4;
        }
        .brand-logo {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--primary-rose);
            text-decoration: none;
            letter-spacing: -0.5px;
            display: inline-block;
        }
        .brand-logo:hover {
            color: var(--primary-dark);
        }
        .channel-nav-bar {
            background: #fffdfd;
            overflow-x: auto;
            white-space: nowrap;
            padding: 8px 0;
        }
        .channel-menu {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 24px;
        }
        .channel-menu li a {
            color: var(--neutral-gray);
            font-weight: 500;
            font-size: 0.95rem;
            padding: 8px 4px;
            text-decoration: none;
            position: relative;
            display: inline-block;
            transition: var(--transition-smooth);
        }
        .channel-menu li a.active,
        .channel-menu li a:hover {
            color: var(--primary-rose);
            font-weight: 700;
        }
        .channel-menu li a.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--primary-rose);
            border-radius: 3px;
        }

        /* Hero 创作者风格 */
        .creator-hero {
            background: linear-gradient(rgba(31, 36, 33, 0.72), rgba(111, 29, 70, 0.85)), url('/assets/images/202eaabc78536eed.jpg') center/cover no-repeat;
            color: #ffffff;
            padding: 70px 0 60px 0;
            position: relative;
        }
        .creator-profile {
            display: flex;
            align-items: center;
            gap: 24px;
            margin-bottom: 24px;
        }
        .creator-avatar {
            width: 104px;
            height: 104px;
            border-radius: 50%;
            border: 4px solid #ffffff;
            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
            object-fit: cover;
        }
        .hero-title {
            color: #ffffff;
            font-size: 2.2rem;
            font-weight: 800;
            line-height: 1.25;
            margin: 0 0 10px 0;
        }
        .hero-summary {
            font-size: 1.05rem;
            color: #fceef4;
            max-width: 820px;
            margin-bottom: 28px;
        }
        .creator-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 24px;
        }
        .custom-badge {
            background: rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(8px);
            color: #ffffff;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            border: 1px solid rgba(255,255,255,0.25);
        }

        /* 按钮体系 */
        .btn-prime {
            background-color: var(--primary-rose);
            color: #ffffff;
            font-weight: 600;
            padding: 12px 28px;
            border-radius: 30px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: var(--transition-smooth);
            box-shadow: 0 6px 18px rgba(214, 51, 132, 0.35);
        }
        .btn-prime:hover {
            background-color: #b02167;
            color: #ffffff;
            transform: translateY(-2px);
        }
        .btn-secondary {
            background-color: transparent;
            color: #ffffff;
            border: 2px solid #ffffff;
            font-weight: 600;
            padding: 10px 24px;
            border-radius: 30px;
            text-decoration: none;
            display: inline-block;
            transition: var(--transition-smooth);
            margin-left: 12px;
        }
        .btn-secondary:hover {
            background-color: #ffffff;
            color: var(--primary-dark);
        }

        /* 板块公用 */
        section {
            padding: 60px 0;
        }
        .section-alt {
            background-color: var(--accent-warm);
        }
        .section-header {
            margin-bottom: 40px;
        }
        .section-title {
            font-size: 1.85rem;
            font-weight: 700;
            color: var(--neutral-dark);
            position: relative;
            margin-bottom: 12px;
        }
        .section-desc {
            color: var(--neutral-gray);
            font-size: 1rem;
            max-width: 760px;
            margin: 0;
        }

        /* 卡片基础与变体 */
        .content-card {
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 24px;
            box-shadow: var(--shadow-soft);
            transition: var(--transition-smooth);
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .content-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        .kpi-box {
            background: #ffffff;
            border-radius: var(--radius-md);
            padding: 28px 20px;
            text-align: center;
            border-bottom: 4px solid var(--primary-rose);
            box-shadow: var(--shadow-soft);
        }
        .kpi-num {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--primary-rose);
            margin-bottom: 4px;
        }
        .kpi-label {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--neutral-dark);
            margin-bottom: 6px;
        }
        .kpi-sub {
            font-size: 0.82rem;
            color: #8c8c8c;
            line-height: 1.4;
        }

        /* 矩阵对比表 */
        .comparison-table-wrap {
            background: #ffffff;
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--border-color);
        }
        .custom-table {
            width: 100%;
            margin-bottom: 0;
            border-collapse: collapse;
        }
        .custom-table th {
            background: #fdf0f5;
            color: var(--primary-dark);
            padding: 16px;
            font-weight: 700;
            font-size: 0.95rem;
        }
        .custom-table td {
            padding: 16px;
            border-bottom: 1px solid #f9e8f0;
            color: var(--neutral-gray);
            font-size: 0.9rem;
        }

        /* 时间线里程碑 */
        .milestone-track {
            position: relative;
            padding-left: 32px;
            border-left: 2px dashed var(--primary-rose);
            margin-left: 12px;
        }
        .milestone-item {
            position: relative;
            margin-bottom: 32px;
        }
        .milestone-dot {
            position: absolute;
            left: -39px;
            top: 4px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--primary-rose);
            border: 3px solid #ffffff;
            box-shadow: 0 0 0 2px var(--primary-rose);
        }
        .milestone-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--neutral-dark);
            margin-bottom: 6px;
        }

        /* 图文封面卡片 */
        .gallery-card {
            background: #ffffff;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-soft);
            transition: var(--transition-smooth);
            margin-bottom: 24px;
        }
        .gallery-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }
        .gallery-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            display: block;
        }
        .gallery-card-body {
            padding: 18px;
        }
        .gallery-tag {
            color: var(--primary-rose);
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 6px;
            display: inline-block;
        }
        .gallery-card-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--neutral-dark);
        }

        /* 平台保障徽章列表 */
        .guarantee-pill {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            background: #ffffff;
            padding: 20px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            margin-bottom: 16px;
        }
        .guarantee-num {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--secondary-coral);
            line-height: 1;
        }

        /* 快速问答 */
        .qa-card {
            background: #ffffff;
            padding: 24px;
            border-radius: var(--radius-md);
            border-left: 4px solid var(--primary-rose);
            box-shadow: var(--shadow-soft);
            margin-bottom: 20px;
        }
        .qa-question {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--neutral-dark);
            margin-bottom: 8px;
        }
        .qa-answer {
            color: var(--neutral-gray);
            font-size: 0.95rem;
            margin: 0;
        }

        /* 蓝图试用申请表单区 */
        .apply-wrapper {
            background: linear-gradient(135deg, #fff5f8 0%, #fff 100%);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 40px;
            box-shadow: var(--shadow-soft);
        }
        .form-control-custom {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #dcdcdc;
            border-radius: 8px;
            margin-bottom: 16px;
            font-size: 0.95rem;
        }
        .form-control-custom:focus {
            border-color: var(--primary-rose);
            outline: none;
            box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.15);
        }

        /* 页脚 */
        .site-footer {
            background: #191c1b;
            color: #adb5bd;
            padding: 50px 0 24px 0;
            border-top: 4px solid var(--primary-rose);
        }
        .footer-title {
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 18px;
        }
        .footer-links {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .footer-links li {
            margin-bottom: 10px;
        }
        .footer-links a {
            color: #adb5bd;
            text-decoration: none;
            font-size: 0.9rem;
            transition: var(--transition-smooth);
        }
        .footer-links a:hover {
            color: #ffffff;
            padding-left: 4px;
        }
        .copyright-bar {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #2d3230;
            font-size: 0.85rem;
            text-align: center;
        }

        @media (max-width: 768px) {
            .creator-profile {
                flex-direction: column;
                text-align: center;
            }
            .hero-title {
                font-size: 1.7rem;
            }
            .btn-secondary {
                margin-left: 0;
                margin-top: 10px;
                display: block;
            }
            .apply-wrapper {
                padding: 24px 16px;
            }
        }

/* roulang page: index */
:root {
      --primary: #c94b63;
      --primary-dark: #a23348;
      --primary-light: #fbebed;
      --secondary: #3b2c35;
      --text-main: #272124;
      --text-muted: #6a6267;
      --bg-page: #faf8f8;
      --bg-card: #ffffff;
      --border-color: #eee3e6;
      --radius: 12px;
      --shadow-sm: 0 4px 12px rgba(90, 40, 55, 0.04);
      --shadow-md: 0 10px 24px rgba(90, 40, 55, 0.08);
      --transition: all 0.25s ease-in-out;
    }

    body {
      background-color: var(--bg-page);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      -webkit-font-smoothing: antialiased;
      margin: 0;
      padding: 0;
    }

    a {
      color: var(--primary);
      text-decoration: none;
      transition: var(--transition);
    }
    a:hover, a:focus {
      color: var(--primary-dark);
    }

    .site-header {
      background: #ffffff;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 999;
      box-shadow: var(--shadow-sm);
    }

    .header-brand-row {
      padding: 14px 0 10px;
      border-bottom: 1px solid #f6f0f2;
    }
    .brand-title-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .brand-logo-badge {
      width: 40px;
      height: 40px;
      background: var(--primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-weight: 700;
      font-size: 1.25rem;
      letter-spacing: -1px;
    }
    .brand-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--secondary);
      line-height: 1.2;
    }
    .brand-sub {
      font-size: 0.78rem;
      color: var(--text-muted);
      letter-spacing: 0.5px;
    }

    .header-nav-row {
      padding: 6px 0;
    }
    .channel-menu {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 8px;
    }
    .channel-menu li a {
      display: inline-block;
      padding: 8px 16px;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--secondary);
      border-radius: 20px;
      transition: var(--transition);
    }
    .channel-menu li a:hover,
    .channel-menu li a.active {
      background: var(--primary-light);
      color: var(--primary);
    }

    /* Content Layout */
    .section-wrap {
      padding: 64px 0;
      position: relative;
    }
    .section-wrap.alt-bg {
      background: #ffffff;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .section-head {
      margin-bottom: 36px;
      text-align: left;
    }
    .section-badge {
      display: inline-block;
      padding: 4px 12px;
      background: var(--primary-light);
      color: var(--primary);
      font-size: 0.8rem;
      font-weight: 600;
      border-radius: 6px;
      margin-bottom: 10px;
      letter-spacing: 0.5px;
    }
    .section-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--secondary);
      margin-bottom: 12px;
      line-height: 1.35;
    }
    .section-desc {
      font-size: 0.96rem;
      color: var(--text-muted);
      max-width: 820px;
      line-height: 1.7;
    }

    /* Creator Profile Hero */
    .creator-hero {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 248, 248, 0.95) 100%), url('/assets/images/202eaabc78536eed.jpg') center/cover no-repeat;
      padding: 56px 0 64px;
      border-bottom: 1px solid var(--border-color);
    }
    .creator-profile-card {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid var(--border-color);
      padding: 32px;
      box-shadow: var(--shadow-md);
    }
    .creator-avatar-bar {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }
    .creator-avatar {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      border: 3px solid #fff;
      box-shadow: var(--shadow-sm);
      object-fit: cover;
    }
    .creator-meta h1 {
      font-size: 1.65rem;
      font-weight: 700;
      color: var(--secondary);
      margin-bottom: 6px;
      line-height: 1.3;
    }
    .creator-status {
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 0.88rem;
      color: var(--text-muted);
    }
    .creator-status-tag {
      background: #eef8f1;
      color: #2e7d32;
      padding: 2px 10px;
      border-radius: 20px;
      font-weight: 600;
    }
    .creator-intro-text {
      font-size: 1rem;
      line-height: 1.8;
      color: #4b4146;
      margin-bottom: 28px;
    }
    .creator-hero-action {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }
    .btn-solid-main {
      display: inline-block;
      background: var(--primary);
      color: #ffffff;
      font-weight: 600;
      padding: 12px 28px;
      border-radius: 30px;
      border: none;
      box-shadow: 0 4px 14px rgba(201, 75, 99, 0.35);
      cursor: pointer;
      transition: var(--transition);
    }
    .btn-solid-main:hover {
      background: var(--primary-dark);
      color: #fff;
      box-shadow: 0 6px 18px rgba(201, 75, 99, 0.45);
    }
    .btn-outline-sub {
      display: inline-block;
      background: #ffffff;
      color: var(--secondary);
      border: 1px solid #d5ccd0;
      font-weight: 600;
      padding: 12px 24px;
      border-radius: 30px;
      cursor: pointer;
      transition: var(--transition);
    }
    .btn-outline-sub:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-light);
    }

    /* KPI Grid */
    .kpi-board-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .kpi-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 24px 20px;
      text-align: center;
      box-shadow: var(--shadow-sm);
    }
    .kpi-num {
      font-size: 2.2rem;
      font-weight: 800;
      color: var(--primary);
      line-height: 1.1;
      margin-bottom: 6px;
      font-family: Arial, sans-serif;
    }
    .kpi-label {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--secondary);
      margin-bottom: 6px;
    }
    .kpi-sub {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    /* Matrix Cards */
    .matrix-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .matrix-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 28px;
      transition: var(--transition);
      box-shadow: var(--shadow-sm);
    }
    .matrix-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: #e0cbd2;
    }
    .matrix-card-title {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--secondary);
      margin-bottom: 12px;
    }
    .matrix-card-text {
      font-size: 0.92rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 16px;
    }
    .matrix-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .matrix-tag {
      background: #fbf5f7;
      color: #7b4f5b;
      font-size: 0.76rem;
      padding: 4px 10px;
      border-radius: 4px;
      font-weight: 500;
    }

    /* Comparison Table Card */
    .compare-container {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      margin: 0;
    }
    .compare-table th, .compare-table td {
      padding: 18px 24px;
      font-size: 0.94rem;
      border-bottom: 1px solid #f2e9ec;
      text-align: left;
    }
    .compare-table th {
      background: #fbf5f7;
      color: var(--secondary);
      font-weight: 700;
    }
    .compare-table tr:last-child td {
      border-bottom: none;
    }
    .compare-highlight {
      color: var(--primary);
      font-weight: 600;
    }

    /* Milestone Timeline */
    .milestone-timeline {
      position: relative;
      padding-left: 28px;
      border-left: 2px dashed #e3d2d7;
      margin-left: 12px;
    }
    .milestone-node {
      position: relative;
      margin-bottom: 32px;
    }
    .milestone-node:last-child {
      margin-bottom: 0;
    }
    .milestone-dot {
      position: absolute;
      left: -35px;
      top: 4px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--primary);
      border: 3px solid #fff;
      box-shadow: 0 0 0 2px var(--primary-light);
    }
    .milestone-year {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 4px;
    }
    .milestone-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--secondary);
      margin-bottom: 8px;
    }
    .milestone-desc {
      font-size: 0.92rem;
      color: var(--text-muted);
      line-height: 1.68;
    }

    /* Media Feed Grid */
    .feed-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .feed-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
    }
    .feed-img-holder {
      height: 220px;
      overflow: hidden;
      position: relative;
    }
    .feed-img-holder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .feed-card:hover .feed-img-holder img {
      transform: scale(1.04);
    }
    .feed-content {
      padding: 22px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }
    .feed-title {
      font-size: 1.12rem;
      font-weight: 700;
      color: var(--secondary);
      margin-bottom: 10px;
      line-height: 1.4;
    }
    .feed-summary {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 16px;
      flex-grow: 1;
    }
    .feed-meta {
      font-size: 0.8rem;
      color: #92878d;
      border-top: 1px solid #f6eff1;
      padding-top: 12px;
      display: flex;
      justify-content: space-between;
    }

    /* Guarantee Grid */
    .guarantee-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .guarantee-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 24px;
      text-align: left;
    }
    .guarantee-icon {
      width: 44px;
      height: 44px;
      background: var(--primary-light);
      color: var(--primary);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 1.2rem;
      margin-bottom: 16px;
    }
    .guarantee-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--secondary);
      margin-bottom: 8px;
    }
    .guarantee-text {
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.62;
    }

    /* QA Quick Block */
    .qa-stack {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .qa-item {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 20px 24px;
    }
    .qa-q {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--secondary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .qa-q-mark {
      color: var(--primary);
      font-weight: 800;
    }
    .qa-a {
      font-size: 0.92rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* Download Wall */
    .download-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .download-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow-sm);
    }
    .download-card-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--secondary);
      margin-bottom: 8px;
    }
    .download-card-desc {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 18px;
    }
    .download-format-badge {
      display: inline-block;
      font-size: 0.78rem;
      padding: 2px 8px;
      background: #f4ecf0;
      color: #68525b;
      border-radius: 4px;
      margin-bottom: 16px;
    }

    /* Conversion Form Panel (blueprint compliant) */
    .form-panel-wrap {
      background: linear-gradient(135deg, #ffffff 0%, #fff7f9 100%);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 40px;
      box-shadow: var(--shadow-md);
    }
    .custom-input {
      width: 100%;
      height: 48px;
      border: 1px solid #d9cbcf;
      border-radius: 8px;
      padding: 0 16px;
      font-size: 0.95rem;
      background: #ffffff;
      margin-bottom: 16px;
      outline: none;
      transition: var(--transition);
    }
    .custom-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(201, 75, 99, 0.15);
    }
    .custom-textarea {
      width: 100%;
      height: 100px;
      border: 1px solid #d9cbcf;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 0.95rem;
      background: #ffffff;
      margin-bottom: 18px;
      outline: none;
      resize: vertical;
      transition: var(--transition);
    }
    .custom-textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(201, 75, 99, 0.15);
    }

    /* Site Footer */
    .site-footer {
      background: #251e22;
      color: #b5a9af;
      padding: 56px 0 32px;
      font-size: 0.9rem;
      border-top: 4px solid var(--primary);
    }
    .site-footer h4 {
      color: #ffffff;
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 18px;
    }
    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .footer-links li {
      margin-bottom: 10px;
    }
    .footer-links a {
      color: #bbb0b5;
    }
    .footer-links a:hover {
      color: #ffffff;
    }
    .footer-bottom {
      border-top: 1px solid #3c3237;
      margin-top: 40px;
      padding-top: 24px;
      text-align: center;
      font-size: 0.82rem;
      color: #8c8086;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .kpi-board-grid { grid-template-columns: repeat(2, 1fr); }
      .matrix-grid { grid-template-columns: repeat(2, 1fr); }
      .guarantee-grid { grid-template-columns: repeat(2, 1fr); }
      .feed-grid { grid-template-columns: repeat(2, 1fr); }
      .download-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .section-wrap { padding: 44px 0; }
      .creator-avatar-bar { flex-direction: column; text-align: center; }
      .creator-meta h1 { font-size: 1.4rem; }
      .creator-status { justify-content: center; }
      .creator-hero-action { justify-content: center; }
      .matrix-grid { grid-template-columns: 1fr; }
      .feed-grid { grid-template-columns: 1fr; }
      .guarantee-grid { grid-template-columns: 1fr; }
      .download-grid { grid-template-columns: 1fr; }
      .form-panel-wrap { padding: 24px; }
      .compare-table th, .compare-table td { padding: 12px 14px; font-size: 0.86rem; }
    }
    @media (max-width: 520px) {
      .kpi-board-grid { grid-template-columns: 1fr; }
      .channel-menu { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
    }

/* roulang page: category1 */
:root {
      --primary-rose: #d63384;
      --primary-dark: #6f1d46;
      --secondary-coral: #fd7e14;
      --accent-warm: #fff0f6;
      --neutral-dark: #1f2421;
      --neutral-gray: #495057;
      --neutral-light: #f8f9fa;
      --border-color: #f1d7e2;
      --shadow-soft: 0 10px 30px rgba(214, 51, 132, 0.08);
      --shadow-hover: 0 16px 36px rgba(214, 51, 132, 0.16);
      --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      --radius-md: 12px;
      --radius-lg: 20px;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
      color: var(--neutral-dark);
      background-color: #ffffff;
      line-height: 1.7;
      margin: 0;
      padding: 0;
    }
    .site-header {
      background: #ffffff;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .header-brand-row {
      padding: 16px 0 12px 0;
      border-bottom: 1px solid #fceef4;
    }
    .brand-title-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
    }
    .brand-logo-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, var(--primary-rose), var(--primary-dark));
      color: #ffffff;
      font-size: 1.4rem;
      font-weight: 800;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(214, 51, 132, 0.3);
    }
    .brand-title {
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--primary-dark);
      letter-spacing: -0.3px;
      line-height: 1.3;
      display: block;
    }
    .brand-sub {
      font-size: 0.82rem;
      color: var(--neutral-gray);
      margin-top: 2px;
    }
    .header-nav-row {
      background: #fffdfd;
      overflow-x: auto;
      white-space: nowrap;
      padding: 6px 0;
    }
    .channel-menu {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 22px;
    }
    .channel-menu li a {
      color: var(--neutral-gray);
      font-weight: 500;
      font-size: 0.95rem;
      padding: 8px 4px;
      text-decoration: none;
      position: relative;
      display: inline-block;
      transition: var(--transition-smooth);
    }
    .channel-menu li a.active,
    .channel-menu li a:hover {
      color: var(--primary-rose);
      font-weight: 700;
    }
    .channel-menu li a.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--primary-rose);
      border-radius: 3px;
    }
    .category-hero {
      background: linear-gradient(rgba(31, 36, 33, 0.72), rgba(111, 29, 70, 0.88)), url('/assets/images/504dd92aa2ae3cd7.webp') center/cover no-repeat;
      color: #ffffff;
      padding: 64px 0 54px 0;
    }
    .category-hero h1 {
      font-size: 2.3rem;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 14px;
      line-height: 1.3;
    }
    .category-hero p {
      font-size: 1.05rem;
      color: #fceef4;
      max-width: 820px;
      margin-bottom: 24px;
    }
    .spec-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .spec-pill {
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 0.85rem;
      color: #ffffff;
    }
    section {
      padding: 56px 0;
    }
    .section-alt {
      background-color: var(--accent-warm);
    }
    .section-head {
      margin-bottom: 34px;
    }
    .section-head h2 {
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--neutral-dark);
      margin-bottom: 10px;
    }
    .section-head p {
      color: var(--neutral-gray);
      margin: 0;
      font-size: 0.98rem;
    }
    .metric-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px 20px;
      text-align: center;
      box-shadow: var(--shadow-soft);
      height: 100%;
    }
    .metric-num {
      font-size: 2.1rem;
      font-weight: 800;
      color: var(--primary-rose);
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .metric-title {
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 6px;
    }
    .metric-note {
      font-size: 0.85rem;
      color: var(--neutral-gray);
      margin: 0;
    }
    .gallery-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      transition: var(--transition-smooth);
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .gallery-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }
    .gallery-card-img-wrap {
      position: relative;
      width: 100%;
      padding-top: 133.33%;
      overflow: hidden;
      background-color: #f1d7e2;
    }
    .gallery-card-img-wrap img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .gallery-card:hover .gallery-card-img-wrap img {
      transform: scale(1.04);
    }
    .card-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      background: rgba(31, 36, 33, 0.75);
      backdrop-filter: blur(4px);
      color: #ffffff;
      padding: 4px 10px;
      font-size: 0.75rem;
      border-radius: 12px;
      font-weight: 600;
    }
    .gallery-card-body {
      padding: 18px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .gallery-card-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 8px;
    }
    .gallery-card-desc {
      font-size: 0.88rem;
      color: var(--neutral-gray);
      line-height: 1.6;
      margin-bottom: 14px;
      flex: 1;
    }
    .card-meta-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      border-top: 1px solid #f6e6ee;
      font-size: 0.8rem;
      color: var(--neutral-gray);
    }
    .btn-prime {
      background-color: var(--primary-rose);
      color: #ffffff;
      font-weight: 600;
      padding: 10px 22px;
      border-radius: 24px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: var(--transition-smooth);
    }
    .btn-prime:hover {
      background-color: #b02167;
      color: #ffffff;
    }
    .btn-outline {
      border: 1px solid var(--primary-rose);
      color: var(--primary-rose);
      padding: 6px 14px;
      border-radius: 16px;
      font-size: 0.82rem;
      text-decoration: none;
      transition: var(--transition-smooth);
    }
    .btn-outline:hover {
      background: var(--primary-rose);
      color: #ffffff;
    }
    .compare-table-wrap {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow-x: auto;
      box-shadow: var(--shadow-soft);
    }
    .compare-table {
      width: 100%;
      margin: 0;
      border-collapse: collapse;
    }
    .compare-table th {
      background: #fdf5f8;
      color: var(--primary-dark);
      font-weight: 700;
      padding: 16px;
      text-align: left;
      border-bottom: 2px solid var(--border-color);
    }
    .compare-table td {
      padding: 16px;
      border-bottom: 1px solid #fceef4;
      font-size: 0.92rem;
      color: var(--neutral-dark);
    }
    .compare-table tr:last-child td {
      border-bottom: none;
    }
    .faq-block {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px 24px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-soft);
    }
    .faq-q {
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--neutral-dark);
      margin-bottom: 8px;
    }
    .faq-a {
      font-size: 0.92rem;
      color: var(--neutral-gray);
      margin: 0;
      line-height: 1.7;
    }
    .cta-banner {
      background: linear-gradient(135deg, var(--primary-dark), #4a132e);
      border-radius: var(--radius-lg);
      padding: 44px 36px;
      color: #ffffff;
      box-shadow: var(--shadow-soft);
    }
    .cta-banner h3 {
      font-size: 1.75rem;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 12px;
    }
    .cta-banner p {
      color: #fceef4;
      max-width: 680px;
      margin-bottom: 20px;
      font-size: 0.98rem;
    }
    .site-footer {
      background: #1a1618;
      color: #b9b2b5;
      padding: 56px 0 24px 0;
      border-top: 1px solid #2d2629;
    }
    .site-footer h4 {
      color: #ffffff;
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .footer-links li {
      margin-bottom: 10px;
    }
    .footer-links a {
      color: #b9b2b5;
      text-decoration: none;
      font-size: 0.9rem;
      transition: var(--transition-smooth);
    }
    .footer-links a:hover {
      color: var(--primary-rose);
    }
    .footer-bottom {
      border-top: 1px solid #2d2629;
      margin-top: 36px;
      padding-top: 20px;
      text-align: center;
      font-size: 0.82rem;
    }
    @media (max-width: 768px) {
      .category-hero h1 { font-size: 1.7rem; }
      .section-head h2 { font-size: 1.45rem; }
      .cta-banner { padding: 30px 20px; }
      .cta-banner h3 { font-size: 1.4rem; }
    }

/* roulang page: category2 */
:root {
      --primary-rose: #d63384;
      --primary-dark: #6f1d46;
      --secondary-coral: #fd7e14;
      --accent-warm: #fff0f6;
      --neutral-dark: #1f2421;
      --neutral-gray: #495057;
      --neutral-light: #f8f9fa;
      --border-color: #f1d7e2;
      --shadow-soft: 0 10px 30px rgba(214, 51, 132, 0.08);
      --shadow-hover: 0 16px 36px rgba(214, 51, 132, 0.16);
      --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      --radius-md: 12px;
      --radius-lg: 20px;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
      color: var(--neutral-dark);
      background-color: #ffffff;
      line-height: 1.7;
      margin: 0;
      padding: 0;
    }
    .site-header {
      background: #ffffff;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .header-brand-row {
      padding: 16px 0;
      border-bottom: 1px solid #fceef4;
    }
    .brand-title-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
    }
    .brand-logo-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, var(--primary-rose), var(--secondary-coral));
      color: #ffffff;
      font-size: 1.3rem;
      font-weight: 800;
      border-radius: 10px;
    }
    .brand-title {
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--primary-rose);
      letter-spacing: -0.5px;
      display: block;
      line-height: 1.2;
    }
    .brand-sub {
      font-size: 0.82rem;
      color: var(--neutral-gray);
      margin-top: 2px;
    }
    .header-nav-row {
      background: #fffdfd;
      overflow-x: auto;
      white-space: nowrap;
      padding: 10px 0;
    }
    .channel-menu {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 24px;
    }
    .channel-menu li a {
      color: var(--neutral-gray);
      font-weight: 500;
      font-size: 0.95rem;
      padding: 8px 4px;
      text-decoration: none;
      position: relative;
      display: inline-block;
      transition: var(--transition-smooth);
    }
    .channel-menu li a.active,
    .channel-menu li a:hover {
      color: var(--primary-rose);
      font-weight: 700;
    }
    .channel-menu li a.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--primary-rose);
      border-radius: 3px;
    }

    /* 促销主视觉 Hero 板块 */
    .promo-hero-section {
      background: linear-gradient(rgba(31, 36, 33, 0.78), rgba(111, 29, 70, 0.88)), url('/assets/images/504dd92aa2ae3cd7.webp') center/cover no-repeat;
      color: #ffffff;
      padding: 80px 0 70px;
      position: relative;
    }
    .burst-sticker {
      display: inline-block;
      background: #ff4757;
      color: #ffffff;
      font-weight: 800;
      font-size: 0.82rem;
      padding: 4px 12px;
      border-radius: 4px;
      transform: rotate(-3deg);
      box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
      margin-bottom: 16px;
      letter-spacing: 1px;
    }
    .hero-h1 {
      color: #ffffff;
      font-size: 2.3rem;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 16px;
    }
    .hero-lead {
      color: #fceef4;
      font-size: 1.05rem;
      line-height: 1.8;
      max-width: 760px;
      margin-bottom: 28px;
    }
    .hero-action-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
    }
    .btn-contrast {
      background: #ffc107;
      color: #212529;
      font-weight: 800;
      padding: 14px 34px;
      border-radius: 30px;
      text-decoration: none;
      display: inline-block;
      box-shadow: 0 8px 20px rgba(255, 193, 7, 0.35);
      transition: var(--transition-smooth);
    }
    .btn-contrast:hover {
      background: #ffb300;
      color: #111111;
      transform: translateY(-2px);
    }
    .btn-outline-white {
      background: rgba(255,255,255,0.1);
      color: #ffffff;
      border: 2px solid #ffffff;
      font-weight: 600;
      padding: 12px 28px;
      border-radius: 30px;
      text-decoration: none;
      display: inline-block;
      backdrop-filter: blur(4px);
      transition: var(--transition-smooth);
    }
    .btn-outline-white:hover {
      background: #ffffff;
      color: var(--primary-dark);
    }

    /* 通用板块与排版 */
    section {
      padding: 64px 0;
    }
    .section-alt {
      background-color: var(--accent-warm);
    }
    .section-plain {
      background-color: #ffffff;
    }
    .section-head {
      margin-bottom: 36px;
    }
    .section-title {
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--neutral-dark);
      margin-bottom: 10px;
    }
    .section-desc {
      font-size: 0.98rem;
      color: var(--neutral-gray);
      line-height: 1.7;
    }

    /* 指标看板 */
    .metric-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px;
      text-align: center;
      box-shadow: var(--shadow-soft);
      height: 100%;
    }
    .metric-num {
      font-size: 2.2rem;
      font-weight: 800;
      color: var(--primary-rose);
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .metric-label {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 4px;
    }
    .metric-tip {
      font-size: 0.82rem;
      color: var(--neutral-gray);
      margin: 0;
    }

    /* 服务与专题矩阵 */
    .matrix-box {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      transition: var(--transition-smooth);
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .matrix-box:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }
    .matrix-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
    }
    .matrix-body {
      padding: 22px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .matrix-tag {
      align-self: flex-start;
      background: var(--accent-warm);
      color: var(--primary-rose);
      font-size: 0.78rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 12px;
      margin-bottom: 12px;
    }
    .matrix-h3 {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 10px;
    }
    .matrix-p {
      font-size: 0.88rem;
      color: var(--neutral-gray);
      line-height: 1.6;
      margin-bottom: 16px;
      flex: 1;
    }
    .matrix-foot {
      border-top: 1px solid #f6e5ed;
      padding-top: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.82rem;
      color: #8c8288;
    }

    /* 成果对比表单式视觉 */
    .compare-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .compare-panel {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 32px;
      box-shadow: var(--shadow-soft);
    }
    .compare-panel.highlight {
      border: 2px solid var(--primary-rose);
      background: linear-gradient(180deg, #ffffff 0%, #fff7fb 100%);
    }
    .compare-title {
      font-size: 1.25rem;
      font-weight: 800;
      margin-bottom: 18px;
    }
    .compare-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .compare-list li {
      position: relative;
      padding-left: 26px;
      margin-bottom: 14px;
      font-size: 0.92rem;
      line-height: 1.6;
    }
    .compare-list li::before {
      content: '✓';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--primary-rose);
      font-weight: 800;
    }

    /* 资讯列表 */
    .news-item {
      display: flex;
      gap: 20px;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 16px;
      margin-bottom: 18px;
      box-shadow: var(--shadow-soft);
      transition: var(--transition-smooth);
    }
    .news-item:hover {
      box-shadow: var(--shadow-hover);
    }
    .news-thumb {
      width: 140px;
      height: 100px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
    }
    .news-info {
      flex: 1;
    }
    .news-heading {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 6px;
    }
    .news-desc {
      font-size: 0.85rem;
      color: var(--neutral-gray);
      margin: 0 0 8px;
      line-height: 1.5;
    }
    .news-meta {
      font-size: 0.78rem;
      color: #999;
    }

    /* 保障与问答 */
    .faq-block {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px 24px;
      margin-bottom: 16px;
    }
    .faq-block h4 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 8px;
    }
    .faq-block p {
      font-size: 0.9rem;
      color: var(--neutral-gray);
      margin: 0;
      line-height: 1.7;
    }

    /* 转化表单 */
    .lead-box {
      background: linear-gradient(135deg, #44142d, #1c0a13);
      color: #ffffff;
      border-radius: var(--radius-lg);
      padding: 44px;
      box-shadow: var(--shadow-hover);
    }
    .lead-box h3 {
      color: #ffffff;
      font-size: 1.7rem;
      font-weight: 800;
      margin-bottom: 12px;
    }
    .lead-input {
      border-radius: 24px;
      padding: 12px 18px;
      height: 48px;
      border: 1px solid rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.08);
      color: #ffffff;
    }
    .lead-input:focus {
      background: rgba(255,255,255,0.15);
      border-color: var(--primary-rose);
    }

    /* 页脚标准 */
    .site-footer {
      background: #171215;
      color: #c9c0c5;
      padding: 60px 0 30px;
      border-top: 4px solid var(--primary-rose);
    }
    .site-footer h4 {
      color: #ffffff;
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 18px;
    }
    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .footer-links li {
      margin-bottom: 10px;
    }
    .footer-links a {
      color: #c9c0c5;
      text-decoration: none;
      font-size: 0.92rem;
      transition: var(--transition-smooth);
    }
    .footer-links a:hover {
      color: var(--primary-rose);
    }
    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin-top: 40px;
      padding-top: 24px;
      text-align: center;
      font-size: 0.82rem;
      color: #7d757a;
    }

    @media (max-width: 768px) {
      .compare-wrap {
        grid-template-columns: 1fr;
      }
      .news-item {
        flex-direction: column;
      }
      .news-thumb {
        width: 100%;
        height: 160px;
      }
      .hero-h1 {
        font-size: 1.8rem;
      }
      .lead-box {
        padding: 24px;
      }
    }

/* roulang page: category3 */
:root {
      --primary-rose: #d63384;
      --primary-dark: #6f1d46;
      --secondary-coral: #fd7e14;
      --accent-warm: #fff0f6;
      --neutral-dark: #1f2421;
      --neutral-gray: #495057;
      --neutral-light: #f8f9fa;
      --border-color: #f1d7e2;
      --shadow-soft: 0 10px 30px rgba(214, 51, 132, 0.08);
      --shadow-hover: 0 16px 36px rgba(214, 51, 132, 0.16);
      --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      --radius-md: 12px;
      --radius-lg: 20px;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
      color: var(--neutral-dark);
      background-color: #ffffff;
      line-height: 1.7;
      margin: 0;
      padding: 0;
    }
    .site-header {
      background: #ffffff;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .header-brand-row {
      padding: 16px 0;
      border-bottom: 1px solid #fceef4;
    }
    .brand-title-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
    .brand-logo-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      background: linear-gradient(135deg, var(--primary-rose), var(--primary-dark));
      color: #ffffff;
      font-size: 1.3rem;
      font-weight: 800;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(214, 51, 132, 0.3);
    }
    .brand-title {
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--primary-rose);
      line-height: 1.2;
      display: block;
    }
    .brand-sub {
      font-size: 0.82rem;
      color: var(--neutral-gray);
      margin-top: 3px;
    }
    .header-nav-row {
      background: #fffdfd;
      overflow-x: auto;
      white-space: nowrap;
      padding: 8px 0;
    }
    .channel-menu {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 24px;
    }
    .channel-menu li a {
      color: var(--neutral-gray);
      font-weight: 500;
      font-size: 0.95rem;
      padding: 8px 4px;
      text-decoration: none;
      position: relative;
      display: inline-block;
      transition: var(--transition-smooth);
    }
    .channel-menu li a.active,
    .channel-menu li a:hover {
      color: var(--primary-rose);
      font-weight: 700;
    }
    .channel-menu li a.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--primary-rose);
      border-radius: 3px;
    }
    .focus-hero-panel {
      background: linear-gradient(rgba(31, 36, 33, 0.78), rgba(111, 29, 70, 0.88)), url('/assets/images/504dd92aa2ae3cd7.webp') center/cover no-repeat;
      color: #ffffff;
      padding: 65px 0 55px;
    }
    .focus-hero-panel h1 {
      color: #ffffff;
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 16px;
    }
    .focus-hero-panel p {
      font-size: 1.05rem;
      color: #fceef4;
      max-width: 820px;
      margin-bottom: 24px;
    }
    .metric-badge-box {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 28px;
    }
    .metric-tag {
      background: rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(8px);
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 0.85rem;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .btn-prime {
      background-color: var(--primary-rose);
      color: #ffffff;
      font-weight: 600;
      padding: 12px 28px;
      border-radius: 30px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: var(--transition-smooth);
      box-shadow: 0 6px 18px rgba(214, 51, 132, 0.35);
    }
    .btn-prime:hover {
      background-color: #b02167;
      color: #ffffff;
      transform: translateY(-2px);
    }
    .btn-secondary {
      background-color: transparent;
      color: #ffffff;
      border: 2px solid #ffffff;
      font-weight: 600;
      padding: 10px 24px;
      border-radius: 30px;
      text-decoration: none;
      display: inline-block;
      transition: var(--transition-smooth);
      margin-left: 12px;
    }
    .btn-secondary:hover {
      background-color: #ffffff;
      color: var(--primary-dark);
    }
    section {
      padding: 55px 0;
    }
    .section-alt {
      background-color: var(--accent-warm);
    }
    .section-header {
      margin-bottom: 35px;
    }
    .section-title {
      font-size: 1.85rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 10px;
    }
    .section-desc {
      color: var(--neutral-gray);
      font-size: 1rem;
      max-width: 760px;
      margin: 0;
    }
    .content-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px;
      box-shadow: var(--shadow-soft);
      transition: var(--transition-smooth);
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .content-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }
    .card-thumb {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 18px;
    }
    .card-meta-pill {
      display: inline-block;
      background: #fceef4;
      color: var(--primary-rose);
      font-size: 0.78rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      margin-bottom: 12px;
      width: fit-content;
    }
    .card-head {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 10px;
    }
    .card-copy {
      font-size: 0.92rem;
      color: var(--neutral-gray);
      line-height: 1.65;
      flex-grow: 1;
    }
    .kpi-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px dashed var(--border-color);
      padding-top: 14px;
      margin-top: 16px;
      font-size: 0.85rem;
      color: var(--neutral-gray);
    }
    .kpi-val {
      font-weight: 700;
      color: var(--primary-dark);
    }
    .matrix-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: #ffffff;
    }
    .matrix-table th {
      background-color: #fae4ee;
      color: var(--neutral-dark);
      font-weight: 700;
      padding: 16px;
      text-align: left;
      font-size: 0.95rem;
    }
    .matrix-table td {
      padding: 16px;
      border-top: 1px solid var(--border-color);
      font-size: 0.92rem;
      color: var(--neutral-gray);
    }
    .matrix-table tr:hover td {
      background-color: #fffafc;
    }
    .compare-box {
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px;
      background: #ffffff;
      height: 100%;
    }
    .compare-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .badge-bad {
      background: #ffe3e3;
      color: #c92a2a;
    }
    .badge-good {
      background: #e6fcf5;
      color: #0ca678;
    }
    .timeline-node {
      border-left: 2px solid var(--primary-rose);
      padding-left: 20px;
      position: relative;
      margin-bottom: 28px;
    }
    .timeline-node::before {
      content: '';
      position: absolute;
      left: -7px;
      top: 6px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--primary-rose);
    }
    .timeline-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 6px;
    }
    .faq-accordion-item {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 16px;
    }
    .faq-q {
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--neutral-dark);
      margin-bottom: 8px;
    }
    .faq-a {
      color: var(--neutral-gray);
      font-size: 0.95rem;
      line-height: 1.7;
      margin: 0;
    }
    .site-footer {
      background-color: #1a1618;
      color: #cccccc;
      padding: 60px 0 25px;
      border-top: 4px solid var(--primary-rose);
    }
    .site-footer h4 {
      color: #ffffff;
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 18px;
    }
    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .footer-links li {
      margin-bottom: 10px;
    }
    .footer-links a {
      color: #bbbbbb;
      text-decoration: none;
      font-size: 0.92rem;
      transition: var(--transition-smooth);
    }
    .footer-links a:hover {
      color: var(--primary-rose);
    }
    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      margin-top: 40px;
      padding-top: 20px;
      text-align: center;
      font-size: 0.85rem;
      color: #888888;
    }
    @media print, screen and (max-width: 63.99875em) {
      .header-nav-row {
        padding: 6px 0;
      }
      .channel-menu {
        gap: 16px;
      }
    }
    @media screen and (max-width: 39.99875em) {
      .focus-hero-panel h1 {
        font-size: 1.75rem;
      }
      .btn-secondary {
        margin-left: 0;
        margin-top: 12px;
      }
    }

/* roulang page: category4 */
:root {
      --primary-rose: #d63384;
      --primary-dark: #6f1d46;
      --secondary-coral: #fd7e14;
      --accent-warm: #fff0f6;
      --neutral-dark: #1f2421;
      --neutral-gray: #495057;
      --neutral-light: #f8f9fa;
      --border-color: #f1d7e2;
      --shadow-soft: 0 10px 30px rgba(214, 51, 132, 0.08);
      --shadow-hover: 0 16px 36px rgba(214, 51, 132, 0.16);
      --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      --radius-md: 12px;
      --radius-lg: 20px;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
      color: var(--neutral-dark);
      background-color: #ffffff;
      line-height: 1.7;
      margin: 0;
      padding: 0;
    }
    .site-header {
      background: #ffffff;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .header-brand-row {
      padding: 16px 0;
      border-bottom: 1px solid #fceef4;
    }
    .brand-title-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
    .brand-logo-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, var(--primary-rose), var(--primary-dark));
      color: #ffffff;
      font-weight: 800;
      font-size: 1.3rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(214, 51, 132, 0.25);
    }
    .brand-title {
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--primary-rose);
      line-height: 1.2;
      display: block;
    }
    .brand-sub {
      font-size: 0.85rem;
      color: var(--neutral-gray);
      margin-top: 2px;
    }
    .header-nav-row {
      background: #fffdfd;
      overflow-x: auto;
      white-space: nowrap;
      padding: 8px 0;
    }
    .channel-menu {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 24px;
    }
    .channel-menu li a {
      color: var(--neutral-gray);
      font-weight: 500;
      font-size: 0.95rem;
      padding: 8px 4px;
      text-decoration: none;
      position: relative;
      display: inline-block;
      transition: var(--transition-smooth);
    }
    .channel-menu li a.active,
    .channel-menu li a:hover {
      color: var(--primary-rose);
      font-weight: 700;
    }
    .channel-menu li a.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--primary-rose);
      border-radius: 3px;
    }
    .subhero-soft {
      background: linear-gradient(135deg, rgba(255, 240, 246, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%), url('/assets/images/504dd92aa2ae3cd7.webp') center/cover no-repeat;
      padding: 60px 0 54px;
      border-bottom: 1px solid var(--border-color);
    }
    .hero-kicker {
      display: inline-block;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--primary-rose);
      background: #ffffff;
      padding: 4px 14px;
      border-radius: 20px;
      border: 1px solid var(--border-color);
      margin-bottom: 14px;
      letter-spacing: 0.5px;
    }
    .hero-display-title {
      font-size: 2.3rem;
      font-weight: 800;
      color: var(--neutral-dark);
      line-height: 1.3;
      margin-bottom: 16px;
    }
    .hero-lead {
      font-size: 1.05rem;
      color: var(--neutral-gray);
      line-height: 1.8;
      max-width: 820px;
      margin-bottom: 24px;
    }
    .hero-pill-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .hero-pill {
      background: #ffffff;
      border: 1px solid var(--border-color);
      padding: 6px 16px;
      border-radius: 30px;
      font-size: 0.85rem;
      color: var(--neutral-gray);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    }
    section.flow-section {
      padding: 56px 0;
      border-bottom: 1px solid #f6e6ee;
    }
    .section-tint {
      background-color: var(--accent-warm);
    }
    .head-lead-block {
      margin-bottom: 34px;
    }
    .head-lead-block h2 {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 8px;
    }
    .head-lead-block p {
      font-size: 0.98rem;
      color: var(--neutral-gray);
      margin: 0;
    }
    .metric-badge-card {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px 20px;
      text-align: center;
      box-shadow: var(--shadow-soft);
      height: 100%;
      transition: var(--transition-smooth);
    }
    .metric-badge-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }
    .metric-number {
      font-size: 2rem;
      font-weight: 800;
      color: var(--primary-rose);
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .metric-name {
      font-weight: 700;
      color: var(--neutral-dark);
      font-size: 1rem;
      margin-bottom: 6px;
    }
    .metric-note {
      font-size: 0.85rem;
      color: var(--neutral-gray);
      margin: 0;
    }
    .gallery-tile {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: var(--transition-smooth);
    }
    .gallery-tile:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }
    .gallery-img-wrap {
      position: relative;
      width: 100%;
      height: 240px;
      overflow: hidden;
      background: #ebdce2;
    }
    .gallery-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .gallery-tile:hover .gallery-img-wrap img {
      transform: scale(1.04);
    }
    .gallery-tag-float {
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(31, 36, 33, 0.75);
      color: #ffffff;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .gallery-info {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .gallery-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 8px;
    }
    .gallery-text {
      font-size: 0.9rem;
      color: var(--neutral-gray);
      flex: 1;
      margin-bottom: 16px;
      line-height: 1.6;
    }
    .gallery-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #f6e8ee;
      padding-top: 12px;
      font-size: 0.82rem;
      color: var(--neutral-gray);
    }
    .step-ribbon {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px;
      margin-bottom: 18px;
      transition: var(--transition-smooth);
    }
    .step-ribbon:hover {
      border-color: var(--primary-rose);
      box-shadow: var(--shadow-soft);
    }
    .step-num {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--primary-rose);
      margin-bottom: 4px;
    }
    .step-head {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 6px;
    }
    .step-desc {
      font-size: 0.92rem;
      color: var(--neutral-gray);
      margin: 0;
    }
    .quote-box {
      border-left: 4px solid var(--primary-rose);
      background: #ffffff;
      padding: 20px 24px;
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      box-shadow: var(--shadow-soft);
      height: 100%;
    }
    .quote-box blockquote {
      margin: 0 0 10px;
      font-size: 1.05rem;
      color: var(--neutral-dark);
      font-weight: 600;
      line-height: 1.6;
    }
    .quote-box cite {
      font-size: 0.85rem;
      color: var(--primary-dark);
      font-style: normal;
      font-weight: 700;
    }
    .download-strip {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px 24px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }
    .strip-main h4 {
      margin: 0 0 4px;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--neutral-dark);
    }
    .strip-main p {
      margin: 0;
      font-size: 0.88rem;
      color: var(--neutral-gray);
    }
    .btn-act {
      background-color: var(--primary-rose);
      color: #ffffff;
      font-weight: 600;
      padding: 10px 24px;
      border-radius: 24px;
      text-decoration: none;
      display: inline-block;
      font-size: 0.9rem;
      transition: var(--transition-smooth);
    }
    .btn-act:hover {
      background-color: var(--primary-dark);
      color: #ffffff;
      transform: translateY(-2px);
    }
    .faq-block-item {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 22px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-soft);
    }
    .faq-block-item h3 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--neutral-dark);
      margin-bottom: 8px;
    }
    .faq-block-item p {
      font-size: 0.9rem;
      color: var(--neutral-gray);
      margin: 0;
      line-height: 1.7;
    }
    .site-footer {
      background: #1f2421;
      color: #e9ecef;
      padding: 60px 0 24px;
      font-size: 0.92rem;
    }
    .site-footer h4 {
      color: #ffffff;
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 18px;
    }
    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .footer-links li {
      margin-bottom: 10px;
    }
    .footer-links li a {
      color: #ced4da;
      text-decoration: none;
      transition: var(--transition-smooth);
    }
    .footer-links li a:hover {
      color: var(--primary-rose);
      padding-left: 4px;
    }
    .footer-bottom {
      border-top: 1px solid #343a40;
      margin-top: 40px;
      padding-top: 24px;
      text-align: center;
      color: #adb5bd;
      font-size: 0.85rem;
    }
    @media screen and (max-width: 768px) {
      .hero-display-title {
        font-size: 1.75rem;
      }
      .gallery-img-wrap {
        height: 200px;
      }
      .download-strip {
        flex-direction: column;
        align-items: flex-start;
      }
      .channel-menu {
        gap: 16px;
      }
    }