/* roulang page: index */
:root {
        --color-primary: #1a56db;
        --color-primary-hover: #1e40af;
        --color-accent-green: #10b981;
        --color-accent-amber: #f59e0b;
        --color-bg-light: #f8fafc;
        --color-text-main: #0f172a;
        --color-text-muted: #475569;
        --color-border: #e2e8f0;
        --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
        --card-shadow-hover: 0 16px 32px -6px rgba(15, 23, 42, 0.1);
      }
      
      html {
        scroll-behavior: smooth;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
      }
      
      body {
        color: var(--color-text-main);
        background-color: #ffffff;
        line-height: 1.65;
        overflow-x: hidden;
      }
      
      /* 斜切色块 Hero 容器 */
      .hero-skew-bg {
        background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #1a56db 100%);
        clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
      }
      @media (max-width: 768px) {
        .hero-skew-bg {
          clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
        }
      }

      /* 卡片立体上浮动效 */
      .app-card {
        background: #ffffff;
        border: 1px solid var(--color-border);
        border-radius: 14px;
        box-shadow: var(--card-shadow);
        transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
      }
      .app-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
        border-color: #cbd5e1;
      }

      /* 脉冲红点/绿点状态指示 */
      .status-pulse {
        position: relative;
      }
      .status-pulse::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 50%;
        background-color: inherit;
        animation: pulse-ring 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
      }
      @keyframes pulse-ring {
        0% { transform: scale(0.95); opacity: 0.8; }
        100% { transform: scale(2.4); opacity: 0; }
      }

      /* 轮播淡入淡出组件 */
      .carousel-slide {
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
      }
      .carousel-slide.active {
        display: block;
        opacity: 1;
      }

      /* 手风琴高度动画 */
      .faq-content {
        transition: max-height 0.3s ease-out, opacity 0.3s ease;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
      }
      .faq-content.open {
        max-height: 350px;
        opacity: 1;
      }

      /* 表单聚焦边框轮廓 */
      input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
      }