/* VB Slider – frontend */
.vbs{
	--vbs-accent:#ff6a00;
	--vbs-from:#f9b400;
	--vbs-to:#ff5a14;
	--vbs-hero-text:#fff;
	--vbs-hero-h:430px;
	--vbs-gap:2px;
	--vbs-max:1440px;
	--vbs-card-bg:#fff;
	--vbs-card-border:#e4e4e4;
	--vbs-text:#1e1e1e;
	position:relative;
	max-width:var(--vbs-max);
	margin:0 auto;
	color:var(--vbs-text);
	line-height:1.4;
}
.vbs--font,.vbs--font *{font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.vbs *,.vbs *::before,.vbs *::after{box-sizing:border-box}
.vbs button{font:inherit}

/* ---------- HERO ---------- */
.vbs-hero{position:relative;overflow:hidden;background:#fff;padding:14px 0 0}
.vbs-hero__inner{position:relative;display:block;height:var(--vbs-hero-h);text-decoration:none;color:inherit}
.vbs-hero__shape{
	position:absolute;left:3%;right:7%;top:9%;bottom:12%;
	border-radius:clamp(20px,4vw,48px);
	background:linear-gradient(98deg,var(--vbs-from) 0%,var(--vbs-to) 100%);
	transform:rotate(-4.5deg);
	transform-origin:50% 50%;
	transition:translate .8s cubic-bezier(.2,.7,.2,1);
	will-change:translate;
}
.vbs-hero__shape--img{background:none;background-image:none;background-size:100% 100%;background-repeat:no-repeat;background-position:center;transform:none;border-radius:0;left:1%;right:3%;top:2%;bottom:2%}
.vbs-hero__title{
	position:absolute;left:17%;top:12%;margin:0;
	text-align:left;color:var(--vbs-hero-text);
	font-weight:700;font-size:clamp(34px,7.4vw,108px);line-height:.96;letter-spacing:-.01em;
	transition:translate .8s cubic-bezier(.2,.7,.2,1);
	white-space:nowrap;
}
.vbs-hero__line{display:block}
.vbs-hero__line:nth-child(2){margin-left:.72em}
.vbs-hero__line:nth-child(3){margin-left:1.5em;font-weight:400}
.vbs-hero__person{position:absolute;right:3%;bottom:0;top:0;width:36%;display:flex;align-items:flex-end;justify-content:center}
.vbs-hero__photo{
	display:block;height:100%;width:auto;max-width:none;object-fit:contain;object-position:bottom center;
	filter:drop-shadow(0 12px 28px rgba(0,0,0,.18));
	transition:translate .8s cubic-bezier(.2,.7,.2,1);
	will-change:translate;
}
.vbs-hero__caption{
	position:absolute;right:7%;bottom:12%;text-align:right;color:var(--vbs-hero-text);
	text-shadow:0 2px 12px rgba(0,0,0,.25);pointer-events:none;
	transition:translate .8s cubic-bezier(.2,.7,.2,1);
	white-space:nowrap;
}
.vbs-hero__name{display:block;font-weight:800;font-size:clamp(20px,2.8vw,40px);line-height:1.05}
.vbs-hero__role{display:block;font-weight:500;font-size:clamp(12px,1.25vw,18px);margin-top:.25em}

/* ---------- CARDS ---------- */
.vbs-cards{position:relative;padding:0 0 6px}
.vbs-viewport{overflow:hidden;padding:6px 0 18px}
.vbs-track{
	display:flex;gap:var(--vbs-gap);
	transition:transform .55s cubic-bezier(.22,.61,.36,1);
	touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.vbs-track.is-dragging{transition:none;cursor:grabbing}
.vbs-card{
	position:relative;flex:0 0 20%;display:flex;gap:18px;
	padding:34px 26px 46px 26px;min-height:212px;
	background:var(--vbs-card-bg);border:1px solid var(--vbs-card-border);border-top:4px solid transparent;
	text-decoration:none;color:var(--vbs-text);cursor:pointer;
	box-shadow:0 1px 3px rgba(0,0,0,.05);
	transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
	-webkit-tap-highlight-color:transparent;
}
.vbs-card:focus-visible{outline:3px solid var(--vbs-accent);outline-offset:-3px}
.vbs-card.is-active{border-top-color:var(--vbs-accent);box-shadow:0 14px 34px rgba(0,0,0,.10);z-index:1}
.vbs-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.13)}
.vbs-card__icon{flex:0 0 54px;width:54px;height:54px;color:var(--vbs-accent);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.vbs-card__icon svg,.vbs-card__icon img{display:block;width:100%;height:100%;object-fit:contain}
.vbs-card:hover .vbs-card__icon{transform:scale(1.08) rotate(-3deg)}
.vbs-card__body{display:block;min-width:0}
.vbs-card__title{display:block;font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.15;letter-spacing:.01em;margin:0 0 12px}
.vbs-card__text{display:block;font-size:15.5px;line-height:1.55;color:#2b2b2b}
.vbs-card__arrow{position:absolute;right:22px;bottom:16px;width:22px;height:22px;color:var(--vbs-accent);transition:transform .35s}
.vbs-card__arrow svg{display:block;width:100%;height:100%}
.vbs-card:hover .vbs-card__arrow{transform:translateX(6px)}

/* nav */
.vbs-nav{display:flex;align-items:center;justify-content:center;gap:28px;padding:14px 0 10px}
.vbs-btn{
	width:58px;height:58px;border:1px solid #e2e2e2;border-radius:6px;background:#f6f6f6;color:var(--vbs-accent);
	display:grid;place-items:center;cursor:pointer;padding:0;margin:0;
	transition:background .25s,color .25s,transform .25s,box-shadow .25s;
}
.vbs-btn svg{width:26px;height:26px}
.vbs-btn:hover{background:var(--vbs-accent);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.15)}
.vbs-btn:active{transform:translateY(0)}
.vbs-btn:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none;background:#f6f6f6;color:var(--vbs-accent)}
.vbs-btn:focus-visible{outline:3px solid var(--vbs-accent);outline-offset:2px}
.vbs-dots{display:flex;align-items:center;gap:22px;padding:0 34px}
.vbs-dot{width:18px;height:18px;border-radius:50%;border:0;padding:0;margin:0;background:#dedede;cursor:pointer;transition:background .3s,transform .3s}
.vbs-dot:hover{background:#c4c4c4}
.vbs-dot.is-active{background:var(--vbs-accent);transform:scale(1.18)}
.vbs-dot:focus-visible{outline:3px solid var(--vbs-accent);outline-offset:2px}

/* ---------- entrance animations ---------- */
.vbs:not(.is-in) .vbs-hero__line,
.vbs:not(.is-in) .vbs-hero__person,
.vbs:not(.is-in) .vbs-card{opacity:0}
.vbs.is-in .vbs-hero__line{animation:vbsUp .8s cubic-bezier(.2,.7,.2,1) both}
.vbs.is-in .vbs-hero__line:nth-child(1){animation-delay:.05s}
.vbs.is-in .vbs-hero__line:nth-child(2){animation-delay:.18s}
.vbs.is-in .vbs-hero__line:nth-child(3){animation-delay:.31s}
.vbs.is-in .vbs-hero__person{animation:vbsIn 1s cubic-bezier(.2,.7,.2,1) both .15s}
.vbs.is-in .vbs-card{animation:vbsUp .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.25s + var(--i,0) * .09s)}
@keyframes vbsUp{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes vbsIn{from{opacity:0;translate:30px 0}to{opacity:1;translate:0 0}}
.vbs.is-in .vbs-hero__person{animation-fill-mode:forwards}

@media (prefers-reduced-motion:reduce){
	.vbs *{animation:none!important;transition:none!important}
	.vbs:not(.is-in) .vbs-hero__line,.vbs:not(.is-in) .vbs-hero__person,.vbs:not(.is-in) .vbs-card{opacity:1}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
	.vbs-hero__inner{height:calc(var(--vbs-hero-h) * .8)}
	.vbs-card{padding:26px 20px 40px;gap:14px;min-height:190px}
	.vbs-card__title{font-size:17px}
	.vbs-card__text{font-size:14.5px}
}
@media (max-width:600px){
	.vbs-hero{padding-top:8px}
	.vbs-hero__inner{height:auto;padding:36px 16px 0}
	.vbs-hero__shape{left:-6%;right:-6%;top:4%;bottom:2%;border-radius:22px;transform:rotate(-2deg)}
	.vbs-hero__title{position:relative;left:auto;top:auto;width:100%;text-align:left;font-size:clamp(38px,12vw,56px);padding:0 4px}
	.vbs-hero__line:nth-child(2){margin-left:.35em}
	.vbs-hero__line:nth-child(3){margin-left:.7em}
	.vbs-hero__person{position:relative;right:auto;top:auto;width:100%;height:auto;margin-top:12px}
	.vbs-hero__photo{height:auto;width:min(78%,320px)}
	.vbs-hero__caption{right:7%;bottom:9%}
	.vbs-hero__name{font-size:22px}
	.vbs-hero__role{font-size:12px;white-space:normal;max-width:180px;margin-left:auto}
	.vbs-nav{gap:14px}
	.vbs-btn{width:48px;height:48px}
	.vbs-dots{gap:12px;padding:0 10px}
	.vbs-dot{width:14px;height:14px}
}