/* ─────────────────────────────────────────────────────────────
   novac.ba — design system
   Inspired by the "Stripi" DESIGN.md (getdesign.md/stripe):
   deep-navy ink, electric-indigo primary, atmospheric gradient mesh,
   thin (300) display type with negative tracking, tabular money figures,
   tight-radius pill buttons, near-white card surfaces.
   ───────────────────────────────────────────────────────────── */

:root {
  /* brand & accent */
  --primary:            #533afd;
  --primary-deep:       #4434d4;
  --primary-press:      #2e2b8c;
  --primary-soft:       #665efd;
  --primary-subdued:    #b9b9f9;
  --primary-wash:       #eeecff;
  --brand-dark-900:     #1c1e54;
  --ruby:               #ea2261;
  --magenta:            #f96bee;
  --sherbet:            #ffb27a;   /* mesh-only warm stop */
  --lavender:           #c9c2ff;   /* mesh-only stop */
  --lemon:              #9b6829;

  /* surface */
  --canvas:             #ffffff;
  --canvas-soft:        #f6f9fc;
  --canvas-cream:       #f7eedb;
  --hairline:           #e3e8ee;
  --hairline-input:     #a8c3de;

  /* text */
  --ink:                #0d253d;
  --ink-secondary:      #273951;
  --ink-mute:           #64748d;
  --ink-mute-2:         #61718a;
  --on-primary:         #ffffff;

  /* radii */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 9999px;
  --radius: var(--r-lg);   /* legacy alias */

  /* spacing scale (8px base) */
  --s-xxs: 2px;  --s-xs: 4px;  --s-sm: 8px;  --s-md: 12px;
  --s-lg: 16px;  --s-xl: 22px; --s-xxl: 28px; --s-huge: 48px;

  /* elevation (shadow-blue #003770) */
  --shadow-1: 0 1px 3px rgba(0,55,112,.08);
  --shadow-2: 0 8px 24px rgba(0,55,112,.08), 0 2px 6px rgba(0,55,112,.04);
  --shadow-3: 0 18px 50px rgba(0,55,112,.12), 0 6px 14px rgba(0,55,112,.06);
  --shadow: var(--shadow-1);  /* legacy alias */

  /* fonts */
  --font-sans: 'Inter', 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-body: 400;
  --fw-display: 300;

  /* layout */
  --maxw: 1200px;

  /* legacy color aliases (kept so old class names still resolve) */
  --navy: var(--brand-dark-900);
  --navy-2: var(--ink);
  --blue: var(--primary);
  --blue-2: var(--primary-deep);
  --blue-lt: var(--primary-wash);
  --green: #1a8f5b;
  --green-lt: #e3f5ec;
  --accent: var(--primary);
  --text: var(--ink);
  --muted: var(--ink-mute);
  --border: var(--hairline);
  --surface: var(--canvas-soft);
  --white: var(--canvas);
}

/* ── base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-feature-settings: "ss01";
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s-xl) 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: 1px; }

h1, h2, h3, h4 {
  font-weight: var(--fw-display);
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.14;
  margin: 0 0 var(--s-md);
  text-wrap: balance;
}
/* h1 keeps the light display weight; section headings carry more weight for an
   enterprise/banking feel (clear hierarchy, authoritative subheads). */
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); letter-spacing: -.03em; line-height: 1.04; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 1.95rem); letter-spacing: -.022em; font-weight: 500; }
h3 { font-size: 1.3rem; letter-spacing: -.018em; font-weight: 600; }
h4 { font-size: 1.05rem; letter-spacing: -.01em; font-weight: 600; }
p  { margin: 0 0 1rem; text-wrap: pretty; }

.tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ── typography polish ────────────────────────────────────── */
::selection { background: var(--primary-wash); color: var(--primary-press); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; }
small, .small { text-wrap: pretty; }
sup, sub { line-height: 0; font-size: .7em; }
abbr[title] { text-decoration-thickness: from-font; cursor: help; }
b, strong { font-weight: 600; }
li { text-wrap: pretty; }

/* ── utilities ────────────────────────────────────────────── */
.container { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.75rem, 1rem + 2.6vw, 3rem) 1.25rem; }
.container.tight { padding-top: 1.5rem; padding-bottom: 2rem; }
.muted { color: var(--ink-mute); }
.small { font-size: .85rem; }
.lead  { font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); color: var(--ink-secondary); font-weight: 400; max-width: 64ch; }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; font-weight: 600; color: var(--primary-deep);
}
.chip, .pill-tag {
  display: inline-block; vertical-align: middle;
  background: var(--primary-wash); color: var(--primary-deep);
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

/* ── inline monoline icons (categories, features, headings) ── */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico svg { display: block; }
.eyebrow svg { width: .95em; height: .95em; vertical-align: -.16em; margin-right: .4em; }
h1 svg { width: .74em; height: .74em; vertical-align: -.02em; margin-right: .24em; opacity: .92; }
.section { padding: clamp(2rem, 1.3rem + 2.8vw, 3.5rem) 1.25rem; }
.section--soft  { background: var(--canvas-soft); }
.section--cream { background: var(--canvas-cream); }
.section--dark  { background: var(--brand-dark-900); color: var(--on-primary); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-primary); }
.section-inner { max-width: var(--maxw); margin: 0 auto; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--s-lg); }

/* ── gradient mesh backdrop ───────────────────────────────── */
.mesh, .mesh-band { position: relative; overflow: hidden; }
/* Atmospheric backdrop — kept restrained: cool, low-contrast wash (no hot
   magenta/ruby/amber stops) so it reads as a sober enterprise-banking surface. */
.mesh::before, .mesh-band::before {
  content: "";
  position: absolute; inset: -30% -10% auto -10%;
  height: 150%;
  z-index: 0;
  background:
    radial-gradient(44% 62% at 12% 10%, var(--primary-wash) 0%, rgba(238,236,255,0) 70%),
    radial-gradient(48% 66% at 52% 0%,  var(--lavender)     0%, rgba(201,194,255,0) 66%),
    radial-gradient(40% 56% at 90% 14%, var(--canvas-cream) 0%, rgba(247,238,219,0) 70%);
  filter: blur(64px) saturate(102%);
  opacity: .55;
  pointer-events: none;
}
.mesh-band::before { inset: -60% -10% auto -10%; height: 130%; filter: blur(70px) saturate(100%); opacity: .3; }
.mesh > *, .mesh-band > * { position: relative; z-index: 1; }

/* ── primary nav ──────────────────────────────────────────── */
.nav-primary {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav-primary ul a { font-weight: 450; letter-spacing: -.005em; }
.nav-primary ul a:hover { color: var(--primary-deep); }
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px 1.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.nav-primary .brand {
  display: inline-flex; align-items: center; flex: none; line-height: 0;
}
.nav-primary .brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 30px; width: auto; }
@media (max-width: 720px) { .brand-logo { height: 26px; } }
.nav-primary ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.15rem;
  margin-left: auto;
}
.nav-primary ul a {
  color: var(--ink-mute-2); font-size: .95rem; font-weight: 400;
}
.nav-primary ul a:hover { color: var(--ink); text-decoration: none; }
.nav-cta a, a.nav-cta {
  background: var(--primary); color: var(--on-primary) !important;
  padding: 8px 16px; border-radius: var(--r-pill);
  font-weight: 500; box-shadow: var(--shadow-1);
  transition: background .15s, transform .15s;
}
.nav-cta a:hover, a.nav-cta:hover { background: var(--primary-press); text-decoration: none; transform: translateY(-1px); }

/* ── hero ─────────────────────────────────────────────────── */
.hero { padding: clamp(2.25rem, 1.6rem + 3vw, 4rem) 1.25rem clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.hero-inner { max-width: var(--maxw); margin: 0 auto; }
.hero h1 { max-width: 18ch; margin-bottom: var(--s-lg); }
.hero .lead { margin-bottom: var(--s-xl); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-md); margin-bottom: var(--s-xl); }

/* hero tab/search card */
.tabs { display: inline-flex; gap: 4px; margin-bottom: var(--s-md); background: rgba(13,37,61,.06); padding: 4px; border-radius: var(--r-pill); }
.tab {
  background: transparent; border: 0; color: var(--ink-secondary);
  padding: 7px 18px; border-radius: var(--r-pill); cursor: pointer;
  font-family: inherit; font-size: .92rem; font-weight: 500;
}
.tab.active { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-1); }
.tab-panel.hidden { display: none; }
.hero-form {
  display: flex; flex-wrap: wrap; gap: var(--s-md); align-items: flex-end;
  background: var(--canvas); color: var(--ink);
  padding: var(--s-lg); border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-2);
  max-width: 760px;
}
.hero-form label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 500; color: var(--ink-mute); }
.hero-form input, .hero-form select {
  padding: 9px 11px; border: 1px solid var(--hairline-input); border-radius: var(--r-sm);
  font-family: inherit; font-size: 1rem; min-width: 150px; background: var(--canvas); color: var(--ink);
}
.hero-form input:focus, .hero-form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-wash); }
.hero-form button { align-self: flex-end; }

/* ── buttons (tight pills) ────────────────────────────────── */
.btn, .btn-cta, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1;
  padding: 11px 20px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
  text-decoration: none;
}
.btn, .btn-cta { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-1); }
.btn:hover, .btn-cta:hover { background: var(--primary-press); color: var(--on-primary); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active, .btn-cta:active { background: var(--primary-press); transform: translateY(0); }
.btn-secondary { background: var(--canvas); color: var(--primary); border-color: var(--primary); }
.btn-secondary:hover { background: var(--primary-wash); color: var(--primary-deep); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--ink-mute); text-decoration: none; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }
.btn-on-dark { background: var(--canvas); color: var(--brand-dark-900); }
.btn-on-dark:hover { background: var(--primary-wash); color: var(--primary-deep); text-decoration: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-md); }

/* ── fx strip ─────────────────────────────────────────────── */
.strip { background: var(--canvas-soft); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.strip-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 1.25rem;
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center;
  font-size: .92rem;
}
.strip-inner > strong { color: var(--ink-secondary); font-weight: 600; }
.fx-strip { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.fx-strip span { display: inline-flex; gap: 6px; }
.fx-strip strong { color: var(--ink-mute); font-weight: 600; }
.fx-strip b { font-feature-settings: "tnum"; font-weight: 500; color: var(--ink); }
.strip-inner a.muted { margin-left: auto; }

/* ── card grids (categories / institutions) ───────────────── */
.bank-grid, .inst-grid, .cat-grid, .cards {
  list-style: none; padding: 0; margin: var(--s-xl) 0 0;
  display: grid; gap: var(--s-lg);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cat-grid li, .bank-grid li, .inst-grid li, .card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  box-shadow: var(--shadow-1);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cat-grid li:hover, .bank-grid li:hover, .inst-grid li:hover, .card:hover {
  border-color: var(--primary-subdued); transform: translateY(-1px); box-shadow: var(--shadow-2);
}
.inst-grid a, .bank-grid a, .cat-grid a { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.inst-grid a:hover, .bank-grid a:hover, .cat-grid a:hover { text-decoration: none; }
.inst-grid img.logo, .bank-grid img.logo { max-width: 100px; max-height: 40px; object-fit: contain; align-self: flex-start; }
.inst-grid .name, .bank-grid .name { font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; }
.bank-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* category cards with icon + count (home + footer-ish) */
.cat-card { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.cat-card:hover { text-decoration: none; }
.cat-card .ico {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary-deep);
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  transition: border-color .15s, color .15s, background .15s;
}
.cat-card .ico svg { width: 21px; height: 21px; }
.cat-card:hover .ico { border-color: var(--primary-subdued); background: var(--primary-wash); color: var(--primary); }
.cat-card .ttl { font-weight: 500; font-size: 1.1rem; letter-spacing: -.01em; }
.cat-card .cnt { color: var(--ink-mute); font-size: .9rem; font-feature-settings: "tnum"; }
.cat-card .arr { color: var(--primary); font-size: .9rem; font-weight: 500; margin-top: 2px; }

/* ── feature row ──────────────────────────────────────────── */
.feature-grid {
  display: grid; gap: var(--s-xl); margin: var(--s-xxl) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature h3 { font-size: 1.2rem; margin-bottom: 6px; }
.feature p  { color: var(--ink-mute); margin: 0; }
.feature .ico { display: inline-flex; margin-bottom: var(--s-md); color: var(--primary-deep); }
.feature .ico svg { width: 26px; height: 26px; }

/* ── stats band ───────────────────────────────────────────── */
.stats {
  display: grid; gap: var(--s-xl);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: var(--s-xl) 0 0;
}
.stat .num { display: block; font-weight: 300; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); color: var(--ink); letter-spacing: -.03em; font-feature-settings: "tnum"; }
.section--dark .stat .num { color: var(--on-primary); }
.stat .lbl { display: block; color: var(--ink-mute); font-size: .92rem; margin-top: 4px; }
.section--dark .stat .lbl { color: rgba(255,255,255,.7); }

/* ── CTA band ─────────────────────────────────────────────── */
.cta-band { border-radius: var(--r-xl); padding: clamp(2rem, 1.5rem + 2vw, 3rem); }
.cta-band.section--dark { background: var(--brand-dark-900); }
.cta-band h2 { margin-bottom: var(--s-sm); }
.cta-band p { color: rgba(255,255,255,.78); max-width: 60ch; margin-bottom: var(--s-lg); }

/* ── breadcrumbs ──────────────────────────────────────────── */
.breadcrumbs { font-size: .88rem; color: var(--ink-mute); margin-bottom: 1.5rem; }
.breadcrumbs a { color: var(--ink-mute); }
.breadcrumbs a:hover { color: var(--primary); }

/* ── page header (category / static) ─────────────────────── */
.page-header { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem) 1.25rem clamp(1.25rem, .9rem + 1.6vw, 2rem); }
.page-header h1 { margin-bottom: var(--s-sm); }
.page-header .lead { color: var(--ink-secondary); }

/* ── institution profile ─────────────────────────────────── */
/* legacy (still used by some location templates) */
.inst-header { display: flex; align-items: center; gap: var(--s-xl); margin-bottom: var(--s-xl); flex-wrap: wrap; }
.inst-header .logo-lg { max-width: 140px; max-height: 80px; object-fit: contain; }
.inst-header h1 { margin: 0; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.inst-body > h2 { margin-top: var(--s-xxl); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 1.5rem; margin: var(--s-lg) 0; align-items: baseline; }
.kv dt { color: var(--ink-mute); font-size: .9rem; }
.kv dd { margin: 0; font-feature-settings: "tnum"; }

/* ── institution profile — hero ─────────────────────────── */
.inst-hero-band { border-bottom: 1px solid var(--hairline); }
.inst-hero-band::before { inset: -70% -10% auto -10%; height: 150%; opacity: .32; }
.inst-hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) 1.25rem clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
.inst-hero .breadcrumbs { margin-bottom: var(--s-lg); }
.inst-hero-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-xl); flex-wrap: wrap; }
.inst-hero-id { display: flex; align-items: flex-start; gap: var(--s-lg); flex: 1 1 320px; min-width: 0; }
.inst-logo {
  flex: none; width: 84px; height: 84px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 120% at 30% 20%, #fff, var(--canvas-soft));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-1), inset 0 1px 0 #fff;
  object-fit: contain; padding: 10px;
}
.inst-logo--ph {
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  font-size: 2.1rem; font-weight: 400; color: var(--primary-deep); background: var(--primary-wash);
  border-color: var(--primary-subdued);
}
.inst-hero-text { min-width: 0; }
.inst-hero-text .eyebrow { margin-bottom: 6px; }
.inst-hero-text h1 { margin: 0 0 4px; font-size: clamp(1.8rem, 1.35rem + 1.7vw, 2.6rem); line-height: 1.08; }
.inst-legal { margin: 0; color: var(--ink-mute); font-size: .95rem; }
.inst-legal:empty { display: none; }
.inst-hero-text .inst-tagline { margin-top: 10px; }
.ent-sep { color: var(--ink-mute); margin: 0 2px; }
.inst-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-sm); flex: none; max-width: 320px; }
.inst-hero-actions:empty { display: none; }
.inst-hero-actions .btn, .inst-hero-actions .btn-secondary, .inst-hero-actions .btn-ghost { white-space: nowrap; }

/* quick-stats strip under the hero */
.quickstats {
  list-style: none; margin: var(--s-xl) 0 0; padding: 0;
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.quickstats:empty { display: none; }
.quickstats li { padding: var(--s-lg); border-left: 1px solid var(--hairline); position: relative; transition: background .15s; }
.quickstats li:first-child { border-left: 0; }
.quickstats li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--primary-soft)); opacity: 0; transition: opacity .15s; }
.quickstats li:hover { background: var(--canvas-soft); }
.quickstats li:hover::before { opacity: 1; }
.qs-num { display: block; font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--primary-deep); letter-spacing: -.03em; line-height: 1.1; }
.qs-lbl { display: block; margin-top: 4px; color: var(--ink-mute); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }

/* ── institution profile — two-column layout ────────────── */
.inst-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.inst-layout .container { padding: 0; }     /* guard if nested */
.inst-main { min-width: 0; }
.inst-main.stack > * + * { margin-top: var(--s-xl); }
.inst-side { min-width: 0; position: sticky; top: 86px; }
.inst-side.stack > * + * { margin-top: var(--s-lg); }
.inst-block { margin-top: var(--s-xxl); }
.inst-block > h2 { position: relative; padding-left: 15px; margin-bottom: var(--s-md); margin-top: 0; }
.inst-block > h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--primary), var(--primary-deep)); }
.inst-desc { font-size: clamp(1rem, .97rem + .25vw, 1.15rem); line-height: 1.62; color: var(--ink-secondary); max-width: 68ch; }

/* products grid */
.prod-grid { list-style: none; padding: 0; margin: var(--s-lg) 0 0; display: grid; gap: var(--s-md); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.prod-card { position: relative; overflow: hidden; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-1); transition: border-color .15s, transform .15s, box-shadow .15s; }
.prod-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--primary), var(--primary-deep)); transform: scaleY(0); transform-origin: bottom; transition: transform .18s ease; }
.prod-card a, .prod-card.prod-card--static { display: flex; flex-direction: column; gap: 6px; padding: var(--s-lg); color: var(--ink); }
.prod-card a:hover { text-decoration: none; }
.prod-card:not(.prod-card--static):hover { border-color: var(--primary-subdued); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.prod-card:not(.prod-card--static):hover::before { transform: scaleY(1); }
.prod-card--static::before { display: none; }
.pc-name { font-weight: 500; font-size: 1.02rem; letter-spacing: -.01em; }
.pc-cmp { font-size: .85rem; color: var(--primary); font-weight: 500; }
.pc-cmp--muted { color: var(--ink-mute); font-weight: 400; }

/* per-city network table */
.table-wrap { overflow-x: auto; margin: var(--s-lg) 0 0; border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.net-table { border-collapse: collapse; width: 100%; min-width: 420px; font-feature-settings: "tnum"; }
.net-table caption.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.net-table th, .net-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.net-table th:first-child, .net-table td:first-child { text-align: left; }
.net-table thead th { background: var(--canvas-soft); color: var(--ink-mute); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--hairline); }
.net-table tbody tr:nth-child(even) td { background: rgba(13,37,61,.022); }
.net-table tbody tr:last-child td { border-bottom: 0; }
.net-table tbody tr:hover td { background: var(--canvas-soft); }
.net-table td a { color: var(--ink); font-weight: 500; }
.net-table td a:hover { color: var(--primary); }

/* ── comparator tables (/usporedi/…) ─────────────────────── */
.cmp-sublinks { margin: 0 0 var(--s-lg); color: var(--ink-mute); font-size: .92rem; }
.cmp-sublinks a { color: var(--primary); }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: .95rem; }
.cmp-table th, .cmp-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.cmp-table thead th { background: var(--canvas-soft); color: var(--ink-mute); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; border-bottom: 2px solid var(--hairline); }
.cmp-table tbody tr:nth-child(even) td { background: rgba(13,37,61,.022); }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody tr:hover td { background: var(--canvas-soft); }
.cmp-table td a { color: var(--ink); font-weight: 500; }
.cmp-table td:first-child a { font-weight: 600; }
.cmp-table td a:hover { color: var(--primary); }
.cmp-table .cmp-actions { white-space: nowrap; }
.cmp-table .cmp-actions a[target="_blank"] { color: var(--primary); font-weight: 400; }
.cmp-table .cmp-metric { white-space: nowrap; color: var(--ink); font-weight: 500; }
.cmp-table tr.cmp-feat td, .cmp-table tr.cmp-feat:hover td { background: var(--primary-wash); }
.cmp-table tr.cmp-feat td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.cmp-badge { display: inline-block; vertical-align: middle; background: var(--primary); color: #fff; font-size: .6rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); }
.cmp-table .tnum { white-space: nowrap; }

/* all-cities chip list */
.city-chips { list-style: none; padding: 0; margin: var(--s-lg) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.city-chips li a {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--canvas);
  color: var(--ink-secondary); font-size: .9rem; transition: border-color .15s, color .15s;
}
.city-chips li a:hover { border-color: var(--primary-subdued); background: var(--primary-wash); color: var(--primary-deep); text-decoration: none; }
.cc-n { color: var(--ink-mute); font-size: .78rem; }

/* sidebar cards */
.side-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl); box-shadow: var(--shadow-1); }
.side-card h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; margin: 0 0 var(--s-md); padding-bottom: var(--s-sm); border-bottom: 1px solid var(--hairline); }
.side-card--muted { background: var(--canvas-soft); box-shadow: none; }
.side-card--muted p:last-child { margin-bottom: 0; }
.side-map { display: block; width: 100%; height: 190px; border: 1px solid var(--hairline); border-radius: var(--r-md); margin: var(--s-sm) 0; background: var(--canvas-soft); }
.src-list { list-style: none; padding: 0; margin: 0 0 var(--s-md); }
.src-list li { margin-bottom: 4px; font-size: .9rem; word-break: break-word; }

/* key-value rows in the sidebar (stacked, not the grid .kv) */
.kv--side { display: block; margin: 0; }
.kv--side .kv-row { display: block; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.kv--side .kv-row:first-child { padding-top: 0; }
.kv--side .kv-row:last-child { padding-bottom: 0; border-bottom: 0; }
.kv--side dt { color: var(--ink-mute); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.kv--side dd { margin: 0; font-size: .95rem; word-break: break-word; }
.kv--side dd code { background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 1px 6px; font-size: .88rem; }

/* ── location lists & pages ──────────────────────────────── */
.loc-list { list-style: none; padding: 0; margin: var(--s-md) 0 0; display: grid; gap: 10px; }
.loc-list li {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.loc-list li:hover { border-color: var(--primary-subdued); box-shadow: var(--shadow-1); }
.loc-list a { display: block; color: var(--ink); }
.loc-list a:hover { text-decoration: none; }
.loc-list strong { display: block; font-weight: 500; }
.loc-list .muted { font-size: .88rem; }

.loc-body { display: grid; gap: var(--s-lg); }
.loc-map, #map { display: block; width: 100%; height: 380px; min-height: 320px; border-radius: var(--r-lg); margin-top: var(--s-md); background: var(--canvas-soft); border: 1px solid var(--hairline); }
iframe.loc-map { border: 1px solid var(--hairline); }
#map { height: 520px; }
.leaflet-container { font-family: var(--font-sans); border-radius: var(--r-lg); }
.leaflet-popup-content { font-size: .9rem; line-height: 1.4; }
.leaflet-popup-content a { color: var(--primary); font-weight: 500; }

.hours { display: grid; grid-template-columns: max-content 1fr; gap: 4px 1rem; max-width: 320px; font-feature-settings: "tnum"; }
.hours dt { color: var(--ink-mute); }
.chip + h1 { margin-top: 8px; }
header .chip { margin-bottom: 6px; }

/* ── tables ──────────────────────────────────────────────── */
.fx-table { border-collapse: collapse; width: 100%; max-width: 600px; margin: var(--s-lg) 0; font-feature-settings: "tnum"; }
.fx-table th, .fx-table td { border-bottom: 1px solid var(--hairline); padding: 10px 14px; text-align: right; }
.fx-table th:first-child, .fx-table td:first-child { text-align: left; font-weight: 500; }
.fx-table thead th { background: var(--canvas-soft); color: var(--ink-mute); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--hairline); }
.fx-table tbody tr:nth-child(even) td { background: rgba(13,37,61,.022); }
.fx-table tbody tr:hover td { background: var(--canvas-soft); }
.fx-table tbody tr:last-child td { border-bottom: 0; }

/* ── footer ──────────────────────────────────────────────── */
footer { background: var(--brand-dark-900); color: rgba(255,255,255,.62); padding: var(--s-huge) 1.25rem 0; margin-top: var(--s-huge); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; }
.footer-grid { display: grid; gap: var(--s-xxl); grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer-grid > div > strong { color: #fff; font-weight: 500; letter-spacing: -.01em; display: block; margin-bottom: 10px; }
.footer-brand { display: inline-block; line-height: 0; margin-bottom: var(--s-md); }
.footer-brand:hover { text-decoration: none; }
.footer-logo { display: block; height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer-brand:hover .footer-logo { opacity: 1; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 8px; }
footer a { color: rgba(255,255,255,.74); font-size: .92rem; }
footer a:hover { color: #fff; }
footer p.muted { color: rgba(255,255,255,.5); }
.footer-bottom { text-align: center; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--s-xxl); font-size: .85rem; }

/* ── "Za institucije" / pricing page ─────────────────────── */
.why-grid { display: grid; gap: var(--s-lg); margin: var(--s-xl) 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.why-grid > div { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl); box-shadow: var(--shadow-1); }
.why-grid h3 { margin-bottom: 6px; font-size: 1.15rem; }
.why-grid p { margin: 0; color: var(--ink-mute); }

.tier-compare { overflow-x: auto; margin: var(--s-lg) 0; }
.tier-compare table { border-collapse: collapse; width: 100%; min-width: 560px; }
.tier-compare th, .tier-compare td { border-bottom: 1px solid var(--hairline); padding: 11px 14px; text-align: center; font-size: .95rem; }
.tier-compare th:first-child, .tier-compare td:first-child { text-align: left; }
.tier-compare thead th { background: var(--canvas-soft); color: var(--ink-secondary); font-weight: 600; border-bottom: 2px solid var(--hairline); }
.tier-compare thead th:last-child { background: var(--primary-wash); color: var(--primary-deep); }
.tier-compare tbody tr:hover { background: var(--canvas-soft); }
.tier-compare td:first-child { color: var(--ink-secondary); }

.pricing-cards { display: grid; gap: var(--s-lg); margin: var(--s-lg) 0 var(--s-sm); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; }
.pricing-card {
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: var(--s-xxl); display: flex; flex-direction: column; box-shadow: var(--shadow-1);
}
.pricing-card h3 { font-size: 1.4rem; font-weight: 300; margin-bottom: var(--s-lg); }
.pricing-card .price { margin: 0; }
.pricing-card .price .amount { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); font-weight: 300; letter-spacing: -.03em; color: var(--ink); font-feature-settings: "tnum"; }
.pricing-card .price .per { color: var(--ink-mute); font-size: 1rem; }
.pricing-card .price-monthly { margin: 6px 0 0; color: var(--ink-mute); font-feature-settings: "tnum"; }
.pricing-card .price-save { margin: 6px 0 var(--s-lg); color: var(--green); font-weight: 600; font-size: .92rem; }
.pricing-card .btn, .pricing-card .btn-cta { margin-top: auto; }
/* featured (dark) tier — the brand's signature inverted pricing card */
.pricing-card--accent { background: var(--brand-dark-900); color: var(--on-primary); border-color: var(--brand-dark-900); box-shadow: var(--shadow-3); position: relative; }
.pricing-card--accent h3 { color: var(--on-primary); }
.pricing-card--accent .price .amount { color: var(--on-primary); }
.pricing-card--accent .price .per, .pricing-card--accent .price-monthly { color: rgba(255,255,255,.72); }
.pricing-card--accent .price-save { color: #7ad7a8; }
.pricing-card--accent .btn, .pricing-card--accent .btn-cta { background: var(--canvas); color: var(--brand-dark-900); }
.pricing-card--accent .btn:hover, .pricing-card--accent .btn-cta:hover { background: var(--primary-wash); color: var(--primary-deep); }
.pricing-card--accent::before { content: "Najpopularnije"; position: absolute; top: -11px; left: var(--s-xxl); background: var(--primary); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); }

.faq { margin: var(--s-lg) 0 0; }
.faq dt { font-weight: 600; font-size: 1.05rem; margin-top: var(--s-lg); color: var(--ink); }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 6px 0 0; color: var(--ink-secondary); max-width: 72ch; }

/* "Detalji i napomene" — small-print bullet list on the /za-banke/ page */
.notes-list { margin: var(--s-lg) 0 0; padding-left: 1.2em; max-width: 74ch; color: var(--ink-secondary); }
.notes-list li { margin-bottom: .55em; }
.notes-list li::marker { color: var(--ink-mute); }

/* ── static document pages (/kontakt/, /pravne-napomene/, /impressum/, /o-nama/) ── */
.page-doc { max-width: 840px; }
.page-doc > h1 { margin-bottom: var(--s-lg); }
.page-doc > .lead { margin-bottom: var(--s-xl); }
.page-doc h2 { font-size: 1.32rem; font-weight: 600; letter-spacing: -.015em; margin-top: var(--s-huge); margin-bottom: var(--s-sm); }
.page-doc h2:first-of-type { margin-top: var(--s-xxl); }
.page-doc > p, .page-doc > ul, .page-doc > ol { max-width: 70ch; color: var(--ink-secondary); }
.page-doc ul, .page-doc ol { padding-left: 1.2em; }
.page-doc li { margin-bottom: .4em; }
.page-doc li::marker { color: var(--ink-mute); }
.page-doc strong { color: var(--ink); }

/* labelled info table (impressum / contact publisher block) */
.kv--info { display: grid; grid-template-columns: max-content 1fr; gap: 0 1.75rem; margin: var(--s-lg) 0 var(--s-xl); border-top: 1px solid var(--hairline); max-width: 560px; align-items: baseline; }
.kv--info dt { padding: 11px 0; color: var(--ink-mute); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--hairline); }
.kv--info dd { padding: 11px 0; margin: 0; border-bottom: 1px solid var(--hairline); color: var(--ink); word-break: break-word; }

/* contact channel cards */
.contact-cards { display: grid; gap: var(--s-md); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: var(--s-xl) 0; max-width: none; }
.contact-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl); box-shadow: var(--shadow-1); }
.contact-card h2, .contact-card h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--s-xs); }
.contact-card p { margin: 0 0 var(--s-sm); color: var(--ink-secondary); max-width: none; }
.contact-card p:last-child { margin-bottom: 0; }
.contact-mail { font-weight: 600; }

/* ── lead forms ──────────────────────────────────────────── */
.lead-form {
  display: grid; gap: var(--s-md); max-width: 480px; margin: var(--s-lg) 0 0;
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl);
  box-shadow: var(--shadow-1);
}
.lead-form--wide { max-width: 680px; grid-template-columns: 1fr 1fr; }
.lead-form--wide label:nth-last-child(2), .lead-form--wide button { grid-column: 1 / -1; }
.lead-form label { display: flex; flex-direction: column; gap: 5px; font-size: .8rem; font-weight: 500; color: var(--ink-mute); }
.lead-form input, .lead-form select, .lead-form textarea {
  padding: 10px 12px; border: 1px solid var(--hairline-input); border-radius: var(--r-sm);
  font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--canvas);
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-wash); }
.lead-form button { justify-self: start; }

/* ── featured ("Istaknuto") institutions ─────────────────── */
.badge-verified {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  background: var(--green-lt); color: var(--green);
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
}
/* inactive / merged institutions */
.badge-inactive {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  background: #f3e7e9; color: #8a3d4c; border: 1px solid #e3c8ce;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
}
.card--inactive { opacity: .62; }
.card--inactive:hover { opacity: 1; }
.inst-status-notice {
  max-width: var(--maxw); margin: var(--s-lg) auto 0; padding: var(--s-md) 1.25rem;
  background: #fbf4ee; border: 1px solid #ecdcc9; border-radius: var(--r-md);
  color: var(--ink-secondary); font-size: .92rem;
}
.inst-status-notice::before { content: "⚠ "; }
.inst-status-notice strong { color: #8a5a2e; }

.inst-tagline { margin: 8px 0 0; font-size: 1.15rem; font-weight: 300; color: var(--ink-secondary); letter-spacing: -.01em; }
.inst-cta { margin: var(--s-lg) 0; }
.inst-highlights { margin: var(--s-xl) 0; }
.highlight-grid { list-style: none; padding: 0; margin: var(--s-md) 0 0; display: grid; gap: var(--s-md); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.highlight { background: var(--primary-wash); border: 1px solid var(--primary-subdued); border-radius: var(--r-lg); padding: var(--s-lg); text-align: center; transition: border-color .15s, transform .15s, box-shadow .15s; }
.highlight:hover { border-color: var(--primary-soft); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.highlight a { color: var(--ink); display: block; }
.highlight a:hover { text-decoration: none; }
.hl-value { display: block; font-size: 1.5rem; font-weight: 300; color: var(--primary-deep); letter-spacing: -.02em; font-feature-settings: "tnum"; }
.hl-label { display: block; font-size: .88rem; color: var(--ink-mute); margin-top: 2px; }
.inst-lead { margin: var(--s-xl) 0; }

.claim-box { margin: var(--s-xl) 0 0; background: linear-gradient(180deg, var(--primary-wash), var(--canvas-soft)); border: 1px dashed var(--primary-subdued); border-radius: var(--r-lg); padding: var(--s-xl); }
.claim-box p { margin: 0 0 var(--s-md); }
.claim-box--owner { border-style: solid; border-color: var(--green-lt); background: var(--green-lt); }
.claim-box--owner p { margin: 0; }

/* "Istaknuto" sponsored strip atop category / city pages */
.featured-strip { margin: var(--s-md) 0 var(--s-xl); padding: var(--s-lg); border: 1px solid var(--primary-subdued); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--primary-wash), var(--canvas)); }
.featured-label { display: inline-block; margin: 0 0 10px; background: var(--primary); color: #fff; padding: 3px 10px; border-radius: var(--r-pill); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.featured-label .featured-sub { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .85; }
.featured-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-md); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.featured-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s-lg); box-shadow: var(--shadow-1); transition: transform .15s, box-shadow .15s; }
.featured-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.featured-card a { color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.featured-card a:hover { text-decoration: none; }
.featured-logo { max-width: 130px; max-height: 44px; object-fit: contain; }
.featured-name { font-weight: 500; }
.featured-tagline { font-size: .88rem; color: var(--ink-mute); }

/* internal cross-links on institution pages */
.related-links { list-style: none; padding: 0; margin: var(--s-md) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.related-links li a {
  display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--hairline);
  border-radius: var(--r-pill); font-size: .9rem; color: var(--ink-secondary); background: var(--canvas);
  transition: border-color .15s, color .15s;
}
.related-links li a:hover { border-color: var(--primary-subdued); background: var(--primary-wash); color: var(--primary-deep); text-decoration: none; }
.other-inst { margin-top: var(--s-xxl); }
.other-inst h2 { font-size: 1.3rem; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 980px) {
  .inst-layout { grid-template-columns: 1fr; }
  .inst-side { position: static; top: auto; }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-xl); }
}
@media (max-width: 720px) {
  .nav-inner { flex-wrap: wrap; gap: .75rem 1rem; }
  .nav-primary ul { margin-left: 0; gap: .9rem; font-size: .92rem; }
  .lead-form--wide { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-form { padding: var(--s-md); }
  #map { height: 380px; }
  .inst-hero-grid { gap: var(--s-lg); }
  .inst-hero-actions { width: 100%; max-width: none; }
  .inst-logo { width: 64px; height: 64px; }
  .quickstats { grid-template-columns: 1fr 1fr; }
  .quickstats li { border-left: 0; border-top: 1px solid var(--hairline); }
  .quickstats li:first-child, .quickstats li:nth-child(2) { border-top: 0; }
  .quickstats li:nth-child(odd) { border-left: 0; }
  .quickstats li:nth-child(even) { border-left: 1px solid var(--hairline); }
}