/* roulang page: index */
:root {
      --color-primary: #141414;
      --color-primary-light: #1e1e1e;
      --color-accent: #c9a86c;
      --color-accent-hover: #b8935a;
      --color-bg: #f8f6f2;
      --color-bg-alt: #f0ece5;
      --color-text: #222222;
      --color-text-light: #666666;
      --color-text-on-dark: #f5f5f5;
      --color-border: #e5e0d8;
      --color-white: #ffffff;
      --radius: 14px;
      --radius-sm: 8px;
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
      --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
      --shadow-lg: 0 16px 40px rgba(0,0,0,0.12);
      --font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
      --max-width: 1200px;
      --nav-height: 70px;
      --transition: 0.25s ease;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height:1.6; }
    img { max-width:100%; display:block; }
    a { text-decoration:none; color:inherit; transition: color var(--transition); }
    button { font-family:inherit; cursor:pointer; border:none; background:none; }
    .container { max-width: var(--max-width); margin:0 auto; padding:0 24px; }

    /* Header */
    .site-header { position: sticky; top:0; z-index:1000; background: var(--color-primary); color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,0.05); }
    .nav-inner { display:flex; align-items:center; justify-content:space-between; height: var(--nav-height); }
    .logo { font-size:1.2rem; font-weight:700; letter-spacing:0.5px; color:#fff; }
    .logo a { color:#fff; display:flex; align-items:center; gap:8px; }
    .logo .logo-mark { width:32px; height:32px; background:var(--color-accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:var(--color-primary); font-weight:700; }
    .nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
    .nav-links a { color:rgba(255,255,255,0.85); font-size:0.95rem; padding:8px 0; position:relative; }
    .nav-links a.active, .nav-links a:hover { color:#fff; }
    .nav-links a.active::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--color-accent); }
    .nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
    .nav-toggle span { width:24px; height:2px; background:#fff; transition: transform var(--transition), opacity var(--transition); }

    /* Hero */
    .hero { position:relative; min-height: 560px; display:flex; align-items:center; padding:80px 0; background: url('/assets/images/backpic/back-1.jpg') center/cover no-repeat; color:#fff; }
    .hero::before { content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(20,20,20,0.85) 0%, rgba(20,20,20,0.55) 60%, rgba(20,20,20,0.35) 100%); }
    .hero .container { position:relative; z-index:1; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:40px; align-items:center; }
    .hero-profile { display:flex; flex-direction:column; gap:16px; }
    .hero-avatar { width:96px; height:96px; border-radius:50%; border:3px solid var(--color-accent); overflow:hidden; margin-bottom:8px; }
    .hero-avatar img { width:100%; height:100%; object-fit:cover; }
    .hero-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.2); backdrop-filter:blur(8px); padding:6px 12px; border-radius:20px; font-size:0.85rem; color:#fff; width:fit-content; }
    .hero-title { font-size:2.2rem; line-height:1.3; font-weight:700; margin-bottom:8px; }
    .hero-desc { font-size:1rem; max-width:540px; color:rgba(255,255,255,0.9); }
    .hero-actions { display:flex; gap:16px; margin-top:16px; flex-wrap:wrap; }
    .btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; border-radius:30px; font-size:0.95rem; font-weight:600; transition: all var(--transition); white-space:nowrap; }
    .btn-primary { background: var(--color-accent); color: var(--color-primary); }
    .btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201,168,108,0.4); }
    .btn-outline-light { border:1px solid rgba(255,255,255,0.6); color:#fff; background:transparent; }
    .btn-outline-light:hover { background:rgba(255,255,255,0.1); border-color:#fff; }
    .hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
    .stat-card { background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius); padding:20px 16px; text-align:center; }
    .stat-number { font-size:1.6rem; font-weight:700; color:var(--color-accent); }
    .stat-label { font-size:0.85rem; color:rgba(255,255,255,0.85); margin-top:4px; }

    /* Sections */
    .section { padding:80px 0; }
    .section-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:40px; gap:20px; flex-wrap:wrap; }
    .section-title { font-size:1.8rem; font-weight:700; line-height:1.3; max-width:600px; }
    .section-desc { font-size:1rem; color:var(--color-text-light); max-width:500px; }

    /* Directory */
    .directory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
    .dir-card { background:var(--color-white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); }
    .dir-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
    .dir-card img { width:100%; height:160px; object-fit:cover; }
    .dir-card-body { padding:16px; }
    .dir-card h3 { font-size:1.1rem; margin-bottom:6px; }
    .dir-card p { font-size:0.9rem; color:var(--color-text-light); }

    /* Value Points */
    .value-points { background: var(--color-bg-alt); }
    .value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px; }
    .value-item { position:relative; padding:24px; background:var(--color-white); border-radius:var(--radius); box-shadow:var(--shadow-sm); border-left:4px solid var(--color-accent); }
    .value-item .number { font-size:2rem; font-weight:700; color:var(--color-accent); margin-bottom:12px; }
    .value-item h3 { margin-bottom:8px; font-size:1.2rem; }
    .value-item p { color:var(--color-text-light); }

    /* Gallery */
    .gallery { background: var(--color-primary); color:#fff; }
    .gallery .section-title { color:#fff; }
    .gallery .section-desc { color:rgba(255,255,255,0.7); }
    .gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .gallery-item { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
    .gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s ease; }
    .gallery-item:hover img { transform:scale(1.05); }
    .gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%); opacity:0; transition: opacity var(--transition); display:flex; align-items:flex-end; padding:20px; }
    .gallery-item:hover .gallery-overlay { opacity:1; }
    .gallery-overlay h3 { color:#fff; font-size:1.1rem; }

    /* Scenarios */
    .scenario-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
    .scenario-card { background:var(--color-white); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
    .scenario-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
    .scenario-card h3 { font-size:1.2rem; margin-bottom:12px; }
    .scenario-card p { color:var(--color-text-light); margin-bottom:16px; }
    .link-arrow { color:var(--color-accent); font-weight:600; }

    /* FAQ */
    .faq-list { max-width:800px; }
    .faq-item { background:var(--color-white); border-radius:var(--radius-sm); margin-bottom:12px; box-shadow:var(--shadow-sm); overflow:hidden; }
    .faq-question { width:100%; text-align:left; padding:20px 24px; font-size:1rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; background:none; border:none; cursor:pointer; color:var(--color-text); }
    .faq-question::after { content:"+"; font-size:1.4rem; transition: transform var(--transition); color:var(--color-accent); }
    .faq-item.open .faq-question::after { transform:rotate(45deg); }
    .faq-answer { padding:0 24px; max-height:0; overflow:hidden; transition: max-height 0.3s ease, padding 0.3s ease; color:var(--color-text-light); }
    .faq-item.open .faq-answer { max-height:200px; padding:0 24px 20px; }

    /* News */
    .news-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; }
    .news-list { list-style:none; }
    .news-list li { padding:18px 0; border-bottom:1px solid var(--color-border); display:flex; flex-direction:column; gap:6px; }
    .news-list a { font-size:1.05rem; font-weight:600; color:var(--color-text); }
    .news-list a:hover { color:var(--color-accent); }
    .news-meta { font-size:0.85rem; color:var(--color-text-light); display:flex; gap:12px; }
    .news-side { background:var(--color-bg-alt); border-radius:var(--radius); padding:24px; }
    .news-side h3 { margin-bottom:16px; }
    .news-side-card { display:flex; gap:12px; margin-bottom:16px; background:var(--color-white); border-radius:var(--radius-sm); padding:12px; align-items:center; }
    .news-side-card img { width:80px; height:60px; object-fit:cover; border-radius:6px; }
    .news-side-card .side-info h4 { font-size:0.95rem; margin-bottom:4px; }
    .news-side-card .side-info p { font-size:0.8rem; color:var(--color-text-light); }

    /* Lead Form */
    .lead-form { position:relative; padding:100px 0; background:url('/assets/images/backpic/back-2.webp') center/cover no-repeat; color:#fff; }
    .lead-form::before { content:""; position:absolute; inset:0; background:rgba(20,20,20,0.8); }
    .lead-form .container { position:relative; z-index:1; max-width:600px; text-align:center; }
    .lead-form h2 { margin-bottom:12px; font-size:1.8rem; }
    .lead-form p { margin-bottom:28px; color:rgba(255,255,255,0.85); }
    .form-group { margin-bottom:16px; }
    .form-group input { width:100%; padding:14px 18px; border-radius:30px; border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.1); color:#fff; font-size:1rem; outline:none; transition: border-color var(--transition); }
    .form-group input::placeholder { color:rgba(255,255,255,0.6); }
    .form-group input:focus { border-color:var(--color-accent); }
    .form-privacy { font-size:0.8rem; color:rgba(255,255,255,0.6); margin-top:12px; }

    /* Fixed CTA */
    .fixed-cta { position:fixed; bottom:0; left:0; right:0; z-index:999; background:var(--color-primary); color:#fff; padding:12px 24px; display:flex; align-items:center; justify-content:center; gap:16px; box-shadow:0 -4px 20px rgba(0,0,0,0.2); transform:translateY(100%); transition:transform 0.3s ease; }
    .fixed-cta.show { transform:translateY(0); }
    .fixed-cta p { margin:0; font-size:0.9rem; }
    .fixed-cta .btn { padding:10px 20px; }

    /* Footer */
    .site-footer { background:var(--color-primary); color:rgba(255,255,255,0.8); padding:60px 0 30px; }
    .footer-inner { display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
    .footer-logo { font-size:1.4rem; font-weight:700; color:#fff; }
    .footer-links { display:flex; gap:24px; list-style:none; }
    .footer-links a { color:rgba(255,255,255,0.8); }
    .footer-links a:hover { color:var(--color-accent); }
    .footer-copy { font-size:0.85rem; color:rgba(255,255,255,0.5); }

    /* Responsive */
    @media (max-width: 1024px) {
      .directory-grid { grid-template-columns:repeat(2,1fr); }
      .gallery-grid { grid-template-columns:repeat(2,1fr); }
      .scenario-grid { grid-template-columns:repeat(2,1fr); }
      .hero .container { grid-template-columns:1fr 1fr; gap:30px; }
    }
    @media (max-width: 768px) {
      .nav-links { position:fixed; top:var(--nav-height); left:0; right:0; background:var(--color-primary); flex-direction:column; align-items:center; gap:0; padding:20px 0; transform:translateY(-100%); transition: transform 0.3s ease; opacity:0; pointer-events:none; }
      .nav-links.open { transform:translateY(0); opacity:1; pointer-events:auto; }
      .nav-links li { width:100%; text-align:center; }
      .nav-links a { display:block; padding:14px 0; }
      .nav-toggle { display:flex; }
      .hero { min-height:auto; padding:60px 0; }
      .hero .container { grid-template-columns:1fr; }
      .hero-stats { grid-template-columns:repeat(3,1fr); }
      .hero-title { font-size:1.8rem; }
      .value-grid { grid-template-columns:1fr; }
      .news-grid { grid-template-columns:1fr; }
      .gallery-grid { grid-template-columns:1fr; }
      .scenario-grid { grid-template-columns:1fr; }
      .directory-grid { grid-template-columns:1fr; }
      .section { padding:60px 0; }
      .section-header { flex-direction:column; align-items:flex-start; }
    }
    @media (max-width: 520px) {
      .container { padding:0 16px; }
      .hero-stats { grid-template-columns:1fr 1fr 1fr; gap:8px; }
      .stat-card { padding:12px 8px; }
      .stat-number { font-size:1.2rem; }
      .hero-actions { flex-direction:column; gap:12px; }
      .btn { width:100%; }
      .fixed-cta { flex-direction:column; gap:10px; padding:12px 16px; text-align:center; }
    }