i need to create landing page, and make it cool landing page and add more codes and this content (1. Hero Section
Headline:
Transform Your Health Journey
Subheadline:
Empower Your Life with Advanced Cellular Medicine
Visuals:
High-quality, inspiring images of healthy, vibrant individuals.
Engaging video background showcasing the Longeva care process.
Primary Call-to-Action (CTA):
[Start Your Transformation Today]
Supporting Text:
Experience personalized, cutting-edge healthcare designed to rejuvenate your body, reverse chronic conditions, and enhance your longevity.
) and i want you to create it like this codes styles (<!-- Styles -->
<style>
  /* Global Styles within the Hero Section */
  :root {
    --c-gold: #D1C287;
    --c-white: #ffffff;
    --c-black: #000000;
    --c-gradient: linear-gradient(135deg, #4F3F02, #D1C287);
    --f-primary: 'Poppins', sans-serif;
    --f-secondary: 'Roboto', sans-serif;
    --s-border-radius: 8px;
    --transition-speed: 0.3s;
    --hr-color: var(--c-gold);
    --max-width: 1200px;
  }

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

  /* Particle Background */
  .particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 0;
    pointer-events: none;
  }

  /* Particle Styles */
  .particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--c-gold);
    border-radius: 50%;
    opacity: 0.7;
    animation: moveParticle 10s linear infinite;
  }

  /* Generate Particles */
  .particle-container::before,
  .particle-container::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 50px 50px;
  }

  /* Example: Implementing Animated Particles */
  @keyframes moveParticle {
    from {
      transform: translateY(0) translateX(0);
      opacity: 0.7;
    }
    to {
      transform: translateY(-100vh) translateX(100px);
      opacity: 0;
    }
  }

  /* Interactive Icons */
  .interactive-icons {
    position: absolute;
    bottom: 10%;
    left: 5%;
    display: flex;
    gap: 2rem;
    z-index: 1;
    animation: slideIn 1s ease-out forwards;
  }

  .interactive-icons svg {
    width: 60px;
    height: 60px;
    fill: none;
    stroke: var(--c-gold);
  }

  .inner-cell {
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { r: 10; fill: var(--c-gold); }
    50% { r: 15; fill: var(--c-gold); }
  }

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

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

  /* Subtitle */
  .hero-subtitle {
    color: var(--c-gold);
    font-family: var(--f-secondary);
    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;
  }

  /* Horizontal Rule */
  .hero-hr {
    border: none;
    height: 2px;
    background: var(--hr-color);
    width: 60px;
    margin: 0.5rem auto 1.5rem auto;
    opacity: 0;
    transform: scaleX(0);
    animation: growX 1s ease forwards;
    animation-delay: 0.85s;
  }

  /* Divider Line */
  .divider {
    width: 40px;
    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.95s;
  }

  /* 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-family: var(--f-secondary);
    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 {
    position: relative;
    display: inline-block;
    background: var(--c-gradient);
    color: var(--c-white);
    padding: 0.8rem 2.5rem;
    font-family: var(--f-primary);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--s-border-radius);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), background 0.5s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: scale(0.9);
    animation: fadeIn 1s ease forwards;
    animation-delay: 1.5s;
  }

  .hero-cta:hover,
  .hero-cta:focus {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    background: var(--c-gold);
    outline: none;
  }

  /* Shimmer Effect */
  .shimmer {
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shimmer 2s infinite;
  }

  @keyframes shimmer {
    0% {
      left: -75%;
    }
    100% {
      left: 125%;
    }
  }

  /* 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 and HR */
  @keyframes growX {
    from { 
      transform: scaleX(0); 
      opacity: 0; /* Added opacity transition */
    }
    to { 
      transform: scaleX(1); 
      opacity: 1; /* Added opacity transition */
    }
  }

  /* Responsive Design */
  @media (min-width: 768px) {
    .hero-title { font-size: 3.5rem; }
    .hero-description { font-size: 1.3rem; }
    .hero-hr {
      width: 80px;
      height: 3px;
      animation-delay: 0.85s;
    }
    .divider {
      width: 60px;
      height: 3px;
      animation-delay: 0.95s;
    }
    .hero-cta { padding: 0.8rem 3rem; font-size: 1.1rem; }
    .interactive-icons { bottom: 15%; left: 10%; }
    .interactive-icons svg { width: 80px; height: 80px; }
  }

  @media (min-width: 1024px) {
    .hero-title { font-size: 4rem; }
    .hero-description { font-size: 1.4rem; }
    .hero-hr {
      width: 100px;
      height: 3px;
      animation-delay: 0.85s;
    }
    .divider {
      width: 80px;
      height: 3px;
      animation-delay: 0.95s;
    }
    .hero-cta { padding: 0.9rem 3.5rem; font-size: 1.2rem; }
    .interactive-icons { bottom: 20%; left: 15%; }
    .interactive-icons svg { width: 100px; height: 100px; }
  }

  @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;
      font-size: 0.9rem;
    }
    .hero-hr {
      width: 40px;
      height: 2px;
      animation-delay: 0.85s;
    }
    .divider {
      width: 30px;
      height: 2px;
      animation-delay: 0.95s;
    }
    .interactive-icons {
      display: none; /* Hide interactive icons on small screens */
    }
  }
</style>

<!-- Smooth Scroll Behavior and Interactive Particles -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Smooth scrolling for all internal links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({ behavior: 'smooth' });
          // Update URL hash without default jump
          history.pushState(null, null, this.getAttribute('href'));
        }
      });
    });

    // Keyboard accessibility for CTA button
    const ctaButton = document.querySelector('.hero-cta');
    ctaButton.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        ctaButton.click();
      }
    });

    // Generate particles for particle background
    const particleContainer = document.querySelector('.particle-container');
    const particleCount = 20;

    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.classList.add('particle');
      // Randomize particle position and animation duration
      particle.style.left = `${Math.random() * 100}%`;
      particle.style.top = `${Math.random() * 100}%`;
      particle.style.animationDuration = `${5 + Math.random() * 10}s`;
      particleContainer.appendChild(particle);
    }
  });
</script>) and don't add html and head tags, and make it different styles but same colors styles and make it create for SEO  and clean codes and easy loading and so more things