in this codes (<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
  <style>
    /* ==== Root Variables ==== */
    :root {
      --c-gradient: linear-gradient(45deg, #D1C287, #4F3F02);
      --c-gray: #4a4a4a;
      --c-light-gray: #f5f5f5;
      --c-white: #ffffff;
      --c-text-light: #d9d9d9;
      --c-accent: #FFD700; /* Gold accent for icons and highlights */
      --f-primary: 'Lato', sans-serif;
      --s-border-radius: 8px;
      --transition-speed: 0.3s;
      --shadow-light: 0 4px 8px rgba(0, 0, 0, 0.1);
      --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.2);
      --btn-bg: #4F3F02;
      --btn-text: #ffffff;
      --btn-hover-bg: #FFD700;
      --btn-hover-text: #4F3F02;
    }

    /* ==== Global Styles ==== */
    body {
      font-family: var(--f-primary);
      background-color: var(--c-light-gray);
      margin: 0;
      padding: 0;
      color: var(--c-text-light);
    }

    /* ==== Container Styling ==== */
    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 40px 20px;
      box-sizing: border-box;
    }

    /* ==== Header Styling ==== */
    .header {
      background: var(--c-gradient);
      color: var(--c-white);
      padding: 20px;
      font-size: 28px;
      margin-bottom: 30px;
      border-radius: var(--s-border-radius);
      text-align: center;
      box-shadow: var(--shadow-light);
      transition: box-shadow var(--transition-speed), transform var(--transition-speed);
    }

    .header:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-3px);
    }

    /* ==== Services Grid ==== */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
    }

    /* ==== Service Card Styling ==== */
    .service-card {
      background-color: var(--c-gray);
      border-radius: var(--s-border-radius);
      padding: 25px 20px;
      box-shadow: var(--shadow-light);
      transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
      background-color: #3a3a3a;
    }

    /* ==== Icon Styling ==== */
    .service-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 15px;
      fill: var(--c-accent);
      transition: fill var(--transition-speed);
    }

    .service-card:hover .service-icon {
      fill: var(--btn-hover-bg);
    }

    /* ==== Service Title ==== */
    .service-title {
      font-size: 22px;
      margin: 0 0 15px 0;
      color: var(--c-white);
      font-weight: 700;
    }

    /* ==== Service Description ==== */
    .service-description {
      flex-grow: 1;
      font-size: 16px;
      line-height: 1.6;
      color: var(--c-text-light);
      margin-bottom: 20px;
    }

    /* ==== Button Styling ==== */
    .service-button {
      background-color: var(--btn-bg);
      color: var(--btn-text);
      border: none;
      padding: 10px 20px;
      border-radius: var(--s-border-radius);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      font-size: 16px;
      text-decoration: none;
      transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed);
      width: fit-content;
    }

    .service-button:hover {
      background-color: var(--btn-hover-bg);
      color: var(--btn-hover-text);
      transform: translateX(2px);
    }

    /* ==== Arrow Icon in Button ==== */
    .service-button svg {
      margin-left: 8px;
      fill: currentColor;
      width: 14px;
      height: 14px;
      transition: transform var(--transition-speed);
    }

    /* ==== Responsive Design ==== */
    @media (max-width: 1024px) {
      .header {
        font-size: 24px;
      }

      .service-title {
        font-size: 20px;
      }

      .service-description {
        font-size: 15px;
      }

      .service-button {
        font-size: 15px;
      }
    }

    @media (max-width: 768px) {
      .header {
        font-size: 22px;
      }

      .service-icon {
        width: 35px;
        height: 35px;
      }

      .service-title {
        font-size: 18px;
      }

      .service-description {
        font-size: 14px;
      }

      .service-button {
        font-size: 14px;
      }

      .service-button svg {
        width: 12px;
        height: 12px;
      }
    }

    @media (max-width: 480px) {
      .container {
        padding: 20px 10px;
      }

      .header {
        font-size: 20px;
      }

      .service-icon {
        width: 30px;
        height: 30px;
      }

      .service-title {
        font-size: 16px;
      }

      .service-description {
        font-size: 13px;
      }

      .service-button {
        font-size: 13px;
      }

      .service-button svg {
        width: 10px;
        height: 10px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Header Section -->
    <div class="header">The Foundation</div>

    <!-- Services Grid -->
    <div class="services-grid">
      <!-- Diagnostics Service Card -->
      <div class="service-card" tabindex="0" aria-labelledby="diagnostics-title" aria-describedby="diagnostics-desc">
        <!-- Diagnostics Icon (Laboratory Flask) -->
        <svg class="service-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
          <path d="M44 2H20a2 2 0 00-2 2v12a2 2 0 002 2h4v8a18 18 0 0036 0v-8h4a2 2 0 002-2V4a2 2 0 00-2-2zM40 14H24v8a14 14 0 0028 0v-8z"/>
        </svg>
        <h2 class="service-title" id="diagnostics-title">Diagnostics</h2>
        <p class="service-description" id="diagnostics-desc">
          Our advanced diagnostics program offers comprehensive assessments to identify cellular deficiencies, perform clinical evaluations through hair and skin analysis, and conduct genetic testing. This ensures personalized health strategies, precise interventions, and proactive management for optimal wellness and longevity.
        </p>
        <a href="https://longevacare.com/what-we-do/programs/the-longeva-diagnostics/" class="service-button" aria-label="View Details for Diagnostics">
          View Details
          <!-- Arrow Icon -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </a>
      </div>

      <!-- Protocols Service Card -->
      <div class="service-card" tabindex="0" aria-labelledby="protocols-title" aria-describedby="protocols-desc">
        <!-- Protocols Icon (Gear) -->
        <svg class="service-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
          <path d="M60.3 36.3l-5.3-3.1a23.7 23.7 0 00-1.4-3.3l3-5.3a2 2 0 00-2.3-2.7l-6 2a23.4 23.4 0 00-4.8-2.8l-1-6a2 2 0 00-1.9-1.6l-5.1-.8a23.9 23.9 0 00-3.4-4.8l1.8-5.1a2 2 0 00-1.9-2.7l-5.3-1a23.6 23.6 0 00-4.8-1.4l-3.1 5.3a2 2 0 00-2.7.1l-2 6a23.4 23.4 0 00-4.8 2.8l-6.1-.8a2 2 0 00-2.2 1.4l-1.8 5.1a23.9 23.9 0 00-4.8 3.4l-5.3-1a2 2 0 00-2.7 2.2l1 5.3a23.7 23.7 0 00-1.4 4.8l-5.3 3a2 2 0 001.1 3.3l6.1 1a23.4 23.4 0 004.8 2.8l2 6a2 2 0 002.7.1l5.3-3a23.6 23.6 0 004.8 1.4l3.1-5.3a2 2 0 002.2-2.7l-1.8-6.1a23.9 23.9 0 004.8-3.4l5.3 1a2 2 0 002.2-2.7zM32 40a8 8 0 118-8 8 8 0 01-8 8z"/>
        </svg>
        <h2 class="service-title" id="protocols-title">Protocols</h2>
        <p class="service-description" id="protocols-desc">
          Our tailored protocols encompass cellular micronutrient management, elimination of harmful substances, DNA protection, reversal of insulin resistance, immune system regulation, anti-aging treatments, disease deconditioning, neuropsychiatry, skin enhancements, lifestyle management, and relaxation techniques. These comprehensive strategies ensure holistic health and longevity.
        </p>
        <a href="https://longevacare.com/what-we-do/programs/protocols/" class="service-button" aria-label="View Details for Protocols">
          View Details
          <!-- Arrow Icon -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Optional: JavaScript for Accessibility Enhancements -->
  <script>
    // Enable keyboard navigation for service cards
    const serviceCards = document.querySelectorAll('.service-card');
    serviceCards.forEach(card => {
      card.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          this.querySelector('.service-button').click();
        }
      });
    });
  </script>
</body>
</html>) and ) i need to change the design and add more featuers and looks great and keep the styles of color and font and make the best ux and ui and make sure add icons and anaimatoin and interatavit with users