/* ================================================================
   S2.CSS — Мы не успеваем (светлый)
================================================================ */
  #s2.panel {
    height: 670px;
  }
#s2 .bg { background-image: url('../img/bg-s2.jpg'); }
#s2 .bg-placeholder {
  position:absolute; inset:0;
}
.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 {
  background: linear-gradient(180deg, #DCD9D880 0%, #DCD9D8ff 100%);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  padding: 20px;
  max-width: 340px;
  flex-shrink: 0;
}
.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: 480px) {

  #s2.panel {

    height: 790px;
  }

  #s2 .bg { background-image: url('../img/bg-mob-s2.jpg'); }

  .s2-tagline {
    top: auto;
    position: relative;
    left: auto;
    transform: none;
    text-align: center;
    padding-top: 40px;
    font-size: 14px;
    letter-spacing: 2px;
    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 .bg { background-image: url('../img/bg-s3.jpg');}
#s3 .bg-placeholder {
  position:absolute; inset:0;
}
.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;
  font-weight:500;
  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:rgba(245,240,232,0.72); max-width:480px; }

/* ================================================================
   S3 MOBILE
================================================================ */
@media (max-width: 480px) {

  #s3 .bg { background-image: url('../img/bg-mob-s3.jpg'); }

  .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;
  }

  .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: 100%;
    color: rgba(245, 240, 232, 0.65);
  }

}



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

#s4 .bg { background-image: url('../img/bg-s4.jpg'); }
#s4 .bg-placeholder {
  position:absolute; inset:0;
}
.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;
  color:var(--text-mid); margin-bottom:8px; letter-spacing:1px;
}
.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 {
  position:absolute; 
  top: 50%;
  left: 50%;
  opacity: 0.2;
  /* width: 700px;
  height: 700px; */
  transform: translate(-50%,-50%);
  mix-blend-mode: soft-light;
  /* animation: haloPulse 2.5s ease-in-out infinite; */
}

/* .s4-halo-ring {
  position:absolute; inset:-10px; border-radius:50%;
  border:1.5px solid rgba(201,169,110,0.5);
  animation: ringPulse 2.5s ease-in-out infinite;
}
.s4-halo-ring2 {
  position:absolute; inset:-28px; border-radius:50%;
  border:1px solid rgba(201,169,110,0.25);
  animation: ringPulse 2.5s ease-in-out infinite .4s;
} */
@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:10px; color:var(--text-dark); }
.s4-item-desc { font-size:12px; line-height:1.3; color:var(--text-mid); max-width:200px; }
.s4-item:last-child .s4-item-desc { color:var(--text-dark); }
.s4-new-lang { color:var(--gold); font-size:13px; font-weight:500; margin-top:8px; letter-spacing:.5px; }


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



  #s4.panel { height: auto; }

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

  .s4-title {
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 40px;
  }

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

  /* Вертикальная линия вместо горизонтальной */
  .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-c4 {
    width: 240px;
    height: 160px;
    min-height: auto;
    margin-bottom: 16px;
  }

  .s4-halo {
    position:absolute; 
    top: 50%;
    left: 50%;
    opacity: 0.2;
    /* width: 250px;
    height: 250px; */
    transform: translate(-50%,-50%);
    mix-blend-mode: soft-light;
    /* animation: haloPulse 2.5s ease-in-out infinite; */
  }

  .s4-item-name { font-size: 20px; margin-bottom: 8px; }
  .s4-item-desc { font-size: 14px; max-width: 280px; line-height: 1.5; }
  .s4-new-lang  { font-size: 15px; margin-top: 12px; }

}


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

#s5 .bg { background-image: url('../img/bg-s5.jpg');}

.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); }
.s5-item-body-plain { font-size:18px; line-height:1.2; color:var(--text-dark); font-weight: 500;}

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

  #s5 .panel { height: auto; }

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

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

  .s5-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

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

  .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 .bg { background-image: url('../img/bg-s6.jpg'); }
#s6 .bg-placeholder {
  position:absolute; inset:0;
  /* background: linear-gradient(160deg, #f0e8dc 0%, #ddd0c0 100%); */
}
.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; letter-spacing:1px; 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;
  letter-spacing:1px; transition:background .2s;
}
.video-toggle button.active,
.video-toggle button:hover { background:rgba(0,0,0,0.3); color:#fff; }



@media (max-width: 480px) {
  #s6.panel {
    height: 300px;
  }
  .video-player-wrap {
    width: 360px;
  }
}