/* ================= «Ваш бізнес під рентгеном» (симуляція дня) ================= */
.hero__links .hero__main { font-weight: 500; text-decoration-color: var(--agent); text-decoration-thickness: 2px; }

.sim { padding: clamp(40px, 8vh, 100px) var(--pad) clamp(50px, 9vh, 110px); scroll-margin-top: 60px; }
.sim__hd { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; margin-bottom: clamp(22px, 4vh, 40px); }
.sim__h { grid-column: 1 / 8; margin: 0; font: 700 clamp(30px, 4.2vw, 68px)/1.02 var(--f-disp); }
.sim__p { grid-column: 8 / 13; margin: 0; color: var(--ink-2); }
.sim__film { margin: 0; }

.sim__plate {
  --bone2: rgba(220, 235, 234, .62);
  position: relative; display: grid; gap: clamp(14px, 2vh, 22px);
  padding: clamp(16px, 2.4vw, 32px); color: var(--bone); background-color: var(--ink);
  background-image: linear-gradient(rgba(220, 235, 234, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 235, 234, .05) 1px, transparent 1px);
  background-size: 48px 48px; transition: background-color .6s var(--out); overflow: hidden;
}
.sim__plate.is-night { background-color: #061014; }

.sim__top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sim__clock { font: 500 clamp(22px, 2.4vw, 32px)/1 var(--f-mark); white-space: nowrap; }
.sim__clock i { display: inline-block; width: .7em; text-align: center; font-style: normal; }
.sim__clock i.is-sep { width: .32em; }
.sim__mode { font: 400 13px/1.3 var(--f-mark); color: var(--bone2); }
.sim__sound { margin-left: auto; min-height: 44px; padding: 0 14px; font: 500 13px/1 var(--f-mark); color: var(--bone); background: transparent; border: 1px solid rgba(220, 235, 234, .4); cursor: pointer; }
.sim__sound[aria-pressed="false"] { color: var(--bone2); border-style: dashed; }

.sim__bar { position: relative; height: 30px; background: rgba(220, 235, 234, .05); border: 1px solid rgba(220, 235, 234, .2); }
.sim__busy { position: absolute; top: 0; bottom: 0; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(220, 235, 234, .13) 0 6px, transparent 6px 12px); }
.sim__busy span { display: block; padding: 0 6px; font: 400 11px/28px var(--f-mark); color: var(--bone2); white-space: nowrap; }
.sim__busy span.is-hidden { visibility: hidden; }
.sim__now { position: absolute; top: -5px; bottom: -5px; left: 0; width: 2px; background: var(--agent); box-shadow: 0 0 8px rgba(255, 77, 26, .7); z-index: 1; }
.sim__ticks { display: flex; justify-content: space-between; margin-top: 6px; font: 400 11px/1 var(--f-mark); color: var(--bone2); }

.sim__stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.sim__main { display: grid; gap: clamp(18px, 3vh, 28px); align-content: start; min-width: 0; }
.sim__flow { display: grid; grid-template-columns: minmax(0, 1fr) 0px 104px; gap: 0 12px; transition: grid-template-columns .7s var(--out); }
.is-after .sim__flow { grid-template-columns: minmax(0, 1fr) 150px 104px; }
.sim__rows { display: grid; gap: 18px; align-content: center; }
.sim__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 10px; }
.sim__row.is-new { animation: simIn .7s var(--out) both; }
@keyframes simIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.sim__lbl { font: 400 13px/1.2 var(--f-mark); overflow-wrap: anywhere; }
.sim__row.is-new .sim__lbl { color: var(--agent); }
.sim__track { position: relative; height: 14px; }
.sim__track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; border-top: 2px dashed rgba(220, 235, 234, .3); }
.sim__track.is-leak::after { content: ""; position: absolute; right: 2px; top: 10px; width: 2px; height: 26px; background: linear-gradient(var(--agent), transparent); }
.sim__drop { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 14px 2px rgba(255, 77, 26, .75); z-index: 1; }
/* контраст заповнює судину за краплею */
.sim__glow { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--agent); box-shadow: 0 0 8px rgba(255, 77, 26, .7); transform-origin: left center; transform: scaleX(0); }
.sim__cnt { display: grid; justify-items: center; font: 400 11px/1.2 var(--f-mark); font-style: normal; color: var(--agent); }
.sim__cnt strong { font: 800 22px/1 var(--f-disp); }
/* спіймана заявка — плівка коротко світиться по краю */
.sim__plate.is-catch { box-shadow: inset 0 0 0 2px rgba(255, 77, 26, .55), inset 0 0 70px rgba(255, 77, 26, .16); }
.sim__plate { transition: background-color .6s var(--out), box-shadow .45s var(--out); }
/* підсумок: одне число; у другому проході ранкове число закреслене, поруч — нуль */
.sim__vs { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(14px, 2vw, 24px); }
.sim__vs b, .sim__vs del, .sim__vs ins { font: 800 clamp(52px, 6.4vw, 84px)/.9 var(--f-disp); text-decoration: none; }
.sim__vs b { color: var(--agent); }
.sim__vs del { position: relative; color: rgba(220, 235, 234, .42); padding: 0 .06em; }
.sim__strike { position: absolute; left: -.08em; right: -.08em; top: 50%; height: .09em; margin-top: -.045em; background: var(--agent); transform: rotate(-9deg); transform-origin: 0 50%; }
.sim__vs ins { color: var(--bone); }
.sim__vs span { font: 400 15px/1.3 var(--f-mark); color: var(--bone2); max-width: 15ch; }

.sim__sys, .sim__you { display: grid; align-content: center; justify-items: center; text-align: center; gap: 4px; padding: 10px 6px; min-width: 0; transition: border-color .3s, box-shadow .3s, opacity .5s; }
.sim__sys { border: 2px solid var(--bone); opacity: 0; visibility: hidden; overflow: hidden; }
.is-after .sim__sys { opacity: 1; visibility: visible; }
.sim__sys b, .sim__you b { font: 700 17px/1.1 var(--f-disp); }
.sim__sys span, .sim__you span { font: 400 11px/1.3 var(--f-mark); color: var(--bone2); overflow-wrap: anywhere; }
.sim__you { border: 1.5px solid rgba(220, 235, 234, .6); }
.sim__you.is-busy { border-style: dashed; }
.is-hit { border-color: var(--agent) !important; box-shadow: 0 0 0 6px rgba(255, 77, 26, .22); }
.is-miss { background: rgba(220, 235, 234, .06); }

.sim__inbox { display: grid; align-content: start; gap: 10px; padding-left: clamp(14px, 2vw, 24px); border-left: 1px solid rgba(220, 235, 234, .18); min-width: 0; }
.sim__inbox-h { font: 500 12px/1 var(--f-mark); color: var(--bone2); }
/* без вкладеної прокрутки: видно 4 останні, решта — рядком «ще N раніше» */
.sim__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.sim__list .sim__card:nth-child(n+5) { display: none; }
.sim__more { margin: 0; font: 400 12px/1.3 var(--f-mark); color: var(--bone2); }
.sim__more:empty { display: none; }
.sim__card { display: grid; gap: 3px; padding: 10px 12px; background: rgba(220, 235, 234, .05); border: 1px solid rgba(220, 235, 234, .18); min-width: 0; }
.sim__meta, .sim__st { font: 400 11px/1.35 var(--f-mark); color: var(--bone2); overflow-wrap: anywhere; }
.sim__what { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.sim__card.is-lost { opacity: .6; }
.sim__card.is-lost .sim__what { text-decoration: line-through; text-decoration-color: rgba(220, 235, 234, .5); }
.sim__card.is-new, .sim__card.is-wait { border-color: rgba(255, 77, 26, .55); }
.sim__card.is-peak { border-color: var(--agent); background: rgba(255, 77, 26, .12); }
.sim__card.is-auto { border-style: dashed; }
.sim__card.is-taken { border-color: var(--bone); }
.sim__card.is-taken .sim__st { color: var(--bone); }
.sim__take { justify-self: start; margin-top: 6px; min-height: 44px; padding: 0 18px; font: 700 15px/1 var(--f-disp); color: #fff; background: var(--agent); border: 0; cursor: pointer; }

.sim__ctl { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(220, 235, 234, .15); }
.sim__ask { margin: 0; font: 700 clamp(20px, 2vw, 26px)/1.1 var(--f-disp); }
.sim__chips, .sim__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.sim__chip, .sim__ghost, .sim__skip { min-height: 44px; padding: 0 16px; font: 500 15px/1.2 var(--f-text); color: var(--bone); background: transparent; border: 1px solid rgba(220, 235, 234, .45); cursor: pointer; }
.sim__chip:hover, .sim__ghost:hover, .sim__skip:hover { border-color: var(--bone); }
.sim__skip, .sim__ghost { font-family: var(--f-mark); font-size: 13px; }
.sim__run { margin: 0; font: 400 13px/1.45 var(--f-mark); color: var(--bone2); }
.sim__skip { justify-self: start; }
.sim__sum { margin: 0; font-size: 18px; line-height: 1.4; }
.sim__sum b { font-family: var(--f-disp); font-weight: 700; }
.sim__proof { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(220, 235, 234, .82); max-width: 70ch; }
.sim__proof a { color: var(--bone); text-underline-offset: 4px; }
.sim__go { min-height: 52px; padding: 0 26px; font: 700 18px/1 var(--f-disp); color: #fff; background: var(--agent); border: 0; cursor: pointer; }
.sim__go:active, .sim__take:active { transform: scale(.97); }

/* лінза: кільце розкривається від кнопки, коли вмикається система */
.sim__plate.is-lens::after { content: ""; position: absolute; left: var(--rx); top: var(--ry); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  border: 2px solid var(--bone); box-shadow: 0 0 24px rgba(220, 235, 234, .5); pointer-events: none; animation: simLens 1.05s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes simLens { from { transform: scale(.2); opacity: 1; } to { transform: scale(90); opacity: 0; } }

@media (max-width: 860px) {
  .sim__hd { display: block; }
  .sim__p { margin-top: 12px; }
  .sim__stage { grid-template-columns: 1fr; }
  .sim__flow { grid-template-columns: minmax(0, 1fr) 0px 72px; min-height: 0; }
  .is-after .sim__flow { grid-template-columns: minmax(0, 1fr) 82px 72px; }
  .sim__row { grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
  .sim__lbl { font-size: 12px; }
  .sim__sys span { display: none; }
  .sim__sys b, .sim__you b { font-size: 15px; }
  .sim__inbox { padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(220, 235, 234, .18); }
  .sim__ticks span:nth-child(even) { visibility: hidden; }
  .sim__go { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sim__plate.is-lens::after { display: none; }
}