body { font-family: 'Montserrat', sans-serif; }

    /* tvoje barvy */
    .accent-gradient { background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%); }

    .clip-slant { clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); }
    .text-outline { -webkit-text-stroke: 1px rgba(255,255,255,0.2); color: transparent; }

    /* jemný grain */
    .grain::before{
      content:"";
      position:absolute; inset:0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
      opacity:.12;
      mix-blend-mode: overlay;
      pointer-events:none;
    }

    /* scroll reveal animace (bez knihoven) */
    .reveal { opacity:0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
    .reveal.in { opacity:1; transform: translateY(0); }
    .reveal-left { opacity:0; transform: translateX(-22px); transition: opacity .85s ease, transform .85s ease; }
    .reveal-left.in { opacity:1; transform: translateX(0); }
    .reveal-right { opacity:0; transform: translateX(22px); transition: opacity .85s ease, transform .85s ease; }
    .reveal-right.in { opacity:1; transform: translateX(0); }
    .delay-100{ transition-delay: .10s }
    .delay-200{ transition-delay: .20s }
    .delay-300{ transition-delay: .30s }
    .delay-400{ transition-delay: .40s }

    /* micro animace */
    @keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
    .floaty { animation: floaty 6s ease-in-out infinite; }

    @keyframes sheen {
      0%{ transform: translateX(-120%) skewX(-18deg); opacity:0; }
      20%{ opacity:.55; }
      60%{ opacity:.20; }
      100%{ transform: translateX(220%) skewX(-18deg); opacity:0; }
    }
    .sheen {
      position:relative;
      overflow:hidden;
    }
    .sheen::after{
      content:"";
      position:absolute; top:-20%; left:-40%;
      width:45%; height:140%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
      animation: sheen 6.5s ease-in-out infinite;
      pointer-events:none;
    }

    /* lepší focus */
    .focus-ring:focus { outline: none; box-shadow: 0 0 0 4px rgba(0,210,255,.25); border-color: rgba(0,210,255,.9); }

    /* topbar shadow */
    .nav-shadow { box-shadow: 0 16px 40px rgba(0,0,0,.25); }

    /* badge outline */
    .soft-outline { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

    /* lightbox */
    .lb { display:none; }
    .lb.open { display:flex; }

    .text-gradient-outline {
      background: linear-gradient(135deg, #00d2ff, #3a7bd5);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: gradientMove 6s linear infinite;
      background-size: 200% 200%;
    }

    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }

    /* jemná tma pod textem v hero (lepší čitelnost na mobilu) */
    .hero-overlay {
      background: radial-gradient(ellipse at 20% 40%, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.10) 70%, rgba(0,0,0,0) 100%);
    }
    /* --- badge ticker (bez mezer) --- */
.badge-track{
  display:flex;
  width:max-content;
  gap: 16px;
  padding: 10px 14px;
  will-change: transform;
  animation: badgeMarquee var(--badgeDur, 16s) linear infinite;
}

/* zajištění plynulosti: posun o šířku první sady, kterou dopočítáme */
@keyframes badgeMarquee{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--badgeShift, 0px))); }
}

.badge-set{
  display:flex;
  gap: 10px;
}

.badge-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  white-space: nowrap;

  transform: translateY(0) scale(1);
  opacity: .78;
  animation: badgePulse 4.6s ease-in-out infinite;
}

/* zvýraznění jednotlivých pillů */
@keyframes badgePulse{
  0%, 100% { transform: translateY(0) scale(1); opacity: .72; }
  20%      { transform: translateY(-4px) scale(1.08); opacity: 1; box-shadow: inset 0 0 0 1px rgba(0,210,255,.55), 0 10px 24px rgba(0,210,255,.12); }
  45%      { transform: translateY(0) scale(1.02); opacity: .90; }
}

.badge-pill:nth-child(1){ animation-delay: 0s; }
.badge-pill:nth-child(2){ animation-delay: .5s; }
.badge-pill:nth-child(3){ animation-delay: 1s; }
.badge-pill:nth-child(4){ animation-delay: 1.5s; }
.badge-pill:nth-child(5){ animation-delay: 2s; }

@media (hover:hover){
  .badge-marquee:hover .badge-track{ animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce){
  .badge-track{ animation: none; }
  .badge-pill{ animation: none; }
}
/* desktop: ticker jen vlevo (aby nepřekrýval JH WORKS) */
.ticker-wrap{
  width: min(62%, 860px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px 16px;
}

/* na desktopu to nech jako pill */
.badge-marquee{
  border-radius: 9999px;
}

/* mobil: full width spodní bar */
@media (max-width: 640px){
  .ticker-wrap{
    width: 100%;
    padding: 0;               /* edge-to-edge */
  }
  .badge-marquee{
    border-radius: 0;         /* pruh přes celý spodek */
  }
  .badge-track{
    padding: 10px 12px;       /* trochu menší */
  }
  .badge-set{
    padding-left: 12px;
  }
}