@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");

      /* Custom Tailwind Config Inline */
      :root {
        --color-primary: #0077ff;
        --color-dark: #0f172a;
        --color-gray: #6b7280;
        --color-light: #f9fafb;
      }

      *{
        margin: 0;
        padding: 0;
      }
      
      body {
        font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      }

      .play-btn {
        transition: all 0.2s ease-in-out;
      }
      .play-btn:hover {
        transform: scale(1.1);
      }

      /* .hero-section {
        background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
      } */

      .stats-card {
        background: linear-gradient(135deg, #0a2540 0%, #0f3554 100%);
      }

      .property-card {
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        transition: transform 0.3s ease;
      }

      .property-overlay {
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.7) 0%,
          rgba(0, 0, 0, 0) 50%
        );
      }

      .dotted-line {
            stroke-dasharray: 4, 4;
            stroke: #93c5fd;
            stroke-width: 2;
            fill: none;
        }
        
    .timeline {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 4px;
      transform: translateX(-50%);
      background-image: radial-gradient(#bdeaf5 2px, transparent 2px);
      background-size: 6px 26px;
      background-repeat: repeat-y;
      z-index: 0;
    }

    .dot {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
      border-radius: 9999px;
      background: white;
      border: 6px solid #e0f7fb;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(6, 30, 40, 0.1);
      z-index: 10;
    }

    .dot-inner {
      width: 12px;
      height: 12px;
      background: #06b6d4;
      border-radius: 50%;
    }

       @keyframes glow-pulse {
      0%, 100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.5),
                    0 0 60px rgba(255, 165, 0, 0.3),
                    0 8px 30px rgba(0, 0, 0, 0.2);
      }
      50% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 0.7),
                    0 0 90px rgba(255, 165, 0, 0.5),
                    0 12px 40px rgba(0, 0, 0, 0.3);
      }
    }

    @keyframes border-spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes slide-up {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-3px);
      }
    }

    .cta-button-alt {
      position: relative;
      overflow: visible;
      animation: glow-pulse 2.5s ease-in-out infinite;
    }

    .cta-button-alt::before {
      content: '';
      position: absolute;
      inset: -3px;
      background: linear-gradient(45deg, #ff6b00, #ffd700, #ff6b00, #ffd700);
      background-size: 300% 300%;
      border-radius: 9999px;
      z-index: -1;
      animation: border-spin 3s linear infinite;
      opacity: 0.8;
      filter: blur(8px);
    }

    .cta-button-alt::after {
      content: '🚀';
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.5rem;
      animation: slide-up 1.5s ease-in-out infinite;
    }

    .cta-button-alt:hover {
      transform: scale(1.05);
      animation: glow-pulse 1.5s ease-in-out infinite;
    }

    .cta-button-alt:active {
      transform: scale(0.97);
    }

    @keyframes rainbow-shift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .gradient-bg {
      background: linear-gradient(90deg, #ff6b00, #ff8c00, #ffa500, #ff8c00, #ff6b00);
      background-size: 200% 200%;
      animation: rainbow-shift 4s ease infinite;
    }

     @keyframes pulse-glow {
      0%, 100% {
        box-shadow: 0 0 20px rgba(0, 119, 255, 0.4),
                    0 0 40px rgba(0, 119, 255, 0.2),
                    0 4px 20px rgba(0, 0, 0, 0.1);
      }
      50% {
        box-shadow: 0 0 30px rgba(0, 119, 255, 0.6),
                    0 0 60px rgba(0, 119, 255, 0.3),
                    0 6px 25px rgba(0, 0, 0, 0.15);
      }
    }

    @keyframes shimmer {
      0% {
        background-position: -200% center;
      }
      100% {
        background-position: 200% center;
      }
    }

    .cta-button {
      position: relative;
      overflow: hidden;
      animation: pulse-glow 2s ease-in-out infinite;
    }

    .cta-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
      );
      transition: left 0.6s;
    }

    .cta-button:hover::before {
      left: 100%;
    }

    .cta-button::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 100%
      );
      background-size: 200% 200%;
      animation: shimmer 3s linear infinite;
      pointer-events: none;
    }

    .cta-button:hover {
      transform: translateY(-2px) scale(1.02);
    }

    .cta-button:active {
      transform: translateY(0) scale(0.98);
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-5px);
      }
    }

    .button-wrapper {
      animation: float 3s ease-in-out infinite;
    }

  @keyframes slideIn {
    from {
      transform: translateX(400px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideOut {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(400px);
      opacity: 0;
    }
  }

  .animate-slide-in {
    animation: slideIn 0.3s ease-out;
  }

  .animate-slide-out {
    animation: slideOut 0.3s ease-in;
  }