* {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:0 80px; width:100%; max-width:1440px}
		.slide {display:flex; flex-direction:column; margin-top:100px; width:740px}
			.slide>.logo {display:flex; align-items:center; align-self:start; gap:8px; border-radius:6px; padding:6px; border:1px solid #353E56; background:#111726;}
				.slide>.logo>img {height:20px; width:20px}
				.slide>.logo>span {font-size:14px;}
			.slide>h1 {font-size:60px; margin:24px 0 16px 0; font-weight:600; line-height:normal letter-spacing:-1.2px;}
			.slide>span {font-size:14px; color:#A3A3A3; font-weight:400;}
		.article {display:flex; flex-direction:column; align-items:center; width:886px}
			.article>.logo {width:886px; height:540px; margin:64px 0 60px 0;}
				.article>.logo>img {height:100%; width:100%; object-fit:cover; border-radius:16px}
			.article>article {width:630px}
				.article>article>*:not(h2) {color:#A3A3A3}
				.article>article>h2 {color:#FAFAFA; font-weight:500;}
		.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}