/* Buttons, level 2: one family across the site.
   Primary actions are pills with an arrow disc; on hover a soft sheen passes over the face, the disc fills with mint
   and the arrow moves on. Text links draw a line under themselves. Chips press down slightly when clicked.
   Hover effects only run where a real hover exists, so touch screens never get a stuck state. */
:root{
  --btn-ease:cubic-bezier(.16,1,.3,1);
  --btn-arrow-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --btn-arrow-n:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23002c4f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Home: white primary pill ---------- */
.home-body .primary{
  position:relative;gap:20px;min-height:58px;padding:8px 8px 8px 26px;border-radius:999px;
  background:linear-gradient(110deg,#fff 0%,#fff 38%,#e4eeff 50%,#fff 62%,#fff 100%) 100% 0/260% 100%;
  color:#1f4aa3;font-size:14px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 1px 0 #fff inset,0 20px 34px -18px rgba(16,40,130,.6);
  transition:transform .6s var(--btn-ease),box-shadow .6s var(--btn-ease),background-position .9s var(--btn-ease)}
.home-body .primary::after{
  content:"";flex:none;width:42px;height:42px;border-radius:50%;
  background:#1f4aa3 var(--btn-arrow-w) center/18px no-repeat;
  transition:transform .6s var(--btn-ease),background-color .4s ease}
.home-body .primary:active{transform:translateY(0) scale(.98);transition-duration:.15s}
.home-body .primary:focus-visible{outline:3px solid #c9fff0;outline-offset:5px}
@media(hover:hover){
  .home-body .primary:hover{transform:translateY(-3px);background-position:0 0;box-shadow:0 1px 0 #fff inset,0 28px 40px -18px rgba(16,40,130,.75)}
  .home-body .primary:hover::after{background-color:#3158c9;transform:translateX(3px)}
}

/* ---------- Home: text link that draws its line ---------- */
.home-body .secondary{position:relative;border-bottom:0;padding:16px 0;font-size:14px}
.home-body .secondary::before,.home-body .secondary::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;border-radius:2px;background:#fff}
.home-body .secondary::before{opacity:.38}
.home-body .secondary::after{transform:scaleX(0);transform-origin:left;transition:transform .6s var(--btn-ease)}
.home-body .secondary:focus-visible{outline:3px solid #c9fff0;outline-offset:4px}
@media(hover:hover){.home-body .secondary:hover::after{transform:scaleX(1)}}
@media(max-width:760px){.home-body .primary{padding:7px 7px 7px 22px;min-height:54px}.home-body .primary::after{width:40px;height:40px}}

/* ---------- Slikanica: order button ---------- */
.pg .pg-order{
  background:linear-gradient(110deg,#3158c9 0%,#3158c9 38%,#5d85f3 50%,#3158c9 62%,#3158c9 100%) 100% 0/260% 100%;
  transition:transform .6s var(--btn-ease),box-shadow .6s var(--btn-ease),background-position .9s var(--btn-ease)}
.pg .pg-order i{transition:transform .6s var(--btn-ease),background-color .4s ease,color .4s ease}
.pg .pg-order:active{transform:translateY(0) scale(.98);transition-duration:.15s}
@media(hover:hover){
  .pg .pg-order:hover{background-position:0 0;transform:translateY(-3px)}
  .pg .pg-order:hover i{background:#002c4f;color:#fff;transform:translateX(3px)}
}

/* ---------- Text links on the content pages ---------- */
.pg .pg-more{position:relative;border-bottom:0;padding:8px 0}
.pg .pg-more::before,.pg .pg-more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;background:currentColor}
.pg .pg-more::before{opacity:.28}
.pg .pg-more::after{transform:scaleX(0);transform-origin:left;transition:transform .6s var(--btn-ease)}
@media(hover:hover){.pg .pg-more:hover::after{transform:scaleX(1)}}

/* ---------- Chips and small buttons: a little give when pressed ---------- */
.fx-chip,.faq-chips a,.fx-reset{transition-property:background,border-color,color,transform,box-shadow}
.fx-chip:active,.faq-chips a:active,.fx-reset:active{transform:scale(.96);transition-duration:.12s}
.faq-chips a:focus-visible{outline:3px solid #c9fff0;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .home-body .primary,.home-body .primary::after,.home-body .secondary::after,.pg .pg-order,.pg .pg-order i,.pg .pg-more::after{transition:none}
  .home-body .primary:hover,.home-body .primary:hover::after,.pg .pg-order:hover,.pg .pg-order:hover i,.home-body .primary:active,.pg .pg-order:active,.fx-chip:active,.faq-chips a:active,.fx-reset:active{transform:none}
}