/* roulang page: index */
:root {
      --color-primary: #1D4ED8;
      --color-primary-dark: #1E40AF;
      --color-secondary: #0EA5E9;
      --color-dark: #0F172A;
      --color-surface: #FFFFFF;
      --color-muted-bg: #F8FAFC;
      --color-alt-bg: #F1F5F9;
      --color-border: #E2E8F0;
      --color-text-main: #0F172A;
      --color-text-body: #334155;
      --color-text-muted: #64748B;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--color-text-body);
      background-color: #FFFFFF;
      overflow-x: hidden;
    }
    .custom-container {
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    @media (min-width: 640px) { .custom-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
    @media (min-width: 1024px) { .custom-container { padding-left: 2rem; padding-right: 2rem; } }
    .hero-bg {
      background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(29, 78, 216, 0.85) 100%), url('/assets/images/04cecc1600986a3b.webp');
      background-size: cover;
      background-position: center;
    }
    .dark-flow-bg {
      background-color: #0B1329;
      background-image: radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(29, 78, 216, 0.15) 0%, transparent 40%);
    }
    .card-hover-fx {
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-hover-fx:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    }
    details summary::-webkit-details-marker {
      display: none;
    }