:root{ --black:#0a0a0a; --dark:#1a1a1a; --red:#c41e3a; --red-hover:#a0182e; --orange:#ff8c00; --orange-hover:#e67e00; --yellow:#ffd700; --white:#ffffff; --gray:#a0a0a0; --gray-light:#d0d0d0 }
*{ margin:0; padding:0; box-sizing:border-box }
html,body{ height:100%; background:var(--black); color:var(--white); font-family:'Roboto Condensed',sans-serif; line-height:1.6 }
a{ color:inherit; text-decoration:none }
.container{ max-width:1200px; margin:0 auto; padding:0 32px }
.site-header{ position:sticky; top:0; z-index:100; background:rgba(10,10,10,0.95); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.1) }
.header-inner{ display:flex; justify-content:space-between; align-items:center; padding:20px 32px }
.logo{ font-family:'Oswald',sans-serif; font-size:1.8rem; font-weight:700; letter-spacing:4px; background:linear-gradient(135deg, var(--orange) 0%, var(--yellow) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.nav{ display:flex; gap:32px }
.nav-link{ font-size:0.95rem; font-weight:400; letter-spacing:2px; padding:8px 0; border-bottom:2px solid transparent; transition:all 0.3s ease }
.nav-link:hover{ border-color:var(--orange); color:var(--orange) }
.hero{ position:relative; min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.9) 100%), url('https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?w=1920&q=80') center/cover; border-bottom:1px solid rgba(255,255,255,0.1) }
.hero-content{ padding:80px 20px }
.hero-date{ font-size:1.4rem; letter-spacing:12px; color:var(--orange); margin-bottom:20px; font-weight:700 }
.hero-title{ font-family:'Oswald',sans-serif; font-size:3.5rem; font-weight:700; letter-spacing:6px; line-height:1.3; margin-bottom:24px; text-shadow:2px 2px 8px rgba(0,0,0,0.8) }
.hero-location{ font-size:1.2rem; letter-spacing:4px; color:var(--yellow); margin-bottom:40px; font-weight:500 }
.hero-actions{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap }
.btn-hero{ display:inline-block; padding:14px 32px; background:var(--orange); color:var(--black); font-weight:700; letter-spacing:2px; border:2px solid var(--orange); transition:all 0.3s ease }
.btn-hero:hover{ background:var(--orange-hover); border-color:var(--orange-hover); transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,140,0,0.4) }
.btn-hero-outline{ background:transparent; border:2px solid var(--white); color:var(--white) }
.btn-hero-outline:hover{ background:var(--white); color:var(--black); border-color:var(--white) }
.section{ padding:80px 0; border-bottom:1px solid rgba(255,255,255,0.05) }
.section-title{ font-family:'Oswald',sans-serif; font-size:2.2rem; font-weight:700; letter-spacing:4px; text-align:center; margin-bottom:48px; background:linear-gradient(135deg, var(--orange) 0%, var(--yellow) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.section-content{ max-width:900px; margin:0 auto; text-align:center; font-size:1.1rem; line-height:1.8; color:var(--gray-light) }
.section-content p{ margin-bottom:20px }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px }
.card{ background:var(--dark); border:1px solid rgba(255,140,0,0.2); padding:32px 24px; transition:all 0.3s ease; position:relative; overflow:hidden }
.card::before{ content:''; position:absolute; top:0; left:0; width:4px; height:0; background:linear-gradient(180deg, var(--orange) 0%, var(--yellow) 100%); transition:height 0.3s ease }
.card:hover::before{ height:100% }
.card:hover{ border-color:var(--orange); transform:translateY(-4px); box-shadow:0 12px 30px rgba(255,140,0,0.3) }
.card h3{ font-family:'Oswald',sans-serif; font-size:1.3rem; font-weight:700; letter-spacing:2px; margin-bottom:16px; color:var(--white) }
.card p{ color:var(--gray); line-height:1.6 }
.contact-content{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1000px; margin:0 auto }
.contact-info{ font-size:1.1rem; letter-spacing:1px }
.contact-item{ margin-bottom:16px }
.contact-item a{ color:var(--orange); font-weight:700 }
.contact-item a:hover{ text-decoration:underline; color:var(--yellow) }
.contact-cta{ text-align:center }
.contact-cta p{ font-size:1.3rem; margin-bottom:24px; color:var(--gray-light) }
.btn-cta{ display:inline-block; padding:14px 40px; background:var(--orange); color:var(--black); font-weight:700; letter-spacing:3px; border:2px solid var(--orange); transition:all 0.3s ease }
.btn-cta:hover{ background:var(--orange-hover); border-color:var(--orange-hover); transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,140,0,0.4) }
.site-footer{ background:var(--dark); border-top:1px solid rgba(255,140,0,0.3); padding:40px 0; text-align:center }
.footer-content{ display:flex; flex-direction:column; gap:12px }
.footer-brand{ font-family:'Oswald',sans-serif; font-size:1.5rem; font-weight:700; letter-spacing:5px; background:linear-gradient(135deg, var(--orange) 0%, var(--yellow) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.footer-text{ color:var(--gray); letter-spacing:2px; font-size:0.95rem }
.footer-links{ margin-top:8px; font-size:0.9rem }
.footer-links a{ color:var(--gray); transition:color 0.3s ease }
.footer-links a:hover{ color:var(--orange) }
.footer-copy{ color:var(--gray); font-size:0.85rem; margin-top:8px }
.legal-content{ background:var(--black) }
.legal-text{ max-width:900px; margin:0 auto; color:var(--gray-light); line-height:1.8 }
.legal-text h2{ font-family:'Oswald',sans-serif; font-size:1.5rem; font-weight:700; letter-spacing:2px; margin-top:40px; margin-bottom:16px; color:var(--orange) }
.legal-text h2:first-child{ margin-top:0 }
.legal-text p{ margin-bottom:16px }
.legal-text ul{ margin:16px 0; padding-left:32px }
.legal-text li{ margin-bottom:12px }
.legal-text strong{ color:var(--white) }
.legal-text a{ color:var(--orange); font-weight:700 }
.legal-text a:hover{ color:var(--yellow); text-decoration:underline }
.photo-banner{ position:relative; height:400px; background:linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.8) 100%), url('https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?w=1920&q=80') center/cover; display:flex; align-items:center; justify-content:center; border-bottom:1px solid rgba(255,255,255,0.1) }
.banner-overlay{ text-align:center }
.banner-title{ font-family:'Oswald',sans-serif; font-size:2.5rem; font-weight:700; letter-spacing:6px; text-shadow:2px 2px 12px rgba(0,0,0,0.9); background:linear-gradient(135deg, var(--orange) 0%, var(--yellow) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.gallery{ background:var(--black); padding:80px 0 }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.gallery-item{ position:relative; overflow:hidden; aspect-ratio:1; cursor:pointer }
.gallery-item-wide{ grid-column:span 2 }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease, filter 0.5s ease; filter:grayscale(0.3) brightness(0.8) }
.gallery-item:hover img{ transform:scale(1.1); filter:grayscale(0) brightness(1) }
.gallery-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, rgba(255,140,0,0.9) 100%); opacity:0; transition:opacity 0.4s ease; display:flex; align-items:flex-end; padding:24px }
.gallery-item:hover .gallery-overlay{ opacity:1 }
.gallery-label{ font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:3px; font-size:1.1rem; color:var(--black); text-shadow:0 2px 4px rgba(255,255,255,0.3) }
.stats-banner{ background:linear-gradient(135deg, var(--orange) 0%, var(--red) 100%); padding:60px 0; border-top:3px solid var(--yellow); border-bottom:3px solid var(--yellow) }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:center }
.stat-item{ display:flex; flex-direction:column; gap:8px }
.stat-number{ font-family:'Oswald',sans-serif; font-size:3rem; font-weight:700; letter-spacing:2px; color:var(--white); text-shadow:2px 2px 4px rgba(0,0,0,0.3) }
.stat-label{ font-size:0.95rem; letter-spacing:3px; font-weight:700; color:var(--white); opacity:0.9 }
.page-hero{ position:relative; min-height:40vh; display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(180deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0.95) 100%), url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=1920&q=80') center/cover; border-bottom:1px solid rgba(255,140,0,0.3) }
.page-hero-content{ padding:60px 20px }
.page-hero-title{ font-family:'Oswald',sans-serif; font-size:3rem; font-weight:700; letter-spacing:6px; margin-bottom:16px; background:linear-gradient(135deg, var(--orange) 0%, var(--yellow) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.page-hero-subtitle{ font-size:1.2rem; color:var(--gray-light); letter-spacing:2px }
.events-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(350px, 1fr)); gap:32px; margin-top:40px }
.event-card{ background:var(--dark); border:1px solid rgba(255,140,0,0.2); padding:0; overflow:hidden; transition:all 0.3s ease; display:flex; flex-direction:column }
.event-card:hover{ border-color:var(--orange); transform:translateY(-4px); box-shadow:0 12px 30px rgba(255,140,0,0.3) }
.event-date{ background:linear-gradient(135deg, var(--orange) 0%, var(--red) 100%); padding:20px; text-align:center; color:var(--white) }
.event-day{ font-family:'Oswald',sans-serif; font-size:2.5rem; font-weight:700; line-height:1 }
.event-month{ font-size:1rem; letter-spacing:2px; font-weight:700; margin-top:4px }
.event-content{ padding:24px; flex:1; display:flex; flex-direction:column }
.event-content h3{ font-family:'Oswald',sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:2px; margin-bottom:12px; color:var(--white) }
.event-location{ color:var(--orange); font-weight:700; margin-bottom:12px; font-size:0.95rem }
.event-desc{ color:var(--gray-light); line-height:1.6; margin-bottom:16px; flex:1 }
.event-link{ color:var(--orange); font-weight:700; letter-spacing:1px; display:inline-block; transition:all 0.3s ease }
.event-link:hover{ color:var(--yellow); transform:translateX(4px) }
.contact-page-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:40px }
.contact-details{ display:flex; flex-direction:column; gap:32px; margin-top:32px }
.contact-detail-item{ display:flex; gap:20px; align-items:flex-start }
.contact-icon{ font-size:2rem; min-width:50px; text-align:center }
.contact-detail-item h3{ font-family:'Oswald',sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:2px; margin-bottom:8px; color:var(--orange) }
.contact-detail-item a{ color:var(--white); font-weight:500 }
.contact-detail-item a:hover{ color:var(--orange) }
.contact-detail-item p{ color:var(--gray-light); margin:0 }
.contact-form{ display:flex; flex-direction:column; gap:20px; margin-top:32px }
.form-input, .form-textarea{ background:var(--dark); border:1px solid rgba(255,140,0,0.3); padding:14px 18px; color:var(--white); font-family:'Roboto Condensed',sans-serif; font-size:1rem; transition:all 0.3s ease }
.form-input:focus, .form-textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,140,0,0.1) }
.form-input::placeholder, .form-textarea::placeholder{ color:var(--gray) }
.form-textarea{ resize:vertical; min-height:120px }
.btn-submit{ background:var(--orange); color:var(--black); font-weight:700; letter-spacing:2px; padding:14px 32px; border:2px solid var(--orange); cursor:pointer; font-family:'Oswald',sans-serif; font-size:1rem; transition:all 0.3s ease }
.btn-submit:hover{ background:var(--orange-hover); border-color:var(--orange-hover); transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,140,0,0.4) }
@media (max-width:960px){ .cards{ grid-template-columns:repeat(2,1fr) } .contact-content{ grid-template-columns:1fr; gap:40px } .gallery-grid{ grid-template-columns:repeat(2,1fr) } .gallery-item-wide{ grid-column:span 1 } .stats-grid{ grid-template-columns:repeat(2,1fr); gap:32px } .contact-page-grid{ grid-template-columns:1fr; gap:40px } .events-grid{ grid-template-columns:1fr } }
@media (max-width:640px){ .header-inner{ flex-direction:column; gap:16px } .nav{ flex-wrap:wrap; gap:16px } .hero-title{ font-size:2rem; letter-spacing:4px } .cards{ grid-template-columns:1fr } .gallery-grid{ grid-template-columns:1fr } .stats-grid{ grid-template-columns:1fr; gap:24px } .banner-title{ font-size:1.8rem; letter-spacing:6px } .page-hero-title{ font-size:2rem; letter-spacing:4px } }