:root {
  --piros: #C8102E;
  --feher: #FFFFFF;
  --fekete: #000000;
  --sotetpiros: #900C1A;
  --szurke: #F5F5F5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--szurke); color: var(--fekete); }

/* közös fejléc */
header { background: linear-gradient(135deg, var(--fekete) 0%, var(--sotetpiros) 100%); color: var(--feher); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
nav { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.8rem; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; }
.nav-links { display: flex; gap: 1.5rem; list-style: none; }
.nav-links a { color: var(--feher); text-decoration: none; font-weight: 600; transition: color .3s; }
.nav-links a:hover { color: var(--piros); }

/* hero blokkok szín szerint */
.hero { text-align: center; padding: 7rem 2rem; color: var(--feher); }
.hockey-hero { background: radial-gradient(circle at center, var(--piros), var(--fekete)); }
.speed-hero { background: radial-gradient(circle at center, #00A1DE, #0033A0); }
.roller-hero { background: radial-gradient(circle at center, #FF6A00, #C8102E); }

/* tartalom */
.content { max-width: 800px; margin: 3rem auto; padding: 0 2rem; }
h2 { color: var(--sotetpiros); margin-bottom: 1.5rem; }
.info-box { background: var(--feher); border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.info-box h3 { margin-bottom: .5rem; color: var(--piros); }
.info-box ul { margin-left: 1.2rem; }

/* űrlap */
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: .9rem; margin-bottom: 1rem; border: 2px solid var(--szurke); border-radius: 5px; font-family: inherit; }
.contact-form button { background: var(--piros); color: var(--feher); border: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: bold; border-radius: 5px; cursor: pointer; transition: background .3s; }
.contact-form button:hover { background: var(--sotetpiros); }

/* lábléc */
footer { background: var(--fekete); color: var(--feher); text-align: center; padding: 2rem; margin-top: 4rem; }