/* ==========================================================================
   HOMEPAGE FINAL CORRECTION R01 — poslednji sloj, SAMO naslovna.

   Ovaj fajl je jedini novi fajl runde. Uklanjanje njegovog <link> reda iz
   index.html vraća stranu tačno u R404_SR_SITE_FINALIZATION_R01.

   Nijedna cena, nijedan URL, nijedan H1 i nijedan hero element se ovde ne
   dira. Sadržaj:

     A · SIGNAL PRELOM — predah, ne poglavlje            (§5 brifa)
     B · TRI PONUDE — tri različita objekta              (§10–§16 brifa)
     C · DOKAZ — recenzije bez druge cenovne priče       (§17, §18 brifa)
     D · SITNICE posle uklonjenog vodećeg rada           (§6, §7 brifa)

   Motion se NE dodaje (§22). Sve što se ovde vidi vidi se i u mirovanju.
   ========================================================================== */


/* ==========================================================================
   A · SIGNAL PRELOM — FULL-WIDTH VIZUAL, NE FULL-SCREEN VISINA (§5)

   SR FINAL R01 je scenu podigao na 100svh / 92svh. Vlasnik je tu razmeru
   odbio: traženo je bilo da vizual ide od ivice do ivice EKRANA, ne da
   poglavlje zauzme ceo ekran po visini.

   Scena ostaje edge-to-edge (slika i nit i dalje idu preko cele širine),
   ali se vraća na kratak filmski prelaz. Tekst ostaje u gornjoj zoni,
   nit u donjoj — nit ni na jednoj širini ne preseca slova.
   ========================================================================== */
.tband {
  min-height: clamp(300px, 38vh, 430px);
}
.tband-img {
  object-position: center 62%;
  opacity: .92;
  transform: scale(1.03);
}
/* gornji i donji preliv su bili računati za 100svh scenu */
.tband::after {
  height: 140px;
  background: linear-gradient(to top, var(--bg) 8%, transparent);
}
.tband-in {
  align-self: start;
  padding-top: clamp(34px, 5.5vh, 60px);
  padding-bottom: 0;
}
.tband .tband-k {
  margin-bottom: 13px;
  font-size: 11px;
  letter-spacing: .2em;
}
/* display linija: i dalje najveći tekst u prelomu, ali predah je predah */
.tband .tb-l1 {
  font-size: clamp(30px, 3.9vw, 58px);
  line-height: 1.0;
  letter-spacing: -.028em;
  max-width: 18ch;
}
.tband .tb-l2 {
  margin-top: 13px;
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.42;
  max-width: 46ch;
  color: rgba(244, 240, 230, .76);
}
/* nit ostaje edge-to-edge, ali živi ISKLJUČIVO u donjoj trećini scene */
.tband-trace {
  top: auto;
  bottom: 6%;
  height: 30%;
}

@media (max-width: 860px) {
  /* mobilni je bio 92svh — najgrublji slučaj iz §23 */
  .tband { min-height: clamp(240px, 30svh, 320px); }
  .tband-img { opacity: .62; object-position: center 74%; transform: none; }
  .tband-in { padding-top: clamp(26px, 4.4svh, 40px); }
  .tband .tband-k { margin-bottom: 10px; font-size: 10.5px; }
  .tband .tb-l1 { font-size: clamp(26px, 7.1vw, 34px); max-width: 13ch; }
  .tband .tb-l2 { margin-top: 10px; font-size: 14.5px; max-width: 34ch; }
  .tband-trace { bottom: 4%; height: 24%; }
}


/* ==========================================================================
   B · TRI PONUDE — TRI RAZLIČITA OBJEKTA (§10–§16)

   Zatečeno: tri kolone iste boje, istog ritma, sa cenom kao sitnim
   metapodatkom. Vlasnik: „previše slično, slabo razdvojeno, cena preslaba".

   Rešenje NIJE SaaS cenovnik. Nema zaobljenih pločica, nema zelenih kvačica,
   nema „najpopularnije", nema prekidača, nema stakla, nema nove boje.
   Tri ponude su TRI STANJA ISTOG CRNO-ZLATNOG SVETA:

     01 STANDARD   grafit · najtvrđa geometrija · prava nit
     02 SIGNATURE  toplo bronzano polje · autorska nit · veći editorial
     03 CUSTOM     najdublje crno · povezana mreža · sistemski ritam

   Redosled čitanja je isti u sva tri (§11): IME → VRSTA → CENA → ŠTA ZNAČI
   → CTA. Cena je u prve tri stvari koje oko uhvati u svakoj ponudi.
   ========================================================================== */
.of3 {
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr;
  margin-top: clamp(10px, 1.4vw, 20px);
  border: 1px solid rgba(244, 240, 230, .16);
  overflow: hidden;
}
.of {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 2.7vw, 44px) clamp(24px, 2.2vw, 38px) clamp(28px, 2.4vw, 38px);
  min-width: 0;
}
.of + .of { border-left: 1px solid rgba(244, 240, 230, .16); }

/* ---- tonska polja: tri stanja, nula novih boja ---- */
.of--std {
  background: #101216;
}
/* Signature mora da se vidi kao DRUGO polje i na 1440, gde je panel uzak.
   Prva verzija je na desktopu čitala skoro isto kao grafit — pojačano posle
   gledanja snimka `crop_offers_new_1440.jpg`, ne po pretpostavci. */
.of--sig {
  background:
    radial-gradient(124% 86% at 84% -4%, rgba(233, 184, 80, .2), transparent 60%),
    linear-gradient(168deg, #241c12 0%, #191409 58%, #120f0a 100%);
}
.of--cst {
  background:
    radial-gradient(88% 62% at 50% 4%, rgba(233, 184, 80, .07), transparent 62%),
    #08090b;
}
/* tanka svetlosna ivica na vrhu Signature panela — jedina „dubina" u sekciji */
.of--sig::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 184, 80, .65) 42%, transparent);
  pointer-events: none;
}

/* ---- veliki broj ponude ---- */
.of-num {
  display: block;
  font-size: clamp(52px, 4.6vw, 78px);
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.045em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 230, .22);
}
.of--sig .of-num { -webkit-text-stroke-color: rgba(233, 184, 80, .48); }
.of--cst .of-num { -webkit-text-stroke-color: rgba(244, 240, 230, .15); }

/* ---- SIGNAL motiv: nasleđe uklonjenog sloja JASAN / AUTORSKI / POVEZAN ---- */
.of-sig {
  display: block;
  margin: 15px 0 24px;
}
.of-sig svg { display: block; width: 100%; height: 24px; }
.ofs-line { fill: none; stroke: rgba(244, 240, 230, .3); stroke-width: 1.1; }
.ofs-dot  { fill: rgba(244, 240, 230, .32); }

.of--std .ofs-line { stroke: rgba(244, 240, 230, .52); stroke-width: 1.5; }
.of--std .ofs-dot  { fill: var(--gold); }
.of--sig .ofs-line { stroke: var(--gold); stroke-width: 1.5; }
.of--sig .ofs-dot  { fill: var(--gold-hi); }
.of--cst .ofs-line { stroke: rgba(233, 184, 80, .6); stroke-width: 1; }
.of--cst .ofs-dot  { fill: var(--gold); }

/* ---- ime i vrsta ---- */
.of-name {
  margin: 0;
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 720;
  letter-spacing: -.008em;
  line-height: 1.1;
}
.of--sig .of-name { color: var(--gold-hi); }
.of-kind {
  margin: 7px 0 0;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(244, 240, 230, .56);
}
.of--sig .of-kind { color: rgba(233, 184, 80, .8); }

/* ---- STANDARD: tri cene, svaka kao svoj red ---- */
.of-rows {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid rgba(244, 240, 230, .14);
}
.of-rows li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "p n" "p f";
  column-gap: 18px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(244, 240, 230, .09);
}
.op-p {
  grid-area: p;
  font-size: clamp(26px, 2.15vw, 33px);
  font-weight: 760;
  letter-spacing: -.024em;
  line-height: 1;
  color: var(--gold-hi);
  white-space: nowrap;
}
.op-n {
  grid-area: n;
  font-size: 14.5px;
  font-weight: 620;
  line-height: 1.25;
}
.op-f {
  grid-area: f;
  margin-top: 4px;
  font-family: var(--font-m);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .015em;
  line-height: 1.4;
  color: rgba(244, 240, 230, .5);
}
.of-rows li.lead {
  background: linear-gradient(90deg, rgba(233, 184, 80, .1), transparent 78%);
  border-bottom-color: rgba(233, 184, 80, .4);
}

/* ---- SIGNATURE / CUSTOM: jedan cenovni model ---- */
.of-price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 22px 0 0;
  padding: 17px 0 16px;
  border-top: 1px solid rgba(244, 240, 230, .16);
  border-bottom: 1px solid rgba(244, 240, 230, .1);
}
.of-price b {
  font-size: clamp(30px, 2.7vw, 41px);
  font-weight: 760;
  letter-spacing: -.028em;
  line-height: 1;
  color: var(--gold-hi);
}
.of-price--words b {
  font-size: clamp(23px, 1.95vw, 30px);
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--gold);
}
.of-price span {
  font-family: var(--font-m);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(244, 240, 230, .52);
}

/* ---- šta to znači ---- */
.of-h {
  margin: 22px 0 0;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 660;
  line-height: 1.16;
  letter-spacing: -.018em;
}
.of--sig .of-h { font-size: clamp(21px, 1.9vw, 28px); }
.of-p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.58;
  color: rgba(244, 240, 230, .7);
}
.of-fine {
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(233, 184, 80, .55);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(244, 240, 230, .62);
}
.of-fine b { color: rgba(244, 240, 230, .92); }

/* ---- najviše tri naznake (§13, §14) ---- */
.of-cues {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.of-cues li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(244, 240, 230, .82);
  border-top: 1px solid rgba(244, 240, 230, .08);
}
.of-cues li:first-child { border-top: 0; }
.of-cues li::before {
  content: "";
  position: absolute; left: 0; top: 1.32em;
  width: 9px; height: 1px;
  background: var(--gold);
  opacity: .85;
}
.of--sig .of-cues li { font-size: 15px; color: rgba(244, 240, 230, .88); }
/* Custom čita kao sistem: čvorovi obešeni o jednu šinu */
.of--cst .of-cues {
  margin-left: 3px;
  padding-left: 18px;
  border-left: 1px solid rgba(233, 184, 80, .3);
}
.of--cst .of-cues li { padding-left: 6px; }
.of--cst .of-cues li::before {
  left: -21.5px; top: 1.15em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .92;
}

/* ---- CTA ---- */
.of-cta {
  margin-top: auto;
  padding-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-m);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.of-cta .arw { color: var(--gold); transition: transform .25s ease; }
.of-cta:hover { color: var(--gold-hi); }
.of-cta:hover .arw { transform: translateX(5px); }

/* ---- ispod 1080: tri poglavlja jedno ispod drugog, ista razlika u polju ---- */
@media (max-width: 1080px) {
  .of3 { grid-template-columns: 1fr; }
  .of + .of { border-left: 0; border-top: 1px solid rgba(244, 240, 230, .18); }
  .of { padding: 28px 24px 30px; }
  .of-num { font-size: 54px; }
  .of-sig { margin: 13px 0 18px; }
  .of-p, .of-h { max-width: 54ch; }
  .of-cta { padding-top: 22px; }
}
/* §23: složena visina ponude na 390 mora da ostane ispod ~2.000 px.
   Merena je i skraćena ritmom, ne brisanjem sadržaja — svaka ponuda i dalje
   nosi ime, vrstu, cenu, značenje, naznake i CTA. */
@media (max-width: 520px) {
  .of { padding: 24px 20px 26px; }
  .of-num { font-size: 48px; }
  .of-sig { margin: 11px 0 15px; }
  .of-sig svg { height: 20px; }
  .op-p { font-size: 26px; }
  .of-rows { margin-top: 18px; }
  .of-rows li { padding: 11px 0; column-gap: 14px; }
  .of-price { margin-top: 18px; padding: 14px 0 13px; }
  .of-price b { font-size: 30px; }
  .of-price--words b { font-size: 24px; }
  .of-h { margin-top: 18px; }
  .of-cues { margin-top: 14px; }
  .of-cues li { padding-top: 8px; padding-bottom: 8px; }
  .of-fine { margin-top: 14px; }
  .of-cta { padding-top: 20px; }
  /* ritam poglavlja oko ponude, ne sadržaj u njoj */
  .tierx { padding-block: clamp(38px, 7vw, 56px); }
  .tierx-head { padding-bottom: 14px; }
  .of3 { margin-top: 6px; }
  .tierx-foot { margin-top: 18px; padding-top: 14px; }
}

/* podnožje ponude: ostaje JEDINI cenovni ispis ispod tri panela (§17) */
.tierx-foot { margin-top: clamp(20px, 2.2vw, 32px); }


/* ==========================================================================
   C · DOKAZ — RECENZIJE, NE DRUGA CENOVNA PRIČA (§18)

   Desna cenovna kolona je obrisana iz HTML-a, pa poglavlje više nije podela
   50/50. Tri javne recenzije stoje kao tri jednake kartice — posetilac
   odmah vidi da su to ISKUSTVA KLIJENATA, a ne još jedan paket.
   ========================================================================== */
.proof-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.proof .chapter-head { max-width: 62ch; }
.proof-voices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 26px);
  align-items: stretch;
}
/* kartice nose SVOJU visinu: Biljanina recenzija je duža od ostale dve, pa bi
   `stretch` ostavio dva velika prazna dna (vidi `crop_proof_new_1440.jpg`) */
.proof-voices { align-items: start; }
.proof-voices .g-review { align-content: start; }
@media (max-width: 1080px) {
  .proof-voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .proof-voices { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}


/* ==========================================================================
   D · POSLE UKLONJENOG VODEĆEG RADA (§6, §7)

   Showroom je bio uvod u pojas sa Dejanom, pa se poglavlje zatvaralo tek
   ispod njega. Sad se zatvara odmah — dugme dobija vazduh koji je ranije
   dolazio od slike iznad njega.
   ========================================================================== */
.showroom .works-more { margin-top: clamp(34px, 4.4vw, 62px); }