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

 :root {
     --primary-red: #E10600;
     --secondary-red: #FF1E00;
     --accent-yellow: #FFD700;
     --gaming-green: #00FF88;
     --gaming-purple: #8B5CF6;
     --text-primary: #FFFFFF;
     --text-secondary: #B8B8B8;
     --background-dark: #0A0A0A;
     --background-card: rgba(255, 255, 255, .05);
     --border-color: rgba(255, 255, 255, .1);
 }

 body {
     font-family: 'Inter', sans-serif;
     background: var(--background-dark);
     color: var(--text-primary);
     overflow-x: hidden;
     line-height: 1.6;
 }


 .hero {
     position: relative;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     overflow: hidden;
     padding: 80px 20px 40px;
 }

 .hero-background {
     position: absolute;
     inset: 0;
     background-image: url('https://images.pexels.com/photos/29276547/pexels-photo-29276547.jpeg?auto=compress&cs=tinysrgb&w=3840');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     z-index: -2;
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(10, 10, 10, .85) 0%, rgba(225, 6, 0, .15) 30%, rgba(10, 10, 10, .9) 70%, rgba(10, 10, 10, .95) 100%);
     z-index: -1;
 }


 .navbar {
     position: fixed;
     inset: 0 0 auto 0;
     padding: 15px 0;
     background: rgba(10, 10, 10, .9);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border-color);
     z-index: 1000;
     transition: all .3s ease;
 }

 .navbar.scrolled {
     padding: 10px 0;
     background: rgba(10, 10, 10, .95);
 }

 .nav-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo {
     font-family: 'Orbitron', monospace;
     font-size: clamp(1rem, 3vw, 1.5rem);
     font-weight: 700;
     color: var(--primary-red);
     text-decoration: none;
     letter-spacing: -.02em;
 }

 .nav-links {
     display: flex;
     gap: clamp(20px, 4vw, 40px);
     list-style: none;
 }

 .nav-links a {
     color: var(--text-secondary);
     text-decoration: none;
     font-weight: 400;
     font-size: clamp(.8rem, 2vw, .95rem);
     transition: color .3s ease;
     position: relative;
 }

 .nav-links a:hover {
     color: var(--text-primary);
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--primary-red);
     transition: width .3s ease;
 }

 .nav-links a:hover::after {
     width: 100%;
 }

 .mobile-menu-btn {
     display: none;
     background: none;
     border: none;
     color: var(--text-primary);
     font-size: 1.5rem;
     cursor: pointer;
 }


 .hero-content {
     max-width: 1000px;
     width: 100%;
     padding: 0 20px;
     z-index: 1;
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .hero-badge {
     display: inline-block;
     padding: clamp(6px, 2vw, 8px) clamp(15px, 4vw, 20px);
     background: rgba(225, 6, 0, .1);
     border: 1px solid var(--primary-red);
     border-radius: 50px;
     color: var(--primary-red);
     font-size: clamp(.7rem, 2vw, .85rem);
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: .5px;
     margin-bottom: clamp(20px, 5vw, 30px);
     animation: fadeInUp .8s ease .2s both;
 }

 .hero-title {
     font-family: 'Space Grotesk', sans-serif;
     font-size: clamp(2.5rem, 8vw, 7rem);
     font-weight: 700;
     line-height: .9;
     margin-bottom: clamp(20px, 5vw, 30px);
     letter-spacing: -.03em;
     animation: fadeInUp .8s ease .4s both;
 }

 .hero-title .highlight {
     background: linear-gradient(135deg, var(--primary-red), var(--accent-yellow));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .hero-subtitle {
     font-size: clamp(1rem, 3vw, 1.8rem);
     font-weight: 300;
     color: var(--text-secondary);
     margin-bottom: clamp(15px, 4vw, 20px);
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
     animation: fadeInUp .8s ease .6s both;
 }


 .hero-powered-by {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     justify-content: center;
     font-family: 'Orbitron', monospace;
     font-size: clamp(.8rem, 2.5vw, 1rem);
     font-weight: 700;
     color: var(--text-primary);
     text-transform: uppercase;
     letter-spacing: clamp(1px, .5vw, 2px);
     margin-bottom: clamp(30px, 6vw, 40px);
     animation: fadeInUp .8s ease .7s both;
 }

 .hero-powered-by img {
     height: clamp(16px, 3vw, 24px);
     width: auto;
     display: block;
     filter: drop-shadow(0 0 8px rgba(255, 255, 255, .15));
 }


 .countdown-container {
     margin: clamp(30px, 6vw, 40px) 0;
     animation: fadeInUp .8s ease .8s both;
 }

 .countdown-title {
     font-size: clamp(1rem, 2.5vw, 1.2rem);
     color: var(--accent-yellow);
     margin-bottom: clamp(15px, 4vw, 20px);
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .countdown {
     display: flex;
     justify-content: center;
     gap: clamp(15px, 4vw, 30px);
     flex-wrap: wrap;
     margin-bottom: clamp(40px, 8vw, 60px);
 }

 .countdown-item {
     background: rgba(255, 255, 255, .05);
     border: 1px solid var(--border-color);
     border-radius: 12px;
     padding: clamp(15px, 4vw, 20px);
     min-width: clamp(80px, 20vw, 100px);
     text-align: center;
     backdrop-filter: blur(10px);
 }

 .countdown-number {
     font-family: 'Orbitron', monospace;
     font-size: clamp(1.8rem, 5vw, 2.5rem);
     font-weight: 700;
     color: var(--primary-red);
     display: block;
     line-height: 1;
 }

 .countdown-label {
     font-size: clamp(.7rem, 2vw, .9rem);
     color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: .5px;
     margin-top: 8px;
 }


 .stats {
     display: flex;
     justify-content: center;
     gap: clamp(30px, 8vw, 60px);
     animation: fadeInUp .8s ease 1s both;
     flex-wrap: wrap;
     margin-top: clamp(20px, 4vw, 30px);
     z-index: 1;
 }

 .stat-item {
     text-align: center;
     background: rgba(255, 255, 255, .03);
     border: 1px solid var(--border-color);
     border-radius: 12px;
     padding: clamp(15px, 4vw, 20px);
     min-width: clamp(80px, 20vw, 100px);
     backdrop-filter: blur(10px);
     transition: all .3s ease;
 }

 .stat-item:hover {
     background: rgba(255, 255, 255, .08);
     border-color: var(--primary-red);
     transform: translateY(-5px);
 }

 .stat-number {
     font-family: 'Space Grotesk', sans-serif;
     font-size: clamp(1.8rem, 5vw, 2.5rem);
     font-weight: 700;
     color: var(--primary-red);
     display: block;
     line-height: 1;
 }

 .stat-label {
     font-size: clamp(.7rem, 2vw, .9rem);
     color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: .5px;
     margin-top: 8px;
 }


 .features,
 .tracks,
 .participants {
     padding: clamp(60px, 12vw, 120px) 0;
     background: var(--background-dark);
 }

 .container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .section-header {
     text-align: center;
     margin-bottom: clamp(40px, 8vw, 80px);
 }

 .section-title {
     font-family: 'Space Grotesk', sans-serif;
     font-size: clamp(2rem, 6vw, 4rem);
     font-weight: 700;
     margin-bottom: clamp(15px, 4vw, 20px);
     letter-spacing: -.02em;
 }

 .section-subtitle {
     font-size: clamp(1rem, 3vw, 1.2rem);
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto;
 }


 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: clamp(20px, 5vw, 40px);
 }

 .feature-card {
     background: var(--background-card);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     padding: clamp(25px, 6vw, 40px);
     transition: all .3s ease;
     backdrop-filter: blur(20px);
 }

 .feature-card:hover {
     transform: translateY(-8px);
     border-color: var(--primary-red);
     box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
 }

 .feature-icon {
     width: clamp(50px, 12vw, 60px);
     height: clamp(50px, 12vw, 60px);
     background: linear-gradient(135deg, var(--primary-red), var(--secondary-red));
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: clamp(1.2rem, 3vw, 1.5rem);
     margin-bottom: clamp(20px, 5vw, 24px);
 }

 .feature-title {
     font-family: 'Space Grotesk', sans-serif;
     font-size: clamp(1.2rem, 3vw, 1.5rem);
     font-weight: 600;
     margin-bottom: clamp(12px, 3vw, 16px);
     color: var(--text-primary);
 }

 .feature-description {
     color: var(--text-secondary);
     line-height: 1.6;
     font-size: clamp(.9rem, 2.5vw, 1rem);
 }


 .tracks-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: clamp(24px, 5vw, 36px);
 }

 .track-card {
     overflow: hidden;
     border-radius: 16px;
     border: 1px solid var(--border-color);
     background: var(--background-card);
     backdrop-filter: blur(16px);
     transition: transform .3s ease, border-color .3s ease;
     display: flex;
     flex-direction: column;
     min-height: 300px;
 }

 .track-card:hover {
     transform: translateY(-6px);
     border-color: var(--primary-red);
 }


 .track-country-label {
     background: var(--background-dark);
     border: 1px solid var(--border-color);
     color: #ffd700;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 0.9rem;
     font-weight: 500;
     padding: 8px 16px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin: 12px 12px 0 12px;
     border-radius: 8px;
     width: fit-content;
 }

 .track-main-section {
     position: relative;
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 12px;
     border-radius: 12px;
     overflow: hidden;
     min-height: 180px;
 }

 .track-image {
     max-width: 100%;
     height: 200px;
     object-fit: contain;
     display: block;
     margin: 0 auto;
 }


 .video-slider {
     position: relative;
     overflow: hidden;
     border-radius: 16px;
     max-width: 900px;
     margin: 0 auto;
     box-shadow: 0 0 25px rgba(0, 0, 0, .5);
 }

 .video-slider .slides {
     display: flex;
     transition: transform 0.5s ease;
 }

 .video-slider video {
     min-width: 100%;
     height: 500px;
     object-fit: cover;
     border-radius: 16px;
 }

 .race-warning {
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: #FFD700;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.95rem;
  border-radius: 8px;
  padding: 10px 16px;
  margin-top: 10px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
  animation: pulseWarning 2.2s ease-in-out infinite;
}

.gp-results-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 20px;
}

.gp-card {
  background: linear-gradient(145deg, #1a1a1a, #101010);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 6px solid var(--primary-red, #e10600);
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 15px rgba(225, 6, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 25px rgba(225, 6, 0, 0.25);
}
.gp-card h3 {
  font-size: 1.3rem;
  color: var(--accent-yellow, #ffd700);
  margin-bottom: 10px;
}
.gp-card table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  font-size: 0.95rem;
}
.gp-card td, .gp-card th {
  padding: 6px 4px;
}
.total-earnings {
  margin-top: 50px;
}
.total-earnings table td, .total-earnings table th {
  text-align: center;
}

/* Subtelna animacja migania koloru ostrzeżenia */
@keyframes pulseWarning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}


 .video-slider .prev,
 .video-slider .next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0.6);
     border: none;
     color: white;
     font-size: 2rem;
     padding: 10px;
     cursor: pointer;
     border-radius: 50%;
     z-index: 10;
     transition: background 0.3s ease;
 }

 .race-info-note {
     display: block;
     margin: 16px auto 20px;
     padding: 16px 24px;
     font-size: 1.4rem;
     font-weight: 800;
     color: #000 !important;
     background: var(--accent-yellow);
     border-radius: 10px;
     text-align: center;
     max-width: 100%;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
     letter-spacing: 1px;
 }

 .video-slider .prev:hover,
 .video-slider .next:hover {
     background: rgba(225, 6, 0, 0.8);
 }


 .participant-card.instagram:hover {
     border-color: #E1306C;
     box-shadow:
         0 0 0 2px rgba(225, 48, 108, 0.25),
         0 20px 40px rgba(225, 48, 108, 0.12);
 }

 .participant-card.instagram .participant-avatar:hover {
     transform: scale(1.08);
     box-shadow: 0 0 20px #E1306C;
 }

 .participant-card.instagram .participant-platform {
     background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 700;
 }

 .participant-card.instagram .participant-name:hover {
     color: #E1306C;
 }

 .race-results h4 {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 1.2rem;
     margin-bottom: 12px;
     color: var(--accent-yellow);
     text-align: center;
 }

 .race-results {
     max-height: 60vh;
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--primary-red) rgba(255, 255, 255, 0.1);
 }

.results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  color: var(--text-primary);
  font-size: 0.95rem;
}

 .results-table thead {
     background: var(--primary-red);
     color: #fff;
 }

 .results-table th {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-yellow);
  font-weight: 600;
  font-size: 0.9rem;
}

.results-table tbody tr:nth-child(1) td {
  background: linear-gradient(90deg, #ffd70022 0%, #ffd70033 100%);
  color: #ffd700;
  font-weight: 700;

}
.results-table tbody tr:nth-child(2) td {
  background: linear-gradient(90deg, #c0c0c022 0%, #c0c0c033 100%);
  color: #c0c0c0;
  font-weight: 600;

}
.results-table tbody tr:nth-child(3) td {
  background: linear-gradient(90deg, #cd7f3222 0%, #cd7f3233 100%);
  color: #cd7f32;
  font-weight: 600;

}

.results-table th,
.results-table td {

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
  text-align: center;
}

 .results-table tr:nth-child(even) {
     background: rgba(255, 255, 255, 0.03);
 }

 .results-table tr:hover {
     background: rgba(225, 6, 0, 0.15);
     transition: background 0.3s ease;
 }

 .results-table td:first-child {
     font-weight: 700;
     color: var(--primary-red);
 }


 .video-slider .prev {
     left: 10px;
 }

 .video-slider .next {
     right: 10px;
 }

 .track-info-section {
     background: var(--background-dark);
     border: 1px solid var(--border-color);
     margin: 0 12px 12px 12px;
     border-radius: 8px;
     padding: 12px 16px;
 }


 .track-name {
     color: var(--text-primary);
     font-family: 'Space Grotesk', sans-serif;
     font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 8px;
 }



 .track-description {
     color: var(--text-secondary);
     font-size: 0.9rem;
     line-height: 1.4;
 }


 .sponsors {
     padding: clamp(40px, 8vw, 80px) 0;
     background: rgba(255, 255, 255, .02);
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
 }

 .soon-text {
     text-align: center;
     font-family: 'Space Grotesk', sans-serif;
     font-size: clamp(2rem, 6vw, 3rem);
     font-weight: 700;
     color: var(--text-secondary);
     opacity: .5;
     text-transform: uppercase;
     letter-spacing: 2px;
 }


 .participants-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: clamp(20px, 5vw, 30px);
     margin-top: clamp(30px, 6vw, 60px);
 }

 .participant-card {
     background: var(--background-card);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     padding: clamp(20px, 5vw, 30px);
     text-align: center;
     transition: all .3s ease;
     backdrop-filter: blur(20px);
 }

 .participant-card:hover {
     transform: translateY(-8px);
 }


 .participant-card.twitch:hover {
     border-color: #9146FF;
     box-shadow:
         0 0 0 2px rgba(145, 70, 255, .25),
         0 20px 40px rgba(145, 70, 255, .12);
 }


 .participant-card.kick:hover {
     border-color: #00FF88;
     box-shadow:
         0 0 0 2px rgba(0, 255, 136, .25),
         0 20px 40px rgba(0, 255, 136, .12);
 }


 .participant-card.twitch:focus-within {
     outline: none;
     border-color: #9146FF;
     box-shadow: 0 0 0 3px rgba(145, 70, 255, .35);
 }

 .participant-card.kick:focus-within {
     outline: none;
     border-color: #00FF88;
     box-shadow: 0 0 0 3px rgba(0, 255, 136, .35);
 }

 .participant-avatar {
     width: clamp(60px, 15vw, 100px);
     height: clamp(60px, 15vw, 100px);
     border-radius: 50%;
     margin: 0 auto 15px;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .participant-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 50%;
 }

 .participant-card.twitch .participant-avatar:hover {
     transform: scale(1.08);
     box-shadow: 0 0 20px #9146FF;
 }

 .participant-card.kick .participant-avatar:hover {
     transform: scale(1.08);
     box-shadow: 0 0 20px #00FF88;
 }

 .participant-card.twitch .participant-platform {
     color: #9146FF;
     font-weight: 600;
 }

 .participant-card.kick .participant-platform {
     color: #00FF88;
     font-weight: 600;
 }

 .participant-name {
     font-family: 'Space Grotesk', sans-serif;
     font-size: clamp(1rem, 3vw, 1.2rem);
     font-weight: 600;
     color: var(--text-primary);
     text-decoration: none;
     transition: color 0.3s ease;
     display: block;
     margin-bottom: 5px;
 }

 .participant-card.twitch .participant-name:hover {
     color: #9146FF;
 }

 .participant-card.kick .participant-name:hover {
     color: #00FF88;
 }

 .participant-platform {
     color: var(--gaming-green);
     font-size: clamp(.8rem, 2vw, .9rem);
     text-transform: uppercase;
     letter-spacing: .5px;
 }

 .more-participants {
     text-align: center;
     margin-top: clamp(30px, 6vw, 40px);
     font-size: clamp(1rem, 3vw, 1.2rem);
     color: var(--text-secondary);
     font-style: italic;
 }


 .footer {
     background: var(--background-dark);
     border-top: 1px solid var(--border-color);
     padding: clamp(40px, 8vw, 60px) 0 clamp(30px, 6vw, 40px);
 }

 .footer-content {
     text-align: center;
     margin-bottom: clamp(30px, 6vw, 40px);
 }

 .footer-logo {
     font-family: 'Space Grotesk', sans-serif;
     font-size: clamp(1.5rem, 4vw, 2rem);
     font-weight: 700;
     color: var(--primary-red);
     margin-bottom: clamp(15px, 4vw, 20px);
 }

 .footer-description {
     color: var(--text-secondary);
     max-width: 500px;
     margin: 0 auto clamp(30px, 6vw, 40px);
     font-size: clamp(.9rem, 2.5vw, 1rem);
 }

 .footer-bottom {
     border-top: 1px solid var(--border-color);
     padding-top: clamp(20px, 5vw, 30px);
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
     font-size: clamp(.8rem, 2vw, .9rem);
 }


 .powered-by {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-family: 'Orbitron', monospace;
     font-size: clamp(.9rem, 2.5vw, 1.1rem);
     font-weight: 700;
     color: var(--text-primary);
     text-transform: uppercase;
     letter-spacing: clamp(1px, .5vw, 2px);
 }

 .powered-by img {
     height: clamp(16px, 3vw, 22px);
     width: auto;
     display: block;
 }

 .floating-car {
     position: fixed;
     bottom: 25px;
     right: 25px;
     font-size: 2.5rem;
     background: var(--primary-red);
     color: #fff;
     border-radius: 50%;
     width: 60px;
     height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     box-shadow: 0 0 20px rgba(225, 6, 0, 0.6);
     animation: carPulse 1.5s infinite;
     z-index: 2000;
     transition: transform 0.3s ease;
 }

 .floating-car:hover {
     transform: scale(1.1);
     box-shadow: 0 0 25px rgba(255, 50, 50, 0.8);
 }

 @keyframes carPulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }

     100% {
         transform: scale(1);
     }
 }


 .stream-popup {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.7);
     z-index: 3000;
     justify-content: center;
     align-items: center;
     backdrop-filter: blur(5px);
 }

 .race-countdown {
     margin-top: 12px;
     font-family: 'Orbitron', monospace;
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--accent-yellow);
     letter-spacing: 1px;
 }

 .race-countdown span {
     display: inline-block;
     min-width: 28px;
     text-align: center;
 }

 .stream-popup-content {
     background: var(--background-dark);
     border: 1px solid var(--primary-red);
     padding: 25px;
     border-radius: 16px;
     max-width: 400px;
     width: 90%;
     text-align: center;
     box-shadow: 0 0 30px rgba(225, 6, 0, 0.5);
     animation: popupFade 0.3s ease forwards;
 }

 .stream-popup-content h3 {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 1.4rem;
     color: var(--primary-red);
     margin-bottom: 10px;
 }

 .stream-popup-content p {
     font-size: 1rem;
     color: var(--text-secondary);
     margin-bottom: 20px;
 }

 .watch-button {
     display: inline-block;
     padding: 12px 20px;
     background: var(--primary-red);
     color: white;
     font-weight: bold;
     font-family: 'Space Grotesk', sans-serif;
     text-decoration: none;
     border-radius: 8px;
     transition: background 0.3s ease, transform 0.2s ease;
 }

 .watch-button:hover {
     background: var(--secondary-red);
     transform: scale(1.05);
 }

 .close-popup {
     position: absolute;
     top: 15px;
     right: 20px;
     font-size: 1.8rem;
     color: var(--text-secondary);
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .close-popup:hover {
     color: white;
 }


 .race-calendar {
     padding: clamp(60px, 12vw, 120px) 0;
     background: var(--background-dark);
 }

 .race-calendar-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: clamp(20px, 5vw, 30px);
 }

 .race-card {
     background: var(--background-card);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     padding: 20px;
     text-align: center;
     backdrop-filter: blur(16px);
     transition: transform 0.3s ease, border-color 0.3s ease;
 }

 .race-card:hover {
     transform: translateY(-6px);
     border-color: var(--primary-red);
 }

 .race-date {
     font-family: 'Orbitron', monospace;
     font-size: 1rem;
     font-weight: 600;
     color: var(--accent-yellow);
     margin-bottom: 8px;
 }

 .race-name {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 1.2rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 8px;
 }

 .race-location {
     font-size: 0.9rem;
     color: var(--text-secondary);
 }


 .classifications {
     padding: clamp(60px, 12vw, 120px) 0;
     background: var(--background-dark);
 }

 .classification-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: clamp(24px, 5vw, 40px);
 }

.classification-card {
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.classification-card .results-table {
    width: 100%;
    min-width: unset;
    max-width: 800px;
    font-size: 0.9rem;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    border-collapse: collapse;
    box-shadow: 0 0 15px rgba(0, 0, 0, .25);
}

.hero-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 25px;
  flex-wrap: wrap;
  animation: fadeInUp .8s ease 0.9s both;
}

.stream-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  border-radius: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
  min-width: 260px;
  text-align: center;
}

/* Kolory przycisków */
.stream-button.twitch {
  background: linear-gradient(90deg, #9146FF, #772CE8);
  color: #fff;
}
.stream-button.kick {
  background: linear-gradient(90deg, #00FF88, #00cc6a);
  color: #000;
}
.stream-button.all-streams {
  background: linear-gradient(90deg, #E10600, #FF1E00);
  color: #fff;
}

/* Hover efekt */
.stream-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.25);
}

/* Tooltip */
.tooltip-icon {
  display: inline-block;
  margin-left: 8px;
  font-size: 1.1rem;
  cursor: help;
  color: var(--accent-yellow);
  position: relative;
}

.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.3;
  white-space: normal;
  max-width: 260px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 100;
}

.tooltip-icon:hover::after {
  opacity: 1;
}

/* Responsywność */
@media (max-width: 768px) {
  .hero-buttons {
    flex-direction: column;
  }
  .stream-button {
    width: 100%;
  }
}
.penalties .results-table tbody tr:nth-child(1) td,
.penalties .results-table tbody tr:nth-child(2) td,
.penalties .results-table tbody tr:nth-child(3) td {
  background: none !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* Opcjonalne subtelne dopracowanie wyglądu */
.penalties .results-table tbody tr:hover {
  background: rgba(225, 6, 0, 0.12);
}

.penalties .results-table td.penalty-time {
  color: var(--accent-yellow);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.penalties .results-table td:last-child {
  color: var(--text-secondary);
  font-style: italic;
}



.classification-card .results-table thead th {
    font-size: 1rem;
    padding: 10px 8px;
}

.classification-card .results-table td {
    padding: 8px 10px;
    text-align: center;
}

.classification-card .results-table tr:hover {
    background: rgba(225, 6, 0, 0.12);
    transition: background 0.3s ease;
}
.success-banner {
  background: rgba(0, 255, 136, 0.12);
  border: 2px solid #00ff88;
  color: #00ff88;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  padding: 15px 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
  font-size: 1.1rem;
  animation: glowSuccess 3s infinite ease-in-out;
}

@keyframes glowSuccess {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
    color: #00ff88;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 35px rgba(0, 255, 136, 0.7);
    color: #7dffb8;
    transform: scale(1);
  }
}
.alert-banner {
  background: rgba(225, 6, 0, 0.15);
  border: 2px solid #e10600;
  color: #ff4444;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  padding: 15px 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(225, 6, 0, 0.4);
  animation: pulseAlert 1.8s infinite ease-in-out;
  font-size: 1.1rem;
}

@keyframes pulseAlert {
  0%, 100% {
    box-shadow: 0 0 20px rgba(225, 6, 0, 0.5);
    color: #ff4c4c;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 0, 0, 1);
    color: #ff8080;
    transform: scale(1.02);
  }
}

/* === Nagłówek toru: wyrównanie kraju i przycisku === */
.track-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 🟢 to wyrównuje idealnie w pionie */
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* === Etykieta kraju === */
.track-country-label {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--accent-yellow);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* === Przycisk oglądania === */
.watch-race-btn {
  display: inline-flex;
  align-items: center;             
  justify-content: center;        
  text-align: center;             
  gap: 6px;
  background: linear-gradient(90deg, #e10600 0%, #ff1e00 100%);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  box-shadow: 0 0 12px rgba(225, 6, 0, 0.35);
  transition: all 0.25s ease;
  line-height: 1;
  vertical-align: middle;
  height: 34px; /* 🟨 dopasowane do AUSTRIA label */
  margin: 12px 12px 0 12px; /* 🟥 Twój wymóg */
}

.watch-race-btn:hover {
  background: linear-gradient(90deg, #ff1e00 0%, #ff4c00 100%);
  box-shadow: 0 0 18px rgba(255, 30, 0, 0.6);
  transform: translateY(-1px);
}

.watch-race-btn.disabled {
  background: linear-gradient(90deg, #4a4a4a 0%, #5c5c5c 100%);
  color: #bcbcbc;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.8;
  height: 34px;
  margin: 12px 12px 0 12px;
  transition: none;
}

.watch-race-btn.disabled:hover {
  background: linear-gradient(90deg, #4a4a4a 0%, #5c5c5c 100%);
  transform: none;
  box-shadow: none;
}

.watch-race-btn:active {
  transform: scale(0.97);
}

/* === Mobile poprawka === */
@media (max-width: 600px) {
  .track-header {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .watch-race-btn {
    justify-content: center;
  }
}


/* nagłówek "Klasyfikacja Drużyn" lepiej wycentrowany i z marginesem */
.classification-card h3 {
    margin-bottom: 18px;
    font-size: 1.3rem;
}

/* lepsze dopasowanie na urządzeniach mobilnych */
@media (max-width: 768px) {
    .classification-card .results-table {
        font-size: 0.8rem;
        max-width: 100%;
    }

    .classification-card .results-table th,
    .classification-card .results-table td {
        padding: 6px;
    }
}
 .classification-card h3 {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 1.4rem;
     font-weight: 700;
     margin-bottom: 15px;
     color: var(--primary-red);
     text-align: center;
 }

 .race-modal {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.75);
     backdrop-filter: blur(6px);
     z-index: 4000;
     justify-content: center;
     align-items: center;
 }

 .race-modal-content {
     background: var(--background-dark);
     border: 1px solid var(--primary-red);
     border-radius: 16px;
     padding: 25px;
     max-width: 90%;
     width: 90%;
     max-height: 85vh;
     overflow-y: auto;
     text-align: center;
     box-shadow: 0 0 30px rgba(225, 6, 0, 0.6);
     animation: popupFade 0.3s ease forwards;
 }

 .race-modal-content h3 {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 1.6rem;
     font-weight: 700;
     color: var(--primary-red);
     margin-bottom: 10px;
 }

 .race-modal-content p {
     color: var(--text-secondary);
     font-size: 1rem;
     margin: 6px 0;
 }

 .race-modal-content .race-location {
     color: var(--accent-yellow);
     font-weight: 600;
 }

 .results-table tr.gold td:first-child {
     color: #FFD700;
     font-weight: 900;
     font-size: 1.1rem;
 }

 .results-table tr.silver td:first-child {
     color: #C0C0C0;
     font-weight: 900;
 }

 .results-table tr.bronze td:first-child {
     color: #CD7F32;
     font-weight: 900;
 }


 .results-table tr.gold {
     background: rgba(255, 215, 0, 0.1);
 }

 .results-table tr.silver {
     background: rgba(192, 192, 192, 0.1);
 }

 .results-table tr.bronze {
     background: rgba(205, 127, 50, 0.1);
 }

 .race-results::-webkit-scrollbar {
     width: 10px;
 }

 .race-results::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
 }

 .race-results::-webkit-scrollbar-thumb {
     background: linear-gradient(180deg, var(--primary-red), var(--secondary-red));
     border-radius: 10px;
     border: 2px solid rgba(0, 0, 0, 0.4);
 }

 .race-results::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(180deg, #ff3b3b, #b30000);
 }

 .close-race-modal {
     position: absolute;
     top: 20px;
     right: 25px;
     font-size: 2rem;
     color: var(--text-secondary);
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .close-race-modal:hover {
     color: white;
 }


 .classification-card ol {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .classification-card li {
     display: flex;
     justify-content: space-between;
     padding: 8px 0;
     border-bottom: 1px solid var(--border-color);
     font-size: 0.95rem;
     color: var(--text-secondary);
 }

 .classification-card li:last-child {
     border-bottom: none;
 }

 .classification-card li span {
     font-weight: 600;
     color: var(--text-primary);
 }

 .race-card.finished {
     border-color: #28a745;
     opacity: 0.9;
 }

 .race-card .race-status {
     margin-top: 12px;
     font-family: 'Orbitron', monospace;
     font-size: 1rem;
     font-weight: 700;
     color: #28a745;
     text-transform: uppercase;
     letter-spacing: 1px;
 }


 .highlights {
     padding: clamp(60px, 12vw, 120px) 0;
     background: var(--background-dark);
 }

 .highlights-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
     gap: clamp(24px, 5vw, 48px);
 }

 .highlight-card iframe {
     width: 100%;
     height: 340px;
     border-radius: 16px;
 }

 .twitch-button {
     display: inline-block;
     margin: 20px auto 40px;
     padding: 14px 28px;
     background: linear-gradient(135deg, #9146FF, #772ce8);
     color: #fff;
     font-family: 'Space Grotesk', sans-serif;
     font-weight: 700;
     font-size: 1rem;
     text-transform: uppercase;
     text-decoration: none;
     border-radius: 12px;
     box-shadow: 0 0 15px rgba(145, 70, 255, .5);
     transition: all 0.3s ease;
 }

 .twitch-button:hover {
     background: linear-gradient(135deg, #a970ff, #9146FF);
     transform: scale(1.05);
     box-shadow: 0 0 20px rgba(145, 70, 255, .7);
 }

 .race-hint {
     font-size: 0.8rem;
     color: var(--text-secondary);
     margin-top: 6px;
     font-style: italic;
     text-align: center;
 }

 .results-table tr.driver-of-day {
     background: rgba(0, 255, 136, 0.12);
     border-left: 4px solid var(--gaming-green);
 }

 .results-table tr.driver-of-day td {
     font-weight: 700;
     color: var(--gaming-green);
 }

 .results-table tr.driver-of-day td:first-child::after {
     content: " 🏆";
 }

 .kierowca-dnia-badge {
     display: inline-block;
     margin-left: 6px;
     padding: 2px 6px;
     background: var(--gaming-green);
     color: #000;
     font-size: 0.7rem;
     font-weight: 700;
     border-radius: 6px;
     text-transform: uppercase;
 }

 .rules-modal {
  display: none; /* domyślnie ukryte */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  z-index: 5000;
  justify-content: center;
  align-items: center;
}

.rules-modal-content {
  position: relative;
  background: var(--background-dark);
  border: 1px solid var(--primary-red);
  border-radius: 16px;
  padding: 30px;
  max-width: 700px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
  box-shadow: 0 0 30px rgba(225,6,0,0.6);
  animation: popupFade 0.3s ease forwards;
}

/* nagłówki */
.rules-modal-content h2 {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--primary-red);
  margin-bottom: 20px;
  text-align: center;
}

.rules-modal-content h3 {
  margin: 20px 0 10px;
  color: var(--accent-yellow);
  font-size: 1.2rem;
  border-left: 4px solid var(--primary-red);
  padding-left: 8px;
}

.rules-modal-content ul {
  list-style: disc;
  margin-left: 20px;
  margin-bottom: 15px;
}

/* przycisk zamknięcia */
.close-rules {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 2rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-rules:hover {
  color: #fff;
}

/* custom scrollbar */
.rules-modal-content::-webkit-scrollbar {
  width: 8px;
}

.rules-modal-content::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
}

.rules-modal-content::-webkit-scrollbar-thumb {
  background: var(--primary-red);
  border-radius: 8px;
}

.rules-modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-red);
}

.vote-button {
  display: inline-block;
  margin-top: 18px;
  padding: 18px 40px;
  background: linear-gradient(90deg, #e10600, #ff2e00);
  color: white;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(225, 6, 0, 0.4);
  transition: all 0.3s ease;
  
  opacity: 0.6;
}

.rules {
  padding: clamp(60px, 12vw, 120px) 0;
  background: var(--background-dark);
}

.rules .container {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--background-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: clamp(30px, 5vw, 50px);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
}

.rules .section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  text-align: center;
  color: var(--accent-yellow);
  margin-bottom: clamp(25px, 6vw, 40px);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rules h3 {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--primary-red);
  font-weight: 700;
  font-size: 1.3rem;
  margin-top: 35px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rules p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 10px;
}

.rules ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.rules li {
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
  font-size: 1rem;
  line-height: 1.6;
}

.rules li::before {
  content: "•";
  color: var(--primary-red);
  font-weight: 700;
  position: absolute;
  left: 0;
}
.sponsors {
  padding: clamp(60px, 10vw, 100px) 0;
  background: var(--background-dark);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.sponsors-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(80px, 10vw, 160px);
  flex-wrap: wrap;
  text-align: center;
}

.footer-credit {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px;
  opacity: 0.75;
}

.footer-credit span {
  color: var(--accent-yellow);
  font-weight: 700;
}

.sponsor-card img {
  max-width: clamp(220px, 30vw, 300px);
  height: auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.95;
}

.sponsor-card img:hover {
  transform: scale(1.08);
  opacity: 1;
}


/* Sekcja nagród */
.rewards-section {
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 0 20px rgba(225, 6, 0, 0.1);
}

.rewards-section h4 {
  color: var(--accent-yellow);
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-top: 25px;
  margin-bottom: 8px;
}

.rewards-section p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.rewards-list {
  list-style: none;
  padding-left: 0;
}

.rewards-list li {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s ease;
}

.rewards-list li:hover {
  color: var(--accent-yellow);
}

.rewards-list strong {
  color: var(--accent-yellow);
}

/* Animacja fade-in (spójna z resztą strony) */
.rules .fade-in {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.8s ease-out;
}

.rules .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsywność */
@media (max-width: 768px) {
  .rules .container {
    padding: 25px 20px;
  }

  .rules .section-title {
    font-size: 1.8rem;
  }

  .rules h3 {
    font-size: 1.1rem;
  }

  .rewards-section {
    padding: 20px;
  }

  .rewards-list li {
    font-size: 0.95rem;
  }
}

.vote-button:hover {
  transform: scale(1.03);
}

.vote-button.disabled {
  pointer-events: none;
  filter: grayscale(60%);
}


 @keyframes popupFade {
     from {
         transform: scale(0.9);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }


 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .fade-in {
     opacity: 0;
     transform: translateY(30px);
     transition: all .8s ease;
 }

 .fade-in.visible {
     opacity: 1;
     transform: translateY(0);
 }


 @media (max-width:768px) {
     .hero-background {
         background-attachment: scroll;
     }

     .nav-links {
         display: none;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         background: rgba(10, 10, 10, .95);
         flex-direction: column;
         padding: 20px;
         border-top: 1px solid var(--border-color);
     }

     .nav-links.active {
         display: flex;
     }

     .mobile-menu-btn {
         display: block;
     }

     .hero {
         padding: 100px 20px 60px;
     }

     .countdown {
         gap: 10px;
         margin-bottom: 30px;
     }

     .countdown-item {
         min-width: 70px;
         padding: 12px;
     }

     .stats {
         gap: 15px;
         margin-top: 20px;
     }

     .stat-item {
         min-width: 70px;
         padding: 12px;
     }

     .features-grid,
     .participants-grid,
     .tracks-grid {
         grid-template-columns: 1fr;
     }

     .footer-bottom {
         flex-direction: column;
         text-align: center;
         gap: 15px;
     }
 }

 @media (max-width:480px) {
     .hero {
         padding: 90px 15px 50px;
     }

     .container {
         padding: 0 15px;
     }

     .nav-container {
         padding: 0 15px;
     }

     .countdown {
         gap: 8px;
         margin-bottom: 25px;
     }

     .countdown-item {
         min-width: 60px;
         padding: 10px;
     }

     .stats {
         gap: 10px;
         margin-top: 15px;
     }

     .stat-item {
         min-width: 60px;
         padding: 10px;
     }

     .participants-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width:1920px) {
     .hero-title {
         font-size: 8rem;
     }

     .section-title {
         font-size: 5rem;
     }

     .container {
         max-width: 1600px;
     }
 }

 @media (min-width:769px) and (max-width:1024px) {
     .features-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .participants-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .tracks-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }


 @media (-webkit-min-device-pixel-ratio:2),
 (min-resolution:192dpi) {
     .hero-background {
         background-image: url('https://images.pexels.com/photos/29276547/pexels-photo-29276547.jpeg?auto=compress&cs=tinysrgb&w=3840');
     }
 }