/* ============================================================
   DM Sans (headings + CTA) and Source Sans 3 (body) — 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 - Topnaložbe.docx: headings use DM Sans Bold, CTAs use DM Sans
   SemiBold, body copy uses Source Sans 3 — see --font-display/--font-body
   below and .btn-cta's font-weight for the SemiBold CTA treatment.
   ============================================================ */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/dm-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: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/dm-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: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/dm-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: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/dm-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-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;
}

/* ============================================================
   Topnaložbe — brand tokens (per CGP - Topnaložbe.docx).
   ============================================================ */
:root {
  --color-primary: #1F3B73;
  --color-primary-dark: #16294F;
  --color-secondary-green: #3CB878;
  --color-secondary-light: #E3F2FD;
  --color-cta: #F9A11B;
  --color-cta-dark: #D98708;
  --color-black: #2B2B2B;
  --color-text: #2B2B2B;
  --color-muted: #7E8B97;
  --color-bg: #ffffff;
  --color-bg-soft: #F5F6F8;
  --color-pale-blue: #F2F8FE;
  --color-border: #E1E6EA;

  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 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-display);
  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 photo
   ============================================================ */
.hero-full {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 73px);
  padding: 110px 24px 90px;
  background-image:
    linear-gradient(90deg, rgba(12,12,12,.75) 0%, rgba(12,12,12,.5) 40%, rgba(12,12,12,.15) 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; }
/* .section-title (used for the centered headings above flip-card/split-column
   groups on content subpages) has lower specificity than the plain rule
   above, so nesting it inside .about-section silently shrank its font-size
   and — more importantly — its 40px margin-bottom down to 18px, which is
   what made those sections read as cramped compared to the homepage's own
   .section-title sections (which aren't wrapped in .about-section). This
   restores the homepage spacing/size whenever .section-title appears here. */
.about-section h2.section-title { font-size: 1.8rem; margin-bottom: 40px; text-align: center; }
@media (max-width: 600px) {
  .about-section h2.section-title { font-size: 1.4rem; }
}
.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; }
.example-box-green { background: #E6F7EC; }

.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(31,59,115,.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; }
}

.prose { max-width: 740px; }
.prose + .prose { margin-top: 1.2em; }

.split-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.split-heading { font-size: 1.15rem; margin-bottom: 16px; }
.split-heading-green { color: var(--color-secondary-green); }
.split-heading-orange { color: var(--color-cta); }

.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(180deg, rgba(12,12,12,.55) 0%, rgba(12,12,12,.75) 100%),
      url('/images/hero-mobile.webp');
  }
  .hero-copy { max-width: none; text-align: center; margin: 0 auto; }
}

/* ============================================================
   Fullscreen form page (/obrazec-1/) — body.bare-layout
   No header/footer/scrolling: a column of exactly the visible
   viewport (dvh follows the mobile URL bar). Optional disclaimer
   on top, the Typeform takes whatever height is left. CookieYes
   banner stays on top via its own z-index. To undo, revert the
   commit that added this block.
   ============================================================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html:has(body.bare-layout), body.bare-layout {
  height: 100vh; height: 100dvh; overflow: hidden;
}
body.bare-layout main { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
/* Header/footer stay in the HTML (crawlers, screen readers, ad-policy
   checks) but take no space and are invisible: same technique as
   .visually-hidden, so they can never add page height or scrolling. */
body.bare-layout .site-header,
body.bare-layout .site-footer {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The form is pinned to the whole visible screen, independent of the
   document flow, so the page itself has nothing to scroll. */
body.bare-layout .form-fullscreen {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  width: 100%; max-width: none; margin: 0; padding: 0;
}
body.bare-layout .form-disclaimer:empty { display: none; }
/* Overlay, not a section: pinned to the top edge in the highest layer of
   the page, over the full-screen form. Stays below CookieYes's banner
   (z-index ~9999999) so the two never fight over order. */
body.bare-layout .form-disclaimer {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000000;
  padding: 8px 16px; font-size: .85rem; line-height: 1.35; text-align: center;
  background: rgba(255, 255, 255, .96); box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}
body.bare-layout .form-fullscreen .tf-embed {
  flex: 1 1 auto; min-height: 0; width: 100%; margin: 0;
  position: relative; overflow: hidden;
  /* Typeform's script can make its iframe position:fixed over the whole
     window (which hid the disclaimer). A transform makes this box the
     containing block for fixed descendants, and the rule below pins the
     iframe inside it either way. */
  transform: translateZ(0);
}
body.bare-layout .form-fullscreen .tf-embed iframe {
  position: absolute !important; top: 0; left: 0;
  width: 100% !important; height: 100% !important;
  border: 0;
}