/* ---------- Animirano ozadje ---------- */
.ozadje { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.ozadje canvas { width: 100%; height: 100%; display: block; }
.ozadje-mreza {
  position: fixed; inset: -80px 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
  will-change: transform;
}
.napredek-stran { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--lila), var(--mint)); }

/* ---------- Glava ---------- */
.glava { position: fixed; top: var(--sp-4); left: 0; right: 0; z-index: 50; transition: transform var(--d-5) var(--e-out); }
.glava.is-hidden { transform: translateY(calc(-100% - 24px)); }
.glava__in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);
}
.logo { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; font: 600 1.05rem/1 var(--h); letter-spacing: -.02em; min-height: 44px; justify-self: start; }
.logo__mark {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cream); color: var(--bg); font: 500 .72rem/1 var(--m); letter-spacing: 0;
}
.nav { display: flex; gap: var(--sp-1); }
.nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill); text-decoration: none; font-size: var(--fs-small); color: var(--ink-70);
  transition: color var(--d-3), background var(--d-3);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: rgba(255,255,255,.06); }
.glava__in > .btn { justify-self: end; min-height: 44px; padding: 0 var(--sp-2) 0 var(--sp-5); }
.glava__in > .btn .btn__arrow { width: 32px; height: 32px; }
.meni-gumb { display: none; justify-self: end; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--ink); cursor: pointer; }
.meni-gumb span { display: block; width: 16px; height: 1.5px; background: currentColor; margin: 4px auto; transition: transform var(--d-4) var(--e-out); }
.meni-odprt .meni-gumb span:first-child { transform: translateY(2.75px) rotate(45deg); }
.meni-odprt .meni-gumb span:last-child { transform: translateY(-2.75px) rotate(-45deg); }

.meni {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  padding: 120px var(--gutter) var(--sp-9); display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transition: opacity var(--d-4), visibility var(--d-4);
}
.meni-odprt .meni { opacity: 1; visibility: visible; }
.meni a { display: block; text-decoration: none; font: 600 var(--fs-h2)/1.2 var(--h); letter-spacing: -.03em; }
.meni__noga { display: grid; gap: var(--sp-4); }

@media (max-width: 899px) {
  .nav, .glava__in > .btn { display: none; }
  .meni-gumb { display: block; }
  .glava__in { grid-template-columns: 1fr auto; }
}
@media (min-width: 900px) { .meni { display: none; } }

/* ---------- Sticky CTA (telefon) ---------- */
.sticky-cta {
  position: fixed; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5); z-index: 30; display: none;
  transition: transform var(--d-5) var(--e-out), opacity var(--d-4);
}
.sticky-cta.is-hidden { transform: translateY(140%); opacity: 0; }
@media (max-width: 899px) { .sticky-cta { display: inline-flex; } }

/* ---------- Glava sekcije ---------- */
.sek-glava { display: grid; gap: var(--sp-6); margin-bottom: var(--sp-10); max-width: 960px; }
.oznaka-sek { display: inline-flex; align-items: center; gap: var(--sp-3); font: 500 var(--fs-caption)/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dark); }
.oznaka-sek::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.section--dark .oznaka-sek { color: var(--accent-light); }

/* ---------- Naslovi z masko (reveal) ---------- */
.vrsta { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.vrsta > span { display: inline-block; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding-block: var(--sp-6); background: var(--cream); color: var(--bg); transform: rotate(-1.5deg) scale(1.03); }
.trak-ovoj { overflow: hidden; padding-block: var(--sp-11); margin-block: calc(-1 * var(--sp-6)); }
.marquee__trak { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__trak { animation-play-state: paused; }
.marquee__skupina { display: flex; gap: var(--sp-8); padding-right: var(--sp-8); align-items: center; }
.marquee__el { display: inline-flex; align-items: center; gap: var(--sp-8); white-space: nowrap; font: 600 var(--fs-h3)/1 var(--h); letter-spacing: -.03em; }
.marquee__el::after { content: "✦"; font: normal 1rem/1 var(--b); color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }
.no-motion .marquee__trak { animation: none; flex-wrap: wrap; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--sp-3); }
.faq details { background: var(--bg-card); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line-soft); padding-inline: var(--sp-6); transition: box-shadow var(--d-3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.faq details[open] { box-shadow: 0 0 0 1px var(--line), var(--el-2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6);
  padding-block: var(--sp-6); font: 600 var(--fs-h4)/1.25 var(--h); letter-spacing: -.02em; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font: 400 1.25rem/1 var(--b); transition: transform var(--d-4) var(--e-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--sp-6); color: var(--ink-70); max-width: 66ch; }

/* ---------- Noga ---------- */
.noga { background: var(--ink-surface); color: #F2EEE6; padding-block: var(--sp-11) var(--sp-8); position: relative; overflow: hidden; }
.noga::before { content: ""; position: absolute; width: 900px; height: 900px; left: 50%; top: 40%; transform: translateX(-50%); background: radial-gradient(circle, rgba(255,122,69,.35), transparent 60%); pointer-events: none; }
.noga > .wrap { position: relative; }
.noga__mreza { display: grid; gap: var(--sp-9); grid-template-columns: 1fr; }
@media (min-width: 768px) { .noga__mreza { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.noga__o { display: grid; gap: var(--sp-5); max-width: 36ch; color: rgba(242,238,230,.72); align-content: start; }
.noga .logo__mark { background: var(--cream); color: var(--bg); }
.noga h3 { font: 500 var(--fs-caption)/1.4 var(--m); text-transform: uppercase; letter-spacing: .14em; color: rgba(242,238,230,.55); margin-bottom: var(--sp-5); }
.noga ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.noga li a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; color: rgba(242,238,230,.78); }
.noga li a:hover { color: #fff; }
.noga__ime { font: 600 clamp(3rem, 13vw, 12.5rem)/.9 var(--h); letter-spacing: -.06em; margin-block: var(--sp-11) var(--sp-7); white-space: nowrap; text-align: center;
  background: linear-gradient(180deg, #F2EEE6 30%, rgba(242,238,230,.15)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.noga__spodaj { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); color: rgba(242,238,230,.55); }
@media (max-width: 899px) { .noga { padding-bottom: 110px; } }

/* ---------- FAQ: animirana harmonika ---------- */
.faq details { overflow: hidden; transition: box-shadow var(--d-4), background var(--d-4); }
.faq details[open] { box-shadow: inset 0 0 0 1px rgba(255,122,69,.45), var(--el-2); background: linear-gradient(180deg, rgba(255,122,69,.07), transparent 70%), var(--bg-card); }
.faq summary { transition: color var(--d-3); }
.faq summary:hover { color: var(--accent-dark); }
.faq summary::after { transition: transform .45s cubic-bezier(.65,0,.2,1.3), background var(--d-3), color var(--d-3); }
.faq details[open] summary::after { background: var(--accent); color: var(--bg); }
.faq details > p { transition: opacity .35s var(--e-out), transform .45s var(--e-out); }
.faq details.is-zapira > p { opacity: 0; transform: translateY(-8px); }
.faq details.is-odpira > p { animation: faq-prihod .5s var(--e-out) both .08s; }
@keyframes faq-prihod { from { opacity: 0; transform: translateY(10px); } }