/* ============================================
   Finance Club — Premium landing
   Performance-first, generous space, one goal
   ============================================ */

   :root {
    /* Premium palette: deep authority + blue accent */
    --color-bg: #f7f9fc;
    --color-bg-alt: #eef2f7;
    --color-surface: #ffffff;
    --color-text: #1a1e2c;
    --color-text-muted: #5a6270;
    --color-accent: #4a9fd4;
    --color-accent-hover: #3a8fc4;
    --color-border: #e2e7ed;
    --color-overlay: rgba(26, 30, 44, 0.04);
  
    /* Typography scale — clear hierarchy, generous readability */
    --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;
  
    --text-hero: clamp(2.75rem, 6vw + 1.5rem, 4.5rem);
    --text-h1: clamp(2.25rem, 4vw + 1rem, 3.25rem);
    --text-h2: clamp(1.625rem, 3vw + 0.5rem, 2.5rem);
    --text-h3: clamp(1.25rem, 2vw + 0.25rem, 1.625rem);
    --text-body: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
    --text-small: 1rem;
    --text-caption: 0.9375rem;
  
    /* Spacing — generous white space */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-na: 1rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 8rem;
  
    --container: min(90vw, 72rem);
    --container-narrow: min(90vw, 42rem);
  
    /* Motion — subtle, fast */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 0.35s;
  }
  
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Professional SVG icons (replacement for emoji) */
  .icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }
  .icon-svg svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }
  .inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 0.25em;
  }
  .inline-icon svg {
    flex-shrink: 0;
  }
  
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
  }
  
  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  section{
    padding-top: 11vh;
  }
  .page-home{
    padding-top: 0;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  /* ----- Header ----- */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--space-na) 0;
    background: var(--color-bg);
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
  }
  
  .site-header.scrolled {
    border-color: var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 1px 0 var(--color-border);
  }
  
  .header-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .logo {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }
  
  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }
  
  .nav-link {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    transition: color var(--duration) var(--ease-out);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  
  .nav-link:hover {
    color: var(--color-accent);
  }
  
  .nav a {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    transition: color var(--duration) var(--ease-out);
  }
  
  .nav a:hover {
    color: var(--color-accent);
  }
  
  .nav-dropdown {
    position: relative;
  }
  
  /* Add padding to create hover area */
  .nav-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.75rem;
    z-index: 9;
  }
  
  .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  
  .nav-dropdown-toggle svg {
    transition: transform var(--duration) var(--ease-out);
  }
  
  .nav-dropdown:hover .nav-dropdown-toggle svg,
  .nav-dropdown:focus-within .nav-dropdown-toggle svg {
    transform: rotate(180deg);
  }
  
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 200px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s var(--ease-out);
    z-index: 10;
  }
  
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  
  .nav-dropdown-menu a {
    display: block;
    padding: 0.625rem 1.25rem;
    color: var(--color-text);
    font-size: var(--text-small);
    transition: background var(--duration) var(--ease-out);
  }
  
  .nav-dropdown-menu a:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
  }
  
  .nav-dropdown-menu .dropdown-overview {
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.25rem;
    padding-bottom: 0.75rem;
  }
  
  .btn-register {
    background: linear-gradient(135deg, var(--color-accent) 0%, #5bb8e8 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 1.75rem;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(74, 159, 212, 0.3);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  }
  
  .btn-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(74, 159, 212, 0.4);
    color: #fff;
  }

  /* Language Selector */
  .language-selector {
    position: relative;
    margin-left: 0.5rem;
  }

  .lang-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
  }

  .lang-dropdown-toggle:hover {
    border-color: var(--color-accent);
    background: rgba(74, 159, 212, 0.04);
  }

  .lang-dropdown-toggle svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
  }

  .lang-chevron {
    transition: transform var(--duration) var(--ease-out);
  }

  .language-selector.active .lang-chevron {
    transform: rotate(180deg);
  }

  .current-lang {
    letter-spacing: 0.04em;
  }

  .lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 130px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    padding: 0.375rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), visibility var(--duration);
    z-index: 1000;
  }

  .language-selector.active .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .lang-option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    color: var(--color-text);
    font-size: var(--text-small);
    font-weight: 500;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
  }

  .lang-option:hover {
    background: rgba(74, 159, 212, 0.08);
    color: var(--color-accent);
  }

  .lang-option.active {
    background: rgba(74, 159, 212, 0.12);
    color: var(--color-accent);
    font-weight: 600;
  }

  .menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text);
  }
  
  .menu-toggle span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
  }
  
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  /* ----- Hero ----- */
  .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(80px + var(--space-3xl)) var(--space-md) var(--space-3xl);
    overflow: hidden;
  }
  
  .hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  
  .hero-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: heroFloat 18s ease-in-out infinite;
  }
  
  .hero-shape-1 {
    width: min(60vw, 420px);
    height: min(60vw, 420px);
    top: -10%;
    right: -5%;
    background: var(--color-accent);
    animation-delay: 0s;
  }
  
  .hero-shape-2 {
    width: min(40vw, 280px);
    height: min(40vw, 280px);
    bottom: 10%;
    left: -5%;
    background: var(--color-text);
    animation-delay: -6s;
  }
  
  .hero-shape-3 {
    width: min(25vw, 160px);
    height: min(25vw, 160px);
    top: 50%;
    left: 30%;
    background: var(--color-accent);
    opacity: 0.35;
    animation-delay: -12s;
  }
  
  @keyframes heroFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(2%, -3%) scale(1.02); }
    66% { transform: translate(-2%, 2%) scale(0.98); }
  }
  
  .hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-narrow);
    text-align: center;
    animation: heroFadeIn 0.9s var(--ease-out) forwards;
  }
  
  @keyframes heroFadeIn {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .hero-headline {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: var(--text-hero);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-md);
    color: var(--color-text);
  }
  
  .hero-subhead {
    font-size: var(--text-body);
    color: var(--color-text-muted);
    max-width: 40ch;
    margin: 0 auto var(--space-xl);
    line-height: 1.7;
  }
  
  .hero-cta {
    margin-top: var(--space-lg);
  }

  /* ----- Hero: Full-width carousel with background images (WIUT-style) ----- */
  .hero-carousel.hero-olympiad-promo {
    display: block;
    padding: 0;
  }

  .hero-carousel {
    position: relative;
    width: 100%;
    margin-top: 80px;
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    overflow: hidden;
  }

  .hero-carousel-track {
    position: absolute;
    inset: 0;
  }

  .hero-carousel-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s var(--ease-out);
  }

  .hero-carousel-slide.active {
    opacity: 1;
    z-index: 1;
  }

  .hero-carousel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 30, 44, 0.5) 0%, rgba(26, 30, 44, 0.6) 100%);
    z-index: 2;
    pointer-events: none;
  }

  .hero-carousel-content {
    position: relative;
    z-index: 3;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-carousel-dots {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 4;
  }

  .hero-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background var(--duration) var(--ease-out);
  }

  .hero-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.75);
  }

  .hero-carousel-dot.active {
    background: #fff;
  }

  .hero-carousel-text {
    max-width: 40rem;
  }

  .hero-olympiad-promo .olympiad-year {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
  }

  .hero-olympiad-promo .olympiad-hero-title {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(2.25rem, 5vw + 1.25rem, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 var(--space-md);
  }

  .hero-olympiad-promo .olympiad-hero-tagline {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 var(--space-lg);
    max-width: 36ch;
  }

  .hero-olympiad-promo .olympiad-cta-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .hero-olympiad-promo .olympiad-deadline-text {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
  }

  .hero-olympiad-promo .olympiad-deadline-text strong {
    color: #fff;
    font-weight: 600;
  }

  .hero-olympiad-promo .btn-olympiad-main {
    display: inline-block;
    background: #4a9fd4;
    color: #fff;
    font-size: var(--text-body);
    font-weight: 700;
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
  }

  .hero-olympiad-promo .btn-olympiad-main:hover {
    background: #3a8fc4;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(74, 159, 212, 0.4);
  }

  .hero-olympiad-promo .olympiad-club-link {
    font-size: var(--text-caption);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--duration) var(--ease-out);
  }

  .hero-olympiad-promo .olympiad-club-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .hero-carousel-prev,
  .hero-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration) var(--ease-out);
  }

  .hero-carousel-prev {
    left: var(--space-md);
  }

  .hero-carousel-next {
    right: var(--space-md);
  }

  .hero-carousel-prev:hover,
  .hero-carousel-next:hover {
    background: rgba(255, 255, 255, 0.35);
  }

  /* ----- Olympiad partners (separate section below hero) ----- */
  .olympiad-partners-section {
    padding: var(--space-xl) var(--space-md);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }

  .olympiad-partners-inner {
    max-width: var(--container);
    margin: 0 auto;
    text-align: center;
  }

  .olympiad-partners-heading {
    font-size: var(--text-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-md);
  }

  /* Partner logos: unified grid, proportional scaling */
  .olympiad-partners-section .olympiad-partners-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl) var(--space-2xl);
  }

  .olympiad-partners-section .partner-logo {
    --partner-logo-height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: var(--partner-logo-height);
    padding: 0 var(--space-md);
  }

  .olympiad-partners-section .partner-logo--sm {
    --partner-logo-height: 3rem;
    min-width: 6rem;
    max-width: 13rem;
  }

  .olympiad-partners-section .partner-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0.15) contrast(1.02);
    opacity: 0.92;
    transition: filter var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
  }

  .olympiad-partners-section .partner-logo:hover img {
    filter: grayscale(0) contrast(1);
    opacity: 1;
  }

  .olympiad-partners-section .partner-fallback {
    display: none;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--text-small);
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }

  .olympiad-partners-section .partner-fallback.show {
    display: inline;
  }

  /* Partner names (strip on Olympiad page) */
  .partner-name {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  
  /* ----- Buttons ----- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), transform 0.2s var(--ease-out);
  }
  
  .btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  
  .btn-primary {
    background: var(--color-text);
    color: var(--color-bg);
  }
  
  .btn-primary:hover {
    background: var(--color-accent);
    color: var(--color-bg);
    transform: translateY(-1px);
  }
  
  .btn-secondary {
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-border);
  }
  
  .btn-secondary:hover {
    border-color: var(--color-text);
    color: var(--color-text);
  }
  
  .btn-large {
    padding: 1rem 2.25rem;
    font-size: var(--text-body);
  }
  
  /* ----- Trust strip ----- */
  .trust-strip {
    padding: var(--space-xl) var(--space-md);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  
  .trust-inner {
    max-width: var(--container);
    margin: 0 auto;
    text-align: center;
  }
  
  .trust-label {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-md);
  }
  
  .trust-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
  }
  
  .trust-logo {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-muted);
    opacity: 0.85;
  }
  
  /* ----- Metrics ----- */
  .metrics {
    padding: var(--space-2xl) var(--space-md);
  }
  
  .metrics-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    text-align: center;
  }
  
  .metric {
    padding: var(--space-md);
  }
  
  .metric-value {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h1);
    line-height: 1.15;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
  }
  
  .metric-label {
    font-size: var(--text-small);
    color: var(--color-text-muted);
  }
  
  /* ----- Benefits ----- */
  .benefits {
    padding: var(--space-3xl) var(--space-md);
    background: var(--color-bg-alt);
  }
  
  .benefits-inner {
    max-width: var(--container);
    margin: 0 auto;
  }
  
  .section-headline {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--text-h2);
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 var(--space-2xl);
    color: var(--color-text);
  }
  
  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
  }
  
  .benefit-card {
    background: var(--color-surface);
    padding: var(--space-lg);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
  }
  
  .benefit-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 32px var(--color-overlay);
  }
  
  .benefit-number {
    display: block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--text-small);
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
  }
  
  .benefit-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--text-h3);
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
  }
  
  .benefit-desc {
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-text-muted);
    line-height: 1.7;
  }
  
  .benefits-cta {
    text-align: center;
  }
  
  /* ----- Proof / Testimonials ----- */
  .proof {
    padding: var(--space-3xl) var(--space-md);
  }
  
  .proof-inner {
    max-width: var(--container);
    margin: 0 auto;
  }
  
  .testimonials {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
  
  .testimonial {
    margin: 0;
    padding: var(--space-lg);
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border);
  }
  
  .testimonial-quote {
    font-family: var(--font-head);
    font-size: var(--text-body);
    font-style: italic;
    line-height: 1.7;
    margin: 0 0 var(--space-md);
    color: var(--color-text);
  }
  
  .testimonial-author {
    font-size: var(--text-small);
    color: var(--color-text-muted);
  }
  
  .testimonial-author cite {
    font-style: normal;
    font-weight: 600;
  }
  
  /* ----- CTA section ----- */
  .cta-section {
    padding: var(--space-3xl) var(--space-md);
    background: var(--color-text);
    color: var(--color-bg);
    text-align: center;
  }
  
  .cta-inner {
    max-width: var(--container-narrow);
    margin: 0 auto;
  }
  
  .cta-headline {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h1);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-md);
  }
  
  .cta-sub {
    margin: 0 0 var(--space-lg);
    opacity: 0.9;
    font-size: var(--text-body);
  }
  
  .cta-section .btn-primary {
    background: var(--color-accent);
    color: #fff;
  }
  
  .cta-section .btn-primary:hover {
    background: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(74, 159, 212, 0.4);
  }
  
  .cta-reassurance {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0 0;
    font-size: var(--text-small);
    opacity: 0.85;
  }
  
  .cta-reassurance li {
    margin: var(--space-xs) 0;
  }
  
  .cta-reassurance li::before {
    content: "✓ ";
    color: var(--color-accent);
    font-weight: 600;
  }
  
  /* ----- Upcoming Events ----- */
  .upcoming-events {
    padding: var(--space-3xl) var(--space-md);
    background: var(--color-bg-alt);
  }

  .upcoming-events-inner {
    max-width: var(--container-narrow);
    margin: 0 auto;
  }

  .events-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-xl);
    position: relative;
  }

  .events-timeline::before {
    content: '';
    position: absolute;
    left: 35px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--color-accent), rgba(74, 159, 212, 0.2));
    border-radius: 1px;
  }

  .event-item {
    display: flex;
    gap: var(--space-xl);
    padding: var(--space-lg) 0;
    position: relative;
  }

  .event-item + .event-item {
    border-top: 1px solid var(--color-border);
  }

  .event-date-badge {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 16px;
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 16px rgba(74, 159, 212, 0.1);
  }

  .event-day {
    font-family: var(--font-head);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.1;
  }

  .event-month {
    font-family: var(--font-head);
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
  }

  .event-body {
    flex: 1;
    padding-top: 0.25rem;
  }

  .event-tag {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    margin-bottom: var(--space-xs);
  }

  .tag-olympiad {
    background: rgba(74, 159, 212, 0.1);
    color: var(--color-accent);
  }

  .tag-international {
    background: rgba(74, 159, 212, 0.15);
    color: var(--color-accent-hover);
  }

  .event-body h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h3);
    margin: var(--space-xs) 0 var(--space-xs);
    color: var(--color-text);
  }

  .event-body p {
    margin: 0;
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--color-text-muted);
  }

  .tag-career {
    background: rgba(46, 125, 50, 0.1);
    color: #2e7d32;
  }

  .event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin-top: var(--space-md);
  }

  .event-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text);
  }

  .event-meta-item svg {
    color: var(--color-accent);
    flex-shrink: 0;
  }

  .event-register-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: var(--space-md);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    transition: gap var(--duration) var(--ease-out);
  }

  .event-register-link:hover {
    gap: 0.625rem;
  }

  .event-register-link svg {
    flex-shrink: 0;
    transition: transform var(--duration) var(--ease-out);
  }

  .event-register-link:hover svg {
    transform: translateX(2px);
  }

  /* ----- Footer ----- */
  /* Home Stats Strip — light break between CTA and footer */
  .home-stats-strip {
    padding: var(--space-3xl) var(--space-md);
    background: var(--color-bg);
  }

  .home-stats-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
  }

  .home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
  }

  .home-stat-num {
    font-family: var(--font-head);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .home-stat-label {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
  }

  .home-stat-divider {
    width: 1px;
    height: 48px;
    background: var(--color-border);
    flex-shrink: 0;
  }

  .site-footer {
    padding: 0;
    background: linear-gradient(135deg, #1a1e2c 0%, #2a3040 100%);
    color: rgba(250, 249, 247, 0.9);
    border-top: none;
  }
  
  .footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-md) var(--space-lg);
  }
  
  .footer-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-xl);
  }
  
  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .footer-logo {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-bg);
    text-decoration: none;
    margin-bottom: var(--space-xs);
    transition: color var(--duration) var(--ease-out);
  }
  
  .footer-logo:hover {
    color: var(--color-accent);
  }
  
  .footer-tagline {
    font-family: var(--font-head);
    font-size: var(--text-small);
    color: rgba(250, 249, 247, 0.75);
    margin: 0;
    line-height: 1.5;
  }
  
  .footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
  
  .footer-column-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--text-small);
    color: var(--color-bg);
    margin: 0 0 var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  
  .footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .footer-link-list li {
    margin: 0;
  }
  
  .footer-link-list a {
    color: rgba(250, 249, 247, 0.85);
    font-size: var(--text-small);
    text-decoration: none;
    transition: color var(--duration) var(--ease-out), padding-left var(--duration) var(--ease-out);
    display: inline-block;
  }
  
  .footer-link-list a:hover {
    color: var(--color-accent);
    padding-left: var(--space-xs);
  }
  
  .footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    border-top: 1px solid rgba(250, 249, 247, 0.1);
    border-bottom: 1px solid rgba(250, 249, 247, 0.1);
    margin-bottom: var(--space-lg);
  }
  
  .social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(250, 249, 247, 0.2);
    border-radius: 8px;
    color: rgba(250, 249, 247, 0.8);
    transition: all var(--duration) var(--ease-out);
    text-decoration: none;
  }
  
  .social-icon:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(74, 159, 212, 0.1);
    transform: translateY(-2px);
  }
  
  .footer-bottom {
    text-align: center;
    padding-top: var(--space-md);
  }
  
  .footer-legal {
    font-size: var(--text-caption);
    color: rgba(250, 249, 247, 0.65);
    margin: 0;
    line-height: 1.6;
  }
  
  /* ============================================
     SPA Pages System
     ============================================ */
  
  #app {
    min-height: 100vh;
  }
  
  .page {
    display: none;
    animation: pageFadeIn 0.4s var(--ease-out);
  }
  
  .page.active {
    display: block;
  }
  
  
  @keyframes pageFadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .page-hero {
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    padding: calc(80px + var(--space-md)) var(--space-md) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  /* Hero background images with dark overlay */
  #page-about .page-hero,
  #page-about-club .page-hero,
  #page-about-team .page-hero,
  #page-about-testimonials .page-hero,
  #page-about-faq .page-hero,
  #page-olympiad .page-hero,
  #page-olympiad-regulations .page-hero,
  #page-olympiad-stages .page-hero,
  #page-olympiad-awards .page-hero,
  #page-olympiad-faq .page-hero,
  #page-contacts .page-hero {
    background-image: linear-gradient(rgba(10, 10, 10, 0.72), rgba(26, 30, 44, 0.68)), var(--page-hero-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--color-bg);
  }
  #page-about .page-hero .page-hero-label { color: rgba(74, 159, 212, 0.95); }
  #page-about .page-hero .page-hero-intro { color: rgba(250, 249, 247, 0.85); }
  #page-about .page-hero .page-title,
  #page-about .page-hero .page-subtitle,
  #page-about-club .page-hero .page-title,
  #page-about-club .page-hero .page-subtitle,
  #page-about-team .page-hero .page-title,
  #page-about-team .page-hero .page-subtitle,
  #page-about-testimonials .page-hero .page-title,
  #page-about-testimonials .page-hero .page-subtitle,
  #page-about-faq .page-hero .page-title,
  #page-about-faq .page-hero .page-subtitle,
  #page-olympiad .page-hero .page-title,
  #page-olympiad .page-hero .page-subtitle,
  #page-olympiad .page-hero .page-hero-label,
  #page-olympiad-regulations .page-hero .page-title,
  #page-olympiad-regulations .page-hero .page-subtitle,
  #page-olympiad-stages .page-hero .page-title,
  #page-olympiad-stages .page-hero .page-subtitle,
  #page-olympiad-awards .page-hero .page-title,
  #page-olympiad-awards .page-hero .page-subtitle,
  #page-olympiad-faq .page-hero .page-title,
  #page-olympiad-faq .page-hero .page-subtitle,
  #page-contacts .page-hero .page-title,
  #page-contacts .page-hero .page-subtitle {
    color: rgba(250, 249, 247, 0.98);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  #page-about .page-hero { --page-hero-bg: url('images/background%20images/about%20overview%20page.jpg'); }
  #page-about-club .page-hero { --page-hero-bg: url('images/background%20images/about%20club%20page.jpg'); }
  #page-about-team .page-hero { --page-hero-bg: url('images/background%20images/about%20team.jpg'); }
  #page-about-testimonials .page-hero { --page-hero-bg: url('images/background%20images/about%20testmonials%20page.jpg'); }
  #page-about-faq .page-hero { --page-hero-bg: url('images/background%20images/FAQ%20for%20both.jpg'); }
  #page-olympiad .page-hero { --page-hero-bg: url('images/background%20images/Olympiad%20overview.jpg'); }
  #page-olympiad-regulations .page-hero { --page-hero-bg: url('images/background%20images/Olympiad%20regulations.jpg'); }
  #page-olympiad-stages .page-hero { --page-hero-bg: url('images/background%20images/Olympiad%20stages.jpg'); }
  #page-olympiad-awards .page-hero { --page-hero-bg: url('images/background%20images/Olympiad%20awards.jpg'); }
  #page-olympiad-faq .page-hero { --page-hero-bg: url('images/background%20images/FAQ%20for%20both.jpg'); }
  #page-contacts .page-hero { --page-hero-bg: url('images/background%20images/about%20overview%20page.jpg'); }
  
  .page-hero-stages {
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    padding: calc(80px + var(--space-md)) var(--space-md) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page-hero-stages .page-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
  }
  
  /* Decorative Elements */
  .hero-decorative-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }
  
  .hero-decor {
    position: absolute;
    font-size: 4rem;
    opacity: 0.08;
    filter: blur(2px);
    animation: decorFloat 12s ease-in-out infinite;
  }
  
  .hero-decor-1 {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
  }
  
  .hero-decor-2 {
    top: 60%;
    right: 15%;
    font-size: 5rem;
    animation-delay: -4s;
  }
  
  .hero-decor-3 {
    bottom: 20%;
    left: 20%;
    font-size: 3.5rem;
    animation-delay: -8s;
  }
  
  @keyframes decorFloat {
    0%, 100% {
      transform: translate(0, 0) rotate(0deg);
      opacity: 0.08;
    }
    33% {
      transform: translate(20px, -15px) rotate(5deg);
      opacity: 0.12;
    }
    66% {
      transform: translate(-15px, 10px) rotate(-5deg);
      opacity: 0.1;
    }
  }
  
  .page-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(74, 159, 212, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  
  .page-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(26, 30, 44, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  
  .page-hero-olympiad {
    background: linear-gradient(135deg, var(--color-text) 0%, #2a3040 100%);
    color: var(--color-bg);
    position: relative;
  }
  
  .page-hero-olympiad::before {
    background: radial-gradient(circle, rgba(74, 159, 212, 0.15) 0%, transparent 70%);
  }
  
  .page-hero-olympiad::after {
    background: radial-gradient(circle, rgba(250, 249, 247, 0.08) 0%, transparent 70%);
  }

  .page-hero-olympiad-overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(80px + var(--space-md)) var(--space-md) var(--space-xl);
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    overflow: hidden;
  }

  /* Override: Olympiad hero — stronger overlay for ornate background, frame people/architecture */
  #page-olympiad .page-hero.page-hero-olympiad,
  #page-olympiad .page-hero.page-hero-olympiad-overview {
    background-image: linear-gradient(180deg, rgba(8, 8, 8, 0.82) 0%, rgba(15, 14, 12, 0.78) 40%, rgba(20, 19, 17, 0.75) 100%), var(--page-hero-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  .olympiad-partners-strip-dark {
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem var(--space-md) 0.625rem;
    position: relative;
    z-index: 2;
    width: 100%;
    flex-shrink: 0;
  }

  .olympiad-partners-strip-dark .olympiad-partners-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem var(--space-md);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  .olympiad-partners-strip-dark .partner-name {
    color: rgba(250, 249, 247, 0.92);
  }

  .olympiad-partners-strip-dark .partner-name:not(:last-child)::after {
    content: ' · ';
    margin-left: 0.25em;
    opacity: 0.65;
    font-weight: 400;
  }

  .page-hero-olympiad-overview .page-hero-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .page-title-uz {
    font-size: clamp(1.5rem, 3.5vw + 0.5rem, 2.5rem);
    margin: 0 0 var(--space-sm);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 0, 0, 0.4);
  }

  .page-hero-olympiad-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem var(--space-lg);
    max-width: 440px;
    margin: 0.5rem auto var(--space-sm);
    text-align: left;
  }

  .page-hero-olympiad .olympiad-date {
    color: rgba(250, 249, 247, 0.95);
    margin: 0;
    font-size: var(--text-caption);
    line-height: 1.5;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  }

  .page-hero-olympiad .olympiad-date strong {
    color: var(--color-bg);
    font-weight: 600;
  }

  .page-hero-register-text {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-bg);
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  }

  .page-hero-register-en {
    margin-bottom: var(--space-xs);
    color: rgba(250, 249, 247, 0.9);
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  }

  .page-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: 0.5rem;
  }

  .page-hero-olympiad .page-hero-cta-row .btn {
    padding: 0.5rem 1.25rem;
    font-size: var(--text-small);
  }

  .page-hero-olympiad .page-hero-qr img {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 6px;
    background: var(--color-surface);
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }

  .page-hero-olympiad .hero-qr-label {
    color: rgba(250, 249, 247, 0.85);
    font-size: 0.75rem;
    margin-top: 0.25rem;
  }
  
  .page-hero-inner {
    max-width: var(--container-narrow);
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  
  .page-title {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: var(--text-h1);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-md);
  }

  .page-hero-olympiad .page-title,
  .page-hero-stages .page-title {
    color: #ffffff;
    margin: 0;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 0, 0, 0.4);
  }
  
  .page-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.7;
  }
  
  .page-hero-olympiad .page-subtitle,
  .page-hero-stages .page-subtitle {
    color: rgba(250, 249, 247, 0.95);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    max-width: 680px;
    margin: var(--space-md) auto 0;
    line-height: 1.6;
  }
  
  .page-hero-olympiad .hero-badge {
    margin-top: 0.5rem;
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
  }

  .hero-badge {
    display: inline-block;
    margin-top: var(--space-md);
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--color-accent) 0%, #5bb8e8 100%);
    color: #fff;
    border-radius: 32px;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 16px rgba(74, 159, 212, 0.3);
    animation: badgePulse 3s ease-in-out infinite;
  }
  
  @keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(74, 159, 212, 0.3); }
    50% { transform: scale(1.02); box-shadow: 0 6px 24px rgba(74, 159, 212, 0.4); }
  }
  
  .page-content {
    padding: var(--space-3xl) var(--space-md);
    position: relative;
  }
  
  .content-section {
    max-width: var(--container);
    margin: 0 auto var(--space-2xl);
    position: relative;
  }
  
  .content-section:last-child {
    margin-bottom: 0;
  }
  
  .content-section h2 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h2);
    margin: 0 0 var(--space-lg);
    color: var(--color-text);
    position: relative;
    padding-bottom: var(--space-sm);
    letter-spacing: -0.01em;
  }
  
  .content-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
    border-radius: 2px;
  }
  
  .content-section h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h3);
    margin: var(--space-lg) 0 var(--space-md);
    color: var(--color-text);
  }
  
  .content-section p {
    margin: 0 0 var(--space-md);
    line-height: 1.75;
    color: var(--color-text-muted);
    font-size: var(--text-body);
  }
  
  .content-section p strong {
    color: var(--color-text);
    font-weight: 600;
  }
  
  .content-intro {
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
    padding: var(--space-2xl);
    border-radius: 20px;
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-3xl);
    position: relative;
    overflow: hidden;
  }
  
  .content-intro::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(74, 159, 212, 0.06) 0%, transparent 70%);
    border-radius: 50%;
  }
  
  .content-intro .lead-text {
    font-size: clamp(1.1875rem, 2vw, 1.375rem);
    line-height: 1.75;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    font-weight: 500;
    position: relative;
    z-index: 1;
  }
  
  .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .feature-list li {
    padding: var(--space-sm) 0 var(--space-sm) 1.75rem;
    position: relative;
    line-height: 1.7;
  }
  
  .feature-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 600;
  }
  
  .warning-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .warning-list li {
    padding: var(--space-sm) 0;
    line-height: 1.7;
  }
  
  .warning-section {
    background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
    padding: var(--space-xl);
    border-radius: 16px;
    border: 2px solid #ffd699;
    position: relative;
    overflow: hidden;
  }
  
  .warning-section::before {
    content: '⚠️';
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    font-size: 2rem;
    opacity: 0.2;
  }
  
  .info-box {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-surface) 100%);
    padding: var(--space-xl);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
  }
  
  .info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-accent);
  }
  
  .info-box p {
    margin: 0;
  }
  
  .info-box a {
    color: var(--color-accent);
    text-decoration: underline;
  }

  /* FAQ Accordion */
  .faq-section {
    max-width: var(--container-narrow);
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .faq-item {
    border-bottom: 1px solid var(--color-border);
  }

  .faq-item:first-child {
    border-top: 1px solid var(--color-border);
  }

  .faq-question {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--text-h3);
    color: var(--color-text);
    padding: var(--space-lg) var(--space-md) var(--space-lg) 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    transition: color var(--duration) var(--ease-out);
  }

  .faq-question::-webkit-details-marker {
    display: none;
  }

  .faq-question::after {
    content: '+';
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-accent);
    transition: transform var(--duration) var(--ease-out);
  }

  .faq-item[open] .faq-question::after {
    content: '−';
  }

  .faq-question:hover {
    color: var(--color-accent);
  }

  .faq-answer {
    padding: 0 0 var(--space-lg);
  }

  .faq-answer p {
    margin: 0;
    line-height: 1.8;
    color: var(--color-text-muted);
  }

  .faq-answer a {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .faq-answer a:hover {
    text-decoration: none;
  }

  .faq-cta {
    text-align: center;
  }
  
  /* About Overview */
  .page-hero-about .page-hero-inner {
    max-width: var(--container-narrow);
  }

  .page-hero-about .page-hero-label {
    font-size: var(--text-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin: 0 0 var(--space-sm);
  }

  .page-hero-about .page-hero-intro {
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: var(--space-md) auto 0;
    max-width: 44ch;
  }

  .page-content-about .content-section {
    margin-bottom: var(--space-2xl);
  }

  .about-at-a-glance {
    margin-bottom: var(--space-xl);
  }
  
  .at-a-glance-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg) var(--space-2xl);
    padding: var(--space-xl) var(--space-lg);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-accent-rgb, 59, 130, 246), 0.04) 100%);
    border-radius: 16px;
    border: 1px solid var(--color-border);
  }
  
  .at-a-glance-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
  }
  
  .at-a-glance-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }
  
  .at-a-glance-text {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
  }
  
  .about-values h2,
  .about-milestones h2 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-md);
  }

  .about-explore {
    margin-top: var(--space-2xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--color-border);
  }

  .about-section-headline {
    font-family: var(--font-head);
    font-size: var(--text-h2);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-xs);
  }

  .about-section-sub {
    font-size: var(--text-body);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-xl);
    line-height: 1.7;
  }
  
  /* Feature Rows — editorial numbered layout */
  .feature-rows {
    max-width: 760px;
    margin-top: var(--space-xl);
  }

  .feature-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--color-border);
    position: relative;
  }

  .feature-row:last-child {
    border-bottom: none;
  }

  .feature-row-num {
    font-family: var(--font-head);
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.15;
    flex-shrink: 0;
    min-width: 80px;
    user-select: none;
    transition: opacity var(--duration) var(--ease-out);
  }

  .feature-row:hover .feature-row-num {
    opacity: 0.35;
  }

  .feature-row-body {
    flex: 1;
    padding-top: 0.25rem;
  }

  .feature-row-body h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h2);
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
    letter-spacing: -0.01em;
  }

  .feature-row-body p {
    margin: 0;
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--color-text-muted);
    max-width: 50ch;
  }

  .feature-row-accent {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: var(--color-accent);
    border-radius: 2px;
    transition: height var(--duration) var(--ease-out);
  }

  .feature-row:hover .feature-row-accent {
    height: 100%;
  }
  
  .milestones-timeline {
    margin-top: var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    justify-content: center;
  }
  
  .milestone {
    flex: 1 1 200px;
    max-width: 280px;
    position: relative;
    padding: var(--space-lg);
    background: var(--color-surface);
    border-radius: 16px;
    border: 1px solid var(--color-border);
  }
  
  .milestone-year {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
  }
  
  .milestone-dot {
    display: block;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    margin: var(--space-sm) 0;
  }
  
  .milestone-desc {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--color-text-muted);
  }
  
  .about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-2xl) 0;
  }
  
  .about-stat {
    text-align: center;
  }
  
  .about-stat-value {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--color-accent);
    line-height: 1.2;
  }
  
  .about-stat-label {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
  }
  
  .about-cta,
  .about-club-cta {
    margin-top: var(--space-2xl);
  }
  
  .about-cta-inner {
    text-align: center;
    padding: var(--space-2xl);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-accent-rgb, 59, 130, 246), 0.06) 100%);
    border-radius: 20px;
    border: 1px solid var(--color-border);
  }
  
  .about-cta-inner h2 {
    margin: 0 0 var(--space-md);
  }
  
  .about-cta-inner p {
    margin: 0 0 var(--space-lg);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .about-cta-inner .btn-large {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-body);
  }
  
  .about-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    max-width: var(--container);
    margin: 0 auto;
  }
  
  .about-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    padding: var(--space-xl);
    border-radius: 20px;
    border: 1px solid var(--color-border);
    transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }
  
  .about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration) var(--ease-out);
  }
  
  .about-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 16px 48px rgba(26, 30, 44, 0.12);
    transform: translateY(-4px);
  }
  
  .about-card:hover::before {
    transform: scaleX(1);
  }
  
  .about-card-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-md);
    opacity: 0.9;
  }
  
  .about-card h2 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h3);
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
  }
  
  .about-card p {
    flex: 1;
    margin: 0 0 var(--space-md);
    font-size: var(--text-small);
    line-height: 1.7;
    color: var(--color-text-muted);
  }
  
  .about-card-link {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  
  .about-card-link::after {
    content: '→';
    transition: transform var(--duration) var(--ease-out);
  }
  
  .about-card:hover .about-card-link::after {
    transform: translateX(4px);
  }
  
  .about-card-team::before { background: var(--color-text); }
  
  /* About Club - values & what we do */
  .club-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-lg);
  }
  
  .club-value {
    padding: var(--space-lg);
    background: var(--color-surface);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    transition: all var(--duration) var(--ease-out);
  }
  
  .club-value:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  }
  
  .club-value h3 {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-h3);
  }
  
  .club-value p {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.7;
  }
  
  /* What We Do — zigzag alternating layout */
  .wwd-zigzag {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }

  .wwd-item {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-lg) 0;
  }

  .wwd-item:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
  }

  .wwd-icon-wrap {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.1), rgba(74, 159, 212, 0.04));
    border: 1px solid rgba(74, 159, 212, 0.15);
    transition: all var(--duration) var(--ease-out);
  }

  .wwd-item:hover .wwd-icon-wrap {
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.18), rgba(74, 159, 212, 0.08));
    border-color: rgba(74, 159, 212, 0.3);
    transform: scale(1.05);
  }

  .wwd-icon {
    font-size: 1.75rem;
    color: var(--color-accent);
    display: block;
  }

  .wwd-icon svg {
    width: 28px;
    height: 28px;
  }

  .wwd-text {
    flex: 1;
  }

  .wwd-text h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h3);
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
  }

  .wwd-text p {
    margin: 0;
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--color-text-muted);
    max-width: 48ch;
  }

  .wwd-item:nth-child(even) .wwd-text p {
    margin-left: auto;
  }
  
  /* Team Hierarchy */
  .team-hierarchy {
    max-width: var(--container);
    margin: 0 auto;
  }
  
  .team-level {
    margin-bottom: var(--space-2xl);
  }
  
  .team-level:last-child {
    margin-bottom: 0;
  }
  
  .team-level-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h2);
    margin: 0 0 var(--space-xl);
    color: var(--color-text);
    position: relative;
    padding-left: var(--space-md);
  }
  
  .team-level-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 2rem;
    background: linear-gradient(180deg, var(--color-accent) 0%, transparent 100%);
    border-radius: 2px;
  }
  
  .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
  }
  
  .team-member {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-surface);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    transition: all var(--duration) var(--ease-out);
  }
  
  .team-member:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
  }
  
  .team-member-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-surface) 100%);
    border: 3px solid var(--color-border);
    transition: all var(--duration) var(--ease-out);
    position: relative;
  }
  
  .team-member:hover .team-member-avatar {
    border-color: var(--color-accent);
    transform: scale(1.05);
  }
  
  .team-member-avatar::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
  }
  
  .team-member:hover .team-member-avatar::after {
    opacity: 0.3;
  }
  
  .team-member-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h3);
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
  }
  
  .team-member-role {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin: 0;
    font-weight: 500;
  }
  
  /* Testimonials Grid */
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
    max-width: var(--container);
    margin: 0 auto;
  }
  
  .testimonial-card {
    background: var(--color-surface);
    padding: var(--space-xl);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    margin: 0;
    transition: all var(--duration) var(--ease-out);
    position: relative;
    display: flex;
    flex-direction: column;
  }
  
  .testimonial-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
  }

  .testimonial-name {
    font-family: var(--font-head);
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-xs);
  }

  .testimonial-role {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    margin: 0 0 var(--space-md);
    line-height: 1.5;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
  }

  .testimonial-preview {
    color: var(--color-text);
    line-height: 1.7;
    margin: 0 0 var(--space-md);
    flex: 1;
    font-style: italic;
  }

  .btn-more {
    align-self: flex-start;
    padding: 0.625rem 1.5rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: var(--text-small);
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
  }

  .btn-more:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 159, 212, 0.3);
  }

  /* Modal Styles */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
  }

  .modal.active {
    display: flex;
  }

  .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s var(--ease-out);
  }

  .modal-content {
    position: relative;
    background: var(--color-surface);
    border-radius: 20px;
    max-width: 800px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s var(--ease-out);
    z-index: 1;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideUp {
    from { 
      opacity: 0;
      transform: translateY(30px);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }

  .modal-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 40px;
    height: 40px;
    border: none;
    background: var(--color-bg-alt);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease-out);
    z-index: 2;
  }

  .modal-close:hover {
    background: var(--color-accent);
    transform: rotate(90deg);
  }

  .modal-close svg {
    color: var(--color-text);
  }

  .modal-body {
    padding: var(--space-3xl) var(--space-xl) var(--space-xl);
  }

  .modal-testimonial-name {
    font-family: var(--font-head);
    font-size: var(--text-h1);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
  }

  .modal-testimonial-role {
    color: var(--color-text-muted);
    font-size: var(--text-body);
    margin: 0 0 var(--space-xl);
    line-height: 1.7;
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-border);
  }

  .modal-testimonial-text {
    color: var(--color-text);
    line-height: 1.8;
  }

  .modal-testimonial-text p {
    margin: 0 0 var(--space-lg);
  }

  .modal-testimonial-text p:last-child {
    margin-bottom: 0;
  }

  .modal-testimonial-text strong {
    color: var(--color-text);
    font-weight: 600;
  }
  
  /* Economics Olympiad */
  .why-participate-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-lg);
  }
  
  .why-card {
    background: var(--color-surface);
    padding: var(--space-xl);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    text-align: center;
    transition: all var(--duration) var(--ease-out);
    position: relative;
    overflow: hidden;
  }
  
  .why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.03) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
  }
  
  .why-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
  }
  
  .why-card:hover::before {
    opacity: 1;
  }
  
  .why-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
    display: inline-block;
    transition: transform var(--duration) var(--ease-out);
  }
  
  .why-card:hover .why-icon {
    transform: scale(1.1) rotate(5deg);
  }
  
  .why-card h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h3);
    margin: 0 0 var(--space-md);
    position: relative;
    z-index: 1;
  }
  
  .why-card p {
    position: relative;
    z-index: 1;
    line-height: 1.7;
  }
  
  .quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }
  
  .quick-link-card {
    background: var(--color-surface);
    padding: var(--space-xl);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    transition: all var(--duration) var(--ease-out);
    display: block;
    position: relative;
    overflow: hidden;
  }
  
  .quick-link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
    transform: scaleX(0);
    transition: transform var(--duration) var(--ease-out);
  }
  
  .quick-link-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
  }
  
  .quick-link-card:hover::before {
    transform: scaleX(1);
  }
  
  .quick-link-card h3 {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--text-h3);
    margin: 0 0 var(--space-xs);
  }
  
  .quick-link-card p {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.7;
  }
  
  /* Olympiad Gallery */
  .olympiad-gallery-section {
    margin-top: var(--space-3xl);
  }
  
  .gallery-intro {
    max-width: 50ch;
    margin-bottom: var(--space-lg);
    color: var(--color-text-muted);
    line-height: 1.6;
  }
  
  .olympiad-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }
  
  .gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-bg-alt);
    aspect-ratio: 4 / 3;
  }
  
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-out);
  }
  
  .gallery-item:hover img {
    transform: scale(1.05);
  }
  
  .gallery-item-large {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
    min-height: 280px;
  }
  
  .gallery-item-large img {
    min-height: 100%;
  }
  
  /* Proof section image */
  .proof-visual {
    max-width: 600px;
    margin: 0 auto var(--space-xl);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-border);
  }
  
  .proof-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  .cta-section-inline {
    background: linear-gradient(135deg, var(--color-text) 0%, #2a3040 100%);
    color: var(--color-bg);
    padding: var(--space-3xl);
    border-radius: 20px;
    text-align: center;
    margin: var(--space-3xl) auto;
    max-width: var(--container-narrow);
    position: relative;
    overflow: hidden;
  }
  
  .cta-section-inline::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(74, 159, 212, 0.2) 0%, transparent 70%);
    border-radius: 50%;
  }
  
  .cta-section-inline h2 {
    color: var(--color-bg);
    position: relative;
    z-index: 1;
  }
  
  .cta-section-inline p {
    color: rgba(250, 249, 247, 0.9);
    position: relative;
    z-index: 1;
  }
  
  .cta-section-inline .btn-primary {
    background: var(--color-accent);
    color: #fff;
    position: relative;
    z-index: 1;
  }
  
  .cta-section-inline .btn-primary:hover {
    background: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(74, 159, 212, 0.4);
  }
  
  .cta-section-inline h2 {
    margin-bottom: var(--space-sm);
  }
  
  .cta-note {
    margin-top: var(--space-md);
    font-size: var(--text-small);
    color: var(--color-text-muted);
  }
  
  /* Stages Visual Timeline - Creative Design */
  .page-hero-stages {
    background: linear-gradient(135deg, #1a1e2c 0%, #2a3040 40%, #1a1e2c 100%);
    color: var(--color-bg);
    position: relative;
    overflow: hidden;
  }
  
  .page-hero-stages::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(74, 159, 212, 0.25) 0%, rgba(74, 159, 212, 0.1) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: heroGlow 8s ease-in-out infinite;
  }
  
  .page-hero-stages::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(74, 159, 212, 0.15) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    animation: heroGlow 10s ease-in-out infinite reverse;
  }
  
  @keyframes heroGlow {
    0%, 100% { 
      transform: translate(0, 0) scale(1);
      opacity: 1;
    }
    50% { 
      transform: translate(20px, -20px) scale(1.1);
      opacity: 0.8;
    }
  }
  
  .page-hero-stages .page-title {
    font-size: clamp(2.5rem, 7vw, 4rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-md);
    background: linear-gradient(135deg, #f7f9fc 0%, #4a9fd4 30%, #f7f9fc 60%, #4a9fd4 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 40px rgba(250, 249, 247, 0.3);
    filter: drop-shadow(0 4px 20px rgba(250, 249, 247, 0.2));
    animation: titleShine 4s ease-in-out infinite;
  }
  
  @keyframes titleShine {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  
  /* Fallback for browsers that don't support background-clip */
  @supports not (-webkit-background-clip: text) {
    .page-hero-stages .page-title {
      color: #f7f9fc;
      text-shadow: 0 0 30px rgba(74, 159, 212, 0.5), 0 4px 20px rgba(250, 249, 247, 0.3);
    }
  }
  
  .page-olympiad-stages .page-content.stages-content {
    padding: var(--space-xl) var(--space-md);
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 30%, var(--color-bg) 100%);
    min-height: auto;
  }
  
  .stages-journey-container {
    max-width: min(95vw, 1200px);
    margin: 0 auto;
    position: relative;
    padding: var(--space-lg) var(--space-md);
    overflow-x: hidden;
  }
  
  /* Journey Path */
  .journey-path {
    display: none;
  }
  
  .journey-path-line {
    position: absolute;
    top: 50%;
    left: 80px;
    right: 80px;
    height: 4px;
    background: linear-gradient(90deg, 
      var(--color-accent) 0%, 
      rgba(74, 159, 212, 0.6) 33%,
      rgba(74, 159, 212, 0.4) 66%,
      var(--color-text) 100%);
    border-radius: 2px;
    transform: translateY(-50%);
  }
  
  .journey-path-dots {
    position: absolute;
    top: 50%;
    left: 80px;
    right: 80px;
    height: 4px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .path-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 4px solid var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-bg);
    position: relative;
    z-index: 1;
  }
  
  .path-dot-stage2 {
    border-color: rgba(74, 159, 212, 0.7);
  }
  
  .path-dot-final {
    border-color: var(--color-text);
    width: 28px;
    height: 28px;
    box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 8px rgba(74, 159, 212, 0.1);
  }
  
  /* Modern Stage Cards */
  .stage-modern {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    z-index: 1;
    max-width: 100%;
  }
  
  .stage-modern:last-child {
    margin-bottom: 0;
  }
  
  .stage-modern-icon {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
  
  .stage-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transition: all 0.4s var(--ease-out);
    flex-shrink: 0;
  }
  
  .stage-modern:hover .stage-icon-circle {
    transform: scale(1.1);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
  }
  
  .stage-icon-1 {
    background: linear-gradient(135deg, var(--color-accent) 0%, #5bb8e8 100%);
  }
  
  .stage-icon-2 {
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.8) 0%, rgba(74, 159, 212, 0.6) 100%);
  }
  
  .stage-icon-final {
    background: linear-gradient(135deg, var(--color-text) 0%, #2a3040 100%);
    width: 100px;
    height: 100px;
  }
  
  .stage-icon-number {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
  }
  
  .stage-icon-trophy {
    font-size: 2.5rem;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }

  .stage-icon-trophy svg {
    stroke: #fff;
  }
  
  .stage-modern-card {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    background: var(--color-surface);
    border-radius: 16px;
    padding: var(--space-md);
    border: 2px solid var(--color-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.4s var(--ease-out);
    position: relative;
    overflow: hidden;
  }
  
  .stage-modern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
    transform: scaleX(0);
    transition: transform 0.4s var(--ease-out);
  }
  
  .stage-modern:hover .stage-modern-card {
    transform: translateY(-8px);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.12);
    border-color: var(--color-accent);
  }
  
  .stage-modern:hover .stage-modern-card::before {
    transform: scaleX(1);
  }
  
  .stage-card-final-modern {
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
    border-color: var(--color-text);
  }
  
  .stage-card-final-modern::before {
    background: linear-gradient(90deg, var(--color-text) 0%, var(--color-accent) 100%);
  }
  
  .stage-modern-badge {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    background: rgba(74, 159, 212, 0.1);
    color: var(--color-accent);
  }
  
  .badge-venue {
    background: rgba(26, 30, 44, 0.1);
    color: var(--color-text);
  }
  
  .badge-final {
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 100%);
    color: var(--color-bg);
  }
  
  .stage-modern-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
    word-wrap: break-word;
    line-height: 1.2;
  }
  
  .stage-modern-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: var(--text-caption);
  }
  
  .date-icon {
    font-size: 1.125rem;
  }
  
  .stage-modern-location {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: var(--space-md);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    line-height: 1.6;
  }
  
  .location-icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
  }
  
  .location-final {
    color: var(--color-text);
    font-weight: 500;
  }
  
  .stage-modern-highlight {
    display: flex;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.05) 0%, rgba(74, 159, 212, 0.02) 100%);
    border-radius: 12px;
    border: 1px solid rgba(74, 159, 212, 0.1);
  }
  
  .highlight-stat {
    flex: 1;
    text-align: center;
    padding: var(--space-xs);
  }
  
  .highlight-stat-main {
    background: rgba(74, 159, 212, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(74, 159, 212, 0.2);
  }
  
  .stat-big {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--color-text);
    line-height: 1.2;
    margin-bottom: 0.25rem;
  }
  
  .highlight-stat-main .stat-big {
    color: var(--color-accent);
    font-size: clamp(2rem, 5vw, 3rem);
  }
  
  .stat-small {
    display: block;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .stage-modern-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-md);
  }
  
  .feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
  }
  
  .feature-check {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 159, 212, 0.1);
    color: var(--color-accent);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.6875rem;
    flex-shrink: 0;
  }
  
  .stage-modern-selection {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
  }
  
  .stage-modern-selection h3 {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
  }
  
  .selection-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }
  
  .select-item {
    display: flex;
    flex-direction: column;
    padding: var(--space-xs);
    background: var(--color-bg-alt);
    border-radius: 6px;
    text-align: center;
  }
  
  .select-total {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.1) 0%, rgba(74, 159, 212, 0.05) 100%);
    border: 1px solid rgba(74, 159, 212, 0.2);
  }
  
  .select-label {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
  }
  
  .select-value {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-text);
  }
  
  .select-total .select-value {
    color: var(--color-accent);
    font-size: 1.75rem;
  }
  
  .stage-modern-journey {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.05) 0%, rgba(74, 159, 212, 0.02) 100%);
    border-radius: 12px;
    border: 1px solid rgba(74, 159, 212, 0.1);
  }
  
  .journey-modern-step {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  
  .journey-modern-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }
  
  .journey-modern-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .journey-modern-text strong {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--text-small);
    color: var(--color-text);
    display: block;
    line-height: 1.3;
  }
  
  .journey-modern-text span {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .journey-modern-arrow {
    font-size: 1.5rem;
    color: var(--color-accent);
    font-weight: 700;
    flex-shrink: 0;
  }
  
  .stage-modern-finalists {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
  }
  
  .finalists-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--color-text) 0%, #2a3040 100%);
    color: var(--color-bg);
    border-radius: 12px;
  }
  
  .finalists-count {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    margin-bottom: 0.25rem;
  }
  
  .finalists-text {
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
  }
  
  .stages-visual-timeline {
    max-width: min(95vw, 1000px);
    margin: 0 auto var(--space-3xl);
    position: relative;
    padding: var(--space-2xl) var(--space-md);
    overflow: visible;
  }
  
  /* Central Timeline Line */
  .stages-visual-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, 
      var(--color-accent) 0%, 
      rgba(74, 159, 212, 0.5) 50%, 
      var(--color-text) 100%);
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
  }
  
  .stage-visual {
    position: relative;
    margin-bottom: var(--space-3xl);
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    z-index: 1;
  }
  
  .stage-visual:last-child {
    margin-bottom: 0;
  }
  
  /* Alternating left/right layout */
  .stage-visual-1 {
    flex-direction: row;
    justify-content: flex-start;
  }
  
  .stage-visual-1 .stage-visual-card {
    margin-left: auto;
  }
  
  .stage-visual-2 {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  
  .stage-visual-2 .stage-visual-card {
    margin-right: auto;
  }
  
  .stage-visual-final {
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
  
  .stage-visual-final .stage-visual-card {
    flex: 0 0 auto;
    max-width: 500px;
    min-width: 400px;
    width: 100%;
  }
  
  .stage-visual-final .stage-visual-connector {
    flex: 0 0 60px;
    max-width: 60px;
  }
  
  .stage-visual-connector {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
    opacity: 0.3;
    position: relative;
  }
  
  .stage-visual-1 .stage-visual-connector {
    background: linear-gradient(90deg, transparent 0%, var(--color-accent) 100%);
  }
  
  .stage-visual-2 .stage-visual-connector {
    background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
  }
  
  .stage-connector-final {
    background: linear-gradient(90deg, transparent 0%, var(--color-text) 100%);
  }
  
  .stage-visual-card {
    flex: 0 0 450px;
    max-width: 450px;
    min-width: 0;
    width: 100%;
    background: var(--color-surface);
    border-radius: 24px;
    border: 2px solid var(--color-border);
    overflow: visible;
    position: relative;
    transition: all 0.4s var(--ease-out);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    z-index: 2;
  }
  
  .stage-visual-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
    transform: scaleX(0);
    transition: transform 0.4s var(--ease-out);
  }
  
  .stage-visual-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.12);
    border-color: var(--color-accent);
  }
  
  .stage-visual-card:hover::before {
    transform: scaleX(1);
  }
  
  .stage-card-final-visual {
    border-color: var(--color-text);
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
  }
  
  .stage-card-final-visual::before {
    background: linear-gradient(90deg, var(--color-text) 0%, var(--color-accent) 100%);
  }
  
  .stage-visual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    padding-bottom: var(--space-md);
    position: relative;
    overflow: visible;
  }
  
  .stage-visual-number {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .stage-number-bg {
    position: absolute;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 4rem;
    color: rgba(74, 159, 212, 0.1);
    line-height: 1;
  }
  
  .stage-number-front {
    position: relative;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--color-accent);
    z-index: 1;
  }
  
  .stage-number-final .stage-number-bg,
  .stage-number-final .stage-number-front {
    font-size: 3rem;
  }
  
  .stage-visual-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: var(--text-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .stage-badge-online {
    background: rgba(74, 159, 212, 0.1);
    color: var(--color-accent);
  }
  
  .stage-badge-venue {
    background: rgba(26, 30, 44, 0.1);
    color: var(--color-text);
  }
  
  .stage-badge-final {
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 100%);
    color: var(--color-bg);
  }
  
  .stage-visual-body {
    padding: 0 var(--space-lg) var(--space-xl);
    overflow: visible;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .stage-visual-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.875rem;
    margin: 0 0 var(--space-md);
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .stage-visual-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-lg);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .stage-visual-date svg {
    color: var(--color-accent);
  }
  
  .stage-visual-location {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: var(--space-lg);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .stage-visual-location span {
    flex: 1;
    min-width: 0;
  }
  
  .stage-visual-location svg {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 2px;
  }
  
  .stage-location-final {
    color: var(--color-text);
    font-weight: 500;
  }
  
  .stage-visual-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-bg-alt);
    border-radius: 12px;
  }
  
  .stat-item {
    text-align: center;
  }
  
  .stat-value {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2rem;
    color: var(--color-text);
    line-height: 1.2;
    margin-bottom: 0.25rem;
  }
  
  .stat-item-highlight .stat-value {
    color: var(--color-accent);
    font-size: 2.5rem;
  }
  
  .stat-label {
    display: block;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .stage-visual-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .detail-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-small);
    color: var(--color-text-muted);
  }
  
  .detail-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 159, 212, 0.1);
    color: var(--color-accent);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
  }
  
  .stage-visual-selection {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    overflow: visible;
  }
  
  .stage-visual-selection h3 {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--text-h3);
    margin: 0 0 var(--space-md);
    color: var(--color-text);
  }
  
  .selection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  
  .selection-item {
    display: flex;
    flex-direction: column;
    padding: var(--space-sm);
    background: var(--color-bg-alt);
    border-radius: 8px;
    text-align: center;
  }
  
  .selection-item-total {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.1) 0%, rgba(74, 159, 212, 0.05) 100%);
    border: 1px solid rgba(74, 159, 212, 0.2);
  }
  
  .selection-label {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
  }
  
  .selection-value {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-text);
  }
  
  .selection-item-total .selection-value {
    color: var(--color-accent);
    font-size: 2rem;
  }
  
  .stage-visual-journey {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.05) 0%, rgba(74, 159, 212, 0.02) 100%);
    border-radius: 16px;
    border: 1px solid rgba(74, 159, 212, 0.1);
    overflow: visible;
    min-width: 0;
  }
  
  .journey-step {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  
  .journey-icon {
    font-size: 2rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
  }
  
  .journey-content {
    flex: 1;
    min-width: 0;
  }
  
  .journey-content h4 {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 0.25rem;
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .journey-content p {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .journey-arrow {
    font-size: 1.5rem;
    color: var(--color-accent);
    font-weight: 700;
  }
  
  .stage-visual-finalists {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--color-text) 0%, #2a3040 100%);
    color: var(--color-bg);
    border-radius: 16px;
    margin-top: var(--space-lg);
  }
  
  .finalists-number {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 0.5rem;
  }
  
  .finalists-label {
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
  }
  
  /* Quick Summary */
  .stages-summary {
    max-width: var(--container);
    margin: var(--space-3xl) auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-2xl);
    background: var(--color-surface);
    border-radius: 24px;
    border: 2px solid var(--color-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  }
  
  .summary-card {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-bg-alt);
    border-radius: 16px;
    transition: all var(--duration) var(--ease-out);
  }
  
  .summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  
  .summary-card-final {
    background: linear-gradient(135deg, var(--color-accent) 0%, #5bb8e8 100%);
    color: var(--color-text);
  }
  
  .summary-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
    display: block;
  }
  
  .summary-card h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-h3);
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
  }
  
  .summary-card-final h3 {
    color: var(--color-text);
  }
  
  .summary-card p {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    margin: 0;
  }
  
  .summary-card-final p {
    color: rgba(26, 30, 44, 0.8);
    font-weight: 500;
  }
  
  .summary-arrow {
    font-size: 1.5rem;
    color: var(--color-accent);
    font-weight: 700;
    flex-shrink: 0;
  }
  
  /* ====== Awards Page ====== */
  .awards-page-content {
    padding-top: var(--space-2xl);
  }

  /* Grand Prize — Hero Card */
  .awards-hero-card {
    max-width: var(--container);
    margin: 0 auto var(--space-3xl);
    background: linear-gradient(135deg, var(--color-text) 0%, #2a3040 100%);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
  }

  .awards-hero-card::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(74, 159, 212, 0.2) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
  }

  .awards-hero-card::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(91, 184, 232, 0.1) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
  }

  .awards-hero-badge {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.5rem 1.25rem;
    border-radius: 0 0 12px 0;
  }

  .awards-hero-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
    position: relative;
    z-index: 1;
  }

  .awards-hero-icon {
    width: 64px;
    height: 64px;
    background: rgba(74, 159, 212, 0.15);
    border: 1px solid rgba(74, 159, 212, 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);
    color: var(--color-accent);
  }

  .awards-hero-icon svg {
    width: 32px;
    height: 32px;
  }

  .awards-hero-title {
    font-family: var(--font-head);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 var(--space-sm);
    line-height: 1.25;
  }

  .awards-hero-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    margin: 0;
    font-weight: 500;
  }

  .awards-hero-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .awards-hero-perks li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.6;
  }

  .awards-hero-perks li strong {
    color: #fff;
  }

  .perk-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(74, 159, 212, 0.12);
    border: 1px solid rgba(74, 159, 212, 0.25);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
  }

  /* Tier Cards */
  .awards-tiers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    max-width: var(--container);
    margin: 0 auto var(--space-3xl);
  }

  .awards-tier-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: var(--space-2xl);
    position: relative;
    overflow: hidden;
    transition: all var(--duration) var(--ease-out);
  }

  .awards-tier-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), #5bb8e8);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
  }

  .awards-tier-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 12px 40px rgba(74, 159, 212, 0.12);
    transform: translateY(-4px);
  }

  .awards-tier-card:hover::before {
    opacity: 1;
  }

  .tier-rank {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.1) 0%, rgba(91, 184, 232, 0.05) 100%);
    border: 1px solid rgba(74, 159, 212, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    margin-bottom: var(--space-lg);
  }

  .awards-tier-card h3 {
    font-family: var(--font-head);
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-xs);
  }

  .tier-subtitle {
    color: var(--color-text-muted);
    font-size: var(--text-small);
    margin: 0 0 var(--space-lg);
    line-height: 1.5;
  }

  .tier-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .tier-perks li {
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.6;
    color: var(--color-text);
  }

  .tier-perks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
  }

  .tier-perks li strong {
    font-weight: 600;
  }

  /* Teacher Award Strip */
  .awards-teacher-strip {
    max-width: var(--container);
    margin: 0 auto var(--space-3xl);
    background: linear-gradient(135deg, rgba(74, 159, 212, 0.08) 0%, rgba(91, 184, 232, 0.04) 100%);
    border: 1px solid rgba(74, 159, 212, 0.2);
    border-radius: 20px;
    padding: var(--space-xl) var(--space-2xl);
  }

  .awards-teacher-inner {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
  }

  .awards-teacher-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    background: var(--color-surface);
    border: 1px solid rgba(74, 159, 212, 0.2);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(74, 159, 212, 0.1);
  }

  .awards-teacher-text h3 {
    font-family: var(--font-head);
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-xs);
  }

  .awards-teacher-text p {
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.7;
  }

  /* Journey Steps */
  .awards-journey {
    max-width: var(--container);
    margin: 0 auto var(--space-3xl);
    text-align: center;
  }

  .awards-journey-title {
    font-family: var(--font-head);
    font-size: var(--text-h2);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-2xl);
  }

  .awards-journey-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-lg);
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 140px;
    position: relative;
  }

  .journey-step {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: default;
    gap: 0 var(--space-md);
  }

  .journey-step-number {
    width: 76px;
    height: 76px;
    min-width: 76px;
    min-height: 76px;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--color-accent) 0%, #5bb8e8 100%);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.625rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(74, 159, 212, 0.3);
    position: relative;
    z-index: 2;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  }

  .journey-step:hover .journey-step-number {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(74, 159, 212, 0.45);
  }

  .journey-step h4 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-text);
    margin: 0;
  }

  .journey-step p {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out);
  }

  .journey-step:hover p {
    opacity: 1;
  }

  .journey-connector {
    flex-shrink: 0;
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), #5bb8e8);
    margin-top: 37px;
    border-radius: 2px;
    opacity: 0.5;
  }
  
  /* Contacts */
  .contacts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    max-width: var(--container);
    margin: 0 auto;
  }
  
  .contact-card {
    background: var(--color-surface);
    padding: var(--space-xl);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    transition: all var(--duration) var(--ease-out);
    position: relative;
  }
  
  .contact-card::after {
    content: '';
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(74, 159, 212, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
  }
  
  .contact-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
  }
  
  .contact-card:hover::after {
    opacity: 1;
  }
  
  .contact-card h2 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.75rem;
    margin: 0 0 var(--space-md);
    color: var(--color-text);
  }
  
  .contact-card p {
    color: var(--color-text-muted);
    line-height: 1.7;
  }
  
  .contact-link {
    display: block;
    color: var(--color-accent);
    font-weight: 500;
    margin-top: var(--space-sm);
    transition: color var(--duration) var(--ease-out);
  }
  
  .contact-link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
  }
  
  .contact-links {
    margin-top: var(--space-sm);
  }
  
  .contact-links .contact-link {
    margin-bottom: var(--space-xs);
  }
  
  .social-links {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .social-link {
    padding: 0.75rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-weight: 500;
    transition: border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
  }
  
  .social-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  
  /* ============================================
     Responsive — pixel-perfect
     ============================================ */
  
  @media (max-width: 900px) {
    .benefits-grid {
      grid-template-columns: 1fr;
    }
  
    .testimonials {
      grid-template-columns: 1fr;
    }
  
    .testimonials-grid {
      grid-template-columns: 1fr;
    }

    .modal-body {
      padding: var(--space-2xl) var(--space-md) var(--space-lg);
    }

    .modal-testimonial-name {
      font-size: 1.5rem;
    }
  
    .metrics-inner {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
    }
  
    .about-overview-grid {
      grid-template-columns: 1fr;
    }
  
    .about-stats {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-lg);
    }
  
    .about-stat-value {
      font-size: 2rem;
    }
  
    .club-values-grid {
      grid-template-columns: 1fr;
    }
  
    .wwd-item,
    .wwd-item:nth-child(even) {
      flex-direction: column;
      text-align: left;
      gap: var(--space-md);
    }

    .wwd-item:nth-child(even) .wwd-text p {
      margin-left: 0;
    }

    .wwd-icon-wrap {
      width: 60px;
      height: 60px;
    }

    .why-participate-grid {
      grid-template-columns: 1fr;
    }
  
    .quick-links {
      grid-template-columns: 1fr;
    }
  
    .awards-hero-body {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
      padding: var(--space-xl);
    }

    .awards-tiers {
      grid-template-columns: 1fr;
    }

    .awards-teacher-inner {
      flex-direction: column;
      text-align: center;
    }

    .awards-teacher-strip {
      padding: var(--space-xl);
    }

    .awards-journey-steps {
      flex-direction: column;
      align-items: center;
      padding-bottom: 0;
    }

    .journey-step {
      position: static;
    }

    .journey-step p {
      position: static;
      transform: none;
      width: 260px;
      opacity: 1;
      pointer-events: auto;
      margin: var(--space-xs) 0 0;
    }

    .journey-connector {
      width: 2px;
      height: 32px;
      margin: var(--space-sm) 0;
    }

    .awards-grid {
      grid-template-columns: 1fr;
    }
  
    .contacts-grid {
      grid-template-columns: 1fr;
    }
  
    /* Footer Responsive */
    .footer-content {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
    }
  
    .footer-links {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-lg);
    }
  
    .olympiad-gallery {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .gallery-item-large {
      grid-column: span 2;
      grid-row: span 1;
      min-height: 220px;
    }
  
    /* Stages Visual Timeline Responsive */
    .stages-visual-timeline::before {
      left: 40px;
    }
  
    .stage-visual {
      flex-direction: row !important;
      gap: var(--space-md);
    }
  
    .stage-visual-card {
      flex: 1;
      min-width: 0;
    }
  
    .stage-visual-connector {
      width: 40px;
      height: 2px;
      flex: 0 0 40px;
    }
  
    .stage-visual-1 .stage-visual-connector,
    .stage-visual-2 .stage-visual-connector,
    .stage-connector-final {
      background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
    }
  
    .stage-visual-number {
      width: 60px;
      height: 60px;
    }
  
    .stage-number-bg {
      font-size: 3rem;
    }
  
    .stage-number-front {
      font-size: 2rem;
    }
  
    .stage-visual-title {
      font-size: 1.5rem;
    }
  
    .stat-value {
      font-size: 1.5rem;
    }
  
    .stat-item-highlight .stat-value {
      font-size: 2rem;
    }
  
    .selection-grid {
      grid-template-columns: 1fr;
    }
  
    .stages-summary {
      flex-direction: column;
    }
  
    .summary-arrow {
      transform: rotate(90deg);
    }
  }
  
  @media (max-width: 700px) {
    .feature-row {
      flex-direction: column;
      gap: var(--space-sm);
    }

    .feature-row-num {
      font-size: 2.5rem;
      min-width: auto;
      opacity: 0.2;
    }

    .feature-row-body h3 {
      font-size: var(--text-h3);
    }

    .home-stats-inner {
      flex-wrap: wrap;
      gap: var(--space-lg) var(--space-xl);
    }

    .home-stat-divider {
      display: none;
    }

    .home-stat {
      flex: 0 0 calc(50% - var(--space-xl));
    }

    .events-timeline::before {
      display: none;
    }

    .event-item {
      flex-direction: column;
      gap: var(--space-md);
    }

    .event-date-badge {
      width: 64px;
      height: 64px;
    }

    .nav {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(320px, 85vw);
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      padding: var(--space-lg) var(--space-lg);
      padding-top: calc(var(--space-lg) + 60px);
      background: #1a1e2c;
      border-left: none;
      box-shadow: -12px 0 40px rgba(0, 0, 0, 0.3);
      transform: translateX(100%);
      transition: transform var(--duration) var(--ease-out);
      visibility: hidden;
      overflow-y: auto;
      z-index: 1000;
    }
  
    .nav.open,
    .nav.active {
      transform: translateX(0);
      visibility: visible;
    }

    .nav::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity var(--duration) var(--ease-out);
      pointer-events: none;
      z-index: -1;
    }

    .nav.open::before,
    .nav.active::before {
      opacity: 1;
    }
  
    .nav-link,
    .nav a {
      font-size: var(--text-body);
      padding: 0.625rem 0;
      display: block;
      width: 100%;
      text-align: left;
      border-bottom: none;
      white-space: nowrap;
      color: rgba(255, 255, 255, 0.85);
    }

    .nav-link:hover,
    .nav a:hover {
      color: #fff;
    }
  
    .nav-dropdown {
      width: 100%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding-bottom: var(--space-xs);
    }

    .nav-dropdown-toggle {
      pointer-events: none;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-accent);
      padding: var(--space-md) 0 var(--space-xs);
    }

    .nav-dropdown-toggle svg {
      display: none;
    }
  
    .nav-dropdown-menu {
      position: static;
      transform: none;
      width: 100%;
      min-width: 0;
      opacity: 1;
      visibility: visible;
      max-height: none;
      overflow: visible;
      box-shadow: none;
      border: none;
      border-radius: 0;
      margin: 0;
      padding: 0 0 var(--space-sm) 0;
      background: transparent;
    }
  
    .nav-dropdown-menu a {
      width: 100%;
      box-sizing: border-box;
      padding: 0.5rem 0 0.5rem var(--space-sm);
      overflow: visible;
      white-space: nowrap;
      font-size: var(--text-body);
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      border-left: 2px solid rgba(255, 255, 255, 0.1);
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    .nav-dropdown-menu a:hover {
      border-left-color: var(--color-accent);
      color: #fff;
      background: transparent;
    }

    .nav-dropdown-menu .dropdown-overview {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0.5rem;
    }

    .nav > .nav-link {
      padding: var(--space-md) 0 var(--space-sm);
      color: rgba(255, 255, 255, 0.85);
      font-weight: 500;
    }

    .nav > .btn-register {
      margin-top: var(--space-md);
      text-align: center;
      border-radius: 10px;
      color: #fff;
    }

    .nav > .language-selector {
      margin: var(--space-md) 0 0;
      width: 100%;
    }

    .nav > .language-selector .lang-dropdown-toggle {
      width: 100%;
      justify-content: center;
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.85);
    }

    .nav > .language-selector .lang-dropdown-toggle:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.25);
    }

    .nav > .language-selector .lang-dropdown-toggle svg {
      color: rgba(255,255,255,0.6);
    }

    .nav > .language-selector .lang-dropdown-menu {
      position: static;
      transform: none;
      opacity: 1;
      visibility: visible;
      max-height: 0;
      overflow: hidden;
      box-shadow: none;
      border: none;
      border-radius: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      transition: max-height 0.3s var(--ease-out);
    }

    .nav > .language-selector.active .lang-dropdown-menu {
      max-height: 200px;
      padding-top: 0.375rem;
    }

    .nav > .language-selector .lang-option {
      color: rgba(255,255,255,0.7);
      text-align: center;
    }

    .nav > .language-selector .lang-option:hover {
      color: #fff;
      background: rgba(255,255,255,0.08);
    }

    .nav > .language-selector .lang-option.active {
      color: var(--color-accent);
      background: rgba(74,159,212,0.12);
    }

    .menu-toggle {
      display: flex;
      position: relative;
      z-index: 1001;
    }

    .menu-toggle[aria-expanded="true"] {
      color: #fff;
    }

  .page-hero-olympiad-dates {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    max-width: 280px;
    margin: 0.375rem auto var(--space-xs);
    text-align: center;
  }

  .page-hero-olympiad .page-hero-qr img {
    width: 72px;
    height: 72px;
  }

  .page-hero-olympiad .page-hero-cta-row .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .page-hero-olympiad .hero-badge {
    margin-top: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.6875rem;
  }

  .page-hero-cta-row {
    flex-direction: column;
  }

  .hero {
    padding-top: calc(70px + var(--space-2xl));
  }

  .hero-carousel {
    margin-top: 70px;
    min-height: calc(100vh - 70px);
    min-height: calc(100dvh - 70px);
  }

  .hero-carousel-content {
    min-height: calc(100vh - 70px);
    min-height: calc(100dvh - 70px);
  }

  .page-hero,
  .page-hero-stages {
    min-height: calc(100vh - 70px);
    min-height: calc(100dvh - 70px);
    padding-top: calc(70px + var(--space-md));
  }

  .page-hero-olympiad-overview {
    padding: calc(70px + var(--space-md)) var(--space-md) var(--space-xl);
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
  }

  .page-hero-olympiad-overview .page-hero-inner {
    padding: 0;
  }

  .olympiad-partners-section .olympiad-partners-logos {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .olympiad-partners-section .partner-logo {
    --partner-logo-height: 3.5rem;
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
  }

  .olympiad-partners-section .partner-logo--sm {
    --partner-logo-height: 2.25rem;
    min-width: auto;
    max-width: none;
  }

  .hero-olympiad-promo .olympiad-cta-block {
    align-items: center;
  }

  .hero-carousel-text {
    text-align: center;
  }

  .hero-olympiad-promo .olympiad-year,
  .hero-olympiad-promo .olympiad-hero-tagline {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-olympiad-promo .olympiad-hero-tagline {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-carousel-prev,
  .hero-carousel-next {
    width: 40px;
    height: 40px;
  }
  
    .trust-logos {
      flex-direction: column;
      gap: var(--space-md);
    }
  
    .btn-register {
      width: 100%;
      margin-top: var(--space-sm);
    }
  
    .footer-links {
      grid-template-columns: 1fr;
    }
  
    .footer-content {
      gap: var(--space-lg);
    }
  
    .footer-inner {
      padding: var(--space-xl) var(--space-md) var(--space-md);
    }
  
    .olympiad-gallery {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
    }
  
    .gallery-item-large {
      grid-column: span 1;
      min-height: 200px;
    }
  
    .gallery-item {
      aspect-ratio: 16 / 10;
    }
  
    .proof-visual {
      margin-bottom: var(--space-lg);
    }

    .content-intro {
      padding: var(--space-lg);
      border-radius: 16px;
    }

    .content-intro::before {
      display: none;
    }

    .page-content {
      padding: var(--space-xl) var(--space-md);
    }

    .cta-inner {
      padding: var(--space-xl) var(--space-md);
    }

    .upcoming-events {
      padding: var(--space-xl) var(--space-md);
    }

    .home-stats-strip {
      padding: var(--space-lg) var(--space-md);
    }

    .event-register-link {
      align-self: flex-start;
    }
  }
  
  @media (max-width: 480px) {
    :root {
      --space-2xl: 4rem;
      --space-3xl: 5rem;
    }
  
    .about-stats {
      grid-template-columns: 1fr;
    }
  
    .hero-headline {
      font-size: clamp(2rem, 10vw, 2.5rem);
    }
  
    .btn-large {
      width: 100%;
      padding: 1rem;
    }
  
    .cta-reassurance {
      text-align: left;
      max-width: 28ch;
      margin-left: auto;
      margin-right: auto;
    }
  
    /* Modern Stages Mobile */
    .stages-journey-container {
      padding: var(--space-xl) var(--space-sm);
    }
  
    .journey-path-line {
      left: 50px;
      right: 50px;
    }
  
    .journey-path-dots {
      left: 50px;
      right: 50px;
    }
  
    .stage-modern {
      flex-direction: column;
      gap: var(--space-md);
      align-items: center;
      margin-bottom: var(--space-xl);
    }
  
    .stage-modern-icon {
      order: -1;
    }
  
    .stage-icon-circle {
      width: 70px;
      height: 70px;
    }
  
    .stage-icon-final {
      width: 80px;
      height: 80px;
    }
  
    .stage-icon-number {
      font-size: 1.75rem;
    }
  
    .stage-icon-trophy {
      font-size: 2rem;
    }
  
    .stage-modern-card {
      width: 100%;
      max-width: 100%;
      padding: var(--space-md);
    }
  
    .stage-modern-title {
      font-size: 1.5rem;
    }
  
    .stat-big {
      font-size: 1.75rem;
    }
  
    .highlight-stat-main .stat-big {
      font-size: 2rem;
    }
  
    .selection-modern {
      grid-template-columns: 1fr;
    }
  
    .stage-modern-journey {
      flex-direction: column;
      text-align: center;
    }
  
    .journey-modern-arrow {
      transform: rotate(90deg);
    }
  
    .finalists-count {
      font-size: 2.5rem;
    }
  
    .stage-modern-highlight {
      flex-direction: column;
      gap: var(--space-sm);
    }
  }
  
  /* ============================================
     Image Modal (Lightbox)
     ============================================ */
  
  .image-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
  }
  
  .image-modal[hidden] {
    display: none !important;
  }
  
  .image-modal.image-modal-open {
    opacity: 1;
    visibility: visible;
  }
  
  .image-modal.image-modal-open[hidden] {
    display: flex !important;
  }
  
  .image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 30, 44, 0.92);
    cursor: pointer;
  }
  
  .image-modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 1002;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 249, 247, 0.1);
    border: 1px solid rgba(250, 249, 247, 0.2);
    border-radius: 50%;
    color: var(--color-bg);
    cursor: pointer;
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  }
  
  .image-modal-close:hover {
    background: rgba(250, 249, 247, 0.2);
    color: var(--color-bg);
    transform: scale(1.05);
  }
  
  .image-modal-close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  
  .image-modal-content {
    position: relative;
    z-index: 1001;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .image-modal-img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    animation: modalImageIn 0.3s var(--ease-out);
  }
  
  @keyframes modalImageIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Clickable cursor on gallery/proof images */
  .olympiad-gallery .gallery-item,
  .proof-visual {
    cursor: pointer;
  }
  
  .olympiad-gallery .gallery-item img,
  .proof-visual img {
    cursor: pointer;
  }

  /* ----- AI Chatbot ----- */
  .chatbot-widget {
    position: fixed;
    display: none;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: 9999;
    font-family: var(--font-body);
  }

  .chatbot-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 20px rgba(74, 159, 212, 0.4);
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
  }

  .chatbot-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(74, 159, 212, 0.5);
  }

  .chatbot-icon-close {
    display: none;
  }

  .chatbot-widget.is-open .chatbot-icon {
    display: none;
  }

  .chatbot-widget.is-open .chatbot-icon-close {
    display: block;
  }

  .chatbot-widget.is-open .chatbot-toggle {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .chatbot-panel {
    position: absolute;
    bottom: calc(56px + var(--space-md));
    right: 0;
    width: min(380px, calc(100vw - var(--space-lg) * 2));
    max-height: 480px;
    background: var(--color-surface);
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(26, 30, 44, 0.15);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.95);
    transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), visibility var(--duration);
  }

  .chatbot-widget.is-open .chatbot-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .chatbot-widget.is-open .chatbot-panel[hidden] {
    display: none;
  }

  .chatbot-panel:not([hidden]) {
    display: flex;
  }

  .chatbot-header {
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: var(--color-bg);
  }

  .chatbot-header-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .chatbot-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(74, 159, 212, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--color-accent);
    flex-shrink: 0;
  }

  .chatbot-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-body);
    margin: 0 0 0.15em;
  }

  .chatbot-subtitle {
    font-size: var(--text-caption);
    opacity: 0.85;
    margin: 0;
  }

  .chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-height: 180px;
    max-height: 320px;
  }

  .chatbot-message {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
  }

  .chatbot-message-user {
    flex-direction: row-reverse;
  }

  .chatbot-message-user .chatbot-avatar {
    display: none;
  }

  .chatbot-message-user .chatbot-bubble {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: #fff;
    margin-left: auto;
  }

  .chatbot-bubble {
    background: var(--color-bg-alt);
    padding: var(--space-sm) var(--space-md);
    border-radius: 14px;
    max-width: 85%;
    line-height: 1.6;
  }

  .chatbot-bubble p {
    margin: 0 0 0.5em;
    font-size: var(--text-small);
  }

  .chatbot-bubble p:last-child {
    margin-bottom: 0;
  }

  .chatbot-bubble a {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .chatbot-bubble a:hover {
    text-decoration: none;
  }

  .chatbot-typing .chatbot-bubble p {
    color: var(--color-text-muted);
    font-style: italic;
  }

  .chatbot-form {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-md);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .chatbot-input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: var(--text-small);
  }

  .chatbot-input:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  .chatbot-send {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--color-accent);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration) var(--ease-out);
  }

  .chatbot-send:hover {
    background: var(--color-accent-hover);
  }

  @media (max-width: 480px) {
    .chatbot-widget {
      bottom: var(--space-md);
      right: var(--space-md);
    }

    .chatbot-panel {
      width: calc(100vw - var(--space-md) * 2);
      max-height: min(70vh, 480px);
    }
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  
    .hero-shape {
      animation: none;
      opacity: 0.4;
    }
  
    .btn:hover {
      transform: none;
    }
  
    .hero-badge {
      animation: none;
    }
  
    .image-modal-img {
      animation: none;
    }
  
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }