/* roulang page: index */
:root {
      --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      --color-primary: #0891b2;
      --color-primary-dark: #0e7490;
      --color-bg-base: #f8fafc;
      --color-text-main: #0f172a;
      --color-text-muted: #475569;
      --border-subtle: rgba(226, 232, 240, 0.8);
      --shadow-soft: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
      --shadow-hover: 0 16px 32px -4px rgba(8, 145, 178, 0.12);
    }
    body {
      font-family: var(--font-stack);
      background-color: var(--color-bg-base);
      color: var(--color-text-main);
      line-height: 1.65;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      scroll-behavior: smooth;
    }
    .gradient-tech-border {
      position: relative;
    }
    .gradient-tech-border::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.4), rgba(15, 23, 42, 0.05));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(8, 145, 178, 0.15) 0%, rgba(248, 250, 252, 0) 70%);
    }
    .dark-glow {
      background: radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.12) 0%, rgba(15, 23, 42, 0) 65%);
    }
    .transition-custom {
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .accordion-content {
      transition: max-height 0.35s ease, opacity 0.3s ease;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
    }
    .accordion-content.active {
      max-height: 280px;
      opacity: 1;
    }