in this codes (<style>
  /* Global Styles */
  :root {
    --c-gold: #D1C287;
    --c-white: #ffffff;
    --c-gradient: linear-gradient(45deg, #4F3F02, #D1C287);
    --f-primary: 'Poppins', sans-serif;
    --s-border-radius: 8px;
    --transition-speed: 0.3s;
    --particle-count: 20; /* Adjusted for performance */
  }


  /* Hero Container */
  .hero-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    color: var(--c-white);
    padding: 2rem 1rem;
    background: transparent; /* Removed background colors */
  }

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

  /* Hero Content */
  .hero-content {
    padding: 4rem 1.5rem;
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: auto;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.5s;
  }

  /* Subtitle */
  .hero-subtitle {
    color: var(--c-gold);
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.7s;
  }

  /* Divider Line */
  .divider {
    width: 50%;
    height: 2px;
    background: var(--c-gold);
    margin: 0 auto 1.5rem auto;
    opacity: 0;
    transform: scaleX(0);
    animation: growX 1s ease forwards;
    animation-delay: 0.9s;
  }

  /* Main Title */
  .hero-title {
    font-family: var(--f-primary);
    font-size: 3rem;
    line-height: 1.2;
    color: var(--c-white);
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1.1s;
    font-weight: 700;
  }

  /* Description */
  .hero-description {
    font-size: 1.1rem;
    color: var(--c-white);
    opacity: 0;
    margin-bottom: 2rem;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1.3s;
    line-height: 1.6;
  }

  /* Call-to-Action Button */
  .hero-cta {
    background: var(--c-gradient);
    color: var(--c-white);
    padding: 0.8rem 2rem;
    font-weight: 600;
    border-radius: var(--s-border-radius);
    text-decoration: none;
    display: inline-block;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), opacity var(--transition-speed);
    opacity: 0;
    transform: scale(0.9);
    animation: fadeIn 1s ease forwards;
    animation-delay: 1.5s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }

  .hero-cta:hover {
    transform: scale(1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }

  /* Pulse Animation for CTA */
  @keyframes pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(209, 194, 135, 0.7);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(209, 194, 135, 0);
    }
  }

  /* Fade In Animation */
  @keyframes fadeIn {
    to { opacity: 1; }
  }

  /* Fade In Up Animation */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Grow X Animation for Divider */
  @keyframes growX {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* Floating Particles */
  .floating-particle {
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0.1;
    pointer-events: none;
    animation: float 20s linear infinite, rotate 10s linear infinite;
  }

  .dna, .heart, .stethoscope {
    fill: var(--c-gold);
    opacity: 0.1;
    width: 40px;
    height: 40px;
  }

  /* Animations */
  @keyframes float {
    0% { transform: translateY(0) scale(1); opacity: 0.1; }
    50% { transform: translateY(-30px) scale(1.1); opacity: 0.2; }
    100% { transform: translateY(0) scale(1); opacity: 0.1; }
  }

  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Interactive Particle Hover Effect */
  .hero-container:hover .floating-particle {
    animation-play-state: paused;
  }

  .floating-particle:hover {
    transform: scale(1.5) rotate(360deg);
    opacity: 0.5;
    animation-play-state: paused;
    z-index: 3;
  }

  /* Enhanced Interactive Background */
  .hero-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease;
    z-index: 0;
  }

  .hero-container:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.1;
  }

  /* Responsive Design */
  @media (min-width: 768px) {
    .hero-title { font-size: 3.5rem; }
    .hero-description { font-size: 1.3rem; }
  }

  @media (min-width: 1024px) {
    .hero-title { font-size: 4rem; }
    .hero-description { font-size: 1.4rem; }
  }

  @media (max-width: 480px) {
    .hero-content {
      padding: 2rem 1rem;
    }
    .hero-title {
      font-size: 2.5rem;
    }
    .hero-description {
      font-size: 1rem;
    }
    .hero-cta {
      padding: 0.6rem 1.5rem;
    }
  }
</style>

<section class="hero-container" aria-label="Welcome to Longeva">
  <div class="particle-container" id="particles"></div>
  
  <div class="hero-content">
    <!-- Subtitle -->
    <p class="hero-subtitle">Advanced Health Solutions</p>

    <!-- Divider Line -->
    <div class="divider"></div>

    <!-- Main Title -->
    <h1 class="hero-title">
      We Care For You, One Cell at A Time
    </h1>

    <!-- Description -->
    <p class="hero-description">
      Luxury Concierge Medicine. <br>
      Discover personalized solutions to reverse chronic conditions and break free from disease and aging with Longeva.
    </p>
    
    <!-- Call to Action Button -->
    <a href="#scrollDown" class="hero-cta" aria-label="Scroll down to learn more">
      Transform Your Future
    </a>
  </div>
</section>

<script>
  // SVG Icons as Particle Data
  const svgIcons = [
    `<svg class="dna" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <path d="M32 2C15.432 2 2 15.432 2 32s13.432 30 30 30 30-13.432 30-30S48.568 2 32 2zm0 58C17.664 60 4 46.336 4 32S17.664 4 32 4s28 13.664 28 28-13.664 28-28 28z"/>
      <path d="M32 6C18.745 6 8 16.745 8 30s10.745 24 24 24 24-10.745 24-24S45.255 6 32 6zm0 44c-11.046 0-20-8.954-20-20S20.954 10 32 10s20 8.954 20 20-8.954 20-20 20z"/>
    </svg>`,
    `<svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 29.6">
      <path d="M23.6,0c-3.4,0-6.4,1.7-8,4.3C14.8,1.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,10.1,16,21.2,16,21.2s16-11.1,16-21.2
        C32,3.8,28.2,0,23.6,0z"/>
    </svg>`,
    `<svg class="stethoscope" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <path d="M32 2C17.664 2 6 13.664 6 28s11.664 26 26 26 26-11.664 26-26S46.336 2 32 2zm0 48c-11.046 0-20-8.954-20-20S20.954 10 32 10s20 8.954 20 20-8.954 20-20 20z"/>
      <path d="M32 16a12 12 0 100 24 12 12 0 000-24zm0 20a8 8 0 110-16 8 8 0 010 16z"/>
    </svg>`
  ];

  // Create floating particles with healthcare-themed SVGs
  function createParticles() {
    const container = document.getElementById('particles');
    const particleCount = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--particle-count')) || 20;

    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.className = 'floating-particle';
      
      // Select a random SVG icon
      const svgIcon = svgIcons[Math.floor(Math.random() * svgIcons.length)];
      particle.innerHTML = svgIcon;
      
      // Random size between 30px and 50px
      const size = Math.random() * 20 + 30;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;
      
      // Random position
      particle.style.left = `${Math.random() * 100}%`;
      particle.style.top = `${Math.random() * 100}%`;
      
      // Random animation duration between 15-25s
      const duration = Math.random() * 10 + 15;
      particle.style.animationDuration = `${duration}s, ${duration / 2}s`;
      
      // Random animation delay to stagger the animations
      const delay = Math.random() * 10;
      particle.style.animationDelay = `${delay}s, ${delay / 2}s`;
      
      container.appendChild(particle);
    }

    // Add interactive mouse movement effect with a parallax effect
    const heroContainer = document.querySelector('.hero-container');
    heroContainer.addEventListener('mousemove', (e) => {
      const mouseX = e.clientX;
      const mouseY = e.clientY;
      const centerX = window.innerWidth / 2;
      const centerY = window.innerHeight / 2;
      const deltaX = (mouseX - centerX) / centerX;
      const deltaY = (mouseY - centerY) / centerY;
      
      container.style.transform = `translate(${deltaX * 20}px, ${deltaY * 20}px)`;
      container.style.transition = 'transform 0.1s ease';
    });

    // Reset particle container position when mouse leaves
    heroContainer.addEventListener('mouseleave', () => {
      container.style.transform = `translate(0, 0)`;
      container.style.transition = 'transform 0.5s ease';
    });
  }

  // Initialize particles when the page loads
  document.addEventListener('DOMContentLoaded', createParticles);
</script>) don't add effect white cicrle and add more insteractive animation codes and add more feautres and make it cool design plz