@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
* {
  box-sizing: border-box;
 /* cursor: none; */
}
html, body {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  background: black;
  text-align: left;
  font-family: Montserrat, sans-serif;
}
header {

 
 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  justify-content: space-between;
  align-items: center;
  display: block !important;
  padding: 15px 60px;
}
@media screen and (max-width: 750px) {
  header {
    padding: 0 20px;
  }
}

main {
  height: 100%;
  color: white;
}
main section h1, main section h2 {
  
  margin: 0;
}
main section h1 {
  font-size: 32px;
}
main section h2 {
  font-size: 14px;
}
main section p {
  margin: 0;
}
main .intro-section {
  padding-top: 25px; 
  padding-left: 10px;
  padding-right: 10px;

  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url('./bg.jpg');
  background-position: center;
  background-size: cover;
}
main .intro-section h1 {
  margin-bottom: 8px;
  font-size: 42px;
  text-transform: uppercase;
}

@media screen and (max-width: 726px) {
  main .intro-section h1 {
    font-size: 22px !important;
    line-height: 1.2;
  }

  main .intro-section h2 {
    font-size: 12px !important;
  }
}

main .intro-section h2 {
  font-size: 24px;
  font-weight: lighter;
}

@media screen and (max-width: 1255px) {
  main .intro-section h1 {
    font-size: 32px;
  }
  main .intro-section h2 {
    font-size: 20px;
  }
 
}
@media screen and (max-width: 1170px) {
  main .intro-section h1 {
    font-size: 25px;
  }
  main .intro-section h2 {
    font-size: 16px;
  }
  main .aims h1 {
    font-size: 25px;
    
  }
}

@media screen and (max-width: 956px) {
  main .intro-section h1 {
    font-size: 20px;
  }
  main .intro-section h2 {
    font-size: 12px;
  }
 
}


@media screen and (max-width: 829px) {
  main .intro-section h1 {
    font-size: 18px;
  }
 
}
@media screen and (max-width: 775px) {
  main .intro-section h1 {
    font-size: 16px;
  }
 
}


.intro-break {
  white-space: normal;
}

.intro-break-publication {
  display: inline-block;
  width: 100%;
  white-space: normal !important;
}

@media (max-width: 726px) {
  .intro-break {
    display: block;
    margin-top: 4px; 
  }
}


main .normal-section {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 10px;
  color: white;
}



main .normal-section .titles {
  display: flex;
  flex-direction: column; /* Размещаем заголовки вертикально */
  align-items: center; /* Центрируем заголовки */
  gap: 0.1rem; /* Определяем расстояние между заголовками */
  line-height: 1.2;
  margin: 0; 

}
main .normal-section:nth-child(odd) {
  background: #eceffc;
  color: black;
}
main .normal-section:nth-child(even) {
  background: #1a1e23;
  color: white;
}
main #about {
  padding: 30px 0;
}
main #about .description {
  display: grid;
  gap: 24px;
  width: 40vw;
}
main #about .description p:nth-child(1) {
  animation-delay: 0.6s;
}
main #about .description p:nth-child(2) {
  animation-delay: 0.7s;
}
main #about .description p:nth-child(3) {
  animation-delay: 0.8s;
}
main #about .description p:nth-child(4) {
  animation-delay: 0.9s;
}

main #aims .description {
  display: grid;
  gap: 24px;
  width: 70vw; /* Ограничивает ширину содержимого до 60% ширины окна */
 
}


/* === Global link styling (accented links) === */

a {
  color: #00b4db;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

a:hover {
  color: #00d1ff;
  text-shadow: 0 0 8px rgba(0, 180, 219, 0.5);
}

.section-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  white-space: normal !important;  
  overflow-wrap: break-word; 
  
}

.publication-title {
  white-space: normal !important;
}

.section-title .intro-break {
  display: block;
}

.section-title .intro-break-publication {
  display: block;
}

.section-title.dark {
  color: #000; 
}

.section-title.light {
  color: #fff; 
}





.glitch.active span:not(:last-child) {
  animation-duration: 0.3s;
}
.glitch.active span:nth-child(odd) {
  animation-name: slide-from-left;
}
.glitch.active span:nth-child(even) {
  animation-name: slide-from-right;
}
.glitch.active span:last-child {
  animation: reveal steps(1) forwards;
  animation-delay: 0.6s;
}
.glitch span:not(:last-child) {
  --ratio: calc(100% / var(--slice-count));
  --top: calc(var(--ratio) * (var(--i) - 1));
  --bottom: calc(var(--ratio) * (var(--slice-count) - var(--i)));
  position: absolute;
  white-space: nowrap;
  clip-path: inset(var(--top) 0 var(--bottom) 0);
}
.glitch span:last-child {
  opacity: 0;
}
@keyframes slide-from-left {
  from {
    transform: translateX(-20%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-from-right {
  from {
    transform: translateX(20%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes reveal {
  to {
    opacity: 1;
  }
}


/* === logo === */
.logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  line-height: 150px;
  text-align: center;
  text-decoration: none;
  color: white;
  position: relative;   /* нужно, чтобы псевдоэлемент позиционировался */
}
.logo img {
  width: 50px;
  height: 50px;
  margin-right: 4px;
}



.logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;        /* радиус свечения — можно менять */
  height: 180px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
      circle,
      rgba(0,180,219,0.55) 0%,
      rgba(0,180,219,0.25) 35%,
      rgba(0,180,219,0.05) 70%,
      transparent 100%
  );
  filter: blur(18px);   /* мягкое размытие */
  z-index: -1;          /* СВЕЧЕНИЕ ЗАД лого */
  border-radius: 50%;
  pointer-events: none;
}

.avatar {
  width: 110px;
  height: 110px;
 
  margin-bottom: 15px;

  opacity: 0;
  transform: scale(0.6);
  animation: bump-in 0.5s 0.3s forwards;
}

.logo .avatar {
  width: 90px;
  height: 90px;
}

.c-command {
  position: absolute;
    top: 40px;              /* поднимаем/опускаем, чтобы совпало по вертикали с меню */
    right: 10px;            /* двигаем прямо к vertical-menu */
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 500;
 
}

.c-command img {
  width: auto;
  height: 50px;
  margin-right: 4px;
}

@media (max-width: 768px) {
  .c-command {
        position: static !important;   /* убираем absolute */
        margin-left: 10px;
        display: flex;
        justify-content:flex-start;
        align-items: center;
        flex-direction: row;
        gap: 6px;
    }

    .c-command img {
  width: auto;
  height: 40px;
}

}



/* === вертикальное меню === */
.underline-menu {
    position: fixed;
    top: 27%;
    right: 1%;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;

    border-left: 2px solid rgba(255,255,255,0.25); /* СЕРАЯ ЛИНИЯ */
    z-index: 200;

    mix-blend-mode: difference; /* автоматическая смена цвета */
}

/* Базовая типографика */
.underline-menu li a {
    color: white;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 300;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.25s ease;
}

/* --- Голубая линия активного пункта --- */
.underline-menu li.active::before {
    content: "";
    position: absolute;
    left: -16px;       /* поверх серой линии */
    width: 2px;
    height: 14px;      /* маленькая, КАК В ТВОЁМ ПРИМЕРЕ */
    background: #00b4db;

    top: 50%;
    transform: translateY(-50%); /* строго по центру строки */
}

/* чтобы ::before работал */
.underline-menu li {
    position: relative;
}

/* hover — просто подсветка текста */
.underline-menu li a:hover {
    color: #00d1ff;
}




/* === бургер === */


#burger-toggle {
  position: absolute;
  appearance: none;
  opacity: 0;
}
#burger-toggle:checked ~ .overlay {
  opacity: 1;
  transform: scale(160);
}
#burger-toggle:checked ~ .burger-nav {
  pointer-events: auto;
}
#burger-toggle:checked ~ .burger-nav ul li {
  opacity: 1;
  transform: translateX(0);
}
#burger-toggle:checked ~ main {
  opacity: 0;
  pointer-events: none;
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(1) {
  transform: translateY(calc(var(--burger-menu-radius) / 5)) rotate(45deg);
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(2) {
  transform: scaleX(0);
}
#burger-toggle:checked ~ .burger-menu .line:nth-child(3) {
  transform: translateY(calc(var(--burger-menu-radius) / -5)) rotate(-45deg);
}
.burger-menu {
  --burger-menu-radius: 4em;
  position: fixed;
  top: 65px;
  right: 60px;
  z-index: 100;
  display: none;
  width: var(--burger-menu-radius);
  height: var(--burger-menu-radius);
  background: white;
  border: solid 2px rgba(149, 166, 167, 0.4);
  border-radius: 50%;
  outline: none;
  transition: 0.5s ease-in-out;
}
@media screen and (max-width: 750px) {
  .burger-menu {
    right: 18px;
  }
}
.burger-menu .line {
  position: absolute;
  left: 25%;
  width: 50%;
  height: 3px;
  background: rgba(43, 61, 79, 0.3);
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
  transition: all 0.5s ease;
}
.burger-menu .line:nth-child(1) {
  top: 30%;
}
.burger-menu .line:nth-child(2) {
  top: 50%;
}
.burger-menu .line:nth-child(3) {
  top: 70%;
}
.burger-menu .line::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2980b9;
  transform: translateX(-100%);
  transition: all 0.25s ease;
}
.burger-menu .line:nth-child(2)::after {
  transition-delay: 0.1s;
}
.burger-menu .line:nth-child(3)::after {
  transition-delay: 0.2s;
}
.burger-menu:hover {
  box-shadow: 0.4px 0.4px 0.8px rgba(0, 0, 0, 0.042), 1px 1px 2px rgba(0, 0, 0, 0.061), 1.9px 1.9px 3.8px rgba(0, 0, 0, 0.075), 3.4px 3.4px 6.7px rgba(0, 0, 0, 0.089), 6.3px 6.3px 12.5px rgba(0, 0, 0, 0.108), 15px 15px 30px rgba(0, 0, 0, 0.15);
}
.burger-menu:hover .line::after {
  transform: translateX(0);
}

/*----неясно что такое */
.overlay {
  position: fixed;
  top: 45px;
  right: 80px;
  width: 2em;
  height: 2em;
  background: #1a5780;
  border-radius: 50%;
  opacity: 0;
  transition: 0.5s ease-in-out;
  will-change: transform;
}
.burger-nav {
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 80px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  pointer-events: none;
}

.burger-nav ul {
  position: fixed;
  z-index: 101;
  display: flex;
  flex-direction: column;
  align-items: start;
  list-style-type: none;
}
.burger-nav ul li {
  padding: 6px 0;
  opacity: 0;
  margin: 0.2em 1em; 
  
  transition: 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
}
.burger-nav ul li:nth-child(odd) {
  transform: translateX(-100%);
}
.burger-nav ul li:nth-child(even) {
  transform: translateX(100%);
}
.burger-nav ul li:nth-child(1) {
  transition-delay: 0.05s;
}
.burger-nav ul li:nth-child(2) {
  transition-delay: 0.1s;
}
.burger-nav ul li:nth-child(3) {
  transition-delay: 0.15s;
}
.burger-nav ul li:nth-child(4) {
  transition-delay: 0.2s;
}
.burger-nav ul li:nth-child(5) {
  transition-delay: 0.25s;
}
.burger-nav ul li a {
  position: relative;
  display: block;
  padding: 5px;
  font-size: 1.5em;
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  transition: 0.5s;
}
.burger-nav ul li a::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #ff4281;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
}
@media screen and (max-width: 750px) {
  .burger-nav ul li a::after {
    transition: none;
  }
}
.burger-nav ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
@media screen and (max-width: 750px) {
  .burger-nav ul li a:hover::after {
    transform: scaleX(0);
  }
}


@media screen and (max-width: 750px) {
  .underline-menu {
    display: none;
  }
  .burger-menu {
    display: block;
  }
  .logo {
    padding-top: 20px;
  }
}

/*----неясно что такое */



/*----кнопка */
.btn {
  --hue: 204;
  position: relative;
  padding: 1rem 1.5rem;
  margin-top: 40px;
  font-size: 0.8rem;
  line-height: 1.5;
  text-decoration: none;
  background-color: hsl(var(--hue), 70%, 53%);
  border: 1px solid hsl(var(--hue), 70%, 53%);
  outline: transparent;
  overflow: hidden;
  cursor: none;
  user-select: none;
  white-space: nowrap;
  transition: 0.3s;
}

.intro-section .btn.btn-ghost.btn-gradient {
  font-size: 14px;   /* сейчас у тебя ~20px, это ~в 1.4 раза меньше */
}
@media screen and (max-width: 750px) {
  .btn {
    margin-top: 20px;
    font-size: 0.7rem;
  }
}
.btn:hover {
  background: hsl(var(--hue), 70%, 43%);
}

.btn-ghost {
  color: hsl(var(--hue), 70%, 53%);
  background-color: transparent;
  border-color: hsl(var(--hue), 70%, 53%);
}
.btn-ghost:hover {
  color: white;
  background: hsl(var(--hue), 70%, 53%);
}
.btn-through {
  transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-through::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsl(var(--hue), 70%, 53%);
  transform: scaleX(0);
  transform-origin: right;
  mix-blend-mode: color-dodge;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-through:hover {
  color: white;
  background: transparent;
}
.btn-through:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}



/*--- таймлайн расписания-----*/
.marker {
  position: relative;
  --marker-radius: 1em;
  --marker-diameter: calc(var(--marker-radius) * 2);
  --marker-color: #3498db;
}
.marker .pin {
  position: relative;
  z-index: 1;
  width: var(--marker-diameter);
  height: var(--marker-diameter);
  background: var(--marker-color);
  border-radius: 50% 50% 0 50%;
  mask: radial-gradient(transparent calc(var(--marker-radius) / 2), black calc(var(--marker-radius) / 2));
  transform: rotate(45deg);
}
.marker .shadow {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--marker-radius);
  height: var(--marker-radius);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: translate(50%, -10%) rotateX(60deg);
}
.marker .shadow::before {
  position: absolute;
  content: "";
  width: var(--marker-diameter);
  height: var(--marker-diameter);
  background: transparent;
  border: 1px solid var(--marker-color);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0);
  animation: pulse 1s infinite;
}
@keyframes pulse {
  50% {
    opacity: 1;
  }
  to {
    transform: scale(1.2);
  }
}
.timeline {
  position: relative;
  display: grid;
  gap: 40px;
  padding: 0;
  margin: 0;
  max-width: 600px;
  font-size: 0.75rem;
  line-height: 1;
  color: white;
  list-style-type: none;
 /* clip-path: inset(0 0 100% 0);*/
}
.timeline.active {
  animation: expand 4s 0.6s forwards linear;
}

@media screen and (max-width: 750px) {
  .timeline {
    animation: none;
    max-width: 60vw;
    clip-path: inset(0 0 0 0);
    opacity: 0;
    transform: translateY(2%);
  }
  .timeline.active {
    animation: fade-up 1.2s 0.6s forwards;
  }
}
.timeline .timeline__line {
  position: absolute;
  top: 0;
  left: 6px;
  width: 4px;
  height: 100%;
  background: white;
}
.timeline .timeline__item .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem; /* или сколько нужно */
  
}
.timeline .timeline__item .info h4 {
  margin: 0;
  padding-left: 22px;
}
.timeline .timeline__item .info p {
  margin: 0;
  padding-left: 22px; /* Пример: отступ слева */
  text-decoration: none;
  color: #3498db;
}
.timeline .timeline__item .info .dot {
  position: relative;
  width: 16px;
  height: 16px;
  background: #1a1e23;
  border-radius: 50%;
}
.timeline .timeline__item .info .dot::before {
  position: absolute;
  content: "";
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: #1a1e23;
}
.timeline .timeline__item .info .dot::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border: 4px solid white;
  border-radius: inherit;
}
.timeline .timeline__item .info .time {
  margin-right: 8px;
  padding-left: 22px;
}
.timeline .timeline__item .info .affiliation {
  font-size: 0.75rem;  /* Меньше размер, чтобы выглядело второстепенно */
  color: #888;         /* Светло-серый цвет для ненавязчивости */
  font-style: italic;  /* Курсив, если хочешь акцент */
  margin-top: 4px;     /* Отступ сверху, чтобы не слиплось с h4 */
  padding-left: 22px;  /* Выровнять по тексту */
}
.timeline .timeline__item .content {
  margin: 1rem 0 0 3.9rem;
  line-height: 1.5;
}
@keyframes expand {
  to {
    clip-path: inset(0 0 0 0);
  }
}
.fade-up {
  opacity: 0;
  transform: translateY(20%);
}
.fade-up.active {
  animation: fade-up 0.6s forwards;
}
@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  opacity: 0;
}
.fade-in.active {
  animation: reveal 0.6s forwards;
}



/* Форма */
.contact-form {
  display: flex;
  padding: 10px;
  margin-top: 12px;      /* отступ сверху */
  margin-bottom: 10px;    /* отступ вниз от label до input */
  flex-direction: column;
  gap: 10px;
  max-width: 650px;
  margin: 20px auto; /* Центрирование формы */
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 18px; 
  margin-top: 3px;
  font-size: 16px; /* Опционально: добавляем размер шрифта */
}

.contact-form button {
  align-self: flex-start;
  background: linear-gradient(90deg, #00b4db 0%, #0083b0 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px; /* Опционально: добавляем размер шрифта */
  transition: background 0.3s ease; /* Эффект при наведении */
}

.contact-form button:hover {
  background: #3a3261; /* Цвет при наведении */
}

.btn-ghost.btn-gradient {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.5px;
  padding: 1rem 2rem;
  background: rgba(0, 180, 219, 0.4);
  border: 2px solid #00b4db;
  border-radius: 0;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%);
  transition: all 0.3s ease;
}


.btn-ghost.btn-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #00b4db 0%, #0083b0 100%);
  z-index: -1;
  transition: width 0.4s ease;
}

.btn-ghost.btn-gradient:hover::before {
  width: 100%;
}

.btn-ghost.btn-gradient:hover {
  color: white;
  border-color: transparent;
}






/* Переключатель языков */
.language-switcher {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный фон */
  padding: 10px 15px;
  border-radius: 5px;
  z-index: 1000;
}

.language-switcher a {
  color: #fff; /* Цвет текста */
  text-decoration: none;
  margin: 0 5px;
}

.language-switcher a:hover {
  text-decoration: underline;
}


/* ===== AIMS GALLERY (no-crop, точная стыковка) ===== */
.aims-gallery{
  --gap: 12px;
  --frame: 6px;           
  --h-w: 16;           
  --h-h: 9;
  display: grid;
  gap: var(--gap);
  justify-content: center;
}

/* карточка */
.aims-gallery .frame{
  margin: 0;
  background: #fff;
   box-sizing: border-box;
  border: 6px solid #fff; 
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* горизонтальные — фикс высота через ratio */
.aims-gallery .frame.h{ aspect-ratio: var(--h-w) / var(--h-h); }

/* изображение — без кропа */
.aims-gallery .frame > img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* НИКАКОГО кропа */
  display: block;
  background: #fff;      /* «письмо» сливается с каймой */
}

/* >1300px — 7 | (1,5) | (2,4) | 6 */
@media (min-width:1301px){
  .aims-gallery{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .aims-gallery .frame:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
  .aims-gallery .frame:nth-child(2){ grid-column:2; grid-row:1; }
  .aims-gallery .frame:nth-child(3){ grid-column:2; grid-row:2; }
  .aims-gallery .frame:nth-child(4){ grid-column:3; grid-row:1; }
  .aims-gallery .frame:nth-child(5){ grid-column:3; grid-row:2; }
  .aims-gallery .frame:nth-child(6){ grid-column:4; grid-row:1 / span 2; }
}

/* 800–1300px — верх: 7 | (1,5); низ: (2,4) | 6 (масштаб как на десктопе) */
@media (max-width:1300px) and (min-width:801px){
  .aims-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .aims-gallery .frame:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
  .aims-gallery .frame:nth-child(2){ grid-column:2; grid-row:1; }
  .aims-gallery .frame:nth-child(3){ grid-column:2; grid-row:2; }
  .aims-gallery .frame:nth-child(4){ grid-column:1; grid-row:3; }
  .aims-gallery .frame:nth-child(5){ grid-column:1; grid-row:4; }
  .aims-gallery .frame:nth-child(6){ grid-column:2; grid-row:3 / span 2; }
}

/* ≤800px — та же раскладка, компактнее рамки */
@media (max-width:800px){
  .aims-gallery{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    max-width: 520px;
    margin: 0 auto;
  }
  .aims-gallery .frame{ border-width: 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
  /* фиксируем позиции явно */
  .aims-gallery .frame:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
  .aims-gallery .frame:nth-child(2){ grid-column:2; grid-row:1; }
  .aims-gallery .frame:nth-child(3){ grid-column:2; grid-row:2; }
  .aims-gallery .frame:nth-child(4){ grid-column:1; grid-row:3; }
  .aims-gallery .frame:nth-child(5){ grid-column:1; grid-row:4; }
  .aims-gallery .frame:nth-child(6){ grid-column:2; grid-row:3 / span 2; }
}



/*------------ IMPORTANT DATES ---------------*/

.about-aims-wrapper {
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px;
  color: white;
  position: relative;
}

.important-dates {
    overflow: visible !important;
}

.important-dates h2 {
  color: white;
  font-size: 1.6rem;
}

/* Tabs */
.tabs {
  display: inline-flex;
  background: #2d2d2d;
  border-radius: 25px;
  overflow: hidden;
  margin-bottom: 25px;
}

.tab {
  padding: 8px 16px;
  font-size: 0.9rem;
  color: #ccc;
  cursor: pointer;
}

.tab.active {
  background: #00b4db;
  color: #ffffff;
  font-weight: 600;
}

/* Timeline container */
.dates-timeline {
  position: relative;
  overflow: visible !important;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 35px;
  height: auto !important;
    min-height: auto !important;
}

/* Vertical dashed line */
.dates-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 55px;
  width: 2px;
  border-left: 2px dashed white;
  z-index: 0;
}

/* Timeline item */
.timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 10;
  overflow: visible !important;
}

/* Arrow */
.timeline-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(90px + 22px); /* bubble width + spacing */
  width: 0;
  height: 0;

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #00b4db;

  opacity: 0;
  transform: translateY(-50%) translateX(-8px);
  transition: transform 0.25s ease, opacity 0.25s ease;

  z-index: 30; /* always above bubble */
}

/* Arrow hover */
.timeline-item:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Bubble with date */
.date-bubble {
  width: 90px;
  height: 42px;
  background: #00b4db;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;
  line-height: 1; /* важно */
  padding: 0;

  border-radius: 30px;
  font-weight: 700;
}

#spb-timeline {
  display: none;
}

#spb-timeline .date-bubble {
  background: rgb(1, 77, 94);
}

#spb-timeline .timeline-item:hover .date-bubble {
  box-shadow: 0 0 12px rgb(211, 247, 255);
}


/* Date bubble hover */
.timeline-item:hover .date-bubble {
  box-shadow: 0 0 12px #00b4db;
  transform-origin: center center;
  transform: scale(1.12);
}

/* Text */
.timeline-text {
  
  max-width: 300px;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 768px) {
    .timeline-text {
        max-width: 100% !important;
        width: calc(100vw - 160px);   /* минус пумпочка + отступы */
        white-space: normal !important;
    }

    .about-aims-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Text hover */
.timeline-item:hover .timeline-text {
  transform: translateX(20px);
  opacity: 0.95;
}



/* Toggle button */
.timeline-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;

  margin-left: 47px;
  margin-top: -10px;
  margin-bottom: -20px;

  font-size: 1rem;
  color: #00b4db;
  cursor: pointer;

  background: none;
  border: none;
  padding: 0;
}

.timeline-toggle::before {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #00b4db;
  box-shadow: 0 0 0 2px #1a1e23;
}

.timeline-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #00b4db;
  border-bottom: 2px solid #00b4db;
  transform: rotate(45deg);
  opacity: 0.9;
}

.timeline-toggle.open::after {
  transform: rotate(-135deg);
}

/* Collapsed items container */
.timeline-collapsed {
  
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

/* Expanded state */
.timeline-collapsed.open {
   overflow: visible !important;
  max-height: none !important;
  max-height: 1000px; /* большое значение, но контролируемое */
  padding-top: 6px;
  padding-bottom: 30px;
}

/* Fix inside spacing */
.timeline-collapsed .timeline-item {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}











.about-aims {
  position: relative;
  padding-left: 40px;
  border-left: 2px solid #00b4db; /* разделительная линия справа */
}

.about-aims b {
    color: #00b4db;
    font-weight: 600;
}

.about-aims .goal {
    border-left: 3px solid #00b4db;
    padding-left: 14px;
    margin-top: 18px;
    margin-bottom: 18px;

    color: #d7d7d7;
    font-weight: 400;
    line-height: 1.5;
    
    transition: 
        transform .25s ease,
        box-shadow .25s ease,
        text-shadow .25s ease;
}

.about-aims .goal:hover {
    transform: translateY(-3px); /* лёгкое приподнимание */
    
    box-shadow: 0 0 14px rgba(0, 180, 219, 0.35);  /* лёгкое высокотехнологичное свечение */
    text-shadow: 0 0 6px rgba(0, 180, 219, 0.35);
}


@media (max-width: 1319px) {
  .about-aims {
    max-width: 440px;
    padding: 0 30px;
  }
}

@media (max-width: 1165px) {
  .about-aims {
    max-width: 300px;
    padding: 0 30px;
  }
}

.about-aims h2 {
  color: white;
  font-size: 1.6rem;
  margin-bottom: 15px;
}

.about-aims p {
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 12px;
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .about-aims-wrapper {
    grid-template-columns: 1fr;
  }
  .about-aims {
    max-width: 500px;
    border-left: none;
    border-top: 2px solid #00b4db;
    margin-top: 30px;
    padding-left: 0;
    padding-top: 30px;
  }
}

.city-switcher {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.city-btn {
  padding: 10px 20px;
  background: transparent;
  border: 2px solid #00b4db;
  color: white;
  font-size: 1rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.city-btn.active {
  background: linear-gradient(90deg, #00b4db 0%, #0083b0 100%);
  color: black;
  font-weight: 600;
}

.city-btn:hover {
  background: #00b4db;
  color: black;
}

.timeline-content.hidden {
  display: none;
}

.hidden {
  display: none;
}

/*------------topics--------------------*/

.themes-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px;
  position: relative;

}


/* Левая колонка с градиентными карточками */
.themes-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 900px) {
  .themes-left {
    max-width: 500px;
  }
}
@media (max-width: 811px) {
  .themes-left {
    max-width: 450px;
  }
}


.theme-box {
  color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-box h3 {
  margin: 0 0 6px 0;
  font-size: 1rem;
  font-weight: 700;
}

.theme-box p {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #eaf7fa;
}

/* три оттенка ступенями */
.themes-left .theme-box:nth-child(1) {
  background-color: #00b4db; /* основной */
}

.themes-left .theme-box:nth-child(2) {
  background-color: #0098ba; /* на 1 ступень темнее */
}

.themes-left .theme-box:nth-child(3) {
  background-color: #007c99; /* на 2 ступени темнее */
}

/* эффект наведения */
.theme-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 180, 219, 0.4);
}

.theme-box h3,
.theme-box p {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.theme-box h3 {
  margin: 0 0 10px 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.theme-box p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e9f8ff;
}

/* Правая колонка — список */
.themes-right ul {
  list-style: none;
  padding-left: 25px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media (max-width: 1500px) {
  .themes-right ul {
     gap: 5px;
  }
}

@media (max-width: 1319px) {
  .themes-right ul {
    max-width: 440px;
    padding: 0 30px;
  }
}

@media (max-width: 1165px) {
  .themes-right ul {
    max-width: 390px;

  }
}

@media (max-width: 1055px) {
  .themes-right ul {
    max-width: 300px;
 
  }
}

@media (max-width: 900px) {
  .themes-right ul {
    max-width: 500px;
    padding: 0;
  }
}



.themes-right li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #000000;
}

.themes-right strong {
  color: rgb(0, 0, 0);
  font-weight: 700;
}




/* Keywords-блок */


.keywords-block {
  background-color: #2d2d2d;
  color: #c5c8c6;
  padding: 10px 15px;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  width: fit-content;
  max-width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

.keywords-label {
  font-weight: 600;
  color: #00b4db;
  margin-right: 4px;
}

/* мигающий курсор */
.blinking-cursor {
  animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* адаптив */
@media (max-width: 900px) {
  .themes-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-left: 5px;
  }
}

.dates-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
}



.for-text {
  font-weight: 400;
  margin-left: 6px;
  color: #ccc; /* чуть мягче, чем белый */
}

/* ==== INLINE TABS STYLE ==== */
.dates-header {
  flex-direction: column;
  align-items: flex-start; 
  gap: 6px;
  display: flex;
  justify-content: flex-start; 
  flex-wrap: nowrap; /* запрет переносов */
}

.city-tabs {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.city-tabs button {
  font-size: 24px;        /* как h2 */
  font-weight: 600;       /* как h2 */
  line-height: 1.2;       /* как h2 */
  font-family: inherit;
  background: none;
  border: none;
  color: #888;
  padding: 0 14px 4px 0;
  
  min-width: auto;     
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-align: center;
  transition: color 0.25s ease, border-bottom-color 0.25s ease;
  white-space: nowrap;         /* не переносит длинные названия */
}

.city-tabs button:hover {
  color: #fff;
}

.city-tabs button.active {
  color: #00b4db;
  border-bottom-color: #00b4db;
}

.city-tabs.on-new-line {
  display: flex;
  width: 100%;           /* чтобы заняла всю строку */
  margin-top: 6px;       /* небольшой воздух */
}



/* === SPEAKERS SECTION === */
.speakers-section {
  background-color: #1e2227;
  padding: 40px 0 80px ;
  text-align: center;
}

.speakers-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}
@media (max-width: 545px) {
    .speakers-container {
        padding: 0 10px;
    }
}




.speakers-grid {
  padding-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 70px 40px; /* больше вертикальный отступ, чтобы строки не “слипались” */
  justify-items: center;
  align-items: start;
}

@media (max-width: 1300px) {
  .speakers-grid {
    grid-template-columns: repeat(4, minmax(0, 220px));
    justify-content: start;     /* прижимаем сетку влево */
    gap: 30px 30px;             /* небольшой, но ровный gap */
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 1190px) {
  .speakers-grid {
    grid-template-columns: repeat(3, minmax(0, 260px)); 
    justify-content: space-between;
    max-width: 900px;
    gap: 20px 24px;
    padding-right: 0;
  }

  .speakers-grid > *:nth-child(7),
  .speakers-grid > *:nth-child(8) {
    position: relative;
    left: 143px; 
  }
}


@media (max-width: 1096px) {
  .speakers-grid {
     max-width: 850px;
  }
}

@media (max-width: 1035px) {
  .speakers-grid {
     max-width: 800px;
  }
}

@media (max-width: 996px) {
  .speakers-grid {
     max-width: 750px;
  }
}

@media (max-width: 948px) {
  .speakers-grid {
     max-width: 700px;
  }
}

@media (max-width: 914px) {
  .speakers-grid {
     max-width: 650px;
  }
}


@media (max-width: 865px) {
  .speakers-grid {
    grid-template-columns: repeat(2, minmax(0, 240px));
    justify-content: center;
    gap: 8px 8px;   
    padding-right: 0;
  }
  .speakers-grid > *:nth-child(7),
  .speakers-grid > *:nth-child(8) {
    position: static;
    left: 0;
  }
}

@media (max-width: 567px) {
  .speakers-grid {
    grid-template-columns: 1fr; 
    gap: 12px;                    
    padding-right: 0;
  }
}




.speaker-card {
  padding-top: 20px;
  text-align: center;
  color: #fff;
  max-width: 220px; 
  transition: transform 0.2s ease;
}

.speaker-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 15px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.speaker-photo.placeholder {
  background-color: #bdbdbd;
}

.speaker-info {
  font-size: 15px;
  line-height: 1.4;
}

/* подсветка только по кругу */
.speaker-card:hover .speaker-photo {
  border: 3px solid #00b4db;
  box-shadow: 0 6px 20px rgba(0, 180, 219, 0.4);
  transform: translateY(-2px);
}

/* лёгкий подъём всей карточки */
.speaker-card:hover {
  transform: translateY(-4px);
}







/* === Take Part as a Speaker === */

/*начало блока про прими участие*/

.takepart-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.takepart-intro {
  text-align: center;
  max-width: 950px;
  
}

.takepart-highlight {
  max-width: 920px;
  margin: 0 auto 25px auto;
  border: 2px solid #00bde3;
  border-radius: 14px;
  padding: 25px;
  text-align: center;
}


.takepart-highlight a {
  color: #00bde3;
  text-decoration: none;
}




/*---------------------------------------------------------------*/

.takepart-highlight a {
  color: #00bde3;
  text-decoration: none;
  font-weight: 600;
}

.takepart-highlight a:hover {
  text-decoration: underline;
}

.light-background {
  background-color: #f2f4f8;
  color: #111;
}

.tracks-container {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}




.track-card {
  background-color: transparent;
  border: 2px solid #00b4db;
  border-radius: 10px;
  padding: 1.8rem 2rem;
  max-width: 440px;
  text-align: center;
  color: #222;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}



@media (max-width: 1238px) {
  .tracks-container {
    flex-direction: column;
    align-items: center; 
    gap: 2.5rem;
  }

  .track-card {
    width: 100%;          
    max-width: 1000px;    
  }

  .takepart-intro {
    max-width: 850px;
    margin-bottom: 0;
  }

  
  .takepart-highlight {
    max-width: 715px
   
  }
}

@media (max-width: 1045px) {
  .track-card {
    max-width: 600px;    
  }
  .takepart-intro {
    max-width: 600px;
   
  }
  .takepart-highlight {
    max-width: 600px
   
  }
}

@media (max-width: 927px) {
  .track-card {
    max-width: 500px;    
  }
  .takepart-intro {
    max-width: 500px;
   
  }
  .takepart-highlight {
    max-width: 500px
   
  }
}

@media (max-width: 837px) {
  .track-card {
    max-width: 440px;    
  }
   .takepart-intro {
    max-width: 440px;
   
  }
  .takepart-highlight {
    max-width: 440px
   
  }
}





.track-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 180, 219, 0.2);
}

.track-card h3 {
  color: #111;
  margin-bottom: 0.3rem;
}



.track-subtitle {
  color: #555;
  font-style: italic;
  margin-bottom: 0.8rem;
}

.deadline {
  margin-top: 1rem;
  font-weight: bold;
  color: #111;
}

.note {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: #333;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 970px) {
  .note {
    max-width: 500px;
  }
}
@media (max-width: 836px) {
  .note {
    max-width: 400px;
  }
}

.note-w {
  margin-top: 2rem;
  text-align: center;
  font-size: 1.3rem;
  color: #ffffff;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}


/* === Proceedings Section === */

/* Proceedings layout */
.proceedings-section {
  background-color: #1e2227;
  padding: 60px 0;
}
.proceedings-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
}

.proceedings-image {
  flex-shrink: 0;
}

.proceedings-image img {
  height: 180px; /* фиксированная аккуратная высота обложки */
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  margin-top: 5px; /* небольшое смещение вниз, чтобы совпасть с baseline текста */
}

.proceedings-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (max-width: 1227px) {
  .proceedings-text {
    max-width: 600px; 
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1077px) {
  .proceedings-text {
    max-width: 500px; 
    
  }
}

@media (max-width: 972px) {
  .proceedings-text {
    max-width: 350px; 
    margin: 0;
  }
}

@media (max-width: 800px) {
  .proceedings-text {
    max-width: 320px; 
  }
}

@media (max-width: 745px) {
  .proceedings-text {
    max-width: 500px; 
  }
  .proceedings-container {
    padding: 0;
  }
  
}





.proceedings-text strong {
  color: #fff;
  font-weight: 600;
}

@media (max-width: 768px) {
  .proceedings-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .proceedings-text {
    max-width: 70%;
  }

  .proceedings-image img {
    width: 150px;
    margin-bottom: 1.5rem;
  }
}

/* ============================================================
   CALL FOR PAPERS — TIMELINE (DESKTOP + MOBILE)
   полностью копирует Important Dates
   ============================================================ */


#publication-timeline h3 {
    margin: 0;
    padding: 0;
    line-height: 1.2; /* чтобы красиво прилегал к h2 */
}


#publication-timeline h2,
#publication-timeline h3 {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

   .pub-timeline-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 0;
}

/* ============================================================
   DESKTOP  (>=1168px)
   ============================================================ */
@media (min-width: 1168px) {

    .pub-timeline {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        gap: 40px;
        margin-bottom: 50px;
    }

    /* Горизонтальная линия */
    .pub-timeline::before {
        content: "";
        position: absolute;
        top: 43px;
        left: 0;
        right: 0;
        height: 3px;
        background: #00b4db;
        opacity: 0.3;
    }

    .pub-timeline-step {
        position: relative;
        width: 25%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* ===== Bubble ===== */
    .pub-timeline-date {
        background: #00b4db;
        color: #fff;
        padding: 10px 26px;
        border-radius: 26px;
        font-weight: 700;
        white-space: nowrap;
        transform: translateY(-8px);
        transition: all .25s ease;
        z-index: 3;
    }

    /* ===== Dot (на уровне линии, НЕ поднимаем) ===== */
    .pub-timeline-dot {
        width: 16px;
        height: 16px;
        background: #fff;
        border: 4px solid #00b4db;
        border-radius: 50%;
        margin-bottom: 10px;
        z-index: 3;
    }

    /* Палочка dot → line */
    .pub-timeline-step::before {
        content: "";
        position: absolute;
        top: 42px;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: 30px;
        background: #00b4db;
        opacity: 0.3;
        z-index: 1;
    }

    /* ===== Arrow под dot, но выше текста ===== */
    .pub-timeline-step::after {
        content: "";
        position: absolute;
        top: 76px; /* место под стрелку */
        left: 50%;
        transform: translateX(-50%) translateY(-8px);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 14px solid #00b4db;
        opacity: 0;
        transition: all .25s ease;
        z-index: 2;
    }

    /* Hover эффекты (как в Important Dates) */
    .pub-timeline-step:hover .pub-timeline-date {
        transform: scale(1.08) translateY(-8px);
        box-shadow: 0 0 12px rgba(0,180,219,0.45);
    }

    .pub-timeline-step:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* ===== Текст опускаем на 22px ===== */
    .pub-timeline-step p,
    .pub-timeline-step strong {
        margin-top: 22px;
    }
}



/* ============================================================
   MOBILE / TABLET  (<1168px)
   ============================================================ */

@media (max-width: 1168px) {

    /* Правка: отключаем grid в секции (иначе таймлайн вылезает вправо) */
    #publication-timeline {
        display: block;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Контейнер всего таймлайна */
    .pub-timeline {
        display: flex;
        flex-direction: column;
        gap: 32px;
        position: relative;
        padding-left: 54px;      /* место под линию + плашку */
        margin-bottom: 50px;
        max-width: 100%;         /* правка — не даём разъезжаться */
    }

    /* Вертикальная линия */
    .pub-timeline::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 26px;
        width: 3px;
        background: #00b4db;
        opacity: 0.35;
    }

    /* Каждый пункт */
    .pub-timeline-step {
        position: relative;
        min-height: 42px;
        overflow: visible;
    }

    /* Плашка даты (центрируется по вертикали и сидит на линии) */
    .pub-timeline-date {
        position: absolute;
        left: -26px;                  /* ставим на линию */
        top: 50%;
        transform: translate(-50%, -50%);
        background: #00b4db;
        color: #fff;
        padding: 8px 20px;
        border-radius: 22px;
        font-weight: 700;
        white-space: nowrap;
        z-index: 3;

        transition: transform .32s cubic-bezier(.25,.46,.45,.94),
                    box-shadow .32s cubic-bezier(.25,.46,.45,.94);
    }

    /* Увеличение при hover */
    .pub-timeline-step:hover .pub-timeline-date {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow: 0 0 12px rgba(0,180,219,0.38);
    }

    /* Точки отключены (концептуально лишние) */
    .pub-timeline-dot {
        display: none !important;
    }

    /* Стрелка справа от плашки */
    .pub-timeline-step::after {
        content: "";
        position: absolute;

        left: 30px;              /* чуть дальше от плашки */
        top: 50%;
        transform: translateY(-50%) translateX(-6px);

        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 11px solid #00b4db;

        opacity: 0;
        z-index: 4;
        transition: transform .32s cubic-bezier(.25,.46,.45,.94),
                    opacity .32s cubic-bezier(.25,.46,.45,.94);
    }

    /* Показываем стрелку + лёгкое выдвижение */
    .pub-timeline-step:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    /* ===== Текст ===== */

    .pub-timeline-step p {
        margin: 0;
        margin-left: calc(26px + 10px);     /* базовая позиция */
        line-height: 1.32;
        padding-top: 2px;
        padding-bottom: 2px;

        transition: transform .32s cubic-bezier(.25,.46,.45,.94),
                    margin-left .32s cubic-bezier(.25,.46,.45,.94);
    }

    /* При hover текст отъезжает вправо (а не притягивается) */
    .pub-timeline-step:hover p {
        margin-left: calc(26px + 20px);
        transform: translateX(4px);
    }

    /* strong НЕ должен иметь дополнительных отступов */
    .pub-timeline-step p strong {
        display: inline-block;
        margin: 0;
        padding: 0;
        line-height: 1.32;
    }

    /* Мини-адаптация очень узких экранов (<480px) */
    @media (max-width: 480px) {
        .pub-timeline-date {
            padding: 6px 14px;
            font-size: 14px;
        }
    }
}


.pub-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
}

.pub-left,
.pub-right {
  min-width: 210px;   /* подгони по вкусу: 200–230 */
  text-align: center;
}

.pub-sep {
  width: 24px;        /* фиксированная колонка под вертикальную черту */
  text-align: center;
}

@media (max-width: 1167px) {

  /* Весь блок выравниваем по левому краю */
  .pub-timeline-info {
    display: block;
    text-align: left;
    max-width: 700px;
  }

  /* Строки возвращаются к обычному поведению */
  .pub-timeline-info .pub-row {
    display: block;        /* ← главное! больше не таблица */
    text-align: left;
    margin-bottom: 6px;
  }

  /* Левая и правая части перестают быть колонками */
  .pub-left,
  .pub-right {
    display: inline;       /* они снова обычный текст */
    min-width: auto;       /* сбрасываем фикс ширину */
    text-align: left;
  }

  /* Разделительная палочка работает как обычный текст */
  .pub-sep {
    display: inline;
    width: auto;
    margin: 0 4px;
  }

  /* Ссылки — обычная строка текста */
  .pub-row a {
    white-space: normal;
  }
}

@media (max-width: 440px) {

  /* Перенос "Short papers" */
  .pub-left,
  .pub-right {
    display: block;          /* переносим вторую часть вниз */
    line-height: 1.32;
  }

  /* Делаем палочку на отдельной строке, если нужно */
  .pub-sep {
    display: inline-block;
    margin: 6px 0;
  }

  /* Ссылки — каждая на новой строке */
  .pub-row a {
    display: block;           /* переносим Paper Submission ↗ */
    margin-top: 6px;
  }
}

@media (max-width: 907px) {
    .pub-timeline-info .pub-text {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;  /* если хочешь — иначе убери */
    }
}




/* === COMMITTEE SECTION — НОВАЯ СТРУКТУРА НА ДВУХ ГРИДАХ === */

#committee {
    background: #1e2227;
    color: #fff;
    text-align: center;
    padding: 40px 0 120px;
    position: relative;
}

/* Заголовок */
#committee h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 40px;
}

/* ===== ЛИНИЯ СЛЕВА ===== */
#committee::before {
    content: "";
    position: absolute;
    left: 80px;
    top: 120px;
    bottom: 0;
    width: 2px;
    background: rgba(0,180,219,0.35);
}

/* ===================== ПЛАШКИ (TAGS) ===================== */

.committee-tag {
    justify-self: start;
    margin-left: 40px;
    background: #00b4db;
    color: #fff;
    padding: 6px 24px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.8px;
    border: 2px solid rgba(255,255,255,0.35);
    margin-bottom: 40px;
    position: relative;
    z-index: 3;
}

.committee-tag.secondary {
    background: #1e2227;         /* тёмный фон — чтобы линия под не мешала */
    border-color: #00b4db;
    color: #00b4db;
}

/* Смещаем плашки чуть вверх относительно грид-карточек */
.committee-label-wrapper {
    margin-bottom: -20px;
}


/* ===================== ГРИДЫ ===================== */

.committee-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1050px;
    margin: 0 auto 60px;
    column-gap: 10px;
    row-gap: 40px;
    justify-items: center;
}

/* Верхний грид – 3 человека */
.committee-grid-top {
    padding-top: 10px;
    margin-left: 60px;
    margin-top: 50px;
}

/* Нижний – 2+ людей */
.committee-grid-bottom {
    margin-left: 60px;
    margin-top: 50px;
}


/* ===================== КАРТОЧКИ ===================== */

.committee-member {
    width: 240px;
    text-align: center;
}

/* Фото */
.committee-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00b4db;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: transform .25s, box-shadow .25s;
}

.committee-photo:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0,180,219,0.35);
}

/* Имена + текст */
.committee-name {
    margin-top: 16px;
    font-weight: 700;
    font-size: 1.05rem;
}

.committee-info {
    margin-top: 6px;
    font-size: 0.92rem;
    color: #d0d4db;
    line-height: 1.36;
}


/* ===================== MOBILE / TABLET ===================== */


@media (max-width: 1190px) {
    /* линия уходит ближе */
    #committee::before {
        left: 50px;
    }
    .committee-tag {
        margin-left: 15px;
    }
    .committee-grid {
      max-width: 1000px;
    }
}

@media (max-width: 1190px) {
  .committee-grid {
      max-width: 900px;
    }
}

@media (max-width: 1067px) {
  .committee-grid {
      max-width: 800px;
      
    }
    .committee-grid-top {
      margin-left: 60px;
    }
}

@media (max-width: 986px) {
  .committee-grid {
      max-width: 750px;
    }
}



@media (max-width: 980px) {
    /* чтобы плашки НЕ НАЕЗЖАЛИ */
    .committee-label-wrapper {
        margin-bottom: 0;
        margin-top: 20px;
    }

    #committee::before {
        top: 160px;
    }
}

@media (max-width: 942px) {
    .committee-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        max-width: 600px;
    }
    .committee-grid-top .committee-member:nth-child(3) {
        grid-column: 1 / -1; /* занимает обе колонки */
        justify-self: center;
    }
}

@media (max-width: 600px) {
    #committee::before {
        display: none;
    }

    .committee-tag,
    .committee-tag.secondary {
        margin: 0 auto;
        justify-self: center;
    }

    .committee-grid {
        grid-template-columns: 1fr;
        row-gap: 50px;
    }
}








/* === Registration Section === */
#registration {
  background: #e9ecf7;
  padding: 20px 0 40px;
  text-align: center;
  color: #000;
}

#registration h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.registration-switch {
  display: inline-flex;
  gap: 18px;
  margin-left: 12px;
}

.registration-switch button {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit; /* такой же кегль как у заголовка */
  color: #7e7e7e;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: color 0.25s ease;
}

.registration-switch button.active {

  color: #00b7ff;
  font-weight: 600;
}

.registration-switch button.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #00b7ff;
}


@media (max-width: 900px) {
  .registration-switch {
    display: flex;
    gap: 25px;
    margin-top: 10px;
  }

  .registration-switch button {
    font-size: 30px;     /* чуть меньше, но мощно */
  }
}

/* Мобильный до 600px */
@media (max-width: 600px) {

  h2.section-title,
  h2 {
    font-size: 28px !important;
    line-height: 1.2;
    text-align: center;
  }

  .registration-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 15px;
    gap: 20px;
  }

  .registration-switch button {
    font-size: 24px;
    line-height: 1.1;
  }
}

/* Маленькие мобильные (iPhone SE, 375px) */
@media (max-width: 430px) {

  h2.section-title,
  h2 {
    font-size: 24px !important;
  }

  .registration-switch button {
    font-size: 20px;
  }
}

.registration-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.registration-card {
  background: #014d5e;
  color: #fff;
  border-radius: 12px;
  padding: 30px 25px 40px;
  width: 320px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* равномерно распределяем */
  min-height: 480px; /* добавлено для выравнивания */
}

.registration-card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 8px 0 6px;
}

.registration-card h4:nth-of-type(2) {
  margin-top: 30px;  /* подбери 18–22px по вкусу */
}

.registration-card p {
  flex-grow: 1; /* растягивает описание, выравнивая нижний блок */
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0 0 10px;
}

.registration-card.highlight {
  background: #007a96;
}

.registration-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0, 180, 219, 0.4);
}

.registration-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
}


/* Плоский placeholder для SPB */
.registration-card.spb-placeholder {
  background: #e5eeef;     /* светлый спокойный фон */
  border: 2px solid #00b4db;
  color: #2f4f58;
  box-shadow: none;
  padding: 30px 40px;
  width: 450px;
  max-width: 90%;
  border-radius: 14px;
  text-align: center;
  height: auto;            /* убрать вытянутую форму */
  min-height: 0;           /* явное снятие высоты */
}

/* Заголовок */
.registration-card.spb-placeholder h3 {
  margin-bottom: 10px;
  color: #0e3d49;
}

/* Текст */
.registration-card.spb-placeholder p {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 28px;
}

.spb-placeholder .registration-btn {
  background: #ffffff !important;
  border: 2px solid #a8bcc7;
  color: #777;
  cursor: not-allowed;
  pointer-events: none;     /* полностью отключает клики и hover */
  box-shadow: none;
}

/* Защита от любых hover / active / focus */
.spb-placeholder .registration-btn:hover,
.spb-placeholder .registration-btn:active,
.spb-placeholder .registration-btn:focus {
  background: #ffffff !important;
  border-color: #cfe4ef;
  color: #777;
  box-shadow: none;
}




.registration-main-btn {
  display: inline-block;
  margin: 32px auto 10px;
  padding: 12px 40px;
  border-radius: 999px;
  border: none;
  background: #ffd740;        /* жёлтая как текущий hover */
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition: background 0.3s ease, color 0.3s ease,
              transform 0.2s ease, box-shadow 0.3s ease;
}

/* При наведении — цвет как первый квадратик (бирюзовый) */
.registration-main-btn:hover {
  background: #00b4db;        /* цвет первого квадрата */
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Кнопки — белые везде */
.registration-btn {
  display: inline-block;
  background: #fff;
  color: #00b4db;
  border: 2px solid #00b4db;
  border-radius: 999px;
  padding: 8px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.registration-btn:hover {
  background: #00b4db; /* мягкий жёлтый */
  border-color: #00b4db;
  color: #ffffff;
  transform: translateY(-2px);
}

.registration-note {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 40px;
  font-size: 0.9rem;
  color: #333;
}

/* Адаптив */


@media (max-width: 1255px) {
  
  .registration-grid {
    max-width: 900px;
    gap: 20px;

}
  .registration-card {
    max-width: 270px;
  }
}
@media (max-width: 1175px) {
   .registration-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
    
  }


  .registration-card {
    max-width: 800px;
  }

  #registration h2 {
    flex-direction: column;
  }
}

@media (max-width: 996px) {
   .registration-card {
    width: 60%;
  }
}

/* скрытие/показ карточек */
.hidden {
  display: none;
}

/* ===== CONTACTS SECTION ===== */
#contacts {
  text-align: center;
  padding: 80px 0;
  background: #11161c; /* как dark-background */
  color: #fff;
}

#contacts .titles {
  margin-bottom: 30px;
}

#contacts .contact-intro {
  margin-bottom: 40px;
  font-size: 1rem;
  line-height: 1.6;
}

#contacts .contact-intro p {
  margin: 6px 0;
}

#contacts .contact-mail {
  color: #00b4db;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

#contacts .contact-mail:hover {
  color: #ffd740;
}

/* всплывающее окно */
#contacts .popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#contacts .popup.hidden {
  display: none;
}

#contacts .popup-content {
  background: #fff;
  color: #000;
  padding: 30px 40px;
  border-radius: 12px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

#contacts .popup-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 22px;
  cursor: pointer;
  color: #555;
  transition: color 0.3s ease;
}

#contacts .popup-close:hover {
  color: #00b4db;
}




/* расписание */


@keyframes bump-in {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.place {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 25px;
}
.place-text {
  position: relative;
  top: 2px;   /* опускает текст на 2px */
}

.marker {
  position: relative;
  margin-left: -4px;
  width: 28px;
  height: 38px; /* отношение сторон как у настоящего pin */
}

/* сама форма */
.pin {
  position: relative;
  width: 28px;
  height: 38px;
  background: #2d9cdb;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(0deg);
  overflow: hidden;
}

/* дырка внутри */
.pin::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #0f1217;
  border-radius: 50%;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

/* тень */
.shadow {
  position: absolute;
  bottom: -4px;
  left: 20%;
  width: 20px;
  height: 6px;
  background: rgba(0,0,0,0.25);
  border-radius: 50%;
  transform: translateX(calc(-50% - 4px)) rotateX(60deg);
}

/* пульсация */
.shadow::before {
  content: "";
  position: absolute;
  top: 60%;
  left: 15%;
  width: 22px;
  height: 22px;
  border: 2px solid #2d9cdb;
  border-radius: 50%;
  transform: translate(calc(-50% - 4px), -50%) scale(0.6);
  opacity: 0.6;
  animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.35;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}



/* ============================================================
   SUBSCRIBE FORM (AIMS style) – FINAL VERSION
   ============================================================ */

.subscribe-text {
  max-width: 700px;
  margin: 20px auto 40px auto;
  text-align: center;
  font-size: 1.1rem;
  color: #eee;
}

/* Desktop: in one row */
.subscribe-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
  margin: 40px auto 0;
}

.subscribe-row input {
  padding: 12px 18px;
  border-radius: 30px;
  border: 2px solid rgba(0,180,219,0.35);
  background: #fff;
  width: 260px;
  font-size: 16px;
  outline: none;
  transition: border 0.25s ease, box-shadow 0.25s ease;
}

.subscribe-row input:focus {
  border-color: #00b4db;
  box-shadow: 0 0 8px rgba(0,180,219,0.35);
}

.subscribe-row button {
  background: #00b4db;
  color: #fff;
  border: none;
  padding: 12px 26px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.subscribe-row button:hover {
  background: #009cc2;
  transform: translateY(-1px);
}

/* Mobile < 757px */
@media (max-width: 757px) {
  .subscribe-row {
    flex-direction: column;
    gap: 14px;
  }

  .subscribe-row input,
  .subscribe-row button {
    width: 100%;
    max-width: 320px;
  }
}

/* ============================================================
   POPUP – FINAL VERSION
   ============================================================ */

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.popup-content p {
  color: #000000; 
}

.popup-content {
  background: #fff;
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;
  position: relative;
  max-width: 320px;
}

.popup-close {
  color: #000;
  position: absolute;
  top: 0px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
}

.hidden {
  display: none !important;
}