/* roulang page: index */
:root {
      --primary: #0052D9;
      --primary-dark: #003CAB;
      --accent: #00E599;
      --dark-navy: #0B132B;
      --bg-light: #F5F7FA;
      --text-main: #1D2129;
      --text-muted: #4E5969;
      --border-color: #E5E6EB;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      letter-spacing: -0.01em;
      color: var(--text-main);
      background-color: #FFFFFF;
      overflow-x: hidden;
    }
    .custom-container {
      width: 100%;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .interactive-card {
      transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease;
    }
    .interactive-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px -6px rgba(0, 82, 217, 0.12);
      border-color: #96BDFA;
    }
    .status-pulse {
      box-shadow: 0 0 0 0 rgba(0, 229, 153, 0.7);
      animation: pulse-ring 2s infinite;
    }
    @keyframes pulse-ring {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 229, 153, 0.7);
      }
      70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(0, 229, 153, 0);
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 229, 153, 0);
      }
    }