i want to change this codes (<!-- 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 */
    color: var(--c-white);
  }

  /* Background Video */
  .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: 0.6;
  }

  /* Overlay Image */
  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://via.placeholder.com/1920x1080') center center / cover no-repeat;
    mix-blend-mode: overlay;
    z-index: -1;
    opacity: 0.4;
  }

  /* 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); /* White text */
    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 -->
<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>

<!-- Hero Section -->
<section class="hero-section" aria-labelledby="hero-title" role="banner">
  <!-- Background Video -->
  <video class="hero-video" autoplay muted loop playsinline>
    <source src="https://www.example.com/path-to-your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <!-- Overlay Image -->
  <div class="hero-overlay" aria-hidden="true"></div>

  <!-- Particle Background -->
  <div class="particle-container" aria-hidden="true"></div>

  <!-- Hero Content -->
  <div class="hero-content">
    <h2 class="hero-subtitle">Begin Your Journey with Longeva Care</h2>
    <hr class="hero-hr" aria-hidden="true">
    <h1 class="hero-title" id="hero-title">Unlock Your Best Health</h1>
    <p class="hero-description">
      Advanced Cellular Medicine for a Vibrant, Longer Life. Experience personalized healthcare that rejuvenates your body, reverses chronic conditions, and extends your longevity.
    </p>
    <a href="#get-started" class="hero-cta" role="button">Begin Your Journey</a>
  </div>
</section>) and use this content (1. Hero Section
Purpose: Capture attention immediately, convey the core message, and prompt action.

Content:

Headline:
Begin Your Journey with Advanced Health Solutions
Subheadline:
Luxury Concierge Medicine. We Care For You, One Cell at A Time.
Key Points:
Discover personalized solutions to reverse chronic conditions and break free from disease and aging with Longeva.
Call to Action (CTA):
Schedule Your Appointment (Button linking to Appointment Page)
Visuals:
High-quality hero image or a short introductory video.
UI/UX Tips:

Use a clean, uncluttered layout with ample white space.
Ensure the CTA button is prominent, using a contrasting color.
Make the headline bold and easily readable.
SEO Tips:

Include primary keywords such as "Luxury Concierge Medicine," "Reverse Chronic Conditions," and "Advanced Health Solutions."
) and don't change the styles, and make it great seo and don't add html and head tags, and make it great codes and this codes will one part of section, so make it classes names different and won't be conflict with other elements and mkae it cool and make users look at it cool