/* =========================================
   SoftLight Yoga — home page
   styles/home.css
   ========================================= */

/* Hero */

.sy-hero {
  position: relative;
  padding-block: 3.2rem 3.8rem;
}

.sy-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

/* Text side */

.sy-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sy-accent-mint);
  margin-bottom: 0.85rem;
}

.sy-hero__title {
  font-size: 2.75rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin-bottom: 1.2rem;
  background: linear-gradient(120deg, #e5e7eb, #f97316, #f9a8d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sy-hero__text {
  font-size: 1rem;
  color: var(--sy-text-muted);
  max-width: 34rem;
}

.sy-hero__text + .sy-hero__text {
  margin-top: 0.8rem;
}

.sy-hero__text--secondary {
  color: var(--sy-text-soft);
}

.sy-hero__bullets {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sy-hero__bullet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 0.6rem;
}

.sy-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sy-accent-rose), var(--sy-accent-amber));
  margin-top: 0.45rem;
  box-shadow: 0 0 12px rgba(249, 168, 212, 0.8);
}

.sy-hero__bullet-text {
  font-size: 0.95rem;
  color: var(--sy-text-soft);
}

/* Actions */

.sy-hero__actions {
  margin-top: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sy-hero__microcopy {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--sy-text-soft);
}

/* Visual side */

.sy-hero__visual {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
}

.sy-hero__card {
  position: absolute;
  width: 100%;
  max-width: 290px;
  border-radius: var(--sy-radius-lg);
  padding: 0.75rem;
  background: radial-gradient(circle at 0 0, var(--sy-accent-amber-soft), transparent 60%),
              radial-gradient(circle at 100% 100%, var(--sy-accent-rose-soft), transparent 60%),
              var(--sy-bg-elevated);
  box-shadow: var(--sy-shadow-soft);
  border: 1px solid rgba(148, 163, 184, 0.45);
  transform-origin: center;
  overflow: hidden;
  transition:
    transform 260ms ease-out,
    box-shadow 260ms ease-out,
    border-color 260ms ease-out;
}

.sy-hero__card--front {
  z-index: 3;
  transform: translate(20px, -10px) rotate(-4deg);
}

.sy-hero__card--middle {
  z-index: 2;
  transform: translate(-10px, 40px) rotate(6deg);
}

.sy-hero__card--back {
  z-index: 1;
  transform: translate(-40px, -40px) rotate(-10deg);
  opacity: 0.9;
}

.sy-hero__photo {
  border-radius: 1.35rem;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.85);
}

.sy-hero__label {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--sy-text-soft);
}

/* Hover states: bring card to front */

.sy-hero__card:hover {
  transform: translate(0, -4px) scale(1.03);
  box-shadow: 0 26px 55px rgba(15, 23, 42, 0.95);
  border-color: rgba(248, 250, 252, 0.65);
}

/* Orbs */

.sy-hero__orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.8;
  animation: sy-orb-float 11s ease-in-out infinite alternate;
}

.sy-hero__orb--rose {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at 30% 30%, #f9a8d4 0, transparent 60%);
  top: -15px;
  right: 10px;
}

.sy-hero__orb--amber {
  width: 190px;
  height: 190px;
  background: radial-gradient(circle at 40% 40%, #facc6b 0, transparent 65%);
  bottom: -20px;
  left: -25px;
  animation-delay: 1.6s;
}

/* Badge */

.sy-hero__badge {
  position: absolute;
  bottom: 18px;
  right: -4px;
  width: min(240px, 85%);
  border-radius: 1.25rem;
  padding: 0.85rem 1rem;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95);
}

.sy-hero__badge-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sy-accent-amber);
  margin-bottom: 0.25rem;
}

.sy-hero__badge-text {
  font-size: 0.85rem;
  color: var(--sy-text-muted);
}

/* Orbs animation */

@keyframes sy-orb-float {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(6px, -10px, 0) scale(1.05);
  }
  100% {
    transform: translate3d(-8px, 4px, 0) scale(1.02);
  }
}

/* Hero responsive */

@media (max-width: 1024px) {
  .sy-hero__inner {
    gap: 2.5rem;
  }

  .sy-hero__title {
    font-size: 2.3rem;
  }
}

@media (max-width: 900px) {
  .sy-hero {
    padding-block: 2.8rem 3.2rem;
  }

  .sy-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-hero__visual {
    margin-top: 1.5rem;
    min-height: 340px;
  }

  .sy-hero__card--front {
    transform: translate(6px, -10px) rotate(-3deg);
  }

  .sy-hero__card--middle {
    transform: translate(-4px, 30px) rotate(4deg);
  }

  .sy-hero__card--back {
    transform: translate(-22px, -35px) rotate(-8deg);
  }

  .sy-hero__badge {
    right: 8px;
  }
}

@media (max-width: 640px) {
  .sy-hero {
    padding-block: 2.3rem 2.6rem;
  }

  .sy-eyebrow {
    font-size: 0.78rem;
  }

  .sy-hero__title {
    font-size: 1.9rem;
  }

  .sy-hero__text {
    font-size: 0.95rem;
  }

  .sy-hero__bullets {
    gap: 0.65rem;
  }

  .sy-hero__card {
    max-width: 260px;
  }

  .sy-hero__orb--rose {
    width: 120px;
    height: 120px;
    top: -10px;
    right: -4px;
  }

  .sy-hero__orb--amber {
    width: 150px;
    height: 150px;
    bottom: -10px;
    left: -20px;
  }

  .sy-hero__badge {
    position: static;
    margin-top: 1.2rem;
  }

  .sy-hero__visual {
    min-height: 300px;
  }
}

@media (max-width: 420px) {
  .sy-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sy-btn {
    width: 100%;
  }
}
/* Visual side */

.sy-hero__visual {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sy-hero__card {
  position: absolute;
  width: 100%;
  max-width: 280px;
  border-radius: var(--sy-radius-lg);
  padding: 0.75rem;
  background: radial-gradient(circle at 0 0, var(--sy-accent-amber-soft), transparent 60%),
              radial-gradient(circle at 100% 100%, var(--sy-accent-rose-soft), transparent 60%),
              var(--sy-bg-elevated);
  box-shadow: var(--sy-shadow-soft);
  border: 1px solid rgba(148, 163, 184, 0.45);
  transform-origin: center;
  overflow: hidden;
  transition:
    transform 260ms ease-out,
    box-shadow 260ms ease-out,
    border-color 260ms ease-out;
}

/* Раскладываем карточки, чтобы все три были видны */

.sy-hero__card--front {
  z-index: 3;
  transform: translateY(-18px) scale(1);
}

.sy-hero__card--middle {
  z-index: 2;
  transform: translate(-170px, 70px) scale(0.95);
}

.sy-hero__card--back {
  z-index: 1;
  transform: translate(170px, -70px) scale(0.92);
  opacity: 0.95;
}

.sy-hero__photo {
  border-radius: 1.35rem;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.85);
}

.sy-hero__label {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--sy-text-soft);
}

/* Hover: карточка чуть выезжает вперёд */

.sy-hero__card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 26px 55px rgba(15, 23, 42, 0.95);
  border-color: rgba(248, 250, 252, 0.65);
}

/* Orbs */

.sy-hero__orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.8;
  animation: sy-orb-float 11s ease-in-out infinite alternate;
}

.sy-hero__orb--rose {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at 30% 30%, #f9a8d4 0, transparent 60%);
  top: -15px;
  right: 10px;
}

.sy-hero__orb--amber {
  width: 190px;
  height: 190px;
  background: radial-gradient(circle at 40% 40%, #facc6b 0, transparent 65%);
  bottom: -20px;
  left: -25px;
  animation-delay: 1.6s;
}

/* Badge */

.sy-hero__badge {
  position: absolute;
  bottom: 18px;
  right: -4px;
  width: min(240px, 85%);
  border-radius: 1.25rem;
  padding: 0.85rem 1rem;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95);
}

.sy-hero__badge-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sy-accent-amber);
  margin-bottom: 0.25rem;
}

.sy-hero__badge-text {
  font-size: 0.85rem;
  color: var(--sy-text-muted);
}

/* Orbs animation */

@keyframes sy-orb-float {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(6px, -10px, 0) scale(1.05);
  }
  100% {
    transform: translate3d(-8px, 4px, 0) scale(1.02);
  }
}

/* Hero responsive */

@media (max-width: 1024px) {
  .sy-hero__inner {
    gap: 2.5rem;
  }

  .sy-hero__title {
    font-size: 2.3rem;
  }
}

@media (max-width: 900px) {
  .sy-hero {
    padding-block: 2.8rem 3.2rem;
  }

  .sy-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* На планшетах и телефонах показываем карточки столбиком,
     чтобы точно были видны все три */
  .sy-hero__visual {
    margin-top: 1.5rem;
    min-height: unset;
    flex-direction: column;
    gap: 1.25rem;
  }

  .sy-hero__card {
    position: relative;
    max-width: 320px;
    transform: none;
    margin-inline: auto;
  }

  .sy-hero__badge {
    position: static;
    width: 100%;
    margin-top: 0.75rem;
  }
}

@media (max-width: 640px) {
  .sy-hero {
    padding-block: 2.3rem 2.6rem;
  }

  .sy-eyebrow {
    font-size: 0.78rem;
  }

  .sy-hero__title {
    font-size: 1.9rem;
  }

  .sy-hero__text {
    font-size: 0.95rem;
  }

  .sy-hero__bullets {
    gap: 0.65rem;
  }

  .sy-hero__orb--rose {
    width: 120px;
    height: 120px;
    top: -10px;
    right: -4px;
  }

  .sy-hero__orb--amber {
    width: 150px;
    height: 150px;
    bottom: -10px;
    left: -20px;
  }
}

@media (max-width: 420px) {
  .sy-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sy-btn {
    width: 100%;
  }
}
/* =========================================
   2. Soft sequence section
   ========================================= */

.sy-soft {
  position: relative;
  padding-block: 3.2rem 3.4rem;
}

.sy-soft__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-soft__title {
  font-size: 2.1rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #e5e7eb;
}

.sy-soft__text {
  font-size: 0.98rem;
  color: var(--sy-text-soft);
  max-width: 35rem;
}

.sy-soft__text + .sy-soft__text {
  margin-top: 0.8rem;
}

.sy-soft__list {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sy-soft__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
}

.sy-soft__item-dot {
  width: 9px;
  height: 9px;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, var(--sy-accent-mint) 0, transparent 60%);
  box-shadow: 0 0 12px rgba(110, 231, 183, 0.9);
}

.sy-soft__item-title {
  font-size: 0.98rem;
  margin-bottom: 0.2rem;
  color: #e5e7eb;
}

.sy-soft__item-text {
  font-size: 0.9rem;
  color: var(--sy-text-soft);
}

/* Soft sequence rail */

.sy-soft__rail {
  position: relative;
  display: grid;
  gap: 1.4rem;
}

.sy-soft__step {
  position: relative;
}

.sy-soft__halo {
  position: absolute;
  inset: -14px -12px;
  border-radius: var(--sy-radius-lg);
  background: radial-gradient(circle at 0 0, rgba(249, 168, 212, 0.22), transparent 65%);
  opacity: 0.8;
  filter: blur(10px);
  pointer-events: none;
}

.sy-soft__halo--mint {
  background: radial-gradient(circle at 20% 20%, rgba(45, 212, 191, 0.25), transparent 65%);
}

.sy-soft__halo--amber {
  background: radial-gradient(circle at 80% 80%, rgba(250, 204, 107, 0.25), transparent 65%);
}

.sy-soft__card {
  position: relative;
  border-radius: var(--sy-radius-lg);
  padding: 0.7rem;
  background: var(--sy-bg-soft);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: var(--sy-shadow-soft);
  overflow: hidden;
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}

.sy-soft__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 45px rgba(15, 23, 42, 0.95);
  border-color: rgba(248, 250, 252, 0.7);
}

.sy-soft__image {
  border-radius: 1.25rem;
}

.sy-soft__caption {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--sy-text-muted);
}

.sy-soft__tag {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sy-text-soft);
}

/* =========================================
   3. Lighting moods section
   ========================================= */

.sy-light {
  position: relative;
  padding-block: 3.2rem 3.6rem;
}

.sy-light__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: flex-start;
}

.sy-light__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #e5e7eb;
}

.sy-light__text {
  font-size: 0.98rem;
  color: var(--sy-text-soft);
  max-width: 36rem;
}

.sy-light__text + .sy-light__text {
  margin-top: 0.85rem;
}

.sy-light__grid {
  display: grid;
  gap: 1.4rem;
}

.sy-light__chip {
  position: relative;
  border-radius: var(--sy-radius-lg);
  padding: 1rem;
  background: radial-gradient(circle at 0 0, rgba(249, 168, 212, 0.12), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.1), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: var(--sy-shadow-soft);
  overflow: hidden;
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}

.sy-light__chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 48px rgba(15, 23, 42, 0.98);
  border-color: rgba(248, 250, 252, 0.8);
}

.sy-light__glow {
  position: absolute;
  inset: -40%;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.65;
  pointer-events: none;
}

.sy-light__glow--dawn {
  background: radial-gradient(circle at 30% 30%, rgba(250, 204, 107, 0.4), transparent 65%);
}

.sy-light__glow--twilight {
  background: radial-gradient(circle at 70% 70%, rgba(129, 140, 248, 0.45), transparent 65%);
}

.sy-light__figure {
  position: relative;
  margin-bottom: 0.55rem;
}

.sy-light__image {
  border-radius: 1.25rem;
}

.sy-light__caption {
  font-size: 0.82rem;
  color: var(--sy-text-muted);
}

.sy-light__desc {
  position: relative;
  font-size: 0.9rem;
  color: var(--sy-text-soft);
}

/* =========================================
   4. Orbit of class types
   ========================================= */

.sy-orbit {
  position: relative;
  padding-block: 3.4rem 3.8rem;
}

.sy-orbit__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-orbit__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #e5e7eb;
}

.sy-orbit__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-orbit__text + .sy-orbit__text {
  margin-top: 0.8rem;
}

.sy-orbit__rings {
  position: relative;
  min-height: 280px;
  display: grid;
  place-items: center;
}

.sy-orbit__rings::before,
.sy-orbit__rings::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
}

.sy-orbit__rings::before {
  width: 220px;
  height: 220px;
}

.sy-orbit__rings::after {
  width: 320px;
  height: 320px;
  opacity: 0.6;
}

.sy-orbit__node {
  position: absolute;
  max-width: 220px;
  text-align: left;
}

.sy-orbit__node--beginner {
  top: 4%;
  left: 0;
}

.sy-orbit__node--midday {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.sy-orbit__node--evening {
  top: 8%;
  right: 0;
}

.sy-orbit__figure {
  margin-bottom: 0.45rem;
}

.sy-orbit__image {
  border-radius: 999px;
}

.sy-orbit__label {
  font-size: 0.84rem;
  color: var(--sy-text-muted);
}

.sy-orbit__desc {
  font-size: 0.88rem;
  color: var(--sy-text-soft);
}

/* Hover: узлы чуть приподнимаются */

.sy-orbit__node:hover {
  transform: translateY(-3px);
}

/* =========================================
   Responsive for sections 2–4
   ========================================= */

@media (max-width: 1024px) {
  .sy-soft__inner,
  .sy-light__inner,
  .sy-orbit__inner {
    gap: 2.4rem;
  }

  .sy-soft__title,
  .sy-light__title,
  .sy-orbit__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 900px) {
  .sy-soft__inner,
  .sy-light__inner,
  .sy-orbit__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-soft__rail {
    margin-top: 1.4rem;
  }

  .sy-orbit__rings {
    margin-top: 1.4rem;
  }

  .sy-orbit__rings::before,
  .sy-orbit__rings::after {
    width: 230px;
    height: 230px;
  }

  .sy-orbit__rings::after {
    width: 280px;
    height: 280px;
  }

  .sy-orbit__node {
    position: relative;
    max-width: none;
    margin-bottom: 1.3rem;
    transform: none;
  }

  .sy-orbit__node--beginner,
  .sy-orbit__node--midday,
  .sy-orbit__node--evening {
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
  }

  .sy-orbit__rings {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .sy-orbit__rings::before,
  .sy-orbit__rings::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .sy-soft,
  .sy-light,
  .sy-orbit {
    padding-block: 2.6rem 2.9rem;
  }

  .sy-soft__title,
  .sy-light__title,
  .sy-orbit__title {
    font-size: 1.6rem;
  }

  .sy-soft__text,
  .sy-light__text,
  .sy-orbit__text {
    font-size: 0.94rem;
  }

  .sy-soft__item-text,
  .sy-light__desc,
  .sy-orbit__desc {
    font-size: 0.86rem;
  }
}

@media (max-width: 420px) {
  .sy-soft__card,
  .sy-light__chip {
    padding: 0.75rem;
  }

  .sy-orbit__desc {
    font-size: 0.84rem;
  }
}
/* =========================================
   5. Soft props band
   ========================================= */

.sy-props {
  position: relative;
  padding-block: 3rem 3.4rem;
}

.sy-props__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

.sy-props__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.8rem;
  color: #e5e7eb;
}

.sy-props__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 28rem;
}

.sy-props__trail {
  position: relative;
  min-height: 220px;
}

.sy-props__line {
  position: absolute;
  inset: 40% 0;
  border-radius: 999px;
  background: radial-gradient(circle at 0 50%, rgba(250, 204, 107, 0.32), transparent 60%),
              radial-gradient(circle at 100% 50%, rgba(249, 168, 212, 0.32), transparent 60%);
  opacity: 0.4;
}

.sy-props__node {
  position: absolute;
  max-width: 220px;
  border-radius: var(--sy-radius-lg);
  padding: 0.7rem;
  background: var(--sy-bg-soft);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: var(--sy-shadow-soft);
  overflow: hidden;
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}

.sy-props__node--left {
  left: 0;
  top: 0;
}

.sy-props__node--right {
  right: 0;
  bottom: 0;
}

.sy-props__node:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 48px rgba(15, 23, 42, 0.98);
  border-color: rgba(248, 250, 252, 0.8);
}

.sy-props__image {
  border-radius: 1.25rem;
}

.sy-props__caption {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--sy-text-muted);
}

/* =========================================
   6. Schedule ribbon
   ========================================= */

.sy-schedule {
  position: relative;
  padding-block: 3rem 3.4rem;
}

.sy-schedule__inner {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.sy-schedule__title {
  font-size: 1.9rem;
  line-height: 1.2;
  color: #e5e7eb;
}

.sy-schedule__ribbon {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.sy-schedule__ribbon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0), rgba(148, 163, 184, 0.5), rgba(148, 163, 184, 0));
  pointer-events: none;
}

.sy-schedule__slot {
  position: relative;
  border-radius: var(--sy-radius-lg);
  padding: 1rem 1rem 1.1rem;
  background: radial-gradient(circle at 0 0, rgba(110, 231, 183, 0.18), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: var(--sy-shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}

.sy-schedule__slot:nth-child(2) {
  background: radial-gradient(circle at 70% 0, rgba(56, 189, 248, 0.22), transparent 65%),
              var(--sy-bg-elevated);
}

.sy-schedule__slot:nth-child(3) {
  background: radial-gradient(circle at 50% 100%, rgba(249, 168, 212, 0.22), transparent 60%),
              var(--sy-bg-elevated);
}

.sy-schedule__slot:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px rgba(15, 23, 42, 0.98);
  border-color: rgba(248, 250, 252, 0.8);
}

.sy-schedule__time {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
}

.sy-schedule__note {
  font-size: 0.9rem;
  color: var(--sy-text-soft);
}

.sy-schedule__image {
  margin-top: 0.4rem;
  border-radius: 1.25rem;
}

/* =========================================
   7. Breath pattern
   ========================================= */

.sy-breath {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-breath__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

.sy-breath__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.7rem;
  color: #e5e7eb;
}

.sy-breath__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 26rem;
}

.sy-breath__pattern {
  position: relative;
  border-radius: var(--sy-radius-lg);
  padding: 1.1rem 1.3rem;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.25), transparent 65%),
              radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.25), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: var(--sy-shadow-soft);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: flex-end;
  overflow: hidden;
}

.sy-breath__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.sy-breath__number {
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.sy-breath__cell--inhale .sy-breath__number {
  color: var(--sy-accent-mint);
}

.sy-breath__cell--hold .sy-breath__number {
  color: var(--sy-accent-amber);
}

.sy-breath__cell--exhale .sy-breath__number {
  color: var(--sy-accent-rose);
}

.sy-breath__label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sy-text-muted);
}

.sy-breath__photo {
  position: absolute;
  width: 88px;
  bottom: 0.7rem;
}

.sy-breath__photo--left {
  left: 0.6rem;
}

.sy-breath__photo--right {
  right: 0.6rem;
}

.sy-breath__photo img {
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95);
}

/* Hover pulse for breath numbers */

.sy-breath__cell:hover .sy-breath__number {
  transform: translateY(-2px);
  transition: transform 180ms ease-out;
}

/* =========================================
   Responsive for sections 5–7
   ========================================= */

@media (max-width: 1024px) {
  .sy-props__inner,
  .sy-breath__inner {
    gap: 2.4rem;
  }

  .sy-props__title,
  .sy-schedule__title,
  .sy-breath__title {
    font-size: 1.7rem;
  }
}

@media (max-width: 900px) {
  .sy-props__inner,
  .sy-breath__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-props__trail {
    margin-top: 1.4rem;
    min-height: 260px;
  }

  .sy-props__node--left {
    left: 6%;
  }

  .sy-props__node--right {
    right: 6%;
  }

  .sy-schedule__ribbon {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-schedule__ribbon::before {
    display: none;
  }

  .sy-breath__pattern {
    margin-top: 1.2rem;
  }
}

@media (max-width: 640px) {
  .sy-props,
  .sy-schedule,
  .sy-breath {
    padding-block: 2.5rem 2.8rem;
  }

  .sy-props__title,
  .sy-schedule__title,
  .sy-breath__title {
    font-size: 1.55rem;
  }

  .sy-props__text,
  .sy-schedule__note,
  .sy-breath__text {
    font-size: 0.9rem;
  }

  .sy-breath__pattern {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: 1rem;
  }

  .sy-breath__photo {
    width: 72px;
  }
}

@media (max-width: 420px) {
  .sy-props__trail {
    min-height: 220px;
  }

  .sy-props__node {
    max-width: 200px;
  }

  .sy-breath__number {
    font-size: 1.8rem;
  }
}
/* =========================================
   7. Breath pattern
   ========================================= */

.sy-breath {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-breath__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

.sy-breath__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.7rem;
  color: #e5e7eb;
}

.sy-breath__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 26rem;
}

/* сама «таблетка» с дыханием */

.sy-breath__pattern {
  border-radius: var(--sy-radius-lg);
  padding: 1.1rem 1.3rem 1.4rem;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.25), transparent 65%),
              radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.25), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: var(--sy-shadow-soft);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 0.9rem;
  align-items: flex-end;
}

/* числа вдох/задержка/выдох */

.sy-breath__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.sy-breath__number {
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.sy-breath__cell--inhale .sy-breath__number {
  color: var(--sy-accent-mint);
}

.sy-breath__cell--hold .sy-breath__number {
  color: var(--sy-accent-amber);
}

.sy-breath__cell--exhale .sy-breath__number {
  color: var(--sy-accent-rose);
}

.sy-breath__label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sy-text-muted);
}

/* фото — во второй строке сетки, не перекрывая цифры */

.sy-breath__photo {
  justify-self: center;
  margin-top: 0.6rem;
  max-width: 80px;
}

.sy-breath__photo--left {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.sy-breath__photo--right {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.sy-breath__photo img {
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95);
}

/* Hover pulse для цифр */

.sy-breath__cell:hover .sy-breath__number {
  transform: translateY(-2px);
  transition: transform 180ms ease-out;
}

/* ---------- Responsive для секции 7 ---------- */

@media (max-width: 1024px) {
  .sy-breath__inner {
    gap: 2.4rem;
  }

  .sy-breath__title {
    font-size: 1.7rem;
  }
}

@media (max-width: 900px) {
  .sy-breath__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-breath__pattern {
    margin-top: 1.2rem;
  }
}

@media (max-width: 640px) {
  .sy-breath {
    padding-block: 2.5rem 2.8rem;
  }

  .sy-breath__title {
    font-size: 1.55rem;
  }

  .sy-breath__text {
    font-size: 0.9rem;
  }

  .sy-breath__number {
    font-size: 1.9rem;
  }

  .sy-breath__photo {
    max-width: 72px;
  }
}

@media (max-width: 420px) {
  .sy-breath__pattern {
    padding-inline: 1rem;
  }
}
/* =========================================
   8. Soft soundscapes
   ========================================= */

.sy-sound {
  position: relative;
  padding-block: 3rem 3.4rem;
}

.sy-sound__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

.sy-sound__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.7rem;
  color: #e5e7eb;
}

.sy-sound__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 28rem;
}

.sy-sound__tracks {
  display: grid;
  gap: 1rem;
}

.sy-sound__track {
  position: relative;
  border-radius: 999px;
  padding: 0.75rem 0.95rem;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.18), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.18), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: var(--sy-shadow-soft);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}

.sy-sound__track:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 42px rgba(15, 23, 42, 0.98);
  border-color: rgba(248, 250, 252, 0.85);
}

.sy-sound__wave {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sy-accent-mint), var(--sy-accent-amber));
  position: relative;
  overflow: hidden;
}

.sy-sound__wave::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(15, 23, 42, 0.1) 25%, transparent 25%, transparent 50%, rgba(15, 23, 42, 0.15) 50%, rgba(15, 23, 42, 0.15) 75%, transparent 75%, transparent);
  background-size: 10px 10px;
  animation: sy-sound-scroll 6s linear infinite;
}

.sy-sound__wave--mint {
  background: linear-gradient(90deg, var(--sy-accent-mint), #38bdf8);
}

.sy-sound__wave--violet {
  background: linear-gradient(90deg, #6366f1, var(--sy-accent-rose));
}

@keyframes sy-sound-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-10px); }
}

.sy-sound__info {
  min-width: 0;
}

.sy-sound__name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #e5e7eb;
}

.sy-sound__note {
  font-size: 0.84rem;
  color: var(--sy-text-soft);
}

.sy-sound__figure {
  justify-self: end;
}

.sy-sound__image {
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.95);
}

/* =========================================
   9. Practice anywhere layout
   ========================================= */

.sy-anywhere {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-anywhere__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 3rem;
  align-items: center;
}

.sy-anywhere__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.7rem;
  color: #e5e7eb;
}

.sy-anywhere__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 28rem;
}

.sy-anywhere__board {
  position: relative;
  min-height: 260px;
}

.sy-anywhere__card {
  position: absolute;
  border-radius: 1.5rem;
  padding: 0.6rem 0.7rem 0.9rem;
  background: var(--sy-bg-soft);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: var(--sy-shadow-soft);
  max-width: 230px;
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}

.sy-anywhere__card img {
  border-radius: 1.2rem;
}

.sy-anywhere__card--home {
  top: 0;
  left: 0;
  transform: rotate(-4deg);
}

.sy-anywhere__card--park {
  top: 18%;
  right: 2%;
  transform: rotate(5deg);
}

.sy-anywhere__card--office {
  bottom: 0;
  left: 22%;
  transform: rotate(-2deg);
}

.sy-anywhere__card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 26px 46px rgba(15, 23, 42, 0.98);
  border-color: rgba(248, 250, 252, 0.85);
}

.sy-anywhere__label {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--sy-text-muted);
}

/* =========================================
   10. Teachers and holding space
   ========================================= */

.sy-teachers {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-teachers__head {
  margin-bottom: 1.5rem;
}

.sy-teachers__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  color: #e5e7eb;
}

.sy-teachers__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 30rem;
}

.sy-teachers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.sy-teachers__card {
  border-radius: var(--sy-radius-lg);
  padding: 0.9rem 1rem 1.1rem;
  background: radial-gradient(circle at 0 0, rgba(249, 168, 212, 0.18), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: var(--sy-shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}

.sy-teachers__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 48px rgba(15, 23, 42, 0.98);
  border-color: rgba(248, 250, 252, 0.85);
}

.sy-teachers__figure {
  margin-bottom: 0.25rem;
}

.sy-teachers__image {
  border-radius: 1.25rem;
}

.sy-teachers__name {
  font-size: 0.96rem;
  color: #e5e7eb;
}

.sy-teachers__note {
  font-size: 0.88rem;
  color: var(--sy-text-soft);
}

/* =========================================
   Responsive for sections 8–10
   ========================================= */

@media (max-width: 1024px) {
  .sy-sound__inner,
  .sy-anywhere__inner {
    gap: 2.4rem;
  }

  .sy-sound__title,
  .sy-anywhere__title,
  .sy-teachers__title {
    font-size: 1.7rem;
  }
}

@media (max-width: 900px) {
  .sy-sound__inner,
  .sy-anywhere__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-anywhere__board {
    margin-top: 1.4rem;
    min-height: 280px;
  }

  .sy-anywhere__card {
    max-width: 210px;
  }

  .sy-anywhere__card--home {
    left: 4%;
  }

  .sy-anywhere__card--office {
    left: 16%;
  }

  .sy-teachers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sy-sound,
  .sy-anywhere,
  .sy-teachers {
    padding-block: 2.5rem 2.8rem;
  }

  .sy-sound__title,
  .sy-anywhere__title,
  .sy-teachers__title {
    font-size: 1.55rem;
  }

  .sy-sound__text,
  .sy-anywhere__text,
  .sy-teachers__text {
    font-size: 0.9rem;
  }

  .sy-teachers__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-anywhere__board {
    min-height: 260px;
  }
}

@media (max-width: 420px) {
  .sy-sound__track {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sy-sound__figure {
    display: none; /* чтобы карточка не ломала мобильный экран */
  }

  .sy-anywhere__card {
    max-width: 190px;
  }
}
/* =========================================
   11. Nervous-system friendly practice
   ========================================= */

.sy-nervous {
  position: relative;
  padding-block: 3rem 3.5rem;
}

.sy-nervous__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

.sy-nervous__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-nervous__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 27rem;
}

.sy-nervous__list {
  margin-top: 1.1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sy-nervous__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
}

.sy-nervous__dot {
  width: 9px;
  height: 9px;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #facc6b 0, transparent 60%);
  box-shadow: 0 0 14px rgba(250, 204, 107, 0.9);
}

.sy-nervous__item-text {
  font-size: 0.9rem;
  color: var(--sy-text-soft);
}

/* поле с орбитами */

.sy-nervous__field {
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
}

.sy-nervous__halo {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 0, rgba(94, 234, 212, 0.35), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(249, 168, 212, 0.35), transparent 60%);
  filter: blur(8px);
  opacity: 0.9;
}

.sy-nervous__core {
  position: relative;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: radial-gradient(circle at 20% 0, #38bdf8 0, #0f172a 55%);
  border: 1px solid rgba(248, 250, 252, 0.45);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.3rem;
}

.sy-nervous__core-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e5e7eb;
}

.sy-nervous__core-note {
  margin-top: 0.45rem;
  font-size: 0.86rem;
  color: var(--sy-text-muted);
}

.sy-nervous__orbit {
  position: absolute;
  width: 90px;
}

.sy-nervous__orbit img {
  border-radius: 1.3rem;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.98);
}

.sy-nervous__orbit--notes {
  top: 4%;
  left: 8%;
}

.sy-nervous__orbit--neck {
  top: 10%;
  right: 4%;
}

.sy-nervous__orbit--rest {
  bottom: 6%;
  left: 38%;
}

/* hover: лёгкое увеличение орбит */

.sy-nervous__orbit:hover {
  transform: translateY(-3px);
  transition: transform 200ms ease-out;
}

/* =========================================
   12. Weekly map of softness
   ========================================= */

.sy-week {
  position: relative;
  padding-block: 3rem 3.5rem;
}

.sy-week__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr);
  gap: 3rem;
  align-items: center;
}

.sy-week__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-week__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 28rem;
}

.sy-week__days {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.sy-week__day {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--sy-text-muted);
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(15, 23, 42, 0.9);
  cursor: default;
  transition:
    background-color 180ms ease-out,
    transform 180ms ease-out,
    border-color 180ms ease-out;
}

.sy-week__day--anchor {
  border-color: rgba(250, 204, 107, 0.9);
  background: radial-gradient(circle at 0 0, rgba(250, 204, 107, 0.22), transparent 60%),
              rgba(15, 23, 42, 0.98);
}

.sy-week__day:hover {
  transform: translateY(-2px);
  background: rgba(15, 23, 42, 1);
}

/* стопка карточек */

.sy-week__stack {
  position: relative;
  min-height: 260px;
}

.sy-week__card {
  position: absolute;
  border-radius: 1.5rem;
  padding: 0.6rem 0.7rem 0.9rem;
  background: var(--sy-bg-soft);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: var(--sy-shadow-soft);
  max-width: 230px;
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}

.sy-week__card img {
  border-radius: 1.2rem;
}

.sy-week__card--desk {
  top: 0;
  left: 4%;
  transform: rotate(-4deg);
}

.sy-week__card--phone {
  top: 24%;
  right: 2%;
  transform: rotate(5deg);
}

.sy-week__card--journal {
  bottom: -2%;
  left: 24%;
  transform: rotate(-2deg);
}

.sy-week__card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 26px 46px rgba(15, 23, 42, 0.98);
  border-color: rgba(248, 250, 252, 0.85);
}

.sy-week__caption {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--sy-text-muted);
}

/* =========================================
   13. Micro-rituals
   ========================================= */

.sy-rituals {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-rituals__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-rituals__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-rituals__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 29rem;
}

.sy-rituals__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sy-rituals__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  border-radius: 999px;
  padding: 0.6rem 0.9rem;
  background: radial-gradient(circle at 0 0, rgba(249, 168, 212, 0.22), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: var(--sy-shadow-soft);
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out,
    border-color 200ms ease-out;
}

.sy-rituals__row:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px rgba(15, 23, 42, 0.98);
  border-color: rgba(248, 250, 252, 0.85);
}

.sy-rituals__thumb {
  width: 52px;
  height: 52px;
}

.sy-rituals__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.9);
}

.sy-rituals__name {
  font-size: 0.96rem;
  color: #e5e7eb;
}

.sy-rituals__note {
  font-size: 0.86rem;
  color: var(--sy-text-soft);
}

/* ---------- Responsive для секций 11–13 ---------- */

@media (max-width: 1024px) {
  .sy-nervous__inner,
  .sy-week__inner,
  .sy-rituals__inner {
    gap: 2.4rem;
  }

  .sy-nervous__title,
  .sy-week__title,
  .sy-rituals__title {
    font-size: 1.7rem;
  }
}

@media (max-width: 900px) {
  .sy-nervous__inner,
  .sy-week__inner,
  .sy-rituals__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-week__stack {
    margin-top: 1.4rem;
    min-height: 280px;
  }

  .sy-week__card {
    max-width: 210px;
  }

  .sy-week__card--desk {
    left: 6%;
  }

  .sy-week__card--journal {
    left: 18%;
  }
}

@media (max-width: 640px) {
  .sy-nervous,
  .sy-week,
  .sy-rituals {
    padding-block: 2.5rem 2.8rem;
  }

  .sy-nervous__title,
  .sy-week__title,
  .sy-rituals__title {
    font-size: 1.55rem;
  }

  .sy-nervous__text,
  .sy-week__text,
  .sy-rituals__text {
    font-size: 0.9rem;
  }

  .sy-week__stack {
    min-height: 260px;
  }

  .sy-rituals__row {
    border-radius: 1.3rem;
  }
}

@media (max-width: 420px) {
  .sy-week__card {
    max-width: 190px;
  }

  .sy-rituals__row {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .sy-rituals__thumb {
    width: 46px;
    height: 46px;
  }
}
/* =========================================
   14. Studio etiquette
   ========================================= */

.sy-studio {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-studio__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

.sy-studio__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-studio__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 28rem;
}

.sy-studio__strip {
  position: relative;
  padding-left: 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

.sy-studio__strip::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(110, 231, 183, 0.9),
    rgba(250, 204, 107, 0.9),
    rgba(249, 168, 212, 0.9)
  );
  opacity: 0.45;
}

.sy-studio__rule {
  position: relative;
  border-radius: 1.45rem;
  padding: 0.6rem 0.9rem;
  background: var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: var(--sy-shadow-soft);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out,
    border-color 200ms ease-out;
}

.sy-studio__rule:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px rgba(15, 23, 42, 0.98);
  border-color: rgba(248, 250, 252, 0.85);
}

.sy-studio__thumb {
  width: 54px;
  height: 54px;
  border-radius: 1.3rem;
  overflow: hidden;
}

.sy-studio__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.sy-studio__tag {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
}

.sy-studio__note {
  margin-top: 0.15rem;
  font-size: 0.86rem;
  color: var(--sy-text-soft);
}

/* =========================================
   15. Soft moods
   ========================================= */

.sy-moods {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-moods__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

.sy-moods__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-moods__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 28rem;
}

.sy-moods__chips {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.sy-moods__chip {
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--sy-text-muted);
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: rgba(15, 23, 42, 0.96);
  transition:
    background-color 200ms ease-out,
    transform 200ms ease-out,
    border-color 200ms ease-out;
}

.sy-moods__chip:hover {
  transform: translateY(-2px);
  border-color: rgba(248, 250, 252, 0.9);
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.25), transparent 60%),
              rgba(15, 23, 42, 1);
}

.sy-moods__visual {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
}

.sy-moods__panel {
  border-radius: 1.8rem;
  padding: 0.9rem 1.1rem;
  background: radial-gradient(circle at 0 0, rgba(110, 231, 183, 0.2), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(249, 168, 212, 0.2), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: var(--sy-shadow-soft);
  margin-bottom: 0.9rem;
}

.sy-moods__kicker {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
  margin-bottom: 0.25rem;
}

.sy-moods__line {
  font-size: 0.88rem;
  color: var(--sy-text-soft);
}

.sy-moods__hero {
  border-radius: 1.7rem;
  overflow: hidden;
  box-shadow: var(--sy-shadow-soft);
}

.sy-moods__hero img {
  border-radius: inherit;
}

.sy-moods__mini {
  position: absolute;
  width: 46%;
  bottom: -18%;
  right: 6%;
  border-radius: 1.5rem;
  padding: 0.3rem;
  background: var(--sy-bg-soft);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 0 24px 46px rgba(15, 23, 42, 0.98);
}

.sy-moods__mini img {
  border-radius: 1.2rem;
}

/* =========================================
   16. Gentle promise
   ========================================= */

.sy-promise {
  position: relative;
  padding-block: 3.2rem 3.8rem;
}

.sy-promise__inner {
  display: flex;
  justify-content: center;
}

.sy-promise__card {
  width: 100%;
  max-width: 860px;
  border-radius: 2rem;
  padding: 1.4rem 1.6rem 1.5rem;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.22), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.25), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 0 26px 56px rgba(15, 23, 42, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.sy-promise__title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-promise__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 33rem;
}

.sy-promise__points {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--sy-text-soft);
}

.sy-promise__point::before {
  content: "•";
  margin-right: 0.4rem;
  color: var(--sy-accent-amber);
}

.sy-promise__photos {
  grid-column: 1 / -1;
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.sy-promise__photo {
  flex: 1 1 180px;
  max-width: 230px;
  border-radius: 1.5rem;
  padding: 0.45rem 0.55rem 0.7rem;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 0 24px 46px rgba(15, 23, 42, 0.98);
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out,
    border-color 200ms ease-out;
}

.sy-promise__photo:hover {
  transform: translateY(-3px);
  border-color: rgba(248, 250, 252, 0.9);
}

.sy-promise__photo img {
  border-radius: 1.2rem;
}

.sy-promise__caption {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--sy-text-muted);
}

/* ---------- Responsive for sections 14–16 ---------- */

@media (max-width: 1024px) {
  .sy-studio__inner,
  .sy-moods__inner {
    gap: 2.4rem;
  }

  .sy-studio__title,
  .sy-moods__title,
  .sy-promise__title {
    font-size: 1.7rem;
  }
}

@media (max-width: 900px) {
  .sy-studio__inner,
  .sy-moods__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-moods__visual {
    margin-top: 1.4rem;
  }

  .sy-moods__mini {
    bottom: -16%;
  }

  .sy-promise__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-promise__points {
    font-size: 0.88rem;
  }
}

@media (max-width: 640px) {
  .sy-studio,
  .sy-moods,
  .sy-promise {
    padding-block: 2.6rem 2.9rem;
  }

  .sy-studio__title,
  .sy-moods__title,
  .sy-promise__title {
    font-size: 1.55rem;
  }

  .sy-studio__text,
  .sy-moods__text,
  .sy-promise__text {
    font-size: 0.9rem;
  }

  .sy-moods__mini {
    width: 52%;
    right: 4%;
  }

  .sy-promise__card {
    padding-inline: 1.2rem;
  }
}

@media (max-width: 420px) {
  .sy-studio__rule {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-studio__thumb {
    width: 48px;
    height: 48px;
  }

  .sy-moods__mini {
    position: static;
    margin-top: 0.8rem;
  }

  .sy-promise__photos {
    flex-direction: column;
  }
}