/* Styly stránky /reference/ */

.zv-hero *{margin:0;
padding:0;
box-sizing:border-box;}
.zv-hero{position:relative;

min-height:100vh;

display:flex;
align-items:center;

padding:120px 24px;

background:#050505;

overflow:hidden;

font-family:'Poppins',sans-serif;}
.zv-hero:before{content:'';

position:absolute;
top:-260px;
right:-260px;

width:760px;
height:760px;

background:
radial-gradient(circle,
rgba(255,92,0,.12) 0%,
transparent 72%);

filter:blur(140px);}
.zv-hero:after{content:'';

position:absolute;
bottom:-260px;
left:-260px;

width:620px;
height:620px;

background:
radial-gradient(circle,
rgba(255,255,255,.04) 0%,
transparent 72%);

filter:blur(120px);}
.zv-hero .zv-hero-wrap{position:relative;
z-index:2;

width:100%;
max-width:1450px;

margin:auto;

display:flex;
align-items:center;
justify-content:flex-start;}
.zv-hero .zv-content{max-width:760px;


margin-left:2vw;


display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;}
.zv-hero .zv-mini{display:flex;
align-items:center;
gap:14px;

margin-bottom:30px;

font-size:12px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;

color:#FF5C00;

opacity:0;
transform:translateY(20px);

animation:zvFade .8s .15s forwards;}
.zv-hero .zv-mini:before{content:'';

width:42px;
height:1px;

background:#FF5C00;}
.zv-hero .zv-title{max-width:760px;
margin-bottom:30px;}
.zv-hero .zv-word{display:block;
overflow:hidden;
line-height:.88;}
.zv-hero .zv-word span{display:inline-block;

font-size:clamp(58px,7vw,128px);
font-weight:900;
letter-spacing:-6px;

color:#F5F3EF;

transform:translateY(110%);
animation:zvWord .85s cubic-bezier(.76,0,.24,1) forwards;}
.zv-hero .zv-word .orange{background:#FF5C00;

padding:0 16px 10px;

border-radius:12px;

display:inline-block;}
.zv-hero .zv-text{max-width:640px;

font-size:19px;
line-height:1.8;

color:rgba(255,255,255,.62);

margin-bottom:46px;

opacity:0;
transform:translateY(20px);

animation:zvFade .8s .9s forwards;}
.zv-hero .zv-btns{display:flex;
gap:18px;
flex-wrap:wrap;

opacity:0;
transform:translateY(20px);

animation:zvFade .8s 1.1s forwards;}
.zv-hero .zv-btn{display:inline-flex;
align-items:center;
justify-content:center;

height:66px;
padding:0 34px;

border-radius:999px;

text-decoration:none;

font-size:12px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;

transition:
transform .35s ease,
box-shadow .35s ease,
background .35s ease,
color .35s ease;}
.zv-hero .zv-btn.primary{background:#FF5C00;
color:#fff;}
.zv-hero .zv-btn.primary:hover{transform:translateY(-5px);

box-shadow:
0 25px 60px rgba(255,92,0,.35);}
.zv-hero .zv-btn.ghost{border:1px solid rgba(255,255,255,.08);

background:rgba(255,255,255,.03);

color:#fff;}
.zv-hero .zv-btn.ghost:hover{background:#fff;
color:#111;}
.zv-hero .zv-bg{position:absolute;
bottom:-40px;
left:50%;

transform:translateX(-50%);

font-size:220px;
font-weight:900;
letter-spacing:-12px;
line-height:1;

white-space:nowrap;

color:rgba(255,255,255,.02);

pointer-events:none;
user-select:none;

opacity:0;
animation:zvBg 1.2s 1.2s forwards;}
@keyframes zvWord{
to{
transform:translateY(0);
}
}
@keyframes zvFade{
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes zvBg{
to{
opacity:1;
}
}
@media(max-width:991px){
.zv-hero{padding:110px 24px;}
.zv-hero .zv-content{margin-left:0;}
.zv-hero .zv-word span{font-size:82px;
letter-spacing:-4px;}
.zv-hero .zv-text{font-size:17px;
line-height:1.75;}
.zv-hero .zv-bg{font-size:150px;}
}
@media(max-width:767px){
.zv-hero{min-height:100vh;

padding:120px 18px 90px;

align-items:center;}
.zv-hero .zv-content{max-width:100%;
margin-left:0;}
.zv-hero .zv-mini{font-size:10px;
letter-spacing:2px;
gap:10px;}
.zv-hero .zv-mini:before{width:28px;}
.zv-hero .zv-word{line-height:.95;}
.zv-hero .zv-word span{font-size:48px;
letter-spacing:-2px;}
.zv-hero .zv-word .orange{padding:0 10px 6px;

border-radius:8px;}
.zv-hero .zv-title{margin-bottom:22px;}
.zv-hero .zv-text{font-size:15px;
line-height:1.75;

margin-bottom:34px;}
.zv-hero .zv-btns{flex-direction:column;
width:100%;}
.zv-hero .zv-btn{width:100%;
height:60px;

font-size:11px;}
.zv-hero .zv-bg{font-size:80px;
bottom:0;}
}

.ref-videos{position:relative;
padding:120px 24px;
background:#ECECEC;
overflow:hidden;
font-family:'Poppins',sans-serif;}
.ref-videos .ref-videos-head{text-align:center;
max-width:950px;
margin:auto auto 70px;}
.ref-videos .ref-videos-head h2{font-size:clamp(46px,5vw,88px);
font-weight:900;
line-height:.92;
letter-spacing:-4px;

color:#232329;

margin-bottom:24px;}
.ref-videos .ref-videos-head h2 span{background:#FF5C00;
color:#fff;

padding:4px 16px 10px;
border-radius:10px;

display:inline-block;}
.ref-videos .ref-videos-head p{font-size:18px;
line-height:1.8;

color:#666;}
.ref-videos .ref-grid{display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px;

max-width:1450px;
margin:auto;}
.ref-videos .ref-video{position:relative;

aspect-ratio:16/9;

border-radius:32px;
overflow:hidden;

background:#000;

transition:
transform .45s ease,
box-shadow .45s ease;}
.ref-videos .ref-video:hover{transform:translateY(-10px);

box-shadow:
0 35px 80px rgba(0,0,0,.22);}
.ref-videos .ref-video iframe{position:absolute;
inset:0;

width:100%;
height:100%;

border:none;

z-index:1;}
.ref-videos .ref-overlay{position:absolute;
inset:0;

display:flex;
align-items:flex-end;

padding:30px;

background:
linear-gradient(
to top,
rgba(0,0,0,.78),
rgba(0,0,0,.08)
);

z-index:2;


pointer-events:none;}
.ref-videos .ref-content{max-width:420px;}
.ref-videos .ref-label{display:inline-flex;
align-items:center;
justify-content:center;

padding:9px 16px;

border-radius:999px;

background:#FF5C00;
color:#fff;

font-size:11px;
font-weight:800;
letter-spacing:1px;

margin-bottom:16px;}
.ref-videos .ref-name{font-size:34px;
font-weight:900;
line-height:.95;
letter-spacing:-2px;

color:#fff;

margin-bottom:12px;}
.ref-videos .ref-desc{font-size:14px;
line-height:1.6;

color:rgba(255,255,255,.75);}
@media(max-width:991px){
.ref-videos .ref-grid{grid-template-columns:1fr;}
}
@media(max-width:767px){
.ref-videos{padding:90px 18px;}
.ref-videos .ref-videos-head h2{font-size:52px;
letter-spacing:-2px;}
.ref-videos .ref-videos-head p{font-size:15px;
line-height:1.7;}
.ref-videos .ref-video{border-radius:24px;}
.ref-videos .ref-overlay{padding:22px;}
.ref-videos .ref-name{font-size:26px;}
.ref-videos .ref-desc{font-size:13px;}
}

.ref-gallery{position:relative;
padding:140px 22px;
background:#050505;
overflow:hidden;
font-family:'Poppins',sans-serif;}
.ref-gallery:before{content:'';
position:absolute;
top:-260px;
right:-260px;

width:620px;
height:620px;

background:
radial-gradient(circle,#FF5C0014 0%,transparent 72%);

filter:blur(140px);}
.ref-gallery:after{content:'';
position:absolute;
bottom:-260px;
left:-260px;

width:520px;
height:520px;

background:
radial-gradient(circle,#ffffff08 0%,transparent 72%);

filter:blur(120px);}
.ref-gallery .ref-gallery-head{position:relative;
z-index:2;

text-align:center;

max-width:950px;
margin:auto auto 70px;}
.ref-gallery .ref-gallery-head h2{font-size:clamp(46px,5vw,88px);
font-weight:900;
line-height:.92;
letter-spacing:-4px;

color:#fff;

margin-bottom:24px;}
.ref-gallery .ref-gallery-head h2 span{background:#FF5C00;
color:#fff;

padding:4px 16px 10px;
border-radius:10px;

display:inline-block;}
.ref-gallery .ref-gallery-head p{font-size:18px;
line-height:1.8;

color:rgba(255,255,255,.62);

max-width:760px;
margin:auto;}
.ref-gallery .ref-gallery-grid{position:relative;
z-index:2;

max-width:1550px;
margin:auto;

display:grid;
grid-template-columns:
repeat(4,1fr);

grid-auto-rows:260px;

gap:18px;}
.ref-gallery .ref-gallery-item{position:relative;
overflow:hidden;
border-radius:28px;

background:#111;

cursor:pointer;

transition:
transform .45s ease,
box-shadow .45s ease;}
.ref-gallery .ref-gallery-item:hover{transform:
translateY(-10px)
scale(1.01);

box-shadow:
0 35px 80px rgba(0,0,0,.45);

z-index:10;}
.ref-gallery .ref-gallery-item img{width:100%;
height:100%;

display:block;

object-fit:cover;

transition:
transform .9s ease,
filter .5s ease;

filter:
brightness(.82)
contrast(1.05);}
.ref-gallery .ref-gallery-item:hover img{transform:scale(1.08);

filter:
brightness(1)
contrast(1.08);}
.ref-gallery .ref-gallery-item.tall{grid-row:span 2;}
.ref-gallery .ref-gallery-item.wide{grid-column:span 2;}
.ref-popup{position:fixed;
inset:0;

background:rgba(0,0,0,.92);

display:flex;
align-items:center;
justify-content:center;

opacity:0;
visibility:hidden;

transition:.35s ease;

z-index:9999;

padding:40px;}
.ref-popup.active{opacity:1;
visibility:visible;}
.ref-popup img{max-width:92%;
max-height:92vh;

width:auto;
height:auto;

object-fit:contain;

border-radius:24px;

box-shadow:
0 40px 120px rgba(0,0,0,.6);

animation:popupZoom .35s ease;}
@keyframes popupZoom{
from{
transform:scale(.85);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}
.ref-gallery .ref-popup-close{position:absolute;
top:28px;
right:34px;

font-size:52px;
line-height:1;

color:#fff;

cursor:pointer;
font-weight:300;

transition:.25s ease;}
.ref-gallery .ref-popup-close:hover{transform:scale(1.15);
color:#FF5C00;}
@media(max-width:991px){
.ref-gallery .ref-gallery-grid{grid-template-columns:repeat(2,1fr);
grid-auto-rows:220px;}
}
@media(max-width:767px){
.ref-gallery{padding:90px 16px;}
.ref-gallery .ref-gallery-head{margin-bottom:50px;}
.ref-gallery .ref-gallery-head h2{font-size:52px;
letter-spacing:-2px;}
.ref-gallery .ref-gallery-head p{font-size:15px;
line-height:1.7;}
.ref-gallery .ref-gallery-grid{grid-template-columns:1fr;
grid-auto-rows:260px;
gap:14px;}
.ref-gallery .ref-gallery-item,
.ref-gallery .ref-gallery-item.wide,
.ref-gallery .ref-gallery-item.tall{grid-column:auto;
grid-row:auto;
border-radius:22px;}
.ref-popup{padding:20px;}
.ref-gallery .ref-popup-close{top:18px;
right:22px;
font-size:42px;}
}

.web-ref{position:relative;
padding:140px 24px;
background:#fff;
overflow:hidden;
font-family:'Poppins',sans-serif;}
.web-ref:before{content:'';
position:absolute;
top:-220px;
right:-220px;

width:520px;
height:520px;

background:
radial-gradient(circle,#FF5C0010 0%,transparent 72%);

filter:blur(120px);}
.web-ref .web-ref-head{position:relative;
z-index:2;

text-align:center;

max-width:950px;
margin:auto auto 70px;}
.web-ref .web-ref-head h2{font-size:clamp(48px,5vw,92px);
font-weight:900;
line-height:.92;
letter-spacing:-4px;

color:#111;

margin-bottom:24px;}
.web-ref .web-ref-head h2 span{background:#FF5C00;
color:#fff;

padding:4px 16px 10px;
border-radius:10px;

display:inline-block;}
.web-ref .web-ref-head p{font-size:18px;
line-height:1.8;

color:#666;

max-width:760px;
margin:auto;}
.web-ref .web-ref-grid{position:relative;
z-index:2;

max-width:1500px;
margin:auto;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;}
.web-ref .web-card{position:relative;

border-radius:34px;
overflow:hidden;

background:#f4f4f4;

text-decoration:none;

transition:
transform .45s ease,
box-shadow .45s ease;}
.web-ref .web-card:hover{transform:
translateY(-10px);

box-shadow:
0 35px 80px rgba(0,0,0,.12);}
.web-ref .web-card-img{position:relative;
aspect-ratio:16/11;
overflow:hidden;}
.web-ref .web-card-img img{width:100%;
height:100%;

object-fit:cover;

transition:
transform .8s ease,
filter .4s ease;}
.web-ref .web-card:hover img{transform:scale(1.08);

filter:brightness(1.02);}
.web-ref .web-card-content{padding:30px;}
.web-ref .web-tag{display:inline-flex;
align-items:center;
justify-content:center;

padding:9px 16px;

border-radius:999px;

background:#FF5C00;
color:#fff;

font-size:11px;
font-weight:800;
letter-spacing:1px;

margin-bottom:18px;}
.web-ref .web-title{font-size:34px;
font-weight:900;
line-height:.95;
letter-spacing:-2px;

color:#111;

margin-bottom:14px;}
.web-ref .web-text{font-size:15px;
line-height:1.7;

color:#666;

margin-bottom:24px;}
.web-ref .web-btn{display:inline-flex;
align-items:center;
gap:10px;

font-size:12px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;

color:#111;

transition:.3s ease;}
.web-ref .web-card:hover .web-btn{color:#FF5C00;
transform:translateX(6px);}
@media(max-width:991px){
.web-ref .web-ref-grid{grid-template-columns:1fr;}
}
@media(max-width:767px){
.web-ref{padding:90px 18px;}
.web-ref .web-ref-head{margin-bottom:50px;}
.web-ref .web-ref-head h2{font-size:54px;
letter-spacing:-2px;}
.web-ref .web-ref-head p{font-size:15px;
line-height:1.7;}
.web-ref .web-card{border-radius:24px;}
.web-ref .web-card-content{padding:24px;}
.web-ref .web-title{font-size:28px;}
.web-ref .web-text{font-size:14px;}
}
