/* roulang page: index */
@import url('/assets/css/vendor/b95078584d-all.min.css');
    :root {
      --purple: #7C3AED;
      --orange: #F97316;
      --dark: #0F0F0F;
      --light: #F8F9FA;
      --card: rgba(124,58,237,0.08);
      --accent: #06D6A0;
      --danger: #EF4444;
      --text-light: #E2E8F0;
      --text-muted: #64748B;
      --text-dark: #1E293B;
      --shadow-card: 0 4px 24px rgba(124,58,237,0.12);
      --shadow-hover: 0 8px 40px rgba(124,58,237,0.25);
      --shadow-button: 0 4px 14px rgba(249,115,22,0.4);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
      background-color: var(--dark);
      color: var(--text-light);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; transition: color 0.2s; }
    .section-gap { padding: 120px 0; }
    @media (max-width: 768px) { .section-gap { padding: 80px 0; } .container { padding: 0 20px; } }

    /* 导航 */
    .navbar {
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(12px);
      padding: 16px 0;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 100;
      transition: background 0.3s;
    }
    .navbar.scrolled { background: rgba(0,0,0,1); }
    .nav-logo { font-weight: 800; font-size: 1.5rem; background: linear-gradient(135deg, var(--purple), var(--orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-flex; align-items: center; gap: 6px; }
    .nav-logo i { color: var(--orange); background: none; -webkit-text-fill-color: initial; font-size: 1.8rem; }
    .nav-link { color: white; font-weight: 500; padding: 8px 4px; border-bottom: 2px solid transparent; transition: 0.2s; }
    .nav-link:hover { color: var(--orange); border-bottom-color: var(--orange); }
    .search-box input { background: rgba(255,255,255,0.15); border: 1px solid transparent; border-radius: 20px; padding: 8px 16px 8px 36px; color: white; outline: none; transition: 0.2s; }
    .search-box input:focus { border-color: var(--purple); box-shadow: 0 0 12px var(--purple); }
    .search-box i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
    .btn-primary { background: linear-gradient(135deg, var(--purple), var(--orange)); color: white; font-weight: 600; padding: 12px 28px; border-radius: 50px; display: inline-flex; align-items: center; gap: 8px; transition: 0.3s; box-shadow: var(--shadow-button); border: none; cursor: pointer; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(249,115,22,0.6); filter: brightness(1.05); }
    .btn-outline { background: transparent; border: 2px solid white; color: white; font-weight: 600; padding: 12px 28px; border-radius: 50px; display: inline-flex; align-items: center; gap: 8px; transition: 0.3s; cursor: pointer; }
    .btn-outline:hover { border-color: var(--purple); background: rgba(124,58,237,0.2); color: white; }

    /* 汉堡菜单 */
    .menu-toggle { display: none; background: none; border: none; color: white; font-size: 1.8rem; }
    @media (max-width: 768px) {
      .nav-links, .search-box, .nav-cta { display: none; }
      .menu-toggle { display: block; }
      .mobile-menu.active { display: flex; flex-direction: column; background: rgba(0,0,0,0.95); backdrop-filter: blur(20px); position: absolute; top: 100%; left: 0; width: 100%; padding: 24px; gap: 20px; }
    }

    /* Hero 粒子背景 */
    .hero-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.2) 0%, #0F0F0F 70%);
      position: relative;
      overflow: hidden;
    }
    canvas#particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

    /* 卡片通用 */
    .card-glass { background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); border-radius: 24px; padding: 32px; border: 1px solid rgba(124,58,237,0.15); transition: 0.3s; }
    .card-glass:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
    .section-title { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.5px; }
    @media (max-width: 768px) { .section-title { font-size: 1.8rem; } }