/* roulang page: index */
:root {
      --primary: #1E40AF;
      --primary-hover: #1D4ED8;
      --accent: #0EA5E9;
      --accent-glow: #6366F1;
      --bg-main: #FFFFFF;
      --bg-alt: #F8FAFC;
      --bg-dark: #0B132B;
      --bg-card: #FFFFFF;
      --text-main: #0F172A;
      --text-muted: #334155;
      --text-light: #64748B;
      --border-color: rgba(226, 232, 240, 0.85);
      --card-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 10px 15px -3px rgba(15, 23, 42, 0.08);
      --card-shadow-hover: 0 20px 25px -5px rgba(15, 23, 42, 0.12);
      --radius-sm: 6px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --transition: all 0.28s ease-in-out;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-main);
      color: var(--text-main);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    a { text-decoration: none; color: inherit; transition: var(--transition); }
    ul, ol { list-style: none; margin: 0; padding: 0; }
    img { max-width: 100%; height: auto; display: block; }

    /* Utility Bar */
    .utility-bar {
      height: 38px;
      background: #060D1F;
      color: #94A3B8;
      font-size: 0.82rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .utility-bar .grid-container { height: 100%; }
    .utility-inner { display: flex; justify-content: space-between; align-items: center; height: 100%; }
    .utility-links a { color: #94A3B8; margin-left: 1.25rem; }
    .utility-links a:hover { color: #38BDF8; }

    /* Sticky Header */
    .main-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-color);
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    }
    .nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
    .brand-logo { font-size: 1.35rem; font-weight: 800; color: #0F172A; display: flex; align-items: center; gap: 8px; }
    .brand-logo .logo-badge {
      width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary), var(--accent));
      border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1rem; font-weight: 900;
    }
    .nav-links { display: flex; gap: 1.5rem; align-items: center; }
    .nav-links a { font-size: 0.95rem; font-weight: 500; color: var(--text-muted); }
    .nav-links a:hover { color: var(--primary); }
    .btn-nav-action {
      background: var(--primary); color: #fff; padding: 0.55rem 1.25rem; border-radius: var(--radius-sm);
      font-weight: 600; font-size: 0.9rem; transition: var(--transition);
    }
    .btn-nav-action:hover { background: var(--primary-hover); color: #fff; transform: translateY(-1px); }

    /* Step Progress Bar */
    .step-track-bar {
      background: #F1F5F9;
      border-bottom: 1px solid #E2E8F0;
      padding: 10px 0;
    }
    .step-list { display: flex; justify-content: space-between; align-items: center; position: relative; }
    .step-item {
      display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-light);
      font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: var(--transition);
    }
    .step-item:hover, .step-item.active { color: var(--primary); }
    .step-badge {
      width: 22px; height: 22px; border-radius: 50%; background: #CBD5E1; color: #fff;
      display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem;
    }
    .step-item.active .step-badge { background: var(--accent); box-shadow: 0 0 8px rgba(14, 165, 233, 0.4); }
    .step-arrow { color: #CBD5E1; font-size: 0.85rem; }

    /* Section Foundations */
    .section-block { padding: 90px 0; position: relative; }
    .section-light { background: var(--bg-main); }
    .section-alt { background: var(--bg-alt); }
    .section-dark { background: var(--bg-dark); color: #F8FAFC; }

    .section-header { text-align: center; max-width: 840px; margin: 0 auto 60px auto; }
    .section-header.text-left { text-align: left; margin: 0 0 50px 0; }
    .section-tag {
      display: inline-block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; padding: 4px 12px; border-radius: 20px; background: rgba(30, 64, 175, 0.08);
      color: var(--primary); margin-bottom: 14px;
    }
    .section-dark .section-tag { background: rgba(14, 165, 233, 0.2); color: #38BDF8; }
    .section-title { font-size: 2.15rem; font-weight: 800; line-height: 1.3; margin-bottom: 16px; }
    .section-dark .section-title { color: #FFFFFF; }
    .section-desc { font-size: 1.05rem; color: var(--text-light); line-height: 1.7; }
    .section-dark .section-desc { color: #94A3B8; }

    /* Cards */
    .modern-card {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      box-shadow: var(--card-shadow);
      padding: 32px;
      height: 100%;
      display: flex;
      flex-direction: column;
      transition: var(--transition);
    }
    .modern-card:hover {
      box-shadow: var(--card-shadow-hover);
      transform: translateY(-4px);
      border-color: rgba(30, 64, 175, 0.25);
    }
    .card-icon {
      width: 52px; height: 52px; border-radius: 10px; background: #EEF2FF; color: var(--primary);
      display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 20px;
    }
    .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: var(--text-main); }
    .card-text { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; flex-grow: 1; }

    /* 1. Hero Block */
    .hero-cinematic {
      position: relative;
      background: radial-gradient(circle at 75% 25%, #172554 0%, #060D1F 80%);
      color: #FFFFFF;
      padding: 100px 0 110px;
      overflow: hidden;
    }
    .hero-cinematic::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url('/assets/images/45cabc5c73900c0e.webp');
      background-size: cover;
      background-position: center;
      opacity: 0.16;
      mix-blend-mode: luminosity;
    }
    .hero-content { position: relative; z-index: 2; }
    .hero-badge-live {
      display: inline-flex; align-items: center; gap: 8px; background: rgba(14, 165, 233, 0.15);
      border: 1px solid rgba(56, 189, 248, 0.4); border-radius: 30px; padding: 6px 16px;
      font-size: 0.85rem; color: #7DD3FC; margin-bottom: 24px;
    }
    .hero-badge-live::before {
      content: ""; width: 8px; height: 8px; border-radius: 50%; background: #38BDF8;
      box-shadow: 0 0 10px #38BDF8; display: inline-block;
    }
    .hero-title { font-size: 2.9rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 20px; }
    .hero-subtitle { font-size: 1.15rem; color: #CBD5E1; line-height: 1.75; margin-bottom: 36px; max-width: 620px; }
    .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
    .btn-hero-primary {
      background: linear-gradient(135deg, #2563EB, #0284C7); color: #fff; padding: 14px 34px;
      border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700; box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
      display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-hero-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 26px rgba(37, 99, 235, 0.45); }
    .btn-hero-secondary {
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #fff;
      padding: 14px 28px; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600;
    }
    .btn-hero-secondary:hover { background: rgba(255,255,255,0.18); color: #fff; }
    .hero-poster-board {
      position: relative; z-index: 2; border-radius: var(--radius-lg); overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.7);
      background: #0F172A;
    }
    .hero-poster-img { width: 100%; height: 380px; object-fit: cover; }
    .hero-poster-overlay {
      position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(11, 19, 43, 0.95), transparent);
      padding: 24px; display: flex; justify-content: space-between; align-items: flex-end;
    }

    /* 2. Pain Points */
    .pain-card { border-left: 4px solid #EF4444; }

    /* 3. Solution Overview */
    .solution-img-box {
      border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-color);
      box-shadow: var(--card-shadow); height: 100%; max-height: 440px;
    }
    .solution-img-box img { width: 100%; height: 100%; object-fit: cover; }
    .feature-point-list { display: flex; flex-direction: column; gap: 20px; }
    .feature-point-item { display: flex; gap: 16px; align-items: flex-start; }
    .feature-point-dot {
      width: 28px; height: 28px; border-radius: 50%; background: #EEF2FF; color: var(--primary);
      display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; margin-top: 3px;
    }

    /* 4. Workflow Timeline */
    .timeline-card-step {
      position: relative; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
      padding: 28px 24px; box-shadow: var(--card-shadow);
    }
    .timeline-number {
      font-size: 2.2rem; font-weight: 900; color: #DBEAFE; line-height: 1; margin-bottom: 12px;
    }

    /* 6. Popular Categories */
    .category-poster-card {
      border-radius: var(--radius-md); overflow: hidden; background: #fff;
      border: 1px solid var(--border-color); box-shadow: var(--card-shadow); display: flex; flex-direction: column;
    }
    .category-poster-img { width: 100%; height: 210px; object-fit: cover; }
    .category-body { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
    .category-metrics {
      margin-top: 16px; padding-top: 14px; border-top: 1px solid #F1F5F9;
      display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-light);
    }

    /* 7. Dark Tech Stack */
    .tech-metric-card {
      background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-md); padding: 28px; backdrop-filter: blur(8px);
    }

    /* 8. Success Stories */
    .case-card {
      background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border-color);
      overflow: hidden; box-shadow: var(--card-shadow); margin-bottom: 32px;
    }
    .case-card-img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
    .case-card-body { padding: 36px; display: flex; flex-direction: column; justify-content: center; }

    /* 9. Impact Metrics */
    .metrics-bar { background: #0F172A; color: #fff; padding: 50px 0; border-top: 1px solid rgba(255,255,255,0.1); }
    .metric-item { text-align: center; }
    .metric-value { font-size: 2.8rem; font-weight: 900; color: #38BDF8; line-height: 1.1; margin-bottom: 6px; }
    .metric-label { font-size: 0.95rem; color: #94A3B8; font-weight: 500; }

    /* 10. Testimonials */
    .testimonial-card {
      background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
      padding: 28px; box-shadow: var(--card-shadow);
    }
    .testimonial-author { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
    .avatar-ph {
      width: 46px; height: 46px; border-radius: 50%; background: #E2E8F0;
      display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary);
    }
    .author-name { font-weight: 700; font-size: 0.95rem; }
    .author-role { font-size: 0.8rem; color: var(--text-light); }

    /* 11. News Section */
    .news-card {
      background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
      padding: 24px; box-shadow: var(--card-shadow); display: flex; flex-direction: column;
    }
    .news-date { font-size: 0.8rem; color: var(--text-light); margin-bottom: 8px; }

    /* 12. FAQ Accordion */
    .faq-panel { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff; margin-bottom: 12px; overflow: hidden; }
    .faq-question {
      padding: 20px 24px; font-weight: 700; font-size: 1.05rem; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center; background: #fff;
    }
    .faq-question:hover { background: #F8FAFC; }
    .faq-toggle-icon { font-size: 1.2rem; color: var(--primary); transition: var(--transition); }
    .faq-answer { padding: 0 24px 20px; font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; display: none; }
    .faq-panel.is-active .faq-answer { display: block; }
    .faq-panel.is-active .faq-toggle-icon { transform: rotate(45deg); }

    /* 13. CTA Section */
    .cta-container {
      background: radial-gradient(circle at 50% 50%, #1E40AF 0%, #0B132B 100%);
      border-radius: var(--radius-lg); padding: 70px 40px; text-align: center; color: #fff;
      box-shadow: 0 20px 35px -10px rgba(11, 19, 43, 0.4);
    }
    .cta-input-group {
      max-width: 520px; margin: 32px auto 20px; display: flex; gap: 10px; background: rgba(255,255,255,0.1);
      padding: 6px; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.25);
    }
    .cta-input {
      flex-grow: 1; border: none; background: transparent; padding: 12px 16px; color: #fff;
      font-size: 0.95rem; outline: none;
    }
    .cta-input::placeholder { color: #94A3B8; }
    .btn-cta-submit {
      background: #0EA5E9; border: none; color: #fff; font-weight: 700; padding: 12px 24px;
      border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
    }
    .btn-cta-submit:hover { background: #38BDF8; }

    /* Footer */
    .site-footer { background: #070D1E; color: #94A3B8; padding: 80px 0 30px; border-top: 1px solid rgba(255,255,255,0.06); }
    .footer-heading { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 20px; }
    .footer-links a { color: #94A3B8; display: block; margin-bottom: 10px; font-size: 0.9rem; }
    .footer-links a:hover { color: #38BDF8; }
    .footer-bottom {
      margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08);
      font-size: 0.85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .hero-title { font-size: 2.3rem; }
      .nav-links { display: none; }
    }
    @media (max-width: 768px) {
      .section-block { padding: 55px 0; }
      .hero-title { font-size: 1.9rem; }
      .hero-actions { flex-direction: column; }
      .step-track-bar { display: none; }
      .cta-input-group { flex-direction: column; background: transparent; border: none; }
      .cta-input { background: rgba(255,255,255,0.1); border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.2); }
      .footer-bottom { flex-direction: column; text-align: center; }
    }