/* mobile first: base = phone, then 600px (tablet) and 1000px (desktop) */
:root{
  --ink:#1B1A47; --yellow:#FFD447; --red:#F24B2A; --mint:#8FF5E2; --pink:#F7A6CF;
  --lilac:#E7D4FF; --orange:#F98B4B; --cream:#FFF4E4; --green:#0E7A4A; --link-hover:#D8321A;
  --gutter:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:12px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Rubik',system-ui,sans-serif;color:var(--ink);background:var(--cream);overflow-x:hidden}
a{color:var(--ink)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:4px solid var(--yellow);outline-offset:3px;box-shadow:0 0 0 7px var(--ink)}
.skip{position:absolute;top:-80px;right:12px;z-index:10;background:#fff;padding:10px 16px;border:3px solid var(--ink);border-radius:12px;font-weight:800}
.skip:focus{top:12px}
.wrap{max-width:1240px;margin:0 auto}
.col{display:flex;flex-direction:column;align-items:center;gap:28px}
.head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.head p{margin:0;font-weight:800;font-size:18px;line-height:1.35;max-width:520px}
.sticker{margin:0;display:inline-block;transform:rotate(var(--r,0));border:4px solid var(--ink);border-radius:18px;padding:8px 20px;font-weight:900;font-size:clamp(34px,10vw,80px);line-height:1;box-shadow:6px 6px 0 var(--ink)}
.sticker--white{background:#fff}.sticker--pink{background:var(--pink)}.sticker--yellow{background:var(--yellow)}.sticker--mint{background:var(--mint)}.sticker--lilac{background:var(--lilac)}
.pill{display:block;text-decoration:none;font-weight:800;font-size:19px;padding:15px 24px;border-radius:999px;text-align:center;min-height:52px}
.pill--white{background:#fff;color:var(--link-hover);border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.pill--white:hover{color:var(--ink)}

/* ---------- HERO ---------- */
.hero{position:relative;height:max(640px,100svh);max-height:900px;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle,rgba(27,26,71,.13) 2.5px,transparent 3px) 0 0/28px 28px,var(--yellow);
  animation:quake 1.9s linear both}
.hero__tab{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;background:#fff;border:4px solid var(--ink);border-top:0;border-radius:0 0 26px 26px;padding:4px 14px 9px;white-space:nowrap}
.hero__tab span{font-weight:900;font-size:22px;line-height:1;color:#C42D14;letter-spacing:-.5px}
.hero__tab b{display:inline-block;background:var(--pink);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:0 .3em;font-size:.85em;vertical-align:.05em}
.logo{position:absolute;top:74px;right:var(--gutter);z-index:2;display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.logo svg{width:34px;height:34px}
.logo span{font-weight:900;font-size:18px;line-height:1;text-shadow:2px 2px 0 #fff}
.topbar{position:absolute;top:66px;left:var(--gutter);z-index:3;display:flex;gap:8px}
.round{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.round--menu{background:#fff;border:4px solid var(--ink)}
.menu{position:absolute;top:124px;left:var(--gutter);right:var(--gutter);z-index:4;background:#fff;border:4px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:8px;display:flex;flex-direction:column}
.menu[hidden]{display:none}
.menu a{text-decoration:none;font-weight:800;font-size:19px;padding:13px 14px;border-radius:12px}
.menu a:hover{background:var(--mint);color:var(--ink)}

.hero__title{position:absolute;z-index:1;top:128px;left:0;right:0;margin:0;text-align:center;pointer-events:none}
.hero__title span{display:inline-block;font-weight:900;font-size:clamp(84px,27vw,250px);line-height:.95;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;
  text-shadow:3px 3px 0 #FFB3A6,6px 6px 0 #FF856E,9px 9px 0 #F24B2A,11px 12px 0 var(--ink)}

/* crash-landing cart */
.stage{position:absolute;left:0;right:0;bottom:250px;height:34vh;z-index:1;pointer-events:none}
.cart-hover{position:absolute;left:50%;bottom:6%;width:min(62vw,300px);margin-left:calc(min(62vw,300px) / -2);
  animation:hover 3.2s ease-in-out 1.9s infinite alternate}
.cart{display:block;width:100%;height:auto;transform-origin:50% 92%;animation:crash 1.9s cubic-bezier(.2,.7,.3,1) both;filter:drop-shadow(6px 8px 0 rgba(27,26,71,.45))}
.stage__shadow{position:absolute;left:50%;bottom:2%;width:min(54vw,260px);height:26px;margin-left:calc(min(54vw,260px) / -2);border-radius:50%;background:rgba(27,26,71,.35);animation:shadow-in 1.9s ease-out both,shadow-bob 3.2s ease-in-out 1.9s infinite alternate}
.stage__burst{position:absolute;left:50%;bottom:0;width:min(80vw,600px);aspect-ratio:1;margin-left:calc(min(80vw,600px) / -2);background:#fff;opacity:0;
  clip-path:polygon(50% 0,58% 22%,80% 8%,74% 32%,98% 30%,80% 48%,100% 62%,76% 64%,86% 88%,62% 76%,50% 100%,40% 78%,16% 92%,24% 66%,0 60%,22% 46%,4% 28%,30% 30%,24% 8%,42% 22%);animation:burst 1.9s ease-out both}
.tagfly{position:absolute;bottom:0;left:50%;background:#fff;border:3px solid var(--ink);border-radius:10px;padding:3px 10px;font-weight:900;font-size:18px;color:var(--red);opacity:0;animation:fly 1.5s ease-out both;animation-delay:.72s;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.tagfly--1,.tagfly--4{display:none}
.tagfly--2{margin-left:-38vw;--x:-3vw;--rot:8deg;animation-delay:.8s;bottom:6%}
.tagfly--3{margin-left:16vw;--x:3vw;--rot:-6deg;animation-delay:.8s;bottom:6%}
.tagfly--1{margin-left:-30vw;--x:-6vw;--rot:-14deg}
.tagfly--4{margin-left:22vw;--x:6vw;--rot:12deg}

@keyframes crash{
  0%{transform:translateY(-120vh);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  38%{transform:translateY(0) scale(1.16,.8)}
  50%{transform:translateY(-16%) scale(.95,1.06);animation-timing-function:ease-in}
  62%{transform:translateY(0) scale(1.07,.93)}
  76%{transform:translateY(-6%) scale(.99,1.01);animation-timing-function:ease-in}
  88%{transform:translateY(0) scale(1.02,.98)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes hover{from{transform:translateY(0)}to{transform:translateY(-7%)}}
@keyframes shadow-in{0%,36%{opacity:0;transform:scaleX(.3)}44%{opacity:1;transform:scaleX(1.15)}100%{opacity:1;transform:scaleX(1)}}
@keyframes shadow-bob{from{transform:scaleX(1);opacity:1}to{transform:scaleX(.82);opacity:.7}}
@keyframes burst{0%,36%{opacity:0;transform:scale(.2)}42%{opacity:1;transform:scale(.9)}70%,100%{opacity:0;transform:scale(1.35)}}
@keyframes fly{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)}20%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),-180%) rotate(var(--rot)) scale(1.1)}}
@keyframes quake{0%,36%{background-position:0 0}40%{background-position:-10px 8px}44%{background-position:9px -7px}48%{background-position:-6px 5px}54%{background-position:4px -3px}70%,100%{background-position:0 0}}

.hero__bottom{position:absolute;z-index:2;bottom:18px;left:var(--gutter);right:var(--gutter);display:flex;flex-direction:column;align-items:stretch;gap:14px}
.hero__slogan{margin:0;font-weight:900;font-size:clamp(30px,9vw,58px);line-height:1;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink)}
.hero__cta{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.status{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:8px 14px;font-weight:800;font-size:15px;box-shadow:3px 3px 0 var(--ink);text-align:center}
.status i{flex:none;width:12px;height:12px;border-radius:50%;background:#1FB76A;border:2px solid var(--ink);animation:blink 1.2s steps(2) infinite}
.status.ended i{background:#bbb;animation:none}
@keyframes blink{50%{opacity:.25}}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--ink);overflow:hidden;white-space:nowrap;padding:12px 0}
.marquee__track{display:inline-flex;gap:28px;font-weight:900;font-size:19px;color:var(--yellow);animation:marq 30s linear infinite}
.marquee i{font-style:normal}.c-pink{color:var(--pink)}.c-mint{color:var(--mint)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ---------- DEAL SECTIONS ---------- */
.deals{position:relative;padding:56px var(--gutter) 64px;overflow:hidden;border-top:5px solid var(--ink)}
.deals--orange{background:var(--orange)}
.deals--mint{background:var(--mint)}
.deals--pink{background:var(--pink)}
.deals--lilac{background:var(--lilac)}
.deals--yellow{background:var(--yellow)}
.deals .wrap{position:relative}
.grid{width:100%;display:grid;grid-template-columns:1fr;gap:22px}

.deal{position:relative;display:flex;flex-direction:column;background:var(--cream);border:4px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);transform:rotate(var(--r,0));overflow:hidden;color:var(--ink);transition:transform .2s}
.deal:hover{transform:rotate(0)}
.deal__stub{flex:0 0 auto;background:var(--stub,var(--yellow));border-bottom:4px dashed var(--ink);display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:8px;padding:10px 14px;text-align:center}
.deal__up{font-weight:800;font-size:14px}
.deal__pct{font-weight:900;font-size:32px;line-height:1;letter-spacing:-1px}
.deal__pct small{font-size:.5em}
.deal__off{font-weight:800;font-size:15px}
.deal__body{flex:1 1 auto;min-width:0;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.deal__store{margin:0;font-weight:900;font-size:21px;line-height:1.2}
.deal__tags{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;background:#fff;border:2px solid var(--ink);font-weight:800;font-size:13px;padding:2px 10px;border-radius:999px}
.chip--hot{background:var(--red);color:#fff}
.items{display:flex;flex-direction:column;gap:10px}
.item{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:8px;text-decoration:none;color:var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.item:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.item:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.item__img{flex:none;width:76px;height:76px;object-fit:contain;background:#fff;border-radius:10px;border:2px solid rgba(27,26,71,.12)}
.item__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.item__name{font-weight:700;font-size:15px;line-height:1.25}
.item__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.item__price b{font-weight:900;font-size:19px;white-space:nowrap;color:var(--link-hover)}
.item__price s{color:#7a7690;font-size:13px;font-weight:500;white-space:nowrap}
.item__from{font-size:13px;font-weight:700}
.item__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.v{display:inline-block;font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;border:2px solid var(--ink);white-space:nowrap}
.v--good{background:#C9F7D9}
.v--market{background:#FFF0B3}
.v--cheaper{background:#FFD0C7}
.v--none{background:#EEECF4}
.item__eilat{font-size:12px;font-weight:700;color:#4a4870;white-space:nowrap}
button.item{font:inherit;width:100%;text-align:start;cursor:pointer}
.item__hint{font-size:12.5px;font-weight:800;color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}
.item__arrow--toggle{transition:transform .2s}
.item--expand[aria-expanded="true"]{background:var(--yellow)}
.item--expand[aria-expanded="true"] .item__arrow--toggle{transform:rotate(180deg);background:#fff}
.item--expand[aria-expanded="true"] .item__hint{visibility:hidden}
.item-wrap{display:flex;flex-direction:column;gap:8px}

/* comparison panel */
.cmp{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;animation:cmp-in .2s ease-out}
.cmp[hidden]{display:none}
@keyframes cmp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cmp__title{margin:0;font-weight:900;font-size:16px}
.cmp__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.cmp__link{display:grid;grid-template-columns:1fr auto;grid-template-areas:"store price" "tags go";align-items:center;gap:2px 10px;padding:8px 10px;border:2px solid rgba(27,26,71,.18);border-radius:10px;text-decoration:none;color:var(--ink)}
.cmp__link:hover{border-color:var(--ink);background:var(--cream);color:var(--ink)}
.cmp__row--self .cmp__link{border:2px solid var(--ink);background:var(--yellow)}
.cmp__row--eilat .cmp__link{border-style:dashed}
.cmp__store{grid-area:store;font-weight:800;font-size:14.5px}
.cmp__tags{grid-area:tags;display:flex;flex-wrap:wrap;gap:4px;min-height:4px}
.cmp__tag{font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--lilac);border:1.5px solid var(--ink)}
.cmp__tag--eilat{background:var(--mint)}
.cmp__price{grid-area:price;font-weight:900;font-size:16px;white-space:nowrap;text-align:end}
.cmp__price small{font-size:11.5px;font-weight:600;color:#4a4870}
.cmp__go{grid-area:go;font-size:12.5px;font-weight:800;color:var(--link-hover);white-space:nowrap;text-align:end}
.cmp__all{align-self:flex-start;font-weight:800;font-size:14px;color:var(--ink)}
.deal.is-open{transform:none}
.item__cmp{font-size:12.5px;font-weight:500;line-height:1.35;color:#4a4870}

/* ---------- LEGEND ---------- */
.legend{background:var(--cream);padding:28px var(--gutter);border-top:5px solid var(--ink)}
.legend__box{max-width:860px;margin:0 auto;background:#fff;border:4px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.legend__title{margin:0;font-weight:900;font-size:20px}
.legend__list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:8px;font-size:15px;font-weight:600}
.legend__list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.legend__note{margin:0;font-size:14px;font-weight:600;color:#4a4870;line-height:1.5}
@media (min-width:600px){.legend__list{grid-template-columns:1fr 1fr}}
.item__arrow{flex:none;width:30px;height:30px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px}
.item:hover .item__arrow{background:var(--mint)}
.deal__note{margin:0;font-size:14px;font-weight:600;color:#4a4870}
.deal__go{margin-top:auto;align-self:stretch;text-align:center;text-decoration:none;background:var(--ink);color:#fff;font-weight:800;font-size:16px;padding:12px 20px;border-radius:999px}
.deal__go:hover{background:var(--link-hover);color:#fff}

/* ---------- LATER ---------- */
.later{background:var(--cream);padding:56px var(--gutter) 64px;border-top:5px solid var(--ink)}
.cal{width:100%;display:grid;grid-template-columns:1fr;gap:22px}
.day{background:#fff;border:4px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--red);transform:rotate(var(--r,0));overflow:hidden}
.day__top{background:var(--ink);color:var(--yellow);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:900}
.day__date{font-size:28px;line-height:1}
.day__name{font-size:17px;color:#fff}
.day__body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:16px}
.day__body p{margin:0}
.tip{background:var(--yellow);border:3px solid var(--ink);border-radius:14px;padding:10px 12px;font-weight:800;transform:rotate(-1deg)}

/* ---------- DISCLAIMER ---------- */
.warn{background:var(--cream);padding:0 var(--gutter) 56px}
.warn__box{max-width:760px;margin:0 auto;background:var(--green);border:4px solid var(--ink);border-radius:16px;padding:6px;box-shadow:6px 6px 0 var(--ink)}
.warn__in{border:3px solid #fff;border-radius:10px;padding:14px 16px;color:#fff;font-weight:700;font-size:16px;line-height:1.5}
.warn__in strong{display:block;font-weight:900;font-size:20px;margin-bottom:4px}

/* ---------- FOOTER ---------- */
.foot{background:var(--red);color:#fff;padding:0 var(--gutter) 22px;overflow:hidden}
.foot svg{display:block;width:calc(100% + 2 * var(--gutter));height:60px;margin:0 calc(-1 * var(--gutter))}
.foot__row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:10px}
.foot__line{font-weight:900;font-size:24px;text-shadow:2px 2px 0 var(--ink)}
.foot__copy{font-weight:700;font-size:14px;background:var(--ink);padding:8px 14px;border-radius:16px;line-height:1.8}
.foot__copy a{color:#fff}.foot__copy a:hover{color:var(--yellow)}

/* ---------- TABLET ---------- */
@media (min-width:600px){
  :root{--gutter:24px}
  .col{gap:36px}
  .head p{font-size:21px}
  .sticker{border-width:5px;border-radius:22px;padding:10px 30px;box-shadow:9px 9px 0 var(--ink)}
  .hero__tab{border-radius:0 0 38px 38px;padding:6px 28px 12px}
  .hero__tab span{font-size:clamp(28px,4.4vw,52px)}
  .logo{top:28px}
  .logo svg{width:44px;height:44px}
  .logo span{font-size:26px}
  .topbar{top:24px}
  .round{width:56px;height:56px}
  .menu{top:94px;right:auto;min-width:240px}
  .hero__title{top:110px}
  .hero__title span{-webkit-text-stroke:6px var(--ink);text-shadow:4px 4px 0 #FFB3A6,8px 8px 0 #FF9C8A,12px 12px 0 #FF856E,16px 16px 0 #FA6E53,20px 20px 0 #F24B2A,23px 25px 0 var(--ink)}
  .stage{bottom:170px;height:min(48vh,460px)}
  .cart-hover{width:clamp(260px,34vw,420px);margin-left:calc(clamp(260px,34vw,420px) / -2)}
  .stage__shadow{width:clamp(220px,30vw,370px);height:40px;margin-left:calc(clamp(220px,30vw,370px) / -2)}
  .tagfly{font-size:clamp(20px,2.4vw,28px);border-width:4px;padding:4px 12px}
  .tagfly--1,.tagfly--4{display:block}
  .tagfly--2{margin-left:-19vw}
  .tagfly--3{margin-left:12vw}
  .hero__bottom{bottom:26px;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:center}
  .hero__cta{min-width:320px}
  .status{font-size:16px;border-width:4px;box-shadow:4px 4px 0 var(--ink)}
  .marquee__track{font-size:23px;gap:36px}
  .deals,.later{padding-block:80px 90px}
  .grid,.cal{grid-template-columns:repeat(2,1fr);gap:26px}
  .grid{grid-auto-flow:row dense}
  .deal.is-open{grid-column:1 / -1}
  .cmp__link{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto;grid-template-areas:"store tags price go";gap:10px}
  .deal{box-shadow:7px 7px 0 var(--ink)}
  .warn{padding-bottom:72px}
  .foot svg{height:80px}
  .foot__row{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
}

/* ---------- DESKTOP ---------- */
@media (min-width:1000px){
  .col{gap:44px}
  .sticker{box-shadow:10px 10px 0 var(--ink)}
  .hero{height:860px;max-height:none}
  .hero__bottom{left:32px;right:32px;bottom:30px}
  .pill{font-size:20px;padding:18px 44px}
  .deals,.later{padding-block:96px 104px}
  .grid,.cal{grid-template-columns:repeat(3,1fr);gap:30px}
  .deal__pct{font-size:36px}
  .foot__line{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .stage__burst,.tagfly{display:none!important}
}
