.citat{--vu:min(1vw,17.28px,1.8vh);--citat-boja:#E7DFF8;--mat:clamp(7px,.75vw,12px);
  position:relative;z-index:4;padding:16vh var(--rub) 14vh;color:var(--tekst);
  background:radial-gradient(90% 70% at 50% 34%,#2A1453 0%,#1B0D38 46%,var(--noc) 100%)}

.citat__blok{position:relative;text-align:center}
.citat__navodnici{display:block;width:clamp(60px,calc(7 * var(--vu)),130px);height:auto;margin:0 auto calc(48 / 14.4 * var(--vu));fill:var(--citat-boja);opacity:.62}
.citat__naslov{font:700 calc(8.2 * var(--vu))/.92 "Antonio",sans-serif;letter-spacing:-.005em;color:var(--citat-boja);white-space:nowrap;transform-origin:50% 50%}
.citat__red{position:relative;display:block;width:max-content;margin-inline:auto}
.citat__puno{display:block}
.citat__red::before{content:none}
.citat__podnaslov{width:max-content;max-width:min(30em,86vw);margin:calc(48 / 14.4 * var(--vu)) auto 0;
  font:500 max(13px,calc(1.05 * var(--vu)))/1.6 "Satoshi",sans-serif;color:var(--tekst);opacity:.85;text-wrap:balance;transform-origin:50% 0}

.citat__slike{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);max-width:1180px;margin:12vh auto 0}
.citat__slika{position:relative}
.citat__slika:nth-child(1){rotate:-4deg}
.citat__slika:nth-child(2){rotate:2deg}
.citat__slika:nth-child(3){rotate:-2deg}
.citat__slika:nth-child(4){rotate:3deg}
.citat__okvir{position:relative;margin:0;padding:var(--mat) var(--mat) 0;border-radius:4px;
  background:linear-gradient(175deg,#FFFFFF 0%,#F4F0FA 55%,#ECE6F5 100%);
  box-shadow:0 30px 80px rgba(4,1,12,.45),0 6px 16px rgba(4,1,12,.28)}
.citat__okvir img{display:block;width:100%;height:auto;aspect-ratio:12/7;object-fit:cover;background:#1d1a24;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.citat__potpis{display:flex;align-items:center;min-height:calc(var(--mat) * 3.2);padding:4px 2px;
  font:500 clamp(8.5px,.68vw,10.5px)/1.25 "Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#4A3F63}

.citat__pozadina,.citat__tacke{display:none}

.citat.citat--ziv{padding:0}
.citat--ziv .citat__scena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.citat--ziv .citat__pozadina{display:block;position:absolute;inset:0;z-index:0}
.citat__sloj{position:absolute;inset:0;opacity:0}
.citat__sloj--noc{background:var(--noc)}
.citat__sloj--ljubicasta{background:radial-gradient(92% 78% at 50% 44%,#2C1558 0%,#1D0E3C 44%,#130A28 76%,#0E0720 100%)}
.citat__sloj--crna{background:var(--noc)}
.citat--ziv .citat__blok{position:absolute;left:50%;top:50%;z-index:2;width:max-content;transform:translate(-50%,-50%);will-change:transform}
.citat--ziv .citat__podnaslov{position:absolute;top:100%;left:50%;margin:calc(48 / 14.4 * var(--vu)) 0 0;transform:translateX(-50%)}
.citat--ziv .citat__slike{position:absolute;inset:0;z-index:3;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;max-width:none;margin:0;gap:0;pointer-events:none}
.citat--ziv .citat__slika{grid-area:1/1;rotate:none;will-change:transform}

.citat--racunar{background:transparent;pointer-events:none}
.citat--racunar .citat__tacke{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%}
.citat--racunar .citat__naslov{visibility:hidden}
.citat--racunar .citat__podnaslov{opacity:0}
.citat--racunar .citat__slika{width:clamp(300px,calc(40 * var(--vu)),640px)}
.citat--racunar .citat__okvir{pointer-events:auto}
@media (hover:hover) and (pointer:fine){
  .citat--racunar .citat__okvir{cursor:grab;touch-action:none}
  .citat--racunar .citat__okvir.citat__okvir--vuce{cursor:grabbing}
}

.citat--telefon{height:310vh;height:310svh;background:var(--noc)}
.citat--telefon .citat__sloj--noc{opacity:1}
.citat--telefon .citat__sloj--ljubicasta{opacity:.55}
.citat--telefon .citat__blok{width:100%;padding:0 18px}
.citat--telefon .citat__podnaslov{width:auto;max-width:330px;left:18px;right:18px;margin-inline:auto;transform:none;opacity:0}
.citat--telefon .citat__red::before{content:attr(data-tekst);position:absolute;inset:0;color:transparent;opacity:var(--duh,0);pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,var(--citat-boja) 0 .9px,transparent 1.25px);background-size:3px 3px;
  -webkit-background-clip:text;background-clip:text}
.citat--telefon .citat__slika{width:min(88vw,380px)}

@media (max-width:899px){
  .citat{padding:14vh 18px 12vh}
  .citat__naslov{font-size:min(13.2vw,60px)}
  .citat__podnaslov{max-width:330px;font-size:14px}
  .citat__slike{grid-template-columns:minmax(0,1fr);max-width:420px;gap:34px}
  .citat__potpis{font-size:8.5px;letter-spacing:.08em}
}