/* ==========================================================================
   sections.css — stilovi po sekcijama
   ========================================================================== */

/* --------------------------------------------------------------------------
   Platno: fiksna mreza preko koje ceo sajt klizi.
   Tri sloja u tri tona. Providnost slojeva vodi skrol, pa boja platna
   putuje zajedno sa pricom umesto da se prelama na ivici sekcije.
   -------------------------------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Bez JS-a nema secenja slojeva, pa platno tada uopste ne izlazi na scenu.
   Sekcije i dalje nose svoje boje, sajt izgleda mirno i tacno. */
html:not(.is-loaded) .backdrop { display: none; }

.backdrop__tone {
  position: absolute;
  inset: 0;
  background-color: var(--tone-bg);
}

.backdrop__grid {
  position: absolute;
  inset: -80px;
  background-image:
    linear-gradient(to right, var(--tone-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tone-line) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(125% 95% at 50% 42%, #000 32%, transparent 100%);
  transform: translate3d(var(--par-x, 0px), var(--par-y, 0px), 0);
  will-change: transform;
}

.backdrop__tone[data-tone-layer="paper"] {
  --tone-bg: #F8F5F1;
  --tone-line: #E8E3DB;
}

/* Tamni slojevi se seku tacno na granicu svoje sekcije, pa boja platna
   uvek stoji tamo gde i sadrzaj kome pripada. JS postavlja clip-path. */
.backdrop__tone[data-tone-layer="ink"] {
  --tone-bg: #1C1B19;
  --tone-line: #34322E;
  clip-path: inset(100% 0 0 0);
}

.backdrop__tone[data-tone-layer="deep"] {
  --tone-bg: #111111;
  --tone-line: #262421;
  clip-path: inset(100% 0 0 0);
}

/* Bez JS-a platno ostaje na paper tonu i to je tacno kako treba */

/* --------------------------------------------------------------------------
   Linija koja vodi kroz sajt
   Stoji iznad mreze, ispod teksta. Crta je skrol, tacke pukne kad ih dodirne.
   -------------------------------------------------------------------------- */

.thread {
  position: absolute;
  top: 0;
  left: 0;
  /* Sekcije su position: relative, pa bi na sloju 0 njihova pozadina prekrila
     liniju. Na sloju 1 linija je iznad pozadina, a i dalje ispod sadrzaja,
     jer .wrap ima isti sloj i dolazi kasnije u dokumentu. */
  z-index: 1;
  width: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.thread.is-ready { opacity: 1; }

.thread__path {
  fill: none;
  stroke: var(--copula-orange);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}

.thread__node {
  fill: var(--copula-orange);
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.thread__node.is-on {
  opacity: 1;
  transform: scale(1);
}

.thread__head { opacity: 0; transition: opacity var(--dur-micro) linear; }
.thread__dot { fill: var(--copula-orange); }
.thread__halo { fill: var(--copula-orange); opacity: 0.16; }

@media (prefers-reduced-motion: reduce) {
  .thread__path { opacity: 0.5; }
  .thread__head { display: none; }
  .thread__node { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   00. Nav + scroll progress
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 120;
  width: 100%;
  height: 2px;
  background: var(--copula-orange);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.nav {
  position: fixed;
  top: 0; left: 0;
  z-index: 110;
  width: 100%;
  padding-block: var(--space-4);
  color: var(--text-primary);
  transition: color var(--dur-base) var(--ease);
}

/* Tanak sloj iza nav-a, da tekst ne prolazi kroz logo pri skrolu */
.nav::before {
  content: "";
  position: absolute;
  inset: -12px 0 -64px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--nav-scrim, #F8F5F1) 52%, transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

body.is-scrolled .nav::before { opacity: 1; }

/* Nav uzima ton onoga sto je tacno ispod njega */
body[data-nav-tone="ink"] .nav,
body[data-nav-tone="deep"] .nav { color: var(--paper); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav__logo {
  display: block;
  width: 38px;
  transition: transform var(--dur-micro) var(--ease);
}

.nav__logo svg { width: 100%; height: auto; }

/* Crni deo znaka prati ton stranice, narandzasti ostaje narandzast */
.nav__logo .mark-ink { fill: currentColor; }
.nav__logo .mark-orange { fill: var(--copula-orange); }

.nav__logo:hover { transform: translateY(-2px); }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.nav__link {
  position: relative;
  padding-block: var(--space-2);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--copula-orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-micro) var(--ease);
}

.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Stalni CTA, vidljiv na svakom ekranu i na svakoj sekciji */
.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--copula-orange);
  color: var(--copula-ink);
  font-weight: var(--weight-bold);
  transition:
    background-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}

.nav__cta:hover {
  background: var(--orange-400);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .nav__link--work { display: none; }
  .nav__links { gap: var(--space-4); }
}

/* --------------------------------------------------------------------------
   01. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* nav je 74px. Na visokom ekranu ostaje vazduh, na niskom se sam skuplja,
     pa dugme ostaje iznad prevoja i na 800px visine. */
  padding-block: clamp(72px, 10vh, 104px) 56px;
}

.hero__inner { position: relative; width: 100%; }

.hero__title {
  font-size: clamp(3rem, 9vw, 9.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-6);
  text-wrap: initial;
}

.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em; /* da descender ne bude odsecen maskom */
}

.line > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-enter) var(--ease);
  transition-delay: var(--line-delay, 0ms);
}

.is-loaded .line > span { transform: translateY(0); }
.no-js .line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .line > span { transform: none !important; }
}

.hero__accent {
  color: var(--copula-orange);
  font-style: normal;
}

.hero__lead {
  max-width: 58ch;
  margin-bottom: var(--space-8);
}

/* Jedan poziv na akciju, u osi ekrana */
.hero__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

/* --------------------------------------------------------------------------
   02. Prelaz — predah
   -------------------------------------------------------------------------- */

.statement {
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-block: clamp(96px, 18vh, 200px);
}

.statement__text {
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
  max-width: 18ch;
}

.statement__text span { display: block; color: var(--text-secondary); }
.statement__text span + span { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   03. Radovi — dokaz
   -------------------------------------------------------------------------- */

.work {
  position: relative;
  padding-block: clamp(96px, 12vh, 160px);
}

.work__pin { position: relative; }

.work__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5, 20px);
  margin-bottom: var(--space-12);
}

.work__head h2 {
  font-size: clamp(2.75rem, 4.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.work__head .plate { max-width: 36ch; }

.work__sub {
  font-size: var(--size-lg);
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 42ch;
}

.work__cta { margin-top: var(--space-2); }

.work__viewport { position: relative; }

.work__track {
  display: grid;
  gap: var(--space-8);
  max-width: 720px;
  will-change: transform;
}

.work__track > li { min-width: 0; }

.card {
  position: relative;
  display: block;
  border: 1px solid #33312E;
  border-radius: 18px;
  background: #232220;
  padding: clamp(12px, 1.2vw, 18px);
  color: var(--paper);
  transition:
    transform var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--copula-orange);
  background: #282624;
}

/* Rad se prikazuje kao sajt, ne kao slika u okviru */
.card__media {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink-700);
  padding-top: 34px;
}

.card__media::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  background:
    radial-gradient(circle at 18px 17px, #4A4640 3.5px, transparent 4px),
    radial-gradient(circle at 36px 17px, #4A4640 3.5px, transparent 4px),
    radial-gradient(circle at 54px 17px, #4A4640 3.5px, transparent 4px),
    #2E2C29;
  z-index: 1;
}

/* Ceo prikaz sajta se vidi, nista se ne sece */
.card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-enter) var(--ease);
}

.card:hover .card__media img { transform: scale(1.025); }

.card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-3) var(--space-3);
}

.card__name {
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: var(--weight-medium);
  letter-spacing: -0.015em;
}

.card__type {
  margin-left: auto;
  padding: 6px var(--space-4);
  border: 1px solid #3A3733;
  border-radius: var(--radius-pill);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-300);
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease);
}

.card:hover .card__type { border-color: #55504A; }

/* Strelica govori da kartica vodi negde */
.card__body::after {
  content: "\2192";
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2E2C29;
  color: var(--ink-300);
  font-size: var(--size-lg);
  transition:
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}

.card:hover .card__body::after {
  background: var(--copula-orange);
  color: var(--copula-ink);
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .card__type { display: none; }
}

/* Horizontalna galerija postoji samo kada je skrol-animacija zaista aktivna.
   Klasu .has-hscroll postavlja motion.js, i to samo na sirokom ekranu i kada
   GSAP radi. Svuda drugde ostaje obican vertikalni stack, bez pinovanja. */
@media (min-width: 1024px) {
  .has-hscroll .work__pin {
    display: grid;
    grid-template-columns: minmax(260px, 20vw) 1fr;
    gap: clamp(40px, 4vw, 72px);
    align-items: center;
    min-height: 100svh;
    /* Pinovan sadrzaj mora da prodje ispod nav-a, inace mu nav odsece vrh */
    padding-block: 92px 44px;
  }

  .has-hscroll .work__head { margin-bottom: 0; }

  /* Galerija probija kontejner do same desne ivice ekrana, da bi cela kartica
     stala u vidno polje. Levo se kartice stope sa platnom, ne seku na ivici. */
  .has-hscroll .work__viewport {
    overflow: hidden;
    /* Procenat bi se racunao od kolone, ne od strane, pa je galerija ispadala
       sira od ekrana. Ovako ide tacno do ivice: pola razlike do kontejnera
       plus njegov unutrasnji razmak. */
    margin-right: calc(-1 * ((100vw - min(1240px, 100vw)) / 2 + 48px));
    mask-image: linear-gradient(to right, transparent 0, #000 56px);
  }

  /* Sirina kartice ima dva ogranicenja. Prvo je sirina ekrana, drugo je
     njegova visina: kartica je visoka otprilike sirina/1.6 plus 150px, pa na
     niskom laptopu mora da se povuce da ne bi ispala iz pinovanog ekrana. */
  .has-hscroll .work__track {
    grid-auto-flow: column;
    grid-auto-columns: min(
      clamp(600px, 62vw, 1180px),
      calc((100svh - 270px) * 1.62)
    );
    gap: var(--space-12);
    max-width: none;
  }
}

/* Nizak laptop: naslov i tekst se povlace da bi cela sekcija stala na ekran */
@media (min-width: 1024px) and (max-height: 800px) {
  .has-hscroll .work__head { gap: var(--space-3); }

  .has-hscroll .work__head h2 {
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1.04;
  }

  .has-hscroll .work__sub {
    font-size: var(--size-base);
    max-width: 38ch;
  }

  .has-hscroll .work__head .plate { font-size: var(--size-sm); }

  .has-hscroll .work__cta { min-height: 46px; }
}

/* Custom kursor — samo uredjaji sa pravim hover-om */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 130;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--copula-orange);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity var(--dur-micro) var(--ease);
  display: none;
}

.cursor__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--size-sm);
  font-weight: var(--weight-bold);
  color: var(--copula-ink);
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease);
}

.cursor__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--copula-orange);
  transform: scale(1);
  transition: transform var(--dur-base) var(--ease);
}

.cursor.is-on { opacity: 1; }
.cursor.is-hot .cursor__ring { transform: scale(5.2); }
.cursor.is-hot .cursor__label { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
  .work.is-cursor-area:hover { cursor: none; }
  .work.is-cursor-area:hover .card { cursor: none; }
}

/* --------------------------------------------------------------------------
   04. Genericki vs Copula — argument
   -------------------------------------------------------------------------- */

.compare__head { max-width: 52ch; }

.compare__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-12) var(--space-8);
}

.switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.switch__btn {
  min-height: 44px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-500);
  transition:
    background-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
}

.switch__btn[aria-pressed="true"] {
  background: var(--copula-ink);
  color: var(--paper);
}

/* Sitan tekst na narandzastoj mora da bude taman */
.switch__btn[aria-pressed="true"].switch__btn--after {
  background: var(--copula-orange);
  color: var(--copula-ink);
  font-weight: var(--weight-bold);
}

.compare__hint {
  font-size: var(--size-sm);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Pre i posle: dva snimka istog klijenta, jedan preko drugog.
   Skrol pomera sav, brojke iskacu kada nova verzija preuzme ekran.
   -------------------------------------------------------------------------- */

/* Ram i brojke dele isto polje: na sirokom ekranu brojke stoje preko snimka,
   na telefonu ispod njega, jer bi tamo pokrile ceo kadar. */
.compare__stage { position: relative; }

.compare__frame {
  position: relative;
  aspect-ratio: 1240 / 752;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink-100);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.18);
}

.compare__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.compare__top {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 100%);
  will-change: clip-path;
}

.compare__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 2px;
  background: var(--copula-orange);
  pointer-events: none;
  /* kada nova verzija preuzme ceo kadar, rez nema sta da deli */
  opacity: clamp(0, calc((0.97 - var(--p, 0)) * 30), 1);
}

.compare__seam::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--copula-orange);
  box-shadow: 0 6px 18px rgba(251, 67, 0, 0.4);
}

.compare__tag {
  position: absolute;
  top: var(--space-4);
  z-index: 2;
  padding: 6px var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(17, 17, 17, 0.82);
  color: var(--paper);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Oznake prate rez. Kada nova verzija preuzme ceo kadar obe se sklone, da ne
   stoje preko sadrzaja na samom snimku. Koja je verzija u kadru i dalje pise
   na prekidacu iznad rama. */
.compare__tag--before {
  right: calc(var(--p, 0) * 100% + 12px);
  opacity: clamp(0, calc((0.9 - var(--p, 0)) * 12), 1);
}

.compare__tag--after {
  left: calc((1 - var(--p, 0)) * 100% + 12px);
  background: var(--copula-orange);
  color: var(--copula-ink);
  opacity: clamp(0, calc(min(var(--p, 0) - 0.06, 0.9 - var(--p, 0)) * 12), 1);
}

/* --------------------------------------------------------------------------
   Brojke preko nove verzije
   Panel je staklo, ne crna kutija: zamucena podloga pusti fotografiju da se
   nazire, pa broj stoji na snimku umesto da ga secka. Cetiri polja, u svakom
   samo nova vrednost krupno, ispod nje stara sitno, i promena u procentima sa
   strane. Nema linija izmedju polja, razmak radi taj posao.
   -------------------------------------------------------------------------- */

.compare__panel {
  position: absolute;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 3;
  width: min(400px, 54%);
  padding: var(--space-5, 20px) var(--space-6) calc(var(--space-5, 20px) + 2px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(14, 13, 12, 0.62);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 620ms var(--ease),
    transform 620ms var(--ease);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .compare__panel {
    background: rgba(14, 13, 12, 0.42);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }
}

.compare__panel.is-shown { opacity: 1; transform: none; }

.compare__panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-5, 20px);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgba(248, 245, 241, 0.72);
}

/* Tacka koja tiho pulsira, isti znak koji stoji i na dok widgetu */
.compare__panel-title i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copula-orange);
  box-shadow: 0 0 0 4px rgba(251, 67, 0, 0.18);
}

.compare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5, 20px) var(--space-6);
}

.compare__stats li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--space-3);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
  transition-delay: var(--stat-delay, 0ms);
}

.compare__panel.is-shown li { opacity: 1; transform: none; }

.compare__stats b {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgba(248, 245, 241, 0.56);
}

.stat__now {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper);
  white-space: nowrap;
}

/* Promena je jedina narandzasta stvar u panelu, pa oko ide pravo na nju */
.stat__delta {
  /* redosled u HTML-u je vrednost, pa stara vrednost, pa promena, zato se
     promena eksplicitno vraca u red sa krupnim brojem */
  grid-row: 2;
  grid-column: 2;
  justify-self: end;
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--orange-300);
  white-space: nowrap;
}

.stat__was {
  grid-row: 3;
  grid-column: 1 / -1;
  margin-top: 5px;
  font-size: 0.6875rem;
  color: rgba(248, 245, 241, 0.5);
  white-space: nowrap;
}

/* Bez JS-a panel mora da stoji, brojke su deo tvrdnje */
.no-js .compare__panel,
.no-js .compare__stats li { opacity: 1; transform: none; }

/* Plutajuci widget stoji dole desno. Na uzim prozorima ram dolazi tacno do
   njega, pa bi widget sedeo preko poslednje brojke. Tu panel pomeramo ulevo. */
@media (min-width: 721px) and (max-width: 1400px) {
  .compare__panel { right: 104px; }
}

.compare__note {
  margin-top: var(--space-4);
  font-size: var(--size-sm);
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  /* Panel silazi ispod rama. Preko snimka na telefonu ne bi ostalo nista od
     samog dizajna, a njega i poredimo. */
  .compare__panel {
    position: static;
    width: auto;
    margin-top: var(--space-4);
    padding: var(--space-5, 20px);
    border-color: var(--border-hairline);
    background: rgba(17, 17, 17, 0.96);
  }

  .compare__panel-title { margin-bottom: var(--space-4); }
  .compare__stats { gap: var(--space-4) var(--space-5, 20px); }
  .stat__now { font-size: 1.25rem; }

  .compare__tag { padding: 5px var(--space-3); font-size: 0.6875rem; }
  .compare__seam::after { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
}

/* Tri oznake, samo na dobroj verziji */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  min-height: 34px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-size: var(--size-sm);
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
  transition-delay: var(--badge-delay, 0ms);
}

.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--copula-orange);
}

.badges.is-shown .badge { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   05. Saradnja
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--space-16);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
}

.step h3 { font-size: var(--size-xl); }
.step p { color: var(--text-secondary); }

.steps__note {
  margin-top: var(--space-12);
  font-size: var(--size-lg);
}

/* --------------------------------------------------------------------------
   06. O meni
   -------------------------------------------------------------------------- */

.about__inner {
  display: grid;
  gap: var(--space-12);
  align-items: end;
}

@media (min-width: 900px) {
  .about__inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-24);
  }
}

.about__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--ink-100);
  overflow: hidden;
}

.about__photo::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--copula-orange);
  border-radius: var(--radius);
  opacity: 0.55;
  pointer-events: none;
}

.about__photo span {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-6);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-700);
}

.about__text h2 { margin-bottom: var(--space-8); max-width: 16ch; }
.about__text p + p { margin-top: var(--space-4); }
.about__text p { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   07. FAQ
   -------------------------------------------------------------------------- */

.faq__inner {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 900px) {
  .faq__inner { grid-template-columns: 0.7fr 1.3fr; gap: var(--space-24); }
}

.faq__list { border-top: 1px solid var(--border-hairline); }

.faq__item { border-bottom: 1px solid var(--border-hairline); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  padding-block: var(--space-6);
  text-align: left;
  font-size: var(--size-lg);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  transition: color var(--dur-micro) var(--ease);
}

.faq__q:hover { color: var(--text-accent); }

.faq__icon {
  flex: none;
  width: 18px; height: 18px;
  position: relative;
  transition: transform var(--dur-micro) var(--ease);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq__icon::before { width: 100%; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 100%; }

.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__q[aria-expanded="true"] { color: var(--text-accent); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}

.faq__a > div { overflow: hidden; }

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a p {
  padding-bottom: var(--space-6);
  color: var(--text-secondary);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   08. Kontakt
   -------------------------------------------------------------------------- */

.contact__inner {
  display: grid;
  gap: var(--space-16);
}

@media (min-width: 900px) {
  .contact__inner { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
}

.contact h2 {
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 14ch;
}

.contact__side p { color: var(--text-secondary); margin-top: var(--space-6); }

.contact__direct {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.contact__direct a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  transition:
    border-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}

.contact__direct a:hover {
  border-color: var(--copula-orange);
  transform: translateY(-2px);
}

.form { display: grid; gap: var(--space-6); }

.field { display: grid; gap: var(--space-2); }

.field label {
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.field input,
.field textarea {
  width: 100%;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-hairline);
  border-radius: 0;
  color: var(--text-primary);
  font-size: var(--size-lg);
  transition: border-color var(--dur-micro) var(--ease);
}

.field textarea { resize: vertical; min-height: 96px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-300); }

.field input:hover,
.field textarea:hover { border-color: var(--border-strong); }

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--copula-orange);
  outline-offset: 3px;
  border-color: transparent;
}

.form .btn--primary { justify-self: start; }

.form__note { font-size: var(--size-sm); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   09. Watermark
   -------------------------------------------------------------------------- */

.watermark {
  position: relative;
  padding-block: clamp(48px, 8vh, 96px);
  overflow: hidden;
}

/* Sjaj je zaseban sloj, ne senka na tekstu. Tako ime ostaje ciste dekoracije
   i nijedan citac ni checker ga ne meri kao sadrzaj. */
.watermark__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 90%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(52% 58% at 50% 50%, rgba(251, 67, 0, 0.22), rgba(251, 67, 0, 0) 72%);
}

/* Ime svetli iznutra: obris je svetliji, a senka ispod njega daje sjaj
   koji prati oblik slova. Bez neona, samo dovoljno da se vidi. */
.watermark__text {
  position: relative;
  z-index: 1;
  display: block;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(4.5rem, 21vw, 20rem);
  font-weight: var(--weight-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px #6A645B;
  will-change: transform;
}

@media (max-width: 640px) {
  .watermark { padding-block: 40px; }

  .watermark__text {
    font-size: 18vw;
    letter-spacing: -0.05em;
    -webkit-text-stroke-width: 0.9px;
  }

  .watermark__glow { width: 150%; height: 130%; }
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.footer { padding-block: var(--space-16) var(--space-12); }

.footer__top {
  display: grid;
  gap: var(--space-12);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--border-hairline);
}

@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1.2fr 1fr 1fr; }
}

.footer__logo { width: 168px; }
.footer__logo svg { width: 100%; height: auto; }

.footer__claim {
  margin-top: var(--space-6);
  color: var(--text-secondary);
  max-width: 30ch;
}

.footer__col h3 {
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.footer__col li + li { margin-top: var(--space-2); }

.footer__col a {
  font-size: var(--size-lg);
  transition: color var(--dur-micro) var(--ease);
}

.footer__col a:hover { color: var(--text-accent); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-8);
  font-size: var(--size-sm);
  color: var(--text-secondary);
}

.footer__bottom a:hover { color: var(--text-accent); }

/* --------------------------------------------------------------------------
   Floating kontakt, dole desno
   Uvek na dohvat ruke, posebno na telefonu.
   -------------------------------------------------------------------------- */

.dock {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: 115;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.dock.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.dock__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.dock__panel[hidden] { display: none; }

.dock__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 46px;
  padding: 0 var(--space-5, 20px);
  padding-inline: 20px;
  border-radius: var(--radius-pill);
  background: var(--dock-bg, var(--copula-ink));
  color: var(--dock-fg, var(--paper));
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(17, 17, 17, 0.16);
  transition: transform var(--dur-micro) var(--ease);
}

.dock__action:hover { transform: translateX(-2px); }

/* Cip u doku se okrece prema tonu koji je bas ispod njega */
body[data-dock-tone="ink"] .dock,
body[data-dock-tone="deep"] .dock {
  --dock-bg: var(--paper);
  --dock-fg: var(--copula-ink);
}

.dock__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--copula-orange);
  color: var(--copula-ink);
  box-shadow: 0 8px 24px rgba(251, 67, 0, 0.28);
  transition:
    transform var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}

.dock__toggle:hover {
  transform: translateY(-2px);
  background: var(--orange-400);
}

.dock__toggle svg {
  width: 24px;
  height: 24px;
  transition: transform var(--dur-base) var(--ease);
}

.dock__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }

.dock__icon-close { display: none; }
.dock__toggle[aria-expanded="true"] .dock__icon-open { display: none; }
.dock__toggle[aria-expanded="true"] .dock__icon-close { display: block; }

@media (prefers-reduced-motion: reduce) {
  .dock, .dock__action, .dock__toggle svg { transition: none; }
}

/* --------------------------------------------------------------------------
   Template library (skelet)
   -------------------------------------------------------------------------- */

.tl-hero {
  min-height: 72svh;
  display: flex;
  align-items: flex-end;
  padding-block: 160px var(--space-24);
}

.tl-hero h1 {
  font-size: clamp(2.75rem, 8vw, 7.5rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: var(--weight-bold);
}

.placeholder-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.placeholder-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  min-height: 220px;
  color: var(--text-secondary);
}

.placeholder-box strong { color: var(--text-primary); font-weight: var(--weight-medium); }

/* Strelica na kraju linije: otvara se tek kad linija stigne do dugmeta */
.thread__arrow {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.thread__arrow path {
  fill: var(--copula-orange);
  stroke: none;
}

.thread__arrow.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .thread__arrow { transition: none; }
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Stranice sa tekstom: o nama, privatnost, kolacici
   -------------------------------------------------------------------------- */

.prose > h2,
.prose > h3,
.prose > p,
.prose > ul,
.prose > table { max-width: 72ch; }

.prose h2 {
  font-size: var(--size-2xl);
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: var(--size-lg);
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
}

.prose p,
.prose li { color: var(--text-secondary); }

.prose p + p { margin-top: var(--space-4); }

.prose ul {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.prose li {
  position: relative;
  padding-left: var(--space-6);
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 7px;
  height: 7px;
  border-left: 1.5px solid var(--copula-orange);
  border-bottom: 1.5px solid var(--copula-orange);
}

.prose a {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose__meta {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--size-sm);
  color: var(--text-secondary);
}

.prose table {
  width: 100%;
  margin-top: var(--space-6);
  border-collapse: collapse;
  font-size: var(--size-sm);
}

.prose th,
.prose td {
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: top;
}

.prose th {
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.prose td { color: var(--text-secondary); }
.prose td:first-child { color: var(--text-primary); white-space: nowrap; }

.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-12);
  font-size: var(--size-sm);
}

/* Tekstualne strane nemaju hero preko koga nav pliva, pa scrim stoji uvek */
.page--doc .nav::before { opacity: 1; }

.prose ul + p,
.prose table + p { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Template Library
   -------------------------------------------------------------------------- */

.tpl-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.tpl-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-hairline);
  border-radius: 16px;
  background: var(--surface-raised);
  padding: var(--space-4);
  transition:
    transform var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}

.tpl-card:hover {
  transform: translateY(-4px);
  border-color: var(--copula-orange);
}

.tpl-card__media {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink-50);
  padding-top: 30px;
}

.tpl-card__media::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  background:
    radial-gradient(circle at 16px 15px, var(--ink-200) 3px, transparent 3.5px),
    radial-gradient(circle at 32px 15px, var(--ink-200) 3px, transparent 3.5px),
    radial-gradient(circle at 48px 15px, var(--ink-200) 3px, transparent 3.5px),
    var(--ink-100);
  z-index: 1;
}

.tpl-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.tpl-card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5, 20px) var(--space-2) var(--space-2);
}

.tpl-card__name {
  font-size: var(--size-lg);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
}

.tpl-card__type {
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: right;
}

.price-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  border: 1px solid var(--border-hairline);
  border-radius: 16px;
  background: var(--surface-raised);
}

.price-card--lead { border-color: var(--copula-orange); }

.price-card__tag {
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-accent);
}

.price-card__sum {
  font-size: var(--size-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  line-height: 1;
}

.price-card__note { font-size: var(--size-sm); color: var(--text-secondary); }
.price-card ul { display: grid; gap: var(--space-2); margin-top: var(--space-4); }

.price-card li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--size-sm);
  color: var(--text-secondary);
}

.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46em;
  width: 7px;
  height: 7px;
  border-left: 1.5px solid var(--copula-orange);
  border-bottom: 1.5px solid var(--copula-orange);
}

/* --------------------------------------------------------------------------
   Natpis nad galerijom
   Iskoci kada galerija krene i pokazuje talasastom strelicom na radove.
   Na uskom ekranu stoji u toku strane, ispod dugmeta, i uvek je tu.
   -------------------------------------------------------------------------- */

.work-hint {
  position: relative;
  display: block;
  max-width: 260px;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5, 18px);
  border-radius: 10px;
  background: var(--paper);
  color: var(--copula-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition:
    transform var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease);
}

.work-hint:hover { transform: translateY(-2px); }

.work-hint__q {
  display: block;
  font-size: var(--size-xs);
  line-height: 1.35;
  font-weight: var(--weight-medium);
}

.work-hint__cta {
  display: block;
  margin-top: 6px;
  font-size: var(--size-xs);
  line-height: 1.35;
  color: var(--orange-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* U toku strane radovi su ispod, pa strelica visi ispod natpisa */
.work-hint__arrow {
  position: absolute;
  left: 28px;
  top: 100%;
  width: 88px;
  height: 60px;
  margin-top: 2px;
  color: var(--copula-orange);
  pointer-events: none;
}

@media (min-width: 1024px) {
  /* Uz pinovanu galeriju natpis stoji tacno na sredini kartice i ceka skrol */
  .has-hscroll .work-hint {
    position: absolute;
    top: 30px;
    left: 50%;
    right: auto;
    z-index: 3;
    margin-top: 0;
    max-width: 240px;
    opacity: 0;
    transform: translate(-50%, -10px);
    transition:
      opacity var(--dur-base) var(--ease),
      transform var(--dur-base) var(--ease);
  }

  .has-hscroll .work-hint.is-on {
    opacity: 1;
    transform: translateX(-50%);
  }

  .has-hscroll .work-hint.is-on:hover {
    transform: translate(-50%, -2px);
  }

  .has-hscroll .work-hint__arrow {
    right: auto;
    left: 10px;
    top: 100%;
    width: 92px;
    height: 62px;
    margin: 6px 0 0;
    transform: scaleX(-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-hscroll .work-hint { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Strana jednog dizajna: duga traka prikaza sa objasnjenjima uz nju
   -------------------------------------------------------------------------- */

.study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.study-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--space-5, 18px);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Traka prikaza i kolona sa notama stoje jedna pored druge, pa nota nikada
   ne pada preko dizajna. Slike su i dalje nadovezane, bez razmaka medju njima. */
.strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 364px);
  column-gap: clamp(24px, 3vw, 56px);
  margin-top: var(--space-8);
}

/* Snimci idu jedan na drugi, bez razmaka, da se citaju kao jedna strana */
.strip__stack { grid-column: 1; grid-row: 1; }
.strip__rail { grid-column: 2; grid-row: 1; }

.strip__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: 14px 14px 0 0;
  background: var(--ink-700);
}

.strip__chrome i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4A4640;
}

.shot { display: block; }

.shot__img {
  display: block;
  width: 100%;
  height: auto;
}

.shot:last-of-type .shot__img { border-radius: 0 0 14px 14px; }

/* --------------------------------------------------------------------------
   Jedna kartica za sve note
   Kartica stoji na mestu i menja sadrzaj kako snimak ispod nje prolazi kroz
   sredinu ekrana. Sve note su u istoj celiji mreze, pa je kartica visoka
   koliko i najduza nota i ne poskakuje pri promeni.
   -------------------------------------------------------------------------- */

.notecard {
  position: sticky;
  /* kartica stoji tamo gde oko i inace pada, uz sredinu ekrana */
  top: max(120px, 26vh);
  padding: var(--space-5, 20px) var(--space-6);
  border-radius: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  color: var(--text-primary);
}

.notecard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.notecard__step {
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
}

.notecard__step b {
  font-weight: var(--weight-bold);
  color: var(--text-accent);
}

/* Crtice pokazuju dokle si stigao kroz dizajn */
.notecard__bars { display: flex; align-items: center; gap: 4px; }

.notecard__bars i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--border-strong);
  transition:
    width var(--dur-base) var(--ease),
    background-color var(--dur-micro) var(--ease);
}

.notecard__bars i.is-on { width: 26px; background: var(--copula-orange); }

.notecard__stack { display: grid; }

.note {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.note.is-on { opacity: 1; transform: none; pointer-events: auto; }

.note h3 {
  font-size: var(--size-base);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--text-accent);
}

.note p {
  font-size: var(--size-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: none;
}

/* Bez JS-a nema smene, pa note idu jedna ispod druge i nista se ne gubi */
.no-js .notecard__stack { display: block; }
.no-js .note { opacity: 1; transform: none; }

.no-js .note + .note {
  margin-top: var(--space-5, 20px);
  padding-top: var(--space-5, 20px);
  border-top: 1px solid var(--border-hairline);
}

.no-js .notecard__bars { display: none; }

@media (prefers-reduced-motion: reduce) {
  .note { transition: none; }
  .notecard__bars i { transition: none; }
}

@media (max-width: 900px) {
  .strip { display: block; }
  .strip__chrome { display: none; }

  /* Kartica se zakaci ispod nav-a i menja se dok snimci prolaze ispod nje */
  .strip__rail {
    position: sticky;
    top: 76px;
    z-index: 6;
    margin-bottom: var(--space-5, 20px);
  }

  .notecard {
    position: static;
    background: rgba(28, 27, 25, 0.98);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
  }

  .shot__img,
  .shot:last-of-type .shot__img { border-radius: 12px; }
  .shot + .shot { margin-top: var(--space-4); }
}

.study-craft { text-align: center; }
.study-craft .section-head { align-items: center; }
.study-craft .prose { margin-inline: auto; }
.study-craft .prose > p { margin-inline: auto; }
.study-craft .hero__actions { justify-content: center; margin-top: var(--space-12); }

/* --------------------------------------------------------------------------
   04b. Preporuka klijenta
   -------------------------------------------------------------------------- */

.testimonial__figure { max-width: 44rem; }

.testimonial__quote p {
  font-size: var(--size-xl);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
  max-width: none;
  text-wrap: balance;
}

.testimonial__by {
  margin-top: var(--space-6);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Srpska strana navodi prevod, pa mora da stoji i oznaka da je izjava
   izvorno data na engleskom. Trazi je SERBIAN-COPY.md, tacka 04b. */
.testimonial__lang {
  /* stoji u istom redu sa potpisom, odvojeno tackom, da ne izgleda kao deo
     naziva firme */
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}

/* Vrlo nizak ekran, stariji telefoni od 640px visine. Naslov i razmak iznad
   dugmeta se skupe taman toliko da poziv na akciju ostane na prvom ekranu.
   Mora da stoji na kraju fajla: media upit nema vecu specificnost, pa bi pre
   pravila koja menja izgubio u kaskadi. */
@media (max-height: 700px) {
  .hero__title { font-size: clamp(2.5rem, 9vw, 9.5rem); }
  .hero__actions { margin-top: var(--space-8); }
}