/* Boje pulta: the page speaks the counter's own colour language.
   Gotovina green = go, Kartica navy = card and equipment, TEST violet = not live yet,
   Bez veze amber = offline. The product is shown at its real size wherever it can be. */

:root {
  --paper: #ffffff;
  --stone: #f2f2ef;
  --stone-line: #e2e2dd;
  --ink: #1b1c20;          /* the counter's top bar */
  --ink-2: #4b4e56;
  --ink-3: #74777f;
  --line: rgba(27, 28, 32, 0.12);

  --cash: #17604e;         /* Gotovina, Naplati */
  --cash-deep: #0f4a3c;
  --cash-tint: #e3f2ea;    /* Za vratiti */
  --card: #1f3457;         /* Kartica */
  --card-line: rgba(255, 255, 255, 0.16);
  --card-text: #c8d2e5;
  --test: #6a2fd6;         /* the TEST badge */
  --test-ink: #4c1fa3;
  --test-tint: #efe8fc;
  --wait: #b26f00;         /* Bez veze, Čeka JIR */
  --wait-ink: #6e4300;
  --wait-tint: #fdf4dc;

  --font: "Host Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(80px, 9vw, 136px);
  --r-lg: 24px;
  --r-md: 14px;
  --shadow-screen: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 60px 100px -50px rgba(18, 38, 32, 0.5), 0 22px 40px -28px rgba(18, 38, 32, 0.4);
  --shadow-crop: 0 0 0 1px rgba(27, 28, 32, 0.08), 0 30px 60px -36px rgba(18, 38, 32, 0.38);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.i { width: 24px; height: 24px; flex: none; }
.copy-line { display: block; }

:focus-visible { outline: 3px solid var(--cash); outline-offset: 3px; border-radius: 6px; }
main:focus, .demo__step:focus { outline: none; }

.wrap {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- strip: preview + status, in TEST violet ---------- */
.strip { background: var(--test-tint); color: var(--test-ink); font-size: 0.8125rem; line-height: 1.3; font-weight: 500; }
.strip__in { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 38px; padding-block: 8px; }
.strip__item { display: flex; align-items: center; gap: 8px; }
.tag { width: 18px; height: 10px; border-radius: 3px; background: var(--test); flex: none; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--test); flex: none; box-shadow: 0 0 0 3px rgba(106, 47, 214, 0.18); }

/* ---------- header ---------- */
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; }
.brand__mark { display: inline-flex; gap: 3px; }
.brand__mark i { width: 8px; height: 20px; border-radius: 3px; background: var(--cash); }
.brand__mark i + i { background: var(--card); }
.nav { display: flex; gap: 2px; }
.nav a { padding: 8px 14px; border-radius: 999px; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.nav a:hover { background: var(--stone); color: var(--ink); }

/* ---------- buttons and notes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 22px; border-radius: 12px;
  border: 1.5px solid transparent;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.12s;
}
.btn:active { transform: translateY(1px); }
.btn--go { background: var(--cash); color: #fff; }
.btn--go:hover { background: var(--cash-deep); }
.btn--line { background: rgba(255, 255, 255, 0.7); border-color: rgba(27, 28, 32, 0.22); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }

.note { display: flex; align-items: flex-start; gap: 10px; max-width: 62ch; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.note::before { content: ""; flex: none; width: 16px; height: 9px; margin-top: 0.42em; border-radius: 3px; background: var(--ink-3); }
.note--test::before { background: var(--test); }
.note--wait::before { background: var(--wait); }
.note--card { color: var(--card-text); }
.note--card::before { background: #7d93bd; }

/* ---------- type ---------- */
.h2 { font-size: clamp(2rem, 1.15rem + 2.6vw, 3.5rem); font-weight: 350; line-height: 1.04; letter-spacing: -0.032em; max-width: 17ch; }
.sechead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(44px, 5vw, 76px); }
.sechead p { max-width: 44ch; font-size: 1.125rem; color: var(--ink-2); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(20px, 2.6vw, 40px) clamp(56px, 6vw, 88px); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0 0; height: 30%; background: var(--stone); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  grid-template-areas: "title title" "copy screen" "note screen";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, 4.5vw, 72px);
}
.hero__title {
  grid-area: title;
  margin-bottom: clamp(24px, 2.6vw, 40px);
  font-size: clamp(2.25rem, 1rem + 3.7vw, 4.25rem);
  font-weight: 300; line-height: 1.02; letter-spacing: -0.04em;
}
.hero__copy { grid-area: copy; padding-top: 4px; }
.lead { max-width: 34ch; font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__screen { grid-area: screen; }
.hero__note { grid-area: note; align-self: end; max-width: 36ch; }

.bezel { padding: clamp(6px, 0.75vw, 11px); border-radius: clamp(14px, 1.5vw, 22px); background: var(--ink); box-shadow: var(--shadow-screen); }
.bezel img { width: 100%; border-radius: clamp(8px, 0.8vw, 12px); }

/* ---------- the loupe: real screens at their real size ---------- */
.product { padding-block: clamp(8px, 2vw, 24px) var(--section); background: var(--stone); }
.loupe {
  display: grid;
  grid-template-columns: minmax(0, 398px) minmax(0, 1fr);
  grid-template-areas: "order pay" "order day";
  gap: clamp(40px, 4.5vw, 64px) clamp(32px, 5vw, 80px);
  align-items: start;
}
.loupe__item { display: grid; gap: 22px; }
.loupe__item--order { grid-area: order; position: sticky; top: 28px; }
.loupe__item--pay { grid-area: pay; }
.loupe__item--day { grid-area: day; }
.loupe figcaption h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.012em; }
.loupe figcaption p { max-width: 40ch; margin-top: 4px; color: var(--ink-2); }
.product__caption { margin-top: clamp(40px, 5vw, 64px); }

/* A crop shows one region of an unedited screenshot: x, y, w, h in the PNG's pixels (2x).
   It never grows much past the screen's real size (half the PNG width). */
.crop {
  --iw: 2560;
  position: relative; overflow: hidden;
  width: 100%;
  max-width: calc(var(--w) * 0.58px);
  aspect-ratio: var(--w) / var(--h);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-crop);
}
.crop img {
  width: calc(var(--iw) / var(--w) * 100%);
  max-width: none;
  margin-left: calc(var(--x) / var(--w) * -100%);
  margin-top: calc(var(--y) / var(--w) * -100%);
}
.crop--order { --x: 1764; --y: 216; --w: 796; --h: 1384; }
.crop--pay { --x: 540; --y: 268; --w: 1480; --h: 1034; }
.crop--day { --x: 0; --y: 216; --w: 1704; --h: 584; }
.crop--jir { --x: 560; --y: 1082; --w: 840; --h: 288; border-radius: 10px; }

/* ---------- equipment: Kartica navy ---------- */
.equip { padding-block: var(--section); background: var(--card); color: #fff; }
.equip .sechead p { color: var(--card-text); }
.opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--card-line); }
.opt { padding: 36px 36px 8px 0; }
.opt + .opt { padding-left: 36px; border-left: 1px solid var(--card-line); }
.opt__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); color: #fff; }
.opt h3 { margin: 24px 0 8px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.012em; }
.opt p { max-width: 36ch; color: var(--card-text); }
.equip .note { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- setup: a real sequence, so it is numbered ---------- */
.setup { padding-block: var(--section); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.step { position: relative; padding-top: 80px; counter-increment: step; }
.step::before {
  content: counter(step);
  position: absolute; top: 0; left: 0; z-index: 1;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink);
  font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.step:last-child::before { background: var(--cash); border-color: var(--cash); color: #fff; }
.step::after { content: ""; position: absolute; top: 26px; left: 52px; right: -32px; height: 1.5px; background: var(--stone-line); }
.step:last-child::after { display: none; }
.step h3 { margin-bottom: 8px; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.step p { max-width: 30ch; color: var(--ink-2); }

/* ---------- offline: Bez veze amber ---------- */
.offline { padding-bottom: var(--section); }
.offline__panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5vw, 80px); align-items: center;
  padding: clamp(28px, 5.5vw, 80px);
  border-radius: var(--r-lg); background: var(--wait-tint);
}
.offline__copy > p:not(.note) { max-width: 46ch; margin-top: 20px; color: #4a4232; }
.offline__copy .note { margin-top: 24px; color: var(--wait-ink); }
.slips { display: grid; gap: 22px; justify-items: start; }
.slip { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: center; width: 100%; }
.slip:first-child::after {
  content: ""; position: absolute; left: 23px; top: calc(50% + 30px); height: calc(100% + 22px - 60px);
  border-left: 2px dashed rgba(178, 111, 0, 0.35);
}
.slip__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--cash-tint); color: var(--cash); }
.slip__icon--off { background: #f8e3b0; color: var(--wait-ink); }

/* ---------- independent ---------- */
.indep { padding-bottom: var(--section); }
.indep__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.indep__title { font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4.5rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.04em; }
.indep__in p { max-width: 42ch; font-size: 1.125rem; color: var(--ink-2); }

/* ---------- questions ---------- */
.faq { padding-block: var(--section); background: var(--stone); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.faq__title { position: sticky; top: 32px; }
.qa { border-bottom: 1px solid var(--stone-line); }
.qa:first-child { border-top: 1px solid var(--stone-line); }
.qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .i { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #fff; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s; }
.qa summary:hover .i { background: var(--cash-tint); }
.qa[open] summary .i { transform: rotate(45deg); }
.qa p { max-width: 58ch; padding: 0 56px 28px 0; color: var(--ink-2); }

/* ---------- pilot: Gotovina green, the last button of the day ---------- */
.pilot { padding-block: var(--section); }
.pilot__panel {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 28px 64px; align-items: end;
  padding: clamp(32px, 6vw, 88px);
  border-radius: var(--r-lg); background: var(--cash-tint);
  align-items: center;
}
.pilot__copy { display: grid; gap: 24px; justify-items: start; }
.pilot__copy > p:first-child { font-size: 1.125rem; color: #2c463c; }
.pilot__copy .note { color: #3e4a46; }

/* ---------- footer ---------- */
.foot { padding-block: 48px 64px; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-2); }
.foot__in { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px 56px; align-items: start; }
.brand--foot { color: var(--ink); }

/* ---------- dialogs ---------- */
dialog { padding: 0; border: 0; color: var(--ink); background: var(--paper); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(16, 24, 21, 0.55); backdrop-filter: blur(3px); }

.demo { width: min(1200px, calc(100vw - 48px)); height: min(920px, calc(100dvh - 48px)); border-radius: var(--r-lg); overflow: hidden; }
.demo[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.demo__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 20px 12px 32px; }
.demo__head h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.close {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.close .i { width: 18px; height: 18px; }
.close:hover { border-color: var(--ink); }
.demo__chips { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 4px 32px 16px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.demo__chips::-webkit-scrollbar { display: none; }
.demo__chips a {
  flex: none; padding: 9px 16px; border-radius: 999px; background: var(--stone);
  font-size: 0.9375rem; font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.demo__chips a:hover { background: var(--stone-line); }
.demo__chips a[aria-current="true"] { background: var(--ink); color: #fff; }
.demo__body { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 32px; }
.demo__step { display: grid; gap: 20px; padding-bottom: 48px; scroll-margin-top: 16px; }
.demo__step + .demo__step { padding-top: 40px; border-top: 1px solid var(--line); }
.demo__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 40px; align-items: baseline; }
.demo__text h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.demo__text p { max-width: 60ch; color: var(--ink-2); }
.demo__step img { border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }

.sheet { width: min(520px, calc(100vw - 32px)); border-radius: var(--r-lg); }
.sheet__in { display: grid; gap: 16px; justify-items: start; padding: 32px; }
.sheet__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--cash-tint); color: var(--cash); }
.sheet h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.sheet p { color: var(--ink-2); }
.sheet .btn { margin-top: 8px; }

/* ---------- motion: one entrance, and answers to actions ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .hero__screen { animation: rise 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) 0.12s both; }
  dialog[open] { animation: pop 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
  dialog[open]::backdrop { animation: fade 0.24s ease-out; }
  .qa::details-content { height: 0; overflow: clip; transition: height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), content-visibility 0.3s allow-discrete; }
  .qa[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .loupe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "order pay" "order day"; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .step:nth-child(2)::after { display: none; }
}

@media (max-width: 860px) {
  .sechead, .indep__in, .faq__grid, .pilot__panel, .offline__panel { grid-template-columns: minmax(0, 1fr); }
  .faq__title { position: static; }
  .opts { grid-template-columns: minmax(0, 1fr); }
  .opt, .opt + .opt { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding: 28px 0; border-left: 0; border-top: 1px solid var(--card-line); }
  .opt:first-child { border-top: 0; }
  .opt__icon { grid-row: span 2; }
  .opt h3 { margin: 4px 0 6px; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .strip__in { gap: 10px; }
  .strip { font-size: 0.75rem; }
  .top__in { flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding-block: 16px 12px; }
  .nav { gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; padding: 7px 12px; background: var(--stone); font-size: 0.8125rem; color: var(--ink); }

  .hero { padding-top: 20px; }
  .hero::after { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "screen" "copy" "note"; grid-template-rows: auto; }
  .hero__title { margin-bottom: 24px; letter-spacing: -0.035em; }
  .hero__screen { margin-bottom: 28px; }
  .actions { margin-top: 24px; }
  .actions .btn { flex: 1 1 100%; }
  .hero__note { margin-top: 24px; }

  .product { padding-top: var(--section); }
  .loupe { grid-template-columns: minmax(0, 1fr); grid-template-areas: "order" "pay" "day"; }
  .loupe__item--order { position: static; }
  .crop--pay { --w: 964; --h: 743; }
  .crop--day { --w: 866; }

  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .step { padding: 0 0 36px 76px; min-height: 52px; }
  .step::after, .step:nth-child(2)::after { display: block; top: 52px; bottom: 0; left: 25px; right: auto; width: 1.5px; height: auto; }
  .step:last-child { padding-bottom: 0; }
  .step:last-child::after { display: none; }
  .step h3 { padding-top: 12px; }

  .offline__panel { padding: 28px 20px 24px; }
  .crop--jir { --x: 566; --y: 1198; --w: 590; --h: 172; }
  .slip { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .slip__icon { width: 40px; height: 40px; border-radius: 12px; }
  .slip:first-child::after { left: 19px; top: calc(50% + 26px); height: calc(100% + 22px - 52px); }

  .qa summary { font-size: 1.0625rem; padding: 20px 0; }
  .qa p { padding-right: 0; }

  .demo { width: 100vw; height: 100dvh; border-radius: 0; }
  .demo__head { padding: 12px 12px 8px 20px; }
  .demo__head h2 { font-size: 1.125rem; }
  .demo__chips { padding: 4px 20px 12px; }
  .demo__body { padding: 24px 20px; }
  .demo__text { grid-template-columns: minmax(0, 1fr); }
  .demo__text h3 { font-size: 1.25rem; }
}