.hero{padding:150px 0 70px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:120%;
  background:radial-gradient(closest-side,rgba(90,176,255,.16),transparent 70%);z-index:-1;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem);margin:22px 0 20px}
.hero p.lead{font-size:1.13rem;max-width:42ch;color:#42566e}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

.hero-photo{
  position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;
  box-shadow:var(--shadow);background:var(--mist);
}
/* slider */
.hero-slides{position:absolute;inset:0}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hslide.active{opacity:1}
.hslide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 6.5s ease}
.hslide.active img{transform:scale(1.12)}            /* jemný Ken Burns zoom */
.hslide video{width:100%;height:100%;object-fit:cover;display:block}

.hero-slides.ready .hslide:first-child{animation:reveal 1.2s .1s cubic-bezier(.65,0,.2,1) both}
@keyframes reveal{from{clip-path:polygon(0 0,0 0,0 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}

.hero-photo .tag{
  position:absolute;left:18px;bottom:18px;z-index:3;background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);padding:.6em 1em;border-radius:12px;
  font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--ink);
  display:flex;align-items:center;gap:.5em;box-shadow:var(--shadow-sm);
  max-width:calc(100% - 36px);transition:opacity .4s ease;
}
.hero-photo .tag b{color:var(--blue)}

/* bodky na prepínanie */
.hero-dots{position:absolute;right:16px;bottom:18px;z-index:3;display:flex;gap:8px}
.hero-dots button{
  width:9px;height:9px;border-radius:999px;border:none;cursor:pointer;padding:0;
  background:rgba(255,255,255,.55);transition:width .3s ease, background .3s ease;
}
.hero-dots button.active{width:26px;background:#fff}

.float-card{
  position:absolute;top:24px;right:-14px;background:#fff;border-radius:15px;
  padding:14px 18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;
  animation:floaty 4s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.float-card .ic{width:40px;height:40px;border-radius:11px;background:var(--mist);display:grid;place-items:center;color:var(--blue);flex:none}
.float-card .ic svg{width:21px;height:21px}
.float-card small{display:block;font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.float-card strong{font-family:var(--display);font-size:1.02rem;color:var(--ink)}

.trust{display:flex;gap:14px;flex-wrap:wrap;margin-top:50px}
.trust .item{
  flex:1;min-width:170px;display:flex;align-items:center;gap:12px;
  background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
}
.trust .item svg{width:24px;height:24px;color:var(--blue);flex:none}
.trust .item span{font-family:var(--display);font-weight:500;font-size:.95rem;color:var(--ink);line-height:1.25}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero p.lead{max-width:none}
  .float-card{right:14px}
}
@media (max-width:760px){
  .hero{padding:120px 0 50px}
  .trust .item{min-width:calc(50% - 7px)}
}