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

    

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 15px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      position: relative;
    }

    /* Minimalist Animated Background */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: radial-gradient(circle at 50% 0%, black 10%, transparent 80%);
      -webkit-mask-image: radial-gradient(circle at 50% 0%, black 10%, transparent 80%);
      pointer-events: none;
    }

    body::after {
      content: "";
      position: absolute;
      top: -150px;
      left: 50%;
      transform: translateX(-50%);
      width: 800px;
      height: 600px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 70%);
      z-index: -1;
      pointer-events: none;
      animation: pulse-glow 7s ease-in-out infinite alternate;
    }

    @keyframes pulse-glow {
      0% {
        transform: translateX(-50%) scale(1) translateY(0);
        opacity: 0.6;
      }

      100% {
        transform: translateX(-50%) scale(1.05) translateY(20px);
        opacity: 1;
      }
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px;
    }

    section {
      padding: 96px 0;
    }

    section+section {
      border-top: 1px solid var(--border);
    }