/* ============================================================
   Barlow (headings, Bold) and Roboto (body + CTA) — self-hosted
   (latin + latin-ext, weights actually used by this site only), same
   reasoning as the DM Sans / Source Sans 3 setup this replaces: avoids a
   render-blocking fonts.googleapis.com stylesheet request. Barlow files
   subset from the brand's bundled Barlow-Bold.ttf; Roboto files pulled
   from Google Fonts' own CDN (fonts.gstatic.com) — both served from
   /fonts/ instead. Per the Toppaketi brand reference: headlines use
   Barlow Bold, body copy and CTAs use Roboto — see
   --font-display/--font-body below and .btn-cta's font-family.
   ============================================================ */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-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: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-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: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto-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: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto-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;
}

/* ============================================================
   Toppaketi — brand tokens (per Celovita grafična podoba - toppaketi.docx).
   ============================================================ */
:root {
  --color-primary: #1D88E5;
  --color-primary-dark: #005EBA;
  --color-secondary-green: #4CAF51;
  --color-secondary-light: #9CD1FF;
  --color-cta: #FF6B00;
  --color-cta-dark: #D95C00;
  --color-black: #000000;
  --color-text: #2B2B2B;
  --color-muted: #7E8B97;
  --color-bg: #ffffff;
  --color-bg-soft: #F5F6F8;
  --color-pale-blue: #F2F8FE;
  --color-border: #E1E6EA;

  --font-display: 'Barlow', system-ui, sans-serif;
  --font-body: 'Roboto', 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;
}
/* Visible only to assistive tech -- standard visually-hidden pattern.
   Used on /obrazec/ for the h1/lead that back the Typeform embed: Typeform
   covers the full viewport once it loads, so those exist for SEO/no-JS
   visitors and screen readers only, not sighted ones. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* 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);
  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; }

/* /obrazec/ is literally fullscreen (obrazec.php sets $bareLayout ->
   body.bare-layout): the page itself can't scroll, the Typeform embed fills
   the dynamic viewport (100dvh follows the mobile URL bar), and the
   disclaimer floats over it. Header, footer and h1 stay in the HTML for
   crawlers and screen readers but take no visual space. */
html:has(body.bare-layout),
body.bare-layout {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body.bare-layout .site-header,
body.bare-layout .site-footer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.bare-layout main { flex: 0 0 auto; }
.form-fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* transform makes this the containing block even for position:fixed
   children, so Typeform's "full page" iframe can't escape over the window. */
.form-fullscreen .tf-embed {
  flex: 1;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  width: 100%;
}
.form-fullscreen .tf-embed iframe {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Small static trust disclaimer floating over the /obrazec/ form --
   deliberately not a marquee like .operators-strip on the homepage. Its
   z-index is below CookieYes' (~9999999) so the consent banner stays on top. */
.form-disclaimer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000000;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(12,12,12,.12);
}
.form-disclaimer:empty { display: none; }
.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 10px 24px;
}
.trust-bar-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--color-primary); }
.trust-bar-text { flex: 1 1 220px; max-width: 480px; margin: 0; color: var(--color-muted); font-size: .9rem; line-height: 1.35; }
.trust-bar-logos { display: flex; align-items: center; flex: 0 0 auto; gap: 20px; }
.trust-bar-logos img { height: 34px; width: auto; max-width: 100px; object-fit: contain; opacity: .85; }
/* Telemach's source file is cropped tight to the wordmark with almost no
   padding, unlike the others' logos -- at the same CSS height it reads as
   noticeably bigger/bolder than the rest, so it's scaled down a bit to
   match their perceived size. Selectors are doubled up with the parent
   class (.trust-bar-logos .trust-bar-logo-x, not just .trust-bar-logo-x)
   so they outrank .trust-bar-logos img above on specificity -- a bare
   single class has *lower* specificity than a class+element selector, so
   without this these rules were silently losing the cascade and never
   actually applying. */
.trust-bar-logos .trust-bar-logo-telemach { height: 18px; }
@media (max-width: 640px) {
  .trust-bar-inner { padding: 8px 16px; gap: 6px 10px; }
  .trust-bar-icon { width: 16px; height: 16px; }
  .trust-bar-text { font-size: .78rem; }
  .trust-bar-logos { flex-basis: 100%; justify-content: center; gap: 16px; }
  .trust-bar-logos img { height: 27px; }
  /* Per-logo tweaks: none of these four source files share the same
     internal padding, so the same CSS height doesn't read as the same
     visual size for all of them -- T-2 and Telemach's marks nearly fill
     their own image bounds, while A1 and Telekom Slovenije's have more
     built-in whitespace, so they need a bump to look equally sized next
     to the other two on the tighter mobile layout. */
  .trust-bar-logos .trust-bar-logo-telemach { height: 12px; }
  .trust-bar-logos .trust-bar-logo-t2 { height: 22px; }
  .trust-bar-logos .trust-bar-logo-a1 { height: 24px; }
  .trust-bar-logos .trust-bar-logo-telekom { height: 25px; }
}

.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; }

.operators-strip { padding: 64px 0; background: var(--color-bg-soft); }
.operators-strip .wrap { padding-left: 24px; padding-right: 24px; }
.operators-label { text-align: center; color: var(--color-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 32px; }
.operators-marquee {
  overflow: hidden;
  /* Narrower than one full lap of the track (see .operators-track's gap/
     image sizing below, ~690px per lap with today's 4 logos) so a logo
     is always fully gone on one side before its duplicate enters on the
     other -- the same logo is never on screen twice at once. Widen this
     only alongside more logos, keeping it under one lap's width. */
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
  /* Fade the logos out at each edge instead of a hard clip. */
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.operators-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: operators-scroll 22s linear infinite;
}
.operators-marquee:hover .operators-track { animation-play-state: paused; }
.operators-track img { height: 56px; width: auto; max-width: 190px; object-fit: contain; flex: 0 0 auto; }
@keyframes operators-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .operators-track { animation: none; }
}

.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: 56px 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(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; }
}