Product 1

<!DOCTYPE html>
<!--
=================================================================
SPARKBOTS™ — Landing v3 (Máxima conversión)
Pegar en Shopify: Online Store > Themes > Customize >
Add section > Custom Liquid

ANTES DE PUBLICAR — reemplazá:
• TU-CHECKOUT-URL → tu link de checkout Shopify
• TU-VIDEO.mp4 → video subido a Shopify > Content > Files
• TU-IMG-1/2/3/4.jpg → 4 fotos de robots terminados (1:1)
=================================================================
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SparkBots™ — Your child builds a real robot in 15 minutes</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,800;0,9..144,900;1,9..144,800&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,video{max-width:100%;display:block}
a{text-decoration:none}

:root{
--cream:#FFFBF2;
--sand:#F5EFE3;
--sand2:#EDE5D4;
--navy:#0C0F1E;
--navy2:#1A2040;
--amber:#FFBE0B;
--amber2:#F5A800;
--amber-bg:#FFF8DC;
--dark:#111318;
--ink:#1C1917;
--muted:#78716C;
--muted2:#A8A29E;
--border:#E8E0D0;
--white:#FFFFFF;
--green:#16A34A;
--r:12px;--rl:20px;--rx:28px;--pill:999px;
--sh-xs:0 1px 4px rgba(0,0,0,.06);
--sh-sm:0 2px 12px rgba(0,0,0,.08);
--sh-md:0 8px 32px rgba(0,0,0,.1);
--sh-lg:0 20px 60px rgba(0,0,0,.13);
--sh-amber:0 6px 32px rgba(255,190,11,.38);
}

html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;line-height:1.65;color:var(--ink);background:var(--cream);overflow-x:hidden}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.wrap-lg{max-width:1100px;margin:0 auto;padding:0 24px}
strong{font-weight:800}

/* TYPOGRAPHY */
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber2);margin-bottom:14px}
.sh{font-family:'Fraunces',serif;font-size:clamp(30px,5.5vw,52px);font-weight:900;line-height:1.07;letter-spacing:-.025em;color:var(--navy);margin-bottom:16px}
.sh em{font-style:italic;color:var(--amber2)}

/* CTA */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--amber);color:var(--navy);font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17px;padding:18px 42px;border-radius:var(--pill);box-shadow:var(--sh-amber);transition:background .15s,transform .15s,box-shadow .15s;border:none;cursor:pointer}
.btn:hover{background:var(--amber2);transform:translateY(-2px);box-shadow:0 10px 44px rgba(255,190,11,.5)}
.btn-lg{font-size:20px;padding:22px 54px}

/* TRUST */
.trust{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;font-weight:700;color:var(--muted);margin-top:14px}
.trust span::before{content:'✓ ';color:var(--green)}

/* REVEAL ANIMATION */
.rev{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease}
.rev.in{opacity:1;transform:translateY(0)}

/* ─── RIBBON ─── */
#ribbon{background:var(--navy);color:rgba(255,255,255,.8);padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600;position:sticky;top:0;z-index:1000}
#ribbon strong{color:var(--amber)}
#ribbon .rt{background:var(--amber);color:var(--navy);font-weight:800;font-size:13px;font-family:monospace;letter-spacing:.06em;padding:3px 12px;border-radius:var(--pill)}

/* ─── HERO ─── */
#hero{padding:64px 0 72px;background:var(--cream);position:relative;overflow:hidden}
.hero-bg-num{position:absolute;right:-30px;top:50%;transform:translateY(-50%);font-family:'Fraunces',serif;font-size:clamp(200px,28vw,360px);font-weight:900;color:rgba(255,190,11,.07);line-height:1;pointer-events:none;user-select:none;white-space:nowrap}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:52px;align-items:center;position:relative;z-index:1}

.h-chip{display:inline-flex;align-items:center;gap:8px;background:var(--amber-bg);border:1.5px solid rgba(255,190,11,.4);border-radius:var(--pill);padding:7px 18px;font-size:13px;font-weight:700;color:#92670A;margin-bottom:22px}
.chip-dot{width:6px;height:6px;background:var(--amber);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

.h1{font-family:'Fraunces',serif;font-size:clamp(36px,6.5vw,68px);font-weight:900;line-height:1.03;letter-spacing:-.03em;color:var(--navy);margin-bottom:8px}
.h1 em{font-style:italic;color:var(--amber2)}
.h1-tagline{display:block;font-family:'Fraunces',serif;font-size:clamp(19px,2.8vw,28px);font-weight:800;font-style:italic;color:var(--muted);margin-top:4px;margin-bottom:20px}

.h-sub{font-size:17px;color:var(--muted);line-height:1.6;max-width:500px;margin-bottom:26px}

.proof-bar{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding:14px 18px;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);box-shadow:var(--sh-xs);max-width:430px}
.avs{display:flex}
.av{width:32px;height:32px;border-radius:50%;background:var(--amber);color:var(--navy);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin-left:-7px;border:2px solid var(--white)}
.av:first-child{margin-left:0}
.proof-txt .stars{color:var(--amber);font-size:13px;letter-spacing:.04em;margin-bottom:2px}
.proof-txt .pt{font-size:12px;font-weight:600;color:var(--muted)}

.price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}
.p-was{font-size:18px;font-weight:700;color:var(--muted2);text-decoration:line-through}
.p-now{font-family:'Fraunces',serif;font-size:48px;font-weight:900;color:var(--navy);line-height:1}
.p-save{background:var(--amber);color:var(--navy);font-size:12px;font-weight:800;padding:5px 12px;border-radius:var(--pill)}

.hero-video{border-radius:var(--rx);overflow:hidden;box-shadow:var(--sh-lg);background:var(--sand);aspect-ratio:9/16;position:relative}
.hero-video video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.vid-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:13px;text-align:center;padding:24px}
.vid-ph span{font-size:44px}
.play-badge{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(255,190,11,.95);color:var(--navy);font-size:12px;font-weight:800;padding:6px 18px;border-radius:var(--pill);white-space:nowrap}

.scarcity{margin-top:18px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;max-width:430px}
.sc-label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.sc-label span:last-child{color:var(--amber2)}
.sc-bar{height:7px;background:var(--border);border-radius:var(--pill);overflow:hidden}
.sc-fill{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--amber2));border-radius:var(--pill);transition:width 1.2s ease-out}

/* ─── STATS ─── */
.stats-band{background:var(--navy);padding:28px 0}
.stats-in{display:flex;justify-content:center;flex-wrap:wrap}
.si{padding:10px 36px;border-right:1px solid rgba(255,255,255,.1);text-align:center}
.si:last-child{border-right:none}
.si-n{display:block;font-family:'Fraunces',serif;font-size:30px;font-weight:900;color:var(--amber)}
.si-l{font-size:12px;color:rgba(255,255,255,.5);font-weight:600}

/* ─── PAIN ─── */
#pain{padding:80px 0;background:var(--sand)}
.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.pain-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:26px;box-shadow:var(--sh-xs)}
.pain-e{font-size:30px;margin-bottom:10px}
.pain-t{font-weight:800;font-size:16px;color:var(--navy);margin-bottom:6px}
.pain-b{font-size:14px;color:var(--muted);line-height:1.6}

/* ─── BRIDGE ─── */
.bridge{background:var(--amber);padding:52px 24px;text-align:center}
.bridge-q{font-family:'Fraunces',serif;font-size:clamp(22px,4vw,38px);font-weight:900;line-height:1.18;color:var(--navy);max-width:660px;margin:0 auto 8px}
.bridge-sub{font-size:15px;font-weight:700;color:rgba(12,15,30,.55)}

/* ─── WHAT YOU'LL NEED ─── */
#need{background:var(--dark);padding:80px 0}
.need-wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.need-eye{color:var(--amber);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.need-h{font-family:'Fraunces',serif;font-size:clamp(28px,4vw,42px);font-weight:900;line-height:1.1;color:var(--white);margin-bottom:12px}
.need-h em{font-style:italic;color:var(--amber)}
.need-body{font-size:15px;color:rgba(255,255,255,.5);line-height:1.65}
.need-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.need-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--rl);padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13px;font-weight:700;color:rgba(255,255,255,.75);transition:background .2s,border-color .2s}
.need-item:hover{background:rgba(255,190,11,.1);border-color:rgba(255,190,11,.3)}
.ne{font-size:28px}

/* ─── HOW IT WORKS ─── */
#how{padding:80px 0;background:var(--cream)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;position:relative}
.steps::before{content:'';position:absolute;top:60px;left:calc(33.33% - 10px);right:calc(33.33% - 10px);height:2px;background:linear-gradient(90deg,var(--amber),var(--amber2));pointer-events:none}
.step{background:var(--white);border:1px solid var(--border);border-radius:var(--rx);padding:28px 24px;box-shadow:var(--sh-xs);position:relative;z-index:1}
.step-num{width:36px;height:36px;background:var(--amber);color:var(--navy);font-weight:900;font-size:15px;font-family:'Fraunces',serif;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 0 0 4px var(--white),0 0 0 5px var(--border)}
.step-icon{font-size:32px;margin-bottom:12px}
.step-t{font-weight:800;font-size:16px;color:var(--navy);margin-bottom:8px}
.step-b{font-size:14px;color:var(--muted);line-height:1.6}

/* ─── INSIDE ─── */
#inside{padding:80px 0;background:var(--sand)}
.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.ic{display:flex;gap:16px;align-items:flex-start;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:22px;box-shadow:var(--sh-xs)}
.ic-ico{font-size:28px;flex-shrink:0;line-height:1}
.ic-t{font-weight:800;font-size:15px;color:var(--navy);margin-bottom:4px}
.ic-b{font-size:13px;color:var(--muted);line-height:1.55}
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.ph{aspect-ratio:1;border-radius:var(--rl);overflow:hidden;background:var(--sand2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted2);text-align:center;padding:10px;line-height:1.5}
.ph img{width:100%;height:100%;object-fit:cover}

/* ─── COMPARISON ─── */
#compare{padding:80px 0;background:var(--cream)}
.ctable{margin-top:40px;border-radius:var(--rx);overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-md)}
.cth{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;background:var(--navy)}
.cth div{padding:16px 20px;font-size:12px;font-weight:800;color:rgba(255,255,255,.45);letter-spacing:.05em;text-transform:uppercase}
.cth .cth-spark{color:var(--amber);background:rgba(255,190,11,.1);text-align:center}
.cth div:nth-child(3),.cth div:nth-child(4){text-align:center}
.ctr{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;border-top:1px solid var(--border);background:var(--white)}
.ctr:nth-child(even){background:var(--cream)}
.ctr .feat{padding:14px 20px;font-weight:700;font-size:14px;color:var(--navy)}
.ctr .yes{color:var(--green);font-weight:800;font-size:18px;text-align:center;padding:14px 8px}
.ctr .no{color:#DC2626;font-weight:800;font-size:18px;text-align:center;padding:14px 8px}
.ctr .mid{color:var(--muted2);font-weight:600;font-size:13px;text-align:center;padding:14px 8px}
.ctr .spark-col{background:rgba(255,190,11,.06)}
.cfoot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;border-top:2px solid var(--amber);background:var(--white)}
.cfoot div{padding:20px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--muted)}
.cfoot .spark-foot{background:rgba(255,190,11,.08);flex-direction:column;gap:6px}
.spark-price-sm{font-family:'Fraunces',serif;font-size:28px;font-weight:900;color:var(--navy)}
.spark-was-sm{font-size:12px;color:var(--muted2);text-decoration:line-through}

/* ─── BONUSES ─── */
#bonuses{padding:80px 0;background:var(--sand)}
.bonus-stack{display:flex;flex-direction:column;gap:14px;margin-top:36px}
.bitem{display:flex;align-items:center;gap:20px;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:24px 28px;box-shadow:var(--sh-xs)}
.btag{background:var(--navy);color:var(--amber);font-size:11px;font-weight:800;letter-spacing:.06em;padding:5px 12px;border-radius:var(--pill);white-space:nowrap;flex-shrink:0}
.btext{flex:1}
.btitle{font-weight:800;font-size:15px;color:var(--navy);margin-bottom:4px}
.bdesc{font-size:14px;color:var(--muted);line-height:1.55}
.bval{text-align:right;flex-shrink:0}
.bwas{font-size:12px;color:var(--muted2);text-decoration:line-through}
.bfree{font-size:16px;font-weight:900;color:var(--amber2)}

/* ─── VALUE STACK ─── */
#val{padding:80px 0;background:var(--cream)}
.vbox{background:var(--white);border:2px solid var(--border);border-radius:var(--rx);overflow:hidden;max-width:700px;margin:36px auto 0;box-shadow:var(--sh-md)}
.vrow{display:flex;justify-content:space-between;align-items:center;padding:15px 28px;border-bottom:1px solid var(--border);font-size:15px;font-weight:600;color:var(--ink)}
.vpc{color:var(--muted2);font-weight:700;font-size:14px}
.vtot{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-bottom:1px solid var(--border);font-weight:800;font-size:15px;color:var(--muted);background:var(--sand)}
.vtot-p{text-decoration:line-through;color:var(--muted2)}
.vcta-box{padding:28px;background:linear-gradient(135deg,#FFFDE8,#FFF8DC);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:2px solid var(--amber)}
.vcta-lbl{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:4px}
.vcta-price{font-family:'Fraunces',serif;font-size:52px;font-weight:900;color:var(--navy);line-height:1}
.vcta-save{display:inline-block;background:var(--amber);color:var(--navy);font-size:12px;font-weight:800;padding:4px 12px;border-radius:var(--pill);margin-top:6px}
.vcta-btn{background:var(--amber);color:var(--navy);font-weight:800;font-size:17px;padding:18px 36px;border-radius:var(--pill);box-shadow:var(--sh-amber);display:inline-block;transition:background .15s,transform .15s,box-shadow .15s;white-space:nowrap}
.vcta-btn:hover{background:var(--amber2);transform:translateY(-2px);box-shadow:0 10px 40px rgba(255,190,11,.45)}
.vcta-sub{font-size:12px;color:var(--muted);font-weight:700;margin-top:8px;text-align:center}

/* ─── TESTIMONIALS ─── */
#testi{padding:80px 0;background:var(--sand)}
.t-feat{background:var(--white);border:1px solid var(--border);border-radius:var(--rx);padding:40px;max-width:700px;margin:36px auto 36px;box-shadow:var(--sh-sm);text-align:center}
.t-feat .stars{font-size:22px;color:var(--amber);letter-spacing:.04em;margin-bottom:16px}
.tq{font-family:'Fraunces',serif;font-size:clamp(18px,2.5vw,22px);font-style:italic;line-height:1.5;color:var(--navy);margin-bottom:20px}
.tfa{display:flex;align-items:center;gap:12px;justify-content:center}
.tfa-av{width:42px;height:42px;border-radius:50%;background:var(--amber);color:var(--navy);font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center}
.tfa-n{font-weight:800;font-size:14px;color:var(--navy)}
.ver{font-weight:600;font-size:12px;color:var(--green)}
.tfa-l{font-size:13px;color:var(--muted)}
.chat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:20px;box-shadow:var(--sh-xs)}
.chat-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:14px}
.chat-av{width:36px;height:36px;border-radius:50%;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-name{font-weight:800;font-size:13px;color:var(--navy)}
.chat-loc{font-size:12px;color:var(--muted)}
.chat-dot{margin-left:auto;width:8px;height:8px;background:var(--green);border-radius:50%}
.bub-in{background:var(--sand);border-radius:4px 14px 14px 14px;padding:11px 14px;font-size:14px;color:var(--ink);line-height:1.5;margin-bottom:8px}
.bub-out{background:var(--amber-bg);border:1px solid rgba(255,190,11,.3);border-radius:14px 4px 14px 14px;padding:10px 14px;font-size:13px;font-weight:700;color:var(--navy);text-align:right;margin-left:20%}
.chat-stars{color:var(--amber);font-size:12px;margin-top:12px;letter-spacing:.04em}

/* ─── GUARANTEE ─── */
#guarantee{padding:64px 0;background:var(--cream)}
.g-box{max-width:680px;margin:0 auto;background:var(--white);border:2px solid var(--border);border-radius:var(--rx);padding:48px;text-align:center;box-shadow:var(--sh-sm)}
.g-icon{font-size:56px;margin-bottom:16px}
.g-title{font-family:'Fraunces',serif;font-size:28px;font-weight:900;color:var(--navy);margin-bottom:12px}
.g-body{font-size:15px;color:var(--muted);line-height:1.7;max-width:480px;margin:0 auto 24px}
.pay-row{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--muted);margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}

/* ─── FAQ ─── */
#faq{padding:72px 0;background:var(--sand)}
.fwrap{max-width:700px;margin:36px auto 0;display:flex;flex-direction:column;gap:10px}
.fcard{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;box-shadow:var(--sh-xs)}
.fbtn{width:100%;background:none;border:none;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;color:var(--navy);cursor:pointer;text-align:left}
.fi{width:26px;height:26px;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:400;color:var(--amber2);flex-shrink:0;transition:transform .25s,background .2s}
.fcard.open .fi{transform:rotate(45deg);background:var(--amber);color:var(--navy)}
.fans{display:none;padding:0 24px 20px;margin:0 0 0 0;border-top:1px solid var(--border);font-size:14px;color:var(--muted);line-height:1.7;padding-top:16px}
.fcard.open .fans{display:block}

/* ─── FINAL CTA ─── */
#final{padding:88px 0;background:var(--navy);text-align:center;position:relative;overflow:hidden}
#final::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(255,190,11,.1) 0%,transparent 65%);pointer-events:none}
.feyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:16px}
.fh{font-family:'Fraunces',serif;font-size:clamp(34px,6vw,62px);font-weight:900;line-height:1.05;letter-spacing:-.025em;color:var(--white);margin-bottom:18px}
.fh em{font-style:italic;color:var(--amber)}
.fsub{font-size:17px;color:rgba(255,255,255,.5);max-width:520px;margin:0 auto 32px;line-height:1.55}
.fcount-box{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--pill);padding:12px 28px;font-size:14px;font-weight:700;color:rgba(255,255,255,.55);margin-bottom:32px}
#final-timer{font-size:20px;font-weight:800;font-family:monospace;color:var(--amber);letter-spacing:.06em}
.final-trust{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;font-size:13px;font-weight:700;color:rgba(255,255,255,.35);margin-top:16px}
.final-trust span::before{content:'✓ ';color:var(--amber)}
.secure-pill{display:inline-flex;gap:10px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--rl);padding:14px 24px;font-size:13px;font-weight:600;color:rgba(255,255,255,.35);max-width:440px;margin-top:28px}

/* ─── FLOATING CTA ─── */
#fcta{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:980;opacity:0;pointer-events:none;transition:opacity .3s;width:calc(100% - 28px);max-width:450px}
#fcta.on{opacity:1;pointer-events:all}
#fcta a{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--amber);color:var(--navy);font-weight:800;font-size:16px;padding:17px 28px;border-radius:var(--pill);box-shadow:var(--sh-amber),0 8px 40px rgba(0,0,0,.2);animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ─── FOOTER ─── */
footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.06);padding:36px 0;text-align:center;font-size:13px;color:rgba(255,255,255,.3)}
footer a{color:rgba(255,255,255,.3)}
footer a:hover{color:rgba(255,255,255,.6)}
footer strong{color:var(--amber)}

/* ─── RESPONSIVE ─── */
@media(max-width:820px){
.hero-grid{grid-template-columns:1fr}
.hero-bg-num{display:none}
.hero-video{max-width:360px;margin:0 auto}
.pain-grid,.inside-grid,.chat-grid{grid-template-columns:1fr}
.photo-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:1fr}
.steps::before{display:none}
.need-wrap{grid-template-columns:1fr}
.cth,.ctr,.cfoot{grid-template-columns:1.2fr 1fr 1fr}
.cth div:last-child,.ctr div:last-child,.cfoot div:last-child{display:none}
.vcta-box{flex-direction:column;align-items:flex-start}
.si{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
.si:last-child{border-bottom:none}
}
@media(max-width:480px){
.bitem{flex-wrap:wrap}
.bval{width:100%;text-align:left;display:flex;gap:8px;align-items:center}
.proof-bar{flex-direction:column;align-items:flex-start;gap:10px}
}
</style>
</head>
<body>

<div id="fcta">
<a href="TU-CHECKOUT-URL">⚡ Get SparkBots™ Now — Only $27</a>
</div>

<div id="ribbon">
<span>🔥 Special launch price — expires in</span>
<span class="rt" id="rtimer">--:--:--</span>
<strong> — Price goes back up after</strong>
</div>

<section id="hero">
<div class="wrap">
<span class="hero-bg-num" aria-hidden="true">15</span>
<div class="hero-grid">

<div>
<div class="h-chip">
<span class="chip-dot"></span>
Over 2,347 kids building right now — join them tonight
</div>

<h1 class="h1">
Your child builds<br>their first real robot<br><em>in 15 minutes.</em>
</h1>
<span class="h1-tagline">From your recycling bin. Tonight.</span>

<p class="h-sub">Most kids forget the screen exists before they finish their second project. 100+ illustrated robot projects, zero extra spending, instant download.</p>

<div class="proof-bar">
<div class="avs">
<div class="av">J</div><div class="av">S</div><div class="av">M</div><div class="av">R</div>
</div>
<div class="proof-txt">
<div class="stars">★★★★★</div>
<div class="pt"><strong>2,347 families</strong> already building · avg 4.9/5</div>
</div>
</div>

<a href="TU-CHECKOUT-URL" class="btn btn-lg">
Get SparkBots™ — Start Building Tonight →
</a>

<div class="trust">
<span>Instant download</span>
<span>No subscription</span>
<span>3 bonuses included</span>
<span>7-day guarantee</span>
</div>

<div class="scarcity">
<div class="sc-label">
<span>🔥 Spots at launch price</span>
<span>2,347 of 2,500 claimed</span>
</div>
<div class="sc-bar"><div class="sc-fill" id="sc-fill"></div></div>
</div>
</div>

<div>

<div class="hero-video">
<video autoplay muted loop playsinline src="TU-VIDEO.mp4">
<source src="TU-VIDEO.mp4" type="video/mp4">
</video>
<div class="vid-ph" id="vid-ph">
<span>🤖</span>
<div>🔁 Reemplazá con tu video<br>Shopify → Content → Files</div>
</div>
<div class="play-badge">▶ Watch a kid build this in 15 min</div>
</div>
</div>

</div>
</div>
</section>

<div class="stats-band">
<div class="stats-in wrap-lg">
<div class="si"><span class="si-n">2,347+</span><span class="si-l">Families building</span></div>
<div class="si"><span class="si-n">100+</span><span class="si-l">Robot projects</span></div>
<div class="si"><span class="si-n">4.9 ★</span><span class="si-l">Average rating</span></div>
<div class="si"><span class="si-n">$0</span><span class="si-l">Extra materials needed</span></div>
<div class="si"><span class="si-n">15 min</span><span class="si-l">To first working robot</span></div>
</div>
</div>

<section id="pain">
<div class="wrap">
<div class="eyebrow">Sound familiar?</div>
<h2 class="sh">You've Tried Everything.<br><em>It Lasts One Afternoon.</em></h2>
<div class="pain-grid">
<div class="pain-card rev"><div class="pain-e">📱</div><div class="pain-t">The screen always wins</div><div class="pain-b">"Just five more minutes" becomes the whole afternoon. You feel worse about it every time you give in.</div></div>
<div class="pain-card rev"><div class="pain-e">🗑️</div><div class="pain-t">Activity kits end up on shelves</div><div class="pain-b">One afternoon of interest, then forgotten. You've spent hundreds on things that promised engagement and delivered clutter.</div></div>
<div class="pain-card rev"><div class="pain-e">😭</div><div class="pain-t">Taking the screen away = a war</div><div class="pain-b">Tears. Bargaining. Door slamming. You're doing the right thing and somehow you're still the villain.</div></div>
<div class="pain-card rev"><div class="pain-e">💸</div><div class="pain-t">STEM kits cost $50–80+</div><div class="pain-b">Half the pieces go missing by week two. And they never explain <em>why</em> things work — just follow steps, get a widget.</div></div>
</div>
</div>
</section>

<div class="bridge">
<div class="wrap">
<p class="bridge-q">What if your child ran to find you — not to ask for the tablet, but to show you what they just built?</p>
<p class="bridge-sub">That's what 2,347 SparkBots™ families experience every weekend.</p>
</div>
</div>

<section id="need">
<div class="wrap">
<div class="need-wrap">
<div>
<div class="need-eye">🧰 What you'll need</div>
<h2 class="need-h">Only everyday<br>items from home.<br><em>Nothing to buy.</em></h2>
<p class="need-body">Every project lists exactly what you need before step one. 99% of families already have everything in their recycling bin. Zero store runs. Zero surprises. Zero extra spending — ever.</p>
</div>
<div class="need-grid">
<div class="need-item"><span class="ne">📦</span>Cardboard</div>
<div class="need-item"><span class="ne">🧴</span>Bottles</div>
<div class="need-item"><span class="ne">✂️</span>Scissors</div>
<div class="need-item"><span class="ne">🖊️</span>Markers</div>
<div class="need-item"><span class="ne">🔧</span>Tape</div>
<div class="need-item"><span class="ne">🔘</span>Bottle caps</div>
<div class="need-item"><span class="ne">🧶</span>Rubber bands</div>
<div class="need-item"><span class="ne">📎</span>Paper clips</div>
<div class="need-item"><span class="ne">🥤</span>Paper cups</div>
</div>
</div>
</div>
</section>

<section id="how">
<div class="wrap">
<div class="eyebrow">Simpler than it sounds</div>
<h2 class="sh">First Robot Finished<br><em>Before Bedtime.</em></h2>
<div class="steps">
<div class="step rev">
<div class="step-num">1</div>
<div class="step-icon">⚡</div>
<div class="step-t">Download in 60 seconds</div>
<div class="step-b">Buy once, get instant access to 100+ illustrated PDF guides on any device. In your inbox before you close this tab.</div>
</div>
<div class="step rev">
<div class="step-num">2</div>
<div class="step-icon">📦</div>
<div class="step-t">Grab stuff from home</div>
<div class="step-b">Each guide lists exactly what you need. Cardboard, tape, a bottle — everything's already there. No shopping, ever.</div>
</div>
<div class="step rev">
<div class="step-num">3</div>
<div class="step-icon">🤖</div>
<div class="step-t">Watch their face light up</div>
<div class="step-b">A real, moving robot in 15 minutes. The look on their face when it actually works? You'll want to photograph it from eleven angles.</div>
</div>
</div>
</div>
</section>

<section id="inside">
<div class="wrap">
<div class="eyebrow">What's inside SparkBots™</div>
<h2 class="sh">100+ Builds That<br><em>Actually Get Finished.</em></h2>
<div class="inside-grid">
<div class="ic rev"><div class="ic-ico">🤖</div><div><div class="ic-t">Real moving robots & vehicles</div><div class="ic-b">Machines that roll, spin and actually work — no kits required</div></div></div>
<div class="ic rev"><div class="ic-ico">📋</div><div><div class="ic-t">Crystal-clear illustrated guides</div><div class="ic-b">Simple enough for a 4-year-old to follow independently</div></div></div>
<div class="ic rev"><div class="ic-ico">🎯</div><div><div class="ic-t">Three difficulty tiers</div><div class="ic-b">Easy (4+) · Medium (7+) · Challenging (9–12) — always the right stretch</div></div></div>
<div class="ic rev"><div class="ic-ico">🧠</div><div><div class="ic-t">Real STEM thinking built in</div><div class="ic-b">Engineering logic, spatial reasoning, problem-solving — through play</div></div></div>
<div class="ic rev"><div class="ic-ico">🔄</div><div><div class="ic-t">Future updates included free</div><div class="ic-b">New projects added regularly — yours forever at no extra cost</div></div></div>
<div class="ic rev"><div class="ic-ico">👨👩👧</div><div><div class="ic-t">Solo or side-by-side</div><div class="ic-b">Independent builds or a proper parent-child Saturday ritual — both work perfectly</div></div></div>
</div>

<div class="photo-grid">
<div class="ph">🔁 TU-IMG-1.jpg<br><small>Robot terminado 1</small></div>
<div class="ph">🔁 TU-IMG-2.jpg<br><small>Robot terminado 2</small></div>
<div class="ph">🔁 TU-IMG-3.jpg<br><small>Robot terminado 3</small></div>
<div class="ph">🔁 TU-IMG-4.jpg<br><small>Robot terminado 4</small></div>
</div>
</div>
</section>

<section id="compare">
<div class="wrap">
<div class="eyebrow">The honest comparison</div>
<h2 class="sh">SparkBots™ vs<br><em>Everything Else.</em></h2>
<div class="ctable rev">
<div class="cth">
<div></div>
<div class="cth-spark">⚡ SparkBots™</div>
<div>$80 STEM Kit</div>
<div>YouTube / Free</div>
</div>
<div class="ctr">
<div class="feat">Price</div>
<div class="yes spark-col">$27 once</div>
<div class="no">$60–120</div>
<div class="mid">Free*</div>
</div>
<div class="ctr">
<div class="feat">Extra materials to buy</div>
<div class="yes spark-col">✓ None</div>
<div class="no">✗ Always</div>
<div class="mid">Sometimes</div>
</div>
<div class="ctr">
<div class="feat">First result in 15 min</div>
<div class="yes spark-col">✓ Yes</div>
<div class="mid">Varies</div>
<div class="no">✗ Rarely</div>
</div>
<div class="ctr">
<div class="feat">100+ different projects</div>
<div class="yes spark-col">✓ Yes</div>
<div class="no">✗ 1–3 only</div>
<div class="mid">Unlimited (scattered)</div>
</div>
<div class="ctr">
<div class="feat">Kid follows alone (age 4+)</div>
<div class="yes spark-col">✓ Yes</div>
<div class="mid">7+, maybe</div>
<div class="no">✗ Needs help</div>
</div>
<div class="ctr">
<div class="feat">No screen needed to build</div>
<div class="yes spark-col">✓ Yes</div>
<div class="yes">✓ Yes</div>
<div class="no">✗ No</div>
</div>
<div class="ctr">
<div class="feat">7-day money-back guarantee</div>
<div class="yes spark-col">✓ Yes</div>
<div class="no">✗ No</div>
<div class="no">✗ N/A</div>
</div>
<div class="cfoot">
<div></div>
<div class="spark-foot">
<div class="spark-was-sm">Value: $82</div>
<div class="spark-price-sm">$27</div>
<a href="TU-CHECKOUT-URL" class="btn" style="font-size:14px;padding:12px 20px;margin-top:4px">Get SparkBots™ →</a>
</div>
<div style="flex-direction:column;gap:4px">$60–120<br>+ shipping</div>
<div style="flex-direction:column;gap:4px;font-size:12px">Hours of<br>searching</div>
</div>
</div>
</div>
</section>

<section id="bonuses" style="background:var(--sand)">
<div class="wrap">
<div class="eyebrow">Included today — automatically, free</div>
<h2 class="sh">3 Bonuses That Guarantee<br><em>A Win in Week One.</em></h2>
<div class="bonus-stack">
<div class="bitem rev">
<span class="btag">BONUS 1</span>
<div class="btext"><div class="btitle">⚡ First Robot in 15 Minutes — Quickstart Guide</div><div class="bdesc">A single illustrated page your child can follow the moment you download. No reading, no prep. Robot finished before you've made a coffee. Works for ages 4+.</div></div>
<div class="bval"><div class="bwas">$15</div><div class="bfree">FREE</div></div>
</div>
<div class="bitem rev">
<span class="btag">BONUS 2</span>
<div class="btext"><div class="btitle">📊 STEM Achievement Tracker</div><div class="bdesc">A printable chart kids fill in after every build. They get obsessed with completing rows. Siblings start competing. Screen time quietly disappears.</div></div>
<div class="bval"><div class="bwas">$12</div><div class="bfree">FREE</div></div>
</div>
<div class="bitem rev">
<span class="btag">BONUS 3</span>
<div class="btext"><div class="btitle">🎴 Family Build Night Challenge Cards</div><div class="bdesc">10 weekend challenge cards with team modes and rewards. Families who start Build Night don't stop. This is how Saturday mornings get permanently reclaimed.</div></div>
<div class="bval"><div class="bwas">$18</div><div class="bfree">FREE</div></div>
</div>
</div>
</div>
</section>

<section id="val">
<div class="wrap" style="text-align:center">
<div class="eyebrow">Everything in today's order</div>
<h2 class="sh">The Complete SparkBots™ Bundle</h2>
<div class="vbox">
<div class="vrow"><span>🤖 SparkBots™ — 100+ Robot Projects</span><span class="vpc">Value $37</span></div>
<div class="vrow"><span>🎁 Bonus 1 — First Robot in 15 Min Quickstart</span><span class="vpc">Value $15</span></div>
<div class="vrow"><span>🎁 Bonus 2 — STEM Achievement Tracker</span><span class="vpc">Value $12</span></div>
<div class="vrow"><span>🎁 Bonus 3 — Family Build Night Challenge Cards</span><span class="vpc">Value $18</span></div>
<div class="vtot"><span>Total real-world value</span><span class="vtot-p">$82</span></div>
<div class="vcta-box">
<div style="text-align:left">
<div class="vcta-lbl">You pay today — one time only</div>
<div class="vcta-price">$27</div>
<div class="vcta-save">🎉 You save $55 today</div>
</div>
<div>
<a href="TU-CHECKOUT-URL" class="vcta-btn">Get Everything Now →</a>
<div class="vcta-sub">✓ Instant access  ·  ✓ No subscription ever</div>
</div>
</div>
</div>
</div>
</section>

<section id="testi" style="background:var(--sand)">
<div class="wrap">
<div class="eyebrow">Real parents · Real builds · Real results</div>
<h2 class="sh">2,347+ Families Already<br><em>Made the Switch.</em></h2>

<div class="t-feat rev">
<div class="stars">★★★★★</div>
<p class="tq">"My 7-year-old built his first robot in 19 minutes and I have not seen him voluntarily pick up a tablet since. I've tried KiwiCo, Osmo, three other subscription boxes. Nothing did what SparkBots™ did on day one."</p>
<div class="tfa">
<div class="tfa-av">JM</div>
<div>
<div class="tfa-n">Jessica M. <span class="ver">✓ Verified Purchase</span></div>
<div class="tfa-l">Mom of 2 · Austin, Texas</div>
</div>
</div>
</div>

<div class="chat-grid">
<div class="chat-card rev">
<div class="chat-head">
<div class="chat-av" style="background:#A78BFA;color:#fff">SK</div>
<div><div class="chat-name">Sarah K.</div><div class="chat-loc">Mom of 3 · London, UK</div></div>
<div class="chat-dot"></div>
</div>
<div class="bub-in">Downloaded Friday. By Saturday my daughter had finished 6 projects and was designing her own 🤩</div>
<div class="bub-out">She told her teacher she's a robotics engineer. She's 7! 😂</div>
<div class="chat-stars">★★★★★</div>
</div>
<div class="chat-card rev">
<div class="chat-head">
<div class="chat-av" style="background:#34D399;color:#fff">MR</div>
<div><div class="chat-name">Michael R.</div><div class="chat-loc">Dad of 1 · Sydney, AU</div></div>
<div class="chat-dot"></div>
</div>
<div class="bub-in">We have Robot Morning every Saturday now. My son asks for it before breakfast 🙏</div>
<div class="bub-out">4 years of parenting, he's never once asked for an educational activity first thing on a weekend 😭</div>
<div class="chat-stars">★★★★★</div>
</div>
<div class="chat-card rev">
<div class="chat-head">
<div class="chat-av" style="background:#FB923C;color:#fff">RT</div>
<div><div class="chat-name">Rachel T.</div><div class="chat-loc">Mom of 4 · Toronto, CA</div></div>
<div class="chat-dot"></div>
</div>
<div class="bub-in">Screen time on weekends dropped from 4 hrs to practically zero 🙌</div>
<div class="bub-out">The tracker makes my two compete with each other to build more. I didn't even have to fight for it 😂</div>
<div class="chat-stars">★★★★★</div>
</div>
</div>
</div>
</section>

<section id="guarantee">
<div class="wrap">
<div class="g-box rev">
<div class="g-icon">🛡️</div>
<div class="g-title">7-Day "Worth Every Penny" Guarantee</div>
<p class="g-body">If your child doesn't beg to build a second project within 7 days of downloading, email us. We'll refund 100% of your $27 — no questions asked, no hoops to jump through. <strong>You are not taking a risk. We are.</strong></p>
<a href="TU-CHECKOUT-URL" class="btn">Get SparkBots™ Risk-Free →</a>
<div class="pay-row">
<span>🔒 256-bit Secure Checkout</span>
<span>💳 Visa · Mastercard · Amex · PayPal</span>
<span>📩 Instant Email Delivery</span>
</div>
</div>
</div>
</section>

<section id="faq" style="background:var(--sand)">
<div class="wrap">
<div class="eyebrow">Quick answers</div>
<h2 class="sh" style="text-align:center">Before You Buy.</h2>
<div class="fwrap">
<div class="fcard">
<button class="fbtn">What exactly do I get when I purchase? <span class="fi">+</span></button>
<div class="fans">Instant digital access to 100+ illustrated robot project guides in PDF format — organized by difficulty, downloadable to any device. Plus all 3 bonuses automatically included. Everything in your inbox within seconds of payment. No shipping, no waiting.</div>
</div>
<div class="fcard">
<button class="fbtn">Do I need to buy any special parts or materials? <span class="fi">+</span></button>
<div class="fans">Almost certainly not. Every project uses things most families already own: cardboard, plastic bottles, tape, rubber bands, bottle caps, scissors, markers. Each guide lists exactly what you need before step one — zero surprises, zero store runs.</div>
</div>
<div class="fcard">
<button class="fbtn">What ages is SparkBots™ built for? <span class="fi">+</span></button>
<div class="fans">Ages 4 to 12. Three tiers: Easy (4+) with some parental involvement, Medium (7+) for growing independence, and Challenging (9–12) for kids who want a real engineering problem. There's always a perfect project for exactly where your child is today.</div>
</div>
<div class="fcard">
<button class="fbtn">How does delivery work — when do I get access? <span class="fi">+</span></button>
<div class="fans">Your download link arrives in your inbox within seconds of payment — sometimes before you've closed the checkout page. Access on any device immediately. No login, no app, no expiration. Yours permanently.</div>
</div>
<div class="fcard">
<button class="fbtn">Is this really a one-time payment? No hidden charges? <span class="fi">+</span></button>
<div class="fans">One payment of $27. Forever. No subscription, no renewal, no upsells required to access the full library. All 3 bonuses and every future update included at no additional charge. This is the only time you'll ever pay.</div>
</div>
</div>
</div>
</section>

<section id="final">
<div class="wrap" style="position:relative;z-index:1">
<div class="feyebrow">⏰ Launch price disappears when the timer hits zero</div>
<h2 class="fh">Tonight is the night<br>they build their<br><em>first real robot.</em></h2>
<p class="fsub">100+ projects. 3 powerful bonuses. Zero extra purchases. One $27 decision that permanently changes how your child chooses to spend their time.</p>
<div class="fcount-box">
Launch price expires in: <span id="final-timer">--:--:--</span>
</div>
<br><br>
<a href="TU-CHECKOUT-URL" class="btn btn-lg">Join SparkBots™ for $27 →</a>
<div class="final-trust">
<span>Instant access</span>
<span>All 3 bonuses</span>
<span>One-time payment</span>
<span>7-day guarantee</span>
<span>No subscription ever</span>
</div>
<div style="display:flex;justify-content:center;margin-top:28px">
<div class="secure-pill">
<span style="font-size:20px">🔒</span>
100% secure checkout · Access in your inbox in seconds · Works on any phone, tablet or computer
</div>
</div>
</div>
</section>

<footer>
<div class="wrap">
<p style="margin-bottom:8px"><strong>SparkBots™</strong> — Instant Digital Download</p>
<p style="margin-bottom:12px">© 2025 SparkBots. All rights reserved.</p>
<p><a href="#">Privacy Policy</a> · <a href="#">Terms of Service</a> · <a href="#">Contact & Support</a></p>
<p style="margin-top:14px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.65">Individual results vary. Testimonials reflect genuine customer experiences. SparkBots™ is a digital product — nothing physical is shipped.</p>
</div>
</footer>

/* SCARCITY BAR ANIMATE */
setTimeout(function(){var f=document.getElementById('sc-fill');if(f)f.style.width='87%'},200);

/* FLOATING CTA */
var fcta=document.getElementById('fcta');
window.addEventListener('scroll',function(){fcta.classList.toggle('on',window.scrollY>480)},{passive:true});

/* FAQ */
document.querySelectorAll('.fbtn').forEach(function(btn){
btn.addEventListener('click',function(){
var card=btn.closest('.fcard'),open=card.classList.contains('open');
document.querySelectorAll('.fcard').forEach(function(c){c.classList.remove('open')});
if(!open)card.classList.add('open');
});
});

/* SCROLL REVEAL */
if('IntersectionObserver' in window){
var obs=new IntersectionObserver(function(entries){
entries.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');obs.unobserve(e.target)}});
},{threshold:.07,rootMargin:'0px 0px -30px 0px'});
document.querySelectorAll('.rev').forEach(function(el){obs.observe(el)});
}

/* VIDEO FALLBACK */
var vid=document.querySelector('.hero-video video');
if(vid){
vid.addEventListener('loadeddata',function(){var ph=document.getElementById('vid-ph');if(ph)ph.style.display='none'});
vid.addEventListener('error',function(){vid.style.display='none'});
}
})();
</script>
</body>
</html>