/* ============================================================
   IBM Plex Sans (headings) and Montserrat (body + CTA) — self-hosted
   (latin + latin-ext, weights actually used by this site only), same
   reasoning as the Lato setup this replaces: avoids a render-blocking
   fonts.googleapis.com stylesheet request. Files pulled from Google
   Fonts' own CDN (fonts.gstatic.com) and served from /fonts/ instead.
   Per CGP - topkrediti.docx: headings use IBM Plex Sans, body copy and
   CTAs use Montserrat — see --font-display/--font-body below.
   ============================================================ */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Topkrediti — brand tokens (per CGP - topkrediti.docx).
   Primary: light blue #02C2E9. Secondary: white #FFFFFF, dark blue
   #245869. CTA: orange #FF6A00. Support: gray #ECEAE9, black #000000.
   The pillar-icon-green/-pink accent hues below aren't in the CGP —
   they're a decorative icon-variety palette (as in the Topvozila base),
   not literal brand colors, so they're left as-is.
   ============================================================ */
:root {
  --color-primary: #02C2E9;
  --color-primary-dark: #245869;
  --color-secondary-green: #14B8A6;
  --color-secondary-light: #E3F9FC;
  --color-cta: #FF6A00;
  --color-cta-dark: #CC5500;
  --color-black: #000000;
  --color-text: #1A1A1A;
  --color-muted: #6E6B67;
  --color-bg: #ffffff;
  --color-bg-soft: #ECEAE9;
  --color-pale-blue: #E3F9FC;
  --color-border: #DEDBD9;

  --font-display: 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;

  --max-width: 1180px;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: url('/images/pattern-grid.svg');
  background-repeat: repeat;
  background-size: 200px 200px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Sticky footer: main grows to fill any leftover space on short pages, so
   the footer always sits at the bottom of the viewport instead of floating
   up under a short page's content. */
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color .15s ease; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--color-black);
}
:focus-visible { outline: 3px solid var(--color-secondary-light); outline-offset: 2px; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  z-index: 100;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a:not(.btn-cta) {
  color: var(--color-text);
  font-weight: 500;
  font-size: .95rem;
}
.main-nav a:not(.btn-cta):hover { color: var(--color-primary); }
.main-nav a.active,
.nav-dropdown-toggle.active,
.nav-dropdown-menu a.active {
  color: var(--color-cta);
  font-weight: 700;
}

.nav-dropdown {
  position: relative;
  /* Invisible hover bridge: without this, the gap between the toggle and
     the menu below it (see .nav-dropdown-menu's top offset) falls outside
     both elements' boxes, so moving the mouse from the toggle down to the
     menu passes through a dead zone and drops :hover before the menu is
     reached. Padding extends this element's hoverable box to cover that
     gap; the matching negative margin cancels the extra space it would
     otherwise add to the flex row, so layout/height is unaffected. */
  padding-bottom: 16px;
  margin-bottom: -16px;
}
.nav-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  font-weight: 500;
  font-size: .95rem;
  font-family: var(--font-body);
  padding: 0;
}
.nav-dropdown-toggle:hover { color: var(--color-primary); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 24px rgba(12,12,12,.08);
  padding: 8px;
  min-width: 220px;
  flex-direction: column;
  z-index: 110;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-menu a { padding: 8px 12px; border-radius: 6px; }
.nav-dropdown-menu a:hover { background: var(--color-bg-soft); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-black); margin: 5px 0; }

.btn-cta {
  background: var(--color-cta);
  color: #fff !important;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-family: var(--font-body); /* CTA copy uses Montserrat per CGP - topkrediti.docx, same as body text */
  letter-spacing: .2px;
  display: inline-block;
  border: none;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.btn-cta:hover { background: var(--color-cta-dark); transform: translateY(-1px); }
.btn-large { font-size: 1.05rem; padding: 16px 32px; }

/* ============================================================
   Hero — full-bleed background image. Topvozila used a car-salon photo
   here; topkrediti has no equivalent finance-themed photography yet (see
   /images/about/ for what was supplied), so hero-desktop.webp/hero-mobile
   .webp are a generated abstract brand-gradient graphic instead of a
   stock photo — swap either file for a real photo later, no markup or
   CSS changes needed since the img just gets replaced in place.
   ============================================================ */
.hero-full {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 73px);
  padding: 110px 24px 90px;
  background-image:
    /* Flat low-opacity black mask over the whole photo (it's a bright
       photo, so white hero text needs contrast everywhere, not just
       where the directional gradient below is darkest), plus the
       directional gradient for extra emphasis directly behind the copy. */
    linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)),
    linear-gradient(90deg, rgba(12,12,12,.55) 0%, rgba(12,12,12,.25) 45%, rgba(12,12,12,.05) 75%),
    url('/images/hero-desktop.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero-inner { width: 100%; }
.hero-copy { max-width: 620px; text-align: left; }
.hero-copy h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 0 0 18px;
}
.hero-copy .lead { color: rgba(255,255,255,.88); max-width: 560px; }
.lead { color: var(--color-muted); max-width: 600px; margin: 0 auto 28px; font-size: 1.1rem; }

/* ============================================================
   Blog listing
   ============================================================ */
.blog-listing { padding: 70px 24px 100px; }
.blog-listing h1 { font-size: 2.2rem; }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; margin-top: 40px; }
.article-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 0 24px;
  color: var(--color-text);
  background: #fff;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.article-card:hover {
  box-shadow: 0 12px 28px -8px rgba(29,136,229,.18);
  transform: translateY(-3px);
  border-color: var(--color-secondary-light);
}
.article-card-img { width: 100%; height: 170px; object-fit: cover; }
.article-card .badge { margin: 18px 24px 0; }
.article-card h2 { font-size: 1.15rem; margin: 14px 24px 8px; }
.article-card p { color: var(--color-muted); font-size: .95rem; margin: 0 24px 14px; }
.article-card time { color: var(--color-muted); font-size: .82rem; margin: 0 24px; }

.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.badge-prispevki { background: var(--color-secondary-light); color: var(--color-primary-dark); }

/* ============================================================
   Single article
   ============================================================ */
.article-single { padding: 70px 24px 100px; max-width: 740px; }
.article-featured-img { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radius); margin-bottom: 24px; }
.article-single h1 { margin: 14px 0 8px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.article-single time { color: var(--color-muted); font-size: .9rem; }
.article-content { margin-top: 28px; font-size: 1.05rem; }
.article-content p { margin-bottom: 1.1em; }
.article-content h2 { margin-top: 1.6em; font-size: 1.4rem; }
.article-content a:not(.btn-cta) { text-decoration: underline; }
.article-cta {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  margin-top: 48px;
}
.article-cta p { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 16px; }

/* ============================================================
   Generic page content
   ============================================================ */
.page-content { padding: 70px 24px 100px; max-width: 740px; }
.page-content h1 { font-size: 2rem; margin-bottom: 24px; }
.legal h1 { margin-bottom: 16px; }
.page-content.contact { max-width: var(--max-width); }
.page-content.contact .about-row { margin-bottom: 56px; align-items: flex-start; }
.page-content.contact .about-row .about-text { max-width: 560px; }

/* Typeform's embed script turns this div into an iframe sized to 100% of
   the div's own box — without an explicit width/height here, that box has
   no height at all (an empty <div> collapses to 0), so the iframe falls
   back to Typeform's small default size instead of filling the page.

   The form itself uses Typeform's "Full page" embed mode (their Design >
   Embed mode setting), which expects to fill all available width AND
   reach the bottom of the viewport, not stop at some fraction of it. Break
   the embed out to full viewport width with the standard "full bleed"
   trick (100vw + negative margin to re-center against the viewport
   instead of the parent's padded, max-width box), and use flex-grow
   (rather than a fixed vh height) so it fills exactly whatever vertical
   space is left after the heading above it, regardless of how tall the
   header/heading happen to be — a fixed vh percentage of the *whole*
   viewport left a visible gap once that header/heading height and
   .page-content's own bottom padding were subtracted out. The sticky
   .site-header above the section is a separate, preceding element in
   normal document flow and is unaffected either way.

   min-height is 100vh minus the (measured) header height, not a flat
   100vh — .form-page itself starts *after* the header in normal flow, so
   a flat 100vh here would push its bottom edge that same ~80px past the
   actual viewport bottom every time. */
.form-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 82px);
  padding-bottom: 24px;
}
.form-page .tf-embed {
  flex: 1 1 auto;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 500px;
}

.thank-you, .not-found { text-align: center; }
.thank-you .btn-cta, .not-found .btn-cta { margin-top: 20px; }

/* ============================================================
   Insurance-type picker (/obrazec/)
   ============================================================ */
.insurance-picker-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.insurance-picker-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.insurance-picker-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(12,12,12,.06);
  transform: translateY(-2px);
}
.insurance-picker-card .pillar-icon { background: none; width: auto; height: auto; flex: 0 0 auto; margin: 0; }
.insurance-picker-card .pillar-icon svg { width: 32px; height: 32px; }
.insurance-picker-label { flex: 1; }
.insurance-picker-arrow { color: var(--color-primary); font-size: 1.2rem; flex: 0 0 auto; }

/* ============================================================
   Review submission form (/mnenje/)
   ============================================================ */
.review-page.page-content { max-width: 600px; }
.review-form { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.review-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-display);
}
.field-optional { font-weight: 400; color: var(--color-muted); font-family: var(--font-body); }
.field-row { display: flex; gap: 20px; flex-wrap: wrap; }
.field-row label { flex: 1 1 220px; }
.review-form input[type="text"],
.review-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
}
.review-form input[type="text"]:focus,
.review-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}
.review-form textarea { resize: vertical; min-height: 120px; }
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: .9rem; font-weight: 700; color: var(--color-text); font-family: var(--font-display); }

.star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-rating label {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-border);
  cursor: pointer;
  transition: color .15s ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: var(--color-cta);
}
.star-rating input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.hp-field { position: absolute; left: -9999px; top: -9999px; }

.review-consent-field {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  font-family: var(--font-body) !important;
  color: var(--color-muted);
  cursor: pointer;
}
.review-consent-field input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--color-primary); cursor: pointer; }
.review-consent-field a { color: var(--color-primary); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--color-black); color: #fff; margin-top: 60px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding: 56px 24px 32px; }
.footer-col p { color: #9aa5b1; font-size: .92rem; margin-top: 14px; }
.footer-col h3 { color: #fff; font-family: var(--font-display); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.footer-col a, .footer-col .link-btn {
  display: block;
  color: #c2cad2;
  margin-bottom: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: .95rem;
  text-align: left;
  font-family: var(--font-body);
}
.footer-col a:hover, .footer-col .link-btn:hover { color: var(--color-secondary-light); }
.footer-bottom { padding: 18px 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: #76808a; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    gap: 16px;
  }
  .main-nav.is-open { display: flex; }
  .nav-toggle { display: block; }
  .footer-inner { grid-template-columns: 1fr; }

  .nav-dropdown-menu {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0 12px;
    min-width: 0;
  }
  .nav-dropdown.is-open .nav-dropdown-menu { display: flex; }
}

/* ============================================================
   Homepage sections
   ============================================================ */
.section-title { text-align: center; font-size: 1.8rem; margin-bottom: 40px; }

.pillars { padding: 80px 24px; }
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.pillar-card {
  display: block;
  background: var(--color-pale-blue);
  border-radius: var(--radius);
  padding: 28px;
  transition: box-shadow .15s ease, transform .1s ease;
}
a.pillar-card:hover { box-shadow: 0 8px 20px rgba(12,12,12,.06); transform: translateY(-2px); }
.pillar-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--color-primary-dark); }
.pillar-card p { color: var(--color-muted); font-size: .95rem; margin: 0; }
.insurance-types { padding: 0 0 80px; }
.insurance-types .pillar-icon { background: none; width: auto; height: auto; margin-bottom: 12px; }
.insurance-types .pillar-icon svg { width: 40px; height: 40px; }
.section-hint { text-align: center; color: var(--color-muted); font-size: .9rem; margin: -24px 0 32px; }

.flip-card { perspective: 1200px; height: 175px; transition: height .35s ease; }
.flip-card.is-flipped { height: 230px; }
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform .5s ease;
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}
/* Hover-driven flip only for devices with real hover — on touch devices,
   mobile browsers keep :hover "stuck" after a tap until something else is
   tapped, which would make the tap-to-close JS below appear broken (the
   card immediately re-flips via :hover even after .is-flipped is removed).
   Touch devices rely solely on the JS-driven .is-flipped toggle instead. */
@media (hover: hover) {
  .flip-card:hover { height: 230px; }
  .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
}
.flip-card-front, .flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-soft);
  padding: 28px;
}
.flip-card-front { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.flip-card-front h3 { font-size: 1.1rem; margin: 0; color: var(--color-primary-dark); }
.flip-card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flip-card-back p { color: var(--color-muted); font-size: .95rem; margin: 0 0 12px; }
.flip-card-back a { font-weight: 700; font-family: var(--font-display); }

.how-it-works { padding: 60px 24px; text-align: center; }
.steps-list { list-style: none; counter-reset: step; padding: 0; max-width: 640px; margin: 0 auto 28px; display: flex; flex-direction: column; gap: 14px; }
.steps-list li { counter-increment: step; position: relative; padding: 14px 20px 14px 56px; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; text-align: left; font-weight: 500; }
.steps-list li::before {
  content: counter(step);
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}

.testimonials { padding: 80px 24px; }
.testimonial-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; }
.testimonial-card .stars { color: var(--color-cta); letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-card p { font-size: .95rem; color: var(--color-text); }
.testimonial-author { font-weight: 700; font-family: var(--font-display); margin-top: 12px !important; color: var(--color-primary-dark) !important; }
.testimonial-author span { color: var(--color-muted); font-weight: 400; font-family: var(--font-body); }

/* Reviews carousel: always exactly 3 cards visible, scroll/arrows for more */
.testimonial-carousel { display: flex; align-items: center; gap: 12px; }
.testimonial-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.testimonial-track::-webkit-scrollbar { height: 6px; }
.testimonial-track::-webkit-scrollbar-track { background: transparent; }
.testimonial-track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.testimonial-track .testimonial-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.testimonial-nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-primary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.testimonial-nav:hover { background: var(--color-secondary-light); }
.testimonial-nav:disabled { opacity: .35; cursor: default; background: #fff; }
@media (max-width: 900px) {
  .testimonial-track .testimonial-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .testimonial-track .testimonial-card { flex: 0 0 85%; }
}

.home-blog-teaser { padding: 60px 24px 80px; }
.center-link { text-align: center; margin-top: 32px; }

.final-cta { text-align: center; padding: 70px 24px 90px; background: var(--color-bg-soft); }
.final-cta h2 { font-size: 1.7rem; margin-bottom: 22px; }

/* ============================================================
   About / contact pages
   ============================================================ */
.about-list, .legal ul { padding-left: 22px; }
.about-list li { margin-bottom: 14px; }
.inline-cta { margin: 32px 0; }
.contact-card { background: var(--color-bg-soft); border-radius: var(--radius); padding: 24px; margin-bottom: 8px; }
.contact-card p { margin: 6px 0; }

.about-section { padding: 88px 0; }
.about-section + .about-section { border-top: 1px solid var(--color-border); }
.about-section.no-divider + .about-section.no-divider { border-top: none; }
.about-section h1 { font-size: 2rem; margin-bottom: 18px; }
.about-section h2 { font-size: 1.6rem; margin-bottom: 18px; }
.about-pillars-section { background: var(--color-bg-soft); }
.about-row {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}
.about-row.reverse { flex-direction: row-reverse; }
.about-row .about-text { flex: 1 1 380px; }
.about-row .about-visual { flex: 1 1 220px; display: flex; justify-content: center; }
.about-row .about-visual svg { width: 100%; max-width: 230px; height: auto; }
.about-row .about-visual img { width: 100%; max-width: 420px; height: auto; border-radius: var(--radius); }
.about-faq { max-width: 740px; }

.example-box {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-pale-blue);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
}
.example-box p { text-align: left; }
.example-box .inline-cta { text-align: center; }

.sister-brands { margin-top: 28px; }
.sister-brands-label {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  margin: 0 0 10px;
}
.sister-brands-list { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sister-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 8px 18px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sister-brand img { height: 30px; width: auto; max-width: 130px; }
.sister-brand:hover { border-color: var(--color-primary); box-shadow: 0 2px 10px rgba(29,136,229,.12); }

@media (max-width: 760px) {
  .about-row, .about-row.reverse { flex-direction: column; text-align: left; }
  /* Section 1's visual sits above the H1 and pushes the whole page down on
     mobile, so hide it there. Section 2 ("Kako deluje ...") isn't above any
     heading, so its image stays visible — and sits above that section's own
     heading, matching how section 1's visual used to sit above its H1. */
  .about-row:not(.reverse) .about-visual { display: none; }
  .about-row.reverse .about-visual { order: -1; margin-bottom: 20px; }
  /* Desktop's 88px top/bottom padding on every section stacks into a huge
     gap between sections on mobile's single-column layout (e.g. section 1's
     last paragraph to section 2's image, or the CTA button at the end of
     section 2 to the "Primer iz prakse" heading) — tighten it up. */
  .about-section { padding: 28px 0; }
  .inline-cta { margin: 20px 0; }
}

.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.faq-list details { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 16px 20px; }
.faq-list summary { font-weight: 700; font-family: var(--font-display); cursor: pointer; }
.faq-list p { margin: 12px 0 0; color: var(--color-muted); }

/* ============================================================
   Legal pages
   ============================================================ */
.legal h2 { font-size: 1.25rem; margin-top: 1.6em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.3em; }
.legal-subtitle { color: var(--color-muted); font-style: italic; margin-bottom: 1.5em; }
.legal p, .legal li { font-size: .95rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .95rem; }
.legal table td { padding: 10px 14px; border: 1px solid var(--color-border); vertical-align: top; }
.legal table td:first-child { width: 34%; background: var(--color-bg-soft); }

@media (max-width: 600px) {
  .section-title { font-size: 1.4rem; }
}

/* ============================================================
   Homepage richness pass — icons, illustration, avatars, rhythm
   ============================================================ */
.wrap-full { width: 100%; }

.pillar-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.pillar-icon svg { width: 24px; height: 24px; }
.pillar-icon-blue { background: var(--color-secondary-light); color: var(--color-primary); }
.pillar-icon-green { background: #E1F5EC; color: var(--color-secondary-green); }
.pillar-icon-orange { background: #FDF0DD; color: var(--color-cta); }
.pillar-icon-pink { background: #FCE4E9; color: #E0607D; }

.how-it-works { padding: 80px 0; }
.center-text { text-align: center; }
.timeline-horizontal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1000px;
  margin: 0 auto 36px;
}
.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 190px;
}
.timeline-dot {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; color: var(--color-primary);
  border: 2px solid var(--color-secondary-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease, box-shadow .4s ease;
  transform: scale(0.92);
  margin-bottom: 16px;
}
.timeline-step p { margin: 0; font-weight: 500; color: var(--color-text); transition: color .4s ease; font-size: .95rem; }
.timeline-step.is-active .timeline-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: scale(1);
  box-shadow: 0 6px 18px -4px rgba(29,136,229,.45);
}
.timeline-step.is-active p { color: var(--color-text); }

.timeline-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 64px; flex-shrink: 0;
  color: var(--color-secondary-light);
  transition: color .4s ease;
}
.timeline-arrow svg { width: 26px; height: 26px; }
.timeline-arrow.is-active { color: var(--color-primary); }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--font-display);
  transition: background .15s ease, color .15s ease;
}
.btn-secondary:hover { background: var(--color-primary); color: #fff !important; }

@media (max-width: 860px) {
  .timeline-horizontal { flex-direction: column; align-items: center; }
  .timeline-arrow { transform: rotate(90deg); height: 36px; }
  .timeline-step { width: 100%; max-width: 320px; }
}

.testimonial-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.05rem;
  flex-shrink: 0;
}
.avatar-blue { background: var(--color-primary); }
.avatar-green { background: var(--color-secondary-green); }
.avatar-orange { background: var(--color-cta); }
.testimonial-author { font-weight: 700; font-family: var(--font-display); margin: 0 !important; color: var(--color-text) !important; }
.testimonial-location { color: var(--color-muted); font-size: .85rem; margin: 0 !important; }

.home-blog-teaser { background: var(--color-bg-soft); padding: 80px 0; }

@media (max-width: 860px) {
  .hero-full {
    min-height: 80svh;
    background-image:
      linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)),
      linear-gradient(180deg, rgba(12,12,12,.35) 0%, rgba(12,12,12,.55) 100%),
      url('/images/hero-mobile.webp');
  }
  .hero-copy { max-width: none; text-align: center; margin: 0 auto; }
}