/* roulang page: index */
:root {
      --primary: #0D1F22;
      --secondary: #1A242B;
      --accent: #00D285;
      --accent-hover: #00B874;
      --bg-light: #F4F7F6;
      --bg-dark: #081214;
      --border-light: #E2E8F0;
      --border-dark: #1E2D30;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      background-color: var(--bg-light);
      color: #1A242B;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      line-height: 1.65;
      overflow-x: hidden;
    }
    .hero-bg-overlay {
      background: linear-gradient(135deg, rgba(8, 18, 20, 0.94) 0%, rgba(13, 31, 34, 0.88) 100%),
                  url('/assets/images/bfc8ea7c80a6523c.webp') center/cover no-repeat;
    }
    .dark-section-bg {
      background: linear-gradient(180deg, #081214 0%, #0D1F22 100%),
                  url('/assets/images/b53673e92cc0d173.webp') center/cover fixed;
    }
    .circuit-pattern {
      background-image: radial-gradient(rgba(0, 210, 133, 0.08) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .btn-glow {
      box-shadow: 0 0 20px rgba(0, 210, 133, 0.35);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 28px rgba(0, 210, 133, 0.6);
      transform: translateY(-2px);
    }
    .eda-card {
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1px solid var(--border-light);
    }
    .eda-card:hover {
      transform: translateY(-3px);
      border-color: var(--accent);
      box-shadow: 0 12px 28px -6px rgba(13, 31, 34, 0.08);
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }