/* ═══════════════════════════════════════════════════════════════
   E-BLAZE 2K26 — style.css
   Theme: Royal Gold + Deep Black + Electric Blue
   All sizes relative/clamp — fully responsive
═══════════════════════════════════════════════════════════════ */

:root {
  --gold:        #f5c518;
  --gold-light:  #ffe066;
  --gold-dark:   #b8860b;
  --blue:        #1a6fc4;
  --blue-light:  #4fa3e0;
  --dark:        #050505;
  --dark2:       #0c0c0c;
  --dark3:       #111111;
  --card-bg:     rgba(12,12,12,0.92);
  --border:      rgba(245,197,24,0.18);
  --text:        #e8dfc8;
  --text-dim:    #8a7d60;
  --glow-gold:   0 0 18px rgba(245,197,24,0.35), 0 0 40px rgba(245,197,24,0.12);
  --glow-blue:   0 0 18px rgba(26,111,196,0.35);
  --font-display:'Cinzel', serif;
  --font-body:   'Rajdhani', sans-serif;
  --font-mono:   'Share Tech Mono', monospace;
  --nav-h:       64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--text); font-family: var(--font-body); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ═══════════════════════════════════════
   INTRO SCREEN
═══════════════════════════════════════ */
#intro-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at center, #0a0a0a 0%, #000 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.9s ease, transform 0.9s ease;
  overflow: hidden;
}
#intro-screen.hide { opacity: 0; transform: translateY(-30px); pointer-events: none; }
#circuit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.intro-content {
  position: relative; z-index: 2; text-align: center; padding: 2rem;
  animation: introFadeIn 1.2s ease forwards;
}
@keyframes introFadeIn { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }

.intro-logos-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem,3vw,2rem); margin-bottom: 1.4rem; flex-wrap: wrap;
}
.intro-logo-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }

/* Responsive intro logos — scale with viewport */
.intro-logo-img {
  width: clamp(60px, 10vw, 90px);
  height: clamp(60px, 10vw, 90px);
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(245,197,24,0.5));
  animation: logoPulse 2.5s ease-in-out infinite;
}
.intro-logo-img.svu {
  filter: drop-shadow(0 0 14px rgba(26,111,196,0.6)) brightness(1.1);
}
@keyframes logoPulse { 0%,100%{filter:drop-shadow(0 0 14px rgba(245,197,24,0.45))} 50%{filter:drop-shadow(0 0 26px rgba(245,197,24,0.85))} }

.intro-logo-divider {
  width: 1px; height: 70px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity: 0.45;
}
.intro-presents {
  font-family: var(--font-mono); font-size: clamp(0.65rem,1.5vw,0.8rem);
  color: var(--gold); letter-spacing: 4px; margin-bottom: 0.3rem; text-transform: uppercase;
}
.intro-eeesa-name {
  font-family: var(--font-display); font-size: clamp(0.7rem,2vw,1rem);
  color: #fff; letter-spacing: 2px; margin-bottom: 0.15rem;
}
.intro-eeesa-full {
  font-family: var(--font-mono); font-size: clamp(0.55rem,1.2vw,0.7rem);
  color: var(--text-dim); letter-spacing: 1.5px;
}
.intro-tagline {
  margin-top: 1.6rem; font-family: var(--font-display);
  font-size: clamp(0.85rem,2.5vw,1.4rem); font-weight: 700;
  background: linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 2px;
}
.intro-tagline-sub {
  font-family: var(--font-mono); font-size: clamp(0.6rem,1.2vw,0.72rem);
  color: var(--text-dim); letter-spacing: 3px; margin-top: 0.4rem;
}
.intro-scroll-hint { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.intro-scroll-hint span { font-family: var(--font-mono); font-size: 0.65rem; color: var(--gold); letter-spacing: 4px; animation: blink 1.5s ease-in-out infinite; }
.scroll-arrow { width: 16px; height: 16px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); animation: arrowBounce 1s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes arrowBounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(5px)} }

.intro-corner { position: absolute; font-family: var(--font-mono); font-size: 0.58rem; color: rgba(245,197,24,0.25); letter-spacing: 3px; }
.intro-corner.tl{top:18px;left:18px} .intro-corner.tr{top:18px;right:18px}
.intro-corner.bl{bottom:18px;left:18px} .intro-corner.br{bottom:18px;right:18px}

/* ═══════════════════════════════════════
   NAVBAR — 3-column: EEESA | Links+Logo | SVU
═══════════════════════════════════════ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.5rem;
  background: rgba(5,5,5,0.9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s, height 0.3s;
}
#navbar.scrolled { background: rgba(5,5,5,0.98); }

/* Left: EEESA brand */
.nav-brand-left {
  display: flex; align-items: center; gap: 0.45rem; cursor: pointer; flex-shrink: 0;
}
.nav-brand-left img {
  width: clamp(28px,3.5vw,40px);
  height: clamp(28px,3.5vw,40px);
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(245,197,24,0.35));
}
.nav-brand-left-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav-brand-left-text .t1 { font-family: var(--font-display); font-size: clamp(0.6rem,1.2vw,0.78rem); font-weight: 700; color: var(--gold); letter-spacing: 1.5px; }
.nav-brand-left-text .t2 { font-family: var(--font-mono); font-size: clamp(0.48rem,0.9vw,0.55rem); color: var(--text-dim); letter-spacing: 1px; }

/* Center: links + eblaze logo together */
.nav-center-group {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.8rem,2vw,2rem);
}
.nav-links { display: flex; align-items: center; gap: clamp(0.6rem,1.5vw,1.6rem); }
.nav-link {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(0.7rem,1.1vw,0.85rem);
  color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase;
  transition: color 0.3s; position: relative; white-space: nowrap;
}
.nav-link::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--gold); transition:width 0.3s; }
.nav-link:hover, .nav-link.active { color: var(--gold); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Center logo (eblaze) */
.nav-logo-center { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; flex-shrink: 0; }
.nav-logo-center img {
  width: clamp(30px,3.8vw,44px);
  height: clamp(30px,3.8vw,44px);
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(245,197,24,0.5));
}
.nav-logo-center-text { font-family: var(--font-display); font-size: clamp(0.7rem,1.2vw,0.95rem); font-weight: 900; color: #fff; letter-spacing: 2px; }
.nav-logo-center-text span { color: var(--gold); }

/* Register button */
.nav-reg-btn {
  font-family: var(--font-mono); font-size: clamp(0.58rem,1vw,0.7rem);
  font-weight: 700; letter-spacing: 1.5px; color: var(--dark);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: none; padding: 0.4rem 0.9rem; cursor: pointer;
  clip-path: polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);
  transition: all 0.3s; white-space: nowrap; text-decoration: none; display: inline-block;
  flex-shrink: 0;
}
.nav-reg-btn:hover { background: linear-gradient(135deg,#fff,var(--gold-light)); box-shadow: var(--glow-gold); }

/* Right: SVU brand */
.nav-brand-right {
  display: flex; align-items: center; gap: 0.45rem; cursor: pointer; flex-shrink: 0;
}
.nav-brand-right img {
  width: clamp(26px,3.2vw,38px);
  height: clamp(26px,3.2vw,38px);
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(26,111,196,0.45)) brightness(1.1);
}
.nav-brand-right-text { display: flex; flex-direction: column; line-height: 1.1; text-align: right; }
.nav-brand-right-text .t1 { font-family: var(--font-display); font-size: clamp(0.6rem,1.2vw,0.78rem); font-weight: 700; color: var(--blue-light); letter-spacing: 1.5px; }
.nav-brand-right-text .t2 { font-family: var(--font-mono); font-size: clamp(0.48rem,0.9vw,0.55rem); color: var(--text-dim); letter-spacing: 1px; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--gold); transition: 0.3s; }

/* Mobile nav drawer */
.mobile-nav {
  display: none; position: fixed; top: 0; right: 0; width: min(280px,85vw); height: 100vh;
  background: rgba(5,5,5,0.98); border-left: 1px solid var(--border);
  z-index: 2000; flex-direction: column; padding: 4rem 1.8rem 2rem;
  gap: 1.2rem; transform: translateX(100%); transition: transform 0.35s ease;
  backdrop-filter: blur(20px); overflow-y: auto;
}
.mobile-nav.open { display: flex; transform: translateX(0); }
.mobile-nav-close { position: absolute; top: 1rem; right: 1rem; background: none; border: 1px solid var(--border); color: var(--gold); font-size: 1.1rem; width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mobile-nav .nav-link { font-size: 0.95rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(245,197,24,0.07); display: block; }
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1999; }
.mobile-overlay.open { display: block; }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
#hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: calc(var(--nav-h) + 30px) 1.5rem 60px;
}
#bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(245,197,24,0.025) 1px,transparent 1px), linear-gradient(90deg,rgba(245,197,24,0.025) 1px,transparent 1px);
  background-size: 50px 50px;
}
.hero-content { position: relative; z-index: 2; text-align: center; max-width: 820px; width: 100%; }

.hero-organizer { font-family: var(--font-mono); font-size: clamp(0.55rem,1.2vw,0.68rem); color: var(--gold); letter-spacing: 2.5px; margin-bottom: 1rem; opacity: 0.75; }

/* Hero logo — responsive, not oversized */
.hero-logo-wrap { display: flex; justify-content: center; margin-bottom: 0.6rem; }
.hero-main-logo {
  width: clamp(120px, 18vw, 200px);
  height: clamp(120px, 18vw, 200px);
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(245,197,24,0.55));
  animation: heroPulse 3s ease-in-out infinite;
}
@keyframes heroPulse { 0%,100%{filter:drop-shadow(0 0 24px rgba(245,197,24,0.5))} 50%{filter:drop-shadow(0 0 45px rgba(245,197,24,0.85))} }

.hero-title {
  font-family: var(--font-display); font-size: clamp(2.2rem,9vw,5.5rem);
  font-weight: 900; line-height: 1; margin-bottom: 0.25rem; letter-spacing: 4px;
  background: linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 50%,var(--gold-dark) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-year { font-family: var(--font-display); font-size: clamp(0.8rem,2.5vw,1.3rem); color: rgba(255,255,255,0.5); letter-spacing: 7px; margin-bottom: 0.3rem; }
.hero-tagline { font-family: var(--font-body); font-size: clamp(0.75rem,1.8vw,0.95rem); color: var(--text-dim); letter-spacing: 1.5px; margin-bottom: 0.7rem; }

.hero-date-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(245,197,24,0.07); border: 1px solid rgba(245,197,24,0.32);
  padding: 0.45rem 1.3rem; margin-bottom: 0.4rem;
  font-family: var(--font-display); font-size: clamp(0.8rem,1.8vw,1rem);
  font-weight: 700; color: var(--gold-light); letter-spacing: 1.5px;
}
.hero-location { font-family: var(--font-mono); font-size: clamp(0.62rem,1.3vw,0.72rem); color: var(--blue-light); letter-spacing: 1.5px; margin-bottom: 1.5rem; }

/* Countdown */
.countdown-wrapper { margin-bottom: 1.5rem; }
.countdown-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); letter-spacing: 4px; margin-bottom: 0.7rem; }
.countdown-timer { display: flex; justify-content: center; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.time-block {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(245,197,24,0.05); border: 1px solid var(--border);
  padding: clamp(0.4rem,1.2vw,0.7rem) clamp(0.7rem,2vw,1.2rem);
  min-width: clamp(58px,9vw,80px); position: relative;
}
.time-block::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.time-num { font-family: var(--font-display); font-size: clamp(1.5rem,4vw,2.2rem); font-weight: 900; color: var(--gold); text-shadow: var(--glow-gold); line-height: 1; }
.time-label { font-family: var(--font-mono); font-size: clamp(0.48rem,1vw,0.6rem); color: var(--text-dim); letter-spacing: 2px; margin-top: 0.2rem; }
.time-sep { font-family: var(--font-display); font-size: clamp(1.3rem,3vw,1.8rem); color: var(--gold); font-weight: 900; margin-bottom: 0.7rem; animation: blink 1s infinite; }

.event-live-banner {
  display: none; align-items: center; justify-content: center; gap: 0.7rem;
  background: rgba(245,197,24,0.1); border: 1px solid var(--gold);
  padding: 0.7rem 1.8rem; margin-bottom: 1rem;
  font-family: var(--font-display); font-size: clamp(0.9rem,2vw,1.1rem); font-weight: 700;
  color: var(--gold-light); letter-spacing: 2px;
  animation: livePulse 1.5s ease-in-out infinite;
}
.event-live-banner.show { display: flex; }
.live-dot { width: 9px; height: 9px; background: #ff4444; border-radius: 50%; animation: liveBlink 0.8s ease-in-out infinite; }
@keyframes liveBlink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} }
@keyframes livePulse { 0%,100%{box-shadow:0 0 0 0 rgba(245,197,24,0.25)} 50%{box-shadow:0 0 16px 4px rgba(245,197,24,0.12)} }

/* Register CTA */
.register-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.register-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(0.7rem,2vw,1rem) clamp(1.5rem,4vw,2.8rem);
  background: transparent; border: 2px solid var(--gold);
  font-family: var(--font-display); font-size: clamp(0.8rem,1.8vw,1rem);
  font-weight: 700; letter-spacing: 2.5px; color: var(--gold);
  cursor: pointer; overflow: hidden;
  clip-path: polygon(14px 0%,100% 0%,calc(100% - 14px) 100%,0% 100%);
  transition: color 0.3s, box-shadow 0.3s; text-decoration: none;
}
.btn-glow { position:absolute; inset:0; background:linear-gradient(135deg,var(--gold-light),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s; z-index:0; }
.btn-text { position:relative; z-index:1; }
.register-btn:hover { color:var(--dark); box-shadow:var(--glow-gold); }
.register-btn:hover .btn-glow { transform:scaleX(1); }
.register-sub { font-family:var(--font-mono); font-size:clamp(0.58rem,1.2vw,0.7rem); color:var(--text-dim); letter-spacing:2px; text-transform:uppercase; }

.hero-scroll-hint { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:0.25rem; z-index:2; }
.hero-scroll-hint span { font-family:var(--font-mono); font-size:0.58rem; color:var(--text-dim); letter-spacing:3px; }
.bounce-arrow { color:var(--gold); font-size:1rem; animation:arrowBounce2 1.5s ease-in-out infinite; }
@keyframes arrowBounce2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* ═══════════════════════════════════════
   STATS
═══════════════════════════════════════ */
.stats-section { display: grid; grid-template-columns: repeat(4,1fr); background: var(--dark2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-card { display:flex; flex-direction:column; align-items:center; justify-content:center; padding: clamp(1.2rem,3vw,2rem) 1rem; border-right:1px solid var(--border); gap:0.25rem; transition:background 0.3s; }
.stat-card:last-child { border-right:none; }
.stat-card:hover { background:rgba(245,197,24,0.04); }
.stat-num { font-family:var(--font-display); font-size:clamp(1.5rem,3.5vw,2.2rem); font-weight:900; color:var(--gold); text-shadow:var(--glow-gold); }
.stat-unit { font-family:var(--font-display); font-size:clamp(0.8rem,1.5vw,1rem); color:var(--blue-light); }
.stat-label { font-family:var(--font-body); font-size:clamp(0.7rem,1.3vw,0.85rem); color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }

/* ═══════════════════════════════════════
   SECTION COMMONS
═══════════════════════════════════════ */
.section-header { text-align:center; margin-bottom: clamp(1.5rem,4vw,3rem); }
.section-tag { font-family:var(--font-mono); font-size:0.72rem; color:var(--gold); letter-spacing:3px; margin-bottom:0.4rem; }
.section-title { font-family:var(--font-display); font-size:clamp(1.3rem,3.5vw,2.3rem); font-weight:900; color:#fff; letter-spacing:2px; }
.highlight { color:var(--gold); }
.highlight-blue { color:var(--blue-light); }

/* ═══════════════════════════════════════
   EVENTS PREVIEW
═══════════════════════════════════════ */
.section-events-preview { padding: clamp(2.5rem,5vw,5rem) clamp(1rem,3vw,2rem); background:var(--dark); }
.events-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:1100px; margin:0 auto; }

.event-card {
  background:var(--card-bg); border:1px solid var(--border); padding:1.6rem;
  position:relative; overflow:hidden; transition:border-color 0.3s,transform 0.3s; cursor:pointer;
}
.event-card[data-category]::before {
  content:attr(data-category); position:absolute; top:10px; right:10px;
  font-family:var(--font-mono); font-size:0.56rem; color:var(--gold); letter-spacing:1.5px;
  border:1px solid rgba(245,197,24,0.28); padding:2px 7px;
}
.event-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--blue-light)); transform:scaleX(0); transition:transform 0.4s; }
.event-card:hover { border-color:rgba(245,197,24,0.45); transform:translateY(-3px); }
.event-card:hover::after { transform:scaleX(1); }
.event-icon { font-size:1.8rem; margin-bottom:0.7rem; }
.event-name { font-family:var(--font-display); font-size:clamp(0.8rem,1.5vw,0.92rem); font-weight:700; color:#fff; margin-bottom:0.4rem; letter-spacing:1px; }
.event-desc { font-size:clamp(0.78rem,1.3vw,0.85rem); color:var(--text-dim); line-height:1.6; }
.see-all-card { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-style:dashed; border-color:rgba(26,111,196,0.28); }
.see-all-link { display:inline-block; margin-top:0.5rem; font-family:var(--font-mono); font-size:0.75rem; color:var(--gold); border:1px solid var(--border); padding:0.35rem 0.9rem; transition:background 0.3s,color 0.3s; }
.see-all-link:hover { background:var(--gold); color:var(--dark); }

/* ═══════════════════════════════════════
   WORKSHOPS PREVIEW
═══════════════════════════════════════ */
.section-workshops-preview { padding: clamp(2.5rem,5vw,5rem) clamp(1rem,3vw,2rem); background:var(--dark2); }
.workshops-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:1000px; margin:0 auto; }
.workshop-card { background:var(--card-bg); border:1px solid var(--border); border-left:3px solid var(--gold); padding:1.4rem; transition:border-left-color 0.3s,transform 0.3s; }
.workshop-card:hover { border-left-color:var(--blue-light); transform:translateY(-3px); }
.ws-num { font-family:var(--font-display); font-size:1.8rem; font-weight:900; color:rgba(245,197,24,0.15); margin-bottom:0.4rem; }
.ws-title { font-family:var(--font-display); font-size:clamp(0.8rem,1.5vw,0.9rem); font-weight:700; color:#fff; letter-spacing:1px; margin-bottom:0.5rem; }
.ws-details { font-family:var(--font-mono); font-size:0.7rem; color:var(--gold); }
.outline-btn { display:inline-block; font-family:var(--font-mono); font-size:0.75rem; letter-spacing:2px; color:var(--gold); border:1px solid var(--border); padding:0.65rem 1.8rem; transition:background 0.3s,color 0.3s,border-color 0.3s; }
.outline-btn:hover { background:var(--gold); color:var(--dark); border-color:var(--gold); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
#footer { background:#020202; border-top:1px solid var(--border); padding: clamp(2rem,4vw,3rem) clamp(1rem,3vw,2rem) 0; }
.footer-top { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-bottom:2rem; border-bottom:1px solid var(--border); }

/* Footer logos — responsive */
.footer-brand { display:flex; flex-direction:column; gap:0.5rem; }
.footer-logos-row { display:flex; align-items:center; gap:0.8rem; margin-bottom:0.3rem; }
.footer-logo-img {
  width: clamp(28px,3.5vw,38px);
  height: clamp(28px,3.5vw,38px);
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(245,197,24,0.3));
}
.footer-logo-img.svu { filter: drop-shadow(0 0 5px rgba(26,111,196,0.4)) brightness(1.1); }
.footer-logo-title { font-family:var(--font-display); font-size:clamp(0.95rem,2vw,1.3rem); font-weight:900; color:var(--gold); text-shadow:var(--glow-gold); }
.footer-tagline { font-family:var(--font-body); font-size:clamp(0.78rem,1.3vw,0.88rem); color:var(--text-dim); line-height:1.8; }

.footer-links-group { display:flex; gap: clamp(1.5rem,4vw,4rem); flex-wrap:wrap; }
.footer-col { display:flex; flex-direction:column; gap:0.55rem; }
.footer-col-title { font-family:var(--font-display); font-size:0.7rem; font-weight:700; color:var(--gold); letter-spacing:3px; margin-bottom:0.3rem; }
.footer-col a { font-family:var(--font-body); font-size:clamp(0.82rem,1.3vw,0.9rem); color:var(--text-dim); transition:color 0.3s; }
.footer-col a:hover { color:var(--gold); }
.social-link { display:flex; align-items:center; gap:0.4rem; }
.footer-bottom { display:flex; justify-content:space-between; padding:1.1rem 0; font-family:var(--font-mono); font-size:0.68rem; color:rgba(138,125,96,0.45); flex-wrap:wrap; gap:0.4rem; }

/* ═══════════════════════════════════════
   PAGE LAYOUT (inner pages)
═══════════════════════════════════════ */
.page-hero {
  padding: calc(var(--nav-h) + 40px) clamp(1rem,3vw,2rem) clamp(2rem,4vw,4rem);
  background:var(--dark2); border-bottom:1px solid var(--border); text-align:center; position:relative; overflow:hidden;
}
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center top,rgba(245,197,24,0.05),transparent 65%); pointer-events:none; }
.page-hero-tag { font-family:var(--font-mono); font-size:0.7rem; color:var(--gold); letter-spacing:4px; margin-bottom:0.7rem; }
.page-hero-title { font-family:var(--font-display); font-size:clamp(1.6rem,5.5vw,3.2rem); font-weight:900; color:#fff; letter-spacing:2px; }
.page-hero-title span { color:var(--gold); }
.page-hero-desc { font-family:var(--font-body); font-size:clamp(0.82rem,1.5vw,0.95rem); color:var(--text-dim); margin-top:0.7rem; letter-spacing:0.5px; }
.page-content { padding: clamp(2rem,4vw,4rem) clamp(1rem,3vw,2rem); max-width:1200px; margin:0 auto; }

/* ═══════════════════════════════════════
   UTILITY
═══════════════════════════════════════ */
.scanline-overlay { position:fixed; inset:0; pointer-events:none; z-index:9998; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.02) 2px,rgba(0,0,0,0.02) 4px); }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1100px) {
  #navbar { grid-template-columns: auto 1fr auto auto; }
}
@media (max-width: 900px) {
  .nav-center-group { display:none; }
  .hamburger { display:flex; }
  #navbar { grid-template-columns: auto 1fr auto auto; padding:0 1rem; }
  .nav-brand-left-text, .nav-brand-right-text { display:none; }
  .events-grid { grid-template-columns:repeat(2,1fr); }
  .workshops-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
  .stats-section { grid-template-columns:repeat(2,1fr); }
  .stat-card:nth-child(2) { border-right:none; }
  .stat-card:nth-child(3) { border-top:1px solid var(--border); }
  .events-grid { grid-template-columns:1fr; }
  .workshops-row { grid-template-columns:1fr; }
  .footer-top { flex-direction:column; }
  .footer-links-group { flex-direction:column; gap:1.5rem; }
  .footer-bottom { flex-direction:column; align-items:center; text-align:center; }
  .time-sep { display:none; }
  #navbar { padding:0 0.8rem; }
}
@media (max-width: 380px) {
  .countdown-timer { gap:0.25rem; }
  .time-block { padding:0.35rem 0.5rem; min-width:52px; }
}