/* roulang page: index */
:root {
      --primary: #0f2b48;
      --primary-dark: #0a1c30;
      --accent: #c5a059;
      --accent-hover: #b38f45;
      --bg-page: #ffffff;
      --bg-muted: #f8fafc;
      --bg-deep: #0b1a2d;
      --text-main: #0f172a;
      --text-body: #334155;
      --text-light: #64748b;
      --border-color: #e2e8f0;
      --radius-base: 12px;
      --radius-lg: 18px;
      --shadow-soft: 0 10px 30px rgba(15, 43, 72, 0.06);
      --shadow-hover: 0 18px 40px rgba(15, 43, 72, 0.12);
      --container: 1240px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
    body { background-color: var(--bg-page); color: var(--text-body); line-height: 1.65; -webkit-font-smoothing: antialiased; }
    a { text-decoration: none; color: inherit; transition: all 0.25s ease; }
    img { max-width: 100%; height: auto; display: block; }
    ul, ol { list-style: none; }
    button, input, select, textarea { font-family: inherit; }

    .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
    .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(197, 160, 89, 0.12); color: var(--accent); border: 1px solid rgba(197, 160, 89, 0.28); }
    .badge-white { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
    .section-title-wrap { text-align: center; max-width: 820px; margin: 0 auto 56px auto; }
    .section-title { font-size: 32px; font-weight: 700; color: var(--text-main); line-height: 1.35; margin-bottom: 16px; letter-spacing: -0.5px; }
    .section-desc { font-size: 16px; color: var(--text-light); line-height: 1.7; }
    .btn { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; padding: 12px 28px; border-radius: 8px; cursor: pointer; transition: all 0.25s ease; border: 1px solid transparent; text-align: center; }
    .btn-accent { background: var(--accent); color: #ffffff; }
    .btn-accent:hover { background: var(--accent-hover); box-shadow: 0 6px 18px rgba(197, 160, 89, 0.35); }
    .btn-primary { background: var(--primary); color: #ffffff; border-color: rgba(255, 255, 255, 0.1); }
    .btn-primary:hover { background: var(--primary-dark); box-shadow: 0 6px 18px rgba(15, 43, 72, 0.25); }
    .btn-outline { background: transparent; border-color: var(--border-color); color: var(--text-body); }
    .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: rgba(15, 43, 72, 0.03); }
    .btn-white { background: #ffffff; color: var(--primary); }
    .btn-white:hover { background: #f1f5f9; }

    /* 顶部导航 */
    .site-header { position: sticky; top: 0; z-index: 1000; background: #ffffff; border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
    .top-bar { background: var(--primary-dark); color: #cbd5e1; font-size: 12px; padding: 8px 0; }
    .top-bar .container { display: flex; justify-content: space-between; align-items: center; }
    .top-bar a { color: #f1f5f9; }
    .main-nav { padding: 14px 0; }
    .nav-wrap { display: flex; align-items: center; justify-content: space-between; }
    .nav-brand { font-size: 20px; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 8px; }
    .nav-brand span { color: var(--accent); }
    .nav-links { display: flex; align-items: center; gap: 28px; }
    .nav-links a { font-size: 15px; font-weight: 500; color: var(--text-body); position: relative; }
    .nav-links a:hover, .nav-links a.active { color: var(--accent); }
    .nav-links a.active::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 2px; background: var(--accent); }
    .nav-actions { display: flex; align-items: center; gap: 14px; }
    .nav-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--primary); cursor: pointer; }

    /* 通用板块与卡片 */
    section { padding: 90px 0; position: relative; }
    .bg-light { background-color: var(--bg-muted); }
    .bg-dark { background-color: var(--bg-deep); color: #f1f5f9; }
    .card { background: #ffffff; border-radius: var(--radius-base); border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

    /* 板块 1: 首屏 Hero */
    .hero-section { position: relative; background: linear-gradient(135deg, rgba(11, 26, 45, 0.88), rgba(15, 43, 72, 0.82)), url('/assets/images/e23ee75f6376a245.png') center/cover no-repeat; padding: 110px 0 100px 0; color: #ffffff; }
    .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
    .hero-content h1 { font-size: 42px; font-weight: 800; line-height: 1.25; margin: 18px 0 20px 0; letter-spacing: -0.5px; }
    .hero-content p { font-size: 17px; line-height: 1.75; color: #cbd5e1; margin-bottom: 34px; }
    .hero-btns { display: flex; gap: 16px; margin-bottom: 40px; flex-wrap: wrap; }
    .hero-trust-bar { display: flex; gap: 24px; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 24px; font-size: 13px; color: #94a3b8; }
    .hero-trust-bar span { display: flex; align-items: center; gap: 6px; }
    .hero-media { position: relative; }
    .hero-image-box { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
    .hero-floating-stat { position: absolute; bottom: -20px; left: -20px; background: rgba(15, 43, 72, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(197, 160, 89, 0.4); padding: 18px 24px; border-radius: var(--radius-base); color: #fff; }
    .hero-floating-stat .num { font-size: 26px; font-weight: 700; color: var(--accent); }

    /* 板块 2: 品牌与智能化架构 */
    .arch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
    .arch-left h2 { font-size: 32px; color: var(--primary); margin-bottom: 18px; line-height: 1.35; }
    .arch-left p { color: var(--text-body); margin-bottom: 24px; font-size: 16px; }
    .arch-specs-box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
    .spec-item { padding: 16px; background: var(--bg-muted); border-radius: 8px; border-left: 3px solid var(--accent); }
    .spec-item strong { display: block; font-size: 18px; color: var(--primary); margin-bottom: 4px; }
    .spec-item span { font-size: 13px; color: var(--text-light); }
    .arch-right { position: relative; border-radius: var(--radius-base); overflow: hidden; border: 1px solid var(--border-color); }

    /* 板块 3: 核心功能优势六宫格 */
    .grid-six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .feature-card { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
    .feature-icon-tag { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .feature-icon { width: 48px; height: 48px; border-radius: 10px; background: rgba(15, 43, 72, 0.06); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--primary); }
    .feature-card h3 { font-size: 20px; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
    .feature-card p { font-size: 14px; color: var(--text-light); line-height: 1.7; }

    /* 板块 4: 服务版本卡片 */
    .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
    .pricing-card { padding: 36px 30px; position: relative; display: flex; flex-direction: column; }
    .pricing-card.featured { border: 2px solid var(--accent); transform: translateY(-8px); box-shadow: 0 16px 40px rgba(197, 160, 89, 0.18); }
    .featured-tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 4px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; }
    .pricing-header { margin-bottom: 24px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; }
    .pricing-name { font-size: 22px; font-weight: 700; color: var(--primary); }
    .pricing-fit { font-size: 13px; color: var(--text-light); margin-top: 6px; }
    .pricing-feats { flex-grow: 1; margin-bottom: 28px; }
    .pricing-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin-bottom: 12px; color: var(--text-body); }
    .pricing-feats li::before { content: "✓"; color: var(--accent); font-weight: bold; }

    /* 板块 5: 高奢场景交互演示 */
    .scene-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
    .scene-steps { display: flex; flex-direction: column; gap: 20px; }
    .step-card { padding: 20px 24px; border-radius: var(--radius-base); border: 1px solid var(--border-color); cursor: pointer; transition: all 0.25s ease; background: #fff; }
    .step-card.active, .step-card:hover { border-color: var(--accent); background: #fdfbf7; transform: translateX(6px); }
    .step-card h4 { font-size: 18px; color: var(--primary); margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
    .step-card p { font-size: 14px; color: var(--text-light); }
    .scene-media { border-radius: var(--radius-base); overflow: hidden; border: 1px solid var(--border-color); box-shadow: var(--shadow-soft); }

    /* 板块 6: 私密服务与尊享理念 (深色底) */
    .philosophy-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
    .philosophy-wrap h2 { font-size: 34px; margin-bottom: 20px; line-height: 1.3; }
    .philosophy-wrap p { color: #94a3b8; font-size: 15px; line-height: 1.8; margin-bottom: 20px; }
    .quote-box { background: rgba(255, 255, 255, 0.05); border-left: 3px solid var(--accent); padding: 24px; border-radius: 0 10px 10px 0; margin-top: 30px; }
    .quote-box p { font-style: italic; color: #e2e8f0; margin-bottom: 8px; font-size: 16px; }
    .quote-author { font-size: 13px; color: var(--accent); font-weight: 600; }
    .philosophy-media { border-radius: var(--radius-base); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); }

    /* 板块 7: 标杆用户故事 */
    .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
    .story-img-wrap { border-radius: var(--radius-base); overflow: hidden; box-shadow: var(--shadow-soft); }
    .story-detail h3 { font-size: 26px; color: var(--primary); margin-bottom: 14px; line-height: 1.4; }
    .story-detail p { font-size: 15px; color: var(--text-body); margin-bottom: 20px; line-height: 1.7; }
    .story-metric { display: flex; gap: 24px; margin-top: 24px; }
    .sm-item { background: var(--bg-muted); padding: 14px 20px; border-radius: 8px; flex: 1; }
    .sm-item .val { font-size: 24px; font-weight: 700; color: var(--primary); }
    .sm-item .lbl { font-size: 12px; color: var(--text-light); }

    /* 板块 8: 运营数据统计条 */
    .stats-bar { background: var(--primary); color: #fff; padding: 60px 0; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
    .stat-card .val { font-size: 38px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
    .stat-card .title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
    .stat-card .desc { font-size: 12px; color: #94a3b8; }

    /* 板块 9: 差异对比表格 */
    .compare-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-base); overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--border-color); }
    .compare-table th, .compare-table td { padding: 18px 24px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 14px; }
    .compare-table th { background: var(--bg-muted); color: var(--primary); font-size: 15px; font-weight: 700; }
    .compare-table th.col-highlight { background: rgba(197, 160, 89, 0.1); color: var(--accent); }
    .compare-table td.col-highlight { background: rgba(197, 160, 89, 0.03); font-weight: 600; color: var(--primary); }

    /* 板块 10: 真实评价网格 */
    .eval-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .eval-card { padding: 30px; display: flex; flex-direction: column; justify-content: space-between; }
    .eval-stars { color: #f59e0b; margin-bottom: 14px; font-size: 14px; }
    .eval-card p { font-size: 14px; color: var(--text-body); line-height: 1.7; margin-bottom: 24px; }
    .eval-profile { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border-color); padding-top: 16px; }
    .eval-avatar { width: 44px; height: 44px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--primary); }
    .eval-meta h5 { font-size: 14px; color: var(--primary); margin-bottom: 2px; }
    .eval-meta span { font-size: 12px; color: var(--text-light); }

    /* 板块 11: 资讯与演进动态 */
    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .news-card { overflow: hidden; display: flex; flex-direction: column; }
    .news-card-body { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
    .news-date { font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
    .news-card h4 { font-size: 18px; color: var(--primary); margin-bottom: 10px; line-height: 1.4; }
    .news-card p { font-size: 13px; color: var(--text-light); line-height: 1.65; margin-bottom: 16px; }
    .news-link { font-size: 13px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 4px; }
    .news-link:hover { color: var(--accent); }

    /* 板块 12: 常见疑虑拆解 FAQ */
    .faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
    .faq-item { border: 1px solid var(--border-color); border-radius: var(--radius-base); background: #fff; overflow: hidden; transition: border-color 0.25s ease; }
    .faq-item.open { border-color: var(--accent); }
    .faq-question { padding: 20px 24px; font-size: 16px; font-weight: 700; color: var(--primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
    .faq-toggle-icon { font-size: 20px; color: var(--accent); transition: transform 0.25s ease; }
    .faq-item.open .faq-toggle-icon { transform: rotate(45deg); }
    .faq-answer { display: none; padding: 0 24px 22px 24px; font-size: 14px; color: var(--text-body); line-height: 1.75; }
    .faq-item.open .faq-answer { display: block; }

    /* 板块 13: 保障与合规承诺条 */
    .guarantee-bar { background: #fdfbf7; border-top: 1px solid rgba(197, 160, 89, 0.2); border-bottom: 1px solid rgba(197, 160, 89, 0.2); padding: 50px 0; }
    .guarantee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .guarantee-item { display: flex; align-items: flex-start; gap: 14px; }
    .g-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(197, 160, 89, 0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
    .guarantee-item h5 { font-size: 15px; color: var(--primary); margin-bottom: 4px; }
    .guarantee-item p { font-size: 12px; color: var(--text-light); line-height: 1.5; }

    /* 预约演示表单区 (锚点) */
    .consult-section { padding: 80px 0; background: var(--bg-muted); }
    .consult-box { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-soft); padding: 48px; max-width: 820px; margin: 0 auto; }
    .consult-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group.full { grid-column: span 2; }
    .form-group label { font-size: 13px; font-weight: 600; color: var(--primary); }
    .form-group input, .form-group select, .form-group textarea { padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.2s ease; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); }

    /* 底部固定转化条 */
    .floating-bar { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; background: rgba(15, 43, 72, 0.94); backdrop-filter: blur(8px); border-top: 1px solid rgba(197, 160, 89, 0.3); padding: 12px 0; color: #fff; display: flex; align-items: center; justify-content: space-between; transform: translateY(0); transition: transform 0.3s ease; }
    .floating-bar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
    .floating-info { display: flex; align-items: center; gap: 24px; font-size: 14px; }
    .floating-info span strong { color: var(--accent); }
    .floating-actions { display: flex; gap: 12px; }

    /* 页脚 Footer */
    .site-footer { background: var(--primary-dark); color: #94a3b8; padding: 70px 0 100px 0; font-size: 13px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 40px; }
    .footer-brand { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 14px; }
    .footer-brand span { color: var(--accent); }
    .footer-col h6 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 16px; }
    .footer-col ul { display: flex; flex-direction: column; gap: 10px; }
    .footer-col ul a:hover { color: #fff; }
    .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }

    /* 响应式样式适配 */
    @media (max-width: 1024px) {
      .hero-grid, .arch-grid, .scene-grid, .philosophy-wrap, .story-grid { grid-template-columns: 1fr; gap: 36px; }
      .grid-six, .pricing-grid, .eval-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
      .guarantee-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 768px) {
      .top-bar { display: none; }
      .nav-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #ffffff; flex-direction: column; padding: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-bottom: 1px solid var(--border-color); align-items: flex-start; gap: 16px; }
      .nav-links.open { display: flex; }
      .nav-toggle { display: block; }
      .hero-content h1 { font-size: 28px; }
      .hero-content p { font-size: 15px; }
      .hero-floating-stat { position: static; margin-top: 16px; }
      .grid-six, .pricing-grid, .eval-grid, .news-grid, .guarantee-grid, .footer-grid { grid-template-columns: 1fr; }
      .consult-form { grid-template-columns: 1fr; }
      .form-group.full { grid-column: span 1; }
      .floating-info span { display: none; }
      .floating-info span:first-child { display: block; }
      .stats-grid { grid-template-columns: 1fr; }
      .section-title { font-size: 26px; }
      .arch-specs-box { grid-template-columns: 1fr; }
    }