/* ===== Reset & Variables ===== */
      *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

      :root {
        --indigo-600: #4F46E5; --indigo-500: #6366F1; --indigo-400: #818CF8; --indigo-800: #3730A3;
        --cyan-400: #22D3EE; --cyan-500: #06B6D4; --cyan-600: #0891B2; --teal-400: #2DD4BF;
        --gold-400: #FBBF24; --gold-500: #F59E0B; --gold-600: #D97706;
        --bg-dark: #080A1E; --bg-section: #0C0F28; --bg-card: #111433; --bg-card-hover: #181D42;
        --text-primary: #F1F5F9; --text-secondary: #94A3B8; --text-muted: #64748B;
        --border: #1E2942; --border-glow: rgba(79,70,229,0.2);
        --gradient-main: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
        --gradient-wide: linear-gradient(135deg, #3730A3 0%, #4F46E5 40%, #06B6D4 100%);
        --gradient-gold: linear-gradient(135deg, #F59E0B 0%, #FBBF24 50%, #FDE68A 100%);
        --gradient-oasis: linear-gradient(135deg, #06B6D4 0%, #2DD4BF 50%, #34D399 100%);
        --radius: 16px; --radius-sm: 10px; --radius-xs: 6px;
      }

      /* Scroll progress bar */
      #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: var(--gradient-main); transition: width 0.1s linear; }

      /* Active nav link */
      .nav-links a.section-active { color: var(--text-primary); background: rgba(79,70,229,0.14); }

      /* Floating CTA */
      .floating-cta { position: fixed; right: 20px; bottom: 24px; z-index: 150; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 100px; font-size: 14px; font-weight: 700; text-decoration: none; color: #fff; background: var(--gradient-main); box-shadow: 0 8px 28px rgba(79,70,229,0.45); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
      .floating-cta.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
      .floating-cta:hover { transform: translateY(-2px); }
      @media (max-width: 768px) { .floating-cta { right: 14px; bottom: 16px; padding: 11px 18px; font-size: 13px; } }

      html { scroll-behavior: smooth; }

      body {
        font-family: 'Inter', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
        background: var(--bg-dark);
        color: var(--text-primary);
        line-height: 1.6;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }

      /* ===== Background Canvas ===== */
      #bg-canvas {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        z-index: 0;
        pointer-events: none;
      }

      .bg-grid {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-image:
          linear-gradient(rgba(79,70,229,0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(79,70,229,0.035) 1px, transparent 1px);
        background-size: 60px 60px;
        z-index: 1;
        pointer-events: none;
      }

      /* ===== Binary Rain Overlay ===== */
      #binary-rain {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        z-index: 1;
        pointer-events: none;
        opacity: 0.06;
      }

      /* ===== Star Particle Container ===== */
      .star-container {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 1;
        pointer-events: none;
        overflow: hidden;
      }

      .star-particle {
        position: absolute;
        width: 4px; height: 4px;
        background: var(--gold-400);
        border-radius: 50%;
        box-shadow: 0 0 6px var(--gold-400), 0 0 12px rgba(251,191,36,0.3);
        animation: starFloat linear infinite;
      }

      @keyframes starFloat {
        0% { transform: translateY(100vh) scale(0); opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { transform: translateY(-10vh) scale(1); opacity: 0; }
      }