/* Kidzvite homepage - same "sticker book" look as the order page */
:root{
  --paper:#F2EEFF; --card:#FFFFFF; --ink:#2A1F45; --ink-soft:#4E4566;
  --pink:#D9266A; --sun:#FFC53D; --mint:#1FBF9F; --sky:#4D8DFF; --lilac:#B9A7FF;
  --line:2px solid var(--ink); --pop:4px 4px 0 var(--ink); --pop-sm:3px 3px 0 var(--ink);
  --r-lg:22px; --r-md:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 Heebo,system-ui,sans-serif;
  background-image:radial-gradient(var(--ink) .8px,transparent .9px);background-size:22px 22px;background-attachment:fixed;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background:var(--paper);opacity:.93;z-index:-1}
h1,h2,h3{font-family:"Playpen Sans Hebrew",Heebo,sans-serif;font-weight:800;margin:0;line-height:1.15}
a{color:#1D4ED8}
:focus-visible{outline:3px solid #1D4ED8;outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:16px 16px 40px}
img,video{max-width:100%;display:block}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Playpen Sans Hebrew";font-weight:800;font-size:22px;color:var(--ink);text-decoration:none}
.brand i{width:40px;height:40px;border:var(--line);border-radius:12px;background:var(--sun);display:grid;place-items:center;font-style:normal;box-shadow:var(--pop-sm);transform:rotate(-6deg)}
.top .right{display:flex;gap:10px;align-items:center}
.lang{border:var(--line);border-radius:999px;padding:4px 12px;background:#fff;color:var(--ink);font-weight:700;font-size:14px;text-decoration:none;box-shadow:var(--pop-sm)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;border:var(--line);border-radius:999px;background:var(--pink);color:#fff;
  font:700 18px Heebo,sans-serif;text-decoration:none;padding:14px 26px;box-shadow:var(--pop);transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.big{font-size:21px;padding:16px 32px;min-height:60px}
.btn.small{font-size:15px;padding:8px 16px;box-shadow:var(--pop-sm)}
@media(max-width:420px){.btn.small{display:none}}

/* hero */
.hero{display:grid;gap:28px;align-items:center;padding:18px 0 10px}
@media(min-width:900px){.hero{grid-template-columns:1.05fr .95fr;gap:40px;padding:36px 0 20px}}
.badge{display:inline-block;border:var(--line);border-radius:999px;background:#fff;padding:4px 14px;font-weight:700;font-size:14px;box-shadow:var(--pop-sm);transform:rotate(-2deg)}
.hero h1{font-size:clamp(36px,8.5vw,60px);margin:16px 0 0;letter-spacing:-.5px}
.mark{background:var(--sun);border:var(--line);border-radius:16px;padding:0 12px;display:inline-block;transform:rotate(-3deg);box-shadow:var(--pop-sm);margin-top:6px}
.lead{font-size:clamp(17px,2.3vw,20px);color:var(--ink-soft);max-width:34em;margin:18px 0 0}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:24px}
.price{font-weight:700;background:var(--mint);border:var(--line);border-radius:999px;padding:5px 14px;font-size:15px}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--ink-soft);font-size:15px}
.ticks li::before{content:"✓";color:var(--mint);font-weight:700;margin-inline-end:6px;-webkit-text-stroke:.5px var(--ink)}

.hero-media{position:relative;aspect-ratio:1/1.08;max-width:520px;margin-inline:auto;width:100%}
.phone{position:absolute;margin:0;width:52%;aspect-ratio:9/16;border:3px solid var(--ink);border-radius:26px;overflow:hidden;background:#000;box-shadow:8px 8px 0 var(--ink)}
.phone video{width:100%;height:100%;object-fit:cover}
.p1{inset-inline-start:0;top:2%;transform:rotate(-4deg);z-index:2}
.p2{inset-inline-end:1%;top:9%;transform:rotate(4deg)}
.sticker{position:absolute;font-size:46px;filter:drop-shadow(3px 3px 0 rgba(42,31,69,.35));animation:bob 3.5s ease-in-out infinite;z-index:3}
.s1{top:-2%;inset-inline-end:8%}.s2{bottom:6%;inset-inline-start:0;animation-delay:-1.2s}.s3{bottom:-1%;inset-inline-end:30%;animation-delay:-2.2s}
@keyframes bob{50%{transform:translateY(-10px) rotate(6deg)}}

/* sections */
.block{margin-top:64px}
.block h2{font-size:clamp(30px,5.5vw,42px);text-align:center}
.sub{text-align:center;color:var(--ink-soft);max-width:40em;margin:10px auto 0}
.fine{text-align:center;color:var(--ink-soft);font-size:14px;margin:14px 0 0}

.steps{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:18px;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{position:relative;background:var(--card);border:var(--line);border-radius:var(--r-lg);box-shadow:var(--pop);padding:22px 20px 18px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;top:-16px;inset-inline-start:18px;width:34px;height:34px;border:var(--line);border-radius:50%;
  background:var(--sun);display:grid;place-items:center;font:700 17px Heebo;box-shadow:var(--pop-sm)}
.steps i,.why i{font-style:normal;font-size:40px;display:block;line-height:1;margin-bottom:10px}
.steps h3,.why h3{font-size:22px;margin-bottom:6px}
.steps p,.why p{margin:0;color:var(--ink-soft)}

.examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:620px;margin:26px auto 0}
.ex{margin:0}
.ex video{width:100%;aspect-ratio:9/16;object-fit:cover;border:3px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);background:#000}
.ex:nth-child(1) video{transform:rotate(-1.5deg)}.ex:nth-child(2) video{transform:rotate(1.5deg)}
.ex figcaption{text-align:center;font-weight:700;margin-top:12px;font-size:15px}

.styles{display:grid;grid-auto-flow:column;grid-auto-columns:42%;gap:14px;overflow-x:auto;padding:22px 4px 14px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;min-width:0}
@media(min-width:760px){.styles{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}}
.styles figure{margin:0;scroll-snap-align:start}
.styles img{width:100%;aspect-ratio:9/16;object-fit:cover;border:var(--line);border-radius:var(--r-md);box-shadow:var(--pop-sm);background:var(--lilac)}
.styles figure:nth-child(odd) img{transform:rotate(-1deg)}.styles figure:nth-child(even) img{transform:rotate(1deg)}
.styles figcaption{text-align:center;font-weight:500;font-size:14px;margin-top:8px}

.chips{list-style:none;padding:0;margin:24px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px}
.chips li{background:#fff;border:var(--line);border-radius:999px;padding:8px 16px;font-weight:500;box-shadow:var(--pop-sm)}
.chips li:nth-child(3n){transform:rotate(-2deg)}.chips li:nth-child(4n){transform:rotate(2deg)}
.chips .any{background:var(--sun);font-weight:700}

.why{display:grid;gap:18px;margin-top:26px}
@media(min-width:760px){.why{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.why{grid-template-columns:repeat(4,1fr)}}
.why>div{background:var(--card);border:var(--line);border-radius:var(--r-lg);box-shadow:var(--pop);padding:22px 20px}

.faq{max-width:760px;margin:24px auto 0;display:grid;gap:12px}
.faq details{background:#fff;border:var(--line);border-radius:var(--r-md);box-shadow:var(--pop-sm);padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 24px/1 Heebo;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 16px;color:var(--ink-soft)}

.final{margin:72px auto 0;max-width:820px;text-align:center;background:linear-gradient(135deg,#FFD36B,#FF9CC2 55%,#B9A7FF);border:var(--line);
  border-radius:28px;box-shadow:8px 8px 0 var(--ink);padding:36px 20px;display:flex;flex-direction:column;align-items:center;gap:18px}
.final h2{font-size:clamp(28px,5vw,40px)}

.foot{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:48px;font-size:14px}
.foot a{color:var(--ink)}
.foot .copy{width:100%;text-align:center;color:var(--ink-soft)}