/* Золотая рыбка — слайдер первого экрана */
.hero-slider{position:relative;overflow:hidden}
.hero-slider .wrap{position:relative;z-index:1}
/* слайд-контент в округлой карточке (фон-видео блюрится за ней) */
.hero-slider .hero-in{background:var(--glass);border:1px solid var(--line);border-radius:30px;padding:34px 42px}
@media(max-width:860px){.hero-slider .hero-in{padding:14px 16px 24px;border-radius:24px}}
/* ТЁМНАЯ тема: тёмный фон-аквариум (с подсветкой сверху), золотые рыбки видны */
body.dark .hero-slider{background:radial-gradient(ellipse 65% 45% at 50% -10%,rgba(120,170,190,.30),transparent 60%),linear-gradient(180deg,#0d1a21,#0a1316)}
.zr-slides-vp{overflow:hidden}
.zr-slides{position:relative}
.zr-slide{position:absolute;top:0;left:0;width:100%;opacity:0;transform:translateX(0);transition:opacity .5s ease,transform .62s cubic-bezier(.33,.7,.27,1);pointer-events:none;will-change:opacity,transform}
.zr-slide.on{position:relative;opacity:1;transform:none;pointer-events:auto;z-index:2}
.zr-slide.from-right{transform:translateX(64px)}
.zr-slide.from-left{transform:translateX(-64px)}
.zr-slide.out{transform:translateX(-64px);opacity:0}
.zr-slide.out-back{transform:translateX(64px);opacity:0}
.zr-slide.no-trans{transition:none}

/* навигация: стрелки + точки внизу по центру */
.zr-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:14px;position:relative;z-index:5}
.zr-arrow{width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  color:var(--gold);display:grid;place-items:center;cursor:pointer;transition:.2s;box-shadow:0 8px 20px -10px rgba(0,0,0,.3);flex:0 0 auto}
.zr-arrow:hover{background:var(--grad);color:#fff;border-color:transparent;transform:scale(1.08)}
.zr-arrow svg{width:21px;height:21px;fill:none}

/* точки */
.zr-dots{display:flex;gap:8px;justify-content:center;position:relative;z-index:5}
.zr-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:none;cursor:pointer;transition:.25s;padding:0}
.zr-dot.on{width:26px;border-radius:5px;background:var(--grad)}

/* ФОН: параллакс золотых рыбок — двигаются при скролле (без видео, грузится мгновенно) */
.hero-parallax{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pfish{position:absolute;color:var(--gold);opacity:.13;will-change:transform}
.pfish svg{display:block;width:100%;height:auto}
body.dark .pfish{color:#f4cf78;opacity:.26;filter:drop-shadow(0 0 18px rgba(245,205,120,.6))}
.pf1{width:340px;top:1%;left:-6%}
.pf2{width:188px;top:33%;right:-3%}
.pf3{width:128px;bottom:3%;left:9%}
.pf4{width:90px;top:11%;right:17%;opacity:.09}
body.dark .pf4{opacity:.16}
.pf2 svg,.pf4 svg{transform:scaleX(-1)}
/* пузырьки */
.pbub{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(240,200,110,.5),rgba(240,200,110,.04));opacity:.5;will-change:transform}
body.dark .pbub{background:radial-gradient(circle at 35% 30%,rgba(155,205,225,.65),rgba(155,205,225,.05));box-shadow:0 0 10px rgba(155,205,225,.4)}
.pb1{width:12px;height:12px;left:23%;top:30%}
.pb2{width:7px;height:7px;left:58%;top:18%}
.pb3{width:15px;height:15px;left:80%;bottom:22%}
.pb4{width:9px;height:9px;left:42%;bottom:15%}
/* световой луч (аквариум) — только тёмная тема */
.hero-beam{position:absolute;top:-22%;left:34%;width:42%;height:150%;background:linear-gradient(180deg,rgba(155,205,225,.16),transparent 70%);transform:rotate(13deg);filter:blur(24px);opacity:0}
body.dark .hero-beam{opacity:1}
@media (prefers-reduced-motion:reduce){.pfish,.pbub{transform:none!important}}

@media(max-width:860px){
  .zr-arrow{width:42px;height:42px}
  .zr-arrow svg{width:19px;height:19px}
  .zr-nav{gap:14px;margin-top:10px}
  .hero-parallax{display:none}
}