:root {
  --carbon: #1c1c16;
  --stock: #f0ede4;
  --paper: #faf7ee;
  --blue: #3d56e7;
  --gold: #d9c952;
  --muted: #55554e;
  --rule: #bcb9af;
  --sans: "Space Grotesk", sans-serif;
  --mono: "Azeret Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--stock);
  color: var(--carbon);
  font: 17px/1.6 var(--sans);
}

a {
  color: inherit;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--blue);
}
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}

.wrap {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}
.mono,
.eyebrow,
.step-number {
  font: 600 12px/1.5 var(--mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  width: 8px;
  height: 8px;
  background: var(--blue);
  content: "";
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--carbon);
  color: var(--paper);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--carbon);
  background: rgb(240 237 228 / 97%);
}
.header-inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img {
  display: block;
  width: 42px;
  height: 42px;
}
.brand span {
  font: 600 13px/1.3 var(--mono);
  text-transform: uppercase;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.site-header nav a {
  margin: -14px -7px;
  padding: 14px 7px;
  font: 600 12px/1.4 var(--mono);
  text-decoration: none;
}
.menu-toggle {
  display: none;
}

.hero {
  padding: clamp(88px, 10vw, 140px) 0 clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--carbon);
  background: var(--paper);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
/* Photo, name and profession above the title. */
.hero-person {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-person img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: cover;
  box-shadow: 3px 3px 0 var(--blue);
}
.hero-person span {
  font: 600 12px/1.35 var(--mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.hero-person small {
  display: block;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}
.hero h1 {
  max-width: 800px;
  margin: 26px 0 27px;
  font-size: clamp(48px, 6vw, 82px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.hero-copy p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--muted);
}
.hero-copy .hero-lead {
  margin-bottom: 22px;
  color: var(--carbon);
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.38;
}

/* Hero card, "made to measure": a small tool window that retypes who it was
   made for (Vašu pekaru, Vaš autoservis…) and its rows change with it, so an
   owner spots their own kind of business. One pass, then it settles on
   "Vaš posao". Without JS it simply shows the first example. */
.hero-card {
  border: 1px solid var(--carbon);
  background: var(--stock);
  box-shadow: 8px 8px 0 var(--blue);
}
.hero-stage,
.service-band {
  background-color: var(--stock);
  background-image:
    linear-gradient(rgb(188 185 175 / 35%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(188 185 175 / 35%) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 20px 20px;
}
.hero-stage {
  display: grid;
  place-items: center;
  padding: 22px 20px;
  border-bottom: 1px solid var(--carbon);
}
.fit-win {
  width: min(100%, 320px);
}
.fit-for {
  margin: 0;
  padding: 12px;
  border-bottom: 1px solid var(--carbon);
}
.fit-for .mono {
  display: block;
  color: var(--muted);
  font-size: 10px;
}
.fit-who {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.fit-caret {
  display: inline-block;
  width: 3px;
  height: 22px;
  margin-left: 3px;
  background: var(--blue);
  vertical-align: -3px;
}
.hero-card.is-live .fit-caret {
  animation: story-blink 1s steps(2, jump-none) infinite;
}
.hero-card.is-done .fit-caret {
  animation: none;
  opacity: 0;
  transition: opacity 0.3s ease 1.5s;
}
.fit-rows li {
  min-height: 41px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.fit-rows li:nth-child(2) {
  transition-delay: 0.08s;
}
.fit-rows li:nth-child(3) {
  transition-delay: 0.16s;
}
.fit-rows.is-out li {
  opacity: 0;
  transform: translateY(4px);
  transition-delay: 0s;
}
.fit-n {
  font: 600 13px/1 var(--mono);
}
.fit-rows:not(.is-out) .mock-tag--blue {
  animation: story-stamp 0.35s cubic-bezier(0.3, 1.6, 0.6, 1) both 0.35s;
}
.fit-rows:not(.is-out) li:nth-child(3) .mock-tag--blue {
  animation-delay: 0.5s;
}
.hero-body {
  padding: 20px 24px 24px;
}
.hero-body .mono {
  display: block;
  margin-bottom: 14px;
}
.hero-body strong {
  display: block;
  margin-bottom: 12px;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.hero-body p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* Services: a one-line mock-up band on top of each. Phones swipe them. */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(48px, 7vw, 96px);
  border-top: 1px solid var(--carbon);
  border-left: 1px solid var(--carbon);
}
.service {
  border-right: 1px solid var(--carbon);
  border-bottom: 1px solid var(--carbon);
}
.service-band {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--carbon);
}
.service h2 {
  margin: 0;
  padding: 20px 22px 12px;
}
.service p {
  margin: 0;
  padding: 0 22px 24px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.025em;
}
.service:nth-child(2) {
  background: var(--blue);
  color: #fff;
}
.service:nth-child(2) .service-band {
  background-color: var(--blue);
  background-image:
    linear-gradient(rgb(255 255 255 / 12%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 12%) 1px, transparent 1px);
}
.service-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--carbon);
  background: var(--paper);
  color: var(--carbon);
  font: 600 10px/1.2 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.service-chip b {
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
}
.service-chip--done {
  background: var(--gold);
}
.service-chip--done b {
  background: var(--carbon);
}
.service-arrow {
  color: #fff;
  font: 600 13px/1 var(--mono);
}
.service-url {
  display: flex;
  width: min(100%, 280px);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--carbon);
  background: var(--paper);
  font: 500 12px/1.2 var(--mono);
}
.service-lock {
  position: relative;
  width: 10px;
  height: 8px;
  margin-top: 4px;
  flex: none;
  background: var(--carbon);
}
.service-lock::before {
  position: absolute;
  bottom: 100%;
  left: 2px;
  width: 6px;
  height: 5px;
  border: 1.5px solid var(--carbon);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  box-sizing: border-box;
  content: "";
}
.service-url span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
  font: 600 10px/1 var(--mono);
  text-transform: uppercase;
}
.service-live::before {
  width: 7px;
  height: 7px;
  background: var(--blue);
  content: "";
}
.services.is-live .service-live::before {
  animation: service-pulse 1.6s ease-in-out infinite;
}
/* One-off entrance for the bands: ticks stamp in, the flow ends on the invoice. */
.service-chip b,
.service-arrow,
.service-chip--done {
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.6, 1) var(--d, 0s), opacity 0.3s ease var(--d, 0s);
}
.js .services:not(.is-in) .service-chip b {
  transform: scale(0);
}
.js .services:not(.is-in) .service-arrow {
  opacity: 0;
}
.js .services:not(.is-in) .service-chip--done {
  opacity: 0;
  transform: translateX(-8px);
}
.services-dots {
  display: none;
}
@keyframes service-pulse {
  50% { opacity: 0.25; }
}

@media (max-width: 960px) {
  .services {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 701px) and (max-width: 960px) {
  .service {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .service-band {
    grid-row: 1 / 3;
    border-right: 1px solid var(--carbon);
    border-bottom: 0;
  }
  .service h2 {
    padding-top: 22px;
  }
}
@media (max-width: 700px) {
  .hero-stage {
    padding: 16px 14px;
  }
  .fit-rows li {
    min-height: 38px;
    padding-block: 8px;
  }
  .hero-body {
    padding: 18px 20px 20px;
  }
  .hero-body strong {
    margin: 0;
    font-size: 25px;
  }
  /* Phones: the window says it; the sentence stays on desktop. */
  .hero-body p {
    display: none;
  }
  /* Phones: the services side by side, swiped like cards, with the next one
     peeking in so it is obvious there is more. */
  .services {
    grid-template-columns: none;
    grid-auto-columns: 82%;
    grid-auto-flow: column;
    margin: 40px -16px 0;
    padding: 0 16px 14px;
    overflow-x: auto;
    border: 0;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .services::-webkit-scrollbar {
    display: none;
  }
  .service {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--carbon);
    scroll-snap-align: start;
  }
  .service + .service {
    margin-left: -1px;
  }
  .service-band {
    min-height: 64px;
    padding: 12px 10px;
  }
  .service-chips {
    gap: 5px;
  }
  .service-chip {
    gap: 5px;
    padding: 5px 6px;
    letter-spacing: 0.02em;
  }
  .service h2 {
    padding: 16px 18px 8px;
  }
  .service p {
    padding: 0 18px 20px;
    font-size: 18px;
  }
  .js .services-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
  }
  .services-dots i {
    width: 18px;
    height: 3px;
    background: var(--rule);
    transition: background-color 0.2s ease;
  }
  .services-dots i.is-on {
    background: var(--blue);
  }
}

.section {
  padding: clamp(80px, 9vw, 120px) 0;
  border-bottom: 1px solid var(--carbon);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(160px, 0.35fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 50px;
}
.section-head .eyebrow {
  align-self: start;
}
.section-head h2 {
  max-width: 850px;
  margin-bottom: 18px;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.07;
  letter-spacing: -0.035em;
}
.section-head p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

.process-section {
  background: var(--stock);
}
.step-number {
  color: var(--blue);
}

/* Process: one step at a time, story style. Without JS all four steps stack.
   Phones: progress bars inside the card, tap to advance.
   Desktop: step list on the left, card on the right. */
.story {
  --story-step: 6s;
}
.story-tabs {
  display: none;
}
.story-panels {
  display: grid;
  gap: 20px;
}
.story-panel {
  border: 1px solid var(--carbon);
  background: var(--paper);
}
.story-visual {
  display: grid;
  min-height: 220px;
  place-items: center;
  padding: 24px 20px;
  border-bottom: 1px solid var(--carbon);
  background-color: var(--stock);
  background-image:
    linear-gradient(rgb(188 185 175 / 35%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(188 185 175 / 35%) 1px, transparent 1px);
  background-size: 20px 20px;
}
.story-copy {
  padding: 20px 20px 24px;
}
.story-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 8px;
  background: var(--gold);
  font: 600 11px/1.4 var(--mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.story-tag--build {
  background: var(--blue);
  color: #fff;
}
.story-copy h3 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.story-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.story-nav {
  display: none;
}
.js .story-panels {
  gap: 0;
}
.js .story-panel {
  grid-area: 1 / 1;
  border: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.js .story-panel.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.js .story-stage {
  border: 1px solid var(--carbon);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--blue);
}
.js .story-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 20px;
}
.story-count {
  flex: 1;
  font: 600 12px/1 var(--mono);
}
.story-btn {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--carbon);
  background: transparent;
  color: var(--carbon);
  cursor: pointer;
  font: 600 18px/1 var(--sans);
}
.story-btn:hover {
  background: var(--carbon);
  color: var(--paper);
}
.js .story-tabs {
  display: grid;
}
.story-tab {
  position: relative;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.story-bar {
  position: relative;
  display: block;
  overflow: hidden;
  height: 3px;
  background: var(--rule);
}
.story-bar i {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
}
.story-tab.is-done .story-bar i,
.story-tab[aria-selected="true"] .story-bar i {
  transform: scaleX(1);
}
.story.is-playing .story-tab[aria-selected="true"] .story-bar i {
  animation: story-fill var(--story-step) linear forwards;
}
.story.is-paused .story-bar i {
  animation-play-state: paused !important;
}

@media (max-width: 960px) {
  .js .story {
    position: relative;
  }
  .js .story-tabs {
    position: absolute;
    z-index: 2;
    top: 1px;
    right: 1px;
    left: 1px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 0 12px;
  }
  .story-tab {
    padding: 12px 0;
  }
  .story-tab .step-number,
  .story-tab-title {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .js .story-visual {
    padding-top: 40px;
  }
}

@media (min-width: 961px) {
  .js .story {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .js .story-tabs {
    border-top: 1px solid var(--carbon);
  }
  .story-tab {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: baseline;
    padding: 22px 0 0;
  }
  .story-tab .story-bar {
    order: 3;
    grid-column: 1 / -1;
    height: 2px;
    margin-top: 22px;
  }
  .story-tab-title {
    color: var(--muted);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
  }
  .story-tab:hover .story-tab-title,
  .story-tab[aria-selected="true"] .story-tab-title {
    color: var(--carbon);
  }
  .story-visual {
    min-height: 260px;
  }
  .story-copy {
    padding: 24px 28px 26px;
  }
  .js .story-nav {
    padding: 0 28px 24px;
  }
}

/* Small illustrative mock-ups of what each step produces. */
.mock {
  position: relative;
  width: min(100%, 310px);
  border: 1px solid var(--carbon);
  background: var(--paper);
  font-size: 14px;
  line-height: 1.4;
}
.mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--carbon);
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mock-head i {
  width: 34px;
  height: 6px;
  background: radial-gradient(circle, var(--carbon) 0 3px, transparent 3.5px) 0 0 / 12px 6px;
}
.mock-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mock-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}
.mock-list li + li {
  border-top: 1px solid var(--rule);
}
.mock-tag {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  color: var(--muted);
  font: 600 10px/1.4 var(--mono);
  text-transform: uppercase;
}
.mock-tag--blue {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.mock--sketch {
  border-style: dashed;
}
.mock-body {
  padding: 14px 12px 34px;
}
.mock-label {
  margin: 0 0 10px;
  color: var(--muted);
  font: 600 10px/1.4 var(--mono);
  text-transform: uppercase;
}
.mock-bar {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mock-bar i {
  display: block;
  width: var(--w);
  height: 14px;
  border: 1px solid var(--carbon);
  background: var(--rule);
  transform-origin: left;
}
.mock-bar i.is-blue {
  background: var(--blue);
}
.mock-stamp {
  position: absolute;
  right: 12px;
  bottom: -14px;
  padding: 5px 9px;
  border: 2px solid var(--blue);
  background: var(--paper);
  color: var(--blue);
  font: 600 12px/1.2 var(--mono);
  text-transform: uppercase;
  transform: rotate(-6deg);
}
.mock--term {
  background: var(--carbon);
  color: var(--paper);
}
.mock--term .mock-head {
  border-color: #4a4a42;
}
.mock--term .mock-head i {
  background-image: radial-gradient(circle, var(--paper) 0 3px, transparent 3.5px);
}
.mock-term {
  margin: 0;
  padding: 12px 14px 16px;
  list-style: none;
  font: 500 13px/1.9 var(--mono);
}
.mock-term b {
  color: var(--gold);
}
.mock-term li:last-child::after {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 6px;
  background: var(--gold);
  content: "";
  vertical-align: -2px;
}
.mock--live {
  border: 0;
  background: none;
}
.mock-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--carbon);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--carbon);
}
.mock-check {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.mock-toast strong {
  display: block;
  font-size: 15px;
}
.mock-toast span:not(.mock-check) {
  color: var(--muted);
  font-size: 13px;
}
.mock-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 0;
}
.mock-stats div {
  padding: 10px 12px;
  border: 1px solid var(--carbon);
  background: var(--paper);
}
.mock-stats dt {
  color: var(--muted);
  font: 600 10px/1.4 var(--mono);
  text-transform: uppercase;
}
.mock-stats dd {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* Mock-ups replay their animation each time their step becomes active. */
.is-active .mock-list li {
  animation: story-in 0.4s ease both;
}
.is-active .mock-list li:nth-child(2) {
  animation-delay: 0.25s;
}
.is-active .mock-list li:nth-child(3) {
  animation-delay: 0.5s;
}
.is-active .mock-list .mock-tag {
  animation: story-stamp 0.35s cubic-bezier(0.3, 1.6, 0.6, 1) both 0.9s;
}
.is-active .mock-list li:nth-child(2) .mock-tag {
  animation-delay: 1.05s;
}
.is-active .mock-list li:nth-child(3) .mock-tag {
  animation-delay: 1.2s;
}
.is-active .mock-bar i {
  animation: story-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.2s;
}
.is-active .mock-bar + .mock-bar i {
  animation-delay: 0.6s;
}
.is-active .mock-stamp {
  animation: story-stamp-tilted 0.4s cubic-bezier(0.3, 1.6, 0.6, 1) both 1.4s;
}
.is-active .mock-term li {
  animation: story-type 0.45s steps(14, end) both;
}
.is-active .mock-term li:nth-child(2) {
  animation-delay: 0.6s;
}
.is-active .mock-term li:nth-child(3) {
  animation-delay: 1.1s;
}
.is-active .mock-term li:nth-child(4) {
  animation-delay: 1.6s;
}
.is-active .mock-term li:last-child::after {
  animation: story-blink 1s steps(2, jump-none) infinite 2.1s;
}
.is-active .mock-toast {
  animation: story-drop 0.5s cubic-bezier(0.3, 1.4, 0.6, 1) both 0.2s;
}
.is-active .mock-stats div {
  animation: story-in 0.4s ease both 0.8s;
}
.is-active .mock-stats div + div {
  animation-delay: 1s;
}

@keyframes story-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes story-in {
  from { opacity: 0; transform: translateY(8px); }
}
@keyframes story-stamp {
  from { opacity: 0; transform: scale(1.5); }
}
@keyframes story-stamp-tilted {
  from { opacity: 0; transform: rotate(-6deg) scale(1.8); }
}
@keyframes story-grow {
  from { transform: scaleX(0); }
}
@keyframes story-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes story-blink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes story-drop {
  from { opacity: 0; transform: translateY(-16px); }
}

.consulting-section {
  background: var(--paper);
}

/* Consulting: "Prepoznajete li se?" The visitor picks the sentence that sounds
   like them (a highlighter marks it) and gets my answer plus the service.
   Cycles on its own until the first tap. Without JS every sentence is listed
   with its answer. Phones: sentences above the answer. Desktop: side by side. */
.mirror {
  border: 1px solid var(--carbon);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--blue);
}
.mirror-q {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--carbon);
}
.mirror-q::before {
  width: 8px;
  height: 8px;
  background: var(--gold);
  content: "";
}
.mirror-list {
  padding: 6px 0;
}
.mirror-opt {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 14px;
  padding: 6px 16px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: 500 18px/1.3 var(--sans);
  letter-spacing: -0.01em;
  text-align: left;
}
.mirror-opt::before {
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid var(--carbon);
  background: var(--paper);
  content: "";
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.mirror-opt:hover,
.mirror-opt[aria-checked="true"] {
  color: var(--carbon);
}
.mirror-opt[aria-checked="true"]::before {
  background: var(--carbon);
  box-shadow: inset 0 0 0 3px var(--paper);
}
/* Highlighter swipe behind the chosen sentence. */
.mirror-opt span {
  padding: 0 2px;
  background: linear-gradient(var(--gold), var(--gold)) 0 88% / 0 42% no-repeat;
  transition: background-size 0.45s cubic-bezier(0.6, 0, 0.2, 1);
}
.mirror-opt[aria-checked="true"] span {
  background-size: 100% 42%;
}
.mirror-answers {
  position: relative;
  display: grid;
  border-top: 1px solid var(--carbon);
  background-color: var(--stock);
  background-image:
    linear-gradient(rgb(188 185 175 / 35%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(188 185 175 / 35%) 1px, transparent 1px);
  background-size: 20px 20px;
}
.mirror-a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  padding: 20px 16px 24px;
}
.mirror-a img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  box-shadow: 3px 3px 0 var(--blue);
}
.mirror-reply {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.mirror-detail {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.mirror-tag {
  display: inline-block;
  padding: 3px 8px;
  background: var(--blue);
  color: #fff;
  font: 600 11px/1.4 var(--mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.mirror-quote,
.mirror-timer {
  display: none;
}

/* With JS: one answer at a time, all stacked in one cell so nothing jumps. */
.js .mirror-a {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.js .mirror-a.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}
.js .mirror-a.is-active .mirror-tag {
  animation: story-stamp 0.35s cubic-bezier(0.3, 1.6, 0.6, 1) both 0.35s;
}
.js .mirror.is-playing .mirror-timer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 3px;
}
.mirror-timer i {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
}
.mirror.is-playing .mirror-timer i {
  animation: story-fill 5s linear forwards;
}
.mirror.is-paused .mirror-timer i {
  animation-play-state: paused;
}
html:not(.js) .mirror-list {
  display: none;
}
html:not(.js) .mirror-quote {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
}
html:not(.js) .mirror-a + .mirror-a {
  border-top: 1px solid var(--rule);
}

@media (min-width: 961px) {
  .mirror {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .mirror-pick {
    padding-bottom: 14px;
  }
  .mirror-q {
    padding: 16px 28px;
  }
  .mirror-list {
    padding: 14px 0;
  }
  .mirror-opt {
    min-height: 56px;
    padding: 8px 28px;
    font-size: 21px;
  }
  .mirror-answers {
    border-top: 0;
    border-left: 1px solid var(--carbon);
  }
  .mirror-a {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    align-content: center;
    padding: 40px 36px;
  }
  .mirror-a img {
    width: 56px;
    height: 56px;
  }
  .mirror-reply {
    font-size: 32px;
    letter-spacing: -0.03em;
  }
  .mirror-detail {
    font-size: 17px;
  }
}

.consulting-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 36px;
}
.consulting-cta a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 12px 18px;
  background: var(--carbon);
  color: var(--paper);
  font: 600 12px/1.4 var(--mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
}
.consulting-cta a:hover {
  background: var(--blue);
  color: #fff;
}
.consulting-cta span {
  color: var(--muted);
  font-size: 15px;
}

.about-section {
  background: var(--stock);
}
.about-section .section-head {
  margin-bottom: 0;
}
.about-detail {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.about-detail img {
  display: block;
  width: 165px;
  max-width: 100%;
  height: auto;
  box-shadow: 8px 8px 0 var(--blue);
}
.about-copy p {
  max-width: 780px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 18px;
}
.about-copy p:last-child {
  margin-bottom: 0;
}

.blog-section {
  background: var(--carbon);
  color: var(--paper);
}
.blog-section .eyebrow::before {
  background: var(--gold);
}
.blog-section .section-head h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.07;
  letter-spacing: -0.035em;
}
.blog-section .section-head p {
  color: #cbc9bd;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.blog-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid #76766e;
}
.blog-card time {
  display: block;
  color: var(--gold);
}
.blog-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 20px;
}
.example-label {
  color: #ceccc1;
}
.blog-card-link {
  display: block;
  text-decoration: none;
}
.blog-card:focus-within {
  border-color: var(--gold);
}
.blog-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  margin-bottom: 22px;
  object-fit: cover;
}
.blog-card h2 {
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.blog-card p {
  margin: 0;
  color: #ceccc1;
  font-size: 16px;
}
.blog-section a:hover {
  color: var(--gold);
}
.blog-section :focus-visible {
  outline-color: var(--gold);
}
.blog-empty {
  max-width: 640px;
  padding-block: 32px;
  border-top: 1px solid #76766e;
}
.blog-empty .mono {
  color: var(--gold);
}
.blog-empty h2,
.related-heading h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.blog-empty > p:last-child {
  margin: 0;
  color: #ceccc1;
}
.related-heading {
  margin-bottom: 36px;
}
.related-heading .eyebrow {
  margin-bottom: 16px;
}
.related-heading h2 {
  margin: 0;
}

/* Articles: decorative cover, quiet reading surface, reusable content primitives. */
.article-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--carbon);
  color: var(--paper);
}
.article-hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.article-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgb(28 28 22 / 96%), rgb(28 28 22 / 86%) 52%, rgb(28 28 22 / 69%));
  content: "";
}
.article-hero-inner {
  padding-block: 30px clamp(60px, 7vw, 96px);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 12px/1.6 var(--mono);
}
.breadcrumbs li + li::before {
  margin-right: 8px;
  color: var(--rule);
  content: "/";
}
.breadcrumbs a {
  text-decoration: none;
}
.breadcrumbs [aria-current] {
  color: var(--rule);
}
.article-heading {
  max-width: 960px;
  margin-top: clamp(60px, 7vw, 100px);
}
.article-byline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
}
.article-byline > img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid rgb(250 247 238 / 40%);
}
.article-author-role {
  display: block;
  margin-top: 3px;
  color: #ceccc1;
  font-size: 13px;
}
.article-heading h1 {
  margin: 26px 0 24px;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: #ceccc1;
}
.article-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgb(250 247 238 / 25%);
  list-style: none;
  color: var(--gold);
  font-size: 14px;
}
.article-hero a:hover {
  color: var(--gold);
}
.article-hero :focus-visible {
  outline-color: var(--gold);
}
.article-reading-area {
  background: var(--paper);
  border-bottom: 1px solid var(--carbon);
}
.article-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  justify-content: center;
  align-items: start;
  gap: clamp(32px, 6vw, 88px);
  padding-block: clamp(48px, 6vw, 80px) clamp(72px, 8vw, 110px);
}
.article-layout-no-toc {
  grid-template-columns: minmax(0, 760px);
}
.article-sidebar {
  position: sticky;
  top: 110px;
}
.article-toc {
  border-top: 2px solid var(--blue);
  padding-top: 18px;
}
.article-toc summary {
  cursor: pointer;
}
.article-toc ol {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
}
.article-toc a {
  color: var(--muted);
  text-decoration: none;
}
.article-toc a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.article-column {
  min-width: 0;
}
.article-example-notice {
  margin-bottom: 36px;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  background: var(--stock);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.article-example-notice strong {
  display: block;
  margin-bottom: 4px;
  color: var(--carbon);
}
.article-body {
  font-size: 18px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.article-body p,
.article-body ul,
.article-body ol {
  margin: 0 0 24px;
}
.article-body .article-lead {
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.5;
  letter-spacing: -0.015em;
}
.article-body h2,
.article-body h3,
.article-body [id] {
  scroll-margin-top: 14px;
}
.article-body h2 {
  margin: 64px 0 22px;
  font-size: clamp(29px, 3vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.03em;
}
.article-body h3 {
  margin: 36px 0 16px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.article-body ul,
.article-body ol {
  padding-left: 1.4em;
}
.article-body li + li {
  margin-top: 10px;
}
.article-body li::marker {
  color: var(--blue);
}
.article-body a,
.article-end a {
  color: var(--blue);
  text-decoration-thickness: 1px;
}
.article-body a:hover,
.article-end a:hover {
  color: var(--carbon);
}
.article-body sup {
  margin-left: 2px;
  font-size: 0.7em;
  line-height: 0;
}
.article-callout {
  margin: 36px 0;
  padding: 24px 28px;
  border-left: 4px solid var(--blue);
  background: var(--stock);
}
.article-callout > .mono {
  margin-bottom: 14px;
  color: var(--blue);
}
.article-callout > :last-child {
  margin-bottom: 0;
}
.article-body blockquote {
  margin: 36px 0;
  padding: 8px 0 8px 28px;
  border-left: 2px solid var(--blue);
}
.article-body blockquote p {
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.article-body cite {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
}
.article-body figure {
  margin: 36px 0;
}
.article-body figure > img,
.article-body figure > svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}
.article-body figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.article-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 30px 0;
  overscroll-behavior-inline: contain;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
}
.article-body caption {
  padding-bottom: 14px;
  color: var(--muted);
  text-align: left;
  font-size: 14px;
}
.article-body th,
.article-body td {
  min-width: 160px;
  padding: 15px 16px;
  vertical-align: top;
  border: 1px solid var(--rule);
}
.article-body thead,
.article-body tfoot {
  background: var(--stock);
}
.article-body th {
  font-weight: 600;
}
.article-chart {
  background: var(--paper);
}
.article-chart svg {
  display: block;
  width: 100%;
  min-width: 520px;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--stock);
  font-family: var(--sans);
}
.article-chart-plot {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.chart-grid {
  stroke: var(--rule);
  stroke-width: 1;
}
.chart-kicker {
  fill: var(--muted);
  font: 500 12px var(--mono);
}
.chart-label,
.chart-value {
  fill: var(--carbon);
  font-size: 18px;
}
.chart-value {
  font-weight: 600;
}
.chart-axis {
  fill: var(--muted);
  font-size: 14px;
  text-anchor: middle;
}
.chart-bar-manual {
  fill: var(--carbon);
}
.chart-bar-assisted {
  fill: var(--blue);
}
.article-chart-data {
  margin: 24px 0 36px;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  font-size: 16px;
}
.article-chart-data summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 500;
}
.article-chart-data > :last-child:not(summary) {
  margin-bottom: 0;
}
.article-body code {
  padding: 2px 5px;
  background: var(--stock);
  font-family: var(--mono);
  font-size: 0.8em;
}
.article-code {
  margin: 30px 0;
  background: var(--carbon);
  color: var(--paper);
}
.article-code > .mono {
  margin: 0;
  padding: 14px 22px;
  border-bottom: 1px solid #76766e;
  color: #ceccc1;
}
.article-code pre {
  overflow-x: auto;
  margin: 0;
  padding: 22px;
  overscroll-behavior-inline: contain;
  line-height: 1.7;
}
.article-code code {
  padding: 0;
  background: none;
  font-size: 13px;
  overflow-wrap: normal;
}
.article-body .article-checklist {
  padding-left: 1.5em;
  list-style-type: "✓  ";
}
.article-body .article-references {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.article-end {
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--carbon);
}
.article-author-note {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}
.article-author-note img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}
.article-author-note .mono {
  margin: 0 0 6px;
  color: var(--muted);
}
.article-author-note strong {
  font-size: 20px;
}
.article-author-note strong a {
  color: var(--carbon);
  text-decoration: none;
}
.article-author-note p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
}
.article-contact {
  margin: 30px 0;
  padding: 24px 0;
  border-block: 1px solid var(--rule);
}
.article-contact p {
  margin-bottom: 8px;
}
.article-back-link {
  font-size: 15px;
}

.site-footer {
  padding: 30px 0;
  background: var(--carbon);
  color: var(--paper);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  font: 600 12px/1.5 var(--mono);
}
.footer-identity {
  display: grid;
  gap: 4px;
}
.footer-identity span:first-child {
  color: var(--rule);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
.site-footer a {
  color: var(--paper);
}
.site-footer a:hover {
  color: var(--gold);
}

@media (max-width: 960px) {
  .section-head {
    grid-template-columns: 1fr;
  }
  /* One column; a card's content must never push the page wider. */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-card {
    max-width: 560px;
  }
  .section-head {
    gap: 20px;
  }
  .article-layout {
    grid-template-columns: minmax(0, 760px);
    gap: 36px;
  }
  .article-sidebar {
    position: static;
  }
  .article-toc {
    padding-block: 18px;
    border-bottom: 1px solid var(--rule);
  }
}

@media (max-width: 760px) {
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }
}

@media (max-width: 700px) {
  html {
    scroll-padding-top: 96px;
  }
  html:not(.js) {
    scroll-padding-top: 190px;
  }
  .wrap {
    width: calc(100% - 32px);
  }
  .header-inner {
    gap: 16px;
    flex-wrap: wrap;
  }
  .js .header-inner {
    flex-wrap: nowrap;
  }
  .js .menu-toggle {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--carbon);
    background: transparent;
    color: var(--carbon);
    cursor: pointer;
    font: 600 12px/1.4 var(--mono);
  }
  .menu-icon {
    width: 18px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }
  .site-header nav {
    width: 100%;
    gap: 0 16px;
    padding-bottom: 12px;
  }
  .js .site-header nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    border-bottom: 1px solid var(--carbon);
    background: var(--stock);
  }
  .js .site-header:not(.menu-open) nav {
    display: none;
  }
  .site-header nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    margin: 0;
    padding: 12px 8px;
    border-top: 1px solid var(--rule);
  }
  .site-header nav a:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: -3px;
  }
  .hero {
    padding-top: 44px;
  }
  .hero-grid {
    gap: 36px;
  }
  .hero h1 {
    margin: 18px 0 20px;
    font-size: clamp(42px, 10vw, 64px);
  }
  .hero-copy .hero-lead {
    margin-bottom: 16px;
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .about-detail {
    grid-template-columns: 1fr;
  }
  .article-hero-inner {
    padding-top: 24px;
  }
  .article-heading {
    margin-top: 48px;
  }
  .article-body {
    font-size: 17px;
  }
  .article-body h2 {
    margin-top: 48px;
  }
  .article-callout,
  .article-example-notice {
    padding: 20px;
  }
  .article-author-note {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
  }
  .article-author-note img {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .story *,
  .story *::after,
  .mirror *,
  .mirror *::before,
  .hero-card *,
  .services *,
  .services *::before {
    animation: none !important;
    transition: none !important;
  }
}