:root {
 
      --loader-bg: #ffffff;
      --heartbeat-color: #4facd2;
      --fade-out-duration: 700ms;
      --z: 9999;
    }

    body {
      margin: 0;
      padding: 0;
      background: var(--bg-color);
      font-family: Arial, sans-serif;
    }

    /* Preloader Overlay */
    #heartbeat-preloader {
      position: fixed;
      inset: 0;
      background: var(--loader-bg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: var(--z);
      overflow: hidden;
      transition: opacity var(--fade-out-duration) ease, visibility var(--fade-out-duration) ease;
    }
    #heartbeat-preloader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* Logo */
    .preloader-logo {
      margin-bottom: 30px;
      text-align: center;
      z-index: 2;
    }
    .preloader-logo img {
      width: 120px;
      height: auto;
      display: inline-block;
    }

    /* Heartbeat Container */
    .heartbeat-container {
      position: relative;
      width: 200px;
      height: 100px;
    }

    /* Faint baseline */
    .heartbeat-line {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(122, 122, 122, 0.2);
      transform: translateY(-50%);
    }

    /* Heartbeat Path Animation */
    .heartbeat-svg {
      width: 100%;
      height: 100%;
      stroke: var(--heartbeat-color);
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 400;   /* total length of path */
      stroke-dashoffset: 400;  /* hide full path initially */
      animation: drawForward 1s linear infinite; /* 🔹 faster: 1s */
    }

    @keyframes drawForward {
      0% { stroke-dashoffset: 400; }
      100% { stroke-dashoffset: 0; } /* draw full path */
    }