/*
Theme Name: Tokenizacija RS
Theme URI: https://tokenizacija.rs/
Author: DETOFI
Description: SRBTOK – Tokenizacija Srbije
Version: 1.0.2
Text Domain: tokenizacija-rs
*/


/* =========================================================
   SRBTOK – SERBIA COLORS
   ========================================================= */

:root{
	--blue:#0C4076;
	--blue2:#082F59;
	--blue-deep:#052440;

	--red:#C6363C;
	--red-dark:#A9272D;

	--white:#FFFFFF;
	--cream:#F7F9FC;
	--paper:#FFFFFF;

	--text:#17212D;
	--muted:#5E6874;

	--line:rgba(12,64,118,.13);

	--max:1320px;

	--shadow:
		0 20px 60px rgba(8,47,89,.10);
}


/* =========================================================
   BASE
   ========================================================= */

*{
	box-sizing:border-box;
}

html{
	scroll-behavior:smooth;
}

body{
	margin:0;

	background:var(--cream);
	color:var(--text);

	font-family:Inter,Arial,sans-serif;

	line-height:1.6;
}

a{
	text-decoration:none;
	color:inherit;
}

img{
	max-width:100%;
	height:auto;
}

.ts-shell{
	width:min(var(--max),calc(100% - 48px));
	margin:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.ts-header{
	height:96px;

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

	border-top:4px solid var(--red);
	border-bottom:1px solid var(--line);

	position:sticky;
	top:0;

	z-index:50;

	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
}

.ts-header-inner{
	height:100%;

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

	gap:30px;
}

.ts-brand{
	display:flex;
	align-items:center;

	gap:12px;
}

.ts-brand img{
	width:62px;
	height:62px;

	object-fit:contain;
}

.ts-brand-text strong{
	font-size:24px;

	letter-spacing:.01em;

	color:var(--blue);
}

.ts-brand-text strong span{
	color:var(--red);
}

.ts-brand-text small{
	display:block;

	color:#78818A;

	font-weight:700;

	letter-spacing:.04em;
}

.ts-nav{
	display:flex;
	align-items:center;

	gap:30px;

	font-weight:800;

	font-size:13px;

	text-transform:uppercase;
}

.ts-nav a{
	position:relative;

	transition:color .2s ease;
}

.ts-nav a:hover{
	color:var(--red);
}

.ts-nav a::after{
	content:"";

	position:absolute;

	left:0;
	right:100%;
	bottom:-7px;

	height:2px;

	background:var(--red);

	transition:right .25s ease;
}

.ts-nav a:hover::after{
	right:0;
}

.ts-menu{
	display:none;

	border:1px solid var(--red);

	border-radius:10px;

	background:transparent;

	color:var(--blue);

	font-size:24px;

	width:44px;
	height:44px;

	cursor:pointer;
}


/* =========================================================
   HERO
   ========================================================= */

.ts-hero{
	min-height:700px;

	display:flex;
	align-items:center;

	overflow:hidden;

	position:relative;

	background:
		radial-gradient(
			circle at 78% 45%,
			rgba(12,64,118,.055),
			transparent 38%
		),
		linear-gradient(
			135deg,
			#FFFFFF 0%,
			#F7F9FC 65%,
			#FFFFFF 100%
		);
}

.ts-hero::before{
	content:"";

	position:absolute;

	left:0;
	top:0;
	bottom:0;

	width:4px;

	background:
		linear-gradient(
			180deg,
			var(--red) 0%,
			var(--red) 33.33%,
			var(--blue) 33.33%,
			var(--blue) 66.66%,
			#FFFFFF 66.66%,
			#FFFFFF 100%
		);
}

.ts-hero-inner{
	width:min(1500px,100%);

	margin:auto;

	display:grid;

	grid-template-columns:43% 57%;

	align-items:center;

	min-height:700px;
}

.ts-copy{
	padding:
		70px 20px
		70px max(40px,calc((100vw - var(--max))/2));
}

.ts-kicker,
.ts-eyebrow{
	color:var(--blue);

	font-weight:900;

	letter-spacing:.06em;

	text-transform:uppercase;

	font-size:14px;
}

.ts-hero h1{
	font-size:clamp(54px,5vw,82px);

	line-height:.94;

	margin:18px 0 24px;

	color:var(--blue);

	letter-spacing:-.04em;
}

.ts-hero h1 span{
	display:block;

	color:var(--red);
}

.ts-lead{
	font-size:19px;

	max-width:600px;

	color:#39434D;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.ts-buttons{
	display:flex;

	gap:14px;

	flex-wrap:wrap;

	margin-top:34px;
}

.ts-btn{
	display:inline-flex;

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

	padding:15px 24px;

	border-radius:7px;

	font-weight:900;

	text-transform:uppercase;

	font-size:13px;

	transition:
		background .2s ease,
		color .2s ease,
		border-color .2s ease,
		transform .2s ease;
}

.ts-btn:hover{
	transform:translateY(-2px);
}

.ts-btn-primary{
	background:var(--blue);

	color:#FFFFFF;
}

.ts-btn-primary:hover{
	background:var(--red);
}

.ts-btn-ghost{
	border:1px solid var(--blue);

	color:var(--blue);

	background:rgba(255,255,255,.65);
}

.ts-btn-ghost:hover{
	background:var(--blue);

	color:#FFFFFF;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.ts-visual{
	height:700px;

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

	position:relative;
}

.ts-visual img{
	width:110%;

	max-width:none;

	transform:translateX(-2%);

	filter:
		drop-shadow(
			0 30px 35px rgba(8,47,89,.13)
		);
}


/* =========================================================
   FEATURES
   ========================================================= */

.ts-features{
	position:relative;

	margin-top:-58px;

	z-index:3;
}

.ts-feature-grid{
	background:rgba(255,255,255,.94);

	border:1px solid rgba(12,64,118,.08);

	box-shadow:var(--shadow);

	border-radius:22px;

	display:grid;

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

	padding:25px 20px;
}

.ts-feature{
	padding:10px 26px;

	border-right:1px solid var(--line);
}

.ts-feature:last-child{
	border:0;
}

.ts-feature b{
	display:block;

	color:var(--blue);

	text-transform:uppercase;

	margin-bottom:4px;
}

.ts-feature i{
	font-style:normal;

	font-size:27px;

	color:var(--red);
}


/* =========================================================
   SECTIONS
   ========================================================= */

.ts-section{
	padding:100px 0;
}

.ts-section-white{
	background:rgba(255,255,255,.72);
}

.ts-center{
	text-align:center;

	max-width:850px;

	margin:auto;
}

.ts-title{
	font-size:clamp(36px,4vw,58px);

	line-height:1.05;

	color:var(--blue);

	margin:10px 0 22px;

	letter-spacing:-.03em;
}

.ts-title span{
	color:var(--red);
}

.ts-intro{
	font-size:18px;

	color:var(--muted);
}


/* =========================================================
   CARDS
   ========================================================= */

.ts-grid{
	display:grid;

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

	gap:24px;

	margin-top:48px;
}

.ts-card{
	background:rgba(255,255,255,.88);

	border:1px solid var(--line);

	border-radius:18px;

	padding:32px;

	box-shadow:
		0 10px 30px rgba(8,47,89,.055);

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		border-color .25s ease;
}

.ts-card:hover{
	transform:translateY(-4px);

	border-color:rgba(198,54,60,.25);

	box-shadow:
		0 18px 42px rgba(8,47,89,.10);
}

.ts-card h3{
	color:var(--blue);

	font-size:23px;

	margin:5px 0 12px;
}

.ts-card-num{
	color:var(--red);

	font-weight:900;

	font-size:13px;
}


/* =========================================================
   TOKENIZATION PILLARS
   ========================================================= */

.ts-pillars{
	display:grid;

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

	gap:18px;

	margin-top:48px;
}

.ts-pillar{
	background:var(--blue);

	color:#FFFFFF;

	border-radius:18px;

	padding:30px;

	box-shadow:
		0 14px 32px rgba(8,47,89,.12);
}

.ts-pillar:nth-child(even){
	background:var(--blue2);
}

.ts-pillar h3{
	font-size:21px;

	color:#FFFFFF;
}

.ts-pillar p{
	color:#E6EEF8;
}


/* =========================================================
   CTA
   ========================================================= */

.ts-cta{
	background:
		linear-gradient(
			120deg,
			var(--blue-deep) 0%,
			var(--blue2) 50%,
			var(--blue) 100%
		);

	color:#FFFFFF;

	position:relative;

	overflow:hidden;
}

.ts-cta::after{
	content:"";

	position:absolute;

	right:0;
	top:0;
	bottom:0;

	width:7px;

	background:var(--red);
}

.ts-cta .ts-title,
.ts-cta .ts-eyebrow{
	color:#FFFFFF;
}

.ts-cta .ts-title span{
	color:#FFFFFF;
}

.ts-cta .ts-intro{
	color:#DCE9F8;
}


/* =========================================================
   FOOTER
   ========================================================= */

.ts-footer{
	background:var(--blue-deep);

	color:#D8E4F2;

	padding:38px 0;

	border-top:4px solid var(--red);
}

.ts-footer-inner{
	display:flex;

	justify-content:space-between;

	gap:20px;

	align-items:center;
}

.ts-footer img{
	width:52px;
}

.ts-footer-brand{
	display:flex;

	align-items:center;

	gap:12px;

	font-weight:900;

	color:#FFFFFF;
}


/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */

.ts-reveal-left,
.ts-reveal-right,
.ts-reveal-up{
	opacity:0;

	transition:.8s ease;
}

.ts-reveal-left{
	transform:translateX(-35px);
}

.ts-reveal-right{
	transform:translateX(35px);
}

.ts-reveal-up{
	transform:translateY(28px);
}

.ts-visible{
	opacity:1;

	transform:none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

	.ts-header{
		height:76px;
	}

	.ts-shell{
		width:min(100% - 28px,var(--max));
	}

	.ts-brand img{
		width:48px;
		height:48px;
	}

	.ts-brand-text strong{
		font-size:19px;
	}

	.ts-brand-text small{
		display:none;
	}

	.ts-menu{
		display:block;
	}

	.ts-nav{
		display:none;

		position:absolute;

		top:76px;
		left:0;
		right:0;

		background:#FFFFFF;

		padding:25px;

		flex-direction:column;

		border-bottom:1px solid var(--line);

		box-shadow:
			0 18px 35px rgba(8,47,89,.10);
	}

	.ts-nav.open{
		display:flex;
	}

	.ts-hero,
	.ts-hero-inner{
		min-height:auto;
	}

	.ts-hero-inner{
		display:flex;

		flex-direction:column;
	}

	.ts-visual{
		order:1;

		width:100%;

		height:390px;

		overflow:hidden;
	}

	.ts-visual img{
		width:120%;

		transform:none;
	}

	.ts-copy{
		order:2;

		padding:42px 28px 110px;

		width:100%;
	}

	.ts-hero h1{
		font-size:50px;
	}

	.ts-features{
		margin-top:-65px;
	}

	.ts-feature-grid{
		grid-template-columns:1fr 1fr;
	}

	.ts-feature:nth-child(2){
		border-right:0;
	}

	.ts-feature{
		border-bottom:1px solid var(--line);
	}

	.ts-feature:nth-child(3),
	.ts-feature:nth-child(4){
		border-bottom:0;
	}

	.ts-grid,
	.ts-pillars{
		grid-template-columns:1fr 1fr;
	}

	.ts-section{
		padding:75px 0;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:560px){

	.ts-brand-text strong{
		font-size:17px;
	}

	.ts-visual{
		height:315px;
	}

	.ts-visual img{
		width:140%;
	}

	.ts-copy{
		padding-left:22px;

		padding-right:22px;
	}

	.ts-hero h1{
		font-size:43px;
	}

	.ts-lead{
		font-size:16px;
	}

	.ts-feature-grid,
	.ts-grid,
	.ts-pillars{
		grid-template-columns:1fr;
	}

	.ts-feature{
		border-right:0;

		border-bottom:
			1px solid var(--line) !important;
	}

	.ts-feature:last-child{
		border-bottom:0 !important;
	}

	.ts-buttons{
		flex-direction:column;
	}

	.ts-btn{
		width:100%;
	}

	.ts-footer-inner{
		flex-direction:column;

		text-align:center;
	}
}


/* =========================================================
   TOKENIZACIJA.RS – HERO DESKTOP
   ========================================================= */

@media(min-width:901px){

	.ts-hero{
		min-height:700px;

		overflow:hidden;
	}

	.ts-hero-inner{
		width:min(1500px,calc(100% - 80px));

		margin:0 auto;

		display:grid;

		grid-template-columns:46% 54%;

		align-items:center;

		min-height:700px;
	}


	/* HERO WITHOUT SLIDE ANIMATION */

	.ts-hero .ts-reveal-left,
	.ts-hero .ts-reveal-right{
		opacity:1 !important;

		transform:none !important;

		transition:none !important;
	}


	/* LEFT */

	.ts-copy{
		width:100% !important;

		min-width:0 !important;

		padding:
			65px 35px 65px 0 !important;

		position:relative;

		z-index:3;
	}

	.ts-kicker{
		margin:0 0 14px;
	}

	.ts-hero h1{
		margin:0 0 28px;

		font-size:
			clamp(52px,4.25vw,74px);

		line-height:.94;

		letter-spacing:-.045em;

		width:100%;

		max-width:660px;
	}

	.ts-hero h1 span{
		display:block;

		color:var(--red);
	}

	.ts-lead{
		width:100%;

		max-width:530px;

		font-size:19px;

		line-height:1.55;
	}


	/* RIGHT HERO IMAGE */

	.ts-visual{
		width:100%;

		min-width:0;

		height:700px;

		display:flex;

		align-items:center;

		justify-content:center;

		position:relative;

		z-index:2;

		transform:none !important;
	}

	.ts-visual img{
		display:block;

		width:112%;

		max-width:none;

		height:auto;

		transform:
			translateX(-2%) !important;

		filter:
			drop-shadow(
				0 30px 35px rgba(8,47,89,.13)
			);
	}
}


/* =========================================================
   TOKENIZACIJA.RS – POSTER POPUP
   ========================================================= */

.cz-popup-open{
	overflow:hidden;
}

.cz-poster-popup{
	position:fixed;

	inset:0;

	display:flex;

	align-items:center;

	justify-content:center;

	padding:25px;

	background:transparent;

	opacity:0;

	visibility:hidden;

	z-index:999999;

	transition:
		opacity .25s ease,
		visibility .25s ease;
}

.cz-poster-popup.is-active{
	opacity:1;

	visibility:visible;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.cz-poster-backdrop{
	position:absolute;

	inset:0;

	background:
		rgba(4,22,40,.84);

	backdrop-filter:blur(5px);

	-webkit-backdrop-filter:blur(5px);
}


/* =========================================================
   COUNTDOWN – IF USED
   ========================================================= */

.cz-poster-countdown{
	position:relative;

	z-index:3;

	width:220px;

	height:220px;

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

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

	border:
		3px solid var(--red);

	border-radius:50%;

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

	transition:
		opacity .35s ease,
		transform .35s ease;
}

.cz-poster-countdown.is-hidden{
	opacity:0;

	transform:scale(.8);

	pointer-events:none;
}

.cz-countdown-label{
	margin-bottom:5px;

	color:var(--blue);

	font-size:15px;

	font-weight:900;

	letter-spacing:.08em;
}

.cz-countdown-number{
	color:var(--red);

	font-size:76px;

	font-weight:900;

	line-height:1;

	letter-spacing:-.05em;
}

.cz-countdown-number:not(:empty){
	text-align:center;
}


/* =========================================================
   POSTER WINDOW
   ========================================================= */

.cz-poster-window{
	position:relative;

	display:flex;

	align-items:center;

	justify-content:center;

	max-width:480px;

	max-height:90vh;

	z-index:2;

	animation:
		czPosterIn .35s ease both;
}

.cz-poster-window img{
	display:block;

	width:auto;

	max-width:100%;

	height:auto;

	max-height:90vh;

	border-radius:5px;

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


/* =========================================================
   CLOSE
   ========================================================= */

.cz-poster-close{
	position:absolute;

	top:-17px;

	right:-17px;

	width:44px;

	height:44px;

	display:flex;

	align-items:center;

	justify-content:center;

	padding:0;

	background:#FFFFFF;

	color:var(--blue-deep);

	border:0;

	border-radius:50%;

	font-size:29px;

	font-weight:400;

	line-height:1;

	cursor:pointer;

	box-shadow:
		0 5px 20px rgba(0,0,0,.25);

	z-index:5;
}

.cz-poster-close:hover{
	background:var(--red);

	color:#FFFFFF;
}


/* =========================================================
   TIMER
   ========================================================= */

.cz-poster-timer{
	position:absolute;

	top:12px;

	left:12px;

	display:flex;

	align-items:center;

	justify-content:center;

	width:40px;

	height:40px;

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

	color:var(--red);

	border:
		2px solid rgba(198,54,60,.18);

	border-radius:50%;

	font-size:17px;

	font-weight:900;

	box-shadow:
		0 4px 14px rgba(0,0,0,.18);

	z-index:4;
}


/* =========================================================
   POSTER ANIMATION
   ========================================================= */

@keyframes czPosterIn{

	from{
		opacity:0;

		transform:scale(.94);
	}

	to{
		opacity:1;

		transform:scale(1);
	}
}


/* =========================================================
   POSTER MOBILE
   ========================================================= */

@media(max-width:700px){

	.cz-poster-popup{
		padding:8px;
	}

	.cz-poster-backdrop{
		background:
			rgba(2,12,24,.93);
	}

	.cz-poster-countdown{
		width:180px;

		height:180px;
	}

	.cz-countdown-number{
		font-size:62px;
	}

	.cz-countdown-label{
		font-size:13px;
	}

	.cz-poster-window{
		width:100%;

		height:100dvh;

		max-width:none;

		max-height:100dvh;

		padding:6px;
	}

	.cz-poster-window img{
		width:auto;

		max-width:100%;

		height:auto;

		max-height:
			calc(100dvh - 12px);

		border-radius:0;
	}

	.cz-poster-close{
		position:fixed;

		top:12px;

		right:12px;

		width:44px;

		height:44px;

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

		z-index:10;
	}

	.cz-poster-timer{
		position:fixed;

		top:12px;

		left:12px;
	}
}