i want you to create html and css inline codes stylss and thsi content (Landing Page: Begin Your Journey with Longeva Care
1. Hero Section
Headline:
Unlock Your Best Health

Subheadline:
Advanced Cellular Medicine for a Vibrant, Longer Life

Visuals:

Background: Inspiring video loop of healthy, active individuals.
Image: Overlay of happy, diverse people showcasing vitality.
Primary Call-to-Action (CTA):
[Begin Your Journey]

Supporting Text:
Experience personalized healthcare that rejuvenates your body, reverses chronic conditions, and extends your longevity.

) and don't add html and head tags, and make it cool design and use this 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 Section */
  .hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    font-family: var(--f-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    background: transparent; /* Clean, transparent background */
  }

  /* 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;
  }

  /* Particle Animation */
  @keyframes moveParticle {
    from {
      transform: translateY(0) translateX(0);
      opacity: 0.7;
    }
    to {
      transform: translateY(-100vh) translateX(100px);
      opacity: 0;
    }
  }

  /* Hero Content */
  .hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
    color: var(--c-white); /* Changed text color to white */
    padding: 2rem;
    /* Removed background color/image for clean look */
    /* Optionally, add text-shadow for better readability */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  }

  .hero-content:hover {
    transform: translateY(-5px);
    /* Optionally, you can add hover effects if desired */
  }

  /* 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.3s;
  }

  /* 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.45s;
  }

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

  /* Description */
  .hero-description {
    font-family: var(--f-secondary);
    font-size: 1.1rem;
    color: var(--c-white); /* White text */
    opacity: 0;
    margin-bottom: 2rem;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.7s;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 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: 0.9s;
    position: relative;
    z-index: 1;
  }

  .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 */
  .hero-cta::before {
    content: '';
    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;
    pointer-events: none;
  }

  @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.2rem; }
    .hero-hr {
      width: 80px;
      height: 3px;
      animation-delay: 0.45s;
    }
    .hero-cta { padding: 0.8rem 3rem; font-size: 1.1rem; }
  }

  @media (min-width: 1024px) {
    .hero-title { font-size: 4rem; }
    .hero-description { font-size: 1.3rem; }
    .hero-hr {
      width: 100px;
      height: 3px;
      animation-delay: 0.45s;
    }
    .hero-cta { padding: 0.9rem 3.5rem; font-size: 1.2rem; }
  }

  @media (max-width: 480px) {
    .hero-content {
      padding: 2rem 1rem;
    }
    .hero-title {
      font-size: 2.5rem;
    }
    .hero-subtitle {
      font-size: 1.2rem;
    }
    .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.45s;
    }
    /* Hide interactive particles on small screens for performance */
    .particle-container {
      display: none;
    }
  }
</style>
<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; // Adjusted for performance

    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`;
      particle.style.animationDelay = `${Math.random() * 5}s`;
      particleContainer.appendChild(particle);
    }
  });
</script>) and make it great design and so cool design and type full codes and make it great FOR SEO, and you shuold this landing page, so imprtant page, make this section is first part of page,