/* ── _content-shared.css ── */
/* ============================================================
   Shared content styles — prose, blog cards, article, breadcrumb,
   error page. Used by the Worker (blog SSR, 404) and reusable by
   long-form pages (legal, about). Owned by the core; safe to reference.
   ============================================================ */

.prose { font-size: 17px; line-height: 1.75; color: var(--ink-700); max-width: 760px; }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 44px; font-size: 28px; color: var(--ink-900); }
.prose h3 { margin-top: 32px; font-size: 21px; color: var(--ink-900); }
.prose p { margin: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 24px; }
.prose li { margin-top: 8px; }
.prose li::marker { color: var(--red-700); }
.prose a { color: var(--red-700); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink-900); font-weight: 600; }
.prose blockquote { margin: 28px 0; padding: 16px 24px; border-left: 3px solid var(--red-700); background: var(--paper); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--ink-700); }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--ink-50); padding: 2px 6px; border-radius: 4px; }
.prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ink-100); }
.prose th { color: var(--red-700); font-weight: 600; background: var(--paper); }

/* breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-400); margin-bottom: 20px; }
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--red-700); }
.breadcrumb .icon { width: 14px; height: 14px; color: var(--ink-300); }

/* ---- Blog index ---- */
.blog-featured { margin: 48px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.postcard { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: box-shadow var(--dur) var(--ease-out); }
.postcard:hover { box-shadow: var(--shadow-lg); text-decoration: none; }
.postcard__cover { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--ink-100); }
.postcard__cover--ph { display: flex; align-items: center; justify-content: center; color: var(--red-200); background: linear-gradient(135deg, var(--red-50), var(--paper)); }
.postcard__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.postcard__meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-400); }
.postcard__title { margin: 0; font-size: 19px; line-height: 1.3; color: var(--ink-900); }
.postcard__excerpt { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-500); flex: 1; }
.postcard--featured { grid-column: 1 / -1; flex-direction: row; }
.postcard--featured .postcard__cover { aspect-ratio: auto; flex: 0 0 46%; min-height: 320px; }
.postcard--featured .postcard__body { padding: 40px; justify-content: center; }
.postcard--featured .postcard__title { font-size: 32px; letter-spacing: -0.015em; }
.postcard--featured .postcard__excerpt { font-size: 16px; }
@media (max-width: 760px) { .postcard--featured { flex-direction: column; } .postcard--featured .postcard__cover { min-height: 200px; flex-basis: auto; } .postcard--featured .postcard__title { font-size: 24px; } }

/* ---- Article ---- */
.article { padding: 64px 0 96px; }
.article__meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-400); margin-bottom: 16px; }
.article__title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.02em; line-height: 1.08; color: var(--ink-900); max-width: 760px; }
.article__lead { font-size: 20px; line-height: 1.5; color: var(--ink-500); max-width: 760px; margin: 20px 0 0; }
.article__byline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-500); margin: 24px 0; }
.article__byline .icon { color: var(--red-700); }
.article .wave-divider { margin: 32px 0; }
.article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ink-100); }
.article__back { margin-top: 32px; }

/* ---- Error page ---- */
.errorpage { text-align: center; padding: 64px 0; max-width: 560px; margin: 0 auto; }
.errorpage__code { font-weight: 700; font-size: 120px; line-height: 1; color: var(--red-700); letter-spacing: -0.04em; margin: 0; }
.errorpage h1 { margin-top: 16px; }
.errorpage__lead { color: var(--ink-500); font-size: 17px; }
.errorpage__cta { margin-top: 28px; display: flex; justify-content: center; gap: 12px; }

/* ---- Media covers (AI photography system) ---- */
.postcard__cover .pic { width: 100%; height: 100%; }
.article__cover { margin: 0 0 8px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16/9; max-width: 760px; }


/* ── company.css ── */
/* ============================================================
   Company pages — O nama (about), Naša priča, Politika kvalitete.
   All classes prefixed .about- / .about-* to avoid clashes.
   ============================================================ */

/* ---- Page hero / lockup --------------------------------- */
.about-hero { background: var(--paper); padding: 64px 0 80px; position: relative; overflow: hidden; }
.about-hero__mark {
  position: absolute; top: -120px; right: -160px; font-weight: 900; font-size: 640px;
  line-height: .85; color: var(--red-700); opacity: .03; pointer-events: none;
  user-select: none; letter-spacing: -0.06em;
}
.about-hero__masthead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--ink-900);
}
.about-hero__grid {
  margin-top: 56px; display: grid; grid-template-columns: 1fr 380px;
  gap: 56px; align-items: start; position: relative;
}
.about-hero__title {
  margin: 0; font-weight: 700; font-size: clamp(2.5rem, 1.6rem + 3.5vw, 5rem);
  color: var(--ink-900); line-height: 1.02; letter-spacing: -0.025em; max-width: 880px;
}
.about-hero__lead {
  margin: 32px 0 0; font-size: 19px; line-height: 1.55; color: var(--ink-500); max-width: 640px;
}
.about-hero__cta { margin-top: 36px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* hero side panel — identity card */
.about-idcard {
  background: var(--ink-900); color: #fff; border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-xl); position: relative; overflow: hidden;
}
.about-idcard__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.about-idcard__top .eyebrow { color: var(--red-500); }
.about-idcard__mark {
  width: 38px; height: 38px; border-radius: 9px; background: #fff; color: var(--red-700);
  font-weight: 700; font-size: 16px; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; letter-spacing: -0.02em;
}
.about-idcard__name { margin: 18px 0 0; font-weight: 700; font-size: 26px; color: #fff; letter-spacing: -0.02em; line-height: 1.1; }
.about-idcard__rows { margin-top: 22px; display: grid; gap: 0; }
.about-idcard__row {
  display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.08); align-items: baseline;
}
.about-idcard__row:first-child { border-top: 1px solid rgba(255,255,255,.16); }
.about-idcard__k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.about-idcard__v { font-size: 14px; color: #fff; line-height: 1.45; }
.about-idcard__v .mono { font-family: var(--font-mono); font-size: 13px; }
.about-idcard__foot {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; gap: 12px;
}
.about-idcard__badge {
  width: 44px; height: 44px; border-radius: 50%; background: var(--red-700); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  font-size: 18px; letter-spacing: -0.01em; flex-shrink: 0;
}
.about-idcard__foot-t { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }
.about-idcard__foot-s { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }

@media (max-width: 900px) {
  .about-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .about-hero__mark { font-size: 420px; top: -60px; right: -120px; }
}
@media (max-width: 640px) { .about-hero { padding: 40px 0 56px; } }

/* ---- Timeline (chapter I) ------------------------------- */
.about-timeline { position: relative; padding-left: 80px; }
.about-timeline__spine {
  position: absolute; left: 36px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(180deg, var(--red-700), var(--red-100));
}
.about-tl { position: relative; margin-bottom: 32px; padding-left: 24px; }
.about-tl:last-child { margin-bottom: 0; }
.about-tl__year {
  position: absolute; left: -80px; top: -2px; font-weight: 700; font-size: clamp(20px, 1.5vw + 0.9rem, 28px);
  color: var(--ink-900); letter-spacing: -0.02em; line-height: 1;
}
.about-tl--now .about-tl__year { color: var(--red-700); }
.about-tl__dot {
  position: absolute; left: -50px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--red-700);
}
.about-tl--now .about-tl__dot { width: 16px; height: 16px; left: -52px; background: var(--red-700); box-shadow: 0 0 0 4px var(--red-50); }
.about-tl__title {
  margin: 0; font-weight: 700; font-size: clamp(18px, 1.5vw + 0.85rem, 22px); color: var(--ink-900);
  letter-spacing: -0.015em; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.about-tl__desc { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-500); max-width: 640px; }
@media (max-width: 640px) {
  .about-timeline { padding-left: 56px; }
  .about-timeline__spine { left: 18px; }
  .about-tl__year { font-size: 20px; left: -56px; top: 2px; }
  .about-tl__dot { left: -44px; }
  .about-tl--now .about-tl__dot { left: -46px; }
}

/* ---- Team (chapter II) ---------------------------------- */
.about-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-person {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease-out);
}
.about-person:hover { box-shadow: var(--shadow-lg); }
.about-person__portrait { aspect-ratio: 4/5; position: relative; }
.about-person__initials {
  position: absolute; top: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 2px solid #fff; color: #fff; font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center;
}
.about-person__years { position: absolute; bottom: 24px; left: 24px; right: 24px; color: #fff; }
.about-person__years .eyebrow { color: rgba(255,255,255,.7); }
.about-person__years-n { font-weight: 700; font-size: clamp(32px, 4vw + 1rem, 48px); color: #fff; margin-top: 6px; line-height: 1; letter-spacing: -0.03em; }
.about-person__body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.about-person__role { color: var(--red-700); }
.about-person__name { margin: 8px 0 0; font-weight: 700; font-size: clamp(20px, 1.5vw + 0.9rem, 24px); color: var(--ink-900); letter-spacing: -0.015em; }
.about-person__bio { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-500); flex: 1; }
.about-person__mail {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--red-700);
}
.about-person__mail .icon { width: 14px; height: 14px; }
@media (max-width: 900px) { .about-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .about-team { grid-template-columns: 1fr; } }

/* ---- Office spread (chapter III) ------------------------ */
.about-office {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 240px); gap: 16px;
}
.about-office__tile {
  border-radius: var(--radius); position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.about-office__tile--a { grid-column: span 6; grid-row: span 2; }
.about-office__tile--b { grid-column: span 6; }
.about-office__tile--c { grid-column: span 3; }
.about-office__tile--d { grid-column: span 3; }
.about-office__tag {
  position: absolute; bottom: 16px; left: 16px; padding: 4px 10px;
  border-radius: var(--radius-pill); background: rgba(0,0,0,.4); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (max-width: 760px) {
  .about-office { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 200px); }
  .about-office__tile--a { grid-column: span 2; grid-row: span 1; }
  .about-office__tile--b { grid-column: span 2; }
  .about-office__tile--c, .about-office__tile--d { grid-column: span 1; }
}
@media (max-width: 480px) {
  .about-office { grid-template-columns: 1fr; grid-template-rows: none; }
  .about-office__tile { grid-column: auto !important; grid-row: auto !important; min-height: 180px; }
}

/* ---- Values / five rules (chapter IV, ink section) ------ */
.about-values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.about-value {
  padding: 24px; border-radius: var(--radius); background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column;
}
.about-value__n { font-weight: 700; font-size: clamp(36px, 4vw + 1rem, 48px); color: var(--red-500); line-height: .85; letter-spacing: -0.025em; }
.about-value__t { margin: 24px 0 0; font-weight: 700; font-size: 18px; color: #fff; letter-spacing: -0.015em; line-height: 1.2; }
.about-value__d { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.65); }
@media (max-width: 1100px) { .about-values { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .about-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .about-values { grid-template-columns: 1fr; } }

/* ---- CTA band ------------------------------------------- */
.about-cta { position: relative; overflow: hidden; }
.about-cta__mark {
  position: absolute; top: -60px; right: -80px; font-weight: 900; font-size: 320px;
  color: var(--red-700); opacity: .07; line-height: .85; letter-spacing: -0.04em; pointer-events: none;
}
.about-cta__grid { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.about-cta__title { margin: 16px 0 0; font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); color: #fff; letter-spacing: -0.025em; line-height: 1.04; }
.about-cta__lead { margin: 24px 0 0; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.78); max-width: 480px; }
.about-cta__btns { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.about-cta__contacts { display: flex; flex-direction: column; }
.about-cta__contact { display: flex; gap: 16px; align-items: center; padding: 14px 0; }
.about-cta__contact:hover { text-decoration: none; }
.about-cta__contact--bd { border-bottom: 1px solid rgba(255,255,255,.1); }
.about-cta__contact-ic {
  width: 38px; height: 38px; border-radius: 50%; background: var(--red-700); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.about-cta__contact-t { display: block; font-size: 16px; font-weight: 600; color: #fff; }
.about-cta__contact-s { display: block; font-size: 13px; color: rgba(255,255,255,.55); margin-top: 2px; }
@media (max-width: 860px) { .about-cta__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---- Long-form pages (Naša priča / Politika kvalitete) -- */
.about-doc { padding: 64px 0 96px; }
.about-doc__head { max-width: 760px; margin-bottom: 8px; }
.about-doc__title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.02em; line-height: 1.08; color: var(--ink-900); margin: 14px 0 0; }
.about-doc__lead { font-size: 20px; line-height: 1.5; color: var(--ink-500); max-width: 760px; margin: 20px 0 0; }
.about-doc__rule { max-width: 760px; margin: 28px 0; }
.about-doc__meta {
  max-width: 760px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ink-100);
  display: flex; flex-wrap: wrap; gap: 10px;
}
.about-doc__back { max-width: 760px; margin-top: 32px; }

/* signature block for the policy / story */
.about-sign {
  max-width: 760px; margin-top: 40px; padding: 24px 28px; background: var(--paper);
  border-left: 3px solid var(--red-700); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex; gap: 18px; align-items: center;
}
.about-sign__av {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #6b3328, #8c4a35); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  font-size: 20px; letter-spacing: -0.02em; border: 2px solid var(--red-700);
}
.about-sign__name { font-weight: 700; font-size: 16px; color: var(--ink-900); letter-spacing: -0.01em; }
.about-sign__role { margin-top: 2px; font-size: 13px; color: var(--ink-500); }

/* ---- Media integration: portraits + office mosaic (2026-07) ---- */
.about-person__pic { position: absolute; inset: 0; }
.about-person__initials, .about-person__years { z-index: 1; }
.about-office__pic { position: absolute; inset: 0; }
.about-office__tag { z-index: 1; }
.about-office__note { margin-top: 14px; font-size: 12.5px; color: var(--ink-400); }
.about-person__portrait { overflow: hidden; }
.about-person__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0) 52%, rgba(14, 14, 14, .5) 100%); }
.about-rules { position: relative; overflow: hidden; }
.about-rules > .container { position: relative; z-index: 1; }


/* ── content.css ── */
/* ============================================================
   content.css — FAQ, Kontakt, Zatražite ponudu
   ============================================================ */

/* ---- shared editorial hero (faq/kontakt) ---- */
.faq-hero, .kontakt-hero { background: var(--paper); position: relative; overflow: hidden; }
.faq-hero__mark, .kontakt-hero__mark { position: absolute; top: -120px; right: -60px; font-weight: 900; font-size: 480px; line-height: .85; color: var(--red-700); opacity: .04; pointer-events: none; user-select: none; }
.faq-hero__masthead, .kontakt-hero__masthead { padding: 24px 0 16px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--ink-900); }
.faq-hero__grid, .kontakt-hero__grid { padding: 56px 0 72px; display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
.faq-hero__title, .kontakt-hero__title { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.025em; color: var(--ink-900); margin: 0; }
.faq-hero__lead, .kontakt-hero__lead { margin: 28px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-500); max-width: 560px; }
.faq-hero__lead a { color: var(--red-700); font-weight: 600; }
.faq-hero__aside { padding: 24px; background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.faq-hero__cats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.faq-hero__cats a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); color: var(--ink-800); font-weight: 500; font-size: 14px; }
.faq-hero__cats a:hover { background: var(--paper); text-decoration: none; }
.faq-hero__cats .icon { color: var(--red-700); }
.faq-hero__cats a span { flex: 1; }
.kontakt-hero__chips { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
@media (max-width: 900px) { .faq-hero__grid, .kontakt-hero__grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---- FAQ toolbar ---- */
.faq-toolbar-sec { padding: 40px 0 24px; }
.faq-search { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 18px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); transition: border-color var(--dur), box-shadow var(--dur); }
.faq-search:focus-within { border-color: var(--red-700); box-shadow: 0 0 0 3px var(--red-50); }
.faq-search .icon { color: var(--ink-400); }
.faq-search__input { flex: 1; border: 0; outline: none; font-family: var(--font-sans); font-size: 16px; padding: 10px 0; background: transparent; color: var(--ink-900); }
.faq-search__clear { border: 0; background: var(--ink-50); color: var(--ink-500); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.faq-pills { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.faq-pill { display: inline-flex; align-items: center; gap: 7px; padding: 12px 16px; min-height: var(--touch); border-radius: var(--radius-pill); border: 1px solid var(--ink-200); background: #fff; color: var(--ink-700); font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all var(--dur); }
.faq-pill .icon { width: 14px; height: 14px; }
.faq-pill:hover { border-color: var(--red-300, var(--red-200)); color: var(--red-700); }
.faq-pill.is-active { background: var(--red-700); border-color: var(--red-700); color: #fff; }

/* ---- FAQ groups + accordion ---- */
.faq-groups-sec { padding-top: 24px; }
.faq-group { margin-bottom: 56px; }
.faq-group__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--ink-900); }
.faq-group__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--red-50); color: var(--red-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.faq-group__title { margin: 4px 0 0; font-size: 24px; color: var(--ink-900); letter-spacing: -0.015em; }
.faq-group__items { display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--dur), border-color var(--dur); }
.faq-item.is-open { box-shadow: var(--shadow); border-color: var(--ink-200); }
.faq-item__q { margin: 0; }
.faq-item__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-sans); }
.faq-item__q-text { font-size: 17px; font-weight: 600; color: var(--ink-900); line-height: 1.4; }
.faq-item__icon { color: var(--red-700); flex-shrink: 0; transition: transform var(--dur) var(--ease-out); }
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.faq-item.is-open .faq-item__a { max-height: 1200px; }
.faq-item__a-inner { padding: 0 24px 24px; font-size: 15.5px; line-height: 1.7; color: var(--ink-600); max-width: 760px; }
.faq-item__a-inner a { color: var(--red-700); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.faq-item__a-inner strong { color: var(--ink-900); font-weight: 600; }
.faq-empty { text-align: center; color: var(--ink-500); font-size: 16px; padding: 40px 0; }
.faq-empty .icon { color: var(--red-700); vertical-align: -3px; margin-right: 6px; }

/* ---- FAQ CTA ---- */
.faq-cta, .kontakt-cta { position: relative; overflow: hidden; }
.faq-cta__mark { position: absolute; top: -40px; right: -20px; font-weight: 900; font-size: 240px; color: var(--red-700); opacity: .08; line-height: .85; letter-spacing: -0.04em; pointer-events: none; }
.faq-cta__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; position: relative; }
.faq-cta__title { margin: 14px 0 0; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: #fff; letter-spacing: -0.02em; line-height: 1.05; }
.faq-cta__lead { margin-top: 18px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 520px; }
.faq-cta__btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 860px) { .faq-cta__grid { grid-template-columns: 1fr; gap: 32px; } .faq-cta__btns { flex-direction: row; flex-wrap: wrap; } }

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
@media (max-width: 960px) { .kontakt-grid { grid-template-columns: 1fr; gap: 28px; } }

.kontakt-form { position: relative; }
.kontakt-form__title { margin: 12px 0 24px; font-size: 26px; color: var(--ink-900); letter-spacing: -0.015em; }
.kontakt-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .kontakt-form__row { grid-template-columns: 1fr; } }
.kontakt-form__opt { color: var(--ink-400); font-weight: 400; font-size: 12px; }
.kontakt-form__gdpr { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-500); line-height: 1.5; margin: 4px 0 20px; }
.kontakt-form__gdpr input { margin-top: 3px; accent-color: var(--red-700); }
.kontakt-form__gdpr a { color: var(--red-700); }
.kontakt-form__submit { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.kontakt-form__note { font-size: 12.5px; color: var(--ink-400); margin: 0; }
.kontakt-form__note .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; color: var(--red-700); }
.kontakt-form__error { margin: 16px 0 0; padding: 12px 16px; background: var(--red-50); border: 1px solid var(--red-100); border-radius: var(--radius-sm); color: var(--red-800); font-size: 14px; }
.kontakt-form__success { text-align: center; padding: 24px 8px; }
.kontakt-form__success-ic { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: var(--red-50); color: var(--red-700); align-items: center; justify-content: center; }
.kontakt-form__success-t { margin: 18px 0 8px; font-size: 24px; color: var(--ink-900); }
.kontakt-form__success-d { font-size: 15px; color: var(--ink-500); line-height: 1.6; max-width: 420px; margin: 0 auto; }
.kontakt-form__success-d a { color: var(--red-700); }

/* office aside */
.kontakt-aside { display: grid; gap: 20px; }
.kontakt-map { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--ink-100); background: var(--ink-100); }
.kontakt-map__frame { display: block; width: 100%; height: clamp(200px, 40vw, 260px); border: 0; filter: grayscale(.3); }
.kontakt-map__pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); color: var(--red-700); pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.kontakt-map__tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--ink-800); box-shadow: var(--shadow-sm); }
.kontakt-map__tag .icon { width: 14px; height: 14px; color: var(--red-700); }
.kontakt-map__link { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: var(--red-700); color: #fff; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.kontakt-map__link:hover { background: var(--red-800); color: #fff; text-decoration: none; }
.kontakt-card { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.kontakt-card__top { display: flex; justify-content: space-between; align-items: center; }
.kontakt-card__mark { width: 32px; height: 32px; border-radius: 8px; background: var(--red-700); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.kontakt-card__title { margin: 12px 0 18px; font-size: 22px; color: var(--ink-900); }
.kontakt-nap__row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; }
.kontakt-nap__row--bd { border-bottom: 1px solid var(--ink-50); }
a.kontakt-nap__row:hover { text-decoration: none; }
a.kontakt-nap__row:hover .kontakt-nap__t { color: var(--red-700); }
.kontakt-nap__ic { width: 34px; height: 34px; border-radius: 50%; background: var(--red-50); color: var(--red-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kontakt-nap__body { display: flex; flex-direction: column; }
.kontakt-nap__t { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.kontakt-nap__s { font-size: 12.5px; color: var(--ink-400); margin-top: 2px; }
.kontakt-card__ids { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ink-100); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 480px) { .kontakt-card__ids { grid-template-columns: 1fr; gap: 10px; } }
.kontakt-card__k { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); }
.kontakt-card__v { display: block; font-size: 14px; color: var(--ink-900); margin-top: 4px; font-weight: 600; }
.kontakt-andrea { display: flex; gap: 16px; padding: 24px; background: var(--ink-900); color: #fff; border-radius: var(--radius); }
.kontakt-andrea__av { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #6b3328, #8c4a35); border: 2px solid var(--red-700); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex-shrink: 0; }
.kontakt-andrea__name { font-size: 18px; font-weight: 700; margin-top: 6px; }
.kontakt-andrea__role { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
.kontakt-andrea__quote { font-size: 14px; font-style: italic; color: rgba(255,255,255,.85); line-height: 1.5; margin: 12px 0; }
.kontakt-andrea__mail { display: inline-flex; align-items: center; gap: 8px; color: var(--red-500); font-weight: 600; font-size: 14px; }
.kontakt-andrea__mail:hover { color: #fff; }

/* ============================================================
   ZATRAŽITE PONUDU (quote)
   ============================================================ */
.quote-hero { background: var(--ink-900); color: #fff; position: relative; overflow: hidden; }
.quote-hero__mark { position: absolute; top: -80px; right: -40px; font-weight: 900; font-size: 360px; color: var(--red-700); opacity: .1; line-height: .85; pointer-events: none; }
.quote-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
@media (max-width: 960px) { .quote-grid { grid-template-columns: 1fr; gap: 32px; } }
.quote-intro__title { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); color: #fff; letter-spacing: -0.025em; line-height: 1.02; margin: 16px 0 0; }
.quote-intro__lead { margin-top: 24px; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.8); max-width: 460px; }
.quote-steps { margin-top: 32px; display: grid; gap: 14px; }
.quote-step { display: flex; gap: 14px; align-items: flex-start; }
.quote-step .callout { background: var(--red-700); }
.quote-step__t { font-size: 15px; font-weight: 600; color: #fff; }
.quote-step__d { font-size: 13.5px; color: rgba(255,255,255,.6); margin-top: 2px; line-height: 1.5; }
.quote-form { background: #fff; color: var(--ink-900); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-xl); }
.quote-form__title { margin: 4px 0 20px; font-size: 24px; }
.quote-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.quote-radio { position: relative; }
.quote-radio input { position: absolute; opacity: 0; }
.quote-radio span { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--ink-700); cursor: pointer; transition: all var(--dur); }
.quote-radio input:checked + span { background: var(--red-700); border-color: var(--red-700); color: #fff; }
.quote-radio input:focus-visible + span { box-shadow: 0 0 0 3px var(--red-50); }


/* ── home.css ── */
/* ============================================================
   Page-specific styles. Grows as pages are added.
   ============================================================ */

/* ---- Service / tool cards (shared) ---- */
.service-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.service-card:hover { text-decoration: none; }
.service-card__icon { color: var(--red-700); }
.service-card__icon .icon { width: 40px; height: 40px; }
.service-card__title { margin: 4px 0 0; font-size: 20px; color: var(--ink-900); }
.service-card__blurb { margin: 0; font-size: 14.5px; color: var(--ink-500); line-height: 1.55; flex: 1; }

.tool-card { display: flex; gap: 18px; text-decoration: none; color: inherit; align-items: flex-start; }
.tool-card:hover { text-decoration: none; }
.tool-card__icon { color: var(--red-700); flex-shrink: 0; }
.tool-card__icon .icon { width: 36px; height: 36px; }
.tool-card__title { margin: 0 0 6px; font-size: 18px; color: var(--ink-900); display: flex; align-items: center; gap: 8px; }
.tool-card__blurb { margin: 0 0 12px; font-size: 14px; color: var(--ink-500); line-height: 1.55; }
.badge-live {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red-700); background: var(--red-50); border: 1px solid var(--red-100);
  padding: 2px 7px; border-radius: var(--radius-pill);
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ============================================================
   HERO (chapter I)
   ============================================================ */
.hero { background: var(--paper); position: relative; overflow: hidden; }
.hero__mark {
  position: absolute; top: -120px; right: -180px; font-weight: 900; font-size: 720px;
  line-height: .85; color: var(--red-700); opacity: .03; pointer-events: none;
  user-select: none; letter-spacing: -0.06em;
}
.hero__masthead { padding: 24px 0 16px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hero__rule { height: 1px; background: var(--ink-900); }
.hero__grid { padding: 64px 0 80px; display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; position: relative; }
.hero__chips { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.hero h1 { font-size: var(--fs-display); line-height: .96; letter-spacing: -0.025em; color: var(--ink-900); margin: 0; }
.hero__lead { margin: 32px 0 0; font-size: clamp(15.5px, 0.9rem + 0.4vw, 19px); line-height: 1.55; color: var(--ink-500); max-width: 620px; }
.hero__lead strong { color: var(--ink-900); font-weight: 600; }
.hero__cta { margin-top: 40px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero__cta-note { font-size: 13px; color: var(--ink-500); display: inline-flex; align-items: center; gap: 6px; }
.hero__cta-note .icon { color: var(--red-700); width: 14px; height: 14px; }
.hero__trust { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ink-100); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.hero__stat-n { font-weight: 700; font-size: clamp(28px, 4vw + 1rem, 40px); color: var(--ink-900); letter-spacing: -0.025em; line-height: 1; }
.hero__stat-l { margin-top: 8px; font-size: 13px; color: var(--red-700); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hero__stat-s { margin-top: 4px; font-size: 12px; color: var(--ink-400); }

.fiskwatch { background: var(--ink-900); color: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-xl); position: relative; overflow: hidden; }
.fiskwatch__top { display: flex; justify-content: space-between; align-items: baseline; }
.fiskwatch__live { color: var(--red-500); }
.fiskwatch__title { font-size: 22px; font-weight: 600; color: #fff; margin: 8px 0 0; letter-spacing: -0.015em; line-height: 1.2; }
.fiskwatch__count { margin-top: 20px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fiskwatch__cell { text-align: center; }
.fiskwatch__num { font-weight: 700; font-size: clamp(28px, 3vw + 1rem, 38px); color: var(--red-500); line-height: 1; letter-spacing: -0.02em; }
.fiskwatch__unit { font-family: var(--font-mono); font-size: 9px; color: var(--ink-400); margin-top: 6px; letter-spacing: 1.5px; }
.fiskwatch__meta { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.45; }
.fiskwatch__meta strong { color: #fff; } .fiskwatch__meta .hl { color: var(--red-500); font-weight: 600; }
.fiskwatch__link { margin-top: 16px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--red-700); color: #fff; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
.fiskwatch__link:hover { color: #fff; background: var(--red-800); text-decoration: none; }
.fiskwatch__stamp { position: absolute; top: -18px; right: -10px; transform: rotate(8deg); }
.fiskwatch__stamp span { background: var(--red-700); color: #fff; padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(139,26,26,.35); display: inline-block; }

@media (max-width: 1100px) {
  /* Collapse to single column at tablet-landscape and below. The 380 px
     fiskwatch column was too greedy below ~900 px and pushed the hero lead
     into a narrow stripe. */
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__mark { font-size: 460px; top: -60px; right: -120px; }
}
@media (max-width: 640px) {
  /* Phone landscape and below: tighten outer padding and reflow trust band. */
  .hero__grid { padding: 40px 0 56px; }
  .hero__trust { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .hero h1 { font-size: clamp(2.25rem, 1.4rem + 4vw, 3rem); }
  /* The little angled "Uredu se vjeruje od 1992." stamp absolutely positioned
     at top:-18px;right:-10px was the last thing pushing the fiskwatch card
     past the right edge on a phone. Drop it on small viewports — the trust
     stats below the hero communicate the same idea. */
  .fiskwatch__stamp { display: none; }
}
@media (max-width: 480px) {
  .hero__trust { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hero__cta { gap: 10px; }
}

/* ============================================================
   PULSE (chapter II) — live indicators
   ============================================================ */
.pulse__head { display: grid; grid-template-columns: auto 1fr auto; gap: 56px; align-items: end; margin-bottom: 48px; }
.pulse__head-aside { display: flex; gap: 8px; flex-direction: column; align-items: flex-end; }
.pulse__grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--ink-100); border-radius: var(--radius); background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.pulse__cell { padding: 24px; position: relative; border-right: 1px solid var(--ink-100); }
.pulse__cell:last-child { border-right: 0; }
.pulse__cell--internal { background: var(--paper); }
.pulse__cell-top { display: flex; justify-content: space-between; align-items: baseline; }
.pulse__name { font-weight: 600; font-size: 16px; color: var(--ink-900); margin-top: 8px; line-height: 1.2; }
.pulse__val { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.pulse__val b { font-weight: 700; font-size: clamp(34px, 4vw + 1rem, 52px); color: var(--ink-900); line-height: .95; letter-spacing: -0.03em; }
.pulse__val span { font-size: 14px; color: var(--ink-400); font-weight: 500; }
.pulse__delta { font-size: 13px; margin-top: 6px; color: var(--red-700); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.pulse__spark { width: 100%; height: 36px; margin-top: 16px; display: block; }
.pulse__desc { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-500); min-height: 60px; }
.pulse__foot { margin-top: 16px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-400); }
.pulse__foot .icon { width: 12px; height: 12px; vertical-align: -2px; margin-right: 6px; }
@media (max-width: 1100px) { .pulse__grid { grid-template-columns: repeat(2, 1fr); } .pulse__cell { border-bottom: 1px solid var(--ink-100); } .pulse__head { grid-template-columns: 1fr; gap: 24px; } .pulse__head-aside { flex-direction: row; align-items: flex-start; } }
@media (max-width: 560px) { .pulse__grid { grid-template-columns: 1fr; } }

/* ============================================================
   MEHANIKA (chapter III) — schematic diagram
   ============================================================ */
.mech { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px; position: relative; }
.mech__grid { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 0; align-items: stretch; }
.dcol { padding: 0 12px; }
.dcol__head { padding-bottom: 14px; border-bottom: 1px solid var(--ink-100); display: flex; gap: 10px; align-items: baseline; }
.dcol--right .dcol__head { justify-content: flex-end; flex-direction: row-reverse; }
.dcol__roman { font-size: 24px; color: var(--red-700); font-weight: 700; letter-spacing: -0.02em; }
.dcol__list { margin: 14px 0 0; padding: 0; list-style: none; }
.dcol__item { padding: 11px 0; border-bottom: 1px solid var(--ink-50); display: flex; align-items: center; gap: 10px; }
.dcol__item:last-child { border-bottom: 0; }
.dcol__item .icon { color: var(--red-700); flex-shrink: 0; }
.dcol__item span { font-size: 14px; color: var(--ink-700); font-weight: 500; flex: 1; }
.dcol__item--r { flex-direction: row-reverse; text-align: right; }
.dcol__item--r span { text-align: right; }

.mech__center { padding: 0 20px; display: flex; flex-direction: column; gap: 24px; }
.mech__office { background: var(--ink-900); color: #fff; border-radius: var(--radius); padding: 28px; position: relative; }
.mech__c1 { position: absolute; top: -14px; left: -14px; }
.mech__c2 { position: absolute; top: -14px; right: -14px; }
.mech__c3 { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); }
.mech__office-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mech__office-top .eyebrow { color: var(--red-500); }
.mech__mark { width: 32px; height: 32px; border-radius: 8px; background: #fff; color: var(--red-700); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mech__office-title { margin-top: 14px; font-weight: 700; font-size: 26px; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.mech__practices { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mech__practice { padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 10px; }
.mech__practice .icon { color: var(--red-500); }
.mech__practice-n { font-size: 11px; color: var(--red-500); font-weight: 700; letter-spacing: .6px; min-width: 18px; }
.mech__practice-l { font-size: 13px; font-weight: 500; color: #fff; }
.mech__tools-box { padding: 20px 24px; position: relative; border: 2px dashed var(--red-700); border-radius: var(--radius); background: var(--red-50); }
.mech__tools { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mech__tool { padding: 12px; background: #fff; border-radius: var(--radius-sm); text-align: center; box-shadow: var(--shadow-sm); text-decoration: none; display: block; transition: box-shadow var(--dur); }
.mech__tool:hover { box-shadow: var(--shadow); text-decoration: none; }
.mech__tool .icon { color: var(--red-700); }
.mech__tool span { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--ink-700); line-height: 1.3; }
.mech__legend { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ink-100); display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.mech__legend-item { display: flex; gap: 12px; }
.mech__legend-item .callout { width: 24px; height: 24px; font-size: 12px; }
.mech__legend-t { font-size: 13px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }
.mech__legend-d { font-size: 12px; color: var(--ink-500); line-height: 1.45; margin-top: 4px; }
@media (max-width: 900px) {
  .mech { padding: 24px; }
  .mech__grid { grid-template-columns: 1fr; gap: 28px; }
  .dcol--right .dcol__head, .dcol--right .dcol__item { flex-direction: row; text-align: left; }
  .dcol__item--r span { text-align: left; }
  .mech__center { padding: 0; }
  .mech__legend { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* Intermediate step: 4→2 cols on the four-tool grid and 5→2 cols on the
     legend so we don't jump straight to 1-col on a tablet. */
  .mech { padding: 20px; }
  .mech__tools { grid-template-columns: repeat(2, 1fr); }
  .mech__practices { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mech__practices, .mech__tools, .mech__legend { grid-template-columns: 1fr; }
}

/* ============================================================
   MATRICA (chapter IV) — services coverage table
   ============================================================ */
.matrix__head-row { display: grid; grid-template-columns: auto 1fr auto; gap: 56px; align-items: end; margin-bottom: 48px; }
.matrix__legend { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.matrix { border: 1px solid var(--ink-100); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.matrix__row { display: grid; grid-template-columns: 2.4fr repeat(5, 1fr) 1.4fr; padding: 14px 24px; align-items: center; border-top: 1px solid var(--ink-50); transition: background var(--dur); }
.matrix__row:hover:not(.matrix__row--head) { background: var(--paper); }
.matrix__row--head { background: var(--paper); border-top: 0; padding: 16px 24px; border-bottom: 1px solid var(--ink-100); }
.matrix__c { text-align: center; }
.matrix__ref-h { text-align: right; }
.matrix__area { font-size: 16px; font-weight: 500; color: var(--ink-900); }
.matrix__dot { text-align: center; font-size: 18px; color: var(--ink-200); font-weight: 700; }
.matrix__dot.is-on { color: var(--red-700); }
.matrix__ref { text-align: right; font-size: 13px; color: var(--red-700); font-weight: 600; display: flex; gap: 6px; justify-content: flex-end; align-items: center; text-decoration: none; }
.matrix__ref .icon { width: 12px; height: 12px; }
.matrix__note { margin-top: 24px; font-size: 13px; color: var(--ink-500); }
.matrix__note .icon { width: 13px; height: 13px; color: var(--red-700); vertical-align: -2px; margin-right: 6px; }
@media (max-width: 900px) {
  /* ── Matrica as card-stack ──
     Each row becomes its own card with a title (area), five label/value rows
     (column header → dot + status), and a reference footer. The desktop
     header row is hidden because every cell carries its label inline. */
  .matrix__head-row { grid-template-columns: 1fr; gap: 24px; }
  .matrix__legend { flex-direction: row; align-items: flex-start; }
  .matrix { overflow: visible; }
  .matrix__row--head { display: none; }
  .matrix__row {
    display: block;
    padding: 18px 18px 14px;
    border-top: 1px solid var(--ink-100);
    min-width: 0;
  }
  .matrix__row:first-of-type { border-top: 0; }
  .matrix__area {
    display: block;
    font-size: 17px;
    margin-bottom: 10px;
    color: var(--ink-900);
    font-weight: 600;
  }
  .matrix__dot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px dashed var(--ink-100);
    text-align: left;
    font-size: 18px;
    line-height: 1.2;
    color: var(--ink-300);
  }
  .matrix__dot::before {
    content: attr(data-col);
    flex: 1;
    color: var(--ink-500);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
  }
  .matrix__dot::after {
    content: attr(data-status);
    color: var(--ink-400);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    min-width: 88px;
    text-align: right;
  }
  .matrix__dot.is-on::after { color: var(--red-700); }
  .matrix__ref {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ink-100);
    justify-content: flex-start;
    font-size: 13px;
  }
}

/* ============================================================
   INSTRUMENTI (chapter V) — KPD feature + tool cards
   ============================================================ */
.kpd { background: var(--ink-900); color: #fff; border-radius: var(--radius); padding: 40px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: stretch; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.kpd__mark { position: absolute; top: -60px; right: -120px; font-weight: 900; font-size: 420px; line-height: .85; color: var(--red-700); opacity: .12; pointer-events: none; user-select: none; letter-spacing: -0.05em; }
.kpd__left { position: relative; }
.kpd__title { margin: 18px 0 0; font-weight: 700; font-size: clamp(36px, 5vw + 1rem, 56px); color: #fff; line-height: 1; letter-spacing: -0.025em; }
.text-red-l { color: var(--red-500); }
.kpd__lead { margin: 24px 0 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 480px; }
.kpd__lead b { color: #fff; font-weight: 600; }
.kpd__specs { margin-top: 24px; display: grid; gap: 0; }
.kpd__spec { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.05); }
.kpd__spec--first { border-top: 1px solid rgba(255,255,255,.12); }
.kpd__spec-v { color: #fff; font-family: var(--font-mono); font-size: 12px; }
.kpd__cta { margin-top: 28px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kpd__stats { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 36px; flex-wrap: wrap; }
.kpd__stat-n { font-weight: 700; font-size: 30px; color: var(--red-500); letter-spacing: -0.02em; line-height: 1; }
.kpd__window { background: var(--ink-800); border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); padding: 24px; font-family: var(--font-mono); font-size: 13px; display: flex; flex-direction: column; position: relative; }
.kpd__win-bar { display: flex; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 18px; align-items: center; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: .7; } .dot--r { background: #FF5F57; } .dot--y { background: #FEBC2E; } .dot--g { background: #28C840; }
.kpd__win-url { margin-left: auto; color: rgba(255,255,255,.45); font-size: 11px; }
.kpd__search { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: var(--radius-pill); background: var(--ink-900); border: 1px solid var(--red-700); box-shadow: 0 0 0 3px var(--red-900); }
.kpd__search .icon { color: var(--red-500); }
.kpd__query { color: #fff; flex: 1; }
.kpd__res { display: grid; grid-template-columns: 88px 1fr 48px; gap: 12px; padding: 10px 12px; margin-bottom: 2px; align-items: baseline; border-left: 2px solid transparent; }
.kpd__res.is-hot { background: var(--red-900); border-left-color: var(--red-500); border-radius: 4px; }
.kpd__res-code { color: var(--red-500); font-weight: 700; }
.kpd__res-name { color: #fff; font-family: var(--font-sans); font-size: 13px; }
.kpd__res-pct { color: rgba(255,255,255,.5); text-align: right; font-size: 11px; }
.kpd__win-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.5); }
@media (max-width: 900px) { .kpd { grid-template-columns: 1fr; gap: 32px; padding: 28px; } }
@media (max-width: 480px) { .kpd { padding: 20px; gap: 24px; } .kpd__window { padding: 16px; } }

.tmc { display: flex; flex-direction: column; gap: 0; text-decoration: none; color: inherit; }
.tmc:hover { text-decoration: none; }
.tmc__top { display: flex; justify-content: space-between; align-items: flex-start; }
.tmc__top .icon { color: var(--red-700); }
.tmc__title { margin: 20px 0 8px; font-weight: 700; font-size: 22px; color: var(--ink-900); letter-spacing: -0.015em; }
.tmc__lead { margin: 0; font-size: 14px; color: var(--ink-500); line-height: 1.55; }
.tmc__preview { margin-top: 20px; }
.tmc__stats { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ink-100); display: flex; justify-content: space-between; }
.tmc__stat-n { font-weight: 700; font-size: 18px; color: var(--ink-900); line-height: 1; letter-spacing: -0.015em; }
.tmc__stat-l { margin-top: 4px; font-size: 10px; }
.tmc .btn-text { margin-top: 18px; }

.mini-kalk { padding: 14px; background: var(--ink-50); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; color: var(--ink-600); display: grid; gap: 4px; }
.mini-kalk > div { display: flex; justify-content: space-between; }
.mini-kalk__total { padding-top: 6px; border-top: 1px solid var(--ink-200); margin-top: 4px; color: var(--red-700); font-weight: 700; font-size: 12px; }
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 10px; background: var(--ink-50); border-radius: var(--radius-sm); }
.mini-cal span { aspect-ratio: 1; border-radius: 3px; background: #fff; border: 1px solid var(--ink-100); font-family: var(--font-mono); font-size: 9px; color: var(--ink-400); display: flex; align-items: center; justify-content: center; }
.mini-cal span.is-hot { background: var(--red-700); border-color: var(--red-700); color: #fff; font-weight: 700; }
.mini-xml { padding: 14px; background: var(--ink-50); border-radius: var(--radius-sm); border: 2px dashed var(--ink-200); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); text-align: center; line-height: 1.4; }
.mini-xml .icon { color: var(--red-700); }

/* ============================================================
   Chapter nav (sticky left discs)
   ============================================================ */
.chapnav { position: fixed; left: 20px; top: 50%; transform: translateY(-50%); z-index: 50; padding: 10px 7px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-radius: var(--radius-pill); box-shadow: var(--shadow); border: 1px solid var(--ink-100); display: flex; flex-direction: column; gap: 2px; }
.chapnav a { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; color: var(--ink-400); text-decoration: none; transition: background var(--dur), color var(--dur); }
.chapnav a:hover, .chapnav a.is-active { background: var(--red-700); color: #fff; text-decoration: none; }
@media (max-width: 1380px) { .chapnav { display: none; } }

/* ============================================================
   VI · Personas
   ============================================================ */
.persona { padding: 32px; border-radius: var(--radius); background: #fff; color: var(--ink-900); box-shadow: var(--shadow); border: 1px solid var(--ink-100); position: relative; display: flex; flex-direction: column; }
.persona--f { background: var(--ink-900); color: #fff; box-shadow: var(--shadow-lg); border: 0; }
.persona__tag { width: 56px; height: 56px; border-radius: 50%; background: var(--red-50); color: var(--red-700); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.persona--f .persona__tag { background: var(--red-700); color: #fff; }
.persona__label { margin-top: 20px; color: var(--red-700); }
.persona--f .persona__label { color: var(--red-500); }
.persona__title { margin-top: 8px; font-weight: 700; font-size: clamp(20px, 2vw + 1rem, 26px); letter-spacing: -0.02em; line-height: 1.15; color: inherit; }
.persona__desc { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-500); }
.persona--f .persona__desc { color: rgba(255,255,255,.78); }
.persona__tools-h { margin-top: 24px; color: var(--ink-400); }
.persona--f .persona__tools-h { color: rgba(255,255,255,.55); }
.persona__tools { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.persona__tool { padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: var(--red-50); color: var(--red-700); border: 1px solid var(--red-100); }
.persona--f .persona__tool { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.15); }
.persona__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--ink-100); display: flex; justify-content: space-between; align-items: center; }
.persona--f .persona__foot { border-top-color: rgba(255,255,255,.12); }
.persona__svc { font-size: 13px; font-weight: 600; color: var(--red-700); }
.persona--f .persona__svc { color: var(--red-500); }
.persona__more { font-size: 13px; font-weight: 600; color: var(--ink-900); display: flex; align-items: center; gap: 4px; }
.persona--f .persona__more { color: #fff; }

/* ============================================================
   VII · Promises
   ============================================================ */
.promises { gap: 0; }
.promise { padding: 40px 32px; }
.promise--bd { border-right: 1px solid var(--ink-100); }
.promise__n { font-weight: 700; font-size: clamp(48px, 8vw + 1rem, 72px); color: var(--red-700); line-height: .85; letter-spacing: -0.04em; }
.promise__t { margin-top: 28px; font-weight: 700; font-size: clamp(20px, 1.5vw + 0.85rem, 24px); color: var(--ink-900); letter-spacing: -0.015em; line-height: 1.2; }
.promise__d { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-500); }
@media (max-width: 600px) { .promise--bd { border-right: 0; border-bottom: 1px solid var(--ink-100); } }

/* ============================================================
   VIII · Case study
   ============================================================ */
.case__hero { aspect-ratio: 21/9; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%), linear-gradient(135deg, #2d3f5e 0%, #1b2a3f 100%); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); margin-bottom: 56px; }
.case__hero-meta { position: absolute; bottom: 28px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: flex-end; color: #fff; gap: 16px; }
.case__hero-name { margin-top: 14px; font-weight: 700; font-size: clamp(22px, 3vw + 1rem, 32px); letter-spacing: -0.02em; line-height: 1.1; }
.case__hero-sub { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.7); }
.case__hero-since { font-weight: 700; font-size: clamp(20px, 3vw + 1rem, 28px); margin-top: 4px; }
.case__body { display: grid; grid-template-columns: 1fr 280px; gap: 64px; align-items: start; }
.case__prose p { font-size: clamp(15px, 0.6vw + 0.85rem, 17px); line-height: 1.7; color: var(--ink-700); margin: 16px 0 0; }
.case__prose h3 { margin-top: 48px; font-weight: 700; font-size: clamp(20px, 2vw + 1rem, 26px); color: var(--ink-900); letter-spacing: -0.015em; line-height: 1.15; }
.case__dropcap { font-size: clamp(17px, 0.7vw + 0.95rem, 22px) !important; line-height: 1.55 !important; color: var(--ink-900) !important; font-weight: 500; letter-spacing: -0.01em; margin-top: 0 !important; }
.case__dropcap::first-letter { float: left; font-weight: 700; font-size: clamp(48px, 8vw + 1rem, 72px); line-height: .8; margin: 6px 12px 0 0; color: var(--red-700); }
.pullquote { margin: 56px 0; padding: 32px 36px; background: #fff; border-radius: var(--radius); border-left: 4px solid var(--red-700); box-shadow: var(--shadow); }
.pullquote .icon { color: var(--red-700); }
.pullquote p { margin: 14px 0 0; font-size: clamp(17px, 1.5vw + 0.85rem, 22px); line-height: 1.4; color: var(--ink-900); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.pullquote__by { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ink-100); display: flex; align-items: center; gap: 14px; }
.pullquote__av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #2d3f5e, #1b2a3f); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.pullquote__name { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.case__aside { padding: 24px; background: #fff; border-radius: var(--radius); border: 1px solid var(--ink-100); box-shadow: var(--shadow-sm); position: sticky; top: 110px; }
.case__stats { margin-top: 18px; display: grid; gap: 0; }
.case__stat { padding: 12px 0; }
.case__stat--bd { border-bottom: 1px solid var(--ink-100); }
.case__stat-n { font-weight: 700; font-size: 22px; color: var(--ink-900); letter-spacing: -0.02em; }
.case__aside-foot { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ink-100); }
.case__chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) { .case__body { grid-template-columns: 1fr; gap: 32px; } .case__aside { position: static; } }

/* ============================================================
   IX · Testimonials
   ============================================================ */
.tcard { margin: 0; padding: 32px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tcard > .icon { color: var(--red-700); }
.tcard__q { margin: 18px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-700); flex: 1; font-style: italic; }
.tcard__by { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ink-100); }
.tcard__name { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.tcard__sector { margin-top: 6px; font-size: 13px; color: var(--ink-500); }
.tcard__foot { margin-top: 56px; text-align: center; font-size: 15px; color: var(--ink-500); }
.tcard__foot .icon { width: 14px; height: 14px; color: var(--red-700); vertical-align: -2px; margin-right: 6px; }

/* ============================================================
   X · Bulletin + Director (ink section)
   ============================================================ */
.bd__head { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: end; margin-bottom: 48px; }
.bd__head-chips { display: flex; gap: 8px; flex-direction: column; align-items: flex-end; }
.bd__head-chips .chip--ghost { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.bd__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
.bd__bulletin { padding: 36px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid var(--red-700); position: relative; }
.bd__bulletin-title { margin-top: 16px; font-weight: 700; font-size: clamp(24px, 3vw + 1rem, 36px); line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.bd__bulletin-lead { margin-top: 18px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.78); }
.bd__stats { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bd__stat-n { font-weight: 700; font-size: 28px; color: var(--red-500); letter-spacing: -0.02em; line-height: 1; }
.bd__bulletin-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.bd__dir { padding: 32px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; }
.bd__dir-head { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.bd__av { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(135deg, #6b3328, #8c4a35); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 34px; letter-spacing: -0.02em; position: relative; border: 2px solid var(--red-700); }
.bd__av-check { position: absolute; bottom: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--red-700); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink-900); }
.bd__av-check .icon { width: 11px; height: 11px; }
.bd__dir-name { font-weight: 700; font-size: clamp(22px, 2vw + 1rem, 28px); color: #fff; letter-spacing: -0.02em; line-height: 1.1; }
.bd__quote { margin: 24px 0 0; font-size: 17px; line-height: 1.5; color: #fff; font-style: italic; letter-spacing: -0.01em; padding-left: 18px; border-left: 3px solid var(--red-700); }
.bd__dir-grid { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.bd__dir-v { color: #fff; margin-top: 4px; line-height: 1.4; }
.bd__dir-cta { margin-top: 24px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--red-700); color: #fff; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.bd__dir-cta:hover { color: #fff; background: var(--red-800); text-decoration: none; }
@media (max-width: 900px) { .bd__head, .bd__grid { grid-template-columns: 1fr; gap: 24px; } .bd__head-chips { flex-direction: row; align-items: flex-start; flex-wrap: wrap; } }
@media (max-width: 560px) { .bd__stats { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   XI · Mandates
   ============================================================ */
.cap__head { display: flex; justify-content: space-between; align-items: baseline; }
.cap__pct { font-size: 13px; font-weight: 600; color: var(--ink-500); }
.cap__board { margin-top: 22px; display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; }
.cap__cell { aspect-ratio: 1; border-radius: 2px; border: 1.5px dashed var(--red-700); color: var(--red-700); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cap__cell.is-on { background: var(--ink-900); border: 0; }
.cap__stats { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ink-100); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cap__stat-n { font-weight: 700; font-size: 22px; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1; }
.port__list { margin-top: 22px; display: grid; gap: 12px; }
.port__top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-900); }
.port__top span:first-child { font-weight: 500; }
.port__top span:last-child { font-size: 12px; font-weight: 600; }
.port__bar { margin-top: 6px; height: 6px; background: var(--ink-50); border-radius: 3px; overflow: hidden; }
.port__bar div { height: 100%; background: var(--red-700); }
.tiers { padding: 0; overflow: hidden; }
.tier { display: grid; grid-template-columns: 90px 2.4fr 1fr 1fr 1.1fr 100px; padding: 16px 24px; align-items: center; border-top: 1px solid var(--ink-50); gap: 12px; }
.tier--head { background: var(--paper); border-top: 0; border-bottom: 1px solid var(--ink-100); }
.tier--head span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red-700); }
.tier--hl { background: var(--red-50); }
.tier__t { font-weight: 700; font-size: 18px; color: var(--red-700); letter-spacing: -0.01em; }
.tier__d { font-size: 15px; color: var(--ink-900); font-weight: 500; }
.tier__d .chip { margin-top: 6px; }
.tier__p, .tier__c { font-size: 13px; color: var(--ink-500); }
.tier__f { font-size: 14px; color: var(--ink-900); font-weight: 600; }
@media (max-width: 900px) {
  /* Cards inside CSS Grid have intrinsic min-content = content width by default.
     If a card holds anything wide (the 20-col capacity board, a long URL, etc.)
     the `1fr` track expands to that intrinsic width and breaks the visual.
     `min-width: 0` lets the track honour `1fr` literally. */
  .grid-2, .grid-3, .grid-4 { min-width: 0; }
  .grid-2 > .card, .grid-3 > .card, .grid-4 > .card { min-width: 0; }

  /* Capacity board: 20-col grid kept (the dashed cells are decorative).
     With `aspect-ratio: 1` + 20 cols, each cell becomes square; at 350 px
     card width minus padding that's ~14 px per cell — still legible. */
  .cap__board { grid-template-columns: repeat(20, 1fr); min-width: 0; }
  .cap__stats { grid-template-columns: 1fr; gap: 14px; }
  .cap__head { flex-wrap: wrap; gap: 6px; }

  /* ── Mandate tiers as card-stack ──
     The desktop is a six-column table; on mobile each `.tier` becomes a
     standalone card. Code badge top-left, description below, three
     label/value rows for Površina / Ciklus / Od, status chip at bottom. */
  .tiers { overflow: visible; padding: 12px; display: grid; gap: 14px; }
  .tier--head { display: none; }
  .tier {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "code  status"
      "desc  desc"
      "facts facts";
    column-gap: 14px;
    row-gap: 10px;
    padding: 18px;
    border-top: 0;
    border: 1px solid var(--ink-100);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    min-width: 0;
  }
  .tier--hl { background: var(--red-50); border-color: var(--red-100); }
  .tier__t {
    grid-area: code;
    font-size: 20px; color: var(--red-700);
    padding: 6px 10px; border-radius: var(--radius-sm);
    background: var(--red-50); align-self: center;
  }
  .tier--hl .tier__t { background: #fff; }
  /* The chip that follows .tier__f in source order is the open/closed status.
     Pull it into the status grid area via :last-child positioning. */
  .tier > .chip:last-child { grid-area: status; justify-self: end; align-self: center; }
  .tier__d {
    grid-area: desc;
    font-size: 15px; color: var(--ink-900); line-height: 1.4;
  }
  .tier__p, .tier__c, .tier__f {
    grid-area: facts; /* same area, stacked via flex below */
    display: none; /* hidden, re-shown via the fact-list below */
  }
  /* Re-pack the three fact spans into a single visual block. We can't use
     CSS subgrid here cross-browser without extra wrapping, so we use the
     `data-label` attr to render each fact inline with its label. */
  .tier__p, .tier__c, .tier__f {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px dashed var(--ink-100);
    font-size: 14px;
    color: var(--ink-900);
  }
  .tier__p::before, .tier__c::before, .tier__f::before {
    content: attr(data-label);
    color: var(--ink-500); font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  }
}

/* ============================================================
   Numbers band
   ============================================================ */
.numbers { position: relative; overflow: hidden; }
.numbers__mark { position: absolute; top: -100px; right: -100px; font-weight: 900; font-size: 400px; color: var(--red-700); opacity: .08; line-height: .85; letter-spacing: -0.04em; pointer-events: none; }
.numbers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; }
.numbers__title { margin-top: 16px; font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); color: #fff; letter-spacing: -0.02em; line-height: 1.05; }
.numbers__lead { margin-top: 20px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 480px; }
.numbers__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.numbers__cell { padding: 18px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.numbers__n { font-weight: 700; font-size: clamp(28px, 3vw + 1rem, 38px); color: var(--red-500); line-height: 1; letter-spacing: -0.025em; }
.numbers__s { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 4px; }
@media (max-width: 860px) { .numbers__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   XII · Booking
   ============================================================ */
.booking { position: relative; overflow: hidden; }
.booking__mark { position: absolute; top: -60px; right: -80px; font-weight: 900; font-size: 320px; color: var(--red-700); opacity: .07; line-height: .85; letter-spacing: -0.04em; pointer-events: none; }
.booking__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; }
.booking__title { margin: 0; font-weight: 700; font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); color: #fff; letter-spacing: -0.025em; line-height: 1; }
.booking__lead { margin-top: 28px; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.78); max-width: 460px; }
.booking__contacts { margin-top: 36px; display: flex; flex-direction: column; }
.bk__contact { display: flex; gap: 16px; align-items: center; padding: 14px 0; }
.bk__contact:hover { text-decoration: none; }
.bk__contact--bd { border-bottom: 1px solid rgba(255,255,255,.1); }
.bk__contact-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--red-700); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk__contact-t { display: block; font-size: 16px; font-weight: 600; color: #fff; }
.bk__contact-s { display: block; font-size: 13px; color: rgba(255,255,255,.55); margin-top: 2px; }
.bk { background: #fff; color: var(--ink-900); padding: 32px; border-radius: var(--radius); box-shadow: 0 32px 80px -32px rgba(0,0,0,.5); }
.bk__top { display: flex; justify-content: space-between; align-items: baseline; }
.bk__t { margin-top: 18px; font-size: 20px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.015em; }
.bk__cal { margin-top: 24px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk__dow { text-align: center; padding: 6px 0; color: var(--ink-400); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; font-weight: 600; }
.bk__day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-300); border-radius: 6px; }
.bk__day.is-avail { background: var(--red-50); color: var(--red-700); font-weight: 600; cursor: pointer; }
.bk__day.is-sel { background: var(--red-700); color: #fff; font-weight: 700; }
.bk__day.is-today { color: var(--ink-900); font-weight: 700; border: 1.5px solid var(--ink-900); }
.bk__slots { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk__slot { padding: 12px; min-height: var(--touch); border: 1px solid var(--ink-100); background: #fff; color: var(--ink-700); font-family: var(--font-sans); font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; }
.bk__slot.is-sel { background: var(--red-700); color: #fff; border-color: var(--red-700); }
.bk__confirm { margin-top: 24px; width: 100%; justify-content: center; }
.bk__note { margin-top: 14px; text-align: center; font-size: 12px; color: var(--ink-500); }
@media (max-width: 860px) { .booking__grid { grid-template-columns: 1fr; gap: 48px; } }

/* ============================================================
   Media integration — AI photography system (2026-07)
   ============================================================ */
/* Hero film strip — ambient loop framed like a broadsheet photo */
.herofilm { padding: 8px 0 48px; }
.herofilm__frame { position: relative; margin: 0; aspect-ratio: 21/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); background: var(--ink-100); }
.herofilm__frame .ambient { position: absolute; inset: 0; }
.herofilm__tag { position: absolute; left: 16px; bottom: 12px; z-index: 1; background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); padding: 5px 14px; border-radius: var(--radius-pill); }
.herofilm__tag .eyebrow { color: var(--ink-600); }
@media (max-width: 640px) { .herofilm__frame { aspect-ratio: 16/9; } }

/* Case hero: photo layer under the existing bottom scrim + meta row */
.case__hero-pic { position: absolute; inset: 0; }
.case__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%); }
.case__hero-meta { z-index: 1; }

/* Ink bands with ambient loops: content and marks above the scrimmed video */
.numbers > .container, .booking > .container { position: relative; z-index: 1; }
.numbers__mark, .booking__mark { z-index: 1; }


/* ── legal.css ── */
/* ============================================================
   legal.css — legal docs (impressum/privacy/cookies) + visual sitemap
   ============================================================ */

.legal-doc__head { max-width: 760px; }
.legal-doc__title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.02em; line-height: 1.05; color: var(--ink-900); margin: 8px 0 0; }
.legal-doc__updated { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--ink-400); }
.legal-doc__lead { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-500); max-width: 720px; }
.legal-doc__rule { height: 1px; background: var(--ink-100); margin: 32px 0; max-width: 760px; }
.legal-doc__back { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ink-100); max-width: 760px; }

/* identity table (impressum) */
.legal-id { margin: 24px 0; max-width: 640px; background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.legal-id__head { padding: 14px 20px; background: var(--paper); border-bottom: 1px solid var(--ink-100); }
.legal-id__rows { display: grid; }
.legal-id__row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--ink-50); }
.legal-id__row:first-child { border-top: 0; }
.legal-id__k { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.legal-id__v { font-size: 15px; color: var(--ink-900); }
@media (max-width: 560px) { .legal-id__row { grid-template-columns: 1fr; gap: 2px; } }

/* callout note */
.legal-note { margin: 24px 0; padding: 16px 20px; background: var(--red-50); border: 1px solid var(--red-100); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.6; color: var(--ink-700); max-width: 760px; }
.legal-note strong { color: var(--red-800); }

/* ============================================================
   Visual sitemap
   ============================================================ */
.smap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 900px) { .smap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .smap-grid { grid-template-columns: 1fr; } }
.smap-group { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.smap-group__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--ink-100); }
.smap-group__head .icon { color: var(--red-700); }
.smap-group__title { margin: 0; font-size: 18px; color: var(--ink-900); }
.smap-list { list-style: none; margin: 0; padding: 0; display: grid; }
.smap-list li { border-top: 1px solid var(--ink-50); }
.smap-list li:first-child { border-top: 0; }
.smap-list a { display: flex; align-items: center; gap: 10px; padding: 10px 4px; color: var(--ink-700); font-size: 14.5px; }
.smap-list a:hover { color: var(--red-700); text-decoration: none; }
.smap-list a:hover .icon { transform: translateX(2px); }
.smap-list .icon { color: var(--red-300); width: 13px; height: 13px; transition: transform var(--dur); }
.smap-list em { color: var(--ink-400); font-style: normal; font-size: 12.5px; }


/* ── pricing.css ── */
/* ============================================================
   Cjenik — pricing page.  Prefix: .price-…
   Matches the editorial "fiscal-authority" aesthetic; echoes the
   home Mandati (.tier) language for the mandate pricing cards.
   ============================================================ */

/* ---- Hero / intro ---- */
.price-hero { background: var(--paper); position: relative; overflow: hidden; }
.price-hero__mark {
  position: absolute; top: -140px; right: -80px; font-weight: 900; font-size: 560px;
  line-height: .85; color: var(--red-700); opacity: .04; pointer-events: none;
  user-select: none; letter-spacing: -0.06em;
}
.price-hero__inner { padding: 56px 0 72px; position: relative; max-width: 760px; }
.price-hero__chips { display: flex; gap: 10px; margin: 24px 0 28px; flex-wrap: wrap; }
.price-hero h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -0.025em; color: var(--ink-900); margin: 0; }
.price-hero__lead { margin: 28px 0 0; font-size: 19px; line-height: 1.6; color: var(--ink-500); max-width: 660px; }
.price-hero__lead strong { color: var(--ink-900); font-weight: 600; }
.price-hero__cta { margin-top: 36px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  .price-hero__mark { font-size: 380px; top: -80px; }
  .price-hero__inner { padding: 40px 0 56px; }
}

/* ---- Mandate pricing cards (echo home .tier language) ---- */
.price-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.price-tier {
  position: relative; display: flex; flex-direction: column; padding: 28px;
  border-radius: var(--radius); background: #fff; color: var(--ink-900);
  border: 1px solid var(--ink-100); box-shadow: var(--shadow);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.price-tier:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.price-tier--featured {
  background: var(--ink-900); color: #fff; border: 0; box-shadow: var(--shadow-xl);
}
.price-tier--featured:hover { box-shadow: var(--shadow-xl); }
.price-tier__badge { position: absolute; top: -12px; right: 24px; }
.price-tier__label { color: var(--red-700); }
.price-tier--featured .price-tier__label { color: var(--red-500); }
.price-tier__code {
  margin-top: 12px; font-weight: 700; font-size: clamp(22px, 2vw + 1rem, 30px); line-height: 1;
  letter-spacing: -0.02em; color: var(--red-700);
}
.price-tier--featured .price-tier__code { color: var(--red-500); }
.price-tier__title {
  margin: 16px 0 0; font-weight: 700; font-size: clamp(17px, 1.4vw + 0.85rem, 21px); letter-spacing: -0.015em;
  line-height: 1.25; color: var(--ink-900);
}
.price-tier--featured .price-tier__title { color: #fff; }
.price-tier__desc { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-500); min-height: 62px; }
.price-tier--featured .price-tier__desc { color: rgba(255,255,255,.72); }
.price-tier__price {
  margin-top: 16px; padding: 16px 0; border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100);
}
.price-tier--featured .price-tier__price { border-color: rgba(255,255,255,.15); }
.price-tier__amount {
  display: flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: clamp(26px, 3vw + 1rem, 36px);
  letter-spacing: -0.025em; line-height: 1; color: var(--ink-900);
}
.price-tier--featured .price-tier__amount { color: #fff; }
.price-tier__cur { font-size: 16px; font-weight: 400; color: var(--ink-400); }
.price-tier--featured .price-tier__cur { color: rgba(255,255,255,.55); }
.price-tier__cycle { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-400); }
.price-tier--featured .price-tier__cycle { color: rgba(255,255,255,.6); }
.price-tier__items { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; flex: 1; }
.price-tier__item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--ink-700); }
.price-tier--featured .price-tier__item { color: rgba(255,255,255,.85); }
.price-tier__item .icon { color: var(--red-700); flex-shrink: 0; margin-top: 1px; }
.price-tier--featured .price-tier__item .icon { color: var(--red-500); }
.price-tier__cta {
  margin-top: 24px; padding: 13px 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--ink-900); background: transparent;
  color: var(--ink-900); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}
.price-tier__cta .icon { width: 16px; height: 16px; }
.price-tier__cta:hover { background: var(--ink-900); color: #fff; text-decoration: none; gap: 11px; }
.price-tier--featured .price-tier__cta { background: var(--red-700); border-color: var(--red-700); color: #fff; }
.price-tier--featured .price-tier__cta:hover { background: var(--red-800); border-color: var(--red-800); color: #fff; }
.price-tiers__note { margin: 24px 0 0; font-size: 13px; color: var(--ink-500); line-height: 1.5; }
.price-tiers__note .icon { width: 13px; height: 13px; color: var(--red-700); vertical-align: -2px; margin-right: 6px; }
@media (max-width: 1100px) { .price-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .price-tiers { grid-template-columns: 1fr; } .price-tier__desc { min-height: 0; } }

/* ---- "Uvijek uključeno" strip ---- */
.price-incl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.price-incl__item { padding: 28px 24px; border-right: 1px solid var(--ink-100); }
.price-incl__item:last-child { border-right: 0; }
.price-incl__ic { color: var(--red-700); display: inline-flex; }
.price-incl__t { margin-top: 16px; font-weight: 700; font-size: 16px; color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.2; }
.price-incl__d { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-500); }
@media (max-width: 900px) {
  .price-incl { grid-template-columns: 1fr 1fr; }
  .price-incl__item { border-right: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
  .price-incl__item:nth-child(2n) { border-right: 0; }
  .price-incl__item:nth-last-child(-n+1) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .price-incl { grid-template-columns: 1fr; }
  .price-incl__item { border-right: 0; }
  .price-incl__item:last-child { border-bottom: 0; }
}

/* ---- Projektne usluge table ---- */
.price-proj { border: 1px solid var(--ink-100); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.price-proj__row {
  display: grid; grid-template-columns: 2.4fr 2.6fr 1fr 1.1fr; gap: 16px;
  padding: 16px 24px; align-items: center; border-top: 1px solid var(--ink-50);
  transition: background var(--dur) var(--ease-out);
}
.price-proj__row--first { border-top: 0; }
.price-proj__row:not(.price-proj__row--head):hover { background: var(--paper); }
.price-proj__row--head { background: var(--paper); border-top: 0; border-bottom: 1px solid var(--ink-100); padding: 16px 24px; }
.price-proj__row--head span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red-700); }
.price-proj__row--hl { background: var(--red-50); }
.price-proj__row--hl:hover { background: var(--red-50); }
.price-proj__name { font-size: 15px; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.price-proj__desc { font-size: 13px; color: var(--ink-500); line-height: 1.45; }
.price-proj__dur { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }
.price-proj__price { font-size: 14px; font-weight: 600; color: var(--red-700); }
@media (max-width: 900px) {
  .price-proj { overflow-x: auto; }
  .price-proj__row { grid-template-columns: 2fr 2.4fr 1fr 1fr; min-width: 720px; }
}

/* ---- Pricing FAQ (native <details> accordion) ---- */
.price-faq { display: grid; gap: 14px; }
.price-faq__item {
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius);
  padding: 0 24px; box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.price-faq__item[open] { border-color: var(--red-100); box-shadow: var(--shadow); }
.price-faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 17px; color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.3;
}
.price-faq__q::-webkit-details-marker { display: none; }
.price-faq__q:hover { color: var(--red-700); }
.price-faq__ic { color: var(--red-700); flex-shrink: 0; display: inline-flex; line-height: 0; }
.price-faq__ic .icon { width: 18px; height: 18px; }
.price-faq__item .price-faq__ic .icon:last-child { display: none; }
.price-faq__item[open] .price-faq__ic .icon:first-child { display: none; }
.price-faq__item[open] .price-faq__ic .icon:last-child { display: inline-flex; }
.price-faq__a { margin: 0; padding: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--ink-500); max-width: 64ch; }

/* ---- Closing CTA band (ink) ---- */
.price-cta { position: relative; overflow: hidden; }
.price-cta__mark { position: absolute; top: -60px; right: -60px; font-weight: 900; font-size: 320px; color: var(--red-700); opacity: .08; line-height: .85; letter-spacing: -0.04em; pointer-events: none; }
.price-cta__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; position: relative; }
.price-cta__title { margin: 16px 0 0; font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: #fff; letter-spacing: -0.02em; line-height: 1.05; }
.price-cta__lead { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 480px; }
.price-cta__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.price-cta__points { display: grid; gap: 14px; }
.price-cta__point { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.price-cta__point .icon { color: var(--red-500); flex-shrink: 0; margin-top: 2px; }
.price-cta__point-t { font-size: 15px; font-weight: 600; color: #fff; }
.price-cta__point-d { margin-top: 4px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.65); }
@media (max-width: 860px) { .price-cta__grid { grid-template-columns: 1fr; gap: 40px; } }


/* ── services.css ── */
/* ============================================================
   Usluge — services hub + 8 detail pages.  Prefix: .svc-…
   Built to match the editorial "fiscal-authority" aesthetic.
   ============================================================ */

/* ---- Shared hero (hub + detail) ---- */
.svc-hero { background: var(--paper); position: relative; overflow: hidden; }
.svc-hero__mark {
  position: absolute; top: -110px; right: -150px; font-weight: 900; font-size: 560px;
  line-height: .85; color: var(--red-700); opacity: .03; pointer-events: none;
  user-select: none; letter-spacing: -0.06em;
}
.svc-hero__inner { padding: 56px 0 72px; position: relative; }
.svc-hero__chips { display: flex; gap: 10px; margin: 24px 0 28px; flex-wrap: wrap; }
.svc-hero h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -0.025em; color: var(--ink-900); margin: 0; }
.svc-hero__lead { margin: 28px 0 0; font-size: 19px; line-height: 1.6; color: var(--ink-500); max-width: 640px; }
.svc-hero__lead strong { color: var(--ink-900); font-weight: 600; }
.svc-hero__cta { margin-top: 36px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---- Hub: editorial split hero with index aside ---- */
.svc-hero__grid { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: start; }
.svc-index { padding: 28px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--ink-100); }
.svc-index__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--ink-100); }
.svc-index__list { margin: 8px 0 0; padding: 0; list-style: none; }
.svc-index__item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ink-50); text-decoration: none; color: inherit; transition: padding-left var(--dur) var(--ease-out); }
.svc-index__item:last-child { border-bottom: 0; }
.svc-index__item:hover { text-decoration: none; padding-left: 4px; }
.svc-index__num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--red-700); }
.svc-index__name { font-size: 14px; font-weight: 500; color: var(--ink-900); line-height: 1.25; }
.svc-index__item .icon { color: var(--ink-300); width: 14px; height: 14px; }
.svc-index__item:hover .icon { color: var(--red-700); }

@media (max-width: 980px) {
  .svc-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-hero__mark { font-size: 380px; }
  .svc-hero__inner { padding: 40px 0 56px; }
}

/* ---- Hub: services grid (rich cards) ---- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-card {
  display: flex; flex-direction: column; padding: 24px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--ink-100); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; position: relative;
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.svc-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); border-color: var(--red-100); transform: translateY(-2px); }
.svc-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.svc-card__top .icon { color: var(--red-700); }
.svc-card__num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-300); letter-spacing: .04em; }
.svc-card__name { margin: 18px 0 0; font-weight: 700; font-size: 18px; color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.2; }
.svc-card__tagline { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--red-700); line-height: 1.4; }
.svc-card__blurb { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-500); flex: 1; }
.svc-card__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ink-100); display: flex; justify-content: space-between; align-items: center; }
.svc-card__more { font-size: 13px; font-weight: 600; color: var(--red-700); display: flex; align-items: center; gap: 6px; }
.svc-card:hover .svc-card__more { gap: 9px; transition: gap var(--dur) var(--ease-out); }
.svc-card__more .icon { width: 14px; height: 14px; }
.svc-card__mandate { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ink-400); background: var(--ink-50); padding: 3px 8px; border-radius: var(--radius-pill); letter-spacing: .04em; }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---- Hub: "how we work" process strip ---- */
.svc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--ink-100); }
.svc-flow__step { padding: 28px 24px; border-right: 1px solid var(--ink-100); position: relative; }
.svc-flow__step:last-child { border-right: 0; }
.svc-flow__step--last { background: var(--red-50); }
.svc-flow__n { display: flex; align-items: center; gap: 10px; }
.svc-flow__phase { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); }
.svc-flow__t { margin: 16px 0 0; font-weight: 700; font-size: 17px; color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.2; }
.svc-flow__d { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-500); }
@media (max-width: 900px) { .svc-flow { grid-template-columns: 1fr 1fr; } .svc-flow__step:nth-child(2) { border-right: 0; } .svc-flow__step:nth-child(1), .svc-flow__step:nth-child(2) { border-bottom: 1px solid var(--ink-100); } }
@media (max-width: 560px) { .svc-flow { grid-template-columns: 1fr; } .svc-flow__step { border-right: 0; border-bottom: 1px solid var(--ink-100); } .svc-flow__step:last-child { border-bottom: 0; } }

/* ---- Hub: closing CTA band ---- */
.svc-cta { position: relative; overflow: hidden; }
.svc-cta__mark { position: absolute; top: -60px; right: -60px; font-weight: 900; font-size: 320px; color: var(--red-700); opacity: .08; line-height: .85; letter-spacing: -0.04em; pointer-events: none; }
.svc-cta__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; position: relative; }
.svc-cta__title { margin: 16px 0 0; font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: #fff; letter-spacing: -0.02em; line-height: 1.05; }
.svc-cta__lead { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 480px; }
.svc-cta__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.svc-cta__points { display: grid; gap: 14px; }
.svc-cta__point { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.svc-cta__point .icon { color: var(--red-500); flex-shrink: 0; margin-top: 2px; }
.svc-cta__point-t { font-size: 15px; font-weight: 600; color: #fff; }
.svc-cta__point-d { margin-top: 4px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.65); }
@media (max-width: 860px) { .svc-cta__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   Detail page
   ============================================================ */

/* ---- Detail hero with "na prvi pogled" aside ---- */
.svc-dhero__grid { display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: start; }
.svc-dhero__eyebrow { display: flex; align-items: center; gap: 12px; }
.svc-glance { padding: 28px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--ink-100); }
.svc-glance__list { margin: 16px 0 0; display: grid; gap: 0; }
.svc-glance__row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--ink-50); }
.svc-glance__row:last-child { border-bottom: 0; }
.svc-glance__k { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.svc-glance__v { font-size: 14px; font-weight: 600; color: var(--ink-900); line-height: 1.35; }
.svc-glance__cta { margin-top: 20px; width: 100%; justify-content: center; }
@media (max-width: 900px) {
  .svc-dhero__grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-glance { padding: 22px; }
}

/* ---- "Što je uključeno" split + checklist ---- */
.svc-incl { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.svc-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.svc-checklist li { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--ink-100); }
.svc-checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-check { width: 28px; height: 28px; border-radius: 50%; background: var(--red-50); color: var(--red-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-check .icon { width: 16px; height: 16px; }
.svc-incl__t { font-size: 16px; font-weight: 600; color: var(--ink-900); }
.svc-incl__d { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--ink-500); }
@media (max-width: 900px) { .svc-incl { grid-template-columns: 1fr; gap: 32px; } }

/* ---- "Kako radimo" numbered process (callout discs) ---- */
.svc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-step { padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--ink-100); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.svc-step__head { display: flex; align-items: center; gap: 12px; }
.svc-step__phase { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); }
.svc-step__t { margin: 16px 0 0; font-weight: 700; font-size: 16px; color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.25; }
.svc-step__d { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-500); }
@media (max-width: 900px) { .svc-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .svc-steps { grid-template-columns: 1fr; } }

/* ---- Related tools ---- */
.svc-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.svc-tools__list { display: grid; gap: 14px; }
.svc-tool { padding: 18px 22px; background: var(--paper); border-radius: var(--radius); border: 1px solid var(--ink-100); display: flex; gap: 16px; align-items: center; text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.svc-tool:hover { text-decoration: none; border-color: var(--red-100); background: #fff; }
.svc-tool .icon { color: var(--red-700); flex-shrink: 0; }
.svc-tool__body { flex: 1; }
.svc-tool__name { font-size: 16px; font-weight: 600; color: var(--ink-900); display: flex; align-items: center; gap: 8px; }
.svc-tool__desc { margin-top: 2px; font-size: 13px; color: var(--ink-500); line-height: 1.4; }
.svc-tool__arrow { color: var(--red-700); }
.svc-tool__arrow .icon { width: 16px; height: 16px; }
@media (max-width: 900px) { .svc-tools { grid-template-columns: 1fr; gap: 32px; } }

/* ---- FAQ / note ---- */
.svc-faq { display: grid; gap: 12px; max-width: 820px; }
.svc-faq__item { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.svc-faq__q { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; font-weight: 600; color: var(--ink-900); line-height: 1.35; }
.svc-faq__q .icon { color: var(--red-700); flex-shrink: 0; margin-top: 2px; }
.svc-faq__a { margin: 10px 0 0 32px; font-size: 14.5px; line-height: 1.6; color: var(--ink-500); }
@media (max-width: 480px) { .svc-faq__item { padding: 18px 16px; } .svc-faq__a { margin-left: 0; } }

/* ---- Detail closing CTA (card on paper) ---- */
.svc-dcta { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--ink-100); padding: 48px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; min-width: 0; }
.svc-dcta__title { margin: 14px 0 0; font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); color: var(--ink-900); letter-spacing: -0.02em; line-height: 1.1; }
.svc-dcta__lead { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-500); max-width: 520px; }
.svc-dcta__actions { display: flex; flex-direction: column; gap: 12px; }
.svc-dcta__actions .btn { justify-content: center; }
@media (max-width: 760px) { .svc-dcta { grid-template-columns: 1fr; padding: 28px 22px; gap: 28px; } .svc-dcta__actions { flex-direction: row; flex-wrap: wrap; } .svc-dcta__actions .btn { flex: 1 1 auto; } }

/* ---- Detail prev/next service nav ---- */
.svc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.svc-nav__link { padding: 22px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--ink-100); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease-out); }
.svc-nav__link:hover { text-decoration: none; border-color: var(--red-100); }
.svc-nav__link--next { text-align: right; }
.svc-nav__dir { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red-700); display: flex; align-items: center; gap: 6px; }
.svc-nav__link--next .svc-nav__dir { justify-content: flex-end; }
.svc-nav__dir .icon { width: 13px; height: 13px; }
.svc-nav__name { margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }
@media (max-width: 560px) { .svc-nav { grid-template-columns: 1fr; } }

/* ---- Problem koji rješavamo (segment S10) ---- */
.svc-problem { display: grid; grid-template-columns: 2fr 1fr; gap: 56px; align-items: start; max-width: 1080px; min-width: 0; }
.svc-problem__t {
  margin: 0; font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem);
  font-weight: 600; line-height: 1.35; color: var(--ink-900); letter-spacing: -0.01em;
}
.svc-problem__enemy {
  border-left: 2px solid var(--red-700); padding: 4px 0 4px 20px;
  background: linear-gradient(90deg, rgba(139,26,26,.04), transparent);
}
.svc-problem__enemy-t {
  margin-top: 8px; font-weight: 600; font-size: 17px;
  color: var(--ink-900); line-height: 1.35;
}
@media (max-width: 640px) { .svc-problem { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Što dobivate (outcomes) ---- */
.svc-outcomes {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px; max-width: 720px;
}
.svc-outcomes > li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 16px; line-height: 1.55; color: var(--ink-800);
}
.svc-outcomes .svc-check {
  flex-shrink: 0; color: var(--red-700);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Tipičan klijent (lives above closing CTA) ---- */
.svc-typical {
  background: #fff; border-radius: var(--radius); border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm); padding: 22px 26px;
  margin-bottom: 28px; max-width: 880px;
}
.svc-typical__t {
  margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-800);
}

/* ---- Behind-the-tool cross-promo strip (lives on /alati/* pages) ---- */
.behind__head { max-width: 760px; margin-bottom: 36px; }
.behind__heading {
  margin: 14px 0 0; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem);
  font-weight: 700; line-height: 1.15; color: var(--ink-900); letter-spacing: -0.01em;
}
.behind__lead { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-500); }
.behind__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.behind__card {
  display: flex; gap: 18px;
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius);
  padding: 28px 28px 26px; box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.behind__card:hover {
  text-decoration: none; border-color: var(--red-100);
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.behind__ic {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--red-50); color: var(--red-700);
}
.behind__t { margin: 4px 0 0; font-size: 18px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.25; }
.behind__d { margin: 8px 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink-500); }
.behind__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--red-700); letter-spacing: .02em; }
@media (max-width: 760px) { .behind__grid { grid-template-columns: 1fr; } }

/* ---- Media integration: service still above the glance card (2026-07) ---- */
.svc-glance__pic { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 16px; }


/* ── tools.css ── */
/* ============================================================
   tools.css — Alati hub + KPD, salary, calendar, e-racun, osnivanje
   ============================================================ */

/* shared tool hero + CTA */
.toolhero__head { max-width: 760px; padding-top: 8px; }
.toolhero__title { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); letter-spacing: -0.025em; line-height: 1; color: var(--ink-900); margin: 18px 0 0; }
.toolhero__lead { margin: 22px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-500); }
.toolhero__cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

.alati-cta__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
.alati-cta__title { margin: 14px 0 0; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: #fff; letter-spacing: -0.02em; line-height: 1.05; }
.alati-cta__lead { margin-top: 18px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 520px; }
.alati-cta__btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 860px) { .alati-cta__grid { grid-template-columns: 1fr; gap: 28px; } .alati-cta__btns { flex-direction: row; flex-wrap: wrap; } }

/* ---- Alati hub ---- */
.alati-hero__body { padding: 48px 0 64px; max-width: 760px; }
.alati-hero__body h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -0.025em; color: var(--ink-900); margin: 0 0 28px; }
.alati-grid { margin-top: 24px; }
.alati-kpd { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--ink-900); color: #fff; border-radius: var(--radius); padding: 40px; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); text-decoration: none; }
.alati-kpd:hover { text-decoration: none; }
.alati-kpd__mark { position: absolute; top: -50px; right: -90px; font-weight: 900; font-size: 320px; color: var(--red-700); opacity: .13; line-height: .85; letter-spacing: -0.05em; pointer-events: none; }
.alati-kpd__body { position: relative; }
.alati-kpd__title { margin: 16px 0 0; font-weight: 700; font-size: clamp(28px, 4vw + 1rem, 44px); color: #fff; line-height: 1.05; letter-spacing: -0.025em; }
.alati-kpd__lead { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 440px; }
.alati-kpd__stats { margin: 24px 0; display: flex; gap: 32px; }
.alati-kpd__stat-n { font-weight: 700; font-size: 28px; color: var(--red-500); letter-spacing: -0.02em; line-height: 1; }
.alati-kpd__win { background: var(--ink-800); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 18px; font-family: var(--font-mono); position: relative; }
.alati-kpd__win-bar { display: flex; gap: 6px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.alati-kpd__search { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: var(--radius-pill); background: var(--ink-900); border: 1px solid var(--red-700); color: rgba(255,255,255,.85); font-size: 13px; }
.alati-kpd__search .icon { color: var(--red-500); }
.alati-kpd__res { display: grid; grid-template-columns: 70px 1fr 38px; gap: 10px; padding: 10px 10px; margin-top: 8px; background: var(--red-900); border-left: 2px solid var(--red-500); border-radius: 4px; align-items: baseline; }
.alati-kpd__res--dim { background: transparent; border-left-color: transparent; opacity: .6; }
.alati-kpd__code { color: var(--red-500); font-weight: 700; font-size: 12px; }
.alati-kpd__res span:nth-child(2) { font-family: var(--font-sans); font-size: 12.5px; color: #fff; }
.alati-kpd__pct { color: rgba(255,255,255,.5); font-size: 11px; text-align: right; }
@media (max-width: 900px) { .alati-kpd { grid-template-columns: 1fr; gap: 28px; padding: 28px; } }
@media (max-width: 480px) { .alati-kpd { padding: 20px; } }

/* window dots (shared) */
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: .8; } .dot--r { background: #FF5F57; } .dot--y { background: #FEBC2E; } .dot--g { background: #28C840; }

/* ============================================================
   KPD page
   ============================================================ */
.kpdh__grid { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
.kpdh__title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); color: var(--ink-900); line-height: .98; letter-spacing: -0.025em; margin: 20px 0 0; }
.kpdh__lead { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-500); max-width: 580px; }
.kpdh__cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.kpdh__aside { padding: 28px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--ink-100); }
.kpdh__stats { margin-top: 18px; display: grid; gap: 0; }
.kpdh__stat { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; }
.kpdh__stat--bd { border-bottom: 1px solid var(--ink-100); }
.kpdh__stat-v { font-weight: 700; font-size: 20px; color: var(--red-700); letter-spacing: -0.02em; }
@media (max-width: 900px) { .kpdh__grid { grid-template-columns: 1fr; gap: 32px; } }

/* the live app window */
.kpdapp { margin-top: 48px; background: var(--ink-900); color: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 32px 80px -32px rgba(20,20,30,.4); }
.kpdapp__bar { padding: 14px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.kpdapp__url { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); }
.kpdapp__inner { padding: 32px clamp(16px, 4vw, 48px) 40px; }
.kpdapp__search {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 20px; min-height: 56px;
  border-radius: var(--radius-pill);
  background: var(--ink-800); border: 2px solid var(--red-700);
  box-shadow: 0 0 0 4px var(--red-900);
}
.kpdapp__search > .icon { color: var(--red-500); flex-shrink: 0; }
.kpdapp__input {
  flex: 1 1 0; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: #fff; font-family: var(--font-sans);
  font-size: 16px;        /* iOS Safari does not auto-zoom at >=16px */
  line-height: 1.5;
  /* The pill wrapper is 56 px; without a height, the input is just its text
     box (~20 px) and only that area receives the tap. Fill the wrapper. */
  height: 32px; padding: 0;
}
.kpdapp__input::placeholder { color: rgba(255,255,255,.4); }
.kpdapp__filters { margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kpdapp__sectors {
  display: flex; gap: 6px; flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
}
.kpdapp__sector {
  padding: 10px 14px; min-height: var(--touch); display: inline-flex; align-items: center;
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
  font-family: var(--font-sans); cursor: pointer;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.15);
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.kpdapp__sector:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.kpdapp__sector.is-active { background: var(--red-700); color: #fff; border-color: var(--red-700); }
.kpdapp__status { margin: 24px 0 12px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); }
.kpdapp__results { display: grid; gap: 4px; max-height: 460px; overflow-y: auto; }

@media (max-width: 640px) {
  /* On phones: the search field wraps cleanly, the FUZZY chip moves below.
     Sector chips become a horizontal scroll strip instead of a 6-row grid. */
  .kpdapp__search { flex-wrap: wrap; padding: 12px 16px; row-gap: 8px; }
  .kpdapp__search > .chip { order: 3; }
  .kpdapp__input { flex: 1 1 100%; }
  .kpdapp__sectors {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    /* Fade hint on the right edge so users know it scrolls. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}
.kpdres { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; background: transparent; border: 0; border-left: 2px solid transparent; border-radius: 6px; cursor: pointer; font-family: var(--font-sans); transition: background var(--dur); }
.kpdres:hover { background: rgba(255,255,255,.05); border-left-color: var(--red-500); }
.kpdres.is-copied { background: var(--red-900); border-left-color: var(--red-500); }
.kpdres__code { color: var(--red-500); font-weight: 700; font-family: var(--font-mono); font-size: 14px; }
.kpdres__name { color: #fff; font-size: 14px; }
.kpdres__name em { color: rgba(255,255,255,.45); font-style: normal; font-size: 12px; }
.kpdres--cat .kpdres__name { color: rgba(255,255,255,.7); }
.kpdres__copy { color: rgba(255,255,255,.4); display: inline-flex; }
.kpdres:hover .kpdres__copy, .kpdres.is-copied .kpdres__copy { color: var(--red-500); }
.kpdapp__note { margin-top: 20px; text-align: center; font-size: 13px; color: var(--ink-500); }
.kpdapp__note .icon { width: 14px; height: 14px; color: var(--red-700); vertical-align: -2px; margin-right: 6px; }

.kpdhow { gap: 48px; align-items: start; }
.kpdhow__steps { margin-top: 24px; display: grid; gap: 18px; }
.kpdhow__step { display: flex; gap: 14px; align-items: flex-start; }
.kpdhow__t { font-size: 16px; font-weight: 600; color: var(--ink-900); }
.kpdhow__d { font-size: 14px; color: var(--ink-500); margin-top: 2px; line-height: 1.5; }
.kpdext__t { margin: 12px 0 8px; font-size: 22px; color: var(--ink-900); }
.kpdext__d { font-size: 15px; color: var(--ink-500); line-height: 1.6; }
.kpdext__btns { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.kpdext__note { margin-top: 16px; font-size: 12.5px; color: var(--ink-400); }
.kpdext__note .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; color: var(--red-700); }

/* ============================================================
   Salary calculator
   ============================================================ */
.sal { display: grid; grid-template-columns: 1fr 1.05fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .sal { grid-template-columns: 1fr; } }
.sal__modes { display: flex; gap: 4px; padding: 4px; background: var(--ink-50); border-radius: var(--radius-pill); margin-bottom: 24px; }
.sal__mode {
  flex: 1; padding: 12px; min-height: var(--touch);
  border: 0; background: transparent; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--ink-500); cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.sal__mode:hover { color: var(--ink-900); }
.sal__mode.is-active { background: #fff; color: var(--red-700); box-shadow: var(--shadow-sm); }
.sal__amount { position: relative; }
.sal__amount .input { font-size: clamp(20px, 2vw + 0.85rem, 26px); font-weight: 700; padding-right: 40px; color: var(--ink-900); }
.sal__eur { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: var(--ink-300); }
.sal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .sal__row { grid-template-columns: 1fr; } }
.sal__hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-400); line-height: 1.5; }
.sal__hint .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; color: var(--red-700); }
.sal__result {
  background: var(--ink-900); color: #fff;
  align-self: start;
}
@media (min-width: 901px) {
  .sal__result { position: sticky; top: 100px; }
}
.sal__result [data-result],
.sal__result [data-row] {
  transition: color var(--dur) var(--ease-out);
}
.sal__result.is-updating .sal__big [data-result] { opacity: 0.4; }
.sal__big [data-result] { display: inline-block; transition: opacity 180ms var(--ease-out); }
.sal__headline { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sal__big { font-weight: 700; font-size: clamp(32px, 4vw + 1rem, 48px); color: var(--red-500); letter-spacing: -0.03em; line-height: 1; margin-top: 8px; }
.sal__rows { margin-top: 18px; display: grid; gap: 0; }
.sal__line { display: flex; justify-content: space-between; padding: 9px 0; font-size: 14px; color: rgba(255,255,255,.85); }
.sal__line span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sal__line--sub { color: rgba(255,255,255,.55); font-size: 13px; padding-left: 14px; }
.sal__line--net { border-top: 1px solid rgba(255,255,255,.12); margin-top: 4px; padding-top: 14px; color: #fff; font-weight: 700; font-size: 16px; }
.sal__line--net span:last-child { color: var(--red-500); }
.sal__employer { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.sal__line--tot { font-weight: 700; color: #fff; }
.sal__cta { margin-top: 24px; }

/* ============================================================
   Tax calendar
   ============================================================ */
.kal__months { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 20px; }
.kal__month { flex-shrink: 0; padding: 10px 16px; border: 1px solid var(--ink-200); background: #fff; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink-700); cursor: pointer; display: flex; flex-direction: column; line-height: 1.2; transition: all var(--dur); }
.kal__month small { font-size: 10px; color: var(--ink-400); font-weight: 500; }
.kal__month.is-active { background: var(--red-700); border-color: var(--red-700); color: #fff; }
.kal__month.is-active small { color: rgba(255,255,255,.7); }
.kal__filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.kal__cat { padding: 11px 16px; min-height: var(--touch); display: inline-flex; align-items: center; border: 1px solid var(--ink-200); background: #fff; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-700); cursor: pointer; transition: all var(--dur); }
.kal__cat.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.kal__list { display: grid; gap: 12px; }
.kal__loading, .kal__empty { color: var(--ink-500); font-size: 15px; padding: 24px 0; }
.kal__loading .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: var(--red-700); }
.kal__item { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 20px 24px; background: #fff; border: 1px solid var(--ink-100); border-left: 4px solid var(--cat, var(--red-700)); border-radius: var(--radius); box-shadow: var(--shadow-sm); align-items: start; }
.kal__date { text-align: center; }
.kal__day { display: block; font-weight: 700; font-size: clamp(22px, 3vw + 1rem, 32px); color: var(--ink-900); line-height: 1; letter-spacing: -0.02em; }
.kal__mon { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); text-transform: uppercase; margin-top: 4px; }
.kal__top { display: flex; align-items: center; gap: 12px; }
.kal__cat-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cat, var(--red-700)); }
.kal__full { font-family: var(--font-mono); font-size: 12px; color: var(--ink-400); }
.kal__title { margin: 8px 0 0; font-size: 18px; color: var(--ink-900); }
.kal__desc { margin: 8px 0 0; font-size: 14px; color: var(--ink-500); line-height: 1.55; }
.kal__link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--red-700); }
.kal__note { margin-top: 24px; font-size: 13px; color: var(--ink-500); line-height: 1.5; }
.kal__note .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--red-700); }
@media (max-width: 480px) { .kal__item { grid-template-columns: 56px 1fr; gap: 14px; padding: 16px; } }

/* ---- "Kako uvesti" block on porezni kalendar page (.ics export) ---- */
.toolhero__cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.ics-how {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start;
  max-width: 980px;
}
.ics-how__t { margin: 14px 0 0; font-weight: 700; font-size: clamp(20px, 2vw + 1rem, 28px); color: var(--ink-900); line-height: 1.2; letter-spacing: -0.015em; }
.ics-how__d { margin: 16px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-500); }
.ics-how__d code { font-family: var(--font-mono); font-size: 13px; background: var(--ink-50); padding: 2px 6px; border-radius: 4px; color: var(--ink-800); }
.ics-how__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: ics; }
.ics-how__steps li {
  position: relative; padding: 14px 16px 14px 52px;
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius);
  font-size: 14px; color: var(--ink-700); line-height: 1.5;
  counter-increment: ics;
}
.ics-how__steps li::before {
  content: counter(ics);
  position: absolute; left: 14px; top: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--red-50); color: var(--red-700);
  font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 760px) { .ics-how { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   E-Račun
   ============================================================ */
.ehow__step { display: flex; flex-direction: column; gap: 12px; }
.ehow__ic { width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--red-50); color: var(--red-700); display: flex; align-items: center; justify-content: center; }
.ehow__t { font-size: 18px; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 10px; }
.ehow__t .callout { width: 24px; height: 24px; font-size: 12px; }
.ehow__d { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-500); line-height: 1.55; }
.eapp {
  background: var(--ink-900); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); margin-top: 40px;
}
.eapp__bar {
  padding: 14px 20px; display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.eapp__url { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eapp__open {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(255,255,255,.06); color: #fff;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  transition: background var(--dur) var(--ease-out);
}
.eapp__open:hover { background: var(--red-700); border-color: var(--red-700); text-decoration: none; }
.eapp__open .icon { width: 13px; height: 13px; color: currentColor; }
.eapp__frame {
  display: block; width: 100%;
  height: clamp(520px, calc(100dvh - 220px), 880px);
  border: 0; background: #f2f4f8;
}
.eapp__note { margin-top: 20px; text-align: center; font-size: 13px; color: var(--ink-500); }
.eapp__note .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--red-700); }
.eapp__note a { color: var(--red-700); }
@media (max-width: 640px) {
  .eapp { margin-top: 24px; border-radius: var(--radius); }
  .eapp__bar { padding: 10px 14px; }
  .eapp__url { font-size: 11px; }
  .eapp__open { padding: 7px 10px; font-size: 11px; }
}

/* ============================================================
   Osnivanje guide
   ============================================================ */
.osn-cmp { margin-top: 32px; border: 1px solid var(--ink-100); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.osn-cmp__head, .osn-cmp__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.osn-cmp__head { background: var(--ink-900); color: #fff; }
.osn-cmp__head span { padding: 16px 18px; font-size: 15px; font-weight: 700; }
.osn-cmp__col.is-hl { color: var(--red-500); } .osn-cmp__col em { font-style: normal; font-size: 11px; font-weight: 600; display: block; color: rgba(255,255,255,.5); }
.osn-cmp__row { border-top: 1px solid var(--ink-50); }
.osn-cmp__row:nth-child(even) { background: var(--paper); }
.osn-cmp__label { padding: 14px 18px; font-size: 13px; font-weight: 600; color: var(--ink-400); text-transform: uppercase; letter-spacing: .04em; }
.osn-cmp__cell { padding: 14px 18px; font-size: 14.5px; color: var(--ink-800); }
.osn-cmp__cell.is-hl { background: var(--red-50); font-weight: 600; color: var(--ink-900); }
.osn-note { margin-top: 20px; font-size: 14px; color: var(--ink-500); }
.osn-note .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--red-700); }
.osn-note a { color: var(--red-700); font-weight: 600; }
.osn-steps { margin-top: 32px; display: grid; gap: 0; }
.osn-step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--ink-100); align-items: baseline; }
.osn-step:first-child { border-top: 0; }
.osn-step__n { font-weight: 700; font-size: clamp(24px, 3vw + 1rem, 32px); color: var(--red-700); letter-spacing: -0.03em; line-height: 1; }
.osn-step__t { margin: 0; font-size: 19px; color: var(--ink-900); }
.osn-step__d { margin: 8px 0 0; font-size: 15px; color: var(--ink-500); line-height: 1.6; }
@media (max-width: 900px) {
  /* Tablet portrait: 4-col table compresses cells. Two-up the data columns
     so the row still reads but doesn't crowd. Header stays full. */
  .osn-cmp__head { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .osn-cmp__head span { padding: 12px 14px; font-size: 13.5px; }
  .osn-cmp__row { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .osn-cmp__cell { padding: 12px 14px; font-size: 13.5px; }
}
@media (max-width: 640px) {
  /* Mobile: stack as card per row — label on top, then 3 cells stacked. */
  .osn-cmp__head { display: none; }
  .osn-cmp__row { grid-template-columns: 1fr; padding: 16px 18px; gap: 8px; border-top: 8px solid var(--paper); }
  .osn-cmp__row:nth-child(even) { background: #fff; }
  .osn-cmp__label { background: transparent; padding: 0 0 8px; font-size: 12.5px; }
  .osn-cmp__cell {
    padding: 8px 0; font-size: 14px;
    display: grid; grid-template-columns: 84px 1fr; gap: 14px;
    align-items: baseline;
    border-top: 1px dashed var(--ink-100);
  }
  .osn-cmp__cell::before {
    content: attr(data-label);
    color: var(--ink-500); font-size: 11px;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  }
  .osn-cmp__cell.is-hl { background: transparent; }
}
@media (max-width: 480px) { .osn-step { grid-template-columns: 48px 1fr; gap: 14px; padding: 18px 0; } }