/* roulang page: index */
:root {
      --bg-base: #F8F9FB;
      --bg-dark: #0D1117;
      --primary: #0A58CA;
      --accent: #00A389;
      --border-subtle: #E5E7EB;
      --border-dark: #21262D;
    }
    body {
      background-color: var(--bg-base);
      color: #111827;
      font-feature-settings: "tnum" 1;
      -webkit-font-smoothing: antialiased;
    }
    .wafer-grid-pattern {
      background-size: 32px 32px;
      background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    }
    .wafer-grid-dark {
      background-size: 32px 32px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    }
    .industrial-card {
      box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px var(--border-subtle);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .industrial-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px -4px rgba(10, 88, 202, 0.08), 0 0 0 1px rgba(10, 88, 202, 0.35);
    }
    .dark-card {
      box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px var(--border-dark);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .dark-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px -4px rgba(0, 163, 137, 0.15), 0 0 0 1px rgba(0, 163, 137, 0.4);
    }
    .nav-blur {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }