/* RESET */
* { 
	margin:0;
	padding:0;
	box-sizing: border-box;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
input, select, textarea, button { font-size: inherit; font-family: inherit; border: 0; background: none; }
button { cursor: pointer; }

a { text-decoration: none; }
p { margin-bottom: 1rem; line-height: 140%; }
p:last-child { margin-bottom:0; }
/* END OF RESET */


@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy-regular.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy-medium.ttf');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy-semibold.ttf');
    font-weight: 600;
    font-style: normal;
}



:root {
  --fioletoviy: #5133F5;
  --goluboy:  	#35B6FC;
  --siniy:  	#36187D;
  
}

html { font-family: 'Gilroy';  font-size: 20px; }
body { min-width: 320px; overflow: hidden; color: white; }

h1 { font-size: 4.6rem; font-weight: 600; line-height: 94%;  margin-bottom: 2rem; letter-spacing: 2%; }
h2 { font-size: 3.2rem; font-weight: 600; line-height: 100%; margin-bottom: 2rem; letter-spacing: 2%; }
h3 { font-size: 2.1rem; font-weight: 600; line-height: 110%; margin-bottom: 3rem; letter-spacing: 2%; text-align: center; }

button, a.rating_link { 
	font-weight: 500;
	line-height: 100%;
	min-width: 16rem; 
	padding: 0 3rem;
	height: 3.3rem;
	text-align: center; 
	border-radius: 0.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
	overflow: hidden;
	position: relative;
	border: none;
}

button::before,
	a.rating_link::before { content: ""; position: absolute; z-index: 1; height: 100%; width: 100%; background: var(--siniy); border-radius: 0.6rem;    box-sizing: border-box; }

button::after,
	a.rating_link::after{ 
	content: "";
    position: absolute;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
	left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
    width: 140%;
    height: 0;
    padding-top: 140%;
    background: var(--goluboy);
    border-radius: 50%;
    opacity: 0;
    z-index: 2; 
}
button:hover::after,
	a.rating_link:hover::after { transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);    opacity: 1;} 


#step0 a.rating_link {  color: var(--siniy); }
#step0 a.rating_link::before { background: white; }
#step0 a.rating_link:hover { color: white; }



button span,
	a.rating_link span { position: relative; z-index: 5; }

button sup {
    right: 0.6rem;
    top: 0.6rem;
    width: 0.4rem;
    height: 0.4rem;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    z-index: 5;
	content: "";
    position: absolute;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

h1 small { font-size: 39%; font-weight: normal; display: block; margin-bottom: -1rem; }
h1 span { text-transform: lowercase; }


p small { display: block; margin-top: 1rem; font-size: 0.7rem; }


.wrapper { margin: 0 auto; max-width: 1680px; padding: 1.5rem 2rem;  position: relative; }




#grid { background: url('images2026/bg.webp') center center / cover no-repeat; height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 1; }
#grid::before { content: ''; display: block; width: 100%; height: 100%; background: url('images2026/bg_grid.png') 0 0;  animation: bg_move 1500ms linear infinite;  }
@keyframes bg_move {
	from { background-position: 0px 0px; }
	to {  background-position: 50px 50px; }
}

header { position: absolute; width: 100%; z-index: 10; }
header .wrapper  {  }
header article { background: white; display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 2rem; border-radius: 0.6rem; }
header img#logo { height: 1.3rem; z-index: 3; position: relative; top: -0.1rem; }
header a { color: var(--siniy); font-size: 0.8rem; transition: color 300ms; }
header a:hover { color: var(--goluboy); }
header a br { display: none; }



body,
	#grid,
	section { height: 100vh; height: 100dvh; }

section { padding-top: 6rem; padding-bottom: 3.5rem; display: flex; align-items: center; position: absolute; width: 100%; }
section .wrapper { padding-top: 0; padding-bottom: 0; }

section	 { display: flex; flex-direction: column; gap: 2rem; justify-content: center; z-index: 5; }
section .wrapper { display: flex; gap: 3rem; width: 100%; justify-content: space-between; }


.two_cols .wrapper { justify-content: space-between;  }

.two_cols article { display: flex; flex-direction: column; gap: 4rem; justify-content: center; max-width: 700px; padding: 2rem 0; } 
.two_cols p { font-size: 1.1rem; line-height: 125%;  letter-spacing: 2%; }
.two_cols form { margin: 2rem 0 0 0; }

.rating { border: solid 1px white; border-radius: 0.6rem; padding: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; /**/ }
.rating > div { padding: 0 0.5rem; font-size: 0.9rem; font-weight: 500; line-height: 110%; }
a.rating_link {
	height: 2.8rem;
	min-width: 13rem;
	font-size: 0.9rem;
}



.two_cols .rating1 { display: none; }
.two_cols .rating1 .rating { width: 100%; align-self: initial; justify-content: space-between; }

.two_cols aside { display: flex; justify-content: end; align-items: center; }

.two_cols aside { height: 100%; }
.two_cols aside > div { height: 100%; aspect-ratio: 1/1; position: relative;  }

.glass { 	
	background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(1.3rem);
    backdrop-filter: blur(1.3rem);
	box-shadow: 1rem 2rem 4rem 0px rgba(38, 23, 73, 0.1);
	
	border-radius: 3rem;
	outline: 1px solid rgba(255, 255, 255, 0.6);
	outline-offset:-1px;
	padding: 2rem;
}

.two_cols aside > div > div { aspect-ratio: 1/1; border-radius: 2rem; overflow: hidden; display: flex; align-items: center; position: relative; }
.two_cols aside img,
	.two_cols aside video { display: block; width: 100%; }





section .wrapper, .popup .wrapper { display: flex;  align-items: center;  justify-content: center; }
section .wrapper { z-index: 10; }

section article { position: relative; z-index: 1; }
section .wrapper { align-items: center; display: flex;  }

nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
nav a {
	background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(30px);
	padding: 1.2rem; 
	border-radius: 1rem; 
	position: relative; top: 0; right: 0; 
	border: solid 1px rgba(255, 255, 255, 0.10);
	aspect-ratio: 1/1;
	font-weight: 500;
	font-size: 1.4rem;
	display: flex; 
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: top 1s,  backdrop-filter 3s linear; 
}
section.show nav a {  backdrop-filter: blur(30px); }


nav a::before { content: ''; display: block; position: absolute; top: 7%; left: 7%; width: 20%; aspect-ratio: 1/1; background-position: 0 0; background-size: cover; }
nav a.neoclassic::before 	{ background-image: url('images2026/neoclassic.svg'); }
nav a.ardeco::before 		{ background-image: url('images2026/ar-deco.svg'); }
nav a.bionica::before 		{ background-image: url('images2026/bionica.svg'); }
nav a.futurism::before 		{ background-image: url('images2026/futurism.svg'); }

@media (min-width: 1000px){
	nav a:hover, nav a.hover { top: -1rem; cursor: pointer; }
}

section, .popup {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   top: 3rem;
   transition: top 1s ease;
}
.popup {  transition: opacity 1.5s ease; }

section.show,
	.popup.show {
		opacity: 1;
		visibility: visible;
		pointer-events: all;
		top: 0;
}



.popup { width: 100%; height: 100%; position: fixed; z-index: 20; background: rgba(0,0,0,0.7); top: 0; left: 0; }
.popup .wrapper { height: 100%; } 
.popup article { /*background: white;*/ color: var(--siniy); border-radius: 2rem; padding: 2rem; max-width: 1360px; position: relative; overflow: hidden; position: relative; }
.popup article > div { display: flex; gap: 3rem; position: relative; z-index: 5; }
.popup article > div > div { display: flex; align-items: center; text-align: left; }

.popup article::before 	{ background: url('images2026/bg.webp') center center / cover no-repeat; content: ''; display: block;  height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.popup article::after 	{ background: url('images2026/bg_grid.png') 0 0; animation: bg_move 1500ms linear infinite; content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }


.popup i { display: block; position: absolute; margin: -10rem 0 0 -10rem; z-index: 2; width: 20rem; height: 20rem; box-shadow: inset 0 0 3rem 3rem rgba(255, 255, 255, 1), inset 0 0 1px 1px rgba(255, 255, 255, 1); border-radius: 50%; 
	 top: -2000px; left: -2000px; box-sizing: content-box; border: solid 2000px white;
	/*transform: translate(-50%, -50%);*/
}
@media (max-width: 999px){
	.popup i { display: none; }
	.popup article::before, .popup article::after { background: white; animation: none; }
}



.popup p { font-size: 1.1rem; margin-bottom: 2.5rem; line-height: 120%; }
.popup .media { min-width: 40%; max-width: 40%; aspect-ratio: 1/1; max-height: 60vh; display: flex; align-items: center; overflow: hidden; border-radius: 1.5rem; }
.popup .media img,
	.popup .media video { width: 100%; }

.popup img.close { position: absolute; top: 1.5rem; right: 1.5rem; height: 1rem; cursor: pointer; display: none; }
.popup button {  color: white; }
.popup button::before 	{ background: var(--goluboy); }
.popup button::after 	{ background: var(--siniy); }

nav a h6 { display: none; }



.final .two_cols article { max-width: 32rem; }
.final .rating {
	box-shadow: none;
	border-radius: 1rem;
	outline: 1px solid rgba(255, 255, 255, 0.6);
	outline-offset:-1px;
	border-width: 0;
	flex-direction: column;
	gap: 1rem;
}
.final .rating > div { padding: 0; font-size: 1.3rem; line-height: 120%; }
.final .rating_link { width: 100%; font-size: 1rem; height: 3rem; }



footer { font-size: 0.7rem; position: absolute; bottom: 0; width: 100%; z-index: 2; }
footer .wrapper { overflow: hidden; }
footer .copy { /*float: left; position: relative; top: -0.4rem;*/ }
footer .copy a { position: relative; top: 0.4rem; display: inline-block; margin-right: 5px; }
footer .copy a img { display: block; height: 1.208rem; }
footer .copy span { display: inline-block; margin: 0 5px; }





nobr { white-space: nowrap; }



@media (max-width: 1800px), (max-height: 900px){
	html { font-size: 19px; }
}

@media (max-width: 1600px), (max-height: 850px){
	html { font-size: 18px; }
}

@media (max-width: 1400px), (max-height: 800px){
	html { font-size: 17px; }
}

@media (max-width: 1400px){
	h1 { font-size: 4rem; }
	h2 { font-size: 2.9rem; }
	h3 { font-size: 1.9rem; }
	.rating > a.rating_link { min-width: 12rem; }
}

@media (max-width: 1199px), (max-height: 700px){
	html { font-size: 16px; }
}
@media (max-width: 1199px){
	h1 { font-size: 3.2rem; }
	h2 { font-size: 2.8rem; }
	h3 { font-size: 1.8rem; }
	.two_cols .wrapper { gap: 2rem; }
	.two_cols article { gap: 2.5rem; padding: 1.5rem 0; }
	.two_cols p  { font-size: 1rem;  }
	
	.glass { padding: 1.5rem; }
}

@media (max-width: 999px), (max-height: 650px){
	html { font-size: 15px; }
}
@media (max-width: 999px){
	
	h1 { font-size: 3.1rem; margin-bottom: 1.5rem; }
	h2 { font-size: 2.0rem; margin-bottom: 1.5rem; }
	h3 { font-size: 1.7rem; }
	h1 small { margin-bottom: -0.7rem; font-size: 1.4rem; }

	.two_cols form { margin: 1.5rem 0 0 0; }
	.glass { padding: 1rem; }
	
	.popup article { padding: 1.5rem; }
	.popup article > div {  gap: 2rem; }
	.popup p { font-size: 1.05rem; margin-bottom: 1.5rem; }
	
}

@media (max-width: 950px){
	.rating0 { display: none; }
	.two_cols .rating1 { display: block; }
	.two_cols aside > div > div { max-height: 50vh; }
	
	
	nav { grid-template-columns: repeat(2, 1fr); max-width: 70vw; margin: 0 auto; }
	nav > a { max-height: 30vh; }
}


@media (max-width: 750px), (max-height: 600px){
	html { font-size: 14px; }
	
}

@media (max-width: 750px){
	
	section .wrapper { align-items: initial; }

	#grid { background-position: 20% 50%; background-size: 600%; }
	#grid::before { background-size: 24px; animation: bg_move 750ms linear infinite; }
	@keyframes bg_move {
		from { background-position: 0px 0px; }
		to {  background-position: 24px 24px; }
	}
	
	
	.two_cols { gap: 1.5rem; }
	.two_cols .wrapper { flex-direction: column; gap: 1.5rem; }
	.two_cols article { padding: 0; }
	.two_cols aside { width: 100%; justify-content: center; }
	.glass { padding: 0.8rem; border-radius: 1.42rem;  } 
	/*
	#step0 aside > div > div { max-height: 24vh; }
	.final aside > div > div { max-height: 35vh; }
	*/
	#step0 aside { height: 26vh; }
	.two_cols aside > div { aspect-ratio: 16/9; }
	.final aside { height: 32vh }
	
	
	
	.two_cols aside > div > div { height: 100%; aspect-ratio: initial; border-radius: 0.71rem; }
	h1 { font-size: 2.6rem; margin-bottom: 1rem; }
	
	.two_cols form { margin: 1.2rem 0 0 0; }
	.two_cols form button { width: 100%; }
	.rating { flex-direction: column;  gap: 0.8rem; padding: 0.8rem; font-size: 1rem; }
	.rating > div { padding: 0; width: 100%; }
	a.rating_link { width: 100%; }
	.final .rating > div { font-size: 1rem; }
	
	nav { grid-template-columns: 1fr; max-width: initial; }
	nav > a { aspect-ratio: initial; font-size: 1.25rem; gap: 1rem; padding: 1rem; }
	nav a::before { position: relative; top:0; left:0; width: 4.3rem; }
	nav a span { flex: 1 1 0; text-align: left; }
	
	h2 { font-size: 2.2rem; line-height: 100%; margin-bottom: 1.5rem; }
	h3 { font-size: 1.6rem; text-align: center; margin-bottom: 2rem; }
	
	.popup article > div { flex-direction: column;}
	.popup .media { max-width: 100%; max-height: 40vh; }
}


@media (max-width: 499px) {
	.wrapper { padding-left: 1.5rem; padding-right: 1.5rem; }

	header article { padding: 0.6rem 1rem; }
	header a br { display: initial; }

	.popup article { padding: 1.2rem; border-radius: 1.5rem;}
	.popup article > div > div {  text-align: center;  }
	.popup .media { border-radius: 1rem; }
	.popup button { width: 100%; }
	
	section { padding-bottom: 3rem; }
	footer .wrapper { display: flex; justify-content: center; padding-top: 1rem; padding-bottom: 1rem; }
	
	.two_cols aside > div { aspect-ratio: initial; width: 100%; }
}

@media (max-width: 399px){
	h1 { font-size: 2.4rem; }
	h2 { font-size: 1.8rem; margin-bottom: 1.2rem; }
	h3 { font-size: 1.5rem; }
	
	@media (max-height: 680px){
		html { font-size: 13px; }
	}
}

@media (max-width: 359px){
	html { font-size: 13px; }
}

@media (max-width: 359px){
	h1 { font-size: 2.2rem; }
	.two_cols p { line-height: 120%; }
	/*#step0 aside > div > div { max-height: 21vh; }
	.final aside > div > div { max-height: 33vh; }*/
}



@media (max-height: 640px){
	html { font-size: 12px; }
}