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

html,
body {
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	background: #f4f7fb;
	color: #071a35;
	line-height: 1.6;
}

.container {
	width: 92%;
	max-width: 1200px;
	margin: 0 auto;
}



/* =========================
HEADER
========================= */


header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    background:rgba(7,26,53,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:all .3s ease;
}

.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:80px;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;

    white-space:nowrap;

    font-size:32px;
    font-weight:900;
    color:#fff;

    text-decoration:none;
}

.nav-links{
    display:flex;
    align-items:self-start;
    gap:28px;
}

.nav-links a{
    color:white;
    text-decoration:none;
    font-weight:700;
    transition:.25s;
}

.nav-links a:hover{
    color:#d71920;
}
.mobile-menu-btn{
    display:none;
}
.download-btn{
    background:#d71920;
    color:white !important;

    padding:12px 22px;
    border-radius:12px;

    transition:.25s;
}

.download-btn:hover{
    transform:translateY(-2px);
}

.mobile-menu-btn{
    display:none;
    color:white;
    font-size:28px;
    cursor:pointer;
}

/* =========================
HERO
========================= */
.hero {
	background: linear-gradient(135deg,
			#071a35,
			#0d2d5b);
	color: white;
	padding: 80px 0;
}

.hero-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

.hero-left,
.hero-right {
	flex: 1;
}

.hero-left h1 {
	font-size: clamp(38px, 8vw, 72px);
}

.hero-left h1 {
	font-size: clamp(42px, 6vw, 72px);
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: 25px;
}

.hero-left p {
	font-size: 22px;
	margin-bottom: 35px;
	opacity: .95;
}

.hero-buttons {
	display: flex;
	gap: 15px;
	margin-bottom: 40px;
}

.hero-stats {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 40px;
}

.stat-card {
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(10px);
	padding: 20px;
	border-radius: 18px;
	min-width: 150px;
	text-align: center;
}

.stat-icon {
	font-size: 28px;
	margin-bottom: 10px;
}

.stat-card strong {
	display: block;
	font-size: 32px;
	font-weight: 900;
	color: white;
}

.stat-card span {
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
}

/* =========================
PHONE MOCKUP
========================= */

.hero-right {
	flex: 1;
	position: relative;
	display: flex;
	justify-content: center;
}

.phone-mockup {
	width: 320px;
	border-radius: 35px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
}

.floating-card {
	position: absolute;
	background: white;
	color: #071a35;
	padding: 16px;
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
	width: 240px;
}

.leaderboard-card {
	top: 60px;
	left: 0;
}

.fixtures-card {
	width: 280px;
	padding: 20px;
	border-radius: 24px;
	background: #ffffff;
	box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
	position: absolute;
	right: -40px;
	bottom: 40px;
}

/* =========================
SECTIONS
========================= */
section {
	padding: 40px 0;
}

.section-title {
	text-align: center;
	font-size: 36px;
	font-weight: 900;
	margin-bottom: 20px;
}

.section-subtitle {
	text-align: center;
	max-width: 700px;
	margin: auto;
	margin-bottom: 5px;
	color: #555;
}

/* =========================
COMPETITIONS
========================= */
.competitions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin-top: 40px;
}

.competition-card {
	background: white;
	padding: 30px;
	border-radius: 24px;
	text-align: center;
	text-decoration: none;
	color: #071a35;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
	transition: all .3s ease;
}

.competition-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

.competition-card img {
	width: 90px;
	height: 90px;
	object-fit: contain;
	margin-bottom: 20px;
}

.competition-card h3 {
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 12px;
}

.competition-card p {
	color: #666;
	line-height: 1.6;
}

/* =========================
FIXTURES
========================= */

.competition-tabs {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 5px;
	scrollbar-width: none;
}

.competition-tabs::-webkit-scrollbar {
	display: none;
}

.competition-btn {
	border: none;
	background: white;
	color: #071a35;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
	transition: .25s;
}

.competition-btn:hover {
	background: #d71920;
	color: white;
}

.competition-btn.active {
	background: #d71920;
	color: white;
}

.competition-tag {
	display: inline-block;
	background: #eef3ff;
	color: #071a35;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.fixtures-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 25px;
	margin-top: 5px;
}

.fixture-card {
	background: white;
	border-radius: 24px;
	padding: 20px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
	transition: .3s;
	border: 1px solid #edf1f7;
}

.fixture-teams {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.team {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.team img {
	width: 60px;
	height: 60px;
	object-fit: contain;
	margin-bottom: 10px;
}

.team span {
	font-weight: 700;
}

.match-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 100px;
}

.kickoff {
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: #64748b;
	margin-bottom: 10px;
	letter-spacing: .3px;
}

.vs-badge {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #d71920;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 900;
	margin: 0 auto 10px;
	box-shadow: 0 8px 20px rgba(215, 25, 32, .25);
}

.vs {
	background: #d71920;
	color: white;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
}

.competition {
	display: inline-block;
	background: #eef3ff;
	color: #071a35;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	margin: auto;
}

.fixture-footer {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	color: #666;
	font-size: 14px;
}

.fixture-match {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.fixtures-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 30px;
	align-items: start;
}

.live-fixtures {
	padding: 40px 0;
	background: white;
}

.fixture-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}

.team-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	text-align: center;
}

.team-block img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	margin-bottom: 8px;
}

.team-block span {
	font-size: 14px;
	font-weight: 700;
	color: #071a35;
	line-height: 1.3;
}

/* =========================
LEADERBOARD
========================= */

.leaderboard-widget {
	background: white;
	border-radius: 24px;
	padding: 25px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
	position: sticky;
	top: 100px;
}

.leaderboard-row {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}

/* =========================
HOW IT WORKS
========================= */
.how-it-works {
	padding: 100px 0;
	background: #f8fafc;
}


.steps-timeline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 60px;
}

.step-card {
	width: 250px;
	background: white;
	border-radius: 24px;
	padding: 30px;
	text-align: center;
	box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
	transition: .3s;
	position: relative;
}

.step-icon {
	font-size: 42px;
	margin-bottom: 15px;
}

.step-number {
	width: 42px;
	height: 42px;
	background: #d71920;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	margin: 0 auto 20px;
}

.step-arrow {
	font-size: 32px;
	font-weight: 900;
	color: #d71920;
}

.step-card:hover {
	transform: translateY(-10px);
}

.step-card h3 {
	margin-bottom: 12px;
	font-size: 24px;
	color: #071a35;
}

.step-card p {
	color: #64748b;
}

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.step {
	background: white;
	padding: 25px;
	border-radius: 16px;
	text-align: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
}

.number {
	width: 50px;
	height: 50px;
	background: #d71920;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	margin-bottom: 15px;
	font-weight: bold;
}

/* =========================
FOOTER
========================= */
footer {
	background: #071a35;
	color: white;
	padding: 30px 0;
	text-align: center;
}


.card-header {
	font-size: 18px;
	font-weight: 800;
	color: #071a35;
	margin-bottom: 20px;
}

.floating-card {
	animation: float 5s ease-in-out infinite;
}


.download-btn {
	background: #d71920;
	padding: 10px 18px;
	border-radius: 10px;
	color: white !important;
	font-weight: 700;
}

.download-btn:hover {
	transform: translateY(-2px);
}

.btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 700;
	margin: 5px;
}

.btn-primary {
	background: #d71920;
	color: white;
}

.btn-secondary {
	background: white;
	color: #071a35;
}

@keyframes float {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}


.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.card {
	background: white;
	padding: 25px;
	border-radius: 16px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
}

.card h3 {
	margin-bottom: 10px;
}

.faq-item {
	background: white;
	padding: 20px;
	border-radius: 12px;
	margin-bottom: 15px;
}

.leaderboards-section{
    background:linear-gradient(
        135deg,
        #071a35,
        #0d2d5b
    );
    padding:90px 0;
}

.leaderboards-section .section-title{
    color:white;
}

.leaderboards-section .section-subtitle{
    color:rgba(255,255,255,.8);
}

.leaderboard-card{
    background:white;
    border-radius:28px;
    overflow:hidden;
    margin:50px auto 0;
    box-shadow:0 20px 50px rgba(0,0,0,.2);
}

.leaderboard-card-size.{
	width: 100%;
}



.card-size.{
	width: 50%;
}

.leaderboard-header{
    background:#d71920;
    color:white;
    display:grid;
    grid-template-columns:100px 1fr 120px;
    padding:18px 24px;
    font-weight:800;
}

.leaderboard-row{
    display:grid;
    grid-template-columns:100px 1fr 120px;
    padding:18px 24px;
    align-items:center;
    border-bottom:1px solid #edf1f7;
    transition:.2s;
}

.leaderboard-row:hover{
    background:#f8fafc;
}

.rank{
    font-weight:900;
    font-size:18px;
}

.player{
    font-weight:700;
}

.points{
    text-align:right;
    font-weight:900;
    color:#d71920;
}

@media(max-width:768px){

    .leaderboard-header,
    .leaderboard-row{
        grid-template-columns:60px 1fr 80px;
        font-size:14px;
        padding:14px;
    }

}

/* =========================
MOBILE
========================= */
@media (max-width: 992px){

    .hero-content{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .hero-left{
        width:100%;
    }

    .hero-right{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .phone-mockup{
        width:160px;
        max-width:80%;
    }

    .leaderboard-card,
    .fixtures-card{
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;

        width:100%;
        max-width:400px;

        margin:15px auto;
    }

}


@media (max-width:768px){

    .nav{
        min-height:70px;
    }

    .logo{
        font-size:22px;
    }


	.hero{
        padding:50px 0;
    }

    .hero-left h1{
        font-size:42px;
        line-height:1.15;
    }

    .hero-left p{
        font-size:18px;
    }

    .hero-buttons{
        flex-direction:column;
        gap:15px;
    }

    .hero-buttons .btn{
        width:100%;
    }

    .hero-stats{
        justify-content:center;
    }

    .stat-card{
        width:140px;
    }
	
	.phone-mockup{
        display:none;
    }

	.fixtures-card,
	.leaderboard-card {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		margin: 15px auto;
	}
	
	.card-size.{
		width: 50%;
	}
	
	.leaderboard-card-size.{
		width: 100%;
	}

	.fixtures-layout {
		grid-template-columns: 1fr;
	}

	.fixtures-grid {
		grid-template-columns: 1fr;
	}

	.leaderboard-widget {
		position: static;
	}

	.steps-timeline {
		flex-direction: column;
	}

	.step-arrow {
		display: none;
	}

	.step-card {
		width: 100%;
		max-width: 320px;
	}

	.section-title {
		font-size: 32px;
	}

}
@media(max-width:768px){

    .nav{
        flex-wrap:wrap;
    }

    .mobile-menu-btn{
        display:block;
        color:white;
        font-size:32px;
        cursor:pointer;
    }

    .nav-links{
        width:100%;
        max-height:0;
        overflow:hidden;
        flex-direction:column;
        transition:max-height .35s ease;
        background:#071a35;
    }

    .nav-links.show{
		margin-top: 15px;
        max-height:400px;
    }

    .nav-links a{
        text-align:center;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .download-btn{
        margin:15px;
    }

}