Hugging Face's logo

Spaces:
Jack-Aranda
/
AQ-draft-2
Running

App Files Community
AQ-draft-2 / index.html
Jack-Aranda's picture
Jack-Aranda
Update index.html
ff37236 verified
Raw
History Blame Contribute Delete
73.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AQVAERIS – Glaciasept™ Ice Machine Sanitization</title>
 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
 <style>
 /* ---------- DESIGN TOKENS ---------- */
 :root{
 --clr-primary:#FF6B00;
 --clr-primary-dark:#CC5500;
 --clr-deep:#00324E;
 --clr-bright:#0078D4;
 --clr-bg:#FFFFFF;
 --clr-section:#F7F9FC;
 --clr-card:#FFFFFF;
 --clr-text:#111827;
 --clr-muted:#4B5563;
 --shadow-sm:0 2px 8px rgba(0,0,0,.05);
 --shadow-md:0 6px 20px rgba(0,0,0,.08);
 --shadow-lg:0 10px 25px rgba(0,0,0,.15);
 --radius:12px;
 }
 [data-theme="dark"]{
 --clr-bg:#0D1117;
 --clr-section:#161B22;
 --clr-card:#21262D;
 --clr-text:#C9D1D9;
 --clr-muted:#8B949E;
 --shadow-sm:0 2px 8px rgba(0,0,0,.25);
 }
*{margin:0;padding:0;box-sizing:border-box}
 html{scroll-behavior:smooth}
 body{
 font-family:'Montserrat',sans-serif;
 line-height:1.7;
 font-size:18px;
 color:var(--clr-text);
 background:var(--clr-bg);
 transition:background .3s,color .3s;
 }
 a{color:inherit;text-decoration:none}
 .container{max-width:1200px;margin:0 auto;padding:0 24px}
 .section{padding:80px 24px}
 .grid{display:grid;gap:30px}
 @media(min-width:600px){.grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}
/* ---------- TOP BAR ---------- */
 .top-bar{background:var(--clr-section);border-bottom:1px solid var(--clr-muted);font-size:.8rem}
 .top-bar .inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;height:36px;padding:0 24px}
 .top-bar a{color:var(--clr-muted);margin-left:8px}
 .top-bar a:hover{color:var(--clr-primary)}
/* ---------- HEADER ---------- */
 .header{position:sticky;top:0;z-index:40;background:linear-gradient(135deg,var(--clr-deep),var(--clr-bright));box-shadow:var(--shadow-sm)}
 .header .inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px}
 .logo{font-size:1.6rem;font-weight:700;color:var(--clr-primary);text-transform:uppercase;letter-spacing:.5px}
 .nav{display:flex;gap:24px;font-weight:600;font-size:.9rem;text-transform:uppercase}
 .nav a{color:#fff;position:relative}
 .nav a:after{content:'';display:block;margin:0 auto;width:0;border-bottom:2px solid var(--clr-primary);transition:width .3s}
 .nav a:hover:after{width:100%}
 .theme-toggle{background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer}
 .mobile-menu{display:none;background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer}
 .mobile-nav{display:none;position:fixed;top:100px;left:0;right:0;background:var(--clr-deep);padding:20px;z-index:30;box-shadow:var(--shadow-sm)}
 .mobile-nav.active{display:block}
 .mobile-nav a{display:block;color:#fff;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}
 @media(max-width:768px){.nav{display:none}.mobile-menu{display:block}}
/* ---------- SUBNAVIGATION ---------- */
 .subnavigation {
 position: sticky;
 top: 64px;
 z-index: 30;
 background: var(--clr-section);
 border-bottom: 1px solid var(--clr-muted);
 transform: translateY(-100%);
 opacity: 0;
 transition: all 0.3s ease;
 }
.subnavigation.visible {
 transform: translateY(0);
 opacity: 1;
 }
.subnav-links {
 display: flex;
 gap: 20px;
 padding: 12px 0;
 overflow-x: auto;
 scrollbar-width: none;
 }
.subnav-links::-webkit-scrollbar {
 display: none;
 }
.subnav-links a {
 white-space: nowrap;
 font-size: 0.9rem;
 font-weight: 600;
 color: var(--clr-muted);
 padding: 4px 0;
 border-bottom: 2px solid transparent;
 }
.subnav-links a:hover,
 .subnav-links a.active {
 color: var(--clr-primary);
 border-bottom-color: var(--clr-primary);
 }
/* ---------- HERO ---------- */
/* ---------- HERO ---------- */
.hero {
 position: relative;
 min-height: 100vh !important;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 0 24px;
 color: #fff;
 text-align: center;
 overflow: hidden;
 scroll-margin-top: 64px; /* push below sticky header (adjust if needed) */
}
/* Background image stays behind everything */
.hero picture.hero-bg,
.hero picture.hero-bg img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 z-index: 0;
}
/* Semi-transparent overlay */
.hero::before {
 content: "";
 position: absolute;
 inset: 0;
 background: rgba(0, 50, 78, 0.55);
 z-index: 0.5;
}
/* Keep text above overlay */
.hero > *:not(picture) {
 position: relative;
 z-index: 1;
}
/* Existing text styles (unchanged) */
.hero h1 {
 font-size: 2.5rem;
 font-weight: 700;
 margin-bottom: 20px;
 line-height: 1.1;
}
.hero .sub {
 font-size: 1.2rem;
 margin-bottom: 40px;
 opacity: 0.9;
}
.hero-ctas {
 display: flex;
 gap: 16px;
 justify-content: center;
 flex-wrap: wrap;
}
.btn {
 padding: 14px 28px;
 border-radius: var(--radius);
 font-weight: 700;
 font-size: 0.9rem;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 transition: 0.2s;
}
.btn-primary {
 background: var(--clr-primary);
 color: #fff;
}
.btn-primary:hover {
 background: var(--clr-primary-dark);
 transform: scale(1.04);
}
.btn-secondary {
 background: transparent;
 color: #fff;
 border: 2px solid #fff;
}
.btn-secondary:hover {
 background: #fff;
 color: var(--clr-deep);
}
@media (min-width: 600px) {
 .hero h1 {
 font-size: 3.2rem;
 }
}
/* HERO SECTION STYLES */
.hero {
 position: relative;
 width: 100%;
 min-height: 100vh; /* Full screen */
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 padding: 2rem;
 background-color: #000; /* fallback background */
 color: white;
 overflow: hidden;
}
/* Background container */
.hero-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
}
/* Background image itself */
.hero-bg img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
/* Headline */
.hero h1 {
 font-size: 2.5rem;
 margin-bottom: 1rem;
 max-width: 800px;
}
/* Subtext (tagline) */
.hero .sub {
 font-size: 1.2rem;
 line-height: 1.6;
 max-width: 700px;
 color: #f5f5f5;
 margin-bottom: 2rem;
}
/* CTA Buttons */
.hero-ctas {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
 justify-content: center;
}
.btn {
 padding: 0.9rem 1.5rem;
 font-size: 1rem;
 border-radius: 8px;
 text-decoration: none;
 transition: background 0.3s ease;
}
.btn-primary {
 background-color: #007AFF;
 color: white;
}
.btn-secondary {
 background-color: transparent;
 border: 2px solid white;
 color: white;
}
.btn-primary:hover {
 background-color: #005bb5;
}
.btn-secondary:hover {
 background-color: white;
 color: black;
}
/* RESPONSIVE FONT SCALING */
@media (min-width: 768px) {
 .hero h1 {
 font-size: 3.5rem;
 }
 .hero .sub {
 font-size: 1.5rem;
 }
}
/* ---------- FLOATING CTA ---------- */
 .floating-cta{position:fixed;bottom:24px;right:24px;z-index:50;background:var(--clr-primary);color:#fff;padding:12px 20px;border-radius:var(--radius);font-weight:700;font-size:.9rem;text-transform:uppercase;box-shadow:var(--shadow-sm);transition:.2s}
 .floating-cta:hover{background:var(--clr-primary-dark);transform:scale(1.05)}
/* ---------- SECTION TITLES ---------- */
 .section-title{font-size:2.2rem;font-weight:700;text-align:center;margin-bottom:50px;color:var(--clr-text)}
/* ---------- STEPS ---------- */
 .step{text-align:center;padding:30px 20px;background:var(--clr-card);border-radius:var(--radius);box-shadow:var(--shadow-sm);position:relative;cursor:pointer;transition:transform 0.3s}
 .step:hover{transform:translateY(-5px)}
 .step-number{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--clr-primary);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
 .step-icon{font-size:3rem;margin-bottom:20px}
 .step h3{color:var(--clr-deep);margin-bottom:12px;font-size:1.3rem}
 .step p{color:var(--clr-muted);font-size:.95rem}
/* ---------- CARDS ---------- */
 .card{background:var(--clr-card);padding:30px;border-radius:var(--radius);box-shadow:var(--shadow-sm);text-align:center;transition:.3s;cursor:pointer}
 .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
 .card .icon{font-size:3rem;margin-bottom:20px}
 .card h3{color:var(--clr-deep);margin-bottom:12px;font-size:1.3rem}
 .card p{color:var(--clr-muted);font-size:.95rem}
/* ---------- MODAL STYLES ---------- */
 .modal{
 display:none;
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.7);
 z-index:999;
 overflow:auto;
 }
 .modal-content{
 background:var(--clr-card);
 margin:5% auto;
 padding:40px;
 border-radius:var(--radius);
 max-width:900px;
 width:90%;
 position:relative;
 animation:fadeIn .3s;
 }
 .close{
 position:absolute;
 top:10px;
 right:20px;
 font-size:2rem;
 cursor:pointer;
 color:var(--clr-muted);
 }
 @keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* ---------- DETAIL MODAL STYLES ---------- */
 .detail-modal {
 display: none;
 position: fixed;
 z-index: 1000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.9);
 }
 .detail-modal-content {
 background: var(--clr-card);
 margin: 5% auto;
 padding: 30px;
 width: 80%;
 max-width: 800px;
 border-radius: var(--radius);
 animation: fadeIn 0.3s;
 position: relative;
 }
 .detail-modal img {
 max-width: 100%;
 height: auto;
 margin: 20px 0;
 border-radius: var(--radius);
 }
 .detail-modal h2 {
 color: var(--clr-primary);
 margin-bottom: 20px;
 }
 .detail-modal ul {
 margin: 20px 0;
 padding-left: 20px;
 }
 .detail-modal li {
 margin-bottom: 10px;
 }
/* ---------- BEFORE / AFTER SLIDER ---------- */
 .slider{position:relative;max-width:600px;margin:auto;overflow:hidden;border-radius:var(--radius)}
 .slider img{width:100%;display:block;height:auto}
 .slider .after{position:absolute;top:0;left:0;width:50%;overflow:hidden;border-right:3px solid var(--clr-primary)}
 .slider input[type="range"]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}
 .slider-handle{position:absolute;top:0;bottom:0;width:3px;background:var(--clr-primary);left:50%;transform:translateX(-50%);pointer-events:none;z-index:2}
 .slider-handle:after{content:"↔";position:absolute;width:40px;height:40px;background:var(--clr-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;left:50%;top:50%;transform:translate(-50%,-50%);font-size:1.2rem}
/* ---------- TESTIMONIALS ---------- */
 .testimonial{background:var(--clr-card);padding:40px;border-radius:var(--radius);box-shadow:var(--shadow-sm);font-style:italic;font-size:1.1rem;line-height:1.6;text-align:center;cursor:pointer;transition:transform 0.3s}
 .testimonial:hover{transform:translateY(-5px)}
 .testimonial-author{margin-top:20px;font-weight:700;color:var(--clr-primary);font-style:normal;font-size:.9rem}
/* ---------- CERTIFICATIONS ---------- */
 .cert-row{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:40px}
 .cert-badge{background:var(--clr-card);border-radius:var(--radius);padding:20px 30px;box-shadow:var(--shadow-sm);font-weight:700;font-size:.9rem;transition:.3s}
 .cert-badge:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
/* ---------- TESTIMONIALS CAROUSEL ---------- */
 .carousel{position:relative;max-width:800px;margin:auto}
 .carousel-inner{display:flex;overflow:hidden}
 .slide{min-width:100%;padding:0 24px;transition:transform .5s}
 .carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--clr-primary);color:#fff;border:none;padding:8px 12px;border-radius:50%;cursor:pointer;font-size:1.2rem;z-index:10}
 .carousel-nav.prev{left:-40px}
 .carousel-nav.next{right:-40px}
 .carousel-nav:hover{background:var(--clr-primary-dark)}
/* ---------- CALCULATOR WIDGET ---------- */
 .calculator-widget{max-width:500px;margin:auto;background:var(--clr-card);padding:40px;border-radius:var(--radius);box-shadow:var(--shadow-sm);text-align:center}
 .calculator-widget input{width:100%;padding:12px;margin-bottom:16px;border:2px solid var(--clr-muted);border-radius:var(--radius);font-size:1rem}
 .calculator-widget input:focus{outline:none;border-color:var(--clr-primary)}
 .savings-display{font-size:1.4rem;font-weight:700;color:var(--clr-deep);margin:20px 0}
 .savings-amount{color:var(--clr-primary);font-size:2rem}
 .roi-chart{display:flex;justify-content:center;align-items:flex-end;height:200px;gap:20px;margin:30px 0}
 .roi-bar{width:60px;background:var(--clr-section);border-radius:var(--radius);position:relative;transition:height 0.5s}
 .roi-bar.before{height:180px}
 .roi-bar.after{height:40px;background:var(--clr-primary)}
 .roi-bar-label{position:absolute;bottom:-25px;width:100%;text-align:center;font-size:0.8rem}
/* ---------- FORM ---------- */
 form{max-width:600px;margin:auto;background:var(--clr-card);padding:40px;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
 form label{display:block;margin-bottom:16px;font-weight:600;color:var(--clr-deep)}
 form input,form textarea{width:100%;padding:12px;border:2px solid var(--clr-muted);border-radius:var(--radius);font-size:1rem;font-family:inherit;margin-top:8px}
 form input:focus,form textarea:focus{outline:none;border-color:var(--clr-primary)}
 form button{margin-top:20px;width:100%}
 .form-message{display:none;padding:15px;margin-top:20px;border-radius:var(--radius);text-align:center}
 .form-message.success{background:#e6ffed;color:#22863a}
 .form-message.error{background:#ffeef0;color:#cb2431}
/* ---------- ACCORDION ---------- */
 details{background:var(--clr-card);margin-bottom:12px;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
 summary{padding:18px 24px;font-weight:700;cursor:pointer;list-style:none;transition:.3s}
 summary:hover{background:var(--clr-section)}
 summary::marker{display:none}
 details[open] summary{border-bottom:1px solid var(--clr-muted)}
 details p{padding:0 24px 18px;color:var(--clr-muted)}
/* ---------- TECHNICAL TABLE ---------- */
 table{width:100%;border-collapse:collapse;margin-top:20px}
 th,td{padding:12px;border:1px solid var(--clr-muted);text-align:left}
 th{background:var(--clr-section);font-weight:700}
/* ---------- TEAM CARDS ---------- */
 .team-grid{
 display:grid;
 gap:40px;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 }
 .team-card-expandable {
 background: var(--clr-card);
 border-radius: var(--radius);
 padding: 30px;
 box-shadow: var(--shadow-md);
 transition: all 0.3s;
 cursor: pointer;
 overflow: hidden;
 position: relative;
 }
.team-card-expandable:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-lg);
 }
.team-card-main {
 text-align: center;
 transition: all 0.3s;
 }
.team-photo {
 border-radius: 50%;
 object-fit: cover;
 margin: 0 auto 20px;
 border: 4px solid var(--clr-primary);
 transition: transform 0.3s;
 width: 250px;
 height: 250px;
 }
.team-card-expandable:hover .team-photo {
 transform: scale(1.05);
 }
.team-name {
 font-size: 1.4rem;
 font-weight: 700;
 margin-bottom: 5px;
 color: var(--clr-deep);
 }
.team-title {
 color: var(--clr-primary);
 font-weight: 600;
 margin-bottom: 15px;
 font-size: 1.1rem;
 }
.team-bio-short {
 font-size: 1rem;
 color: var(--clr-muted);
 margin-bottom: 0;
 transition: all 0.3s;
 }
.team-bio-full {
 border-top: 1px solid var(--clr-section);
 font-size: 1rem;
 line-height: 1.6;
 color: var(--clr-text);
 padding-top: 20px;
 animation: fadeIn 0.3s ease-out;
 }
/* ---------- BACK TO TOP ---------- */
 .back-to-top {
 position: fixed;
 bottom: -60px;
 right: 30px;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: var(--clr-primary);
 color: white;
 border: none;
 font-size: 1.5rem;
 cursor: pointer;
 opacity: 0;
 transition: all 0.3s ease;
 z-index: 99;
 display: flex;
 align-items: center;
 justify-content: center;
 }
.back-to-top.visible {
 bottom: 30px;
 opacity: 1;
 }
.back-to-top:hover {
 background: var(--clr-primary-dark);
 transform: translateY(-3px);
 }
/* ---------- LAZY LOADING ---------- */
 img[data-src] {
 opacity: 0;
 transition: opacity 0.3s;
 }
img.lazy-loaded {
 opacity: 1;
 }
@media (max-width: 768px) {
 .team-grid {
 grid-template-columns: 1fr !important;
 }
.team-photo {
 width: 200px;
 height: 200px;
 }
.team-name {
 font-size: 1.3rem;
 }
.detail-modal-content {
 width: 90%;
 padding: 20px;
 }
.subnavigation {
 top: 60px;
 }
 }
/* ---------- FOOTER ---------- */
 .footer{background:var(--clr-deep);color:#fff;padding:50px 24px 20px}
 .footer-grid{display:grid;gap:30px}
 @media(min-width:600px){.footer-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
 .footer h3{color:var(--clr-primary);margin-bottom:12px;font-size:1.1rem}
 .footer a{color:#ccc;display:block;margin-bottom:8px;font-size:.9rem}
 .footer a:hover{color:var(--clr-primary)}
 .footer-copy{border-top:1px solid #333;margin-top:30px;padding-top:15px;font-size:.8rem;text-align:center;color:#aaa}
 </style>
</head>
<body>
<!-- TOP BAR -->
<div class="top-bar">
 <div class="inner">
 <div>
 <a href="#">FB</a>
 <a href="#">IN</a>
 <a href="#">IG</a>
 <a href="#">TW</a>
 </div>
 <div>
 <a href="#">ITA</a> | <a href="#">ENG</a>
 </div>
 </div>
</div>
<!-- HEADER -->
<header class="header">
 <div class="inner">
 <a href="#about-aqvaeris" class="logo">AQVAERIS</a>
 <nav class="nav">
 <a href="#product">Product</a>
 <a href="#technologies">Technologies</a>
 <a href="#use-cases">Applications</a>
 <a href="#resources">Resources</a>
 <a href="#faq">FAQ</a>
 <a href="#contact">Contact</a>
 </nav>
 <button class="mobile-menu" id="mobileMenu">☰</button>
 <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode"></button>
 </div>
 <div class="mobile-nav" id="mobileNav">
 <a href="#product">Product</a>
 <a href="#technologies">Technologies</a>
 <a href="#use-cases">Applications</a>
 <a href="#resources">Resources</a>
 <a href="#faq">FAQ</a>
 <a href="#contact">Contact</a>
 </div>
</header>
<!-- SUBNAVIGATION -->
<div class="subnavigation" id="subnav">
 <div class="container">
 <div class="subnav-links" id="subnavLinks"></div>
 </div>
</div>
<!-- FLOATING CTA -->
<a href="#contact" class="floating-cta">Request a Demo</a>
<!-- HERO -->
<section class="hero" id="home">
 <picture class="hero-bg">
 <!-- WebP version -->
 <source srcset="https://i.imgur.com/zQoDijv.webp" type="image/webp">
 <!-- JPEG fallback -->
 <img src="https://i.imgur.com/zQoDijv.jpg"
 alt="Sanitized ice machine with Glaciasept"
 loading="lazy">
 </picture>
<h1>Stop Ice Contamination Before It Starts.</h1>
 <p class="sub">
 Glaciasept™ sanitizes water and continuously circulates purified air so your ice stays safe,
 your costs drop, and your brand is protected.
 </p>
<div class="hero-ctas">
 <a href="#contact" class="btn btn-primary">Request a Demo</a>
 <a href="#product" class="btn btn-secondary">Explore Product</a>
 </div>
</section>
<!-- HOW IT WORKS -->
<section class="section" id="how-it-works">
 <div class="container">
 <h2 class="section-title">How It Works in 3 Steps</h2>
 <div class="grid">
 <div class="step" onclick="openDetailModal('step1')">
 <div class="step-number">1</div>
 <div class="step-icon">💧</div>
 <h3>Purify Incoming Water</h3>
 <p>UV-C neutralizes microbes at source.</p>
 </div>
 <div class="step" onclick="openDetailModal('step2')">
 <div class="step-number">2</div>
 <div class="step-icon">🔄</div>
 <h3>Circulate purified air around the food-zone</h3>
 <p>FluxAria™ protects key components involved in the ice formation process.</p>
 </div>
 <div class="step" onclick="openDetailModal('step3')">
 <div class="step-number">3</div>
 <div class="step-icon">✨</div>
 <h3>Stay Clean Longer</h3>
 <p>80% fewer manual cleans.</p>
 </div>
 </div>
 </div>
</section>
<!-- KEY BENEFITS -->
<section class="section" style="background:var(--clr-section)">
 <div class="container">
 <h2 class="section-title">Key Benefits</h2>
 <div class="grid">
 <div class="card" data-modal="benefit1">
 <div class="icon">🧼</div>
 <h3>80% Less Cleaning</h3>
 <p>See how our technology reduces maintenance</p>
 </div>
 <div class="card" data-modal="benefit2">
 <div class="icon">💰</div>
 <h3>Lower Ownership Cost</h3>
 <p>Calculate your potential savings</p>
 </div>
 <div class="card" data-modal="benefit3">
 <div class="icon">🛡️</div>
 <h3>Medical-grade Safety</h3>
 <p>Learn about our certification standards</p>
 </div>
 </div>
 </div>
</section>
<!-- ABOUT AQVAERIS -->
<section class="section" id="about-aqvaeris" style="background:var(--clr-section)">
 <div class="container">
 <h2 class="section-title">About AQVAERIS</h2>
 <div class="grid" style="align-items:center">
 <div>
 <img data-src="https://via.placeholder.com/600x400/00324E/FFFFFF?text=AQVAERIS+Team+Working+on+Glaciasept"
alt="AQVAERIS team applying Glaciasept technology"
style="border-radius:var(--radius);width:100%;box-shadow:var(--shadow-md)">
 </div>
 <div>
 <h3>Protection by Design</h3>
 <p>When food safety specialists, sanitation technology innovators, and commercial foodservice equipment experts realized that contamination risks throughout foodservice operations were being downplayed due to lack of automated solutions, <strong>AQVAERIS was born to address these critical gaps seamlessly</strong>.</p>
 <ul style="margin:20px 0;padding-left:20px;color:var(--clr-muted)">
 <li>Patented UV-C & FluxAria™ technologies</li>
 <li>Certified to CE, ISO, NSF, FDA standards</li>
 <li>Trusted by 2,000+ locations worldwide</li>
 </ul>
 <button class="btn btn-primary" onclick="openTeamModal()">Meet the Team</button>
 </div>
 </div>
 </div>
</section>
<!-- BEFORE & AFTER -->
<section class="section" id="comparison">
 <div class="container">
 <h2 class="section-title">Before / 1 Month / After</h2>
 <div class="comparison-slider">
 <div class="slider-base">
 <img data-src="before.jpg" alt="Before Installation">
 </div>
 <div class="slider-middle">
 <img data-src="partial.jpg" alt="Partial improvement">
 </div>
 <div class="slider-after">
 <img data-src="after.jpg" alt="Fully protected">
 </div>
 <input type="range" class="slider-handle middle" min="0" max="100" value="50">
 <input type="range" class="slider-handle after" min="0" max="100" value="25">
 </div>
 </div>
</section>
<!-- QUOTE REQUEST CTA -->
<section class="section" id="quote-request">
 <div class="container">
 <h2 class="section-title">Protect Your Ice Machines</h2>
 <p class="section-subtitle">Get a personalized quote in under 24 hours</p>
 <form class="quote-form">
 <input type="text" placeholder="Your Name" required>
 <input type="email" placeholder="Email Address" required>
 <input type="text" placeholder="Business Name">
 <textarea placeholder="Tell us about your equipment or needs..."></textarea>
 <button type="submit">Request Quote</button>
 </form>
 </div>
</section>
<!-- TESTIMONIALS / USE CASES -->
<section class="section" id="testimonials">
 <div class="container">
 <h2 class="section-title">Client Testimonials</h2>
 <div class="testimonial-grid">
 <div class="testimonial">
 <p>"Since installing Glaciasept, our cleaning routine is down by 75%. It’s a no-brainer."</p>
 <strong>- Owner, QuickBite QSR</strong>
 </div>
 <div class="testimonial">
 <p>"We’ve avoided costly contamination events thanks to continuous UVC protection."</p>
 <strong>- Facilities Manager, ColdChain Logistics</strong>
 </div>
 <div class="testimonial">
 <p>"The retrofit process was simple and effective. Our ice machines are finally protected 24/7."</p>
 <strong>- Head Technician, ArcticClean</strong>
 </div>
 </div>
 </div>
</section>
<style>
.comparison-slider {
 position: relative;
 max-width: 800px;
 margin: 2rem auto;
 height: 400px;
 overflow: hidden;
 border-radius: var(--radius);
 box-shadow: var(--shadow-md);
}
.slider-base, .slider-middle, .slider-after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.slider-base { z-index: 1; }
.slider-middle { width: 50%; z-index: 2; overflow: hidden; }
.slider-after { width: 25%; z-index: 3; overflow: hidden; }
.slider-handle {
 position: absolute;
 width: 3px;
 height: 100%;
 background: var(--clr-primary);
 z-index: 10;
 margin: 0;
 pointer-events: none;
}
.slider-handle.middle {
 left: 50%;
 transform: translateX(-50%);
}
.slider-handle.after {
 left: 25%;
 transform: translateX(-50%);
}
.slider-handle::after {
 content: "↔";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 40px;
 height: 40px;
 background: var(--clr-primary);
 color: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 transform: translate(-50%, -50%);
 font-size: 1.2rem;
 pointer-events: auto;
 cursor: ew-resize;
}
@media (max-width: 768px) {
 .comparison-slider {
 height: 300px;
 }
 .slider-handle::after {
 width: 50px;
 height: 50px;
 }
}
.counter {
 font-weight: bold;
 font-size: 2rem;
 color: var(--clr-primary);
 display: inline-block;
 min-width: 3ch;
 transition: all 0.3s ease;
}
.tooltip {
 position: relative;
 cursor: help;
}
.tooltip::after {
 content: attr(data-tooltip);
 position: absolute;
 bottom: 120%;
 left: 50%;
 transform: translateX(-50%);
 background: #333;
 color: #fff;
 padding: 6px 10px;
 border-radius: 4px;
 font-size: 0.75rem;
 white-space: nowrap;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s;
 z-index: 100;
}
.tooltip:hover::after {
 opacity: 1;
}
html {
 scroll-behavior: smooth;
}
.quote-form {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 max-width: 500px;
 margin: 2rem auto;
}
.quote-form input,
.quote-form textarea {
 padding: 0.75rem;
 border: 1px solid #ccc;
 border-radius: 6px;
 font-size: 1rem;
}
.quote-form button {
 padding: 0.75rem;
 background: var(--clr-primary);
 color: white;
 font-size: 1rem;
 border: none;
 border-radius: 6px;
 cursor: pointer;
 transition: background 0.3s ease;
}
.quote-form button:hover {
 background: var(--clr-primary-dark);
}
.testimonial-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 2rem;
 margin-top: 2rem;
}
.testimonial {
 background: #f9f9f9;
 padding: 1.5rem;
 border-radius: 10px;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 font-style: italic;
}
.testimonial strong {
 display: block;
 margin-top: 1rem;
 font-weight: bold;
 font-style: normal;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
 // Animated counters for stats (on scroll)
 const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 const counter = entry.target;
 const target = +counter.getAttribute('data-target');
 let count = 0;
 const step = target / 60;
 const updateCount = () => {
 count += step;
 if (count < target) {
 counter.innerText = Math.round(count).toLocaleString();
 requestAnimationFrame(updateCount);
 } else {
 counter.innerText = Math.round(target).toLocaleString();
 }
 };
 updateCount();
 observer.unobserve(counter);
 }
 });
 }, { threshold: 0.6 });
 document.querySelectorAll('.counter').forEach(counter => {
 observer.observe(counter);
 });
 // Animated counters for stats
 document.querySelectorAll('.counter').forEach(counter => {
 const target = +counter.getAttribute('data-target');
 let count = 0;
 const step = target / 60;
 const updateCount = () => {
 count += step;
 if (count < target) {
 counter.innerText = count.toFixed(1);
 requestAnimationFrame(updateCount);
 } else {
 counter.innerText = target.toFixed(1);
 }
 };
 updateCount();
 });
 // Lazy load images with data-src
 document.querySelectorAll('img[data-src]').forEach(img => {
 img.src = img.dataset.src;
 });
 initComparisonSliders();
});
function initComparisonSliders() {
 document.querySelectorAll('.comparison-slider').forEach(slider => {
 const middleHandle = slider.querySelector('.slider-handle.middle');
 const afterHandle = slider.querySelector('.slider-handle.after');
 const middlePanel = slider.querySelector('.slider-middle');
 const afterPanel = slider.querySelector('.slider-after');
 middleHandle.addEventListener('input', (e) => {
 const width = e.target.value + '%';
 middlePanel.style.width = width;
 middleHandle.style.left = width;
 });
 afterHandle.addEventListener('input', (e) => {
 const width = e.target.value + '%';
 afterPanel.style.width = width;
 afterHandle.style.left = width;
 });
 });
}
 // Activate modals for benefit cards
 document.querySelectorAll('.card[data-modal]').forEach(card => {
 card.addEventListener('click', function () {
 const modalId = this.getAttribute('data-modal');
 if (modalId) openDetailModal(modalId);
 });
 });
</script>
<!-- TESTIMONIALS -->
<section class="section" id="testimonials">
 <div class="container">
 <h2 class="section-title">What Our Users Say</h2>
 <div class="testimonial" onclick="openDetailModal('testimonial1')">
 "Glaciasept™ cut our cleaning time by 80%. ROI was immediate."
 <div class="testimonial-author">QSR Manager – 75 locations, Delhi</div>
 </div>
 </div>
</section>
<!-- ROI CALCULATOR -->
<section class="section" id="roi">
 <div class="container">
 <h2 class="section-title">See How Much You Could Save</h2>
 <div class="calculator-widget">
 <input type="number" placeholder="Cleanings / year" id="cleanings" min="0" step="1">
 <input type="number" placeholder="Cost per cleaning ($)" id="cleaningCost" min="0" step="1">
 <input type="number" placeholder="Machines" id="machineCount" min="1" step="1" value="1">
 <div class="roi-chart">
 <div class="roi-bar before">
 <div class="roi-bar-label">Before</div>
 </div>
 <div class="roi-bar after">
 <div class="roi-bar-label">After</div>
 </div>
 </div>
 <div class="savings-display">Annual Savings: <span class="savings-amount" id="savingsAmount">$0</span></div>
 <a href="#contact" class="btn btn-primary">Get Full Estimate</a>
 </div>
 </div>
</section>
<!-- PRODUCT DETAILS -->
<section class="section" id="product">
 <div class="container">
 <h2 class="section-title">Glaciasept™ Product</h2>
 <div class="grid">
 <div>
 <img data-src="https://via.placeholder.com/400x300/00324E/FFFFFF?text=Glaciasept+Product+Unit"
alt="Glaciasept product unit showing dimensions and features"
style="border-radius:var(--radius);width:100%">
 </div>
 <div>
 <h3>Specifications</h3>
 <table>
 <tr><th>Dimension</th><td>0.5 m</td></tr>
 <tr><th>Weight</th><td>1.5 kg</td></tr>
 <tr><th>Power</th><td>2.5 W</td></tr>
 <tr><th>Certification</th><td>CE, ISO, NSF</td></tr>
 </table>
 <button class="btn btn-primary" style="margin-top:20px" onclick="openDetailModal('product-specs')">View Full Specifications</button>
 </div>
 </div>
 </div>
</section>
<!-- USE CASES -->
<section class="section" id="use-cases" style="background:var(--clr-section)">
 <div class="container">
 <h2 class="section-title">Use Cases</h2>
 <div class="grid">
 <div class="card" onclick="openDetailModal('usecase1')">
 <h3>Restaurants</h3>
 <p>Reduce labor & pass audits.</p>
 </div>
 <div class="card" onclick="openDetailModal('usecase2')">
 <h3>Bars & Nightclubs</h3>
 <p>Protect reputation nightly.</p>
 </div>
 <div class="card" onclick="openDetailModal('usecase3')">
 <h3>Labs & Hospitals</h3>
 <p>Medical-grade ice safety.</p>
 </div>
 </div>
 </div>
</section>
<!-- TECHNOLOGIES -->
<section class="section" id="technologies">
 <div class="container">
 <h2 class="section-title">Technologies</h2>
 <div class="grid">
 <div class="card" onclick="openDetailModal('tech1')">
 <h3>UV-C Sanitization</h3>
 <p>Kills 99.9% of pathogens at point-of-entry.</p>
 </div>
 <div class="card" onclick="openDetailModal('tech2')">
 <h3>FluxAria™</h3>
 <p>Continuous purified-air circulation.</p>
 </div>
 </div>
 </div>
</section>
<!-- RESOURCES -->
<section class="section" id="resources" style="background:var(--clr-section)">
 <div class="container">
 <h2 class="section-title">Resources & Downloads</h2>
 <div class="grid">
 <div class="card" onclick="openDetailModal('resource1')">
 <h3>Brochure</h3>
 <p>Download our product brochure</p>
 </div>
 <div class="card" onclick="openDetailModal('resource2')">
 <h3>Installation Guide</h3>
 <p>Step-by-step setup instructions</p>
 </div>
 </div>
 </div>
</section>
<!-- CERTIFICATIONS -->
<section class="section" id="certifications">
 <div class="container">
 <h2 class="section-title">Certifications & Standards</h2>
 <p style="text-align:center;margin-bottom:40px">All downloadable certificates available below.</p>
 <div class="cert-row">
 <div class="cert-badge" onclick="openDetailModal('cert1')">CE</div>
 <div class="cert-badge" onclick="openDetailModal('cert2')">ISO9001</div>
 <div class="cert-badge" onclick="openDetailModal('cert3')">NSF</div>
 </div>
 </div>
</section>
<!-- NEWS -->
<section class="section" id="news" style="background:var(--clr-section)">
 <div class="container">
 <h2 class="section-title">Latest News & Articles</h2>
 <div class="grid">
 <div class="card" onclick="openDetailModal('news1')">
 <h3>Ice Safety in 2024: What Every QSR Needs to Know</h3>
 <p>Read our latest industry analysis</p>
 </div>
 <div class="card" onclick="openDetailModal('news2')">
 <h3>Case Study</h3>
 <p>See how we helped a major chain</p>
 </div>
 </div>
 </div>
</section>
<!-- FAQ -->
<section class="section" id="faq">
 <div class="container">
 <h2 class="section-title">FAQ</h2>
 <details>
 <summary>How often must I clean the machine now?</summary>
 <p>Only 4 times per year instead of 26.</p>
 </details>
 <details>
 <summary>Is installation reversible?</summary>
 <p>Yes - installs/uninstalls in minutes without modifications.</p>
 </details>
 <details>
 <summary>Does it void the ice machine warranty?</summary>
 <p>No - it's a non-invasive retrofit.</p>
 </details>
 </div>
</section>
<!-- CONTACT -->
<section class="section" id="contact" style="background:var(--clr-section)">
 <div class="container">
 <h2 class="section-title">Request a Demo</h2>
 <form id="contactForm">
 <label>Name<input type="text" required></label>
 <label>Email<input type="email" required></label>
 <label>Company<input type="text"></label>
 <label>Message<textarea rows="4"></textarea></label>
 <button type="submit" class="btn btn-primary">Send Message</button>
 <div class="form-message" id="formMessage"></div>
 </form>
 </div>
</section>
<!-- DISTRIBUTOR PORTAL -->
<section class="section" id="distributor">
 <div class="container">
 <h2 class="section-title">Distributor Portal</h2>
 <p style="text-align:center">Coming soon - login for partners & installers.</p>
 </div>
</section>
<!-- TEAM MODAL -->
<div id="teamModal" class="modal">
 <div class="modal-content" style="max-width:1000px">
 <span class="close" onclick="closeTeamModal()">&times;</span>
 <h2>Meet the Founders</h2>
<!-- Top Row -->
 <div class="team-grid" style="grid-template-columns:repeat(2, 1fr); gap:30px; margin-bottom:30px">
 <!-- Gianmario -->
 <div class="team-card-expandable">
 <div class="team-card-main">
 <img data-src="https://via.placeholder.com/250x250/FF6B00/FFFFFF?text=Gianmario"
alt="Gianmario Invernizzi, CTO & Co-Founder"
class="team-photo">
 <h3 class="team-name">Gianmario Invernizzi</h3>
 <p class="team-title">Chief Technology Offficer & Co-Founder</p>
 <p class="team-bio-short">Italian inventor who turns impossible problems into inevitable solutions.</p>
 </div>
 <div class="team-bio-full" style="display:none">
 <p>Gianmario spent years perfecting electronic controls for gas furnaces and HVAC systems, accumulating patents by solving problems others considered impossible. From his base in Lecco, he developed the engineering foundation that built AET80 into a leader in heating and industrial automation.
His expertise in fluid dynamics, combustion control, and precision engineering somehow makes perfect sense for revolutionizing food safety. At AQVAERIS, Gianmario applies the same Italian engineering creativity that drives legendary brands - finding elegant solutions to problems others accept as unsolvable.
As CTO, he brings that famous Italian ability to innovate under pressure, developing sanitation technologies that work automatically in real commercial kitchens. His job: turn the impossible into the inevitable.</p>
 </div>
 </div>
<!-- Marco -->
 <div class="team-card-expandable">
 <div class="team-card-main">
 <img data-src="https://via.placeholder.com/250x250/FF6B00/FFFFFF?text=Marco"
alt="Marco Invernizzi, COO & Co-Founder"
class="team-photo">
 <h3 class="team-name">Marco Invernizzi</h3>
 <p class="team-title">Chief Operations Officer & Co-Founder</p>
 <p class="team-bio-short">Turns brilliant ideas into products that actually work.</p>
 </div>
 <div class="team-bio-full" style="display:none">
 <p>While innovation runs in the Invernizzi family, Marco mastered the art of coordinating complex manufacturing operations that actually deliver. At AET80, he spent years orchestrating every step from production planning to quality control, ensuring that sophisticated electronic controls perform reliably in real-world applications.
Marco coordinates the entire manufacturing ecosystem, from prototype development through scale production. He knows that brilliant ideas mean nothing without flawless operational execution. His expertise spans supply chain optimization, process engineering, and the kind of manufacturing precision that defines Italian industrial excellence.
As COO, Marco orchestrates the complex operations needed to transform our innovative sanitation solutions into reliable products. While the team develops groundbreaking food safety technology, he coordinates AET80's manufacturing capabilities to deliver it with the consistency and craftsmanship our customers demand. His mission: ensure our innovations become tools that work perfectly, every time.</p>
 </div>
 </div>
 </div>
<!-- Bottom Row -->
 <div class="team-grid" style="grid-template-columns:repeat(2, 1fr); gap:30px">
 <!-- Joakim -->
 <div class="team-card-expandable">
 <div class="team-card-main">
 <img data-src="https://via.placeholder.com/250x250/FF6B00/FFFFFF?text=Joakim"
alt="Joakim Granfors, CEO & Co-Founder"
class="team-photo">
 <h3 class="team-name">Joakim Granfors</h3>
 <p class="team-title">Chief Executive Officer & Co-Founder</p>
 <p class="team-bio-short">Swedish precision applied to problematic foodservice equipment.</p>
 </div>
 <div class="team-bio-full" style="display:none">
 <p>After decades in commercial foodservice equipment, Joakim discovered that the best innovations come from understanding what actually breaks in busy kitchens. His Swedish engineering background - with its reputation for reliability and precision - combined with an MBA, taught him that the best solutions are usually the simplest ones that actually work.
At AQVAERIS, Joakim coordinates our mission to make out-of-home dining safer through automated hygiene solutions. He works alongside Gianmario developing air-water sanitation technologies that go beyond our current Glaciasept™ system for ice makers. His approach: take complex food safety challenges and make them straightforward for operators to solve.
Turns out that Swedish engineering discipline mixed with startup energy creates exactly the leadership needed to transform how commercial kitchens maintain cleanliness automatically.</p>
 </div>
 </div>
<!-- Paolo -->
 <div class="team-card-expandable">
 <div class="team-card-main">
 <img data-src="https://via.placeholder.com/250x250/FF6B00/FFFFFF?text=Paolo"
alt="Paolo Moro, CRO & Co-Founder"
class="team-photo">
 <h3 class="team-name">Paolo Moro</h3>
 <p class="team-title">Chief Revenue Officer & Co-Founder</p>
 <p class="team-bio-short">Makes foodservice machines behave and operators happy worldwide.</p>
 </div>
 <div class="team-bio-full" style="display:none">
 <p>After three decades of convincing commercial ice-cream machines and hamburger grills, ice makers and refrigerators to behave properly across global markets, Paolo somehow became the person everyone calls when ice equipment needs to actually work. His international career took him from Italy to Holland and the US, working for Japanese, American, and Italian companies - teaching him that great technology means nothing if operators can't rely on it daily.
Paolo co-authored three patents by focusing on what operators actually need - including a revolutionary space-saving ice maker layout that transformed cruise ship installations by turning wasted space into passenger cabins. This innovation alone financed entire fleets of marine installations, proving his talent for user-friendly solutions that deliver clear ROI in hygiene, IoT systems, and equipment design.
As Chief Revenue Officer, Paolo ensures that our solutions reach operators from commercial kitchens to cruise lines. His multicultural experience across foodservice, marine, and hospitality markets helps AQVAERIS deliver automated hygiene solutions that work anywhere ice and food safety matter. His mission: make food safety technology that operators actually want to use.</p>
 </div>
 </div>
 </div>
 </div>
</div>
<!-- DETAIL MODALS -->
<div id="step1-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('step1')">&times;</span>
 <h2>UV-C Water Purification</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=UV-C+Water+Purification+Process" alt="Diagram showing UV-C water purification process">
 <p>Our patented UV-C technology eliminates 99.99% of waterborne pathogens before they enter your ice machine. The system:</p>
 <ul>
 <li>Uses high-intensity 254nm UV-C light</li>
 <li>Provides real-time performance monitoring</li>
 <li>Features self-cleaning quartz sleeve</li>
 </ul>
 <p>This proactive approach prevents biofilm formation within the purifying system and in all hydraulic components in the food-zone.</p>
 <p> A quarterly traditional chemical treatment along with manual use of brushes eliminates any unexpected biofilm accumulation.</p>
 </div>
</div>
<div id="step2-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('step2')">&times;</span>
 <h2>FluxAria™ Air Protection</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=FluxAria+Air+Purification" alt="Diagram showing FluxAria air purification system">
 <p>Our FluxAria™ system circulates a continuous airflow of purified air that:</p>
 <ul>
 <li>Flushes potentially contaminated air, creating a food-zone environment free from airborne contaminants</li>
 <li>Uses multi-stage air treatment with UV-C sterilization</li>
 <li>Operates continuously, silently and with minimal energy consumption</li>
 </ul>
 <p>Protecting the food-zone components from airborne cross-contamination addresses the most underestimated cause of non-sanitary ice.</p>
 </div>
</div>
<div id="step3-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('step3')">&times;</span>
 <h2>Extended Clean Intervals</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Reduced+Maintenance+Schedule" alt="Chart showing reduced maintenance schedule">
 <p>By preventing contamination at both water and air entry points, Glaciasept™ enables:</p>
 <ul>
 <li>80% reduction in cleaning frequency (from 26 to 4 times/year)</li>
 <li>Consequent reduction in sanitizing chemicals and consumables</li>
 <li>67% less labor cost for ice machine routine cleaning</li>
 <li>lower M&R costs due to limited manipulation of machine parts</li>
 <li>Replacement of costly water filtration cartridges by a simple scale inhibitor, when required by local water quality</li>
 <li>Consistent ice quality between cleanings</li>
 </ul>
 <p>Our customers report an average ROI of 5 months through labor savings alone.</p>
 </div>
</div>
<script>
// Team bio toggle functionality - iPhone Compatible
function initializeTeamCards() {
 const teamCards = document.querySelectorAll('.team-card-expandable');
teamCards.forEach(card => {
 // Add both click and touch event listeners for iOS compatibility
 card.addEventListener('click', function(e) {
 e.preventDefault();
 e.stopPropagation();
 toggleBio(this);
 });
card.addEventListener('touchstart', function(e) {
 e.preventDefault();
 e.stopPropagation();
 toggleBio(this);
 });
// Ensure the card is tappable on iOS
 card.style.cursor = 'pointer';
 card.style.webkitTapHighlightColor = 'transparent';
 card.style.webkitUserSelect = 'none';
 card.style.userSelect = 'none';
 });
}
function toggleBio(card) {
 const bioFull = card.querySelector('.team-bio-full');
 const bioShort = card.querySelector('.team-bio-short');
if (bioFull && bioShort) {
 if (bioFull.style.display === 'none' || bioFull.style.display === '') {
 bioFull.style.display = 'block';
 bioShort.style.display = 'none';
 card.classList.add('expanded');
 } else {
 bioFull.style.display = 'none';
 bioShort.style.display = 'block';
 card.classList.remove('expanded');
 }
 }
}
// Initialize when page loads
document.addEventListener('DOMContentLoaded', initializeTeamCards);
// Also initialize when the modal is opened (in case DOM wasn't ready)
function openTeamModal() {
 document.getElementById('teamModal').style.display = 'block';
 // Re-initialize team cards when modal opens
 setTimeout(initializeTeamCards, 100);
}
</script>
<!-- BENEFIT MODALS -->
<div id="benefit1-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('benefit1')">&times;</span>
 <h2>80% Less Cleaning Details</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Reduced+Cleaning+Frequency" alt="Chart showing reduced cleaning needs">
 <p>Our customers typically reduce cleaning frequency from monthly to quarterly while maintaining superior ice quality:</p>
 <ul>
 <li>Average cleaning reduction: 22 fewer cleanings annually</li>
 <li>Labor savings: 67% less technician time required</li>
 <li>Chemical use: 75% reduction in sanitizing agents</li>
 </ul>
 <p>The Glaciasept™ system maintains hygienic conditions between cleanings through continuous protection.</p>
 </div>
</div>
<div id="benefit2-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('benefit2')">&times;</span>
 <h2>Cost Savings Breakdown</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Cost+Savings+Analysis" alt="Cost savings chart">
 <p>Typical savings per machine per year:</p>
 <table>
 <tr><th>Category</th><th>Savings</th></tr>
 <tr><td>Labor</td><td>$1,200-$1,800</td></tr>
 <tr><td>Chemicals</td><td>$300-$500</td></tr>
 <tr><td>Downtime</td><td>$600-$900</td></tr>
 <tr><td>Total</td><td>$2,100-$3,200</td></tr>
 </table>
 <p>Most customers achieve full ROI within 5-7 months.</p>
 </div>
</div>
<div id="benefit3-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('benefit3')">&times;</span>
 <h2>Medical-Grade Safety Standards</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Certifications+and+Standards" alt="Certification badges">
 <p>Glaciasept™ meets or exceeds:</p>
 <ul>
 <li>NSF/ANSI 12: Ice Making Equipment</li>
 <li>FDA Food Code 2022 requirements</li>
 <li>EU Regulation (EC) No 1935/2004</li>
 <li>ISO 13485 (Medical Device Quality)</li>
 </ul>
 <p>Our UV-C emitters are certified to IEC 62471 for optical radiation safety.</p>
 </div>
</div>
<!-- PRODUCT SPECS MODAL -->
<div id="product-specs-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('product-specs')">&times;</span>
 <h2>Full Product Specifications</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Product+Technical+Details" alt="Product technical drawing">
 <table>
 <tr><th>Parameter</th><th>Value</th></tr>
 <tr><td>Dimensions (W×H×D)</td><td>150 × 200 × 80 mm</td></tr>
 <tr><td>Weight</td><td>1.5 kg</td></tr>
 <tr><td>Power Consumption</td><td>2.5W (24V DC)</td></tr>
 <tr><td>UV-C Wavelength</td><td>254 ± 5 nm</td></tr>
 <tr><td>UV-C Intensity</td><td>40 mJ/cm²</td></tr>
 <tr><td>Airflow Rate</td><td>2.5 m³/h</td></tr>
 <tr><td>Operating Temperature</td><td>0°C to 40°C</td></tr>
 <tr><td>Relative Humidity</td><td>Up to 95% non-condensing</td></tr>
 </table>
 <p>Compatible with all major ice machine brands including Manitowoc, Hoshizaki, and Scotsman.</p>
 </div>
</div>
<!-- USE CASE MODALS -->
<div id="usecase1-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('usecase1')">&times;</span>
 <h2>Restaurant Solutions</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Restaurant+Application" alt="Restaurant ice machine">
 <p>For QSR and full-service restaurants:</p>
 <ul>
 <li>Extend intervals between manual deep cleanings</li>
 <li>Reduce equipment downtime for sanitization procedures</li>
 <li>Eliminate costly detergent and sanitizer inventory management</li>
 <li>Prevent machine contamination, especially in hidden, hard-to-reach areas</li>
 <li>Lower maintenance costs from reduced cleaning-related wear</li>
 <li>Skip training staff on complex cleaning protocols</li>
 <li>Maintain safety standards without verification checklists</li>
 </ul>
 <p>Case Study: 75-location chain extended cleaning cycles by 60% while reducing ice-related service calls by 92%.</p>
 </div>
</div>
<div id="usecase2-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('usecase2')">&times;</span>
 <h2>Bar & Nightclub Protection</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Bar+Application" alt="Bar ice machine">
 <p>Critical for high-volume beverage service:</p>
 <ul>
 <li>Maintain ice safety during peak rush hours when manual cleaning stops</li>
 <li>Reduce equipment breakdowns from rushed or skipped cleaning protocols</li>
 <li>Eliminate surprise contamination during health inspections after busy nights</li>
 <li>Keep ice machines running during extended weekend operations</li>
 <li>Reduce staff training burden on complex sanitization procedures</li>
 <li>Lower chemical costs from continuous automated protection</li>
 <li>Prevent contamination in equipment areas staff can't access during service</li>
 </ul>
 <p>Featured Installation: Downtown nightclub reduced weekend equipment failures by 85% while extending cleaning intervals during busy seasons.</p>
 </div>
</div>
<div id="usecase3-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('usecase3')">&times;</span>
 <h2>Healthcare Applications</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Hospital+Application" alt="Hospital ice machine">
 <p>Medical-grade ice safety:</p>
 <ul>
 <li>Maintain sterile ice standards between scheduled deep sanitizations</li>
 <li>Reduce infection control risks in areas manual cleaning can't reach</li>
 <li>Eliminate contamination gaps during shift changes and weekends</li>
 <li>Lower compliance documentation burden with continuous automated protection</li>
 <li>Prevent cross-contamination in high-risk patient care environments</li>
 <li>Reduce equipment downtime that disrupts critical care operations</li>
 <li>Minimize staff exposure to harsh sanitizing chemicals and procedures</li>
 </ul>
 <p>Case Study: Regional medical center achieved 99.8% pathogen reduction while extending deep cleaning intervals by 40% in critical care units.</p>
 </div>
</div>
<!-- TECHNOLOGY MODALS -->
<div id="tech1-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('tech1')">&times;</span>
 <h2>UV-C Water Sanitization</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=UV-C+Technology" alt="UV-C technology diagram">
 <p>Our patented UV-C system features:</p>
 <ul>
 <li>High-output 254nm germicidal lamps</li>
 <li>Self-cleaning quartz sleeves</li>
 <li>Real-time intensity monitoring</li>
 <li>Automatic power adjustment</li>
 <li>10,000-hour lamp life</li>
 </ul>
 <p>Validated to achieve 4-log (99.99%) reduction of waterborne pathogens including E. coli and Legionella.</p>
 </div>
</div>
<div id="tech2-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('tech2')">&times;</span>
 <h2>FluxAria™ Air Protection</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=FluxAria+Technology" alt="FluxAria technology diagram">
 <p>The FluxAria™ system combines:</p>
 <ul>
 <li>Uses multi-stage air treatment with UV-C sterilization</li>
 <li>UV-C air sterilization chamber</li>
 <li>Laminar airflow design</li>
 <li>Low-noise centrifugal fan</li>
 <li>Smart duty cycling</li>
 </ul>
 <p>Maintains a protective air environment in the food zone against airborne contamination.</p>
 </div>
</div>
<!-- RESOURCE MODALS -->
<div id="resource1-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('resource1')">&times;</span>
 <h2>Product Brochure</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Product+Brochure" alt="Brochure cover">
 <p>Our comprehensive brochure includes:</p>
 <ul>
 <li>Technical specifications</li>
 <li>Installation diagrams</li>
 <li>Case studies</li>
 <li>Certification details</li>
 <li>Maintenance guidelines</li>
 </ul>
 <button class="btn btn-primary" style="margin-top:20px">Download PDF (2.4MB)</button>
 </div>
</div>
<div id="resource2-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('resource2')">&times;</span>
 <h2>Installation Guide</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Installation+Guide" alt="Installation diagram">
 <p>The step-by-step guide covers:</p>
 <ul>
 <li>Pre-installation checklist</li>
 <li>Mounting options</li>
 <li>Plumbing connections</li>
 <li>Electrical requirements</li>
 <li>Commissioning procedure</li>
 <li>Troubleshooting tips</li>
 </ul>
 <button class="btn btn-primary" style="margin-top:20px">Download PDF (1.8MB)</button>
 </div>
</div>
<!-- CERTIFICATION MODALS -->
<div id="cert1-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('cert1')">&times;</span>
 <h2>CE Certification</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=CE+Certificate" alt="CE certificate">
 <p>Our CE certification includes:</p>
 <ul>
 <li>EMC Directive 2014/30/EU</li>
 <li>Low Voltage Directive 2014/35/EU</li>
 <li>RoHS Directive 2011/65/EU</li>
 <li>EN 62471:2008 Photobiological Safety</li>
 </ul>
 <p>Certificate Number: AQV-CE-2023-0284</p>
 <button class="btn btn-primary" style="margin-top:20px">Download Full Certificate</button>
 </div>
</div>
<div id="cert2-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('cert2')">&times;</span>
 <h2>ISO 9001:2015</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=ISO+Certificate" alt="ISO certificate">
 <p>Our quality management system certification covers:</p>
 <ul>
 <li>Design and development</li>
 <li>Production</li>
 <li>Installation</li>
 <li>Servicing</li>
 </ul>
 <p>Certificate Number: AQV-ISO-2022-0176</p>
 <p>Issued by: TÜV SÜD Management Service GmbH</p>
 <button class="btn btn-primary" style="margin-top:20px">Download Full Certificate</button>
 </div>
</div>
<div id="cert3-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('cert3')">&times;</span>
 <h2>NSF Certification</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=NSF+Certificate" alt="NSF certificate">
 <p>Our NSF certifications include:</p>
 <ul>
 <li>NSF/ANSI 12: Ice Making Equipment</li>
 <li>NSF/ANSI 61: Drinking Water Components</li>
 <li>NSF 372: Lead Content Compliance</li>
 </ul>
 <p>Certificate Number: AQV-NSF-2023-4291</p>
 <button class="btn btn-primary" style="margin-top:20px">Download Full Certificate</button>
 </div>
</div>
<!-- NEWS MODALS -->
<div id="news1-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('news1')">&times;</span>
 <h2>Ice Safety in 2024</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Industry+Trends+2024" alt="Industry trends">
 <p>Key findings from our 2024 industry analysis:</p>
 <ul>
 <li>72% of health inspections now include ice machine testing</li>
 <li>New FDA Food Code increases scrutiny on ice safety</li>
 <li>Insurance providers offering discounts for certified ice safety systems</li>
 <li>Consumer awareness of ice contamination up 300% since 2020</li>
 </ul>
 <p>Download our full white paper for compliance strategies.</p>
 <button class="btn btn-primary" style="margin-top:20px">Download White Paper</button>
 </div>
</div>
<div id="news2-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('news2')">&times;</span>
 <h2>Case Study: QuickServe Chain</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Case+Study" alt="Case study">
 <p>75-location QSR chain results after 6 months:</p>
 <ul>
 <li>92% reduction in ice-related service calls</li>
 <li>$187,000 annual labor savings</li>
 <li>100% pass rate on health inspections</li>
 <li>ROI achieved in 4.5 months</li>
 </ul>
 <p>"Glaciasept™ transformed our ice safety program from a liability to an asset." - Director of Operations</p>
 <button class="btn btn-primary" style="margin-top:20px">Download Full Case Study</button>
 </div>
</div>
<!-- TESTIMONIAL MODAL -->
<div id="testimonial1-modal" class="detail-modal">
 <div class="detail-modal-content">
 <span class="close" onclick="closeDetailModal('testimonial1')">&times;</span>
 <h2>Customer Success Story</h2>
 <img data-src="https://via.placeholder.com/800x400/00324E/FFFFFF?text=Customer+Testimonial" alt="Customer photo">
 <p>"As a multi-unit operator, ice machine maintenance was our #1 equipment headache. Since installing Glaciasept™ across all 75 locations, we've eliminated ice-related customer complaints and reduced cleaning labor by 80%."</p>
 <div class="testimonial-author">Rajiv Patel, Director of Operations</div>
 <div class="testimonial-author">QuickBites India (75 locations)</div>
 <ul style="margin-top:20px">
 <li>Installed: March 2023</li>
 <li>ROI achieved: July 2023</li>
 <li>Service calls reduced by 92%</li>
 </ul>
 </div>
</div>
<!-- FOOTER -->
<footer class="footer">
 <div class="container">
 <div class="footer-grid">
 <div>
 <h3>Product</h3>
 <a href="#product">Glaciasept™</a>
 <a href="#technologies">Technologies</a>
 <a href="#roi">ROI Calculator</a>
 </div>
 <div>
 <h3>Resources</h3>
 <a href="#resources">Downloads</a>
 <a href="#news">Blog</a>
 <a href="#faq">FAQ</a>
 </div>
 <div>
 <h3>Company</h3>
 <a href="#contact">Contact</a>
 <a href="#distributor">Distributor Portal</a>
 </div>
 </div>
 <div class="footer-copy">© 2024 AQVAERIS. All rights reserved.</div>
 </div>
</footer>
<!-- BACK TO TOP BUTTON -->
<button class="back-to-top" id="backToTop" aria-label="Back to top">↑</button>
<!-- SCRIPTS -->
<script>
/* theme toggle */
const toggle = document.getElementById('themeToggle');
const html = document.documentElement;
const saved = localStorage.getItem('theme');
if(saved) {
 html.setAttribute('data-theme', saved);
 toggle.textContent = saved === 'dark' ? '☀️' : '🌙';
}
else if(window.matchMedia('(prefers-color-scheme: dark)').matches) {
 html.setAttribute('data-theme', 'dark');
 toggle.textContent = '☀️';
}
toggle.addEventListener('click', () => {
 const current = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
 html.setAttribute('data-theme', current);
 localStorage.setItem('theme', current);
 toggle.textContent = current === 'dark' ? '☀️' : '🌙';
});
/* MOBILE MENU */
const mobileMenu = document.getElementById('mobileMenu');
const mobileNav = document.getElementById('mobileNav');
mobileMenu.addEventListener('click', () => {
 mobileNav.classList.toggle('active');
});
/* STEP 1: ENHANCED NAVIGATION SYSTEM */
const subnav = document.getElementById('subnav');
const subnavLinks = document.getElementById('subnavLinks');
const backToTop = document.getElementById('backToTop');
// Subsection mapping
const sectionMap = {
 'product': ['Overview', 'Specs', 'Installation'],
 'technologies': ['UV-C', 'FluxAria', 'Comparison'],
 'resources': ['Brochures', 'Guides', 'Videos'],
 'certifications': ['CE', 'ISO', 'NSF']
};
// Update subnavigation
function updateSubnav() {
 const scrollPos = window.scrollY;
// Show/hide back to top
 if (scrollPos > 300) {
 backToTop.classList.add('visible');
 } else {
 backToTop.classList.remove('visible');
 }
// Show/hide subnav
 const activeSection = document.querySelector('section.is-visible');
 if (activeSection && sectionMap[activeSection.id]) {
 subnavLinks.innerHTML = sectionMap[activeSection.id]
 .map(item => `<a href="#${activeSection.id}-${item.toLowerCase()}"
onclick="scrollToSubsection(event, '${activeSection.id}-${item.toLowerCase()}')">
 ${item}</a>`)
 .join('');
 subnav.classList.add('visible');
 } else {
 subnav.classList.remove('visible');
 }
}
// Scroll spy implementation
function initScrollSpy() {
 const sections = document.querySelectorAll('section');
 const observer = new IntersectionObserver(
 (entries) => {
 entries.forEach(entry => {
 entry.target.classList.toggle('is-visible', entry.isIntersecting);
 });
 updateSubnav();
 },
 { threshold: 0.5 }
 );
sections.forEach(section => {
 observer.observe(section);
 });
}
// Smooth scroll to subsection
function scrollToSubsection(e, id) {
 e.preventDefault();
 document.getElementById(id)?.scrollIntoView({
 behavior: 'smooth',
 block: 'start'
 });
}
// Back to top functionality
backToTop.addEventListener('click', () => {
 window.scrollTo({
 top: 0,
 behavior: 'smooth'
 });
});
/* STEP 2: PERFORMANCE OPTIMIZATIONS */
function lazyLoadImages() {
 const lazyImages = [].slice.call(document.querySelectorAll('img[data-src]'));
if ('IntersectionObserver' in window) {
 const lazyImageObserver = new IntersectionObserver(
 (entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 const lazyImage = entry.target;
 lazyImage.src = lazyImage.dataset.src;
 lazyImage.classList.add('lazy-loaded');
 lazyImageObserver.unobserve(lazyImage);
 }
 });
 },
 { rootMargin: '100px 0px' }
 );
lazyImages.forEach(lazyImage => {
 lazyImageObserver.observe(lazyImage);
 });
 } else {
 // Fallback for older browsers
 lazyImages.forEach(lazyImage => {
 lazyImage.src = lazyImage.dataset.src;
 });
 }
}
// Prefetch main navigation links
function prefetchLinks() {
 const links = document.querySelectorAll('.nav a, .mobile-nav a');
 links.forEach(link => {
 const href = link.getAttribute('href');
 if (href.startsWith('#')) return;
 const prefetchLink = document.createElement('link');
 prefetchLink.rel = 'prefetch';
 prefetchLink.href = href;
 document.head.appendChild(prefetchLink);
 });
}
// Convert existing images to lazy-load format
function convertImagesToLazyLoad() {
 document.querySelectorAll('img').forEach(img => {
 if (!img.loading && !img.hasAttribute('data-src') && img.src) {
 img.setAttribute('data-src', img.src);
 img.removeAttribute('src');
 }
 });
}
/* MODAL FUNCTIONS */
function openTeamModal() {
 document.getElementById('teamModal').style.display = 'block';
 document.body.style.overflow = 'hidden';
 document.addEventListener('keydown', handleEscapeKey);
}
function closeTeamModal() {
 document.getElementById('teamModal').style.display = 'none';
 document.body.style.overflow = '';
 document.removeEventListener('keydown', handleEscapeKey);
}
function openDetailModal(id) {
 document.getElementById(id + '-modal').style.display = 'block';
 document.body.style.overflow = 'hidden';
 document.addEventListener('keydown', handleEscapeKey);
}
function closeDetailModal(id) {
 document.getElementById(id + '-modal').style.display = 'none';
 document.body.style.overflow = '';
 document.removeEventListener('keydown', handleEscapeKey);
}
function handleEscapeKey(e) {
 if(e.key === 'Escape') {
 const openModal = document.querySelector('.modal[style="display: block;"], .detail-modal[style="display: block;"]');
 if(openModal) {
 if(openModal.classList.contains('detail-modal')) {
 const id = openModal.id.replace('-modal', '');
 closeDetailModal(id);
 } else {
 closeTeamModal();
 }
 }
 }
}
/* TEAM BIO TOGGLE */
function toggleBio(card) {
 const fullBio = card.querySelector('.team-bio-full');
 const isExpanded = fullBio.style.display === 'block';
// Close all first if clicking an already open card
 if(isExpanded) {
 document.querySelectorAll('.team-bio-full').forEach(bio => {
 bio.style.display = 'none';
 });
 return;
 }
// Close all other bios
 document.querySelectorAll('.team-bio-full').forEach(bio => {
 if(bio !== fullBio) bio.style.display = 'none';
 });
// Toggle clicked bio
 fullBio.style.display = fullBio.style.display === 'block' ? 'none' : 'block';
// Scroll to card if opening
 if(fullBio.style.display === 'block') {
 card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 }
}
/* BEFORE/AFTER SLIDER */
function updateSlider(slider) {
 const afterDiv = slider.previousElementSibling.previousElementSibling;
 afterDiv.style.width = slider.value + '%';
 const handle = slider.nextElementSibling;
 handle.style.left = slider.value + '%';
}
/* ROI CALCULATOR */
const cleanings = document.getElementById('cleanings');
const cost = document.getElementById('cleaningCost');
const machines = document.getElementById('machineCount');
const savingsAmount = document.getElementById('savingsAmount');
const beforeBar = document.querySelector('.roi-bar.before');
const afterBar = document.querySelector('.roi-bar.after');
function updateROIVisual() {
 const c = Math.max(0, parseFloat(cleanings.value) || 0);
 const p = Math.max(0, parseFloat(cost.value) || 0);
 const m = Math.max(1, parseFloat(machines.value) || 1);
 const reduced = c * 0.2; /* 80% less */
 const saved = (c - reduced) * p * m;
// Update numbers
 savingsAmount.textContent = '$' + Math.round(saved).toLocaleString();
// Update visual chart
 const maxHeight = 180;
 const beforeHeight = Math.min(maxHeight, c * 2);
 const afterHeight = Math.min(maxHeight, reduced * 2);
beforeBar.style.height = beforeHeight + 'px';
 afterBar.style.height = afterHeight + 'px';
}
[cleanings, cost, machines].forEach(el => {
 el.addEventListener('input', updateROIVisual);
});
// Initialize chart
updateROIVisual();
/* FORM HANDLING */
const contactForm = document.getElementById('contactForm');
const formMessage = document.getElementById('formMessage');
contactForm.addEventListener('submit', function(e) {
 e.preventDefault();
// Simple validation
 const name = this.elements[0].value.trim();
 const email = this.elements[1].value.trim();
if(!name || !email) {
 formMessage.textContent = 'Please fill in all required fields';
 formMessage.className = 'form-message error';
 formMessage.style.display = 'block';
 return;
 }
// Simulate form submission
 formMessage.textContent = 'Thank you! Your message has been sent. We will contact you shortly.';
 formMessage.className = 'form-message success';
 formMessage.style.display = 'block';
// Reset form
 this.reset();
// Hide message after 5 seconds
 setTimeout(() => {
 formMessage.style.display = 'none';
 }, 5000);
});
/* Close modals when clicking outside */
window.addEventListener('click', function(e) {
 if(e.target.classList.contains('modal') || e.target.classList.contains('detail-modal')) {
 const openModal = document.querySelector('.modal[style="display: block;"], .detail-modal[style="display: block;"]');
 if(openModal) {
 if(openModal.classList.contains('detail-modal')) {
 const id = openModal.id.replace('-modal', '');
 closeDetailModal(id);
 } else {
 closeTeamModal();
 }
 }
 }
});
</script>
</body>
</html>