Filter Technology

{%- comment -%}
HydraTrail — Filter Technology Section
File: sections/ht-filter-technology.liquid

HOW TO ADD TO SHOPIFY — see bottom of this file
{%- endcomment -%}

#ht-fp {
font-family: 'DM Sans', -apple-system, sans-serif;
color: #e8f4ff;
background: #071428;
overflow-x: hidden;
}

/* ─── HERO ───────────────────────────────────────────── */
.ht-hero {
background: linear-gradient(180deg, #050e1f 0%, #0d2040 55%, #071428 100%);
padding: 80px 20px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.ht-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 55% at 50% 60%, rgba(42,106,191,0.18) 0%, transparent 70%);
pointer-events: none;
}

.ht-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 3.5px;
text-transform: uppercase;
color: #5a9de0;
margin-bottom: 18px;
}
.ht-hero-title {
font-family: 'Nunito', sans-serif;
font-size: clamp(30px, 5.5vw, 52px);
font-weight: 900;
line-height: 1.08;
margin-bottom: 18px;
background: linear-gradient(135deg, #2a6abf 0%, #5a9de0 45%, #a8d4f5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ht-hero-sub {
font-size: 16px;
color: #8ab4d4;
max-width: 520px;
margin: 0 auto 52px;
line-height: 1.65;
}

/* ─── SVG HALO ───────────────────────────────────────── */
.ht-halo-wrap {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.ht-ring {
transform-origin: 150px 150px;
transform-box: fill-box;
animation: ht-ring-pulse 3.2s ease-out infinite;
}
.ht-ring:nth-child(2) { animation-delay: 1.05s; }
.ht-ring:nth-child(3) { animation-delay: 2.1s; }

@keyframes ht-ring-pulse {
0% { transform: scale(1); opacity: 0.65; }
100% { transform: scale(1.55); opacity: 0; }
}

.ht-scan-line {
animation: ht-scan 2.8s ease-in-out infinite alternate;
}
@keyframes ht-scan {
0% { transform: translateY(-18px); opacity: 0.4; }
100% { transform: translateY(18px); opacity: 0.8; }
}

/* ─── STATS BAR ──────────────────────────────────────── */
.ht-stats {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
padding: 40px 20px 72px;
background: #071428;
}
.ht-stat {
background: rgba(42,106,191,0.1);
border: 1px solid rgba(90,157,224,0.28);
border-radius: 100px;
padding: 10px 22px;
display: flex;
align-items: center;
gap: 10px;
}
.ht-stat-val {
font-family: 'Nunito', sans-serif;
font-weight: 900;
font-size: 19px;
background: linear-gradient(135deg, #5a9de0, #a8d4f5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ht-stat-lbl { font-size: 13px; color: #8ab4d4; }

/* ─── SHARED SECTION ─────────────────────────────────── */
.ht-sec {
padding: 64px 20px;
max-width: 1080px;
margin: 0 auto;
}
.ht-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: #5a9de0;
margin-bottom: 12px;
}
.ht-title {
font-family: 'Nunito', sans-serif;
font-size: clamp(22px, 3.5vw, 36px);
font-weight: 800;
color: #e8f4ff;
line-height: 1.15;
margin-bottom: 14px;
}
.ht-body {
font-size: 15px;
color: #8ab4d4;
line-height: 1.7;
max-width: 600px;
margin-bottom: 40px;
}
.ht-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(90,157,224,0.25), transparent);
}

/* ─── WHAT IT FILTERS ────────────────────────────────── */
.ht-filter-bg { background: linear-gradient(180deg, #071428 0%, #091830 100%); }

.ht-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.ht-card {
background: rgba(14,31,61,0.75);
border: 1px solid rgba(90,157,224,0.18);
border-radius: 16px;
padding: 26px 22px;
transition: border-color .2s, transform .2s;
}
.ht-card:hover { border-color: rgba(90,157,224,0.45); transform: translateY(-2px); }
.ht-card.ht-blocked { border-color: rgba(255,90,90,0.14); background: rgba(35,12,12,0.45); }

.ht-card-ico {
width: 42px; height: 42px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; margin-bottom: 14px;
}
.ht-card.ht-pass .ht-card-ico { background: rgba(42,106,191,0.18); }
.ht-card.ht-blocked .ht-card-ico { background: rgba(200,55,55,0.14); }

.ht-card-title {
font-family: 'Nunito', sans-serif;
font-size: 15px; font-weight: 800; color: #e8f4ff; margin-bottom: 5px;
}
.ht-card-size { font-size: 11px; font-weight: 600; color: #5a9de0; margin-bottom: 9px; letter-spacing: .4px; }
.ht-card p { font-size: 13px; color: #8ab4d4; line-height: 1.6; }

.ht-badge {
display: inline-block; margin-top: 12px;
padding: 4px 11px; border-radius: 100px;
font-size: 11px; font-weight: 700; letter-spacing: .4px;
}
.ht-badge-pass { background: rgba(42,191,100,.13); color: #4de891; border: 1px solid rgba(42,191,100,.28); }
.ht-badge-block { background: rgba(200,55,55,.12); color: #ff7070; border: 1px solid rgba(200,55,55,.24); }

/* micron scale */
.ht-scale-box {
background: rgba(14,31,61,0.55);
border: 1px solid rgba(90,157,224,0.18);
border-radius: 16px;
padding: 26px 22px;
}
.ht-scale-head { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #5a9de0; margin-bottom: 18px; }
.ht-scale-track {
position: relative; height: 20px;
background: rgba(90,157,224,0.08);
border: 1px solid rgba(90,157,224,0.16);
border-radius: 10px; overflow: hidden; margin-bottom: 20px;
}
.ht-scale-threshold {
position: absolute; left: 13%; top: 0; width: 2px; height: 100%; background: #5a9de0; z-index: 3;
}
.ht-scale-threshold::after {
content: '0.1μm filter pore';
position: absolute; top: -22px; left: 4px;
font-size: 10px; font-weight: 700; color: #5a9de0; white-space: nowrap;
}
.ht-scale-zone {
position: absolute; top: 3px; height: 14px; border-radius: 7px;
}
.ht-scale-labels {
display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.ht-scale-lbl { text-align: center; font-size: 11px; }
.ht-scale-lbl .val { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; display: block; margin-bottom: 2px; }
.ht-scale-lbl .name { color: #8ab4d4; line-height: 1.3; }

/* ─── STEPS ──────────────────────────────────────────── */
.ht-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 18px; margin-top: 40px;
}
.ht-step {
padding: 26px 22px;
background: rgba(14,31,61,0.45);
border: 1px solid rgba(90,157,224,0.13);
border-radius: 16px;
}
.ht-step-n {
font-family: 'Nunito', sans-serif; font-size: 44px; font-weight: 900;
line-height: 1; margin-bottom: 10px;
background: linear-gradient(135deg, #2a6abf, #5a9de0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
opacity: .45;
}
.ht-step h4 { font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800; color: #e8f4ff; margin-bottom: 8px; }
.ht-step p { font-size: 13px; color: #8ab4d4; line-height: 1.6; }

/* ─── CLEANING ───────────────────────────────────────── */
.ht-clean-bg { background: linear-gradient(180deg, #071428 0%, #091830 100%); }
.ht-clean-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }

.ht-method {
background: rgba(14,31,61,0.6);
border: 1px solid rgba(90,157,224,0.18);
border-radius: 16px; padding: 26px 22px;
}
.ht-method h4 {
font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800;
color: #e8f4ff; margin-bottom: 12px;
display: flex; align-items: center; gap: 10px;
}
.ht-method-letter {
width: 28px; height: 28px;
background: linear-gradient(135deg, #2a6abf, #5a9de0);
border-radius: 8px; display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.ht-method p { font-size: 13px; color: #8ab4d4; line-height: 1.6; }
.ht-method-tip { font-size: 12px; color: #5a9de0; margin-top: 10px; }

.ht-dont {
margin-top: 22px;
background: rgba(35,10,10,0.4);
border: 1px solid rgba(255,90,90,0.16);
border-radius: 12px; padding: 20px 22px;
}
.ht-dont h5 {
font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800;
color: #ff9090; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.ht-dont ul { list-style: none; }
.ht-dont ul li {
font-size: 13px; color: #8ab4d4; padding: 4px 0 4px 18px;
position: relative; line-height: 1.55;
}
.ht-dont ul li::before { content: '×'; position: absolute; left: 0; color: #ff7070; font-weight: 700; }

/* ─── LIFESPAN ───────────────────────────────────────── */
.ht-life-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 15px; margin-top: 40px; }
.ht-life-card {
background: rgba(14,31,61,0.45);
border: 1px solid rgba(90,157,224,0.14);
border-radius: 16px; padding: 22px 18px; text-align: center;
}
.ht-life-ico { font-size: 30px; margin-bottom: 10px; }
.ht-life-val {
font-family: 'Nunito', sans-serif; font-size: 22px; font-weight: 900; margin-bottom: 4px;
background: linear-gradient(135deg, #5a9de0, #a8d4f5);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ht-life-lbl { font-size: 12px; color: #8ab4d4; line-height: 1.4; }

.ht-storage-box {
margin-top: 30px;
background: rgba(14,31,61,0.6);
border: 1px solid rgba(90,157,224,0.18);
border-radius: 16px; padding: 26px 22px;
}
.ht-storage-box h3 {
font-family: 'Nunito', sans-serif; font-size: 17px; font-weight: 800;
color: #e8f4ff; margin-bottom: 12px;
}
.ht-storage-box > p { font-size: 14px; color: #8ab4d4; line-height: 1.7; margin-bottom: 18px; }
.ht-storage-steps { display: flex; flex-direction: column; gap: 12px; }
.ht-storage-step { display: flex; gap: 12px; font-size: 13px; color: #8ab4d4; line-height: 1.6; }
.ht-step-num-circle {
min-width: 24px; height: 24px;
background: linear-gradient(135deg, #2a6abf, #5a9de0);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 11px; color: #fff; flex-shrink: 0; margin-top: 2px;
}
.ht-storage-note {
font-size: 12px; color: #4d6a80;
border-top: 1px solid rgba(90,157,224,0.1); padding-top: 14px; margin-top: 16px;
}

.ht-integrity-box {
margin-top: 20px;
background: rgba(42,106,191,0.07);
border: 1px solid rgba(90,157,224,0.18);
border-radius: 16px; padding: 22px;
}
.ht-integrity-box h3 { font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800; color: #e8f4ff; margin-bottom: 10px; }
.ht-integrity-box p { font-size: 13px; color: #8ab4d4; line-height: 1.6; margin-bottom: 12px; }
.ht-int-steps { display: flex; flex-direction: column; gap: 8px; }
.ht-int-step { display: flex; gap: 10px; font-size: 13px; color: #8ab4d4; }
.ht-int-step .num { color: #5a9de0; font-weight: 700; min-width: 18px; }

.ht-result {
display: flex; gap: 10px; font-size: 13px; padding: 12px;
border-radius: 9px; margin-top: 6px; align-items: flex-start;
}
.ht-result-pass { background: rgba(42,191,100,.06); border: 1px solid rgba(42,191,100,.16); }
.ht-result-fail { background: rgba(200,55,55,.06); border: 1px solid rgba(200,55,55,.16); }
.ht-result-pass .r-ico { color: #4de891; font-weight: 700; min-width: 18px; }
.ht-result-fail .r-ico { color: #ff7070; font-weight: 700; min-width: 18px; }
.ht-result-pass strong { color: #4de891; }
.ht-result-fail strong { color: #ff7070; }

/* ─── WARNING STRIP ──────────────────────────────────── */
.ht-warn {
background: rgba(255,160,40,.05);
border-top: 1px solid rgba(255,160,40,.2);
border-bottom: 1px solid rgba(255,160,40,.2);
padding: 22px 20px;
}
.ht-warn-inner { max-width: 820px; margin: 0 auto; display: flex; gap: 14px; align-items: flex-start; }
.ht-warn-ico { font-size: 19px; flex-shrink: 0; margin-top: 2px; }
.ht-warn-text { font-size: 13px; color: #c8a060; line-height: 1.65; }
.ht-warn-text strong { color: #ffaa44; font-family: 'Nunito', sans-serif; font-weight: 800; display: block; margin-bottom: 3px; font-size: 14px; }

/* ─── SGS PROOF ──────────────────────────────────────── */
.ht-lab {
background: linear-gradient(135deg, #091a35 0%, #071428 100%);
padding: 72px 20px;
text-align: center;
position: relative;
}
.ht-lab::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(42,106,191,.12) 0%, transparent 70%);
pointer-events: none;
}
.ht-lab-inner { max-width: 680px; margin: 0 auto; position: relative; }
.ht-lab-pill {
display: inline-flex; align-items: center; gap: 9px;
background: rgba(42,106,191,.1); border: 1px solid rgba(90,157,224,.28);
border-radius: 100px; padding: 8px 20px; margin-bottom: 32px;
font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #5a9de0;
}
.ht-lab-big {
font-family: 'Nunito', sans-serif;
font-size: clamp(56px, 11vw, 100px); font-weight: 900; line-height: 1; margin-bottom: 8px;
background: linear-gradient(135deg, #2a6abf 0%, #5a9de0 45%, #a8d4f5 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ht-lab-sub {
font-family: 'Nunito', sans-serif;
font-size: clamp(18px, 3.5vw, 28px); font-weight: 800; color: #a8d4f5; margin-bottom: 18px;
}
.ht-lab-desc { font-size: 15px; color: #8ab4d4; max-width: 480px; margin: 0 auto 32px; line-height: 1.7; }
.ht-lab-ref {
display: inline-block; padding: 14px 26px;
background: rgba(14,31,61,.8); border: 1px solid rgba(90,157,224,.22);
border-radius: 12px; font-size: 13px; color: #8ab4d4; line-height: 1.55;
}
.ht-lab-ref strong { color: #e8f4ff; display: block; font-family: 'Nunito', sans-serif; font-size: 14px; margin-bottom: 3px; }

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 720px) {
.ht-clean-grid { grid-template-columns: 1fr; }
.ht-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.ht-stats { flex-direction: column; align-items: center; }
.ht-steps { grid-template-columns: 1fr; }
.ht-cards { grid-template-columns: 1fr; }
}
</style>

<div class="ht-hero">
<p class="ht-eyebrow">Filter Technology</p>
<h2 class="ht-hero-title">Precision Filtration.<br>Built for the Wild.</h2>
<p class="ht-hero-sub">A 0.1 micron hollow fibre membrane that stops bacteria, protozoa and viruses — independently tested by SGS — so you drink clean wherever the trail takes you.</p>

<div class="ht-halo-wrap">
<svg viewBox="0 0 300 300" width="300" height="300" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="htGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#5a9de0" stop-opacity=".28"/>
<stop offset="100%" stop-color="#2a6abf" stop-opacity="0"/>
</radialGradient>
<linearGradient id="htBody" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1a3e7a"/>
<stop offset="100%" stop-color="#0b1e3c"/>
</linearGradient>
<linearGradient id="htCap" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3e7fd4"/>
<stop offset="100%" stop-color="#2a6abf"/>
</linearGradient>
<linearGradient id="htFiberGlow" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#5a9de0" stop-opacity="0"/>
<stop offset="50%" stop-color="#5a9de0" stop-opacity=".85"/>
<stop offset="100%" stop-color="#5a9de0" stop-opacity="0"/>
</linearGradient>
</defs>

<circle cx="150" cy="150" r="130" fill="url(#htGlow)"/>

<circle class="ht-ring" cx="150" cy="150" r="95" stroke="#5a9de0" stroke-width="1.5" fill="none" stroke-opacity=".55"/>
<circle class="ht-ring" cx="150" cy="150" r="95" stroke="#5a9de0" stroke-width="1" fill="none" stroke-opacity=".35"/>
<circle class="ht-ring" cx="150" cy="150" r="95" stroke="#a8d4f5" stroke-width=".6" fill="none" stroke-opacity=".3"/>

<circle cx="150" cy="150" r="90" stroke="#2a6abf" stroke-width="1" fill="none" stroke-opacity=".25" stroke-dasharray="5 9"/>

<rect x="116" y="96" width="68" height="118" rx="9" fill="url(#htBody)" stroke="#2a6abf" stroke-width="1.5"/>

<g stroke="#5a9de0" stroke-width=".8" opacity=".45">
<line x1="122" y1="112" x2="184" y2="112"/>
<line x1="122" y1="120" x2="184" y2="120"/>
<line x1="122" y1="128" x2="184" y2="128"/>
<line x1="122" y1="136" x2="184" y2="136"/>
<line x1="122" y1="144" x2="184" y2="144"/>
<line x1="122" y1="152" x2="184" y2="152"/>
<line x1="122" y1="160" x2="184" y2="160"/>
<line x1="122" y1="168" x2="184" y2="168"/>
<line x1="122" y1="176" x2="184" y2="176"/>
<line x1="122" y1="184" x2="184" y2="184"/>
<line x1="122" y1="192" x2="184" y2="192"/>
<line x1="122" y1="200" x2="184" y2="200"/>
</g>

<rect class="ht-scan-line" x="116" y="144" width="68" height="12" fill="url(#htFiberGlow)" opacity=".65" rx="2"/>

<rect x="120" y="84" width="60" height="16" rx="7" fill="url(#htCap)" stroke="#3e7fd4" stroke-width="1"/>

<rect x="134" y="68" width="32" height="18" rx="5" fill="#2a6abf" stroke="#3e7fd4" stroke-width="1"/>

<rect x="140" y="56" width="20" height="14" rx="4" fill="#1a3870" stroke="#3e7fd4" stroke-width="1"/>

<rect x="144" y="57" width="8" height="4" rx="2" fill="#5a9de0" opacity=".4"/>

<rect x="120" y="210" width="60" height="12" rx="6" fill="#14306a" stroke="#2a6abf" stroke-width="1"/>

<rect x="186" y="139" width="60" height="22" rx="7" fill="rgba(42,106,191,.2)" stroke="rgba(90,157,224,.38)" stroke-width="1"/>
<line x1="184" y1="150" x2="188" y2="150" stroke="#5a9de0" stroke-width="1" stroke-dasharray="2 2"/>
<text x="216" y="154" text-anchor="middle"
font-family="'DM Sans', sans-serif" font-size="10" font-weight="700" fill="#a8d4f5">0.1 μm</text>

<circle cx="88" cy="112" r="3.5" fill="#ff6060" opacity=".75"/>
<circle cx="80" cy="132" r="2.5" fill="#ff8888" opacity=".65"/>
<circle cx="92" cy="155" r="3" fill="#ff6060" opacity=".55"/>
<circle cx="77" cy="172" r="2" fill="#ff9090" opacity=".7"/>
<circle cx="90" cy="194" r="2.5" fill="#ff7070" opacity=".6"/>

<path d="M58 150 L104 150" stroke="#5a9de0" stroke-width="1.5" stroke-dasharray="3 4" opacity=".45"/>
<polygon points="104,146 114,150 104,154" fill="#5a9de0" opacity=".45"/>

<path d="M212 140 C212 140 208 145 208 149 C208 153 209.8 155 212 155 C214.2 155 216 153 216 149 C216 145 212 140 212 140 Z" fill="#5a9de0" opacity=".85"/>

<ellipse cx="210.5" cy="145" rx="1.5" ry="2.5" fill="white" opacity=".4"/>

<rect x="44" y="58" width="56" height="22" rx="7"
fill="rgba(42,191,100,.1)" stroke="rgba(42,191,100,.28)" stroke-width="1"/>
<text x="72" y="73" text-anchor="middle"
font-family="'DM Sans', sans-serif" font-size="8.5" font-weight="700" fill="#4de891">SGS TESTED</text>
</svg>
</div>
</div>

<div class="ht-stats">
<div class="ht-stat"><span class="ht-stat-val">>99.9999%</span><span class="ht-stat-lbl">Bacteria Removal</span></div>
<div class="ht-stat"><span class="ht-stat-val">0.1 μm</span><span class="ht-stat-lbl">Pore Precision</span></div>
<div class="ht-stat"><span class="ht-stat-val">1,000 L</span><span class="ht-stat-lbl">Filter Lifespan</span></div>
<div class="ht-stat"><span class="ht-stat-val">0.8 L/min</span><span class="ht-stat-lbl">Flow Rate</span></div>
</div>

<div class="ht-filter-bg">
<div class="ht-sec">
<p class="ht-label">Filtration Capability</p>
<h2 class="ht-title">What Gets Stopped.<br>What Gets Through.</h2>
<p class="ht-body">At 0.1 microns, the hollow fibre membrane is a physical barrier smaller than any bacteria or protozoa on earth. Here's exactly what that means in the field.</p>

<div class="ht-cards">
<div class="ht-card ht-pass">
<div class="ht-card-ico">🦠</div>
<div class="ht-card-title">Bacteria</div>
<div class="ht-card-size">0.2 – 5 microns</div>
<p>E. coli, Salmonella, Cholera, Campylobacter — and every other known bacterial pathogen. The smallest known bacteria is 0.2μm, so our 0.1μm membrane physically blocks them all.</p>
<span class="ht-badge ht-badge-pass">✓ Blocked</span>
</div>
<div class="ht-card ht-pass">
<div class="ht-card-ico">🔬</div>
<div class="ht-card-title">Protozoa & Parasites</div>
<div class="ht-card-size">1 – 15 microns</div>
<p>Cryptosporidium, Giardia (flagellates), Entamoeba histolytica, and hydra. Protozoa are far larger than the pore size — stopped completely without question.</p>
<span class="ht-badge ht-badge-pass">✓ Blocked</span>
</div>
<div class="ht-card ht-pass">
<div class="ht-card-ico">⚡</div>
<div class="ht-card-title">Viruses</div>
<div class="ht-card-size">0.02 – 0.2 microns</div>
<p>Viruses are technically smaller than the pore — but in natural water they almost always exist bonded to bacteria or organic debris, which the filter captures. Result: >99.9999% removal in real-world conditions.</p>
<span class="ht-badge ht-badge-pass">✓ 99.9999% Removed</span>
</div>
<div class="ht-card ht-blocked">
<div class="ht-card-ico">⚗️</div>
<div class="ht-card-title">Heavy Metals & Chemicals</div>
<div class="ht-card-size">Nanoscale (ionic)</div>
<p>Heavy metals and agricultural chemicals exist as dissolved ions — far too small for any hollow fibre membrane. Only reverse osmosis (RO) removes them. In the field: choose your source water wisely.</p>
<span class="ht-badge ht-badge-block">✗ Not Filtered</span>
</div>
</div>

<div class="ht-scale-box">
<p class="ht-scale-head">Size at a Glance — Micron Scale</p>
<div class="ht-scale-track">
<div class="ht-scale-threshold"></div>

<div class="ht-scale-zone" style="left:25%; width:40%; background:rgba(77,232,145,.13); border:1px solid rgba(77,232,145,.22);"></div>

<div class="ht-scale-zone" style="left:66%; width:28%; background:rgba(90,157,224,.13); border:1px solid rgba(90,157,224,.22);"></div>
</div>
<div class="ht-scale-labels">
<div class="ht-scale-lbl"><span class="val" style="color:#5a9de0;">0.1 μm</span><span class="name">Filter Pore</span></div>
<div class="ht-scale-lbl"><span class="val" style="color:#4de891;">0.2–5 μm</span><span class="name">Bacteria</span></div>
<div class="ht-scale-lbl"><span class="val" style="color:#a8d4f5;">1–15 μm</span><span class="name">Protozoa</span></div>
<div class="ht-scale-lbl"><span class="val" style="color:#ffaa44;">0.02–0.2 μm</span><span class="name">Viruses*</span></div>
</div>
<p style="font-size:11px; color:#4d6a80; margin-top:12px; border-top:1px solid rgba(90,157,224,.1); padding-top:10px;">
*Viruses in natural freshwater almost always attach to bacteria or organic particles, capturing them during filtration. SGS challenge testing confirmed >99.9999% removal.
</p>
</div>
</div>
</div>

<div style="background:#071428;">
<div class="ht-sec">
<p class="ht-label">How To Use</p>
<h2 class="ht-title">Using Your HydraTrail Filter Flask</h2>
<p class="ht-body">Simple in the field. Follow these six steps to get clean water flowing every time.</p>

<div class="ht-steps">
<div class="ht-step">
<div class="ht-step-n">01</div>
<h4>Choose Your Source</h4>
<p>Fill from a running stream, river, or lake. Avoid stagnant water, water near farmland, or any source that may carry chemical or heavy metal runoff. The filter handles biological threats — not chemical ones.</p>
</div>
<div class="ht-step">
<div class="ht-step-n">02</div>
<h4>Fill Correctly</h4>
<p>Open the cap at the correct grip point so the filter cartridge can rotate freely inside the flask. Fill with raw water and tighten the cap gently — never force-twist it, as this can cause leaks.</p>
</div>
<div class="ht-step">
<div class="ht-step-n">03</div>
<h4>Squeeze & Drink</h4>
<p>Squeeze the soft TPU flask to push water through the hollow fibre membrane. Every drop through the bite valve is filtered. Water flows at 0.8 L/min — enough for steady hydration on the move.</p>
</div>
<div class="ht-step">
<div class="ht-step-n">04</div>
<h4>Keep It Flowing</h4>
<p>Every 5 litres, shake or swing the bottle to dislodge trapped particles and restore flow rate. On multi-day trips, carry a spare filter cartridge in your pack.</p>
</div>
<div class="ht-step">
<div class="ht-step-n">05</div>
<h4>Never Freeze It</h4>
<p>Do not use or store the filter in sub-zero temperatures. Ice crystals can fracture the hollow fibre membrane — allowing unfiltered water to pass through. In cold conditions, keep the flask inside your jacket.</p>
</div>
<div class="ht-step">
<div class="ht-step-n">06</div>
<h4>Protect the Nozzle</h4>
<p>Never let raw unfiltered water touch the bite valve. If the nozzle contacts contaminated water, clean it before drinking. Don't share the nozzle with others unless necessary.</p>
</div>
</div>
</div>
</div>

<div class="ht-clean-bg">
<div class="ht-sec">
<p class="ht-label">Maintenance</p>
<h2 class="ht-title">Cleaning Your Filter</h2>
<p class="ht-body">Regular cleaning is the single biggest thing you can do to extend filter life and maintain flow rate. Two methods — both gentle on the membrane.</p>

<div class="ht-clean-grid">
<div class="ht-method">
<h4><span class="ht-method-letter">A</span> Shake to Clean</h4>
<p>Fill the flask with clean water. Shake gently back and forth for 30–60 seconds. The agitation dislodges trapped particles from the fibre bundle without touching or stressing the membrane. Pour out and repeat once if needed.</p>
<p class="ht-method-tip">Best for: quick trail maintenance every few litres.</p>
</div>
<div class="ht-method">
<h4><span class="ht-method-letter">B</span> Static Water Rinse</h4>
<p>Remove the filter cartridge from the bottle cap. Submerge and rinse gently in a bowl of clean, still water — no scrubbing, no rubbing. Allow trapped particles to wash free naturally, then reassemble.</p>
<p class="ht-method-tip">Best for: deep clean after filtering silty or muddy water.</p>
</div>
</div>

<div class="ht-dont">
<h5>⚠️ Never Do This to Your Filter</h5>
<ul>
<li>Rinse directly under a tap or any pressurised water source — pressure can rupture the fibres</li>
<li>Use brushes, cloths, cotton buds, or any abrasive on the membrane surface</li>
<li>Put the filter in a dishwasher, steam oven, or microwave — heat destroys the membrane</li>
<li>Poke, prick, or forcibly squeeze the filter element — any puncture means immediate replacement</li>
<li>Filter anything other than fresh water — juices, sports drinks, or salt water will contaminate and block the membrane permanently</li>
</ul>
</div>
</div>
</div>

<div style="background:#071428;">
<div class="ht-sec">
<p class="ht-label">Lifespan & Storage</p>
<h2 class="ht-title">Looking After Your Filter Long-Term</h2>

<div class="ht-life-grid">
<div class="ht-life-card">
<div class="ht-life-ico">💧</div>
<div class="ht-life-val">1,000 L</div>
<div class="ht-life-lbl">Filter cartridge lifespan. Replace when output noticeably slows, or at 1,000 litres.</div>
</div>
<div class="ht-life-card">
<div class="ht-life-ico">🫙</div>
<div class="ht-life-val">1–2 yrs</div>
<div class="ht-life-lbl">Soft TPU flask lifespan. TPU material naturally ages over 2 years — avoid sharp objects.</div>
</div>
<div class="ht-life-card">
<div class="ht-life-ico">🔩</div>
<div class="ht-life-val">1–3 yrs</div>
<div class="ht-life-lbl">Bottle cap lifespan. PP material lasts 5+ years with gentle use — no force-twisting.</div>
</div>
<div class="ht-life-card">
<div class="ht-life-ico">🌡️</div>
<div class="ht-life-val">Max 60°C</div>
<div class="ht-life-lbl">Maximum water temperature for the soft flask. Never use boiling water directly.</div>
</div>
</div>

<div class="ht-storage-box">
<h3>Storing for More Than a Few Days</h3>
<p>Once the filter has been used, it must be disinfected before storage to prevent mould or bacteria growing inside the membrane. Follow these steps:</p>
<div class="ht-storage-steps">
<div class="ht-storage-step">
<span class="ht-step-num-circle">1</span>
<span>Fill the flask with ~500 ml of clean water and add a few drops of food-grade disinfectant — hypochlorous acid or sodium hypochlorite — to reach approximately 50–80 ppm concentration.</span>
</div>
<div class="ht-storage-step">
<span class="ht-step-num-circle">2</span>
<span>Reinstall the filter cartridge, tighten the cap, and shake several times to distribute the solution through the fibre bundle.</span>
</div>
<div class="ht-storage-step">
<span class="ht-step-num-circle">3</span>
<span>Squeeze the flask so the disinfectant solution passes through the filter and out of the bite valve. If no disinfectant is available, rinse 2–3 times with clean water instead.</span>
</div>
<div class="ht-storage-step">
<span class="ht-step-num-circle">4</span>
<span>Remove the filter cartridge and separate it from the bottle cap. Allow all components to fully air dry before reassembling and storing.</span>
</div>
</div>
<p class="ht-storage-note">
<strong style="color:#8ab4d4;">Reactivation after drying:</strong> If the filter has dried out completely, soak in clean water for at least 1 hour before use, then squeeze several times to restore normal flow. After disinfecting, filter 2 litres of clean water through before drinking to remove any residual odour.
</p>
</div>

<div class="ht-integrity-box">
<h3>🔍 Filter Integrity Test</h3>
<p>Not sure if your membrane is still intact after a hard trip? Run this quick field test:</p>
<div class="ht-int-steps">
<div class="ht-int-step"><span class="num">1.</span><span>Filter a full flask of water as normal, then empty the flask completely.</span></div>
<div class="ht-int-step"><span class="num">2.</span><span>Try blowing air through the bite valve nozzle into the empty flask.</span></div>
<div class="ht-result ht-result-pass">
<span class="r-ico">✓</span>
<span><strong>Flask cannot be inflated</strong> — the membrane is intact. Your filter is good to go.</span>
</div>
<div class="ht-result ht-result-fail">
<span class="r-ico">✗</span>
<span><strong>Flask inflates</strong> — the membrane has a rupture. Replace the filter cartridge immediately before drinking from it.</span>
</div>
</div>
</div>

</div>
</div>

<div class="ht-warn">
<div class="ht-warn-inner">
<span class="ht-warn-ico">⚠️</span>
<p class="ht-warn-text">
<strong>Know Your Water Source</strong>
This filter removes biological threats — bacteria, protozoa, and viruses. It cannot remove heavy metals, agricultural chemicals, radioactive substances, seawater, or brackish water. In areas near mining, farmland, or industrial zones, choose your source with care. When uncertain, boil filtered water before drinking.
</p>
</div>
</div>

<div class="ht-lab">
<div class="ht-lab-inner">
<div class="ht-lab-pill">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="6.5" stroke="#5a9de0" stroke-width="1.5"/><path d="M4.5 7.5l2 2 4-4" stroke="#5a9de0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Independently Verified by SGS
</div>
<div class="ht-lab-big">>99.9999%</div>
<div class="ht-lab-sub">Bacteria Removal Rate</div>
<p class="ht-lab-desc">
Challenge-tested by SGS — one of the world's leading independent testing bodies — against <em>Escherichia coli</em> (ATCC 8739). Incoming water: 9.3 × 10⁶ CFU per 100 mL. Filtered output: <1 CFU per 100 mL.
</p>
<div class="ht-lab-ref">
<strong>SGS Test Report No. XMF25-0008210-09</strong>
Hygienic Function Challenge Testing  ·  GB/T 5750.12-2023  ·  August 2025<br>
Flow rate 0.8 L/min  ·  Tested at start-up of service life
</div>
</div>
</div>

</div>

{% schema %}
{
"name": "Filter Technology",
"settings": [],
"presets": [
{
"name": "Filter Technology"
}
]
}
{% endschema %}