/* roulang page: index */
@layer base {
      :root {
        --deep-bg: #0A1929;
        --card-bg: rgba(255, 255, 255, 0.03);
        --glass-blur: blur(20px);
        --primary-blue: #00B4D8;
        --mid-blue: #0077B6;
        --light-glow: #48CAE4;
        --alert-red: #FF6B6B;
        --border-light: rgba(255, 255, 255, 0.08);
        --border-glow: rgba(0, 180, 216, 0.3);
        --text-primary: rgba(255, 255, 255, 0.92);
        --text-secondary: rgba(255, 255, 255, 0.65);
        --text-muted: rgba(255, 255, 255, 0.45);
        --radius-card: 16px;
        --radius-btn: 50px;
        --shadow-card: 0 8px 32px rgba(0, 180, 216, 0.08);
        --shadow-glow: 0 0 20px rgba(0, 180, 216, 0.5);
        --transition-smooth: 300ms ease-out;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
        background: radial-gradient(circle at 20% 10%, #1B2838 0%, #0D1B2A 70%);
        color: var(--text-primary);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        scroll-behavior: smooth;
      }
      .container {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
      .glass-card {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-card);
        transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
      }
      .glass-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 180, 216, 0.2);
        border-color: rgba(255, 255, 255, 0.2);
      }
      .btn-primary {
        background: linear-gradient(135deg, #0077B6, #00B4D8);
        color: white;
        border-radius: var(--radius-btn);
        padding: 14px 32px;
        font-weight: 600;
        box-shadow: 0 0 20px rgba(0, 180, 216, 0.5);
        transition: all var(--transition-smooth);
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 0.02em;
      }
      .btn-primary:hover {
        box-shadow: 0 0 30px rgba(0, 180, 216, 0.8);
        transform: scale(1.05);
      }
      .btn-glass {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--primary-blue);
        border-radius: var(--radius-btn);
        padding: 14px 32px;
        font-weight: 600;
        backdrop-filter: blur(8px);
        transition: all var(--transition-smooth);
      }
      .btn-glass:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--primary-blue);
      }
      h1, h2, h3 {
        letter-spacing: -0.02em;
      }
      .section-padding {
        padding-top: 120px;
        padding-bottom: 120px;
      }
      @media (max-width: 768px) {
        .section-padding {
          padding-top: 80px;
          padding-bottom: 80px;
        }
        h1 {
          font-size: 2.5rem !important;
        }
      }
      /* 导航 */
      .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(13, 27, 42, 0.7);
        backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        height: 72px;
        z-index: 50;
        display: flex;
        align-items: center;
      }
      .nav-link {
        color: rgba(255, 255, 255, 0.7);
        transition: color 0.2s;
        font-weight: 500;
      }
      .nav-link:hover {
        color: #00B4D8;
      }
      .active-nav {
        color: #00B4D8 !important;
        position: relative;
      }
      .active-nav::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #00B4D8;
        box-shadow: 0 0 8px #00B4D8;
      }
      /* 动画 */
      @keyframes float {
        0% { transform: translateY(-10px); }
        50% { transform: translateY(10px); }
        100% { transform: translateY(-10px); }
      }
      @keyframes pulse-glow {
        0% { box-shadow: 0 0 20px rgba(0,180,216,0.4), 0 0 40px rgba(0,180,216,0.2); }
        50% { box-shadow: 0 0 30px rgba(0,180,216,0.6), 0 0 60px rgba(0,180,216,0.3); }
        100% { box-shadow: 0 0 20px rgba(0,180,216,0.4), 0 0 40px rgba(0,180,216,0.2); }
      }
      .animate-float {
        animation: float 4s ease-in-out infinite;
      }
      .animate-pulse-glow {
        animation: pulse-glow 2.5s ease-in-out infinite;
      }
      @media (prefers-reduced-motion: reduce) {
        .animate-float, .animate-pulse-glow {
          animation: none;
        }
      }
      /* 移动端菜单 */
      .mobile-menu {
        background: rgba(8, 20, 33, 0.95);
        backdrop-filter: blur(30px);
      }