/*
Theme Name: BRTOK Brasil
Theme URI: https://brtok.com/
Author: DETOFI
Description: BRTOK – Tokenização do Brasil
Version: 1.0.1
Text Domain: brtok-com
*/

:root{
	--blue:#002776;
	--blue2:#001d59;

	--green:#009c3b;
	--green2:#007a2e;
	--green-dark:#005b24;

	--yellow:#ffdf00;
	--yellow-dark:#d9b900;

	--cream:#fffdf3;
	--paper:#ffffff;

	--text:#17231c;
	--muted:#627069;

	--line:rgba(0,156,59,.14);

	--max:1320px;

	--shadow:0 20px 60px rgba(0,80,35,.11);
}


/* =========================================================
   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,253,243,.95);

	border-top:4px solid var(--green);
	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;
}


/* BRAND */

.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(--green);
}

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

.ts-brand-text small{
	display:block;
	color:#66736b;
	font-weight:700;
	letter-spacing:.04em;
}


/* NAVIGATION */

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

	font-weight:800;
	font-size:13px;
	text-transform:uppercase;
}

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

.ts-menu{
	display:none;

	border:1px solid var(--green);
	border-radius:10px;

	background:transparent;
	color:var(--green);

	font-size:24px;

	width:44px;
	height:44px;
}


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

.ts-hero{
	min-height:700px;
	display:flex;
	align-items:center;
	overflow:hidden;
	position:relative;
}

.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(--green);

	font-weight:900;
	letter-spacing:.06em;
	text-transform:uppercase;

	font-size:14px;
}

.ts-kicker::before,
.ts-eyebrow::before{
	content:"";

	display:inline-block;

	width:22px;
	height:4px;

	margin-right:9px;

	vertical-align:middle;

	background:var(--yellow);

	border-radius:10px;
}

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

	margin:18px 0 24px;

	color:var(--green);

	letter-spacing:-.04em;
}

.ts-hero h1 span{
	display:block;
	color:var(--blue);
}

.ts-lead{
	font-size:19px;
	max-width:600px;
	color:#3c4941;
}


/* =========================================================
   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:.2s ease;
}

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

.ts-btn-primary{
	background:var(--green);
	color:#fff;

	box-shadow:inset 0 -3px 0 var(--yellow);
}

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

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

	color:var(--green);

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

.ts-btn-ghost:hover{
	background:var(--green);
	color:#fff;
}


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

.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(0,90,40,.14)
	);
}


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

.ts-features{
	position:relative;
	margin-top:-58px;
	z-index:3;
}

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

	border:1px solid rgba(255,255,255,.95);

	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(--green);

	text-transform:uppercase;

	margin-bottom:4px;
}

.ts-feature i{
	font-style:normal;
	font-size:27px;
	color:var(--green);
}

.ts-feature:nth-child(2) i{
	color:var(--yellow-dark);
}

.ts-feature:nth-child(3) i{
	color:var(--blue);
}

.ts-feature:nth-child(4) i{
	color:var(--green2);
}


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

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

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

.ts-center{
	text-align:center;
	max-width:850px;
	margin:auto;
}

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

	color:var(--green);

	margin:10px 0 22px;

	letter-spacing:-.03em;
}

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

.ts-intro{
	font-size:18px;
	color:var(--muted);
}


/* =========================================================
   GRID
   ========================================================= */

.ts-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:24px;
	margin-top:48px;
}


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

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

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

	padding:32px;

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

	position:relative;
	overflow:hidden;
}

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

	position:absolute;
	top:0;
	left:0;

	width:100%;
	height:3px;

	background:linear-gradient(
		90deg,
		var(--green),
		var(--yellow),
		var(--blue)
	);
}

.ts-card h3{
	color:var(--green);
	font-size:23px;
	margin:5px 0 12px;
}

.ts-card-num{
	color:var(--blue);
	font-weight:900;
	font-size:13px;
}


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

.ts-pillars{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
	margin-top:48px;
}

.ts-pillar{
	background:var(--green);
	color:#fff;

	border-radius:18px;
	padding:30px;

	position:relative;
	overflow:hidden;
}

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

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

	position:absolute;
	top:0;
	left:0;

	width:100%;
	height:4px;

	background:var(--yellow);
}

.ts-pillar:nth-child(3)::before{
	background:var(--blue);
}

.ts-pillar h3{
	font-size:21px;
	color:#fff;
}

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


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

.ts-cta{
	background:linear-gradient(
		120deg,
		var(--green),
		var(--green-dark)
	);

	color:#fff;

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

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

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

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


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

.ts-footer{
	background:#004b25;

	color:#dcece2;

	padding:38px 0;

	border-top:3px solid var(--yellow);
}

.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;
}


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

.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:var(--cream);

		padding:25px;

		flex-direction:column;

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

	.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:130%;
	}

	.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;
	}
}


/* =========================================================
   TOKENIZACAO.COM – 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;
	}

	.ts-hero .ts-reveal-left,
	.ts-hero .ts-reveal-right{
		opacity:1 !important;
		transform:none !important;
		transition:none !important;
	}

	.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-lead{
		width:100%;
		max-width:530px;

		font-size:19px;
		line-height:1.55;
	}

	.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(0,90,40,.15)
		);
	}
}


/* =========================================================
   TOKENIZACAO.COM – 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;
}

.cz-poster-backdrop{
	position:absolute;
	inset:0;

	background:rgba(0,35,18,.84);

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


/* POSTER */

.cz-poster-window{
	position:relative;

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

	max-width:480px;
	max-height:90vh;

	z-index:2;

	animation:brPosterIn .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,.50);
}


/* 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:#fff;
	color:#17231c;

	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(--green);
	color:#fff;
}


/* TIMER */

.cz-poster-timer{
	position:absolute;

	top:12px;
	left:12px;

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

	width:40px;
	height:40px;

	background:var(--green);

	color:#fff;

	border:2px solid var(--yellow);
	border-radius:50%;

	font-size:17px;
	font-weight:900;

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

	z-index:4;
}


/* ANIMATION */

@keyframes brPosterIn{

	from{
		opacity:0;
		transform:scale(.94);
	}

	to{
		opacity:1;
		transform:scale(1);
	}
}


/* POPUP MOBILE */

@media(max-width:700px){

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

	.cz-poster-backdrop{
		background:rgba(0,0,0,.92);
	}

	.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;
	}

	.cz-poster-timer{
		position:fixed;
		top:12px;
		left:12px;
	}
}
@media(max-width:900px){

    .ts-visual{
        order:1;
        width:100%;
        height:390px;
        overflow:hidden;
    }

    .ts-visual img{
        width:120%;
        transform:translateY(20px);
    }
}
@media(max-width:560px){

    .ts-visual{
        height:315px;
    }

    .ts-visual img{
        width:130%;
        transform:translateY(20px);
    }
}