/*=============================
KINGSMASLEAGUE 2026
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;800;900&display=swap');

	*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	scroll-behavior:smooth;
	}

	:root{

	--gold:#D4AF37;
	--gold2:#f2cf66;
	--black:#090909;
	--dark:#141414;
	--card:#1b1b1b;
	--white:#ffffff;

	}

	body{

	font-family:'Montserrat',sans-serif;
	background:var(--black);
	color:white;
	overflow-x:hidden;

	}

	a{

	text-decoration:none;
	color:white;

	}

	img{

	max-width:100%;
	display:block;

	}

	.section{

	padding:100px 8%;

	}

	.section h2{

	text-align:center;
	font-size:52px;
	font-weight:800;
	color:var(--gold);
	margin-bottom:60px;
	letter-spacing:2px;

	}



/*=============================
NAVBAR
==============================*/

	nav{

	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:85px;

	display:flex;
	justify-content:space-between;
	align-items:center;

	padding:0 7%;

	background:rgba(0,0,0,.45);

	backdrop-filter:blur(15px);

	z-index:9999;

	transition:.4s;

	}

	nav.scrolled{

	background:#000;

	box-shadow:0 5px 30px rgba(0,0,0,.5);

	}

	.logo img{

	height:65px;

	}

	nav ul{

	display:flex;

	gap:35px;

	list-style:none;

	}

	nav li{

	list-style:none;

	}

	nav a{

	font-weight:700;

	transition:.35s;

	position:relative;

	}

	nav a::after{

	content:"";

	position:absolute;

	left:0;

	bottom:-8px;

	width:0;

	height:3px;

	background:var(--gold);

	transition:.35s;

	}

	nav a:hover{

	color:var(--gold);

	}

	nav a:hover::after{

	width:100%;

	}



	/*=============================
	HERO
	==============================*/

	.hero{

	height:100vh;

	display:flex;

	justify-content:center;

	align-items:center;

	text-align:center;

	background:

	linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.75)),

	url("assets/hero-bg.jpg");

	background-size:cover;

	background-position:center;

	}

	.hero-content{

	max-width:900px;

	animation:fade 1.4s;

	}

	.hero-logo{

	width:190px;

	margin:auto;

	margin-bottom:30px;

	filter:drop-shadow(0 0 25px rgba(255,255,255,.15));

	}

	.hero h2{

	font-size:26px;

	letter-spacing:4px;

	font-weight:600;

	margin-bottom:15px;

	}

	.hero h1{

	font-size:clamp(2rem, 7vw, 82px);

	font-weight:900;

	color:var(--gold);

	line-height:1;

	margin-bottom:25px;

	}

	.hero p{

	font-size:24px;

	line-height:1.8;

	margin-bottom:45px;

	}

	.btn{

	display:inline-block;

	padding:18px 45px;

	background:linear-gradient(45deg,var(--gold),var(--gold2));

	color:black;

	font-weight:800;

	border-radius:50px;

	transition:.35s;

	}

	.btn:hover{

	transform:translateY(-6px);

	box-shadow:0 20px 40px rgba(212,175,55,.4);

	}



	/*=============================
	COUNTDOWN
	==============================*/

	.countdown{

	padding:90px 20px;

	background:#111;

	text-align:center;

	}

	.countdown h2{

	font-size:42px;

	color:var(--gold);

	margin-bottom:45px;

	}

	.timer{

	display:flex;

	justify-content:center;

	gap:25px;

	flex-wrap:wrap;

	}

	.timer div{

	width:150px;

	height:150px;

	border-radius:18px;

	background:var(--card);

	display:flex;

	flex-direction:column;

	justify-content:center;

	align-items:center;

	border:1px solid rgba(255,255,255,.05);

	transition:.35s;

	}

	.timer div:hover{

	transform:translateY(-8px);

	border-color:var(--gold);

	}

	.timer span{

	font-size:55px;

	font-weight:900;

	color:var(--gold);

	}

	.timer p{

	margin-top:10px;

	font-size:15px;

	letter-spacing:2px;

	}

	@keyframes fade{

	from{

	opacity:0;

	transform:translateY(50px);

	}

	to{

	opacity:1;

	transform:translateY(0);

	}

	}
/*======================================
TORNEO
======================================*/

	.cards{

	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:30px;

	margin-top:40px;

	}

	.card{

	background:var(--card);

	padding:45px 30px;

	border-radius:22px;

	text-align:center;

	transition:.35s;

	border:1px solid rgba(255,255,255,.06);

	position:relative;

	overflow:hidden;

	}

	.card::before{

	content:"";

	position:absolute;

	width:220px;

	height:220px;

	background:radial-gradient(var(--gold),transparent);

	top:-120px;

	right:-120px;

	opacity:.08;

	transition:.4s;

	}

	.card:hover{

	transform:translateY(-12px);

	border-color:var(--gold);

	box-shadow:0 20px 40px rgba(212,175,55,.12);

	}

	.card:hover::before{

	transform:scale(1.4);

	}

	.card h3{

	font-size:28px;

	margin-bottom:20px;

	color:var(--gold);

	}

	.card p{

	font-size:18px;

	line-height:1.8;

	color:#ddd;

	}



/*======================================
PROGRAMMA
======================================*/

	.timeline{

	max-width:900px;

	margin:auto;

	display:flex;

	flex-direction:column;

	gap:22px;

	}

	.event{

	display:flex;

	align-items:center;

	gap:30px;

	padding:25px;

	background:#1b1b1b;

	border-left:6px solid var(--gold);

	border-radius:16px;

	transition:.35s;

	}

	.event:hover{

	transform:translateX(10px);

	box-shadow:0 15px 35px rgba(212,175,55,.12);

	}

	.event span{

	font-size:26px;

	font-weight:900;

	color:var(--gold);

	min-width:90px;

	}

	.event h3{

	font-size:22px;

	font-weight:700;

	}



/*======================================
PREMI
======================================*/

	.premi-grid{

	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:25px;

	}

	.premio{

	background:#1b1b1b;

	padding:40px 25px;

	border-radius:20px;

	text-align:center;

	transition:.35s;

	border:1px solid rgba(255,255,255,.05);

	}

	.premio:hover{

	transform:translateY(-10px);

	border-color:var(--gold);

	box-shadow:0 15px 40px rgba(212,175,55,.12);

	}

	.premio h3{

	color:var(--gold);

	margin-bottom:20px;

	font-size:24px;

	}

	.premio p{

	font-size:18px;

	color:#ddd;

	}



/*======================================
FAQ
======================================*/

	.faq{

	display:flex;

	flex-direction:column;

	gap:20px;

	max-width:950px;

	margin:auto;

	}

	.faq div{

	background:#1b1b1b;

	padding:28px;

	border-radius:16px;

	transition:.35s;

	}

	.faq div:hover{

	transform:translateX(8px);

	}

	.faq h3{

	color:var(--gold);

	margin-bottom:12px;

	font-size:22px;

	}

	.faq p{

	line-height:1.8;

	}



/*======================================
ANIMAZIONE GENERALE
======================================*/

	.card,
	.event,
	.premio,
	.faq div{

	animation:fade .8s ease;

	}
/*======================================
REGOLAMENTO
======================================*/

	.accordion{

	max-width:1000px;

	margin:auto;

	display:flex;

	flex-direction:column;

	gap:18px;

	}

	.accordion-item{

	background:#1b1b1b;

	border-radius:18px;

	overflow:hidden;

	border:1px solid rgba(255,255,255,.05);

	transition:.3s;

	}

	.accordion-item:hover{

	border-color:var(--gold);

	}

	.accordion-header{

	width:100%;

	padding:24px 30px;

	background:transparent;

	border:none;

	color:white;

	font-size:22px;

	font-weight:700;

	cursor:pointer;

	display:flex;

	justify-content:space-between;

	align-items:center;

	transition:.3s;

	}

	.accordion-header:hover{

	color:var(--gold);

	}

	.accordion-content{

	display:none;

	padding:0 30px 25px;

	line-height:1.9;

	font-size:18px;

	color:#ddd;

	}

	.accordion-content.show{

	display:block;

	animation:fade .4s;

	}



/*======================================
FORM
======================================*/

	form{

	max-width:950px;

	margin:auto;

	background:#1b1b1b;

	padding:45px;

	border-radius:22px;

	border:1px solid rgba(255,255,255,.05);

	box-shadow:0 20px 60px rgba(0,0,0,.35);

	}

	.grid{

	display:grid;

	grid-template-columns:repeat(2,1fr);

	gap:20px;

	margin-bottom:30px;

	}

	input,
	textarea{

	width:100%;

	padding:18px;

	background:#111;

	border:2px solid #2a2a2a;

	border-radius:12px;

	color:white;

	font-size:16px;

	font-family:Montserrat,sans-serif;

	transition:.3s;

	}

	input::placeholder,
	textarea::placeholder{

	color:#888;

	}

	input:focus,
	textarea:focus{

	outline:none;

	border-color:var(--gold);

	box-shadow:0 0 15px rgba(212,175,55,.15);

	}

	textarea{

	resize:vertical;

	min-height:220px;

	}

	form h3{

	margin-top:25px;

	margin-bottom:15px;

	color:var(--gold);

	font-size:28px;

	}

	label{

	display:flex;

	align-items:center;

	gap:12px;

	margin-top:20px;

	font-size:16px;

	}

	input[type=checkbox]{

	width:20px;

	height:20px;

	accent-color:var(--gold);

	cursor:pointer;

	}

	button[type=submit]{

	margin-top:35px;

	width:100%;

	padding:20px;

	border:none;

	border-radius:50px;

	font-size:18px;

	font-weight:800;

	cursor:pointer;

	background:linear-gradient(45deg,var(--gold),var(--gold2));

	color:black;

	transition:.35s;

	}

	button[type=submit]:hover{

	transform:translateY(-5px);

	box-shadow:0 18px 35px rgba(212,175,55,.35);

	}



/*======================================
SUBTITLE
======================================*/

	.subtitle{

	max-width:850px;

	margin:auto;

	margin-bottom:45px;

	text-align:center;

	font-size:20px;

	line-height:1.8;

	color:#d5d5d5;

	}



	/*======================================
	SEPARATORE
	======================================*/

	.section{

	position:relative;

	}

	.section::after{

	content:"";

	position:absolute;

	bottom:0;

	left:50%;

	transform:translateX(-50%);

	width:120px;

	height:2px;

	background:linear-gradient(to right,transparent,var(--gold),transparent);

	opacity:.25;

	}
	/*======================================
	CONTATTI
	======================================*/

	.contact-grid{

	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;
	margin-top:50px;

	}

	.contact-card{

	background:var(--card);

	padding:40px 30px;

	border-radius:20px;

	text-align:center;

	transition:.35s;

	border:1px solid rgba(255,255,255,.06);

	}

	.contact-card:hover{

	transform:translateY(-10px);

	border-color:var(--gold);

	box-shadow:0 20px 40px rgba(212,175,55,.15);

	}

	.contact-card .icon{

	font-size:60px;

	margin-bottom:20px;

	}

	.contact-card h3{

	font-size:24px;

	margin-bottom:15px;

	color:var(--gold);

	}

	.contact-card p{

	color:#ddd;

	line-height:1.7;

	word-break:break-word;

	}



/*======================================
FOOTER
======================================*/

	footer{

	background:#050505;

	padding:70px 8% 30px;

	margin-top:80px;

	border-top:2px solid rgba(212,175,55,.2);

	}

	.footer-top{

	display:flex;

	justify-content:center;

	margin-bottom:30px;

	}

	.footer-logo{

	height:120px;

	}

	.footer-middle{

	display:flex;

	justify-content:center;

	align-items:center;

	gap:60px;

	margin-bottom:35px;

	flex-wrap:wrap;

	}

	.footer-middle img{

	height:90px;

	transition:.3s;

	}

	.footer-middle img:hover{

	transform:scale(1.08);

	}

	.footer-bottom{

	text-align:center;

	line-height:2;

	color:#bdbdbd;

	font-size:15px;

	}



/*======================================
TOP BUTTON
======================================*/

	#topButton{

	position:fixed;

	right:25px;

	bottom:25px;

	width:60px;

	height:60px;

	border:none;

	border-radius:50%;

	background:linear-gradient(45deg,var(--gold),var(--gold2));

	font-size:26px;

	font-weight:bold;

	cursor:pointer;

	display:none;

	transition:.35s;

	z-index:99999;

	}

	#topButton:hover{

	transform:translateY(-5px);

	box-shadow:0 15px 35px rgba(212,175,55,.45);

	}



/*======================================
RESPONSIVE
======================================*/

@media(max-width:1100px){

	.cards,
	.premi-grid{

	grid-template-columns:repeat(2,1fr);

	}

	.contact-grid{

	grid-template-columns:repeat(2,1fr);

	}

	.grid{

	grid-template-columns:1fr;

	}

	.hero h1{

	font-size:62px;

	}

	}



@media(max-width:768px){

	nav{
    padding:10px 15px;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    height:auto;
	}

	nav ul{
    display:flex;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
	}
	nav a{
    font-size:12px;
	}
	
	.hero{

	padding:100px 15px 50px;

	height:auto;

	}

	.hero-logo{

	width:140px;

	}

	.hero h1{

	font-size:42px;

	}

	.hero h2{

	font-size:18px;

	}

	.hero p{

	font-size:18px;

	}

	.timer{

	gap:15px;

	}

	.timer div{
		width:90px;
		height:90px;
	}

	.timer span{
		font-size:28px;
	}

	.timer p{
		font-size:11px;

	}

	.cards,
	.premi-grid,
	.contact-grid{

	grid-template-columns:1fr;

	}

	.section h2{

	font-size:30px;

	}

	form{

	padding:30px;

	}

	.footer-middle{

	flex-direction:column;

	gap:30px;

	}

	.footer-middle img{

	height:75px;

	}
}




/*======================================
SCROLLBAR
======================================*/

	::-webkit-scrollbar{

	width:10px;

	}

	::-webkit-scrollbar-track{

	background:#111;

	}

	::-webkit-scrollbar-thumb{

	background:var(--gold);

	border-radius:50px;

	}

	::-webkit-scrollbar-thumb:hover{

	background:var(--gold2);

	}



/*======================================
SELEZIONE TESTO
======================================*/

	::selection{

	background:var(--gold);

	color:black;

	}

/* Tablet */
@media screen and (max-width: 768px) {

    .hero {
        padding: 50px 15px;
    }

    .hero h1 {
        font-size: 2.2rem;
        line-height: 1.1;
        margin-bottom: 15px;
    }

    .hero h2 {
        font-size: 1rem;
    }

    .hero p {
        font-size: 0.95rem;
    }
}

/* Smartphone */
@media screen and (max-width: 480px) {

    .hero h1 {
        font-size: 1.8rem !important;
    }

    .hero-logo {
        width: 120px;
    }
	.hero{
		padding:80px 10px 40px;
	}

	.hero h2{
		font-size:0.85rem;
		letter-spacing:2px;
	}

	.hero p{
		font-size:0.9rem;
		line-height:1.4;
	}

	.btn{
		padding:12px 20px;
		font-size:0.9rem;
	}
}