in this codes (<style>
  /* Global Styles */
  :root {
    --c-background: #2b2b2b;
    --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;
  }

  /* Hero Container */
  .hero-container {
    background-color: var(--c-background);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    color: var(--c-white);
  }

  .particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* Hero Content */
  .hero-content {
    padding: 4rem 1.5rem;
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    margin: auto;
  }

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

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

  /* Main Title */
  .hero-title {
    font-family: var(--f-primary);
    font-size: 3rem;
    line-height: 1.2;
    background: var(--c-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
  }

  /* Description */
  .hero-description {
    font-size: 1.1rem;
    color: var(--c-white);
    opacity: 0.8;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeIn 2.5s ease forwards;
  }

  /* 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);
    opacity: 0;
    animation: fadeIn 3s ease forwards;
  }

  .hero-cta:hover {
    transform: translateY(-3px);
  }

  /* Floating Particles */
  .floating-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--c-gradient);
    opacity: 0.1;
    pointer-events: none;
  }

  /* Animations */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes particleFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(10px, -10px); }
    50% { transform: translate(0, -20px); }
    75% { transform: translate(-10px, -10px); }
  }

  /* 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; }
  }
</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>
  // Create floating particles
  function createParticles() {
    const container = document.getElementById('particles');
    for (let i = 0; i < 15; i++) {
      const particle = document.createElement('div');
      particle.className = 'floating-particle';
      
      // Random size between 10px and 50px
      const size = Math.random() * 40 + 10;
      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 10-20s
      const duration = Math.random() * 10 + 10;
      particle.style.animation = `particleFloat ${duration}s infinite`;
      
      container.appendChild(particle);
    }
  }

  // Initialize particles when the page loads
  document.addEventListener('DOMContentLoaded', createParticles);
</script>
) and i want to make super hero design and add more codes and change circles shapes to someting related to dna and healthcare and genetic and type full codes please and don't change the styles and don't add head and html tags