/* ================================================================
   S2.CSS — Мы не успеваем (светлый)
================================================================ */
  #s2.panel {
    height: 670px;
  }

/* --- BG: img вместо background-image --- */
#s2 .bg img,
#s3 .bg img,
#s4 .bg img,
#s5 .bg img,
#s6 .bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.s2-tagline {
  position:absolute; 
  top:18%; 
  left:50%; 
  transform:translateX(-50%);
  font-family:'Raleway',serif; 
  font-size:18px;
  font-weight:500;
  color:var(--text-dark); 
  text-align:center;
}
.s2-grid {
  display:flex; align-items:center; justify-content:space-between;
  height:100%; 
  padding:0 150px; 
  gap:40px;
}
.s2-card {
  backdrop-filter: blur(5px);
  border-radius: 20px;
  padding: 20px;
  max-width: 340px;
  flex-shrink: 0;
}

.s2-card-1 {
	background: linear-gradient(135deg, #CEEAFF80 0%, #abbecdb5 100%);
}

.s2-card-2 {
	background: linear-gradient(180deg, #DCD9D880 0%, #DCD9D8aa 100%);
}

.s2-card h2 { 
  font-family:'Cormorant Garamond',serif; 
  font-size:36px; 
  font-weight:600; 
  margin-bottom:20px; 
  color:var(--text-dark); 
}
.s2-card p  { 
  font-family:'Raleway',serif;
  font-size:16px; 
  line-height:1.2; 
  color:var(--text-mid); 
}
.s2-center  { 
  flex:1; 
  display:flex; 
  justify-content:center; 
  align-items:center; 
}
.s2-brain-img {
  width:340px; height:340px;
}
.s2-brain-img img { width:100%; height:100%; object-fit:cover; }


/* ================================================================
   S2 MOBILE
================================================================ */
@media (max-width: 768px) {

  #s2.panel {

    height: 791px;
  }

  .s2-tagline {
    top: auto;
    position: relative;
    left: auto;
    transform: none;
    text-align: center;
    padding-top: 40px;
    font-size: 14px;
    text-transform: uppercase;
  }

  .s2-grid {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px 40px;
    gap: 0;
    height: auto;
  }

  /* Мозг — на всю ширину, перекрывает фон */
  .s2-center {
    width: 100%;
    margin: 20px 0 40px; /* отрицательные отступы чтобы мозг наезжал на карточки */
    position: relative;
    z-index: 2;
    height: 400px;
  }
  .s2-brain-img {
    width: 100%;
    height: 280px;
  }
  .s2-brain-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Карточки — полная ширина, снизу */
  .s2-card {
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    padding: 20px 18px;
    position: relative;
    z-index: 1;
  }
  .s2-card:first-child {
    order: 2; /* первая карточка идёт после мозга */
    margin-bottom: 12px;
  }
  .s2-card:last-child {
    order: 3;
  }
  .s2-center {
    order: 1;
  }

  .s2-card h2 {
    font-size: 26px;
    margin-bottom: 12px;
  }
  .s2-card p {
    font-size: 14px;
    line-height: 1.5;
  }
}


/* ================================================================
   S3.CSS — Проходить травму (тёмный)
================================================================ */
  #s3.panel {
    height: 670px;
  }

.s3-content {
  height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:0 150px; max-width:840px;
}
.s3-kicker { 
  font-size:18px; 
  color:var(--cream); 
  margin-bottom:32px; 
  font-family:'Raleway',serif;
  display: inline-block;
  min-height: 100px;
}
.s3-title {
  font-family:'Cormorant Garamond',serif; 
  font-size:52px;
  font-weight:600; 
  text-transform:uppercase;
  line-height:1.1; 
  color:var(--cream); 
  margin-bottom:48px;
  display: inline-block;
  min-height: 254px;
}
.s3-body { font-size:16px; line-height:1.2; color: var(--cream); max-width:440px; }

/* ================================================================
   S3 MOBILE
================================================================ */
@media (max-width: 768px) {
	  #s3.panel {

    height: 635px;
  }

  .s3-content {
    padding: 0 24px;
    justify-content: space-between;
    padding-top: 48px;
    padding-bottom: 48px;
    max-width: 100%;
  }

  .s3-kicker {
    font-size: 16px;
    margin-bottom: 0;
    min-height: auto;
/*     opacity: 0.7; */
    max-width: 150px;
	min-height: 125px;
  }

  .s3-title {
    font-size: 20px;
    min-height: auto;
    margin-bottom: 0;
    line-height: 1.1;
  }

  .s3-body {
    font-size: 15px;
    line-height: 1.6;
    max-width: 90%;
    color: var(--cream);
	          min-height: 175px;
        display: flex;
        align-items: flex-end;
  }

}



/* ================================================================
   S4.CSS — Эволюция интеллекта (светлый, FUSED)
================================================================ */
#s4.panel {
  height: 675px;
}

.s4-content { height:100%; display:flex; flex-direction:column; justify-content:center; padding:0; }
.s4-title {
  text-align:center; font-family:'Cormorant Garamond',serif;
  font-size:36px; font-weight:600; color:var(--text-dark); margin-bottom:20px;
}
.s4-timeline { 
  display:flex; 
  align-items:center; 
  gap:0; 
  position:relative; 
  padding-right: 50px;
}
.s4-line {
  position:absolute; top:180px; left:0; right:0; height:2px;
  background: linear-gradient(90deg, 
  var(--text-dark) 0%, 
  var(--gold-dim) 50%, 
  #E19F7D 100%);
}
.s4-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:0 20px; text-align:center; position:relative;
}
.s4-label {
  font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:500;
}
.s4-crystal {
  width:120px; height:120px; position:relative; z-index:1;
  min-height: 213px;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}

.s4-crystal.s4-c1 {
  width:102px; 
  height:113px; 
}
.s4-crystal.s4-c2 {
  width:127px; 
  height:155px; 
}
.s4-crystal.s4-c3 {
  width:117px; 
  height:189px; 
}
.s4-crystal.s4-c4{
  width:319px; 
  height:213px; 
  min-height: 213px;
  position: relative;
}

.s4-crystal-img { width:100%; height:100%; object-fit:contain; border-radius:4px;}
/* .s4-item:last-child .s4-crystal { width:160px; height:160px; } */

/* Пульсирующий ореол на RI */
.s4-halo {
	z-index: -1;
  position:absolute; 
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%,-50%);
}

.s4-halo img{
  width: 530px;
  height: 530px;

}

@keyframes haloPulse { 0%,100%{ opacity:.6; transform:scale(1)    } 50%{ opacity:1; transform:scale(1.08) } }
@keyframes ringPulse { 0%,100%{ opacity:.5; transform:scale(1)    } 50%{ opacity:1; transform:scale(1.12) } }

.s4-item-name { font-family:'Raleway',serif; font-size:18px; font-weight:500; margin-bottom:20px; color:var(--text-dark); z-index: 2;}
.s4-item-desc { font-size:12px; line-height:1.3; color:var(--text-dark); max-width:200px; z-index: 2;}
.s4-item:last-child .s4-item-desc { color:var(--text-dark); z-index: 2;}
.s4-new-lang { color:var(--accent); font-size:18px; font-weight:500; margin-top:22px;  z-index: 2;}


/* ================================================================
   S4 MOBILE
================================================================ */
@media (max-width: 768px) {

  #s4.panel { height: 1160px; }

  .s4-content {
    padding: 48px 0 48px;
    justify-content: flex-start;
  }

  .s4-title {
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 40px;
  }

  .s4-timeline {
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
    gap: 20px;
  }

  /* Вертикальная линия вместо горизонтальной */
  .s4-line {
    display: none;
    top: 0; bottom: 0;
    left: 50%;
    right: auto;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
      var(--text-dark) 0%,
      var(--gold-dim) 60%,
      #E19F7D 100%
    );
  }

  .s4-item {
    flex: none;
    width: 100%;
    padding: 0;
  }

  /* Лейблы */
  .s4-label {
    font-size: 22px;
    margin-bottom: 12px;
  }
  .s4-item:last-child .s4-label {
    font-size: 48px !important;
  }

  /* Кристаллы — сбрасываем десктопные размеры */
  .s4-crystal,
  .s4-crystal.s4-c1,
  .s4-crystal.s4-c2,
  .s4-crystal.s4-c3 {
    width: 120px;
    height: 120px;
    min-height: auto;
    margin-bottom: 16px;
  }
	
	.s4-crystal.s4-c1 { 
		  width:unset; 
  height:78px; 
}
.s4-crystal.s4-c2 {
  width:unset; 
  height:135px; 
}
.s4-crystal.s4-c3 {
	  width:unset; 
/* transform: rotate(-90deg); */
  height:115px; 
}
.s4-crystal.s4-c4{
  width:unset; 
  height:177px; 
  position: relative;
}

  .s4-crystal.s4-c4 {
    width: 240px;
    height: 160px;
    min-height: auto;
    margin-bottom: 16px;
  }

	.s4-halo {
		position:absolute; 
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
.s4-halo img{
  width: 400px;
  height: 400px;

}

  .s4-item-name { font-size: 18px; margin-bottom: 5px; }
  .s4-item-desc { font-size: 12px; max-width: 280px; line-height: 1.2; }
  .s4-new-lang  { font-size: 18px; margin-top: 12px; }

}


/* ================================================================
   S5.CSS — Что такое RI? (светлый, FUSED)
================================================================ */
#s5.panel {
  height: 610px;
}

.s5-content { height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 270px; }
.s5-title {
  text-align:center; font-family:'Cormorant Garamond',serif;
  font-size:36px; font-weight:600; color:var(--text-dark); margin-bottom:138px;
}
.s5-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px 120px; }
.s5-item-title {
  font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:500;text-transform:uppercase; color:var(--text-dark); margin-bottom:16px;
}
.s5-item-body { font-family:'Raleway',serif; font-size:16px; font-weight:400; line-height:1.2; color:var(--text-dark); opacity: 0.7;}
.s5-item-body-plain { font-size:18px; line-height:1.2; color:var(--text-dark); font-weight: 400;}

/* ================================================================
   S5 MOBILE
================================================================ */
@media (max-width: 768px) {

  #s5 .panel { height: auto; }

  .s5-content {
    padding: 48px 24px 0;
    justify-content: flex-start;
  }

  .s5-title {
    font-size: 28px;
    text-align: left;
    margin-bottom: 24px;
  }

  .s5-grid {
    grid-template-columns: 1fr;
    gap: 32px;
	 display: flex;
	  flex-direction: column;
  }

  /* Plain-текст — первым визуально */
  .s5-item:has(.s5-item-body-plain) {
    order: -1;
  }

  .s5-item-title {
    font-size: 24px;
    margin-bottom: 10px;
	  text-transform: unset;
  }

  .s5-item-body {
    font-size: 15px;
    line-height: 1.5;
  }

  .s5-item-body-plain {
    font-size: 16px;
    line-height: 1.6;
  }

}



/* ================================================================
   S6.CSS — Видеоплеер (светлый, FUSED)
================================================================ */
#s6.panel {
  height: 685px;
}

.s6-content { height:100%; display:flex; align-items:center; justify-content:center; }

.video-player-wrap {
  width: 860px;
  background: #fff;
  box-shadow: 0 20px 80px rgba(0,0,0,0.15);
  position: relative;
}
.video-player-wrap.aspect-16-9 { aspect-ratio: 16/9; }
.video-player-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; display:block; }
.video-player-wrap video  { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.video-placeholder {
  position:absolute; inset:0; background:#f8f5f0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--text-mid);
}
.video-placeholder svg { opacity:.3; }
.video-placeholder p { font-size:13px; opacity:.5; }

.video-toggle { position:absolute; top:-44px; right:0; display:flex; gap:8px; }
.video-toggle button {
  background:rgba(0,0,0,0.15); border:1px solid rgba(0,0,0,0.2); color:var(--text-dark);
  padding:6px 16px; font-family:'Raleway',sans-serif; font-size:12px; cursor:pointer; transition:background .2s;
}
.video-toggle button.active,
.video-toggle button:hover { background:rgba(0,0,0,0.3); color:#fff; }



@media (max-width: 768px) {
  #s6.panel {
    height: 240px;
  }
  .video-player-wrap {
    width: 320px;
  }
}