Home1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PawFest — Premium Dog Store</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/@splinetool/viewer@1.12.95/build/spline-viewer.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
--white:#ffffff;
--off:#f0f0f0;
--muted:rgba(255,255,255,0.45);
--dark:#07070f;
--card:#0f0f1a;
--card2:#131320;
--border:rgba(255,255,255,0.06);
--accent:#c8ff00;
--accent2:#a0f;
}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--white);font-family:'Inter',sans-serif;overflow-x:hidden}
/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:300;padding:18px 52px;display:flex;justify-content:space-between;align-items:center;background:rgba(7,7,15,0.6);backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.logo{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;letter-spacing:1px;color:var(--white)}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;transition:color 0.2s}
.nav-links a:hover{color:var(--white)}
.nav-btn{background:var(--accent);color:#000;border:none;padding:10px 26px;border-radius:6px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;cursor:pointer;letter-spacing:0.5px;transition:all 0.2s}
.nav-btn:hover{opacity:0.85;transform:translateY(-1px)}
/* HERO — full screen spline */
.hero{position:relative;width:100%;height:100vh;overflow:hidden}
spline-viewer{width:100%;height:100%;position:absolute;inset:0}
.hero-overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right, rgba(7,7,15,0.75) 35%, transparent 70%), linear-gradient(to top, rgba(7,7,15,0.6) 0%, transparent 40%)}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 7%;z-index:2;pointer-events:none}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(200,255,0,0.1);border:1px solid rgba(200,255,0,0.25);padding:6px 14px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:28px;width:fit-content;opacity:0;animation:up 0.7s 0.2s forwards}
.hero-title{font-family:'Syne',sans-serif;font-size:clamp(52px,7vw,110px);font-weight:800;line-height:0.95;letter-spacing:-1px;opacity:0;animation:up 0.8s 0.4s forwards}
.hero-title .hl{color:var(--accent)}
.hero-title .hl2{color:rgba(255,255,255,0.25)}
.hero-desc{font-size:16px;color:var(--muted);max-width:380px;line-height:1.7;margin-top:22px;opacity:0;animation:up 0.8s 0.6s forwards;pointer-events:auto}
.hero-btns{display:flex;gap:12px;margin-top:32px;opacity:0;animation:up 0.8s 0.8s forwards;pointer-events:auto}
.btn-solid{background:var(--accent);color:#000;border:none;padding:14px 34px;border-radius:6px;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:all 0.2s;letter-spacing:0.3px}
.btn-solid:hover{opacity:0.88;transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.25);padding:14px 34px;border-radius:6px;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:all 0.2s;letter-spacing:0.3px}
.btn-outline:hover{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.04)}
.scroll-hint{position:absolute;bottom:36px;left:7%;display:flex;align-items:center;gap:10px;opacity:0;animation:up 1s 1.2s forwards;z-index:3}
.scroll-hint span{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.3)}
.scroll-line{width:40px;height:1px;background:linear-gradient(to right,rgba(255,255,255,0.3),transparent)}
/* MARQUEE */
.marquee-wrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0;background:var(--card)}
.marquee-track{display:flex;gap:80px;animation:mq 28s linear infinite;white-space:nowrap}
.mq-item{font-family:'Syne',sans-serif;font-size:13px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:14px}
.mq-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* SECTIONS */
.section{padding:130px 7%;max-width:1440px;margin:0 auto}
.label{font-size:11px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.title{font-family:'Syne',sans-serif;font-size:clamp(38px,4.5vw,64px);font-weight:800;line-height:1;letter-spacing:-0.5px;margin-bottom:14px}
.title .dim{color:rgba(255,255,255,0.2)}
.sub{font-size:15px;color:var(--muted);max-width:480px;line-height:1.75}
/* FEATURES */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:70px;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.feat-item{background:var(--card);padding:36px 28px;opacity:0;transform:translateY(20px);transition:all 0.6s;border-right:1px solid var(--border)}
.feat-item:last-child{border-right:none}
.feat-item.visible{opacity:1;transform:translateY(0)}
.feat-item:hover{background:var(--card2)}
.feat-num{font-family:'Syne',sans-serif;font-size:48px;font-weight:800;color:rgba(255,255,255,0.06);margin-bottom:20px;line-height:1}
.feat-icon{font-size:28px;margin-bottom:16px}
.feat-title{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;margin-bottom:8px}
.feat-desc{font-size:13px;color:var(--muted);line-height:1.65}
/* SPLINE DIVIDER — full width */
.spline-divider{width:100%;height:80vh;position:relative;overflow:hidden}
.spline-divider spline-viewer{width:100%;height:100%;position:absolute;inset:0}
.spline-divider-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, var(--dark) 0%, transparent 15%, transparent 85%, var(--dark) 100%), linear-gradient(to right, rgba(7,7,15,0.7) 30%, transparent 60%);pointer-events:none;z-index:2}
.spline-divider-text{position:absolute;left:7%;top:50%;transform:translateY(-50%);z-index:3}
.spline-divider-text .title{font-size:clamp(40px,4vw,68px)}
/* PRODUCTS */
.prod-section{background:var(--card);padding:130px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.prod-inner{padding:0 7%;max-width:1440px;margin:0 auto}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:60px}
.prod-card{background:var(--dark);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.3s;opacity:0;transform:translateY(30px)}
.prod-card.visible{opacity:1;transform:translateY(0)}
.prod-card:hover{border-color:rgba(200,255,0,0.2);transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.prod-img{height:200px;display:flex;align-items:center;justify-content:center;font-size:64px;position:relative;background:var(--card2)}
.pbadge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:600;padding:3px 9px;border-radius:4px;text-transform:uppercase;letter-spacing:1px}
.pbn{background:var(--accent);color:#000}
.pbh{background:rgba(255,255,255,0.15);color:#fff}
.pbs{background:rgba(160,0,255,0.3);color:#d9aaff}
.prod-info{padding:18px}
.prod-name{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;margin-bottom:10px}
.prod-price{display:flex;align-items:center;gap:8px}
.pp{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--white)}
.po{font-size:12px;color:rgba(255,255,255,0.2);text-decoration:line-through}
.prod-btn{width:100%;margin-top:14px;background:transparent;color:var(--accent);border:1px solid rgba(200,255,0,0.25);padding:10px;border-radius:6px;font-family:'Inter',sans-serif;font-weight:600;font-size:12px;cursor:pointer;transition:all 0.2s;text-transform:uppercase;letter-spacing:1px}
.prod-btn:hover{background:var(--accent);color:#000;border-color:var(--accent)}
/* STATS */
.stats-section{padding:130px 7%;max-width:1440px;margin:0 auto}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:60px;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.stat-item{background:var(--card);padding:48px 32px;text-align:center;opacity:0;transform:translateY(20px);transition:all 0.6s;border-right:1px solid var(--border)}
.stat-item:last-child{border-right:none}
.stat-item.visible{opacity:1;transform:translateY(0)}
.stat-num{font-family:'Syne',sans-serif;font-size:56px;font-weight:800;color:var(--white);line-height:1}
.stat-label{font-size:11px;color:var(--muted);margin-top:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600}
/* CTA SPLINE — full width with spline bg */
.cta-spline{width:100%;height:70vh;position:relative;overflow:hidden}
.cta-spline spline-viewer{width:100%;height:100%;position:absolute;inset:0}
.cta-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, var(--dark) 0%, rgba(7,7,15,0.3) 50%, var(--dark) 100%);z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center;padding:0 7%}
.cta-title{font-family:'Syne',sans-serif;font-size:clamp(42px,5vw,80px);font-weight:800;line-height:1;letter-spacing:-1px;opacity:0;transform:translateY(20px);transition:all 0.7s}
.cta-title.visible{opacity:1;transform:translateY(0)}
.cta-title span{color:var(--accent)}
.cta-sub-text{font-size:16px;color:var(--muted);max-width:440px;line-height:1.7;opacity:0;transform:translateY(20px);transition:all 0.7s 0.15s}
.cta-sub-text.visible{opacity:1;transform:translateY(0)}
.cta-btns{display:flex;gap:12px;opacity:0;transform:translateY(20px);transition:all 0.7s 0.3s}
.cta-btns.visible{opacity:1;transform:translateY(0)}
/* TRUST */
.trust-section{background:var(--card);border-top:1px solid var(--border);padding:80px 7%}
.trust-inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.trust-card{background:var(--dark);padding:32px 24px;text-align:center;opacity:0;transform:translateY(16px);transition:all 0.5s;border-right:1px solid var(--border)}
.trust-card:last-child{border-right:none}
.trust-card.visible{opacity:1;transform:translateY(0)}
.ti{font-size:30px;margin-bottom:12px}
.tt{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;margin-bottom:6px}
.td{font-size:12px;color:var(--muted);line-height:1.6}
/* FOOTER */
footer{background:var(--dark);border-top:1px solid var(--border);padding:52px 7%;display:flex;align-items:center;justify-content:space-between}
.f-logo{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--white)}
.f-logo span{color:var(--accent)}
.f-links{display:flex;gap:30px}
.f-links a{font-size:12px;color:rgba(255,255,255,0.25);text-decoration:none;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;transition:color 0.2s}
.f-links a:hover{color:var(--white)}
.f-copy{font-size:12px;color:rgba(255,255,255,0.15)}
/* CAT TABS */
.cat-tabs{display:flex;gap:8px;margin-bottom:28px}
.cat-tab{background:transparent;color:var(--muted);border:1px solid var(--border);padding:10px 24px;border-radius:6px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:all 0.2s;letter-spacing:0.5px;text-transform:uppercase}
.cat-tab:hover{border-color:rgba(200,255,0,0.3);color:var(--white)}
.cat-tab.active{background:var(--accent);color:#000;border-color:var(--accent)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
</style>
</head>
<body>
<nav>
<div class="logo">Paw<span>Fest</span></div>
<ul class="nav-links">
<li><a href="#">Dogs</a></li>
<li><a href="#">Cats</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">About</a></li>
</ul>
<button class="nav-btn">Shop Now →</button>
</nav>
<!-- HERO — full screen Spline -->
<div class="hero">
<spline-viewer url="https://prod.spline.design/PnNBDQ9gTuW4oEFS/scene.splinecode"></spline-viewer>
<div class="hero-overlay"></div>
<div class="hero-content">
<div class="hero-tag">🐾 Premium Dog Store</div>
<h1 class="hero-title">
YOUR DOG<br>
<span class="hl">DESERVES</span><br>
<span class="hl2">THE BEST</span>
</h1>
<p class="hero-desc">Toys, costumes and accessories made for dogs who live their best life. Fast shipping. Real quality.</p>
<div class="hero-btns">
<button class="btn-solid">Shop Now 🐶</button>
<button class="btn-outline">View Collections</button>
</div>
</div>
<div class="scroll-hint">
<span>Scroll</span>
<div class="scroll-line"></div>
</div>
</div>
<!-- MARQUEE -->
<div class="marquee-wrap">
<div class="marquee-track">
<span class="mq-item"><span class="mq-dot"></span>Free Shipping Over $35</span>
<span class="mq-item"><span class="mq-dot"></span>5000+ Happy Dogs</span>
<span class="mq-item"><span class="mq-dot"></span>Halloween Drop Live</span>
<span class="mq-item"><span class="mq-dot"></span>New Toys Every Week</span>
<span class="mq-item"><span class="mq-dot"></span>3–8 Day Delivery</span>
<span class="mq-item"><span class="mq-dot"></span>Free Shipping Over $35</span>
<span class="mq-item"><span class="mq-dot"></span>5000+ Happy Dogs</span>
<span class="mq-item"><span class="mq-dot"></span>Halloween Drop Live</span>
<span class="mq-item"><span class="mq-dot"></span>New Toys Every Week</span>
<span class="mq-item"><span class="mq-dot"></span>3–8 Day Delivery</span>
</div>
</div>
<!-- FEATURES -->
<div class="section">
<div class="label">Why PawFest</div>
<div class="title">Built for <span class="dim">dog lovers</span></div>
<p class="sub">We obsess over every product before it hits your dog's paws. Quality you can feel, speed you can count on.</p>
<div class="feat-grid">
<div class="feat-item" style="transition-delay:0.05s">
<div class="feat-num">01</div>
<div class="feat-icon">🚀</div>
<div class="feat-title">Fast Shipping</div>
<div class="feat-desc">US warehouse. 3–8 day delivery. Real tracking on every package.</div>
</div>
<div class="feat-item" style="transition-delay:0.15s">
<div class="feat-num">02</div>
<div class="feat-icon">🎯</div>
<div class="feat-title">Tail-Tested</div>
<div class="feat-desc">Every item passes our quality check. If a dog wouldn't love it, we don't sell it.</div>
</div>
<div class="feat-item" style="transition-delay:0.25s">
<div class="feat-num">03</div>
<div class="feat-icon">💰</div>
<div class="feat-title">Price Match</div>
<div class="feat-desc">Found it cheaper? We'll match it. Premium quality without the premium price.</div>
</div>
<div class="feat-item" style="transition-delay:0.35s">
<div class="feat-num">04</div>
<div class="feat-icon">💬</div>
<div class="feat-title">Real Support</div>
<div class="feat-desc">Our team replies within 24 hours. No bots, no runaround. Just real help.</div>
</div>
</div>
</div>
<!-- SPLINE DIVIDER 2 -->
<div class="spline-divider">
<spline-viewer url="https://prod.spline.design/PnNBDQ9gTuW4oEFS/scene.splinecode" loading="lazy"></spline-viewer>
<div class="spline-divider-overlay"></div>
<div class="spline-divider-text">
<div class="label">Our Philosophy</div>
<div class="title" style="font-size:clamp(32px,3.5vw,54px);max-width:480px;line-height:1.1">"A dog is the only thing on earth that loves you more than it loves itself."</div>
<p style="font-size:13px;color:var(--muted);margin-top:18px;letter-spacing:2px;text-transform:uppercase;font-weight:600">— Josh Billings</p>
</div>
</div>
<!-- PRODUCTS -->
<div class="prod-section">
<div class="prod-inner">
<div class="label">Trending Now</div>
<div class="title">Best <span class="dim">Sellers</span></div>
<div class="prod-grid">
<div class="prod-card" style="transition-delay:0.1s">
<div class="prod-img">🎃<span class="pbadge pbh">Hot</span></div>
<div class="prod-info">
<div class="prod-name">Pumpkin Dog Costume</div>
<div class="prod-price"><span class="pp">$29.99</span><span class="po">$49.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card" style="transition-delay:0.2s">
<div class="prod-img">🧸<span class="pbadge pbn">New</span></div>
<div class="prod-info">
<div class="prod-name">Snuffle Puzzle Toy</div>
<div class="prod-price"><span class="pp">$22.99</span><span class="po">$34.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card" style="transition-delay:0.3s">
<div class="prod-img">🦺<span class="pbadge pbs">Sale</span></div>
<div class="prod-info">
<div class="prod-name">Dog Rain Jacket</div>
<div class="prod-price"><span class="pp">$34.99</span><span class="po">$59.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card" style="transition-delay:0.4s">
<div class="prod-img">🦴<span class="pbadge pbh">Hot</span></div>
<div class="prod-info">
<div class="prod-name">Chew Rope Bundle</div>
<div class="prod-price"><span class="pp">$18.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<!-- CATS SECTION -->
<div class="prod-section" style="background:var(--dark);border-top:1px solid var(--border);border-bottom:1px solid var(--border)">
<div class="prod-inner">
<div style="display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:60px">
<div>
<div class="label">For the Feline Side</div>
<div class="title">Cat <span class="dim">Collection</span></div>
<p class="sub" style="margin-top:10px">Because cats deserve to look incredible too. Toys, beds, costumes — all tested by real cats.</p>
</div>
<button class="btn-outline" style="flex-shrink:0;height:fit-content">View All Cat Products →</button>
</div>
<!-- CAT TABS -->
<div class="cat-tabs">
<button class="cat-tab active" onclick="switchTab('toys')">Cat Toys</button>
<button class="cat-tab" onclick="switchTab('costumes')">Cat Costumes</button>
<button class="cat-tab" onclick="switchTab('accessories')">Accessories</button>
</div>
<!-- CAT TOYS -->
<div class="cat-grid" id="tab-toys">
<div class="prod-card visible">
<div class="prod-img" style="background:linear-gradient(135deg,#0a1a00,#1a3a00)">🪄<span class="pbadge pbn">New</span></div>
<div class="prod-info">
<div class="prod-name">Feather Wand Toy</div>
<div class="prod-price"><span class="pp">$14.99</span><span class="po">$22.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card visible" style="transition-delay:0.1s">
<div class="prod-img" style="background:linear-gradient(135deg,#0d0020,#1a0040)">🐭<span class="pbadge pbh">Hot</span></div>
<div class="prod-info">
<div class="prod-name">Mouse Tunnel Set</div>
<div class="prod-price"><span class="pp">$19.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card visible" style="transition-delay:0.2s">
<div class="prod-img" style="background:linear-gradient(135deg,#1a0500,#2d0a00)">🎯<span class="pbadge pbs">Sale</span></div>
<div class="prod-info">
<div class="prod-name">Laser Pointer Ball</div>
<div class="prod-price"><span class="pp">$12.99</span><span class="po">$19.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card visible" style="transition-delay:0.3s">
<div class="prod-img" style="background:linear-gradient(135deg,#001510,#002a20)">🧶<span class="pbadge pbn">New</span></div>
<div class="prod-info">
<div class="prod-name">Interactive Yarn Ball</div>
<div class="prod-price"><span class="pp">$16.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
</div>
<!-- CAT COSTUMES -->
<div class="cat-grid" id="tab-costumes" style="display:none">
<div class="prod-card visible">
<div class="prod-img" style="background:linear-gradient(135deg,#150a00,#3d1500)">🎃<span class="pbadge pbh">Hot</span></div>
<div class="prod-info">
<div class="prod-name">Pumpkin Cat Costume</div>
<div class="prod-price"><span class="pp">$24.99</span><span class="po">$39.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card visible" style="transition-delay:0.1s">
<div class="prod-img" style="background:linear-gradient(135deg,#00101a,#00203d)">🦸<span class="pbadge pbn">New</span></div>
<div class="prod-info">
<div class="prod-name">Superhero Cat Cape</div>
<div class="prod-price"><span class="pp">$21.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card visible" style="transition-delay:0.2s">
<div class="prod-img" style="background:linear-gradient(135deg,#0d0020,#200050)">🧙<span class="pbadge pbs">Sale</span></div>
<div class="prod-info">
<div class="prod-name">Wizard Cat Hat</div>
<div class="prod-price"><span class="pp">$17.99</span><span class="po">$27.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card visible" style="transition-delay:0.3s">
<div class="prod-img" style="background:linear-gradient(135deg,#1a1000,#3a2000)">👑<span class="pbadge pbn">New</span></div>
<div class="prod-info">
<div class="prod-name">Royal Crown Outfit</div>
<div class="prod-price"><span class="pp">$26.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
</div>
<!-- CAT ACCESSORIES -->
<div class="cat-grid" id="tab-accessories" style="display:none">
<div class="prod-card visible">
<div class="prod-img" style="background:linear-gradient(135deg,#001a1a,#003030)">😴<span class="pbadge pbn">New</span></div>
<div class="prod-info">
<div class="prod-name">Cozy Cat Cave Bed</div>
<div class="prod-price"><span class="pp">$34.99</span><span class="po">$54.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card visible" style="transition-delay:0.1s">
<div class="prod-img" style="background:linear-gradient(135deg,#150015,#300030)">🪮<span class="pbadge pbh">Hot</span></div>
<div class="prod-info">
<div class="prod-name">Self-Cleaning Brush</div>
<div class="prod-price"><span class="pp">$22.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card visible" style="transition-delay:0.2s">
<div class="prod-img" style="background:linear-gradient(135deg,#0a1500,#152500)">🍽️<span class="pbadge pbs">Sale</span></div>
<div class="prod-info">
<div class="prod-name">Elevated Cat Bowl Set</div>
<div class="prod-price"><span class="pp">$18.99</span><span class="po">$29.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
<div class="prod-card visible" style="transition-delay:0.3s">
<div class="prod-img" style="background:linear-gradient(135deg,#1a0010,#350020)">🔔<span class="pbadge pbn">New</span></div>
<div class="prod-info">
<div class="prod-name">Breakaway Cat Collar</div>
<div class="prod-price"><span class="pp">$11.99</span></div>
<button class="prod-btn">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<!-- STATS -->
<div class="stats-section">
<div style="text-align:center">
<div class="label" style="text-align:center">Numbers</div>
<div class="title" style="text-align:center">Pets <span class="dim">love us</span></div>
</div>
<div class="stats-grid">
<div class="stat-item" style="transition-delay:0.1s"><div class="stat-num" data-target="5000">0</div><div class="stat-label">Happy Customers</div></div>
<div class="stat-item" style="transition-delay:0.2s"><div class="stat-num" data-target="98">0</div><div class="stat-label">% Satisfaction</div></div>
<div class="stat-item" style="transition-delay:0.3s"><div class="stat-num" data-target="120">0</div><div class="stat-label">Products</div></div>
<div class="stat-item" style="transition-delay:0.4s"><div class="stat-num" data-target="7">0</div><div class="stat-label">Day Avg Delivery</div></div>
</div>
</div>
<!-- CTA with Spline background -->
<div class="cta-spline">
<spline-viewer url="https://prod.spline.design/PnNBDQ9gTuW4oEFS/scene.splinecode" loading="lazy"></spline-viewer>
<div class="cta-overlay">
<div class="cta-title">SPOIL YOUR<br><span>PET TODAY</span></div>
<p class="cta-sub-text">Dogs. Cats. All pets welcome. Free shipping on orders over $35. New drops every week.</p>
<div class="cta-btns">
<button class="btn-solid">Shop Dogs 🐶</button>
<button class="btn-outline">Shop Cats 🐱</button>
</div>
</div>
</div>
<!-- TRUST -->
<div class="trust-section">
<div class="trust-inner">
<div class="trust-card" style="transition-delay:0.1s"><div class="ti">🚀</div><div class="tt">Fast Shipping</div><div class="td">3–8 days from US warehouse to your door</div></div>
<div class="trust-card" style="transition-delay:0.2s"><div class="ti">🔒</div><div class="tt">Secure Checkout</div><div class="td">256-bit SSL encryption on every order</div></div>
<div class="trust-card" style="transition-delay:0.3s"><div class="ti">↩️</div><div class="tt">Easy Returns</div><div class="td">30-day hassle-free return policy</div></div>
<div class="trust-card" style="transition-delay:0.4s"><div class="ti">💬</div><div class="tt">24hr Support</div><div class="td">Real humans ready to help anytime</div></div>
</div>
</div>
<footer>
<div class="f-logo">Paw<span>Fest</span></div>
<div class="f-links">
<a href="#">Shop</a><a href="#">About</a><a href="#">Shipping</a><a href="#">Returns</a><a href="#">Contact</a>
</div>
<div class="f-copy">© 2026 PawFest. All rights reserved.</div>
</footer>
<script>
// Cat tab switching
function switchTab(tab){
['toys','costumes','accessories'].forEach(t=>{
document.getElementById('tab-'+t).style.display = t===tab ? 'grid' : 'none';
});
document.querySelectorAll('.cat-tab').forEach((btn,i)=>{
btn.classList.toggle('active', ['toys','costumes','accessories'][i]===tab);
});
}
// Scroll reveal
const revEls = document.querySelectorAll('.feat-item,.prod-card,.stat-item,.trust-card,.cta-title,.cta-sub-text,.cta-btns');
const obs = new IntersectionObserver(entries=>{
entries.forEach(e=>{ if(e.isIntersecting) e.target.classList.add('visible'); });
},{threshold:0.1});
revEls.forEach(el=>obs.observe(el));
// Count up
const nums = document.querySelectorAll('.stat-num[data-target]');
const numObs = new IntersectionObserver(entries=>{
entries.forEach(e=>{
if(e.isIntersecting && !e.target.dataset.done){
e.target.dataset.done=1;
const target=parseInt(e.target.dataset.target);
let cur=0; const step=target/60;
const t=setInterval(()=>{
cur+=step; if(cur>=target){cur=target;clearInterval(t);}
e.target.textContent = target>100 ? Math.floor(cur).toLocaleString()+'+' : Math.floor(cur);
},16);
}
});
},{threshold:0.5});
nums.forEach(el=>numObs.observe(el));
</script>
</body>
</html>