*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #fff;
      color: #111111;
      font-size: 16px;
      line-height: 1.7;
    }

    /* ─── NAV ─────────────────────────────────────────── */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: #fff;
      border-bottom: 1px solid #E6E6E8;
      transition: box-shadow 0.2s;
    }
    .nav.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.07); }
    .nav-inner {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 0;
      text-decoration: none;
      flex-shrink: 0;
    }
    .nav-logo img { height: 46px; width: auto; object-fit: contain; display: block; }
    .nav-logo-text { font-size: 18px; font-weight: 800; line-height: 1; }
    .nav-logo-text .t1 { color: #E9142E; }
    .nav-logo-text .t2 { color: #111111; }
    .nav-links {
      display: flex;
      gap: 36px;
      list-style: none;
    }
    .nav-links a {
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      color: #555558;
      transition: color 0.2s;
    }
    .nav-links a:hover { color: #111111; }
    .nav-cta {
      display: inline-block;
      background: #E9142E;
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      padding: 10px 22px;
      border-radius: 6px;
      transition: background 0.2s;
    }
    .nav-cta:hover { background: #C20F24; }
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: #111111;
      border-radius: 2px;
    }
    .mobile-menu {
      display: none;
      position: fixed;
      top: 68px; left: 0; right: 0;
      background: #fff;
      border-bottom: 1px solid #E6E6E8;
      z-index: 99;
      padding: 16px 24px 24px;
      flex-direction: column;
      gap: 4px;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      color: #111111;
      padding: 10px 0;
      border-bottom: 1px solid #F0F0F2;
    }
    .mobile-menu a:last-child {
      border-bottom: none;
      margin-top: 8px;
      background: #E9142E;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 12px;
      font-weight: 700;
    }

    /* ─── HERO ────────────────────────────────────────── */
    .hero {
      min-height: 90vh;
      background-image: url('slike/hero-1916.jpg');
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: center;
      padding-top: 68px;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.38);
    }
    .hero-content {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1160px;
      margin: 0 auto;
      padding: 80px 24px;
    }
    .hero-content-inner {
      max-width: 680px;
    }
    .hero h1 {
      font-size: 64px;
      font-weight: 900;
      line-height: 1.0;
      color: #fff;
      letter-spacing: -1.5px;
      margin-bottom: 20px;
    }
    .hero p {
      font-size: 18px;
      font-weight: 400;
      color: rgba(255,255,255,0.72);
      line-height: 1.6;
      margin-bottom: 32px;
      max-width: 480px;
    }
    .hero-btn {
      display: inline-block;
      background: #E9142E;
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 6px;
      transition: background 0.2s;
      margin-bottom: 36px;
    }
    .hero-btn:hover { background: #C20F24; }
    .hero-stats {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0;
    }
    .hero-stat {
      color: rgba(255,255,255,0.82);
      font-size: 14px;
      font-weight: 500;
      padding-right: 20px;
      margin-right: 20px;
      border-right: 1px solid rgba(255,255,255,0.3);
    }
    .hero-stat:last-child { border-right: none; padding-right: 0; margin-right: 0; }
    .hero-stat strong { color: #fff; font-weight: 700; }

    /* ─── SHARED SECTION ─────────────────────────────── */
    .section { padding: 96px 24px; }
    .section-inner { max-width: 1160px; margin: 0 auto; }
    .section-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #E9142E;
      margin-bottom: 12px;
    }
    .section-title {
      font-size: 40px;
      font-weight: 800;
      color: #111111;
      line-height: 1.15;
      letter-spacing: -0.5px;
      margin-bottom: 48px;
    }

    /* ─── USLUGE ─────────────────────────────────────── */
    .usluge { background: #fff; }
    .tiles-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .tile {
      background: #fff;
      border: 1px solid #E6E6E8;
      border-radius: 10px;
      overflow: hidden;
      transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
    .tile:hover {
      box-shadow: 0 8px 24px rgba(0,0,0,0.09);
      transform: translateY(-2px);
    }
    .tile-photo {
      height: 220px;
      overflow: hidden;
    }
    .tile-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.4s ease;
    }
    .tile:hover .tile-photo img { transform: scale(1.04); }
    .tile-body { padding: 24px; }
    .tile-name {
      font-size: 18px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 6px;
    }
    .tile-desc { font-size: 14px; color: #5E5E62; line-height: 1.6; }

    /* ─── ZASTO ──────────────────────────────────────── */
    .zasto { background: #F6F6F7; }
    .zasto-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .zasto-left .section-title { margin-bottom: 16px; }
    .zasto-left p {
      color: #5E5E62;
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 24px;
    }
    .zasto-link {
      color: #E9142E;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
    }
    .zasto-link:hover { text-decoration: underline; }
    .args-list { display: flex; flex-direction: column; gap: 28px; }
    .arg-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #111111;
      margin-bottom: 6px;
    }
    .arg-body { font-size: 14px; color: #5E5E62; line-height: 1.65; }

    /* ─── PROCESS ────────────────────────────────────── */
    .process { background: #fff; }
    .process .section-label { text-align: center; }
    .process .section-title { text-align: center; margin-bottom: 64px; }
    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      position: relative;
    }
    .steps::before {
      content: '';
      position: absolute;
      top: 30px;
      left: 12.5%;
      right: 12.5%;
      height: 1px;
      background: rgba(17,17,17,0.14);
      z-index: 0;
    }
    .step {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 0 16px;
    }
    .step-num {
      display: block;
      font-size: 48px;
      font-weight: 900;
      color: #E9142E;
      line-height: 1;
      margin-bottom: 16px;
    }
    .step-title {
      font-size: 16px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 8px;
    }
    .step-desc { font-size: 14px; color: #5E5E62; line-height: 1.6; }

    /* ─── PAKETI ─────────────────────────────────────── */
    .paketi { background: #F6F6F7; }
    .paketi .section-title { margin-bottom: 40px; }
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: start;
    }
    .card {
      background: #fff;
      border: 1px solid #E6E6E8;
      border-radius: 12px;
      padding: 40px;
      transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
    .card:hover {
      box-shadow: 0 8px 24px rgba(0,0,0,0.09);
      transform: translateY(-2px);
    }
    .card-vip { border-top: 3px solid #E9142E; }
    .badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .badge-blue { background: #F2F2F3; color: #111111; }
    .badge-gold { background: #111111; color: #FFFFFF; }
    .card-title {
      font-size: 26px;
      font-weight: 800;
      margin-bottom: 4px;
    }
    .card-title-navy { color: #111111; }
    .card-title-gold { color: #E9142E; }
    .card-subtitle { font-size: 14px; color: #5E5E62; margin-bottom: 24px; }
    .card-divider { height: 1px; background: #E6E6E8; margin-bottom: 24px; }
    .feature-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 32px;
    }
    .feature-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 14px;
      color: #555558;
      line-height: 1.55;
    }
    .feature-list li svg { flex-shrink: 0; margin-top: 2px; }
    .btn-outline-navy {
      display: block;
      width: 100%;
      text-align: center;
      text-decoration: none;
      border: 2px solid #111111;
      color: #111111;
      font-size: 15px;
      font-weight: 700;
      padding: 13px;
      border-radius: 8px;
      transition: background 0.2s, color 0.2s;
    }
    .btn-outline-navy:hover { background: #111111; color: #fff; }
    .btn-solid-red {
      display: block;
      width: 100%;
      text-align: center;
      text-decoration: none;
      background: #E9142E;
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      padding: 13px;
      border-radius: 8px;
      transition: background 0.2s;
    }
    .btn-solid-red:hover { background: #C20F24; }

    /* ─── KONTAKT ────────────────────────────────────── */
    .kontakt { background: #111111; padding: 96px 24px; }
    .kontakt-inner {
      max-width: 1160px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .kontakt .section-label { color: rgba(255,255,255,0.60); }
    .kontakt h2 {
      font-size: 36px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.5px;
      margin-bottom: 16px;
    }
    .kontakt-body {
      color: rgba(255,255,255,0.6);
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 36px;
    }
    .contact-rows { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
    .contact-row { display: flex; align-items: flex-start; gap: 14px; }
    .contact-icon { width: 36px; height: 36px; flex-shrink: 0; color: #E9142E; margin-top: 2px; }
    .contact-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: rgba(255,255,255,0.45);
      margin-bottom: 2px;
    }
    .contact-phone {
      font-size: 22px;
      font-weight: 700;
      color: #fff;
      text-decoration: none;
    }
    .contact-phone:hover { color: #E9142E; }
    .contact-value {
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      text-decoration: none;
    }
    .contact-value:hover { color: #E9142E; }
    .kontakt-btn {
      display: inline-block;
      background: #E9142E;
      color: #fff;
      text-decoration: none;
      font-size: 15px;
      font-weight: 700;
      padding: 14px 32px;
      border-radius: 6px;
      transition: background 0.2s;
    }
    .kontakt-btn:hover { background: #C20F24; }
    .avail-card {
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 12px;
      padding: 40px 32px;
      text-align: center;
    }
    .avail-dot-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .avail-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #E9142E;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(233,20,46,0.5); }
      50%       { box-shadow: 0 0 0 8px rgba(233,20,46,0); }
    }
    .avail-status {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgba(255,255,255,0.5);
    }
    .avail-value {
      font-size: 22px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 8px;
    }
    .avail-sub { font-size: 13px; color: rgba(255,255,255,0.5); }

    /* ─── FOOTER ─────────────────────────────────────── */
    footer {
      background: #FFFFFF;
      border-top: 1px solid #E6E6E8;
      padding: 24px;
    }
    .footer-inner {
      max-width: 1160px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }
    .footer-logo img { height: 40px; width: auto; object-fit: contain; display: block; }
    .footer-logo-text { font-size: 14px; font-weight: 700; }
    .footer-logo-text .f1 { color: #E9142E; }
    .footer-logo-text .f2 { color: #111111; }
    .footer-center { font-size: 13px; color: #6E6E72; text-align: center; }
    .footer-copy { font-size: 12px; color: #9A9A9E; }

    /* ─── RESPONSIVE ─────────────────────────────────── */
    @media (max-width: 768px) {
      .hamburger { display: flex; }
      .nav-links, .nav-cta { display: none; }

      .hero h1 { font-size: 38px; letter-spacing: -0.5px; }
      .hero-content { padding: 60px 24px; }

      .section { padding: 64px 24px; }
      .section-title { font-size: 30px; }

      .tiles-grid { grid-template-columns: 1fr; }
      .zasto-grid { grid-template-columns: 1fr; gap: 40px; }
      .steps { grid-template-columns: 1fr 1fr; gap: 40px; }
      .steps::before { display: none; }
      .cards-grid { grid-template-columns: 1fr; }
      .kontakt-inner { grid-template-columns: 1fr; gap: 48px; }
      .footer-inner { flex-direction: column; text-align: center; }
    }
    @media (max-width: 480px) {
      .steps { grid-template-columns: 1fr; }
    }
  
/* ══════════════════════════════════════════════════════
   DODANO: jezici, klikabilne usluge, blog, članci, CTA
   ══════════════════════════════════════════════════════ */

/* ─── NAV: jezik i telefon ─────────────────────────── */
.nav-inner { gap: 18px; }
.nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.lang { display: flex; border: 1px solid #E4E4E6; border-radius: 6px; overflow: hidden; }
.lang button, .lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 6px 9px;
  border: none;
  background: #fff;
  color: #98989C;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lang button + button, .lang a + a { border-left: 1px solid #E4E4E6; }
.lang button:hover, .lang a:hover { color: #111111; }
.lang button.on, .lang a.on { background: #111111; color: #fff; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; }
.nav-cta svg { width: 15px; height: 15px; }

/* ─── HERO ─────────────────────────────────────────── */
.hero-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  margin-bottom: 18px;
}
.hero-overlay {
  background: linear-gradient(100deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.52) 48%, rgba(0,0,0,0.30) 100%);
}
.hero-content-inner { max-width: 880px; }
.hero h1 { margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.hero-btn { margin-bottom: 0; box-shadow: 0 8px 24px rgba(233,20,46,0.32); }
.hero-btn-ghost {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 28px;
  border-radius: 6px;
  transition: background 0.2s, border-color 0.2s;
}
.hero-btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

/* ─── USLUGE: kartice koje otvaraju prozor ─────────── */
.tile { display: flex; flex-direction: column; cursor: pointer; }
.tile-body { display: flex; flex-direction: column; flex: 1; }
.tile-photo { position: relative; }
.tile-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17,17,17,0.20), rgba(17,17,17,0));
}
.tile-tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #E9142E;
  margin-bottom: 8px;
}
.tile-desc { flex: 1; }
.tile-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 20px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  background: #F4F4F5;
  border: 1px solid #E4E4E6;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  min-height: 46px;
}
.tile:hover .tile-toggle { background: #111111; border-color: #111111; color: #fff; }
.tile-toggle .chev { width: 16px; height: 16px; color: #E9142E; transition: transform 0.2s; }
.tile:hover .tile-toggle .chev { color: #FFFFFF; transform: translateX(3px); }

/* sadržaj detalja je u kartici skriven, otvara se u prozoru */
.tile .tile-detail { display: none; }
.tile .detail-head { display: none; }

/* ─── PROZOR S DETALJIMA ───────────────────────────── */
.modal[hidden] { display: none !important; }
.kontakt-soc[hidden] { display: none !important; }
.tile-detail[hidden] { display: none !important; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(3px);
  animation: mfade 0.2s ease;
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  animation: mrise 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes mfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mrise { from { opacity: 0; transform: translateY(18px) scale(0.98) } to { opacity: 1; transform: none } }
.modal-close {
  position: sticky;
  top: 0;
  float: right;
  margin: 14px 14px 0 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F4F4F5;
  border: 1px solid #E4E4E6;
  border-radius: 50%;
  color: #111111;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover { background: #111111; color: #fff; }
.modal-close svg { width: 20px; height: 20px; }
.modal-body { padding: 44px 52px 48px; }
.modal-body .tile-detail { display: block !important; max-height: none; overflow: visible; }
.modal-body .tile-detail-inner { padding-top: 0; }
.modal-body .detail-head {
  display: block !important;
  border-bottom: 1px solid #EDEDEF;
  padding-bottom: 22px;
  margin-bottom: 26px;
}
.detail-tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #E9142E;
  margin-bottom: 10px;
}
.detail-title {
  font-size: 34px;
  font-weight: 800;
  color: #111111;
  line-height: 1.15;
  letter-spacing: -0.8px;
}
.modal-body h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #111111;
  margin: 30px 0 12px;
}
.modal-body h4:first-of-type { margin-top: 0; }
.modal-body p { font-size: 16.5px; color: #3D3D40; line-height: 1.8; margin-bottom: 6px; }
.modal-body ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.modal-body ul li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  color: #3D3D40;
  line-height: 1.6;
}
.modal-body ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E9142E;
}
.detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid #EDEDEF;
}
.detail-btn, .detail-btn-ghost {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  min-height: 48px;
  line-height: 20px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.detail-btn { background: #E9142E; color: #fff; }
.detail-btn:hover { background: #C20F24; }
.detail-btn-ghost { border: 2px solid #DCDCDE; color: #111111; }
.detail-btn-ghost:hover { background: #111111; border-color: #111111; color: #fff; }

/* ─── ZASTO ──────────────────────────────────────── */
.zasto-link { display: inline-flex; align-items: center; gap: 8px; }
.args-list > div { padding-bottom: 4px; }

/* ─── PAKETI: traka za jednokratno ─────────────────── */
.paketi-note {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #E6E6E8;
  border-left: 3px solid #E9142E;
  border-radius: 10px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.paketi-note-text { font-size: 14.5px; color: #555558; line-height: 1.65; max-width: 640px; }
.paketi-note-text strong { color: #111111; font-weight: 700; }
.paketi-note-btn {
  flex-shrink: 0;
  display: inline-block;
  background: #111111;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 6px;
  transition: background 0.2s;
}
.paketi-note-btn:hover { background: #000000; }

/* ─── BLOG ─────────────────────────────────────────── */
.blog { background: #fff; }
.blog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.blog-head .section-title { margin-bottom: 0; }
.blog-head-all {
  font-size: 14px;
  font-weight: 700;
  color: #E9142E;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 6px;
}
.blog-head-all:hover { text-decoration: underline; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E6E6E8;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.post:hover { box-shadow: 0 10px 28px rgba(17,17,17,0.10); transform: translateY(-3px); }
.post-photo { height: 170px; overflow: hidden; position: relative; background: #ECECEE; }
.post-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.post:hover .post-photo img { transform: scale(1.04); }
.post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #E9142E;
  margin-bottom: 10px;
}
.post-title {
  font-size: 18px;
  font-weight: 800;
  color: #111111;
  line-height: 1.35;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}
.post-excerpt { font-size: 14px; color: #5E5E62; line-height: 1.65; margin-bottom: 18px; flex: 1; }
.post-more { font-size: 13.5px; font-weight: 700; color: #E9142E; }

/* ─── ČLANAK ───────────────────────────────────────── */
.article-hero {
  background: #111111;
  padding: 132px 24px 64px;
}
.article-hero-inner { max-width: 800px; margin: 0 auto; }
.article-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  margin-bottom: 22px;
}
.article-back:hover { color: #fff; }
.article-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  margin-bottom: 14px;
}
.article-hero h1 {
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -1.2px;
  margin-bottom: 18px;
}
.article-lead { font-size: 17px; color: rgba(255,255,255,0.72); line-height: 1.7; }
.article-body { padding: 64px 24px 88px; background: #fff; }
.article-inner { max-width: 800px; margin: 0 auto; }
.article-inner h2 {
  font-size: 27px;
  font-weight: 800;
  color: #111111;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 44px 0 16px;
}
.article-inner h2:first-child { margin-top: 0; }
.article-inner h3 {
  font-size: 18px;
  font-weight: 800;
  color: #111111;
  margin: 30px 0 10px;
}
.article-inner p { font-size: 16.5px; color: #3D3D40; line-height: 1.8; margin-bottom: 16px; }
.article-inner ul, .article-inner ol { margin: 4px 0 20px 0; padding-left: 0; list-style: none; }
.article-inner ul li, .article-inner ol li {
  position: relative;
  padding-left: 20px;
  font-size: 16.5px;
  color: #3D3D40;
  line-height: 1.75;
  margin-bottom: 9px;
}
.article-inner ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E9142E;
}
.article-inner ol { counter-reset: art; }
.article-inner ol li { counter-increment: art; padding-left: 28px; }
.article-inner ol li::before {
  content: counter(art) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: #E9142E;
}
.article-inner strong { color: #111111; font-weight: 700; }
.pull {
  border-left: 3px solid #E9142E;
  background: #F6F6F7;
  border-radius: 0 10px 10px 0;
  padding: 22px 26px;
  margin: 28px 0;
}
.pull p { margin: 0; font-size: 16px; color: #111111; font-weight: 500; line-height: 1.7; }
.article-cta {
  margin-top: 44px;
  background: #111111;
  border-radius: 14px;
  padding: 40px;
  text-align: center;
}
.article-cta h3 { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 12px; letter-spacing: -0.4px; }
.article-cta p { color: rgba(255,255,255,0.66); font-size: 15.5px; line-height: 1.7; margin-bottom: 26px; }
.article-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.article-cta-btn {
  display: inline-block;
  background: #E9142E;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 6px;
  transition: background 0.2s;
}
.article-cta-btn:hover { background: #C20F24; }
.article-cta-ghost {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 6px;
  transition: background 0.2s;
}
.article-cta-ghost:hover { background: rgba(255,255,255,0.12); }
.article-nav {
  border-top: 1px solid #E6E6E8;
  margin-top: 48px;
  padding-top: 32px;
}
.article-nav-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9A9A9E;
  margin-bottom: 18px;
}
.article-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.article-nav-item {
  display: block;
  border: 1px solid #E6E6E8;
  border-radius: 10px;
  padding: 20px 22px;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.article-nav-item:hover { box-shadow: 0 8px 22px rgba(17,17,17,0.08); transform: translateY(-2px); }
.article-nav-item span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #E9142E;
  margin-bottom: 8px;
}
.article-nav-item strong { display: block; font-size: 16px; font-weight: 700; color: #111111; line-height: 1.4; }

/* ─── BLOG LISTING ─────────────────────────────────── */
.list-hero { background: #111111; padding: 132px 24px 64px; }
.list-hero-inner { max-width: 1160px; margin: 0 auto; }
.list-hero h1 {
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1.4px;
  line-height: 1.1;
  margin-bottom: 16px;
}
.list-hero p { font-size: 17px; color: rgba(255,255,255,0.68); line-height: 1.7; max-width: 660px; }

/* ─── KONTAKT ──────────────────────────────────────── */
.kontakt-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kontakt-btn { margin: 0; box-shadow: 0 8px 24px rgba(233,20,46,0.28); }
.kontakt-btn-ghost {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 6px;
  transition: background 0.2s, border-color 0.2s;
}
.kontakt-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.kontakt-podrucja {
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  margin-top: 22px;
}

/* ─── FOOTER ───────────────────────────────────────── */
.footer-inner { align-items: flex-start; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-nav a {
  font-size: 13px;
  color: #6E6E72;
  text-decoration: none;
}
.footer-nav a:hover { color: #111111; }
.footer-center { max-width: 420px; }

/* ─── MOBILNA TRAKA ────────────────────────────────── */
.callbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 98;
  background: #fff;
  border-top: 1px solid #E6E6E8;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
  padding: 10px 14px;
  gap: 10px;
}
.callbar a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 10px;
  border-radius: 8px;
}
.callbar .cb-call { background: #E9142E; color: #fff; }
.callbar .cb-quote { background: #F4F4F5; color: #111111; }

/* ─── SITNICE ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
a:focus-visible, button:focus-visible { outline: 2px solid #E9142E; outline-offset: 3px; border-radius: 4px; }
[data-lang-block] { display: none; }
[data-lang-block].on { display: block; }

/* ─── RESPONSIVE (dopune) ──────────────────────────── */
@media (max-width: 1080px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 13.5px; }
}
@media (max-width: 1000px) {
  .hamburger { display: flex; }
  .nav-links, .nav-cta { display: none; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .article-hero { padding: 108px 24px 52px; }
  .article-hero h1 { font-size: 31px; letter-spacing: -0.7px; }
  .list-hero { padding: 108px 24px 52px; }
  .list-hero h1 { font-size: 32px; letter-spacing: -0.8px; }
  .article-body { padding: 48px 24px 72px; }
  .article-inner h2 { font-size: 23px; }
  .article-inner p, .article-inner ul li, .article-inner ol li { font-size: 16px; }
  .article-cta { padding: 32px 24px; }
  .article-nav-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-nav { justify-content: center; }
}
@media (max-width: 768px) {
  .callbar { display: flex; }
  body { padding-bottom: 68px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-btn, .hero-btn-ghost { text-align: center; }
  .paketi-note { flex-direction: column; align-items: flex-start; }
  .paketi-note-btn { width: 100%; text-align: center; }
  .kontakt-actions { flex-direction: column; align-items: stretch; }
  .kontakt-btn, .kontakt-btn-ghost { text-align: center; }
  .article-cta-actions { flex-direction: column; }
  .article-cta-btn, .article-cta-ghost { text-align: center; }
}
@media (max-width: 620px) {
  .hero-kicker { font-size: 10px; letter-spacing: 1.8px; }
  .hero-stats { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-stat { border-right: none; padding-right: 0; margin-right: 0; }
}

/* ─── PROSTOR ZA FOTOGRAFIJE U ČLANKU ──────────────── */
.article-photo {
  max-width: 1000px;
  margin: -40px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.article-photo-inner {
  border-radius: 14px;
  overflow: hidden;
  background: #ECECEE;
  aspect-ratio: 16 / 8;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}
.article-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-photo-cap {
  font-size: 12.5px;
  color: #9A9A9E;
  line-height: 1.6;
  margin-top: 10px;
  text-align: center;
}
.article-body.has-photo { padding-top: 48px; }

.article-figure { margin: 34px 0; }
.article-figure-inner {
  border-radius: 12px;
  overflow: hidden;
  background: #ECECEE;
  aspect-ratio: 3 / 2;
}
.article-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-figure figcaption {
  font-size: 13px;
  color: #9A9A9E;
  line-height: 1.6;
  margin-top: 10px;
  padding-left: 2px;
  border-left: 2px solid #E6E6E8;
  padding: 2px 0 2px 12px;
}
@media (max-width: 860px) {
  .article-photo { margin-top: -28px; padding: 0 24px; }
  .article-photo-inner { aspect-ratio: 4 / 3; }
  .article-body.has-photo { padding-top: 36px; }
}

/* ─── DORADE: pristupačnost i mobilni ───────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: #111111;
  color: #fff;
  padding: 14px 20px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* naslovi ne završe ispod fiksne navigacije */
section[id], div[id] { scroll-margin-top: 88px; }

body.locked { overflow: hidden; }

@media (max-width: 860px) {
  .modal { padding: 0; align-items: stretch; }
  .modal-card {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    animation: mslide 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  @keyframes mslide { from { transform: translateY(28px); opacity: 0 } to { transform: none; opacity: 1 } }
  .modal-body { padding: 24px 22px 40px; }
  .modal-close { margin: 12px 12px 0 0; }
  .detail-title { font-size: 26px; letter-spacing: -0.4px; }
  .modal-body ul { grid-template-columns: 1fr; }
  .modal-body p, .modal-body ul li { font-size: 16px; }
  .detail-actions { flex-direction: column; }
  .detail-btn, .detail-btn-ghost { text-align: center; }

  .lang button, .lang a { padding: 9px 11px; font-size: 12px; }
  .mobile-menu a { padding: 15px 0; font-size: 16px; }
  .hamburger { width: 44px; height: 44px; align-items: center; justify-content: center; }
  .nav-logo img { height: 38px; width: auto; }
  .nav-logo-text { font-size: 17px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 34px; }
  .section-title { font-size: 26px; }
  .nav-logo-text { font-size: 15px; }
  .lang button, .lang a { padding: 9px 8px; font-size: 11px; }
  .chip { font-size: 12.5px; }
  .contact-phone { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .modal-card, .modal-backdrop { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ─── VEĆE POVRŠINE ZA PRST NA MOBITELU ────────────── */
@media (max-width: 860px) {
  .lang button, .lang a { min-height: 40px; padding: 11px 12px; }
  .zasto-link,
  .blog-head-all,
  .article-back,
  .post-more,
  .detail-cta { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-phone,
  .contact-value { display: inline-flex; align-items: center; min-height: 40px; }
  .modal-close { width: 46px; height: 46px; }
}

/* ─── DRUŠTVENE MREŽE ──────────────────────────────── */
.socials { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.socials[hidden] { display: none !important; }
.soc {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.soc svg { width: 19px; height: 19px; flex-shrink: 0; }

/* u footeru: mali krugovi */
.socials-footer .soc {
  width: 38px;
  height: 38px;
  justify-content: center;
  border: 1px solid #E0E0E2;
  border-radius: 50%;
  color: #6E6E72;
}
.socials-footer .soc:hover {
  background: #E9142E;
  border-color: #E9142E;
  color: #fff;
  transform: translateY(-2px);
}

/* u kontaktu: s nazivom mreže */
.kontakt-soc { margin-top: 30px; }
.kontakt-soc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: rgba(255,255,255,0.42);
  margin-bottom: 14px;
}
.socials-kontakt .soc {
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  color: rgba(255,255,255,0.8);
  font-size: 13.5px;
  font-weight: 600;
  min-height: 42px;
}
.socials-kontakt .soc:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
}
.soc-label { white-space: nowrap; }

@media (max-width: 860px) {
  .socials-footer { justify-content: center; }
  .socials-kontakt { gap: 8px; }
  .socials-kontakt .soc { padding: 11px 14px; font-size: 13px; }
}

/* ─── OZNAKE: OBIČNA SLOVA, BEZ RAZMAKA ─────────────── */
.section-label, .arg-title, .badge, .contact-label, .avail-status,
.hero-kicker, .tile-tag, .detail-tag, .modal-body h4, .post-meta,
.article-kicker, .article-nav-title, .article-nav-item span, .kontakt-soc-title {
  text-transform: none;
  letter-spacing: 0;
}
.section-label { font-size: 14px; }
.hero-kicker, .article-kicker { font-size: 15px; font-weight: 600; }
.tile-tag, .detail-tag, .post-meta, .article-nav-item span { font-size: 13px; }
.arg-title { font-size: 16px; }
.modal-body h4 { font-size: 16px; font-weight: 700; }
.badge { font-size: 12px; }
.contact-label, .avail-status, .kontakt-soc-title, .article-nav-title { font-size: 13px; }
@media (max-width: 620px) {
  .hero-kicker { font-size: 14px; letter-spacing: 0; }
}

/* ─── BROJKE U HEROJU: BEZ VISEĆE CRTE ─────────────── */
.hero-stats { flex-wrap: nowrap; width: max-content; max-width: 100%; }
@media (min-width: 1281px) { .hero-stats { max-width: none; } }
@media (max-width: 1280px) {
  .hero-stats { display: grid; grid-template-columns: auto auto; justify-content: start; row-gap: 8px; width: auto; }
  .hero-stat:nth-child(2n) { border-right: none; padding-right: 0; margin-right: 0; }
}
@media (max-width: 620px) {
  .hero-stats { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ─── VODORAVNI LOGO (znak lijevo, ToRo i Clean desno) ─ */
.nav-inner { height: 80px; }
.nav-logo img { height: 58px; }
.mobile-menu { top: 80px; }
.hero { padding-top: 80px; }
.article-hero, .list-hero { padding-top: 144px; }
section[id], div[id] { scroll-margin-top: 100px; }
.footer-logo img { height: 56px; }
@media (max-width: 860px) {
  .nav-inner { height: 68px; }
  .nav-logo img { height: 46px; }
  .mobile-menu { top: 68px; }
  .hero { padding-top: 68px; }
  .article-hero, .list-hero { padding-top: 116px; }
  section[id], div[id] { scroll-margin-top: 88px; }
}

/* ─── HERO FOTOGRAFIJA ─────────────────────────────── */
.hero { background-image: url('slike/hero-1916.jpg'); background-image: image-set(url('slike/hero-1916.webp') type('image/webp'), url('slike/hero-1916.jpg') type('image/jpeg')); background-position: 70% center; }
@media (max-width: 768px) { .hero { background-position: 80% center; } }
.tile-photo { height: auto; aspect-ratio: 3 / 2; }
.tile-photo img { object-position: center; }