/* Homepage hero demo: six small product screens built in HTML/CSS, one per system pill.
   js/hero-demo.js moves the cursor and sets the state classes on the active scene:
   .is-acted (the action happened), .has-card (status card shown), .is-complete (card done).
   Every size is in em, so the whole demo scales with the font size set on .demo. */
.hero__demo { container: demo / inline-size; }
.demo {
  --hair: color-mix(in srgb, var(--clr-ink) 10%, transparent);
  --soft: #fbf8f5;
  --ok: var(--clr-status-ok);
  position: relative; aspect-ratio: 4 / 2.95;
  font-size: clamp(11px, 2.3cqi, 15px); line-height: 1.3; letter-spacing: -.01em;
  user-select: none;
}
.demo p { margin: 0; }
.demo .on { display: none; }
.demo .is-acted .win .on, .demo .is-complete .status .on { display: inline; }
.demo .is-acted .win .off, .demo .is-complete .status .off { display: none; }

/* ---- scenes: stacked in one box, crossfaded ---- */
.demo__scene {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.demo__scene.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }

/* ---- window ---- */
.win {
  position: absolute; top: 0; right: 0; bottom: 1.8em; left: 1.8em;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--clr-surface); border: 1px solid var(--hair); border-radius: 1em;
  box-shadow: 0 1.8em 3.4em -1.6em rgb(18 17 11 / .22), 0 .15em .5em rgb(18 17 11 / .05);
}
.win__bar {
  display: flex; align-items: center; gap: .6em; flex: none;
  padding: .75em 1.1em; border-bottom: 1px solid var(--hair);
}
.win__bar::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,6 88.1,28 88.1,72 50,94 11.9,72 11.9,28' fill='none' stroke='%2312110B' stroke-width='11' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='50' r='13' fill='%2312110B'/%3E%3C/svg%3E") center / contain no-repeat;
}
.win__title { font-weight: 700; font-size: .92em; white-space: nowrap; }
.win__meta { margin-inline-start: auto; font-size: .78em; font-weight: 600; color: var(--clr-muted-text); white-space: nowrap; }
.win__btn {
  margin-inline-start: auto; padding: .45em 1em; border-radius: 99em; white-space: nowrap;
  background: var(--clr-dark); color: var(--clr-beige); font-size: .78em; font-weight: 600;
  transition: background .3s, transform .15s;
}
.is-acted .win__btn { background: var(--ok); color: #fff; }
.win__body { flex: 1; min-height: 0; }
.tag { padding: .2em .65em; border-radius: 99em; background: var(--clr-beige); font-size: .7em; font-weight: 700; transition: background .3s; }
.is-acted .tag { background: var(--ok); color: #fff; }
[data-target].is-pressed { transform: scale(.94); }

/* ---- status card ---- */
.status {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: .7em; min-width: 17em; max-width: calc(100% - 2em);
  padding: .75em .9em; background: var(--clr-surface); border: 1px solid var(--hair); border-radius: .9em;
  box-shadow: 0 1.2em 2.6em -1em rgb(18 17 11 / .3), 0 .1em .4em rgb(18 17 11 / .06);
  opacity: 0; transform: translateY(.7em); transition: opacity .45s ease, transform .45s ease;
}
.has-card .status { opacity: 1; transform: none; }
.status__icon {
  flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--clr-beige);
  display: grid; place-items: center;
}
.status__icon::after {
  content: ""; width: .7em; height: .7em; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--clr-ink) 35%, transparent); border-top-color: var(--clr-ink);
  animation: demo-spin 1s linear infinite;
}
.is-complete .status__icon { background: var(--ok); }
.is-complete .status__icon::after {
  content: "✓"; width: auto; height: auto; border: 0; border-radius: 0; animation: none;
  color: #fff; font-size: 1.05em; font-weight: 700; line-height: 1;
}
.status__text { min-width: 0; }
.status__text b { font-size: .84em; font-weight: 700; white-space: nowrap; }
.status__text small { display: block; margin-top: .15em; font-size: .72em; color: var(--clr-muted-text); white-space: nowrap; }
.badge {
  margin-inline-start: auto; flex: none; padding: .35em .75em; border-radius: 99em;
  background: var(--clr-beige); font-size: .7em; font-weight: 700; transition: background .3s, color .3s;
}
.is-complete .badge { background: var(--ok); color: #fff; }
@keyframes demo-spin { to { transform: rotate(1turn); } }

/* ---- cursor ---- */
.demo__cursor {
  position: absolute; left: 0; top: 0; z-index: 5; width: 1.7em; height: 1.7em;
  transform: translate(var(--cx, 60%), var(--cy, 80%));
  transition: transform 1s cubic-bezier(.45, .05, .25, 1), scale .15s ease, opacity .4s ease;
  filter: drop-shadow(0 .15em .25em rgb(0 0 0 / .25)); pointer-events: none;
}
.demo__cursor.is-pressing { scale: .82; }
.demo__cursor.is-hidden { opacity: 0; }

/* ---- אתר: page editor ---- */
.site { padding: 1.1em 1.3em; background: var(--soft); }
.site__nav { display: flex; align-items: center; gap: .9em; }
.site__nav i { width: 2.6em; height: .75em; border-radius: .2em; background: color-mix(in srgb, var(--clr-ink) 80%, transparent); margin-inline-end: auto; }
.site__nav b { width: 2.4em; height: .45em; border-radius: .2em; background: color-mix(in srgb, var(--clr-ink) 16%, transparent); }
.site__hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.3em; align-items: center; margin-top: 1.6em; }
.site__copy {
  position: relative; padding: .7em; border-radius: .4em;
  outline: 1.5px dashed color-mix(in srgb, var(--clr-ink) 45%, transparent); transition: outline-color .4s;
}
.is-acted .site__copy { outline-color: transparent; }
.site__edit {
  position: absolute; top: -1.05em; right: .6em; padding: .15em .55em; border-radius: .3em;
  background: var(--clr-ink); color: #fff; font-size: .62em; font-weight: 700; transition: opacity .4s;
}
.is-acted .site__edit { opacity: 0; }
.site__h { font-size: 1.5em; font-weight: 700; line-height: 1.15; }
.site__p { margin-top: .5em !important; font-size: .78em; color: var(--clr-muted-text); }
.site__cta { display: inline-block; margin-top: .8em; padding: .45em 1em; border-radius: 99em; background: var(--clr-dark); color: var(--clr-beige); font-size: .72em; font-weight: 600; }
.site__img {
  aspect-ratio: 1 / .85; border-radius: .7em;
  background: radial-gradient(circle at 70% 32%, #f6e7d6 0 13%, transparent 14%),
              linear-gradient(160deg, transparent 55%, #b99a7e 55.5%),
              linear-gradient(200deg, transparent 48%, #cdb59c 48.5%),
              linear-gradient(#e9dccf, #e2d1bf);
}
.site__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin-top: 1.4em; }
.site__row span { display: flex; flex-direction: column; gap: .45em; padding: .7em; border-radius: .6em; background: var(--clr-surface); border: 1px solid var(--hair); }
.site__row i { width: 1.5em; height: 1.5em; border-radius: .4em; background: var(--clr-beige); }
.site__row b { width: 70%; height: .45em; border-radius: .2em; background: color-mix(in srgb, var(--clr-ink) 14%, transparent); }

/* ---- חנות: product grid ---- */
.shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; padding: 1em 1.2em; align-content: start; }
.shop__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: .45em; font-size: .72em; font-weight: 600; }
.shop__bar span { padding: .35em .85em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--hair); white-space: nowrap; }
.shop__bar .shop__search { flex: 1; margin-inline-end: .4em; color: var(--clr-muted-text); border-radius: .5em; }
.shop__bar .is-sel { background: var(--clr-beige); box-shadow: none; }
.prod { padding: .6em; border: 1px solid var(--hair); border-radius: .75em; }
.prod__img { aspect-ratio: 1 / .82; border-radius: .5em; margin-bottom: .6em; }
.prod__img--a { background: radial-gradient(ellipse 22% 26% at 50% 58%, #c47a5a 98%, transparent), linear-gradient(transparent 70%, #e5d7ca 70%), #f1e7dd; }
.prod__img--b { background: linear-gradient(#5e5a4c, #5e5a4c) 50% 62% / 9% 44% no-repeat, linear-gradient(#d6c09f, #d6c09f) 50% 62% / 50% 44% no-repeat, #ece5da; }
.prod__img--c { background: linear-gradient(#8a9152, #8a9152) 50% 72% / 20% 52% no-repeat, linear-gradient(#6d7340, #6d7340) 50% 28% / 8% 14% no-repeat, #eef0e3; }
.prod p { font-size: .8em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod small { display: block; margin-top: .15em; font-size: .74em; color: var(--clr-muted-text); }
.prod__add {
  display: block; margin-top: .6em; padding: .45em; border-radius: 99em; text-align: center;
  background: var(--clr-beige); font-size: .72em; font-weight: 700; transition: background .3s, color .3s, transform .15s;
}
.is-acted .prod__add[data-target] { background: var(--ok); color: #fff; }
.cart { display: flex; align-items: center; gap: .4em; margin-inline-start: auto; font-size: .78em; font-weight: 700; }
.cart__n { display: grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 99em; background: var(--clr-dark); color: var(--clr-beige); font-size: .9em; transition: background .3s; }
.is-acted .cart__n { background: var(--ok); color: #fff; }

/* ---- CRM: pipeline ---- */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; padding: 1em; align-items: start; }
.col { padding: .6em; border-radius: .75em; background: var(--clr-beige); min-height: 100%; }
.col__h { font-size: .72em; font-weight: 700; color: var(--clr-muted-text); padding: .1em .2em .2em; }
.lead {
  position: relative; margin-top: .5em; padding: .6em .7em; border-radius: .55em;
  background: var(--clr-surface); box-shadow: 0 .1em .3em rgb(18 17 11 / .08);
}
.lead b { display: block; font-size: .8em; font-weight: 700; }
.lead small { display: block; margin-top: .15em; font-size: .68em; color: var(--clr-muted-text); }
.lead--slot { visibility: hidden; }
.is-dragging .lead--slot { visibility: visible; background: transparent; box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--clr-ink) 35%, transparent); outline-offset: -1.5px; }
.is-dragging .lead--slot > * { visibility: hidden; }
.is-acted .lead--slot, .is-acted .lead--slot > * { visibility: visible; }
.is-acted .lead--slot { outline: 0; background: var(--clr-surface); box-shadow: 0 0 0 1.5px var(--ok); }
.lead--drag { z-index: 2; transition: transform 1s cubic-bezier(.45, .05, .25, 1), box-shadow .2s, rotate .2s; }
.is-dragging .lead--drag { box-shadow: 0 1em 1.8em -.6em rgb(18 17 11 / .35); rotate: -2deg; }
.is-acted .lead--drag { visibility: hidden; transition: none; }

/* ---- מערכות פנימיות: work orders ---- */
.tasks { padding: .5em 1.2em; }
.tasks__sum { display: flex; align-items: center; gap: 1em; padding: .7em .1em .4em; font-size: .74em; font-weight: 700; }
.tasks__sum .bar { flex: 1; height: .5em; border-radius: 99em; background: var(--clr-beige); overflow: hidden; }
.tasks__sum .bar i { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--ok); transition: width .5s ease; }
.is-acted .tasks__sum .bar i { width: 50%; }
.task {
  display: grid; grid-template-columns: 1.3em 1fr auto auto; gap: .8em; align-items: center;
  padding: .85em .1em; border-bottom: 1px solid var(--hair);
}
.task:last-child { border-bottom: 0; }
.check {
  position: relative; width: 1.3em; height: 1.3em; border-radius: .35em;
  border: 1.5px solid color-mix(in srgb, var(--clr-ink) 40%, transparent); transition: background .3s, border-color .3s, transform .15s;
}
.task.is-done .check, .is-acted .task--target .check { background: var(--ok); border-color: var(--ok); }
.task.is-done .check::after, .is-acted .task--target .check::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: .65em; height: .35em;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -50%) rotate(-45deg);
}
.task p { font-size: .84em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task.is-done p, .is-acted .task--target p { color: var(--clr-muted-text); text-decoration: line-through; }
.who { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--clr-beige); font-size: .66em; font-weight: 700; }
.chip-s { padding: .3em .75em; border-radius: 99em; background: var(--clr-beige); font-size: .68em; font-weight: 700; white-space: nowrap; transition: background .3s, color .3s; }
.chip-s--ok, .is-acted .task--target .chip-s { background: var(--ok); color: #fff; }
.chip-s--wait { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); color: var(--clr-muted-text); }

/* ---- אוטומציות: trigger → actions ---- */
.flow { display: flex; flex-direction: column; align-items: center; gap: .9em; padding: 1.2em 1.4em; }
.node {
  position: relative; width: min(19em, 82%); padding: .6em .9em; border-radius: .7em;
  background: var(--clr-surface); border: 1px solid color-mix(in srgb, var(--clr-ink) 16%, transparent);
  transition: border-color .35s, box-shadow .35s;
}
.node + .node::before {
  content: ""; position: absolute; top: calc(-.9em - 1px); right: 50%; width: 1.5px; height: .9em;
  background: color-mix(in srgb, var(--clr-ink) 22%, transparent); transition: background .35s;
}
.node--trigger { background: var(--clr-beige); border-color: transparent; }
.node small { display: block; font-size: .66em; font-weight: 600; color: var(--clr-muted-text); }
.node--trigger small { color: var(--clr-ink); }
.node b { display: block; font-size: .82em; font-weight: 700; }
.node::after {
  content: "✓"; position: absolute; left: .8em; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: .72em; font-weight: 700; opacity: 0; scale: .6;
  transition: opacity .3s, scale .3s;
}
.node.is-lit, .is-acted .node { border-color: var(--ok); box-shadow: 0 0 0 .2em color-mix(in srgb, var(--ok) 14%, transparent); }
.node.is-lit::after, .is-acted .node::after { opacity: 1; scale: 1; }
.node.is-lit + .node::before, .is-acted .node + .node::before { background: var(--ok); }

/* ---- קמפיינים: campaign table ---- */
.ads { padding: .4em 1.2em; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; padding: .7em 0 .5em; }
.kpis div { padding: .6em .75em; border-radius: .6em; border: 1px solid var(--hair); }
.kpis small { display: block; font-size: .66em; font-weight: 600; color: var(--clr-muted-text); white-space: nowrap; }
.kpis b { display: block; margin-top: .15em; font-size: 1.05em; font-weight: 700; }
.ad {
  display: grid; grid-template-columns: 1fr 3em 4em 3.2em; gap: .8em; align-items: center;
  padding: .85em .1em; border-bottom: 1px solid var(--hair); font-size: .84em;
}
.ad:last-child { border-bottom: 0; }
.ad p { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad--head { padding-block: .6em; font-size: .7em; font-weight: 700; color: var(--clr-muted-text); }
.tgl {
  position: relative; width: 2.5em; height: 1.4em; border-radius: 99em;
  background: color-mix(in srgb, var(--clr-ink) 20%, transparent); transition: background .3s, transform .15s;
}
.tgl::after {
  content: ""; position: absolute; top: .18em; right: .18em; width: 1.04em; height: 1.04em; border-radius: 50%;
  background: #fff; box-shadow: 0 .05em .2em rgb(0 0 0 / .2); transition: translate .3s ease;
}
.tgl.is-on, .is-acted .tgl[data-target] { background: var(--ok); }
.tgl.is-on::after, .is-acted .tgl[data-target]::after { translate: -1.1em 0; }

/* ---- small screens: fewer columns, same story ---- */
@container demo (width < 480px) {
  .demo { aspect-ratio: 1 / 1; }
  .shop { grid-template-columns: repeat(2, 1fr); }
  .shop .prod:nth-child(4) { display: none; }
  .shop__bar span:last-child { display: none; }
  .who, .ad__x { display: none; }
  .task { grid-template-columns: 1.3em 1fr auto; }
  .ad { grid-template-columns: 1fr 3em 3.6em; }
  .board { gap: .5em; padding: .8em; }
  .col { padding: .45em; }
  .lead { padding: .5em .55em; }
  .win { left: 1em; bottom: 2.4em; }
  .status { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .demo__scene, .demo__scene.is-active, .status, .demo__cursor { transition: none; }
  .status__icon::after { animation: none; }
}