<style>
/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--teal: #3d8b85;
--teal-dark: #2a6b65;
--teal-light: #5aaca7;
--teal-pale: #e8f5f4;
--salmon-dark: #8f4225;
--salmon: #b35632;
--text: #1a2e2d;
--text-muted: #5a7170;
--border: #d6ecea;
--white: #ffffff;
--bg-light: #f5fafa;
--radius: 12px;
--shadow: 0 4px 24px rgba(42,107,101,.10);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', sans-serif;
color: var(--text);
background: var(--white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
.container {
width: 100%;
max-width: 1160px;
margin: 0 auto;
padding: 0 24px;
}
/* ===== HEADER ===== */
.site-header {
position: sticky; top: 0; z-index: 1000;
background: rgba(255,255,255,.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 12px rgba(42,107,101,.06);
}
.header-inner {
display: flex; align-items: center;
justify-content: space-between;
height: 72px; gap: 16px;
}
.site-logo img { height: 40px; width: auto; }
.main-nav { display: flex; gap: 4px; }
.main-nav a {
font-size: .88rem; font-weight: 500;
padding: 8px 13px; border-radius: 8px;
color: var(--text-muted);
transition: color .2s, background .2s;
white-space: nowrap;
}
.main-nav a:hover { color: var(--teal); background: var(--teal-pale); }
.main-nav a.active { color: var(--teal); font-weight: 600; }
.btn-cta {
display: inline-flex; align-items: center; gap: 6px;
background: var(--salmon); color: var(--white);
font-size: .88rem; font-weight: 600;
padding: 10px 20px; border-radius: 50px;
border: none; cursor: pointer;
transition: background .2s, transform .15s;
white-space: nowrap;
}
.btn-cta:hover { background: var(--salmon-dark); transform: translateY(-1px); }
.btn-outline {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; color: var(--teal);
font-size: .95rem; font-weight: 600;
padding: 12px 28px; border-radius: 50px;
border: 2px solid var(--teal);
cursor: pointer; transition: background .2s, color .2s;
}
.btn-outline:hover { background: var(--teal); color: var(--white); }
/* hamburger */
.nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-toggle span {
width: 24px; height: 2px;
background: var(--text); border-radius: 2px;
transition: transform .3s, opacity .3s;
}
.mobile-nav {
display: none; flex-direction: column; gap: 4px;
padding: 16px 24px 20px; border-top: 1px solid var(--border);
background: var(--white);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
font-size: .95rem; font-weight: 500;
padding: 10px 14px; border-radius: 8px;
color: var(--text-muted);
}
.mobile-nav a:hover { background: var(--teal-pale); color: var(--teal); }
.mobile-nav .btn-cta { margin-top: 8px; justify-content: center; }
/* ===== HERO ===== */
.hero {
background:
linear-gradient(135deg, rgba(234,247,246,.62) 0%, rgba(240,251,249,.45) 50%, rgba(254,246,241,.62) 100%),
url('images/ourscience.jpg') center/cover no-repeat;
padding: 80px 0 0;
overflow: hidden;
position: relative;
}
.hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
padding-bottom: 60px;
}
.hero-text h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.15;
color: var(--text);
margin-bottom: 20px;
}
.hero-text h1 span { color: var(--teal); }
.hero-text p {
font-size: 1.05rem;
color: var(--text-muted);
margin-bottom: 32px;
max-width: 480px;
}
.hero-image {
position: relative;
display: flex; justify-content: center; align-items: flex-end;
}
.hero-image img {
width: 100%; max-width: 520px;
border-radius: 16px 16px 0 0;
object-fit: cover;
}
.hero-image video {
width: 100%; max-width: 520px;
border-radius: 16px 16px 0 0;
object-fit: cover;
display: block;
box-shadow: 0 -2px 40px rgba(42,107,101,.16);
}
.hero-video-toggle {
position: absolute; bottom: 12px; right: 12px; z-index: 2;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(26,46,45,.75); color: var(--white);
border: 0; padding: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .2s;
}
.hero-video-toggle:hover { background: rgba(26,46,45,.95); }
.hero-video-toggle:focus-visible {
outline: 3px solid var(--teal-light); outline-offset: 2px;
}
.hero-video-toggle svg { display: block; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.pillar-card, .ingredient-card,
.btn-cta, .btn-white, .btn-outline,
.hero-video-toggle {
transition: none;
}
.pillar-card:hover, .ingredient-card:hover { transform: none; }
}
.hero-image-placeholder {
width: 100%; max-width: 480px; height: 360px;
background: linear-gradient(135deg, var(--teal-pale) 0%, #d4eeec 100%);
border-radius: 16px 16px 0 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 12px;
color: var(--teal); font-weight: 600;
}
.hero-badges {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 24px;
}
.badge {
display: inline-flex; align-items: center; gap: 6px;
background: var(--white); border: 1px solid var(--border);
border-radius: 50px; padding: 6px 14px;
font-size: .8rem; font-weight: 600;
color: var(--teal-dark);
box-shadow: var(--shadow);
}
.badge svg { flex-shrink: 0; }
/* ===== THREE PILLARS ===== */
.pillars { padding: 72px 0; background: var(--white); }
.section-label {
display: inline-block;
background: var(--teal-pale);
color: var(--teal-dark);
font-size: .78rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
padding: 5px 14px; border-radius: 50px;
margin-bottom: 12px;
}
.section-heading {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800; line-height: 1.2;
color: var(--text); margin-bottom: 14px;
}
.section-sub {
font-size: 1rem; color: var(--text-muted);
max-width: 580px; margin: 0 auto 56px;
}
.section-header { text-align: center; }
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.pillar-card {
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px 28px;
text-align: center;
transition: box-shadow .2s, transform .2s;
}
.pillar-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.pillar-icon {
width: 64px; height: 64px;
background: var(--teal-pale);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
color: var(--teal);
}
.pillar-card h3 {
font-size: 1.2rem; font-weight: 700;
color: var(--text); margin-bottom: 10px;
}
.pillar-card p { font-size: .9rem; color: var(--text-muted); line-height: 1.6; }
/* ===== PROCESS STEPS ===== */
.process { padding: 72px 0; background: var(--bg-light); }
.steps-track {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
position: relative;
margin-top: 48px;
}
.steps-track::before {
content: '';
position: absolute;
top: 36px; left: 10%; right: 10%;
height: 2px;
background: linear-gradient(90deg, var(--teal) 0%, var(--teal-light) 100%);
z-index: 0;
}
.step {
display: flex; flex-direction: column;
align-items: center; text-align: center;
padding: 0 12px;
position: relative; z-index: 1;
}
.step-num {
width: 72px; height: 72px;
background: var(--white);
border: 3px solid var(--teal);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; font-weight: 800; color: var(--teal);
margin-bottom: 20px;
box-shadow: 0 0 0 6px var(--bg-light);
}
.step h3 {
font-size: .9rem; font-weight: 700;
color: var(--text); margin-bottom: 8px;
}
.step p { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
/* ===== TARGETING SYSTEMS ===== */
.targeting { padding: 80px 0; background: var(--white); }
.targeting-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.targeting-text h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800; margin-bottom: 16px;
}
.targeting-text p { color: var(--text-muted); margin-bottom: 28px; }
.target-list { display: flex; flex-direction: column; gap: 14px; }
.target-item {
display: flex; align-items: center; gap: 14px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 10px; padding: 14px 18px;
}
.target-icon {
width: 42px; height: 42px; flex-shrink: 0;
background: var(--teal-pale);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: var(--teal);
}
.target-item span { font-size: .9rem; font-weight: 600; color: var(--text); }
.targeting-visual {
position: relative;
display: flex; justify-content: center;
}
.product-mockup {
width: 100%; max-width: 380px; height: 420px;
background: linear-gradient(145deg, var(--teal-pale) 0%, #cde9e7 100%);
border-radius: 20px;
overflow: hidden;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 14px;
color: var(--teal); font-weight: 700; font-size: 1.1rem;
box-shadow: var(--shadow);
}
.product-mockup img { width: 100%; height: 100%; object-fit: cover; }
/* ===== TWO COLUMNS ===== */
.two-col { padding: 80px 0; background: var(--bg-light); }
.two-col-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.feature-panel {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px 36px;
}
.feature-panel h3 {
font-size: 1.2rem; font-weight: 700;
color: var(--text); margin-bottom: 8px;
}
.feature-panel .sub {
font-size: .9rem; color: var(--text-muted); margin-bottom: 28px;
}
.check-list { display: flex; flex-direction: column; gap: 12px; }
.check-item {
display: flex; align-items: flex-start; gap: 12px;
font-size: .9rem; color: var(--text);
}
.check-dot {
width: 22px; height: 22px; flex-shrink: 0;
background: var(--teal);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.check-dot svg { color: var(--white); }
/* ===== COMMITMENT ===== */
.commitment { padding: 80px 0; background: var(--white); }
.commitment-inner { text-align: center; max-width: 700px; margin: 0 auto; }
.commitment-inner h2 { margin-bottom: 16px; }
.commitment-inner p { color: var(--text-muted); font-size: 1.05rem; }
/* ===== CTA BANNER ===== */
.cta-banner {
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
padding: 64px 24px;
text-align: center;
}
.cta-banner h2 {
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 800; color: var(--white);
margin-bottom: 12px;
}
.cta-banner p {
color: rgba(255,255,255,.8);
margin-bottom: 32px; font-size: 1rem;
}
.btn-white {
display: inline-flex; align-items: center; gap: 8px;
background: var(--white); color: var(--teal-dark);
font-size: .95rem; font-weight: 700;
padding: 14px 32px; border-radius: 50px;
border: none; cursor: pointer;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
/* ===== FOOTER ===== */
.site-footer {
background: var(--text);
color: rgba(255,255,255,.7);
padding: 48px 0 24px;
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px; margin-bottom: 40px;
}
.footer-brand img { height: 36px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer-brand p { font-size: .85rem; line-height: 1.7; max-width: 260px; }
.footer-col h5 {
font-size: .85rem; font-weight: 700; color: var(--white);
text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px;
}
.footer-col a {
display: block; font-size: .85rem;
padding: 3px 0; color: rgba(255,255,255,.6);
transition: color .2s;
}
.footer-col a:hover { color: var(--teal-light); }
.footer-badges {
display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
margin-top: 20px;
}
.trust-badge {
background: #ffffff;
border-radius: 10px;
padding: 8px 10px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.trust-badge img { height: 72px; width: auto; display: block; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 20px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
font-size: .8rem;
}
.footer-bottom a { color: rgba(255,255,255,.5); }
.footer-bottom a:hover { color: var(--teal-light); }
/* ===== INGREDIENT CRITERIA GRID ===== */
.ingredient-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 8px;
}
.ingredient-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px 24px;
text-align: center;
transition: box-shadow .2s, transform .2s;
}
.ingredient-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.ingredient-card-icon {
width: 60px; height: 60px;
background: var(--teal-pale);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
color: var(--teal);
}
.ingredient-card h3 {
font-size: .95rem; font-weight: 700;
color: var(--text); margin-bottom: 10px;
}
.ingredient-card p { font-size: .84rem; color: var(--text-muted); line-height: 1.6; }
.ingredient-card .card-accent {
display: block; width: 32px; height: 3px;
background: var(--teal); border-radius: 2px;
margin: 14px auto 0;
}
.text-on-light { color: #1a2e2d !important; }
.text-on-dark { color: #ffffff !important; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.steps-track { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.steps-track::before { display: none; }
.footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.main-nav { display: none; }
.nav-toggle { display: flex; }
.hero-inner { grid-template-columns: 1fr; gap: 36px; }
.hero { padding: 48px 0 0; }
.hero-image { order: -1; }
.hero-text p { max-width: 100%; }
.pillars-grid { grid-template-columns: 1fr; }
.steps-track { grid-template-columns: 1fr 1fr; }
.targeting-inner { grid-template-columns: 1fr; }
.targeting-visual { display: none; }
.two-col-grid { grid-template-columns: 1fr; }
.ingredient-grid { grid-template-columns: 1fr 1fr; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
.footer-badges { justify-content: center; }
}
@media (max-width: 480px) {
.hero-text h1 { font-size: 1.75rem; }
.steps-track { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; text-align: center; }
.hero-badges { justify-content: center; }
.pillar-card { padding: 28px 20px; }
}
</style>
<!-- ===== HERO ===== -->
<section class="hero" style="background:url('images/ourscience.jpg') center/cover no-repeat;">
<div class="container">
<div class="hero-inner" style="display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:80px; padding-top:20px;">
<div class="hero-text" style="display:flex; flex-direction:column; align-items:center; max-width:680px;">
<h1 style="text-align:center; font-size:clamp(2rem,4vw,3rem); font-weight:800; line-height:1.15; color:#1a2e2d; margin-bottom:20px;">Quality You Can See.<br/><span style="color:#3d8b85;">Products You Can Trust.</span></h1>
<p style="font-size:1.05rem; color:#5a7170; margin-bottom:32px; text-align:center; max-width:600px;">At NutraAxis, quality isn't a step — it's a standard. Every batch we produce is tested for purity, potency, and safety so you can feel confident in every capsule.</p>
<div style="display:flex; gap:16px; flex-wrap:wrap; justify-content:center;">
<a href="/categories" style="display:inline-flex; align-items:center; background:#3d8b85; color:#ffffff; font-size:1rem; font-weight:600; padding:13px 32px; border-radius:50px; text-decoration:none; white-space:nowrap;">Explore Our Products</a>
<a href="/our-quality" style="display:inline-flex; align-items:center; background:transparent; color:#3d8b85; font-size:1rem; font-weight:600; padding:12px 30px; border-radius:50px; border:2px solid #3d8b85; text-decoration:none; white-space:nowrap;">See Our Quality Standards</a>
</div>
</div>
</div>
</div>
</section>
<!-- ===== THREE PILLARS ===== -->
<section class="pillars">
<div class="container">
<div class="section-header">
<div class="section-label">Our COAs</div>
<h2 class="section-heading">We Provide Our COAs for Transparency</h2>
<p class="section-sub">Every formula we create is held to the same standard: it must be evidence-led, mechanism-driven, and clinically relevant. What is on the label is what you are purchasing. Establishing trust is a driving principle for NutraAxis.</p>
</div>
<div class="pillars-grid">
<div class="pillar-card">
<div class="pillar-icon">
<svg aria-hidden="true" focusable="false" fill="none" height="28" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24" width="28">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
</svg>
</div>
<h3>Transparent</h3>
<p>NutraAxis is committed to transparency in our ingredients and manufacturing processes.</p>
</div>
<div class="pillar-card">
<div class="pillar-icon">
<svg aria-hidden="true" focusable="false" fill="none" height="28" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24" width="28">
<circle cx="12" cy="12" r="3"></circle><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"></path>
</svg>
</div>
<h3>Rooted in Science</h3>
<p>Every NutraAxis formulation is crafted alongside seasoned industry specialists who bring deep expertise in ingredient science, ensuring each component is thoughtfully selected and combined for compatibility and stability.</p>
</div>
<div class="pillar-card">
<div class="pillar-icon">
<svg aria-hidden="true" focusable="false" fill="none" height="28" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24" width="28">
<path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
</div>
<h3>Quality Centric</h3>
<p>Every NutraAxis product moves through a rigorous multi-stage quality process, from raw material verification before production, to in-process testing at our contract manufacturer, to finished goods testing conducted both internally and by independent third-party laboratories before reaching our customers.</p>
</div>
</div>
</div>
</section>
<!-- ===== COA Table Block (dynamic rows from NutraAxis API) ===== -->
<section class="coa-section" style="padding: 72px 0; background: var(--bg-light);">
<div class="container">
<div class="section-header" style="margin-bottom: 40px;">
<div class="section-label">Certificates of Analysis</div>
<h2 class="section-heading">Batch-Level Documentation</h2>
<p class="section-sub" style="margin-bottom: 0;">
Every NutraAxis product is third-party tested before it reaches you. Below you'll find the
Certificate of Analysis (COA) for each lot we've released — confirming identity, purity, and
potency against label claims. Enter a lot number from your label to verify your specific batch.
</p>
</div>
<div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; align-items: center;">
<input
id="coa-search"
type="search"
placeholder="Search by product or lot number…"
aria-label="Search COA table"
oninput="filterCOA(this.value)"
style="flex: 1 1 260px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 50px; font-size: .9rem; color: var(--text); background: var(--white); outline-offset: 2px;"
/>
<span id="coa-count" style="font-size: .85rem; color: var(--text-muted); white-space: nowrap;"></span>
</div>
<div style="background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);">
<div style="overflow-x: auto;">
<table id="coa-table" style="width: 100%; border-collapse: collapse; font-size: .9rem; color: var(--text);">
<thead>
<tr style="background: var(--teal); color: var(--white);">
<th scope="col" style="padding: 14px 20px; text-align: left; font-weight: 700; white-space: nowrap;">Product</th>
<th scope="col" style="padding: 14px 20px; text-align: left; font-weight: 700; white-space: nowrap;">Lot Number</th>
<th scope="col" style="padding: 14px 20px; text-align: left; font-weight: 700; white-space: nowrap;">Expiration Date</th>
<th scope="col" style="padding: 14px 20px; text-align: center; font-weight: 700; white-space: nowrap;">Certificate of Analysis</th>
</tr>
</thead>
<tbody id="coa-tbody">
<tr>
<td colspan="4" style="padding: 24px; text-align: center; color: var(--text-muted);">
Loading certificates…
</td>
</tr>
</tbody>
<tfoot>
<tr id="coa-empty" style="display: none;">
<td colspan="4" style="padding: 36px; text-align: center; color: var(--text-muted);">
No results found. Try a different product name or lot number.
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<p style="margin-top: 16px; font-size: .8rem; color: var(--text-muted); text-align: center;">
Can't find your lot? <a href="/contact" style="color: var(--teal); font-weight: 600; text-decoration: underline;">Contact us</a> and we'll send the COA directly.
</p>
</div>
</section>
<script>
(function () {
function filterCOA(query) {
var rows = document.querySelectorAll('#coa-tbody .coa-row');
var empty = document.getElementById('coa-empty');
var count = document.getElementById('coa-count');
var q = query.trim().toLowerCase();
var visible = 0;
rows.forEach(function (row) {
var text = row.textContent.toLowerCase();
var show = !q || text.indexOf(q) !== -1;
row.style.display = show ? '' : 'none';
if (show) visible++;
});
if (empty) {
empty.style.display = (visible === 0 && rows.length > 0) ? '' : 'none';
}
if (count) {
count.textContent = q ? (visible + ' result' + (visible !== 1 ? 's' : '')) : '';
}
}
window.filterCOA = filterCOA;
})();
</script>
<script src="https://nutraaxisweb.azurewebsites.net/coa-test/coa-table-dynamic.js"></script>
<!-- ===== COMMITMENT ===== -->
<section class="commitment">
<div class="container">
<div class="commitment-inner">
<div class="section-label">Ongoing Research</div>
<h2 class="section-heading">A Commitment to Continuous Learning</h2>
<p>We continuously monitor emerging scientific literature to ensure every product formulation reflects the current state of evidence. Science evolves — and so do we.</p>
</div>
</div>
</section>
<!-- ===== CTA BANNER ===== -->
<section class="cta-banner">
<div class="container">
<h2>Explore Our Formulations</h2>
<p class="text-on-dark">Discover products designed with a science-first approach.</p>
<a class="btn-white" href="/categories">
View Products
<svg aria-hidden="true" focusable="false" fill="none" height="16" stroke="currentColor" stroke-width="2.5" viewbox="0 0 24 24" width="16"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
</a>
</div>
</section>