/* roulang page: index */
:root {
      --primary-gradient: linear-gradient(135deg, #0D472B 0%, #059669 100%);
      --accent-gradient: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
      --card-shadow: 0 10px 30px -10px rgba(13, 71, 43, 0.08);
      --card-hover-shadow: 0 20px 35px -10px rgba(16, 185, 129, 0.22);
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: #1E293B;
      background-color: #F8FAFC;
    }
    .custom-card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: var(--card-shadow);
    }
    .custom-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--card-hover-shadow);
    }
    .tech-border {
      border: 1px solid rgba(5, 150, 105, 0.15);
    }
    .badge-amber {
      background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
      color: #B45309;
      border: 1px solid rgba(245, 158, 11, 0.3);
    }
    .badge-emerald {
      background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
      color: #047857;
      border: 1px solid rgba(16, 185, 129, 0.3);
    }
    .banner-slide {
      transition: opacity 0.8s ease-in-out;
    }
    .accordion-content {
      transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
    }
    .accordion-content.active {
      max-height: 200px;
      opacity: 1;
    }