/** Shopify CDN: Minification failed

Line 12:11 Unexpected "<"
Line 40:0 Unexpected "`"
Line 734:0 Unexpected "`"
Line 916:121 Unterminated string token
Line 1014:0 Comments in CSS use "/* ... */" instead of "//"
Line 1025:0 Comments in CSS use "/* ... */" instead of "//"

**/

led vision <ledvision4you@gmail.com>
2:24 PM (0 minutes ago)
to me

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HappyTeethy — Your Happy Brushing Friends</title>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet" />
<style>
:root {
--green: #3a9e5f;
--green-light: #5cbd7e;
--green-dark: #2a7a47;
--orange: #f47c30;
--yellow: #ffc13b;
--kraft: #c8a97e;
--kraft-light: #f5ede0;
--kraft-dark: #a07850;
--navy: #1e3a2f;
--white: #fffdf8;
--font-display: 'Baloo 2', cursive;
--font-body: 'Nunito', sans-serif;
}

```
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
font-family: var(--font-body);
background-color: var(--white);
color: var(--navy);
overflow-x: hidden;
}

/* ── NAV ── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(255,253,248,0.95);
backdrop-filter: blur(10px);
border-bottom: 2px solid var(--kraft-light);
padding: 0 5%;
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
}

.nav-logo {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 800;
color: var(--green-dark);
text-decoration: none;
}

.nav-logo span { color: var(--orange); }

.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}

.nav-links a {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.9rem;
color: var(--navy);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 0.2s;
}

.nav-links a:hover { color: var(--green); }

.nav-cta {
background: var(--green);
color: white !important;
padding: 0.5rem 1.2rem;
border-radius: 50px;
transition: background 0.2s !important;
}

.nav-cta:hover { background: var(--green-dark) !important; color: white !important; }

/* ── HERO ── */
.hero {
min-height: 100vh;
padding-top: 70px;
background: linear-gradient(160deg, #e8f5ee 0%, var(--kraft-light) 50%, #fff8ee 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.hero-leaves {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}

.leaf {
position: absolute;
font-size: 3rem;
opacity: 0.15;
animation: float 6s ease-in-out infinite;
}

.leaf:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.leaf:nth-child(2) { top: 20%; right: 8%; animation-delay: 1s; font-size: 2rem; }
.leaf:nth-child(3) { top: 60%; left: 3%; animation-delay: 2s; font-size: 4rem; }
.leaf:nth-child(4) { top: 70%; right: 5%; animation-delay: 0.5s; font-size: 2.5rem; }
.leaf:nth-child(5) { top: 40%; left: 50%; animation-delay: 3s; font-size: 1.8rem; }

@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}

.hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
max-width: 1100px;
width: 90%;
align-items: center;
padding: 4rem 0;
}

.hero-text { animation: slideInLeft 0.8s ease both; }

@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-40px); }
to { opacity: 1; transform: translateX(0); }
}

.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--yellow);
color: var(--navy);
font-weight: 800;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.4rem 1rem;
border-radius: 50px;
margin-bottom: 1.2rem;
}

.hero-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
color: var(--navy);
margin-bottom: 1rem;
}

.hero-title .highlight { color: var(--green); }
.hero-title .accent { color: var(--orange); }

.hero-sub {
font-size: 1.1rem;
line-height: 1.7;
color: #4a6357;
margin-bottom: 2rem;
max-width: 480px;
}

.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

.btn-primary {
background: var(--green);
color: white;
padding: 0.9rem 2rem;
border-radius: 50px;
font-family: var(--font-body);
font-weight: 800;
font-size: 1rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 15px rgba(58,158,95,0.35);
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(58,158,95,0.45);
}

.btn-secondary {
background: transparent;
color: var(--navy);
padding: 0.9rem 2rem;
border-radius: 50px;
font-family: var(--font-body);
font-weight: 800;
font-size: 1rem;
text-decoration: none;
border: 2.5px solid var(--kraft);
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}

.btn-secondary:hover { border-color: var(--green); color: var(--green); }

.hero-trust {
display: flex;
gap: 1.5rem;
margin-top: 2rem;
flex-wrap: wrap;
}

.trust-item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 700;
color: #4a6357;
}

.trust-icon {
width: 28px; height: 28px;
background: var(--green-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}

.hero-visual {
display: flex;
justify-content: center;
align-items: center;
animation: slideInRight 0.8s ease both;
position: relative;
}

@keyframes slideInRight {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}

.hero-product-card {
background: white;
border-radius: 30px;
padding: 2.5rem;
box-shadow: 0 20px 60px rgba(30,58,47,0.15);
text-align: center;
position: relative;
max-width: 380px;
width: 100%;
}

.product-emoji-stack {
font-size: 5rem;
line-height: 1.2;
margin-bottom: 1rem;
animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.product-name {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
color: var(--navy);
margin-bottom: 0.3rem;
}

.product-tagline {
font-size: 0.9rem;
color: #7a9888;
margin-bottom: 1rem;
}

.product-tags {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}

.tag {
background: var(--kraft-light);
color: var(--kraft-dark);
font-size: 0.75rem;
font-weight: 700;
padding: 0.3rem 0.8rem;
border-radius: 50px;
}

.tag.green { background: #e0f5e9; color: var(--green-dark); }
.tag.orange { background: #fff0e0; color: #c05a10; }

.floating-badge {
position: absolute;
background: var(--yellow);
color: var(--navy);
font-weight: 800;
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
border-radius: 50px;
top: -15px;
right: -10px;
animation: wiggle 2s ease-in-out infinite;
}

@keyframes wiggle {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}

/* ── SECTION BASE ── */
section { padding: 5rem 5%; }

.section-label {
display: inline-block;
background: var(--kraft-light);
color: var(--kraft-dark);
font-weight: 800;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 0.4rem 1rem;
border-radius: 50px;
margin-bottom: 1rem;
}

.section-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 800;
color: var(--navy);
line-height: 1.2;
margin-bottom: 1rem;
}

.section-title .highlight { color: var(--green); }
.section-title .accent { color: var(--orange); }

.section-sub {
font-size: 1rem;
color: #5a7a6a;
line-height: 1.7;
max-width: 560px;
}

/* ── HOW IT WORKS ── */
.how {
background: var(--navy);
color: white;
}

.how .section-title { color: white; }
.how .section-sub { color: #9ab8a8; }
.how .section-label { background: rgba(255,255,255,0.1); color: #9ab8a8; }

.how-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
margin-top: 3rem;
max-width: 1000px;
}

.how-step {
text-align: center;
padding: 2rem 1.5rem;
background: rgba(255,255,255,0.05);
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.1);
transition: transform 0.2s, background 0.2s;
}

.how-step:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.08);
}

.step-number {
width: 50px; height: 50px;
background: var(--green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.3rem;
color: white;
margin: 0 auto 1rem;
}

.step-emoji { font-size: 2.5rem; margin-bottom: 0.8rem; }

.step-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: white;
}

.step-desc { font-size: 0.9rem; color: #9ab8a8; line-height: 1.6; }

/* ── CHARACTERS ── */
.characters { background: var(--kraft-light); }

.characters-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
max-width: 1100px;
}

.character-card {
background: white;
border-radius: 20px;
padding: 1.5rem 1rem;
text-align: center;
box-shadow: 0 4px 20px rgba(30,58,47,0.08);
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
position: relative;
overflow: hidden;
}

.character-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
}

.character-card.green::before { background: var(--green); }
.character-card.blue::before { background: #4a9ede; }
.character-card.orange::before { background: var(--orange); }
.character-card.yellow::before { background: var(--yellow); }
.character-card.purple::before { background: #9b7fd4; }
.character-card.brown::before { background: var(--kraft-dark); }

.character-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 35px rgba(30,58,47,0.15);
}

.char-emoji { font-size: 3.5rem; margin-bottom: 0.5rem; }

.char-name {
font-family: var(--font-display);
font-weight: 800;
font-size: 1rem;
color: var(--navy);
margin-bottom: 0.2rem;
}

.char-role {
font-size: 0.75rem;
color: #7a9888;
font-weight: 600;
margin-bottom: 0.5rem;
}

.char-age {
display: inline-block;
background: var(--kraft-light);
color: var(--kraft-dark);
font-size: 0.7rem;
font-weight: 700;
padding: 0.2rem 0.6rem;
border-radius: 50px;
}

/* ── BUILD SYSTEM ── */
.build {
background: linear-gradient(135deg, #e8f5ee 0%, #fff8ee 100%);
}

.build-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
max-width: 1100px;
}

.build-visual {
background: white;
border-radius: 25px;
padding: 2.5rem;
text-align: center;
box-shadow: 0 10px 40px rgba(30,58,47,0.1);
}

.build-emoji { font-size: 6rem; margin-bottom: 1rem; }

.build-caption {
font-size: 0.9rem;
color: #5a7a6a;
font-style: italic;
}

.build-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 2rem;
}

.build-step {
display: flex;
align-items: flex-start;
gap: 1rem;
}

.build-step-icon {
width: 44px; height: 44px;
min-width: 44px;
background: var(--green);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}

.build-step-text h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--navy);
margin-bottom: 0.2rem;
}

.build-step-text p {
font-size: 0.88rem;
color: #5a7a6a;
line-height: 1.5;
}

/* ── ECO ── */
.eco { background: var(--navy); }

.eco-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 3rem;
max-width: 900px;
}

.eco-card {
text-align: center;
padding: 2rem;
}

.eco-icon {
font-size: 3rem;
margin-bottom: 1rem;
}

.eco-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: white;
margin-bottom: 0.5rem;
}

.eco-desc { font-size: 0.88rem; color: #9ab8a8; line-height: 1.6; }

/* ── EMAIL SIGNUP ── */
.signup {
background: linear-gradient(135deg, var(--green-dark) 0%, var(--navy) 100%);
text-align: center;
}

.signup .section-title { color: white; }
.signup .section-sub { color: #9ab8a8; margin: 0 auto 2rem; }
.signup .section-label { background: rgba(255,255,255,0.1); color: #9ab8a8; }

.signup-form {
display: flex;
gap: 1rem;
justify-content: center;
max-width: 500px;
margin: 0 auto;
flex-wrap: wrap;
}

.signup-input {
flex: 1;
min-width: 220px;
padding: 0.9rem 1.5rem;
border-radius: 50px;
border: 2px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.1);
color: white;
font-family: var(--font-body);
font-size: 0.95rem;
outline: none;
transition: border-color 0.2s;
}

.signup-input::placeholder { color: rgba(255,255,255,0.5); }
.signup-input:focus { border-color: var(--yellow); }

.signup-note {
margin-top: 1rem;
font-size: 0.8rem;
color: rgba(255,255,255,0.4);
}

/* ── FOOTER ── */
footer {
background: var(--navy);
border-top: 1px solid rgba(255,255,255,0.1);
padding: 3rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: gap;
gap: 1rem;
}

.footer-logo {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
color: white;
}

.footer-logo span { color: var(--orange); }

.footer-tagline {
font-size: 0.85rem;
color: #9ab8a8;
margin-top: 0.3rem;
}

.footer-links {
display: flex;
gap: 1.5rem;
list-style: none;
}

.footer-links a {
color: #9ab8a8;
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
transition: color 0.2s;
}

.footer-links a:hover { color: white; }

.footer-copy {
font-size: 0.8rem;
color: rgba(255,255,255,0.3);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
.nav-links { display: none; }

.hero-inner {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}

.hero-buttons { justify-content: center; }
.hero-trust { justify-content: center; }

.build-inner {
grid-template-columns: 1fr;
}

footer {
flex-direction: column;
text-align: center;
}
}

/* ── SCROLL REVEAL ── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
opacity: 1;
transform: translateY(0);
}
```

</style>
</head>
<body>

<!-- NAV -->

<nav>
<a href="#" class="nav-logo">Happy<span>Teethy</span></a>
<ul class="nav-links">
<li><a href="#characters">The Family</a></li>
<li><a href="#build">Build & Play</a></li>
<li><a href="#eco">Eco Story</a></li>
<li><a href="#signup" class="nav-cta">Notify Me</a></li>
</ul>
</nav>

<!-- HERO -->

<section class="hero">
<div class="hero-leaves">
<div class="leaf">🌿</div>
<div class="leaf">🍃</div>
<div class="leaf">🌱</div>
<div class="leaf">🍀</div>
<div class="leaf">🌿</div>
</div>
<div class="hero-inner">
<div class="hero-text">
<div class="hero-badge">🐼 Coming Soon — Calgary, Canada</div>
<h1 class="hero-title">
Meet the<br>
<span class="highlight">Teethy</span><br>
<span class="accent">Jungle Family!</span>
</h1>
<p class="hero-sub">
Eco bamboo toothbrush sets with collectible silicone animal friends.
Brush. Save. Build your jungle. Made for little smiles, loved by families.
</p>
<div class="hero-buttons">
<a href="#signup" class="btn-primary">🌿 Be First to Know</a>
<a href="#characters" class="btn-secondary">Meet the Family</a>
</div>
<div class="hero-trust">
<div class="trust-item">
<div class="trust-icon">🎋</div>
Sustainable Bamboo
</div>
<div class="trust-item">
<div class="trust-icon">✅</div>
BPA Free
</div>
<div class="trust-item">
<div class="trust-icon">♻️</div>
Eco Packaging
</div>
</div>
</div>
<div class="hero-visual">
<div class="hero-product-card">
<div class="floating-badge">🎋 Ages 2–8</div>
<div class="product-emoji-stack">🐼<br>🪥</div>
<div class="product-name">Mochi the Panda</div>
<div class="product-tagline">Bamboo Toothbrush Set</div>
<div class="product-tags">
<span class="tag green">Eco Bamboo</span>
<span class="tag orange">Collectible</span>
<span class="tag">BPA Free</span>
</div>
</div>
</div>
</div>
</section>

<!-- HOW IT WORKS -->

<section class="how" id="how">
<div style="max-width:1100px; margin:0 auto;">
<div class="section-label">How It Works</div>
<h2 class="section-title">Three steps to <span class="highlight" style="color:#5cbd7e;">happy teeth</span></h2>
<p class="section-sub" style="color:#9ab8a8;">HappyTeethy turns brushing from a battle into the best part of the day.</p>
<div class="how-grid reveal">
<div class="how-step">
<div class="step-emoji">🐼</div>
<div class="step-number">1</div>
<div class="step-title">Meet Your Friend</div>
<div class="step-desc">Pick your favourite jungle pal. Each set comes with a bamboo toothbrush and collectible silicone animal holder.</div>
</div>
<div class="how-step">
<div class="step-emoji">🪥</div>
<div class="step-number">2</div>
<div class="step-title">Brush Together</div>
<div class="step-desc">Insert the bamboo brush into your jungle friend. Brush for 2 minutes every morning and night.</div>
</div>
<div class="how-step">
<div class="step-emoji">🌿</div>
<div class="step-number">3</div>
<div class="step-title">Save & Build</div>
<div class="step-desc">When your brush is done, save the handle! Connect handles with silicone joints to build your Happy Jungle.</div>
</div>
<div class="how-step">
<div class="step-emoji">✂️</div>
<div class="step-number">4</div>
<div class="step-title">Cut & Create</div>
<div class="step-desc">Every box has a die-cut jungle scene on the back. Cut it out and add it to your growing jungle world!</div>
</div>
</div>
</div>
</section>

<!-- CHARACTERS -->

<section class="characters" id="characters">
<div style="max-width:1100px; margin:0 auto;">
<div class="section-label">The Teethy Family</div>
<h2 class="section-title">Collect all <span class="accent">8 friends</span> 🐾</h2>
<p class="section-sub">Each character is a unique family member — from the youngest cub to the wise jungle dad. One for every age, every birthday, every smile.</p>
<div class="characters-grid reveal">
<div class="character-card green">
<div class="char-emoji">🐼</div>
<div class="char-name">Mochi</div>
<div class="char-role">The Baby</div>
<div class="char-age">Ages 2–3</div>
</div>
<div class="character-card blue">
<div class="char-emoji">🐧</div>
<div class="char-name">Pebble</div>
<div class="char-role">Silly Sibling</div>
<div class="char-age">Ages 3–4</div>
</div>
<div class="character-card orange">
<div class="char-emoji">🦁</div>
<div class="char-name">Zaro</div>
<div class="char-role">Big Brother</div>
<div class="char-age">Ages 4–5</div>
</div>
<div class="character-card yellow">
<div class="char-emoji">🐒</div>
<div class="char-name">Ziggy</div>
<div class="char-role">The Cousin</div>
<div class="char-age">Ages 5–6</div>
</div>
<div class="character-card purple">
<div class="char-emoji">🐯</div>
<div class="char-name">Blaze</div>
<div class="char-role">Cool Uncle</div>
<div class="char-age">Ages 6–7</div>
</div>
<div class="character-card brown">
<div class="char-emoji">🐻</div>
<div class="char-name">Boulder</div>
<div class="char-role">Wise Dad</div>
<div class="char-age">Ages 7–8</div>
</div>
<div class="character-card orange">
<div class="char-emoji">🦁</div>
<div class="char-name">Rex</div>
<div class="char-role">The Ringmaster</div>
<div class="char-age">Adults</div>
</div>
<div class="character-card purple">
<div class="char-emoji">🐯</div>
<div class="char-name">Veda</div>
<div class="char-role">The Hunter Mom</div>
<div class="char-age">Adults</div>
</div>
</div>
</div>
</section>

<!-- BUILD SYSTEM -->

<section class="build" id="build">
<div class="build-inner" style="margin:0 auto;">
<div class="build-visual reveal">
<div class="build-emoji">🏕️🐼🌿</div>
<p class="build-caption">Build the Happy Jungle — one brush at a time</p>
</div>
<div class="reveal">
<div class="section-label">Build & Play</div>
<h2 class="section-title">Your brush becomes a <span class="highlight">jungle toy</span></h2>
<p class="section-sub">When your bamboo brush is done — don't throw it away. Connect it to build something amazing.</p>
<div class="build-steps">
<div class="build-step">
<div class="build-step-icon">🎋</div>
<div class="build-step-text">
<h4>Save Your Handle</h4>
<p>Every bamboo handle is a building stick for your jungle construction set.</p>
</div>
</div>
<div class="build-step">
<div class="build-step-icon">🔗</div>
<div class="build-step-text">
<h4>Connect with Silicone Joints</h4>
<p>Colourful silicone X-joints snap handles together at any angle — no tools needed.</p>
</div>
</div>
<div class="build-step">
<div class="build-step-icon">✂️</div>
<div class="build-step-text">
<h4>Cut Out Your Jungle Scene</h4>
<p>Every box has a unique die-cut jungle element. Cut it out and add it to your world.</p>
</div>
</div>
<div class="build-step">
<div class="build-step-icon">🏆</div>
<div class="build-step-text">
<h4>Complete the Happy Jungle</h4>
<p>Collect all 8 characters to build the complete Teethy Family jungle treehouse.</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- ECO -->

<section class="eco" id="eco">
<div style="max-width:1100px; margin:0 auto;">
<div class="section-label" style="background:rgba(255,255,255,0.1);color:#9ab8a8;">Our Eco Promise</div>
<h2 class="section-title" style="color:white;">Good for little teeth.<br><span style="color:#5cbd7e;">Good for the planet.</span></h2>
<div class="eco-grid reveal">
<div class="eco-card">
<div class="eco-icon">🎋</div>
<div class="eco-title">Sustainable Bamboo</div>
<div class="eco-desc">Our handles are made from FSC-certified bamboo — naturally antimicrobial and 100% biodegradable.</div>
</div>
<div class="eco-card">
<div class="eco-icon">✅</div>
<div class="eco-title">BPA Free Silicone</div>
<div class="eco-desc">All silicone animal figures are food-grade, BPA free, phthalate free and completely safe for kids.</div>
</div>
<div class="eco-card">
<div class="eco-icon">♻️</div>
<div class="eco-title">Recyclable Packaging</div>
<div class="eco-desc">Every box is made from recycled kraft cardboard — and doubles as a collectible cut-out toy.</div>
</div>
<div class="eco-card">
<div class="eco-icon">🌱</div>
<div class="eco-title">Zero Plastic Waste</div>
<div class="eco-desc">No plastic in any part of the product. Even the connector joints are made from natural silicone.</div>
</div>
</div>
</div>
</section>

<!-- EMAIL SIGNUP -->

<section class="signup" id="signup">
<div style="max-width:700px; margin:0 auto;">
<div class="section-label">Be First</div>
<h2 class="section-title" style="color:white;">The jungle family is <span style="color:var(--yellow);">coming soon</span> 🐼</h2>
<p class="section-sub">Join the waitlist and be first to meet Mochi, Pebble, Zaro and the whole Teethy Family. Launching in Calgary, Canada.</p>
<div class="signup-form">
<input type="email" class="signup-input" placeholder="Enter your email address" />
<button class="btn-primary" style="white-space:nowrap;">🌿 Notify Me</button>
</div>
<p class="signup-note">No spam. Just jungle news. Unsubscribe anytime.</p>
</div>
</section>

<!-- FOOTER -->

<footer>
<div>
<div class="footer-logo">Happy<span>Teethy</span></div>
<div class="footer-tagline">Your Happy Brushing Friends 🐼🐧🦁</div>
</div>
<ul class="footer-links">
<li><a href="#characters">The Family</a></li>
<li><a href="#build">Build & Play</a></li>
<li><a href="#eco">Eco Story</a></li>
<li><a href="#signup">Contact</a></li>
</ul>
<div class="footer-copy">© 2025 HappyTeethy — Calgary, Canada 🍁</div>
</footer>

<script>
// Scroll reveal
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
reveals.forEach(el => observer.observe(el));

// Signup button
document.querySelector('.signup-form button').addEventListener('click', () => {
const input = document.querySelector('.signup-input');
if (input.value && input.value.includes('@')) {
input.value = '';
input.placeholder = '🎉 You\'re on the list!';
input.style.borderColor = '#ffc13b';
}
});
</script>

</body>
</html>
/* --- HAPPY TEETHY PREMIUM STYLING --- */

/* 1. Fix the Header Spacing */
.header {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 2. Soften the Background Yellow */
/* The current yellow is very 'loud'; this makes it more premium */
.gradient {
  background: #FFF9E6 !important; 
}

/* 3. Make Buttons Rounded & Modern */
.button, .customer-button {
  border-radius: 50px !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  transition: transform 0.2s ease;
}

.button:hover {
  transform: scale(1.05);
}

/* 4. Improve the Logo Size in Header */
.header__heading-logo {
  max-width: 150px !important;
}

/* 5. Clean up the Footer */
.footer {
  border-top: 1px solid rgba(0,0,0,0.1);
  margin-top: 50px;
}

/* 6. Hide the 'Powered by Shopify' (if you haven't already) */
.footer__copyright {
  font-size: 0;
}
.footer__copyright:after {
  content: "© 2026 Happy Teethy. All Rights Reserved.";
  font-size: 1.2rem;
}