*, *::before, *::after {
    box-sizing: border-box;
    position: relative;
    padding: 0;
    margin: 0;
}

body, html {
    scroll-behavior: smooth;
}
:target {
  scroll-margin-top: 100px;
}

a { 
    text-decoration: none; 
    color: var(--black-color);
}
img { 
    width: 100%;
    display: block; 
    object-fit: cover;
}


:root {
    --green-color: #CBEB13;
    --black-color: #191919;
    --black-color-a20: #00000033;
    --black-color-a40: #00000066;
    --black-color-a50: #19191980;
    --grey-color: #EFEFEF;
    --dark-grey-color: #AEAEAE;
    --white-color: #FCFCFC;
    --white-color-a10: #FFFFFF1A;
    --white-color-a20: #FFFFFF33;
    --white-color-a30: #FFFFFF4D;
    --white-color-a50: #FCFCFC80;
    --color-bg-quiz: #202020;

    --vw-min: 340px;
    --vw-max: 1440px;
    --pi-min: 10px;
    --pi-max: 50px;
    --fluid: calc((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)));
}


.container {
    max-width: 1440px;
    padding-inline: 50px;
    padding-inline: calc(var(--pi-min) + (var(--pi-max) - var(--pi-min)) * var(--fluid));
    padding-block: 0;
    margin: 0 auto;
}
.container.container--px0 { padding-inline: 0; }


.heading, .text {
    color: var(--black-color);
    letter-spacing: normal;
    font-optical-sizing: auto;
}
.heading { font-family: "Bounded", sans-serif; }
.heading span { color: var(--green-color); }
.heading.heading--1 {
    font-weight: 600;
    font-size: 70px;
/*     font-size: clamp(48px, calc(48px + (70px - 48px) * var(--fluid)), 70px); */
	font-size: clamp(40px, calc(40px + (55px - 40px) * var(--fluid)), 55px);
    line-height: 1;
}
.heading.heading--2 {
    font-weight: 600;
    font-size: 50px;
    font-size: clamp(36px, calc(36px + (50px - 36px) * var(--fluid)), 50px);
    line-height: 1.2;
}
.heading.heading--2 { margin-bottom: 50px; }
.heading.heading--2 span { color: var(--black-color-a50); }
.heading.heading--3 {
    font-weight: 600;
    font-size: 30px;
    font-size: clamp(22px, calc(22px + (30px - 22px) * var(--fluid)), 30px);
    line-height: 1.2;
}
.heading.heading--3 span { color: var(--black-color-a50); }
.text {
    font-family: "Inter", sans-serif;
    line-height: 1.3;
}
.text.text--1 {
    font-weight: 800;
    font-size: 30px;
    font-size: clamp(22px, calc(22px + (30px - 22px) * var(--fluid)), 30px);
}
.text.text--2 {
    font-weight: 600;
    font-size: 30px;
    font-size: clamp(22px, calc(22px + (30px - 22px) * var(--fluid)), 30px);
}
.text.text--3 {
    font-weight: 400;
    font-size: 30px;
    font-size: clamp(22px, calc(22px + (30px - 22px) * var(--fluid)), 30px);
}
.text.text--4 {
    font-weight: 600;
    font-size: 24px;
    font-size: clamp(18px, calc(18px + (24px - 18px) * var(--fluid)), 24px);
}
.text.text--5 {
    font-weight: 500;
    font-size: 24px;
    font-size: clamp(18px, calc(18px + (24px - 18px) * var(--fluid)), 24px);
}
.text.text--6 {
    font-weight: 500;
    font-size: 24px;
    font-size: clamp(18px, calc(18px + (24px - 18px) * var(--fluid)), 24px);
    text-decoration: line-through;
}
.text.text--7 {
    font-weight: 600;
    font-size: 20px;
    font-size: clamp(16px, calc(16px + (20px - 16px) * var(--fluid)), 20px);
}
.text.text--8 {
    font-weight: 500;
    font-size: 20px;
    font-size: clamp(16px, calc(16px + (20px - 16px) * var(--fluid)), 20px);
}
.text.text--9 {
    font-weight: 400;
    font-size: 20px;
    font-size: clamp(16px, calc(16px + (20px - 16px) * var(--fluid)), 20px);
}
.text.text--10 {
    font-weight: 500;
    font-size: 16px;
    font-size: clamp(14px, calc(14px + (16px - 14px) * var(--fluid)), 16px);
}
.text.text--11 {
    font-weight: 500;
    font-size: 14px;
    font-size: clamp(12px, calc(12px + (14px - 12px) * var(--fluid)), 14px);
}

.text-center { text-align: center; }


.color-black { color: var(--black-color); }
.color-white { color: var(--white-color); }
.color-grey  { color: var(--grey-color);  }
.color-dark-grey  { color: var(--dark-grey-color);  }
.color-green { color: var(--green-color); }
.bg-black { background-color: var(--black-color); }
.bg-white { background-color: var(--white-color); }
.bg-grey  { background-color: var(--grey-color);  }
.bg-green { background-color: var(--green-color); }


.button {
    display: flex;
    align-items: center;
    max-width: max-content;
    height: 70px;
    border: 0;
    padding: 10px 20px;
    border-radius: 90px;
    background-color: transparent;
    color: var(--black-color); 
	white-space: nowrap;
	flex-wrap: nowrap;
    cursor: pointer;
    transition: filter 0.2s ease;
    will-change: filter;
}
.button .svg { 
    position: relative;
    margin-left: 30px;
}
.button .svg::before {
    content: '';
    position: absolute;
    inset: -10px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--white-color);
    z-index: 0;
}
.button svg {
    position: relative;
    z-index: 1;
}
.button svg path {
    transform-origin: center;
    transition: transform 0.2s ease;
    will-change: transform;
}
.button:hover { filter: brightness(0.9); }
.button:hover svg path { transform: rotate(-45deg); }
.button.button--green { background-color: var(--green-color); }
.button.button--grey { background-color: var(--grey-color); }
.button.button--white { background-color: var(--white-color); }
.button.button--white .svg::before { background-color: var(--green-color); }



/* .hover-3d-wrapper {
	perspective: 900px;
	perspective-origin: 50% 50%;
}
.hover-3d {
	position: relative;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform, box-shadow, filter;
	transform: translateZ(0);
	transition:
		transform 220ms cubic-bezier(.2,.8,.2,1),
		box-shadow 220ms cubic-bezier(.2,.8,.2,1),
		filter 220ms cubic-bezier(.2,.8,.2,1);
	box-shadow:
		0 10px 20px rgba(0,0,0,.18),
		0 2px 6px rgba(0,0,0,.12);
	filter: saturate(1) contrast(1);
}
.hover-3d::before {
	content:"";
	position:absolute;
	inset:-2px;
	border-radius: inherit;
	pointer-events:none;
	background:
		radial-gradient(120% 80% at 20% 15%,
			rgba(255,255,255,.55) 0%,
			rgba(255,255,255,.18) 20%,
			rgba(255,255,255,0) 60%);
	opacity: .25;
	transform: translateZ(1px);
	transition: opacity 220ms cubic-bezier(.2,.8,.2,1);
	mix-blend-mode: screen;
}
.hover-3d:hover {
	z-index: 1;
	transform:
		translateY(-3px)
		rotateX(7deg)
		rotateY(-10deg)
		translateZ(18px);
	box-shadow:
		0 22px 45px rgba(0,0,0,.28),
		0 10px 18px rgba(0,0,0,.16);
	filter: saturate(1.05) contrast(1.03);
}
.hover-3d:hover::before {
	opacity: .55;
} */





.number {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 50%;
    max-width: 86px;
    max-height: 86px;
    height: 100%;
    aspect-ratio: 1;
    background-color: var(--green-color);
    transition: background-color 0.2s ease;
    will-change: background-color;
}
.number span { 
    transition: color 0.2s ease;
    will-change: color;
}





.accordion-list {
    display: flex; gap: 20px;
    flex-direction: column;
	padding-right: 10px;
}
.accordion { 
    border-bottom: 1px solid var(--white-color); 
}
.accordion header {
    display: grid; gap: 30px;
    grid-template-columns: max-content 1fr max-content; 
    align-items: center;
    cursor: pointer;
    padding-block: 15px;
}
.accordion header .svg svg { 
    transform: rotate(90deg);
    transition: transform 0.2s ease;
    will-change: transform; 
}
.accordion header .svg::before {
    content: '';
    position: absolute;
    inset: -10px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--green-color);
    z-index: 0;
    transition: background-color 0.2s ease;
    will-change: background-color;
}
.accordion header:hover .svg svg { transform: rotate(0deg); }
.accordion.open header .svg::before { background-color: var(--black-color); }
.accordion.open header .svg svg path { stroke: var(--green-color);}
.accordion.open header .svg svg { transform: rotate(-90deg); }
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    padding-block: 0;
    opacity: 0;
    transition: 
        grid-template-rows 0.2s ease,
        padding-block 0.2s ease,
        opacity 0.2s ease;
    will-change: 
        grid-template-rows,
        padding-block,
        opacity;
}
.accordion-content > * { 
    overflow: hidden; 
    padding-left: 130px;
}
.accordion.open .accordion-content {
    grid-template-rows: 1fr;
    padding-block: 10px 20px;
    opacity: 1;
}


li svg { min-width: 16px; }





.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    opacity: 1;
    background-color: transparent;
    border: 2px solid var(--green-color);
}
.swiper-pagination-bullet-active {
    background-color: var(--green-color);
}


.swiper-button-lock {
    display: block !important;
}



pre { background-color: white; }