* {box-sizing:border-box; margin:0; padding:0; color:#fff; font-family:'Inter', system-ui, sans-serif; outline:none}
body {height:100%; background:#04070D}
header {display:flex; justify-content:center; width:100%; border-bottom:1px solid rgba(255, 255, 255, 0.10)}
	header>div {display:flex; align-items:center; justify-content:space-between; height:80px; padding:16px 80px; width:100%; max-width:1440px}
		header>div>a {display:flex; align-items:center;}
		header>div>.menu {display:flex; align-items:center; gap:72px}
			header>div>.menu>a {font-size:14px; text-decoration:none; color:#D4D4D4; transition:color 0.2s}
				header>div>.menu>a:hover {color:#fff}
				header>div>.menu>a.active {color:#8B5CF6}
		header>div>.user {display:flex; align-items:center; gap:12px}
			header>div>.user>.lang {display:flex; align-items:center; gap:8px}
				header>div>.user>.lang>img {height:20px}
				header>div>.user>.lang>span {font-size:14px;}
			header>div>.user>.add-club {display:flex; font-weight:500; align-items:center; justify-content:center; text-decoration:none; width:110px; height:40px; border-radius:6px; color:#fff; border:1px solid #A78BFA; background:#8B5CF6; font-size:14px;}
			header>div>.user>.login {display:flex; font-weight:500; align-items:center; justify-content:center; text-decoration:none; width:110px; height:40px; border-radius:6px; color:#171717; border:1px solid #E5E5E5; background:#FFF; font-size:14px;}
main {display:flex; justify-content:center; width:100%}
	main>div {display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:16px 80px; width:100%; max-width:1440px}
		.slide {width:100%; display:flex; flex-direction:column; padding:54px 0 86px 0}
			.slide>.top {display:flex;}
				.slide>.top>.left {flex-grow:1; display:flex; justify-content:center}
					.slide>.top>.left>img {height:150px; width:150px; transform:rotate(-32.746deg);}
				.slide>.top>.center {width:746px; padding-top:20px; display:flex; flex-direction:column; align-items:center; gap:23px}
					.slide>.top>.center>h1 {font-size:40px; font-style:normal; font-weight:500; line-height:48px}
						.slide>.top>.center>h1>span {color:#8B5CF6}
					.slide>.top>.center>.search {height:44px; width:538px; display:flex; align-items:center; position:relative; border-radius:8px; border:1px solid rgba(255, 255, 255, 0.10); background:linear-gradient(180deg, rgba(25, 28, 36, 0.95) 0.21%, rgba(20, 23, 31, 0.95) 95.55%)}
						.slide>.top>.center>.search>input {background:none; border:0; font-size:16px; color:#fff; position:absolute; top:0; left:0; height:100%; width:100%; padding:0 48px 0 16px;}
							.slide>.top>.center>.search>input::placeholder {color:#fff;}
						.slide>.top>.center>.search>button {margin:0 16px 0 auto; z-index:2; border:0; background:none; cursor:pointer; height:20px; width:20px}
							.slide>.top>.center>.search>button>img {height:20px; width:20px}
				.slide>.top>.right {flex-grow:1; display:flex; justify-content:center}
					.slide>.top>.right>img {height:150px; width:150px; transform:rotate(-32.746deg);}	
		/*каталог*/
		.catalog {width:100%; display:flex; gap:40px; padding:60px 0 0 0; position:relative; background:none}
		.catalog::before {content:""; position:absolute; top:0; left:0; width:100%; height:220px; background:radial-gradient(40% 100% at 50% 0%, rgba(126, 168, 252, 0.20) 0%, rgba(126, 168, 252, 0) 100%); pointer-events:none; z-index:0}
			.catalog>* {position:relative; z-index:1}
			/*лента*/
			.catalog>.feed {width:100%}
				/*сортиовка*/
				.catalog>.feed>.sorty {display:flex; align-items:center}
					.catalog>.feed>.sorty>.searched {font-size:24px; color:#fff; font-weight:500; line-height:32px}
						.catalog>.feed>.sorty>.searched>span {color:#8B5CF6;}
					.catalog>.feed>.sorty>.option {margin-left:auto; display:flex; align-items:center; gap:12px}
						.catalog>.feed>.sorty>.option>div>.vis {cursor:pointer; display:flex; align-items:center; padding:10px 16px; border-radius:6px; border:1px solid rgba(255, 255, 255, 0.10); background:linear-gradient(180deg, rgba(25, 28, 36, 0.95) 0.21%, rgba(20, 23, 31, 0.95) 95.55%);}
							#sortOrderBy>.vis {gap:38px}
							#sortShow>.vis {gap:6px}
							.catalog>.feed>.sorty>.option>div>.vis>span {font-size:14px; color:#A3A3A3; width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:500;}
								.catalog>.feed>.sorty>.option>div>.vis>span>span {color:#A3A3A3;}
							.catalog>.feed>.sorty>.option>div>.vis>img {height:20px; width:20px; transition:transform 0.2s;}
						.catalog>.feed>.sorty>.option>div>.hid {display:none; top:0; padding:10px; gap:4px; border-radius:6px; border:1px solid #ffffff1a; position:absolute; flex-direction:column; background:#14171f;}
						.catalog>.feed>.sorty>.option>div>.hid.big {width:192px;}
						.catalog>.feed>.sorty>.option>div>.hid.small {width:117px;}
							.catalog>.feed>.sorty>.option>div>.hid>span {font-size:14px; cursor:pointer; transition:color 0.2s; font-weight:500; line-height:20px; color:#A3A3A3}
							.catalog>.feed>.sorty>.option>div>.hid>span.active {background:#8B5CF6; cursor:default; color:#fff; padding:4px; border-radius:4px;}
							.catalog>.feed>.sorty>.option>div>.hid>span:not(.active):hover {color:#fff}
				/*карточки*/
				.feed>.cards {display:flex; flex-wrap:wrap; gap:20px; margin-top:24px;}
					.feed>.cards>.card {padding:20px; width:calc(50% - 10px); cursor:pointer; transition:border 0.2s; display:flex; gap:20px; border-radius:8px; border:1px solid rgba(255, 255, 255, 0.10); background:linear-gradient(180deg, rgba(25, 28, 36, 0.95) 0.21%, rgba(20, 23, 31, 0.95) 95.55%)}
						.feed>.cards>.card:hover {border:1px solid #8B5CF6}
						.feed>.cards>.card>.logo {height:164px; width:164px; border-radius:12px; overflow:hidden}
							.feed>.cards>.card>.logo>img {height:100%; width:100%; object-fit:cover; border-radius:12px}
						.feed>.cards>.card>.data {display:flex; flex-direction:column; width:calc(100% - 184px);}
							.feed>.cards>.card>.data>.name {font-size:20px; font-weight:500; line-height:28px; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
							
				/*пагинация*/
				.pagination {display:flex; justify-content:center; margin-top:65px; gap:8px}
					.pagination>.left {cursor:pointer; height:36px; width:36px; display:flex; align-items:center; justify-content:center; border-radius:6px; border:1px solid #A3A3A3;}
						.pagination>.left>img {height:20px; width:20px}
					.pagination>.center {display:flex; gap:8px}
						.pagination>.center>a {cursor:pointer; height:36px; width:36px; font-size:14px; font-weight:400; color:#A3A3A3; text-decoration:none; display:flex; align-items:center; justify-content:center; border-radius:6px; border:1px solid #A3A3A3;}
						.pagination>.center>a.active {background:#8B5CF6; color:#fff; border:0}
					.pagination>.right {cursor:pointer; height:36px; width:36px; display:flex; align-items:center; justify-content:center; border-radius:6px; border:1px solid #A3A3A3;}
						.pagination>.right>img {height:20px; width:20px; transform:rotate(180deg)}
		/*последние новости*/
		.stories {display:flex; flex-direction:column; gap:40px; justify-content:space-between; width:100%; padding:116px 0; margin-top:118px; position:relative; background:none}
		.stories::before {content:""; position:absolute; top:0; left:0; width:100%; height:220px; background:radial-gradient(40% 100% at 50% 0%, rgba(126, 168, 252, 0.20) 0%, rgba(126, 168, 252, 0) 100%); pointer-events:none; z-index:0}
			.stories>h2 {color:#FAFAFA; font-size:40px; font-weight:500;}
			.stories>.line {display:flex; flex-wrap:wrap; gap:20px}
				.stories>.line a {text-decoration:none}
				.stories>.line article {display:flex; cursor:pointer; gap:12px; flex-direction:column; width:406px; transition:transform 0.3s ease, box-shadow 0.3s ease}
				.stories>.line article:hover {transform:translateY(-8px) scale(1.03); box-shadow:0 15px 25px rgba(0, 0, 0, 0.5)}
					.stories>.line article>.logo {position:relative; height:223px; width:405px; border-radius:12px; overflow:hidden}
						.stories>.line article>.logo>img {height:100%; width:100%; border-radius:12px; object-fit:cover; transition:transform 0.5s ease}
						.stories>.line article:hover>.logo>img {transform:scale(1.1)}
						.stories>.line article>.logo>.mask {position:absolute; top:0; left:0; height:100%; width:100%; background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(4, 7, 13, 0.6) 100%); transition:background 0.4s ease}
						.stories>.line article:hover>.logo>.mask {background:linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(4, 7, 13, 0.8) 100%)}
					.stories>.line article>.data {display:flex; gap:12px; flex-direction:column;}
						.stories>.line article>.data>.time {font-size:14px; color:#8B5CF6; font-weight:400;}
						.stories>.line article>.data>h3 {font-size:24px; font-weight:500; line-height:32px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
						.stories>.line article>.data>.desc {font-size:14px; font-weight:400; line-height:20px; color:#737373; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
		
footer {margin-top:80px; display:flex; justify-content:center; width:100%; padding-bottom:60px}
	footer>div {display:flex; padding:0 80px; gap:166px; flex-direction:column; align-items:center; justify-content:space-between; width:100%; max-width:1440px}
		footer>div>.top {display:flex; justify-content:space-between; width:100%;}
			footer>div>.top>.left {display:flex; flex-direction:column}
				footer>div>.top>.left>img {height:90px; width:304px}
				footer>div>.top>.left>span {font-size:14px; font-weight:400; color:#fff; margin:24px 0 32px 0}
				footer>div>.top>.left>.soc {display:flex; gap:24px}
					footer>div>.top>.left>.soc>a {font-size:14px; font-weight:400; color:#fff; text-decoration:none; transition:color 0.2s}
					footer>div>.top>.left>.soc>a:hover {color:#8B5CF6}
			footer>div>.top>.right {display:flex; gap:84px; padding-top:14px}
				footer>div>.top>.right>div {display:flex; flex-direction:column; gap:10px}
					footer>div>.top>.right>div>a {font-size:14px; font-weight:400; text-decoration:none; transition:color 0.2s}
					footer>div>.top>.right>div>a:hover {color:#8B5CF6}
		footer>div>.btm {display:flex; flex-direction:column; gap:32px}
			footer>div>.btm>.top {display:flex}
				footer>div>.btm>.top>.left {font-size:12px; color:#fff; font-weight:400}
				footer>div>.btm>.top>.right {display:flex; margin-left:auto; gap:32px}
					footer>div>.btm>.top>.right>a {font-size:12px; font-weight:400; color:#fff; text-decoration:none; transition:color 0.2s}
					footer>div>.btm>.top>.right>a:hover {color:#8B5CF6}
			footer>div>.btm>.btm {color:#737373; font-size:12px; font-weight:400}
				footer>div>.btm>.btm>span {color:#fff}