/* ══════════════════════════════════════════════════
   MCU — MECHATRONICS COURSE UNION
   Design System v4.0 — Red + Black
   ══════════════════════════════════════════════════ */

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

:root {
  --red:       #e31b23;
  --red-light: #ff4d4d;
  --red-dark:  #a01218;
  --red-glow:  rgba(227, 27, 35, 0.15);
  --red-glow-strong: rgba(227, 27, 35, 0.35);

  --black:     #111111;
  --dark:      #181818;
  --dark-2:    #1e1e1e;
  --dark-3:    #242424;
  --dark-4:    #2e2e2e;

  --light:     #f5f4f0;
  --light-2:   #ebe9e4;
  --light-3:   #d4d1cc;
  --white:     #ffffff;
  --steel:     #b0b0b0;
  --steel-light: #d8d8d8;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-cond:    'Barlow Condensed', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;

  --nav-h: 72px;
  --max-w: 1280px;
  --section-pad: clamp(80px, 10vw, 140px);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}

/* ─── CANVAS ─── */
#bg-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.65;
}

/* ─── LOADER ─── */
#loader {
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s var(--ease-out-expo), visibility 0.6s;
}
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.loader-hex { width: 80px; height: 92px; animation: hex-spin 3s linear infinite; }
@keyframes hex-spin { to { transform: rotate(360deg); } }
.hex-stroke {
  stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: hex-draw 1.2s var(--ease-out-expo) forwards;
}
@keyframes hex-draw { to { stroke-dashoffset: 0; } }
.loader-text { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.loader-text .mono { font-size: 11px; letter-spacing: 0.2em; color: var(--steel); }
.loader-bar { width: 200px; height: 2px; background: var(--dark-4); border-radius: 2px; overflow: hidden; }
.loader-fill { height: 100%; background: var(--red); width: 0%; box-shadow: 0 0 8px var(--red); }
.loader-pct { font-size: 12px; color: var(--red); letter-spacing: 0.1em; }

/* ─── TYPOGRAPHY ─── */
.mono { font-family: var(--font-mono); }
h1, h2, h3 { line-height: 1; }
em { font-style: italic; color: var(--red); }

/* ─── UTILITIES ─── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }

/* ─── REVEAL ANIMATIONS ─── */
.reveal-up {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.reveal-up.visible { opacity: 1; transform: translateY(0); }
.reveal-right {
  opacity: 0; transform: translateX(60px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.35s; }
.delay-4 { transition-delay: 0.5s; }
.delay-5 { transition-delay: 0.65s; }

/* ─── NAVIGATION ─── */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000; height: var(--nav-h);
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(227, 27, 35, 0.25);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  height: 100%; display: flex; align-items: center; gap: 32px;
}

/* Real logo image */
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: opacity 0.2s;
}
.nav-logo-img:hover { opacity: 0.85; }

.nav-links { list-style: none; display: flex; gap: 4px; margin-left: auto; }
.nav-link {
  font-family: var(--font-cond);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--steel-light);
  padding: 8px 14px; border-radius: 4px;
  transition: color 0.2s; position: relative;
}
.nav-link::after {
  content: ''; position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 1px; background: var(--red);
  transform: scaleX(0); transition: transform 0.25s var(--ease-out-expo);
  transform-origin: left;
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

.nav-cta {
  font-family: var(--font-cond); font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--white);
  background: var(--red); padding: 9px 20px; border-radius: 4px;
  transition: background 0.2s, transform 0.2s; flex-shrink: 0;
}
.nav-cta:hover { background: var(--red-light); transform: translateY(-1px); }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 8px; margin-left: auto;
}
.nav-hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--white); transition: all 0.3s;
}

.mobile-menu {
  display: none; position: absolute;
  top: var(--nav-h); left: 0; right: 0;
  background: rgba(10,10,10,0.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--red-glow); padding: 20px; z-index: 999;
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; }
.mobile-menu li a {
  display: block; font-family: var(--font-cond);
  font-size: 18px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--white);
  padding: 12px 0; border-bottom: 1px solid var(--dark-4);
  transition: color 0.2s, padding-left 0.2s;
}
.mobile-menu li a:hover { color: var(--red); padding-left: 8px; }
.mobile-cta { color: var(--red) !important; }

/* ─── HERO ─── */
#hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding-top: var(--nav-h);
  background: var(--black);
  display: flex;
  flex-direction: column;
}
/* Left red bloom — smooth radial, no hard edge */
#hero::after {
  content: '';
  position: absolute;
  top: 0; left: -10%; bottom: 0;
  width: 65%;
  background: radial-gradient(ellipse 60% 55% at 20% 55%, rgba(227,27,35,0.09) 0%, rgba(227,27,35,0.04) 45%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.hero-scan-line {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: scan 4s ease-in-out infinite; z-index: 2; opacity: 0.6;
}
@keyframes scan {
  0%   { top: 0%; opacity: 0; }
  5%   { opacity: 0.6; }
  95%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}
.hero-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(227,27,35,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,27,35,0.04) 1px, transparent 1px);
  background-size: 60px 60px; z-index: 1;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}

/* ─── HERO INNER — two-column grid ─── */
.hero-inner {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: calc(100vh - var(--nav-h));
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  padding: 60px clamp(20px, 5vw, 60px);
  gap: 40px;
}

/* ─── HERO LEFT — text content ─── */
.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

/* ─── HERO RIGHT — logo + mascot stacked ─── */
.hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  position: relative;
}

/* Red glow backdrop behind right column — smooth dissolve, no hard edge */
.hero-right-glow {
  position: absolute;
  inset: -80px -100px -80px -160px;
  background:
    radial-gradient(ellipse 70% 60% at 65% 40%, rgba(227,27,35,0.22) 0%, rgba(227,27,35,0.10) 35%, rgba(227,27,35,0.03) 65%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* Logo block */
.hero-logo-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1;
}

.hbp-logo-svg {
  width: clamp(220px, 26vw, 340px);
  height: auto;
  filter: drop-shadow(0 0 20px rgba(227,27,35,0.5)) drop-shadow(0 0 50px rgba(227,27,35,0.22)) drop-shadow(0 8px 32px rgba(0,0,0,0.5));
  animation: hbp-breathe 4s ease-in-out infinite;
}

@keyframes hbp-breathe {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(227,27,35,0.45)) drop-shadow(0 0 40px rgba(227,27,35,0.18)) drop-shadow(0 8px 28px rgba(0,0,0,0.5)); }
  50%       { filter: drop-shadow(0 0 28px rgba(227,27,35,0.75)) drop-shadow(0 0 70px rgba(227,27,35,0.35)) drop-shadow(0 8px 40px rgba(0,0,0,0.6)) drop-shadow(0 0 2px rgba(255,180,180,0.45)); }
}

/* HUD corner brackets around logo */
.hbp-bracket {
  position: absolute;
  width: 24px; height: 24px;
  opacity: 0.75;
  z-index: 2;
}
.hbp-bracket::before, .hbp-bracket::after {
  content: ''; position: absolute; background: rgba(255,255,255,0.9);
}
.hbp-tl { top: -10px; left: -10px; }
.hbp-tr { top: -10px; right: -10px; }
.hbp-bl { bottom: -22px; left: -10px; }
.hbp-br { bottom: -22px; right: -10px; }
.hbp-tl::before, .hbp-tr::before, .hbp-bl::before, .hbp-br::before { width: 100%; height: 1.5px; top: 0; left: 0; }
.hbp-tl::after,  .hbp-tr::after,  .hbp-bl::after,  .hbp-br::after  { width: 1.5px; height: 100%; top: 0; left: 0; }
.hbp-tr::before, .hbp-br::before { left: auto; right: 0; }
.hbp-tr::after,  .hbp-br::after  { left: auto; right: 0; }
.hbp-bl::before, .hbp-br::before { top: auto; bottom: 0; }
.hbp-bl::after,  .hbp-br::after  { top: auto; bottom: 0; }

.hbp-hud-label {
  font-size: 9px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  text-align: center;
  margin-top: 4px;
}

/* Mascot block — sits below logo */
.hero-mascot-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 1;
}

/* ─── HERO LOGO WATERMARK — hidden ─── */
.hero-logo-watermark { display: none; }
.hero-wm-svg { display: none; }
.hero-brand-panel { display: none; }

/* ─── NAV LOGO SVG ─── */
.nav-logo-svg {
  height: 46px;
  width: auto;
  display: block;
  transition: opacity 0.2s, transform 0.2s;
}
.nav-logo:hover .nav-logo-svg { opacity: 0.9; transform: scale(1.02); }

/* ─── FOOTER LOGO SVG ─── */
.footer-logo-svg {
  height: 52px;
  width: auto;
  display: block;
}

/* floating mechanical elements — repurposed as subtle left-side accents */
.mech-float { position: absolute; z-index: 2; pointer-events: none; }
.mf1 { width: 180px; top: 15%; right: 8%; animation: float-1 8s ease-in-out infinite; }
.mf2 { width: 80px; top: 20%; left: 2%; animation: float-2 6s ease-in-out infinite 1s; opacity: 0.4; }
.mf3 { width: 100px; bottom: 15%; left: 4%; animation: float-3 10s ease-in-out infinite 2s; opacity: 0.35; }
.mf4 { width: 70px; top: 60%; left: 1%; animation: float-1 7s ease-in-out infinite 3s; opacity: 0.3; }
@keyframes float-1 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(5deg)} }
@keyframes float-2 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-15px) rotate(-8deg)} }
@keyframes float-3 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-25px) rotate(3deg)} }

/* HUD corners */
.hud-corner { position: absolute; width: 40px; height: 40px; z-index: 3; }
.hud-corner::before, .hud-corner::after { content:''; position:absolute; background:var(--red); opacity:0.5; }
.hud-tl { top:80px; left:20px; }
.hud-tr { top:80px; right:20px; }
.hud-bl { bottom:20px; left:20px; }
.hud-br { bottom:20px; right:20px; }
.hud-tl::before,.hud-tr::before,.hud-bl::before,.hud-br::before { width:100%; height:1.5px; top:0; left:0; }
.hud-tl::after,.hud-tr::after,.hud-bl::after,.hud-br::after { width:1.5px; height:100%; top:0; left:0; }
.hud-tr::before { left:auto; right:0; }
.hud-tr::after  { left:auto; right:0; }
.hud-bl::before { top:auto; bottom:0; }
.hud-bl::after  { top:auto; bottom:0; }
.hud-br::before { top:auto; bottom:0; left:auto; right:0; }
.hud-br::after  { top:auto; bottom:0; left:auto; right:0; }

.hud-label {
  position: absolute; left: 50%; transform: translateX(-50%);
  z-index: 3; font-size: 10px; letter-spacing: 0.15em;
  color: rgba(227,27,35,0.45); white-space: nowrap;
}
.hud-label-bot { bottom: 24px; }

/* hero badge + text */
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.2em; color: var(--steel-light);
  margin-bottom: 32px;
  border: 1px solid rgba(227,27,35,0.3); padding: 8px 16px;
  border-radius: 2px; background: rgba(227,27,35,0.05);
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 8px var(--red);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; box-shadow:0 0 8px var(--red); }
  50%      { opacity:0.5; box-shadow:0 0 16px var(--red); }
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.92; letter-spacing: 0.01em;
  color: var(--white); margin-bottom: 28px; overflow: hidden;
}
.line-wrap { display: block; overflow: hidden; }
.hero-line { display: block; transform: translateY(110%); animation: line-rise 0.9s var(--ease-out-expo) forwards; }
.line-wrap:nth-child(1) .hero-line { animation-delay: 0.3s; }
.line-wrap:nth-child(2) .hero-line { animation-delay: 0.45s; }
.line-wrap:nth-child(3) .hero-line { animation-delay: 0.6s; }
.hero-line-accent { color: var(--red); }
@keyframes line-rise { to { transform: translateY(0); } }
.hero-sub {
  font-size: clamp(14px, 1.6vw, 17px); font-weight: 300;
  line-height: 1.6; color: var(--steel-light);
  max-width: 460px; margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }

/* Scroll indicator */
.scroll-indicator { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.2em; color: var(--steel); }
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, transparent, var(--red), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse { 0%,100%{height:48px;opacity:0.5} 50%{height:64px;opacity:1} }

/* Hero visual ring system — now inside hero-right, not absolute */
.hero-visual { display: none; } /* old class, unused */
.ring-system {
  position: relative; width: 260px; height: 260px;
  display: flex; align-items: center; justify-content: center;
}
.ring { position: absolute; border-radius: 50%; border: 1px solid transparent; }
.r1 { width:100%; height:100%; border:1px solid rgba(227,27,35,0.2); animation:ring-rotate 20s linear infinite; }
.r2 { width:75%; height:75%; border:1px dashed rgba(227,27,35,0.3); animation:ring-rotate-rev 15s linear infinite; }
.r3 { width:50%; height:50%; border:1px solid rgba(227,27,35,0.4); animation:ring-rotate 10s linear infinite; }
@keyframes ring-rotate     { to { transform: rotate(360deg); } }
@keyframes ring-rotate-rev { to { transform: rotate(-360deg); } }

.ring-center {
  position: relative; z-index: 2;
  width: 130px; height: 130px;
  display: flex; align-items: center; justify-content: center; overflow: visible;
}
.mascot-wrap { background: transparent !important; }
.mascot-svg {
  width: 130px; height: 156px;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  filter: drop-shadow(0 0 16px rgba(91,200,232,0.2)) drop-shadow(0 6px 20px rgba(0,0,0,0.55));
  animation: mascot-bob 3s ease-in-out infinite;
}
@keyframes mascot-bob {
  0%,100% { transform: translate(-50%,-52%) translateY(0); }
  50%      { transform: translate(-50%,-52%) translateY(-8px); }
}

.orbit { position: absolute; border-radius: 50%; animation: ring-rotate linear infinite; }
.orbit-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 10px var(--red);
  position: absolute; top: -3.5px; left: 50%; transform: translateX(-50%);
}
.o1 { width:100%; height:100%; animation-duration:20s; }
.o2 { width:75%; height:75%; top:12.5%; left:12.5%; animation-duration:15s; animation-direction:reverse; }
.o3 { width:50%; height:50%; top:25%; left:25%; animation-duration:10s; }
.od2 { background:rgba(227,27,35,0.5); box-shadow:0 0 7px rgba(227,27,35,0.5); }
.od3 { width:4px; height:4px; top:-2px; background:var(--white); box-shadow:0 0 5px var(--white); }

.readout-panels { display: flex; flex-direction: row; gap: 8px; width: 100%; flex-wrap: wrap; justify-content: center; }
.readout-panel {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 14px; background: rgba(227,27,35,0.05);
  border: 1px solid rgba(227,27,35,0.15); border-radius: 2px; min-width: 80px;
}
.rp-label { font-size: 9px; letter-spacing: 0.15em; color: var(--steel); margin-bottom: 2px; }
.rp-val { font-family: var(--font-cond); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--steel-light); }
.rp-active { color: var(--red) !important; animation: pulse 2s ease-in-out infinite; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-cond); font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--white);
  background: var(--red); padding: 14px 28px;
  border-radius: 4px; border: 1px solid var(--red);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform 0.4s;
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:hover { background: var(--red-light); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(227,27,35,0.4); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-cond); font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--white);
  background: transparent; padding: 14px 28px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,0.2);
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.btn-ghost:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 12px; }

.btn-white {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-cond); font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--red);
  background: var(--white); padding: 14px 28px;
  border-radius: 4px; border: 1px solid var(--white);
  transition: background 0.2s, transform 0.2s;
}
.btn-white:hover { background: var(--light-2); transform: translateY(-2px); }

.btn-outline-white {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-cond); font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--white);
  background: transparent; padding: 14px 28px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,0.5);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,0.08); transform: translateY(-2px); }

/* Scroll indicator */
.scroll-indicator { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.2em; color: var(--steel); }
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, transparent, var(--red), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse { 0%,100%{height:48px;opacity:0.5} 50%{height:64px;opacity:1} }

/* ─── SECTIONS — lighter, animated, alive ─── */

/* Shared animated blob keyframes */
@keyframes blob-drift-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(40px,-30px) scale(1.08); }
  66%      { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes blob-drift-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%      { transform: translate(-50px, 25px) scale(1.1); }
  70%      { transform: translate(30px,-15px) scale(0.93); }
}
@keyframes blob-drift-3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(25px, 40px) scale(1.06); }
}

/* Shared blob element style */
.section-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(60px);
}

/* Stats — warm off-white dark, soft blob movement */
#stats {
  position: relative; z-index: 5;
  padding: var(--section-pad) 0;
  background: #222020;
  overflow: hidden;
}
#stats::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,27,35,0.5), transparent);
}
#stats .section-blob.b1 {
  width: 500px; height: 500px;
  top: -100px; left: -80px;
  background: radial-gradient(circle, rgba(227,27,35,0.12) 0%, transparent 70%);
  animation: blob-drift-1 12s ease-in-out infinite;
}
#stats .section-blob.b2 {
  width: 400px; height: 400px;
  bottom: -120px; right: 5%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  animation: blob-drift-2 16s ease-in-out infinite 2s;
}

/* What We Do — noticeably lighter, warm grey, white aurora */
#what-we-do {
  position: relative; z-index: 5;
  padding: var(--section-pad) 0;
  background: #2e2c2c;
  overflow: hidden;
}
#what-we-do::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
#what-we-do .section-blob.b1 {
  width: 600px; height: 600px;
  top: -150px; right: -100px;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  animation: blob-drift-2 14s ease-in-out infinite;
}
#what-we-do .section-blob.b2 {
  width: 350px; height: 350px;
  bottom: -50px; left: 10%;
  background: radial-gradient(circle, rgba(227,27,35,0.07) 0%, transparent 70%);
  animation: blob-drift-3 18s ease-in-out infinite 3s;
}
#what-we-do .section-blob.b3 {
  width: 280px; height: 280px;
  top: 30%; left: 40%;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
  animation: blob-drift-1 20s ease-in-out infinite 1s;
}

/* Events Preview — warmest section, light charcoal with energy */
#events-preview {
  position: relative; z-index: 5;
  padding: var(--section-pad) 0;
  background: #272422;
  overflow: hidden;
}
#events-preview::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,27,35,0.4), transparent);
}
#events-preview .section-blob.b1 {
  width: 550px; height: 550px;
  top: -100px; right: -60px;
  background: radial-gradient(circle, rgba(227,27,35,0.10) 0%, transparent 70%);
  animation: blob-drift-3 13s ease-in-out infinite;
}
#events-preview .section-blob.b2 {
  width: 380px; height: 380px;
  bottom: -100px; left: -40px;
  background: radial-gradient(circle, rgba(255,200,100,0.04) 0%, transparent 70%);
  animation: blob-drift-1 17s ease-in-out infinite 4s;
}

/* Keep old classes for other pages */
.section-dark  { position:relative; z-index:5; background:#222020; padding:var(--section-pad) 0; overflow:hidden; }
.section-light { position:relative; z-index:5; background:#2e2c2c; padding:var(--section-pad) 0; overflow:hidden; }

/* Ensure section content sits above canvas */
#stats .container,
#what-we-do .container,
#events-preview .container { position: relative; z-index: 1; }

/* Stats */
.stats-label { font-size:11px; letter-spacing:0.2em; color:var(--steel); margin-bottom:48px; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: rgba(227,27,35,0.12);
  border: 1px solid rgba(227,27,35,0.12); border-radius: 4px; overflow: hidden;
}
.stat-item {
  position:relative; padding:48px 36px; overflow:hidden;
  background: rgba(255,255,255,0.025);
  transition: background 0.3s;
}
.stat-item:hover { background: rgba(255,255,255,0.05); }
.stat-bar { position:absolute; top:0; left:0; width:0%; height:3px; background:var(--red); transition:width 1.5s var(--ease-out-expo); box-shadow:0 0 10px var(--red); }
.stat-item.counted .stat-bar { width: 100%; }
.stat-number { font-family:var(--font-display); font-size:clamp(52px,6vw,80px); line-height:1; color:var(--white); margin-bottom:12px; display:flex; align-items:baseline; gap:2px; }
.stat-suffix { font-size:0.5em; color:var(--red); }
.stat-name { font-family:var(--font-cond); font-size:16px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--white); margin-bottom:6px; }
.stat-desc { font-size:11px; letter-spacing:0.12em; color:var(--steel); text-transform:uppercase; }

/* Section headers */
.section-header { margin-bottom: 72px; }
.flex-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.section-tag { font-size:11px; letter-spacing:0.2em; color:var(--red); margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.section-tag::after { content:''; display:block; width:40px; height:1px; background:var(--red); opacity:0.5; }
.section-title { font-family:var(--font-display); font-size:clamp(42px,6vw,72px); line-height:0.95; color:var(--white); letter-spacing:0.02em; margin-bottom:24px; }
.section-desc { font-size:16px; font-weight:300; line-height:1.7; color:var(--steel-light); max-width:540px; }

/* Pillars — lighter cards, stronger contrast */
.pillars-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,0.05); border-radius:4px; overflow:hidden; }
.pillar-card {
  position:relative; padding:48px 40px; overflow:hidden;
  background: #2c2c2c;
  transition: background 0.3s, transform 0.2s;
  border: 1px solid rgba(255,255,255,0.06);
}
.pillar-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform 0.4s var(--ease-out-expo); }
.pillar-card:hover::before { transform: scaleX(1); }
.pillar-card:hover { background: #333; }
.pillar-glow { position:absolute; bottom:-80px; right:-80px; width:220px; height:220px; background:radial-gradient(circle,rgba(227,27,35,0.12) 0%,transparent 70%); opacity:0; transition:opacity 0.4s; pointer-events:none; }
.pillar-card:hover .pillar-glow { opacity: 1; }
.pillar-num { font-size:11px; letter-spacing:0.2em; color:var(--red); margin-bottom:24px; }
.pillar-icon { width:48px; height:48px; color:var(--steel-light); margin-bottom:24px; transition:color 0.3s; }
.pillar-card:hover .pillar-icon { color: var(--white); }
.pillar-title { font-family:var(--font-cond); font-size:24px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--white); margin-bottom:16px; line-height:1.1; }
.pillar-text { font-size:14px; font-weight:300; line-height:1.7; color:var(--steel-light); margin-bottom:32px; }
.pillar-link { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-cond); font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; color:var(--red); transition:gap 0.2s; }
.pillar-link:hover { gap: 12px; }

/* Events grid — warmer, more life */
.events-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; background:rgba(255,255,255,0.05); border-radius:4px; overflow:hidden; }
.event-card {
  background: #2a2422;
  transition: background 0.3s;
  overflow:hidden; border: 1px solid rgba(255,255,255,0.05);
}
.event-card:hover { background: #333028; }
.event-img-wrap { position:relative; aspect-ratio:16/9; overflow:hidden; }
.event-img-placeholder { width:100%; height:100%; background:#1e1c1a; display:flex; align-items:center; justify-content:center; font-size:48px; position:relative; }
.eip-social { background: #121a12; }
.eip-career { background: #10121a; }
.ep-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(227,27,35,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(227,27,35,0.07) 1px,transparent 1px); background-size:24px 24px; }
.ep-icon { position:relative; z-index:1; font-size:40px; }
.event-badge { position:absolute; top:12px; left:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:4px 10px; border-radius:2px; }
.badge-workshop { background:rgba(227,27,35,0.18); color:var(--red); border:1px solid rgba(227,27,35,0.35); }
.badge-social   { background:rgba(34,197,94,0.14); color:#4ade80; border:1px solid rgba(34,197,94,0.28); }
.badge-career   { background:rgba(59,130,246,0.14); color:#60a5fa; border:1px solid rgba(59,130,246,0.28); }
.badge-academic { background:rgba(234,179,8,0.14); color:#facc15; border:1px solid rgba(234,179,8,0.28); }
.event-date-chip { position:absolute; top:12px; right:12px; background:var(--red); border-radius:2px; padding:6px 10px; display:flex; flex-direction:column; align-items:center; line-height:1; }
.edc-day { font-family:var(--font-display); font-size:20px; color:var(--white); }
.edc-mon { font-family:var(--font-mono); font-size:10px; color:rgba(255,255,255,0.8); text-transform:uppercase; letter-spacing:0.1em; }
.event-body { padding: 28px; }
.event-title { font-family:var(--font-cond); font-size:20px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--white); margin-bottom:8px; line-height:1.2; }
.event-meta { font-size:10px; letter-spacing:0.12em; color:var(--steel); margin-bottom:14px; text-transform:uppercase; }
.event-desc { font-size:13px; font-weight:300; line-height:1.6; color:var(--steel-light); margin-bottom:20px; }
.event-cta { font-family:var(--font-cond); font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; color:var(--red); transition:letter-spacing 0.2s; }
.event-cta:hover { letter-spacing: 0.15em; }

/* Marquee */
.marquee-strip { position:relative; z-index:5; background:var(--red); padding:16px 0; overflow:hidden; }
.marquee-track { display:flex; white-space:nowrap; animation:marquee 28s linear infinite; }
.marquee-track span { font-size:11px; letter-spacing:0.2em; color:rgba(255,255,255,0.9); display:inline-block; padding:0 6px; font-weight:600; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* CTA Banner */
.section-red { position:relative; z-index:5; background:var(--red); padding:var(--section-pad) 0; overflow:hidden; }
.cta-inner { display:flex; align-items:center; gap:80px; position:relative; }
.cta-content { flex: 1; }
.cta-eyebrow { display:block; font-size:11px; letter-spacing:0.2em; color:rgba(255,255,255,0.6); margin-bottom:16px; }
.cta-headline { font-family:var(--font-display); font-size:clamp(52px,7vw,100px); line-height:0.9; color:var(--white); margin-bottom:20px; }
.cta-headline strong { font-weight: 400; }
.cta-sub { font-size:16px; font-weight:300; line-height:1.6; color:rgba(255,255,255,0.75); max-width:440px; }
.cta-actions { display:flex; flex-direction:column; gap:16px; flex-shrink:0; }
.cta-deco { position:absolute; right:0; top:50%; transform:translateY(-50%); width:400px; height:200px; pointer-events:none; opacity:0.6; }
.cta-deco svg { width:100%; height:100%; }

/* ─── FOOTER ─── */
#footer { position:relative; z-index:5; background:#161412; border-top:1px solid rgba(227,27,35,0.2); padding:80px 0 40px; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:60px; margin-bottom:60px; }
.footer-logo { display:flex; align-items:center; gap:14px; text-decoration:none; margin-bottom:20px; }
.footer-logo-img {
  height: 48px; width: auto; object-fit: contain;
  filter: brightness(0) invert(1);
}
.footer-tagline { font-size:14px; font-weight:300; line-height:1.6; color:var(--steel); margin-bottom:24px; }
.footer-socials { display:flex; gap:12px; }
.social-link { width:36px; height:36px; border:1px solid rgba(255,255,255,0.1); border-radius:4px; display:flex; align-items:center; justify-content:center; transition:border-color 0.2s, color 0.2s, transform 0.2s; color:var(--steel); text-decoration:none; }
.social-link svg { width:16px; height:16px; }
.social-link:hover { border-color:var(--red); color:var(--red); transform:translateY(-2px); }
.footer-col-title { font-size:11px; letter-spacing:0.2em; color:var(--red); margin-bottom:20px; text-transform:uppercase; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:10px; }
.footer-links a { font-size:14px; font-weight:300; color:var(--steel); text-decoration:none; transition:color 0.2s, padding-left 0.2s; display:inline-block; }
.footer-links a:hover { color:var(--white); padding-left:4px; }
.footer-email { display:block; font-family:var(--font-mono); font-size:13px; color:var(--red); text-decoration:none; letter-spacing:0.05em; margin-bottom:16px; transition:color 0.2s; }
.footer-email:hover { color: var(--red-light); }
.footer-address { font-size:13px; font-weight:300; line-height:1.7; color:var(--steel); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.05); padding-top:24px; display:flex; justify-content:space-between; align-items:center; }
.footer-copy { font-size:11px; letter-spacing:0.1em; color:var(--steel); }
.footer-built { font-size:11px; letter-spacing:0.1em; color:rgba(227,27,35,0.4); }

/* Mascot */
.mascot-wrap { width:130px !important; height:130px !important; background:transparent !important; overflow:visible !important; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr 1fr; gap:40px; }
  .hbp-logo-svg { width: clamp(180px, 22vw, 280px); }
  .ring-system { width: 220px; height: 220px; }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta { display:none; }
  .nav-hamburger { display:flex; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 40px clamp(20px, 5vw, 60px) 60px; }
  .hero-right { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 24px; }
  .pillars-grid { grid-template-columns:1fr; }
  .events-grid { grid-template-columns:1fr; }
  .cta-inner { flex-direction:column; gap:40px; text-align:center; }
  .cta-actions { flex-direction:row; justify-content:center; }
  .cta-deco { display:none; }
  .flex-header { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 600px) {
  .hero-right { display: none; }
  .stats-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  .hero-actions { flex-direction:column; }
  .hud-label { display:none; }
  .mech-float { display:none; }
  .cta-actions { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ════════════════════════════════════════
   EVENTS PAGE — events.html
   ════════════════════════════════════════ */

/* ─── EVENTS HERO ─── */
#events-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  background: var(--black);
  overflow: hidden;
}
.ev-hero-scan {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: scan 4s ease-in-out infinite; z-index: 2; opacity: 0.6;
}
.ev-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(227,27,35,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,27,35,0.04) 1px, transparent 1px);
  background-size: 60px 60px; z-index: 1;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}
/* Red bloom left */
#events-hero::after {
  content: ''; position: absolute;
  top: 0; left: -10%; bottom: 0; width: 55%;
  background: radial-gradient(ellipse 55% 50% at 20% 55%, rgba(227,27,35,0.08) 0%, transparent 80%);
  pointer-events: none; z-index: 0;
}
.ev-hero-inner {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  padding: 60px clamp(20px, 5vw, 60px);
  width: 100%; max-width: var(--max-w); margin: 0 auto;
}
.ev-hero-left { display: flex; flex-direction: column; }
.ev-hero-title {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.92; letter-spacing: 0.01em;
  color: var(--white); margin-bottom: 24px;
}
.ev-title-accent { color: var(--red); }
.ev-hero-sub {
  font-size: clamp(14px, 1.5vw, 17px); font-weight: 300;
  line-height: 1.65; color: var(--steel-light);
  max-width: 460px;
}

/* HUD panel */
.ev-hud-panel {
  position: relative;
  border: 1px solid rgba(227,27,35,0.3);
  border-radius: 3px;
  padding: 28px 32px;
  background: rgba(227,27,35,0.04);
  min-width: 260px;
  backdrop-filter: blur(4px);
}
.ev-hud-header {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--steel); margin-bottom: 28px;
}
.ev-hud-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 8px var(--red);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.ev-hud-stats { display: flex; flex-direction: column; gap: 0; }
.ev-hud-stat { padding: 14px 0; }
.ev-hud-divider { height: 1px; background: rgba(255,255,255,0.06); }
.ev-hud-num {
  font-family: var(--font-display);
  font-size: 48px; line-height: 1;
  color: var(--white); display: block; margin-bottom: 4px;
}
.ev-hud-num-sm {
  font-size: 22px; line-height: 1.2;
  color: var(--red); display: block; margin-bottom: 4px;
  letter-spacing: 0.08em;
}
.ev-hud-label { font-size: 10px; letter-spacing: 0.18em; color: var(--steel); }
.ev-hud-footer {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 10px; letter-spacing: 0.15em;
  color: rgba(255,255,255,0.2);
}

/* ─── FILTER BAR ─── */
#filter-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  background: rgba(17,17,17,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-top: 1px solid rgba(227,27,35,0.2);
}
.filter-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 clamp(20px, 5vw, 60px);
  max-width: var(--max-w); margin: 0 auto;
}
.filter-tabs { display: flex; align-items: center; gap: 0; }
.filter-btn {
  font-family: var(--font-cond); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--steel); background: none; border: none;
  padding: 18px 16px; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.filter-btn:hover { color: var(--white); }
.filter-btn.active { color: var(--white); border-bottom-color: var(--red); }
.filter-sep {
  width: 1px; height: 20px;
  background: rgba(255,255,255,0.1);
  margin: 0 8px;
}
.filter-count { font-size: 10px; letter-spacing: 0.18em; color: var(--steel); white-space: nowrap; }

/* ─── EVENTS MAIN SECTION ─── */
#events-main {
  position: relative; z-index: 5;
  padding: var(--section-pad) 0 calc(var(--section-pad) * 1.2);
  background: #222020;
  overflow: hidden;
}
#events-main .section-blob.b1 {
  position: absolute; width: 500px; height: 500px;
  top: -80px; left: -60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,27,35,0.10) 0%, transparent 70%);
  pointer-events: none; filter: blur(60px);
  animation: blob-drift-1 13s ease-in-out infinite;
}
#events-main .section-blob.b2 {
  position: absolute; width: 400px; height: 400px;
  bottom: -100px; right: -40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,27,35,0.07) 0%, transparent 70%);
  pointer-events: none; filter: blur(60px);
  animation: blob-drift-2 17s ease-in-out infinite 2s;
}

/* Section label + line */
.ev-section-label {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 40px; flex-wrap: wrap;
}
.ev-section-tag {
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--red); white-space: nowrap;
}
.ev-section-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(227,27,35,0.3), transparent);
}

/* Past toggle button */
.ev-toggle-past {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--steel); background: none; border: 1px solid rgba(255,255,255,0.1);
  padding: 8px 16px; border-radius: 2px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.ev-toggle-past:hover { color: var(--white); border-color: rgba(255,255,255,0.25); }
.ev-toggle-chevron { transition: transform 0.3s var(--ease-out-expo); flex-shrink: 0; }

/* ─── EVENTS GRID ─── */
.events-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
}

/* ─── EVENT CARD ─── */
.ev-card {
  background: #2a2422;
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  position: relative;
}
.ev-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
  z-index: 2;
}
.ev-card:hover::before { transform: scaleX(1); }
.ev-card:hover { background: #333028; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }

/* Past card */
.ev-card-past { opacity: 0.62; }
.ev-card-past:hover { opacity: 0.85; }

/* Hidden by filter */
.ev-card.ev-hidden { display: none; }

/* Card image */
.ev-card-img {
  position: relative; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.eimg-workshop { background: #1e0a0a; }
.eimg-career   { background: #0a0d1a; }
.eimg-social   { background: #0a160a; }
.eimg-academic { background: #16130a; }
.ep-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(227,27,35,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,27,35,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.ep-icon { position: relative; z-index: 1; font-size: 40px; }

/* Past overlay label */
.ev-past-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-cond); font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; color: rgba(255,255,255,0.25);
  z-index: 3; pointer-events: none;
}

/* Badges */
.event-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px;
}
.badge-workshop { background: rgba(227,27,35,0.18); color: var(--red); border: 1px solid rgba(227,27,35,0.35); }
.badge-social   { background: rgba(34,197,94,0.14);  color: #4ade80; border: 1px solid rgba(34,197,94,0.28); }
.badge-career   { background: rgba(59,130,246,0.14);  color: #60a5fa; border: 1px solid rgba(59,130,246,0.28); }
.badge-academic { background: rgba(234,179,8,0.14);   color: #facc15; border: 1px solid rgba(234,179,8,0.28); }

/* Date chip */
.ev-date-chip {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--red); border-radius: 2px;
  padding: 6px 10px; display: flex;
  flex-direction: column; align-items: center; line-height: 1;
}
.ev-date-chip-past { background: rgba(255,255,255,0.15); }
.edc-day { font-family: var(--font-display); font-size: 20px; color: var(--white); }
.edc-mon { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.1em; }

/* Card body */
.ev-card-body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.ev-card-title {
  font-family: var(--font-cond); font-size: 19px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--white); margin-bottom: 10px; line-height: 1.2;
}
.ev-card-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ev-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--steel); text-transform: uppercase;
}
.ev-meta-item svg { opacity: 0.6; flex-shrink: 0; }
.ev-card-desc {
  font-size: 13px; font-weight: 300; line-height: 1.65;
  color: var(--steel-light); margin-bottom: 24px; flex: 1;
}
.ev-card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-cond); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--red);
  transition: gap 0.2s, color 0.2s;
  margin-top: auto;
}
.ev-card-cta:hover { gap: 12px; }
.ev-card-cta-past { color: var(--steel); }
.ev-card-cta-past:hover { color: var(--steel-light); }

/* ─── PAST EVENTS COLLAPSE ─── */
.events-past-wrap {
  max-height: 0; overflow: hidden;
  transition: max-height 0.6s var(--ease-out-expo);
}
.events-past-wrap.expanded { max-height: 2000px; }

/* ─── SUGGEST STRIP ─── */
#suggest-strip {
  position: relative; z-index: 5;
  background: #1a1210;
  border-top: 1px solid rgba(227,27,35,0.2);
  border-bottom: 1px solid rgba(227,27,35,0.2);
  padding: 64px 0;
}
.suggest-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}
.suggest-tag { font-size: 11px; letter-spacing: 0.2em; color: var(--red); margin-bottom: 12px; }
.suggest-title {
  font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px);
  color: var(--white); line-height: 1; margin-bottom: 12px;
}
.suggest-sub { font-size: 15px; font-weight: 300; color: var(--steel-light); max-width: 400px; }
.suggest-btn { flex-shrink: 0; }

/* ─── RESPONSIVE — Events ─── */
@media (max-width: 1000px) {
  .events-full-grid { grid-template-columns: repeat(2, 1fr); }
  .ev-hero-inner { grid-template-columns: 1fr; }
  .ev-hud-panel { display: none; }
}
@media (max-width: 700px) {
  .events-full-grid { grid-template-columns: 1fr; }
  .filter-tabs { overflow-x: auto; padding-bottom: 2px; }
  .filter-bar-inner { flex-direction: column; align-items: flex-start; gap: 0; }
  .filter-count { padding: 8px 0 12px; }
  .suggest-inner { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════
   TEAM PAGE — team.html
   ════════════════════════════════════════ */

/* ─── TEAM HERO ─── */
#team-hero {
  position: relative;
  min-height: 52vh;
  display: flex; align-items: center;
  padding-top: var(--nav-h);
  background: var(--black);
  overflow: hidden;
}
.tm-hero-scan {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: scan 4s ease-in-out infinite; z-index: 2; opacity: 0.6;
}
.tm-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(227,27,35,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,27,35,0.04) 1px, transparent 1px);
  background-size: 60px 60px; z-index: 1;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}
#team-hero::after {
  content: ''; position: absolute;
  top: 0; left: -10%; bottom: 0; width: 55%;
  background: radial-gradient(ellipse 55% 50% at 20% 55%, rgba(227,27,35,0.08) 0%, transparent 80%);
  pointer-events: none; z-index: 0;
}
.tm-hero-inner {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 48px;
  padding: 60px clamp(20px,5vw,60px);
  width: 100%; max-width: var(--max-w); margin: 0 auto;
}
.tm-hero-left { display: flex; flex-direction: column; }
.tm-hero-title {
  font-family: var(--font-display);
  font-size: clamp(60px, 8vw, 112px);
  line-height: 0.92; letter-spacing: 0.01em;
  color: var(--white); margin-bottom: 24px;
}
.tm-title-accent { color: var(--red); }
.tm-hero-sub {
  font-size: clamp(14px,1.5vw,17px); font-weight: 300;
  line-height: 1.65; color: var(--steel-light); max-width: 480px;
}

/* HUD panel (reuses ev-hud styles + these) */
.tm-hud-panel {
  position: relative;
  border: 1px solid rgba(227,27,35,0.3); border-radius: 3px;
  padding: 28px 32px;
  background: rgba(227,27,35,0.04);
  min-width: 240px;
  backdrop-filter: blur(4px);
}
.tm-hud-header {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--steel); margin-bottom: 28px;
}
.tm-hud-stats { display: flex; flex-direction: column; }
.tm-hud-stat { padding: 14px 0; }
.tm-hud-divider { height: 1px; background: rgba(255,255,255,0.06); }
.tm-hud-num {
  font-family: var(--font-display); font-size: 48px; line-height: 1;
  color: var(--white); display: block; margin-bottom: 4px;
}
.tm-hud-num-sm {
  font-size: 20px; line-height: 1.2; color: var(--red);
  display: block; margin-bottom: 4px; letter-spacing: 0.08em;
}
.tm-hud-label { font-size: 10px; letter-spacing: 0.18em; color: var(--steel); }
.tm-hud-footer {
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.18);
}

/* ─── TEAM MAIN SECTION ─── */
#team-main {
  position: relative; z-index: 5;
  padding: var(--section-pad) 0;
  background: #222020; overflow: hidden;
}
#team-main .section-blob.b1 {
  position: absolute; width: 550px; height: 550px;
  top: -100px; right: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,27,35,0.09) 0%, transparent 70%);
  pointer-events: none; filter: blur(60px);
  animation: blob-drift-2 14s ease-in-out infinite;
}
#team-main .section-blob.b2 {
  position: absolute; width: 400px; height: 400px;
  bottom: 10%; left: -60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,27,35,0.06) 0%, transparent 70%);
  pointer-events: none; filter: blur(60px);
  animation: blob-drift-1 18s ease-in-out infinite 3s;
}
.tm-container { position: relative; z-index: 1; }

/* Tier label */
.tm-tier-label {
  display: flex; align-items: center; gap: 20px; margin-bottom: 40px;
}
.tm-tier-left { display: flex; align-items: baseline; gap: 16px; flex-shrink: 0; }
.tm-tier-tag { font-size: 11px; letter-spacing: 0.2em; color: var(--red); }
.tm-tier-title {
  font-family: var(--font-display); font-size: clamp(28px,4vw,42px);
  color: var(--white); line-height: 1; white-space: nowrap;
}
.tm-tier-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(227,27,35,0.3), transparent);
}

/* ─── TEAM GRIDS ─── */
.tm-grid {
  display: grid; gap: 2px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px; overflow: hidden;
}
.tm-grid-exec      { grid-template-columns: repeat(3, 1fr); }
.tm-grid-directors { grid-template-columns: repeat(4, 1fr); }
.tm-grid-general   { grid-template-columns: repeat(4, 1fr); }

/* ─── TEAM CARD ─── */
.tm-card {
  background: #272424;
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  position: relative;
}
.tm-card:hover { background: #312e2e; box-shadow: 0 12px 40px rgba(0,0,0,0.45); }

/* Photo area — square, initials placeholder */
.tm-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #1e1c1c;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tm-initials {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  color: var(--tm-color, var(--red));
  letter-spacing: 0.04em;
  position: relative; z-index: 1;
  opacity: 0.9;
  transition: opacity 0.3s, transform 0.3s;
}
.tm-card:hover .tm-initials { opacity: 1; transform: scale(1.06); }
.tm-photo-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, var(--tm-color, var(--red)) 0%, transparent 70%);
  opacity: 0.08;
  transition: opacity 0.4s;
}
.tm-card:hover .tm-photo-glow { opacity: 0.16; }

/* Role bar */
.tm-role-bar {
  background: var(--tm-color, var(--red));
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.15em;
  color: rgba(255,255,255,0.9);
}

/* Info */
.tm-info { padding: 20px 20px 24px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tm-name {
  font-family: var(--font-cond); font-size: 18px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--white); line-height: 1.1;
}
.tm-meta { font-size: 9px; letter-spacing: 0.15em; color: var(--steel); }
.tm-bio {
  font-size: 12px; font-weight: 300; line-height: 1.6;
  color: var(--steel-light); margin-top: 4px; flex: 1;
}
.tm-linkedin {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-cond); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--steel);
  margin-top: 8px;
  transition: color 0.2s;
}
.tm-linkedin:hover { color: var(--white); }

/* ─── OPEN ROLES SECTION ─── */
#open-roles {
  position: relative; z-index: 5;
  padding: var(--section-pad) 0;
  background: #2e2c2c; overflow: hidden;
}
#open-roles .section-blob.b1 {
  position: absolute; width: 500px; height: 500px;
  top: -80px; left: -60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none; filter: blur(60px);
  animation: blob-drift-1 16s ease-in-out infinite;
}
#open-roles .section-blob.b3 {
  position: absolute; width: 350px; height: 350px;
  bottom: -60px; right: 5%; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,27,35,0.06) 0%, transparent 70%);
  pointer-events: none; filter: blur(60px);
  animation: blob-drift-3 20s ease-in-out infinite 2s;
}
.roles-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2px; background: rgba(255,255,255,0.04);
  border-radius: 4px; overflow: hidden;
}
.role-card {
  background: #2a2828; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 20px;
  border: 1px solid rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
  transition: background 0.3s;
}
.role-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}
.role-card:hover::before { transform: scaleX(1); }
.role-card:hover { background: #333030; }
.role-card-top { display: flex; flex-direction: column; gap: 10px; }
.role-badge {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.18em;
  color: #4ade80; background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.25);
  padding: 3px 10px; border-radius: 2px; width: fit-content;
}
.role-title {
  font-family: var(--font-cond); font-size: 22px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--white); line-height: 1.1;
}
.role-duties {
  list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.role-duties li {
  font-size: 13px; font-weight: 300; line-height: 1.6;
  color: var(--steel-light);
  padding-left: 16px; position: relative;
}
.role-duties li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 1px; background: var(--red);
}
.role-btn { align-self: flex-start; margin-top: auto; }

/* ─── RESPONSIVE — Team ─── */
@media (max-width: 1100px) {
  .tm-grid-directors { grid-template-columns: repeat(2,1fr); }
  .tm-grid-general   { grid-template-columns: repeat(3,1fr); }
  .roles-grid        { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .tm-hero-inner { grid-template-columns: 1fr; }
  .tm-hud-panel  { display: none; }
  .tm-grid-exec      { grid-template-columns: repeat(2,1fr); }
  .tm-grid-directors { grid-template-columns: repeat(2,1fr); }
  .tm-grid-general   { grid-template-columns: repeat(2,1fr); }
  .roles-grid        { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tm-grid-exec      { grid-template-columns: 1fr; }
  .tm-grid-directors { grid-template-columns: 1fr; }
  .tm-grid-general   { grid-template-columns: repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════
   LIGHT MODE THEME
   Applied via [data-theme="light"] on <html>
   ══════════════════════════════════════════════════ */

[data-theme="light"] {
  --black:       #f5f3ef;
  --dark:        #eceae5;
  --dark-2:      #e4e1db;
  --dark-3:      #d8d5ce;
  --dark-4:      #c8c4bc;
  --white:       #1a1815;
  --steel:       #6b6760;
  --steel-light: #3d3a35;
  --light:       #1a1815;
  --light-2:     #2a2724;
  --light-3:     #3d3a35;
}

/* Body background */
[data-theme="light"] body {
  background: #f5f3ef;
  color: #1a1815;
}

/* Nav */
[data-theme="light"] #nav.scrolled {
  background: rgba(245,243,239,0.93);
  border-bottom-color: rgba(227,27,35,0.2);
}
[data-theme="light"] .mobile-menu {
  background: rgba(245,243,239,0.98);
  border-bottom-color: rgba(227,27,35,0.15);
}
[data-theme="light"] .mobile-menu li a {
  color: #1a1815;
  border-bottom-color: #d8d5ce;
}
[data-theme="light"] .nav-hamburger span { background: #1a1815; }

/* Loader */
[data-theme="light"] #loader { background: #f5f3ef; }

/* Hero sections */
[data-theme="light"] #hero,
[data-theme="light"] #events-hero,
[data-theme="light"] #academics-hero,
[data-theme="light"] #contact-hero,
[data-theme="light"] #team-hero { background: #f5f3ef; }

/* Section backgrounds */
[data-theme="light"] #stats,
[data-theme="light"] .section-dark,
[data-theme="light"] .year-section:nth-child(odd),
[data-theme="light"] #ct-join,
[data-theme="light"] #ac-tutoring,
[data-theme="light"] #ac-resources { background: #eceae5; }

[data-theme="light"] #what-we-do,
[data-theme="light"] .section-light,
[data-theme="light"] #events-preview,
[data-theme="light"] .year-section:nth-child(even),
[data-theme="light"] #ct-what,
[data-theme="light"] #ct-discord-cta { background: #e4e1db; }

[data-theme="light"] #footer { background: #d8d5ce; border-top-color: rgba(227,27,35,0.15); }

/* Cards */
[data-theme="light"] .pillar-card { background: #eceae5; border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .pillar-card:hover { background: #e4e1db; }
[data-theme="light"] .event-card { background: #eceae5; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .event-card:hover { background: #e0ddd7; }
[data-theme="light"] .stat-item { background: rgba(0,0,0,0.03); }
[data-theme="light"] .stat-item:hover { background: rgba(0,0,0,0.06); }

/* Course cards (academics page) */
[data-theme="light"] .course-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .course-card:hover { border-color: rgba(227,27,35,0.3); }
[data-theme="light"] .course-overview { background: rgba(0,0,0,0.03); }
[data-theme="light"] .weeks-table-header,
[data-theme="light"] .week-row { border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .coming-soon-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .contribute-strip { background: rgba(227,27,35,0.06); border-color: rgba(227,27,35,0.2); }
[data-theme="light"] .semester-label { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .ac-hud-panel { background: rgba(0,0,0,0.03); border-color: rgba(227,27,35,0.25); }
[data-theme="light"] .ac-hud-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .year-tab-bar { background: #f0ede8; border-bottom-color: rgba(0,0,0,0.07); }

/* Resource & tutoring cards */
[data-theme="light"] .resource-card,
[data-theme="light"] .tutoring-card,
[data-theme="light"] .what-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .resource-card:hover,
[data-theme="light"] .what-card:hover { border-color: rgba(227,27,35,0.3); }

/* Channel cards (contact page) */
[data-theme="light"] .channel-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .channel-card--discord { background: rgba(88,101,242,0.05); }
[data-theme="light"] .channel-card--instagram { background: rgba(225,48,108,0.04); }
[data-theme="light"] .channel-card--linkedin { background: rgba(10,102,194,0.04); }

/* FAQ & Join steps */
[data-theme="light"] .faq-item { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .join-step { border-bottom-color: rgba(0,0,0,0.07); }

/* Team cards */
[data-theme="light"] .member-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .member-card:hover { border-color: rgba(227,27,35,0.3); }
[data-theme="light"] .role-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .tm-hud-panel { background: rgba(0,0,0,0.04); border-color: rgba(227,27,35,0.25); }
[data-theme="light"] .tm-hud-row { border-color: rgba(0,0,0,0.06); }

/* Event page specific */
[data-theme="light"] .ev-filter-bar { background: #ede9e3; border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .ev-filter-btn { color: #6b6760; }
[data-theme="light"] .ev-filter-btn:hover { color: #1a1815; }
[data-theme="light"] .ev-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ev-card:hover { border-color: rgba(227,27,35,0.3); }
[data-theme="light"] .ev-gallery-dot { background: rgba(0,0,0,0.15); }
[data-theme="light"] .ev-gallery-dot.active { background: var(--red); }

/* Buttons */
[data-theme="light"] .btn-ghost {
  color: #1a1815;
  border-color: rgba(0,0,0,0.25);
}
[data-theme="light"] .btn-ghost:hover { border-color: var(--red); color: var(--red); }

/* Social links */
[data-theme="light"] .social-link {
  border-color: rgba(0,0,0,0.12);
  color: #6b6760;
}
[data-theme="light"] .social-link:hover { border-color: var(--red); color: var(--red); }

/* Footer links */
[data-theme="light"] .footer-links a { color: #6b6760; }
[data-theme="light"] .footer-links a:hover { color: #1a1815; }
[data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .footer-copy { color: #6b6760; }

/* ─── THEME TOGGLE BUTTON ─── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  color: var(--steel-light);
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover {
  background: rgba(227,27,35,0.1);
  border-color: rgba(227,27,35,0.3);
  color: var(--white);
  transform: translateY(-1px);
}
.theme-toggle svg {
  width: 16px; height: 16px;
  position: absolute;
  transition: opacity 0.25s, transform 0.35s var(--ease-out-expo);
}
.theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.6); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

[data-theme="light"] .theme-toggle {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
  color: #3d3a35;
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(227,27,35,0.08);
  border-color: rgba(227,27,35,0.3);
  color: #1a1815;
}
[data-theme="light"] .theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }

/* Smooth global transition on theme switch */
body, body * {
  transition:
    background-color 0.35s var(--ease-in-out),
    border-color 0.35s var(--ease-in-out),
    color 0.35s var(--ease-in-out);
}
/* Exclude animations from the blanket transition */
.marquee-track, .hero-line, .loader-progress,
.badge-dot, .scroll-line, .stat-bar,
canvas, svg { transition: none !important; }

/* ══════════════════════════════════════════════════
   MCU — VFX ADDITIONS
   APPEND these rules to the bottom of css/style.css
   Do NOT replace anything — append only.
   ══════════════════════════════════════════════════ */


/* ─── SCROLL PROGRESS BAR ─── */
#scroll-progress-bar {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  height: 2px;
  width: 0%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red), 0 0 4px rgba(255,100,100,0.5);
  transition: width 0.08s linear;
  pointer-events: none;
}


/* ─── CUSTOM CURSOR ─── */
#cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border: 1px solid rgba(227, 27, 35, 0.5);
  transition:
    width 0.2s cubic-bezier(0.16,1,0.3,1),
    height 0.2s cubic-bezier(0.16,1,0.3,1),
    opacity 0.2s,
    border-color 0.2s;
  will-change: left, top;
}
#cursor-dot {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 4px;
  background: var(--red);
  transition: width 0.15s, height 0.15s;
  will-change: left, top;
}


/* ─── HERO HEADLINE — glitch clone transitions ─── */
.hero-headline {
  transition: clip-path 0.04s steps(1);
}


/* ─── FILTER BUTTON — animated active underline ─── */
.filter-btn {
  position: relative;
  transition: color 0.25s var(--ease-out-expo), border-color 0.25s var(--ease-out-expo) !important;
}
.filter-btn::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.filter-btn.active::after  { transform: scaleX(1); }
.filter-btn.active         { border-bottom-color: transparent !important; }


/* ─── ROLE BADGE PULSE ─── */
.role-badge {
  animation: role-pulse 2.4s ease-in-out infinite;
}
@keyframes role-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  50%       { box-shadow: 0 0 0 5px rgba(74,222,128,0.12); }
}


/* ─── STAT ITEM — sweep div approach (JS injects .stat-sweep div) ─── */
.stat-sweep {
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.stat-item.counted .stat-sweep {
  animation: stat-sweep-anim 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes stat-sweep-anim {
  from { left: -100%; }
  to   { left: 150%; }
}


/* ─── TEXT SELECTION ─── */
::selection       { background: rgba(227, 27, 35, 0.35); color: #fff; }
::-moz-selection  { background: rgba(227, 27, 35, 0.35); color: #fff; }


/* ─── TEAM CARD avatar hover ring ─── */
.tm-card:hover .tm-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(227, 27, 35, 0.5);
  border-radius: 0;
  animation: ring-trace 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
  pointer-events: none;
}
@keyframes ring-trace {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}


/* ─── SOCIAL LINK — lift on hover ─── */
.social-link {
  transition: border-color 0.2s, color 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s !important;
}
.social-link:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 16px rgba(227,27,35,0.2);
}


/* ─── CHANNEL CARDS (contact.html) — stronger hover ─── */
.channel-card {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, border-color 0.3s !important;
}
.channel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(227,27,35,0.2);
}


/* ─── NAV LINK — active indicator dot above ─── */
.nav-link.active::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
}


/* ─── FOCUS VISIBLE — keyboard nav highlight ─── */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}


/* ─── REDUCED MOTION — safety net ─── */
@media (prefers-reduced-motion: reduce) {
  #scroll-progress-bar,
  #cursor-ring,
  #cursor-dot,
  .stat-sweep,
  .role-badge,
  .hbp-logo-svg,
  .mascot-svg,
  .orbit,
  .badge-dot { animation: none !important; transition: none !important; }
}


/* ─── LIGHT MODE adjustments for new elements ─── */
[data-theme="light"] #scroll-progress-bar { box-shadow: 0 0 8px var(--red); }
[data-theme="light"] #cursor-ring  { border-color: rgba(227,27,35,0.6); }
[data-theme="light"] #cursor-dot   { background: var(--red); }
[data-theme="light"] .social-link:hover { box-shadow: 0 4px 16px rgba(227,27,35,0.15); }

/* Shop button — ghost outline to distinguish from Join Us */
.nav-shop {
  background: transparent;
  border: 1px solid rgba(227,27,35,0.5);
  color: var(--red) !important;
}
.nav-shop:hover {
  background: rgba(227,27,35,0.1);
  border-color: var(--red);
  color: var(--white) !important;
}