/* ==========================================================================
   M DESIGNE IVANJICA
   Vrednosti su preuzete 1:1 iz izvornog koda referentnog sajta
   (inspo/style2.css + inspo/home.html). Vidi project/TEARDOWN-morison.md
   ========================================================================== */

:root {
  /* --- tokeni, tacno kao na referentnom sajtu --- */
  --cream:       #faf6ed;   /* token-5e53e9e8 */
  --ink:         #121212;   /* token-319696f9 */
  --ink-2:       #2a2a2a;   /* token-9689bc08 */
  --accent:      #c27d60;   /* token-85be1441 */
  --accent-dark: #a5654a;   /* token-95c16f22 */
  --peach:       #e8d2c4;   /* token-df1fd666 */
  --line:        #e4e1db;   /* token-4ebbcb7f */
  --muted:       #6e6a65;   /* token-a38c549d */
  --sage:        #5c7a63;   /* token-f31e0084 */
  --rust:        #b3543f;   /* token-9c274add */
  --white:       #ffffff;

  --body-ink:    rgba(18,18,18,.7);          /* #121212b3 */
  --faq-bg:      rgba(232,209,195,.17);      /* #e8d1c32b */

  /* geometrija */
  --r:      8px;    /* dugmad, bedzevi, kutije */
  --r-nav:  12px;   /* navigacija */
  --max:    1600px;
  --pad-x:  64px;
  --pad-y:  120px;

  /* krive iz izvornog koda */
  --ease-appear: cubic-bezier(.12,.23,.5,1);   /* appear animacije */
  --ease-hover:  cubic-bezier(.44,0,.56,1);    /* hover prelazi */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; -webkit-font-smoothing: antialiased; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ==========================================================================
   TIPOGRAFIJA  (preset vrednosti iz izvornog koda)
   ========================================================================== */

/* preset-60qj4y : hero */
h1, .t-h1 {
  font-family: 'Big Shoulders', sans-serif;
  font-size: clamp(3.5rem, 8vw, 110px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05em;
  color: var(--ink);
}
/* preset-18i2f8i : h2, capitalize */
h2, .t-h2 {
  font-family: 'Big Shoulders', sans-serif;
  font-size: clamp(2.25rem, 4.6vw, 56px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2em;
  text-transform: capitalize;
  color: var(--ink);
}
/* preset-mwwj1b : h3 */
h3, .t-h3 {
  font-family: 'Big Shoulders', sans-serif;
  font-size: clamp(1.75rem, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15em;
  color: var(--ink);
}
/* preset-15cyf0n : h4 */
h4, .t-h4 {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25em;
  color: var(--ink);
}
/* preset-1m9mw6c : eyebrow / oznake */
.eyebrow {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.4em;
  text-transform: uppercase;
  color: var(--accent);
}
/* preset-1gfg7os : telo */
p, .t-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8em;
  color: var(--body-ink);
}
/* preset-ze1k1e : telo 18 */
.t-18 { font-size: 18px; font-weight: 400; line-height: 1.6em; color: var(--ink); }
/* preset-1rz1n5q : telo 18 bold */
.t-18b { font-size: 18px; font-weight: 700; line-height: 1.6em; color: var(--ink); }
/* preset-1dno7sd : 14 */
.t-14 { font-size: 14px; font-weight: 400; line-height: 1.5em; color: var(--muted); }
/* preset-1ml95ky : 12 */
.t-12 {
  font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1em;
  color: var(--muted);
}
/* preset-12lwil / bjb1w3 : oznaka dugmeta */
.t-btn { font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2em; }

.mono { font-family: 'Fragment Mono', ui-monospace, monospace; }

/* ---------- Tab bedz (framer-9be6i3) ---------- */
.tab {
  align-self: flex-start;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: var(--r);
  background: var(--accent);
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.4em;
  text-transform: uppercase;
  color: var(--white);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding: 0 var(--pad-x); position: relative; z-index: 2; }

section { padding: var(--pad-y) 0; position: relative; }
.sec--dark { background: var(--ink); color: var(--cream); }
.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4 { color: var(--peach); }
.sec--dark p { color: rgba(250,246,237,.62); }
.sec--dark .t-18, .sec--dark .t-18b { color: var(--peach); }
.sec--faq { background: var(--faq-bg); }

@media (min-width: 810px) and (max-width: 1199.98px) { :root { --pad-x: 40px; } }
@media (max-width: 809.98px) { :root { --pad-x: 20px; --pad-y: 80px; } }

/* dvokolonski raspored: levo sticky, desno skroluje  (Process / FAQ) */
.two-col { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 65px 62px; }
.two-col__left {
  flex: 1 0 0; width: 1px;
  min-width: 300px; max-width: 448px;
  padding-right: 62px;
  position: sticky; top: 120px;
  display: flex; flex-direction: column; gap: 24px;
}
.two-col__right { flex: 1 0 0; width: 1px; min-width: 300px; display: flex; flex-direction: column; gap: 24px; }

@media (max-width: 1199.98px) {
  .two-col { flex-direction: column; gap: 48px 24px; }
  .two-col__left { position: static; max-width: none; width: 100%; padding-right: 0; }
  .two-col__right { width: 100%; }
}

/* ==========================================================================
   ZRNO  (framer-1owuaml)
   ========================================================================== */
.grain {
  position: fixed; inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .06;
  background-image: url('../images/brend/noise.png');
  background-repeat: repeat;
  background-size: 188px auto;
}

/* ==========================================================================
   DEKORATIVNE LINIJE  (framer-ca1wj8)
   ========================================================================== */
.gridlines {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .17;
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(8, minmax(50px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 0 24px;
  padding: 0 var(--pad-x);
}
.gridlines span { border: 1px solid rgba(130,130,130,.94); width: 100%; height: 100%; }
@media (max-width: 809.98px) {
  .gridlines { grid-template-columns: repeat(4, 1fr); }
  .gridlines span:nth-child(n+5) { display: none; }
}

/* ==========================================================================
   DUGMAD  (framer-rJSwT : padding 16px 32px, gap 10px, radius 8px)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2em;
  cursor: pointer;
  transition: background-color .4s var(--ease-hover),
              color .4s var(--ease-hover),
              border-color .4s var(--ease-hover),
              opacity .4s var(--ease-hover);
}
.btn svg { width: 19px; height: auto; flex: none; transition: transform .4s var(--ease-hover); }
.btn:hover svg { transform: translateX(4px); }

/* Primary: bg accent, tekst breskva */
.btn--primary { background: var(--accent); color: var(--peach); }
.btn--primary:hover { background: var(--accent-dark); }

/* Dark: bg mastilo, tekst krem  (nav CTA) */
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: var(--ink-2); }

/* Light: providno sa bordurom breskve, na tamnoj podlozi */
.btn--light { background: transparent; color: var(--peach); border-color: var(--peach); }
.btn--light:hover { background: var(--peach); color: var(--ink); }

/* Outline na svetloj podlozi */
.btn--outline { background: transparent; color: var(--ink); border-color: rgba(18,18,18,.25); }
.btn--outline:hover { border-color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   NAVIGACIJA
   kontejner: fixed, top 32px, width 90%, max 900px, height 63px, z-index 7
   traka: radius 12px, blur 7px, bg rgba(250,246,237,.8), border 1px rgba(18,18,18,.15)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 900px;
  height: 63px;
  z-index: 40;
}
.header-bar {
  height: 100%;
  width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--r-nav);
  border: 1px solid rgba(18,18,18,.15);
  background: rgba(250,246,237,.8);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
}

/* Logo je tekst, kao na referentnom sajtu */
.logo {
  display: flex; align-items: center; gap: 10px;
  height: 36px; flex: none;
}
.logo__mark {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: .1em; line-height: 1.4em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: pre;
}
.logo__meta {
  font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1em;
  color: var(--muted);
  white-space: pre;
}

.nav { display: flex; align-items: center; gap: 32px; height: 36px; }
.nav a {
  font-size: 14px; font-weight: 400; line-height: 1.5em;
  color: var(--ink);
  transition: color .4s var(--ease-hover);
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }

.header-cta { flex: none; height: 44px; display: flex; }
.header-cta .btn { height: 44px; padding: 0 20px; font-size: 14px; }

.nav-toggle {
  display: none; align-items: center; justify-content: flex-end;
  height: 40px; padding: 0; flex: none; background: none; border: 0;
}
.nav-toggle__t {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: .1em; line-height: 1.4em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
  transition: color .4s var(--ease-hover);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__t { color: var(--accent); }

@media (max-width: 1023px) {
  /* razmak od ivice 19px i visina 63px, iste vrednosti kao na referentnom sajtu */
  .site-header { width: calc(100% - 38px); }
  .header-bar { overflow: visible; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  /* Panel je nastavak trake: ista sirina, isti radius, ista providnost i
     isto zamucenje pozadine (7px), da deluje kao da se traka produzila. */
  .nav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; height: auto;
    border-radius: var(--r-nav);
    border: 0;
    background: rgba(250,246,237,.97);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    max-height: 0; overflow: hidden; padding: 0 20px;
    /* zatvoren meni je potpuno sklonjen, inace se njegova ivica vidi
       kao tanka linija ispod trake sa logotipom */
    visibility: hidden; opacity: 0;
    transition: max-height .45s var(--ease-hover), opacity .25s var(--ease-hover), visibility 0s linear .45s;
  }
  .nav.is-open {
    max-height: 70vh; overflow-y: auto; padding: 6px 20px 14px;
    border: 1px solid rgba(18,18,18,.15);
    box-shadow: 0 18px 40px rgba(18,18,18,.10);
    visibility: visible; opacity: 1;
    transition: max-height .45s var(--ease-hover), opacity .25s var(--ease-hover), visibility 0s;
  }
  .nav a {
    position: relative;
    display: flex; align-items: center;
    padding: 16px 0 16px 14px;
    font-size: 16px; line-height: 1.4;
    border-bottom: 1px solid rgba(18,18,18,.07);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .35s var(--ease-appear), transform .35s var(--ease-appear), color .3s var(--ease-hover);
  }
  .nav a:last-child { border-bottom: 0; }
  /* tanka uspravna crta levo, kao oznaka stavke; na aktivnoj strani je terakota */
  .nav a::before {
    content: ''; position: absolute; left: 0; top: 18px; bottom: 18px;
    width: 1px; background: rgba(18,18,18,.18);
    transition: background-color .3s var(--ease-hover), top .3s var(--ease-hover), bottom .3s var(--ease-hover);
  }
  .nav a[aria-current="page"] { color: var(--accent); }
  .nav a[aria-current="page"]::before { background: var(--accent); top: 10px; bottom: 10px; }
  .site-header.on-dark .nav a::before { background: rgba(250,246,237,.22); }
  .site-header.on-dark .nav a[aria-current="page"]::before { background: var(--accent); }
  /* stavke ulaze jedna za drugom kad se meni otvori */
  .nav.is-open a { opacity: 1; transform: none; }
  .nav.is-open a:nth-child(1) { transition-delay: .04s; }
  .nav.is-open a:nth-child(2) { transition-delay: .08s; }
  .nav.is-open a:nth-child(3) { transition-delay: .12s; }
  .nav.is-open a:nth-child(4) { transition-delay: .16s; }
  .nav.is-open a:nth-child(5) { transition-delay: .20s; }
  .nav.is-open a:nth-child(6) { transition-delay: .24s; }
}

/* ==========================================================================
   HERO  (Sticky_Viewport 400vh, unutra 100vh)
   ========================================================================== */
.hero-pin { height: 400vh; position: relative; background: var(--ink); }
.hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.hero {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 130px 0 0;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,18,18,.35) 0%, rgba(18,18,18,.15) 40%, rgba(18,18,18,.9) 100%);
}
.hero__top, .hero__bottom { position: relative; z-index: 3; }
.hero__bottom { padding-bottom: 64px; }
.hero h1 { color: var(--cream); max-width: 14ch; }
.hero .eyebrow { color: var(--peach); margin-bottom: 16px; }
.hero p { color: rgba(250,246,237,.72); max-width: 52ch; }
.hero .btn-row { margin-top: 32px; }

.hero__stats { display: flex; flex-wrap: wrap; gap: 62px; margin-top: 40px; }
.hero__stats .n {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 40px; font-weight: 600; line-height: 1.15em;
  color: var(--peach);
}
.hero__stats .l { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: rgba(250,246,237,.45); text-transform: uppercase; }

.hero__cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(250,246,237,.45);
  transition: opacity .5s var(--ease-hover);
}
.hero__cue .track { width: 1px; height: 40px; background: rgba(250,246,237,.2); position: relative; overflow: hidden; }
.hero__cue .track::after { content: ''; position: absolute; inset: 0; background: var(--peach); transform: scaleY(var(--p,0)); transform-origin: top; }
.hero-pin.is-past .hero__cue { opacity: 0; }

/* Podstrane: obican hero bez pina */
.hero--page { height: auto; min-height: 62vh; padding: 190px 0 80px; justify-content: flex-end; }
.hero--page h1 { max-width: 20ch; }

/* ==========================================================================
   LINEUP  -  pin 340vh, kartice klize horizontalno
   ========================================================================== */
.lineup { height: 340vh; background: var(--ink); position: relative; }
.lineup__sticky {
  position: sticky; top: 0;
  max-width: var(--max);
  margin-inline: auto;
  padding: 120px 0 120px var(--pad-x);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 24px;
  overflow: hidden;
}
.lineup__head {
  width: 100%;
  padding: 0 var(--pad-x) 0 0;
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 24px;
}
.lineup__head h2 { color: var(--peach); }
.lineup__head .eyebrow { margin-bottom: 24px; }

.lineup__row { display: flex; gap: 24px; will-change: transform; }

/* Kartica: 450x425, bez radiusa, padding 16px */
.mcard {
  position: relative;
  flex: none;
  width: 450px; height: 425px;
  padding: 16px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 16px;
  overflow: hidden;
  cursor: pointer;
}
.mcard__img { position: absolute; inset: 0; z-index: 0; transition: inset .6s var(--ease-hover); }
.mcard:hover .mcard__img { inset: -10px; }
.mcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mcard__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18,18,18,0) 28%, var(--ink) 100%);
}
.mcard__size {
  position: relative; z-index: 2; width: 100%;
  font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1em;
  color: var(--cream);
}
.mcard__info {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px;
}
.mcard__title { font-size: 18px; font-weight: 700; line-height: 1.6em; color: var(--cream); }
.mcard__price { font-size: 18px; font-weight: 400; line-height: 1.6em; color: var(--accent); }

@media (min-width: 810px) and (max-width: 1199.98px) { .mcard { width: 410px; } }
@media (max-width: 809.98px) {
  .lineup { height: 290vh; }
  .lineup__sticky { padding: 80px 0 80px var(--pad-x); }
  .mcard { width: 304px; height: 380px; }
}

/* ==========================================================================
   MREZA KARTICA  (kategorije, blog, galerija na podstranama)
   ========================================================================== */
.grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 810px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Kartica u mrezi koristi isti jezik kao lineup kartica */
.gcard {
  position: relative;
  aspect-ratio: 450 / 425;
  padding: 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 16px;
  overflow: hidden;
  background: var(--ink-2);
}
.gcard__img { position: absolute; inset: 0; z-index: 0; transition: inset .6s var(--ease-hover); }
.gcard:hover .gcard__img { inset: -10px; }
/* Filter u galeriji i na blogu radi preko hidden atributa, a kartice imaju
   svoj display, koji bi ga inace pregazio. */
[data-cat][hidden] { display: none !important; }

.lista { max-width: 900px; margin: 0; padding-left: 20px; color: var(--body-ink); }
.lista li { margin-bottom: 10px; }

/* Obuhvat paketa na stranici modela */
.pkt { margin-top: 40px; max-width: 900px; border-top: 1px solid var(--line); }
.pkt h3 { margin: 24px 0 4px; }
.pkt__r {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.pkt__r p { margin: 0; color: var(--body-ink); }
.pkt__k {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: .1em; line-height: 1.4em;
  text-transform: uppercase; color: var(--accent);
}
@media (max-width: 809.98px) { .pkt__r { grid-template-columns: 1fr; gap: 6px; } }

/* Kataloska osnova na stranici modela */
.osnova { margin: 28px 0 0; }
.osnova img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
}
.osnova figcaption {
  margin-top: 10px;
  font-family: 'Fragment Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .04em; color: var(--muted);
}
/* Kartica sa snimkom: video popunjava kadar, a sloj sa naslovom ne sme da
   preuzme klik jer su ispod njega kontrole plejera. */
.gcard--video .gcard__img { inset: 0; }
.gcard--video .gcard__img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard--video .gcard__overlay,
.gcard--video .gcard__row,
.gcard--video .gcard__meta { pointer-events: none; }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; }
.gcard__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,18,18,0) 28%, var(--ink) 100%); }
.gcard__meta { position: relative; z-index: 2; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--cream); }
.gcard__row { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.gcard__title { font-size: 18px; font-weight: 700; line-height: 1.6em; color: var(--cream); }
.gcard__price { font-size: 18px; font-weight: 400; line-height: 1.6em; color: var(--accent); }
.gcard__link::after { content: ''; position: absolute; inset: 0; z-index: 5; }

/* Tekstualna kartica (bez slike) */
.tcard {
  padding: 24px;
  border-radius: var(--r);
  background: var(--ink);
  display: flex; flex-direction: column; gap: 12px;
}
.tcard h3, .tcard h4 { color: var(--peach); }
.tcard p { color: rgba(250,246,237,.62); }
.sec--faq .tcard, .tcard--light { background: var(--white); border: 1px solid var(--line); }
.tcard--light h3, .tcard--light h4 { color: var(--ink); }
.tcard--light p { color: var(--body-ink); }

/* ==========================================================================
   FAQ  (bez akordeona, pitanje i odgovor su obican tekst)
   ========================================================================== */
.qa { display: flex; flex-direction: column; gap: 10px; }
.qa + .qa { margin-top: 24px; }
.qa__q { font-size: 16px; font-weight: 600; line-height: 1.8em; color: var(--ink); }
.qa__a { font-size: 16px; font-weight: 400; line-height: 1.8em; color: var(--body-ink); }

/* Kutija poziva u levoj koloni FAQ-a  (framer-koiev0) */
.cta-box {
  background: var(--ink);
  border-radius: var(--r);
  padding: 24px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 24px;
}
.cta-box p:first-child { font-size: 18px; font-weight: 700; line-height: 1.6em; color: var(--peach); }
.cta-box p { color: var(--peach); }

/* ==========================================================================
   PROCES  (levo sticky, desno skroluje)
   ========================================================================== */
.step { padding: 32px 0; border-top: 1px solid var(--line); display: flex; gap: 24px; align-items: flex-start; }
.sec--dark .step { border-top-color: rgba(250,246,237,.12); }
.step__n {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 40px; font-weight: 600; line-height: 1;
  color: var(--accent);
  flex: none; min-width: 62px;
}
.step__body { display: flex; flex-direction: column; gap: 8px; }

/* ==========================================================================
   TABELE
   ========================================================================== */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.sec--dark .table-scroll { border-color: rgba(250,246,237,.14); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
caption { text-align: left; padding-bottom: 12px; font-size: 14px; color: var(--muted); }
th, td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.sec--dark th, .sec--dark td { border-bottom-color: rgba(250,246,237,.12); }
thead th {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
td { font-size: 16px; line-height: 1.8em; color: var(--body-ink); }
.sec--dark td { color: rgba(250,246,237,.62); }
td strong { font-weight: 600; color: var(--ink); }
.sec--dark td strong { color: var(--peach); }
tbody tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   SPEC MREZA
   ========================================================================== */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sec--dark .specs { background: rgba(250,246,237,.14); border-color: rgba(250,246,237,.14); }
.spec { background: var(--cream); padding: 24px 20px; }
.sec--dark .spec { background: var(--ink); }
.spec__k { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.spec__v { font-family: 'Big Shoulders', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25em; margin-top: 4px; color: var(--ink); }
.sec--dark .spec__v { color: var(--peach); }

/* ==========================================================================
   CENE
   ========================================================================== */
.price-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.price-card { border: 1px solid var(--line); border-radius: var(--r); padding: 24px; background: var(--white); }
.sec--dark .price-card { background: var(--ink); border-color: rgba(250,246,237,.14); }
.price-card--on { border-color: var(--accent); }
.price-card__k { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.price-card__v { font-family: 'Big Shoulders', sans-serif; font-size: 40px; font-weight: 600; line-height: 1.15em; margin-top: 8px; color: var(--ink); }
.sec--dark .price-card__v { color: var(--peach); }
.price-card--on .price-card__v { color: var(--accent); }

.note {
  border-left: 2px solid var(--accent);
  padding: 16px 24px;
  background: var(--faq-bg);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 16px; line-height: 1.8em; color: var(--body-ink);
}
.sec--dark .note { color: rgba(250,246,237,.62); background: rgba(232,209,195,.08); }

/* ==========================================================================
   GALERIJA I FILTERI
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn {
  padding: 4px 12px; min-width: 80px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  transition: all .4s var(--ease-hover);
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* ==========================================================================
   BLOG
   ========================================================================== */
.post {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
}
.post__img { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--ink-2); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-hover); }
.post:hover .post__img img { transform: scale(1.04); }
.post__cat {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.post__title { font-size: 18px; font-weight: 700; line-height: 1.6em; color: var(--ink); }
.sec--dark .post__title { color: var(--peach); }
.post__date { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.post__link::after { content: ''; position: absolute; inset: 0; z-index: 5; }
.post--featured { grid-column: 1 / -1; }
@media (min-width: 1200px) {
  .post--featured { flex-direction: row; gap: 40px; align-items: center; }
  .post--featured .post__img { flex: 0 0 55%; aspect-ratio: 16/10; }
  .post--featured .post__title { font-size: 40px; font-family: 'Big Shoulders', sans-serif; font-weight: 600; line-height: 1.15em; letter-spacing: -.01em; }
}

.prose { max-width: 72ch; }
.prose h2 { margin: 48px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 20px; }

/* ==========================================================================
   WIZARD FORMA
   ========================================================================== */
.wizard { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); padding: 40px; }
@media (max-width: 809.98px) { .wizard { padding: 24px; } }
.wizard__bar { height: 2px; background: var(--line); overflow: hidden; margin-bottom: 12px; }
.wizard__bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s var(--ease-appear); }
.wizard__count { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px; }
.wstep { display: none; }
.wstep.is-active { display: block; }
.wstep__q { margin-bottom: 8px; }
.wstep__hint { margin-bottom: 24px; }

.choices { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .choices { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .choices--3 { grid-template-columns: repeat(3,1fr); } }
.choice {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 20px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--cream);
  transition: all .4s var(--ease-hover);
}
.choice:hover { border-color: var(--ink); }
.choice.is-selected { border-color: var(--accent); background: var(--faq-bg); }
.choice__t { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.choice__s { font-size: 14px; line-height: 1.5em; color: var(--muted); }

.field { margin-bottom: 20px; }
.field label { display: block; font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field .req { color: var(--accent); }
.field input, .field textarea {
  width: 100%; padding: 14px 16px;
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .4s var(--ease-hover);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field.has-error input, .field.has-error textarea { border-color: var(--rust); }
.field__err { display: none; margin-top: 6px; font-size: 14px; color: var(--rust); }
.field.has-error .field__err { display: block; }

.wizard__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.wizard__nav .btn:disabled { opacity: .4; cursor: not-allowed; }
.wizard__summary { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.wizard__summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; }
.wizard__summary dt { color: var(--muted); }
.wizard__summary dd { color: var(--ink); margin: 0; font-weight: 600; }
.wizard__done { display: none; text-align: center; padding: 40px 0; }
.wizard__done.is-active { display: block; }
.wizard__done .tick { width: 64px; height: 64px; margin: 0 auto 24px; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--accent); }

/* ==========================================================================
   STICKY AKCIJE
   ========================================================================== */
.sticky-actions { position: fixed; right: 20px; bottom: 20px; z-index: 25; display: flex; flex-direction: column; gap: 10px; }
.sticky-actions a {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r);
  background: var(--ink); color: var(--cream);
  border: 1px solid rgba(250,246,237,.15);
  transition: background-color .4s var(--ease-hover);
}
.sticky-actions a:hover { background: var(--accent); }
.sticky-actions svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 767px) {
  .sticky-actions { right: 0; left: 0; bottom: 0; flex-direction: row; gap: 0; background: var(--ink); border-top: 1px solid rgba(250,246,237,.12); }
  .sticky-actions a { flex: 1; width: auto; height: 56px; border-radius: 0; border: 0; flex-direction: column; gap: 2px; }
  .sticky-actions a span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
  body { padding-bottom: 56px; }
}
@media (min-width: 768px) { .sticky-actions a span { display: none; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--cream); position: relative; overflow: hidden; }

.telemetry {
  max-width: var(--max); margin-inline: auto;
  height: 60px; padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-top: 1px solid rgba(250,246,237,.1);
  border-bottom: 1px solid rgba(250,246,237,.1);
  font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1em;
  text-transform: uppercase;
  color: rgba(250,246,237,.4);
  overflow: hidden; white-space: nowrap;
}
.telemetry .on { color: var(--accent); }
@media (max-width: 809.98px) { .telemetry { font-size: 10px; gap: 12px; } }

.footer-content { max-width: var(--max); margin-inline: auto; padding: 80px var(--pad-x) 0; position: relative; z-index: 2; }
.footer-grid { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 810px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-footer h4 {
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.site-footer li { margin-bottom: 10px; }
.site-footer a { font-size: 14px; line-height: 1.5em; color: rgba(250,246,237,.6); transition: color .4s var(--ease-hover); }
.site-footer a:hover { color: var(--accent); }
.site-footer p { color: rgba(250,246,237,.5); font-size: 14px; line-height: 1.5em; }
.footer-logo { font-family: 'Big Shoulders', sans-serif; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }

.footer-mark {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 64px auto 0; padding: 0 var(--pad-x);
  font-family: 'Big Shoulders', sans-serif;
  font-size: clamp(4rem, 15vw, 13rem);
  font-weight: 700; line-height: .82; letter-spacing: -.03em;
  color: rgba(232,210,196,.06);
  user-select: none; white-space: nowrap; overflow: hidden;
}
.footer-bottom {
  max-width: var(--max); margin-inline: auto; padding: 24px var(--pad-x);
  border-top: 1px solid rgba(250,246,237,.1);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 12px; font-weight: 500; letter-spacing: .02em; color: rgba(250,246,237,.4);
  position: relative; z-index: 2;
}

/* ---------- mrvice ---------- */
.crumbs { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.hero .crumbs { color: rgba(250,246,237,.45); }
.crumbs a:hover { color: var(--accent); }
.crumbs i { font-style: normal; margin: 0 8px; opacity: .5; }

/* ==========================================================================
   APPEAR ANIMACIJE
   ease cubic-bezier(.12,.23,.5,1), y 20px / 40px, 0.4s / 0.8s
   ========================================================================== */
.ap { opacity: .001; transform: translateY(20px); transition: opacity .8s var(--ease-appear), transform .8s var(--ease-appear); }
.ap--lg { transform: translateY(40px); }
.ap.on { opacity: 1; transform: none; }
.ap:nth-child(2) { transition-delay: .06s; }
.ap:nth-child(3) { transition-delay: .12s; }
.ap:nth-child(4) { transition-delay: .18s; }
.ap:nth-child(5) { transition-delay: .24s; }
.ap:nth-child(6) { transition-delay: .3s; }

/* prelom naslova koji vazi samo na telefonu */
br.br-mob { display: none; }
@media (max-width: 809.98px) { br.br-mob { display: block; } }

/* naslov rec po rec */
.w { display: inline-block; opacity: .001; transform: translateY(10px); transition: opacity .55s var(--ease-appear), transform .55s var(--ease-appear); }
.on .w { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .ap, .w { opacity: 1; transform: none; }
  .hero-pin { height: auto; }
  .hero-sticky { position: relative; height: 100vh; }
  .lineup { height: auto; }
  .lineup__sticky { position: relative; }
  .lineup__row { flex-wrap: wrap; }
}

.skip-link { position: absolute; left: -9999px; background: var(--accent); color: var(--white); padding: 14px 22px; z-index: 200; }
.skip-link:focus { left: 0; top: 0; }

/* ==========================================================================
   MOBILNA VERZIJA
   Referentni sajt na telefonu ne skraba video i ne pina sekcije.
   Hero je obican tamni ekran sa centriranim tekstom, kartice se prevlace
   prstom, traka sa logotipom je svetla i bez ijedne linije ispod sebe.
   ========================================================================== */
@media (max-width: 809.98px) {

  /* --- filteri: jedna traka koja se prevlaci, umesto cetiri reda dugmadi --- */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; min-height: 40px; }

  /* --- hero: bez pina i bez skrabanja videa --- */
  .hero-pin { height: auto; }
  .hero-sticky { position: relative; height: auto; }
  .hero {
    height: auto;
    min-height: calc(100svh - 56px);
    justify-content: center;
    text-align: center;
    padding: 150px 0 40px;
  }
  /* video ostaje i na telefonu, samo se ne pinuje: strana se skroluje
     normalno, a snimak se odmotava dok hero prolazi kroz ekran */
  .hero__media { background: var(--ink); }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(18,18,18,.55) 0%, rgba(18,18,18,.45) 40%, rgba(18,18,18,.92) 100%);
  }
  .hero__top { margin-bottom: 24px; }
  .hero__bottom { padding-bottom: 24px; }
  .hero h1 { max-width: none; }
  .hero p { max-width: none; margin-inline: auto; }
  .hero .btn-row { justify-content: center; margin-top: 28px; }
  .hero .btn { width: 100%; justify-content: center; }
  .hero__cue { display: none; }
  .hero__stats { justify-content: center; gap: 32px; }

  /* --- lineup: prevlacenje prstom umesto pina --- */
  .lineup { height: auto; }
  .lineup__sticky { position: relative; height: auto; padding: var(--pad-y) 0 var(--pad-y) var(--pad-x); }
  .lineup__row {
    transform: none !important;
    /* traka mora da bude siroka koliko i ekran, inace nema sta da se skroluje
       i kartice posle prve ostaju nedostupne */
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-right: var(--pad-x);
    gap: 12px;
    scrollbar-width: none;
  }
  .lineup__row::-webkit-scrollbar { display: none; }
  .mcard { width: 78vw; max-width: 320px; height: 360px; scroll-snap-align: start; flex: none; }


  /* --- sitnije: da se sadrzaj ne lepi za donju traku sa kontaktima --- */
  .cta-full { min-height: auto; padding-bottom: calc(var(--pad-y) + 24px); }
  .btn-row .btn { flex: 1 1 auto; }
}