/* תנו לכיס לדבר — עמוד בית דמו (גרסה עצמאית) */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body { overflow-x:clip; }
body {
  font-family:'Heebo','Segoe UI',Arial,sans-serif;
  background:#FBF6EE; color:#2B2118; line-height:1.5;
}
.wrap { max-width:480px; margin:0 auto; }

/* ── top bar ── */
header.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:#fff;
  border-bottom:1px solid #F0E6D6;
  position:sticky; top:0; z-index:10;
}
.brand { display:flex; align-items:center; gap:9px; }
.brand .coin {
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE08A, #F2B234 60%, #D9931A);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:17px; color:#7A5205;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.15);
}
.brand h1 { font-size:17px; font-weight:900; letter-spacing:-.2px; }
.topbar .tag {
  font-size:11px; font-weight:700; color:#B35416;
  background:#FDEBDD; padding:4px 10px; border-radius:999px;
}

/* ── hero ── */
.hero {
  background:linear-gradient(160deg,#FF8A3C 0%,#E8641C 55%,#D14E0B 100%);
  padding:26px 20px 0; position:relative; overflow:hidden;
}
.hero .kicker {
  display:inline-block; background:rgba(255,255,255,.18);
  color:#fff; font-size:12px; font-weight:700;
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.hero h2 {
  color:#fff; font-size:27px; font-weight:900; line-height:1.25;
  letter-spacing:-.3px;
}
.hero p.sub { color:#FFE3CC; font-size:14px; margin-top:8px; max-width:250px; }
.hero .ctas { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.hero .cta {
  font-size:13.5px; font-weight:800; text-decoration:none;
  padding:11px 16px; border-radius:12px; display:inline-flex; align-items:center; gap:7px;
}
.cta.wa { background:#1FAD53; color:#fff; }
.cta.tg { background:#fff; color:#1D3557; }
.hero-stage {
  display:flex; align-items:center; justify-content:center;
  gap:18px; margin-top:20px; padding-bottom:6px;
}
.mascot-box { width:160px; flex:0 0 160px; }
.mascot-box img { width:100%; display:block; filter:drop-shadow(0 8px 14px rgba(0,0,0,.25)); }
.bubble {
  position:relative; width:132px; flex:0 0 132px;
  background:#FFD93B; border-radius:26px;
  padding:16px 14px; font-size:14px; font-weight:800; line-height:1.4;
  text-align:center; color:#2B2118;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.bubble::before {
  content:''; position:absolute; top:-13px; right:18px;
  width:38px; height:38px; background:#FFD93B; border-radius:50%;
}
.bubble::after {
  content:''; position:absolute; top:-21px; right:46px;
  width:26px; height:26px; background:#FFD93B; border-radius:50%;
}
.bubble span { position:relative; z-index:1; }

/* ── notice ── */
.notice {
  margin:14px 18px 0; background:#FFF6DB; border:1px dashed #E3B63C;
  color:#7A5A05; font-size:12px; font-weight:700;
  padding:9px 14px; border-radius:12px; text-align:center;
}

/* ── categories ── */
.chips { display:flex; gap:8px; padding:16px 18px 4px; overflow-x:auto; }
.chip {
  white-space:nowrap; font-size:13px; font-weight:700;
  padding:8px 16px; border-radius:999px; border:1.5px solid #EADBC4;
  background:#fff; color:#5C4A36; cursor:pointer; user-select:none;
}
.chip.on { background:#2B2118; color:#fff; border-color:#2B2118; }

/* ── products ── */
.sec-title { padding:14px 20px 4px; font-size:19px; font-weight:900; }
.sec-note { padding:0 20px; font-size:11.5px; color:#9A8871; }
.grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px 18px 4px;
}
.card {
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #F0E6D6;
  box-shadow:0 2px 8px rgba(60,40,10,.05);
  display:flex; flex-direction:column;
}
.card .img {
  height:110px; display:flex; align-items:center; justify-content:center;
  font-size:46px; position:relative;
}
.img.i1 { background:#EAF1FB; } .img.i2 { background:#FDF1E3; }
.img.i3 { background:#EAF7EE; } .img.i4 { background:#F5EEFB; }
.demo-badge {
  position:absolute; top:8px; inset-inline-start:8px;
  background:rgba(43,33,24,.75); color:#fff;
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px;
}
.card .cbody { padding:10px 12px 12px; display:flex; flex-direction:column; flex:1; }
.card .cat { font-size:10.5px; font-weight:700; color:#B35416; }
.card .name { font-size:13px; font-weight:700; margin:3px 0 8px; flex:1; }
.price-row { display:flex; align-items:baseline; gap:6px; }
.price { font-size:13px; font-weight:800; color:#7A6A55; }
.buy {
  margin-top:9px; display:block; text-align:center;
  background:#E8641C; color:#fff; font-size:12.5px; font-weight:800;
  padding:9px 0; border-radius:10px; text-decoration:none; cursor:pointer;
}

/* ── how ── */
.how { padding:22px 20px 6px; }
.how h3 { font-size:17px; font-weight:900; margin-bottom:12px; }
.step { display:flex; gap:12px; align-items:flex-start; margin-bottom:13px; }
.step .n {
  flex:0 0 30px; height:30px; border-radius:50%;
  background:#2B2118; color:#FFD93B;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px;
}
.step b { font-size:13.5px; display:block; }
.step span { font-size:12px; color:#7A6A55; }

/* ── footer ── */
footer {
  margin-top:22px; background:#2B2118; color:#CBBBA5;
  padding:22px 20px 30px; text-align:center;
}
footer .fb { color:#FFD93B; font-weight:900; font-size:15px; margin-bottom:6px; }
footer p { font-size:11px; line-height:1.7; }
footer .disc { margin-top:10px; font-size:10.5px; color:#9A8871; }

/* ── desktop ── */
@media (min-width:768px) {
  .wrap { max-width:720px; }
  .hero h2 { font-size:34px; }
  .grid { grid-template-columns:repeat(4,1fr); }
}