/* ================================================
   RESET & BASE
================================================ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: var(--font-primary);
      background-color: var(--surface);
      color: var(--text-primary);
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      overflow-x: hidden;
      line-height: 1.6;
    }

    ::selection {
      background: var(--primary);
      color: #fff;
    }

    
/* ================================================
   ANIMATED BACKGROUND CANVAS
================================================ */

    #bg-canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.5;
    }

    
/* ================================================
   GENERAL TYPOGRAPHY
================================================ */

    h1 { font-size: var(--text-h1); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
    h2 { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
    h3 { font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
    h4 { font-size: var(--text-h4); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
    h5 { font-size: var(--text-h5); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
    h6 { font-size: var(--text-h6); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }

    .text-gradient {
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }