/* ==========================================================================
   Phoenix Club — Unified Design System & Stylesheet
   Navrachana University Student Community & Admin Portal
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Brand Identity (Electric Cyber-Violet & Neon Magenta from Phoenix Circuit Wing) */
  --flame-50: #f5edff;
  --flame-100: #ead6fe;
  --flame-200: #dec1fd;
  --flame-300: #cf9eff;
  --flame-400: #bc77fb;
  --flame-500: #a855f7;
  --flame-600: #9333ea;
  --flame-700: #7e22ce;
  --flame-800: #581c87;
  --flame-primary: #7e22ce;

  /* Semantic accent text. Components read these, never a raw flame step.
       --accent-text    body-sized accent text. Clears WCAG AAA (7.5:1) on white.
       --accent-display large numerals and hero accents only. */
  --accent-text: var(--flame-700);
  --accent-text-strong: var(--flame-800);
  --accent-display: var(--flame-600);

  /* Phoenix Signature Spectrum (Cyber-Circuit Violet to Neon Magenta) */
  --phoenix-violet: #7e22ce;
  --phoenix-purple: #9333ea;
  --phoenix-magenta: #c026d3;
  --phoenix-fuchsia: #d946ef;
  --phoenix-rose: #db2777;
  --phoenix-cyan: #0284c7;

  /* Theme RGB & Tint tokens (Cyber-Violet for Light Theme) */
  --flame-rgb: 126, 34, 206;
  --flame-tint-subtle: rgba(126, 34, 206, 0.08);
  --flame-tint-active: rgba(126, 34, 206, 0.12);
  --flame-tint-border: rgba(126, 34, 206, 0.22);

  /* University Heritage & Academic Accents */
  --uni-crimson: #991b1b;
  --uni-crimson-hover: #7f1d1d;
  --crimson-500: #dc2626;
  --crimson-600: #b91c1c;
  --amber-500: #9333ea;
  --amber-600: #7e22ce;
  --amber-50: #faf5ff;

  /* Semantic Status Tokens (Strict WCAG AA Compliance) */
  --emerald-600: #059669;
  --emerald-50: #ecfdf5;
  --emerald-border: #a7f3d0;
  --ruby-600: #dc2626;
  --ruby-50: #fef2f2;
  --ruby-border: #fecaca;
  --sapphire-600: #2563eb;
  --sapphire-50: #eff6ff;
  --sapphire-border: #bfdbfe;

  /* Sophisticated Slate Neutrals & Surfaces
     Three surface roles, so a component never needs a per-theme override:
       --bg-page     : cards, panels, dropdowns
       --bg-subtle   : sunken wells nested inside a surface
       --bg-elevated : raised interactive controls (pills, secondary buttons, inputs) */
  --bg-page: #f4effa;
  --bg-surface: #ffffff;
  --bg-subtle: #eae3f5;
  --bg-elevated: #ffffff;
  --bg-elevated-hover: #f8f3fe;
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --border-subtle: #e2d8f0;
  --border-strong: #cebfe5;
  --border-hover: rgba(126, 34, 206, 0.45);

  /* Elevation & Shadows (Themed Ambient Violet Reflections) */
  --glass-bg: rgba(244, 239, 250, 0.92);
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px -1px rgba(126, 34, 206, 0.07), 0 1px 3px 0 rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 18px -2px rgba(126, 34, 206, 0.11), 0 2px 5px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 14px 30px -4px rgba(126, 34, 206, 0.14), 0 4px 8px -4px rgba(15, 23, 42, 0.03);
  --shadow-xl: 0 22px 38px -8px rgba(126, 34, 206, 0.16), 0 8px 14px -6px rgba(15, 23, 42, 0.04);
  --shadow-flame: 0 8px 22px -4px rgba(126, 34, 206, 0.3);

  /* Mathematical Radius System */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Typographic Pairing */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type Scale — one step per visual role. Fluid steps carry their own clamp so a
     heading never needs a hand-written clamp() at the call site. */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1rem;
  --text-xl: 1.0625rem;
  --text-2xl: 1.125rem;
  --text-3xl: 1.25rem;
  --text-display-sm: clamp(1.25rem, 1.6vw, 1.4rem);
  --text-display-md: clamp(1.5rem, 2.2vw, 1.75rem);
  --text-display-lg: clamp(1.8rem, 2.6vw, 2.4rem);
  --text-display-xl: clamp(1.9rem, 2.8vw, 2.5rem);
  --text-display-2xl: clamp(2.2rem, 3.6vw, 3.2rem);
  --text-display-hero: clamp(2.4rem, 4vw, 3.6rem);

  /* Focus ring — one definition, used by every interactive component */
  --focus-ring: 0 0 0 3px rgba(147, 51, 234, 0.45);
  --focus-ring-offset: 2px;

  /* Layout Constants */
  --nav-height: 72px;
  --container-max: 1200px;

  /* Responsive scale (documented; media queries cannot read custom properties)
     1280px wide-desktop · 1100px nav-collapse · 900px tablet · 680px phone · 480px small phone */

  /* Transitions */
  --transition-fast: 0.16s ease;
  --transition-base: 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Base Reset & Core Typography
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink-800);
  background-color: var(--bg-page);
  background-image: 
    radial-gradient(circle at 10% 8%, rgba(147, 51, 234, 0.11) 0px, transparent 42%),
    radial-gradient(circle at 90% 12%, rgba(192, 38, 211, 0.09) 0px, transparent 38%),
    radial-gradient(circle at 50% 48%, rgba(126, 34, 206, 0.07) 0px, transparent 48%),
    radial-gradient(circle at 8% 80%, rgba(147, 51, 234, 0.09) 0px, transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(219, 39, 119, 0.08) 0px, transparent 36%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  line-height: 1.65;
  font-size: 1rem;
  overflow-x: hidden;
  width: 100%;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Single focus treatment for every interactive element. Keyboard users get a
   visible ring; pointer users never see it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--flame-600);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus-visible,
[data-theme="dark"] [tabindex]:focus-visible {
  outline-color: var(--flame-400);
}

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: var(--flame-600);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 12px;
}

/* Honour the OS "reduce motion" setting: keep state changes, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .partners-track {
    animation: none !important;
  }
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

p {
  margin: 0;
  color: var(--ink-600);
  line-height: 1.7;
}

.container {
  width: min(var(--container-max), calc(100% - 36px));
  margin-inline: auto;
}

/* ==========================================================================
   Navigation Bar
   ========================================================================== */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--nav-height);
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 4px 0;
}

.brand-logo-wrap {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--flame-tint-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px -2px rgba(var(--flame-rgb), 0.12);
  flex-shrink: 0;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.brand-link:hover .brand-logo-wrap {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px -2px rgba(var(--flame-rgb), 0.25);
  border-color: var(--flame-500);
}

.brand-logo-wrap img,
.logo-left {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-fast);
}

.brand-link:hover .brand-logo-wrap img {
  transform: scale(1.06);
}

.brand-info {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-title-tag {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--flame-600);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
}

.brand-subtitle {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}

/* Nav Links */
.navbar-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 4px;
}

.navbar-links > li {
  position: relative;
}

.navbar-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-700);
  position: relative;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.navbar-links > li > a:hover,
.navbar-links > li > a:focus-visible {
  color: var(--accent-text-strong);
  background: var(--flame-tint-subtle);
}

.navbar-links > li > a.current,
.navbar-links > li > a.active {
  color: var(--accent-text-strong);
  background: var(--flame-tint-active);
  font-weight: 700;
}

.navbar-links > li > a.current::after,
.navbar-links > li > a.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  background: var(--flame-600);
  border-radius: var(--radius-full);
}

.arrow {
  font-size: 0.62rem;
  transition: transform var(--transition-fast);
  color: var(--ink-400);
  display: inline-block;
}

.dropdown:hover .arrow,
.dropdown.open .arrow {
  transform: rotate(180deg);
  color: var(--accent-text);
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 215px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(var(--flame-rgb), 0.15);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.22s;
  z-index: 1001;
  pointer-events: none;
}

/* Hover bridge prevents premature closing when cursor moves across gap */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dropdown-menu li a {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-700);
  transition: all var(--transition-fast);
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible,
.dropdown-menu li a.current {
  color: var(--accent-text-strong);
  background: var(--flame-tint-subtle);
  font-weight: 700;
}

/* Registration Tag in Navbar.
   These selectors already outrank `.navbar-links > li > a`, so no !important. */
.navbar-links a.nav-registration-tag {
  font-family: var(--font-display);
  background: var(--flame-tint-active);
  color: var(--accent-text-strong);
  border: 1px solid var(--flame-tint-border);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.navbar-links a.nav-registration-tag:hover,
.navbar-links a.nav-registration-tag:focus-visible {
  background: var(--flame-600);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: var(--shadow-flame);
}

.navbar-links a.nav-registration-tag.current {
  background: var(--flame-600);
  color: #ffffff;
  border-color: transparent;
}

.navbar-links a.nav-registration-tag::after {
  display: none;
}

/* CTA Button in Nav */
.navbar-links li.cta > a {
  font-family: var(--font-display);
  background: var(--ink-900);
  color: var(--bg-surface);
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.navbar-links li.cta > a:hover {
  background: var(--flame-600);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-flame);
}

.navbar-links li.cta > a::after {
  display: none;
}

/* Navbar Right */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.nuv-logo-wrap {
  display: flex;
  align-items: center;
  padding-left: 12px;
  border-left: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.logo-right {
  height: 32px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}

/* Hamburger Toggle */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid var(--border-subtle);
  padding: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.navbar-toggle:hover {
  background: var(--flame-tint-active);
  border-color: var(--flame-tint-border);
}

.navbar-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink-800);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base), background var(--transition-base);
}

.navbar-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar-toggle.active span:nth-child(2) {
  opacity: 0;
}
.navbar-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Buttons & Clean Badges (No Arrow, No Dot)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  padding: 12px 24px; /* Mathematically 1:2 vertical to horizontal padding */
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  gap: 8px;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 55%, #c026d3 100%);
  color: #fff;
  box-shadow: 0 8px 20px -4px rgba(126, 34, 206, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 55%, #d946ef 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 10px 24px -3px rgba(126, 34, 206, 0.45);
  color: #fff;
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--flame-800);
  border: 1px solid var(--flame-200);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background: var(--flame-50);
  color: var(--flame-700);
  border-color: var(--flame-400);
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-md);
}

.btn-lg {
  padding: 14px 28px;
  font-size: var(--text-xl);
}

.btn-sm {
  padding: 8px 16px;
  font-size: var(--text-sm);
}

/* Full-width CTA. Replaces the per-page .btn-send-message / .btn-submit-reg copies. */
.btn-block {
  width: 100%;
}

/* Inline text action — reads as a link, not a filled button */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--accent-text);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.btn-link:hover {
  color: var(--accent-text-strong);
  transform: translateX(2px);
}

/* Small selectable pill (event pickers, segmented choices) */
.event-pill-btn {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  background: var(--bg-elevated);
  color: var(--ink-700);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.event-pill-btn:hover {
  background: var(--bg-elevated-hover);
  color: var(--ink-900);
  border-color: var(--flame-500);
}

.event-pill-btn.active {
  background: linear-gradient(135deg, var(--flame-500) 0%, var(--flame-600) 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(var(--flame-rgb), 0.25);
}

/* ==========================================================================
   Card Base
   Every panel-like surface extends this instead of re-declaring the recipe.
   ========================================================================== */

/* Every panel-shaped component in the site shares this one surface recipe.
   Listing the existing class names here keeps a single source of truth without
   rewriting markup on ten pages. Page CSS adds only padding and layout. */
.card,
.feature-card,
.event-card,
.speaker-card,
.sponsor-card,
.stat-card,
.team-card,
.testimonial-card,
.info-card,
.mission-card,
.contact-card,
.reg-perk-card,
.reg-form-container,
.reg-pass-card,
.year-link-card,
.timeline-card,
.about-visual-card,
.annual-report-card,
.package-card,
.comparison-card,
.thankyou-section,
.value-card,
.thankyou-pillar-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover,
.feature-card:hover,
.event-card:hover,
.speaker-card:hover,
.sponsor-card:hover,
.stat-card:hover,
.testimonial-card:hover,
.mission-card:hover,
.contact-card:hover,
.reg-perk-card:hover,
.annual-report-card:hover,
.package-card:hover,
.timeline-card:hover,
.value-card:hover,
.thankyou-pillar-item:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Event & Team Cards — Pop-up lift on cursor hover */
.team-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease, 
              border-color 0.25s ease;
}

.team-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: var(--flame-400);
  box-shadow: 0 20px 38px -6px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(var(--flame-rgb), 0.25);
  z-index: 4;
}

/* ==========================================================================
   Year Link Cards (Explore Previous Year Leadership)
   Super-Responsive 3D Pop-Up Hover Effect
   ========================================================================== */
.year-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 280px));
  justify-content: center;
  gap: 24px;
  margin: 36px auto 0;
  max-width: 940px;
  width: 100%;
}

.year-link-card {
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: var(--radius-xl);
  text-decoration: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  position: relative;
  cursor: pointer;
  overflow: visible;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), 
              border-color 0.25s ease,
              background-color 0.25s ease;
  will-change: transform, box-shadow;
}

.year-link-card:hover,
.year-link-card:focus-visible {
  transform: translateY(-12px) scale(1.05) !important;
  border-color: var(--flame-500) !important;
  box-shadow: 0 24px 44px -8px rgba(var(--flame-rgb), 0.28), 
              0 12px 24px -6px rgba(0, 0, 0, 0.12), 
              0 0 0 2px var(--flame-500) !important;
  z-index: 10 !important;
}

.year-link-card .num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--ink-900);
  transition: transform 0.25s ease, color 0.25s ease;
}

.year-link-card:hover .num,
.year-link-card:focus-visible .num {
  transform: scale(1.1);
  color: var(--flame-600);
}

.year-link-card .tag {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: var(--flame-tint-subtle);
  color: var(--accent-text-strong);
  border: 1px solid var(--flame-tint-border);
  transition: all 0.25s ease;
}

.year-link-card:hover .tag,
.year-link-card:focus-visible .tag {
  background: var(--flame-500);
  color: #ffffff;
  border-color: var(--flame-500);
}

.year-link-card .btn-link {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  transition: gap 0.25s ease, color 0.25s ease;
}

.year-link-card:hover .btn-link,
.year-link-card:focus-visible .btn-link {
  gap: 10px;
  color: var(--flame-600);
}

[data-theme="dark"] .year-link-card {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .year-link-card:hover,
[data-theme="dark"] .year-link-card:focus-visible {
  border-color: var(--flame-400) !important;
  box-shadow: 0 24px 44px -8px rgba(168, 85, 247, 0.45), 
              0 12px 24px rgba(0, 0, 0, 0.5), 
              0 0 0 2px var(--flame-400) !important;
}

[data-theme="dark"] .year-link-card .num {
  color: var(--ink-900);
}

[data-theme="dark"] .year-link-card:hover .num,
[data-theme="dark"] .year-link-card:focus-visible .num {
  color: var(--flame-400);
}

[data-theme="dark"] .year-link-card:hover .tag,
[data-theme="dark"] .year-link-card:focus-visible .tag {
  background: var(--flame-500);
  color: #ffffff;
  border-color: var(--flame-400);
}

[data-theme="dark"] .year-link-card:hover .btn-link,
[data-theme="dark"] .year-link-card:focus-visible .btn-link {
  color: var(--flame-400);
}

/* Sunken wells nested inside a card read one step down from their parent */
.info-card {
  background: var(--bg-subtle);
  box-shadow: none;
}

/* Info Item Boxes (Leadership, Creativity, Community, Impact) */
.info-item-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  position: relative;
  cursor: pointer;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.32s ease, 
              border-color 0.25s ease, 
              background 0.25s ease;
  will-change: transform, box-shadow;
}

.info-item-box:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--flame-500);
  background: var(--bg-surface);
  box-shadow: 0 16px 32px -6px rgba(var(--flame-rgb), 0.2), 
              0 6px 16px -3px rgba(0, 0, 0, 0.08), 
              0 0 0 1px var(--flame-500);
  z-index: 2;
}

.info-item-box strong {
  display: block;
  color: var(--accent-text);
  font-size: var(--text-md);
  font-weight: 800;
  margin-bottom: 4px;
  transition: color 0.25s ease, transform 0.25s ease;
}

.info-item-box:hover strong {
  color: var(--flame-600);
  transform: translateX(3px);
}

.info-item-box span {
  font-size: var(--text-base);
  color: var(--ink-600);
  line-height: 1.5;
  display: block;
  transition: color 0.25s ease;
}

.info-item-box:hover span {
  color: var(--ink-900);
}

[data-theme="dark"] .info-item-box {
  background: rgba(30, 41, 59, 0.5);
  border-color: var(--border-subtle);
}

[data-theme="dark"] .info-item-box:hover {
  background: var(--bg-surface);
  border-color: var(--flame-400);
  box-shadow: 0 18px 36px -6px rgba(168, 85, 247, 0.35), 
              0 8px 18px rgba(0, 0, 0, 0.45), 
              0 0 0 1.5px var(--flame-400);
}

[data-theme="dark"] .info-item-box:hover strong {
  color: var(--flame-400);
}

[data-theme="dark"] .info-item-box:hover span {
  color: #f1f5f9;
}

/* ==========================================================================
   Form Controls
   Shared by the contact and registration forms.
   ========================================================================== */

.form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.form-group label {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink-900);
}

.form-control {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  font-family: inherit;
  font-size: var(--text-md);
  color: var(--ink-800);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: var(--flame-500);
  background: var(--bg-surface);
  box-shadow: var(--focus-ring);
}

.form-control::placeholder {
  color: var(--ink-400);
}

.form-control[aria-invalid="true"] {
  border-color: var(--ruby-600);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
  cursor: pointer;
}

textarea.form-control {
  resize: vertical;
  min-height: 110px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ==========================================================================
   Text Utilities
   ========================================================================== */

.text-muted {
  font-size: var(--text-md);
  color: var(--ink-500);
  margin: 0;
}

.text-muted-sm {
  font-size: var(--text-base);
  color: var(--ink-500);
  margin: 0;
}

.link-accent {
  color: var(--accent-text);
  font-weight: 700;
}

/* Heading and body steps, so a page never hand-writes a clamp() inline */
.h-display-xl {
  font-size: var(--text-display-xl);
  margin-bottom: 16px;
}

.h-display-md {
  font-size: var(--text-display-md);
  margin-bottom: 8px;
}

.h-display-sm {
  font-size: var(--text-display-sm);
  margin-bottom: 10px;
}

.lead {
  font-size: var(--text-xl);
  line-height: 1.75;
  color: var(--ink-600);
}

.body-lg {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--ink-600);
}

/* ==========================================================================
   Layout Utilities
   Each replaces an inline style that was repeated across pages.
   ========================================================================== */

.section-gap {
  margin-top: 50px;
}

.section-pad {
  padding: 24px 0;
}

.section-pad-sm {
  margin: 20px 0;
}

.section-mb-lg {
  margin-bottom: 36px;
}

.grid-2-narrow,
.grid-2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
  margin-inline: auto;
}

.grid-3-narrow {
  grid-template-columns: repeat(3, 1fr);
  max-width: 800px;
  margin-inline: auto;
}

.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Card footer rail: pushes to the bottom of a flex card and separates with a rule */
.card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.card-foot-plain {
  margin-top: auto;
  padding-top: 10px;
}

/* Small icon + label pair used in card footers */
.meta-chip {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.card-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
}

.card-actions-row .btn {
  flex: 1;
  text-align: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 0.85rem;
}

/* Solid accent variant of the photo chip */
.card-role-chip.chip-accent {
  background: var(--flame-600);
  border-color: transparent;
}

/* Invisible scroll target that clears the sticky navbar */
.anchor-offset {
  display: block;
  position: relative;
  top: calc(-1 * (var(--nav-height) + 18px));
  visibility: hidden;
}

/* Eyebrow / Section Tag (Clean & Typography Anchored) */
.eyebrow, .section-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--flame-tint-subtle);
  color: var(--accent-text-strong);
  border: 1px solid var(--flame-tint-border);
  margin-bottom: 12px;
}

.eyebrow::before,
.section-tag::before {
  display: none !important;
  content: none !important;
}

/* Notice Pill */
.pill-notice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 16px;
  max-width: 100%;
  text-align: center;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  position: relative;
  padding: 48px 0 64px;
  overflow: hidden;
  background: radial-gradient(ellipse at 80% 30%, rgba(147, 51, 234, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 15% 75%, rgba(192, 38, 211, 0.06) 0%, transparent 50%);
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0.14;
  z-index: 0;
  transition: opacity var(--transition-base);
}

[data-theme="dark"] .hero-backdrop {
  opacity: 0.12;
}

.hero-bg-logo {
  width: min(600px, 55vw);
  height: auto;
  object-fit: contain;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.15fr 1.05fr;
  align-items: center;
  gap: 40px;
}

.hero-media {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-photo-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--flame-tint-border);
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12);
  width: 100%;
  max-width: 520px;
}

.hero-photo {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: calc(var(--radius-xl) - 8px);
  display: block;
}

.hero-floating-badge {
  position: absolute;
  bottom: -12px;
  left: -12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 270px;
}

.hero-badge-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--flame-tint-active);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.hero-badge-text strong {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-900);
}

.hero-badge-text span {
  font-size: 0.72rem;
  color: var(--ink-500);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}

.gradient-text {
  background: linear-gradient(135deg, #7e22ce 0%, #9333ea 40%, #c026d3 80%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-text-strong);
  display: inline-block;
}

.hero-subheading {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 700;
  color: var(--accent-text);
  margin-bottom: 12px;
  line-height: 1.35;
}

.hero-description {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-600);
  margin-bottom: 26px;
  max-width: 530px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
}

.stat-item-num {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.stat-item-num .accent {
  color: var(--accent-display);
}

.stat-item-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-500);
  margin-top: 4px;
}

/* 4-Card Impact Metrics Grid (Sponsors & Impact Sections) */
.sponsor-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 40px;
  width: 100%;
}

.stat-card {
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

.stat-card .number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent-display);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  display: block;
}

.stat-card p {
  font-size: 0.9375rem;
  color: var(--ink-600);
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

@media (max-width: 900px) {
  .sponsor-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .stat-card {
    padding: 24px 16px;
  }
  .stat-card .number {
    font-size: 2.1rem;
  }
}

@media (max-width: 480px) {
  .sponsor-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ==========================================================================
   Home Pillars / About
   ========================================================================== */

.home-about-section {
  max-width: var(--container-max);
  margin: 36px auto;
  padding: 0 20px;
}

.home-about-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px 36px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 237, 255, 0.9) 100%);
  border: 1px solid var(--flame-tint-border);
  box-shadow: var(--shadow-md);
}

.home-about-copy h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 1.16;
  margin-bottom: 12px;
}

.home-about-copy p {
  color: var(--ink-600);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.home-about-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.about-point {
  padding: 22px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-base);
}

.about-point:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.about-point span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-text);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.about-point h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.about-point p {
  color: var(--ink-600);
  line-height: 1.55;
  font-size: 0.88rem;
}

/* ==========================================================================
   Featured Events Carousel
   ========================================================================== */

.events-carousel-section {
  max-width: var(--container-max);
  margin: 20px auto 44px;
  padding: 0 20px;
}

.events-carousel-header {
  margin-bottom: 22px;
  text-align: center;
}

.events-carousel-header h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin-top: 6px;
}

.events-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 1160px;
  margin: 0 auto;
}

.carousel-slides {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 460px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  background: var(--bg-surface);
  overflow: hidden;
}

.carousel-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.slide-image-link {
  position: absolute;
  inset: 0;
  display: block;
}

.slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* The caption scrim now supplies the text contrast, so the photo itself no
     longer needs to be dimmed as heavily. */
  filter: brightness(0.94);
}

/* Caption sits on a gradient scrim rather than a solid card, so the photo stays
   visible behind it. The scrim is opaque only where the text actually is and
   fades to nothing well before the middle of the frame, which is where faces
   in these group shots sit. */
.slide-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: 88px 32px 26px;
  text-align: left;
  color: #ffffff;
  background: linear-gradient(
    to top,
    rgba(8, 13, 25, 0.94) 0%,
    rgba(8, 13, 25, 0.82) 30%,
    rgba(8, 13, 25, 0.45) 62%,
    rgba(8, 13, 25, 0) 100%
  );
  pointer-events: none;
}

/* Keep the link underneath clickable through the scrim */
.slide-content > * {
  pointer-events: auto;
  max-width: 760px;
}

.slide-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--flame-500), var(--crimson-500));
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slide-content h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  color: #ffffff;
}

.slide-content p {
  margin: 8px 0 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.carousel-control {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  color: var(--ink-800);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 5;
  flex-shrink: 0;
}

.carousel-control:hover {
  background: var(--flame-500);
  color: #fff;
  transform: scale(1.06);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.carousel-dot.active {
  width: 24px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--flame-500), var(--crimson-500));
}

/* ==========================================================================
   Partners & Sponsors Section (Real embedded logo images)
   ========================================================================== */

.partners-section {
  max-width: var(--container-max);
  margin: 20px auto 36px;
  padding: 0 20px;
}

.partners-header {
  text-align: center;
  margin-bottom: 20px;
}

.partners-header h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  margin-top: 6px;
}

.partners-marquee {
  overflow: hidden;
  padding: 20px 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, var(--flame-50) 100%);
  border: 1px solid var(--flame-tint-border);
  box-shadow: var(--shadow-sm);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.partners-track {
  display: flex;
  width: max-content;
  animation: partnersSlide 24s linear infinite;
}

.partners-track:hover {
  animation-play-state: paused;
}

.partner-group {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 8px;
  flex-shrink: 0;
}

.partner-pill, .sponsor-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 76px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.partner-pill img, .sponsor-logo-item img {
  max-width: 100%;
  max-height: 54px;
  object-fit: contain;
  display: block;
}

.partner-pill:hover, .sponsor-logo-item:hover {
  transform: translateY(-2px);
  border-color: var(--flame-500);
  box-shadow: var(--shadow-md);
}

@keyframes partnersSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Home Living Legacy & Connect Sections (Zero Dead Space Layout)
   ========================================================================== */

/* --- Card 1: Alumni & History (Meet the People Behind Our Journey) --- */
.home-cta-section {
  max-width: var(--container-max);
  margin: 44px auto 32px;
  padding: 0 20px;
}

.home-cta-inner {
  padding: 44px 40px 38px;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 237, 255, 0.9) 100%);
  border: 1px solid var(--flame-tint-border);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.home-cta-inner .eyebrow {
  margin-bottom: 8px;
  display: inline-block;
}

.home-cta-inner h2 {
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  line-height: 1.18;
  margin: 0 0 12px;
}

.home-cta-desc {
  max-width: 720px;
  margin: 0 auto 36px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-600);
}

/* 3-Era Grid (2024, 2025, 2026) */
.legacy-timeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
  text-align: left;
}

.legacy-step {
  display: flex;
  flex-direction: column;
}

.legacy-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--flame-700);
  background: var(--bg-surface);
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--radius-full);
  padding: 4px 16px;
  box-shadow: 0 2px 8px rgba(126, 34, 206, 0.08);
  margin-bottom: 12px;
  align-self: flex-start;
  transition: all var(--transition-fast);
}

.legacy-step-badge.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(217, 70, 239, 0.18) 100%);
  border-color: var(--phoenix-fuchsia);
  color: var(--flame-700);
  box-shadow: 0 0 14px rgba(217, 70, 239, 0.3);
}

.legacy-step-body {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.legacy-step:hover .legacy-step-body {
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 12px 24px -6px rgba(126, 34, 206, 0.14);
}

.legacy-step.active-era .legacy-step-body {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 237, 255, 0.8) 100%);
  border-color: rgba(168, 85, 247, 0.38);
  box-shadow: 0 8px 24px -4px rgba(168, 85, 247, 0.12);
}

.legacy-era-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--flame-700);
  background: rgba(168, 85, 247, 0.1);
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  align-self: flex-start;
}

.legacy-era-tag.active {
  color: #c026d3;
  background: rgba(192, 38, 211, 0.14);
}

.legacy-step-body h4 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px;
  line-height: 1.25;
}

.legacy-step-body p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0 0 18px;
  flex-grow: 1;
}

.legacy-avatars {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(168, 85, 247, 0.12);
}

.avatars-micro-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-500);
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-item {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
  margin-left: -10px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.25s ease, border-color 0.25s ease;
  z-index: 1;
}

.avatar-item:first-child {
  margin-left: 0;
}

.avatar-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.avatar-item:hover {
  transform: translateY(-4px) scale(1.22);
  z-index: 20;
  border-color: var(--flame-500);
  box-shadow: 0 6px 16px rgba(126, 34, 206, 0.35);
}

.avatar-item::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 30;
}

.avatar-item:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.home-cta-action {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

/* --- Card 2: Contact Banner (Balanced 2-Column Split — Zero Empty Space) --- */
.contact-home-section {
  max-width: var(--container-max);
  margin: 28px auto 56px;
  padding: 0 20px;
}

.contact-home-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
  padding: 38px 42px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 237, 255, 0.92) 100%);
  border: 1px solid var(--flame-tint-border);
  box-shadow: var(--shadow-md);
}

.contact-home-left .eyebrow {
  margin-bottom: 8px;
  display: inline-block;
}

.contact-home-left h2 {
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
  line-height: 1.2;
  margin: 0;
}

.contact-home-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.contact-home-copy p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-600);
  margin: 0;
}

/* Sleek Glowing Contact Button (Proportioned to Spec) */
.journey-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff !important;
  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 50%, #c026d3 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4), 0 4px 14px rgba(126, 34, 206, 0.25);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease;
  text-decoration: none;
  cursor: pointer;
}

.journey-cta-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 50%, #d946ef 100%);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.6), 0 6px 18px rgba(126, 34, 206, 0.35);
}

.cta-arrow {
  font-size: 1.1rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.journey-cta-btn:hover .cta-arrow {
  transform: translateX(4px);
}

/* Responsive Overrides */
@media (max-width: 900px) {
  .home-cta-inner {
    padding: 36px 24px 32px;
  }

  .legacy-timeline-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-home-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  .home-cta-inner {
    padding: 28px 18px 24px;
  }

  .legacy-step-body {
    padding: 18px 16px;
  }

  .contact-home-inner {
    padding: 26px 18px;
  }

  .journey-cta-btn {
    width: 100%;
  }

  .home-cta-action .btn {
    width: 100%;
  }
}


/* ==========================================================================
   Team, Committee & Member Cards (Face visibility & alignment)
   ========================================================================== */

.team-page {
  padding: 20px 0 8px;
}

.page-hero {
  padding: 22px 0 10px;
}

.page-hero + section,
.page-hero + .section-pad,
.page-hero + .team-section,
.page-hero + .dept-section,
.page-hero + .contact-section,
.page-hero + .registration-layout {
  padding-top: 14px;
  margin-top: 0;
}

.page-hero + .filter-tabs-bar {
  margin-top: 14px;
  margin-bottom: 22px;
}

.page-hero-inner {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 32px;
  padding: 36px 40px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--flame-50) 100%);
  border: 1px solid var(--flame-tint-border);
  box-shadow: var(--shadow-md);
}

.page-hero-copy h1 {
  font-size: var(--text-display-2xl);
  margin-bottom: 12px;
}

.page-hero-copy p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-600);
  max-width: 650px;
}

.page-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 300px);
  min-height: 200px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--flame-tint-border);
  box-shadow: var(--shadow-flame);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.35s ease, 
              border-color 0.3s ease;
  cursor: pointer;
  position: relative;
  will-change: transform, box-shadow;
}

.logo-panel:hover {
  transform: translateY(-8px) scale(1.04);
  border-color: var(--flame-500);
  box-shadow: 0 20px 42px -8px rgba(var(--flame-rgb), 0.38), 
              0 0 0 2px var(--flame-500);
  z-index: 5;
}

.logo-panel img {
  display: block;
  width: 100%;
  max-width: 170px;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
              filter 0.35s ease;
}

.logo-panel:hover img {
  transform: scale(1.08) translateY(-2px);
  filter: drop-shadow(0 10px 20px rgba(var(--flame-rgb), 0.45));
}

.hero-team-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 360px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--flame-tint-border);
  box-shadow: var(--shadow-flame);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hero-team-panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hero-team-panel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  cursor: zoom-in;
  transition: transform var(--transition-slow);
}

.hero-team-panel:hover img {
  transform: scale(1.02);
}

/* ==========================================================================
   Interactive Committee Collage Grid
   ========================================================================== */
.interactive-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  width: min(100%, 370px);
  padding: 8px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--flame-tint-border);
  box-shadow: var(--shadow-flame);
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

[data-theme="dark"] .interactive-collage {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.collage-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.collage-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

[data-theme="dark"] .collage-item img {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Subtle Hover preview */
.collage-item:hover {
  z-index: 15;
}

.collage-item:hover img {
  transform: scale(1.14) translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), 0 0 0 2px var(--flame-400);
}

/* Active Popped-Out State (When clicked!) */
.collage-item.popped-out {
  z-index: 40 !important;
}

.collage-item.popped-out img {
  transform: scale(1.36) translateY(-6px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38), 0 0 0 3px var(--flame-500), 0 0 18px rgba(var(--flame-rgb), 0.5);
  border-color: var(--flame-500);
}

/* Tooltip Badge showing Name & Role on Hover / Click */
.collage-tooltip {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 50;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--flame-rgb), 0.45);
}

.collage-tooltip .tooltip-name {
  color: #ffffff;
  font-weight: 700;
}

.collage-tooltip .tooltip-sep {
  color: var(--flame-400);
  margin: 0 4px;
}

.collage-tooltip .tooltip-role {
  color: var(--flame-300);
  font-weight: 600;
}

/* Flip tooltip to top for the bottom row so it stays within frame */
.collage-item:nth-child(n+9) .collage-tooltip {
  bottom: auto;
  top: -32px;
  transform: translateX(-50%) translateY(-4px);
}

.collage-item.popped-out .collage-tooltip,
.collage-item:hover .collage-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.team-section {
  padding-top: 24px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.section-heading {
  text-align: center;
  margin-bottom: 30px;
}

.section-heading h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  margin-top: 6px;
}

.section-heading p {
  font-size: 1rem;
  color: var(--ink-600);
  max-width: 600px;
  margin: 8px auto 0;
}

/* Team Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Centered Highlights Grid (symmetrically centers remaining cards in final row) */
.team-grid.highlights-grid-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.team-grid.highlights-grid-center > .team-card {
  width: calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
  flex: 0 0 calc((100% - 48px) / 3);
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .team-grid.highlights-grid-center > .team-card {
    width: calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

@media (max-width: 680px) {
  .team-grid.highlights-grid-center > .team-card {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
}

.team-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

/* Photo container: standard 3:4 portrait ratio fitting full posture, head, face, and shoulders perfectly */
.member-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  max-height: 380px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-photo,
.gallery-photo {
  width: 100%;
  height: 240px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-photo img,
.team-card > .member-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* Natural portrait framing ensuring full face, head, and upper body visibility */
  transition: transform var(--transition-slow);
  cursor: zoom-in;
  display: block;
}

.event-photo img,
.gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--transition-slow);
  cursor: zoom-in;
  display: block;
}

.team-card:hover .member-photo img,
.team-card:hover .event-photo img,
.team-card:hover .gallery-photo img,
.team-card:hover > img {
  transform: scale(1.05);
}

.small-card .member-photo {
  aspect-ratio: 3 / 4;
  height: auto;
  max-height: 340px;
  flex-shrink: 0;
}

.small-card .member-photo img {
  object-position: top center;
}

/* User image framing utility classes */
.fit-cover { object-fit: cover !important; }
.fit-contain { object-fit: contain !important; background: #0f172a !important; }
.focus-top { object-position: center top !important; }
.focus-face { object-position: center 10% !important; }
.focus-center { object-position: center center !important; }
.focus-bottom { object-position: center bottom !important; }

/* ==========================================================================
   Council 2026 Portrait Alignment Fix
   Outdoor amphitheater shots have large building/tree headroom;
   these precise offsets center the head, face, and upper body in the 3:4 frame.
   ========================================================================== */
#council-2026 .member-photo img,
.dept-section[data-dept="heads"] .member-photo img {
  object-position: center 45%;
}

img[src*="president-tannushree-shah"] {
  object-position: center 38% !important;
}

img[src*="vice-president-drashti-gosai"] {
  object-position: center 54% !important;
}

img[src*="secretary-dwija-patel"] {
  object-position: center 42% !important;
}

img[src*="treasurer-yash-patel"] {
  object-position: center 46% !important;
}

img[src*="media-head-hiral-lokwani"] {
  object-position: center 44% !important;
}

img[src*="technical-head-ravichandra-kumar"] {
  object-position: center 48% !important;
}

/* Elegant Avatar Fallback */
.img-fallback-active {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}

.img-placeholder-avatar {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  padding: 24px 16px;
  text-align: center;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease;
}

.placeholder-initials {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--flame-400);
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.08);
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 12px;
  border: 2px solid rgba(251, 146, 60, 0.4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.placeholder-tag {
  font-size: 0.92rem;
  font-weight: 700;
  color: #f8fafc;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.placeholder-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 4px;
  display: block;
}

.card-role-chip {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.member-copy {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--flame-tint-active);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-bottom: 6px;
  line-height: 1.3;
}

.member-copy h3,
.member-copy h4 {
  font-size: 1.12rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink-900);
  line-height: 1.25;
}

.member-copy p {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-600);
  margin-bottom: 8px;
  flex-grow: 1;
}

.social-links {
  display: none !important;
}

.social-link {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--ink-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.social-link svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.social-link:hover {
  background: var(--flame-500);
  color: #fff;
  transform: translateY(-2px);
}

/* Department Group Header */
.team-group {
  margin-top: 40px;
}

.team-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.group-icon {
  font-size: 1.4rem;
}

.team-group-header h3 {
  font-size: 1.4rem;
}

/* Interactive Filter Bar */
.filter-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.filter-pill {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-700);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  user-select: none;
}

.filter-pill:hover {
  color: var(--accent-text);
  border-color: var(--flame-500);
  background: var(--flame-50);
}

.filter-pill.active {
  background: linear-gradient(135deg, var(--flame-500) 0%, var(--flame-600) 100%);
  color: #ffffff;
  border-color: var(--flame-600);
  box-shadow: 0 4px 14px -2px rgba(var(--flame-rgb), 0.4);
}

.filter-pill:focus-visible {
  outline: 2px solid var(--flame-500);
  outline-offset: 2px;
}

.year-section,
#highlights {
  scroll-margin-top: 100px;
}

/* ==========================================================================
   Site Footer
   ========================================================================== */

/* ==========================================================================
   Site Footer — Dignified University Foundation
   ========================================================================== */

.site-footer {
  position: relative;
  margin-top: 24px;
  background: #0f172a;
  border-top: 1px solid #1e293b;
  padding: 44px 0 20px;
  color: #94a3b8;
  transition: background var(--transition-base), color var(--transition-base);
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--flame-600);
  pointer-events: none;
}

.site-footer .footer-inner {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 0.85fr 0.95fr;
  gap: 28px 32px;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-brand-logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.footer-brand-logo-link img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-brand-text-title,
.site-footer .brand-title,
.footer-brand .brand-title,
.footer-brand-text .brand-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #f8fafc !important;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-footer .brand-title .brand-title-tag {
  background: var(--flame-600);
  color: #ffffff;
}

.footer-tagline {
  font-size: 0.82rem;
  color: #c084fc;
  font-weight: 600;
  margin-top: 4px;
}

.footer-brand-text-sub {
  font-size: 0.82rem;
  color: #cbd5e1;
  font-weight: 500;
}

.footer-brand p,
.footer-mission {
  color: #94a3b8;
  line-height: 1.7;
  font-size: 0.9375rem;
  margin: 6px 0 0;
}

.footer-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-title::before {
  display: none;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* The Navigation column carries eight links, which otherwise sets the height of
   the whole footer. Two columns halves it and balances the row. */
.footer-links-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-links a:hover {
  color: var(--flame-400);
  transform: translateX(4px);
}

/* Emphasised footer link (Student Registration) — replaces a repeated inline style */
.footer-links a.footer-link-highlight {
  color: var(--flame-400);
  font-weight: 800;
}

/* Premium Social Icon Buttons in Footer */
.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              color 0.25s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.footer-social-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-social-btn:hover {
  color: #ffffff;
  transform: translateY(-4px) scale(1.06);
}

.footer-social-btn.instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(220, 39, 67, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.footer-social-btn.email:hover {
  background: linear-gradient(135deg, #9333ea 0%, #c026d3 100%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.footer-social-btn:hover svg {
  transform: scale(1.1);
}



.footer-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--flame-tint-active);
  border: 1px solid var(--flame-tint-border);
  color: var(--flame-400);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.footer-admin-link:hover {
  background: var(--flame-600);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--shadow-flame);
}

.map-block {
  width: 100%;
  min-height: 148px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid #334155;
  box-shadow: var(--shadow-sm);
}

.map-block iframe {
  width: 100%;
  height: 100%;
  min-height: 148px;
  border: 0;
  display: block;
}

.footer-copy {
  grid-column: 1 / -1;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #1e293b;
  color: #94a3b8;
  font-size: 0.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}


.footer-badge-naac {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ==========================================================================
   Theme Toggle Button (Light / Dark Mode Switcher)
   ========================================================================== */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--ink-800);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
  user-select: none;
}

.theme-toggle-btn:hover {
  background: var(--flame-50);
  border-color: var(--flame-500);
  color: var(--accent-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--flame-rgb), 0.22);
}

.theme-toggle-btn .theme-icon {
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.3s ease;
}

.theme-toggle-btn:hover .theme-icon {
  transform: rotate(15deg) scale(1.15);
}

@media (max-width: 680px) {
  .theme-toggle-btn {
    padding: 7px 10px;
  }
  .theme-toggle-btn .theme-label {
    display: none;
  }
}

/* ==========================================================================
   Dark Mode Overrides [data-theme="dark"]
   ========================================================================== */
[data-theme="dark"] {
  --bg-page: #0b101e;
  --bg-surface: #12192c;
  --bg-subtle: #18223c;
  --bg-elevated: #1a2440;
  --bg-elevated-hover: #223055;
  /* Dark inverts the ramp. 700/600 deliberately share a value: dark themes
     compress the mid-range, and #cbd5e1 is the readable body weight on #0b101e. */
  --ink-900: #f8fafc;
  --ink-800: #e2e8f0;
  --ink-700: #cbd5e1;
  --ink-600: #cbd5e1;
  --ink-500: #94a3b8;
  --ink-400: #64748b;
  --border-subtle: rgba(168, 85, 247, 0.16);
  --border-strong: rgba(168, 85, 247, 0.28);
  --border-hover: rgba(192, 132, 252, 0.5);
  --glass-bg: rgba(18, 25, 44, 0.94);

  /* Cyber-Violet & Neon Magenta Tokens for Dark Theme */
  --flame-50: #2e1065;
  --flame-100: #3b0764;
  --flame-200: #581c87;
  --flame-300: #d8b4fe;
  --flame-400: #c084fc;
  --flame-500: #a855f7;
  --flame-600: #9333ea;
  --flame-700: #7e22ce;
  --flame-800: #6b21a8;
  --flame-primary: #9333ea;

  --accent-text: #c084fc;
  --accent-text-strong: #e9d5ff;
  --accent-display: #c084fc;

  /* RGB tokens for Dark Violet / Magenta theme */
  --flame-rgb: 168, 85, 247;
  --flame-tint-subtle: rgba(168, 85, 247, 0.14);
  --flame-tint-active: rgba(168, 85, 247, 0.22);
  --flame-tint-border: rgba(168, 85, 247, 0.35);

  /* Status colours need their own dark values: the light tints are
     near-white and would blow out against a dark surface. */
  --emerald-600: #34d399;
  --emerald-50: rgba(16, 185, 129, 0.12);
  --emerald-border: rgba(16, 185, 129, 0.35);
  --ruby-600: #f87171;
  --ruby-50: rgba(239, 68, 68, 0.12);
  --ruby-border: rgba(239, 68, 68, 0.35);
  --sapphire-600: #60a5fa;
  --sapphire-50: rgba(37, 99, 235, 0.14);
  --sapphire-border: rgba(59, 130, 246, 0.35);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.65);
  --shadow-flame: 0 8px 24px -4px rgba(147, 51, 234, 0.55);
  --focus-ring: 0 0 0 3px rgba(168, 85, 247, 0.45);
}

[data-theme="dark"] body {
  background-image: 
    radial-gradient(at 50% 0%, rgba(147, 51, 234, 0.12) 0px, transparent 65%),
    radial-gradient(at 90% 20%, rgba(217, 70, 239, 0.08) 0px, transparent 50%),
    radial-gradient(at 10% 80%, rgba(126, 34, 206, 0.07) 0px, transparent 55%);
}

/* Everything below is a treatment the token layer cannot express — a gradient,
   a tint that must get stronger on dark, or a surface that stays light in both
   themes. Plain colour/surface/border swaps are handled by the tokens above and
   deliberately have no rule here. */

/* Cyber-Violet tints against a dark surface */
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .section-tag {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.35);
  color: var(--flame-300);
}

[data-theme="dark"] .role-badge,
[data-theme="dark"] .year-chip {
  background: rgba(168, 85, 247, 0.15);
  color: var(--flame-400);
}

[data-theme="dark"] .card-role-chip {
  background: rgba(15, 23, 42, 0.95);
}

/* Fix collage tooltip in dark mode: deep dark surface with glowing violet border & crisp white text */
[data-theme="dark"] .collage-tooltip {
  background: #0b101e !important;
  color: #ffffff !important;
  border: 1px solid var(--flame-400) !important;
  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(168, 85, 247, 0.5) !important;
}

[data-theme="dark"] .collage-tooltip .tooltip-name {
  color: #ffffff !important;
  font-weight: 700;
}

[data-theme="dark"] .collage-tooltip .tooltip-sep {
  color: var(--flame-400) !important;
}

[data-theme="dark"] .collage-tooltip .tooltip-role {
  color: #d8b4fe !important;
  font-weight: 600;
}

[data-theme="dark"] .navbar-toggle {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .navbar-toggle:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: var(--flame-500);
}

[data-theme="dark"] .navbar-toggle span {
  background: var(--ink-900);
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: var(--flame-500);
  color: var(--flame-400);
}

/* Brand plates stay white in both themes so the logos keep their contrast */
[data-theme="dark"] .brand-logo-wrap {
  border-color: rgba(168, 85, 247, 0.4);
}

[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 55%, #c026d3 100%);
  box-shadow: 0 8px 20px -4px rgba(147, 51, 234, 0.45);
  color: #ffffff;
}

[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 55%, #d946ef 100%);
  box-shadow: 0 10px 26px -3px rgba(147, 51, 234, 0.65);
  color: #ffffff;
}

[data-theme="dark"] .btn-secondary {
  background: var(--bg-elevated);
  color: var(--ink-800);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
}

[data-theme="dark"] .btn-secondary:hover {
  background: var(--bg-elevated-hover);
  color: var(--ink-900);
  border-color: var(--flame-400);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .gradient-text {
  background: linear-gradient(135deg, #c084fc 0%, #d8b4fe 40%, #f0abfc 75%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--flame-400);
}

[data-theme="dark"] .team-card:hover {
  border-color: var(--flame-400);
  box-shadow: 0 20px 38px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(168, 85, 247, 0.4);
}

[data-theme="dark"] .filter-pill.active {
  background: linear-gradient(135deg, var(--flame-500) 0%, var(--flame-600) 100%);
  box-shadow: 0 4px 14px -2px rgba(147, 51, 234, 0.5);
}

[data-theme="dark"] .nuv-logo-wrap {
  background: #ffffff;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .hero-photo-wrap {
  border-color: rgba(168, 85, 247, 0.35);
}

[data-theme="dark"] .carousel-dot {
  background: rgba(255, 255, 255, 0.2);
}

/* Photo wells: light placeholder gradient would glow on a dark page */
[data-theme="dark"] .member-photo,
[data-theme="dark"] .event-photo,
[data-theme="dark"] .gallery-photo {
  background: linear-gradient(135deg, #162032 0%, #0f172a 100%);
}

/* Feature panels swap their warm light wash for a dark glow */
[data-theme="dark"] .hero {
  background: transparent;
}

[data-theme="dark"] .home-about-inner {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}

[data-theme="dark"] .partners-marquee {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}

[data-theme="dark"] .contact-home-inner {
  background: radial-gradient(circle at 10% 50%, rgba(168, 85, 247, 0.14) 0%, transparent 65%),
              linear-gradient(135deg, #111a2e 0%, #162032 100%);
  border-color: rgba(168, 85, 247, 0.3);
}

[data-theme="dark"] .page-hero-inner {
  background: radial-gradient(circle at 15% 20%, rgba(168, 85, 247, 0.16) 0%, transparent 60%),
              linear-gradient(135deg, #111a2e 0%, #0f172a 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .logo-panel {
  background: var(--bg-surface);
  border-color: rgba(168, 85, 247, 0.32);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 16px rgba(168, 85, 247, 0.15);
}

[data-theme="dark"] .logo-panel:hover {
  border-color: var(--flame-400);
  box-shadow: 0 20px 44px -6px rgba(0, 0, 0, 0.65), 
              0 0 24px rgba(168, 85, 247, 0.45), 
              0 0 0 2px var(--flame-400);
}

[data-theme="dark"] .logo-panel:hover img {
  filter: drop-shadow(0 12px 24px rgba(168, 85, 247, 0.55));
}

[data-theme="dark"] .home-cta-inner {
  background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.12) 0%, transparent 60%),
              linear-gradient(175deg, #111a2e 0%, #0d1525 100%);
  border-color: rgba(168, 85, 247, 0.3);
}

[data-theme="dark"] .legacy-step-badge {
  background: #141e33;
  border-color: rgba(168, 85, 247, 0.4);
  color: var(--flame-300);
}

[data-theme="dark"] .legacy-step-badge.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(217, 70, 239, 0.25) 100%);
  border-color: var(--phoenix-fuchsia);
  color: #f0abfc;
  box-shadow: 0 0 16px rgba(217, 70, 239, 0.35);
}

[data-theme="dark"] .legacy-step-body {
  background: rgba(18, 25, 44, 0.7);
  border-color: rgba(168, 85, 247, 0.22);
}

[data-theme="dark"] .legacy-step:hover .legacy-step-body {
  border-color: var(--flame-400);
  box-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.6), 0 0 20px rgba(168, 85, 247, 0.2);
}

[data-theme="dark"] .legacy-step.active-era .legacy-step-body {
  background: linear-gradient(160deg, rgba(24, 34, 60, 0.85) 0%, rgba(15, 23, 42, 0.7) 100%);
  border-color: rgba(168, 85, 247, 0.45);
}

[data-theme="dark"] .legacy-era-tag {
  background: rgba(168, 85, 247, 0.2);
  color: var(--flame-300);
}

[data-theme="dark"] .legacy-era-tag.active {
  background: rgba(192, 38, 211, 0.25);
  color: #f0abfc;
}

[data-theme="dark"] .legacy-avatars {
  border-top-color: rgba(168, 85, 247, 0.2);
}

[data-theme="dark"] .avatar-item {
  border-color: #12192c;
}

[data-theme="dark"] .avatar-item::after {
  background: #020617;
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #ffffff;
}

[data-theme="dark"] .thankyou-section {
  background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.16) 0%, transparent 70%),
              linear-gradient(180deg, #111a2e 0%, #0f172a 100%);
  border-color: rgba(168, 85, 247, 0.32);
}

[data-theme="dark"] .tier-card.featured {
  background: linear-gradient(180deg, #162032 0%, #111a2e 100%);
  border-color: var(--flame-500);
}

[data-theme="dark"] .reg-pass-card {
  background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.15) 0%, transparent 70%),
              linear-gradient(135deg, #111a2e 0%, #162032 100%);
}

/* ==========================================================================
   Dark Mode: Site Footer
   The footer is dark in both themes; only these gradient/brand treatments change.
   ========================================================================== */
[data-theme="dark"] .site-footer {
  background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.15) 0%, transparent 65%),
              linear-gradient(180deg, #111a2e 0%, #0a0f1d 100%);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .footer-brand-text-title {
  background: linear-gradient(135deg, #ffffff 30%, #e9d5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .footer-social-pill.insta {
  background: rgba(225, 48, 108, 0.18);
  color: #f472b6;
  border-color: rgba(225, 48, 108, 0.35);
}

[data-theme="dark"] .footer-social-pill.linkedin {
  background: rgba(10, 102, 194, 0.18);
  color: #38bdf8;
  border-color: rgba(10, 102, 194, 0.35);
}

[data-theme="dark"] .footer-social-pill.email {
  background: rgba(168, 85, 247, 0.18);
  color: var(--flame-400);
  border-color: rgba(168, 85, 247, 0.35);
}

[data-theme="dark"] .footer-admin-link {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(217, 70, 239, 0.18));
  border-color: rgba(168, 85, 247, 0.4);
}

/* Floating Back to Top */
.back-to-top {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  color: var(--ink-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 990;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-fast);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--flame-500);
  color: #fff;
}

/* Referenced by .img-placeholder-avatar and the registration pass card. */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Toast */
.toast-message {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  background: #0f172a;
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--radius-full);
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(126, 34, 206, 0.35);
  z-index: 9999;
  opacity: 0;
  transition: all var(--transition-base);
  pointer-events: none;
}

[data-theme="dark"] .toast-message {
  background: #0b101e;
  color: #f8fafc;
  border-color: var(--flame-400);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 14px rgba(168, 85, 247, 0.4);
}

.toast-message.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Intermediate screen fit for 8 nav items */
@media (max-width: 1280px) {
  .brand-subtitle {
    display: none;
  }
  .navbar-links {
    gap: 2px;
  }
  .navbar-links > li > a {
    padding: 6px 9px;
    font-size: var(--text-base);
  }
  .navbar-links a.nav-registration-tag {
    padding: 5px 11px;
    font-size: var(--text-sm);
  }
  .navbar-links li.cta > a {
    padding: 6px 14px;
    font-size: var(--text-base);
  }
}

@media (max-width: 1100px) {
  .navbar {
    padding: 0 16px;
    height: 70px;
    position: sticky;
    top: 0;
  }

  .navbar-toggle {
    display: flex;
  }

  .navbar-links {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px;
    gap: 6px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    z-index: 999;
  }

  .navbar-links.active {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    opacity: 1;
  }

  .navbar-links > li > a {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  }

  .navbar-links > li > a::after {
    display: none;
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: var(--bg-subtle);
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.25s ease;
  }

  .dropdown.open .dropdown-menu {
    max-height: 220px;
    padding: 4px 8px;
    margin: 4px 0;
  }

  .navbar-links li.cta {
    padding-top: 8px;
  }

  .navbar-links li.cta > a {
    display: block;
    text-align: center;
  }

  .hero-inner,
  .home-about-inner,
  .page-hero-inner,
  .contact-panel {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-content {
    align-items: center;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stats-row {
    max-width: 460px;
    margin: 0 auto;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .brand-subtitle,
  .logo-right,
  .nuv-logo-wrap {
    display: none !important;
  }

  .navbar {
    padding: 0 12px;
  }

  .navbar-right {
    gap: 8px;
  }

  .navbar-toggle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 8px;
  }

  .navbar-brand .brand-title {
    font-size: 1.02rem;
  }

  .pill-notice {
    font-size: 0.72rem;
    padding: 4px 10px;
    letter-spacing: -0.01em;
  }

  .hero-photo-wrap {
    max-width: 100%;
  }

  .hero-photo {
    height: 320px;
  }

  .hero-floating-badge {
    position: static;
    margin-top: 12px;
    max-width: 100%;
  }

  .home-about-points,
  .team-grid,
  .team-grid.grid-2-narrow,
  .team-grid.grid-2x2 {
    grid-template-columns: 1fr;
  }

  .member-photo,
  .small-card .member-photo {
    height: 320px;
  }

  .site-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero {
    padding: 22px 0 16px;
  }

  .hero-inner {
    padding: 0 14px;
    gap: 20px;
  }

  .home-about-section {
    padding: 0 14px;
    margin: 18px auto 24px;
  }

  .home-about-inner {
    padding: 24px 18px;
    gap: 20px;
  }

  .page-hero {
    padding: 14px 0 6px;
  }

  .page-hero-inner {
    padding: 20px 16px;
    gap: 16px;
  }

  .page-hero-copy h1 {
    font-size: clamp(1.4rem, 5vw, 1.75rem);
    margin-bottom: 8px;
  }

  .page-hero-copy p {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .section-pad {
    padding: 16px 0;
  }

  .section-gap {
    margin-top: 20px;
  }

  .section-heading {
    margin-bottom: 20px;
  }

  .section-heading h2 {
    font-size: 1.5rem;
  }

  .hero-stats-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 10px 4px;
    margin: 16px auto 0;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.06);
    text-align: center;
  }

  [data-theme="dark"] .hero-stats-row {
    background: rgba(26, 22, 37, 0.72);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .hero-stat-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  .hero-stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--border-subtle);
  }

  .stat-item-num {
    font-size: clamp(1.15rem, 3.8vw, 1.35rem);
    font-weight: 800;
    line-height: 1.1;
  }

  .stat-item-label {
    font-size: clamp(0.62rem, 2.2vw, 0.72rem);
    font-weight: 600;
    margin-top: 2px;
    color: var(--ink-500);
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  .slide-content {
    padding: 64px 18px 18px;
  }

  .carousel-control {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .brand-logo-wrap {
    width: 40px;
    height: 40px;
  }

  .brand-logo-wrap img,
  .logo-left {
    width: 30px;
    height: 30px;
  }

  .brand-title {
    font-size: 0.95rem;
  }

  .brand-title-tag {
    display: none;
  }

  .btn {
    width: 100%;
    padding: 11px 18px;
    font-size: 0.9rem;
  }

  .card-actions-row .btn {
    width: auto;
    flex: 1;
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .page-hero-inner {
    padding: 18px 14px;
  }
}