/*
==========================================================
DIGITAL NATION INN
PREMIUM HERO
Production Version 2.0
==========================================================
*/


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

.dni-hero{

	position:relative;

	padding:110px 0 90px;

	background:
	linear-gradient(135deg,#061427 0%,#081d38 45%,#0a2345 100%);

	overflow:hidden;

	isolation:isolate;

}


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

.hero-grid{

	position:absolute;

	inset:0;

	background-image:

	linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

	linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

	background-size:60px 60px;

	opacity:.35;

	pointer-events:none;

}


/* ==========================================================
   AURORA GLOW
========================================================== */

.hero-glow{

	position:absolute;

	border-radius:50%;

	filter:blur(120px);

	z-index:-1;

}

.hero-glow-1{

	width:520px;

	height:520px;

	left:-160px;

	top:-180px;

	background:#0b5fff55;

	animation:heroFloat 8s ease-in-out infinite;

}

.hero-glow-2{

	width:480px;

	height:480px;

	right:-120px;

	bottom:-140px;

	background:#00d4ff33;

	animation:heroFloat 10s ease-in-out infinite reverse;

}


/* ==========================================================
   BADGE
========================================================== */

.hero-badge{

	display:inline-flex;

	align-items:center;

	gap:10px;

	padding:12px 24px;

	border-radius:100px;

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

	border:1px solid rgba(120,170,255,.25);

	color:#8fc5ff;

	font-size:15px;

	font-weight:700;

	margin-bottom:30px;

	backdrop-filter:blur(15px);

}


/* ==========================================================
   TITLE
========================================================== */

.hero-title{

	font-size:72px;

	font-weight:900;

	line-height:1.05;

	letter-spacing:-2px;

	color:#ffffff;

	margin-bottom:28px;

	text-shadow:0 0 35px rgba(11,95,255,.35);

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.hero-description{

	font-size:20px;

	line-height:1.9;

	max-width:760px;

	color:#c9d7ec;

	margin-bottom:42px;

}


/* ==========================================================
   SEARCH
========================================================== */

.hero-search{

	display:flex;

	gap:18px;

	margin-bottom:40px;

}

.hero-search input{

	height:68px;

	border:none;

	border-radius:18px;

	padding:0 28px;

	font-size:17px;

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

	color:#ffffff;

	backdrop-filter:blur(20px);

	box-shadow:

	0 0 0 1px rgba(255,255,255,.08),

	0 20px 60px rgba(0,0,0,.35);

}

.hero-search input::placeholder{

	color:#9eb7d8;

}

.hero-search input:focus{

	outline:none;

	box-shadow:

	0 0 0 2px rgba(0,153,255,.35),

	0 0 40px rgba(11,95,255,.25);

}

.hero-search .btn{

	min-width:190px;

	border-radius:18px;

}


/* ==========================================================
   ACTIONS
========================================================== */

.hero-actions{

	display:flex;

	flex-wrap:wrap;

	gap:18px;

	margin-bottom:55px;

}


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

.hero-stats{

	display:grid;

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

	gap:20px;

}

.hero-stat{

	padding:26px;

	border-radius:24px;

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

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

	backdrop-filter:blur(16px);

	text-align:center;

	transition:.35s;

}

.hero-stat:hover{

	transform:translateY(-8px);

	box-shadow:

	0 20px 50px rgba(11,95,255,.25);

	border-color:#2f7dff;

}

.hero-stat h3{

	font-size:38px;

	font-weight:900;

	color:#4bb8ff;

	margin-bottom:8px;

}

.hero-stat span{

	font-size:14px;

	color:#d2ddee;

}


/* ==========================================================
   RIGHT CARD
========================================================== */

.hero-login-card{

	position:relative;

	padding:28px;

	border-radius:34px;

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

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

	backdrop-filter:blur(24px);

	box-shadow:

	0 25px 70px rgba(0,0,0,.35);

}


/* ==========================================================
   ILLUSTRATION
========================================================== */

.hero-illustration{

	position:relative;

	margin-bottom:28px;

	border-radius:24px;

	overflow:hidden;

}

.hero-illustration img{

	display:block;

	width:100%;

	border-radius:24px;

	opacity:.94;

	transition:.5s;

}

.hero-illustration::after{

	content:"";

	position:absolute;

	inset:0;

	background:

	linear-gradient(

	to top,

	rgba(6,20,39,.45),

	transparent 60%

	);

}

.hero-login-card:hover .hero-illustration img{

	transform:scale(1.03);

}


/* ==========================================================
   LOGIN
========================================================== */

.login-box h3{

	color:#fff;

	font-size:28px;

	margin-bottom:24px;

}

.login-box input{

	height:60px;

	margin-bottom:18px;

	border:none;

	border-radius:16px;

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

	color:#fff;

}

.login-row{

	display:flex;

	justify-content:space-between;

	align-items:center;

	margin-bottom:20px;

	font-size:14px;

	color:#d4deef;

}

.login-row a{

	color:#69b4ff;

	text-decoration:none;

}

.register-box{

	margin-top:22px;

	text-align:center;

	color:#d3dceb;

}

.register-box a{

	color:#7fc3ff;

	font-weight:700;

	text-decoration:none;

}


/* ==========================================================
   GURUBHAI
========================================================== */

.gurubhai-widget{

	margin-top:34px;

	padding:22px;

	border-radius:22px;

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

	border:1px solid rgba(85,170,255,.18);

	text-align:center;

}

.gb-avatar{

	width:82px;

	height:82px;

	margin:0 auto 18px;

}

.gb-avatar img{

	width:100%;

	height:100%;

	object-fit:contain;

}

.gb-content h4{

	color:#fff;

	margin-bottom:8px;

}

.gb-content p{

	color:#bcd2ea;

	margin-bottom:18px;

}


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

@keyframes heroFloat{

	0%{

		transform:translateY(0);

	}

	50%{

		transform:translateY(-35px);

	}

	100%{

		transform:translateY(0);

	}

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1200px){

	.hero-title{

		font-size:58px;

	}

}

@media(max-width:991px){

	.hero-title{

		font-size:48px;

	}

	.hero-search{

		flex-direction:column;

	}

	.hero-stats{

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

		margin-top:20px;

	}

	.hero-login-card{

		margin-top:30px;

	}

}

@media(max-width:767px){

	.dni-hero{

		padding:80px 0;

	}

	.hero-title{

		font-size:38px;

		line-height:1.15;

	}

	.hero-description{

		font-size:17px;

	}

	.hero-actions{

		flex-direction:column;

	}

	.hero-actions .btn{

		width:100%;

	}

	.hero-stats{

		grid-template-columns:1fr;

	}

}