.spirala{margin:0 0 26px;padding:26px clamp(16px,3vw,34px) 22px;border-radius:30px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 50px -24px rgba(0,0,0,.28);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
.spirala .section-title,.spirala .eyebrow,.spirala .lede{text-align:left}
.spirala .lede{opacity:.7;margin-bottom:6px}
.spirala-sort{display:inline-flex;padding:3px;margin:10px 0 4px;border-radius:999px;background:rgba(120,120,128,.16)}
.spirala-sort button{border:0;background:transparent;font:inherit;font-size:.85rem;font-weight:600;padding:6px 16px;border-radius:999px;cursor:pointer;color:inherit;opacity:.75;transition:background .2s,opacity .2s,box-shadow .2s}
.spirala-sort button[aria-pressed="true"]{background:#fff;color:#111;opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.spirala-sort button:focus-visible{outline:2px solid var(--accent,#0a84ff);outline-offset:1px}
:root[data-theme="dark"] .spirala-sort button[aria-pressed="true"]{background:#636366;color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spirala-sort button[aria-pressed="true"]{background:#636366;color:#fff}}
.spirala-scena{margin:0 auto;max-width:760px}
.spirala-svg{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.spirala-cvor{outline:none;cursor:pointer}
.spirala-krug{filter:drop-shadow(0 6px 10px rgba(0,0,0,.22));transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.spirala-podloga{fill:#e9e9ee}
.spirala-rub{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.6}
.spirala-cvor:hover .spirala-rub,.spirala-cvor:focus-visible .spirala-rub{stroke:var(--accent,#0a84ff);stroke-width:2.6}
.spirala-cvor:focus-visible .spirala-krug{filter:drop-shadow(0 0 0 transparent) drop-shadow(0 8px 14px rgba(0,0,0,.3))}
.spirala-opis{margin:10px 0 0;min-height:1.5em;font-weight:600;letter-spacing:-.01em}
.moja-pocetna .spirala{background:none;border:0;box-shadow:none;padding:6px 0 0;margin:12px 0 0;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .spirala{background:linear-gradient(180deg,rgba(44,44,48,.7),rgba(30,30,34,.5));border-color:rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 50px -24px rgba(0,0,0,.8)}
  :root:not([data-theme="light"]) .spirala-podloga{fill:#2c2c31}
  :root:not([data-theme="light"]) .spirala-rub{stroke:rgba(255,255,255,.28)}
}
:root[data-theme="dark"] .spirala{background:linear-gradient(180deg,rgba(44,44,48,.7),rgba(30,30,34,.5));border-color:rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 50px -24px rgba(0,0,0,.8)}
:root[data-theme="dark"] .spirala-podloga{fill:#2c2c31}
:root[data-theme="dark"] .spirala-rub{stroke:rgba(255,255,255,.28)}
@media (prefers-reduced-motion:reduce){.spirala-krug{transition:none}}
/* ostali izgledi galerije */
.spirala-plocica,.spirala-kartica,.spirala-flow-stavka{position:relative;display:block;overflow:hidden;background:#e9e9ee;text-decoration:none;color:#fff}
.spirala-plocica img,.spirala-kartica img,.spirala-flow-stavka img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.spirala-natpis{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-size:.85rem;font-weight:600;text-align:left;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));opacity:0;transition:opacity .25s}
a:hover>.spirala-natpis,a:focus-visible>.spirala-natpis{opacity:1}
.spirala-plocica:focus-visible,.spirala-kartica:focus-visible,.spirala-flow-stavka:focus-visible{outline:3px solid var(--accent,#0a84ff);outline-offset:2px}
/* mozaik */
.spirala-mozaik{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:150px;grid-auto-flow:dense;gap:10px;text-align:left}
.spirala-plocica{border-radius:20px;box-shadow:0 8px 22px -12px rgba(0,0,0,.45)}
.spirala-plocica.velika{grid-column:span 2;grid-row:span 2}
.spirala-plocica:hover img{transform:scale(1.06)}
/* filmska traka */
.spirala-traka{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 6px 18px;scrollbar-width:thin;outline:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.spirala-kartica{flex:0 0 clamp(170px,26vw,230px);height:clamp(230px,34vw,310px);border-radius:24px;scroll-snap-align:center;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.spirala-kartica:hover img{transform:scale(1.05)}
/* cover flow */
.spirala-flow{position:relative;height:clamp(260px,42vw,380px);perspective:1100px;overflow:hidden;outline:none}
.spirala-flow-stavka{position:absolute;left:50%;top:50%;width:clamp(180px,32vw,280px);height:clamp(200px,32vw,290px);margin-top:calc(clamp(200px,32vw,290px) / -2);border-radius:22px;box-shadow:0 22px 40px -16px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.spirala-flow-dugme{position:absolute;top:50%;z-index:200;width:42px;height:42px;margin-top:-21px;border:0;border-radius:50%;font-size:1.6rem;line-height:1;cursor:pointer;background:rgba(255,255,255,.85);color:#111;box-shadow:0 4px 14px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.spirala-flow-dugme.lijevo{left:6px}.spirala-flow-dugme.desno{right:6px}
@media (prefers-reduced-motion:reduce){.spirala-flow-stavka,.spirala-plocica img,.spirala-kartica img{transition:none}}
/* grid dive: kamera leti kroz mrežu slika */
.spirala-dive{position:relative;aspect-ratio:1/1;max-width:720px;margin:0 auto;border-radius:30px;overflow:hidden;background:#0f0f12;outline:none;box-shadow:0 24px 60px -28px rgba(0,0,0,.6)}
.spirala-dive:focus-visible{box-shadow:0 0 0 3px var(--accent,#0a84ff)}
.spirala-dive-svijet{position:absolute;left:0;top:0;width:100%;display:grid;gap:5px;transform-origin:0 0;will-change:transform}
.spirala-dive-plocica{padding:0;border:0;aspect-ratio:1;border-radius:11px;overflow:hidden;cursor:pointer;background:#26262b}
.spirala-dive-plocica img{width:100%;height:100%;object-fit:cover;display:block}
.spirala-dive-natpis{position:absolute;left:0;right:0;bottom:0;display:flex;gap:12px;align-items:flex-end;justify-content:space-between;padding:46px 22px 66px;text-align:left;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;pointer-events:none}
.spirala-dive-natpis.vidljiv{opacity:1;transform:none;pointer-events:auto}
.spirala-dive-naslov{font-size:clamp(1.1rem,3.4vw,1.9rem);font-weight:700;letter-spacing:-.02em}
.spirala-dive-veza{color:#fff;font-weight:600;white-space:nowrap}
.spirala-dive-traka{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(40,40,46,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.spirala-dive-dugme{border:0;cursor:pointer;color:#fff;background:transparent;font:inherit;font-size:.85rem;font-weight:600;padding:7px 14px;border-radius:999px}
.spirala-dive-dugme:hover{background:rgba(255,255,255,.16)}
.spirala-dive-dugme:focus-visible{outline:2px solid var(--accent,#0a84ff)}
@media (prefers-reduced-motion:reduce){.spirala-dive-natpis{transition:none}}
/* sfera */
.spirala-sfera{position:relative;aspect-ratio:1/1;max-width:640px;margin:0 auto;perspective:1100px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;overflow:hidden}
.spirala-sfera.hvata{cursor:grabbing}
.spirala-sfera:focus-visible{border-radius:28px;box-shadow:0 0 0 3px var(--accent,#0a84ff)}
.spirala-sfera-kugla{position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d}
.spirala-sfera-plocica{position:absolute;left:0;top:0;display:block;border-radius:12px;overflow:hidden;background:#e9e9ee;box-shadow:0 10px 24px -10px rgba(0,0,0,.55);-webkit-user-drag:none;transition:opacity .25s}
.spirala-sfera-plocica.pozadi{opacity:.28;pointer-events:none}
.spirala-sfera-plocica img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.spirala-sfera-plocica.prednja{box-shadow:0 0 0 3px var(--accent,#0a84ff),0 14px 30px -10px rgba(0,0,0,.6)}
.spirala-sfera-natpis{position:absolute;left:0;right:0;bottom:30px;display:flex;gap:12px;align-items:baseline;justify-content:center;padding:0 12px;pointer-events:none}
.spirala-sfera-naslov{font-weight:700;letter-spacing:-.01em}
.spirala-sfera-veza{font-weight:600;pointer-events:auto}
.spirala-sfera-savjet{position:absolute;left:0;right:0;bottom:4px;margin:0;font-size:.8rem;opacity:.6;transition:opacity .4s}
.spirala-sfera-savjet.skriven{opacity:0}