:root{
	--n:#12324a;
	--b:#1d5576;
	--g:#f1b63f;
	--c:#df6248;
	--bg:#fffaf2;
	--m:#66737e;
	--l:#e8e0d7
}

*{
	box-sizing:border-box
}

body{
	margin:0;
	font-family:Arial,sans-serif;
	color:#1d2935;
	line-height:1.65
}

.w{
	max-width:1100px;
	margin:auto;
	padding:0 22px
}

header{
	background:var(--n);
	color:#fff;
	padding:18px 0
}

.nav{
	display:flex;
	justify-content:space-between;
	align-items:center
}

.brand{
	font-weight:900;
	letter-spacing:.08em
}

nav a{
	color:#fff;
	text-decoration:none;
	margin: 0px 20px;
	transition: 1s ease;
}
nav a:hover{
	color:black;
	text-decoration:none;
	background: lightgray;
	padding: 10px 5px;
	border-radius: 10px;
	transition: 1s ease;
}

.hero{
	padding:75px 0;
	background:linear-gradient(135deg,var(--bg),#fff 60%,#eef7f4)
}

.hg{
	display:grid;
	grid-template-columns:1.2fr .8fr;gap:42px;
	align-items:center
}

.k{
	color:var(--c);
	font-size:.8rem;
	text-transform:uppercase;
	letter-spacing:.14em;
	font-weight:900
}

h1{
	font-size:clamp(3rem,8vw,5.7rem);
	line-height:.94;
	letter-spacing:-.05em;color:var(--n);margin:.2em 0
}

h2{
	font-size:2.25rem;
	line-height:1.1;
	color:var(--n)
}

.lead{
	font-size:1.2rem;
	color:#40505d
}

.logo{
	background:#fff;
	border:1px solid var(--l);
	border-radius:10px;
	padding:0px;
	text-align:center;
	box-shadow:0 20px 50px #12324a18;
	transition: 1s ease;
}
.logo:hover{
	transition: 1s ease;
	transform: scale(1.05);
}
.logo img{
	max-width:100%;
	max-height:100%
}

section{
	padding:58px 0
}

.soft{
	background:#f7f9fa
}

.grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px
}

.card{
	border:1px solid var(--l);
	border-radius:20px;
	padding:23px;
	background:#fff;
	transition: 1s ease;
}
.card:hover{
	transition: 1s ease;
	transform: scale(1.05);
}

.card h3{
	color:var(--n)
}

.org{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:12px
}
.org div{
	transition: 1s ease;
	border:1px solid var(--l);
	padding:18px;
	border-radius:16px;
	font-weight:800;
	color:var(--n)}.call{background:linear-gradient(135deg,var(--n),var(--b));
	color:#fff;
	border-radius:28px;
	padding:34px;
}
.org div:hover{
	transition: 1s ease;
	transform: scale(1.05);
}

.call h2{color:#fff}.btn{display:inline-block;background:var(--g);color:var(--n);font-weight:900;text-decoration:none;padding:14px 20px;border-radius:12px}
footer{background:#0c283d;color:#cad7e0;padding:40px 0}footer strong{color:#fff}@media(max-width:780px){.hg,.grid,.org{grid-template-columns:1fr}nav{display:none}.hero{padding:48px 0}}

.btn{
	transition: 0.5s ease;
}
.btn:hover{
	background: var(--l);
	transition: 0.5s ease;
	border-radius: 10px;
	transform: scale(1.05);
}