About US

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Deep Current Systems</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f0f5f7;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* Hero Section */
.hero {
background: linear-gradient(135deg, #001f3f 0%, #003d7a 100%);
color: white;
padding: 80px 0;
text-align: center;
position: relative;
overflow: hidden;
}

.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" opacity="0.1"><path d="M0,300 Q300,200 600,300 T1200,300 L1200,600 L0,600 Z" fill="white"/></svg>');
background-size: cover;
opacity: 0.2;
}

.hero-content {
position: relative;
z-index: 1;
}

.hero h1 {
font-size: 3em;
margin-bottom: 20px;
animation: fadeInUp 1s ease-out;
}

.hero p {
font-size: 1.3em;
opacity: 0.9;
animation: fadeInUp 1s ease-out 0.2s;
animation-fill-mode: both;
}

/* Story Section */
.story-section {
padding: 80px 0;
background: white;
}

.story-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-top: 50px;
}

.story-card {
background: #f8fbfc;
padding: 40px;
border-radius: 10px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 2px solid transparent;
}

.story-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 61, 122, 0.1);
border-color: #003d7a;
}

.story-card-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #003d7a, #0056b3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
}

.story-card h3 {
color: #003d7a;
margin-bottom: 15px;
font-size: 1.4em;
}

.story-card p {
color: #666;
line-height: 1.8;
}

/* Values Section */
.values-section {
padding: 80px 0;
background: linear-gradient(to bottom, #f0f5f7, white);
}

.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
}

.value-item {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}

.value-item:hover {
box-shadow: 0 5px 20px rgba(0, 61, 122, 0.15);
}

.value-icon {
font-size: 2.5em;
margin-bottom: 15px;
display: block;
}

.value-item h4 {
color: #003d7a;
margin-bottom: 10px;
}

/* CTA Section */
.cta-section {
background: #003d7a;
color: white;
padding: 60px 0;
text-align: center;
}

.cta-section h2 {
font-size: 2.5em;
margin-bottom: 20px;
}

.cta-section p {
font-size: 1.2em;
margin-bottom: 30px;
opacity: 0.9;
}

.cta-button {
display: inline-block;
padding: 15px 40px;
background: white;
color: #003d7a;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: all 0.3s ease;
}

.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}

.fade-in.visible {
opacity: 1;
transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2em;
}

.hero p {
font-size: 1.1em;
}

.story-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>

<section class="hero">
<div class="container">
<div class="hero-content">
<h1>Deep Current Systems</h1>
<p>Founded by Divers, Built for Divers</p>
</div>
</div>
</section>

<section class="story-section">
<div class="container">
<h2 style="text-align: center; font-size: 2.5em; color: #003d7a; margin-bottom: 20px;">Our Story</h2>
<p style="text-align: center; font-size: 1.2em; color: #666; max-width: 800px; margin: 0 auto;">
Deep Current Systems was born from a simple truth: the best dive gear comes from those who live and breathe the underwater world. As passionate scuba divers ourselves, we understand what you need beneath the waves.
</p>

<div class="story-grid">
<div class="story-card fade-in">
<div class="story-card-icon">🤿</div>
<h3>Founded by Divers</h3>
<p>We're not just a company that makes dive gear – we're divers first. Every product we create comes from real experiences and genuine needs discovered during our own dives.</p>
</div>

<div class="story-card fade-in">
<div class="story-card-icon">🏊</div>
<h3>Instructor-Led Innovation</h3>
<p>Our founder is a certified SCUBA instructor who has trained countless divers. This teaching experience gives us unique insights into what divers truly need for safety and performance.</p>
</div>

<div class="story-card fade-in">
<div class="story-card-icon">🔧</div>
<h3>Filling the Gaps</h3>
<p>We specialize in creating the gear that divers need but can't find elsewhere. If we've wished for it underwater, we'll engineer it in our workshop.</p>
</div>

<div class="story-card fade-in">
<div class="story-card-icon">🌱</div>
<h3>Ocean-Friendly Materials</h3>
<p>Every product we make uses eco-friendly materials because we believe in protecting the underwater paradise we all love. Sustainable diving gear for a sustainable future.</p>
</div>
</div>
</div>
</section>

<section class="values-section">
<div class="container">
<h2 style="text-align: center; font-size: 2.5em; color: #003d7a; margin-bottom: 20px;">What Drives Us</h2>

<div class="values-grid">
<div class="value-item fade-in">
<span class="value-icon">👥</span>
<h4>Small Business, Big Heart</h4>
<p>As a small business, we know every customer by name and treat each order with personal care. Your success underwater is our success.</p>
</div>

<div class="value-item fade-in">
<span class="value-icon">🇺🇸</span>
<h4>Made in the USA</h4>
<p>Every Deep Current Systems product is proudly manufactured in the United States, ensuring the highest quality standards and supporting local craftsmanship.</p>
</div>

<div class="value-item fade-in">
<span class="value-icon">💡</span>
<h4>Diver-Driven Design</h4>
<p>Our designs come from real diving experiences. We build what we wish existed, test it ourselves, and refine it based on community feedback.</p>
</div>
</div>
</div>
</section>

<section class="cta-section">
<div class="container">
<h2>Dive Deeper With Us</h2>
<p>Join our community of divers who refuse to compromise on quality and innovation.</p>
<a href="/products" class="cta-button">Explore Our Products</a>
</div>
</section>

const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);

document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});

// Smooth parallax effect for hero section
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.hero');
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
});
</script>
</body>
</html>