@font-face {
	font-family: "Inter";
	src: url('/fonts/inter-v18-latin-ext-300-webfont.woff2') format('woff2'),
		 url('/fonts/inter-v18-latin-ext-300-webfont.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}




@font-face {
        font-family: "Inter";
        src: url('/fonts/inter-v18-latin-ext-regular-webfont.woff2') format('woff2'),
			 url('/fonts/inter-v18-latin-ext-regular-webfont.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

@font-face {
        font-family: "Inter";
        src: url('/fonts/inter-v18-latin-ext-500-webfont.woff2') format('woff2'),
			 url('/fonts/inter-v18-latin-ext-500-webfont.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
	}






:root {

	/*------------------Main settings------------------*/
	color-scheme: dark;

	--page-width: min(1260px, 90vw);
	--color-background: #08090A;
	--color-primary-text: #B6B6B6;
	--color-secondary-text: #EDEBE5;
	--color-offwhite: #F7F8F8;
	--color-background-accent: #212121;
	--color-heading: #212121;
	--color-primary: #125ACB;
	--color-primary-1: #3368d3;
	--color-primary-2: #4977db;
	--color-primary-3: #5c86e3;
	--color-primary-4: #6e95ea;
	--color-primary-5: #80a4f1;

	
    
	/*------------------Spacing------------------*/

	/* Section */

		
	/* Content */
	--space-extrasmall: 0.5rem;
	--space-xxs: clamp(0.8rem, 0.213vw + 0.732rem, 1rem);
	--space-xs: clamp(1rem, 0.532vw + 0.83rem, 1.5rem);
	--space-s: clamp(1.5rem, 0.532vw + 1.33rem, 2rem);
	--space-m: clamp(2rem, 0.532vw + 1.83rem, 2.5rem);
	--space-l: clamp(2.5rem, 0.532vw + 2.33rem, 3rem);
	--space-xl: clamp(3rem, 0.532vw + 2.83rem, 3.5rem);
	--space-xxl: clamp(3.5rem, 0.532vw + 3.33rem, 4rem);
	--space-xxxl: clamp(4.5rem, 1.064vw + 4.16rem, 5.5rem);
	--space-60: clamp(4rem, 2.128vw + 3.319rem, 6rem);
	--space-100: clamp(4rem, 6.383vw + 1.957rem, 10rem);
	--space-50: clamp(3rem, 2.128vw + 2.319rem, 5rem);
	--section-padding: clamp(3rem, 6.383vw + 0.957rem, 9rem);
	
	/*------------------Typography------------------*/ 

	/* Heading */
	--font-heading-1: clamp(3.4rem, 2.442vw + 2.423rem, 5.5rem);
	--font-heading-2: clamp(3rem, 0.532vw + 2.83rem, 3.5rem);
	--font-heading-3: clamp(2rem, 0.213vw + 1.932rem, 2.2rem);



	/* Body */
	--font-xxxs: clamp(1.2rem, 0.106vw + 1.166rem, 1.3rem);
	--font-xxs: clamp(1.3rem, 0.106vw + 1.266rem, 1.4rem);
	--font-xs: clamp(1.4rem, 0.106vw + 1.366rem, 1.5rem);
	--font-s: clamp(1.4rem, 0.213vw + 1.332rem, 1.6rem);
	--font-m: clamp(1.6rem, 0.213vw + 1.532rem, 1.8rem);
	--font-l: clamp(1.8rem, 0.213vw + 1.732rem, 2rem);
	--font-xl: clamp(2rem, 0.213vw + 1.932rem, 2.2rem);
	--font-xxl: clamp(2.2rem, 0.213vw + 2.132rem, 2.4rem);
	/* Transitions */
	--trans-basic: 0.3s ease;





	--color-typography-primary: #fff;
	--color-typogrpahy-secondary: #242429;
	--page-width: min(1260px, 90vw);
	--color-input-label: #9E9E9E;
	--color-nav-background: #131316;
	--border-radius-button: 3rem;
	--color-radio-wrapper-background: #0D0E0F;
	--noise-background-size: clamp(50rem, 21.277vw + 43.191rem, 70rem);
	--noise-background-url: url('../assets/noise2.webp');
}


html {
font-size: 62.5%;
background: var(--color-background);
scroll-behavior: smooth !important;
}


body {
	font-family: Inter;
	font-weight: 400;
	margin: 0;
	padding: 0;
	font-size: var(--font-xs);
	line-height: 1.6;
	color: var(--color-primary-text);
	letter-spacing: -0.01em;
	background-image: var(--noise-background-url);
	background-size: var(--noise-background-size);
}


body * {
	box-sizing: border-box;
	margin: 0;
}



section {
	display: flex;
	justify-content: center;
	/* Pierwszy padding - padding-block: clamp(2rem, 4.255vw + 0.638rem, 6rem); */
	padding-block: clamp(3rem, 6.383vw + 0.957rem, 9rem);
	scroll-margin: 100px;
}

.container {
	width: var(--page-width);
	display: flex;	
	align-items: center;
}


a {
	text-decoration: none;
	color: var(--color-default-text)
}


h1, h2, h3, h4, h5, h6, h7, h8 {

	font-weight: 500;
	line-height: 1.2;
	margin: 0;
}


h1 {
	font-size: var(--font-heading-1);
	letter-spacing: -0.05em;
}

h2 {
	font-size: var(--font-heading-2);
	background: #F7F8F8;
	background: linear-gradient(to right, #F7F8F8 45%, #919292 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h3 {
	font-weight: 400;
	font-size: var(--font-heading-3);
}


ul {
	padding: 0;
}

.text-nbsp {
	
	text-wrap: nowrap;
	width: fit-content;
}




.header--nav-item a {
    transition: .3s ease;
}

.header--nav-item:hover, .header--nav-item:focus-within {
    color: #fff;
}


.header--nav-wrapper {
    display: flex !important;
    align-items: center;
    list-style: none;
    column-gap: 3.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-xxs);
}


.header--nav-button {
    color: var(--color-offwhite);
    white-space: nowrap;
    background: linear-gradient(-40deg, var(--color-primary), var(--color-primary) , #777, #333);
    background-size: 400%;
    background-position: 99% 50%;
    border-radius: 0.6em;
    padding: 0.3em 1em;
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.3);
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    transition: 0.5s ease all;
    font-size: var(--font-xxxs);
}

.header--nav-button:hover, 
.header--nav-button:focus-within, 
.header--nav-button:active, 
.header--nav-button:focus {
    background-position: 0% 0%;
}



.header--nav-button:before {
    content: '';
    background: rgb(255,255,255);
    background: radial-gradient(ellipse at 60% 0%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 35%);
    background-repeat: no-repeat;
    background-size: 120%;
    background-position-y: -0px;
    position: absolute;
    inset: 0;
}

.header--sidebar {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-l);
    justify-content: start;
    padding-top: var(--space-100);
    padding-left: var(--space-l);
    font-size: var(--font-heading-3);
}

.header--sidebar-wrapper li{ 
    list-style: none;
}

.value-prop--feature {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    padding-block: 0.8em;
    padding-inline: 1.34em;
	width: fit-content;
}

.value-prop--feature-heading {
    font-size: var(--font-xs);
    color: #D0D6E0;
    white-space: nowrap;
}

.faq--answer ul {  
	padding-left: 2rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font-size: var(--font-xs);
  }

.faq--answer ol {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font-size: var(--font-xs);
}


.element--loader {
    position: absolute;
    z-index: 10;
    top: 50%; 
    left: 50%;
     transform: translate(-50%, -50%); 
    pointer-events: none;
}

/* 
@media (min-width: 1001px) {

		body {	
		background-size: 100vw;
		}
} */



@media (max-width: 1000px) {

    .header--nav-wrapper {
        display: none !important;
    }

	.value-prop--feature {
        padding-inline: 1.1em;
    }


}