/* ============================================
   HISTORY PAGE - MAIN STYLES
   ============================================ */

:root {
  --color-primary: #c41e3a;
  --color-primary-dark: #a01529;
  --color-gold: #d4af37;
  --color-gold-dark: #b8941f;
  --color-blue: #1e53c4;
  --color-text: #1a1a1a;
  --color-text-light: #4a4a4a;
  --color-text-muted: #666;
  --color-bg-light: #f8f9fa;
  --color-bg-white: #ffffff;
  --color-border: #e0e0e0;
  --color-shadow: rgba(0, 0, 0, 0.1);
  
  /* Period-specific colors */
  --period-1930s: #5d4037;
  --period-1960s: #1565c0;
  --period-1970s: #ffd700;
  --period-1980s: #7b1fa2;
  --period-1990s: #0277bd;
  --period-2000s: #2e7d32;
  --period-2009: #d84315;
  --period-2017: #c41e3a;
}

/* ============================================
   GENERAL PAGE STYLES
   ============================================ */

.history-page {
  background-color: var(--color-bg-white);
  overflow-x: hidden;
}

/* ============================================
   HERO SECTION - WEB UI 3.0 MINIMAL
   ============================================ */

.history-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

/* Subtle gradient overlay */
.history-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(38, 95, 201, 0.61) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  padding: 3rem 1.5rem;
  animation: fadeInUp 0.8s ease-out;
}

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

.hero-inner {
  display: flex;
  align-content: center;
  justify-content: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: rgba(30, 88, 196, 0.08);
  border: 1px solid rgba(30, 83, 196, 0.149);
  border-radius: 100px;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(34, 119, 216);
  letter-spacing: 0.5px;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-badge-icon {
  font-size: 1.25rem;
}

.hero-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.hero-subtitle {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* Minimal scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.scroll-line {
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--color-text-muted), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% {
    opacity: 1.3;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.2);
  }
}

/* ============================================
   INTRODUCTION SECTION - WEB UI 3.0 MINIMAL
   ============================================ */

.history-intro {
  padding: 2rem 0;
  background: #ffffff;
}

/* Intro animation wrapper */
.intro-inner {
  animation: fadeInUp 0.8s ease-out;
}

.intro-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 5rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.intro-stats {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 120px;
}

/* Анімація для stat-box з затримками */
.stat-box2 {
  padding: 2rem 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  animation: fadeInUp 0.8s ease-out forwards;
}

.stat-box2:nth-child(1) {
  animation-delay: 0.2s;
}

.stat-box2:nth-child(2) {
  animation-delay: 0.3s;
}

.stat-box2:hover {
  border-color: var(--color-blue);
  box-shadow: 0 4px 16px rgba(30, 96, 196, 0.08);
  transform: translateY(-2px);
}

.stat-value2 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-blue);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label2 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.intro-text-content {
  padding-top: 0.5rem;
}

/* Анімація для параграфів тексту */
.intro-text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 1.75rem;
  opacity: 1;
  animation: fadeInUp 0.8s ease-out forwards;
}

.intro-text:nth-child(1) {
  animation-delay: 0.4s;
}

.intro-text:nth-child(2) {
  animation-delay: 0.5s;
}

.intro-text:last-child {
  margin-bottom: 0;
}

.intro-text strong {
  color: var(--color-blue);
  font-weight: 600;
}

/* ============================================
   RESPONSIVE - HERO & INTRO
   ============================================ */

@media (max-width: 1024px) {
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .intro-stats {
    position: static;
    flex-direction: row;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .history-hero {
    min-height: 70vh;
  }

  .hero-content {
    padding: 2rem 1.5rem;
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-subtitle {
    font-size: 1.125rem;
  }

  .history-intro {
    padding: 5rem 0;
  }

  .intro-stats {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .intro-text {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .hero-scroll-hint {
    bottom: 2rem;
  }

  .scroll-line {
    height: 40px;
  }

  .stat-box2 {
    padding: 1.5rem 1.25rem;
  }

  .stat-value2 {
    font-size: 2rem;
  }
}


/* ============================================
   PERIOD SECTIONS - BASE STYLES
   ============================================ */

.history-period {
  position: relative;
  padding: 6rem 0;
  opacity: 1;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.history-period.visible {
  opacity: 1;
  transform: translateY(0);
}

.period-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1.03;
  pointer-events: none;
}

.period-header {
  margin-bottom: 3rem;
  text-align: center;
}

.period-year {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  margin-bottom: 1rem;
  background: var(--color-primary);
  color: white;
}

.period-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.period-content {
  max-width: 1000px;
  margin: 0 auto;
}

.period-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
}

.period-text p {
  margin-bottom: 1.5rem;
}

.period-text strong {
  color: var(--color-text);
  font-weight: 700;
}

/* ============================================
   PERIOD 1: 1930s - EARLY BEGINNINGS
   ============================================ */

.period-1930s {
  background: #ffffff; /* Білий фон */
  padding: 8rem 0;
}

/* Period inner wrapper з анімацією */
.period-1930s .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.period-1930s.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.period-1930s .period-header {
  text-align: center;
  margin-bottom: 4rem;
}

.period-1930s .period-year {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(93, 64, 55, 0.08);
  border: 1px solid rgba(93, 64, 55, 0.15);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--period-1930s);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.period-1930s.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.period-1930s .period-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 1;
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.period-1930s.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.period-1930s .period-content {
  max-width: 800px;
  margin: 0 auto;
}

.period-1930s .period-text p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 0rem;
  opacity: 1;
}

.period-1930s.visible .period-text p:nth-child(1) {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.period-1930s.visible .period-text p:nth-child(2) {
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

.period-1930s .period-text strong {
  color: var(--period-1930s);
  font-weight: 600;
}

/* Period highlight card */
.period-highlight {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.2rem;
  background: #ffffff;
  border: 1px solid rgba(93, 64, 55, 0.15);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

.period-1930s.visible .period-highlight {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.period-highlight:hover {
  border-color: var(--period-1930s);
  box-shadow: 0 4px 16px rgba(93, 64, 55, 0.12);
  transform: translateY(-2px);
}

.highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(93, 64, 55, 0.08);
  border-radius: 12px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.period-highlight:hover .highlight-icon {
  background: rgba(93, 64, 55, 0.12);
  transform: scale(1.05);
}

.highlight-icon .material-symbols-outlined {
  font-size: 1.75rem;
  color: var(--period-1930s);
}

.period-highlight p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-light);
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .period-1930s {
    padding: 5rem 0;
  }

  .period-1930s .period-header {
    margin-bottom: 3rem;
  }

  .period-1930s .period-title {
    font-size: 2rem;
  }

  .period-1930s .period-text p {
    font-size: 1rem;
  }

  .period-highlight {
    padding: 1.5rem;
    gap: 1rem;
  }

  .highlight-icon {
    width: 40px;
    height: 40px;
  }

  .highlight-icon .material-symbols-outlined {
    font-size: 1.5rem;
  }
}
/* ============================================
   PERIOD 2: 1960s - OLYMPIC RECOGNITION
   ============================================ */

.period-1960s {
  background: #ffffff;
  padding: 8rem 0;
}

/* Period inner wrapper з анімацією */
.period-1960s .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.period-1960s.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.period-1960s .period-header {
  text-align: center;
  margin-bottom: 4rem;
}

.period-1960s .period-year {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(21, 101, 192, 0.08);
  border: 1px solid rgba(21, 101, 192, 0.15);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--period-1960s);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.period-1960s.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.period-1960s .period-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 1;
}

.period-1960s.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.period-content-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 5rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.period-1960s .period-text p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 1.75rem;
  opacity: 1;
}

.period-1960s.visible .period-text p:nth-child(1) {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.period-1960s.visible .period-text p:nth-child(2) {
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

.period-1960s .period-text strong {
  color: var(--period-1960s);
  font-weight: 600;
}

/* Achievements List - мінімалістичний стиль */
.achievements-list {
  list-style: none;
  padding: 0;
  margin-top: 2.5rem;
  opacity: 1;
}

.period-1960s.visible .achievements-list {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.achievements-list li {
  padding: 1.25rem 0;
  padding-left: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-light);
  position: relative;
  transition: all 0.3s ease;
}

.achievements-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--period-1960s);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.achievements-list li:hover {
  padding-left: 2.5rem;
  color: var(--color-text);
}

.achievements-list li:hover::before {
  width: 8px;
  height: 8px;
  background: var(--period-1960s);
}

.achievements-list li:last-child {
  border-bottom: none;
}

.achievements-list li strong {
  color: var(--period-1960s);
  font-weight: 600;
}

/* Stat Card - мінімалістичний дизайн */
.period-visual {
  opacity: 1;
}

.period-1960s.visible .period-visual {
  animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

.stat-card {
  background: #ffffff;
  border: 1px solid rgba(21, 101, 192, 0.15);
  padding: 3rem 2rem;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Subtle gradient overlay on hover */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(21, 101, 192, 0.03) 0%, rgba(30, 136, 229, 0.03) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  border-color: var(--period-1960s);
  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.12);
  transform: translateY(-4px);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  opacity: 1.9;
}

.stat-number {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--period-1960s);
  letter-spacing: -0.03em;
  position: relative;
  z-index: 1;
}

.stat-label {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-light);
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .period-content-split {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .period-visual {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .period-1960s {
    padding: 5rem 0;
  }

  .period-1960s .period-header {
    margin-bottom: 3rem;
  }

  .period-1960s .period-title {
    font-size: 2rem;
  }

  .period-1960s .period-text p {
    font-size: 1rem;
  }

  .period-content-split {
    gap: 2.5rem;
  }

  .achievements-list {
    margin-top: 2rem;
  }

  .achievements-list li {
    font-size: 1rem;
    padding: 1rem 0 1rem 1.5rem;
  }

  .stat-card {
    padding: 2.5rem 1.5rem;
  }

  .stat-number {
    font-size: 4rem;
  }

  .stat-label {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .stat-card {
    padding: 2rem 1.5rem;
  }

  .stat-number {
    font-size: 3.5rem;
  }

  .stat-icon {
    font-size: 2.5rem;
  }
}

/* ============================================
   PERIOD 3: 1970s - GOLDEN ERA
   ============================================ */

.golden-era {
  background: #ffffff;
  position: relative;
  padding: 8rem 0;
}

/* Золота декоративна лінія */
.golden-era::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--color-gold), transparent);
  opacity: 1.4;
}

/* Period inner wrapper з анімацією */
.golden-era .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.golden-era.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.golden-era .period-header {
  text-align: center;
  margin-bottom: 4rem;
}

.golden-era .period-year {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gold-dark);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.golden-era.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.golden-era .period-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 1;
}

.golden-era.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

/* Golden intro */
.golden-intro {
  text-align: center;
  margin-bottom: 4rem;
  opacity: 1;
}

.golden-era.visible .golden-intro {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.lead-text {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--color-text-light);
  max-width: 800px;
  margin: 0 auto;
}

.lead-text strong {
  color: var(--color-gold-dark);
  font-weight: 600;
}

/* Period image block */
.period-image-block {
  margin: 4rem 0;
  text-align: center;
  opacity: 1;
}

.golden-era.visible .period-image-block {
    display: flex;
    animation: fadeInUp 0.8s ease-out 0.5s forwards;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.period-image-block img {
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.period-image-block img:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.image-caption {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.image-caption strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Champions grid */
.champions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 4rem 0;
  opacity: 1;
}

.golden-era.visible .champions-grid {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.champion-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.champion-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--period-1970s);
  transition: all 0.3s ease;
}

.champion-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-color: rgba(212, 175, 55, 0.3);
}

.champion-card:hover::before {
  height: 4px;
}

/* Highlight card - золота */
.highlight-card {
  background: linear-gradient(to bottom, rgba(255, 215, 0, 0.03) 0%, #ffffff 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.highlight-card::before {
  background: linear-gradient(to right, var(--color-gold-dark), var(--color-gold));
}

.highlight-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.2);
}

/* Medal badge */
.medal-badge {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: inline-block;
}

.champion-year {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.highlight-card .champion-year {
  color: var(--color-gold-dark);
}

.champion-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.champion-achievement {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.5;
  margin: 0;
}

/* Coach tribute */
.coach-tribute {
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.2);
  padding: 3rem;
  border-radius: 20px;
  margin: 4rem 0;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.golden-era.visible .coach-tribute {
  animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

/* Золотий градієнт фон при hover */
.coach-tribute::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.coach-tribute:hover {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.15);
}

.coach-tribute:hover::before {
  opacity: 1;
}

.tribute-icon {
  font-size: 3rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  position: relative;
  z-index: 1;
}

.tribute-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.coach-tribute h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.coach-tribute p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

.coach-tribute strong {
  color: var(--color-gold-dark);
  font-weight: 600;
}

/* Period stats */
.period-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
  opacity: 1;
}

.golden-era.visible .period-stats {
  animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

.stat-item {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-item:hover {
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.12);
  transform: translateY(-4px);
}

.stat-value {
  display: block;
  font-size: 4rem;
  font-weight: 800;
  color: var(--color-gold-dark);
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}

.stat-description {
  display: block;
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.5;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .golden-era {
    padding: 5rem 0;
  }

  .golden-era .period-header {
    margin-bottom: 3rem;
  }

  .golden-era .period-title {
    font-size: 2rem;
  }

  .lead-text {
    font-size: 1.1rem;
  }

  .period-image-block {
    margin: 3rem 0;
  }

  .champions-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 3rem 0;
  }

  .coach-tribute {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    margin: 3rem 0;
  }

  .tribute-icon {
    width: 56px;
    height: 56px;
    font-size: 2.5rem;
  }

  .coach-tribute h3 {
    font-size: 1.3rem;
  }

  .coach-tribute p {
    font-size: 1rem;
  }

  .period-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
  }

  .stat-value {
    font-size: 3rem;
  }
}

@media (max-width: 480px) {
  .champion-card {
    padding: 1.5rem;
  }

  .stat-item {
    padding: 2rem 1.25rem;
  }
}
/* ============================================
   PERIOD 4: 1980s - TRANSITION
   ============================================ */

.period-1980s {
  background: #ffffff;
  padding: 8rem 0;
}

/* Period inner wrapper з анімацією */
.period-1980s .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.period-1980s.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.period-1980s .period-header {
  text-align: center;
  margin-bottom: 4rem;
}

.period-1980s .period-year {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(123, 31, 162, 0.08);
  border: 1px solid rgba(123, 31, 162, 0.15);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--period-1980s);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.period-1980s.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.period-1980s .period-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 1;
}

.period-1980s.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.period-1980s .period-content-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 5rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.period-1980s .period-text p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 1.75rem;
  opacity: 1;
}

.period-1980s.visible .period-text p:nth-child(1) {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.period-1980s.visible .period-text p:nth-child(2) {
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

.period-1980s .period-text strong {
  color: var(--period-1980s);
  font-weight: 600;
}

/* Women judo section */
.women-judo-section {
  margin-top: 3rem;
  padding: 2.5rem;
  background: #ffffff;
  border: 1px solid rgba(123, 31, 162, 0.15);
  border-radius: 16px;
  transition: all 0.3s ease;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.period-1980s.visible .women-judo-section {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

/* Фіолетовий градієнт фон при hover */
.women-judo-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(123, 31, 162, 0.03) 0%, rgba(156, 39, 176, 0.03) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.women-judo-section:hover {
  border-color: rgba(123, 31, 162, 0.3);
  box-shadow: 0 8px 32px rgba(123, 31, 162, 0.12);
}

.women-judo-section:hover::before {
  opacity: 1;
}

.women-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.women-icon {
  font-size: 2rem;
  background: rgba(123, 31, 162, 0.08);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.women-judo-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.women-judo-section > p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.women-judo-section strong {
  color: var(--period-1980s);
  font-weight: 600;
}

/* Champions list */
.champions-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  position: relative;
  z-index: 1;
}

.champions-list li {
  padding: 1rem 0;
  padding-left: 2.5rem;
  position: relative;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.champions-list li:last-child {
  border-bottom: none;
}

.champions-list li::before {
  content: '🥋';
  position: absolute;
  left: 0;
  top: 1rem;
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.champions-list li:hover {
  padding-left: 3rem;
  color: var(--color-text);
}

.champions-list li:hover::before {
  transform: scale(1.2);
}

.champions-list li strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Decade highlight card */
.period-1980s .period-visual {
  opacity: 1;
}

.period-1980s.visible .period-visual {
  animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

.decade-highlight {
  background: #ffffff;
  border: 1px solid rgba(123, 31, 162, 0.15);
  padding: 3rem 2rem;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Фіолетовий градієнт фон при hover */
.decade-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(123, 31, 162, 0.05) 0%, rgba(156, 39, 176, 0.05) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.decade-highlight:hover {
  border-color: var(--period-1980s);
  box-shadow: 0 12px 40px rgba(123, 31, 162, 0.15);
  transform: translateY(-6px);
}

.decade-highlight:hover::before {
  opacity: 1;
}

.highlight-icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, rgba(123, 31, 162, 0.1) 0%, rgba(156, 39, 176, 0.1) 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.decade-highlight:hover .highlight-icon-wrapper {
  transform: scale(1.1);
}

.highlight-icon-wrapper .material-symbols-outlined {
  font-size: 3rem;
  color: var(--period-1980s);
}

.decade-highlight h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.decade-highlight p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .period-1980s .period-content-split {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .period-1980s .period-visual {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .period-1980s {
    padding: 5rem 0;
  }

  .period-1980s .period-header {
    margin-bottom: 3rem;
  }

  .period-1980s .period-title {
    font-size: 2rem;
  }

  .period-1980s .period-text p {
    font-size: 1rem;
  }

  .period-1980s .period-content-split {
    gap: 2.5rem;
  }

  .women-judo-section {
    padding: 2rem;
    margin-top: 2.5rem;
  }

  .women-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .women-judo-section h3 {
    font-size: 1.3rem;
  }

  .women-judo-section > p {
    font-size: 1rem;
  }

  .champions-list li {
    font-size: 1rem;
    padding-left: 2rem;
  }

  .decade-highlight {
    padding: 2.5rem 2rem;
  }

  .highlight-icon-wrapper {
    width: 64px;
    height: 64px;
  }

  .highlight-icon-wrapper .material-symbols-outlined {
    font-size: 2.5rem;
  }

  .decade-highlight h4 {
    font-size: 1.3rem;
  }

  .decade-highlight p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .women-judo-section {
    padding: 1.5rem;
  }

  .women-icon {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .champions-list li {
    padding-left: 1.75rem;
  }
}
/* ============================================
   PERIOD 5: 1990s - INDEPENDENCE
   ============================================ */

.independence-era {
  background: #ffffff;
  position: relative;
  padding: 8rem 0;
}

/* Синя декоративна лінія */
.independence-era::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--period-1990s), transparent);
  opacity: 1.4;
}

/* Period inner wrapper з анімацією */
.independence-era .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.independence-era.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.independence-era .period-header {
  text-align: center;
  margin-bottom: 4rem;
}

.independence-era .period-year {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(2, 119, 189, 0.08);
  border: 1px solid rgba(2, 119, 189, 0.15);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--period-1990s);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.independence-era.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.independence-era .period-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 1;
}

.independence-era.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.independence-era .period-content {
  max-width: 1000px;
  margin: 0 auto;
}

/* Foundation block */
.foundation-block {

  background: #ffffff;
  border: 1px solid rgba(2, 119, 189, 0.15);
  padding: 3rem;
  border-radius: 20px;
  margin-bottom: 4rem;
  transition: all 0.3s ease;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.independence-era.visible .foundation-block {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* Синій градієнт фон при hover */
.foundation-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(2, 119, 189, 0.03) 0%, rgba(30, 136, 229, 0.03) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.foundation-block:hover {
  border-color: var(--period-1990s);
  box-shadow: 0 12px 40px rgba(2, 119, 189, 0.12);
}

.foundation-block:hover::before {
  opacity: 1;
}

.foundation-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.foundation-date {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--period-1990s);
  padding: 0.75rem 1.75rem;
  background: rgba(2, 119, 189, 0.08);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
}

.foundation-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.foundation-leaders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

.leader-card {
  padding: 1.5rem;
  background: rgba(2, 119, 189, 0.04);
  border: 1px solid rgba(2, 119, 189, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.leader-card:hover {
  background: rgba(2, 119, 189, 0.06);
  border-color: rgba(2, 119, 189, 0.2);
  transform: translateY(-2px);
}

.leader-role {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--period-1990s);
  margin-bottom: 0.5rem;
}

.leader-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

/* International debut */
.international-debut {
  margin: 4rem 0;
  opacity: 1;
}

.independence-era.visible .international-debut {
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

.international-debut h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.international-debut p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-light);
}

.international-debut strong {
  color: var(--period-1990s);
  font-weight: 600;
}

/* First medals */
.first-medals {
  margin-top: 4rem;
  opacity: 1;
}

.independence-era.visible .first-medals {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.first-medals h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2.5rem;
  text-align: center;
}

.medals-timeline {
  display: grid;
  gap: 1.5rem;
}

.medal-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.medal-item:hover {
  border-color: rgba(2, 119, 189, 0.3);
  box-shadow: 0 8px 24px rgba(2, 119, 189, 0.1);
  transform: translateX(8px);
}

.medal-year {
  font-size: 2rem;
  font-weight: 800;
  color: var(--period-1990s);
  text-align: center;
  letter-spacing: -0.02em;
}

.medal-content {
  position: relative;
}

.medal-badge.bronze-small {
  font-size: 1.5rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.medal-content strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.medal-content p {
  font-size: 1.05rem;
  color: var(--color-text-light);
  margin: 0;
  line-height: 1.5;
}

/* Leadership change */
.leadership-change {
  margin-top: 4rem;
  text-align: center;
  opacity: 1;
}

.independence-era.visible .leadership-change {
  animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

.note-text {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: #ffffff;
  border: 1px solid rgba(2, 119, 189, 0.15);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.note-text:hover {
  border-color: var(--period-1990s);
  box-shadow: 0 4px 16px rgba(2, 119, 189, 0.1);
}

.note-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.note-text p {
  font-size: 1.05rem;
  color: var(--color-text-light);
  margin: 0;
  text-align: left;
}

.note-text strong {
  color: var(--period-1990s);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
  .independence-era {
    padding: 5rem 0;
  }

  .independence-era .period-header {
    margin-bottom: 3rem;
  }

  .independence-era .period-title {
    font-size: 2rem;
  }

  .foundation-block {
    padding: 2rem;
    margin-bottom: 3rem;
  }

  .foundation-icon {
    font-size: 2.5rem;
  }

  .foundation-date {
    font-size: 1.1rem;
    padding: 0.6rem 1.5rem;
  }

  .foundation-title {
    font-size: 1.5rem;
  }

  .foundation-leaders {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .international-debut {
    margin: 3rem 0;
  }

  .international-debut h3 {
    font-size: 1.5rem;
  }

  .international-debut p {
    font-size: 1rem;
  }

  .first-medals {
    margin-top: 3rem;
  }

  .first-medals h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .medal-item {
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .medal-year {
    font-size: 1.5rem;
  }

  .medal-content strong {
    font-size: 1.1rem;
  }

  .medal-content p {
    font-size: 0.95rem;
  }

  .leadership-change {
    margin-top: 3rem;
  }

  .note-text {
    flex-direction: column;
    padding: 1.5rem;
    text-align: center;
  }

  .note-text p {
    text-align: center;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .foundation-block {
    padding: 1.5rem;
  }

  .medal-item {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .medal-year {
    margin-bottom: 1rem;
  }

  .note-text {
    padding: 1.25rem;
  }
}

/* ============================================
   PERIOD 6: 2000s - OLYMPIC SUCCESS
   ============================================ */

.olympic-success {
  background: #ffffff;
  padding: 8rem 0;
}

/* Period inner wrapper з анімацією */
.olympic-success .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.olympic-success.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.olympic-success .period-header {
  text-align: center;
  margin-bottom: 4rem;
}

.olympic-success .period-year {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid rgba(46, 125, 50, 0.15);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--period-2000s);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.olympic-success.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.olympic-success .period-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 1;
}

.olympic-success.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

/* Olympic medals showcase */
.olympic-medals-showcase {
  margin-bottom: 5rem;
  opacity: 1;
}

.olympic-success.visible .olympic-medals-showcase {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.showcase-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
}

.olympic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.olympic-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.olympic-card:hover {
  border-color: rgba(46, 125, 50, 0.3);
  box-shadow: 0 12px 40px rgba(46, 125, 50, 0.12);
  transform: translateY(-8px);
}

.olympic-year {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--period-2000s);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.olympic-city {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.olympic-athlete img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  border: 3px solid rgba(46, 125, 50, 0.2);
  transition: all 0.3s ease;
}

.olympic-card:hover .olympic-athlete img {
  border-color: var(--period-2000s);
  transform: scale(1.05);
}

.olympic-athlete strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.medal-badge {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.medal-badge.gold {
  background: rgba(212, 175, 55, 0.15);
  color: var(--color-gold-dark);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.medal-badge.silver {
  background: rgba(192, 192, 192, 0.15);
  color: #666;
  border: 1px solid rgba(192, 192, 192, 0.4);
}

.medal-badge.bronze {
  background: rgba(205, 127, 50, 0.15);
  color: #8b4513;
  border: 1px solid rgba(205, 127, 50, 0.3);
}

/* Championship highlights */
.championship-highlights {
  margin: 5rem 0;
  opacity: 1;
}

.olympic-success.visible .championship-highlights {
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

.championship-highlights h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2rem;
}

.champions-list-modern {
  display: grid;
  gap: 1rem;
}

.modern-champion {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-champion:hover {
  border-color: rgba(46, 125, 50, 0.3);
  box-shadow: 0 4px 16px rgba(46, 125, 50, 0.1);
  transform: translateX(8px);
}

.champion-icon {
  font-size: 2rem;
  background: rgba(46, 125, 50, 0.08);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.modern-champion:hover .champion-icon {
  background: rgba(46, 125, 50, 0.15);
  transform: scale(1.1);
}

.champion-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.champion-info strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.champion-info span {
  font-size: 0.95rem;
  color: var(--color-text-light);
}

/* Event hosting */
.event-hosting {
  margin: 5rem 0;
  padding: 3rem;
  background: #ffffff;
  border: 1px solid rgba(46, 125, 50, 0.15);
  border-radius: 20px;
  transition: all 0.3s ease;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.olympic-success.visible .event-hosting {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.event-hosting::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.03) 0%, rgba(67, 160, 71, 0.03) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.event-hosting:hover {
  border-color: var(--period-2000s);
  box-shadow: 0 12px 40px rgba(46, 125, 50, 0.12);
}

.event-hosting:hover::before {
  opacity: 1;
}

.event-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.event-hosting h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.event-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.event-description strong {
  color: var(--period-2000s);
  font-weight: 600;
}

.award-badge {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid rgba(46, 125, 50, 0.15);
  border-radius: 16px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.award-badge:hover {
  background: rgba(46, 125, 50, 0.12);
}

.award-icon {
  width: 56px;
  height: 56px;
  background: var(--period-2000s);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.award-icon .material-symbols-outlined {
  font-size: 2rem;
  color: white;
}

.award-badge p {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

/* Team success */
.team-success {
  margin-top: 5rem;
  opacity: 1;
}

.olympic-success.visible .team-success {
  animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

.team-success h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2rem;
}

.team-achievements {
  list-style: none;
  padding: 0;
}

.team-achievements li {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.team-achievements li:last-child {
  margin-bottom: 0;
}

.team-achievements li:hover {
  border-color: rgba(46, 125, 50, 0.3);
  box-shadow: 0 4px 16px rgba(46, 125, 50, 0.1);
  transform: translateX(4px);
}

.achievement-year {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--period-2000s);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.achievement-text {
  font-size: 1.05rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

.achievement-text strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .olympic-success {
    padding: 5rem 0;
  }

  .olympic-success .period-header {
    margin-bottom: 3rem;
  }

  .olympic-success .period-title {
    font-size: 2rem;
  }

  .showcase-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .olympic-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .olympic-card {
    padding: 1.5rem;
  }

  .olympic-athlete img {
    width: 140px;
    height: 140px;
  }

  .championship-highlights h3,
  .event-hosting h3,
  .team-success h3 {
    font-size: 1.5rem;
  }

  .modern-champion {
    padding: 1.25rem;
    gap: 1rem;
  }

  .champion-icon {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .event-hosting {
    padding: 2rem;
    margin: 3rem 0;
  }

  .event-icon {
    font-size: 2.5rem;
  }

  .event-description {
    font-size: 1rem;
  }

  .award-badge {
    padding: 1.5rem;
    gap: 1rem;
  }

  .award-icon {
    width: 48px;
    height: 48px;
  }

  .team-achievements li {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    text-align: center;
  }

  .achievement-year {
    font-size: 1.5rem;
  }

  .achievement-text {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .olympic-card {
    padding: 1.25rem;
  }

  .modern-champion {
    flex-direction: column;
    text-align: center;
  }

  .event-hosting {
    padding: 1.5rem;
  }
}
/* ============================================
   PERIOD 7: 2009-2011 - WORLD CHAMPIONS
   ============================================ */

.world-champions {
  background: #ffffff;
  position: relative;
  padding: 8rem 0;
}

/* Червона декоративна лінія */
.world-champions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--period-2009), transparent);
  opacity: 1.4;
}

/* Period inner wrapper з анімацією */
.world-champions .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.world-champions.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.world-champions .period-header {
  text-align: center;
  margin-bottom: 4rem;
}

.world-champions .period-year {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(216, 67, 21, 0.08);
  border: 1px solid rgba(216, 67, 21, 0.15);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--period-2009);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.world-champions.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.world-champions .period-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 1;
}

.world-champions.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

/* World champion showcase */
.world-champion-showcase {
  background: #ffffff;
  border: 1px solid rgba(216, 67, 21, 0.15);
  padding: 3rem;
  border-radius: 20px;
  margin-bottom: 5rem;
  transition: all 0.3s ease;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.world-champions.visible .world-champion-showcase {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.world-champion-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(216, 67, 21, 0.03) 0%, rgba(255, 87, 34, 0.03) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.world-champion-showcase:hover {
  border-color: var(--period-2009);
  box-shadow: 0 12px 40px rgba(216, 67, 21, 0.12);
}

.world-champion-showcase:hover::before {
  opacity: 1;
}

.wc-year {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--period-2009);
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.wc-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.wc-athlete {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.wc-athlete img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.wc-athlete img:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transform: scale(1.02);
}

.wc-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wc-name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.wc-achievement {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--period-2009);
  padding: 1rem 1.5rem;
  background: rgba(216, 67, 21, 0.08);
  border-radius: 12px;
  display: inline-block;
  margin: 0;
}

.wc-details {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0;
}

/* Junior dominance */
.junior-dominance {
  margin: 5rem 0;
  opacity: 1;
}

.world-champions.visible .junior-dominance {
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

.junior-dominance h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
}

.junior-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.junior-stat-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 2.5rem 2rem;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.junior-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--period-2009);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.junior-stat-card:hover {
  border-color: rgba(216, 67, 21, 0.3);
  box-shadow: 0 12px 40px rgba(216, 67, 21, 0.12);
  transform: translateY(-6px);
}

.junior-stat-card:hover::before {
  transform: scaleX(1);
}

.stat-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1.5rem;
}

.junior-stat-card strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.junior-stat-card p {
  font-size: 1.05rem;
  color: var(--color-text-light);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.stat-detail {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--period-2009);
  margin-top: 0.75rem;
}

.junior-champions {
  display: grid;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.junior-medal {
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(216, 67, 21, 0.15);
  border-radius: 12px;
  font-size: 1.05rem;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.junior-medal:hover {
  background: rgba(216, 67, 21, 0.03);
  border-color: var(--period-2009);
  transform: translateX(8px);
}

.junior-medal strong {
  color: var(--color-text);
  font-weight: 700;
}

/* Year 2011 highlight */
.year-2011-highlight {
  background: #ffffff;
  border: 2px solid var(--period-2009);
  padding: 3rem;
  border-radius: 20px;
  margin: 5rem 0;
  transition: all 0.3s ease;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.world-champions.visible .year-2011-highlight {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.year-2011-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(216, 67, 21, 0.05) 0%, rgba(255, 87, 34, 0.05) 100%);
}

.year-2011-highlight:hover {
  box-shadow: 0 16px 48px rgba(216, 67, 21, 0.15);
}

.year-2011-highlight h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.highlight-intro {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--period-2009);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.medals-2011 {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

.medal-2011-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1.5rem;
  background: rgba(216, 67, 21, 0.08);
  border: 1px solid rgba(216, 67, 21, 0.15);
  border-radius: 12px;
  font-size: 1.05rem;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.medal-2011-item:hover {
  background: rgba(216, 67, 21, 0.12);
  transform: translateX(4px);
}

.medal-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  margin-right: 1rem;
}

.medal-2011-item strong {
  color: var(--color-text);
  font-weight: 700;
}

/* World cadets Kyiv */
.world-cadets-kyiv {
  margin: 5rem 0;
  padding: 3rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: all 0.3s ease;
  opacity: 1;
}

.world-champions.visible .world-cadets-kyiv {
  animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

.world-cadets-kyiv:hover {
  border-color: rgba(216, 67, 21, 0.3);
  box-shadow: 0 12px 40px rgba(216, 67, 21, 0.1);
}

.world-cadets-kyiv h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.world-cadets-kyiv > p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 2rem;
}

.world-cadets-kyiv strong {
  color: var(--period-2009);
  font-weight: 600;
}

.kyiv-award {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem;
  background: rgba(216, 67, 21, 0.08);
  border: 1px solid rgba(216, 67, 21, 0.15);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.kyiv-award:hover {
  background: rgba(216, 67, 21, 0.12);
}

.kyiv-award .material-symbols-outlined {
  font-size: 2.5rem;
  color: var(--period-2009);
  flex-shrink: 0;
  background: rgba(216, 67, 21, 0.1);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.kyiv-award p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

/* Coach recognition */
.coach-recognition {
  margin-top: 5rem;
  opacity: 1;
}

.world-champions.visible .coach-recognition {
  animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

.coach-award {
  padding: 2.5rem;
  background: #ffffff;
  border: 2px solid var(--color-gold);
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.coach-award::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
}

.coach-award:hover {
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.2);
  transform: translateY(-4px);
}

.coach-award h4 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.coach-award p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
  position: relative;
  z-index: 1;
}

.coach-award strong {
  color: var(--color-gold-dark);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1024px) {
  .wc-athlete {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .wc-athlete img {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .world-champions {
    padding: 5rem 0;
  }

  .world-champions .period-header {
    margin-bottom: 3rem;
  }

  .world-champions .period-title {
    font-size: 2rem;
  }

  .world-champion-showcase {
    padding: 2rem;
    margin-bottom: 3rem;
  }

  .wc-year {
    font-size: 2rem;
  }

  .wc-title {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }

  .wc-name {
    font-size: 1.6rem;
  }

  .wc-achievement {
    font-size: 1.1rem;
    padding: 0.75rem 1.25rem;
  }

  .wc-details {
    font-size: 1rem;
  }

  .junior-dominance h3,
  .world-cadets-kyiv h3 {
    font-size: 1.5rem;
  }

  .junior-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .junior-stat-card {
    padding: 2rem 1.5rem;
  }

  .year-2011-highlight {
    padding: 2rem;
    margin: 3rem 0;
  }

  .year-2011-highlight h3 {
    font-size: 1.5rem;
  }

  .highlight-intro {
    font-size: 1.1rem;
  }

  .world-cadets-kyiv {
    padding: 2rem;
    margin: 3rem 0;
  }

  .kyiv-award {
    padding: 1.5rem;
    gap: 1rem;
  }

  .kyiv-award .material-symbols-outlined {
    font-size: 2rem;
    width: 48px;
    height: 48px;
  }

  .coach-recognition {
    margin-top: 3rem;
  }

  .coach-award {
    padding: 2rem;
  }

  .coach-award h4 {
    font-size: 1.4rem;
  }

  .coach-award p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .world-champion-showcase {
    padding: 1.5rem;
  }

  .wc-athlete {
    gap: 1.5rem;
  }

  .junior-medal,
  .medal-2011-item {
    padding: 1.25rem;
    font-size: 1rem;
  }

  .year-2011-highlight {
    padding: 1.5rem;
  }

  .world-cadets-kyiv {
    padding: 1.5rem;
  }
}

/* World cadets Kyiv */
.world-cadets-kyiv {
  margin: 5rem 0;
  padding: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: all 0.3s ease;
  opacity: 1;
  overflow: hidden;
}

.world-champions.visible .world-cadets-kyiv {
  animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

.world-cadets-kyiv:hover {
  border-color: rgba(216, 67, 21, 0.3);
  box-shadow: 0 12px 40px rgba(216, 67, 21, 0.1);
}

.kyiv-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.kyiv-image {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.kyiv-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.world-cadets-kyiv:hover .kyiv-image img {
  transform: scale(1.05);
}

.kyiv-text {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kyiv-text h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.kyiv-text > p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 2rem;
}

.kyiv-text strong {
  color: var(--period-2009);
  font-weight: 600;
}

.kyiv-award {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem;
  background: rgba(216, 67, 21, 0.08);
  border: 1px solid rgba(216, 67, 21, 0.15);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.kyiv-award:hover {
  background: rgba(216, 67, 21, 0.12);
}

.kyiv-award-icon {
  flex-shrink: 0;
}

.kyiv-award-icon .material-symbols-outlined {
  font-size: 2.5rem;
  color: var(--period-2009);
  background: rgba(216, 67, 21, 0.1);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.kyiv-award p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

/* Responsive для Kyiv section */
@media (max-width: 1024px) {
  .kyiv-content-wrapper {
    grid-template-columns: 1fr;
  }

  .kyiv-image {
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  .world-cadets-kyiv {
    margin: 3rem 0;
  }

  .kyiv-image {
    min-height: 250px;
  }

  .kyiv-text {
    padding: 2rem;
  }

  .kyiv-text h3 {
    font-size: 1.5rem;
  }

  .kyiv-text > p {
    font-size: 1rem;
  }

  .kyiv-award {
    padding: 1.5rem;
    gap: 1rem;
  }

  .kyiv-award-icon .material-symbols-outlined {
    font-size: 2rem;
    width: 48px;
    height: 48px;
  }

  .kyiv-award p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .kyiv-image {
    min-height: 200px;
  }

  .kyiv-text {
    padding: 1.5rem;
  }

  .kyiv-award {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================
   PERIOD 8: 2012-2016 - CHALLENGES
   ============================================ */

.period-2012 {
  background: #ffffff;
  padding: 8rem 0;
}

/* Period inner wrapper з анімацією */
.period-2012 .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.period-2012.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.period-2012 .period-header {
  text-align: center;
  margin-bottom: 4rem;
}

.period-2012 .period-year {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(117, 117, 117, 0.08);
  border: 1px solid rgba(117, 117, 117, 0.15);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #757575;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.period-2012.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.period-2012 .period-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 1;
}

.period-2012.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.period-2012 .period-content {
  max-width: 900px;
  margin: 0 auto;
}

/* Challenges intro */
.challenges-intro {
  margin-bottom: 3rem;
  opacity: 1;
}

.period-2012.visible .challenges-intro {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.challenges-intro p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 1.75rem;
}

.challenges-intro strong {
  color: var(--color-primary);
  font-weight: 600;
}

/* Bilodid highlight */
.bilodid-highlight {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem;
  background: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: 20px;
  margin: 3rem 0;
  transition: all 0.3s ease;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.period-2012.visible .bilodid-highlight {
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

.bilodid-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 86, 179, 0.03) 0%, rgba(30, 136, 229, 0.03) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.bilodid-highlight:hover {
  box-shadow: 0 12px 40px rgba(0, 86, 179, 0.15);
  transform: translateY(-4px);
}

.bilodid-highlight:hover::before {
  opacity: 1;
}

.bilodid-icon {
  font-size: 4rem;
  background: linear-gradient(135deg, rgba(0, 86, 179, 0.1) 0%, rgba(30, 136, 229, 0.1) 100%);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.bilodid-highlight:hover .bilodid-icon {
  transform: scale(1.1) rotate(5deg);
}

.bilodid-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.bilodid-content h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.bilodid-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
}

/* Youth success */
.youth-success {
  margin-top: 3rem;
  padding: 2.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: all 0.3s ease;
  opacity: 1;
}

.period-2012.visible .youth-success {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.youth-success:hover {
  border-color: rgba(0, 86, 179, 0.3);
  box-shadow: 0 8px 24px rgba(0, 86, 179, 0.1);
}

.youth-success h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2rem;
}

.achievements-compact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.achievements-compact li {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.achievements-compact li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.achievements-compact li:first-child {
  padding-top: 0;
}

.achievements-compact li:hover {
  padding-left: 1rem;
}

.achievement-year-small {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary);
  min-width: 60px;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.achievement-text-small {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
}

.achievement-text-small::before {
  content: '→';
  margin-right: 0.75rem;
  color: var(--color-primary);
  font-weight: 700;
  transition: transform 0.3s ease;
  display: inline-block;
}

.achievements-compact li:hover .achievement-text-small::before {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
  .period-2012 {
    padding: 5rem 0;
  }

  .period-2012 .period-header {
    margin-bottom: 3rem;
  }

  .period-2012 .period-title {
    font-size: 2rem;
  }

  .challenges-intro p {
    font-size: 1rem;
  }

  .bilodid-highlight {
    flex-direction: column;
    text-align: center;
    padding: 2rem;
    margin: 2.5rem 0;
  }

  .bilodid-icon {
    width: 64px;
    height: 64px;
    font-size: 3rem;
  }

  .bilodid-content h3 {
    font-size: 1.5rem;
  }

  .bilodid-content p {
    font-size: 1rem;
  }

  .youth-success {
    padding: 2rem;
    margin-top: 2.5rem;
  }

  .youth-success h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .achievements-compact li {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 0;
  }

  .achievement-year-small {
    font-size: 1rem;
    min-width: auto;
  }

  .achievement-text-small {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .bilodid-highlight {
    padding: 1.5rem;
  }

  .bilodid-icon {
    width: 56px;
    height: 56px;
    font-size: 2.5rem;
  }

  .youth-success {
    padding: 1.5rem;
  }

  .achievements-compact li {
    padding: 1rem 0;
  }
}

/* ============================================
   PERIOD 9: 2017-PRESENT - MODERN ERA
   ============================================ */

.modern-era {
  background: #ffffff;
  position: relative;
  padding: 8rem 0;
  overflow: hidden;
}

/* Декоративний градієнт фон */
.modern-era::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: linear-gradient(180deg, rgba(196, 30, 58, 0.03) 0%, transparent 100%);
  pointer-events: none;
}

/* Period inner wrapper з анімацією */
.modern-era .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  position: relative;
  z-index: 1;
}

.modern-era.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.modern-era .period-header {
  text-align: center;
  margin-bottom: 5rem;
}

.modern-era .period-year {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, rgba(196, 30, 58, 0.1) 0%, rgba(233, 30, 58, 0.1) 100%);
  border: 2px solid rgba(196, 30, 58, 0.2);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--period-2017);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.modern-era.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.modern-era .period-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text);
  opacity: 1;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--period-2017) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modern-era.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

/* Bilodid Phenomenon - HERO SECTION */
.bilodid-phenomenon {
  margin-bottom: 6rem;
  opacity: 1;
}

.modern-era.visible .bilodid-phenomenon {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.phenomenon-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}

.phenomenon-title::after {
  content: '';
  display: block;
  width: 100px;
  height: 4px;
  background: linear-gradient(to right, var(--period-2017), transparent);
  margin: 1rem auto 0;
  border-radius: 2px;
}

.bilodid-showcase {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 4rem;
  align-items: start;
  background: #ffffff;
  border: 2px solid rgba(196, 30, 58, 0.15);
  padding: 3rem;
  border-radius: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.bilodid-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(196, 30, 58, 0.02) 0%, transparent 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.bilodid-showcase:hover {
  border-color: var(--period-2017);
  box-shadow: 0 16px 48px rgba(196, 30, 58, 0.12);
}

.bilodid-showcase:hover::before {
  opacity: 1;
}

.bilodid-image-wrapper {
  position: relative;
  z-index: 1;
}

.bilodid-image-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.bilodid-showcase:hover .bilodid-image-wrapper img {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.image-decoration {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--period-2017) 0%, #e91e3a 100%);
  border-radius: 20px;
  opacity: 1.1;
  z-index: -1;
}

.bilodid-achievements {
  position: relative;
  z-index: 1;
}

.achievement-major {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  background: linear-gradient(135deg, var(--period-2017) 0%, #e91e3a 100%);
  color: white;
  border-radius: 16px;
  margin-bottom: 2.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(196, 30, 58, 0.25);
  transition: transform 0.3s ease;
}

.achievement-major:hover {
  transform: translateY(-4px);
}

.achievement-icon {
  font-size: 3rem;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.achievement-list {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.achievement-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  background: rgba(196, 30, 58, 0.04);
  border: 1px solid rgba(196, 30, 58, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.achievement-item:hover {
  background: rgba(196, 30, 58, 0.08);
  border-color: rgba(196, 30, 58, 0.2);
  transform: translateX(8px);
}

.highlight-achievement {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.achievement-emoji {
  font-size: 2rem;
  flex-shrink: 0;
}

.achievement-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.achievement-content strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.achievement-content span {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

.bilodid-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(196, 30, 58, 0.06);
  border-left: 3px solid var(--period-2017);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.bilodid-note:hover {
  background: rgba(196, 30, 58, 0.1);
}

.note-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.bilodid-note p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
  font-style: italic;
}

.bilodid-note strong {
  color: var(--period-2017);
  font-weight: 600;
}

/* Team 2017 */
.team-2017 {
  margin: 6rem 0;
  opacity: 1;
}

.modern-era.visible .team-2017 {
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

.team-2017 h3 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
}

.team-medals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.team-medal-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 2.5rem 2rem;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.team-medal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #ccc;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.gold-card::before { background: linear-gradient(to right, #d4af37, #ffd700); }
.silver-card::before { background: linear-gradient(to right, #c0c0c0, #e8e8e8); }
.bronze-card::before { background: linear-gradient(to right, #cd7f32, #e8a87c); }

.team-medal-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.team-medal-card:hover::before {
  transform: scaleX(1);
}

.medal-icon-large {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.team-medal-card:hover .medal-icon-large {
  transform: scale(1.2) rotate(10deg);
}

.team-medal-card strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.medal-description {
  display: block;
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* European Games */
.european-games {
  padding: 3.5rem;
  background: #ffffff;
  border: 2px solid rgba(0, 86, 179, 0.15);
  border-radius: 24px;
  margin: 6rem 0;
  transition: all 0.3s ease;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.modern-era.visible .european-games {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.european-games::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 86, 179, 0.02) 0%, transparent 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.european-games:hover {
  border-color: var(--color-primary);
  box-shadow: 0 16px 48px rgba(0, 86, 179, 0.12);
}

.european-games:hover::before {
  opacity: 1;
}

.games-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.games-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(0, 86, 179, 0.1);
  border: 1px solid rgba(0, 86, 179, 0.2);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.games-header h3 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.games-champions {
  display: flex;
  justify-content: center;
  gap: 5rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.games-champion {
  text-align: center;
  transition: transform 0.3s ease;
}

.games-champion:hover {
  transform: translateY(-8px);
}

.champion-medal {
  font-size: 5rem;
  display: block;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.games-champion:hover .champion-medal {
  transform: scale(1.2) rotate(10deg);
}

.games-champion strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.games-champion span {
  display: block;
  font-size: 1rem;
  color: var(--color-text-light);
  font-weight: 500;
}

/* Pandemic Olympics */
.pandemic-olympics {
  margin: 6rem 0;
  opacity: 1;
}

.modern-era.visible .pandemic-olympics {
  animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

.pandemic-header {
  text-align: center;
  margin-bottom: 2rem;
}

.pandemic-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.2);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #f57c00;
  margin-bottom: 1rem;
}

.pandemic-header h3 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.pandemic-intro {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-light);
  text-align: center;
  max-width: 900px;
  margin: 0 auto 3rem;
}

.tokyo-medals {
  display: grid;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.tokyo-medal {
  padding: 2.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: all 0.3s ease;
}

.tokyo-medal:hover {
  border-color: rgba(196, 30, 58, 0.3);
  box-shadow: 0 12px 40px rgba(196, 30, 58, 0.1);
  transform: translateY(-4px);
}

.historic-medal {
  border: 2px solid rgba(212, 175, 55, 0.3);
  background: linear-gradient(to bottom, rgba(255, 215, 0, 0.05) 0%, #ffffff 100%);
}

.tokyo-medal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.olympic-rings {
  font-size: 1.5rem;
  letter-spacing: -0.3rem;
}

.historic-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(255, 215, 0, 0.15) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tokyo-medal strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.athlete-age {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.tokyo-medal .medal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  margin: 1rem 0;
}

.tokyo-medal .medal-badge.bronze {
  background: rgba(205, 127, 50, 0.1);
  border: 1px solid rgba(205, 127, 50, 0.3);
}

.medal-emoji {
  font-size: 1.75rem;
}

.tokyo-medal .medal-badge span:last-child {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.medal-note {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  font-style: italic;
  margin: 1rem 0 0;
  padding: 1rem;
  background: rgba(212, 175, 55, 0.08);
  border-radius: 8px;
}

/* Current Leadership */
.current-leadership {
  margin-top: 6rem;
  padding: 3.5rem;
  background: #ffffff;
  border: 2px solid rgba(196, 30, 58, 0.15);
  border-radius: 24px;
  transition: all 0.3s ease;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.modern-era.visible .current-leadership {
  animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

.current-leadership::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(196, 30, 58, 0.02) 0%, transparent 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.current-leadership:hover {
  border-color: var(--period-2017);
  box-shadow: 0 16px 48px rgba(196, 30, 58, 0.12);
}

.current-leadership:hover::before {
  opacity: 1;
}

.leadership-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}

.leadership-icon {
  font-size: 3rem;
  background: linear-gradient(135deg, rgba(196, 30, 58, 0.1) 0%, rgba(233, 30, 58, 0.1) 100%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  flex-shrink: 0;
}

.leadership-header h3 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.president-card {
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(196, 30, 58, 0.05) 0%, transparent 100%);
  border: 2px solid rgba(196, 30, 58, 0.15);
  border-radius: 16px;
  margin-bottom: 2.5rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.president-card:hover {
  border-color: var(--period-2017);
  transform: translateY(-4px);
}

.president-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.president-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: var(--period-2017);
  color: white;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: fit-content;
}

.president-info strong {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
}

.president-date {
  font-size: 0.95rem;
  color: var(--color-text-light);
  font-weight: 500;
}

.leadership-structure {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.leader-modern {
  padding: 1.75rem;
  background: rgba(196, 30, 58, 0.04);
  border: 1px solid rgba(196, 30, 58, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.leader-modern:hover {
  background: rgba(196, 30, 58, 0.08);
  border-color: rgba(196, 30, 58, 0.2);
  transform: translateX(8px);
}

.leader-position {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--period-2017);
  margin-bottom: 0.75rem;
}

.leader-modern strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
}

.honorary-note {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.honorary-note:hover {
  border-color: var(--color-gold);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
}

.honorary-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.honorary-note p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

.honorary-note strong {
  color: var(--color-gold-dark);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1200px) {
  .bilodid-showcase {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .bilodid-image-wrapper img {
    max-width: 500px;
    margin: 0 auto;
    display: block;
  }
}

@media (max-width: 768px) {
  .modern-era {
    padding: 5rem 0;
  }

  .modern-era .period-header {
    margin-bottom: 3rem;
  }

  .modern-era .period-title {
    font-size: 2.5rem;
  }

  .bilodid-phenomenon,
  .team-2017,
  .european-games,
  .pandemic-olympics,
  .current-leadership {
    margin: 3rem 0;
  }

  .phenomenon-title {
    font-size: 1.8rem;
  }

  .bilodid-showcase {
    padding: 2rem;
  }

  .achievement-major {
    font-size: 1.1rem;
    padding: 1.5rem;
  }

  .achievement-icon {
    font-size: 2.5rem;
  }

  .team-medals {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .european-games {
    padding: 2.5rem 2rem;
  }

  .games-champions {
    gap: 3rem;
  }

  .champion-medal {
    font-size: 4rem;
  }

  .current-leadership {
    padding: 2.5rem 2rem;
  }

  .leadership-header {
    flex-direction: column;
    text-align: center;
  }

  .president-card {
    padding: 2rem;
  }

  .honorary-note {
    flex-direction: column;
    text-align: center;
    padding: 1.75rem;
  }
}

@media (max-width: 480px) {
  .bilodid-showcase {
    padding: 1.5rem;
  }

  .achievement-major {
    flex-direction: column;
    text-align: center;
  }

  .team-medal-card {
    padding: 2rem 1.5rem;
  }

  .european-games {
    padding: 2rem 1.5rem;
  }

  .tokyo-medal {
    padding: 2rem 1.5rem;
  }

  .current-leadership {
    padding: 2rem 1.5rem;
  }
}

/* ============================================
   PERIOD 10: 2022 - WAR AND RESILIENCE
   ============================================ */

.war-era {
  background: #ffffff;
  position: relative;
  padding: 8rem 0;
  overflow: hidden;
}

/* Синьо-жовтий градієнт декор */
.war-era::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: linear-gradient(180deg, rgba(0, 87, 183, 0.02) 0%, rgba(255, 215, 0, 0.02) 50%, transparent 100%);
  pointer-events: none;
}

.war-era .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  position: relative;
  z-index: 1;
}

.war-era.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.war-era .period-header {
  text-align: center;
  margin-bottom: 5rem;
}

/* War Badge */
.war-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);
  border: 2px solid rgba(0, 87, 183, 0.2);
  border-radius: 100px;
  margin-bottom: 1rem;
  opacity: 1;
}

.war-era.visible .war-badge {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.ukraine-flag {
  font-size: 1.5rem;
}

.war-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #286cc6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.war-era .period-year {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: rgba(40, 108, 198, 0.08);
  border: 1px solid rgba(40, 122, 198, 0.15);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #2887c6;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.war-era.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.war-era .period-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 1rem;
  opacity: 1;
}

.war-era.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.period-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto;
  opacity: 1;
}

.war-era.visible .period-subtitle {
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

/* War Context */
.war-context {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 3rem;
  background: linear-gradient(135deg, rgba(198, 40, 40, 0.05) 0%, rgba(255, 87, 34, 0.05) 100%);
  border: 2px solid rgba(198, 40, 40, 0.15);
  border-radius: 20px;
  margin-bottom: 5rem;
  opacity: 1;
}

.war-era.visible .war-context {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.context-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
}

.context-text p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0;
}

/* Championship Block */
.championship-block {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
  transition: all 0.3s ease;
  opacity: 1;
}

.war-era.visible .championship-block:nth-of-type(1) {
  animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

.war-era.visible .championship-block:nth-of-type(2) {
  animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

.championship-block:hover {
  border-color: rgba(0, 87, 183, 0.3);
  box-shadow: 0 12px 40px rgba(0, 87, 183, 0.1);
}

.championship-header {
  text-align: center;
  margin-bottom: 3rem;
}

.champ-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.cadet-badge {
  background: rgba(156, 39, 176, 0.1);
  border: 1px solid rgba(156, 39, 176, 0.3);
  color: #7b1fa2;
}

.junior-badge {
  background: rgba(0, 87, 183, 0.1);
  border: 1px solid rgba(0, 87, 183, 0.3);
  color: #0057b7;
}

.championship-header h3 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.champ-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.location-icon {
  font-size: 1.25rem;
}

/* Medals Showcase */
.medals-showcase-2022 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 600px;
  margin: 0 auto 3rem;
}

.medal-count-card {
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  transition: transform 0.3s ease;
}

.medal-count-card:hover {
  transform: translateY(-6px);
}

.gold-count {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(212, 175, 55, 0.15) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.bronze-count {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.15) 0%, rgba(232, 168, 124, 0.15) 100%);
  border: 2px solid rgba(205, 127, 50, 0.3);
}

.count-number {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.gold-count .count-number { color: var(--color-gold-dark); }
.bronze-count .count-number { color: #8b4513; }

.count-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Champions 2022 */
.champions-2022 h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 2.5rem 0 1.5rem;
  text-align: center;
}

.champion-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.champion-mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.gold-mini {
  background: rgba(255, 215, 0, 0.1);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.champion-mini-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}

.mini-medal {
  font-size: 2.5rem;
}

.champion-mini-card strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

.mini-category {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Bronze List Compact */
.bronze-list-compact {
  display: grid;
  gap: 0.75rem;
  max-width: 600px;
  margin: 0 auto;
}

.bronze-item {
  padding: 1rem 1.5rem;
  background: rgba(205, 127, 50, 0.08);
  border: 1px solid rgba(205, 127, 50, 0.2);
  border-radius: 12px;
  font-size: 1.05rem;
  transition: all 0.3s ease;
}

.bronze-item:hover {
  background: rgba(205, 127, 50, 0.12);
  transform: translateX(8px);
}

.bronze-item strong {
  font-weight: 700;
  color: var(--color-text);
}

/* Championship Summary */
.championship-summary {
  margin-top: 3rem;
  padding: 2rem;
  background: rgba(0, 87, 183, 0.05);
  border-left: 4px solid #0057b7;
  border-radius: 12px;
}

.championship-summary p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

/* Highlight Athlete */
.highlight-athlete {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 3rem;
  align-items: center;
  margin: 3rem 0;
}

.athlete-photo-placeholder {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(0, 87, 183, 0.2);
}

.photo-icon {
  font-size: 5rem;
  opacity: 1.3;
}

.gold-badge-large {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold) 100%);
  color: white;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.athlete-info-2022 h4 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.athlete-category {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

.athlete-description {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
}

/* Other Medalists */
.other-medalists {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

.medalist-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.medalist-row:hover {
  background: rgba(0, 0, 0, 0.04);
  transform: translateX(8px);
}

.medal-emoji-large {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.medalist-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.medalist-info strong {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.medalist-info span {
  font-size: 1rem;
  color: var(--color-text-light);
}

/* Breakthrough Star */
.breakthrough-star {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 3rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 24px;
  margin-top: 5rem;
  opacity: 1;
}

.war-era.visible .breakthrough-star {
  animation: fadeInUp 0.8s ease-out 0.9s forwards;
}

.star-icon-large {
  font-size: 5rem;
  animation: pulse 2s ease-in-out infinite;
}

.star-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--color-gold-dark);
  color: white;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.star-content h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.star-content p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.star-stats {
  display: flex;
  gap: 2rem;
}

.star-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stat-icon {
  font-size: 2rem;
}

.star-stat span:last-child {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .war-era {
    padding: 5rem 0;
  }

  .war-context {
    flex-direction: column;
    padding: 2rem;
  }

  .context-icon {
    font-size: 3rem;
  }

  .championship-block {
    padding: 2rem;
  }

  .medals-showcase-2022 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .champion-cards-grid {
    grid-template-columns: 1fr;
  }

  .highlight-athlete {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .athlete-photo-placeholder {
    margin: 0 auto;
  }

  .breakthrough-star {
    flex-direction: column;
    text-align: center;
    padding: 2.5rem 2rem;
  }

  .star-stats {
    justify-content: center;
  }
}

/* Виправлені анімації для championship-block */
.war-era.visible .championship-block {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Затримки для кожного блоку */
.war-era.visible .championship-block:nth-child(3) {
  animation-delay: 0.7s;
}

.war-era.visible .championship-block:nth-child(4) {
  animation-delay: 0.8s;
}

/* Виправлена анімація для breakthrough-star */
.war-era.visible .breakthrough-star {
  animation: fadeInUp 0.8s ease-out 0.9s forwards;
}
/* Athlete Photo Wrapper - для Литвиненко */
.athlete-photo-wrapper {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(212, 175, 55, 0.3);
  position: relative;
  transition: all 0.3s ease;
}

.athlete-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.highlight-athlete:hover .athlete-photo-wrapper {
  border-color: var(--color-gold);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
}

.highlight-athlete:hover .athlete-photo-wrapper img {
  transform: scale(1.1);
}

/* Star Athlete Photo - для Віськова */
.star-athlete-photo {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}

.star-athlete-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(212, 175, 55, 0.4);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.breakthrough-star:hover .star-athlete-photo img {
  transform: scale(1.05);
  border-color: var(--color-gold);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.4);
}

.star-decoration {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--color-gold) 0%, #ffd700 100%);
  border-radius: 30%;
  opacity: 1.15;
  z-index: 1;
  animation: pulse 3s ease-in-out infinite;
}

/* Fallback якщо немає фото */
.athlete-photo-wrapper:empty::before,
.star-athlete-photo:empty::before {
  content: '👤';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  opacity: 1.3;
}

/* Видалити старий placeholder */
.athlete-photo-placeholder {
  display: none;
}

.star-icon-large {
  display: none;
}

/* Responsive для нових фото */
@media (max-width: 768px) {
  .athlete-photo-wrapper {
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }

  .star-athlete-photo {
    width: 180px;
    height: 180px;
    margin: 0 auto;
  }

  .breakthrough-star {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .athlete-photo-wrapper {
    width: 140px;
    height: 140px;
  }

  .star-athlete-photo {
    width: 160px;
    height: 160px;
  }
}

/* Evacuation Block */
.evacuation-block {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.03) 0%, rgba(255, 215, 0, 0.03) 100%);
  border: 2px solid rgba(0, 87, 183, 0.2);
  border-radius: 24px;
  padding: 3.5rem;
  margin-bottom: 5rem;
  transition: all 0.3s ease;
}

.evacuation-block:hover {
  border-color: #0057b7;
  box-shadow: 0 16px 48px rgba(0, 87, 183, 0.15);
}

.evacuation-header {
  text-align: center;
  margin-bottom: 3rem;
}

.evacuation-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 1.5rem;
}

.evacuation-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.evacuation-date {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: rgba(0, 87, 183, 0.1);
  border: 1px solid rgba(0, 87, 183, 0.2);
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0057b7;
}

/* Evacuation Stats */
.evacuation-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  padding: 2.5rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.evac-stat-item {
  text-align: center;
}

.evac-stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: #0057b7;
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.evac-stat-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Evacuation Description */
.evacuation-description {
  margin-bottom: 3rem;
}

.evacuation-description p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.evacuation-description strong {
  color: #0057b7;
  font-weight: 600;
}

/* Evacuation Regions */
.evacuation-regions {
  margin-bottom: 3rem;
}

.evacuation-regions h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.regions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.region-tag {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background: rgba(0, 87, 183, 0.08);
  border: 1px solid rgba(0, 87, 183, 0.15);
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0057b7;
  transition: all 0.3s ease;
}

.region-tag:hover {
  background: rgba(0, 87, 183, 0.15);
  border-color: #0057b7;
  transform: translateY(-2px);
}

/* Evacuation Quote */
.evacuation-quote {
  position: relative;
  padding: 2.5rem;
  background: #ffffff;
  border-left: 4px solid #0057b7;
  border-radius: 16px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.quote-icon {
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-size: 4rem;
  color: rgba(0, 87, 183, 0.1);
  font-family: Georgia, serif;
  line-height: 1;
}

.quote-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
  font-style: italic;
  margin: 0 0 1rem 0;
  padding-left: 2rem;
}

.quote-author {
  font-size: 1rem;
  font-weight: 600;
  color: #0057b7;
  margin: 0;
  padding-left: 2rem;
}

/* Evacuation Gratitude */
.evacuation-gratitude {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(0, 87, 183, 0.08) 100%);
  border-radius: 16px;
}

.gratitude-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.evacuation-gratitude p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

.evacuation-gratitude strong {
  color: #0057b7;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .evacuation-block {
    padding: 2.5rem 2rem;
  }

  .evacuation-icon {
    font-size: 3rem;
  }

  .evacuation-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem;
  }

  .evac-stat-number {
    font-size: 2.5rem;
  }

  .evacuation-description p {
    font-size: 1rem;
  }

  .evacuation-quote {
    padding: 2rem 1.5rem;
  }

  .quote-text {
    font-size: 1rem;
    padding-left: 1rem;
  }

  .quote-author {
    padding-left: 1rem;
  }

  .evacuation-gratitude {
    flex-direction: column;
    text-align: center;
    padding: 1.75rem;
  }
}

@media (max-width: 480px) {
  .evacuation-block {
    padding: 2rem 1.5rem;
  }

  .evacuation-stats {
    padding: 1.5rem;
  }
}

/* ============================================
   PERIOD 11: 2023 - YOUTH DOMINATION
   ============================================ */

.youth-domination {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  padding: 8rem 0;
  position: relative;
}

.youth-domination .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.youth-domination.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.youth-domination .period-header {
  text-align: center;
  margin-bottom: 5rem;
}

.youth-domination .period-year {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(212, 175, 55, 0.15) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.youth-domination.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.youth-domination .period-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 1rem;
  opacity: 1;
}

.youth-domination.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.youth-domination .period-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  font-weight: 500;
  opacity: 1;
}

.youth-domination.visible .period-subtitle {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* Yudanov Dominance */
.yudanov-dominance {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 152, 0, 0.08) 100%);
  border: 2px solid rgba(255, 152, 0, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.dominance-header {
  text-align: center;
  margin-bottom: 3rem;
}

.dominance-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, var(--color-gold-dark) 0%, #ff9800 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
}

.dominance-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.yudanov-showcase {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}

.yudanov-photo-section {
  text-align: center;
}

.yudanov-photo-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-gold);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
}

.yudanov-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.double-crown {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 3rem;
  background: white;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: pulse 2s ease-in-out infinite;
}

.yudanov-category {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gold-dark);
}

/* Yudanov Achievements */
.yudanov-achievements {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.achievement-2023 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.achievement-2023:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.achievement-medal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.medal-icon-2023 {
  font-size: 3.5rem;
  flex-shrink: 0;
}

.achievement-details strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.achievement-location {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Perfect Run */
.perfect-run {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(139, 195, 74, 0.1) 100%);
  border: 2px solid rgba(76, 175, 80, 0.3);
  border-radius: 16px;
  padding: 2rem;
}

.perfect-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  color: white;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.perfect-run p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.opponents-defeated {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.opponent-flag {
  font-size: 2.5rem;
  transition: transform 0.3s ease;
}

.opponent-flag:hover {
  transform: scale(1.2);
}

.final-note {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 1rem;
}

/* Championship 2023 */
.championship-2023 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.champ-2023-header {
  text-align: center;
  margin-bottom: 3rem;
}

.champ-2023-header h3 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 1rem 0;
}

.medals-2023-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.medal-card-2023 {
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.medal-card-2023:hover {
  transform: translateY(-6px);
}

.gold-card-2023 {
  background: rgba(255, 215, 0, 0.1);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.silver-card-2023 {
  background: rgba(192, 192, 192, 0.1);
  border: 2px solid rgba(169, 169, 169, 0.3);
}

.bronze-card-2023 {
  background: rgba(205, 127, 50, 0.1);
  border: 2px solid rgba(205, 127, 50, 0.3);
}

.medal-visual {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.medal-card-2023 strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.category {
  display: block;
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.medal-note {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.5;
  margin-top: 0.75rem;
}

/* Top Finishers */
.top-finishers {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 2rem;
}

.top-finishers h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  text-align: center;
}

.finisher-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.finisher-item {
  padding: 0.75rem 1.25rem;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-light);
}

/* World Championship 2023 */
.world-championship-2023 {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.05) 0%, rgba(3, 169, 244, 0.05) 100%);
  border: 2px solid rgba(33, 150, 243, 0.2);
  border-radius: 24px;
  padding: 3.5rem 3rem;
  margin-bottom: 4rem;
}

.world-champ-header {
  text-align: center;
  margin-bottom: 3rem;
}

.world-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #2196f3 0%, #03a9f4 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.world-champ-header h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.world-date {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.world-results-2023 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.world-champion-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 152, 0, 0.15) 100%);
  border: 3px solid var(--color-gold);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
}

.champion-crown {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  background: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.champion-photo-placeholder {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.world-medal-large {
  font-size: 6rem;
}

.champion-info-2023 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.champion-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.champion-info-2023 strong {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
}

.world-silver-card {
  background: white;
  border: 2px solid rgba(192, 192, 192, 0.5);
  border-radius: 20px;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.world-medal-icon {
  font-size: 5rem;
}

.world-silver-card strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  display: block;
  margin-bottom: 0.5rem;
}

.world-summary {
  text-align: center;
  padding: 2rem;
  background: rgba(33, 150, 243, 0.08);
  border-radius: 12px;
}

.world-summary p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Viskov U23 Breakthrough */
.viskov-u23-breakthrough {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(103, 58, 183, 0.05) 100%);
  border: 2px solid rgba(156, 39, 176, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.breakthrough-2023-header {
  text-align: center;
  margin-bottom: 3rem;
}

.breakthrough-badge-2023 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.breakthrough-2023-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.viskov-u23-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}

.viskov-u23-photo {
  position: relative;
}

.viskov-u23-photo img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid #9c27b0;
}

.age-badge {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  color: white;
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(156, 39, 176, 0.4);
}

.u23-championship {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.u23-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(156, 39, 176, 0.1);
  border: 1px solid rgba(156, 39, 176, 0.3);
  color: #9c27b0;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.u23-championship h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.u23-location {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Progression Timeline */
.viskov-progression {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.viskov-progression h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.progression-timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.timeline-item {
  flex: 1;
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
}

.timeline-item.highlight-timeline {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(212, 175, 55, 0.15) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  transform: scale(1.05);
}

.timeline-date {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.timeline-achievement {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.timeline-medal {
  font-size: 2rem;
}

.timeline-achievement span:last-child {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.timeline-arrow {
  font-size: 2rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.viskov-achievement-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(103, 58, 183, 0.08) 100%);
  border-left: 4px solid #9c27b0;
  border-radius: 12px;
}

.note-icon-2023 {
  font-size: 2rem;
  flex-shrink: 0;
}

.viskov-achievement-note p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

/* U23 Team Success */
.u23-team-success {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.u23-success-header {
  text-align: center;
  margin-bottom: 3rem;
}

.u23-team-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #0057b7 0%, #ffd700 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.u23-success-header h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.u23-medals-showcase {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.u23-gold-winners h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2rem;
}

.u23-champions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.u23-champion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(212, 175, 55, 0.12) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.u23-champion-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}

.u23-medal {
  font-size: 3.5rem;
}

.u23-champion-card strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

.u23-champion-card span {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.u23-other-medals {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  padding: 2rem;
}

.u23-medal-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.u23-medal-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.u23-medal-row strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.u23-medal-row span {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.u23-controversy {
  padding: 1.5rem;
  background: rgba(255, 87, 34, 0.08);
  border-left: 3px solid #ff5722;
  border-radius: 8px;
}

.u23-controversy p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
}

.team-bronze {
  padding: 2rem;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.12) 0%, rgba(232, 168, 124, 0.12) 100%);
  border: 2px solid rgba(205, 127, 50, 0.3);
  border-radius: 16px;
  text-align: center;
}

.team-medal-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.team-bronze strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.team-bronze p {
  font-size: 1rem;
  color: var(--color-text-light);
  margin: 0;
}

/* Year Summary 2023 */
.year-summary-2023 {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
  border: 2px solid rgba(0, 87, 183, 0.2);
  border-radius: 24px;
  padding: 3.5rem 3rem;
}

.year-summary-2023 h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
}

.summary-stats-2023 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.stat-card-2023 {
  text-align: center;
  padding: 2.5rem 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.stat-card-2023:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-number-2023 {
  font-size: 4rem;
  font-weight: 800;
  color: #0057b7;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.stat-label-2023 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.key-achievements-2023 {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
}

.key-achievements-2023 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.achievements-list-2023 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.achievements-list-2023 li {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.achievements-list-2023 li:hover {
  background: rgba(0, 87, 183, 0.05);
  transform: translateX(8px);
}

/* Responsive */
@media (max-width: 1024px) {
  .yudanov-showcase,
  .viskov-u23-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .yudanov-photo-wrapper,
  .viskov-u23-photo {
    margin: 0 auto;
  }

  .world-results-2023 {
    grid-template-columns: 1fr;
  }

  .u23-champions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .youth-domination {
    padding: 5rem 0;
  }

  .yudanov-dominance,
  .viskov-u23-breakthrough,
  .u23-team-success,
  .year-summary-2023 {
    padding: 2.5rem 2rem;
  }

  .championship-2023,
  .world-championship-2023 {
    padding: 2rem;
  }

  .medals-2023-grid {
    grid-template-columns: 1fr;
  }

  .progression-timeline {
    flex-direction: column;
  }

  .timeline-arrow {
    transform: rotate(90deg);
  }

  .summary-stats-2023 {
    grid-template-columns: 1fr;
  }

  .opponents-defeated {
    flex-wrap: wrap;
  }

  .opponent-flag {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .yudanov-photo-wrapper {
    width: 220px;
    height: 220px;
  }

  .viskov-u23-photo img {
    height: 220px;
  }

  .stat-number-2023 {
    font-size: 3rem;
  }
}

/* ============================================
   PERIOD 11: 2023 - YOUTH DOMINATION
   ============================================ */

.youth-domination {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  padding: 8rem 0;
  position: relative;
}

.youth-domination .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.youth-domination.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.youth-domination .period-header {
  text-align: center;
  margin-bottom: 5rem;
}

.youth-domination .period-year {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(212, 175, 55, 0.15) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.youth-domination.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.youth-domination .period-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 1rem;
  opacity: 1;
}

.youth-domination.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.youth-domination .period-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  font-weight: 500;
  opacity: 1;
}

.youth-domination.visible .period-subtitle {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* Yudanov Dominance */
.yudanov-dominance {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 152, 0, 0.08) 100%);
  border: 2px solid rgba(255, 152, 0, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.dominance-header {
  text-align: center;
  margin-bottom: 3rem;
}

.dominance-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, var(--color-gold-dark) 0%, #ff9800 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
}

.dominance-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.yudanov-showcase {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}

.yudanov-photo-section {
  text-align: center;
}

.yudanov-photo-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-gold);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
}

.yudanov-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.double-crown {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 3rem;
  background: white;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: pulse 2s ease-in-out infinite;
}

.yudanov-category {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gold-dark);
}

/* Yudanov Achievements */
.yudanov-achievements {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.achievement-2023 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.achievement-2023:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.achievement-medal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.medal-icon-2023 {
  font-size: 3.5rem;
  flex-shrink: 0;
}

.achievement-details strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.achievement-location {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Perfect Run */
.perfect-run {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(139, 195, 74, 0.1) 100%);
  border: 2px solid rgba(76, 175, 80, 0.3);
  border-radius: 16px;
  padding: 2rem;
}

.perfect-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  color: white;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.perfect-run p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.opponents-defeated {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.opponent-flag {
  font-size: 2.5rem;
  transition: transform 0.3s ease;
}

.opponent-flag:hover {
  transform: scale(1.2);
}

.final-note {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 1rem;
}

/* Championship 2023 */
.championship-2023 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.champ-2023-header {
  text-align: center;
  margin-bottom: 3rem;
}

.champ-2023-header h3 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 1rem 0;
}

.medals-2023-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.medal-card-2023 {
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.medal-card-2023:hover {
  transform: translateY(-6px);
}

.gold-card-2023 {
  background: rgba(255, 215, 0, 0.1);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.silver-card-2023 {
  background: rgba(192, 192, 192, 0.1);
  border: 2px solid rgba(169, 169, 169, 0.3);
}

.bronze-card-2023 {
  background: rgba(205, 127, 50, 0.1);
  border: 2px solid rgba(205, 127, 50, 0.3);
}

.medal-visual {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.medal-card-2023 strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.category {
  display: block;
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.medal-note {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.5;
  margin-top: 0.75rem;
}

/* Top Finishers */
.top-finishers {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 2rem;
}

.top-finishers h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  text-align: center;
}

.finisher-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.finisher-item {
  padding: 0.75rem 1.25rem;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-light);
}

/* World Championship 2023 */
.world-championship-2023 {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.05) 0%, rgba(3, 169, 244, 0.05) 100%);
  border: 2px solid rgba(33, 150, 243, 0.2);
  border-radius: 24px;
  padding: 3.5rem 3rem;
  margin-bottom: 4rem;
}

.world-champ-header {
  text-align: center;
  margin-bottom: 3rem;
}

.world-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #2196f3 0%, #03a9f4 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.world-champ-header h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.world-date {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.world-results-2023 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.world-champion-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 152, 0, 0.15) 100%);
  border: 3px solid var(--color-gold);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
}

.champion-crown {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  background: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.champion-photo-placeholder {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.world-medal-large {
  font-size: 6rem;
}

.champion-info-2023 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.champion-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.champion-info-2023 strong {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
}

.world-silver-card {
  background: white;
  border: 2px solid rgba(192, 192, 192, 0.5);
  border-radius: 20px;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.world-medal-icon {
  font-size: 5rem;
}

.world-silver-card strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  display: block;
  margin-bottom: 0.5rem;
}

.world-summary {
  text-align: center;
  padding: 2rem;
  background: rgba(33, 150, 243, 0.08);
  border-radius: 12px;
}

.world-summary p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Viskov U23 Breakthrough */
.viskov-u23-breakthrough {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(103, 58, 183, 0.05) 100%);
  border: 2px solid rgba(156, 39, 176, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.breakthrough-2023-header {
  text-align: center;
  margin-bottom: 3rem;
}

.breakthrough-badge-2023 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.breakthrough-2023-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.viskov-u23-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}

.viskov-u23-photo {
  position: relative;
}

.viskov-u23-photo img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid #9c27b0;
}

.age-badge {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  color: white;
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(156, 39, 176, 0.4);
}

.u23-championship {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.u23-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(156, 39, 176, 0.1);
  border: 1px solid rgba(156, 39, 176, 0.3);
  color: #9c27b0;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.u23-championship h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.u23-location {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Progression Timeline */
.viskov-progression {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.viskov-progression h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.progression-timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.timeline-item {
  flex: 1;
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
}

.timeline-item.highlight-timeline {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(212, 175, 55, 0.15) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  transform: scale(1.05);
}

.timeline-date {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.timeline-achievement {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.timeline-medal {
  font-size: 2rem;
}

.timeline-achievement span:last-child {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.timeline-arrow {
  font-size: 2rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.viskov-achievement-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(103, 58, 183, 0.08) 100%);
  border-left: 4px solid #9c27b0;
  border-radius: 12px;
}

.note-icon-2023 {
  font-size: 2rem;
  flex-shrink: 0;
}

.viskov-achievement-note p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

/* U23 Team Success */
.u23-team-success {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.u23-success-header {
  text-align: center;
  margin-bottom: 3rem;
}

.u23-team-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #0057b7 0%, #ffd700 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.u23-success-header h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.u23-medals-showcase {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.u23-gold-winners h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2rem;
}

.u23-champions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.u23-champion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(212, 175, 55, 0.12) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.u23-champion-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}

.u23-medal {
  font-size: 3.5rem;
}

.u23-champion-card strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

.u23-champion-card span {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.u23-other-medals {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  padding: 2rem;
}

.u23-medal-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.u23-medal-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.u23-medal-row strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.u23-medal-row span {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.u23-controversy {
  padding: 1.5rem;
  background: rgba(255, 87, 34, 0.08);
  border-left: 3px solid #ff5722;
  border-radius: 8px;
}

.u23-controversy p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
}

.team-bronze {
  padding: 2rem;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.12) 0%, rgba(232, 168, 124, 0.12) 100%);
  border: 2px solid rgba(205, 127, 50, 0.3);
  border-radius: 16px;
  text-align: center;
}

.team-medal-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.team-bronze strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.team-bronze p {
  font-size: 1rem;
  color: var(--color-text-light);
  margin: 0;
}

/* Year Summary 2023 */
.year-summary-2023 {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
  border: 2px solid rgba(0, 87, 183, 0.2);
  border-radius: 24px;
  padding: 3.5rem 3rem;
}

.year-summary-2023 h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
}

.summary-stats-2023 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.stat-card-2023 {
  text-align: center;
  padding: 2.5rem 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.stat-card-2023:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-number-2023 {
  font-size: 4rem;
  font-weight: 800;
  color: #0057b7;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.stat-label-2023 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.key-achievements-2023 {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
}

.key-achievements-2023 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.achievements-list-2023 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.achievements-list-2023 li {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.achievements-list-2023 li:hover {
  background: rgba(0, 87, 183, 0.05);
  transform: translateX(8px);
}

/* Responsive */
@media (max-width: 1024px) {
  .yudanov-showcase,
  .viskov-u23-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .yudanov-photo-wrapper,
  .viskov-u23-photo {
    margin: 0 auto;
  }

  .world-results-2023 {
    grid-template-columns: 1fr;
  }

  .u23-champions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .youth-domination {
    padding: 5rem 0;
  }

  .yudanov-dominance,
  .viskov-u23-breakthrough,
  .u23-team-success,
  .year-summary-2023 {
    padding: 2.5rem 2rem;
  }

  .championship-2023,
  .world-championship-2023 {
    padding: 2rem;
  }

  .medals-2023-grid {
    grid-template-columns: 1fr;
  }

  .progression-timeline {
    flex-direction: column;
  }

  .timeline-arrow {
    transform: rotate(90deg);
  }

  .summary-stats-2023 {
    grid-template-columns: 1fr;
  }

  .opponents-defeated {
    flex-wrap: wrap;
  }

  .opponent-flag {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .yudanov-photo-wrapper {
    width: 220px;
    height: 220px;
  }

  .viskov-u23-photo img {
    height: 220px;
  }

  .stat-number-2023 {
    font-size: 3rem;
  }
}

/* ============================================
   PERIOD 11: 2023 - YOUTH DOMINATION
   ============================================ */

.youth-domination {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  padding: 8rem 0;
  position: relative;
}

.youth-domination .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.youth-domination.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.youth-domination .period-header {
  text-align: center;
  margin-bottom: 5rem;
}

.youth-domination .period-year {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(212, 175, 55, 0.15) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.youth-domination.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.youth-domination .period-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 1rem;
  opacity: 1;
}

.youth-domination.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.youth-domination .period-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  font-weight: 500;
  opacity: 1;
}

.youth-domination.visible .period-subtitle {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* Yudanov Dominance */
.yudanov-dominance {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 152, 0, 0.08) 100%);
  border: 2px solid rgba(255, 152, 0, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.dominance-header {
  text-align: center;
  margin-bottom: 3rem;
}

.dominance-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, var(--color-gold-dark) 0%, #ff9800 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
}

.dominance-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.yudanov-showcase {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}

.yudanov-photo-section {
  text-align: center;
}

.yudanov-photo-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-gold);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
}

.yudanov-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.double-crown {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 3rem;
  background: white;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: pulse 2s ease-in-out infinite;
}

.yudanov-category {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gold-dark);
}

/* Yudanov Achievements */
.yudanov-achievements {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.achievement-2023 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.achievement-2023:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.achievement-medal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.medal-icon-2023 {
  font-size: 3.5rem;
  flex-shrink: 0;
}

.achievement-details strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.achievement-location {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Perfect Run */
.perfect-run {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(139, 195, 74, 0.1) 100%);
  border: 2px solid rgba(76, 175, 80, 0.3);
  border-radius: 16px;
  padding: 2rem;
}

.perfect-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  color: white;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.perfect-run p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.opponents-defeated {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.opponent-flag {
  font-size: 2.5rem;
  transition: transform 0.3s ease;
}

.opponent-flag:hover {
  transform: scale(1.2);
}

.final-note {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 1rem;
}

/* Championship 2023 */
.championship-2023 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.champ-2023-header {
  text-align: center;
  margin-bottom: 3rem;
}

.champ-2023-header h3 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 1rem 0;
}

.medals-2023-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.medal-card-2023 {
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.medal-card-2023:hover {
  transform: translateY(-6px);
}

.gold-card-2023 {
  background: rgba(255, 215, 0, 0.1);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.silver-card-2023 {
  background: rgba(192, 192, 192, 0.1);
  border: 2px solid rgba(169, 169, 169, 0.3);
}

.bronze-card-2023 {
  background: rgba(205, 127, 50, 0.1);
  border: 2px solid rgba(205, 127, 50, 0.3);
}

.medal-visual {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.medal-card-2023 strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.category {
  display: block;
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.medal-note {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.5;
  margin-top: 0.75rem;
}

/* Top Finishers */
.top-finishers {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 2rem;
}

.top-finishers h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  text-align: center;
}

.finisher-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.finisher-item {
  padding: 0.75rem 1.25rem;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-light);
}

/* World Championship 2023 */
.world-championship-2023 {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.05) 0%, rgba(3, 169, 244, 0.05) 100%);
  border: 2px solid rgba(33, 150, 243, 0.2);
  border-radius: 24px;
  padding: 3.5rem 3rem;
  margin-bottom: 4rem;
}

.world-champ-header {
  text-align: center;
  margin-bottom: 3rem;
}

.world-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #2196f3 0%, #03a9f4 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.world-champ-header h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.world-date {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.world-results-2023 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.world-champion-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 152, 0, 0.15) 100%);
  border: 3px solid var(--color-gold);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
}

.champion-crown {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  background: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.champion-photo-placeholder {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.world-medal-large {
  font-size: 6rem;
}

.champion-info-2023 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.champion-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.champion-info-2023 strong {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
}

.world-silver-card {
  background: white;
  border: 2px solid rgba(192, 192, 192, 0.5);
  border-radius: 20px;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.world-medal-icon {
  font-size: 5rem;
}

.world-silver-card strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  display: block;
  margin-bottom: 0.5rem;
}

.world-summary {
  text-align: center;
  padding: 2rem;
  background: rgba(33, 150, 243, 0.08);
  border-radius: 12px;
}

.world-summary p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Viskov U23 Breakthrough */
.viskov-u23-breakthrough {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(103, 58, 183, 0.05) 100%);
  border: 2px solid rgba(156, 39, 176, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.breakthrough-2023-header {
  text-align: center;
  margin-bottom: 3rem;
}

.breakthrough-badge-2023 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.breakthrough-2023-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.viskov-u23-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}

.viskov-u23-photo {
  position: relative;
}

.viskov-u23-photo img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid #9c27b0;
}

.age-badge {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  color: white;
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(156, 39, 176, 0.4);
}

.u23-championship {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.u23-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(156, 39, 176, 0.1);
  border: 1px solid rgba(156, 39, 176, 0.3);
  color: #9c27b0;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.u23-championship h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.u23-location {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Progression Timeline */
.viskov-progression {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.viskov-progression h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.progression-timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.timeline-item {
  flex: 1;
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
}

.timeline-item.highlight-timeline {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(212, 175, 55, 0.15) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  transform: scale(1.05);
}

.timeline-date {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.timeline-achievement {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.timeline-medal {
  font-size: 2rem;
}

.timeline-achievement span:last-child {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.timeline-arrow {
  font-size: 2rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.viskov-achievement-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(103, 58, 183, 0.08) 100%);
  border-left: 4px solid #9c27b0;
  border-radius: 12px;
}

.note-icon-2023 {
  font-size: 2rem;
  flex-shrink: 0;
}

.viskov-achievement-note p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

/* U23 Team Success */
.u23-team-success {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.u23-success-header {
  text-align: center;
  margin-bottom: 3rem;
}

.u23-team-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #0057b7 0%, #ffd700 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.u23-success-header h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.u23-medals-showcase {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.u23-gold-winners h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2rem;
}

.u23-champions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.u23-champion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(212, 175, 55, 0.12) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.u23-champion-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}

.u23-medal {
  font-size: 3.5rem;
}

.u23-champion-card strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

.u23-champion-card span {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.u23-other-medals {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  padding: 2rem;
}

.u23-medal-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.u23-medal-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.u23-medal-row strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.u23-medal-row span {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.u23-controversy {
  padding: 1.5rem;
  background: rgba(255, 87, 34, 0.08);
  border-left: 3px solid #ff5722;
  border-radius: 8px;
}

.u23-controversy p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
}

.team-bronze {
  padding: 2rem;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.12) 0%, rgba(232, 168, 124, 0.12) 100%);
  border: 2px solid rgba(205, 127, 50, 0.3);
  border-radius: 16px;
  text-align: center;
}

.team-medal-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.team-bronze strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.team-bronze p {
  font-size: 1rem;
  color: var(--color-text-light);
  margin: 0;
}

/* Year Summary 2023 */
.year-summary-2023 {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
  border: 2px solid rgba(0, 87, 183, 0.2);
  border-radius: 24px;
  padding: 3.5rem 3rem;
}

.year-summary-2023 h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
}

.summary-stats-2023 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.stat-card-2023 {
  text-align: center;
  padding: 2.5rem 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.stat-card-2023:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-number-2023 {
  font-size: 4rem;
  font-weight: 800;
  color: #0057b7;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.stat-label-2023 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.key-achievements-2023 {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
}

.key-achievements-2023 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.achievements-list-2023 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.achievements-list-2023 li {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.achievements-list-2023 li:hover {
  background: rgba(0, 87, 183, 0.05);
  transform: translateX(8px);
}

/* Responsive */
@media (max-width: 1024px) {
  .yudanov-showcase,
  .viskov-u23-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .yudanov-photo-wrapper,
  .viskov-u23-photo {
    margin: 0 auto;
  }

  .world-results-2023 {
    grid-template-columns: 1fr;
  }

  .u23-champions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .youth-domination {
    padding: 5rem 0;
  }

  .yudanov-dominance,
  .viskov-u23-breakthrough,
  .u23-team-success,
  .year-summary-2023 {
    padding: 2.5rem 2rem;
  }

  .championship-2023,
  .world-championship-2023 {
    padding: 2rem;
  }

  .medals-2023-grid {
    grid-template-columns: 1fr;
  }

  .progression-timeline {
    flex-direction: column;
  }

  .timeline-arrow {
    transform: rotate(90deg);
  }

  .summary-stats-2023 {
    grid-template-columns: 1fr;
  }

  .opponents-defeated {
    flex-wrap: wrap;
  }

  .opponent-flag {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .yudanov-photo-wrapper {
    width: 220px;
    height: 220px;
  }

  .viskov-u23-photo img {
    height: 220px;
  }

  .stat-number-2023 {
    font-size: 3rem;
  }
}

.flag-icon {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    transition: transform 0.3s ease;
  }
  
  .flag-icon:hover {
    transform: scale(1.2);
  }
  
  @media (max-width: 768px) {
    .flag-icon {
      width: 2rem;
      height: 2rem;
    }
  }
.opponents-defeated {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
  align-items: center;
}

.opponent-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* Для Twemoji SVG */
.opponent-flag img.emoji,
.flag-svg {
  width: 2.5rem !important;
  height: 2.5rem !important;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}

.opponent-flag:hover {
  transform: scale(1.2);
}

/* Якщо емоджі текстові (fallback) */
.opponent-flag:not(:has(img)) {
  font-size: 2.5rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .opponents-defeated {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .opponent-flag img.emoji,
  .flag-svg {
    width: 2rem !important;
    height: 2rem !important;
  }
  
  .opponent-flag:not(:has(img)) {
    font-size: 2rem;
  }
}
  
/* ============================================
   PERIOD 12: 2024 - NEW GENERATION
   ============================================ */

.new-generation {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  padding: 8rem 0;
  position: relative;
}

.new-generation .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.new-generation.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.new-generation .period-header {
  text-align: center;
  margin-bottom: 5rem;
}

.new-generation .period-year {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(3, 169, 244, 0.15) 100%);
  border: 2px solid rgba(33, 150, 243, 0.3);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #2196f3;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.new-generation.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.new-generation .period-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 1rem;
  opacity: 1;
}

.new-generation.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.new-generation .period-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  font-weight: 500;
  opacity: 1;
}

.new-generation.visible .period-subtitle {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* Lebid Breakthrough */
.lebid-breakthrough {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.08) 0%, rgba(3, 169, 244, 0.08) 100%);
  border: 2px solid rgba(33, 150, 243, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.lebid-header {
  text-align: center;
  margin-bottom: 3rem;
}

.breakthrough-badge-2024 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #2196f3 0%, #03a9f4 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.3);
}

.lebid-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.lebid-showcase {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}

.lebid-photo-section {
  text-align: center;
}

.lebid-photo-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #2196f3;
  box-shadow: 0 8px 32px rgba(33, 150, 243, 0.3);
  transition: all 0.3s ease;
}

.lebid-photo-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(33, 150, 243, 0.4);
}

.lebid-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.double-medal {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 2.5rem;
  background: white;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: pulse 2s ease-in-out infinite;
}

.lebid-category {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2196f3;
}

/* Lebid Achievements */
.lebid-achievements {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.achievement-2024 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.achievement-2024:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.achievement-medal-2024 {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.medal-icon-2024 {
  font-size: 3.5rem;
  flex-shrink: 0;
}

.achievement-details-2024 {
  flex: 1;
}

.achievement-details-2024 strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.achievement-location-2024 {
  display: block;
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.achievement-note-2024 {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0.75rem 0 0 0;
}

.lebid-extra {
  background: rgba(33, 150, 243, 0.08);
  border-left: 4px solid #2196f3;
  border-radius: 12px;
  padding: 1.5rem;
}

.extra-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #2196f3;
  color: white;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.lebid-extra p {
  font-size: 1rem;
  color: var(--color-text-light);
  margin: 0;
}

/* Championship 2024 */
.championship-2024 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.champ-2024-header {
  text-align: center;
  margin-bottom: 3rem;
}

.champ-2024-header h3 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 1rem 0;
}

.medal-summary-2024 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  margin-bottom: 3rem;
}

.summary-stat {
  text-align: center;
}

.summary-number {
  font-size: 4rem;
  font-weight: 800;
  color: #2196f3;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.summary-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.summary-breakdown {
  display: flex;
  gap: 1.5rem;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  background: white;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.gold-item {
  color: var(--color-gold-dark);
}

.silver-item {
  color: #c0c0c0;
}

.bronze-item {
  color: #cd7f32;
}

/* Medals Grid 2024 */
.medals-grid-2024 {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.medal-winner-2024 {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(212, 175, 55, 0.12) 100%);
  border: 3px solid var(--color-gold);
  border-radius: 20px;
}

.medal-icon-large {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.medal-winner-2024 strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.silver-medalists-2024,
.bronze-medalists-2024 {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  padding: 2.5rem 2rem;
}

.silver-medalists-2024 h4,
.bronze-medalists-2024 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2rem;
  text-align: center;
}

.medalist-grid-2024 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.medalist-card-2024 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  text-align: center;
}

.medalist-card-2024:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.medal-mini {
  font-size: 2.5rem;
}

.medalist-card-2024 strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.medalist-card-2024 span:last-child {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.consistency-note {
  font-size: 0.85rem;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin-top: 0.5rem;
  font-style: italic;
}

.top-5-finishes {
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 152, 0, 0.08);
  border-radius: 12px;
  margin-top: 2rem;
}

.top-5-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: #ff9800;
  color: white;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-right: 0.75rem;
}

.top-5-finishes strong {
  font-size: 1.1rem;
  color: var(--color-text);
}

/* World Championship 2024 */
.world-championship-2024 {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(139, 195, 74, 0.05) 100%);
  border: 2px solid rgba(76, 175, 80, 0.25);
  border-radius: 24px;
  padding: 3.5rem 3rem;
  margin-bottom: 4rem;
}

.world-header-2024 {
  text-align: center;
  margin-bottom: 3rem;
}

.world-badge-2024 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.world-header-2024 h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.world-date-2024 {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.world-medals-2024 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.world-medal-card-2024 {
  padding: 3rem 2rem;
  border-radius: 20px;
  text-align: center;
}

.world-silver {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.15) 0%, rgba(169, 169, 169, 0.15) 100%);
  border: 3px solid #c0c0c0;
}

.world-medal-visual {
  font-size: 5rem;
  margin-bottom: 1.5rem;
}

.world-medal-card-2024 strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.world-note {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-top: 1rem;
}

.world-bronze-group {
  background: rgba(205, 127, 50, 0.1);
  border: 2px solid rgba(205, 127, 50, 0.3);
  border-radius: 20px;
  padding: 2.5rem 2rem;
}

.world-bronze-group h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 1.5rem;
}

.world-bronze-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.world-bronze-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.world-bronze-card strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-right: 0.5rem;
}

.world-top-5 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
}

.world-top-5 h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  text-align: center;
}

.top-5-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.top-5-list span {
  padding: 0.75rem 1.25rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-light);
}

/* Viskov Junior 2024 */
.viskov-junior-2024 {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(103, 58, 183, 0.05) 100%);
  border: 2px solid rgba(156, 39, 176, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.viskov-2024-header {
  text-align: center;
  margin-bottom: 3rem;
}

.viskov-badge-2024 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.viskov-2024-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.viskov-2024-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}

.viskov-2024-photo {
  position: relative;
}

.viskov-2024-photo img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid #9c27b0;
  box-shadow: 0 8px 24px rgba(156, 39, 176, 0.2);
}

.junior-championship-2024 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.junior-badge-2024 {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(156, 39, 176, 0.1);
  border: 1px solid rgba(156, 39, 176, 0.3);
  color: #9c27b0;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.junior-championship-2024 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.championship-location-2024 {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.viskov-journey-2024 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.viskov-journey-2024 h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.journey-highlight {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(156, 39, 176, 0.05);
  border-radius: 12px;
  margin-bottom: 1rem;
}

.journey-highlight:last-child {
  margin-bottom: 0;
}

.journey-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.journey-highlight p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

.viskov-cups-2024 {
  background: rgba(156, 39, 176, 0.08);
  border-left: 4px solid #9c27b0;
  border-radius: 12px;
  padding: 2rem;
}

.viskov-cups-2024 h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.cups-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cup-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: white;
  border-radius: 8px;
}

.cup-medal {
  font-size: 2rem;
  flex-shrink: 0;
}

.cup-item span:last-child {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-light);
}

/* Junior Team 2024 */
.junior-team-2024 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.junior-team-header {
  text-align: center;
  margin-bottom: 3rem;
}

.team-badge-2024 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #0057b7 0%, #ffd700 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.junior-team-header h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.team-composition-2024 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.team-section h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.athletes-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.athlete-name {
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-light);
  transition: all 0.3s ease;
}

.athlete-name:hover {
  background: rgba(33, 150, 243, 0.08);
  transform: translateX(6px);
}

.team-note-2024 {
  padding: 2rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  text-align: center;
}

.team-note-2024 p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

.kutenkov-highlight {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.08) 0%, rgba(232, 168, 124, 0.08) 100%);
  border: 2px solid rgba(205, 127, 50, 0.25);
  border-radius: 16px;
}

.kutenkov-medal {
  font-size: 4rem;
  flex-shrink: 0;
}

.kutenkov-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kutenkov-info strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.kutenkov-info span {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.kutenkov-info p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0.5rem 0 0 0;
}

/* Cups Dominance 2024 */
.cups-dominance-2024 {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.05) 0%, rgba(255, 193, 7, 0.05) 100%);
  border: 2px solid rgba(255, 152, 0, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.cups-header-2024 {
  text-align: center;
  margin-bottom: 3rem;
}

.cups-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.cups-header-2024 h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.cups-tournaments {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.tournament-card {
  background: white;
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.tournament-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.highlight-tournament {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.tournament-name {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.tournament-icon {
  font-size: 2.5rem;
}

.tournament-name strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.tournament-medals {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.medal-count-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 100px;
}

.count-medal {
  font-size: 2rem;
}

.count-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text);
}

.tournament-highlights {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 1.5rem;
}

.tournament-highlights p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

.tournament-victory {
  text-align: center;
}

.victory-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--color-gold);
  color: white;
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.victory-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.other-cups {
  background: white;
  border-radius: 20px;
  padding: 2.5rem;
}

.other-cups h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2rem;
  text-align: center;
}

.cups-list-2024 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cup-result {
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cup-result strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.cup-result span {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Rising Stars 2024 */
.rising-stars-2024 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.stars-header {
  text-align: center;
  margin-bottom: 3rem;
}

.stars-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.stars-header h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.stars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.star-card {
  padding: 2.5rem 2rem;
  background: rgba(255, 193, 7, 0.05);
  border: 2px solid rgba(255, 193, 7, 0.2);
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.star-card:hover {
  transform: translateY(-6px);
  border-color: #ffc107;
  box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2);
}

.star-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.star-card strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.star-category {
  display: block;
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

.star-card p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
}

/* Year Summary 2024 */
.year-summary-2024 {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
  border: 2px solid rgba(0, 87, 183, 0.2);
  border-radius: 24px;
  padding: 4rem 3rem;
}

.year-summary-2024 h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
}

.summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.summary-stat-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.summary-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.summary-stat-number {
  font-size: 4rem;
  font-weight: 800;
  color: #0057b7;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.summary-stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.key-achievements-2024 {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 3rem;
}

.key-achievements-2024 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.achievements-list-2024 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.achievements-list-2024 li {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.achievements-list-2024 li:hover {
  background: rgba(0, 87, 183, 0.05);
  transform: translateX(8px);
}

.transition-note {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2.5rem;
  background: rgba(255, 152, 0, 0.08);
  border-left: 4px solid #ff9800;
  border-radius: 16px;
}

.transition-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.transition-text h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.transition-text p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .lebid-showcase,
  .viskov-2024-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .lebid-photo-wrapper,
  .viskov-2024-photo {
    margin: 0 auto;
  }

  .world-medals-2024,
  .team-composition-2024 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .new-generation {
    padding: 5rem 0;
  }

  .lebid-breakthrough,
  .viskov-junior-2024,
  .cups-dominance-2024,
  .rising-stars-2024,
  .year-summary-2024 {
    padding: 2.5rem 2rem;
  }

  .championship-2024,
  .world-championship-2024,
  .junior-team-2024 {
    padding: 2rem;
  }

  .medal-summary-2024 {
    flex-direction: column;
    gap: 1.5rem;
  }

  .summary-breakdown {
    flex-wrap: wrap;
    justify-content: center;
  }

  .medalist-grid-2024,
  .stars-grid {
    grid-template-columns: 1fr;
  }

  .summary-stats-grid {
    grid-template-columns: 1fr;
  }

  .tournament-medals {
    flex-wrap: wrap;
  }

  .kutenkov-highlight,
  .transition-note {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .lebid-photo-wrapper {
    width: 220px;
    height: 220px;
  }

  .viskov-2024-photo img {
    height: 220px;
  }

  .summary-stat-number,
  .summary-stat-number {
    font-size: 3rem;
  }
}

/* Базовий стан для animate-item */
.new-generation .animate-item {
    opacity: 1;
    transform: translateY(40px);
  }
  
  /* Анімація при появі */
  .new-generation.visible .animate-item {
    animation: fadeInUp 0.8s ease-out forwards;
  }
  
  /* Затримки для послідовної появи елементів */
  .new-generation.visible .animate-item:nth-child(1) {
    animation-delay: 0.6s;
  }
  
  .new-generation.visible .animate-item:nth-child(2) {
    animation-delay: 0.7s;
  }
  
  .new-generation.visible .animate-item:nth-child(3) {
    animation-delay: 0.8s;
  }
  
  .new-generation.visible .animate-item:nth-child(4) {
    animation-delay: 0.9s;
  }
  
  .new-generation.visible .animate-item:nth-child(5) {
    animation-delay: 1s;
  }
  
  .new-generation.visible .animate-item:nth-child(6) {
    animation-delay: 1.1s;
  }
  
  .new-generation.visible .animate-item:nth-child(7) {
    animation-delay: 1.2s;
  }
  
  .new-generation.visible .animate-item:nth-child(8) {
    animation-delay: 1.3s;
  }
  
  .new-generation.visible .animate-item:nth-child(9) {
    animation-delay: 1.4s;
  }
  
/* ============================================
   PERIOD 12: 2024 - NEW GENERATION
   ============================================ */

.new-generation {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  padding: 8rem 0;
  position: relative;
}

.new-generation .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.new-generation.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.new-generation .period-header {
  text-align: center;
  margin-bottom: 5rem;
}

.new-generation .period-year {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(3, 169, 244, 0.15) 100%);
  border: 2px solid rgba(33, 150, 243, 0.3);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #2196f3;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.new-generation.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.new-generation .period-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 1rem;
  opacity: 1;
}

.new-generation.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.new-generation .period-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  font-weight: 500;
  opacity: 1;
}

.new-generation.visible .period-subtitle {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* Lebid Breakthrough */
.lebid-breakthrough {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.08) 0%, rgba(3, 169, 244, 0.08) 100%);
  border: 2px solid rgba(33, 150, 243, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.lebid-header {
  text-align: center;
  margin-bottom: 3rem;
}

.breakthrough-badge-2024 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #2196f3 0%, #03a9f4 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.3);
}

.lebid-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.lebid-showcase {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}

.lebid-photo-section {
  text-align: center;
}

.lebid-photo-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #2196f3;
  box-shadow: 0 8px 32px rgba(33, 150, 243, 0.3);
  transition: all 0.3s ease;
}

.lebid-photo-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(33, 150, 243, 0.4);
}

.lebid-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.double-medal {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 2.5rem;
  background: white;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: pulse 2s ease-in-out infinite;
}

.lebid-category {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2196f3;
}

/* Lebid Achievements */
.lebid-achievements {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.achievement-2024 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.achievement-2024:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.achievement-medal-2024 {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.medal-icon-2024 {
  font-size: 3.5rem;
  flex-shrink: 0;
}

.achievement-details-2024 {
  flex: 1;
}

.achievement-details-2024 strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.achievement-location-2024 {
  display: block;
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.achievement-note-2024 {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0.75rem 0 0 0;
}

.lebid-extra {
  background: rgba(33, 150, 243, 0.08);
  border-left: 4px solid #2196f3;
  border-radius: 12px;
  padding: 1.5rem;
}

.extra-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #2196f3;
  color: white;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.lebid-extra p {
  font-size: 1rem;
  color: var(--color-text-light);
  margin: 0;
}

/* Championship 2024 */
.championship-2024 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.champ-2024-header {
  text-align: center;
  margin-bottom: 3rem;
}

.champ-2024-header h3 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 1rem 0;
}

.medal-summary-2024 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  margin-bottom: 3rem;
}

.summary-stat {
  text-align: center;
}

.summary-number {
  font-size: 4rem;
  font-weight: 800;
  color: #2196f3;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.summary-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.summary-breakdown {
  display: flex;
  gap: 1.5rem;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  background: white;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.gold-item {
  color: var(--color-gold-dark);
}

.silver-item {
  color: #c0c0c0;
}

.bronze-item {
  color: #cd7f32;
}

/* Medals Grid 2024 */
.medals-grid-2024 {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.medal-winner-2024 {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(212, 175, 55, 0.12) 100%);
  border: 3px solid var(--color-gold);
  border-radius: 20px;
}

.medal-icon-large {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.medal-winner-2024 strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.silver-medalists-2024,
.bronze-medalists-2024 {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  padding: 2.5rem 2rem;
}

.silver-medalists-2024 h4,
.bronze-medalists-2024 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2rem;
  text-align: center;
}

.medalist-grid-2024 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.medalist-card-2024 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  text-align: center;
}

.medalist-card-2024:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.medal-mini {
  font-size: 2.5rem;
}

.medalist-card-2024 strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.medalist-card-2024 span:last-child {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.consistency-note {
  font-size: 0.85rem;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin-top: 0.5rem;
  font-style: italic;
}

.top-5-finishes {
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 152, 0, 0.08);
  border-radius: 12px;
  margin-top: 2rem;
}

.top-5-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: #ff9800;
  color: white;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-right: 0.75rem;
}

.top-5-finishes strong {
  font-size: 1.1rem;
  color: var(--color-text);
}

/* World Championship 2024 */
.world-championship-2024 {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(139, 195, 74, 0.05) 100%);
  border: 2px solid rgba(76, 175, 80, 0.25);
  border-radius: 24px;
  padding: 3.5rem 3rem;
  margin-bottom: 4rem;
}

.world-header-2024 {
  text-align: center;
  margin-bottom: 3rem;
}

.world-badge-2024 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.world-header-2024 h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.world-date-2024 {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.world-medals-2024 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.world-medal-card-2024 {
  padding: 3rem 2rem;
  border-radius: 20px;
  text-align: center;
}

.world-silver {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.15) 0%, rgba(169, 169, 169, 0.15) 100%);
  border: 3px solid #c0c0c0;
}

.world-medal-visual {
  font-size: 5rem;
  margin-bottom: 1.5rem;
}

.world-medal-card-2024 strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.world-note {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-top: 1rem;
}

.world-bronze-group {
  background: rgba(205, 127, 50, 0.1);
  border: 2px solid rgba(205, 127, 50, 0.3);
  border-radius: 20px;
  padding: 2.5rem 2rem;
}

.world-bronze-group h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 1.5rem;
}

.world-bronze-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.world-bronze-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.world-bronze-card strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-right: 0.5rem;
}

.world-top-5 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
}

.world-top-5 h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  text-align: center;
}

.top-5-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.top-5-list span {
  padding: 0.75rem 1.25rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-light);
}

/* Viskov Junior 2024 */
.viskov-junior-2024 {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(103, 58, 183, 0.05) 100%);
  border: 2px solid rgba(156, 39, 176, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.viskov-2024-header {
  text-align: center;
  margin-bottom: 3rem;
}

.viskov-badge-2024 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.viskov-2024-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.viskov-2024-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}

.viskov-2024-photo {
  position: relative;
}

.viskov-2024-photo img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid #9c27b0;
  box-shadow: 0 8px 24px rgba(156, 39, 176, 0.2);
}

.junior-championship-2024 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.junior-badge-2024 {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(156, 39, 176, 0.1);
  border: 1px solid rgba(156, 39, 176, 0.3);
  color: #9c27b0;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.junior-championship-2024 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.championship-location-2024 {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.viskov-journey-2024 {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.viskov-journey-2024 h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.journey-highlight {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(156, 39, 176, 0.05);
  border-radius: 12px;
  margin-bottom: 1rem;
}

.journey-highlight:last-child {
  margin-bottom: 0;
}

.journey-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.journey-highlight p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

.viskov-cups-2024 {
  background: rgba(156, 39, 176, 0.08);
  border-left: 4px solid #9c27b0;
  border-radius: 12px;
  padding: 2rem;
}

.viskov-cups-2024 h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.cups-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cup-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: white;
  border-radius: 8px;
}

.cup-medal {
  font-size: 2rem;
  flex-shrink: 0;
}

.cup-item span:last-child {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-light);
}

/* Junior Team 2024 */
.junior-team-2024 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 4rem;
}

.junior-team-header {
  text-align: center;
  margin-bottom: 3rem;
}

.team-badge-2024 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #0057b7 0%, #ffd700 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.junior-team-header h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.team-composition-2024 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.team-section h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.athletes-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.athlete-name {
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-light);
  transition: all 0.3s ease;
}

.athlete-name:hover {
  background: rgba(33, 150, 243, 0.08);
  transform: translateX(6px);
}

.team-note-2024 {
  padding: 2rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  text-align: center;
}

.team-note-2024 p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

.kutenkov-highlight {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.08) 0%, rgba(232, 168, 124, 0.08) 100%);
  border: 2px solid rgba(205, 127, 50, 0.25);
  border-radius: 16px;
}

.kutenkov-medal {
  font-size: 4rem;
  flex-shrink: 0;
}

.kutenkov-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kutenkov-info strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.kutenkov-info span {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.kutenkov-info p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0.5rem 0 0 0;
}

/* Cups Dominance 2024 */
.cups-dominance-2024 {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.05) 0%, rgba(255, 193, 7, 0.05) 100%);
  border: 2px solid rgba(255, 152, 0, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.cups-header-2024 {
  text-align: center;
  margin-bottom: 3rem;
}

.cups-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.cups-header-2024 h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.cups-tournaments {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.tournament-card {
  background: white;
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.tournament-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.highlight-tournament {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.tournament-name {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.tournament-icon {
  font-size: 2.5rem;
}

.tournament-name strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.tournament-medals {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.medal-count-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 100px;
}

.count-medal {
  font-size: 2rem;
}

.count-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text);
}

.tournament-highlights {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 1.5rem;
}

.tournament-highlights p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

.tournament-victory {
  text-align: center;
}

.victory-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--color-gold);
  color: white;
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.victory-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.other-cups {
  background: white;
  border-radius: 20px;
  padding: 2.5rem;
}

.other-cups h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2rem;
  text-align: center;
}

.cups-list-2024 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cup-result {
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cup-result strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.cup-result span {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Rising Stars 2024 */
.rising-stars-2024 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.stars-header {
  text-align: center;
  margin-bottom: 3rem;
}

.stars-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.stars-header h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.stars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.star-card {
  padding: 2.5rem 2rem;
  background: rgba(255, 193, 7, 0.05);
  border: 2px solid rgba(255, 193, 7, 0.2);
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.star-card:hover {
  transform: translateY(-6px);
  border-color: #ffc107;
  box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2);
}

.star-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.star-card strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.star-category {
  display: block;
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

.star-card p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
}

/* Year Summary 2024 */
.year-summary-2024 {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
  border: 2px solid rgba(0, 87, 183, 0.2);
  border-radius: 24px;
  padding: 4rem 3rem;
}

.year-summary-2024 h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
}

.summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.summary-stat-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.summary-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.summary-stat-number {
  font-size: 4rem;
  font-weight: 800;
  color: #0057b7;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.summary-stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.key-achievements-2024 {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 3rem;
}

.key-achievements-2024 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.achievements-list-2024 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.achievements-list-2024 li {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.achievements-list-2024 li:hover {
  background: rgba(0, 87, 183, 0.05);
  transform: translateX(8px);
}

.transition-note {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2.5rem;
  background: rgba(255, 152, 0, 0.08);
  border-left: 4px solid #ff9800;
  border-radius: 16px;
}

.transition-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.transition-text h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.transition-text p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .lebid-showcase,
  .viskov-2024-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .lebid-photo-wrapper,
  .viskov-2024-photo {
    margin: 0 auto;
  }

  .world-medals-2024,
  .team-composition-2024 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .new-generation {
    padding: 5rem 0;
  }

  .lebid-breakthrough,
  .viskov-junior-2024,
  .cups-dominance-2024,
  .rising-stars-2024,
  .year-summary-2024 {
    padding: 2.5rem 2rem;
  }

  .championship-2024,
  .world-championship-2024,
  .junior-team-2024 {
    padding: 2rem;
  }

  .medal-summary-2024 {
    flex-direction: column;
    gap: 1.5rem;
  }

  .summary-breakdown {
    flex-wrap: wrap;
    justify-content: center;
  }

  .medalist-grid-2024,
  .stars-grid {
    grid-template-columns: 1fr;
  }

  .summary-stats-grid {
    grid-template-columns: 1fr;
  }

  .tournament-medals {
    flex-wrap: wrap;
  }

  .kutenkov-highlight,
  .transition-note {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .lebid-photo-wrapper {
    width: 220px;
    height: 220px;
  }

  .viskov-2024-photo img {
    height: 220px;
  }

  .summary-stat-number,
  .summary-stat-number {
    font-size: 3rem;
  }
}

/* ============================================
   PERIOD 13: 2025 - CONTINUING EXCELLENCE
   ============================================ */

.period-2025 {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  padding: 8rem 0;
  position: relative;
}

.period-2025 .period-inner {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.period-2025.visible .period-inner {
  opacity: 1;
  transform: translateY(0);
}

.period-2025 .period-header {
  text-align: center;
  margin-bottom: 5rem;
}

.period-2025 .period-year {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(139, 195, 74, 0.15) 100%);
  border: 2px solid rgba(76, 175, 80, 0.3);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #4caf50;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  opacity: 1;
}

.period-2025.visible .period-year {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.period-2025 .period-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 1rem;
  opacity: 1;
}

.period-2025.visible .period-title {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.period-2025 .period-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  font-weight: 500;
  opacity: 1;
}

.period-2025.visible .period-subtitle {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* Animate Items */
.period-2025 .animate-item {
  opacity: 1;
  transform: translateY(40px);
}

.period-2025.visible .animate-item {
  animation: fadeInUp 0.8s ease-out forwards;
}

.period-2025.visible .animate-item:nth-child(1) {
  animation-delay: 0.6s;
}

.period-2025.visible .animate-item:nth-child(2) {
  animation-delay: 0.7s;
}

.period-2025.visible .animate-item:nth-child(3) {
  animation-delay: 0.8s;
}

.period-2025.visible .animate-item:nth-child(4) {
  animation-delay: 0.9s;
}

.period-2025.visible .animate-item:nth-child(5) {
  animation-delay: 1s;
}

.period-2025.visible .animate-item:nth-child(6) {
  animation-delay: 1.1s;
}

.period-2025.visible .animate-item:nth-child(7) {
  animation-delay: 1.2s;
}

.period-2025.visible .animate-item:nth-child(8) {
  animation-delay: 1.3s;
}

/* World Championship 2025 */
.world-championship-2025 {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.05) 0%, rgba(3, 169, 244, 0.05) 100%);
  border: 2px solid rgba(33, 150, 243, 0.2);
  border-radius: 24px;
  padding: 3.5rem 3rem;
  margin-bottom: 4rem;
}

.world-2025-header {
  text-align: center;
  margin-bottom: 3rem;
}

.world-2025-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #2196f3 0%, #03a9f4 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.world-2025-header h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.world-2025-date {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.world-2025-medal {
  max-width: 700px;
  margin: 0 auto;
}

.silver-medal-showcase {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.12) 0%, rgba(169, 169, 169, 0.12) 100%);
  border: 3px solid #c0c0c0;
  border-radius: 20px;
  margin-bottom: 2rem;
}

.medal-visual-2025 {
  font-size: 5rem;
  flex-shrink: 0;
}

.medalist-info-2025 {
  flex: 1;
}

.medalist-info-2025 strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.medalist-info-2025 .category {
  display: block;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.medal-note {
  font-size: 1rem;
  color: var(--color-text-light);
  margin: 0;
}

.status-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 152, 0, 0.08);
  border-left: 4px solid #ff9800;
  border-radius: 12px;
}

.info-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.status-note p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
}

/* European Championship 2025 */
.european-championship-2025 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 3.5rem 3rem;
  margin-bottom: 4rem;
}

.euro-2025-header {
  text-align: center;
  margin-bottom: 3rem;
}

.euro-2025-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.euro-2025-header h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.eyof-highlight {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
}

.eyof-badge {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: var(--color-gold);
  color: white;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.eyof-highlight h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.eyof-medal {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: white;
  border-radius: 16px;
}

.bronze-icon {
  font-size: 4rem;
  flex-shrink: 0;
}

.eyof-details strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.eyof-date {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.eyof-medalists {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2rem;
}

.eyof-medalists h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2rem;
}

.eyof-medals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.eyof-medal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  background: white;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.eyof-medal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.gold-card {
  border: 2px solid var(--color-gold);
}

.silver-card {
  border: 2px solid #c0c0c0;
}

.bronze-card {
  border: 2px solid #cd7f32;
}

.medal-emoji {
  font-size: 2.5rem;
}

.eyof-medal-card strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.eyof-medal-card span:last-child {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.euro-cadet-note {
  text-align: center;
  padding: 2rem;
  background: rgba(156, 39, 176, 0.05);
  border-radius: 12px;
}

.euro-cadet-note h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.euro-cadet-note p {
  font-size: 1rem;
  color: var(--color-text-light);
  margin: 0;
}

/* Junior Cups 2025 */
.junior-cups-2025 {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.05) 0%, rgba(255, 193, 7, 0.05) 100%);
  border: 2px solid rgba(255, 152, 0, 0.2);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.junior-cups-header {
  text-align: center;
  margin-bottom: 3rem;
}

.junior-cups-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.junior-cups-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

/* Yudanov 2025 */
.yudanov-2025 {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin-bottom: 3rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.yudanov-photo-section {
  text-align: center;
  margin-bottom: 2rem;
}

.yudanov-photo-section img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #ff9800;
  box-shadow: 0 8px 24px rgba(255, 152, 0, 0.2);
}

.yudanov-achievements h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2rem;
}

.triple-gold {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.gold-cup {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 215, 0, 0.08);
  border-left: 4px solid var(--color-gold);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.gold-cup:hover {
  transform: translateX(8px);
  background: rgba(255, 215, 0, 0.15);
}

.cup-medal {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.cup-info strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.cup-info span {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.yudanov-analysis {
  padding: 2rem;
  background: rgba(255, 152, 0, 0.05);
  border-radius: 12px;
}

.yudanov-analysis p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

/* Other Junior Stars */
.other-junior-stars {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin-bottom: 3rem;
}

.other-junior-stars h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2.5rem;
}

.junior-star-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.star-2025-card {
  padding: 2rem;
  background: rgba(0, 0, 0, 0.02);
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.star-2025-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #ff9800;
}

.highlight-star {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.star-photo-placeholder {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.star-initial {
  font-size: 2rem;
  font-weight: 800;
  color: white;
}

.star-2025-card strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.star-category {
  display: block;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

.star-medals-2025 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mini-gold,
.mini-silver,
.mini-bronze {
  padding: 0.4rem 0.75rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
}

.mini-gold {
  background: rgba(255, 215, 0, 0.15);
  color: var(--color-gold-dark);
}

.mini-silver {
  background: rgba(192, 192, 192, 0.15);
  color: #666;
}

.mini-bronze {
  background: rgba(205, 127, 50, 0.15);
  color: #cd7f32;
}

.star-note {
  font-size: 0.85rem;
  color: var(--color-text-light);
  line-height: 1.5;
  font-style: italic;
  margin: 0;
}

/* Tournament Sections */
.maribor-success,
.kaunas-dominance {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.tournament-flag {
  text-align: center;
  margin-bottom: 1.5rem;
}

.tournament-flag .flag-svg {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

.maribor-success h4,
.kaunas-dominance h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2rem;
}

.maribor-medals,
.kaunas-incredible {
  text-align: center;
}

.medal-count-display,
.kaunas-breakdown {
  display: flex;
  justify-content: center;
  gap: 2rem;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.count-item {
  padding: 0.75rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 100px;
}

.maribor-winners {
  text-align: left;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
}

.maribor-winners p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 0.75rem;
}

.maribor-winners p:last-child {
  margin-bottom: 0;
}

.kaunas-stats {
  margin-bottom: 1.5rem;
}

.stat-big {
  font-size: 5rem;
  font-weight: 800;
  color: #ff9800;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Cadet Cups 2025 */
.cadet-cups-2025 {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(103, 58, 183, 0.05) 100%);
  border: 2px solid rgba(156, 39, 176, 0.2);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.cadet-cups-header {
  text-align: center;
  margin-bottom: 3rem;
}

.cadet-cups-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.cadet-cups-header h3 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
}

/* Gyor Victory */
.gyor-victory {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
  border: 3px solid var(--color-gold);
  border-radius: 20px;
  padding: 3rem;
  margin-bottom: 3rem;
}

.gyor-banner {
  text-align: center;
  margin-bottom: 2.5rem;
}

.gyor-banner h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.first-place-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--color-gold);
  color: white;
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 700;
}

.medal-count-huge {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.count-huge {
  font-size: 2.5rem;
  font-weight: 800;
  padding: 1rem 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.gyor-champions {
  background: white;
  border-radius: 16px;
  padding: 2rem;
}

.gyor-champions h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 1.5rem;
}

.champions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.champions-list span {
  padding: 0.75rem 1.25rem;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-light);
}

/* Other Cadet Cups */
.other-cadet-cups {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cadet-tournament-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.cadet-tournament-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.tournament-flag-inline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.flag-svg-small {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.tournament-flag-inline strong {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.tournament-medals-inline {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.cadet-tournament-card p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

/* Senior Success 2025 */
.senior-success-2025 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.senior-header-2025 {
  text-align: center;
  margin-bottom: 3rem;
}

.senior-badge-2025 {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #0057b7 0%, #ffd700 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.senior-header-2025 h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.grand-slams-2025 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2rem;
  text-align: center;
}

.gs-victory-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.gs-location {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.location-flag {
  font-size: 2.5rem;
}

.gs-location strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
}

.gs-champion {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
}

.champion-medal {
  font-size: 3.5rem;
  flex-shrink: 0;
}

.champion-info strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.champion-info span {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.gs-medals-other {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  padding: 2rem;
  margin-top: 2rem;
}

.gs-medals-other h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.gs-medals-other ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gs-medals-other li {
  font-size: 1rem;
  color: var(--color-text-light);
  padding: 1rem 1.5rem;
  background: white;
  border-radius: 8px;
}

/* European Championships Senior */
.euro-senior-2025,
.euro-u23-2025 {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2rem;
}

.euro-senior-2025 h4,
.euro-u23-2025 h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2rem;
}

.euro-medal-senior {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: white;
  border-radius: 12px;
}

.bronze-big {
  font-size: 4rem;
  flex-shrink: 0;
}

.euro-medalist-info strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.euro-medalist-info span {
  display: block;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

.euro-medalist-info p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
}

.u23-medals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.u23-medal-card {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 12px;
}

.medal-big {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.u23-medal-card strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.u23-medal-card span {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.u23-top5 {
  padding: 2rem;
  background: white;
  border-radius: 12px;
}

.u23-top5 h5 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  text-align: center;
}

.u23-top5 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.u23-top5 li {
  font-size: 0.95rem;
  color: var(--color-text-light);
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

/* European Opens */
.euro-opens-2025 {
  background: rgba(33, 150, 243, 0.05);
  border-radius: 16px;
  padding: 2.5rem;
  margin-top: 2rem;
}

.euro-opens-2025 h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2rem;
}

.opens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.open-gold {
  padding: 1.5rem;
  background: white;
  border-left: 4px solid var(--color-gold);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.open-gold:hover {
  transform: translateX(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.open-gold strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.open-gold span {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Athletes Progress Timeline */
.athletes-progress {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
  border: 2px solid rgba(0, 87, 183, 0.2);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.progress-header {
  text-align: center;
  margin-bottom: 3rem;
}

.progress-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #0057b7 0%, #ffd700 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.progress-header h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.progress-timeline {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.athlete-timeline {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.athlete-timeline:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.highlight-timeline {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.success-story {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(139, 195, 74, 0.08) 100%);
  border: 2px solid rgba(76, 175, 80, 0.3);
}

.athlete-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.athlete-timeline-header strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.timeline-category {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
  padding: 0.4rem 1rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 100px;
}

.timeline-path {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  padding-left: 3rem;
}

.timeline-path::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 3px;
  background: linear-gradient(180deg, #0057b7 0%, #ffd700 100%);
}

.timeline-year {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
}

.timeline-year::before {
  content: '';
  position: absolute;
  left: -2.35rem;
  top: 0.4rem;
  width: 12px;
  height: 12px;
  background: #0057b7;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #0057b7;
}

.year-label {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0057b7;
  min-width: 60px;
}

.achievement {
  flex: 1;
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  padding: 0.75rem 1.25rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

.gold-achievement {
  background: rgba(255, 215, 0, 0.15);
  border-left: 4px solid var(--color-gold);
  font-weight: 600;
}

.timeline-note {
  padding: 1.5rem;
  background: rgba(33, 150, 243, 0.08);
  border-left: 4px solid #2196f3;
  border-radius: 12px;
}

.success-note {
  background: rgba(76, 175, 80, 0.1);
  border-left-color: #4caf50;
}

.timeline-note p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

/* National Championships 2025 */
.national-championships-2025 {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
}

.national-header {
  text-align: center;
  margin-bottom: 3rem;
}

.national-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #0057b7 0%, #ffd700 100%);
  color: white;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.national-header h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.national-events {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.national-event {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  padding: 2.5rem;
}

.national-event h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.event-details {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.event-details p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.event-details p:last-child {
  margin-bottom: 0;
}

.team-standings h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.standings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.standings-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: white;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.standings-list li:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.place-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0057b7;
  min-width: 40px;
}

.standings-list strong {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.medals-inline {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 100px;
}

/* Year Summary 2025 */
.year-summary-2025 {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.08) 0%, rgba(255, 215, 0, 0.08) 100%);
  border: 2px solid rgba(0, 87, 183, 0.25);
  border-radius: 24px;
  padding: 4rem 3rem;
}

.year-summary-2025 h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 3rem;
}

.summary-stats-2025 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.stat-card-2025 {
  text-align: center;
  padding: 2.5rem 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.stat-card-2025:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-number-2025 {
  font-size: 4rem;
  font-weight: 800;
  color: #0057b7;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.stat-label-2025 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.key-achievements-2025 {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 3rem;
}

.key-achievements-2025 h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.achievements-list-2025 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.achievements-list-2025 li {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.achievements-list-2025 li:hover {
  background: rgba(0, 87, 183, 0.05);
  transform: translateX(8px);
}

.looking-forward {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2.5rem;
  background: rgba(76, 175, 80, 0.08);
  border-left: 4px solid #4caf50;
  border-radius: 16px;
}

.forward-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.forward-text h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.forward-text p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .silver-medal-showcase,
  .eyof-medal,
  .euro-medal-senior,
  .gs-champion {
    flex-direction: column;
    text-align: center;
  }

  .u23-medals,
  .summary-stats-2025 {
    grid-template-columns: 1fr;
  }

  .junior-star-grid,
  .opens-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .period-2025 {
    padding: 5rem 0;
  }

  .world-championship-2025,
  .european-championship-2025,
  .junior-cups-2025,
  .cadet-cups-2025,
  .senior-success-2025,
  .athletes-progress,
  .national-championships-2025,
  .year-summary-2025 {
    padding: 2.5rem 2rem;
  }

  .yudanov-2025,
  .other-junior-stars,
  .maribor-success,
  .kaunas-dominance {
    padding: 2rem;
  }

  .medal-count-display,
  .kaunas-breakdown,
  .medal-count-huge {
    flex-direction: column;
    gap: 1rem;
  }

  .eyof-medals-grid,
  .junior-star-grid {
    grid-template-columns: 1fr;
  }

  .athlete-timeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .timeline-path {
    padding-left: 2rem;
  }

  .timeline-year {
    flex-direction: column;
    gap: 0.5rem;
  }

  .looking-forward {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .yudanov-photo-section img {
    width: 220px;
    height: 220px;
  }

  .stat-big,
  .stat-number-2025 {
    font-size: 3rem;
  }

  .medal-visual-2025,
  .bronze-icon,
  .champion-medal,
  .bronze-big,
  .medal-big {
    font-size: 3rem;
  }
}

.championships-intro {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-weight: 500;
  text-align: center;
  margin-top: 1rem;
}

.featured-event {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.event-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--color-gold);
  color: white;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.event-note {
  font-weight: 600;
  color: var(--color-gold-dark);
  font-style: italic;
}

.place-number {
  font-size: 1.5rem;
  min-width: 40px;
  text-align: center;
}

.championships-summary {
  background: white;
  border-radius: 16px;
  padding: 3rem;
  margin-top: 3rem;
}

.championships-summary h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2.5rem;
}

.summary-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.summary-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
}

.summary-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.summary-text strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.summary-text p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.5;
  margin: 0;
}

.kyiv-dominance {
  background: linear-gradient(135deg, rgba(0, 87, 183, 0.08) 0%, rgba(255, 215, 0, 0.08) 100%);
  border-radius: 16px;
  padding: 2.5rem;
}

.kyiv-dominance h5 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2rem;
}

.kyiv-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2rem;
}

.kyiv-total {
  text-align: center;
}

.total-number {
  display: block;
  font-size: 3.5rem;
  font-weight: 800;
  color: #0057b7;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.total-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.kyiv-note {
  text-align: center;
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 768px) {
  .summary-highlights {
    grid-template-columns: 1fr;
  }

  .kyiv-stats {
    flex-direction: column;
    gap: 1.5rem;
  }
}



/* ============================================
   PRESIDENTS TIMELINE
   ============================================ */

.presidents-section {
  padding: 6rem 0;
  background: var(--color-bg-light);
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 4rem;
}

.presidents-timeline {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
}

.president-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 2rem;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.president-item:hover {
  transform: translateX(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.president-item.current {
  border: 2px solid var(--color-primary);
  box-shadow: 0 6px 25px rgba(196, 30, 58, 0.2);
}

.president-years {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  text-align: center;
  align-self: center;
}

.president-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
  align-self: center;
}

.president-item.current .president-name::after {
  content: ' ●';
  color: var(--color-primary);
  font-size: 0.8em;
}

/* ============================================
   MISSION SECTION
   ============================================ */

.mission-section {
  padding: 6rem 0;
  background: var(--color-bg-white);
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  margin-top: 3rem;
}

.mission-card {
  padding: 3rem 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.mission-card .material-symbols-outlined {
  font-size: 4rem;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.mission-card h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.mission-card p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
}

/* ============================================
   MEMBERSHIP SECTION
   ============================================ */

.membership-section {
  padding: 6rem 0;
  background: var(--color-bg-light);
}

.membership-content {
  max-width: 1000px;
  margin: 0 auto;
}

.membership-text {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: 3rem;
}

.membership-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.membership-logo {
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.membership-logo strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.membership-logo p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
}

.membership-highlight {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
  text-align: center;
  padding: 2.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  margin-top: 3rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
  .period-content-split,
  .wc-athlete,
  .bilodid-showcase {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .wc-athlete img,
  .bilodid-showcase img {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .history-hero {
    min-height: 60vh;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

  .history-period {
    padding: 4rem 0;
  }

  .period-title {
    font-size: 2rem;
  }

  .period-text {
    font-size: 1rem;
  }

  .champions-grid,
  .olympic-grid {
    grid-template-columns: 1fr;
  }

  .medal-item {
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    padding: 1.5rem;
  }

  .medal-year {
    font-size: 1.8rem;
  }

  .president-item {
    grid-template-columns: 100px 1fr;
    gap: 1rem;
  }

  .president-years {
    font-size: 1.2rem;
  }

  .president-name {
    font-size: 1.1rem;
  }

  .mission-grid {
    grid-template-columns: 1fr;
  }

  .games-champions {
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  .history-intro {
    padding: 3rem 0;
  }

  .intro-text {
    font-size: 1rem;
  }

  .foundation-leaders,
  .team-medals {
    grid-template-columns: 1fr;
  }

  .coach-tribute,
  .decade-highlight,
  .year-2011-highlight,
  .award-badge {
    padding: 2rem 1.5rem;
  }

  .stat-card {
    padding: 2rem 1.5rem;
  }

  .stat-number {
    font-size: 3.5rem;
  }
}

/* ============================================
   PERIOD SECTIONS - BASE STYLES
   ============================================ */

.history-period {
  position: relative;
  padding: 2rem 0 6rem;
  background: var(--color-bg-white); /* Єдиний білий фон */
  opacity: 1;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.history-period.visible {
  opacity: 1;
  transform: translateY(0);
}

.period-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1.02; /* Зменшено для ледь помітного ефекту */
  pointer-events: none;
}