/* Brand Colors (from guide)
   Primary gradient: #3535CD → #1D00C8 (interpretation of sample)
   Accent Blue: #1DD0C8
   Light: #F5F5F5
   Dark: #373737
   Accent Red: #E92B24
*/
:root{
  --color-primary-700:#3535CD;
  --color-primary-800:#1D00C8;
  --color-accent:#1DD0C8;
  --color-light:#F5F5F5;
  --color-dark:#373737;
  --color-danger:#E92B24;
  --text:#222;
  --muted:#5b5b5b;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}

img{max-width:100%;display:block;border-radius:var(--radius)}
a{color:var(--color-primary-800);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1120px, 92%);margin-inline:auto}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;background:var(--color-dark);border-bottom:1px solid #444;z-index:10;backdrop-filter:blur(10px);background:rgba(55,55,55,.95)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;min-height:60px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.logo-img{height:32px;width:auto;object-fit:contain}
.nav-list{display:flex;gap:8px;list-style:none;margin:0;padding:0;align-items:center}
.nav-toggle{display:none;background:none;border:none;font-size:20px;cursor:pointer;padding:8px;color:#fff}
.nav-list a{padding:10px 16px;border-radius:8px;font-weight:500;transition:all 0.2s ease;color:#fff}
.nav-list a:hover{background:rgba(255,255,255,.1);text-decoration:none}
.nav-list .btn{padding:10px 20px;margin-left:8px;background:var(--color-accent);color:var(--color-dark)}
.nav-list .btn:hover{background:var(--color-accent);filter:brightness(1.1)}

/* Buttons */
.btn{display:inline-block;border:none;border-radius:12px;background:var(--color-dark);color:#fff;padding:12px 18px;font-weight:600;box-shadow:var(--shadow);transition:all 0.3s ease}
.btn:hover{filter:brightness(.95);text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--color-primary-700),var(--color-primary-800))}
.btn-ghost{background:transparent;border:2px solid var(--color-dark);color:var(--color-dark)}
.btn-accent{background:var(--color-accent);color:#003534}

/* Floating Get Tickets Button */
.floating-btn{position:relative;animation:float 3s ease-in-out infinite;box-shadow:0 8px 25px rgba(53,53,205,0.3)}
.floating-btn:hover{animation-play-state:paused;box-shadow:0 12px 35px rgba(53,53,205,0.4)}

@keyframes float{
  0%, 100%{transform:translateY(0px)}
  50%{transform:translateY(-8px)}
}

/* Sponsor Button */
.btn-sponsor{background:var(--color-danger);color:#fff;border:2px solid var(--color-danger);position:relative;overflow:hidden}
.btn-sponsor:hover{background:var(--color-danger);color:#fff;border-color:var(--color-danger);transform:translateY(-2px);box-shadow:0 8px 25px rgba(233,43,36,0.3)}
.btn-sponsor:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.btn-sponsor:hover:before{left:100%}

/* Hero */
.hero{position:relative;background:linear-gradient(160deg,var(--color-dark) 0%, #1f1f1f 35%, var(--color-primary-800) 100%);color:#fff;padding:120px 0 56px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(2.2rem, 5vw, 3.6rem);line-height:1.1;margin:0 0 10px}
.event-subtitle{font-size:clamp(1.1rem, 2.5vw, 1.4rem);font-weight:400;margin:0 0 20px;opacity:0.9;color:var(--color-accent)}
.thin{font-weight:300}
.lead{opacity:.92}
.cta-row{display:flex;gap:12px;margin:18px 0 10px}
.hero-meta{display:flex;gap:24px;opacity:.9;padding:0;list-style:none}
.hero-media img{aspect-ratio:16/10;object-fit:cover;box-shadow:var(--shadow)}
.scroll-down{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);color:#fff;opacity:.7}

/* Sections */
.section{padding:72px 0}
.section-alt{background:var(--color-light)}
.section h2{font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 16px}
.section-intro{color:var(--muted);margin-top:-4px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.cards .card h3{margin-top:0}

.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:10px}
.stat .num{font-size:2rem;font-weight:800;color:var(--color-primary-800)}
.stat .label{color:var(--muted)}

/* About Section */
.about-header{text-align:center;margin-bottom:48px;max-width:800px;margin-left:auto;margin-right:auto}
.about-intro{font-size:1.2rem;color:var(--muted);line-height:1.8;margin-top:20px;max-width:900px;margin-left:auto;margin-right:auto;background:linear-gradient(135deg, rgba(53,53,205,0.03), rgba(29,208,200,0.03));padding:32px;border-radius:16px;border-left:4px solid var(--color-accent);box-shadow:0 4px 20px rgba(0,0,0,0.05);position:relative;overflow:hidden}

.about-content{display:grid;gap:48px}


.stats-section{text-align:center}
.stats-section h3{font-size:1.5rem;margin-bottom:24px;color:var(--color-dark)}
.stats-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;max-width:600px;margin:0 auto}
.stat-card{background:linear-gradient(135deg,var(--color-primary-700),var(--color-primary-800));color:#fff;padding:32px 24px;border-radius:16px;text-align:center;transition:all 0.3s ease}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(53,53,205,0.3)}
.stat-number{font-size:2.5rem;font-weight:800;margin-bottom:8px;display:block}
.stat-label{font-size:0.9rem;opacity:0.9;text-transform:uppercase;letter-spacing:0.5px}

.timeline{display:grid;grid-template-columns:repeat(2, 1fr);gap:24px;margin-top:40px}
.time-item{display:flex;flex-direction:column;background:#fff;padding:32px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.3s ease;border-top:4px solid var(--color-accent);position:relative}
.time-item:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.12)}
.time-item:before{content:'';position:absolute;top:-4px;left:32px;width:12px;height:12px;background:var(--color-accent);border-radius:50%}
.time{font-weight:700;color:var(--color-accent);font-size:1.4rem;margin-bottom:16px;display:inline-block;background:linear-gradient(135deg, var(--color-accent), var(--color-primary-700));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.time-item h3{font-size:1.3rem;margin:0 0 12px;color:var(--color-dark);font-weight:600}
.time-item p{color:var(--muted);line-height:1.6;margin:0}

/* Schedule Tabs */
.schedule-tabs{display:flex;justify-content:center;gap:0;margin:32px 0 24px;background:#f8f9fa;border-radius:12px;padding:8px;max-width:800px;margin-left:auto;margin-right:auto}
.tab-btn{flex:1;background:none;border:none;padding:20px 16px;border-radius:8px;font-weight:600;font-size:0.95rem;color:var(--muted);cursor:pointer;transition:all 0.3s ease;text-align:center;line-height:1.4;position:relative}
.tab-btn:hover{color:var(--color-primary-800);background:rgba(255,255,255,0.5)}
.tab-btn.active{background:#fff;color:var(--color-primary-800);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.tab-btn.active:before{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #fff}
.tab-content{position:relative}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeIn 0.3s ease-in-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.gallery{gap:16px}

/* Highlights Gallery */
.highlights-gallery{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin-top:32px}
.highlights-gallery img{width:100%;height:250px;object-fit:cover;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all 0.3s ease}
.highlights-gallery img:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
.logos{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:16px;align-items:center}
.logo{background:#fff;border:1px dashed #cfd8dc;border-radius:12px;padding:24px;text-align:center;color:#607d8b}

.cta{background:linear-gradient(135deg,var(--color-primary-700),var(--color-primary-800));color:#fff;text-align:center}
.inline-form{display:flex;gap:10px;justify-content:center;margin-top:10px}
.inline-form input{min-width:260px;border-radius:12px;border:1px solid #e0e0e0;padding:12px 14px}
.form-msg{margin-top:8px}

/* Support the Game */
.ticket-cards{display:flex;justify-content:center;gap:24px;margin-top:32px;align-items:stretch}
.ticket-card{background:#fff;border:2px solid var(--color-accent);border-radius:16px;padding:32px;text-align:center;width:320px;min-height:520px;min-width:320px;box-shadow:var(--shadow);transition:all 0.3s ease;display:flex;flex-direction:column;flex:1}
.ticket-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(29,208,200,0.2)}
.ticket-card h3{font-size:1.5rem;margin:0 0 16px;color:var(--color-dark)}
.ticket-price{display:flex;align-items:baseline;justify-content:center;gap:4px;margin:16px 0 24px}
.ticket-price .currency{font-size:1.2rem;color:var(--muted)}
.ticket-price .amount{font-size:3rem;font-weight:800;color:var(--color-accent)}
.ticket-features{list-style:none;padding:0;margin:0 0 auto;text-align:left;flex:1}
.ticket-features li{padding:8px 0;border-bottom:1px solid #f0f0f0;position:relative;padding-left:24px}
.ticket-features li:before{content:"✓";color:var(--color-accent);font-weight:bold;position:absolute;left:0}
.ticket-features li:last-child{border-bottom:none}
.ticket-card .btn{margin-top:auto;margin-bottom:0;align-self:stretch;width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}

/* Advisory Board */
.advisory-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:24px;margin-top:32px}
.advisory-member{text-align:center;padding:24px;background:#fff;border-radius:16px;box-shadow:var(--shadow);transition:all 0.3s ease}
.advisory-member:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.12)}
.member-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary-700),var(--color-primary-800));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;margin:0 auto 16px}
.advisory-member h3{font-size:1.1rem;margin:0 0 8px;color:var(--color-dark)}
.advisory-member p{color:var(--muted);margin:0;font-size:0.9rem}

/* Partners */
.partners-subtitle{text-align:center;font-style:italic;color:var(--muted);margin-bottom:32px;font-size:1.1rem}

/* Event Information Cards */
.event-info-section{margin:48px 0;padding:40px 0;background:linear-gradient(135deg, rgba(53,53,205,0.02), rgba(29,208,200,0.02));border-radius:20px;border:1px solid rgba(53,53,205,0.1)}
.event-info-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:32px;max-width:900px;margin:0 auto;padding:0 24px}
.event-info-card{background:#fff;border-radius:16px;padding:32px;box-shadow:0 8px 30px rgba(0,0,0,0.08);border:2px solid transparent;transition:all 0.3s ease;position:relative;overflow:hidden}
.event-info-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.12);border-color:var(--color-accent)}
.event-info-card:before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--color-primary-700), var(--color-accent));opacity:0;transition:opacity 0.3s ease}
.event-info-card:hover:before{opacity:1}
.event-info-title{font-size:1.4rem;font-weight:700;color:var(--color-dark);margin:0 0 20px;display:flex;align-items:center;gap:12px}
.event-info-title:before{content:'';width:4px;height:24px;background:linear-gradient(135deg, var(--color-primary-700), var(--color-accent));border-radius:2px}
.event-info-detail{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:8px 0}
.event-info-label{font-weight:600;color:var(--muted);min-width:80px;font-size:0.95rem}
.event-info-value{color:var(--color-dark);font-weight:500}
.event-info-value.location{color:var(--color-primary-800);text-decoration:underline;cursor:pointer;transition:color 0.3s ease}
.event-info-value.location:hover{color:var(--color-accent);text-decoration:none}

/* Event Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px;margin-top:32px}
.gallery-item{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:all 0.3s ease}
.gallery-item:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.15)}
.gallery-item img{width:100%;height:250px;object-fit:cover;transition:transform 0.3s ease}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent, rgba(0,0,0,0.8));color:#fff;padding:24px;transform:translateY(100%);transition:transform 0.3s ease}
.gallery-item:hover .gallery-overlay{transform:translateY(0)}
.gallery-overlay h3{margin:0 0 8px;font-size:1.2rem}
.gallery-overlay p{margin:0;opacity:0.9;font-size:0.9rem}

/* FAQ Section */
.faq-container{max-width:800px;margin:0 auto;margin-top:32px}
.faq-item{background:#fff;border:1px solid #eee;border-radius:12px;margin-bottom:16px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.05);transition:all 0.3s ease}
.faq-item:hover{box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;cursor:pointer;font-weight:600;font-size:1.1rem;color:var(--color-dark);transition:all 0.3s ease;list-style:none}
.faq-question:hover{background:var(--color-light)}
.faq-question::-webkit-details-marker{display:none}
.faq-question::marker{display:none}
.faq-icon{font-size:1.5rem;color:var(--color-accent);transition:transform 0.3s ease;font-weight:300}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
.faq-answer{padding:0 24px 24px;color:var(--muted);line-height:1.6;border-top:1px solid #f0f0f0;margin-top:0}
.faq-answer p{margin:0;padding-top:16px}

/* Footer */
.site-footer{background:linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);color:#bbb;padding:48px 0 0}
.footer-content{display:grid;grid-template-columns:1fr 2fr;gap:48px;margin-bottom:32px}
.footer-brand{max-width:300px}
.footer-brand .brand{display:inline-block;margin-bottom:16px}
.footer-description{color:#999;line-height:1.6;margin:0}
.footer-links{display:grid;grid-template-columns:repeat(3, 1fr);gap:32px}
.footer-section h4{color:#fff;font-size:1.1rem;margin:0 0 16px;font-weight:600}
.footer-section ul{list-style:none;padding:0;margin:0}
.footer-section li{margin-bottom:8px}
.footer-section a{color:#bbb;text-decoration:none;transition:color 0.3s ease;font-size:0.95rem}
.footer-section a:hover{color:var(--color-accent)}
.social-links{display:flex;gap:16px;margin-top:8px}
.social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:50%;color:#bbb;transition:all 0.3s ease;text-decoration:none}
.social-links a:hover{background:var(--color-accent);color:#fff;transform:translateY(-2px)}
.footer-bottom{border-top:1px solid #333;padding:24px 0}
.footer-bottom-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.copyright{color:#888;margin:0;font-size:0.9rem}
.footer-bottom-links{display:flex;gap:24px}
.footer-bottom-links a{color:#888;text-decoration:none;font-size:0.9rem;transition:color 0.3s ease}
.footer-bottom-links a:hover{color:var(--color-accent)}

/* Utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive */
@media (max-width: 900px){
  .hero-grid,.two-col{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr}
  .time-item{grid-template-columns:72px 1fr}
  .schedule-tabs{flex-direction:column;gap:8px;margin:24px 0 20px}
  .tab-btn{padding:16px 12px;font-size:0.9rem}
  .tab-btn.active:before{display:none}
  .stats-grid{grid-template-columns:1fr;gap:16px}
  .ticket-cards{flex-direction:column;align-items:center;gap:20px}
  .ticket-card{width:100%;min-width:280px;max-width:400px;min-height:480px}
  .advisory-grid{grid-template-columns:repeat(2, 1fr)}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .highlights-gallery{grid-template-columns:repeat(2, 1fr);gap:16px}
  .event-info-grid{grid-template-columns:1fr;gap:24px;padding:0 16px}
  .footer-content{grid-template-columns:1fr;gap:32px}
  .footer-links{grid-template-columns:repeat(2, 1fr);gap:24px}
}

@media (max-width: 680px){
  .nav-toggle{display:inline-flex}
  .nav-list{display:none;position:absolute;right:4%;top:68px;background:var(--color-dark);border:1px solid #444;border-radius:12px;flex-direction:column;padding:12px;width:min(280px, 92vw);box-shadow:var(--shadow);gap:4px}
  .nav-list.show{display:flex}
  .nav-list a{padding:12px 16px;margin:2px 0;color:#fff}
  .nav-list a:hover{background:rgba(255,255,255,.1)}
  .nav-list .btn{margin-left:0;margin-top:8px;background:var(--color-accent);color:var(--color-dark)}
  .grid-3{grid-template-columns:1fr}
  .advisory-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .highlights-gallery{grid-template-columns:1fr;gap:12px}
  .event-info-grid{grid-template-columns:1fr;gap:20px;padding:0 12px}
  .event-info-card{padding:24px}
  .footer-links{grid-template-columns:1fr;gap:20px}
  .footer-bottom-content{flex-direction:column;text-align:center;gap:12px}
  .footer-bottom-links{justify-content:center}
}