/* ==========================================================
   PAGE BOOK DEMO
========================================================== */

:root{

	--primary:#2563EB;
	--secondary:#0EA5E9;

	--dark:#0F172A;
	--dark2:#1E293B;

	--text:#475569;
	--border:#E2E8F0;

	--white:#FFFFFF;

}

/* ==========================================================
   COMMON
========================================================== */

.demo-container{

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

	margin:auto;

	padding-left:25px;
	padding-right:25px;

}

section{

	position:relative;

}

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

.book-demo-hero{

	padding:80px 0;

	background:
	linear-gradient(
		180deg,
		#F8FBFF 0%,
		#FFFFFF 100%
	);

	overflow:hidden;

}

.book-demo-hero:before{

	content:"";

	position:absolute;

	width:550px;
	height:550px;

	top:-200px;
	right:-150px;

	border-radius:50%;

	background:
	radial-gradient(
		circle,
		rgba(37,99,235,.08),
		transparent
	);

}

.demo-hero-grid{

	display:grid;

	grid-template-columns:
	1.1fr
	520px;

	gap:50px;

	align-items:center;

}

/* ==========================================================
   LEFT
========================================================== */

.demo-badge{

	display:inline-flex;

	align-items:center;

	gap:10px;

	padding:10px 18px;

	border-radius:999px;

	font-size:13px;

	font-weight:700;

	color:#2563EB;

	background:
	rgba(37,99,235,.08);

	border:
	1px solid rgba(37,99,235,.10);

}

.pulse-dot{

	width:8px;
	height:8px;

	border-radius:50%;

	background:#22C55E;

}

.demo-left h1{

	margin:22px 0 18px;

	font-size:54px;

	line-height:1.08;

	font-weight:800;

	color:#0F172A;

	max-width:700px;

}

.hero-description{

	font-size:17px;

	line-height:1.9;

	color:#64748B;

	max-width:700px;

	margin-bottom:30px;

}

.trust-points{

	display:grid;

	grid-template-columns:
	1fr;

	gap:14px;

	margin-bottom:35px;

}

.trust-item{

	display:flex;

	align-items:center;

	gap:12px;

	font-size:15px;

	font-weight:600;

	color:#334155;

}

.trust-item span{

	color:#2563EB;

	font-weight:800;

}

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

.hero-buttons{

	display:flex;

	flex-wrap:wrap;

	gap:14px;

	margin-bottom:40px;

}

.btn-demo{

	height:56px;

	padding:0 28px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:16px;

	font-size:15px;

	font-weight:800;

	color:#fff;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#0EA5E9
	);

	box-shadow:
	0 18px 40px rgba(37,99,235,.18);

}

.btn-whatsapp{

	height:56px;

	padding:0 28px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:16px;

	font-size:15px;

	font-weight:700;

	color:#fff;

	background:
	linear-gradient(
		135deg,
		#059669,
		#10B981
	);

}

.btn-call{

	height:56px;

	padding:0 28px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:16px;

	font-size:15px;

	font-weight:700;

	color:#0F172A;

	border:1px solid #E2E8F0;

	background:#fff;

}

/* ==========================================================
   STATS
========================================================== */

.mini-stats{

	display:grid;

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

	gap:18px;

	max-width:650px;

}

.stat-box{

	padding:20px;

	border-radius:18px;

	background:#fff;

	border:1px solid #E2E8F0;

	text-align:center;

}

.stat-box strong{

	display:block;

	font-size:28px;

	font-weight:800;

	color:#2563EB;

	margin-bottom:6px;

}

.stat-box span{

	font-size:14px;

	font-weight:600;

	color:#64748B;

}

/* ==========================================================
   FORM CARD
========================================================== */

.demo-form-card{

	background:#fff;

	border-radius:26px;

	padding:32px;

	border:1px solid #E2E8F0;

	box-shadow:
	0 30px 80px rgba(15,23,42,.08);

}

.form-top{

	margin-bottom:25px;

	text-align:center;

}

.form-top h2{

	font-size:28px;

	font-weight:800;

	color:#0F172A;

	margin-bottom:8px;

}

.form-top p{

	color:#64748B;

	font-size:14px;

}

/* ==========================================================
   FLUENT FORM
========================================================== */

.demo-form-card input,
.demo-form-card textarea,
.demo-form-card select{

	border-radius:14px !important;

	border:1px solid #E2E8F0 !important;

	min-height:54px !important;

	font-size:14px !important;

}

.demo-form-card textarea{

	min-height:130px !important;

}

.demo-form-card button,
.demo-form-card .ff-btn-submit{

	width:100% !important;

	height:56px !important;

	border:none !important;

	border-radius:14px !important;

	font-size:15px !important;

	font-weight:800 !important;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#0EA5E9
	) !important;

}

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

.demo-features{

	padding:80px 0;

	background:#fff;

}

.section-title{

	text-align:center;

	margin-bottom:45px;

}

.section-title h2{

	font-size:40px;

	font-weight:800;

	color:#0F172A;

}

.feature-grid{

	display:grid;

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

	gap:25px;

}

.why-card{

	padding:30px;

	border-radius:24px;

	background:#fff;

	border:1px solid #E2E8F0;

	transition:.3s;

}

.why-card:hover{

	transform:translateY(-6px);

	box-shadow:
	0 25px 60px rgba(15,23,42,.08);

}

.card-icon{

	font-size:32px;

	margin-bottom:15px;

}

.why-card h3{

	font-size:19px;

	margin-bottom:12px;

	color:#0F172A;

}

.why-card p{

	font-size:14px;

	line-height:1.8;

	color:#64748B;

}

/* ==========================================================
   TRUST
========================================================== */

.trust-section{

	padding:70px 0;

	background:
	linear-gradient(
		135deg,
		#08111F,
		#0F172A
	);

}

.trust-grid{

	display:grid;

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

	gap:20px;

}

.trust-card{

	padding:35px;

	border-radius:24px;

	text-align:center;

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

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

}

.trust-card h3{

	font-size:42px;

	color:#fff;

	margin-bottom:10px;

}

.trust-card span{

	color:#CBD5E1;

}

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

.bottom-cta{

	padding:80px 0;

	background:#fff;

}

.bottom-cta-box{

	padding:60px;

	border-radius:30px;

	text-align:center;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#0EA5E9
	);

}

.bottom-cta-box h2{

	color:#fff;

	font-size:42px;

	font-weight:800;

	margin-bottom:15px;

}

.bottom-cta-box p{

	color:#fff;

	font-size:16px;

	max-width:700px;

	margin:auto;

	margin-bottom:30px;

}

.bottom-buttons{

	display:flex;

	justify-content:center;

	gap:15px;

	flex-wrap:wrap;

}

.bottom-buttons a{

	height:56px;

	padding:0 30px;

	border-radius:16px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	font-weight:800;

	background:#fff;

	color:#0F172A;

}

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

@media(max-width:1100px){

	.demo-hero-grid{

		grid-template-columns:
		1fr;

	}

	.feature-grid{

		grid-template-columns:
		1fr 1fr;

	}

	.trust-grid{

		grid-template-columns:
		1fr 1fr;

	}

}

@media(max-width:768px){

	.book-demo-hero{

		padding:45px 0;

	}

	.demo-container{

		padding-left:18px;
		padding-right:18px;

	}

	.demo-left h1{

		font-size:34px;

	}

	.hero-description{

		font-size:15px;

	}

	.hero-buttons{

		flex-direction:column;

	}

	.btn-demo,
	.btn-whatsapp,
	.btn-call{

		width:100%;

	}

	.mini-stats{

		grid-template-columns:
		1fr;

	}

	.feature-grid{

		grid-template-columns:
		1fr;

	}

	.trust-grid{

		grid-template-columns:
		1fr 1fr;

	}

	.bottom-cta-box{

		padding:35px 20px;

	}

	.bottom-cta-box h2{

		font-size:30px;

	}

	.section-title h2{

		font-size:30px;

	}

}







/* ==========================================
   PAGE BOOK DEMO JS CLASSES
========================================== */

.why-card,
.trust-card{

	opacity:0;

	transform:
	translateY(30px);

	transition:
	opacity .6s ease,
	transform .6s ease;

}

.reveal-visible{

	opacity:1 !important;

	transform:
	translateY(0) !important;

}

.demo-glow{

	box-shadow:
	0 0 0 0 rgba(37,99,235,.30),
	0 0 40px rgba(37,99,235,.25);

}

.btn-demo,
.btn-whatsapp,
.btn-call{

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

}