/* ==========================================================================
   НАЧАЛО БЛОКА: ШРИФТЫ
   ========================================================================== */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-400-cyrillic.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-400-latin.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/nunito-700.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/nunito-900.woff2") format("woff2");
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ШРИФТЫ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: БАЗОВЫЕ СТИЛИ И ОБЩИЕ ЭЛЕМЕНТЫ
   ========================================================================== */

:root {
  --blue: #095be8;
  --blue-hover: #064dc8;
  --navy: #10294d;
  --navy-soft: #17385f;
  --text: #304d70;
  --muted: #60748e;
  --yellow: #ffdf36;
  --paper: #f5f8fc;
  --blue-pale: #edf4ff;
  --line: #d7e3f1;
  --success: #528008;
  --danger: #b42318;
  --white: #fff;
  --black: #000;
  --cyan: #78e0ff;
  --purple: #632de6;
  --pink: #e85499;
  --yellow-soft: #fff0a8;
  --green-soft: #e7f5d8;
  --pink-soft: #ffdbe6;
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.9rem;
  --font-size-body: 1rem;
  --font-size-lead: 1.1rem;
  --font-size-card: 1.25rem;
  --font-size-title: 1.5rem;
  --font-size-display: 2rem;
  --heading-sm: clamp(2rem, 4vw, 3rem);
  --heading-md: clamp(2.5rem, 5vw, 4rem);
  --heading-lg: clamp(3rem, 6vw, 5rem);
  --line-tight: 1;
  --line-heading: 1.1;
  --line-copy: 1.4;
  --line-body: 1.6;
  --tracking-tight: -0.05em;
  --tracking-label: 0.06em;
  --tracking-wide: 0.1em;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-space: clamp(4rem, 8vw, 7rem);
  --section-space-small: clamp(3rem, 6vw, 6rem);
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --shadow-sm: 0 0.5rem 1.25rem rgb(16 41 77 / 8%);
  --shadow-md: 0 1rem 2.5rem rgb(16 41 77 / 12%);
  --shadow-lg: 0 2rem 5rem rgb(16 41 77 / 18%);
  --shadow-blue: 0 1rem 2.5rem rgb(9 91 232 / 18%);
  --shadow-dark: 0 2rem 5rem rgb(2 11 24 / 35%);
  --duration-fast: 180ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --max: 88rem;
  color: var(--navy);
  background: var(--white);
  font-family: "Nunito", "Trebuchet MS", Arial, sans-serif;
  font-synthesis: none;
  --page-gutter: 2.5rem;
  --symbol-size: 3rem;
  --heading-gap: var(--space-7);
  --grid-gap: clamp(var(--space-6), 6vw, var(--space-9));
  --grid-gap-small: clamp(var(--space-5), 4vw, var(--space-7));
  --radius-feature: var(--radius-lg) 5rem var(--radius-lg) var(--radius-lg);
  --radius-sticker: var(--radius-md) var(--radius-xl) var(--radius-md) var(--radius-md);
  --on-dark-muted: rgb(255 255 255 / 70%);
  --border-dark: rgb(255 255 255 / 20%);
  --surface-dark: rgb(255 255 255 / 5%);
  --focus-ring: 0 0 0 0.2rem rgb(9 91 232 / 15%);
  --shadow-up: 0 -0.5rem 1.5rem rgb(16 41 77 / 8%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.6rem;
}

body {
  min-width: 20rem;
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  text-rendering: optimizeLegibility;
}

select,
textarea {
  font: inherit;
}

button,
input {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

a {
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 0.2rem solid var(--blue);
  outline-offset: 0.3rem;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

figure {
  margin: 0;
}

p {
  margin: 0;
  line-height: var(--line-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--navy);
  font-weight: 900;
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-tight);
}

.approach > .container,
.campus-shell,
.contact-hub-grid {
  width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
}

.container {
  margin-inline: auto;
  width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
}

.direction-wrap,
.directions > .container,
.header .container,
.hero .container,
.prices-wrap,
.trial-shell,
.voices-layout,
.works > .container {
  width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
}

.section {
  position: relative;
}

.learning-heading h2,
.directions-heading h2,
.works-heading h2,
.voices-copy h2,
.campus-story h2,
.trial .trial-story h2,
.contact-hub h2 {
  font-size: var(--heading-lg);
  line-height: var(--line-tight);
  text-wrap: balance;
}

.approach,
.campus,
.contact-hub,
.direction-fit,
.direction-intro,
.direction-projects,
.direction-section,
.directions,
.reviews,
.trial,
.works {
  padding-block: var(--section-space);
}

.learning-heading,
.directions-heading,
.works-heading {
  margin-bottom: var(--heading-gap);
}

.site-dialog h2,
.direction-story-copy h3,
.technology-heading h3,
.faq-drawer-head h2,
.work-dialog .work-dialog-copy h2,
.voice-dialog-copy h2,
.trial-card > h3,
.trial-result h3 {
  font-size: var(--heading-sm);
  text-wrap: balance;
}

.double-chevron {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  line-height: var(--line-tight);
}

.double-chevron::before {
  content: "»";
  display: block;
  font-size: var(--font-size-display);
  font-weight: 900;
  line-height: var(--line-tight);
  transform: rotate(90deg);
}

.blue-word {
  color: var(--blue);
}

.skip-link {
  position: fixed;
  top: -6rem;
  left: 1rem;
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--navy);
  font-weight: 900;
}

.skip-link:focus {
  top: 1rem;
}

.brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.brand img {
  object-fit: contain;
}

.brand > span {
  border-left: 1px solid rgb(255 255 255 / 24%);
  color: var(--line);
  line-height: var(--line-copy);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body);
  font-weight: 900;
  line-height: var(--line-copy);
  cursor: pointer;
  transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.button:hover {
  transform: translateY(-0.1rem);
}

.button-blue {
  background: var(--blue);
  color: var(--white);
}

.button-blue:hover {
  background: var(--blue-hover);
}

.text-link {
  display: inline-flex;
  align-items: center;
  font-weight: 900;
}

@media (max-width: 1024px) {
  :root {
    --page-gutter: 1.5rem;
    --section-space: var(--space-8);
    --section-space-small: var(--space-8);
    --heading-gap: var(--space-6);
  }
}

@media (max-width: 640px) {
  :root {
    --page-gutter: 1rem;
    --section-space: var(--space-7);
    --section-space-small: var(--space-7);
    --radius-feature: var(--radius-md) var(--space-7) var(--radius-md) var(--radius-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: БАЗОВЫЕ СТИЛИ И ОБЩИЕ ЭЛЕМЕНТЫ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ФИРМЕННЫЕ ПОДЧЁРКИВАНИЯ ЗАГОЛОВКОВ
   ========================================================================== */

.title-highlight {
  --title-highlight-text: var(--blue);
  --title-highlight-stroke: var(--yellow);
  display: inline-block;
  position: relative;
  color: var(--title-highlight-text);
  z-index: 0;
}

.title-highlight::after {
  content: "";
  position: absolute;
  left: 0;
  right: -0.03em;
  bottom: 0.04em;
  height: 0.17em;
  background: var(--title-highlight-stroke);
  border-radius: 60% 30% 35% 20%;
  z-index: -1;
  transform: rotate(-1.6deg);
}

.title-highlight--yellow {
  --title-highlight-text: var(--yellow);
  --title-highlight-stroke: var(--blue);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ФИРМЕННЫЕ ПОДЧЁРКИВАНИЯ ЗАГОЛОВКОВ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ШАПКА, МЕНЮ И КОНТАКТЫ
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--white);
  backdrop-filter: blur(0.8rem);
  background: var(--navy);
  border-bottom: 0;
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  transition: min-height var(--duration-base);
}

.header .brand {
  gap: var(--space-3);
}

.header .brand > span {
  display: block;
  font-size: var(--font-size-sm);
  padding-left: 0.7rem;
  align-self: flex-end;
  margin-bottom: 0.35rem;
}

.header .brand img {
  width: 11.8rem;
  height: auto;
}

.site-header .header-inner,
.site-header.compact .header-inner {
  min-height: 5rem;
  gap: var(--space-5);
}

.site-header .brand {
  margin-right: auto;
}

.site-header .brand > span {
  display: block;
}

.site-header .site-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-6);
  min-width: 0;
  margin-left: auto;
}

.site-navigation .mod-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header .site-navigation .mod-menu {
  position: static;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  inset: auto;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.site-navigation .mod-menu li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.site-navigation .mod-menu > li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-navigation .mod-menu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: var(--space-2);
  color: var(--white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-copy);
  text-decoration: none;
}

.site-navigation .mod-menu > li > a {
  white-space: nowrap;
}

.site-navigation .mod-menu > li > span {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: var(--space-2);
  color: var(--white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-copy);
  text-decoration: none;
  white-space: nowrap;
}

.site-navigation .mod-menu a::after {
  content: none;
}

.site-navigation .mod-menu a:hover,
.site-navigation .mod-menu .active > a {
  color: var(--yellow);
}

.site-navigation .mod-menu__sub {
  margin: 0;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: var(--radius-md);
  background: var(--navy);
  box-shadow: var(--shadow-lg);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0);
}

.site-navigation .mod-menu__sub a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: normal;
}

.site-navigation .mod-menu__sub a:hover,
.site-navigation .mod-menu__sub a:focus-visible {
  background: rgb(255 255 255 / 10%);
}

.site-navigation .mod-menu > li:hover > .mod-menu__sub,
.site-navigation .mod-menu > li:focus-within > .mod-menu__sub,
.site-navigation .is-submenu-open > .mod-menu__sub {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.site-navigation .mod-menu__sub[hidden] {
  display: none;
}

.site-header .header-contacts {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-2);
  padding-left: var(--space-5);
  border-left: 1px solid rgb(255 255 255 / 20%);
}

.site-header .header-contact-phone {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--white);
  font-size: var(--font-size-sm);
  font-weight: 900;
  white-space: nowrap;
}

.site-header .header-contact-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: var(--font-size-sm);
  font-weight: 900;
}

.site-header .header-contact-icon:hover,
.site-header .header-contact-phone:hover {
  color: var(--yellow);
}

.header-menu-toggle {
  display: none;
}

.header-submenu-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.header-submenu-toggle::before {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.header-submenu-toggle[aria-expanded="true"]::before {
  transform: rotate(225deg);
}

@media (max-width: 1200px) {
  .site-header .header-inner,
  .site-header.compact .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 4.5rem;
    gap: 0 var(--space-3);
    width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
  }

  .site-header .brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    max-width: 100%;
    margin: 0;
  }

  .site-header .header-actions {
    display: none;
  }

  .site-header .site-navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    justify-items: stretch;
    gap: var(--space-5);
    width: 100%;
    margin: 0;
    padding: var(--space-4) 0;
  }

  .site-header.is-menu-ready .site-navigation {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    max-height: calc(100dvh - var(--site-header-height, 4.5rem));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(255 255 255 / 20%);
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    background: var(--navy);
    box-shadow: var(--shadow-md);
  }

  .site-header.is-menu-ready.is-menu-open .site-navigation {
    display: grid;
  }

  .site-header.is-menu-ready .header-menu-toggle {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    width: 2.75rem;
    height: 2.75rem;
    padding: var(--space-3);
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--radius-sm);
    background: var(--navy-soft);
    color: var(--white);
    cursor: pointer;
  }

  .header-menu-toggle > span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform var(--duration-fast) ease;
  }

  .header-menu-toggle[aria-expanded="true"] > span:first-child {
    transform: translateY(5px) rotate(45deg);
  }

  .header-menu-toggle[aria-expanded="true"] > span:last-child {
    transform: translateY(-5px) rotate(-45deg);
  }

  .site-header .site-navigation .mod-menu {
    display: grid;
    align-items: start;
    gap: var(--space-2);
  }

  .site-navigation .mod-menu > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--space-2);
  }

  .site-navigation .mod-menu > li > a,
  .site-navigation .mod-menu > li > span {
    white-space: normal;
  }

  .site-navigation .mod-menu__sub {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    max-height: none;
    margin-top: var(--space-2);
    border: 0;
    background: var(--surface-dark);
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-header .header-contacts {
    flex-wrap: wrap;
    padding: var(--space-4) 0 0;
    border-top: 1px solid rgb(255 255 255 / 20%);
    border-left: 0;
  }

  .site-header .header-contact-phone {
    margin-right: auto;
    font-size: var(--font-size-body);
  }

  body.site-menu-open {
    overflow: hidden;
  }
}

@media (max-width: 1024px) {
  .header .brand img {
    width: 10.6rem;
  }
}

@media (max-width: 640px) {
  .header .brand > span {
    font-size: var(--font-size-xs);
  }

  .header .brand img {
    width: 9.5rem;
  }

  .site-navigation .mod-menu__sub {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-inner {
    transition: none;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ШАПКА, МЕНЮ И КОНТАКТЫ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ОБЩЕЕ ДВИЖЕНИЕ СТРЕЛОК И ПОДПИСЕЙ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ОБЩЕЕ ДВИЖЕНИЕ СТРЕЛОК И ПОДПИСЕЙ: АНИМАЦИИ
   ========================================================================== */

@keyframes inviteAlong {
  0%,
  5%,
  34%,
  100% {
    transform: translateY(0);
  }

  12%,
  25% {
    transform: translateY(2px);
  }

  18% {
    transform: translateY(-0.5px);
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ОБЩЕЕ ДВИЖЕНИЕ СТРЕЛОК И ПОДПИСЕЙ: АНИМАЦИИ
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hero-scroll::before,
  .voices-next-chevrons::before,
  .campus-next-chevrons::before {
    animation: inviteNudge 4.2s ease-in-out infinite;
  }

  .hero-scroll-label,
  .voices-next-target strong,
  .campus-next-label {
    animation: inviteAlong 4.2s ease-in-out infinite;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ОБЩЕЕ ДВИЖЕНИЕ СТРЕЛОК И ПОДПИСЕЙ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ГЛАВНАЯ: HERO
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ГЛАВНАЯ: HERO: АНИМАЦИИ
   ========================================================================== */

@keyframes softikFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-12px) rotate(4deg);
  }
}

@keyframes softikWave {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  45% {
    transform: translateY(-8px) rotate(7deg);
  }
  65% {
    transform: translateY(-5px) rotate(1deg);
  }
}

@keyframes slowTurn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes gameJump {
  0%,
  25%,
  43%,
  100% {
    transform: translateY(0) rotate(0);
  }
  34% {
    transform: translateY(-36px) rotate(9deg);
  }
}

@keyframes manualJump {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-40px) rotate(8deg);
  }
}

@keyframes ballFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-12px) rotate(25deg);
  }
}

@keyframes scoreUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-25px);
  }
}

@keyframes sceneEnter {
  from {
    opacity: 0;
    translate: 0 15px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes inviteNudge {
  0%,
  5%,
  34%,
  100% {
    transform: translateY(0) rotate(90deg);
  }
  12%,
  25% {
    transform: translateY(5px) rotate(90deg);
  }
  18% {
    transform: translateY(-1px) rotate(90deg);
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ГЛАВНАЯ: HERO: АНИМАЦИИ
   ========================================================================== */

.hero-grid {
  display: grid;
}

.hero-copy {
  position: relative;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
}

.hero {
  position: relative;
  background: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 90% 35%, var(--blue-pale) 0, transparent 55%);
  pointer-events: none;
}

.hero .hero-grid {
  grid-template-columns: minmax(0, 0.91fr) minmax(0, 1.09fr);
  gap: var(--space-6);
  padding-block: 3.6rem 2.4rem;
  align-items: center;
}

.hero .hero-copy {
  z-index: 5;
  padding-block: var(--space-2);
}

.hero-kicker {
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
  color: var(--muted);
  margin-bottom: 1.4rem;
  max-width: 28rem;
}

.hero h1 {
  font-size: clamp(3.8rem, 5.35vw, 5.3rem);
  color: var(--navy);
}

.hero .hero-description {
  font-size: var(--font-size-lead);
  line-height: var(--line-body);
  max-width: 30.5rem;
  margin-top: 1.6rem;
  color: var(--muted);
}

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

.university-badge {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 31rem;
  margin-top: 1.6rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 0.8rem var(--space-4);
  background: rgb(255 255 255 / 80%);
  transition: border-color var(--duration-fast), transform var(--duration-fast);
}

.university-badge:hover {
  border-color: var(--blue);
  transform: translateX(3px);
}

.university-badge img {
  width: 6.9rem;
  flex-shrink: 0;
  background: var(--navy-soft);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  height: 3.3rem;
  object-fit: contain;
}

.university-badge > span:nth-child(2) {
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  color: var(--muted);
}

.university-badge strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--navy-soft);
  font-weight: 700;
}

.badge-arrow {
  font-size: var(--font-size-title);
  color: var(--blue);
  margin-left: auto;
}

.hero .hero-actions {
  gap: var(--space-4);
  margin-top: 1.6rem;
  align-items: flex-start;
  flex-direction: column;
}

.hero .hero-primary {
  font-size: var(--font-size-body);
  padding: 1.1rem 1.4rem;
  gap: var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-blue);
}

.hero-primary:hover {
  box-shadow: var(--shadow-blue);
}

.hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-copy);
  color: var(--text);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.hero-secondary:hover {
  color: var(--blue);
}

.play-icon {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
  font-size: var(--font-size-xs);
  padding-left: 0.1rem;
  color: var(--blue);
  transition: background var(--duration-fast);
}

.hero-secondary:hover .play-icon {
  background: var(--yellow);
  border-color: var(--yellow);
}

.creation-scene {
  position: relative;
  height: 38.5rem;
  min-width: 0;
  isolation: isolate;
}

.scene-ring {
  position: absolute;
  border: 1px solid rgb(215 227 241 / 45%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
}

.ring-outer {
  width: 112%;
  aspect-ratio: 1;
  left: -2%;
  top: -5%;
  transform: rotate(-15deg);
}

.ring-inner {
  width: 94%;
  aspect-ratio: 1;
  left: 7%;
  top: 3%;
  border-style: dashed;
  border-color: rgb(215 227 241 / 55%);
}

.photo-backdrop {
  position: absolute;
  inset: 6% 3% 8% 25%;
  background: var(--yellow);
  border-radius: 9rem 3rem;
  transform: rotate(8deg);
  z-index: -1;
}

.scene-photo {
  position: absolute;
  inset: 4% 8% 7% 18%;
  border-radius: 9rem 3rem;
  overflow: hidden;
  transform: rotate(-5deg);
  box-shadow: var(--shadow-md);
  background: var(--blue-pale);
}

.scene-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 40%;
  transform: rotate(5deg) scale(1.13);
}

.scene-photo::after {
  content: "";
  position: absolute;
  inset: 65% 0 0;
  background: linear-gradient(transparent, rgb(23 56 95 / 65%));
  pointer-events: none;
}

.photo-caption {
  position: absolute;
  bottom: 9%;
  left: 12%;
  z-index: 1;
  color: var(--white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  transform: rotate(5deg);
  letter-spacing: var(--tracking-label);
}

.scene-softik {
  position: absolute;
  z-index: 5;
  will-change: translate;
  pointer-events: none;
}

.scene-softik > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.7rem 0.7rem rgb(48 77 112 / 10%));
}

.softik-yellow {
  width: 9.8rem;
  height: 10.5rem;
  top: -3%;
  left: 6%;
  transform: rotate(-13deg);
}

.softik-yellow > img {
  animation: softikWave 5s ease-in-out infinite;
}

.softik-green {
  width: 7.5rem;
  height: 9rem;
  right: -2%;
  bottom: 19%;
  transform: rotate(15deg);
}

.softik-green > img {
  animation: softikFloat 5.5s ease-in-out infinite 0.8s;
}

.softik-blue {
  width: 5.6rem;
  height: 7.7rem;
  left: 21%;
  bottom: -2%;
  transform: rotate(-8deg);
}

.softik-blue > img {
  animation: softikFloat 5s ease-in-out infinite 0.2s;
}

.project-window {
  position: absolute;
  z-index: 7;
  border: 1px solid var(--blue-pale);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  will-change: translate;
}

.scene-game {
  width: 15.2rem;
  left: -5%;
  top: 31%;
  transform: rotate(-9deg);
}

.window-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.7rem 0.8rem;
  color: var(--text);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.window-dots {
  font-size: 0.5rem;
  letter-spacing: var(--tracking-label);
  color: var(--line);
  white-space: nowrap;
}

.window-tag {
  font-size: var(--font-size-xs);
  font-weight: 700;
  background: var(--blue-pale);
  color: var(--blue);
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
}

.mini-game {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 9.6rem;
  display: block;
  overflow: hidden;
  background: var(--yellow);
  cursor: pointer;
}

.game-background {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  inset: 0;
}

.game-actor {
  position: absolute;
  bottom: 14%;
  left: 21%;
  width: 2.8rem;
  height: 3.8rem;
  object-fit: contain;
  animation: gameJump 5s ease-in-out infinite;
}

.game-ball {
  position: absolute;
  top: 24%;
  left: 49%;
  width: 1.7rem;
  height: 1.7rem;
  animation: ballFloat 3s ease-in-out infinite;
}

.game-hint {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgb(255 255 255 / 90%);
  border-radius: var(--radius-xl);
  padding: 0.3rem 0.7rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--navy);
}

.game-score {
  position: absolute;
  left: 30%;
  top: 12%;
  font-weight: 900;
  font-size: var(--font-size-title);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
}

.mini-game.is-jumping .game-actor {
  animation: manualJump 0.65s ease-out;
}

.mini-game.is-jumping .game-score {
  animation: scoreUp 0.7s ease-out;
}

.scene-web {
  bottom: 0;
  right: 0;
  width: 19.1rem;
  display: flex;
  align-items: center;
  padding: 0.8rem var(--space-4) 0.8rem 0.7rem;
  gap: 0.7rem;
  text-align: left;
  font: inherit;
  color: var(--navy);
  cursor: pointer;
  transform: rotate(5deg);
  transition: box-shadow var(--duration-fast);
}

.scene-web:hover {
  box-shadow: var(--shadow-blue);
}

.web-preview {
  flex: 0 0 4.6rem;
  width: 4.6rem;
  height: 5rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--blue-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}

.web-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.web-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.web-copy small {
  font-size: var(--font-size-xs);
  color: var(--blue);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.web-copy strong {
  font-size: var(--font-size-body);
  font-weight: 900;
  white-space: nowrap;
}

.web-copy > span {
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  color: var(--muted);
}

.web-copy b {
  font-size: var(--font-size-card);
  color: var(--blue);
  margin-left: 0.2rem;
}

.success-sticker {
  position: absolute;
  top: 7%;
  right: -2%;
  z-index: 8;
  border-radius: var(--radius-xl);
  background: var(--white);
  padding: 0.8rem 1.1rem;
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-body);
  font-weight: 900;
  transform: rotate(8deg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.success-sticker > span {
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--success);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: var(--font-size-sm);
}

.scene-code {
  position: absolute;
  font-weight: 900;
  color: var(--blue);
  z-index: 1;
  pointer-events: none;
}

.code-one {
  left: -1%;
  top: 15%;
  font-size: var(--symbol-size);
  transform: rotate(-15deg);
}

.code-two {
  right: -1%;
  top: 42%;
  font-size: var(--font-size-display);
  transform: rotate(12deg);
}

.scene-spark {
  position: absolute;
  pointer-events: none;
}

.spark-one {
  top: -5%;
  right: 19%;
  font-size: var(--symbol-size);
  color: var(--blue);
  animation: slowTurn 18s linear infinite;
}

.spark-two {
  left: 5%;
  bottom: 12%;
  color: var(--yellow);
  font-size: var(--font-size-display);
  transform: rotate(8deg);
}

.hero-scroll:hover::before {
  transform: translateY(3px) rotate(90deg);
}

.hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  font-size: var(--font-size-sm);
  padding-block: 1.3rem 1.4rem;
  gap: var(--space-5);
}

.hero-scroll {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-lead);
  font-weight: 900;
  color: var(--navy-soft);
  white-space: nowrap;
}

.hero-scroll::before {
  content: "»";
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform var(--duration-fast);
  transform: rotate(90deg);
  width: 2.8rem;
  height: 2.8rem;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: var(--font-size-title);
  font-weight: 900;
}

.hero-scroll:hover {
  color: var(--blue);
}

.hero-principles {
  display: flex;
  align-items: center;
  color: var(--muted);
  gap: var(--space-3);
  font-size: var(--font-size-body);
}

.hero-address {
  color: var(--muted);
  font-size: var(--font-size-body);
  white-space: nowrap;
}

.hero-scroll-label {
  display: inline-block;
}

.hero-principle {
  padding: var(--space-2) 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--blue-pale);
  color: var(--text);
  font-weight: 900;
  line-height: var(--line-copy);
  white-space: nowrap;
}

.hero-principle:nth-child(2) {
  background: var(--yellow-soft);
  color: var(--navy);
}

.motion-paused .hero-scroll::before,
.motion-paused .hero-scroll-label {
  animation-play-state: paused !important;
}

.hero .motion-toggle {
  display: none;
}

@media (min-width: 1200px) {
  .hero .hero-grid {
    gap: var(--space-7);
    padding-block: 4.1rem var(--space-7);
  }

  .creation-scene {
    height: 41rem;
  }

  .hero h1 {
    font-size: 4.9rem;
  }

  .hero .hero-actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }

  .hero .hero-secondary {
    max-width: 11rem;
    font-size: var(--font-size-sm);
  }

  .hero .hero-primary {
    gap: var(--space-4);
  }
}

@media (min-width: 1025px) and (min-height: 600px) {
  .hero {
    height: calc(100svh - var(--hero-header-height, 5.5rem));
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    container-type: size;
  }

  .hero .hero-grid {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    padding-block: clamp(var(--space-4), 2.8cqh, var(--space-6));
  }

  .hero .hero-copy {
    padding-block: 0;
    align-self: center;
  }

  .hero h1 {
    font-size: clamp(2.5rem, min(5.35vw, 10cqh), 5.8rem);
  }

  .hero .hero-kicker {
    margin-bottom: clamp(0.5rem, 1.9cqh, 1.4rem);
  }

  .hero .hero-description {
    margin-top: clamp(0.6rem, 2.1cqh, 1.6rem);
    font-size: clamp(1rem, 1.85cqh, 1.1rem);
  }

  .hero .university-badge {
    margin-top: clamp(0.7rem, 2.1cqh, 1.6rem);
  }

  .hero .hero-actions {
    margin-top: clamp(0.8rem, 2cqh, 1.6rem);
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--grid-gap-small);
  }

  .hero .hero-primary {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    padding: 0.9rem 1.2rem;
    gap: var(--space-4);
  }

  .hero .hero-secondary {
    font-size: var(--font-size-sm);
    max-width: 11rem;
    min-width: 0;
  }

  .hero .play-icon {
    flex-shrink: 0;
  }

  .hero .creation-scene {
    height: 100%;
    min-height: 0;
    max-height: 43rem;
    align-self: center;
  }

  .hero .hero-bottom {
    padding-block: clamp(0.8rem, 1.7cqh, 1.3rem);
  }
}

@media (min-width: 1025px) and (min-height: 600px) and (max-height: 740px) {
  .hero .hero-grid {
    padding-block: 0.8rem;
  }

  .hero h1 {
    font-size: clamp(2.5rem, min(5.1vw, 8.8cqh), 4.2rem);
  }

  .hero .hero-kicker {
    margin-bottom: 0.5rem;
  }

  .hero .hero-description {
    font-size: var(--font-size-body);
    line-height: var(--line-copy);
    margin-top: 0.6rem;
  }

  .hero .university-badge {
    margin-top: 0.7rem;
    padding: var(--space-2) 0.8rem;
  }

  .hero .university-badge img {
    height: 2.6rem;
  }

  .hero .hero-actions {
    margin-top: 0.8rem;
  }

  .hero .hero-primary {
    padding: 0.8rem var(--space-4);
  }

  .hero .hero-bottom {
    padding-block: 0.7rem 0.8rem;
  }
}

@media (max-width: 1200px) {
  .hero .hero-grid {
    gap: var(--space-5);
  }

  .creation-scene {
    height: 36.5rem;
  }

  .scene-game {
    width: 13.8rem;
    left: -4%;
  }

  .scene-web {
    width: 17.7rem;
    right: -1%;
  }

  .web-copy strong {
    font-size: var(--font-size-sm);
  }

  .web-preview {
    width: 4rem;
    flex-basis: 4rem;
  }

  .softik-yellow {
    width: 8.5rem;
    height: 9.5rem;
  }

  .success-sticker {
    font-size: var(--font-size-sm);
    right: -3%;
    padding: 0.7rem 0.8rem;
  }
}

@media (max-width: 1024px) {
  .scene-photo {
    inset: 10% 5% 12% 12%;
  }

  .photo-backdrop {
    inset: 12% 0 13% 20%;
  }

  .mini-game {
    height: 8.5rem;
  }

  .softik-blue {
    left: 5%;
    bottom: 2%;
  }

  .softik-green {
    width: 6rem;
    height: 7rem;
  }

  .code-one {
    top: 23%;
    left: 2%;
    font-size: var(--font-size-display);
  }

  .spark-one {
    top: 1%;
  }

  .spark-two {
    bottom: 19%;
    left: 4%;
  }

  .photo-caption {
    font-size: var(--font-size-xs);
    left: 17%;
    bottom: 8%;
  }

  .badge-arrow {
    display: none;
  }

  .scene-game {
    width: 11.5rem;
    top: 37%;
    left: -2%;
  }

  .scene-web {
    width: 15.7rem;
    right: -2%;
    bottom: 5%;
  }

  .window-toolbar {
    font-size: var(--font-size-xs);
    padding: 0.6rem;
  }


  .web-preview {
    width: 3.6rem;
    flex-basis: 3.6rem;
  }

  .success-sticker {
    right: -2%;
    top: 12%;
  }

  .softik-yellow {
    left: 0;
    top: 0;
    width: 6.5rem;
    height: 7.5rem;
  }

  .university-badge img {
    width: 6.5rem;
  }

  .hero .hero-primary {
    font-size: var(--font-size-sm);
    padding: var(--space-4) 1.2rem;
    gap: var(--space-4);
  }

  .hero .hero-secondary,
  .hero .hero-grid .hero-actions .text-link {
    font-size: var(--font-size-sm);
  }

  .hero .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 2.2rem var(--space-4);
    gap: 0;
  }

  .hero .hero-copy {
    padding: 0;
    display: contents;
  }

  .hero-kicker {
    letter-spacing: 0;
    max-width: none;
    margin-bottom: 1rem;
    order: 0;
  }

  .hero h1 {
    font-size: clamp(3rem, 5.55vw, 3.6rem);
    order: 1;
  }

  .university-badge {
    margin-top: 1.2rem;
    order: 2;
    width: 100%;
    max-width: none;
  }

  .creation-scene {
    width: min(34rem, 100%);
    height: auto;
    aspect-ratio: 1.05;
    margin: 0.9rem auto var(--space-4);
    order: 3;
    margin-top: 1.9rem;
    margin-bottom: 1rem;
  }

  .hero .hero-description {
    max-width: 34rem;
    order: 4;
    margin-top: 0.8rem;
  }

  .hero .hero-actions {
    margin-top: 1.3rem;
    flex-direction: row;
    align-items: center;
    order: 5;
    margin-bottom: 0.7rem;
  }

  .hero-bottom {
    font-size: var(--font-size-xs);
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    padding-block: 1.2rem;
  }

  .hero-principles {
    font-size: var(--font-size-sm);
  }

  .hero-address {
    display: none;
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 640px) {
  .hero .hero-grid {
    padding-top: 1.7rem;
  }

  .hero-kicker {
    font-size: 1.4rem;
    margin-bottom: var(--space-4);
  }

  .hero h1 {
    font-size: clamp(3.3rem, 9.1vw, 4.7rem);
    display: none;
  }

  .hero .hero-description {
    font-size: var(--font-size-body);
  }

  .hero .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero .hero-primary {
    width: 100%;
  }

  .university-badge {
    margin-top: 0.1rem;
    padding: 0.8rem;
    gap: var(--space-3);
  }

  .university-badge img {
    width: 5.7rem;
    height: 2.6rem;
  }

  .university-badge > span:nth-child(2) {
    font-size: var(--font-size-xs);
  }

  .hero .creation-scene {
    aspect-ratio: 0.97;
    min-height: 26rem;
    margin-top: 1.9rem;
    margin-bottom: var(--space-4);
  }

  .scene-photo {
    inset: 7% 6% 10% 18%;
    border-radius: 4.5rem var(--radius-xl);
  }

  .photo-backdrop {
    inset: 9% 1% 11% 23%;
    border-radius: 4.5rem var(--radius-xl);
  }

  .softik-yellow {
    width: 5.9rem;
    height: 6.6rem;
    left: 7%;
    top: -2%;
  }

  .softik-green {
    width: 4.5rem;
    height: 5.4rem;
    bottom: 25%;
    right: -1%;
  }

  .softik-blue {
    width: 3.4rem;
    height: 4.7rem;
    left: 13%;
    bottom: -2%;
  }

  .scene-game {
    transform: rotate(-8deg);
    width: 10.2rem;
    top: 30%;
    left: 0;
  }

  .mini-game {
    height: 6.7rem;
  }

  .window-toolbar {
    padding: var(--space-2);
    gap: 0.3rem;
  }

  .window-tag {
    padding: 0.1rem 0.3rem;
  }

  .window-dots {
    font-size: 0.3rem;
  }

  .game-actor {
    width: 2rem;
    height: 2.8rem;
  }

  .game-ball {
    width: 1.3rem;
    height: 1.3rem;
  }

  .game-hint {
    padding: 0.2rem var(--space-2);
  }

  .scene-web {
    width: min(14rem, 100%);
    right: 0;
    bottom: 0;
    padding: 0.6rem;
    gap: var(--space-2);
  }

  .web-preview {
    width: 3rem;
    flex-basis: 3rem;
    height: 3.8rem;
  }


  .success-sticker {
    right: 0;
    top: 9%;
    font-size: var(--font-size-xs);
    padding: 0.6rem 0.7rem;
  }

  .success-sticker > span {
    width: 1.2rem;
    height: 1.2rem;
    font-size: var(--font-size-xs);
  }

  .code-one {
    top: 18%;
    left: 1%;
  }

  .code-two {
    font-size: var(--font-size-title);
    right: -2%;
    top: 40%;
  }

  .spark-one {
    font-size: var(--font-size-display);
    right: 18%;
    top: -3%;
  }

  .spark-two {
    font-size: var(--font-size-title);
    bottom: 20%;
    left: 3%;
  }

  .photo-caption {
    bottom: 15%;
  }

  .hero-scroll::before {
    width: 2.6rem;
    height: 2.6rem;
  }

  .hero-principle {
    padding: var(--space-2) 0.6rem;
  }

  .hero-bottom {
    padding-top: 1.1rem;
    padding-bottom: 1.5rem;
    flex-direction: column;
    flex-wrap: nowrap;
    padding-block: var(--space-4) var(--space-5);
  }

  .hero-principles {
    gap: var(--space-2);
    order: 1;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-scroll {
    font-size: var(--font-size-card);
    order: 2;
  }

  .hero-address {
    order: 3;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy {
    animation: sceneEnter 0.7s ease-out both;
  }

  .creation-scene {
    animation: sceneEnter 0.9s 0.12s ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creation-scene *,
  .hero-copy,
  .creation-scene {
    animation: none !important;
    translate: none !important;
  }

  .hero * {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ГЛАВНАЯ: HERO
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ОБЩИЕ ДИАЛОГИ И ПРИМЕРЫ ПРОЕКТОВ
   ========================================================================== */

.site-dialog {
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-height: calc(100dvh - 3rem);
  width: min(34rem, calc(100% - 2rem));
  color: var(--navy);
  background: var(--white);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.site-dialog::backdrop {
  background: rgb(16 41 77 / 70%);
  backdrop-filter: blur(6px);
}

.dialog-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue-pale);
  color: var(--text);
  font-size: var(--font-size-display);
  line-height: var(--line-tight);
  cursor: pointer;
}

.dialog-close:hover {
  background: var(--yellow);
}

.dialog-kicker {
  font-size: var(--font-size-sm);
  color: var(--muted);
  font-weight: 700;
  padding-right: var(--space-5);
  margin-bottom: var(--space-4);
}

.dialog-intro {
  font-size: var(--font-size-body);
  color: var(--muted);
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}

.site-dialog form {
  display: grid;
  gap: var(--space-4);
}

.site-dialog label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.site-dialog input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-weight: 400;
  font-size: var(--font-size-body);
  color: var(--navy-soft);
}

.site-dialog input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.site-dialog .optional {
  font-size: var(--font-size-xs);
  color: var(--muted);
  font-weight: 400;
}

.prototype-note {
  font-size: var(--font-size-sm);
  color: var(--muted);
  line-height: var(--line-copy);
}

.site-dialog form > .button {
  width: 100%;
  margin-top: var(--space-1);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.dialog-contacts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--blue);
}

.enrollment-result {
  padding-block: var(--space-4);
}

.enrollment-result[hidden] {
  display: none;
}

.enrollment-result > p {
  margin-block: var(--space-3);
}

.result-check {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--green-soft);
  color: var(--success);
  border-radius: 50%;
  font-size: var(--font-size-title);
  margin-bottom: var(--space-4);
}

.enrollment-result .hero-secondary {
  margin-top: var(--space-2);
  color: var(--blue);
}

.projects-dialog {
  width: min(62rem, calc(100% - 2rem));
  padding: var(--space-7);
}

.projects-dialog .dialog-intro {
  max-width: 39rem;
}

.project-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block: var(--space-6);
}

.project-example-image {
  height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--blue-pale);
  margin-bottom: var(--space-4);
}

.project-example-image img {
  height: 90%;
  width: 75%;
  object-fit: contain;
}

.example-game {
  background: var(--yellow);
}

.example-game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.example-web,
.example-app {
  background: var(--blue-pale);
}

.project-examples article > span {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}

.project-examples h3 {
  font-size: var(--font-size-title);
  margin-top: var(--space-2);
}

.project-examples p {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin-top: var(--space-2);
}

.motion-paused .creation-scene * {
  animation-play-state: paused !important;
}

.site-dialog form[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .site-dialog {
    padding: var(--space-6) var(--space-5) var(--space-5);
    max-height: calc(100dvh - 2rem);
    border-radius: var(--radius-md);
  }

  .dialog-kicker {
    font-size: var(--font-size-xs);
    padding-right: var(--space-6);
  }

  .dialog-contacts {
    font-size: var(--font-size-xs);
  }

  .projects-dialog {
    padding: var(--space-6) var(--space-5);
  }

  .project-examples {
    grid-template-columns: 1fr;
    margin-block: var(--space-5);
  }

  .project-examples h3 {
    font-size: var(--font-size-card);
  }

  .project-examples p {
    font-size: var(--font-size-body);
  }

  .projects-dialog > .button {
    font-size: var(--font-size-sm);
    gap: var(--space-4);
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ОБЩИЕ ДИАЛОГИ И ПРИМЕРЫ ПРОЕКТОВ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: МОБИЛЬНАЯ ПАНЕЛЬ ЗАПИСИ
   ========================================================================== */

.mobile-enrollment {
  display: none;
}

@media (max-width: 640px) {
  .mobile-enrollment {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 35;
    background: rgb(255 255 255 / 95%);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-up);
  }

  .mobile-call {
    font-size: var(--font-size-sm);
    color: var(--text);
    font-weight: 700;
    flex-shrink: 0;
  }

  .mobile-enrollment .button {
    flex: 1;
    font-size: var(--font-size-xs);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
    white-space: nowrap;
    border-radius: var(--radius-sm);
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: МОБИЛЬНАЯ ПАНЕЛЬ ЗАПИСИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: КАК ПРОХОДЯТ ЗАНЯТИЯ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: КАК ПРОХОДЯТ ЗАНЯТИЯ: АНИМАЦИИ
   ========================================================================== */

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

@keyframes learningMascot {
  0%,
  60%,
  100% {
    translate: 0 0;
  }
  70%,
  85% {
    translate: 0 -3px;
  }
  78%,
  94% {
    translate: 0 0;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: КАК ПРОХОДЯТ ЗАНЯТИЯ: АНИМАЦИИ
   ========================================================================== */

.approach {
  position: relative;
  background: var(--paper);
  overflow: hidden;
}

.learning-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-7);
}

.learning-kicker {
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
  line-height: var(--line-copy);
  margin-bottom: var(--space-4);
}

.learning-heading h2 > span {
  color: var(--blue);
}

.learning-lead {
  max-width: 25rem;
  flex-basis: 34%;
  color: var(--muted);
  font-size: var(--font-size-lead);
  line-height: var(--line-body);
  padding-bottom: var(--space-1);
}

.learning-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.learning-visual {
  position: relative;
  min-width: 0;
  padding-bottom: 0;
}

.learning-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1.46;
  overflow: hidden;
  border-radius: var(--radius-feature);
  background: var(--line);
  box-shadow: var(--shadow-md);
}

.learning-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.learning-photo::after {
  content: "";
  position: absolute;
  inset: 56% 0 0;
  background: linear-gradient(transparent, rgb(16 41 77 / 85%));
  pointer-events: none;
}

.learning-photo figcaption {
  position: absolute;
  left: 2rem;
  bottom: 1.7rem;
  z-index: 1;
  color: var(--white);
  font-size: var(--font-size-lead);
  line-height: var(--line-copy);
  letter-spacing: 0;
}

.learning-caption-lead {
  display: block;
  font-weight: 700;
}

.learning-photo figcaption > strong {
  font-size: var(--font-size-display);
  line-height: var(--line-heading);
  font-weight: 900;
  color: var(--yellow);
}

.learning-thought {
  position: absolute;
  left: -1rem;
  top: 1.5rem;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--white);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  transform: rotate(-5deg);
  font-size: var(--font-size-sm);
  font-weight: 900;
  color: var(--text);
}

.learning-thought-code {
  font-size: var(--font-size-card);
  color: var(--blue);
  font-weight: 900;
}

.learning-softik {
  position: absolute;
  width: 9.4rem;
  height: 9rem;
  object-fit: contain;
  right: -1.3rem;
  bottom: 4rem;
  z-index: 2;
  transform: rotate(6deg);
  filter: drop-shadow(0 0.5rem 0.7rem rgb(23 56 95 / 15%));
  pointer-events: none;
}

.learning-campus {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-1) 0;
  color: var(--muted);
}

.learning-campus-symbol {
  font-size: var(--font-size-sm);
  color: var(--text);
  font-weight: 900;
  white-space: nowrap;
}

.learning-campus-symbol > b {
  color: var(--yellow);
  font-size: var(--font-size-card);
  margin-inline: var(--space-1);
  font-weight: 700;
}

.learning-campus-copy {
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  border-left: 1px solid var(--line);
  padding-left: var(--space-4);
}

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

.learning-campus-arrow {
  font-size: var(--font-size-title);
  color: var(--blue);
  margin-left: auto;
}

.learning-campus:hover .learning-campus-arrow {
  transform: translate(2px, -2px);
}

.learning-points {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding-top: var(--space-1);
}

.learning-point {
  display: flex;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}

.learning-point:first-child {
  padding-top: var(--space-2);
}

.learning-number {
  display: grid;
  place-items: center;
  flex: 0 0 2.9rem;
  width: 2.9rem;
  height: 2.9rem;
  background: var(--blue-pale);
  color: var(--blue);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 900;
  transform: rotate(-5deg);
  margin-top: var(--space-1);
}

.learning-point:nth-child(2) .learning-number {
  background: var(--yellow);
  color: var(--navy);
  transform: rotate(5deg);
}

.learning-point:nth-child(3) .learning-number {
  background: var(--blue-pale);
  transform: rotate(-4deg);
}

.learning-point h3 {
  font-size: var(--font-size-title);
  line-height: var(--line-copy);
  margin: 0 0 var(--space-3);
}

.learning-point p {
  font-size: var(--font-size-body);
  line-height: var(--line-body);
  color: var(--muted);
  max-width: 480px;
}

.learning-next {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  align-self: flex-start;
  margin-top: var(--space-5);
  font-size: var(--font-size-body);
  font-weight: 900;
  color: var(--blue);
  line-height: var(--line-copy);
}

.learning-next-arrow {
  flex-shrink: 0;
  transition: transform var(--duration-fast);
}

.learning-next:hover .learning-next-arrow {
  transform: translateX(5px);
}

.motion-paused .approach * {
  animation-play-state: paused !important;
}

@media (max-width: 1200px) {
  .learning-layout {
    gap: var(--space-7);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .learning-heading {
    gap: var(--space-6);
  }

  .learning-lead {
    max-width: 23rem;
    font-size: var(--font-size-body);
  }

  .learning-photo {
    aspect-ratio: 1.2;
    border-top-right-radius: 4rem;
  }

  .learning-point {
    padding-block: var(--space-4);
    gap: var(--space-4);
  }

  .learning-point h3 {
    font-size: var(--font-size-card);
  }

  .learning-campus {
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .learning-campus-copy {
    padding-left: var(--space-3);
  }

  .learning-softik {
    right: -1rem;
    width: 8rem;
    height: 8rem;
    bottom: 4.2rem;
  }
}

@media (max-width: 1024px) {
  .learning-heading {
    display: block;
  }

  .learning-lead {
    max-width: 37rem;
    margin-top: var(--space-5);
  }

  .learning-photo {
    aspect-ratio: 0.95;
    border-top-right-radius: 3rem;
  }

  .learning-number {
    width: 2.5rem;
    height: 2.5rem;
    flex-basis: 2.5rem;
  }

  .learning-thought {
    font-size: var(--font-size-xs);
    padding: var(--space-3);
    gap: var(--space-3);
    left: -0.7rem;
  }

  .learning-photo figcaption {
    left: 1.3rem;
    bottom: 1.5rem;
    font-size: var(--font-size-body);
  }

  .learning-photo figcaption > strong {
    font-size: var(--font-size-title);
  }

  .learning-campus-copy {
    border: 0;
    padding: 0;
    font-size: var(--font-size-sm);
  }

  .learning-softik {
    width: 7rem;
    height: 7rem;
  }

  .learning-layout {
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .learning-campus {
    padding-top: var(--space-4);
  }

  .learning-campus-symbol {
    display: block;
  }

  .learning-points {
    padding-top: 0;
  }

  .learning-point {
    padding-block: var(--space-5);
  }


  .learning-point p {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .learning-kicker {
    font-size: var(--font-size-xs);
  }

  .learning-lead {
    margin-top: var(--space-4);
  }

  .learning-photo {
    aspect-ratio: 1.05;
    border-top-right-radius: 2.7rem;
  }

  .learning-thought {
    left: -0.5rem;
    top: 1rem;
  }

  .learning-thought-code {
    font-size: var(--font-size-lead);
  }

  .learning-photo figcaption {
    left: 1.1rem;
    bottom: 1.4rem;
    font-size: var(--font-size-sm);
  }


  .learning-softik {
    width: 6.1rem;
    height: 6.2rem;
    right: -0.6rem;
    bottom: 3.9rem;
  }

  .learning-campus-symbol {
    display: none;
  }

  .learning-campus-copy {
    border-left: 0;
    padding-left: 0;
  }


  .learning-point {
    padding-block: var(--space-4);
  }

  .learning-number {
    width: 2.4rem;
    height: 2.4rem;
    flex-basis: 2.4rem;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
  }

  .learning-point h3 {
    margin-bottom: var(--space-2);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .learning-visual.is-visible {
    animation: learningArrive 0.65s ease-out both;
  }

  .learning-point.is-visible {
    animation: learningArrive 0.5s ease-out both;
  }

  .learning-point:nth-child(2).is-visible {
    animation-delay: 0.07s;
  }

  .learning-point:nth-child(3).is-visible {
    animation-delay: 0.14s;
  }

  .learning-softik {
    animation: learningMascot 6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .approach * {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: КАК ПРОХОДЯТ ЗАНЯТИЯ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: АНИМАЦИИ
   ========================================================================== */

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

@keyframes directionWindowFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-7px) rotate(-2deg);
  }
}

@keyframes directionResultNudge {
  0%,
  68%,
  100% {
    transform: rotate(4deg) translateY(0);
  }
  76%,
  88% {
    transform: rotate(2deg) translateY(-5px);
  }
  82%,
  94% {
    transform: rotate(4deg) translateY(0);
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: АНИМАЦИИ
   ========================================================================== */

.directions {
  --directions-ink: var(--navy);
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: radial-gradient(circle at 86% 9%, var(--blue) 0 5%, transparent 23%), radial-gradient(circle at 7% 32%, var(--navy-soft) 0, transparent 28%), var(--navy);
}

.directions::before {
  content: "";
  position: absolute;
  width: 30rem;
  height: 30rem;
  top: 9rem;
  right: -16rem;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgb(255 255 255 / 5%), 0 0 0 10rem rgb(255 255 255 / 5%);
  pointer-events: none;
}

.directions > .container {
  position: relative;
}

.directions-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-7);
}

.directions-kicker {
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
  font-weight: 700;
  color: var(--line);
  margin-bottom: var(--space-4);
}

.directions-heading h2 {
  color: var(--white);
}

.directions-heading h2 span {
  color: var(--yellow);
}

.directions-heading > p {
  max-width: 28rem;
  flex-basis: 36%;
  font-size: var(--font-size-lead);
  line-height: var(--line-body);
  color: var(--line);
  padding-bottom: var(--space-1);
}

.direction-world {
  position: relative;
}

.direction-choice {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  position: relative;
  z-index: 3;
}

.direction-choice-card {
  position: relative;
  min-width: 0;
  min-height: 10.4rem;
  padding: var(--space-5) var(--space-4);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm);
  background: var(--surface-dark);
  color: var(--white);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform var(--duration-base) ease, background var(--duration-base) ease, border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}

.direction-choice-card:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 25%);
  transform: translateY(-3px);
}

.direction-choice-card:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 4px;
}

.direction-choice-card.is-active {
  background: var(--yellow);
  color: var(--directions-ink);
  border-color: var(--yellow);
  transform: translateY(-0.5rem);
  box-shadow: var(--shadow-md);
}

.direction-choice-number {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
  opacity: 0.6;
  margin-bottom: var(--space-5);
}

.direction-choice-card strong {
  display: block;
  font-size: var(--font-size-title);
  font-weight: 900;
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-tight);
  position: relative;
  z-index: 1;
}

.direction-choice-card small {
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  opacity: 0.8;
  margin-top: var(--space-2);
  position: relative;
  z-index: 1;
}

.direction-choice-mark {
  position: absolute;
  right: 0.8rem;
  top: 0.7rem;
  font-size: var(--font-size-display);
  line-height: var(--line-tight);
  font-weight: 900;
  opacity: 0.2;
  transform: rotate(6deg);
}

.direction-choice-card.is-active .direction-choice-mark {
  opacity: 0.4;
}

.direction-story {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: 31rem;
  background: var(--white);
  color: var(--directions-ink);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.direction-story-copy {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
}

.direction-story-label {
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
  margin-bottom: var(--space-5);
}

.direction-story-copy h3 {
  color: var(--blue);
}

.direction-story-copy > p:nth-of-type(2) {
  font-size: var(--font-size-lead);
  line-height: var(--line-body);
  color: var(--muted);
  max-width: 31rem;
  margin-top: var(--space-5);
}

.direction-story-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.direction-story-flow span {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--blue-pale);
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: 900;
}

.direction-story-flow span:last-child {
  background: var(--yellow-soft);
  color: var(--navy);
}

.direction-story-flow b {
  font-size: var(--font-size-card);
  font-weight: 700;
  color: var(--muted);
}

.direction-story-skill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--muted);
}

.direction-story-skill > span:first-child {
  color: var(--yellow);
  font-size: var(--font-size-card);
}

.direction-live {
  --direction-accent: var(--yellow);
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  background: radial-gradient(circle at 25% 25%, rgb(255 255 255 / 20%) 0 0.3rem, transparent 0.3rem) 0 0/2.2rem 2.2rem, linear-gradient(145deg, var(--blue), var(--blue));
  isolation: isolate;
}

.direction-live[data-direction-preview="mobile"] {
  --direction-accent: var(--cyan);
  background: linear-gradient(145deg, var(--purple), var(--blue));
}

.direction-live[data-direction-preview="web"] {
  --direction-accent: var(--yellow);
  background: linear-gradient(145deg, var(--blue), var(--blue-hover));
}

.direction-live[data-direction-preview="programs"] {
  --direction-accent: var(--yellow);
  background: linear-gradient(145deg, var(--navy-soft), var(--navy));
}

.direction-live[data-direction-preview="design"] {
  --direction-accent: var(--pink);
  background: linear-gradient(145deg, var(--pink), var(--purple));
}

.direction-live-orbit {
  position: absolute;
  width: 27rem;
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  box-shadow: 0 0 0 4.5rem rgb(255 255 255 / 5%), 0 0 0 9rem rgb(255 255 255 / 5%);
  z-index: -1;
}

.direction-window {
  width: min(31rem, 78%);
  background: var(--white);
  border: 0.3rem solid var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: rotate(-3deg);
  overflow: hidden;
}

.direction-window-bar {
  min-height: 3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--muted);
  background: var(--paper);
  font-size: var(--font-size-xs);
  font-style: normal;
}

.direction-window-bar > span {
  display: flex;
  gap: var(--space-1);
}

.direction-window-bar i {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--line);
  border-radius: 50%;
}

.direction-window-bar i:first-child {
  background: var(--yellow);
}

.direction-window-bar b {
  font-weight: 900;
  white-space: nowrap;
}

.direction-window-bar em {
  justify-self: end;
  font-style: normal;
  color: var(--success);
  font-weight: 700;
  white-space: nowrap;
}

.direction-window-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  overflow: hidden;
  background: linear-gradient(145deg, var(--paper), var(--blue-pale));
}

.direction-window-body::before {
  content: "";
  position: absolute;
  width: 11rem;
  height: 11rem;
  border-radius: var(--radius-xl);
  background: var(--direction-accent);
  transform: rotate(22deg);
  opacity: 1;
}

.direction-window-code {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgb(23 56 95 / 90%);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font: 700 0.8rem/1.35 "Nunito", sans-serif;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

.direction-window-symbol {
  position: relative;
  z-index: 1;
  font-size: var(--heading-md);
  font-weight: 900;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--navy-soft);
  transform: rotate(-5deg);
}

.direction-window-result {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  border-radius: var(--radius-xl);
  background: var(--white);
  color: var(--text);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 900;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  transform: rotate(4deg);
}

.direction-softik {
  position: absolute;
  width: 13rem;
  height: 10rem;
  right: -1.5rem;
  bottom: 0;
  z-index: 3;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0.6rem 1rem rgb(16 41 77 / 20%));
}

.direction-spark {
  position: absolute;
  color: var(--direction-accent);
  font-weight: 900;
  line-height: var(--line-tight);
  pointer-events: none;
}

.direction-spark-one {
  font-size: var(--heading-sm);
  left: 7%;
  top: 12%;
  transform: rotate(12deg);
}

.direction-spark-two {
  font-size: var(--heading-sm);
  left: 13%;
  bottom: 12%;
  transform: rotate(-10deg);
}

.technology-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-7);
  margin-top: var(--space-9);
  margin-bottom: var(--space-6);
}

.technology-overline {
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
  font-weight: 700;
  color: var(--line);
  margin-bottom: var(--space-4);
}

.technology-heading h3 {
  color: var(--white);
}

.technology-heading > p {
  max-width: 29rem;
  flex-basis: 37%;
  font-size: var(--font-size-body);
  line-height: var(--line-body);
  color: var(--line);
}

.technology-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.technology-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 16rem;
  padding: var(--space-5);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: var(--radius-md);
  background: var(--surface-dark);
  color: var(--white);
  overflow: hidden;
  transition: transform var(--duration-fast) ease, background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.technology-card::before {
  content: "";
  position: absolute;
  width: 7rem;
  height: 7rem;
  right: -4rem;
  top: -4rem;
  border: 1.2rem solid rgb(255 255 255 / 5%);
  border-radius: 50%;
  transition: transform var(--duration-base) ease;
}

.technology-card:hover,
.technology-card.is-related {
  background: var(--white);
  color: var(--directions-ink);
  border-color: var(--white);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.technology-card:hover::before,
.technology-card.is-related::before {
  border-color: rgb(9 91 232 / 5%);
  transform: scale(1.15);
}

.technology-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.3rem;
  position: relative;
}

.technology-icon {
  display: grid;
  place-items: center;
  flex: 0 0 3.3rem;
  width: 3.3rem;
  height: 3.3rem;
  border-radius: var(--radius-md);
  background: var(--surface-dark);
  border: 1px solid rgb(255 255 255 / 5%);
}

.technology-icon img {
  width: auto;
  height: auto;
  max-width: 2.7rem;
  max-height: 2.7rem;
  object-fit: contain;
}

.technology-kind {
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--line);
  position: relative;
}

.technology-card:hover .technology-kind,
.technology-card.is-related .technology-kind {
  color: var(--muted);
}

.technology-card:hover .technology-icon,
.technology-card.is-related .technology-icon {
  background: var(--blue-pale);
  border-color: var(--line);
}

.technology-card > strong {
  font-size: var(--font-size-title);
  line-height: var(--line-heading);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-4);
  position: relative;
}

.technology-card > p {
  font-size: var(--font-size-sm);
  line-height: var(--line-body);
  color: var(--line);
  margin-top: var(--space-3);
  position: relative;
}

.technology-card:hover > p,
.technology-card.is-related > p {
  color: var(--muted);
}

.technology-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 900;
  color: var(--yellow);
  position: relative;
}

.technology-card:hover .technology-link,
.technology-card.is-related .technology-link {
  color: var(--blue);
}

.technology-link b {
  font-size: var(--font-size-card);
  transition: transform var(--duration-fast);
}

.technology-card:hover .technology-link b {
  transform: translate(3px, -3px);
}

.technology-card-foundation {
  grid-column: span 2;
}

.technology-card-foundation.is-related {
  background: var(--yellow-soft);
  border-color: var(--yellow-soft);
}

.technology-card-foundation.is-related .technology-icon {
  background: var(--white);
  border-color: var(--yellow-soft);
}

.technology-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--line);
}

.technology-note span {
  display: block;
  flex: 0 0 auto;
  color: var(--yellow);
  font-family: Nunito, sans-serif;
  font-size: var(--heading-sm);
  line-height: var(--line-tight);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
}

.motion-paused .directions * {
  animation-play-state: paused !important;
}

@media (max-width: 1200px) {
  .direction-choice {
    grid-template-columns: repeat(5, minmax(9.5rem, 1fr));
    overflow-x: auto;
    padding: var(--space-2) 0 var(--space-3);
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .direction-choice-card {
    scroll-snap-align: start;
  }

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

  .direction-story-copy {
    padding: var(--space-7);
  }

  .direction-window {
    width: 82%;
  }

  .technology-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .technology-card-foundation {
    grid-column: auto;
  }
}

@media (max-width: 1024px) {
  .directions-heading,
  .technology-heading {
    display: block;
  }

  .directions-heading > p,
  .technology-heading > p {
    max-width: 39rem;
    margin-top: var(--space-5);
  }

  .direction-story {
    grid-template-columns: minmax(0, 1fr);
    border-bottom-right-radius: 3.4rem;
  }

  .direction-story-copy {
    min-height: 27rem;
  }

  .direction-live {
    min-height: 28rem;
  }

  .direction-window {
    width: min(31rem, 72%);
  }

  .direction-softik {
    right: 2%;
    width: 14rem;
  }

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

  .technology-card-foundation {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .directions-heading > p {
    font-size: var(--font-size-body);
  }

  .direction-choice {
    grid-template-columns: repeat(5, 10.5rem);
    margin-right: calc(-1 * var(--space-5));
  }

  .direction-choice-card {
    min-height: 9.8rem;
    padding: var(--space-4);
  }

  .direction-choice-card strong {
    font-size: var(--font-size-card);
  }

  .direction-story {
    border-radius: var(--radius-md) var(--radius-md) var(--radius-xl);
  }

  .direction-story-copy {
    padding: var(--space-6) var(--space-5);
  }

  .direction-story-copy > p:nth-of-type(2) {
    font-size: var(--font-size-body);
    margin-top: var(--space-4);
  }

  .direction-story-label {
    margin-bottom: var(--space-4);
  }

  .direction-story-flow {
    gap: var(--space-2);
    margin-top: var(--space-5);
  }

  .direction-story-flow span {
    font-size: var(--font-size-xs);
    padding: var(--space-2);
  }

  .direction-story-skill {
    padding-top: var(--space-5);
  }

  .direction-live {
    min-height: 22rem;
  }

  .direction-window {
    width: 80%;
    border-width: 0.3rem;
  }

  .direction-window-bar {
    grid-template-columns: auto 1fr;
    min-height: 2.7rem;
  }

  .direction-window-bar > b {
    text-align: center;
  }

  .direction-window-bar em {
    display: none;
  }

  .direction-window-body {
    min-height: 14rem;
  }

  .direction-window-code {
    font-size: var(--font-size-xs);
  }

  .direction-window-symbol {
    font-size: var(--heading-sm);
  }

  .direction-window-result {
    font-size: var(--font-size-xs);
  }

  .direction-softik {
    width: 9rem;
    height: 7rem;
    right: -1rem;
  }

  .direction-spark-one {
    font-size: var(--font-size-display);
  }

  .technology-heading {
    margin-top: var(--space-8);
  }

  .technology-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .technology-card {
    min-height: 14.5rem;
  }

  .technology-card-foundation {
    grid-column: auto;
  }

  .technology-card > strong {
    margin-top: var(--space-3);
  }

  .technology-card > p {
    font-size: var(--font-size-body);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .direction-world.is-visible {
    animation: directionWorldArrive 0.7s ease-out both;
  }

  .direction-window {
    animation: directionWindowFloat 6s ease-in-out infinite;
  }

  .direction-window-result {
    animation: directionResultNudge 4.6s ease-in-out infinite;
  }

  .direction-live.is-changing .direction-window {
    animation: directionWorldArrive 0.32s ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .directions * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: РАБОТЫ РЕБЯТ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: РАБОТЫ РЕБЯТ: АНИМАЦИИ
   ========================================================================== */

@keyframes work-dialog-in {
  from {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: РАБОТЫ РЕБЯТ: АНИМАЦИИ
   ========================================================================== */

.works {
  position: relative;
  overflow: hidden;
  color: var(--navy);
  background: radial-gradient(circle at 8% 18%, var(--line) 0 5.5rem, transparent 5.6rem), radial-gradient(circle at 94% 80%, var(--yellow-soft) 0 8rem, transparent 8.1rem), var(--white);
}

.works::before {
  content: "";
  position: absolute;
  left: -5rem;
  bottom: 12%;
  width: 16rem;
  height: 16rem;
  border: 1px dashed var(--line);
  border-radius: 50%;
  opacity: 0.75;
}

.works > .container {
  position: relative;
  z-index: 2;
}

.works-heading {
  display: grid;
  grid-template-columns: 1.08fr 0.72fr;
  align-items: end;
  gap: var(--space-8);
}

.works-kicker {
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
  font-weight: 900;
  color: var(--muted);
  margin-bottom: var(--space-4);
}

.works-heading h2 span {
  color: var(--blue);
}

.works-intro {
  max-width: 31rem;
  padding-bottom: var(--space-2);
}

.works-intro > p {
  font-size: var(--font-size-lead);
  line-height: var(--line-body);
  color: var(--muted);
}

.works-stage {
  position: relative;
  isolation: isolate;
  padding: var(--space-8) var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--navy);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.works-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: linear-gradient(to bottom, var(--black), transparent 82%);
  z-index: -1;
}

.works-stage::after {
  content: "";
  position: absolute;
  width: 27rem;
  height: 27rem;
  right: -11rem;
  top: -14rem;
  border: 1px solid rgb(120 224 255 / 35%);
  border-radius: 50%;
  box-shadow: 0 0 0 3.8rem rgb(9 91 232 / 10%), 0 0 0 7.5rem rgb(9 91 232 / 5%);
  z-index: -1;
}

.works-stage-label {
  position: absolute;
  left: 2.2rem;
  top: 1.7rem;
  color: var(--line);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-wide);
  font-weight: 900;
}

.works-stage-spark {
  position: absolute;
  color: var(--yellow);
  font-weight: 900;
  line-height: var(--line-tight);
  pointer-events: none;
}

.works-stage-spark-one {
  right: 8%;
  top: 9%;
  font-size: var(--font-size-display);
  transform: rotate(12deg);
}

.works-stage-spark-two {
  left: 3.4%;
  bottom: 20%;
  font-size: var(--font-size-display);
  transform: rotate(-10deg);
}

.works-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: var(--grid-gap);
  padding: var(--space-7) 0;
  margin-inline: auto;
  width: min(100%, 74rem);
  overflow: visible;
}

.work-card {
  --card-shift: 0rem;
  --card-turn: 0deg;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9/16;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transform: translateY(var(--card-shift)) rotate(var(--card-turn));
  transform-origin: 50% 50%;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), filter var(--duration-base);
  filter: saturate(0.93);
  will-change: transform;
  z-index: 1;
}

.work-card:nth-child(1) {
  --card-turn: -1.2deg;
}

.work-card:nth-child(2) {
  --card-shift: 1.5rem;
  --card-turn: 0.8deg;
}

.work-card:nth-child(3) {
  --card-turn: -0.5deg;
}

.work-card:nth-child(4) {
  --card-shift: 1.5rem;
  --card-turn: 1deg;
}

.work-card:nth-child(5) {
  --card-turn: -0.8deg;
}

.work-card:nth-child(6) {
  --card-shift: 1.5rem;
  --card-turn: 0.6deg;
}

.work-frame {
  position: absolute;
  inset: 0;
  display: block;
  border: 0.3rem solid var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-dark);
  transition: box-shadow var(--duration-slow), border-color var(--duration-slow);
}

.work-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--blue-pale);
  overflow: hidden;
}

.work-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-poster-contain img {
  width: 86%;
  height: 82%;
  object-fit: contain;
  transform: translateY(-7%);
}

.work-frame-sky .work-poster {
  background: var(--blue-pale);
}

.work-frame-pink .work-poster {
  background: var(--pink-soft);
}

.work-frame-lime .work-poster,
.work-frame-yellow .work-poster {
  background: var(--yellow-soft);
}

.work-frame-blue .work-poster {
  background: var(--line);
}

.work-shade {
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(transparent, rgb(16 41 77 / 70%) 34%, rgb(16 41 77 / 95%) 82%);
}

.work-kind {
  position: absolute;
  z-index: 2;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 4.3rem;
  width: fit-content;
  max-width: calc(100% - 1.8rem);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-xs);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-label);
  font-weight: 900;
}

.work-name {
  position: absolute;
  z-index: 2;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 1.2rem;
  font-size: var(--font-size-body);
  line-height: var(--line-heading);
  text-align: left;
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.work-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 43%;
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  font-size: var(--font-size-body);
  box-shadow: var(--shadow-sm);
  translate: -50% -50%;
  padding-left: var(--space-1);
  transition: transform var(--duration-base), background var(--duration-base);
}

.work-index {
  position: absolute;
  z-index: 2;
  right: 0.8rem;
  top: 0.8rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgb(16 41 77 / 70%);
  color: var(--white);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}

.work-card.is-active-card {
  z-index: 20;
  transform: translateY(calc(var(--card-shift) - 0.7rem)) rotate(0) scale(1.04);
  filter: saturate(1.08);
}

.work-card.is-active-card .work-frame {
  border-color: var(--yellow);
  box-shadow: 0 2.2rem 3.3rem rgb(0 0 0 / 50%);
}

.work-card.is-active-card .work-play {
  background: var(--yellow);
  transform: scale(1.1);
}

.work-card:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 7px;
  z-index: 21;
}

.works-stage-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-1) 0;
  border-top: 1px solid rgb(255 255 255 / 15%);
  color: var(--line);
}

.works-stage-bottom p {
  max-width: 47rem;
  font-size: var(--font-size-xs);
  line-height: var(--line-body);
}

.works-stage-bottom p span {
  color: var(--yellow);
  margin-right: var(--space-2);
}

.works-stage-bottom > span {
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-wide);
  font-weight: 900;
  color: var(--white);
  white-space: nowrap;
}

.works-softik {
  position: absolute;
  right: max(-1rem, calc((100vw - 95rem)/2));
  bottom: -1.3rem;
  width: 9.5rem;
  height: 10.5rem;
  object-fit: contain;
  transform: rotate(-7deg);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 1rem 1.2rem rgb(16 41 77 / 15%));
}

.work-dialog {
  grid-template-columns: minmax(17rem, 23rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: var(--grid-gap-small);
  width: min(62rem, calc(100% - 2rem));
  max-width: 62rem;
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--white);
  overflow: auto;
}

.work-dialog[open] {
  display: grid;
  animation: work-dialog-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-dialog .dialog-close {
  z-index: 4;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.work-dialog-kicker {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: var(--space-2) var(--space-7) var(--space-4) 0;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
  font-weight: 900;
}

.work-dialog-media {
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(100%, calc((100dvh - 5rem) * 9 / 16));
  aspect-ratio: 9/16;
  max-height: calc(100dvh - 5rem);
  border-radius: var(--radius-lg);
  background: var(--navy);
  overflow: hidden;
}

.work-dialog-media img,
.work-dialog-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.work-dialog-media [hidden] {
  display: none;
}

.work-dialog-copy {
  grid-column: 2;
  grid-row: 2;
  display: block;
  padding: var(--space-2) 0 0;
}

.work-dialog-copy > div > p {
  color: var(--blue);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.work-dialog-copy h2 {
  margin-bottom: var(--space-4);
}

.work-dialog-copy > p {
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
  padding-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .work-card:hover {
    z-index: 20;
    transform: translateY(calc(var(--card-shift) - 0.7rem)) rotate(0) scale(1.04);
    filter: saturate(1.08);
  }

  .work-card:hover .work-frame {
    border-color: var(--yellow);
    box-shadow: 0 2.2rem 3.3rem rgb(0 0 0 / 50%);
  }

  .work-card:hover .work-play {
    background: var(--yellow);
    transform: scale(1.1);
  }
}

@media (max-width: 1024px) {
  .works-stack::-webkit-scrollbar {
    display: none;
  }

  .work-name {
    font-size: var(--font-size-xs);
  }

  .works-softik {
    display: none;
  }

  .works-heading {
    grid-template-columns: 1fr 0.72fr;
    gap: var(--space-7);
    display: block;
  }

  .works-intro {
    margin-top: var(--space-5);
    max-width: 36rem;
  }

  .works-intro > p {
    font-size: var(--font-size-body);
  }

  .works-stage {
    margin-inline: calc(-1 * var(--space-5));
    padding: var(--space-8) 0 var(--space-4);
  }

  .works-stage-label {
    left: 1.4rem;
    top: 1.4rem;
  }

  .works-stage-spark-one {
    right: 7%;
    top: 8%;
  }

  .works-stage-spark-two {
    display: none;
  }

  .works-stack {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: var(--space-6) var(--space-5) var(--space-7);
    gap: var(--space-4);
  }

  .work-card {
    --card-shift: 0rem !important;
    --card-turn: 0deg !important;
    flex: 0 0 min(68vw, 18rem);
    scroll-snap-align: center;
    transform: none;
  }

  .work-card:last-child {
    margin-right: var(--space-5);
  }

  .work-card.is-active-card {
    transform: translateY(-0.4rem) scale(1.02);
  }

  .works-stage-bottom {
    display: block;
    margin-inline: var(--space-5);
    padding-top: var(--space-4);
  }

  .works-stage-bottom p {
    padding-right: var(--space-4);
  }

  .works-stage-bottom > span {
    display: none;
  }

  .work-dialog {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    max-height: calc(100dvh - 1rem);
  }

  .work-dialog[open] {
    display: block;
  }

  .work-dialog-kicker {
    display: block;
    padding: var(--space-2) var(--space-7) var(--space-3) var(--space-1);
  }

  .work-dialog-media {
    width: min(100%, 21rem);
    margin-inline: auto;
    border-radius: var(--radius-md);
    max-height: none;
  }

  .work-dialog-copy {
    padding: var(--space-5) var(--space-1) var(--space-1);
  }

  .work-dialog-copy > p {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 640px) {
  .works-stage {
    margin-inline: calc(-1 * var(--space-4));
  }

  .work-card {
    flex-basis: 72vw;
    margin-left: 0;
  }

  .work-frame {
    border-width: 0.3rem;
  }

  .work-kind {
    left: 0.8rem;
    bottom: 4.1rem;
  }

  .work-name {
    left: 0.8rem;
    bottom: 1.1rem;
    font-size: var(--font-size-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-card,
  .work-frame,
  .work-play,
  .work-dialog[open] {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: РАБОТЫ РЕБЯТ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: БОКОВОЙ FAQ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: БОКОВОЙ FAQ: АНИМАЦИИ
   ========================================================================== */

@keyframes faq-drawer-in {
  from {
    opacity: 0.7;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: БОКОВОЙ FAQ: АНИМАЦИИ
   ========================================================================== */

.faq-edge {
  position: fixed;
  right: 0;
  top: 54%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 3.4rem;
  padding: var(--space-3) var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-heading);
  font-weight: 900;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform var(--duration-base), background var(--duration-base), opacity var(--duration-fast);
}

.faq-edge:hover {
  background: var(--blue);
  transform: translate(-0.3rem, -50%);
}

.faq-edge[aria-expanded="true"] {
  opacity: 0;
  pointer-events: none;
}

.faq-edge-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-lead);
  font-weight: 900;
}

.faq-edge > span:last-child {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  letter-spacing: var(--tracking-label);
}

.faq-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(36rem, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
}

.faq-drawer::backdrop {
  background: rgb(16 41 77 / 55%);
  backdrop-filter: blur(5px);
}

.faq-drawer[open] {
  animation: faq-drawer-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq-drawer-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-7) var(--space-5);
  background: linear-gradient(145deg, var(--blue-pale), var(--white) 68%);
}

.faq-drawer-head::after {
  content: "?";
  position: absolute;
  right: 6.5rem;
  top: 0.2rem;
  color: rgb(9 91 232 / 5%);
  font-size: 10rem;
  line-height: var(--line-tight);
  font-weight: 900;
  pointer-events: none;
}

.faq-drawer-head > div {
  position: relative;
  z-index: 1;
}

.faq-drawer-head p {
  margin-bottom: var(--space-3);
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-wide);
  font-weight: 900;
}

.faq-drawer-head h2 span {
  color: var(--blue);
}

.faq-drawer-close {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: var(--font-size-display);
  line-height: var(--line-tight);
  cursor: pointer;
  transition: transform var(--duration-fast), background var(--duration-fast);
}

.faq-drawer-close:hover {
  background: var(--blue);
  transform: rotate(7deg);
}

.faq-drawer-intro {
  padding: 0 var(--space-7) var(--space-5);
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
  background: linear-gradient(145deg, var(--blue-pale), var(--white) 68%);
}

.faq-drawer-list {
  padding: 0 var(--space-7);
}

.faq-drawer-list details {
  border-top: 1px solid var(--line);
}

.faq-drawer-list details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-drawer-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  list-style: none;
  color: var(--navy-soft);
  font-size: var(--font-size-body);
  line-height: var(--line-copy);
  font-weight: 700;
  cursor: pointer;
}

.faq-drawer-list summary::-webkit-details-marker {
  display: none;
}

.faq-drawer-list summary span {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue-pale);
  color: var(--blue);
  font-size: var(--font-size-card);
  line-height: var(--line-tight);
  font-weight: 700;
  transition: transform var(--duration-base), background var(--duration-base);
}

.faq-drawer-list details[open] summary {
  color: var(--blue);
}

.faq-drawer-list details[open] summary span {
  background: var(--yellow);
  color: var(--navy);
  transform: rotate(45deg);
}

.faq-drawer-list details > p {
  max-width: 480px;
  padding: 0 var(--space-7) var(--space-5) 0;
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
}

.faq-drawer-actions {
  position: relative;
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-7) var(--space-6);
  background: var(--paper);
}

.faq-drawer-actions > a:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--blue);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  font-weight: 900;
}

.faq-drawer-actions > a:first-child:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.faq-drawer-actions .button {
  width: 100%;
  font-size: var(--font-size-sm);
}

.faq-drawer-actions > p {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  text-align: center;
}

.faq-drawer-actions > p a {
  color: var(--navy-soft);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

@media (max-width: 640px) {
  .faq-edge {
    top: auto;
    bottom: 5.6rem;
    width: 3.1rem;
    padding: var(--space-2) var(--space-2) var(--space-3);
    transform: none;
    font-size: var(--font-size-xs);
  }

  .faq-edge:hover {
    transform: translateX(-0.2rem);
  }

  .faq-edge-mark {
    width: 1.8rem;
    height: 1.8rem;
    font-size: var(--font-size-body);
  }

  .faq-drawer-head {
    padding: var(--space-6) var(--space-5) var(--space-4);
  }

  .faq-drawer-head::after {
    right: 3.7rem;
    font-size: 7rem;
  }

  .faq-drawer-intro {
    padding: 0 var(--space-5) var(--space-5);
  }

  .faq-drawer-list {
    padding: 0 var(--space-5);
  }

  .faq-drawer-list details > p {
    padding-right: var(--space-2);
  }

  .faq-drawer-actions {
    padding: var(--space-5) var(--space-5) calc(var(--space-9) + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-edge,
  .faq-drawer[open],
  .faq-drawer-close,
  .faq-drawer-list summary span {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: БОКОВОЙ FAQ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ВИДЕООТЗЫВЫ ДЕТЕЙ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ВИДЕООТЗЫВЫ ДЕТЕЙ: АНИМАЦИИ
   ========================================================================== */

@keyframes voice-play-pulse {
  0%,
  70%,
  100% {
    box-shadow: 0 0 0 0.5rem #ffffff24, 0 0.7rem 1.4rem #071a355c;
  }
  82% {
    box-shadow: 0 0 0 0.8rem #ffffff12, 0 0.7rem 1.4rem #071a355c;
  }
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ВИДЕООТЗЫВЫ ДЕТЕЙ: АНИМАЦИИ
   ========================================================================== */

.reviews {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 88% 8%, var(--blue) 0 7rem, transparent 7.1rem), radial-gradient(circle at 7% 92%, var(--blue-hover) 0 9rem, transparent 9.1rem), var(--blue);
  color: var(--white);
}

.reviews::before {
  content: "";
  position: absolute;
  right: -8rem;
  top: -8rem;
  width: 31rem;
  height: 31rem;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(255 255 255 / 5%), 0 0 0 8rem rgb(255 255 255 / 5%);
}

.voices-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.82fr 1.5fr;
  align-items: center;
  gap: var(--space-8);
}

.voices-copy {
  max-width: 31rem;
}

.voices-kicker {
  margin-bottom: var(--space-4);
  color: var(--line);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
  font-weight: 700;
}

.voices-copy h2 span {
  color: var(--yellow);
}

.voices-copy h2 {
  color: var(--white);
}

.voices-copy > p {
  max-width: 480px;
  margin-top: var(--space-5);
  color: var(--blue-pale);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
}

.voices-hint {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  color: var(--line);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
}

.voices-hint > span {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  font-size: var(--font-size-xs);
  padding-left: var(--space-1);
  box-shadow: var(--shadow-sm);
}

.voices-hint strong {
  color: var(--white);
  font-weight: 900;
}

.voices-next {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 20%);
  color: var(--line);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 700;
}

.voices-next-target {
  display: grid;
  justify-items: center;
  gap: 0;
}

.voices-next-target strong {
  color: var(--yellow);
  font-size: var(--font-size-body);
  letter-spacing: var(--tracking-label);
}

.voices-next-chevrons {
  color: var(--yellow);
}

.voice-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
}

.voice-card {
  --offset: 0rem;
  --tilt: 0deg;
  position: relative;
  aspect-ratio: 9/16;
  min-width: 0;
  padding: 0;
  border: 0.3rem solid var(--white);
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-dark);
  transform: translateY(var(--offset)) rotate(var(--tilt));
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base), border-color var(--duration-base);
  isolation: isolate;
}

.voice-card-one {
  --offset: 1.2rem;
  --tilt: -2.5deg;
}

.voice-card-two {
  --offset: -1.1rem;
  --tilt: 1.5deg;
}

.voice-card-three {
  --offset: 0.8rem;
  --tilt: -1.5deg;
}

.voice-card-four {
  --offset: -0.5rem;
  --tilt: 2.5deg;
}

.voice-photo {
  position: absolute;
  inset: 0;
  display: block;
}

.voice-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow);
}

.voice-card-one .voice-photo img {
  object-position: 20% 50%;
}

.voice-card-two .voice-photo img {
  object-position: 50% 35%;
}

.voice-card-three .voice-photo img {
  object-position: 76% 50%;
}

.voice-card-four .voice-photo img {
  object-position: 50% 48%;
  transform: scale(1.07);
}

.voice-overlay {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, rgb(16 41 77 / 10%) 28%, rgb(16 41 77 / 85%) 74%, rgb(16 41 77 / 95%));
}

.voice-label {
  position: absolute;
  z-index: 2;
  left: 0.7rem;
  top: 0.7rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 85%);
  color: var(--navy-soft);
  font-size: var(--font-size-xs);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-label);
  font-weight: 900;
}

.voice-number {
  position: absolute;
  z-index: 2;
  right: 0.8rem;
  top: 0.8rem;
  color: var(--white);
  font-size: var(--font-size-xs);
  line-height: var(--line-tight);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
  text-shadow: 0 1px 5px var(--navy);
}

.voice-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 45%;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-body);
  padding-left: var(--space-1);
  translate: -50% -50%;
  box-shadow: 0 0 0 0.6rem rgb(255 255 255 / 15%), 0 0.7rem 1.4rem rgb(16 41 77 / 35%);
  animation: voice-play-pulse 2.6s ease-in-out infinite;
}

.voice-question {
  position: absolute;
  z-index: 2;
  left: 1rem;
  right: 0.8rem;
  bottom: 1rem;
  color: var(--white);
  font-size: var(--font-size-card);
  line-height: var(--line-heading);
  text-align: left;
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.voice-card:hover {
  z-index: 5;
  border-color: var(--yellow);
  transform: translateY(-0.8rem) rotate(0) scale(1.05);
  box-shadow: var(--shadow-dark);
}

.voice-card:hover .voice-photo img {
  transform: scale(1.07);
}

.voice-card-four:hover .voice-photo img {
  transform: scale(1.13);
}

.voice-card:focus-visible {
  z-index: 5;
  border-color: var(--yellow);
  transform: translateY(-0.8rem) rotate(0) scale(1.05);
  box-shadow: var(--shadow-dark);
  outline: 3px solid var(--yellow);
  outline-offset: 6px;
}

.voices-spark {
  position: absolute;
  color: var(--yellow);
  line-height: var(--line-tight);
  font-weight: 900;
  pointer-events: none;
}

.voices-spark-one {
  left: 2.5%;
  top: 14%;
  font-size: var(--font-size-display);
  transform: rotate(-12deg);
}

.voices-spark-two {
  right: 2.5%;
  bottom: 12%;
  font-size: var(--heading-sm);
  transform: rotate(8deg);
}

.voice-dialog {
  width: min(34rem, calc(100% - 2rem));
  max-width: 34rem;
  max-height: calc(100dvh - 1.5rem);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--navy);
  overflow-y: auto;
  box-shadow: var(--shadow-dark);
}

.voice-dialog::backdrop {
  background: rgb(16 41 77 / 70%);
  backdrop-filter: blur(6px);
}

.voice-dialog[open] {
  animation: dialog-enter 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.voice-dialog-close {
  position: absolute;
  right: 1.4rem;
  top: 1.4rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-size: var(--font-size-display);
  line-height: var(--line-tight);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.voice-dialog-close:hover {
  background: var(--yellow);
}

.voice-dialog-kicker {
  padding: var(--space-1) var(--space-7) var(--space-3) var(--space-1);
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
  font-weight: 900;
}

.voice-dialog-media {
  position: relative;
  width: min(20rem, 100%);
  aspect-ratio: 9/16;
  max-height: 64dvh;
  margin-inline: auto;
  border-radius: var(--radius-md);
  background: var(--line);
  overflow: hidden;
}

.voice-dialog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-dialog-media > span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-card);
  padding-left: var(--space-1);
  translate: -50% -50%;
  box-shadow: 0 0 0 0.7rem rgb(255 255 255 / 20%);
}

.voice-dialog-copy {
  padding: var(--space-4) var(--space-1) 0;
}

.voice-dialog-copy > p {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-body);
}

@media (max-width: 1024px) {
  .voices-layout {
    grid-template-columns: 0.78fr 1.45fr;
    gap: var(--space-6);
  }

  .voice-cards {
    gap: var(--space-3);
  }

  .voice-card {
    border-width: 0.3rem;
    border-radius: var(--radius-md);
  }

  .voice-label {
    left: 0.5rem;
    top: 0.5rem;
  }

  .voice-number {
    right: 0.6rem;
    top: 0.6rem;
  }

  .voice-question {
    left: 0.8rem;
    bottom: 0.8rem;
  }

  .voices-copy {
    max-width: 38rem;
  }

  .voices-hint {
    display: none;
  }

  .voices-next {
    margin-top: var(--space-5);
    max-width: 28rem;
  }

  .voice-cards::-webkit-scrollbar {
    display: none;
  }

  .voice-card:hover,
  .voice-card:focus-visible {
    transform: translateY(-0.4rem) rotate(0) scale(1.02);
  }
}

@media (max-width: 640px) {
  .voices-layout {
    display: block;
  }

  .voice-card:last-child {
    margin-right: var(--space-5);
  }

  .voice-question {
    font-size: var(--font-size-lead);
  }

  .voice-cards {
    display: flex;
    gap: var(--space-4);
    margin: var(--space-6) calc(-1 * var(--space-5)) 0;
    padding: var(--space-5) var(--space-5) var(--space-6);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    width: calc(100% + 2rem);
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
  }

  .voice-card {
    flex: 0 0 min(61vw, 16rem);
    scroll-snap-align: center;
    flex-basis: 68vw;
  }

  .voice-dialog {
    border-radius: var(--radius-md);
    padding: var(--space-3);
  }

  .voice-dialog-media {
    max-height: 60dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-card,
  .voice-photo img,
  .voice-play,
  .voices-next-chevrons,
  .voice-dialog[open] {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ВИДЕООТЗЫВЫ ДЕТЕЙ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ПЛОЩАДКА САМГТУ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ПЛОЩАДКА САМГТУ: АНИМАЦИИ
   ========================================================================== */

@keyframes campus-arrive {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes campus-reveal {
  from {
    opacity: 0.7;
    clip-path: inset(0 100% 0 0 round 1.5rem 5.8rem 1.5rem 1.5rem);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 1.5rem 5.8rem 1.5rem 1.5rem);
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ПЛОЩАДКА САМГТУ: АНИМАЦИИ
   ========================================================================== */

.campus {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--paper) 0%, var(--white) 55%, var(--blue-pale) 100%);
  color: var(--navy);
}

.campus::before {
  content: "";
  position: absolute;
  width: 32rem;
  height: 32rem;
  left: -16rem;
  bottom: -13rem;
  border: 1px dashed var(--line);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem var(--blue-pale), 0 0 0 8rem var(--paper);
}

.campus-backdrop-word {
  position: absolute;
  right: -0.04em;
  top: -0.08em;
  color: rgba(9, 91, 232, 0.03);
  font-size: 16rem;
  line-height: var(--line-tight);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  pointer-events: none;
}

.campus-shell {
  position: relative;
  z-index: 2;
}

.campus-brandline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.campus-partners {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.campus-partners img:first-child {
  width: 8.7rem;
  height: auto;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--navy);
  box-sizing: content-box;
  object-fit: contain;
  box-shadow: var(--shadow-sm);
}

.campus-cross {
  color: var(--muted);
  font-size: var(--font-size-title);
  font-weight: 700;
}

.campus-partner-name {
  display: grid;
  gap: 0;
  color: var(--navy);
  line-height: var(--line-tight);
}

.campus-partner-name strong {
  font-size: var(--font-size-title);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
}

.campus-partner-name small {
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-heading);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.campus-official {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.campus-official::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 0.3rem var(--yellow-soft);
}

.campus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(23rem, 0.88fr);
  gap: var(--grid-gap-small);
  align-items: center;
  padding-block: var(--space-6) var(--space-5);
}

.campus-media {
  position: relative;
  min-width: 0;
  margin: 0;
  aspect-ratio: 1.55;
  border-radius: var(--radius-feature);
  overflow: hidden;
  background: var(--line);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

.campus-media > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.campus-media:hover > img:first-child {
  transform: scale(1.04);
}

.campus-media-shade {
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgb(16 41 77 / 65%) 72%, rgb(16 41 77 / 85%));
  z-index: 1;
}

.campus-photo-label {
  position: absolute;
  left: 1.4rem;
  top: 1.3rem;
  z-index: 3;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 90%);
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}

.campus-media figcaption {
  position: absolute;
  left: 1.5rem;
  right: 8.5rem;
  bottom: 1.3rem;
  z-index: 3;
  color: var(--white);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
}

.campus-media figcaption strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--yellow);
  font-size: var(--font-size-lead);
  font-weight: 900;
}

.campus-room {
  position: absolute;
  right: 1.2rem;
  top: 1.1rem;
  z-index: 3;
  width: 7rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-feature);
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-md);
  transform: rotate(3deg);
}

.campus-room > b {
  display: block;
  font-size: var(--heading-sm);
  line-height: var(--line-tight);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
}

.campus-room > span {
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.campus-softik {
  position: absolute;
  right: 1.1rem;
  bottom: -0.7rem;
  z-index: 4;
  width: 7.2rem;
  height: 8.5rem;
  object-fit: contain;
  filter: drop-shadow(0 0.6rem 0.7rem rgb(16 41 77 / 30%));
  transform: rotate(5deg);
  pointer-events: none;
}

.campus-kicker {
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}

.campus-lead {
  max-width: 34rem;
  margin-top: var(--space-4);
  color: var(--text);
  font-size: var(--font-size-body);
  line-height: var(--line-copy);
  font-weight: 700;
}

.campus-copy {
  max-width: 34rem;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: var(--line-copy);
}

.campus-values {
  margin-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.campus-value {
  display: grid;
  grid-template-columns: 2.1rem 8.2rem 1fr;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.campus-value > span {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-xs);
  font-weight: 900;
  transform: rotate(-4deg);
}

.campus-value:nth-child(2) > span {
  background: var(--line);
  color: var(--blue);
  transform: rotate(4deg);
}

.campus-value > strong {
  padding-top: var(--space-1);
  color: var(--navy-soft);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  font-weight: 900;
}

.campus-value > p {
  color: var(--muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
}

.campus-route {
  display: block;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.campus-route-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.campus-route-title > span {
  display: block;
  color: var(--line);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
  font-weight: 900;
}

.campus-route-title > strong {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  font-weight: 900;
  text-align: center;
}

.campus-route ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-7);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: campus-route;
}

.campus-route li {
  counter-increment: campus-route;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8);
  border: 2px solid var(--text);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-heading);
  font-weight: 900;
}

.campus-route li::before {
  content: counter(campus-route, decimal-leading-zero);
  position: absolute;
  left: 0.7rem;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--blue);
  color: var(--yellow);
  font-size: var(--font-size-xs);
  font-weight: 900;
}

.campus-route li:not(:last-child)::after {
  content: "›››";
  position: absolute;
  right: -3rem;
  top: 50%;
  translate: 0 -50%;
  width: 3rem;
  color: var(--yellow);
  font-size: var(--font-size-title);
  line-height: var(--line-tight);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
  text-align: center;
}

.campus-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 1.6rem 0.2rem 0;
}

.campus-next > p {
  color: var(--muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  font-weight: 700;
}

.campus-next > a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--blue);
  font-size: var(--font-size-body);
  line-height: var(--line-copy);
  font-weight: 900;
}

.campus-next-chevrons {
  color: var(--blue);
}

@media (max-width: 1024px) {
  .campus-value {
    grid-template-columns: 2.1rem 7.5rem 1fr;
    gap: var(--space-2);
  }

  .campus-brandline {
    align-items: flex-start;
  }

  .campus-official {
    max-width: 10rem;
    text-align: right;
  }

  .campus-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-5);
  }

  .campus-media {
    aspect-ratio: 1.65;
  }

  .campus-story {
    max-width: 42rem;
  }

  .campus-values {
    max-width: 41rem;
  }

  .campus-route ol {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    width: min(100%, 28rem);
    margin-inline: auto;
  }

  .campus-route li {
    padding-right: var(--space-3);
    min-height: 4.3rem;
  }

  .campus-route li:not(:last-child)::after {
    letter-spacing: var(--tracking-label);
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1.7rem;
    translate: -50% 0;
    transform: rotate(90deg);
    width: 2rem;
    font-size: var(--font-size-card);
  }
}

@media (max-width: 640px) {
  .campus-brandline {
    display: block;
  }

  .campus-partners {
    gap: var(--space-3);
  }

  .campus-partners img:first-child {
    width: 7.2rem;
    padding: var(--space-2);
  }

  .campus-cross,
  .campus-partner-name strong {
    font-size: var(--font-size-card);
  }

  .campus-official {
    max-width: none;
    margin-top: var(--space-3);
    text-align: left;
  }


  .campus-media {
    aspect-ratio: 1.05;
  }

  .campus-media > img:first-child {
    object-position: 39% center;
  }

  .campus-photo-label {
    left: 0.8rem;
    top: 0.8rem;
  }

  .campus-room {
    right: 0.7rem;
    top: 0.7rem;
    width: 5.5rem;
    padding: var(--space-3);
  }

  .campus-room > b {
    font-size: var(--font-size-display);
  }

  .campus-media figcaption {
    left: 1rem;
    right: 6rem;
    bottom: 1rem;
    font-size: var(--font-size-xs);
  }

  .campus-media figcaption strong {
    font-size: var(--font-size-body);
  }

  .campus-softik {
    right: 0.5rem;
    width: 5.5rem;
    height: 6.5rem;
  }

  .campus-value {
    grid-template-columns: 2rem 1fr;
    padding: var(--space-3) 0;
  }

  .campus-value > p {
    grid-column: 2;
  }

  .campus-route-title {
    display: block;
  }

  .campus-route-title > strong {
    margin-top: var(--space-3);
  }


  .campus-route li {
    min-height: 4.2rem;
    padding-right: var(--space-4);
  }

  .campus-next {
    display: block;
    padding-block: 1.4rem 0;
  }

  .campus-next > a {
    justify-content: space-between;
    margin-top: var(--space-4);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .campus.campus-motion-ready .campus-media,
  .campus.campus-motion-ready .campus-story,
  .campus.campus-motion-ready .campus-route {
    opacity: 0;
  }

  .campus.campus-motion-ready.is-visible .campus-media {
    animation: campus-reveal 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .campus.campus-motion-ready.is-visible .campus-story {
    animation: campus-arrive 0.62s 0.18s ease-out both;
  }

  .campus.campus-motion-ready.is-visible .campus-route {
    animation: campus-arrive 0.58s 0.32s ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .campus-media > img:first-child,
  .campus-next-chevrons {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ПЛОЩАДКА САМГТУ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ОБЩИЕ ЭЛЕМЕНТЫ ФОРМ
   ========================================================================== */

.trial-fields input,
.enrollment-dialog input:not([type="checkbox"]),
.enrollment-dialog select {
  width: 100%;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--navy);
  font: inherit;
  font-size: var(--font-size-body);
  font-weight: 700;
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
  height: 3.5rem;
}

.trial-consent a,
.enrollment-consent a {
  color: var(--blue);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.trial-submit > b,
.enrollment-submit > b {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-lead);
}

.trial-result-check,
.enrollment-success-mark {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-sticker);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-display);
  font-weight: 900;
  transform: rotate(-4deg);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ОБЩИЕ ЭЛЕМЕНТЫ ФОРМ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ФОРМА ЗАПИСИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ФОРМА ЗАПИСИ: АНИМАЦИИ
   ========================================================================== */

@keyframes trial-softik {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -0.6rem;
    rotate: 4deg;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ФОРМА ЗАПИСИ: АНИМАЦИИ
   ========================================================================== */

.trial {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue) 55%, var(--blue-hover) 100%);
  color: var(--white);
  isolation: isolate;
}

.trial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 16% 18%, rgb(120 224 255 / 25%) 0 1px, transparent 2px) 0 0/2.1rem 2.1rem;
  mask-image: linear-gradient(90deg, var(--black), transparent 52%);
}

.trial-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(120 224 255 / 30%);
  border-radius: 50%;
  pointer-events: none;
}

.trial-orbit-one {
  width: 34rem;
  height: 34rem;
  left: -17rem;
  bottom: -21rem;
  box-shadow: 0 0 0 5rem rgb(120 224 255 / 5%), 0 0 0 10rem rgb(120 224 255 / 5%);
}

.trial-orbit-two {
  width: 18rem;
  height: 18rem;
  right: -8rem;
  top: -9rem;
  box-shadow: 0 0 0 3.5rem rgb(255 255 255 / 5%), 0 0 0 7rem rgb(255 255 255 / 5%);
}

.trial-code {
  position: absolute;
  left: 6%;
  top: 2.2rem;
  color: var(--line);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
  transform: rotate(-3deg);
}

.trial-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(31rem, 1.18fr);
  gap: var(--grid-gap);
  align-items: center;
}

.trial-story {
  position: relative;
  max-width: 37rem;
}

.trial-kicker {
  margin: 0 0 var(--space-4);
  color: var(--line);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
}

.trial .trial-story h2 > span {
  color: var(--yellow);
}

.trial .trial-story h2 {
  color: var(--white);
}

.trial .trial-lead {
  max-width: 34rem;
  margin-top: var(--space-5);
  color: var(--blue-pale);
  font-size: var(--font-size-lead);
  line-height: var(--line-body);
}

.trial-benefits {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.trial-benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--white);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
}

.trial-benefits li > span {
  display: grid;
  place-items: center;
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: var(--space-1);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy-soft);
  font-size: var(--font-size-xs);
  font-weight: 900;
}

.trial-benefits strong {
  font-weight: 700;
}

.trial-place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(120 224 255 / 40%);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
}

.trial-place > span {
  color: var(--yellow);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}

.trial-place > strong {
  color: var(--line);
  font-weight: 700;
}

.trial-softik {
  position: absolute;
  right: -1.3rem;
  bottom: -4.5rem;
  width: 6.4rem;
  height: 7.6rem;
  object-fit: contain;
  filter: drop-shadow(0 0.8rem 0.8rem rgb(23 56 95 / 30%));
  transform: rotate(8deg);
  pointer-events: none;
}

.trial-card {
  position: relative;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: var(--radius-feature);
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-dark);
}

.trial-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.trial .trial-card-head > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}

.trial-card-head > span {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-sticker);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-xs);
  font-weight: 900;
  transform: rotate(4deg);
}

.trial-card > h3,
.trial-result h3 {
  color: var(--navy);
}

.trial .trial-card-intro {
  max-width: 35rem;
  margin: var(--space-3) 0 var(--space-5);
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
}

#trial-enrollment-form {
  display: grid;
  gap: var(--space-4);
}

#trial-enrollment-form[hidden],
.trial-result[hidden] {
  display: none;
}

.trial-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 0.62fr;
  gap: var(--space-3);
}

.trial-fields label {
  display: grid;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
}

.trial-fields input:focus {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: var(--focus-ring);
}

.trial-fields input::placeholder {
  color: var(--muted);
  font-weight: 700;
}

#trial-enrollment-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#trial-enrollment-form legend {
  margin-bottom: var(--space-2);
  color: var(--text);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
}

.trial-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.trial-choices label {
  cursor: pointer;
}

.trial-choices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.trial-choices span {
  display: block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 700;
  transition: var(--duration-fast);
}

.trial-choices input:checked+span {
  border-color: var(--blue);
  background: var(--blue-pale);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.trial-choices input:focus-visible+span {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.trial-choice-wide span {
  background: var(--yellow-soft);
  border-color: var(--yellow);
  color: var(--navy);
}

.trial-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  cursor: pointer;
}

.trial-consent input {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--blue);
}

.trial .trial-prototype {
  margin: calc(-1 * var(--space-1)) 0 0;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
}

.trial-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-size: var(--font-size-body);
  font-weight: 900;
  cursor: pointer;
  box-shadow: var(--shadow-blue);
  transition: transform var(--duration-fast), background var(--duration-fast);
  min-height: 4rem;
}

.trial-submit:hover {
  background: var(--blue-hover);
  transform: translateY(-2px);
}

.trial-submit:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.trial-direct {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
}

.trial-direct a {
  color: var(--blue);
  font-weight: 900;
}

.trial-result {
  min-height: 24rem;
  padding-block: var(--space-6) var(--space-3);
}

.trial .trial-result > p {
  max-width: 32rem;
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
}

.trial-result > strong {
  display: block;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--yellow-soft);
  color: var(--navy);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
}

.trial-result > button {
  margin-top: var(--space-5);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 900;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

@media (max-width: 1024px) {
  .trial-fields {
    grid-template-columns: 1fr 1fr;
  }

  .trial-fields label:last-child {
    grid-column: 1 / -1;
  }

  .trial-shell {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .trial-story {
    max-width: 44rem;
  }

  .trial-softik {
    display: block;
    right: 1rem;
    bottom: -3.8rem;
  }
}

@media (max-width: 640px) {

  .trial-code {
    display: none;
  }

  .trial .trial-lead {
    font-size: var(--font-size-body);
  }

  .trial-place {
    padding-right: var(--space-8);
  }

  .trial-softik {
    right: -0.2rem;
    bottom: -3.5rem;
    width: 5.2rem;
  }

  .trial-card {
    padding: var(--space-5);
  }

  .trial-card-head > span {
    margin-right: var(--space-2);
  }

  .trial-fields {
    grid-template-columns: 1fr;
  }

  .trial-fields label:last-child {
    grid-column: auto;
  }


  .trial-choice-wide {
    width: 100%;
  }

  .trial-choice-wide span {
    text-align: center;
  }

  .trial-submit {
    font-size: var(--font-size-sm);
    padding-left: var(--space-4);
  }

  .trial-direct {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .trial-softik {
    animation: trial-softik 3.1s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trial-softik {
    animation: none !important;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ФОРМА ЗАПИСИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: КОНТАКТЫ И КАРТА
   ========================================================================== */

.contact-hub {
  position: relative;
  overflow: hidden;
  background: var(--white);
  color: var(--navy);
}

.contact-hub::before {
  content: "";
  position: absolute;
  width: 26rem;
  height: 26rem;
  left: -15rem;
  top: 5rem;
  border: 1px dashed var(--line);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem var(--paper), 0 0 0 8rem var(--paper);
  pointer-events: none;
}

.contact-hub-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(24rem, 0.82fr) minmax(0, 1.18fr);
  gap: var(--grid-gap);
  align-items: stretch;
}

.contact-hub-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-kicker {
  margin-bottom: var(--space-4);
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
}

.contact-lead {
  max-width: 31rem;
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
}

.contact-address {
  margin-top: var(--space-5);
  font-style: normal;
}

.contact-address > span {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 700;
}

.contact-address > strong {
  display: block;
  margin-top: var(--space-1);
  color: var(--navy);
  font-size: var(--heading-sm);
  line-height: var(--line-heading);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
}

.contact-address > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.contact-address b {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--blue-pale);
  color: var(--blue);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
}

.contact-primary-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

.contact-enroll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-width: 15.8rem;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--blue);
  color: var(--white);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  font-weight: 900;
  box-shadow: var(--shadow-blue);
  transition: transform var(--duration-fast), background var(--duration-fast);
}

.contact-enroll:hover {
  background: var(--blue-hover);
  transform: translateY(-2px);
}

.contact-route {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--blue);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  font-weight: 900;
}

.contact-route:hover > span {
  translate: 0.2rem 0;
}

.contact-route > span {
  transition: translate var(--duration-fast);
}

.contact-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.contact-ways > a {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  padding: var(--space-3) 0;
  min-width: 0;
}

.contact-ways > a:last-child {
  grid-column: 1 / -1;
}

.contact-ways small {
  flex: 0 0 100%;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}

.contact-ways strong {
  overflow-wrap: anywhere;
  color: var(--navy-soft);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
  font-weight: 900;
}

.contact-ways > a > span {
  flex: 0 0 auto;
  display: inline-block;
  position: static;
  translate: none;
  align-self: center;
  color: var(--blue);
  font-size: var(--font-size-body);
}

.contact-ways > a:hover strong {
  color: var(--blue);
}

.contact-map {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-feature);
  background: var(--blue-pale);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.9) contrast(0.96);
}

.contact-map-badge {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgb(16 41 77 / 95%);
  color: var(--white);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.contact-map-badge img {
  width: 1.7rem;
  height: 1.7rem;
  object-fit: contain;
}

.contact-map-badge span {
  font-size: var(--font-size-xs);
  line-height: var(--line-heading);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}

.contact-map-badge strong {
  color: var(--yellow);
  font-size: var(--font-size-xs);
}

.contact-map-open {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: grid;
  gap: 0;
  min-width: 10.5rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-md);
}

.contact-map-open span {
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 700;
}

.contact-map-open strong {
  color: var(--blue);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
}

@media (max-width: 1024px) {
  .contact-hub-grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .contact-hub-copy {
    max-width: 42rem;
  }

  .contact-map {
    min-height: 29rem;
  }
}

@media (max-width: 640px) {
  .contact-hub-grid {
    gap: var(--space-6);
  }

  .contact-primary-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-enroll {
    width: 100%;
  }

  .contact-route {
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-1);
  }

  .contact-ways {
    grid-template-columns: 1fr;
  }

  .contact-ways > a:last-child {
    grid-column: auto;
  }

  .contact-map {
    min-height: 25rem;
  }

  .contact-map-badge {
    left: 0.7rem;
    top: 0.7rem;
  }

  .contact-map-open {
    right: 0.7rem;
    bottom: 0.7rem;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: КОНТАКТЫ И КАРТА
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ДРУЗЬЯ И ПАРТНЁРЫ
   ========================================================================== */

.site-partners {
  padding-block: var(--space-7);
  background: var(--paper);
}

.site-partners h2 {
  margin: 0 0 var(--space-6);
  font-size: var(--heading-sm);
  text-wrap: balance;
}

.site-partners__grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy);
  list-style: none;
}

.site-partners__grid::before {
  content: "";
  position: absolute;
  right: calc(-1 * var(--space-8));
  bottom: calc(-1 * var(--space-10));
  width: calc(2 * var(--space-10));
  height: calc(2 * var(--space-10));
  border: var(--space-6) solid var(--navy-soft);
  border-radius: 50%;
  pointer-events: none;
}

.site-partners__grid > li {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.site-partners__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--white);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy);
  font-size: var(--font-size-body);
  font-weight: 900;
  line-height: var(--line-copy);
  text-decoration: none;
  transition: transform var(--duration-base),
    border-color var(--duration-fast);
}

.site-partners__card:hover,
.site-partners__card:focus-visible {
  border-color: var(--yellow);
  transform: translateY(calc(-1 * var(--space-1)));
}

.site-partners__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--space-9);
}

.site-partners__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 14rem);
  max-height: 100%;
  object-fit: contain;
}

.site-partners__logo--karat {
  gap: var(--space-2);
}

.site-partners__logo--karat img:first-child {
  flex: 0 0 auto;
  width: 2.5rem;
}

.site-partners__logo--karat img:last-child {
  flex: 1;
  min-width: 0;
  max-width: 12rem;
}

.site-partners__card > span:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-6);
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-height: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  text-align: left;
}

.site-partners__card > span:last-child::after {
  content: "↗";
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-body);
}

.site-partners__logo--union img {
  max-height: var(--space-8);
}

@media (max-width: 1024px) {
  .site-partners__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-4);
  }

  .site-partners__card {
    padding: var(--space-4);
  }

  .site-partners__logo--karat {
    flex-direction: column;
  }

  .site-partners__logo--karat img:last-child {
    flex: 0 1 auto;
    width: 100%;
  }

  .site-partners__card > span:last-child {
    grid-template-columns: minmax(0, 1fr);
    align-content: space-between;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
  }

  .site-partners__card > span:last-child::after {
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-partners__card {
    transition: none;
  }

  .site-partners__card:hover,
  .site-partners__card:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ДРУЗЬЯ И ПАРТНЁРЫ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ФУТЕР
   ========================================================================== */

.footer {
  padding-block: 0;
  background: var(--navy);
  color: var(--white);
  border: 0;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr 0.9fr 0.8fr;
  gap: var(--grid-gap);
  padding-block: var(--space-7);
}

.footer-brand .brand {
  width: max-content;
  gap: var(--space-3);
}

.footer-brand .brand img {
  width: 9.3rem;
  height: auto;
}

.footer-brand .brand > span {
  align-self: flex-end;
  padding-left: 0.7rem;
}

.footer-brand > p {
  margin-top: var(--space-4);
  color: var(--line);
  font-size: var(--font-size-xs);
  line-height: var(--line-body);
}

.footer-nav,
.footer-links {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.footer-nav a,
.footer-links a {
  width: max-content;
  max-width: 100%;
  color: var(--line);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 700;
}

.footer-nav a:hover,
.footer-links a:hover {
  color: var(--yellow);
}

.footer-links a:last-child {
  margin-top: var(--space-1);
  color: var(--yellow);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
  border-top: 1px solid var(--text);
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
}

.footer-bottom > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.footer-bottom > div span {
  cursor: help;
}

.footer-bottom > a {
  color: var(--line);
  font-weight: 700;
}

.footer-bottom > a:hover {
  color: var(--yellow);
}

@media (max-width: 1024px) {
  .footer-main {
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 640px) {
  .footer {
    padding-bottom: calc(var(--space-9) + env(safe-area-inset-bottom));
  }

  .footer-main {
    grid-template-columns: 1fr;
    padding-block: var(--space-6);
  }

  .footer-nav {
    grid-template-columns: 1fr 1fr;
  }

  .footer-links {
    padding-top: var(--space-5);
    border-top: 1px solid var(--text);
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer-bottom > div {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ФУТЕР
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ФУТЕР: МОДУЛИ МЕНЮ JOOMLA
   ========================================================================== */

.footer-nav .mod-menu,
.footer-links .mod-menu {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav .mod-menu > li,
.footer-links .mod-menu > li {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ФУТЕР: МОДУЛИ МЕНЮ JOOMLA
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: СИСТЕМНЫЕ СООБЩЕНИЯ JOOMLA
   ========================================================================== */

.joomla-messages {
  position: relative;
  z-index: 30;
}

.joomla-messages joomla-alert,
.joomla-messages .alert {
  display: block;
  width: min(78rem, calc(100% - 3rem));
  margin: var(--space-4) auto;
  padding: var(--space-4) var(--space-7) var(--space-4) var(--space-4);
  border: 1px solid var(--line);
  border-left: 0.3rem solid var(--blue);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
}

.joomla-messages .alert-success {
  border-left-color: var(--success);
}

.joomla-messages .alert-danger,
.joomla-messages .alert-error {
  border-left-color: var(--danger);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: СИСТЕМНЫЕ СООБЩЕНИЯ JOOMLA
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ОБОЛОЧКА ВНУТРЕННИХ СТРАНИЦ
   ========================================================================== */

.inner-main {
  min-height: 65vh;
  padding-block: var(--section-space-small);
  background: var(--white);
  color: var(--navy);
}

.inner-shell {
  margin-inline: auto;
  width: min(78rem, calc(100% - 2 * var(--page-gutter)));
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ОБОЛОЧКА ВНУТРЕННИХ СТРАНИЦ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ХЛЕБНЫЕ КРОШКИ
   ========================================================================== */

.inner-shell > .mod-breadcrumbs__wrapper {
  margin-bottom: var(--space-5);
}

.inner-shell:has(.direction-page),
.inner-shell:has(.prices-page) {
  position: relative;
}

.inner-shell:has(.direction-page) > .mod-breadcrumbs__wrapper,
.inner-shell:has(.prices-page) > .mod-breadcrumbs__wrapper,
.inner-shell:has(.publications-intro) > .mod-breadcrumbs__wrapper {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  z-index: 8;
  margin-bottom: 0;
  transform: translateX(-50%);
  pointer-events: none;
  width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
}

.inner-shell .mod-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-copy);
  list-style: none;
  pointer-events: auto;
}

.inner-shell .mod-breadcrumbs__here {
  display: none;
}

.inner-shell .mod-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.inner-shell .mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
  color: var(--blue);
  content: "›";
}

.inner-shell .mod-breadcrumbs__item a {
  color: var(--muted);
  text-decoration: none;
}

.inner-shell .mod-breadcrumbs__item a:hover,
.inner-shell .mod-breadcrumbs__item.active {
  color: var(--navy);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ХЛЕБНЫЕ КРОШКИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: МАТЕРИАЛЫ И КОМПОНЕНТЫ JOOMLA
   ========================================================================== */

.component-content {
  color: var(--text);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
}

.component-content > *:first-child,
.component-content article > *:first-child {
  margin-top: 0;
}

.component-content h1 {
  max-width: 56rem;
  color: var(--navy);
  text-wrap: balance;
  margin-bottom: var(--space-5);
  font-size: var(--heading-lg);
  line-height: var(--line-tight);
}

.component-content h2 {
  max-width: 56rem;
  color: var(--navy);
  text-wrap: balance;
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  font-size: var(--heading-sm);
}

.component-content h3 {
  max-width: 56rem;
  color: var(--navy);
  text-wrap: balance;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-display);
}

.component-content h4,
.component-content h5,
.component-content h6 {
  max-width: 56rem;
  color: var(--navy);
  text-wrap: balance;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-card);
  letter-spacing: 0;
}

.component-content p {
  max-width: 52rem;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.component-content ul,
.component-content ol {
  max-width: 52rem;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
}

.component-content li + li {
  margin-top: var(--space-2);
}

.component-content a:not(.button):not(.btn) {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 0.2em;
}

.component-content a:not(.button):not(.btn):hover {
  color: var(--blue-hover);
}

.component-content img {
  height: auto;
  border-radius: var(--radius-md);
}

.component-content figure {
  margin-block: var(--space-6);
}

.component-content figcaption,
.component-content .caption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
}

.component-content blockquote {
  max-width: 52rem;
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 0.3rem solid var(--yellow);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--paper);
  color: var(--navy);
  font-size: var(--font-size-lead);
  font-weight: 700;
}

.component-content code {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--blue-pale);
  color: var(--navy);
  font-family: Consolas, Monaco, monospace;
  font-size: 0.9em;
}

.component-content pre {
  max-width: 52rem;
  overflow-x: auto;
  margin-block: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--navy);
  color: var(--white);
}

.component-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

.component-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin-block: var(--space-5);
  border-collapse: collapse;
  border-spacing: 0;
}

.component-content td {
  min-width: 8rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.component-content th {
  min-width: 8rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  background: var(--navy);
  color: var(--white);
  font-weight: 900;
}

.component-content tbody tr:nth-child(even) {
  background: var(--paper);
}

.component-content .article-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 var(--space-5);
  padding: 0;
  color: var(--muted);
  font-size: var(--font-size-sm);
  list-style: none;
}

.component-content .article-info-term {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.component-content .blog-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.component-content .blog-item {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.component-content .blog-item h2,
.component-content .blog-item h3 {
  margin-top: var(--space-4);
  font-size: var(--font-size-title);
}

.component-content .readmore {
  margin-top: var(--space-4);
}

.component-content .readmore .btn,
.component-content .btn,
.component-content button:not(.btn-close),
.component-content input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: var(--white);
  font-weight: 900;
  line-height: var(--line-copy);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.component-content .btn:hover,
.component-content button:not(.btn-close):hover,
.component-content input[type="submit"]:hover {
  background: var(--blue-hover);
  transform: translateY(-0.1rem);
}

.component-content .control-group,
.component-content .form-group {
  margin-bottom: var(--space-4);
}

.component-content label,
.component-content .form-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--navy);
  font-weight: 900;
}

.component-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.component-content select,
.component-content .form-control,
.component-content .form-select {
  width: 100%;
  max-width: 38rem;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
}

.component-content textarea {
  width: 100%;
  max-width: 38rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  min-height: 9rem;
  resize: vertical;
}

.component-content .form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.component-content .form-check-input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: var(--space-1);
  accent-color: var(--blue);
}

.component-content .invalid,
.component-content .form-control:invalid,
.component-content .form-select:invalid {
  border-color: var(--danger);
}

.component-content .form-error-message,
.component-content .invalid-feedback {
  margin-top: var(--space-2);
  color: var(--danger);
  font-size: var(--font-size-sm);
}

/* НАЧАЛО БЛОКА: ТЕГИ МАТЕРИАЛОВ */

:is(.component-content, .home-publications) .tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

:is(.component-content, .home-publications) .tags > li {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

:is(.component-content, .home-publications) .tags a {
  display: inline-flex;
  max-width: 100%;
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--blue-pale);
  color: var(--blue);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-copy);
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

:is(.component-content, .home-publications) .tags a:is(:hover, :focus-visible) {
  background: var(--yellow);
  color: var(--navy);
  transform: none;
}

/* КОНЕЦ БЛОКА: ТЕГИ МАТЕРИАЛОВ */

.component-content .pagination,
.component-content .pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.component-content .page-link,
.component-content .pager a {
  display: grid;
  min-width: 2.7rem;
  min-height: 2.7rem;
  place-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  font-weight: 900;
  text-decoration: none;
}

.component-content .page-item.active .page-link,
.component-content .page-link:hover,
.component-content .pager a:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.component-content .page-item.disabled .page-link {
  opacity: 0.4;
  pointer-events: none;
}

.component-content .com-finder__search,
.component-content .com-contact__container {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.component-content .result__item,
.component-content .com-finder__result {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.component-content .float-start {
  float: left;
  margin: var(--space-2) var(--space-5) var(--space-4) 0;
}

.component-content .float-end {
  float: right;
  margin: var(--space-2) 0 var(--space-4) var(--space-5);
}

.component-content::after {
  display: block;
  clear: both;
  content: "";
}

/* ==========================================================================
   КОНЕЦ БЛОКА: МАТЕРИАЛЫ И КОМПОНЕНТЫ JOOMLA
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: СТРАНИЦА ОШИБКИ
   ========================================================================== */

.error-page {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: var(--space-5);
  background: var(--paper);
  color: var(--navy);
}

.error-card {
  width: min(42rem, 100%);
  padding: clamp(var(--space-5), 5vw, var(--space-8));
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.error-card img {
  width: 12rem;
  height: auto;
  margin: 0 auto var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--navy);
}

.error-card small {
  display: block;
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: 900;
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-wide);
}

.error-card h1 {
  margin-top: var(--space-4);
  font-size: var(--heading-md);
  text-wrap: balance;
}

.error-card p {
  max-width: 32rem;
  margin: var(--space-4) auto var(--space-6);
  color: var(--muted);
}

.error-card .button {
  justify-content: center;
  gap: var(--space-3);
  max-width: 100%;
}

/* ==========================================================================
   КОНЕЦ БЛОКА: СТРАНИЦА ОШИБКИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: МАТЕРИАЛЫ JOOMLA: АДАПТИВНЫЕ СТИЛИ
   ========================================================================== */

@media (max-width: 1024px) {
  .component-content .blog-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .component-content h1 {
    font-size: var(--heading-md);
  }

  .component-content .blog-items {
    grid-template-columns: 1fr;
  }

  .component-content .float-start,
  .component-content .float-end {
    float: none;
    margin: var(--space-4) 0;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: МАТЕРИАЛЫ JOOMLA: АДАПТИВНЫЕ СТИЛИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ПУБЛИКАЦИИ СОФТИУМ
   ========================================================================== */

.inner-main:has(.publications-intro) {
  position: relative;
}

.inner-main:has(.publications-page) {
  padding-top: 1.2rem;
}

.inner-shell:has(.publications-intro),
.inner-shell:has(.publications-page) {
  width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
}

.publications-intro {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-7);
  margin-bottom: var(--heading-gap);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--blue-pale);
}

.publications-intro::after {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: var(--yellow);
  font-size: var(--symbol-size);
  line-height: var(--line-tight);
  content: "✦";
  pointer-events: none;
}

.component-content .publications-kicker {
  margin: 0 0 var(--space-3);
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}

.component-content .publications-intro h1 {
  margin: 0;
  font-size: var(--heading-md);
  line-height: var(--line-heading);
}

.component-content .publications-intro > p {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-lead);
}

:is(.publications-page, .blog:has(.publications-intro)) .blog-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

:is(.publications-page, .blog:has(.publications-intro)) .blog-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

:is(.publications-page, .blog:has(.publications-intro)) .blog-item .item-image {
  flex-shrink: 0;
  float: none;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--blue-pale);
}

:is(.publications-page, .blog:has(.publications-intro)) .blog-item .item-image a {
  display: block;
  height: 100%;
}

:is(.publications-page, .blog:has(.publications-intro)) .blog-item .item-image img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}

:is(.publications-page, .blog:has(.publications-intro)) .item-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-5);
}

:is(.publications-page, .blog:has(.publications-intro)) .blog-item h2,
:is(.publications-page, .blog:has(.publications-intro)) .blog-item h3 {
  margin: 0;
  font-size: var(--font-size-title);
  line-height: var(--line-copy);
  overflow-wrap: anywhere;
}

:is(.publications-page, .blog:has(.publications-intro)) .page-header a {
  color: var(--navy);
  text-decoration: none;
}

:is(.publications-page, .blog:has(.publications-intro)) .page-header a:hover {
  color: var(--blue);
}

:is(.publications-page, .blog:has(.publications-intro)) .article-info {
  margin: var(--space-3) 0 var(--space-4);
  color: var(--muted);
  font-size: var(--font-size-xs);
}

:is(.publications-page, .blog:has(.publications-intro)) .article-info dd {
  margin: 0;
}

:is(.publications-page, .blog:has(.publications-intro)) .item-content > p:not(.readmore) {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 var(--space-5);
  color: var(--text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

:is(.publications-page, .blog:has(.publications-intro)) .readmore {
  margin: auto 0 0;
}

.component-content .com-content-article.publications-page {
  max-width: 52rem;
  margin-inline: auto;
}

.com-content-article.publications-page h1 {
  margin: 0 0 var(--space-5);
  font-size: var(--heading-sm);
  line-height: var(--line-heading);
}

.com-content-article.publications-page .item-image {
  float: none;
  margin: var(--space-6) 0;
}

.com-content-article.publications-page .item-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.com-content-article.publications-page .com-content-article__body h2 {
  font-size: var(--font-size-display);
  line-height: var(--line-heading);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.publications-page, .blog:has(.publications-intro)) .blog-item:hover {
    transform: translateY(calc(-1 * var(--space-1)));
    box-shadow: var(--shadow-md);
  }

  :is(.publications-page, .blog:has(.publications-intro)) .blog-item:hover .item-image img {
    transform: scale(1.02);
  }
}

@media (max-width: 1024px) {
  :is(.publications-page, .blog:has(.publications-intro)) .blog-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .publications-intro {
    gap: var(--space-6);
    padding: var(--space-6);
  }
}

@media (max-width: 640px) {
  :is(.publications-page, .blog:has(.publications-intro)) .blog-items {
    grid-template-columns: 1fr;
  }

  .publications-intro {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }

  .publications-intro::after {
    font-size: var(--font-size-display);
  }

  .com-content-article.publications-page .com-content-article__body h2 {
    font-size: var(--font-size-title);
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ПУБЛИКАЦИИ СОФТИУМ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ПУБЛИКАЦИИ НА ГЛАВНОЙ
   ========================================================================== */

.home-publications {
  padding-block: var(--section-space);
  border-block: 1px solid var(--line);
  color: var(--text);
  background: linear-gradient(135deg, var(--paper), var(--blue-pale));
  line-height: var(--line-body);
}

.home-publications__heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--grid-gap-small);
  margin-bottom: var(--heading-gap);
}

.home-publications__kicker {
  margin: 0 0 var(--space-4);
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}

.home-publications__heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: var(--heading-lg);
  line-height: var(--line-heading);
  text-wrap: balance;
}

.home-publications__aside {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}

.home-publications__aside p {
  margin: 0;
}

.home-publications__all {
  gap: var(--space-3);
  color: var(--blue);
}

.home-publications__all:hover {
  color: var(--blue-hover);
}

.home-publications .readmore .button {
  gap: var(--space-4);
}

.home-publications.publications-page .blog-items {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.home-publications.publications-page .blog-item h3 {
  font-size: var(--font-size-card);
}

@media (max-width: 640px) {
  .home-publications__heading {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .home-publications.publications-page .blog-items {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ПУБЛИКАЦИИ НА ГЛАВНОЙ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ВСПЛЫВАЮЩАЯ ФОРМА ЗАПИСИ
   ========================================================================== */

body.enrollment-dialog-open {
  overflow: hidden;
}

.enrollment-dialog {
  width: min(45rem, calc(100% - 2rem));
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border-radius: var(--radius-feature);
  overflow-x: hidden;
}

.enrollment-dialog::before {
  content: "";
  position: absolute;
  top: -5rem;
  right: -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: 45% 55% 50% 42%;
  background: var(--yellow);
  opacity: 1;
  transform: rotate(18deg);
  z-index: 0;
  pointer-events: none;
}

.enrollment-dialog-head {
  position: relative;
  z-index: 1;
  max-width: 37rem;
}

.enrollment-dialog .enrollment-success {
  position: relative;
  z-index: 1;
}

.enrollment-dialog .dialog-close {
  position: absolute;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
}

.enrollment-dialog .dialog-kicker {
  min-height: 2.75rem;
  padding-right: var(--space-7);
  margin-bottom: var(--space-3);
  color: var(--blue);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.enrollment-dialog h2 {
  max-width: 34rem;
  font-size: var(--heading-md);
}

.enrollment-dialog .dialog-intro {
  max-width: 39rem;
  margin: var(--space-4) 0 var(--space-5);
  line-height: var(--line-copy);
}

.enrollment-dialog form {
  position: relative;
  z-index: 1;
  gap: var(--space-4);
}

.enrollment-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.enrollment-dialog .enrollment-field {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 900;
}

.enrollment-field-age {
  grid-column: auto;
}

.enrollment-dialog input:not([type="checkbox"]):focus,
.enrollment-dialog select:focus {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: var(--focus-ring);
}

.enrollment-dialog select {
  cursor: pointer;
}

.enrollment-dialog .enrollment-consent {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  justify-content: stretch;
  align-items: start;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 700;
  cursor: pointer;
}

.enrollment-dialog .enrollment-consent input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
}

.enrollment-form-status {
  min-height: 1.3rem;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
  font-weight: 700;
}

.enrollment-form-status[data-state="error"] {
  color: var(--danger);
}

.enrollment-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-size: var(--font-size-body);
  font-weight: 900;
  cursor: pointer;
  box-shadow: var(--shadow-blue);
  transition: transform var(--duration-fast), background var(--duration-fast), opacity var(--duration-fast);
  min-height: 4rem;
}

.enrollment-submit:hover:not(:disabled) {
  background: var(--blue-hover);
  transform: translateY(-2px);
}

.enrollment-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.enrollment-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.enrollment-success {
  min-height: 22rem;
  padding: var(--space-6) 0 var(--space-4);
}

.enrollment-success[hidden] {
  display: none;
}

.enrollment-success h3 {
  color: var(--navy);
  font-size: var(--heading-sm);
}

.enrollment-success p {
  max-width: 32rem;
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--font-size-body);
}

.enrollment-success button {
  margin-top: var(--space-5);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

@media (max-width: 640px) {
  .enrollment-dialog {
    padding: var(--space-6) var(--space-4) var(--space-5);
  }

  .enrollment-fields {
    grid-template-columns: 1fr;
  }

  .enrollment-dialog h2 {
    font-size: var(--heading-sm);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .enrollment-dialog[open] {
    animation: dialog-enter 0.3s ease-out both;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ВСПЛЫВАЮЩАЯ ФОРМА ЗАПИСИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: СТРАНИЦЫ НАПРАВЛЕНИЙ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: СТРАНИЦЫ НАПРАВЛЕНИЙ: АНИМАЦИИ
   ========================================================================== */

@keyframes directionCodeFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-2deg);
  }

  50% {
    transform: translate(-50%, calc(-50% - 0.6rem)) rotate(-1deg);
  }
}

@keyframes directionStickerNudge {
  0%,
  100% {
    transform: translateY(0) rotate(4deg);
  }

  50% {
    transform: translateY(-0.4rem) rotate(2deg);
  }
}

@keyframes directionCodeLineIn {
  from {
    opacity: 0;
    transform: translateX(-0.7rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes directionCursorBlink {
  50% {
    opacity: 0;
  }
}

@keyframes directionGuideFloat {
  0%,
  100% {
    transform: translateY(0) rotate(var(--direction-guide-rotate));
  }

  50% {
    transform: translateY(-0.45rem) rotate(var(--direction-guide-rotate));
  }
}

@keyframes directionVisualPulse {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.12);
  }
}

@keyframes directionArrowPulse {
  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: СТРАНИЦЫ НАПРАВЛЕНИЙ: АНИМАЦИИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: СТРАНИЦЫ НАПРАВЛЕНИЙ: ОБОЛОЧКА И HERO
   ========================================================================== */

.inner-main:has(.direction-page) {
  padding-block: 0;
}

.inner-shell:has(.direction-page),
.component-content:has(.direction-page) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.direction-page {
  width: 100%;
  margin-left: 0;
  overflow: hidden;
  color: var(--navy);
  background: var(--white);
}

.direction-page h1,
.direction-page h2,
.direction-page p {
  margin-bottom: 0;
}

.direction-page h3 {
  margin-bottom: 0;
  margin-top: 0;
}

.component-content .direction-page a:not(.button):not(.btn) {
  text-decoration: none;
}

.component-content .direction-page a.direction-text-link {
  color: var(--navy);
}

.component-content .direction-page a.direction-text-link:hover {
  color: var(--blue);
}

.direction-wrap {
  margin-inline: auto;
}

.direction-hero {
  position: relative;
  min-height: calc(100dvh - 4.6rem);
  overflow: hidden;
  background: radial-gradient(circle at 85% 22%, rgb(9 91 232 / 13%), transparent 32rem),
    linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
}

.direction-hero::before {
  position: absolute;
  border: 0.1rem solid rgb(9 91 232 / 12%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  top: 4rem;
  right: -14rem;
  width: 48rem;
  height: 48rem;
}

.direction-hero::after {
  position: absolute;
  border: 0.1rem solid rgb(9 91 232 / 12%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  top: 10rem;
  right: -8rem;
  width: 36rem;
  height: 36rem;
}

.direction-hero-grid {
  display: grid;
  min-height: calc(100dvh - 4.6rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr);
  align-items: center;
  gap: var(--grid-gap);
  padding-block: var(--section-space);
}

.direction-hero-copy {
  position: relative;
  z-index: 2;
}

.direction-kicker,
.direction-section-number {
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
  line-height: var(--line-copy);
  text-transform: uppercase;
}

.direction-hero h1 {
  max-width: 47rem;
  margin-top: var(--space-4);
  font-size: var(--heading-lg);
  line-height: var(--line-tight);
}

.direction-lead {
  max-width: 42rem;
  margin-top: var(--space-6);
  color: var(--text);
  font-size: var(--font-size-card);
}

.direction-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
}

.direction-text-link {
  position: relative;
  color: var(--navy);
  font-weight: 900;
}

.direction-text-link::after {
  display: inline-block;
  margin-left: 0.6rem;
  color: var(--blue);
  content: "↓";
  transition: transform var(--duration-fast) ease;
}

.direction-text-link:hover::after {
  transform: translateY(0.25rem);
}

.direction-outcome {
  display: flex;
  max-width: 40rem;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
  color: var(--text);
  font-weight: 700;
}

.direction-outcome > span {
  color: var(--yellow);
  font-size: var(--font-size-display);
  font-weight: 900;
  line-height: var(--line-tight);
}

.direction-code-scene {
  position: relative;
  z-index: 1;
  min-height: 34rem;
}

.direction-code-window {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(35rem, 88%);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: var(--radius-xl);
  background: var(--navy);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%) rotate(-2deg);
}

.direction-code-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  background: rgb(255 255 255 / 6%);
}

.direction-code-bar > span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--yellow);
}

.direction-code-bar > span:nth-child(2) {
  opacity: 0.6;
}

.direction-code-bar > span:nth-child(3) {
  opacity: 0.4;
}

.direction-code-bar b {
  margin-left: auto;
  color: var(--white);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-label);
}

.direction-code-window pre {
  min-height: 19rem;
  margin: 0;
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-size: var(--font-size-card);
  line-height: var(--line-body);
}

.direction-code-window pre code {
  display: block;
  font-family: Consolas, Monaco, monospace;
  white-space: normal;
}

/* ==========================================================================
   КОНЕЦ БЛОКА: СТРАНИЦЫ НАПРАВЛЕНИЙ: ОБОЛОЧКА И HERO
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: ОКНО ПРОЕКТА В HERO
   ========================================================================== */

.direction-code-line {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 2.4rem;
}

.direction-code-line + .direction-code-line {
  margin-top: var(--space-2);
}

.direction-code-line i {
  color: rgb(255 255 255 / 35%);
  font-size: var(--font-size-xs);
  font-style: normal;
  text-align: right;
}

.direction-code-line > span {
  min-width: 0;
  color: var(--white);
  white-space: pre-wrap;
}

.direction-code-line--1 > span {
  color: var(--cyan);
}

.direction-code-line--3 > span {
  color: var(--yellow);
}

.direction-code-cursor {
  display: inline-block;
  width: 0.7rem;
  height: 1.25rem;
  margin: var(--space-3) 0 0 var(--space-7);
  background: var(--yellow);
  vertical-align: middle;
}

.direction-theme--blocks .direction-code-line > span {
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: var(--white);
}

.direction-theme--blocks .direction-code-line--2 > span {
  background: var(--yellow);
  color: var(--navy);
}

.direction-theme--blocks .direction-code-line--3 > span {
  background: var(--white);
  color: var(--navy);
}

.direction-theme--design .direction-code-window pre {
  background: radial-gradient(circle at 80% 25%, rgb(255 223 54 / 18%), transparent 9rem),
    linear-gradient(135deg, rgb(9 91 232 / 12%), transparent 55%);
}

.direction-theme--design .direction-code-line i {
  color: var(--pink);
}

.direction-theme--tools .direction-code-window pre {
  background-image: linear-gradient(rgb(255 255 255 / 5%) 0.1rem, transparent 0.1rem),
    linear-gradient(90deg, rgb(255 255 255 / 5%) 0.1rem, transparent 0.1rem);
  background-size: 2.2rem 2.2rem;
}

.direction-theme--logic .direction-code-line > span {
  padding-left: var(--space-3);
  border-left: 0.25rem solid var(--yellow);
}

.code-blue {
  color: var(--cyan);
}

.code-yellow {
  color: var(--yellow);
}

.direction-code-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--yellow);
  color: var(--navy);
}

.direction-code-result small {
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
}

.direction-code-result strong {
  font-size: var(--font-size-card);
}

.direction-code-sticker {
  position: absolute;
  right: -0.8rem;
  bottom: 0.4rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-md);
  font-weight: 900;
  transform: rotate(4deg);
}

.direction-code-sticker > span {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--success);
}

.direction-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0.1rem dashed rgb(9 91 232 / 20%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.direction-orbit-one {
  width: 39rem;
  height: 39rem;
}

.direction-orbit-two {
  width: 29rem;
  height: 29rem;
}

.direction-code-spark {
  position: absolute;
  z-index: 4;
  color: var(--yellow);
  font-size: var(--heading-sm);
  font-weight: 900;
}

.direction-code-spark-one {
  top: 3rem;
  left: 1rem;
}

.direction-code-spark-two {
  right: 2rem;
  top: 5rem;
  color: var(--blue);
  transform: rotate(12deg);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: ОКНО ПРОЕКТА В HERO
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: ОБЩИЕ СТИЛИ СЕКЦИЙ
   ========================================================================== */

.direction-two-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
  gap: var(--grid-gap);
}

.direction-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
  gap: var(--grid-gap);
  align-items: end;
  margin-bottom: var(--space-7);
}

.direction-section-heading > p {
  max-width: 35rem;
  color: var(--muted);
}

.direction-section h2 {
  margin-top: var(--space-3);
  font-size: var(--heading-lg);
  line-height: var(--line-tight);
}

.direction-section h3 {
  font-size: var(--font-size-title);
}

.direction-page .direction-key-phrase--yellow {
  color: var(--yellow);
}

.direction-intro {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 8% 82%, rgb(9 91 232 / 7%), transparent 16rem),
    var(--white);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: ОБЩИЕ СТИЛИ СЕКЦИЙ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: ОФОРМЛЕНИЕ И ПЕРСОНАЖИ
   ========================================================================== */

.direction-intro::before {
  position: absolute;
  top: 3rem;
  left: -5rem;
  width: 12rem;
  height: 12rem;
  border: 0.12rem dashed rgb(9 91 232 / 15%);
  border-radius: 50%;
  content: "";
}

.direction-intro-heading {
  position: relative;
}

.direction-intro-grid {
  position: relative;
  z-index: 1;
}

.direction-process {
  display: flex;
  width: fit-content;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 80%);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}

.direction-process b {
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}

.direction-process > span {
  color: var(--yellow);
  font-size: var(--font-size-card);
  font-weight: 900;
}

.direction-page .direction-guide {
  --direction-guide-rotate: 0deg;
  position: absolute;
  z-index: 3;
  display: block;
  height: auto;
  border-radius: 0;
  pointer-events: none;
  user-select: none;
}

.direction-page .direction-guide--intro {
  --direction-guide-rotate: -7deg;
  bottom: -4.5rem;
  left: 37%;
  width: 6.5rem;
  transform: rotate(var(--direction-guide-rotate));
}

.direction-rich-text {
  color: var(--text);
  font-size: var(--font-size-body);
}

.direction-rich-text > * + * {
  margin-top: var(--space-4);
}

.direction-rich-text strong {
  color: var(--navy);
}

.direction-faq {
  background: var(--paper);
}

.direction-projects,
.direction-path {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

.direction-projects .direction-section-heading {
  grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 0.75fr);
  align-items: start;
  gap: var(--grid-gap-small);
  margin-bottom: var(--space-6);
}

.direction-projects .direction-section-heading > p {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 0.35rem solid var(--yellow);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgb(255 255 255 / 82%);
  box-shadow: var(--shadow-md);
}

.direction-projects::before {
  position: absolute;
  top: 3rem;
  right: 3vw;
  width: 23rem;
  height: 15rem;
  background-image: radial-gradient(rgb(9 91 232 / 16%) 0.12rem, transparent 0.13rem);
  background-size: 1.3rem 1.3rem;
  content: "";
  transform: rotate(-5deg);
}

.direction-projects::after {
  position: absolute;
  right: -7rem;
  bottom: -9rem;
  width: 22rem;
  height: 22rem;
  border: 3rem solid rgb(255 223 54 / 22%);
  border-radius: 50%;
  content: "";
}

.direction-projects .direction-wrap,
.direction-skills .direction-wrap,
.direction-path .direction-wrap,
.direction-fit .direction-wrap {
  position: relative;
  z-index: 1;
}

.direction-theme-mark {
  position: absolute;
  z-index: 0;
  color: var(--blue);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-tight);
  pointer-events: none;
  user-select: none;
}

.direction-theme-mark--projects {
  top: -1rem;
  right: -1rem;
  font-size: var(--heading-lg);
  opacity: 0;
  transform: rotate(5deg);
}

.direction-theme-mark--skills {
  bottom: -3rem;
  left: 2vw;
  color: var(--white);
  font-size: var(--heading-lg);
  opacity: 0;
  transform: rotate(-4deg);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: ОФОРМЛЕНИЕ И ПЕРСОНАЖИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: КАРТОЧКИ ПРОЕКТОВ
   ========================================================================== */

.direction-project-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.direction-project-card {
  position: relative;
  min-height: 25rem;
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-base) ease, transform var(--duration-base) ease;
}

.direction-project-card:nth-child(1) {
  transform: translateY(0.5rem) rotate(-0.7deg);
}

.direction-project-card:nth-child(2) {
  background: var(--yellow);
  transform: translateY(-0.6rem);
}

.direction-project-card:nth-child(3n) {
  border-color: rgb(255 255 255 / 12%);
  background: var(--navy);
  color: var(--white);
  transform: translateY(0.3rem) rotate(0.7deg);
}

.direction-project-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-0.5rem) rotate(0);
}

.direction-project-card:nth-child(3n) h3,
.direction-project-card:nth-child(3n) small {
  color: var(--white);
}

.direction-project-card small {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--blue);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.direction-project-card p {
  margin-top: var(--space-4);
  color: inherit;
  opacity: 0.8;
}

.direction-card-number {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  color: var(--blue);
  font-size: var(--font-size-display);
  font-weight: 900;
  opacity: 0.1;
}

.direction-project-visual {
  position: relative;
  height: 8.5rem;
  margin: var(--space-5) calc(-1 * var(--space-2));
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--blue-pale);
}

.direction-project-visual span {
  position: absolute;
  display: block;
}

.direction-project-visual--1 {
  background: radial-gradient(circle at 70% 35%, rgb(120 224 255 / 25%), transparent 5rem),
    var(--navy);
}

.direction-project-visual--1 span:nth-child(1) {
  bottom: 1rem;
  left: 1rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 45% 55% 50% 42%;
  background: var(--yellow);
}

.direction-project-visual--1 span:nth-child(2) {
  top: 3rem;
  left: 4.2rem;
  width: 5rem;
  height: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  transform: rotate(-14deg);
}

.direction-project-visual--1 span:nth-child(3) {
  top: 1.2rem;
  right: 1.3rem;
  width: 1.4rem;
  height: 1.4rem;
  border: 0.3rem solid var(--white);
  border-radius: 50%;
}

.direction-project-visual--2 {
  border: 0.1rem solid rgb(16 41 77 / 12%);
  background: rgb(255 255 255 / 68%);
}

.direction-project-visual--2 span {
  left: 1.2rem;
  height: 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--blue);
}

.direction-project-visual--2 span:nth-child(1) {
  top: 1.4rem;
  width: 60%;
}

.direction-project-visual--2 span:nth-child(2) {
  top: 3.6rem;
  width: 78%;
  background: var(--navy);
}

.direction-project-visual--2 span:nth-child(3) {
  top: 5.8rem;
  width: 48%;
  background: var(--white);
  box-shadow: inset 0 0 0 0.1rem var(--line);
}

.direction-project-visual--3 {
  background: linear-gradient(145deg, var(--blue), var(--blue));
}

.direction-project-visual--3 span {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.direction-project-visual--3 span:nth-child(1) {
  top: 1.1rem;
  left: 1.2rem;
}

.direction-project-visual--3 span:nth-child(2) {
  top: 4.4rem;
  left: 1.2rem;
  background: var(--yellow);
  box-shadow: var(--shadow-lg);
}

.direction-project-visual--3 span:nth-child(3) {
  right: 1.2rem;
  bottom: 1.1rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgb(16 41 77 / 32%);
  box-shadow: none;
}

.direction-page .direction-guide--projects {
  --direction-guide-rotate: 7deg;
  right: 4%;
  bottom: -2.5rem;
  width: 7rem;
  transform: rotate(var(--direction-guide-rotate));
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: КАРТОЧКИ ПРОЕКТОВ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: НАВЫКИ
   ========================================================================== */

.direction-skills {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 82% 18%, rgb(9 91 232 / 32%), transparent 26rem),
    radial-gradient(rgb(255 255 255 / 7%) 0.1rem, transparent 0.11rem) 0 0 / 1.8rem 1.8rem,
    var(--navy);
  color: var(--white);
}

.direction-skills h2,
.direction-skills h3 {
  color: var(--white);
}

.direction-skills .direction-section-number {
  color: var(--yellow);
}

.direction-skills .title-highlight--yellow {
  --title-highlight-stroke: var(--blue);
}

.direction-sticky-heading {
  align-self: start;
}

.direction-sticky-heading > p:last-child {
  max-width: 35rem;
  margin-top: var(--space-5);
  color: var(--on-dark-muted);
}

.direction-skill-list {
  border-top: 1px solid rgb(255 255 255 / 16%);
}

.direction-skill-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid rgb(255 255 255 / 16%);
  transition: background-color var(--duration-fast) ease, padding var(--duration-fast) ease;
}

.direction-skill-item:hover {
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 6%);
}

.direction-skill-item > span {
  color: var(--yellow);
  font-weight: 900;
}

.direction-skill-item p {
  margin-top: var(--space-2);
  color: var(--on-dark-muted);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: НАВЫКИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: ЭТАПЫ РАБОТЫ
   ========================================================================== */

.direction-page .direction-path-list {
  position: relative;
  display: grid;
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.direction-page .direction-path-list::before {
  position: absolute;
  top: 50%;
  right: 1rem;
  left: 1rem;
  border-top: 0.15rem dashed rgb(9 91 232 / 22%);
  content: "";
}

.direction-page .direction-path-list li + li {
  margin-top: 0;
}

.direction-path-list li {
  position: relative;
  z-index: 1;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.direction-path-list li:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-0.3rem);
}

.direction-path-list li::after {
  position: absolute;
  top: 50%;
  right: -1.2rem;
  z-index: 2;
  color: var(--yellow);
  font-size: var(--font-size-title);
  font-weight: 900;
  content: "»";
  transform: translateY(-50%);
}

.direction-path-list li:last-child::after {
  content: none;
}

.direction-path-list span {
  display: block;
  margin-bottom: var(--space-6);
  color: var(--blue);
  font-weight: 900;
}

.direction-path-list p {
  margin-top: var(--space-3);
  color: var(--muted);
}

.direction-page .direction-guide--path {
  --direction-guide-rotate: -7deg;
  top: -5rem;
  right: 1rem;
  width: 5.5rem;
  transform: rotate(var(--direction-guide-rotate));
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: ЭТАПЫ РАБОТЫ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: КОМУ ПОДОЙДЁТ
   ========================================================================== */

.direction-fit {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 88% 22%, rgb(255 223 54 / 18%), transparent 20rem),
    radial-gradient(circle at 8% 90%, rgb(9 91 232 / 7%), transparent 18rem),
    var(--white);
}

.direction-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.direction-fit-grid article {
  position: relative;
  padding: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.direction-fit-grid article:nth-child(2) {
  border-color: rgb(9 91 232 / 10%);
  background: var(--blue-pale);
  transform: translateY(-0.55rem) rotate(0.5deg);
}

.direction-fit-grid article:nth-child(3) {
  transform: translateX(0.55rem) rotate(-0.5deg);
}

.direction-fit-grid article:nth-child(4) {
  background: linear-gradient(135deg, var(--yellow-soft), var(--paper));
}

.direction-fit-grid article:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-0.3rem) rotate(0);
}

.direction-fit-grid article > span {
  display: block;
  margin-bottom: var(--space-5);
  color: var(--yellow);
  font-size: var(--heading-sm);
  font-weight: 900;
  line-height: var(--line-tight);
}

.direction-fit-grid p {
  margin-top: var(--space-2);
  color: var(--muted);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: КОМУ ПОДОЙДЁТ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: ФОТО И ВИДЕО
   ========================================================================== */

.direction-media {
  background: linear-gradient(135deg, var(--blue), var(--blue-hover));
  color: var(--white);
}

.direction-media h2 {
  color: var(--white);
}

.direction-media .direction-section-number {
  color: var(--yellow);
}

.direction-media .title-highlight--yellow {
  --title-highlight-stroke: var(--navy);
}

.direction-media .direction-section-heading > p {
  color: var(--on-dark-muted);
}

.direction-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.direction-media-card {
  margin: 0;
  overflow: hidden;
  border: 0.3rem solid var(--white);
  border-radius: var(--radius-lg);
  background: var(--navy);
  box-shadow: var(--shadow-md);
}

.direction-media-card img,
.direction-media-card video {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  object-fit: cover;
}

.direction-media-card figcaption {
  padding: var(--space-4);
  color: var(--white);
  font-weight: 900;
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: ФОТО И ВИДЕО
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: ЧАСТЫЕ ВОПРОСЫ
   ========================================================================== */

.direction-faq-list {
  border-top: 1px solid var(--line);
}

.direction-faq-list details {
  border-bottom: 1px solid var(--line);
}

.direction-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-size: var(--font-size-lead);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.direction-faq-list summary::-webkit-details-marker {
  display: none;
}

.direction-faq-list summary > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  transition: transform var(--duration-fast) ease;
}

.direction-faq-list details[open] summary > span {
  transform: rotate(45deg);
}

.direction-faq-list details > p {
  max-width: 42rem;
  padding: 0 var(--space-7) var(--space-5) 0;
  color: var(--muted);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: ЧАСТЫЕ ВОПРОСЫ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: СВЯЗАННЫЕ НАПРАВЛЕНИЯ
   ========================================================================== */

.direction-related {
  padding-block: var(--space-8);
}

.direction-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.direction-related-grid a {
  position: relative;
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.direction-related-grid a:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-0.2rem);
}

.direction-related-grid small {
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.direction-related-grid strong {
  margin-top: var(--space-2);
  color: var(--navy);
  font-size: var(--font-size-title);
  line-height: var(--line-heading);
}

.direction-related-grid a > span {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--navy);
  font-weight: 900;
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: СВЯЗАННЫЕ НАПРАВЛЕНИЯ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: НАПРАВЛЕНИЯ: ЗАПИСЬ НА ЗАНЯТИЕ
   ========================================================================== */

.direction-cta {
  padding-top: 0;
}

.direction-cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  border-radius: var(--radius-xl);
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}

.direction-cta-card::before {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  top: -8rem;
  right: 12%;
  width: 18rem;
  height: 18rem;
  border: 3rem solid rgb(9 91 232 / 35%);
}

.direction-cta-card::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  right: -2rem;
  bottom: -3rem;
  width: 8rem;
  height: 8rem;
  background-image: radial-gradient(rgb(255 223 54 / 55%) 0.1rem, transparent 0.11rem);
  background-size: 1rem 1rem;
}

.direction-cta-card > * {
  position: relative;
  z-index: 1;
}

.direction-cta-card h2 {
  color: var(--white);
}

.direction-cta-card p:not(.direction-section-number) {
  max-width: 44rem;
  margin-top: var(--space-4);
  color: var(--on-dark-muted);
}

.direction-cta-card .direction-section-number {
  color: var(--yellow);
}

.direction-cta-card .button-yellow {
  display: inline-flex;
  min-width: 15rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-color: var(--yellow);
  border-radius: var(--radius-md);
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 16%);
  font-weight: 900;
}

.direction-cta-card .button-yellow:hover {
  border-color: var(--yellow);
  background: var(--yellow);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: НАПРАВЛЕНИЯ: ЗАПИСЬ НА ЗАНЯТИЕ
   ========================================================================== */

@media (max-width: 1024px) {
  .direction-two-columns,
  .direction-section-heading {
    grid-template-columns: 1fr;
  }

  .direction-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: var(--space-8);
  }

  .direction-code-scene {
    min-height: 32rem;
  }

  .direction-project-grid,
  .direction-media-grid,
  .direction-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .direction-projects .direction-section-heading {
    grid-template-columns: 1fr;
  }

  .direction-projects .direction-section-heading > p {
    max-width: 42rem;
    margin-top: 0;
  }

  .direction-project-card:nth-child(1),
  .direction-project-card:nth-child(2),
  .direction-project-card:nth-child(3n),
  .direction-fit-grid article:nth-child(2),
  .direction-fit-grid article:nth-child(3) {
    transform: none;
  }

  .direction-page .direction-guide--intro {
    display: none;
  }

  .direction-theme-mark--projects {
    top: 2rem;
    right: 1rem;
  }

  .direction-page .direction-path-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .direction-path-list li:nth-child(2n):not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -1.25rem;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  .direction-sticky-heading {
    position: static;
  }
}

@media (max-width: 640px) {
  .direction-hero h1,
  .direction-section h2 {
    font-size: var(--heading-md);
  }

  .direction-hero-actions,
  .direction-hero-actions .button {
    width: 100%;
  }

  .direction-code-scene {
    min-height: 25rem;
  }

  .direction-code-window {
    width: 100%;
    border-radius: var(--radius-lg);
  }

  .direction-code-window pre {
    min-height: 15rem;
    padding: var(--space-5);
    font-size: var(--font-size-sm);
  }

  .direction-code-line {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--space-2);
  }

  .direction-code-cursor {
    margin-left: var(--space-6);
  }

  .direction-code-result strong {
    max-width: 65%;
    font-size: var(--font-size-body);
    text-align: right;
  }

  .direction-code-sticker {
    right: -0.2rem;
    bottom: -0.3rem;
    font-size: var(--font-size-xs);
  }

  .direction-orbit-one {
    width: 27rem;
    height: 27rem;
  }

  .direction-orbit-two {
    width: 20rem;
    height: 20rem;
  }

  .direction-project-grid,
  .direction-media-grid,
  .direction-related-grid,
  .direction-fit-grid {
    grid-template-columns: 1fr;
  }

  .direction-page .direction-path-list {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .direction-project-card {
    min-height: 22rem;
  }

  .direction-process {
    padding: var(--space-2) var(--space-3);
  }

  .direction-theme-mark--projects {
    font-size: 7rem;
  }

  .direction-page .direction-guide--projects {
    right: 0.5rem;
    bottom: -1.5rem;
    width: 5.5rem;
  }

  .direction-page .direction-guide--path {
    display: none;
  }

  .direction-page .direction-path-list::before {
    top: 1rem;
    right: auto;
    bottom: 1rem;
    left: 50%;
    border-top: 0;
    border-left: 0.15rem dashed rgb(9 91 232 / 22%);
  }

  .direction-path-list li,
  .direction-path-list li:nth-child(1),
  .direction-path-list li:nth-child(2),
  .direction-path-list li:nth-last-child(2),
  .direction-path-list li:last-child {
    margin: 0;
  }

  .direction-path-list li::after {
    top: auto;
    right: auto;
    bottom: -1.25rem;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  .direction-cta-card {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--space-5);
    border-radius: var(--radius-lg);
  }

  .direction-cta-card > * {
    min-width: 0;
  }

  .direction-cta-card h2 {
    font-size: var(--heading-sm);
  }

  .direction-cta-card .button-yellow {
    width: auto;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .direction-code-window {
    animation: directionCodeFloat 6s ease-in-out infinite;
  }

  .direction-code-sticker {
    animation: directionStickerNudge 4.5s ease-in-out infinite;
  }

  .direction-code-spark-one {
    animation: slowTurn 8s linear infinite;
  }

  .direction-code-line {
    animation: directionCodeLineIn 0.55s ease both;
  }

  .direction-code-line--1 {
    animation-delay: 0.25s;
  }

  .direction-code-line--2 {
    animation-delay: 0.65s;
  }

  .direction-code-line--3 {
    animation-delay: 1.05s;
  }

  .direction-code-cursor {
    animation: directionCursorBlink 0.85s steps(1) infinite;
  }

  .direction-guide {
    animation: directionGuideFloat 3.6s ease-in-out infinite;
  }

  .direction-guide--projects {
    animation-delay: -1.2s;
  }

  .direction-guide--path {
    animation-delay: -2.1s;
  }

  .direction-project-visual span {
    animation: directionVisualPulse 3s ease-in-out infinite;
  }

  .direction-project-visual span:nth-child(2) {
    animation-delay: -1s;
  }

  .direction-project-visual span:nth-child(3) {
    animation-delay: -2s;
  }

  .direction-path-list li::after {
    animation: directionArrowPulse 1.4s ease-in-out infinite;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: СТРАНИЦЫ НАПРАВЛЕНИЙ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ И РАСПИСАНИЕ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ И РАСПИСАНИЕ: АНИМАЦИИ
   ========================================================================== */

@keyframes pricesEnterUp {
  from {
    opacity: 0;
    transform: translateY(1.3rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pricesEnterRight {
  from {
    opacity: 0;
    transform: translateX(1.8rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pricesReveal {
  from {
    opacity: 0;
    translate: 0 1.3rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes pricesBoardFloat {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0);
  }
  50% {
    transform: rotate(-1.2deg) translateY(-0.35rem);
  }
}

@keyframes pricesOrbitPulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes pricesSoftikFloat {
  0%,
  100% {
    transform: rotate(9deg) translateY(0);
  }
  50% {
    transform: rotate(4deg) translateY(-0.45rem);
  }
}

@keyframes pricesStickerNudge {
  0%,
  72%,
  100% {
    transform: rotate(4deg) translateY(0);
  }
  80% {
    transform: rotate(1deg) translateY(-0.35rem);
  }
  88% {
    transform: rotate(5deg) translateY(0.05rem);
  }
}

@keyframes pricesSparkPulse {
  0%,
  100% {
    opacity: 0.7;
    transform: rotate(-10deg) scale(1);
  }
  50% {
    opacity: 1;
    transform: rotate(8deg) scale(1.12);
  }
}

@keyframes pricesSparkTurn {
  to {
    transform: rotate(372deg);
  }
}

@keyframes pricesTrackFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes pricesNumberRock {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0);
  }
  50% {
    transform: rotate(1deg) translateY(-0.2rem);
  }
}

@keyframes pricesDiscountFloat {
  0%,
  100% {
    transform: rotate(-3deg) translateY(0);
  }
  50% {
    transform: rotate(-1deg) translateY(-0.3rem);
  }
}

@keyframes pricesCtaHalo {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(0.5rem) scale(1.04);
  }
}

@keyframes pricesCtaDots {
  0%,
  100% {
    transform: translate(0);
  }
  50% {
    transform: translate(-0.25rem, -0.2rem);
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ И РАСПИСАНИЕ: АНИМАЦИИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ: ОБЩИЕ СТИЛИ
   ========================================================================== */

.inner-main:has(.prices-page) {
  padding: 0;
  overflow: hidden;
  background: var(--white);
}

.inner-shell:has(.prices-page),
.component-content:has(.prices-page) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.prices-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--navy);
  background: var(--white);
}

.prices-page p {
  margin: 0;
}

.prices-page h3 {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.prices-page a:not(.button) {
  text-decoration: none;
}

.prices-wrap {
  position: relative;
  z-index: 2;
  margin-inline: auto;
}

.prices-section {
  position: relative;
  padding-block: var(--section-space);
  overflow: hidden;
}

.prices-section-number {
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: 900;
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.prices-page h1 {
  margin: 0;
  color: inherit;
  max-width: 11ch;
  font-size: var(--heading-lg);
  line-height: var(--line-tight);
  text-wrap: balance;
}

.prices-page h2 {
  margin: 0;
  color: inherit;
  font-size: var(--heading-lg);
  line-height: var(--line-tight);
  text-wrap: balance;
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ: ОБЩИЕ СТИЛИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ: HERO
   ========================================================================== */

.prices-hero {
  position: relative;
  min-height: 45rem;
  padding-block: var(--space-10) clamp(var(--space-9), 8vw, var(--space-10));
  overflow: hidden;
  background: radial-gradient(circle at 87% 20%, rgb(9 91 232 / 12%), transparent 24rem),
    linear-gradient(135deg, var(--white) 0%, var(--paper) 58%, var(--blue-pale) 100%);
}

.prices-hero::before {
  position: absolute;
  border: 0.1rem solid rgb(9 91 232 / 12%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  top: 3rem;
  right: -10rem;
  width: 38rem;
  height: 38rem;
}

.prices-hero::after {
  position: absolute;
  border: 0.1rem solid rgb(9 91 232 / 12%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  right: 6rem;
  bottom: -14rem;
  width: 28rem;
  height: 28rem;
}

.prices-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr);
  align-items: center;
  gap: var(--grid-gap);
}

.prices-hero-copy {
  min-width: 0;
}

.prices-kicker {
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: 900;
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.prices-hero-lead {
  max-width: 38rem;
  margin-top: var(--space-6);
  color: var(--text);
  font-size: var(--font-size-lead);
  line-height: var(--line-body);
}

.prices-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
}

.prices-hero-actions .button {
  min-height: 3.5rem;
}

.prices-text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  color: var(--blue);
  font-size: var(--font-size-sm);
  font-weight: 900;
}

.prices-text-link::after {
  display: inline-block;
  margin-left: 0.55rem;
  font-size: var(--font-size-lead);
  content: "↓";
  transition: transform var(--duration-fast) ease;
}

.prices-text-link:hover::after {
  transform: translateY(0.25rem);
}

.prices-free-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.prices-free-note span {
  color: var(--yellow);
  font-size: var(--font-size-display);
  font-weight: 900;
  line-height: var(--line-tight);
}

.prices-hero-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 35rem;
}

.prices-orbit {
  position: absolute;
  border: 0.1rem solid rgb(9 91 232 / 17%);
  border-radius: 50%;
  pointer-events: none;
}

.prices-orbit-one {
  width: 35rem;
  height: 35rem;
}

.prices-orbit-two {
  width: 26rem;
  height: 26rem;
  border-style: dashed;
}

.prices-hero-spark {
  position: absolute;
  z-index: 3;
  color: var(--blue);
  font-size: var(--heading-sm);
  font-weight: 900;
  line-height: var(--line-tight);
}

.prices-hero-spark-one {
  top: 4rem;
  left: 3rem;
  color: var(--yellow);
  transform: rotate(-10deg);
}

.prices-hero-spark-two {
  top: 7rem;
  right: 3rem;
  transform: rotate(12deg);
}

.prices-hero-board {
  position: relative;
  z-index: 2;
  width: min(31rem, 88%);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-md);
  background: var(--navy);
  box-shadow: var(--shadow-lg);
  color: var(--white);
  transform: rotate(-2deg);
}

.prices-hero-board::before {
  position: absolute;
  top: -7rem;
  right: -6rem;
  width: 18rem;
  height: 18rem;
  border: 2.2rem solid rgb(9 91 232 / 23%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.prices-hero-board-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
}

.prices-hero-board-top span {
  color: var(--yellow);
  font-weight: 900;
}

.prices-hero-board-top strong {
  font-size: var(--font-size-xs);
}

.prices-hero-time {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.prices-hero-time--main {
  background: var(--yellow);
  color: var(--navy);
}

.prices-hero-time small {
  font-size: var(--font-size-xs);
  font-weight: 900;
  line-height: var(--line-copy);
  letter-spacing: var(--tracking-label);
}

.prices-hero-time strong {
  font-size: var(--heading-sm);
  font-weight: 900;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}

.prices-hero-board-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  font-size: var(--font-size-xs);
}

.prices-hero-board-bottom span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--blue);
  font-weight: 900;
}

.prices-hero-board-bottom b {
  color: var(--on-dark-muted);
}

.prices-hero-sticker {
  position: absolute;
  z-index: 4;
  right: 0.5rem;
  bottom: 3.8rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-md);
  color: var(--navy);
  font-size: var(--font-size-xs);
  font-weight: 900;
  transform: rotate(4deg);
}

.prices-hero-sticker span {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--success);
}

.prices-hero-softik {
  position: absolute;
  z-index: 3;
  right: 1rem;
  top: 2rem;
  width: 5.5rem;
  transform: rotate(9deg);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ: HERO
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ: ЗАГОЛОВКИ СЕКЦИЙ
   ========================================================================== */

.prices-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.55fr);
  align-items: end;
  gap: var(--grid-gap);
  margin-bottom: clamp(var(--space-7), 5vw, var(--space-8));
}

.prices-section-heading > * {
  min-width: 0;
}

.prices-section-heading .prices-section-number {
  margin-bottom: var(--space-5);
}

.prices-section-heading > p {
  padding-bottom: var(--space-2);
  color: var(--text);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ: ЗАГОЛОВКИ СЕКЦИЙ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ: РАСПИСАНИЕ
   ========================================================================== */

.prices-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-3);
}

.prices-day-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 12.5rem;
  flex-direction: column;
  padding: var(--space-5) var(--space-4);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

.prices-day-card::after {
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  width: 5rem;
  height: 5rem;
  border: 1rem solid rgb(9 91 232 / 6%);
  border-radius: 50%;
  content: "";
}

.prices-day-card > span {
  color: var(--blue);
  font-size: var(--font-size-card);
  font-weight: 900;
}

.prices-day-card small {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.prices-day-card time,
.prices-day-card > strong {
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: var(--navy);
  font-size: var(--font-size-display);
  font-weight: 900;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}

.prices-day-card time + time {
  margin-top: var(--space-2);
}

.prices-day-card--weekend {
  border-color: var(--yellow);
  background: var(--yellow);
  box-shadow: var(--shadow-md);
}

.prices-day-card--weekend > span {
  color: var(--navy);
}

.prices-day-card--weekend small {
  color: rgb(16 41 77 / 65%);
}

.prices-schedule-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--blue-pale);
}

.prices-schedule-note > span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: var(--font-size-lead);
  font-weight: 900;
}

.prices-schedule-note p {
  color: var(--text);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
}

.prices-schedule-note strong {
  color: var(--navy);
}

.prices-schedule-note a {
  color: var(--blue);
  font-size: var(--font-size-sm);
  font-weight: 900;
  white-space: nowrap;
}

.prices-schedule-note a:hover {
  color: var(--blue-hover);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ: РАСПИСАНИЕ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ: ФОРМАТ ЗАНЯТИЙ
   ========================================================================== */

.prices-flexibility {
  background: radial-gradient(circle at 0 100%, rgb(9 91 232 / 18%), transparent 24rem),
    var(--navy);
  color: var(--white);
}

.prices-flexibility::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 12%) 0.1rem, transparent 0.1rem);
  background-size: 1.2rem 1.2rem;
  content: "";
  mask-image: linear-gradient(90deg, transparent 10%, var(--black) 55%, transparent 100%);
  pointer-events: none;
}

.prices-section-heading--light h2 {
  color: var(--white);
}

.prices-section-heading--light > p {
  color: var(--on-dark-muted);
}

.prices-section-heading--light .prices-section-number,
.prices-yellow-text {
  color: var(--yellow);
}

.prices-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.prices-benefit-grid article::after {
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 8rem;
  height: 8rem;
  border: 1.4rem solid rgb(9 91 232 / 28%);
  border-radius: 50%;
  content: "";
}

.prices-benefit-grid span {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-sm);
  font-weight: 900;
}

.prices-benefit-grid h3 {
  max-width: 12ch;
  margin-top: var(--space-7);
  color: var(--white);
  font-size: var(--font-size-display);
}

.prices-benefit-grid p {
  position: relative;
  z-index: 1;
  max-width: 28rem;
  margin-top: var(--space-4);
  color: var(--on-dark-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-body);
}

.prices-pace-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(24rem, 1.2fr);
  align-items: center;
  gap: var(--grid-gap);
  margin-top: var(--space-4);
  padding: clamp(var(--space-6), 4vw, var(--space-7));
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-xl);
  background: rgb(255 255 255 / 7%);
}

.prices-pace-card::after {
  position: absolute;
  left: -5rem;
  bottom: -7rem;
  width: 15rem;
  height: 15rem;
  border: 2rem solid rgb(9 91 232 / 24%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.prices-pace-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.prices-pace-copy small {
  color: var(--yellow);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
}

.prices-pace-copy h3 {
  max-width: 15ch;
  margin-top: var(--space-3);
  color: var(--white);
  font-size: var(--heading-sm);
  line-height: var(--line-tight);
}

.prices-pace-copy p {
  max-width: 33rem;
  margin-top: var(--space-4);
  color: var(--on-dark-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-body);
}

.prices-pace-board {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: rgb(4 25 58 / 48%);
}

.prices-pace-row > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.prices-pace-row strong {
  color: var(--white);
  font-size: var(--font-size-sm);
}

.prices-pace-row span {
  color: rgb(255 255 255 / 58%);
  font-size: var(--font-size-xs);
  line-height: var(--line-copy);
}

.prices-pace-track {
  display: block;
  height: 0.65rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: rgb(255 255 255 / 12%);
}

.prices-pace-track b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--yellow);
}

.prices-pace-track--scratch b {
  width: 38%;
}

.prices-pace-track--web b {
  width: 72%;
  background: var(--white);
}

.prices-pace-track--python b {
  width: 52%;
  background: var(--blue);
}

.prices-pace-track--design b {
  width: 86%;
  background: var(--yellow);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ: ФОРМАТ ЗАНЯТИЙ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ: АБОНЕМЕНТЫ И ПРОБНОЕ ЗАНЯТИЕ
   ========================================================================== */

.prices-tariffs {
  background: var(--paper);
}

.prices-all-directions {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--grid-gap-small);
  margin-bottom: var(--space-4);
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.prices-all-directions::after {
  position: absolute;
  top: -5rem;
  right: 20%;
  width: 12rem;
  height: 12rem;
  border: 1.8rem solid rgb(9 91 232 / 30%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.prices-all-directions > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.prices-all-directions > strong {
  color: var(--yellow);
  font-size: var(--heading-lg);
  font-weight: 900;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}

.prices-all-directions small {
  color: var(--yellow);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
}

.prices-all-directions h3 {
  margin-top: var(--space-1);
  color: var(--white);
  font-size: var(--heading-sm);
}

.prices-all-directions p {
  max-width: 50rem;
  margin-top: var(--space-2);
  color: var(--on-dark-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
}

.prices-all-directions > a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding-inline: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-sm);
  font-weight: 900;
  white-space: nowrap;
  transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.prices-all-directions > a:hover {
  background: var(--yellow);
  transform: translateY(-0.15rem);
}

.prices-tariff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.prices-tariff-card::after {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 13rem;
  height: 13rem;
  border: 2rem solid currentColor;
  border-radius: 50%;
  opacity: 0.1;
  content: "";
  pointer-events: none;
}

.prices-tariff-card--primary {
  background: var(--blue);
  color: var(--white);
}

.prices-tariff-card--yellow {
  background: var(--yellow);
  color: var(--navy);
}

.prices-tariff-card--light {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
}

.prices-tariff-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.prices-tariff-top span,
.prices-tariff-top b {
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
}

.prices-tariff-card--primary .prices-tariff-top span {
  color: var(--yellow);
}

.prices-tariff-card--primary .prices-tariff-top b {
  color: rgb(255 255 255 / 50%);
}

.prices-tariff-card--yellow .prices-tariff-top span {
  color: var(--blue);
}

.prices-tariff-card--yellow .prices-tariff-top b,
.prices-tariff-card--light .prices-tariff-top b {
  color: rgb(16 41 77 / 32%);
}

.prices-tariff-card--light .prices-tariff-top span {
  color: var(--blue);
}

.prices-tariff-card h3 {
  position: relative;
  z-index: 1;
  margin-top: var(--space-8);
  font-size: var(--heading-md);
  line-height: var(--line-tight);
}

.prices-tariff-card > p {
  position: relative;
  z-index: 1;
  margin-top: var(--space-2);
  font-size: var(--font-size-body);
  font-weight: 700;
  opacity: 0.6;
}

.prices-tariff-card > strong {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: var(--heading-md);
  font-weight: 900;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}

.prices-tariff-card > a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.4rem;
  margin-top: var(--space-5);
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 900;
  transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.prices-tariff-card > a:hover {
  transform: translateY(-0.15rem);
}

.prices-tariff-card--primary > a {
  background: var(--white);
  color: var(--blue);
}

.prices-tariff-card--primary > a:hover {
  background: var(--yellow);
}

.prices-tariff-card--yellow > a {
  background: var(--navy);
  color: var(--white);
}

.prices-tariff-card--yellow > a:hover {
  background: var(--blue);
}

.prices-tariff-card--light > a {
  background: var(--blue-pale);
  color: var(--blue);
}

.prices-tariff-card--light > a:hover {
  background: var(--yellow);
  color: var(--navy);
}

.prices-trial-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.prices-trial-card > span {
  color: var(--yellow);
  font-size: var(--heading-md);
  font-weight: 900;
  line-height: var(--line-tight);
}

.prices-trial-card small {
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-wide);
}

.prices-trial-card h3 {
  margin-top: var(--space-1);
  font-size: var(--font-size-display);
}

.prices-trial-card p {
  max-width: 768px;
  margin-top: var(--space-2);
  color: var(--text);
  font-size: var(--font-size-sm);
  line-height: var(--line-copy);
}

.prices-trial-card .button {
  min-width: 11rem;
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ: АБОНЕМЕНТЫ И ПРОБНОЕ ЗАНЯТИЕ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ: СКИДКИ
   ========================================================================== */

.prices-discount {
  background: radial-gradient(circle at 90% 10%, rgb(255 223 54 / 23%), transparent 21rem),
    var(--white);
}

.prices-discount::after {
  position: absolute;
  right: -3rem;
  bottom: -7rem;
  width: 20rem;
  height: 20rem;
  border: 2.8rem solid var(--blue-pale);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.prices-discount-grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.75fr) minmax(0, 1.25fr);
  gap: var(--grid-gap);
}

.prices-discount-heading {
  min-width: 0;
}

.prices-discount-heading .prices-section-number {
  margin-bottom: var(--space-5);
}

.prices-discount-value {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--yellow);
  font-size: var(--heading-lg);
  font-weight: 900;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
  text-shadow: 0.08rem 0.08rem 0 var(--navy);
  transform: rotate(-3deg);
}

.prices-discount-heading h2 {
  font-size: var(--heading-md);
}

.prices-discount-content {
  min-width: 0;
}

.prices-condition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.prices-condition-grid span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-xs);
  font-weight: 900;
}

.prices-condition-grid p {
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-copy);
}

.prices-discount-contact {
  margin-top: var(--space-5);
  color: var(--text);
  font-size: var(--font-size-sm);
}

.prices-discount-contact a {
  display: inline-block;
  margin-left: var(--space-1);
  color: var(--blue);
  font-weight: 900;
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ: СКИДКИ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ: ЧАСТЫЕ ВОПРОСЫ
   ========================================================================== */

.prices-faq {
  background: var(--paper);
}

.prices-faq-grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: var(--grid-gap);
}

.prices-faq-heading {
  min-width: 0;
}

.prices-faq-heading .prices-section-number {
  margin-bottom: var(--space-5);
}

.prices-faq-heading h2 {
  font-size: var(--heading-md);
}

.prices-faq-heading > p:last-child {
  max-width: 480px;
  margin-top: var(--space-5);
  color: var(--text);
  font-size: var(--font-size-sm);
  line-height: var(--line-body);
}

.prices-faq-list {
  min-width: 0;
  border-top: 1px solid var(--line);
}

.prices-faq-list details {
  border-bottom: 1px solid var(--line);
}

.prices-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  color: var(--navy);
  font-size: var(--font-size-body);
  font-weight: 900;
  line-height: var(--line-copy);
  list-style: none;
  cursor: pointer;
}

.prices-faq-list summary::-webkit-details-marker {
  display: none;
}

.prices-faq-list summary > span {
  display: grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--font-size-card);
  line-height: var(--line-tight);
  transition: transform var(--duration-fast) ease;
}

.prices-faq-list details[open] summary > span {
  transform: rotate(45deg);
}

.prices-faq-list details > p {
  max-width: 768px;
  padding: 0 var(--space-7) var(--space-5) 0;
  color: var(--text);
  font-size: var(--font-size-sm);
  line-height: var(--line-body);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ: ЧАСТЫЕ ВОПРОСЫ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ: ЗАПИСЬ НА ЗАНЯТИЕ
   ========================================================================== */

.prices-cta {
  padding-top: 0;
  background: var(--white);
}

.prices-cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-7);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy);
  color: var(--white);
}

.prices-cta-card::before {
  position: absolute;
  top: -7rem;
  right: 15%;
  width: 17rem;
  height: 17rem;
  border: 2.3rem solid rgb(9 91 232 / 34%);
  border-radius: 50%;
  content: "";
}

.prices-cta-card::after {
  position: absolute;
  right: 1.5rem;
  bottom: 1.2rem;
  width: 7rem;
  height: 4rem;
  background-image: radial-gradient(var(--yellow) 0.1rem, transparent 0.1rem);
  background-size: 0.9rem 0.9rem;
  content: "";
  opacity: 0.6;
}

.prices-cta-card > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.prices-cta-card .prices-section-number {
  margin-bottom: var(--space-4);
  color: var(--yellow);
}

.prices-cta-card h2 {
  max-width: 13ch;
  color: var(--white);
  font-size: var(--heading-lg);
}

.prices-cta-card h2 span {
  color: var(--yellow);
}

.prices-cta-card p:not(.prices-section-number) {
  max-width: 768px;
  margin-top: var(--space-4);
  color: var(--on-dark-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-body);
}

.prices-cta-card .button-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 3.8rem;
  padding-inline: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--yellow);
  color: var(--navy);
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 16%);
  transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.prices-cta-card .button-yellow:hover {
  background: var(--yellow);
  transform: translateY(-0.15rem);
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ: ЗАПИСЬ НА ЗАНЯТИЕ
   ========================================================================== */

/* ==========================================================================
   НАЧАЛО БЛОКА: ЦЕНЫ: АНИМАЦИИ
   ========================================================================== */

.prices-benefit-grid article {
  position: relative;
  min-height: 18rem;
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 6%);
  transition: transform var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

.prices-pace-row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(10rem, 1.3fr);
  align-items: center;
  gap: var(--space-4);
  min-height: 4.4rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 7%);
  transition: transform var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

.prices-tariff-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 29rem;
  flex-direction: column;
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

.prices-condition-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  min-height: 7.5rem;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  transition: transform var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ: АНИМАЦИИ
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .prices-faq-list summary:hover {
    color: var(--blue);
  }

  .prices-day-card:hover,
  .prices-condition-grid article:hover {
    transform: translateY(-0.3rem);
    border-color: rgb(9 91 232 / 32%);
    box-shadow: var(--shadow-md);
  }

  .prices-benefit-grid article:hover {
    transform: translateY(-0.3rem);
    border-color: rgb(255 223 54 / 48%);
    background: rgb(255 255 255 / 9%);
  }

  .prices-tariff-card:hover {
    transform: translateY(-0.3rem);
    box-shadow: var(--shadow-lg);
  }

  .prices-pace-row:hover {
    background: rgb(255 255 255 / 11%);
    transform: translateX(0.25rem);
  }
}

@media (max-width: 1200px) {
  .prices-hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
    gap: var(--space-6);
  }

  .prices-orbit-one {
    width: 30rem;
    height: 30rem;
  }

  .prices-orbit-two {
    width: 22rem;
    height: 22rem;
  }

  .prices-week-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .prices-day-card:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 1024px) {
  .prices-faq-heading {
    max-width: 768px;
  }

  .prices-faq-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .prices-faq-list summary {
    gap: var(--space-4);
    padding-block: var(--space-4);
    font-size: var(--font-size-sm);
  }

  .prices-faq-list details > p {
    padding-right: 0;
  }

  .prices-hero-grid,
  .prices-discount-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .prices-hero-copy {
    max-width: 46rem;
  }

  .prices-hero-scene {
    min-height: 32rem;
  }

  .prices-section-heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-5);
  }

  .prices-section-heading > p {
    max-width: 42rem;
    padding-bottom: 0;
  }

  .prices-pace-copy {
    max-width: 46rem;
  }

  .prices-tariff-card--light h3 {
    max-width: 13ch;
  }

  .prices-discount-heading {
    max-width: 768px;
  }

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

  .prices-day-card {
    grid-column: auto;
  }

  .prices-day-card:last-child {
    grid-column: 1 / -1;
  }

  .prices-schedule-note {
    grid-template-columns: minmax(0, 1fr);
  }

  .prices-pace-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
  }

  .prices-pace-board {
    padding: var(--space-3);
  }

  .prices-pace-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .prices-all-directions {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
  }

  .prices-all-directions > a {
    width: 100%;
    grid-column: auto;
  }

  .prices-schedule-note > span {
    width: 2.2rem;
    height: 2.2rem;
  }

  .prices-schedule-note a {
    white-space: normal;
  }

  .prices-benefit-grid,
  .prices-tariff-grid,
  .prices-condition-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .prices-tariff-card--light {
    grid-column: auto;
  }

  .prices-benefit-grid article {
    min-height: 16rem;
  }

  .prices-tariff-card {
    min-height: 25rem;
  }

  .prices-trial-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .prices-trial-card > span {
    font-size: var(--heading-sm);
  }

  .prices-trial-card .button {
    width: 100%;
    min-width: 0;
  }

  .prices-cta-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
  }

  .prices-cta-card .button-yellow {
    width: 100%;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .prices-hero {
    min-height: auto;
    padding-block: var(--space-9) var(--space-8);
  }

  .prices-page h1,
  .prices-page h2 {
    font-size: var(--heading-md);
  }

  .prices-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .prices-hero-actions .button {
    width: 100%;
  }

  .prices-hero-scene {
    min-height: 26rem;
  }

  .prices-hero-board {
    width: 100%;
  }

  .prices-hero-time {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .prices-hero-sticker {
    right: -0.3rem;
    bottom: 1.5rem;
  }

  .prices-hero-softik {
    right: 0;
    display: none;
  }

  .prices-orbit-one {
    width: 25rem;
    height: 25rem;
  }

  .prices-orbit-two {
    width: 18rem;
    height: 18rem;
  }

  .prices-week-grid {
    gap: var(--space-2);
  }

  .prices-day-card {
    min-height: 10.5rem;
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  .prices-day-card time,
  .prices-day-card > strong {
    font-size: var(--font-size-title);
  }

  .prices-benefit-grid article,
  .prices-tariff-card {
    padding: var(--space-5);
  }

  .prices-condition-grid article {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .prices-hero-copy {
    animation: pricesEnterUp 0.7s ease-out both;
  }

  .prices-hero-scene {
    animation: pricesEnterRight 0.85s 0.1s ease-out both;
  }

  .prices-hero-board {
    animation: pricesBoardFloat 6.5s 1s ease-in-out infinite;
  }

  .prices-orbit-one {
    animation: pricesOrbitPulse 7s ease-in-out infinite;
  }

  .prices-orbit-two {
    animation: slowTurn 24s linear infinite;
  }

  .prices-hero-softik {
    animation: pricesSoftikFloat 4.8s ease-in-out infinite;
  }

  .prices-hero-sticker {
    animation: pricesStickerNudge 4.6s ease-in-out infinite;
  }

  .prices-hero-spark-one {
    animation: pricesSparkPulse 3.8s ease-in-out infinite;
  }

  .prices-hero-spark-two {
    animation: pricesSparkTurn 10s linear infinite;
  }

  .prices-page.prices-motion-ready .prices-motion-item {
    opacity: 0;
    translate: 0 1.3rem;
  }

  .prices-page.prices-motion-ready .prices-motion-item.is-visible {
    animation: pricesReveal 0.62s var(--prices-reveal-delay, 0ms) ease-out both;
  }

  .prices-page.prices-motion-ready .prices-pace-card.is-visible .prices-pace-track b {
    transform-origin: left center;
    animation: pricesTrackFill 0.9s calc(var(--prices-reveal-delay, 0ms) + 260ms) ease-out both;
  }

  .prices-page.prices-motion-ready .prices-pace-card.is-visible .prices-pace-row:nth-child(2) .prices-pace-track b {
    animation-delay: calc(var(--prices-reveal-delay, 0ms) + 340ms);
  }

  .prices-page.prices-motion-ready .prices-pace-card.is-visible .prices-pace-row:nth-child(3) .prices-pace-track b {
    animation-delay: calc(var(--prices-reveal-delay, 0ms) + 420ms);
  }

  .prices-page.prices-motion-ready .prices-pace-card.is-visible .prices-pace-row:nth-child(4) .prices-pace-track b {
    animation-delay: calc(var(--prices-reveal-delay, 0ms) + 500ms);
  }

  .prices-page.prices-motion-ready .prices-all-directions.is-visible > strong {
    animation: pricesNumberRock 4.8s 0.7s ease-in-out infinite;
  }

  .prices-page.prices-motion-ready .prices-discount-heading.is-visible .prices-discount-value {
    animation: pricesDiscountFloat 5.2s 0.65s ease-in-out infinite;
  }

  .prices-page.prices-motion-ready .prices-cta-card.is-visible::before {
    animation: pricesCtaHalo 7s 0.5s ease-in-out infinite;
  }

  .prices-page.prices-motion-ready .prices-cta-card.is-visible::after {
    animation: pricesCtaDots 4s 0.5s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prices-page *,
  .prices-page *::before,
  .prices-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   КОНЕЦ БЛОКА: ЦЕНЫ И РАСПИСАНИЕ
   ========================================================================== */