/* ============ Optivance – UX/UI (tylko elementy unikalne dla tej podstrony) ============ */
/* Wymaga wcześniej załadowanego style-shared.css */

.optivance-ux .ux-hero-visual{
  position:relative;background:var(--white);border:1px solid var(--paper-line);
  border-radius:var(--radius);padding:26px;box-shadow:0 30px 60px -30px rgba(20,22,28,.2);
}
.optivance-ux .ux-hero-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:16px;
}
.optivance-ux .ux-hero-nav{width:70px;height:8px;border-radius:4px;background:var(--paper-alt);margin-bottom:16px;}
.optivance-ux .ux-hero-block{
  position:relative;height:130px;border:1.5px solid var(--violet);border-radius:10px;
  background:rgba(91,75,209,.05);margin-bottom:16px;
}
.optivance-ux .ux-hero-cursor{
  position:absolute;right:18px;bottom:16px;width:16px;height:16px;border-radius:50%;
  background:var(--violet);box-shadow:0 0 0 0 rgba(91,75,209,.5);
  animation:oa-ux-ripple 2.4s ease-out infinite;
}
@keyframes oa-ux-ripple{
  0%{box-shadow:0 0 0 0 rgba(91,75,209,.45);}
  70%{box-shadow:0 0 0 16px rgba(91,75,209,0);}
  100%{box-shadow:0 0 0 0 rgba(91,75,209,0);}
}
.optivance-ux .ux-hero-row{display:flex;flex-direction:column;gap:9px;}
.optivance-ux .ux-hero-line{height:9px;border-radius:4px;background:var(--paper-alt);width:100%;}
.optivance-ux .ux-hero-line.short{width:55%;}