:root{--ink:#1B2B48;--ink2:#3D4C66;--muted:#55657E;--bg:#F6F9FC;--line:#E3EAF2;--accent:#C2472D;--sky:#EAF4FF;--blue:#DCEBFA;--green:#1D5E3C;--greenbg:#E4F2EA;--peach:#FCE3DA;--gold:#FFC56E}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Nunito Sans',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--ink)}a:hover{color:var(--accent)}
h1,h2,h3{margin:0;line-height:1.1}
h2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(28px,4vw,40px)}
h3{font-size:19px}
.wrap{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.section{padding-top:56px;padding-bottom:40px}
.center{text-align:center}
.muted{color:var(--muted)}
.eyebrow{margin:0 0 6px;font-weight:800;font-size:13px;letter-spacing:.08em;color:var(--accent)}
.sr,.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px;border-radius:8px}
svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 24px;border-radius:999px;font:inherit;font-weight:800;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(194,71,45,.28)}
.btn-accent:hover{color:#fff}
.btn-outline{background:#fff;border-color:var(--ink);color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{color:#fff}
.btn-block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;color:#1D4F91;font-weight:800;font-size:13px;letter-spacing:.06em}
.pill-gold{background:var(--gold);color:var(--ink)}
.dot{width:8px;height:8px;border-radius:50%;background:#1F9D55;animation:twinkle 1.6s ease-in-out infinite}

/* ticker */
.ticker{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;font-size:14px;font-weight:700}
.ticker-track{display:inline-flex;gap:48px;padding:10px 0;animation:marquee 28s linear infinite}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.header-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 5px #F2994A}
.brand b{display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:22px}
.brand small{color:var(--muted);font-size:13px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:20px;font-weight:700}
.nav a{text-decoration:none}
.bag-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:0;background:var(--ink);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.bag-count{min-width:22px;height:22px;border-radius:999px;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 6px}
.bag-count.bump{animation:pop .4s ease}
@media (max-width:720px){.nav a{display:none}.brand small{display:none}}

/* hero */
.hero{background:var(--sky);overflow:hidden}
.hero-grid{display:flex;flex-wrap:wrap;gap:32px;align-items:center;padding-top:48px;padding-bottom:56px}
.hero-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:20px;animation:fadeUp .8s ease both}
.hero h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(40px,5.4vw,66px);line-height:1.02}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin:0;font-size:18px;color:var(--ink2);max-width:500px}
.pay-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--ink2)}
.pay-row b{padding:6px 12px;border-radius:10px;background:#fff;color:var(--ink)}
.stage{flex:1 1 440px;min-width:0;position:relative;height:500px}
.stage-disc{position:absolute;left:50%;top:50%;width:400px;height:400px;margin:-200px 0 0 -200px;border-radius:50%;background:#CFE4FB}
.stage-ring{position:absolute;left:50%;top:50%;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;border:2px dashed #A9CBF2;animation:spin 40s linear infinite}
.bubble{position:absolute;bottom:0;border-radius:50%;border:2px solid #8EC5FF;background:#fff;animation:rise 7s ease-in infinite}
.b1{left:12%;width:22px;height:22px}.b2{left:30%;width:14px;height:14px;animation-duration:6s;animation-delay:1.5s}.b3{left:55%;width:26px;height:26px;animation-duration:8s;animation-delay:3s}.b4{left:74%;width:16px;height:16px;animation-duration:6.5s;animation-delay:2s}.b5{left:88%;width:12px;height:12px;animation-duration:5.5s;animation-delay:4s}
.star{position:absolute;width:24px;height:24px;stroke:none;fill:var(--gold);animation:twinkle 2.2s ease-in-out infinite}
.s1{top:40px;left:46%}.s2{top:120px;right:6%;width:18px;fill:#F7B7A3;animation-delay:.6s}.s3{bottom:90px;left:6%;width:20px;animation-delay:1.2s}
.buddy{position:absolute;left:50%;top:50%;width:250px;margin:-120px 0 0 -125px;animation:floaty 4.5s ease-in-out infinite}
.buddy svg{stroke:none}
.eyes{transform-origin:120px 98px;animation:blink 4s infinite}
.buddy-shadow{position:absolute;left:50%;top:50%;width:150px;height:18px;margin:112px 0 0 -75px;border-radius:50%;background:var(--ink);animation:shadowPulse 4.5s ease-in-out infinite}
.float-card{position:absolute;padding:8px;border-radius:22px;background:#fff;box-shadow:0 14px 30px rgba(27,43,72,.14);font-size:13px;font-weight:800}
.float-card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px}
.float-card b{display:block;padding:6px 4px 2px}
.fc1{top:10px;left:0;width:130px;animation:bob 5s ease-in-out infinite}
.fc2{top:30px;right:0;width:120px;animation:bobAlt 6s ease-in-out infinite}
.fc3{bottom:20px;left:4%;width:124px;animation:bobAlt 5.5s ease-in-out .8s infinite}
.off-badge{position:absolute;bottom:30px;right:4%;width:112px;height:112px;border-radius:50%;background:var(--accent);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(194,71,45,.35);animation:wiggle 3s ease-in-out infinite}
.off-badge b{font-family:'Fredoka',sans-serif;font-size:34px;line-height:1}
.off-badge small{font-size:12px;font-weight:800;letter-spacing:.06em}
@media (max-width:520px){.stage{height:420px}.stage-disc{width:300px;height:300px;margin:-150px 0 0 -150px}.stage-ring{width:340px;height:340px;margin:-170px 0 0 -170px}.buddy{transform:scale(.8)}.fc1{width:104px}.fc2{width:96px}.fc3{width:100px}.off-badge{width:92px;height:92px}.off-badge b{font-size:28px}}

/* trust */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;padding-top:22px;padding-bottom:22px}
.trust-grid>div{display:flex;align-items:center;gap:12px}
.trust p{margin:0;font-size:14px;color:var(--muted)}
.trust b{display:block;color:var(--ink);font-size:16px}
.ti{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none}
.ti svg{width:22px;height:22px}
.t-blue{background:var(--blue);color:#1D4F91}.t-green{background:var(--greenbg);color:var(--green)}.t-peach{background:var(--peach);color:#8F2F1A}.t-violet{background:#EFE6FA;color:#5B2E91}

/* shop */
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.search{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #CBD6E3;border-radius:999px;padding:0 18px;min-height:48px;flex:0 1 340px}
.search svg{width:18px;height:18px;color:var(--muted);flex:none}
.search input{border:0;outline:0;font:inherit;font-size:16px;width:100%;background:transparent;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chip{min-height:44px;padding:0 18px;border-radius:999px;font:inherit;font-weight:800;cursor:pointer;background:#fff;color:var(--ink);border:2px solid #CBD6E3}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.grid-sm{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.card-p{background:#fff;border:1px solid var(--line);border-radius:26px;padding:14px;display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s}
.card-p:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(27,43,72,.14)}
.thumb{position:relative;overflow:hidden;border-radius:20px;background:#F0F4F9}
.thumb img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform .4s}
.card-p:hover .thumb img{transform:scale(1.05)}
.tag{position:absolute;top:10px;left:10px;padding:6px 11px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:800}
.tag-best{left:auto;right:10px;background:var(--ink)}
.cat{align-self:flex-start;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:#F0F4F9;color:var(--ink2)}
.card-p h3{font-size:17px;line-height:1.35}
.card-p p{margin:0;font-size:14px;color:var(--muted)}
.buy{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto}
.price{font-family:'Fredoka',sans-serif;font-size:24px;font-weight:600}
.price s{font-family:'Nunito Sans',sans-serif;font-size:14px;color:var(--muted);margin-left:6px;font-weight:600}
.per{display:block;font-size:12px;font-weight:700;color:var(--green)}
.add{min-width:44px;min-height:44px;border-radius:14px;border:0;background:var(--ink);color:#fff;font:inherit;font-weight:800;padding:0 16px;cursor:pointer}
.add.added{background:#1F9D55}
.ask{background:#128C4A}
.empty{font-weight:700}

/* deal */
.deal{background:var(--ink);color:#fff;border-radius:36px;overflow:hidden;display:flex;flex-wrap:wrap;align-items:stretch}
.deal-copy{flex:1 1 380px;min-width:0;padding:44px;display:flex;flex-direction:column;gap:16px}
.deal-copy p{margin:0;color:#D3DCEA;font-size:17px}
.deal-art{flex:1 1 320px;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;padding:32px;background:#24375A}
.deal-art img{width:300px;border-radius:28px;animation:bob 5s ease-in-out infinite;box-shadow:0 24px 50px rgba(0,0,0,.35)}
.deal-badge{position:absolute;top:28px;right:28px;width:92px;height:92px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:wiggle 3s ease-in-out infinite}
.deal-badge b{font-family:'Fredoka',sans-serif;font-size:28px;line-height:1}
.deal-badge small{font-size:12px;font-weight:800}

/* how */
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:24px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:32px}
.step{background:var(--bg);border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:10px;transition:transform .25s}
.step:hover{transform:translateY(-6px)}
.step p{margin:0;color:var(--ink2)}
.num{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-size:26px;font-weight:700}
.n1{background:var(--blue);color:#1D4F91}.n2{background:var(--greenbg);color:var(--green)}.n3{background:var(--peach);color:#8F2F1A}

/* visit */
.visit{display:flex;flex-wrap:wrap;gap:24px}
.card{flex:1 1 420px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:14px}
.card p{margin:0}
.card-blue{flex:1 1 320px;background:var(--blue);border:0;color:#12335E}

/* footer */
.footer{background:var(--ink);color:#D3DCEA;margin-top:24px}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:28px;padding-bottom:28px;font-size:14px}
.brand-light b{color:#fff;font-size:20px}
.brand-light img{box-shadow:none}

/* whatsapp float */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:30;width:60px;height:60px;border-radius:50%;background:#128C4A;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(18,140,74,.4);animation:bob 3s ease-in-out infinite}
.wa-float svg{width:28px;height:28px}
.wa-float:hover{color:#fff}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(15,23,40,.45);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;z-index:50;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:26px}
.icon-btn{width:44px;height:44px;border-radius:12px;border:0;background:#F0F4F9;font-size:26px;cursor:pointer;color:var(--ink)}
.drawer-body{overflow-y:auto;padding:18px 20px 32px;display:flex;flex-direction:column;gap:16px}
.line{display:flex;align-items:center;gap:12px}
.line img{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none}
.line-info{flex:1;min-width:0}
.line-info b{display:block;font-size:15px}
.line-info span{font-size:13px;color:var(--muted)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:34px;height:34px;border-radius:10px;border:1.5px solid #CBD6E3;background:#fff;font:inherit;font-weight:800;cursor:pointer}
.qty output{min-width:20px;text-align:center;font-weight:800}
.totals{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.totals>div{display:flex;justify-content:space-between}
.totals s{color:var(--muted)}
.save{color:var(--green);font-weight:800}
.green{color:var(--green)}
.grand{font-size:20px;font-weight:800;padding-top:6px}
.grand b{font-family:'Fredoka',sans-serif}
.checkout{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.checkout label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:800}
.checkout input,.checkout textarea{min-height:48px;border-radius:14px;border:1.5px solid #CBD6E3;padding:10px 14px;font:inherit;font-size:16px;color:var(--ink)}
.checkout input:focus,.checkout textarea:focus,.search:focus-within{outline:3px solid #8EC5FF;outline-offset:1px}
.form-error{margin:0;padding:10px 14px;border-radius:12px;background:var(--peach);color:#8F2F1A;font-weight:700;font-size:14px}
.fine{margin:0;font-size:13px;color:var(--muted)}
.empty-bag{color:var(--muted)}

/* motion */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes bobAlt{0%,100%{transform:translateY(-8px) rotate(4deg)}50%{transform:translateY(6px) rotate(-2deg)}}
@keyframes rise{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:.85}100%{transform:translateY(-440px) scale(1.15);opacity:0}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shadowPulse{0%,100%{transform:scaleX(1);opacity:.22}50%{transform:scaleX(.78);opacity:.12}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}html{scroll-behavior:auto}}

/* size picker + illustrated tiles */
.sizes{display:flex;flex-wrap:wrap;gap:6px}
.size{min-height:36px;min-width:44px;padding:0 10px;border-radius:10px;border:1.5px solid #CBD6E3;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.size[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tile{width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center}
.tile svg{width:44%;height:auto;stroke-width:1.4}
.tile b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:18px;line-height:1.2}
.tile-blue{background:#DCEBFA;color:#1D4F91}.tile-green{background:#E4F2EA;color:#1D5E3C}.tile-peach{background:#FCE3DA;color:#8F2F1A}.tile-pink{background:#FBE3EE;color:#8A1F52}.tile-violet{background:#EFE6FA;color:#5B2E91}
.tile-sm{width:64px;height:64px;padding:6px;border-radius:14px;flex:none;gap:0}
.tile-sm b{display:none}.tile-sm svg{width:70%}