/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
a{text-decoration:none;color:inherit}
.container{max-width:1240px;margin:0 auto;padding:0 1.25rem}
.section{padding:2rem 0}
.kicker{color:#BABABA;margin-bottom:.5rem}
.section-lead{margin-bottom:1.4rem; color:#BABABA;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;}
.header-inner{
	height:72px;
	backdrop-filter: blur(6px);
 }
.brand{font-weight:700}
.main-nav{display:none;gap:1.3125rem;align-items:center}
.main-nav a{color:#E9EAF2;font-size:1rem}
.nav-toggle{border:none;padding:0}
@media(min-width:600px){.main-nav{display:flex !important;}.nav-toggle{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.1rem;border-radius:20rem;border:1px solid transparent;font-weight:700; font-size: 1.25rem;transition: all .3s ease-in-out; cursor: pointer;}
.btn-primary{color:#E9EAF2; border:1px solid #E9EAF2; background: transparent;}
.btn-primary:hover{background:#E9EAF2; color: #000250;}

/* ---------- Hero ---------- */
.hero{padding:2rem 0}
.hero .tagline{display:inline-block;border:1px solid #e5e7eb;border-radius:.6rem;padding:.35rem .6rem;color:#374151;font-size:.85rem;margin-bottom:.75rem}
.hero .lead{color:#4b5563}
.hero .cta{margin-top:1rem}

/* ---------- Cards ---------- */
.cards{display:grid;gap:2.5rem}
.grid-3{grid-template-columns:1fr}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card-emoji{font-size:1.6rem;}
.card h3{margin:.2rem 0 .4rem;font-size:1.06rem}
.card p{color:#BABABA; margin-top: 0.5rem;}

/* ---------- Steps ---------- */
.steps{display:grid;gap:1rem}
.grid-4{grid-template-columns:1fr}
@media(min-width:900px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Work ---------- */
.work-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:900px){.work-grid{grid-template-columns:repeat(3,1fr)}}
.work-item{background:#E9EAF2;border:1px solid #e5e7eb;border-radius:1rem;padding:1rem}
.work-item h3{margin:.2rem 0 .4rem;font-size:1.06rem}
.work-item p{color:#4b5563;font-size:.98rem;line-height:1.6}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:900px){.contact-grid{grid-template-columns:1.2fr .8fr}}
.hint{color:#6b7280;font-size:.9rem;margin-top:.6rem}
.fact{font-size:.95rem;margin-bottom:.4rem}
.thanks{display:none;text-align:center;padding:1rem;border:1px solid #e5e7eb;border-radius:.75rem;margin-top:1rem}

/* ---------- Footer ---------- */
.footer-inner{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:space-between}
.footer-nav{display:flex;gap:1rem}
@media(min-width:600px){.footer-inner{flex-direction:row}}


/* New design 2025 */

body {
	color: #E9EAF2;
	font-family: "Zalando Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 300;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
h1, .h1 {
	font-size: clamp(3rem, 9vw, 7rem);
	line-height: 1;
	font-weight: 700;
	letter-spacing: -4%;
}
h2, .h2 {
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	line-height: 1.2;
	font-weight: 700;
	margin-top: 0;
	letter-spacing: -4%;
}
h3, .h3 {
	font-size: clamp(1.25rem, 2vw, 1.875rem);
	line-height: 1.2;
	font-weight: 700;
	margin-top: 0;
	letter-spacing: -2.5%;
}
h4, .h4 {
	font-size: 1.25rem;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1;
	font-weight: 700;
	margin-top: 0;
	letter-spacing: -2%;
}
p {
	margin-top: 0;
}
b {
	font-weight: 700;
}

.semibold {
	font-weight: 600;
}
.bold {
	font-weight: 700;
}
.blue-bg {
	background-color: #000250;
}
.d-flex {
	display: flex;
}
.justify-between {
	justify-content: space-between;
}
.gap-2 {
	gap: 0.5rem;
}
.gap-6 {
	gap: 1.5rem;
}
.gap-10 {
	gap: 2.5rem;
}
.mb-2 {
	margin-bottom: 0.5rem;
}
.mb-4 {
	margin-bottom: 1rem !important;
}
.mb-6 {
	margin-bottom: 1.5rem !important;
}
.mb-16 {
	margin-bottom: 2rem;
}
.w-100 {
	width: 100%;
}

.items-center {
	align-items: center;
}
.main-nav .nav-link {
	position: relative;
}
.main-nav .nav-link::after {
	background: #E9EAF2;
	content: "";
	display: block;
	height: 1px;
	position: absolute;
	right: 0;
	transition: all .3s ease-in-out;
	width: 0;
	bottom: -0.25rem;
}
.main-nav .nav-link:hover::after {
	left: 0;
	right: auto;
	width: 100%;
}
.hero-bg {
	background-image: url('./assets/images/hero-bg.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
	height: 244px;
	margin-bottom: 5rem;
	transition: all .3s;
}
.icon-arrow {
	background-image: url('./assets/images/icon-arrow.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 24px;
	height: 22px;
	display:  inline-block;
}
.card{
	border-top:2px solid #183EEB; 
	padding:0.75rem 0;
}
.banner-image {
	margin-top: 3.5rem;
}
.banner-image img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 400px;
}
.step {
	border-top:2px solid #183EEB;
	padding:1.375rem 0 3.125rem;
	gap: 2rem;
}
.step:last-child {
	padding-bottom: 0;
}
.step-num {
	font-size: 3rem;
	line-height: 1;
	font-weight:700;
	margin-bottom:.5rem;
	letter-spacing: -4%;
}
.contact-form{
	
}
.contact-form label {
	display:block;
	font-size:.875rem;
	color:#BABABA;
	margin-bottom:.75rem;
}
.contact-form input,
.contact-form textarea {
	background-color: #010029;
	color: #E9EAF2;
	width:100%;
	margin-top:.3rem;
	padding:1.25rem;
	font-size:1rem;
	border: none;
	resize: none;
}
.contact-aside {
	padding-top:2rem;
}
.site-footer {
	padding:4rem 0;
}
.nav-toggle {
  width: 40px;
  height: 30px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle .icon {
	position: relative;
	width: 40px;
  	display: block;
}
.nav-toggle .icon::before {
	display: block;
	content: '';
	width: 40px;
	height: 1px;
	background-color: #E9EAF2;
	position: absolute;
	bottom: 4px;
	transition: all .3s;
}
.nav-toggle .icon::after {
	display: block;
	content: '';
	width: 40px;
	height: 1px;
	background-color: #E9EAF2;
	position: absolute;
	top: 4px;
	transition: all .3s;
}

.nav-toggle.open .icon::before {
	transform: rotate(45deg);
	bottom: 0;
}
.nav-toggle.open .icon::after {
	transform: rotate(-45deg);
	top: -1px;
}

@media(max-width:599px) {
	.main-nav {
		position: absolute;
		padding: 1rem 1.5rem;
    	top: 72px;
    	right: 0;
    	text-align: right;
	}
	.main-nav.show {
		display: block;
	}
	.main-nav .nav-link {
		display: block;
		padding-block: 0.5rem;
	}
	.hero {
	  padding: 6.5rem 0;
	}
	.header-inner {
	  	position: absolute;
	  	width: 100%;
	  	align-items: start;
	  	padding-top: 18px;
	  	transition: all .3s;
	}
	.header-inner.open {
		height: 300px;
	}
	.section {
		scroll-margin-top: 3rem;
	}
	.main-nav .nav-link::after {
		bottom: 0.125rem;
	}
}

@media(max-width:1024px) {
	.icon-arrow {
		width: 18px;
		height: 14px;
	}
}

@media(min-width:1025px) {
	.hero {
		padding:4rem 0;
	}
	.section {
		padding:4rem 0;
	}
	.hero-bg {
		height: 488px;
	}
	.d-md-flex {
		display: flex;
	}
	.w-md-50 {
		width: 50%;
	}
	.ps-32 {
		padding-left: 8rem;
	}
	.mb-16 {
		margin-bottom: 4rem;
	}
	.step-num {
		font-size: 6.1875rem;
	}
	.section {
		scroll-margin-top: 2rem;
	}
}