/* ==========================================================================
   Fitko naslovnica — dizajnerski prototip, druga iteracija (11.11.2026.)
   Sve klase imaju prefiks fk- kako se ne bi sudarale s postojećim
   style.css / custom.css / Bootstrapom pri postupnoj integraciji.
   Snimke zaslona dolaze iz potvrđenog manifesta (vidi README.md).
   Slot bez potvrđene snimke ne prikazuje ništa: nema placeholdera.
   ========================================================================== */

/* ---------- Font: postojeći self-hosted Manrope ---------- */
@font-face { font-family: "Manrope"; src: url("/fitko/fonts/manrope/Manrope-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fitko/fonts/manrope/Manrope-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fitko/fonts/manrope/Manrope-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fitko/fonts/manrope/Manrope-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fitko/fonts/manrope/Manrope-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- Tokeni (kontrast provjeren prema WCAG 2.x) ---------- */
:root {
  --fk-ink: #0F1A14;          /* 16,8:1 na cream */
  --fk-ink-2: #26332B;
  --fk-muted: #4A5A50;        /* 6,9:1 na cream, 6,5:1 na sand */

  /* Exact dominant colour of public/fitko/images/logo.webp. */
  --fk-brand: #6EAE84;
  --fk-action: #4B7F5D;       /* primary buttons: white text 4.67:1 */
  --fk-action-hover: #416F51; /* hover gets darker to preserve contrast */
  --fk-on-action: #FFFFFF;
  --fk-brand-edge: #4E825F;
  --fk-brand-soft: #E3EFE6;
  --fk-brand-mist: #CDE3D4;
  --fk-on-brand: #0F1A14;      /* 6.83:1 on the original logo green */
  --fk-on-brand-muted: #26332B; /* 5.06:1 on the original logo green */

  --fk-forest: #2B6541;       /* text links; 6.51:1 on cream */
  --fk-sage: var(--fk-brand);
  --fk-sage-tint: var(--fk-brand-soft);

  --fk-cream: #FAF8F3;
  --fk-sand: #F4F1EA;
  --fk-paper: #FFFFFF;
  --fk-line: #DFE5DE;
  --fk-line-strong: #C5D2C8;

  --fk-radius-s: 12px;
  --fk-radius: 20px;
  --fk-radius-l: 32px;
  --fk-shadow: 0 1px 2px rgba(15, 26, 20, .06), 0 18px 40px -20px rgba(15, 26, 20, .22);

  --fk-container: 1200px;
  --fk-gutter: clamp(16px, 4vw, 32px);
  --fk-section: clamp(64px, 9vw, 120px);
  --fk-header-h: 64px;

  --fk-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fk-text: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fk-h1: clamp(2.125rem, 1.45rem + 3vw, 3.625rem);
  --fk-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
  --fk-h3: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
}

/* ---------- Osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--fk-header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--fk-font);
  font-size: var(--fk-text);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fk-ink);
  background: var(--fk-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Keep body out of the menu scroll lock: a new body scroll container
   would move the sticky header offscreen when the page is already scrolled. */
html.is-menu-open,
html.is-zoom-open, html.is-zoom-open body { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--fk-forest); }
strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--fk-forest);
  outline-offset: 3px;
  border-radius: 6px;
}
.fk-cta :focus-visible,
.fk-hero__stage :focus-visible { outline-color: var(--fk-on-brand); }
.fk-zoom :focus-visible { outline-color: var(--fk-brand); }

.fk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fk-icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.fk-icon--sm { width: 18px; height: 18px; }

.fk-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fk-skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: var(--fk-radius-s);
  background: var(--fk-ink); color: #fff; font-weight: 700; text-decoration: none;
}
.fk-skip:focus { top: 12px; }

.fk-container {
  width: 100%;
  max-width: calc(var(--fk-container) + 2 * var(--fk-gutter));
  margin-inline: auto;
  padding-inline: var(--fk-gutter);
}
.fk-section { padding-block: var(--fk-section); }

/* ---------- Tipografski elementi ---------- */
.fk-eyebrow {
  margin-bottom: 14px;
  font-size: .875rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fk-forest);
}
.fk-eyebrow--on-dark { color: var(--fk-forest); }

.fk-section-head { max-width: 44rem; margin-bottom: clamp(32px, 4vw, 56px); }
.fk-section-head h2 { font-size: var(--fk-h2); line-height: 1.12; margin-bottom: 16px; }
.fk-section-head p { color: var(--fk-muted); max-width: 38rem; }
.fk-section-head .fk-eyebrow,
.fkp-hero .fk-eyebrow,
.fkp-intro .fk-eyebrow,
.fkl-start__intro .fk-eyebrow,
.fkl-flow .fk-section-head .fk-eyebrow { color: var(--fk-forest); }

.fk-note { font-size: .9375rem; color: var(--fk-muted); }
.fk-note a { font-weight: 700; }

/* ---------- Gumbi i linkovi ---------- */
.fk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border: 1.5px solid transparent; border-radius: 999px;
  font: 700 1rem/1.2 var(--fk-font);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.fk-btn--primary { background: var(--fk-action); color: var(--fk-on-action); border-color: var(--fk-action); }
.fk-btn--primary:hover { background: var(--fk-action-hover); border-color: var(--fk-action-hover); }
.fk-btn--light { background: var(--fk-paper); color: var(--fk-ink); }
.fk-btn--light:hover { background: var(--fk-brand-soft); }
.fk-btn--lg { min-height: 54px; padding-inline: 28px; font-size: 1.0625rem; }
.fk-btn--block { display: flex; width: 100%; }

.fk-link-arrow {
  padding-block: 9px; margin-block: -9px;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--fk-forest);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .28em;
}
.fk-link-arrow:hover { text-decoration-thickness: 2.5px; }
.fk-link-arrow .fk-icon { transition: transform .2s ease; }
.fk-link-arrow:hover .fk-icon { transform: translateX(3px); }
.fk-link-arrow--sm { font-size: .9375rem; }

/* ---------- Kvačice ---------- */
.fk-checks { list-style: none; display: grid; gap: 10px; }
.fk-checks li { position: relative; padding-left: 32px; }
.fk-checks li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--fk-sage-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B6541' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.fk-checks--on-dark li::before {
  background-color: var(--fk-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1A14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E");
}
@media (min-width: 640px) {
  .fk-checks--2col { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.fk-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 243, .92);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fk-header {
    background: rgba(250, 248, 243, .82);
    -webkit-backdrop-filter: saturate(1.2) blur(14px);
    backdrop-filter: saturate(1.2) blur(14px);
  }
}
.fk-header.is-scrolled { border-color: var(--fk-line); }

.fk-header__bar { display: flex; align-items: center; gap: 10px; height: var(--fk-header-h); }

.fk-brand {
  display: inline-flex; align-items: center; gap: 10px;
  margin-right: auto;
  color: var(--fk-ink); text-decoration: none;
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em;
}
.fk-brand img { width: 36px; height: 36px; border-radius: 10px; }
.fk-brand--on-dark { color: var(--fk-ink); }

.fk-header__cta { min-height: 40px; padding: 8px 16px; font-size: .9375rem; }
.fk-header__bar > .fk-brand, .fk-menu-toggle { flex-shrink: 0; }
@media (max-width: 359px) {
  .fk-header__bar { gap: 8px; }
  .fk-header__cta { padding-inline: 10px; font-size: .875rem; }
}

.fk-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--fk-line-strong); border-radius: 12px;
  background: var(--fk-paper); color: var(--fk-ink); cursor: pointer;
}
.fk-menu-toggle__close { display: none; }
.fk-menu-toggle[aria-expanded="true"] .fk-menu-toggle__open { display: none; }
.fk-menu-toggle[aria-expanded="true"] .fk-menu-toggle__close { display: block; }

.fk-nav { display: none; }

/* Mobilni izbornik (izvan headera zbog backdrop-filtera) */
.fk-mobile {
  position: fixed; inset: var(--fk-header-h) 0 0 0; z-index: 49;
  display: flex; flex-direction: column; gap: 24px;
  padding: 8px var(--fk-gutter) 32px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--fk-cream);
  border-top: 1px solid var(--fk-line);
}
.fk-mobile nav > ul,
.fk-mobile__sub ul { list-style: none; }
.fk-mobile__group > summary,
.fk-mobile__list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 2px;
  border-bottom: 1px solid var(--fk-line);
  color: var(--fk-ink); font-size: 1.125rem; font-weight: 700; text-decoration: none;
  cursor: pointer; list-style: none;
}
.fk-mobile__group > summary::-webkit-details-marker { display: none; }
.fk-mobile__group[open] > summary .fk-icon { transform: rotate(180deg); }
.fk-mobile__sub { padding: 8px 0 16px; border-bottom: 1px solid var(--fk-line); }
.fk-mobile__title {
  margin: 12px 0 4px;
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fk-muted);
}
.fk-mobile__sub a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--fk-ink); font-weight: 600; text-decoration: none;
}
.fk-mobile__contact { list-style: none; display: grid; gap: 4px; }
.fk-mobile__contact a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--fk-ink-2); font-weight: 600; text-decoration: none;
}

/* Bez JS-a: navigacija se prikazuje u retku ispod loga */
.no-js .fk-menu-toggle { display: none; }
.no-js .fk-header__bar { flex-wrap: wrap; height: auto; padding-block: 12px; }
.no-js .fk-nav { display: block; order: 3; width: 100%; }
.no-js .fk-nav__list { flex-wrap: wrap; }

@media (min-width: 1024px) {
  .fk-header__bar { gap: 8px; }
  .fk-brand { margin-right: 24px; }
  .fk-nav { display: block; margin-right: auto; }
  .fk-menu-toggle, .fk-mobile { display: none !important; }
  .fk-header__cta { min-height: 44px; padding-inline: 20px; }
}

.fk-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; }
.fk-nav__item { position: relative; }
.fk-nav__link,
.fk-nav__trigger {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 999px; background: none;
  color: var(--fk-ink); font: 600 .9375rem/1 var(--fk-font);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease;
}
.fk-nav__link:hover,
.fk-nav__trigger:hover,
.fk-nav__item--menu.is-open .fk-nav__trigger { background: var(--fk-sage-tint); }
.fk-nav__trigger .fk-icon { transition: transform .2s ease; }
.fk-nav__item--menu.is-open .fk-nav__trigger .fk-icon { transform: rotate(180deg); }

.fk-mega {
  position: absolute; top: calc(100% + 10px); left: -8px; z-index: 60;
  display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); gap: 28px;
  width: max-content; padding: 24px 28px;
  background: var(--fk-paper);
  border: 1px solid var(--fk-line); border-radius: var(--fk-radius);
  box-shadow: var(--fk-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.fk-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.fk-nav__item--menu.is-open .fk-mega,
.no-js .fk-nav__item--menu:focus-within .fk-mega {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .15s ease, transform .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .fk-nav__item--menu:hover .fk-mega {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .15s ease, transform .15s ease;
  }
}
.fk-mega__title {
  margin-bottom: 8px;
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fk-muted);
}
.fk-mega ul { list-style: none; display: grid; gap: 2px; }
.fk-mega a {
  display: block; margin-inline: -10px; padding: 9px 10px;
  border-radius: 10px;
  color: var(--fk-ink); font-weight: 600; text-decoration: none;
}
.fk-mega a:hover { background: var(--fk-sage-tint); }

/* ==========================================================================
   Snimke zaslona: okvir mobitela (.fk-shot / .fk-phone)
   - omjer dolazi iz width/height atributa slike (1206×2622, 1320×2868 …)
   - okvir ne prekriva statusbar ni dynamic island iz snimke
   ========================================================================== */
.fk-shot {
  --w: min(272px, 70vw);
  display: grid; justify-items: center; gap: 12px;
  width: max-content; max-width: 100%; margin: 0;
}
.fk-shot--hero { --w: min(320px, 80vw); }
.fk-shot--sm { --w: min(172px, 42vw); }
.fk-shot--pair { --w: min(168px, 42vw); } /* na mobitelu u paru, na desktopu sam */
.fk-shot--full { --w: min(300px, 78vw); } /* cijeli zaslon i na mobitelu (kad su ključni podaci nisko) */
@media (min-width: 960px) {
  .fk-shot { --w: 288px; }
  .fk-shot--hero { --w: clamp(300px, 25vw, 356px); }
  .fk-shot--sm { --w: 232px; }
  .fk-shot--pair { --w: 300px; }
  .fk-only-mobile { display: none; }
}

/* Napomena uz demonstracijske snimke (datumi i paketi nisu aktualna ponuda) */
.fk-demo-note {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: .875rem; line-height: 1.45; text-align: center;
  color: var(--fk-muted);
}

.fk-shot__open {
  position: relative; /* drži vizualno skriveni tekst unutar okvira (inače širi stranicu u galeriji) */
  display: grid; justify-items: center; gap: 12px;
  color: inherit; text-decoration: none; cursor: zoom-in;
  border-radius: calc(var(--w) * .16);
}
.fk-shot__open:focus-visible { outline-offset: 6px; }

.fk-phone {
  position: relative; display: block; width: var(--w);
  padding: calc(var(--w) * .03);
  border-radius: calc(var(--w) * .157);
  background: linear-gradient(150deg, #33383a 0%, #121415 38%, #0a0b0b 62%, #26292a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 0 0 3px rgba(0, 0, 0, .55),
    0 44px 80px -40px rgba(0, 0, 0, .6),
    0 20px 36px -22px rgba(0, 0, 0, .5);
}
.fk-phone::before,
.fk-phone::after { /* bočne tipke, izvan zaslona */
  content: ""; position: absolute; width: 3px; border-radius: 2px; background: #1b1e1f;
}
.fk-phone::before { right: -3px; top: 25%; height: 11%; }
.fk-phone::after { left: -3px; top: 19%; height: 7%; box-shadow: 0 calc(var(--w) * .13) 0 #1b1e1f; }

.fk-phone__screen {
  display: block; overflow: hidden;
  border-radius: calc(var(--w) * .127); /* ≈ radijus iPhone zaslona; kutovi ne zadiru u sat ni bateriju */
  background: #E9E6E0;
}
.fk-phone__screen img { display: block; width: 100%; height: auto; }

.fk-shot__hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  font-size: .875rem; font-weight: 700; line-height: 1.2;
  background: var(--fk-sage-tint); color: var(--fk-forest);
  transition: background-color .15s ease, color .15s ease;
}
.fk-shot__open:hover .fk-shot__hint { background: var(--fk-brand); color: var(--fk-on-brand); }

.fk-shot__caption {
  max-width: calc(var(--w) + 48px);
  font-size: .875rem; line-height: 1.45; text-align: center;
  color: var(--fk-muted);
}
.fk-shot__caption strong { display: block; color: var(--fk-ink); font-size: .9375rem; }

/* Captions stay dark and readable on logo-green and pale-green panels. */
.fk-hero__stage .fk-shot__caption { color: var(--fk-on-brand-muted); }
.fk-hero__stage .fk-shot__caption strong,
.fk-entry .fk-shot__caption strong { color: var(--fk-on-brand); }
.fk-entry .fk-shot__hint { background: var(--fk-paper); color: var(--fk-forest); }
.fk-entry .fk-shot__open:hover .fk-shot__hint { background: var(--fk-brand); color: var(--fk-on-brand); }

/* Na uskom ekranu: gornji dio zaslona veći i čitljiviji, ostatak kroz uvećanje */
@media (max-width: 719px) {
  .fk-shot--crop { --w: min(304px, 80vw); }
  .fk-shot--crop .fk-phone {
    max-height: calc(var(--w) * 1.28); overflow: hidden;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  }
  .fk-shot--crop .fk-shot__open { gap: 4px; }
}

/* Slika ne postoji: figura se ne prikazuje (bez placeholdera i putanja) */
.fk-shot.is-missing { display: none; }

/* Par snimki (npr. raspored + detalj termina) */
.fk-shots { display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 3vw, 28px); }
.fk-shots > .fk-shot + .fk-shot { margin-top: 40px; }
@media (min-width: 960px) {
  .fk-shots > .fk-shot + .fk-shot { margin-top: 64px; }
  .fk-shots > .fk-only-mobile + .fk-shot { margin-top: 0; }
}

/* Galerija white-label aplikacija: na mobitelu vodoravni niz, na desktopu mreža */
.fk-gallery-wrap { margin-top: clamp(40px, 5vw, 64px); }
.fk-gallery-wrap:focus-visible { outline-offset: 8px; border-radius: var(--fk-radius); }
.fk-gallery__title {
  margin-bottom: 20px;
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fk-muted);
}
.fk-gallery-wrap:not(:has(.fk-gallery > li)) { display: none; }
.fk-gallery {
  position: relative;
  list-style: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(44%, 200px); gap: 16px;
  margin-inline: calc(var(--fk-gutter) * -1);
  padding: 4px var(--fk-gutter) 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--fk-gutter);
  scrollbar-width: thin;
}
.fk-gallery > li { scroll-snap-align: start; container-type: inline-size; display: flex; justify-content: center; }
.fk-gallery .fk-shot { --w: 160px; --w: 100cqi; }
@media (min-width: 960px) {
  .fk-gallery {
    grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 28px; margin-inline: 0; padding: 0; overflow: visible;
  }
  .fk-gallery .fk-shot { --w: 200px; --w: min(100cqi, 232px); }
  .fk-gallery > li:nth-child(even) { padding-top: 40px; }
}

/* Povećani detalj stvarne snimke (npr. prazna polja Stripe obrasca) uz iPhone okvir.
   Slika zadržava izvorni omjer iz width/height atributa; ne prikazuje se kao puni zaslon. */
.fk-callout { position: relative; display: grid; justify-items: center; }
.fk-detail { margin: 0; display: grid; justify-items: center; gap: 10px; width: min(300px, 84vw); }
.fk-detail__open {
  position: relative; display: block; width: 100%; overflow: hidden;
  border: 1px solid var(--fk-line-strong); border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 26, 20, .08), 0 28px 56px -26px rgba(15, 26, 20, .5);
  cursor: zoom-in;
}
.fk-detail__open img { display: block; width: 100%; height: auto; }
.fk-detail .fk-shot__caption { max-width: none; }
.fk-detail.is-missing { display: none; }
/* Ispod 1200 px detalj stoji ispod snimke. Od 1200 px stepenasto lijevo od mobitela,
   s razmakom: nikad ne prekriva sadržaj zaslona ni statusbar. */
.fk-callout__detail { position: relative; z-index: 2; margin-top: 24px; }
@media (min-width: 960px) {
  /* specifičnost veća od općeg pravila za .fk-feature sa snimkom */
  .fk-feature:has(.fk-feature__media .fk-callout figure:not(.is-missing)) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
@media (min-width: 1200px) {
  .fk-callout { justify-items: end; width: 100%; max-width: 580px; margin-left: auto; }
  .fk-callout__detail { position: absolute; left: 0; bottom: 120px; margin-top: 0; width: 268px; }
}

/* Web admin u okviru preglednika */
.fk-browser { margin: 0; display: grid; gap: 12px; }
.fk-browser__open {
  display: block; overflow: hidden;
  border: 1px solid var(--fk-line-strong); border-radius: 16px;
  background: #fff; box-shadow: var(--fk-shadow);
  color: inherit; text-decoration: none; cursor: zoom-in;
}
.fk-browser__bar {
  display: flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: #F1EEE7; border-bottom: 1px solid var(--fk-line);
}
.fk-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5CFC3; }
.fk-browser__open img { display: block; width: 100%; height: auto; }
.fk-browser .fk-shot__caption { max-width: none; text-align: left; }
.fk-browser.is-missing { display: none; }

/* Uvećani prikaz (dijalog stvara homepage.js; bez JS-a poveznica otvara samu sliku) */
.fk-zoom {
  width: 100%; height: 100%; max-width: none; max-height: none;
  height: 100dvh;
  margin: 0; padding: 72px 16px 24px; border: 0;
  background: transparent; color: #fff;
}
.fk-zoom::backdrop { background: rgba(9, 16, 12, .97); }
.fk-zoom[open] { display: grid; place-items: center; }
.fk-zoom__inner {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center;
  width: 100%; height: 100%; min-height: 0; gap: 14px; max-width: 100%;
}
.fk-zoom__figure {
  margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center;
  width: 100%; height: 100%; min-height: 0; gap: 12px;
}
.fk-zoom__img {
  display: block; width: auto; height: auto;
  max-width: min(100%, 520px);
  max-height: 100%; min-height: 0; align-self: center; object-fit: contain;
  border-radius: 28px;
  background: #1d2420;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.fk-zoom--wide .fk-zoom__img { max-width: min(100%, 1440px); border-radius: 14px; }
.fk-zoom__caption { max-width: 36rem; font-size: .9375rem; line-height: 1.45; text-align: center; color: #E1ECE4; }
.fk-zoom__caption strong { display: block; color: #fff; }
.fk-zoom__note { display: block; margin-top: 4px; font-size: .875rem; color: #BFD3C5; }
.fk-zoom__close {
  position: fixed; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
}
.fk-zoom__close:hover { background: rgba(255, 255, 255, .24); }
.fk-zoom__nav { display: flex; align-items: center; gap: 18px; }
.fk-zoom__btn {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28); background: transparent;
  color: #fff; cursor: pointer;
}
.fk-zoom__btn:hover { background: rgba(255, 255, 255, .12); }
.fk-zoom__count { min-width: 5ch; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; color: #E1ECE4; }
@media (min-width: 600px) and (max-height: 600px) {
  .fk-zoom { padding: 16px 76px 16px 24px; }
  .fk-zoom__figure { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: 24px; }
  .fk-zoom__img, .fk-zoom--wide .fk-zoom__img { max-width: 100%; }
  .fk-zoom__caption { text-align: left; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.fk-hero {
  padding-block: clamp(20px, 4vw, 64px) clamp(40px, 6vw, 88px);
  background: linear-gradient(180deg, var(--fk-cream) 0%, var(--fk-sand) 100%);
}
.fk-hero__grid { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
@media (min-width: 960px) {
  .fk-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .fk-hero__grid:has(.fk-shot--secondary:not(.is-missing)) { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}

.fk-hero__copy { max-width: 36rem; }
.fk-hero__title { margin-bottom: 18px; font-size: var(--fk-h1); line-height: 1.06; letter-spacing: -.03em; }
.fk-hero__lead {
  margin-bottom: 26px;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height: 1.5;
  color: var(--fk-ink-2);
}
.fk-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.fk-hero__audience { margin-top: 20px; font-size: .9375rem; line-height: 1.5; color: var(--fk-muted); }

.fk-hero__stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; justify-content: center;
  padding: clamp(28px, 4vw, 48px) 16px clamp(20px, 3vw, 32px);
  border-radius: var(--fk-radius-l);
  background: linear-gradient(160deg, var(--fk-brand-mist) 0%, var(--fk-brand) 45%);
}
.fk-hero__stage:not(:has(.fk-shot:not(.is-missing))) { display: none; }
.fk-hero__stage::before,
.fk-hero__stage::after { /* tanki prstenovi kao mirni dekor */
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  left: 50%; transform: translateX(-50%);
}
.fk-hero__stage::before { width: 135%; aspect-ratio: 1; top: 16%; }
.fk-hero__stage::after { width: 95%; aspect-ratio: 1; top: 30%; border-color: rgba(255, 255, 255, .3); }

.fk-hero__phones { display: flex; justify-content: center; align-items: flex-start; gap: 24px; }
/* U heroju i galeriji "Uvećaj" ostaje dostupan čitaču zaslona, ali se ne prikazuje */
.fk-hero .fk-shot__hint,
.fk-gallery .fk-shot__hint {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fk-shot--secondary { display: none; }
@media (min-width: 960px) {
  .fk-hero__phones { gap: 16px; }
  .fk-hero__phones:not(:has(.fk-shot--secondary)) .fk-shot--hero { --w: clamp(280px, 23vw, 320px); }
  .fk-shot--secondary { display: grid; --w: clamp(160px, 17vw, 244px); margin-top: 84px; }
  .fk-hero__phones:has(.fk-shot--secondary:not(.is-missing)) .fk-shot--hero { --w: clamp(200px, 21vw, 300px); }
}

/* ==========================================================================
   Dokaz: aplikacije studija (logotipi)
   ========================================================================== */
.fk-proof {
  padding-block: clamp(36px, 5vw, 56px);
  background: var(--fk-cream);
  border-bottom: 1px solid var(--fk-line);
}
.fk-proof__inner { display: grid; gap: 20px; }
.fk-proof__head { display: grid; gap: 8px; justify-items: start; }
.fk-proof__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; }

.fk-proof__list { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.fk-proof__list a {
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; text-decoration: none; color: var(--fk-ink);
}
.fk-proof__list img {
  width: 100%; max-width: 56px; height: auto; aspect-ratio: 1; border-radius: 22%;
  box-shadow: 0 0 0 1px rgba(15, 26, 20, .08), 0 6px 14px -8px rgba(15, 26, 20, .35);
}
.fk-proof__list span { /* naziv: vidljiv od tableta, uvijek dostupan čitaču zaslona */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (min-width: 768px) {
  .fk-proof__list { display: flex; flex-wrap: wrap; gap: 10px; }
  .fk-proof__list a {
    gap: 10px; padding: 6px 14px 6px 6px;
    border: 1px solid var(--fk-line); border-radius: 999px; background: var(--fk-paper);
    transition: border-color .15s ease;
  }
  .fk-proof__list a:hover { border-color: var(--fk-forest); }
  .fk-proof__list img { width: 36px; height: 36px; max-width: none; border-radius: 9px; box-shadow: 0 0 0 1px rgba(15, 26, 20, .08); }
  .fk-proof__list span {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap;
    font-size: .9375rem; font-weight: 600;
  }
}
@media (min-width: 1100px) {
  .fk-proof__inner { grid-template-columns: 260px 1fr; gap: 40px; align-items: center; }
}

/* ==========================================================================
   Za koga
   ========================================================================== */
.fk-segments { background: var(--fk-paper); }
.fk-segments__grid { display: grid; gap: 8px; }
@media (min-width: 960px) {
  .fk-segments__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .fk-segments__head { position: sticky; top: calc(var(--fk-header-h) + 32px); margin-bottom: 0; }
}
.fk-segments__list { list-style: none; border-top: 1px solid var(--fk-line); }
.fk-segments__list li { border-bottom: 1px solid var(--fk-line); }
.fk-segment {
  display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px;
  padding: 22px 0;
  color: var(--fk-ink); text-decoration: none;
}
.fk-segment__num {
  grid-row: span 2; padding-top: 4px;
  font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fk-muted);
}
.fk-segment__body { display: grid; gap: 4px; }
.fk-segment__name { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.fk-segment__text { color: var(--fk-muted); }
.fk-segment__go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: .9375rem; font-weight: 700; color: var(--fk-forest);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .28em;
}
.fk-segment__go .fk-icon { transition: transform .2s ease; }
.fk-segment:hover .fk-segment__name { color: var(--fk-forest); }
.fk-segment:hover .fk-segment__go .fk-icon { transform: translateX(3px); }
@media (min-width: 720px) {
  .fk-segment { grid-template-columns: 48px 1fr auto; align-items: center; padding: 26px 0; }
  .fk-segment__num { grid-row: auto; padding-top: 0; }
  .fk-segment__go { margin-top: 0; justify-self: end; text-align: right; }
}

/* ==========================================================================
   Jedan sustav: članovi / tim (+ opcionalni web admin)
   ========================================================================== */
.fk-split { background: var(--fk-sand); }
.fk-split__grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .fk-split__grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.fk-split__side {
  display: grid; align-content: start; gap: 18px;
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: var(--fk-radius-l);
}
.fk-split__side h3 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); line-height: 1.2; }
.fk-split__side--members { background: var(--fk-paper); border: 1px solid var(--fk-line); }
.fk-split__side--team { background: var(--fk-brand-mist); color: var(--fk-ink); border: 1px solid var(--fk-brand); }
.fk-split__label {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  font-size: .9375rem; font-weight: 700;
  background: var(--fk-sage-tint); color: var(--fk-forest);
}
.fk-split__side--team .fk-split__label { background: var(--fk-brand); color: var(--fk-on-brand); }
.fk-split__media { margin-top: clamp(24px, 3vw, 40px); }
.fk-split__media:not(:has(figure:not(.is-missing))) { display: none; }

/* ==========================================================================
   Funkcije (priče s pripadajućom snimkom)
   ========================================================================== */
.fk-features { background: var(--fk-paper); }
.fk-feature {
  display: grid; gap: 32px;
  padding-block: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--fk-line);
}
.fk-feature__body { display: grid; gap: 16px; align-content: start; justify-items: start; max-width: 52rem; }
.fk-feature__body > p:not([class]) { color: var(--fk-muted); max-width: 40rem; }
.fk-feature__body .fk-checks { width: 100%; margin-block: 4px 6px; }
.fk-feature__index {
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fk-forest);
}
.fk-feature h3 { font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); line-height: 1.2; }
.fk-feature__media { display: flex; flex-wrap: wrap; justify-content: center; }
.fk-feature__media:not(:has(figure:not(.is-missing))) { display: none; }

@media (min-width: 960px) {
  .fk-feature:has(.fk-feature__media figure:not(.is-missing)) {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center;
  }
  .fk-feature--flip:has(.fk-feature__media figure:not(.is-missing)) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .fk-feature--flip .fk-feature__media { order: -1; }
  /* S pripadajućom snimkom popis ide u jedan stupac radi čitljivosti */
  .fk-feature:has(.fk-feature__media figure:not(.is-missing)) .fk-checks--2col { grid-template-columns: 1fr; }
}

/* Pružatelji plaćanja: vodoravni niz naziva */
.fk-providers { display: grid; gap: 8px; width: 100%; }
.fk-providers__label {
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fk-muted);
}
.fk-providers__list {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
}
.fk-providers__list li {
  padding: 8px 16px; border-radius: 999px;
  background: var(--fk-sand); border: 1px solid var(--fk-line);
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
}

.fk-extras {
  list-style: none;
  display: grid; gap: 28px;
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--fk-line);
}
.fk-extras li { display: grid; gap: 10px; align-content: start; }
.fk-extras h3 { font-size: var(--fk-h3); line-height: 1.3; }
.fk-extras p { color: var(--fk-muted); }
.fk-extras__icon { width: 28px; height: 28px; color: var(--fk-forest); }
@media (min-width: 820px) {
  .fk-extras { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .fk-extras li { padding-right: 32px; }
  .fk-extras li + li { padding-left: 32px; border-left: 1px solid var(--fk-line); }
}

/* ==========================================================================
   EntryPoint
   ========================================================================== */
.fk-entry {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--fk-brand-soft); color: var(--fk-ink);
}
.fk-entry::before {
  content: ""; position: absolute; z-index: -1;
  width: 760px; aspect-ratio: 1; right: -520px; top: -520px; border-radius: 50%;
  border: 1px solid var(--fk-brand);
}
@media (max-width: 719px) { .fk-entry::before { display: none; } }
.fk-entry .fk-btn--light { border-color: var(--fk-brand-edge); }
.fk-entry .fk-btn--light:hover { background: var(--fk-brand-mist); }
.fk-entry__top { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .fk-entry__top:has(.fk-entry__media figure:not(.is-missing)) {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center;
  }
}
.fk-entry__copy { display: grid; gap: 20px; justify-items: start; max-width: 40rem; }
.fk-entry__copy .fk-eyebrow { margin-bottom: -6px; }
.fk-entry h2 { font-size: var(--fk-h2); line-height: 1.12; color: var(--fk-ink); }
.fk-entry__copy > p:not([class]) { color: var(--fk-muted); max-width: 34rem; }
.fk-entry__copy .fk-checks { margin-bottom: 8px; }
.fk-entry__media { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.fk-entry__media .fk-demo-note { color: var(--fk-muted); max-width: 28rem; }
.fk-entry__media:not(:has(figure:not(.is-missing))) { display: none; }

.fk-flow { list-style: none; display: grid; gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.fk-flow li {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  padding: 20px 22px;
  border-radius: var(--fk-radius);
  background: var(--fk-paper);
  border: 1px solid var(--fk-line-strong);
}
.fk-flow li:not(:last-child)::after { /* spojnica između koraka */
  content: ""; position: absolute; left: 43px; bottom: -15px;
  width: 2px; height: 16px; background: var(--fk-brand);
}
@media (min-width: 960px) {
  .fk-flow { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .fk-flow li { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
  .fk-flow li:not(:last-child)::after { left: auto; right: -17px; bottom: auto; top: 45px; width: 18px; height: 2px; }
}
.fk-flow__num {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--fk-brand); color: var(--fk-on-brand);
  font-weight: 800; font-size: 1.0625rem;
}
.fk-flow h3 { font-size: var(--fk-h3); line-height: 1.3; color: var(--fk-ink); margin-bottom: 4px; }
.fk-flow p { color: var(--fk-muted); }

/* ==========================================================================
   Vaš brend (white label): tekst + galerija aplikacija; izrez kao zamjena
   ========================================================================== */
.fk-brandsec { background: var(--fk-sand); }
.fk-brandsec__grid { display: grid; gap: 8px; }
@media (min-width: 960px) {
  .fk-brandsec__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .fk-brandsec__grid .fk-gallery-wrap { margin-top: 0; }
  /* Tri i više aplikacija: galerija ide preko cijele širine ispod teksta, tekst u dva stupca */
  .fk-brandsec__grid:has(.fk-gallery > li:nth-child(3)) { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .fk-brandsec__grid:has(.fk-gallery > li:nth-child(3)) .fk-brandsec__copy {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 64px; align-items: end;
  }
  .fk-brandsec__grid:has(.fk-gallery > li:nth-child(3)) .fk-brandsec__copy > .fk-checks { grid-column: 2; grid-row: 1 / span 4; align-self: end; }
  .fk-brandsec__grid:has(.fk-gallery > li:nth-child(3)) .fk-brandsec__copy > :not(.fk-checks) { grid-column: 1; }
}
.fk-brandsec__copy { display: grid; gap: 20px; justify-items: start; }
.fk-brandsec__copy .fk-eyebrow { margin-bottom: -6px; }
.fk-brandsec__copy h2 { font-size: var(--fk-h2); line-height: 1.12; }
.fk-brandsec__copy > p:not([class]) { color: var(--fk-muted); max-width: 34rem; }

/* ==========================================================================
   Kako krenuti
   ========================================================================== */
.fk-steps { background: var(--fk-paper); }
.fk-steps__list { list-style: none; display: grid; gap: 0; }
.fk-steps__list li {
  position: relative;
  display: grid; gap: 8px; align-content: start;
  padding: 0 0 32px 32px;
  border-left: 2px solid var(--fk-line);
}
.fk-steps__list li:last-child { padding-bottom: 0; }
.fk-steps__list li::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fk-brand); box-shadow: 0 0 0 4px var(--fk-paper);
}
.fk-steps__num { font-size: .875rem; font-weight: 800; letter-spacing: .06em; color: var(--fk-forest); }
.fk-steps__list h3 { font-size: var(--fk-h3); line-height: 1.3; }
.fk-steps__list p { color: var(--fk-muted); max-width: 30rem; }
@media (min-width: 900px) {
  .fk-steps__list { grid-template-columns: repeat(3, 1fr); }
  .fk-steps__list li { padding: 32px 40px 0 0; border-left: 0; border-top: 2px solid var(--fk-line); }
  .fk-steps__list li::before { left: 0; top: -7px; }
}
.fk-steps__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  margin-top: clamp(40px, 5vw, 56px); padding-top: 32px;
  border-top: 1px solid var(--fk-line);
}
.fk-steps__foot .fk-note { flex-basis: 100%; }
@media (min-width: 900px) { .fk-steps__foot .fk-note { flex-basis: auto; margin-left: auto; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.fk-faq { background: var(--fk-cream); }
.fk-faq__grid { display: grid; gap: 8px; }
@media (min-width: 960px) {
  .fk-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .fk-faq__head { position: sticky; top: calc(var(--fk-header-h) + 32px); margin-bottom: 0; }
}
.fk-faq__head a { font-weight: 700; }
.fk-faq__list { border-top: 1px solid var(--fk-line-strong); }
.fk-faq__item { border-bottom: 1px solid var(--fk-line-strong); }
.fk-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 18px 0;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.4;
  cursor: pointer; list-style: none;
}
.fk-faq__item summary::-webkit-details-marker { display: none; }
.fk-faq__item summary .fk-icon {
  width: 32px; height: 32px; padding: 7px; border-radius: 50%;
  background: var(--fk-sage-tint); color: var(--fk-forest);
  transition: transform .2s ease, background-color .2s ease;
}
.fk-faq__item[open] summary .fk-icon { transform: rotate(45deg); background: var(--fk-brand); color: var(--fk-on-brand); }
.fk-faq__item summary:hover { color: var(--fk-forest); }
.fk-faq__item p { padding: 0 52px 22px 0; color: var(--fk-ink-2); max-width: 62ch; }

/* ==========================================================================
   Završni poziv
   ========================================================================== */
.fk-cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(56px, 8vw, 104px);
  background: var(--fk-brand); color: var(--fk-on-brand);
}
.fk-cta::before {
  content: ""; position: absolute; z-index: -1;
  width: 720px; aspect-ratio: 1; left: -300px; bottom: -420px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
}
.fk-cta__inner { display: grid; gap: 32px; }
@media (min-width: 900px) { .fk-cta__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; } }
.fk-cta h2 { font-size: var(--fk-h2); line-height: 1.12; color: var(--fk-on-brand); margin-bottom: 14px; }
.fk-cta__copy p { color: var(--fk-on-brand-muted); max-width: 36rem; }
.fk-cta__actions { display: grid; gap: 18px; justify-items: start; }
@media (min-width: 900px) { .fk-cta__actions { justify-items: end; } }
.fk-cta__contact { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.fk-cta__contact a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--fk-on-brand); font-weight: 600; text-decoration: underline; text-decoration-color: var(--fk-brand-edge); text-underline-offset: .28em;
}
.fk-cta__contact a:hover { text-decoration-color: var(--fk-on-brand); }

/* ==========================================================================
   Footer
   ========================================================================== */
.fk-footer { background: var(--fk-brand-soft); color: var(--fk-ink-2); padding-top: clamp(48px, 6vw, 80px); }
.fk-footer a { color: var(--fk-ink-2); text-decoration: none; }
.fk-footer a:hover { color: var(--fk-forest); text-decoration: underline; text-underline-offset: .25em; }
.fk-footer__top { display: grid; gap: 40px; padding-bottom: 40px; }
@media (min-width: 1024px) { .fk-footer__top { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 56px; } }
.fk-footer__brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.fk-footer__brand p { max-width: 22rem; font-size: .9375rem; }
.fk-footer__contact { list-style: none; display: grid; gap: 2px; }
.fk-footer__contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 600; }
.fk-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (min-width: 768px) { .fk-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fk-footer__title {
  margin-bottom: 12px;
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fk-forest);
}
.fk-footer__nav ul { list-style: none; display: grid; gap: 6px; }
.fk-footer__nav a { display: inline-flex; align-items: center; min-height: 36px; padding-block: 4px; font-size: .9375rem; line-height: 1.4; }
.fk-footer__bottom { padding-block: 22px; border-top: 1px solid var(--fk-line-strong); }
.fk-footer__bottom p { font-size: .875rem; color: var(--fk-muted); }

/* ---------- Smanjeno kretanje ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   WL galerija aplikacija (templates/fitko/parts/wl-showcase.html.twig)
   Vodoravni popis sa scroll-snapom; gumbi i brojač dolaze iz homepage.js.
   Bez JS-a: nativno pomicanje, svaka snimka vodi na punu sliku.
   ========================================================================== */
.fk-showcase { padding-block: clamp(48px, 7vw, 96px); background: var(--fk-cream); }
.fk-showcase--paper { background: var(--fk-paper); }
.fk-showcase--sand { background: var(--fk-sand); }
.fk-showcase__head { display: grid; gap: 16px; margin-bottom: 24px; }
@media (min-width: 768px) {
  .fk-showcase__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
}
.fk-showcase__title { font-size: var(--fk-h2); line-height: 1.12; text-wrap: balance; }
h3.fk-showcase__title { font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); line-height: 1.2; }
.fk-showcase__intro { margin-top: 12px; max-width: 40rem; color: var(--fk-muted); }
.fk-showcase__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fk-showcase__count {
  min-width: 7em;
  font-size: .9375rem; font-weight: 700; color: var(--fk-muted);
  font-variant-numeric: tabular-nums;
}
.fk-showcase__buttons { display: flex; gap: 8px; }
.fk-showcase__btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--fk-forest); border-radius: 50%;
  background: var(--fk-paper); color: var(--fk-forest); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.fk-showcase__btn:hover:not(:disabled) { background: var(--fk-brand); color: var(--fk-on-brand); }
.fk-showcase__btn:disabled { opacity: .35; cursor: default; }

.fk-showcase__list {
  position: relative; /* drži vizualno skriveni tekst unutar scroll-kontejnera */
  list-style: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 280px); gap: 14px;
  margin-inline: calc(var(--fk-gutter) * -1);
  padding: 4px var(--fk-gutter) 18px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--fk-gutter);
  scrollbar-width: thin; scrollbar-color: var(--fk-line-strong) transparent;
}
.fk-showcase__list:focus-visible { outline-offset: -3px; border-radius: var(--fk-radius); }
.fk-showcase__item { min-width: 0; scroll-snap-align: start; container-type: inline-size; display: flex; justify-content: center; }
.fk-showcase__item:has(> .is-missing) { display: none; }
.fk-showcase .fk-shot { --w: 180px; --w: 100cqi; width: 100%; }
.fk-showcase .fk-shot__caption { max-width: none; }
@media (min-width: 768px) {
  .fk-showcase__list { grid-auto-columns: 200px; gap: 20px; }
}
@media (min-width: 1200px) {
  .fk-showcase__list { grid-auto-columns: 220px; gap: 24px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}
.fk-showcase__more { margin-top: 16px; }
/* Ugrađena galerija (naslovnica, platforma): bez vlastite pozadine i razmaka sekcije */
.fk-showcase--embed { padding-block: 0; margin-top: clamp(32px, 4vw, 48px); background: none; }
.fk-brandsec__grid--showcase { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .fk-brandsec__grid--showcase { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fk-brandsec__grid--showcase .fk-brandsec__copy {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start;
  }
  .fk-brandsec__grid--showcase .fk-brandsec__copy > .fk-checks { grid-column: 2; grid-row: 1 / span 4; align-self: end; }
  .fk-brandsec__grid--showcase .fk-brandsec__copy > :not(.fk-checks) { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fk-showcase__list { scroll-behavior: auto; }
}

/* P2-1: „Postavke kolačića” u footeru izgleda kao ostale poveznice footera */
.fk-footer .fk-consent-open {
  display: inline-flex; align-items: center; min-height: 36px; padding: 4px 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .9375rem; line-height: 1.4; color: var(--fk-ink-2);
  text-align: left; text-decoration: none;
}
.fk-footer .fk-consent-open:hover { color: var(--fk-forest); text-decoration: underline; text-underline-offset: .25em; }