/* landing-v5.css — SAMO naslovnica. Učitati POSLIJE v5-base.css.
   Zajedničke komponente (gumbi, kartice, forme, header, footer, cijene) su u v5-base.css. */

/* GH #211, korak 1: nijedno pravilo ispod ne imenuje boju. Vrijednosti su
   nepromijenjene -- ovo je preseljenje, ne preboj.

   Sipka i utezi ne dobivaju tokene ovdje nego koriste ljestvicu --v5-steel-*,
   --v5-iron-* i --v5-plate-accent-* iz v5-base.css, jer je to isti rekvizit
   koji stoji i uz cijene. Zato ova datoteka i mora doci poslije nje. */
:root {
  /* Odsjaj na utegu. Bijela s niskom prozirnoscu, ne boja teme. */
  /* Pozadina ucitavanja. Ostaje tamna u obje teme jer na njoj stoji celicna
     sipka iz --v5-steel-* ljestvice, koja je svijetlo siva: na svijetloj
     podlozi bi nestala. Predmet, kao i sipka. */
  --lv5-loader-bg: #1e1e1e;
  --lv5-plate-sheen: rgba(255, 255, 255, .05);
  --lv5-plate-sheen-accent: rgba(255, 255, 255, .14);

  /* Akcent razrijeden u plohu i u tanku crtu. */
  --lv5-cursor-hot: rgba(87, 156, 217, .18);
  --lv5-frame-line: rgba(87, 156, 217, .45);
  --lv5-cell-line: rgba(30, 30, 30, .12);

  /* Prije/poslije. Sloj "prije" nosi --v5-stripe-a/-b, isti par koji u
     v5-base.css puni prazna mjesta za slike; "poslije" je tamniji par. */
  --lv5-after-a: #cedae4;
  --lv5-after-b: #bccddc;
  --lv5-handle-fill: rgba(253, 253, 253, .94);
  --lv5-meta-fill: rgba(253, 253, 253, .94);
  /* Bljesak pri prevlacenju: svjetlo, ne ploha. */
  --lv5-flash: #fff;

  /* Sitni tekst na akcentu u zavrsnom bloku -- svjetliji od --v5-on-dark. */
  --lv5-final-note: #323d47;
}

/* --- preloader --- */
.v5 .loader {
  position: fixed; inset: 0; z-index: 200; background: var(--lv5-loader-bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s ease;
}
.v5 .loader__rig {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 4px; height: 180px; width: 100%; will-change: transform;
}
.v5 .loader__bar {
  position: absolute; left: 14%; right: 14%; top: 50%; height: 9px; margin-top: -4.5px;
  background: linear-gradient(180deg, var(--v5-steel-150) 0%, var(--v5-steel-400) 45%,
              var(--v5-steel-700) 100%);
  border-top: 1px solid var(--v5-steel-50);
}
.v5 .loader__knurl {
  position: relative; width: clamp(70px, 10vw, 120px); height: 13px;
  background: repeating-linear-gradient(90deg, var(--v5-steel-300) 0 2px,
              var(--v5-steel-600) 2px 4px);
  border-top: 1px solid var(--v5-steel-100);
}
.v5 .plate {
  position: relative; opacity: 0; will-change: transform;
  background: linear-gradient(180deg, var(--v5-iron-100) 0%, var(--v5-iron-200) 55%,
              var(--v5-iron-300) 100%);
  border: 1px solid var(--v5-iron-400);
  box-shadow: inset 0 0 0 3px var(--lv5-plate-sheen);
}
.v5 .plate--accent {
  background: linear-gradient(180deg, var(--v5-plate-accent-100) 0%, var(--v5-accent) 55%,
              var(--v5-plate-accent-300) 100%);
  border-color: var(--v5-plate-accent-400);
  box-shadow: inset 0 0 0 3px var(--lv5-plate-sheen-accent);
}
.v5 .plate--20 { width: 26px; height: 152px; }
.v5 .plate--15 { width: 22px; height: 112px; }
.v5 .plate--10 { width: 18px; height: 74px; }

/* --- kursor --- */
.v5 .cursor, .v5 .cursor-dot { position: fixed; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform; }
.v5 .cursor {
  z-index: 190; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 2px solid var(--v5-ink); border-radius: 50%;
  transition: width .28s cubic-bezier(.2, .8, .2, 1), height .28s cubic-bezier(.2, .8, .2, 1),
              margin .28s cubic-bezier(.2, .8, .2, 1), background-color .28s, border-color .28s, opacity .35s;
}
.v5 .cursor.is-hot { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: var(--lv5-cursor-hot); border-color: var(--v5-accent); }
.v5 .cursor-dot { z-index: 191; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--v5-accent); }

/* --- hero --- */
.v5 .hero {
  position: relative; max-width: var(--v5-max); margin: 112px auto 0;
  padding: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 58px); align-items: center;
}
/* Samo polozaj i parallax sloj -- izgled (velicina, tezina, prozirnost) dolazi
   iz .ghost-word u v5-base.css, koji nose i prijava i registracija. Span mora
   imati OBJE klase: sam .hero__ghost nema ni font ni boju, pa se rijec iscrta
   kao obican tekst u gornjem lijevom kutu hero sekcije. */
.v5 .hero__ghost { display: none; }
.v5 .hero__body, .v5 .hero__visual { position: relative; z-index: 1; }
.v5 .hero h1 { margin-top: 28px; font-size: clamp(2.75rem, 4.8vw, 4.5rem); line-height: 1.08; }
.v5 .hero__line { display: block; overflow: hidden; padding-bottom: .04em; }
.v5 .hero__line:last-child { padding-bottom: .1em; }
.v5 .hero__line > span { display: block; }
.v5 .hero .lead { max-width: 48ch; margin-top: 24px; }
.v5 .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.v5 .hero__actions .note { font-size: 0.84375rem; }

.v5 .hero__frame { position: relative; padding: 0 16px 16px 0; }
.v5 .hero__frame::before { content: ""; position: absolute; left: 16px; top: 16px; right: 0; bottom: 0; border: 1px solid var(--lv5-frame-line); }
.v5 .hero__photo { aspect-ratio: 16 / 11; overflow: hidden; }
.v5 .hero__chip {
  position: absolute; right: 16px; top: 36px; background: var(--v5-accent); color: var(--v5-on-accent);
  padding: 11px 18px; font-size: 0.71875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}

/* --- odbrojavanje --- */
.v5 .countdown { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.v5 .countdown__cell {
  display: flex; align-items: baseline; gap: 5px; padding: 9px 14px;
  background: var(--v5-surface); border: 1px solid var(--lv5-cell-line);
  border-radius: 10px;
}
.v5 .countdown__cell--now { background: var(--v5-ink); color: var(--v5-paper); border-color: var(--v5-ink); }
.v5 .countdown__num { font-size: 1.25rem; font-weight: 800; }
.v5 .countdown__unit { font-size: 0.6875rem; color: var(--v5-muted); }
.v5 .countdown__cell--now .countdown__unit { color: var(--v5-ink-muted); }

/* odometar */
.v5 .odo { display: inline-block; }
.v5 .odo > span { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: bottom; text-align: center; font-variant-numeric: tabular-nums; }
.v5 .odo > span > span { display: block; transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
.v5 .odo > span > span > span { display: block; height: 1em; line-height: 1; }

/* --- traka --- */
.v5 .ticker { overflow: hidden; background: var(--v5-ink); padding: 14px 0; margin-top: clamp(48px, 6vw, 92px); }
/* Nosi samo pomak po brzini skrola (#57). Postoji zato sto __track vec trosi
   svoj transform na marquee animaciju, a JS ne moze dopisati drugi na isti
   element. Pomak ne smije ici na .ticker: ona je puna sirina i pomicanje bi
   otkrilo pozadinu uz rub. */
.v5 .ticker__shift { will-change: transform; }
.v5 .ticker__track {
  display: flex; width: max-content; gap: 26px; padding-right: 26px;
  font-weight: 800; font-size: 0.9375rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v5-paper); animation: v5-marq 32s linear infinite; will-change: transform;
}
.v5 .ticker__track b { color: var(--v5-accent); font-weight: 800; }
@keyframes v5-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes v5-clank {
  0% { transform: translate3d(0, 0, 0); }
  18% { transform: translate3d(-5px, 4px, 0) scaleY(.985); }
  42% { transform: translate3d(4px, -2px, 0); }
  70% { transform: translate3d(-2px, 1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --- galerija programa --- */
/* Match the other content sections so zooming out does not stretch the cards. */
.v5 .program { width: 100%; max-width: var(--v5-max); margin-inline: auto; padding: clamp(52px, 6vw, 96px) 0 0; overflow: hidden; }
/* GH #154: traka je 1300px u okviru od 375px, a pomice ju landing-v5.js
   kosinusnom petljom od 34s. Uz prefers-reduced-motion ta skripta izlazi
   prije nego sto stvori IntersectionObserver, galleryOn ostaje false, traka
   se nikad ne pomakne -- i 925px sadrzaja je trajno nevidljivo. Kad animacije
   nema, jedini nacin da se do njega dodje je rucni skrol, pa ga ovdje dobiva.
   Izvan tog upita se ne dira: skrol i transform iz skripte bi se borili. */
@media (prefers-reduced-motion: reduce) {
  .v5 .program { overflow-x: auto; overscroll-behavior-x: contain; }
  .v5 .program__track { transform: none !important; }
}
.v5 .program__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 var(--v5-pad) 24px; }
.v5 .program__count { font-size: 0.71875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--v5-faint); white-space: nowrap; }
.v5 .program__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 0 var(--v5-pad); }
.v5 .program__card { min-width: 0; padding: 16px 16px 22px; border: 1px solid var(--v5-line); border-radius: var(--v5-radius); background: var(--v5-surface); }
.v5 .program__card .ph, .v5 .program__live { aspect-ratio: 3 / 4; }
.v5 .program__live {
  display: flex; align-items: center; justify-content: center; position: relative;
  background: var(--v5-accent); color: var(--v5-on-accent);
  font-weight: 800; font-size: clamp(2.125rem, 4vw, 3.625rem); line-height: .9; letter-spacing: -.03em; text-align: center;
}
.v5 .program__num { position: absolute; left: 14px; top: 14px; font-weight: 800; font-size: 0.8125rem; color: var(--v5-accent-dark); }
.v5 .program__live .program__num { color: var(--v5-on-accent); }
.v5 .program__card h3 { margin-top: 14px; }
.v5 .program__card p { margin-top: 4px; font-size: 0.875rem; color: var(--v5-muted); }

/* Ilustrirani pregled programa: svi dijelovi ostaju na mjestu dok se čitaju. */
.v5 .program__icon { position: relative; display: grid; place-items: center; min-height: 142px; border-radius: 12px; color: var(--v5-ink); background: var(--v5-wash-soft); }
.v5 .program__icon svg { width: 66px; height: 66px; }
.v5 .program__icon--live { color: var(--v5-on-accent); background: var(--v5-accent); }
.v5 .program__icon--live .program__num { color: var(--v5-on-accent); }
.v5 .program__card h3 { font-size: 1.0625rem; }
.v5 .hero__overview { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--v5-line-soft); border-radius: 32px; background: var(--v5-accent-soft); }
.v5 .hero__overview { background: radial-gradient(ellipse at 10% 10%, var(--v5-surface), transparent 80%), var(--v5-accent-soft); box-shadow: 0 24px 60px -48px var(--v5-shadow-color); }
.v5 .hero__brand { margin: 28px 0; }
.v5 .hero__overview-top { display: flex; align-items: center; justify-content: space-between; font-size: 0.6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.v5 .hero__overview-top > span:last-child { color: var(--v5-accent); font-size: 2.125rem; }
.v5 .hero__orbit { width: min(100%, 300px); aspect-ratio: 1; margin: 28px auto; border: 18px solid var(--v5-accent); border-right-color: var(--v5-paper); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--v5-paper); box-shadow: 0 0 0 12px var(--v5-line-soft); }
.v5 .hero__orbit-mark { font-size: 5rem; line-height: 1; font-weight: 500; }
.v5 .hero__orbit-label { max-width: 7ch; margin-top: 8px; font-size: 1.625rem; line-height: 1.15; font-weight: 800; letter-spacing: -.04em; text-align: center; }
.v5 .hero__overview-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v5 .hero__overview-items > span { display: flex; flex-direction: column; gap: 9px; padding: 14px 12px; border: 1px solid var(--v5-line-soft); border-radius: 12px; background: var(--v5-surface); font-size: 0.6875rem; font-weight: 700; }
.v5 .hero__overview-items b { color: var(--v5-muted); font-size: 0.625rem; font-weight: 500; }
@media (max-width: 1000px) {
  .v5 .program__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .v5 .program__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5 .hero { margin-top: 142px; padding: 32px 24px; }
  .v5 .hero__overview { max-width: 460px; width: 100%; justify-self: center; }
}
@media (max-width: 400px) {
  .v5 .program__track { grid-template-columns: 1fr; }
  .v5 .program__icon { min-height: 120px; }
}

/* --- prije / poslije --- */
.v5 .results { position: relative; overflow: hidden; max-width: var(--v5-max); margin: 0 auto; padding: clamp(52px, 6vw, 96px) var(--v5-pad) 0; }
.v5 .results__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.v5 .results__sweep {
  position: absolute; left: 0; top: 0; z-index: 5; width: 42%; height: 220%; margin-top: -60%;
  background: var(--v5-accent); opacity: 0; pointer-events: none;
  transform: translateX(-140%) rotate(14deg); will-change: transform, opacity;
}
.v5 .results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; margin-top: 24px; perspective: 1400px; }
.v5 .ba {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; cursor: ew-resize;
  background: var(--v5-stripe-a); border: 1px solid var(--v5-line);
  transition: opacity .4s ease, filter .4s ease;
}
.v5 .ba__layer { position: absolute; inset: 0; }
.v5 .ba__layer--before {
  background: repeating-linear-gradient(135deg, var(--v5-stripe-a) 0 12px,
              var(--v5-stripe-b) 12px 24px);
}
.v5 .ba__layer--after {
  z-index: 1;
  background: repeating-linear-gradient(135deg, var(--lv5-after-a) 0 12px,
              var(--lv5-after-b) 12px 24px);
  clip-path: inset(0 0 0 50%); will-change: clip-path, transform;
}
.v5 .ba__layer img { width: 100%; height: 100%; object-fit: cover; }
.v5 .ba__tag {
  position: absolute; top: 10px; z-index: 3; padding: 4px 8px;
  font-size: 0.625rem; font-weight: 700; letter-spacing: .1em; transition: opacity .2s;
}
.v5 .ba__tag--before { left: 10px; background: var(--v5-paper); color: var(--v5-nav-link); }
.v5 .ba__tag--after { right: 10px; background: var(--v5-accent); color: var(--v5-on-accent); }
.v5 .ba__line { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4; width: 2px; margin-left: -1px; background: var(--v5-accent); will-change: left; }
.v5 .ba__handle {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 2px solid var(--v5-accent); border-radius: 50%; background: var(--lv5-handle-fill);
}
.v5 .ba__flash { position: absolute; inset: 0; z-index: 5; background: var(--lv5-flash); opacity: 0; pointer-events: none; }
.v5 .ba__meta { position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: 4px 8px; font-size: 0.75rem; font-weight: 700; color: var(--v5-body-dark);
  background: var(--lv5-meta-fill); }

/* --- cijene i završni CTA --- */
.v5 .pricing { max-width: var(--v5-max); margin: 0 auto; padding: clamp(52px, 6vw, 96px) var(--v5-pad) 0; }
.v5 .final { max-width: var(--v5-max); margin: 0 auto; padding: clamp(52px, 6vw, 96px) var(--v5-pad) 0; }
.v5 .final__box { background: var(--v5-accent); color: var(--v5-on-accent); padding: clamp(38px, 5vw, 72px) clamp(22px, 3vw, 48px); }
.v5 .final__box { border: 1px solid var(--v5-line-soft); border-radius: 28px; background: linear-gradient(120deg, var(--v5-accent-soft), var(--v5-surface)); color: var(--v5-ink); }
.v5 .final__box h2 { font-size: clamp(1.875rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.04em; max-width: 14ch; }
.v5 .final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
.v5 .final__actions .note { color: var(--v5-body); font-size: 0.9375rem; }

/* Naslovnica ima sticky CTA i podnožju treba prostor ispod njega; od GH #458
   to je razmak koji podnozje.css daje svakom podnožju. */

@media (prefers-reduced-motion: reduce) {
  .v5 .loader { display: none; }
  .v5 .ticker__track { animation: none; }
  .v5 .ticker__shift { transform: none !important; }
  .v5 .plate { opacity: 1 !important; transform: none !important; }
  .v5 .ba__layer--after { clip-path: inset(0 0 0 50%) !important; }
  .v5 .cursor, .v5 .cursor-dot { display: none; }
}

/* ===========================================================================
   TAMNA PALETA (GH #211, korak 2)

   TRI STANJA, NE DVA. Svijetla paleta stoji na golom `:root`, pa vrijedi i
   kad clan nije izabrao nista i uredaj je svijetao. Tamnu nose dva bloka, i
   oba su potrebna:

     @media (prefers-color-scheme: dark) { :root:not([data-tema="svijetlo"]) }
       -- uredaj je taman, a clan nije izabrao svijetlo. Bez `:not(...)` bi
          izricit izbor svijetle teme izgubio od postavke uredaja.
     :root[data-tema="tamno"]
       -- clan je izabrao tamno, bez obzira na uredaj. Dolazi POSLIJE, pa kod
          jednake tezine pobjeduje izbor.

   Cetiri kombinacije se time razrjesavaju bez ijednog daljnjeg pravila:
   izabrano svijetlo pobjeduje tamni uredaj, izabrano tamno pobjeduje svijetli
   uredaj, a bez izbora vrijedi uredaj.

   `color-scheme` nije ukras: bez njega izvorne kontrole (polja, padajuci
   izbornici, kliznik) i traka za pomicanje ostaju svijetle na tamnoj stranici.

   ISTI POPIS JE UPISAN DVAPUT jer CSS nema nacina da jedan blok deklaracija
   veze uz medijski upit I uz atribut bez ponavljanja (nema build koraka koji
   bi to generirao). Da se dvije kopije ne raziđu, `TemaPaletaTest` trazi da
   budu znak po znak jednake, i da zajedno pokriju svaki token svijetle
   palete osim onih koji su izricito izuzeti.
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svijetlo"]) {
    /* Kursor i okvir uz hero -- akcent razrijeden, prati podignuti akcent. */
    --lv5-cursor-hot: rgba(87, 156, 217, .26);
    --lv5-frame-line: rgba(87, 156, 217, .5);
    --lv5-cell-line: rgba(248, 248, 248, .16);

    /* Prije/poslije: oba para prate --v5-stripe-a/-b u tamno, a razlika medu
       njima ostaje ista velicina, jer o njoj ovisi da se kliznik uopce vidi. */
    --lv5-after-a: #394858;
    --lv5-after-b: #45586b;
    --lv5-handle-fill: rgba(30, 30, 30, .94);
    --lv5-meta-fill: rgba(30, 30, 30, .94);

    /* Bljesak pri prevlacenju. Cista bijela na tamnoj stranici je udarac u
       oko, pa uzima papir. */
    --lv5-flash: #f8f8f8;

    /* Na .final__box, koji je ispunjen akcentom -- prati --v5-on-dark. */
    --lv5-final-note: #323d47;
  }
}

:root[data-tema="tamno"] {
  /* Kursor i okvir uz hero -- akcent razrijeden, prati podignuti akcent. */
  --lv5-cursor-hot: rgba(87, 156, 217, .26);
  --lv5-frame-line: rgba(87, 156, 217, .5);
  --lv5-cell-line: rgba(248, 248, 248, .16);

  /* Prije/poslije: oba para prate --v5-stripe-a/-b u tamno, a razlika medu
     njima ostaje ista velicina, jer o njoj ovisi da se kliznik uopce vidi. */
  --lv5-after-a: #394858;
  --lv5-after-b: #45586b;
  --lv5-handle-fill: rgba(30, 30, 30, .94);
  --lv5-meta-fill: rgba(30, 30, 30, .94);

  /* Bljesak pri prevlacenju. Cista bijela na tamnoj stranici je udarac u
     oko, pa uzima papir. */
  --lv5-flash: #f8f8f8;

  /* Na .final__box, koji je ispunjen akcentom -- prati --v5-on-dark. */
  --lv5-final-note: #323d47;
}