/* Staklasti efekat na prelazak mišem (sve crne verzije).
   Kartica postaje kao zatamnjeno staklo: zamućena pozadina, svijetla ivica i odsjaj koji prati miš. */
@media (hover:hover) and (pointer:fine){
  .card,.key,.pf,.step,.faq details,.stat,.gx{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s,background-color .4s}
  .card,.key,.pf,.step,.faq details,.gx{position:relative;isolation:isolate}
  .card:hover,.key:hover,.pf:hover,.step:hover,.faq details:hover,.gx:hover{
    background-color:rgba(255,240,210,.065);border-color:rgba(246,213,138,.5);
    box-shadow:inset 0 1px 0 rgba(255,244,214,.22),inset 0 0 0 1px rgba(246,213,138,.16),0 26px 60px rgba(0,0,0,.62);
    backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7)}
  .card:hover{transform:translateY(-6px)}
  .pf:hover,.step:hover,.gx:hover{transform:translateY(-4px)}
  .key:hover{transform:translateY(-3px)}
  .card::after,.key::after,.pf::after,.step::after,.faq details::after,.gx::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:3;transition:opacity .35s;
    background:radial-gradient(360px circle at var(--hx,50%) var(--hy,0%),rgba(255,236,190,.17),transparent 46%),
               linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 38%);mix-blend-mode:screen}
  .card:hover::after,.key:hover::after,.pf:hover::after,.step:hover::after,.faq details:hover::after,.gx:hover::after{opacity:1}
}
/* velike površine (instrument, tabela, kontakt) dobijaju staklo, ali se ne podižu */
.gx.flat:hover{transform:none}
@media (prefers-reduced-motion:reduce){.card:hover,.pf:hover,.step:hover,.key:hover,.gx:hover{transform:none}}